/* ============================================================================
   Zora Event — design system
   Identity: the operations board at dawn. Deep indigo surface, one aurora
   gradient (violet -> teal -> amber) reserved for the brand mark, the primary
   action, and the live data band. Everything else stays quiet and precise.
   Numbers are first-class: tabular figures everywhere they carry meaning.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ink + surfaces */
  --ink: #0e1119;
  --ink-2: #2b2f40;
  --muted: #5b6072;
  --faint: #8a8fa3;
  --paper: #f6f6fb;
  --card: #ffffff;
  --card-2: #fbfbfe;
  --line: #e8e8f1;
  --line-2: #f0f0f6;

  /* brand */
  --violet: #6d3bf5;
  --violet-ink: #4a1fd0;
  --violet-wash: #f1ecff;
  --teal: #12b5a6;
  --teal-wash: #e2f7f4;
  --amber: #ff9f1c;
  --amber-wash: #fff2dd;
  --rose: #f0446b;
  --rose-wash: #ffe9ef;

  --aurora: linear-gradient(100deg, #6d3bf5 0%, #12b5a6 56%, #ff9f1c 100%);
  --aurora-soft: linear-gradient(100deg, rgba(109,59,245,.14), rgba(18,181,166,.12) 56%, rgba(255,159,28,.14));

  /* state */
  --ok: #10b981;
  --warn: #f59e0b;
  --bad: #ef4444;
  --info: #6d3bf5;
  --idle: #9aa0b4;

  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --pill: 999px;
  --shadow: 0 1px 2px rgba(16,17,25,.04), 0 10px 30px -16px rgba(16,17,25,.16);
  --shadow-lg: 0 2px 6px rgba(16,17,25,.06), 0 30px 60px -28px rgba(16,17,25,.28);
  --ring: 0 0 0 3px rgba(109,59,245,.28);

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1240px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-force-light]) {
    --ink: #f3f3f8; --ink-2: #d6d7e2; --muted: #a2a6b8; --faint: #7b7f92;
    --paper: #0c0d15; --card: #14151f; --card-2: #171825;
    --line: #262738; --line-2: #1e1f2d;
    --violet-wash: #221a44; --teal-wash: #10312e; --amber-wash: #3a2a12; --rose-wash: #3a1622;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 30px 60px -28px rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper);
  font-size: 15px; line-height: 1.55; font-feature-settings: "tnum" 1, "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 .8em; }
a { color: var(--violet-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: .82rem; }
::selection { background: rgba(109,59,245,.22); }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: -.02em; }
.tnum { font-variant-numeric: tabular-nums; }
.u-eyebrow {
  font: 600 .68rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}
.u-muted { color: var(--muted); }
.u-center { text-align: center; }
.u-nowrap { white-space: nowrap; }
.u-mt { margin-top: 1rem; } .u-mt2 { margin-top: 1.75rem; }
.u-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.u-between { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.u-grow { flex: 1; }
.u-stack { display: grid; gap: 1rem; }

/* ---------- brand mark ---------------------------------------------------- */
.zbrand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; }
.zbrand .mk {
  width: 30px; height: 30px; border-radius: 9px; background: var(--aurora);
  display: grid; place-items: center; color: #fff; font-size: 1rem; flex: none;
  box-shadow: 0 4px 14px -4px rgba(109,59,245,.5);
}
.zbrand .zlogo { height: 26px; width: auto; display: block; }
.zbrand .zicon { width: 30px; height: 30px; display: block; flex: none; }
.zbrand .wd { font-size: 1.12rem; letter-spacing: -.02em; }
.zbrand .wd b { font-weight: 700; }
.zbrand .wd span { font-weight: 500; color: var(--muted); }

/* ---------- buttons ---------------------------------------------------- */
.btn {
  --bg: var(--card); --fg: var(--ink); --bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 550 .92rem/1 var(--font); padding: .68rem 1.05rem; border-radius: var(--radius-sm);
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd); cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn--primary {
  --fg: #fff; --bd: transparent; background: var(--aurora); background-size: 140% 140%;
  box-shadow: 0 8px 22px -10px rgba(109,59,245,.55);
}
.btn--primary:hover { background-position: 100% 0; box-shadow: 0 10px 28px -8px rgba(109,59,245,.6); }
.btn--dark { --bg: var(--ink); --fg: var(--paper); --bd: var(--ink); }
.btn--ghost { --bg: transparent; --bd: var(--line); }
.btn--quiet { --bg: transparent; --bd: transparent; color: var(--muted); padding: .5rem .6rem; }
.btn--quiet:hover { color: var(--ink); background: var(--line-2); }
.btn--danger { --fg: var(--bad); --bd: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.btn--sm { padding: .48rem .72rem; font-size: .84rem; }
.btn--lg { padding: .85rem 1.4rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: zspin .7s linear infinite;
}
@keyframes zspin { to { transform: rotate(360deg); } }

/* ---------- status dot + pill (the recurring device) ------------------- */
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--idle); }
.dot--ok { background: var(--ok); } .dot--warn { background: var(--warn); }
.dot--bad { background: var(--bad); } .dot--info { background: var(--info); }
.dot--live { background: var(--teal); box-shadow: 0 0 0 0 rgba(18,181,166,.6); animation: zpulse 2s infinite; }
@keyframes zpulse { 70% { box-shadow: 0 0 0 7px rgba(18,181,166,0); } 100% { box-shadow: 0 0 0 0 rgba(18,181,166,0); } }
@media (prefers-reduced-motion: reduce) { .dot--live { animation: none; } .btn[aria-busy="true"]::after { animation-duration: 2s; } }

.pill {
  display: inline-flex; align-items: center; gap: .4rem; padding: .26rem .6rem;
  border-radius: var(--pill); font: 600 .72rem/1 var(--font); letter-spacing: .02em;
  text-transform: uppercase; background: var(--line-2); color: var(--muted); border: 1px solid transparent;
}
.pill--ok { background: var(--teal-wash); color: #0c7b70; }
.pill--warn { background: var(--amber-wash); color: #9a5b00; }
.pill--bad { background: var(--rose-wash); color: #c31d47; }
.pill--info { background: var(--violet-wash); color: var(--violet-ink); }
.pill--draft { background: var(--line-2); color: var(--faint); }

/* ---------- cards ---------------------------------------------------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.15rem 1.25rem;
}
.card--rule { border-left: 3px solid var(--line); }
.card--rule.is-ok { border-left-color: var(--ok); }
.card--rule.is-warn { border-left-color: var(--warn); }
.card--rule.is-bad { border-left-color: var(--bad); }
.card--rule.is-info { border-left-color: var(--violet); }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.card__title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }

/* ---------- stat ---------------------------------------------------- */
.stat { display: grid; gap: .3rem; }
.stat__label { font: 600 .7rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.stat__value { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat__sub { font-size: .82rem; color: var(--muted); }
.stat__delta { font-size: .78rem; font-weight: 600; }
.stat__delta.is-up { color: var(--ok); } .stat__delta.is-down { color: var(--bad); }

.grid { display: grid; gap: 1rem; }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- the live band (signature) ------------------------------- */
.liveband {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--card); border: 1px solid var(--line); padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: 1.25rem; box-shadow: var(--shadow);
}
.liveband::before {
  content: ""; position: absolute; inset: 0; background: var(--aurora-soft); pointer-events: none;
}
.liveband > * { position: relative; }
.liveband__big { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.liveband__label { font: 600 .72rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.liveband__track { flex: 1; height: 8px; border-radius: var(--pill); background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.liveband__fill { height: 100%; background: var(--aurora); border-radius: var(--pill); transition: width .8s cubic-bezier(.2,.7,.2,1); }

/* ---------- forms ---------------------------------------------------- */
.field { display: grid; gap: .35rem; margin-bottom: .95rem; }
.field > span, .field > label { font: 550 .82rem/1.3 var(--font); color: var(--ink-2); }
.field .hint { font-size: .76rem; color: var(--faint); font-weight: 400; }
.input, .select, .textarea {
  font: 400 .93rem/1.4 var(--font); color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .62rem .75rem; width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--violet); box-shadow: var(--ring); outline: none; }
.textarea { min-height: 96px; resize: vertical; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.checkline { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; }
.checkline input { margin-top: .2rem; accent-color: var(--violet); width: 16px; height: 16px; }
.alert { padding: .7rem .85rem; border-radius: var(--radius-sm); font-size: .86rem; border: 1px solid transparent; }
.alert--bad { background: var(--rose-wash); color: #b81a42; }
.alert--ok { background: var(--teal-wash); color: #0c7b70; }
.alert--info { background: var(--violet-wash); color: var(--violet-ink); }

/* ---------- table ---------------------------------------------------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table.z { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.z th {
  text-align: left; font: 600 .7rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: var(--card-2); white-space: nowrap;
}
table.z td { padding: .8rem 1rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.z tr:last-child td { border-bottom: none; }
table.z tbody tr:hover { background: var(--card-2); }
table.z td.num, table.z th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- tabs ---------------------------------------------------- */
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: .7rem .9rem; font: 550 .88rem/1 var(--font); color: var(--muted); background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tabshell { position: relative; }
.tabs__arrow {
  position: absolute; top: 0; bottom: 1px; z-index: 2; width: 34px; border: 0; cursor: pointer;
  font: 600 1.5rem/1 var(--font); color: var(--violet-ink); display: grid; place-items: center;
}
.tabs__arrow[hidden] { display: none; }
.tabs__arrow--l { left: 0; background: linear-gradient(90deg, var(--paper) 55%, transparent); }
.tabs__arrow--r { right: 0; background: linear-gradient(270deg, var(--paper) 55%, transparent); }
.tabs__arrow:hover { color: var(--violet); }
.tab.is-active { color: var(--violet-ink); border-bottom-color: var(--violet); }

/* ---------- empty state ------------------------------------------- */
.empty { text-align: center; padding: 2.6rem 1.5rem; color: var(--muted); }
.empty svg { width: 34px; height: 34px; color: var(--faint); margin-bottom: .7rem; }
.empty h4 { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); margin-bottom: .3rem; }
.empty p { max-width: 34ch; margin: 0 auto 1rem; font-size: .9rem; }

/* ---------- toast + modal --------------------------------------- */
#ztoast { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; z-index: 90; }
.toast {
  background: var(--ink); color: var(--paper); padding: .75rem 1rem; border-radius: var(--radius-sm);
  font-size: .86rem; box-shadow: var(--shadow-lg); display: flex; gap: .6rem; align-items: center;
  max-width: 340px; animation: zin .2s ease;
}
.toast.is-ok { border-left: 3px solid var(--teal); }
.toast.is-bad { border-left: 3px solid var(--rose); }
@keyframes zin { from { opacity: 0; transform: translateY(8px); } }

.zmodal-bg {
  position: fixed; inset: 0; background: rgba(10,11,20,.55); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 1rem; z-index: 80; animation: zin .15s ease;
}
.zmodal {
  background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: min(560px, 100%); max-height: 90vh; overflow-y: auto; padding: 1.4rem 1.5rem;
}
.zmodal--wide { width: min(860px, 100%); }
.zmodal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.zmodal__x { background: none; border: none; font-size: 1.4rem; color: var(--faint); cursor: pointer; line-height: 1; }

/* ---------- skeleton --------------------------------------------- */
.sk { background: linear-gradient(90deg, var(--line-2), var(--line), var(--line-2)); background-size: 200% 100%; animation: zsk 1.3s ease infinite; border-radius: 6px; }
@keyframes zsk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ---------- app shell ------------------------------------------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side {
  background: var(--ink); color: var(--paper); padding: 1.1rem .9rem; display: flex; flex-direction: column; gap: .35rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side .zbrand .zlogo { height: 30px; }
.side .zbrand { color: #fff; padding: .3rem .5rem .9rem; }
.side .zbrand .wd span { color: #9aa0c4; }
.side__group { font: 600 .64rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: #6b6f92; padding: .9rem .7rem .4rem; }
.navi {
  display: flex; align-items: center; gap: .65rem; padding: .58rem .7rem; border-radius: var(--radius-sm);
  color: #c7c9dd; font: 500 .9rem/1 var(--font); cursor: pointer; border: none; background: none; width: 100%; text-align: left;
}
.navi svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.navi:hover { background: rgba(255,255,255,.06); color: #fff; }
.navi.is-active { background: rgba(109,59,245,.22); color: #fff; }
.navi.is-active svg { opacity: 1; }
.side__foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); padding-top: .8rem; }
.side__user { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; }
.side__user .av { width: 30px; height: 30px; border-radius: 8px; background: var(--aurora); display: grid; place-items: center; font: 600 .8rem var(--font-display); color: #fff; flex: none; }
.side__user small { display: block; color: #8a8fb0; font-size: .74rem; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--line); background: var(--card);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 1.25rem; }
.topbar .u-eyebrow { margin-bottom: .15rem; }
.view { padding: clamp(1rem, 3vw, 2rem); max-width: var(--maxw); width: 100%; }

.iconbtn { position: relative; width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.iconbtn:hover { color: var(--ink); }
.iconbtn .badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--rose); color: #fff; font: 700 .62rem/16px var(--font); text-align: center; padding: 0 3px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side {
    position: fixed; inset: 0 30% 0 0; z-index: 60; transform: translateX(-100%);
    transition: transform .2s ease; width: min(280px, 78vw);
  }
  .app.nav-open .side { transform: none; }
  .app.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 55; }
  .field--row { grid-template-columns: 1fr; }
}
.navtoggle { display: none; }
@media (max-width: 900px) { .navtoggle { display: grid; } }

/* ---------- lazy video block (promo / lessons) ------------------------- */
.vblock { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: #0e1119; box-shadow: var(--shadow); }
.vblock iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vblock__poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
  cursor: pointer; display: grid; place-items: center; background: #0e1119;
  --v-accent: var(--violet); }
.vblock__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .62; transition: opacity .25s, transform .4s; }
.vblock__poster:hover img { opacity: .5; transform: scale(1.03); }
.vblock__play { position: relative; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 1.15rem; padding-left: 4px;
  background: var(--v-accent); box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); transition: transform .2s; }
.vblock__poster:hover .vblock__play { transform: scale(1.08); }
.vblock__poster:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--v-accent); }