/* ==========================================================================
   QUICKCHALLENGE 2.0 — SHELL / SCREEN-SPECIFIC LAYOUTS
   Terminal cockpit · marketing sections · switcher · print/export rules
   ========================================================================== */

/* ---- responsive visibility helpers ------------------------------------ */
.hide-sm{ display:inline-flex; }
.hide-lg{ display:none; }
@media (max-width:1023px){ .hide-sm{ display:none !important; } .hide-lg{ display:inline-flex; } }
.hide-m{ }
@media (max-width:767px){ .hide-m{ display:none !important; } }

/* ---- trading terminal cockpit ---------------------------------------- */
.tk{ display:flex; flex-direction:column; height:100vh; min-height:720px; background:var(--bg); }
.tk-status{
  height:52px; flex:none; display:flex; align-items:center; gap:var(--s5);
  padding:0 var(--s4); border-bottom:1px solid var(--line-2); background:var(--surface-1);
}
.tk-status .sep{ width:1px; height:26px; background:var(--line-2); flex:none; }
.tk-body{ flex:1; min-height:0; display:grid; grid-template-columns:240px minmax(0,1fr) 320px; gap:0; }
.tk-col{ min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.tk-col-l{ border-right:1px solid var(--line); background:var(--surface-1); }
.tk-col-r{ border-left:1px solid var(--line); background:var(--surface-1); }
.tk-center{ display:flex; flex-direction:column; min-width:0; background:var(--bg); }
.tk-chart{ flex:1; min-height:280px; position:relative; border-bottom:1px solid var(--line); }
.tk-bottom{ flex:none; height:268px; display:flex; flex-direction:column; background:var(--surface-1); }
.tk-scroll{ overflow-y:auto; flex:1; min-height:0; }
.tk-sec{ border-bottom:1px solid var(--line); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.tk-sec-h{ display:flex; align-items:center; gap:8px; }
.tk-sec-h .micro{ letter-spacing:.1em; }

/* order ticket */
.side-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--surface-1); padding:4px; border-radius:var(--r-md); border:1px solid var(--line); }
.side-toggle button{
  height:38px; border-radius:var(--r-sm); font-size:var(--t-sm); font-weight:750; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center; gap:6px; color:var(--tx-4);
  transition:all var(--d-2) var(--e-out); border:1px solid transparent;
}
.side-toggle button:hover{ color:var(--tx-1); background:var(--surface-3); }
.side-toggle button.is-selected[data-side="LONG"]{ background:var(--up); color:#07130a; box-shadow:0 0 0 1px rgba(127,220,90,.4),0 6px 18px rgba(127,220,90,.18); }
.side-toggle button.is-selected[data-side="SHORT"]{ background:var(--down); color:#1a0708; box-shadow:0 0 0 1px rgba(255,107,107,.4),0 6px 18px rgba(255,107,107,.18); }

.stepper{ display:flex; align-items:stretch; background:var(--surface-1); border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; height:40px; }
.stepper button{ width:36px; display:grid; place-items:center; color:var(--tx-3); background:var(--surface-2); transition:all var(--d-1); }
.stepper button:hover{ background:var(--surface-4); color:var(--tx-1); }
.stepper input{ flex:1; min-width:0; border:0; background:transparent; text-align:center; font-family:var(--mono); font-size:15px; font-weight:600; color:var(--tx-1); letter-spacing:-.02em; }
.stepper input:focus{ outline:none; background:var(--bg); }
.stepper input:focus-visible{ outline:2px solid var(--acc); outline-offset:-2px; }

.price-ladder{ display:flex; flex-direction:column; gap:1px; font-family:var(--mono); font-size:12px; }
.pl-row{ display:grid; grid-template-columns:1fr 74px 60px; gap:8px; padding:3px 8px; border-radius:3px; align-items:center; }
.pl-row .bid{ color:var(--down); text-align:right; font-variant-numeric:tabular-nums; }
.pl-row .ask{ color:var(--up); text-align:right; font-variant-numeric:tabular-nums; }
.pl-row .sz{ color:var(--tx-4); text-align:right; font-size:11px; }
.pl-row.is-spread{ background:var(--surface-2); color:var(--tx-4); font-size:10px; letter-spacing:.06em; text-transform:uppercase; justify-items:center; }
.pl-row.is-last{ background:var(--lime-08); box-shadow:inset 2px 0 0 var(--lime); }

/* terminal responsive */
@media (max-width:1439px){
  .tk-body{ grid-template-columns:220px minmax(0,1fr) 300px; }
  .tk-bottom{ height:230px; }
}
@media (max-width:1023px){
  .tk-body{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; overflow-y:auto; }
  .tk{ height:auto; min-height:0; }
  .tk-col-l,.tk-col-r{ border:0; border-bottom:1px solid var(--line); }
  .tk-chart{ min-height:300px; }
  .tk-bottom{ height:auto; }
  .tk-status{ overflow-x:auto; gap:var(--s4); }
  /* stacked priority: price → position → risk → order */
  .tk-center{ order:1; } .tk-bottom{ order:2; } .tk-col-r{ order:3; } .tk-col-l{ order:4; }
}
@media (max-width:767px){
  /* mobile priority: price → position → risk → order */
  .tk-body{ display:flex; flex-direction:column; }
  .tk-status{ height:auto; padding:8px 12px; flex-wrap:wrap; gap:10px; }
  .tk-status .sep{ display:none; }
}

/* ---- marketing / landing --------------------------------------------- */
.hero{ position:relative; padding:clamp(44px,6vw,84px) 0 clamp(28px,3.4vw,44px); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); gap:clamp(32px,4vw,56px); align-items:center; position:relative; z-index:2; }
.hero-h{ font-size:clamp(34px,4.3vw,52px); line-height:1.06; letter-spacing:-.035em; font-weight:800; color:var(--tx-1); text-wrap:pretty; }
.hero-h .ln{ display:block; }
.hero-h .acc{ color:var(--lime); }
.hero-sub{ font-size:clamp(15px,1.15vw,17.5px); line-height:1.62; color:var(--tx-2); max-width:56ch; }
.hero-cta{ display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center; }
@media (max-width:1023px){ .hero-grid{ grid-template-columns:minmax(0,1fr); } }

/* trust indicator strip — compact, not cards */
.trust{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface-1); overflow:hidden; }
.trust-i{ flex:1 1 160px; padding:14px var(--s5); border-right:1px solid var(--line); display:flex; align-items:center; gap:11px; min-width:0; }
.trust-i:last-child{ border-right:0; }
.trust-i svg{ color:var(--lime); flex:none; }
.trust-i .tstack{ display:flex; flex-direction:column; min-width:0; }
.trust-i .k{ font-size:var(--t-sm); font-weight:600; color:var(--tx-1); line-height:1.25; }
.trust-i .v{ font-size:11px; color:var(--tx-4); margin-top:2px; }
@media (max-width:767px){
  .trust{ flex-direction:column; }
  .trust-i{ border-right:0; border-bottom:1px solid var(--line); }
  .trust-i:last-child{ border-bottom:0; }
}

/* journey steps (how it works) */
.journey{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.j-step{ display:grid; grid-template-columns:96px minmax(0,1fr) minmax(0,1.05fr) minmax(0,.9fr); gap:var(--s6); padding:var(--s6) 0; border-bottom:1px solid var(--line); align-items:start; position:relative; transition:background var(--d-3) var(--e-out); }
.j-step:hover{ background:linear-gradient(90deg,var(--acc-04),transparent 60%); }
.j-n{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--tx-5); padding-top:3px; }
.j-step:hover .j-n{ color:var(--lime); }
.j-t{ font-size:19px; font-weight:650; letter-spacing:-.02em; color:var(--tx-1); line-height:1.25; }
.j-col .micro{ margin-bottom:8px; }
.j-col p{ font-size:var(--t-sm); color:var(--tx-3); line-height:1.58; }
.j-gain{ display:flex; align-items:center; gap:7px; font-size:var(--t-sm); color:var(--tx-2); font-weight:500; }
.j-gain svg{ color:var(--lime); flex:none; }
@media (max-width:1023px){ .j-step{ grid-template-columns:56px minmax(0,1fr) minmax(0,1fr); gap:var(--s4); } .j-step .j-col-gain{ grid-column:2/-1; } }
@media (max-width:767px){ .j-step{ grid-template-columns:40px minmax(0,1fr); gap:var(--s3); padding:var(--s5) 0; } .j-step .j-col,.j-step .j-col-gain{ grid-column:2; } }

/* step cards (compact alternative) */
.steps-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4); }
@media (max-width:1023px){ .steps-3{ grid-template-columns:1fr; } }

/* rails: three audiences */
.rails{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4); }
@media (max-width:1023px){ .rails{ grid-template-columns:1fr; } }

/* product preview mock (hero right) */
.preview{
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-xl);
  box-shadow:var(--sh-3), 0 0 0 1px rgba(255,255,255,.02); overflow:hidden; position:relative;
}
.preview::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 70% at 78% 0%,var(--acc-08),transparent 60%); }
.preview-bar{ height:38px; display:flex; align-items:center; gap:8px; padding:0 var(--s4); border-bottom:1px solid var(--line); background:var(--surface-1); }
.preview-bar .dots{ display:flex; gap:5px; }
.preview-bar .dots i{ width:8px; height:8px; border-radius:50%; background:var(--surface-5); }
.preview-body{ padding:var(--s4); display:flex; flex-direction:column; gap:var(--s4); position:relative; }

/* faq */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; align-items:center; gap:var(--s4); padding:18px 0; cursor:pointer; list-style:none;
  font-size:15.5px; font-weight:600; color:var(--tx-1); letter-spacing:-.012em; transition:color var(--d-2);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--lime); }
.faq summary .ix{ font-family:var(--mono); font-size:11px; color:var(--tx-5); width:26px; flex:none; }
.faq summary .chev{ margin-left:auto; color:var(--tx-4); transition:transform var(--d-3) var(--e-out); flex:none; }
.faq details[open] summary .chev{ transform:rotate(180deg); color:var(--lime); }
.faq .a{ padding:0 0 20px 42px; font-size:var(--t-sm); color:var(--tx-3); line-height:1.68; max-width:78ch; }
@media (max-width:767px){ .faq .a{ padding-left:0; } }

/* partner/opportunity marketplace */
.mkt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:var(--s4); }
.p-card{ display:flex; flex-direction:column; gap:var(--s4); }
.p-head-row{ display:flex; gap:var(--s3); align-items:flex-start; }
.p-offer{
  font-family:var(--mono); font-size:30px; font-weight:700; letter-spacing:-.045em; line-height:1; color:var(--lime);
}
.match-ring{ position:relative; width:52px; height:52px; display:grid; place-items:center; flex:none; }
.match-ring svg{ position:absolute; inset:0; }
.match-ring span{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--tx-1); letter-spacing:-.03em; }

/* result / reward */
.reward-hero{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(160deg,var(--acc-14),var(--acc-04) 46%,var(--surface-2) 74%);
  border:1px solid var(--line-lime); padding:clamp(24px,3.4vw,44px);
}
.reward-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:var(--grain); background-size:180px 180px;
}
@keyframes reveal{ 0%{ opacity:0; transform:translateY(14px) scale(.97); filter:blur(6px) } 100%{ opacity:1; transform:none; filter:none } }
.reveal{ animation:reveal .78s var(--e-out) both; }
.reveal-2{ animation:reveal .78s var(--e-out) .1s both; }
.reveal-3{ animation:reveal .78s var(--e-out) .2s both; }
@keyframes shine{ 0%{ transform:translateX(-140%) skewX(-18deg) } 100%{ transform:translateX(240%) skewX(-18deg) } }
.shine{ position:relative; overflow:hidden; }
.shine::after{ content:''; position:absolute; top:0; bottom:0; width:38%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); animation:shine 2.4s var(--e-inout) 1.1s both; }

.discount-xl{ font-family:var(--mono); font-size:clamp(64px,10vw,124px); font-weight:700; letter-spacing:-.06em; line-height:.86; color:var(--lime); text-shadow:0 0 60px var(--acc-glow); }

/* tier ladder */
.ladder{ display:flex; flex-direction:column; gap:var(--s2); }
.ladder-row{
  display:grid; grid-template-columns:52px minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr) 108px;
  gap:var(--s4); align-items:center; padding:var(--s4) var(--s5);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  position:relative; transition:all var(--d-2) var(--e-out);
}
.ladder-row:hover{ border-color:var(--line-3); }
.ladder-row.is-current{ border-color:var(--line-lime); background:linear-gradient(90deg,var(--acc-08),var(--surface-2) 46%); }
.ladder-row.is-locked{ opacity:.55; border-style:dashed; }
.ladder-row.is-achieved{ }
@media (max-width:1023px){ .ladder-row{ grid-template-columns:44px minmax(0,1fr) minmax(0,1fr); } .ladder-row .hide-t{ display:none; } }
@media (max-width:767px){ .ladder-row{ grid-template-columns:40px minmax(0,1fr); gap:var(--s3); } .ladder-row .hide-t{ display:none; } }

/* wizard page layout */
.wiz-shell{ display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:var(--s6); align-items:start; }
@media (max-width:1023px){ .wiz-shell{ grid-template-columns:1fr; } }
.wiz-aside{ position:sticky; top:calc(var(--nav-h) + var(--s5)); display:flex; flex-direction:column; gap:var(--s4); }
@media (max-width:1023px){ .wiz-aside{ position:static; } }

/* admin operations */
.ops-toolbar{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); background:var(--surface-1); }
.search-box{ position:relative; display:flex; align-items:center; }
.search-box svg{ position:absolute; left:10px; color:var(--tx-4); pointer-events:none; }
.search-box .input{ padding-left:32px; height:34px; width:250px; }

/* score explainer: improvement actions */
.action-row{ display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s4) 0; border-bottom:1px solid var(--line-soft); }
.action-row:last-child{ border-bottom:0; }
.action-ico{ width:30px; height:30px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none; border:1px solid var(--line-lime); background:var(--lime-08); color:var(--lime); }
.impact{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--lime); white-space:nowrap; }

/* next-best-action block — the biggest non-hero element on a dashboard */
.nba{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s5); align-items:center;
  padding:var(--s5) var(--s6); border-radius:var(--r-lg);
  background:linear-gradient(100deg,var(--acc-14),var(--acc-04) 52%,var(--surface-2));
  border:1px solid var(--line-lime); position:relative; overflow:hidden;
}
.nba::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--lime); }
.nba-ico{ width:44px; height:44px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--lime); color:var(--on-lime); flex:none; }
.nba.is-warn{ background:linear-gradient(100deg,rgba(255,154,60,.12),rgba(255,154,60,.02) 52%,var(--surface-2)); border-color:rgba(255,154,60,.34); }
.nba.is-warn::before{ background:var(--risk-warning); }
.nba.is-warn .nba-ico{ background:var(--risk-warning); color:#20100a; }
@media (max-width:767px){ .nba{ grid-template-columns:auto minmax(0,1fr); padding:var(--s4); } .nba .nba-cta{ grid-column:1/-1; } }

/* ---- screen switcher (prototype only) -------------------------------- */
.qc-switcher{ position:fixed; right:16px; bottom:16px; z-index:400; font-family:var(--font); }
.qc-sw-btn{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 13px;
  background:var(--surface-3); border:1px solid var(--line-2); border-radius:var(--r-pill);
  color:var(--tx-2); font-size:12px; font-weight:650; box-shadow:var(--sh-2);
  transition:all var(--d-2) var(--e-out);
}
.qc-sw-btn:hover{ border-color:var(--line-lime); color:var(--lime); }
.qc-switcher.is-open .qc-sw-btn{ background:var(--lime); color:var(--on-lime); border-color:var(--lime); }
.qc-sw-panel{
  position:absolute; bottom:44px; right:0; width:296px; max-height:min(70vh,620px); overflow-y:auto;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); padding:10px; animation:pop-in var(--d-2) var(--e-out);
}
.qc-sw-head{ padding:4px 6px 10px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.sw-g{ margin-bottom:10px; }
.sw-g .micro{ padding:6px; color:var(--tx-5); font-size:9.5px; }
.sw-i{ display:block; padding:6px 8px; border-radius:var(--r-sm); font-size:12.5px; color:var(--tx-3); transition:all var(--d-1); }
.sw-i:hover{ background:var(--surface-3); color:var(--tx-1); }
.sw-i.is-selected{ background:var(--lime-08); color:var(--lime); font-weight:650; }
@media (max-width:767px){ .qc-switcher{ right:10px; bottom:74px; } .qc-sw-panel{ width:264px; } }

/* ---- export / print -------------------------------------------------- */
/* .qc-shot is applied by the screenshot runner: freeze every animation at
   its end state so exported artboards are deterministic. */
.qc-shot *,.qc-shot *::before,.qc-shot *::after{
  animation-duration:.001ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
.qc-shot .qc-switcher,.qc-shot [data-qc-switcher]{ display:none !important; }
.qc-shot .shine::after{ display:none; }
.qc-shot ::-webkit-scrollbar{ width:0; height:0; }
body.qc-shot{ scrollbar-width:none; }
@media print{
  .qc-switcher,.bg-grid,.bg-grain{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ---- terminal + brand refinements ------------------------------------- */
@media (min-width:1024px){
  .tk{ height:calc(100vh - var(--nav-h)); }
}
.tk-status > *{ flex:none; white-space:nowrap; }
.tk-status{ justify-content:space-between; }
.tk-g{ display:flex; align-items:center; gap:var(--s4); min-width:0; }
.tk-status .metric{ flex-direction:row; align-items:baseline; gap:8px; }
.brand > span:last-child{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rail-head .brand-tag{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }

/* ---- how-it-works: horizontal journey + 50/50 split (prompt structure) --- */
.hero-center{ padding:clamp(48px,5vw,72px) 0 var(--s6); }
.j6{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--s6); margin-top:var(--s7); }
.j6-step{ position:relative; }
.j6-n{ width:40px; height:40px; border-radius:var(--r-md); border:1px solid var(--line-2); background:var(--surface-2);
  display:grid; place-items:center; font-family:var(--mono); font-size:13px; font-weight:700; color:var(--lime); }
.j6-arrow{ color:var(--tx-5); }
.j6-dot{ width:6px; height:6px; border-radius:50%; background:var(--lime); margin:17px 17px 0 0; justify-self:end; }
.j6-step .j6-arrow{ position:absolute; top:12px; right:0; }
.split50{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8); padding:var(--s8) 0; }
.split50-col + .split50-col{ border-left:1px solid var(--line); padding-left:var(--s8); }
.mrow{ padding:var(--s4) 0; }
@media (max-width:1023px){
  .j6{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); }
  .j6-step:nth-child(3n) .j6-arrow{ display:none; }
  .split50{ grid-template-columns:1fr; gap:var(--s6); }
  .split50-col + .split50-col{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:var(--s6); }
}
@media (max-width:767px){
  .j6{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .j6-step:nth-child(3n) .j6-arrow{ display:block; }
  .j6-step:nth-child(2n) .j6-arrow{ display:none; }
}

/* ---- setup wizard v2: centered 800px guided flow (prompt structure) ------- */
.wiz-c{ max-width:800px; margin:0 auto; width:100%; }
.wiz-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); }
.wiz-prog{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.wiz-prog-step{ display:flex; flex-direction:column; gap:6px; }
.wiz-prog-bar{ height:3px; border-radius:2px; background:var(--surface-3); }
.wiz-prog-step.is-done .wiz-prog-bar{ background:var(--lime-dim, #6f9428); }
.wiz-prog-step.is-current .wiz-prog-bar{ background:var(--lime); box-shadow:0 0 12px var(--acc-glow); }
.wiz-prog-l{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--tx-4); font-weight:600; }
.wiz-prog-step.is-current .wiz-prog-l{ color:var(--lime); }
.wiz-prog-step.is-done .wiz-prog-l{ color:var(--tx-2); }
.opt-row{ display:flex; align-items:center; gap:var(--s4); width:100%; text-align:left;
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px;
  transition:border-color var(--d-1), background var(--d-1); cursor:pointer; }
.opt-row:hover{ border-color:var(--line-2); background:var(--surface-2); }
.opt-row.is-selected{ border-color:var(--line-lime); background:var(--lime-08); }
.opt-row-i{ width:36px; height:36px; flex:none; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); color:var(--tx-2); }
.opt-row.is-selected .opt-row-i{ background:var(--lime); border-color:var(--lime); color:var(--on-lime); }
.opt-row .opt-t{ display:block; font-size:14px; font-weight:650; color:var(--tx-1); }
.opt-row .opt-s{ display:block; font-size:12px; color:var(--tx-4); margin-top:2px; line-height:1.45; }
.opt-row-c{ width:20px; height:20px; flex:none; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; color:transparent; }
.opt-row.is-selected .opt-row-c{ background:var(--lime); border-color:var(--lime); color:var(--on-lime); }
.risk-2col{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); }
.risk-2col-cell{ background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); }
.risk-2col-v{ font-family:var(--mono); font-size:44px; font-weight:700; line-height:1; color:var(--tx-1); letter-spacing:-.02em; }
@media (max-width:767px){ .risk-2col{ grid-template-columns:1fr; } }

/* ---- low-fidelity wireframe mode (#wire) : structure only, no polish ----- */
body.qc-wire{ background:#fff; }
body.qc-wire .bg-grid,body.qc-wire .bg-grain{ display:none !important; }
body.qc-wire *{ color:transparent !important; box-shadow:none !important; text-shadow:none !important; }
body.qc-wire .panel,body.qc-wire .kpi,body.qc-wire .opt-row,body.qc-wire .opt,body.qc-wire .btn,
body.qc-wire .chip,body.qc-wire .status,body.qc-wire .rail,body.qc-wire .topbar,body.qc-wire .nav,
body.qc-wire table,body.qc-wire .tk-status,body.qc-wire .j6-n,body.qc-wire .risk-2col-cell,
body.qc-wire .tabbar,body.qc-wire .code-box,body.qc-wire .panel-well,body.qc-wire .mkt-card,
body.qc-wire .select,body.qc-wire .input,body.qc-wire .seg,body.qc-wire .tier-row,body.qc-wire .lb-row,
body.qc-wire .fn-row,body.qc-wire .hero-prev,body.qc-wire .tk-col-l,body.qc-wire .tk-col-r,body.qc-wire .tk-bottom{
  background:#f1f2f4 !important; border:1px solid #c9ccd2 !important; }
body.qc-wire .bar i,body.qc-wire .wiz-prog-bar,body.qc-wire .hbar i{ background:#b6bac1 !important; }
body.qc-wire svg{ opacity:.14 !important; }
body.qc-wire .qc-switcher{ display:none !important; }
body.qc-wire *{ background-color:#eceef1 !important; background-image:none !important; }
body.qc-wire .panel,body.qc-wire .kpi,body.qc-wire .rail,body.qc-wire .topbar,body.qc-wire .nav,body.qc-wire table{ background-color:#f4f5f7 !important; }