@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
:root {
  /* Overlay layers */
  --z-overlay: 400;
  --z-spotlight: 1000; /* Tutorial spotlights/guided help */
  /* System layers */
  --z-critical: 2000; /* Critical system notifications */
  /* spacing */
  --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem;
  --spacing-6: 1.5rem; --spacing-8: 2rem; --spacing-12: 3rem; --spacing-16: 4rem; --spacing-20: 5rem;
}
:root {
  --background:#060d16; --foreground:#d8dce6; --surface:#10141c; --surface-foreground:#d8dce6;
  --sidebar:#0b1724; --sidebar-foreground:#c8ceda; --card:#121720; --card-foreground:#e2e6ee;
  --popup:#171c26; --popup-foreground:#eef1f6; --primary:#ffb342; --primary-foreground:#fff;
  --secondary:#1c2330; --secondary-foreground:#d5dae5; --accent:#ffb342; --accent-foreground:#fff;
  --muted:#171c25; --muted-foreground:#8fa2b8; --success:#16c784; --success-foreground:#061a12;
  --error:#f23645; --error-foreground:#fff; --warning:#f5b83b; --warning-foreground:#201500;
  --info:#ffb342; --info-foreground:#fff; --info-hover:#3d70ff; --info-active:#1f4fd8; --border:#203343;
  --font-family-base:'IBM Plex Sans',sans-serif; --font-family-display:'Bricolage Grotesque',sans-serif;
  --font-family-monospace:'IBM Plex Mono',monospace; --font-family-cursive:cursive;
  --shadow:none; --shadow-md:0 6px 20px rgba(0,0,0,.25); --shadow-lg:0 14px 40px rgba(0,0,0,.4);
  --shadow-focus:0 0 0 2px rgba(41,98,255,.35); --radius-sm:3px; --radius:5px; --radius-md:7px; --radius-lg:10px; --radius-full:999px;
  --animation-duration-fast:100ms; --animation-duration-normal:180ms; --animation-duration-slow:300ms;
  --chart-color-1:#16c784; --chart-color-2:#f23645; --chart-color-3:#ffb342; --chart-color-4:#f5b83b; --chart-color-5:#8b5cf6;
}
.dark { --background:#060d16; --foreground:#d8dce6; --surface:#10141c; --surface-foreground:#d8dce6; --sidebar:#0b1724; --sidebar-foreground:#c8ceda; --card:#121720; --card-foreground:#e2e6ee; --popup:#171c26; --popup-foreground:#eef1f6; --primary:#ffb342; --primary-foreground:#fff; --secondary:#1c2330; --secondary-foreground:#d5dae5; --accent:#ffb342; --accent-foreground:#fff; --muted:#171c25; --muted-foreground:#8fa2b8; --success:#16c784; --success-foreground:#061a12; --error:#f23645; --error-foreground:#fff; --warning:#f5b83b; --warning-foreground:#201500; --info:#ffb342; --info-foreground:#fff; --info-hover:#3d70ff; --info-active:#1f4fd8; --border:#203343; }
.app{height:100vh;background:var(--background);color:var(--foreground);font:13px var(--font-family-base);overflow:hidden}.app button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer}.top{height:48px;display:flex;align-items:center;border-bottom:1px solid var(--border);padding:0 10px;gap:12px}.brand{display:flex;align-items:center;gap:8px;font-family:var(--font-family-display);font-size:16px;min-width:150px}.mark{width:27px;height:27px;border-radius:6px;background:var(--primary);display:grid;place-items:center;color:white;font-weight:700}.symbol{height:34px;display:flex;align-items:center;gap:7px;padding:0 9px!important;border:1px solid var(--border)!important;border-radius:5px!important}.coin,.bigCoin{color:#f5b83b}.dim{color:var(--muted-foreground);font-size:11px}.search{margin:auto;display:flex;align-items:center;gap:8px;width:min(360px,30vw);height:31px;padding:0 10px;border:1px solid var(--border);border-radius:5px;color:var(--muted-foreground);background:var(--surface)}.search kbd{margin-left:auto;font-size:10px}.topActions{display:flex;align-items:center;gap:3px}.topActions button{height:31px;padding:0 9px}.publish{background:var(--primary)!important;color:white!important;border-radius:5px}.mobileMenu{display:none}.toolbar{height:38px;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 9px;gap:4px}.toolbar button,.tfs button{height:28px;padding:0 8px;border-radius:4px}.toolbar button:hover,.drawbar button:hover,.topActions button:hover{background:var(--muted)}.active{background:#23304c!important;color:#7da0ff!important}.sep{height:18px;width:1px;background:var(--border);margin:0 5px}.grow{flex:1}.workspace{height:calc(100vh - 87px);display:grid;grid-template-columns:42px minmax(0,1fr) 280px}.drawbar{border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding-top:6px;gap:3px;background:var(--sidebar)}.drawbar button{width:32px;height:32px;border-radius:4px}.drawbar span{flex:1}.center{min-width:0;display:flex;flex-direction:column}.instrument{height:50px;border-bottom:1px solid var(--border);padding:7px 12px;box-sizing:border-box}.instrument span{color:var(--muted-foreground)}.ohlc{display:flex;gap:13px;margin-top:5px;font:10px var(--font-family-monospace)}.ohlc b{color:#aeb6c5}.green{color:var(--success)!important}.red{color:var(--error)!important}.chartWrap{position:relative;flex:1;min-height:260px}.chart{position:absolute;inset:0;width:calc(100% - 54px);height:calc(100% - 24px)}.priceScale{position:absolute;right:0;top:0;bottom:24px;width:54px;border-left:1px solid var(--border);display:flex;flex-direction:column;justify-content:space-around;color:var(--muted-foreground);font:10px var(--font-family-monospace);padding-left:6px;box-sizing:border-box}.timeScale{position:absolute;left:0;right:54px;bottom:0;height:24px;border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:center;color:var(--muted-foreground);font:10px var(--font-family-monospace)}.watchlist{border-left:1px solid var(--border);background:var(--sidebar);overflow:auto}.watchHead{height:42px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.watchHead div{display:flex}.columns{height:26px;display:grid;grid-template-columns:1fr 75px 54px;align-items:center;padding:0 8px 0 32px;color:var(--muted-foreground);font-size:10px;border-bottom:1px solid var(--border)}.watchRow{width:100%;display:grid;grid-template-columns:18px 1fr 74px 52px;align-items:center;text-align:left;padding:8px 7px!important;border-bottom:1px solid #171d27!important}.watchRow:hover{background:var(--muted)}.watchRow div{min-width:0}.watchRow b,.watchRow span,.watchRow strong{font:11px var(--font-family-monospace)}.watchRow small{display:block;color:var(--muted-foreground);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.details{padding:15px 12px;display:grid;grid-template-columns:30px 1fr;gap:5px 8px;border-top:1px solid var(--border);margin-top:8px}.bigCoin{font-size:24px}.details small{display:block;color:var(--muted-foreground)}.details>strong,.details>span{grid-column:2;font:14px var(--font-family-monospace)}.stats{grid-column:1/3;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.stats span{color:var(--muted-foreground);font-size:9px}.stats b{display:block;color:var(--foreground);font:10px var(--font-family-monospace);margin-top:4px}.bottom{height:82px;border-top:1px solid var(--border)}.bottomTabs{height:34px;display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--border);padding:0 7px}.bottomTabs button{height:34px;padding:0 9px;color:var(--muted-foreground)}.bottomActive{color:var(--foreground)!important;border-bottom:2px solid var(--primary)!important}.ticker{height:47px;display:flex;align-items:center;gap:24px;padding:0 14px;font:11px var(--font-family-monospace);overflow:hidden;white-space:nowrap}
@media(max-width:800px){.brand{min-width:auto}.brand b,.symbol .dim,.search{display:none}.workspace{grid-template-columns:36px minmax(0,1fr)}.watchlist{position:fixed;right:0;top:87px;bottom:0;width:min(88vw,320px);z-index:20;transform:translateX(101%);transition:transform .2s;border-left:1px solid var(--border);box-shadow:var(--shadow-lg)}.watchOpen{transform:translateX(0)}.mobileMenu{display:block!important}.top{gap:5px}.symbol{margin-right:auto}.topActions>button:not(.mobileMenu):not(.publish){display:none}.ohlc{gap:6px;font-size:8px}.bottom{height:70px}.bottomTabs button:nth-child(n+3){display:none}.ticker{gap:16px}.instrument{height:48px}.workspace{height:calc(100vh - 87px)}}
.app{height:100dvh;background:radial-gradient(ellipse at top,#102334,#060d16 70%);padding:12px;box-sizing:border-box}
.top{height:56px;background:#0b1724;border:1px solid #203343;border-radius:12px 12px 0 0;padding:0 16px;gap:18px}
.brand{font-size:20px;min-width:176px}.brand span{color:#ffb342}.mark{background:transparent;color:#ffb342;width:29px}.search,.symbol{background:#112232;border-radius:8px!important;border-color:#253c4e!important}.search{height:35px}.publish{background:#ffb342!important;color:#241506!important;font-weight:600!important;border-radius:8px;padding:0 14px!important}
.toolbar{height:44px;background:#0b1724;border:1px solid #203343;border-top:0;padding:0 12px}.toolbar button{border-radius:7px}.active{background:#403424!important;color:#ffbe55!important;box-shadow:inset 0 0 0 1px #82612d}.workspace{height:calc(100dvh - 125px);grid-template-columns:52px minmax(0,1fr) 300px;border:1px solid #203343;border-top:0;border-radius:0 0 12px 12px;overflow:hidden;background:#08131e}
.drawbar{background:#0f1e2b;padding:10px 5px;gap:7px}.drawbar small{font-size:9px;color:#a2b2c3}.drawbar button{width:36px;height:35px;border-radius:7px}.instrument{height:95px;padding:12px 16px;background:#0b1724}.heroPrice{font:600 25px var(--font-family-display);margin:5px 0}.heroPrice small{font-size:12px;margin-left:8px}.ohlc{font-size:10px}.chartWrap{background:linear-gradient(#081723,#07111c)}.watchlist{background:#0b1724;border-color:#203343}.watchHead{height:48px;padding:0 14px}.watchRow{padding:12px 8px!important;border-color:#192c3b!important}.watchRow>svg{color:#ffb342}.watchRow b{font-weight:500}.details{margin:12px 8px;border:1px solid #223849;border-radius:10px;background:#101f2d;padding:16px 10px}.bottom{height:88px;background:#0b1724}.bottomTabs{overflow-x:auto;white-space:nowrap;height:39px}.bottomTabs button{flex-shrink:0;height:39px}.bottomActive{color:#ffb342!important;border-color:#ffb342!important}.ticker{height:44px;font-size:10px;overflow-x:auto}.mobileNav,.morePanel,.closeWatch{display:none}
.app button:focus-visible{outline:2px solid #ffb342;outline-offset:2px}
@media(max-width:800px){
.app{width:100%;max-width:100%;overflow-x:hidden!important;overflow-y:auto!important}
.top{position:sticky;top:0;z-index:25;box-sizing:border-box;flex-wrap:nowrap!important;min-width:0}
.brand{flex-shrink:0}.symbol{min-width:0;margin-right:0!important}.symbol strong{font-size:10px}
.toolbar,.workspace,.center,.bottom,.chartWrap{min-width:0;max-width:100%;box-sizing:border-box}
.bottomTabs,.ticker{max-width:100%;box-sizing:border-box;overflow-x:auto;overscroll-behavior-x:contain}
.tfs{min-width:0;box-sizing:border-box}
.watchlist:not(.watchOpen){visibility:hidden;pointer-events:none}
.drawbar.toolsOpen{top:auto!important;bottom:78px!important;left:12px!important;right:12px;width:auto;max-height:110px;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:6px;padding:10px;overflow-x:auto;overflow-y:hidden;z-index:44}
.drawbar.toolsOpen small{flex-shrink:0}.drawbar.toolsOpen button{flex:0 0 34px;height:38px}.drawbar.toolsOpen>span{display:none}
}
@media(max-width:1000px) and (min-width:801px){.workspace{grid-template-columns:46px minmax(0,1fr) 260px}.brand{min-width:145px}.search{width:180px}.top{gap:10px}.watchRow{grid-template-columns:16px 1fr 67px 49px}}
@media(max-width:800px){
.app{height:100dvh;padding:0 0 66px;overflow:auto}.top{height:58px;border-radius:0;gap:8px;padding:0 12px;flex-wrap:wrap}.brand{min-width:auto;font-size:18px;margin-right:auto}.brand b{display:block}.symbol{height:31px;font-size:11px}.topActions .publish{display:none}.topActions .mobileMenu{display:block}.toolbar{height:auto;min-height:78px;display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;box-sizing:border-box}.tfs{width:100%;display:flex;justify-content:space-between;overflow:auto}.tfs button{flex-shrink:0;padding:0 11px}.toolbar>.sep{display:none}.toolbar>button{background:#112232;border:1px solid #223849;height:30px;font-size:11px}.toolbar>.grow{display:block}.workspace{height:auto;min-height:calc(100dvh - 204px);display:block;overflow:visible;border-radius:0;border:0}.center{min-height:calc(100dvh - 204px)}.instrument{height:auto;min-height:105px;padding:12px 14px}.instrument>div:first-child{font-size:13px}.heroPrice{font-size:25px;margin:8px 0}.ohlc{flex-wrap:wrap;gap:8px;font-size:9px}.chartWrap{flex:none;height:clamp(280px,43dvh,460px);min-height:280px}.chart{width:calc(100% - 50px)}.priceScale{width:50px;font-size:9px}.bottom{height:88px}.bottomTabs button:nth-child(n+3){display:block}.bottomTabs{padding:0 6px;gap:6px}.bottomTabs button{font-size:11px;padding:0 9px}.ticker{height:44px;gap:19px}.drawbar{display:none}.toolsOpen{display:flex;position:fixed;left:10px;top:250px;bottom:140px;height:auto;border:1px solid #355064;border-radius:12px;z-index:35;box-shadow:0 10px 30px #0008}.watchlist{position:fixed;top:58px;bottom:66px;right:0;width:min(94vw,360px);z-index:40;box-shadow:-20px 0 40px #0007}.watchOpen{transform:translateX(0)}.closeWatch{display:block}.mobileNav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;height:66px;background:#0f1e2b;border-top:1px solid #2a4052;z-index:45;padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box}.mobileNav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#a9b9ca;font-size:9px}.mobileNav button:first-child{color:#ffb342}.morePanel{display:block;position:fixed;bottom:78px;left:12px;right:12px;background:#112232;border:1px solid #355064;border-radius:14px;z-index:42;padding:18px;box-shadow:0 15px 50px #0009}.morePanel>div:first-child{display:flex;justify-content:space-between}.morePanel p{font-size:12px;line-height:1.7;color:#a9b9ca}.morePanel small{font-size:10px;color:#8094a8}.menuActions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.menuActions button{display:flex;align-items:center;gap:5px;padding:8px;border:1px solid #355064;border-radius:7px;font-size:11px}
}
.app .morePanel[hidden]{display:none!important}
.app .brand{color:var(--primary)}
.app .chartWrap:fullscreen{width:100vw;height:100vh;background:#08131e}

@media(max-width:800px){
.mobileNav button svg{width:24px;height:24px;flex-shrink:0}.mobileNav button{gap:6px;font-size:11px}
.chart{width:calc(100% - 82px)!important}.priceScale{width:82px!important;font-size:10px;padding:0 5px;white-space:nowrap;border-left:1px solid #203343;text-align:right}.timeScale{right:82px!important;font-size:9px}
.watchlist{max-width:calc(100vw - 16px);box-sizing:border-box}.ohlc{white-space:normal;overflow-wrap:anywhere}.ohlc>span:last-child{line-height:1.7}
}

.instrument{height:auto;min-height:105px}.watchRow [data-favorite]{min-width:18px;display:inline-block}.analysisContent{max-height:180px}
