/* EN design layer 1 */
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:400;src:url('/fonts/manrope-v20-cyrillic_latin-regular.woff2') format('woff2');}
  @font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:500;src:url('/fonts/manrope-v20-cyrillic_latin-500.woff2') format('woff2');}
  @font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:600;src:url('/fonts/manrope-v20-cyrillic_latin-600.woff2') format('woff2');}
  @font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:700;src:url('/fonts/manrope-v20-cyrillic_latin-700.woff2') format('woff2');}
  @font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:800;src:url('/fonts/manrope-v20-cyrillic_latin-800.woff2') format('woff2');}
  @font-face{font-display:swap;font-family:'IBM Plex Mono';font-style:normal;font-weight:400;src:url('/fonts/ibm-plex-mono-v20-cyrillic_latin-regular.woff2') format('woff2');}
  @font-face{font-display:swap;font-family:'IBM Plex Mono';font-style:normal;font-weight:500;src:url('/fonts/ibm-plex-mono-v20-cyrillic_latin-500.woff2') format('woff2');}
  @font-face{font-display:swap;font-family:'IBM Plex Mono';font-style:normal;font-weight:600;src:url('/fonts/ibm-plex-mono-v20-cyrillic_latin-600.woff2') format('woff2');}
  @font-face{font-display:swap;font-family:'IBM Plex Mono';font-style:normal;font-weight:700;src:url('/fonts/ibm-plex-mono-v20-cyrillic_latin-700.woff2') format('woff2');}
  @font-face{font-display:swap;font-family:'Playfair Display';font-style:normal;font-weight:400;src:url('/fonts/playfair-display-v40-cyrillic_latin-regular.woff2') format('woff2');}
  @font-face{font-display:swap;font-family:'Playfair Display';font-style:normal;font-weight:700;src:url('/fonts/playfair-display-v40-cyrillic_latin-700.woff2') format('woff2');}
  @font-face{font-display:swap;font-family:'Playfair Display';font-style:normal;font-weight:800;src:url('/fonts/playfair-display-v40-cyrillic_latin-800.woff2') format('woff2');}
  @font-face{font-display:swap;font-family:'Dancing Script';font-style:normal;font-weight:700;src:url('/fonts/dancing-script-v29-latin-700.woff2') format('woff2');}
  :root{
    --bg:#0A0B10;
    --panel:#12161D;
    --panel-border:rgba(255,255,255,0.08);
    --panel-border-soft:rgba(255,255,255,0.06);
    --field-bg:#0B0E13;
    --paper:#F7F1E3;
    --paper-ink:#2A2418;
    --green:#16C784;
    --red:#EA3943;
    --gold:#F0B90B;
    --gold-soft:#FFD65C;
    --text:#F3F2EE;
    --muted:#98A0AC;
    --mono:'IBM Plex Mono', monospace;
    --sans:'Manrope', sans-serif;
    --r-sm:10px;
    --r-md:14px;
    --r-lg:20px;
    --r-xl:24px;
    --ease:cubic-bezier(.16,1,.3,1);
    --shadow-1:0 1px 0 rgba(255,255,255,0.05) inset, 0 1px 2px rgba(0,0,0,0.4);
    --shadow-2:0 1px 0 rgba(255,255,255,0.05) inset, 0 20px 40px -20px rgba(0,0,0,0.6), 0 6px 16px -8px rgba(0,0,0,0.45);
    --shadow-3:0 1px 0 rgba(255,255,255,0.06) inset, 0 32px 70px -24px rgba(0,0,0,0.65);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:
      radial-gradient(ellipse 900px 520px at 50% -12%, rgba(240,185,11,0.11), transparent 60%),
      radial-gradient(ellipse 700px 420px at 105% 105%, rgba(22,199,132,0.05), transparent 60%),
      var(--bg);
    color:var(--text);
    font-family:var(--sans);
    padding:40px 18px 72px;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  :focus-visible{outline:2px solid rgba(240,185,11,0.6); outline-offset:2px; border-radius:4px;}
  .wrap{max-width:640px; margin:0 auto;}
  .layout-grid{display:block;}
  .main-col{min-width:0;}
  .side-col{min-width:0;}
  .scenario-links{ max-width:480px; margin:40px auto 0; padding-top:28px; border-top:1px solid var(--panel-border-soft); }
  @media (min-width:980px){
    .wrap{max-width:1040px;}
    .layout-grid{
      display:grid;
      grid-template-columns:640px minmax(280px, 1fr);
      gap:32px;
      align-items:start;
    }
    .side-col{
      position:sticky;
      top:32px;
    }
    .side-col .live-feed{
      max-width:none;
      margin:0;
      padding:24px;
      border-top:none;
      background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 42%), var(--panel);
      border:1px solid var(--panel-border);
      border-radius:var(--r-xl);
      box-shadow:var(--shadow-2);
    }
    .side-col .live-feed-title{text-align:left;}
    /* The chip list is a reference directory (jump to any of 74 scenario
       pages), sitting under a live-data ticker card — a dashed border and
       no drop shadow keep it visually distinct as "browse", not "live". */
    .side-col .scenario-links{
      max-width:none; margin:20px 0 0; padding:20px;
      border-top:none; border:1px dashed var(--panel-border);
      border-radius:var(--r-xl); background:none;
    }
  }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gold);
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(240,185,11,0.08);
    border:1px solid rgba(240,185,11,0.18);
    padding:7px 14px 7px 12px;
    border-radius:999px;
    margin-bottom:18px;
    animation:fadeUp .5s var(--ease) both;
  }
  .eyebrow::before{content:"●"; color:var(--green); font-size:9px; animation:pulse 1.6s infinite;}
  @keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.25;}}
  h1{
    font-family:var(--sans);
    font-weight:800;
    font-size:clamp(30px, 6.6vw, 44px);
    line-height:1.06;
    letter-spacing:-0.035em;
    margin-bottom:14px;
    animation:fadeUp .5s var(--ease) .05s both;
  }
  h1 span{
    background:linear-gradient(135deg, var(--gold-soft), var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
 
    -webkit-box-decoration-break:clone; box-decoration-break:clone;
  }
  .sub{
    color:var(--muted);
    font-size:16px;
    line-height:1.6;
    margin-bottom:32px;
    max-width:50ch;
    animation:fadeUp .5s var(--ease) .1s both;
  }
  /* ---- hero visual: a static example "regret receipt" next to the intro text ---- */
  .hero-flex{ display:grid; grid-template-columns:1fr; gap:18px; }
  .hero-visual{ position:relative; display:flex; justify-content:center; align-items:center; padding-top:22px; }
  .hero-receipt-wrap{ width:170px; transform:rotate(-4deg); filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)); animation:fadeUp .5s var(--ease) both; }
  .hero-receipt-wrap .receipt{ padding:16px 13px 12px; }
  .hero-receipt-wrap 
/* Emotional receipt layer */
.receipt .r-title{
  font-weight:800;
  letter-spacing:0.12em;
}

.receipt-emotion{
  display:inline-block;
  margin:2px auto 8px;
  padding:3px 8px;
  border:1px dashed rgba(240,185,11,0.55);
  border-radius:999px;
  color:var(--gold);
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.r-title{ font-size:9px; margin-bottom:3px; }
  .hero-receipt-wrap .r-sub{ font-size:9px; margin-bottom:11px; }
  .hero-receipt-wrap .dashed{ margin:9px 0; }
  .hero-receipt-wrap .r-line{ font-size:10.5px; margin-bottom:4px; }
  .hero-receipt-wrap .r-big{ margin:11px 0 7px; }
  .hero-receipt-wrap .r-big .label{ font-size:8.5px; margin-bottom:3px; }
  .hero-receipt-wrap .r-big .num{ font-size:24px; }
  .hero-receipt-wrap .r-tier{ font-size:9px; margin-bottom:5px; }
  .hero-receipt-wrap .r-score-line{ font-size:8px; margin-bottom:5px; }
  .hero-receipt-wrap .r-mult{ font-size:9.5px; padding:3px 9px; }
  .hero-badge{
    position:absolute; top:-14px; right:-6px; z-index:2; background:var(--panel); border:1px solid var(--panel-border);
    border-radius:11px; padding:6px 10px; font-family:var(--sans); font-size:9.5px; color:var(--text);
    box-shadow:0 14px 30px -12px rgba(0,0,0,.6); transform:rotate(4deg); line-height:1.4; white-space:nowrap;
  }
  .hero-badge b{ color:var(--gold); font-family:var(--mono); }
  .hero-caption{ text-align:center; font-size:11px; color:var(--muted); margin-top:8px; }
  @media (min-width:700px){
    .hero-flex{ grid-template-columns:1fr 200px; gap:28px; align-items:center; }
    .hero-visual{ order:0; padding-top:0; }
    .hero-receipt-wrap{ width:200px; }
    .hero-receipt-wrap .receipt{ padding:22px 18px 16px; }
    .hero-receipt-wrap .r-title{ font-size:10px; margin-bottom:4px; }
    .hero-receipt-wrap .r-sub{ font-size:10px; margin-bottom:14px; }
    .hero-receipt-wrap .dashed{ margin:11px 0; }
    .hero-receipt-wrap .r-line{ font-size:11.5px; margin-bottom:6px; }
    .hero-receipt-wrap .r-big{ margin:13px 0 8px; }
    .hero-receipt-wrap .r-big .label{ font-size:9.5px; }
    .hero-receipt-wrap .r-big .num{ font-size:30px; }
    .hero-receipt-wrap .r-tier{ font-size:10.5px; }
    .hero-receipt-wrap .r-score-line{ font-size:9px; }
    .hero-receipt-wrap .r-mult{ font-size:10.5px; padding:4px 11px; }
    .hero-badge{ font-size:11.5px; padding:8px 13px; top:-16px; right:-10px; }
  }
  .live-feed{
    max-width:480px;
    margin:44px auto 0;
    padding-top:28px;
    border-top:1px solid var(--panel-border-soft);
  }
  .live-feed-title{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.1em;
    color:var(--muted);
    text-align:center;
    margin-bottom:16px;
  }
  .live-feed-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 14px;
    margin-bottom:6px;
    border-radius:12px;
    background:rgba(255,255,255,0.025);
    font-size:13px;
    color:var(--muted);
    animation:feedIn .4s ease;
    transition:background .2s var(--ease), transform .2s var(--ease);
  }
  .live-feed-row:hover{background:rgba(255,255,255,0.05); transform:translateY(-1px);}
  .live-feed-row:last-child{margin-bottom:0;}
  .live-feed-row b{color:var(--text);}
  .live-feed-row .fr-mult{
    margin-left:auto;
    font-family:var(--mono);
    font-weight:700;
    flex-shrink:0;
  }
  .live-feed-row .fr-mult.pos{color:#16C784;}
  .live-feed-row .fr-mult.neg{color:#EA3943;}
  @keyframes feedIn{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);} }
  /* Скрыта на десктопе/планшете — там все 10 строк и так помещаются нормально;
     показывается только в мобильном @media-блоке ниже, где список тикера
     сворачивается до топ-5. */
  .ticker-toggle{
    display:none;
    width:100%;
    margin-top:2px;
    padding:9px 10px;
    border:none;
    border-radius:10px;
    background:rgba(255,255,255,0.04);
    color:var(--muted);
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.04em;
    cursor:pointer;
    transition:background .2s var(--ease);
  }
  .ticker-toggle:hover{ background:rgba(255,255,255,0.08); }
  .ticker-toggle.tt-hide{ display:none !important; }
  .regret-counter{
    font-family:var(--mono);
    font-size:12px;
    color:var(--muted);
    margin-bottom:22px;
  }
  .regret-counter b{color:var(--gold); font-weight:700;}
  /* A quiet, one-line pointer toward My Portfolio for people who land
     straight on the calculator and might never notice the tab has a reason
     to exist beyond "what if" — hidden the moment someone's already using
     the portfolio (pfEntries.length>0) or has dismissed it once. Kept to a
     single line on purpose: this page already has a daily-regret box right
     below fighting for the same attention, and the mobile-compactness pass
     (see the @media block further down) means every extra pixel of height
     here is a pixel more scrolling on a phone. */
  .pf-promo{
    display:flex; align-items:flex-start; gap:12px; text-align:left;
    font-size:12.5px; color:var(--muted); line-height:1.5;
    /* Upgraded from a single centered line to a small feature card: this
       banner is now the homepage's only mention of the Portfolio tab's
       bento dashboard + CSV import, so it needs enough room to say what
       it actually does, not just that it exists. */
    background:linear-gradient(135deg, rgba(240,185,11,0.09), rgba(240,185,11,0.02));
    border:1px solid rgba(240,185,11,0.22);
    border-radius:var(--r-lg);
    padding:16px 34px 16px 16px;
    margin-bottom:20px;
    position:relative;
  }
  .pf-promo-icon{ font-size:22px; line-height:1; flex:0 0 auto; }
  .pf-promo-body{ flex:1 1 auto; min-width:0; }
  .pf-promo-title{ font-family:var(--sans); font-weight:800; font-size:14px; color:var(--text); margin-bottom:4px; }
  .pf-promo b{ color:var(--gold-soft); }
  .pf-promo-sub{ font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:10px; }
  .pf-promo #pfPromoBtn{
    display:inline-block; background:rgba(240,185,11,0.14); border:1px solid rgba(240,185,11,0.5);
    color:var(--gold-soft); font-family:var(--sans);
    font-weight:700; font-size:12.5px; cursor:pointer; padding:8px 14px; border-radius:999px; white-space:nowrap;
    transition:background .2s var(--ease);
  }
  .pf-promo #pfPromoBtn:hover{ background:rgba(240,185,11,0.24); }
  .pf-promo-close{
    position:absolute; right:6px; top:6px;
    background:none; border:none; color:var(--muted); font-size:15px;
    font-weight:700; cursor:pointer; padding:2px 8px; line-height:1;
  }
  .pf-promo-close:hover{ color:var(--text); }
  .faq{
    max-width:480px;
    margin:40px auto 0;
    padding-top:28px;
    border-top:1px solid var(--panel-border-soft);
  }
  .faq-title{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.1em;
    color:var(--muted);
    text-align:center;
    margin-bottom:16px;
    text-transform:uppercase;
  }
  .faq details{
    border-bottom:1px solid var(--panel-border-soft);
    padding:14px 2px;
  }
  .faq details:last-child{border-bottom:none;}
  .faq summary{
    cursor:pointer;
    font-weight:700;
    font-size:14px;
    color:var(--text);
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    transition:color .2s var(--ease);
  }
  .faq summary:hover{color:var(--gold);}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{
    content:"+";
    color:var(--gold);
    font-size:18px;
    flex-shrink:0;
    display:inline-block;
    transition:transform .25s var(--ease);
  }
  .faq details[open] summary::after{transform:rotate(45deg);}
  .faq p{
    font-size:13px;
    color:var(--muted);
    line-height:1.6;
    margin-top:10px;
  }
  .daily-regret{
    background:linear-gradient(135deg, rgba(240,185,11,0.09), rgba(240,185,11,0.02));
    border:1px solid rgba(240,185,11,0.22);
    border-radius:var(--r-lg);
    padding:18px 20px;
    margin-bottom:28px;
    box-shadow:0 1px 0 rgba(255,255,255,0.04) inset;
    animation:fadeUp .5s var(--ease) .15s both;
  }
  .daily-regret-label{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.12em;
    color:var(--gold);
    margin-bottom:8px;
    font-weight:700;
  }
  .daily-regret-text{
    font-size:14px;
    line-height:1.5;
    color:var(--text);
    margin-bottom:10px;
  }
  .daily-regret-text b{color:var(--gold);}
  .daily-regret-cta{
    background:none;
    border:none;
    color:var(--gold);
    font-family:var(--sans);
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    padding:0;
  }
  .daily-regret-cta:hover{text-decoration:underline;}
  /* ═══ Collapsible extra context under the daily story (03.09.2026) — shown
     collapsed by default (just the result line), with a toggle to reveal a
     bit more background on that specific scenario, instead of dumping all
     the text on the page at once. ═══ */
  .daily-regret-more{
    display:none;
    font-size:13.5px;
    line-height:1.6;
    color:var(--muted);
    margin:2px 0 12px;
    padding-top:10px;
    border-top:1px dashed rgba(240,185,11,0.22);
  }
  .daily-regret-more.open{display:block;}
  .daily-regret-toggle{
    background:none;
    border:none;
    color:var(--muted);
    font-family:var(--sans);
    font-weight:600;
    font-size:12px;
    cursor:pointer;
    padding:0;
    margin-bottom:10px;
    display:inline-flex;
    align-items:center;
    gap:5px;
  }
  .daily-regret-toggle:hover{color:var(--gold);}
  .daily-regret-toggle .chev{
    display:inline-block;
    font-size:10px;
    transition:transform .2s var(--ease);
  }
  .daily-regret-toggle.open .chev{transform:rotate(180deg);}
  /* ═══ Bitcoin pizza easter egg (31.08.2026) — same visual language as
     .daily-regret, kept as its own class since it's always-on (no live-feed
     dependency to wait on) rather than toggled by loadDailyRegret(). ═══ */
  .pizza-fact{
    background:linear-gradient(135deg, rgba(240,185,11,0.09), rgba(240,185,11,0.02));
    border:1px solid rgba(240,185,11,0.22);
    border-radius:var(--r-lg);
    padding:18px 20px;
    margin-bottom:28px;
    box-shadow:0 1px 0 rgba(255,255,255,0.04) inset;
    animation:fadeUp .5s var(--ease) .15s both;
  }
  .pizza-fact-label{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.12em;
    color:var(--gold);
    margin-bottom:8px;
    font-weight:700;
  }
  .pizza-fact-text{
    font-size:14px;
    line-height:1.5;
    color:var(--text);
    margin-bottom:10px;
  }
  .pizza-fact-cta{
    background:none;
    border:none;
    color:var(--gold);
    font-family:var(--sans);
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    padding:0;
  }
  .pizza-fact-cta:hover{text-decoration:underline;}
  .pizza-fact-reveal{
    margin-top:12px;
    padding-top:12px;
    border-top:1px dashed rgba(240,185,11,0.25);
    font-size:15px;
    line-height:1.5;
    color:var(--text);
  }
  .pizza-fact-reveal b{color:var(--gold);}
  /* Hidden on desktop/tablet — the block is short enough to fit fine there;
     only shown in the mobile @media block below, where .pizza-fact-body
     collapses entirely (same idea as the top-10 ticker above, just
     collapsing the whole block instead of a subset of rows). */
  .pizza-toggle{
    display:none;
    align-items:center;
    gap:5px;
    background:none;
    border:none;
    color:var(--muted);
    font-family:var(--sans);
    font-weight:600;
    font-size:12px;
    cursor:pointer;
    padding:0;
    margin-bottom:8px;
  }
  .pizza-toggle:hover{color:var(--gold);}
  .pizza-toggle .chev{
    display:inline-block;
    font-size:10px;
    transition:transform .2s var(--ease);
  }
  .pizza-toggle.open .chev{transform:rotate(180deg);}

  /* ═══ Fumble Scenarios — viral entry points ═══ */
  .fumble-scenarios{
    margin:26px 0 30px;
    padding:20px;
    border:1px solid rgba(240,185,11,0.20);
    border-radius:var(--r-xl);
    background:linear-gradient(180deg, rgba(240,185,11,0.075), rgba(255,255,255,0.018) 46%, rgba(255,255,255,0.008));
    box-shadow:var(--shadow-2);
  }
  .fumble-scenarios-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px;}
  .fumble-scenarios-title{font-size:25px; line-height:1.05; font-weight:800; letter-spacing:-.025em;}
  .fumble-scenarios-title span{color:var(--gold);}
  .fumble-scenarios-sub{color:var(--muted); font-size:12.5px; line-height:1.45; margin-top:5px;}
  .fumble-scenarios-count{font-family:var(--mono); font-size:10px; color:var(--muted); white-space:nowrap; border:1px solid var(--panel-border); border-radius:999px; padding:6px 9px;}
  .fumble-scenarios-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;}
  /* Desktop-only: show the first 4 scenario cards, collapse the rest behind
     a "Show all 10" toggle so this section doesn't dominate the first
     screen. Mobile is untouched — its horizontal scroll already only shows
     2-3 cards at a time, so there's nothing to collapse there. */
  @media(min-width:701px){
    .fumble-scenarios-grid .fumble-card-more{display:none;}
    .fumble-scenarios-grid.fumble-expanded .fumble-card-more{display:flex;}
  }
  .fumble-scenarios-more-btn{display:block; margin:16px auto 0; background:var(--field-bg); border:1px solid var(--panel-border); color:var(--gold-soft); font-family:var(--sans); font-weight:700; font-size:12.5px; padding:10px 20px; border-radius:999px; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease);}
  .fumble-scenarios-more-btn:hover{border-color:var(--gold); color:var(--gold);}
  /* Hide the native disclosure triangle on the scenario-links summary — we
     draw our own "▾" in the label text instead, and browsers render the
     native one via two different, non-overridable-by-list-style pseudo
     elements depending on engine. */
  #scenarioLinksBlock summary::-webkit-details-marker{display:none;}
  #scenarioLinksBlock summary::marker{content:"";}
  @media(max-width:700px){ .fumble-scenarios-more-btn{display:none;} }
  .fumble-card{
    min-width:0; display:flex; flex-direction:column; padding:12px; border-radius:15px;
    border:1px solid rgba(255,255,255,0.09); background:rgba(9,12,17,.72);
    transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  }
  .fumble-card:hover{transform:translateY(-3px); border-color:rgba(240,185,11,.48); background:rgba(18,22,29,.96); box-shadow:0 14px 30px -20px rgba(0,0,0,.8);}
  .fumble-card-visual{height:76px; display:flex; align-items:center; justify-content:center; border-radius:11px; margin-bottom:10px; background:radial-gradient(circle at 50% 40%, rgba(240,185,11,.17), transparent 58%), rgba(255,255,255,.025); font-size:43px; text-shadow:0 8px 25px rgba(0,0,0,.45);}
  .fumble-card-num{font-family:var(--mono); font-size:9px; color:var(--gold); margin-bottom:5px;}
  .fumble-card-title{font-size:13px; line-height:1.2; font-weight:800; color:var(--text); min-height:31px;}
  .fumble-card-meta{font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:4px;}
  .fumble-card-copy{font-size:10.5px; line-height:1.42; color:var(--muted); margin:8px 0 11px; flex:1;}
  .fumble-card-btn{width:100%; border:1px solid rgba(240,185,11,.55); border-radius:9px; background:var(--gold); color:#17130A; font-family:var(--sans); font-weight:800; font-size:10.5px; padding:9px 7px; cursor:pointer; transition:filter .2s, transform .2s;}
  .fumble-card-btn:hover{filter:brightness(1.08); transform:translateY(-1px);}
  .fumble-card.special .fumble-card-btn{background:transparent; color:var(--gold);}
  @media(max-width:980px){
    .fumble-scenarios-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  }
  @media(max-width:700px){
    .fumble-scenarios{margin:18px 0 20px; padding:14px;}
    .fumble-scenarios-head{align-items:flex-start; margin-bottom:12px;}
    .fumble-scenarios-title{font-size:21px;}
    .fumble-scenarios-sub{font-size:11.5px;}
    .fumble-scenarios-count{display:none;}
    .fumble-scenarios-grid{display:flex; overflow-x:auto; gap:9px; padding-bottom:4px; scroll-snap-type:x mandatory; scrollbar-width:none;}
    .fumble-scenarios-grid::-webkit-scrollbar{display:none;}
    .fumble-card{flex:0 0 172px; scroll-snap-align:start; padding:10px;}
    .fumble-card-visual{height:68px; font-size:38px;}
    .fumble-card-title{font-size:12.5px; min-height:30px;}
    .fumble-card-copy{font-size:10px;}
  }
  @media(max-width:480px){
    .date-trigger{font-size:14px; padding:11px 38px 11px 14px; min-height:66px;}
    .date-trigger::after{right:12px; font-size:13px;}
    .row{gap:10px;}
    .row > .field{min-width:0;}
    #calculatorPanel{border-color:rgba(240,185,11,.5);}
    .fumble-scenarios{margin:12px 0 14px; padding:12px 10px; border-radius:16px;}
    .fumble-scenarios-head{margin-bottom:10px;}
    .fumble-scenarios-title{font-size:19px;}
    .fumble-scenarios-sub{font-size:10.5px;}
    .fumble-card{flex-basis:158px;}
    .fumble-card-visual{height:62px; font-size:34px; margin-bottom:8px;}
    .fumble-card-copy{margin:6px 0 9px;}
  }

  .panel{
    background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 42%), var(--panel);
    border:1px solid var(--panel-border);
    border-radius:var(--r-xl);
    padding:26px;
    margin-bottom:24px;
    box-shadow:var(--shadow-2);
    animation:fadeUp .5s var(--ease) .2s both;
  }
  #calculatorPanel{
    border-color:rgba(240,185,11,.42);
    box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 46px -30px rgba(240,185,11,.42), var(--shadow-2);
  }
  .field{margin-bottom:18px;}
  .field:last-child{margin-bottom:0;}
  label{
    display:block;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.09em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:10px;
  }
  .coin-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
  }
  .coin-search-wrap{position:relative; margin-bottom:10px;}
  #coinSearch{
    width:100%;
    background:var(--field-bg);
    border:1px solid var(--panel-border);
    color:var(--text);
    font-family:var(--sans);
    font-size:15px;
    padding:13px 16px;
    border-radius:var(--r-md);
    outline:none;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  #coinSearch:focus{border-color:var(--gold); box-shadow:0 0 0 4px rgba(240,185,11,0.12);}
  .coin-dropdown{
    display:none;
    position:absolute;
    left:0; right:0; top:calc(100% + 8px);
    background:#10141A;
    border:1px solid var(--panel-border);
    border-radius:var(--r-lg);
    max-height:260px;
    overflow-y:auto;
    z-index:20;
    box-shadow:var(--shadow-3);
  }
  .coin-dropdown.open{display:block;}
  .coin-opt{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 14px;
    cursor:pointer;
    border-bottom:1px solid var(--panel-border-soft);
    transition:background .15s ease;
  }
  .coin-opt:last-child{border-bottom:none;}
  .coin-opt:hover{background:rgba(240,185,11,0.08);}
  .coin-opt img{width:22px; height:22px; border-radius:50%; flex-shrink:0;}
  .co-avatar{
    width:22px; height:22px; border-radius:50%; flex-shrink:0;
    background:rgba(240,185,11,0.15); color:var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-weight:700; font-size:11px;
  }
  .coin-dropdown-note{
    padding:9px 14px; font-size:10px; letter-spacing:0.04em;
    color:var(--muted); border-bottom:1px solid var(--panel-border-soft);
    text-transform:uppercase;
  }
  .coin-opt .co-sym{font-family:var(--mono); font-weight:700; font-size:13px; color:var(--gold);}
  .co-avatar-sized{width:22px; height:22px; border-radius:50%; flex-shrink:0; display:block;}
  .co-avatar-sized.avatar-fallback{
    background:rgba(240,185,11,0.15); color:var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-weight:700; font-size:11px;
  }
  .coin-opt .co-name{font-size:12px; color:var(--muted);}
  .coin-dropdown .empty, .coin-dropdown .loading{
    padding:16px; font-size:12px; color:var(--muted); text-align:center;
  }
  .selected-coin{
    font-family:var(--mono);
    font-size:11px;
    color:var(--muted);
    margin-top:10px;
    min-height:14px;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .selected-coin b{color:var(--gold);}
  .selected-coin-icon{width:16px; height:16px; border-radius:50%; flex-shrink:0;}
  .selected-coin-icon.avatar-fallback{
    background:rgba(240,185,11,0.15); color:var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-weight:700; font-size:9px;
  }
  .coin-btn{
    font-family:var(--mono);
    font-weight:600;
    font-size:13px;
    background:var(--field-bg);
    border:1px solid var(--panel-border);
    color:var(--muted);
    padding:11px 4px 10px;
    border-radius:var(--r-sm);
    cursor:pointer;
    transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
  }
  .coin-btn:hover{border-color:var(--gold); color:var(--text); transform:translateY(-2px);}
  .coin-btn.active{
    background:rgba(240,185,11,0.12);
    border-color:var(--gold);
    color:var(--gold);
    box-shadow:0 0 0 3px rgba(240,185,11,0.12);
  }
  .coin-btn-icon{
    width:22px; height:22px; border-radius:50%;
    display:block;
  }
  .coin-btn-icon.avatar-fallback{
    background:rgba(139,147,161,0.15); color:var(--muted);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-weight:700; font-size:11px;
  }
  .coin-btn.active .coin-btn-icon.avatar-fallback{
    background:rgba(240,185,11,0.2); color:var(--gold);
  }
  .row{display:flex; gap:12px;}
  .row > .field{flex:1;}
  input[type=number], input[type=month]{
    width:100%;
    background:var(--field-bg);
    border:1px solid var(--panel-border);
    color:var(--text);
    font-family:var(--mono);
    font-size:16px;
    padding:13px 16px;
    border-radius:var(--r-md);
    outline:none;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  input[type=number]:focus, input[type=month]:focus{border-color:var(--gold); box-shadow:0 0 0 4px rgba(240,185,11,0.12);}
  /* --- Date trigger button (opens wheel picker) --- */
  .date-trigger{
    width:100%;
    text-align:left;
    background:var(--field-bg);
    border:1px solid var(--panel-border);
    color:var(--text);
    font-family:var(--mono);
    font-size:16px;
    padding:13px 16px;
    border-radius:var(--r-md);
    cursor:pointer;
    position:relative;
    transition:border-color .2s var(--ease);
  }
  .date-trigger:hover{border-color:var(--gold);}
  .date-trigger::after{
    content:"📅";
    position:absolute;
    right:14px; top:50%; transform:translateY(-50%);
    font-size:14px; opacity:0.6;
  }
  /* --- Wheel picker bottom sheet --- */
  .date-sheet-overlay{
    display:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,0.6);
    z-index:100;
    align-items:flex-end;
    justify-content:center;
  }
  .date-sheet-overlay.open{display:flex;}
  .date-sheet{
    width:100%;
    max-width:640px;
    background:#12161D;
    border-radius:28px 28px 0 0;
    border:1px solid var(--panel-border);
    border-bottom:none;
    padding-bottom:env(safe-area-inset-bottom, 0px);
    box-shadow:0 -20px 60px rgba(0,0,0,0.5);
    animation:sheetUp .3s var(--ease);
  }
  @keyframes sheetUp{
    from{transform:translateY(100%);}
    to{transform:translateY(0);}
  }
  .date-sheet-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
    border-bottom:1px solid var(--panel-border-soft);
    font-family:var(--sans);
    font-weight:700;
    font-size:14px;
  }
  .date-sheet-header button{
    background:none; border:none;
    font-family:var(--sans);
    font-size:14px;
    cursor:pointer;
    padding:4px 2px;
  }
  #dateCancel{color:var(--muted); font-weight:500;}
  #dateDone{color:var(--gold); font-weight:800;}
  .wheel-wrap{
    position:relative;
    display:flex;
    justify-content:center;
    gap:0;
    height:220px; /* 5 rows x 44px — do not change, JS scroll math depends on this */
    overflow:hidden;
    padding:0 20px;
  }
  .wheel-highlight{
    position:absolute;
    left:20px; right:20px; top:88px; /* center row: (220-44)/2 */
    height:44px;
    background:rgba(240,185,11,0.08);
    border-top:1px solid rgba(240,185,11,0.35);
    border-bottom:1px solid rgba(240,185,11,0.35);
    pointer-events:none;
    z-index:2;
  }
  .wheel-fade{
    position:absolute; left:0; right:0; height:88px;
    pointer-events:none; z-index:3;
  }
  .wheel-fade-top{top:0; background:linear-gradient(#12161D, rgba(18,22,29,0));}
  .wheel-fade-bottom{bottom:0; background:linear-gradient(rgba(18,22,29,0), #12161D);}
  .wheel-col{
    flex:1;
    max-width:220px;
    overflow-y:scroll;
    scroll-snap-type:y mandatory;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .wheel-col::-webkit-scrollbar{display:none;}
  .wheel-item{
    height:44px; /* do not change — JS ROW_H constant depends on this */
    display:flex;
    align-items:center;
    justify-content:center;
    scroll-snap-align:center;
    font-family:var(--mono);
    font-size:17px;
    color:var(--muted);
    transition:color .2s var(--ease), opacity .2s var(--ease);
    opacity:0.4;
    user-select:none;
  }
  .wheel-item.picked{
    color:var(--text);
    font-weight:700;
    opacity:1;
  }
  .wheel-item.disabled{
    color:#3A414D;
    opacity:0.25;
  }
  .date-sheet-hint{
    text-align:center;
    font-size:11px;
    color:var(--muted);
    padding:2px 18px 18px;
    min-height:16px;
  }
  .amount-wrap{position:relative;}
  .amount-wrap::before{
    content:"$";
    position:absolute;
    left:14px; top:50%; transform:translateY(-50%);
    color:var(--muted);
    font-family:var(--mono);
    pointer-events:none;
  }
  .amount-wrap input{padding-left:26px;}
  .amount-wrap.no-prefix::before{content:""; display:none;}
  .amount-wrap.no-prefix input{padding-left:16px;}
  .mode-toggle{
    display:flex;
    gap:8px;
    margin-bottom:18px;
    background:var(--field-bg);
    border:1px solid var(--panel-border);
    border-radius:var(--r-md);
    padding:4px;
  }
  .mode-btn{
    flex:1;
    background:rgba(255,255,255,0.045);
    border:1px solid var(--panel-border-soft);
    color:var(--muted);
    font-family:var(--sans);
    font-weight:700;
    font-size:13px;
    padding:11px;
    border-radius:10px;
    cursor:pointer;
    transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  }
  .mode-btn:hover{color:var(--text); border-color:var(--panel-border);}
  .mode-btn.active{
    background:rgba(240,185,11,0.13);
    color:var(--gold);
    border-color:rgba(240,185,11,0.35);
    box-shadow:0 1px 0 rgba(255,255,255,0.05) inset;
  }
  .cta{
    width:100%;
    background:linear-gradient(180deg, var(--gold-soft), var(--gold));
    color:#1A1400;
    border:none;
    font-family:var(--sans);
    font-weight:800;
    font-size:15px;
    padding:16px;
    border-radius:var(--r-lg);
    cursor:pointer;
    letter-spacing:-0.01em;
    box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 12px 26px -10px rgba(240,185,11,0.45);
    transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .cta:hover{box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 16px 32px -10px rgba(240,185,11,0.55); transform:translateY(-2px);}
  .cta:active{transform:translateY(0) scale(0.985);}
  .cta:disabled{opacity:0.65; cursor:wait; transform:none; box-shadow:none;}
  .cta .spin{
    display:inline-block; width:13px; height:13px; margin-right:8px;
    border:2px solid rgba(26,20,0,0.25); border-top-color:#1A1400;
    border-radius:50%; vertical-align:-2px;
    animation:spin .7s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .r-source{
    font-size:9px; letter-spacing:0.12em; text-transform:uppercase;
    text-align:center; margin-top:2px; opacity:0.5;
  }
  .r-source.live{color:#0F7A50; opacity:0.8;}
  .r-source.demo{color:#A87A2A; opacity:0.8;}

  /* ---- STORY RECEIPT: visual receipt for ready-made Fumble scenarios ---- */
  #storyReceiptHolder{display:none; margin:0 0 18px;}
  .story-receipt{
    position:relative;
    overflow:hidden;
    background:linear-gradient(145deg,#fbf6e9 0%,#f1e8d3 100%);
    color:#2A2418;
    border:1px solid rgba(184,134,11,.42);
    border-radius:22px;
    padding:22px;
    box-shadow:0 22px 55px -28px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.7) inset;
    font-family:var(--mono);
    animation:storyDropIn .55s cubic-bezier(.2,.9,.3,1.2);
  }
  .story-receipt:before{
    content:""; position:absolute; inset:9px; border:1px dashed rgba(42,36,24,.2);
    border-radius:16px; pointer-events:none;
  }
  @keyframes storyDropIn{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
  .story-head{position:relative;text-align:center;margin-bottom:14px;}
  .story-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.52;margin-bottom:5px;}
  .story-title{font-family:var(--sans);font-size:clamp(20px,4vw,28px);font-weight:900;letter-spacing:-.03em;margin:0;}
  .story-subtitle{font-size:11px;opacity:.56;margin-top:5px;}
  .story-visual{
    position:relative; display:grid; grid-template-columns:1fr 72px 1fr; align-items:center; gap:12px;
    max-width:540px; margin:16px auto 18px;
  }
  .story-object,.story-btc{
    min-height:132px; border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    border:1px solid rgba(42,36,24,.12); box-shadow:0 10px 24px rgba(42,36,24,.08),0 1px 0 rgba(255,255,255,.65) inset;
  }
  .story-object{background:rgba(255,255,255,.38);}
  .story-btc{background:linear-gradient(145deg,#fff3c4,#f0b90b);border-color:rgba(184,134,11,.35);}
  .story-icon{font-size:54px;line-height:1;filter:drop-shadow(0 8px 10px rgba(42,36,24,.16));}
  .story-object-label,.story-btc-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.56;margin-top:9px;}
  .story-arrow{font-family:var(--sans);font-size:34px;font-weight:900;text-align:center;color:#B8860B;}
  .story-btc-coin{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#F7931A;color:#fff;font-family:Arial,sans-serif;font-weight:900;font-size:34px;box-shadow:0 8px 18px rgba(247,147,26,.32),inset 0 2px 0 rgba(255,255,255,.4);}
  .story-btc-coin:after{content:"₿";transform:translateY(-1px);}
  .story-values{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 auto 16px;max-width:540px;}
  .story-value{border-top:1px dashed rgba(42,36,24,.28);padding-top:10px;}
  .story-value:last-child{text-align:right;}
  .story-value-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.48;}
  .story-value-num{font-size:clamp(20px,4vw,30px);font-weight:800;letter-spacing:-.04em;margin-top:3px;}
  .story-value-note{font-size:10px;opacity:.48;margin-top:2px;}
  .story-mult{position:relative;text-align:center;font-size:clamp(24px,5vw,34px);font-weight:900;color:#B8860B;letter-spacing:-.04em;margin:3px 0 8px;}
  .story-tier{position:relative;text-align:center;color:#A82A30;font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px;}
  .story-score{position:relative;text-align:center;font-size:10px;opacity:.62;}
  .story-footer{position:relative;text-align:center;margin-top:16px;padding-top:12px;border-top:1px dashed rgba(42,36,24,.25);font-family:"Dancing Script",cursive;font-size:20px;font-weight:700;}
  .story-footer span{border-bottom:3px solid rgba(240,185,11,.75);}
  @media(max-width:700px){
    .story-receipt{padding:18px 14px;}
    .story-visual{grid-template-columns:1fr 42px 1fr;gap:7px;}
    .story-object,.story-btc{min-height:108px;}
    .story-icon{font-size:42px;}
    .story-btc-coin{width:48px;height:48px;font-size:29px;}
    .story-arrow{font-size:25px;}
    .story-footer{font-size:18px;}
  }

  /* --- RECEIPT REVEAL --- */
  #receipt-holder{
    display:block;
    margin-top:24px;
  }
  .receipt{
    background:var(--paper);
    color:var(--paper-ink);
    font-family:var(--mono);
    padding:28px 24px 22px;
    position:relative;
    clip-path:polygon(
      0% 1.5%, 4% 0%, 8% 1.5%, 12% 0%, 16% 1.5%, 20% 0%, 24% 1.5%, 28% 0%, 32% 1.5%, 36% 0%,
      40% 1.5%, 44% 0%, 48% 1.5%, 52% 0%, 56% 1.5%, 60% 0%, 64% 1.5%, 68% 0%, 72% 1.5%, 76% 0%,
      80% 1.5%, 84% 0%, 88% 1.5%, 92% 0%, 96% 1.5%, 100% 0%,
      100% 98.5%, 96% 100%, 92% 98.5%, 88% 100%, 84% 98.5%, 80% 100%, 76% 98.5%, 72% 100%,
      68% 98.5%, 64% 100%, 60% 98.5%, 56% 100%, 52% 98.5%, 48% 100%, 44% 98.5%, 40% 100%,
      36% 98.5%, 32% 100%, 28% 98.5%, 24% 100%, 20% 98.5%, 16% 100%, 12% 98.5%, 8% 100%,
      4% 98.5%, 0% 100%
    );
    box-shadow:0 1px 0 rgba(255,255,255,0.5) inset, 0 30px 70px -20px rgba(0,0,0,0.55), 0 10px 24px -12px rgba(0,0,0,0.4);
    animation:dropIn .5s cubic-bezier(.2,.9,.3,1.3);
  }
  @keyframes dropIn{
    from{opacity:0; transform:translateY(-16px) scale(0.98);}
    to{opacity:1; transform:translateY(0) scale(1);}
  }
  .r-title{
    text-align:center;
    font-size:11px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    opacity:0.55;
    margin-bottom:4px;
  }
  .r-sub{
    text-align:center;
    font-size:11px;
    opacity:0.45;
    margin-bottom:18px;
  }
  .r-sub-icon{
    width:14px; height:14px; border-radius:50%;
    vertical-align:-2px; margin-right:5px;
  }
  .r-sub-icon.avatar-fallback{
    background:rgba(42,36,24,0.12); color:rgba(42,36,24,0.65);
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-weight:700; font-size:8px;
    vertical-align:-3px;
  }
  .dashed{border-top:1.5px dashed rgba(42,36,24,0.35); margin:14px 0;}
  .r-line{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    margin-bottom:8px;
  }
  .r-line span:last-child{font-weight:600;}
  .r-big{
    text-align:center;
    margin:18px 0 10px;
  }
  .r-big .label{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.5; margin-bottom:6px;}
  .r-big .num{
    font-size:clamp(32px, 9vw, 46px);
    font-weight:700;
    letter-spacing:-0.03em;
  }
  .r-big .num.pos{color:#0F7A50;}
  .r-big .num.neg{color:#A82A30;}
  .r-local-currency{
    text-align:center;
    font-family:var(--mono);
    font-size:12px;
    opacity:0.5;
    margin-top:2px;
  }
  .r-mult{
    text-align:center;
    font-size:13px;
    font-weight:600;
    padding:6px 14px;
    border-radius:999px;
    display:inline-block;
    margin:0 auto;
  }
  .r-mult-wrap{text-align:center; margin-bottom:6px;}
  .hero-receipt-wrap .r-regret-line{
    margin-top:7px;
    font-family:var(--mono);
    font-size:11px;
    line-height:1.4;
    text-align:center;
    color:var(--muted);
  }
  .r-tier{
    text-align:center;
    font-family:var(--mono);
    font-weight:700;
    font-size:13px;
    letter-spacing:0.06em;
    color:var(--gold);
    margin-bottom:10px;
  }
  .r-mult.pos{background:rgba(15,122,80,0.12); color:#0F7A50;}
  .r-mult.neg{background:rgba(168,42,48,0.12); color:#A82A30;}
  .r-score-line{
    text-align:center;
    font-family:var(--mono);
    font-size:11px;
    font-weight:600;
    letter-spacing:0.04em;
    color:var(--paper-ink);
    opacity:0.5;
    margin-bottom:8px;
  }
  .r-chart-wrap{margin:14px 0 4px; display:none;}
  .r-chart-wrap svg{width:100%; height:84px; display:block;}
  .r-chart-caption{
    font-size:10px; letter-spacing:0.06em; text-transform:uppercase;
    color:rgba(42,36,24,0.45); text-align:center; margin-top:4px;
  }
  .r-compare{
    font-size:12px;
    opacity:0.6;
    text-align:center;
    margin-top:8px;
    line-height:1.5;
  }
  .r-compare-details{margin-top:14px; text-align:center;}
  .r-compare-summary{
    font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    color:rgba(42,36,24,0.55); cursor:pointer; list-style:none;
  }
  .r-compare-summary::-webkit-details-marker{display:none;}
  .r-compare-summary::marker{content:"";}
  .r-sold-peak{
    display:none;
    margin-top:14px;
    padding:12px 14px;
    border-radius:10px;
    background:rgba(168,42,48,0.10);
    border:1px solid rgba(168,42,48,0.25);
    font-size:12.5px;
    line-height:1.5;
    text-align:center;
  }
  .r-sold-peak b{ color:#A82A30; }
  .r-footer{
    text-align:center;
    font-size:10px;
    opacity:0.4;
    margin-top:16px;
    letter-spacing:0.05em;
  }
  .share-cta{
    width:100%;
    background:var(--field-bg);
    color:var(--gold);
    border:1px solid var(--gold);
    font-family:var(--sans);
    font-weight:700;
    font-size:14px;
    padding:14px;
    border-radius:var(--r-md);
    cursor:pointer;
    margin-top:14px;
    transition:background .2s var(--ease), transform .2s var(--ease);
  }
  .share-cta:hover{background:rgba(240,185,11,0.08); transform:translateY(-1px);}
  .share-cta:disabled{opacity:0.55; cursor:default; transform:none;}
  .share-cta:disabled:hover{background:var(--field-bg);}
  .cert-name-dialog{width:min(430px,calc(100vw - 32px));padding:0;border:1px solid rgba(240,185,11,.55);border-radius:20px;color:#F7F1E3;background:linear-gradient(155deg,#171A22,#090B10 72%);box-shadow:0 28px 90px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.04)}
  .cert-name-dialog::backdrop{background:rgba(3,4,7,.78);backdrop-filter:blur(7px)}
  .cert-name-form{padding:28px;text-align:left}.cert-name-kicker{color:var(--gold);font:700 11px var(--mono);letter-spacing:.16em;text-transform:uppercase}.cert-name-title{margin:8px 0 6px;font:800 25px/1.15 var(--sans)}.cert-name-copy{margin:0 0 20px;color:var(--muted);font:400 14px/1.55 var(--sans)}.cert-name-label{display:block;margin-bottom:8px;font:700 13px var(--sans)}.cert-name-input{width:100%;box-sizing:border-box;border:1px solid rgba(240,185,11,.42);border-radius:12px;padding:14px 15px;background:#090B10;color:#fff;font:700 17px var(--sans);outline:none}.cert-name-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,185,11,.12)}.cert-name-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:18px}.cert-name-actions button{margin:0;min-height:48px}@media(max-width:480px){.cert-name-form{padding:22px}.cert-name-actions{grid-template-columns:1fr}}

  /* =========================================================
     PRIMARY SHARE BLOCK
     Step 1 — make sharing the main action after a result
     ========================================================= */

  .share-primary{
    margin:16px 0 18px;
    padding:18px;
    border:1px solid rgba(240,185,11,0.30);
    border-radius:var(--r-lg);
    background:linear-gradient(135deg, rgba(240,185,11,0.10), rgba(240,185,11,0.025));
    box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 14px 35px -24px rgba(240,185,11,0.35);
  }

  .share-primary-head{
    text-align:center;
    margin-bottom:13px;
  }

  .share-primary-title{
    font-family:var(--mono);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.13em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:5px;
  }

  .share-primary-sub{
    font-size:12px;
    line-height:1.45;
    color:var(--muted);
  }


    .story-share-wrap{margin:12px 0 18px;text-align:center;}
  #shareStoryReceiptBtn{width:100%;min-height:50px;border:1px solid rgba(240,185,11,.52);background:linear-gradient(135deg,rgba(240,185,11,.16),rgba(240,185,11,.05));color:var(--gold-soft);font-family:var(--sans);font-size:14px;font-weight:800;border-radius:var(--r-md);cursor:pointer;}
  #shareFumbleCardBtn{width:100%;min-height:48px;margin-top:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:var(--text);font-family:var(--sans);font-size:13px;font-weight:800;border-radius:var(--r-md);cursor:pointer;transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);}
  #shareFumbleCardBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.07);border-color:rgba(240,185,11,.45);}
  #shareFumbleCardBtn:disabled{opacity:.6;cursor:wait;transform:none;}

  .story-share-note{margin-top:6px;font-size:10.5px;color:var(--muted);opacity:.8;}
/* ---- STORY RECEIPT SHARE MODAL (DESKTOP) ---- */
  .story-share-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(3,5,8,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
  .story-share-modal.open{display:flex;animation:storyShareFade .18s ease-out;}
  @keyframes storyShareFade{from{opacity:0}to{opacity:1}}
  .story-share-dialog{position:relative;width:min(760px,calc(100vw - 36px));max-height:min(85vh,800px);overflow:auto;background:#11141a;border:1px solid rgba(240,185,11,.30);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.06) inset;padding:18px;display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:18px;}
  .story-share-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.05);color:#fff;font-size:22px;line-height:1;cursor:pointer;z-index:2;}
  .story-share-close:hover{background:rgba(255,255,255,.10);}
  .story-share-preview{display:flex;align-items:center;justify-content:center;min-height:0;padding:10px;background:rgba(255,255,255,.025);border-radius:18px;border:1px solid rgba(255,255,255,.06);}
  .story-share-preview img{display:block;width:min(100%,320px);height:auto;max-height:66vh;object-fit:contain;border-radius:10px;box-shadow:0 18px 45px rgba(0,0,0,.45);}
  .story-share-info{display:flex;flex-direction:column;justify-content:center;padding:12px 16px 12px 4px;}
  .story-share-brand{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
  .story-share-info h3{font-family:var(--sans);font-size:21px;line-height:1.15;margin:0 0 8px;color:var(--text);}
  .story-share-info p{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.5;}
  .story-share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;}
  .story-share-action{min-height:42px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(255,255,255,.045);color:var(--text);font-family:var(--sans);font-weight:750;font-size:12.5px;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease;}
  .story-share-action:hover{transform:translateY(-1px);background:rgba(255,255,255,.08);border-color:rgba(240,185,11,.35);}
  .story-share-action.primary{grid-column:1/-1;background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#1A1400;border-color:transparent;font-size:13.5px;}
  .story-share-action.primary:hover{background:linear-gradient(180deg,#ffd55a,var(--gold));}
  .story-share-action.ghost{background:transparent;}
  .story-share-note-desktop{font-size:10.5px;color:var(--muted);opacity:.78;margin-top:10px;line-height:1.45;}
  .story-share-phone{display:none;grid-column:1/-1;}
  .story-share-qr{display:none;grid-column:1/-1;text-align:center;padding:14px;margin-top:4px;border:1px solid rgba(240,185,11,.3);border-radius:14px;background:#fff;color:#17120a;}
  .story-share-qr.open{display:block;}
  .story-share-qr img{display:block;width:220px;height:220px;margin:0 auto 10px;}
  @media(min-width:701px){.story-share-phone{display:block}.story-share-service:not(.story-share-x){display:none!important}.story-share-note-desktop{display:block}}
  @media(max-width:700px){.story-share-modal{padding:10px}.story-share-dialog{width:100%;max-height:94vh;display:block;padding:14px;border-radius:18px}.story-share-preview{min-height:0;margin-top:28px;padding:8px}.story-share-preview img{width:min(100%,330px);max-height:48vh}.story-share-info{padding:18px 4px 6px}.story-share-info h3{font-size:23px}}

  .share-primary-buttons{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }
  .mobile-share-all{display:none;}
  @media(max-width:700px){
    .share-primary-buttons{grid-template-columns:1fr!important;}
    .share-primary-buttons>#shareTgBtn,
    .share-primary-buttons>#shareXBtn,
    .share-primary-buttons>#shareWaBtn{display:none!important;}
    .share-primary-buttons>.mobile-share-all{
      display:block!important;min-height:54px!important;font-size:14px!important;
      color:#171200!important;border-color:transparent!important;
      background:linear-gradient(180deg,#ffd65b,#f0b90b)!important;
      box-shadow:0 10px 26px -14px rgba(240,185,11,.9);
    }
  }

  .share-primary-buttons .share-cta{
    margin-top:0;
    min-height:48px;
    padding:11px 8px;
    font-size:12.5px;
    border-color:rgba(240,185,11,0.42);
    background:rgba(10,11,16,0.55);
  }

  .share-primary-buttons .share-cta:hover{
    background:rgba(240,185,11,0.10);
    border-color:var(--gold);
  }

  .share-primary-thanks{
    display:none;
    font-size:11.5px;
    color:var(--muted);
    text-align:center;
    margin-top:9px;
    line-height:1.45;
  }

  @media(max-width:480px){
    .share-primary{
      margin:12px 0 14px;
      padding:12px 10px;
    }

    .share-primary-head{
      margin-bottom:9px;
    }

    .share-primary-title{
      font-size:11.5px;
    }

    .share-primary-sub{
      font-size:11px;
    }

    .share-primary-buttons{
      grid-template-columns:repeat(3,1fr);
      gap:6px;
    }

    .share-primary-buttons .share-cta{
      min-height:42px;
      padding:9px 5px;
      font-size:11.5px;
    }

    .share-primary-thanks{
      margin-top:7px;
      font-size:10.5px;
    }
  }

  .cta-invest{
    display:block;
    width:100%;
    background:var(--field-bg);
    color:var(--green);
    border:1px solid rgba(22,199,132,0.45);
    font-family:var(--sans);
    font-weight:700;
    font-size:14px;
    text-align:center;
    padding:14px;
    border-radius:var(--r-md);
    text-decoration:none;
    margin-top:14px;
    box-sizing:border-box;
    transition:background .2s var(--ease), transform .2s var(--ease);
  }
  .cta-invest:hover{background:rgba(22,199,132,0.08); transform:translateY(-1px);}
  .invest-note{
    text-align:center;
    font-size:11px;
    color:var(--muted);
    opacity:0.75;
    margin-top:8px;
    line-height:1.5;
  }
  .r-disclaimer{
    text-align:center;
    font-size:10.5px;
    opacity:0.6;
    margin-top:10px;
    line-height:1.5;
  }
  .compare-block{margin-top:14px; text-align:center;}
  /* Same geometry as .share-cta above (width, padding, radius, solid border,
     font) — used to be its own free-width "pill" (border-radius:999px,
     monospace 11px, dashed) centered on the line, so longer labels like the
     millionaire toggle wrapped awkwardly to two lines and stood out from the
     rest of the button stack under the receipt. Muted color is now the only
     thing distinguishing these toggle buttons from a regular .share-cta. */
  .compare-toggle{
    display:block;
    width:100%;
    box-sizing:border-box;
    background:var(--field-bg);
    border:1px solid var(--panel-border);
    color:var(--muted);
    font-family:var(--sans);
    font-weight:700;
    font-size:14px;
    padding:14px;
    border-radius:var(--r-md);
    cursor:pointer;
    transition:border-color .2s var(--ease), color .2s var(--ease);
  }
  .compare-toggle:hover{border-color:var(--gold); color:var(--gold);}

  /* ---- CTA hierarchy pass: after the primary share block, "Add to
     portfolio" gets its own promoted tier (it's the newest feature and
     drives people into the Portfolio tab); certificate / affiliate /
     donate drop into one visually-quieter secondary row so the page
     doesn't read as five equal, stacked buttons in a row. No handler
     or id changes — same buttons, same JS wiring, new grouping. ---- */
  .cta-portfolio{
    display:block; width:100%; box-sizing:border-box;
    background:linear-gradient(135deg, rgba(22,199,132,0.16), rgba(22,199,132,0.04));
    color:var(--green);
    border:1px solid rgba(22,199,132,0.5);
    font-family:var(--sans); font-weight:800; font-size:14px;
    text-align:center; padding:14px; border-radius:var(--r-md); cursor:pointer;
    margin-top:12px;
    box-shadow:0 10px 26px -18px rgba(22,199,132,.55);
    transition:background .2s var(--ease), transform .2s var(--ease);
  }
  .cta-portfolio:hover{ background:rgba(22,199,132,0.12); transform:translateY(-1px); }
  .cta-secondary-label{
    text-align:center; font-family:var(--mono); font-size:10px;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
    margin-top:18px; margin-bottom:8px; opacity:0.7;
  }
  .cta-secondary-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .cta-secondary-row .share-cta,
  .cta-secondary-row .cta-invest{
    flex:1 1 150px; margin-top:0; font-size:11.5px; padding:10px 8px; opacity:0.82;
  }
  .cta-secondary-row .share-cta:hover,
  .cta-secondary-row .cta-invest:hover{ opacity:1; }
  #investNote{ margin-top:8px; }
  @media(max-width:480px){
    .cta-secondary-row{ gap:6px; }
    .cta-secondary-row .share-cta,
    .cta-secondary-row .cta-invest{ flex:1 1 46%; font-size:11px; padding:9px 6px; }
  }

  .compare-picker{margin-top:14px; animation:fadeUp .3s var(--ease) both;}
  .compare-picker-label{font-size:11px; color:var(--muted); margin-bottom:8px;}
  .compare-coin-grid{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
  .compare-result{
    margin-top:14px;
    padding:16px;
    border-radius:14px;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--panel-border-soft);
    font-size:13.5px;
    line-height:1.65;
    text-align:left;
    animation:fadeUp .3s var(--ease) both;
  }
  .compare-result b{color:var(--text);}
  .compare-result .cr-win{color:#16C784; font-weight:700;}
  .compare-result .cr-lose{color:#EA3943; font-weight:700;}
  .compare-result .r-line{padding-bottom:6px; border-bottom:1px dashed var(--panel-border-soft);}
  .compare-result .r-line:last-of-type{border-bottom:none;}
  .portfolio-calc-btn{margin-top:14px; font-size:13px; padding:12px; width:100%;}
  .share-toast{
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%) translateY(20px);
    max-width:min(92vw, 420px);
    background:rgba(20,20,24,0.97);
    color:var(--text);
    border:1px solid var(--panel-border);
    border-radius:14px;
    padding:14px 18px;
    font-size:13px;
    line-height:1.5;
    box-shadow:0 12px 40px rgba(0,0,0,0.5);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
    z-index:9999;
  }
  .share-toast.visible{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
  /* Floating "back to calculator" button — mobile only. Appears once
     #calculatorPanel has scrolled fully above the viewport (user is reading
     content below it: results, sharing, comparison, portfolio, etc.),
     disappears again near the calculator itself. */
  .calc-fab{
    position:fixed;
    right:16px;
    bottom:calc(86px + env(safe-area-inset-bottom, 0px));
    width:52px; height:52px;
    display:none;
    align-items:center; justify-content:center;
    border-radius:50%;
    background:linear-gradient(180deg, var(--gold-soft), var(--gold));
    color:#1A1400;
    border:none;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 10px 26px -6px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.28) inset;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .2s var(--ease), transform .2s var(--ease);
    z-index:60;
  }
  .calc-fab.show{display:flex; opacity:1; transform:translateY(0);}
  @media(min-width:701px){ .calc-fab{display:none !important;} }
  .disclaimer{
    font-size:11px;
    color:var(--muted);
    text-align:center;
    margin-top:28px;
    line-height:1.6;
    opacity:0.55;
  }

  /* ═══ New: favorite coins (localStorage, no backend) ═══ */
  .fav-coins-wrap{margin-bottom:10px;}
  .fav-coins{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
  .fav-coins .coin-btn{flex:0 0 auto; min-width:64px;}
  .fav-star{
    background:none; border:none; cursor:pointer;
    font-size:15px; line-height:1; color:var(--muted);
    padding:0 0 0 6px; vertical-align:-1px;
    transition:color .2s var(--ease), transform .15s var(--ease);
  }
  .fav-star:hover{color:var(--gold); transform:scale(1.15);}
  .fav-star.active{color:var(--gold);}
  /* ═══ New: quick period-select shortcuts ═══ */
  .period-quick{display:flex; gap:6px; margin-top:-6px;}
  .period-btn{
    flex:1;
    background:var(--field-bg);
    border:1px solid var(--panel-border);
    color:var(--muted);
    font-family:var(--mono);
    font-weight:700;
    font-size:11px;
    padding:9px 4px;
    border-radius:9px;
    cursor:pointer;
    transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
  }
  .period-btn:hover{border-color:var(--gold); color:var(--text);}
  .period-btn.active{background:rgba(240,185,11,0.13); border-color:var(--gold); color:var(--gold);}
  /* ═══ New: one-click presets (Фаза 30 quick wins) ═══ */
  /* Same geometry as .compare-toggle/.share-cta (solid border, radius,
     vertical padding) instead of the previously smaller/dashed 9px-radius
     look. Grid instead of flex for .preset-row — with flex, longer labels
     ("Quick: Top-4 majors, equal split") didn't fit in half the row width and
     the whole pair wrapped onto two FULL-WIDTH rows instead of sitting side
     by side; grid keeps the two columns fixed and just wraps the text inside
     each button if needed. */
  .preset-btn{
    width:100%;
    box-sizing:border-box;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:var(--field-bg);
    border:1px solid var(--panel-border);
    color:var(--muted);
    font-family:var(--sans);
    font-weight:700;
    font-size:12.5px;
    line-height:1.25;
    padding:10px 6px;
    border-radius:var(--r-md);
    cursor:pointer;
    transition:border-color .2s var(--ease), color .2s var(--ease);
  }
  .preset-btn:hover{border-color:var(--gold); color:var(--gold);}
  .preset-row{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px;}
  .preset-row .preset-btn{width:auto;}

  /* ═══ Page-level tabs: Calculator vs My Portfolio ═══ */
  .page-tabs{
    display:flex; gap:8px; margin-bottom:22px;
    background:var(--field-bg); border:1px solid var(--panel-border);
    border-radius:var(--r-md); padding:4px;
  }
  .page-tab{
    flex:1; min-width:0; background:rgba(255,255,255,0.045); border:1px solid var(--panel-border-soft); color:var(--muted);
    font-family:var(--sans); font-weight:700; font-size:13px;
    padding:11px; border-radius:10px; cursor:pointer; overflow-wrap:anywhere; word-break:break-word;
    transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  }
  .page-tab:hover{color:var(--text); border-color:var(--panel-border);}
  .page-tab.active{
    background:rgba(240,185,11,0.13); color:var(--gold);
    border-color:rgba(240,185,11,0.35);
    box-shadow:0 1px 0 rgba(255,255,255,0.05) inset;
  }
  /* ═══ My Portfolio tab ═══ */
  #pfCoinSearch{
    width:100%; background:var(--field-bg); border:1px solid var(--panel-border);
    color:var(--text); font-family:var(--sans); font-size:15px;
    padding:13px 16px; border-radius:var(--r-md); outline:none;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  #pfCoinSearch:focus{border-color:var(--gold); box-shadow:0 0 0 4px rgba(240,185,11,0.12);}
  .pf-note{
    font-size:12px; color:var(--muted); text-align:center;
    margin:0 0 14px; line-height:1.6;
  }
  /* The portfolio lives only in this browser's localStorage (see .pf-note
     right above) — export/import is the escape hatch so that isn't a trap:
     a plain JSON download of the exact entries array, and a matching import
     that merges into (never silently replaces) whatever's already there. */
  .pf-backup-row{
    display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
    margin:0 0 20px;
  }
  .pf-backup-btn{
    background:transparent; border:1px solid var(--panel-border); color:var(--muted);
    font-family:var(--mono); font-size:11.5px; letter-spacing:0.02em;
    padding:8px 14px; border-radius:var(--r-md); cursor:pointer;
    transition:border-color .2s var(--ease), color .2s var(--ease);
  }
  .pf-backup-btn:hover{ border-color:var(--gold); color:var(--gold); }
  .pf-add-btn{
    width:100%; background:var(--gold); color:#1C1503; border:none;
    font-family:var(--sans); font-weight:800; font-size:15px;
    padding:14px; border-radius:var(--r-md); cursor:pointer;
    transition:filter .2s var(--ease); margin-top:4px;
  }
  .pf-add-btn:hover{filter:brightness(1.08);}
  .pf-add-btn:disabled{opacity:0.5; cursor:not-allowed;}
  .pf-tg-connect{ margin:0 0 20px; text-align:center; }
  .pf-tg-btn{
    background:transparent; border:1px solid var(--panel-border); color:var(--text);
    font-family:var(--sans); font-weight:700; font-size:13px;
    padding:10px 18px; border-radius:var(--r-md); cursor:pointer;
    transition:border-color .2s var(--ease), filter .2s var(--ease);
  }
  .pf-tg-btn:hover{ border-color:var(--gold); }
  .pf-tg-status{
    font-size:12px; color:var(--muted); margin-top:10px; line-height:1.6;
  }
  .pf-tg-status b{ color:var(--text); font-family:var(--mono); letter-spacing:0.04em; }
  .pf-tg-status a{ color:var(--gold); }

  /* ---- CSV import from an exchange (Sep 2026) ---- reads a Binance "Trade
     History" or Coinbase "Transaction History" export client-side (never
     uploaded anywhere), matches each symbol to a coin via the existing
     search endpoint, and shows a preview before anything is added — same
     "confirm before it touches localStorage" posture as the JSON backup
     import above. */
  .pf-csv-import{ margin:0 0 20px; text-align:center; }
  .pf-csv-hint{ font-size:11px; color:var(--muted); margin-top:8px; line-height:1.5; }
  .pf-csv-preview{ margin-top:14px; background:var(--field-bg); border:1px solid var(--panel-border); border-radius:14px; padding:14px; text-align:left; }
  .pf-csv-preview-head{ font-family:var(--mono); font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; }
  .pf-csv-preview-list{ max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
  .pf-csv-preview-row{ display:flex; justify-content:space-between; gap:10px; font-size:12px; font-family:var(--mono); padding:5px 0; border-bottom:1px solid var(--panel-border-soft); }
  .pf-csv-preview-warn{ font-size:11.5px; color:var(--muted); margin-bottom:12px; line-height:1.5; }
  .pf-csv-preview-actions{ display:flex; gap:8px; }
  .pf-csv-preview-actions .pf-backup-btn{ flex:1; }
  .pf-csv-preview-actions .pf-add-btn{ flex:2; margin-top:0; }
  .pf-computed-price{
    font-family:var(--mono); font-size:12px; color:var(--muted);
    margin-top:8px; min-height:16px;
  }
  .pf-computed-price b{color:var(--gold);}
  .pf-empty{
    text-align:center; color:var(--muted); font-size:13px;
    padding:30px 10px; line-height:1.7;
  }
  .pf-totals{
    display:flex; justify-content:space-around; text-align:center;
    background:var(--panel); border:1px solid var(--panel-border);
    border-radius:var(--r-lg); padding:20px 12px; margin-bottom:20px;
    box-shadow:var(--shadow-2);
  }
  .pf-totals .pf-tot-item{flex:1;}
  .pf-totals .pf-tot-label{
    font-family:var(--mono); font-size:10px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--muted); margin-bottom:8px;
  }
  .pf-totals .pf-tot-val{font-family:var(--mono); font-weight:700; font-size:19px; overflow-wrap:anywhere;}
  .pf-totals .pf-tot-val.pos{color:#16C784;}
  .pf-totals .pf-tot-val.neg{color:#EA3943;}
  .pf-percentile{
    background:rgba(240,185,11,0.09); border:1px solid rgba(240,185,11,0.28);
    border-radius:var(--r-lg); padding:14px 16px; margin-bottom:20px;
    font-size:13.5px; line-height:1.5;
  }
  .pf-percentile b{color:var(--gold);}
  .pf-percentile-note{
    font-family:var(--mono); font-size:10.5px; color:var(--muted);
    margin-top:6px; line-height:1.5;
  }
  .dhc-intro{text-align:center; padding:10px 4px;}
  .dhc-intro p{color:var(--muted); line-height:1.6; margin-bottom:14px; font-size:13.5px;}
  .dhc-streak{font-family:var(--mono); font-size:12.5px; color:var(--gold-soft); margin-bottom:14px;}
  .dhc-round{text-align:center; padding:16px 6px;}
  .dhc-round-label{font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:14px;}
  .dhc-pct{font-family:var(--mono); font-weight:700; font-size:42px; line-height:1;}
  .dhc-pct.pos{color:var(--green);}
  .dhc-pct.neg{color:var(--red);}
  .dhc-pct-sub{font-size:12px; color:var(--muted); margin-top:6px; margin-bottom:22px;}
  .dhc-question{font-weight:700; margin-bottom:16px; font-family:var(--sans);}
  .dhc-choice-row{display:flex; gap:12px;}
  .dhc-choice-btn{
    flex:1; padding:16px 10px; border-radius:var(--r-md); font-family:var(--sans);
    font-weight:700; font-size:15px; cursor:pointer; transition:transform .15s var(--ease), background .15s var(--ease);
    border:1px solid var(--panel-border); background:var(--field-bg); color:var(--text);
  }
  .dhc-choice-btn:hover{transform:translateY(-2px);}
  .dhc-choice-btn.hold{border-color:var(--gold); color:var(--gold);}
  .dhc-progress{margin-top:22px; font-size:19px; letter-spacing:5px; color:var(--muted);}
  .dhc-results{text-align:center; padding:10px 4px;}
  .dhc-score{font-family:var(--mono); font-weight:800; font-size:38px; color:var(--gold);}
  .dhc-grid{font-size:26px; letter-spacing:8px; margin:10px 0 16px;}
  .dhc-reveal{background:var(--field-bg); border:1px solid var(--panel-border); border-radius:var(--r-md); padding:16px; margin-bottom:16px; text-align:left; font-size:13.5px; line-height:1.6;}
  .dhc-reveal b{color:var(--gold);}
  .dhc-blurb{color:var(--muted); font-size:12.5px; margin-top:6px;}
  .dhc-next{font-size:11.5px; color:var(--muted); margin-top:10px;}
  .pf-share-btn{margin-bottom:20px;}
  .pf-coin-card{
    background:var(--panel); border:1px solid var(--panel-border);
    border-radius:var(--r-lg); padding:18px 20px; margin-bottom:14px;
    box-shadow:var(--shadow-1);
  }
  .pf-coin-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
  .pf-coin-head img, .pf-coin-head .avatar-fallback{width:28px; height:28px; border-radius:50%;}
  .pf-coin-head .avatar-fallback{
    background:rgba(240,185,11,0.15); color:var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-weight:700; font-size:13px;
  }
  .pf-coin-head .pf-coin-name{font-weight:700; font-size:15px;}
  .pf-coin-head .pf-coin-sym{font-family:var(--mono); font-size:11px; color:var(--muted);}
  .pf-coin-head-info{flex:1;}
  .pf-coin-del{
    background:none; border:none; color:var(--muted); cursor:pointer;
    font-size:15px; padding:4px 8px; line-height:1; border-radius:6px;
    margin-left:auto;
  }
  .pf-coin-del:hover{color:#EA3943; background:rgba(234,57,67,0.08);}
  .pf-coin-stats{
    display:grid; grid-template-columns:1fr 1fr; gap:10px 16px;
    font-family:var(--mono); font-size:12.5px; margin-bottom:12px;
  }
  .pf-coin-stats .pf-stat-label{color:var(--muted); margin-bottom:3px; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em;}
  .pf-coin-stats .pf-stat-val{color:var(--text); font-weight:600;}
  .pf-pnl{
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    padding-top:12px; border-top:1px dashed var(--panel-border-soft);
  }
  .pf-pnl-val{font-family:var(--mono); font-weight:700; font-size:16px;}
  .pf-pnl-val.pos{color:#16C784;}
  .pf-pnl-val.neg{color:#EA3943;}
  .pf-entries-toggle{
    font-family:var(--mono); font-size:11px; color:var(--muted);
    background:none; border:none; cursor:pointer; padding:0; margin-top:12px;
    text-decoration:underline; text-underline-offset:2px;
  }
  .pf-entries-toggle:hover{color:var(--gold);}
  .pf-entry-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:12px; padding:8px 0; border-top:1px dashed var(--panel-border-soft);
    color:var(--muted);
  }
  .pf-entry-note{font-style:italic; opacity:0.75;}
  .pf-entry-row .pf-entry-del, .pf-entry-row .pf-entry-edit{
    background:none; border:none; color:var(--muted); cursor:pointer;
    font-size:14px; padding:2px 6px; line-height:1;
  }
  .pf-entry-row .pf-entry-del:hover{color:#EA3943;}
  .pf-entry-row .pf-entry-edit:hover{color:var(--gold);}
  /* Inline edit form for a single purchase entry — lets someone who sold
     part of a coin correct the remaining quantity (and, if relevant, the
     amount spent) on that exact entry, instead of deleting and re-adding it
     from scratch. Deliberately just two raw number fields, same as the "add
     a purchase" form above. Realized-sale tracking itself now lives in the
     separate .pf-sell-form below — deleting/editing a BUY entry here is
     never a sell and never touches pfSells. */
  .pf-entry-edit-form{
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    padding:8px 0; border-top:1px dashed var(--panel-border-soft);
  }
  .pf-entry-edit-form input{
    width:84px; font-family:var(--mono); font-size:12px;
    background:var(--field-bg); color:var(--text);
    border:1px solid var(--panel-border); border-radius:6px; padding:6px 8px;
  }
  .pf-entry-edit-form input:focus{border-color:var(--gold); outline:none;}
  .pf-entry-edit-form label{font-size:10.5px; color:var(--muted); margin-right:-2px;}
  .pf-edit-save, .pf-edit-cancel{
    background:none; border:none; cursor:pointer; font-size:15px;
    padding:2px 7px; line-height:1; margin-left:auto;
  }
  .pf-edit-save{color:#16C784;}
  .pf-edit-cancel{color:var(--muted); margin-left:2px;}
  .pf-edit-cancel:hover{color:#EA3943;}
  /* Sell-transaction foundation: a sold-row reuses .pf-entry-row's layout
     (via the shared class) with a slightly muted tone so a glance tells buys
     and sells apart; the record-sale form mirrors .pf-entry-edit-form's
     look, just with its own three fields and no separate "cancel" control —
     the whole block collapses back via the same toggle button above it. */
  .pf-sell-row{opacity:0.85;}
  .pf-sell-row .pf-sell-del{
    background:none; border:none; color:var(--muted); cursor:pointer;
    font-size:14px; padding:2px 6px; line-height:1;
  }
  .pf-sell-row .pf-sell-del:hover{color:#EA3943;}
  .pf-sell-form{
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    padding:10px 0 4px; margin-top:4px; border-top:1px dashed var(--panel-border-soft);
  }
  .pf-sell-form input{
    width:84px; font-family:var(--mono); font-size:12px;
    background:var(--field-bg); color:var(--text);
    border:1px solid var(--panel-border); border-radius:6px; padding:6px 8px;
  }
  .pf-sell-form input[type="date"]{width:132px;}
  .pf-sell-form input:focus{border-color:var(--gold); outline:none;}
  .pf-sell-form label{font-size:10.5px; color:var(--muted); margin-right:-2px;}
  .pf-sell-save{
    background:rgba(22,199,132,0.12); border:1px solid rgba(22,199,132,0.35); color:#16C784;
    cursor:pointer; font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px;
    margin-left:auto;
  }
  .pf-sell-save:hover{background:rgba(22,199,132,0.2);}
  .pf-sells-toggle{
    background:rgba(226,75,74,0.12); border:1px solid rgba(226,75,74,0.45); color:var(--red, #E24B4A);
    font-family:var(--mono); font-size:12px; font-weight:700; cursor:pointer;
    padding:8px 14px; border-radius:999px; transition:border-color .2s var(--ease), background .2s var(--ease);
  }
  .pf-sells-toggle:hover{border-color:var(--red, #E24B4A); background:rgba(226,75,74,0.22);}
  .pf-quick-sell{
    background:rgba(226,75,74,0.14); border:1px solid rgba(226,75,74,0.4); color:var(--red, #E24B4A);
    font-family:var(--sans); font-size:11.5px; font-weight:700; cursor:pointer;
    padding:6px 10px; border-radius:999px; white-space:nowrap;
    transition:border-color .2s var(--ease), background .2s var(--ease);
  }
  .pf-quick-sell:hover{border-color:var(--red, #E24B4A); background:rgba(226,75,74,0.26);}
  .pf-quick-sell-tile{
    position:absolute; top:12px; left:auto; right:12px; z-index:2;
    padding:5px 8px; font-size:14px;
  }

  /* ═══ Portfolio v2: hero, quick actions, fumble-check, allocation, rows ═══ */
  .pf2-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
  .pf2-title{font-family:var(--sans); font-weight:800; font-size:21px; letter-spacing:-0.02em;}
  .pf2-header-actions{display:flex; align-items:center; gap:10px;}
  .pf2-icon-btn{width:38px; height:38px; border-radius:11px; background:var(--panel); border:1px solid var(--panel-border); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:border-color .2s var(--ease), transform .2s var(--ease);}
  .pf2-icon-btn:hover{border-color:var(--gold); transform:translateY(-1px);}
  .pf2-icon-btn-gold{background:linear-gradient(180deg, var(--gold-soft), var(--gold)); border:none; box-shadow:0 8px 18px -8px rgba(240,185,11,0.55);}
  .pf2-hero{background:radial-gradient(ellipse 380px 200px at 15% -20%, rgba(240,185,11,0.12), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 42%), var(--panel); border:1px solid var(--panel-border); border-radius:var(--r-xl); padding:24px; margin-bottom:16px; box-shadow:var(--shadow-2);}
  .pf2-hero-label{font-family:var(--mono); font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;}
  .pf2-hero-value-row{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px;}
  .pf2-hero-value{font-family:var(--sans); font-weight:800; font-size:clamp(28px,7vw,38px); letter-spacing:-0.02em;}
  .pf2-badge{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-weight:700; font-size:13px; padding:5px 10px; border-radius:999px;}
  .pf2-badge.pos{background:rgba(22,199,132,0.14); color:var(--green);}
  .pf2-badge.neg{background:rgba(234,57,67,0.14); color:var(--red);}
  .pf2-hero-sub{font-family:var(--mono); font-size:11px; color:var(--muted); margin-bottom:14px;}
  .pf2-chart-wrap{margin-bottom:4px;}
  .pf2-chart-caption{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:4px;}
  .pf2-quick{display:flex; justify-content:space-between; margin-bottom:18px; padding:0 4px;}
  .pf2-quick-item{display:flex; flex-direction:column; align-items:center; gap:7px; background:none; border:none; cursor:pointer; padding:0;}
  .pf2-quick-icon{width:44px; height:44px; border-radius:14px; background:var(--field-bg); border:1px solid var(--panel-border); display:flex; align-items:center; justify-content:center; transition:border-color .2s var(--ease), transform .2s var(--ease);}
  .pf2-quick-item:hover .pf2-quick-icon{border-color:var(--gold); transform:translateY(-1px);}
  .pf2-quick-icon-gold{background:linear-gradient(180deg, var(--gold-soft), var(--gold)) !important; border:none !important; box-shadow:0 10px 20px -10px rgba(240,185,11,0.55);}
  .pf2-quick-label{font-family:var(--mono); font-size:9.5px; color:var(--muted); letter-spacing:0.03em;}
  .pf2-fumble{background:linear-gradient(135deg, rgba(240,185,11,0.10), rgba(234,57,67,0.05) 60%), var(--panel); border:1px solid rgba(240,185,11,0.28); border-radius:var(--r-xl); padding:22px; margin-bottom:16px; box-shadow:var(--shadow-2);}
  .pf2-fumble-head{display:flex; align-items:center; gap:8px; margin-bottom:14px;}
  .pf2-fumble-badge{width:26px; height:26px; border-radius:50%; background:rgba(240,185,11,0.18); color:var(--gold); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:12px; flex-shrink:0;}
  .pf2-fumble-kicker{font-family:var(--mono); font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--gold);}
  .pf2-fumble-copy{font-family:var(--sans); font-size:14.5px; line-height:1.5; color:var(--text); margin-bottom:14px;}
  .pf2-fumble-row{display:flex; align-items:center; justify-content:space-between; background:rgba(0,0,0,0.18); border-radius:16px; padding:14px 16px; gap:10px;}
  .pf2-fumble-stat-label{font-family:var(--mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px;}
  .pf2-fumble-stat-val{font-family:var(--sans); font-weight:800; font-size:20px;}
  .pf2-fumble-delta{font-family:var(--mono); font-weight:700; font-size:15px;}
  .pf2-fumble-delta.pos{color:var(--green);} .pf2-fumble-delta.neg{color:var(--red);}
  .pf2-fumble-verdict{font-family:var(--sans); font-size:13px; color:var(--muted); margin-top:10px;}
  .pf2-perf-row{display:flex; gap:10px; margin-bottom:16px;}
  .pf2-perf-card{flex:1; background:var(--panel); border:1px solid var(--panel-border); border-radius:16px; padding:14px; box-shadow:var(--shadow-1);}
  .pf2-perf-head{display:flex; align-items:center; gap:6px; margin-bottom:8px;}
  .pf2-perf-label{font-family:var(--mono); font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);}
  .pf2-perf-val{display:flex; align-items:baseline; gap:8px; font-family:var(--mono); font-weight:700; font-size:15px;}
  .pf2-perf-val.pos{color:var(--green);} .pf2-perf-val.neg{color:var(--red);}
  .pf2-alloc{background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 42%), var(--panel); border:1px solid var(--panel-border); border-radius:var(--r-xl); padding:24px; margin-bottom:20px; box-shadow:var(--shadow-2);}
  .pf2-alloc-label{font-family:var(--mono); font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--muted); margin-bottom:16px;}
  .pf2-alloc-body{display:flex; align-items:center; gap:22px;}
  .pf2-ring{position:relative; width:112px; height:112px; flex-shrink:0; border-radius:50%;}
  .pf2-ring-hole{position:absolute; inset:16px; border-radius:50%; background:var(--panel); display:flex; flex-direction:column; align-items:center; justify-content:center;}
  .pf2-ring-hole-label{font-family:var(--mono); font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);}
  .pf2-ring-hole-val{font-family:var(--sans); font-weight:800; font-size:20px;}
  .pf2-legend{flex:1; display:flex; flex-direction:column; gap:10px; min-width:0;}
  .pf2-legend-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .pf2-legend-dot{width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0;}
  .pf2-legend-name{display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .pf2-legend-pct{font-family:var(--mono); font-size:12px; color:var(--muted); flex-shrink:0;}
  .pf2-add-toggle-btn{width:100%; background:var(--field-bg); border:1px dashed var(--panel-border); color:var(--muted); font-family:var(--sans); font-weight:700; font-size:13px; padding:14px; border-radius:var(--r-md); cursor:pointer; margin-bottom:20px; transition:border-color .2s var(--ease), color .2s var(--ease);}
  .pf2-add-toggle-btn:hover{border-color:var(--gold); color:var(--gold);}
  .pf2-holdings-label{font-family:var(--mono); font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; padding:0 2px;}
  .pf2-row{background:var(--panel); border:1px solid var(--panel-border); border-radius:18px; padding:16px; box-shadow:var(--shadow-1); margin-bottom:8px; cursor:pointer;}
  .pf2-row-head{display:flex; align-items:center; gap:12px;}
  .pf2-row-avatar{width:36px; height:36px; border-radius:50%; flex-shrink:0;}
  .pf2-row-info{flex:1; min-width:0;}
  .pf2-row-name{font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .pf2-row-qty{font-family:var(--mono); font-size:11px; color:var(--muted);}
  .pf2-row-spark{flex-shrink:0;}
  .pf2-row-right{text-align:right; flex-shrink:0;}
  .pf2-row-val{font-family:var(--mono); font-weight:700; font-size:14px;}
  .pf2-row-pct{font-family:var(--mono); font-weight:700; font-size:11px;}
  .pf2-row-pct.pos{color:var(--green);} .pf2-row-pct.neg{color:var(--red);}
  .pf2-row-detail{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--panel-border-soft);}
  .pf2-row-detail-label{color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px;}
  .pf2-row-detail-val{font-weight:600; font-size:12.5px;}
  .pf2-row-purchases{margin-top:14px; padding-top:14px; border-top:1px solid var(--panel-border-soft); display:flex; flex-direction:column; gap:2px;}
  .pf2-row-remove{margin-top:12px; background:none; border:none; color:var(--muted); font-family:var(--sans); font-size:11.5px; cursor:pointer; padding:4px 0;}
  .pf2-row-remove:hover{color:var(--red);}
  .pf2-utility-row{display:flex; gap:8px; margin:20px 0 18px;}
  .pf2-utility-btn{flex:1; display:flex; align-items:center; justify-content:center; gap:7px; background:var(--field-bg); border:1px solid var(--panel-border); color:var(--muted); font-family:var(--sans); font-weight:700; font-size:12px; padding:11px; border-radius:12px; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease);}
  .pf2-utility-btn:hover{border-color:var(--gold); color:var(--gold);}
  @media(max-width:480px){
    .pf2-alloc-body{gap:14px;}
    .pf2-ring{width:92px; height:92px;} .pf2-ring-hole{inset:13px;}
    .pf2-row-detail{grid-template-columns:repeat(2,1fr); row-gap:12px;}
  }
  /* ═══ Portfolio v3 (Sep 2026 update): hero range control + bigger chart,
     desktop holdings table, mobile neon tiles, coin-detail overlay, compact
     receipt+roast row ═══
     Table vs. neon-tile holdings switch at 700px — the same breakpoint this
     file's JS already uses for "is this a phone" checks
     (matchMedia('(max-width:700px)')), so the visual switch lines up with
     every other mobile/desktop decision already made here. */
  .pf2-range-menu{display:flex; gap:4px; justify-content:flex-end; margin-bottom:14px;}
  .pf2-range-btn{font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--muted); background:var(--field-bg); border:1px solid var(--panel-border); padding:6px 12px; border-radius:999px; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease);}
  .pf2-range-btn:hover{border-color:var(--gold); color:var(--gold-soft);}
  .pf2-range-btn.active{background:rgba(240,185,11,0.14); border-color:rgba(240,185,11,0.4); color:var(--gold-soft);}
  .pf2-range-btn:disabled{cursor:default; opacity:0.55;}
  /* ---- "Portfolio vs BTC/ETH/Cash" benchmark toggles (Sprint 1) ----
     Off by default — the portfolio's own gold line is the point of the
     chart; BTC/ETH/Cash are opt-in overlays so the chart doesn't start
     cluttered. Each toggle's accent color matches the line it draws. */
  .pf2-bench-menu{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
  .pf2-bench-static{font-family:var(--mono); font-size:10.5px; font-weight:800; color:var(--text); padding:5px 11px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(240,185,11,.42); background:rgba(240,185,11,.10);}
  .pf2-bench-static .pf2-bench-dot{background:var(--gold);}
  .pf2-bench-btn{font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--muted); background:var(--field-bg); border:1px solid var(--panel-border); padding:5px 11px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);}
  .pf2-bench-btn:hover{border-color:var(--panel-border); color:var(--text);}
  .pf2-bench-dot{width:7px; height:7px; border-radius:50%; background:var(--muted); flex-shrink:0;}
  .pf2-bench-btn.active .pf2-bench-dot{background:var(--bench-color);}
  .pf2-bench-btn.active{border-color:var(--bench-color); color:var(--text); background:color-mix(in srgb, var(--bench-color) 14%, transparent);}
  .pf2-range-btn:disabled:hover{border-color:var(--panel-border); color:var(--muted);}
  .pf2-chart-wrap svg{display:block;}
  .pf2-chart-caption span{white-space:nowrap;}
  /* Zero-state hero chart / allocation ring — same frames as the live
     versions (see pfRender()'s pfEntries.length===0 branch) so the
     dashboard reads as "waiting for data", not as a missing feature. */
  .pf2-chart-wrap-empty{position:relative;}
  .pf2-chart-empty-label{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    text-align:center; padding:0 24px;
    font-family:var(--mono); font-size:11px; color:var(--muted); opacity:0.8;
  }
  .pf2-ring-empty{background:var(--field-bg) !important; border:2px dashed var(--panel-border);}
  .pf2-legend-empty{font-size:11.5px; color:var(--muted); line-height:1.5; max-width:220px;}

  /* ---- Desktop holdings table ---- */
  .pf2-holdings-table-wrap{display:none; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  table.pf2-table{width:100%; border-collapse:collapse; min-width:560px;}
  table.pf2-table th{text-align:right; font-family:var(--mono); font-size:9.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:0 8px 10px; border-bottom:1px solid var(--panel-border); white-space:nowrap;}
  table.pf2-table th:first-child, table.pf2-table td:first-child{text-align:left;}
  table.pf2-table td{padding:13px 8px; text-align:right; border-bottom:1px solid var(--panel-border-soft); font-size:12.5px;}
  table.pf2-table tr{cursor:pointer;}
  table.pf2-table tr:hover td{background:rgba(255,255,255,0.02);}
  table.pf2-table tr:last-child td{border-bottom:none;}
  table.pf2-table td.mono{font-family:var(--mono);}
  table.pf2-table td.pos{color:var(--green); font-family:var(--mono); font-weight:700;}
  table.pf2-table td.neg{color:var(--red); font-family:var(--mono); font-weight:700;}
  .pf2-asset-cell{display:flex; align-items:center; gap:9px;}
  .pf2-asset-icon{width:26px; height:26px; border-radius:50%; flex-shrink:0;}
  .pf2-asset-name{font-weight:700; font-size:12.5px; white-space:nowrap;}
  .pf2-asset-sym{font-family:var(--mono); font-size:10px; color:var(--muted);}

  /* ---- Mobile neon tiles ---- */
  .pf2-neon-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .pf2-neon-tile{position:relative; background:linear-gradient(160deg, var(--panel), rgba(255,255,255,0) 120%) var(--panel); border:1px solid var(--panel-border); border-radius:18px; padding:14px; overflow:hidden; cursor:pointer; box-shadow:var(--shadow-1);}
  .pf2-neon-tile::before{content:''; position:absolute; inset:-40%; background:radial-gradient(circle at 30% 20%, var(--glow) 0%, transparent 60%); opacity:0.30; pointer-events:none;}
  .pf2-neon-ring{width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; background:var(--field-bg); box-shadow:0 0 0 2px var(--glow), 0 0 16px var(--glow);}
  .pf2-neon-icon{width:24px; height:24px; border-radius:50%;}
  .pf2-neon-sym{font-family:var(--mono); font-weight:700; font-size:12.5px; margin-top:10px; position:relative; z-index:1;}
  .pf2-neon-qty{font-family:var(--mono); font-size:10px; color:var(--muted); position:relative; z-index:1;}
  .pf2-neon-val{font-weight:800; font-size:16px; margin-top:8px; position:relative; z-index:1;}
  .pf2-neon-chg{font-family:var(--mono); font-size:11px; font-weight:700; margin-top:2px; position:relative; z-index:1;}
  .pf2-neon-chg.pos{color:var(--green);} .pf2-neon-chg.neg{color:var(--red);}
  .pf2-neon-tap{display:none; position:absolute; top:12px; right:12px; opacity:0.4; z-index:1; font-family:var(--mono); font-size:11px; color:var(--text);}

  @media(min-width:701px){
    .pf2-holdings-table-wrap{display:block;}
    .pf2-neon-grid{display:none;}
  }

  /* ═══ Portfolio v3.1 (bento hero+alloc, adaptive mobile tiles, mobile
     reorder — Sep 2026) ═══
     Desktop ≥701px: the hero chart and the allocation ring used to be two
     stacked full-width cards (ring stuck at 112px) — that read as "boring"
     next to the reference bento layout, so they now sit side by side as
     one row, with a much bigger ring. #pfHero/#pfAllocCard are placed
     explicitly into that row; every OTHER direct child of #portfolioView
     keeps spanning the full width via the `> *` reset below it, so the
     rest of the page's order is untouched.
     Mobile ≤700px: holdings move directly under the hero chart (the
     table/tiles used to be much further down), and once a portfolio has
     more than 4 coins the neon tiles switch to a denser 3-per-row layout
     so more of them fit on screen at once. #pfCoinOverlay is
     position:fixed, so neither rule below affects it. */
  @media(min-width:701px){
    #portfolioView{display:grid; grid-template-columns:1.7fr 1fr; column-gap:18px;}
    #portfolioView > *{grid-column:1/-1;}
    #pfHero{grid-column:1; grid-row:2;}
    #pfAllocCard{grid-column:2; grid-row:2;}
    #pfAllocCard:empty{display:none;}
    #portfolioView:has(#pfAllocCard:empty) #pfHero{grid-column:1/-1;}
    #pfAllocCard .pf2-alloc{height:100%; display:flex; flex-direction:column; margin-bottom:0;}
    #pfAllocCard .pf2-alloc-body{flex:1; flex-direction:column; justify-content:center; gap:22px;}
    #pfAllocCard .pf2-ring{width:190px; height:190px; margin:0 auto;}
    #pfAllocCard .pf2-ring-hole{inset:30px;}
    #pfAllocCard .pf2-ring-hole-val{font-size:26px;}
    #pfAllocCard .pf2-legend{flex:none; width:100%;}
  }
  @media(max-width:700px){
    #portfolioView{display:flex; flex-direction:column;}
    #pfHero{order:1;}
    #pfHoldingsLabel{order:2;}
    #pfContent{order:3;}
    #pfQuickActions{order:4;}
    #pfFumbleCheck{order:5;}
    #pfPerfRow{order:6;}
    #pfAllocCard{order:7;}
    #pfAddPanel{order:8;}
    #portfolioView > .pf-note{order:9;}
    #pfSettingsPanel{order:10;}
    #pfBottomRow{order:11;}
  }
  .pf2-neon-grid-compact{grid-template-columns:repeat(3,1fr); gap:8px;}
  .pf2-neon-grid-compact .pf2-neon-tile{padding:10px; border-radius:14px;}
  .pf2-neon-grid-compact .pf2-neon-ring{width:32px; height:32px;}
  .pf2-neon-grid-compact .pf2-neon-icon{width:18px; height:18px;}
  .pf2-neon-grid-compact .pf2-neon-sym{font-size:11px; margin-top:6px;}
  .pf2-neon-grid-compact .pf2-neon-qty{font-size:9px;}
  .pf2-neon-grid-compact .pf2-neon-val{font-size:13px; margin-top:5px;}
  .pf2-neon-grid-compact .pf2-neon-chg{font-size:9.5px;}
  .pf2-neon-grid-compact .pf2-neon-tap{top:8px; right:8px; font-size:9px;}

  /* ---- Coin detail overlay ---- */
  .pf2-coin-overlay{position:fixed; inset:0; z-index:9999; display:none; align-items:flex-start; justify-content:center; padding:24px; background:rgba(3,5,8,0.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); overflow-y:auto;}
  .pf2-coin-overlay.open{display:flex;}
  .pf2-coin-panel{position:relative; width:min(440px,100%); background:#11141a; border:1px solid var(--panel-border); border-radius:24px; box-shadow:0 30px 90px rgba(0,0,0,0.65); padding:20px; margin:12px 0 40px;}
  .pf2-coin-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
  .pf2-coin-back{width:34px; height:34px; border-radius:10px; background:var(--panel); border:1px solid var(--panel-border); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .pf2-coin-overlay-title{font-weight:800; font-size:15px;}
  .pf2-coin-head{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
  .pf2-coin-head-icon{width:46px; height:46px; border-radius:50%;}
  .pf2-coin-name{font-weight:800; font-size:18px;}
  .pf2-coin-bought{font-family:var(--mono); font-size:11px; color:var(--muted); display:flex; align-items:center; gap:6px; margin-top:3px;}
  .pf2-coin-bought-dot{width:5px; height:5px; border-radius:50%; background:var(--gold);}
  .pf2-coin-stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; background:var(--field-bg); border:1px solid var(--panel-border); border-radius:18px; padding:16px; margin-bottom:16px;}
  .pf2-coin-stat-lbl{font-family:var(--mono); font-size:9px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:4px;}
  .pf2-coin-stat-val{font-family:var(--mono); font-size:17px; font-weight:700;}
  .pf2-coin-stat-val.pos{color:var(--green);} .pf2-coin-stat-val.neg{color:var(--red);}
  .pf2-coin-chart-card{background:var(--field-bg); border:1px solid var(--panel-border); border-radius:18px; padding:16px; margin-bottom:16px;}
  .pf2-coin-chart-title{font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:10px;}
  .pf2-coin-chart-empty{font-family:var(--sans); font-size:12.5px; color:var(--muted); padding:20px 0; text-align:center;}
  .pf2-coin-actions{display:flex; gap:10px; margin-bottom:16px;}
  .pf2-coin-pill{flex:1; text-align:center; font-family:var(--mono); font-size:11px; font-weight:700; border:1.5px solid rgba(240,185,11,0.4); background:none; color:var(--gold-soft); border-radius:999px; padding:11px 6px; cursor:pointer;}
  .pf2-coin-pill:hover{border-color:var(--gold); background:rgba(240,185,11,0.08);}
  .pf2-coin-snapshot{margin-bottom:14px;}
  .pf2-coin-snap-head{display:flex; justify-content:space-between; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; opacity:0.6; margin-bottom:10px; font-weight:700;}
  .pf2-coin-snap-line{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:8px;}
  .pf2-coin-snap-line span:last-child{font-weight:700;}
  .pf2-coin-purchases{margin-top:6px;}
  @media(max-width:480px){
    .pf2-coin-panel{padding:16px;}
    .pf2-coin-stat-grid{padding:14px;}
  }

  /* ---- Compact receipt + roast bottom row ----
     The Roast entry point itself (.cf-stories.xs-inline, a single CTA button)
     is injected by the separate experiences/app.js module and owns its own
     click behaviour (opens a <dialog> with the actual roast text) — out of
     scope here, so instead of faking roast copy this just restyles that
     existing button into a companion card via scoped overrides. */
  .pf2-bottom-row{display:grid; grid-template-columns:0.9fr 1.4fr; gap:16px; margin:20px 0 16px; align-items:stretch;}
  .pf2-bottom-row .pf2-receipt-wrap{margin-bottom:0;}
  .pf2-bottom-row .pf2-receipt-wrap .receipt{margin:0; max-width:none; height:100%;}
  .receipt.pf2-receipt-compact{display:flex; align-items:center; gap:14px; padding:16px 18px 14px; text-align:left;}
  .pf2-r-score-mini{text-align:center; flex:none;}
  .pf2-r-score-mini b{font-size:22px; display:block; line-height:1.1;}
  .pf2-r-score-mini span{font-size:8px; letter-spacing:0.05em; opacity:0.6; display:block; margin-top:2px;}
  .pf2-r-div{width:1px; align-self:stretch; background:rgba(42,36,24,0.25); flex:none;}
  .pf2-r-lines{flex:1; min-width:0;}
  .pf2-r-line{display:flex; justify-content:space-between; font-size:11px; margin-bottom:4px; gap:10px;}
  .pf2-r-line span:last-child{font-weight:700;}
  .pf2-r-btn-mini{font-size:10px; font-weight:700; letter-spacing:0.03em; border:1.5px dashed rgba(42,36,24,0.4); border-radius:7px; padding:7px 11px; text-align:center; flex:none; text-transform:uppercase; white-space:nowrap; cursor:pointer; background:none; color:inherit; font-family:inherit;}
  #pfBottomRow .cf-stories.xs-inline{margin:0; background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--r-xl); padding:20px; box-shadow:var(--shadow-2); display:flex; align-items:center; gap:14px;}
  #pfBottomRow .cf-stories.xs-inline::before{content:'🔥 Roast'; font-family:var(--mono); font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--gold); flex:1; text-align:left;}
  #pfBottomRow .cf-stories.xs-inline button{width:auto; flex:none;}
  @media(max-width:700px){
    .pf2-bottom-row{grid-template-columns:1fr;}
  }
  /* Constellation/"map view" toggle (MapToggle.dc.html) was explicitly
     marked optional/deferred by the site owner — intentionally not built
     in this update. */
  /* The install/push banners sit above the page tabs and apply to every
     view — on Portfolio they were competing with the hero for the first
     screenful with nothing to do with tracking purchases, so they're force-
     hidden there. !important is required: their own JS toggles the same
     elements' inline display style independently (beforeinstallprompt,
     push-permission flow), and this rule has to win over that regardless of
     which one fires first. */
  body.pf-view-active #installBanner, body.pf-view-active #installIosHint, body.pf-view-active #pushBanner{display:none !important;}
  /* "Popular scenarios" is a global footer block (repositioned into the
     calculator's desktop sidebar at ≥980px, otherwise shown inline) — it has
     nothing to do with a real portfolio and Ruslan asked for it gone from
     the Portfolio tab specifically, both mobile and desktop. */
  body.pf-view-active #scenarioLinksBlock, body.pf-view-active #scenarioLinksAnchor{display:none !important;}
  .pf2-empty{background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--r-xl); padding:32px 24px; text-align:center; box-shadow:var(--shadow-1);}
  .pf2-empty-icon{font-size:34px; margin-bottom:10px;}
  .pf2-empty-title{font-family:var(--sans); font-weight:800; font-size:17px; margin-bottom:6px;}
  .pf2-empty-copy{font-family:var(--sans); font-size:13.5px; color:var(--muted); line-height:1.5; margin-bottom:20px;}
  .pf2-empty-cta{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(180deg, var(--gold-soft), var(--gold)); color:#1A1400; font-family:var(--sans); font-weight:800; font-size:14px; padding:13px 26px; border:none; border-radius:999px; cursor:pointer; box-shadow:0 10px 24px -10px rgba(240,185,11,0.55); transition:transform .2s var(--ease);}
  .pf2-empty-cta:hover{transform:translateY(-1px);}
  .pf2-empty-presets-label{font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin:26px 0 10px;}
  .pf2-preset-row{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}
  .pf2-preset-btn{background:var(--field-bg); border:1px solid var(--panel-border); color:var(--text); font-family:var(--sans); font-weight:700; font-size:12.5px; padding:9px 14px; border-radius:999px; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease);}
  .pf2-preset-btn:hover{border-color:var(--gold); color:var(--gold);}
  .pf2-preset-btn:disabled{opacity:0.55; cursor:wait;}
  .pf2-receipt-wrap{margin-bottom:20px;}
  .pf2-receipt-wrap .receipt{margin:0 auto; max-width:340px;}
  /* ═══ Mobile compactness pass ═══ */
  /* On a real phone with a real long chart history, the space ABOVE the
     receipt (hero text + daily-regret box + the calculator panel itself)
     plus the receipt's own internal spacing added up to ~2000px of
     scrolling before the action buttons ever appeared — a user reported
     the "Add to portfolio" button as effectively "missing" on their phone
     purely because of how far down it sat, even though it renders
     correctly. This tightens vertical spacing ONLY below 480px (small
     phones) — desktop and tablet keep the original, more spacious design,
     since the receipt's current size is deliberately kept large there for
     screenshot/share impact. Tap targets (button padding, input fields)
     are left untouched so nothing gets harder to tap; this only removes
     extra breathing room between sections.
     Canvas-rendered exports (share card, certificate, premium export) are
     drawn by separate JS code at fixed pixel dimensions and are NOT
     affected by any of this — this is page CSS only. */
  @media (max-width:480px){
    .eyebrow{margin-bottom:10px;}
    h1{font-size:clamp(26px, 7.5vw, 44px); margin-bottom:8px;}
    .sub{margin-bottom:16px;}
    .pf-promo{padding:12px 26px 12px 12px; margin-bottom:14px; font-size:11.5px; gap:10px;}
    .pf-promo-icon{font-size:18px;}
    .pf-promo-title{font-size:13px;}
    .pf-promo-sub{font-size:11px; margin-bottom:8px;}
    /* Portfolio card "Currently worth / P&L" row: at 375px, once amounts get
       big (e.g. a real BTC position), the label and the value no longer fit
       side by side, and each span's own text was wrapping mid-content —
       "Currently worth" splitting from its number, "+$24,278" splitting from
       "(+161.9%)". Letting the row wrap keeps each span intact as a whole
       unit; it just drops to its own line instead of breaking mid-word. */
    .pf-pnl{flex-wrap:wrap; row-gap:4px;}
    .pf-pnl span{white-space:nowrap;}
    /* Same idea for the "Total invested / Worth now / P&L" summary strip at
       the top of the portfolio tab: 3 equal columns is fine for small
       numbers, but this app's whole premise is "what if you'd bought dirt
       cheap" — a tiny buy of an early/cheap coin can turn into a 5-6 digit
       gain, and a wide percentage like "+2078300.0%" doesn't fit a ~110px
       column. Without room to wrap, it was bleeding across into the next
       column instead ("$207,840+2078300.0%" running together). 2 columns
       gives each value roughly double the width; P/L drops to its own
       centered row when there's an odd one out. */
    .pf-totals{flex-wrap:wrap; row-gap:16px; column-gap:10px;}
    .pf-totals .pf-tot-item{flex:1 1 45%; min-width:45%;}
    .pf-totals .pf-tot-val{font-size:16px;}
    .regret-counter{margin-bottom:12px;}
    .daily-regret{padding:12px 14px; margin-bottom:14px;}
    .panel{padding:16px; margin-bottom:14px;}
    .field{margin-bottom:12px;}
    #receipt-holder{margin-top:12px;}
    .receipt{padding:16px 14px 12px;}
    .r-sub{margin-bottom:10px;}
    .dashed{margin:8px 0;}
    .r-big{margin:10px 0 6px;}
    .r-mult-wrap{margin-bottom:3px;}
    .hero-receipt-wrap .r-regret-line{font-size:10.5px; margin-top:5px;}
    .r-tier{margin-bottom:6px;}
    .r-score-line{font-size:10px; margin-bottom:6px;}
    .r-chart-wrap{margin:8px 0 4px;}
    .r-compare{margin-top:8px;}
    .r-sold-peak{margin-top:8px;}
    .r-footer{margin-top:8px;}
    .share-cta, .cta-invest{margin-top:10px;}
    /* Топ-10 тикер сворачивается до 3 строк на телефоне (Фаза 52, по просьбе
       Руслана — было 5) — сам тикер идёт уже после чека и кнопок, так что
       это не приближает "Add to portfolio" (это уже почти выжато выше), а
       просто укорачивает то, что осталось ниже, для тех, кто листает до
       конца страницы. */
    .live-feed-list:not(.expanded) .live-feed-row:nth-child(n+4){ display:none; }
    .ticker-toggle{ display:block; }
    /* "True story" (bitcoin pizza easter egg) collapses on mobile — only the
       label and arrow show by default, the full text+button open on tap, so
       it doesn't lengthen the page for people not interested in reading it
       right now. */
    .pizza-toggle{ display:inline-flex; }
    .pizza-fact-body{ display:none; }
    .pizza-fact-body.open{ display:block; }
    /* Page tabs on narrow phones (Фаза 50) — at the original 13px, none of
       "Calculator"/"Portfolio"/"Challenge" reliably fit their third of the
       row, so overflow-wrap:anywhere from Фаза 36 sometimes broke a word
       mid-character instead of cleanly at a space. Shrinking font/padding
       just at this width is enough for every tab to fit on one line (or, at
       most, wrap only at a real word boundary) on typical phones.
       overflow-wrap:anywhere on .page-tab above stays as a safety net for
       even narrower screens. */
    .page-tab{ font-size:9.5px; padding:7px 2px; letter-spacing:-0.01em; }
  }

/* EN design layer 2 */
/* CryptoFumble compact result presentation — design unchanged, visual weight reduced. */
@media (min-width:701px){
  #storyReceiptHolder{max-width:560px;margin:0 auto 16px;}
  #storyReceiptHolder .story-receipt{padding:19px 19px 18px;border-radius:19px;}
  #storyReceiptHolder .story-visual{max-width:470px;margin:13px auto 14px;}
  #storyReceiptHolder .story-object,#storyReceiptHolder .story-btc{min-height:112px;border-radius:16px;}
  #storyReceiptHolder .story-icon{font-size:46px;}
  #storyReceiptHolder .story-btc-coin{width:52px;height:52px;font-size:31px;}
  #storyReceiptHolder .story-values{max-width:470px;margin-bottom:12px;}
  #storyReceiptHolder .story-title{font-size:24px;}
  #storyReceiptHolder .story-value-num{font-size:25px;}
  #storyReceiptHolder .story-mult{font-size:29px;}
  #storyReceiptHolder .story-footer{margin-top:12px;padding-top:10px;font-size:18px;}

  #receipt-holder{max-width:500px;margin:16px auto 0;}
  #receipt-holder > .receipt{padding:20px 18px 17px;}
  #receipt-holder > .receipt .r-title{font-size:10px;}
  #receipt-holder > .receipt .r-sub{font-size:10px;margin-bottom:15px;}
  #receipt-holder > .receipt .r-line{font-size:12px;margin-bottom:6px;}
  #receipt-holder > .receipt .r-big{margin:15px 0 8px;}
  #receipt-holder > .receipt .r-big .label{font-size:10px;margin-bottom:5px;}
  #receipt-holder > .receipt .r-big .num{font-size:clamp(30px,6vw,42px);}
  #receipt-holder > .receipt .r-local-currency{font-size:11px;}
  #receipt-holder > .receipt .r-tier{font-size:12px;margin-bottom:8px;}
  #receipt-holder > .receipt .r-score-line{font-size:10px;margin-bottom:6px;}
  #receipt-holder > .receipt .r-mult{font-size:12px;padding:5px 12px;}
  #receipt-holder > .receipt .r-chart-wrap svg{height:76px;}
  #receipt-holder > .receipt .r-chart-caption{font-size:9px;}
  #receipt-holder > .receipt .r-compare{font-size:11px;margin-top:12px;}
  #receipt-holder > .receipt .r-footer{font-size:9px;margin-top:14px;}

  #deepLinkFumbleCard{max-width:520px;margin-left:auto !important;margin-right:auto !important;padding:14px !important;}
  #deepLinkFumbleCard img{width:min(100%,340px) !important;max-height:62vh;object-fit:contain;}

  #certCardWrap img{width:68% !important;max-width:340px !important;}

  .story-share-dialog{width:min(690px,calc(100vw - 44px));max-height:min(82vh,760px);grid-template-columns:minmax(230px,310px) 1fr;gap:15px;padding:15px;border-radius:20px;}
  .story-share-preview{padding:8px;border-radius:15px;}
  .story-share-preview img{width:min(100%,280px);max-height:60vh;}
  .story-share-info{padding:13px 6px 8px;}
  .story-share-info h3{font-size:22px;}
}

@media (max-width:700px){
  #storyReceiptHolder{width:94%;margin:0 auto 14px;}
  #storyReceiptHolder .story-receipt{padding:15px 12px;border-radius:18px;}
  #storyReceiptHolder .story-object,#storyReceiptHolder .story-btc{min-height:94px;}
  #storyReceiptHolder .story-icon{font-size:38px;}
  #storyReceiptHolder .story-btc-coin{width:44px;height:44px;font-size:26px;}
  #storyReceiptHolder .story-title{font-size:21px;}
  #storyReceiptHolder .story-value-num{font-size:22px;}
  #storyReceiptHolder .story-mult{font-size:26px;}
  #storyReceiptHolder .story-footer{font-size:17px;margin-top:11px;padding-top:9px;}

  #receipt-holder{width:92%;max-width:470px;margin:14px auto 0;}
  #receipt-holder > .receipt{padding:19px 15px 16px;}
  #receipt-holder > .receipt .r-big .num{font-size:clamp(28px,8.3vw,38px);}
  #receipt-holder > .receipt .r-chart-wrap svg{height:72px;}

  #deepLinkFumbleCard{width:94%;margin-left:auto !important;margin-right:auto !important;padding:12px !important;}
  #deepLinkFumbleCard img{width:min(100%,310px) !important;max-height:58vh;object-fit:contain;}

  #certCardWrap img{width:72% !important;max-width:315px !important;}

  .story-share-preview img{width:min(88%,290px);max-height:43vh;}
}

/* EN design layer 3 */
/* CryptoFumble Apple-inspired WOW skin — visual layer only. Core logic untouched. */
:root{
  --aw-bg:#050506;
  --aw-panel:rgba(18,18,21,.72);
  --aw-panel-strong:rgba(24,24,28,.90);
  --aw-line:rgba(255,255,255,.11);
  --aw-line-soft:rgba(255,255,255,.065);
  --aw-text:#f5f5f7;
  --aw-muted:#a1a1aa;
  --aw-gold:#f6c84a;
  --aw-gold2:#ffdf79;
  --aw-blue:#78a9ff;
  --aw-green:#65d6a2;
  --aw-purple:#b89cff;
  --aw-radius:34px;
}
html{background:var(--aw-bg);}
body{
  --mx:50%; --my:0%;
  background:
    radial-gradient(900px 650px at var(--mx) var(--my),rgba(246,200,74,.105),transparent 62%),
    radial-gradient(880px 640px at 92% 18%,rgba(120,169,255,.07),transparent 68%),
    linear-gradient(180deg,#08080a 0%,#050506 40%,#070708 100%) !important;
  color:var(--aw-text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,Manrope,sans-serif !important;
  padding:18px 22px 88px !important;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(500px 500px at var(--mx) var(--my),rgba(255,255,255,.035),transparent 70%);
}
.wrap{max-width:1180px !important;margin:0 auto !important;}
.wrap>div:first-child{
  position:sticky;top:14px;z-index:60;
  width:max-content;max-width:100%;margin:0 auto 34px !important;padding:6px !important;
  border:1px solid rgba(255,255,255,.10);border-radius:999px;
  background:rgba(15,15,18,.70);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 14px 44px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.08);
}
.page-tabs{background:transparent !important;border:none !important;padding:0 !important;gap:4px !important;}
.page-tab{
  min-height:40px;border-radius:999px !important;border:0 !important;
  background:transparent !important;color:#a9a9b1 !important;padding:0 16px !important;
  font-size:12.5px !important;font-weight:700 !important;letter-spacing:-.01em;
  transition:background .28s ease,color .28s ease,transform .28s ease !important;
}
.page-tab:hover{color:#fff !important;background:rgba(255,255,255,.065) !important;transform:translateY(-1px);}
.page-tab.active{color:#090909 !important;background:#f5f5f7 !important;box-shadow:0 3px 14px rgba(255,255,255,.13) !important;}
.layout-grid{display:block !important;}
.main-col,.side-col{min-width:0 !important;}
.side-col{position:static !important;top:auto !important;margin-top:26px !important;}

/* HERO — big product moment */
.hero-flex{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:620px;display:grid !important;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr) !important;
  align-items:center !important;gap:58px !important;padding:76px 64px !important;
  border:1px solid var(--aw-line);border-radius:46px;
  background:
    radial-gradient(640px 420px at 84% 28%,rgba(246,200,74,.16),transparent 62%),
    radial-gradient(500px 440px at 10% 100%,rgba(120,169,255,.08),transparent 66%),
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  box-shadow:0 40px 110px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.085);
}
.hero-flex::before{
  content:"";position:absolute;width:390px;height:390px;border-radius:50%;right:7%;top:16%;z-index:-1;
  background:radial-gradient(circle at 34% 30%,#fff8c9 0%,#f6c84a 14%,#8f650d 38%,#17120a 67%,transparent 69%);
  filter:blur(.2px) drop-shadow(0 0 70px rgba(246,200,74,.22));opacity:.23;transform:rotate(-18deg);
}
.hero-flex::after{
  content:"";position:absolute;inset:auto 7% 0 7%;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
}
.eyebrow{
  color:#dadade !important;background:rgba(255,255,255,.055) !important;border-color:rgba(255,255,255,.09) !important;
  padding:8px 13px !important;font-size:10.5px !important;backdrop-filter:blur(12px);
}
h1{
  max-width:800px;font-size:clamp(48px,6.2vw,82px) !important;line-height:.98 !important;
  letter-spacing:-.055em !important;font-weight:780 !important;margin-bottom:24px !important;
}
h1 span{background:linear-gradient(100deg,#fff1b6,#f6c84a 58%,#fff3ca) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;}
.sub{font-size:18px !important;line-height:1.55 !important;color:#a9a9b1 !important;max-width:58ch !important;margin-bottom:28px !important;}
#heroCalcCta{
  width:auto !important;padding:14px 21px !important;border-radius:999px !important;
  background:rgba(255,255,255,.92) !important;color:#0a0a0b !important;border:1px solid rgba(255,255,255,.84) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.24) !important;font-size:13px !important;
}
#heroCalcCta:hover{background:#fff !important;transform:translateY(-2px) scale(1.015) !important;}
.hero-visual{padding:0 !important;transform:perspective(900px) rotateY(-5deg) rotateX(2deg);}
.hero-receipt-wrap{width:250px !important;transform:rotate(-3deg) !important;filter:drop-shadow(0 34px 55px rgba(0,0,0,.62)) !important;}
.hero-receipt-wrap .receipt{padding:27px 22px 20px !important;}
.hero-badge{
  top:-22px !important;right:-16px !important;padding:10px 14px !important;border-radius:999px !important;
  background:rgba(20,20,23,.78) !important;border-color:rgba(255,255,255,.12) !important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font-size:11px !important;
}
.hero-caption{margin:13px 0 0 !important;color:#72727b !important;font-size:11px !important;}

/* CALCULATOR — hero product card */
#calculatorPanel{
  position:relative;overflow:hidden;max-width:980px;margin:54px auto 28px !important;padding:34px !important;
  border:1px solid rgba(246,200,74,.48) !important;border-radius:38px !important;
  background:linear-gradient(145deg,rgba(27,27,31,.94),rgba(11,11,13,.88)) !important;
  box-shadow:0 38px 100px rgba(0,0,0,.46),0 0 0 1px rgba(246,200,74,.035) inset,0 0 80px rgba(246,200,74,.07) !important;
}
#calculatorPanel::before{
  content:"";position:absolute;inset:-2px auto auto 8%;width:58%;height:120px;pointer-events:none;
  background:radial-gradient(ellipse at top,rgba(246,200,74,.15),transparent 68%);filter:blur(8px);
}
#calculatorPanel label{font-size:10px !important;letter-spacing:.15em !important;color:#8f8f98 !important;}
#coinSearch,input[type=number],input[type=month],.date-trigger{
  min-height:54px !important;background:rgba(5,5,7,.78) !important;border:1px solid rgba(255,255,255,.095) !important;
  border-radius:18px !important;color:#f5f5f7 !important;box-shadow:inset 0 1px rgba(255,255,255,.025) !important;
}
#coinSearch:focus,input[type=number]:focus,input[type=month]:focus,.date-trigger:hover{border-color:rgba(246,200,74,.62) !important;box-shadow:0 0 0 4px rgba(246,200,74,.09) !important;}
.coin-grid{grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:10px !important;}
.coin-btn{
  min-height:84px !important;border-radius:20px !important;background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.075) !important;box-shadow:inset 0 1px rgba(255,255,255,.025) !important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),background .28s ease,border-color .28s ease !important;
}
.coin-btn:hover{transform:translateY(-4px) scale(1.02) !important;background:rgba(255,255,255,.07) !important;border-color:rgba(255,255,255,.14) !important;}
.coin-btn.active{background:linear-gradient(145deg,rgba(246,200,74,.17),rgba(246,200,74,.045)) !important;border-color:rgba(246,200,74,.62) !important;box-shadow:0 15px 36px rgba(246,200,74,.08),inset 0 1px rgba(255,255,255,.08) !important;}
.selected-coin{border-radius:18px !important;padding:12px 14px !important;background:rgba(255,255,255,.028) !important;}
.mode-toggle{
  padding:5px !important;border-radius:20px !important;background:rgba(0,0,0,.34) !important;border:1px solid rgba(255,255,255,.075) !important;
}
.mode-btn{min-height:52px !important;border-radius:15px !important;color:#9999a2 !important;transition:all .25s ease !important;}
.mode-btn.active{background:rgba(255,255,255,.09) !important;color:#fff !important;box-shadow:inset 0 1px rgba(255,255,255,.075),0 8px 24px rgba(0,0,0,.18) !important;}
.period-quick{gap:8px !important;}
.period-btn{border-radius:999px !important;background:rgba(255,255,255,.035) !important;border:1px solid rgba(255,255,255,.075) !important;min-height:40px !important;}
.preset-btn{border-radius:17px !important;background:rgba(255,255,255,.025) !important;border-color:rgba(255,255,255,.075) !important;}
#calcBtn{
  min-height:62px !important;border:0 !important;border-radius:20px !important;
  background:linear-gradient(180deg,#ffe99a 0%,#f6c84a 56%,#d8a716 100%) !important;color:#151006 !important;
  box-shadow:inset 0 1px rgba(255,255,255,.72),0 18px 42px rgba(246,200,74,.20),0 2px 0 #926a00 !important;
  font-size:16px !important;font-weight:850 !important;letter-spacing:-.015em !important;
}
#calcBtn:hover{transform:translateY(-3px) scale(1.006) !important;box-shadow:inset 0 1px rgba(255,255,255,.82),0 25px 56px rgba(246,200,74,.28),0 2px 0 #926a00 !important;}

/* RESULTS — every result gets a distinct physical language */
#storyReceiptHolder{filter:drop-shadow(0 28px 50px rgba(0,0,0,.35));}
#receipt-holder{filter:drop-shadow(0 32px 60px rgba(0,0,0,.44));}
#deepLinkFumbleCard{
  border:1px solid rgba(255,255,255,.085) !important;border-radius:30px !important;background:rgba(255,255,255,.025) !important;
  box-shadow:0 28px 80px rgba(0,0,0,.36) !important;backdrop-filter:blur(20px);
}
.share-primary,.compare-block{
  border-radius:24px !important;background:rgba(255,255,255,.032) !important;border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.03) !important;
}
.share-cta{border-radius:16px !important;}
.compare-toggle{min-height:54px !important;border-radius:16px !important;font-weight:720 !important;}
#ctaInvest{border-radius:18px !important;background:linear-gradient(145deg,rgba(101,214,162,.18),rgba(101,214,162,.055)) !important;border-color:rgba(101,214,162,.34) !important;}

/* APPLE BENTO — decisions, seasonality, glossary */
.cf-stories{margin:22px 0 !important;}
.cf-stories .xs-entry{
  overflow:hidden;position:relative;border-radius:36px !important;padding:28px !important;
  border:1px solid var(--aw-line) !important;background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018)) !important;
  box-shadow:0 28px 80px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05) !important;
}
.cf-stories .xs-entry::before{content:"";position:absolute;width:360px;height:220px;right:-120px;top:-120px;border-radius:50%;filter:blur(10px);opacity:.22;pointer-events:none;}
.cf-stories.aw-decisions .xs-entry::before{background:radial-gradient(circle,var(--aw-purple),transparent 68%);}
.cf-stories.aw-seasonality .xs-entry::before{background:radial-gradient(circle,#56d9d2,transparent 68%);}
.cf-stories.aw-glossary .xs-entry::before,#cfGlossary::before{background:radial-gradient(circle,var(--aw-blue),transparent 68%);}
.xs-entry-head{align-items:center !important;gap:24px !important;}
.xs-entry-head h2{font-size:clamp(25px,3.2vw,40px) !important;letter-spacing:-.035em !important;margin:2px 0 7px !important;}
.xs-entry-head p:not(.xs-eyebrow){color:#9f9fa8 !important;font-size:14px !important;}
.xs-eyebrow{color:#787881 !important;font-size:9px !important;letter-spacing:.18em !important;}
.xs-section-toggle{
  flex:0 0 52px !important;width:52px !important;height:52px !important;border-radius:50% !important;
  border:1px solid rgba(255,255,255,.11) !important;background:rgba(255,255,255,.06) !important;color:#fff !important;font-size:24px !important;
  box-shadow:inset 0 1px rgba(255,255,255,.08) !important;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s ease !important;
}
.xs-section-toggle:hover{background:rgba(255,255,255,.11) !important;transform:scale(1.07);}
.xs-section-toggle[aria-expanded="true"]{transform:rotate(180deg);}
.xs-entry-body{padding-top:24px !important;}
.xs-grid{gap:13px !important;}
.xs-grid article{
  position:relative;overflow:hidden;border-radius:25px !important;padding:22px !important;min-height:190px;
  background:rgba(9,9,11,.55) !important;border:1px solid rgba(255,255,255,.07) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.03) !important;transition:transform .3s ease,border-color .3s ease !important;
}
.xs-grid article:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.14) !important;}
.xs-grid article:nth-child(1){background:linear-gradient(145deg,rgba(255,107,89,.10),rgba(9,9,11,.58)) !important;}
.xs-grid article:nth-child(2){background:linear-gradient(145deg,rgba(86,217,210,.09),rgba(9,9,11,.58)) !important;}
.xs-grid article:nth-child(3){background:linear-gradient(145deg,rgba(184,156,255,.11),rgba(9,9,11,.58)) !important;}
.xs-grid article:nth-child(4){background:linear-gradient(145deg,rgba(120,169,255,.10),rgba(9,9,11,.58)) !important;}
.xs-grid article>span{font-size:28px !important;}
.xs-grid article h3{font-size:20px !important;letter-spacing:-.02em !important;}
.xs-grid article p{color:#9898a1 !important;}
.xs-primary{
  border:1px solid rgba(255,255,255,.12) !important;border-radius:999px !important;background:#f5f5f7 !important;color:#0b0b0d !important;
  padding:11px 15px !important;font-weight:780 !important;box-shadow:0 8px 22px rgba(0,0,0,.20) !important;
}
.season-coinbar .coin-btn{min-height:42px !important;border-radius:999px !important;}
.season-card{border-radius:22px !important;background:rgba(0,0,0,.26) !important;border:1px solid rgba(255,255,255,.07) !important;}
.season-history-toggle{border-radius:999px !important;background:rgba(255,255,255,.055) !important;border:1px solid rgba(255,255,255,.08) !important;}

/* TODAY IN CRYPTO HISTORY — cinematic strip */
#cfCryptoHistoryToday{
  position:relative;overflow:hidden;border-radius:38px !important;margin:24px 0 !important;padding:34px !important;min-height:220px;
  border:1px solid rgba(120,169,255,.20) !important;
  background:radial-gradient(560px 260px at 90% 15%,rgba(120,169,255,.16),transparent 68%),linear-gradient(145deg,#0f1118,#08090c 72%) !important;
  box-shadow:0 28px 80px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.04) !important;
}
#cfCryptoHistoryToday::after{content:"";position:absolute;left:32px;right:32px;bottom:28px;height:1px;background:linear-gradient(90deg,rgba(120,169,255,.55),transparent);opacity:.7;}

/* PORTFOLIO PROMO — green bento */
.pf-promo{
  border-radius:34px !important;padding:30px !important;border:1px solid rgba(101,214,162,.22) !important;
  background:radial-gradient(420px 240px at 10% 0%,rgba(101,214,162,.16),transparent 65%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)) !important;
  box-shadow:0 26px 70px rgba(0,0,0,.25) !important;
}
.pf-promo-icon{width:58px !important;height:58px !important;border-radius:18px !important;background:rgba(101,214,162,.10) !important;border:1px solid rgba(101,214,162,.20) !important;display:grid !important;place-items:center !important;}
#pfPromoBtn{border-radius:999px !important;background:var(--aw-green) !important;color:#07140f !important;border:0 !important;font-weight:800 !important;padding:11px 16px !important;}

/* FUMBLES — horizontal cinematic carousel */
#fumbleScenarios{
  margin:28px 0 !important;padding:34px 0 30px !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;
}
.fumble-scenarios-head{padding:0 6px 4px !important;align-items:flex-end !important;}
.fumble-scenarios-title{font-size:clamp(29px,4vw,48px) !important;letter-spacing:-.045em !important;}
.fumble-scenarios-title span{color:var(--aw-gold) !important;}
.fumble-scenarios-sub{font-size:14px !important;color:#8f8f98 !important;}
.fumble-scenarios-grid{
  display:flex !important;gap:16px !important;overflow-x:auto !important;overflow-y:hidden !important;
  padding:15px 6px 25px !important;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.fumble-scenarios-grid::-webkit-scrollbar{display:none;}
.fumble-card,.fumble-card-more{
  display:block !important;flex:0 0 min(330px,76vw) !important;scroll-snap-align:center;position:relative;overflow:hidden;
  min-height:380px;padding:18px !important;border-radius:30px !important;background:linear-gradient(155deg,#19191e,#0b0b0e 72%) !important;
  border:1px solid rgba(255,255,255,.085) !important;box-shadow:0 22px 55px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.04) !important;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),border-color .3s ease !important;
}
.fumble-card:hover{transform:translateY(-7px) scale(1.012) !important;border-color:rgba(246,200,74,.28) !important;}
.fumble-card-visual,.ru-scenario-thumb{height:175px !important;width:100% !important;object-fit:cover !important;border-radius:20px !important;background:#101014 !important;margin:0 0 17px !important;}
.fumble-card-num{position:absolute !important;top:30px !important;right:30px !important;z-index:2;background:rgba(5,5,7,.66) !important;border:1px solid rgba(255,255,255,.10) !important;backdrop-filter:blur(14px);padding:6px 9px !important;border-radius:999px !important;color:#fff !important;}
.fumble-card-title{font-size:21px !important;line-height:1.08 !important;min-height:0 !important;letter-spacing:-.025em !important;}
.fumble-card-copy{font-size:12.5px !important;color:#8f8f98 !important;line-height:1.45 !important;}
.fumble-card-btn{
  width:auto !important;display:inline-flex !important;border:0 !important;border-radius:999px !important;background:rgba(255,255,255,.08) !important;color:#fff !important;
  padding:10px 14px !important;font-weight:760 !important;transition:background .25s ease,transform .25s ease !important;
}
.fumble-card-btn:hover{background:#f5f5f7 !important;color:#0a0a0b !important;transform:translateX(3px);}
#fumbleShowAllBtn{display:none !important;}

/* Daily / Pizza / Market — three clearly different objects */
.daily-regret{
  border-radius:30px !important;padding:24px !important;background:linear-gradient(145deg,rgba(184,156,255,.10),rgba(255,255,255,.025)) !important;
  border:1px solid rgba(184,156,255,.22) !important;
}
.daily-regret-cta{border-radius:999px !important;background:transparent !important;border:1px solid rgba(184,156,255,.38) !important;color:#d8cbff !important;}
.pizza-fact{
  border-radius:30px !important;padding:24px !important;background:radial-gradient(420px 180px at 90% 0%,rgba(247,147,26,.16),transparent 68%),linear-gradient(145deg,#15100a,#0c0b0a) !important;
  border:1px solid rgba(247,147,26,.24) !important;box-shadow:0 24px 65px rgba(0,0,0,.25) !important;
}
.pizza-toggle{border-radius:999px !important;}
.side-col .live-feed,.live-feed{
  max-width:none !important;margin:0 !important;padding:25px !important;border:1px solid rgba(255,255,255,.085) !important;border-radius:32px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)) !important;box-shadow:0 26px 70px rgba(0,0,0,.24) !important;
}
#marketTickerList{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
.live-feed-row{margin:0 !important;min-width:0;border:1px solid rgba(255,255,255,.055);background:rgba(0,0,0,.22) !important;border-radius:16px !important;padding:12px !important;}
.live-feed-row .fr-mult{display:block;margin-left:auto;}
.scenario-links{border:1px solid rgba(255,255,255,.075) !important;border-radius:26px !important;background:rgba(255,255,255,.02) !important;padding:20px !important;}

/* Portfolio view */
#portfolioView{max-width:1180px;margin:0 auto;}
#portfolioView .pf2-card,#portfolioView .panel,#portfolioView [class*="pf2-"]{
  --panel-border:rgba(255,255,255,.08);
}
#portfolioView .panel{border-radius:30px !important;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.014)) !important;border-color:rgba(255,255,255,.08) !important;}

/* Motion */
.aw-reveal{opacity:0;transform:translateY(22px) scale(.992);transition:opacity .72s cubic-bezier(.2,.8,.2,1),transform .72s cubic-bezier(.2,.8,.2,1);}
.aw-reveal.aw-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.aw-reveal{opacity:1 !important;transform:none !important;transition:none !important}.fumble-card,.coin-btn,#calcBtn{transition:none !important;}}

@media(max-width:980px){
  .hero-flex{grid-template-columns:minmax(0,1fr) 240px !important;gap:28px !important;padding:52px 38px !important;min-height:540px;}
  h1{font-size:clamp(43px,7vw,64px) !important;}
  .coin-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
  #marketTickerList{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:700px){
  body{padding:10px 12px 60px !important;}
  .wrap>div:first-child{top:8px;width:100%;overflow-x:auto;justify-content:flex-start !important;margin-bottom:18px !important;border-radius:22px;}
  .page-tabs{min-width:max-content !important;}
  .page-tab{padding:0 12px !important;font-size:11.5px !important;min-height:38px;}
  .hero-flex{
    min-height:0;grid-template-columns:1fr !important;gap:25px !important;padding:34px 20px 28px !important;border-radius:30px;
    background:radial-gradient(360px 260px at 90% 12%,rgba(246,200,74,.14),transparent 68%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  }
  .hero-flex::before{width:230px;height:230px;right:-14%;top:15%;opacity:.14;}
  h1{font-size:clamp(38px,12vw,50px) !important;line-height:.98 !important;margin-bottom:17px !important;}
  .sub{font-size:14.5px !important;line-height:1.5 !important;margin-bottom:20px !important;}
  #heroCalcCta{width:100% !important;min-height:50px !important;justify-content:center;}
  .hero-visual{display:none !important;}
  .hero-caption{display:none !important;}
  #calculatorPanel{margin:16px 0 22px !important;padding:19px 16px !important;border-radius:29px !important;}
  .coin-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:8px !important;}
  .coin-btn{min-height:74px !important;border-radius:17px !important;}
  .mode-toggle{border-radius:18px !important;gap:3px !important;}
  .mode-btn{font-size:12px !important;line-height:1.25 !important;min-height:60px !important;padding:8px 5px !important;}
  .row{gap:9px !important;}
  #calcBtn{min-height:58px !important;border-radius:18px !important;}
  .cf-stories{margin:14px 0 !important;}
  .cf-stories .xs-entry{padding:20px 17px !important;border-radius:28px !important;}
  .xs-entry-head{gap:14px !important;}
  .xs-entry-head h2{font-size:24px !important;}
  .xs-entry-head p:not(.xs-eyebrow){font-size:12.5px !important;line-height:1.45 !important;}
  .xs-section-toggle{width:46px !important;height:46px !important;flex-basis:46px !important;}
  .xs-grid{grid-template-columns:1fr !important;}
  .xs-grid article{min-height:0;padding:18px !important;border-radius:21px !important;}
  #cfCryptoHistoryToday{min-height:170px;padding:22px !important;border-radius:28px !important;margin:14px 0 !important;}
  .pf-promo{padding:21px !important;border-radius:28px !important;}
  #fumbleScenarios{margin:8px 0 18px !important;padding:22px 0 12px !important;}
  .fumble-scenarios-head{padding:0 2px !important;}
  .fumble-scenarios-title{font-size:28px !important;}
  .fumble-scenarios-sub{font-size:12px !important;}
  .fumble-card,.fumble-card-more{flex-basis:82vw !important;min-height:345px;padding:15px !important;border-radius:25px !important;}
  .fumble-card-visual,.ru-scenario-thumb{height:160px !important;border-radius:17px !important;}
  .daily-regret,.pizza-fact{padding:19px !important;border-radius:26px !important;}
  .side-col .live-feed,.live-feed{padding:17px !important;border-radius:26px !important;}
  #marketTickerList{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x mandatory;scrollbar-width:none;}
  #marketTickerList::-webkit-scrollbar{display:none;}
  .live-feed-row{flex:0 0 220px;scroll-snap-align:start;}
  .scenario-links{padding:16px !important;border-radius:22px !important;}
}

/* Extending the same skin to the newest cards (HODL vs Reality, Most
   Expensive Fumble, quick-sell, tier phrase, purchase notes) — these
   weren't covered by the first pass, so they'd otherwise still show the
   old dark-gold panel style inside an Apple-skinned page. Same --aw-*
   tokens as everything else above, not a second design language. */
.pf2-fumble{
  background:var(--aw-panel) !important;
  border:1px solid var(--aw-line) !important;
  border-radius:var(--aw-radius) !important;
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 22px 60px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.06) !important;
}
.pf2-fumble-kicker{color:var(--aw-gold) !important;}
.pf2-fumble-delta.pos{color:var(--aw-green) !important;}
.pf2-fumble-delta.neg{color:#ff8a8a !important;}
.r-tier-phrase{color:rgba(255,255,255,.55) !important;}
.pf-entry-note{color:var(--aw-blue) !important;opacity:.85;}
.pf-quick-sell{
  background:rgba(255,138,138,.12) !important;border:1px solid rgba(255,138,138,.32) !important;
  color:#ff9d9d !important;border-radius:999px !important;backdrop-filter:blur(10px);
}
.pf-quick-sell:hover{background:rgba(255,138,138,.2) !important;}
.pf-quick-sell-tile{background:rgba(20,20,23,.75) !important;border-color:rgba(255,138,138,.32) !important;}
.pf-sells-toggle{
  background:rgba(255,138,138,.12) !important;border:1px solid rgba(255,138,138,.32) !important;
  color:#ff9d9d !important;border-radius:999px !important;
}
.pf-sells-toggle:hover{background:rgba(255,138,138,.2) !important;}

/* Glowing border on every card-style block — same soft gold glow used on
   the hero, applied broadly rather than one at a time. */
.panel, .xs-entry, .xs-grid article, .cf-s2-card, .pf-promo, .pf2-fumble,
.fumble-card, .receipt, .aw-mini-portfolio, .live-feed, .scenario-links,
#dailyRegret, #pizzaFact{
  border:1px solid rgba(246,200,74,.30) !important;
  box-shadow:0 0 0 1px rgba(246,200,74,.06) inset, 0 0 26px rgba(246,200,74,.14), 0 20px 50px rgba(0,0,0,.28) !important;
}

/* All 10 scenario cards open on desktop instead of 4 + "Show all 10" —
   shrunk down so ten cards at once doesn't cost more vertical space than
   the old collapsed set of four did.
   This has to override a LOT from the original bento pass above (line
   ~2630), which turns this whole section into a horizontally-scrolling
   carousel — display:flex, overflow-x:auto, and a 380px min-height per
   card — completely unconditionally, not scoped to mobile at all. Only
   flipping display back to grid left every one of those other properties
   still fighting it, which is why the first attempt at this didn't
   actually wrap into rows. */
@media(min-width:701px){
  .fumble-scenarios-grid .fumble-card-more{display:flex !important;}
  .fumble-scenarios-more-btn{display:none !important;}
  .fumble-scenarios-grid{
    display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:8px !important; overflow-x:visible !important; overflow-y:visible !important; padding:4px !important;
  }
  .fumble-card, .fumble-card-more{
    flex:none !important; min-height:0 !important; padding:9px !important; scroll-snap-align:none !important;
  }
  .fumble-card-visual, .ru-scenario-thumb{height:52px !important; width:100% !important; font-size:28px !important; margin:0 0 6px !important; border-radius:9px !important;}
  .fumble-card-num{font-size:8px !important; margin-bottom:3px !important;}
  .fumble-card-title{font-size:11.5px !important; min-height:0 !important; line-height:1.15 !important;}
  .fumble-card-meta{font-size:9px !important; margin-top:2px !important;}
  .fumble-card-copy{display:none !important;}
  .fumble-card-btn{font-size:9.5px !important; padding:7px 5px !important; margin-top:6px !important;}
}
@media(min-width:980px) and (max-width:1399px){
  .fumble-scenarios-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}

/* Wide-desktop layout pass — restores a sticky right rail (Top 10 + a mini
   portfolio summary) instead of stacking everything in one centered column
   with unused space on either side of it. Scoped to genuinely wide screens
   only; narrower desktops and mobile keep the single-column flow above
   unchanged. */
@media(min-width:980px){
  /* Card + receipt side by side instead of stacked — cuts a good chunk of
     the page's height on any real desktop width, not just the very wide
     sidebar layout below. #deepLinkFumbleCard only exists once a scenario
     has actually been calculated; with just the receipt in the row, flex
     simply gives it the full width, no special-casing needed. */
  #cfCardReceiptRow{display:flex !important; gap:24px !important; align-items:stretch !important;}
  /* Deliberately NOT forcing display:flex on the children below — the EN
     flow toggles #deepLinkFumbleCard via inline style.display when a fresh,
     non-scenario calculation runs; a display override here would beat that
     and the card could get stuck showing. align-items:stretch above already
     equal-heights these regardless of each child's own display type. */
  #cfCardReceiptRow > #deepLinkFumbleCard, #cfCardReceiptRow > #receipt-holder{
    flex:1 1 0 !important; min-width:0 !important; margin:0 !important; width:auto !important;
  }
  #cfCardReceiptRow > #deepLinkFumbleCard img{width:100% !important; max-width:100% !important;}
  #cfCardReceiptRow > #receipt-holder .receipt{margin:0 auto !important;}
  #cfCardReceiptRow.cf-single-receipt > #receipt-holder{
    flex:0 1 500px !important;width:min(100%,500px) !important;
    margin-left:auto !important;margin-right:auto !important;
  }
}
.coin-opt[role="option"]:focus-visible{outline:2px solid rgba(246,200,74,.78);outline-offset:-3px;background:rgba(240,185,11,.10);}
.cta-secondary-label.cf-options-toggle{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;cursor:pointer;}
.cta-secondary-row[hidden]{display:none !important;}
@media(min-width:1400px){
  .wrap{max-width:1440px !important;}
  .layout-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 360px !important;
    gap:36px !important; align-items:start !important;
  }
  .side-col{position:sticky !important; top:96px !important;}
  .aw-mini-portfolio, .live-feed{
    background:var(--aw-panel) !important; border:1px solid var(--aw-line) !important;
    border-radius:24px !important; backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%); padding:20px !important;
    box-shadow:0 20px 50px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.05) !important;
  }
  .aw-mini-portfolio-label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--aw-muted);margin-bottom:8px;}
  .aw-mini-portfolio-value{font-size:26px;font-weight:800;color:var(--aw-text);letter-spacing:-.02em;}
  .aw-mini-portfolio-pnl{font-size:13px;font-weight:700;margin-top:4px;}
  .aw-mini-portfolio-pnl.pos{color:var(--aw-green);}
  .aw-mini-portfolio-pnl.neg{color:#ff8a8a;}

  /* Top 10 ticker: Apple WOW's own base rule packs it into a 5-column grid
     (fine at full page width, illegible squeezed into a 360px sidebar —
     that's the exact clutter this fixes) — back to one coin per row here. */
  #marketTickerList{display:flex !important; flex-direction:column !important; gap:8px !important;}
  .live-feed-row{width:100% !important;}

  /* Card and receipt sizes: reduce a bit at this width — mainly to cut down
     how tall the page gets before this restored sidebar even starts to
     matter, not just for its own sake. */
  #deepLinkFumbleCard img{max-width:300px !important;}
  #receipt-holder{max-width:400px !important;}
  .hero-receipt-wrap{width:230px !important;}

  /* "Discovery" cards (Duel, Твои решения, Seasonality, Glossary, Games) —
     everything else in .main-col defaults to full width; only these are
     opted into a 2-up flow, so nothing else can accidentally get split. */
  .main-col{columns:2 !important; column-gap:24px !important;}
  .main-col > *{column-span:all !important;}
  .main-col .cf-stories, .main-col .cf-games{
    column-span:none !important; break-inside:avoid !important; margin-bottom:24px !important;
  }
}

/* EN design layer 4 */
.cf-discovery-head{display:none;}
@media(min-width:980px){
  .cf-discovery-head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
    margin:46px 0 18px;padding:0 5px;
  }
  .cf-discovery-kicker{
    color:var(--aw-gold);font:750 11px/1.2 var(--mono);letter-spacing:.17em;text-transform:uppercase;
  }
  .cf-discovery-head h2{
    margin:8px 0 7px;color:var(--aw-text);font-size:clamp(30px,3.1vw,43px);line-height:1;letter-spacing:-.04em;
  }
  .cf-discovery-head p{margin:0;color:var(--aw-muted);font-size:14px;line-height:1.5;}
  .cf-discovery-count{
    flex:none;padding:8px 12px;border:1px solid rgba(246,200,74,.28);border-radius:999px;
    background:rgba(246,200,74,.07);color:#d8be72;font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  }

  #cfGlossary,
  .cf-stories.aw-decisions .xs-entry,
  .cf-stories.aw-seasonality .xs-entry,
  .cf-stories.aw-duel .xs-entry,
  .cf-games.g-teaser{
    position:relative;overflow:hidden;isolation:isolate;
    border-color:rgba(var(--cf-accent),.46) !important;
    background:
      radial-gradient(330px 190px at 100% 0,rgba(var(--cf-accent),.16),transparent 68%),
      linear-gradient(145deg,rgba(27,28,33,.96),rgba(12,13,16,.94)) !important;
    box-shadow:0 0 0 1px rgba(var(--cf-accent),.055) inset,0 18px 46px rgba(0,0,0,.30),0 0 28px rgba(var(--cf-accent),.09) !important;
    transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .24s ease,box-shadow .24s ease !important;
  }
  #cfGlossary:hover,
  .cf-stories.aw-decisions .xs-entry:hover,
  .cf-stories.aw-seasonality .xs-entry:hover,
  .cf-stories.aw-duel .xs-entry:hover,
  .cf-games.g-teaser:hover{
    transform:translateY(-4px);
    border-color:rgba(var(--cf-accent),.72) !important;
    box-shadow:0 0 0 1px rgba(var(--cf-accent),.08) inset,0 24px 58px rgba(0,0,0,.38),0 0 38px rgba(var(--cf-accent),.16) !important;
  }
  #cfGlossary{--cf-accent:120,169,255;}
  .cf-stories.aw-decisions .xs-entry{--cf-accent:184,156,255;}
  .cf-stories.aw-seasonality .xs-entry{--cf-accent:86,217,210;}
  .cf-stories.aw-duel .xs-entry{--cf-accent:159,125,255;}
  .cf-games.g-teaser{--cf-accent:246,200,74;}

  #cfGlossary::after,
  .cf-stories.aw-decisions .xs-entry::after,
  .cf-stories.aw-seasonality .xs-entry::after,
  .cf-stories.aw-duel .xs-entry::after,
  .cf-games.g-teaser::after{
    position:absolute;z-index:2;top:18px;right:18px;padding:6px 9px;border:1px solid rgba(var(--cf-accent),.30);
    border-radius:999px;background:rgba(var(--cf-accent),.09);color:rgb(var(--cf-accent));
    font:800 9px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;pointer-events:none;
  }
  #cfGlossary::after,.cf-stories.aw-decisions .xs-entry::after,.cf-stories.aw-seasonality .xs-entry::after{right:145px;}
  #cfGlossary::after{content:"Learn";}
  .cf-stories.aw-decisions .xs-entry::after{content:"Personal";}
  .cf-stories.aw-seasonality .xs-entry::after{content:"Analytics";}
  .cf-stories.aw-duel .xs-entry::after{content:"Challenge";}
  .cf-games.g-teaser::after{content:"Games";}

  #cfGlossary .xs-section-toggle,
  .cf-stories.aw-decisions .xs-section-toggle,
  .cf-stories.aw-seasonality .xs-section-toggle{
    width:auto !important;min-width:112px !important;height:44px !important;flex-basis:auto !important;
    padding:0 14px !important;display:flex !important;align-items:center;justify-content:center;gap:8px;
    border-radius:999px !important;border-color:rgba(var(--cf-accent),.45) !important;
    background:rgba(var(--cf-accent),.11) !important;color:#f5f5f7 !important;
  }
  #cfGlossary .xs-section-toggle::before,
  .cf-stories.aw-decisions .xs-section-toggle::before,
  .cf-stories.aw-seasonality .xs-section-toggle::before{
    content:"Explore";font:800 11px/1 var(--sans);letter-spacing:.02em;
  }
  #cfGlossary .xs-section-toggle[aria-expanded="true"]::before,
  .cf-stories.aw-decisions .xs-section-toggle[aria-expanded="true"]::before,
  .cf-stories.aw-seasonality .xs-section-toggle[aria-expanded="true"]::before{content:"Close";}
  .cf-stories.aw-duel .xs-actions button:first-child,
  .cf-games.g-teaser button{
    border-color:rgba(var(--cf-accent),.68) !important;background:rgb(var(--cf-accent)) !important;color:#111217 !important;
    box-shadow:0 12px 28px -17px rgba(var(--cf-accent),.9);
  }
}

/* EN design layer 5 */
/* A denser mobile scenario rail: same visual language, less scrolling. */
@media(max-width:700px){
  .fumble-scenarios-grid{
    gap:12px !important;
    padding-top:10px !important;
    padding-bottom:18px !important;
  }
  .fumble-card,.fumble-card-more{
    flex-basis:min(78vw,290px) !important;
    min-height:300px !important;
    padding:13px !important;
    border-radius:23px !important;
  }
  .fumble-card-visual,.ru-scenario-thumb{
    height:132px !important;
    margin-bottom:12px !important;
    border-radius:15px !important;
  }
  .fumble-card-title{font-size:19px !important;line-height:1.12 !important;}
  .fumble-card-copy{font-size:12px !important;line-height:1.4 !important;margin-top:6px !important;}
  .fumble-card-btn{min-height:44px !important;padding:9px 12px !important;}
}

/* EN design layer 6 */
.cf-earning-card{
  position:relative;overflow:hidden;margin:16px 0 18px;padding:22px;border-radius:26px;
  border:1px solid rgba(101,214,162,.34);
  background:radial-gradient(320px 180px at 100% 0,rgba(101,214,162,.14),transparent 68%),linear-gradient(145deg,rgba(22,25,28,.98),rgba(10,11,13,.96));
  box-shadow:0 0 0 1px rgba(101,214,162,.04) inset,0 18px 44px rgba(0,0,0,.28),0 0 28px rgba(101,214,162,.08);
}
.cf-earning-kicker,.cf-about-kicker{font:800 9px/1.2 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:#65d6a2;}
.cf-earning-card h3{margin:8px 0 7px;font-size:22px;line-height:1.12;letter-spacing:-.025em;}
.cf-earning-card p{margin:0 0 15px;color:#a5a5ae;font-size:13px;line-height:1.5;}
#cfEarningBlock .cta-invest{display:flex;width:100%;min-height:48px;box-sizing:border-box;align-items:center;justify-content:center;margin:0;padding:12px 15px;border-radius:15px !important;}
#cfEarningBlock .invest-note{margin:9px 0 0;text-align:center;font-size:10px;line-height:1.4;color:#777781;}
.cf-support-jump{display:block;margin:12px auto 0;padding:7px 10px;border:0;background:transparent;color:#c9ad5a;font:700 11px/1.3 var(--sans);cursor:pointer;}
.cf-support-jump:hover{color:#f6c84a;}
.cf-about-teaser{display:grid;grid-template-columns:auto 1fr;gap:17px;align-items:start;margin:22px 0;padding:22px;border:1px solid rgba(120,169,255,.24);border-radius:27px;background:radial-gradient(280px 170px at 0 0,rgba(120,169,255,.12),transparent 72%),rgba(255,255,255,.025);}
.cf-about-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:rgba(120,169,255,.10);border:1px solid rgba(120,169,255,.22);color:#78a9ff;font-size:24px;}
.cf-about-kicker{color:#78a9ff;}
.cf-about-teaser h2{margin:6px 0 6px;font-size:23px;line-height:1.1;letter-spacing:-.025em;}
.cf-about-teaser p{margin:0;color:#9999a3;font-size:13px;line-height:1.5;}
.cf-about-teaser a{display:inline-flex;margin-top:11px;color:#bcd2ff;font-size:12px;font-weight:800;text-decoration:none;}
#donateWidgetSection{box-sizing:border-box;max-width:620px !important;margin:28px auto 0 !important;padding:22px !important;border:1px solid rgba(246,200,74,.30) !important;border-radius:24px !important;background:radial-gradient(300px 170px at 100% 0,rgba(246,200,74,.12),transparent 70%),rgba(255,255,255,.025) !important;box-shadow:0 16px 42px rgba(0,0,0,.24) !important;}
.cf-donate-details>summary{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 15px;border:1px solid rgba(246,200,74,.38);border-radius:999px;background:rgba(246,200,74,.09);color:#e7ca73;font-size:12px;font-weight:800;cursor:pointer;list-style:none;}
.cf-donate-details>summary::-webkit-details-marker{display:none;}
.cf-donate-details[open]>summary{margin-bottom:14px;}
#donateCopyBtn{min-height:38px;}
@media(min-width:1400px){
  .side-col .cf-earning-card{
    margin:0 0 18px;padding:18px;border-radius:24px;
    background:radial-gradient(300px 170px at 100% 0,rgba(101,214,162,.13),transparent 68%),linear-gradient(145deg,rgba(22,25,28,.78),rgba(10,11,13,.72)) !important;
    backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%);
    border-color:rgba(101,214,162,.30);
  }
  .side-col .cf-earning-card h3{font-size:19px;}
  .side-col .cf-earning-card p{font-size:12px;}
}
@media(max-width:700px){
  .cf-earning-card{margin:13px 0 16px;padding:18px 16px;border-radius:23px;}
  .cf-earning-card h3{font-size:20px;}
  .cf-earning-card p{font-size:12.5px;}
  .cf-about-teaser{grid-template-columns:1fr;margin:17px 0;padding:18px 16px;border-radius:23px;}
  .cf-about-icon{width:42px;height:42px;border-radius:14px;}
  .cf-about-teaser h2{font-size:21px;}
  #donateWidgetSection{width:100%;margin-top:20px !important;padding:18px 15px !important;border-radius:22px !important;}
}

/* EN design layer 7 */
/* EN tablet rotation fix. Touch tablets can cross the 980px desktop
   breakpoint in landscape, leaving the scenario card and receipt in two
   incompatible layouts. Keep the result flow centered and deterministic. */
@media (min-width:701px) and (max-width:1399px) and (orientation:landscape) and (hover:none),
       (min-width:701px) and (max-width:1399px) and (orientation:landscape) and (pointer:coarse){
  #cfCardReceiptRow{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:18px !important;
    width:100% !important;
  }
  #cfCardReceiptRow>#deepLinkFumbleCard,
  #cfCardReceiptRow>#receipt-holder{
    flex:none !important;
    width:min(100%,520px) !important;
    max-width:520px !important;
    min-width:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #cfCardReceiptRow>#deepLinkFumbleCard{order:1;}
  #cfCardReceiptRow>#receipt-holder{order:2;}
  #storyReceiptHolder{
    width:min(100%,560px) !important;
    max-width:560px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #storyReceiptHolder,#deepLinkFumbleCard,#receipt-holder{scroll-margin-top:92px;}
}