/* ============================================================================
   Salesbot Studio — shared admin design system.
   Loaded by every authenticated admin page (Settings, Analytics, Conversations,
   Inbox, Voice, Orders). Everything is scoped to html[data-studio-admin], so the
   customer chat, bubble, carousels and login pages are never affected.
   Appearance: html[data-theme="light"|"dark"] is set before first paint by
   /public/admin-theme-init.js. No inversion filters — every surface is a token.
   Contents: 1 font · 2 tokens · 3 base · 4 chrome (sidebar, header, drawer) ·
   5 components · 6 states · 7 Tailwind bridge (page utilities → tokens) · 8 motion
   ============================================================================ */

/* isi DES-D5: Manrope, the prototype's font (Inter below stays as the fallback) */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

/* ---- 1. Inter (self-hosted, OFL — /public/fonts/LICENSE-Inter.txt) ------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/public/fonts/InterVariable-latin-greek.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0100-017F, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0370-03FF,
                   U+1F00-1FFF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/public/fonts/InterVariable-cyrillic.woff2") format("woff2");
    unicode-range: U+0400-04FF;
}

/* ---- 2. Tokens ----------------------------------------------------------- */
html[data-studio-admin] {
    --sb-canvas: #F4F5FA;
    --sb-surface: #FFFFFF;
    --sb-surface-muted: #F5F5FB;
    --sb-surface-hover: #EEEEF8;
    --sb-ink: #16142F;
    --sb-ink-soft: #38365A;
    --sb-text-secondary: #5C5A77;
    --sb-text-muted: #6B6987;
    --sb-border: #E4E4F0;
    --sb-border-strong: #9D9BB9;
    --sb-primary: #6A50E0;
    --sb-primary-hover: #5B42D0;
    --sb-primary-active: #4F38B3;
    --sb-primary-2: #4466E0;          /* second stop of the primary gradient */
    --sb-on-primary: #FFFFFF;
    --sb-accent-text: #4A35C4;
    --sb-accent-soft: #EFEBFF;
    --sb-accent-border: #D7CEFB;
    --sb-glow-1: rgba(106, 80, 224, 0.16);   /* canvas aurora */
    --sb-glow-2: rgba(18, 181, 203, 0.12);
    --sb-success: #24795D;
    --sb-success-soft: #EAF6F0;
    --sb-success-border: #BFE3D1;
    --sb-warning: #805A18;
    --sb-warning-soft: #FFF4DC;
    --sb-warning-border: #EED9A6;
    --sb-danger: #B73546;
    --sb-danger-soft: #FFF0F2;
    --sb-danger-border: #F2C3CA;
    --sb-focus: #6A50E0;
    --sb-overlay: rgba(16, 14, 42, 0.45);
    --sb-code-bg: #24243A;
    --sb-code-text: #ECECF6;
    --sb-inverse: #24243A;
    --sb-inverse-hover: #34344C;
    --sb-on-inverse: #FFFFFF;

    --sb-radius-sm: 8px;
    --sb-radius-md: 12px;
    --sb-radius-lg: 20px;
    --sb-shadow-sm: 0 1px 2px rgba(22, 20, 52, 0.05);
    --sb-shadow-md: 0 1px 2px rgba(22, 20, 52, 0.05), 0 14px 32px -20px rgba(40, 32, 110, 0.30);
    --sb-shadow-card: 0 1px 2px rgba(22, 20, 52, 0.05), 0 14px 32px -20px rgba(40, 32, 110, 0.30);
    --sb-shadow-overlay: 0 24px 60px -18px rgba(30, 22, 90, 0.35);
    --sb-shadow-primary: 0 10px 24px -12px rgba(106, 80, 224, 0.85);
    --sb-focus-ring: 0 0 0 4px rgba(106, 80, 224, 0.20);
    --sb-ring-soft: 0 0 0 3px rgba(106, 80, 224, 0.12);

    --sbs-side-w: 232px;
    --sbs-header-h: 64px;
    --sb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* compatibility aliases for the pre-Studio dashboard.css (coral → primary).
       Every remaining use is listed in dashboard.css § "Studio migration". */
    --sb-coral: var(--sb-primary);
    --sb-coral-hover: var(--sb-primary-hover);
    --sb-coral-active: var(--sb-primary-active);
    --sb-coral-soft: var(--sb-accent-soft);
    --sb-coral-muted: var(--sb-accent-border);
    --sb-pandora-purple: var(--sb-primary);
    --sb-pandora-purple-soft: var(--sb-accent-soft);
    color-scheme: light;
}
html[data-studio-admin][data-theme="dark"] {
    --sb-canvas: #0B0B18;
    --sb-surface: #15152B;
    --sb-surface-muted: #1B1B35;
    --sb-surface-hover: #232344;
    --sb-ink: #ECEBFA;
    --sb-ink-soft: #CAC8E4;
    --sb-text-secondary: #A9A7C6;
    --sb-text-muted: #9C9ABC;
    --sb-border: #2A2A4A;
    --sb-border-strong: #66648C;
    --sb-primary: #6F57E8;
    --sb-primary-hover: #8069F2;
    --sb-primary-active: #5B43C4;
    --sb-primary-2: #4466E0;
    --sb-on-primary: #FFFFFF;
    --sb-accent-text: #C9BEFF;
    --sb-accent-soft: #2A2550;
    --sb-accent-border: #4A4280;
    --sb-glow-1: rgba(124, 102, 240, 0.30);
    --sb-glow-2: rgba(18, 181, 203, 0.16);
    --sb-success: #8ED7B4;
    --sb-success-soft: #213A31;
    --sb-success-border: #33584A;
    --sb-warning: #F0CA83;
    --sb-warning-soft: #3B3220;
    --sb-warning-border: #5E4F30;
    --sb-danger: #FF9FAE;
    --sb-danger-soft: #402832;
    --sb-danger-border: #66404C;
    --sb-focus: #C9BEFF;
    --sb-overlay: rgba(4, 4, 14, 0.66);
    --sb-code-bg: #0E0E1E;
    --sb-code-text: #E4E4F0;
    --sb-inverse: #E6E4F5;
    --sb-inverse-hover: #F1F1FA;
    --sb-on-inverse: #171820;
    --sb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sb-shadow-md: 0 16px 36px -20px rgba(0, 0, 0, 0.75);
    --sb-shadow-card: 0 16px 36px -20px rgba(0, 0, 0, 0.75);
    --sb-shadow-overlay: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
    --sb-shadow-primary: 0 10px 26px -12px rgba(124, 102, 240, 0.9);
    --sb-focus-ring: 0 0 0 4px rgba(201, 190, 255, 0.24);
    --sb-ring-soft: 0 0 0 3px rgba(201, 190, 255, 0.14);
    color-scheme: dark;
}

/* ---- 3. Base ------------------------------------------------------------- */
html[data-studio-admin] body {
    font-family: var(--sb-font) !important;     /* page <style> blocks set system-ui/Inter with !important */
    font-size: 14px;
    line-height: 1.5;
    color: var(--sb-ink);
    background: radial-gradient(60% 40% at 18% 0%, var(--sb-glow-1), transparent 70%),
                radial-gradient(45% 35% at 92% 2%, var(--sb-glow-2), transparent 70%),
                var(--sb-canvas) !important;     /* beats page radial gradients */
    background-attachment: fixed !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}
html[data-studio-admin] input,
html[data-studio-admin] select,
html[data-studio-admin] textarea,
html[data-studio-admin] button { font-family: inherit; }
html[data-studio-admin] .tabular-nums,
html[data-studio-admin] td,
html[data-studio-admin] .sb-num { font-variant-numeric: tabular-nums; }
html[data-studio-admin] ::selection { background: var(--sb-accent-soft); color: var(--sb-ink); }
html[data-studio-admin] :focus-visible { outline: 2px solid var(--sb-focus); outline-offset: 2px; }
html[data-studio-admin] [hidden] { display: none !important; }

.sb-sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sbs-skip {
    position: fixed; left: 12px; top: -60px; z-index: 200;
    background: var(--sb-surface); color: var(--sb-ink);
    border: 1px solid var(--sb-border-strong); border-radius: var(--sb-radius-md);
    padding: 10px 14px; font-weight: 600; text-decoration: none;
}
.sbs-skip:focus { top: 12px; }

.sb-icon { width: 16px; height: 16px; flex: 0 0 16px; display: inline-block; vertical-align: middle; }
.sb-icon--lg { width: 20px; height: 20px; flex-basis: 20px; }

/* ---- 4. Chrome: sidebar, header, mobile drawer ----------------------------- */
html[data-studio-admin] body { padding-left: var(--sbs-side-w); }

.sbs-side {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: var(--sbs-side-w);
    display: flex; flex-direction: column; gap: 20px;
    padding: 20px 12px 16px;
    background: var(--sb-surface);
    border-right: 1px solid var(--sb-border);
    overflow-y: auto;
}
.sbs-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px; color: var(--sb-ink); text-decoration: none; }
.sbs-brand img { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px; }
.sbs-brand span { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }

.sbs-workspace {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md);
    background: var(--sb-surface); min-height: 52px;
}
.sbs-ws-avatar {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
    background: var(--sb-accent-soft); color: var(--sb-accent-text);
    display: grid; place-items: center; font-weight: 700; font-size: 13px; overflow: hidden;
}
.sbs-ws-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sbs-ws-text { min-width: 0; }
.sbs-ws-name { font-size: 13px; font-weight: 600; color: var(--sb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbs-ws-sub { font-size: 12px; color: var(--sb-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sbs-nav-label { font-size: 12px; font-weight: 500; color: var(--sb-text-secondary); padding: 0 10px 6px; }
.sbs-nav { display: flex; flex-direction: column; gap: 2px; }
.sbs-nav a {
    display: flex; align-items: center; gap: 10px;
    min-height: 40px; padding: 8px 10px;
    border-radius: 8px;
    color: var(--sb-text-secondary); text-decoration: none;
    font-size: 14px; font-weight: 500;
    transition: background-color .14s ease, color .14s ease;
}
.sbs-nav a:hover { background: var(--sb-surface-hover); color: var(--sb-ink); }
.sbs-nav a[aria-current="page"] { background: var(--sb-accent-soft); color: var(--sb-accent-text); font-weight: 600; }
.sbs-nav a .sbs-count {
    margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px;
    background: var(--sb-primary); color: var(--sb-on-primary);
    font-size: 11px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.sbs-nav a .sbs-count.hidden { display: none; }

.sbs-side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.sbs-appearance { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
.sbs-appearance label { font-size: 12px; font-weight: 500; color: var(--sb-text-secondary); }
.sbs-appearance select {
    width: 100%; min-height: 40px; padding: 8px 32px 8px 10px;
    border: 1px solid var(--sb-border-strong); border-radius: var(--sb-radius-md);
    background: var(--sb-surface); color: var(--sb-ink); font-size: 14px;
}
.sbs-account { border-top: 1px solid var(--sb-border); padding: 14px 4px 0; display: flex; flex-direction: column; gap: 8px; }
.sbs-account-id { font-size: 12px; color: var(--sb-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbs-account-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.sbs-header {
    position: sticky; top: 0; z-index: 40;
    height: var(--sbs-header-h);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 0 28px;
    background: var(--sb-surface);
    border-bottom: 1px solid var(--sb-border);
}
.sbs-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sbs-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sb-text-secondary); white-space: nowrap; }
.sbs-crumbs strong { color: var(--sb-ink); font-weight: 600; }
.sbs-crumbs .sb-icon { width: 14px; height: 14px; color: var(--sb-text-muted); }
.sbs-header-actions { display: flex; align-items: center; gap: 8px; }
.sb-button.sbs-menu-btn { display: none; }
.sbs-scrim { display: none; }
/* the page's own account bar (#auth-area) keeps receiving its innerHTML but is not shown */
.sbs-legacy-auth { display: none !important; }

@media (max-width: 1023px) {
    html[data-studio-admin] body { padding-left: 0; }
    .sb-button.sbs-menu-btn { display: inline-flex; }
    .sbs-side {
        transform: translateX(-105%);
        transition: transform .18s ease;
        box-shadow: var(--sb-shadow-overlay);
        width: min(280px, 86vw);
    }
    html.sbs-drawer-open .sbs-side { transform: none; }
    html.sbs-drawer-open .sbs-scrim {
        display: block; position: fixed; inset: 0; z-index: 55; background: var(--sb-overlay);
    }
    .sbs-header { padding: 0 16px; }
}
@media (max-width: 680px) {
    .sbs-header { height: 56px; }
    .sbs-crumbs .sbs-crumb-root, .sbs-crumbs .sbs-crumb-sep { display: none; }
}

/* ---- 5. Components ------------------------------------------------------- */
.sb-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 16px;
    border-radius: var(--sb-radius-md);
    border: 1px solid transparent;
    font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 500;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.sb-button:focus-visible { outline: 2px solid var(--sb-focus); outline-offset: 2px; }
.sb-button:disabled, .sb-button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; box-shadow: none; }
.sb-button[aria-busy="true"] { cursor: progress; opacity: .85; }
.sb-button--sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.sb-button--primary {
    background: var(--sb-primary); color: var(--sb-on-primary); font-weight: 600;
    box-shadow: 0 1px 2px rgba(51, 34, 129, .14);
}
.sb-button--primary:hover:not(:disabled) { background: var(--sb-primary-hover); box-shadow: 0 3px 8px rgba(51, 34, 129, .18); }
.sb-button--primary:active:not(:disabled) { background: var(--sb-primary-active); box-shadow: none; }
.sb-button--secondary { background: var(--sb-surface); color: var(--sb-ink); border-color: var(--sb-border-strong); }
.sb-button--secondary:hover:not(:disabled) { background: var(--sb-surface-hover); }
.sb-button--secondary:active:not(:disabled) { background: var(--sb-surface-muted); }
.sb-button--quiet { background: transparent; color: var(--sb-text-secondary); }
.sb-button--quiet:hover:not(:disabled) { background: var(--sb-surface-hover); color: var(--sb-ink); }
.sb-button--danger { background: var(--sb-danger-soft); color: var(--sb-danger); border-color: var(--sb-danger-border); }
.sb-button--danger:hover:not(:disabled) { background: var(--sb-danger); color: var(--sb-surface); }
.sb-button--icon { min-width: 44px; padding: 10px; }
.sb-button .sb-spin { animation: sb-spin .9s linear infinite; }

.sb-card {
    background: var(--sb-surface); border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow-sm);
}
.sb-input, .sb-select, .sb-textarea {
    width: 100%; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--sb-border-strong); border-radius: var(--sb-radius-md);
    background: var(--sb-surface); color: var(--sb-ink);
    font-size: 14px; line-height: 1.5;
}
.sb-input:focus, .sb-select:focus, .sb-textarea:focus { border-color: var(--sb-primary); box-shadow: var(--sb-focus-ring); outline: none; }
.sb-input::placeholder, .sb-textarea::placeholder { color: var(--sb-text-muted); }

.sb-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px; border-radius: var(--sb-radius-sm);
    font-size: 12px; font-weight: 500; line-height: 18px;
    background: var(--sb-surface-muted); color: var(--sb-text-secondary); border: 1px solid var(--sb-border);
}
.sb-badge--success { background: var(--sb-success-soft); color: var(--sb-success); border-color: var(--sb-success-border); }
.sb-badge--warning { background: var(--sb-warning-soft); color: var(--sb-warning); border-color: var(--sb-warning-border); }
.sb-badge--danger { background: var(--sb-danger-soft); color: var(--sb-danger); border-color: var(--sb-danger-border); }
.sb-badge--accent { background: var(--sb-accent-soft); color: var(--sb-accent-text); border-color: var(--sb-accent-border); }

.sb-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--sb-border); overflow-x: auto; scrollbar-width: none; }
.sb-tabs::-webkit-scrollbar { display: none; }
.sb-tab {
    appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
    padding: 12px 0 10px; min-height: 44px;
    font-size: 14px; font-weight: 500; color: var(--sb-text-secondary);
    white-space: nowrap; cursor: pointer;
}
.sb-tab:hover { color: var(--sb-ink); }
.sb-tab[aria-selected="true"] { color: var(--sb-accent-text); border-bottom-color: var(--sb-primary); font-weight: 600; }

.sb-help { font-size: 12px; line-height: 1.5; color: var(--sb-text-secondary); }

/* ---- 6. States: loader, empty, error, toast -------------------------------- */
.sb-toast-host {
    position: fixed; right: 20px; bottom: 20px; z-index: 120;
    display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px));
}
.sb-toast {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: var(--sb-radius-md);
    background: var(--sb-surface); color: var(--sb-ink);
    border: 1px solid var(--sb-border); box-shadow: var(--sb-shadow-overlay); font-size: 14px;
}
.sb-toast--error { border-color: var(--sb-danger-border); }
.sb-toast--error .sb-icon { color: var(--sb-danger); }
.sb-toast--success .sb-icon { color: var(--sb-success); }
.sb-empty { text-align: center; color: var(--sb-text-secondary); padding: 32px 16px; font-size: 14px; }

/* page loaders (#loader, fixed full-screen) follow the theme */
html[data-studio-admin] #loader { background: var(--sb-canvas) !important; }
html[data-studio-admin] #loader .animate-spin {
    border-color: var(--sb-border) !important; border-top-color: var(--sb-primary) !important;
}

@keyframes sb-spin { to { transform: rotate(360deg); } }

/* ---- 7. Tailwind bridge ------------------------------------------------------
   The admin pages are written with Tailwind (Play CDN) utilities. In Studio the
   neutral utilities follow the tokens in both appearances and the generic blue
   action color becomes the violet primary. Semantic tints (amber/emerald/red…)
   keep their meaning and get dark-safe values. Selectors are attribute-scoped,
   so they outrank the CDN's runtime stylesheet without !important.          */
html[data-studio-admin] .bg-white { background-color: var(--sb-surface); }
html[data-studio-admin] .bg-gray-50, html[data-studio-admin] .bg-slate-50 { background-color: var(--sb-surface-muted); }
html[data-studio-admin] .bg-gray-100, html[data-studio-admin] .bg-slate-100 { background-color: var(--sb-surface-muted); }
html[data-studio-admin] .bg-gray-200, html[data-studio-admin] .bg-slate-200 { background-color: var(--sb-surface-hover); }
html[data-studio-admin] .hover\:bg-gray-50:hover, html[data-studio-admin] .hover\:bg-gray-100:hover,
html[data-studio-admin] .hover\:bg-slate-50:hover, html[data-studio-admin] .hover\:bg-slate-100:hover,
html[data-studio-admin] .hover\:bg-gray-200:hover, html[data-studio-admin] .hover\:bg-slate-200:hover { background-color: var(--sb-surface-hover); }

html[data-studio-admin] .text-gray-900, html[data-studio-admin] .text-slate-900,
html[data-studio-admin] .text-gray-800, html[data-studio-admin] .text-slate-800 { color: var(--sb-ink); }
html[data-studio-admin] .text-gray-700, html[data-studio-admin] .text-slate-700 { color: var(--sb-ink-soft); }
html[data-studio-admin] .text-gray-600, html[data-studio-admin] .text-slate-600,
html[data-studio-admin] .text-gray-500, html[data-studio-admin] .text-slate-500 { color: var(--sb-text-secondary); }
html[data-studio-admin] .text-gray-400, html[data-studio-admin] .text-slate-400 { color: var(--sb-text-muted); }

html[data-studio-admin] .border-gray-100, html[data-studio-admin] .border-slate-100,
html[data-studio-admin] .border-gray-200, html[data-studio-admin] .border-slate-200 { border-color: var(--sb-border); }
html[data-studio-admin] .border-gray-300, html[data-studio-admin] .border-slate-300 { border-color: var(--sb-border-strong); }
html[data-studio-admin] .divide-gray-100 > * + *, html[data-studio-admin] .divide-gray-200 > * + *,
html[data-studio-admin] .divide-slate-100 > * + *, html[data-studio-admin] .divide-slate-200 > * + * { border-color: var(--sb-border); }

/* generic blue = primary action / link color */
html[data-studio-admin] .bg-blue-600, html[data-studio-admin] .bg-indigo-600 { background-color: var(--sb-primary); }
html[data-studio-admin] .hover\:bg-blue-700:hover, html[data-studio-admin] .hover\:bg-indigo-700:hover { background-color: var(--sb-primary-hover); }
html[data-studio-admin] .text-blue-600, html[data-studio-admin] .text-blue-700,
html[data-studio-admin] .text-indigo-600, html[data-studio-admin] .text-indigo-700 { color: var(--sb-accent-text); }
html[data-studio-admin] .bg-blue-50, html[data-studio-admin] .bg-indigo-50 { background-color: var(--sb-accent-soft); }
html[data-studio-admin] .bg-blue-100, html[data-studio-admin] .bg-indigo-100 { background-color: var(--sb-accent-soft); }
html[data-studio-admin] .border-blue-200, html[data-studio-admin] .border-indigo-200 { border-color: var(--sb-accent-border); }
html[data-studio-admin] .focus\:ring-blue-500:focus { --tw-ring-color: var(--sb-focus); }
html[data-studio-admin] .focus\:border-blue-500:focus { border-color: var(--sb-primary); }

/* dark appearance: semantic tints and remaining light surfaces */
html[data-studio-admin][data-theme="dark"] .bg-amber-50, html[data-studio-admin][data-theme="dark"] .bg-yellow-50,
html[data-studio-admin][data-theme="dark"] .bg-orange-50, html[data-studio-admin][data-theme="dark"] .bg-amber-100,
html[data-studio-admin][data-theme="dark"] .bg-yellow-100, html[data-studio-admin][data-theme="dark"] .bg-orange-100 { background-color: var(--sb-warning-soft); }
html[data-studio-admin][data-theme="dark"] .bg-emerald-50, html[data-studio-admin][data-theme="dark"] .bg-green-50,
html[data-studio-admin][data-theme="dark"] .bg-teal-50, html[data-studio-admin][data-theme="dark"] .bg-emerald-100,
html[data-studio-admin][data-theme="dark"] .bg-green-100 { background-color: var(--sb-success-soft); }
html[data-studio-admin][data-theme="dark"] .bg-red-50, html[data-studio-admin][data-theme="dark"] .bg-red-100,
html[data-studio-admin][data-theme="dark"] .bg-pink-100 { background-color: var(--sb-danger-soft); }
html[data-studio-admin][data-theme="dark"] .bg-purple-50, html[data-studio-admin][data-theme="dark"] .bg-violet-50,
html[data-studio-admin][data-theme="dark"] .bg-purple-100 { background-color: var(--sb-accent-soft); }

html[data-studio-admin][data-theme="dark"] .text-amber-600, html[data-studio-admin][data-theme="dark"] .text-amber-700,
html[data-studio-admin][data-theme="dark"] .text-amber-800, html[data-studio-admin][data-theme="dark"] .text-yellow-600,
html[data-studio-admin][data-theme="dark"] .text-yellow-700, html[data-studio-admin][data-theme="dark"] .text-yellow-800,
html[data-studio-admin][data-theme="dark"] .text-orange-600, html[data-studio-admin][data-theme="dark"] .text-orange-700,
html[data-studio-admin][data-theme="dark"] .text-orange-800 { color: var(--sb-warning); }
html[data-studio-admin][data-theme="dark"] .text-emerald-600, html[data-studio-admin][data-theme="dark"] .text-emerald-700,
html[data-studio-admin][data-theme="dark"] .text-emerald-800, html[data-studio-admin][data-theme="dark"] .text-green-600,
html[data-studio-admin][data-theme="dark"] .text-green-700, html[data-studio-admin][data-theme="dark"] .text-green-800,
html[data-studio-admin][data-theme="dark"] .text-teal-600, html[data-studio-admin][data-theme="dark"] .text-teal-700,
html[data-studio-admin][data-theme="dark"] .text-teal-800 { color: var(--sb-success); }
html[data-studio-admin][data-theme="dark"] .text-red-500, html[data-studio-admin][data-theme="dark"] .text-red-600,
html[data-studio-admin][data-theme="dark"] .text-red-800, html[data-studio-admin][data-theme="dark"] .text-pink-700 { color: var(--sb-danger); }
html[data-studio-admin][data-theme="dark"] .text-purple-500, html[data-studio-admin][data-theme="dark"] .text-purple-600,
html[data-studio-admin][data-theme="dark"] .text-purple-700, html[data-studio-admin][data-theme="dark"] .text-purple-800,
html[data-studio-admin][data-theme="dark"] .text-violet-600, html[data-studio-admin][data-theme="dark"] .text-violet-700,
html[data-studio-admin][data-theme="dark"] .text-violet-800, html[data-studio-admin][data-theme="dark"] .text-blue-800,
html[data-studio-admin][data-theme="dark"] .text-blue-900, html[data-studio-admin][data-theme="dark"] .text-indigo-800,
html[data-studio-admin][data-theme="dark"] .text-indigo-900 { color: var(--sb-accent-text); }

html[data-studio-admin][data-theme="dark"] [class*="border-amber-"], html[data-studio-admin][data-theme="dark"] [class*="border-yellow-"],
html[data-studio-admin][data-theme="dark"] [class*="border-orange-"] { border-color: var(--sb-warning-border); }
html[data-studio-admin][data-theme="dark"] [class*="border-emerald-"], html[data-studio-admin][data-theme="dark"] [class*="border-green-"],
html[data-studio-admin][data-theme="dark"] [class*="border-teal-"] { border-color: var(--sb-success-border); }
html[data-studio-admin][data-theme="dark"] [class*="border-red-"] { border-color: var(--sb-danger-border); }
html[data-studio-admin][data-theme="dark"] [class*="border-purple-"], html[data-studio-admin][data-theme="dark"] [class*="border-violet-"],
html[data-studio-admin][data-theme="dark"] [class*="border-blue-"], html[data-studio-admin][data-theme="dark"] [class*="border-indigo-"] { border-color: var(--sb-accent-border); }

/* soft gradients (from-*-50 to-*-50) become a flat surface in dark */
html[data-studio-admin][data-theme="dark"] [class*="from-"][class*="-50"] { background-image: none; background-color: var(--sb-surface-muted); }
/* native form controls written without classes */
html[data-studio-admin][data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-studio-admin][data-theme="dark"] select,
html[data-studio-admin][data-theme="dark"] textarea:not(.code-block) {
    background-color: var(--sb-surface); color: var(--sb-ink); border-color: var(--sb-border-strong);
}
html[data-studio-admin][data-theme="dark"] input::placeholder,
html[data-studio-admin][data-theme="dark"] textarea::placeholder { color: var(--sb-text-muted); }
html[data-studio-admin][data-theme="dark"] .shadow, html[data-studio-admin][data-theme="dark"] .shadow-sm,
html[data-studio-admin][data-theme="dark"] .shadow-md, html[data-studio-admin][data-theme="dark"] .shadow-lg { box-shadow: var(--sb-shadow-md); }
html[data-studio-admin][data-theme="dark"] .bg-black\/50 { background-color: var(--sb-overlay); }
html[data-studio-admin][data-theme="dark"] code, html[data-studio-admin][data-theme="dark"] pre { color: var(--sb-code-text); }

/* ---- 8. Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html[data-studio-admin] *, html[data-studio-admin] *::before, html[data-studio-admin] *::after {
        transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    }
    .sbs-side { transition: none; }
}

/* ---- 9. Page headings (one per admin page) ------------------------------- */
html[data-studio-admin] body h1 {
    font-size: 28px !important; font-weight: 600 !important; line-height: 1.25 !important;
    letter-spacing: -0.02em !important; color: var(--sb-ink) !important;
}
@media (max-width: 680px) { html[data-studio-admin] body h1 { font-size: 24px !important; } }

/* ---- 10. Data tables -------------------------------------------------------- */
html[data-studio-admin] th {
    text-transform: none !important; letter-spacing: normal !important;
    font-size: 12px; font-weight: 600; color: var(--sb-text-secondary);
}
html[data-studio-admin] table { font-variant-numeric: tabular-nums; }
html[data-studio-admin] .overflow-x-auto { scrollbar-width: thin; }
/* admin shop selectors size to their longest tenant name — never wider than the screen */
html[data-studio-admin] #shop-selector { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
html[data-studio-admin] #actions-area, html[data-studio-admin] div:has(> #shop-selector) { max-width: 100%; min-width: 0; }

/* ---- 11. Aurora refresh (2026-10, phase A: look only) ----------------------
   Deep-space sidebar in both appearances, glass header, gradient primary,
   softer elevated cards. Selectors only; no markup or script depends on it.
   [data-theme] in a selector = one extra attribute of specificity, used where
   dashboard.css (loaded after this file on Settings) sets the same property. */

/* sidebar: always dark — it re-declares the tokens its own children use */
.sbs-side {
    --sb-surface: rgba(255, 255, 255, 0.05);
    --sb-surface-muted: rgba(255, 255, 255, 0.07);
    --sb-surface-hover: rgba(255, 255, 255, 0.08);
    --sb-ink: #F2F1FF;
    --sb-ink-soft: #DCDAFA;
    --sb-text-secondary: #B4B1DE;
    --sb-text-muted: #9894C8;
    --sb-border: rgba(255, 255, 255, 0.10);
    --sb-border-strong: rgba(255, 255, 255, 0.24);
    --sb-accent-soft: rgba(139, 118, 255, 0.22);
    --sb-accent-text: #FFFFFF;
    --sb-focus: #C9BEFF;
    color-scheme: dark;
    color: var(--sb-ink);
    background:
        radial-gradient(120% 45% at 0% 0%, rgba(124, 102, 240, 0.34), transparent 62%),
        radial-gradient(90% 35% at 100% 100%, rgba(18, 181, 203, 0.14), transparent 70%),
        linear-gradient(180deg, #15122F 0%, #0E0C24 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.sbs-brand span { color: #FFFFFF; font-weight: 800; letter-spacing: -0.02em; }
.sbs-workspace { border-radius: 14px; background: rgba(255, 255, 255, 0.05); }
.sbs-ws-avatar { background: linear-gradient(135deg, #8B76FF, #4C7CF0); color: #FFFFFF; border-radius: 10px; }
.sbs-nav-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-text-muted); }
.sbs-nav { gap: 4px; }
.sbs-nav a { border-radius: 12px; min-height: 42px; font-weight: 600; }
.sbs-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.sbs-nav a[aria-current="page"] {
    background: linear-gradient(90deg, rgba(139, 118, 255, 0.32), rgba(76, 124, 240, 0.14));
    color: #FFFFFF; font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(164, 147, 255, 0.30), 0 10px 26px -14px rgba(124, 102, 240, 0.9);
}
.sbs-nav a[aria-current="page"] .sb-icon { color: #C9BEFF; }
.sbs-nav a .sbs-count { background: #F4AA55; color: #1A1530; }
.sbs-account { border-top-color: rgba(255, 255, 255, 0.08); }

/* header: frosted glass over the aurora canvas */
.sbs-header {
    background: var(--sb-surface);
    background: color-mix(in srgb, var(--sb-surface) 74%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
}
.sbs-crumbs strong { font-weight: 700; }

/* headings */
html[data-studio-admin][data-theme] body h1,
html[data-studio-admin][data-theme] body.pbd-shell #app h1 { font-weight: 800 !important; letter-spacing: -0.025em !important; }

/* buttons: gradient primary with a soft glow; pill-free, 12px corners */
.sb-button { border-radius: var(--sb-radius-md); font-weight: 600; }
.sb-button--primary,
html[data-studio-admin] .bg-blue-600, html[data-studio-admin] .bg-indigo-600 {
    background-image: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-2));
}
.sb-button--primary { box-shadow: var(--sb-shadow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.sb-button--primary:hover:not(:disabled) {
    background-image: linear-gradient(135deg, var(--sb-primary-hover), var(--sb-primary-2));
    box-shadow: 0 14px 30px -12px rgba(106, 80, 224, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}
.sb-button--primary:active:not(:disabled) { transform: none; box-shadow: var(--sb-shadow-sm); }
.sb-button--secondary { border-color: var(--sb-border); background: var(--sb-surface); box-shadow: var(--sb-shadow-sm); }
.sb-button--secondary:hover:not(:disabled) { border-color: var(--sb-accent-border); }

/* cards: rounder, softly elevated */
.sb-card,
html[data-studio-admin] .vcard, html[data-studio-admin] .kpi-card, html[data-studio-admin] .chart-card,
html[data-studio-admin] .bg-white.rounded-2xl:not(.fixed),
html[data-studio-admin] body.pbd-shell .card { box-shadow: var(--sb-shadow-card); }
html[data-studio-admin] body.pbd-shell .card { border-color: var(--sb-border); }

/* inputs: softer border at rest, glowing focus */
.sb-input:focus, .sb-select:focus, .sb-textarea:focus,
html[data-studio-admin] body.pbd-shell .card input:focus, html[data-studio-admin] body.pbd-shell .card select:focus,
html[data-studio-admin] body.pbd-shell .card textarea:focus {
    border-color: var(--sb-primary); box-shadow: var(--sb-focus-ring); outline: none;
}

/* tabs: thicker accent bar */
.sb-tab[aria-selected="true"],
html[data-studio-admin][data-theme] #pbd-sidebar .pbd-nav-item.active { box-shadow: inset 0 -1px 0 var(--sb-primary); }
.sb-tab[aria-selected="true"], html[data-studio-admin][data-theme] #pbd-sidebar .pbd-nav-item.active { font-weight: 700; }

/* badges, toasts, save bar */
.sb-badge { border-radius: 999px; padding: 2px 10px; font-weight: 600; }
.sb-toast { border-radius: 14px; }
html[data-studio-admin] .sb-actionbar { border-radius: var(--sb-radius-lg); }

/* ---- 12. Flat menu (2026-10, phase B) ----------------------------------------
   The sidebar lists every page: "Workspace" pages + the Settings sections.
   On computers the sidebar replaces the in-page section row (its buttons stay in
   the DOM: admin-shell.js presses them, so dashboard.js still does the switching).
   Phones keep the row under the heading as a quick switcher. */
.sbs-nav-label--group { margin-top: 16px; }
.sbs-side { gap: 14px; }
.sbs-nav a { min-height: 40px; padding: 7px 10px; }
@media (min-width: 1024px) {
    html[data-studio-admin][data-theme] body.pbd-shell #pbd-sidebar { display: none !important; }
}

/* ---- 13. Overview (2026-10, phase C1) -----------------------------------------
   #sb-overview is built by overview-studio.js inside the Settings page; it shows only
   while the Overview section is open. html.sbo-ready is set once it exists, and only
   then does the old first-run banner / chips / tips step aside (they stay in the DOM). */
#sb-overview { display: flex; flex-direction: column; gap: 18px; margin: 4px 0 24px; }
html[data-studio-admin] body:not([data-pbd-group="overview"]) #sb-overview { display: none; }
html.sbo-ready[data-studio-admin] body.pbd-shell #onboarding-banner,
html.sbo-ready[data-studio-admin] body.pbd-shell #pbd-progress,
html.sbo-ready[data-studio-admin] body.pbd-shell[data-pbd-group="overview"] #pbd-tips { display: none !important; }

.sbo-hello { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 22px 24px;
    background: radial-gradient(120% 160% at 0% 0%, var(--sb-accent-soft), transparent 62%), var(--sb-surface); }
.sbo-hello-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sbo-eyebrow { font-size: 13px; font-weight: 700; color: var(--sb-text-secondary); }
html[data-studio-admin] .sbo-name { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--sb-ink); overflow-wrap: anywhere; }
.sbo-sub { font-size: 14px; color: var(--sb-text-secondary); }

.sbo-setup { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sb-shadow-card), 0 0 0 2px var(--sb-accent-soft); }
.sbo-setup-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; }
.sbo-setup-top > div { flex: 1 1 280px; min-width: 0; }
html[data-studio-admin] .sbo-setup h2, html[data-studio-admin] .sbo-attention h2, html[data-studio-admin] .sbo-head h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--sb-ink); }
.sbo-meter { height: 8px; border-radius: 4px; background: var(--sb-surface-muted); overflow: hidden; }
.sbo-meter i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--sb-primary), var(--sb-primary-2)); }
.sbo-steps { list-style: none; margin: 0; padding: 0; }
.sbo-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sb-border); }
.sbo-dot { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; border: 2px solid var(--sb-border-strong); display: grid; place-items: center; color: #fff; }
.sbo-steps li.done .sbo-dot { background: var(--sb-success); border-color: var(--sb-success); }
.sbo-steps li.done .sbo-dot .sb-icon { width: 14px; height: 14px; }
html[data-studio-admin][data-theme="dark"] .sbo-steps li.done .sbo-dot { color: #10261C; }
.sbo-step-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sbo-step-t b { font-size: 15px; color: var(--sb-ink); }
.sbo-step-t span { font-size: 13px; color: var(--sb-text-secondary); }

.sbo-waiting { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 22px; text-decoration: none; color: var(--sb-ink); }
.sbo-waiting:hover { border-color: var(--sb-accent-border); }
.sbo-waiting.is-waiting { box-shadow: var(--sb-shadow-card), 0 0 0 2px var(--sb-warning-border); }
.sbo-orb { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 800; color: #fff;
    background: radial-gradient(circle at 30% 25%, #FFD48A, #E08A1E 60%, #B45309); box-shadow: 0 10px 28px -10px rgba(224, 138, 30, 0.8); }
.sbo-calm { color: var(--sb-success); display: grid; place-items: center; }
.sbo-calm .sb-icon { width: 28px; height: 28px; }
.sbo-wait-t { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sbo-wait-t b { font-size: 17px; }
.sbo-wait-t span { font-size: 14px; color: var(--sb-text-secondary); overflow-wrap: anywhere; }
.sbo-go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--sb-accent-text); }

.sbo-block { display: flex; flex-direction: column; gap: 12px; }
.sbo-head { display: flex; align-items: baseline; gap: 12px; }
.sbo-head a { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--sb-accent-text); text-decoration: none; min-height: 32px; }
.sbo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.sbo-kpi { min-height: 104px; padding: 18px; border-radius: var(--sb-radius-lg); background: var(--sb-surface); border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow-card); display: flex; flex-direction: column; gap: 2px; }
.sbo-kpi b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--sb-ink); }
.sbo-kpi span { font-size: 14px; font-weight: 600; color: var(--sb-text-secondary); }
.sbo-kpi small { font-size: 12.5px; color: var(--sb-text-muted); }
.sbo-kpi.hero { border-color: transparent; background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-2)); box-shadow: var(--sb-shadow-primary); }
.sbo-kpi.hero b, .sbo-kpi.hero span, .sbo-kpi.hero small { color: #fff; }
.sbo-kpi.hero small { opacity: 0.85; }
.sbo-skel { background: linear-gradient(90deg, var(--sb-surface-muted) 0%, var(--sb-surface-hover) 50%, var(--sb-surface-muted) 100%);
    background-size: 200% 100%; animation: sbo-shim 1.3s linear infinite; }
@keyframes sbo-shim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sbo-empty { grid-column: 1 / -1; margin: 0; display: flex; align-items: center; gap: 10px; padding: 18px; border-radius: var(--sb-radius-lg);
    border: 1px dashed var(--sb-border-strong); color: var(--sb-text-secondary); font-size: 14px; }

.sbo-attention { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.sbo-list { list-style: none; margin: 0; padding: 0; }
.sbo-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--sb-border); }
.sbo-list li:first-child { border-top: 0; }
.sbo-ico { color: var(--sb-warning); display: grid; place-items: center; }
.sbo-list li.error .sbo-ico { color: var(--sb-danger); }
.sbo-item-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sbo-item-t b { font-size: 15px; color: var(--sb-ink); }
.sbo-item-t span { font-size: 13px; color: var(--sb-text-secondary); overflow-wrap: anywhere; }

.sbo-all { padding: 0; }
.sbo-all summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px; font-size: 16px; font-weight: 700; color: var(--sb-ink); }
.sbo-all summary::-webkit-details-marker { display: none; }
.sbo-all summary .sb-icon { margin-left: auto; transition: transform .15s ease; }
.sbo-all[open] summary .sb-icon { transform: rotate(90deg); }
html[data-studio-admin] .sbo-all #pbd-health { margin: 0; padding: 0 22px 22px; }

@media (max-width: 680px) {
    .sbo-hello, .sbo-setup, .sbo-waiting, .sbo-attention { padding: 18px; }
    html[data-studio-admin] .sbo-name { font-size: 22px; }
    .sbo-hello .sb-button, .sbo-setup-top .sb-button, .sbo-waiting .sb-button { width: 100%; }
    .sbo-kpis { grid-template-columns: 1fr 1fr; }
    .sbo-kpi.hero { grid-column: 1 / -1; }
    .sbo-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: start; }
    .sbo-list li .sb-button { grid-column: 2; justify-self: start; }
}

/* ---- 14. Chat button look field (CHG-003) ----------------------------------------
   Settings › Install on your Site: icon picker (radio inputs), two text fields and a live
   preview of the button on a shop page. */
html[data-studio-admin] .pb-bl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: start; }
@media (max-width: 760px) { html[data-studio-admin] .pb-bl-grid { grid-template-columns: minmax(0, 1fr); } }
html[data-studio-admin] .pb-bl-icons { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
html[data-studio-admin] .pb-bl-icon {
    position: relative; width: 52px; height: 52px; border-radius: 14px; cursor: pointer;
    display: grid; place-items: center; color: var(--sb-ink);
    border: 1px solid var(--sb-border-strong); background: var(--sb-surface);
}
html[data-studio-admin] .pb-bl-icon input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
html[data-studio-admin] .pb-bl-icon svg { width: 24px; height: 24px; pointer-events: none; }
html[data-studio-admin] .pb-bl-icon:hover { border-color: var(--sb-primary); }
html[data-studio-admin] .pb-bl-icon:has(input:checked) { border-color: transparent; box-shadow: 0 0 0 3px var(--sb-primary); color: var(--sb-accent-text); }
html[data-studio-admin] .pb-bl-icon:has(input:focus-visible) { outline: 2px solid var(--sb-focus); outline-offset: 3px; }
html[data-studio-admin] .pb-bl-preview {
    min-height: 170px; padding: 18px; border-radius: 16px; display: flex; flex-direction: column;
    align-items: flex-end; justify-content: flex-end; gap: 10px;
    background: linear-gradient(160deg, #fbfaf7, #efebe2); border: 1px solid var(--sb-border);
}
html[data-studio-admin] .pb-bl-greet {
    max-width: 210px; padding: 10px 12px; border-radius: 16px 16px 6px 16px; background: #fff; color: #121521;
    font-size: 13px; font-weight: 600; line-height: 1.4; box-shadow: 0 14px 30px -16px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(15, 23, 42, 0.06);
}
html[data-studio-admin] .pb-bl-btn {
    height: 56px; min-width: 56px; border-radius: 28px; display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; color: #fff; box-shadow: 0 12px 26px -10px rgba(15, 23, 42, 0.5);
}
html[data-studio-admin] .pb-bl-btn.has-label { padding: 0 18px 0 8px; }
html[data-studio-admin] #pb-bl-ico { width: 40px; height: 40px; display: grid; place-items: center; }
html[data-studio-admin] #pb-bl-ico img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; }
html[data-studio-admin] #pb-bl-ico svg { width: 26px; height: 26px; }
html[data-studio-admin] #pb-bl-lbl { font-size: 14px; font-weight: 700; white-space: nowrap; }
/* the field sits inside the Bubble Position box (dashboard.js moves that box into the Install card) */
html[data-studio-admin] .pb-bl-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sb-border); }

/* ===== §15 Shop connection (isi CHG-008: Settings › Shop & Cart) ===================== */
[data-studio-admin] .sc-root { display: grid; gap: 14px; }
[data-studio-admin] .sc-lead { margin: 0; color: var(--sb-text-secondary); font-size: 14px; }
[data-studio-admin] .sc-form { display: flex; gap: 8px; flex-wrap: wrap; }
[data-studio-admin] .sc-form input, [data-studio-admin] .sc-feed input {
    flex: 1 1 260px; min-height: 42px; padding: 0 12px; border-radius: var(--sb-radius-md);
    border: 1px solid var(--sb-border-strong); background: var(--sb-surface); color: var(--sb-ink); font-size: 14px;
}
[data-studio-admin] .sc-feed { font-size: 13px; color: var(--sb-text-secondary); }
[data-studio-admin] .sc-feed summary { cursor: pointer; margin-bottom: 8px; }
[data-studio-admin] .sc-feed input { width: 100%; }
[data-studio-admin] .sc-btn {
    min-height: 40px; padding: 0 16px; border-radius: var(--sb-radius-md); border: 1px solid var(--sb-border-strong);
    background: var(--sb-surface); color: var(--sb-ink); font-weight: 600; font-size: 14px; cursor: pointer;
}
[data-studio-admin] .sc-btn:hover { background: var(--sb-surface-hover); }
[data-studio-admin] .sc-btn:disabled { opacity: .55; cursor: wait; }
[data-studio-admin] .sc-primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-2)); }
[data-studio-admin] .sc-primary:hover { background: var(--sb-primary-hover); }
[data-studio-admin] .sc-yes { border-color: var(--sb-success); color: var(--sb-success); }
[data-studio-admin] .sc-muted { color: var(--sb-text-muted); font-size: 12.5px; }
[data-studio-admin] .sc-ok { color: var(--sb-success); font-weight: 600; }
[data-studio-admin] .sc-warn { color: var(--sb-warning); font-weight: 600; }
[data-studio-admin] .sc-saved { padding: 10px 12px; border-radius: var(--sb-radius-md); background: var(--sb-surface-muted); font-size: 13px; }
[data-studio-admin] .sc-progress { display: grid; gap: 6px; padding: 12px; border-radius: var(--sb-radius-md); background: var(--sb-surface-muted); }
[data-studio-admin] .sc-step { font-size: 13px; color: var(--sb-text-muted); }
[data-studio-admin] .sc-step.on { color: var(--sb-ink); font-weight: 600; }
[data-studio-admin] .sc-step.on::before { content: "● "; color: var(--sb-primary); animation: sc-blink 1s infinite; }
@keyframes sc-blink { 50% { opacity: .3; } }
[data-studio-admin] .sc-alert { padding: 10px 12px; border-radius: var(--sb-radius-md); background: var(--sb-danger-soft); border: 1px solid var(--sb-danger-border); color: var(--sb-danger); font-size: 13.5px; }
[data-studio-admin] .sc-report { display: grid; gap: 14px; padding: 16px; border-radius: var(--sb-radius-lg); border: 1px solid var(--sb-border); background: var(--sb-surface); box-shadow: var(--sb-shadow-sm); }
[data-studio-admin] .sc-head { display: grid; gap: 2px; }
[data-studio-admin] .sc-plat { font-size: 18px; font-weight: 750; color: var(--sb-ink); }
[data-studio-admin] .sc-checks { display: flex; flex-wrap: wrap; gap: 6px; }
[data-studio-admin] .sc-chip { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--sb-border); }
[data-studio-admin] .sc-chip.ok { background: var(--sb-success-soft); color: var(--sb-success); border-color: transparent; }
[data-studio-admin] .sc-chip.mid { background: var(--sb-warning-soft); color: var(--sb-warning); border-color: transparent; }
[data-studio-admin] .sc-chip.no { color: var(--sb-text-muted); }
[data-studio-admin] .sc-sub { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sb-text-muted); }
[data-studio-admin] .sc-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
[data-studio-admin] .sc-prod { border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); overflow: hidden; background: var(--sb-surface); }
[data-studio-admin] .sc-img { aspect-ratio: 4 / 3; background: #f8fafc center / contain no-repeat; }
[data-studio-admin] .sc-noimg { display: grid; place-items: center; color: var(--sb-text-muted); font-size: 12px; }
[data-studio-admin] .sc-pbody { padding: 8px 10px 10px; display: grid; gap: 4px; }
[data-studio-admin] .sc-pname { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-studio-admin] .sc-price { font-size: 13px; font-weight: 700; }
[data-studio-admin] .sc-price s { color: var(--sb-text-muted); font-weight: 500; }
[data-studio-admin] .sc-stock { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
[data-studio-admin] .sc-stock.ok { background: var(--sb-success-soft); color: var(--sb-success); }
[data-studio-admin] .sc-stock.mid { background: var(--sb-warning-soft); color: var(--sb-warning); }
[data-studio-admin] .sc-stock.no { background: var(--sb-danger-soft); color: var(--sb-danger); }
[data-studio-admin] .sc-opts { display: flex; flex-wrap: wrap; gap: 4px; }
[data-studio-admin] .sc-opt { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--sb-accent-soft); color: var(--sb-accent-text); }
[data-studio-admin] .sc-cart { display: grid; gap: 10px; padding-top: 4px; border-top: 1px solid var(--sb-border); }
[data-studio-admin] .sc-mode { display: grid; gap: 2px; font-size: 14px; }
[data-studio-admin] .sc-mode span { color: var(--sb-text-secondary); font-size: 13px; }
[data-studio-admin] .sc-test, [data-studio-admin] .sc-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
[data-studio-admin] .sc-ask { padding: 10px 12px; border-radius: var(--sb-radius-md); background: var(--sb-accent-soft); }
[data-studio-admin] .sc-done { padding: 10px 12px; border-radius: var(--sb-radius-md); background: var(--sb-success-soft); color: var(--sb-success); font-weight: 600; font-size: 13.5px; }
[data-studio-admin] .sc-notes { margin: 0; padding-left: 18px; color: var(--sb-text-secondary); font-size: 13px; display: grid; gap: 4px; }

/* ===== §16 Identity visual pickers (isi DES-C2: chat style, colour mode, product cards) ========= */
[data-studio-admin] .idp-hidden { display: none !important; }
[data-studio-admin] .idp { --idp-brand: #4F46E5; display: grid; gap: 10px; margin-top: 6px; }
[data-studio-admin] .idp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
[data-studio-admin] .idp-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { [data-studio-admin] .idp-three { grid-template-columns: 1fr; } }
[data-studio-admin] .idp-tile {
    display: grid; gap: 4px; padding: 10px; text-align: left; cursor: pointer;
    border: 1.5px solid var(--sb-border); border-radius: var(--sb-radius-lg); background: var(--sb-surface);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
[data-studio-admin] .idp-tile:hover { border-color: var(--sb-border-strong); transform: translateY(-1px); }
[data-studio-admin] .idp-tile.on { border-color: var(--idp-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--idp-brand) 18%, transparent); }
[data-studio-admin] .idp-name { font-size: 14px; font-weight: 700; color: var(--sb-ink); }
[data-studio-admin] .idp-name em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; color: #fff; background: var(--idp-brand); margin-left: 4px; vertical-align: 1px; }
[data-studio-admin] .idp-desc { font-size: 12px; color: var(--sb-text-muted); }
[data-studio-admin] .idp-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--sb-surface-muted); border: 1px solid var(--sb-border); width: fit-content; }
[data-studio-admin] .idp-seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--sb-text-secondary); cursor: pointer; }
[data-studio-admin] .idp-seg button.on { background: var(--sb-surface); color: var(--sb-ink); box-shadow: var(--sb-shadow-sm); }
/* mini chat preview */
[data-studio-admin] .idp-mini { position: relative; height: 104px; border-radius: 12px; overflow: hidden; border: 1px solid var(--sb-border); }
[data-studio-admin] .idp-mini i { position: absolute; display: block; }
[data-studio-admin] .idp-light { background: #f7f8fa; }
[data-studio-admin] .idp-dark { background: #05060a; }
[data-studio-admin] .idp-glow.idp-light { background: radial-gradient(80% 70% at 30% 0%, color-mix(in srgb, var(--idp-brand) 22%, transparent), transparent 70%), #f5f6fb; }
[data-studio-admin] .idp-glow.idp-dark { background: radial-gradient(80% 70% at 30% 0%, color-mix(in srgb, var(--idp-brand) 45%, transparent), transparent 70%), #05060a; }
[data-studio-admin] .idp-nebula.idp-light { background-image: radial-gradient(circle at 1px 1px, rgba(15,18,34,.12) 1px, transparent 1.6px), radial-gradient(80% 70% at 30% 0%, color-mix(in srgb, var(--idp-brand) 22%, transparent), transparent 70%); background-size: 10px 10px, auto; }
[data-studio-admin] .idp-nebula.idp-dark { background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 1.6px), radial-gradient(80% 70% at 30% 0%, color-mix(in srgb, var(--idp-brand) 45%, transparent), transparent 70%); background-size: 10px 10px, auto; }
[data-studio-admin] .idp-orb { left: 10px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--idp-brand), #22d3ee, #a855f7, var(--idp-brand)); }
[data-studio-admin] .idp-nebula .idp-orb { border-radius: 5px; }
[data-studio-admin] .idp-l1, [data-studio-admin] .idp-l2 { left: 32px; height: 5px; border-radius: 4px; }
[data-studio-admin] .idp-l1 { top: 12px; width: 46%; }
[data-studio-admin] .idp-l2 { top: 21px; width: 30%; opacity: .6; }
[data-studio-admin] .idp-light .idp-l1, [data-studio-admin] .idp-light .idp-l2 { background: #1e2030; }
[data-studio-admin] .idp-dark .idp-l1, [data-studio-admin] .idp-dark .idp-l2 { background: #e9eaf2; }
[data-studio-admin] .idp-me { right: 10px; top: 38px; width: 40%; height: 14px; border-radius: 8px 8px 3px 8px; background: linear-gradient(135deg, var(--idp-brand), color-mix(in srgb, var(--idp-brand) 55%, #22d3ee)); }
[data-studio-admin] .idp-bot { left: 10px; top: 58px; width: 55%; height: 16px; border-radius: 3px 9px 9px 9px; }
[data-studio-admin] .idp-nebula .idp-me { border-radius: 5px 5px 2px 5px; }
[data-studio-admin] .idp-nebula .idp-bot { border-radius: 2px 5px 5px 5px; }
[data-studio-admin] .idp-light .idp-bot { background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(15,18,34,.08); }
[data-studio-admin] .idp-dark .idp-bot { background: rgba(255,255,255,.08); box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
[data-studio-admin] .idp-input { left: 10px; right: 10px; bottom: 9px; height: 16px; border-radius: 9px; }
[data-studio-admin] .idp-nebula .idp-input { border-radius: 5px; }
[data-studio-admin] .idp-light .idp-input { background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--idp-brand) 45%, transparent); }
[data-studio-admin] .idp-dark .idp-input { background: #0d0f16; box-shadow: 0 0 0 1px color-mix(in srgb, var(--idp-brand) 55%, transparent); }
/* mini product cards */
[data-studio-admin] .idp-cards { height: 74px; border-radius: 12px; background: var(--sb-surface-muted); border: 1px solid var(--sb-border); display: flex; gap: 6px; padding: 8px; overflow: hidden; }
[data-studio-admin] .idp-cards i { display: block; border-radius: 7px; background: var(--sb-surface); box-shadow: 0 0 0 1px var(--sb-border); position: relative; }
[data-studio-admin] .idp-cards i::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 6px; border-radius: 4px; background: var(--idp-brand); }
[data-studio-admin] .idp-carousel i { flex: 0 0 38%; }
[data-studio-admin] .idp-stacked { flex-direction: column; }
[data-studio-admin] .idp-stacked i { flex: 1; }
[data-studio-admin] .idp-stacked i::after { left: auto; width: 26%; top: 6px; height: auto; }
[data-studio-admin] .idp-inter i { flex: 0 0 46%; overflow: hidden; }
[data-studio-admin] .idp-inter b { position: absolute; inset: 0 0 45% 0; background: linear-gradient(135deg, color-mix(in srgb, var(--idp-brand) 30%, #e5e7eb), #f1f5f9); }
[data-studio-admin] .idp-inter u { position: absolute; right: 5px; top: 3px; font-size: 10px; text-decoration: none; color: #e11d48; }

/* ===== §17 Commerce / Channels grouped feature lists (isi DES-C3 v2, matches the prototype) ===== */
[data-studio-admin] .card.fx-group { padding: 8px 24px 10px !important; gap: 0 !important; }
[data-studio-admin] .fx-gtitle { font-size: 19px !important; font-weight: 800 !important; padding: 16px 0 6px; margin: 0 !important; color: var(--sb-ink); }
[data-studio-admin] .fx-gnote { font-size: 13.5px; color: var(--sb-text-secondary); margin: 0 0 6px; padding-left: 12px; border-left: 3px solid var(--sb-border-strong); }
/* a feature card inside a group becomes a row with a separator, not a box */
[data-studio-admin] .fx-group > .card.fx-feature {
    margin: 0 !important; padding: 16px 0 !important; border: 0 !important; border-top: 1px solid var(--sb-border) !important;
    border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
}
[data-studio-admin] .fx-group > .fx-gtitle + .card.fx-feature, [data-studio-admin] .fx-group > .fx-gnote + .card.fx-feature { border-top: 0 !important; }
[data-studio-admin] .fx-hidden-title, [data-studio-admin] .fx-hidden-toggle { display: none !important; }
[data-studio-admin] .fx-row { display: flex; align-items: center; gap: 14px; }
[data-studio-admin] .fx-ico { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--sb-surface-muted); color: var(--sb-text-muted); transition: all .2s; }
[data-studio-admin] .fx-is-on .fx-ico { background: var(--sb-accent-soft); color: var(--sb-accent-text); }
[data-studio-admin] .fx-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
[data-studio-admin] .fx-t b { font-size: 15.5px; font-weight: 750; color: var(--sb-ink); }
[data-studio-admin] .fx-t > span { font-size: 13.5px; color: var(--sb-text-secondary); line-height: 1.4; }
[data-studio-admin] .fx-pro { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--sb-accent-text); background: var(--sb-accent-soft); border-radius: 6px; padding: 2px 6px; margin-left: 6px; vertical-align: 2px; }
[data-studio-admin] .fx-switch { position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: var(--sb-border-strong); transition: background .2s; }
[data-studio-admin] .fx-switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .2s; }
[data-studio-admin] .fx-switch[aria-checked="true"] { background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-2)); }
[data-studio-admin] .fx-switch[aria-checked="true"] i { transform: translateX(22px); }
[data-studio-admin] .fx-switch:disabled { opacity: .45; cursor: not-allowed; }
[data-studio-admin] .fx-state { flex: none; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--sb-surface-muted); color: var(--sb-text-secondary); }
[data-studio-admin] .fx-state.on { background: var(--sb-success-soft); color: var(--sb-success); }
/* the feature's own settings, indented under its row; folded while the feature is off */
[data-studio-admin] .card.fx-feature > :not(.fx-row):not(.fx-hidden-title) {
    margin: 14px 0 2px 56px !important; padding: 16px !important; border-radius: 16px !important;
    background: var(--sb-surface-muted) !important; border: 1px solid var(--sb-border) !important;
}
@media (max-width: 640px) { [data-studio-admin] .card.fx-feature > :not(.fx-row):not(.fx-hidden-title) { margin-left: 0 !important; } }
[data-studio-admin] .card.fx-feature.fx-off > :not(.fx-row) { display: none !important; }
/* tidy the old coloured panels inside: one calm surface */
[data-studio-admin] .card.fx-feature [class*="bg-gradient-to-br"], [data-studio-admin] .card.fx-feature [class*="-50 "][class*="rounded"] { background: transparent !important; border: 0 !important; padding: 0 !important; }

/* ===== §18 Billing plans (isi DES-C4): roomy plan cards, clear price, chosen plan stands out ======== */
[data-studio-admin] .card:has(h2[data-section="plan"]) .grid:has(> .sel-card) { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)) !important; gap: 12px !important; }
[data-studio-admin] .card:has(h2[data-section="plan"]) .sel-card {
    position: relative; padding: 16px !important; border-radius: var(--sb-radius-lg) !important;
    border: 1.5px solid var(--sb-border) !important; background: var(--sb-surface) !important;
    transition: transform .15s, box-shadow .15s, border-color .15s; overflow-wrap: anywhere;
}
[data-studio-admin] .card:has(h2[data-section="plan"]) .sel-card:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-card); }
[data-studio-admin] .card:has(h2[data-section="plan"]) .sel-card:has(input:checked) {
    border-color: var(--sb-primary) !important; box-shadow: 0 0 0 3px var(--sb-accent-soft), var(--sb-shadow-card) !important;
    background: linear-gradient(180deg, var(--sb-accent-soft), var(--sb-surface) 55%) !important;
}
[data-studio-admin] .card:has(h2[data-section="plan"]) .sel-card > div:first-of-type { font-size: 12px !important; letter-spacing: .08em; color: var(--sb-text-secondary) !important; }
[data-studio-admin] .card:has(h2[data-section="plan"]) .sel-card > div:nth-of-type(3) { font-size: 20px !important; font-weight: 800 !important; color: var(--sb-ink) !important; margin-top: 6px; letter-spacing: -.02em; }
[data-studio-admin] .card:has(h2[data-section="plan"]) .sel-card > div:nth-of-type(4) { color: var(--sb-text-secondary) !important; line-height: 1.55; }

/* ===== §19 Agent Inbox polish (isi DES-C5) ===================================================== */
[data-studio-admin] .ibx-strip { display: grid; grid-template-columns: 180px 180px 1fr; gap: 10px; margin: 0 0 18px; }
@media (max-width: 860px) { [data-studio-admin] .ibx-strip { grid-template-columns: 1fr 1fr; } [data-studio-admin] .ibx-tip { grid-column: 1 / -1; } }
[data-studio-admin] .ibx-kpi { display: grid; gap: 1px; padding: 12px 14px; border-radius: var(--sb-radius-lg); border: 1px solid var(--sb-border); background: var(--sb-surface); }
[data-studio-admin] .ibx-kpi b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--sb-ink); line-height: 1.1; }
[data-studio-admin] .ibx-kpi span { font-size: 12.5px; color: var(--sb-text-secondary); font-weight: 600; }
[data-studio-admin] .ibx-kpi small { font-size: 11.5px; color: var(--sb-warning); font-weight: 600; }
[data-studio-admin] .ibx-kpi.ibx-warn { border-color: var(--sb-warning-border); background: linear-gradient(180deg, var(--sb-warning-soft), var(--sb-surface)); }
[data-studio-admin] .ibx-kpi.ibx-warn b { color: var(--sb-warning); }
[data-studio-admin] .ibx-kpi.ibx-ok b { color: var(--sb-success); }
[data-studio-admin] .ibx-tip { display: flex; align-items: center; padding: 12px 14px; border-radius: var(--sb-radius-lg); background: var(--sb-surface-muted); color: var(--sb-text-secondary); font-size: 13px; }
/* list: waiting customers stand out */
[data-studio-admin] #ib-list .ib-item { position: relative; padding-left: 52px !important; }
[data-studio-admin] #ib-list .ib-item::before {
    content: ""; position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%;
    background: var(--sb-surface-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / 15px no-repeat;
}
[data-studio-admin] #ib-list .ib-item:has(.ib-dot.waiting) { border-left: 3px solid #F59E0B !important; background: linear-gradient(90deg, rgba(245,158,11,.07), var(--sb-surface) 40%) !important; }
[data-studio-admin] #ib-list .ib-item:has(.ib-dot.active) { border-left: 3px solid var(--sb-success) !important; }
[data-studio-admin] #ib-list .ib-item:has(.ib-dot.waiting) .ml-auto { color: #B45309 !important; font-weight: 700; }
/* conversation: who said what */
[data-studio-admin] #msgs .ib-bubble { position: relative; margin-top: 16px; box-shadow: var(--sb-shadow-sm); }
[data-studio-admin] #msgs .ib-bubble::before { position: absolute; top: -16px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--sb-text-muted); white-space: nowrap; }
[data-studio-admin] #msgs .ib-user { background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-2)) !important; color: #fff !important; border-radius: 16px 16px 4px 16px !important; }
[data-studio-admin] #msgs .ib-user::before { content: "CUSTOMER"; right: 4px; }
[data-studio-admin] #msgs .ib-bot { border-radius: 4px 16px 16px 16px !important; }
[data-studio-admin] #msgs .ib-bot::before { content: "✦ AI ASSISTANT"; left: 4px; }
[data-studio-admin] #msgs .ib-agent { border-radius: 4px 16px 16px 16px !important; }
[data-studio-admin] #msgs .ib-agent::before { content: "YOU / YOUR TEAM"; left: 4px; color: var(--sb-success); }
/* empty conversation panel */
[data-studio-admin] #panel-empty { flex-direction: column; gap: 10px; }
[data-studio-admin] #panel-empty::before {
    content: ""; width: 64px; height: 64px; border-radius: 20px; opacity: .9;
    background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-2)) ;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z'/%3E%3C/svg%3E") center / 64px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z'/%3E%3C/svg%3E") center / 64px no-repeat;
}

/* ===== §20 Conversations polish (isi DES-C6) ================================================== */
[data-studio-admin] .cvx-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
@media (max-width: 860px) { [data-studio-admin] .cvx-strip { grid-template-columns: 1fr 1fr; } }
[data-studio-admin] .cvx-kpi { display: grid; gap: 1px; padding: 12px 14px; border-radius: var(--sb-radius-lg); border: 1px solid var(--sb-border); background: var(--sb-surface); }
[data-studio-admin] .cvx-kpi b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--sb-ink); line-height: 1.1; }
[data-studio-admin] .cvx-kpi span { font-size: 12.5px; color: var(--sb-text-secondary); font-weight: 600; }
[data-studio-admin] .cvx-kpi small { font-size: 11.5px; color: var(--sb-success); font-weight: 700; }
[data-studio-admin] .cvx-kpi.cvx-ok b { color: var(--sb-success); }
[data-studio-admin] .cvx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
[data-studio-admin] .cvx-chips button { border: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-text-secondary); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
[data-studio-admin] .cvx-chips button.on { background: var(--sb-ink); color: var(--sb-surface); border-color: var(--sb-ink); }
/* table: no awkward wrapping */
[data-studio-admin] #rows td:nth-child(3), [data-studio-admin] #rows td:last-child, [data-studio-admin] #rows td:first-child { white-space: nowrap; }
[data-studio-admin] #rows td:first-child { font-size: 12px; color: var(--sb-text-secondary); }
[data-studio-admin] #rows tr { transition: background-color .12s; }
[data-studio-admin] #rows tr:hover { background: var(--sb-surface-hover); }
/* transcript: same speaker look as the Inbox */
[data-studio-admin] #detail-messages > div > div:first-child { border-radius: 16px; }

/* ===== §21 Analytics + Voice polish (isi DES-C7) ============================================== */
[data-studio-admin] #anx-nav {
    position: sticky; top: 64px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    margin: -16px 0 22px; padding: 8px; border-radius: 14px; border: 1px solid var(--sb-border);
    background: color-mix(in srgb, var(--sb-surface) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: var(--sb-shadow-sm);
}
[data-studio-admin] #anx-nav::-webkit-scrollbar { display: none; }
[data-studio-admin] #anx-nav a { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--sb-text-secondary); text-decoration: none; }
[data-studio-admin] #anx-nav a:hover { background: var(--sb-surface-muted); color: var(--sb-ink); }
[data-studio-admin] #anx-nav a.on { background: var(--sb-ink); color: var(--sb-surface); }
[data-studio-admin] .chart-card { scroll-margin-top: 130px; }
/* Voice: use the page width, aligned rows, outcome chips */
[data-studio-admin] body:has(#calls-table) #app.max-w-3xl { max-width: 1040px !important; }
[data-studio-admin] #calls-table td { vertical-align: middle !important; padding-top: 10px !important; padding-bottom: 10px !important; }
[data-studio-admin] #calls-table tbody tr:hover { background: var(--sb-surface-hover); }
[data-studio-admin] #calls-table td.vx-ok, [data-studio-admin] #calls-table td.vx-human, [data-studio-admin] #calls-table td.vx-miss { font-size: 12px; font-weight: 600; }
[data-studio-admin] #calls-table td[data-vx] { padding-left: 8px !important; }
[data-studio-admin] #calls-table td.vx-ok { color: var(--sb-success); }
[data-studio-admin] #calls-table td.vx-human { color: var(--sb-warning); }
[data-studio-admin] #calls-table td.vx-miss { color: var(--sb-danger); }

/* ===== §18b Billing › Voice minutes (isi DES-C4 v2) ========================================== */
[data-studio-admin] .vbx { padding: 22px !important; gap: 12px; }
[data-studio-admin] .vbx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
[data-studio-admin] .vbx-head h2 { font-size: 19px; font-weight: 800; margin: 0; }
[data-studio-admin] .vbx-head a { font-weight: 700; color: var(--sb-primary); text-decoration: none; font-size: 14px; }
[data-studio-admin] .vbx-lead { margin: 6px 0 0; color: var(--sb-text-secondary); font-size: 14px; }
[data-studio-admin] .vbx-used { margin-top: 10px; font-size: 13.5px; color: var(--sb-text-secondary); }
[data-studio-admin] .vbx-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
[data-studio-admin] .vbx-plan { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--sb-radius-lg); border: 1.5px solid var(--sb-border); background: var(--sb-surface); }
[data-studio-admin] .vbx-plan.cur { border-color: var(--sb-primary); box-shadow: 0 0 0 3px var(--sb-accent-soft); }
[data-studio-admin] .vbx-plan b { font-size: 15px; }
[data-studio-admin] .vbx-price { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--sb-ink); }
[data-studio-admin] .vbx-price small { font-size: 13px; font-weight: 600; color: var(--sb-text-secondary); }
[data-studio-admin] .vbx-min { font-size: 13px; color: var(--sb-text-secondary); margin-bottom: 8px; }
[data-studio-admin] .vbx-plan button { align-self: flex-start; min-height: 36px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--sb-border-strong); background: var(--sb-surface); font-weight: 700; cursor: pointer; color: var(--sb-ink); }
[data-studio-admin] .vbx-plan button:hover { background: var(--sb-surface-hover); }
[data-studio-admin] .vbx-your { align-self: flex-start; font-size: 12.5px; font-weight: 800; color: var(--sb-success); background: var(--sb-success-soft); padding: 6px 10px; border-radius: 999px; }
[data-studio-admin] .vbx-msg { grid-column: 1 / -1; padding: 16px; border-radius: 14px; border: 1px dashed var(--sb-border-strong); color: var(--sb-text-secondary); font-size: 14px; }

/* ===== §13b Overview v2 (isi DES-C1 v2: matches the approved prototype) ========================== */
html[data-studio-admin] body[data-pbd-group="overview"] #sb-actionbar:not(:has(.sb-save-status--dirty, .sb-save-status--saving, .sb-save-status--error)) { display: none !important; }   /* nothing to save here */
html[data-studio-admin] body[data-pbd-group="overview"] #pbd-tips { display: none !important; }
.sbo-hello { background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px 0 0 !important; align-items: flex-end !important; }
.sbo-name { font-size: 34px !important; letter-spacing: -.03em; }
.sbo-live { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--sb-success-soft); color: var(--sb-success); }
.sbo-live i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.sbo-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { .sbo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.sbo-kpi small .up { color: var(--sb-success); font-weight: 700; }
.sbo-kpi small .down { color: var(--sb-danger); font-weight: 700; }
.sbo-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .sbo-cols { grid-template-columns: minmax(0, 1fr); } }
.sbo-side { display: flex; flex-direction: column; gap: 18px; }
.sbo-latest, .sbo-asks { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.sbo-chats { display: flex; flex-direction: column; gap: 10px; }
.sbo-chat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--sb-border); background: var(--sb-surface-muted); text-decoration: none; color: inherit; transition: border-color .15s; }
.sbo-chat:hover { border-color: var(--sb-border-strong); }
.sbo-chat-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sbo-chat-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sb-ink); }
.sbo-chat-t span { font-size: 13px; color: var(--sb-text-secondary); }
.sbo-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.sbo-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sbo-pill.on { background: var(--sb-success-soft); color: var(--sb-success); }
.sbo-pill.attn { background: var(--sb-warning-soft); color: var(--sb-warning); }
.sbo-pill.off { background: transparent; color: var(--sb-text-secondary); }
.sbo-allgood { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; color: var(--sb-success); font-weight: 600; font-size: 14px; }
.sbo-allgood .sb-icon { width: 18px; height: 18px; }
.sbo-bar { display: flex; flex-direction: column; gap: 6px; }
.sbo-bar > div { display: flex; justify-content: space-between; font-size: 14.5px; font-weight: 600; color: var(--sb-ink); }
.sbo-bar i { display: block; height: 8px; border-radius: 6px; background: var(--sb-surface-muted); border: 1px solid var(--sb-border); overflow: hidden; }
.sbo-bar u { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--sb-primary), var(--sb-primary-2)); }
.sbo-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 4px 0 0; font-weight: 700; font-size: 14px; color: var(--sb-primary); cursor: pointer; }
.sbo-link .sb-icon { width: 16px; height: 16px; }
html[data-studio-admin] body[data-pbd-group="overview"] #app h1:first-of-type, html[data-studio-admin] body[data-pbd-group="overview"] #app h1:first-of-type + p { display: none !important; }
.sbo-hello-text { flex: 1 1 100% !important; }
.sbo-hello .sbo-live { margin-right: auto; }
html[data-studio-admin] .sbo-asks h2, html[data-studio-admin] .sbo-latest h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--sb-ink); }

/* ===== §16b Business & Bot polish (isi DES-C2 v2) ============================================== */
[data-studio-admin] .bbx-scan {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0 0 18px; padding: 20px 22px; border-radius: var(--sb-radius-lg); color: #fff;
    background: radial-gradient(80% 120% at 0% 0%, rgba(124,102,240,.55), transparent 60%), radial-gradient(70% 120% at 100% 100%, rgba(18,181,203,.45), transparent 60%), #14122E;
    box-shadow: 0 24px 50px -26px rgba(76,53,201,.8);
}
[data-studio-admin] .bbx-scan-t { flex: 1 1 300px; display: flex; flex-direction: column; gap: 4px; }
[data-studio-admin] .bbx-scan-t b { font-size: 18px; font-weight: 800; }
[data-studio-admin] .bbx-scan-t span { color: rgba(255,255,255,.82); font-size: 14px; }
[data-studio-admin] .bbx-scan-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 0; cursor: pointer; font-weight: 800; color: #14122E; background: #fff; box-shadow: 0 0 28px -6px rgba(255,255,255,.6); }
[data-studio-admin] details.bbx-fold { margin: 12px 0; border: 1px solid var(--sb-border); border-radius: 14px; background: var(--sb-surface); }
[data-studio-admin] details.bbx-fold > summary { cursor: pointer; padding: 12px 14px; font-weight: 700; font-size: 14px; color: var(--sb-ink); list-style: none; display: flex; justify-content: space-between; }
[data-studio-admin] details.bbx-fold > summary::after { content: "Show"; font-size: 12.5px; color: var(--sb-primary); }
[data-studio-admin] details.bbx-fold[open] > summary::after { content: "Hide"; }
[data-studio-admin] details.bbx-fold > summary::-webkit-details-marker { display: none; }
[data-studio-admin] details.bbx-fold > div { margin: 0 12px 12px !important; }
[data-studio-admin] .bbx-ptable { margin: 10px 0 12px; border: 1px solid var(--sb-border); border-radius: 14px; overflow: hidden; background: var(--sb-surface); }
[data-studio-admin] .bbx-ptable table { width: 100%; border-collapse: collapse; font-size: 14px; }
[data-studio-admin] .bbx-ptable th { text-align: left; padding: 9px 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-text-muted); background: var(--sb-surface-muted); }
[data-studio-admin] .bbx-ptable td { padding: 9px 12px; border-top: 1px solid var(--sb-border); color: var(--sb-ink); vertical-align: middle; }
[data-studio-admin] .bbx-ptable .n { text-align: right; font-variant-numeric: tabular-nums; }
[data-studio-admin] .bbx-thumb { display: inline-block; width: 28px; height: 28px; border-radius: 8px; margin-right: 10px; vertical-align: middle; background: var(--sb-surface-muted) center / cover no-repeat; border: 1px solid var(--sb-border); }
[data-studio-admin] .bbx-more, [data-studio-admin] .bbx-empty { padding: 9px 12px; font-size: 13px; color: var(--sb-text-secondary); border-top: 1px solid var(--sb-border); }
[data-studio-admin] .bbx-edit-note { font-size: 12.5px; color: var(--sb-text-secondary); margin: 4px 0 6px; }
/* CHG-011 Sync my products */
[data-studio-admin] .sc-sync { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; padding: 14px; border-radius: var(--sb-radius-md); border: 1px solid var(--sb-accent-border, var(--sb-border)); background: var(--sb-accent-soft); }
[data-studio-admin] .sc-sync-t { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--sb-text-secondary); }
[data-studio-admin] .sc-sync-t b { font-size: 14.5px; color: var(--sb-ink); }

/* ===== §22 Prototype shell (isi DES-D5, 2026-10-18): the approved prototype's look for every admin page ==========
   Floating deep-space sidebar (always dark), aurora workspace, Manrope type, roomier cards, wider page.
   Pure CSS over the existing markup: no element, id, form field or script changes. */
html[data-studio-admin] {
    --sb-font: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sbs-side-w: 268px;
    --sb-radius-lg: 22px;
    --sb-radius-md: 14px;
    --sbx-side: #100E2A; --sbx-side2: #1C1946; --sbx-side-ink: #EEEDFF; --sbx-side-muted: #ABA8D8; --sbx-side-line: rgba(255,255,255,.09);
}
html[data-studio-admin] body { font-size: 15px; padding-left: calc(var(--sbs-side-w) + 32px); }
/* sidebar: a floating dark card, like the prototype */
html[data-studio-admin] .sbs-side {
    top: 16px; left: 16px; bottom: 16px; width: var(--sbs-side-w);
    padding: 14px 12px; gap: 10px; border: 0; border-radius: 26px; color: var(--sbx-side-ink);
    background: radial-gradient(120% 50% at 0% 0%, rgba(124,102,240,.38), transparent 60%),
                radial-gradient(90% 40% at 100% 0%, rgba(18,181,203,.22), transparent 60%),
                linear-gradient(180deg, var(--sbx-side2), var(--sbx-side) 55%);
    box-shadow: 0 24px 50px -24px rgba(16,14,42,.65), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-studio-admin] .sbs-brand { color: var(--sbx-side-ink); }
html[data-studio-admin] .sbs-brand img { width: 36px; height: 36px; flex-basis: 36px; border-radius: 12px; box-shadow: 0 0 22px rgba(124,102,240,.6); }
html[data-studio-admin] .sbs-brand span { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
html[data-studio-admin] .sbs-workspace { border-radius: 16px; border-color: var(--sbx-side-line); background: rgba(255,255,255,.06); padding: 8px 10px; }
html[data-studio-admin] .sbs-ws-avatar { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; background: rgba(139,118,255,.28); color: #fff; font-weight: 800; }
html[data-studio-admin] .sbs-ws-name { color: var(--sbx-side-ink); font-size: 15px; font-weight: 700; }
html[data-studio-admin] .sbs-ws-sub { color: var(--sbx-side-muted); font-size: 12.5px; font-weight: 600; }
html[data-studio-admin] .sbs-nav-label { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sbx-side-muted); padding: 10px 12px 4px; }
html[data-studio-admin] .sbs-nav a { min-height: 42px; padding: 0 12px; gap: 12px; border-radius: 14px; color: var(--sbx-side-ink); opacity: .86; font-size: 15.5px; font-weight: 600; }
html[data-studio-admin] .sbs-nav a:hover { background: rgba(255,255,255,.06); color: var(--sbx-side-ink); opacity: 1; }
html[data-studio-admin] .sbs-nav a[aria-current="page"] {
    opacity: 1; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, rgba(139,118,255,.38), rgba(18,181,203,.20));
    box-shadow: inset 0 0 0 1px rgba(201,190,255,.28), 0 0 26px -8px rgba(139,118,255,.9);
}
html[data-studio-admin] .sbs-nav a .sbs-count:not(.hidden) { background: #F59E0B; color: #1B1204; min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 12px; font-size: 12.5px; font-weight: 800; }
html[data-studio-admin] .sbs-side-bottom { border-top: 1px solid var(--sbx-side-line); padding-top: 10px; gap: 10px; }
html[data-studio-admin] .sbs-appearance label { color: var(--sbx-side-muted); font-weight: 700; font-size: 12.5px; }
html[data-studio-admin] .sbs-appearance select { border-color: var(--sbx-side-line); background: rgba(255,255,255,.06); color: var(--sbx-side-ink); border-radius: 12px; }
html[data-studio-admin] .sbs-appearance option { color: #16142F; background: #fff; }
html[data-studio-admin] .sbs-account { border-top: 0; padding-top: 0; }
html[data-studio-admin] .sbs-account-id { color: var(--sbx-side-muted); }
html[data-studio-admin] .sbs-side .sb-button--secondary { background: rgba(255,255,255,.08); color: var(--sbx-side-ink); border-color: var(--sbx-side-line); }
html[data-studio-admin] .sbs-side .sb-button--quiet { color: var(--sbx-side-muted); }
html[data-studio-admin] .sbs-side .sb-button:hover:not(:disabled) { background: rgba(255,255,255,.12); color: #fff; }
/* header: no bar, just the breadcrumb floating over the aurora */
html[data-studio-admin] .sbs-header { background: transparent; border-bottom: 0; height: 52px; padding: 0 28px; backdrop-filter: none; }
/* page: wider, bigger type, prototype cards */
html[data-studio-admin] body.pbd-shell #app, html[data-studio-admin] #app.max-w-4xl, html[data-studio-admin] #app.max-w-5xl { max-width: 1180px !important; }
html[data-studio-admin][data-theme] body #app h1 { font-size: 34px !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
html[data-studio-admin] body #app h1 + p { font-size: 16px; color: var(--sb-text-secondary); }
html[data-studio-admin] body #app .card, html[data-studio-admin] .sb-card { border-radius: var(--sb-radius-lg) !important; box-shadow: var(--sb-shadow-card) !important; }
html[data-studio-admin] body #app .card { padding: 22px !important; }
html[data-studio-admin] body #app .card h2 { font-size: 20px !important; font-weight: 800 !important; letter-spacing: -.02em; }
html[data-studio-admin] .sb-button--primary { background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-2)); font-weight: 800; box-shadow: 0 12px 26px -14px var(--sb-primary), inset 0 1px 0 rgba(255,255,255,.22); }
html[data-studio-admin] .sb-button--primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--sb-primary-hover), var(--sb-primary-2)); filter: brightness(1.06); }
html[data-studio-admin] .sb-button { font-weight: 700; }
/* save bar: the prototype's dark floating bar */
html[data-studio-admin] #sb-actionbar { border-radius: 20px !important; background: #14122E !important; color: #fff !important; border: 0 !important; box-shadow: 0 22px 44px -18px rgba(16,14,42,.7) !important; }
html[data-studio-admin] #sb-actionbar .sb-save-status, html[data-studio-admin] #sb-actionbar .sb-save-status span { color: #fff !important; }
html[data-studio-admin] #sb-actionbar .sb-button--quiet { color: rgba(255,255,255,.85) !important; border: 1px solid rgba(255,255,255,.28) !important; }
/* Overview has nothing to preview or save: the page gets the full width (the preview stays on every settings page) */
@media (min-width: 1200px) {
    html[data-studio-admin] body.pbd-shell.pbd-preview-docked[data-pbd-group="overview"] { padding-right: 24px; }
    html[data-studio-admin] body.pbd-shell.pbd-preview-docked[data-pbd-group="overview"] #pb-preview-drawer { display: none !important; }
}
.sbo-kpi { border-radius: 20px !important; padding: 18px 20px !important; }
.sbo-kpi b { font-size: 36px !important; letter-spacing: -.03em !important; }
.sbo-kpi span { color: var(--sb-ink) !important; font-weight: 700 !important; font-size: 15px !important; }
.sbo-kpi.hero { background: linear-gradient(135deg, #6A50E0, #4C7CF0 60%, #0E9DB0) !important; box-shadow: 0 20px 40px -22px #4C35C9 !important; }
.sbo-kpi.hero span { color: #fff !important; }
@media (max-width: 1023px) {
    html[data-studio-admin] body { padding-left: 0; }
    html[data-studio-admin] .sbs-side { top: 0; left: 0; bottom: 0; border-radius: 0 24px 24px 0; }
    html[data-studio-admin] .sbs-header { background: color-mix(in srgb, var(--sb-canvas) 82%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--sb-border); }
}

/* ===== §23 Business & Bot: side-menu sections + calmer fields (isi DES-D6, 2026-10-18) ===================
   Same fields and ids; settings-studio.js regroups them, business-studio.js adds the summaries. */
html[data-studio-admin] body #app .card.sb-bb-editor { padding: 0 !important; overflow: visible; }
html[data-studio-admin] form:has(> .sb-bb-editor), html[data-studio-admin] form:has(.sb-bb-editor) { container: bbx / inline-size; }
.sb-bb-editor { grid-template-columns: 236px minmax(0, 1fr); align-items: start; }
body.pbd-shell .sb-bb-editor.pbd-visible { display: grid !important; }      /* only on Business & Bot: the page switcher hides it elsewhere */
.sb-bb-editor .sb-bb-tabs {
    position: sticky; top: 64px; display: flex !important; flex-direction: column; gap: 2px !important; overflow: visible;
    padding: 14px 10px !important; border-bottom: 0 !important; border-right: 1px solid var(--sb-border); align-self: stretch;
}
.sb-bb-editor .sb-tab {
    display: grid !important; grid-template-columns: minmax(0, 1fr) 10px; grid-template-areas: "t dot" "sub dot"; align-items: center; column-gap: 8px;
    text-align: left; width: 100%; min-height: 54px; padding: 8px 12px !important; margin: 0 !important; border: 0 !important; border-radius: 12px !important;
    background: transparent !important; color: var(--sb-ink) !important; cursor: pointer;
}
.sb-bb-editor .sb-tab::after { display: none !important; }
.sb-bb-editor .sb-tab:hover { background: var(--sb-surface-muted) !important; }
.sb-bb-editor .sb-tab[aria-selected="true"] { background: var(--sb-accent-soft) !important; box-shadow: inset 3px 0 0 var(--sb-primary); }
.sb-bb-tab-t { grid-area: t; font-size: 14.5px; font-weight: 800; }
.sb-bb-tab-sub { grid-area: sub; font-size: 12.5px; font-weight: 600; color: var(--sb-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-bb-tab-sub:empty { display: none; }
.sb-bb-dot { grid-area: dot; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.sb-bb-dot.ok { background: var(--sb-success); }
.sb-bb-dot.warn { background: #F59E0B; }
html[data-studio-admin] .sb-bb-editor .sb-bb-panes { min-width: 0; }
html[data-studio-admin] .sb-bb-editor .sb-bb-panel { padding: 22px 24px 26px; }
html[data-studio-admin] .sb-bb-editor .sb-bb-help { font-size: 14px; color: var(--sb-text-secondary); }
@container bbx (max-width: 760px) {
    .sb-bb-editor { grid-template-columns: minmax(0, 1fr) !important; }
    .sb-bb-editor .sb-bb-tabs { position: static; flex-direction: row; align-self: start; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--sb-border) !important; scrollbar-width: none; }
    .sb-bb-editor .sb-tab { width: auto; min-height: 44px; flex: none; grid-template-columns: auto 8px; grid-template-areas: "t dot"; }
    .sb-bb-tab-sub { display: none; }
    html[data-studio-admin] .sb-bb-editor .sb-bb-panel { padding: 18px 16px 22px; }
}
/* the profile grid inside a section: one column when the section is narrow */
@container (max-width: 640px) { html[data-studio-admin] .sb-bb-grid { grid-template-columns: minmax(0, 1fr) !important; } }
html[data-studio-admin] .sb-bb-grid { row-gap: 18px !important; }
html[data-studio-admin] .sb-bb-grid > div > label:first-child { text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 800 !important; color: var(--sb-ink) !important; }
/* tips above the page and the second "Auto-Fill" button: the website box at the top does this */
html[data-studio-admin] body[data-pbd-group="essentials"] #pbd-tips { display: none !important; }
html[data-studio-admin] #sb-bb-panel-business #ai-btn { display: none !important; }
/* quick questions: two roomy columns */
html[data-studio-admin] #sb-bb-panel-assistant div:has(> #s1) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
@container (max-width: 640px) { html[data-studio-admin] #sb-bb-panel-assistant div:has(> #s1) { grid-template-columns: minmax(0, 1fr) !important; } }
html[data-studio-admin] #sb-bb-panel-assistant div:has(> div > #s1) { background: transparent !important; border: 0 !important; padding: 0 !important; }
/* answers: question + answer pairs (business-studio.js); the raw "Q | A" boxes stay in the form, hidden */
html[data-studio-admin] #faq-rows.bbx-faq-src { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html[data-studio-admin] div:has(> #faq-rows) { background: transparent !important; border: 0 !important; padding: 0 !important; }
html[data-studio-admin] div:has(> #faq-rows) > p { display: none; }
.bbx-faq { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.bbx-faq-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 40px; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-text-secondary); }
.bbx-faq-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 40px; gap: 10px; align-items: start; }
.bbx-faq-row textarea { min-height: 44px; resize: vertical; }
.bbx-faq-x { height: 44px; border: 0; background: none; color: var(--sb-text-muted); font-size: 20px; cursor: pointer; border-radius: 10px; }
.bbx-faq-x:hover { background: var(--sb-surface-muted); color: var(--sb-danger); }
@container (max-width: 640px) { .bbx-faq-head { display: none; } .bbx-faq-row { grid-template-columns: minmax(0, 1fr) 40px; } .bbx-faq-row > :nth-child(2) { grid-column: 1; } }
.bbx-sugg { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--sb-accent-soft); font-size: 14px; }
/* products: what the assistant does */
.bbx-goal-h { font-size: 16px; font-weight: 800; color: var(--sb-ink); margin: 0 0 10px; }
html[data-studio-admin] #sb-bb-panel-catalog .sel-card { border-radius: 14px !important; padding: 12px 14px !important; text-align: left; }
html[data-studio-admin] #sb-bb-panel-catalog .sel-card:hover:not(:has(input:checked)) { box-shadow: none !important; border-color: var(--sb-border-strong) !important; }
html[data-studio-admin] #opt-sales, html[data-studio-admin] #opt-appt, html[data-studio-admin] #opt-restaurant { background: transparent !important; border: 0 !important; padding: 0 !important; }
.bbx-listbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 6px 0 10px; }
.bbx-listbar h4 { margin: 0; font-size: 16px; font-weight: 800; color: var(--sb-ink); }
details.bbx-text { margin-top: 10px; }
details.bbx-text > summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--sb-accent-text); list-style: none; }
details.bbx-text > summary::-webkit-details-marker { display: none; }
details.bbx-text[open] > summary { margin-bottom: 8px; }
.bbx-planline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--sb-surface-muted); border: 1px solid var(--sb-border); font-size: 13.5px; color: var(--sb-text-secondary); }
.bbx-planline button { border: 0; background: none; padding: 0; font-weight: 800; color: var(--sb-accent-text); cursor: pointer; }
.bbx-shop { margin: 0 0 16px; padding: 16px; border-radius: 16px; border: 1px solid var(--sb-border); background: var(--sb-surface-muted); }
.bbx-shop > h4 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--sb-ink); }
.bbx-shop > p { margin: 0 0 10px; font-size: 13.5px; color: var(--sb-text-secondary); }
html[data-studio-admin] .card-shopcheck:not(:has(#shop-check-root)) { display: none !important; }
/* image fallback: keep the switch, fold the long "when to turn off" list */
html[data-studio-admin] #sb-bb-panel-catalog .bbx-hide { display: none !important; }
/* website box: compact once the page is filled */
.bbx-scan.is-filled { padding: 14px 18px; }
.bbx-scan.is-filled .bbx-scan-t b { font-size: 16px; }
.bbx-lang { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.12); font-size: 14px; }
.bbx-lang button { border: 0; border-radius: 10px; padding: 8px 12px; font-weight: 800; background: #fff; color: #14122E; cursor: pointer; }
.bbx-got { box-shadow: 0 0 0 3px var(--sb-success-soft) !important; border-color: var(--sb-success) !important; }
html[data-studio-admin] #sb-bb-panel-contact .sb-bb-grid > .grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@container bbx (max-width: 560px) { html[data-studio-admin] #sb-bb-panel-contact .sb-bb-grid > .grid { grid-template-columns: minmax(0, 1fr); } }
/* website scan, live (isi DES-D6) */
.bbx-run { flex-basis: 100%; display: flex; gap: 18px; align-items: center; margin-top: 6px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.bbx-orb { position: relative; width: 84px; height: 84px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.bbx-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(201,190,255,.35); }
.bbx-orb i:nth-child(2) { inset: 16px; }
.bbx-orb i.sw { border: 0; background: conic-gradient(from 0deg, rgba(18,181,203,0), rgba(18,181,203,.6) 14%, transparent 15%); animation: bbx-spin 2s linear infinite; }
.bbx-orb b { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px;
    background: radial-gradient(circle at 30% 25%, #B3A6FF, #6A50E0 55%, #0E8FA0); box-shadow: 0 0 30px rgba(124,102,240,.8); }
.bbx-orb.done b { width: 52px; height: 52px; background: linear-gradient(135deg, #1FA97A, #12B5CB); box-shadow: 0 0 30px rgba(31,169,122,.7); font-size: 22px; }
.bbx-run-t { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 8px; color: #fff; }
.bbx-run-t > b { font-size: 16px; }
.bbx-run-t ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.bbx-run-t li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.5); }
.bbx-run-t li span { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; font-size: 10px; }
.bbx-run-t li.go { color: #fff; }
.bbx-run-t li.go span { border-color: #12B5CB; border-top-color: transparent; animation: bbx-spin .8s linear infinite; }
.bbx-run-t li.ok { color: #9DF0C9; }
.bbx-run-t li.ok span::after { content: "✓"; }
.bbx-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.bbx-chips em { font-style: normal; color: rgba(255,255,255,.7); margin-right: 2px; }
.bbx-chips span { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); font-weight: 700; }
.bbx-chips span.ok { background: rgba(31,169,122,.25); color: #C6F7E2; }
.bbx-warn { padding: 10px 12px; border-radius: 12px; background: rgba(245,158,11,.18); border: 1px solid rgba(245,158,11,.45); font-size: 14px; color: #FFE7C2; }
.bbx-run-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.bbx-run-acts button { border: 0; border-radius: 10px; padding: 8px 14px; font-weight: 800; cursor: pointer; background: #fff; color: #14122E; }
.bbx-run-acts button.q { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.bbx-scan.is-running .bbx-scan-btn { opacity: .5; pointer-events: none; }
@keyframes bbx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bbx-orb i.sw, .bbx-run-t li.go span { animation: none; } }
.bbx-shopfound { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(18,181,203,.16); border: 1px solid rgba(18,181,203,.4); font-size: 14px; }
.bbx-shopfound span { flex: 1 1 260px; }
.bbx-shopfound button { border: 0; border-radius: 10px; padding: 8px 12px; font-weight: 800; cursor: pointer; background: #fff; color: #14122E; }
.bbx-shopfound button.q { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
/* scan messages (isi DES-D6.2): one place for every message; the page's older status line stays hidden */
html[data-studio-admin] #sb-bb-panel-business #autofill-status { display: none !important; }
.bbx-field-error { margin: 6px 0 0; font-size: 13.5px; font-weight: 700; color: var(--sb-danger); }
html[data-studio-admin] #web[aria-invalid="true"] { border-color: var(--sb-danger) !important; box-shadow: 0 0 0 3px var(--sb-danger-soft) !important; }
.bbx-orb.fail b { width: 52px; height: 52px; background: linear-gradient(135deg, #F59E0B, #EF4444); box-shadow: 0 0 30px rgba(239,68,68,.6); font-size: 24px; }
.bbx-note { margin: 4px 0 0; font-size: 13px; color: rgba(255,255,255,.75); }
/* the breadcrumb bar stays readable over content scrolling beneath it */
html[data-studio-admin] .sbs-header { background: color-mix(in srgb, var(--sb-canvas) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* sync switch: readable in light and dark (was green text on green) */
html[data-studio-admin] .bbx-sync { background: var(--sb-surface-muted) !important; border: 1px solid var(--sb-border) !important; border-radius: 14px !important; padding: 12px 14px !important; gap: 14px !important; align-items: flex-start !important; }
html[data-studio-admin] .bbx-sync span { color: var(--sb-ink) !important; font-size: 14.5px !important; font-weight: 800 !important; }
html[data-studio-admin] .bbx-sync #inventory-mode-hint { color: var(--sb-text-secondary) !important; font-size: 13.5px !important; line-height: 1.45; margin-top: 3px; }
html[data-studio-admin] .bbx-sync label { margin-top: 2px; }
/* example box */
.bbx-example > div { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; font-size: 14px; color: var(--sb-text-secondary); }
.bbx-example b { color: var(--sb-ink); }
.bbx-example code { display: block; padding: 12px 14px; border-radius: 12px; background: var(--sb-code-bg); color: var(--sb-code-text); font: 500 13px/1.5 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
/* add-to-cart template inside Products (the Cart Integration page is gone) */
html[data-studio-admin] .card-cart:not(:has(#cart_url_template)) { display: none !important; }
.bbx-carttpl { margin-top: 12px !important; }
.bbx-carttpl-note { margin: 0 14px 10px; font-size: 13.5px; color: var(--sb-text-secondary); }
html[data-studio-admin] .bbx-carttpl .p-3 { background: transparent !important; border: 0 !important; padding: 0 14px 14px !important; }
html[data-studio-admin] .bbx-carttpl .p-3 label { color: var(--sb-ink) !important; text-transform: none !important; font-size: 14px !important; font-weight: 800 !important; }
html[data-studio-admin] .bbx-carttpl .p-3 p { color: var(--sb-text-secondary) !important; }
html[data-studio-admin] .bbx-carttpl .p-3 code { background: var(--sb-surface-muted) !important; color: var(--sb-ink) !important; }
html[data-studio-admin] .bbx-carttpl select, html[data-studio-admin] .bbx-carttpl input { background: var(--sb-surface) !important; color: var(--sb-ink) !important; border-color: var(--sb-border-strong) !important; }
/* brand colour: custom picker + hex code beside the presets */
.bbx-cpick { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; }
.bbx-cpick-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--sb-border-strong); background: var(--sb-surface); color: var(--sb-ink); font-size: 13.5px; font-weight: 700; }
.bbx-cpick-btn::before { content: ""; width: 28px; height: 28px; border-radius: 50%; flex: none;
    background: conic-gradient(#EF4444, #F59E0B, #EAB308, #22C55E, #06B6D4, #3B82F6, #8B5CF6, #EC4899, #EF4444); }
.bbx-cpick-btn.active { border-color: transparent; box-shadow: 0 0 0 2px var(--sb-surface), 0 0 0 4px var(--bbx-c); }
.bbx-cpick-btn.active::before { background: var(--bbx-c); }
.bbx-cpick-btn input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.bbx-cpick-btn:focus-within { outline: 2px solid var(--sb-focus); outline-offset: 2px; }
html[data-studio-admin] #bbx-hex { width: 108px !important; min-height: 36px !important; height: 36px; padding: 6px 10px !important; font: 600 13.5px/1 ui-monospace, Menlo, monospace !important; text-transform: uppercase; }
html[data-studio-admin] #bbx-hex[aria-invalid="true"] { border-color: var(--sb-danger) !important; }
/* duplicate FAQ warning */
.bbx-dups { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--sb-warning-soft); border: 1px solid var(--sb-warning-border); color: var(--sb-ink); font-size: 13.5px; }
.bbx-dups span { flex: 1 1 260px; }
.bbx-dups button { border: 1px solid var(--sb-border-strong); background: var(--sb-surface); color: var(--sb-ink); border-radius: 10px; padding: 6px 12px; font-weight: 700; cursor: pointer; }
/* quick questions without an answer */
.bbx-qcheck { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--sb-warning-soft); border: 1px solid var(--sb-warning-border); font-size: 13.5px; color: var(--sb-ink); }
.bbx-qcheck > b { font-size: 14px; }
.bbx-qrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bbx-qrow span { flex: 1 1 280px; color: var(--sb-ink-soft); }
.bbx-qrow button { border: 1px solid var(--sb-border-strong); background: var(--sb-surface); color: var(--sb-ink); border-radius: 10px; padding: 6px 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
html[data-studio-admin] input.bbx-q-warn { border-color: var(--sb-warning) !important; }

/* ===== §24 Chat look › Chat opening picker (isi CHG-015 v2, 2026-10-18): real previews ===================== */
[data-studio-admin] .ops { --ops-brand: #4F46E5; display: grid; gap: 16px; margin-top: 4px; }
[data-studio-admin] .ops-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
[data-studio-admin] .ops-title { font-size: 16px; font-weight: 800; color: var(--sb-ink); }
[data-studio-admin] .ops-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--sb-text-muted); max-width: 70ch; }
[data-studio-admin] .ops-sub b { color: var(--sb-ink); }
[data-studio-admin] .ops-try { flex: none; border: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-ink); font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 10px; cursor: pointer; }
[data-studio-admin] .ops-try::before { content: "▶ "; color: var(--ops-brand); }
[data-studio-admin] .ops-try:hover { border-color: var(--ops-brand); }
[data-studio-admin] .ops-galwrap { margin: 0 -2px; }
[data-studio-admin] .ops-gal { display: block; width: 100%; height: 760px; border: 0; background: transparent; color-scheme: normal; }
[data-studio-admin] .ops-main { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px; border-radius: 18px; background: var(--sb-surface-muted); border: 1px solid var(--sb-border); }
[data-studio-admin] .ops.ops-classic .ops-opts { opacity: .45; pointer-events: none; }
[data-studio-admin] .ops-phonewrap { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 8px; }
[data-studio-admin] .ops-phonecap { font-size: 12.5px; color: var(--sb-text-muted); }
[data-studio-admin] .ops-phonecap b { color: var(--sb-ink); font-size: 14px; }
[data-studio-admin] .ops-phone { width: 340px; height: 660px; padding: 7px; border-radius: 38px; background: #030307; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .7); }
[data-studio-admin] .ops-ph { display: block; width: 100%; height: 100%; border: 0; border-radius: 31px; background: #000; }
[data-studio-admin] .ops-tip { margin: 0; font-size: 11.5px; color: var(--sb-text-muted); max-width: 340px; }
[data-studio-admin] .ops-opts { display: grid; gap: 16px; align-content: start; min-width: 0; }
[data-studio-admin] .ops.ops-nophoto [data-ops-for="photo"] { display: none; }
[data-studio-admin] .ops-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
[data-studio-admin] .ops-row label { font-size: 12.5px; font-weight: 700; color: var(--sb-ink); }
[data-studio-admin] .ops-row label span { display: block; font-size: 11.5px; font-weight: 500; color: var(--sb-text-muted); }
[data-studio-admin] .ops-row .idp-seg button.on { color: var(--sb-ink); }
[data-studio-admin] .ops-chips { display: flex; flex-wrap: wrap; gap: 6px; }
[data-studio-admin] .ops-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 6px; border-radius: 999px; background: var(--sb-surface); border: 1px solid var(--sb-border); font-size: 12px; font-weight: 600; color: var(--sb-ink); max-width: 100%; }
[data-studio-admin] .ops-chip i { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--ops-brand); }
[data-studio-admin] .ops-cn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
[data-studio-admin] .ops-chip button { border: 0; background: transparent; color: var(--sb-text-muted); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; }
[data-studio-admin] .ops-chip button:hover { background: var(--sb-surface-muted); color: var(--sb-ink); }
[data-studio-admin] .ops-auto { font-size: 12px; color: var(--sb-text-muted); }
[data-studio-admin] .ops-th { width: 26px; height: 26px; border-radius: 7px; flex: none; background: #fff center / contain no-repeat; border: 1px solid var(--sb-border); }
[data-studio-admin] .ops-th-none { background: var(--sb-surface-muted); }
[data-studio-admin] .ops-results { display: grid; gap: 4px; }
[data-studio-admin] .ops-results:empty { display: none; }
[data-studio-admin] .ops-res { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 10px; border: 1px solid transparent; background: var(--sb-surface); text-align: left; cursor: pointer; color: var(--sb-ink); }
[data-studio-admin] .ops-res:hover { border-color: var(--ops-brand); }
[data-studio-admin] .ops-res .ops-th { width: 34px; height: 34px; }
[data-studio-admin] .ops-rn { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; }
[data-studio-admin] .ops-rn small { display: block; font-size: 11px; font-weight: 500; color: var(--sb-text-muted); }
[data-studio-admin] .ops-add { font-size: 11.5px; font-weight: 800; color: var(--ops-brand); }
[data-studio-admin] .ops-none { font-size: 12px; color: var(--sb-text-muted); padding: 4px 2px; }
[data-studio-admin] .ops-how { font-size: 12px; line-height: 1.5; color: var(--sb-text-secondary); padding: 12px 14px; border-radius: 12px; background: var(--sb-surface); border: 1px solid var(--sb-border); }
[data-studio-admin] .ops-how:empty { display: none; }
[data-studio-admin] .ops-how b { color: var(--sb-ink); }
[data-studio-admin] .ops-how ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; list-style: decimal; }
[data-studio-admin] .ops-how li::marker { color: var(--ops-brand); font-weight: 800; }
[data-studio-admin] .ops-count { margin: 8px 0 0; font-weight: 600; color: var(--sb-ink); }
@container bbx (max-width: 640px) { [data-studio-admin] .ops-main { grid-template-columns: minmax(0, 1fr); } [data-studio-admin] .ops-phonewrap { position: static; align-items: center; } }
@media (max-width: 760px) { [data-studio-admin] .ops-main { grid-template-columns: minmax(0, 1fr); } [data-studio-admin] .ops-phonewrap { position: static; align-items: center; } }
/* §24 v3: free plan sees every opening, keeps Classic */
[data-studio-admin] .ops-lock { display: block; margin-top: 4px; padding: 6px 10px; border-radius: 10px; font-size: 12px; color: var(--sb-ink); background: color-mix(in srgb, var(--ops-brand) 12%, var(--sb-surface)); border: 1px solid color-mix(in srgb, var(--ops-brand) 35%, var(--sb-border)); }
[data-studio-admin] .ops-lock a { color: var(--ops-brand); font-weight: 800; text-decoration: underline; }
[data-studio-admin] .ops.ops-locked .ops-opts { opacity: .45; pointer-events: none; }

/* ===== §25 Chat look › Your logo / chat icon: upload + where it shows (isi CHG-016, 2026-10-19) ===================== */
[data-studio-admin] .lgs { --lgs-brand: #4F46E5; display: grid; gap: 12px; margin-top: 10px; }
[data-studio-admin] .lgs-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; }
[data-studio-admin] .lgs-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; border: 1.5px dashed var(--sb-border-strong); background: var(--sb-surface); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
[data-studio-admin] .lgs-drop:hover, [data-studio-admin] .lgs-drop.over, [data-studio-admin] .lgs-drop:focus-visible { border-color: var(--lgs-brand); background: color-mix(in srgb, var(--lgs-brand) 6%, var(--sb-surface)); outline: none; }
[data-studio-admin] .lgs.busy .lgs-drop { opacity: .6; pointer-events: none; }
[data-studio-admin] .lgs-pic { width: 84px; height: 84px; border-radius: 18px; background: #fff center / contain no-repeat; border: 1px solid var(--sb-border); }
[data-studio-admin] .lgs-pic.none { background: repeating-conic-gradient(var(--sb-surface-muted) 0 25%, transparent 0 50%) 50% / 16px 16px; }
[data-studio-admin] .lgs-cta b { display: block; font-size: 13px; color: var(--lgs-brand); }
[data-studio-admin] .lgs-cta small { font-size: 11px; color: var(--sb-text-muted); }
[data-studio-admin] .lgs-spec { font-size: 12px; color: var(--sb-text-secondary); }
[data-studio-admin] .lgs-spec > b { color: var(--sb-ink); font-size: 12.5px; }
[data-studio-admin] .lgs-spec ul { margin: 4px 0 0; padding-left: 18px; list-style: disc; display: grid; gap: 2px; }
[data-studio-admin] .lgs-spec li b { color: var(--sb-ink); }
[data-studio-admin] .lgs-msg { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--sb-text-secondary); }
[data-studio-admin] .lgs-msg:empty { display: none; }
[data-studio-admin] .lgs-msg.ok { color: #0F7A55; }
[data-studio-admin] .lgs-msg.bad { color: #B42318; }
[data-studio-admin] .lgs-where { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px; border-radius: 14px; background: var(--sb-surface-muted); border: 1px solid var(--sb-border); }
[data-studio-admin] .lgs-wl { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--sb-ink); }
[data-studio-admin] .lgs-ex { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--sb-surface); border: 1px solid var(--sb-border); min-width: 130px; }
[data-studio-admin] .lgs-ex small { font-size: 11px; color: var(--sb-text-muted); }
[data-studio-admin] .lgs-ex-h { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid #e3e3e8; color: #1a1a1e; font-size: 12.5px; }
[data-studio-admin] .lgs-av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: block; background: #fff center / 76% no-repeat; box-shadow: 0 0 0 1px rgba(15, 18, 34, .12); }
[data-studio-admin] .lgs-av.none, [data-studio-admin] .lgs-av.orb { background: conic-gradient(from 210deg, var(--lgs-brand), #22d3ee, #a855f7, var(--lgs-brand)); border-radius: 30%; box-shadow: none; }
[data-studio-admin] .lgs-ex-btn { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--lgs-brand); box-shadow: 0 8px 20px -10px var(--lgs-brand); }
[data-studio-admin] .lgs-btnimg { width: 44px; height: 44px; border-radius: 50%; display: block; background: #fff center / 74% no-repeat; }
[data-studio-admin] .lgs-btnimg.none { background: #fff; opacity: .35; }
[data-studio-admin] .lgs-ex-m { display: flex; align-items: flex-start; gap: 8px; }
[data-studio-admin] .lgs-bub { width: 84px; height: 26px; border-radius: 6px 14px 14px 14px; background: #f3f3f7; border: 1px solid #e3e3e8; }
[data-studio-admin] .lgs-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
[data-studio-admin] .lgs-row2 .lgs-wl { flex-basis: auto; }
[data-studio-admin] .lgs-row2 .idp-seg button.on { color: var(--sb-ink); }
[data-studio-admin] .lgs-row2 .idp-seg button:disabled { opacity: .45; cursor: not-allowed; }
[data-studio-admin] .lgs-auto { font-size: 11.5px; color: var(--sb-text-muted); }
@container bbx (max-width: 560px) { [data-studio-admin] .lgs-row { grid-template-columns: minmax(0, 1fr); } }
/* §25b Install on your Site › Chat button: upload next to the "Your logo" icon */
[data-studio-admin] .lgs-mini { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--sb-border-strong); background: var(--sb-surface); }
[data-studio-admin] .lgs-mini-pic { width: 40px; height: 40px; border-radius: 50%; display: block; background: #fff center / 76% no-repeat; box-shadow: 0 0 0 1px var(--sb-border); }
[data-studio-admin] .lgs-mini-pic.none { background: repeating-conic-gradient(var(--sb-surface-muted) 0 25%, transparent 0 50%) 50% / 10px 10px; }
[data-studio-admin] .lgs-mini-t b { display: block; font-size: 12.5px; color: var(--sb-ink); }
[data-studio-admin] .lgs-mini-t small { display: block; font-size: 11.5px; color: var(--sb-text-muted); }
[data-studio-admin] .lgs-mini-btn { padding: 7px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 800; color: #fff; background: var(--sb-accent, #4F46E5); cursor: pointer; white-space: nowrap; }
[data-studio-admin] .lgs-mini .lgs-msg { grid-column: 1 / -1; margin: 0; }
/* isi DES-D2b: the Install preview moves like the live button (continuous pulse) and shows "Your logo" filling a white button */
html[data-studio-admin] .pb-bl-btn { --pbbl: #2563EB; animation: pbbl-pulse 2s infinite; }
@keyframes pbbl-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pbbl) 70%, transparent); } 70% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
html[data-studio-admin] .pb-bl-btn.is-logo #pb-bl-ico { width: 56px; height: 56px; }
html[data-studio-admin] .pb-bl-btn.is-logo #pb-bl-ico img { width: 56px; height: 56px; object-fit: contain; padding: 7px; box-sizing: border-box; background: transparent; }
html[data-studio-admin] .pb-bl-btn.is-logo.has-label #pb-bl-ico, html[data-studio-admin] .pb-bl-btn.is-logo.has-label #pb-bl-ico img { width: 44px; height: 44px; padding: 4px; }
html[data-studio-admin] .pb-bl-btn.is-logo #pb-bl-lbl { color: #121521; }
@media (prefers-reduced-motion: reduce) { html[data-studio-admin] .pb-bl-btn { animation: none; } }

/* §26 isi CHG-017 — Chat look › Category pictures (opening-studio.js renderCats) */
[data-studio-admin] .ops-cats { margin-top: 18px; padding: 16px; border-radius: 16px; background: var(--sb-surface); border: 1px solid var(--sb-border); }
[data-studio-admin] .ops-cats-h { display: grid; gap: 4px; margin-bottom: 12px; }
[data-studio-admin] .ops-cats-h > b { font-size: 14px; color: var(--sb-ink); }
[data-studio-admin] .ops-cats-h > span { font-size: 12.5px; line-height: 1.5; color: var(--sb-text-secondary); }
[data-studio-admin] .ops-cats-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
[data-studio-admin] .ops-cat { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--sb-border); background: transparent; }
[data-studio-admin] .ops-cat.open { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--ops-brand) 45%, var(--sb-border)); }
[data-studio-admin] .ops-cat-pic { width: 44px; height: 44px; border-radius: 50%; background: #f8fafc center / contain no-repeat; border: 1px solid var(--sb-border); }
[data-studio-admin] .ops-cat-pic.none { display: flex; align-items: center; justify-content: center; }
[data-studio-admin] .ops-cat-pic.none::before { content: "🛍️"; font-size: 18px; }
[data-studio-admin] .ops-cat-n { min-width: 0; font-size: 13px; font-weight: 600; color: var(--sb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-studio-admin] .ops-cat-n small { display: block; font-size: 11.5px; font-weight: 500; color: var(--sb-text-secondary); }
[data-studio-admin] .ops-cat-btn { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-ink); cursor: pointer; }
[data-studio-admin] .ops-cat-btn:hover { border-color: var(--ops-brand); }
[data-studio-admin] .ops-cat-pick { grid-column: 1 / -1; }
[data-studio-admin] .ops-ct-row { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
[data-studio-admin] .ops-ct { display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--sb-text-secondary); font-size: 11px; }
[data-studio-admin] .ops-ct-face { width: 56px; height: 56px; border-radius: 50%; background: #f8fafc center / contain no-repeat; border: 2px solid var(--sb-border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #334155; }
[data-studio-admin] .ops-ct-icon { font-size: 20px; }
[data-studio-admin] .ops-ct.on .ops-ct-face { border-color: var(--ops-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ops-brand) 22%, transparent); }
[data-studio-admin] .ops-ct:hover .ops-ct-face, [data-studio-admin] .ops-ct:focus-visible .ops-ct-face { border-color: var(--ops-brand); }
[data-studio-admin] .ops-cat-msg { margin: 8px 0 0; font-size: 12px; color: var(--sb-text-secondary); }
[data-studio-admin] .ops-cat-msg.bad { color: #b42318; }
@media (max-width: 640px) { [data-studio-admin] .ops-cats-list { grid-template-columns: 1fr; } }
/* §26b isi CHG-019 — show / hide a category's button */
[data-studio-admin] .ops-cats-n { font-size: 12px; font-weight: 600; color: var(--sb-ink); }
[data-studio-admin] .ops-cat-acts { display: inline-flex; align-items: center; gap: 8px; }
[data-studio-admin] .ops-sw { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--sb-text-secondary); }
[data-studio-admin] .ops-sw i { position: relative; width: 34px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--sb-text-secondary) 35%, transparent); transition: background .15s; flex: none; }
[data-studio-admin] .ops-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
[data-studio-admin] .ops-sw.on i { background: var(--ops-brand); }
[data-studio-admin] .ops-sw.on i::after { transform: translateX(14px); }
[data-studio-admin] .ops-sw.on { color: var(--sb-ink); }
[data-studio-admin] .ops-sw:focus-visible i { outline: 2px solid var(--ops-brand); outline-offset: 2px; }
[data-studio-admin] .ops-cat.off .ops-cat-pic, [data-studio-admin] .ops-cat.off .ops-cat-n { opacity: .45; }
@media (max-width: 640px) { [data-studio-admin] .ops-cat { grid-template-columns: 44px 1fr; } [data-studio-admin] .ops-cat-acts { grid-column: 1 / -1; justify-content: flex-end; } }