/* ============================================================
   Nada Dashboard — Voice Compliance Platform
   Dark mode — senada dengan momen khas aplikasi mobile (splash &
   layar rekam navy). Palet navy + teal (house style AssistX),
   pasangan tipografi Archivo (display/angka) + IBM Plex Sans (body).
   Rata kiri di semua tempat — ini ruang kerja operasional harian,
   bukan halaman promosi. Satu elemen berani (waveform), sisanya tenang.
   ============================================================ */
:root {
  --canvas: #0b1826;
  --surface: #13293f;
  --surface-sunken: #0e2133;
  --line: #1f3a52;
  --line-strong: #2c4a66;
  --ink: #e8eef4;
  --ink-muted: #9fb0c0;
  --ink-faint: #64788c;
  --navy: #0f2237;
  --navy-soft: #1b3a5c;
  --accent: #19b5cc;
  --accent-deep: #7ae3f1;
  --accent-bright: #22d3ee;
  --accent-wash: rgba(34, 211, 238, 0.12);
  /* Status "diproses" sengaja pakai biru terpisah dari accent teal —
     divalidasi (scripts/validate_palette.js, mode dark) supaya tidak
     tertukar dengan warna "selesai" (hijau), baik oleh mata buta warna
     maupun penglihatan normal. Accent teal tetap dipakai penuh untuk
     elemen brand (chart, tombol, waveform) yang tidak pernah
     bersebelahan langsung dengan swatch status lain. */
  --info: #5ca8dd;
  --info-wash: rgba(92, 168, 221, 0.14);
  --success: #2fbe7f;
  --success-wash: rgba(47, 190, 127, 0.14);
  --warning: #e3a63d;
  --warning-wash: rgba(227, 166, 61, 0.14);
  --danger: #f26d81;
  --danger-wash: rgba(242, 109, 129, 0.14);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --font-display: 'Archivo', 'Helvetica Neue', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 15px;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--ink);
  min-height: 100vh;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); }

/* ============ Topbar ============ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 24, 38, 0.9);
  backdrop-filter: saturate(1.3) blur(6px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 28px; height: 28px; fill: var(--accent); flex-shrink: 0; }
.brand-name {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--ink);
}
.brand-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.clock { font-size: 13px; color: var(--ink-muted); }

.conn {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-muted);
}
.conn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.conn-on .conn-dot { background: var(--success); animation: pulse 2.4s ease-in-out infinite; }
.conn-off .conn-dot { background: var(--warning); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.topbar-btn {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  cursor: pointer;
}
.topbar-btn:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ============ Layout ============ */
.page { max-width: 1240px; margin: 0 auto; padding: 28px 32px 72px; display: flex; flex-direction: column; gap: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: 1fr; } }

/* Kartu emosi percakapan */
.emotion-mood {
  margin: 14px 0 0; font-size: 12.5px; color: var(--ink-muted);
  border-top: 1px solid var(--line); padding-top: 12px;
}
.emotion-emoji { margin-right: 6px; font-size: 14px; }
/* Baris bisa di-hover untuk tooltip jumlah segmen — beri sinyal visual. */
.emotion-row {
  cursor: default; border-radius: 8px; margin: 0 -8px; padding: 0 8px;
  transition: background .12s;
}
.emotion-row:hover { background: var(--surface-sunken); }
.empty-note { margin: 4px 0 0; font-size: 13px; color: var(--ink-muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.card-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.card-head-wrap { flex-wrap: wrap; align-items: center; }
.card-note { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }

/* ============ Hero: waveform + angka hari ini ============
   Identitas visual produk — satu-satunya tempat "berani" di halaman ini.
   Bar waveform statis merepresentasikan brand mark yang diperbesar;
   sekali berdenyut halus (bukan loop terus-menerus) saat ada sesi baru
   masuk, supaya animasi selalu menjawab kejadian nyata, bukan dekorasi. */
.hero {
  /* Di kanvas gelap, hero dibuat selangkah lebih terang dari kartu lain
     supaya tetap jadi satu-satunya titik fokus halaman. */
  background: linear-gradient(180deg, #152e47 0%, var(--navy-soft) 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 28px 30px 0;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.hero-main { position: relative; z-index: 2; }
.hero-label { font-size: 13px; color: rgba(255,255,255,0.6); }
.hero-number {
  display: block;
  font-family: var(--font-display);
  font-size: 56px; font-weight: 800; letter-spacing: -0.03em;
  color: #fff; line-height: 1.05; margin-top: 2px;
}
.hero-wave { width: 100%; height: 84px; display: block; margin-top: 8px; }
.hero-wave rect { fill: var(--accent-bright); opacity: 0.85; }
.hero-wave rect.pulse { animation: wavepulse 0.9s ease-out; }
@keyframes wavepulse {
  0% { transform: scaleY(1); opacity: 0.85; }
  35% { transform: scaleY(1.4); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0.85; }
}
/* Area hover per jam harus transparan — aturan `.hero-wave rect` di atas
   menimpa atribut fill="transparent" kalau tidak dikhususkan di sini. */
.hero-wave rect.hero-hit { fill: transparent; opacity: 1; cursor: crosshair; }
.hero-ticks { position: relative; height: 16px; margin-top: 2px; }
.hero-ticks span {
  position: absolute; top: 0;
  font-size: 10.5px; color: rgba(255,255,255,0.38);
}
.hero-ticks-note { left: auto !important; right: 0; }
.hero-stats {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 22px;
  padding: 16px 0 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 4px;
}
.hero-stat { display: flex; align-items: baseline; gap: 7px; }
.hero-stat-value {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; color: #fff;
}
.hero-stat-label { font-size: 12.5px; color: rgba(255,255,255,0.55); }
.hero-stat.is-warn .hero-stat-value { color: #ffd479; }
.hero-stat.is-danger .hero-stat-value { color: #ff9f8f; }

/* ============ Charts (SVG) ============ */
.chart { position: relative; height: 200px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--font-body); }
.chart-empty {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: 13px;
}
.ax-label { font-size: 10.5px; fill: var(--ink-faint); font-family: var(--font-body); }
.grid-line { stroke: var(--line); stroke-width: 1; }
.bar { transition: opacity .15s; fill: var(--accent); }
.bar.dim { opacity: .35; }
.trend-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.trend-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.crosshair { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }

.chart-tip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--navy-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: 12px; line-height: 1.5; color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
  max-width: 240px;
}
.chart-tip .tip-title { color: rgba(255,255,255,0.6); font-size: 11px; margin-bottom: 3px; }
.chart-tip .tip-value { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; }
.chart-tip .tip-value em { font-style: normal; color: var(--accent-bright); }

/* ============ Kepatuhan per SOP ============ */
.sop-bars { display: flex; flex-direction: column; gap: 16px; }
.sop-row { display: grid; grid-template-columns: 104px 1fr 44px; align-items: center; gap: 12px; }
.sop-name { font-size: 13px; color: var(--ink-muted); }
.sop-track { height: 7px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; }
.sop-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.sop-val { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; text-align: right; color: var(--ink); }

/* ============ Leaderboard sales ============ */
.board { display: flex; flex-direction: column; gap: 13px; }
.board-row { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; }
.board-name { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-name small { color: var(--ink-faint); font-weight: 400; }
.board-meta { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.board-meta b { font-family: var(--font-display); color: var(--ink); font-weight: 700; }
.board-track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; }
.board-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.board-empty { color: var(--ink-faint); font-size: 13px; text-align: center; padding: 16px 0; }

/* ============ Live chip ============ */
.live-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-faint); }
.live-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse 2.4s ease-in-out infinite; }

/* ============ Live feed ============ */
.feed { list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.feed-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: var(--r-sm);
  cursor: pointer;
}
.feed-item:hover { background: var(--surface-sunken); }
.feed-item.fresh { animation: slidein .5s ease; }
@keyframes slidein { from { opacity: 0; transform: translateY(-6px); } }
.feed-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 700;
  background: var(--accent-wash); color: var(--accent-deep);
}
.feed-main { flex: 1; min-width: 0; }
.feed-title { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-title b { font-weight: 600; }
.feed-sub { font-size: 12px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-time { font-size: 11.5px; color: var(--ink-faint); flex-shrink: 0; }
.feed-empty { color: var(--ink-faint); font-size: 13px; padding: 20px 0; text-align: center; }

/* ============ Filters ============ */
.filters { display: flex; gap: 9px; flex-wrap: wrap; }
.filters input, .filters select {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-body);
}
.filters input { width: 220px; }
.filters input::placeholder { color: var(--ink-faint); }
.filters input:focus, .filters select:focus { outline: none; border-color: var(--accent); }

/* ============ Table ============ */
.table-wrap { overflow-x: auto; }
table.sessions { width: 100%; border-collapse: collapse; }
.sessions th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-faint);
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.sessions td {
  padding: 12px; font-size: 13.5px; color: var(--ink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.sessions tbody tr { cursor: pointer; }
.sessions tbody tr:hover { background: var(--surface-sunken); }
.sessions tbody tr.fresh { animation: rowflash 1.6s ease; }
@keyframes rowflash { 0% { background: var(--accent-wash); } }
.td-muted { color: var(--ink-muted); }
.td-time { color: var(--ink-muted); }
.table-empty { padding: 30px 0; text-align: center; color: var(--ink-faint); font-size: 13.5px; }
.hidden { display: none !important; }

/* Status tag — tag beraksen, bukan pill kapsul; selalu titik + label */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  padding: 3px 9px 3px 7px; border-radius: 7px;
}
.tag-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tag-pending    { color: var(--warning); background: var(--warning-wash); }
.tag-pending .tag-dot { background: var(--warning); }
.tag-processing { color: var(--info); background: var(--info-wash); }
.tag-processing .tag-dot { background: var(--info); animation: pulse 1.6s ease-in-out infinite; }
.tag-succeeded  { color: var(--success); background: var(--success-wash); }
.tag-succeeded .tag-dot { background: var(--success); }
.tag-failed     { color: var(--danger); background: var(--danger-wash); }
.tag-failed .tag-dot { background: var(--danger); }

.score { font-family: var(--font-display); font-weight: 700; }
.score-good { color: var(--success); }
.score-mid  { color: var(--warning); }
.score-bad  { color: var(--danger); }

/* ============ Detail panel ============ */
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.5); }
.detail {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 31;
  width: min(560px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  animation: panelin .25s cubic-bezier(.2,.8,.2,1);
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.45);
}
@keyframes panelin { from { transform: translateX(32px); opacity: 0; } }
.detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 24px 26px 18px; border-bottom: 1px solid var(--line);
}
.detail-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.detail-sub { font-size: 13px; color: var(--ink-muted); margin-top: 5px; }
.detail-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.icon-btn {
  background: var(--surface); color: var(--ink-muted);
  border: 1px solid var(--line-strong); border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer; font-size: 13px;
}
.icon-btn:hover { color: var(--ink); border-color: var(--accent); }
.icon-btn-danger:hover { color: var(--danger); border-color: var(--danger); }
.detail-body { padding: 22px 26px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }

.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.kv-item { background: var(--surface-sunken); border-radius: var(--r-sm); padding: 11px 13px; }
.kv-k { font-size: 11px; color: var(--ink-faint); }
.kv-v { font-size: 13.5px; font-weight: 600; margin-top: 4px; color: var(--ink); }

.audio-box audio { width: 100%; margin-top: 8px; }
.audio-missing { font-size: 12.5px; color: var(--ink-faint); }

.seg {
  background: var(--surface-sunken); border-radius: var(--r-lg); padding: 17px;
  display: flex; flex-direction: column; gap: 13px;
}
.seg-head { display: flex; align-items: center; justify-content: space-between; }
.seg-time { font-size: 12px; color: var(--ink-faint); }
.seg-transcript { font-size: 13.5px; line-height: 1.65; color: var(--ink); }
.seg-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: var(--ink-muted);
}
.emotion-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; color: var(--ink);
  background: var(--surface-sunken);
  padding: 3px 10px; border-radius: 999px;
}
.seg-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.cpill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500;
  padding: 4px 9px; border-radius: 7px;
}
.cpill-ok { color: var(--success); background: var(--success-wash); }
.cpill-no { color: var(--danger); background: var(--danger-wash); }
.seg-summary { border-top: 1px solid var(--line); padding-top: 13px; display: flex; flex-direction: column; gap: 8px; }
.sum-line { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.55; }
.sum-ic { flex-shrink: 0; font-weight: 700; }
.sum-ok .sum-ic { color: var(--success); }
.sum-no .sum-ic { color: var(--danger); }
.detail-note { font-size: 13px; color: var(--ink-faint); text-align: center; padding: 16px 0; }
.detail-note-progress {
  display: flex; align-items: flex-start; gap: 14px; text-align: left;
  background: var(--surface-sunken); border-radius: var(--r-md);
  padding: 16px 18px;
}
/* Equalizer 5-bar yang terus "berdenyut" — menggantikan spinner generik,
   senada dengan AnalyzingIllustration di app mobile (waveform yang sama
   dipakai di seluruh produk sebagai bahasa visual "AI sedang bekerja"). */
.progress-eq {
  display: flex; align-items: center; gap: 3px; height: 28px;
  flex-shrink: 0; margin-top: 2px;
}
.progress-eq span {
  width: 4px; border-radius: 3px; background: var(--accent);
  animation: eq-bounce 1.1s ease-in-out infinite;
}
.progress-eq span:nth-child(1) { height: 30%; animation-delay: -1.0s; }
.progress-eq span:nth-child(2) { height: 70%; animation-delay: -0.7s; }
.progress-eq span:nth-child(3) { height: 100%; animation-delay: -0.4s; }
.progress-eq span:nth-child(4) { height: 55%; animation-delay: -0.2s; }
.progress-eq span:nth-child(5) { height: 40%; animation-delay: 0s; }
@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.35); opacity: 0.7; }
  50% { transform: scaleY(1); opacity: 1; }
}
.progress-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.progress-elapsed {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  color: var(--accent-deep); margin-top: 4px;
}
.progress-hint { font-size: 12px; color: var(--ink-muted); margin-top: 8px; line-height: 1.5; }
.section-title { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }

/* ============ Form admin (login & tambah sales) ============ */
.admin-form { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 12px; color: var(--ink-muted); margin-top: 10px; }
.form-label:first-child { margin-top: 0; }
.admin-form input {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: var(--font-body);
}
.admin-form input:focus { outline: none; border-color: var(--accent); }
.form-error {
  font-size: 12.5px; color: var(--danger);
  background: var(--danger-wash);
  border-radius: var(--r-sm); padding: 9px 12px; margin-bottom: 4px;
}
.form-hint { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

.btn-primary {
  font-family: var(--font-body);
  /* Teal terang + teks navy: tombol navy lama tenggelam di kanvas gelap. */
  background: var(--accent-bright); color: #0b1826;
  border: none; border-radius: var(--r-sm);
  padding: 11px; margin-top: 16px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn-primary:hover { background: #4adeee; }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-ghost {
  font-family: var(--font-body);
  background: transparent; color: var(--ink-faint);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 10px; margin-top: 22px; width: 100%;
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.btn-ghost:hover { color: var(--ink-muted); border-color: var(--ink-faint); }

.sales-list { display: flex; flex-direction: column; gap: 8px; }
.sales-row {
  background: var(--surface-sunken); border-radius: var(--r-sm); padding: 11px 13px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center;
}
.sales-row-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sales-row-meta { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.sales-row-actions { display: flex; gap: 4px; }
.link-btn {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  color: var(--accent-deep); background: transparent; border: none;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
}
.link-btn:hover { background: var(--accent-wash); }
.link-danger { color: var(--danger); }
.link-danger:hover { background: var(--danger-wash); }
.pin-form { grid-column: 1 / -1; display: flex; gap: 8px; padding-top: 4px; }
.pin-form input {
  flex: 1; font-family: var(--font-body); font-size: 13px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 8px 10px; color: var(--ink);
}
.pin-form input:focus { outline: none; border-color: var(--accent); }
.btn-small {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  background: var(--accent-bright); color: #0b1826; border: none;
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
}
.btn-small-ghost { background: transparent; color: var(--ink-muted); border: 1px solid var(--line-strong); }

/* Kondisi gagal di panel detail — jelaskan apa yang terjadi + jalan keluarnya */
.fail-box {
  background: var(--danger-wash); border-radius: var(--r-md); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.fail-title { font-family: var(--font-display); font-weight: 700; color: var(--danger); }
.fail-msg { font-size: 13px; color: var(--ink); line-height: 1.5; word-break: break-word; }
.fail-hint { font-size: 12.5px; color: var(--ink-muted); margin-top: 4px; }
.fail-box .btn-primary { margin-top: 10px; align-self: flex-start; padding: 10px 18px; }

/* ============ Kualitas dasar: fokus keyboard, gerak, layar sempit ============ */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sessions tbody tr:focus-visible { outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 720px) {
  .topbar { padding: 14px 18px; }
  .clock { display: none; }
  .page { padding: 18px 16px 56px; gap: 14px; }
  .card { padding: 18px 16px; }
  .hero { padding: 22px 20px 0; }
  .hero-number { font-size: 44px; }
  .hero-stats { gap: 14px 18px; }
  .filters { width: 100%; }
  .filters input { width: 100%; }
  .filters select { flex: 1; }
  .detail { width: 100vw; }
}

/* ============ Toasts ============ */
.toasts { position: fixed; bottom: 24px; right: 24px; z-index: 40; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--navy-soft); color: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 12px 15px;
  font-size: 13px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .4);
  animation: slidein .3s ease;
  max-width: 320px;
}
.toast b { color: var(--accent-bright); font-weight: 600; }