/* Shared presentation layer. Marketplace behavior remains in the existing scripts. */
:root {
  --ui-bg:#f4f3fc; --ui-surface:#fff; --ui-surface-alt:#f0edf9;
  --ui-text:#25213e; --ui-muted:#6d6683; --ui-accent:#6743cc;
  --ui-accent-contrast:#fff; --ui-border:#e4dff0;
  --ui-success-bg:#e8f5ec; --ui-success:#24663f;
  --ui-warning-bg:#fff1d7; --ui-warning:#855519;
  --ui-danger-bg:#fbe9e9; --ui-danger:#a33239;
  --ui-shadow:0 12px 36px #3825670b; --ui-radius:16px;
  --ui-font:"Segoe UI",system-ui,sans-serif; --ui-heading-font:var(--ui-font);
  --ui-sidebar-width:248px;
}
html[data-theme] { background:var(--ui-bg); color:var(--ui-text); font-family:var(--ui-font); --green:var(--ui-accent); --border:var(--ui-border); --muted:var(--ui-muted); --surface:var(--ui-surface); color-scheme:light; }
html[data-theme] body { background:var(--ui-bg); color:var(--ui-text); }
html[data-theme] h1,html[data-theme] h2,html[data-theme] h3 { font-family:var(--ui-heading-font); color:var(--ui-text); }
html[data-theme] main { margin-left:var(--ui-sidebar-width); width:calc(100% - var(--ui-sidebar-width)); max-width:none; min-width:0; padding:0 clamp(24px,3vw,56px); }
html[data-theme] .sidebar { width:var(--ui-sidebar-width); background:var(--ui-surface); border-color:var(--ui-border); overflow-y:auto; overscroll-behavior:contain; }
html[data-theme] .brand small,html[data-theme] label,html[data-theme] .help,html[data-theme] #operator-name,html[data-theme] .account-status small,html[data-theme] .order-cell small,html[data-theme] .raw-status,html[data-theme] .eneba-identity,html[data-theme] .eneba-stock-metrics span,html[data-theme] .key-search-inventory-state,html[data-theme] .key-search-inventory-id { color:var(--ui-muted); }
html[data-theme] :is(.panel,.table-card,.stat,.login-card,.eneba-stock-card,.key-search-match) { background:var(--ui-surface); border-color:var(--ui-border); border-radius:var(--ui-radius); box-shadow:var(--ui-shadow); }
html[data-theme] .flow article,html[data-theme] .inventory-metric,html[data-theme] .binding-current-card,html[data-theme] #marketplace-price-form { background:var(--ui-surface-alt); color:var(--ui-text); border-color:var(--ui-border); border-radius:var(--ui-radius); }
html[data-theme] .login-screen { background:var(--ui-bg); }
html[data-theme] .login-intro :is(h1,p),html[data-theme] .eneba-stock-price,html[data-theme] .inventory-metric strong { color:var(--ui-text); }
html[data-theme] .login-card>p,html[data-theme] #security .panel>p,html[data-theme] .login-platforms { color:var(--ui-muted); }
html[data-theme] :is(input,select,textarea) { background:var(--ui-surface); border-color:var(--ui-border); color:var(--ui-text); border-radius:calc(var(--ui-radius) * .55); }
html[data-theme] :is(input,select,textarea)::placeholder { color:var(--ui-muted); opacity:1; }
html[data-theme] :is(input,select,textarea):focus { border-color:var(--ui-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 18%,transparent); }
html[data-theme] .button { border-radius:calc(var(--ui-radius) * .55); min-height:40px; }
html[data-theme] .primary { background:var(--ui-accent); color:var(--ui-accent-contrast); }
html[data-theme] .primary:hover:not(:disabled) { background:var(--ui-accent); filter:brightness(.92); }
html[data-theme] .subtle { background:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-border); }
html[data-theme] .subtle:hover:not(:disabled) { background:var(--ui-surface-alt); }
html[data-theme] .text-button,html[data-theme] .detail-reference,html[data-theme] .detail-identifiers summary,html[data-theme] .inventory-tool summary { color:var(--ui-accent); }
html[data-theme] :is(button,a,input,select,textarea):focus-visible { outline:2px solid var(--ui-focus,var(--ui-accent)); outline-offset:3px; }
html[data-theme] th { background:var(--ui-surface-alt); color:var(--ui-muted); }
html[data-theme] td { border-color:var(--ui-border); }
html[data-theme] tbody tr:hover { background:color-mix(in srgb,var(--ui-accent) 4%,var(--ui-surface)); }
html[data-theme] .mode-badge,html[data-theme] .nav-item.active,html[data-theme] .dialog-tabs button.active,html[data-theme] .eneba-badge { background:var(--ui-surface-alt); color:var(--ui-accent); border-color:var(--ui-border); }
html[data-theme] .nav-item { color:var(--ui-muted); min-height:44px; align-items:center; }
html[data-theme] .nav-item:hover { color:var(--ui-text); background:var(--ui-surface-alt); }
html[data-theme] .nav-item.active { color:var(--ui-accent); }
html[data-theme] .nav-submenu,html[data-theme] :is(.dialog-tabs,.binding-save-bar,.eneba-stock-metrics,.detail-identifiers,fieldset) { border-color:var(--ui-border); }
html[data-theme] .badge,html[data-theme] .feedback { background:var(--ui-success-bg); color:var(--ui-success); }
html[data-theme] :is(.badge.warning,.badge.orange,.warning-note,.detail-issue) { background:var(--ui-warning-bg); color:var(--ui-warning); }
html[data-theme] .badge.grey { background:var(--ui-surface-alt); color:var(--ui-muted); }
html[data-theme] :is(.feedback.error,.login-card .login-feedback) { background:var(--ui-danger-bg); color:var(--ui-danger); }
html[data-theme] .binding-inline-error { color:var(--ui-danger); }
html[data-theme] :is(.order-issue,.order-cell .order-issue) { color:var(--ui-warning); }
html[data-theme] .callback-url code { color:var(--ui-text); }
html[data-theme] .ui-modal .modal-surface { background:var(--ui-surface); border-color:var(--ui-border); border-radius:var(--ui-radius); color:var(--ui-text); }
html[data-theme] .modal-close { color:var(--ui-muted); }
html[data-theme] .dialog-tabs button { color:var(--ui-muted); }
html[data-theme] .pagination { color:var(--ui-muted); }
html[data-theme] .demo-note { color:var(--ui-muted); }
html[data-theme] .brand-icon { background:var(--ui-accent); color:var(--ui-accent-contrast); }
.appearance-trigger { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.appearance-trigger svg { width:17px; height:17px; }
.topbar-leading { display:flex; gap:12px; align-items:center; min-width:0; }
.login-appearance { position:absolute; top:24px; right:24px; }
.appearance-dialog { width:min(1000px,calc(100% - 48px)); max-height:calc(100dvh - 48px); padding:30px; overflow:auto; border:1px solid var(--ui-border); background:var(--ui-surface); color:var(--ui-text); border-radius:20px; box-shadow:0 30px 100px #0005; }
.appearance-dialog::backdrop { background:#0b102b88; backdrop-filter:blur(6px); }
.appearance-dialog h2 { font-size:26px; margin:0; }
.appearance-heading { display:flex; align-items:start; justify-content:space-between; gap:20px; }
.appearance-close { position:static; flex-shrink:0; min-width:44px; min-height:44px; }
.appearance-description { margin:12px 0 24px; color:var(--ui-muted); font-size:14px; }
.theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.theme-card { min-width:0; padding:0; text-align:left; background:var(--ui-surface); color:var(--ui-text); border:2px solid var(--ui-border); border-radius:14px; overflow:hidden; }
.theme-card[aria-pressed="true"] { border-color:var(--ui-focus,var(--ui-accent)); outline:2px solid var(--ui-focus,var(--ui-accent)); outline-offset:3px; }
.theme-card-title { display:block; font-weight:700; font-size:15px; margin:16px 16px 6px; }
.theme-card-description { display:block; font-weight:400; font-size:12px; line-height:1.55; margin:0 16px 17px; color:var(--ui-muted); }
.theme-preview { display:grid; grid-template-columns:25% 1fr; height:148px; overflow:hidden; padding:10px; gap:8px; background:#f4f3fc; }
.preview-sidebar { padding:10px 7px; border-radius:7px; background:#fff; display:flex; flex-direction:column; gap:9px; }
.preview-sidebar i { display:block; height:5px; background:#c9c2df; border-radius:3px; }
.preview-sidebar i:first-child { height:14px; width:65%; margin-bottom:10px; background:#6743cc; }
.preview-sidebar i:nth-child(3) { background:#6743cc; }
.preview-main { min-width:0; display:flex; flex-direction:column; gap:8px; padding:5px; }
.preview-main>b { font-size:14px; color:#26203e; text-align:left; }
.preview-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.preview-stat { background:#fff; border-radius:6px; padding:7px 5px; color:#6743cc; font-size:12px; font-weight:700; }
.preview-table { background:#fff; border-radius:7px; padding:3px 7px; }
.preview-row { display:flex; gap:10px; padding:7px 0; border-bottom:1px solid #e8e3f1; }
.preview-row i { display:block; height:4px; width:50%; border-radius:2px; background:#b8b0cc; }
.preview-row i:last-child { width:20%; margin-left:auto; background:#6743cc; }
.appearance-status { margin:24px 0 0; color:var(--ui-muted); font-size:13px; }
#security .appearance-panel { max-width:none; }
@media(max-width:850px) { .theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:540px) { .appearance-dialog { width:100%; max-height:100dvh; height:100dvh; margin:0; border-radius:0; padding:20px 16px; } .theme-grid { grid-template-columns:1fr; } .theme-preview { height:170px; } .login-appearance { top:12px; right:12px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }