:root {
  --bg:#0d1117; --bg-elev:#10151c; --surface:#161b22; --border:#30363d;
  --text:#e6edf3; --muted:#7d8590; --dim:#adbac7;
  --accent:#22d3ee; --accent-ink:#0d1117;
  --fake:#f85149; --real:#34d399; --warn:#f0883e;
  --radius:10px; --radius-lg:14px; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.5;
}
a { color:var(--accent); text-decoration:none; }
.container { max-width:880px; margin:0 auto; padding:20px 18px; }
.centered { max-width:420px; margin:8vh auto; padding:0 18px; }

/* nav */
.nav { display:flex; align-items:center; gap:16px; padding:12px 18px;
  background:var(--bg-elev); border-bottom:1px solid var(--border); }
.brand { font-weight:800; letter-spacing:.5px; display:inline-flex; align-items:center; color:var(--text); }
.brand .accent { color:var(--accent); }
.brand .logo-mark { height:1.15em; width:1.15em; flex:none; margin-right:.4em; }
.nav .links { display:flex; gap:6px; }
.nav a, .nav .navitem { color:var(--dim); padding:5px 12px; border-radius:7px; font-size:13px; }
.nav a.active, .nav .active { color:var(--accent-ink); background:var(--accent); font-weight:600; }
.nav .spacer { margin-left:auto; }
.nav .pill { color:var(--accent); border:1px solid #1f6f7e; padding:4px 12px; border-radius:7px; font-size:13px; }
.nav .who { color:var(--muted); font-size:13px; }

/* cards / layout */
.card { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px; margin-top:16px; }
.row { display:flex; gap:16px; }
.row > * { flex:1; }
h1 { font-size:20px; } h2 { font-size:16px; } h3 { font-size:14px; color:var(--dim); }
.label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.muted { color:var(--muted); } .mono { font-family:var(--mono); }
.notice { background:rgba(34,211,238,.1); border:1px solid #1f6f7e; color:var(--accent);
  padding:8px 12px; border-radius:8px; font-size:13px; margin:8px 0; }
.error { color:var(--fake); }

/* meter */
.meter { display:flex; gap:16px; margin:16px 0; }
.meter .gauge { flex:1; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px 14px; }
.meter .gtop { display:flex; justify-content:space-between; font-size:11px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.bar { height:6px; background:#21262d; border-radius:3px; overflow:hidden; }
.bar > span { display:block; height:100%; background:var(--real); }
.bar.high > span { background:var(--warn); }

/* forms */
label { display:block; margin:10px 0 4px; font-size:13px; color:var(--dim); }
input, textarea, select { width:100%; background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:8px; padding:9px 11px; font:inherit; }
textarea { resize:vertical; }
.tabs { display:flex; gap:6px; }
.tab { font-size:12px; color:var(--muted); border:1px solid var(--border);
  padding:5px 14px; border-radius:7px; cursor:pointer; }
.tab.active { color:var(--accent-ink); background:var(--dim); font-weight:600; }
.btn { background:var(--surface); color:var(--dim); border:1px solid var(--border);
  border-radius:8px; padding:8px 16px; font:inherit; font-size:13px; cursor:pointer; }
.btn-primary { background:var(--accent); color:var(--accent-ink); border:none; font-weight:700; }
.inline { display:inline; }

/* result + gauge */
.score-gauge { width:64px; height:64px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; }
.score-gauge .inner { width:48px; height:48px; border-radius:50%; background:var(--surface);
  display:flex; align-items:center; justify-content:center; font-weight:700;
  font-family:var(--mono); }
.badge { font-weight:700; font-size:12px; padding:5px 12px; border-radius:6px; }
.badge.fake { background:rgba(248,81,73,.15); color:var(--fake); border:1px solid rgba(248,81,73,.4); }
.badge.real { background:rgba(52,211,153,.15); color:var(--real); border:1px solid rgba(52,211,153,.4); }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { background:#21262d; color:var(--muted); font-size:11px; padding:3px 9px;
  border-radius:5px; font-family:var(--mono); }

/* analyze form header (input-type tabs + model picker) */
.analyze-head { display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; }
.model-pick { display:flex; align-items:center; gap:8px; }
.model-pick select { width:auto; max-width:62vw; }

/* tables */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid #21262d; }
th { color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
td.fake, .text-fake { color:var(--fake); } td.real, .text-real { color:var(--real); }

/* ---- mobile ---- */
@media (max-width:640px) {
  .container { padding:16px 13px; }
  .nav { flex-wrap:wrap; gap:8px 8px; padding:10px 13px; }
  .nav .brand { width:100%; }              /* brand on its own first row */
  .nav .spacer { display:none; }           /* no auto-margin float; flow left */
  .nav .links { flex-wrap:wrap; gap:6px; }
  .nav .links a { padding:6px 11px; }
  .nav .who { display:none; }              /* hide email to save room */
  .row { flex-direction:column; gap:12px; }
  .meter { flex-direction:column; gap:10px; }
  .tabs { flex-wrap:wrap; }
  .model-pick { width:100%; }
  .model-pick select { flex:1; min-width:0; }
  .btn { padding:10px 16px; }              /* larger touch target */
  table { font-size:12px; }
  th, td { padding:7px 8px; }
  h1 { font-size:18px; }
}