@import url('./danger-actions.css');
/* Selected production design only. Experiments remain in the frozen mockup. */
:root{--shell:#1d1d1f;--tray:#161618;--chart:#232325;--text:#eeeef0;--subtle:#97979b;--edge:#363638;--selected:#29292b;--positive:#77cbb0;--negative:#ed9486;--outline:color-mix(in srgb,var(--text) 11%,var(--tray));--accent:#b8b8b6;--surface:var(--shell);--bg:var(--tray);--muted:var(--subtle);--line:var(--edge);color:var(--text);background:var(--tray);color-scheme:dark}
body.classic{--shell:#b3b5b3;--tray:#929593;--chart:#b8bbb9;--text:#252925;--subtle:#535953;--edge:#999d99;--selected:#929593;--positive:#21674f;--negative:#974936;--outline:color-mix(in srgb,#eef0ec 25%,var(--tray));--accent:#303b33;color-scheme:light}
body{--sidebar-width:228px;--risk-drawer-width:min(420px,var(--chart-area-width,calc(100vw - 32px)));padding:8px;background:#181818;color:var(--text)}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
.dashboard-app{position:relative;height:100%;min-height:0;overflow:hidden;border:1px solid var(--edge);border-radius:12px;background:var(--shell);isolation:isolate}
.dashboard-surface{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:0 4px 1px;background:var(--shell);min-width:0}
.dashboard-app .fixed-brand{position:absolute;top:14px;left:13px;z-index:32;gap:14px;white-space:nowrap;color:var(--text)}
.fixed-brand strong{display:flex;align-items:baseline;gap:6px;font-size:18px;font-weight:700;letter-spacing:1.7px}
.fixed-brand strong span{display:inline;font-size:12px;letter-spacing:1.4px;font-weight:500;margin:0;color:inherit}
.fixed-brand .brand-mark{width:25px;height:28px;gap:3px;color:var(--text)}
.fixed-brand .brand-mark i{width:6px;height:16px;background:currentColor}
.fixed-brand .brand-mark i:before{background:currentColor;top:-4px;bottom:-4px}
.fixed-brand .brand-mark i:nth-child(2){height:24px}.fixed-brand .brand-mark i:nth-child(3){height:13px}
.dashboard-app .app-header{position:relative;z-index:24;height:auto;min-height:56px;flex:none;padding:4px 9px 4px 170px;border:0;background:var(--shell);justify-content:flex-end}
.dashboard-app .workspace-controls{gap:7px;flex-wrap:nowrap;min-width:0}
.dashboard-app .workspace-bar{display:none}
.dashboard-app .text-button{color:var(--subtle);font-size:12px;padding:6px 9px;border-radius:5px}
@media(hover:hover) and (pointer:fine){.dashboard-app .text-button:hover{background:var(--selected);color:var(--text)}}
.workspace-controls>button{height:32px;flex:none}
.workspace-controls>button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dashboard-app .account-chip{border:1px solid var(--edge);color:var(--text);gap:8px;font-size:12px}
.account-mode{font-size:11px;color:var(--subtle)}.account-dot{width:5px;height:5px;flex:none;border-radius:50%;background:var(--subtle)}
.account-chip[data-connected=true] .account-dot{background:var(--positive)}
.dashboard-app #grid-button{border:1px solid var(--edge);color:var(--subtle);background:none;gap:7px}
.dashboard-app #copier-button{width:32px;min-width:32px;height:32px;border:1px solid var(--edge);border-radius:5px;color:var(--subtle);font-size:18px;padding:0;background:none}
@media(hover:hover) and (pointer:fine){.dashboard-app #copier-button:hover{background:var(--selected);color:var(--text)}}
.dashboard-app #theme-button{width:32px;padding:0;display:grid;place-items:center;border:0}
/* Left drawer mirrors the right drawer: fixed clipping host, moving content. */
.dashboard-sidebar{position:fixed;top:var(--chart-area-top,76px);left:var(--chart-area-left,13px);width:var(--sidebar-width);height:var(--chart-area-height,calc(100dvh - 112px));padding:0;background:transparent;pointer-events:none;overflow:hidden;border-radius:16px 0 0 16px;z-index:30;isolation:isolate}
.sidebar-surface{display:flex;flex-direction:column;align-items:stretch;gap:14px;height:100%;width:100%;padding:6px;background:var(--shell);pointer-events:auto;transform:translate3d(-100%,0,0);will-change:transform;transition:transform 240ms cubic-bezier(.22,1,.36,1)}
.dashboard-sidebar.is-open .sidebar-surface{transform:translate3d(0,0,0)}
.sidebar-edge{display:block;position:fixed;top:calc(var(--chart-area-top,0px) + var(--chart-area-height,100dvh)/2 - 32px);left:var(--chart-area-left,0px);width:24px;height:64px;padding:0;z-index:60;border:0;border-radius:0 8px 8px 0;background:var(--shell);color:var(--subtle);touch-action:manipulation}
.sidebar-edge[hidden]{display:none}.sidebar-edge::before{content:"";position:absolute;left:5px;top:calc(50% - 24px);width:3px;height:48px;border-radius:3px;background:var(--subtle);opacity:.55}
.sidebar-edge[aria-expanded=true]{width:8px;background:none}.sidebar-edge[aria-expanded=true]::before{opacity:0}
.sidebar-edge:focus-visible{outline:1px solid var(--text);outline-offset:-2px}
@media(hover:hover) and (pointer:fine) and (min-width:900px){.sidebar-edge{top:var(--chart-area-top,0px);left:0;width:8px;height:var(--chart-area-height,100dvh);border-radius:0;background:none}.sidebar-edge::before{left:1px;opacity:.3}}
.dashboard-sidebar .station-navigation{padding:0;height:auto;min-height:0;flex:none;position:static;background:none;display:block;z-index:auto}
.dashboard-sidebar .station-tab-bar{display:flex;flex-direction:column;gap:8px;padding:0;border:0;width:100%;border-radius:0;background:none;box-shadow:none}
.dashboard-sidebar :is(.station-navigation button,.rail-button,.sidebar-settings){display:flex;position:relative;flex:none;flex-direction:row;align-items:center;justify-content:center;gap:0;width:216px;height:40px;min-height:40px;padding:0;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--subtle);font-size:13px;line-height:1.3;white-space:nowrap;transition:background 180ms,color 180ms,box-shadow 180ms}
.dashboard-sidebar :is(.station-navigation button,.rail-button,.sidebar-settings):is(.selected,.active){background:var(--selected);color:var(--text);box-shadow:inset 0 1px 0 #ffffff0c,0 3px 5px #00000030}
@media(hover:hover) and (pointer:fine){.dashboard-sidebar :is(.station-navigation button,.rail-button,.sidebar-settings):hover{background:var(--selected);color:var(--text);box-shadow:inset 0 1px 0 #ffffff0c,0 3px 5px #00000030}}
.dashboard-sidebar.is-open :is(.station-navigation button,.rail-button,.sidebar-settings){width:216px}
.dashboard-sidebar svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dashboard-sidebar .sidebar-label{position:absolute;left:43px;width:163px;overflow:hidden;text-overflow:ellipsis;text-align:left;opacity:1;white-space:nowrap;pointer-events:none;transform:translateZ(0);transition:opacity 90ms}
.dashboard-sidebar.is-open .sidebar-label{opacity:1}
.dashboard-sidebar :is(.station-navigation button,.rail-button,.sidebar-settings)>:is(svg,.tool-mark){position:absolute;left:7.5px;top:50%;transform:translateY(-50%)}
.dashboard-sidebar :is(svg,.tool-mark){transition:transform 240ms cubic-bezier(.2,.8,.2,1)}
.dashboard-sidebar.is-open :is(button.selected,button.active)>:is(svg,.tool-mark){transform:translate(2px,-50%)}
@media(hover:hover) and (pointer:fine){.dashboard-sidebar.is-open button:hover>:is(svg,.tool-mark){transform:translate(2px,-50%)}}
.dashboard-sidebar .tool-mark{width:20px;height:24px;display:grid;place-items:center;flex:none;font-size:16px}
.dashboard-sidebar .tool-rail{min-width:0;width:216px;pointer-events:auto;flex:1;min-height:0;gap:8px;padding:0;border:0;background:none;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;align-items:stretch}
.dashboard-sidebar.is-open .tool-rail{clip-path:inset(0)}
.dashboard-sidebar .rail-bottom{display:none}.dashboard-sidebar .rail-separator{width:37px;transition:width 240ms cubic-bezier(.22,1,.36,1);margin:1px 0;background:var(--edge);min-height:1px}
.dashboard-sidebar .sidebar-settings{margin-top:auto}
.classic .dashboard-sidebar :is(.station-navigation button,.rail-button,.sidebar-settings):is(.selected,.active){background:var(--tray);border-color:#59615950;box-shadow:none;color:var(--text)}
@media(hover:hover) and (pointer:fine){.classic .dashboard-sidebar :is(.station-navigation button,.rail-button,.sidebar-settings):hover{background:var(--tray);border-color:#59615950;box-shadow:none;color:var(--text)}}
.classic .dashboard-sidebar :is(button.selected,button.active){border-color:#59615990!important}
.classic .dashboard-sidebar.is-open :is(button.selected,button.active)>:is(svg,.tool-mark){transform:translateY(-50%)}
@media(hover:hover) and (pointer:fine){.classic .dashboard-sidebar.is-open button:hover>:is(svg,.tool-mark){transform:translateY(-50%)}}
.dashboard-more{color:var(--subtle);flex:none;pointer-events:auto;width:37px;transition:width 240ms cubic-bezier(.22,1,.36,1)}
.dashboard-sidebar.is-open :is(.rail-separator,.dashboard-more){width:216px}
.dashboard-more>summary{list-style:none;cursor:pointer;text-align:center;font-size:20px;height:24px;border-radius:5px}.dashboard-more>summary::-webkit-details-marker{display:none}
.dashboard-more-content{position:absolute;left:6px;bottom:36px;width:216px;max-width:calc(100% - 12px);max-height:calc(100% - 48px);overflow:auto;padding:12px;display:grid;gap:8px;background:var(--shell);border:1px solid var(--edge);border-radius:10px;box-shadow:0 8px 28px #0004;z-index:60}
.dashboard-more .global-actions{gap:10px;flex-wrap:wrap}.dashboard-more .demo-label{display:none}
.dashboard-more .status-bar{height:auto;min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:10px 0;border-color:var(--edge);background:none;color:var(--subtle)}
.dashboard-more .status-bar>div{flex-wrap:wrap}.dashboard-more .shortcut-hint{display:none}
.dashboard-more .status-bar a{font-size:10px}.dashboard-more .icon-button{color:var(--text);border-color:var(--edge)}
.station-view{flex:1;min-height:0;overflow:visible;display:flex;flex-direction:column}
.workspace-pages-shell{position:relative;z-index:2;display:flex;flex:none;align-items:flex-start;min-width:0;height:calc(var(--logo-bar-height,66px)/3);padding:0;background:var(--shell);overflow:visible}
.workspace-pages{position:relative;z-index:1;display:flex;flex:1;min-width:0;max-width:100%;flex-wrap:nowrap;align-items:flex-start;justify-content:safe center;gap:14px;height:24px;min-height:24px;padding:3px 12px 0;margin-top:-3px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;background:transparent}
.workspace-pages::-webkit-scrollbar{display:none}
.workspace-pages button{position:relative;z-index:1;flex:0 0 auto;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 16px 2px;margin-top:-1px;border:0;border-radius:0;box-shadow:none;background:none;color:var(--subtle);font-size:12px;line-height:1;font-weight:550;text-transform:uppercase;white-space:nowrap;transition:color 150ms}
@media(hover:hover) and (pointer:fine){.workspace-pages button:hover{color:var(--text);background:none}}.workspace-pages button.selected{color:var(--text);background:none;border:0;font-weight:650}
.workspace-pages button.selected:before{box-sizing:border-box;content:'';position:absolute;inset:0 -4px;z-index:-1;border:0;border-radius:6px 6px 10px 10px;background:var(--tray);pointer-events:none}
/* The tab face joins the tray directly; no protruding rectangular shoulder. */
.workspace-pages button.selected:after{content:none}
.workspace-shell{flex:1;min-height:0;min-width:0}
.chart-drawer-viewport{position:relative;flex:1;min-height:0;min-width:0;overflow:hidden;border-radius:16px;background:var(--shell)}
.chart-scroll-frame{height:100%;width:100%;min-height:0;min-width:0;transform:translate3d(0,0,0);will-change:transform;transition:transform 240ms cubic-bezier(.22,1,.36,1);padding:5px;background:var(--tray);border:1px solid var(--outline);border-radius:16px;overflow:hidden}
/* Preserve the chart dimensions, zoom and two-row snap geometry. The rounded
   right edge of the moving chart well forms the drawer’s two concave joins. */
.sidebar-open .chart-scroll-frame{transform:translate3d(var(--sidebar-width),0,0)}
.risk-drawer-open .chart-scroll-frame{transform:translate3d(calc(-1 * var(--risk-drawer-width)),0,0)}
.chart-grid,.chart-grid.expanded{position:relative;display:grid;height:100%;min-height:0;padding:0;grid-template-columns:repeat(var(--chart-columns,4),minmax(0,1fr));grid-template-rows:none;gap:4px;overflow:auto;overscroll-behavior-y:contain;scrollbar-width:none;scroll-snap-type:y mandatory;touch-action:pan-y}
/* Clip selected-chart shadows to the rounded inner well, not a square corner. */
.chart-grid{border-radius:10px}
.chart-grid::-webkit-scrollbar{display:none}.chart-grid .chart-card{scroll-snap-stop:always;scroll-margin:0}
.chart-grid.expanded .chart-card{display:flex}
.chart-grid .chart-card{--window-tint:var(--chart);--window-header:var(--shell);--window-edge:var(--edge);border-radius:8px;border:1px solid var(--window-edge);box-shadow:none;background:var(--window-header);transition:border-color 150ms}
.chart-grid .chart-card[data-phase]:not([data-phase=normal]){--window-header:color-mix(in srgb,var(--shell) 45%,var(--window-tint));--window-edge:color-mix(in srgb,var(--window-tint) 75%,#77777a)}
.classic .chart-grid .chart-card{--window-header:color-mix(in srgb,var(--shell) 45%,var(--window-tint));--window-edge:color-mix(in srgb,var(--window-tint) 60%,#6c756c)}
/* Approved Galerie / Nur Klick, with one Satin contour. */
.chart-grid{--effect-shadow:#00000070;--effect-glow:#efefef27;--effect-top:#ffffffaa}
.classic .chart-grid{--effect-shadow:#27352e5c;--effect-glow:#ffffff70;--effect-top:#ffffffdf}
#chart-grid .chart-card{position:relative;z-index:0;isolation:isolate;transition:border-color 260ms,box-shadow 260ms}
#chart-grid .chart-card:after{content:'';position:absolute;inset:0;z-index:25;border:1px solid transparent;border-radius:7px;pointer-events:none;opacity:0;background:linear-gradient(135deg,var(--effect-top),transparent 42%,var(--effect-glow)) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;transform:translateY(-2px);transition:opacity 260ms,transform 260ms}
#chart-grid .chart-card.active{z-index:2;border-color:transparent;box-shadow:0 5px 10px var(--effect-shadow)}
#chart-grid .chart-card.active:after{opacity:1;transform:translateY(0)}
/* Same 6% Galerie dimming without filtering every live canvas into an intermediate surface. */
.classic #chart-grid .chart-card:before{content:'';position:absolute;inset:0;z-index:24;pointer-events:none;background:#000;opacity:0;transition:opacity 260ms}
.classic #chart-grid:has(.chart-card.active) .chart-card:not(.active):before{opacity:.06}
@media(prefers-reduced-motion:reduce){#chart-grid .chart-card,#chart-grid .chart-card:after{transition:none!important;transform:none!important}}
.chart-grid .chart-head,.chart-grid.expanded .chart-head{height:28px;min-height:28px;flex:none;padding:0 7px 0 10px;gap:4px;border:0;background:var(--window-header)}
.chart-head .symbol-block{flex:0 1 auto;gap:6px;padding:0;min-width:0;max-width:65%;color:var(--text);border:0;background:none;border-radius:4px;line-height:1}
.chart-head .symbol-name{font-size:12px;font-weight:600;letter-spacing:.2px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.chart-status-dot{display:block;flex:none;width:5px;height:5px;border-radius:50%;background:#b39b60}
.symbol-block[data-status=ready] .chart-status-dot{background:var(--positive)}.symbol-block[data-status=error] .chart-status-dot{background:var(--negative)}
.chart-head-actions{margin-left:auto;gap:4px;flex:none;display:flex;align-items:center}
.chart-head .tf-select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--subtle);font-size:11px;padding:3px;text-align:center;border-radius:4px;max-width:42px}
.tf-select option{background:var(--shell);color:var(--text)}
.chart-head .expand-button,.chart-head .rotate-button,.chart-head .chart-tools-toggle{display:grid;place-items:center;width:25px;height:25px;color:var(--subtle);background:none;font-size:16px;border:0;padding:0;border-radius:4px}
.chart-head :is(.expand-button,.rotate-button,.chart-tools-toggle) svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.chart-head .rotate-button,.chart-tools-toggle{display:none!important}
.chart-quick-actions{display:none!important}
.chart-quick-actions.is-open{position:absolute;right:5px;top:28px;padding:5px;background:var(--window-header);border:1px solid var(--window-edge);border-radius:5px;z-index:30;display:flex!important}
#chart-grid .chart-key{background:color-mix(in srgb,var(--window-header) 90%,var(--text));color:var(--subtle);border:1px solid #ffffff10;width:28px;height:30px;padding:0;border-radius:3px;box-shadow:none}
@media(hover:hover) and (pointer:fine){#chart-grid .chart-key:hover:not(:disabled):not([aria-pressed=true]){background:color-mix(in srgb,var(--window-header) 80%,var(--text));border-color:#ffffff25;color:var(--text)}}
#chart-grid .chart-key[aria-pressed=true]{background:color-mix(in srgb,var(--window-header) 70%,var(--text));border-color:#ffffff40;color:var(--text);box-shadow:inset 0 1px 2px #0003}
.classic #chart-grid .chart-key{background:color-mix(in srgb,var(--window-header) 94%,#fff);border-color:#505b5020;box-shadow:inset 0 1px 0 #ffffff20}
@media(hover:hover) and (pointer:fine){.classic #chart-grid .chart-key:hover:not(:disabled):not([aria-pressed=true]){background:color-mix(in srgb,var(--window-header) 78%,#fff);border-color:#505b5050;color:var(--text)}}
.classic #chart-grid .chart-key[aria-pressed=true]{background:color-mix(in srgb,var(--window-header) 74%,#fff);border-color:#505b5070;color:#182219;box-shadow:inset 0 1px 2px #26332622}
.chart-viewport{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--window-tint);isolation:isolate}
.chart-viewport{--chart-ui-shadow:linear-gradient(#00000047,#0000001f 28%,#00000009 65%,transparent)}
.chart-viewport:after{content:'';position:absolute;inset:0 0 auto;height:14px;background:var(--chart-ui-shadow);pointer-events:none;z-index:12}
.classic .chart-viewport{--chart-ui-shadow:linear-gradient(#19201a2e,#19201a12 28%,#19201a05 65%,transparent)}
.chart-body{position:absolute;inset:0;min-height:0;flex:none;width:100%;height:100%;background:var(--window-tint);touch-action:pan-y}
.chart-card.is-rotated .chart-body{inset:auto;left:50%;top:50%;width:var(--rotated-width);height:var(--rotated-height);transform:translate(-50%,-50%) rotate(var(--chart-turn,90deg))}
.chart-grid .chart-watermark,.chart-grid.expanded .chart-watermark{font-size:clamp(100px,49cqw,340px);font-weight:500;letter-spacing:-.06em;color:var(--text);opacity:.065}
.classic .chart-grid .chart-watermark{color:#303630;opacity:.095}
.chart-grid .chart-watermark.loading-instrument,.classic .chart-grid .chart-watermark.loading-instrument{padding:16px;font-weight:650;letter-spacing:.025em;white-space:nowrap;opacity:.6;color:var(--text);overflow:hidden}
.chart-grid .chart-card .kraft-panel,.chart-grid.expanded .chart-card .kraft-panel{--u:min(1px,calc((100cqw - 4px)/494));--control-font:clamp(6px,2.05cqw,11px);height:clamp(36px,calc(13cqw - 4px),58px);min-height:clamp(36px,calc(13cqw - 4px),58px);padding:2px 1px 4px;border:0;box-shadow:none;background:var(--window-header);align-items:stretch;grid-template-columns:calc(75 * var(--u)) minmax(0,1fr) minmax(0,calc(332 * var(--u))) minmax(0,1fr) calc(75 * var(--u))}
#chart-grid .native-button-band :is(.panel-button,.trade-button,.hq-button){border:1px solid #ffffff10;border-radius:3px;background:color-mix(in srgb,var(--window-header) 90%,var(--text));color:var(--subtle);box-shadow:none;transition:background 120ms,border-color 120ms,color 120ms}
@media(hover:hover) and (pointer:fine){#chart-grid .native-button-band :is(.panel-button,.trade-button,.hq-button):hover:not(:disabled):not(.on):not(.awaiting){background:color-mix(in srgb,var(--window-header) 80%,var(--text));border-color:#ffffff25;color:var(--text)}}
#chart-grid .native-button-band :is(.panel-button,.trade-button,.hq-button).on,#chart-grid .native-button-band .trade-button.accepted:disabled{background:color-mix(in srgb,var(--window-header) 70%,var(--text));border-color:#ffffff40;box-shadow:inset 0 1px 2px #0003;color:var(--text);font-weight:750}
#chart-grid .native-button-band .trade-button.awaiting{color:var(--text);background:color-mix(in srgb,var(--window-header) 80%,var(--text));border-color:var(--window-edge)}
#chart-grid .native-button-band .rr-button:disabled{color:var(--subtle);background:color-mix(in srgb,var(--window-header) 90%,var(--text))}
/* Match the approved mockup's continuous nine-column, three-row matrix.
   Existing button nodes, state attributes and action handlers stay intact. */
.chart-grid .native-button-band{height:100%;grid-template-columns:.23fr 1fr 1.04fr .76fr .46fr .76fr 1.04fr 1fr .23fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:2px}
.native-button-band :is(.panel-stack,.panel-center,.trade-group,.center-bottom){display:contents}
#chart-grid .native-button-band :is(.panel-button,.trade-button,.hq-button){width:auto;min-width:0;min-height:0;padding:0;font:600 var(--control-font)/1.05 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:flex;align-items:center;justify-content:center}
#chart-grid .native-button-band .hq-button[hidden]{display:none}
.native-button-band [data-action=risk-down]{grid-area:1/1/4/2}
.native-button-band [data-action=risk-up]{grid-area:1/9/4/10}
.native-button-band :is([data-flag=LEX],[data-flag=MWR],[data-flag=ISEX]){grid-column:2}
.native-button-band :is([data-flag=I1610],[data-flag=I2610],[data-flag=BOS]){grid-column:3}
.native-button-band :is([data-flag=R100],[data-flag=R160],[data-flag=R260]){grid-column:7}
.native-button-band :is([data-flag=MAC],[data-flag=FVG],[data-flag=LQG]){grid-column:8}
.native-button-band :is([data-flag=LEX],[data-flag=I1610],[data-flag=R100],[data-flag=MAC]){grid-row:1}
.native-button-band :is([data-flag=MWR],[data-flag=I2610],[data-flag=R160],[data-flag=FVG]){grid-row:2}
.native-button-band :is([data-flag=ISEX],[data-flag=BOS],[data-flag=R260],[data-flag=LQG]){grid-row:3}
#chart-grid .native-button-band .hq-button{grid-area:1/4/3/5;font-size:calc(var(--control-font) * 1.2)}
#chart-grid .native-button-band .trade-button{grid-area:1/5/3/7;font-size:calc(var(--control-font) * 1.4)}
#chart-grid .native-button-band:has(.hq-button[hidden]) .trade-button{grid-column:4/7}
.native-button-band [data-flag=PWL]{grid-area:3/4/4/5}
.native-button-band [data-action=rr]{grid-area:3/5/4/6}
.native-button-band [data-flag=T260]{grid-area:3/6/4/7}
.chart-grid .chart-card .kraft-panel .panel-side{height:100%}
.chart-grid .chart-card .panel-side{border-color:var(--window-edge);border-radius:3px;background:var(--window-header);color:var(--subtle)}
.chart-grid .panel-side .side-label{background:color-mix(in srgb,var(--window-header) 93%,var(--text));border:0;color:var(--subtle);font-size:calc(10 * var(--u));letter-spacing:calc(.7 * var(--u))}.chart-grid .chart-card .panel-side:active{border-color:var(--window-edge);background:color-mix(in srgb,var(--window-header) 90%,var(--text))}
@media(hover:hover) and (pointer:fine){.chart-grid .chart-card .panel-side:hover{border-color:var(--window-edge);background:color-mix(in srgb,var(--window-header) 90%,var(--text))}}
.classic #chart-grid .native-button-band :is(.panel-button,.trade-button,.hq-button){background:color-mix(in srgb,var(--window-header) 94%,#fff);border-color:#505b5020;box-shadow:inset 0 1px 0 #ffffff20}
@media(hover:hover) and (pointer:fine){.classic #chart-grid .native-button-band :is(.panel-button,.trade-button,.hq-button):hover:not(:disabled):not(.on):not(.awaiting){background:color-mix(in srgb,var(--window-header) 78%,#fff);border-color:#505b5050;color:var(--text)}}
.classic #chart-grid .native-button-band :is(.panel-button,.trade-button,.hq-button).on,.classic #chart-grid .native-button-band .trade-button.accepted:disabled{background:color-mix(in srgb,var(--window-header) 74%,#fff);border-color:#505b5070;box-shadow:inset 0 1px 2px #26332622;color:#182219;font-weight:750}
.positive{color:var(--positive)!important}.negative{color:var(--negative)!important}
.chart-grid .right-panel .panel-value,.chart-grid .right-panel .panel-sub{color:var(--subtle)}
.panel-arrow{fill:currentColor;stroke:currentColor;stroke-width:1.25;color:var(--subtle)}
.swap-body{grid-template-columns:calc(17 * var(--u)) max-content;column-gap:calc(3.5 * var(--u));justify-content:center;padding:calc(2 * var(--u)) 0}
.swap-direction{width:calc(17 * var(--u));height:calc(29.75 * var(--u));grid-row:1/3;stroke-width:.8}
.swap-empty{width:calc(65 * var(--u));justify-content:space-evenly;justify-self:center}.swap-empty .panel-arrow{width:calc(17 * var(--u));height:calc(24.65 * var(--u));stroke-width:.8}
.right-body{justify-content:center;padding:calc(2 * var(--u)) 0;grid-template-columns:max-content}
.metric-row.has-arrow{grid-template-columns:calc(15 * var(--u)) max-content;column-gap:calc(3 * var(--u));justify-content:center}
.metric-row .panel-arrow{width:calc(14.4 * var(--u));height:calc(14.4 * var(--u));stroke-width:1.25}
.swaps-panel[data-direction=both] .swap-body{grid-template-columns:max-content}
.chart-grid .right-panel[data-kind=PnL] .panel-sub{color:var(--subtle)}
.feed-state{display:none!important}
#toast{position:fixed;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0;pointer-events:none}
.chart-status-popover,.grid-choice-menu{position:fixed;z-index:80;width:320px;max-width:calc(100vw - 16px);padding:14px;border:1px solid var(--edge);border-radius:10px;background:var(--shell);color:var(--text);box-shadow:0 10px 28px #0004;font-size:12px;line-height:1.5}
.chart-status-popover{box-sizing:border-box;max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain}
.chart-status-popover strong{display:block;font-size:13px;font-weight:600}.chart-status-popover p{margin:8px 0 0;color:var(--subtle)}
.chart-status-popover .status-notice{border-top:1px solid var(--edge);padding-top:8px}.status-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.status-actions button,.grid-choice-menu button{padding:7px 10px;background:var(--selected);border:1px solid var(--edge);border-radius:5px;color:var(--text);font-size:12px}
.grid-choice-menu{width:116px;padding:5px;display:grid;gap:3px}.grid-choice-menu[hidden]{display:none}
.risk-view{position:absolute;inset:var(--header-height,56px) 4px 4px 0;border-radius:16px;overflow:hidden;background:var(--tray);z-index:18}
dialog.risk-view{width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--text)}
.risk-view iframe{background:var(--tray)}
dialog.risk-view.risk-popup{position:fixed;inset:0;width:min(700px,calc(100vw - 32px));height:min(880px,calc(100dvh - 48px));margin:auto;padding:5px;border:0;border-radius:18px;background:var(--tray);box-shadow:0 20px 60px #0005;outline:none}
dialog.risk-popup[open]{display:flex;flex-direction:column}
.risk-popup::backdrop{background:#11141666;backdrop-filter:blur(3px)}
.risk-popup iframe{flex:1;min-height:0;height:auto;border-radius:11px}
.risk-edge{display:block;position:fixed;top:calc(var(--chart-area-top,0px) + var(--chart-area-height,100dvh)/2 - 32px);right:var(--chart-area-right,0px);width:24px;height:64px;padding:0;z-index:60;border:0;border-radius:8px 0 0 8px;background:var(--shell);color:var(--subtle);touch-action:manipulation}
.risk-edge[hidden]{display:none}
.risk-edge::before{content:"";position:absolute;right:5px;top:calc(50% - 24px);width:3px;height:48px;border-radius:3px;background:var(--subtle);opacity:.55}
.risk-edge:focus-visible{outline:1px solid var(--text);outline-offset:-2px}
@media(hover:hover) and (pointer:fine) and (min-width:900px){.risk-edge{top:var(--chart-area-top,0px);right:0;bottom:auto;width:8px;height:var(--chart-area-height,100dvh);border-radius:0;background:none}.risk-edge::before{right:1px;opacity:.3}}
dialog.risk-view.risk-popup.risk-drawer{inset:var(--chart-area-top,0px) var(--chart-area-right,0px) auto auto;margin:0;width:var(--risk-drawer-width);height:var(--chart-area-height,100dvh);border-radius:0 16px 16px 0;padding:0;background:transparent;box-shadow:none;overflow:hidden}
.drawer-surface{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;height:100%}
.risk-drawer .drawer-surface{padding:3px;background:var(--shell);border-radius:inherit;transform:translate3d(0,0,0);will-change:transform}
.risk-drawer::backdrop{background:transparent;backdrop-filter:none}
.drawer-tabs{display:none}
.risk-drawer .drawer-tabs{display:flex;flex:none;position:relative;isolation:isolate;align-items:center;justify-content:center;gap:3px;height:52px;padding:6px 10px;background:var(--shell)}
.risk-drawer .drawer-tabs::before{content:'';position:absolute;z-index:-1;width:282px;height:40px;border-radius:22px;background:var(--tray);box-shadow:0 2px 5px #0002}
.drawer-tabs button{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:64px;min-width:64px;height:32px;padding:0;border:0;border-radius:18px;background:none;box-shadow:none;color:var(--subtle);transition:color 150ms,background 150ms}
.drawer-tabs button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover) and (pointer:fine){.drawer-tabs button:hover{color:var(--text);background:color-mix(in srgb,var(--text) 9%,var(--tray))}}
.drawer-tabs button.selected{color:var(--text);background:transparent;box-shadow:none}
.drawer-tabs button:focus-visible{outline:1px solid var(--subtle);outline-offset:-3px}
.drawer-travelling-selection{position:absolute;left:calc(50% - 132.5px);top:calc(50% - 16px);width:64px;height:32px;border-radius:18px;pointer-events:none;background:var(--shell);box-shadow:0 1px 3px #0003;will-change:transform}

.risk-drawer iframe{border-radius:10px}
@media(max-width:600px),(max-width:1000px) and (max-height:600px){dialog.risk-view.risk-popup{inset:0;width:calc(100vw - 20px);height:calc(100dvh - 32px);border-radius:14px;padding:3px}.risk-popup iframe{border-radius:8px}}
.risk-active .dashboard-sidebar .tool-rail{visibility:hidden}
.dashboard-sidebar button:focus-visible{outline:1px solid var(--subtle);outline-offset:2px}
dialog{background:var(--shell);color:var(--text);border-color:var(--edge)}dialog p,dialog label{color:var(--subtle)}
dialog :is(input,select){background:var(--tray)!important;color:var(--text)!important;border-color:var(--edge)!important}
dialog .eyebrow,dialog .plan-meta,dialog .plan-readout span:nth-child(odd),dialog .key-grid span,dialog .empty-plan{color:var(--subtle)}
dialog .dialog-footnote{color:var(--subtle)!important}
dialog :is(.plan-readout,.plan-meta,.order-history){border-color:var(--edge)}
dialog :is(.icon-button,.text-button,.primary-button){color:var(--text);border-color:var(--edge);background:var(--selected)}
@media(hover:hover) and (pointer:fine){dialog :is(.icon-button,.text-button,.primary-button,.order-history):hover:not(:disabled){color:var(--text);background:color-mix(in srgb,var(--shell) 80%,var(--text))}}
dialog .icon-button{display:grid;place-items:center;flex:none;font-size:21px;line-height:1;width:32px;height:32px}
dialog :is(.order-account,.order-lots){color:var(--text);border-color:var(--edge)}
dialog::backdrop{background:#101112a8;backdrop-filter:blur(5px)}
.account-overview{display:grid;gap:10px;margin:8px 0 18px}
.account-overview-card{padding:15px 17px;border-radius:10px;background:color-mix(in srgb,var(--shell) 80%,var(--tray));border:1px solid var(--edge)}
.account-overview-card header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.account-overview-card header>strong{font-size:13px}.account-connection{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--subtle)}
.account-connection i{width:6px;height:6px;border-radius:50%;background:var(--subtle);flex:none}.account-connection.connected i{background:var(--positive)}
.account-number{font-size:22px;font-weight:650;letter-spacing:.3px;margin-top:12px;overflow-wrap:anywhere}
.account-overview-card p{margin:3px 0;font-size:12px;overflow-wrap:anywhere}.account-server{color:var(--text)}
.account-balance{display:flex;justify-content:space-between;gap:12px;padding-top:12px;margin-top:12px;border-top:1px solid var(--edge);font-size:12px}.account-balance>span{color:var(--subtle)}
.account-history{font-size:12px;color:var(--subtle)}.account-history>summary{cursor:pointer;padding:8px 0}.account-history[open]>summary{margin-bottom:6px}
@media(max-width:480px){.account-overview-card{padding:12px}.account-overview-card header{align-items:flex-start;gap:6px}.account-connection{max-width:65%;line-height:1.4}}
.copier-dialog{background:var(--shell);color:var(--text);border-color:var(--edge);border-radius:12px}
.copier-dialog button{background:color-mix(in srgb,var(--shell) 90%,var(--text));border-color:var(--edge);color:var(--text);border-radius:5px}
@media(hover:hover) and (pointer:fine){.copier-dialog button:hover:not(:disabled){background:color-mix(in srgb,var(--shell) 80%,var(--text))}}
.copier-card,.copier-connection{background:var(--tray);border-color:var(--edge)}
.copier-details,.copier-ticket{border-color:var(--edge)}
.copier-card summary small,.copier-summary-values,.copier-note{color:var(--subtle)}
.copier-summary-values b,.copier-summary-values b.neutral{color:var(--text)}
.copier-summary-values b.positive{color:var(--positive)}.copier-summary-values b.negative{color:var(--negative)}
.copier-dialog [data-confirm]{border-color:var(--negative)}
@media(max-width:780px){.dashboard-app .app-header{padding-left:150px;min-height:42px}.workspace-pages{justify-content:flex-start}.fixed-brand strong{font-size:16px}.fixed-brand strong span{font-size:11px}}
@media(max-width:600px),(max-width:1000px) and (max-height:600px){.chart-head .rotate-button,.chart-head .chart-tools-toggle{display:grid!important}.chart-head .symbol-block{max-width:none;flex:1}.chart-head-actions{gap:0}.chart-head .tf-select{max-width:35px}.dashboard-app .app-header{padding:44px 4px 4px 0;min-height:82px}.dashboard-app .workspace-controls{margin-left:auto;gap:3px}.dashboard-app .account-chip{font-size:11px;padding:6px}.workspace-controls>button{height:30px}.account-mode{font-size:10px}.risk-view{top:82px}.dashboard-app .fixed-brand{top:14px}}
@media(max-width:440px){body{padding:3px}.dashboard-app{border-radius:10px}.dashboard-app #grid-button span{display:none}.dashboard-app .account-chip .account-dot{display:none}.dashboard-app .account-chip{max-width:145px}.account-name{overflow:hidden;text-overflow:ellipsis}.account-chip>span:last-child{display:none}.chart-head .symbol-name{font-size:11px}.chart-head{padding-left:7px!important}}
@media(prefers-reduced-motion:reduce){.dashboard-sidebar::before{transition:none}.dashboard-app *{transition:none!important;scroll-behavior:auto!important}}

/* Close the identified position through the existing confirmation/action path. */
.chart-head .position-close{position:relative;inset:auto;flex:0 0 22px;width:22px;height:22px;min-width:22px;margin:0 0 0 3px;padding:0;display:grid;place-items:center;line-height:1;align-self:center;border-radius:4px;z-index:1}
.chart-head .position-close[hidden]{display:none}
.chart-head:has(.position-close:not([hidden])) .symbol-block{flex:0 1 auto}
.position-close-icon{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;transform-origin:50% 50%}
.position-close[aria-busy=true] .position-close-icon{animation:position-close-turn 1400ms infinite}
@keyframes position-close-turn{0%{transform:rotate(0deg);animation-timing-function:ease-in-out}34%,50%{transform:rotate(180deg);animation-timing-function:ease-in-out}84%,100%{transform:rotate(360deg)}}
@media(pointer:coarse){.chart-head .position-close{width:26px;height:26px;min-width:26px;flex-basis:26px}}
@media(prefers-reduced-motion:reduce){.position-close[aria-busy=true] .position-close-icon{animation:none}.position-close[aria-busy=true]{border-color:#fff;border-style:dashed}}
/* Keep SWAPS and RR beside the rule matrix when the chart fills the viewport. */
.chart-grid.expanded .chart-card .kraft-panel{grid-template-columns:calc(75 * var(--u)) 0 minmax(0,calc(332 * var(--u))) 0 calc(75 * var(--u));justify-content:center}
/* Fullscreen: one shared vertical centre; preserve the existing 86px chart inset.
   Narrow phones retain two rows so the full rule matrix remains usable. */
@container (min-width:720px){
 .chart-grid.expanded .chart-card .chart-head{height:86px;min-height:86px}
 .chart-grid.expanded .chart-card .kraft-panel{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:494px;height:58px;min-height:58px;padding:3px 1px;background:transparent}
 .chart-grid.expanded .chart-head .symbol-block{max-width:calc((100cqw - 494px)/2 - 42px)}
}


/* Approved dark Satin / Sanft: colors follow actual chart state only. */
body:not(.classic){--satin-normal:#232325;--satin-normal-active:#333336;--satin-fibo:#323226;--satin-fibo-active:#414035;--satin-pending:#252f39;--satin-pending-active:#35414c;--satin-position:#27342c;--satin-position-active:#37473e;--satin-edge:#c0c1c3;--satin-weight:1.25px;--satin-shadow:0 5px 12px #0008}
body:not(.classic) #chart-grid .chart-card{--satin-phase:var(--satin-normal);--satin-selected:var(--satin-normal-active);--window-tint:var(--satin-phase)!important;--window-header:color-mix(in srgb,var(--shell) 45%,var(--window-tint));--window-edge:color-mix(in srgb,var(--window-tint) 75%,#77777a);filter:none;transition:box-shadow 220ms,border-color 220ms}
body:not(.classic) #chart-grid .chart-card.active{--window-tint:var(--satin-selected)!important;border-color:transparent;box-shadow:var(--satin-shadow)}
body:not(.classic) #chart-grid .chart-card .chart-body{background-color:var(--window-tint)!important}
body:not(.classic) #chart-grid .chart-card .chart-head,body:not(.classic) #chart-grid .chart-card .kraft-panel,body:not(.classic) #chart-grid .chart-card .chart-body,body:not(.classic) #chart-grid .chart-card .chart-viewport{transition:background-color 220ms}
body:not(.classic) #chart-grid .chart-card.active:after{border-width:var(--satin-weight);background:linear-gradient(135deg,var(--satin-edge),color-mix(in srgb,var(--satin-edge) 48%,var(--window-tint)) 50%,color-mix(in srgb,var(--satin-edge) 80%,var(--window-tint))) border-box;transform:none}
body:not(.classic) #chart-grid .chart-card [data-broker-label],body:not(.classic) #chart-grid .chart-card [data-hq-label]{stroke:var(--window-tint)}
body:not(.classic) #chart-grid .chart-card[data-phase="normal"]{--satin-phase:var(--satin-normal);--satin-selected:var(--satin-normal-active)}
body:not(.classic) #chart-grid .chart-card[data-phase="fibo"]{--satin-phase:var(--satin-fibo);--satin-selected:var(--satin-fibo-active)}
body:not(.classic) #chart-grid .chart-card[data-phase="pending"]{--satin-phase:var(--satin-pending);--satin-selected:var(--satin-pending-active)}
body:not(.classic) #chart-grid .chart-card[data-phase="position"]{--satin-phase:var(--satin-position);--satin-selected:var(--satin-position-active)}
@media(prefers-reduced-motion:reduce){body:not(.classic) #chart-grid .chart-card *{transition:none!important}}
body:not(.classic) #chart-grid:has(.chart-card.active) .chart-card:not(.active){filter:none}

/* Compact overview: state-colored headers only; plots stay below the clipped card. */
.dashboard-app #overview-button{width:32px;padding:0;display:grid;place-items:center;border:1px solid var(--edge);background:none}
.dashboard-app #overview-button[aria-pressed=true]{color:var(--text);background:var(--selected);border-color:var(--subtle)}
#chart-grid.is-overview{scroll-snap-type:none;align-content:start}
#chart-grid.is-overview .chart-card{overflow:hidden;min-height:0}
#chart-grid.is-overview .chart-head{cursor:pointer}
@media(hover:hover) and (pointer:fine){#chart-grid.is-overview .chart-head:hover{background:color-mix(in srgb,var(--window-header) 90%,var(--text))}}
#chart-grid.is-overview .chart-viewport{position:absolute;top:100%;left:0;right:0;height:var(--overview-plot-height);visibility:hidden;pointer-events:none}
#chart-grid.has-overview-tail:after{content:'';grid-column:1/-1;pointer-events:none}
#chart-grid.is-overview .kraft-panel,#chart-grid.is-overview .chart-head-actions,#chart-grid.is-overview .chart-quick-actions{display:none!important}
#chart-grid.is-overview .chart-head{height:32px;min-height:32px;background:var(--window-tint)}
#chart-grid.is-overview .symbol-block{flex:1;max-width:none;text-align:left}
@media(max-width:440px){
 .dashboard-app .workspace-controls{gap:3px;width:100%;justify-content:flex-end}
 .dashboard-app .workspace-controls .account-chip{min-width:0;flex:0 1 auto;gap:4px;padding:5px}
 .dashboard-app .workspace-controls :is(#grid-button,#overview-button,#copier-button,#theme-button){width:28px;min-width:28px;padding:0}
}

#chart-grid{overflow-anchor:none}

/* Approved 4C: Satin Gravur with the confirmed inner and outer spacing. */
.dashboard-app .app-header{min-height:76px}
.account-summary{position:absolute;left:50%;top:7px;transform:translateX(-50%);width:330px;max-width:100%;padding:5px 0;isolation:isolate;color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
.account-summary::before{content:'';position:absolute;inset:-3px -18px;z-index:-1;pointer-events:none;border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--tray) 40%,var(--shell)),color-mix(in srgb,var(--shell) 97%,white));box-shadow:inset 0 1px 3px #00000035,0 1px 0 #ffffff28}
.account-metrics{display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:end;text-align:center}
.account-metric{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:4px}
.account-metric>span{font-size:8px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--subtle)}
.account-metric>strong{font-size:18px;font-weight:650;line-height:1.1}
.account-pnl{padding-top:0}.account-pnl>span{font-size:8.5px;color:var(--text)}.account-pnl>strong{font-size:24px;line-height:1.05;letter-spacing:-.6px}
.account-periods{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:6px;font-size:9px;white-space:nowrap}
.account-periods>span{display:flex;gap:4px;align-items:baseline}.account-periods b{color:var(--subtle);font-weight:600}.account-periods strong{font-weight:600}
.account-summary .positive{color:var(--positive)}.account-summary .negative{color:var(--negative)}.account-summary .neutral{color:var(--text)}
@media(min-width:1121px){
 .dashboard-app .fixed-brand{top:24px}

}
@media(max-width:1120px){
 .dashboard-app .app-header{display:grid;grid-template-columns:1fr;justify-items:center;padding:4px 9px 12px 0;row-gap:12px;min-height:76px}
 .dashboard-app .workspace-controls{justify-self:end}
 .account-summary{position:relative;top:auto;left:auto;transform:none;width:min(330px,calc(100% - 36px));max-width:calc(100% - 36px);margin:0 auto;order:2}
 .account-metrics{width:100%;margin:auto}
 .risk-view{top:var(--header-height,104px)}
}
@media(max-width:600px),(max-width:1000px) and (max-height:600px){
 .dashboard-app .app-header{padding-top:44px}
 .account-periods{gap:8px;font-size:8px}
 .account-metric>strong{font-size:17px}
 .account-pnl>strong{font-size:23px}
}

/* The original Risk status uses the existing update clock, below the drawer. */
.drawer-footer{display:flex;align-items:center;justify-content:center;gap:6px;flex:0 0 var(--risk-drawer-width);height:22px;min-width:0;padding:0 8px;color:var(--subtle);font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.drawer-footer[hidden]{display:none}.drawer-footer .drawer-update{color:var(--subtle)}.drawer-footer.live .drawer-update{color:var(--positive)}
@media(max-width:780px){.workspace-pages-shell:has(.drawer-footer:not([hidden])){height:44px;flex-wrap:wrap}.drawer-footer{flex-basis:100%;height:20px}.workspace-pages-shell:has(.drawer-footer:not([hidden])) .workspace-pages{flex-basis:100%}}

/* Approved Light designs across desktop, tablet and phone. */
 body.classic[data-light-design="beton"]{--shell:#c4c3be;--tray:#93948f;--text:#30322d;--subtle:#606359;--edge:#a3a69b;--selected:#93948f;--outline:color-mix(in srgb,#c4c3be 55%,#93948f);--accent:#30322d}
 body.classic .chart-card{--shell:#b3b5b3;--tray:#929593;--chart:#b8bbb9;--text:#252925;--subtle:#535953;--edge:#999d99;--selected:#929593;--outline:color-mix(in srgb,#eef0ec 25%,var(--tray));--accent:#303b33;color:var(--text)}
 body.classic[data-light-design="beton"] #chart-grid .chart-card[data-phase="normal"]{--window-tint:#bab9b4!important;--window-header:#bab9b4}
 body.classic[data-light-design="beton"] #chart-grid .chart-card[data-phase="normal"].active{--window-tint:#c4c3be!important;--window-header:#c4c3be}
 body.classic[data-light-design="beton"] #chart-grid .chart-card[data-phase="normal"] .chart-body{background-color:var(--window-tint)!important}
 body.classic[data-light-design="beton"] #chart-grid .chart-card[data-phase="normal"]::before{opacity:0!important}
/* Collapse layout once; only header/logo transforms animate, not chart sizes. */
.dashboard-header-slot{flex:none;height:var(--header-height,76px);min-width:0}
.dashboard-header-slot .app-header{transition:transform 220ms cubic-bezier(.22,1,.36,1)}
.dashboard-app .fixed-brand{transition:transform 220ms cubic-bezier(.22,1,.36,1)}
.dashboard-app.header-collapsed .dashboard-header-slot{height:22px}
.dashboard-app.header-collapsed .app-header,.dashboard-app.header-collapsed .fixed-brand{transform:translateY(calc(-1 * var(--header-height,76px) - 40px));pointer-events:none}
.dashboard-app #header-hide-button{width:28px;min-width:28px;padding:0;display:grid;place-items:center;border:0}
.header-edge{position:fixed;inset:0 0 auto;height:9px;width:100%;padding:0;border:0;z-index:61;background:transparent;color:var(--subtle);cursor:pointer;touch-action:manipulation}
.header-edge[hidden]{display:none}
.header-edge:focus-visible{outline:1px solid var(--subtle);outline-offset:-2px;background:var(--shell)}
@media(hover:none),(max-width:780px){.header-edge{height:22px}.header-edge:after{content:'';position:absolute;left:calc(50% - 18px);top:12px;width:36px;height:3px;border-radius:3px;background:var(--subtle)}}
@media(prefers-reduced-motion:reduce){.dashboard-header-slot .app-header,.dashboard-app .fixed-brand{transition:none}}

 body.classic[data-light-design="asphalt"]{--shell:#a5a6a5;--tray:#707372;--text:#222624;--subtle:#424a45;--edge:#848b86;--selected:#707372;--outline:color-mix(in srgb,#a5a6a5 55%,#707372);--accent:#222624}
 body.classic[data-light-design="asphalt"] :is(.dashboard-app,.sidebar-surface,.risk-drawer .drawer-surface,.chart-drawer-viewport){background:radial-gradient(circle,#ffffff0b .6px,transparent .9px) 0 0/4px 4px,var(--shell)}
 body.classic[data-light-design="asphalt"] :is(.dashboard-surface,.app-header,.workspace-pages-shell,.risk-drawer .drawer-tabs){background:transparent}
.dashboard-app :is(#theme-button,#header-hide-button){border:1px solid var(--edge);border-radius:5px;width:32px;min-width:32px;height:32px;background:none}
@media(hover:hover) and (pointer:fine){.dashboard-app :is(#theme-button,#header-hide-button):hover{background:var(--selected);color:var(--text)}}
@media(max-width:600px),(max-width:1000px) and (max-height:600px){.dashboard-app :is(#theme-button,#header-hide-button){width:28px;min-width:28px;height:30px}}

/* Phone summary is the safe gesture pad: chart panning/drawing stays untouched. */
@media(max-width:600px),(max-width:1000px) and (max-height:600px){
 /* Extend through the header’s 9px side padding to align with the chart tray. */
 .account-summary{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;width:calc(100% + 18px);max-width:calc(100% + 18px);margin:0 -9px;padding:5px 18px}
 .account-summary::before{inset:-3px 0}
 .account-summary>*{pointer-events:none}
 .sidebar-surface,.risk-drawer .drawer-tabs{touch-action:pan-y}
 .sidebar-edge,.risk-edge{display:none}
 .dashboard-app #overview-button{display:none}
 .dashboard-app #grid-button{display:inline-flex;align-items:center;justify-content:center;gap:0;padding:0}
 .dashboard-app #grid-button span{display:none}
 .dashboard-app #grid-button svg{display:block;flex:none}
 .dashboard-app.header-collapsed .dashboard-header-slot{height:var(--header-height,72px)}
 .dashboard-app.header-collapsed .app-header{transform:none;pointer-events:auto;min-height:0;padding:7px 9px;row-gap:0}
 .dashboard-app.header-collapsed .workspace-controls{display:none}
 .dashboard-app.header-collapsed .fixed-brand{visibility:hidden}
}

/* Phone account access belongs in the tool drawer; reuse the original buttons. */
.sidebar-accounts,.receiver-label{display:none}
@media(max-width:600px),(max-width:1000px) and (max-height:600px){
 .dashboard-app .app-header{padding:8px 9px 12px;row-gap:12px;min-height:0}
 .dashboard-app .workspace-controls{width:auto;min-height:32px;margin-left:auto;gap:5px}
 .dashboard-app .fixed-brand{top:13px;left:12px;gap:8px}
 .dashboard-app .fixed-brand strong{font-size:15px;letter-spacing:1px;gap:5px}
 .dashboard-app .fixed-brand strong span{font-size:10px;letter-spacing:1px}
 .dashboard-app .fixed-brand .brand-mark{width:22px;height:26px}
 .dashboard-app #header-hide-button{display:none}
 .sidebar-accounts{display:flex;flex-direction:column;gap:8px;flex:none;padding:8px 0 0;border-top:1px solid var(--edge)}
 .dashboard-app .sidebar-accounts :is(#trade-connect,#copier-button){display:flex;align-items:center;justify-content:flex-start;gap:9px;width:100%;max-width:none;min-height:40px;height:40px;padding:8px 12px;border:1px solid var(--edge);border-radius:7px;background:transparent;color:var(--text);font-size:13px}
 .sidebar-accounts .receiver-label{display:inline;font-size:13px}
 .sidebar-accounts .account-mode{font-size:11px}
}

/* An enlarged phone chart is one instrument, not a scrollable list of charts. */
@media(max-width:600px),(max-width:1000px) and (max-height:600px){
 .chart-grid.expanded{overflow:hidden;scroll-snap-type:none;touch-action:none}
 .chart-grid.expanded .chart-body,.chart-grid.expanded .chart-body canvas{touch-action:none}
}

/* Phone tools belong to the chart, below the plot, just like its header. */
.phone-chart-tools,.phone-chart-tool-slot,.phone-zoom-comparison,.phone-tool-face{display:none}
@media(max-width:600px),(max-width:1000px) and (max-height:600px){
 .dashboard-app #grid-button,.grid-choice-menu{display:none!important}
 .workspace-pages{display:none}
 .workspace-pages-shell{height:4px}
 .workspace-pages-shell:has(.drawer-footer:not([hidden])){height:20px}
 .chart-head .expand-button,.chart-head .chart-tools-toggle,.chart-quick-actions.is-open{display:none!important}
 .chart-scroll-frame{display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);gap:0}
 .chart-scroll-frame .chart-grid{grid-column:1;grid-row:1;height:100%}
 .phone-chart-tool-slot{display:block;height:96px;min-height:96px;flex:none;background:var(--window-header);border-radius:0 0 7px 7px}
 .chart-grid .chart-card .kraft-panel,.chart-grid.expanded .chart-card .kraft-panel{height:68px;min-height:68px;--control-font:clamp(6px,2.05cqw,11px);padding:3px 1px;column-gap:0;grid-template-columns:calc(75 * var(--u)) 2px minmax(0,1fr) 2px calc(75 * var(--u))}
 #chart-grid .native-button-band{grid-template-columns:calc(38 * var(--u)) 1fr 1.04fr .84fr .52fr .84fr 1.04fr 1fr calc(38 * var(--u))}
 #chart-grid .native-button-band :is([data-action="risk-down"],[data-action="risk-up"]){font-size:14px}
 /* Taller outer windows retain the original compact two-line content. */
 .chart-grid .panel-side :is(.swap-body,.right-body){align-content:center;grid-template-rows:repeat(2,calc(17 * var(--u)))}
 .chart-grid .right-panel[data-kind=PnL] .right-body{grid-template-rows:calc(27 * var(--u)) calc(10 * var(--u));align-content:center}
 .chart-viewport:before{content:'';position:absolute;inset:auto 0 0;height:14px;background:var(--chart-ui-shadow);transform:scaleY(-1);pointer-events:none;z-index:12}
 #chart-grid.is-overview .phone-chart-tool-slot{display:none}
 .phone-chart-tools{display:flex;align-items:center;gap:9px;width:100%;height:100%;padding:5px 8px;border:0;border-radius:0 0 7px 7px;background:var(--window-header)}
 .phone-chart-tools[hidden],.phone-zoom-comparison[hidden]{display:none}
 .phone-tool-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,40px);gap:3px;flex:1;min-width:0}
 .phone-chart-tools button{display:grid;place-items:center;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:5px;background:transparent;color:var(--text);box-shadow:none;touch-action:manipulation;line-height:1}
 .phone-chart-tools .rail-button.active,.phone-chart-tools button[aria-pressed=true]{background:var(--selected)}
 .phone-chart-tools button:disabled{opacity:.35}
 .phone-chart-tools :is(.sidebar-label,.tool-mark){display:none}
 .phone-tool-face{display:flex;flex-direction:column;align-items:center;gap:2px}
 .phone-tool-face small{font-size:8px;font-weight:500;white-space:nowrap}
 .phone-chart-tools svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
 .phone-direction-pad{display:grid;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,27px);gap:2px;flex:none}
 .phone-direction-pad .up{grid-area:1/2}.phone-direction-pad .left{grid-area:2/1}.phone-direction-pad .right{grid-area:2/3}.phone-direction-pad .down{grid-area:3/2}
 .phone-direction-pad .left svg{transform:rotate(-90deg)}.phone-direction-pad .right svg{transform:rotate(90deg)}.phone-direction-pad .down svg{transform:rotate(180deg)}
 .phone-direction-pad button:active,.phone-tool-actions button:active{background:var(--selected)}
 .is-rotated .phone-tool-face{transform:rotate(var(--chart-turn,90deg))}
 .is-rotated .phone-direction-pad{grid-template-columns:repeat(3,27px);transform:rotate(var(--chart-turn,90deg))}
 .dashboard-sidebar .tool-rail :is(#pointer-tool,#fibo-tool,#weekly-tool,.rail-separator){visibility:visible}
 .phone-zoom-testing{grid-template-columns:minmax(0,1fr) 38px;column-gap:4px}
 .phone-zoom-comparison{display:flex;grid-column:2;grid-row:1;flex-direction:column;align-items:stretch;justify-content:center;gap:4px;padding:4px 0;background:var(--shell);border-radius:6px;min-height:0}
 .phone-zoom-comparison>span{font-size:8px;font-weight:650;text-align:center;letter-spacing:.5px;color:var(--subtle)}
 .phone-zoom-comparison button{flex:1;min-height:28px;max-height:40px;padding:0;border:1px solid var(--edge);border-radius:5px;background:transparent;color:var(--text);font-size:12px;touch-action:manipulation}
 .phone-zoom-comparison button[aria-pressed=true]{background:var(--selected);border-color:var(--text);font-weight:700}
}
/* The overview keeps every instrument in the same compact header height. */
.chart-overview-metrics{display:none}
#chart-grid.is-overview .chart-head{display:grid;grid-template-columns:104px minmax(0,1fr) 26px;column-gap:6px;padding:0 8px;height:32px;min-height:32px}
#chart-grid.is-overview .chart-head .symbol-block{grid-column:1;grid-row:1;min-width:0;gap:4px;font-size:12px}
#chart-grid.is-overview .chart-head .position-close{grid-column:3;grid-row:1;margin:0;justify-self:end}
#chart-grid.is-overview .chart-overview-metrics:not([hidden]){grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;height:28px;padding:0;cursor:pointer}
#chart-grid.is-overview .overview-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;align-items:center;font-variant-numeric:tabular-nums;line-height:12px}
.overview-values>span{font-size:11px;font-weight:600;white-space:nowrap;text-align:right}
@media(max-width:600px),(max-width:1000px) and (max-height:600px){#chart-grid.is-overview .chart-head .symbol-block{font-size:11px}.overview-values>span{font-size:10px}}
.overview-hq{--hq-fill:#287657;position:relative;isolation:isolate;display:none;align-items:center;justify-content:center;border:0;border-radius:3px;padding:3px 5px;font-size:10px;line-height:1;font-weight:700;background:none;color:#fff!important}
.overview-hq.negative{--hq-fill:#9f493a;color:#fff}.overview-hq.positive{color:#fff}.overview-hq.is-pending{--hq-fill:#171717}
.overview-hq::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--hq-fill);pointer-events:none;animation:hq-face-pulse 1.2s ease-in-out infinite}
#chart-grid.is-overview .overview-hq:not([hidden]){display:inline-flex;margin-left:4px}
#chart-grid.is-overview .chart-card[data-overview-phase=position]{--window-tint:var(--satin-position)!important}
#chart-grid.is-overview .chart-card[data-overview-phase=pending]{--window-tint:var(--satin-pending)!important}
.classic #chart-grid.is-overview .chart-card[data-overview-phase=position]{--window-tint:#b5c3b5!important}
.classic #chart-grid.is-overview .chart-card[data-overview-phase=pending]{--window-tint:#b3bfc4!important}
@keyframes hq-face-pulse{0%,100%{opacity:.65}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.overview-hq::before{animation:none;opacity:1}}
@media(max-width:600px),(max-width:1000px) and (max-height:600px){
 .sidebar-surface,.chart-scroll-frame{transition-duration:360ms;transition-timing-function:cubic-bezier(.25,.8,.25,1)}
}

/* Physical phone landscape mirrors the manually turned chart: plot in the
   middle, original rule band at the left, tool band at the right. The canvas
   itself stays untransformed, so touch and drawing coordinates stay native. */
@media(orientation:landscape) and (max-width:1000px) and (max-height:600px){
 body{padding:max(3px,env(safe-area-inset-top)) max(3px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(3px,env(safe-area-inset-left))}
 .dashboard-app{border-radius:10px}
 .dashboard-app .dashboard-header-slot,.dashboard-app .fixed-brand,.workspace-pages-shell,.header-edge{display:none!important}
 .dashboard-surface{padding:4px}
 .chart-scroll-frame,.chart-grid{touch-action:none}
 #chart-grid{overflow:hidden;scroll-snap-type:none}
 #chart-grid .chart-card{display:block}
 #chart-grid .chart-card .chart-head{position:absolute;top:100%;left:0;width:var(--phone-ui-length);height:28px;min-height:28px;transform-origin:0 0;transform:rotate(-90deg);border-radius:0;padding:0 7px}
 #chart-grid .chart-head .symbol-block{max-width:none}
 #chart-grid .chart-head .rotate-button{display:none!important}
 #chart-grid .chart-card .kraft-panel{position:absolute;top:100%;left:28px;width:var(--phone-ui-length);height:68px;min-height:68px;transform-origin:0 0;transform:rotate(-90deg);--u:min(1px,calc((var(--phone-ui-length) - 4px)/494));--control-font:clamp(6px,calc(var(--phone-ui-length)*.0205),11px);background:var(--window-header)}
 #chart-grid .chart-viewport{position:absolute;inset:0 96px;width:auto;height:auto}
 #chart-grid .chart-body,#chart-grid .chart-body canvas{touch-action:none}
 #chart-grid .chart-viewport:after{inset:0 auto 0 0;width:14px;height:auto;background:linear-gradient(90deg,#19201a2e,transparent)}
 #chart-grid .chart-viewport:before{inset:0 0 0 auto;width:14px;height:auto;transform:none;background:linear-gradient(270deg,#19201a2e,transparent)}
 #chart-grid .phone-chart-tool-slot{position:absolute;inset:0 0 0 auto;width:96px;height:100%;min-height:0;border-radius:0 7px 7px 0}
 .phone-chart-tools{flex-direction:column-reverse;padding:8px 5px;gap:8px;border-radius:inherit}
 .phone-tool-actions{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(30px,1fr))}
 /* Match the original lower toolbar viewed after a physical quarter turn. */
 .phone-tool-actions #scale-tool{grid-area:1/1}.phone-tool-actions #phone-key-f{grid-area:1/2}
 .phone-tool-actions #reference-tool{grid-area:2/1}.phone-tool-actions #delete-button{grid-area:2/2}
 .phone-tool-actions #manual-tool{grid-area:3/1}.phone-tool-actions #undo-button{grid-area:3/2}
 #chart-grid .chart-watermark{font-size:clamp(100px,calc(var(--phone-ui-length)*.49),340px)}
 .phone-direction-pad{grid-template-columns:repeat(3,26px);grid-template-rows:repeat(3,26px)}
 .phone-tool-face,.phone-direction-pad{transform:none!important}
}


/* Reset confirmation follows the selected station palette. */
.trading-reset-consent{color:var(--text)}
.trading-reset-consent input{accent-color:var(--accent)}

/* Persistent account exceptions reuse the selected station palette. */
.hub-attention{flex:none;position:relative;z-index:33;width:100%;padding:9px 12px;border:1px solid var(--negative);border-radius:7px;background:var(--shell);color:var(--negative);font:600 12px system-ui;text-align:center;white-space:normal}
.hub-attention[hidden]{display:none}
@media(hover:hover) and (pointer:fine){.hub-attention:hover{background:var(--selected);color:var(--negative)}}.hub-alert-row{white-space:normal;line-height:1.5}

/* The visible badge and close action share the instrument's header row. */
.chart-head .symbol-block:has(.chart-account-count:not([hidden])){flex-shrink:0;max-width:none}
.chart-head .chart-account-count{position:static;top:auto;left:auto;flex:none}
.chart-head .position-close{background:#a7424b!important;color:#fff!important;border:0}
.loaded-web-version{flex:none;margin-top:-10px;text-align:center;font-size:10px;line-height:12px;color:var(--subtle);pointer-events:none;user-select:text;visibility:hidden}
.dashboard-sidebar.is-open .loaded-web-version{visibility:visible}
@media(max-width:600px),(max-width:1000px) and (max-height:600px){.workspace-pages-shell,.workspace-pages-shell:has(.drawer-footer:not([hidden])){height:calc(var(--logo-bar-height,48px)/3);min-height:0}.drawer-footer{height:100%;font-size:10px}}

.dashboard-sidebar .rail-button[hidden]{display:none}

@media(orientation:landscape) and (max-width:1000px) and (max-height:600px){.dashboard-surface{padding-bottom:18px}}