/* One palette for regular, mobile, display and login views. Layout stays intact. */
html[data-skin] body,html[data-skin]:fullscreen{background:var(--bg);color:var(--text)}
html[data-skin] .panel,html[data-skin] .metrics .panel,html[data-skin] dialog{background:var(--panel);border-color:var(--border)}
html[data-skin] button,html[data-skin] nav a{background:var(--surface);color:var(--text);border-color:var(--border)}
html[data-skin] button:hover:not(:disabled),html[data-skin] a:hover{border-color:var(--accent)}
html[data-skin] button[aria-pressed=true],html[data-skin] .primary,html[data-skin] #operations .operation-start:not(:disabled){background:var(--accent);color:#101317;border-color:var(--accent);box-shadow:none}
html[data-skin] #clock b,html[data-skin] #ratio,html[data-skin] .quote-card strong,html[data-skin] .liquidation strong,html[data-skin] .leg-exit>strong,html[data-skin] .operation-expand{color:var(--accent)}
html[data-skin] #screen,html[data-skin] .manual-add-review button,html[data-skin] #t-save,html[data-skin] #t-auto{border-color:var(--accent-border)}
html[data-skin] .brand img,html[data-skin] .login-emblem img{filter:var(--brand-filter)}
html[data-skin] .positive{color:var(--up)}html[data-skin] .negative{color:var(--down)}
html[data-skin] .positions>.leg-card{border-left-color:var(--up)}html[data-skin] .positions>.leg-card[data-leg=short]{border-left-color:var(--down)}
html[data-skin] #operations .operation-card{border-color:var(--border);border-top-color:var(--up);background:linear-gradient(145deg,var(--up-soft),transparent 65%),var(--panel)}
html[data-skin] #operations .operation-card[data-leg=short]{border-top-color:var(--down);background:linear-gradient(145deg,var(--down-soft),transparent 65%),var(--panel)}
html[data-skin] .operation-direction{background:var(--up-soft);color:var(--up)}html[data-skin] [data-leg=short] .operation-direction{background:var(--down-soft);color:var(--down)}
html[data-skin] .operations>summary,html[data-skin] .operation-footnote,html[data-skin] .manual-add-option,html[data-skin] #action-form .check{background:var(--surface);border-color:var(--border)}
html[data-skin] .operation-settings,html[data-skin] .display-sound-toggle[aria-pressed=true],html[data-skin] #display-sound-toast,html[data-skin] .market-segments button[aria-pressed=true]{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-border)}
html[data-skin] .market-segments,html[data-skin] .market-canvas-wrap,html[data-skin] .market-price-tag{background:var(--chart)}
html[data-skin] input,html[data-skin] select{background:var(--chart);color:var(--text);border-color:var(--border);accent-color:var(--accent)}
html[data-skin] #sound-dialog button{background:var(--surface);border-color:var(--border);color:var(--text)}html[data-skin] #sound-feedback{color:var(--accent)}html[data-skin] #sound-dialog input[type=range]{accent-color:var(--accent)}
html[data-skin] #market-panel .t-panel{background:var(--panel);border-color:var(--accent-border)}
html[data-skin] #t-overlay .t-trend{color:var(--accent)}html[data-skin] #t-overlay .t-support{color:var(--up)}html[data-skin] #t-overlay .t-resistance{color:var(--down)}
html[data-skin] #t-overlay .t-anchor{fill:var(--chart)}html[data-skin] #t-overlay .t-label{stroke:var(--chart)}
html[data-skin] #equity-plot polyline{stroke:var(--accent)}html[data-skin] #equity-plot circle{fill:var(--accent)}
/* Semantic warnings/actions must never be mistaken for a skin or bullish color. */
html[data-skin] .header-risk[data-level=ok]>strong{color:#0ecb81}
html[data-skin] .header-risk[data-level=warning]>strong,html[data-skin] .header-risk[data-level=unknown]>strong,html[data-skin] #system-notice,html[data-skin] .quote-card[data-stale=true] small{color:#fcd535}
html[data-skin] .liquidation.warning strong,html[data-skin] .header-risk[data-level=danger]>strong,html[data-skin] .error{color:#ff6678}
html[data-skin] #operations .operation-danger{color:#ff8996;border-color:#75404a;background:#361e241f}
html[data-skin] button:disabled,html[data-skin] #operations button:disabled{color:#8793a3;background:var(--surface);border-color:var(--border);border-style:dashed}
html[data-skin] body.login-page{background:radial-gradient(ellipse at 50% 0,var(--accent-soft),transparent 65%),var(--bg)}
html[data-skin] .login-page .login-card{background:var(--panel);border-color:var(--border)}
html[data-skin] .login-page .login-card::before{background:linear-gradient(90deg,transparent,var(--accent-border),transparent)}
html[data-skin] .login-page .login-input input{background:var(--chart);color:var(--text);border-color:var(--border)}
html[data-skin] .login-page .login-input:focus-within svg{stroke:var(--accent)}
html[data-skin] .login-page .login-input input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
html[data-skin] .login-page .login-form .primary{background:var(--accent);border-color:var(--accent);color:#101317;box-shadow:0 6px 22px var(--accent-soft)}
html[data-skin] .login-page .login-form .primary:not(:disabled):hover{filter:brightness(1.08)}
.preference-panel{margin-bottom:20px;padding:24px!important}
.preference-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.preference-heading h2{font-size:22px;margin:0 0 8px}.preference-heading .note{font-size:14px;line-height:1.65}
.preference-badge{padding:5px 10px;white-space:nowrap;border:1px solid var(--accent-border);border-radius:20px;color:var(--accent);font-size:13px;background:var(--accent-soft)}
.preference-field{margin:26px 0 0;padding:0;border:0;min-width:0}.preference-field legend{font-size:16px;font-weight:600;margin-bottom:12px}
.skin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.skin-choice{position:relative;display:block!important;margin:0!important;padding:12px;border:1px solid var(--border);border-radius:12px;cursor:pointer;background:var(--chart)}
.skin-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;min-height:0}.skin-choice:has(input:checked){border-color:var(--swatch);box-shadow:0 0 0 1px var(--swatch)}.skin-choice:has(input:focus-visible){outline:2px solid var(--text);outline-offset:4px}
.skin-preview{display:block;position:relative;height:65px;border-radius:7px;background:var(--swatch-bg);border:1px solid #ffffff12;overflow:hidden}.skin-preview i{position:absolute;left:12px;top:12px;width:22px;height:8px;border-radius:3px;background:var(--swatch)}.skin-preview b{position:absolute;left:12px;top:32px;width:calc(100% - 24px);height:1px;background:var(--swatch);opacity:.7;transform:rotate(-7deg)}.skin-preview em{position:absolute;right:12px;bottom:10px;width:24px;height:5px;background:var(--swatch);opacity:.4;border-radius:3px}
.skin-label{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px;font-size:14px;font-weight:550}.skin-check{color:var(--swatch);visibility:hidden}.skin-choice:has(input:checked) .skin-check{visibility:visible}
.color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.color-choice{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:16px 12px;border:1px solid var(--border);border-radius:12px;cursor:pointer;flex-wrap:wrap}.color-choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}.color-choice input{width:18px!important;height:18px;min-height:0;margin:0!important}.color-choice strong{font-size:15px}.color-choice small{display:block;font-size:12px;margin-top:4px}.color-example{display:flex;flex-direction:column;gap:4px;margin-left:auto;font-size:14px}.example-green{color:#0ecb81}.example-red{color:#ff667d}
.preference-footer{display:flex;align-items:center;gap:20px;margin-top:22px}.preference-footer p{font-size:13px;color:var(--muted);line-height:1.7;flex:1}.preference-footer button{flex:none;min-height:44px;font-size:14px}
@media(max-width:600px){.preference-panel{padding:18px!important}.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.color-grid{grid-template-columns:1fr}.preference-footer{align-items:stretch;flex-direction:column;gap:8px}.preference-heading{gap:8px}.preference-heading h2{font-size:20px}.preference-badge{font-size:12px;padding:4px 8px}}