
.btc { position: relative; max-width: 860px; margin: 34px auto 0; text-align: left; }
#btcPortal { position: static; max-width: none; margin: 0; }
.btc .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; } 

.btc .glass {
  background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,20,18,0.30), inset 0 1px 0 rgba(255,255,255,0.30);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.btc .hero-price { padding:20px 22px 18px; margin-bottom:14px; position:relative; }
.btc .hero-price .hp-top { display:flex; align-items:center; justify-content:space-between; }
.btc .hero-price .hp-k { font-size:11px; letter-spacing:1.5px; opacity:0.85; text-transform:uppercase; display:flex; align-items:center; gap:7px; }
.btc .hero-price .hp-chg { font-size:13px; font-weight:700; opacity:0.92; letter-spacing:0.3px; }
.btc .hero-price .hp-chg.down { opacity:0.7; }
.btc .hero-price .hp-val { font-size:clamp(34px,6vw,44px); font-weight:800; letter-spacing:-1.3px; margin-top:10px; line-height:1; white-space:nowrap;
                           animation:hpPulse 3.6s ease-in-out infinite; }
@keyframes hpPulse { 0%,100% { text-shadow:0 0 0 rgba(255,255,255,0); } 50% { text-shadow:0 0 20px rgba(255,255,255,0.95); } }
@media (prefers-reduced-motion:reduce){ .btc .hero-price .hp-val { animation:none; text-shadow:0 0 14px rgba(255,255,255,0.6); } }
.btc .hero-price .hp-sub { font-size:12px; opacity:0.78; margin-top:9px; letter-spacing:0.5px; }
.btc .hero-price .hp-hint { font-size:10px; opacity:0.55; margin-top:11px; letter-spacing:0.5px; }
.btc .hero-price .arrow { font-size:10px; opacity:0; transition:opacity .3s; }
.btc #priceArrow.show { opacity:0.85; }
.btc .hero-price .hp-mark { position:absolute; right:18px; top:50%; z-index:0; pointer-events:none; user-select:none;
  transform:translateY(-30%) rotate(-13deg); transform-origin:center;
  font-size:84px; line-height:1; font-weight:800; color:rgba(22,47,54,0.30); }
.btc .hero-price > *:not(.hp-mark) { position:relative; z-index:1; }

.btc .grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (min-width:760px){ .btc .grid { grid-template-columns:1fr 1fr 1fr; } }
.btc .m { padding:15px 16px; }
.btc .m.wide { grid-column:1 / -1; }
@media (min-width:760px){ .btc .m.wide { grid-column:auto; } }
.btc .m .k { font-size:10px; letter-spacing:1.2px; opacity:0.8; text-transform:uppercase; }
.btc .m .v { font-size:24px; font-weight:800; margin-top:7px; letter-spacing:-0.5px; }
.btc .m .s { font-size:11px; opacity:0.78; margin-top:3px; }
.btc .m .bar { height:5px; border-radius:3px; background:rgba(255,255,255,0.22); margin-top:10px; overflow:hidden; }
.btc .m .bar i { display:block; height:100%; width:0%; background:#fff; border-radius:3px; transition:width .6s ease; }
.btc .m .k .qd { opacity:0.45; font-weight:700; margin-left:2px; }

.btc .fee-rows { margin-top:8px; }
.btc .fee-row { display:flex; align-items:baseline; justify-content:space-between; gap:8px; line-height:1.5; }
.btc .fee-row .fl { font-size:10px; opacity:0.7; letter-spacing:0.5px; }
.btc .fee-row b { font-size:13.5px; font-weight:800; letter-spacing:-0.3px; }

.btc .fg-top { display:flex; align-items:baseline; gap:8px; }
.btc .fg-cls { font-size:11px; opacity:0.82; font-weight:700; letter-spacing:0.3px; }
.btc .fg-gauge { position:relative; height:6px; border-radius:3px; margin-top:10px;
                 background:linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.7)); overflow:visible; }
.btc .fg-gauge i { display:block; height:100%; width:0%; border-radius:3px; background:transparent; }
.btc .fg-needle { position:absolute; top:-3px; width:3px; height:12px; border-radius:2px; background:#fff;
                  box-shadow:0 0 8px rgba(255,255,255,0.9); left:0%; transform:translateX(-50%); transition:left .5s ease; }

.btc .tap { cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
.btc .tap:hover { transform:translateY(-2px); box-shadow:0 16px 38px rgba(0,20,18,0.34), inset 0 1px 0 rgba(255,255,255,0.34); }
.btc .hint { opacity:0.6; margin-top:4px; }

.btc .dash-foot { text-align:center; font-size:10px; letter-spacing:2px; opacity:0.7; margin-top:16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; } 

.btc .chart-sheet { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
                    padding:20px; background:rgba(0,20,18,0.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.btc .chart-sheet.open { display:flex; }
html.sheet-open, html.sheet-open body { overflow:hidden; }
html.sheet-open body { position:fixed; left:0; right:0; width:100%; }
.btc .chart-sheet { overscroll-behavior:contain; }
.btc .chart-body { overscroll-behavior:contain; }
.btc .chart-card { width:min(560px,94vw); max-height:84vh; border-radius:22px; display:flex; flex-direction:column;
                   overflow:hidden;
                   background:
                     linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
                     linear-gradient(158deg, rgba(0,58,53,0.94) 0%, rgba(0,53,48,0.94) 42%, rgba(0,40,35,0.94) 100%);
                   border:1px solid rgba(255,255,255,0.20); box-shadow:0 30px 80px rgba(0,14,12,0.5);
                   animation:btcpop .22s ease; }
@keyframes btcpop { from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.btc .chart-card .handle { display:none; }
.btc .chart-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 8px; }
.btc .chart-head .t { font-size:16px; font-weight:800; letter-spacing:-0.3px; }
.btc .chart-head .now { font-size:15px; font-weight:700; margin-left:auto; }
.btc .chart-denom { font-size:11px; opacity:0.7; padding:0 18px 2px; display:flex; align-items:center; gap:7px; }
.btc .chart-cur { font:inherit; cursor:pointer; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.5px;
                  background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.32); padding:4px 10px; border-radius:999px; }
.btc .chart-x { background:none; border:none; color:#fff; font-size:18px; line-height:1; opacity:0.85; cursor:pointer; padding:0 2px; }
.btc .chart-x:hover { opacity:1; }
.btc .chart-body { overflow-y:auto; padding:6px 18px 20px; flex:1 1 auto; min-height:0; }
.btc .chart-desc { font-size:11.5px; line-height:1.55; opacity:0.9; margin:6px 0 14px; }
.btc .chart-svg { width:100%; aspect-ratio:322 / 150; height:auto; display:block; touch-action:none; }
.btc .chart-stage { position:relative; }
.btc .scrub-line { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,0.75); display:none; pointer-events:none; }
.btc .scrub-tip { position:absolute; top:-4px; transform:translateX(-50%); background:rgba(0,26,23,0.88); border:1px solid rgba(255,255,255,0.3);
                  border-radius:8px; padding:4px 8px; font-size:10px; white-space:nowrap; display:none; pointer-events:none; }
.btc .pct-row { display:flex; gap:14px; flex-wrap:wrap; margin:0 0 12px; }
.btc .pct-row .p { font-size:11px; }
.btc .pct-row .p .lbl { opacity:0.6; margin-right:4px; letter-spacing:1px; }
.btc .pct-row .p b { font-weight:700; }
.btc .rng { display:flex; gap:4px; margin-top:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; justify-content:space-between; }
.btc .rng span { flex:0 0 auto; font-size:11px; opacity:0.8; padding:5px 8px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.btc .rng span.on { background:rgba(255,255,255,0.20); opacity:1; font-weight:700; }
.btc .logtog { font:inherit; cursor:pointer; color:#fff; font-size:12px; font-weight:700; letter-spacing:1px; opacity:0.8;
               background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.3); padding:5px 13px; border-radius:999px; }
.btc .logtog.on { background:rgba(255,255,255,0.22); opacity:1; }
.btc .scrub-hint { text-align:center; font-size:9px; letter-spacing:1px; opacity:0.55; margin-top:10px; }

.btc .mb-stat { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
                padding:11px 0; border-bottom:1px solid rgba(255,255,255,0.13); }
.btc .mb-stat:last-child { border-bottom:none; }
.btc .mb-stat .lbl { font-size:11px; letter-spacing:0.5px; opacity:0.72; text-transform:uppercase; }
.btc .mb-stat .val { font-size:14.5px; font-weight:800; letter-spacing:-0.3px; text-align:right; }
.btc .mb-stat .val.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; } 
.btc .mb-big { font-size:30px; font-weight:800; letter-spacing:-1px; margin:2px 0 2px; }
.btc .mb-sub { font-size:11.5px; opacity:0.72; margin-bottom:8px; }
.btc .mb-note { font-size:10.5px; opacity:0.6; letter-spacing:0.3px; margin-top:12px; line-height:1.5; }
.btc .mb-hash { word-break:break-all; font-size:11px; opacity:0.85; }
.btc .mb-chart { width:100%; aspect-ratio:322 / 150; height:auto; display:block; margin:4px 0 6px; }

.btc .fee-table { margin:4px 0 2px; }
.btc .fee-table .ft-row { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:baseline;
                          padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.13); }
.btc .fee-table .ft-row:last-child { border-bottom:none; }
.btc .fee-table .ft-row.head { opacity:0.6; font-size:10px; letter-spacing:1px; text-transform:uppercase; padding-bottom:6px; }
.btc .fee-table .ft-name { font-size:12.5px; }
.btc .fee-table .ft-rate { font-size:12.5px; font-weight:700; text-align:right; }
.btc .fee-table .ft-usd { font-size:12.5px; font-weight:800; text-align:right; min-width:54px; }

.btc .sched { margin-top:4px; }
.btc .sched .sr { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:baseline;
                  padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.12); font-size:12px; }
.btc .sched .sr:last-child { border-bottom:none; }
.btc .sched .sr.head { opacity:0.6; font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.btc .sched .sr.now { background:rgba(255,255,255,0.10); border-radius:10px; padding:9px 8px; }
.btc .sched .sh { font-weight:800; }
.btc .sched .ss { text-align:right; font-weight:800; letter-spacing:-0.3px; }

.btc .nb-stage { margin:6px 0 4px; }
.btc .nb-block { position:relative; height:118px; border-radius:14px; overflow:hidden;
                 background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22); }
.btc .nb-fill { position:absolute; left:0; bottom:0; width:100%; height:0%;
                background:linear-gradient(to top, rgba(255,255,255,0.30), rgba(255,255,255,0.10)); transition:height .6s ease; }
.btc .nb-tx { position:absolute; width:7px; height:7px; border-radius:50%;
              background: radial-gradient(circle at 50% 50%, rgba(255,239,176,0.98) 0%, rgba(255,196,84,0.75) 45%, transparent 72%);
              box-shadow:0 0 8px 2px rgba(255,205,110,0.55); animation:nbpop 2.4s ease-in-out infinite; }
@keyframes nbpop { 0%,100%{opacity:0.25; transform:scale(0.8);} 50%{opacity:0.95; transform:scale(1.1);} }
.btc .nb-cap { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
               text-align:center; pointer-events:none; }
.btc .nb-cap .nbh { font-size:24px; font-weight:800; letter-spacing:-0.5px; }
.btc .nb-cap .nbl { font-size:10px; letter-spacing:1.5px; opacity:0.8; margin-top:2px; }

@media (max-width:759px){
  .btc .chart-sheet { align-items:flex-start; height:100vh; height:100dvh;
    padding:calc(var(--bar-h) + 12px) 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .btc .chart-card { width:100%;
    max-height:calc(100vh - var(--bar-h) - 24px);
    max-height:calc(100dvh - var(--bar-h) - 24px - env(safe-area-inset-bottom, 0px)); }
  .btc .chart-body {
    max-height:calc(100vh - var(--bar-h) - 24px - 52px);
    max-height:calc(100dvh - var(--bar-h) - 24px - env(safe-area-inset-bottom, 0px) - 52px); }
}
