/* Zuno Admin: light and dark themes. Dark is the default; light is switched on with data-theme="light" on <html>. Loaded last. */
:root:is([data-theme="light"],[data-theme="studio"]) {
    color-scheme: light;
    --bg: #f3f5f9; --bg-deep: #ffffff; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9;
    --line: #dbe2ec; --line-soft: #e5eaf2;
    --text: #243247; --text-strong: #0f1b2d; --muted: #526278; --faint: #66768c;
    --accent: #0d9488; --accent-soft: #0f766e; --accent-bg: rgba(13, 148, 136, .1);
    --danger: #dc2626; --danger-soft: #b91c1c; --warn: #b45309; --ok: #15803d;
}
:root:is([data-theme="light"],[data-theme="studio"]) body { background: var(--bg); color: var(--text); }
:root:is([data-theme="light"],[data-theme="studio"]) .sidebar { background: var(--bg-deep); box-shadow: 1px 0 0 var(--line-soft); }
:root:is([data-theme="light"],[data-theme="studio"]) .nav-group-label { color: #7b8aa0; }
:root:is([data-theme="light"],[data-theme="studio"]) .sidebar .tab-btn > .admin-icon { color: #6b7c93; }
:root:is([data-theme="light"],[data-theme="studio"]) .sidebar .tab-btn:hover { background: #0f1b2d0a; color: var(--text-strong); }
:root:is([data-theme="light"],[data-theme="studio"]) .sidebar .tab-btn.active { background: var(--accent-bg); border-color: rgba(13, 148, 136, .28); color: var(--accent-soft); }
:root:is([data-theme="light"],[data-theme="studio"]) .sidebar .tab-btn.active > .admin-icon { color: var(--accent); }
:root:is([data-theme="light"],[data-theme="studio"]) .btn-primary { background: var(--accent); color: #fff; }
:root:is([data-theme="light"],[data-theme="studio"]) .btn-primary:hover { background: #0f766e; }
:root:is([data-theme="light"],[data-theme="studio"]) .btn-secondary { background: #e8edf4; color: var(--text-strong); }
:root:is([data-theme="light"],[data-theme="studio"]) .btn-secondary:hover { background: #dce4ee; }
:root:is([data-theme="light"],[data-theme="studio"]) .btn-signout-muted { background: #0f1b2d08; border-color: var(--line); color: var(--muted); }
:root:is([data-theme="light"],[data-theme="studio"]) .btn-signout-muted:hover { background: rgba(220, 38, 38, .08); color: var(--danger-soft); }
:root:is([data-theme="light"],[data-theme="studio"]) .table-wrap { background: var(--surface); box-shadow: 0 1px 2px rgba(15, 27, 45, .05); }
:root:is([data-theme="light"],[data-theme="studio"]) tr:hover td, :root:is([data-theme="light"],[data-theme="studio"]) tr.keyboard-selected td { background: #f1f6fa; }
:root:is([data-theme="light"],[data-theme="studio"]) .stat-card, :root:is([data-theme="light"],[data-theme="studio"]) .panel-card, :root:is([data-theme="light"],[data-theme="studio"]) .catalog-plan-card, :root:is([data-theme="light"],[data-theme="studio"]) .ticket-card, :root:is([data-theme="light"],[data-theme="studio"]) .zai-card { box-shadow: 0 1px 2px rgba(15, 27, 45, .05); }
:root:is([data-theme="light"],[data-theme="studio"]) .stat-card { background: var(--surface); }
:root:is([data-theme="light"],[data-theme="studio"]) #error-banner { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
:root:is([data-theme="light"],[data-theme="studio"]) #denied-screen, :root:is([data-theme="light"],[data-theme="studio"]) #denied-card h2 { color: #b91c1c; }
:root:is([data-theme="light"],[data-theme="studio"]) #login-card, :root:is([data-theme="light"],[data-theme="studio"]) #denied-card { box-shadow: 0 20px 60px rgba(15, 27, 45, .12); }
:root:is([data-theme="light"],[data-theme="studio"]) #app-loading { background: var(--bg); }
:root:is([data-theme="light"],[data-theme="studio"]) #app-loading p { color: var(--muted); }
:root:is([data-theme="light"],[data-theme="studio"]) #app-loading .zuno-startup-signal { background: #fff; color: var(--text); border-color: var(--line); }
:root:is([data-theme="light"],[data-theme="studio"]) .ticket-status-tag--open { background: #fef3c7; color: #92400e; }
:root:is([data-theme="light"],[data-theme="studio"]) .ticket-status-tag--resolved { background: #dcfce7; color: #166534; }
:root:is([data-theme="light"],[data-theme="studio"]) .staff-role-tag.owner-tag { background: #fef3c7; color: #92400e; }
:root:is([data-theme="light"],[data-theme="studio"]) .ticket-msg, :root:is([data-theme="light"],[data-theme="studio"]) .catalog-plan-card .features { color: var(--text); }
:root:is([data-theme="light"],[data-theme="studio"]) .ticket-reply-count { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
:root:is([data-theme="light"],[data-theme="studio"]) .ticket-reply-item, :root:is([data-theme="light"],[data-theme="studio"]) .ticket-reply-box textarea, :root:is([data-theme="light"],[data-theme="studio"]) .staff-row-detail, :root:is([data-theme="light"],[data-theme="studio"]) .detail-meta-grid { background: var(--surface-3); }
:root:is([data-theme="light"],[data-theme="studio"]) .staff-perm-chip { background: #fff; border: 1px solid var(--line); }
:root:is([data-theme="light"],[data-theme="studio"]) .staff-perm-chip.granted { color: #0f766e; }
:root:is([data-theme="light"],[data-theme="studio"]) .brand-preview { background: linear-gradient(135deg, #f8fafc, #e8eef6); border-color: #b9c6d8; }
:root:is([data-theme="light"],[data-theme="studio"]) .modal-overlay { background: rgba(15, 27, 45, .45); }
:root:is([data-theme="light"],[data-theme="studio"]) .modal-box { background: #fff; box-shadow: 0 24px 70px rgba(15, 27, 45, .22); }
:root:is([data-theme="light"],[data-theme="studio"]) .fullscreen-panel { background: var(--bg); }
:root:is([data-theme="light"],[data-theme="studio"]) .fullscreen-panel-header { background: #fff; }
:root:is([data-theme="light"],[data-theme="studio"]) .plan-option.selected { background: rgba(13, 148, 136, .08); }
:root:is([data-theme="light"],[data-theme="studio"]) #promo-active-banner { background: #fffbeb; border-color: #fde68a; }
:root:is([data-theme="light"],[data-theme="studio"]) .catalog-plan-card .inactive-tag { color: #b91c1c; }
:root:is([data-theme="light"],[data-theme="studio"]) .env-pill { background: #e8edf4; color: var(--muted); }
:root:is([data-theme="light"],[data-theme="studio"]) input, :root:is([data-theme="light"],[data-theme="studio"]) select, :root:is([data-theme="light"],[data-theme="studio"]) textarea { color: var(--text-strong); }
:root:is([data-theme="light"],[data-theme="studio"]) .field-input, :root:is([data-theme="light"],[data-theme="studio"]) #search-input, :root:is([data-theme="light"],[data-theme="studio"]) select { background: #fff; border-color: var(--line); }
:root:is([data-theme="light"],[data-theme="studio"]) ::placeholder { color: #8795a9; }
:root:is([data-theme="light"],[data-theme="studio"]) .admin-bottom-nav { background: rgba(255, 255, 255, .96); border-top-color: var(--line); }
@media (max-width: 800px) {
    :root:is([data-theme="light"],[data-theme="studio"]) .sidebar { background: rgba(255, 255, 255, .96); }
    :root:is([data-theme="light"],[data-theme="studio"]) .sidebar-nav { background: #fff; box-shadow: 24px 0 60px rgba(15, 27, 45, .18); }
    :root:is([data-theme="light"],[data-theme="studio"]) .fullscreen-panel-header { background: rgba(255, 255, 255, .97); }
    :root:is([data-theme="light"],[data-theme="studio"]) .mobile-nav-backdrop { background: rgba(15, 27, 45, .4); }
}
/* Theme switch button in the menu */
.theme-switch { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .5rem; background: rgba(148, 163, 184, .08); color: var(--muted); border: 1px solid var(--line); font-size: .8rem; }
.theme-switch:hover { color: var(--text-strong); border-color: var(--faint); }
.theme-switch .admin-icon { width: 16px; height: 16px; }
.theme-switch .ts-moon { display: none; }
:root:is([data-theme="light"],[data-theme="studio"]) .theme-switch .ts-moon { display: inline; }
:root:is([data-theme="light"],[data-theme="studio"]) .theme-switch .ts-sun { display: none; }
@media (max-width: 800px) {
    .theme-switch { width: 34px; height: 34px; padding: 0; margin: 0; font-size: 0; border-radius: .6rem; }
    .theme-switch span { display: none; }
}

/* ---------- Shared pieces: segmented tabs, header actions, bell, support tickets ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: .35rem; padding: .3rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.seg-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; min-height: 38px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font-size: .85rem; font-weight: 600; }
.seg-btn:hover { color: var(--text-strong); }
.seg-btn.on { background: var(--accent-bg); border-color: rgba(98, 205, 185, .35); color: var(--accent-soft); }
.seg-btn b { min-width: 1.4rem; padding: .05rem .45rem; border-radius: 999px; background: var(--line); color: var(--text-strong); font-size: .72rem; font-weight: 700; text-align: center; }
.seg-btn.on b { background: var(--accent); color: #04120f; }
:root:is([data-theme="light"],[data-theme="studio"]) .seg-btn.on b { color: #fff; }
.tk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }

.hdr-actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.bell-wrap { position: relative; }
.bell-btn { position: relative; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); }
.bell-btn:hover { border-color: var(--accent); color: var(--accent-soft); }
.bell-count { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 0 0 2px var(--bg); }
.bell-count[hidden], .bell-panel[hidden] { display: none; }
.bell-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(380px, 92vw); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: hidden; }
:root:is([data-theme="light"],[data-theme="studio"]) .bell-panel { box-shadow: 0 20px 50px rgba(15, 27, 45, .16); }
.bell-head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.bell-read { padding: .25rem .5rem; background: none; color: var(--accent-soft); font-size: .78rem; font-weight: 600; }
.bell-list { max-height: min(60vh, 420px); overflow-y: auto; }
.bell-item { width: 100%; display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; border-radius: 0; border-bottom: 1px solid var(--line-soft); background: none; color: var(--text); text-align: left; font-weight: 500; }
.bell-item:hover { background: var(--surface-3); }
.bell-item strong { display: block; font-size: .85rem; font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.bell-item small { display: block; margin-top: .15rem; color: var(--faint); font-size: .74rem; }
.bell-dot { flex: none; width: 8px; height: 8px; margin-top: .4rem; border-radius: 50%; background: transparent; }
.bell-item.is-new .bell-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.bell-empty { margin: 0; padding: 1.6rem 1rem; text-align: center; color: var(--faint); font-size: .85rem; }

.tk-card { margin-bottom: .6rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; transition: border-color .15s; }
.tk-card:hover, .tk-card.is-open { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tk-head { width: 100%; display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: 0; background: none; color: var(--text); text-align: left; font-weight: 500; }
.tk-av { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-bg); color: var(--accent-soft); font-weight: 800; }
.tk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.tk-subject { font-weight: 700; color: var(--text-strong); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-sub { color: var(--faint); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-prev { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-chev { flex: none; color: var(--faint); transition: transform .2s; }
.tk-card.is-open .tk-chev { transform: rotate(180deg); }
.tk-card.is-resolved .tk-subject { color: var(--muted); }
.tk-body { padding: .2rem 1rem 1rem 1rem; border-top: 1px solid var(--line-soft); display: grid; gap: .6rem; }
.tk-bubble { max-width: 760px; padding: .7rem .9rem; border-radius: 12px 12px 12px 4px; background: var(--surface-3); font-size: .88rem; }
.tk-bubble.admin { margin-left: auto; border-radius: 12px 12px 4px 12px; background: var(--accent-bg); border: 1px solid rgba(98, 205, 185, .25); }
.tk-bubble p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.tk-bubble .who { margin-bottom: .2rem; color: var(--faint); font-size: .7rem; font-weight: 700; }
.tk-files { display: flex; gap: .5rem; }
.tk-files img { width: 3.5rem; height: 3.5rem; border-radius: .5rem; object-fit: cover; border: 1px solid var(--line); cursor: pointer; }
.tk-card .ticket-reply-box textarea { background: var(--surface-3); }
@media (max-width: 800px) {
    .hdr-actions { gap: .5rem; }
    .bell-btn { width: 38px; height: 38px; }
    .bell-panel { position: fixed; left: 8px; right: 8px; top: 64px; width: auto; }
    .tk-head { padding: .7rem .75rem; gap: .6rem; }
    .tk-toolbar { flex-wrap: wrap; }
    .seg-btn { min-height: 36px; padding: .4rem .8rem; }
}

/* ---------- Plans & pricing ---------- */
.plans-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.pg { margin-top: 1.6rem; }
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }
.pg-head h3 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.05rem; color: var(--text-strong); }
.pg-head h3 span { padding: .1rem .55rem; border-radius: 999px; background: var(--line); color: var(--muted); font-size: .72rem; font-weight: 700; }
.pg-empty { margin: 0; color: var(--faint); font-size: .85rem; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.pc { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 1.2rem 1.2rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; transition: border-color .15s, transform .15s; }
.pc::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--pc, var(--accent)); }
.pc:hover { border-color: color-mix(in srgb, var(--pc, var(--accent)) 55%, var(--line)); }
.pc.is-hidden { opacity: .7; }
.pc-top { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.pc-name { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--text-strong); }
.pc-badge { padding: .12rem .55rem; border-radius: 999px; background: var(--accent); color: #04120f; font-size: .66rem; font-weight: 800; }
:root:is([data-theme="light"],[data-theme="studio"]) .pc-badge { color: #fff; }
.pc-state { padding: .12rem .55rem; border-radius: 999px; background: var(--line); color: var(--muted); font-size: .66rem; font-weight: 700; }
.pc-state.warn { background: rgba(251, 191, 36, .16); color: var(--warn); }
.pc-tag { margin: 0; min-height: 2.4em; color: var(--muted); font-size: .84rem; line-height: 1.4; }
.pc-price { display: flex; align-items: baseline; gap: .3rem; }
.pc-price b { font-size: 1.9rem; letter-spacing: -.03em; color: var(--text-strong); }
.pc-price small { color: var(--faint); font-size: .82rem; }
.pc-lim { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: 0; padding: .65rem .5rem; border-radius: 12px; background: var(--surface-3); }
.pc-lim div { text-align: center; min-width: 0; }
.pc-lim dt { color: var(--faint); font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.pc-lim dd { margin: .15rem 0 0; font-size: .95rem; font-weight: 800; color: var(--text-strong); }
.pc-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.pc-chips span { padding: .18rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .7rem; }
.pc-chips .more, .pc-chips .none { border-style: dashed; color: var(--faint); }
.pc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .8rem; border-top: 1px solid var(--line-soft); }
.pc-foot code { color: var(--faint); font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-actions { display: flex; gap: .35rem; flex: none; }
.pc-del:hover { background: rgba(239, 68, 68, .14); color: var(--danger-soft); }
.pg-legacy { margin-top: 1.8rem; border: 1px dashed var(--line); border-radius: 14px; padding: .9rem 1rem; }
.pg-legacy summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: .9rem; }
.pg-legacy summary span { margin: 0 .4rem; padding: .08rem .5rem; border-radius: 999px; background: var(--line); font-size: .72rem; }
.pg-legacy .pc-grid { margin-top: 1rem; }
[data-plans-pane][hidden] { display: none; }
@media (max-width: 800px) { .pc-grid { grid-template-columns: 1fr; } .pc-lim { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Revenue and Settings ---------- */
.seg-btn.active { background: var(--accent-bg); border-color: rgba(98, 205, 185, .35); color: var(--accent-soft); }
.seg a.seg-btn { text-decoration: none; }
.settings-jumps.seg { display: inline-flex; margin-bottom: 1.2rem; }
.settings-jumps .seg-btn { font-size: .85rem; padding: .5rem .95rem; border-radius: 9px; background: transparent; }
@media (min-width: 801px) {
    .settings-grid > section { display: none; }
    .settings-grid[data-sec="loc"] > #global-business-allowance, .settings-grid[data-sec="loc"] > #lifecycle-settings,
    .settings-grid[data-sec="signin"] > #login-background-settings, .settings-grid[data-sec="share"] > #social-share-settings,
    .settings-grid[data-sec="pay"] > #online-payments-settings { display: block; }
}
.rv-wrap { margin-top: .6rem; }
.rv-wrap table { min-width: 0 !important; }
.rv-wrap tr { cursor: default; }
#tab-revenue .detail-section-label, #tab-settings .detail-section-label { margin-top: 1.6rem; color: var(--text-strong); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
#tab-revenue .stats-row .num { letter-spacing: -.02em; }
#tab-settings .panel-card { max-width: 980px; }
#tab-settings .panel-card h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
@media (max-width: 800px) { .settings-jumps.seg { display: none; } }

@media (max-width: 800px) {
    .seg { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; }
    .seg::-webkit-scrollbar { display: none; }
    .seg-btn { flex: 1 0 auto; justify-content: center; white-space: nowrap; }
    .sidebar-footer { flex-direction: row !important; align-items: center; }
    .sidebar-footer .theme-switch { margin: 0 .4rem 0 0; }
    .tk-toolbar .seg { width: 100%; }
    .tk-toolbar #tickets-refresh-btn { width: 100%; }
}

/* ---------- Light mode: leftovers that were still dark (buttons, drop-downs, editor, bars) ---------- */
:root:is([data-theme="light"],[data-theme="studio"]) .btn-secondary { background: #eef2f7; border: 1px solid #d3dbe7; color: var(--text-strong); }
:root:is([data-theme="light"],[data-theme="studio"]) .btn-secondary:hover { background: #e2e8f1; border-color: #bcc8d9; }
:root:is([data-theme="light"],[data-theme="studio"]) .btn-secondary:disabled, :root:is([data-theme="light"],[data-theme="studio"]) .btn-primary:disabled { opacity: .55; }
:root:is([data-theme="light"],[data-theme="studio"]) .btn-danger { background: #dc2626; color: #fff; }
:root:is([data-theme="light"],[data-theme="studio"]) .modal-overlay { background: rgba(15, 27, 45, .45); backdrop-filter: blur(4px); }
:root:is([data-theme="light"],[data-theme="studio"]) #plan-editor-template { background: #fff; color: var(--text-strong); border: 1px solid var(--line); }
:root:is([data-theme="light"],[data-theme="studio"]) #plan-editor-overlay .modal-actions { background: #fff; border-top-color: var(--line); }
:root:is([data-theme="light"],[data-theme="studio"]) #plan-editor-overlay .modal-box { background: var(--bg); }
:root:is([data-theme="light"],[data-theme="studio"]) #plan-editor-overlay .bundle-section { background: #fff; border-color: var(--line); }
:root:is([data-theme="light"],[data-theme="studio"]) #plan-editor-overlay .bundle-note, :root:is([data-theme="light"],[data-theme="studio"]) #plan-editor-overlay .bundle-template p { color: var(--muted); }
:root:is([data-theme="light"],[data-theme="studio"]) #plan-editor-overlay .bundle-template { background: rgba(13, 148, 136, .06); border-color: rgba(13, 148, 136, .35); }
:root:is([data-theme="light"],[data-theme="studio"]) #plan-editor-bundle-summary { color: var(--accent-soft); }
:root:is([data-theme="light"],[data-theme="studio"]) #plan-editor-overlay select, :root:is([data-theme="light"],[data-theme="studio"]) #plan-editor-overlay input:not([type=checkbox]), :root:is([data-theme="light"],[data-theme="studio"]) #plan-editor-overlay textarea { background: #fff; color: var(--text-strong); border: 1px solid var(--line); border-radius: 9px; }
:root:is([data-theme="light"],[data-theme="studio"]) .org-avatar, :root:is([data-theme="light"],[data-theme="studio"]) .staff-avatar { background: var(--accent-bg); border-color: rgba(13, 148, 136, .25); }
:root:is([data-theme="light"],[data-theme="studio"]) .admin-bottom-nav > button { color: #5b6c83; }
:root:is([data-theme="light"],[data-theme="studio"]) .admin-bottom-nav > button.active, :root:is([data-theme="light"],[data-theme="studio"]) .admin-bottom-nav > button.is-current { color: var(--accent-soft); background: var(--accent-bg); }
:root:is([data-theme="light"],[data-theme="studio"]) .mobile-settings-icon { background: var(--accent-bg); border-color: rgba(13, 148, 136, .25); }
:root:is([data-theme="light"],[data-theme="studio"]) .mobile-nav-toggle { background: #fff; color: var(--text-strong); }
:root:is([data-theme="light"],[data-theme="studio"]) .plan-breakdown, :root:is([data-theme="light"],[data-theme="studio"]) #cost-recommendations-panel { background: #fff; }
:root:is([data-theme="light"],[data-theme="studio"]) .table-wrap { scrollbar-color: #b8c4d6 transparent; }
:root:is([data-theme="light"],[data-theme="studio"]) table th { color: var(--muted); }
:root:is([data-theme="light"],[data-theme="studio"]) details > summary { color: var(--text-strong); }
:root:is([data-theme="light"],[data-theme="studio"]) .zai-card { background: #fff; }
:root:is([data-theme="light"],[data-theme="studio"]) .stat-card { background: #fff; }
:root:is([data-theme="light"],[data-theme="studio"]) #login-bg-preview, :root:is([data-theme="light"],[data-theme="studio"]) .brand-preview { border-color: #c3cfdf; }
:root:is([data-theme="light"],[data-theme="studio"]) .zai-pill { background: #fff; }
:root:is([data-theme="light"],[data-theme="studio"]) .plan-chip { color: #fff; }
:root:is([data-theme="light"],[data-theme="studio"]) hr { border-color: var(--line); }
@media (max-width: 800px) {
    :root:is([data-theme="light"],[data-theme="studio"]) .sidebar { background: rgba(255, 255, 255, .97) !important; }
}

/* ---------- Plan editor: the Zuno AI block ---------- */
.ai-plan-box { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.ai-plan-lead, .ai-plan-hint, .ai-plan-card p { margin: .3rem 0 .6rem; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.ai-plan-hint { color: var(--faint); font-size: .76rem; }
.ai-plan-card { margin-top: .8rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ai-plan-card h4 { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: 0 0 .4rem; font-size: .92rem; color: var(--text-strong); }
.ai-plan-card h4 span { padding: .1rem .55rem; border-radius: 999px; background: var(--accent-bg); color: var(--accent-soft); font-size: .68rem; font-weight: 700; }
.ai-plan-check { display: flex; align-items: flex-start; gap: .5rem; margin: .3rem 0; font-size: .85rem; }
.ai-plan-num { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .3rem 0; font-size: .85rem; }
.ai-plan-num input { width: 9rem; }

/* Plan editor: one AI section, AI suggestions with Accept / Discard */
.ai-plan-where { margin: .2rem 0 .5rem !important; color: var(--text) !important; }
.ai-plan-sum { margin-top: .9rem; padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--accent-bg); display: grid; gap: .25rem; font-size: .82rem; }
.ai-plan-sum span { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.ai-plan-sum.is-high { border-color: #f59e0b; background: rgba(245,158,11,.12); }
.ai-proposal { margin: .5rem 0 .7rem; padding: .8rem 1rem; border: 1px solid var(--accent); border-radius: 12px; background: var(--surface); display: grid; gap: .5rem; }
.ai-proposal-t { margin: 0; font-size: .78rem; font-weight: 600; color: var(--accent-soft, var(--accent)); }
.ai-proposal-r span { font-size: .72rem; color: var(--muted); }
.ai-proposal-r p { margin: .1rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--text); }
.ai-proposal-b { display: flex; gap: .5rem; }

/* Zuno AI tab: Models & prices in order */
.zai-sec { display: block; margin-bottom: 1rem; }
.zai-sec h3 { margin: 0 0 .25rem; font-size: 1rem; }
.zai-lead { margin: 0 0 .8rem; color: var(--muted); font-size: .82rem; line-height: 1.5; max-width: 70ch; }
.zai-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1rem; }
.zai-row label { display: grid; gap: .25rem; font-size: .78rem; color: var(--muted); font-weight: 600; }
.zai-row input[type=text] { width: min(20rem, 100%); }
.zai-row input[type=number] { width: 7rem; }
.zai-table { width: 100%; border-collapse: collapse; }
.zai-table th, .zai-table td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.zai-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.zai-table tbody th { font-size: .88rem; font-weight: 600; }
.zai-table tbody th small { display: block; margin-top: .1rem; font-weight: 400; color: var(--faint); font-size: .74rem; }
.zai-table td input { width: 6.5rem; }
.zai-pre { color: var(--muted); margin-right: .2rem; }
.zai-savebar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; position: sticky; bottom: 0; padding: .7rem 0; background: linear-gradient(transparent, var(--bg) 40%); }
.zai-savebar span { color: var(--muted); font-size: .8rem; }
.zai-inl { display: inline-flex; align-items: center; }
.zai-table tbody th { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--text); }
.zai-table tbody th small { text-transform: none; letter-spacing: 0; font-size: .75rem; color: var(--faint); font-weight: 400; }

/* Customer-facing description: ask AI */
.ai-ask { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--accent-bg); }
.ai-ask-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ai-ask-row input { flex: 1 1 18rem; min-width: 0; }
.ai-ask-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.ai-plan-master { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; margin: .3rem 0 .8rem; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-bg); font-size: .85rem; cursor: pointer; }
.ai-plan-master b { display: block; margin-bottom: .15rem; }
.ai-plan-master span { color: var(--muted); font-size: .8rem; line-height: 1.5; }
.ai-plan-box.is-off #plan-editor-ai-body { opacity: .45; pointer-events: none; }
.ai-plan-box.is-off .ai-plan-master { border-color: var(--line); background: var(--surface); }

/* Confirmation popup */
.cf-overlay { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 1rem; background: rgba(8, 15, 28, .55); }
.cf-box { width: min(26rem, 100%); padding: 1.2rem 1.3rem; border-radius: 16px; background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.cf-box h3 { margin: 0 0 .7rem; font-size: 1.05rem; }
.cf-rows { margin: 0 0 .8rem; display: grid; gap: .45rem; }
.cf-rows div { display: grid; grid-template-columns: 8rem 1fr; gap: .6rem; font-size: .85rem; }
.cf-rows dt { color: var(--muted); }
.cf-rows dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cf-note { margin: 0 0 1rem; padding: .6rem .8rem; border-radius: 10px; background: var(--accent-bg); font-size: .8rem; color: var(--muted); }
.cf-actions { display: flex; gap: .6rem; justify-content: flex-end; }

/* Allowances: grouped plans, switches, bulk fill */
.al-groups{display:flex;flex-direction:column;gap:1.1rem;margin-top:.9rem}
.al-group{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.al-gh{display:flex;align-items:center;padding:.8rem 1rem .5rem}
.al-gh h4{margin:0;font-size:.98rem;display:flex;align-items:center;gap:.5rem}
.al-gh h4 span{font-size:.72rem;font-weight:600;padding:.1rem .5rem;border-radius:99px;background:var(--accent-bg);color:var(--accent-soft)}
.al-bulk{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:flex-end;padding:.7rem 1rem;background:var(--surface-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.al-bulk-t{flex:1 0 100%;font-size:.8rem;font-weight:600;color:var(--text)}
.al-bulk-f{display:flex;flex-direction:column;gap:.2rem;font-size:.72rem;color:var(--faint)}
.al-bulk-f select,.al-bulk-f input{width:8.2rem;padding:.38rem .5rem;font-size:.82rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text)}
.al-head,.al-row{display:grid;grid-template-columns:minmax(9rem,1.3fr) 3rem minmax(11rem,1.3fr) minmax(7rem,.8fr) minmax(10rem,1fr) 5rem minmax(8rem,1fr);gap:.6rem;align-items:center;padding:.65rem 1rem}
.al-head{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);border-bottom:1px solid var(--line-soft)}
.al-row{border-bottom:1px solid var(--line-soft);transition:background .3s,opacity .2s}
.al-row:last-child{border-bottom:0}
.al-row:hover{background:var(--surface-2)}
.al-name b{display:block;font-size:.9rem}
.al-name small{display:block;font-size:.72rem;color:var(--faint)}
.al-cell{display:flex;align-items:center;gap:.6rem;min-width:0}
.al-num{display:inline-flex;align-items:center;gap:.4rem}
.al-num input{width:5.6rem;padding:.38rem .5rem;font-size:.85rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text)}
.al-num input:disabled{opacity:.45}
.al-num em{font-style:normal;font-size:.72rem;color:var(--faint);white-space:nowrap}
.al-cost{font-size:.8rem;color:var(--faint)}
.al-row.is-off .al-name,.al-row.is-off .al-cost{opacity:.5}
.al-row.al-flash{background:var(--accent-bg)}
.al-switch{position:relative;display:inline-block;width:2.4rem;height:1.35rem;flex:none}
.al-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.al-track{position:absolute;inset:0;border-radius:99px;background:var(--line);transition:background .18s}
.al-track::after{content:"";position:absolute;top:.15rem;left:.15rem;width:1.05rem;height:1.05rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s}
.al-switch input:checked+.al-track{background:var(--accent)}
.al-switch input:checked+.al-track::after{transform:translateX(1.05rem)}
.al-switch input:disabled{cursor:not-allowed}
.al-switch input:disabled+.al-track{opacity:.45}
.al-switch input:focus-visible+.al-track{outline:2px solid var(--accent);outline-offset:2px}
.al-all{border-style:dashed}
.al-sub{color:var(--muted);font-size:.9rem;margin:1.2rem 0 .5rem}
.al-legend{width:100%;border-collapse:collapse;font-size:.85rem}
@media (prefers-reduced-motion:reduce){.al-track,.al-track::after,.al-row{transition:none}}

.al-group{margin-bottom:1.1rem;container-type:inline-size}.al-groups{gap:0}
.al-bd{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.al-bd>summary{cursor:pointer;padding:.6rem 1rem;font-size:.82rem;font-weight:600;color:var(--accent-soft);list-style:none}
.al-bd>summary::-webkit-details-marker{display:none}
.al-bd>summary::before{content:"+";display:inline-block;width:1.1rem;font-weight:700}
.al-bd[open]>summary::before{content:"\2212"}
.al-bd .al-bulk{border:0;padding-top:.2rem}
.al-bulk-h{flex:1 0 100%;font-size:.72rem;color:var(--faint)}
.al-all{border-style:dashed}.al-all .al-bd{border:0}
@media (max-width:900px){.al-num{flex-wrap:wrap}.al-cell{min-width:0}.al-row{grid-template-columns:1fr}.al-bulk-f select,.al-bulk-f input{width:100%}.al-bulk-f{flex:1 1 8rem}}

/* Settings rows: equal-width fields, one input style */
.zai-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem 1.2rem;align-items:start}
.zai-row label{display:flex;flex-direction:column;gap:.35rem;font-weight:400}
.zai-row label b{font-size:.82rem;font-weight:600;color:var(--text)}
.zai-row label small{font-size:.74rem;color:var(--faint);line-height:1.3}
.zai-row input[type=text],.zai-row input[type=number],.zai-row select{width:100%;box-sizing:border-box;height:2.5rem;padding:0 .75rem;font-size:.9rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}
.zai-row input:focus,.zai-row select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.zai-row .zai-wide{grid-column:1/-1}
.zai-row>button{justify-self:start;height:2.5rem;padding:0 1.2rem;align-self:start;margin-top:1.45rem}
@media (max-width:700px){.zai-row>button{margin-top:0;justify-self:stretch}}

@container (max-width:1020px){
 .al-head{display:none}
 .al-row{grid-template-columns:1fr 1fr;gap:.8rem 1.2rem;padding:.9rem 1rem;align-items:start}
 .al-name{grid-column:1/-1}
 .al-cost{grid-column:1/-1}
 .al-cell{flex-wrap:wrap;gap:.4rem .7rem}
 .al-cell::before{content:attr(data-h);flex:1 0 100%;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
 .al-cell.al-cost::before{flex:0 0 auto}
 .al-cell.al-cost{flex-wrap:nowrap}
}
@container (max-width:520px){ .al-row{grid-template-columns:1fr} }

/* Picture prompt editor */
.aip-item{border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;margin-top:.9rem;background:var(--surface)}
.aip-item.has-problem{border-color:#dc2626}
.aip-top{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin-bottom:.5rem}
.aip-size{font-size:.76rem;color:var(--faint)}
.aip-badge{margin-left:auto;font-size:.7rem;font-weight:600;padding:.12rem .55rem;border-radius:99px;background:var(--surface-3);color:var(--muted)}
.aip-badge.is-custom{background:var(--accent-bg);color:var(--accent-soft)}
.aip-text{width:100%;box-sizing:border-box;min-height:12rem;resize:vertical;padding:.7rem .8rem;font:.82rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}
.aip-foot{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;margin-top:.5rem}
.aip-prob{font-size:.78rem;color:#dc2626;flex:1 1 14rem}
#aip-help code{font-size:.78rem;padding:.05rem .3rem;border-radius:5px;background:var(--surface-3)}

.pc-flag { display: inline-block; margin: 0 0 .5rem; padding: .18rem .65rem; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.pc-flag.red { background: #dc2626; color: #fff; }
.pc-flag.green { background: rgba(16, 185, 129, .16); color: #059669; }
.pc-flag.gray { background: var(--line); color: var(--muted); }
.pc-nostripe { outline: 2px solid #dc2626; outline-offset: -2px; }

/* Keep the menu allowance unit inside its own column at every text size. */
.al-cell[data-h="Studio artwork"]{flex-wrap:wrap;align-items:flex-start}
.al-cell[data-h="Studio artwork"] .al-num{flex:1 1 5rem;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}
.al-cell[data-h="Studio artwork"] .al-num input{width:5.2rem;max-width:100%;box-sizing:border-box}
.al-cell[data-h="Studio artwork"] .al-num em{white-space:normal;line-height:1.35}

.ai-usage-bars{display:flex;align-items:flex-end;gap:5px;overflow-x:auto;padding:12px 0;min-height:105px}.ai-usage-bars>div{flex:1;min-width:22px;max-width:80px;display:flex;flex-direction:column;align-items:center;gap:5px}.ai-usage-bars span{display:block;width:100%;max-width:35px;background:#139a87;border-radius:4px 4px 0 0}.ai-usage-bars small{font-size:9px;white-space:nowrap;color:var(--muted)}

.al-help-cell{flex-wrap:wrap}.al-help-cell .al-help-euros{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex-basis:100%}.al-help-cell .al-help-euros small{font-size:9px;line-height:1.4}.al-help-cell .al-help-euros em{white-space:normal}.al-help-cell .al-help-euros input{max-width:100%}

.al-help-cell{display:grid;grid-template-columns:2rem minmax(0,1fr);align-items:start;gap:.6rem}.al-help-cell>.al-switch{margin-top:.65rem}.al-help-main{min-width:0}.al-help-cell .al-help-euros{gap:.3rem}.al-help-cell .al-help-euros input{width:6rem;min-width:5rem}.al-help-cell .al-help-euros small{font-size:.65rem;max-width:13rem}.al-help-advanced{font-size:.66rem;color:var(--muted);margin-top:.6rem}.al-help-advanced summary{cursor:pointer;line-height:1.5}.al-help-advanced .al-num{display:flex;align-items:flex-start;flex-direction:column;margin-top:.4rem;gap:.3rem}.al-help-advanced em{white-space:normal;font-size:.65rem}.al-row{padding-top:.9rem;padding-bottom:.9rem}.al-cell[data-h="Studio artwork"]{align-items:flex-start}.al-cell[data-h="Studio artwork"]>.al-switch{margin-top:.65rem}

/* Studio Light: same controls and spacing, ivory surfaces and forest actions. */
:root[data-theme="studio"]{color-scheme:light;--bg:#f0f3ed;--bg-deep:#fffefa;--surface:#fffefa;--surface-2:#f9faf7;--surface-3:#edf2e7;--line:#dce4dd;--line-soft:#e3e8da;--text:#203d32;--text-strong:#18392b;--muted:#526b58;--faint:#61765f;--accent:#244b38;--accent-soft:#244b38;--accent-bg:#e5eddf}
:root[data-theme="studio"] .sidebar .tab-btn.active{border-color:#b7c8af}
:root[data-theme="studio"] .btn-primary:hover{background:#18392b}
:root[data-theme="studio"] .btn-secondary{background:#edf2e7}
:root[data-theme="studio"] tr:hover td{background:#f0f5eb}
:root[data-theme="studio"] .nav-group-label,:root[data-theme="studio"] .sidebar .tab-btn>.admin-icon{color:#61765f}
:root[data-theme="studio"] .modal-box,:root[data-theme="studio"] .fullscreen-panel-header,:root[data-theme="studio"] .field-input,:root[data-theme="studio"] select{background:#fffefa}
:root[data-theme="studio"] :is(h1,h2,h3,h4){font-weight:700}
:root[data-theme="studio"] :is(button,label,.tab-btn){font-weight:600}
:root[data-theme="studio"] :is(.zai-lead,.muted,.field-hint){font-weight:500}
/* Allowances stay in their original home; each plan opens only when needed. */
.al-plan{border-top:1px solid var(--line-soft)}
.al-plan>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;cursor:pointer;list-style:revert;font-weight:500}
.al-plan>summary small{color:var(--muted);font-weight:400;text-align:right}
.al-plan[open]>summary{border-bottom:1px solid var(--line-soft);background:var(--surface)}
.al-plan .al-name{display:none}
.al-plan .al-row{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:20px;padding:20px}
.al-plan .al-cell:before{content:attr(data-h);display:block;color:var(--muted);font-size:.78rem;margin-bottom:8px}
.al-shared-budget{grid-column:1/-1;display:flex;gap:16px;flex-wrap:wrap;align-items:end}
.al-shared-budget label{display:flex;flex-direction:column;gap:6px;font-size:.83rem;color:var(--ink);flex:1 1 180px;min-width:0}
.al-shared-budget input,.al-shared-budget select{width:100%;min-height:42px;border:1px solid var(--line-soft);border-radius:9px;padding:9px;background:var(--surface);color:var(--ink);font:inherit}
.al-shared-note{width:100%;margin:0;color:var(--muted);font-size:.8rem;line-height:1.6}
.al-row.is-shared .al-cell[data-h="Credits"],.al-row.is-shared .al-cell[data-h="Studio artwork"],.al-row.is-shared .al-help-main,.al-row.is-shared .al-cost{display:none}
.zai-budget-guide{margin:16px 0}.zai-budget-guide>summary{cursor:pointer;min-height:44px;align-content:center;font-weight:500}
@media(max-width:620px){.al-plan .al-row{grid-template-columns:minmax(0,1fr);padding:16px}.al-plan>summary{align-items:start;flex-direction:column;gap:6px}.al-plan>summary small{text-align:left}.al-shared-budget{flex-direction:column;align-items:stretch}.al-shared-budget label{flex:auto}}
.al-shared-money[hidden]{display:none}