/* CalixMeeting — design tokens + shared components.
   Theme: DARK BLUE + BRIGHT GOLD. Foreground text is near-white on deep navy for
   strong contrast (WCAG AA+); gold is reserved for accents, headings & primary CTAs.
   Admin can override --accent / --accent-2 / --brand-blue live (see theme-vars). */
:root{
  /* surfaces (deep navy) */
  --navy-900:#060B1C; --navy-850:#0A1230; --navy-800:#0C1738; --navy-700:#111F45;
  --navy-600:#16264F; --navy-500:#1E3163;
  --bg:#0A1230; --bg-2:#0C1738; --card:#111F45; --card-2:#16264F;
  --line:#233560; --line-soft:#1b2a52;

  /* brand */
  --brand-blue:#3B6BFF; --indigo:#5B78FF; --cyan:#38D6F0;
  --accent:#F6C651;          /* bright gold */
  --accent-2:#FFD874;        /* light gold */
  --accent-deep:#E0A93A;     /* deep gold */
  --gold:linear-gradient(135deg,#FFDD82 0%,#F6C651 45%,#E0A93A 100%);
  --brand:linear-gradient(135deg,#3B6BFF 0%,#5B78FF 55%,#38D6F0 100%);
  --brand-soft:linear-gradient(135deg,rgba(59,107,255,.18),rgba(56,214,240,.12));
  --gold-soft:linear-gradient(135deg,rgba(246,198,81,.16),rgba(224,169,58,.08));

  /* text — high contrast on navy */
  --ink:#EAF0FF; --ink-2:#C4D0F0; --muted:#8D9AC4; --on-gold:#0A1230;

  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow:0 16px 40px rgba(0,0,0,.45);
  --shadow-lg:0 30px 70px rgba(0,0,0,.55);
  --glow-gold:0 10px 30px rgba(246,198,81,.35);
  --glow-blue:0 10px 30px rgba(59,107,255,.4);
  --radius:18px; --radius-sm:12px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
a{color:var(--accent-2);text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.14;margin:0 0 .4em;letter-spacing:-.02em;color:#fff}
.container{width:min(1180px,92vw);margin:0 auto}
.gradient-text{background:var(--gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.blue-text{background:var(--brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;justify-content:center;
  font-weight:700;font-size:.96rem;padding:.72rem 1.25rem;border-radius:12px;border:1px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,border-color .2s;white-space:nowrap;font-family:inherit}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold);color:var(--on-gold);box-shadow:var(--glow-gold)}
.btn-primary:hover{box-shadow:0 14px 38px rgba(246,198,81,.55);transform:translateY(-1px)}
.btn-blue{background:var(--brand);color:#fff;box-shadow:var(--glow-blue)}
.btn-blue:hover{transform:translateY(-1px);box-shadow:0 14px 38px rgba(59,107,255,.6)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-2)}
.btn-soft{background:var(--gold-soft);color:var(--accent-2);border:1px solid rgba(246,198,81,.25)}
.btn-soft:hover{background:rgba(246,198,81,.2)}
.btn-danger{background:linear-gradient(135deg,#F43F5E,#F472B6);color:#fff}
.btn-lg{padding:.95rem 1.7rem;font-size:1.05rem;border-radius:14px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* inputs */
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.field label{font-size:.86rem;font-weight:600;color:var(--ink-2)}
.input,select.input,textarea.input{width:100%;padding:.72rem .9rem;border:1px solid var(--line);border-radius:12px;
  font-size:1rem;font-family:inherit;background:rgba(255,255,255,.04);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--muted)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(246,198,81,.18)}
.input:disabled{opacity:.5;cursor:not-allowed;color:var(--muted)}
select.input option{background:var(--navy-700);color:var(--ink)}

/* pills / badges */
.pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;
  padding:.28rem .7rem;border-radius:999px;background:var(--gold-soft);color:var(--accent-2);border:1px solid rgba(246,198,81,.2)}
.badge-live{background:linear-gradient(135deg,#F43F5E,#F472B6);color:#fff;border:none}
.badge-webinar{background:linear-gradient(135deg,#7C3AED,#38D6F0);color:#fff;border:none}
.badge-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(244,63,94,.6)}70%{box-shadow:0 0 0 8px rgba(244,63,94,0)}100%{box-shadow:0 0 0 0 rgba(244,63,94,0)}}
.badge-webinar .badge-dot{animation:pulseViolet 1.8s infinite}
@keyframes pulseViolet{0%{box-shadow:0 0 0 0 rgba(124,58,237,.6)}70%{box-shadow:0 0 0 8px rgba(124,58,237,0)}100%{box-shadow:0 0 0 0 rgba(124,58,237,0)}}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}

/* toast */
.toast-wrap{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;flex-direction:column;gap:.5rem;align-items:center}
.toast{background:var(--navy-600);color:#fff;padding:.7rem 1.1rem;border-radius:12px;box-shadow:var(--shadow-lg);font-size:.92rem;
  animation:toastIn .25s ease;max-width:90vw;border:1px solid var(--line)}
.toast.err{background:linear-gradient(135deg,#F43F5E,#b91c47);border:none}
.toast.ok{background:linear-gradient(135deg,#E0A93A,#F6C651);color:var(--on-gold);border:none}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* utility */
/* generic hide — must beat component display (e.g. .chat-input{display:flex},
   .dotbadge{display:grid}); without !important the bare `hidden` class did nothing. */
.hidden{display:none !important}
.row{display:flex;gap:1rem}.wrap{flex-wrap:wrap}.center{align-items:center}.between{justify-content:space-between}
.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.25);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}