/* Shared styles: the journal (index.html) and the Watchlist app (watch/). */
:root { --bg:#0f1115; --card:#171a21; --card2:#1d2129; --line:#2a303b; --text:#e6e8ec; --muted:#8a92a3;
--long:#2fbf71; --short:#e5534b; --accent:#6c8cff; --blue:#39c5cf;
--hl:#26d9b4; --binance:#f0b90b; --total:#6c8cff; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text);
font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.app { height:100%; height:100dvh; max-width:820px; margin:0 auto; display:flex; flex-direction:column;
padding:0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0 8px; flex-wrap:wrap; }
h1 { font-size:18px; margin:0; }
.muted { color:var(--muted); font-size:12px; }
button, input, textarea, select { font:inherit; color:inherit; }
button { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:5px 10px; cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--accent); color:#111; border-color:var(--accent); font-weight:600; }
input, textarea, select { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:6px 9px; }
#filters { display:flex; flex-direction:column; gap:8px; padding-bottom:8px; }
.f-search { position:relative; display:flex; }
.f-search input { flex:1; border-radius:999px; padding:8px 36px 8px 14px; font-size:15px; }
.f-search input::-webkit-search-cancel-button { display:none; }
#fClear { position:absolute; right:4px; top:50%; transform:translateY(-50%); border:none; background:none; color:var(--muted);
padding:4px 10px; border-radius:999px; }
.f-row { display:flex; gap:6px; align-items:center; min-width:0; }
.f-toggle { flex-shrink:0; padding:3px 11px; font-size:12px; border-radius:999px; background:none; border:1px solid var(--line); color:var(--muted); }
.f-toggle.on { color:var(--text); border-color:var(--accent); background:rgba(108,140,255,.14); }
.f-chips { display:flex; gap:5px; overflow-x:auto; scrollbar-width:none; min-width:0; }
.f-chips::-webkit-scrollbar { display:none; }
.f-chip { flex-shrink:0; display:inline-flex; align-items:center; gap:5px; padding:2px 10px 2px 3px; font-size:12px; border-radius:999px;
background:var(--card); border:1px solid var(--line); }
.f-chip.on { border-color:var(--accent); background:rgba(108,140,255,.14); }
.f-chip .coin-logo { width:16px; height:16px; }
#feed.booting { opacity:0; transition:none; } /* hidden until it's sitting at the newest message */
#feed { transition:opacity .28s ease-out; }
#feed { flex:1; overflow-y:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 0; }
#older { display:block; margin:4px auto 10px; font-size:13px; }
.msg { padding:8px 10px; margin:6px 0; border-radius:10px; background:var(--card); max-width:92%; }
.msg.owner { background:var(--card2); border-left:3px solid var(--accent); max-width:100%; }
.msg.flash { outline:2px solid var(--blue); outline-offset:-2px; }
.who { display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:13px; margin-bottom:3px; }
.name { font-weight:600; }
.badge { font-size:11px; padding:0 6px; border-radius:4px; background:var(--accent); color:#111; font-weight:700; }
.pill { font-size:11px; padding:0 7px; border-radius:999px; border:1px solid var(--line); cursor:pointer; white-space:nowrap; }
.pill.long { color:var(--long); border-color:var(--long); }
.pill.short { color:var(--short); border-color:var(--short); }
.pill.kind { font-weight:700; letter-spacing:.03em; cursor:default; }
.pill.kind.entry { color:var(--blue); border-color:var(--blue); }
.pill.kind.exit { color:var(--accent); border-color:var(--accent); }
.pill.kind.watch { color:#b48ef0; border-color:#b48ef0; }
.pill.kind.trim { color:#f0883e; border-color:#f0883e; }
.pill.watching { color:#b48ef0; border-color:#b48ef0; cursor:default; }
.pill.entered { color:var(--muted); cursor:default; }
.pill.open { color:var(--long); border-color:var(--long); cursor:default; }
.pill.closed { color:var(--muted); cursor:default; }
.actions { margin-left:auto; display:flex; gap:2px; }
.actions button { font-size:12px; padding:0 6px; border:none; background:none; color:var(--muted); }
.actions button:hover { color:var(--text); }
.quote { font-size:12px; color:var(--muted); border-left:2px solid var(--line); padding-left:8px; margin:2px 0 4px;
cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.body { white-space:pre-wrap; overflow-wrap:anywhere; }
.section { margin-top:6px; }
.section b { display:block; font-size:12px; color:var(--accent); font-weight:600; }
.section div { white-space:pre-wrap; overflow-wrap:anywhere; }
.levels { font-family:ui-monospace, Menlo, monospace; font-size:12px; color:var(--muted); margin-top:4px; }
.imgs { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.imgs img { max-height:260px; max-width:100%; border-radius:6px; border:1px solid var(--line); display:block; }
.empty { text-align:center; color:var(--muted); padding:40px 0; }
#composer { padding:8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:6px;
flex-shrink:0; } /* never scrolls inside itself, so nothing gets cut off */
.will-log { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
#kindPick { font-size:12px; padding:2px 6px; font-weight:700; }
#clearText { padding:0 10px; min-width:32px; font-size:14px; color:var(--muted); }
/* swipe right on a message to reply */
.msg { position:relative; touch-action:pan-y; transition:transform .18s ease-out; }
.msg.swiping { transition:none; }
.msg::before { content:"↩"; position:absolute; left:-30px; top:50%; transform:translateY(-50%); font-size:18px;
color:var(--muted); opacity:0; transition:opacity .1s; pointer-events:none; }
.msg.swiping::before { opacity:.5; }
.msg.swipe-ready::before { opacity:1; color:var(--accent); }
.send-row { display:flex; gap:6px; align-items:flex-end; }
.send-row #text { flex:1; }
.send-row button { height:40px; min-width:40px; padding:0 12px; font-size:17px; border-radius:20px; }
#sectionInputs { max-height:30vh; overflow-y:auto; }
#searchBtn.on { background:var(--accent); color:#111; border-color:var(--accent); }
#status:empty { display:none; }
#composer.drag { outline:2px dashed var(--accent); outline-offset:-2px; border-radius:8px; }
.row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
#kinds button.on { background:var(--accent); color:#111; border-color:var(--accent); }
#replyBar { font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:center; }
#replyBar span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#fields input { width:88px; }
#fields select { width:auto; }
#sectionInputs { display:flex; flex-direction:column; gap:6px; }
#sectionInputs textarea, #text { width:100%; resize:vertical; }
#sectionInputs textarea { min-height:44px; }
#text { min-height:40px; max-height:30vh; resize:none; overflow-y:auto; line-height:1.4; }
#pending { display:flex; gap:6px; flex-wrap:wrap; }
#pending div { position:relative; }
#pending img { height:56px; border-radius:4px; border:1px solid var(--line); display:block; }
#pending button { position:absolute; top:-6px; right:-6px; padding:0 5px; font-size:11px; border-radius:999px; }
#name { width:150px; }
#status { font-size:12px; color:var(--short); }
#login { display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding-bottom:8px; }
#login input { flex:1; min-width:140px; }
#loginError { color:var(--short); font-size:12px; width:100%; }
.avatar { width:22px; height:22px; border-radius:50%; flex-shrink:0; object-fit:cover; display:inline-grid;
place-items:center; font-size:12px; font-weight:700; color:#111; }
.avatar-btn { padding:0; border-radius:50%; width:32px; height:32px; display:grid; place-items:center; overflow:hidden; }
.avatar-btn .avatar { width:32px; height:32px; font-size:15px; }
#profile { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px; margin-bottom:8px;
background:var(--card); border:1px solid var(--line); border-radius:8px; }
#profile .avatar { width:48px; height:48px; font-size:20px; }
#profileClose { margin-left:auto; }
.profile-name { flex-basis:100%; }
#profileName { width:180px; }
body.chart-open { overflow:hidden; }
.chart-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:10; display:grid; place-items:center;
padding:max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); }
.chart-panel { background:var(--bg); border:1px solid var(--line); border-radius:10px; width:min(960px, 100%);
height:min(620px, 100%); display:flex; flex-direction:column; padding:10px; gap:6px; }
.chart-head { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.chart-title { font-weight:700; font-size:16px; }
.chart-stat { font-family:ui-monospace, Menlo, monospace; font-size:13px; color:var(--muted); }
.chart-stat.up, .chart-card-move.up { color:var(--long); }
.chart-stat.down, .chart-card-move.down { color:var(--short); }
.chart-close { margin-left:auto; }
.chart-reply { margin-left:auto; }
.chart-reply + .chart-close { margin-left:0; }
.chart-box { position:relative; flex:1; min-height:0; }
.chart-pin { position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
background:var(--accent); box-shadow:0 0 0 3px rgba(108,140,255,.35); z-index:3; pointer-events:none; }
.chart-card { position:absolute; z-index:4; width:min(220px, 60%); background:var(--card2); border:1px solid var(--line);
border-radius:8px; padding:8px; font-size:12px; box-shadow:0 4px 16px rgba(0,0,0,.4); }
.chart-card-text { white-space:pre-wrap; overflow-wrap:anywhere; margin:4px 0; }
.chart-card-img { display:block; max-width:100%; max-height:120px; border-radius:4px; margin-top:4px; }
.chart-card-move { font-weight:700; margin-top:4px; }
.chart-foot { font-size:11px; }
@media (max-width: 600px) { .chart-panel { height:100%; } }
.zoomable { cursor:zoom-in; padding:0; border:none; background:none; display:block; }
.lightbox { position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.88); display:grid; place-items:center;
padding:max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
cursor:zoom-out; }
.lightbox img { max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; }
.lightbox button { position:absolute; top:calc(10px + env(safe-area-inset-top, 0px)); right:12px; font-size:16px; }
.grow { flex:1; }
#feed { min-height:0; }
@media (max-width: 600px) {
input, textarea, select { font-size:16px; } /* below 16px, iOS zooms in on focus */
header { padding-top:calc(8px + env(safe-area-inset-top, 0px)); }
#fields input { width:calc(33% - 6px); }
.msg { max-width:100%; }
.actions button { padding:4px 8px; } /* bigger tap targets */
}
#tabs button.on { background:var(--accent); color:#111; border-color:var(--accent); }
@media (max-width: 700px) {
header { position:relative; }
#profileBtn { position:absolute; top:0; right:0; } /* profile in the top-right corner */
body.charts-open #searchBtn, body.charts-open #filters { display:none !important; } /* tap a chart's ticker instead */
}
#tabs button { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; }
#tabs svg { display:block; }
#sigBadge:empty { display:none; }
#sigBadge:not(:empty) { font-size:11px; background:var(--short); color:#fff; border-radius:999px; padding:0 6px; margin-left:4px; }
#signals { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-bottom:12px; }
.sig-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sig-filters { display:flex; flex-direction:column; gap:8px; }
.sig-frow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sig-frow .seg { flex-shrink:0; }
.sig-frow [data-filter="tf"] { overflow-x:auto; scrollbar-width:none; max-width:100%; }
.sig-frow [data-filter="tf"]::-webkit-scrollbar { display:none; }
.sig-toggle { padding:3px 11px; font-size:12px; border-radius:999px; background:none; border:1px solid var(--line); color:var(--muted); }
.sig-toggle.on { color:var(--text); border-color:var(--accent); background:rgba(108,140,255,.14); }
.sig-count { font-size:12px; margin-left:auto; }
.sig-none { padding:8px; font-size:13px; }
.sig-teach-row { display:flex; gap:6px; flex-wrap:wrap; }
.sig-teach-row input { flex:1; min-width:150px; text-transform:uppercase; }
.ex-img { max-width:100%; border-radius:8px; border:1px solid var(--line); background:#0f1115; min-height:120px; }
.ex-note { white-space:pre-wrap; font-size:14px; }
.sig-live { align-self:flex-start; margin:4px 8px; padding:3px 10px; font-size:12px; border-radius:999px; background:none; color:var(--muted); }
.sig-stock { color:#f0b90b; border-color:rgba(240,185,11,.45); font-weight:700; letter-spacing:.03em; }
.sig-search-row { display:flex; gap:6px; }
.sig-search-row .coin-search { flex:1; }
.sig-check { padding:6px 12px; border-radius:10px; font-size:15px; }
.sig-inspect:empty { display:none; }
.sig-inspect { display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid var(--line); }
.sig-inspect-head { display:flex; align-items:center; gap:8px; }
.sig-warn { font-size:12px; color:#f0b90b; background:rgba(240,185,11,.08); border:1px solid rgba(240,185,11,.3); border-radius:8px; padding:6px 8px; }
.sig-tf { display:grid; grid-template-columns:34px 1fr; gap:8px; align-items:start; padding-top:4px; border-top:1px solid var(--line); }
.sig-tf-name { font-size:13px; padding-top:1px; }
.sig-tf-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sig-check-line { display:flex; gap:6px; font-size:12px; align-items:baseline; }
.sig-check-line.hit > span:first-child { color:var(--long); } .sig-check-line.miss > span:first-child { color:var(--muted); }
.sig-pat { font-weight:600; min-width:68px; }
.sig-detail { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:6px; }
.sig-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:15px; }
.sig-chart { height:clamp(340px, 58vh, 680px); position:relative; display:flex; flex-direction:column; }
.sig-chart-host { flex:1; min-height:0; position:relative; }
.sig-full-bar { display:none; }
.sig-expand { position:absolute; top:6px; left:6px; z-index:5; width:30px; height:30px; padding:0; display:grid; place-items:center;
border-radius:50%; background:rgba(15,17,21,.82); border:1px solid var(--line); color:var(--text); }
.sig-expand svg { width:15px; height:15px; display:block; }
.sig-chart:not(.full) .kl-ui { left:42px; top:9px; }
/* Timeframe pills: one style for every picker (charts, Signals, teach, composer) */
.tf-select-hidden { display:none !important; }
.tf-pills { display:inline-flex; gap:2px; padding:2px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--line);
overflow-x:auto; scrollbar-width:none; max-width:100%; flex-wrap:nowrap; }
.tf-pills::-webkit-scrollbar { display:none; }
.tf-pills button { flex-shrink:0; border:none; background:none; color:var(--muted); padding:3px 9px; font-size:12px; font-weight:600;
border-radius:999px; font-variant-numeric:tabular-nums; line-height:1.4; min-width:0; }
.tf-pills button:hover { color:var(--text); }
.tf-pills button.on { background:var(--accent); color:#111; }
.chart-tf-pills { flex-basis:100%; }
.draw-top .tf-pills button { font-size:12px; padding:3px 9px; min-width:0; }
.compose-tf { order:-1; flex-basis:100%; } /* key levels sit beside the full-screen button, not on top of it */
.sig-chart.full { position:fixed; inset:0; z-index:15; height:auto; background:var(--bg); gap:6px;
padding:max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px))
max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
.sig-chart.full .sig-full-bar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.sig-chart.full .sig-expand { display:none; }
.sig-full-bar button.on { outline:2px solid var(--accent); }
.sig-full-close { margin-left:auto; }
.sig-detail button.on { outline:2px solid var(--accent); }
.sig-detail .chip { font-size:10px; color:var(--muted); margin-left:6px; }
.sig-note { width:100%; resize:vertical; }
.sig-dir.bullish_J { color:var(--long); } .sig-dir.bearish_J { color:var(--short); } .sig-dir.neutral { color:var(--accent); }
.pill.stale { color:var(--accent); border-color:var(--accent); cursor:default; }
.sig-list { display:flex; flex-direction:column; gap:4px; }
.sig-row { display:grid; grid-template-columns:minmax(80px, 1fr) 40px minmax(80px, 1fr) 20px 44px auto; gap:8px;
text-align:left; align-items:center; }
.sig-row.on { border-color:var(--accent); }
@media (max-width: 600px) { .sig-chart { height:clamp(320px, 52vh, 560px); } }
.new-divider { display:flex; align-items:center; gap:8px; color:var(--accent); font-size:12px; font-weight:600; margin:10px 0 4px; }
.new-divider::before, .new-divider::after { content:""; flex:1; border-top:1px solid var(--accent); opacity:.5; }
.details-btn { margin-left:auto; font-size:12px; padding:2px 8px; }
.will-log { font-size:12px; font-family:ui-monospace, Menlo, monospace; }
.draw-palette .draw-custom { width:30px; height:30px; }
/* Chart preview chip + full-screen chart editor (chartdraw.js) */
#chartChip { display:flex; align-items:center; gap:8px; align-self:flex-start; padding:4px 10px 4px 6px; font-size:13px; }
#chartChip canvas { width:96px; height:28px; display:block; }
#fillChip { display:flex; gap:4px; align-self:flex-start; max-width:100%; }
#fillUse { display:flex; align-items:center; gap:6px; padding:4px 10px; font-size:13px; font-variant-numeric:tabular-nums;
border-color:rgba(38,217,180,.45); background:linear-gradient(90deg, rgba(38,217,180,.14), transparent); white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; max-width:100%; }
#fillUse.on { border-color:var(--hl); }
#fillUse .up { color:var(--long); } #fillUse .down { color:var(--short); }
.fill-venue { font-size:10px; font-weight:800; color:#111; background:var(--hl); border-radius:4px; padding:1px 4px; }
#fillUnlink { padding:2px 8px; }
#chartChip span .up { color:var(--long); } #chartChip span .down { color:var(--short); }
.draw-overlay { position:fixed; inset:0; z-index:30; background:var(--bg); display:flex; flex-direction:column; gap:6px;
padding:max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px))
max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
.draw-top, .draw-tools { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.draw-tools { justify-content:center; } /* tools in the middle */
/* phones: no Edit tool; a selected drawing's settings pop up over the chart */
.draw-overlay.phone .draw-tools [data-tool="edit"] { display:none; }
.draw-pop { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:3; width:max-content; max-width:calc(100% - 16px);
padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:0 6px 24px rgba(0,0,0,.35); }
.draw-overlay:not(.has-sel) .draw-pop { display:none; }
.draw-top .muted { font-size:12px; }
.draw-stage { position:relative; flex:1; min-height:0; }
.draw-host { position:absolute; inset:0; }
.draw-ink { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; touch-action:none; z-index:2; }
.draw-tools button { min-width:36px; font-size:16px; padding:4px 8px; }
.draw-tools button.on { background:var(--accent); color:#111; border-color:var(--accent); }
.draw-swatch { min-width:26px !important; width:26px; height:26px; border-radius:50%; padding:0 !important; }
.draw-swatch.on { outline:2px solid var(--text); outline-offset:2px; }
.draw-bottom { display:flex; gap:6px; align-items:flex-end; }
.draw-bottom textarea { flex:1; resize:none; line-height:1.4; overflow-y:hidden; scrollbar-width:none; }
.draw-bottom textarea::-webkit-scrollbar { display:none; }
.draw-grip { display:none; }
/* Writing: the box becomes a sheet over the chart, above the keyboard (Telegram-style caption). */
.draw-overlay.composing .draw-bottom {
position:fixed; left:0; right:0; bottom:var(--kb, 0px); z-index:20; flex-wrap:wrap; justify-content:flex-end;
padding:10px max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
background:rgba(15,17,21,.97); border-top:1px solid var(--line); box-shadow:0 -10px 30px rgba(0,0,0,.5);
animation:sheetUp .18s ease-out both; }
.draw-overlay.composing .draw-bottom textarea { flex:1 1 100%; font-size:16px; border-radius:12px; padding:10px 12px; }
/* the handle: a slim pill centred on the sheet's top edge, with a generous invisible touch area */
.draw-overlay.composing .draw-grip { display:block; position:absolute; left:50%; top:0; transform:translateX(-50%);
width:88px; height:22px; padding:0 !important; min-width:0; border:none; background:none; cursor:grab; touch-action:none; }
.draw-overlay.composing .draw-grip::before { content:""; position:absolute; left:50%; top:7px; transform:translateX(-50%);
width:38px; height:4px; border-radius:999px; background:rgba(230,232,236,.28); transition:background .15s; }
.draw-overlay.composing .draw-grip:hover::before, .draw-overlay.composing .draw-grip:active::before { background:rgba(230,232,236,.55); }
.draw-overlay.composing .draw-bottom { padding-top:22px; border-radius:16px 16px 0 0; transition:transform .12s; }
@keyframes sheetUp { from { transform:translateY(12px); opacity:.6; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .draw-overlay.composing .draw-bottom { animation:none; } }
.draw-bottom button { font-size:18px; padding:6px 14px; }
.draw-status { font-size:12px; min-height:1em; }
/* Teach mode (training examples) */
.teach-panel { display:flex; flex-direction:column; gap:6px; }
.teach-quick { display:flex; gap:5px; overflow-x:auto; scrollbar-width:none; }
.teach-quick::-webkit-scrollbar { display:none; }
.teach-chip { flex-shrink:0; padding:3px 10px !important; font-size:12px !important; border-radius:999px; background:none; }
.teach-row { display:flex; gap:6px; align-items:center; }
.teach-label { flex:1; min-width:0; font-size:15px; }
.teach-note { resize:none; font-size:15px; line-height:1.4; }
.teach-save { align-self:flex-end; padding:6px 16px; }
/* Key levels control (keylevels.js), top-left of each chart */
.kl-ui { position:absolute; left:6px; top:6px; z-index:4; font-size:12px; }
/* candle legend (O H L C · change · Vol): beside the Levels pill (on its own, top-left) */
.cg-legend { position:absolute; left:8px; top:8px; z-index:4; display:flex; flex-wrap:wrap; gap:2px 9px; align-items:baseline;
font-size:11.5px; font-variant-numeric:tabular-nums; pointer-events:none; color:var(--muted); max-width:calc(100% - 80px); }
.kl-ui .cg-legend { position:static; display:inline-flex; vertical-align:middle; margin-left:8px; max-width:none; }
.cg-legend i { font-style:normal; margin-right:3px; opacity:.85; }
.cg-legend b { font-weight:600; }
.cg-legend .up { color:#089981; }
.cg-legend .down { color:#f23645; }
.kl-btn { padding:2px 8px; font-size:11.5px; border-radius:999px; background:rgba(15,17,21,.82); border:1px solid var(--line); color:var(--muted); }
.kl-btn.on { color:var(--text); border-color:rgba(108,140,255,.55); }
.kl-menu { margin-top:4px; display:flex; flex-direction:column; gap:2px; padding:6px 8px; border-radius:10px;
background:rgba(23,26,33,.97); border:1px solid var(--line); box-shadow:0 8px 22px rgba(0,0,0,.45); }
.kl-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:3px 0; white-space:nowrap; }
.kl-group { display:flex; align-items:center; gap:7px; cursor:pointer; min-width:92px; }
.kl-group i { width:14px; height:3px; border-radius:2px; display:inline-block; }
.kl-chips { display:flex; gap:4px; }
.kl-chip { padding:1px 7px; font-size:11px; border-radius:999px; background:none; border:1px solid var(--line); color:var(--muted); }
.kl-chip.on { color:var(--text); border-color:var(--kl); background:color-mix(in srgb, var(--kl) 22%, transparent); }
.draw-shots { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 0; }
.draw-shots::-webkit-scrollbar { display:none; }
.draw-shot { position:relative; flex-shrink:0; width:150px; display:flex; flex-direction:column; gap:4px; }
.draw-shot img { width:150px; height:84px; object-fit:cover; border-radius:8px; border:1px solid var(--line); display:block; }
.draw-shot-tf { position:absolute; left:5px; top:5px; font-size:11px; padding:1px 6px; border-radius:6px;
background:rgba(15,17,21,.85); color:var(--text); }
.draw-shot-x { position:absolute; right:4px; top:4px; padding:0 6px !important; font-size:12px !important; min-width:0 !important;
border-radius:999px; background:rgba(15,17,21,.85); }
.draw-shot input { font-size:12px; padding:4px 6px; border-radius:6px; width:100%; box-sizing:border-box; }
.draw-bottom .draw-shoot { padding:6px 10px; }
.reacts { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.reacts:empty { display:none; }
.react-chip { font-size:13px; padding:1px 8px; border-radius:999px; line-height:1.5; }
.react-chip.mine { border-color:var(--accent); background:rgba(108,140,255,.15); }
.react-picker { position:fixed; z-index:12; display:flex; gap:2px; padding:4px; border-radius:999px;
background:var(--card2); border:1px solid var(--line); box-shadow:0 6px 20px rgba(0,0,0,.5);
animation:msgIn .15s ease-out both; }
.react-picker button { border:none; background:none; font-size:22px; padding:4px 6px; border-radius:999px; }
.react-picker button.mine { background:rgba(108,140,255,.2); }
.msg { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } /* long-press = reactions */
.react-picker .more { font-size:18px; color:var(--muted); }
.emoji-sheet { position:fixed; left:0; right:0; bottom:0; z-index:13; display:flex; justify-content:center;
padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background:var(--card2);
border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(0,0,0,.5); animation:msgIn .18s ease-out both; }
.emoji-sheet emoji-picker { width:100%; max-width:520px; height:min(380px, 55vh);
--background:var(--card2); --border-color:var(--line); --input-border-color:var(--line); }
.react-picker .copy { font-size:16px; border-left:1px solid var(--line); border-radius:0 999px 999px 0; }
/* Messages ease in instead of popping; the newest few cascade on first load. */
.msg.enter { animation:msgIn .45s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes msgIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
#newPill { position:sticky; bottom:8px; display:block; margin:6px auto 0; z-index:2; border-radius:999px;
background:var(--accent); color:#111; border-color:var(--accent); font-weight:600;
box-shadow:0 4px 14px rgba(0,0,0,.45); }
@media (prefers-reduced-motion: reduce) { .msg.enter { animation:none; } }
/* Focus/selection highlights drawn inside the edge: scrolling areas (composer, feed, signals)
clip anything drawn outside their bounds, which cut the sides off. */
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
outline:2px solid var(--accent); outline-offset:-2px; }
.sig-detail button.on, .sig-full-bar button.on { outline-offset:-2px; }
#pnl { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding-bottom:16px; }
/* Charts tab: 1/2/4/6 live charts */
#charts { flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; padding-bottom:6px; }
body.charts-open .app { max-width:none; } /* the chart grid gets the whole window */
.cg-bar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.cg-bar .seg button { padding:4px 10px; display:grid; place-items:center; }
.cg-toggle { padding:3px 11px; font-size:12.5px; border-radius:999px; background:none; border:1px solid var(--line); color:var(--muted); }
.cg-toggle.on { color:var(--text); border-color:var(--accent); background:rgba(108,140,255,.14); }
.cg-main { flex:1; min-height:0; display:flex; gap:2px; }
.cg-grid { flex:1; min-height:0; min-width:0; display:grid; gap:2px; } /* charts nearly touching, like TradingView */
/* drawing tools: a floating toolbar (drag by its grip), on top of an enlarged chart too */
.cg-rail { position:fixed; z-index:26; left:50%; top:60px; display:flex; gap:1px; align-items:center; padding:2px 4px 2px 2px;
border:1px solid var(--line); border-radius:8px; background:var(--card); box-shadow:0 4px 18px rgba(0,0,0,.35);
max-width:calc(100vw - 8px); overflow-x:auto; scrollbar-width:none; touch-action:none; }
.cg-rail::-webkit-scrollbar { display:none; }
.cg-rail button { width:30px; height:30px; flex-shrink:0; padding:0; display:grid; place-items:center; background:none; border:0; border-radius:6px; color:var(--muted); }
.cg-rail button:hover { color:var(--text); background:rgba(108,140,255,.14); }
.cg-rail .cg-rail-grip { width:16px; cursor:grab; opacity:.7; }
.cg-rail.dragging, .cg-rail.dragging .cg-rail-grip { cursor:grabbing; }
.cg-rail button.on { color:#fff; background:var(--accent); }
/* drawing straight on a chart */
.cg-ink { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.cg-body.cg-drawing { cursor:crosshair; touch-action:none; }
.cg-draw-pop { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:5; display:flex; flex-direction:column; gap:0;
width:max-content; max-width:calc(100% - 16px); padding:4px 0; border:1px solid rgba(255,255,255,.08); border-radius:12px;
background:var(--card2); box-shadow:0 10px 30px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
max-height:calc(100% - 20px); overflow-y:auto; }
.cg-draw-pop > * { padding:7px 10px; }
.cg-draw-pop > * + * { border-top:1px solid rgba(255,255,255,.06); }
.cg-draw-colors, .cg-draw-acts { display:flex; gap:7px; align-items:center; flex-wrap:wrap; justify-content:center; }
.cg-draw-pop .draw-swatch { width:18px !important; height:18px; min-width:0 !important; padding:0 !important; border-radius:50%; border:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); transition:transform .12s, box-shadow .12s; }
.cg-draw-pop .draw-swatch:hover { transform:scale(1.15); }
.cg-draw-pop .draw-swatch.on { box-shadow:0 0 0 2px var(--card2), 0 0 0 3.5px var(--accent); }
.cg-draw-pop .cp-btn { width:20px !important; height:20px !important; padding:2px !important; margin-left:2px; }
.cg-draw-pop .cp-btn::after { inset:2px; box-shadow:0 0 0 1.5px var(--card2); }
.cg-draw-acts button { display:inline-flex; align-items:center; gap:5px; height:30px; min-width:30px; justify-content:center; font-size:13px;
padding:0 8px; border:none; border-radius:7px; background:none; color:var(--muted); }
.cg-draw-acts button:hover { background:rgba(255,255,255,.07); color:var(--text); }
.cg-draw-acts button.on { background:rgba(108,140,255,.18); color:var(--text); }
.cg-draw-note:empty { display:none; }
.cg-draw-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
.cg-draw-seg { display:inline-flex; gap:2px; padding:2px; border-radius:8px; background:rgba(0,0,0,.25); }
.cg-draw-seg button { border:0; border-radius:6px; background:none; font-size:12px; padding:0 9px; min-width:30px; height:24px;
display:grid; place-items:center; color:var(--muted); transition:background .12s, color .12s; }
.cg-draw-seg button:hover { color:var(--text); background:rgba(255,255,255,.06); }
.cg-draw-seg button.on { background:var(--accent); color:#fff; }
.cg-lw { display:block; width:16px; background:currentColor; border-radius:2px; }
.cg-draw-row > button { font-size:12px; height:28px; padding:0 10px; border:none; border-radius:7px; background:rgba(0,0,0,.25); color:var(--muted); }
.cg-draw-row > button:hover { color:var(--text); }
.cg-draw-row > button.on { background:var(--accent); color:#fff; }
.cg-draw-text { width:100%; box-sizing:border-box; font-size:13px; padding:6px 9px; border-radius:7px; border:1px solid transparent;
background:rgba(0,0,0,.25); }
.cg-draw-text:focus { border-color:var(--accent); outline:none; }
.cg-body.cg-dragging, .cg-body.cg-dragging * { user-select:none; -webkit-user-select:none; }
.cg-rail-gap { width:1px; align-self:stretch; margin:4px 3px; background:var(--line); flex-shrink:0; }
.cg-watch { width:290px; flex-shrink:0; min-height:0; overflow-y:auto; border:1px solid var(--line); border-radius:4px; background:var(--card);
scrollbar-width:none; }
.cg-watch::-webkit-scrollbar { display:none; }
@media (max-width: 700px) { /* phones: the watchlist as a sheet over the charts */
.cg-watch { position:fixed; left:0; right:0; bottom:0; width:auto; max-height:72vh; z-index:24; border-radius:16px 16px 0 0;
box-shadow:0 -12px 30px rgba(0,0,0,.5); padding-bottom:env(safe-area-inset-bottom, 0px); }
}
/* Watchlist (watchlist.js): Charts panel + /watch/ app */
.wl { display:flex; flex-direction:column; gap:6px; padding:8px; }
.wl-head { display:flex; align-items:center; gap:6px; min-width:0; }
.wl-title { font-size:14px; flex-shrink:0; }
.wl-tabs { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; min-width:0; flex:1; }
.wl-tabs::-webkit-scrollbar { display:none; }
.wl-tab { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; padding:3px 10px; font-size:12.5px; border-radius:999px;
background:none; border:1px solid var(--line); color:var(--muted); }
.wl-tab.on { color:var(--text); border-color:var(--wl); background:color-mix(in srgb, var(--wl) 18%, transparent); }
.wl-dot { width:8px; height:8px; border-radius:50%; background:var(--wl); display:inline-block; }
.wl-new { flex-shrink:0; padding:2px 9px; border-radius:999px; }
.wl-editor { display:flex; flex-direction:column; gap:8px; padding:8px; border:1px solid var(--line); border-radius:10px; }
.wl-edit-row { display:flex; gap:6px; } .wl-edit-row input { flex:1; min-width:0; }
.wl-swatches { display:flex; gap:6px; flex-wrap:wrap; }
.wl-swatch { width:24px; height:24px; min-width:0; padding:0; border-radius:50%; }
.wl-swatch.on { outline:2px solid var(--text); outline-offset:2px; }
.wl-delete { align-self:flex-start; font-size:12px; color:var(--short); }
.wl-add { position:relative; }
.wl-add input { width:100%; box-sizing:border-box; border-radius:999px; padding:7px 12px; text-transform:uppercase; }
.wl-add input::placeholder { text-transform:none; }
.wl-sugg { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:5; display:flex; flex-direction:column; padding:4px;
border-radius:10px; background:rgba(23,26,33,.98); border:1px solid var(--line); box-shadow:0 10px 24px rgba(0,0,0,.45); }
.wl-sugg-item { text-align:left; background:none; border:none; padding:7px 10px; font-weight:700; border-radius:8px; }
.wl-sugg-item:hover { background:rgba(255,255,255,.06); }
.wl-rows { display:flex; flex-direction:column; }
.wl-row { display:grid; grid-template-columns:6px minmax(0, 1fr) auto auto 22px; align-items:center; gap:8px; padding:7px 4px;
border-bottom:1px solid var(--line); cursor:pointer; font-variant-numeric:tabular-nums; }
.wl-row:hover { background:rgba(255,255,255,.03); }
.wl-flag { width:6px; height:22px; min-width:0; padding:0; border-radius:3px; border:1px dashed var(--line); background:none; }
.wl-flag[style] { border:none; }
.wl-name { display:flex; align-items:center; gap:7px; min-width:0; }
.wl-name b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; }
.wl-name .coin-logo { width:20px; height:20px; }
.wl-px { font-size:13px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wl-chg { font-size:12.5px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.wl-chg.up { color:var(--long); } .wl-chg.down { color:var(--short); }
.wl-del { padding:0; min-width:0; width:22px; height:22px; border:none; background:none; color:var(--muted); opacity:.5; }
.wl-row:hover .wl-del { opacity:1; }
.wl-empty, .wl-note { font-size:12.5px; padding:6px 4px; }
.cg-grid.l1 { grid-template-columns:1fr; }
.cg-grid.l2 { grid-template-columns:1fr 1fr; }
.cg-grid.l4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.cg-grid.l6 { grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-rows:1fr 1fr; } /* 3 × 2 */
.cg-grid.l61 { grid-template-columns:repeat(6, minmax(0, 1fr)); grid-template-rows:1fr; } /* 6 × 1 */
.cg-grid.l12 { grid-template-columns:repeat(6, minmax(0, 1fr)); grid-template-rows:1fr 1fr; } /* 6 × 2 */
.cg-cell { position:relative; display:flex; flex-direction:column; min-height:0; min-width:0; border:1px solid var(--line); border-radius:4px;
background:#0f1115; overflow:hidden; }
.cg-cell.active { border-color:rgba(108,140,255,.55); }
.cg-head { display:flex; align-items:center; gap:6px; padding:4px 6px; min-width:0; border-bottom:1px solid #1b1f27; }
.cg-sym { padding:1px 8px; font-weight:800; font-size:13px; border-radius:6px; background:none; flex-shrink:0; }
.cg-symform input { width:90px; padding:2px 6px; font-size:13px; text-transform:uppercase; }
.cg-price { font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; }
.cg-price .up { color:var(--long); } .cg-price .down { color:var(--short); }
.cg-price.stale { opacity:.45; }
.tf-pills.rolling { outline:1px solid var(--accent); }
/* phones: timeframe button + vertical list */
.tf-picker { padding:2px 9px; font-size:12px; font-weight:700; border-radius:999px; white-space:nowrap; flex-shrink:0; }
.tf-wheel { position:fixed; z-index:40; width:96px; overflow-y:auto; overscroll-behavior:contain; scroll-snap-type:y proximity;
display:flex; flex-direction:column; padding:4px; border-radius:12px; background:rgba(23,26,33,.98);
border:1px solid var(--line); box-shadow:0 12px 30px rgba(0,0,0,.5); scrollbar-width:none; }
.tf-wheel::-webkit-scrollbar { display:none; }
.tf-wheel-item { scroll-snap-align:center; flex-shrink:0; padding:10px 8px; font-size:15px; font-weight:700; text-align:center;
border:none; background:none; border-radius:8px; color:var(--muted); }
.tf-wheel-item.on { background:var(--accent); color:#111; }
.tf-wheel-slide { width:auto; min-width:96px; max-width:60vw; scroll-snap-type:none; }
.tf-wheel-slide .tf-wheel-item { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .08s; }
.tf-wheel-item.hot { background:rgba(108,140,255,.35); color:var(--text); transform:scale(1.04); }
.tf-wheel-item.on.hot { background:var(--accent); color:#111; }
.cg-head .tf-pills { flex:1 1 auto; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; touch-action:pan-x; }
.cg-head .tf-pills button { padding:2px 7px; font-size:11px; }
.cg-tools { display:flex; gap:2px; margin-left:auto; flex-shrink:0; }
.cg-tools button { padding:2px 6px; font-size:13px; background:none; border:none; }
.cg-body { position:relative; flex:1; min-height:0; }
.cg-msg { position:absolute; inset:0; display:grid; place-items:center; font-size:13px; }
.cg-sheet { position:absolute; right:8px; top:40px; z-index:6; width:min(270px, calc(100% - 16px)); display:flex; flex-direction:column; gap:6px;
padding:10px; border-radius:12px; background:rgba(23,26,33,.98); border:1px solid var(--line); box-shadow:0 10px 28px rgba(0,0,0,.5); }
.cg-fields { display:flex; gap:6px; flex-wrap:wrap; }
.cg-fields > * { flex:1 1 90px; min-width:0; }
.cg-check { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
.cg-actions { display:flex; gap:6px; justify-content:flex-end; }
.cg-panel { display:flex; flex-direction:column; gap:6px; max-height:40vh; overflow-y:auto; padding:10px; border:1px solid var(--line);
border-radius:12px; background:var(--card); scrollbar-width:none; }
.cg-alert { display:flex; align-items:center; gap:6px; padding:6px 0; border-top:1px solid var(--line); font-size:13px; }
.cg-alert.off { opacity:.55; }
.cg-alert-main { flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:0 6px; }
.cg-alert-main > div { flex-basis:100%; }
.cg-alert button { padding:2px 9px; font-size:12px; }
/* Symbol search (Charts tab): pops up when you start typing, like TradingView */
.ss-overlay { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.45); display:flex; justify-content:center; align-items:flex-start;
padding:10vh 12px 12px; }
.ss-panel { width:min(560px, 100%); max-height:70vh; display:flex; flex-direction:column; border-radius:14px; background:var(--card2, #171a21);
border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,.55); overflow:hidden; }
.ss-head { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); }
.ss-input { flex:1; min-width:0; font-size:17px; font-weight:700; text-transform:uppercase; border:none; background:none; padding:6px 12px; border-radius:8px; outline:none; color:var(--text); }
.ss-input::placeholder { text-transform:none; font-weight:400; }
.ss-input::-webkit-search-cancel-button { display:none; }
.ss-where { font-size:12px; white-space:nowrap; }
.ss-list { overflow-y:auto; scrollbar-width:none; padding:4px; }
.ss-label { padding:8px 10px; font-size:12px; }
.ss-row { display:grid; grid-template-columns:22px auto 1fr auto; align-items:center; gap:10px; width:100%; text-align:left;
padding:8px 10px; border:none; background:none; border-radius:10px; font-size:14px; }
.ss-row.on { background:rgba(108,140,255,.16); }
.ss-row .muted { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-badge { font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; white-space:nowrap; }
.ss-badge.binance { color:#f0b90b; background:rgba(240,185,11,.12); }
.ss-badge.spot { color:#c9a227; background:rgba(240,185,11,.07); }
.ss-badge.stockperp { color:#f0883e; background:rgba(240,136,62,.12); }
.ss-badge.yahoo { color:#b48ef0; background:rgba(180,142,240,.14); }
.ss-badge.ratio { color:#4fb3d9; background:rgba(79,179,217,.13); }
.ss-badge.recent { display:none; }
.cg-colors { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:6px; }
.cg-color { display:flex; align-items:center; gap:10px; font-size:12.5px; padding:6px 10px 6px 6px; border:1px solid var(--line);
border-radius:10px; background:var(--card, transparent); cursor:pointer; transition:border-color .15s; }
.cg-color:hover { border-color:var(--muted); }
.cg-color input { width:26px; height:26px; flex:none; }
.cg-color .cg-hex { margin-left:auto; color:var(--muted); font:11px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform:uppercase; }
.cg-body { background:#0f1115; }
.cg-warn { font-size:12px; color:#f0b90b; background:rgba(240,185,11,.08); border:1px solid rgba(240,185,11,.3); border-radius:8px; padding:6px 8px; }
.draw-bell { font-size:15px !important; }
/* Narrow windows: 1–2 charts stack; 4 and 6 stay side by side (2×2, 3×2) and fill the height.
Only very narrow phones get 2 across and scroll. */
@media (max-width: 1100px) {
.cg-grid.l12 { grid-template-columns:repeat(4, minmax(0, 1fr)); grid-template-rows:repeat(3, 1fr); } /* 4 × 3 */
}
/* narrow columns (6×1, 6×2): timeframes on their own row */
.cg-grid.l12 .cg-head, .cg-grid.l61 .cg-head { flex-wrap:wrap; gap:2px 4px; padding:3px 4px; }
.cg-grid.l12 .cg-head .tf-pills, .cg-grid.l61 .cg-head .tf-pills { order:5; flex-basis:100%; }
.cg-grid.l12 .cg-price, .cg-grid.l61 .cg-price { font-size:10.5px; }
@media (max-width: 700px) {
.cg-grid.l2 { grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
.cg-grid.l12 { grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-rows:repeat(4, 1fr); }
.cg-grid.l4 .cg-head, .cg-grid.l6 .cg-head { flex-wrap:wrap; gap:2px 4px; padding:3px 4px; }
.cg-grid.l4 .cg-head .tf-pills, .cg-grid.l6 .cg-head .tf-pills { order:5; flex-basis:100%; }
.cg-grid.l4 .cg-price, .cg-grid.l6 .cg-price { font-size:10.5px; }
.cg-grid { gap:2px; }
}
/* Phones: 1, 2 and 4 charts fill the screen height; only 6 (2 across × 3) scrolls. */
@media (max-width: 480px) {
#charts:has(.cg-grid.l6), #charts:has(.cg-grid.l61), #charts:has(.cg-grid.l12) { overflow-y:auto; }
.cg-grid.l6, .cg-grid.l61, .cg-grid.l12 { flex:none; grid-template-columns:1fr 1fr; grid-template-rows:none; }
.cg-grid.l6 .cg-cell, .cg-grid.l61 .cg-cell, .cg-grid.l12 .cg-cell { height:min(38vh, 300px); }
}
/* ⤢ full screen */
.cg-cell.full { position:fixed; inset:0; z-index:25; border-radius:0; border:none; height:auto !important;
padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.cg-cell.full .cg-head { flex-wrap:nowrap; }
.cg-cell.full .cg-head .tf-pills { display:inline-flex; order:0; flex-basis:auto; }
#pnl > * { flex-shrink:0; }
.pnl-view { display:flex; flex-direction:column; gap:10px; }
.pnl-view > * { flex-shrink:0; }
.pnl-views { align-self:flex-start; }
.pnl-history { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.pnl-history input { flex:1; min-width:180px; border-radius:999px; padding:7px 14px; text-transform:uppercase; }
.pnl-history input::placeholder { text-transform:none; }
.pnl-hist-chip { padding:4px 12px; font-size:12.5px; border-radius:999px; border-color:var(--accent); background:rgba(108,140,255,.14); }
.pnl-views button { padding:5px 14px; display:grid; place-items:center; }
.pnl-views svg { width:17px; height:17px; display:block; }
/* Analysis view */
.pnl-ana { display:flex; flex-direction:column; gap:10px; }
.ana-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:7px; }
.ana-card h4 { margin:0 0 2px; font-size:14px; }
.ana-row { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; font-variant-numeric:tabular-nums; }
.ana-row b { font-weight:600; text-align:right; }
.ana-tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:4px; }
.ana-tile { display:flex; flex-direction:column; gap:2px; font-variant-numeric:tabular-nums; }
.ana-tile > span:first-child { font-size:12px; }
.ana-tile b { font-size:17px; }
.ana-sub { font-size:12.5px; color:var(--muted); margin-top:6px; }
.ana-toggle { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); }
.ana-alloc { display:flex; flex-direction:column; gap:6px; }
.ana-stack { display:flex; gap:2px; height:12px; border-radius:6px; overflow:hidden; }
.ana-stack i { display:block; min-width:2px; }
.ana-legend { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:4px 12px; }
.ana-li { display:grid; grid-template-columns:10px 1fr auto auto; align-items:center; gap:6px; font-size:12.5px; font-variant-numeric:tabular-nums; }
.ana-sw { width:10px; height:10px; border-radius:3px; }
.ana-coin { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ana-bars-wrap { position:relative; }
.ana-bars { width:100%; height:120px; display:block; }
.ana-zero { stroke:#2a303b; stroke-width:1; }
.ana-bar.up { fill:var(--long); } .ana-bar.down { fill:var(--short); }
.ana-hit { fill:transparent; }
.ana-hit:hover { fill:rgba(255,255,255,.04); }
.ana-tip { position:absolute; top:0; transform:translateX(-50%); display:flex; gap:8px; padding:3px 8px; border-radius:8px;
background:rgba(23,26,33,.96); border:1px solid var(--line); font-size:12px; pointer-events:none; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ana-axis { display:flex; justify-content:space-between; font-size:11px; }
.ana-sym { border-top:1px solid var(--line); padding-top:8px; display:flex; flex-direction:column; gap:4px; }
.ana-sym-head { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.venue-tag { font-size:10px; font-weight:800; padding:1px 5px; border-radius:4px; color:#111; }
.venue-tag.hl { background:var(--hl); } .venue-tag.bn { background:var(--binance); } /* the chips row was being squashed to a sliver ("disconnected lines") */
#pnl .up { color:var(--long); } #pnl .down { color:var(--short); }
#pnl .small { font-size:11px; }
#pnl h3 { margin:6px 0 0; font-size:14px; }
.pnl-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.seg button { border:none; border-radius:0; background:none; padding:4px 11px; font-size:13px; }
.seg button.on { background:var(--accent); color:#111; font-weight:700; }
.pnl-status { font-size:12px; }
.pnl-setup { display:flex; flex-direction:column; gap:6px; background:var(--card); border:1px solid var(--line);
border-radius:12px; padding:10px; }
.pnl-setup input { flex:1; min-width:220px; font-family:ui-monospace, Menlo, monospace; font-size:13px; }
.pnl-eye { padding:4px 9px; }
.coin-btn { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:3px 12px 3px 5px; font-size:12.5px; font-weight:600;
background:var(--card); border:1px solid var(--line); }
.coin-btn:not(:has(img, .letter)) { padding-left:12px; }
.coin-btn .coin-logo { width:18px; height:18px; }
.coin-btn.on { border-color:var(--accent); background:rgba(108,140,255,.14); }
.coin-btn .chev { color:var(--muted); font-size:11px; }
.coin-panel { border:1px solid var(--line); border-radius:14px; background:var(--card); padding:8px; display:flex; flex-direction:column; gap:6px;
box-shadow:0 10px 28px rgba(0,0,0,.35); }
.coin-search { width:100%; box-sizing:border-box; border-radius:10px; padding:8px 10px; font-size:14px; }
.coin-options { display:flex; flex-direction:column; max-height:260px; overflow-y:auto; scrollbar-width:none; }
.coin-options::-webkit-scrollbar { display:none; }
.coin-option { display:grid; grid-template-columns:22px 1fr auto minmax(72px, auto); align-items:center; gap:10px; text-align:left;
background:none; border:none; border-radius:10px; padding:7px 8px; font-size:13.5px; font-variant-numeric:tabular-nums; }
.coin-option:hover, .coin-option:focus-visible { background:rgba(255,255,255,.05); }
.coin-option.on { background:rgba(108,140,255,.14); }
.coin-count { font-size:11px; color:var(--muted); background:rgba(255,255,255,.06); border-radius:999px; padding:1px 7px; min-width:10px; text-align:center; }
.coin-count:empty { visibility:hidden; }
.coin-net { text-align:right; font-size:12.5px; font-weight:600; }
.pnl-tripcard { border-radius:14px; padding:10px 12px; border:1px solid var(--line); background:var(--card); }
.pnl-tripcard.hl { border-color:rgba(38,217,180,.45); background:linear-gradient(160deg, rgba(38,217,180,.12), var(--card) 65%); }
.pnl-tripcard.bn { border-color:rgba(240,185,11,.45); background:linear-gradient(160deg, rgba(240,185,11,.12), var(--card) 65%); }
.tripcard-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.tripcard-head .big { margin-left:auto; font-size:16px; font-variant-numeric:tabular-nums; }
.tripcard-close { background:none; border:none; padding:2px 4px; color:var(--muted); }
.coin-logo { width:22px; height:22px; border-radius:50%; flex-shrink:0; background:#232833; object-fit:cover; }
.coin-logo.letter { display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--muted); }
.tip-row .coin-logo { width:16px; height:16px; }
.side-badge { display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.03em; padding:1px 5px; border-radius:4px; }
.side-badge.long { color:var(--long); background:rgba(47,191,113,.14); }
.side-badge.short { color:var(--short); background:rgba(229,83,75,.14); }
.card-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 12px; }
.card-grid > div { display:flex; flex-direction:column; gap:3px; min-width:0; font-variant-numeric:tabular-nums; }
.card-grid span { font-size:11px; } .card-grid b { font-size:13px; white-space:nowrap; }
.pnl-hero { border-radius:16px; padding:14px; border:1px solid rgba(108,140,255,.35);
background:linear-gradient(135deg, rgba(108,140,255,.22), rgba(38,217,180,.08) 60%, rgba(240,185,11,.06)); }
.hero-value { font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; margin:2px 0 8px; }
.hero-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.stat { display:flex; flex-direction:column; gap:3px; font-size:12px; font-variant-numeric:tabular-nums; min-width:0; }
.stat b { font-size:13px; white-space:nowrap; }
.hero-equity { font-size:12px; margin-top:8px; }
.pnl-venues { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.venue-card { border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:4px; background:var(--card); }
.venue-card.hl { border:1px solid rgba(38,217,180,.45); background:linear-gradient(160deg, rgba(38,217,180,.16), var(--card) 70%); }
.venue-card.bn { border:1px solid rgba(240,185,11,.45); background:linear-gradient(160deg, rgba(240,185,11,.16), var(--card) 70%); }
.venue-name { font-weight:700; font-size:13px; }
.venue-card.hl .venue-name { color:var(--hl); } .venue-card.bn .venue-name { color:var(--binance); }
.venue-net { font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.venue-card .stat { flex-direction:row; justify-content:space-between; gap:10px; }
.venue-net { margin-bottom:2px; }
.pnl-chartbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.seg.small button { padding:3px 9px; font-size:12px; }
.pnl-filters { display:flex; gap:8px; flex-wrap:wrap; }
.hero-trades { display:flex; gap:10px; flex-wrap:wrap; font-size:12px; margin-top:8px; font-variant-numeric:tabular-nums; }
.pnl-tip { position:absolute; z-index:5; min-width:150px; max-width:calc(100% - 8px); background:rgba(23,26,33,.96); border:1px solid var(--line);
border-radius:10px; padding:6px 8px; font-size:12px; pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.45); }
.tip-row { display:flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
.tip-row b:last-child { margin-left:auto; padding-left:10px; }
.tip-time { margin-bottom:3px; }
.tip-trade { margin-top:5px; padding-top:5px; border-top:1px solid var(--line); }
.tip-trade > div:last-child { font-size:11px; margin-top:2px; white-space:nowrap; }
.tip-row i { width:8px; height:8px; border-radius:50%; display:inline-block; }
.pnl-legend { display:flex; gap:12px; font-size:12px; color:var(--muted); }
/* Calendar: realised P&L per day, tinted by size, with a teal/gold platform split */
.pnl-cal { display:flex; flex-direction:column; gap:8px; }
.cal-head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cal-title { font-size:15px; min-width:120px; text-align:center; }
.cal-nav { width:30px; height:30px; padding:0; border-radius:50%; font-size:17px; line-height:1; }
.cal-nav:disabled { opacity:.35; }
.cal-sum { font-size:12px; margin-left:auto; font-variant-numeric:tabular-nums; }
.cal-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
.cal-wd { font-size:10.5px; color:var(--muted); text-align:center; text-transform:uppercase; letter-spacing:.03em; padding-bottom:2px; }
.cal-day { position:relative; aspect-ratio:1 / 1; min-height:44px; border-radius:10px; background:rgba(255,255,255,.025);
border:1px solid transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
padding:3px 2px 7px; font-variant-numeric:tabular-nums; overflow:hidden; color:var(--text); }
button.cal-day { cursor:pointer; }
.cal-day.today { border-color:rgba(108,140,255,.6); }
.cal-day.on { outline:2px solid var(--accent); outline-offset:-2px; }
.cal-n { position:absolute; top:3px; left:5px; font-size:10px; color:var(--muted); }
.cal-amt { font-size:11.5px; font-weight:700; white-space:nowrap; }
.cal-day.up .cal-amt { color:#7ee2a8; } .cal-day.down .cal-amt { color:#ff9b94; }
.cal-bar { position:absolute; left:5px; right:5px; bottom:4px; height:3px; border-radius:2px; display:flex; overflow:hidden; gap:1px; }
.cal-bar i { display:block; height:100%; }
.cal-legend { display:flex; gap:12px; font-size:11.5px; }
.cal-detail { border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:6px; background:var(--card); }
.cal-detail-head { font-size:13px; color:var(--muted); }
.cal-detail-total { font-size:18px; font-variant-numeric:tabular-nums; }
.cal-row { display:flex; align-items:center; gap:8px; font-size:13px; font-variant-numeric:tabular-nums; }
.cal-row b { margin-left:auto; }
.cal-row .coin-logo { width:18px; height:18px; }
.cal-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
@media (max-width: 420px) { .cal-amt { font-size:10px; } .cal-day { border-radius:8px; min-height:40px; } }
.legend-item { display:flex; align-items:center; gap:5px; }
.legend-item i { width:10px; height:10px; border-radius:50%; display:inline-block; }
.pnl-chart { height:200px; position:relative; }
/* positions / closed trades: one consolidated card, compact two-line rows that fit a phone */
.pnl-list { display:flex; flex-direction:column; border-radius:14px; overflow:hidden; border:1px solid var(--line);
background:linear-gradient(180deg, rgba(108,140,255,.07), var(--card) 40%); }
.pnl-cells { display:grid; grid-template-columns:minmax(74px, 1.25fr) repeat(4, minmax(0, 1fr)); gap:6px; align-items:center; }
.pnl-head { padding:7px 10px; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;
border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); }
.pnl-head .pnl-cell span + span::before { content:""; }
.pnl-row { padding:8px 10px; border-bottom:1px solid var(--line); border-left:3px solid transparent; cursor:pointer;
font-variant-numeric:tabular-nums; }
.pnl-row:last-child { border-bottom:none; }
.pnl-row.hl { border-left-color:var(--hl); background:linear-gradient(90deg, rgba(38,217,180,.07), transparent 35%); }
.pnl-row.bn { border-left-color:var(--binance); background:linear-gradient(90deg, rgba(240,185,11,.07), transparent 35%); }
.pnl-row.open { background-color:rgba(108,140,255,.06); }
.pnl-cell { display:flex; flex-direction:column; min-width:0; text-align:right; }
.pnl-cell:first-child { text-align:left; align-items:flex-start; }
.pnl-cell b, .pnl-cell span { white-space:nowrap; }
.coin-id { display:flex; align-items:center; gap:7px; }
.coin-text { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.pnl-head .pnl-cell:first-child { padding-left:29px; } /* line up with the coin name, past the logo */
@supports (grid-template-columns: subgrid) {
.pnl-list { display:grid; grid-template-columns:max-content repeat(4, minmax(max-content, 1fr)); column-gap:12px;
overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
.pnl-list::-webkit-scrollbar { display:none; }
.pnl-list > *, .pnl-row > .pnl-cells { grid-column:1 / -1; }
.pnl-row, .pnl-list > .pnl-cells, .pnl-row > .pnl-cells { display:grid; grid-template-columns:subgrid; }
.pnl-row > .pnl-details { grid-column:1 / -1; }
}
.pnl-cell b { font-size:12.5px; font-weight:600; }
.pnl-cell b.big { font-size:13.5px; font-weight:800; }
.pnl-cell > span { font-size:11px; }
.pnl-cell .coin { display:flex; align-items:center; gap:5px; font-size:13.5px; font-weight:800; }
.pnl-cell .side-badge { margin-top:2px; }
.pnl-details { margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); cursor:default; }
.pnl-empty { padding:12px; }
.pnl-post { margin-top:6px; padding:2px 8px; font-size:12px; }
@media (max-width: 520px) {
.hero-stats { grid-template-columns:repeat(2, 1fr); row-gap:10px; }
.card-grid { grid-template-columns:repeat(2, 1fr); }
.pnl-list { column-gap:9px; }
.pnl-row, .pnl-head { padding-left:8px; padding-right:8px; }
.pnl-cell b { font-size:12px; } .pnl-cell b.big { font-size:12.5px; } .pnl-cell > span { font-size:10.5px; }
.coin-logo { width:20px; height:20px; }
.pnl-head .pnl-cell:first-child { padding-left:27px; }
}
/* No visible scrollbars (wheel/trackpad/touch scrolling still works). */
#feed, #pnl, #signals, .sig-list, #sectionInputs, #text { scrollbar-width:none; }
#feed::-webkit-scrollbar, #pnl::-webkit-scrollbar, #signals::-webkit-scrollbar, .sig-list::-webkit-scrollbar,
#sectionInputs::-webkit-scrollbar, #text::-webkit-scrollbar { display:none; }
/* Last on purpose: elements styled display:flex/grid would otherwise ignore the hidden attribute. */
[hidden] { display:none !important; }
/* watchlist flag colours across the app */
.wl-fdot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; vertical-align:middle; flex-shrink:0; }
.cg-sym.flagged { box-shadow:inset 3px 0 0 var(--flag); padding-left:9px; }
.cg-paint { display:none; }
@media (max-width: 700px) { /* phones: 🎨 beside each chart's 🔑 Levels, not in the toolbar */
.cg-bar [aria-label="Chart colours"] { display:none; }
.cg-paint { display:inline-block; margin-left:4px; padding:2px 8px; font-size:11.5px; border-radius:999px; background:rgba(15,17,21,.82);
border:1px solid var(--line); vertical-align:top; }
}
.cg-star.on { color:#f0b90b; }
.wl-add { display:flex; gap:6px; }
.wl-add input { flex:1; min-width:0; }
.wl-add-btn { padding:4px 12px; border-radius:999px; font-size:15px; }
.wl-label { display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.wl-label b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; }
.wl-src { font-size:10.5px; color:var(--muted); }
.wl-sugg-item { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ss-badge.spot, .ss-badge.binance, .ss-badge.yahoo { font-weight:700; }
.wl-flag { cursor:pointer; border:none; }
.wl-move { display:flex; flex-direction:column; gap:2px; padding:8px; margin:2px 0 6px; border:1px solid var(--line); border-radius:10px;
background:rgba(23,26,33,.98); }
.wl-move-title { font-size:11.5px; padding:2px 4px; }
.wl-move-item { display:flex; align-items:center; gap:8px; text-align:left; background:none; border:none; padding:7px 8px; border-radius:8px; }
.wl-move-item.on { background:rgba(108,140,255,.14); }
.cg-toast { position:absolute; left:50%; top:8px; transform:translateX(-50%); z-index:6; padding:4px 12px; border-radius:999px; font-size:12.5px;
background:rgba(23,26,33,.95); color:var(--text); border:1px solid var(--line); pointer-events:none; animation:msgIn .2s ease-out both; }
#wBack .wl-dot { width:8px; height:8px; border-radius:50%; display:inline-block; vertical-align:middle; }
/* stocks outside regular hours: pre / post market price */
.cg-ext { font-size:11px; opacity:.9; padding:1px 6px; border-radius:999px; background:rgba(128,128,128,.14); white-space:nowrap; }
.wl-ext { display:block; font-size:10.5px; color:var(--muted); white-space:nowrap; }
.wl-ext:empty { display:none; }
.wl-ext.up { color:#2fbf71; } .wl-ext.down { color:#e5534b; }
/* watchlist sections (renamable separators) and drag to reorder */
.wl-section { display:flex; align-items:center; gap:4px; padding-top:8px; padding-bottom:4px; cursor:pointer; text-transform:uppercase; letter-spacing:.04em; font-size:11.5px; color:var(--muted); }
.wl-section .wl-sec-name { font-weight:700; color:var(--text); cursor:text; }
.wl-section .wl-sec-count { font-size:10.5px; margin-left:2px; }
.wl-section .wl-del { margin-left:auto; }
.wl-sec-input { font-size:12px; padding:2px 6px; text-transform:uppercase; width:12em; }
.wl-grip, .wl-caret { background:none; border:0; padding:0 3px; color:var(--muted); min-width:0; font-size:12px; }
.wl-grip { cursor:grab; touch-action:none; letter-spacing:-2px; }
.wl-flag { touch-action:none; }
.wl-row.dragging { opacity:.45; }
.wl-row.drop-before { box-shadow:inset 0 2px 0 var(--accent); }
.wl-row.drop-after { box-shadow:inset 0 -2px 0 var(--accent); }
.wl-row[hidden] { display:none; }
.wl-import { font-size:12px; padding:5px 10px; border:1px solid var(--line); border-radius:8px; cursor:pointer; color:var(--muted); }
.wl-import:hover { color:var(--text); }
/* MEXC / OANDA feeds */
.ss-badge.mexc { color:#3b82f6; background:rgba(59,130,246,.13); }
.ss-badge.oanda { color:#26a69a; background:rgba(38,166,154,.13); }
/* legend title, like TradingView's "GoPro, Inc. · 1M · NASDAQ" */
.cg-lg-title { display:inline-flex; align-items:center; gap:5px; font-weight:600; color:var(--text); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.cg-legend .cg-lg-title { color:inherit; }
.cg-lg-title .coin-logo { width:16px; height:16px; font-size:9px; }
.ss-badge.cryptocap { color:#9aa4b2; background:rgba(154,164,178,.14); }
/* one set of columns for the whole list (subgrid): prices / changes line up and take only the width they need */
@supports (grid-template-columns: subgrid) {
.wl-rows { display:grid; grid-template-columns:6px minmax(0, 1fr) max-content max-content 22px; column-gap:8px; }
.wl-rows > .wl-row { grid-column:1 / -1; grid-template-columns:subgrid; }
.wl-rows > :not(.wl-row), .wl-rows > .wl-section { grid-column:1 / -1; }
}
/* info beside the ticker: the only thing in the header that gives way (truncates, then hides) — never into the price */
.cg-info { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; color:var(--muted);
display:inline-flex; align-items:center; gap:5px; }
.cg-info:empty { display:none; }
.cg-info-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cg-info .coin-logo { width:15px; height:15px; font-size:9px; flex-shrink:0; }
.cg-head .cg-price, .cg-head .cg-sym { flex-shrink:0; }
/* ticker, price, then the info filling only what's left (truncated: never into the price) */
.cg-head > .cg-info { flex:0 1 auto; }
@media (max-width: 700px) {
.cg-head > .cg-info { flex:1 1 0; font-size:10.5px; }
.cg-head > .cg-tools { order:3; } /* wrapped headers: tools stay on the first row after the info */
}
.cg-grid.l12 .cg-head > .cg-info, .cg-grid.l61 .cg-head > .cg-info { flex:1 1 0; }
/* candle legend: O H L C | change · Vol — one line on desktop, two lines on phones */
.cg-lg-row { display:inline-flex; gap:2px 9px; align-items:baseline; white-space:nowrap; }
@media (max-width: 700px) { /* phones: below the Levels pill — O H L C, then change · Vol */
.kl-ui .cg-legend, .cg-legend { display:flex; flex-direction:column; align-items:flex-start; gap:1px; margin:4px 0 0 2px; }
}
.wl-row:not(.wl-section) { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; } /* long-press drags, doesn't select */
@media (hover: hover) { .wl-row:not(.wl-section):active { cursor:grabbing; } }
/* watchlist: the header (lists, add, filter) stays at the top while the list scrolls */
.wl-top { position:sticky; top:0; z-index:3; background:var(--card); padding-bottom:4px; }
.wl-filter { width:100%; box-sizing:border-box; margin-top:4px; font-size:13px; padding:5px 9px; border-radius:8px; }
/* prices: green when the last trade was higher, red when lower (like TradingView) */
.wl-px.up { color:var(--long); }
.wl-px.down { color:var(--short); }
.cg-px.up, .cg-chg.up { color:var(--long); }
.cg-px.down, .cg-chg.down { color:var(--short); }
.wl-src:empty { display:none; }
.wl-src { letter-spacing:.03em; }
/* search rows: the logo slot is fixed; a watchlist's colour shows as a dot on its corner (nothing moves) */
.ss-logo { position:relative; display:inline-flex; flex-shrink:0; }
.ss-logo .ss-flag { position:absolute; right:-2px; bottom:-2px; width:8px; height:8px; margin:0; border-radius:50%; box-shadow:0 0 0 2px var(--card); }
/* the selected chart's ticker, highlighted in the watchlist */
.wl-row.current { background:rgba(108,140,255,.16); box-shadow:inset 3px 0 0 var(--accent); }
/* Colour picker (ChartDraw.colorInput): a round swatch that can't be squashed into an oval, and our own popover */
.cp-btn { flex:none; box-sizing:border-box; width:26px !important; height:26px !important; min-width:0 !important; min-height:0;
padding:3px !important; border:none !important; border-radius:50% !important; cursor:pointer; aspect-ratio:1;
background:conic-gradient(#e5534b, #d4a72c, #2fbf71, #22b8cf, #5b9cf5, #a371f7, #e5534b) !important; position:relative; }
.cp-btn::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--cp); box-shadow:0 0 0 2px var(--bg); }
.cp-btn:hover { transform:scale(1.08); }
.cg-color .cp-btn { background:var(--line) !important; padding:0 !important; }
.cg-color .cp-btn::after { inset:2px; box-shadow:none; }
.draw-swatch, .wl-swatch { flex:none; aspect-ratio:1; box-sizing:border-box; }
.cp-pop { position:fixed; z-index:1000; width:220px; padding:12px; display:grid; gap:10px; background:var(--card2);
border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.45); touch-action:none; }
.cp-sv { position:relative; height:140px; border-radius:8px; cursor:crosshair; }
.cp-hue { position:relative; height:12px; border-radius:6px; cursor:pointer;
background:linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cp-sv i, .cp-hue i { position:absolute; width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
transform:translate(-50%, -50%); pointer-events:none; box-sizing:border-box; }
.cp-hue i { top:50%; }
.cp-row { display:flex; gap:8px; align-items:center; }
.cp-now { width:28px; height:28px; border-radius:8px; flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.cp-hex { flex:1; min-width:0; font:13px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform:uppercase; padding:5px 8px; }
.cp-presets { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; }
.cp-preset { aspect-ratio:1; width:100%; min-width:0; padding:0; border-radius:50%; border:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.cp-preset:hover { transform:scale(1.1); }
/* the price axis's last-price box: price, and the candle's countdown under it (TradingView) */
.cg-cd { position:absolute; right:0; z-index:3; pointer-events:none; box-sizing:border-box; padding:1px 2px 2px; text-align:center;
display:flex; flex-direction:column; align-items:center; border-radius:2px;
font:11px/14px -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif; font-variant-numeric:tabular-nums; }
.cg-cd[hidden] { display:none; }
.cg-cd b { font-weight:400; }
.cg-cd span { font-size:10.5px; line-height:13px; opacity:.9; }
.cg-body { touch-action:none; } /* the chart takes every gesture: pinch zooms it, not the page */
@media (max-width: 700px) { /* phones: the chart's header (ticker, price, timeframes, tools) under the chart, in thumb reach */
.cg-cell > .cg-head { order:2; border-bottom:none; border-top:1px solid #1b1f27; }
.cg-cell.full > .cg-head { padding-bottom:max(4px, env(safe-area-inset-bottom, 0px)); }
}