/* Shared color and font tokens are declared in theme.css. */
    * { box-sizing:border-box; }
    html,body { width:100%; min-width:0; height:100%; }
    body { margin:0; overflow:hidden; background-color:var(--bg); color:var(--text); font:12px/1.2 var(--font-ui);
      background-image:none;
      background-repeat:no-repeat,repeat; background-position:top center,0 0; background-size:min(1600px,100vw) 420px,64px 64px;
      text-rendering:auto; -webkit-font-smoothing:antialiased; }
    button,input,select { font:inherit; }
    button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
    button { cursor:pointer; }
    [hidden] { display:none!important; }
    .material-symbols-outlined { font-size:17px; line-height:1; }
    .app { height:100vh; display:grid; grid-template-rows:58px 56px minmax(0,1fr); background:var(--bg); }
    .app-header { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 18px;
      border-bottom:1px solid var(--line); background:var(--panel); box-shadow:0 12px 36px color-mix(in srgb,var(--shadow-color) 22%,transparent); backdrop-filter:blur(18px); }
    .brand { min-width:max-content; display:flex; align-items:center; gap:14px; white-space:nowrap; }
    
    .brand-copy { padding-left:14px; border-left:1px solid var(--line-strong); display:grid; gap:3px; }
    .brand-copy small { color:var(--muted); font:700 9px/1 var(--font-data); letter-spacing:.18em; }
    .brand-copy strong { font-size:16px; line-height:1.1; font-weight:600; letter-spacing:.03em; }
    .live-area { min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:8px; color:var(--text); font:600 10px/1 var(--font-data); }
    .live,.live-area time,.refresh { min-height:31px; border:1px solid var(--line); border-radius:5px; background:var(--raised); }
    .live { padding:0 9px; display:flex; align-items:center; gap:7px; white-space:nowrap; }
    .live-area time { padding:0 9px; display:flex; align-items:center; color:var(--muted); white-space:nowrap; }
    .live-dot { width:7px; height:7px; border-radius:50%; background:var(--warning); box-shadow:0 0 10px color-mix(in srgb,var(--warning) 55%,transparent); }
    .refresh { width:31px; height:31px; padding:0; display:grid; place-items:center; color:var(--muted); }
    .refresh:hover { color:var(--accent-ink); }
    .refresh.is-loading .material-symbols-outlined { animation:spin .8s linear infinite; }
    @keyframes spin { to { transform:rotate(360deg); } }
    .toolbar { display:grid; grid-template-columns:minmax(250px,350px) 138px minmax(258px,1fr) auto; gap:8px; align-items:center;
      padding:10px; border-bottom:1px solid var(--line); background:var(--panel); }
    .control { height:36px; border:1px solid var(--line); border-radius:5px; background:var(--raised); color:var(--text); }
    .search { position:relative; }
    .search .material-symbols-outlined { position:absolute; left:11px; top:10px; color:var(--muted); pointer-events:none; }
    .search input { width:100%; height:36px; padding:0 13px 0 37px; border:1px solid var(--line); border-radius:5px; background:var(--raised); color:var(--text); }
    .search input::placeholder { color:var(--muted); }
    select.control { padding:0 34px 0 13px; appearance:auto; }
    .segments { width:258px; height:36px; justify-self:center; display:grid; grid-template-columns:repeat(3,86px); border:1px solid var(--line); border-radius:5px; overflow:hidden; }
    .segment { border:0; border-right:1px solid var(--line); background:var(--raised); color:var(--muted); font-weight:700; }
    .segment:last-child { border-right:0; }
    .segment[aria-pressed="true"] { background:var(--accent); color:var(--accent-text); }
    .segment[data-mode="anomaly"]:not([aria-pressed="true"]) { color:var(--red); }
    .segment[data-mode="normal"]:not([aria-pressed="true"]) { color:var(--teal); }
    .only-anomaly { justify-self:end; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:10px; white-space:nowrap; }
    .switch { position:relative; width:42px; height:23px; padding:0; border:1px solid var(--line-strong); border-radius:999px; background:var(--raised); }
    .switch::after { content:""; position:absolute; top:3px; left:4px; width:15px; height:15px; border-radius:50%; background:var(--muted); transition:.18s; }
    .switch[aria-pressed="true"] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
    .switch[aria-pressed="true"]::after { left:21px; background:var(--accent); box-shadow:0 0 9px color-mix(in srgb,var(--accent) 40%,transparent); }
    .workspace { min-height:0; display:grid; grid-template-columns:350px minmax(0,1fr) clamp(270px,22vw,292px); gap:10px; padding:10px; }
    .panel { min-width:0; min-height:0; overflow:hidden; border:1px solid var(--line); border-radius:9px; background:var(--panel);
      box-shadow:inset 0 1px 0 color-mix(in srgb,var(--highlight) 2.5%,transparent),0 18px 50px color-mix(in srgb,var(--shadow-color) 26%,transparent); }
    .panel-title { height:48px; padding:0 13px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:var(--panel); }
    .panel-title strong { font-size:12px; font-weight:700; letter-spacing:.02em; }
    .matrix { display:grid; grid-template-rows:48px 56px minmax(0,1fr) 84px; }
    .matrix-head { display:grid; grid-template-columns:64px 70px minmax(82px,1fr) 88px; align-items:center; padding:0 13px; color:var(--muted);
      border-bottom:1px solid var(--line); font-size:10px; }
    .matrix-head span:nth-child(2),.matrix-head span:nth-child(3) { text-align:center; }
    .matrix-head span:last-child { text-align:right; }
    .matrix-body { min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
    .matrix-row { position:relative; width:100%; min-height:70px; display:grid; grid-template-columns:64px 70px minmax(82px,1fr) 88px; align-items:center;
      padding:0 13px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--text); text-align:left; }
    .matrix-row:hover { background:var(--hover); }
    .matrix-row[aria-selected="true"] { background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent),color-mix(in srgb,var(--accent) 2.5%,transparent)); box-shadow:inset 4px 0 0 var(--accent); }
    .matrix-row[aria-selected="true"]::after { content:""; position:absolute; inset:0; border:1px solid color-mix(in srgb,var(--accent) 25%,transparent); pointer-events:none; }
    .product { display:grid; gap:2px; }
    .product b { font:700 16px/1 var(--font-data); }
    .product small { color:var(--muted); font-size:10px; }
    .move { text-align:center; font:600 13px/1 var(--font-data); font-variant-numeric:tabular-nums; }
    .move-up { color:var(--red)!important; }
    .move-down { color:var(--teal-2)!important; }
    .move-flat { color:var(--text)!important; }
    .mini { width:100%; height:34px; display:block; }
    .status { justify-self:end; max-width:82px; color:var(--teal); font-size:11px; font-weight:700; text-align:right; line-height:1.25; }
    .status.anomaly { color:var(--red); }
    .status.inactive { color:var(--orange); }
    .status.near-high { color:var(--red); }
    .status.near-low { color:var(--green); }
    .matrix-pending { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px 16px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.5; }
    .matrix-pending b { color:var(--text); font-size:12px; }
    .matrix-empty { height:100%; display:grid; place-items:center; padding:24px; color:var(--muted); text-align:center; }
    .legend-box { padding:12px 13px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 12px; color:var(--muted); font-size:10px; }
    .legend-item { display:flex; align-items:center; gap:9px; }
    .legend-swatch { width:28px; height:10px; border:1px dashed var(--chart-range); background:var(--chart-range-fill); }
    .legend-dot { width:11px; height:11px; border-radius:50%; background:var(--teal); }
    .legend-diamond { width:10px; height:10px; background:var(--red); transform:rotate(45deg); }
    .legend-orange { width:11px; height:11px; border-radius:50%; background:var(--orange); }
    .chart-panel { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:54px 35px 48px minmax(0,1fr); }
    .chart-panel>* { min-width:0; }
    .chart-heading { min-width:0; padding:0 13px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); background:var(--panel); }
    .chart-heading h2 { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:700; }
    .contracts { min-width:0; max-width:62%; display:flex; justify-content:flex-end; gap:5px; overflow:hidden; }
    .contract-chip { min-height:37px; padding:4px 8px; display:grid; align-content:center; gap:3px; border:1px solid var(--line); border-radius:4px; background:var(--raised);
      color:var(--muted); font-family:var(--font-data); white-space:nowrap; }
    .contract-primary { display:flex; align-items:baseline; gap:5px; line-height:1; }
    .contract-primary span { color:var(--muted); font-size:8px; }
    .contract-primary b { color:var(--text); font-size:10px; font-weight:700; }
    .contract-series-badge { flex:none; padding:2px 4px; border:1px solid color-mix(in srgb,var(--accent-ink) 35%,transparent); border-radius:2px; background:color-mix(in srgb,var(--accent-ink) 10%,transparent); color:var(--accent-ink); font:600 9px/1 var(--font-ui); }
    .contract-secondary { color:var(--muted); font-size:8px; line-height:1; }
    .contract-chip.expiry-risk { border-color:color-mix(in srgb,var(--up) 78%,transparent); background:linear-gradient(90deg,color-mix(in srgb,var(--up) 17%,transparent),color-mix(in srgb,var(--up) 6%,transparent)); box-shadow:inset 3px 0 0 var(--red),0 0 0 1px color-mix(in srgb,var(--up) 8%,transparent); }
    .contract-chip.expiry-risk .contract-primary span,.contract-chip.expiry-risk .contract-secondary { color:var(--up); }
    .contract-chip.expiry-risk .contract-primary b { color:var(--text); }
    .contract-expiry-risk { margin-left:5px; padding:1px 4px; border-radius:2px; background:var(--red); color:var(--status-on); font:700 7px/1 var(--font-ui); }
    .chart-tabs { min-width:0; padding:0 13px; display:flex; align-items:stretch; gap:22px; border-bottom:1px solid var(--line); background:var(--panel); }
    .chart-tab { position:relative; min-width:0; padding:0 2px; border:0; background:transparent; color:var(--muted); font-size:11px; font-weight:700; white-space:nowrap; }
    .chart-tab::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; border-radius:2px 2px 0 0; background:transparent; }
    .chart-tab:hover { color:var(--text); }
    .chart-tab[aria-selected="true"] { color:var(--accent-ink); }
    .chart-tab[aria-selected="true"]::after { background:var(--accent); box-shadow:0 -2px 10px color-mix(in srgb,var(--accent) 24%,transparent); }
    .chart-meta { min-width:0; padding:8px 13px 7px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; border-bottom:1px solid var(--line); }
    .metric-title { min-width:0; font-size:12px; font-weight:600; }
    .deviation-line { color:var(--muted); text-align:right; }
    .deviation-line b { margin-left:5px; color:var(--red); font:700 13px/1 var(--font-data); }
    .chart-legend { min-width:0; grid-column:1/-1; display:flex; align-items:center; gap:14px; overflow-x:auto; overflow-y:hidden; color:var(--muted); font-size:10px; white-space:nowrap; scrollbar-width:none; }
    .chart-legend::-webkit-scrollbar { display:none; }
    .chart-legend span { display:flex; align-items:center; gap:7px; }
    .point-key { position:relative; width:22px; height:12px; }
    .point-key::before,.point-key::after { content:""; position:absolute; top:3px; width:7px; height:7px; border-radius:50%; box-shadow:0 0 0 2px var(--panel); }
    .point-key::before { left:2px; background:var(--red); }
    .point-key::after { right:2px; background:var(--green); }
    .range-key { position:relative; width:22px; height:13px; border-left:1px solid transparent; }
    .range-key::before { content:""; position:absolute; left:7px; top:0; width:8px; height:13px; border-top:1px solid var(--chart-range); border-bottom:1px solid var(--chart-range); background:var(--chart-range-fill); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--chart-range) 45%,transparent); }
    .center-key { width:22px; height:0; border-top:2px solid var(--chart-range-strong); }
    .anomaly-key { width:9px; height:9px; margin:0 6px; border:1px solid var(--warning); transform:rotate(45deg); }
    .chart-viewport { position:relative; min-height:0; overflow:hidden; }
    .chart-stage,.intraday-stage { position:absolute; inset:0; min-height:0; }
    #chart { position:absolute; inset:0; }
    .chart-tooltip { position:absolute; z-index:5; top:10px; left:12px; padding:6px 8px; border:1px solid var(--line); border-radius:3px;
      background:var(--panel); color:var(--muted); font:10px/1.5 var(--font-data); pointer-events:none; }
    .chart-tooltip b { color:var(--text); }
    .deviation-pane-label,.basis-pane-label { position:absolute; z-index:2; left:14px; right:70px; top:61%; color:var(--text); font-size:12px; font-weight:600; pointer-events:none; }
    .basis-pane-label { top:80%; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
    .basis-pane-label span { color:var(--muted); font:11px/1.5 var(--font-data); }
    .chart-empty.chart-empty-main-only,.intraday-empty.chart-empty-main-only { bottom:auto; height:var(--primary-pane-height,60%); }
    .chart-empty { position:absolute; z-index:4; inset:0; display:grid; place-items:center; padding:24px; color:var(--muted); text-align:center;
      background:var(--panel); }
    .inspector { display:grid; grid-template-rows:auto auto 280px 240px; align-self:start; max-height:100%; overflow-y:auto; }
    .verdict { padding:14px 14px 16px; border-bottom:1px solid var(--line); background:var(--panel); }
    .verdict small { display:block; margin-bottom:8px; color:var(--muted); font-size:13px; line-height:1.5; }
    .verdict h2 { margin:0 0 4px; color:var(--red); font-size:21px; line-height:1.15; font-weight:700; }
    .verdict .distance { color:var(--red); font:700 14px/1.4 var(--font-data); }
    .fact { min-height:100px; padding:14px; border-bottom:1px solid var(--line); }
    .fact-label { margin-bottom:8px; color:var(--muted); font-size:13px; line-height:1.5; }
    .fact-value { color:var(--teal); font:700 23px/1.05 var(--font-data); letter-spacing:-.04em; }
    .fact-value small { margin-left:4px; color:inherit; font:600 12px/1.4 var(--font-data); letter-spacing:0; }
    .iv-source { margin-top:9px; color:var(--muted); font:12px/1.5 var(--font-data); overflow-wrap:anywhere; }
    .iv-source code { color:var(--muted); font:inherit; font-variant-numeric:tabular-nums; }
    .iv-source b { color:var(--text); font-weight:500; }
    .move-pair { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); }
    .iv-curve { min-width:0; min-height:0; padding:12px; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:8px; overflow:hidden; border-bottom:1px solid var(--line); background:var(--panel); }
    .iv-curve-head { min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
    .iv-curve-head h3 { margin:0; font-size:14px; line-height:1.5; font-weight:600; }
    .iv-curve-legend { min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12px; line-height:1.5; }
    .iv-curve-legend span { display:flex; align-items:center; gap:5px; }
    .iv-curve-key { width:18px; height:0; border-top:2px solid var(--chart-accent); }
    .iv-curve-key.reference { border-color:var(--teal); border-top-style:dashed; }
    .strategy-open { min-height:30px; padding:0 8px; border:1px solid color-mix(in srgb,var(--accent) 50%,transparent); border-radius:4px; background:color-mix(in srgb,var(--accent) 4%,transparent); color:var(--accent-ink); font-size:12px; font-weight:700; white-space:nowrap; }
    .strategy-open:hover:not(:disabled) { background:color-mix(in srgb,var(--accent) 10%,transparent); }
    .strategy-open:disabled { cursor:not-allowed; border-color:var(--line); color:var(--muted); opacity:.72; }
    #ivCurve { height:100%; min-height:0; display:block; }
    .iv-curve-scope { margin-right:auto; color:var(--muted); }
    .iv-curve-scroll { min-width:0; min-height:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
    .iv-curve-scroll:focus-visible { outline:1px solid var(--accent); outline-offset:-1px; }
    .iv-curve-footer { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
    .iv-curve-hint { color:var(--muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
    #ivCurveLatest { flex:none; margin-left:auto; padding:0; border:0; background:transparent; color:var(--accent-ink); font:inherit; font-size:12px; line-height:1.5; cursor:pointer; }
    .intraday-chart-meta { min-width:0; padding:7px 13px 6px; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:17px 18px; gap:0 14px; border-bottom:1px solid var(--line); }
    .intraday-chart-meta .metric-title { align-self:center; }
    .intraday-legend { min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:9px; overflow:hidden; color:var(--muted); font-size:9px; white-space:nowrap; }
    .intraday-legend span { min-width:0; display:flex; align-items:center; gap:5px; overflow:hidden; text-overflow:ellipsis; }
    .intraday-key { flex:0 0 auto; width:17px; height:0; border-top:2px solid var(--chart-accent); }
    .intraday-key.next { border-color:var(--teal); }
    .intraday-key.range { height:7px; border:1px dashed var(--chart-range); background:var(--chart-range-fill); }
    .intraday-meta { grid-column:1/-1; overflow:hidden; color:var(--muted); font:8px/18px var(--font-data); text-overflow:ellipsis; white-space:nowrap; }
    #intradayChart { position:absolute; inset:0; }
    .intraday-tooltip { position:absolute; z-index:3; top:10px; left:12px; padding:6px 8px; border:1px solid var(--line); border-radius:3px; background:var(--panel); color:var(--muted); font:10px/1.5 var(--font-data); pointer-events:none; }
    .intraday-tooltip b { color:var(--text); }
    .intraday-tooltip .front { color:var(--accent-ink); }
    .intraday-tooltip .next { color:var(--teal); }
    .intraday-empty { position:absolute; z-index:2; inset:0; display:grid; place-items:center; padding:24px; color:var(--muted); font-size:12px; text-align:center; background:var(--panel); }
    .toast { position:fixed; z-index:200; left:50%; bottom:28px; max-width:440px; padding:10px 14px; transform:translateX(-50%); border:1px solid color-mix(in srgb,var(--up) 40%,transparent);
      border-radius:4px; background:var(--up-soft); color:var(--up); box-shadow:0 16px 50px color-mix(in srgb,var(--shadow-color) 73.3%,transparent); }
    dialog { width:min(660px,calc(100vw - 32px)); padding:0; border:1px solid var(--line-strong); border-radius:5px; background:var(--panel); color:var(--text); box-shadow:0 30px 100px color-mix(in srgb,var(--shadow-color) 93.3%,transparent); }
    dialog::backdrop { background:var(--panel); backdrop-filter:blur(4px); }
    .dialog-head { height:58px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
    .dialog-head strong { font-size:16px; }
    .dialog-close { width:32px; height:32px; display:grid; place-items:center; border:0; background:transparent; color:var(--muted); }
    .strategy-dialog { width:min(1440px,calc(100vw - 36px)); max-height:calc(100vh - 36px); border-radius:7px; }
    .strategy-dialog .dialog-head { height:62px; }
    .strategy-dialog-title { min-width:0; }
    .strategy-dialog-title strong { font-size:23px; }
    .strategy-dialog-body { max-height:calc(100vh - 110px); padding:0 20px 20px; overflow:auto; }
    .strategy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .strategy-column { min-width:0; padding:0 18px 4px 0; }
    .strategy-column+.strategy-column { padding-right:0; padding-left:18px; border-left:1px solid var(--line); }
    .strategy-column-title { height:56px; margin:0; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-size:22px; font-weight:700; }
    .strategy-method { min-width:0; padding:16px 0 14px; border-bottom:1px solid var(--line); overflow:auto; }
    .strategy-method:last-child { border-bottom:0; }
    .strategy-method-head { min-width:440px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .strategy-method-head b { font-size:16px; }
    .strategy-method-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
    .strategy-export { background:transparent; cursor:pointer; }
    .strategy-export:disabled { opacity:.4; cursor:not-allowed; }
    .strategy-premium { display:flex; align-items:baseline; gap:7px; color:var(--muted); white-space:nowrap; }
    .strategy-premium small { font-size:10px; }
    .strategy-premium b { color:var(--text); font:700 12px/1 var(--font-data); }
    .strategy-premium.credit b { color:var(--green); }
    .strategy-premium.debit b { color:var(--red); }
    .strategy-premium.invalid b { color:var(--orange); }
    .strategy-builder-link { height:24px; padding:0 8px; display:inline-flex; align-items:center; gap:4px; border:1px solid color-mix(in srgb,var(--accent) 48%,transparent); border-radius:3px; color:var(--accent-ink); font:700 10px/1 var(--font-ui); text-decoration:none; white-space:nowrap; }
    .strategy-builder-link:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); }
    .strategy-builder-link:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
    .strategy-table { min-width:650px; font:11px/1.2 var(--font-data); }
    .strategy-leg-head,.strategy-leg { display:grid; grid-template-columns:28px minmax(104px,1.5fr) minmax(102px,1.3fr) minmax(46px,.7fr) minmax(40px,.7fr) minmax(40px,.7fr) minmax(42px,.7fr) minmax(52px,.8fr) minmax(52px,.8fr) minmax(66px,1fr); align-items:center; column-gap:4px; }
    .strategy-leg-head { height:28px; color:var(--muted); border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:9px; }
    .strategy-leg-head span:not(:nth-child(2)),.strategy-leg span:not(:nth-child(2)) { text-align:right; }
    .strategy-leg { min-height:42px; color:var(--muted); border-bottom:1px solid var(--line); }
    .strategy-leg-head span,.strategy-leg span { white-space:nowrap; }
    .strategy-leg strong { min-width:0; overflow:hidden; color:var(--text); font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
    .strategy-action { font-style:normal; font-weight:700; text-align:left!important; }
    .strategy-action.buy { color:var(--red); }
    .strategy-action.sell { color:var(--green); }
    .strategy-action.watch { color:var(--orange); }
    .strategy-cash-title { min-width:440px; margin-top:10px; padding-top:8px; border-top:1px solid var(--line); color:var(--muted); font:700 10px/1 var(--font-ui); }
    .strategy-totals { min-width:440px; min-height:58px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; color:var(--muted); font:10px/1 var(--font-data); }
    .strategy-totals span { min-width:0; padding:8px 5px 6px; display:grid; align-content:center; justify-items:center; gap:5px; border-left:1px solid var(--line); text-align:center; }
    .strategy-totals span:first-child { border-left:0; }
    .strategy-totals small { overflow:hidden; color:var(--muted); font:8px/1 var(--font-ui); text-overflow:ellipsis; white-space:nowrap; }
    .strategy-totals em { color:var(--muted); font:7px/1 var(--font-ui); font-style:normal; white-space:nowrap; }
    .strategy-totals b { max-width:100%; overflow:hidden; color:var(--text); font-size:11px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
    .strategy-totals b.positive { color:var(--red); }
    .strategy-totals b.negative { color:var(--green); }
    .strategy-empty { min-height:260px; grid-column:1/-1; display:grid; place-items:center; color:var(--muted); font-size:12px; }
    .strategy-disclaimer { margin:6px 0 0; padding:13px 2px 0; border-top:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.65; text-align:center; }
    
    @media(max-width:1240px){.workspace{grid-template-columns:330px minmax(0,1fr) 260px}.matrix-row,.matrix-head{grid-template-columns:60px 66px minmax(76px,1fr) 84px;padding-left:12px;padding-right:12px}.toolbar{grid-template-columns:minmax(230px,1fr) 132px minmax(258px,auto) auto}}
    @media(max-width:1100px){
      html,body{height:auto}.app{height:auto;min-height:100vh;grid-template-rows:58px 56px auto}body{overflow:auto}
      .toolbar{grid-template-columns:minmax(210px,1fr) 126px minmax(258px,auto) auto}
      .workspace{min-height:0;grid-template-columns:330px minmax(0,1fr);grid-template-rows:690px auto}
      .matrix,.chart-panel{height:690px}.inspector{grid-column:1/-1;height:auto;grid-template-columns:1fr 2fr 1fr;grid-template-rows:minmax(200px,auto) 280px 240px}
      .inspector>.verdict,.inspector>.move-pair{border-right:1px solid var(--line)}.inspector>.move-pair{grid-column:2/4}
      .move-pair{grid-template-columns:repeat(2,minmax(0,1fr))}.move-pair>.fact{height:auto}.move-pair>.fact:first-child{border-right:1px solid var(--line)}
      .iv-curve{grid-column:1/-1;grid-row:2}
    }
    @media(max-width:1400px){
      .strategy-grid{grid-template-columns:1fr}
      .strategy-column{padding-right:0}
      .strategy-column+.strategy-column{padding-left:0;border-top:1px solid var(--line);border-left:0}
    }
    @media(max-width:900px){
      .app{grid-template-rows:58px auto auto}.toolbar{grid-template-columns:minmax(0,1fr) 132px;padding:10px}
      .search,.segments,.only-anomaly{grid-column:1/-1}.segments{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}.only-anomaly{justify-self:end}
      .workspace{min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:590px 640px auto}
      .matrix{height:590px}.chart-panel{height:640px}.inspector{grid-column:auto;height:auto;grid-template-columns:1fr;grid-template-rows:auto auto 280px 240px}
      .inspector>.verdict,.inspector>.move-pair{border-right:0}.inspector>.move-pair{grid-column:auto}.move-pair{grid-template-columns:1fr}.move-pair>.fact{height:auto}.move-pair>.fact:first-child{border-right:0}.iv-curve{grid-column:auto;grid-row:auto;border-right:0}
    }
    @media(max-width:520px){
      .app{grid-template-rows:76px auto auto}.app-header{min-height:76px;padding:8px 10px;flex-direction:column;align-items:stretch;justify-content:center;gap:7px}.brand{gap:9px}.brand-word{font-size:17px}.brand-copy{padding-left:9px}.brand-copy small{display:none}.brand-copy strong{font-size:13px}.live-area{justify-content:stretch;gap:5px}.live,.refresh{min-height:24px}.live{min-width:0;flex:1;padding:0 7px;font-size:8px;overflow:hidden}.live span{overflow:hidden;text-overflow:ellipsis}.live-area time{display:none}.refresh{width:26px;height:24px}
      .workspace{grid-template-rows:590px 640px auto;padding:7px}.panel-title{padding:0 11px}
      .matrix-row,.matrix-head{grid-template-columns:56px 58px minmax(64px,1fr) 76px;gap:3px;padding-left:8px;padding-right:8px}.matrix-row{min-height:68px}.status{max-width:74px;font-size:10px}.legend-box{padding-left:11px;padding-right:11px;gap:8px}
      .chart-panel{grid-template-rows:auto 35px 48px minmax(0,1fr)}.chart-heading{min-height:74px;padding:8px 11px;display:grid;align-content:center}.contracts{max-width:100%;overflow-x:auto}.contract-chip{padding:4px 7px}.chart-tabs,.chart-meta,.intraday-chart-meta{padding-left:11px;padding-right:11px}.fact-value{font-size:21px}
      dialog{width:calc(100vw - 20px)}
      .strategy-dialog .dialog-head{height:58px;min-height:58px;padding:0 14px}.strategy-dialog-title strong{font-size:17px}.strategy-dialog-body{padding:0 14px 14px}.strategy-grid{grid-template-columns:1fr}.strategy-column{padding-right:0}.strategy-column+.strategy-column{padding-left:0;border-top:1px solid var(--line);border-left:0}.strategy-column-title{height:46px;font-size:17px}
    }
    .toolbar { grid-template-columns:minmax(180px,1fr) auto; }
    .expiry-filter { display:flex; align-items:center; gap:7px; height:36px; padding:0 10px; border:1px solid var(--line); border-radius:5px; color:var(--muted); font-size:11px; white-space:nowrap; }
    .expiry-filter input { width:54px; min-width:0; padding:5px; border:1px solid var(--line-strong); border-radius:4px; background:var(--panel); color:var(--text); font:11px var(--font-data); }
    @media(max-width:700px){.toolbar{grid-template-columns:minmax(0,1fr) auto}.toolbar .search{grid-column:1/-1}.toolbar .only-anomaly{grid-column:auto}.expiry-filter{justify-self:start}}
    .matrix-row,.matrix-head { grid-template-columns:48px 70px minmax(44px,1fr) 40px 66px; gap:3px; }
    .matrix-head span:nth-child(4),.expiry-days { text-align:center; }
    .expiry-days { color:var(--muted); font:11px var(--font-data); }
    .expiry-days.expiry-soon { color:var(--red); font-weight:700; }
    .matrix-row .product { min-width:0; }
    .matrix-row .product small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .matrix-row .move { font-size:12px; }
    @media(max-width:700px){.matrix-row,.matrix-head{grid-template-columns:46px 68px minmax(38px,1fr) 36px 64px}.matrix-row .status{font-size:10px}}
    @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

    .futures-curve { min-width:0; padding:12px; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:8px; border-bottom:1px solid var(--line); background:var(--panel); }
    .futures-structure,.futures-hint { color:var(--muted); font-size:12px; line-height:1.5; }
    .futures-hint { min-width:0; overflow-wrap:anywhere; }
    .futures-scroll { min-width:0; min-height:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
    #futuresCurve { display:block; height:100%; }
    .inspector.no-futures { grid-template-rows:auto auto 280px; }
    .futures-curve[hidden] { display:none; }
    @media(max-width:1100px) and (min-width:901px) {
      .workspace { grid-template-rows:690px auto; }
      .inspector { height:auto; grid-template-rows:minmax(200px,auto) 280px 240px; }
      .futures-curve { grid-column:1/-1; grid-row:3; }
      .inspector.no-futures { grid-template-rows:minmax(200px,auto) 280px; }
    }
    @media(max-width:900px) {
      .workspace { grid-template-rows:590px 640px auto; }
      .inspector { height:auto; grid-template-rows:auto auto 280px 240px; }
      .futures-curve { grid-column:auto; grid-row:auto; }
      .inspector.no-futures { grid-template-rows:auto auto 280px; }
    }

    .futures-structure { color:var(--teal); font-size:12px; font-weight:600; white-space:nowrap; }

    .toolbar { grid-template-columns:minmax(0,1fr); }
    .classification-filter { min-width:0; display:flex; align-items:center; gap:10px; }
    .classification-modes { flex:none; display:flex; padding:2px; gap:2px; border:1px solid var(--line); border-radius:6px; background:var(--raised); }
    .classification-options { min-width:0; display:flex; gap:4px; overflow-x:auto; scrollbar-width:thin; }
    .classification-mode,.classification-option { flex:none; min-height:27px; padding:0 10px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--muted); font:700 10px var(--font-ui); white-space:nowrap; }
    .classification-mode:hover,.classification-option:hover { color:var(--text); background:var(--hover); }
    .classification-mode[aria-selected="true"] { color:var(--text); border-color:color-mix(in srgb,var(--accent) 28%,transparent); background:var(--soft); }
    .classification-option[aria-pressed="true"] { color:var(--accent-text); border-color:var(--accent); background:var(--accent); }
    .matrix-filters { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; padding:0 8px; }
    .matrix-filters .search { min-width:0; grid-column:1; grid-row:1; }
    .matrix-filters .search input { height:32px; padding-left:29px; font-size:11px; }
    .matrix-filters .search .material-symbols-outlined { left:8px; top:8px; }
    .matrix-filters .expiry-filter { grid-column:2; grid-row:1; height:32px; padding:0 6px; gap:4px; font-size:10px; }
    .matrix-filters .expiry-filter input { width:64px; padding:4px; }

    .chart-panel { position:relative; }
    .detail-feedback { position:absolute; right:12px; bottom:12px; z-index:5; display:flex; gap:8px; align-items:center; }
    .detail-feedback span,.detail-feedback button { padding:8px 12px; border:1px solid var(--line); border-radius:5px; background:var(--panel); color:var(--muted); font:inherit; font-size:12px; }
    .detail-feedback button { cursor:pointer; color:var(--accent-ink); }

    .futures-legend { justify-content:flex-end; }