/* =========================
   PaperBee — base styles
   ========================= */
:root{
  --bg: #0b1020;           /* deep navy */
  --bg-soft:#0f152b;
  --panel:#111837;
  --card:#151d42;
  --ink:#e8ecff;
  --muted:#a8b0d9;
  --accent:#ffd34d;        /* bee yellow */
  --accent-2:#7dd3fc;      /* light cyan for accents */
  --ring: rgba(125,211,252,.45);
  --shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.35);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, #1b2a66 0%, transparent 60%),
    radial-gradient(1000px 600px at 120% 0%, #173a6d 0%, transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* ====== NAVBAR ====== */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(17,24,55,.75);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{max-width:1200px;margin:0 auto; padding:12px 18px; display:flex; align-items:center; gap:14px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); text-decoration:none}
.brand .mark{width:28px;height:28px;border-radius:8px;background:var(--accent); position:relative; box-shadow:inset 0 0 0 2px #111}
.brand .mark:before,.brand .mark:after{content:"";position:absolute; left:5px; right:5px; height:3px; background:#111}
.brand .mark:before{top:7px}.brand .mark:after{top:15px}
.navlinks{margin-left:auto; display:flex; align-items:center; gap:6px}
.navlinks a{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:14px;
  padding:8px 12px; border-radius:12px;
}
.navlinks a:hover{background:rgba(255,255,255,.08)}
.navlinks a.active{background:linear-gradient(180deg,#1c2a64,#162358); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.nav-note{color:var(--muted); font-size:12px; margin-left:8px}

@media (max-width: 900px){
  .nav{flex-wrap:wrap}
  .navlinks{order:3; width:100%; overflow:auto; white-space:nowrap; padding-bottom:8px}
  .nav-note{display:none}
}

/* ====== LAYOUT ====== */
.container{max-width:1200px; margin:0 auto; padding:22px 18px}
.hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:center;
}
@media (max-width: 960px){ .hero{ grid-template-columns:1fr } }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.title{font-size:28px; font-weight:800; letter-spacing:.2px; margin:0 0 6px}
.subtitle{color:var(--muted); margin:4px 0 0}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width: 980px){ .grid3{grid-template-columns:1fr} }
a.card-link{ display:block; color:inherit; text-decoration:none }
a.card-link .card{ transition: transform .15s ease, box-shadow .2s ease }
a.card-link:hover .card{ transform: translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.5) }

.button{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,#2a3470,#1b2358); color:#fff; font-weight:700;
  box-shadow: var(--shadow);
}
.button.secondary{ background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,.16) }
.badge{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); padding:6px 8px; border-radius:999px; font-size:12px; color:var(--muted) }

input,select,textarea{
  width:100%; background:rgba(255,255,255,.06); color:var(--ink);
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px 12px;
  outline:none; box-shadow:0 0 0 0 var(--ring); transition: box-shadow .15s;
  font:14px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}
input:focus,select:focus,textarea:focus{ box-shadow:0 0 0 4px var(--ring) }
.controls{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 760px){ .controls{ grid-template-columns:1fr } }

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#cfe3ff; padding:6px 8px; border-radius:999px; font-size:12px}

.grid{display:grid; gap:2px}
.cell{
  display:flex; align-items:center; justify-content:center; aspect-ratio:1/1;
  border:1.2px solid rgba(255,255,255,.9); background:rgba(255,255,255,.06);
  font-weight:800; letter-spacing:.6px; font-size:18px; color:#e8eeff;
}
.cell.ans{ background: #ffe38c; color:#111; }

/* footer */
footer{padding:30px 0; color:var(--muted); text-align:center}

/* PRINT */
@media print{
  .header,.print-hide{display:none !important}
  .container{padding:0}
  .card{box-shadow:none; border:none; background:#fff; color:#111}
  body{background:#fff}
  .cell{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .adsbygoogle{ display:none !important; }  /* hide ads in print */
}

/* =========================
   High-contrast grid upgrade
   (overrides come AFTER base)
   ========================= */

/* Screen: darker letters + borders for readability on dark theme */
#grid .cell{
  color:#0a0a0a;               /* darker letters on screen */
  font-weight:800;             /* bold for legibility */
  border-color:#2b2f3a;        /* darker grid lines */
  background:rgba(255,255,255,.08); /* subtle fill remains */
}

/* Screen: clearer answer highlight */
#grid .cell.ans{
  background:rgba(255, 211, 77, 0.32);
  color:#111;
  outline:1px dashed rgba(0,0,0,.35);
}

/* Optional: high-contrast mode hook (if body.hi-contrast is set by JS) */
body.hi-contrast #grid .cell{
  color:#000;
  font-weight:900;
  border-color:#111;
}
body.hi-contrast #grid .cell.ans{
  background:rgba(255, 211, 77, 0.42);
  outline-color:#111;
}

/* Print: force maximum contrast, crisp borders, no fills */
@media print{
  #grid .cell{
    color:#000 !important;          /* black letters */
    font-weight:900 !important;     /* heavy for paper */
    border-color:#000 !important;   /* black grid lines */
    background:#fff !important;     /* white cells */
  }
  #grid .cell.ans{
    background:transparent !important;
    color:#000 !important;
    position:relative;
    outline:none !important;
  }
  #grid .cell.ans::after{
    content:"";
    position:absolute;
    inset:2px;                      /* inner outline prints clean */
    border:1.2px solid #000;        /* slightly thicker for home printers */
    border-radius:2px;
  }
}