/* -- TinScan -- Dark theme -------------------------------------------------
   Single stylesheet. Pure CSS, no framework, no build step.
   Dark ambient: near-black canvas, grain texture, glow orbs.
   DM Sans + DM Mono. Purple-to-teal brand gradient.
   WCAG 2.1 AA throughout -- all contrast ratios verified against #08080d.
   -------------------------------------------------------------------------- */

/* -- Design tokens -------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg:   #08080d;
  --s1:   #0f0f17;
  --s2:   #16161f;
  --s3:   #1d1d28;

  /* Text hierarchy */
  --tx:   #f2f1f6;   /* 19:1 */
  --t2:   #c4c3cf;   /* 11:1 */
  --t3:   #8e8d9e;   /* 5.8:1 AA */
  --t4:   #5e5d6e;   /* 3.6:1 decorative */

  /* Brand accent */
  --ac:   #8b7bef;  /* slightly reduced contrast from #7c6aef */
  --ac2:  #a594ff;
  --acbg: rgba(124,106,239,0.07);
  --acbd: rgba(124,106,239,0.18);

  /* Green */
  --gn:   #4ade80;
  --gn2:  #86efac;
  --gnbg: rgba(74,222,128,0.06);
  --gnbd: rgba(74,222,128,0.18);

  /* Red */
  --rd:   #f87171;
  --rd2:  #fca5a5;
  --rdbg: rgba(248,113,113,0.06);
  --rdbd: rgba(248,113,113,0.15);

  /* Amber */
  --am:   #fbbf24;
  --am2:  #fde68a;
  --ambg: rgba(251,191,36,0.06);
  --ambd: rgba(251,191,36,0.15);

  /* Teal */
  --tl:   #2dd4bf;

  /* Low-emphasis */
  --lo-bg: rgba(255,255,255,0.025);
  --lo-bd: rgba(255,255,255,0.07);

  /* Layout */
  --r:  14px;
  --rs: 8px;

  /* Fonts */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', 'SF Mono', 'Fira Code', monospace;
}

/* -- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--tx);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a      { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input  { font-family: inherit; }
input::placeholder { color: var(--t4); }
input:focus { outline: none; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: rgba(124,106,239,0.25); border-radius: 2px; }
[x-cloak] { display: none !important; }

/* -- Utilities ------------------------------------------------------------ */
.mono       { font-family: var(--font-mono); }
.fw-medium  { font-weight: 500; }
.t-white    { color: var(--tx); }
.t-dim      { color: var(--t2); }
.t-faint    { color: var(--t3); }
.t-muted    { color: var(--t4); }
.t-green    { color: var(--gn); }
.t-red      { color: var(--rd); }
.t-blue     { color: var(--ac2); }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-select  { user-select: none; }
.shrink-0   { flex-shrink: 0; }
.mb-3       { margin-bottom: 12px; }
.hidden     { display: none !important; }

/* -- Background layers ---------------------------------------------------- */
.bg-dots {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-glow {
  position: fixed; top: -240px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 500px;
  pointer-events: none; z-index: 0;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.09;
  background: var(--ac);
}