/* Chart Coast (2026-10-16): the in-app chart page. Same sea/teal theme as the rest of the app; built for
   desktop and phone (chart first, panels stack under it). */
#page-chart .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cc-bar, .cc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; }
.cc-sym { display: flex; gap: 6px; flex: 0 1 230px; min-width: 0; }
.cc-sym input, .cc-in { flex: 1; min-width: 0; font: 500 14px var(--f-mono); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.cc-sym input { text-transform: uppercase; }
.cc-sym input:focus, .cc-in:focus, .cc-sel:focus, .cc-reason:focus { outline: none; border-color: var(--tide); box-shadow: 0 0 10px -2px color-mix(in srgb, var(--glow) 60%, transparent); }
.cc-btn, .cc-tf, .cc-chip, .cc-d { font: 500 12px var(--f-mono); letter-spacing: .03em; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; cursor: pointer; min-height: 34px; }
.cc-btn:hover, .cc-tf:hover, .cc-chip:hover, .cc-d:hover { border-color: color-mix(in srgb, var(--tide) 60%, var(--line)); }
.cc-btn:focus-visible, .cc-tf:focus-visible, .cc-chip:focus-visible, .cc-d:focus-visible, .cc-link:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.cc-btn.primary { background: var(--tide); color: var(--bg); border-color: var(--tide); font-weight: 700; }
.cc-btn:disabled, .cc-d:disabled { opacity: .5; cursor: not-allowed; }
.cc-btn[aria-pressed="true"] { border-color: #ffab66; color: #ffab66; }
.cc-tfs { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-tf { padding: 7px 9px; min-width: 40px; }
.cc-tf[aria-pressed="true"], .cc-chip[aria-pressed="true"] { color: var(--bg); background: var(--tide); border-color: var(--tide); }
.cc-chip { border-radius: 999px; }
.cc-chip[data-layer="auto"][aria-pressed="true"] { background: #b9b2ff; border-color: #b9b2ff; }
.cc-lab { font: 600 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-width: 44px; }
.cc-sel { font: 500 13px var(--f-mono); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 7px 8px; min-height: 34px; max-width: 100%; }
#cc-card { flex: 1 1 320px; min-width: 0; }
.cc-live { font: 600 12px var(--f-mono); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); margin-left: auto; white-space: nowrap; }
.cc-live::before { content: "●"; margin-right: 6px; }
.cc-live.live { color: #3fcf9a; border-color: color-mix(in srgb, #3fcf9a 45%, var(--line)); }
.cc-live.wait { color: var(--tide); }
.cc-live.stale { color: #ffab66; border-color: color-mix(in srgb, #ffab66 45%, var(--line)); }
.cc-live.bad { color: #ef6f6f; border-color: color-mix(in srgb, #ef6f6f 45%, var(--line)); }
.cc-live.hist { color: #e2c06f; }
.cc-chartwrap { position: relative; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel) 85%, #000); overflow: hidden; margin: 4px 0 12px; }
.cc-chart { height: min(64vh, 620px); min-height: 360px; width: 100%; }
/* Settings · Charts · White chart background */
html[data-chart-bg="white"] .cc-chartwrap, html[data-chart-bg="white"] .cc-chartwrap.full { background: #ffffff; border-color: #d3dde0; }
.cc-ohlc { position: absolute; left: 10px; top: 8px; font: 500 11px var(--f-mono); color: var(--muted); pointer-events: none; z-index: 3; background: color-mix(in srgb, var(--panel) 70%, transparent); padding: 3px 6px; border-radius: 6px; max-width: calc(100% - 90px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-ohlc b { color: var(--ink); }
.cc-ohlc span { color: var(--ink); }
.cc-ohlc .up { color: #3fcf9a; } .cc-ohlc .dn { color: #ef6f6f; }
.cc-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 34px; z-index: 4; font: 600 11px var(--f-mono); color: var(--bg); background: #ffab66; padding: 5px 10px; border-radius: 999px; max-width: 80%; text-align: center; pointer-events: none; }
.cc-banner { position: absolute; left: 10px; right: 90px; top: 34px; z-index: 3; font: 500 12px var(--f-mono); color: var(--ink); background: color-mix(in srgb, #e2c06f 18%, var(--panel)); border: 1px solid color-mix(in srgb, #e2c06f 50%, var(--line)); border-radius: 10px; padding: 6px 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cc-banner.bad { background: color-mix(in srgb, #ef6f6f 16%, var(--panel)); border-color: color-mix(in srgb, #ef6f6f 50%, var(--line)); }
.cc-banner .cc-btn { min-height: 28px; padding: 4px 10px; }
.cc-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 860px) { .cc-grid { grid-template-columns: minmax(0, 1fr); } .cc-chart { height: 58vh; min-height: 320px; } .cc-live { margin-left: 0; } .cc-banner { right: 10px; } }
.cc-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.cc-panel h3 { margin: 0 0 6px; font: 700 15px var(--f-display); letter-spacing: .04em; color: var(--ink); }
.cc-id { font-family: var(--f-mono); font-size: 12px; color: var(--tide); font-weight: 600; word-break: break-all; }
.cc-meta, .cc-muted, .cc-small { font: 400 12px var(--f-mono); color: var(--muted); }
.cc-small { font-size: 11px; }
.cc-bad { color: #ef6f6f; font: 500 12px var(--f-mono); }
.cc-sum, .cc-hist, .cc-teach { margin: 8px 0; font: 400 12px var(--f-mono); color: var(--ink); }
.cc-sum summary, .cc-hist summary, .cc-teach summary { cursor: pointer; color: var(--tide); font-weight: 600; }
.cc-sum div { white-space: pre-wrap; margin-top: 6px; color: var(--muted); }
.cc-hist ul { margin: 6px 0 0; padding-left: 16px; }
.cc-step { border-top: 1px solid var(--line); padding: 10px 0; }
.cc-step-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font: 500 13px var(--f-mono); color: var(--ink); }
.cc-iris { font: 400 12px var(--f-mono); color: var(--ink); margin: 6px 0; overflow-wrap: anywhere; }
.cc-tag { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bg); background: var(--tide); border-radius: 5px; padding: 1px 5px; margin-right: 4px; }
.cc-prev { font-size: 11px; border-radius: 6px; padding: 1px 6px; border: 1px solid var(--line); }
.cc-prev.ok { color: #3fcf9a; } .cc-prev.no { color: #ef6f6f; }
.cc-dec { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-d[aria-checked="true"].correct { background: #3fcf9a; border-color: #3fcf9a; color: #06231a; }
.cc-d[aria-checked="true"].incorrect { background: #ef6f6f; border-color: #ef6f6f; color: #2a0909; }
.cc-d[aria-checked="true"].unconfirmed { background: #e2c06f; border-color: #e2c06f; color: #2a2108; }
.cc-fix { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.cc-corr { font: 500 12px var(--f-mono); color: #ffab66; }
.cc-reason { width: 100%; box-sizing: border-box; margin-top: 8px; font: 400 13px var(--f-mono); color: var(--ink); background: color-mix(in srgb, var(--panel) 70%, #000); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; resize: vertical; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.cc-msg { font: 500 12px var(--f-mono); margin: 8px 0 0; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); color: var(--ink); }
.cc-msg.good { border-color: color-mix(in srgb, #3fcf9a 50%, var(--line)); background: color-mix(in srgb, #3fcf9a 10%, transparent); }
.cc-msg.bad { border-color: color-mix(in srgb, #ef6f6f 50%, var(--line)); background: color-mix(in srgb, #ef6f6f 10%, transparent); }
.cc-memo { margin-top: 10px; font: 400 12px var(--f-mono); color: var(--muted); }
.cc-memo b { color: var(--ink); }
.cc-link { font: 500 12px var(--f-mono); color: var(--tide); background: none; border: 0; padding: 2px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cc-del { color: #ef8f7f; }
.cc-dl { list-style: none; margin: 6px 0 0; padding: 0; max-height: 460px; overflow: auto; }
.cc-dl li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 4px; border-top: 1px solid var(--line); }
.cc-dl li.sel { background: color-mix(in srgb, var(--tide) 10%, transparent); border-radius: 8px; }
.cc-sw { width: 10px; height: 10px; border-radius: 3px; margin-top: 4px; flex: none; }
.cc-dtx { flex: 1; min-width: 0; font: 500 12px var(--f-mono); color: var(--ink); }
.cc-dtx .cc-in { width: 100%; box-sizing: border-box; margin-top: 4px; font-size: 12px; padding: 5px 8px; }
.cc-foot { font: 400 11px var(--f-mono); color: var(--muted); margin: 12px 0 0; }
.cc-open-row { margin: 6px 0 2px; }
.cc-open { font: 600 11px var(--f-mono); letter-spacing: .05em; color: var(--tide); background: transparent; border: 1px solid color-mix(in srgb, var(--tide) 45%, var(--line)); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.cc-open:hover { background: color-mix(in srgb, var(--tide) 12%, transparent); }
#cc-teach-note { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
@media (max-width: 600px) {
  .cc-bar, .cc-row { gap: 6px; margin-bottom: 6px; }
  .cc-sym { flex: 1 1 100%; }
  .cc-tfs { flex: 1 1 100%; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .cc-tf { min-width: 0; padding: 6px 0; }
  .cc-cardrow { flex-wrap: nowrap; } .cc-cardrow .cc-lab { display: none; } #cc-card { flex: 1 1 auto; }
  .cc-layers, .cc-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .cc-layers::-webkit-scrollbar, .cc-tools::-webkit-scrollbar { display: none; }
  .cc-layers .cc-lab, .cc-tools .cc-lab { display: none; }
  .cc-chip, .cc-btn, .cc-tf, .cc-sel { min-height: 32px; white-space: nowrap; }
  .cc-tools .cc-sel { flex: 1 0 auto; }
  .cc-chart { height: 56vh; min-height: 300px; }
}
.cc-clear { color: #ef8f7f; border-color: color-mix(in srgb, #ef6f6f 40%, var(--line)); }
.cc-clear:hover:not(:disabled) { background: color-mix(in srgb, #ef6f6f 12%, transparent); }
.cc-dclear { margin: 4px 0 6px; }

/* Full screen chart + slim markup rail (2026-10-16) */
.cc-fs { position: absolute; top: 6px; right: 76px; z-index: 6; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer;
  background: color-mix(in srgb, var(--panel) 85%, transparent) center / 16px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2380e2d4' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1.5 5.5v-4h4M10.5 1.5h4v4M14.5 10.5v4h-4M5.5 14.5h-4v-4'/%3E%3C/svg%3E"); }
.cc-fs[aria-pressed="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2380e2d4' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5.5 1.5v4h-4M14.5 5.5h-4v-4M10.5 14.5v-4h4M1.5 10.5h4v4'/%3E%3C/svg%3E"); }
.cc-fs:hover { border-color: var(--tide); }
.cc-fs:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.cc-rail { display: none; }
.cc-chartwrap.full { position: fixed; inset: 0; z-index: 1000; margin: 0; border-radius: 0; border: 0; display: flex; background: var(--bg, #03141a);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.cc-chartwrap.full .cc-chart { flex: 1 1 auto; height: auto; min-height: 0; min-width: 0; }
.cc-chartwrap.full .cc-rail { display: flex; flex-direction: column; align-items: stretch; gap: 3px; flex: none; width: 50px; padding: 8px 5px; box-sizing: border-box;
  overflow-y: auto; scrollbar-width: none; background: color-mix(in srgb, var(--panel) 92%, #000); border-right: 1px solid var(--line); }
.cc-chartwrap.full .cc-rail::-webkit-scrollbar { display: none; }
.cc-chartwrap.full .cc-ohlc { left: 60px; max-width: calc(100% - 200px); }
.cc-chartwrap.full .cc-banner { left: 60px; }
.cc-chartwrap.full .cc-hint { left: calc(50% + 25px); }
.cc-rb { font: 700 10px var(--f-mono); letter-spacing: .02em; color: var(--ink); background: transparent; border: 1px solid transparent; border-left: 3px solid var(--rc, transparent);
  border-radius: 7px; padding: 0 2px; min-height: 30px; cursor: pointer; white-space: nowrap; flex: none; }
.cc-rb:hover:not(:disabled) { background: color-mix(in srgb, var(--tide) 12%, transparent); }
.cc-rb.on { background: color-mix(in srgb, var(--rc, var(--tide)) 26%, transparent); border-color: var(--rc, var(--tide)); color: #fff; }
.cc-rb:disabled { opacity: .35; cursor: default; }
.cc-rb:focus-visible { outline: 2px solid var(--tide); outline-offset: 1px; }
.cc-rclear:not(:disabled) { color: #ef8f7f; }
.cc-rsep { height: 1px; background: var(--line); margin: 3px 2px; flex: none; }
.cc-rdot { width: 8px; height: 8px; border-radius: 50%; margin: 2px auto 6px; background: var(--muted); flex: none; }
.cc-rdot.live { background: #3fcf9a; box-shadow: 0 0 8px #3fcf9a; } .cc-rdot.stale, .cc-rdot.hist { background: #ffab66; } .cc-rdot.bad { background: #ef6f6f; } .cc-rdot.wait { background: var(--tide); }
.cc-rtf { font: 600 10px var(--f-mono); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 4px 0; text-align: center; margin-top: 2px; flex: none; }
html.cc-noscroll, html.cc-noscroll body { overflow: hidden; }
@media (max-width: 600px) { .cc-chartwrap.full .cc-rail { width: 44px; } .cc-chartwrap.full .cc-ohlc { left: 52px; max-width: calc(100% - 190px); } .cc-rb { font-size: 9px; } .cc-fs { right: 66px; } }
#cc-r-undo { font-size: 16px; }

/* Fibonacci / box / trend line tools + colours (2026-10-16) */
.cc-rcol { display: flex; align-items: center; justify-content: center; }
.cc-rcol span { width: 18px; height: 18px; border-radius: 50%; background: var(--sw, #80e2d4); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--line); }
.cc-rcol[aria-expanded="true"] span { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--tide); }
.cc-pal { position: absolute; left: 58px; z-index: 20; width: 188px; padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--tide) 40%, var(--line));
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .7); font: 500 11px var(--f-mono); color: var(--ink); }
.cc-pal-h { margin-bottom: 8px; color: var(--muted); letter-spacing: .04em; }
.cc-pal-g { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cc-sw2 { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.cc-sw2.on { border-color: #fff; }
.cc-sw2:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.cc-pal-f { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 6px; }
.cc-pal-f label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.cc-pal input[type="color"], .cc-dcol { width: 26px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.cc-dcol { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.cc-dcol::-webkit-color-swatch-wrapper, .cc-pal input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.cc-dcol::-webkit-color-swatch, .cc-pal input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
@media (max-width: 600px) { .cc-pal { left: 50px; } }

/* Full screen like the TradingView phone app (2026-10-16): header with symbol + timeframes, collapsible tool rail,
   handles on the selected drawing, floating toolbar for it. */
.cc-ftop, .cc-seltool { display: none; }
.cc-chartwrap.full { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overscroll-behavior: none; }
.cc-chartwrap.full .cc-ftop { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 6px; padding: 6px 8px; min-height: 44px; box-sizing: border-box;
  background: color-mix(in srgb, var(--panel) 92%, #000); border-bottom: 1px solid var(--line); min-width: 0; }
.cc-chartwrap.full .cc-rail { grid-column: 1; grid-row: 2; }
.cc-chartwrap.full .cc-chart { grid-column: 2; grid-row: 2; touch-action: none; }
.cc-chartwrap.full.norail .cc-rail { display: none; }
.cc-chartwrap.full.norail .cc-chart { grid-column: 1 / -1; }
.cc-chartwrap.full .cc-fs { display: none; }
.cc-chartwrap.full .cc-ohlc { top: 52px; }
.cc-chartwrap.full .cc-banner { top: 76px; }
.cc-chartwrap.full.norail .cc-ohlc, .cc-chartwrap.full.norail .cc-banner { left: 10px; }
.cc-chartwrap.full.norail .cc-hint { left: 50%; }
.cc-tb { flex: none; width: 34px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 15px var(--f-mono); cursor: pointer; }
.cc-tb.on { background: color-mix(in srgb, var(--tide) 22%, transparent); border-color: var(--tide); color: #fff; }
.cc-tb:disabled { opacity: .35; }
.cc-tb:focus-visible, .cc-ft-tf:focus-visible, .cc-st-b:focus-visible { outline: 2px solid var(--tide); outline-offset: 1px; }
.cc-ft-sym { flex: 0 1 120px; min-width: 76px; }
.cc-ft-sym input { width: 100%; box-sizing: border-box; font: 700 14px var(--f-mono); color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 6px; text-transform: uppercase; }
.cc-ft-sym input:focus { outline: none; border-color: var(--tide); background: var(--panel); }
.cc-ft-tfs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.cc-ft-tfs::-webkit-scrollbar { display: none; }
.cc-ft-tf { flex: none; font: 600 12px var(--f-mono); color: var(--muted); background: transparent; border: 0; border-radius: 7px; padding: 7px 8px; cursor: pointer; }
.cc-ft-tf[aria-pressed="true"] { color: var(--bg); background: var(--tide); }
.cc-ft-live { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); margin: 0 4px; }
.cc-ft-live.live { background: #3fcf9a; box-shadow: 0 0 8px #3fcf9a; } .cc-ft-live.stale, .cc-ft-live.hist { background: #ffab66; } .cc-ft-live.bad { background: #ef6f6f; } .cc-ft-live.wait { background: var(--tide); }
.cc-chartwrap.full .cc-seltool:not([hidden]) { display: flex; position: absolute; top: 88px; left: 50%; transform: translateX(-50%); z-index: 15; align-items: center; gap: 4px;
  padding: 5px 6px; border-radius: 12px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--tide) 40%, var(--line)); box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .7); white-space: nowrap; }
.cc-st-n { font: 600 11px var(--f-mono); color: var(--muted); padding: 0 6px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.cc-st-b { font: 600 12px var(--f-mono); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 8px; min-width: 34px; height: 32px; padding: 0 9px; cursor: pointer; }
.cc-st-b.cc-rcol { padding: 0; width: 34px; }
.cc-st-del { color: #ef8f7f; }
@media (max-width: 600px) { .cc-chartwrap.full .cc-ohlc { top: 50px; left: 52px; } .cc-ft-pairb { font-size: 13px; padding: 0 6px; } .cc-pairmenu { width: min(260px, calc(100vw - 16px)); } .cc-ft-tf { padding: 7px 7px; } .cc-st-n { display: none; } .cc-chartwrap.full .cc-seltool:not([hidden]) { top: 86px; } }
@media (orientation: landscape) and (max-height: 500px) { .cc-chartwrap.full .cc-ftop { min-height: 38px; padding: 3px 8px; } .cc-chartwrap.full .cc-ohlc { top: 44px; } .cc-chartwrap.full .cc-rail { gap: 1px; } .cc-rb { min-height: 26px; } }

/* Teach IRIS what I marked */
.cc-ll { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.cc-ll li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; }
.cc-lchk { display: flex; gap: 8px; align-items: center; min-width: 0; font-size: 13px; cursor: pointer; }
.cc-lchk > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cc-lsw { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.cc-lstep { max-width: 170px; }
@media (max-width: 600px) { .cc-ll li { grid-template-columns: 1fr; } .cc-lstep { max-width: none; width: 100%; } }
#cc-learn .cc-in { display: block; width: 100%; box-sizing: border-box; margin: 6px 0; }

/* 2026-10-17: phone toolbars come and go — size the chart to the visible screen, and keep full screen from zooming the page */
@supports (height: 1dvh) {
  .cc-chart { height: min(64dvh, 620px); }
  @media (max-width: 860px) { .cc-chart { height: 58dvh; } }
  @media (max-width: 600px) { .cc-chart { height: 56dvh; } }
}
.cc-chartwrap.full { touch-action: none; }
.cc-chartwrap.full .cc-rail { touch-action: pan-y; }
.cc-chartwrap.full .cc-ft-tfs { touch-action: pan-x; }

/* 2026-10-17: pair menu in the full-screen header (your red-flagged pairs) */
.cc-ft-pair { position: relative; flex: none; }
.cc-ft-pairb { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 700 14px var(--f-mono); cursor: pointer; max-width: 140px; }
.cc-ft-pairb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-ft-pairb i { font-style: normal; font-size: 11px; color: var(--tide); }
.cc-ft-pairb[aria-expanded="true"], .cc-ft-pairb:hover { border-color: var(--tide); }
.cc-ft-pairb:focus-visible { outline: 2px solid var(--tide); outline-offset: 1px; }
.cc-pairmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 240px; max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: 6px; box-sizing: border-box; border-radius: 12px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--tide) 40%, var(--line)); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .75); }
.cc-pairmenu[hidden] { display: none; }
.cc-pm-q { width: 100%; box-sizing: border-box; font: 600 14px var(--f-mono); color: var(--ink); background: color-mix(in srgb, var(--panel) 70%, #000); border: 1px solid var(--line); border-radius: 8px; padding: 8px; text-transform: uppercase; }
.cc-pm-q::placeholder { text-transform: none; color: var(--muted); }
.cc-pm-q:focus { outline: none; border-color: var(--tide); }
.cc-pm-h { font: 600 10px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 6px 4px; }
.cc-pm-l { display: flex; flex-direction: column; gap: 1px; }
.cc-pm-i { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 36px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 500 13px var(--f-mono); cursor: pointer; text-align: left; }
.cc-pm-i span { color: var(--muted); font-size: 11px; }
.cc-pm-i:hover, .cc-pm-i:focus-visible { background: color-mix(in srgb, var(--tide) 14%, transparent); outline: none; }
.cc-pm-i.on { background: color-mix(in srgb, var(--tide) 24%, transparent); color: #fff; }
.cc-pm-go { color: var(--tide); margin-top: 4px; border: 1px dashed color-mix(in srgb, var(--tide) 45%, var(--line)); }
.cc-pm-e { font: 500 12px var(--f-mono); color: var(--muted); padding: 6px; }

/* 2026-10-17: the page never slides sideways on a phone (nothing can push it wider than the screen) */
@supports (overflow: clip) { html, body { overflow-x: clip; } }
#cc-root { max-width: 100%; min-width: 0; }
#cc-root .cc-sel { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.cc-cardrow #cc-card { min-width: 0; width: 100%; }
/* full screen frame is sized to the visible screen in JS; this keeps everything inside it */
.cc-chartwrap.full { box-sizing: border-box; max-width: none; overflow: hidden; }
.cc-chartwrap.full .cc-ftop { min-width: 0; }
.cc-chartwrap.full .cc-ft-tfs { min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.cc-chartwrap.full .cc-ft-tfs::-webkit-scrollbar { display: none; }
.cc-chartwrap.full .cc-ft-x, .cc-chartwrap.full #cc-ft-exit { flex: none; }

/* Indicate — your indicators, highlighted green when they're on */
.cc-chip.cc-ind[aria-pressed="true"] { background: #3fcf9a; border-color: #3fcf9a; color: #03141a; font-weight: 700; }
.cc-chip.cc-ind[aria-pressed="false"] { border-color: color-mix(in srgb, #3fcf9a 55%, var(--line)); color: #6fd7a8; }
.cc-chip.cc-indset { padding: 7px 10px; min-width: 34px; }
.cc-rb.cc-rind { --rc: #3fcf9a; }
.cc-rb.cc-rind.on { background: #3fcf9a; color: #03141a; }

/* indicator settings sub page (side panel) */
.aud-sub { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, #3fcf9a 50%, var(--line)); background: color-mix(in srgb, #3fcf9a 10%, transparent); color: var(--ink); font: 600 14px var(--f-mono); cursor: pointer; }
.aud-sub span { color: #3fcf9a; font-size: 18px; }
.aud-sub:hover, .aud-sub:focus-visible { border-color: #3fcf9a; outline: none; }
.ci { display: grid; gap: 12px; }
.ci-back { justify-self: start; background: transparent; border: 0; color: var(--tide); font: 600 13px var(--f-mono); padding: 4px 0; cursor: pointer; }
.ci-master { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); }
.ci-master.on { border-color: #3fcf9a; background: color-mix(in srgb, #3fcf9a 12%, var(--bg2)); }
.ci-master b { display: block; font: 700 15px var(--f-mono); color: var(--ink); }
.ci-master span { font-size: 13px; color: var(--muted); }
.ci-card { border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); padding: 12px; display: grid; gap: 10px; }
.ci-card.on { border-color: color-mix(in srgb, #3fcf9a 70%, var(--line)); box-shadow: inset 3px 0 0 #3fcf9a; }
.ci-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ci-head h4 { margin: 0 0 3px; font: 700 13px var(--f-mono); letter-spacing: .04em; color: var(--ink); }
.ci-card.on .ci-head h4 { color: #6fd7a8; }
.ci-head p { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.ci-body { display: grid; gap: 10px; }
.ci-body[hidden] { display: none; }
.ci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ci-f { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.ci-f input, .ci-f select, .ci-time { font: 500 14px var(--f-mono); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; min-height: 36px; box-sizing: border-box; width: 100%; min-width: 0; }
.ci-f input[type="color"], .ci-sesrow input[type="color"] { padding: 2px; height: 36px; cursor: pointer; }
.ci-chks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ci-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); min-height: 30px; cursor: pointer; }
.ci-chk input { width: 18px; height: 18px; accent-color: #3fcf9a; margin: 0; }
.ci-ses { display: grid; gap: 6px; }
.ci-sesrow { display: grid; grid-template-columns: minmax(84px, 1fr) minmax(0, 92px) auto minmax(0, 92px) 40px; align-items: center; gap: 6px; }
.ci-sesrow input[type="color"] { width: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.ci-to { color: var(--muted); }
.ci-note { margin: 0; font-size: 12px; color: var(--muted); }
.ci-reset { justify-self: start; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font: 500 12px var(--f-mono); padding: 6px 10px; cursor: pointer; }
.ci-reset:hover { color: var(--ink); border-color: var(--tide); }
.ci-sw { flex: none; position: relative; width: 46px; height: 26px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; padding: 0; transition: background .15s; }
.ci-sw span { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.ci-sw[aria-checked="true"] { background: #3fcf9a; border-color: #3fcf9a; }
.ci-sw[aria-checked="true"] span { transform: translateX(20px); background: #03141a; }
.ci-sw:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
@media (max-width: 480px) { .ci-sesrow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 40px; } .ci-sesrow .ci-chk { grid-column: 1 / -1; } }

/* Previous D/W/M HLOC: one row per period, each with its own colour */
.ci-per { display: grid; gap: 6px; }
.ci-perrow { display: grid; grid-template-columns: 1fr auto 44px; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; border-radius: 10px; border: 1px solid var(--line); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pc) 40%, transparent); }
.ci-perrow.on { border-color: color-mix(in srgb, var(--pc) 55%, var(--line)); box-shadow: inset 3px 0 0 var(--pc); background: color-mix(in srgb, var(--pc) 7%, transparent); }
.ci-perrow .ci-chk input { accent-color: var(--pc); }
.ci-pertag { font: 600 11px var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.ci-perrow.on .ci-pertag { color: var(--pc); }
.ci-perrow input[type="color"] { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }

/* indicator settings: LuxAlgo-style groups inside a card */
.ci-grp { margin: 14px 0 6px; font: 600 11px var(--f-mono, ui-monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.ci-grp:first-child { border-top: 0; padding-top: 0; margin-top: 2px; }
/* step evidence highlight + return path (Upgrade 1, 2026-10-19) */
.cc-hl { margin: 8px 0; padding: 8px 10px; border: 1px solid color-mix(in srgb, #e2c06f 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, #e2c06f 6%, transparent); }
.cc-hl-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.cc-hl ul { margin: 6px 0 0; padding-left: 0; list-style: none; font-size: 12px; display: grid; gap: 3px; }
.cc-hl-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--sw); box-shadow: 0 0 6px var(--sw); vertical-align: -1px; }
.cc-back { margin: 4px 0 6px; }
.sv-host:empty { display: none; }
.bcard.sv-return { outline: 2px solid var(--tide, #80e2d4); outline-offset: 2px; transition: outline-color 1.2s; }
.cc-acts{margin:6px 0}
.cr-sethead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}

/* Phone: every Ocean View control sits flush in the card, nothing scrolls sideways (user 2026-10-20) */
@media (max-width: 600px) {
  .cc-bar, .cc-row, .cc-sym, .cc-tfs, .cc-layers, .cc-tools { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .cc-sym { display: flex; gap: 6px; }
  .cc-sym input { flex: 1 1 auto; min-width: 0; width: auto; }
  .cc-sym .cc-btn { flex: none; }
  .cc-cardrow { display: flex; } #cc-card { min-width: 0; width: auto; } #cc-cards-r { flex: none; }
  .cc-layers { display: flex; flex-wrap: wrap; overflow: visible; }
  .cc-layers .cc-chip { flex: 1 1 auto; min-width: 0; padding-inline: 10px; text-align: center; }
  .cc-layers .cc-indset { flex: 0 0 auto; }
  .cc-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: visible; }
  .cc-tools .cc-sel { flex: none; min-width: 0; width: 100%; }
  .cc-tools .cc-clear { grid-column: 1 / -1; }
}

/* ---------- Coral Reef: the chart as a square (user 2026-10-24) ---------- */
.cr-chart { margin: 0 0 12px; }
.cr-chart:empty { display: none; }
.cc-zoom, .cc-dock { display: none; }
.cc-chartwrap.reef:not(.full) { aspect-ratio: 1 / 1; width: 100%; max-width: 640px; margin: 0 auto; }
.cc-chartwrap.reef:not(.full) .cc-chart { height: 100%; min-height: 0; }
.cc-chartwrap.reef:not(.full) .cc-zoom { display: flex; gap: 6px; position: absolute; right: 114px; top: 6px; z-index: 6; }
.cc-chartwrap.reef:not(.full) .cc-ohlc { max-width: calc(100% - 230px); }
.cc-zb { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 85%, transparent); color: var(--tide);
  font: 700 18px/1 var(--f-mono); cursor: pointer; display: grid; place-items: center; padding: 0; }
.cc-zb:hover { border-color: var(--tide); }
.cc-zb:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
@media (max-width: 600px) { .cc-chartwrap.reef:not(.full) .cc-zoom { right: 104px; } .cc-chartwrap.reef:not(.full) .cc-ohlc { max-width: calc(100% - 215px); } }

/* ---------- Full screen from Coral Reef (user 2026-10-24) ----------
   Top: your task bar (✎ side bar · Pan / select · Shape · ☰ menu · undo). Left: the side drawing bar. Middle: the chart.
   Bottom edge: pair · Live · Latest, with the glowing exit button centred above them, under the chart's time axis. */
.cc-rtop { display: none; }
.cc-chartwrap.full.reef { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; }
.cc-chartwrap.full.reef .cc-ftop { display: none !important; }
.cc-chartwrap.full.reef .cc-rtop { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 6px; padding: 6px 8px; min-height: 46px; box-sizing: border-box; position: relative; z-index: 14;
  background: linear-gradient(180deg, #03101d, #01040d); border-bottom: 1px solid var(--line); }
.cc-rt-tools { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }
.cc-rt-tools .cc-sel { flex: 1 1 0; min-width: 0; width: auto !important; height: 34px; min-height: 34px; padding: 0 8px; font: 600 12px var(--f-mono); }
.cc-rt-tools .cc-lab { display: none; }
.cc-rtop .cc-tb { flex: none; height: 34px; min-width: 34px; }
.cc-rt-menu { padding: 0 10px; font: 700 12px var(--f-mono); }
.cc-rt-menu[aria-expanded="true"] { border-color: var(--tide); color: var(--tide); }
/* the ☰ menu: timeframes, layers to tick / untick, Clear drawings */
.cc-rmenu { position: absolute; right: 8px; top: calc(100% + 6px); width: min(300px, calc(100vw - 16px)); max-height: 70vh; overflow-y: auto; z-index: 30; box-sizing: border-box;
  background: #04182a; border: 1px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); display: grid; gap: 8px; }
.cc-rmenu[hidden] { display: none; }
.cc-rm-h { font: 600 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cc-rm-tfs .cc-tfs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cc-rm-tfs .cc-tf { width: 100%; min-width: 0; height: 34px; padding: 0; }
.cc-rm-list .cc-layers { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; }
.cc-rm-list .cc-lab { display: none; }
.cc-rm-list .cc-chip { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; border-radius: 10px; padding: 0 12px; text-align: left; font: 600 13px var(--f-body);
  background: transparent; border: 1px solid var(--line); color: var(--ink); }
.cc-rm-list .cc-chip::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--muted); box-sizing: border-box; }
.cc-rm-list .cc-chip[aria-pressed="true"]::before { content: "✓"; display: grid; place-items: center; font: 800 12px var(--f-mono); color: #01040d; background: var(--tide); border-color: var(--tide); }
.cc-rm-list .cc-indset { font-size: 0; }
.cc-rm-list .cc-indset::after { content: "Indicator settings"; font: 600 13px var(--f-body); }
.cc-rm-list .cc-indset::before { content: "⚙"; border: 0; font-size: 14px; display: grid; place-items: center; }
.cc-rm-end .cc-clear { width: 100%; height: 40px; border-radius: 10px; font: 700 13px var(--f-body); }
/* side drawing bar + chart */
.cc-chartwrap.full.reef .cc-rail { grid-column: 1; grid-row: 2; }
.cc-chartwrap.full.reef .cc-chart { grid-column: 2; grid-row: 2; height: auto; min-height: 0; }
.cc-chartwrap.full.reef.norail .cc-chart { grid-column: 1 / -1; }
.cc-chartwrap.full.reef .cc-ohlc { top: calc(env(safe-area-inset-top, 0px) + 54px); }
.cc-chartwrap.full.reef .cc-ohlc .cc-oid { display: none; }
.cc-chartwrap.full.reef .cc-banner { top: calc(env(safe-area-inset-top, 0px) + 80px); }
.cc-chartwrap.full.reef .cc-seltool:not([hidden]) { top: calc(env(safe-area-inset-top, 0px) + 90px); }
/* bottom edge: the exit button centred above pair · Live · Latest */
.cc-chartwrap.full.reef .cc-dock { display: block; grid-column: 1 / -1; grid-row: 3; position: relative; z-index: 12; touch-action: manipulation;
  background: linear-gradient(180deg, #03101d, #01040d); border-top: 1px solid var(--line); padding: 34px 8px 4px; }
.cc-chartwrap.full.reef .cc-dock .cc-dock-x { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); width: 46px; height: 46px; margin-top: -14px; border: 3px solid #01040d; }
.cc-chartwrap.full.reef .cc-dock-rows { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; max-width: 760px; margin: 0 auto; }
.cc-chartwrap.full.reef .cc-dock-rows .cc-sym { display: block; min-width: 0; }
.cc-chartwrap.full.reef .cc-dock-rows .cc-sym input { width: 100%; height: 38px; box-sizing: border-box; padding: 0 12px; font: 700 14px var(--f-mono); }
.cc-chartwrap.full.reef .cc-dock-rows .cc-sym .cc-btn { display: none; }
.cc-chartwrap.full.reef .cc-dock-rows .cc-live { margin: 0; height: 38px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 12px; font-size: 12px; }
.cc-chartwrap.full.reef .cc-dock-rows #cc-latest { height: 38px; padding: 0 14px; }
@media (orientation: landscape) and (max-height: 500px) { .cc-chartwrap.full.reef .cc-dock { padding-top: 26px; } .cc-chartwrap.full.reef .cc-dock .cc-dock-x { width: 38px; height: 38px; } }
.cc-dock .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc-dock-x { cursor: pointer; border-radius: 50%; padding: 0; box-shadow: 0 0 18px color-mix(in srgb, var(--glow) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--tide) 40%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2301040d' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5.5 1.5v4h-4M14.5 5.5h-4v-4M10.5 14.5v-4h4M1.5 10.5h4v4'/%3E%3C/svg%3E"), radial-gradient(circle at 30% 25%, #c8b6ff, #80e2d4 55%, #2fb9b1);
  background-size: 22px 22px, cover; background-repeat: no-repeat; background-position: center; }
.cc-dock-x:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; }
.cc-rt-menu { white-space: nowrap; }
.cc-rm-list .cc-chip.cc-ind { background: transparent !important; color: var(--ink) !important; border-color: var(--line) !important; }
/* smaller exit button that sits fully inside the bottom bar, clear of its top line (user 2026-10-24) */
.cc-chartwrap.full.reef .cc-dock { padding-top: 40px; }
.cc-chartwrap.full.reef .cc-dock .cc-dock-x { width: 32px; height: 32px; top: 5px; margin-top: 0; border-width: 2px; background-size: 15px 15px, cover; box-shadow: 0 0 10px color-mix(in srgb, var(--glow) 55%, transparent); }
@media (orientation: landscape) and (max-height: 500px) { .cc-chartwrap.full.reef .cc-dock { padding-top: 34px; } .cc-chartwrap.full.reef .cc-dock .cc-dock-x { width: 28px; height: 28px; } }

/* Ocean View (user 2026-10-24): the same square chart as Coral Reef. Outside full screen only the card picker shows above
   it; the pair, timeframes, Live / Latest, layers and drawing tools are in the full-screen task bar. */
#cc-root > .cc-bar, #cc-root > .cc-layers, #cc-root > .cc-tools { display: none; }

/* Coral Reef + Ocean View full screen (user 2026-10-24): the timeframe-and-layers button lives at the foot of the side bar
   where IRIS / MAG / IND / AUTO used to be. The top-bar copy only shows while the side bar is hidden (✎), so it's never lost.
   The IRIS mic is hidden while a chart is full screen. */
.cc-chartwrap.full.reef:not(.norail) #cc-rt-menu { display: none; }
.cc-rb.cc-r-menu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 46px; margin-top: auto;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel); padding: 4px 0;
  position: sticky; bottom: 0; z-index: 2;
  box-shadow: 0 -16px 0 0 color-mix(in srgb, var(--panel) 92%, #000), 0 14px 0 0 color-mix(in srgb, var(--panel) 92%, #000), -6px 0 0 0 color-mix(in srgb, var(--panel) 92%, #000), 6px 0 0 0 color-mix(in srgb, var(--panel) 92%, #000); }
.cc-rb.cc-r-menu b { font: 700 12px var(--f-mono); color: var(--ink); }
.cc-rb.cc-r-menu i { font-style: normal; font-size: 12px; color: var(--muted); line-height: 1; }
.cc-rb.cc-r-menu[aria-expanded="true"] { border-color: var(--tide); }
.cc-rb.cc-r-menu[aria-expanded="true"] b, .cc-rb.cc-r-menu[aria-expanded="true"] i { color: var(--tide); }
html.cc-noscroll :is(#iv-mic, .iv-mic) { display: none !important; }
/* the side-bar 5m ☰ button stays solid in every state (tapped, hovered, menu open), so the side-bar buttons it pins
   over never show through it (user 2026-10-24) */
#cc-r-menu.cc-rb, #cc-r-menu.cc-rb:hover, #cc-r-menu.cc-rb:active, #cc-r-menu.cc-rb[aria-expanded="true"] { background: var(--panel); isolation: isolate; }
#cc-r-menu.cc-rb[aria-expanded="true"] { background: linear-gradient(color-mix(in srgb, var(--tide) 14%, transparent), color-mix(in srgb, var(--tide) 14%, transparent)), var(--panel); }

/* ---------- Full screen, user 2026-10-25 ----------
   Bottom tab bar (TradingView layout, Apex Omni look): Verify · Data · Chart (middle, white disc) · Journal · Model.
   A tab opens its section as a sheet over the chart. The pair, Live and Latest moved into the 5m ☰ menu, with
   "Exit full screen" at its foot. The app's gear and the mic stay hidden while a chart is full screen. */
html.cc-noscroll :is(#aud-gear, .aud-gear) { display: none !important; }
.cc-sheet { display: none; }
.cc-chartwrap.full.reef .cc-dock { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 0;
  grid-column: 1 / -1; grid-row: 3; position: relative; z-index: 22; touch-action: manipulation;
  background: #000; border-top: 1px solid #14171c; padding: 6px 2px calc(4px + env(safe-area-inset-bottom, 0px)); }
.cc-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0; min-height: 54px;
  padding: 2px 0; border: 0; background: none; color: #8a8f98; font: 500 12px/1.1 var(--f-body); letter-spacing: .01em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cc-tab-i { width: 28px; height: 28px; display: grid; place-items: center; }
.cc-tab-i svg { width: 26px; height: 26px; }
.cc-tab-l { white-space: nowrap; }
.cc-tab[aria-selected="true"] { color: #fff; }
.cc-tab::before { content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tab, var(--tide)) 26%, transparent), transparent); opacity: 0; transition: opacity .25s; pointer-events: none; }
.cc-tab[aria-selected="true"]::before { opacity: 1; }
.cc-tab:active .cc-tab-i { transform: scale(.92); }
/* the middle Chart button: a white disc with a dark icon, like Apex Omni's Trade */
.cc-tab-mid .cc-tab-i { width: 40px; height: 40px; border-radius: 50%; background: #f2f3f5; color: #0b0d10; box-shadow: 0 0 0 1px #ffffff22; }
.cc-tab-mid .cc-tab-i svg { width: 24px; height: 24px; }
.cc-tab-mid:not([aria-selected="true"]) .cc-tab-i { background: #2a2e35; color: #e6e8eb; }
.cc-tab:focus-visible { outline: 2px solid var(--tide); outline-offset: -2px; border-radius: 10px; }

/* the section sheet over the chart */
.cc-chartwrap.full.reef .cc-sheet:not([hidden]) { display: block; grid-column: 1 / -1; grid-row: 2; align-self: end; z-index: 21; height: 78%; max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box; padding: 0 12px 16px;
  background: #05080d; border-top: 1px solid #1b222b; border-radius: 18px 18px 0 0; box-shadow: 0 -18px 40px rgba(0, 0, 0, .6); animation: ccSheetIn .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes ccSheetIn { from { transform: translateY(24px); opacity: 0; } }
.cc-sheet-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 10px; padding: 14px 2px 10px; background: #05080d; }
.cc-sheet-h::before { content: ""; position: absolute; left: 50%; top: 5px; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: #2a313b; }
.cc-sheet-h b { font: 700 17px var(--f-display, var(--f-body)); color: #fff; letter-spacing: .02em; }
.cc-sheet-sym { font: 600 11px var(--f-mono); color: var(--muted); letter-spacing: .08em; }
.cc-pane[hidden] { display: none; }
.cc-pane > .cc-panel { margin: 0 0 12px; }
.cc-pane .cc-cardrow { display: flex; gap: 8px; margin: 0 0 10px; }
.cc-pane .cc-cardrow .cc-lab { display: none; }
.cc-pane .cc-cardrow #cc-card { flex: 1 1 auto; min-width: 0; font-size: 16px; }
/* Data tab */
.cc-dsec { margin: 0 0 14px; display: grid; gap: 8px; }
.cc-dh { font: 600 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tide); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cc-dh span { font: 500 11px var(--f-body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.cc-dsec .mac-cs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cc-dt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.cc-dt-k { font: 600 12px var(--f-mono); color: var(--silver, #c8d4d8); letter-spacing: .04em; }
.cc-dt-v { font: 700 16px var(--f-mono); color: var(--ink); text-align: right; }
.cc-dt-v.bull { color: var(--bull); } .cc-dt-v.bear { color: var(--bear); }
.cc-dt-s { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.cc-dnote { font-size: 12px; color: var(--muted); margin: 4px 2px 0; }

/* the 5m ☰ menu: pair, Live, Latest on top; Exit full screen at the foot */
.cc-rm-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.cc-rm-pair .cc-sym { grid-column: 1 / -1; display: flex; gap: 6px; min-width: 0; }
.cc-rm-pair .cc-sym input { flex: 1 1 auto; min-width: 0; height: 38px; box-sizing: border-box; padding: 0 12px; font: 700 16px var(--f-mono); }
.cc-rm-pair .cc-sym .cc-btn { height: 38px; }
.cc-rm-pair .cc-live { margin: 0; height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 12px; font-size: 12px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cc-rm-pair #cc-latest { height: 36px; padding: 0 14px; }
.cc-rm-exit { width: 100%; height: 40px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--tide) 45%, var(--line)); background: transparent; color: var(--tide); font: 700 13px var(--f-body); cursor: pointer; }

/* hold a drawing: Lock / Unlock · Clone · width · Delete */
.cc-dmenu { position: absolute; z-index: 40; box-sizing: border-box; display: grid; gap: 4px; padding: 6px; border-radius: 14px; background: #0a111b; border: 1px solid #22303d;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .65); animation: ccSheetIn .14s ease-out; }
.cc-dmenu[hidden] { display: none; }
.cc-dm-h { font: 600 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 4px 6px 2px; }
.cc-dmenu > button { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: 600 14px var(--f-body); text-align: left; cursor: pointer; }
.cc-dmenu > button:active, .cc-dmenu > button:hover { background: #142131; }
.cc-dmenu .cc-dm-del { color: var(--bear); }
.cc-dm-w { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 2px 0; }
.cc-dm-w button { display: grid; justify-items: center; gap: 4px; padding: 7px 0 5px; border-radius: 9px; border: 1px solid #22303d; background: transparent; color: var(--muted); font: 600 10px var(--f-mono); cursor: pointer; }
.cc-dm-w button i { display: block; width: 22px; background: currentColor; border-radius: 2px; }
.cc-dm-w button[aria-pressed="true"] { color: var(--tide); border-color: var(--tide); }
.cc-chartwrap.full .cc-chart { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.cc-dsec .mic-cs { grid-area: auto; grid-column: 1 / -1; width: 100%; }
.cc-dsec .mic-c { padding: 6px 2px; }
/* hints sit above the tab bar, never under it */
.cc-chartwrap.full.reef .cc-hint { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 23; max-width: calc(100% - 80px); }
/* the 5m menu's Coral Reef button (sends your TP / STOP / LIMIT lines to the ticket) */
.cc-rm-reef { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; border-radius: 10px; cursor: pointer;
  border: 1px solid color-mix(in srgb, #ff8a5c 60%, var(--line)); background: color-mix(in srgb, #ff8a5c 14%, transparent); color: #ffb08f; font: 700 13px var(--f-body); }
.cc-rm-reef img { width: 20px; height: 20px; }
/* the open 5m menu sits above the selected-drawing bar and hints */
.cc-chartwrap.full.reef .cc-rtop:has(.cc-rmenu:not([hidden])) { z-index: 45; }
/* full screen fills the whole screen (large viewport on iOS), the tab bar on its bottom edge above the home indicator */
.cc-chartwrap.full.reef { min-height: 100vh; min-height: 100lvh; }
.cc-chartwrap.full.reef .cc-dock { padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }
/* the window already ends above the home bar: no extra padding, the bar sits on the bottom edge (labels fully shown) */
.cc-chartwrap.full.reef.cc-shortvp .cc-dock { padding-bottom: 4px; }
/* no frame padding under the tab bar: the bar's own black runs to the bottom edge, its icons above the home indicator */
.cc-chartwrap.full.reef { padding-bottom: 0 !important; background: #000; }
.cc-chartwrap.full.reef .cc-chart { background: var(--bg, #03141a); }

/* Coral Reef full screen rail (user 2026-10-25): the tools scroll in their own box; the 5m button sits below it,
   outside the scroll, so nothing bleeds behind or under it on iPhone */
.cc-chartwrap.full .cc-rail.cc-rsplit { overflow: hidden; padding-bottom: 6px; }
.cc-rail.cc-rsplit > .cc-rscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y;
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; margin: 0 -5px; padding: 0 5px 4px; }
.cc-rail.cc-rsplit > .cc-rscroll::-webkit-scrollbar { display: none; }
.cc-rail.cc-rsplit > .cc-rb.cc-r-menu { position: static; margin-top: 6px; box-shadow: none; flex: none; }
/* indicator settings opened from full screen: the side panel sits above the full-screen chart */
html.cc-panel-over .lqp-back { z-index: 1100; }
html.cc-panel-over .lqp { z-index: 1101; }
/* Tab bar (user 2026-10-25): the page you're on shows its icon and label in orange, with no glow around it */
.cc-tab::before { display: none; }
.cc-tab[aria-selected="true"] { color: var(--tab, #ff8a5c); }
.cc-tab-mid[aria-selected="true"] .cc-tab-i { background: #2a2e35; color: var(--tab, #ff8a5c); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tab, #ff8a5c) 70%, transparent); }
/* user 2026-10-26: the 5m ☰ button holds its label (it was a fixed 34px and the ☰ spilled out of it) */
.cc-rtop .cc-tb.cc-rt-menu { width: auto; min-width: 54px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* user 2026-10-26: Verify / Data / Journal / Model open full screen like the chart: the whole space between the top bar
   and the tab bar, no rounded sheet over a slice of chart */
.cc-chartwrap.full.reef .cc-sheet:not([hidden]) { align-self: stretch; height: auto; max-height: none; border-radius: 0; border-top: 0; box-shadow: none; animation: ccPageIn .18s ease-out; }
.cc-chartwrap.full.reef .cc-sheet-h::before { display: none; }
@keyframes ccPageIn { from { opacity: 0; } }

/* the full-screen tab bar's selected tab stays orange (user 2026-10-25) though Coral Reef is blue now */
.cc-tab[aria-selected="true"] { color: #ff8a3d; }
.cc-tab-mid[aria-selected="true"] .cc-tab-i { color: #ff8a3d; box-shadow: 0 0 0 1.5px color-mix(in srgb, #ff8a3d 70%, transparent); }

/* candle countdown under the current-price label (chart-coast.js · paintCountdown) */
/* the same size as the price label above it (11px text, 17px tall, full scale width, solid colour) so the two sit flush */
.cc-cd { position: absolute; z-index: 4; pointer-events: none; box-sizing: border-box; height: 17px; padding: 0; text-align: center;
  font: 11px/17px ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; border-top: 1px solid rgba(0, 0, 0, .18); border-radius: 0 0 3px 0; }
.cc-cd[hidden] { display: none; }

/* a card's glasses: the chart in a popup over the card (user 2026-10-29) */
html.cc-pop-on, html.cc-pop-on body { overflow: hidden; }
.cc-pop { position: fixed; inset: 0; z-index: 990; background: rgba(1, 4, 13, .78); display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px); animation: cc-pop-in .35s ease both; }
.cc-pop[hidden] { display: none; }
.cc-pop-box { width: 100%; max-width: 640px; background: var(--bg, #03141a); border: 1.5px solid #80e2d4; border-radius: 18px; padding: 10px;
  box-shadow: 0 0 24px rgba(128, 226, 212, .25); box-sizing: border-box; }
.cc-pop-h { display: flex; align-items: center; gap: 10px; padding: 2px 2px 10px 6px; }
.cc-pop-h b { flex: 1; min-width: 0; font: 700 15px var(--f-mono, ui-monospace, monospace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-pop-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #80e2d4; background: transparent; color: #e3f3f1; font-size: 18px; line-height: 1; cursor: pointer; }
.cc-pop-x:focus-visible { outline: 2px solid #80e2d4; outline-offset: 2px; }
.cc-pop-slot .cc-chartwrap.reef:not(.full) { max-width: none; border-radius: 12px; overflow: hidden; }
.cc-pop-slot:has(.cc-chartwrap) .cc-pop-wait { display: none; }
.cc-pop-wait { margin: 0; padding: 40px 0; text-align: center; }
@keyframes cc-pop-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cc-pop { animation: none; } }
body:has(.cc-pop:not([hidden])) .nav-arws { display: none; }

/* tab bar icons = the owner's glass orbs (2026-10-29): Verify · Data · Charts · Blueprint · Trade. The tab you're on
   glows teal and sits full brightness; the others rest a little dimmer. The middle Charts orb is a touch bigger. */
.cc-tab .cc-tab-i, .cc-tab-mid .cc-tab-i, .cc-tab-mid:not([aria-selected="true"]) .cc-tab-i, .cc-tab-mid[aria-selected="true"] .cc-tab-i {
  width: 36px; height: 36px; background: none; box-shadow: none; border-radius: 50%; transition: transform .3s ease, filter .4s ease, opacity .4s ease; }
.cc-tab-mid .cc-tab-i, .cc-tab-mid:not([aria-selected="true"]) .cc-tab-i, .cc-tab-mid[aria-selected="true"] .cc-tab-i { width: 42px; height: 42px; }
.cc-tab-i img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.cc-tab .cc-tab-i { opacity: .62; filter: saturate(.8); }
.cc-tab[aria-selected="true"] .cc-tab-i { opacity: 1; filter: saturate(1.1) drop-shadow(0 0 7px rgba(64, 232, 214, .65)); }
.cc-tab .cc-tab-l { font-size: 11px; letter-spacing: .04em; }

/* full-screen tabs' content (owner 2026-10-29): Verify = your cards, Blueprint = Directional intelligence's breakdown,
   Trade = your ticket; the Data tab's indicator charts */
.cc-chartwrap.full.reef .cc-sheet:not([hidden]) { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.cc-pane { padding: 4px 2px 18px; }
.cc-pane #b-appr .bcard { max-width: 720px; margin-left: auto; margin-right: auto; }
.cc-pane #b-filter { margin: 2px 0 10px; }
.cc-pane-empty { padding: 30px 8px; text-align: center; }
.cc-dviz { display: block; width: 100%; height: auto; max-width: 560px; margin: 6px 0 12px; }
.cc-vback { display: none; }
.cc-chartwrap.full .cc-vback:not([hidden]) { display: grid; place-items: center; position: absolute; z-index: 23; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 56px);
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #80e2d4; background: rgba(1, 4, 13, .85); color: #e3f3f1; font-size: 18px; line-height: 1; cursor: pointer;
  box-shadow: 0 0 14px rgba(128, 226, 212, .35); }

/* Pan / select and Shape live in the 5m ☰ menu (owner 2026-10-29), not the full-screen top bar */
.cc-rm-draw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.cc-rm-draw .cc-sel { width: 100% !important; min-width: 0; height: 38px; padding: 0 8px; font: 600 12px var(--f-mono); }

/* the 5m ☰ button on its own under the side bar, flush with the bottom of the candle area (owner 2026-10-29) */
.cc-chartwrap.full #cc-r-menu.cc-r-menu-dock { position: absolute; z-index: 15; margin: 0; padding: 0 4px; min-height: 0; box-sizing: border-box;
  flex-direction: row; gap: 5px; border-radius: 0 0 9px 9px; box-shadow: none; }
.cc-chartwrap.full #cc-r-menu.cc-r-menu-dock b { font-size: 12px; }
.cc-chartwrap.full #cc-r-menu.cc-r-menu-dock i { font-size: 11px; }
/* the 15m ☰ button is a flush rectangle (owner 2026-11-02): the side bar's full width, square corners, no side or bottom
   border, filled with the side bar's own colour, so it meets the side bar, the chart and the tab bar edge to edge */
.cc-chartwrap.full #cc-r-menu.cc-r-menu-dock { border-radius: 0; border-width: 1px 0 0; }
.cc-chartwrap.full #cc-r-menu.cc-r-menu-dock:not([aria-expanded="true"]) { background: color-mix(in srgb, var(--panel) 92%, #000); }

#cc-rt-rail.cc-chip { font-size: 13px; }

/* the app's pages run across the full-screen top bar (owner 2026-10-29): tap one to leave full screen and go there.
   The 5m ☰ menu opens only from its own button in the bottom-left corner (the top-bar copy is gone). */
.cc-chartwrap.full.reef #cc-rt-menu { display: none !important; }
.cc-chartwrap.full.reef .cc-rt-tools { display: none; }
.cc-rt-pages { display: none; }
.cc-chartwrap.full.reef .cc-rt-pages { display: flex; flex: 1 1 auto; min-width: 0; justify-content: space-between; gap: 2px; }
.cc-pg { flex: 1 1 auto; min-width: 0; padding: 6px 2px; background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer;
  font: 600 13px var(--f-display); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.cc-pg[aria-current="page"] { color: var(--tab, var(--tide)); border-bottom-color: var(--tab, var(--tide)); }
.cc-pg:focus-visible { outline: 2px solid var(--tide); outline-offset: -2px; border-radius: 6px; }

/* Coral Reef is always full screen (owner 2026-10-29): no Exit button there — the page tabs across the top leave it */
.cc-chartwrap.full.on-reef .cc-fs { display: none !important; }

/* no Exit full screen button any more (owner 2026-10-29); the card popup's chart stays a popup (no full-screen button) */
.cc-pop-slot .cc-fs { display: none !important; }

/* Tab bar in Apex Omni's style (owner 2026-10-29), in Coral Reef's blue (#2b5bff, the page tab's colour): a flat black
   bar; resting tabs grey; the tab you're on lights up blue with a soft blue haze behind it; Charts sits in a round disc
   in the middle, like Apex's Trade. The owner's orb icons are tinted to the same blue. */
.cc-chartwrap.full.reef .cc-dock { background: #000; border-top: 1px solid #16181d; overflow: hidden; }
.cc-chartwrap.full.reef .cc-dock .cc-tab { color: #8a8f98; gap: 4px; }
.cc-chartwrap.full.reef .cc-dock .cc-tab .cc-tab-l { font: 500 12px var(--f-body); letter-spacing: .01em; }
.cc-chartwrap.full.reef .cc-dock .cc-tab .cc-tab-i { opacity: 1; filter: none; }
.cc-chartwrap.full.reef .cc-dock .cc-tab .cc-tab-i img { filter: hue-rotate(48deg) saturate(.15) brightness(.78); transition: filter .5s ease, transform .3s ease; }
.cc-chartwrap.full.reef .cc-dock .cc-tab[aria-selected="true"] { color: #2b5bff; }
.cc-chartwrap.full.reef .cc-dock .cc-tab[aria-selected="true"] .cc-tab-l { text-shadow: 0 0 12px rgba(43, 91, 255, .6); }
.cc-chartwrap.full.reef .cc-dock .cc-tab[aria-selected="true"] .cc-tab-i { filter: none; }
.cc-chartwrap.full.reef .cc-dock .cc-tab[aria-selected="true"] .cc-tab-i img { filter: hue-rotate(48deg) saturate(1.35) brightness(1.05) drop-shadow(0 0 8px rgba(43, 91, 255, .7)); }
.cc-chartwrap.full.reef .cc-dock .cc-tab::before { display: block; content: ""; position: absolute; left: 50%; top: 58%; width: 120px; height: 90px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(43, 91, 255, .38), rgba(43, 91, 255, .12) 55%, transparent); filter: blur(6px); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.cc-chartwrap.full.reef .cc-dock .cc-tab[aria-selected="true"]::before { opacity: 1; }
/* Charts, in the middle: the orb inside a round disc (Apex's white Trade disc, here Coral Reef blue) */
.cc-chartwrap.full.reef .cc-dock .cc-tab-mid .cc-tab-i { width: 46px; height: 46px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: #1c2440; }
.cc-chartwrap.full.reef .cc-dock .cc-tab-mid[aria-selected="true"] .cc-tab-i { background: #2b5bff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 0 18px rgba(43, 91, 255, .55); }
@media (prefers-reduced-motion: reduce) { .cc-chartwrap.full.reef .cc-dock .cc-tab .cc-tab-i img, .cc-chartwrap.full.reef .cc-dock .cc-tab::before { transition: none; } }

/* quieter glow on the selected tab (owner 2026-10-29: "too loud") — a small, faint haze and a light edge glow */
.cc-chartwrap.full.reef .cc-dock .cc-tab::before { width: 66px; height: 50px; top: 50%; filter: blur(4px);
  background: radial-gradient(closest-side, rgba(43, 91, 255, .16), rgba(43, 91, 255, .05) 60%, transparent); }
.cc-chartwrap.full.reef .cc-dock .cc-tab[aria-selected="true"] .cc-tab-i img { filter: hue-rotate(48deg) saturate(1.2) brightness(1) drop-shadow(0 0 3px rgba(43, 91, 255, .35)); }
.cc-chartwrap.full.reef .cc-dock .cc-tab[aria-selected="true"] .cc-tab-l { text-shadow: 0 0 5px rgba(43, 91, 255, .3); }
.cc-chartwrap.full.reef .cc-dock .cc-tab-mid[aria-selected="true"] .cc-tab-i { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 6px rgba(43, 91, 255, .3); }

/* the scan glasses tucked in the Data tab's top-right corner (owner 2026-10-29) */
.cc-pane[data-pane="data"] { position: relative; }
.cc-dscan { position: absolute; top: -40px; right: 4px; z-index: 2; width: 52px; height: 34px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 17px; border: 1px solid #2a3350; background: #0b1124; box-shadow: 0 0 8px rgba(43, 91, 255, .25); }
.cc-dscan img { width: 30px; height: auto; filter: brightness(1.15); }
.cc-dscan:disabled { opacity: .55; cursor: default; animation: ccScanPulse 1.6s ease-in-out infinite; }
@keyframes ccScanPulse { 50% { box-shadow: 0 0 14px rgba(43, 91, 255, .5); } }
@media (prefers-reduced-motion: reduce) { .cc-dscan:disabled { animation: none; } }
.cc-dscan-msg { margin: 0 0 8px; font: 500 12px var(--f-mono); color: var(--muted); }

/* ----------------------------------------------------------------- Verify (owner 2026-10-31)
   Compact cards in the Verify tab, and the step popup: the chart in a framed box, ✕ in its corner, then each step's
   number (tap to see it on the chart) with ✓ / ✗. Blüm Burg's cards keep their own look. */
.cc-pane #b-appr .bcard.bc.vfy { padding-bottom: 22px; }
.cc-pane #b-appr .bcard.bc.vfy.min .bc-glass { display: block; }   /* the glasses stay on a minimized card: verify straight from the list */
.cc-pane #b-appr .bcard.bc.vfy.min .bc-top { align-items: center; }
.vc-marks { font-size: 14px !important; }
.vc-sent { color: #3fcf9a; } .vc-unsent { color: #ffb36b; }

.vp { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(1, 4, 13, .82);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px); box-sizing: border-box; animation: vp-in .16s ease-out both; }
.vp[hidden] { display: none; }
@keyframes vp-in { from { opacity: 0; } }
.vp-box { width: 100%; max-width: 680px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: grid; gap: 10px; padding: 10px 10px 12px; box-sizing: border-box; background: #05080d; border: 2px solid #f2f6f7; border-radius: 18px;
  box-shadow: 0 0 0 1px #80e2d433, 0 0 26px -6px #80e2d4; animation: vp-up .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vp-up { from { transform: translateY(14px) scale(.98); } }
.vp-h { display: flex; align-items: center; gap: 10px; padding-left: 4px; }
.vp-h b { flex: 1; min-width: 0; font: 800 17px/1.2 var(--f-display, var(--f-body)); color: #f2f6f7; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-h b span { color: #80e2d4; } .vp-h b i { font: 500 13px var(--f-mono); color: #9fb3b8; font-style: normal; }
.vp-x { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 2px solid #f2f6f7; background: #000; color: #f2f6f7; font: 700 20px/1 var(--f-body); cursor: pointer; }
.vp-x:focus-visible, .vp-row button:focus-visible { outline: 2px solid #80e2d4; outline-offset: 2px; }
.vp-chart { position: relative; height: clamp(240px, 50vh, 520px); border: 1.5px solid #f2f6f7; border-radius: 12px; overflow: hidden; background: #03070c; }
.vp-chart > .cc-chart { position: absolute !important; inset: 0; width: auto !important; height: auto !important; min-height: 0 !important; }
.vp-wait { position: absolute; inset: 0; z-index: 5; margin: 0; display: grid; place-items: center; padding: 20px; text-align: center;
  font: 500 14px var(--f-body); color: #9fb3b8; background: rgba(3, 7, 12, .72); pointer-events: none; }
.vp-wait[hidden] { display: none; }
.vp-read { margin: 0; font: 400 14px/1.4 var(--f-body); color: #9fb3b8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vp-read b { color: #f2f6f7; font-weight: 600; margin-right: 4px; }
.vp-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; justify-items: center; }
.vp-row { display: flex; align-items: center; gap: 10px; padding: 3px; border-radius: 14px; }
.vp-row.on { background: #80e2d414; box-shadow: 0 0 0 1px #80e2d455; }
.vp-row button { width: 48px; height: 48px; border-radius: 12px; cursor: pointer; font: 800 22px/1 var(--f-body); -webkit-tap-highlight-color: transparent; transition: transform .08s, background .15s, box-shadow .15s; }
.vp-row button:active:not(:disabled) { transform: scale(.93); }
.vp-n { border: 1px solid #b9c7d6; color: #fff; background: linear-gradient(#8ea3bb, #5d728c); box-shadow: inset 0 1px 0 #ffffff55; }
.vp-row.on .vp-n { box-shadow: inset 0 1px 0 #ffffff55, 0 0 0 2px #80e2d4, 0 0 12px #80e2d499; }
.vp-ok { border: 2px solid #3fcf9a88; background: transparent; color: #3fcf9a; }
.vp-no { border: 2px solid #ef6f6f88; background: transparent; color: #ef6f6f; }
.vp-ok[aria-pressed="true"] { background: #2fbf5a; border-color: #2fbf5a; color: #fff; box-shadow: 0 0 14px #2fbf5a88; }
.vp-no[aria-pressed="true"] { background: #e23b3b; border-color: #e23b3b; color: #fff; box-shadow: 0 0 14px #e23b3b88; }
.vp-row button:disabled { opacity: .28; cursor: default; }
.vp-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 2px; }
.vp-act[hidden] { display: none; }
/* Save in the free grid slot beside Step 5: as wide as a number + ✓ + ✗ row */
.vp-saverow { align-self: stretch; }
.vp-row button.vp-save { width: calc(48px * 3 + 20px); height: 48px; border-radius: 12px; border: 0; cursor: pointer; font: 800 18px/1 var(--f-body); letter-spacing: .02em;
  color: #03141a; background: linear-gradient(#9bf0e3, #5fd3c2); box-shadow: 0 0 14px #80e2d466, inset 0 1px 0 #ffffff88; }
.vp-row button.vp-save:disabled { opacity: .35; box-shadow: none; }
.vp-act .bmsg { font: 500 13px var(--f-body); }
@media (max-width: 380px) { .vp-row button { width: 42px; height: 42px; font-size: 19px; } .vp-row button.vp-save { width: calc(42px * 3 + 20px); height: 42px; font-size: 16px; } .vp-steps { gap: 8px 8px; } }
@media (prefers-reduced-motion: reduce) { .vp, .vp-box { animation: none; } }

/* Deans on the chart (owner 2026-11-01): the tapped candle's four Dean measurements */
.cc-deanbox { position: absolute; left: 8px; right: 64px; top: 50px; z-index: 6; max-width: 420px; max-height: 45%; overflow: auto; background: color-mix(in srgb, var(--panel, #0c1620) 92%, transparent); border: 1px solid var(--line, #21403f); border-radius: 12px; padding: 8px 34px 8px 10px; font: 12px/1.45 var(--f-mono, ui-monospace, monospace); color: var(--ink, #e3f3f1); box-shadow: 0 6px 18px #0008; }
.cc-deanbox[hidden] { display: none; }
.cc-deanbox .cc-dn-h { margin-bottom: 4px; color: var(--muted, #8aa5a3); overflow-wrap: anywhere; }
.cc-deanbox .cc-dn-h b { color: var(--ink, #e3f3f1); }
.cc-deanbox .cc-dn-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cc-deanbox .cc-dn-row i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }
.cc-deanbox .cc-dn-row span { color: var(--muted, #8aa5a3); }
.cc-deanbox .cc-dn-f { margin-top: 4px; font-size: 10.5px; color: var(--muted, #8aa5a3); }
.cc-deanbox .cc-dn-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line, #21403f); background: transparent; color: var(--muted, #8aa5a3); cursor: pointer; }
/* Sea Liquidity FWS panels on the chart (owner 2026-11-01): Dean filters and the FWS indicator library. */
.cc-fwsbox .cc-fws-note{color:var(--muted,#8aa5a3);font-size:11px;margin:4px 0}
.cc-fwsbox .cc-fws-err{color:#ff8f8f;margin:4px 0;overflow-wrap:anywhere}
.cc-fwsbox .cc-fws-item{border-top:1px solid var(--line,#21403f);padding:6px 0;overflow-wrap:anywhere}
.cc-fwsbox .cc-fws-item span{color:var(--muted,#8aa5a3);font-size:11px}
.cc-fwsbox .cc-fws-row{margin:5px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cc-fwsbox .cc-fws-in{background:transparent;color:var(--ink,#e3f3f1);border:1px solid var(--line,#21403f);border-radius:6px;padding:3px 6px;font:12px var(--f-mono,ui-monospace,monospace);max-width:100%}
.cc-fwsbox .cc-fws-in.num{width:72px}
.cc-fwsbox .cc-fws-pat{font-size:11px;white-space:nowrap}
.cc-fwsbox .cc-fws-off{opacity:.6}
.cc-fwsbox .cc-chip{margin:2px 0}
.cc-fwsbox details{margin-top:4px;font-size:11px}
.cc-fwsbox .cc-fws-part{display:grid;grid-template-columns:minmax(78px,1fr) 1fr 1fr;gap:6px;align-items:center;margin:4px 0}
.cc-fwsbox .cc-fws-part .cc-fws-in{width:100%;min-width:0}
.cc-fwsbox .cc-fws-ph span{color:var(--muted,#8aa5a3);font-size:10px}

/* Watchlist tab (owner 2026-11-02): red-flagged pairs, exchange-style rows; gold ring when 4+ scan tiles line up */
.cc-wl-h { margin: 0 0 8px; font: 600 12px var(--f-mono); color: var(--silver, #c8d4d8); letter-spacing: .04em; }
.cc-wl-h span { display: block; margin-top: 2px; font-weight: 400; color: var(--muted, #8fa0a8); letter-spacing: 0; }
.cc-wl { list-style: none; margin: 0; padding: 0; }
.cc-wl li { border-bottom: 1px solid var(--line); }
.cc-wl-row { position: relative; width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px 6px 10px 14px; background: none; border: 0; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.cc-wl-row:hover, .cc-wl-row:focus-visible { background: color-mix(in srgb, var(--panel) 60%, transparent); }
.cc-wl-row.on { background: color-mix(in srgb, var(--tide, #80e2d4) 8%, transparent); }
.cc-wl-flag { position: absolute; left: 0; top: 50%; width: 7px; height: 14px; margin-top: -7px; background: #ef4f4f; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.cc-wl-coin { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 10px var(--f-mono); letter-spacing: .02em;
  color: var(--ink); background: radial-gradient(circle at 35% 30%, #2c4651, #0e1c22); border: 2px solid var(--line); }
.cc-wl-coin.gold { border-color: #e2b84f; box-shadow: 0 0 0 2px rgba(226, 184, 79, .35), 0 0 12px rgba(226, 184, 79, .55); }
.cc-wl-name { min-width: 0; display: grid; gap: 2px; }
.cc-wl-name b { font: 600 15px var(--f-mono); }
.cc-wl-name small { color: var(--muted, #8fa0a8); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-wl-bs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.cc-wl-b { font: 600 10px var(--f-mono); padding: 2px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted, #8fa0a8); }
.cc-wl-b.up { color: #3fcf9a; border-color: rgba(63, 207, 154, .5); }
.cc-wl-b.down { color: #ef6f6f; border-color: rgba(239, 111, 111, .5); }
.cc-wl-b.card { color: var(--tide, #80e2d4); border-color: rgba(128, 226, 212, .5); }
.cc-wl-b.gold { color: #e2b84f; border-color: rgba(226, 184, 79, .7); background: rgba(226, 184, 79, .1); }
.cc-wl-px { display: grid; gap: 2px; text-align: right; }
.cc-wl-px b { font: 600 15px var(--f-mono); }
.cc-wl-px small { font: 12px var(--f-mono); color: var(--muted, #8fa0a8); white-space: nowrap; }
.cc-wl-px small.up { color: #3fcf9a; } .cc-wl-px small.down { color: #ef6f6f; }
/* Watchlist groups, Edit and Add symbol (owner 2026-11-02) */
.cc-wl-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cc-wl-acts { display: flex; gap: 6px; flex: none; }
.cc-wl-mini { font: 600 12px var(--f-mono); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; }
.cc-wl-mini.on { border-color: var(--tide, #80e2d4); color: var(--tide, #80e2d4); }
.cc-wl-mini:disabled { opacity: .4; cursor: default; }
.cc-wl-gh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 6px 6px; border-bottom: 1px solid var(--line); }
.cc-wl-gh > span:first-child { font: 700 13px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--silver, #c8d4d8); }
.cc-wl-gh small { color: var(--muted, #8fa0a8); font-weight: 400; margin-left: 4px; }
.cc-wl-none { padding: 10px 6px 12px 14px; color: var(--muted, #8fa0a8); font-size: 12px; border-bottom: 1px solid var(--line); }
.cc-wl-row.edit { cursor: default; grid-template-columns: 42px minmax(0, 1fr); }
.cc-wl-row.edit .cc-wl-ed { grid-column: 1 / -1; }
.cc-wl-ed { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cc-wl-gsel, .cc-wl-form input, .cc-wl-form select { font: 14px var(--f-mono); min-height: 36px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.cc-wl-x { min-width: 36px; min-height: 36px; border-radius: 8px; border: 1px solid rgba(239, 111, 111, .5); background: none; color: #ef6f6f; cursor: pointer; }
.cc-wl-add { width: 100%; margin: 6px 0 4px; padding: 16px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: 600 16px var(--f-mono); cursor: pointer; }
.cc-wl-add span { font-size: 22px; margin-right: 6px; vertical-align: -2px; }
.cc-wl-form { display: grid; gap: 10px; margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.cc-wl-form label { display: grid; gap: 4px; font: 600 12px var(--f-mono); color: var(--silver, #c8d4d8); }
.cc-wl-form > span { display: flex; gap: 6px; }
.cc-wl-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; max-height: 300px; overflow: auto; }
.cc-wl-sym { display: grid; gap: 2px; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: none; color: var(--ink); font: 600 13px var(--f-mono); text-align: left; cursor: pointer; }
.cc-wl-sym small { color: var(--muted, #8fa0a8); font-weight: 400; font-size: 10px; }
.cc-wl-msg { margin: 0 0 8px; font: 12px var(--f-mono); color: var(--tide, #80e2d4); }
/* Data tab: the Blueprint (Directional intelligence) under the readings (owner 2026-11-02) */
.cc-bp { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }