/* ============================================================
   TKD AI-Native Test — "Line Map" design system
   Light working screens + dark hero moments (hybrid).
   One color per dimension; banco the bee; metro motif.
   ============================================================ */
:root{
  /* Line Map — dimension line colors */
  --mindset:#2a6fdb;   /* blue  */
  --thinking:#e1232b;  /* red (also TKD brand accent) */
  --approach:#1f9d62;  /* green */
  --behavior:#e8a32a;  /* amber */

  /* tier colors */
  --tier-not-yet:#c0392b;
  --tier-driver:#1e6fd6;
  --tier-owner:#1f9d62;
  --tier-leader:#b8860b;

  /* brand + neutrals */
  --navy:#0b1e36;  --navy2:#15315a;
  --ink:#13243d;   --txt:#13243d;    --muted:#5b6b85;  --faint:#8a98ae;
  --paper:#f6f7fb; --card:#ffffff;   --line:#e9edf3;
  --honey:#ffd23e; --honey-d:#f0a800;
  --ai:#6b3fd4;    /* "AI did this" purple */
  --review:#1f9d62;
  --red:#e1232b;   --green:#1f9d62;

  --r:16px; --r-lg:22px;
  --shadow:0 8px 30px rgba(11,30,54,.08);
  --shadow-lg:0 14px 40px rgba(11,30,54,.14);
  --hero:radial-gradient(420px 280px at 50% -4%,#15355f,#0b1e36 62%);
  --font:'Plus Jakarta Sans','Noto Sans SC',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--paper);min-height:100vh;-webkit-font-smoothing:antialiased}
.wrap{max-width:680px;margin:0 auto;padding:18px 16px 60px}
.hidden{display:none!important}
img{max-width:100%}

/* ---------- top bar (dark, always) ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--navy);
  padding:14px 22px;border-bottom:3px solid var(--thinking)}
.brand{display:flex;align-items:center;gap:11px}
.brand img{height:30px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.brand .tag{color:#9fb4d4;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600}
.lang-toggle{display:flex;background:rgba(255,255,255,.12);border-radius:999px;padding:3px}
.lang-toggle button{border:0;background:transparent;color:#cfe0f7;font-weight:700;
  padding:7px 13px;border-radius:999px;cursor:pointer;font-size:13px;font-family:inherit;min-height:36px}
.lang-toggle button.on{background:#fff;color:var(--navy)}

/* ---------- cards ---------- */
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:28px 24px;animation:rise .35s ease;overflow:hidden}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.center{text-align:center}
h1{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:.2em 0 .3em;line-height:1.12}
h2{font-size:21px;font-weight:800;margin:.2em 0}
p.lead{color:var(--muted);font-size:15px;line-height:1.6;margin:.4em 0 1.2em}

/* ---------- dark hero treatment ---------- */
.card.hero{background:var(--hero);color:#fff}
.card.hero h1,.card.hero h2{color:#fff}
.card.hero p.lead{color:#aebfd8}
.card.hero .fineprint{color:#7e93b3}
.mascot-wrap{display:flex;justify-content:center;margin:2px auto 6px}
.mascot-wrap .banco{filter:drop-shadow(0 12px 22px rgba(0,0,0,.35))}

/* ---------- forms ---------- */
label{display:block;font-weight:700;font-size:13px;margin:16px 0 6px;color:var(--ink)}
input[type=text],input[type=email]{width:100%;padding:13px 14px;border:1.5px solid var(--line);
  border-radius:12px;font-size:15px;font-family:var(--font);background:#fbfdff;color:var(--ink)}
input:focus{outline:none;border-color:var(--mindset);box-shadow:0 0 0 3px rgba(42,111,219,.16)}
.seg{display:flex;gap:10px;margin-top:6px}
.seg button{flex:1;padding:13px;border:1.5px solid var(--line);background:#fbfdff;border-radius:12px;
  font-weight:700;cursor:pointer;font-size:14px;color:var(--ink);font-family:inherit;min-height:46px}
.seg button.on{border-color:var(--mindset);background:rgba(42,111,219,.10);color:var(--mindset)}
.consent{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:13px;color:var(--muted);margin-top:16px;cursor:pointer}
.consent input{margin-top:2px;width:18px;height:18px;flex:0 0 auto}
.reg-note{font-size:12.5px;line-height:1.5;color:var(--muted);background:#f4f1fc;border:1px solid #e6ddf9;
  border-radius:10px;padding:10px 12px;margin:16px 0 0;display:flex;gap:8px}
.reg-note:before{content:"✨";flex:0 0 auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:15px 18px;border:0;border-radius:14px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;
  background:linear-gradient(180deg,#3a86e6,var(--mindset));color:#fff;min-height:48px;
  box-shadow:0 8px 20px rgba(42,111,219,.30);transition:transform .08s,box-shadow .2s;margin-top:18px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:transparent;color:var(--mindset);box-shadow:none;border:1.5px solid var(--line)}
.card.hero .btn.ghost{color:#cfe0f7;border-color:rgba(255,255,255,.3)}
.btn.small{width:auto;padding:11px 16px;font-size:14px;margin-top:0;min-height:42px}
.btn.red{background:linear-gradient(180deg,#ee4b52,var(--thinking));box-shadow:0 8px 20px rgba(225,35,43,.28)}

/* ---------- AI-work labels (AI did this first, human reviews) ---------- */
.ai-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.3px;
  padding:4px 10px;border-radius:8px;background:#ede7ff;color:var(--ai);text-transform:uppercase}
.ai-tag:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ai-tag.review{background:#e0f3ec;color:var(--review)}
.ai-tag.judged{background:#fff3d6;color:#b8860b}
.ai-tag.drafted{background:#ede7ff;color:var(--ai)}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}

/* ---------- metro progress (dimension-colored line, banco rides it) ---------- */
.metro{--dim:var(--mindset);display:flex;align-items:center;justify-content:center;gap:0;margin:8px 0 6px;flex-wrap:wrap}
.metro[data-dim="mindset"]{--dim:var(--mindset)}
.metro[data-dim="thinking"]{--dim:var(--thinking)}
.metro[data-dim="approach"]{--dim:var(--approach)}
.metro[data-dim="behavior"]{--dim:var(--behavior)}
.stop{width:13px;height:13px;border-radius:50%;background:#dfe7f3;position:relative;flex:0 0 auto}
.stop.done{background:var(--dim)}
.stop.now{width:19px;height:19px;background:#fff;border:4px solid var(--dim);box-shadow:0 0 0 5px color-mix(in srgb,var(--dim) 22%,transparent)}
.seg-line{width:22px;height:4px;background:#dfe7f3;flex:0 0 auto}
.seg-line.done{background:var(--dim)}
.progress-meta{color:var(--faint);text-align:center;font-size:12px;font-weight:600;margin:2px 0 16px;letter-spacing:.3px}

/* ---------- question ---------- */
.qdim{--dim:var(--mindset);display:inline-block;font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--dim);background:color-mix(in srgb,var(--dim) 12%,transparent);padding:5px 11px;border-radius:999px}
.qdim[data-dim="mindset"]{--dim:var(--mindset)}
.qdim[data-dim="thinking"]{--dim:var(--thinking)}
.qdim[data-dim="approach"]{--dim:var(--approach)}
.qdim[data-dim="behavior"]{--dim:var(--behavior)}
.qtext{font-size:20px;font-weight:800;line-height:1.35;margin:12px 0 18px;color:var(--ink)}
#screen-q{--dim:var(--mindset)}
#screen-q[data-dim="mindset"]{--dim:var(--mindset)}
#screen-q[data-dim="thinking"]{--dim:var(--thinking)}
#screen-q[data-dim="approach"]{--dim:var(--approach)}
#screen-q[data-dim="behavior"]{--dim:var(--behavior)}
.opt{display:flex;align-items:center;width:100%;text-align:left;padding:15px 16px;border:1.5px solid var(--line);
  background:#fbfdff;border-radius:14px;font-size:15px;line-height:1.45;cursor:pointer;margin-bottom:10px;
  font-family:var(--font);color:var(--ink);transition:.12s;min-height:48px}
.opt:hover{border-color:var(--dim,#2a6fdb);background:color-mix(in srgb,var(--dim,#2a6fdb) 6%,#fbfdff)}
.opt.sel{border-color:var(--dim,#2a6fdb);background:color-mix(in srgb,var(--dim,#2a6fdb) 12%,#fff)}
.multi-hint{display:inline-block;font-size:12.5px;font-weight:700;color:var(--approach);
  background:rgba(31,157,98,.12);padding:5px 10px;border-radius:999px;margin:0 0 12px}
.opt .ck{display:inline-block;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);
  margin-right:11px;vertical-align:-3px;flex:0 0 auto;position:relative}
.opt.sel .ck{background:var(--dim,#2a6fdb);border-color:var(--dim,#2a6fdb)}
.opt.sel .ck:after{content:"✓";color:#fff;font-size:12px;font-weight:800;position:absolute;left:3px;top:-1px}

/* ---------- loader / analyzing (dark hero with stepped checks) ---------- */
.loader{display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px 0;color:#aebfd8}
.steps{width:100%;max-width:340px;margin:14px auto 0;display:flex;flex-direction:column;gap:10px;text-align:left}
.step{display:flex;align-items:center;gap:11px;font-size:14px;color:#aebfd8;transition:.3s}
.step .dot{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.25);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#aebfd8}
.step.active{color:#fff;font-weight:700}
.step.active .dot{border-color:var(--honey);color:var(--honey)}
.step.done{color:#cfe0f7}
.step.done .dot{background:var(--approach);border-color:var(--approach);color:#fff}
.step.done .dot:after{content:"✓"}

/* ---------- result ---------- */
.result-hero{background:var(--hero);color:#fff;margin:-28px -24px 4px;padding:30px 24px 26px;text-align:center}
.badge{width:88px;height:88px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
  font-size:38px;background:linear-gradient(180deg,var(--honey),var(--honey-d));box-shadow:0 10px 26px rgba(240,168,0,.45)}
.tier-tag{color:#aebfd8;font-size:13px;letter-spacing:.4px;margin:0 0 4px}
.result-hero .tier-name,#r-tier{font-size:28px;font-weight:800;margin:2px 0;color:#fff}
.result-hero .tier-tag{color:#9fc7ff}
.result-hero p.lead{color:#d7e3f4;margin:8px 0 0}
.section-h{font-size:14px;font-weight:800;margin:22px 0 10px;color:var(--navy);display:flex;align-items:center;gap:8px;
  text-transform:uppercase;letter-spacing:.4px}
.dims{margin:6px 0 4px}
.dimrow{--dim:var(--mindset);margin:13px 0}
.dimrow.dim-mindset{--dim:var(--mindset)}
.dimrow.dim-thinking{--dim:var(--thinking)}
.dimrow.dim-approach{--dim:var(--approach)}
.dimrow.dim-behavior{--dim:var(--behavior)}
.dimrow .top{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:6px}
.dimrow .top .val{color:var(--dim);font-weight:800}
.bar{height:11px;border-radius:999px;background:#eaf0fa;overflow:hidden}
.bar > span{display:block;height:100%;border-radius:999px;background:var(--dim);width:0;transition:width 1s ease}
.list{margin:0;padding-left:2px;list-style:none}
.list li{position:relative;padding:9px 0 9px 26px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.55}
.list li:last-child{border-bottom:0}
.list li:before{content:"";position:absolute;left:4px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--ai)}
.list.plan li:before{background:var(--approach)}

/* role ladder as a vertical metro line ("you are here") */
.ladder{position:relative;display:flex;flex-direction:column;gap:0;margin:14px 0 4px;padding-left:8px}
.rung{display:flex;align-items:center;gap:14px;padding:11px 12px;position:relative;color:var(--muted);font-size:14px}
.rung:before{content:"";position:absolute;left:18px;top:0;bottom:0;width:3px;background:var(--line)}
.rung:first-child:before{top:50%}
.rung:last-child:before{bottom:50%}
.rung .lv{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #cfd8e6;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#9fb0c9;flex:0 0 auto}
.rung.cur{color:var(--navy);font-weight:800}
.rung.cur .lv{background:var(--honey);border-color:var(--honey-d);color:var(--navy)}
.rung .you{margin-left:auto;font-size:11px;font-weight:800;color:var(--honey-d);background:#fff7df;border:1px solid #ffe08a;padding:3px 9px;border-radius:999px}

/* data-loop honey card */
.loop-card{display:flex;gap:14px;align-items:center;margin:22px 0 6px;padding:16px 18px;border-radius:16px;
  background:linear-gradient(180deg,#fff7df,#fff0c2);border:1.5px solid #ffe08a}
.loop-bee{flex:0 0 auto}
.loop-h{font-weight:800;color:#7a5a00;margin-bottom:4px}
.loop-b{margin:0;font-size:13.5px;line-height:1.55;color:#6b5519}
.fineprint{color:var(--faint);font-size:11px;text-align:center;margin-top:18px}

/* ---------- saved-result card (built for clean image capture) ---------- */
.rcard{position:fixed;left:-10000px;top:0;width:680px;background:#fff;color:var(--ink);
  font-family:var(--font);border:1px solid var(--line);overflow:hidden}
.rcard-head{background:var(--navy);display:flex;align-items:center;justify-content:space-between;
  padding:22px 30px;border-bottom:4px solid var(--thinking)}
.rcard-head img{height:34px;width:auto}
.rcard-head span{color:#9fb4d4;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.rcard-body{padding:30px 30px 24px}
.rcard-label{font-size:13px;color:var(--muted);letter-spacing:.3px}
.rcard-name{font-size:30px;font-weight:800;color:var(--navy);line-height:1.15;margin:2px 0 4px}
.rcard-tierwrap{display:flex;align-items:center;gap:18px;margin:18px 0 6px}
.rcard-badge{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:34px;background:linear-gradient(180deg,var(--honey),var(--honey-d));flex:0 0 auto;
  box-shadow:0 8px 20px rgba(240,168,0,.35)}
.rcard-tier{font-size:24px;font-weight:800;color:var(--navy)}
.rcard-tagline{font-size:14px;color:var(--muted);margin-top:3px;line-height:1.4}
.rcard-dims{margin:22px 0 12px;display:flex;flex-direction:column;gap:13px}
.rcd-row{--dim:var(--mindset)}
.rcd-row.dim-mindset{--dim:var(--mindset)}
.rcd-row.dim-thinking{--dim:var(--thinking)}
.rcd-row.dim-approach{--dim:var(--approach)}
.rcd-row.dim-behavior{--dim:var(--behavior)}
.rcd-top{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;margin-bottom:6px}
.rcd-val{color:var(--dim);font-weight:800}
.rcd-bar{height:12px;border-radius:999px;background:#eaf0fa;overflow:hidden}
.rcd-bar>span{display:block;height:100%;border-radius:999px;background:var(--dim)}
.rcard-h{font-size:14px;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.4px;margin:22px 0 8px}
.rcard-date{font-size:13px;color:var(--faint);margin-top:18px;font-weight:600}
.rcard-foot{background:#f6f7fb;padding:13px 30px;font-size:11px;color:var(--muted);font-weight:700;
  letter-spacing:1px;text-transform:uppercase;border-top:1px solid var(--line)}

/* print fallback: show only the result card */
@media print{
  body.print-card *{visibility:hidden}
  body.print-card #result-card, body.print-card #result-card *{visibility:visible}
  body.print-card #result-card{position:absolute;left:0;top:0;border:0}
}

/* ---------- result: skill tree (cumulative roles, lit/locked) ---------- */
.skilltree{display:flex;flex-direction:column;gap:14px;margin:14px 0 4px}
.branch{border:1.5px solid var(--line);border-radius:16px;padding:15px 16px 14px;background:#fbfdff;transition:.2s}
.branch.locked{opacity:.62}
.branch.current{border-color:var(--honey-d);background:#fffdf5;box-shadow:0 0 0 3px rgba(240,168,0,.12)}
.branch.next{border-style:dashed;border-color:var(--mindset);animation:branchpulse 2.2s ease-in-out infinite}
@keyframes branchpulse{0%,100%{box-shadow:0 0 0 0 rgba(42,111,219,0)}50%{box-shadow:0 0 0 4px rgba(42,111,219,.16)}}
.branch-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.branch .lv-badge{width:30px;height:30px;border-radius:50%;background:#eef1f6;color:var(--faint);font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.branch.unlocked .lv-badge,.branch.current .lv-badge{background:var(--honey);color:var(--navy)}
.branch .role-name{font-weight:800;font-size:16px;color:var(--ink)}
.branch.locked .role-name{color:var(--muted)}
.role-state{margin-left:auto;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;padding:3px 10px;border-radius:999px}
.role-state.s-current{background:#fff3d6;color:#b8860b}
.role-state.s-next{background:rgba(42,111,219,.12);color:var(--mindset)}
.role-state.s-unlocked{background:#e6f8ef;color:var(--approach)}
.role-state.s-locked{background:#f1f3f7;color:var(--faint)}
.role-essence{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 12px}
.caps{display:flex;flex-direction:column;gap:9px}
.cap{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.cap.dim-mindset{--dim:var(--mindset)}
.cap.dim-thinking{--dim:var(--thinking)}
.cap.dim-approach{--dim:var(--approach)}
.cap.dim-behavior{--dim:var(--behavior)}
.cap .node{width:18px;height:18px;border-radius:50%;flex:0 0 auto;margin-top:1px;position:relative;
  border:2px solid var(--dim,#cfd8e6);background:#fff}
.cap.unlocked .node{background:var(--dim);border-color:var(--dim)}
.cap.unlocked .node:after{content:"✓";color:#fff;font-size:11px;font-weight:800;position:absolute;left:2.5px;top:-1px}
.cap.locked{color:var(--faint)}
.cap.locked .node{border-color:#cfd8e6;background:#f1f3f7}

/* ============================================================
   ADMIN — light working portal
   ============================================================ */
.admin-shell{max-width:1100px}
.tabs{display:flex;gap:8px;margin:18px 0}
.tabs button{border:1.5px solid var(--line);background:#fff;color:var(--muted);padding:9px 16px;border-radius:999px;
  font-weight:700;cursor:pointer;font-family:inherit;font-size:14px;min-height:42px}
.tabs button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:8px 0 16px}
.kpi{background:var(--card);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.kpi .n{font-size:30px;font-weight:800;color:var(--navy)}
.kpi .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-top:2px}
.panel{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:22px;margin-top:16px}
.panel h2{font-size:18px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;font-size:13.5px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{background:#f1f5fb;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:800}
tr:hover td{background:#f7faff;cursor:pointer}
.pill{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:800}
.pill.not_yet{background:#fde8e8;color:var(--tier-not-yet)}
.pill.driver{background:#e3f0ff;color:var(--tier-driver)}
.pill.owner{background:#e6f8ef;color:var(--tier-owner)}
.pill.leader{background:#fff3d6;color:var(--tier-leader)}
.barmini{height:8px;border-radius:999px;background:#eaf0fa;overflow:hidden;min-width:80px}
.barmini>span{display:block;height:100%;background:var(--mindset)}
.muted{color:var(--muted)}
.row-flex{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.search{padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:14px;min-width:220px;flex:1;font-family:inherit}
.modal-bg{position:fixed;inset:0;background:rgba(8,18,33,.6);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}
.modal{background:#fff;border-radius:18px;max-width:660px;width:100%;max-height:88vh;overflow:auto;padding:26px}
.tx{font-size:13.5px;border-left:3px solid var(--line);padding:8px 0 8px 14px;margin:10px 0}
.tx.dim-mindset{border-color:var(--mindset)}
.tx.dim-thinking{border-color:var(--thinking)}
.tx.dim-approach{border-color:var(--approach)}
.tx.dim-behavior{border-color:var(--behavior)}
.tx b{color:var(--navy)}

/* admin dist bars reuse dimrow with per-dimension color via inline data-dim */
#dist .dimrow .bar>span{background:var(--dim,#2a6fdb)}

/* saved action-plan history rows */
.saved-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;border:1.5px solid var(--line);
  border-radius:12px;margin-bottom:8px;cursor:pointer;font-size:13px;background:#fff;transition:.12s}
.saved-row:hover{border-color:var(--mindset);background:#f7faff}
.saved-date{font-weight:700;color:var(--ink)}
.saved-pool{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--ai);
  background:#ede7ff;padding:3px 9px;border-radius:999px}
.saved-view{font-weight:800;color:var(--mindset)}

/* The hive 🍯 — data-loop made visible */
.hive-wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hive{display:flex;flex-wrap:wrap;gap:4px;max-width:340px}
.cell{width:22px;height:22px;background:#eef1f6;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}
.cell.fill{background:linear-gradient(180deg,var(--honey),var(--honey-d))}
.hive-meta .big{font-size:34px;font-weight:800;color:var(--navy)}
.hive-meta .l{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.hive-note{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:8px;max-width:260px}

@media(max-width:560px){
  h1{font-size:25px} .qtext{font-size:18px} .card{padding:24px 18px}
  .result-hero{margin:-24px -18px 4px;padding:26px 18px 22px}
  .brand .tag{display:none}
}