/* Sepuluh tampilan. Studio memakai gaya bawaan di app.css. */
html[data-theme="aurora"] {
    --ink: #241b3a; --muted: #746b90; --primary: #5b4bdb; --primary-dark: #3b2e9e; --bg: #f4f2fb; --border: #e3def3;
    --on-primary: #fff; --surface: #fff; --sidebar: #fff; --sidebar-ink: #241b3a; --sidebar-muted: #746b90;
    --nav-active: #ece8ff; --nav-active-ink: #3b2e9e; --board: #f6f4fc; --field: #fff; --guide: #f1edff;
    --mark: #3b2e9e; --mark-ink: #e4e0ff; --radius: 16px; --radius-sm: 12px; --tracking: -0.4px;
    --shadow: 0 10px 28px #3b2e9e14; font-family: "Segoe UI", Candara, sans-serif;
}
html[data-theme="midnight"] {
    --ink: #e8eef4; --muted: #9aabba; --primary: #2ec4b6; --primary-dark: #14998d; --bg: #101418; --border: #2c3844;
    --on-primary: #04221f; --surface: #1a2128; --sidebar: #0c1116; --sidebar-ink: #e8eef4; --sidebar-muted: #93a4b5;
    --nav-active: #16343a; --nav-active-ink: #bff7f1; --board: #141b22; --field: #12181e; --guide: #152028;
    --mark: #14998d; --mark-ink: #e7fffb; --radius: 14px; --radius-sm: 10px; --tracking: -0.3px;
    --shadow: none; color-scheme: dark; font-family: "Segoe UI", sans-serif;
}
html[data-theme="signal"] {
    --ink: #111; --muted: #4e4e4e; --primary: #111; --primary-dark: #000; --bg: #f3f3f1; --border: #111;
    --on-primary: #fff; --surface: #fff; --sidebar: #111; --sidebar-ink: #f6f6f2; --sidebar-muted: #c9c9c0;
    --nav-active: #e8ff47; --nav-active-ink: #111; --board: #ecece8; --field: #fff; --guide: #f7f7c8;
    --mark: #e8ff47; --mark-ink: #111; --radius: 0px; --radius-sm: 0px; --tracking: 0;
    --shadow: none; font-family: Arial, "Segoe UI", sans-serif;
}
html[data-theme="coast"] {
    --ink: #163044; --muted: #688093; --primary: #0f6e8c; --primary-dark: #0b5168; --bg: #f3f7fb; --border: #d5e3ec;
    --on-primary: #fff; --surface: #fff; --sidebar: #fff; --sidebar-ink: #163044; --sidebar-muted: #688093;
    --nav-active: #e5f4f8; --nav-active-ink: #0b5168; --board: #eef5f8; --field: #fff; --guide: #e7f3f7;
    --mark: #0b5168; --mark-ink: #d7f3f8; --radius: 18px; --radius-sm: 14px; --tracking: -0.4px;
    --shadow: 0 8px 24px #0f6e8c12; font-family: "Segoe UI", sans-serif;
}
html[data-theme="workshop"] {
    --ink: #3a2a1c; --muted: #8a7360; --primary: #b8612a; --primary-dark: #8d4318; --bg: #f6f1e8; --border: #e4d5c4;
    --on-primary: #fff; --surface: #fffdf8; --sidebar: #fffdf8; --sidebar-ink: #3a2a1c; --sidebar-muted: #8a7360;
    --nav-active: #f8eadb; --nav-active-ink: #8d4318; --board: #f3ebe1; --field: #fff; --guide: #f8ecdf;
    --mark: #8d4318; --mark-ink: #f8e2cf; --radius: 10px; --radius-sm: 8px; --tracking: -0.2px;
    --shadow: 0 3px 10px #3a2a1c0d; font-family: "Segoe UI", sans-serif;
}
html[data-theme="paper"] {
    --ink: #2a2622; --muted: #756e66; --primary: #2f4f4a; --primary-dark: #1e3330; --bg: #f7f4ee; --border: #e0d8cc;
    --on-primary: #fff; --surface: #fff; --sidebar: #fbf9f5; --sidebar-ink: #2a2622; --sidebar-muted: #756e66;
    --nav-active: #efe8dc; --nav-active-ink: #1e3330; --board: #f3efe7; --field: #fff; --guide: #f3eee4;
    --mark: #1e3330; --mark-ink: #f3e6c8; --radius: 4px; --radius-sm: 3px; --tracking: 0;
    --shadow: none; font-family: Georgia, "Palatino Linotype", serif;
}
html[data-theme="ledger"] {
    --ink: #1c2836; --muted: #617287; --primary: #1e3a5f; --primary-dark: #14283f; --bg: #eef1f4; --border: #cfd6df;
    --on-primary: #fff; --surface: #fff; --sidebar: #1e3a5f; --sidebar-ink: #f4f7fa; --sidebar-muted: #c5d0dc;
    --nav-active: #2c5282; --nav-active-ink: #fff; --board: #e7ebf0; --field: #fff; --guide: #e7eef6;
    --mark: #14283f; --mark-ink: #d6e4f2; --radius: 2px; --radius-sm: 2px; --tracking: 0;
    --shadow: none; font-family: "Segoe UI", Tahoma, sans-serif;
}
html[data-theme="press"] {
    --ink: #1a1a1a; --muted: #5c5850; --primary: #1a1a1a; --primary-dark: #000; --bg: #f4f1ea; --border: #1a1a1a;
    --on-primary: #f4f1ea; --surface: #fffef9; --sidebar: #f4f1ea; --sidebar-ink: #1a1a1a; --sidebar-muted: #5c5850;
    --nav-active: #1a1a1a; --nav-active-ink: #f4f1ea; --board: #efece4; --field: #fffef9; --guide: #f7f1e4;
    --mark: #1a1a1a; --mark-ink: #f4f1ea; --radius: 0px; --radius-sm: 0px; --tracking: 0;
    --shadow: none; font-family: Georgia, "Times New Roman", serif;
}
html[data-theme="heritage"] {
    --ink: #3b2418; --muted: #8a6f5b; --primary: #7a2432; --primary-dark: #561823; --bg: #f6f0e6; --border: #e4d3bc;
    --on-primary: #f8efe2; --surface: #fffaf2; --sidebar: #4a1c24; --sidebar-ink: #f8efe2; --sidebar-muted: #e4c9b0;
    --nav-active: #6b2a34; --nav-active-ink: #f3e2b3; --board: #f3e8d8; --field: #fffaf2; --guide: #f8ecd8;
    --mark: #6b2a34; --mark-ink: #e4c57a; --radius: 2px; --radius-sm: 2px; --tracking: 0;
    --shadow: 0 1px 0 #e4c57a; font-family: Georgia, "Palatino Linotype", serif;
}

html[data-theme]:not([data-theme="studio"]) body,
html[data-theme]:not([data-theme="studio"]) .simple-login,
html[data-theme]:not([data-theme="studio"]) .tracking-page,
html[data-theme]:not([data-theme="studio"]) .auth-page { background: var(--bg); color: var(--ink); }
html[data-theme]:not([data-theme="studio"]) :is(h1, h2, .brand) { letter-spacing: var(--tracking); }
html[data-theme]:not([data-theme="studio"]) .button.primary { color: var(--on-primary); border-radius: var(--radius-sm); }
html[data-theme]:not([data-theme="studio"]) .button.secondary {
    background: var(--surface); color: var(--ink); border-color: var(--border); border-radius: var(--radius-sm);
}
html[data-theme]:not([data-theme="studio"]) .button.secondary:hover,
html[data-theme]:not([data-theme="studio"]) .icon-button:hover { background: var(--board); }
html[data-theme]:not([data-theme="studio"]) .icon-button { color: var(--muted); }
html[data-theme]:not([data-theme="studio"]) a:hover { color: var(--primary-dark); }
html[data-theme]:not([data-theme="studio"]) :focus-visible { outline-color: var(--primary); }

html[data-theme]:not([data-theme="studio"]) .sidebar {
    background: var(--sidebar); color: var(--sidebar-ink); border-right-color: var(--border);
}
html[data-theme]:not([data-theme="studio"]) .sidebar .brand,
html[data-theme]:not([data-theme="studio"]) .sidebar .sidebar-foot { color: var(--sidebar-ink); }
html[data-theme]:not([data-theme="studio"]) .sidebar .brand small,
html[data-theme]:not([data-theme="studio"]) .sidebar .nav-caption,
html[data-theme]:not([data-theme="studio"]) .sidebar .sidebar-foot small,
html[data-theme]:not([data-theme="studio"]) .sidebar .workspace-label,
html[data-theme]:not([data-theme="studio"]) .sidebar .customer-link { color: var(--sidebar-muted); }
html[data-theme]:not([data-theme="studio"]) .sidebar .workspace-label,
html[data-theme]:not([data-theme="studio"]) .sidebar .customer-link {
    background: transparent; border-color: color-mix(in srgb, var(--sidebar-ink) 18%, transparent);
}
html[data-theme]:not([data-theme="studio"]) .nav-link { color: var(--sidebar-muted); border-radius: var(--radius-sm); }
html[data-theme]:not([data-theme="studio"]) .nav-link:hover { background: color-mix(in srgb, var(--sidebar-ink) 8%, transparent); color: var(--sidebar-ink); }
html[data-theme]:not([data-theme="studio"]) .nav-link.active { background: var(--nav-active); color: var(--nav-active-ink); }
html[data-theme]:not([data-theme="studio"]) .brand-mark { background: var(--mark); color: var(--mark-ink); border-radius: var(--radius-sm); }
html[data-theme]:not([data-theme="studio"]) .topbar { background: var(--surface); border-bottom-color: var(--border); }
html[data-theme]:not([data-theme="studio"]) .account-link,
html[data-theme]:not([data-theme="studio"]) .breadcrumb strong { color: var(--ink); }
html[data-theme]:not([data-theme="studio"]) .breadcrumb,
html[data-theme]:not([data-theme="studio"]) .today-date,
html[data-theme]:not([data-theme="studio"]) .account-link small,
html[data-theme]:not([data-theme="studio"]) .page-heading p,
html[data-theme]:not([data-theme="studio"]) .page-footer { color: var(--muted); }

html[data-theme]:not([data-theme="studio"]) :is(.panel, .production-panel, .stat-card, .order-card, .login-box, .modal, .settings-savebar) {
    background: var(--surface); border-color: var(--border); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
}
html[data-theme]:not([data-theme="studio"]) .board-column { background: var(--board); border-color: var(--border); border-radius: var(--radius); }
html[data-theme]:not([data-theme="studio"]) .column-heading,
html[data-theme]:not([data-theme="studio"]) .card-actions,
html[data-theme]:not([data-theme="studio"]) .board-footer,
html[data-theme]:not([data-theme="studio"]) .settings-card-heading,
html[data-theme]:not([data-theme="studio"]) .settings-card-footer,
html[data-theme]:not([data-theme="studio"]) .permission-row,
html[data-theme]:not([data-theme="studio"]) .data-table th,
html[data-theme]:not([data-theme="studio"]) .data-table td { border-color: var(--border); }
html[data-theme]:not([data-theme="studio"]) :is(.card-name, .stat-card > strong, .column-heading h3, .timeline strong, .empty-inner strong) { color: var(--ink); }
html[data-theme]:not([data-theme="studio"]) :is(.card-phone, .card-date, .stat-top, .stat-card > small, .column-count, .board-footer, .column-empty, .data-table th, .data-table td small, .permission-row small, .timeline small, .timeline p, .detail-meta, .detail-customer small) { color: var(--muted); }
html[data-theme]:not([data-theme="studio"]) .data-table td { color: var(--ink); }
html[data-theme]:not([data-theme="studio"]) .data-table th,
html[data-theme]:not([data-theme="studio"]) .data-table tbody tr:hover,
html[data-theme]:not([data-theme="studio"]) .detail-customer,
html[data-theme]:not([data-theme="studio"]) .status-form,
html[data-theme]:not([data-theme="studio"]) .settings-card-footer,
html[data-theme]:not([data-theme="studio"]) .live-status,
html[data-theme]:not([data-theme="studio"]) .avatar,
html[data-theme]:not([data-theme="studio"]) .close-button { background: var(--board); color: var(--ink); }
html[data-theme]:not([data-theme="studio"]) .data-table th { color: var(--muted); }
html[data-theme]:not([data-theme="studio"]) .invoice-number,
html[data-theme]:not([data-theme="studio"]) .card-actions button,
html[data-theme]:not([data-theme="studio"]) .eyebrow { color: var(--primary); }
html[data-theme]:not([data-theme="studio"]) .card-actions .card-detail { color: var(--muted); }
html[data-theme]:not([data-theme="studio"]) .info-strip,
html[data-theme]:not([data-theme="studio"]) .settings-guide { background: var(--guide); border-color: var(--border); color: var(--ink); }
html[data-theme]:not([data-theme="studio"]) .info-strip p,
html[data-theme]:not([data-theme="studio"]) .info-strip strong,
html[data-theme]:not([data-theme="studio"]) .info-strip > a,
html[data-theme]:not([data-theme="studio"]) .settings-guide p { color: var(--muted); }
html[data-theme]:not([data-theme="studio"]) .settings-heading-icon,
html[data-theme]:not([data-theme="studio"]) .settings-guide-icon,
html[data-theme]:not([data-theme="studio"]) .settings-step { background: var(--board); color: var(--primary); border-color: var(--border); }
html[data-theme]:not([data-theme="studio"]) .settings-card-heading p,
html[data-theme]:not([data-theme="studio"]) .settings-card-footer > span,
html[data-theme]:not([data-theme="studio"]) .settings-tabs button { color: var(--muted); }
html[data-theme]:not([data-theme="studio"]) .settings-tabs button:hover { background: var(--board); color: var(--primary); }
html[data-theme]:not([data-theme="studio"]) .settings-tabs button[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
html[data-theme]:not([data-theme="studio"]) .stack > label,
html[data-theme]:not([data-theme="studio"]) .form-content > label,
html[data-theme]:not([data-theme="studio"]) .settings-card-body label { color: var(--ink); }
html[data-theme]:not([data-theme="studio"]) :is(input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]), select, textarea) {
    background: var(--field); color: var(--ink); border-color: var(--border); border-radius: var(--radius-sm);
}
html[data-theme]:not([data-theme="studio"]) .search-field input { background: var(--field) !important; }
html[data-theme]:not([data-theme="studio"]) input::placeholder,
html[data-theme]:not([data-theme="studio"]) textarea::placeholder { color: var(--muted); }
html[data-theme]:not([data-theme="studio"]) .message-preview,
html[data-theme]:not([data-theme="studio"]) .template-preview-panel,
html[data-theme]:not([data-theme="studio"]) .template-variables { background: var(--board); color: var(--ink); border-color: var(--border); }
html[data-theme]:not([data-theme="studio"]) .toast { background: var(--primary-dark); color: var(--on-primary); }
html[data-theme]:not([data-theme="studio"]) :is(.tracking-intro, .current-stage p, .tracking-steps small, .tracking-step-note, .tracking-updated, .tracking-footer, .tracking-help, .auth-footer) { color: var(--muted); }
html[data-theme]:not([data-theme="studio"]) .tracking-steps .current > span { background: var(--primary); color: var(--on-primary); }
html[data-theme]:not([data-theme="studio"]) .tracking-steps .current small { color: var(--primary); }

html[data-theme="ledger"] :is(h1, h2, .brand) { font-family: Georgia, "Palatino Linotype", serif; }
html[data-theme="press"] .sidebar { border-right-width: 2px; }
html[data-theme="press"] :is(.panel, .order-card, .stat-card, .login-box) { border-color: #1a1a1a; }
html[data-theme="heritage"] .brand-mark { box-shadow: inset 0 0 0 1px #e4c57a; }
@media (max-width: 700px) {
    html[data-theme]:not([data-theme="studio"]) .settings-tabs { background: var(--surface); border-color: var(--border); }
    html[data-theme]:not([data-theme="studio"]) .settings-tabs button[aria-selected="true"] { background: var(--nav-active); color: var(--nav-active-ink); }
}