:root{
  /* ---------------------------------------------------------------------
   * Design tokens (Sprint 6, Phase 2 step 1). Every existing variable name
   * below is UNCHANGED in value -- dozens of rules across this file
   * reference them directly, so renaming or re-valuing any of them would
   * be a silent, hard-to-audit visual regression. New tokens are added
   * alongside, and a handful of components that used --blue purely as
   * decoration (not as a real "info/data" or "focus" signal) are
   * re-pointed at neutral tokens further down this file -- see the
   * "Sprint 6: reduce decorative accent" comments near .funnel-title /
   * .filter-pill.active / .watchlist-chip / .cap-input.
   * --------------------------------------------------------------------- */
  --bg:#0F172A; --card:#1E293B; --card2:#172033; --border:#334155; --border2:#263349;
  --text:#E2E8F0; --mut:#94A3B8; --mut2:#64748B;
  --blue:#38BDF8; --blue-dim:rgba(56,189,248,.14);
  --green:#10B981; --green2:#34D399; --green-dim:rgba(16,185,129,.14);
  --red:#EF4444; --red-dim:rgba(239,68,68,.14);
  --amber:#F59E0B; --amber-dim:rgba(245,158,11,.14);

  /* Semantic trading/status roles -- point at the palette above rather
     than introducing new hues, per "renkleri değiştirme, kullanım
     hiyerarşisini düzelt": positive/negative/warning are the ONLY
     everyday uses of green/red/amber; --info is reserved for genuine
     data (R:R ratio, VWAP, AI-commentary labels), never decoration. */
  --color-positive:var(--green); --color-positive-dim:var(--green-dim);
  --color-negative:var(--red); --color-negative-dim:var(--red-dim);
  --color-warning:var(--amber); --color-warning-dim:var(--amber-dim);
  --color-info:var(--blue); --color-info-dim:var(--blue-dim);
  --color-neutral:var(--mut);
  --color-locked:#8B8FA3; --color-locked-dim:rgba(139,143,163,.14);

  /* Type scale -- Display/H1/H2/H3/Body/Secondary/Caption/Data. Values
     match what the affected elements already rendered at (tokenizing,
     not resizing) so applying these does not shift any existing layout. */
  --text-display:28px; --text-h1:22px; --text-h2:17px; --text-h3:14px;
  --text-body:14px; --text-secondary:12.5px; --text-caption:11px; --text-data:13px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-heavy:800;
  --lh-tight:1.2; --lh-normal:1.5; --lh-relaxed:1.65;

  /* Spacing scale (4/8/12/16/24/32/48/64) -- reference for new/refined
     rules; existing per-component paddings are left as-is this phase to
     avoid layout shift, and migrate onto this scale in later phases. */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  /* Radius -- 3 steps only (sm/md/pill), per "kaçın: aşırı border-radius". */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;

  /* Elevation -- reserved for genuinely floating layers (modal, toast,
     dropdown). Cards/tables get zero shadow, per "gereksiz shadows". */
  --shadow-elevate:0 8px 24px -8px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);

  /* Control heights -- documented for upcoming component migration;
     not yet force-applied to existing buttons/inputs this phase. */
  --control-h-sm:32px; --control-h-md:40px; --control-h-lg:48px;

  /* Table density -- matches current .trow padding, tokenized for reuse. */
  --table-pad-x:22px; --table-pad-y:13px;

  /* Chart spacing -- matches current .candle-wrap/.chart-card padding. */
  --chart-pad:16px;

  /* Breakpoints -- CSS custom properties can't drive @media queries;
     documented here as the single source of truth for the values the
     @media blocks below actually use (900px/640px), plus the two the
     design system calls for but this file doesn't need yet (375/1024). */
  --bp-mobile:375px; --bp-tablet:768px; --bp-desktop:1024px; --bp-wide:1440px;

  /* Z-index scale -- codifies the stacking order already in effect
     (topbar:30, modal-overlay:100, toast-root:200) rather than changing it. */
  --z-base:0; --z-sticky:30; --z-dropdown:60; --z-modal:100; --z-toast:200;

  /* Motion -- one easing curve, three durations. Everything added for the
     Dashboard motion pass (view entrance, stagger, hover elevation, skeleton,
     value flash) reads off these instead of inventing its own per rule, so
     the whole app shares one physical "feel" rather than a different speed
     per component. */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:280ms;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:var(--fw-regular);line-height:var(--lh-normal)}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}
.mono{font-family:'IBM Plex Mono',monospace}

/* Global primitive: visible keyboard focus on anything that doesn't
   already define its own :focus treatment. Several inputs below set
   outline:none and, before this rule, had no replacement -- keyboard
   focus was invisible on them (a real accessibility gap, ui-ux-pro-max
   §1 "focus-states"). This is a safety net; components with their own
   :focus border-color (history-input, sizing-field, journal-textarea)
   keep that as the more specific rule. */
:focus-visible{outline:2px solid var(--color-info);outline-offset:2px}
input:focus-visible,textarea:focus-visible{outline:none;border-color:var(--color-info)}
@keyframes lightPulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}50%{box-shadow:0 0 0 8px rgba(16,185,129,0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Motion pass: view-switch entrance, loading skeleton, value-change flash --
   see the token block above for --ease-out/--dur-*. */
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes skelPulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes flashUp{0%{color:var(--green)}100%{color:inherit}}
@keyframes flashDown{0%{color:var(--red)}100%{color:inherit}}

/* Every top-level `<section class="view">` fades/settles in on becoming
   visible -- purely reactive to the `hidden` attribute goView() already
   toggles (web/app.js), so navigation logic itself is untouched. display:none
   halts CSS animations entirely, so re-showing the same view always replays
   this from a clean start. #viewOverview opts out (its own rule in the
   Dashboard v3 block swaps in the no-op ccViewEnter hook) because its bands
   and contents carry their own staggered entrance instead -- one motion
   moment, not two stacked ones on the same navigation. */
.view:not([hidden]){animation:viewIn var(--dur-base) var(--ease-out) both}

/* Generic loading-skeleton primitive (Dashboard motion pass). Sized via
   inline style or a modifier per call site -- this only owns the pulse. */
.skel{background:var(--card2);border-radius:var(--radius-sm);animation:skelPulse 1.5s ease-in-out infinite}
.skel-line{height:11px;border-radius:4px}
.skel-block{border-radius:var(--radius-md)}

/* Value-change flash: a brief color pulse instead of a silent instant swap,
   for numbers that genuinely changed (never fires on first paint -- see
   renderHero() in app.js). The animation's own end state falls back to
   whatever color the normal cascade/inline style already says (no
   animation-fill-mode), so it never fights a value's own semantic color. */
.flash-up{animation:flashUp var(--dur-slow) var(--ease-out)}
.flash-down{animation:flashDown var(--dur-slow) var(--ease-out)}

#app{min-height:100vh;padding-bottom:56px}

.topbar{position:sticky;top:0;z-index:30;background:rgba(15,23,42,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1240px;margin:0 auto;padding:18px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:34px;height:34px;border-radius:11px;background:var(--blue-dim);border:1px solid rgba(56,189,248,.3);display:flex;align-items:center;justify-content:center;color:var(--blue);font-weight:800;font-size:14px}
.brand-title{font-size:16px;font-weight:700;letter-spacing:-.01em}
.brand-sub{font-size:11.5px;color:var(--mut);font-weight:500}
.spacer{flex:1}
.pill{display:flex;align-items:center;gap:9px;padding:7px 13px;border-radius:999px}
.market-pill .dot{width:8px;height:8px;border-radius:50%;animation:lightPulse 2.2s infinite}
.market-pill span:last-child{font-size:12px;font-weight:600}

/* Sprint 6 (Navigation/Header): account menu. Groups every low-frequency
   account action (subscription cancel, admin link, delete account,
   sign out) behind one trigger instead of 4-7 separate topbar buttons --
   the thing that made the mobile header 20000px+ of stacked pills. */
.account-menu{position:relative}
.account-trigger{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-pill);padding:4px 10px 4px 4px;min-height:44px;min-width:44px}
.account-trigger:hover{border-color:var(--mut2)}
.account-avatar{width:28px;height:28px;border-radius:50%;background:var(--blue-dim);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.account-chevron{color:var(--mut);font-size:11px;line-height:1}
.account-menu-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:var(--z-dropdown);min-width:240px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-elevate);padding:8px;animation:fadeUp .12s ease both}
.account-menu-header{padding:8px 12px 10px}
.account-menu-email{font-size:12.5px;color:var(--text);font-weight:600;overflow-wrap:anywhere}
.account-menu-tier{margin-top:6px}
.account-menu-item{display:block;width:100%;box-sizing:border-box;text-align:left;background:transparent;border:none;color:var(--text);font-size:13px;font-weight:500;font-family:inherit;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;min-height:40px}
.account-menu-item:hover{background:var(--card2)}
.account-menu-item.danger{color:var(--red)}
.account-menu-item.danger:hover{background:var(--red-dim)}
.account-menu-divider{height:1px;background:var(--border2);margin:6px 4px}
/* Sprint 6 (Navigation/Header): was a bordered, per-chip "card" strip
   (background box behind every single number). Replaced with a plain
   typographic list -- label/value pairs separated by whitespace, not
   containers -- per "daha az card-heavy, daha fazla typography". */
.topbar-meta,.topbar-wallet{display:flex;align-items:center;gap:22px}
.stat-chip{padding:0;background:transparent;min-width:0}
.stat-chip-label{font-size:10px;color:var(--mut2);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.stat-chip-value{font-size:13px;font-weight:600;margin-top:1px}
.topbar-wallet .stat-chip-value{font-size:13.5px;font-family:'IBM Plex Mono',monospace}

.shell{max-width:1240px;margin:0 auto;padding:26px 28px 0}

/* Sprint 6 (Terminal/Dashboard phase): the hero. One dominant number
   (equity) + three small secondary figures underneath -- no card, no
   border. This is the ONLY place these three numbers render (see
   renderHero() in app.js); the old header "wallet" strip that duplicated
   them was removed. */
.hero{padding:var(--space-6) 0 var(--space-4);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap;border-bottom:1px solid var(--border-soft, var(--border2))}
.hero-label{font-size:var(--text-caption);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--mut2)}
.hero-value{font-size:40px;font-weight:var(--fw-bold);letter-spacing:-.01em;margin-top:4px;font-variant-numeric:tabular-nums}
.hero-change{font-size:var(--text-secondary);font-weight:var(--fw-medium);margin-top:6px;color:var(--mut)}
.hero-stats{display:flex;gap:var(--space-8);flex-wrap:wrap}
.hero-stat .k{font-size:var(--text-caption);font-weight:var(--fw-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--mut2)}
.hero-stat .v{font-size:17px;font-weight:var(--fw-semibold);margin-top:3px;font-variant-numeric:tabular-nums}

/* Sprint 6: two-column grid for the decision/monitoring cluster (Hot
   Signals + Live Scan + Detail on the left, Watchlist + Positions +
   Trade History on the right). Below 1024px this collapses to one
   column, and because col-main is first in the DOM, mobile stacking
   already reads hot signals -> live scan -> secondary tools with no
   extra reordering logic needed. */
.dashboard-grid{display:grid;grid-template-columns:1fr;gap:var(--space-8);margin-top:var(--space-4)}
.col-main,.col-side{min-width:0}
@media (min-width:1024px){
  .dashboard-grid{grid-template-columns:1.7fr 1fr}
}

.scan-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.search-box{flex:1;min-width:280px;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:8px 8px 8px 18px}
.search-icon{color:var(--mut2);font-size:15px}
.search-box input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:14.5px;font-weight:500;padding:8px 0;letter-spacing:.01em}
.btn{border:none;font-weight:700;border-radius:12px;padding:11px 22px;font-size:13px}
.btn-primary{background:var(--blue);color:#06283D}
.btn-primary:hover{background:#7DD3FC}
.btn-scan{background:var(--green-dim);border:1px solid rgba(16,185,129,.4);color:var(--green);white-space:nowrap;font-size:13px;padding:13px 22px;border-radius:14px}
.btn-scan:hover{background:rgba(16,185,129,.26)}
.btn-scan:disabled{opacity:.5;cursor:default}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--mut);font-size:11.5px;font-weight:600;padding:7px 14px;border-radius:10px}
/* Sprint 6: was border-color/color:var(--red) on hover for EVERY ghost
   button, including plain dismiss actions (Kapat, Çıkış) that have
   nothing destructive about them. Danger is now its own explicit
   primitive (.btn-danger, .account-menu-item.danger below) so red only
   ever appears on an actually irreversible action. */
.btn-ghost:hover{border-color:var(--mut2);color:var(--text)}
.btn-danger{background:transparent;border:1px solid rgba(239,68,68,.35);color:var(--red);font-size:11.5px;font-weight:600;padding:7px 14px;border-radius:10px}
.btn-danger:hover{background:var(--red-dim)}
.btn-outline-blue{background:var(--blue-dim);border:1px solid rgba(56,189,248,.28);color:var(--blue);font-size:13px;font-weight:700;padding:12px;border-radius:14px}
.btn-outline-blue:hover{background:rgba(56,189,248,.22)}
.btn-green{background:var(--green);border:none;color:#052E22;font-size:13px;font-weight:700;padding:12px;border-radius:14px}
.btn-green:hover{background:var(--green2)}
.btn-green:disabled{opacity:.5;cursor:default}
.btn-small{font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:10px;border:1px solid rgba(16,185,129,.3);background:rgba(16,185,129,.14);color:var(--green)}
.btn-small:hover{background:rgba(16,185,129,.26)}
.btn-small-outline{font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--mut)}
.btn-small-outline:hover{border-color:var(--blue);color:var(--blue)}

.funnel{margin-top:14px}
.funnel-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 20px}
/* Sprint 6: was color:var(--blue) -- a section label, not real info/data,
   so it doesn't need an accent color at all (see token comment above). */
.funnel-title{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:10px}
.funnel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.funnel-item-label{font-size:10.5px;color:var(--mut);font-weight:600}
.funnel-item-value{font-size:18px;font-weight:700;margin-top:2px}

.banner-stack{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.banner{border-radius:12px;padding:10px 16px;font-size:12.5px;font-weight:700}
.banner-error{background:var(--red-dim);border:1px solid rgba(239,68,68,.35);color:var(--red)}
.banner-warn{background:var(--amber-dim);border:1px solid rgba(245,158,11,.35);color:var(--amber)}

.section-head{display:flex;align-items:center;gap:12px;padding-top:32px;flex-wrap:wrap}
.section-title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.section-sub{font-size:12.5px;color:var(--mut);font-weight:500}

.filter-bar{display:flex;gap:7px;flex-wrap:wrap}
.filter-pill{font-size:12px;font-weight:600;padding:8px 15px;border-radius:999px;background:var(--card);border:1px solid var(--border);color:var(--mut)}
/* Sprint 6: was a blue-tinted background/border/text -- a filter toggle
   isn't "info", so it's now a neutral selected state (bold text + a
   lighter border) instead of borrowing the data-accent color. */
.filter-pill.active{background:var(--card2);border-color:var(--mut2);color:var(--text)}

.hot-grid{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:var(--space-4)}
.hot-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;animation:fadeUp .3s ease both}
.hot-card-body{padding:var(--space-4) var(--space-6) var(--space-4);display:flex;flex-direction:column;gap:var(--space-4)}
.hot-head{display:flex;align-items:flex-start;gap:12px}
.hot-ticker{font-size:20px;font-weight:800;letter-spacing:-.02em}
.hot-name{font-size:11.5px;color:var(--mut);font-weight:500;margin-top:4px}
.badge{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;display:inline-block}
.price-block{text-align:right}
.price-val{font-size:20px;font-weight:600}
.price-chg{font-size:12.5px;font-weight:600;margin-top:2px}
.gauge-row{display:flex;align-items:center;gap:12px}
.gauge-track{flex:1;height:6px;background:var(--card2);border-radius:99px;overflow:hidden}
.gauge-fill{height:100%;border-radius:99px}
.gauge-label{font-size:11.5px;color:var(--mut);font-weight:600}
.gauge-val{font-size:14px;font-weight:700}
.thesis-box{background:var(--card2);border-radius:14px;padding:14px 16px}
.thesis-title{font-size:11.5px;font-weight:700;color:var(--blue);margin-bottom:6px}
.thesis-text{font-size:12.5px;line-height:1.6;color:#CBD5E1}
.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.level-cell{background:var(--card2);border-radius:14px;padding:12px 14px}
.level-key{font-size:10.5px;color:var(--mut);font-weight:600}
.level-val{font-size:15px;font-weight:600;margin-top:3px}
.badge-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:999px}
/* Sprint 6: was its own bordered/radius'd box nested inside .hot-card
   (already a card) -- a textbook "card-in-card". It's a subsection of
   the signal card now: a top divider instead of a full border, no
   background box, no radius. */
.midas-box{border-top:1px solid var(--border2);padding-top:var(--space-4)}
.midas-head{display:flex;align-items:center;gap:12px;padding-bottom:var(--space-3)}
.midas-head-title{font-size:12.5px;font-weight:700;color:var(--mut)}
.cap-input-wrap{display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:5px 11px}
.cap-input-wrap span{font-size:12px;color:var(--mut);font-weight:600}
/* Sprint 6: was color:var(--blue) -- an editable budget number, not a
   data-accent value, so it reads as plain text like any other input. */
.cap-input{background:transparent;border:none;outline:none;color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;width:58px;text-align:right}
.midas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border)}
.midas-cell{background:var(--card);padding:12px 16px}
.midas-cell-label{font-size:10.5px;color:var(--mut);font-weight:600}
.midas-cell-value{font-size:14.5px;font-weight:600;margin-top:3px}
.hot-actions{display:flex;gap:10px}
.hot-actions .btn{flex:1}

.table-card{margin-top:14px;background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.table-scroll{overflow-x:auto}
.min-w{min-width:900px}
.trow-head{display:grid;padding:14px 22px;border-bottom:1px solid var(--border);background:var(--card2)}
.trow-head > div{font-size:11px;font-weight:700;color:var(--mut);letter-spacing:.04em}
.trow{display:grid;align-items:center;padding:var(--table-pad-y) var(--table-pad-x);border-bottom:1px solid var(--border2);transition:background-color .12s ease}
.trow:last-child{border-bottom:none}
.trow:hover{background:var(--card2)}
/* Sprint 6: highlights the row whose signal is currently open in the
   detail panel below -- a real "active row" state, not just hover. */
.trow.active{background:var(--blue-dim)}
.trow .tname{font-size:11px;color:var(--mut2);font-weight:500;margin-top:1px}
.trow .tticker{font-size:13.5px;font-weight:700}
.bar-cell{display:flex;align-items:center;gap:9px}
.bar-track{width:44px;height:5px;background:var(--card2);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;border-radius:99px}
.empty-row{padding:26px 22px;text-align:center;font-size:12.5px;color:var(--mut2);font-weight:500}

.kpi-grid{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.kpi-cell{background:var(--card);padding:14px 16px}
.kpi-label{font-size:10.5px;color:var(--mut);font-weight:600}
.kpi-value{font-size:19px;font-weight:700;margin-top:4px}

.detail-panel{margin-top:16px;background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;animation:fadeUp .3s ease both}
.detail-head{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.detail-ticker{font-size:22px;font-weight:800;letter-spacing:-.02em}
.detail-name{font-size:12.5px;color:var(--mut);font-weight:500}
.detail-price{font-size:20px;font-weight:600}
.detail-chg{font-size:13px;font-weight:600}
.detail-body{display:grid;grid-template-columns:1.55fr 1fr;gap:1px;background:var(--border)}
.chart-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.chart-legend{display:flex;align-items:center;gap:5px}
.chart-legend .swatch{width:13px;height:2px;border-radius:2px}
.chart-legend span{font-size:10.5px;color:var(--mut);font-weight:600}
.candle-wrap{position:relative;height:196px;background:var(--card2);border:1px solid var(--border2);border-radius:14px;padding:14px 16px;overflow:hidden}
.candle-plot{position:relative;height:100%;display:flex;align-items:flex-end;gap:2px}
.candle-col{position:relative;flex:1 1 0;height:100%;min-width:3px}
.candle-wick{position:absolute;left:50%;transform:translateX(-50%);width:1px;opacity:.5}
.candle-body{position:absolute;left:0;right:0;border-radius:2px}
.ema-dot{position:absolute;left:50%;transform:translateX(-50%);width:2px;height:2px;border-radius:50%}
.vwap-line{position:absolute;left:16px;right:16px;height:1px;background:rgba(56,189,248,.5)}
.subchart-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.subchart-box{background:var(--card2);border:1px solid var(--border2);border-radius:14px;padding:11px 13px}
.subchart-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.subchart-head .label{font-size:10.5px;font-weight:700;color:var(--mut)}
.subchart-head .val{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600}
.subchart-head .hint{font-size:10px;color:#475569;font-weight:600}
.subchart-plot{position:relative;height:52px;display:flex;gap:2px}
.rsi-plot{align-items:flex-end}
.macd-plot{align-items:center}
.rsi-bar,.macd-bar{flex:1 1 0;min-width:2px;border-radius:2px}
.rsi-guide{position:absolute;left:0;right:0;height:1px}
.macd-zero{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--border)}
.chart-empty{padding:26px 16px;text-align:center;font-size:12.5px;color:var(--mut2);font-weight:500}
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.report-cell{background:var(--card2);border-radius:12px;padding:11px 13px}
.report-key{font-size:10.5px;color:var(--mut);font-weight:600}
.report-val{font-size:13px;font-weight:700;margin-top:3px}
.news-tag-badge{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.detail-col{background:var(--card);padding:22px 24px}
.metric-title{font-size:12.5px;font-weight:700;margin:0 0 10px}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.metric-cell{background:var(--card2);padding:11px 13px}
.metric-key{font-size:10.5px;color:var(--mut);font-weight:600}
.metric-val{font-size:14px;font-weight:600;margin-top:3px}
.news-item{display:flex;gap:10px;align-items:flex-start}
.news-time{font-size:11px;color:var(--mut2);padding-top:2px;min-width:36px}
.news-head{flex:1;font-size:12.5px;line-height:1.5;color:#CBD5E1}
.news-tag{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.detail-footer{display:flex;align-items:center;gap:14px;padding:16px 24px;border-top:1px solid var(--border);background:var(--card2);flex-wrap:wrap}

.chart-card{padding:20px 22px;position:relative}
#equityChart{width:100%;height:220px;display:block}

.history-filters{display:flex;gap:8px;flex-wrap:wrap}
.history-input,.history-select{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 13px;color:var(--text);font-size:12.5px;outline:none}
.history-input{min-width:180px}
.history-input:focus,.history-select:focus{border-color:var(--blue)}
.history-reason{font-size:11.5px;color:var(--mut);line-height:1.5;max-width:340px;white-space:normal}

.sub-pill{display:flex;align-items:center;gap:9px;padding:7px 13px;border-radius:999px;font-size:12px;font-weight:600}
.sub-pill.free{background:rgba(148,163,184,.12);color:var(--mut)}
.sub-pill.pro{background:var(--green-dim);color:var(--green)}
.sub-pill.past_due{background:var(--amber-dim);color:var(--amber)}
.sub-pill.cancelled{background:var(--red-dim);color:var(--red)}
/* Master_prompt #21/#7 (Phase 7 mobile check): every "PRO'ya Geç" CTA
   shares this class -- min-height 44px is the touch-target floor, padding
   alone left it at ~33px. */
.sub-upgrade-btn{background:var(--green);border:none;color:#052E22;font-size:12px;font-weight:700;padding:8px 16px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.sub-upgrade-btn:hover{background:var(--green2)}
/* Sprint 6: "Aboneliği İptal Et" moved into the account menu as a plain
   .account-menu-item -- .sub-cancel-btn is no longer created anywhere. */
#subscriptionArea{display:flex;align-items:center;gap:10px}
.checkout-form-host{min-height:420px}

.disclaimer{font-size:11.5px;color:var(--mut2);font-weight:500;text-align:center;padding:22px 0 0;line-height:1.6}

.toast-root{position:fixed;top:18px;right:18px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 16px;font-size:13px;font-weight:600;animation:toastIn .18s ease both;max-width:340px}
.toast.ok{border-color:rgba(16,185,129,.4);color:var(--green)}
.toast.err{border-color:rgba(239,68,68,.4);color:var(--red)}

.modal-overlay{position:fixed;inset:0;background:rgba(4,6,10,.72);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--card);border:1px solid var(--border);border-radius:20px;max-width:420px;width:100%;overflow:hidden;animation:fadeUp .2s ease both}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--border);font-size:15px;font-weight:700}
.modal-body{padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.modal-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.modal-row .k{color:var(--mut);font-weight:500}
.modal-row .v{font-weight:700}
.modal-shares{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:7px 13px}
.modal-shares input{background:transparent;border:none;outline:none;color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;width:100%}
.modal-actions{display:flex;gap:10px;padding:16px 22px;border-top:1px solid var(--border)}
.modal-actions .btn{flex:1}
.modal-error{background:var(--red-dim);border:1px solid rgba(239,68,68,.35);color:var(--red);border-radius:10px;padding:10px 12px;font-size:12.5px;font-weight:600}

/* Sprint 3: watchlist. Sprint 6: used to sit inside an extra .table-card
   wrapper (card-in-card) -- now a single-level section with its own
   light border, not double-wrapped. */
.watchlist-card{padding:var(--space-4) var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg)}
.watchlist-add-row{display:flex;gap:9px;flex-wrap:wrap}
.watchlist-add-row .history-input{flex:1;min-width:180px}
.watchlist-chips{display:flex;flex-wrap:wrap;gap:8px}
/* Sprint 6: was blue-tinted (background/border/text) -- a watchlist
   ticker is a neutral list item, not an info/data value. */
.watchlist-chip{display:flex;align-items:center;gap:7px;background:var(--card2);border:1px solid var(--border);color:var(--text);font-size:12.5px;font-weight:700;padding:6px 8px 6px 13px;border-radius:999px}
.wl-remove{background:transparent;border:none;color:inherit;opacity:.65;font-size:15px;line-height:1;padding:0 2px}
.wl-remove:hover{opacity:1;color:var(--red)}
.wl-star{color:var(--amber);font-size:11px}

/* Sprint 3: PRO dashboard upsell */
.upsell-card{padding:34px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.upsell-icon{font-size:26px}
.upsell-title{font-size:15px;font-weight:700}
.upsell-sub{font-size:12.5px;color:var(--mut);font-weight:500;max-width:420px;margin-bottom:6px}
.upsell-inline{display:flex;align-items:center;gap:10px;background:var(--card2);border:1px solid var(--border2);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--mut);font-weight:500}

/* Sprint 3: position-sizing calculator. Sprint 6: was double-wrapped in
   an extra .table-card; now single-level, and deliberately lighter than
   the trading cards around it (dashed border, --card2 not --card) so it
   reads as a secondary education utility, not a primary trading tool
   competing for the same visual weight as Hot Signals/Live Scan. */
.sizing-card{padding:var(--space-4) var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);background:var(--card2);border:1px dashed var(--border);border-radius:var(--radius-lg)}
.sizing-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.sizing-field{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--mut);font-weight:600}
.sizing-field input{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--text);font-size:13.5px;font-weight:600;outline:none}
.sizing-field input:focus{border-color:var(--blue)}

/* Sprint 3: signal education "Ne izlemeli?" */
.watch-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.watch-list li{font-size:12.5px;line-height:1.55;color:#CBD5E1}

/* Sprint 3: trade journal */
.journal-textarea{width:100%;min-height:110px;background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:11px 13px;color:var(--text);font-size:13px;font-family:inherit;resize:vertical;outline:none}
.journal-textarea:focus{border-color:var(--blue)}

@media (max-width:900px){
  .detail-body{grid-template-columns:1fr}
  /* Phase 10: a grid item defaults to min-width:auto, i.e. it refuses to
     shrink below its own min-content width. Measured at 375px: .detail-body
     was 345px wide but .detail-col stayed 484px, so the chart mounted at
     434px and its right edge was silently clipped by .detail-panel's
     overflow:hidden -- the chart never adapted to phone widths at all
     (identical 376px canvas at 375/390/430). min-width:0 lets the column
     take the track's width, and the chart's own resize handler (which reads
     container.clientWidth) then sizes it correctly. */
  .detail-col{min-width:0}
  .level-grid{grid-template-columns:1fr 1fr}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .subchart-grid{grid-template-columns:1fr}
  .report-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .midas-grid{grid-template-columns:1fr}
  .sizing-inputs{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  .topbar-inner{padding:14px 16px}
  .shell{padding:20px 14px 0}
  .topbar-meta,.topbar-wallet{display:none} /* headStats/walletStats: real estate better spent on content on a phone */
  .hero{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .hero-value{font-size:32px}
  .hero-stats{gap:var(--space-6)}
  .scan-bar{flex-direction:column;align-items:stretch}
  .search-box{min-width:0}
  .btn-scan{width:100%;text-align:center}
  .hot-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .sizing-inputs{grid-template-columns:1fr}
  .watchlist-add-row{flex-direction:column;align-items:stretch}
  .modal{max-width:100%;margin:0 8px}
}

/* ===========================================================================
 * Sprint 7 -- Dashboard sidebar/application-shell (Claude Design reference,
 * design-reference/dashboard/). Scoped entirely to `#app.dash-shell`
 * (app.html only): every NEW color/font token below is a scoped override on
 * that selector, so login.html/admin.html/landing.html -- which don't carry
 * this class -- keep the original :root palette untouched. Any rule here
 * that overrides an ALREADY-shared classname (.topbar, .account-menu-panel,
 * .pill, .market-pill, .btn-ghost, .mono, ...) is likewise written as
 * `.dash-shell <selector>` so its higher specificity wins only inside this
 * page, never touching the base rule other pages still use.
 * ========================================================================= */

#app.dash-shell{
  --bg:#08090A; --card:#0E1112; --card2:#0B0E0F; --border:#1C2223; --border2:#171D1E;
  --text:#E6EBE8; --mut:#79837F; --mut2:#5A6360;
  --blue:#4C7BFF; --blue-dim:rgba(76,123,255,.12);
  --green:#1FE08C; --green2:#25EE97; --green-dim:rgba(31,224,140,.10);
  --red:#FF6B6F; --red-dim:rgba(255,107,111,.10);
  --amber:#F2B441; --amber-dim:rgba(242,180,65,.12);
  font-family:'Geist','Manrope',system-ui,sans-serif;
  display:flex;align-items:stretch;min-height:100vh;padding-bottom:0;
  background:var(--bg);color:var(--text);
}
.dash-shell .mono{font-family:'Geist Mono','JetBrains Mono',monospace}
.dash-shell ::-webkit-scrollbar-thumb{background:var(--border)}

/* ---- sidebar ---- */
.sidebar{width:246px;flex:0 0 246px;display:flex;flex-direction:column;background:var(--card2);border-right:1px solid var(--border);position:sticky;top:0;height:100vh;z-index:40}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:20px 18px 16px;flex:0 0 auto}
.sidebar-brand .brand-title{font-size:14.5px;font-weight:700;letter-spacing:-.2px}
.sidebar-brand .accent{color:var(--mut);font-weight:600}
.sidebar-nav{display:flex;flex-direction:column;gap:2px;padding:4px 12px;flex:1;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;font-size:13px;font-weight:500;color:var(--mut);background:transparent;border:none;cursor:pointer;text-align:left;width:100%;font-family:inherit}
.nav-item:hover{background:var(--card)}
.nav-item.active{background:var(--card);color:var(--text);font-weight:600;box-shadow:inset 2px 0 0 var(--green)}
.nav-item svg{flex:0 0 auto;opacity:.9}
.nav-item span:not(.nav-badge){flex:1;white-space:nowrap}
.nav-badge{font-family:'Geist Mono','JetBrains Mono',monospace;font-size:10px;color:var(--mut2);border:1px solid var(--border);border-radius:5px;padding:1px 5px}
.nav-badge:empty{display:none}
.nav-item.active .nav-badge{color:var(--green);border-color:rgba(31,224,140,.3)}

.sidebar-footer{padding:12px 12px 14px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--border2);flex:0 0 auto}
.btn-scan-sidebar{width:100%;margin-top:10px;border:none;border-radius:11px;padding:12px 14px;background:linear-gradient(180deg,var(--green2),var(--green));color:#04140C;font-family:'Geist','Manrope',sans-serif;font-size:12.5px;font-weight:700;cursor:pointer}
.btn-scan-sidebar:hover{filter:brightness(1.07)}
.btn-scan-sidebar:disabled{opacity:.6;cursor:default}

.sidebar-account-menu{position:relative;margin-top:12px}
.sidebar-account-trigger{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:1px solid var(--border);border-radius:12px;padding:8px 10px;cursor:pointer;min-height:0}
.sidebar-account-trigger:hover{border-color:var(--mut2)}
.sidebar-account-info{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column}
.sidebar-account-name{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-account-sub{font-size:10.5px;color:var(--mut2)}
.dash-shell .account-menu-panel-up{top:auto;bottom:calc(100% + 8px);left:0;right:0}

.sidebar-overlay{display:none}
.sidebar-overlay.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:35}

/* ---- topbar / workspace ---- */
.workspace{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.dash-shell .dash-topbar{background:var(--card2);border-bottom:1px solid var(--border)}
.dash-shell .dash-topbar-inner{max-width:none;padding:14px 22px;gap:14px}
.burger-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--text);cursor:pointer;flex:0 0 auto}
.topbar-page-title{min-width:120px}
.page-title{font-size:16px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-sub{font-size:11.5px;color:var(--mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-shell .dash-market-pill{background:var(--card);border:1px solid var(--border);flex:0 0 auto}
.dash-shell .dash-search-box{max-width:230px;background:var(--card);border:1px solid var(--border)}
.dash-search-go{background:transparent;border:none;color:var(--green);font-size:11.5px;font-weight:700;cursor:pointer;padding:6px 4px}
.dash-shell .dash-notify-btn{background:var(--card);border-color:var(--border);flex:0 0 auto;white-space:nowrap}
.dash-head-stats{display:flex;gap:16px;padding:6px 12px;border:1px solid var(--border);border-radius:9px;background:var(--card)}
.dash-head-stats .stat-chip-label{font-size:9px}
.dash-head-stats .stat-chip-value{font-size:12px}

/* ---- ticker tape ---- */
.ticker-tape{display:flex;align-items:center;height:32px;overflow:hidden;border-bottom:1px solid var(--border2);background:var(--card2)}
.ticker-track{display:flex;width:max-content;animation:dashTickerMove 48s linear infinite}
/* Pause on hover so a price is actually readable -- same technique as any
   marquee/live-ticker component (pause the scroll, don't stop the data). */
.ticker-tape:hover .ticker-track{animation-play-state:paused}
.ticker-half{display:flex}
.ticker-item{display:flex;align-items:center;gap:8px;padding:0 16px;border-right:1px solid var(--border2);font-family:'Geist Mono','JetBrains Mono',monospace;font-size:11.5px;white-space:nowrap}
.ticker-sym{color:var(--mut)}
@keyframes dashTickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.workspace-body{flex:1;overflow-y:auto;padding:20px 24px 40px}

/* ---- Genel / Piyasalar / Paper / Performans / Ayarlar card primitives ---- */
.dash-grid-2col{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-top:14px}
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px}
.dash-card-span2{grid-column:span 2;min-width:0}
.dash-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dash-card-title{font-size:14px;font-weight:700;letter-spacing:-.005em}

.stat-strip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.stat-strip-cell{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.stat-strip-label{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.stat-strip-value{font-size:22px;font-weight:600;margin-top:6px}

.watchlist-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}

.order-side-toggle{display:flex;gap:8px;margin-top:16px}
.order-side-btn{flex:1;text-align:center;padding:10px;border-radius:10px;font-family:'Geist Mono','JetBrains Mono',monospace;font-size:12.5px;font-weight:700;cursor:pointer;border:1px solid var(--border);color:var(--mut)}
.order-side-btn.side-buy.active{border-color:rgba(31,224,140,.35);background:rgba(31,224,140,.1);color:var(--green)}
.order-side-btn.side-sell.active{border-color:rgba(255,107,111,.35);background:rgba(255,107,111,.08);color:var(--red)}
.paper-order-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.monthly-returns-chart{display:flex;align-items:flex-end;gap:10px;height:200px;margin-top:16px}
.monthly-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:8px}
.monthly-bar-val{font-size:10.5px}
.monthly-bar{width:100%;max-width:44px;border-radius:6px 6px 3px 3px}
.monthly-bar-label{font-size:11px;color:var(--mut2)}

.best-worst-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:12px}
.best-worst-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border2)}
.best-worst-row .section-sub{flex:1}

.settings-info-list{margin-top:12px}
.settings-info-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border2);font-size:12.5px}
.settings-info-row .k{color:var(--mut)}
.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

.detail-breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut);margin-bottom:14px;flex-wrap:wrap}
.breadcrumb-link{cursor:pointer;color:var(--mut2)}
.breadcrumb-link:hover{color:var(--green)}
.breadcrumb-sep{color:var(--border)}
.breadcrumb-current{color:var(--text);font-family:'Geist Mono','JetBrains Mono',monospace}

/* ---- Trading Workspace: timeframe tabs + real volume subchart ---- */
.tf-bar{display:flex;gap:4px;border:1px solid var(--border);border-radius:9px;padding:3px;background:var(--card2)}
.tf-tab{padding:5px 11px;border-radius:7px;font-family:'Geist Mono','JetBrains Mono',monospace;font-size:11.5px;font-weight:600;cursor:pointer;background:transparent;border:none;color:var(--mut)}
.tf-tab.active{background:var(--card);color:var(--green)}
.dash-shell .subchart-grid-3{grid-template-columns:repeat(3,1fr)}
.vol-plot{align-items:flex-end}
.vol-bar{flex:1 1 0;min-width:2px;border-radius:2px;background:rgba(76,123,255,.45)}

/* ---- Sprint 8: live-price cache display states ---- */
.price-stale-tag{font-family:'Geist','Manrope',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.03em;color:var(--mut2);border:1px solid var(--border);border-radius:5px;padding:1px 5px;vertical-align:middle}
.price-unavailable{font-family:'Geist','Manrope',sans-serif;font-size:11px;font-weight:600;color:var(--mut2);font-style:italic}

/* ---- Sprint 9: Free/PRO lock card -- same .upsell-card base every other
   "you need PRO" moment already used (quota exceeded, Performans lock),
   just with a small badge on top so it specifically reads as a PRO-tier
   gate rather than a generic empty/error state. ---- */
.pro-lock-card{border:1px solid rgba(31,224,140,.25);background:linear-gradient(180deg,rgba(31,224,140,.06),var(--card))}
.dash-shell .pro-lock-card{background:linear-gradient(180deg,rgba(31,224,140,.08),var(--card))}
.pro-lock-badge{font-family:'Geist Mono','JetBrains Mono','IBM Plex Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--green);border:1px solid rgba(31,224,140,.3);background:rgba(31,224,140,.1);border-radius:999px;padding:4px 11px}

/* ---- responsive: sidebar collapses to a drawer below 1000px ---- */
@media (max-width:999px){
  .burger-btn{display:flex}
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-105%);transition:transform .25s ease;box-shadow:24px 0 48px rgba(0,0,0,.5)}
  .sidebar.open{transform:translateX(0)}
  .dash-shell .dash-topbar-inner{flex-wrap:wrap;row-gap:10px}
  .dash-shell .dash-search-box{order:6;flex:1 1 100%;max-width:none}
  .dash-grid-2col{grid-template-columns:1fr}
  .dash-card-span2{grid-column:span 1}
  /* .dash-shell .subchart-grid-3 (2 classes) otherwise outranks the
     pre-existing @media(max-width:900px){.subchart-grid{...1fr}} collapse
     rule below (1 class) at every width, since specificity -- not media
     query nesting -- decides ties. Same fix at 2 columns first, since a
     tablet-width screen has room for RSI+MACD side by side with only
     Volume dropping to its own row. */
  .dash-shell .subchart-grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .dash-shell .subchart-grid-3{grid-template-columns:1fr}
}
@media (max-width:640px){
  .dash-head-stats{display:none}
  .workspace-body{padding:16px 14px 32px}
  .paper-order-fields{grid-template-columns:1fr}
  .best-worst-cols{grid-template-columns:1fr}
  .stat-strip-grid{grid-template-columns:1fr 1fr}
  .sidebar{width:82vw;max-width:300px;flex-basis:82vw}
}


/* ===========================================================================
 * TradingView-style detail chart (Lightweight Charts, vanilla JS). Reuses
 * the existing design tokens (--card2/--border2/--mut/--green/--red/--blue)
 * exclusively -- no new palette. The old div/CSS-based candle renderer's
 * rules (.candle-wrap/.candle-plot/.subchart-*/.rsi-*/.macd-*/.vol-bar
 * above) are left in place (dead weight, harmless) rather than removed, to
 * keep this diff scoped to what the new chart actually needs.
 * ========================================================================= */

.chart-tool-btn{background:var(--card2);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:600;cursor:pointer}
.chart-tool-btn:hover{border-color:var(--mut2)}

.chart-indicator-wrap{position:relative}
.chart-indicator-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px;min-width:170px;box-shadow:0 12px 28px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:2px}
/* [hidden] and .chart-indicator-menu carry equal specificity, so without
   this the class's own `display:flex` (later in source order) would beat
   the UA stylesheet's `[hidden]{display:none}` and the dropdown would stay
   visually open (and click-through, intercepting drawing-tool clicks)
   even after JS sets `.hidden = true`. */
.chart-indicator-menu[hidden]{display:none}
.chart-indicator-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:12px;color:var(--text);cursor:pointer}
.chart-indicator-item:hover{background:var(--card2)}
.chart-indicator-item input{accent-color:var(--green);cursor:pointer}

.chart-draw-toolbar{display:flex;flex-wrap:wrap;gap:4px}
.chart-draw-btn{background:var(--card2);border:1px solid var(--border2);color:var(--mut);border-radius:8px;padding:5px 9px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}
.chart-draw-btn:hover{color:var(--text)}
.chart-draw-btn.active{background:var(--blue-dim);border-color:var(--blue);color:var(--blue)}
.chart-draw-btn.chart-draw-clear{color:var(--red)}

.chart-status{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--mut);background:var(--card2);border:1px solid var(--border2);border-radius:20px;padding:4px 10px}
.chart-status-dot{width:7px;height:7px;border-radius:50%;background:var(--mut2)}
.chart-status.is-live .chart-status-dot{background:var(--green);box-shadow:0 0 0 3px var(--green-dim)}
.chart-status.is-live .chart-status-text{color:var(--green)}
.chart-status.is-hist .chart-status-dot{background:var(--amber)}
.chart-status.is-hist .chart-status-text{color:var(--amber)}

.chart-header-strip{display:flex;align-items:baseline;gap:12px;margin:10px 0 6px}
.chart-header-ticker{font-size:13px;font-weight:800;color:var(--text)}
.chart-header-price{font-size:15px;font-weight:700}
.chart-bidask{font-size:11px;color:var(--mut);font-weight:600}

.lwc-mount-wrap{position:relative;border:1px solid var(--border2);border-radius:14px;background:var(--card2);overflow:hidden}
.chart-mount{width:100%;height:420px}
.lwc-chart-host{width:100%;height:100%}
.chart-mount .chart-empty{position:static}
#chartEmptyOverlay.chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:var(--card2);color:var(--mut);font-size:12.5px;z-index:5}
#chartEmptyOverlay[hidden]{display:none} /* same equal-specificity-vs-[hidden] issue as .chart-indicator-menu above */

.chart-tooltip{position:absolute;z-index:20;background:rgba(15,23,42,.94);border:1px solid var(--border2);border-radius:10px;padding:8px 10px;font-size:11px;color:var(--text);pointer-events:none;min-width:150px}
.chart-tooltip-time{font-weight:700;color:var(--mut);margin-bottom:4px;font-size:10.5px}
.chart-tooltip-row{display:flex;justify-content:space-between;gap:14px;line-height:1.55}
.chart-tooltip-row span:first-child{color:var(--mut)}

@media (max-width:900px){
  .chart-mount{height:320px}
  .chart-toolbar{gap:8px}
  .chart-draw-toolbar{overflow-x:auto;flex-wrap:nowrap;max-width:100%;padding-bottom:2px}
  .chart-indicator-menu{left:auto;right:0}
}
@media (max-width:640px){
  .tf-bar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .chart-mount{height:260px}
  .chart-tooltip{display:none} /* no hover crosshair on touch; avoids a stuck tooltip */
}

/* ===========================================================================
 * Master_prompt #4 / #37: "Bugunun Sinyalleri" -- the dashboard's lead
 * section. Deliberately denser than a hot-card but far lighter than one:
 * only the decision inputs (signal, score, AI verdict, levels, age), no
 * calculator, no news block. Reuses the existing tokens only -- no new
 * palette, per #22.
 * ======================================================================== */
.today-head{padding-top:2px}
.today-grid{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-4)}
.today-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px 16px;display:flex;flex-direction:column;gap:11px;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out)}
/* Hover elevation is reserved for genuinely clickable cards (this one opens
   the signal detail) -- static info cards (KPI/hero panels) get none, so
   the presence of motion itself signals "this responds to a click". */
.today-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow-elevate)}
.today-card-top{display:flex;align-items:center;gap:9px}
.today-ticker{font-size:18px;font-weight:800;letter-spacing:-.02em}
.today-price{text-align:right;line-height:1.3}
.today-chg{font-size:11.5px}
.today-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11.5px;color:var(--mut)}
.today-score b{color:var(--text);font-weight:700}
.today-age{font-size:11px;font-weight:600;white-space:nowrap}
.today-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);padding:10px 0}
.today-levels>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.today-levels span{font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.today-levels b{font-size:13px;font-weight:700}
.today-actions{display:flex;gap:8px}
.today-actions>*{flex:1}
.today-empty{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px 22px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.today-empty-title{font-size:15px;font-weight:700;color:var(--text)}
.today-empty-sub{font-size:12.5px;color:var(--mut);line-height:1.6;max-width:60ch}
.today-empty>button{margin-top:6px}

@media (max-width:640px){
  .today-grid{grid-template-columns:1fr;gap:12px}
  .today-card{padding:13px 14px}
  .today-levels{grid-template-columns:repeat(2,1fr);gap:10px 8px}
  .today-actions{flex-direction:column}
  .today-actions>*{width:100%}
}

/* Master_prompt #5: feed ticker search, sits inline in the filter bar. */
.ticker-filter{background:var(--card2);border:1px solid var(--border);color:var(--text);
  border-radius:999px;padding:6px 13px;font-size:12px;font-family:inherit;width:130px;
  outline:none;transition:border-color .15s ease}
.ticker-filter::placeholder{color:var(--mut2)}
.ticker-filter:focus{border-color:var(--mut)}
@media (max-width:640px){ .ticker-filter{width:100%} }

/* Master_prompt #10: single market-closed status line (replaces the old
   two stacked banners -- same information, one row, plus the honest
   "last updated" stamp the two banners never carried). */
.market-closed-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--red-dim);border:1px solid rgba(239,68,68,.32);border-radius:var(--radius-md);
  padding:9px 14px;margin-bottom:14px;font-size:12.5px;color:var(--text)}
.market-closed-bar b{font-size:12px;letter-spacing:.03em;color:var(--red)}
.mcb-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.mcb-sep{color:var(--mut2)}
.mcb-note{color:var(--mut)}
.mcb-stamp{font-size:11.5px;color:var(--mut);white-space:nowrap}
@media (max-width:640px){
  .market-closed-bar{font-size:11.5px;padding:8px 11px;gap:6px}
  .mcb-stamp{width:100%;padding-top:2px}
}
.today-price-tag{font-size:9.5px;color:var(--mut2);text-transform:uppercase;letter-spacing:.05em;margin-top:1px}

/* ===========================================================================
 * Master_prompt #6/#7: signal explainability -- the technical checklist that
 * replays market_data.technical_score()'s own checks, and the structured AI
 * card (verdict + confidence + reasoning + risks).
 * ======================================================================== */
.tc-score{font-size:11.5px;font-weight:700;color:var(--text)}
.tc-count{font-size:11px;font-weight:500;color:var(--mut)}
.tc-list{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.tc-list li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.5}
.tc-mark{flex:none;width:14px;font-weight:800;font-size:12px;line-height:1.5}
.tc-ok{color:var(--text)}
.tc-ok .tc-mark{color:var(--green)}
.tc-no{color:var(--mut)}
.tc-no .tc-mark{color:var(--mut2)}

.ai-card{margin-top:18px;background:var(--card2);border:1px solid var(--border2);
  border-radius:var(--radius-md);padding:14px 15px}
.ai-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ai-sub{font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;
  letter-spacing:.06em;margin:12px 0 5px}
.ai-card .ai-sub:first-of-type{margin-top:0}
.ai-note{font-size:12.5px;color:var(--mut);line-height:1.6}
.detail-age{font-size:11.5px;font-weight:600;white-space:nowrap}

/* ===========================================================================
 * Master_prompt #11: watchlist cards. Reuses the .today-card shell so a
 * watched ticker reads exactly like a dashboard signal -- same shape, same
 * tokens -- plus the per-row "last update" line and remove/analyze actions.
 * ======================================================================== */
.watchlist-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-4)}
.wl-card{cursor:pointer}
.wl-card-empty{cursor:default}
.wl-card-empty:hover{transform:none;border-color:var(--border);box-shadow:none}
.wl-empty-note{font-size:12px;color:var(--mut);line-height:1.6;
  border-top:1px solid var(--border2);padding-top:10px}
.wl-updated{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:11px;color:var(--mut)}
.wl-updated b{font-weight:700;color:var(--text)}
@media (max-width:640px){
  .watchlist-cards-grid{grid-template-columns:1fr;gap:12px}
}

/* Master_prompt #12: a stat cell whose honest value is a short sentence
   ("Yeterli veri yok" / "PRO") rather than a number -- same cell, smaller
   type so it does not masquerade as a metric. */
.stat-strip-value-sm{font-size:12px;font-weight:600;letter-spacing:0}

/* Master_prompt #13 (Phase 6): Performance screen grouping. Account value
   (includes open positions) and realised closed-trade results are separate
   blocks with their own headings so the two can never be read as one number. */
.perf-group-head{display:flex;flex-direction:column;gap:2px;margin:0 0 10px}
.perf-group-title{font-size:14px;font-weight:700;color:var(--text)}
.perf-group-sub{font-size:11.5px;color:var(--mut)}
/* A cell whose honest value is a short phrase, not a figure. */
.kpi-value-sm{font-size:12px;font-weight:600;letter-spacing:0}
/* Both Performance-screen canvases need an explicit width the way
   #equityChart already had one; without it they sat at the 300px HTML
   default inside a full-width card. */
#equityChartPerf{width:100%;height:220px;display:block}
#pnlChart{width:100%;height:180px;display:block}

/* ===========================================================================
 * Master_prompt #17/#18 (Phase 7): FREE-vs-PRO comparison table (Settings).
 * Plain, tabular, no urgency styling -- deliberately calmer than the rest
 * of the paywall surfaces since this is a page the user visited on purpose.
 * ======================================================================== */
.plan-compare{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.plan-compare-row{display:grid;grid-template-columns:1.6fr .8fr .8fr;gap:10px;
  padding:10px 14px;font-size:12.5px;border-bottom:1px solid var(--border2)}
.plan-compare-row:last-child{border-bottom:none}
.plan-compare-head{background:var(--card2);font-size:11px;font-weight:700;
  color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.plan-compare-label{color:var(--text)}
.plan-compare-free{color:var(--mut)}
.plan-compare-pro{color:var(--green);font-weight:600}
.plan-compare-note{font-size:12.5px;color:var(--green);font-weight:600}
@media (max-width:640px){
  .plan-compare-row{grid-template-columns:1.4fr .7fr .7fr;gap:6px;padding:9px 10px;font-size:11.5px}
}

/* Phase 8: click-through toasts (STRONG_BUY / auto-close notifications). */
.toast-clickable{cursor:pointer}
.toast-clickable:hover{border-color:var(--mut)}

/* ===========================================================================
 * Phase 10 -- touch targets. Audited with Playwright across 375/390/430/768:
 * every interactive control below measured under the 44px minimum (worst:
 * the watchlist chip's remove button at 11x15px, the chart toolbars at
 * 24-27px tall, and every signal-card action button at 29px).
 *
 * Scoped to <=820px on purpose: 1024/1440 are pointer-driven and keep the
 * denser desktop sizing this UI was built around. Nothing is removed or
 * relaid out -- these only raise the hit box, so no feature changes shape.
 * ======================================================================== */
@media (max-width:820px){
  /* every button-shaped control: grow the hit box, keep the label centered */
  .btn,
  .btn-primary,
  .btn-green,
  .btn-outline-blue,
  .btn-ghost,
  .btn-danger,
  .btn-danger-solid,
  .btn-scan,
  .btn-scan-sidebar,
  .btn-small,
  .btn-small-outline,
  .filter-pill,
  .nav-item,
  .tf-tab,
  .chart-tool-btn,
  .chart-draw-btn,
  .dash-search-go,
  .account-menu-item,
  .order-side-btn{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  /* nav rows are full-width lists, not centered pills */
  .nav-item{display:flex;justify-content:flex-start}
  .btn-scan-sidebar,.account-menu-item{display:flex}

  /* icon-only controls need width too */
  .burger-btn{width:44px;height:44px}

  /* the watchlist chip's "x" was the smallest target in the app (11x15) */
  .wl-remove{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0}
  .watchlist-chip{min-height:44px}

  /* short-label controls ("5m", "Al", "Ray") cleared 44px in height but not
     in width -- a tab is still a thumb-sized target in both axes */
  .tf-tab,.filter-pill,.chart-draw-btn,.chart-tool-btn{min-width:44px}
  /* The drawing toolbar is a nowrap + overflow-x:auto strip (see the
     max-width:640px block above), and flex items shrink by default: the
     buttons were being squeezed narrower than their own labels, so
     "Yatay Çizgi" rendered clipped as "atay Çizg" instead of the row
     scrolling. Pinning their size makes the strip scroll as designed.
     Caught visually at 375px -- a document-overflow check cannot see it,
     because the clipping happens inside the strip. */
  .chart-draw-toolbar .chart-draw-btn,
  .chart-toolbar .chart-tool-btn{flex:0 0 auto}

  /* text/number inputs and selects */
  input,select,
  .history-input,.history-select,.ticker-filter,#tickerInput{min-height:44px}
  /* the budget field sits inside a bordered wrapper: drop the wrapper's own
     vertical padding so the INPUT itself can be the full 44px target --
     otherwise the tappable 44px belongs to the wrapper and a tap on its
     padding doesn't focus the field. */
  .cap-input-wrap{min-height:44px;padding-top:0;padding-bottom:0}
  .cap-input{min-height:44px}
}


/* ==========================================================================
   Sprint 2 -- chart workspace (web/chart.js), analysis view, learning card
   ========================================================================== */
.modal{max-height:calc(100dvh - 24px);overflow-y:auto}
.modal-wide{max-width:640px}
.cw-host{position:relative;width:100%}
/* overlays/menus here set display, which would beat the UA [hidden] rule */
.cw-root [hidden],.aw-panel [hidden]{display:none!important}
.cw-root{display:flex;flex-direction:column;background:var(--card2);border:1px solid var(--border2);border-radius:14px;overflow:hidden}
.cw-toolbar{display:flex;align-items:center;gap:6px;padding:8px;border-bottom:1px solid var(--border2);flex-wrap:wrap}
.cw-tfs{display:flex;gap:2px;background:var(--bg);border-radius:10px;padding:2px}
.cw-tf{background:transparent;border:0;color:var(--mut);font-size:12px;font-weight:700;padding:6px 10px;border-radius:8px;cursor:pointer;min-width:40px}
.cw-tf.active{background:var(--card);color:var(--text)}
.cw-tf:disabled{opacity:.45;cursor:not-allowed}
.cw-btn,.cw-tool{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border2);color:var(--mut);font-size:12px;font-weight:600;padding:6px 10px;border-radius:9px;cursor:pointer;white-space:nowrap}
.cw-btn:hover,.cw-tool:hover{border-color:var(--blue);color:var(--text)}
.cw-btn.active,.cw-tool.active{background:rgba(56,189,248,.14);border-color:rgba(56,189,248,.5);color:var(--blue)}
.cw-primary{border-color:rgba(16,185,129,.45);color:var(--green)}
.cw-tool:disabled{opacity:.4;cursor:not-allowed}
.cw-danger:not(:disabled):hover{border-color:var(--red);color:var(--red)}
.cw-tools{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.cw-tools::-webkit-scrollbar{display:none}
.cw-tools .cw-tool{flex:0 0 auto}
.cw-ico{font-size:13px;line-height:1;min-width:14px;text-align:center}
.cw-dd{position:relative}
.cw-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:280px;max-height:70vh;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.cw-menu-title{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut2);margin:6px 2px}
.cw-menu-row{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:12.5px}
.cw-menu-row label{display:flex;align-items:center;gap:8px;flex:1;cursor:pointer}
.cw-period{width:58px;background:var(--bg);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:4px 6px;font-size:12px}
.cw-q{width:24px;height:24px;border-radius:50%;border:1px solid var(--border2);background:transparent;color:var(--mut);font-weight:700;cursor:pointer}
.cw-q:hover{color:var(--blue);border-color:var(--blue)}
.cw-menu-reset{width:100%;justify-content:center;margin-top:8px}
.cw-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--mut2)}
.cw-dot{width:7px;height:7px;border-radius:50%;background:var(--mut2)}
.cw-live.is-live{color:var(--green)}
.cw-live.is-live .cw-dot{background:var(--green);box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.cw-live.is-hist{color:var(--amber, #F59E0B)}
.cw-stage{position:relative}
.cw-chart{position:relative;width:100%;height:440px;touch-action:pan-y}
.cw-host-analysis .cw-chart{height:clamp(420px, calc(100dvh - 300px), 760px)}
.cw-legend{position:absolute;top:6px;left:8px;right:70px;z-index:5;pointer-events:none;font-size:11.5px;color:var(--mut)}
.cw-legend-row{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.cw-legend-row b{color:var(--text);font-weight:600;font-family:'Geist Mono','JetBrains Mono',monospace}
.cw-legend-t{font-weight:800;color:var(--text)}
.cw-legend-tf{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:6px;background:rgba(148,163,184,.15)}
.cw-legend-mut em{font-style:normal;color:var(--amber, #F59E0B)}
.cw-legend-chips{margin-top:3px}
.cw-chip{pointer-events:auto;display:inline-flex;align-items:center;gap:5px;background:rgba(15,23,42,.72);border:1px solid transparent;color:var(--mut);font-size:11px;padding:2px 7px;border-radius:7px;cursor:help}
.cw-chip:hover{border-color:var(--border)}
.cw-chip i{width:8px;height:2px;border-radius:2px;display:inline-block}
.cw-hint{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:6;background:rgba(15,23,42,.92);border:1px solid var(--border);color:var(--text);font-size:12px;font-weight:600;padding:6px 12px;border-radius:10px;pointer-events:none;max-width:92%;text-align:center}
.cw-empty{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:var(--mut);font-size:13px;background:rgba(23,32,51,.75)}
.cw-foot{padding:6px 10px;font-size:11px;color:var(--mut2);border-top:1px solid var(--border2)}

.aw-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.aw-ticker-form{display:flex;gap:6px}
.aw-ticker-input{width:150px;background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 10px;font-size:14px;text-transform:uppercase}
.aw-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
.aw-chart-col{min-width:0}
.aw-panel{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;position:sticky;top:8px;max-height:calc(100dvh - 120px);display:flex;flex-direction:column}
.aw-tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--border2);scrollbar-width:none}
.aw-tabs::-webkit-scrollbar{display:none}
.aw-tab{flex:1 1 auto;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--mut);font-size:12px;font-weight:700;padding:11px 6px;cursor:pointer}
.aw-tab.active{color:var(--text);border-bottom-color:var(--blue)}
.aw-body{padding:14px;overflow-y:auto;font-size:13px;line-height:1.5}
.aw-sec-title{font-size:13px;font-weight:800;margin-bottom:6px}
.aw-mut{color:var(--mut);font-size:12.5px}
.aw-warn{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:#FCD34D;border-radius:10px;padding:8px 10px;font-size:12.5px;margin:8px 0}
.aw-quick{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.aw-quick span{background:rgba(56,189,248,.1);color:#BAE6FD;border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:600}
.aw-kv{display:grid;grid-template-columns:1fr;gap:4px;margin:6px 0}
.aw-kv>div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed var(--border2);font-size:12.5px}
.aw-kv span{color:var(--mut)}
.aw-choice{display:flex;gap:6px;margin:8px 0}
.aw-choice label{flex:1;cursor:pointer}
.aw-choice input{position:absolute;opacity:0;pointer-events:none}
.aw-choice span{display:block;text-align:center;border:1px solid var(--border);border-radius:10px;padding:9px 6px;font-weight:700;font-size:12.5px;color:var(--mut)}
.aw-choice input:checked+span{border-color:var(--blue);background:rgba(56,189,248,.14);color:var(--blue)}
.aw-choice input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.aw-note{width:100%;min-height:58px;background:var(--bg);border:1px solid var(--border2);color:var(--text);border-radius:10px;padding:8px 10px;font:inherit;font-size:12.5px;margin:6px 0;resize:vertical;box-sizing:border-box}
.aw-full{width:100%;margin-top:6px}
.aw-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.aw-feedback{border:1px solid var(--border2);border-radius:12px;padding:12px;margin-top:12px;background:var(--card2)}
.aw-fb-IYI{border-color:rgba(16,185,129,.4)}
.aw-fb-YAKIN{border-color:rgba(245,158,11,.4)}
.aw-fb-GELISTIRILEBILIR{border-color:rgba(56,189,248,.4)}
.aw-fb-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.aw-chip{font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px}
.chip-IYI{background:rgba(16,185,129,.16);color:#34D399}
.chip-YAKIN{background:rgba(245,158,11,.16);color:#FBBF24}
.chip-GELISTIRILEBILIR{background:rgba(56,189,248,.16);color:#7DD3FC}
.aw-fb-title{font-weight:700;margin:4px 0}
.aw-feedback ul{margin:4px 0 8px;padding-left:18px}
.aw-feedback li{font-size:12.5px;color:#CBD5E1;margin:2px 0}
.aw-list-title{font-size:11.5px;font-weight:800;margin:10px 0 4px;color:var(--mut)}
.aw-lesson{margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(148,163,184,.08);font-size:12.5px;color:#CBD5E1}
.aw-task{border:1px solid var(--border2);border-radius:12px;padding:10px 12px;margin:8px 0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.aw-task-active{border-color:rgba(56,189,248,.45);background:rgba(56,189,248,.05)}
.aw-task-t{font-weight:800}
.aw-status{font-size:12.5px;font-weight:600;color:var(--mut);margin:6px 0}
.aw-guides{display:flex;flex-wrap:wrap;gap:6px}
.aw-guide{background:transparent;border:1px solid var(--border2);color:var(--text);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer}
.aw-guide:hover{border-color:var(--blue)}
.aw-q{margin:10px 0}
.aw-q-t{font-weight:700;margin-bottom:6px}
.aw-opt{display:flex;align-items:flex-start;gap:8px;padding:6px 4px;font-size:12.5px;cursor:pointer}
.aw-trade-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;font-size:11.5px;color:var(--mut);margin:4px 0}
.aw-trade-fields label{display:flex;flex-direction:column;gap:3px}
.aw-trade-fields input{width:100%;background:var(--bg);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:6px;font-size:12px;box-sizing:border-box}
.aw-qr{padding:6px 0;border-bottom:1px dashed var(--border2);font-size:12.5px}
.aw-edu p{font-size:13px;line-height:1.6;color:#CBD5E1;margin:0 0 10px}
.aw-current{background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.25);border-radius:10px;padding:9px 11px;font-size:12.5px;margin:6px 0 10px}

.learn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.learn-cell{background:var(--card2);border:1px solid var(--border2);border-radius:12px;padding:10px 12px;min-width:0}
.learn-k{font-size:11px;color:var(--mut);font-weight:600}
.learn-v{font-size:17px;font-weight:800;margin-top:3px}
.learn-v small{display:block;font-size:11px;font-weight:500;color:var(--mut2);line-height:1.35}

.setup-card{border:1px solid var(--border2);border-radius:14px;padding:12px 14px;margin-bottom:14px;background:var(--card2)}
.setup-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.setup-note{font-size:12px;color:var(--mut);line-height:1.5;margin-bottom:10px}

.entry-reasons{border-top:1px solid var(--border2);padding-top:10px;margin-top:4px}
.entry-reasons-k{font-size:12.5px;font-weight:700;margin-bottom:6px}
.entry-reasons-k span{font-weight:500;color:var(--mut2);font-size:11.5px}
.entry-reasons-chips{display:flex;flex-wrap:wrap;gap:6px}
.er-chip{cursor:pointer}
.er-chip input{position:absolute;opacity:0;pointer-events:none}
.er-chip span{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;color:var(--mut)}
.er-chip input:checked+span{border-color:var(--green);color:var(--green);background:rgba(16,185,129,.1)}
.er-chip input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.entry-note{width:100%;margin-top:8px;background:var(--bg);border:1px solid var(--border2);color:var(--text);border-radius:10px;padding:8px 10px;font:inherit;font-size:12.5px;resize:vertical;box-sizing:border-box}
.trade-reasons{font-size:10.5px;color:var(--mut);margin-top:2px}
.trade-actions{display:flex;gap:6px;flex-wrap:wrap}

@media (max-width:1100px){
  .aw-layout{grid-template-columns:minmax(0,1fr)}
  .aw-panel{position:static;max-height:none}
}
@media (max-width:640px){
  .cw-toolbar{gap:4px;padding:6px}
  /* on a phone the chart is the point of this view: drop app-wide chrome */
  body[data-view="analysis"] .ticker-tape,
  body[data-view="analysis"] #marketClosedBanner,
  body[data-view="analysis"] .dash-search-box,
  body[data-view="analysis"] .dash-notify-btn,
  body[data-view="analysis"] .dash-market-pill,
  body[data-view="analysis"] #subscriptionArea,
  body[data-view="analysis"] .aw-head .section-sub{display:none!important}
  .cw-tool-l{display:none}
  .cw-live{display:none}
  .cw-chart{height:360px}
  .cw-host-analysis .cw-chart{height:clamp(340px, 58dvh, 520px)}
  .cw-legend{right:56px;font-size:10.5px}
  .cw-legend-chips{display:none}
  .cw-menu{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:65dvh}
  .learn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aw-ticker-input{width:120px}
  .aw-trade-fields{grid-template-columns:1fr}
}
@media (pointer:coarse){
  .cw-tf,.cw-tool,.cw-btn,.aw-tab,.aw-guide,.er-chip span,.cw-q{min-height:44px;min-width:44px}
  .cw-tool,.cw-btn{justify-content:center}
  .aw-choice span{padding:12px 6px}
}


/* ==========================================================================
   Sprint 3 -- news, company profile, financials, macro/economy education
   ========================================================================== */
.news-card{border:1px solid var(--border2);border-radius:12px;padding:10px 12px;margin:8px 0;background:var(--card2)}
.news-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.news-cat{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px}
.news-headline{display:block;color:var(--text);font-weight:700;font-size:13px;line-height:1.4;text-decoration:none;margin-bottom:4px}
.news-headline:hover{color:var(--blue)}
.news-headline-nolink{cursor:default}
.news-summary{font-size:12px;color:var(--mut);line-height:1.5;margin-bottom:6px}
.news-why{font-size:12px;color:#CBD5E1;line-height:1.5;background:rgba(148,163,184,.08);border-radius:8px;padding:7px 9px}
.news-why b{color:var(--text)}
.filing-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed var(--border2);font-size:12.5px}
.filing-form{font-weight:800;min-width:34px;color:var(--blue)}
.filing-row a{color:var(--blue);text-decoration:none;margin-left:auto;white-space:nowrap}
.filing-row a:hover{text-decoration:underline}
.fin-table{overflow-x:auto}
.fin-row{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:8px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--border2);font-size:12.5px;min-width:340px}
.fin-row span{display:flex;align-items:center;gap:5px;color:var(--mut)}
.fin-row b{font-size:12.5px;text-align:right}
.fin-head{font-weight:800;color:var(--text);border-bottom:1px solid var(--border2)}
.fin-head span{color:var(--text)}
.fin-head b{color:var(--mut2);font-size:11px}
.fin-edu-item{margin-bottom:14px}
.fin-edu-item b{display:block;margin-bottom:3px;color:var(--text)}
.fin-edu-item p{font-size:12.5px;color:#CBD5E1;line-height:1.55;margin:0}

.macro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.macro-cell{background:var(--card2);border:1px solid var(--border2);border-radius:14px;padding:14px}
.macro-k{font-size:11.5px;color:var(--mut);font-weight:700;display:flex;align-items:center;gap:6px;justify-content:space-between}
.macro-v{font-size:22px;font-weight:800;margin-top:6px;font-family:'Geist Mono','JetBrains Mono',monospace}
.macro-chg{font-size:11.5px;font-weight:700;margin-top:2px}
.macro-meta{font-size:10.5px;color:var(--mut2);margin-top:6px}
.econ-edu-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:12px}
.econ-edu-card{background:var(--card2);border:1px solid var(--border2);border-radius:12px;padding:12px;text-align:left;cursor:pointer;color:var(--text);font:inherit}
.econ-edu-card:hover{border-color:var(--blue)}
.econ-edu-card b{display:block;font-size:12.5px;margin-bottom:4px}
.econ-edu-card span{font-size:11.5px;color:var(--mut)}

.news-view-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.news-ticker-chip{background:transparent;border:1px solid var(--border);color:var(--mut);border-radius:999px;padding:6px 13px;font-size:12px;font-weight:700;cursor:pointer}
.news-ticker-chip.active{background:rgba(56,189,248,.14);border-color:rgba(56,189,248,.5);color:var(--blue)}
.news-view-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.news-view-grid .news-card{margin:0}
.news-view-ticker{font-weight:800;color:var(--blue);margin-right:6px}

@media (pointer:coarse){
  .news-ticker-chip,.econ-edu-card{min-height:44px}
}

/* ===========================================================================
 * Dashboard v3 -- "command center" (Genel) + the application shell it sits
 * in. Replaces the previous card-grid redesign. Composition over containers:
 * the sidebar sits on the page ground, the workspace is ONE inset surface,
 * and sections inside it are separated by hairlines and whitespace -- the
 * only raised element on Genel is the featured setup. Palette tokens are the
 * existing #app.dash-shell ones; the few additions below are hairline /
 * surface alphas derived from them, not a second color system.
 * ========================================================================= */

#app.dash-shell{
  --cc-surface:#0C0F10;
  --cc-line:rgba(255,255,255,.065);
  --cc-line-2:rgba(255,255,255,.11);
  --cc-hover:rgba(255,255,255,.028);
  --cc-ink:#0A0C0D;
  --font-sans:'Geist','Manrope',system-ui,sans-serif;
  --font-mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  font-family:var(--font-sans);
}
.dash-shell .mono{font-family:var(--font-mono)}

/* ---- shell: sidebar ---- */
.dash-shell .sidebar{width:232px;flex-basis:232px;background:var(--bg);border-right:none}
.dash-shell .sidebar-brand{padding:18px 16px 14px 20px;gap:10px}
.dash-shell .brand-mark{width:24px;height:24px;border-radius:7px;background:var(--text);border:none;color:var(--cc-ink);font-size:10px;font-weight:700;letter-spacing:.02em}
.dash-shell .sidebar-brand .brand-title{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.dash-shell .sidebar-brand .accent{color:var(--mut);font-weight:500}
.dash-shell .sidebar-nav{padding:6px 10px;gap:1px}
.dash-shell .nav-group-label{font-size:11px;font-weight:500;color:var(--mut2);text-transform:none;letter-spacing:0;padding:18px 10px 6px}
.dash-shell .nav-item{position:relative;gap:10px;padding:7px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--mut);
  transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease}
.dash-shell .nav-item svg{width:16px;height:16px;opacity:.7;transition:opacity var(--dur-fast) ease}
.dash-shell .nav-item:hover{background:var(--cc-hover);color:var(--text)}
.dash-shell .nav-item.active{background:rgba(255,255,255,.055);color:var(--text);font-weight:500;box-shadow:none}
.dash-shell .nav-item:hover svg,.dash-shell .nav-item.active svg{opacity:1}
/* Active indicator: a 2px text-tone bar at the rail's edge that grows in --
   the one moving part of navigation state, never a colored glow. */
.dash-shell .nav-item::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:2px;border-radius:0 2px 2px 0;
  background:var(--text);transform:scaleY(0);transition:transform var(--dur-slow) var(--ease-out)}
.dash-shell .nav-item.active::before{transform:scaleY(1)}
.dash-shell .nav-badge{border:none;background:rgba(255,255,255,.06);color:var(--mut);font-family:var(--font-mono);font-size:10px;border-radius:5px;padding:1px 6px}
.dash-shell .nav-item.active .nav-badge{color:var(--text);background:rgba(255,255,255,.1);border:none}
.dash-shell .sidebar-footer{border-top:none;padding:10px 10px 12px}
.dash-shell .btn-scan-sidebar{margin-top:10px;background:var(--text);color:var(--cc-ink);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  transition:background-color var(--dur-fast) ease,transform var(--dur-fast) ease}
.dash-shell .btn-scan-sidebar:hover{background:#fff;filter:none}
.dash-shell .btn-scan-sidebar:active{transform:scale(.98)}
.dash-shell .sidebar-account-trigger{border:none;background:var(--cc-hover);border-radius:10px;transition:background-color var(--dur-fast) ease}
.dash-shell .sidebar-account-trigger:hover{background:rgba(255,255,255,.055)}

/* ---- shell: workspace = one inset surface (desktop) ---- */
.dash-shell .workspace{background:var(--cc-surface)}
@media (min-width:1000px){
  .dash-shell .workspace{margin:8px 8px 8px 0;border-radius:14px;box-shadow:inset 0 0 0 1px var(--cc-line)}
}

/* ---- shell: header ---- */
.dash-shell .dash-topbar{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--cc-line)}
.dash-shell .dash-topbar-inner{min-height:60px;padding:11px 20px 11px 28px;gap:10px;flex-wrap:nowrap}
.dash-shell .topbar-page-title{order:0;margin-right:auto;min-width:0}
.dash-shell .page-title{font-size:15px;font-weight:600;letter-spacing:-.01em}
.dash-shell .page-sub{font-size:12px;color:var(--mut);margin-top:1px}
.dash-shell .dash-head-stats{order:1;gap:18px;padding:0 10px 0 0;border:none;border-radius:0;background:none}
.dash-shell .dash-head-stats .stat-chip-label{font-size:10.5px;font-weight:400;color:var(--mut2);text-transform:none;letter-spacing:0}
.dash-shell .dash-head-stats .stat-chip-value{font-size:11.5px;font-weight:500;color:var(--mut);font-family:var(--font-mono);margin-top:1px}
.dash-shell .dash-market-pill{order:2;height:32px;padding:0 12px 0 10px;gap:8px;background:transparent;border:none;box-shadow:inset 0 0 0 1px var(--cc-line)}
.dash-shell .dash-market-pill .dot{width:6px;height:6px;animation:none}
.dash-shell .dash-market-pill span:last-child{font-size:12px;font-weight:500;color:var(--text)}
.dash-shell .dash-search-box{order:3;flex:0 1 250px;min-width:0;max-width:250px;height:32px;padding:0 3px 0 11px;gap:8px;border:none;border-radius:9px;
  background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--cc-line);transition:box-shadow var(--dur-base) ease,background-color var(--dur-base) ease}
.dash-shell .dash-search-box:focus-within{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--cc-line-2),0 0 0 3px rgba(255,255,255,.035)}
.dash-shell .dash-search-box .search-icon{font-size:14px;color:var(--mut2)}
.dash-shell .dash-search-box input{min-width:0;padding:0;font-size:12.5px;font-weight:400}
.dash-shell .dash-search-go{padding:5px 8px;border-radius:6px;color:var(--mut);font-size:11.5px;font-weight:500;transition:color var(--dur-fast) ease,background-color var(--dur-fast) ease}
.dash-shell .dash-search-go:hover{color:var(--text);background:rgba(255,255,255,.05)}
.dash-shell .dash-notify-btn{order:4;position:relative;display:grid;place-items:center;width:32px;height:32px;padding:0;border:none;border-radius:9px;
  background:transparent;box-shadow:inset 0 0 0 1px var(--cc-line);color:var(--mut);transition:color var(--dur-fast) ease,background-color var(--dur-fast) ease}
.dash-shell .dash-notify-btn:hover{color:var(--text);background:var(--cc-hover)}
.dash-shell .dash-notify-btn.is-on{color:var(--text)}
.dash-shell .dash-notify-btn.is-on::after{content:"";position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px var(--cc-surface)}
.notify-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dash-shell #subscriptionArea{order:5;display:flex;align-items:center;gap:8px}
.dash-shell #subscriptionArea:empty{display:none}
.dash-shell #subscriptionArea .sub-pill{height:32px;padding:0 11px;font-size:11.5px;font-weight:500}
.dash-shell .sub-upgrade-btn{min-height:0;height:32px;padding:0 12px;border-radius:9px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--cc-line-2);
  color:var(--text);font-family:inherit;font-size:11.5px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) ease,transform var(--dur-fast) ease}
.dash-shell .sub-upgrade-btn:hover{background:rgba(255,255,255,.09)}
.dash-shell .sub-upgrade-btn:active{transform:scale(.98)}
.dash-shell .dash-head-stats .stat-chip-label,.dash-shell #subscriptionArea .sub-pill{white-space:nowrap}
@media (max-width:1599px){ .dash-shell .dash-head-stats .stat-chip:nth-child(2){display:none} }
@media (max-width:1439px){ .dash-shell .dash-head-stats{display:none} }

/* ---- shell: ticker tape + market-closed line ---- */
.dash-shell .ticker-tape{height:34px;background:transparent;border-bottom:1px solid var(--cc-line);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%)}
.dash-shell .ticker-item{gap:8px;padding:0 18px;border-right:none;font-family:var(--font-mono);font-size:11px}
.dash-shell .ticker-sym{color:var(--text);font-weight:500}
.dash-shell .ticker-px{color:var(--mut)}
.dash-shell .workspace-body{padding:24px 32px 64px}
.dash-shell .market-closed-bar{gap:10px;margin-bottom:24px;padding:8px 14px;border:none;border-radius:10px;background:transparent;box-shadow:inset 0 0 0 1px var(--cc-line);font-size:12px;color:var(--mut)}
.dash-shell .market-closed-bar b{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--text)}
.dash-shell .mcb-dot{width:6px;height:6px;box-shadow:0 0 0 3px var(--red-dim)}
.dash-shell .mcb-stamp{font-family:var(--font-mono);font-size:11px;color:var(--mut)}

/* ===========================================================================
 * Genel composition
 * ========================================================================= */
#viewOverview{display:flex;flex-direction:column;gap:0;animation:ccViewEnter 20ms linear both}
/* The id selector's display:flex outranks the UA [hidden]{display:none};
   without this Genel kept rendering underneath every other view. */
#viewOverview[hidden]{display:none}

.cc-top{display:grid;grid-template-columns:minmax(0,1fr) 340px}
.cc-main{min-width:0;padding:0 36px 36px 0;container-type:inline-size}
.cc-rail{min-width:0;padding:0 0 36px 32px;border-left:1px solid var(--cc-line)}
.cc-rail-sec+.cc-rail-sec{margin-top:30px;padding-top:28px;border-top:1px solid var(--cc-line)}

/* ---- section heads ---- */
.cc-head{display:flex;align-items:flex-end;gap:14px;min-width:0;margin-bottom:18px}
.cc-head--sm{align-items:center;margin-bottom:16px}
.cc-head-text{min-width:0}
.cc-eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.4;color:var(--mut)}
.cc-eyebrow-dim{color:var(--mut2)}
.cc-head--sm .cc-eyebrow{font-size:13px;font-weight:500;color:var(--text)}
.cc-title{margin:3px 0 0;font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.cc-head-meta{min-width:0;margin-left:auto;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-head .cc-link{margin-left:auto}
.cc-head .cc-head-meta+.cc-link{margin-left:0}
.cc-link{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:4px 0;border:none;background:none;color:var(--mut);
  font-family:inherit;font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer;transition:color var(--dur-fast) ease}
.cc-link span{display:inline-block;transition:transform var(--dur-base) var(--ease-out)}
.cc-link:hover{color:var(--text)}
.cc-link:hover span{transform:translateX(3px)}
.cc-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:ccLive 2.4s ease-in-out infinite}
.cc-quiet{font-size:12.5px;color:var(--mut)}
.cc-dim{color:var(--mut2)}

/* ---- hero: typography carries it, no container ---- */
.cc-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;padding:4px 0 32px;border-bottom:1px solid var(--cc-line)}
.cc-hero-main{min-width:0}
.cc-hero-value{margin-top:12px;font-size:56px;line-height:1;font-weight:600;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-cents{margin-left:1px;font-size:.46em;font-weight:500;letter-spacing:-.01em;color:var(--mut)}
.cc-skel-hero{display:block;width:min(300px,90%);height:52px;border-radius:10px}
.cc-hero-change{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-height:26px;margin-top:14px;font-size:12.5px}
.cc-delta{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;font-weight:500;font-variant-numeric:tabular-nums}
.cc-delta i{font-style:normal;opacity:.8}
.cc-delta--up{color:var(--green);background:rgba(31,224,140,.09)}
.cc-delta--down{color:var(--red);background:rgba(255,107,111,.09)}
.cc-delta--flat{color:var(--mut);background:rgba(255,255,255,.05)}
.cc-delta-note{color:var(--mut)}
.cc-hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:28px 0 0;padding-top:22px;border-top:1px solid var(--cc-line)}
.cc-hero-stats>div{min-width:0}
.cc-hero-stats dt{font-size:12px;color:var(--mut)}
.cc-hero-stats dd{margin:6px 0 0;font-size:17px;font-weight:500;letter-spacing:-.015em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-hero-chart{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.cc-chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
.cc-chart-caption{min-width:0;font-family:var(--font-mono);font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-chart-body{position:relative;height:236px;margin-top:14px}
.cc-chart-body canvas{display:block}
.cc-chart-empty{position:absolute;top:50%;left:0;right:0;padding:0 12px;transform:translateY(-50%);text-align:center;font-size:12.5px;line-height:1.5;color:var(--mut)}
.cc-chart-empty-line{display:block;height:1px;margin-bottom:18px;background:repeating-linear-gradient(90deg,var(--cc-line-2) 0 6px,transparent 6px 12px)}
@container (max-width:700px){
  .cc-hero{grid-template-columns:minmax(0,1fr);gap:26px}
}

/* ---- segmented range control with a sliding thumb ---- */
.cc-seg{position:relative;display:inline-flex;flex:0 0 auto;padding:3px;border-radius:9px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--cc-line)}
.cc-seg-btn{position:relative;z-index:1;padding:6px 10px;border:none;border-radius:6px;background:none;color:var(--mut);
  font-family:inherit;font-size:11.5px;font-weight:500;line-height:1;cursor:pointer;transition:color var(--dur-base) ease}
.cc-seg-btn:hover,.cc-seg-btn.is-active{color:var(--text)}
.cc-seg:not(.is-ready) .cc-seg-btn.is-active{background:rgba(255,255,255,.09)}
.cc-seg-thumb{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:6px;background:rgba(255,255,255,.09);box-shadow:0 1px 2px rgba(0,0,0,.35);
  opacity:0;transform:translateX(var(--x,0));transition:transform 320ms var(--ease-out),width 320ms var(--ease-out)}
.cc-seg.is-ready .cc-seg-thumb{opacity:1}

/* ---- setup feed ---- */
.cc-feed{padding-top:30px}
.cc-feed-body{display:flex;flex-direction:column}
.cc-skel-primary{height:300px;border-radius:16px}
.cc-skel-row{height:54px;margin-top:10px;border-radius:10px}

/* featured setup: the one raised element on the page */
.cc-sp{position:relative;padding:22px 24px 20px;border-radius:16px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.034),rgba(255,255,255,.012) 70%);box-shadow:inset 0 0 0 1px var(--cc-line);
  transition:box-shadow var(--dur-base) ease}
.cc-sp:hover{box-shadow:inset 0 0 0 1px var(--cc-line-2)}
.cc-sp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.cc-sp-id{min-width:0}
.cc-sp-kicker{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--text);white-space:nowrap}
.cc-sp-kicker-dim{font-weight:400;color:var(--mut)}
.cc-tone{flex:0 0 auto;width:6px;height:6px;border-radius:50%}
.cc-sp-ticker{margin-top:10px;font-size:36px;line-height:1;font-weight:600;letter-spacing:-.035em}
.cc-sp-ticker .cc-star{font-size:13px;vertical-align:14px}
.cc-sp-price{flex:0 0 auto;text-align:right}
.cc-sp-px{font-size:24px;line-height:1.1;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cc-sp-pxnote{margin-top:6px;font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.cc-sp-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:22px;border-top:1px solid var(--cc-line)}
.cc-metric{display:flex;flex-direction:column;gap:7px;min-width:0;padding:14px 16px 0}
.cc-metric:first-child{padding-left:0}
.cc-metric+.cc-metric{border-left:1px solid var(--cc-line)}
.cc-metric>span{font-size:11.5px;color:var(--mut);white-space:nowrap}
.cc-metric>b{font-size:15px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-metric small{margin-left:1px;font-size:11px;font-weight:400;color:var(--mut2)}
.cc-meter{display:block;height:3px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.cc-meter i{display:block;height:100%;border-radius:inherit;background:var(--text)}

/* stop -> entry -> target rail */
.cc-rr{margin-top:24px}
.cc-rr-track{position:relative;height:4px;border-radius:99px;background:rgba(255,255,255,.06)}
.cc-rr-risk{position:absolute;top:0;bottom:0;left:0;border-radius:99px 0 0 99px;background:linear-gradient(90deg,rgba(255,107,111,.6),rgba(255,107,111,.18))}
.cc-rr-reward{position:absolute;top:0;bottom:0;border-radius:0 99px 99px 0;background:linear-gradient(90deg,rgba(31,224,140,.18),rgba(31,224,140,.7))}
.cc-rr-entry{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--text);box-shadow:0 0 0 3px #111415}
.cc-rr-labels{position:relative;height:36px;margin-top:10px}
.cc-rr-labels>div{position:absolute;top:0;display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.cc-rr-l-stop{left:0}
.cc-rr-l-entry{align-items:center;transform:translateX(-50%)}
.cc-rr-l-target{right:0;align-items:flex-end}
.cc-rr-labels span{font-size:11px;color:var(--mut)}
.cc-rr-labels b{font-family:var(--font-mono);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.cc-rr-labels--static{position:static;display:flex;justify-content:space-between;height:auto}
.cc-rr-labels--static>div{position:static}

.cc-sp-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--cc-line)}
.cc-sp-facts{display:flex;flex-wrap:wrap;gap:8px 24px;min-width:0}
.cc-sp-facts div{display:flex;flex-direction:column;gap:3px}
.cc-sp-facts span{font-size:11px;color:var(--mut)}
.cc-sp-facts b{font-family:var(--font-mono);font-size:12.5px;font-weight:500}
.cc-sp-actions{display:flex;flex:0 0 auto;gap:8px}

/* secondary setups: dense hairline list */
.cc-sr-list{margin-top:10px}
.cc-sr{position:relative;display:grid;grid-template-columns:8px minmax(96px,1.2fr) minmax(88px,1fr) minmax(104px,1fr) 64px minmax(64px,.8fr) 68px;
  align-items:center;column-gap:16px;margin:0 -12px 0 -14px;padding:12px 12px 12px 14px;border-radius:10px;cursor:pointer;transition:background-color var(--dur-fast) ease}
.cc-sr+.cc-sr::before{content:"";position:absolute;top:0;left:14px;right:12px;height:1px;background:var(--cc-line);transition:opacity var(--dur-fast) ease}
.cc-sr:hover{background:var(--cc-hover)}
.cc-sr:hover::before,.cc-sr:hover+.cc-sr::before{opacity:0}
.cc-sr-tone{width:6px;height:6px;border-radius:50%}
.cc-sr-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.cc-sr-id b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.cc-sr-id span{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-star{margin-left:5px;font-size:10px;color:var(--amber);vertical-align:2px}
.cc-sr-px{display:flex;flex-direction:column;gap:2px;min-width:0;font-variant-numeric:tabular-nums}
.cc-sr-px b{font-family:var(--font-mono);font-size:12.5px;font-weight:500}
.cc-sr-px span{font-size:11.5px;color:var(--mut)}
.cc-sr-px em{font-family:var(--font-mono);font-size:11.5px;font-style:normal}
.cc-sr-conf{display:flex;flex-direction:column;gap:5px;min-width:0}
.cc-sr-conf>span,.cc-sr-rr span{font-size:11px;color:var(--mut)}
.cc-sr-conf>div{display:flex;align-items:center;gap:8px}
.cc-sr-conf .cc-meter{flex:1;max-width:72px}
.cc-sr-conf b,.cc-sr-rr b{font-family:var(--font-mono);font-size:12px;font-weight:500}
.cc-sr-rr{display:flex;flex-direction:column;gap:2px}
.cc-sr-age{font-family:var(--font-mono);font-size:11.5px;text-align:right;white-space:nowrap}
.cc-sr-act{display:flex;justify-content:flex-end;gap:6px;opacity:.6;transition:opacity var(--dur-base) ease}
.cc-sr:hover .cc-sr-act,.cc-sr:focus-within .cc-sr-act{opacity:1}
/* In the dense list the "open trade" icon stays quiet until its row is
   hovered, then takes the primary near-white fill -- one loud button per
   row at a time, not five white squares down the page. */
.cc-sr .cc-icon-btn--primary{background:rgba(255,255,255,.07);color:var(--text);box-shadow:inset 0 0 0 1px var(--cc-line)}
.cc-sr:hover .cc-icon-btn--primary,.cc-sr:focus-within .cc-icon-btn--primary{background:var(--text);color:var(--cc-ink);box-shadow:none}
@media (hover:none){ .cc-sr-act{opacity:1} }

/* ---- buttons ---- */
.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border:none;border-radius:9px;
  font-family:inherit;font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease,transform var(--dur-fast) ease}
.cc-btn:active,.cc-icon-btn:active,.cc-seg-btn:active{transform:scale(.97)}
.cc-btn--primary{background:var(--text);color:var(--cc-ink)}
.cc-btn--primary:hover{background:#fff}
.cc-btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--cc-line-2)}
.cc-btn--ghost:hover{background:rgba(255,255,255,.045)}
.cc-icon-btn{display:grid;place-items:center;width:30px;height:30px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--mut);
  box-shadow:inset 0 0 0 1px var(--cc-line);cursor:pointer;transition:color var(--dur-fast) ease,background-color var(--dur-fast) ease,transform var(--dur-fast) ease}
.cc-icon-btn:hover{color:var(--text);background:rgba(255,255,255,.05)}
.cc-icon-btn--primary{background:var(--text);color:var(--cc-ink);box-shadow:none}
.cc-icon-btn--primary:hover{background:#fff;color:var(--cc-ink)}
#viewOverview :is(.cc-btn,.cc-icon-btn,.cc-seg-btn,.cc-link,.cc-mover,.cc-note):focus-visible,
.dash-shell .dash-notify-btn:focus-visible{outline:2px solid rgba(230,235,232,.55);outline-offset:2px}

.cc-empty{padding:26px 24px;border-radius:14px;background:rgba(255,255,255,.014);box-shadow:inset 0 0 0 1px var(--cc-line)}
.cc-empty-title{font-size:14px;font-weight:500}
.cc-empty-sub{max-width:56ch;margin-top:6px;font-size:12.5px;line-height:1.55;color:var(--mut)}
.cc-empty .cc-btn{margin-top:16px}
.cc-empty--row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.cc-empty--row .cc-btn{margin-top:0}

/* ---- rail: market monitor ---- */
.cc-mon-status{display:flex;align-items:center;gap:10px;font-size:13px}
.cc-mon-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%}
.cc-mon-status b{font-weight:500}
.cc-mon-status-meta{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--mut);white-space:nowrap}
.cc-mon-block{margin-top:24px}
.cc-mon-label{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:11.5px;color:var(--mut)}
.cc-mon-label b{font-weight:500;color:var(--text)}
.cc-breadth{display:flex;gap:2px;height:6px}
.cc-breadth i{display:block;height:100%;border-radius:2px}
.cc-breadth-legend{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-size:11.5px;color:var(--mut)}
.cc-breadth-legend i{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;vertical-align:1px}
.cc-breadth-legend b{margin-left:3px;font-family:var(--font-mono);font-weight:500;color:var(--text)}
.cc-dist{display:flex;flex-direction:column;gap:9px}
.cc-dist-row{display:grid;grid-template-columns:84px minmax(0,1fr) 26px;align-items:center;gap:12px;font-size:12px;color:var(--mut)}
.cc-dist-row .cc-meter i{opacity:.8}
.cc-dist-row b{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text);text-align:right}
.cc-movers{display:flex;flex-direction:column}
.cc-mover{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;align-items:center;gap:12px;width:calc(100% + 20px);margin:0 -10px;padding:8px 10px;
  border:none;border-radius:8px;background:none;color:inherit;font-family:inherit;text-align:left;cursor:pointer;transition:background-color var(--dur-fast) ease}
.cc-mover:hover{background:rgba(255,255,255,.035)}
.cc-mover b{font-size:13px;font-weight:600}
.cc-mover-px{font-family:var(--font-mono);font-size:12px;color:var(--mut)}
.cc-mover-ch{font-family:var(--font-mono);font-size:12px;text-align:right}

/* ---- rail: learning (renderLearningSummary() markup in chart.js) ---- */
.cc-learn .prog-group{display:flex;flex-direction:column;gap:14px}
.cc-learn .prog-row-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px}
.cc-learn .prog-row-head span{font-weight:500;color:var(--text)}
.cc-learn .prog-row-head b{font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--mut);white-space:nowrap}
.cc-learn .prog-bar{height:3px;margin-top:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.cc-learn .prog-fill{height:100%;border-radius:inherit;background:var(--text);transform-origin:left center;transition:transform 900ms var(--ease-out)}
/* Grows in whenever the summary is (re)inserted -- i.e. on each visit to
   Genel -- without JS and without replaying on unrelated refreshes. */
@starting-style{ .cc-learn .prog-fill{transform:scaleX(0)} }
.cc-learn .ov-chip-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--cc-line)}
.cc-learn .ov-chip{display:flex;flex-direction:column;gap:3px;min-width:0}
.cc-learn .ov-chip b{font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums}
.cc-learn .ov-chip span{font-size:11px;line-height:1.3;color:var(--mut)}
.cc-learn .ov-insight{display:flex;flex-direction:column;gap:4px;margin-top:18px;padding-top:14px;border-top:1px solid var(--cc-line)}
.cc-learn .ov-insight b{font-size:11.5px;font-weight:400;color:var(--mut)}
.cc-learn .ov-insight span{font-size:13px;line-height:1.45;color:var(--text)}
.cc-learn .empty-row{padding:6px 0;text-align:left}

/* ---- ledger: three columns, one surface ---- */
.cc-ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--cc-line)}
.cc-ledger-col{min-width:0;padding:30px 32px 34px}
.cc-ledger-col:first-child{padding-left:0}
.cc-ledger-col:last-child{padding-right:0}
.cc-ledger-col+.cc-ledger-col{border-left:1px solid var(--cc-line)}
.cc-ledger .empty-row{padding:6px 0;text-align:left}
.cc-big{display:flex;align-items:baseline;gap:10px}
.cc-big b{font-size:30px;font-weight:500;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cc-big span{font-size:12.5px;color:var(--mut)}
.cc-alloc{height:6px;margin:16px 0 14px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.cc-alloc i{display:block;height:100%;border-radius:inherit;background:var(--text)}
.cc-kv{margin:0}
.cc-kv>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--cc-line);font-size:12.5px}
.cc-kv>div:first-child{border-top:none}
.cc-kv dt{display:flex;align-items:center;gap:8px;color:var(--mut)}
.cc-kv dd{margin:0;font-family:var(--font-mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.cc-sw{width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,.16)}
.cc-sw--inv{background:var(--text)}
/* performanceKpiHtml() markup (#performanceGrid) in the ledger register */
.cc-ledger .kpi-primary-value{font-size:30px;font-weight:500;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cc-ledger .kpi-primary-label{margin-top:8px;font-size:12.5px;color:var(--mut)}
.cc-ledger .kpi-sec-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px;border-top:1px solid var(--cc-line)}
.cc-ledger .kpi-sec-tile{display:flex;align-items:flex-start;gap:8px;padding-top:12px}
.cc-ledger .kpi-sec-dot{flex:0 0 auto;width:6px;height:6px;margin-top:6px;border-radius:50%}
.cc-ledger .kpi-sec-v{font-size:15px;font-weight:500}
.cc-ledger .kpi-sec-k{margin-top:2px;font-size:11px;color:var(--mut)}
.cc-ledger .kpi-tert-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px;padding-top:12px;border-top:1px solid var(--cc-line)}
.cc-ledger .kpi-tert-row>div{display:flex;flex-direction:column;gap:4px}
.cc-ledger .kpi-tert-row span{font-size:11px;color:var(--mut)}
.cc-ledger .kpi-tert-row b{font-size:13px;font-weight:500}
/* recent activity */
.cc-act{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--cc-line)}
.cc-act:first-child{padding-top:2px;border-top:none}
.cc-act-side{font-size:11.5px;font-weight:500}
.cc-act-side.is-buy{color:var(--green)}
.cc-act-side.is-sell{color:var(--red)}
.cc-act-main{min-width:0}
.cc-act-main b{display:block;font-size:13px;font-weight:600}
.cc-act-main span{display:block;font-family:var(--font-mono);font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-act-val{text-align:right}
.cc-act-val b{display:block;font-family:var(--font-mono);font-size:12px;font-weight:500}
.cc-act-val span{display:block;margin-top:1px;font-size:11px;color:var(--mut2);white-space:nowrap}
.cc-note{padding:3px 7px;border:none;border-radius:6px;background:transparent;box-shadow:inset 0 0 0 1px var(--cc-line);color:var(--mut);
  font-family:inherit;font-size:11px;cursor:pointer;opacity:.75;transition:opacity var(--dur-fast) ease,color var(--dur-fast) ease}
.cc-act:hover .cc-note,.cc-note:hover{opacity:1;color:var(--text)}

/* ---- holdings ---- */
.cc-holdings{padding-top:30px;border-top:1px solid var(--cc-line)}
.cc-tr{position:relative;display:grid;grid-template-columns:minmax(80px,1.3fr) repeat(4,minmax(72px,1fr)) minmax(110px,1fr);align-items:center;column-gap:16px;
  margin:0 -12px;padding:12px;border-radius:8px;font-family:var(--font-mono);font-size:12.5px;font-variant-numeric:tabular-nums;transition:background-color var(--dur-fast) ease}
.cc-tr>span{text-align:right;white-space:nowrap}
.cc-tr>span:first-child{text-align:left}
.cc-tr+.cc-tr::before{content:"";position:absolute;top:0;left:12px;right:12px;height:1px;background:var(--cc-line)}
.cc-tr:not(.cc-tr--head):hover{background:var(--cc-hover)}
.cc-tr--head{padding-top:0;padding-bottom:10px;font-family:inherit;font-size:11.5px;color:var(--mut)}
.cc-tr-sym b{font-family:var(--font-sans);font-size:13.5px;font-weight:600}
.cc-tr-pnl{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.cc-tr-pnl b{font-weight:500}
.cc-tr-pnl small{font-size:11px;opacity:.75}

/* ===========================================================================
 * Genel motion. Scoped to classes app.js toggles (ccPlay):
 *   .cc-entering  -- the view just became visible: bands rise in order,
 *                    then their contents stagger, meters grow, chart draws
 *   .cc-items-in  -- real data first replaced the skeletons
 * Neither is present during the 12s refresh re-renders, so nothing replays.
 * ========================================================================= */
@keyframes ccViewEnter{from{opacity:.999}to{opacity:1}}
@keyframes ccBandIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ccItemIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ccGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ccReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ccSwap{from{opacity:.2}to{opacity:1}}
@keyframes ccLive{0%,100%{box-shadow:0 0 0 0 rgba(31,224,140,.35)}50%{box-shadow:0 0 0 5px rgba(31,224,140,0)}}

#viewOverview .cc-hero{--cc-d:0ms}
#viewOverview .cc-feed{--cc-d:90ms}
#viewOverview .cc-rail{--cc-d:160ms}
#viewOverview .cc-ledger{--cc-d:240ms}
#viewOverview .cc-holdings{--cc-d:300ms}
#viewOverview.cc-entering .cc-band{animation:ccBandIn 620ms var(--ease-out) both;animation-delay:var(--cc-d,0ms)}
#viewOverview.cc-entering .cc-anim,
#viewOverview.cc-items-in .cc-anim{animation:ccItemIn 520ms var(--ease-out) both;animation-delay:calc(var(--cc-d,0ms) + 120ms + var(--i,0) * 45ms)}
#viewOverview.cc-entering :is(.cc-meter i,.cc-breadth i,.cc-alloc i,.cc-rr-risk,.cc-rr-reward),
#viewOverview.cc-items-in :is(.cc-meter i,.cc-breadth i,.cc-alloc i,.cc-rr-risk,.cc-rr-reward){
  transform-origin:left center;animation:ccGrow 900ms var(--ease-out) both;animation-delay:calc(var(--cc-d,0ms) + 260ms)}
#viewOverview.cc-entering .cc-chart-body canvas,
#viewOverview.cc-items-in .cc-chart-body canvas{animation:ccReveal 1100ms var(--ease-out) both;animation-delay:140ms}
#viewOverview .cc-chart-body canvas.cc-swap{animation:ccSwap 420ms var(--ease-out) both}

@media (prefers-reduced-motion:reduce){
  .view:not([hidden]){animation:none}
  #viewOverview .cc-band,#viewOverview .cc-anim,#viewOverview .cc-chart-body canvas,
  #viewOverview :is(.cc-meter i,.cc-breadth i,.cc-alloc i,.cc-rr-risk,.cc-rr-reward){animation:none!important}
  .cc-learn .prog-fill,.dash-shell .nav-item::before,.cc-seg-thumb{transition:none}
  .cc-live-dot{animation:none}
}

/* ===========================================================================
 * Responsive
 * ========================================================================= */
@media (max-width:1279px){
  .cc-top{grid-template-columns:minmax(0,1fr)}
  .cc-main{padding-right:0}
  .cc-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:30px 0 34px;border-left:none;border-top:1px solid var(--cc-line)}
  .cc-rail-sec:first-child{padding-right:32px}
  .cc-rail-sec+.cc-rail-sec{margin-top:0;padding:0 0 0 32px;border-top:none;border-left:1px solid var(--cc-line)}
}
@media (max-width:1099px){
  .cc-ledger{grid-template-columns:minmax(0,1fr)}
  .cc-ledger-col,.cc-ledger-col:first-child,.cc-ledger-col:last-child{padding:28px 0}
  .cc-ledger-col+.cc-ledger-col{border-left:none;border-top:1px solid var(--cc-line)}
}
/* Drawer: re-declared here because the shell rules above are more specific
   than the original @media(max-width:999px) .sidebar rules. */
@media (max-width:999px){
  .dash-shell .sidebar{width:82vw;max-width:290px;flex-basis:auto;background:var(--card2);transition:transform 320ms var(--ease-out)}
  .dash-shell .burger-btn{width:32px;height:32px;border:none;border-radius:9px;background:transparent;box-shadow:inset 0 0 0 1px var(--cc-line)}
  .dash-shell .dash-topbar-inner{flex-wrap:wrap;row-gap:10px;padding:10px 16px}
  .dash-shell .dash-search-box{order:6;flex:1 1 100%;max-width:none;height:36px}
  .dash-shell .workspace-body{padding:22px 20px 56px}
}
@media (max-width:760px){
  .cc-rail{grid-template-columns:minmax(0,1fr)}
  .cc-rail-sec:first-child{padding-right:0}
  .cc-rail-sec+.cc-rail-sec{margin-top:28px;padding:26px 0 0;border-left:none;border-top:1px solid var(--cc-line)}
}
@media (max-width:640px){
  .dash-shell .dash-topbar-inner{gap:8px;padding:10px 14px}
  .dash-shell .page-sub{display:none}
  .dash-shell #subscriptionArea .sub-pill{display:none}
  .dash-shell .sub-upgrade-btn{padding:0 10px;font-size:11px}
  .dash-shell .workspace-body{padding:18px 16px 48px}
  .dash-shell .market-closed-bar{row-gap:3px;margin-bottom:20px;padding:9px 12px;font-size:11.5px}
  .dash-shell .mcb-sep{display:none}
  .dash-shell .mcb-note{flex:1 1 auto}

  .cc-main{padding-bottom:30px}
  .cc-hero{padding:0 0 26px}
  .cc-hero-value{font-size:44px}
  .cc-hero-stats{gap:16px 20px;margin-top:22px;padding-top:18px}
  .cc-hero-stats dd{font-size:15.5px}
  .cc-chart-body{height:168px}
  .cc-feed{padding-top:26px}
  .cc-title{font-size:17px}
  .cc-feed .cc-head{flex-wrap:wrap;row-gap:6px}
  .cc-feed .cc-head-meta{order:3;flex-basis:100%;margin-left:0;white-space:normal}
  .cc-feed .cc-head .cc-link{margin-left:auto}

  .cc-sp{padding:18px 16px 16px;border-radius:14px}
  .cc-sp-ticker{font-size:30px}
  .cc-sp-px{font-size:19px}
  .cc-sp-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-metric:nth-child(2){padding-right:0}
  .cc-metric:nth-child(3){padding-left:0;border-left:none}
  .cc-metric:nth-child(n+3){margin-top:14px;border-top:1px solid var(--cc-line)}
  .cc-sp-foot{flex-direction:column;align-items:stretch}
  .cc-sp-actions{display:grid;grid-template-columns:1fr 1fr}
  .cc-sp-actions .cc-btn{height:42px}
  .cc-sp-actions .cc-btn:only-child{grid-column:1 / -1}

  .cc-sr{grid-template-columns:8px minmax(0,1fr) auto auto;grid-template-areas:"tone id age px" ". conf rr act";row-gap:10px;column-gap:12px;margin:0 -10px;padding:14px 10px}
  .cc-sr+.cc-sr::before{left:10px;right:10px}
  .cc-sr-tone{grid-area:tone}
  .cc-sr-id{grid-area:id}
  .cc-sr-age{grid-area:age}
  .cc-sr-px{grid-area:px;align-items:flex-end}
  .cc-sr-conf{grid-area:conf;flex-direction:row;align-items:center;gap:8px}
  .cc-sr-rr{grid-area:rr;flex-direction:row;align-items:center;gap:6px}
  .cc-sr-act{grid-area:act;opacity:1}
  .cc-icon-btn{width:34px;height:34px}

  .cc-rail{padding-top:26px}
  .cc-ledger-col,.cc-ledger-col:first-child,.cc-ledger-col:last-child{padding:26px 0}
  .cc-holdings{padding-top:26px}
  .cc-tr--head{display:none}
  .cc-tr{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"sym sym pnl pnl" "a b c d";row-gap:10px;margin:0 -10px;padding:14px 10px}
  .cc-tr+.cc-tr::before{left:10px;right:10px}
  .cc-tr>span:nth-child(1){grid-area:sym}
  .cc-tr>span:nth-child(2){grid-area:a}
  .cc-tr>span:nth-child(3){grid-area:b}
  .cc-tr>span:nth-child(4){grid-area:c}
  .cc-tr>span:nth-child(5){grid-area:d}
  .cc-tr>span:nth-child(6){grid-area:pnl}
  .cc-tr>span[data-label]{display:flex;flex-direction:column;gap:3px;font-size:11.5px;text-align:left}
  .cc-tr>span[data-label]::before{content:attr(data-label);font-family:var(--font-sans);font-size:10.5px;color:var(--mut)}
  .cc-empty--row{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ===========================================================================
 * Graph & Analysis v4 -- trading terminal (web/chart.js "tv" section).
 * The chart is the product: the terminal takes the viewport height, the
 * candle stage flexes to fill it, tools sit in a thin rail, the analysis
 * panel is flush (no card), research lives under the fold. Same dash-shell
 * tokens as Dashboard v3; the terminal ground is one step darker than the
 * workspace surface so the instrument reads as its own panel.
 * ========================================================================= */
body[data-view="analysis"] .dash-shell .workspace-body{padding:16px 20px 48px}
body[data-view="analysis"] .dash-shell .market-closed-bar{margin-bottom:12px}

.tv{--tv-bg:#0A0C0D;position:relative;display:flex;flex-direction:column;height:var(--tv-h,calc(100dvh - 190px));min-height:0;
  background:var(--tv-bg);border-radius:12px;box-shadow:inset 0 0 0 1px var(--cc-line);overflow:hidden}

/* ---- head: symbol, quote, actions ---- */
.tv-head{display:flex;align-items:center;gap:14px;flex:0 0 auto;height:52px;padding:0 10px 0 12px;border-bottom:1px solid var(--cc-line)}
.tv-sym{display:flex;align-items:center;gap:6px;flex:0 0 auto;width:176px;height:34px;padding:0 3px 0 10px;border-radius:8px;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--cc-line);transition:box-shadow var(--dur-base) ease}
.tv-sym:focus-within{box-shadow:inset 0 0 0 1px var(--cc-line-2),0 0 0 3px rgba(255,255,255,.035)}
.tv-sym-ico{flex:none;color:var(--mut2)}
.tv .tv-sym-input{flex:1;min-width:0;width:auto;padding:0;border:none;border-radius:0;background:transparent;color:var(--text);
  font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;outline:none}
.tv-sym-input::placeholder{color:var(--mut2);font-weight:400;letter-spacing:0;text-transform:none}
.tv-sym-go{flex:none;height:26px;padding:0 8px;border:none;border-radius:6px;background:transparent;color:var(--mut);font-family:inherit;font-size:11.5px;font-weight:500;cursor:pointer}
.tv-sym-go:hover{color:var(--text);background:rgba(255,255,255,.05)}
.tv-quote{display:flex;align-items:baseline;gap:10px;min-width:0;overflow:hidden;white-space:nowrap}
.tv-q-price{font-size:19px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tv-q-chg{padding:2px 7px;border-radius:5px;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
.tv-q-chg.is-up{color:var(--green);background:rgba(31,224,140,.09)}
.tv-q-chg.is-down{color:var(--red);background:rgba(255,107,111,.09)}
.tv-q-meta{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:var(--mut)}
.tv-q-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--mut2)}
.tv-q-dot.is-live{background:var(--green);box-shadow:0 0 0 3px rgba(31,224,140,.16)}
.tv-q-dot.is-hist{background:var(--amber)}
.tv-q-dot.is-replay{background:var(--blue)}
.tv-head-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto}
.tv-hbtn,.tv-icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;border:none;border-radius:8px;background:transparent;
  color:var(--text);font-family:inherit;font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer;box-shadow:inset 0 0 0 1px var(--cc-line);
  transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease,transform var(--dur-fast) ease}
.tv-hbtn{padding:0 12px}
.tv-icon-btn{width:32px;padding:0;color:var(--mut)}
.tv-hbtn:hover,.tv-icon-btn:hover{background:var(--cc-hover);color:var(--text)}
.tv-hbtn:active,.tv-icon-btn:active,.tv-tbtn:active,.tv-tool:active{transform:scale(.97)}
.tv-hbtn[aria-pressed="true"],.tv-icon-btn[aria-pressed="true"]{background:rgba(255,255,255,.07);color:var(--text)}
.tv-hbtn--primary{background:var(--text);color:var(--cc-ink);box-shadow:none}
.tv-hbtn--primary:hover{background:#fff;color:var(--cc-ink)}
.tv-edu-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(242,180,65,.45);color:#F4CD7E}
.tv-focus-exit,.tv-more{display:none}
.tv-ico-collapse{display:none}
body.tv-focus .tv-ico-expand{display:none}
body.tv-focus .tv-ico-collapse{display:block}

/* ---- body: chart column + flush side panel ---- */
.tv-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px}
.tv.tv-panel-hidden .tv-body{grid-template-columns:minmax(0,1fr)}
.tv.tv-panel-hidden .tv-side{display:none}
.tv-chart-col{display:flex;min-width:0;min-height:0}
#awChartHost.cw-host-analysis{flex:1;display:flex;min-width:0;min-height:0}
.cw-host-analysis .cw-root{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:transparent;border:none;border-radius:0}

/* toolbar */
.tv-toolbar{display:flex;align-items:center;gap:6px;flex:0 0 auto;height:42px;padding:0 10px;border-bottom:1px solid var(--cc-line)}
.tv-tfs{position:relative;display:inline-flex;flex:none;padding:2px;border-radius:8px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--cc-line)}
.tv .tv-tf{position:relative;z-index:1;min-width:40px;height:28px;padding:0 9px;border:none;border-radius:6px;background:transparent;color:var(--mut);
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;cursor:pointer;transition:color var(--dur-base) ease}
.tv .tv-tf:hover,.tv .tv-tf.active{color:var(--text)}
.tv .tv-tfs:not(.is-ready) .tv-tf.active{background:rgba(255,255,255,.08)}
.tv .tv-tfs.is-ready .tv-tf.active{background:transparent}
.tv .tv-tf:disabled{opacity:.4;cursor:not-allowed}
.tv-tf-thumb{position:absolute;top:2px;bottom:2px;left:0;width:0;border-radius:6px;background:rgba(255,255,255,.085);box-shadow:0 1px 2px rgba(0,0,0,.4);opacity:0;
  transition:transform 280ms var(--ease-out),width 280ms var(--ease-out)}
.tv-tfs.is-ready .tv-tf-thumb{opacity:1}
.tv-ranges{display:inline-flex;gap:1px;flex:none}
.tv-range{height:26px;padding:0 8px;border:none;border-radius:6px;background:transparent;color:var(--mut);font-family:var(--font-mono);font-size:11px;cursor:pointer}
.tv-range:hover,.tv-range.active{color:var(--text);background:rgba(255,255,255,.06)}
.tv-sep{flex:none;width:1px;height:18px;margin:0 4px;background:var(--cc-line-2)}
.tv-tbtn{display:inline-flex;align-items:center;gap:7px;flex:none;height:30px;padding:0 10px;border:none;border-radius:7px;background:transparent;color:var(--mut);
  font-family:inherit;font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease,transform var(--dur-fast) ease}
.tv-tbtn:hover{background:var(--cc-hover);color:var(--text)}
.tv-tbtn.active{background:rgba(255,255,255,.075);color:var(--text)}
.tv-tbtn:disabled{opacity:.4;cursor:not-allowed}
.tv-tbtn--icon{width:30px;padding:0;justify-content:center}
.tv-fx{font-family:Georgia,'Times New Roman',serif;font-size:14px;font-style:italic;font-weight:600;line-height:1}
.tv-count{padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.08);color:var(--text);font-family:var(--font-mono);font-size:10.5px;font-weight:500}
.tv-count:empty{display:none}
.tv .tv-live{font-size:11.5px;font-weight:500}

/* rail + stage */
.tv-work{flex:1;display:flex;min-width:0;min-height:0}
.tv-rail{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 44px;padding:8px 0;border-right:1px solid var(--cc-line)}
.tv-tool{position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mut);cursor:pointer;
  transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease,transform var(--dur-fast) ease}
.tv-tool:hover{background:var(--cc-hover);color:var(--text)}
.tv-tool.active{background:rgba(255,255,255,.09);color:var(--text);box-shadow:inset 0 0 0 1px var(--cc-line-2)}
.tv-tool:disabled{opacity:.32;cursor:not-allowed}
.tv-rail-sep{flex:none;width:18px;height:1px;margin:6px 0;background:var(--cc-line-2)}
@media (hover:hover){
  .tv-tool[data-tip]:hover::after,.tv-tool[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);z-index:30;
    padding:5px 8px;border-radius:6px;background:#1B2022;color:var(--text);font-size:11.5px;font-weight:500;white-space:nowrap;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.45)}
}
.tv-stage{position:relative;flex:1;min-width:0;min-height:0}
.cw-host-analysis .cw-chart{height:100%}
.tv-stage .cw-legend{top:8px;left:12px;right:84px;font-size:11.5px}
.tv .cw-legend-row{gap:3px 12px}
.tv .cw-legend-t{font-weight:600}
.tv .cw-legend-tf{font-family:var(--font-mono);font-weight:500;background:rgba(255,255,255,.07)}
.tv .cw-chip{background:rgba(10,12,13,.72);font-family:var(--font-mono);font-size:10.5px}
.tv .cw-chip:hover{border-color:var(--cc-line-2)}
.tv .cw-hint{bottom:40px;padding:6px 12px;border:none;border-radius:8px;background:rgba(20,24,25,.94);box-shadow:inset 0 0 0 1px var(--cc-line-2);font-size:12px;font-weight:500}
.dash-shell .cw-empty{background:rgba(10,12,13,.74)}
.cw-empty-box{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:340px;font-size:12.5px;color:var(--mut);line-height:1.5}
.cw-spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:var(--text);animation:tvSpin .8s linear infinite}
.dash-shell .cw-empty-retry{border:none;box-shadow:inset 0 0 0 1px var(--cc-line-2);color:var(--text);font-weight:500}
.tv .cw-foot{flex:0 0 auto;padding:5px 12px;border-top:1px solid var(--cc-line);font-family:var(--font-mono);font-size:10.5px;color:var(--mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* education tags pinned to indicator lines */
.tv-edu-layer{position:absolute;inset:0;z-index:6;pointer-events:none}
.tv-edu-tag{position:absolute;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px 0 7px;border:none;border-radius:6px;transform:translateY(-50%);
  background:rgba(16,19,20,.94);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--text);font-family:inherit;font-size:11px;font-weight:500;
  white-space:nowrap;pointer-events:auto;cursor:pointer;animation:tvTagIn 260ms var(--ease-out) both}
.tv-edu-tag i{width:6px;height:6px;border-radius:50%;background:var(--c,var(--text))}
.tv-edu-tag span{color:#F4CD7E}
.tv-edu-tag:hover{box-shadow:inset 0 0 0 1px rgba(242,180,65,.5)}
.tv-edu-tag--pane{transform:none}

/* indicator menu (shared by both chart modes) */
.dash-shell .cw-menu{width:300px;padding:6px;border:none;border-radius:12px;background:#111415;box-shadow:inset 0 0 0 1px var(--cc-line-2),0 20px 48px rgba(0,0,0,.55)}
.dash-shell .cw-menu:not([hidden]){animation:tvPop 160ms var(--ease-out) both}
.dash-shell .cw-menu-title{display:flex;justify-content:space-between;align-items:baseline;margin:8px 8px 4px;font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--mut2)}
.dash-shell .cw-menu-row{gap:8px;padding:3px 6px;border-radius:7px;font-size:12.5px}
.dash-shell .cw-menu-row:hover{background:rgba(255,255,255,.035)}
.tv-switch{position:relative;display:flex;align-items:center;gap:9px;flex:1;min-width:0;min-height:30px;cursor:pointer}
.tv-switch input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tv-switch-ui{position:relative;flex:none;width:26px;height:15px;border-radius:99px;background:rgba(255,255,255,.12);transition:background-color var(--dur-base) ease}
.tv-switch-ui::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:var(--mut);transition:transform var(--dur-base) var(--ease-out),background-color var(--dur-base) ease}
.tv-switch input:checked+.tv-switch-ui{background:rgba(34,176,125,.6)}
.tv-switch input:checked+.tv-switch-ui::after{transform:translateX(11px);background:#fff}
.tv-switch input:focus-visible+.tv-switch-ui{outline:2px solid rgba(230,235,232,.55);outline-offset:2px}
.tv-swatch{flex:none;width:12px;height:3px;border-radius:2px}
.tv-ind-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.cw-menu-row:not(.is-on) .tv-ind-name{color:var(--mut)}
.dash-shell .cw-menu .cw-period{width:50px;padding:4px 6px;border:1px solid var(--cc-line);border-radius:6px;background:rgba(255,255,255,.04);font-family:var(--font-mono);font-size:11.5px}
.dash-shell .cw-menu .cw-q{flex:none;width:20px;height:20px;border:none;box-shadow:inset 0 0 0 1px var(--cc-line-2);font-size:10.5px;font-weight:600}
.tv-ind-note{font-size:10.5px;color:var(--mut2);white-space:nowrap}
.tv-ind-hint{margin:6px;padding:8px 10px;border-radius:8px;background:rgba(242,180,65,.08);color:#E8C98A;font-size:11.5px;line-height:1.45}
.dash-shell .cw-menu-reset{margin:6px 0 2px;border:none;box-shadow:inset 0 0 0 1px var(--cc-line);color:var(--mut);font-weight:500}
.dash-shell .cw-menu-reset:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--cc-line-2)}

/* replay transport */
.tv-replay{position:absolute;left:12px;right:84px;bottom:36px;z-index:7;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:10px;
  background:rgba(16,19,20,.96);box-shadow:inset 0 0 0 1px var(--cc-line-2),0 16px 40px rgba(0,0,0,.5)}
.tv-replay:not([hidden]){animation:tvRise 280ms var(--ease-out) both}
.tv-rp-top,.tv-rp-bottom{display:flex;align-items:center;gap:10px;min-width:0}
.tv-rp-badge{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500}
.tv-rp-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mut)}
.tv-rp-badge.is-wait::before{background:var(--amber)}
.tv-rp-badge.is-ready::before{background:var(--blue)}
.tv-rp-badge.is-play::before{background:var(--green);animation:ccLive 1.6s ease-in-out infinite}
.tv-rp-badge.is-done::before{background:var(--green)}
.tv-rp-dec{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--mut)}
.tv-rp-dec b{font-weight:500;color:var(--text)}
.tv-rp-exit{flex:none;margin-left:auto;padding:4px 8px;border:none;border-radius:6px;background:transparent;color:var(--mut);font-family:inherit;font-size:12px;cursor:pointer}
.tv-rp-exit:hover{color:var(--text);background:rgba(255,255,255,.05)}
.tv-rp-timeline{position:relative;height:4px;border-radius:99px;background:rgba(255,255,255,.05);overflow:visible}
.tv-rp-past,.tv-rp-played,.tv-rp-hidden{position:absolute;top:0;bottom:0}
.tv-rp-past{left:0;border-radius:99px 0 0 99px;background:rgba(255,255,255,.22)}
.tv-rp-played{background:linear-gradient(90deg,rgba(34,176,125,.5),rgba(34,176,125,.9));transition:width 240ms linear}
.tv-rp-hidden{border-radius:0 99px 99px 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 3px,transparent 3px 6px)}
.tv-rp-cut{position:absolute;top:-4px;width:2px;height:12px;margin-left:-1px;border-radius:1px;background:var(--amber)}
.tv-rp-time,.tv-rp-count{flex:none;font-size:11px;color:var(--mut)}
.tv-rp-controls{display:flex;align-items:center;gap:6px;flex:none}
.tv-rp-btn,.tv-rp-icon{display:inline-flex;align-items:center;justify-content:center;height:28px;border:none;border-radius:7px;background:transparent;color:var(--text);
  font-family:inherit;font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer;box-shadow:inset 0 0 0 1px var(--cc-line-2);transition:background-color var(--dur-fast) ease,transform var(--dur-fast) ease}
.tv-rp-btn{padding:0 10px}
.tv-rp-icon{width:28px;padding:0}
.tv-rp-btn:hover,.tv-rp-icon:hover{background:rgba(255,255,255,.06)}
.tv-rp-btn:active,.tv-rp-icon:active{transform:scale(.96)}
.tv-rp-btn:disabled,.tv-rp-icon:disabled{opacity:.4;cursor:not-allowed}
.tv-rp-btn--primary{background:var(--text);color:var(--cc-ink);box-shadow:none}
.tv-rp-btn--primary:hover{background:#fff}
.tv-rp-play{background:rgba(255,255,255,.08)}
.tv-rp-speed{display:inline-flex;padding:2px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--cc-line)}
.tv-rp-speed button{height:22px;padding:0 7px;border:none;border-radius:5px;background:transparent;color:var(--mut);font-family:var(--font-mono);font-size:11px;cursor:pointer}
.tv-rp-speed button.active{background:rgba(255,255,255,.09);color:var(--text)}

/* ---- side panel ---- */
.tv .aw-panel.tv-side{position:static;display:flex;flex-direction:column;min-width:0;min-height:0;max-height:none;border:none;border-left:1px solid var(--cc-line);border-radius:0;background:transparent;overflow:hidden}
.tv-side-tabs{display:flex;gap:2px;flex:0 0 auto;padding:0 10px;border-bottom:1px solid var(--cc-line)}
.tv .aw-tab.tv-side-tab{flex:0 0 auto;margin-bottom:-1px;padding:13px 10px 12px;border:none;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--mut);font-size:12.5px;font-weight:500}
.tv .aw-tab.tv-side-tab:hover{color:var(--text)}
.tv .aw-tab.tv-side-tab.active{color:var(--text);border-bottom-color:var(--text)}
.tv-side-sub{display:flex;gap:2px;flex:0 0 auto;padding:8px 10px;border-bottom:1px solid var(--cc-line);overflow-x:auto;scrollbar-width:none}
.tv-side-sub::-webkit-scrollbar{display:none}
.tv .aw-tab.tv-sub-tab{flex:0 0 auto;padding:5px 9px;border:none;border-radius:6px;background:transparent;color:var(--mut);font-size:12px;font-weight:500}
.tv .aw-tab.tv-sub-tab:hover{color:var(--text)}
.tv .aw-tab.tv-sub-tab.active{background:rgba(255,255,255,.075);color:var(--text)}
.tv .aw-body{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 22px;font-size:12.5px;line-height:1.5}

.tv-sec+.tv-sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--cc-line)}
.tv-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:12.5px;font-weight:500;color:var(--text)}
.tv-sec-h em{font-style:normal;font-family:var(--font-mono);font-size:10.5px;color:var(--mut2)}
.tv-kv{margin:0}
.tv-kv-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid rgba(255,255,255,.045)}
.tv-kv-row:first-child{padding-top:0;border-top:none}
.tv-kv dt{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mut)}
.tv-kv dd{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0}
.tv-state{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--text)}
.tv-kv small{font-family:var(--font-mono);font-size:10.5px;color:var(--mut)}
.tv-tone{flex:none;display:inline-block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35)}
.tv-tone--up{background:var(--green)}
.tv-tone--down{background:var(--red)}
.tv-tone--warn{background:var(--amber)}
.tv-meter{position:relative;display:block;height:3px;margin-top:5px;border-radius:99px;background:rgba(255,255,255,.07)}
.tv-meter b{position:absolute;top:-2px;width:2px;height:7px;margin-left:-1px;border-radius:1px;background:var(--text)}
.tv .cw-q.tv-q{width:16px;height:16px;min-width:0;min-height:0;border:none;box-shadow:inset 0 0 0 1px var(--cc-line-2);font-size:9.5px;line-height:16px;padding:0}
.tv-foot-note,.tv-disclaimer{margin:10px 0 0;font-size:11px;line-height:1.45;color:var(--mut2)}
.tv-disclaimer{margin-top:18px}
.tv-setup-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tv-setup-label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500}
.tv-setup-age{font-family:var(--font-mono);font-size:11px}
.tv-setup-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--cc-line);border-bottom:1px solid var(--cc-line)}
.tv-setup-metrics>div{display:flex;flex-direction:column;gap:5px;min-width:0;padding:10px 10px 10px 0}
.tv-setup-metrics>div+div{padding-left:10px;border-left:1px solid var(--cc-line)}
.tv-setup-metrics span{font-size:11px;color:var(--mut);white-space:nowrap}
.tv-setup-metrics b{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.tv-setup-metrics small{font-size:10.5px;font-weight:400;color:var(--mut2)}
.tv .cc-rr{margin-top:16px}
.tv-setup-facts{display:flex;gap:20px;margin-top:4px}
.tv-setup-facts div{display:flex;flex-direction:column;gap:2px}
.tv-setup-facts span{font-size:11px;color:var(--mut)}
.tv-setup-facts b{font-family:var(--font-mono);font-size:12px;font-weight:500}
.tv-setup-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.tv-setup-actions .cc-btn:only-child{grid-column:1 / -1}
.tv-ai-block+.tv-ai-block{margin-top:14px}
.tv-ai-h{margin-bottom:5px;font-size:12px;font-weight:500;color:var(--text)}
.tv-ai-block p{margin:0;font-size:12.5px;line-height:1.6;color:#C9D0CD}
.tv-ai-src{margin-top:6px;font-size:10.5px;color:var(--mut2)}
.tv-watch{margin:0;padding-left:16px}
.tv-watch li{margin:3px 0;font-size:12.5px;line-height:1.5;color:#C9D0CD}
.tv-ai-lock{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--cc-line);color:var(--mut);font-size:12.5px;line-height:1.5}
.tv-link{padding:0;border:none;background:none;color:var(--mut);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer}
.tv-link:hover{color:var(--text)}

/* existing panel content (tasks, inspect, replay, trade) in the terminal register */
.tv .aw-sec-title,.tv-research .aw-sec-title{font-size:13px;font-weight:600;letter-spacing:-.005em;margin-bottom:6px}
.tv .aw-mut,.tv-research .aw-mut{font-size:12px;line-height:1.55;color:var(--mut)}
.tv .aw-task{margin:0;padding:12px 0;border:none;border-top:1px solid var(--cc-line);border-radius:0}
.tv .aw-task-active{background:transparent;border-top-color:rgba(111,168,247,.45)}
.tv .aw-task-t{font-weight:600}
.tv .btn-green{padding:10px 12px;border-radius:9px;background:var(--text);color:var(--cc-ink);font-size:12.5px;font-weight:600}
.tv .btn-green:hover{background:#fff}
.tv .btn-outline-blue{padding:10px 12px;border:none;border-radius:9px;background:transparent;box-shadow:inset 0 0 0 1px var(--cc-line-2);color:var(--text);font-size:12.5px;font-weight:500}
.tv .btn-outline-blue:hover{background:var(--cc-hover)}
.tv .btn-small-outline,.tv-research .btn-small-outline{border:none;border-radius:7px;box-shadow:inset 0 0 0 1px var(--cc-line-2);color:var(--text);font-weight:500}
.tv .btn-small-outline:hover,.tv-research .btn-small-outline:hover{background:var(--cc-hover);color:var(--text)}
.tv .aw-choice span{border:none;border-radius:8px;box-shadow:inset 0 0 0 1px var(--cc-line-2);color:var(--mut);font-weight:500}
.tv .aw-choice input:checked+span{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--text);color:var(--text)}
.tv .aw-note,.tv .aw-trade-fields input{border:1px solid var(--cc-line);border-radius:8px;background:rgba(255,255,255,.03)}
.tv .aw-kv>div,.tv .aw-qr{border-bottom:1px solid rgba(255,255,255,.045)}
.tv .aw-feedback{border:1px solid var(--cc-line);border-radius:10px;background:rgba(255,255,255,.02)}
.tv .aw-fb-IYI{border-color:rgba(34,176,125,.35)}
.tv .aw-fb-YAKIN{border-color:rgba(242,180,65,.35)}
.tv .aw-fb-GELISTIRILEBILIR{border-color:rgba(111,168,247,.35)}
.tv .aw-lesson{background:rgba(255,255,255,.035);color:#C9D0CD}
.tv .aw-quick span,.tv-research .aw-quick span{background:rgba(255,255,255,.05);color:var(--text);font-weight:500}
.tv .aw-current,.tv-research .aw-current{border:1px solid var(--cc-line);background:rgba(255,255,255,.03)}
.tv .aw-guide{border:none;box-shadow:inset 0 0 0 1px var(--cc-line-2);font-weight:500}
.tv .aw-guide:hover{background:var(--cc-hover)}

/* ---- research dock ---- */
.tv-research{margin-top:28px}
.tv-research-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:1px solid var(--cc-line)}
.tv-research-title{display:flex;align-items:baseline;gap:10px;padding-bottom:12px;font-size:13px;font-weight:500}
.tv-research-title b{font-size:12.5px;font-weight:500;color:var(--mut)}
.tv-rtabs{display:flex;gap:2px}
.tv-rtab{margin-bottom:-1px;padding:10px 12px 12px;border:none;border-bottom:2px solid transparent;background:none;color:var(--mut);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;
  transition:color var(--dur-fast) ease,border-color var(--dur-base) ease}
.tv-rtab:hover{color:var(--text)}
.tv-rtab.is-active{color:var(--text);border-bottom-color:var(--text)}
.tv-research-body{min-height:160px;padding-top:18px}
.tv-rb-news{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));column-gap:32px;align-items:start}
.tv-rb-news>:not(.news-card){grid-column:1 / -1}
.tv-research .news-card{margin:0;padding:14px 0;border:none;border-top:1px solid var(--cc-line);border-radius:0;background:transparent}
.tv-research .news-cat{font-weight:600}
.tv-research .news-why{background:rgba(255,255,255,.03);color:#C9D0CD}
.tv-rb-company,.tv-rb-financials{max-width:980px}
.tv-research .filing-row,.tv-research .fin-row{border-bottom:1px solid rgba(255,255,255,.05)}
.tv-research .filing-form{color:var(--text)}
.tv-research .filing-row a{color:var(--mut)}
.tv-research .filing-row a:hover{color:var(--text)}
.tv-macro{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));column-gap:24px;border-top:1px solid var(--cc-line)}
.tv-macro-cell{padding:14px 0;border-bottom:1px solid var(--cc-line)}
.tv-macro-k{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--mut)}
.tv-macro-k em{font-style:normal;font-size:10.5px;color:var(--mut2)}
.tv-macro-v{margin-top:6px;font-size:22px;font-weight:500;letter-spacing:-.02em}
.tv-macro-chg{margin-top:2px;font-size:11.5px}
.tv-macro-meta{margin-top:6px;font-size:10.5px;color:var(--mut2)}
.tv-econ-edu{display:flex;flex-wrap:wrap;gap:6px}
.tv-chip-btn{height:30px;padding:0 11px;border:none;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--cc-line-2);color:var(--text);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer}
.tv-chip-btn:hover{background:var(--cc-hover)}
.tv-note{margin:22px 0 0;font-size:11px;color:var(--mut2)}

/* ---- focus mode: the shell re-flows around the terminal ---- */
body.tv-focus .sidebar,body.tv-focus .sidebar-overlay,body.tv-focus .dash-topbar,body.tv-focus .ticker-tape,
body.tv-focus #marketClosedBanner,body.tv-focus .disclaimer,body.tv-focus .tv-research{display:none!important}
body.tv-focus .dash-shell .workspace{margin:0;border-radius:0;box-shadow:none}
body.tv-focus .dash-shell .workspace-body{padding:0}
body.tv-focus .tv{height:100dvh;border-radius:0;box-shadow:none}
body.tv-focus .tv-body{grid-template-columns:minmax(0,1fr) 300px}
body.tv-focus .tv.tv-panel-hidden .tv-body{grid-template-columns:minmax(0,1fr)}
body.tv-focus #viewAnalysis{animation:none}

/* ---- motion ---- */
@keyframes tvSpin{to{transform:rotate(360deg)}}
@keyframes tvFade{from{opacity:.3}to{opacity:1}}
@keyframes tvReflow{from{opacity:.55}to{opacity:1}}
@keyframes tvRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tvPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes tvTagIn{from{opacity:0}to{opacity:1}}
.cw-chart.tv-swap{animation:tvFade 420ms var(--ease-out)}
.tv.tv-reflow{animation:tvReflow 380ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .cw-chart.tv-swap,.tv.tv-reflow,.tv-replay:not([hidden]),.dash-shell .cw-menu:not([hidden]),.tv-edu-tag{animation:none}
  .tv-tf-thumb,.tv-switch-ui,.tv-switch-ui::after,.tv-rp-played{transition:none}
}

/* ---- responsive ---- */
@media (max-width:1279px){
  .tv-body{grid-template-columns:minmax(0,1fr) 300px}
  .tv-q-meta{display:none}
}
@media (max-width:1099px){
  .tv{height:auto}
  .tv-body{display:block}
  .tv-chart-col{height:max(460px, calc(var(--tv-h, 760px) - 52px))}
  .tv .aw-panel.tv-side{border-left:none;border-top:1px solid var(--cc-line)}
  .tv .aw-body{overflow:visible}
  .tv-panel-toggle{display:none}
  body.tv-focus .tv{height:100dvh}
  body.tv-focus .tv-body{display:flex;flex:1;min-height:0}
  body.tv-focus .tv-chart-col{flex:1;height:auto}
  body.tv-focus .tv .aw-panel.tv-side{display:none}
}
@media (max-width:640px){
  body[data-view="analysis"] .dash-shell .workspace-body{padding:10px 10px 40px}
  .tv{border-radius:10px}
  .tv-head{flex-wrap:wrap;height:auto;gap:8px 10px;padding:8px 10px}
  /* symbol + actions share the first row; the quote gets the second */
  .tv-sym{flex:1 1 0;width:auto;min-width:0}
  .tv .tv-sym-input{width:100%}
  .tv-quote{order:3;flex-basis:100%}
  .tv-stage .cw-legend .cw-legend-mut{display:none}
  .tv-head-actions{gap:6px}
  .tv-edu-btn span,.tv-focus-label{display:none}
  .tv-hbtn{padding:0 10px}
  .tv-edu-btn,.tv-focus-btn{width:34px;padding:0}
  .tv-toolbar{gap:4px;padding:0 8px;overflow-x:auto;scrollbar-width:none}
  .tv-toolbar::-webkit-scrollbar{display:none}
  .tv-tbtn-l,.tv .tv-live{display:none}
  .tv-work{flex-direction:column}
  .tv-stage{flex:none;height:58dvh;min-height:340px}
  .tv-rail{order:2;flex:0 0 48px;flex-direction:row;justify-content:flex-start;gap:4px;padding:0 8px;border-right:none;border-top:1px solid var(--cc-line);overflow-x:auto;scrollbar-width:none}
  .tv-rail::-webkit-scrollbar{display:none}
  .tv-rail-sep{width:1px;height:18px;margin:0 4px}
  .tv-tool{width:36px;height:36px}
  .tv-chart-col{height:auto}
  .tv-stage .cw-legend{right:60px}
  .tv-replay{left:8px;right:8px;bottom:30px;padding:9px 10px}
  .tv-rp-dec,.tv-rp-time{display:none}
  .tv-rp-controls{flex-wrap:wrap;justify-content:flex-end}
  .tv-research-head{flex-direction:column;align-items:stretch;gap:0}
  .tv-research-title{padding-bottom:4px}
  .tv-rtabs{overflow-x:auto;scrollbar-width:none}
  .tv-rb-news{grid-template-columns:minmax(0,1fr)}
  .tv-kv-row{grid-template-columns:88px minmax(0,1fr)}

  /* phone focus: a full-screen terminal -- ← symbol price ⋮ / timeframes / chart / tools */
  body.tv-focus{overflow:hidden}
  body.tv-focus .tv{position:fixed;inset:0;z-index:60;height:100dvh;border-radius:0}
  body.tv-focus .tv-head{flex-wrap:nowrap;height:48px;padding:0 8px;gap:8px}
  body.tv-focus .tv-focus-exit,body.tv-focus .tv-more{display:inline-flex}
  body.tv-focus .tv-sym{flex:0 1 118px}
  body.tv-focus .tv-sym-go,body.tv-focus .tv-sym-ico{display:none}
  body.tv-focus .tv-quote{order:0;flex:0 1 auto;flex-basis:auto}
  body.tv-focus .tv-q-chg{display:none}
  body.tv-focus .tv-edu-btn,body.tv-focus .tv-hbtn--primary,body.tv-focus .tv-focus-btn{display:none}
  body.tv-focus .tv-work{flex:1;min-height:0}
  body.tv-focus .tv-stage{flex:1;height:auto;min-height:0}
  body.tv-focus .tv .cw-foot{display:none}
}
/* The base .topbar is position:sticky; Dashboard v3 made its ground
   transparent, so on scroll the page slid visibly underneath it. It keeps the
   workspace surface instead (rounded to the inset panel on desktop). */
.dash-shell .dash-topbar{background:var(--cc-surface)}
@media (min-width:1000px){ .dash-shell .dash-topbar{border-radius:14px 14px 0 0} }
/* During replay the transport bar already states the decision point; the
   engine's hint line would sit right behind it. */
.tv-stage:has(.tv-replay:not([hidden])) .cw-hint{display:none}

@media (pointer:coarse){
  .tv .tv-tf,.tv-tbtn,.tv-range{min-height:36px}
  .tv-rp-btn,.tv-rp-icon{height:34px}
  .tv-rp-icon{width:34px}
}

/* ===========================================================================
 * Graph & Analysis v5 -- multi-chart workstation.
 * The grid is one surface: panes are separated by the same hairline the rest
 * of the terminal uses (a 1px grid gap over the line color), never by cards.
 * Single layout keeps the v4 terminal exactly as it was.
 * ========================================================================= */
/* #awChartHost carries the v4 `display:flex` at id specificity, so the grid
   rules have to match it to win */
#awChartHost.tv-grid{display:grid;flex:1;min-width:0;min-height:0}
#awChartHost.tv-grid-1{grid-template-columns:minmax(0,1fr)}
#awChartHost.tv-grid-2,#awChartHost.tv-grid-4{gap:1px;background:var(--cc-line)}
#awChartHost.tv-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
#awChartHost.tv-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.tv-pane{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--tv-bg,#0A0C0D)}
.tv-pane .cw-root{flex:1;min-width:0;min-height:0}
/* active pane: a hairline in the text tone, no glow */
.tv-grid--multi .tv-pane::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow var(--dur-base) ease}
.tv-grid--multi .tv-pane.is-active::after{box-shadow:inset 0 0 0 1px rgba(230,235,232,.22)}
.tv-grid--multi .tv-pane.is-active .tv-pane-head{background:rgba(255,255,255,.035)}
.tv-grid--multi .tv-pane:not(.is-active) .tv-pane-head{color:var(--mut2)}

/* per-pane chrome: only what that chart owns */
.tv-pane-head{display:flex;align-items:center;gap:6px;flex:0 0 auto;height:34px;padding:0 6px 0 8px;border-bottom:1px solid var(--cc-line);
  transition:background-color var(--dur-base) ease}
.tv-pane-sym{flex:0 0 auto}
.tv .tv-pane-input{width:78px;height:24px;padding:0 7px;border:none;border-radius:6px;background:rgba(255,255,255,.04);color:var(--text);
  font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;outline:none}
.tv .tv-pane-input:focus{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--cc-line-2)}
.tv-pane-tfs{display:inline-flex;gap:1px;min-width:0;overflow-x:auto;scrollbar-width:none}
.tv-pane-tfs::-webkit-scrollbar{display:none}
.tv-pane-head .cw-live [data-cw-live-text]{display:none}
.tv .tv-ptf{min-width:0;height:24px;padding:0 6px;border:none;border-radius:5px;background:transparent;color:var(--mut);
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;cursor:pointer;transition:color var(--dur-fast) ease,background-color var(--dur-fast) ease}
.tv .tv-ptf:hover{color:var(--text)}
.tv .tv-ptf.active{background:rgba(255,255,255,.08);color:var(--text)}
.tv .tv-ptf:disabled{opacity:.4;cursor:not-allowed}
.tv-ptbtn{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;height:24px;padding:0 6px;border:none;border-radius:6px;background:transparent;
  color:var(--mut);font-family:inherit;font-size:11.5px;cursor:pointer;transition:color var(--dur-fast) ease,background-color var(--dur-fast) ease}
.tv-ptbtn:hover{background:var(--cc-hover);color:var(--text)}
.tv-pane-head .cw-live{font-size:10.5px}
.tv-pane-head .tv-count{padding:0 4px;font-size:10px}
.tv-pane .tv-stage .cw-legend{top:6px;left:10px;right:70px;font-size:10.5px}
/* a quarter-width pane shows the close and the change; the full OHLC row
   would cover the candles it describes */
.cw-compact .cw-legend-row>span:nth-child(3),
.cw-compact .cw-legend-row>span:nth-child(4),
.cw-compact .cw-legend-row>span:nth-child(5),
.cw-compact .cw-legend-mut{display:none}
.tv-pane .tv-replay{left:8px;right:70px;bottom:24px}

/* the drawing rail is global in grid layouts and drives the active pane */
.tv-grid-rail{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 44px;padding:8px 0;border-right:1px solid var(--cc-line)}
.tv-grid-rail[hidden]{display:none}

/* workstation controls in the terminal head */
.tv-layouts{display:inline-flex;gap:2px;flex:0 0 auto;padding:2px;border-radius:8px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--cc-line)}
.tv-lbtn{display:grid;place-items:center;width:28px;height:26px;border:none;border-radius:6px;background:transparent;color:var(--mut);cursor:pointer;
  transition:color var(--dur-fast) ease,background-color var(--dur-fast) ease}
.tv-lbtn:hover{color:var(--text)}
.tv-lbtn.is-active{background:rgba(255,255,255,.09);color:var(--text)}
.tv-sync-btn.active{background:rgba(255,255,255,.07);color:var(--text);box-shadow:inset 0 0 0 1px var(--cc-line-2)}
.tv-ws{position:relative;flex:0 0 auto}
.tv-ws-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:45;width:300px;max-height:60vh;overflow-y:auto;padding:6px;border-radius:12px;
  background:#111415;box-shadow:inset 0 0 0 1px var(--cc-line-2),0 20px 48px rgba(0,0,0,.55)}
.tv-ws-menu[hidden]{display:none}
.tv-ws-row{display:flex;align-items:center;gap:4px}
.tv-ws-open{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:7px 8px;border:none;border-radius:7px;background:transparent;color:var(--text);
  font-family:inherit;text-align:left;cursor:pointer}
.tv-ws-open:hover{background:rgba(255,255,255,.04)}
.tv-ws-open b{font-size:12.5px;font-weight:500}
.tv-ws-open span{font-family:var(--font-mono);font-size:10.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-ws-del{display:grid;place-items:center;width:26px;height:26px;border:none;border-radius:6px;background:transparent;color:var(--mut2);cursor:pointer}
.tv-ws-del:hover{color:var(--red);background:rgba(255,107,111,.1)}
.tv-ws-empty{padding:10px 8px;font-size:12px;line-height:1.5;color:var(--mut)}
.tv-ws-input{width:100%;height:38px;padding:0 10px;border:1px solid var(--cc-line);border-radius:8px;background:rgba(255,255,255,.03);color:var(--text);
  font-family:var(--font-mono);font-size:13px;box-sizing:border-box}

@media (max-width:1279px){
  .tv-lbtn{width:26px}
  .tv-pane-input{width:76px}
}
@media (max-width:1099px){
  /* grid panes keep a workable height instead of being squeezed */
  .tv-multi .tv-chart-col{height:auto}
  .tv-grid--multi .tv-pane{min-height:420px}
}
@media (max-width:640px){
  /* phones: stack the panes, one full-width chart each; the rail and the
     four-up grid would both be unusable at this width */
  #awChartHost.tv-grid-2,#awChartHost.tv-grid-4{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .tv-grid--multi .tv-pane{min-height:56dvh}
  .tv-grid-rail{display:none}
  /* the workstation controls wrap onto their own row instead of pushing the
     head past the viewport */
  .tv-head-actions{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end;margin-left:0;row-gap:6px}
  .tv-layouts{order:5}
  .tv-lbtn{width:30px;height:28px}
  .tv-sync-btn,.tv-ws{order:6}
  body.tv-focus .tv-layouts,body.tv-focus .tv-sync-btn,body.tv-focus .tv-ws{display:none}
  .tv-ws-menu{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto}
}
@media (pointer:coarse){
  .tv-lbtn,.tv-ptbtn,.tv .tv-ptf{min-height:32px}
}