/* Four complete surface palettes; shared 416px controls retain their existing layout. */
html[data-nini-theme="day"] {
  color-scheme: light;
  --bg-app: #f8fafc;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-input: #ffffff;
  --bg-input-focus: #f1f5f9;
  --surface-soft: #f3f6fa;
  --color-primary: #2563eb;
  --color-primary-rgb: 37, 99, 235;
  --color-accent: #1f2937;
  --color-accent-hover: #111827;
  --on-accent: #ffffff;
  --color-secondary: #16784e;
  --color-secondary-rgb: 22, 120, 78;
  --text-main: #172033;
  --text-muted: #46556b;
  --text-dim: #606f83;
  --text-placeholder: #606f83;
  --text-success: #16784e;
  --text-danger: #b42318;
  --text-warning: #8c5b12;
  --border-color: #dce3ed;
  --border-color-secondary: #eef2f7;
  --success-bg: #e8f7ef;
  --danger-bg: #fff1f0;
  --danger-border: #f6b9b5;
  --warning-bg: #fff5df;
  --on-danger: #ffffff;
  --syn-weight: #6941c6;
  --syn-bracket: #7b45bc;
  --color-primary-glow: rgba(37, 99, 235, .12);
  --color-secondary-glow: rgba(22, 120, 78, .12);
  --syn-weight-bg: rgba(37, 99, 235, .12);
  --border-color-focus: var(--color-primary);
  --syn-text: var(--text-main);
  --syn-punct: var(--text-dim);
}
html[data-nini-theme="night"] {
  color-scheme: dark;
  --bg-app: #101a2a;
  --bg-sidebar: #192638;
  --bg-card: #1e2c40;
  --bg-card-hover: #27394f;
  --bg-input: #121e30;
  --bg-input-focus: #26384f;
  --surface-soft: #142238;
  --color-primary: #a0b8ff;
  --color-primary-rgb: 160, 184, 255;
  --color-accent: #9fb6ff;
  --color-accent-hover: #b9caff;
  --on-accent: #10203a;
  --color-secondary: #72d9b3;
  --color-secondary-rgb: 114, 217, 179;
  --text-main: #e8eef8;
  --text-muted: #b7c6dc;
  --text-dim: #a3b3cb;
  --text-placeholder: #93a6c1;
  --text-success: #7de0b4;
  --text-danger: #ff9a98;
  --text-warning: #f2cf86;
  --border-color: #34465e;
  --border-color-secondary: #132033;
  --success-bg: #163e34;
  --danger-bg: #45282d;
  --danger-border: #88545a;
  --warning-bg: #403821;
  --on-danger: #1e1520;
  --syn-weight: #c5b6ff;
  --syn-bracket: #c5b6ff;
  --color-primary-glow: rgba(160, 184, 255, .12);
  --color-secondary-glow: rgba(114, 217, 179, .12);
  --syn-weight-bg: rgba(160, 184, 255, .12);
  --border-color-focus: var(--color-primary);
  --syn-text: var(--text-main);
  --syn-punct: var(--text-dim);
}
html[data-nini-theme="sand"] {
  color-scheme: light;
  --bg-app: #f4efe7;
  --bg-sidebar: #fffcf7;
  --bg-card: #fffcf7;
  --bg-card-hover: #efe7da;
  --bg-input: #fffdfa;
  --bg-input-focus: #f3eadb;
  --surface-soft: #f2e9dc;
  --color-primary: #8d542a;
  --color-primary-rgb: 141, 84, 42;
  --color-accent: #7e4c2d;
  --color-accent-hover: #653a21;
  --on-accent: #ffffff;
  --color-secondary: #466d57;
  --color-secondary-rgb: 70, 109, 87;
  --text-main: #332b25;
  --text-muted: #625447;
  --text-dim: #776554;
  --text-placeholder: #776554;
  --text-success: #326a47;
  --text-danger: #a62f23;
  --text-warning: #8c5b12;
  --border-color: #dccfbc;
  --border-color-secondary: #eee4d5;
  --success-bg: #e8efdf;
  --danger-bg: #fbe8e0;
  --danger-border: #dca796;
  --warning-bg: #f5e6c7;
  --on-danger: #ffffff;
  --syn-weight: #935633;
  --syn-bracket: #7b4d83;
  --color-primary-glow: rgba(141, 84, 42, .12);
  --color-secondary-glow: rgba(70, 109, 87, .12);
  --syn-weight-bg: rgba(141, 84, 42, .12);
  --border-color-focus: var(--color-primary);
  --syn-text: var(--text-main);
  --syn-punct: var(--text-dim);
}
html[data-nini-theme="teal"] {
  color-scheme: dark;
  --bg-app: #0d2023;
  --bg-sidebar: #163035;
  --bg-card: #1b383c;
  --bg-card-hover: #25494d;
  --bg-input: #10282c;
  --bg-input-focus: #25464b;
  --surface-soft: #11282d;
  --color-primary: #84dbc9;
  --color-primary-rgb: 132, 219, 201;
  --color-accent: #8bdfcd;
  --color-accent-hover: #a1ebdc;
  --on-accent: #10272b;
  --color-secondary: #a4cfab;
  --color-secondary-rgb: 164, 207, 171;
  --text-main: #e4f3ef;
  --text-muted: #b0d0cc;
  --text-dim: #9cbfbb;
  --text-placeholder: #8eb3ae;
  --text-success: #a4e1b5;
  --text-danger: #ffa29b;
  --text-warning: #f4d29b;
  --border-color: #35575b;
  --border-color-secondary: #10272b;
  --success-bg: #214637;
  --danger-bg: #452d31;
  --danger-border: #82565c;
  --warning-bg: #443d29;
  --on-danger: #1e1820;
  --syn-weight: #c3dcb0;
  --syn-bracket: #f1cf9f;
  --color-primary-glow: rgba(132, 219, 201, .12);
  --color-secondary-glow: rgba(164, 207, 171, .12);
  --syn-weight-bg: rgba(132, 219, 201, .12);
  --border-color-focus: var(--color-primary);
  --syn-text: var(--text-main);
  --syn-punct: var(--text-dim);
}
/* Shared surfaces and readable foregrounds across all four palettes. */
html.nini-theme-switching,html.nini-theme-switching *,html.nini-theme-switching *::before,html.nini-theme-switching *::after{transition:none!important}
html[data-nini-theme] .textarea-actions{background:var(--surface-soft)}
html[data-nini-theme] .pro-type{background:var(--border-color-secondary)}
html[data-nini-theme] .pro-type button.active{background:var(--bg-input-focus);color:var(--color-primary)}
html[data-nini-theme] .header-nav a.active,html[data-nini-theme] .btn-primary,html[data-nini-theme] .btn-generate,html[data-nini-theme] .header-user .user-avatar{color:var(--on-accent)}
html[data-nini-theme] .header-user .user-avatar{border:1px solid var(--border-color)}
html[data-nini-theme] .header-user .user-name{color:var(--text-main)}
html[data-nini-theme] .header-user .user-points,html[data-nini-theme] .btn-action-logout{color:var(--text-muted)}
html[data-nini-theme] .login-form-wrap,html[data-nini-theme] .login-card{background:var(--bg-sidebar);color:var(--text-main)}
html[data-nini-theme] .login-card .brand h1,html[data-nini-theme] .login-card label{color:var(--text-main)}
html[data-nini-theme] .login-card .brand p{color:var(--text-dim)}
html[data-nini-theme] .form-group-custom input{background:var(--bg-input);color:var(--text-main);border-color:var(--border-color)}
html[data-nini-theme] .msg-box.success,html[data-nini-theme] .msg-box.loading,html[data-nini-theme] .shop-icon-link{background:var(--surface-soft);color:var(--text-main)}
html[data-nini-theme] input::placeholder,html[data-nini-theme] textarea::placeholder{color:var(--text-placeholder)}
html[data-nini-theme] select{color-scheme:inherit}
.nini-appearance-controls{position:relative;display:flex;align-items:center;gap:6px;flex-shrink:0}
.nini-icon-control{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--border-color);border-radius:9px;background:var(--bg-input);color:var(--text-muted);cursor:pointer;font-size:14px}
.nini-icon-control:hover,.nini-icon-control.is-active{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-primary-glow)}
.nini-icon-control:focus-visible,.nini-appearance-menu button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.nini-appearance-menu{position:absolute;right:0;top:calc(100% + 9px);width:210px;z-index:120;padding:6px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-card);box-shadow:0 12px 36px rgba(0,0,0,.18)}
.nini-appearance-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-main);font-family:inherit;text-align:left;cursor:pointer}
.nini-appearance-menu button:hover,.nini-appearance-menu button.is-selected{background:var(--color-primary-glow);border-color:var(--border-color)}
.nini-appearance-menu button>span:nth-child(2){flex:1}.nini-appearance-menu strong{display:block;font-size:12px;font-weight:600;line-height:1.5}.nini-appearance-menu small{display:block;font-size:11px;color:var(--text-dim);line-height:1.5}.nini-appearance-menu button>.fa-check{color:var(--color-primary);font-size:12px}
.nini-theme-swatch{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(128,128,128,.3);border-radius:8px;font-size:13px}
.swatch-day{background:#f8fafc;color:#2563eb}.swatch-night{background:#101a2a;color:#a0b8ff}.swatch-sand{background:#f4efe7;color:#8d542a}.swatch-teal{background:#0d2023;color:#84dbc9}
.header-right{gap:10px}
.nini-compact-empty{display:none}
html[data-nini-compact="true"] [data-nini-explanation],
html[data-nini-compact="true"] .prompt-drop-hint,
html[data-nini-compact="true"] .model-cost-hint,
html[data-nini-compact="true"] .info-tooltip,
html[data-nini-compact="true"] .tab-header-section>p:not(.history-note),
html[data-nini-compact="true"] .gpt-ref-tip,
html[data-nini-compact="true"] .gpt-switch-row small,
html[data-nini-compact="true"] .meta-side-note,
html[data-nini-compact="true"] .nini-ip-help,
html[data-nini-compact="true"] .nini-ip-header>div>p,
html[data-nini-compact="true"] .nini-ip-footer>p,
html[data-nini-compact="true"] .promptlib-footer small,
html[data-nini-compact="true"] .viewer-placeholder>p{display:none!important}
html[data-nini-compact="true"] .viewer-placeholder[data-nini-onboarding]>:not(.nini-compact-empty){display:none}
html[data-nini-compact="true"] .nini-compact-empty{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-dim)}
.nini-compact-empty i{font-size:36px;color:var(--color-primary);opacity:.65}.nini-compact-empty span{font-size:14px}
html[data-nini-compact="true"] .panel-section,html[data-nini-compact="true"] .canvas-control-panel .panel-section{padding-top:12px;padding-bottom:12px}
html[data-nini-compact="true"] .collapsible-card{padding-top:12px;padding-bottom:12px}
html[data-nini-compact="true"] .viewer-placeholder h2{font-size:16px;color:var(--text-dim);font-weight:500}
@media(min-width:769px) and (max-width:1200px){.header-nav a:nth-child(n+4) span{display:none}.header-nav a{padding-left:10px;padding-right:10px}}
@media(min-width:769px) and (max-width:900px){.header-brand>span{display:none}.header-left{gap:8px}.header-user{gap:6px}.header-user .user-actions{margin-left:0}}
@media(max-width:768px){.header-right{gap:8px}.nini-appearance-controls{gap:5px}.nini-icon-control{width:32px;height:32px}.header-user{gap:6px}.header-user .user-actions{margin-left:0}.nini-appearance-menu{right:0;width:196px}}
@media(max-width:380px){.app-header{padding-left:12px;padding-right:12px}.header-brand{font-size:16px}.header-left{gap:8px}.header-right{gap:6px}}

html[data-nini-theme] .model-cost-badge{background:var(--success-bg);border-color:var(--border-color);color:var(--text-success)}