:root{
--bg:#0b0e13;--bg2:#0f1318;--bg3:#141920;--bg4:#1a2030;--bgz:#111620;
--bdr:rgba(255,255,255,0.055);--bdr2:rgba(255,255,255,0.11);
--text:#dce4f0;--muted:#5a6e85;--fg:#dce4f0;
--green:#10b981;--gd:rgba(16,185,129,0.12);
--red:#ef4444;--rd:rgba(239,68,68,0.12);
--amber:#f0a030;--ad:rgba(240,160,48,0.13);
--bnb:#d4a428;--bnbd:rgba(243,186,47,0.09);
--pro:#a78bfa;--prod:rgba(167,139,250,0.12);
--font-mono:'Inter',sans-serif;
--font-ui:'Inter',sans-serif;
--font-display:'Inter',sans-serif;
/* theme-aware overlays */
--w005:rgba(255,255,255,.05);--w01:rgba(255,255,255,.1);--w015:rgba(255,255,255,.15);
--b03:rgba(0,0,0,.3);--b05:rgba(0,0,0,.5);--b07:rgba(0,0,0,.7);
--card-inset:inset 0 1px 0 rgba(255,255,255,.04);
--tile-grad:linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 40%, rgba(0,0,0,.06) 100%);
--tile-bdr-bot:2px solid rgba(0,0,0,.35);
--overlay-bg:rgba(0,0,0,.72);
--tooltip-bg:rgba(10,14,20,.96);
}
:root.light{
--bg:#ddeaf6;--bg2:#d4e2f0;--bg3:#eef5fc;--bg4:#ccdaec;--bgz:#f8fafc;
--bdr:rgba(0,0,0,0.09);--bdr2:rgba(0,0,0,0.15);
--text:#111824;--muted:#3d5468;--fg:#111824;
--green:#059669;--gd:rgba(5,150,105,0.12);
--red:#dc2626;--rd:rgba(220,38,38,0.12);
--amber:#b87818;--ad:rgba(184,120,24,0.12);
--bnb:#8a6610;--bnbd:rgba(138,102,16,0.10);
--pro:#6a4dc0;--prod:rgba(106,77,192,0.12);
--card-shadow:0 2px 8px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.05);
--w005:rgba(0,0,0,.04);--w01:rgba(0,0,0,.07);--w015:rgba(0,0,0,.10);
--b03:rgba(0,0,0,.14);--b05:rgba(0,0,0,.22);--b07:rgba(0,0,0,.35);
--card-inset:inset 0 1px 0 rgba(255,255,255,.7);
--tile-grad:linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.2) 40%, rgba(0,0,0,.03) 100%);
--tile-bdr-bot:2px solid rgba(0,0,0,.12);
--overlay-bg:rgba(0,0,0,.40);
--tooltip-bg:rgba(238,245,252,.98);
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
/* Theme transition — GPU composite only, no layout thrash */
*{transition:background-color .18s ease,border-color .18s ease,color .12s ease;}
/* Kill the 300ms tap delay globally on all interactive elements */
button,a,[role="button"],input[type="button"],input[type="submit"],input[type="reset"],label,select,summary{touch-action:manipulation;}
/* Exclude animations and transforms from blanket transition */
.skel,.spinning,.rt-swap-arrows,.mob-nav-fab,.btc-pill,.pulse{transition:none !important;}
/* Mobile: kill blanket transition to prevent jank on scroll/nav */
@media(max-width:700px){
*{transition:none !important;}
/* Re-enable only where needed */
.collapse-body{transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s ease !important;}
.mob-nav-btn,.mob-nav-fab,.mob-more-item,.new-coin-card,.new-swap-dir-btn,.insight-pulse{transition:color .15s,background .15s !important;}
/* Eliminate 300ms tap delay on all interactive elements */
button,a,[role="button"],.mob-nav-btn,.mob-nav-fab,.mob-more-item,
.new-coin-card,.new-swap-dir-btn,.tile,.tile-placeholder,
.rt-picker-item,.collapse-hdr,.sig-tile,.asset-tile{
touch-action:manipulation;
}
}
html,body{height:100%;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:13px;line-height:1.4;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.02) 2px,rgba(0,0,0,0.02) 4px);pointer-events:none;z-index:998;}
:root.light body::before{display:none;}
/* ── TOPBAR ── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:5px 12px;border-bottom:1px solid var(--bdr);background:var(--bg2);position:sticky;top:0;z-index:100;flex-wrap:wrap;gap:5px;}
.tier-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:2px;font-size:12px;font-weight:600;letter-spacing:.1em;}
.tier-badge.free{background:var(--bg3);border:1px solid var(--bdr2);color:var(--muted);}
.tier-badge.pro{background:var(--prod);border:1px solid rgba(167,139,250,.35);color:var(--pro);text-shadow:0 0 8px rgba(167,139,250,.5);}
.btc-pill{display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:2px;font-size:12px;font-weight:600;letter-spacing:.07em;border:1px solid;}
.btc-pill.bull{background:var(--gd);border-color:var(--green);color:var(--green);}
.btc-pill.bear{background:var(--rd);border-color:var(--red);color:var(--red);}
.btc-pill.unk{background:var(--bg3);border-color:var(--bdr2);color:var(--muted);}
.pulse{width:5px;height:5px;border-radius:50%;background:currentColor;animation:pulse 2s infinite;flex-shrink:0;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.btc-meta{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;}
.topbar-r{display:flex;align-items:center;gap:2px;justify-content:flex-end;flex-shrink:0;}
/* ── Topbar search ── */
.topbar-search-wrap{position:relative;display:flex;align-items:center;}
/* Inline table-header search — same dropdown/results pattern as the
topbar search, just a compact always-visible input instead of an
icon-triggered one. Lives in the COIN column header. */
.table-search-wrap{position:relative;width:100%;}
.table-search-input{width:100%;max-width:180px;background:var(--bg3);border:1px solid var(--bdr);border-radius:5px;color:var(--text);font-family:inherit;font-size:12px;font-weight:400;text-transform:none;letter-spacing:normal;padding:6px 10px;outline:none;box-sizing:border-box;}
.table-search-input::placeholder{color:var(--muted);text-transform:none;letter-spacing:normal;}
.table-search-input:focus{border-color:var(--bnb);}
.table-search-dropdown{left:0;right:auto;width:280px;}
:root.light .table-search-input{background:var(--bg3);color:var(--text);}
.topbar-search-btn{background:transparent;border:none;color:var(--muted);width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;transition:background .15s,color .15s;padding:0;flex-shrink:0;}
.topbar-search-btn:hover{background:var(--bg4);color:var(--text);}
.topbar-search-dropdown{position:absolute;top:calc(100% + 6px);right:0;width:300px;background:var(--bg2);border:1px solid var(--bdr2);border-radius:6px;box-shadow:0 8px 32px rgba(0,0,0,.5);z-index:200;overflow:hidden;}
.topbar-search-input{width:100%;background:var(--bg3);border:none;border-bottom:1px solid var(--bdr);color:var(--text);font-family:inherit;font-size:12px;padding:10px 12px;outline:none;box-sizing:border-box;letter-spacing:.04em;}
.topbar-search-input::placeholder{color:var(--muted);}
.topbar-search-results{max-height:320px;overflow-y:auto;}
.topbar-search-result-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--bdr);transition:background .12s;font-size:12px;color:var(--text);}
.topbar-search-result-item:last-child{border-bottom:none;}
.topbar-search-result-item:hover{background:var(--bg3);}
.topbar-search-result-item img{width:20px;height:20px;border-radius:50%;flex-shrink:0;}
.topbar-search-empty{padding:14px 12px;font-size:12px;color:var(--muted);text-align:center;}
.ts{font-size:12px;color:var(--text);letter-spacing:.04em;opacity:.7;}
.btn{background:none;border:1px solid var(--bdr2);color:var(--muted);padding:3px 10px;font-family:inherit;font-size:12px;cursor:pointer;letter-spacing:.07em;border-radius:2px;transition:all .15s;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.btn:hover{border-color:var(--bnb);color:var(--bnb);}
.btn:disabled{opacity:.35;cursor:default;}
.btn.acc{border-color:var(--bnb);color:var(--bnb);}
.btn.acc:hover{background:var(--bnbd);}
.btn.donate{border-color:rgba(0,200,150,.3);color:var(--muted);min-width:80px;text-align:center;}
.btn.donate:hover{background:var(--gd);color:var(--green);border-color:rgba(0,200,150,.5);}
.btn.pro-btn{border-color:rgba(167,139,250,.3);color:var(--muted);position:relative;overflow:hidden;min-width:100px;text-align:center;}
.btn.pro-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(167,139,250,.08),transparent);animation:proShimmer 2.5s linear infinite;}
@keyframes proShimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.btn.pro-btn:hover{background:var(--prod);border-color:var(--pro);color:var(--pro);}
@keyframes spin{to{transform:rotate(360deg);}}
.spinning{display:inline-block;animation:spin .7s linear infinite;}
/* ── BEAR BANNER ── */
.bear-banner{display:none;align-items:center;gap:6px;padding:3px 10px;background:rgba(255,69,96,.07);border:1px solid rgba(255,69,96,.25);border-radius:3px;font-size:12px;color:var(--red);line-height:1.5;flex:1;min-width:0;margin:0 8px;font-family:var(--font-ui);}
.bear-banner.show{display:flex;}
.bear-banner span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bear-close{background:none;border:none;color:rgba(255,69,96,.5);cursor:pointer;font-size:16px;line-height:1;padding:0 0 0 4px;margin-left:auto;flex-shrink:0;font-family:inherit;transition:color .15s;}
.bear-close:hover{color:var(--red);}
/* ── SCALING TIP BANNER ── */
.scale-banner{display:none;align-items:center;gap:6px;padding:3px 10px;background:rgba(180,195,215,.07);border:1px solid rgba(180,195,215,.18);border-radius:3px;font-size:12px;color:rgba(180,195,215,.7);line-height:1.5;flex:1;min-width:0;margin:0 8px;font-family:var(--font-ui);}
.scale-banner.show{display:flex;}
@media(max-width:768px){.scale-banner{display:none !important;}}
.scale-banner span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scale-close{background:none;border:none;color:rgba(180,195,215,.4);cursor:pointer;font-size:16px;line-height:1;padding:0 0 0 4px;margin-left:auto;flex-shrink:0;font-family:inherit;transition:color .15s;}
.scale-close:hover{color:rgba(180,195,215,.8);}
/* ══════════════════════════════
MODALS
══════════════════════════════ */
.overlay{display:none;position:fixed;inset:0;background:var(--overlay-bg);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.overlay.show{display:flex;}
.modal{background:var(--bg2);border-radius:var(--card-radius);box-shadow:0 8px 40px rgba(0,0,0,.6);padding:28px;width:100%;max-width:500px;position:relative;margin:16px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;}
.modal-x{
position:absolute;top:10px;right:10px;
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
background:var(--bg4);border:1px solid var(--bdr2);border-radius:50%;
color:var(--muted);font-size:18px;line-height:1;
cursor:pointer;transition:all .15s;z-index:10001;
font-family:inherit;
left:auto;
}
.modal-x:hover{color:var(--text);background:var(--bg3);border-color:var(--red);color:var(--red);}
.modal .modal-title{padding-right:50px;}
#pro-modal .modal{overflow:hidden;}
#pro-modal .modal-x{top:10px;right:10px;}
#pro-modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;padding-right:4px;}
.already-pro{margin-top:4px;}
.modal-title{font-size:18px;font-weight:600;margin-bottom:6px;letter-spacing:.04em;font-family:var(--font-mono);}
.modal-sub{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.9;font-family:var(--font-mono);}
/* donate modal */
#donate-modal .modal{border:1px solid rgba(243,186,47,.28);box-shadow:0 0 40px rgba(243,186,47,.1);}
#donate-modal .modal-title{color:var(--bnb);}
/* Community channel buttons (Telegram = Pro signals, Discord placeholder) */
.community-tier-row{display:flex;gap:8px;margin-bottom:14px;}
.community-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 14px;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.04em;cursor:pointer;border-radius:6px;transition:all .18s;text-decoration:none;text-align:center;}
.community-btn-tg{background:rgba(40,159,217,.14);border:1px solid rgba(40,159,217,.45);color:#5dc4ee;}
.community-btn-tg:hover{background:rgba(40,159,217,.24);border-color:rgba(40,159,217,.7);color:#7dd6fa;}
.community-btn-dc{background:rgba(88,101,242,.10);border:1px solid rgba(88,101,242,.35);color:#9aa3f5;}
.community-btn-dc:hover{background:rgba(88,101,242,.18);border-color:rgba(88,101,242,.55);color:#b5bcfa;}
.community-btn-soon{cursor:not-allowed;opacity:.6;}
.community-btn-soon:hover{background:rgba(88,101,242,.10);border-color:rgba(88,101,242,.35);color:#9aa3f5;}
/* Legal content (ToS + Privacy modals) */
.legal-content{font-size:12px;color:rgba(200,215,230,.85);line-height:1.9;font-family:var(--font-mono);}
.legal-content h4{font-size:13px;font-weight:700;color:var(--text);margin:16px 0 6px;letter-spacing:.02em;}
.legal-content p{margin:0 0 10px;}
.legal-content strong{color:var(--text);}
#tos-modal .modal{border:1px solid rgba(243,186,47,.22);box-shadow:0 0 40px rgba(243,186,47,.06);}
#privacy-modal .modal{border:1px solid rgba(0,200,150,.22);box-shadow:0 0 40px rgba(0,200,150,.06);}
/* Consent banner */
.consent-banner{position:fixed;bottom:0;left:0;right:0;z-index:700;background:rgba(10,14,20,.96);border-top:1px solid rgba(243,186,47,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:0;animation:consentSlideUp .4s cubic-bezier(.22,.68,0,1.2) both;}
@keyframes consentSlideUp{from{transform:translateY(100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
.consent-inner{max-width:900px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;gap:16px;}
.consent-text{flex:1;font-size:12px;color:rgba(200,215,230,.85);line-height:1.7;}
.consent-text strong{color:var(--text);}
.consent-accept-btn{flex-shrink:0;padding:10px 24px;background:rgba(243,186,47,.15);border:1px solid rgba(243,186,47,.4);color:var(--bnb);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.08em;cursor:pointer;border-radius:6px;transition:all .18s;white-space:nowrap;}
.consent-accept-btn:hover{background:rgba(243,186,47,.25);border-color:var(--bnb);transform:translateY(-1px);}
@media(max-width:700px){
.consent-inner{flex-direction:column;gap:10px;padding:14px 16px 20px;text-align:center;}
.consent-accept-btn{width:100%;}
}
.network-tag{display:inline-flex;align-items:center;gap:5px;background:var(--rd);border:1px solid rgba(255,69,96,.3);border-radius:2px;padding:4px 12px;font-size:12px;color:var(--red);letter-spacing:.08em;font-weight:600;margin-bottom:14px;}
.addr-box{background:var(--bg3);border:1px solid var(--bdr2);border-radius:3px;padding:12px 14px;margin-bottom:12px;font-size:13px;color:var(--bnb);word-break:break-all;letter-spacing:.04em;line-height:1.7;font-weight:500;}
.copy-btn{width:100%;padding:11px;background:rgba(243,186,47,.1);border:1px solid rgba(243,186,47,.3);color:var(--bnb);font-family:inherit;font-size:13px;letter-spacing:.1em;cursor:pointer;border-radius:3px;transition:all .15s;font-weight:600;min-height:44px;}
.copy-btn:hover{background:rgba(243,186,47,.18);border-color:var(--bnb);}
.copy-btn.ok{background:var(--gd);border-color:var(--green);color:var(--green);}
.modal-note{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.9;text-align:center;font-family:var(--font-ui);}
/* pro unlock modal */
#pro-modal .modal{border:1px solid rgba(167,139,250,.3);box-shadow:0 0 40px rgba(167,139,250,.08);}
#pro-modal .modal-title{color:var(--pro);}
.pro-steps{margin-bottom:18px;}
.pro-step{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;}
.step-num{width:24px;height:24px;border-radius:50%;background:var(--prod);border:1px solid rgba(167,139,250,.3);color:var(--pro);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.step-txt{font-size:13px;color:var(--text);line-height:1.8;font-family:var(--font-ui);}
.step-txt em{color:var(--bnb);font-style:normal;font-weight:500;}
.step-txt a{color:var(--pro);text-decoration:none;}
.step-txt a:hover{text-decoration:underline;}
.pro-divider{border:none;border-top:1px solid var(--bdr);margin:16px 0;}
.code-row{display:flex;gap:8px;}
.code-input{flex:1;background:var(--bg3);border:1px solid var(--bdr2);color:var(--text);font-family:inherit;font-size:13px;padding:8px 12px;border-radius:3px;outline:none;letter-spacing:.1em;text-transform:uppercase;}
.code-input:focus{border-color:var(--pro);}
.code-input::placeholder{color:var(--muted);text-transform:none;letter-spacing:normal;}
.code-btn{padding:8px 16px;background:var(--prod);border:1px solid rgba(167,139,250,.35);color:var(--pro);font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.1em;cursor:pointer;border-radius:3px;transition:all .15s;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.code-btn:hover{background:rgba(167,139,250,.2);border-color:var(--pro);}
.code-err{font-size:12px;color:var(--red);margin-top:8px;min-height:16px;font-family:var(--font-ui);}
/* Pro plan tier cards */
.pro-plans-row{display:flex;gap:8px;margin-bottom:14px;}
.pro-plan-card{flex:1;display:flex;flex-direction:column;align-items:center;padding:14px 8px;background:var(--bg3);border:1px solid rgba(167,139,250,.2);border-radius:6px;text-decoration:none;cursor:pointer;transition:all .2s;}
.pro-plan-card:hover{border-color:var(--pro);background:var(--prod);box-shadow:0 2px 12px rgba(167,139,250,.15);}
.pro-plan-price{font-size:22px;font-weight:800;color:var(--pro);letter-spacing:-.02em;line-height:1;}
.pro-plan-dur{font-size:12px;color:var(--text);margin-top:4px;font-weight:600;letter-spacing:.06em;}
.pro-plan-badge{font-size:12px;color:var(--muted);margin-top:6px;letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;background:var(--bg4);border-radius:3px;}
.pro-plan-best{border-color:var(--pro);position:relative;}
.pro-plan-best-tag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:800;letter-spacing:.12em;color:#fff;background:var(--pro);padding:2px 8px;border-radius:3px;white-space:nowrap;}
/* ── Referral viral share block (used in Pro modal) ─────────── */
.refx-section{background:linear-gradient(135deg,rgba(167,139,250,.08),rgba(167,139,250,.02));border:1px solid rgba(167,139,250,.25);border-radius:6px;padding:14px;margin-bottom:14px;}
.refx-hdr{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;}
.refx-title{font-size:12px;letter-spacing:.12em;color:var(--pro);font-weight:700;}
.refx-count{font-size:13px;font-weight:700;color:var(--pro);font-family:var(--font-mono);background:rgba(167,139,250,.15);border:1px solid rgba(167,139,250,.3);border-radius:3px;padding:2px 8px;}
.refx-bar{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;margin-bottom:8px;}
.refx-bar-fill{height:100%;background:linear-gradient(90deg,var(--pro),#8d6efc);transition:width .3s ease;}
.refx-sub{font-size:12px;color:var(--text);line-height:1.6;margin-bottom:10px;}
.refx-row{display:flex;gap:6px;margin-bottom:10px;}
.refx-link{flex:1;background:var(--bg3);border:1px solid var(--bdr2);color:var(--text);font-family:var(--font-mono);font-size:11px;padding:8px 10px;border-radius:3px;outline:none;letter-spacing:0;text-transform:none;}
.refx-copy{padding:8px 14px;background:rgba(167,139,250,.15);border:1px solid rgba(167,139,250,.35);color:var(--pro);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;cursor:pointer;border-radius:3px;transition:all .15s;white-space:nowrap;}
.refx-copy:hover{background:rgba(167,139,250,.25);}
.refx-copy.ok{background:rgba(0,200,150,.15);border-color:rgba(0,200,150,.4);color:var(--green);}
.refx-channels{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.refx-ch{padding:8px 6px;background:var(--bg3);border:1px solid var(--bdr2);color:var(--text);font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.04em;cursor:pointer;border-radius:3px;transition:all .15s;text-align:center;}
.refx-ch:hover{border-color:var(--pro);color:var(--pro);background:rgba(167,139,250,.1);}
@media(max-width:480px){
.refx-channels{grid-template-columns:repeat(2,1fr);}
.refx-title{font-size:11px;}
}
.already-pro{text-align:center;padding:12px;}
.already-pro-icon{font-size:28px;margin-bottom:8px;}
.already-pro-txt{font-size:15px;color:var(--pro);font-weight:400;margin-bottom:4px;font-family:var(--font-display);}
.already-pro-sub{font-size:13px;color:var(--muted);font-family:var(--font-ui);}
.revoke-btn{background:none;border:none;color:var(--muted);font-family:inherit;font-size:12px;cursor:pointer;margin-top:8px;letter-spacing:.06em;text-decoration:underline;}
.revoke-btn:hover{color:var(--red);}
/* pro locked row */
.pro-locked-row{
background:linear-gradient(90deg,rgba(167,139,250,.04),rgba(167,139,250,.01)) !important;
opacity:.55;cursor:pointer;
}
.pro-locked-row:hover{opacity:.75 !important;background:rgba(167,139,250,.08) !important;}
.pro-lock-cell{text-align:center;color:var(--pro);font-size:12px;letter-spacing:.06em;}
/* ── SKELETON LOADERS ── */
@keyframes shimmer {
0% { background-position: -600px 0; }
100% { background-position: 600px 0; }
}
.skel {
background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
background-size: 600px 100%;
animation: shimmer 1.4s infinite linear;
border-radius: 3px;
}
.skel-row { display:flex; align-items:center; gap:8px; padding:6px 5px; border-bottom:1px solid var(--bdr); }
.skel-ico { width:22px; height:22px; border-radius:50%; flex-shrink:0; }
.skel-name { height:10px; flex:1; }
.skel-val { height:10px; width:52px; }
.skel-tile { height:88px; border-radius:4px; }
.skel-asset-tile{background:var(--bg3);border:1px solid var(--bdr);border-radius:4px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;animation:skel-pulse 1.5s ease-in-out infinite;}
.skel-asset-head{display:flex;align-items:center;gap:8px;}
.skel-asset-sym{height:12px;width:48px;border-radius:2px;}
.skel-asset-name{height:9px;width:90px;border-radius:2px;}
.skel-asset-price{height:14px;width:70px;border-radius:2px;}
.skel-asset-stats{display:flex;gap:10px;}
.skel-asset-stat{height:9px;width:38px;border-radius:2px;}
.loading-source-msg{text-align:center;padding:10px 16px 6px;font-size:12px;letter-spacing:.06em;color:var(--muted);opacity:.75;line-height:1.7;font-family:var(--font-ui);}
/* ── ROOT LAYOUT ── */
.root{display:grid;grid-template-columns:310px 1fr 310px;height:calc(100vh - 33px);}
/* ── DESKTOP ONLY: hide tier badge, uniform panel heights ── */
@media(min-width:701px){
.topbar-action-btns .btn.pro-btn{display:none;} /* remove FREE TOP 50 from topbar actions */
.tier-badge{display:none !important;}
}
/* ══════════════════════════════
LEFT SIDEBAR
══════════════════════════════ */
.sidebar{background:linear-gradient(180deg,rgba(240,140,30,.04) 0%,rgba(240,140,30,.02) 50%,var(--bg2) 100%);border-right:1px solid rgba(240,140,30,.15);display:flex;flex-direction:column;overflow:hidden;height:100%;max-height:100%;}
.phead{padding:5px 14px;border-bottom:1px solid var(--bdr);border-top:1px solid var(--bdr);background:var(--bg2);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.ptitle{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--font-display);}
.ptitle em{color:var(--bnb);font-style:normal;}
.add-form{padding:12px 16px;border-bottom:1px solid var(--bdr);background:var(--bg3);flex-shrink:0;}
.frow{display:flex;gap:6px;align-items:center;margin-bottom:6px;}
.frow:last-of-type{margin-bottom:0;}
.flbl{font-size:12px;color:rgba(180,195,215,.7);letter-spacing:.08em;text-transform:uppercase;width:36px;flex-shrink:0;}
.frow select,.frow input{flex:1;background:var(--bg4);border:1px solid var(--bdr2);color:var(--text);font-family:inherit;font-size:12px;padding:4px 7px;border-radius:2px;outline:none;}
.frow select:focus,.frow input:focus{border-color:var(--bnb);}
.frow input::placeholder{color:rgba(100,120,145,.8);}
.add-btn{width:100%;padding:5px;background:var(--bnbd);border:1px solid rgba(243,186,47,.22);color:var(--bnb);font-family:inherit;font-size:12px;letter-spacing:.1em;cursor:pointer;border-radius:2px;transition:all .15s;margin-top:5px;min-height:44px;}
.add-btn:hover{background:rgba(243,186,47,.16);border-color:var(--bnb);}
.tiles-scroll-legacy{overflow-y:auto;overflow-x:hidden;padding:10px 12px;min-height:110px;max-height:210px;flex-shrink:0;}
.holdings-section-label{padding:0 10px 0 14px;height:38px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(180,195,215,.7);font-weight:600;border-bottom:1px solid rgba(240,140,30,.12);background:rgba(240,140,30,.025);display:flex;align-items:center;justify-content:space-between;gap:6px;flex-shrink:0;font-family:var(--font-ui);}
.tiles-grid-legacy{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;width:100%;}
.tile{position:relative;overflow:hidden;border-radius:var(--card-radius);box-shadow:var(--card-shadow), var(--card-inset);padding:9px 10px 9px 13px;border:1px solid var(--bdr);border-bottom:var(--tile-bdr-bot);background:var(--tile-grad), var(--bg3);min-width:0;}
.tile::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;}
.tile.glow-g{border-color:rgba(0,200,150,.35);box-shadow:0 0 10px rgba(0,200,150,.12), inset 0 1px 0 rgba(255,255,255,.04);}
.tile.glow-g::before{background:var(--green);}
.tile.glow-a{border-color:rgba(240,160,48,.35);box-shadow:0 0 10px rgba(240,160,48,.12), inset 0 1px 0 rgba(255,255,255,.04);}
.tile.glow-a::before{background:var(--amber);}
.tile.glow-r{border-color:rgba(255,69,96,.28);box-shadow:0 0 8px rgba(255,69,96,.1), inset 0 1px 0 rgba(255,255,255,.04);}
.tile.glow-r::before{background:var(--red);}
.tile canvas.sp{position:absolute;inset:0;pointer-events:none;width:100%;height:100%;}
.tile-top{display:flex;align-items:center;gap:6px;margin-bottom:5px;}
.tile-ico{width:22px;height:22px;border-radius:50%;overflow:hidden;background:var(--bg4);flex-shrink:0;}
.tile-ico img{width:100%;height:100%;}
.tile-sym{font-size:13px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tile-rm{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0;flex-shrink:0;transition:color .15s;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.tile-rm:hover{color:var(--red);}
.tile-price{font-size:12px;color:var(--text);margin-bottom:3px;font-weight:500;}
.tile-perfs{display:flex;gap:3px;margin-bottom:3px;justify-content:flex-start;margin-right:auto;max-width:90%;}
.tpf{display:flex;flex-direction:column;align-items:center;flex:1;background:var(--bg4);border-radius:4px;padding:3px 2px;}
.tpf-l{font-size:12px;color:var(--muted);}
.tpf-v{font-size:12px;font-weight:600;}
.tpf-v.up{color:var(--green);}
.tpf-v.dn{color:var(--red);}
.tile-foot{display:flex;align-items:center;justify-content:space-between;gap:4px;}
.tile-pl{font-size:12px;font-weight:500;}
.tile-pl.up{color:var(--green);}
.tile-pl.dn{color:var(--red);}
.tile-scr{font-size:12px;font-weight:700;padding:2px 7px;border-radius:4px;}
.tile-scr.hi{background:var(--gd);color:var(--green);}
.tile-scr.md{background:var(--ad);color:var(--amber);}
.tile-scr.lo{background:var(--rd);color:var(--red);}
/* ── INSIGHT ENGINE — tile badges & detail panel ─────────── */
.tile-insight{padding:3px 0 1px;display:flex;justify-content:center;}
.insight-pulse{
display:inline-flex;align-items:center;gap:4px;
padding:3px 8px;border-radius:4px;
font-size:12px;font-weight:700;letter-spacing:.1em;
cursor:default;position:relative;white-space:nowrap;
transition:background .2s;
}
.insight-buy{background:rgba(0,200,150,.13);border:1px solid rgba(0,200,150,.35);color:#00c896;}
.insight-buy .insight-dot{background:#00c896;}
.insight-neut{background:rgba(135,206,235,.1);border:1px solid rgba(135,206,235,.3);color:#87CEEB;}
.insight-neut .insight-dot{background:#87CEEB;}
.insight-warn{background:rgba(255,69,96,.1);border:1px solid rgba(255,69,96,.3);color:#ff4560;}
.insight-warn .insight-dot{background:#ff4560;}
.insight-dot{
width:6px;height:6px;border-radius:50%;flex-shrink:0;
animation:insightPulse 2s ease-in-out infinite;
}
@keyframes insightPulse{
0%,100%{opacity:1;transform:scale(1);}
50%{opacity:.4;transform:scale(.7);}
}
.insight-lbl{font-size:12px;font-weight:700;letter-spacing:.08em;}
.insight-score{font-size:12px;font-weight:600;opacity:.7;margin-left:2px;}
/* Tooltip on hover (tiles) */
.insight-pulse::after{
content:attr(data-tip);
position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
background:var(--bg2);border:1px solid var(--bdr2);
border-radius:5px;padding:8px 10px;
font-size:12px;font-weight:400;letter-spacing:.03em;
color:var(--text);line-height:1.6;
width:240px;white-space:normal;text-align:left;
box-shadow:0 6px 24px rgba(0,0,0,.5);
pointer-events:none;opacity:0;transition:opacity .15s;z-index:50;
font-family:var(--font-ui,sans-serif);
}
.insight-pulse:hover::after{opacity:1;}
/* Light mode overrides */
:root.light .insight-buy{background:rgba(0,160,120,.1);border-color:rgba(0,160,120,.3);color:#007a5c;}
:root.light .insight-buy .insight-dot{background:#007a5c;}
:root.light .insight-neut{background:rgba(100,170,210,.12);border-color:rgba(100,170,210,.35);color:#2288bb;}
:root.light .insight-neut .insight-dot{background:#2288bb;}
:root.light .insight-warn{background:rgba(200,30,50,.08);border-color:rgba(200,30,50,.25);color:#c41e3a;}
:root.light .insight-warn .insight-dot{background:#c41e3a;}
:root.light .insight-pulse::after{background:var(--bg2);border-color:var(--bdr);color:var(--text);}
/* Detail panel — Insight Engine section: SECONDARY panel, visually demoted vs Score Breakdown */
.td-insight-sec{background:#1a1f26;border-radius:10px;padding:14px 14px 12px;border:1px solid rgba(255,255,255,.04);}
.td-insight-sec .td-section-title{margin-bottom:10px;}
.td-insight-sec .td-section-title::after{display:none;}
:root.light .td-insight-sec{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.06);}
.td-pro-tag{font-size:9px;font-weight:800;letter-spacing:.12em;padding:2px 6px;border-radius:10px;background:rgba(167,139,250,.15);border:1px solid rgba(167,139,250,.3);color:var(--pro);vertical-align:middle;}
/* 24h-delayed insight (shown to free users for tracked coins) */
.td-delayed-banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;padding:6px 10px;background:linear-gradient(90deg,rgba(243,186,47,.08),rgba(243,186,47,.02));border:1px solid rgba(243,186,47,.25);border-radius:4px;}
.td-delayed-tag{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--bnb);background:rgba(243,186,47,.15);border:1px solid rgba(243,186,47,.35);padding:2px 7px;border-radius:3px;}
.td-delayed-sub{font-size:11px;color:var(--muted);font-family:var(--font-mono);}
.td-delayed-cta{margin-top:10px;padding:10px;background:rgba(167,139,250,.06);border:1px dashed rgba(167,139,250,.25);border-radius:4px;text-align:center;}
.td-delayed-cta-txt{font-size:12px;color:var(--text);margin-bottom:6px;line-height:1.5;}
.td-insight-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.td-insight-pulse{font-size:10px;padding:3px 9px;border-radius:10px;}
.td-insight-score{font-size:22px;font-weight:700;font-family:var(--font-mono);letter-spacing:-.01em;}
.td-insight-signals{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.td-insight-pill{font-size:11px;font-weight:600;letter-spacing:.04em;padding:4px 10px;border-radius:12px;line-height:1.3;font-family:var(--font-ui,sans-serif);border:0;}
.td-insight-pill.bull{background:rgba(0,200,150,.13);color:var(--green);}
.td-insight-pill.bear{background:rgba(255,69,96,.13);color:var(--red);}
.td-insight-pill.neut{background:rgba(135,206,235,.12);color:#87CEEB;}
:root.light .td-insight-pill.neut{color:#2288bb;background:rgba(34,136,187,.10);}
:root.light .td-insight-pill.neut{color:#2288bb;}
.td-insight-fg{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;background:var(--bg3);border:1px solid var(--bdr);border-radius:4px;font-size:12px;}
.td-insight-fg-lbl{font-weight:600;letter-spacing:.1em;color:var(--muted);font-size:12px;}
.td-insight-fg-val{font-weight:700;letter-spacing:.04em;}
.td-insight-fg-val.bull{color:var(--green);}
.td-insight-fg-val.bear{color:var(--red);}
.td-insight-fg-val.neut{color:#87CEEB;}
:root.light .td-insight-fg-val.neut{color:#2288bb;}
.sig-box{padding:8px 12px 9px;border-bottom:1px solid rgba(243,186,47,.18);background:linear-gradient(135deg,rgba(243,186,47,.08),rgba(243,186,47,.02));flex-shrink:0;}
.sig-title{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(210,170,60,.85);margin-bottom:6px;font-family:var(--font-display);display:flex;align-items:center;gap:5px;}
.sig-title::before{content:'';width:3px;height:3px;background:rgba(210,170,60,.7);border-radius:50%;flex-shrink:0;}
.sig-avg{font-size:24px;font-weight:600;margin-bottom:5px;display:flex;align-items:baseline;gap:5px;}
.sig-avg-lbl{font-size:12px;color:var(--muted);font-weight:400;}
.sig-row-head{font-size:12px;font-weight:600;letter-spacing:.06em;margin-bottom:3px;margin-top:7px;}
.sig-coin-row{display:flex;align-items:center;justify-content:space-between;padding:2px 5px;border-radius:2px;margin-bottom:2px;}
.sig-coin-row.sell{background:rgba(240,160,48,.08);border-left:2px solid var(--amber);}
.sig-coin-row.buy{background:rgba(255,69,96,.07);border-left:2px solid var(--red);}
.sig-coin-row.ok{background:rgba(0,200,150,.07);border-left:2px solid var(--green);}
.scr-sym{font-size:12px;font-weight:700;}
.scr-val{font-size:12px;font-weight:500;}
/* ══════════════════════════════
CENTER
══════════════════════════════ */
.content{display:flex;flex-direction:column;overflow:hidden;height:100%;}
.neon-section{position:relative;border-bottom:1px solid var(--bdr);background:var(--bg2);overflow:hidden;flex-shrink:0;}
.neon-section::before{
content:'';position:absolute;inset:0;
border:2px solid transparent;
background:linear-gradient(var(--bg2),var(--bg2)) padding-box,
linear-gradient(90deg,transparent 0%,rgba(210,160,35,.18) 25%,rgba(220,175,55,.22) 50%,rgba(210,160,35,.18) 75%,transparent 100%) border-box;
background-size:100% 100%,200% 100%;
animation:neonSweep 2.8s linear infinite;
pointer-events:none;z-index:1;
}
@keyframes neonSweep{0%{background-position:0% 0%,-100% 0%;}100%{background-position:0% 0%,100% 0%;}}
.neon-section::after{content:'';position:absolute;inset:0;animation:neonPulse 2.5s ease-in-out infinite;pointer-events:none;z-index:0;}
@keyframes neonPulse{
0%,100%{box-shadow:inset 0 0 20px rgba(210,160,35,.02),0 0 15px rgba(210,160,35,.025);}
50% {box-shadow:inset 0 0 40px rgba(210,160,35,.04),0 0 28px rgba(210,160,35,.06);}
}
.neon-inner{padding:12px 14px 14px;position:relative;z-index:2;display:flex;gap:12px;min-height:0;}
/* Compact tiles in signal section */
.bars-col-inner{padding:10px 10px 8px !important;}
.sig-tiles-grid{gap:5px !important;}
.bar-col-title{font-size:12px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-display);text-align:center;}
.bar-col-title::before{content:'';flex:1;height:1px;opacity:.25;background:currentColor;}
.bar-col-title::after{content:'';flex:1;height:1px;opacity:.25;background:currentColor;}
/* ── SIGNAL TILE GRID (Rotation / Momentum / Worst) ── */
.bars-cols{display:flex;gap:10px;flex:1;align-items:stretch;}
.bars-divider{display:none;}
.bars-col-inner{flex:1;min-width:0;background:var(--bg3);border:1px solid var(--bdr);border-radius:10px;padding:12px 10px 10px;border-top:2px solid transparent;display:flex;flex-direction:column;}
/* The three columns are stretched to equal height by .bars-cols'
align-items:stretch, which keeps the bordered cards aligned. Without
the two rules below only the CARD stretched and its contents did not,
so whichever column had the fewest tiles showed dead space under them
— in the middle of the screen, in the section people look at first.
Making the card a flex column and letting the tile grid grow means the
grid's existing grid-auto-rows:1fr distributes the height across the
rows that ARE there. Fewer tiles now means taller tiles, never a gap.
Mobile is untouched: the max-width:700 block below overrides
grid-auto-rows to auto, so rows keep their natural height and the
column scrolls. */
.bars-col-inner > div:not(.bar-col-title){flex:1;display:flex;flex-direction:column;min-height:0;}
.bars-col-inner .sig-tiles-grid{flex:1;}
.bars-col-inner:nth-child(1){border-top-color:rgba(0,200,150,.6);border-color:rgba(0,200,150,.18);box-shadow:none;}
.bars-col-inner:nth-child(2){border-top-color:rgba(240,160,48,.6);border-color:rgba(240,160,48,.18);box-shadow:none;}
.bars-col-inner:nth-child(3){border-top-color:rgba(255,69,96,.6);border-color:rgba(255,69,96,.18);box-shadow:none;}
.sig-tiles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;align-items:stretch;grid-auto-rows:1fr;max-height:none;}
/* ── Rotation blur+lock tile wrapper ── */
.sig-rot-locked{position:relative;cursor:pointer;border-radius:3px;overflow:hidden;}
.sig-rot-locked:hover .sig-rot-blur{filter:blur(2px) brightness(.7);}
.sig-rot-blur{filter:blur(3.5px) brightness(.6);pointer-events:none;user-select:none;transition:filter .2s ease;}
.sig-rot-lock-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:rgba(10,12,18,.35);transition:background .2s ease;}
.sig-rot-locked:hover .sig-rot-lock-overlay{background:rgba(167,139,250,.12);}
.sig-rot-lock-overlay span{text-shadow:0 0 10px rgba(167,139,250,.6);}
.sig-tile{background:var(--tile-grad), var(--bg4);border:1px solid var(--bdr);border-bottom:var(--tile-bdr-bot);border-radius:var(--card-radius);box-shadow:var(--card-shadow), var(--card-inset);padding:8px 9px;position:relative;overflow:hidden;cursor:pointer;transition:transform .18s cubic-bezier(.22,.68,0,1.4),box-shadow .18s ease,border-color .18s ease;-webkit-backface-visibility:hidden;backface-visibility:hidden;min-height:60px;}
.sig-tile.pro-locked{border-style:dashed;border-color:rgba(243,186,47,.2);background:rgba(243,186,47,.03);transition:border-color .2s,background .2s;}.sig-tile.pro-locked:hover{border-color:rgba(243,186,47,.5);background:rgba(243,186,47,.07);}
.sig-tile-empty{border-style:dashed !important;border-color:rgba(0,200,150,.18) !important;background:rgba(0,200,150,.02) !important;min-height:60px;cursor:pointer;transition:border-color .2s,background .2s !important;}
.sig-tile-empty:hover{border-color:rgba(0,200,150,.4) !important;background:rgba(0,200,150,.06) !important;transform:none !important;box-shadow:none !important;}
.sig-tile:hover{transform:translateY(-2px);border-color:rgba(243,186,47,.4);box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 12px rgba(243,186,47,.1);z-index:2;}
.sig-tile:active{transform:translateY(-1px);}
.sig-tile.rot::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--green);}
.sig-tile.mom::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--amber);}
.sig-tile.wrst::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);}
.sig-tile-top{display:flex;align-items:center;gap:6px;margin-bottom:5px;}
.sig-tile-ico{width:22px;height:22px;border-radius:50%;overflow:hidden;background:var(--bg3);flex-shrink:0;}
.sig-tile-ico img{width:100%;height:100%;display:block;}
.sig-tile-sym{font-size:13px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sig-tile-badge{font-size:12px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.06em;flex-shrink:0;}
.sig-tile-badge.rot{background:rgba(0,200,150,.13);color:var(--green);border:1px solid rgba(0,200,150,.28);}
.sig-tile-badge.mom{background:rgba(240,160,48,.13);color:var(--amber);border:1px solid rgba(240,160,48,.28);}
.sig-tile-badge.wrst{background:var(--rd);color:var(--red);border:1px solid rgba(255,69,96,.28);}
.sig-tile-arrow{font-size:12px;color:var(--muted);margin-bottom:4px;display:flex;align-items:center;gap:3px;}
.sig-tile-arrow .arr-from{color:var(--red);font-weight:600;}
.sig-tile-arrow .arr-to{color:var(--green);font-weight:600;}
.sig-tile-stats{display:flex;gap:3px;}
.sig-stat{display:flex;flex-direction:column;align-items:center;flex:1;background:var(--bg3);border-radius:4px;padding:3px 2px;}
.sig-stat-l{font-size:12px;color:var(--muted);letter-spacing:.04em;}
.sig-stat-v{font-size:12px;font-weight:700;}
.sig-stat-v.up{color:var(--green);}
.sig-stat-v.dn{color:var(--red);}
.sig-stat-v.am{color:var(--amber);}
.no-sug{font-size:12px;color:var(--muted);font-style:italic;padding:6px 2px;line-height:1.8;display:flex;align-items:center;gap:6px;font-family:var(--font-ui);}
.no-sug::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--muted);animation:pulse 2s infinite;flex-shrink:0;}
/* ── ASSET TILE GRID (Stocks + Forex panels) ── */
.asset-tiles-wrap{padding:10px 12px;display:grid;gap:7px;}
.asset-tiles-wrap.stocks-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
.asset-tiles-wrap.forex-grid {grid-template-columns:repeat(auto-fill,minmax(155px,1fr));}
.asset-tile{
background:var(--bg4);border:1px solid var(--bdr);border-radius:var(--card-radius);
padding:10px 12px;cursor:pointer;position:relative;
transition:transform .18s cubic-bezier(.22,.68,0,1.4),
box-shadow .18s ease,border-color .18s ease;
will-change:transform;
}
.asset-tile:hover{
transform:translateY(-3px) scale(1.025);
border-color:rgba(243,186,47,.4);
box-shadow:0 8px 24px var(--b03),0 0 12px rgba(243,186,47,.1);
z-index:2;
}
.asset-tile:active{transform:translateY(-1px) scale(1.01);}
.asset-tile.held{background:rgba(243,186,47,.04);border-color:rgba(243,186,47,.2);}
/* left accent bar by type */
.asset-tile::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:var(--card-radius) 0 0 var(--card-radius);}
.asset-tile.type-index::before{background:var(--pro);}
.asset-tile.type-stock::before{background:var(--bnb);}
.asset-tile.type-forex::before{background:var(--green);}
.asset-tile.type-commodity::before{background:var(--amber);}
/* score glow */
.asset-tile.score-hi{border-color:rgba(0,200,150,.3);}
.asset-tile.score-lo{border-color:rgba(255,69,96,.25);}
/* tile header */
.at-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:5px;}
.at-sym{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--text);line-height:1.2;}
.at-sym.forex-sym{color:var(--bnb);}
.at-name{font-size:12px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-family:var(--font-ui);}
.at-badge{font-size:12px;font-weight:700;padding:1px 5px;border-radius:2px;letter-spacing:.06em;flex-shrink:0;margin-left:4px;margin-top:1px;}
.at-badge.idx{background:rgba(167,139,250,.13);color:var(--pro);border:1px solid rgba(167,139,250,.25);}
.at-badge.stk{background:var(--bnbd);color:var(--bnb);border:1px solid rgba(243,186,47,.2);}
.at-badge.fx {background:rgba(0,200,150,.1);color:var(--green);border:1px solid rgba(0,200,150,.25);}
.at-badge.cmd{background:var(--ad);color:var(--amber);border:1px solid rgba(240,160,48,.25);}
/* price */
.at-price{font-size:13px;font-weight:600;color:var(--text);margin-bottom:5px;letter-spacing:.02em;}
/* stat row */
.at-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;margin-bottom:5px;}
.at-stat{background:var(--bg3);border-radius:2px;padding:2px 3px;text-align:center;}
.at-stat-l{font-size:12px;color:var(--muted);letter-spacing:.04em;}
.at-stat-v{font-size:12px;font-weight:600;}
.at-stat-v.up{color:var(--green);}
.at-stat-v.dn{color:var(--red);}
.at-stat-v.fl{color:var(--muted);}
/* footer */
.at-foot{display:flex;align-items:center;justify-content:space-between;gap:4px;}
.at-signal{font-size:12px;font-weight:700;letter-spacing:.06em;padding:1px 5px;border-radius:2px;}
.at-signal.bull{background:rgba(0,200,150,.12);color:var(--green);border:1px solid rgba(0,200,150,.25);}
.at-signal.bear{background:var(--rd);color:var(--red);border:1px solid rgba(255,69,96,.25);}
.at-signal.neu {background:var(--bg3);color:var(--muted);border:1px solid var(--bdr);}
.at-signal.ob {background:rgba(255,69,96,.12);color:var(--red);border:1px solid rgba(255,69,96,.3);}
.at-signal.os {background:rgba(0,200,150,.12);color:var(--green);border:1px solid rgba(0,200,150,.3);}
.at-score{font-size:13px;font-weight:700;}
.at-held-tag{font-size:12px;padding:1px 4px;border-radius:2px;background:var(--bnbd);color:var(--bnb);border:1px solid rgba(243,186,47,.2);letter-spacing:.04em;}
/* ── TILE DETAIL FLOATING PANEL ── */
.tile-detail-overlay{display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.18);}
.tile-detail-overlay.show{display:block;}
.tile-detail{
position:fixed;z-index:601;
background:var(--bg2);
border:1px solid rgba(243,186,47,.22);
border-radius:8px;
padding:18px 20px 20px;
width:330px;
max-height:calc(100vh - 32px);
overflow-y:auto;
overscroll-behavior:contain;
box-shadow:0 24px 64px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.04),0 0 40px rgba(243,186,47,.06);
animation:tileDetailIn .18s cubic-bezier(.22,.68,0,1.4) both;
pointer-events:all;
}
/* Mobile tile detail — bottom sheet with drag handle and slide-up transition */
@media(max-width:700px){
.tile-detail{
position:fixed !important;
left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;
width:100% !important;max-width:100% !important;
border-radius:16px 16px 0 0;
border-left:none;border-right:none;border-bottom:none;
padding:20px 16px calc(16px + env(safe-area-inset-bottom));
max-height:85vh;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
transform:translateY(100%);
transition:transform .3s cubic-bezier(.32,.72,0,1) !important;
animation:none;
}
/* Drag handle */
.tile-detail::before{
content:'';
display:block;
width:36px;height:4px;
background:var(--bdr2);
border-radius:2px;
margin:0 auto 14px;
}
/* When JS toggles inline display:block, slide up */
.tile-detail[style*="display: block"],
.tile-detail[style*="display:block"]{
transform:translateY(0);
}
/* Close button — fixed-position 44×44 hit target inside the sheet */
.tile-detail .td-close{
position:absolute !important;
top:16px;right:16px;
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
font-size:20px;
float:none;margin:0;
}
/* Overlay — darker + slight blur on mobile */
.tile-detail-overlay{
background:rgba(0,0,0,.5);
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
}
/* Header row — wrap so price doesn't overflow on narrow screens; clear the absolute close button */
.tdh{flex-wrap:wrap !important;gap:8px !important;padding-right:60px !important;}
/* 4-col / 3-col grids in the detail panel collapse to 2-col on mobile */
.td-mkt-grid,
.td-mkt-grid.cols-4,
#td-market,
.td-share-grid{
grid-template-columns:repeat(2,1fr) !important;
}
/* A trailing cell left alone on its row stretches across it.
Everything above is TWO columns at this width, so an odd number of
cells leaves the last one sitting beside a hole. Score Breakdown is
the one that does it — three layers, two columns — and the hole lands
directly under the score, which is the part of the modal people
actually read.
SCOPED TO THIS MEDIA BLOCK DELIBERATELY. The same grids are THREE
columns on desktop, where three cells fill the row exactly, and the
identical rule there would break a layout that is already correct.
Measured before changing anything: at 1199px every modal grid has
zero empty slots; at 376px only Score Breakdown had one. */
.td-mkt-grid > .td-cell:last-child:nth-child(odd),
#td-market > .td-cell:last-child:nth-child(odd){
grid-column:1 / -1;
}
/* Share modal — keep content inside viewport on mobile */
.viral-share-modal{
width:calc(100vw - 16px) !important;
max-width:calc(100vw - 16px) !important;
padding:18px 14px 14px !important;
margin:8px auto !important;
box-sizing:border-box;
}
.viral-share-platforms{
grid-template-columns:repeat(2,1fr) !important;
gap:8px !important;
}
.viral-sh{min-width:0;padding:10px 6px 8px;}
.viral-sh span{font-size:11px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Action row — keep both action buttons readable; if too narrow, stack */
.viral-actions{grid-template-columns:1fr 1fr !important;gap:6px !important;}
.viral-native-share,.viral-download-btn{font-size:11px;padding:12px 6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
@keyframes tileDetailIn{
from{opacity:0;transform:translateY(10px) scale(.95);}
to{opacity:1;transform:translateY(0) scale(1);}
}
/* Header — tight grouping: logo+name+ticker left, price+24h right; close X is absolute */
.tdh{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding-right:36px;}
.tdh-ico-wrap{width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--bg4);flex-shrink:0;border:1px solid var(--bdr2);}
.tdh-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.tdh-sym{font-size:16px;font-weight:700;letter-spacing:.02em;font-family:var(--font-mono);line-height:1.1;}
.tdh-name{font-size:11px;color:var(--muted);opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-ui);line-height:1.2;}
.tdh-price{font-size:15px;font-weight:700;color:var(--text);font-family:var(--font-mono);letter-spacing:.02em;white-space:nowrap;line-height:1.1;}
.td-type-badge{font-size:12px;font-weight:700;padding:2px 6px;border-radius:2px;letter-spacing:.08em;flex-shrink:0;}
.td-type-badge.crypto{background:rgba(243,186,47,.12);color:var(--bnb);border:1px solid rgba(243,186,47,.25);}
.td-type-badge.forex{background:rgba(0,200,150,.1);color:var(--green);border:1px solid rgba(0,200,150,.25);}
.td-type-badge.stock{background:rgba(167,139,250,.1);color:var(--pro);border:1px solid rgba(167,139,250,.25);}
.td-type-badge.index{background:rgba(240,160,48,.1);color:var(--amber);border:1px solid rgba(240,160,48,.25);}
/* Section — generous breathing room between blocks */
.td-section{margin-bottom:26px;}
.td-section:last-child{margin-bottom:0;}
.td-section-title{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);opacity:.6;margin-bottom:10px;display:flex;align-items:center;gap:8px;font-family:var(--font-ui);}
.td-section-title::after{content:'';flex:1;height:1px;background:var(--bdr);opacity:.5;}
/* Performance pills row */
.td-perf-row{display:flex;gap:5px;}
.td-perf-pill{flex:1;background:var(--bg3);border:1px solid var(--bdr);border-radius:5px;padding:6px 4px;text-align:center;}
.td-perf-pill-l{font-size:12px;color:var(--muted);letter-spacing:.06em;margin-bottom:3px;}
.td-perf-pill-v{font-size:12px;font-weight:700;font-family:var(--font-mono);}
.td-perf-pill-v.up{color:var(--green);}
.td-perf-pill-v.dn{color:var(--red);}
.td-perf-pill-v.fl{color:var(--muted);}
/* Score section — DOMINANT: oversized number anchors hierarchy */
.td-score-wrap{display:flex;align-items:flex-start;gap:16px;}
.td-score-big{flex-shrink:0;width:72px;text-align:center;}
.td-score-num-val{font-size:48px;font-weight:700;line-height:1;font-family:var(--font-mono);letter-spacing:-.02em;}
.td-score-num-lbl{font-size:10px;color:var(--muted);opacity:.6;letter-spacing:.12em;text-transform:uppercase;margin-top:4px;font-family:var(--font-ui);font-weight:600;}
.td-score-bars-col{flex:1;display:flex;flex-direction:column;gap:6px;padding-top:6px;}
/* Bar rows (legacy, kept for compat) */
.td-bar-row{display:flex;align-items:center;gap:7px;}
.td-bar-lbl{font-size:12px;color:var(--muted);width:52px;flex-shrink:0;letter-spacing:.04em;}
.td-bar-wrap{flex:1;height:5px;background:var(--bg4);border-radius:3px;overflow:hidden;}
.td-bar-fill{height:100%;border-radius:3px;transition:width .5s ease;}
.td-bar-val{font-size:12px;font-weight:700;width:38px;text-align:right;flex-shrink:0;font-family:var(--font-mono);}
/* Signal tile grid — shared by Score Breakdown + Insight Engine; de-boxed with typography hierarchy */
.signal-tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:6px;}
.signal-tile{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.03);border:0;min-height:34px;}
.signal-tile .tile-icon{font-size:13px;flex-shrink:0;width:14px;text-align:center;line-height:1;font-weight:700;}
.signal-tile .tile-icon.good{color:var(--green);}
.signal-tile .tile-icon.bad{color:var(--red);}
.signal-tile .tile-icon.neutral{color:#87CEEB;}
:root.light .signal-tile .tile-icon.neutral{color:#2288bb;}
.signal-tile .tile-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.signal-tile .tile-label{font-size:9px;font-weight:600;letter-spacing:.1em;color:var(--muted);opacity:.6;line-height:1;text-transform:uppercase;font-family:var(--font-ui);}
.signal-tile .tile-value{font-size:11px;font-weight:600;line-height:1.2;font-family:var(--font-mono);color:var(--text);}
.signal-tile .tile-value.good{color:var(--green);}
.signal-tile .tile-value.bad{color:var(--red);}
.signal-tile .tile-value.neutral{color:#87CEEB;}
:root.light .signal-tile .tile-value.neutral{color:#2288bb;}
.signal-tile.highlight-good{background:rgba(16,185,129,.08);}
.signal-tile.highlight-bad{background:rgba(239,68,68,.07);}
:root.light .signal-tile{background:rgba(0,0,0,.03);}
@media(max-width:480px){.signal-tile-grid{grid-template-columns:repeat(2,1fr);}}
/* Market data grid — de-boxed: subtle alternating tint, no borders */
.td-mkt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,.02);border-radius:6px;overflow:hidden;}
.td-mkt-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.td-mkt-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.td-mkt-cell{background:rgba(255,255,255,.015);border:0;border-radius:0;padding:9px 8px;text-align:left;display:flex;flex-direction:column;gap:4px;}
.td-mkt-cell:nth-child(even){background:rgba(255,255,255,.04);}
.td-mkt-cell-l{font-size:10px;color:var(--muted);opacity:.6;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-ui);font-weight:600;line-height:1;margin:0;}
.td-mkt-cell-v{font-size:13px;font-weight:600;color:var(--text);font-family:var(--font-mono);letter-spacing:.01em;line-height:1.15;}
/* td-cell: inline compact row used in perf/market grids by JS */
/* ── Derivatives history sparklines ─────────────────────────────────
Sits under the current-reading grid in the coin modal. Collapses to
nothing when empty (:empty) so a pair with no perpetual history leaves
no gap, and stacks on narrow screens. */
/* ── Technical events (coin_events) ─────────────────────────────────
One row per detected event in the modal. Colour marks direction only;
the text carries the meaning, because colour alone would imply a
verdict the row is careful not to give. */
.td-ev-row{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.td-ev-row:last-of-type{border-bottom:0;}
.td-ev-dot{width:6px;height:6px;border-radius:50%;margin-top:6px;flex:0 0 6px;}
.td-ev-body{min-width:0;}
.td-ev-lbl{font-size:12.5px;color:var(--text);font-weight:600;line-height:1.4;}
.td-ev-sub{font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.45;}
.td-ev-more{font-size:10.5px;color:var(--muted);padding-top:7px;}
.td-ev-note{font-size:10px;color:var(--muted);line-height:1.5;margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.05);}
.td-hist-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px;}
.td-hist-grid:empty{display:none;}
.td-hist-cell{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:9px 11px 8px;min-width:0;}
.td-hist-cell .td-cell-l{margin-bottom:6px;}
.td-hist-sub{font-size:10.5px;color:var(--muted);margin-top:5px;letter-spacing:.02em;}
.td-hist-note{font-size:10.5px;color:var(--muted);line-height:1.5;padding:2px 0;}
@media(max-width:520px){.td-hist-grid{grid-template-columns:1fr;}}
.td-cell{background:rgba(255,255,255,.015);border:0;border-radius:0;padding:9px 8px;display:flex;flex-direction:column;gap:4px;}
.td-cell-l{font-size:10px;color:var(--muted);opacity:.6;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-ui);font-weight:600;line-height:1;}
.td-cell-v{font-size:13px;font-weight:600;font-family:var(--font-mono);color:var(--text);letter-spacing:.01em;line-height:1.15;}
.td-cell-v.up{color:var(--green);}
.td-cell-v.dn{color:var(--red);}
.td-cell-v.fl{color:var(--muted);}
.td-cell-v.bnb{color:var(--bnb);}
#td-market,.td-mkt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
#td-supply{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(255,255,255,.02);border-radius:6px;overflow:hidden;}
#td-market .td-cell:nth-child(even),
#td-supply .td-cell:nth-child(even){background:rgba(255,255,255,.04);}
:root.light .td-mkt-grid,:root.light #td-supply{background:rgba(0,0,0,.025);}
:root.light .td-mkt-cell,:root.light .td-cell{background:rgba(0,0,0,.012);}
:root.light .td-mkt-cell:nth-child(even),
:root.light #td-market .td-cell:nth-child(even),
:root.light #td-supply .td-cell:nth-child(even){background:rgba(0,0,0,.04);}
/* Badges — modern pill chips: no border, semi-transparent bg, generous radius */
.td-badge-row{display:flex;flex-wrap:wrap;gap:6px;}
.td-badge{font-size:11px;padding:5px 11px;border-radius:14px;border:0;letter-spacing:.05em;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-ui);line-height:1.3;display:inline-flex;align-items:center;}
.td-badge.bull{background:rgba(0,200,150,.13);color:var(--green);}
.td-badge.bear{background:rgba(255,69,96,.13);color:var(--red);}
.td-badge.neu{background:rgba(135,206,235,.12);color:#87CEEB;}
.td-badge.pro-b{background:rgba(167,139,250,.13);color:var(--pro);}
.td-badge.ob{background:rgba(255,69,96,.13);color:var(--red);}
.td-badge.os{background:rgba(0,200,150,.13);color:var(--green);}
:root.light .td-badge.neu{color:#2288bb;background:rgba(34,136,187,.10);}
/* Share buttons */
.td-share-wrap{margin-top:10px;padding-top:10px;border-top:1px solid var(--bdr);}
.td-share-label{font-size:12px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:7px;font-family:var(--font-display);}
/* Hero share-card button */
.td-share-card-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 0;margin-bottom:8px;background:linear-gradient(135deg,rgba(243,186,47,.15),rgba(243,186,47,.06));border:1px solid rgba(243,186,47,.35);border-radius:6px;color:var(--bnb);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-family:var(--font-display);transition:all .18s;}
.td-share-card-btn:hover{background:linear-gradient(135deg,rgba(243,186,47,.25),rgba(243,186,47,.12));border-color:rgba(243,186,47,.55);box-shadow:0 0 14px rgba(243,186,47,.15);}
.td-share-card-btn:active{transform:scale(.97);}
.td-share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.td-sh{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 5px;background:var(--bg3);border:1px solid var(--bdr);border-radius:4px;color:var(--muted);cursor:pointer;transition:all .15s;font-family:var(--font-ui);font-size:0;}
.td-sh svg{flex-shrink:0;}
.td-sh span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1;}
.td-sh:hover{background:var(--bg4);border-color:var(--bdr2);color:var(--text);}
.td-sh.copied{background:rgba(0,200,150,.15);border-color:rgba(0,200,150,.4);color:var(--green);}
/* ═══ Viral Share Preview Modal ═══ */
.viral-share-overlay{z-index:9999;}
.viral-share-modal{position:relative;width:92%;max-width:420px;margin:auto;padding:22px 18px 18px;background:rgba(13,17,23,.85);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid rgba(243,186,47,.2);border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 40px rgba(243,186,47,.06);color:var(--text);animation:modalSlideIn .25s ease-out;}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(20px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.viral-share-title{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--bnb);letter-spacing:.04em;margin-bottom:4px;}
.viral-share-sub{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.5;}
.viral-share-preview{width:100%;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.08);margin-bottom:14px;background:#0d1117;}
.viral-share-preview img{width:100%;height:auto;display:block;}
.viral-copy-wrap{background:rgba(255,255,255,.04);border:1px solid var(--bdr);border-radius:6px;padding:10px 12px;margin-bottom:12px;}
.viral-copy-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-family:var(--font-display);}
.viral-copy-text{font-size:12px;color:var(--text);line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:80px;overflow-y:auto;}
.viral-copy-cycle{background:none;border:none;color:var(--bnb);font-size:12px;cursor:pointer;padding:4px 0 0;font-family:var(--font-ui);letter-spacing:.04em;opacity:.7;transition:opacity .15s;}
.viral-copy-cycle:hover{opacity:1;}
.viral-share-platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px;}
.viral-sh{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 4px 8px;min-height:56px;background:rgba(255,255,255,.05);border:1px solid var(--bdr);border-radius:6px;color:var(--muted);cursor:pointer;transition:all .15s;font-size:0;}
.viral-sh svg{flex-shrink:0;}
.viral-sh span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1;}
.viral-sh:hover{background:rgba(243,186,47,.1);border-color:rgba(243,186,47,.3);color:var(--bnb);}
.viral-sh.copied{background:rgba(0,200,150,.15);border-color:rgba(0,200,150,.4);color:var(--green);}
.viral-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.viral-native-share,.viral-download-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 0;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .18s;font-family:var(--font-display);letter-spacing:.04em;min-height:44px;}
.viral-native-share{background:linear-gradient(135deg,rgba(243,186,47,.2),rgba(243,186,47,.08));border:1px solid rgba(243,186,47,.4);color:var(--bnb);}
.viral-native-share:hover{background:linear-gradient(135deg,rgba(243,186,47,.3),rgba(243,186,47,.15));box-shadow:0 0 16px rgba(243,186,47,.15);}
.viral-download-btn{background:rgba(255,255,255,.05);border:1px solid var(--bdr);color:var(--muted);}
.viral-download-btn:hover{background:rgba(255,255,255,.1);border-color:var(--bdr2);color:var(--text);}
/* Light theme overrides */
:root.light .viral-share-modal{background:rgba(255,252,240,.92);border-color:rgba(200,170,80,.3);box-shadow:0 24px 80px rgba(0,0,0,.15);}
:root.light .viral-sh{background:rgba(255,248,220,.7);border-color:rgba(200,180,120,.25);color:rgba(100,80,40,.6);}
:root.light .viral-sh:hover{background:rgba(245,235,200,.9);border-color:rgba(180,150,80,.4);color:rgba(80,60,20,.8);}
:root.light .viral-copy-wrap{background:rgba(0,0,0,.03);border-color:rgba(200,180,120,.25);}
:root.light .viral-download-btn{background:rgba(0,0,0,.04);border-color:rgba(200,180,120,.25);color:rgba(100,80,40,.6);}
/* Close button */
.td-close{position:sticky;top:0;float:right;z-index:10;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:var(--text);font-size:18px;cursor:pointer;line-height:1;padding:5px 9px;transition:all .15s;border-radius:50%;margin:-6px -6px 4px 0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.td-close:hover{color:#fff;background:rgba(255,69,96,.35);border-color:rgba(255,69,96,.5);}
/* ── consistent card radius + shadow token ── */
:root{--card-radius:10px;--card-shadow:0 2px 8px rgba(0,0,0,.28), 0 6px 20px rgba(0,0,0,.14);}
.tbl-head{padding:0 14px;min-height:38px;border-bottom:1px solid var(--bdr2);background:var(--bg3);display:flex;align-items:center;justify-content:space-between;gap:6px;flex-shrink:0;position:relative;}
.last-upd-ts{font-size:12px;color:var(--muted);letter-spacing:.06em;font-family:var(--font-ui);}
/* ── Merged single-row header: title + categories + sort hint ── */
.tbl-head.tbl-head-merged{height:auto;min-height:48px;padding:6px 14px;gap:14px;flex-wrap:nowrap;justify-content:flex-start;}
.tbl-head-merged .ptitle{flex-shrink:0;white-space:nowrap;}
.cat-bar.cat-bar-inline{flex:1;min-width:0;background:transparent;border-bottom:none;padding:0;justify-content:flex-start;}
.tbl-head-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;margin-top:18px;}
.tbl-head-meta .sort-hint{font-size:11px;color:var(--muted);letter-spacing:.08em;white-space:nowrap;}
@media(max-width:1100px){
.tbl-head.tbl-head-merged{height:auto;min-height:0;flex-wrap:wrap;padding:6px 10px;gap:6px;}
.tbl-head-merged .ptitle{order:1;}
.tbl-head-merged .tbl-head-meta{order:2;margin-top:0;flex-direction:row;align-items:center;gap:8px;margin-left:auto;}
.cat-bar.cat-bar-inline{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto;margin-top:4px;padding-bottom:2px;}
}
.tf-tabs{display:flex;gap:3px;}
.tf-tab{background:none;border:1px solid var(--bdr);color:var(--muted);font-family:inherit;font-size:12px;padding:2px 8px;cursor:pointer;border-radius:var(--card-radius);letter-spacing:.08em;transition:all .15s;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.tf-tab.active{border-color:var(--bnb);color:var(--bnb);background:var(--bnbd);}
/* ── Category filter bar ── */
.cat-bar{display:flex;gap:8px;padding:8px 12px;background:var(--bg3);border-bottom:1px solid var(--bdr2);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex-shrink:0;}
.cat-bar::-webkit-scrollbar{display:none;}
.cat-tab{display:flex;align-items:center;gap:4px;padding:6px 13px;background:var(--bg2);border:1px solid var(--bdr2);color:var(--muted);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.08em;cursor:pointer;border-radius:6px;transition:all .18s;white-space:nowrap;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);}
.cat-tab:hover{color:var(--text);border-color:var(--text);background:var(--bg4);box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06),0 0 8px rgba(130,170,220,.08);}
.cat-tab.active{color:var(--bnb);border-color:rgba(243,186,47,.4);background:var(--bnbd);box-shadow:0 2px 8px rgba(243,186,47,.2),inset 0 1px 0 rgba(255,255,255,.05),0 0 12px rgba(243,186,47,.1);position:relative;}
.cat-tab.active::after{content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--bnb);box-shadow:0 0 6px rgba(243,186,47,.5);}
.cat-ico{font-size:12px;line-height:1;}
.cat-lbl{line-height:1;}
.cat-tab.demo-tab{border-color:rgba(0,200,150,.35);color:var(--green);animation:demoPulse 2.5s ease-in-out infinite;}
.cat-tab.demo-tab:hover{background:rgba(0,200,150,.12);border-color:var(--green);}
.cat-tab.demo-tab.active{background:var(--gd);border-color:var(--green);box-shadow:0 2px 8px rgba(0,200,150,.2),0 0 12px rgba(0,200,150,.1);}
@keyframes demoPulse{0%,100%{box-shadow:0 1px 3px rgba(0,0,0,.25),0 0 0 rgba(0,200,150,0);}50%{box-shadow:0 1px 3px rgba(0,0,0,.25),0 0 10px rgba(0,200,150,.15);}}
.cat-tab.pro-locked{opacity:.5;cursor:not-allowed;}
.cat-tab.pro-locked:hover{opacity:.6;}
.pro-lock-ico{font-size:12px;margin-left:2px;}
.leaderboard{flex:1;overflow-y:auto;min-height:0;overscroll-behavior:contain;}
/* ══ Market Ticker — BTC anchor + infinite-loop global movers ═════ */
.market-ticker{display:flex;align-items:stretch;background:var(--bg3);border:1px solid var(--bdr2);border-radius:6px;margin:8px 14px 0;height:32px;overflow:hidden;flex-shrink:0;}
.mt-anchor{display:flex;align-items:center;padding:0 10px;border-right:1px solid var(--bdr2);background:var(--bg2);flex-shrink:0;}
.mt-anchor .btc-pill{border:none;background:transparent;padding:0;font-size:11px;letter-spacing:.08em;}
.mt-viewport{flex:1;overflow:hidden;position:relative;display:flex;align-items:center;min-width:0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);}
.mt-track{display:inline-flex;align-items:center;white-space:nowrap;animation:mt-scroll 60s linear infinite;will-change:transform;}
.mt-viewport:hover .mt-track{animation-play-state:paused;}
.mt-item{display:inline-flex;align-items:center;gap:6px;padding:0 14px;font-size:11px;font-family:var(--font-mono);border-right:1px solid rgba(255,255,255,.04);}
.mt-ico{color:var(--muted);font-size:10px;}
.mt-sym{font-weight:600;letter-spacing:.04em;color:rgba(220,230,240,.9);}
.mt-px{color:var(--muted);}
.mt-pct{font-weight:600;}
.mt-up .mt-pct{color:var(--green);}
.mt-dn .mt-pct{color:var(--red);}
.mt-empty{padding:0 14px;font-size:11px;color:var(--muted);letter-spacing:.04em;}
@keyframes mt-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(max-width:700px) and (orientation:portrait){
.market-ticker{height:28px;margin:6px 10px 0;}
.mt-anchor{padding:0 8px;}
.mt-anchor .btc-pill{font-size:10px;}
.mt-item{padding:0 10px;font-size:10px;}
.mt-track{animation-duration:45s;}
}
table{width:100%;border-collapse:collapse;}
thead tr{background:var(--bg4);position:sticky;top:0;z-index:10;box-shadow:0 1px 0 var(--bdr2);}
thead th{padding:8px 6px;text-align:left;font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(180,195,215,.4);border-bottom:1px solid var(--bdr);white-space:nowrap;cursor:pointer;user-select:none;}
thead th:hover{color:var(--text);}
thead th.sorted{color:var(--bnb);}
thead th.sorted::after{content:' ▾';}
thead th.r{text-align:right;}
tbody tr:nth-child(odd){background:var(--bg);}
tbody tr:nth-child(even){background:rgba(255,255,255,0.02);}
:root.light tbody tr:nth-child(even){background:rgba(0,0,0,0.02);}
tbody tr{transition:background-color .15s ease-out;outline:1px solid transparent;}
tbody tr.held:nth-child(odd){background:rgba(243,186,47,.03);}
tbody tr.held:nth-child(even){background:rgba(243,186,47,.045);}
tbody tr:hover{background:rgba(255,255,255,0.04) !important;cursor:pointer;}
:root.light tbody tr:hover{background:rgba(0,0,0,0.03) !important;}
tbody tr{border-radius:6px;}
/* ── ASSET MODE BAR ── */
.asset-mode-bar{display:flex;gap:8px;flex-shrink:0;background:var(--bg2);padding:12px 10px 10px;border-bottom:1px solid var(--bdr);}
.asset-mode-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 4px;background:var(--bg3);border:1px solid var(--bdr2);border-radius:8px;cursor:pointer;font-family:inherit;color:var(--muted);transition:color .18s,background .18s,border-color .18s,box-shadow .18s;font-size:12px;letter-spacing:.14em;position:relative;}
.asset-mode-btn+.asset-mode-btn{border-left:none;}
.asset-mode-btn:hover{color:var(--text);background:var(--bg4);border-color:var(--bdr2);}
/* CRYPTO — gold hover, sky-blue active */
#am-crypto:hover{background:rgba(243,186,47,.09);border-color:rgba(243,186,47,.25);color:var(--bnb);}
#am-crypto.active{color:#000;background:#87CEEB;border-color:#5fb8e0;box-shadow:0 4px 14px rgba(135,206,235,.35);font-weight:700;}
#am-crypto .am-logo{border:2px solid transparent;}
#am-crypto.active .am-logo{border-color:rgba(0,0,0,.15);box-shadow:none;}
/* FOREX — green hover, sky-blue active */
#am-forex:hover{background:rgba(0,189,142,.09);border-color:rgba(0,189,142,.25);color:var(--green);}
#am-forex.active{color:#000;background:#87CEEB;border-color:#5fb8e0;box-shadow:0 4px 14px rgba(135,206,235,.35);font-weight:700;}
#am-forex .am-logo{border:2px solid transparent;}
#am-forex.active .am-logo{border-color:rgba(0,0,0,.15);box-shadow:none;}
/* STOCKS — red hover, sky-blue active */
#am-stocks:hover{background:rgba(196,30,58,.09);border-color:rgba(196,30,58,.25);color:#f26680;}
#am-stocks.active{color:#000;background:#87CEEB;border-color:#5fb8e0;box-shadow:0 4px 14px rgba(135,206,235,.35);font-weight:700;}
#am-stocks .am-logo{border:2px solid transparent;}
#am-stocks.active .am-logo{border-color:rgba(0,0,0,.15);box-shadow:none;}
.asset-mode-btn.active .am-logo{filter:brightness(.85);}
.am-logo{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;transition:filter .15s,border-color .15s,box-shadow .15s;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:15px;border:2px solid transparent;}
.am-logo img{width:100%;height:100%;display:block;object-fit:cover;}
.am-label{font-weight:800;letter-spacing:.16em;font-size:12px;}
/* ── MODE TABS ── */
.mode-tabs{display:flex;gap:3px;}
.mode-tab{background:none;border:1px solid var(--bdr);color:var(--muted);font-family:inherit;font-size:12px;padding:3px 12px;cursor:pointer;border-radius:2px;letter-spacing:.1em;transition:all .15s;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.mode-tab:hover{border-color:var(--bnb);color:var(--bnb);}
.mode-tab.active{border-color:var(--bnb);color:var(--bnb);background:var(--bnbd);}
/* ── FOREX TABLE ── */
.forex-row:hover{background:var(--bg4) !important;cursor:pointer;}
.forex-pair{font-size:14px;font-weight:700;letter-spacing:.03em;}
.forex-base{color:var(--bnb);}
.forex-rate{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;}
.forex-chg.up{color:var(--green);}
.forex-chg.dn{color:var(--red);}
.forex-chg.fl{color:var(--muted);}
/* ── TUTORIAL CARD — white + yellow only ── */
.tut-desc{font-size:14px;color:#ffffff;line-height:1.9;margin-bottom:14px;}
.tut-desc strong{color:#ffffff;font-weight:700;}
.tut-desc em{color:var(--bnb);font-style:normal;}
.tut-disclaimer{background:rgba(243,186,47,.07);border:1px solid rgba(243,186,47,.3);border-radius:4px;padding:12px 14px;margin-bottom:8px;font-size:14px;color:#ffffff;line-height:1.9;}
.tut-disclaimer strong{color:var(--bnb);font-weight:700;}
.tut-agree{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;cursor:pointer;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:4px;padding:10px 12px;}
.tut-agree input{accent-color:var(--bnb);width:16px;height:16px;flex-shrink:0;cursor:pointer;}
.tut-agree-label{font-size:14px;font-weight:500;color:#ffffff;line-height:1.7;cursor:pointer;font-family:var(--font-ui);}
.tut-step-label{font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,.85);margin-bottom:6px;text-transform:uppercase;font-family:var(--font-ui);}
.tut-title{font-size:18px;font-weight:400;color:#ffffff;margin-bottom:10px;letter-spacing:.01em;font-family:var(--font-display);}
#logo-c{image-rendering:crisp-edges;}
tbody td{padding:7px 6px;font-size:13px;border-bottom:1px solid rgba(255,255,255,0.04);white-space:nowrap;}
:root.light tbody td{border-bottom:1px solid rgba(0,0,0,0.04);}
td.r{text-align:right;font-variant-numeric:tabular-nums;}
td.pc{text-align:right;padding-left:2px;padding-right:2px;}
.cc{display:flex;align-items:center;gap:8px;}
.ti{width:20px;height:20px;border-radius:50%;overflow:hidden;background:var(--bg4);flex-shrink:0;}
.ti img{width:100%;height:100%;}
.tsym{font-size:13px;font-weight:500;}
.tname{font-size:12px;color:var(--muted);max-width:100px;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-ui);opacity:.7;}
.htag{font-size:12px;padding:1px 4px;border-radius:4px;background:var(--bnbd);color:var(--bnb);border:1px solid rgba(243,186,47,.2);margin-left:3px;letter-spacing:.04em;}
.pct{font-weight:400;font-size:12px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.pct.up{color:var(--green);}
.pct.dn{color:var(--red);}
.pct.fl{color:var(--muted);}
/* ── Performance heat-map tint on percentage cells ── */
td.pc{position:relative;}
td.pc .pct-heat{position:absolute;inset:0;pointer-events:none;border-radius:2px;z-index:0;}
td.pc .pct{position:relative;z-index:1;}
/* ── Pro-gated blur cells (14D, 30D, Score for free users) ── */
.pro-blur-cell{position:relative;cursor:pointer !important;}
.pro-blur-cell:hover{background:rgba(167,139,250,.08) !important;}
.pro-blur-wrap{filter:blur(5px);user-select:none;pointer-events:none;opacity:.5;}
.pro-blur-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;z-index:2;opacity:.6;transition:opacity .15s;}
.pro-blur-cell:hover .pro-blur-lock{opacity:1;}
:root.light .pro-blur-cell:hover{background:rgba(10,126,90,.06) !important;}
:root.light .pro-blur-wrap{opacity:.4;}
.sw{display:flex;align-items:center;gap:5px;justify-content:flex-end;}
.sv{font-size:14px;font-weight:600;}
.sb{width:32px;height:4px;background:var(--bg4);border-radius:3px;overflow:hidden;}
.sbf{height:100%;border-radius:2px;}
/* ── LEADERBOARD QUICK-ADD BUTTON ── */
.qa-btn{
display:inline-flex;align-items:center;justify-content:center;
width:20px;height:20px;border-radius:50%;
background:none;border:1px solid rgba(243,186,47,.28);
color:rgba(243,186,47,.55);font-size:13px;line-height:1;
cursor:pointer;font-family:inherit;font-weight:400;
transition:all .15s;flex-shrink:0;padding:0;
vertical-align:middle;
}
.qa-btn:hover{background:rgba(243,186,47,.14);border-color:var(--bnb);color:var(--bnb);transform:scale(1.18);}
.qa-btn.held{border-color:rgba(0,200,150,.45);color:var(--green);cursor:default;font-size:12px;}
.qa-btn.held:hover{background:rgba(0,200,150,.08);transform:none;}
.qa-btn.watch-eye{font-size:12px;opacity:.35;border-color:rgba(255,255,255,.12);color:var(--muted);}
.qa-btn.watch-eye:hover{opacity:.7;border-color:rgba(0,200,150,.4);color:var(--green);background:rgba(0,200,150,.06);}
.qa-btn.watch-eye.watching{opacity:1;border-color:rgba(0,200,150,.5);color:var(--green);background:rgba(0,200,150,.08);}
.qa-btn.watch-eye.watching:hover{background:rgba(255,69,96,.08);border-color:rgba(255,69,96,.4);color:var(--red);}
td.qa-cell{text-align:center;width:28px;padding:0 4px !important;}
.price-col{padding-left:4px !important;padding-right:4px !important;white-space:nowrap;font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.pro-upsell-row td{padding:0;}
.pro-upsell-banner{
display:flex;align-items:center;justify-content:space-between;
padding:12px 14px;
background:linear-gradient(90deg,rgba(167,139,250,.07),rgba(167,139,250,.03));
border-top:1px solid rgba(167,139,250,.2);
border-bottom:1px solid rgba(167,139,250,.2);
gap:10px;flex-wrap:wrap;
}
.pub-left{display:flex;align-items:center;gap:10px;}
.pub-icon{font-size:18px;}
.pub-txt{font-size:12px;color:var(--text);font-family:var(--font-ui);}
.pub-sub{font-size:12px;color:var(--muted);margin-top:2px;font-family:var(--font-ui);}
.pub-btn{
padding:7px 16px;
background:var(--prod);border:1px solid rgba(167,139,250,.4);
color:var(--pro);font-family:inherit;font-size:12px;font-weight:600;
letter-spacing:.1em;cursor:pointer;border-radius:3px;
transition:all .15s;white-space:nowrap;flex-shrink:0;
}
.pub-btn:hover{background:rgba(167,139,250,.2);border-color:var(--pro);}
@media(max-width:700px) and (orientation:portrait){
.pro-upsell-banner{margin-bottom:70px;}
.pro-upsell-row{position:relative;z-index:1;}
/* Hide 14D column in portrait to improve readability */
#th-14,
#crypto-panel tbody td:nth-child(7){display:none;}
}
/* ── RIGHT PANEL ── */
.ad-panel{background:linear-gradient(180deg,rgba(130,110,200,.055) 0%,rgba(130,110,200,.025) 50%,var(--bg2) 100%);border-left:2px solid rgba(130,110,200,.2);box-shadow:-4px 0 24px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:100%;max-height:100%;}
/* ══ PORTFOLIO SIGNAL: guaranteed flush below mode bar ══ */
.sidebar > .sig-box {
margin: 0 !important;
flex-shrink: 0;
border-top: none;
}
/* Remove top border radius on the mode-bar to connect seamlessly */
#sig-box-crypto { border-top: none; }
/* ── LEFT PANEL VIEW TABS ── */
.holdings-view-tabs{display:flex;gap:0;border-bottom:1px solid var(--bdr);flex-shrink:0;background:var(--bg2);}
.hvtab{flex:1;background:none;border:none;color:var(--muted);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 4px;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;position:relative;}
.hvtab.active{color:var(--bnb);border-bottom-color:var(--bnb);background:var(--bnbd);}
.hvtab-watch{color:rgba(0,200,150,.55) !important;}
.hvtab-watch:hover:not(.active){color:var(--green) !important;border-bottom-color:rgba(0,200,150,.35) !important;}
.hvtab-watch.active{color:var(--green) !important;border-bottom-color:var(--green) !important;background:rgba(0,200,150,.06) !important;}
.hvtab:hover:not(.active){color:var(--text);border-bottom-color:var(--bdr2);}
/* ── PLACEHOLDER TILES (watchlist / empty holdings) ── */
.tile-placeholder{background:var(--bg3);border:1px dashed rgba(0,200,150,.22);border-radius:var(--card-radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:72px;cursor:pointer;transition:all .15s;opacity:.7;}
.tile-placeholder:hover{opacity:1;border-color:rgba(0,200,150,.55);background:rgba(0,200,150,.05);}
.tile-placeholder .ph-plus{font-size:20px;color:var(--green);line-height:1;font-weight:300;}
.tile-placeholder .ph-lbl{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}
/* Locked slots — muted green + */
.tile-placeholder-locked{border-color:rgba(100,120,150,.2) !important;opacity:.4 !important;}
.tile-placeholder-locked .ph-plus{color:var(--muted) !important;}
.tile-placeholder-locked:hover{opacity:.6 !important;border-color:rgba(167,139,250,.3) !important;background:rgba(167,139,250,.04) !important;}
/* Purple Pro promo tiles */
.tile-pro-promo{background:linear-gradient(135deg,rgba(167,139,250,.13),rgba(167,139,250,.06));border:1px solid rgba(167,139,250,.32);border-radius:var(--card-radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:72px;cursor:pointer;transition:all .18s;text-align:center;padding:8px 6px;position:relative;overflow:hidden;}
.tile-pro-promo::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(167,139,250,.06),transparent);animation:proShimmer 2.5s linear infinite;}
.tile-pro-promo:hover{border-color:rgba(167,139,250,.6);background:linear-gradient(135deg,rgba(167,139,250,.22),rgba(167,139,250,.1));transform:translateY(-2px);box-shadow:0 4px 14px rgba(167,139,250,.2);}
.pro-promo-thunder{font-size:16px;filter:drop-shadow(0 0 5px rgba(167,139,250,.6));}
.pro-promo-title{font-size:12px;font-weight:700;color:var(--pro);letter-spacing:.05em;line-height:1.4;text-transform:uppercase;}
.pro-promo-sub{font-size:12px;color:rgba(167,139,250,.65);letter-spacing:.06em;}
/* 10-slot grid — always 2 columns, auto rows */
.tiles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;width:100%;}
/* tiles-scroll expands to show all 10 */
.tiles-scroll{overflow-y:auto;overflow-x:hidden;padding:8px 10px;flex:1;min-height:0;-webkit-overflow-scrolling:touch;}
/* ── WATCHLIST VIEW ── */
.watchlist-placeholder{padding:14px 12px;text-align:center;color:var(--muted);font-size:12px;line-height:2;border:1px dashed rgba(255,255,255,.07);border-radius:3px;letter-spacing:.06em;grid-column:1/-1;}
#watchlist-panel{display:none;flex-direction:column;flex:1;overflow:hidden;}
#watchlist-panel.active-view{display:flex;}
.watchlist-tip{padding:8px 12px;font-size:12px;color:var(--muted);line-height:1.7;font-family:var(--font-ui);border-bottom:1px solid var(--bdr);background:var(--bg3);flex-shrink:0;}
/* ── ADD HOLDINGS MODAL (leaderboard header) ── */
#add-holdings-modal .modal{max-width:440px;border:1px solid rgba(243,186,47,.28);box-shadow:0 0 40px rgba(243,186,47,.08);}
#add-holdings-modal .modal-title{color:var(--bnb);}
.ahm-coin-search{width:100%;background:var(--bg3);border:1px solid var(--bdr2);color:var(--text);font-family:inherit;font-size:12px;padding:7px 11px;border-radius:3px;outline:none;margin-bottom:8px;letter-spacing:.03em;}
.ahm-coin-search:focus{border-color:var(--bnb);}
.ahm-coin-list{max-height:160px;overflow-y:auto;border:1px solid var(--bdr);border-radius:3px;margin-bottom:12px;background:var(--bg3);}
.ahm-coin-item{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;transition:background .12s;border-bottom:1px solid rgba(255,255,255,.04);}
.ahm-coin-item:hover{background:rgba(243,186,47,.08);}
.ahm-coin-item.selected{background:rgba(243,186,47,.12);border-left:2px solid var(--bnb);}
.ahm-coin-ico{width:20px;height:20px;border-radius:50%;background:var(--bg4);flex-shrink:0;}
.ahm-coin-ico img{width:100%;height:100%;border-radius:50%;}
.ahm-coin-name{font-size:12px;font-weight:600;flex:1;}
.ahm-coin-sub{font-size:12px;color:var(--muted);}
.ahm-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.ahm-field label{display:block;font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;}
.ahm-field input{width:100%;background:var(--bg3);border:1px solid var(--bdr2);color:var(--text);font-family:inherit;font-size:12px;padding:6px 9px;border-radius:2px;outline:none;}
.ahm-field input:focus{border-color:var(--bnb);}
.ahm-confirm-btn{width:100%;padding:9px;background:rgba(243,186,47,.12);border:1px solid rgba(243,186,47,.35);color:var(--bnb);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.1em;cursor:pointer;border-radius:3px;transition:all .15s;}
.ahm-confirm-btn:hover{background:rgba(243,186,47,.22);border-color:var(--bnb);}
.ahm-confirm-btn:disabled{opacity:.35;cursor:default;}
.ahm-selected-info{margin-bottom:8px;padding:6px 10px;background:rgba(243,186,47,.06);border:1px solid rgba(243,186,47,.2);border-radius:3px;font-size:12px;color:var(--bnb);display:none;}
.ahm-selected-info.show{display:block;}
/* ── LEADERBOARD HEADER ADD BUTTON ── */
.lbh-add-btn{padding:3px 10px;background:rgba(243,186,47,.1);border:1px solid rgba(243,186,47,.3);color:var(--bnb);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.08em;cursor:pointer;border-radius:2px;transition:all .15s;white-space:nowrap;}
.lbh-add-btn:hover{background:rgba(243,186,47,.2);border-color:var(--bnb);}
/* ── SWAP TOOL TUTORIAL ── */
.swap-tut-overlay{display:none;position:fixed;inset:0;z-index:400;pointer-events:none;}
.swap-tut-overlay.show{display:block;pointer-events:all;}
.swap-tut-box{position:absolute;background:var(--bg2);border:1px solid rgba(243,186,47,.4);box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 24px rgba(243,186,47,.08);border-radius:5px;padding:16px 18px;width:280px;pointer-events:all;z-index:401;}
.swap-tut-box::before{content:'';position:absolute;right:-8px;top:20px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:8px solid rgba(243,186,47,.4);}
.swap-tut-step{font-size:12px;color:var(--bnb);letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;font-weight:700;}
.swap-tut-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:8px;font-family:var(--font-display);}
.swap-tut-desc{font-size:12px;color:rgba(180,200,220,.8);line-height:1.8;font-family:var(--font-ui);margin-bottom:12px;}
.swap-tut-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.swap-tut-dots{display:flex;gap:4px;}
.swap-tut-dot{width:5px;height:5px;border-radius:50%;background:var(--bg4);}
.swap-tut-dot.active{background:var(--bnb);}
.swap-tut-btn{padding:4px 12px;background:rgba(243,186,47,.12);border:1px solid rgba(243,186,47,.35);color:var(--bnb);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.08em;cursor:pointer;border-radius:2px;transition:all .15s;}
.swap-tut-btn:hover{background:rgba(243,186,47,.22);}
.swap-tut-skip{font-size:12px;color:var(--muted);cursor:pointer;background:none;border:none;font-family:inherit;text-decoration:underline;letter-spacing:.04em;padding:0;}
.swap-tut-skip:hover{color:var(--text);}
.swap-tut-highlight{outline:2px solid rgba(243,186,47,.6);outline-offset:3px;border-radius:3px;box-shadow:0 0 14px rgba(243,186,47,.18);transition:outline .2s;}
.ad-panel-spacer{flex-shrink:0;border-bottom:1px solid var(--bdr2);background:var(--bg3);display:flex;align-items:center;padding:0 14px;min-height:34px;}
.ad-panel-spacer-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--font-display);}
.ad-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:16px 14px 12px;gap:14px;overflow-y:auto;}
.ad-promo{width:100%;background:linear-gradient(135deg,rgba(167,139,250,.1),rgba(167,139,250,.04));border:1px solid rgba(167,139,250,.28);border-radius:5px;padding:14px 14px;text-align:center;}
.ad-promo-icon{font-size:22px;margin-bottom:6px;}
.ad-promo-title{font-size:14px;font-weight:400;color:var(--pro);letter-spacing:.02em;margin-bottom:5px;font-family:var(--font-display);}
.ad-promo-sub{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:10px;font-family:var(--font-ui);}
.ad-promo-feat{text-align:left;margin-bottom:12px;}
.ad-promo-feat div{font-size:12px;color:var(--text);padding:2px 0;letter-spacing:.04em;}
.ad-promo-feat span{color:var(--pro);margin-right:6px;}
.ad-promo-btn{width:100%;padding:8px;background:var(--prod);border:1px solid rgba(167,139,250,.4);color:var(--pro);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.12em;cursor:pointer;border-radius:3px;transition:all .15s;position:relative;overflow:hidden;}
.ad-promo-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(167,139,250,.12),transparent);animation:proShimmer 2.5s linear infinite;}
.ad-promo-btn:hover{background:rgba(167,139,250,.22);border-color:var(--pro);}
.ad-donate{width:100%;background:rgba(243,186,47,.05);border:1px solid rgba(243,186,47,.25);border-left:3px solid rgba(243,186,47,.55);border-radius:5px;padding:16px 18px;text-align:center;box-shadow:0 2px 12px rgba(243,186,47,.06);}
.ad-donate-title{font-size:13px;font-weight:400;color:var(--bnb);letter-spacing:.02em;margin-bottom:4px;font-family:var(--font-display);}
.ad-donate-sub{font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:8px;font-family:var(--font-ui);}
.ad-donate-btn{width:100%;padding:7px;background:var(--bnbd);border:1px solid rgba(243,186,47,.25);color:var(--bnb);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.1em;cursor:pointer;border-radius:3px;transition:all .15s;}
.ad-donate-btn:hover{background:rgba(243,186,47,.15);border-color:var(--bnb);}
/* ── TOPBAR ICON BUTTONS (Binance-style) ── */
.topbar-action-btns{display:flex;gap:3px;flex-shrink:0;align-items:center;}
.topbar-action-btns .btn{flex:none;text-align:center;justify-content:center;max-width:none;}
.tb-icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:transparent;border:none;color:var(--muted);cursor:pointer;transition:background .15s,color .15s;padding:0;font-size:16px;flex-shrink:0;}
.tb-icon-btn:hover{background:var(--bg4);color:var(--text);}
.tb-icon-btn svg{width:18px;height:18px;}
.tb-icon-btn .tb-icon-label{display:none;}
/* Dropdown on hover */
.tb-dropdown-wrap{position:relative;}
.tb-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:180px;background:var(--bg2);border:1px solid var(--bdr2);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.45);z-index:200;padding:6px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none;}
.tb-dropdown-wrap:hover .tb-dropdown,.tb-dropdown-wrap:focus-within .tb-dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.tb-dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:12px;color:var(--text);cursor:pointer;transition:background .12s;font-family:var(--font-ui);white-space:nowrap;text-decoration:none;}
.tb-dropdown-item:hover{background:var(--bg4);}
.tb-dropdown-item svg,.tb-dropdown-item .tb-dd-ico{width:18px;height:18px;color:var(--muted);flex-shrink:0;}
.tb-dropdown-item .tb-dd-soon{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--amber);background:var(--ad);border:1px solid rgba(240,160,48,.25);border-radius:100px;padding:2px 7px;margin-left:auto;}
.tb-dropdown-sep{height:1px;background:var(--bdr);margin:4px 8px;}
:root.light .tb-dropdown{background:var(--bg3);border-color:var(--bdr2);box-shadow:0 8px 32px rgba(0,0,0,.12);}
/* ── LANGUAGE SELECTOR (modal only) ── */
.lang-sel-modal{display:flex;gap:4px;flex-wrap:wrap;}
.lang-btn-modal{background:var(--bg4);border:1px solid var(--bdr2);border-radius:3px;padding:4px 8px;font-size:12px;cursor:pointer;color:var(--muted);font-family:inherit;letter-spacing:.04em;transition:all .15s;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;}
.lang-btn-modal:hover{border-color:var(--bnb);color:var(--text);}
.lang-btn-modal.active{background:var(--bnbd);border-color:rgba(243,186,47,.5);color:var(--bnb);}
/* ── HOVER TOOLTIP SYSTEM (Smart Info Card) ── */
.rt-tip{
position:fixed;z-index:900;
background:var(--bg2);border:1px solid rgba(243,186,47,.25);
border-radius:6px;padding:14px 16px 12px;
font-size:13px;color:var(--text);
line-height:1.6;max-width:340px;width:340px;
box-shadow:0 8px 32px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03);
pointer-events:none;opacity:0;
transition:opacity .15s;
font-family:var(--font-ui);
overflow:hidden;
}
.rt-tip.show{opacity:1;}
.rt-tip-title{
font-size:14px;font-weight:400;color:var(--bnb);margin-bottom:10px;
letter-spacing:.01em;font-family:var(--font-display);
border-bottom:1px solid var(--bdr);padding-bottom:8px;
}
.rt-tip-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-bottom:10px;overflow:hidden;word-break:break-word;}
.rt-tip-cell-l{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-ui);margin-bottom:1px;}
.rt-tip-cell-v{font-size:12px;font-weight:600;font-family:var(--font-mono);line-height:1.3;}
.rt-tip-cell-v.up{color:var(--green);}
.rt-tip-cell-v.dn{color:var(--red);}
.rt-tip-cell-v.bnb{color:var(--bnb);}
.rt-tip-cell-v.muted{color:var(--muted);}
.rt-tip-sentiment{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;padding:2px 7px;border-radius:3px;font-family:var(--font-ui);}
.rt-tip-sentiment.bull{background:rgba(0,189,142,.12);color:var(--green);border:1px solid rgba(0,189,142,.25);}
.rt-tip-sentiment.bear{background:rgba(240,62,88,.12);color:var(--red);border:1px solid rgba(240,62,88,.25);}
.rt-tip-warning{
margin-top:8px;padding:7px 9px;border-radius:4px;
font-size:12px;line-height:1.5;font-family:var(--font-ui);
background:var(--bg3);border:1px solid var(--bdr);
}
/* ── SHARE MENU (dropdown from share button) ── */
.share-menu{
position:absolute;bottom:100%;right:0;margin-bottom:6px;
background:var(--bg3);border:1px solid var(--bdr2);border-radius:8px;
box-shadow:0 8px 24px rgba(0,0,0,.4);
padding:4px;min-width:160px;z-index:50;
display:flex;flex-direction:column;
}
.share-menu button{
display:flex;align-items:center;gap:8px;
padding:8px 12px;background:none;border:none;
color:var(--text);font-family:var(--font-ui);font-size:12px;
cursor:pointer;border-radius:5px;text-align:left;white-space:nowrap;
transition:background .12s;
}
.share-menu button:hover{background:var(--w005);}
:root.light .share-menu{background:var(--bg3);box-shadow:0 8px 24px rgba(0,0,0,.12);}
/* ── LEADERBOARD SHARE BAR ── */
.share-bar{display:flex;justify-content:flex-end;padding:8px 6px 4px;}
.share-rotator-btn{
display:inline-flex;align-items:center;gap:5px;
padding:6px 14px;background:none;border:1px solid var(--bdr2);
border-radius:5px;color:var(--muted);font-family:var(--font-ui);
font-size:11px;font-weight:500;letter-spacing:.04em;
cursor:pointer;transition:all .18s;
}
.share-rotator-btn:hover{border-color:var(--bnb);color:var(--bnb);background:var(--bnbd);}
/* ── SWAP SHARE BUTTON ── */
.rt-swap-share-btn{
display:flex;align-items:center;justify-content:center;gap:6px;
width:100%;margin-top:12px;padding:9px 14px;
background:rgba(243,186,47,.06);border:1px solid rgba(243,186,47,.2);
border-radius:6px;color:var(--bnb);font-family:var(--font-ui);
font-size:12px;font-weight:500;letter-spacing:.06em;
cursor:pointer;transition:all .18s;
}
.rt-swap-share-btn:hover{background:rgba(243,186,47,.14);border-color:rgba(243,186,47,.4);}
:root.light .rt-swap-share-btn{background:rgba(138,102,16,.06);border-color:rgba(138,102,16,.18);color:var(--bnb);}
:root.light .rt-swap-share-btn:hover{background:rgba(138,102,16,.12);border-color:rgba(138,102,16,.3);}
/* ── SETTINGS MODAL ── */
#settings-modal .modal{border:1px solid var(--bdr2);}
#settings-modal .modal-title{color:var(--text);}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--bdr);gap:12px;}
.setting-row:last-child{border-bottom:none;}
.setting-label{font-size:12px;color:var(--text);font-weight:500;font-family:var(--font-ui);}
.setting-sub{font-size:12px;color:var(--muted);margin-top:2px;font-family:var(--font-ui);}
/* ── SIGNAL TRACK RECORD ── */
.str-section{border-bottom:1px solid var(--bdr);background:var(--bg2);overflow:hidden;}
.str-section-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:default;}
.str-section-title{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bnb);font-family:var(--font-mono);}
.str-section-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;letter-spacing:.06em;font-family:var(--font-mono);}
.str-section-badge.good{background:rgba(0,200,150,.12);color:var(--green);border:1px solid rgba(0,200,150,.25);}
.str-section-badge.mid{background:rgba(243,186,47,.1);color:var(--bnb);border:1px solid rgba(243,186,47,.25);}
.str-section-badge.low{background:rgba(255,69,96,.1);color:var(--red);border:1px solid rgba(255,69,96,.25);}
.str-body{padding:0 14px 12px;}
.str-empty{text-align:center;padding:14px 10px;}
.str-stats{text-align:center;padding:8px 0 10px;border-bottom:1px solid var(--bdr);margin-bottom:10px;}
.str-stats-num{font-size:36px;font-weight:800;font-family:var(--font-mono);line-height:1.1;}
.str-stats-lbl{font-size:12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:2px;font-family:var(--font-mono);}
.str-stats-detail{font-size:11px;color:var(--muted);margin-top:6px;font-family:var(--font-mono);}
/* 2-col grid; scrolls inside the open collapse body so it never
pushes the leaderboard off-screen. */
.str-list{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;
max-height:340px;overflow-y:auto;padding-right:4px;}
.str-list::-webkit-scrollbar{width:6px;}
.str-list::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px;}
.str-item{background:var(--bg3);border:1px solid var(--bdr);border-radius:5px;
padding:7px 9px;cursor:pointer;transition:border-color .15s,transform .15s;min-width:0;}
.str-item:hover{border-color:var(--bnb);transform:translateY(-1px);}
.str-item-top{display:flex;align-items:center;gap:5px;margin-bottom:3px;}
.str-item-icon{font-size:12px;}
.str-item-sym{font-size:12px;font-weight:700;color:var(--text);font-family:var(--font-mono);}
.str-item-signal{font-size:11px;font-weight:700;padding:1px 5px;border-radius:2px;letter-spacing:.04em;font-family:var(--font-mono);white-space:nowrap;}
.str-item-signal.bull{background:rgba(0,200,150,.12);color:var(--green);}
.str-item-signal.bear{background:rgba(255,69,96,.12);color:var(--red);}
.str-item-ago{font-size:10px;color:var(--muted);margin-left:auto;font-family:var(--font-mono);white-space:nowrap;}
.str-item-bot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:2px;}
.str-item-price{font-size:10px;color:var(--muted);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.str-item-change{font-size:13px;font-weight:800;font-family:var(--font-mono);white-space:nowrap;}
.str-item-proof{font-size:10px;color:var(--muted);line-height:1.4;font-family:var(--font-mono);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.str-item-share{margin-top:4px;}
.str-share-btn{font-size:10px;padding:3px 7px;background:rgba(243,186,47,.08);
border:1px solid rgba(243,186,47,.2);color:var(--bnb);border-radius:3px;
cursor:pointer;font-family:var(--font-mono);letter-spacing:.04em;transition:all .15s;}
.str-share-btn:hover{background:rgba(243,186,47,.16);border-color:var(--bnb);}
/* Narrow screens: fall back to 1 column so 12px coin prices don't overflow */
@media(max-width:480px){
.str-list{grid-template-columns:1fr;}
}
.str-share-btn{background:rgba(243,186,47,.1);border:1px solid rgba(243,186,47,.3);color:var(--bnb);font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 12px;border-radius:4px;cursor:pointer;font-family:var(--font-mono);transition:all .15s;}
.str-share-btn:hover{background:rgba(243,186,47,.2);border-color:var(--bnb);}
.str-public-link{margin-top:10px;text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;}
.str-public-link a{color:var(--bnb);text-decoration:none;padding:6px 10px;border:1px solid rgba(243,186,47,.25);border-radius:4px;transition:all .15s;display:inline-block;}
.str-public-link a:hover{background:rgba(243,186,47,.1);border-color:var(--bnb);}
/* ── Rotation pair wins (relative-performance scoring) ── */
.str-rot-block{margin-top:12px;padding-top:10px;border-top:1px solid var(--bdr);}
.str-rot-title{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-bottom:8px;font-family:var(--font-mono);}
.str-rot-pct{color:var(--bnb);font-weight:600;margin-left:6px;}
.str-rot-list{display:flex;flex-direction:column;gap:5px;}
.str-rot-item{padding:7px 9px;background:var(--bg2);border:1px solid var(--bdr);border-radius:4px;font-family:var(--font-mono);}
.str-rot-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;}
.str-rot-pair{flex:1;font-size:12px;color:var(--text);}
.str-rot-pair strong{color:var(--bnb);}
.str-rot-outcome{font-weight:700;letter-spacing:.05em;font-size:10px;}
.str-rot-ago{color:var(--muted);font-size:10px;}
.str-rot-detail{color:var(--muted);margin-top:3px;font-size:10px;}
.str-rot-detail span{white-space:nowrap;}
/* ── FOOTER & MODALS — gold + white only ── */
.faq-q{font-size:14px;font-weight:600;color:var(--bnb);margin-bottom:6px;letter-spacing:.04em;font-family:var(--font-mono);}
.faq-a{font-size:13px;color:var(--text);line-height:1.9;font-family:var(--font-mono);}
/* ── FOOTER ── */
.site-footer{background:var(--bg2);border-top:1px solid var(--bdr);padding:14px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex-shrink:0;}
.footer-links{display:flex;gap:14px;flex-wrap:nowrap;justify-content:center;}
.footer-link{font-size:12px;color:var(--muted);text-decoration:none;letter-spacing:.08em;cursor:pointer;transition:color .15s;font-family:var(--font-ui);}
.footer-link:hover{color:var(--text);}
.footer-copy{font-size:12px;color:var(--muted);letter-spacing:.04em;text-align:center;font-family:var(--font-ui);line-height:1.8;}
.footer-disclaimer{font-size:12px;color:rgba(90,110,133,.7);letter-spacing:.04em;text-align:center;font-family:var(--font-ui);line-height:1.7;max-width:900px;}
.loader{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:600;transition:opacity .35s;}
.loader.gone{opacity:0;pointer-events:none;}
.lmsg{font-size:12px;color:var(--muted);letter-spacing:.1em;min-height:16px;}
.lbar{width:160px;height:2px;background:var(--bg4);border-radius:1px;overflow:hidden;}
.lbf{height:100%;background:var(--bnb);border-radius:1px;transition:width .4s;}
@keyframes loadBar{from{width:0%}to{width:100%}}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px;}
/* ── FOOTER — single line on small screens ── */
@media(max-width:900px){
.site-footer{flex-direction:row;padding:5px 10px;gap:8px;flex-wrap:nowrap;justify-content:space-between;align-items:center;}
.footer-links{gap:10px;flex-wrap:nowrap;justify-content:flex-start;overflow:hidden;}
.footer-link{font-size:12px;white-space:nowrap;}
.footer-copy{font-size:12px;white-space:nowrap;flex-shrink:0;}
}
/* ── Default: mobile zones hidden, desktop visible ── */
.mob-topbar-btc,.mob-topbar-pro,.mob-topbar-center,.mob-topbar-support,.mob-topbar-gear,.mob-topbar-search{display:none;}
.land-mode-bar{display:none;}
.topbar-desktop-left{display:flex;}
.mob-neon-signal{display:none;}
.mob-inline-holdings{display:none;}
/* ══════════════════════════════
LANDSCAPE MOBILE
Applies when phone is rotated: max-height ~500px and landscape orientation
══════════════════════════════ */
@media(max-height:500px) and (orientation:landscape){
/* ── TOPBAR: desktop-style row with logo, BTC, categories, search, gear ── */
.topbar{
position:fixed;top:0;left:0;right:0;z-index:200;
padding:0 6px;gap:0;flex-wrap:nowrap;height:40px;align-items:center;
justify-content:space-between;
}
/* Show desktop left section (logo + BTC pill) */
.topbar-desktop-left{display:flex !important;align-items:center;gap:6px;flex-shrink:0;height:100%;}
#logo-c{width:80px;height:22px;}
.topbar-desktop-left .btc-pill{font-size:12px;padding:2px 6px;}
.topbar-desktop-left .btc-meta{display:none;}
.bear-banner,.scale-banner{display:none !important;}
/* Show desktop right section (search only — gear merged into MORE menu) */
.topbar-r{display:flex !important;align-items:center;gap:4px;flex-shrink:0;height:100%;}
.topbar-r .ts{display:none;}
.topbar-r .tb-dropdown-wrap{display:none !important;}
.topbar-r .theme-btn{display:none !important;}
.topbar-r .topbar-search-wrap{display:flex !important;}
.topbar-r .settings-btn{display:none !important;}
/* Show asset-mode-bar inline in topbar */
.land-mode-bar{display:flex !important;align-items:center;gap:4px;margin:0 auto;flex-shrink:1;min-width:0;}
.land-mode-bar .asset-mode-btn{flex-direction:row;gap:4px;padding:4px 10px;border-radius:4px;font-size:12px;min-height:28px;}
.land-mode-bar .am-logo{width:18px;height:18px;font-size:12px;}
.land-mode-bar .am-label{font-size:12px;letter-spacing:.1em;}
/* Hide all mobile-only topbar cells */
.mob-topbar-btc,.mob-topbar-pro,.mob-topbar-center,.mob-topbar-support,.mob-topbar-gear,.mob-topbar-search{
display:none !important;
}
#logo-c-mob{display:none !important;}
/* Hide FREE badge, btc meta, timestamp */
.tier-badge{display:none !important;}
.btc-meta,.ts{display:none;}
/* ── LEFT SIDE NAV: 4 stacked buttons, fixed, 44px wide ── */
.mob-nav{
display:flex !important;
flex-direction:column;
position:fixed;
left:0;bottom:0;top:40px;
width:44px;height:auto;
border-top:none;border-right:1px solid var(--bdr2);
z-index:300;background:var(--bg2);
}
.mob-nav-btn{
flex:1;display:flex;flex-direction:column;
align-items:center;justify-content:center;
border-left:none;border-top:none;
border-bottom:1px solid var(--bdr);
border-right:3px solid transparent;
padding:4px 2px;font-size:12px;gap:2px;
}
.mob-nav-btn+.mob-nav-btn{border-left:none;}
.mob-nav-btn.active{border-right-color:var(--bnb);border-bottom-color:var(--bdr);}
.mob-nav-logo{width:20px;height:20px;font-size:12px;}
/* ── MAIN LAYOUT: offset for fixed topbar + fixed side nav ── */
body{padding-top:40px;} /* push content below fixed topbar */
.root{
grid-template-columns:1fr;
margin-left:44px;
height:calc(100vh - 40px);
}
.root{display:flex;flex-direction:column;height:auto;max-height:none;overflow-y:auto;}
.sidebar{display:block !important;order:1;height:auto;max-height:none;overflow:visible;border-right:none;border-bottom:1px solid var(--bdr);}
.main-col{order:2;padding-bottom:0;overflow:visible;height:auto;max-height:none;}
.ad-panel{display:flex !important;order:3;border-left:none;border-top:1px solid rgba(130,110,200,.2);padding:10px 12px 80px;height:auto;max-height:none;overflow:visible;width:100%;box-sizing:border-box;background:var(--bg2) !important;box-shadow:none !important;}
.ad-panel::before{display:none !important;}
.rt-calc-inputs{grid-template-columns:1fr;gap:8px;}
.rt-ratio-bold{font-size:32px;}
/* rt-picker-panel is now inline — no fixed positioning */
/* ── HOLDINGS PANEL ── */
.mob-holdings-panel{bottom:0;left:44px;}
/* ── FOOTER: single thin line ── */
.site-footer{flex-direction:row;padding:3px 8px;gap:6px;flex-wrap:nowrap;justify-content:space-between;align-items:center;}
.footer-links{gap:8px;flex-wrap:nowrap;}
.footer-link{font-size:12px;}
.footer-copy{font-size:12px;flex-shrink:0;}
/* ── SIGNAL PANEL: compact ── */
.neon-section{flex-shrink:0;}
.neon-inner{padding:4px 5px 5px !important;}
.bars-cols{flex-direction:row;gap:3px !important;}
.bars-col-inner{flex:1;min-width:0;padding:4px 4px 3px !important;border-radius:4px;}
.bars-divider{display:none;}
.bar-col-title{font-size:12px;letter-spacing:.04em;margin-bottom:3px;}
.bar-col-title::before,.bar-col-title::after{display:none;}
.sig-tiles-grid{grid-template-columns:repeat(2,1fr) !important;grid-auto-rows:auto !important;}
.sig-tile:nth-child(n+9){display:none;}
.sig-tile{padding:2px 3px;}
.sig-tile-sym{font-size:12px;}
.sig-stat-l{font-size:11px;}
.sig-stat-v{font-size:12px;}
.sig-tile-badge,.sig-tile-arrow{display:none;}
.sig-tile-ico{width:12px;height:12px;}
/* ── TABLE: tight ── */
.sort-hint{display:none;}
.ptitle{font-size:12px;}
thead th:nth-child(2),tbody td:nth-child(2){display:none;}
.sb{display:none;}
tbody td{font-size:12px;padding:3px 2px;border-bottom:none;}
thead th{font-size:12px;padding:3px 2px;}
.tsym{font-size:12px;}
.tname{font-size:12px;}
.ti{width:15px;height:15px;}
.cc{gap:3px;}
.sw{justify-content:flex-end;}
.sv{font-size:12px;font-weight:700;}
/* ── LEADERBOARD HEADER: sticky so it doesn't slide under the fixed topbar ── */
.tbl-head{
position:sticky;top:0;z-index:50;
background:var(--bg2);
}
thead{position:sticky;top:0;z-index:49;background:var(--bg2);}
/* ── MORE MENU: reposition for left-side nav ── */
.mob-more-menu{bottom:8px;left:52px;right:auto;}
/* ── FAB: hide elevated center button in landscape (swap accessible via side nav) ── */
.mob-nav-fab{position:static;transform:none;width:44px;height:auto;border-radius:0;border:none;box-shadow:none;background:none;color:var(--muted);font-size:12px;padding:4px 2px;border-bottom:1px solid var(--bdr);}
.mob-nav-fab.active{color:var(--bnb);box-shadow:none;}
.mob-nav-fab:active{transform:none;}
.mob-nav-fab-spacer{display:none;}
}
@media(max-width:700px) and (orientation:portrait){
/* ── TOPBAR — portrait: 5 cells, icon + label stacked ── */
.topbar{padding:0;gap:0;flex-wrap:nowrap;height:52px;align-items:stretch;}
.topbar-desktop-left{display:none !important;}
.topbar-r{display:none !important;}
/* All 5 cells share base layout: flex column, icon + label stacked */
.mob-topbar-btc,.mob-topbar-pro,.mob-topbar-center,.mob-topbar-support,.mob-topbar-gear{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:3px;height:100%;cursor:pointer;padding:4px 2px;
border-right:1px solid var(--bdr);
transition:background .15s ease;
}
.mob-topbar-gear{border-right:none;}
/* Tap flash — subtle white wash on press */
.mob-topbar-btc:active,.mob-topbar-pro:active,.mob-topbar-center:active,
.mob-topbar-support:active,.mob-topbar-gear:active{
background:rgba(255,255,255,.07);
}
/* BTC cell — price + direction stay; min 11px */
.mob-btc-cell{
width:100%;height:100%;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:2px;
font-size:11px;font-weight:700;letter-spacing:.06em;
background:rgba(255,69,96,.10);color:var(--red);
}
.mob-btc-cell.bull{background:rgba(0,200,150,.10);color:var(--green);}
.mob-btc-cell.unk{background:var(--bg3);color:var(--muted);}
.mob-btc-cell .pulse{width:4px;height:4px;border-radius:50%;background:currentColor;animation:pulse 2s infinite;flex-shrink:0;}
/* PRO cell — purple */
.mob-topbar-pro{background:rgba(167,139,250,.12);border-bottom:2px solid rgba(167,139,250,.4);}
.mob-topbar-pro:hover{background:rgba(167,139,250,.22);}
.mob-pro-icon{font-size:18px;color:var(--pro);line-height:1;}
.mob-topbar-pro::after{
content:"PRO";font-size:10px;font-weight:700;letter-spacing:.1em;
color:var(--pro);font-family:var(--font-ui);line-height:1;
}
/* Center logo */
.mob-topbar-center{background:var(--bg2);}
/* SUPPORT cell — green */
.mob-topbar-support{background:rgba(0,200,150,.10);border-bottom:2px solid rgba(0,200,150,.4);}
.mob-topbar-support:hover{background:rgba(0,200,150,.20);}
.mob-support-icon{font-size:18px;color:var(--green);line-height:1;}
.mob-topbar-support::after{
content:"SUPPORT";font-size:10px;font-weight:700;letter-spacing:.1em;
color:var(--green);font-family:var(--font-ui);line-height:1;
}
/* GEAR cell — amber */
.mob-topbar-gear{background:rgba(243,186,47,.10);border-bottom:2px solid rgba(243,186,47,.4);}
.mob-topbar-gear:hover{background:rgba(243,186,47,.20);}
.mob-gear-icon{font-size:18px;color:var(--bnb);line-height:1;}
.mob-topbar-gear::after{
content:"SETTINGS";font-size:10px;font-weight:700;letter-spacing:.1em;
color:var(--bnb);font-family:var(--font-ui);line-height:1;
}
/* Hides */
.btc-meta,.ts{display:none;}
.tier-badge{display:none !important;}
/* Modal full-screen — scrollable on mobile */
.overlay{overflow-y:auto !important;align-items:flex-start !important;padding:12px 0 !important;}
.modal{margin:12px auto !important;max-width:calc(100vw - 24px) !important;width:calc(100vw - 24px) !important;max-height:none !important;overflow:visible !important;}
.modal-x{position:absolute !important;top:10px !important;right:10px !important;left:auto !important;z-index:10;font-size:20px !important;padding:0 !important;width:44px !important;height:44px !important;display:flex !important;align-items:center !important;justify-content:center !important;background:var(--bg2);border-radius:50%;}
/* Settings panel — bottom sheet on mobile */
#settings-panel{
position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;top:auto !important;
width:100% !important;max-width:100% !important;max-height:80vh !important;
border-radius:20px 20px 0 0 !important;
padding:16px 16px 80px !important;
animation:pickerSlideUp .3s cubic-bezier(0.34,1.56,0.64,1);
}
#settings-backdrop{background:rgba(0,0,0,.55) !important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
/* Layout — continuous vertical scroll: sidebar → leaderboard → swap panel */
.root{grid-template-columns:1fr;display:flex;flex-direction:column;height:auto;max-height:none;overflow:visible;}
.sidebar{display:block !important;order:1;height:auto;max-height:none;overflow:visible;border-right:none;border-bottom:1px solid var(--bdr);background:var(--bg2) !important;box-shadow:none !important;}
.main-col{order:2;padding-bottom:env(safe-area-inset-bottom);overflow:visible;height:auto;max-height:none;background:var(--bg) !important;}
/* ── BOTTOM NAV — portrait redesign: 60px buttons, active border-top, safe-area ── */
.mob-nav{
height:calc(60px + env(safe-area-inset-bottom));
padding:0 4px env(safe-area-inset-bottom);
align-items:stretch;
}
.mob-nav-btn{
font-size:10px;
min-height:60px;
border-top:3px solid transparent;
background:transparent;
transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.mob-nav-btn.active{
color:var(--bnb);
border-top:3px solid var(--bnb);
background:rgba(243,186,47,.06);
}
.mob-nav-btn:active{background:rgba(255,255,255,.07);}
/* Central SWAP FAB — keep oversized floating layout above the nav */
.mob-nav-fab{
bottom:calc(22px + env(safe-area-inset-bottom));
border-top:none;background:linear-gradient(135deg,var(--bnb),#e8a020);
}
.mob-nav-fab.active{border-top:none;}
.mob-nav-fab-spacer{border-top:3px solid transparent;}
.ad-panel{display:flex !important;order:3;border-left:none;border-top:1px solid rgba(130,110,200,.2);padding:10px 12px 80px;height:auto;max-height:none;overflow:visible;width:100%;box-sizing:border-box;background:var(--bg) !important;box-shadow:none !important;}
/* Hide pro promo & donate from main mobile view — accessible via More menu */
.ad-promo,.ad-body,.sidebar-donate{display:none !important;}
.collapse-hdr.promo,.collapse-hdr.holdings[id="ch-support"]{display:none !important;}
#cb-promo,#cb-support{display:none !important;}
.ad-panel::before{display:none !important;}
.ratio-section{background:transparent !important;}
/* ── MOBILE SWAP LAYOUT — vertical stacking ── */
.rt-pair-tiles{grid-template-columns:1fr 1fr;gap:6px;}
.rt-ct{padding:10px 8px;min-height:auto;}
.rt-ct-img{width:32px;height:32px;}
.rt-ct-sym{font-size:15px;}
.rt-ct-price{font-size:12px;}
.rt-ratio-center{padding:8px 0;}
.rt-ratio-bold{font-size:36px;}
.rt-calc{padding:12px;margin-bottom:10px;}
.rt-calc-inputs{grid-template-columns:1fr;gap:8px;}
.rt-ci{width:100%;}
.rt-calc-result{flex-direction:column;gap:8px;align-items:stretch;}
.rt-calc-result > div:last-child{text-align:left;}
.rt-res-val{font-size:16px;}
.rt-calc-ratios{gap:4px;}
.rt-calc-ratio-line{font-size:12px;}
.rt-cards{grid-template-columns:1fr 1fr;gap:6px;}
.rt-chart-wrap{height:180px;margin-top:6px;}
.rt-swap-row{flex-wrap:wrap;gap:6px;}
.rt-swap-pair-btn{flex:1;min-width:0;}
.rt-badge{flex:1;min-width:0;text-align:center;}
/* rt-picker-panel is now inline — no fixed positioning */
tbody td{border-bottom:none;}
/* FAB swap button — override any old hide rules */
#mn-swap.mob-nav-fab{display:flex !important;}
/* ── NEON SECTION: stacked columns, each row a horizontal swipe carousel ── */
.neon-section{width:100%;box-sizing:border-box;}
.neon-inner{padding:6px 0 8px !important;display:flex;flex-direction:column;gap:10px;}
.bars-cols{flex-direction:column !important;gap:10px !important;width:100%;}
.bars-col-inner{flex:none;min-width:0;width:100%;padding:6px 0 4px !important;border-radius:6px;}
.bars-divider{display:none;}
.bar-col-title{font-size:10px;letter-spacing:.08em;margin-bottom:4px;padding:0 10px;white-space:normal;overflow:visible;display:flex;}
.bar-col-title::before,.bar-col-title::after{display:none;}
/* Carousel row — horizontal swipe with snap */
.sig-tiles-grid{
display:flex !important;
flex-direction:row !important;
grid-template-columns:none !important;
grid-auto-rows:auto !important;
overflow-x:auto;
overflow-y:hidden;
gap:8px !important;
padding:4px 8px 8px;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.sig-tiles-grid::-webkit-scrollbar{display:none;}
/* Every tile visible — clear any prior hide rules */
.sig-tiles-grid > *:nth-child(n+3){display:flex !important;}
/* Fixed-width snap card */
.sig-tile{
flex-shrink:0;
width:130px;
scroll-snap-align:start;
padding:8px;
min-height:auto;max-height:none;
box-sizing:border-box;overflow:hidden;
}
.sig-tile-sym{font-size:11px;}
.sig-tile-stats{display:flex;flex-wrap:nowrap;gap:2px;}
.sig-stat{flex:1;}
.sig-stat-l{font-size:9px;}
.sig-stat-v{font-size:11px;}
.sig-tile-badge{display:inline-flex;}
.sig-tile-arrow{display:none;}
.sig-tile-ico{width:18px;height:18px;}
/* ── INLINE MOBILE HOLDINGS ── */
.mob-inline-holdings{
display:flex;flex-direction:column;
border-top:1px solid var(--bdr);
background:var(--bg2);
padding-bottom:8px;
}
/* Section header */
.mob-inline-holdings .mob-ih-header{
display:flex;align-items:center;justify-content:space-between;
padding:7px 12px 5px;
border-bottom:1px solid var(--bdr);
background:var(--bg3);
flex-shrink:0;
}
.mob-ih-title{
font-size:12px;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);font-family:var(--font-display);
}
.mob-ih-count{font-size:12px;color:var(--bnb);letter-spacing:.04em;}
/* Portfolio signal inside inline holdings */
.mob-inline-holdings .sig-box{flex-shrink:0;}
/* Holdings tiles grid */
.mob-inline-holdings .mob-ih-tiles{
display:grid;grid-template-columns:repeat(2,1fr);gap:6px;
padding:8px 10px 4px;
flex-shrink:0;
}
/* Placeholder tiles */
.mob-ph-tile{
border:1px dashed rgba(0,200,150,.22);border-radius:4px;
height:68px;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:4px;
font-size:16px;color:rgba(0,200,150,.45);
background:rgba(0,200,150,.025);cursor:pointer;
transition:border-color .15s,background .15s,color .15s;
}
.mob-ph-tile span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(0,200,150,.35);font-family:var(--font-ui);}
.mob-ph-tile:hover{border-color:rgba(0,200,150,.5);background:rgba(0,200,150,.06);color:var(--green);}
.mob-ph-tile:hover span{color:var(--green);}
/* Add form section label */
.mob-inline-holdings .mob-ih-add-label{
font-size:12px;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);padding:4px 12px 2px;font-family:var(--font-display);
border-top:1px solid var(--bdr);margin-top:2px;
}
/* Override add-form inside inline holdings */
.mob-inline-holdings .add-form{padding:8px 10px;}
.mob-inline-holdings .add-btn{margin-top:6px;}
.mob-inline-holdings .phead{display:none;}
.mob-inline-holdings .holdings-section-label{display:none;}
.mob-inline-holdings .tiles-scroll{display:none;}
/* ── TUTORIAL CARD: centered overlay on mobile ── */
#tut-box{
position:fixed !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
right:auto !important;
bottom:auto !important;
width:calc(100vw - 24px) !important;
max-width:none !important;
max-height:85vh !important;
overflow-y:auto !important;
margin:0 !important;
z-index:850 !important;
}
#tut-box::before{display:none !important;}
#tut-hole{display:none !important;}
#tut-backdrop.active{background:rgba(0,0,0,.65) !important;}
/* ── FOOTER: single horizontal line ── */
.site-footer{
flex-direction:row !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:space-between !important;
padding:4px 8px !important;
gap:6px !important;
}
.footer-links{
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
gap:7px !important;
overflow:hidden !important;
flex:1 !important;
min-width:0 !important;
}
.footer-link{font-size:10px !important;white-space:nowrap !important;letter-spacing:.04em !important;}
.footer-copy{font-size:10px !important;white-space:nowrap !important;flex-shrink:0 !important;}
.footer-disclaimer{display:none !important;}
/* ── LEADERBOARD: CARD LAYOUT (replaces table on portrait mobile) ── */
table{table-layout:auto;width:100%;border-collapse:separate;border-spacing:0;}
thead{display:none;}
tbody{display:flex;flex-direction:column;gap:6px;padding:6px 8px;}
tbody tr{
display:grid;
grid-template-columns:1fr 1fr;
gap:4px 8px;
background:var(--bg3) !important;
border:1px solid var(--bdr);
border-radius:6px;
padding:10px;
align-items:center;
min-height:auto;
}
tbody tr:hover{background:var(--bg3) !important;}
/* Held rows — accent border-left */
tbody tr.held,
tbody tr.held:nth-child(odd),
tbody tr.held:nth-child(even){
background:rgba(243,186,47,.04) !important;
border-left:3px solid var(--bnb);
}
/* Hide Pro-locked rows on mobile */
tbody tr.pro-upsell-row,tbody tr.pro-locked{display:none !important;}
/* Default cell — block layout, label via ::before */
tbody td{
display:block;
border:none;
padding:0;
font-size:12px;
white-space:normal;
text-align:left;
}
tbody td[data-label]::before{
content:attr(data-label);
display:block;
font-size:11px;
color:var(--muted);
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:2px;
opacity:.7;
font-family:var(--font-ui);
font-weight:600;
}
/* % cells stay readable; override the .r/.pc right-align inside cards */
tbody td.pc,tbody td.r,tbody td.price-col{text-align:left;padding:0;}
/* Hide qa-cell, index cell, and sparkbar on mobile cards */
tbody td.qa-cell,
tbody td:nth-child(1),
tbody td:nth-child(2){display:none;}
.sb{display:none;}
/* Restore 14D column — earlier portrait rule hid td:nth-child(7) for the table layout */
#crypto-panel tbody td:nth-child(7){display:block;}
/* Coin cell (3rd td, contains .cc) — full width, anchored to top of card */
tbody td:nth-child(3){
grid-column:1 / -1;
grid-row:1;
align-self:start;
margin-bottom:4px;
}
.tsym{font-size:17px;font-weight:800;letter-spacing:.01em;}
.tname{font-size:11px;color:var(--muted);max-width:none;opacity:.7;}
.cc{gap:10px;}
.ti{width:24px;height:24px;}
/* Score cell (last td, .r or .pro-blur-cell) — overlay top-right of row 1 */
tbody td:last-child{
grid-column:2;
grid-row:1;
text-align:right;
align-self:start;
margin-bottom:4px;
}
tbody td:last-child::before{text-align:right;}
.sw{justify-content:flex-end;}
.sv{font-size:16px;font-weight:700;}
.pct{font-size:12px;}
}
/* ══════════════════════════════════════════════════════════════
MOBILE BOTTOM NAV — FAB 2-1-2 layout
══════════════════════════════════════════════════════════════ */
.mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;background:var(--bg2);border-top:1px solid var(--bdr2);height:60px;flex-shrink:0;align-items:flex-end;justify-content:center;padding:0 4px;gap:0;}
@media(max-width:700px) and (orientation:portrait){.mob-nav{display:flex;}}
.mob-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--muted);font-size:12px;letter-spacing:.12em;font-weight:700;padding:6px 2px 8px;min-height:48px;min-width:44px;transition:color .15s;-webkit-tap-highlight-color:transparent;}
.mob-nav-btn svg{width:20px;height:20px;flex-shrink:0;}
.mob-nav-btn:hover,.mob-nav-btn:active{color:var(--text);}
.mob-nav-btn.active{color:var(--bnb);}
.mob-nav-btn.active svg{filter:drop-shadow(0 0 4px rgba(243,186,47,.35));}
/* FAB — elevated center button */
.mob-nav-fab-spacer{width:64px;flex-shrink:0;}
.mob-nav-fab{
position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
width:56px;height:56px;border-radius:50%;
background:linear-gradient(135deg,var(--bnb),#e8a020);
border:3px solid var(--bg2);
box-shadow:0 4px 16px rgba(243,186,47,.35),0 2px 6px rgba(0,0,0,.4);
color:#111;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
font-family:inherit;font-size:12px;font-weight:800;letter-spacing:.1em;
transition:transform .15s,box-shadow .15s;
-webkit-tap-highlight-color:transparent;
z-index:2;
}
.mob-nav-fab svg{width:22px;height:22px;flex-shrink:0;}
.mob-nav-fab:active{transform:translateX(-50%) scale(.92);}
.mob-nav-fab.active{box-shadow:0 4px 20px rgba(243,186,47,.5),0 2px 8px rgba(0,0,0,.5);}
/* More menu */
.mob-more-backdrop{display:none;position:fixed;inset:0;z-index:298;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);}
.mob-more-backdrop.show{display:block;}
.mob-more-menu{
display:none;position:fixed;bottom:68px;right:8px;z-index:299;
background:var(--bg2);border:1px solid var(--bdr2);border-radius:8px;
box-shadow:0 8px 32px rgba(0,0,0,.6);
min-width:200px;max-height:70vh;overflow-y:auto;
padding:8px 0;
animation:moreSlideUp .2s cubic-bezier(.22,.68,0,1.2) both;
}
.mob-more-menu.show{display:block;}
@keyframes moreSlideUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.mob-more-title{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 14px 8px;font-family:var(--font-ui);}
.mob-more-item{
display:flex;align-items:center;gap:10px;
width:100%;padding:10px 14px;
background:none;border:none;
color:var(--text);font-family:inherit;font-size:12px;font-weight:500;
cursor:pointer;text-align:left;
transition:background .12s;
min-height:44px;
-webkit-tap-highlight-color:transparent;
}
.mob-more-item:hover,.mob-more-item:active{background:var(--bg4);}
.mmi-ico{font-size:15px;width:22px;text-align:center;flex-shrink:0;}
.mob-more-divider{height:1px;background:var(--bdr);margin:4px 12px;}
/* Light theme overrides for new nav */
:root.light .mob-nav{background:rgba(240,250,255,.97);border-top:2px solid rgba(80,190,155,.25);}
:root.light .mob-nav-fab{background:linear-gradient(135deg,var(--bnb),#d49520);border-color:rgba(240,250,255,.97);}
:root.light .mob-more-menu{background:var(--bg3);border-color:rgba(80,190,155,.18);box-shadow:0 8px 32px rgba(0,0,0,.12);}
:root.light .mob-more-item:hover{background:rgba(70,200,155,.08);}
/* ══════════════════════════════
TUTORIAL
══════════════════════════════ */
.tut-backdrop{position:fixed;inset:0;z-index:800;pointer-events:none;}
.tut-backdrop.active{pointer-events:all;}
.tut-hole{
position:fixed;
border-radius:6px;
box-shadow:0 0 0 9999px rgba(0,0,0,.72);
border:2px solid var(--bnb);
box-shadow:0 0 0 9999px rgba(0,0,0,.72),0 0 0 4px rgba(243,186,47,.18),0 0 24px rgba(243,186,47,.35);
transition:all .35s cubic-bezier(.4,0,.2,1);
pointer-events:none;
z-index:801;
}
.tut-box{
position:fixed;
background:var(--bg2);
border:1px solid rgba(255,255,255,.15);
border-radius:6px;
padding:18px 22px 16px;
width:380px;
z-index:802;
box-shadow:0 8px 40px rgba(0,0,0,.7);
transition:left .2s ease,top .2s ease;
font-family:var(--font-ui);
}
.tut-box::before{
content:'';position:absolute;width:10px;height:10px;
background:var(--bg2);border:1px solid rgba(243,186,47,.4);
transform:rotate(45deg);
}
.tut-box.arrow-top::before{top:-6px;left:24px;border-bottom:none;border-right:none;}
.tut-box.arrow-bottom::before{bottom:-6px;left:24px;border-top:none;border-left:none;}
.tut-box.arrow-left::before{left:-6px;top:20px;border-right:none;border-bottom:none;}
.tut-box.arrow-right::before{right:-6px;top:20px;border-left:none;border-top:none;}
.tut-step-label{font-size:12px;letter-spacing:.18em;color:var(--muted);margin-bottom:6px;text-transform:uppercase;font-family:var(--font-ui);}
.tut-title{font-size:18px;font-weight:400;color:#ffffff;margin-bottom:10px;letter-spacing:.01em;font-family:var(--font-display);}
.tut-desc{font-size:13px;color:var(--text);line-height:1.9;margin-bottom:14px;font-family:var(--font-ui);}
.tut-desc strong{color:var(--bnb);}
.tut-desc em{color:var(--green);font-style:normal;}
.tut-disclaimer{background:rgba(255,69,96,.07);border:1px solid rgba(255,69,96,.3);border-radius:4px;padding:12px 14px;margin-bottom:12px;font-size:14px;color:var(--red);line-height:1.9;font-family:var(--font-ui);}
.tut-disclaimer strong{color:var(--red);}
.tut-agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:14px;cursor:pointer;}
.tut-agree input{margin-top:3px;accent-color:var(--bnb);width:14px;height:14px;flex-shrink:0;cursor:pointer;}
.tut-agree-label{font-size:14px;color:var(--muted);line-height:1.7;cursor:pointer;font-family:var(--font-ui);}
.tut-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.tut-dots{display:flex;gap:5px;align-items:center;}
.tut-dot{width:5px;height:5px;border-radius:50%;background:var(--bg4);border:1px solid var(--bdr2);transition:all .2s;}
.tut-dot.active{background:var(--bnb);border-color:var(--bnb);width:14px;border-radius:3px;}
.tut-btns{display:flex;gap:6px;}
.tut-btn{background:none;border:1px solid var(--bdr2);color:var(--muted);font-family:inherit;font-size:12px;padding:6px 14px;cursor:pointer;border-radius:2px;letter-spacing:.08em;transition:all .15s;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.tut-btn:hover{border-color:var(--text);color:var(--text);}
.tut-btn.primary{background:var(--bnbd);border-color:rgba(243,186,47,.5);color:var(--bnb);font-size:12px;}
.tut-btn.primary:hover{background:rgba(243,186,47,.18);border-color:var(--bnb);}
.tut-btn.primary:disabled{opacity:.4;cursor:not-allowed;}
.tut-skip{font-size:12px;color:var(--muted);cursor:pointer;letter-spacing:.06em;text-decoration:underline;background:none;border:none;font-family:inherit;padding:0 12px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.tut-skip:hover{color:var(--text);}
/* Settings modal */
.settings-btn{background:transparent;border:none;color:var(--muted);padding:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:16px;cursor:pointer;border-radius:8px;transition:background .15s,color .15s;}
.theme-btn{background:transparent;border:none;color:var(--muted);padding:0;width:34px;height:34px;font-family:inherit;font-size:15px;cursor:pointer;border-radius:8px;transition:background .15s,color .15s;display:inline-flex;align-items:center;justify-content:center;gap:0;}
.theme-btn #theme-label{display:none;}
.theme-btn:hover{background:var(--bg4);color:var(--text);}
:root.light .theme-btn{color:var(--muted);}
:root.light .theme-btn:hover{background:var(--bg4);color:var(--text);}
.settings-btn:hover{background:var(--bg4);color:var(--text);}
.toggle{position:relative;width:36px;height:20px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:var(--bg4);border:1px solid var(--bdr2);border-radius:20px;cursor:pointer;transition:.2s;}
.toggle-slider::before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;background:var(--muted);border-radius:50%;transition:.2s;}
.toggle input:checked+.toggle-slider{background:var(--bnbd);border-color:rgba(243,186,47,.5);}
.toggle input:checked+.toggle-slider::before{transform:translateX(16px);background:var(--bnb);}
/* ══════════════════════════════
RATIO TRACKER
══════════════════════════════ */
/* Legacy ratio classes kept for tutorial JS reference */
.rt-header-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:4px;flex-wrap:wrap;}
.rt-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.rt-card{min-width:0;background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--card-radius);padding:14px;}
.rt-tf-row{display:flex;align-items:center;gap:5px;margin-bottom:6px;}
.rt-tf-lbl{font-size:12px;color:var(--muted);margin-right:3px;}
.rt-tf-btn.active{background:var(--bnbd);border-color:var(--bnb);color:var(--bnb);font-weight:700;}
.rt-tf-btn:hover:not(.active){border-color:var(--bnb);color:var(--bnb);}
.rt-tf-btn:disabled{opacity:.35;cursor:default;}
.rt-range-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:5px;}
.rt-bar-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4px;}
.rt-ci{min-width:0;}
.rt-ci-full{grid-column:1/-1;}
.rt-refresh-btn:disabled{opacity:.35;cursor:default;}
.rt-star-btn{background:none;border:1px solid var(--bdr2);color:var(--muted);padding:3px 7px;font-size:13px;cursor:pointer;border-radius:3px;transition:all .15s;line-height:1.2;}
.rt-star-btn:hover{border-color:var(--bnb);color:var(--bnb);}
.rt-star-btn.rt-star-active{border-color:var(--bnb);color:var(--bnb);background:var(--bnbd);}
/* ── SWAP TOOL COIN ICONS ── */
.rt-coin-icon{width:22px;height:22px;border-radius:50%;object-fit:cover;background:var(--bg4);flex-shrink:0;border:1px solid rgba(255,255,255,.08);}
.rt-pair-label{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.rt-pair-label .rt-coin-sel{font-size:12px;font-weight:600;color:var(--text);max-width:80px;}
.rt-pair-sep{font-size:16px;color:var(--muted);font-weight:200;padding:0 3px;flex-shrink:0;}
.rt-pair-eq-label{font-size:12px;color:var(--green);font-family:var(--font-mono);font-weight:700;letter-spacing:.05em;flex-shrink:0;}
/* Ratio hero bigger layout */
.rt-hero{display:flex;flex-direction:column;gap:2px;margin:8px 0 5px;}
.rt-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.07em;padding:4px 12px;border-radius:100px;border:1px solid transparent;margin-bottom:6px;}
/* Tighter section label to match tbl-head */
.holdings-section-label{padding:8px 12px 8px 14px;min-height:38px;}
/* tbl-head same visual weight */
.tbl-head{padding:0 14px;height:38px;}
/* Holdings preview in right panel */
.rp-holdings{padding:12px 16px 14px;border-bottom:1px solid var(--bdr);flex-shrink:0;}
.rp-h-title{display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-family:var(--font-ui);}
.rp-h-count{color:var(--bnb);font-size:12px;letter-spacing:.04em;}
.rp-h-grid{display:flex;flex-direction:column;gap:7px;}
.rp-h-empty{font-size:12px;color:var(--muted);font-style:italic;padding:8px 0;text-align:center;border:1px dashed rgba(255,255,255,.07);border-radius:3px;padding:12px 8px;}
.rp-h-tile{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--card-radius);padding:10px 12px;cursor:pointer;transition:border-color .15s;}
.rp-h-tile:hover{border-color:rgba(243,186,47,.35);}
.rp-h-tile-top{display:flex;align-items:center;gap:7px;margin-bottom:5px;}
.rp-h-ico{width:20px;height:20px;border-radius:50%;background:var(--bg4);flex-shrink:0;overflow:hidden;}
.rp-h-ico img{width:100%;height:100%;display:block;}
.rp-h-sym{font-size:12px;font-weight:700;flex:1;font-family:var(--font-mono);}
.rp-h-score{font-size:12px;font-weight:600;font-family:var(--font-mono);}
.rp-h-price{font-size:12px;font-weight:600;font-family:var(--font-mono);margin-bottom:3px;}
.rp-h-stats{display:flex;gap:4px;}
.rp-h-stat{flex:1;background:var(--bg4);border-radius:4px;padding:3px 4px;text-align:center;}
.rp-h-stat-l{font-size:12px;color:var(--muted);letter-spacing:.07em;display:block;}
.rp-h-stat-v{font-size:12px;font-weight:600;font-family:var(--font-mono);}
.rp-h-pnl{font-size:12px;font-weight:600;font-family:var(--font-mono);margin-top:3px;}
.ad-body{display:flex;flex-direction:column;gap:16px;margin-top:auto;padding:18px 16px 14px;}
/* ── ADD HOLDINGS MODAL ── */
#add-holding-modal .modal{border:1px solid rgba(243,186,47,.28);box-shadow:0 0 40px rgba(243,186,47,.08);max-width:460px;}
#add-holding-modal .modal-title{color:var(--bnb);}
.ah-search-wrap{position:relative;margin-bottom:10px;}
.ah-search-input{width:100%;background:var(--bg3);border:1px solid var(--bdr2);color:var(--text);font-family:inherit;font-size:13px;padding:8px 12px;border-radius:3px;outline:none;letter-spacing:.04em;}
.ah-search-input:focus{border-color:var(--bnb);}
.ah-search-input::placeholder{color:var(--muted);letter-spacing:normal;}
.ah-coin-list{max-height:160px;overflow-y:auto;border:1px solid var(--bdr);border-radius:3px;margin-bottom:12px;background:var(--bg3);}
.ah-coin-item{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--bdr);transition:background .1s;}
.ah-coin-item:last-child{border-bottom:none;}
.ah-coin-item:hover{background:rgba(243,186,47,.06);}
.ah-coin-item.selected{background:rgba(243,186,47,.1);border-left:2px solid var(--bnb);}
.ah-coin-ico{width:20px;height:20px;border-radius:50%;background:var(--bg4);flex-shrink:0;overflow:hidden;}
.ah-coin-ico img{width:100%;height:100%;}
.ah-coin-sym{font-size:12px;font-weight:700;flex:1;font-family:var(--font-mono);}
.ah-coin-name{font-size:12px;color:var(--muted);}
.ah-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.ah-field label{display:block;font-size:12px;letter-spacing:.1em;color:var(--muted);margin-bottom:4px;text-transform:uppercase;}
.ah-field input{width:100%;background:var(--bg3);border:1px solid var(--bdr2);color:var(--text);font-family:inherit;font-size:13px;padding:7px 10px;border-radius:3px;outline:none;}
.ah-field input:focus{border-color:var(--bnb);}
.ah-field input::placeholder{color:var(--muted);}
.ah-add-btn{width:100%;padding:10px;background:rgba(243,186,47,.12);border:1px solid rgba(243,186,47,.3);color:var(--bnb);font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.1em;cursor:pointer;border-radius:3px;transition:all .15s;}
.ah-add-btn:hover{background:rgba(243,186,47,.2);border-color:var(--bnb);}
.ah-add-btn:disabled{opacity:.4;cursor:default;}
.ah-selected-coin{display:none;align-items:center;gap:8px;padding:7px 10px;background:rgba(243,186,47,.07);border:1px solid rgba(243,186,47,.2);border-radius:3px;margin-bottom:10px;}
.ah-selected-coin.show{display:flex;}
.ah-sel-clear{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;margin-left:auto;}
/* ── LEFT PANEL TAB BUTTONS (Holdings / Watchlist) ── */
.left-tab-bar{display:flex;border-bottom:1px solid var(--bdr);background:var(--bg2);flex-shrink:0;}
.left-tab-btn{flex:1;padding:7px 4px;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:none;background:none;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:color .15s,border-color .15s;display:flex;align-items:center;justify-content:center;gap:4px;}
.left-tab-btn:hover{color:var(--text);}
.left-tab-btn.active{color:var(--bnb);border-bottom-color:var(--bnb);}
/* ── WATCHLIST / DESIRED HOLDINGS PANEL ── */
.watchlist-panel{display:none;flex-direction:column;flex:1;overflow:hidden;}
.watchlist-panel.show{display:flex;}
.watchlist-scroll{overflow-y:auto;padding:10px 12px;flex:1;}
.watchlist-empty{font-size:12px;color:var(--muted);text-align:center;padding:20px 10px;line-height:2;border:1px dashed rgba(255,255,255,.07);border-radius:3px;}
.wl-tile{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--card-radius);padding:10px 12px;margin-bottom:7px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:border-color .15s;}
.wl-tile:hover{border-color:rgba(167,139,250,.35);}
.wl-tile-ico{width:22px;height:22px;border-radius:50%;background:var(--bg4);overflow:hidden;flex-shrink:0;}
.wl-tile-ico img{width:100%;height:100%;}
.wl-tile-sym{font-size:12px;font-weight:700;flex:1;}
.wl-tile-score{font-size:12px;font-weight:600;padding:2px 6px;border-radius:2px;}
.wl-tile-rm{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;transition:color .15s;}
.wl-tile-rm:hover{color:var(--red);}
.wl-add-btn{width:100%;padding:7px;background:none;border:1px dashed rgba(167,139,250,.25);color:var(--pro);font-family:inherit;font-size:12px;letter-spacing:.1em;cursor:pointer;border-radius:3px;margin-top:6px;transition:all .15s;}
.wl-add-btn:hover{background:rgba(167,139,250,.08);border-color:var(--pro);}
/* ── HOLDINGS PLACEHOLDER TILES (greyed + icon) ── */
.holding-placeholder{background:var(--bg4);border:1px dashed rgba(255,255,255,.07);border-radius:var(--card-radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:70px;cursor:pointer;transition:border-color .15s,background .15s;}
.holding-placeholder:hover{border-color:rgba(243,186,47,.3);background:rgba(243,186,47,.04);}
.holding-placeholder .ph-plus{font-size:22px;color:rgba(255,255,255,.18);line-height:1;}
.holding-placeholder .ph-label{font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.18);text-transform:uppercase;}
/* ── RIGHT PANEL SEPARATOR ── */
.ad-panel{background:var(--bg2);border-left:2px solid rgba(255,255,255,.07);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;position:relative;}
.ad-panel::before{content:'';position:absolute;top:0;left:-1px;width:1px;height:100%;background:linear-gradient(180deg,transparent,rgba(243,186,47,.15) 30%,rgba(167,139,250,.12) 70%,transparent);pointer-events:none;}
/* ── SWAP TOOL TUTORIAL BADGE ── */
.swap-tut-hint{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(0,189,142,.06);border:1px solid rgba(0,189,142,.15);border-radius:8px;font-size:12px;color:var(--green);cursor:pointer;transition:background .15s;margin-bottom:8px;letter-spacing:.04em;}
.swap-tut-hint:hover{background:rgba(0,189,142,.11);}
.swap-tut-hint span.hint-ico{font-size:13px;}
.rt-section-lbl{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:8px 14px 4px;border-top:1px solid var(--bdr);margin-top:2px;}
/* ── SWAP BEST TIME INDICATOR ── */
.rt-timing{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;margin-bottom:10px;border:1px solid;}
.rt-timing.great{background:rgba(0,189,142,.07);border-color:rgba(0,189,142,.25);color:var(--green);}
.rt-timing.good{background:rgba(240,160,48,.06);border-color:rgba(240,160,48,.22);color:var(--amber);}
.rt-timing.wait{background:rgba(240,62,88,.06);border-color:rgba(240,62,88,.2);color:var(--red);}
.rt-timing .tim-ico{font-size:15px;flex-shrink:0;}
.rt-timing .tim-txt{font-size:12px;font-weight:600;flex:1;}
.rt-timing .tim-sub{font-size:12px;color:var(--muted);display:block;font-weight:400;margin-top:1px;}
/* ── ADD HOLDINGS button in leaderboard header ── */
.add-holdings-lb-btn{display:flex;align-items:center;gap:5px;padding:4px 11px;background:rgba(243,186,47,.08);border:1px solid rgba(243,186,47,.28);color:var(--bnb);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.1em;cursor:pointer;border-radius:3px;transition:all .15s;white-space:nowrap;}
.add-holdings-lb-btn:hover{background:rgba(243,186,47,.16);border-color:var(--bnb);}
/* ══════════════════════════════════════════
RATIO TOOL REDESIGN
══════════════════════════════════════════ */
/* Top action bar */
.rt-top-actions{display:flex;gap:5px;margin-bottom:8px;}
.rt-top-actions button{flex:1;justify-content:center;}
.rt-pair-side{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid rgba(130,110,200,.2);border-radius:8px;padding:8px 10px;cursor:pointer;transition:border-color .15s;}
.rt-pair-side:hover{border-color:rgba(130,110,200,.45);}
.rt-coin-icon-lg{width:26px !important;height:26px !important;border-radius:50%;border:1px solid rgba(255,255,255,.1) !important;}
.rt-coin-sel-lg{font-size:12px !important;font-weight:700 !important;max-width:none !important;flex:1;color:var(--text) !important;letter-spacing:.02em;}
.rt-pair-divider{font-size:22px;color:var(--muted);font-weight:200;text-align:center;flex-shrink:0;}
/* Dropdown color scheme matching the tool */
.rt-coin-sel,.rt-coin-sel-lg{
background:transparent;border:none;
color:var(--text);font-family:var(--font-mono);
cursor:pointer;outline:none;
appearance:none;-webkit-appearance:none;
}
.rt-coin-sel option,.rt-coin-sel-lg option{
background:var(--bg2);color:var(--text);
font-family:'Inter',sans-serif;
font-size:12px;padding:4px 8px;
}
.rt-coin-sel optgroup,.rt-coin-sel-lg optgroup{
background:var(--bg);color:var(--muted);
font-size:12px;letter-spacing:.08em;
}
/* CENTERED ratio hero */
.rt-ratio-center{text-align:center;padding:10px 0 4px;display:flex;flex-direction:column;align-items:center;}
.rt-ratio-num{font-size:52px;font-weight:200;letter-spacing:-2px;line-height:1;color:var(--text);font-family:var(--font-mono);display:inline;}
.rt-ratio-num.dim{color:rgba(180,195,215,.4);}
.rt-ratio-unit-x{font-size:28px;font-weight:200;color:var(--muted);display:inline;margin-left:2px;font-family:var(--font-mono);}
.rt-ratio-unit{font-size:12px;color:rgba(180,200,220,.6);margin-top:3px;letter-spacing:.02em;}
.rt-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;padding:5px 14px;border-radius:100px;border:1px solid transparent;}
/* Price cards brighter */
.rt-card-lbl{font-size:12px;color:rgba(180,200,220,.6);letter-spacing:.12em;margin-bottom:4px;text-transform:uppercase;font-weight:700;}
.rt-card-val{font-size:15px;font-weight:700;font-family:var(--font-mono);}
.rt-card-sub{font-size:12px;color:var(--muted);margin-top:2px;}
/* Swap calculator inputs */
.rt-ci label{font-size:12px;color:rgba(180,200,220,.75);display:block;margin-bottom:4px;letter-spacing:.07em;font-weight:500;}
.rt-ci input{width:100%;box-sizing:border-box;font-size:13px;font-family:var(--font-mono);padding:7px 10px;background:var(--bg4);border:1px solid var(--bdr2);border-radius:8px;color:var(--text);outline:none;}
.rt-ci input:focus{border-color:rgba(130,110,200,.6);}
.rt-res-lbl{font-size:12px;color:rgba(180,200,220,.7);margin-bottom:3px;letter-spacing:.1em;font-weight:600;}
.rt-res-val{font-size:18px;font-weight:700;font-family:var(--font-mono);}
.rt-calc-result{display:flex;justify-content:space-between;align-items:flex-end;gap:6px;padding-top:8px;border-top:1px solid rgba(130,110,200,.18);}
/* Refresh + star buttons */
.rt-refresh-btn{background:rgba(130,110,200,.1);border:1px solid rgba(130,110,200,.25);color:rgba(180,200,220,.8);padding:5px 12px;font-family:var(--font-mono);font-size:12px;font-weight:600;cursor:pointer;border-radius:6px;display:flex;align-items:center;gap:4px;transition:all .15s;letter-spacing:.05em;}
.rt-refresh-btn:hover{border-color:rgba(130,110,200,.6);color:#c5b8f5;background:rgba(130,110,200,.18);}
.rt-star-btn{background:rgba(243,186,47,.08);border:1px solid rgba(243,186,47,.25);color:rgba(243,186,47,.8);padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;border-radius:6px;transition:all .15s;font-family:var(--font-mono);letter-spacing:.05em;}
.rt-star-btn:hover{border-color:var(--bnb);color:var(--bnb);background:var(--bnbd);}
.rt-star-btn.rt-star-active{border-color:var(--bnb);color:var(--bnb);background:var(--bnbd);}
.rt-share-btn{background:rgba(29,161,242,.08);border:1px solid rgba(29,161,242,.25);color:rgba(29,161,242,.8);padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;border-radius:6px;display:flex;align-items:center;gap:4px;transition:all .15s;font-family:var(--font-mono);letter-spacing:.05em;}
.rt-share-btn:hover{border-color:rgba(29,161,242,.6);color:#1da1f2;background:rgba(29,161,242,.18);}
/* Timeframe buttons */
.rt-tf-btn{background:transparent;border:1px solid var(--bdr);color:var(--muted);padding:4px 11px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;cursor:pointer;border-radius:6px;transition:all .15s;}
.rt-tf-btn.active{background:var(--bnbd);border-color:var(--bnb);color:var(--bnb);font-weight:700;}
.rt-tf-btn:hover:not(.active){border-color:var(--bnb);color:var(--bnb);}
/* Range bar */
.rt-bar-track{height:3px;background:var(--bg4);border-radius:3px;position:relative;margin-bottom:4px;overflow:visible;}
.rt-bar-fill{height:100%;border-radius:3px;background:var(--green);position:absolute;left:0;top:0;transition:width .5s ease;}
.rt-bar-fill::after{content:'';position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--green);border:1.5px solid var(--bg);box-shadow:0 0 6px rgba(0,189,142,.5);}
.rt-bar-marker{position:absolute;top:50%;transform:translateY(-50%) translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--red);border:1.5px solid var(--bg);transition:left .5s ease;}
/* Footer */
.rt-footer{font-size:12px;color:rgba(90,110,133,.6);margin-top:10px;text-align:center;line-height:1.6;}
/* Chart */
.rt-chart-wrap{position:relative;width:100%;height:140px;margin:4px 0 6px;}
/* Ratio section base */
.ratio-section{background:transparent;padding:10px 14px 12px;border-bottom:1px solid rgba(130,110,200,.18);flex-shrink:0;}
/* Status */
.rt-status{font-size:12px;color:var(--muted);min-height:12px;margin:2px 0;}
.rt-status.ok{color:var(--green);}.rt-status.err{color:var(--red);}.rt-status.warn{color:var(--amber);}
/* Saved pairs */
.rt-saved-wrap{display:flex;flex-wrap:wrap;gap:3px;min-height:14px;margin-bottom:4px;}
.rt-saved-empty{font-size:12px;color:rgba(90,110,133,.6);font-style:italic;}
.rt-saved-chip{display:inline-flex;align-items:center;gap:4px;background:var(--bg3);border:1px solid var(--bdr2);color:var(--text);font-family:var(--font-mono);font-size:12px;padding:2px 5px 2px 7px;border-radius:2px;cursor:pointer;transition:all .15s;}
.rt-saved-chip:hover{border-color:var(--bnb);color:var(--bnb);}
.rt-saved-chip.active{border-color:var(--bnb);color:var(--bnb);background:var(--bnbd);}
.rt-chip-x{font-size:12px;line-height:1;color:var(--muted);padding:0 1px;transition:color .15s;}
.rt-chip-x:hover{color:var(--red);}
/* ══════════════════════════════════════════════════
COIN PAIR TILES — square compact pair display
══════════════════════════════════════════════════ */
.rt-pair-tiles{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:7px;
align-items:center;
margin-bottom:8px;
}
/* Each coin tile — compact square */
.rt-ct{
position:relative;
background:rgba(20,26,36,.9);
border:1px solid rgba(130,110,200,.28);
border-radius:7px;
padding:8px 6px 7px;
cursor:pointer;
text-align:center;
display:flex;flex-direction:column;align-items:center;
gap:3px;
min-height:88px;
transition:border-color .15s,background .15s,transform .1s;
overflow:hidden;
}
.rt-ct::after{content:'▼';position:absolute;bottom:4px;right:6px;font-size:12px;color:rgba(150,150,180,.4);transition:color .15s;}
.rt-ct:hover{border-color:rgba(130,110,200,.6);background:rgba(130,110,200,.08);transform:translateY(-1px);}
.rt-ct:hover::after{color:rgba(130,110,200,.7);}
/* TO tile — blue accent */
.rt-ct-to{border-color:rgba(74,144,217,.28);background:var(--bg3);}
.rt-ct-to:hover{border-color:rgba(74,144,217,.6);background:rgba(74,144,217,.08);}
/* Hidden native select — state-only, not interactive (picker handles UI) */
.rt-ct-sel{
position:absolute;left:-9999px;top:0;
width:1px;height:1px;opacity:0;
pointer-events:none;
z-index:-1;
}
/* Tile content */
.rt-ct-lbl{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.rt-ct-img{width:28px;height:28px;border-radius:50%;background:var(--bg4);border:1px solid rgba(255,255,255,.08);flex-shrink:0;}
.rt-ct-sym{font-size:13px;font-weight:800;font-family:var(--font-mono);color:var(--text);letter-spacing:.02em;line-height:1;}
.rt-ct-price{font-size:12px;font-weight:600;font-family:var(--font-mono);color:rgba(200,215,230,.9);}
.rt-ct-chg{font-size:12px;font-weight:600;font-family:var(--font-mono);}
/* Middle section: live ratio + arrow */
.rt-pair-mid{
display:flex;flex-direction:column;align-items:center;gap:3px;
padding:0 2px;
}
.rt-ct-live-ratio{
font-size:22px;font-weight:300;letter-spacing:-1px;
font-family:var(--font-mono);color:var(--text);line-height:1;
}
.rt-ct-live-x{font-size:12px;color:var(--muted);margin-top:-2px;font-family:var(--font-mono);}
.rt-ct-arrow{font-size:14px;color:rgba(130,110,200,.5);margin-top:1px;}
/* Now ratio display in cards */
#rt-now-ratio-val{font-size:14px;font-weight:700;font-family:var(--font-mono);}
/* ══ PAIR TILES: 2-col wider ══ */
.rt-pair-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.rt-ct{
position:relative;background:rgba(20,26,38,.95);
border:1px solid rgba(130,110,200,.3);border-radius:8px;
padding:10px 8px 9px;cursor:pointer;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:3px;
min-height:90px;
transition:border-color .15s,background .15s,transform .12s;
}
.rt-ct::after{content:'▼ tap to change';position:absolute;bottom:4px;font-size:12px;color:rgba(150,150,180,.35);letter-spacing:.04em;}
.rt-ct:hover{border-color:rgba(130,110,200,.65);background:rgba(130,110,200,.09);transform:translateY(-1px);}
.rt-ct-to{border-color:rgba(74,144,217,.3);background:var(--bg3);}
.rt-ct-to:hover{border-color:rgba(74,144,217,.65);background:rgba(74,144,217,.09);}
.rt-ct-sel{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none;z-index:-1;}
.rt-ct-lbl{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1px;}
.rt-ct-img{width:30px;height:30px;border-radius:50%;background:var(--bg4);border:1px solid rgba(255,255,255,.1);flex-shrink:0;}
.rt-ct-sym{font-size:14px;font-weight:800;font-family:var(--font-mono);color:var(--text);line-height:1;}
.rt-ct-price{font-size:12px;font-weight:600;font-family:var(--font-mono);color:rgba(210,220,235,.9);}
.rt-ct-chg{font-size:12px;font-weight:700;font-family:var(--font-mono);}
/* ══ SWAP ROW: button + badge below tiles ══ */
.rt-swap-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.rt-swap-pair-btn{
flex:1;padding:8px 12px;
background:linear-gradient(135deg,rgba(130,110,200,.25),rgba(130,110,200,.15));
border:1px solid rgba(130,110,200,.5);
color:#c5b8f5;font-family:var(--font-mono);font-size:12px;font-weight:700;
letter-spacing:.08em;cursor:pointer;border-radius:8px;
display:flex;align-items:center;justify-content:center;gap:6px;
transition:all .15s;
}
.rt-swap-pair-btn:hover{background:linear-gradient(135deg,rgba(130,110,200,.4),rgba(130,110,200,.25));border-color:rgba(167,139,250,.8);color:#d8cfff;transform:translateY(-1px);}
.rt-swap-arrows{font-size:18px;display:inline-block;transition:transform .3s;}
.rt-swap-pair-btn:hover .rt-swap-arrows{transform:rotate(180deg);}
.rt-badge{font-size:12px !important;font-weight:700;letter-spacing:.06em;padding:5px 14px !important;border-radius:100px;border:1px solid var(--bdr2);white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;transition:all .4s;}
/* ══ BOLD RATIO NUMBER ══ */
.rt-ratio-center{text-align:center;padding:8px 0 5px;}
.rt-ratio-bold{
font-size:54px;font-weight:800;letter-spacing:-2px;line-height:1;
color:var(--text);font-family:var(--font-mono);
text-shadow:0 2px 20px rgba(200,210,255,.08);
}
.rt-ratio-bold.dim{color:rgba(180,195,215,.35);}
.rt-ratio-bold-x{font-size:20px;font-weight:300;color:var(--muted);font-family:var(--font-mono);margin-top:-4px;}
.rt-ratio-unit{font-size:12px;color:rgba(160,180,200,.65);margin-top:4px;text-align:center;}
/* ══ SWAP CALCULATOR — top, bigger title ══ */
.rt-calc{background:rgba(130,110,200,.07);border:1px solid rgba(130,110,200,.22);border-radius:var(--card-radius);padding:12px 14px;margin-bottom:10px;}
.rt-calc-title{font-size:18px;font-weight:800;letter-spacing:.08em;color:rgba(195,185,255,.95);margin-bottom:12px;text-transform:uppercase;}
.rt-calc-ratios{margin-top:8px;padding-top:6px;border-top:1px solid rgba(130,110,200,.15);display:flex;flex-direction:column;gap:3px;}
.rt-calc-ratio-line{font-size:12px;font-family:var(--font-mono);color:rgba(180,200,220,.75);letter-spacing:.02em;}
.rt-calc-ratio-line span{color:var(--green);font-weight:700;}
/* ══ PERIOD PEAK + CURRENT — matched sizes ══ */
.rt-card-val-lg{font-size:22px !important;font-weight:700 !important;font-family:var(--font-mono);line-height:1.1;}
/* ══ COIN PICKER — BOTTOM SHEET (mobile) / INLINE DROPDOWN (desktop) ══ */
.rt-picker-overlay{
position:fixed;
inset:0;
z-index:500;
display:none;
flex-direction:column;
background:rgba(0,0,0,0.55);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
animation:pickerFadeIn .2s ease;
}
/* Desktop: constrain picker to the right panel instead of fullscreen */
@media(min-width:701px){
.rt-picker-overlay{
position:absolute;
inset:auto 0 0 0;
top:0;
background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
border-radius:8px;
overflow:hidden;
}
}
@keyframes pickerFadeIn{from{opacity:0}to{opacity:1}}
.picker-sheet{
position:absolute;
top:0;left:0;right:0;bottom:0;
max-height:100%;
background:var(--bg2);
border-radius:0;
border-top:none;
display:flex;
flex-direction:column;
animation:pickerFadeIn .2s ease;
}
/* Desktop: fill the panel, rounded corners all around */
@media(min-width:701px){
.picker-sheet{
position:relative;
top:auto;bottom:auto;
max-height:480px;
border-radius:8px;
margin:0;
border:1px solid var(--bdr2);
box-shadow:0 8px 32px rgba(0,0,0,.4);
}
}
@keyframes pickerSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.picker-handle{
width:36px;height:4px;
border-radius:2px;
background:var(--bg4);
margin:12px auto 4px;
flex-shrink:0;
}
@media(min-width:701px){.picker-handle{margin:10px auto 0;}}
.picker-sheet-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 16px 10px;
flex-shrink:0;
}
.rt-picker-title{
font-family:var(--font-mono);font-size:12px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--text);
}
.picker-sheet-close{
width:28px;height:28px;
border-radius:50%;
background:var(--bg4);
border:1px solid var(--bdr2);
display:flex;align-items:center;justify-content:center;
cursor:pointer;font-size:14px;color:var(--muted);line-height:1;
transition:color .15s;
}
.picker-sheet-close:hover{color:var(--text);}
.picker-search-wrap{
padding:0 16px 10px;
flex-shrink:0;
}
.rt-picker-search{
width:100%;
background:var(--bg3);
border:1px solid var(--bdr2);
border-radius:10px;
padding:10px 14px;
font-family:var(--font-mono);
font-size:13px;
color:var(--text);
outline:none;
transition:border-color .15s;
}
.rt-picker-search:focus{border-color:var(--bnb);}
.rt-picker-search::placeholder{color:var(--muted);}
.rt-picker-list{
flex:1;overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
padding:0 8px 80px;
}
@media(min-width:701px){.rt-picker-list{padding:0 8px 20px;}}
.rt-picker-item{
display:flex;align-items:center;gap:10px;padding:9px 8px;
border-radius:8px;cursor:pointer;transition:background .12s;
-webkit-tap-highlight-color:transparent;
}
.rt-picker-item:hover,.rt-picker-item.selected{background:rgba(255,255,255,.06);}
.rt-picker-item.selected .rt-picker-sym{color:var(--bnb);}
.rt-picker-ico{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--bg4);flex-shrink:0;}
.rt-picker-sym{font-size:12px;font-weight:700;font-family:var(--font-mono);color:var(--text);min-width:52px;}
.rt-picker-name{font-size:12px;color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rt-picker-price{font-size:12px;font-weight:700;font-family:var(--font-mono);flex-shrink:0;}
/* ratio-section — normal flow; relative for desktop picker containment */
.ratio-section{position:relative;}
/* ══════════════════════════════════════════════════════════════
COLLAPSIBLE SECTIONS — compact mobile, expandable on tap
══════════════════════════════════════════════════════════════ */
.collapse-hdr{
display:none; /* hidden on desktop by default */
align-items:center;justify-content:space-between;
padding:8px 12px;
background:var(--bg3);border-bottom:1px solid var(--bdr);
cursor:pointer;user-select:none;
transition:background .15s;
-webkit-tap-highlight-color:transparent;
}
.collapse-hdr:hover{background:var(--bg4);}
.collapse-hdr:active{background:var(--bg4);}
.collapse-hdr-left{display:flex;align-items:center;gap:6px;}
.collapse-hdr-icon{font-size:13px;flex-shrink:0;}
.collapse-hdr-title{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-family:var(--font-ui);}
.collapse-hdr-count{font-size:12px;color:var(--bnb);letter-spacing:.04em;font-weight:600;}
.collapse-chevron{
font-size:12px;color:var(--muted);
transition:transform .25s cubic-bezier(.4,0,.2,1);
flex-shrink:0;
}
.collapse-hdr.open .collapse-chevron{transform:rotate(180deg);}
.collapse-body{overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s ease;max-height:none;opacity:1;}
.collapse-body.collapsed{max-height:0 !important;opacity:0 !important;pointer-events:none;}
/* Desktop: force all collapse-body visible regardless of collapsed class */
@media(min-width:701px){
.collapse-body.collapsed{max-height:none !important;opacity:1 !important;pointer-events:auto !important;overflow:visible !important;}
/* Signal Track Record is the exception — on desktop it lives above
the leaderboard in the centre column and MUST collapse so it
doesn't push the table down. Its header stays visible, and its
body honours the collapsed class like on mobile. */
#ch-trackrecord{display:flex;}
#cb-trackrecord.collapsed{max-height:0 !important;opacity:0 !important;pointer-events:none !important;overflow:hidden !important;}
}
/* Mobile portrait: show collapsible headers, collapse sections by default */
@media(max-width:700px) and (orientation:portrait){
.collapse-hdr{display:flex;}
/* What's Hot header — green accent */
.collapse-hdr.hot{background:rgba(0,200,150,.06);border-bottom:1px solid rgba(0,200,150,.15);}
.collapse-hdr.hot .collapse-hdr-title{color:var(--green);}
.collapse-hdr.hot:hover{background:rgba(0,200,150,.10);}
/* Pro promo header — purple accent */
.collapse-hdr.promo{background:rgba(167,139,250,.06);border-bottom:1px solid rgba(167,139,250,.15);}
.collapse-hdr.promo .collapse-hdr-title{color:var(--pro);}
.collapse-hdr.promo:hover{background:rgba(167,139,250,.10);}
/* Swap header — purple accent */
.collapse-hdr.swap{background:rgba(130,110,200,.06);border-bottom:1px solid rgba(130,110,200,.15);}
.collapse-hdr.swap .collapse-hdr-title{color:rgba(130,110,200,.8);}
.collapse-hdr.swap:hover{background:rgba(130,110,200,.10);}
/* Holdings add-form header — gold accent */
.collapse-hdr.holdings{background:rgba(243,186,47,.06);border-bottom:1px solid rgba(243,186,47,.15);}
.collapse-hdr.holdings .collapse-hdr-title{color:var(--bnb);}
.collapse-hdr.holdings:hover{background:rgba(243,186,47,.10);}
}
/* Landscape mobile: also show collapsible headers */
@media(max-height:500px) and (orientation:landscape){
.collapse-hdr{display:flex;}
}
/* Light theme collapsible overrides */
:root.light .collapse-hdr{background:rgba(240,250,255,.8);}
:root.light .collapse-hdr:hover{background:rgba(220,240,250,.9);}
:root.light .collapse-hdr.hot{background:rgba(70,200,155,.10);}
:root.light .collapse-hdr.hot:hover{background:rgba(70,200,155,.16);}
:root.light .collapse-hdr.promo{background:rgba(124,95,214,.06);}
:root.light .collapse-hdr.promo:hover{background:rgba(124,95,214,.10);}
:root.light .collapse-hdr.swap{background:rgba(100,80,180,.06);}
:root.light .collapse-hdr.swap:hover{background:rgba(100,80,180,.10);}
:root.light .collapse-hdr.holdings{background:rgba(180,140,20,.06);}
:root.light .collapse-hdr.holdings:hover{background:rgba(180,140,20,.10);}
/* ══════════════════════════════════════════════════════════════
LIGHT THEME OVERRIDES
══════════════════════════════════════════════════════════════ */
/* ── Light theme: sky blue bg, lollipop pink zebra, mint headers, watermelon right panel ── */
:root.light .topbar{background:rgba(240,250,255,.92);border-bottom:2px solid rgba(80,190,155,.30);}
:root.light .sidebar{background:linear-gradient(180deg,rgba(80,195,155,.18) 0%,rgba(80,195,155,.06) 50%,var(--bg2) 100%);border-right:2px solid rgba(80,190,155,.25);}
:root.light .ad-panel{background:linear-gradient(180deg,rgba(230,70,85,.14) 0%,rgba(230,70,85,.06) 50%,var(--bg2) 100%);border-left:3px solid rgba(230,70,85,.35);box-shadow:-4px 0 20px rgba(230,70,85,.10);}
:root.light thead tr{background:rgb(195,235,220);box-shadow:0 2px 4px rgba(0,0,0,.08);}
:root.light thead th{color:rgba(10,60,45,.9);font-weight:800;}
:root.light tbody tr:nth-child(odd){background:#ffffff;}
:root.light tbody tr:nth-child(even){background:#f8fafc;}
:root.light tbody tr:hover{background:rgba(135,206,235,.15) !important;outline:1px solid rgba(0,150,255,.1);box-shadow:inset 0 0 0 1px rgba(135,206,235,.18),0 0 10px rgba(135,206,235,.08);}
:root.light tbody tr.held{background:rgba(0,153,110,.10);}
:root.light tbody tr.held:hover{background:rgba(0,153,110,.18) !important;outline:1px solid rgba(0,153,110,.15);}
/* Dark-mode explicit row colors — prevents ghost on theme switch */
:root:not(.light) tbody tr:nth-child(odd){background:rgba(255,255,255,.025);}
:root:not(.light) tbody tr:nth-child(even){background:transparent;}
:root:not(.light) tbody tr:hover{background:rgba(130,170,220,.06) !important;outline:1px solid rgba(130,170,220,.06);}
:root.light .tbl-head{background:rgb(195,235,220);}
:root.light .cat-bar{background:rgb(210,240,228);}
:root.light .cat-tab{border-color:rgba(0,0,0,.1);color:rgba(0,0,0,.45);background:rgba(255,255,255,.6);box-shadow:0 1px 3px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.8);}
:root.light .cat-tab:hover{color:#000;border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85);box-shadow:0 2px 5px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.9);}
:root.light .cat-tab.active{color:#0a7e5a;border-color:#0a7e5a;background:rgba(10,126,90,.1);box-shadow:0 2px 6px rgba(10,126,90,.15),inset 0 1px 0 rgba(255,255,255,.5);position:relative;}
:root.light .cat-tab.active::after{background:#0a7e5a;box-shadow:0 0 6px rgba(10,126,90,.4);}
:root.light .bars-col-inner{background:var(--bg3) !important;border:1px solid rgba(80,190,155,.18);}
:root.light .mob-nav{background:rgba(240,250,255,.95);border-top:2px solid rgba(80,190,155,.25);}
:root.light .overlay{background:var(--overlay-bg);}
:root.light .modal{background:var(--bg3);border:1px solid rgba(80,190,155,.20);box-shadow:0 8px 32px rgba(0,0,0,.12);}
:root.light .tile-detail{background:var(--bg3);border:1px solid rgba(80,190,155,.18);box-shadow:0 8px 32px rgba(0,0,0,.10);}
:root.light .rt-tip{background:var(--bg3);color:var(--text);border:1px solid rgba(80,190,155,.18);box-shadow:0 8px 24px rgba(0,0,0,.10);}
:root.light .rt-tip-title{color:var(--bnb);border-bottom-color:var(--bdr);}
:root.light .rt-tip-warning{background:var(--bg4);border-color:var(--bdr);}
:root.light .settings-btn{color:var(--muted);background:transparent;border:none;}
:root.light .tile-placeholder{background:rgba(70,200,155,.08);border-color:rgba(0,153,110,.28);}
:root.light .tile-placeholder:hover{background:rgba(0,153,110,.10);border-color:rgba(0,153,110,.45);}
:root.light .tile-pro-promo{background:linear-gradient(135deg,rgba(124,95,214,.08),rgba(124,95,214,.03));border:1px solid rgba(124,95,214,.18);}
:root.light .ad-donate{background:var(--bg3);border:1px solid rgba(230,70,85,.22);}
:root.light .qa-btn{border-color:rgba(160,120,24,.22);color:rgba(160,120,24,.6);}
:root.light .qa-btn:hover{background:rgba(160,120,24,.10);border-color:var(--bnb);color:var(--bnb);}
:root.light .qa-btn.watch-eye{border-color:rgba(0,0,0,.10);color:var(--muted);opacity:.45;}
:root.light .qa-btn.watch-eye.watching{border-color:rgba(0,153,110,.45);color:var(--green);background:rgba(0,153,110,.10);opacity:1;}
:root.light .bear-banner{background:rgba(217,48,74,.08);border-color:rgba(217,48,74,.25);}
:root.light .scale-banner{background:#FFF3E0;border-color:#FFB74D;color:#5a3e00;}
:root.light .scale-banner strong{color:#333;}
:root.light .scale-close{color:#a06000;}
:root.light .scale-close:hover{color:#5a3e00;}
:root.light .pro-upsell-banner{background:linear-gradient(90deg,rgba(124,95,214,.07),rgba(124,95,214,.03));border-color:rgba(124,95,214,.18);}
:root.light .hvtab{color:var(--muted);border-bottom-color:transparent;}
:root.light .hvtab.active{background:rgba(160,120,24,.10);}
:root.light .hvtab-watch{color:rgba(0,153,110,.65) !important;}
:root.light .hvtab-watch.active{background:rgba(0,153,110,.10) !important;}
:root.light .holdings-section-label{color:var(--muted);}
:root.light input,:root.light select{background:var(--bg3) !important;color:var(--text) !important;border-color:var(--bdr2) !important;}
:root.light .ahm-coin-item{border-color:var(--bdr);}
:root.light .ahm-coin-item:hover{background:rgba(240,165,185,.15);}
:root.light .ahm-coin-item.selected{background:rgba(160,120,24,.10);border-color:rgba(160,120,24,.30);}
:root.light .td-section{border-top-color:var(--bdr);}
:root.light .td-badge.bull{background:rgba(0,153,110,.10);color:var(--green);}
:root.light .td-badge.bear{background:rgba(217,48,74,.10);color:var(--red);}
:root.light .td-badge.neu{background:rgba(0,0,0,.05);color:var(--muted);}
:root.light .td-sh{background:var(--bg2);border-color:var(--bdr);}
:root.light .td-sh:hover{background:rgba(0,0,0,.04);}
:root.light .rt-header-row{background:rgba(70,200,155,.22) !important;}
:root.light .rt-card{background:var(--bg3) !important;border-color:rgba(80,190,155,.18) !important;}
:root.light .rt-from-cell,.rt-to-cell{background:var(--bg2) !important;}
:root.light #tut-box{background:var(--bg3);border-color:rgba(80,190,155,.20);color:var(--text);}
:root.light #tut-backdrop.active{background:rgba(0,0,0,.25);}
:root.light .setting-row{border-bottom-color:var(--bdr);}
:root.light #settings-panel{background:var(--bg3);border-color:rgba(80,190,155,.18);box-shadow:0 8px 32px rgba(0,0,0,.10);}
:root.light .tut-btn{background:var(--bg2);color:var(--text);border-color:var(--bdr2);}
:root.light .tut-btn.primary{background:var(--bnb);color:#fff;}
:root.light .toggle-slider{background:var(--bdr2);}
:root.light .rt-picker-price{color:rgba(40,50,60,.6);}
:root.light .topbar-r .ts{color:var(--muted);}
:root.light .footer{background:rgba(70,200,155,.12);border-top:2px solid rgba(70,190,150,.22);}
:root.light .pct.up{color:var(--green);}
:root.light .pct.dn{color:var(--red);}
:root.light .tile.glow-g{border-color:rgba(0,153,110,.35);box-shadow:0 2px 8px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.06), 0 0 12px rgba(0,153,110,.18), var(--card-inset);}
:root.light .tile.glow-a{border-color:rgba(200,132,32,.35);box-shadow:0 2px 8px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.06), 0 0 12px rgba(200,132,32,.18), var(--card-inset);}
:root.light .tile.glow-r{border-color:rgba(217,48,74,.30);box-shadow:0 2px 8px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.06), 0 0 12px rgba(217,48,74,.14), var(--card-inset);}
:root.light .watchlist-tip{background:var(--bg2);border-bottom-color:var(--bdr);}
:root.light .mob-btc-cell{background:var(--rd);}
:root.light .mob-btc-cell.bull{background:var(--gd);}
:root.light .tile{background:var(--tile-grad), var(--bg3);border-color:rgba(80,190,155,.18);}
:root.light .btn{border-color:rgba(0,0,0,.12);color:var(--muted);}
:root.light .btn:hover{border-color:var(--bnb);color:var(--bnb);}
:root.light .btn.donate{border-color:rgba(230,70,85,.30);color:rgba(230,70,85,.6);}
:root.light .btn.donate:hover{background:rgba(230,70,85,.10);color:rgba(230,70,85,.85);border-color:rgba(230,70,85,.50);}
:root.light .btn.pro-btn{border-color:rgba(124,95,214,.25);}
:root.light .tier-badge.free{background:var(--bg3);border-color:rgba(0,0,0,.08);}
:root.light .copy-btn{background:rgba(160,120,24,.10);border-color:rgba(160,120,24,.25);}
:root.light .community-btn-tg{background:rgba(40,159,217,.10);border-color:rgba(40,159,217,.35);color:#1e7fa8;}
:root.light .community-btn-tg:hover{background:rgba(40,159,217,.20);color:#155e80;}
:root.light .community-btn-dc{background:rgba(88,101,242,.08);border-color:rgba(88,101,242,.25);color:#4951c2;}
:root.light .community-btn-dc:hover{background:rgba(88,101,242,.16);color:#373ea0;}
:root.light .mob-topbar-gear{background:rgba(70,200,155,.14);}
:root.light .mob-topbar-gear:hover{background:rgba(70,200,155,.25);}
/* ── Readability & depth boost ── */
:root.light .asset-mode-bar{background:var(--bg2);border-bottom:1px solid var(--bdr);}
:root.light .asset-mode-btn{color:var(--muted);background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);opacity:1;}
:root.light .asset-mode-btn:hover{background:rgba(0,0,0,.07);opacity:1;}
:root.light .asset-mode-btn.active{color:#000;background:#87CEEB;border-color:#5fb8e0;box-shadow:0 4px 14px rgba(135,206,235,.4);}
:root.light .asset-mode-btn+.asset-mode-btn{border-left:none;}
:root.light .sig-box{font-weight:500;}
:root.light .sig-title{font-weight:700;color:var(--text);}
:root.light .tbl-head{font-weight:700;color:var(--text);}
:root.light .tile{box-shadow:0 2px 8px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.06), var(--card-inset);border:1px solid rgba(80,190,155,.15);}
:root.light .tile .t-sym{font-weight:800;color:var(--text);}
:root.light .tile .t-name{color:var(--muted);font-weight:600;}
:root.light .tile .pct{font-weight:700;}
:root.light .tile .score-pill{font-weight:800;}
:root.light .section-header{font-weight:700;letter-spacing:.12em;color:var(--text);}
:root.light tbody td{font-weight:500;}
:root.light thead th{font-weight:800;letter-spacing:.08em;}
:root.light .score-col{font-weight:800;}
:root.light .holdings-section-label{font-weight:700;color:var(--text);}
:root.light .hvtab{font-weight:700;}
:root.light .topbar{box-shadow:0 2px 8px rgba(0,0,0,.06);}
:root.light .sidebar{box-shadow:2px 0 12px rgba(0,0,0,.04);}
:root.light .sort-hint{color:var(--muted);font-weight:600;}
:root.light .rt-header-row{font-weight:700;}
:root.light .ad-panel .rt-label{font-weight:600;color:var(--text);}
:root.light .keep-free-title{color:var(--text) !important;}
/* ── Swap calculator: darker, bigger, more readable ── */
:root.light .rt-calc{background:rgba(100,80,180,.06);border-color:rgba(100,80,180,.18);}
:root.light .rt-calc-title{font-size:16px;color:rgba(50,30,100,.85);text-shadow:none;}
:root.light .rt-calc label{color:rgba(30,30,60,.7);font-weight:600;}
:root.light .rt-calc input{color:var(--text) !important;font-weight:600;}
:root.light .rt-calc-result{border-top-color:rgba(100,80,180,.15);}
:root.light .rt-calc-result div{color:var(--text);}
:root.light .rt-calc-ratios{border-top-color:rgba(100,80,180,.12);}
:root.light .rt-calc-ratio-line{color:rgba(30,40,60,.65);font-weight:500;}
:root.light .rt-card-val,.rt-card-val-lg{color:var(--text);}
:root.light .ad-panel label{color:rgba(30,30,60,.65);font-weight:600;}
:root.light .ad-panel .rt-card{color:var(--text);}
:root.light .rt-picker-price{color:rgba(30,40,60,.55);}
/* ── Topbar: mint green to match the theme ── */
:root.light .topbar{background:rgba(70,200,155,.14);border-bottom:2px solid rgba(70,190,150,.28);box-shadow:0 2px 10px rgba(70,200,155,.08);}
/* ── 3 Central panels: sticky note schoolbook aesthetic ── */
:root.light .bars-col-inner{
background:linear-gradient(180deg,rgba(255,248,220,.90) 0%,rgba(255,245,210,.70) 100%) !important;
border:1px solid rgba(200,180,120,.30) !important;
border-top:3px solid rgba(200,180,120,.45) !important;
box-shadow:2px 3px 10px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.5) inset !important;
background-image:
linear-gradient(180deg,rgba(255,248,220,.90) 0%,rgba(255,245,210,.70) 100%),
repeating-linear-gradient(transparent, transparent 23px, rgba(140,120,80,.22) 23px, rgba(140,120,80,.22) 24px) !important;
position:relative;overflow:visible;padding-top:14px !important;
}
:root.light .bars-col-inner::before{
content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);
width:16px;height:16px;border-radius:50%;z-index:3;
box-shadow:0 2px 5px rgba(0,0,0,.22), inset 0 -1px 2px rgba(0,0,0,.15), inset 0 2px 4px rgba(255,255,255,.5);
}
:root.light .bars-col-inner:nth-child(1){border-top-color:rgba(0,180,130,.5) !important;}
:root.light .bars-col-inner:nth-child(2){border-top-color:rgba(230,160,40,.5) !important;}
:root.light .bars-col-inner:nth-child(3){border-top-color:rgba(220,60,70,.45) !important;}
:root.light .bars-col-inner:nth-child(1)::before{background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.7), rgba(40,190,140,.9) 60%);}
:root.light .bars-col-inner:nth-child(2)::before{background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.7), rgba(235,175,40,.9) 60%);}
:root.light .bars-col-inner:nth-child(3)::before{background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.7), rgba(225,65,75,.9) 60%);}
:root.light .bar-col-title{color:rgba(80,60,20,.80) !important;border-bottom-color:rgba(0,0,0,.08);}
:root.light td.pc .pct-heat{opacity:.7;}
:root.light .bars-col-inner .sig-tile{background:rgba(255,252,240,.75);border:1px solid rgba(200,180,120,.22);box-shadow:1px 1px 4px rgba(0,0,0,.05);}
/* ── Colorful push-pin on tiles (light mode only) ── */
:root.light .tile::before{
content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);
width:14px;height:14px;border-radius:50%;
box-shadow:0 2px 4px rgba(0,0,0,.18), inset 0 -1px 2px rgba(0,0,0,.12), inset 0 2px 3px rgba(255,255,255,.5);
z-index:2;background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.6), rgba(220,60,70,.85) 60%);
}
:root.light .tile{position:relative;overflow:visible;margin-top:8px;clip-path:none;}
:root.light .tile canvas.sp{clip-path:inset(0 0 0 0 round var(--card-radius));}
:root.light .tile:nth-child(2n)::before{background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.6), rgba(60,160,220,.85) 60%);}
:root.light .tile:nth-child(3n)::before{background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.6), rgba(80,200,130,.85) 60%);}
:root.light .tile:nth-child(4n)::before{background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.6), rgba(230,170,40,.85) 60%);}
:root.light .tile:nth-child(5n)::before{background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.6), rgba(180,100,220,.85) 60%);}
/* ── Tile: torn notebook page feel ── */
:root.light .tile{
background:
repeating-linear-gradient(transparent, transparent 23px, rgba(130,140,180,.14) 23px, rgba(130,140,180,.14) 24px),
linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(245,248,255,.65) 100%) !important;
border-left:3px solid rgba(220,80,90,.22) !important;
border-color:rgba(180,170,150,.20) !important;
border-left-color:rgba(220,80,90,.25) !important;
}
:root.light .tile-placeholder{background:rgba(255,250,230,.5) !important;border-left:3px solid rgba(0,153,110,.15) !important;}
/* ── Tile detail: sticky note / notebook page style ── */
:root.light .tile-detail{
background:linear-gradient(180deg, rgba(255,250,225,.97) 0%, rgba(255,245,210,.95) 100%) !important;
border:1px solid rgba(200,180,120,.35) !important;
border-radius:4px !important;
box-shadow:3px 4px 14px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.5) inset !important;
padding-top:32px !important;
position:fixed;overflow:visible;
}
/* Notebook holes across the top */
:root.light .tile-detail::before{
content:'';position:absolute;top:8px;left:16px;right:16px;height:14px;z-index:3;
background:
radial-gradient(circle 5px at 10% 50%, rgba(200,190,160,.9) 4px, transparent 5px),
radial-gradient(circle 5px at 25% 50%, rgba(200,190,160,.9) 4px, transparent 5px),
radial-gradient(circle 5px at 40% 50%, rgba(200,190,160,.9) 4px, transparent 5px),
radial-gradient(circle 5px at 55% 50%, rgba(200,190,160,.9) 4px, transparent 5px),
radial-gradient(circle 5px at 70% 50%, rgba(200,190,160,.9) 4px, transparent 5px),
radial-gradient(circle 5px at 85% 50%, rgba(200,190,160,.9) 4px, transparent 5px);
}
/* Curled corner bottom-right */
:root.light .tile-detail::after{
content:'';position:absolute;bottom:0;right:0;width:28px;height:28px;z-index:3;
background:linear-gradient(225deg, rgba(221,234,246,.95) 0%, rgba(221,234,246,.95) 48%, rgba(230,210,150,.7) 50%, rgba(245,235,200,.9) 100%);
box-shadow:-1px -1px 3px rgba(0,0,0,.06);
}
/* Red margin line on left */
:root.light .tile-detail{border-left:3px solid rgba(220,70,80,.25) !important;}
/* Section dividers = ruled notebook lines */
:root.light .td-section{border-top:1px solid rgba(140,125,90,.22);padding-top:10px;margin-top:10px;}
:root.light .td-section:first-child{border-top:none;padding-top:0;margin-top:0;}
:root.light .td-section-title{color:rgba(120,90,40,.75);font-weight:800;}
:root.light .td-section-title::after{background:rgba(140,125,90,.22);}
:root.light .td-share-wrap{border-top:1px solid rgba(140,125,90,.22);}
/* Text colours — warm brown tones */
:root.light .tdh-sym{color:rgba(60,40,10,.9);}
:root.light .tdh-name{color:rgba(100,80,40,.6);}
:root.light .tdh-price{color:rgba(40,30,10,.9);}
:root.light .td-close{color:rgba(160,130,60,.5);}
:root.light .td-close:hover{color:rgba(140,80,30,.8);}
:root.light .td-share-label{color:rgba(120,90,40,.65);}
:root.light .td-share-card-btn{background:linear-gradient(135deg,rgba(180,140,30,.2),rgba(180,140,30,.08));border-color:rgba(160,120,20,.5);color:rgba(140,100,10,.9);}
:root.light .td-share-card-btn:hover{background:linear-gradient(135deg,rgba(180,140,30,.35),rgba(180,140,30,.15));border-color:rgba(160,120,20,.7);box-shadow:0 0 14px rgba(180,140,30,.2);}
:root.light .td-sh{background:rgba(255,248,220,.7);border-color:rgba(200,180,120,.25);color:rgba(100,80,40,.6);}
:root.light .td-sh:hover{background:rgba(245,235,200,.9);border-color:rgba(180,150,80,.4);color:rgba(80,60,20,.8);}
/* Score and data sections */
:root.light .td-score-num-val{color:rgba(50,35,10,.85);}
:root.light .td-data-box{background:rgba(255,248,220,.5);border-color:rgba(200,180,120,.20);}
:root.light .td-data-label{color:rgba(120,90,40,.6);}
:root.light .td-data-val{color:rgba(50,35,10,.85);}
/* ═══════════════════════════════════════════════════════════════
NEW SWAP REDESIGN — injected styles
Pair hero, ratio hook, chart header, calc card, picker sheet
═══════════════════════════════════════════════════════════════ */
/* ── Swap card base — wraps each section ──────────────────── */
.swap-card {
background: var(--bg2, var(--bg3));
border: 1px solid var(--bdr);
border-radius: 12px;
overflow: hidden;
position: relative;
margin-bottom: 8px;
}
.swap-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
pointer-events: none;
}
/* ── Pair hero ─────────────────────────────────────────────── */
.new-swap-hero {
padding: 10px 0 8px;
margin-bottom: 4px;
}
.new-swap-hero-label {
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
font-weight: 700;
font-family: var(--font-mono);
}
.new-pair-grid {
display: grid;
grid-template-columns: 1fr 40px 1fr;
align-items: center;
gap: 8px;
max-width: 100%;
overflow: hidden;
}
.new-coin-card {
background: var(--bg3);
border: 1px solid var(--bdr);
border-radius: 8px;
padding: 12px;
cursor: pointer;
transition: all .18s cubic-bezier(0.34,1.56,0.64,1);
position: relative;
user-select: none;
-webkit-tap-highlight-color: transparent;
min-width: 0;
overflow: hidden;
}
.new-coin-card:hover { border-color: var(--bdr2); background: var(--bg4); transform: translateY(-1px); }
.new-coin-card:active { transform: scale(0.97); }
.new-from-card { border-left: 2px solid rgba(212,164,40,.45); }
.new-to-card { border-left: 2px solid rgba(0,189,142,.45); }
.new-coin-badge {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 7px;
font-family: var(--font-mono);
font-weight: 700;
}
.new-tap-hint { font-size: 12px; opacity: .5; }
.new-coin-main {
display: flex;
align-items: center;
gap: 7px;
}
.new-coin-icon-wrap {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--bg4);
border: 1.5px solid var(--bdr2);
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.new-coin-icon-wrap img {
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .3s;
}
.new-coin-info { flex: 1; min-width: 0; overflow: hidden; }
.new-coin-sym {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 800;
color: var(--text);
letter-spacing: .02em;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.new-coin-price {
font-family: var(--font-mono);
font-size: 12px;
color: rgba(200,215,230,.8);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.new-coin-chg {
font-family: var(--font-mono);
font-size: 12px;
margin-top: 2px;
}
.new-swap-dir-btn {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--bg4);
border: 1.5px solid var(--bdr2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
transition: all .2s cubic-bezier(0.34,1.56,0.64,1);
user-select: none;
-webkit-tap-highlight-color: transparent;
color: var(--text2, var(--muted));
margin: 0 auto;
position: relative;
z-index: 2;
}
.new-swap-dir-btn:hover { border-color: var(--bnb); color: var(--bnb); background: rgba(243,186,47,.08); }
.new-swap-dir-btn:active { transform: scale(0.9); }
/* ── Ratio hook ────────────────────────────────────────────── */
.new-ratio-hook {
text-align: center;
padding: 16px 14px 14px;
}
.new-ratio-unit-lbl {
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
font-family: var(--font-mono);
font-weight: 600;
}
/* ── Chart section ─────────────────────────────────────────── */
.new-chart-section {
padding: 14px 12px 10px;
}
.new-chart-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.new-chart-title {
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
font-family: var(--font-mono);
font-weight: 700;
}
/* ── Calculator card ───────────────────────────────────────── */
.new-calc-card {
background: var(--bg3) !important;
border: 1px solid var(--bdr) !important;
border-radius: 6px !important;
padding: 12px 12px 10px !important;
margin-top: 8px !important;
}
.new-amount-input {
width: 100%;
background: var(--bg4);
border: 1px solid var(--bdr2);
border-radius: 4px;
padding: 9px 12px;
font-family: var(--font-mono);
font-size: 18px;
font-weight: 700;
color: var(--text);
outline: none;
transition: border-color .15s;
-webkit-appearance: none;
}
.new-amount-input:focus { border-color: rgba(130,110,200,.7); }
.new-amount-input::placeholder { color: var(--muted); font-size: 13px; }
.new-calc-output {
background: var(--bg4);
border: 1px solid var(--bdr);
border-radius: 4px;
padding: 10px 12px;
margin-bottom: 8px;
text-align: right;
}
.new-calc-out-label {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .14em;
color: var(--muted);
margin-bottom: 4px;
font-weight: 600;
}
/* ── Advanced toggle ───────────────────────────────────────── */
.new-adv-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 0 0;
cursor: pointer;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .1em;
color: var(--muted);
transition: color .15s;
user-select: none;
border-top: 1px solid var(--bdr);
margin-top: 4px;
font-weight: 600;
}
.new-adv-toggle:hover { color: var(--text); }
.new-adv-icon { font-size: 12px; transition: transform .2s; }
.new-adv-icon.open { transform: rotate(90deg); }
.new-adv-panel { display: none; margin-top: 8px; }
.new-adv-panel.open { display: block; }
/* ── Picker bottom-sheet ───────────────────────────────────── */
/* new-picker-sheet removed — picker is now inline in leaderboard */
.new-picker-inner {
background: var(--bg2);
border-radius: 16px 16px 0 0;
border-top: 1px solid var(--bdr2);
max-height: 75vh;
display: flex;
flex-direction: column;
animation: newSheetUp .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes newSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.new-picker-handle {
width: 36px; height: 4px;
border-radius: 2px;
background: var(--bg4);
margin: 10px auto 0;
flex-shrink: 0;
}
.new-picker-search-wrap {
padding: 0 12px 10px;
flex-shrink: 0;
}
.new-picker-sheet .rt-picker-search {
width: 100%;
background: var(--bg3);
border: 1px solid var(--bdr2);
border-radius: 8px;
padding: 10px 14px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text);
outline: none;
}
.new-picker-sheet .rt-picker-search:focus { border-color: var(--bnb); }
.new-picker-sheet .rt-picker-list {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 0 4px 20px;
}
/* ── Light mode adjustments ────────────────────────────────── */
:root.light .new-coin-card { background: var(--bg3); }
:root.light .new-amount-input { background: var(--bg2); border-color: rgba(106,77,192,.25); }
:root.light .new-calc-output { background: var(--bg3); border-color: rgba(106,77,192,.15); }
:root.light .new-picker-inner { background: var(--bg2); }
/* ── Light mode comprehensive ghost-color fixes ─────────────────── */
:root.light .new-coin-card { background:var(--bg3); border-color:var(--bdr2); }
:root.light .new-coin-card:hover { border-color:rgba(135,206,235,.7); background:rgba(135,206,235,.12); transform:translateY(-1px); box-shadow:0 2px 8px rgba(135,206,235,.25); }
:root.light .new-from-card { border-left-color:rgba(180,130,0,.5); }
:root.light .new-from-card:hover { border-left-color:#87CEEB; }
:root.light .new-to-card { border-left-color:rgba(0,140,100,.5); }
:root.light .new-to-card:hover { border-left-color:#87CEEB; }
:root.light .new-swap-dir-btn { background:var(--bg4); border-color:var(--bdr2); color:var(--muted); }
:root.light .new-swap-dir-btn:hover { border-color:rgba(56,162,220,.6); color:rgba(56,162,220,1); background:rgba(56,162,220,.08); }
:root.light .new-ratio-hook { border-color:var(--bdr2); }
:root.light .new-chart-section { background:transparent; }
:root.light .new-calc-card { background:var(--bg3) !important; border-color:var(--bdr2) !important; }
:root.light .new-amount-input { background:var(--bg2); border-color:var(--bdr2); color:var(--text); }
:root.light .new-calc-output { background:var(--bg2); border-color:var(--bdr); }
:root.light .new-adv-toggle { color:var(--muted); border-color:var(--bdr); }
:root.light .rt-picker-overlay { background:rgba(0,0,0,.3); }
:root.light .picker-sheet { background:var(--bg2); }
:root.light .rt-picker-search { background:var(--bg3) !important; color:var(--text); }
:root.light .rt-saved-chip { background:var(--bg3); border-color:var(--bdr2); color:var(--text2); }
:root.light .rt-star-btn { background:rgba(180,130,0,.08); border-color:rgba(180,130,0,.3); color:rgba(180,130,0,.8); }
:root.light .rt-refresh-btn { background:rgba(100,80,200,.06); border-color:rgba(100,80,200,.2); color:var(--muted); }
:root.light .rt-share-btn { background:rgba(29,161,242,.06); border-color:rgba(29,161,242,.2); color:rgba(29,130,200,.8); }
:root.light .rt-calc-ratio-line { color:var(--muted); }
:root.light .rt-calc-ratio-line span { color:var(--bnb); }
:root.light .rt-tf-btn { border-color:var(--bdr2); color:var(--muted); }
:root.light .rt-card { background:var(--bg3); border-color:var(--bdr2); }
:root.light .rt-card-lbl { color:var(--muted); }
:root.light .rt-card-val { color:var(--text); }
:root.light .rt-footer { color:var(--muted); }
:root.light .rt-status { color:var(--muted); }
:root.light .modal { background:var(--bg2); }
:root.light .swap-tut-box { background:var(--bg2); border-color:rgba(180,130,0,.4); }
:root.light .ad-panel { background:var(--bg2) !important; }
:root.light .topbar-search-dropdown { background:var(--bg2); border-color:var(--bdr2); }
:root.light .topbar-search-input { background:var(--bg3); color:var(--text); }
:root.light .topbar-search-result-item { border-color:var(--bdr); }
:root.light .topbar-search-result-item:hover { background:var(--bg3); }
:root.light .mob-search-panel { background:var(--bg2); border-color:var(--bdr2); }
:root.light .mob-search-inner { background:var(--bg3); border-color:var(--bdr2); }
/* ══════════════════════════════════════════════════════════════
BOTTOM-SHEET PICKER — theme overrides
══════════════════════════════════════════════════════════════ */
/* Light mode: swap-card + picker + stat overrides */
:root.light .swap-card { background:var(--bg3); border-color:var(--bdr2); }
:root.light .swap-card::before { background:linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent); }
:root.light .rt-picker-overlay { background:rgba(0,0,0,0.3); }
:root.light .picker-sheet { background:var(--bg2); border-color:var(--bdr2); }
:root.light .picker-handle { background:var(--bg4); }
:root.light .picker-sheet-header{ color:var(--text); }
:root.light .picker-sheet-close { background:var(--bg3); border-color:var(--bdr2); color:var(--muted); }
:root.light .rt-picker-title { color:var(--text); }
:root.light .rt-picker-search { background:var(--bg3) !important; border-color:var(--bdr2) !important; color:var(--text); }
:root.light .rt-picker-item:hover { background:rgba(135,206,235,.15); }
:root.light .rt-picker-item.selected .rt-picker-sym { color:var(--bnb); }
:root.light .rt-picker-sym { color:var(--text); }
:root.light .rt-picker-price { color:var(--muted); }
/* ══════════════════════════════════════════════════════════════
PATCH: Mobile landscape layout — overflow, FAB, panel widths
══════════════════════════════════════════════════════════════ */
@media(max-height:500px) and (orientation:landscape){
/* ── Root: explicit width containment to prevent horizontal overflow ── */
.root {
overflow-x: hidden !important;
width: calc(100vw - 44px) !important;
box-sizing: border-box !important;
}
/* ── Sidebar & panels: constrain to viewport width ── */
.sidebar,
.main-col,
.ad-panel {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
/* ── Holdings panel: was missing right edge, caused overflow ── */
.mob-holdings-panel {
bottom: 0 !important;
left: 44px !important;
right: 0 !important; /* was missing — caused overflow */
width: auto !important;
box-sizing: border-box !important;
}
/* ── Ad panel: reduce excessive bottom padding ── */
.ad-panel {
padding: 8px 10px 20px !important;
min-height: 0 !important;
}
/* ── Holdings tile grid: 3 columns in landscape for better use of width ── */
.tiles-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
/* ── FAB spacer: hide in landscape ── */
.mob-nav-fab-spacer {
display: none !important;
}
/* ── FAB: restyle as regular side-nav button in landscape ── */
.mob-nav-fab {
position: static !important;
transform: none !important;
width: 44px !important;
height: auto !important;
flex: 1 !important;
border-radius: 0 !important;
border: none !important;
border-bottom: 1px solid var(--bdr) !important;
border-right: 3px solid transparent !important;
background: none !important;
box-shadow: none !important;
color: var(--muted) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
padding: 4px 2px !important;
gap: 2px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
z-index: auto !important;
}
.mob-nav-fab svg {
width: 16px !important;
height: 16px !important;
stroke: currentColor !important;
color: inherit !important;
}
.mob-nav-fab:active {
transform: none !important;
}
.mob-nav-fab.active {
border-right-color: var(--bnb) !important;
background: rgba(243,186,47,.06) !important;
color: var(--bnb) !important;
box-shadow: none !important;
}
/* ── Side nav buttons: ensure they fill height correctly ── */
.mob-nav {
overflow: hidden !important;
}
.mob-nav-btn {
border-left: none !important;
box-sizing: border-box !important;
}
/* ── Swap section: tighten padding for landscape height constraint ── */
.ratio-section {
padding: 6px 10px 8px !important;
}
/* ── rt-calc inputs: allow side-by-side in landscape ── */
.rt-calc-inputs {
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
/* ── Chart: slightly shorter in landscape ── */
.rt-chart-wrap {
height: 110px !important;
}
/* ── Pair tiles: compact in landscape ── */
.rt-pair-tiles {
gap: 5px !important;
margin-bottom: 5px !important;
}
.rt-ct {
min-height: 72px !important;
padding: 6px 5px 5px !important;
}
}
/* ══════════════════════════════════════════════════════════════
PATCH: Mobile nav — landscape positioning + portrait scroll fix
══════════════════════════════════════════════════════════════ */
/* ── PORTRAIT: scroll padding so sections aren't hidden behind fixed bottom nav (incl. notch safe area) ── */
@media(max-width:700px) and (orientation:portrait) {
html {
scroll-padding-bottom: calc(68px + env(safe-area-inset-bottom));
}
body {
padding-bottom: calc(68px + env(safe-area-inset-bottom));
}
}
/* ── LANDSCAPE: reset ALL portrait mob-nav properties, then apply column sidebar ──
The portrait base styles (bottom:0, height:60px, align-items:flex-end, border-top)
were bleeding into the landscape override because some properties weren't cancelled.
This block explicitly resets every portrait-only value before setting landscape ones. ── */
@media(max-height:500px) and (orientation:landscape) {
/* Full reset of portrait-only nav properties */
.mob-nav {
bottom: auto !important; /* portrait: bottom:0 → cancel */
height: auto !important; /* portrait: height:60px → cancel */
align-items: stretch !important;/* portrait: align-items:flex-end → cancel */
padding: 0 !important; /* portrait: padding:0 4px → cancel */
border-top: none !important; /* portrait: border-top:1px → cancel */
border-bottom:none !important;
/* Landscape sidebar shape */
display: flex !important;
flex-direction: column !important;
position: fixed !important;
left: 0 !important;
top: 40px !important; /* below fixed topbar */
right: auto !important;
width: 44px !important;
border-right: 1px solid var(--bdr2) !important;
background: var(--bg2) !important;
z-index: 300 !important;
overflow: hidden !important;
}
/* Each button: fill equal height slices of the sidebar */
.mob-nav-btn {
flex: 1 !important;
width: 44px !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 4px 2px !important;
border-bottom:1px solid var(--bdr) !important;
border-right: 3px solid transparent !important;
border-left: none !important;
border-top: none !important;
font-size: 11px !important;
gap: 2px !important;
/* Cancel the portrait absolute FAB positioning that leaks in */
position: static !important;
transform: none !important;
}
.mob-nav-btn svg {
width: 16px !important;
height: 16px !important;
}
.mob-nav-btn.active {
border-right-color: var(--bnb) !important;
background: rgba(243,186,47,.06) !important;
}
/* FAB spacer: hidden in landscape */
.mob-nav-fab-spacer {
display: none !important;
}
/* FAB restyled as regular nav button — cancel portrait FAB styles */
.mob-nav-fab {
display: flex !important;
position: static !important;
transform: none !important;
width: 44px !important;
height: auto !important;
flex: 1 !important;
border-radius: 0 !important;
border: none !important;
border-bottom: 1px solid var(--bdr) !important;
border-right: 3px solid transparent !important;
background: none !important;
box-shadow: none !important;
color: var(--muted) !important;
z-index: auto !important;
}
.mob-nav-fab.active {
border-right-color: var(--bnb) !important;
background: rgba(243,186,47,.06) !important;
color: var(--bnb) !important;
box-shadow: none !important;
}
/* Light theme sidebar */
:root.light .mob-nav {
background: rgba(240,250,255,.97) !important;
border-right: 1px solid rgba(80,190,155,.25) !important;
}
}
/* ══════════════════════════════════════════════════════════════
PROMPT 6 — MOBILE POLISH: spacing, scrolling, safe-areas
══════════════════════════════════════════════════════════════ */
@media(max-width:700px){
/* Overscroll containment for nested scrollers (chained pull-to-refresh on iOS) */
.leaderboard,.tile-detail,.modal,.viral-share-modal,
.sig-tiles-grid,.tiles-scroll,.tiles-scroll-legacy,
#pro-modal-body,#mob-inline-holdings,
.topbar-search-results,.mob-more-menu,
#settings-panel,.rt-picker-list{
overscroll-behavior:contain;
}
/* Modals — clamp height + safe-area on bottom */
.modal{
max-height:90vh !important;
overflow-y:auto !important;
padding-bottom:calc(20px + env(safe-area-inset-bottom)) !important;
}
.viral-share-modal{
max-height:90vh;
overflow-y:auto;
padding-bottom:calc(14px + env(safe-area-inset-bottom)) !important;
}
/* Holdings header — bnb accent + 10px label per spec.
Note: original .mob-holdings-panel was removed; this targets the visible
sidebar holdings header (.holdings-section-label) which is the actual
mobile holdings header. */
.holdings-section-label{
font-size:10px !important;
letter-spacing:.14em !important;
color:var(--bnb) !important;
text-transform:uppercase;
}
.holdings-section-label > span:first-child{color:var(--bnb);}
/* Neon signal section — single border, no decorative animations on mobile */
.neon-section{
border-bottom:1px solid rgba(243,186,47,.3);
}
.neon-section::before,
.neon-section::after{
animation:none !important;
display:none;
}
/* Loading screen — splash canvas was 420×140, overflows on 375px viewports */
#splash-c{max-width:100%;height:auto;}
.lmsg{font-size:12px;}
/* Image placeholder backgrounds — visible while async ![]()
loads */
.ti,.tile-ico,.sig-tile-ico,.am-logo{background:var(--bg4);}
.ti img,.tile-ico img,.sig-tile-ico img,.am-logo img{background:var(--bg4);}
/* Tutorial box — was hardcoded width:380px, overflowed on 375px screens */
.tut-box{width:auto !important;max-width:calc(100vw - 24px) !important;}
}
/* ══════════════════════════════════════════════════════════════════
PHASE 1 — one vertical narrative, with a section rail.
The page was three fixed columns, each scrolling inside its own
viewport-height box: holdings left, signals+leaderboard centre, swap
right. Three scrollbars, three things competing, and nothing telling
the reader what to look at first.
It is now one column that scrolls normally, in the order the product
actually reasons in:
TODAY -> YOURS -> ROTATION -> COINS -> SWAP -> RECORD
Nothing was rebuilt. Every block, every id and every handler is the
one that was already there; .sidebar and .ad-panel keep their class
names because a handful of selectors descend from them. What changed
is the order they appear in and the boxes they used to be trapped in.
Appended deliberately: these are OVERRIDES of the rules above, and
keeping them in one block means the old layout can be read as it was.
══════════════════════════════════════════════════════════════════ */
.root{
display:grid;
grid-template-columns:148px minmax(0,1fr);
height:auto;
max-height:none;
overflow:visible;
align-items:start;
}
.page{min-width:0;display:flex;flex-direction:column;}
/* Sections flow at their natural height — the old columns pinned these
to 100% of a viewport-height box and scrolled inside. */
.rsec{min-width:0;border-bottom:1px solid var(--bdr);}
.rsec:last-child{border-bottom:none;}
.root > .rail + .page .sidebar,
.rsec .sidebar{
height:auto;max-height:none;overflow:visible;
border-right:none;background:none;display:block;
}
.rsec .ad-panel{
height:auto;max-height:none;overflow:visible;
border-left:none;box-shadow:none;background:none;display:block;
}
/* Inner scrollers become natural height: there is only one page scroll
now. The leaderboard is the exception and has to be — 191 rows in the
flow measured 8,933px, which buried SWAP and RECORD below a screen of
table nobody asked to read. It keeps a contained scroll so the section
stays a section. */
.rsec .tiles-scroll{overflow:visible;flex:none;min-height:0;}
.rsec .neon-section{overflow:visible;}
.rsec .leaderboard{
flex:none;min-height:0;
max-height:72vh;overflow-y:auto;
overscroll-behavior:contain;
}
/* ── The rail ──────────────────────────────────────────────────────
Icons on a progress line: the icon says which section, the line and
the sub-label say where you are in a page that is now one long
scroll. Sticky, so it stays with you. */
.rail{
position:sticky;top:0;align-self:start;
height:100vh;
background:var(--bg2);
border-right:1px solid var(--bdr);
display:flex;flex-direction:column;
padding:16px 0;gap:0;
z-index:40;
}
.rail-item{
display:flex;gap:11px;align-items:flex-start;
padding:0 0 0 14px;background:none;border:none;
font-family:inherit;text-align:left;cursor:pointer;
color:var(--muted);
}
.rail-mark{
position:relative;flex-shrink:0;
width:28px;height:28px;border-radius:8px;
background:var(--bg3);border:1px solid var(--bdr);
display:flex;align-items:center;justify-content:center;
color:var(--muted);transition:all .15s;
}
.rail-mark svg{width:15px;height:15px;}
/* the connecting line, drawn from each mark down to the next */
.rail-item:not(.rail-last) .rail-mark::after{
content:'';position:absolute;top:100%;left:50%;
width:2px;height:26px;margin-left:-1px;
background:var(--bdr2);transition:background .15s;
}
.rail-text{display:flex;flex-direction:column;padding-top:3px;padding-bottom:24px;min-width:0;}
.rail-item.rail-last .rail-text{padding-bottom:0;}
.rail-label{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--muted);transition:color .15s;}
.rail-sub{font-size:10px;color:var(--muted);opacity:.7;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rail-item:hover .rail-mark{border-color:var(--bnb);color:var(--text);}
.rail-item:hover .rail-label{color:var(--text);}
.rail-item.on .rail-mark{background:var(--bnbd);border-color:var(--bnb);color:var(--bnb);}
.rail-item.on .rail-label{color:var(--bnb);}
.rail-item.on .rail-mark::after{background:var(--bnb);}
/* ── Mobile: the rail does not survive a narrow screen as a column,
and the bottom nav already does this job. ── */
@media(max-width:900px){
.root{grid-template-columns:1fr;}
.rail{display:none;}
}
/* ── Sections were built for a 310px column; they now have 1290px ──
Flattening the three columns is only half the job. `.tiles-grid` is
repeat(2,1fr), which in a sidebar meant two small cards and at full
width meant two 632px slabs. Each section gets the internal layout
the design asked for, so the extra width becomes structure rather
than stretch. */
/* YOURS: signal, holdings and watchlist all on screen at once.
The tab bar existed because a 310px sidebar could only show one at a
time. At full width both fit, and holding-vs-watching is a comparison
you make by looking at them together, not by toggling. Ten slots each,
the same shape, so the section reads as a pair. */
#sec-yours .sidebar{
display:grid;
grid-template-columns:230px minmax(0,1.8fr) minmax(0,1fr);
gap:0 16px;align-items:start;
padding:12px 16px 16px;
}
/* ONE row of three columns, then the DYOR bar. Every child is placed
explicitly.
These used to span two rows, from when the holdings panel had a header
and a body sitting in separate rows. The header is display:none above
700px so the body auto-placed into row 1, leaving row 2 as a phantom
sized by the leftovers of the two spanning columns. It was invisible
until the rotation column grew past the coins panel: at four rotation
cards it opened a 172px hole between the columns and the red bar, and
at two cards it closed again. Found by measuring the live page in
Daniel's own browser, where the column was tall enough to show it. */
#sec-yours .sig-box{
grid-column:1;grid-row:1;
border-bottom:none;border-radius:10px;
border:1px solid rgba(243,186,47,.18);
}
/* Column 2 is what you are paying attention to — held and watched in one
grid. Column 3 is what the run suggests doing about it. Those two
belong side by side: a rotation candidate is an abstraction until it
is next to the coin you would be rotating out of. */
#sec-yours .collapse-hdr{grid-column:2;grid-row:1;}
#sec-yours #cb-holdings{grid-column:2;grid-row:1;display:block;}
#sec-yours #holdings-crypto{display:block;}
/* flex-direction was an inline style on this div and went with the rest
of them when the two panels became one. Without it the label and the
grid laid out as a ROW: the grid started 102px in and ran out over the
rotation cards. Nothing looked broken, it just sat in the wrong place. */
#sec-yours #my-holdings-panel{display:flex;flex-direction:column;min-width:0;}
#sec-yours .holdings-section-label{padding-left:0;padding-right:0;}
/* Four across, not three. The rotation cards beside it are two across in
a narrower column, so at three the coin tiles read visibly fatter than
the thing they are meant to be compared with. Four lines the two panels
up. */
#sec-yours .tiles-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;}
/* .tiles-scroll is a flex item with the default min-width:auto, so it
refused to go below the grid's min-content and pushed 705px of tiles
through a 615px column and underneath the rotation cards. Nothing was
clipped because the overflow was visible — it just silently overlapped.
Both the scroller and the tiles are allowed to shrink now. */
#sec-yours .tiles-scroll,
#sec-yours .tiles-grid{min-width:0;width:100%;}
#sec-yours .tiles-grid > *{min-width:0;}
/* Four across puts a coin tile at ~155px, and two things inside it were
built for a wider box: the 24H/7D/30D row and the Insight pill. Both
are allowed to shrink here rather than quietly spilling over the
rotation cards next door. */
#sec-yours .tile-perfs{gap:3px;}
#sec-yours .tile-perfs > *{min-width:0;}
#sec-yours .tile .tpf-l{font-size:9px;letter-spacing:0;}
#sec-yours .tile .tpf-v{font-size:10px;}
#sec-yours .tile-insight{min-width:0;}
#sec-yours .insight-pulse{
min-width:0;max-width:100%;gap:3px;
padding:2px 5px;font-size:9px;
}
/* .insight-lbl and .insight-score carry their own 12px, so shrinking the
pill alone did nothing — the text kept its size and spilled. */
#sec-yours .insight-lbl,
#sec-yours .insight-score{font-size:9px;}
#sec-yours .insight-lbl{
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
letter-spacing:.02em;
}
#sec-yours .insight-score{margin-left:0;flex-shrink:0;}
#sec-yours .insight-dot{flex-shrink:0;}
#sec-yours .tiles-scroll{padding:0;}
#sec-yours .rot-beside{grid-column:3;grid-row:1;min-width:0;}
#sec-yours .rot-beside .bar-col-title{
font-size:12px;letter-spacing:.08em;font-weight:700;
padding:0 0 8px;text-transform:uppercase;
}
/* SWAP: everything you set or read sits ABOVE the chart, and the chart
takes the full width underneath.
The markup is a flat stack in DOM order and the stat cards come after
the chart there. Rather than move them in index.html, each child is
placed explicitly here. Grid placement ignores source order, so the
HTML keeps reading the way the tool was built and the page reads the
way the tool is used. */
#sec-swap .ratio-section{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px 16px;align-items:start;
padding:14px 16px 18px;
}
/* Dead in practice — updateProGates() forces it hidden and the tool is
never gated whole — but if it ever comes back it gets its own row
rather than landing on top of the pair picker. */
#sec-swap .swap-pro-gate{grid-column:1 / -1;}
/* The pair block takes two of the three columns and runs down both rows:
the amount, the result, the dollar value, both ratio directions, the
overrides and the share are all one thing now, and they were being
read across a gap. The right column is what the pair is DOING — the
ratio, then the period peak and where it sits now. */
/* Row 1 only. It spanned rows 1 and 2 back when the stat cards sat in
column 3 of row 2; the cards are gone, but the span stayed and put the
bottom 10px of the pair card on top of the status line. */
#sec-swap .new-swap-hero {grid-column:1 / span 2;grid-row:1;}
#sec-swap .new-ratio-hook {grid-column:3;grid-row:1;align-self:stretch;}
#sec-swap .rt-status {grid-column:1 / -1;grid-row:2;}
#sec-swap .rt-saved-wrap {grid-column:1 / -1;grid-row:3;}
#sec-swap .new-chart-section{grid-column:1 / span 2;grid-row:4;min-height:320px;}
#sec-swap .sidebar-donate {grid-column:3;grid-row:4;margin-top:0 !important;}
#sec-swap .rt-footer {grid-column:1 / -1;grid-row:5;}
/* ── Quantity on the pair itself ───────────────────────────────────
The amount used to live only in the calculator, three cards away from
the pair you were choosing. It is entered on the FROM card now and the
result reads back on the TO card. The calculator still owns the
arithmetic; these two boxes only feed and mirror it.
Label above value, not beside it. The pair cards are ~175px wide and
a ratio runs to seven characters, so a row that had to hold both put
the number in 50px and clipped it. */
.new-coin-qty{
display:flex;flex-direction:column;gap:3px;
margin-top:8px;padding:7px 8px 2px;
border-top:1px solid var(--bdr);
}
.new-coin-qty-lbl{
font-size:9px;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted);font-weight:600;white-space:nowrap;
}
.new-coin-qty-inp{
width:100%;min-width:0;
background:var(--bg);border:1px solid var(--bdr);border-radius:6px;
color:var(--text);font-family:var(--font-mono);font-size:15px;font-weight:700;
padding:5px 8px;
}
.new-coin-qty-inp:focus{outline:none;border-color:var(--bnb);}
.new-coin-qty-val{
font-family:var(--font-mono);font-size:15px;font-weight:700;
color:var(--green);
padding:5px 0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* ── What the swap is worth ────────────────────────────────────────
The remains of the SWAP CALCULATOR card, now under the pair. Two
columns on desktop: what it comes to on the left, what you can change
or do with it on the right. */
.swap-detail{padding-top:10px;margin-top:2px;border-top:1px solid var(--bdr);}
.swap-detail-usd{
font-family:var(--font-mono);font-size:20px;font-weight:700;
color:var(--amber);line-height:1.2;min-height:24px;
}
.swap-detail .rt-calc-ratios{margin-top:6px;padding-top:0;border-top:none;}
.swap-detail .new-adv-toggle{margin-top:0;}
.swap-detail .rt-swap-share-btn{margin-top:10px;width:100%;}
@media(min-width:901px){
#sec-swap .swap-detail{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:10px 18px;align-items:start;
}
#sec-swap .swap-detail-usd{grid-column:1;}
#sec-swap .swap-detail .rt-calc-ratios{grid-column:1;margin-top:0;}
#sec-swap .swap-detail .new-adv-toggle{grid-column:2;grid-row:1;}
#sec-swap .swap-detail .new-adv-panel{grid-column:2;grid-row:2;margin-top:0;}
}
/* Two columns, not three: Rotation Opportunities moved into YOURS, and
High Momentum and Worst 30d are a natural pair — the same question
asked from both ends. */
#sec-rotation .bars-cols{padding:0 16px 14px;grid-template-columns:repeat(2,minmax(0,1fr));}
#sec-rotation .neon-section{border-bottom:none;}
/* COINS and RECORD just need breathing room now they are full width. */
#sec-coins .tbl-head{padding-left:16px;padding-right:16px;}
#sec-record .str-section{padding:0 16px;}
/* The donate card lives in the swap grid now — third column, level with
the chart. `margin-top:auto` is inline on it from when it was pushed to
the bottom of a flex sidebar; in a grid cell that is meaningless, and
the padding here is what gives it its own shape beside the chart. */
#sec-swap .sidebar-donate{
padding:0;align-self:stretch;
display:flex;flex-direction:column;
}
#sec-swap .sidebar-donate .ad-donate{flex:1;display:flex;flex-direction:column;justify-content:center;}
@media(max-width:900px){
/* These two carried `display:flex;flex-direction:column;flex:1;
min-height:0;overflow:hidden` as INLINE styles in index.html, left
over from when .root was a viewport-tall three-column box and each
column had to flex inside it. Inline beats any selector, so the
desktop grid above silently never applied and both panels stacked at
the same x. The declarations that still earn their keep live here,
where the phone layout actually wants them. */
#cb-holdings,
#holdings-crypto{display:flex;flex-direction:column;min-height:0;overflow:hidden;}
#sec-yours .sidebar,
#sec-yours #holdings-crypto,
#sec-swap .ratio-section{display:block;padding-left:0;padding-right:0;}
#sec-yours .tiles-grid{grid-template-columns:repeat(2,1fr);}
#sec-yours #my-holdings-panel{display:flex;}
#sec-yours .rot-beside{padding:0 12px 12px;}
}
/* ── Section labels ────────────────────────────────────────────────
The collapse headers that used to name these blocks are display:none
above 700px, so on desktop the page had no section names at all —
every panel arrived without being introduced. These are the labels
from the design, and they are what turns a stack into a sequence. */
.rsec-hdr{
display:flex;align-items:baseline;gap:10px;
padding:18px 16px 10px;flex-wrap:wrap;
}
.rsec-label{
font-size:11px;font-weight:700;letter-spacing:.16em;
color:var(--muted);font-family:var(--font-ui);
}
.rsec-meta{font-size:11px;color:var(--muted);opacity:.75;}
#sec-today .rsec-hdr{padding-top:12px;}
@media(max-width:900px){
.rsec-hdr{padding:14px 12px 8px;}
/* Below 900px the collapse headers come back and name the sections
themselves — two labels would be one too many. */
#sec-yours .rsec-hdr,#sec-rotation .rsec-hdr,#sec-swap .rsec-hdr,#sec-record .rsec-hdr{display:none;}
}
/* ── The document scrolls, not the body ────────────────────────────
html,body were height:100% because .root was a viewport-height box
with three scrollers inside it. With one column that made BODY the
scroll container: document.scrollingElement never moved, window.scrollY
stayed 0, and position:sticky on the rail had no scrollport to stick
against. Content height now drives the document, which is what every
scroll API, anchor and sticky element already expects. */
html,body{height:auto;min-height:100%;}
/* ── Why the rail did not actually stick ───────────────────────────
Line 61 sets `overflow-x:hidden` on html AND body. The html element's
overflow propagates to the viewport, which leaves html itself treated
as visible — but body keeps its own, and a box with a non-visible
overflow on one axis computes `auto` on the other. So BODY became a
scroll container: 3,905px of content in a 3,905px box, no internal
scrolling, and every position:sticky descendant measuring against a
scrollport that never moves. The rail scrolled away with the page.
The viewport already clips horizontally via html. Body needs nothing. */
body{overflow:visible;}
/* The topbar had position:sticky since line 66 and had never once stuck:
a sticky box cannot leave its parent, and is exactly as tall
as the bar inside it. It did not matter while .root was a viewport-tall
box and the page never scrolled. It matters now. The header is what
scrolls, so the header is what sticks. */
header{position:sticky;top:0;z-index:100;}
/* Sit the rail below the bar rather than behind it. --topbar-h is written
by ui.js from the measured header, because the bar wraps to two rows on
narrow widths; the literal is the desktop fallback for the first paint. */
.rail{
top:var(--topbar-h,45px);
height:calc(100vh - var(--topbar-h,45px));
}
/* ── The briefing ───────────────────────────────────────────────────
EIGHT readings at the top of TODAY, above the ticker, in two rows of
four.
Row one is the MACRO BACKDROP — gold, silver, oil, the dollar index.
These were fetched every sync from 2026-09-06 and rendered NOWHERE
until 2026-09-11; they are what the score's relative-strength layer
measures each coin against, so a visitor should be able to see them.
Row two is the NETWORK: what is securing it, who is using it, what is
committed to it, and what is sitting in dollars waiting.
Each carries a sparkline of its own daily series. Filled by
renderBriefing(); cells with no value are dropped, and a cell with no
series simply renders without a chart. */
.briefing{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:0 1px;background:var(--bdr);
border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);
margin:0 0 2px;
}
.bf-cell{background:var(--bg2);padding:10px 16px 11px;min-width:0;}
.bf-k{
font-size:10px;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);font-weight:700;margin-bottom:3px;
}
.bf-v{
font-family:var(--font-mono);font-size:20px;font-weight:700;
color:var(--text);line-height:1.1;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bf-u{font-size:12px;font-weight:600;color:var(--muted);margin-left:2px;}
.bf-d{font-family:var(--font-mono);font-size:11px;font-weight:700;}
.bf-d.up{color:var(--green);}
.bf-d.dn{color:var(--red);}
.bf-d-note{font-size:10px;color:var(--muted);opacity:.75;margin-top:3px;line-height:1.35;}
/* Sparkline under each briefing cell. Fixed height, full width, no
library: the data is a plain array and the mark is one .
preserveAspectRatio is none on purpose — the shape of the move is the
point, not its true aspect. */
.bf-spark{display:block;width:100%;height:26px;margin:5px 0 1px;overflow:visible;opacity:.9;}
.bf-cell:hover .bf-spark{opacity:1;}
/* Its own full-width row under the cells, so the age of the reading is
attached to all four rather than to the last one. */
.bf-age{
grid-column:1 / -1;background:var(--bg2);
padding:5px 16px 7px;font-size:10px;color:var(--muted);opacity:.7;
letter-spacing:.04em;
}
@media(max-width:900px){
.briefing{grid-template-columns:repeat(2,minmax(0,1fr));}
.bf-cell{padding:9px 12px 10px;}
.bf-v{font-size:17px;}
.bf-age{padding:5px 12px 7px;}
}
/* ── A narrower page ────────────────────────────────────────────────
The layout stretched to whatever the monitor was, which on a wide
screen put the rail and the leaderboard's last column nearly a metre
apart and left the eye no centre to return to. Capped and centred.
The bar keeps its full-width background and constrains its contents
to the same measure, so the chrome frames the page rather than
floating away from it. */
.root{max-width:1600px;margin:0 auto;}
.topbar{max-width:1600px;margin:0 auto;width:100%;box-sizing:border-box;}
header{background:var(--bg2);}
/* ── A watched coin ─────────────────────────────────────────────────
Same grid as the coins you hold, deliberately quieter: no profit line,
because there is no position, and a marker so the difference is never
in doubt. */
.tile-watch{border-style:dashed;}
.tile-watch-badge{
font-size:11px;line-height:1;opacity:.75;margin-left:4px;
flex-shrink:0;
}
.tile-watch-lbl{
font-size:9px;letter-spacing:.09em;text-transform:uppercase;
color:var(--green);opacity:.8;font-weight:700;
}
/* ── Swap: one place for the actions ────────────────────────────────
Save pair and Refresh were a full-width strip halfway down the tool
while Share sat in the panel beside the pair. Three buttons, one
place, under the thing they act on. */
#sec-swap .rt-top-actions{display:flex;gap:6px;margin:0;padding:0;}
/* ── The pair, read as a pair ────────────────────────────────────────
FROM and TO were two cards at opposite ends of a wide row with the ⇄
marooned between them, and each coin's icon sat on its own outer edge
— the two things being exchanged pointed away from each other. The
cards close up, and the FROM card mirrors so its icon sits on the
inside. BNB and SOL now face across the arrow. */
#sec-swap .new-pair-grid{grid-template-columns:1fr 34px 1fr;gap:5px;}
#sec-swap .new-from-card .new-coin-main{flex-direction:row-reverse;}
#sec-swap .new-from-card .new-coin-info{text-align:right;}
#sec-swap .new-from-card .new-coin-badge{justify-content:flex-start;flex-direction:row-reverse;}
#sec-swap .new-from-card .new-coin-qty{align-items:flex-end;}
#sec-swap .new-from-card .new-coin-qty-inp{text-align:right;}
/* ── Swap: the icon toolbar (option C) ───────────────────────────────
Save, refresh and share sit on the pair card's own header. Three
identical squares from one stroke set, so the block has exactly one
control shape in it. */
.swap-hero-head{
display:flex;align-items:center;justify-content:space-between;
gap:12px;margin-bottom:10px;
}
.swap-hero-head .new-swap-hero-label{margin-bottom:0;}
.rt-icon-btn{
width:30px;height:30px;flex:0 0 30px;padding:0;
display:inline-flex;align-items:center;justify-content:center;
background:var(--bg3);border:1px solid var(--bdr2);border-radius:7px;
color:var(--muted);cursor:pointer;position:relative;
transition:color .15s,border-color .15s,background .15s;
}
.rt-icon-btn svg{width:14px;height:14px;display:block;}
.rt-icon-btn:hover{color:var(--text);border-color:rgba(255,255,255,.2);background:var(--bg4);}
.rt-icon-btn:focus-visible{outline:2px solid var(--bnb);outline-offset:2px;}
.rt-icon-btn:disabled{opacity:.45;cursor:default;}
/* Saved fills the star rather than relabelling the button. */
.rt-icon-btn.rt-star-active{color:var(--bnb);border-color:rgba(212,164,40,.4);background:var(--bnbd);}
.rt-icon-btn.rt-star-active svg{fill:currentColor;}
/* An icon needs its name on hover and on keyboard focus, not only on hover. */
.rt-icon-btn::after{
content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);right:0;
white-space:nowrap;font-family:var(--font-ui);font-size:11px;letter-spacing:.02em;
background:var(--tooltip-bg);border:1px solid var(--bdr2);color:var(--text);
padding:4px 8px;border-radius:5px;opacity:0;pointer-events:none;
transition:opacity .14s;z-index:60;
}
.rt-icon-btn:hover::after,.rt-icon-btn:focus-visible::after{opacity:1;}
@media(hover:none){.rt-icon-btn::after{display:none;}}
/* ── Swap: the readings, without their boxes ─────────────────────────
Two stat cards became a list inside the ratio card. Label left, value
right, hairline between. "Current" is not here because the number
directly above it is the same number. */
.rt-reads{
margin-top:14px;padding-top:4px;border-top:1px solid var(--bdr);
text-align:left;
}
.rt-read{
display:flex;align-items:baseline;justify-content:space-between;gap:10px;
padding:8px 0;border-bottom:1px solid var(--bdr);
}
.rt-read:last-child{border-bottom:none;}
.rt-read-k{
font-size:10px;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);font-weight:700;
}
.rt-read-v{
font-family:var(--font-mono);font-size:16px;font-weight:700;
color:var(--text);font-variant-numeric:tabular-nums;
}
.rt-read-v.hi{color:var(--green);}
/* The range badge is a reading, not a control: no border, no fill, no
radius. js/ratio.js still sets its colour, which carries the
direction. */
#sec-swap .rt-badge{
display:inline-flex;align-items:center;gap:6px;
margin-top:10px;padding:0;
background:none !important;border:none !important;border-radius:0;
font-size:11px;font-weight:600;letter-spacing:.02em;
}
#sec-swap .rt-badge::before{
content:'';width:5px;height:5px;border-radius:50%;
background:currentColor;flex-shrink:0;
}
/* ── The rail's one ask ──────────────────────────────────────────────
Pushed to the foot of the rail with auto margin, and set apart from
the section list by a rule, because it is not a place on the page. */
.rail-support{
margin-top:auto;
display:flex;gap:11px;align-items:center;
padding:12px 14px 2px;background:none;border:none;
border-top:1px solid var(--bdr);
font-family:inherit;text-align:left;cursor:pointer;
color:var(--muted);transition:color .15s;
}
.rail-support .rail-text{padding-bottom:0;padding-top:0;}
.rail-support .rail-label{color:var(--bnb);}
.rail-support .rail-sub{white-space:nowrap;}
.rail-support-icon{
width:26px;height:26px;flex-shrink:0;border-radius:7px;
display:grid;place-items:center;font-size:13px;
background:var(--bnbd);border:1px solid rgba(212,164,40,.3);
}
.rail-support:hover .rail-sub{color:var(--text);}
.rail-support:hover .rail-support-icon{border-color:var(--bnb);}
.rail-support:focus-visible{outline:2px solid var(--bnb);outline-offset:-2px;}
/* ── The remove × was sized for a thumb ──────────────────────────────
44px of minimum touch target inside a 155px tile left the symbol about
one character wide, which is why the grid read O / R. / F. / B. On a
pointer the target can be the glyph; the phone layout keeps its 44px. */
@media(min-width:901px){
#sec-yours .tile-top{gap:5px;}
#sec-yours .tile-rm{min-width:20px;min-height:20px;font-size:14px;}
#sec-yours .tile-sym{font-size:12px;}
}
/* ── The DYOR note, across the section ───────────────────────────────
Full width at the foot of YOURS. In the 230px signal column the same
two sentences ran to five lines and left the other two columns short
by that much. */
#sec-yours .signal-dyor{
grid-column:1 / -1;grid-row:2;
margin-top:14px;padding:8px 12px;
background:rgba(239,68,68,.05);
border:1px solid rgba(239,68,68,.16);
border-radius:6px;
font-size:12px;line-height:1.6;color:var(--muted);
}
#sec-yours .signal-dyor .dyor-flag{color:var(--red);font-weight:600;}
@media(max-width:900px){
#sec-yours .signal-dyor{margin:12px 12px 0;}
}
/* ══════════════════════════════════════════════════════════════════
ADD TO HOLDINGS — the swap panel's control system, applied here.
One 7px radius, 32px controls, one filled primary. The old box had
four radii and three input heights in 440px, and its confirm was a
tinted outline, which is the treatment we removed from Save pair.
══════════════════════════════════════════════════════════════════ */
.ahm-modal{
max-width:416px;position:relative;
border:1px solid var(--bdr2);border-radius:12px;
box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.ahm-title{color:var(--bnb);font-size:15px;font-weight:700;letter-spacing:.02em;}
.ahm-sub{font-size:12px;color:var(--muted);margin:4px 0 12px;line-height:1.5;}
.ahm-x{
position:absolute;top:10px;right:10px;
width:30px;height:30px;border-radius:7px;padding:0;
display:inline-flex;align-items:center;justify-content:center;
background:var(--bg3);border:1px solid var(--bdr2);color:var(--muted);
cursor:pointer;transition:color .15s,border-color .15s,background .15s;
}
.ahm-x svg{width:14px;height:14px;display:block;}
.ahm-x:hover{color:var(--text);border-color:rgba(255,255,255,.2);background:var(--bg4);}
.ahm-x:focus-visible{outline:2px solid var(--bnb);outline-offset:2px;}
.ahm-coin-search{
width:100%;height:32px;box-sizing:border-box;
border-radius:7px;border:1px solid var(--bdr2);
background:var(--bg);color:var(--text);
font-family:var(--font-ui);font-size:12px;padding:0 10px;
}
.ahm-coin-search:focus{outline:none;border-color:var(--bnb);}
.ahm-coin-list{
border:1px solid var(--bdr);border-radius:7px;margin-top:10px;
max-height:186px;overflow-y:auto;overscroll-behavior:contain;
}
.ahm-grp{
font-family:var(--font-mono);font-size:9.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--muted);
padding:7px 10px 5px;background:var(--bg3);
border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:1;
}
.ahm-grp.watch{color:var(--green);}
.ahm-coin-item{
display:flex;align-items:center;gap:9px;padding:8px 9px;
cursor:pointer;min-width:0;transition:background .12s;
}
.ahm-coin-item + .ahm-coin-item{border-top:1px solid var(--bdr);}
.ahm-coin-item:hover{background:var(--bg3);}
.ahm-coin-item.selected{background:var(--bnbd);}
.ahm-coin-ico{
width:22px;height:22px;border-radius:50%;overflow:hidden;
background:var(--bg4);flex-shrink:0;
}
.ahm-coin-ico img{width:100%;height:100%;}
.ahm-coin-who{display:flex;flex-direction:column;min-width:0;flex:1;}
.ahm-coin-name{font-size:12.5px;font-weight:700;color:var(--text);}
.ahm-coin-sub{
font-size:10.5px;color:var(--muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ahm-coin-sub .up{color:var(--green);}
.ahm-coin-sub .dn{color:var(--red);}
.ahm-chip{
font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
padding:2px 6px;border-radius:4px;flex-shrink:0;white-space:nowrap;
background:rgba(135,206,235,.1);color:#87CEEB;
}
.ahm-chip.insight-buy{background:rgba(16,185,129,.12);color:var(--green);}
.ahm-chip.insight-warn{background:rgba(239,68,68,.11);color:var(--red);}
.ahm-scr{
font-family:var(--font-mono);font-size:13px;font-weight:700;
font-variant-numeric:tabular-nums;flex-shrink:0;width:24px;text-align:right;
}
.ahm-scr.hi{color:var(--green);}
.ahm-scr.md{color:var(--amber);}
.ahm-scr.lo{color:var(--red);}
.ahm-empty{padding:14px;font-size:12px;color:var(--muted);text-align:center;line-height:1.9;}
.ahm-empty span{font-size:11px;opacity:.7;}
.ahm-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.ahm-field label{
display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
color:var(--muted);font-weight:700;margin-bottom:4px;
}
.ahm-field input{
width:100%;height:32px;box-sizing:border-box;
border-radius:7px;border:1px solid var(--bdr2);
background:var(--bg);color:var(--text);
font-family:var(--font-mono);font-size:13px;padding:0 10px;
}
.ahm-field input:focus{outline:none;border-color:var(--bnb);}
/* ── The preview ──────────────────────────────────────────────────
Money figures come from holdingPL() in js/holdings.js, the function
the real tile calls. A row is absent, never dashed, when its inputs
are missing. */
.ahm-preview{
margin-top:12px;padding:12px;
background:var(--bg3);border:1px solid var(--bdr2);border-radius:10px;
}
.ahm-pv-cap{
font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--muted);font-weight:700;margin-bottom:9px;
}
.ahm-pv-top{display:flex;align-items:center;gap:9px;}
.ahm-pv-rows{margin-top:9px;}
.ahm-pv-row{
display:flex;align-items:baseline;justify-content:space-between;gap:10px;
padding:7px 0;border-bottom:1px solid var(--bdr);
}
.ahm-pv-row:last-child{border-bottom:none;}
.ahm-pv-k{
font-size:10px;letter-spacing:.11em;text-transform:uppercase;
color:var(--muted);font-weight:700;
}
.ahm-pv-v{
font-family:var(--font-mono);font-size:14px;font-weight:700;
color:var(--text);font-variant-numeric:tabular-nums;
}
.ahm-pv-v.up{color:var(--green);}
.ahm-pv-v.dn{color:var(--red);}
.ahm-pv-note{
display:flex;align-items:flex-start;gap:6px;margin-top:9px;
font-size:11px;color:var(--muted);line-height:1.5;
}
.ahm-pip{
width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:5px;
background:#87CEEB;
}
.ahm-pip.insight-buy{background:var(--green);}
.ahm-pip.insight-warn{background:var(--red);}
.ahm-confirm-btn{
width:100%;height:34px;margin-top:12px;
border-radius:7px;border:1px solid var(--bnb);
background:var(--bnb);color:#120d02;
font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.06em;
cursor:pointer;transition:background .15s,border-color .15s;
}
.ahm-confirm-btn:hover:not(:disabled){background:#e2b435;border-color:#e2b435;}
.ahm-confirm-btn:disabled{
background:transparent;border-color:var(--bdr2);color:var(--muted);cursor:default;
}
.ahm-confirm-btn:focus-visible{outline:2px solid var(--bnb);outline-offset:2px;}