/* ════════════════════════════════════════════════════════════════
   InSifter — Dashboard Terminal Shell
   Shared aesthetic for all tool pages (Bloomberg-style)
   ════════════════════════════════════════════════════════════════ */

:root {
  --db-bg:     #09090B;
  --db-bg-1:   #0D0D10;
  --db-bg-2:   #111115;
  --db-line:   #1C1C22;
  --db-line-2: #27272F;
  --db-fg:     #E7E7EA;
  --db-fg-dim: #8A8A93;
  --db-fg-faint:#55555D;
  --db-cyan:   #06B6D4;
  --db-cyan-dim:#0891A8;
  --db-warn:   #F59E0B;
  --db-ok:     #10B981;
  --db-bad:    #F87171;
  --db-c1:     #06B6D4;
  --db-c2:     #F472B6;
  --db-c3:     #A78BFA;
  --db-c4:     #FBBF24;
  --db-c5:     #34D399;
}

/* ── base reset for dashboard pages ───────────────────────────── */
.db-root { font-family:'Inter',system-ui,sans-serif; font-feature-settings:"ss01","cv11"; color:var(--db-fg); background:var(--db-bg); min-height:100vh; }
.db-root * { box-sizing:border-box; }
.db-mono { font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }

body.db-page {
  padding-top:64px; margin:0; background:var(--db-bg);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(6,182,212,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(244,114,182,.04), transparent 60%);
}

/* ── top strip ────────────────────────────────────────────────── */
.db-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px; border-bottom:1px solid var(--db-line);
  background:linear-gradient(180deg,#0B0B0F,#09090B); position:relative; z-index:1;
}
.db-brand { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.02em; }
.db-brand .dot { width:8px; height:8px; border-radius:2px; background:var(--db-cyan); box-shadow:0 0 10px var(--db-cyan); }
.db-brand small { color:var(--db-fg-dim); font-weight:400; margin-left:6px; }
.db-topmeta { display:flex; gap:22px; color:var(--db-fg-dim); font-size:11px; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
.db-topmeta b { color:var(--db-fg); font-weight:500; }
.db-topmeta .statusDot { width:6px; height:6px; border-radius:50%; background:var(--db-ok); box-shadow:0 0 6px var(--db-ok); display:inline-block; margin-right:4px; animation:dbBlink 1.8s infinite; }
@keyframes dbBlink { 50% { opacity:.25; } }

/* ── ticker ───────────────────────────────────────────────────── */
.db-ticker { overflow:hidden; white-space:nowrap; border-bottom:1px solid var(--db-line); background:#0A0A0D; font-size:11px; color:var(--db-fg-dim); padding:6px 0; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
.db-ticker span { display:inline-block; padding:0 22px; }
.db-ticker .up { color:var(--db-ok); }
.db-ticker .dn { color:var(--db-bad); }
.db-ticker .mk { color:var(--db-cyan); }
.db-ticker .tk-track { display:inline-block; animation:dbTk 55s linear infinite; }
@keyframes dbTk { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ── page layout ──────────────────────────────────────────────── */
.db-wrap { max-width:1440px; margin:0 auto; padding:22px; }
.db-pageHead { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; }
.db-pageHead h1 { font-size:22px; margin:0; font-weight:600; letter-spacing:-.01em; }
.db-pageHead p { margin:4px 0 0; color:var(--db-fg-dim); font-size:13px; max-width:680px; line-height:1.5; }
.db-crumbs { font-size:11px; color:var(--db-fg-faint); letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; font-family:'IBM Plex Mono',monospace; }
.db-crumbs b { color:var(--db-cyan); }
.db-pageHead .rtStamp { color:var(--db-fg-dim); font-size:11px; text-align:right; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; line-height:1.7; }
.db-pageHead .rtStamp b { color:var(--db-fg); }
.db-pageHead .rtStamp .blink { color:var(--db-cyan); animation:dbBlink 1.6s infinite; }

/* ── main grid: rail + content ────────────────────────────────── */
.db-shell { display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:start; }
@media (max-width:900px) { .db-shell { grid-template-columns:1fr; } }

/* ── tool rail ────────────────────────────────────────────────── */
.db-rail { background:linear-gradient(180deg,#0C0C10,#0A0A0D); border:1px solid var(--db-line); border-radius:6px; position:sticky; top:80px; overflow:hidden; }
.db-rail-head { padding:12px 14px 10px 20px; border-bottom:1px dashed var(--db-line-2); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--db-fg-dim); display:flex; justify-content:space-between; align-items:center; position:relative; }
.db-rail-head::before { content:""; position:absolute; left:8px; top:14px; width:5px; height:5px; border-radius:50%; background:var(--db-cyan); box-shadow:0 0 8px var(--db-cyan); opacity:.7; }
.db-rail-head .idx { font-family:'IBM Plex Mono',monospace; color:var(--db-fg-faint); font-size:10px; letter-spacing:.05em; }
.db-rail ul { list-style:none; margin:0; padding:6px 0; }
.db-rail li a {
  display:flex; align-items:center; gap:10px; padding:9px 14px 9px 20px;
  font-size:13px; color:var(--db-fg-dim); text-decoration:none; transition:.12s;
  border-left:2px solid transparent; position:relative;
}
.db-rail li a .tk { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--db-fg-faint); letter-spacing:.05em; margin-left:auto; flex-shrink:0; }
.db-rail li a:hover { background:rgba(6,182,212,.05); color:var(--db-fg); }
.db-rail li a:hover .tk { color:var(--db-cyan); }
.db-rail li a.active { background:rgba(6,182,212,.06); color:var(--db-fg); border-left-color:var(--db-cyan); font-weight:500; }
.db-rail li a.active .tk { color:var(--db-cyan); }
.db-rail li a .ic { flex-shrink:0; width:14px; height:14px; color:currentColor; opacity:.85; }
.db-rail-foot { padding:10px 14px 12px 20px; border-top:1px dashed var(--db-line-2); font-size:10px; color:var(--db-fg-faint); font-family:'IBM Plex Mono',monospace; letter-spacing:.04em; display:flex; justify-content:space-between; }

/* ── panels ──────────────────────────────────────────────────── */
.db-panel { background:linear-gradient(180deg,#0C0C10,#0A0A0D); border:1px solid var(--db-line); border-radius:6px; position:relative; }
.db-panel::before { content:""; position:absolute; left:10px; top:14px; width:5px; height:5px; border-radius:50%; background:var(--db-cyan); box-shadow:0 0 8px var(--db-cyan); opacity:.7; }
.db-panel h3 { margin:0; padding:12px 14px 10px 26px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--db-fg-dim); border-bottom:1px dashed var(--db-line-2); display:flex; justify-content:space-between; align-items:center; }
.db-panel h3 .idx { font-family:'IBM Plex Mono',monospace; color:var(--db-fg-faint); font-size:10px; letter-spacing:.05em; font-weight:400; }
.db-panel .body { padding:16px 18px; }

/* ── labels + form fields ─────────────────────────────────────── */
.db-lbl { font-size:10px; color:var(--db-fg-faint); letter-spacing:.12em; text-transform:uppercase; font-family:'IBM Plex Mono',monospace; margin-bottom:6px; display:block; }
.db-lbl b { color:var(--db-fg-dim); font-weight:400; }
.db-field { margin-bottom:14px; }
.db-input, .db-select {
  width:100%; padding:10px 12px; background:rgba(255,255,255,.015); border:1px solid var(--db-line-2);
  border-radius:4px; color:var(--db-fg); font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;
  font-size:14px; outline:none; transition:.15s;
}
.db-input:focus, .db-select:focus { border-color:var(--db-cyan); box-shadow:0 0 0 1px var(--db-cyan), inset 0 0 20px rgba(6,182,212,.04); }
.db-select { cursor:pointer; appearance:none; background-image:linear-gradient(45deg,transparent 48%,var(--db-fg-dim) 50%,transparent 52%),linear-gradient(-45deg,transparent 48%,var(--db-fg-dim) 50%,transparent 52%); background-position:calc(100% - 16px) 50%, calc(100% - 10px) 50%; background-size:6px 6px; background-repeat:no-repeat; }
.db-select option { background:#0A0A0D; color:var(--db-fg); }

/* ── buttons ─────────────────────────────────────────────────── */
.db-btn {
  padding:10px 16px; background:transparent; border:1px solid var(--db-cyan); color:var(--db-cyan);
  border-radius:4px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:8px;
}
.db-btn:hover { background:rgba(6,182,212,.08); box-shadow:0 0 0 1px var(--db-cyan), 0 0 20px rgba(6,182,212,.25) inset; }
.db-btn:disabled { opacity:.35; cursor:not-allowed; border-color:var(--db-line-2); color:var(--db-fg-faint); box-shadow:none; }
.db-btn.solid { background:var(--db-cyan); color:var(--db-bg); }
.db-btn.solid:hover { background:#0DD1F2; box-shadow:0 0 24px rgba(6,182,212,.4); }
.db-btn.ghost { border-color:var(--db-line-2); color:var(--db-fg-dim); }
.db-btn.ghost:hover { border-color:var(--db-cyan); color:var(--db-cyan); box-shadow:none; background:rgba(6,182,212,.04); }

/* ── HUD / ops grid ──────────────────────────────────────────── */
.db-ops { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
.db-op { border:1px solid var(--db-line); border-radius:4px; padding:10px 12px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--db-fg-dim); display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,.008); }
.db-op b { color:var(--db-fg); font-weight:500; font-size:13px; }
.db-op .ok { color:var(--db-ok); }
.db-op .mk { color:var(--db-cyan); }
.db-op .dn { color:var(--db-bad); }

/* ── metric tile (big numbers) ───────────────────────────────── */
.db-metric { padding:18px 20px; border:1px solid var(--db-line); border-radius:6px; background:linear-gradient(180deg,rgba(6,182,212,.02),transparent); }
.db-metric .k { font-size:10px; color:var(--db-fg-faint); letter-spacing:.12em; text-transform:uppercase; font-family:'IBM Plex Mono',monospace; margin-bottom:6px; }
.db-metric .v { font-family:'IBM Plex Mono',monospace; font-size:28px; font-weight:500; color:var(--db-fg); font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height:1; }
.db-metric .v.ok { color:var(--db-ok); }
.db-metric .v.bad { color:var(--db-bad); }
.db-metric .v.mk { color:var(--db-cyan); }
.db-metric .sub { font-size:10px; color:var(--db-fg-dim); margin-top:4px; font-family:'IBM Plex Mono',monospace; }

/* ── tables ──────────────────────────────────────────────────── */
.db-tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.db-tbl thead th { text-align:left; padding:10px 14px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--db-fg-faint); border-bottom:1px dashed var(--db-line-2); font-family:'IBM Plex Mono',monospace; font-weight:500; background:rgba(255,255,255,.01); }
.db-tbl tbody td { padding:12px 14px; border-bottom:1px solid var(--db-line); color:var(--db-fg); }
.db-tbl tbody tr:last-child td { border-bottom:none; }
.db-tbl tbody tr:hover td { background:rgba(6,182,212,.02); }
.db-tbl .num { font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
.db-tbl .best td { background:linear-gradient(90deg,rgba(6,182,212,.05),transparent); }
.db-tbl .best td:first-child { position:relative; }
.db-tbl .best td:first-child::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--db-cyan); }

/* ── corner ticks for bounding boxes ─────────────────────────── */
.db-corner-box { position:relative; }
.db-corner-box > .c { position:absolute; width:12px; height:12px; border:1px solid var(--db-cyan); opacity:.4; pointer-events:none; }
.db-corner-box > .c.tl { top:8px; left:8px; border-right:none; border-bottom:none; }
.db-corner-box > .c.tr { top:8px; right:8px; border-left:none; border-bottom:none; }
.db-corner-box > .c.bl { bottom:8px; left:8px; border-right:none; border-top:none; }
.db-corner-box > .c.br { bottom:8px; right:8px; border-left:none; border-top:none; }

/* ── command center (tools.html) ─────────────────────────────── */
.db-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-bottom:20px; }
.db-tile {
  background:linear-gradient(180deg,#0C0C10,#0A0A0D); border:1px solid var(--db-line); border-radius:6px;
  padding:18px 18px 16px; text-decoration:none; color:var(--db-fg); position:relative; overflow:hidden;
  transition:.18s; display:flex; flex-direction:column; gap:12px; min-height:160px;
}
.db-tile::before { content:""; position:absolute; left:10px; top:12px; width:5px; height:5px; border-radius:50%; background:var(--db-cyan); box-shadow:0 0 8px var(--db-cyan); opacity:.7; transition:.18s; }
.db-tile:hover { border-color:var(--db-cyan); box-shadow:0 0 0 1px rgba(6,182,212,.3), 0 10px 40px rgba(6,182,212,.08); transform:translateY(-1px); }
.db-tile:hover::before { box-shadow:0 0 14px var(--db-cyan); opacity:1; }
.db-tile-head { padding-left:16px; display:flex; justify-content:space-between; align-items:flex-start; }
.db-tile-head .nm { font-size:14px; font-weight:600; color:var(--db-fg); }
.db-tile-head .tk { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--db-cyan); letter-spacing:.08em; padding:3px 7px; background:rgba(6,182,212,.08); border:1px solid rgba(6,182,212,.2); border-radius:3px; flex-shrink:0; }
.db-tile .desc { font-size:12px; color:var(--db-fg-dim); line-height:1.5; padding-left:16px; flex:1; }
.db-tile .foot { padding-left:16px; padding-top:10px; border-top:1px dashed var(--db-line-2); display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--db-fg-faint); letter-spacing:.06em; text-transform:uppercase; }
.db-tile .foot .stat { color:var(--db-fg); font-weight:500; }
.db-tile .foot .arrow { color:var(--db-cyan); font-size:13px; }

/* ── command center activity / quick launch ──────────────────── */
.db-cc-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:820px) { .db-cc-grid { grid-template-columns:1fr; } }
.db-feed { list-style:none; margin:0; padding:0; }
.db-feed li { padding:11px 16px; border-bottom:1px solid var(--db-line); display:flex; align-items:center; gap:12px; font-size:13px; }
.db-feed li:last-child { border-bottom:none; }
.db-feed li .t { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--db-fg-faint); letter-spacing:.04em; flex-shrink:0; width:58px; }
.db-feed li .evt { color:var(--db-fg); flex:1; }
.db-feed li .evt .mk { color:var(--db-cyan); font-family:'IBM Plex Mono',monospace; font-size:11px; }
.db-feed li .evt a { color:var(--db-cyan); text-decoration:none; }
.db-feed li .evt a:hover { text-decoration:underline; }
.db-feed li .tag { font-family:'IBM Plex Mono',monospace; font-size:9px; padding:2px 6px; border:1px solid var(--db-line-2); border-radius:2px; color:var(--db-fg-dim); letter-spacing:.05em; flex-shrink:0; }

.db-quicklaunch { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:16px; }
.db-ql-btn { padding:14px 14px; background:rgba(255,255,255,.01); border:1px solid var(--db-line-2); border-radius:4px; color:var(--db-fg-dim); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; text-decoration:none; transition:.15s; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.db-ql-btn:hover { border-color:var(--db-cyan); color:var(--db-cyan); background:rgba(6,182,212,.04); }
.db-ql-btn .arw { opacity:.5; }

/* ── status legend / small bits ──────────────────────────────── */
.db-pill { display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Mono',monospace; font-size:10px; padding:2px 7px; border-radius:2px; letter-spacing:.06em; border:1px solid currentColor; background:rgba(255,255,255,.01); }
.db-pill.live { color:var(--db-ok); }
.db-pill.beta { color:var(--db-warn); }
.db-pill.new  { color:var(--db-cyan); }

/* ── misc ────────────────────────────────────────────────────── */
.db-hr-dashed { border:none; border-top:1px dashed var(--db-line-2); margin:16px 0; }
.db-help { font-size:11px; color:var(--db-fg-faint); font-family:'IBM Plex Mono',monospace; line-height:1.55; letter-spacing:.02em; }

/* hide global footer/hero chrome if a tool accidentally imports styles.css */
body.db-page .footer, body.db-page .hero { display:none; }