:root{--bg:#0f172a;--card:#ffffff;--muted:#64748b;--line:#e2e8f0;--blue:#1a6fb5;--dark:#334155}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:#f1f5f9;color:#0f172a}
.top{background:var(--bg);color:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}
.top b{font-size:16px}.top small{color:#94a3b8;display:block;font-weight:400}
.top button{background:#1e293b;color:#fff;border:1px solid #334155;border-radius:8px;padding:8px 12px;cursor:pointer}
.wrap{max-width:100%;margin:0 auto;padding:20px 28px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.grid{display:grid;grid-template-columns:minmax(560px,1fr) 1.4fr;gap:20px;align-items:start}@media(max-width:1100px){.grid{grid-template-columns:1fr}}
#app .card:first-child{position:sticky;top:76px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.formgrid .full{grid-column:1/-1}
label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
input,select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin:4px 0 12px;font-size:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{background:var(--blue);color:#fff;border:0;border-radius:10px;padding:11px 14px;font-weight:700;cursor:pointer;width:100%}
.btn.ghost{background:#fff;color:#0f172a;border:1px solid var(--line)}
.btn.danger{background:#dc2626}.btn.small{width:auto;padding:7px 10px;font-size:12px}
table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}.ok{background:#dcfce7;color:#166534}.bad{background:#fee2e2;color:#991b1b}.warn{background:#fef3c7;color:#92400e}.info{background:#dbeafe;color:#1e40af}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}.stat .n{font-size:24px;font-weight:800}.stat .t{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.toolbar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center}
.toolbar input,.toolbar select{margin:0;width:auto;flex:1;min-width:140px}
.toolbar .btn.small{white-space:nowrap}
#importBox{display:none;margin-top:10px;border:1px dashed var(--line);border-radius:10px;padding:12px}
#importBox.open{display:block}
textarea#importText{width:100%;min-height:120px;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12px;font-family:ui-monospace,monospace}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.actions .hint{width:100%;margin:2px 0 0;font-size:10.5px}
#login{max-width:420px;margin:8vh auto}
.hint{font-size:12px;color:var(--muted)}
/* on-screen preview modal (QR visible BEFORE print) */
#previewModal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.72);z-index:50;overflow:auto;padding:24px}
#previewModal.open{display:block}
#previewModal .psheet{background:#fff;max-width:1150px;margin:0 auto;border-radius:12px;overflow:hidden}
#previewModal .pbar{position:sticky;top:0;background:#0f172a;color:#fff;padding:12px 16px;display:flex;gap:10px;align-items:center;justify-content:space-between}
#previewModal .pbar .t{font-weight:800}
#previewModal .pbar button{background:#1e293b;color:#fff;border:1px solid #334155;border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:700}
#previewModal .pbar button.primary{background:#1a6fb5;border-color:#1a6fb5}
#previewBody{padding:18px;background:#fff;overflow-x:auto}
@media print{
  body{background:#fff}
  .top,.wrap,#login,#previewModal{display:none!important}
  #printArea{display:block!important}
}
/* ---------- print ---------- */
#printArea{display:none}
@media print{
  body{background:#fff}
  #printArea{display:block!important}
}
/* Letter template — matches PDF 1.
   ONE printed page: compact letter + big side-by-side wallet cards.
   Cards use flex:1 (fill the row, ~3.1in each) with large readable overlay
   fonts. No page-break — letter + card always stay on a single page. */
.sheet{width:7.5in;margin:0 auto;background:#fff;color:#000;padding:.25in .2in .25in;font-family:Arial,Helvetica,sans-serif}
.hsi-head{display:flex;justify-content:space-between;align-items:flex-start}
.hsi-head img.hsilogo{height:.62in;width:auto;display:block}
.hsi-addr{text-align:right;font-size:10.5px;line-height:1.4;color:#111}
.rule{border:0;border-top:1.5px solid #111;margin:10px 0 8px}
.ltr{font-size:9.5px;line-height:1.35;color:#111}
.ltr p{margin:3px 0}
.dash{border:0;border-top:2px dashed #111;margin:10px 0}
.qrbox{display:flex;gap:10px;align-items:flex-start;margin-top:6px}
.qrbox .qr img{display:block}
.qrcap{font-size:10px;margin-top:3px}
/* wallet card: SIDE-BY-SIDE horizontal, full row width.
   Screen preview stretches to modal width so cards look BIG;
   print stays at exact 7.5in letter width (one page).
   Only dynamic values overlay; labels live inside the background image. */
.cardrow{display:flex;gap:.12in;margin-top:6px;width:100%;break-inside:avoid;page-break-inside:avoid;align-items:flex-start}
.cardfront{position:relative;flex:985;overflow:hidden;background:#fff}
.cardback{position:relative;flex:1035;overflow:hidden;background:#fff}
.cardfront img.bg,.cardback img.bg{display:block;width:100%;height:auto}
/* front: name sits ON the dotted rule (~47.6%): block bottom lands on it.
   Certified-code sits right-aligned above the footer band. */
.cardfront{container-type:inline-size}
.cardfront .cname{position:absolute;left:4%;right:4%;bottom:51.7%;display:flex;align-items:flex-end;justify-content:center;text-align:center;font-weight:900;font-size:4.4cqw;color:#000;letter-spacing:.02em;line-height:1.1;white-space:nowrap;overflow:hidden}
/* front: cert code sits above the footer band, right aligned */
.cardfront .ccode{position:absolute;bottom:15%;right:5%;font-size:3.4cqw;font-weight:700;color:#111;line-height:1;white-space:nowrap}
/* back: each value sits just above its dotted rule; nowrap so long phones can't wrap into the next row */
.cardback{position:relative;overflow:hidden;font-family:Arial,Helvetica,sans-serif;background:#fff;container-type:inline-size}
.cardback .v{position:absolute;text-align:center;font-weight:900;color:#000;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cardback .bi-name{left:6%;right:6%;bottom:79.7%;font-size:3.7cqw}
.cardback .bi-reg{left:6%;right:6%;bottom:66%;font-size:4.5cqw}
.cardback .bi-dl{left:4%;right:52%;bottom:53.5%;font-size:3.7cqw}
.cardback .bi-dr{left:52%;right:4%;bottom:53.5%;font-size:3.7cqw}
.cardback .bi-pl{left:4%;right:52%;bottom:39.7%;font-size:4.3cqw}
.cardback .bi-pr{left:52%;right:4%;bottom:39.7%;font-size:4.3cqw}
/* Participation template — matches PDF 2 */
.part{width:7.5in;margin:0 auto;background:#fff;font-family:Arial,Helvetica,sans-serif;padding:0}
.part-headimg{display:block;width:100%;height:auto}
.part-body{padding:22px 52px 30px;text-align:center;border-left:1px solid #8a8f96;border-right:1px solid #8a8f96;border-bottom:1px solid #8a8f96}
.pname{font-size:23px;padding:6px 4px}
.prule{border:0;border-top:1px solid #111;margin:0}
.pcourse{font-size:18px;margin:0;padding:9px 4px}
.ptag{color:#1a6fb5;font-weight:800;font-size:11.5px;margin:13px 0;letter-spacing:.01em}
.pgrid{display:flex;gap:44px;justify-content:center;margin-top:16px}
.pgrid>div{flex:1}.pgrid .v{font-size:18px;padding:6px}.pgrid .l{font-size:12px;margin-top:2px}
.plogos{display:block;width:78%;height:auto;margin:34px auto 0}
.pdisc{font-size:9.5px;font-style:italic;margin-top:22px;color:#111}
.pdisc b{font-style:italic}
.pfoot{text-align:center;font-size:10.5px;color:#333;margin:14px 0 0}
.qrbox{display:flex;gap:10px;align-items:center}


/* Baked-text masks (shared): the card art has course text painted in, so
   record-driven overlays cover those regions. REGIONS: front-mid (paragraph
   course line), front-foot (footer band), back-para (conformity paragraph).
   Geometry is pixel-measured per region; tone samples the art. All masks are
   opaque and paint above the art (later DOM siblings). */
.cardfront .cmask,.cardback .cmask{position:absolute;display:flex;align-items:center;overflow:hidden;white-space:nowrap}

/* Dynamic course overlays: the card art has the course baked in, so the
   record's own course is painted over both spots (middle paragraph line +
   footer band) in matching tone. Tinted patch backgrounds sample the art. */
.cardfront .ccourse-mid{position:absolute;left:5%;right:5%;top:60%;height:6%;display:flex;align-items:center;background:#e5e6e8;color:#1a1a1a;font-weight:600;font-size:2.85cqw;letter-spacing:.01em;line-height:1.1;white-space:nowrap;overflow:hidden}
.cardfront .ccourse-foot{position:absolute;left:6%;right:6%;top:82.5%;bottom:8%;display:flex;align-items:center;background:#e6e7e9;color:#333;font-family:"Arial Narrow",Arial,Helvetica,sans-serif;font-stretch:condensed;font-weight:900;font-size:4.5cqw;letter-spacing:.02em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Dynamic course paragraph: the card art bakes the course into the back
   bottom paragraph, so the record's own wording is re-set over it on a
   white patch (back art is white — seamless). Bold line below stays baked. */
.cardback .cb-para{position:absolute;left:5%;right:4%;top:72%;height:15%;display:flex;align-items:center;justify-content:center;background:#fff;white-space:normal;color:#111;font-family:Arial,Helvetica,sans-serif;font-size:1.65cqw;line-height:1.55;text-align:center;overflow:hidden}