/* ============================================================
   Icon Academy — Black & Gold theme
   ============================================================ */
:root { --gold:#D4AF37; --ink:#0A0A0A; }
* { font-feature-settings: "tnum"; }
body { background:#0A0A0A; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#333; border-radius:4px; }
::-webkit-scrollbar-track { background:#111; }

.font-mono, .font-mono * { font-family:'JetBrains Mono', monospace; }

/* Cards / containers */
.card-dark {
  background:#141414; border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
}

/* Buttons */
.btn-gold {
  background:var(--gold); color:#0A0A0A; font-weight:700;
  padding:10px 18px; border-radius:12px; transition:.15s; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-gold:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn-ghost {
  background:transparent; color:#e5e7eb; border:1px solid rgba(255,255,255,.15);
  padding:9px 16px; border-radius:12px; transition:.15s; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }

.icon-btn {
  display:inline-grid; place-items:center; width:34px; height:34px;
  border-radius:9px; background:rgba(255,255,255,.05); color:#cbd5e1;
  transition:.15s; cursor:pointer; margin-inline-start:2px;
}
.icon-btn:hover { background:rgba(212,175,55,.18); color:var(--gold); }

/* Inputs */
.inp {
  width:100%; background:#0d0d0d; border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:10px 12px; color:#f3f4f6; transition:.15s;
  margin-bottom:4px; outline:none;
}
.inp:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(212,175,55,.2); }
.lbl { display:block; font-size:13px; color:#9ca3af; margin:8px 0 2px; }

/* Nav */
.nav-link {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:10px; color:#cbd5e1; font-size:14px; transition:.15s;
}
.nav-link:hover { background:rgba(255,255,255,.05); color:#fff; }
.nav-active { background:rgba(212,175,55,.15); color:var(--gold); font-weight:700; }

/* Badges */
.badge-ok, .badge-bad, .badge-warn {
  display:inline-block; padding:2px 10px; border-radius:999px;
  font-size:12px; font-weight:700;
}
.badge-ok   { background:rgba(22,163,74,.18); color:#4ade80; }
.badge-bad  { background:rgba(220,38,38,.18); color:#f87171; }
.badge-warn { background:rgba(217,119,6,.18); color:#fbbf24; }

/* Scan / mode toggles */
.mode-btn {
  padding:10px 18px; border-radius:12px; font-weight:700; cursor:pointer;
  border:1px solid rgba(255,255,255,.15); color:#cbd5e1; transition:.15s;
}
.mode-btn.active { background:var(--gold); color:#0A0A0A; border-color:var(--gold); }

/* Designer side toggle */
.side-btn {
  padding:8px 16px; border-radius:10px; cursor:pointer; font-weight:700;
  border:1px solid rgba(255,255,255,.15); color:#cbd5e1;
}
.side-btn.active { background:var(--gold); color:#0A0A0A; border-color:var(--gold); }

/* Parent portal tabs */
.ptab {
  padding:10px 18px; cursor:pointer; font-weight:700; color:#9ca3af;
  border-bottom:2px solid transparent;
}
.ptab.active { color:var(--gold); border-color:var(--gold); }

/* ============================================================
   A4 print layout — 10 cards per page (2 cols x 5 rows)
   ============================================================ */
/* Physical card size — CR80 ratio (1012:638). 86mm x 54.2mm fits 2x5 on A4. */
.a4-page {
  width:210mm; min-height:297mm; background:#fff; margin:0 auto 10mm;
  padding:8mm 12mm; display:grid;
  grid-template-columns:repeat(2, 86mm); grid-template-rows:repeat(5, 54.2mm);
  gap:5mm 10mm; justify-content:center; align-content:start; box-sizing:border-box;
}
.a4-cell {
  border:1px dashed #bbb; border-radius:8px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; position:relative;
}
/* card-face fills its cell exactly so print == designer */
.card-face { position:relative; background:#fff; overflow:hidden; width:86mm; height:54.2mm; }
.card-face img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.card-el { position:absolute; box-sizing:border-box; }
.card-el.text { color:#000; font-weight:700; display:flex; align-items:center; line-height:1; white-space:nowrap; }

@media print {
  body { background:#fff !important; }
  .no-print { display:none !important; }
  .a4-page { margin:0; box-shadow:none; page-break-after:always; }
  @page { size:A4; margin:0; }
}