/* Sealed storefront — component layer, EXTRACTED VERBATIM from the
   Designer reference pages (web/storefront-design/*), survey-delta rev.
   tokens.css is the system; do not hand-edit styles here — change the
   reference page, re-extract. (Builder glue block appended below.) */


/* ===== from catalog.html ===== */
body{
    background:
      radial-gradient(980px 520px at 82% -14%, rgba(255,255,255,.94), transparent 62%),
      radial-gradient(760px 420px at 8% 4%, rgba(0,113,227,.08), transparent 58%),
      linear-gradient(180deg,#fbfbfd 0,#f5f5f7 360px,#ffffff 100%);
    color:var(--ink); font-family:var(--sans); line-height:var(--lh-body); font-size:15px;
    -webkit-font-smoothing:antialiased; min-height:100vh;
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}

  /* ============ TOP NAV ============ */
  .nav{position:sticky; top:0; z-index:var(--z-nav);
    background:rgba(251,251,253,.72); backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--line)}
  .nav .row{display:flex; align-items:center; gap:18px; height:64px}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:500; font-size:15px; letter-spacing:0}
  .brand .mark{width:28px; height:28px; border-radius:8px; display:block}
  .brand .tld{color:var(--dim)}
  .nav-search{flex:1; max-width:460px; position:relative; display:flex; align-items:center}
  .nav-search svg{position:absolute; left:13px; width:16px; height:16px; color:var(--dim); pointer-events:none}
  .nav-search input{width:100%; background:var(--panel2); border:1px solid var(--line2); border-radius:10px;
    color:var(--ink); font-family:var(--sans); font-size:14px; padding:10px 12px 10px 38px}
  .nav-search input::placeholder{color:var(--dim)}
  .nav-search input:focus{border-color:var(--line3); background:var(--panel3)}
  .nav-search kbd{position:absolute; right:10px; font-family:var(--mono); font-size:10.5px; color:var(--dim);
    border:1px solid var(--line2); border-radius:5px; padding:2px 6px; background:var(--bg2)}
  .nav-right{margin-left:auto; display:flex; align-items:center; gap:14px}
  .nav-link{font-family:var(--mono); font-size:12.5px; color:var(--mut); transition:color .15s}
  .nav-link:hover{color:var(--ink)}
  /* wallet — funded state. (Empty/first-fund variant rendered just below for reference.) */
  .wallet{display:inline-flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--line2);
    border-radius:var(--r-pill); padding:6px 7px 6px 13px}
  .wallet .bal{font-family:var(--mono); font-size:13px; color:var(--ink); font-weight:500; letter-spacing:0}
  .wallet .bal b{color:var(--ok); font-weight:500}
  .wallet .topup{font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink);
    background:var(--panel3); border:1px solid var(--line2); border-radius:var(--r-pill); padding:4px 11px}
  .wallet .topup:hover{border-color:var(--seal-line); color:var(--seal2)}
  .avatar{width:30px; height:30px; border-radius:50%; background:linear-gradient(140deg,#2a2a30,#161619);
    border:1px solid var(--line2); display:grid; place-items:center; font-family:var(--mono); font-size:12px; color:var(--ink2)}

  /* ============ PAGE HEAD / TRUST STRIP ============ */
  .head{padding:40px 0 8px}
  .head h1{font-family:var(--sans); font-weight:800; font-size:var(--t-h1); letter-spacing:0; line-height:1.08}
  .head p{color:var(--mut); font-size:16px; margin-top:10px; max-width:62ch}
  .head p b{color:var(--ink2); font-weight:500}

  /* security/credibility ribbon — each chip links to the methodology page */
  .trust-strip{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; align-items:center}
  .tcred{display:inline-flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line2);
    border-radius:var(--r-pill); padding:7px 13px 7px 11px; font-size:12.5px; color:var(--mut); transition:border-color .15s}
  a.tcred:hover{border-color:var(--line3); color:var(--ink)}
  .tcred svg{width:15px; height:15px; flex:none}
  .tcred-copy{min-width:0}
  .tcred b{color:var(--ink); font-weight:500}
  .tcred.ok svg{color:var(--ok)} .tcred.ok b{color:var(--ok2)}
  .tcred.seal svg{color:var(--seal2)}
  .tcred.pending svg{color:var(--warn)}
  .tcred .v{font-family:var(--mono); font-size:10.5px; letter-spacing:0; color:var(--ok);
    border:1px solid var(--ok-line); border-radius:5px; padding:1px 6px; background:var(--ok-bg)}
  .tcred.policy-signal .v{color:var(--seal2); border-color:var(--seal-line); background:var(--seal-bg)}
  .tcred.pending .v{color:var(--warn); border-color:var(--warn-line); background:var(--warn-bg)}
  .trust-method{font-family:var(--mono); font-size:11.5px; color:var(--seal2); display:inline-flex; align-items:center; gap:5px}
  .trust-method:hover{text-decoration:underline}
  .trust-method svg{width:12px; height:12px}

  /* ============ FIRST-FUND BANNER (empty-wallet / cold-start) ============ */
  .firstfund{display:flex; align-items:center; gap:16px; margin-top:24px; padding:16px 18px;
    background:linear-gradient(180deg,var(--ok-bg),transparent); border:1px solid var(--ok-line);
    border-radius:var(--r-lg)}
  .firstfund .ff-ic{width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center;
    background:var(--panel2); border:1px solid var(--ok-line)}
  .firstfund .ff-ic svg{width:20px; height:20px; color:var(--ok)}
  .firstfund .ff-tx{flex:1; min-width:0}
  .firstfund .ff-tx b{font-weight:600; color:var(--ink); font-size:14.5px}
  .firstfund .ff-tx p{color:var(--mut); font-size:13px; margin-top:2px}
  .firstfund a.ff-cta{flex:none}

  /* ============ "START HERE" CROSS-SELL RAIL ============ */
  .starthere{margin-top:34px}
  .starthere-h{display:flex; align-items:baseline; gap:10px; margin-bottom:14px}
  .starthere-h h2{font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:0; color:var(--ink)}
  .starthere-h .sub{color:var(--dim); font-family:var(--mono); font-size:11.5px; letter-spacing:0}
  .rail{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .mini{position:relative; display:flex; gap:12px; align-items:flex-start; background:var(--panel);
    border:1px solid var(--line2); border-radius:var(--r); padding:14px 15px; transition:border-color .15s, transform .15s}
  .mini:hover{border-color:var(--line3); transform:translateY(-2px)}
  .mini .stretch{position:absolute; inset:0; border-radius:inherit; z-index:1}
  .mini > *{position:relative; z-index:2; pointer-events:none}
  .mini-ic{width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center;
    background:linear-gradient(180deg,#fff,#f5f5f7); border:1px solid var(--line2)}
  .mini-ic svg{width:17px; height:17px}
  .mini b{font-weight:600; font-size:13.5px; color:var(--ink); display:block}
  .mini .why{font-size:11.5px; color:var(--ok2); font-family:var(--mono); margin-top:2px}
  .mini .pr{font-size:11px; color:var(--dim); font-family:var(--mono); margin-top:6px}

  /* ============ FILTER BAR ============ */
  .toolbar{display:flex; align-items:center; gap:12px; margin:34px 0 22px; flex-wrap:wrap}
  .toolbar-sticky{position:sticky; top:64px; z-index:var(--z-sticky); padding:14px 0;
    background:linear-gradient(180deg,var(--bg) 60%, rgba(245,245,247,0))}
  /* real single-select segmented control (radiogroup + roving tabindex in JS) */
  .seg{display:inline-flex; gap:4px; background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-pill); padding:4px}
  .seg button{font-family:var(--sans); font-size:13px; color:var(--mut); background:transparent; border:0;
    border-radius:var(--r-pill); padding:6px 13px; cursor:pointer; transition:all .15s var(--ease);
    display:inline-flex; align-items:center; gap:7px}
  .seg button:hover{color:var(--ink)}
  .seg button[aria-checked="true"]{color:var(--ink); background:var(--panel3)}
  .seg .dot{width:7px; height:7px; border-radius:50%}
  .seg .dot.modeA{background:var(--warn)} .seg .dot.modeB{background:var(--seal2)} .seg .dot.official{background:var(--ok)}
  .seg .ct{font-family:var(--mono); font-size:11px; color:var(--dim)}
  .chips{display:flex; gap:8px; flex-wrap:wrap}
  .fchip{font-family:var(--sans); font-size:13px; color:var(--mut); background:var(--panel); border:1px solid var(--line2);
    border-radius:var(--r-pill); padding:7px 14px; cursor:pointer; transition:all .15s var(--ease)}
  .fchip:hover{color:var(--ink); border-color:var(--line3)}
  .fchip[aria-pressed="true"]{color:var(--ink); background:var(--panel3); border-color:var(--line3)}
  .toolbar .spacer{flex:1}
  .sortsel{position:relative; display:inline-flex; align-items:center}
  .sortsel select{appearance:none; font-family:var(--sans); font-size:13px; color:var(--ink);
    background:var(--panel); border:1px solid var(--line2); border-radius:10px; padding:8px 32px 8px 13px; cursor:pointer}
  .sortsel svg{position:absolute; right:11px; width:13px; height:13px; color:var(--dim); pointer-events:none}
  .result-ct{font-family:var(--mono); font-size:12px; color:var(--dim)}

  /* ============ CARD GRID ============ */
  .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-bottom:40px}
  .card{position:relative; display:flex; flex-direction:column; background:var(--panel);
    border:1px solid var(--line2); border-radius:var(--r-lg); padding:20px;
    box-shadow:var(--shadow); transition:transform .18s var(--ease), border-color .18s var(--ease)}
  .card:hover{transform:translateY(-3px); border-color:var(--line3)}
  .card:focus-within{border-color:var(--seal-line)}
  /* whole-card link overlay; interactive children sit above it and stay reachable */
  .card .stretch{position:absolute; inset:0; border-radius:inherit; z-index:1}
  .card > *{position:relative; z-index:2}

  .card-top{display:flex; align-items:flex-start; gap:13px}
  .card-ico{width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center;
    background:linear-gradient(180deg,#fff,#f5f5f7); border:1px solid var(--line2)}
  .card-ico svg{width:22px; height:22px}
  .card-id{min-width:0; flex:1}
  .card-name{font-family:var(--sans); font-weight:700; font-size:16px; letter-spacing:0; color:var(--ink);
    display:flex; align-items:center; gap:7px; line-height:1.2}
  .card-handle{font-family:var(--mono); font-size:11.5px; color:var(--dim); margin-top:3px; display:flex; align-items:center; gap:6px}

  .seal-official{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex:none}
  .seal-official svg{width:16px; height:16px; color:var(--ok)}

  .card-desc{color:var(--mut); font-size:13.5px; line-height:1.5; margin:14px 0 0;
    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:40px}
  .card-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
  .card-tags span{font-family:var(--mono); font-size:10.5px; color:var(--mut); background:var(--panel2);
    border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 8px; line-height:1}

  .badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
  .b{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10.5px; letter-spacing:0;
    padding:4px 8px; border-radius:var(--r-pill); border:1px solid var(--line2); line-height:1}
  .b svg{width:11px; height:11px}
  .b.official{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line)}
  .b.modeA{color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line)}
  .b.modeB{color:var(--seal2); background:var(--seal-bg); border-color:var(--seal-line)}
  .b.tier{color:var(--mut); background:var(--panel2)}
  /* trust-status chips: containment-verified listings and safety-screened
     community listings are distinct. Green carries "verified"; blue carries
     "screened before listing." */
  .b.scan{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line)}
  .b.screened{color:var(--seal); background:var(--seal-bg); border-color:var(--seal-line)}
  .b.pending{color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line)}

  /* stat line (calls / rating / latency) */
  .card-stats{display:flex; gap:14px; margin-top:12px; flex-wrap:wrap}
  .card-stats .st{font-family:var(--mono); font-size:11px; color:var(--dim); display:inline-flex; align-items:center; gap:5px}
  .card-stats .st b{color:var(--mut); font-weight:500}
  .card-stats .st svg{width:12px; height:12px; color:var(--faint)}
  .star{color:var(--warn) !important}

  /* price + run footer */
  .card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
  .price{display:flex; flex-direction:column; gap:2px}
  .price .amt{font-family:var(--mono); font-size:18px; color:var(--ink); font-weight:500; letter-spacing:0}
  .price .amt span{color:var(--dim); font-size:12px}
  .price .per{font-family:var(--mono); font-size:10.5px; letter-spacing:0; color:var(--dim); text-transform:uppercase}
  /* "Open" verb — the card-level button NAVIGATES (it cannot run; Mode B needs an upload). */
  .openbtn{font-family:var(--sans); font-weight:600; font-size:13px; color:var(--ink);
    background:var(--panel3); border:1px solid var(--line2); border-radius:var(--r-pill);
    padding:9px 16px; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:6px}
  .openbtn:hover{border-color:var(--seal-line); color:var(--seal2)}
  .openbtn svg{width:13px; height:13px}

  /* trust micro-line on each card */
  .card-trust{display:flex; align-items:center; gap:7px; margin-top:13px; font-family:var(--mono); font-size:10.5px;
    letter-spacing:0; color:var(--dim)}
  .card-trust .lk{width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 7px var(--ok); flex:none}
  .card-trust b{color:var(--mut); font-weight:400}
  .card-trust.screened .lk{background:var(--seal); box-shadow:0 0 7px var(--seal)}

  /* mode legend so A/B is never ambiguous */
  .legend{display:flex; gap:24px; flex-wrap:wrap; margin:8px 0 56px; padding:18px 20px;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg)}
  .legend .lg{display:flex; gap:10px; align-items:flex-start; max-width:46ch}
  .legend .lg .swatch{width:9px; height:9px; border-radius:50%; margin-top:5px; flex:none}
  .legend .lg.a .swatch{background:var(--warn)} .legend .lg.b .swatch{background:var(--seal2)}
  .legend .lg b{font-size:13px; color:var(--ink); font-weight:600; display:block}
  .legend .lg p{font-size:12.5px; color:var(--mut); margin-top:3px; line-height:1.5}

  /* ============ FOOTER — full commerce-trust furniture ============ */
  footer{border-top:1px solid var(--line); padding:44px 0 56px; background:var(--bg2)}
  .foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px}
  .foot-brand .bmark{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:14px; color:var(--ink)}
  .foot-brand .bmark .mark{width:24px; height:24px; border-radius:7px}
  .foot-brand p{color:var(--mut); font-size:12.5px; margin-top:12px; max-width:34ch; line-height:1.6}
  .foot-legal{color:var(--dim); font-size:11.5px; font-family:var(--mono); margin-top:14px; line-height:1.7}
  .foot-col h4{font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase; color:var(--dim); margin-bottom:12px}
  .foot-col a{display:block; color:var(--mut); font-size:13px; padding:4px 0; transition:color .15s}
  .foot-col a:hover{color:var(--ink)}
  .foot-bar{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
    margin-top:36px; padding-top:24px; border-top:1px solid var(--line)}
  .pay-trust{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
  .pay-lockup{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--mut)}
  .pay-lockup svg{width:15px; height:15px; color:var(--ok); flex:none}
  .pay-lockup b{color:var(--ink2); font-weight:500}
  .cardmarks{display:flex; align-items:center; gap:7px}
  .cardmarks .cm{font-family:var(--mono); font-size:9.5px; letter-spacing:0; color:var(--dim);
    border:1px solid var(--line2); border-radius:5px; padding:3px 7px; background:var(--panel)}
  .status-pill{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; color:var(--mut)}
  .status-pill .ld{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 7px var(--ok)}

  /* ============ RESPONSIVE ============ */
  @media (max-width:1040px){ .grid{grid-template-columns:repeat(2,1fr)} .rail{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} }
  @media (max-width:760px){
    .wrap{padding:0 18px}
    .nav-search{order:3; flex-basis:100%; max-width:none}
    .nav .row{flex-wrap:wrap; height:auto; padding:12px 0; gap:12px}
    .nav-right{margin-left:auto}
    .grid{grid-template-columns:1fr}
    .toolbar-sticky{position:relative; top:0}
    .head{padding:28px 0 4px}
    .foot-grid{grid-template-columns:1fr 1fr}
    .firstfund{flex-direction:column; align-items:flex-start}
  }

/* ===== from skill-detail.html ===== */
body{
    background:
      radial-gradient(980px 520px at 88% -12%, rgba(255,255,255,.94), transparent 62%),
      radial-gradient(700px 420px at 12% 0%, rgba(0,113,227,.08), transparent 58%),
      linear-gradient(180deg,#fbfbfd 0,#f5f5f7 360px,#ffffff 100%);
    color:var(--ink); font-family:var(--sans); line-height:var(--lh-body); font-size:15px;
    -webkit-font-smoothing:antialiased; min-height:100vh;
  }
  .wrap{max-width:var(--maxw-read); margin:0 auto; padding:0 var(--gutter)}

  /* ============ NAV ============ */
  .nav{position:sticky; top:0; z-index:var(--z-nav);
    background:rgba(251,251,253,.72); backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--line)}
  .nav .row{display:flex; align-items:center; gap:16px; height:60px}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:500; font-size:15px}
  .brand .mark{width:26px; height:26px; border-radius:7px}
  .brand .tld{color:var(--dim)}
  .crumb{font-family:var(--mono); font-size:12px; color:var(--dim); display:flex; align-items:center; gap:8px}
  .crumb a:hover{color:var(--mut)}
  .crumb .sep{color:var(--faint)}
  .nav-right{margin-left:auto; display:flex; align-items:center; gap:14px}
  .wallet{display:inline-flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--line2);
    border-radius:var(--r-pill); padding:6px 7px 6px 13px}
  .wallet .bal{font-family:var(--mono); font-size:13px; color:var(--ink)}
  .wallet .bal b{color:var(--ok); font-weight:500}
  .wallet .topup{font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink); background:var(--panel3);
    border:1px solid var(--line2); border-radius:var(--r-pill); padding:4px 11px}
  .wallet .topup:hover{border-color:var(--seal-line); color:var(--seal2)}

  /* ============ HERO HEADER ============ */
  .dhead{padding:36px 0 26px; border-bottom:1px solid var(--line)}
  .dhead-top{display:flex; align-items:flex-start; gap:18px}
  .dico{width:64px; height:64px; border-radius:16px; flex:none; display:grid; place-items:center;
    background:linear-gradient(180deg,#fff,#f5f5f7); border:1px solid var(--line2); box-shadow:var(--shadow)}
  .dico svg{width:32px; height:32px}
  .dttl h1{font-family:var(--sans); font-weight:800; font-size:var(--t-display); letter-spacing:0; line-height:1.05;
    display:flex; align-items:center; gap:11px; flex-wrap:wrap}
  .verified{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:0;
    color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok-line); border-radius:var(--r-pill); padding:4px 10px}
  .verified:hover{border-color:var(--ok2)}
  .verified svg{width:13px; height:13px}
  .dsub{color:var(--mut); font-size:17px; margin-top:10px; max-width:64ch; line-height:1.55}
  .dsub b{color:var(--ink2); font-weight:500}
  .dmeta{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
  .b{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:0;
    padding:5px 10px; border-radius:var(--r-pill); border:1px solid var(--line2); line-height:1}
  .b svg{width:12px; height:12px}
  .b.modeB{color:var(--seal2); background:var(--seal-bg); border-color:var(--seal-line)}
  .b.tier{color:var(--mut); background:var(--panel2)}
  /* trust-status chips — same treatment as catalog: containment-verified and
     safety-screened community listings are never visually equal. */
  .b.scan{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line)}
  .b.screened{color:var(--seal); background:var(--seal-bg); border-color:var(--seal-line)}
  .b.pending{color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line)}
  .b.cat{color:var(--mut); background:var(--panel2)}
  .b.stat{color:var(--mut); background:var(--panel2)}
  .b.stat .star{color:var(--warn)}

  /* ============ LAYOUT ============ */
  .layout{display:grid; grid-template-columns:1fr 380px; gap:34px; padding:34px 0 90px; align-items:start}
  .col-main{min-width:0}
  .col-side{position:sticky; top:80px; display:flex; flex-direction:column; gap:18px}

  .block{margin-bottom:34px}
  /* numbered serif section heads — carries the brand's editorial half (graft: quantro) */
  .block > h2{font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:0; margin-bottom:16px;
    display:flex; align-items:baseline; gap:11px; color:var(--ink)}
  .block > h2 .num{font-family:var(--mono); font-size:13px; color:var(--seal2); font-weight:500; letter-spacing:0}
  .block > h2 .label{margin-left:auto; align-self:center}
  .prose{color:var(--mut); font-size:15px; line-height:1.65}
  .prose b{color:var(--ink); font-weight:500}
  .prose p+p{margin-top:12px}

  /* best-fit taxonomy */
  .fit-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px}
  .fit-tile{background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line2);
    border-radius:var(--r-lg); padding:14px 16px; min-height:76px; display:flex; flex-direction:column; justify-content:space-between}
  .fit-tile span{font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase; color:var(--dim)}
  .fit-tile b{color:var(--ink); font-weight:650; font-size:14px; line-height:1.35}

  /* input schema — typed table (graft: developer-pro). No inline style overrides. */
  .schema{border:1px solid var(--line2); border-radius:var(--r-lg); overflow:hidden; background:var(--panel)}
  .schema .srow{display:grid; grid-template-columns:160px 130px 1fr; gap:14px; padding:13px 18px; border-top:1px solid var(--line); align-items:center}
  .schema .srow.hd{border-top:0; background:var(--panel2)}
  .schema .srow.hd span{font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase; color:var(--dim)}
  .schema .fname{font-family:var(--mono); font-size:13px; color:var(--ink); display:flex; align-items:center; gap:7px}
  .schema .req{font-family:var(--mono); font-size:9.5px; color:var(--seal2); border:1px solid var(--seal-line); border-radius:4px; padding:1px 5px}
  .schema .opt{font-family:var(--mono); font-size:9.5px; color:var(--dim); border:1px solid var(--line2); border-radius:4px; padding:1px 5px}
  .schema .ftype{font-family:var(--mono); font-size:12px; color:var(--ok2)}
  .schema .fdesc{color:var(--mut); font-size:13px; line-height:1.45}
  .schema .fdesc code{font-family:var(--mono); font-size:.88em; color:var(--ink2); background:var(--panel2); border:1px solid var(--line); border-radius:5px; padding:1px 6px}

  /* ===== CONTAINMENT / TRUST BLOCK (claim-limited) ===== */
  .trust{border:1px solid var(--seal-line); border-radius:var(--r-xl); overflow:hidden; position:relative;
    background:
      radial-gradient(520px 280px at 88% -30%, rgba(0,113,227,.12), transparent 60%),
      linear-gradient(180deg, var(--panel), var(--bg2));
    box-shadow:var(--shadow)}
  .trust-head{display:flex; align-items:center; gap:14px; padding:22px 24px 18px}
  .orb{width:54px; height:54px; flex:none}
  .trust-head .ht{flex:1}
  .trust-head h3{font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:0}
  .trust-head .sl{font-family:var(--mono); font-size:11px; letter-spacing:0; color:var(--seal2); margin-top:3px}
  /* living attestation line (survey delta #1): real dated values, not a static chip */
  .trust-head .attest{font-family:var(--mono); font-size:10.5px; color:var(--dim); margin-top:5px; letter-spacing:0}
  .trust-head .attest time{color:var(--mut)}
  .trust-head .stamp{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:0;
    color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok-line); border-radius:var(--r-pill); padding:5px 10px; transition:border-color .15s}
  .trust-head .stamp:hover{border-color:var(--ok2)}
  .trust-head .stamp svg{width:12px; height:12px}

  .trust-list{padding:4px 24px 8px}
  .trust-list .tr{display:flex; gap:13px; padding:14px 0; border-top:1px solid var(--line)}
  .trust-list .tr:first-child{border-top:0}
  .trust-list .tr .ic{width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
    background:var(--panel2); border:1px solid var(--line2)}
  .trust-list .tr .ic svg{width:17px; height:17px; color:var(--ok)}
  .trust-list .tr.seal .ic svg{color:var(--seal2)}
  .trust-list .tr .tx b{color:var(--ink); font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px}
  .trust-list .tr .tx b .vchip{font-family:var(--mono); font-size:9.5px; letter-spacing:0; color:var(--ok);
    border:1px solid var(--ok-line); border-radius:4px; padding:1px 6px; background:var(--ok-bg)}
  .trust-list .tr .tx p{color:var(--mut); font-size:13px; line-height:1.5; margin-top:4px}
  .trust-list .tr .tx code{font-family:var(--mono); font-size:.86em; color:var(--ink2); background:var(--panel2);
    border:1px solid var(--line); border-radius:5px; padding:1px 6px}

  .trust-foot{padding:14px 24px 18px; border-top:1px solid var(--line);
    display:flex; gap:10px; align-items:flex-start; color:var(--mut); font-size:12px; font-family:var(--mono); line-height:1.6}
  .trust-foot svg{width:14px; height:14px; flex:none; margin-top:2px; color:var(--dim)}
  .trust-foot a{color:var(--seal2)} .trust-foot a:hover{text-decoration:underline}

  /* data-handling / privacy strip — protects the BUYER's data (fixes lopsided trust) */
  .privacy{margin-top:16px; border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--panel); overflow:hidden}
  .privacy .pr{display:flex; gap:12px; padding:14px 18px; border-top:1px solid var(--line); align-items:flex-start}
  .privacy .pr:first-child{border-top:0}
  .privacy .pr svg{width:16px; height:16px; color:var(--ok); flex:none; margin-top:1px}
  .privacy .pr b{color:var(--ink); font-weight:600; font-size:13.5px}
  .privacy .pr p{color:var(--mut); font-size:13px; line-height:1.5; margin-top:2px}

  /* ===== CODE SNIPPETS ===== */
  .tabs{display:flex; gap:4px; background:var(--panel2); border:1px solid var(--line2); border-radius:11px; padding:4px; width:fit-content}
  .tab{font-family:var(--mono); font-size:12px; color:var(--mut); background:transparent; border:0; border-radius:7px;
    padding:7px 14px; cursor:pointer; transition:all .15s var(--ease)}
  .tab[aria-selected="true"]{color:var(--ink); background:var(--panel3)}
  .codewrap{margin-top:13px; border:1px solid var(--line2); border-radius:var(--r-lg); overflow:hidden; background:#0a0a0b}
  .codebar{display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--panel)}
  .codebar .fn{font-family:var(--mono); font-size:11.5px; color:var(--dim); letter-spacing:0}
  .codebar .copy{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--mut); background:var(--panel2);
    border:1px solid var(--line2); border-radius:7px; padding:5px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
  .codebar .copy:hover{color:var(--ink); border-color:var(--line3)}
  .codebar .copy svg{width:12px; height:12px}
  pre{margin:0; padding:16px 18px; overflow-x:auto; font-family:var(--mono); font-size:12.5px; line-height:1.75}
  pre code{font-family:var(--mono)}
  .c-prompt{color:var(--dim)} .c-cmd{color:var(--ink)} .c-flag{color:var(--seal2)}
  .c-str{color:var(--ok2)} .c-key{color:var(--ink2)} .c-punc{color:var(--dim)} .c-cmt{color:var(--dim)}
  .codepane{display:none} .codepane.on{display:block}

  /* ===== RUN PANEL ===== */
  .run{border:1px solid var(--line2); border-radius:var(--r-xl); background:var(--panel); box-shadow:var(--shadow); overflow:hidden}
  .run-head{padding:18px 20px 16px; border-bottom:1px solid var(--line);
    background:radial-gradient(360px 160px at 80% -40%, rgba(0,113,227,.10), transparent 60%)}
  .run-head .pr{display:flex; align-items:baseline; gap:8px}
  .run-head .amt{font-family:var(--mono); font-size:30px; color:var(--ink); font-weight:500; letter-spacing:0}
  .run-head .per{font-family:var(--mono); font-size:12px; color:var(--dim)}
  /* inverse-ratio pricing shorthand (survey delta, high-value): bulk mental math done for the buyer */
  .run-head .ratio{font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:5px}
  .run-head .ratio b{color:var(--mut); font-weight:500}
  .run-head .note{font-family:var(--mono); font-size:11px; color:var(--mut); margin-top:6px; display:flex; align-items:center; gap:7px}
  .run-head .note svg{width:13px; height:13px; color:var(--ok)}

  .run-body{padding:18px 20px 20px}
  .run-body .fl{margin-bottom:14px}
  .run-body label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:0; text-transform:uppercase;
    color:var(--dim); margin-bottom:7px}
  .run-body label .req{color:var(--seal2); font-size:10px}
  .run-body label .optn{color:var(--dim); font-size:10px}
  .run-body textarea,.run-body select{width:100%; background:var(--panel2); border:1px solid var(--line2);
    border-radius:10px; color:var(--ink); font-family:var(--sans); font-size:14px; padding:11px 12px}
  .run-body textarea{min-height:78px; resize:vertical; font-family:var(--mono); font-size:12.5px; line-height:1.5}
  .run-body textarea:focus,.run-body select:focus{border-color:var(--line3); background:var(--panel3)}
  .run-body select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239a9897' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; cursor:pointer}

  /* REAL file input — native <input type=file>, fully keyboard-operable, properly labelled */
  .fileinput{position:relative}
  .fileinput input[type=file]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
  .fileinput .face{display:flex; align-items:center; gap:10px; background:var(--panel2); border:1px dashed var(--line3);
    border-radius:10px; color:var(--mut); padding:14px 12px; font-size:13.5px; transition:border-color .15s, background .15s}
  .fileinput input[type=file]:hover + .face{border-color:var(--seal-line)}
  .fileinput input[type=file]:focus-visible + .face{box-shadow:var(--focus); border-style:solid}
  .fileinput .face svg{width:16px; height:16px; color:var(--dim); flex:none}
  .fileinput.has .face{border-style:solid; border-color:var(--ok-line); color:var(--ink)}
  .fileinput.has .face svg{color:var(--ok)}
  .sample{margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--seal2); background:none; border:0; cursor:pointer; padding:0}
  .sample:hover{text-decoration:underline}

  /* cost ledger — total is the loud line */
  .ledger{margin:16px 0 14px; border:1px solid var(--line); border-radius:11px; background:var(--bg2); overflow:hidden}
  .ledger .lr{display:flex; justify-content:space-between; padding:9px 14px; font-size:12.5px; border-top:1px solid var(--line)}
  .ledger .lr:first-child{border-top:0}
  .ledger .lr span{color:var(--mut); font-family:var(--mono); font-size:11.5px}
  .ledger .lr b{color:var(--ink2); font-family:var(--mono); font-weight:500}
  .ledger .lr.est span,.ledger .lr.est b{color:var(--dim)}
  .ledger .lr.total{background:var(--panel2)}
  .ledger .lr.total span{color:var(--ink); font-size:13px} .ledger .lr.total b{color:var(--ok); font-size:14px}
  .run .hands-ledger .lr{gap:14px; align-items:flex-start}
  .run .hands-ledger .lr span{min-width:74px}
  .run .hands-ledger .lr b{text-align:right; line-height:1.45}

  .run-cta{width:100%}
  .run-cta svg{width:16px; height:16px}
  .run-foot{margin-top:13px; font-family:var(--mono); font-size:11px; color:var(--mut); text-align:center; line-height:1.6}
  .run-foot .bal-ok{color:var(--ok)}
  .run-foot a{color:var(--seal2)}

  /* ---- insufficient-funds inline state ---- */
  .insufficient{display:none; margin-top:13px; padding:12px 14px; border:1px solid var(--danger-line); background:var(--danger-bg);
    border-radius:10px; font-size:12.5px; color:var(--ink2); align-items:flex-start; gap:10px}
  .insufficient svg{width:15px; height:15px; color:var(--danger); flex:none; margin-top:1px}
  .insufficient.show{display:flex}
  .insufficient a{color:var(--seal2); font-weight:600}

  /* ---- post-run states: loading / success / error ---- */
  .result{display:none; margin-top:16px; border:1px solid var(--line2); border-radius:var(--r-lg); overflow:hidden; background:var(--panel)}
  .result.show{display:block}
  .result .rhd{display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--line); font-size:13px}
  .result .rhd .rdot{width:8px; height:8px; border-radius:50%; flex:none}
  .result.loading .rhd{color:var(--mut)} .result.loading .rdot{background:var(--warn); box-shadow:0 0 8px var(--warn); animation:pulse 1.2s var(--ease) infinite}
  .result.ok .rhd{color:var(--ok2)} .result.ok .rdot{background:var(--ok); box-shadow:0 0 8px var(--ok)}
  .result.err .rhd{color:var(--danger)} .result.err .rdot{background:var(--danger)}
  .result .rhd b{font-weight:600}
  .result .rhd .chg{margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--dim)}
  .result .rbody{padding:14px 16px}
  .result .rbody pre{background:#0a0a0b; border:1px solid var(--line); border-radius:9px; font-size:11.5px; padding:13px 14px}
  .result .rbody .files{display:flex; gap:8px; flex-wrap:wrap; margin-top:11px}
  .result .rbody .files a{font-family:var(--mono); font-size:11.5px; color:var(--ink2); background:var(--panel2);
    border:1px solid var(--line2); border-radius:7px; padding:6px 11px; display:inline-flex; gap:6px; align-items:center}
  .result .rbody .files a:hover{border-color:var(--line3)}
  .result .rbody .files svg{width:12px; height:12px; color:var(--ok)}
  .result .errmsg{color:var(--mut); font-size:13px; line-height:1.5}
  .result .receipt{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; padding-top:11px;
    border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--dim)}
  .result .receipt a{color:var(--seal2)} .result .receipt a:hover{text-decoration:underline}
  .result .errmsg b{color:var(--ink)}
  /* post-run cross-sell: drive call #2 toward a DIFFERENT skill */
  .nextrun{display:none; margin-top:14px; padding:14px 16px; border:1px solid var(--line2); border-radius:var(--r-lg);
    background:linear-gradient(180deg,var(--ok-bg),transparent)}
  .nextrun.show{display:block}
  .nextrun .nh{font-size:13px; color:var(--ink); font-weight:600; margin-bottom:10px}
  .nextrun .nrow{display:flex; gap:10px; align-items:center; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line)}
  .nextrun .nrow:first-of-type{border-top:0}
  .nextrun .nrow .nl{font-size:13px; color:var(--ink2)} .nextrun .nrow .nl small{display:block; color:var(--dim); font-family:var(--mono); font-size:10.5px}
  .nextrun .nrow a{font-family:var(--mono); font-size:11.5px; color:var(--seal2)}
  @keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

  /* "what you get back" card (graft: quantro) */
  .getback{border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--panel); padding:16px 18px}
  .getback h4{font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase; color:var(--dim); margin-bottom:12px}
  .getback .g{display:flex; gap:10px; align-items:flex-start; padding:7px 0}
  .getback .g svg{width:15px; height:15px; color:var(--seal2); flex:none; margin-top:2px}
  .getback .g b{font-size:13px; color:var(--ink); font-weight:600}
  .getback .g code{font-family:var(--mono); font-size:11px; color:var(--ok2)}

  /* seller card */
  .seller{border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--panel); padding:16px 18px}
  .seller .sr{display:flex; align-items:center; gap:12px}
  .seller .sav{width:38px; height:38px; border-radius:11px; background:linear-gradient(140deg,#2a2a30,#161619);
    border:1px solid var(--line2); display:grid; place-items:center; font-family:var(--mono); font-size:13px; color:var(--ink2)}
  .seller .sn{font-weight:600; font-size:14px; color:var(--ink); display:flex; align-items:center; gap:7px}
  .seller .sn svg{width:14px; height:14px; color:var(--ok)}
  .seller .sm{font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:2px}
  .seller .sprofile{font-family:var(--mono); font-size:11.5px; color:var(--seal2); margin-top:10px; display:inline-block}
  .seller .sprofile:hover{text-decoration:underline}
  .seller .smeta{display:flex; gap:16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
  .seller .smeta .x{font-family:var(--mono); font-size:11px; color:var(--dim)}
  .seller .smeta .x b{display:block; color:var(--ink2); font-size:15px; font-weight:500; margin-bottom:2px; letter-spacing:0}

  /* footer (compact; full furniture matches catalog) */
  footer{border-top:1px solid var(--line); padding:36px 0 56px; background:var(--bg2)}
  .foot-bar{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
  .foot-links{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:12px}
  .foot-links a{color:var(--mut)} .foot-links a:hover{color:var(--ink)}
  .pay-lockup{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--mut)}
  .pay-lockup svg{width:15px; height:15px; color:var(--ok); flex:none}
  .pay-lockup b{color:var(--ink2); font-weight:500}

  @keyframes orbPulse{0%,100%{opacity:.85}50%{opacity:1}}
  .orb .core{animation:orbPulse 5s var(--ease) infinite; transform-origin:center}

  /* ============ RESPONSIVE ============ */
  @media (max-width:920px){
    .layout{grid-template-columns:1fr; gap:24px}
    .col-side{position:relative; top:0; order:-1}
    .fit-grid{grid-template-columns:1fr}
  }
  @media (max-width:680px){
    .wrap{padding:0 18px}
    .crumb{display:none}
    .schema .srow{grid-template-columns:1fr; gap:5px}
    .schema .srow.hd{display:none}
    .schema .srow{padding:12px 16px}
    .schema .fdesc{padding-top:2px}
    .dhead-top{gap:14px}
    .dico{width:52px; height:52px}
    .wallet .bal{display:none}
    .foot-bar{flex-direction:column; align-items:flex-start}
  }
  @media (prefers-reduced-motion:reduce){ .orb .core{animation:none} .result.loading .rdot{animation:none} }

/* ===== from run-states.html ===== */
/* This page is a BUILDER REFERENCE: the live run panel lives in
     skill-detail.html (interactive demo). Here every state of that same
     panel is rendered statically, side by side, with wiring notes.
     All panel CSS below is IDENTICAL to skill-detail.html — do not fork. */
  body{
    background:
      radial-gradient(1100px 560px at 92% -8%, rgba(0,113,227,.07), transparent 58%),
      var(--bg);
    color:var(--ink); font-family:var(--sans); line-height:var(--lh-body); font-size:15px;
    -webkit-font-smoothing:antialiased; min-height:100vh;
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}

  /* ============ NAV (shared shell) ============ */
  .nav{position:sticky; top:0; z-index:var(--z-nav);
    background:rgba(251,251,253,.72); backdrop-filter:saturate(160%) blur(18px);
    -webkit-backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--line)}
  .nav .row{display:flex; align-items:center; gap:16px; height:64px}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:500; font-size:15px}
  .brand .mark{width:26px; height:26px; border-radius:7px}
  .brand .tld{color:var(--dim)}
  .crumb{font-family:var(--mono); font-size:12px; color:var(--dim); display:flex; align-items:center; gap:8px}
  .crumb a:hover{color:var(--mut)}
  .crumb .sep{color:var(--faint)}
  .nav-right{margin-left:auto; display:flex; align-items:center; gap:14px}
  .wallet{display:inline-flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--line2);
    border-radius:var(--r-pill); padding:6px 7px 6px 13px}
  .wallet .bal{font-family:var(--mono); font-size:13px; color:var(--ink)}
  .wallet .bal b{color:var(--ok); font-weight:500}
  .wallet .topup{font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink); background:var(--panel3);
    border:1px solid var(--line2); border-radius:var(--r-pill); padding:4px 11px}
  .wallet .topup:hover{border-color:var(--seal-line); color:var(--seal2)}

  /* ============ PAGE HEAD ============ */
  .head{padding:40px 0 10px}
  .head h1{font-family:var(--sans); font-weight:800; font-size:var(--t-h1); letter-spacing:0; line-height:1.08}
  .head p{color:var(--mut); font-size:15.5px; margin-top:10px; max-width:72ch}
  .head p b{color:var(--ink2); font-weight:500}
  .head code{font-family:var(--mono); font-size:.88em; color:var(--ink2); background:var(--panel2); border:1px solid var(--line); border-radius:5px; padding:1px 6px}

  /* state-flow strip */
  .flowmap{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:22px 0 8px;
    font-family:var(--mono); font-size:11.5px; color:var(--dim)}
  .flowmap .fnode{border:1px solid var(--line2); background:var(--panel); border-radius:var(--r-pill); padding:6px 12px; color:var(--mut)}
  .flowmap .fnode.s0{border-color:var(--line3); color:var(--ink)}
  .flowmap .fnode.guard{border-color:var(--warn-line); color:var(--warn)}
  .flowmap .fnode.bad{border-color:var(--danger-line); color:var(--danger)}
  .flowmap .fnode.load{border-color:var(--warn-line); color:var(--warn)}
  .flowmap .fnode.good{border-color:var(--ok-line); color:var(--ok)}
  .flowmap .arr{color:var(--faint)}

  /* ============ GALLERY GRID ============ */
  .gallery{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; padding:26px 0 80px}
  .stcell{min-width:0}
  .sthead{display:flex; align-items:baseline; gap:10px; margin-bottom:12px}
  .sthead .stnum{font-family:var(--mono); font-size:13px; color:var(--seal2)}
  .sthead h2{font-family:var(--serif); font-weight:500; font-size:21px; letter-spacing:0}
  .sthead .label{margin-left:auto}
  .stnote{margin-top:12px; border:1px solid var(--line); border-left:2px solid var(--seal); border-radius:var(--r-sm);
    background:var(--bg2); padding:12px 14px; font-family:var(--mono); font-size:11.5px; color:var(--mut); line-height:1.7}
  .stnote b{color:var(--ink2); font-weight:500}
  .stnote code{color:var(--ok2)}

  /* ============ RUN PANEL (identical to skill-detail.html) ============ */
  .run{border:1px solid var(--line2); border-radius:var(--r-xl); background:var(--panel); box-shadow:var(--shadow); overflow:hidden}
  .run-head{padding:18px 20px 16px; border-bottom:1px solid var(--line);
    background:radial-gradient(360px 160px at 80% -40%, rgba(0,113,227,.10), transparent 60%)}
  .run-head .pr{display:flex; align-items:baseline; gap:8px; margin-top:8px}
  .run-head .amt{font-family:var(--mono); font-size:30px; color:var(--ink); font-weight:500; letter-spacing:0}
  .run-head .per{font-family:var(--mono); font-size:12px; color:var(--dim)}
  .run-head .note{font-family:var(--mono); font-size:11px; color:var(--mut); margin-top:6px; display:flex; align-items:center; gap:7px}
  .run-head .note svg{width:13px; height:13px; color:var(--ok)}

  .run-body{padding:18px 20px 20px}
  .run-body .fl{margin-bottom:14px}
  .run-body label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:0; text-transform:uppercase;
    color:var(--dim); margin-bottom:7px}
  .run-body label .req{color:var(--seal2); font-size:10px}
  .run-body label .optn{color:var(--dim); font-size:10px}
  .run-body select{width:100%; background:var(--panel2); border:1px solid var(--line2);
    border-radius:10px; color:var(--ink); font-family:var(--sans); font-size:14px; padding:11px 12px;
    appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239a9897' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; cursor:pointer}

  .fileinput{position:relative}
  .fileinput input[type=file]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
  .fileinput .face{display:flex; align-items:center; gap:10px; background:var(--panel2); border:1px dashed var(--line3);
    border-radius:10px; color:var(--mut); padding:14px 12px; font-size:13.5px}
  .fileinput input[type=file]:focus-visible + .face{box-shadow:var(--focus); border-style:solid}
  .fileinput .face svg{width:16px; height:16px; color:var(--dim); flex:none}
  .fileinput.has .face{border-style:solid; border-color:var(--ok-line); color:var(--ink)}
  .fileinput.has .face svg{color:var(--ok)}
  /* empty-input guard variant: the face prompts, in danger tone */
  .fileinput.guard .face{border-style:solid; border-color:var(--danger-line); color:var(--ink2); background:var(--danger-bg)}
  .fileinput.guard .face svg{color:var(--danger)}
  .sample{margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--seal2); background:none; border:0; cursor:pointer; padding:0}
  .sample:hover{text-decoration:underline}
  .guard-hint{margin-top:7px; font-family:var(--mono); font-size:11px; color:var(--danger); display:flex; gap:6px; align-items:center}
  .guard-hint svg{width:12px; height:12px; flex:none}

  .ledger{margin:16px 0 14px; border:1px solid var(--line); border-radius:11px; background:var(--bg2); overflow:hidden}
  .ledger .lr{display:flex; justify-content:space-between; padding:9px 14px; font-size:12.5px; border-top:1px solid var(--line)}
  .ledger .lr:first-child{border-top:0}
  .ledger .lr span{color:var(--mut); font-family:var(--mono); font-size:11.5px}
  .ledger .lr b{color:var(--ink2); font-family:var(--mono); font-weight:500}
  .ledger .lr.est span,.ledger .lr.est b{color:var(--dim)}
  .ledger .lr.total{background:var(--panel2)}
  .ledger .lr.total span{color:var(--ink); font-size:13px} .ledger .lr.total b{color:var(--ok); font-size:14px}

  .run-cta{width:100%}
  .run-cta svg{width:16px; height:16px}
  .run-cta[aria-disabled="true"]{opacity:.55; cursor:not-allowed; filter:none; transform:none; box-shadow:none}
  .run-foot{margin-top:13px; font-family:var(--mono); font-size:11px; color:var(--mut); text-align:center; line-height:1.6}
  .run-foot .bal-ok{color:var(--ok)}
  .run-foot .bal-low{color:var(--warn)}
  .run-foot a{color:var(--seal2)}

  .insufficient{display:flex; margin-top:13px; padding:12px 14px; border:1px solid var(--danger-line); background:var(--danger-bg);
    border-radius:10px; font-size:12.5px; color:var(--ink2); align-items:flex-start; gap:10px}
  .insufficient svg{width:15px; height:15px; color:var(--danger); flex:none; margin-top:1px}
  .insufficient a{color:var(--seal2); font-weight:600}

  .result{display:block; margin-top:16px; border:1px solid var(--line2); border-radius:var(--r-lg); overflow:hidden; background:var(--panel)}
  .result .rhd{display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--line); font-size:13px}
  .result .rhd .rdot{width:8px; height:8px; border-radius:50%; flex:none}
  .result.loading .rhd{color:var(--mut)} .result.loading .rdot{background:var(--warn); box-shadow:0 0 8px var(--warn); animation:pulse 1.2s var(--ease) infinite}
  .result.ok .rhd{color:var(--ok2)} .result.ok .rdot{background:var(--ok); box-shadow:0 0 8px var(--ok)}
  .result.err .rhd{color:var(--danger)} .result.err .rdot{background:var(--danger)}
  .result .rhd b{font-weight:600}
  .result .rhd .chg{margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--dim)}
  .result .rbody{padding:14px 16px}
  .result .rbody pre{margin:0; background:#0a0a0b; border:1px solid var(--line); border-radius:9px; font-size:11.5px; padding:13px 14px;
    font-family:var(--mono); line-height:1.7; color:var(--mut); overflow-x:auto}
  .result .rbody .files{display:flex; gap:8px; flex-wrap:wrap; margin-top:11px}
  .result .rbody .files a{font-family:var(--mono); font-size:11.5px; color:var(--ink2); background:var(--panel2);
    border:1px solid var(--line2); border-radius:7px; padding:6px 11px; display:inline-flex; gap:6px; align-items:center}
  .result .rbody .files a:hover{border-color:var(--line3)}
  .result .rbody .files svg{width:12px; height:12px; color:var(--ok)}
  .result .errmsg{color:var(--mut); font-size:13px; line-height:1.55}
  .result .errmsg b{color:var(--ink)}
  /* receipt line: id + dispute path on EVERY receipt (DIRECTION requirement) */
  .receipt{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; padding-top:11px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:11px; color:var(--dim)}
  .receipt a{color:var(--seal2)} .receipt a:hover{text-decoration:underline}
  .result .acts{display:flex; gap:8px; margin-top:12px}
  .result .acts .btn-ghost{font-size:12.5px; padding:8px 13px}

  .nextrun{display:block; margin:0 20px 20px; padding:14px 16px; border:1px solid var(--line2); border-radius:var(--r-lg);
    background:linear-gradient(180deg,var(--ok-bg),transparent)}
  .nextrun .nh{font-size:13px; color:var(--ink); font-weight:600; margin-bottom:10px}
  .nextrun .nrow{display:flex; gap:10px; align-items:center; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line)}
  .nextrun .nrow:first-of-type{border-top:0}
  .nextrun .nrow .nl{font-size:13px; color:var(--ink2)} .nextrun .nrow .nl small{display:block; color:var(--dim); font-family:var(--mono); font-size:10.5px}
  .nextrun .nrow a{font-family:var(--mono); font-size:11.5px; color:var(--seal2)}
  @keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

  /* skeleton shimmer for loading-form variant */
  .skel{position:relative; overflow:hidden; background:var(--panel2); border-radius:8px}
  .skel::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent); animation:shimmer 1.6s infinite}
  @keyframes shimmer{to{transform:translateX(100%)}}

  /* footer */
  footer{border-top:1px solid var(--line); padding:36px 0 56px; background:var(--bg2)}
  .foot-bar{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
  .foot-links{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:12px}
  .foot-links a{color:var(--mut)} .foot-links a:hover{color:var(--ink)}
  .pay-lockup{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--mut)}
  .pay-lockup svg{width:15px; height:15px; color:var(--ok); flex:none}
  .pay-lockup b{color:var(--ink2); font-weight:500}

  @media (max-width:920px){ .gallery{grid-template-columns:1fr} }
  @media (max-width:680px){ .wrap{padding:0 18px} .crumb{display:none} .wallet .bal{display:none} }
  @media (prefers-reduced-motion:reduce){ .result.loading .rdot{animation:none} .skel::after{animation:none} }

/* ===== from wallet.html ===== */
body{
    background:
      radial-gradient(1100px 560px at 92% -8%, rgba(0,113,227,.06), transparent 58%),
      radial-gradient(800px 460px at 2% 0%, rgba(95,207,158,.04), transparent 55%),
      var(--bg);
    color:var(--ink); font-family:var(--sans); line-height:var(--lh-body); font-size:15px;
    -webkit-font-smoothing:antialiased; min-height:100vh;
  }
  .wrap{max-width:var(--maxw-read); margin:0 auto; padding:0 var(--gutter)}

  /* ============ NAV (shared shell) ============ */
  .nav{position:sticky; top:0; z-index:var(--z-nav);
    background:rgba(251,251,253,.72); backdrop-filter:saturate(160%) blur(18px);
    -webkit-backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--line)}
  .nav .row{display:flex; align-items:center; gap:16px; height:64px}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:500; font-size:15px}
  .brand .mark{width:26px; height:26px; border-radius:7px}
  .brand .tld{color:var(--dim)}
  .crumb{font-family:var(--mono); font-size:12px; color:var(--dim); display:flex; align-items:center; gap:8px}
  .crumb a:hover{color:var(--mut)}
  .crumb .sep{color:var(--faint)}
  .nav-right{margin-left:auto; display:flex; align-items:center; gap:14px}
  .nav-link{font-family:var(--mono); font-size:12.5px; color:var(--mut); transition:color .15s}
  .nav-link:hover{color:var(--ink)}
  .avatar{width:30px; height:30px; border-radius:50%; background:linear-gradient(140deg,#2a2a30,#161619);
    border:1px solid var(--line2); display:grid; place-items:center; font-family:var(--mono); font-size:12px; color:var(--ink2)}

  /* ============ PAGE HEAD ============ */
  .head{padding:40px 0 8px}
  .head h1{font-family:var(--sans); font-weight:800; font-size:var(--t-h1); letter-spacing:0; line-height:1.08}
  .head p{color:var(--mut); font-size:15.5px; margin-top:10px; max-width:64ch}
  .head p b{color:var(--ink2); font-weight:500}

  /* ============ LAYOUT ============ */
  .layout{display:grid; grid-template-columns:1fr 350px; gap:30px; padding:26px 0 80px; align-items:start}
  .col-main{min-width:0}
  .col-side{position:sticky; top:80px; display:flex; flex-direction:column; gap:18px}

  .block{margin-bottom:32px}
  .block > h2{font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:0; margin-bottom:16px;
    display:flex; align-items:baseline; gap:11px; color:var(--ink)}
  .block > h2 .num{font-family:var(--mono); font-size:13px; color:var(--seal2); font-weight:500}
  .block > h2 .label{margin-left:auto; align-self:center}

  .attestgrid{display:grid; gap:10px}
  .attestbox{display:flex; gap:12px; align-items:flex-start; padding:15px 16px; border:1px solid var(--line2);
    border-radius:12px; background:var(--panel); cursor:pointer}
  .attestbox input{width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--seal)}
  .attestbox span{display:block; min-width:0}
  .attestbox b{display:block; color:var(--ink); font-size:14px; line-height:1.35; font-weight:600}
  .attestbox small{display:block; color:var(--mut); font-size:12.5px; line-height:1.5; margin-top:4px}
  .attestbox:focus-within{box-shadow:var(--focus); border-color:var(--seal-line)}

  /* ============ BALANCE CARD ============ */
  .balcard{border:1px solid var(--line2); border-radius:var(--r-xl); background:var(--panel); box-shadow:var(--shadow); overflow:hidden}
  .balcard .bc-top{padding:22px 24px 20px; display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap;
    background:radial-gradient(420px 180px at 85% -40%, rgba(95,207,158,.08), transparent 60%)}
  .balcard .bc-amt{flex:1; min-width:200px}
  .balcard .bc-amt .label{display:block; margin-bottom:8px}
  .balcard .big{font-family:var(--mono); font-size:44px; font-weight:500; letter-spacing:0; color:var(--ink); line-height:1}
  .balcard .big .cents{color:var(--mut)}
  .balcard .bstate{display:inline-flex; align-items:center; gap:7px; margin-top:12px;
    font-family:var(--mono); font-size:11px; letter-spacing:0; border-radius:var(--r-pill); padding:5px 11px}
  .balcard .bstate .ld{width:7px; height:7px; border-radius:50%; flex:none}
  .balcard.funded .bstate{color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok-line)}
  .balcard.funded .bstate .ld{background:var(--ok); box-shadow:0 0 7px var(--ok)}
  .balcard.low .bstate{color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-line)}
  .balcard.low .bstate .ld{background:var(--warn); box-shadow:0 0 7px var(--warn)}
  .balcard.empty .bstate{color:var(--danger); background:var(--danger-bg); border:1px solid var(--danger-line)}
  .balcard.empty .bstate .ld{background:var(--danger)}
  .balcard.low .big, .balcard.empty .big{color:var(--ink)}
  .bc-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  .bc-meta{display:flex; gap:0; border-top:1px solid var(--line)}
  .bc-meta .m{flex:1; padding:14px 24px; border-left:1px solid var(--line)}
  .bc-meta .m:first-child{border-left:0}
  .bc-meta .m .label{display:block; margin-bottom:5px}
  .bc-meta .m b{font-family:var(--mono); font-size:15px; color:var(--ink2); font-weight:500}
  .bc-meta .m b.okc{color:var(--ok)}

  /* variant strip (reference-only) */
  .variants{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
  .variant .vh{font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase; color:var(--dim); margin-bottom:8px}
  .varcard{border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--panel); padding:18px 20px}
  .varcard .label{display:block; margin-bottom:7px}
  .varcard .vamt{font-family:var(--mono); font-size:30px; font-weight:500; letter-spacing:0; line-height:1}
  .varcard.low .vamt{color:var(--warn)}
  .varcard.empty .vamt{color:var(--danger)}
  .varcard p{color:var(--mut); font-size:12.5px; margin-top:9px; line-height:1.55}
  .varcard a{color:var(--seal2); font-weight:600}

  /* ============ USAGE TABLE ============ */
  .usage{border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--panel); overflow:hidden}
  .usage .uhead{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap}
  .usage .uhead .label{flex:1}
  .usage .uhead .export{font-family:var(--mono); font-size:11px; color:var(--mut); background:var(--panel2);
    border:1px solid var(--line2); border-radius:7px; padding:5px 10px; cursor:pointer; display:inline-flex; gap:6px; align-items:center}
  .usage .uhead .export:hover{color:var(--ink); border-color:var(--line3)}
  .usage .uhead .export svg{width:12px; height:12px}
  .twrap{overflow-x:auto}
  table.tbl{width:100%; border-collapse:collapse; font-size:13px; min-width:640px}
  .tbl th{font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase; color:var(--dim);
    text-align:left; font-weight:500; padding:11px 18px; border-bottom:1px solid var(--line2); white-space:nowrap; background:var(--panel2)}
  .tbl td{padding:12px 18px; border-bottom:1px solid var(--line); color:var(--mut); vertical-align:middle}
  .tbl tbody tr:last-child td{border-bottom:0}
  .tbl td.strong{color:var(--ink); font-weight:500}
  .tbl td.num, .tbl th.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
  .tbl .debit{color:var(--ink2)}
  .tbl .credit{color:var(--ok)}
  .tbl .skl{font-family:var(--mono); font-size:12px}
  .tbl .skl small{display:block; color:var(--dim); font-size:10.5px; margin-top:1px}
  .tbl .stat{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px;
    border-radius:var(--r-pill); padding:3px 9px; border:1px solid var(--line2)}
  .tbl .stat.okt{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line)}
  .tbl .stat.failed{color:var(--danger); background:var(--danger-bg); border-color:var(--danger-line)}
  .tbl .stat.credit-t{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line)}
  .tbl td a{color:var(--seal2); font-family:var(--mono); font-size:11px}
  .tbl td a:hover{text-decoration:underline}
  .upage{display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:11.5px; color:var(--dim)}
  .upage .pgbtns{display:flex; gap:8px}
  .upage button{font-family:var(--mono); font-size:11px; color:var(--mut); background:var(--panel2);
    border:1px solid var(--line2); border-radius:7px; padding:5px 11px; cursor:pointer}
  .upage button:hover{color:var(--ink); border-color:var(--line3)}
  .upage button[disabled]{opacity:.45; cursor:not-allowed}

  /* usage variants: empty + loading */
  .uempty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:44px 24px; color:var(--mut)}
  .uempty svg{width:36px; height:36px; color:var(--faint)}
  .uempty b{font-family:var(--serif); font-weight:500; font-size:19px; color:var(--ink)}
  .uempty p{font-size:13.5px; max-width:42ch; line-height:1.6}
  .skel{position:relative; overflow:hidden; background:var(--panel2); border-radius:7px}
  .skel::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent); animation:shimmer 1.6s infinite}
  @keyframes shimmer{to{transform:translateX(100%)}}
  .skelrow{display:grid; grid-template-columns:2fr 1.2fr 1fr .8fr; gap:14px; padding:13px 18px; border-bottom:1px solid var(--line)}
  .skelrow:last-child{border-bottom:0}

  /* ============ SIDE: refund/withdraw + spend guard ============ */
  .sidecard{border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--panel); padding:16px 18px}
  .sidecard h4{font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase; color:var(--dim); margin-bottom:12px}
  .sidecard .row{display:flex; gap:10px; align-items:flex-start; padding:8px 0}
  .sidecard .row svg{width:15px; height:15px; color:var(--ok); flex:none; margin-top:2px}
  .sidecard .row.seal svg{color:var(--seal2)}
  .sidecard .row b{font-size:13px; color:var(--ink); font-weight:600; display:block}
  .sidecard .row p{font-size:12.5px; color:var(--mut); line-height:1.5; margin-top:2px}
  .sidecard .row a{color:var(--seal2)}
  .sidecard .row a:hover{text-decoration:underline}
  .pay-lockup{display:inline-flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--mut); line-height:1.5}
  .pay-lockup svg{width:15px; height:15px; color:var(--ok); flex:none; margin-top:1px}
  .pay-lockup b{color:var(--ink2); font-weight:500}
  .capnote{font-family:var(--mono); font-size:11px; color:var(--dim); line-height:1.7; border-top:1px solid var(--line); margin-top:12px; padding-top:12px}
  .capnote b{color:var(--mut); font-weight:500}

  /* ============ SPEND CONTROLS (survey delta #3) ============ */
  .ctl{border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--panel); overflow:hidden}
  .crow{display:flex; align-items:center; gap:14px; padding:15px 20px; border-top:1px solid var(--line); flex-wrap:wrap}
  .crow:first-child{border-top:0}
  .crow .cl{flex:1; min-width:220px}
  .crow .cl b{font-size:14px; color:var(--ink); font-weight:600; display:block}
  .crow .cl p{font-size:12.5px; color:var(--mut); margin-top:2px; line-height:1.5}
  .capval{font-family:var(--mono); font-size:15px; color:var(--ink2); font-variant-numeric:tabular-nums}
  .capval span{color:var(--dim); font-size:11px}
  .ctl-btn{font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--ink); background:var(--panel3);
    border:1px solid var(--line2); border-radius:9px; padding:8px 14px; cursor:pointer; transition:border-color .15s}
  .ctl-btn:hover{border-color:var(--line3)}
  .ctl-btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed}
  .capform{display:none; align-items:center; gap:8px}
  .capform.show{display:flex}
  .capform .moneyin{position:relative; display:flex; align-items:center}
  .capform .cur{position:absolute; left:11px; font-family:var(--mono); font-size:13px; color:var(--dim); pointer-events:none}
  .capform input{width:110px; background:var(--bg2); border:1px solid var(--line2); border-radius:8px;
    color:var(--ink); font-family:var(--mono); font-size:13px; padding:8px 10px 8px 26px}
  .capform input:focus{border-color:var(--line3)}
  .crow.pending .cl b::after{content:" · design ready, needs API"; font-family:var(--mono); font-size:9.5px;
    letter-spacing:0; color:var(--warn); font-weight:400; text-transform:uppercase}
  .perskill{border-top:1px solid var(--line)}
  .perskill .ps-h{font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase;
    color:var(--dim); padding:12px 20px 4px}
  .psrow{display:flex; align-items:center; gap:12px; padding:9px 20px; font-size:13px}
  .psrow .nm{flex:1; color:var(--ink2); min-width:0}
  .psrow .nm small{font-family:var(--mono); font-size:10.5px; color:var(--dim); margin-left:7px}
  .psrow .bar{flex:2; height:5px; border-radius:999px; background:var(--panel2); overflow:hidden; min-width:80px}
  .psrow .bar i{display:block; height:100%; background:var(--seal); border-radius:999px}
  .psrow .amt{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--mut); width:64px; text-align:right}
  .ps-foot{font-family:var(--mono); font-size:10.5px; color:var(--dim); padding:6px 20px 14px}

  /* footer */
  footer{border-top:1px solid var(--line); padding:36px 0 56px; background:var(--bg2)}
  .foot-bar{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
  .foot-links{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:12px}
  .foot-links a{color:var(--mut)} .foot-links a:hover{color:var(--ink)}

  @media (max-width:920px){
    .layout{grid-template-columns:1fr; gap:24px}
    .col-side{position:relative; top:0}
  }
  @media (max-width:680px){
    .wrap{padding:0 18px}
    .crumb{display:none}
    .variants{grid-template-columns:1fr}
    .balcard .bc-top{flex-direction:column}
    .bc-meta{flex-direction:column}
    .bc-meta .m{border-left:0; border-top:1px solid var(--line)}
    .bc-meta .m:first-child{border-top:0}
  }
  @media (prefers-reduced-motion:reduce){ .skel::after{animation:none} }

/* ===== from wallet-fund.html ===== */
body{
    background:
      radial-gradient(1000px 540px at 50% -12%, rgba(0,113,227,.08), transparent 58%),
      var(--bg);
    color:var(--ink); font-family:var(--sans); line-height:var(--lh-body); font-size:15px;
    -webkit-font-smoothing:antialiased; min-height:100vh;
  }
  .wrap{max-width:var(--maxw-read); margin:0 auto; padding:0 var(--gutter)}

  /* ============ NAV (shared shell) ============ */
  .nav{position:sticky; top:0; z-index:var(--z-nav);
    background:rgba(251,251,253,.72); backdrop-filter:saturate(160%) blur(18px);
    -webkit-backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--line)}
  .nav .row{display:flex; align-items:center; gap:16px; height:64px}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:500; font-size:15px}
  .brand .mark{width:26px; height:26px; border-radius:7px}
  .brand .tld{color:var(--dim)}
  .crumb{font-family:var(--mono); font-size:12px; color:var(--dim); display:flex; align-items:center; gap:8px}
  .crumb a:hover{color:var(--mut)}
  .crumb .sep{color:var(--faint)}
  .nav-right{margin-left:auto; display:flex; align-items:center; gap:14px}
  .avatar{width:30px; height:30px; border-radius:50%; background:linear-gradient(140deg,#2a2a30,#161619);
    border:1px solid var(--line2); display:grid; place-items:center; font-family:var(--mono); font-size:12px; color:var(--ink2)}

  /* ============ CENTERED FUND PANEL ============ */
  .stage{display:grid; grid-template-columns:minmax(0,520px); justify-content:center; padding:48px 0 90px}
  .fund{border:1px solid var(--line2); border-radius:var(--r-xl); background:var(--panel); box-shadow:var(--shadow-lg); overflow:hidden}
  .fund-head{padding:24px 26px 20px; border-bottom:1px solid var(--line);
    background:radial-gradient(420px 200px at 80% -50%, rgba(0,113,227,.10), transparent 60%)}
  .fund-head h1{font-family:var(--sans); font-weight:800; font-size:26px; letter-spacing:0; line-height:1.1}
  .fund-head p{color:var(--mut); font-size:13.5px; margin-top:8px; line-height:1.55}
  .fund-head p b{color:var(--ink2); font-weight:500}
  .balrow{display:flex; align-items:center; gap:9px; margin-top:14px; font-family:var(--mono); font-size:12px; color:var(--mut)}
  .balrow .ld{width:7px; height:7px; border-radius:50%; background:var(--warn); box-shadow:0 0 7px var(--warn); flex:none}
  .balrow b{color:var(--warn); font-weight:500}

  .fund-body{padding:22px 26px 26px}
  fieldset{border:0; margin:0; padding:0}
  legend{font-family:var(--mono); font-size:11px; letter-spacing:0; text-transform:uppercase; color:var(--dim); margin-bottom:10px}

  /* amount presets — real radios, big targets */
  .amounts{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
  .amt{position:relative}
  .amt input{position:absolute; inset:0; opacity:0; cursor:pointer}
  .amt .face{display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 6px 12px;
    background:var(--panel2); border:1px solid var(--line2); border-radius:12px; transition:border-color .15s, background .15s}
  .amt .face b{font-family:var(--mono); font-size:18px; font-weight:500; color:var(--ink); letter-spacing:0}
  .amt .face span{font-family:var(--mono); font-size:9.5px; letter-spacing:0; text-transform:uppercase; color:var(--dim)}
  .amt input:hover + .face{border-color:var(--line3)}
  .amt input:checked + .face{border-color:var(--seal-line); background:var(--seal-bg)}
  .amt input:checked + .face b{color:var(--seal2)}
  .amt input:focus-visible + .face{box-shadow:var(--focus)}
  .amt .face .pop{position:absolute; top:-8px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:8.5px;
    letter-spacing:0; color:var(--ok); background:var(--bg2); border:1px solid var(--ok-line); border-radius:var(--r-pill); padding:2px 7px; white-space:nowrap}

  /* custom amount */
  .custom{margin-top:12px}
  .custom label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:0; text-transform:uppercase; color:var(--dim); margin-bottom:7px}
  .moneyin{position:relative; display:flex; align-items:center}
  .moneyin .cur{position:absolute; left:14px; font-family:var(--mono); font-size:15px; color:var(--dim); pointer-events:none}
  .moneyin input{width:100%; background:var(--panel2); border:1px solid var(--line2); border-radius:10px;
    color:var(--ink); font-family:var(--mono); font-size:15px; padding:12px 12px 12px 32px}
  .moneyin input:focus{border-color:var(--line3); background:var(--panel3)}
  .moneyin input[aria-invalid="true"]{border-color:var(--danger-line); background:var(--danger-bg)}
  .amt-err{display:none; margin-top:7px; font-family:var(--mono); font-size:11px; color:var(--danger); align-items:center; gap:6px}
  .amt-err.show{display:flex}
  .amt-err svg{width:12px; height:12px; flex:none}
  .limits{margin-top:7px; font-family:var(--mono); font-size:10.5px; color:var(--dim)}

  /* credit ledger */
  .ledger{margin:18px 0 16px; border:1px solid var(--line); border-radius:11px; background:var(--bg2); overflow:hidden}
  .ledger .lr{display:flex; justify-content:space-between; padding:10px 14px; font-size:12.5px; border-top:1px solid var(--line)}
  .ledger .lr:first-child{border-top:0}
  .ledger .lr span{color:var(--mut); font-family:var(--mono); font-size:11.5px}
  .ledger .lr b{color:var(--ink2); font-family:var(--mono); font-weight:500}
  .ledger .lr.cr span,.ledger .lr.cr b{color:var(--ok)}
  .ledger .lr.total{background:var(--panel2)}
  .ledger .lr.total span{color:var(--ink); font-size:13px}
  .ledger .lr.total b{color:var(--ok); font-size:14px}

  .fund-cta{width:100%}
  .fund-cta svg{width:15px; height:15px}
  .redirect-note{margin-top:13px; display:flex; gap:9px; align-items:flex-start; font-family:var(--mono); font-size:11px;
    color:var(--mut); line-height:1.65}
  .redirect-note svg{width:14px; height:14px; color:var(--ok); flex:none; margin-top:1px}
  .redirect-note b{color:var(--ink2); font-weight:500}
  .cardmarks{display:flex; align-items:center; gap:7px; justify-content:center; margin-top:14px}
  .cardmarks .cm{font-family:var(--mono); font-size:9.5px; letter-spacing:0; color:var(--dim);
    border:1px solid var(--line2); border-radius:5px; padding:3px 7px; background:var(--panel2)}

  /* ============ RETURN STATES (reference) ============ */
  .returns{margin-top:34px}
  .returns > h2{font-family:var(--serif); font-weight:500; font-size:21px; letter-spacing:0; color:var(--ink);
    display:flex; gap:11px; align-items:baseline; margin-bottom:6px}
  .returns > h2 .num{font-family:var(--mono); font-size:13px; color:var(--seal2)}
  .returns > p{color:var(--mut); font-size:13px; margin-bottom:16px}
  .returns code{font-family:var(--mono); font-size:.9em; color:var(--ink2); background:var(--panel2); border:1px solid var(--line); border-radius:5px; padding:1px 6px}
  .retgrid{display:grid; gap:14px}
  .ret{border-radius:var(--r-lg); padding:16px 18px; display:flex; gap:12px; align-items:flex-start}
  .ret svg{width:17px; height:17px; flex:none; margin-top:2px}
  .ret b{font-size:14px; font-weight:600; display:block; margin-bottom:3px}
  .ret p{font-size:12.5px; line-height:1.55; color:var(--mut)}
  .ret p a{color:var(--seal2); font-weight:600}
  .ret .vh{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:0; text-transform:uppercase; color:var(--dim); margin-bottom:6px}
  .ret.okr{border:1px solid var(--ok-line); background:linear-gradient(180deg,var(--ok-bg),transparent)}
  .ret.okr svg,.ret.okr b{color:var(--ok)}
  .ret.pend{border:1px solid var(--warn-line); background:linear-gradient(180deg,var(--warn-bg),transparent)}
  .ret.pend svg,.ret.pend b{color:var(--warn)}
  .ret.cancel{border:1px solid var(--line2); background:var(--panel)}
  .ret.cancel svg{color:var(--dim)} .ret.cancel b{color:var(--ink)}

  /* footer */
  footer{border-top:1px solid var(--line); padding:36px 0 56px; background:var(--bg2)}
  .foot-bar{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
  .foot-links{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:12px}
  .foot-links a{color:var(--mut)} .foot-links a:hover{color:var(--ink)}
  .pay-lockup{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--mut)}
  .pay-lockup svg{width:15px; height:15px; color:var(--ok); flex:none}
  .pay-lockup b{color:var(--ink2); font-weight:500}

  @media (max-width:680px){
    .wrap{padding:0 18px}
    .crumb{display:none}
    .amounts{grid-template-columns:repeat(2,1fr)}
    .stage{padding:28px 0 60px}
  }

/* ===== from auth.html ===== */
body{
    background:
      radial-gradient(900px 600px at 50% 112%, rgba(0,113,227,.14), transparent 60%),
      radial-gradient(700px 420px at 50% -10%, rgba(41,151,255,.05), transparent 60%),
      var(--bg);
    color:var(--ink); font-family:var(--sans); line-height:var(--lh-body); font-size:15px;
    -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column;
  }
  .wrap{max-width:var(--maxw-read); margin:0 auto; padding:0 var(--gutter); width:100%}

  /* ============ NAV (minimal — auth context) ============ */
  .nav{position:sticky; top:0; z-index:var(--z-nav);
    background:rgba(251,251,253,.72); backdrop-filter:saturate(160%) blur(18px);
    -webkit-backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--line)}
  .nav .row{display:flex; align-items:center; gap:16px; height:64px}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:500; font-size:15px}
  .brand .mark{width:26px; height:26px; border-radius:7px}
  .brand .tld{color:var(--dim)}
  .nav-right{margin-left:auto}
  .nav-link{font-family:var(--mono); font-size:12.5px; color:var(--mut)}
  .nav-link:hover{color:var(--ink)}

  /* ============ AUTH STAGE ============ */
  .stage{flex:1; display:grid; place-items:center; padding:46px 0 70px}
  .auth{width:100%; max-width:430px}

  /* the wax-seal orb crowns the card */
  .orbwrap{display:flex; justify-content:center; margin-bottom:-27px; position:relative; z-index:2}
  .orb{width:54px; height:54px}
  @keyframes orbPulse{0%,100%{opacity:.85}50%{opacity:1}}
  .orb .core{animation:orbPulse 5s var(--ease) infinite; transform-origin:center}

  .authcard{border:1px solid var(--line2); border-radius:var(--r-xl); background:linear-gradient(180deg,var(--panel),var(--bg2));
    box-shadow:var(--shadow-lg); padding:40px 34px 30px; text-align:center}
  .authcard h1{font-family:var(--sans); font-weight:800; font-size:26px; letter-spacing:0; line-height:1.12}
  .authcard .sub{color:var(--mut); font-size:13.5px; margin-top:9px; line-height:1.6}
  .authcard .sub b{color:var(--ink2); font-weight:500}

  .authform{margin-top:22px; text-align:left}
  .authform label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:0; text-transform:uppercase;
    color:var(--dim); margin-bottom:7px}
  .authform input[type=email]{width:100%; background:var(--panel2); border:1px solid var(--line2); border-radius:10px;
    color:var(--ink); font-family:var(--sans); font-size:15px; padding:13px 14px}
  .authform input[type=email]::placeholder{color:var(--faint)}
  .authform input[type=email]:focus{border-color:var(--line3); background:var(--panel3)}
  .authform input[aria-invalid="true"]{border-color:var(--danger-line); background:var(--danger-bg)}
  .fld-err{display:none; margin-top:7px; font-family:var(--mono); font-size:11px; color:var(--danger); align-items:center; gap:6px}
  .fld-err.show{display:flex}
  .fld-err svg{width:12px; height:12px; flex:none}
  .auth-cta{width:100%; margin-top:14px; padding:13px 18px}
  .auth-cta svg{width:15px; height:15px}

  .switch{margin-top:16px; font-size:12.5px; color:var(--mut)}
  .switch b{color:var(--ink2); font-weight:500}
  .authmeta{margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:11px; color:var(--dim); line-height:1.8}
  .authmeta a{color:var(--mut); border-bottom:1px solid var(--line2)}
  .authmeta a:hover{color:var(--ink)}

  /* ---- state: check your inbox ---- */
  .inbox{display:none}
  .inbox.show{display:block}
  .inbox .mailic{width:52px; height:52px; margin:0 auto 16px; border-radius:14px; display:grid; place-items:center;
    background:var(--ok-bg); border:1px solid var(--ok-line)}
  .inbox .mailic svg{width:24px; height:24px; color:var(--ok)}
  .inbox .sentto{font-family:var(--mono); font-size:13px; color:var(--ink2); background:var(--panel2);
    border:1px solid var(--line2); border-radius:9px; padding:9px 14px; display:inline-block; margin-top:14px}
  .inbox .expire{margin-top:16px; font-family:var(--mono); font-size:11px; color:var(--dim); line-height:1.7}
  .inbox .resendrow{margin-top:18px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
  .inbox .resendrow .btn-ghost{font-size:13px; padding:9px 15px}
  .inbox .resent{display:none; margin-top:12px; font-family:var(--mono); font-size:11px; color:var(--ok)}
  .inbox .resent.show{display:block}

  /* ---- state: mail service down (503) ---- */
  .mailerr{display:none; margin-top:16px; padding:13px 15px; border:1px solid var(--danger-line); background:var(--danger-bg);
    border-radius:10px; font-size:12.5px; color:var(--ink2); text-align:left; line-height:1.55; gap:10px; align-items:flex-start}
  .mailerr.show{display:flex}
  .mailerr svg{width:15px; height:15px; color:var(--danger); flex:none; margin-top:1px}
  .mailerr a{color:var(--seal2); font-weight:600}

  /* trust line under the card */
  .under{margin-top:18px; text-align:center; font-family:var(--mono); font-size:11px; color:var(--dim); line-height:1.8}
  .under a{color:var(--mut); border-bottom:1px solid var(--line2)}
  .under a:hover{color:var(--ink)}

  /* footer */
  footer{border-top:1px solid var(--line); padding:30px 0 44px; background:var(--bg2)}
  .foot-bar{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
  .foot-links{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:12px}
  .foot-links a{color:var(--mut)} .foot-links a:hover{color:var(--ink)}
  .pay-lockup{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--mut)}
  .pay-lockup svg{width:15px; height:15px; color:var(--ok); flex:none}
  .pay-lockup b{color:var(--ink2); font-weight:500}

  @media (max-width:680px){
    .wrap{padding:0 18px}
    .authcard{padding:34px 22px 24px}
  }
  @media (prefers-reduced-motion:reduce){ .orb .core{animation:none} }

/* ===== from auth-verify.html ===== */
body{
    background:
      radial-gradient(900px 600px at 50% 112%, rgba(95,207,158,.10), transparent 60%),
      radial-gradient(700px 420px at 50% -10%, rgba(0,113,227,.06), transparent 60%),
      var(--bg);
    color:var(--ink); font-family:var(--sans); line-height:var(--lh-body); font-size:15px;
    -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column;
  }
  .wrap{max-width:var(--maxw-read); margin:0 auto; padding:0 var(--gutter); width:100%}

  .nav{position:sticky; top:0; z-index:var(--z-nav);
    background:rgba(251,251,253,.72); backdrop-filter:saturate(160%) blur(18px);
    -webkit-backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--line)}
  .nav .row{display:flex; align-items:center; gap:16px; height:64px}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:500; font-size:15px}
  .brand .mark{width:26px; height:26px; border-radius:7px}
  .brand .tld{color:var(--dim)}

  .stage{flex:1; display:grid; place-items:center; padding:46px 0 70px}
  .vcol{width:100%; max-width:520px}

  .vcard{border:1px solid var(--line2); border-radius:var(--r-xl); background:linear-gradient(180deg,var(--panel),var(--bg2));
    box-shadow:var(--shadow-lg); padding:36px 32px 28px}
  .vcard .okic{width:52px; height:52px; margin:0 auto 16px; border-radius:14px; display:grid; place-items:center;
    background:var(--ok-bg); border:1px solid var(--ok-line)}
  .vcard .okic svg{width:25px; height:25px; color:var(--ok)}
  .vcard h1{font-family:var(--sans); font-weight:800; font-size:26px; letter-spacing:0; text-align:center; line-height:1.12}
  .vcard .sub{color:var(--mut); font-size:13.5px; margin-top:9px; text-align:center; line-height:1.6}
  .vcard .sub b{color:var(--ink2); font-weight:500}

  /* the ONE-TIME key reveal — the single most security-sensitive moment in the UI */
  .keybox{margin-top:22px; border:1px solid var(--warn-line); border-radius:var(--r-lg); overflow:hidden;
    background:linear-gradient(180deg,var(--warn-bg),transparent 70%)}
  .keybox .kb-head{display:flex; align-items:center; gap:8px; padding:11px 15px; border-bottom:1px solid var(--line);
    font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase; color:var(--warn)}
  .keybox .kb-head svg{width:13px; height:13px; flex:none}
  .keyrow{display:flex; align-items:center; gap:10px; padding:14px 15px}
  .keyrow code{flex:1; min-width:0; font-family:var(--mono); font-size:13px; color:var(--ink); letter-spacing:0;
    overflow-x:auto; white-space:nowrap; padding:2px 0}
  .copykey{font-family:var(--sans); font-weight:600; font-size:13px; color:#fff; background:var(--seal-cta);
    border:1px solid var(--seal); border-radius:9px; padding:9px 15px; cursor:pointer; flex:none;
    display:inline-flex; align-items:center; gap:7px; box-shadow:var(--shadow-seal)}
  .copykey:hover{filter:brightness(1.08)}
  .copykey.done{background:var(--panel3); border-color:var(--ok-line); color:var(--ok); box-shadow:none}
  .copykey svg{width:14px; height:14px}
  .kb-foot{padding:11px 15px 13px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px;
    color:var(--mut); line-height:1.65}
  .kb-foot b{color:var(--warn); font-weight:500}
  .kb-foot a{color:var(--seal2)}

  /* next steps — hand-off to cold-start → fund → first run */
  .next{margin-top:22px}
  .next h2{font-family:var(--serif); font-weight:500; font-size:18px; color:var(--ink); margin-bottom:12px}
  .steps{display:grid; gap:9px}
  .step{display:flex; gap:12px; align-items:center; border:1px solid var(--line2); border-radius:12px;
    background:var(--panel); padding:13px 15px; transition:border-color .15s}
  a.step:hover{border-color:var(--seal-line)}
  .step .n{width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center;
    font-family:var(--mono); font-size:11.5px; color:var(--seal2); background:var(--seal-bg); border:1px solid var(--seal-line)}
  .step.done .n{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line)}
  .step b{font-size:13.5px; color:var(--ink); font-weight:600; display:block}
  .step p{font-size:12px; color:var(--mut); margin-top:1px; line-height:1.5}
  .step .go{margin-left:auto; flex:none; font-family:var(--mono); font-size:11.5px; color:var(--seal2)}
  .step.done .go{color:var(--ok)}

  .vfoot{margin-top:20px; text-align:center; font-family:var(--mono); font-size:11px; color:var(--dim); line-height:1.8}
  .vfoot a{color:var(--mut); border-bottom:1px solid var(--line2)}
  .vfoot a:hover{color:var(--ink)}

  /* ========== EXPIRED / USED TOKEN STATE (reference variant) ========== */
  .variant-h{margin:40px 0 10px; font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase; color:var(--dim)}
  .vcard.expired .okic{background:var(--danger-bg); border-color:var(--danger-line)}
  .vcard.expired .okic svg{color:var(--danger)}
  .expform{margin-top:20px; text-align:left}
  .expform label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:0; text-transform:uppercase; color:var(--dim); margin-bottom:7px}
  .expform .rowx{display:flex; gap:9px}
  .expform input[type=email]{flex:1; min-width:0; background:var(--panel2); border:1px solid var(--line2); border-radius:10px;
    color:var(--ink); font-family:var(--sans); font-size:14.5px; padding:12px 14px}
  .expform input[type=email]:focus{border-color:var(--line3); background:var(--panel3)}
  .expnote{margin-top:12px; font-family:var(--mono); font-size:11px; color:var(--dim); line-height:1.7; text-align:center}

  footer{border-top:1px solid var(--line); padding:30px 0 44px; background:var(--bg2)}
  .foot-bar{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
  .foot-links{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:12px}
  .foot-links a{color:var(--mut)} .foot-links a:hover{color:var(--ink)}
  .pay-lockup{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--mut)}
  .pay-lockup svg{width:15px; height:15px; color:var(--ok); flex:none}
  .pay-lockup b{color:var(--ink2); font-weight:500}

  @media (max-width:680px){
    .wrap{padding:0 18px}
    .vcard{padding:30px 20px 22px}
    .keyrow{flex-direction:column; align-items:stretch}
    .copykey{justify-content:center}
    .expform .rowx{flex-direction:column}
  }

/* ===== from publish.html ===== */
body{
    background:
      radial-gradient(1100px 560px at 92% -8%, rgba(0,113,227,.07), transparent 58%),
      var(--bg);
    color:var(--ink); font-family:var(--sans); line-height:var(--lh-body); font-size:15px;
    -webkit-font-smoothing:antialiased; min-height:100vh;
  }
  .wrap{max-width:var(--maxw-read); margin:0 auto; padding:0 var(--gutter)}

  /* ============ NAV (shared shell) ============ */
  .nav{position:sticky; top:0; z-index:var(--z-nav);
    background:rgba(251,251,253,.72); backdrop-filter:saturate(160%) blur(18px);
    -webkit-backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--line)}
  .nav .row{display:flex; align-items:center; gap:16px; height:64px}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:500; font-size:15px}
  .brand .mark{width:26px; height:26px; border-radius:7px}
  .brand .tld{color:var(--dim)}
  .crumb{font-family:var(--mono); font-size:12px; color:var(--dim); display:flex; align-items:center; gap:8px}
  .crumb a:hover{color:var(--mut)}
  .crumb .sep{color:var(--faint)}
  .nav-right{margin-left:auto; display:flex; align-items:center; gap:14px}
  .nav-link{font-family:var(--mono); font-size:12.5px; color:var(--mut)} .nav-link:hover{color:var(--ink)}
  .avatar{width:30px; height:30px; border-radius:50%; background:linear-gradient(140deg,#2a2a30,#161619);
    border:1px solid var(--line2); display:grid; place-items:center; font-family:var(--mono); font-size:12px; color:var(--ink2)}

  /* ============ PAGE HEAD ============ */
  .head{padding:40px 0 8px}
  .head h1{font-family:var(--sans); font-weight:800; font-size:var(--t-h1); letter-spacing:0; line-height:1.08}
  .head p{color:var(--mut); font-size:15.5px; margin-top:10px; max-width:62ch}
  .head p b{color:var(--ink2); font-weight:500}
  .sellprops{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
  .sprop{display:inline-flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line2);
    border-radius:var(--r-pill); padding:7px 13px; font-size:12.5px; color:var(--mut)}
  .sprop svg{width:14px; height:14px; color:var(--ok); flex:none}
  .sprop b{color:var(--ink); font-weight:500}

  /* ============ LAYOUT ============ */
  .layout{display:grid; grid-template-columns:1fr 350px; gap:30px; padding:26px 0 80px; align-items:start}
  .col-main{min-width:0}
  .col-side{position:sticky; top:80px; display:flex; flex-direction:column; gap:18px}

  .block{margin-bottom:30px}
  .block > h2{font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:0; margin-bottom:14px;
    display:flex; align-items:baseline; gap:11px; color:var(--ink)}
  .block > h2 .num{font-family:var(--mono); font-size:13px; color:var(--seal2); font-weight:500}
  .block > h2 .label{margin-left:auto; align-self:center}

  /* ============ FORM ============ */
  .panel{border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--panel); padding:20px}
  .fl{margin-bottom:16px}
  .fl:last-child{margin-bottom:0}
  .fl label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:0; text-transform:uppercase;
    color:var(--dim); margin-bottom:7px}
  .fl label .req{color:var(--seal2); font-size:10px}
  .fl label .optn{color:var(--dim); font-size:10px}
  .fl .hint{font-size:12px; color:var(--dim); margin-top:6px; line-height:1.55}
  .fl input[type=text], .fl textarea, .fl select{width:100%; background:var(--panel2); border:1px solid var(--line2);
    border-radius:10px; color:var(--ink); font-family:var(--sans); font-size:14px; padding:11px 12px}
  .fl textarea{resize:vertical; line-height:1.55}
  .fl textarea.body{font-family:var(--mono); font-size:12.5px; min-height:200px; line-height:1.65}
  .fl input:focus, .fl textarea:focus, .fl select:focus{border-color:var(--line3); background:var(--panel3)}
  .fl select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239a9897' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; cursor:pointer}
  .charct{font-family:var(--mono); font-size:10.5px; color:var(--dim); text-align:right; margin-top:4px}

  /* sealed-body framing around the IP textarea */
  .bodywrap{border:1px solid var(--seal-line); border-radius:var(--r-lg); overflow:hidden;
    background:linear-gradient(180deg,var(--seal-bg),transparent 50%)}
  .bodywrap .bw-head{display:flex; align-items:center; gap:9px; padding:11px 15px; border-bottom:1px solid var(--line)}
  .bodywrap .bw-head svg{width:15px; height:15px; color:var(--seal2); flex:none}
  .bodywrap .bw-head span{font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase; color:var(--seal2)}
  .bodywrap .bw-in{padding:13px 15px 15px}
  .bodywrap textarea{background:var(--bg2)}
  .bodywrap .bw-foot{padding:0 15px 13px; font-family:var(--mono); font-size:11px; color:var(--mut); line-height:1.65}
  .bodywrap .bw-foot b{color:var(--ink2); font-weight:500}

  /* schema EDITOR — the typed-schema table, editable */
  .schemaed{border:1px solid var(--line2); border-radius:var(--r-lg); overflow:hidden; background:var(--panel)}
  .schemaed .srow{display:grid; grid-template-columns:150px 120px 1fr 34px; gap:10px; padding:11px 14px;
    border-top:1px solid var(--line); align-items:center}
  .schemaed .srow.hd{border-top:0; background:var(--panel2); padding:10px 14px}
  .schemaed .srow.hd span{font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase; color:var(--dim)}
  .schemaed input, .schemaed select{width:100%; background:var(--bg2); border:1px solid var(--line2); border-radius:8px;
    color:var(--ink); font-size:12.5px; padding:8px 10px}
  .schemaed input.fname{font-family:var(--mono)}
  .schemaed select{font-family:var(--mono); font-size:11.5px; appearance:none; padding-right:26px; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%239a9897' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center}
  .schemaed input:focus, .schemaed select:focus{border-color:var(--line3)}
  .delrow{width:30px; height:30px; border-radius:8px; border:1px solid var(--line2); background:var(--panel2);
    color:var(--dim); cursor:pointer; display:grid; place-items:center}
  .delrow:hover{color:var(--danger); border-color:var(--danger-line)}
  .delrow svg{width:13px; height:13px}
  .addrow{display:flex; align-items:center; gap:7px; width:100%; padding:11px 14px; border-top:1px solid var(--line);
    background:none; border-left:0; border-right:0; border-bottom:0; color:var(--seal2); font-family:var(--mono);
    font-size:11.5px; cursor:pointer; text-align:left}
  .addrow:hover{background:var(--panel2)}
  .addrow svg{width:13px; height:13px}

  /* pricing form — the cost ledger, as an editor */
  .priceform{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .moneyin{position:relative; display:flex; align-items:center}
  .moneyin .cur{position:absolute; left:13px; font-family:var(--mono); font-size:14px; color:var(--dim); pointer-events:none}
  .moneyin input{width:100%; background:var(--panel2); border:1px solid var(--line2); border-radius:10px;
    color:var(--ink); font-family:var(--mono); font-size:14px; padding:11px 12px 11px 30px}
  .moneyin input:focus{border-color:var(--line3); background:var(--panel3)}
  .moneyin input[aria-invalid="true"]{border-color:var(--danger-line); background:var(--danger-bg)}
  .floor-err{display:none; margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--danger); align-items:flex-start; gap:6px; grid-column:1/-1}
  .floor-err.show{display:flex}
  .floor-err svg{width:12px; height:12px; flex:none; margin-top:1px}
  .ledger{margin-top:14px; border:1px solid var(--line); border-radius:11px; background:var(--bg2); overflow:hidden; grid-column:1/-1}
  .ledger .lr{display:flex; justify-content:space-between; padding:9px 14px; font-size:12.5px; border-top:1px solid var(--line)}
  .ledger .lr:first-child{border-top:0}
  .ledger .lr span{color:var(--mut); font-family:var(--mono); font-size:11.5px}
  .ledger .lr b{color:var(--ink2); font-family:var(--mono); font-weight:500}
  .ledger .lr.total{background:var(--panel2)}
  .ledger .lr.total span{color:var(--ink); font-size:13px}
  .ledger .lr.total b{color:var(--ok); font-size:14px}
  .floornote{font-family:var(--mono); font-size:10.5px; color:var(--dim); margin-top:8px; grid-column:1/-1; line-height:1.6}
  .floornote b{color:var(--mut); font-weight:500}

  /* submit rail */
  .pubrail{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:6px}
  .pubrail .btn-primary svg{width:15px; height:15px}
  .pubnote{font-family:var(--mono); font-size:11px; color:var(--dim); line-height:1.6}
  .pubnote a{color:var(--seal2)}

  /* success / error states */
  .pubresult{display:none; margin-top:18px; border-radius:var(--r-lg); overflow:hidden}
  .pubresult.show{display:block}
  .pubresult .ph{display:flex; align-items:center; gap:9px; padding:13px 16px; font-size:13.5px; font-weight:600}
  .pubresult .pb{padding:14px 16px; font-size:13px; color:var(--mut); line-height:1.6}
  .pubresult.okp{border:1px solid var(--ok-line); background:linear-gradient(180deg,var(--ok-bg),transparent)}
  .pubresult.okp .ph{color:var(--ok)}
  .pubresult.errp{border:1px solid var(--danger-line); background:linear-gradient(180deg,var(--danger-bg),transparent)}
  .pubresult.errp .ph{color:var(--danger)}
  .pubresult .ph svg{width:16px; height:16px; flex:none}
  .pubresult .pb b{color:var(--ink); font-weight:600}
  .pubresult .pb code{font-family:var(--mono); font-size:.9em; color:var(--ink2); background:var(--panel2); border:1px solid var(--line); border-radius:5px; padding:1px 6px}
  .pubresult .pb a{color:var(--seal2); font-weight:600}
  .pubresult .pacts{display:flex; gap:9px; padding:0 16px 15px}
  .pubresult .pacts .btn-ghost{font-size:12.5px; padding:8px 13px}

  /* ============ SIDE: live listing preview + containment promise ============ */
  .sidecard{border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--panel); padding:16px 18px}
  .sidecard h4{font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase; color:var(--dim); margin-bottom:12px}

  /* mini live card preview (mirrors catalog card) */
  .prevcard{border:1px solid var(--line2); border-radius:var(--r); background:var(--bg2); padding:15px}
  .prevcard .pc-top{display:flex; gap:10px; align-items:flex-start}
  .prevcard .pc-ico{width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center;
    background:linear-gradient(180deg,#fff,#f5f5f7); border:1px solid var(--line2)}
  .prevcard .pc-ico svg{width:18px; height:18px}
  .prevcard .pc-name{font-weight:700; font-size:14px; color:var(--ink); line-height:1.25; word-break:break-word}
  .prevcard .pc-handle{font-family:var(--mono); font-size:10.5px; color:var(--dim); margin-top:2px}
  .prevcard .pc-desc{color:var(--mut); font-size:12px; line-height:1.5; margin-top:10px; min-height:36px; word-break:break-word}
  .prevcard .pc-badges{display:flex; flex-wrap:wrap; gap:5px; margin-top:10px}
  .prevcard .b{display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:9.5px; letter-spacing:0;
    padding:3px 7px; border-radius:var(--r-pill); border:1px solid var(--line2); line-height:1; color:var(--mut); background:var(--panel2)}
  .prevcard .b.modeA{color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line)}
  .prevcard .b.modeB{color:var(--seal2); background:var(--seal-bg); border-color:var(--seal-line)}
  .prevcard .pc-foot{display:flex; align-items:baseline; justify-content:space-between; margin-top:12px; padding-top:11px; border-top:1px solid var(--line)}
  .prevcard .pc-amt{font-family:var(--mono); font-size:15px; color:var(--ink)}
  .prevcard .pc-amt span{color:var(--dim); font-size:10.5px}
  .prevcard .pc-trust{display:flex; align-items:center; gap:6px; margin-top:10px; font-family:var(--mono); font-size:9.5px; color:var(--dim)}
  .prevcard .pc-trust .lk{width:5px; height:5px; border-radius:50%; background:var(--ok); box-shadow:0 0 6px var(--ok); flex:none}
  .prevnote{font-family:var(--mono); font-size:10.5px; color:var(--dim); margin-top:10px; line-height:1.6}

  /* containment promise rows (live preview of what buyers see) */
  .promise .row{display:flex; gap:10px; align-items:flex-start; padding:8px 0}
  .promise .row svg{width:15px; height:15px; color:var(--ok); flex:none; margin-top:2px}
  .promise .row.seal svg{color:var(--seal2)}
  .promise .row b{font-size:13px; color:var(--ink); font-weight:600; display:block}
  .promise .row p{font-size:12px; color:var(--mut); line-height:1.5; margin-top:2px}
  .promise .pfoot{font-family:var(--mono); font-size:10.5px; color:var(--dim); border-top:1px solid var(--line); margin-top:10px; padding-top:10px; line-height:1.65}
  .promise .pfoot a{color:var(--seal2)}

  footer{border-top:1px solid var(--line); padding:36px 0 56px; background:var(--bg2)}
  .foot-bar{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
  .foot-links{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:12px}
  .foot-links a{color:var(--mut)} .foot-links a:hover{color:var(--ink)}
  .pay-lockup{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--mut)}
  .pay-lockup svg{width:15px; height:15px; color:var(--ok); flex:none}
  .pay-lockup b{color:var(--ink2); font-weight:500}

  @media (max-width:920px){
    .layout{grid-template-columns:1fr; gap:24px}
    .col-side{position:relative; top:0}
    .priceform{grid-template-columns:1fr}
  }
  @media (max-width:680px){
    .wrap{padding:0 18px}
    .crumb{display:none}
    .schemaed .srow{grid-template-columns:1fr 1fr; row-gap:8px}
    .schemaed .srow.hd{display:none}
    .schemaed .srow input.fdesc-in{grid-column:1/-1}
  }

/* ===== from account.html ===== */
body{
    background:
      radial-gradient(1000px 540px at 88% -10%, rgba(0,113,227,.06), transparent 58%),
      var(--bg);
    color:var(--ink); font-family:var(--sans); line-height:var(--lh-body); font-size:15px;
    -webkit-font-smoothing:antialiased; min-height:100vh;
  }
  .wrap{max-width:var(--maxw-read); margin:0 auto; padding:0 var(--gutter)}

  .nav{position:sticky; top:0; z-index:var(--z-nav);
    background:rgba(251,251,253,.72); backdrop-filter:saturate(160%) blur(18px);
    -webkit-backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--line)}
  .nav .row{display:flex; align-items:center; gap:16px; height:64px}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:500; font-size:15px}
  .brand .mark{width:26px; height:26px; border-radius:7px}
  .brand .tld{color:var(--dim)}
  .crumb{font-family:var(--mono); font-size:12px; color:var(--dim); display:flex; align-items:center; gap:8px}
  .crumb a:hover{color:var(--mut)} .crumb .sep{color:var(--faint)}
  .nav-right{margin-left:auto; display:flex; align-items:center; gap:14px}
  .nav-link{font-family:var(--mono); font-size:12.5px; color:var(--mut)} .nav-link:hover{color:var(--ink)}
  .wallet{display:inline-flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--line2);
    border-radius:var(--r-pill); padding:6px 7px 6px 13px}
  .wallet .bal{font-family:var(--mono); font-size:13px; color:var(--ink)}
  .wallet .bal b{color:var(--ok); font-weight:500}
  .wallet .topup{font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink); background:var(--panel3);
    border:1px solid var(--line2); border-radius:var(--r-pill); padding:4px 11px}
  .wallet .topup:hover{border-color:var(--seal-line); color:var(--seal2)}

  .head{padding:40px 0 8px}
  .head h1{font-family:var(--sans); font-weight:800; font-size:var(--t-h1); letter-spacing:0; line-height:1.08}
  .head p{color:var(--mut); font-size:15px; margin-top:10px}
  .head p b{color:var(--ink2); font-weight:500}

  .stack{display:grid; gap:26px; padding:26px 0 80px; max-width:760px}
  .block > h2{font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:0; margin-bottom:14px;
    display:flex; align-items:baseline; gap:11px; color:var(--ink)}
  .block > h2 .num{font-family:var(--mono); font-size:13px; color:var(--seal2); font-weight:500}
  .block > h2 .label{margin-left:auto; align-self:center}

  .panel{border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--panel); overflow:hidden}
  .prow{display:flex; align-items:center; gap:14px; padding:15px 20px; border-top:1px solid var(--line); flex-wrap:wrap}
  .prow:first-child{border-top:0}
  .prow .pl{flex:1; min-width:180px}
  .prow .pl b{font-size:14px; color:var(--ink); font-weight:600; display:block}
  .prow .pl p{font-size:12.5px; color:var(--mut); margin-top:2px; line-height:1.5}
  .prow .pl p code{font-family:var(--mono); font-size:.9em; color:var(--ink2)}
  .btn-sm{font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--ink); background:var(--panel3);
    border:1px solid var(--line2); border-radius:9px; padding:8px 14px; cursor:pointer; transition:all .15s}
  .btn-sm:hover{border-color:var(--line3)}
  .btn-sm.danger{color:var(--danger); border-color:var(--danger-line); background:transparent}
  .btn-sm.danger:hover{background:var(--danger-bg)}

  /* keys table */
  .twrap{overflow-x:auto}
  table.tbl{width:100%; border-collapse:collapse; font-size:13px; min-width:620px}
  .tbl th{font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase; color:var(--dim);
    text-align:left; font-weight:500; padding:11px 18px; border-bottom:1px solid var(--line2); white-space:nowrap; background:var(--panel2)}
  .tbl td{padding:13px 18px; border-bottom:1px solid var(--line); color:var(--mut); vertical-align:middle}
  .tbl tbody tr:last-child td{border-bottom:0}
  .tbl td.keycell{font-family:var(--mono); font-size:12.5px; color:var(--ink)}
  .tbl td.keycell small{display:block; color:var(--dim); font-size:10.5px; margin-top:2px; font-family:var(--mono)}
  .kstat{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px;
    border-radius:var(--r-pill); padding:3px 9px; border:1px solid var(--line2)}
  .kstat.active{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line)}
  .kstat.revoked{color:var(--dim); background:var(--panel2)}
  .tbl .kacts{display:flex; gap:7px; justify-content:flex-end}
  tr.is-revoked td{opacity:.55}
  tr.is-revoked td .kacts{visibility:hidden}

  /* fresh-key reveal (after rotate) — same one-time pattern as auth-verify */
  .keybox{margin:14px 18px 16px; border:1px solid var(--warn-line); border-radius:var(--r-lg); overflow:hidden;
    background:linear-gradient(180deg,var(--warn-bg),transparent 70%); display:none}
  .keybox.show{display:block}
  .keybox .kb-head{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line);
    font-family:var(--mono); font-size:10.5px; letter-spacing:0; text-transform:uppercase; color:var(--warn)}
  .keybox .kb-head svg{width:13px; height:13px; flex:none}
  .keyrow{display:flex; align-items:center; gap:10px; padding:12px 14px}
  .keyrow code{flex:1; min-width:0; font-family:var(--mono); font-size:12.5px; color:var(--ink); overflow-x:auto; white-space:nowrap}
  .copykey{font-family:var(--sans); font-weight:600; font-size:12.5px; color:#fff; background:var(--seal-cta);
    border:1px solid var(--seal); border-radius:8px; padding:8px 13px; cursor:pointer; flex:none;
    display:inline-flex; align-items:center; gap:6px}
  .copykey:hover{filter:brightness(1.08)}
  .copykey.done{background:var(--panel3); border-color:var(--ok-line); color:var(--ok)}
  .copykey svg{width:13px; height:13px}
  .kb-foot{padding:10px 14px 12px; border-top:1px solid var(--line); font-family:var(--mono); font-size:10.5px;
    color:var(--mut); line-height:1.65}
  .kb-foot b{color:var(--warn); font-weight:500}

  /* spend guard */
  .capline{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--mut)}
  .capline b{color:var(--ink2); font-weight:500}

  /* modal (revoke confirm) */
  .modalwrap{position:fixed; inset:0; z-index:var(--z-modal); display:none; align-items:center; justify-content:center;
    background:var(--overlay); padding:20px}
  .modalwrap.show{display:flex}
  .modal{width:100%; max-width:440px; background:linear-gradient(180deg,var(--panel),var(--bg2));
    border:1px solid var(--line2); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:26px}
  .modal h2{font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:0}
  .modal p{color:var(--mut); font-size:13.5px; line-height:1.6; margin-top:10px}
  .modal p code{font-family:var(--mono); font-size:.9em; color:var(--ink2); background:var(--panel2); border:1px solid var(--line); border-radius:5px; padding:1px 6px}
  .modal .macts{display:flex; gap:10px; justify-content:flex-end; margin-top:22px}
  .modal .btn-danger{font-family:var(--sans); font-weight:600; font-size:13.5px; color:#fff; background:var(--seal-cta);
    border:1px solid var(--seal); border-radius:9px; padding:10px 16px; cursor:pointer}
  .modal .btn-danger:hover{filter:brightness(1.08)}

  footer{border-top:1px solid var(--line); padding:36px 0 56px; background:var(--bg2)}
  .foot-bar{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
  .foot-links{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:12px}
  .foot-links a{color:var(--mut)} .foot-links a:hover{color:var(--ink)}
  .pay-lockup{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--mut)}
  .pay-lockup svg{width:15px; height:15px; color:var(--ok); flex:none}
  .pay-lockup b{color:var(--ink2); font-weight:500}

  @media (max-width:680px){
    .wrap{padding:0 18px}
    .crumb{display:none}
    .wallet .bal{display:none}
    .keyrow{flex-direction:column; align-items:stretch}
  }

/* ===== Builder glue (app-only utilities; NOT design decisions — visually
   neutral helpers for dynamic states. Everything visual above comes from the
   Designer references verbatim.) ===== */
.vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.emptystate { text-align:center; color:var(--mut); padding:42px 20px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); grid-column:1/-1; }
.emptystate b { color:var(--ink); display:block; margin-bottom:4px; }
.skl-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  position:relative; overflow:hidden; }
.skl-card::after { content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.04) 50%, transparent 70%);
  animation:glue-shimmer 1.4s infinite; }
@keyframes glue-shimmer { from { transform:translateX(-100%);} to { transform:translateX(100%);} }
.result .output { background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; font:12.5px/1.55 var(--mono); color:var(--ink);
  white-space:pre-wrap; word-break:break-word; max-height:340px; overflow:auto; }
footer .foot-bar { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  align-items:center; padding:22px 0 30px; border-top:1px solid var(--line);
  color:var(--dim); font-size:var(--t-xs); }
footer .foot-links { display:flex; gap:16px; flex-wrap:wrap; }
footer .foot-links a {
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
footer .foot-links a:hover { color:var(--ink); }
footer .pay-lockup { display:inline-flex; align-items:center; gap:8px; }
footer .pay-lockup svg { width:14px; height:14px; }
main { display:block; padding:34px 0 60px; }
main .wrap, footer .wrap, .nav .wrap { max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

/* Live app responsive guardrail.
   The component layer above is extracted from several reference pages, and
   later reference blocks intentionally redefine shared primitives like
   `.wrap`. Keep this app-only override last so narrow viewports use the
   intended mobile shell instead of a cropped desktop layout. */
.mini .why,
.mini .pr {
  display:block;
  line-height:1.45;
}

.integrity-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}

.integrity-tile {
  min-width:0;
  min-height:132px;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:7px;
  padding:16px;
  border:1px solid var(--line2);
  border-radius:var(--r-lg);
  background:var(--material);
  box-shadow:var(--shadow-sm);
}

.integrity-icon {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid var(--line2);
  border-radius:10px;
  color:var(--seal);
  background:var(--material-strong);
}

.integrity-icon svg {
  width:16px;
  height:16px;
}

.integrity-tile[data-integrity="screened"] .integrity-icon,
.integrity-tile[data-integrity="source-fields"] .integrity-icon {
  color:var(--ok);
}

.integrity-value {
  color:var(--ink);
  font-size:22px;
  line-height:1.08;
  letter-spacing:0;
  font-weight:var(--fw-bold);
  overflow-wrap:anywhere;
}

.integrity-note {
  color:var(--mut);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.integrity-note a {
  color:var(--seal);
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

.integrity-note a:hover {
  text-decoration:underline;
}

@media (max-width:768px) {
  main { padding:24px 0 48px; }
  main .wrap,
  footer .wrap,
  .nav .wrap {
    padding-left:18px;
    padding-right:18px;
  }

  .nav .row {
    flex-wrap:wrap;
    height:auto;
    padding:12px 0;
    gap:12px;
  }
  .brand,
  .nav-link,
  .nav-cta {
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .nav-search {
    order:3;
    flex:0 0 100%;
    max-width:none;
  }
  .nav-search input {
    min-height:44px;
  }
  .nav-right { gap:10px; }

  .skip {
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }

  .head { padding:28px 0 4px; }
  .head h1 {
    max-width:100%;
    font-size:clamp(27px, 8vw, 32px);
    line-height:1.08;
  }
  .head p {
    max-width:100%;
    font-size:15px;
  }

  .trust-strip {
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    align-items:stretch;
  }
  .integrity-strip {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .integrity-tile {
    min-height:124px;
    padding:14px;
  }
  .integrity-value {
    font-size:20px;
  }
  .tcred,
  .trust-method {
    width:100%;
    min-width:0;
    max-width:100%;
    min-height:44px;
    white-space:normal;
    overflow-wrap:break-word;
  }
  .tcred {
    min-height:44px;
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    align-items:center;
    border-radius:14px;
    line-height:1.35;
  }
  .tcred.verified-signal,
  .tcred.policy-signal { grid-template-columns:auto minmax(0, 1fr) auto; }
  .tcred-copy b { white-space:nowrap; }
  .tcred .v { justify-self:end; align-self:center; margin-left:8px; white-space:nowrap; }

  .firstfund {
    flex-direction:column;
    align-items:flex-start;
    padding:18px;
  }
  .firstfund a.ff-cta {
    width:100%;
    align-self:stretch;
  }

  .starthere-h {
    display:block;
  }
  .starthere-h .sub {
    display:block;
    margin-top:4px;
    line-height:1.5;
  }
  .rail {
    grid-template-columns:minmax(0, 1fr);
  }
  .mini {
    min-width:0;
  }
  .mini > span:last-child,
  .mini b,
  .mini .why,
  .mini .pr {
    min-width:0;
    overflow-wrap:anywhere;
  }

  .toolbar {
    align-items:stretch;
  }
  .seg {
    width:100%;
    overflow-x:auto;
  }
  .seg button {
    flex:0 0 auto;
    min-height:44px;
  }
  .chips {
    width:100%;
  }
  .fchip,
  .sortsel select,
  .openbtn {
    min-height:44px;
  }
  .tab,
  .codebar .copy,
  .run-cta,
  .sample {
    min-height:44px;
  }
  .tab,
  .codebar .copy,
  .sample {
    display:inline-flex;
    align-items:center;
  }
  .toolbar .spacer {
    display:none;
  }
  .sortsel,
  .sortsel select {
    width:100%;
  }

  .grid {
    grid-template-columns:minmax(0, 1fr);
  }
  .card {
    min-width:0;
    padding:18px;
  }
  .card-name,
  .card-handle,
  .card-trust,
  .badges {
    min-width:0;
    overflow-wrap:anywhere;
  }
  .card-foot {
    gap:14px;
  }
}

@media (max-width:430px) {
  .integrity-strip {
    grid-template-columns:minmax(0,1fr);
  }
  .integrity-tile {
    min-height:auto;
  }
}

/* ===== Builder polish: Apple-grade material texture override =====
   The reference extraction above still contains several page-specific glow
   backgrounds. The live app gets one quieter material layer here: neutral
   ceramic depth, fine system texture, translucent panels, and softer shadows.
   Layout, copy, and trust semantics are unchanged. */
body{
  background:
    var(--page-texture),
    var(--page-depth);
  background-attachment:fixed,fixed;
}
.nav{
  background:var(--material-nav);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
}
.card,
.mini,
.integrity-tile,
.step,
.col,
.legend,
.trust,
.privacy,
.schema,
.run,
.result,
.nextrun,
.getback,
.seller,
.sidecard,
.balcard,
.varcard,
.usage,
.ctl,
.fund,
.authcard,
.vcard,
.panel,
.prevcard,
.skl-card,
.emptystate{
  background:var(--material);
  border-color:var(--line2);
}
.card-ico,
.mini-ic,
.dico,
.trust-list .tr .ic,
.run-head,
.fund-head,
.balcard .bc-top{
  background:var(--material-strong);
}
.toolbar-sticky{
  background:linear-gradient(180deg,rgba(245,245,247,.94) 58%,rgba(245,245,247,0));
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
}