/* ============================================================
   CrawlBit, shared design system — TECHNICAL ORIGAMI / PAPER
   Linked by 15 app pages. Same variable + class names as before,
   reskinned from the dark theme to the light "draft paper" theme.
   ============================================================ */
:root {
  /* paper surfaces (were dark) */
  --bg:#f5f1e6; --bg-2:#efe9da; --surface-1:#fffdf4; --surface-2:#fbf8ec; --surface-3:#f1ebdc; --navy:#e8e0cc;
  /* ink hairlines */
  --line:rgba(44,62,80,0.14); --line-2:rgba(44,62,80,0.12); --line-strong:rgba(44,62,80,0.34);
  /* accents — tuned for legibility on cream */
  --violet:#7C3AED; --violet-soft:#6D28D9; --violet-deep:#5B21B6;
  --green:#10B981; --green-soft:#0a8f4f;
  --amber:#b5742a; --amber-soft:#9a5d1e; --red:#c0392b; --red-soft:#c0392b;
  /* ink text tones */
  --text:#2c3e50; --text-bright:#1a2733; --text-dim:#6b7480; --text-faint:#9b958a;
  --glow:0; --accent-glow:0;
  /* fonts — match the Paper landing */
  --font-pixel:"JetBrains Mono",monospace; --font-display:"Architects Daughter",cursive;
  --font-mono:"JetBrains Mono",ui-monospace,monospace; --font-body:"JetBrains Mono",ui-monospace,monospace;
  --d:1;
  --s1:calc(4px*var(--d)); --s2:calc(8px*var(--d)); --s3:calc(12px*var(--d)); --s4:calc(16px*var(--d));
  --s5:calc(20px*var(--d)); --s6:calc(24px*var(--d)); --s8:calc(32px*var(--d)); --s10:calc(40px*var(--d));
  --s12:calc(48px*var(--d)); --s16:calc(64px*var(--d)); --s20:calc(80px*var(--d));
  --radius:6px; --radius-lg:8px; --radius-sm:4px; --maxw:1200px;
  --ink:#2c3e50; --paper2:#fffdf4;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; }
a { color:inherit; text-decoration:none; }

/* blueprint grid backdrop (replaces the dark glow field) */
.bg-field { position:fixed; inset:0; z-index:0; pointer-events:none; }
.bg-field::before { content:""; position:absolute; inset:0; background:transparent; }
.bg-field::after { content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(70,140,170,0.10) 1px,transparent 1px),linear-gradient(90deg,rgba(70,140,170,0.10) 1px,transparent 1px);
  background-size:26px 26px; opacity:1; }
.grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.02; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#page { position:relative; z-index:2; }

.pixel { font-family:var(--font-pixel); letter-spacing:0.02em; line-height:1; }
.mono { font-family:var(--font-mono); }
.display { font-family:var(--font-display); font-weight:400; letter-spacing:0; line-height:1.05; }
.eyebrow { font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--deep,#3a4a3a); }
.eyebrow { color:#4a5a4a; }
.eyebrow-green { color:var(--green-soft); } .eyebrow-violet { color:var(--violet-soft); }
.text-green { color:var(--green-soft); } .text-violet { color:var(--violet-soft); }
.num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.wrap { max-width:var(--maxw); margin:0 auto; padding-left:var(--s6); padding-right:var(--s6); }
.wrap-wide { max-width:1340px; margin:0 auto; padding-left:var(--s6); padding-right:var(--s6); }

/* buttons — paper */
.btn { font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:0.04em; border:1.5px solid var(--line-strong);
  background:var(--surface-2); color:var(--text-bright); padding:10px 16px; border-radius:var(--radius); cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),background .18s ease,border-color .18s ease,box-shadow .2s ease; }
.btn:hover { transform:translateY(-2px); border-color:var(--ink); background:var(--surface-3); }
/* die-cut sticker primary */
.btn-primary { background:#00FF88; color:#14241a; border:1.5px solid var(--ink); font-weight:700;
  box-shadow:inset 0 0 0 2px #fffdf4, 0 0 0 1px var(--ink), 4px 5px 0 0 rgba(56,51,42,.34), inset 0 -9px 13px rgba(255,255,255,.32); }
.btn-primary:hover { background:#00FF88; transform:translate(-1px,-2px) rotate(-.5deg);
  box-shadow:inset 0 0 0 2px #fffdf4, 0 0 0 1px var(--ink), 7px 9px 0 0 rgba(56,51,42,.36), 0 0 16px rgba(0,255,136,.45), inset 0 -9px 13px rgba(255,255,255,.32); }
.btn-ghost { background:transparent; border:1.5px solid var(--line-strong); color:var(--text); }
.btn-ghost:hover { color:var(--text-bright); border-color:var(--ink); }

/* paper cards — sepia-tinted layered shadow */
.card { background:var(--surface-1);
  border:1.5px solid var(--ink); border-radius:var(--radius); position:relative;
  box-shadow:0 1px 1px rgba(44,62,80,.05),0 6px 14px -6px rgba(44,62,80,.10),0 16px 34px -14px rgba(44,62,80,.10); }
.card-pad { padding:var(--s6); }
.feature-card { transition:transform .38s cubic-bezier(.34,1.56,.64,1),box-shadow .35s cubic-bezier(.34,1.56,.64,1); }
.feature-card:hover { transform:translateY(-8px) rotate(-.5deg) scale(1.015);
  box-shadow:0 2px 3px rgba(44,62,80,.05),0 18px 30px -10px rgba(44,62,80,.16),0 34px 60px -18px rgba(44,62,80,.18); }
.hover-row { transition:background .15s ease; border-radius:var(--radius-sm); }
.hover-row:hover { background:rgba(44,62,80,0.05); }

/* tags — paper pills */
.tag { font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--radius-sm); border:1.5px solid var(--ink); color:var(--ink);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; background:var(--paper2); opacity:.92; }
.tag-violet { color:#5B21B6; background:rgba(168,85,247,0.18); }
.tag-green { color:#0a7d45; background:rgba(0,255,136,0.22); }
.tag-amber { color:var(--amber-soft); background:rgba(251,203,91,0.30); }

::selection { background:#00FF88; color:#1a2b20; }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:rgba(44,62,80,0.22); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }

@keyframes rise { from { transform:translateY(16px); } to { transform:none; } }
.rise { animation:rise .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
.spider-float { animation:floaty 4.2s ease-in-out infinite; }
@keyframes blink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
.caret { display:inline-block; width:9px; height:1.05em; background:var(--ink); vertical-align:-2px; animation:blink 1.1s steps(1) infinite; }
.grad-word { color:var(--violet-soft); }
@keyframes spin { to { transform:rotate(360deg); } }
.spin { display:inline-block; border:3px solid var(--line-2); border-top-color:var(--ink); border-radius:50%; animation:spin .7s linear infinite; }
@media (prefers-reduced-motion:reduce){ .rise,.spider-float,.caret,.spin{ animation:none; } }

.pixelart { display:grid; image-rendering:pixelated; }
.pixelart span { display:block; }

/* URL scan bar — paper */
.urlscan { display:flex; align-items:center; gap:8px; background:var(--paper2); border:1.5px solid var(--ink);
  border-radius:var(--radius); padding:7px; width:100%; }
.urlscan.sm { border-radius:var(--radius); padding:6px; }
.urlscan .dot { width:9px; height:9px; border-radius:9px; background:#00FF88; border:1.5px solid var(--ink); box-shadow:0 0 8px #00FF88; margin-left:11px; flex:0 0 auto; }
.urlscan input { flex:1; background:transparent; border:none; outline:none; color:var(--text-bright); font-family:var(--font-mono); font-size:14px; padding:10px 4px; letter-spacing:0.01em; }
.urlscan.sm input { font-size:13px; padding:8px 4px; }
.urlscan input::placeholder { color:var(--text-faint); }

/* engine chip */
.echip { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.02em;
  color:var(--text); background:var(--paper2); border:1.5px solid var(--ink); padding:6px 11px; border-radius:var(--radius-sm); white-space:nowrap; }
.echip .ck { width:16px; height:16px; border-radius:4px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.echip .ck.ok { background:rgba(0,255,136,0.30); color:#0a7d45; }
.echip .ck.no { background:rgba(192,57,43,0.16); color:var(--red); }

/* icon tile */
.icontile { width:40px; height:40px; border-radius:var(--radius-sm); flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:16px; border:1.5px solid var(--ink); }
.icontile.violet { background:rgba(168,85,247,0.16); color:#5B21B6; }
.icontile.green { background:rgba(0,255,136,0.20); color:#0a7d45; }
.icontile.amber { background:rgba(251,203,91,0.22); color:var(--amber-soft); }
.icontile.cyan { background:rgba(8,145,178,0.16); color:#0e7490; }

/* gauge (rendered by JS as SVG; container only) */
.gauge { display:inline-flex; flex-direction:column; align-items:center; gap:9px; }
.gauge .glabel { font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.04em; color:var(--text-dim); }