/* Pipnotic chart styles (/chart and shared charts). Moved out of modules/Chart/views/index.php so browsers cache them.
   Public-only and member-only rules stay inline in the view. */
/* ── Page-header ─────────────────────────────────────────────────────────── */
.ch-page-header { margin-bottom: var(--s4); }
.ch-page-header__sub { color: var(--text-muted); font-size: .875rem; margin-top: var(--s2); }

/* ── Controls card ───────────────────────────────────────────────────────── */
.ch-controls-card { margin-bottom: var(--s4); padding: var(--s4) var(--s5); container-type: inline-size; container-name: chartcard; }
.ch-controls-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s5);
}
.ch-ctrl-group {
    display: flex;
    align-items: center;
    gap: var(--s3);
}
.ch-renko-params:not([hidden]),
.ch-pf-params:not([hidden])    { display: flex; }
.ch-renko-params[hidden],
.ch-pf-params[hidden]          { display: none; }
.ch-ctrl-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--s2);
}
.ch-ctrl-hint    { font-size: .68rem; color: var(--text-muted); }
.ch-draw-tools { display:flex; gap:4px; }
.ch-draw-btn { width:28px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r2); color:var(--text-muted); cursor:pointer; font-size:.85rem; line-height:1; }
.ch-draw-btn:hover { color:var(--text-primary); border-color:var(--border-2); }
.ch-draw-btn.active { color:var(--accent); border-color:var(--accent); }
.dashboard-content:fullscreen { height:100vh; padding:10px 12px; background:var(--ink); overflow:auto; }
.dashboard-content:fullscreen .ch-chart-card { border-radius:0; }
.ch-draw-clear:hover { color:var(--loss); border-color:var(--loss); }
.ch-alert-btn.active { color:#f5a623; border-color:#f5a623; }
/* Active-alerts strip (above the chart) */
.ch-alert-strip {
    display:flex; align-items:flex-start; gap:var(--s2);
    padding:var(--s2) var(--s3);
    background:var(--surface-2); border-bottom:1px solid var(--border);
}
.ch-alert-strip[hidden] { display:none; }
.ch-alert-strip__label { margin:0; padding-top:6px; flex:none; }
.ch-alert-strip__chips {
    display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; min-width:0;
}
.ch-alert-strip__clear { margin-left:var(--s2); flex:none; }
.ch-alert-chip {
    display:inline-flex; align-items:center; column-gap:8px;
    padding:4px 6px 4px 9px; border:1px solid var(--border); border-radius:var(--r1);
    background:var(--surface-3); font-size:.72rem; line-height:1;
}
.ch-alert-chip--current { border-color:var(--border-2); }
.ch-alert-chip--fired   { border-color:rgba(245,166,35,.5); background:rgba(245,166,35,.08); }
.ch-alert-chip__sym {
    background:none; border:none; padding:0; cursor:pointer; white-space:nowrap;
    color:var(--accent); font-weight:800; font-size:.72rem; letter-spacing:.03em;
}
.ch-alert-chip__sym:hover { color:var(--accent-hover); text-decoration:underline; }
.ch-alert-chip--fired .ch-alert-chip__sym { color:#f5a623; }
.ch-alert-chip__del {
    background:none; border:none; padding:0 2px; cursor:pointer;
    color:var(--text-muted); font-size:.68rem; line-height:1;
}
.ch-alert-chip__del:hover { color:var(--loss); }
.ch-toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); z-index:9999; max-width:88vw; padding:9px 16px; background:#2a2118; border:1px solid #f5a62366; border-radius:8px; color:#f7e3c4; font-size:.82rem; box-shadow:0 6px 20px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.ch-toast--on { opacity:1; transform:translate(-50%,0); }
.ch-bars-input   { width: 80px; }
.ch-box-input    { width: 90px; }
.ch-rev-input    { width: 54px; }
.ch-pf-rev-label { margin-left: var(--s1); }

/* Chart card structural overrides */
.ch-chart-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    /* Query container so the top bar reacts to the CHART's width, not the
       window's — a docked chart on a wide screen is still narrow. */
    container-type: inline-size;
    container-name: chartcard;
}
.ch-type-tabs {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding: 0 var(--s3);
    flex-shrink: 0;
}
.ch-head-meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: 0 var(--s2);
}
.ch-head-sym {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ch-head-tf {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ch-head-ohlc {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--text-muted);
    display: flex;
    gap: var(--s3);
}
.ch-head-extra {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ch-head-ohlc .up { color: var(--success); }
.ch-head-ohlc .dn { color: var(--loss); }

/* Mobile: shrink the OHLC readout so it fits the header row. The regime/strength
   strip it used to collide with is hidden on mobile (see .ch-ctx-overlay). */
@media (max-width: 640px) {
    .ch-head-meta { gap: var(--s2); }
    .ch-head-ohlc { font-size: .66rem; }
}

/* ── Chart page: make dashboard-content fill viewport and flex column ──── */
.dashboard-content:has(.ch-chart-card) {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);   /* fallback */
    height: calc(100dvh - 64px);  /* dynamic viewport: tracks the mobile address bar so the chart bottom isn't clipped */
    overflow: hidden;
    padding-bottom: var(--s7);   /* match the top/side gap — same breathing room as sidebar border */
}
/* ch-page grows to fill remaining space after page-header and controls card */
.ch-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: var(--s4);
}

/* ── Filter label — reuse from other modules ─────────────────────────────── */
.filter-label {
    font-size:.72rem; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:var(--text-muted);
    display:flex; align-items:center; gap:5px; cursor:default;
}

/* ── Chart type tab — matches simulator sim-tab ──────────────────────────── */
.ch-type-tab {
    padding:.5rem 1.1rem;
    font-size:.875rem;
    background:none; border:none;
    border-bottom:2px solid transparent;
    color:var(--text-muted); cursor:pointer;
    margin-bottom:-1px; transition:color .15s; white-space:nowrap;
}
.ch-type-tab:hover { color:var(--text-secondary); }
.ch-type-tab--active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── Chart type — inline label + select that blends into the header row ───── */
/* Label uses the shared .filter-label (identical to the "Alerts" label below). */
.ch-type-group { display:flex; align-items:center; gap:6px; }
.ch-type-label { white-space:nowrap; user-select:none; }
.ch-type-select {
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background:transparent; border:none; border-radius:var(--r2);
    margin:0; padding:.5rem 22px .5rem 4px;
    color:var(--text-primary); cursor:pointer;
    font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    line-height:1.2; white-space:nowrap;
    transition:color .15s;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 6' fill='none' stroke='%239aa0a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 5 5 9 1'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 6px center;
}
.ch-type-select:hover  { color:var(--accent); }
.ch-type-select:focus  { outline:none; color:var(--accent); }
.ch-type-select option { background:var(--surface-2); color:var(--text-primary); font-weight:600; text-transform:none; letter-spacing:normal; }

/* ── Symbol picker ───────────────────────────────────────────────────────── */
.ch-sym-wrap { position:relative; }
.ch-sym-btn {
    display:flex; align-items:center; gap:6px;
    background:var(--surface-3); border:1px solid var(--border-2); border-radius:var(--r2);
    padding:5px 12px; color:var(--text-primary); cursor:pointer;
    font-size:.9rem; font-weight:800; font-family: var(--font-mono);
    transition:border-color .15s; min-width:120px;
}
.ch-sym-btn:hover { border-color:var(--accent); }
.ch-sym-btn svg { width:10px; height:10px; color:var(--text-muted); flex-shrink:0; margin-left:auto; }
.ch-sym-nav { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r2); color:var(--text-muted); cursor:pointer; font-size:.7rem; flex-shrink:0; }
.ch-sym-nav:hover { color:var(--accent); border-color:var(--accent); }
.ch-sym-dd {
    position:absolute; top:calc(100% + 5px); left:0; z-index:200;
    background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r3);
    min-width:270px; width:max-content; max-width:min(92vw,520px);
    max-height:400px; overflow-y:auto;
    box-shadow:0 12px 40px rgba(0,0,0,.6); display:none;
}
.ch-sym-dd.open { display:block; }
.ch-sym-search { padding:var(--s2) var(--s3); border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface-2); }
.ch-sym-search input {
    width:100%; background:var(--surface-3); border:1px solid var(--border-2);
    border-radius:var(--r2); padding:5px 10px; color:var(--text-primary);
    font-size:.82rem; outline:none;
}
.ch-sym-search input:focus { border-color:var(--accent); }
.ch-sym-cat { padding:6px 14px 3px; font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.ch-sym-item {
    display:flex; align-items:center; justify-content:space-between; gap:28px;
    padding:7px 14px; cursor:pointer; font-size:.82rem; transition:background .1s;
}
.ch-sym-item[hidden] { display: none; }
.ch-sym-item:hover { background:var(--surface-3); }
.ch-sym-item.active { color:var(--accent); }
.ch-sym-item__sym  { font-family: var(--font-mono); font-weight:700; }
.ch-sym-item__name { font-size:.7rem; color:var(--text-muted); white-space:nowrap; }
/* Broker availability (cTrader connected): dot = tradable on your account; dimmed = not on your broker */
.ch-sym-item__sym::after { content:''; display:none; width:6px; height:6px; margin-left:6px; border-radius:50%; background:var(--accent); vertical-align:middle; }
.ch-sym-item.is-broker .ch-sym-item__sym::after { display:inline-block; }
.ch-sym-item.no-broker { opacity:.45; }
.ch-sym-legend { padding:4px 14px 6px; font-size:.68rem; color:var(--text-muted); }
.ch-sym-legend[hidden] { display:none; }
.ch-sym-legend i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:var(--accent); vertical-align:middle; }
.ch-sym-nobroker { margin-left:6px; font-size:.62rem; font-weight:800; letter-spacing:.04em; color:var(--down, #ef4444); }
.ch-sym-nobroker[hidden] { display:none; }

/* ── TF pills ────────────────────────────────────────────────────────────── */
.ch-pills { display:flex; gap:3px; }
/* Compact timeframe dropdown — hidden until the container query below swaps it
   in for the pills on a narrow chart. Matches the symbol/chart-type controls. */
.ch-tf-select {
    display:none; background:var(--surface-3); border:1px solid var(--border-2);
    border-radius:var(--r2); padding:5px 10px; color:var(--text-primary);
    font-weight:700; font-size:.82rem; font-family:var(--font-mono); cursor:pointer;
}
.ch-tf-select:hover  { border-color:var(--accent); }
.ch-tf-select:focus  { outline:none; border-color:var(--accent); }
.ch-tf-select option { background:var(--surface-2); color:var(--text-primary); }
/* Narrow controls row: shed field labels, swap TF pills → dropdown, then drop the
   lower-priority Bars input and "List publicly" toggle so Share/Refresh stay on
   the chart. Container query = reacts to the chart's own width (docked/split). */
@container chartcard (max-width:1200px) {
    .ch-controls-row .filter-label { display:none; }
    .ch-pills      { display:none; }
    .ch-tf-select  { display:inline-flex; }
    .ch-controls-row { gap:var(--s3); }
}
@container chartcard (max-width:900px) {
    .ch-bars-group { display:none; }
    .ch-listopt    { display:none; }
}
.ch-pill {
    background:none; border:1px solid transparent; border-radius:var(--r1);
    padding:4px 10px; color:var(--text-muted); cursor:pointer;
    font-size:.72rem; font-weight:800; letter-spacing:.04em;
    transition:color .15s,border-color .15s,background .15s;
}
.ch-pill:hover { color:var(--text-primary); border-color:var(--border-2); }
.ch-pill.active { color:var(--accent); border-color:var(--accent); background:rgba(0,229,192,.07); }

/* ── Param input ─────────────────────────────────────────────────────────── */
.ch-param-input {
    background:var(--surface-3); border:1px solid var(--border);
    border-radius:var(--r2); padding:4px 10px; color:var(--text-primary);
    font-size:.82rem; text-align:center; outline:none;
    transition:border-color .15s; font-family: var(--font-mono);
}
.ch-param-input:focus { border-color:var(--accent); }

/* ── Toggle ──────────────────────────────────────────────────────────────── */
.ch-tog {
    background:none; border:1px solid var(--border); border-radius:var(--r1);
    padding:4px 10px; color:var(--text-muted); cursor:pointer;
    font-size:.72rem; font-weight:700; transition:all .15s;
}
.ch-tog:hover { border-color:var(--border-2); color:var(--text-primary); }
.ch-tog.on { border-color:var(--accent); color:var(--accent); background:rgba(0,229,192,.07); }

/* ── Multi-timeframe trendlines legend ───────────────────────────────────── */
.ch-mtf { position:absolute; top:8px; left:8px; z-index:5; display:flex; gap:6px; align-items:center; flex-wrap:wrap; max-width:calc(100% - 90px); font-size:.7rem; font-weight:700; }
.ch-mtf[hidden] { display:none; }
.ch-mtf__ttl { color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.ch-mtf__chip, .ch-mtf__min { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border:1px solid var(--border); border-radius:999px;
    background:var(--surface-2); color:var(--text-muted); cursor:pointer; font:inherit; }
.ch-mtf__chip i { width:12px; height:3px; border-radius:2px; opacity:.35; }
.ch-mtf__chip.is-on { color:var(--text-primary); border-color:var(--border-2); }
.ch-mtf__chip.is-on i { opacity:1; }
.ch-mtf__chip i.ch-mtf__dash { background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px); }
.ch-mtf__n { margin-left:2px; padding:0 5px; border-radius:999px; background:var(--border); color:var(--text-muted); font-weight:700; }
.ch-mtf__note { color:var(--text-muted); font-weight:500; }
@media (max-width:640px){ .ch-mtf__ttl { display:none; } .ch-mtf { gap:4px; } .ch-mtf__chip, .ch-mtf__min { padding:2px 6px; } }

/* ── Canvas ──────────────────────────────────────────────────────────────── */
.ch-canvas-wrap {
    position:relative; width:100%; cursor:crosshair; overflow:hidden;
    flex:1; min-height:300px;  /* grows to fill .ch-chart-card */
}
.ch-canvas-wrap canvas { display:block; position:absolute; top:0; left:0; width:100%; height:100%; }
#ch-canvas { z-index:1; }
.ch-vol-wrap { position:relative; width:100%; height:72px; border-top:1px solid var(--border); flex-shrink:0; }
.ch-vol-wrap canvas { display:block; width:100%; height:100%; }

.ch-overlay {
    position:absolute; inset:0; display:flex; align-items:center;
    justify-content:center; background:var(--surface); z-index:10;
    font-size:.82rem; color:var(--text-muted); pointer-events:none;
}
.ch-overlay.hidden { display:none; }

.ch-scroll-hint { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); font-size:.6rem; color:rgba(255,255,255,.15); letter-spacing:.05em; pointer-events:none; z-index:5; }
.ch-ctx-item { display:flex; align-items:center; gap:8px; }
.ch-ctx-overlay { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:16px; pointer-events:none; z-index:2; }
.ch-ctx-label { font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.ch-ctx-dots { display:inline-flex; gap:4px; }
.ch-ctx-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.ch-ctx-arrow { font-size:.95rem; font-weight:800; line-height:1; }
.ch-ctx-sub { font-size:.7rem; color:var(--text-muted); font-family:var(--font-mono); }
.ch-ctx-badge { font-size:.75rem; font-weight:700; padding:2px 9px; border-radius:99px; border:1px solid; }

/* ── Narrow-chart top bar ──────────────────────────────────────────────────
   As the chart card gets narrower the header runs out of horizontal room and
   the centred strength/regime strip collides with the chart-type control and
   the OHLC readout. Rather than let text overlap, we shed it by width:
     ≤ 1360px : drop every word-label + the OHLC readout, keep only the
                strength dots/arrow and the regime badge (the indicators).
     ≤ 760px  : even the indicator strip can't sit clearly between the
                controls, so remove it entirely for that size.
   Uses a container query on .ch-chart-card so it responds to the chart's own
   width (dock open, split view) — the ≤1024px viewport rules below still swap
   the whole bar for the mobile toolbar on small screens. */
@container chartcard (max-width: 1360px) {
    .ch-type-label { display: none; }                 /* "Chart type" — the select still reads "Candles" */
    .ch-ctx-label, .ch-ctx-sub { display: none; }     /* "…strength", "Regime", "3/4", "ADX · Hurst" */
    .ch-head-ohlc, .ch-head-extra { display: none; }  /* O/H/L/C readout — also on the crosshair overlay */
    .ch-ctx-overlay { gap: 12px; }
}
@container chartcard (max-width: 760px) {
    .ch-ctx-overlay { display: none; }
}
/* "Share this chart?" prompt under the Share button, after a member draws */
.ch-ctrl-actions { position: relative; }
.ch-share-tip { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 270px; padding: 12px 14px;
    background: var(--surface-2); border: 1px solid var(--accent); border-radius: var(--r3); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.ch-share-tip p { margin: 0 0 10px; font-size: .82rem; line-height: 1.5; color: var(--text-secondary); }
.ch-share-tip strong { color: var(--text-primary); }
.ch-share-tip__btns { display: flex; gap: 8px; justify-content: flex-end; }
.ch-stage{display:flex;align-items:stretch;gap:0;flex:1;min-height:0}
.ch-stage__main{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column}
.ch-dock{flex:0 0 auto;width:56px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0;border-right:1px solid var(--border);background:var(--surface-1,#141414);overflow:visible}
.ch-dock__group{display:flex;flex-direction:column;gap:5px}
.ch-dock__sep{align-self:stretch;height:1px;background:var(--border);margin:4px 8px;flex:0 0 auto}
.ch-dock .ch-draw-btn,.ch-dock .ch-tog{width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--surface-3,#1e2126);border:1px solid var(--border);border-radius:7px;color:var(--text-secondary);font-size:.72rem;font-weight:600;line-height:1;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.ch-dock .ch-draw-btn{font-size:.98rem;font-weight:400}
.ch-dock .ch-draw-btn:hover,.ch-dock .ch-tog:hover{border-color:var(--border-2,#3a3d44);color:var(--text-primary)}
.ch-dock .ch-draw-btn.active{background:rgba(0,229,192,.14);border-color:rgba(0,229,192,.5);color:var(--accent,#00e5c0)}
.ch-dock .ch-tog.on{background:rgba(0,229,192,.14);border-color:rgba(0,229,192,.5);color:var(--accent,#00e5c0)}
.ch-dock .ch-dock__count{width:40px;height:32px;padding:0 2px;text-align:center;font-size:.72rem;background:var(--surface-3,#1e2126);border:1px solid var(--border);border-radius:7px;color:var(--text-secondary)}
.ch-dock .ch-practice-btn{font-size:.92rem;border-color:rgba(239,83,80,.45);color:#ef5350}
.ch-dock .ch-practice-btn.active{background:rgba(239,83,80,.18);border-color:#ef5350;color:#ef5350}
@media (max-width:1024px){
  .ch-stage{flex-direction:column}
  .ch-dock{width:auto;flex-direction:row;flex-wrap:nowrap;gap:5px;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:7px 8px}
  .ch-dock__group{flex-direction:row;gap:5px}
  .ch-dock__sep{width:1px;height:auto;margin:2px 4px}
  .ch-dock .ch-draw-btn,.ch-dock .ch-tog{width:40px;height:40px}
  .ch-dock .ch-dock__count{width:44px}

  /* ── Full mobile layout — hand the canvas the screen ─────────────────── */
  .dashboard-content:has(.ch-chart-card){ padding:8px; gap:8px; }
  .ch-page-header{ display:none; }                 /* title + blurb are pure chrome while charting */
  .ch-page{ gap:8px; }
  /* controls collapse to ONE swipeable row instead of wrapping into 3 */
  .ch-controls-row{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; gap:8px; scrollbar-width:none; }
  .ch-controls-row::-webkit-scrollbar{ display:none; }
  .ch-controls-row .ch-ctrl-group,.ch-controls-row .ch-ctrl-actions{ flex:0 0 auto; }
  /* symbol picker escapes the controls-row overflow clip: fixed overlay anchored
     under the button by JS (chPositionSymDd); bigger tap targets on phones. */
  .ch-sym-dd.open{ position:fixed; left:8px; right:8px; top:56px; width:auto; min-width:0; max-width:none; max-height:70vh; z-index:1000; }
  .ch-sym-item{ padding:11px 14px; }
  /* keep the OHLC readout; drop Share (+ its "list publicly" toggle) on mobile */
  #chShareBtn, .ch-listopt{ display:none; }
  /* drop the chart-type options entirely on mobile */
  .ch-type-tab,
  .ch-type-group{ display:none; }
  .ch-type-tabs{ min-height:34px; }
  /* regime / strength strip removed on mobile (it collided with the OHLC readout) */
  .ch-ctx-overlay{ display:none; }
  /* card + canvas own the remaining height */
  .ch-chart-card{ padding:0; }
  .ch-canvas-wrap{ min-height:0; }
  /* practice/paper bar: compact so it doesn't dominate the phone when active */
  .ch-paper-bar{ padding:10px 12px 12px; gap:8px; }
}
.ch-dock .ch-draw-btn svg,.ch-dock .ch-tog svg,.ch-dock .ch-drawgrp__btn svg{width:18px;height:18px;display:block}
.ch-drawgrp{position:relative;display:flex}
.ch-dock .ch-drawgrp__btn{width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--surface-3,#1e2126);border:1px solid var(--border);border-radius:7px;color:var(--text-secondary);cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.ch-dock .ch-drawgrp__btn:hover{border-color:var(--border-2,#3a3d44);color:var(--text-primary)}
.ch-dock .ch-drawgrp__btn.active{background:rgba(0,229,192,.14);border-color:rgba(0,229,192,.5);color:var(--accent,#00e5c0)}
.ch-drawmenu{position:absolute;left:calc(100% + 8px);top:0;display:none;flex-direction:column;gap:5px;padding:6px;background:var(--surface-2);border:1px solid var(--border-2);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:60}
.ch-drawmenu.is-open{display:flex}
.ch-drawmenu__sep{align-self:stretch;height:1px;background:var(--border);margin:2px 3px}
/* Mobile: keep the fold-out, but the dock's overflow-x:auto clips an absolute
   child — so when open, promote it to a FIXED popover (JS sets `top` just under
   the pencil button; see chPositionDrawMenu) that floats over the chart and is
   fully tappable. Declared AFTER the base .ch-drawmenu rules on purpose — media
   queries don't add specificity, so this must come later in source to win. */
@media (max-width:1024px){
  .ch-drawmenu.is-open{
    position:fixed; left:8px; right:8px; top:60px;   /* top overridden by JS */
    flex-direction:row; flex-wrap:wrap; gap:6px;
    max-height:60vh; overflow-y:auto; z-index:1000;
  }
  .ch-drawmenu__sep{ display:none; }
}
.ch-dock .ch-draw-btn.ch-dock__home:not(.active){background:rgba(0,229,192,.07);border-color:rgba(0,229,192,.32)}
.ch-dock__bottom{margin-top:auto}
.ch-dock__trade{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px}
.ch-dock .ch-ct-btn{font-size:.92rem;border-color:rgba(38,166,154,.5);color:#26a69a}
.ch-dock .ch-ct-btn.active{background:rgba(38,166,154,.18);border-color:#26a69a;color:#26a69a}
@media(max-width:1024px){ .ch-dock__trade{margin-top:0;margin-left:auto;flex-direction:row} }
.ch-tip{position:fixed;transform:translateY(-50%);background:var(--surface-2);color:var(--text-secondary);border:1px solid var(--border-2);padding:6px 10px;border-radius:8px;font-size:.72rem;font-weight:500;line-height:1.4;max-width:230px;white-space:normal;z-index:9999;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.ch-tip__name{color:var(--accent,#00e5c0);font-weight:600}
.ch-tip__hint{color:var(--text-muted)}
.ch-mbar{ display:none; }
.ch-ohlc-ovl{ display:none; }
/* Full toolbar stays on ONE line above the compact breakpoint; if space runs out we go
   compact (<=1024px) instead of wrapping Share/List-publicly onto a second line. */
.ch-controls-row{ flex-wrap:nowrap; }
.ch-type-tabs{ flex-wrap:nowrap; }
@media (max-width:1024px){
  .ch-controls-card{ display:none !important; }
  .ch-head-meta{ display:none !important; }
  .ch-type-tabs{ display:none !important; }  /* remove empty header strip on mobile */
  .ch-mbar{ display:flex; align-items:center; gap:6px; padding:7px 8px; background:var(--surface-2,#151a21); border-bottom:1px solid var(--border,#232a33); }
  .ch-mbar__sym{ flex:0 0 auto; display:flex; align-items:center; gap:5px; padding:6px 9px; border-radius:9px; background:var(--surface,#10151b); border:1px solid var(--border,#232a33); color:var(--text-primary,#e7ebf2); font-weight:700; font-size:.84rem; }
  .ch-mbar__chev{ color:var(--text-muted,#8a93a2); font-size:.66rem; }
  .ch-mbar__tfs{ flex:1 1 auto; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .ch-mbar__tfs::-webkit-scrollbar{ display:none; }
  .ch-mtfb{ flex:0 0 auto; padding:6px 11px; border-radius:8px; font-size:.76rem; font-weight:600; color:var(--text-muted,#8a93a2); background:transparent; border:1px solid transparent; }
  .ch-mtfb.on{ color:#04120f; background:var(--accent,#00e5c0); }
  .ch-mbar__ic{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:transparent; border:1px solid transparent; color:var(--text-secondary,#c7cad1); }
  .ch-mbar__ic.on{ color:var(--accent,#00e5c0); background:rgba(0,229,192,.14); }
  .ch-stage > .ch-dock{ display:none; }
  .ch-stage.mtools > .ch-dock{ display:flex; }
  .ch-ohlc-ovl{ display:block; position:absolute; top:7px; left:10px; z-index:4; font-family:var(--font-mono,ui-monospace,monospace); font-size:.64rem; line-height:1.5; color:var(--text-muted,#8a93a2); pointer-events:none; text-shadow:0 1px 3px #000; }
  .ch-ohlc-ovl b{ color:var(--text-primary,#e7ebf2); font-weight:700; }
}
.ch-dock .ch-live-btn{font-size:.92rem;border-color:rgba(245,197,24,.45);color:#f5c518}
.ch-dock .ch-live-btn.active{background:rgba(245,197,24,.18);border-color:#f5c518;color:#f5c518}
.ch-tdock{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;background:var(--surface-2,#151515);border-top:1px solid var(--border,#2a2a2a)}
/* stay closed until the user opens Practice or Live; chTradeSync() clears `hidden`
   on engage and re-adds it on close. (.ch-tdock{display:flex} otherwise beats the
   plain [hidden] attribute, so this higher-specificity rule is required.) */
.ch-tdock[hidden]{display:none}
/* ── Orders table (real-platform style) + dock collapse ───────────────── */
.ch-live-wrap{ display:flex; flex-direction:column; max-height:210px; min-height:0; }
.ch-live-positions{ overflow:auto; min-height:0; }
table.ch-orders{ width:100%; border-collapse:collapse; font-size:.75rem; font-family:var(--font-mono,ui-monospace,monospace); }
table.ch-orders thead th{ position:sticky; top:0; z-index:1; background:var(--surface-2,#16181c); color:var(--text-muted,#8b8f96); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.6rem; text-align:left; padding:7px 12px; border-bottom:1px solid var(--border,#2a2e35); white-space:nowrap; }
table.ch-orders th.num, table.ch-orders td.num{ text-align:right; }
table.ch-orders tbody td{ padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.045); white-space:nowrap; color:var(--text-primary,#e7e9ee); }
table.ch-orders tbody tr:last-child td{ border-bottom:none; }
table.ch-orders tbody tr{ transition:background .12s; }
table.ch-orders tbody tr:hover{ background:rgba(255,255,255,.04); }
.ch-ord__id{ color:var(--text-muted,#8b8f96); }
.ch-ord__sym.is-link{ cursor:pointer; border-bottom:1px dashed rgba(0,229,192,.4); }
.ch-ord__side{ display:inline-block; padding:1px 7px; border-radius:4px; font-weight:700; font-size:.66rem; letter-spacing:.03em; }
.ch-ord__side.is-buy{ background:rgba(38,166,154,.16); color:#26a69a; }
.ch-ord__side.is-sell{ background:rgba(239,83,80,.16); color:#ef5350; }
.ch-ord__ot{ color:var(--text-muted,#8b8f96); font-size:.62rem; margin-left:6px; text-transform:uppercase; letter-spacing:.03em; }
.ch-ord__pnl{ font-weight:700; }
.ch-ord__pnl.is-profit{ color:#26a69a; }
.ch-ord__pnl.is-loss{ color:#ef5350; }
.ch-ord__vol{ color:var(--text-secondary,#c7cad1); }
.ch-ord__sl{ color:#e0736f; }
.ch-ord__tp{ color:#4db6a4; }
/* Tab panes: fixed height, scroll inside — the dock never grows into the chart.
   Sticky table headers stay put while rows scroll. */
#chCtPositions,#chCtOrders,#chCtHistory,#chLiveOpen,#chLivePending,#chLiveHistory{ max-height:230px; overflow:auto; }
/* Docks sit above the chart canvas so their controls are always clickable. */
.ch-tdock{ position:relative; z-index:6; }
/* The chart always stays visible: it keeps a guaranteed share of the card and an
   open trading panel shrinks (and scrolls inside itself) instead of overlapping
   the canvas. Previously the canvas' min-height overflowed its stage and the
   dock, stacked above it, covered the bottom of the chart. */
.ch-stage{ min-height:max(220px,45dvh); }
.ch-stage__main{ overflow:hidden; }
.ch-tdock{ flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.ch-ord__pnl.is-loss{ color:#ef5350; }
.ch-ord__pnl.is-pending{ color:#60a5fa; }
.ch-ord__pnl.is-flat{ color:var(--text-muted,#8b8f96); }
.ch-ord__age{ color:var(--text-muted,#8b8f96); }
.ch-ord__close{ background:transparent; border:1px solid var(--border,#2a2e35); color:var(--text-secondary,#c7cad1); border-radius:5px; padding:3px 11px; font-size:.66rem; cursor:pointer; transition:.12s; }
.ch-ord__close:hover{ border-color:#ef5350; color:#ef5350; background:rgba(239,83,80,.08); }
.ch-orders-empty{ padding:16px 14px; color:var(--text-muted,#8b8f96); font-size:.78rem; }
/* dock minimize / restore */
.ch-tdock__min{ font-size:.9rem; line-height:1; padding-left:9px; padding-right:9px; }
.ch-tdock__restore{ display:none; }
.ch-tdock.is-min > .ch-tdock__panel,.ch-tdock.is-min > .ch-ct-orders{ display:none !important; }
.ch-tdock.is-min > .ch-tdock__restore{ display:flex; align-items:center; gap:9px; width:100%; background:var(--surface-2,#151515); border:none; color:var(--text-secondary,#c7cad1); padding:9px 16px; font-size:.8rem; font-weight:600; cursor:pointer; text-align:left; }
.ch-tdock.is-min > .ch-tdock__restore:hover{ background:rgba(255,255,255,.045); }
.ch-tdock__restore-chev{ color:var(--accent,#00e5c0); font-size:.85rem; }
.ch-tdock__restore .ch-ct-envbadge{ margin-left:0; }
.ch-tdock__restore-info{ color:var(--text-muted,#8b8f96); font-weight:500; font-family:var(--font-mono,ui-monospace,monospace); font-size:.73rem; }
/* In-page confirm — replaces native confirm() which forces the browser OUT of
   fullscreen. Appended into the fullscreen element so fullscreen is preserved. */
.ch-confirm-ov{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:3000; }
.ch-confirm{ background:var(--surface-2,#151515); border:1px solid var(--border,#2a2a2a); border-radius:12px; padding:18px 20px; width:min(320px,90vw); box-shadow:0 20px 50px rgba(0,0,0,.6); }
.ch-confirm p{ margin:0 0 14px; color:var(--text-primary,#eee); font-size:.9rem; line-height:1.4; }
.ch-confirm__btns{ display:flex; gap:8px; justify-content:flex-end; }
.ch-tdock__panel{flex:1 1 340px;min-width:0;border-top:none}
.ch-tdock__panel--practice{border-left:4px solid #ef5350}
#ch-paper-bar.ch-replay-dock{display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;align-items:stretch;padding:0}
#ch-paper-bar.ch-replay-dock[hidden]{display:none}
.ch-replay-dock .ch-ct-entry{flex:0 0 30%;min-width:250px;display:flex;flex-direction:column;gap:8px;padding:16px 20px 18px;box-sizing:border-box}
.ch-replay-dock .ch-ct-orders{flex:1 1 0%;min-width:0}
.ch-replay-dock .ch-ptype{display:flex;gap:8px}
.ch-replay-dock .ch-ptype .ch-pbtn{flex:1}
.ch-replay-dock .ch-ct-actions{display:flex;gap:8px}
.ch-replay-dock .ch-ct-actions .ch-pbtn{flex:1}
.ch-replay-controls{display:flex;gap:6px;align-items:center}
.ch-replay-controls .ch-pbtn{flex:0 0 auto;padding:5px 8px}
.ch-replay-controls .ch-psel{margin-left:auto}
.ch-replay-dock .ch-paper-stats{border-top:none;padding:14px 16px;margin:0}
.ch-ct-envbadge--practice{background:rgba(239,83,80,.16);color:#ef5350}
.ch-tdock__panel--live{border-left:4px solid #f5c518}
#ch-ct-dock{border-left:4px solid #26a69a}
.ch-ct-head{display:flex;align-items:center;gap:8px;height:24px;margin-bottom:8px}
.ch-ct-head--click{cursor:pointer;transition:background .12s}
.ch-ct-head--click:hover{background:rgba(255,255,255,.05)}
/* Header spans the full panel width; the 30/70 body wraps beneath it. */
.ch-replay-dock,.ch-live-dock,.ch-ct-dock{flex-wrap:wrap !important}
.ch-replay-dock>.ch-ct-head,.ch-live-dock>.ch-ct-head,.ch-ct-dock>.ch-ct-head{
  flex:0 0 100%;box-sizing:border-box;width:100%;height:auto;min-height:34px;margin:0;
  padding:11px 20px;border-bottom:1px solid rgba(255,255,255,.07)}
/* the head sat with the entry's top padding above it; now it's its own bar, so
   trim the entry's top padding a touch */
.ch-replay-dock>.ch-ct-entry,.ch-live-dock>.ch-ct-entry{padding-top:14px}
/* collapse hides the whole dock's contents incl. the now-top-level Live head */
.ch-tdock.is-min>.ch-ct-head{display:none !important}
/* No border line between the panel bodies and the dock edges — the dock's own
   top border + each header's bottom border handle separation. Removes the thin
   line that showed just below the Live panel. */
.ch-paper-bar.ch-tdock__panel{border-top:0}
/* When a dock follows a VISIBLE dock (e.g. Demo dock under an open Live dock),
   drop its top border so there's no line between them; a hidden preceding dock
   keeps the following dock's border as the chart separator. */
.ch-tdock:not([hidden]) + .ch-tdock{border-top:0}
.ch-ct-envbadge{margin-left:8px;padding:1px 7px;border-radius:20px;font-size:.58rem;font-weight:800;vertical-align:middle}
.ch-ct-envbadge--live{background:rgba(38,166,154,.16);color:#26a69a}
.ch-ct-envbadge--demo{background:rgba(245,197,24,.16);color:#f5c518}
.ch-ct-envbadge--practice{background:rgba(239,83,80,.16);color:#ef5350}
/* Open/pending trade on the symbol on screen: LIVE (cTrader) / DEMO (Pipnotic demo), same badge colours */
.ch-sym-trades:empty{display:none}
.ch-sym-trades .ch-ct-envbadge{margin-left:6px;cursor:default}
.ch-ct-px{font-family:var(--font-mono,monospace);font-size:.74rem;color:var(--text-muted,#8b8f96)}
.ch-ct-fields{display:flex;gap:6px;margin:4px 0 10px}
.ch-ct-f{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:.58rem;white-space:nowrap;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted,#8b8f96)}
.ch-ct-f input{width:100%;box-sizing:border-box;background:var(--surface-1,#0f0f0f);border:1px solid var(--border,#2a2a2a);border-radius:6px;color:var(--text-primary,#e7e9ee);padding:5px 6px;font-family:var(--font-mono,monospace);font-size:.72rem}
.ch-ct-actions{display:flex;gap:8px}
.ch-ct-actions .ch-pbtn{flex:1}
.ch-ct-dock{flex-wrap:nowrap}
.ch-ct-dock .ch-tdock__panel--ct{flex:0 0 30%;min-width:250px;padding-top:14px}
#ch-live-bar.ch-live-dock{display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;align-items:stretch;padding:0}
#ch-live-bar.ch-live-dock[hidden]{display:none}
.ch-live-dock .ch-ct-entry{flex:0 0 30%;min-width:250px;display:flex;flex-direction:column;gap:8px;padding:16px 20px 18px;box-sizing:border-box}
.ch-ct-entry .ch-ptype,.ch-ct-entry .ch-ct-actions{display:flex;gap:8px}
.ch-ct-entry .ch-ptype .ch-pbtn{flex:1}
.ch-ct-entry > .ch-tdock__switch{width:100%}
.ch-tdock__panel--ct .ch-ptype{display:flex;gap:8px}
.ch-tdock__panel--ct .ch-ptype .ch-pbtn{flex:1}
.ch-ct-entry .ch-ct-actions .ch-pbtn{flex:1}
.ch-live-dock .ch-ct-orders{flex:1 1 0%;min-width:0}
.ch-ct-orders{flex:1 1 0%;min-width:0}
.ch-ct-tabs{display:flex;gap:2px;align-items:flex-end;margin-top:14px;border-bottom:1px solid var(--border,#2a2a2a)}
.ch-ct-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted,#8b8f96);padding:6px 11px;font-size:.78rem;font-weight:600;cursor:pointer;margin-bottom:-1px}
.ch-ct-tab:hover{color:var(--text-primary,#e7e9ee)}
.ch-ct-tab.active{color:var(--text-primary,#e7e9ee);border-bottom-color:#26a69a}
.ch-ct-refresh{margin-left:auto;background:none;border:none;color:var(--text-muted,#8b8f96);cursor:pointer;font-size:1rem;padding:2px 6px}
.ch-ct-refresh:hover{color:var(--text-primary,#e7e9ee)}
.ch-ct-editbox{margin:2px 0 8px;padding:8px 10px;border:1px solid rgba(38,166,154,.5);border-radius:8px;background:rgba(245,166,35,.08);font-size:.74rem;line-height:1.5}
.ch-ct-editbox b{font-family:var(--font-mono,monospace)}
.ch-ct-editrow{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.ch-ct-editbox input{width:150px;background:var(--surface-1,#0f0f0f);border:1px solid var(--border,#2a2a2a);border-radius:6px;color:var(--text-primary,#e7e9ee);padding:5px 7px;font-family:var(--font-mono,monospace);font-size:.76rem}
.ch-orders tbody tr[data-edit]{cursor:pointer}
.ch-orders tbody tr[data-edit]:hover{background:rgba(245,166,35,.07)}
.ch-ct-pos{margin:2px 0 8px;padding:8px 10px;border:1px solid rgba(38,166,154,.35);border-radius:8px;background:rgba(38,166,154,.06);font-size:.74rem;line-height:1.5;color:var(--text-secondary,#c7cad1)}
.ch-ct-pos b{font-family:var(--font-mono,monospace);color:var(--text-primary,#e7e9ee)}
.ch-ct-pos .is-buy{color:#26a69a;font-weight:700}.ch-ct-pos .is-sell{color:#ef5350;font-weight:700}
.ch-ct-bal{margin-top:8px;font-size:.7rem;color:var(--text-muted,#8b8f96);font-family:var(--font-mono,monospace)}
.ch-tdock__panel.is-idle{display:none}
.ch-tdock__panel.is-idle .ch-pbtn:not(.ch-tdock__switch):not(.ch-tdock__x),.ch-tdock__panel.is-idle .ch-ptype,.ch-tdock__panel.is-idle .ch-psel,.ch-tdock__panel.is-idle input{pointer-events:none}
.ch-tdock__panel.is-engaged .ch-tdock__switch{display:none}
.ch-tdock__switch{border-color:currentColor;font-weight:600}
.ch-live-px{font-size:.74rem;font-variant-numeric:tabular-nums;color:var(--text-muted)}
.ch-live-positions{display:flex;flex-direction:column;gap:5px;padding:2px 4px 0}
.ch-live-empty{font-size:.76rem;color:var(--text-muted)}
.ch-live-pos{display:flex;align-items:center;gap:8px;font-size:.74rem;flex-wrap:wrap}
.ch-live-pos__sym{font-weight:600}
.ch-live-pos__sym.is-link{cursor:pointer;color:#60a5fa;text-decoration:underline;text-underline-offset:2px}
.ch-live-pos__dir.is-buy{color:#26a69a}.ch-live-pos__dir.is-sell{color:#ef5350}
.ch-live-pos__lv{color:var(--text-muted);font-variant-numeric:tabular-nums}
.ch-live-pend{font-size:.62rem;padding:.1em .5em;border-radius:99px;background:rgba(251,191,36,.16);color:#fbbf24}
.ch-live-pos{padding:3px 6px;border-radius:6px;transition:background .12s ease}
.ch-live-pos:hover{background:rgba(96,165,250,.12)}
.ch-live-pos.is-elsewhere:hover{background:rgba(255,255,255,.06)}
.ch-live-status{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ch-live-status.is-profit{background:#22c55e}
.ch-live-status.is-loss{background:#f87171}
.ch-live-status.is-pending{background:#3b82f6}
.ch-live-status.is-open{background:#9e9b96}
.ch-live-wrap{display:flex;flex-direction:column;min-height:0}
.ch-live-head{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;padding:4px 6px;font-size:.72rem;font-weight:600;color:var(--text-muted);text-align:left;width:100%}
.ch-live-head:hover{color:var(--text,#e2e8e4)}
.ch-live-head__chev{display:inline-block;transition:transform .15s ease;font-size:.7rem}
.ch-live-wrap.is-collapsed .ch-live-head__chev{transform:rotate(-90deg)}
.ch-live-wrap.is-collapsed .ch-live-positions{display:none}
.ch-live-positions{max-height:168px;overflow-y:auto}
.ch-live-close{margin-left:auto}
.ch-paper-bar{background:var(--surface-2,#151515);border-top:1px solid var(--border,#2a2a2a);padding:16px 20px 18px;display:flex;flex-direction:column;gap:12px;font-size:.8rem;flex-shrink:0}
.ch-paper-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ch-paper-title{font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted,#888);font-size:.7rem;margin-right:4px}
.ch-pbtn{background:var(--surface-3,#1e1e1e);border:1px solid var(--border,#2a2a2a);color:var(--text,#ddd);border-radius:6px;padding:3px 9px;cursor:pointer;font-size:.78rem;line-height:1.4}
.ch-pbtn svg{display:block}
.ch-pbtn:hover{border-color:var(--accent,#00e5c0)}
.ch-pbtn:disabled{opacity:.38;cursor:not-allowed}
.ch-pbtn:disabled:hover{border-color:var(--border,#2a2a2a)}
.ch-pbtn.ch-close{background:#4a1f1f;border-color:#7a3232;color:#ef8a87}
.ch-pbtn.ch-close:disabled{background:var(--surface-3,#1e1e1e);border-color:var(--border,#2a2a2a);color:var(--text,#ddd)}
.ch-pbtn.active{background:var(--accent,#00e5c0);color:#001;border-color:var(--accent,#00e5c0)}
.ch-pbtn.ch-buy{background:#12433a;border-color:#1c6b5a;color:#5fd0c4}
.ch-pbtn.ch-sell{background:#4a1f1f;border-color:#7a3232;color:#ef8a87}
.ch-ptype{display:inline-flex}
.ch-ptype .ch-pbtn{border-radius:0}
.ch-ptype .ch-pbtn:first-child{border-radius:6px 0 0 6px}
.ch-ptype .ch-pbtn:last-child{border-radius:0 6px 6px 0}
.ch-psel{background:var(--surface-3,#1e1e1e);border:1px solid var(--border,#2a2a2a);color:var(--text,#ddd);border-radius:6px;padding:3px 6px}
.ch-paper-pos{color:var(--text-muted,#888);font-variant-numeric:tabular-nums}
.ch-paper-sep{width:1px;height:18px;background:var(--border,#2a2a2a)}
.ch-paper-state{color:var(--text-muted,#aaa);font-size:.75rem}
.ch-paper-stats{display:flex;gap:18px;flex-wrap:wrap;color:var(--text-muted,#888);font-size:.76rem;padding-top:10px;border-top:1px solid var(--border,#2a2a2a)}
.ch-paper-stats b{color:var(--text,#ddd)}
.ch-paper-stats b.pos{color:#26a69a}
.ch-paper-stats b.neg{color:#ef5350}
.ch-practice-btn{width:auto;padding:0 8px;font-size:.72rem}
.ch-psum-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:9999}
.ch-psum{background:var(--surface-1,#0f0f0f);border:1px solid var(--border,#2a2a2a);border-radius:12px;padding:22px 24px;width:min(92vw,440px);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.ch-psum h3{margin:0 0 4px;font-size:1.05rem;color:var(--text,#eee)}
.ch-psum__sub{color:var(--text-muted,#888);font-size:.8rem;margin-bottom:18px}
.ch-psum__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-bottom:20px}
.ch-psum__cell{display:flex;flex-direction:column;gap:3px}
.ch-psum__lbl{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted,#888)}
.ch-psum__val{font-size:1.2rem;font-weight:700;color:var(--text,#eee);font-variant-numeric:tabular-nums}
.ch-psum__val.pos{color:#26a69a}.ch-psum__val.neg{color:#ef5350}
.ch-psum__foot{display:flex;justify-content:flex-end}
.ch-psum__foot .ch-pbtn{padding:6px 16px}