/* ============================================================
   DS Astraea — Stylesheet
   Theme: "celestial" — deep indigo + starlight gold.
   Astraea, goddess of justice & precision, ascended as the stars.
   ============================================================ */

:root {
  --navy:#141a33; --navy-2:#1d2647; --indigo:#3a4a8c; --indigo-lt:#5566b8;
  --gold:#e0a93b; --gold-soft:#f3d68a;
  --bg:#eef1f8; --surface:#ffffff; --surface-2:#f6f8fc; --line:#dde2ee;
  --text:#1c2233; --text-2:#667089; --muted:#8b94aa;
  --ok:#2e9e6b; --warn:#d8902a; --bad:#c5453f;
  --shadow:0 2px 14px rgba(20,26,51,.08); --shadow-lg:0 14px 40px rgba(20,26,51,.18);
  --grad:linear-gradient(135deg,#1d2647 0%,#3a4a8c 60%,#5566b8 100%);
  --radius:14px;
}
[data-theme="dark"] {
  --navy:#0d1124; --navy-2:#151b35; --indigo:#4a5aa6; --indigo-lt:#6b7bce;
  --gold:#e8b552; --gold-soft:#f3d68a;
  --bg:#0b0f20; --surface:#141a30; --surface-2:#1a2240; --line:#2a3358;
  --text:#e6eaf5; --text-2:#aab2cc; --muted:#7e88a8;
  --shadow:0 2px 14px rgba(0,0,0,.45); --shadow-lg:0 16px 44px rgba(0,0,0,.6);
}
html { background:var(--bg); color-scheme:light; }
html[data-theme="dark"] { color-scheme:dark; }

* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'Segoe UI',Roboto,system-ui,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5;
  transition:background .25s,color .15s;
}
.hidden { display:none !important; }
.muted { color:var(--muted); }
.w-full { width:100%; }

/* ── Logo badge ───────────────────────────────────────────── */
.logo-badge {
  width:42px; height:42px; min-width:42px; border-radius:11px;
  background:var(--grad); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:Georgia,serif; font-weight:700; font-size:23px;
  box-shadow:inset 0 0 0 1px rgba(224,169,59,.25);
}
.logo-title { font-weight:800; font-size:16px; letter-spacing:.01em; }
.logo-sub { font-size:11.5px; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; }

/* ── Auth screen ──────────────────────────────────────────── */
.auth-screen {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; position:relative; overflow:hidden;
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 45% 80%, rgba(243,214,138,.7), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,.7), transparent),
    var(--grad);
}
.auth-card {
  width:100%; max-width:400px; background:var(--surface); border-radius:18px;
  padding:34px 30px; box-shadow:var(--shadow-lg); border:1px solid var(--line);
}
.auth-logo { display:flex; align-items:center; gap:13px; margin-bottom:18px; }
.auth-blurb { color:var(--text-2); font-size:14px; margin-bottom:18px; }
.auth-foot { color:var(--muted); font-size:12px; text-align:center; margin-top:16px; }
.auth-foot b { color:var(--indigo); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; border-radius:10px; padding:12px 18px; font-size:14px; font-weight:600;
  cursor:pointer; text-decoration:none; transition:transform .12s,opacity .15s,background .15s;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--indigo); color:#fff; }
.btn-primary:hover { background:var(--indigo-lt); }
.btn-ms { background:var(--navy); color:#fff; }
.btn-ms:hover { opacity:.93; }
.btn-ghost { background:transparent; color:var(--text-2); border:1px solid var(--line); }
.btn-ghost:hover { background:var(--surface-2); }
.btn-sm { padding:8px 12px; font-size:13px; }

/* ── Alerts ───────────────────────────────────────────────── */
.alert { border-radius:10px; padding:11px 14px; font-size:13.5px; margin-bottom:14px; }
.alert-error { background:rgba(197,69,63,.12); color:var(--bad); border:1px solid rgba(197,69,63,.3); }
.alert-success { background:rgba(46,158,107,.12); color:var(--ok); border:1px solid rgba(46,158,107,.3); }

/* ── App shell ────────────────────────────────────────────── */
#app { display:flex; min-height:100vh; }
#sidebar {
  width:248px; min-width:248px; background:var(--navy); color:#fff;
  display:flex; flex-direction:column; padding:18px 14px;
  position:sticky; top:0; height:100vh;
}
.sidebar-header { display:flex; align-items:center; gap:12px; padding:6px 6px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-header .logo-title { color:#fff; }
.sidebar-header .logo-sub { color:var(--gold-soft); }
.nav-links { list-style:none; flex:1; margin-top:14px; display:flex; flex-direction:column; gap:3px; }
.nav-links a {
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:10px;
  color:#c4cbe4; text-decoration:none; font-size:14px; font-weight:600; transition:background .15s,color .15s;
}
.nav-links a:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav-links a.active { background:var(--indigo); color:#fff; }
.nav-icon { width:20px; text-align:center; color:var(--gold); font-size:15px; }
.nav-links a.active .nav-icon { color:var(--gold-soft); }
.sidebar-footer { border-top:1px solid rgba(255,255,255,.08); padding-top:14px; }
.nav-user { color:#fff; font-size:13.5px; font-weight:700; margin-bottom:9px; padding:0 4px; }
.sidebar-footer .btn-ghost { color:#c4cbe4; border-color:rgba(255,255,255,.16); }
.sidebar-footer .btn-ghost:hover { background:rgba(255,255,255,.08); color:#fff; }

#main-content { flex:1; padding:32px 36px; max-width:1200px; }

/* ── Pages ────────────────────────────────────────────────── */
.page-head { margin-bottom:22px; }
.page-head h1 { font-size:24px; font-weight:800; letter-spacing:-.01em; }
.page-sub { color:var(--text-2); font-size:14px; margin-top:4px; }

.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:15px; margin-bottom:22px; }
.stat-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px 16px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.stat-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold); }
.stat-value { font-size:30px; font-weight:800; color:var(--indigo); line-height:1; }
[data-theme="dark"] .stat-value { color:var(--indigo-lt); }
.stat-label { font-size:13px; color:var(--text-2); margin-top:7px; font-weight:600; }
.stat-hint { font-size:11px; color:var(--muted); margin-top:3px; font-style:italic; }

.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); }
.placeholder-panel { text-align:center; padding:46px 26px; }
.placeholder-panel .ph-star { font-size:40px; color:var(--gold); margin-bottom:8px; }
.placeholder-panel h3 { font-size:18px; font-weight:800; margin-bottom:8px; }
.placeholder-panel p { color:var(--text-2); font-size:14px; max-width:520px; margin:0 auto; }

/* ── Toasts ───────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:200; }
.toast { padding:11px 18px; border-radius:10px; color:#fff; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg); animation:toastIn .2s ease; }
.toast.info { background:var(--indigo); }
.toast.success { background:var(--ok); }
.toast.error { background:var(--bad); }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ── Theme toggle ─────────────────────────────────────────── */
#theme-toggle {
  position:fixed; right:16px; bottom:16px; width:42px; height:42px; border-radius:50%;
  background:var(--surface); color:var(--text); border:1px solid var(--line); box-shadow:var(--shadow-lg);
  font-size:18px; cursor:pointer; z-index:120;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width:820px) {
  #app { flex-direction:column; }
  #sidebar { width:100%; min-width:0; height:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; }
  .sidebar-header { border-bottom:none; padding:6px; flex:1; }
  .nav-links { flex-direction:row; flex-wrap:wrap; margin-top:0; flex:none; width:100%; }
  .sidebar-footer { border-top:none; padding-top:0; display:flex; align-items:center; gap:10px; }
  .nav-user { margin-bottom:0; }
  #main-content { padding:22px 18px; }
}

/* ── Gyro QC module ───────────────────────────────────────── */
.gyro-upload h3 { font-size:16px; font-weight:800; margin-bottom:4px; }
.gyro-fileinput { display:block; width:100%; padding:10px; border:1.5px dashed var(--line); border-radius:10px;
  background:var(--surface-2); color:var(--text-2); font-size:13px; margin-bottom:12px; cursor:pointer; }
.gyro-status { margin-left:12px; font-size:13px; color:var(--text-2); }
.gyro-status.err { color:var(--bad); }
.toolbar { margin:18px 0 12px; }
.gyro-search { width:100%; max-width:380px; padding:10px 13px; border:1px solid var(--line);
  border-radius:10px; background:var(--surface); color:var(--text); font-size:14px; }

.gtable { width:100%; border-collapse:collapse; font-size:13.5px; }
.gtable thead th { text-align:left; background:var(--navy); color:#fff; font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; padding:11px 14px; }
.gtable tbody td { padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.gtable tbody tr:hover { background:var(--surface-2); }
.gtable.compact td { padding:8px 12px; }
.gtable .sub { font-size:11.5px; color:var(--muted); margin-top:2px; }
.gtable .mono, .mono { font-family:'DM Mono',ui-monospace,Menlo,Consolas,monospace; }
.empty-row, .empty { padding:22px; text-align:center; color:var(--muted); font-size:14px; }

.gbadge { display:inline-block; padding:3px 10px; border-radius:11px; font-size:11px; font-weight:800; letter-spacing:.03em; }
.g-pass { background:rgba(46,158,107,.16); color:var(--ok); }
.g-warn { background:rgba(216,144,42,.18); color:var(--warn); }
.g-fail { background:rgba(197,69,63,.16); color:var(--bad); }
.g-na   { background:var(--surface-2); color:var(--muted); }

.detail-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.back-link { color:var(--indigo); text-decoration:none; font-weight:600; font-size:14px; }
[data-theme="dark"] .back-link { color:var(--indigo-lt); }
.split2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
@media (max-width:820px){ .split2 { grid-template-columns:1fr; } }
.stamp { padding:12px 14px; border-radius:10px; font-weight:700; font-size:13.5px; }
.stamp.ok   { background:rgba(46,158,107,.12); color:var(--ok); }
.stamp.warn { background:rgba(216,144,42,.14); color:var(--warn); margin-bottom:10px; }
.viewer-bar { background:var(--navy); color:var(--gold-soft); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; padding:10px 16px; }
.gyro-viewer-frame { width:100%; height:1500px; border:0; display:block; background:#fff; }
.stat-value small { font-size:13px; color:var(--text-2); font-weight:600; }

/* ── Gyro QC report form ──────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin-bottom:16px; }
@media (max-width:600px){ .form-grid { grid-template-columns:1fr; } }
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-group label { font-size:11.5px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.03em; }
.form-group input, .form-group select {
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--text); font-size:13px; font-family:inherit;
}
.form-group input:focus, .form-group select:focus { outline:none; border-color:var(--indigo); }
.radio-row { display:flex; gap:18px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.radio { font-size:13.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.drift-cta { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.drift-cta h3 { font-size:16px; font-weight:800; margin-bottom:4px; }
.auto-tag { display:inline-block; font-size:9px; font-weight:700; background:rgba(224,169,59,.2); color:var(--gold); padding:1px 5px; border-radius:6px; vertical-align:middle; margin-left:4px; letter-spacing:.04em; }

/* ── QC indicators + report extras ────────────────────────── */
.indicator-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:9px; margin-top:6px; }
.indicator { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.indicator .i-dot { width:9px; height:9px; min-width:9px; border-radius:50%; background:var(--muted); }
.indicator .i-name { flex:1; font-size:12.5px; font-weight:600; color:var(--text-2); }
.indicator .i-val { font-size:13px; font-weight:800; font-family:'DM Mono',ui-monospace,monospace; }
.indicator.i-pass .i-dot { background:var(--ok); }   .indicator.i-pass .i-val { color:var(--ok); }
.indicator.i-warn .i-dot { background:var(--warn); } .indicator.i-warn .i-val { color:var(--warn); }
.indicator.i-fail .i-dot { background:var(--bad); }  .indicator.i-fail .i-val { color:var(--bad); }
.indicator.i-na .i-val { color:var(--muted); }
.drift-toggle { margin-left:auto; background:rgba(224,169,59,.12); padding:5px 11px; border-radius:9px; }
.gbadge.g-drift { background:rgba(224,169,59,.2); color:var(--gold); }
.gbadge.g-info { background:var(--surface-2); color:var(--text-2); }

/* ── Report data-source prompt (raw vs drift-corrected) ───── */
.datasource { border:1px solid var(--gold); background:rgba(224,169,59,.07); border-radius:10px; padding:11px 13px; margin-bottom:14px; }
.datasource .ds-label { font-size:11.5px; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.04em; margin-bottom:7px; }
.datasource .radio-row { margin-bottom:0; }