/* Shared styles for /login and /app (Tailwind CDN handles the utility classes). */
:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: #070708; color: #fff;
}
.pixel { font-family: 'Silkscreen', cursive; font-weight: 400; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* glass */
.glass-d {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.glass-d-strong {
  background: rgba(14,14,16,.72);
  border: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
}

/* form fields */
.field {
  width: 100%; border-radius: 14px; padding: .72rem .95rem;
  font-size: .9rem; line-height: 1.35; color: #fff; outline: none;
  background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.1);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field::placeholder { color: rgba(255,255,255,.3); }
.field:hover { border-color: rgba(255,255,255,.18); }
.field:focus { border-color: rgba(255,255,255,.4); box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.field[aria-invalid="true"] { border-color: rgba(248,113,113,.7); }
input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .55; cursor: pointer; }
label.lbl { display: block; margin-bottom: .45rem; font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px;
  font-size: .875rem; font-weight: 600; padding: .72rem 1.4rem; cursor: pointer; border: 0;
  transition: opacity .2s, transform .15s, background-color .2s; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-white { background: #fff; color: #010101; }
.btn-white:hover:not(:disabled) { opacity: .9; }
.btn-ghost { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.08); font-weight: 500; }
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.14); color: #fff; }
.btn-danger { background: rgba(239,68,68,.18); color: #fca5a5; border: 1px solid rgba(239,68,68,.35); font-weight: 500; }
.btn-sm { padding: .42rem .85rem; font-size: .78rem; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px;
  color: rgba(255,255,255,.55); background: transparent; border: 0; cursor: pointer; transition: background-color .2s, color .2s; }
.icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

/* channel / schedule chips */
.chip { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; padding: .5rem .9rem;
  font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.8); cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  transition: background-color .2s, color .2s, transform .15s, border-color .2s; }
.chip:hover { background: rgba(255,255,255,.13); color: #fff; }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: #fff; color: #010101; border-color: #fff; }

/* status badges */
.badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: 9999px; padding: .18rem .6rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em; border: 1px solid transparent; }
.badge::before { content: ''; width: .35rem; height: .35rem; border-radius: 9999px; background: currentColor; }
.badge-scheduled  { color: #7dd3fc; background: rgba(56,189,248,.12);  border-color: rgba(56,189,248,.25); }
.badge-processing { color: #fcd34d; background: rgba(251,191,36,.12);  border-color: rgba(251,191,36,.25); }
.badge-sent       { color: #6ee7b7; background: rgba(52,211,153,.12);  border-color: rgba(52,211,153,.25); }
.badge-failed     { color: #fca5a5; background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.28); }
.badge-cancelled  { color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }

/* motion */
.spinner { width: 1rem; height: 1rem; border-radius: 9999px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; animation: spin .7s linear infinite; }
.spinner-dark { border-color: rgba(0,0,0,.2); border-top-color: #010101; }
@keyframes spin { to { transform: rotate(360deg); } }
.shake { animation: shake .35s ease-in-out; }
@keyframes shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
.pop { animation: pop .4s cubic-bezier(.16,1,.3,1); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeup .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pop, .fade-up, .shake { animation: none; } .spinner { animation-duration: 2s; } }

/* skeleton */
.skeleton { border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: sk 1.4s ease-in-out infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* toasts */
#toasts { position: fixed; z-index: 100; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .6rem; max-width: min(22rem, calc(100vw - 2rem)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; border-radius: 16px; font-size: .85rem; line-height: 1.4;
  background: rgba(18,18,22,.92); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); animation: pop .35s cubic-bezier(.16,1,.3,1); }
.toast.out { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.toast-ok .toast-ico { color: #34d399; } .toast-err .toast-ico { color: #f87171; } .toast-info .toast-ico { color: #7dd3fc; }

/* modal */
dialog.vane-dialog { padding: 0; border: 0; background: transparent; color: #fff; max-width: min(34rem, calc(100vw - 1.5rem)); width: 100%; max-height: calc(100vh - 2rem); overflow: visible; margin: auto; }
dialog.vane-dialog::backdrop { background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
dialog.vane-dialog[open] { animation: pop .4s cubic-bezier(.16,1,.3,1); }