/* ==========================================================================
   Slurpy Creator Studio — shared design system (phase 1)
   Loaded AFTER each page's inline <style>, so equal-specificity rules here win.
   Light is the default theme; html[data-theme="dark"] switches to deep navy.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root,
html[data-theme="light"] {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-soft: #eef0ff;
    --primary-soft-2: #e2e5ff;
    --success: #12b76a;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;

    --bg-dark: #f6f7fb;          /* page background + inset surfaces */
    --bg-darker: #eef0f6;        /* hover / pressed insets           */
    --card-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --text-primary: #101828;
    --text-secondary: #667085;
    --border: #eaecf2;

    --s-text-2: #344054;         /* nav + strong secondary text */
    --s-text-3: #98a2b3;         /* faint captions              */
    --s-border-strong: #dde1ea;
    --s-input-bg: #ffffff;
    --s-header-bg: rgba(255, 255, 255, 0.86);
    --s-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --s-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.04);
    --s-shadow-md: 0 4px 16px -4px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
    --s-shadow-lg: 0 20px 48px -12px rgba(16, 24, 40, 0.18), 0 4px 10px -4px rgba(16, 24, 40, 0.06);
    --s-ring: 0 0 0 4px rgba(79, 70, 229, 0.12);
    --s-radius: 16px;
    --s-radius-sm: 12px;
    --s-radius-xs: 10px;
    --s-font: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* pastel tiles (icon backgrounds) */
    --s-indigo-bg: #eef0ff;  --s-indigo: #4f46e5;
    --s-green-bg:  #e7f8f0;  --s-green:  #12b76a;
    --s-amber-bg:  #fff4e0;  --s-amber:  #f59e0b;
    --s-red-bg:    #ffecee;  --s-red:    #ef4444;
    --s-purple-bg: #f3edff;  --s-purple: #7c3aed;
    --s-pink-bg:   #ffeaf4;  --s-pink:   #e0338a;
    --s-blue-bg:   #e8f1ff;  --s-blue:   #2563eb;

    color-scheme: light;
}

html[data-theme="dark"] {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-soft: rgba(99, 102, 241, 0.16);
    --primary-soft-2: rgba(99, 102, 241, 0.26);
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    --info: #60a5fa;

    --bg-dark: #0a0f1e;
    --bg-darker: #141b31;
    --card-bg: #10172b;
    --sidebar-bg: #0d1326;
    --text-primary: #e8ebf5;
    --text-secondary: #8d96b2;
    --border: #1d2640;

    --s-text-2: #c3c9dc;
    --s-text-3: #677091;
    --s-border-strong: #28324f;
    --s-input-bg: #0c1224;
    --s-header-bg: rgba(13, 19, 38, 0.86);
    --s-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --s-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --s-shadow-md: 0 6px 20px -6px rgba(0, 0, 0, 0.5);
    --s-shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, 0.6);
    --s-ring: 0 0 0 4px rgba(99, 102, 241, 0.22);

    --s-indigo-bg: rgba(99, 102, 241, 0.16);  --s-indigo: #818cf8;
    --s-green-bg:  rgba(52, 211, 153, 0.14);  --s-green:  #34d399;
    --s-amber-bg:  rgba(251, 191, 36, 0.14);  --s-amber:  #fbbf24;
    --s-red-bg:    rgba(248, 113, 113, 0.14); --s-red:    #f87171;
    --s-purple-bg: rgba(167, 139, 250, 0.15); --s-purple: #a78bfa;
    --s-pink-bg:   rgba(244, 114, 182, 0.14); --s-pink:   #f472b6;
    --s-blue-bg:   rgba(96, 165, 250, 0.14);  --s-blue:   #60a5fa;

    color-scheme: dark;
}

/* ---------- 2. Base ------------------------------------------------------ */
body {
    font-family: var(--s-font);
    background: var(--bg-dark);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
::selection { background: var(--primary-soft-2); }
.main-wrapper { background: var(--bg-dark); }
.si { flex-shrink: 0; display: block; }

/* ---------- 3. Sidebar --------------------------------------------------- */
.sidebar {
    width: 248px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 1001;
}
.main-wrapper { margin-left: 248px; }
.sidebar-header {
    padding: 26px 24px 22px;
    align-items: flex-start;
    gap: 0;
}
.sidebar-header > a {
    width: auto;
    gap: 7px;
    align-items: center;
}
.logo-img { height: 30px; }
.logo-subtitle {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--s-text-2);
    padding-left: 3px;
}
.sidebar-menu {
    padding: 2px 14px 18px;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.menu-group { margin: 0 0 12px; display: flex; flex-direction: column; gap: 2px; }
.menu-group:empty { display: none; }
.menu-label { display: none; }
.menu-link {
    gap: 12px;
    padding: 9px 14px;
    border-radius: 12px;
    color: var(--s-text-2);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    border-left: 0;
    line-height: 1.25;
}
.menu-link .si { width: 20px; height: 20px; color: var(--text-secondary); transition: color .15s; }
.menu-link i { width: 20px; font-size: 16px; color: var(--text-secondary); }
.menu-link:hover { background: var(--bg-dark); color: var(--text-primary); }
.menu-link:hover .si { color: var(--text-primary); }
.menu-link.active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
    border-left: 0;
    padding-left: 14px;
}
.menu-link.active .si { color: var(--primary); fill: rgba(79, 70, 229, 0.14); }
.menu-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--primary-soft);
    color: var(--primary);
}
.badge-soon { background: var(--primary-soft); color: var(--primary); }

.studio-help-card {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--card-bg);
    box-shadow: var(--s-shadow-xs);
    transition: border-color .15s, box-shadow .15s;
}
.studio-help-card:hover { border-color: var(--primary-soft-2); box-shadow: var(--s-shadow-md); }
.studio-help-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
}
.studio-help-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.studio-help-text strong { font-size: 13.5px; font-weight: 700; }
.studio-help-text span { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-help-chev { color: var(--s-text-3); }

/* collapsed (desktop toggle) */
.sidebar.collapsed { width: 80px; }
.sidebar.collapsed .sidebar-header { align-items: center; padding: 24px 12px; }
.sidebar.collapsed .menu-link { justify-content: center; padding: 11px; }
.sidebar.collapsed .menu-link span,
.sidebar.collapsed .menu-badge,
.sidebar.collapsed .studio-help-card { display: none; }
.main-wrapper.sidebar-collapsed { margin-left: 80px; }

.studio-scrim { display: none; }

/* ---------- 4. Top bar --------------------------------------------------- */
.header {
    height: 72px;
    padding: 0 32px;
    background: var(--s-header-bg);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}
.header-left { gap: 16px; flex: 1; min-width: 0; }
.header-right { gap: 14px; }
.mobile-toggle {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
}
.mobile-toggle:hover { background: var(--bg-dark); border-color: var(--border); color: var(--text-primary); }
.search-form { width: min(608px, 100%); }
.search-input {
    height: 44px;
    padding: 0 16px 0 46px;
    background: var(--s-input-bg);
    border: 1px solid var(--s-border-strong);
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    box-shadow: var(--s-shadow-xs);
}
.search-input::placeholder { color: var(--s-text-3); }
.search-input:focus { background: var(--s-input-bg); border-color: var(--primary); box-shadow: var(--s-ring); }
.search-icon { left: 17px; color: var(--s-text-3); font-size: 15px; }
.search-form.nomatch { animation: studioShake .35s; }
@keyframes studioShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.header-btn {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--bg-dark);
    border: 1px solid transparent;
    color: var(--s-text-2);
    font-size: 17px;
}
.header-btn:hover { background: var(--bg-darker); color: var(--text-primary); }
.notification-badge, .notif-badge {
    top: 7px; right: 7px;
    min-width: 0; width: 9px; height: 9px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    background: var(--danger);
    border: 2px solid var(--card-bg);
    box-sizing: content-box;
}
.user-dropdown { padding-left: 16px; border-left: 1px solid var(--border); }
.user-trigger {
    gap: 12px;
    padding: 4px 6px 4px 4px;
    background: transparent;
    border: 0;
    border-radius: 14px;
}
.user-trigger:hover { background: var(--bg-dark); }
.user-avatar {
    width: 42px; height: 42px;
    background: var(--primary-soft);
    color: var(--primary);
    border: 2px solid var(--card-bg);
    box-shadow: 0 0 0 1px var(--border);
    overflow: hidden;
}
.user-info { gap: 1px; }
.user-name { font-size: 14.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.user-role { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.user-trigger > .fa-chevron-down { margin-left: 8px; font-size: 11px !important; color: var(--text-secondary); }

/* dropdown panels */
.user-dropdown-menu,
.notifications-menu {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--s-shadow-lg);
    overflow: hidden;
}
.user-dropdown-menu { width: 252px; padding: 6px; }
.dropdown-header { padding: 14px 14px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.dropdown-email { font-size: 12.5px; color: var(--text-secondary); }
.dropdown-link {
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--s-text-2);
}
.dropdown-link i { width: 18px; text-align: center; color: var(--text-secondary); }
.dropdown-link:hover { background: var(--bg-dark); color: var(--text-primary); }
.dropdown-link.logout { color: var(--danger); border-top: 0; }
.dropdown-link.logout i { color: var(--danger); }
.user-dropdown-menu > div[style*="height: 1px"] { margin: 6px 4px !important; background: var(--border) !important; }

.notifications-header { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.notifications-title { font-size: 15px; font-weight: 700; }
.mark-all-read { color: var(--primary); }
.notification-item { padding: 14px 18px; background: var(--card-bg); border-bottom: 1px solid var(--border); }
.notification-item:hover { background: var(--bg-dark); }
.notification-item.unread { background: var(--primary-soft); }
.notification-icon { width: 38px; height: 38px; border-radius: 12px; }
.notification-icon.success { background: var(--s-green-bg); color: var(--s-green); }
.notification-icon.primary { background: var(--s-indigo-bg); color: var(--s-indigo); }
.notification-icon.warning { background: var(--s-amber-bg); color: var(--s-amber); }
.notification-icon.danger  { background: var(--s-red-bg); color: var(--s-red); }
.notification-text { font-size: 13.5px; }
.notifications-footer { padding: 12px 18px; border-top: 1px solid var(--border); }
.view-all-link { color: var(--primary); font-size: 13.5px; }

/* ---------- 5. Content area + headings ----------------------------------- */
.content { padding: 28px 32px 40px; }
.page-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}
.page-header { margin-bottom: 28px; }
.page-subtitle, .page-desc { color: var(--text-secondary); }

/* ---------- 6. Cards ----------------------------------------------------- */
.card, .stat-card, .chart-card, .table-card, .meter-card, .settings-card,
.quick-action-card, .content-card, .link-item, .info-card, .section-card,
.panel, .widget, .form-card, .upload-card {
    border-color: var(--border);
    border-radius: var(--s-radius);
    box-shadow: var(--s-shadow-sm);
}
.card, .stat-card, .chart-card, .table-card, .meter-card, .quick-action-card { background: var(--card-bg); }
.stat-card:hover, .quick-action-card:hover { transform: translateY(-2px); box-shadow: var(--s-shadow-md); }
.card-header { padding: 18px 22px; border-bottom: 1px solid var(--border); }
.card-title, .chart-title, .table-title, .meter-title, .settings-card-title, .section-title {
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}
.card-body { padding: 22px; }
.table-header { border-bottom: 1px solid var(--border); }

.stat-card { padding: 22px; }
.stat-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 19px; }
.stat-icon.primary { background: var(--s-indigo-bg); color: var(--s-indigo); }
.stat-icon.success { background: var(--s-green-bg); color: var(--s-green); }
.stat-icon.warning, .stat-icon.gold { background: var(--s-amber-bg); color: var(--s-amber); }
.stat-icon.danger  { background: var(--s-red-bg); color: var(--s-red); }
.stat-icon.info    { background: var(--s-blue-bg); color: var(--s-blue); }
.stat-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.stat-value { font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); }
.stat-change.up { color: var(--success); }
.stat-change.down { color: var(--danger); }

.chart-tabs { background: var(--bg-dark); border-radius: 12px; padding: 4px; }

/* ---------- 7. Buttons --------------------------------------------------- */
.btn {
    border-radius: var(--s-radius-xs);
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.btn-primary,
.btn-save, .btn-upload, .copy-btn, .submit-btn {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn-primary:hover, .btn-save:hover, .btn-upload:hover, .copy-btn:hover, .submit-btn:hover {
    background: var(--primary-dark);
}
.btn-ghost, .btn-secondary, .btn-cancel, .btn-outline {
    background: var(--card-bg);
    color: var(--s-text-2);
    border: 1px solid var(--s-border-strong);
    box-shadow: var(--s-shadow-xs);
}
.btn-ghost:hover, .btn-secondary:hover, .btn-cancel:hover, .btn-outline:hover {
    background: var(--bg-dark);
    color: var(--text-primary);
}
.btn-danger { background: var(--s-red-bg); color: var(--danger); border: 1px solid transparent; }
.btn-danger:hover { background: var(--s-red-bg); filter: brightness(0.97); }
.copy-btn { border-radius: 8px; }
.copy-btn.copied { background: var(--success); }

.btn:focus-visible, .menu-link:focus-visible, .dropdown-link:focus-visible,
.header-btn:focus-visible, .user-trigger:focus-visible, a.studio-help-card:focus-visible {
    outline: none;
    box-shadow: var(--s-ring);
}

/* ---------- 8. Forms ----------------------------------------------------- */
.form-label { color: var(--s-text-2); font-weight: 600; }
.form-input, .form-textarea, .form-select, .filter-input, .filter-select, .form-control {
    background: var(--s-input-bg);
    border: 1px solid var(--s-border-strong);
    border-radius: var(--s-radius-xs);
    color: var(--text-primary);
    font-family: inherit;
    box-shadow: var(--s-shadow-xs);
    transition: border-color .15s, box-shadow .15s;
}
.form-input::placeholder, .form-textarea::placeholder, .filter-input::placeholder { color: var(--s-text-3); }
.form-input:focus, .form-textarea:focus, .form-select:focus, .filter-input:focus, .filter-select:focus, .form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--s-ring);
}
.main-wrapper select:focus, .main-wrapper textarea:focus,
.main-wrapper input[type="text"]:focus, .main-wrapper input[type="email"]:focus,
.main-wrapper input[type="url"]:focus, .main-wrapper input[type="number"]:focus,
.main-wrapper input[type="password"]:focus, .main-wrapper input[type="tel"]:focus,
.main-wrapper input[type="date"]:focus, .main-wrapper input[type="time"]:focus,
.main-wrapper input[type="datetime-local"]:focus {
    border-color: var(--primary);
}
.form-hint { color: var(--text-secondary); }

/* toggles */
.toggle-slider { background: var(--s-border-strong); border-color: transparent; }
.toggle-slider:before { background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.2); }
.toggle input:checked + .toggle-slider { background: var(--primary); border-color: var(--primary); }
.toggle-row { border-bottom-color: var(--border); }

/* tabs / filters */
.tabs { background: var(--bg-dark); border-color: var(--border); border-radius: 12px; }
.tab-btn { border-radius: 9px; }
.tab-btn.active { background: var(--card-bg); color: var(--primary); box-shadow: var(--s-shadow-sm); }
.filter-btn { border-color: var(--s-border-strong); background: var(--card-bg); }
.filter-btn.active { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.settings-tabs { border-bottom-color: var(--border); }
.settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- 9. Tables + badges ------------------------------------------- */
thead th {
    background: var(--bg-dark);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
}
tbody td { border-top: 1px solid var(--border); }
tbody tr:hover td { background: var(--bg-dark); }

.status-badge {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--bg-darker);
    color: var(--s-text-2);
}
.status-badge.active, .status-badge.completed, .status-badge.success, .status-badge.confirmed, .status-badge.sent, .status-badge.paid {
    background: var(--s-green-bg); color: var(--s-green);
}
.status-badge.pending, .status-badge.scheduled, .status-badge.draft, .status-badge.warning {
    background: var(--s-amber-bg); color: #b45309;
}
html[data-theme="dark"] .status-badge.pending, html[data-theme="dark"] .status-badge.scheduled,
html[data-theme="dark"] .status-badge.draft, html[data-theme="dark"] .status-badge.warning { color: var(--s-amber); }
.status-badge.refunded, .status-badge.cancelled, .status-badge.failed, .status-badge.inactive, .status-badge.danger {
    background: var(--s-red-bg); color: var(--s-red);
}

/* alerts */
.alert { border-radius: var(--s-radius-sm); }
.alert-success { background: var(--s-green-bg); border-color: transparent; color: #067647; }
.alert-error   { background: var(--s-red-bg); border-color: transparent; color: #b42318; }
.alert-info    { background: var(--s-blue-bg); border-color: transparent; color: #1d4ed8; }
html[data-theme="dark"] .alert-success { color: var(--s-green); }
html[data-theme="dark"] .alert-error   { color: var(--s-red); }
html[data-theme="dark"] .alert-info    { color: var(--s-blue); }

.empty-state { color: var(--text-secondary); }

/* ---------- 10. Modals --------------------------------------------------- */
.modal-overlay { background: rgba(16, 24, 40, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-theme="dark"] .modal-overlay { background: rgba(2, 6, 18, 0.7); }
.modal {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--s-shadow-lg);
}
.modal-header { border-bottom-color: var(--border); }
.modal-title { font-weight: 700; letter-spacing: -0.015em; }
.modal-footer { border-top-color: var(--border); }
.modal-close { border-radius: 10px; }
.modal-close:hover { background: var(--bg-dark); color: var(--text-primary); }

/* ---------- 11. Misc shared widgets -------------------------------------- */
.meter-bar-wrap { background: var(--bg-darker); }
.tip-link-box, .preset-chip { background: var(--bg-dark); border-color: var(--border); }
.quick-action-icon { border-radius: 14px; }

/* ---------- 12. Responsive (restates page rules this file overrides) ----- */
@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); width: 272px; box-shadow: none; transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s; }
    .sidebar.active { transform: translateX(0); box-shadow: var(--s-shadow-lg); }
    .sidebar.collapsed { width: 272px; }
    .sidebar.active + .studio-scrim {
        display: block;
        position: fixed; inset: 0;
        background: rgba(16, 24, 40, 0.38);
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
        z-index: 1000;
    }
    .main-wrapper, .main-wrapper.sidebar-collapsed { margin-left: 0; }
    .header { padding: 0 20px; }
    .search-form { display: none; }
}
@media (max-width: 768px) {
    .header { padding: 0 16px; height: 64px; }
    .content { padding: 20px 16px 32px; }
    .user-dropdown { padding-left: 0; border-left: 0; }
    .user-info, .user-trigger > .fa-chevron-down { display: none; }
    .user-avatar { width: 38px; height: 38px; }
    .header-btn { width: 40px; height: 40px; }
    .page-title { font-size: 22px; }
    .notifications-menu { width: calc(100vw - 32px); max-width: 380px; right: -52px; }
}

/* ==========================================================================
   13. Dashboard (dashboard.php) — phase 2
   ========================================================================== */
.sd { max-width: 1440px; margin: 0 auto; }
.sd > * + * { margin-top: 20px; }
.sd-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sd-title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-primary); }
.sd-sub { margin-top: 6px; font-size: 15px; color: var(--text-secondary); }
.sd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 48px; padding: 0 22px; border-radius: 12px;
    font: 600 15px/1 var(--s-font); text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .15s, box-shadow .15s, transform .15s, border-color .15s, color .15s;
}
.sd-btn-sm { height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: 10px; gap: 7px; }
.sd-btn-primary { background: var(--primary); color: #fff; border: 0; box-shadow: 0 8px 18px -8px rgba(79, 70, 229, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.sd-btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.sd-btn-ghost { background: var(--card-bg); color: var(--s-text-2); border: 1px solid var(--s-border-strong); box-shadow: var(--s-shadow-xs); }
.sd-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.sd-btn .si { width: 18px; height: 18px; }
.sd-btn.copied { background: var(--success); }

/* generic card */
.sd-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); min-width: 0; }
.sd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 0; flex-wrap: wrap; }
.sd-card-title { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; color: var(--text-primary); }
.sd-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 18px; margin-top: auto; }
.sd-foot-note { font-size: 12.5px; color: var(--text-secondary); }
.sd-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--primary); text-decoration: none; }
.sd-link .si { width: 16px; height: 16px; transition: transform .15s; }
.sd-link:hover .si { transform: translateX(2px); }
.sd-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px !important; }
.sd-section-title { font-size: 19px; font-weight: 800; letter-spacing: -0.015em; color: var(--text-primary); }
.sd-section-head + * { margin-top: 14px !important; }

.sd-select {
    appearance: none; -webkit-appearance: none;
    height: 38px; padding: 0 36px 0 14px; border-radius: 10px;
    border: 1px solid var(--s-border-strong);
    background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    font: 600 13.5px var(--s-font); color: var(--text-primary); cursor: pointer; box-shadow: var(--s-shadow-xs);
}
.sd-select:focus { outline: none; border-color: var(--primary); box-shadow: var(--s-ring); }

/* icon tiles */
.sd-tile { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.sd-tile .si { width: 19px; height: 19px; }
.sd-tile.lg { width: 46px; height: 46px; border-radius: 14px; }
.sd-tile.lg .si { width: 22px; height: 22px; }
.t-indigo { background: var(--s-indigo-bg); color: var(--s-indigo); }
.t-green  { background: var(--s-green-bg);  color: var(--s-green); }
.t-amber  { background: var(--s-amber-bg);  color: var(--s-amber); }
.t-red    { background: var(--s-red-bg);    color: var(--s-red); }
.t-purple { background: var(--s-purple-bg); color: var(--s-purple); }
.t-pink   { background: var(--s-pink-bg);   color: var(--s-pink); }
.t-blue   { background: var(--s-blue-bg);   color: var(--s-blue); }
.sd-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }

/* ── Your page ── */
.sd-page { display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; padding: 20px 22px; flex-wrap: wrap; position: relative; z-index: 3; }
.sd-page-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sd-page-avatar {
    width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-soft); color: var(--primary);
    box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--primary-soft-2);
}
.sd-page-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sd-page-meta { min-width: 0; }
.sd-page-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); }
.sd-page-url { display: inline-block; margin-top: 3px; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; color: var(--text-primary); text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-page-url:hover { color: var(--primary); }
.sd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sd-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
    background: var(--bg-dark); border: 1px solid var(--border);
    font-size: 12px; font-weight: 600; color: var(--s-text-2); text-decoration: none; white-space: nowrap;
}
.sd-chip i { font-size: 11px; color: var(--text-secondary); }
a.sd-chip:hover { border-color: var(--s-border-strong); color: var(--text-primary); }
.sd-chip.ok { background: var(--s-green-bg); border-color: transparent; color: #067647; }
.sd-chip.ok i { color: var(--s-green); }
.sd-chip.warn { background: var(--s-amber-bg); border-color: transparent; color: #b45309; }
.sd-chip.warn i { color: var(--s-amber); }
.sd-chip.plan { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.sd-chip.plan i { color: var(--primary); }
html[data-theme="dark"] .sd-chip.ok { color: var(--s-green); }
html[data-theme="dark"] .sd-chip.warn { color: var(--s-amber); }
.sd-page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sd-act.sd-act-guided { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.sd-act.sd-act-guided:hover { border-color: var(--primary); }
.sd-act {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 11px;
    background: var(--card-bg); border: 1px solid var(--s-border-strong); color: var(--s-text-2);
    font: 600 13.5px/1 var(--s-font); text-decoration: none; cursor: pointer; white-space: nowrap;
    box-shadow: var(--s-shadow-xs); transition: border-color .15s, color .15s, background .15s;
}
.sd-act i { font-size: 14px; }
.sd-act .si { width: 17px; height: 17px; }
.sd-act:hover { border-color: var(--primary); color: var(--primary); }
.sd-act-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.sd-act-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.sd-act.copied { background: var(--success); border-color: var(--success); color: #fff; }
.sd-qr-wrap { position: relative; }
.sd-qr {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 220px; padding: 16px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--s-shadow-lg);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.sd-qr[hidden] { display: none; }
.sd-qr-code { width: 168px; height: 168px; padding: 0; border-radius: 8px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #667085; text-align: center; }
.sd-qr-code img, .sd-qr-code canvas { display: block; }
.sd-qr-url { font-size: 12.5px; font-weight: 600; color: var(--s-text-2); }
.sd-qr-dl { width: 100%; justify-content: center; }

/* ── Setup checklist ── */
.sd-check {
    position: relative; border-radius: 20px; border: 1px solid var(--border); padding: 22px 24px; overflow: hidden;
    display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 20px 28px; align-items: center;
    background:
        radial-gradient(120% 140% at 0% 0%, #f4f2ff 0%, rgba(244, 242, 255, 0) 55%),
        radial-gradient(90% 120% at 80% 100%, #fbe9f6 0%, rgba(251, 233, 246, 0) 60%),
        linear-gradient(100deg, #f7f6ff 0%, #f3f0ff 45%, #fbeefa 80%, #fdf3f7 100%);
    box-shadow: var(--s-shadow-sm);
}
html[data-theme="dark"] .sd-check {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(99, 102, 241, 0.22) 0%, rgba(99, 102, 241, 0) 55%),
        radial-gradient(90% 120% at 80% 100%, rgba(217, 70, 239, 0.16) 0%, rgba(217, 70, 239, 0) 60%),
        linear-gradient(100deg, #121a33 0%, #161a3a 45%, #21173a 75%, #1b1530 100%);
}
.sd-check-head { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sd-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .24em; color: var(--primary); margin-bottom: 6px; }
.sd-check h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2; }
.sd-grad { background: linear-gradient(90deg, #4f46e5 0%, #6d4bf3 45%, #c026d3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="dark"] .sd-grad { background-image: linear-gradient(90deg, #818cf8 0%, #a78bfa 45%, #f0abfc 100%); }
.sd-check-progress { max-width: 260px; font-size: 13px; color: var(--text-secondary); }
.sd-check-progress b { color: var(--text-primary); }
.sd-bar { margin-top: 8px; height: 8px; border-radius: 99px; background: rgba(79, 70, 229, 0.12); overflow: hidden; }
.sd-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4f46e5, #a855f7); }
.sd-check-hide { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font: 600 12.5px var(--s-font); color: var(--text-secondary); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.sd-check-hide:hover { background: rgba(255, 255, 255, 0.6); color: var(--text-primary); }
html[data-theme="dark"] .sd-check-hide:hover { background: rgba(255, 255, 255, 0.06); }
.sd-check-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; padding-right: 36px; }
.sd-check-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; text-decoration: none;
    background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 18px -10px rgba(76, 52, 140, 0.25); transition: transform .15s, box-shadow .15s;
}
html[data-theme="dark"] .sd-check-item { background: rgba(16, 23, 43, 0.8); border-color: rgba(255, 255, 255, 0.06); }
.sd-check-item:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(76, 52, 140, 0.35); }
.sd-check-item > span:nth-child(2) { flex: 1; min-width: 0; }
.sd-check-item b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.sd-check-item small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.sd-check-dot { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 2px dashed #b4b0f5; }
.sd-check-chev { color: var(--s-text-3); }

/* ── Stat cards ── */
.sd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sd-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(60px, 120px);
    grid-template-areas: "icon label label" "icon value value" "icon change spark" "icon sub sub";
    align-items: start; column-gap: 16px;
    padding: 18px 18px 16px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm);
    text-decoration: none; color: inherit; min-width: 0;
    transition: box-shadow .15s, border-color .15s;
}
.sd-stat:hover { box-shadow: var(--s-shadow-md); border-color: var(--s-border-strong); }
.sd-stat-body { display: contents; }
.sd-stat > .sd-tile { grid-area: icon; }
.sd-stat-label { grid-area: label; font-size: 13px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-stat-value { grid-area: value; margin-top: 4px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--text-primary); white-space: nowrap; }
.sd-stat .sd-change { grid-area: change; margin-top: 6px; }
.sd-stat-sub { grid-area: sub; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-spark { grid-area: spark; align-self: end; justify-self: end; width: 100%; height: 28px; margin-top: 4px; overflow: visible; }
.sd-change { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.sd-change .si { width: 14px; height: 14px; stroke-width: 2.4; }
.sd-change.up   { color: var(--success); }
.sd-change.down { color: var(--danger); }
.sd-change.flat { color: var(--text-secondary); }
.sd-change.new  { color: var(--primary); }
.sd-stat-locked { grid-template-areas: "icon label" "icon value" "icon sub"; grid-template-columns: auto minmax(0, 1fr); background: linear-gradient(135deg, var(--card-bg) 40%, var(--s-amber-bg) 160%); }
.sd-stat-unlock { grid-area: value; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.sd-stat-unlock .si { width: 17px; height: 17px; color: var(--primary); transition: transform .15s; }
.sd-stat-locked:hover .sd-stat-unlock .si { transform: translateX(3px); }
.sd-stat-locked .sd-stat-sub { white-space: normal; }

/* ── Chart + top links ── */
.sd-row2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.sd-audience, .sd-toplinks { display: flex; flex-direction: column; }
.sd-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-secondary); }
.sd-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sd-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sd-legend b { color: var(--text-primary); font-weight: 700; }
.sd-chart { position: relative; margin: 26px 22px 0 54px; height: 210px; }
.sd-chart svg.sd-plot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sd-ylab, .sd-xlab { position: absolute; font-size: 11.5px; color: var(--s-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sd-ylab { right: calc(100% + 12px); transform: translateY(-50%); }
.sd-xlab { top: calc(100% + 10px); transform: translateX(-50%); }
.sd-xlab.first { transform: none; }
.sd-xlab.last { transform: translateX(-100%); }
.sd-chart-foot { height: 38px; }
.sd-chart-note {
    position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
    padding: 7px 12px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; box-shadow: var(--s-shadow-xs);
}
.sd-tip {
    position: absolute; top: 0; z-index: 5; pointer-events: none; padding: 7px 10px; border-radius: 10px;
    background: #101828; color: #fff; font-size: 12px; line-height: 1.4; white-space: nowrap;
    transform: translate(-50%, calc(-100% - 12px)); box-shadow: var(--s-shadow-md); opacity: 0; transition: opacity .1s;
}
html[data-theme="dark"] .sd-tip { background: #e8ebf5; color: #0a0f1e; }
.sd-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--card-bg); border: 2.5px solid var(--primary); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; }
.sd-dot-2 { border-color: #22b8cf; }
.sd-chart:hover .sd-tip, .sd-chart:hover .sd-dot { opacity: 1; }

.sd-tl { list-style: none; margin: 0; padding: 14px 22px 0; display: flex; flex-direction: column; gap: 14px; }
.sd-tl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sd-tl-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sd-tl-num { flex-shrink: 0; font-size: 13.5px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sd-tl-num small { margin-left: 4px; font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.sd-tl-bar { margin-top: 7px; height: 6px; border-radius: 99px; background: var(--bg-darker); overflow: hidden; }
.sd-tl-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4f46e5, #22b8cf); }

.sd-empty { padding: 30px 22px 26px; text-align: center; }
.sd-empty-sm { padding: 26px 22px 18px; }
.sd-empty .sd-tile { margin: 0 auto 12px; }
.sd-empty h4 { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.sd-empty p { margin: 6px auto 16px; max-width: 320px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.sd-empty p:last-child { margin-bottom: 4px; }

/* ── Insights ── */
.sd-insights { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 20px; }
.sd-ins { padding: 18px 20px 18px; }
.sd-ins-title { font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); margin-bottom: 12px; }
.sd-ins-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sd-ins-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "ico name pct" "ico bar bar"; column-gap: 10px; row-gap: 5px; align-items: center; }
.sd-ins-ico, .sd-ins-flag { grid-area: ico; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--bg-dark); color: var(--s-text-2); font-size: 13px; }
.sd-ins-flag { font-size: 16px; background: transparent; }
.sd-ins-name { grid-area: name; font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-ins-pct { grid-area: pct; font-size: 12.5px; font-weight: 700; color: var(--s-text-2); font-variant-numeric: tabular-nums; }
.sd-ins-bar { grid-area: bar; height: 4px; border-radius: 99px; background: var(--bg-darker); overflow: hidden; }
.sd-ins-bar i { display: block; height: 100%; border-radius: 99px; background: var(--primary); opacity: .75; }
.sd-dev-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--bg-darker); margin: 4px 0 16px; }
.sd-dev-bar i { display: block; height: 100%; }
.sd-dev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sd-dev-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sd-dev-list > li > i { width: 16px; text-align: center; color: var(--text-secondary); }
.sd-dev-list .sd-ins-name { flex: 1; }
.sd-dev-list b { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sd-dev-list small { min-width: 44px; text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sd-dev-sw { width: 8px; height: 8px; border-radius: 2px; }

/* ── Activity / uploads / bookings ── */
.sd-row3 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.sd-row3.single { grid-template-columns: minmax(0, 1fr); }
.sd-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sd-act-list, .sd-up-list { list-style: none; margin: 0; padding: 8px 12px 12px; }
.sd-act-list a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; text-decoration: none; }
.sd-act-list a:hover { background: var(--bg-dark); }
.sd-act-text { flex: 1; min-width: 0; font-size: 13.5px; color: var(--s-text-2); line-height: 1.35; }
.sd-act-text b { color: var(--text-primary); font-weight: 700; }
.sd-act-text small { display: block; margin-top: 2px; font-size: 12px; color: var(--s-text-3); }
.sd-act-quote { color: var(--text-secondary); }
.sd-act-muted { color: var(--s-text-3); }
.sd-act-amt { font-size: 13.5px; font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; }
.sd-up-list li { display: flex; align-items: center; gap: 12px; padding: 10px; }
.sd-up-date { width: 44px; height: 46px; flex-shrink: 0; border-radius: 11px; background: var(--primary-soft); color: var(--primary); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.sd-up-date small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sd-up-date b { font-size: 17px; font-weight: 800; }
.sd-uploads { display: flex; flex-direction: column; }
.sd-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 14px 22px 0; }
.sd-row3:not(.single) .sd-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-thumb-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--bg-darker); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; }
.sd-thumb-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.sd-thumb-tile:hover img { transform: scale(1.04); }
.sd-thumb-badge { position: absolute; right: 7px; bottom: 7px; width: 24px; height: 24px; border-radius: 50%; background: rgba(16, 24, 40, 0.65); color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; }

/* ── Shortcuts ── */
.sd-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.sd-shortcuts a {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; text-decoration: none;
    border: 1px solid transparent; transition: transform .15s, box-shadow .15s;
}
.sd-shortcuts a:hover { transform: translateY(-1px); box-shadow: var(--s-shadow-md); }
.sd-shortcuts .si { width: 20px; height: 20px; flex-shrink: 0; }
.sd-shortcuts b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.sd-shortcuts small { display: block; margin-top: 1px; font-size: 12px; color: var(--text-secondary); }
.q-indigo { background: #f4f2ff; color: #6d4bf3; }
.q-blue   { background: #eef4ff; color: #2563eb; }
.q-pink   { background: #fff0f6; color: #e0338a; }
.q-green  { background: #ecfaf3; color: #0e9f6e; }
html[data-theme="dark"] .q-indigo { background: var(--s-purple-bg); color: var(--s-purple); }
html[data-theme="dark"] .q-blue   { background: var(--s-blue-bg);   color: var(--s-blue); }
html[data-theme="dark"] .q-pink   { background: var(--s-pink-bg);   color: var(--s-pink); }
html[data-theme="dark"] .q-green  { background: var(--s-green-bg);  color: var(--s-green); }

.sd-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 3000; transform: translate(-50%, 20px);
    padding: 11px 16px; border-radius: 12px; background: #101828; color: #fff; font-size: 13.5px; font-weight: 500;
    box-shadow: var(--s-shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px);
}
.sd-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Dashboard responsive ── */
@media (max-width: 1360px) {
    .sd-stat { column-gap: 12px; padding: 16px 14px 14px; grid-template-columns: auto minmax(0, 1fr) minmax(44px, 84px); }
    .sd-stat .sd-tile.lg { width: 42px; height: 42px; border-radius: 12px; }
    .sd-stat-value { font-size: 25px; }
}
@media (max-width: 1180px) {
    .sd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-stat { grid-template-columns: auto minmax(0, 1fr) minmax(56px, 150px); }
    .sd-row2, .sd-row3 { grid-template-columns: minmax(0, 1fr); }
    .sd-row3:not(.single) .sd-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sd-page-actions { width: 100%; }
}
@media (max-width: 900px) {
    .sd-insights { grid-template-columns: minmax(0, 1fr); }
    .sd-check { grid-template-columns: minmax(0, 1fr); }
    .sd-check-items { padding-right: 0; }
    .sd-check-progress { max-width: none; }
}
@media (max-width: 768px) {
    .sd > * + * { margin-top: 16px; }
    .sd-head { flex-direction: column; align-items: stretch; gap: 14px; }
    .sd-title { font-size: 24px; }
    .sd-sub { font-size: 14px; }
    .sd-head .sd-btn { width: 100%; }
    .sd-page { padding: 16px; }
    .sd-page-avatar { width: 52px; height: 52px; }
    .sd-page-url { font-size: 17px; }
    /* phones: six icon tiles in a 3 × 2 grid (Copy, Share, QR / View, Edit, Guided setup) */
    .sd-page-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .sd-page-actions .sd-act, .sd-qr-wrap { width: 100%; justify-content: center; }
    .sd-page-actions .sd-act { flex-direction: column; gap: 5px; height: 66px; padding: 0 4px; font-size: 12.5px; line-height: 1.15; text-align: center; }
    .sd-page-actions .sd-act i, .sd-page-actions .sd-act svg { font-size: 17px; }
    .sd-qr-wrap .sd-act { width: 100%; }
    .sd-page-actions { position: relative; }
    .sd-page-actions .sd-qr-wrap { position: static; }   /* the QR card centres under the tile grid instead of hanging off the right-hand tile */
    .sd-qr { right: auto; left: 50%; transform: translateX(-50%); }
    .sd-check { padding: 18px 16px; border-radius: 18px; }
    .sd-check h2 { font-size: 20px; padding-right: 40px; }
    .sd-check-items { grid-template-columns: minmax(0, 1fr); }
    .sd-section-head { margin-top: 24px !important; }
    .sd-stats { gap: 12px; }
    .sd-stat { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon label" "icon value" "change change" "spark spark" "sub sub"; column-gap: 10px; padding: 14px; }
    .sd-stat .sd-tile.lg { width: 36px; height: 36px; border-radius: 10px; }
    .sd-stat .sd-tile.lg .si { width: 18px; height: 18px; }
    .sd-stat-label { font-size: 12.5px; }
    .sd-stat-value { font-size: 22px; }
    .sd-spark { height: 28px; margin-top: 6px; }
    .sd-stat-locked { grid-template-areas: "icon label" "value value" "sub sub"; }
    .sd-stat-unlock { font-size: 15px; }
    .sd-card-head { padding: 16px 16px 0; }
    .sd-chart { margin: 20px 16px 0 42px; height: 170px; }
    .sd-tl { padding: 12px 16px 0; }
    .sd-card-foot { padding: 12px 16px 16px; }
    .sd-ins { padding: 16px; }
    .sd-act-list, .sd-up-list { padding: 6px 6px 10px; }
    .sd-thumbs, .sd-row3:not(.single) .sd-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 16px 0; gap: 8px; }
    .sd-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .sd-shortcuts a { padding: 12px; gap: 10px; }
    .sd-shortcuts small { display: none; }
}

/* ==========================================================================
   14. Auth pages (login / forgot / reset) — body.studio-auth, light only
   ========================================================================== */
body.studio-auth {
    --primary: #4f46e5; --primary-dark: #4338ca;
    --bg-main: #f6f7fb; --bg-dark: #ffffff; --bg-darker: #ffffff;
    --text-primary: #101828; --text-secondary: #667085; --border: #e3e6ee;
    --success: #12b76a; --danger: #ef4444;
    font-family: var(--s-font);
    background:
        radial-gradient(60% 50% at 15% 0%, #efedff 0%, rgba(239, 237, 255, 0) 70%),
        radial-gradient(50% 45% at 100% 100%, #fcebf6 0%, rgba(252, 235, 246, 0) 70%),
        #f6f7fb;
    color: var(--text-primary);
}
.studio-auth .login-card, .studio-auth .card {
    background: #fff;
    border: 1px solid #eaecf2;
    border-radius: 20px;
    box-shadow: 0 24px 60px -24px rgba(16, 24, 40, 0.18), 0 2px 6px -2px rgba(16, 24, 40, 0.05);
}
.studio-auth .login-title, .studio-auth .card-title { font-weight: 800; letter-spacing: -0.03em; }
.studio-auth .logo-text { color: #344054; font-size: 12px; letter-spacing: 3px; font-weight: 700; }
.studio-auth .form-label { color: #344054; }
.studio-auth .form-input { background: #fff; border: 1px solid #dde1ea; border-radius: 12px; color: #101828; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.studio-auth .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12); }
.studio-auth .form-input::placeholder { color: #98a2b3; }
.studio-auth .input-icon { color: #98a2b3; }
.studio-auth .login-btn, .studio-auth .submit-btn {
    border-radius: 12px;
    background: var(--primary);
    box-shadow: 0 10px 20px -10px rgba(79, 70, 229, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.studio-auth .login-btn:hover, .studio-auth .submit-btn:hover { background: var(--primary-dark); }
.studio-auth .error-message, .studio-auth .message-error { background: #fff1f1; border-color: #fecaca; color: #b42318; border-radius: 12px; }
.studio-auth .message-success { background: #ecfdf3; border-color: #abefc6; color: #067647; border-radius: 12px; }
.studio-auth a { color: var(--primary); }

/* ==========================================================================
   15. Upgrade page — body.studio-upgrade (follows the saved theme)
   ========================================================================== */
html:not([data-theme="dark"]) body.studio-upgrade { background: #f6f7fb; color: #101828; font-family: var(--s-font); }
html:not([data-theme="dark"]) .studio-upgrade .back-link { color: #667085; }
html:not([data-theme="dark"]) .studio-upgrade .back-link:hover { color: #101828; }
html:not([data-theme="dark"]) .studio-upgrade .hero p,
html:not([data-theme="dark"]) .studio-upgrade .plan-desc,
html:not([data-theme="dark"]) .studio-upgrade .faq-a { color: #667085; }
html:not([data-theme="dark"]) .studio-upgrade .plan-card {
    background: #fff;
    border-color: #eaecf2;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
    color: #101828;
}
html:not([data-theme="dark"]) .studio-upgrade .plan-card.featured {
    background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 45%);
    border-color: #c7c4fb;
    box-shadow: 0 24px 50px -24px rgba(79, 70, 229, 0.35);
}
html:not([data-theme="dark"]) .studio-upgrade .feature-list li { border-color: #f0f1f5; color: #344054; }
html:not([data-theme="dark"]) .studio-upgrade .cta-btn.secondary { background: #f2f4f7; color: #344054; border-color: #e3e6ee; }
html:not([data-theme="dark"]) .studio-upgrade .compare-table,
html:not([data-theme="dark"]) .studio-upgrade .faq-item { background: #fff; border-color: #eaecf2; color: #101828; }
html:not([data-theme="dark"]) .studio-upgrade .compare-table th,
html:not([data-theme="dark"]) .studio-upgrade .compare-table td { border-color: #f0f1f5; }
html:not([data-theme="dark"]) .studio-upgrade .category-row td { background: #f6f7fb; color: #667085; }
html:not([data-theme="dark"]) .studio-upgrade .toggle-switch { background: #e4e7ec; }
html:not([data-theme="dark"]) .studio-upgrade .hero h1,
html:not([data-theme="dark"]) .studio-upgrade .plan-price,
html:not([data-theme="dark"]) .studio-upgrade .faq-q,
html:not([data-theme="dark"]) .studio-upgrade h2 { color: #101828; }
html:not([data-theme="dark"]) .studio-upgrade .compare-section h2,
html:not([data-theme="dark"]) .studio-upgrade .faq-section h2 { color: #101828; }
/* billing labels are coloured inline by JS (#e2e8f0 = selected); keep the state readable on light */
html:not([data-theme="dark"]) .studio-upgrade .billing-toggle span[style*="#e2e8f0"] { color: #101828 !important; }
html:not([data-theme="dark"]) .studio-upgrade .billing-toggle span[style*="#64748b"] { color: #98a2b3 !important; }

/* ---------- 16. Fixes for shared widgets ---------------------------------- */
/* empty-state rules on several pages enlarge every <i>, including the icon inside CTA buttons */
.empty-state .btn i, .empty-state button i, .empty-state a i {
    font-size: inherit; display: inline-block; margin: 0; opacity: 1; color: inherit; width: auto;
}

/* ==========================================================================
   17. Profile editor (profile.php)
   ========================================================================== */
.pe { max-width: 1440px; margin: 0 auto; }
.pe-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.pe-title { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }
.pe-sub { margin-top: 4px; font-size: 14.5px; color: var(--text-secondary); }
.pe-sub a { color: var(--primary); font-weight: 600; text-decoration: none; }
.pe-sub a:hover { text-decoration: underline; }
.pe-head-actions { display: flex; align-items: center; gap: 10px; }
.pe-score {
    --p: 0; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--bg-darker) 0);
    display: flex; align-items: center; justify-content: center;
}
.pe-score span { width: 36px; height: 36px; border-radius: 50%; background: var(--card-bg); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--text-primary); }
.pe-preview-btn { display: none; }

.pe-layout { display: grid; grid-template-columns: 196px minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.pe-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; }
.pe-nav a {
    display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px;
    font-size: 14px; font-weight: 600; color: var(--s-text-2); text-decoration: none; white-space: nowrap;
}
.pe-nav a i, .pe-nav a .si { width: 18px; height: 18px; font-size: 15px; text-align: center; color: var(--text-secondary); }
.pe-nav a:hover { background: var(--card-bg); color: var(--text-primary); }
.pe-nav a.active { background: var(--card-bg); color: var(--primary); box-shadow: var(--s-shadow-sm); }
.pe-nav a.active i, .pe-nav a.active .si { color: var(--primary); }

.pe-main { min-width: 0; }
html.pe-js .pe-panel { display: none; }
html.pe-js .pe-panel.active { display: block; animation: peIn .18s ease; }
@keyframes peIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pe-panel > * + * { margin-top: 18px; }
html.pe-js .pe-nojs-save { display: none; }

.pe-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); padding: 22px 24px 24px; }
.pe-card-head { margin-bottom: 18px; }
.pe-card-head h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; color: var(--text-primary); }
.pe-card-head p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.pe-card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.pe-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; }
.pe-field { margin-bottom: 14px; min-width: 0; }
.pe-field > label, .pe-social-main > label, .pe-social-count > label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--s-text-2); }
.pe-field .form-input, .pe-field .form-textarea { width: 100%; padding: 11px 13px; font-size: 14.5px; }
.pe-field .form-textarea { min-height: 140px; line-height: 1.55; resize: vertical; }
.pe-meta { display: flex; justify-content: space-between; gap: 10px; min-height: 18px; margin-top: 5px; font-size: 12px; }
.pe-count { color: var(--s-text-3); font-variant-numeric: tabular-nums; margin-left: auto; }
.pe-count.near { color: var(--warning); }
.pe-err { color: var(--danger); font-weight: 500; }
.pe-err:empty { display: none; }
.pe-hint { color: var(--text-secondary); font-size: 12px; }
.main-wrapper .invalid, .main-wrapper .invalid:focus { border-color: var(--danger) !important; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12) !important; }
.pe-url {
    display: flex; align-items: center; gap: 8px; height: 45px; padding: 0 6px 0 13px; border-radius: var(--s-radius-xs);
    background: var(--bg-dark); border: 1px dashed var(--s-border-strong); font-size: 14.5px; color: var(--s-text-2);
}
.pe-url > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-url-copy { display: inline-flex; align-items: center; gap: 6px; height: 33px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--s-border-strong); background: var(--card-bg); font: 600 12.5px var(--s-font); color: var(--s-text-2); cursor: pointer; }
.pe-url-copy:hover { color: var(--primary); border-color: var(--primary); }
.pe-url-copy.copied { background: var(--success); border-color: var(--success); color: #fff; }

/* photos */
.pe-photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pe-cover-zone { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.pe-cover-zone .pe-photo-btns { margin-top: 0; }
.pe-drop { border: 1.5px dashed var(--s-border-strong); border-radius: 14px; padding: 16px; cursor: pointer; transition: border-color .15s, background .15s; outline: none; }
.pe-drop:hover, .pe-drop:focus-visible { border-color: var(--primary); background: var(--primary-soft); }
.pe-drop.dragover { border-color: var(--primary); background: var(--primary-soft); border-style: solid; }
.pe-avatar-zone { display: flex; align-items: center; gap: 16px; }
.pe-avatar { position: relative; width: 92px; height: 92px; flex-shrink: 0; border-radius: 50%; overflow: visible; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.pe-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--primary-soft-2); }
.pe-avatar .pe-avatar-ph { font-size: 32px; }
.pe-avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--card-bg); }
.pe-photo-meta { min-width: 0; }
.pe-photo-meta b { display: block; font-size: 14px; color: var(--text-primary); }
.pe-photo-meta small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.pe-photo-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pe-photo-btns .sd-act { height: 36px; padding: 0 12px; font-size: 13px; }
.pe-cover { height: 104px; border-radius: 11px; background: linear-gradient(120deg, #eef0ff, #fbe9f6) center / cover no-repeat; display: flex; align-items: center; justify-content: center; }
html[data-theme="dark"] .pe-cover { background-color: #161d36; background-image: linear-gradient(120deg, #1a2140, #2a1b3d); }
.pe-cover[style*="url"] { background-color: transparent; }
.pe-cover-empty { font-size: 13px; font-weight: 600; color: var(--text-secondary); display: inline-flex; gap: 8px; align-items: center; }
.pe-cover-empty[hidden] { display: none; }

.pe-account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 4px 4px 0; font-size: 12.5px; color: var(--text-secondary); }
.pe-account i { margin-right: 6px; }
.pe-account a { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 600; text-decoration: none; }
.pe-account .si { width: 14px; height: 14px; }

/* socials */
.pe-socials { display: flex; flex-direction: column; gap: 8px; }
.pe-social { display: grid; grid-template-columns: 38px minmax(0, 1fr) 116px; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-dark); transition: border-color .15s, background .15s; }
.pe-social.filled { background: var(--card-bg); border-color: var(--s-border-strong); }
.pe-social[data-platform="custom"] { grid-template-columns: 38px minmax(0, 1fr); }
.pe-social-ico { width: 38px; height: 38px; margin-top: 22px; border-radius: 10px; background: var(--card-bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--text-secondary); }
.pe-social.filled .pe-social-ico { color: var(--primary); background: var(--primary-soft); border-color: transparent; }
.pe-social-main > label, .pe-social-count > label { margin-bottom: 5px; font-size: 12.5px; }
.pe-prefix-input { display: flex; align-items: center; height: 40px; border-radius: 10px; border: 1px solid var(--s-border-strong); background: var(--s-input-bg); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.pe-prefix-input:focus-within { border-color: var(--primary); box-shadow: var(--s-ring); }
.pe-prefix { padding: 0 2px 0 11px; font-size: 13px; color: var(--s-text-3); white-space: nowrap; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.pe-prefix-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 11px 0 1px; font: 500 14px var(--s-font); color: var(--text-primary); }
.pe-prefix-input input.invalid { box-shadow: none !important; }
.pe-prefix-input:has(input.invalid) { border-color: var(--danger); }
.pe-social .pe-err { display: block; margin-top: 4px; font-size: 12px; }
.pe-social-count input { width: 100%; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--s-border-strong); background: var(--s-input-bg); font: 500 14px var(--s-font); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pe-social-count input:focus { outline: none; border-color: var(--primary); box-shadow: var(--s-ring); }
.pe-social-count .pe-err { display: block; margin-top: 5px; font-size: 12px; }
.pe-social-count .pe-err:empty { display: none; }
.pe-social:not(.filled) .pe-social-count { opacity: .45; }
.pe-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--bg-dark); cursor: pointer; }
.pe-toggle-row b { display: block; font-size: 14px; color: var(--text-primary); }
.pe-toggle-row small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-secondary); }

/* links */
.pe-linklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pe-linklist li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-dark); }
.pe-link-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--s-blue-bg); color: var(--s-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pe-link-txt { min-width: 0; }
.pe-link-txt b { display: block; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-link-txt small { display: block; font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* appearance */
.pe-appear { display: flex; flex-direction: column; gap: 10px; }
.pe-appear-row { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; }
.pe-appear-txt { flex: 1; min-width: 0; }
.pe-appear-txt small { display: block; font-size: 12px; color: var(--text-secondary); }
.pe-appear-txt b { display: block; font-size: 15px; color: var(--text-primary); }

/* legacy athlete / realtor panels */
.pe-panel-legacy .pe-form { display: flex; flex-direction: column; gap: 18px; }
.pe-panel-legacy .pe-panel-intro { margin: 0; }
.pe-panel-legacy .pe-panel-intro h2 { font-size: 20px; }
.pe-panel-legacy .settings-card { margin: 0; padding: 22px 24px; background: var(--card-bg); }
.pe-panel-legacy .settings-card-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; }
.pe-panel-legacy .settings-card-title i { color: var(--primary); }
.pe-panel-legacy .btn-outline {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px;
    background: var(--card-bg); border: 1px solid var(--s-border-strong); color: var(--s-text-2); font: 600 13px var(--s-font); cursor: pointer;
}
.pe-panel-legacy .btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.pe-panel-legacy .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 14px; align-items: end; }
.pe-panel-legacy .stat-row, .pe-panel-legacy .award-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.pe-panel-legacy .stat-row .form-group, .pe-panel-legacy .award-row .form-group { margin-bottom: 0; }
.pe-panel-legacy .achievement-row, .pe-panel-legacy .experience-row { background: var(--bg-dark) !important; border: 1px solid var(--border); }

/* preview */
.pe-preview { position: sticky; top: 96px; }
.pe-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.pe-preview-bar a { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); text-decoration: none; }
.pe-preview-bar .si { width: 13px; height: 13px; }
.pe-live-dot { font-size: 7px; color: var(--success); margin-right: 4px; vertical-align: 2px; animation: pePulse 2s infinite; }
@keyframes pePulse { 50% { opacity: .35; } }
.pe-preview-close { display: none; }
.pe-phone { margin: 0 auto; width: 300px; padding: 11px; border-radius: 44px; background: #101828; box-shadow: 0 30px 60px -24px rgba(16, 24, 40, 0.45), inset 0 0 0 2px #2a3245; }
.pe-phone-screen {
    position: relative; height: 560px; overflow: hidden auto; border-radius: 34px; padding: 0 18px 22px;
    background: linear-gradient(180deg, #0f0f17 0%, #16121f 100%); color: #f5f5fa; text-align: center; scrollbar-width: none;
}
.pe-phone-screen::-webkit-scrollbar { display: none; }
.pv-cover { height: 118px; margin: 0 -18px; background: linear-gradient(135deg, #4f46e5, #c026d3) center / cover no-repeat; }
.pv-cover[style*="url"]::after { content: ''; display: block; height: 100%; background: linear-gradient(180deg, transparent 50%, #0f0f17 100%); }
.pv-avatar { width: 84px; height: 84px; margin: -44px auto 0; position: relative; border-radius: 50%; overflow: hidden; background: #2a2540; color: #b9b4ff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #0f0f17; font-size: 28px; }
.pv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pv-name { margin-top: 10px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; word-break: break-word; }
.pv-tagline { margin-top: 3px; font-size: 12.5px; color: #b8b6cc; }
.pv-tagline:empty { display: none; }
.pv-followers { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); font-size: 11.5px; color: #d6d4e6; }
.pv-followers[hidden] { display: none; }
.pv-socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pv-socials span { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.09); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.pv-bio { margin-top: 12px; font-size: 12px; line-height: 1.55; color: #c9c7d9; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pv-bio:empty { display: none; }
.pv-links { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.pv-link { display: block; padding: 11px 12px; border-radius: 12px; background: #fff; color: #101828; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-link-ghost { background: rgba(255, 255, 255, 0.08); color: #f5f5fa; font-weight: 600; }
.pv-link[hidden] { display: none; }
.pv-foot { margin-top: 18px; font-size: 10.5px; color: #77758a; }
.pe-preview-note { margin-top: 12px; text-align: center; font-size: 12px; color: var(--s-text-3); }
/* Real-page preview (profile-preview.php rendered into sandboxed iframes, scaled to the phone screen) */
.pe-phone-screen.pe-real { padding: 0; overflow: hidden; background: #0b0b0f; text-align: left; isolation: isolate; }
.pe-real iframe { position: absolute; top: 0; left: 0; width: 390px; border: 0; transform-origin: 0 0; background: transparent; }
.pe-real iframe.pe-real-next { visibility: hidden; pointer-events: none; }
.pe-real-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .2s; }
.pe-real[aria-busy="true"] .pe-real-loading { opacity: 1; }
.pe-real-loading span { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: peSpin .8s linear infinite; }
.pe-real.has-frame .pe-real-loading { inset: auto 10px 10px auto; width: 26px; height: 26px; }
.pe-real.has-frame .pe-real-loading span { width: 16px; height: 16px; border-width: 2px; }
.pe-preview-note b { color: var(--text-primary); font-weight: 700; }

/* save bar */
.pe-savebar {
    position: fixed; z-index: 990; left: calc(248px + 50%); bottom: 22px; transform: translateX(calc(-50% - 124px));
    display: flex; align-items: center; gap: 18px; padding: 10px 10px 10px 18px; border-radius: 16px;
    background: #101828; color: #fff; box-shadow: 0 18px 40px -12px rgba(16, 24, 40, 0.45); animation: peBar .2s ease;
}
html[data-theme="dark"] .pe-savebar { background: #1d2540; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.pe-savebar[hidden] { display: none; }
@keyframes peBar { from { opacity: 0; transform: translate(calc(-50% - 124px), 10px); } }
.pe-savebar-msg { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.pe-savebar-msg i { font-size: 7px; color: var(--warning); margin-right: 8px; vertical-align: 2px; }
.pe-savebar-btns { display: flex; gap: 8px; }
.pe-savebar .sd-act:not(.sd-act-primary) { background: transparent; color: #d0d5dd; border-color: rgba(255, 255, 255, 0.18); box-shadow: none; }
.pe-savebar .sd-act:not(.sd-act-primary):hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.sd-act.busy { position: relative; color: transparent !important; pointer-events: none; }
.sd-act.busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: peSpin .7s linear infinite; }
@keyframes peSpin { to { transform: rotate(360deg); } }
body.pe-dirty .content { padding-bottom: 110px; }
.sd-toast.bad { background: #b42318; }

/* crop modal */
.pe-crop { position: fixed; inset: 0; z-index: 3000; background: rgba(16, 24, 40, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pe-crop[hidden] { display: none; }
.pe-crop-box { width: min(560px, 100%); background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--s-shadow-lg); overflow: hidden; }
.pe-crop-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.pe-crop-head h3 { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.pe-crop-x { width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 16px; }
.pe-crop-x:hover { background: var(--bg-dark); color: var(--text-primary); }
.pe-crop-stage { height: min(420px, 60vh); background: #0b0f1a; }
.pe-crop-stage img { display: block; max-width: 100%; }
.pe-crop.round .cropper-view-box, .pe-crop.round .cropper-face { border-radius: 50%; }
.pe-crop .cropper-view-box { outline: 2px solid #fff; outline-color: rgba(255, 255, 255, 0.9); }
.pe-crop-tools { display: flex; align-items: center; gap: 8px; padding: 14px 18px; flex-wrap: wrap; }
.pe-crop-spacer { flex: 1; }

/* responsive */
@media (max-width: 1360px) {
    .pe-layout { grid-template-columns: minmax(0, 1fr) 312px; }
    .pe-nav { grid-column: 1 / -1; position: static; flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
    .pe-nav::-webkit-scrollbar { display: none; }
    .pe-nav a { flex-shrink: 0; border: 1px solid var(--border); background: var(--card-bg); }
    .pe-nav a.active { border-color: var(--primary); }
    .pe-phone { width: 282px; }
    .pe-phone-screen { height: 520px; }
}
@media (max-width: 1100px) {
    .pe-layout { grid-template-columns: minmax(0, 1fr); }
    .pe-preview-btn { display: inline-flex; }
    .pe-preview { display: none; }
    body.pe-preview-open .pe-preview {
        display: block; position: fixed; inset: 0; z-index: 2500; padding: 18px 16px 24px; overflow-y: auto;
        background: rgba(16, 24, 40, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    body.pe-preview-open .pe-preview-bar { max-width: 320px; margin: 0 auto 14px; color: #fff; }
    body.pe-preview-open .pe-preview-bar a { color: #c7d2fe; }
    body.pe-preview-open .pe-preview-close { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; }
    body.pe-preview-open .pe-preview-note { color: #d0d5dd; }
    body.pe-preview-open .pe-preview-note b { color: #fff; }
    .pe-savebar { left: 50%; transform: translateX(-50%); }
    @keyframes peBar { from { opacity: 0; transform: translate(-50%, 10px); } }
}
@media (max-width: 768px) {
    .pe-head { margin-bottom: 16px; }
    .pe-title { font-size: 24px; }
    .pe-head-actions { width: 100%; }
    .pe-head-actions .sd-act { flex: 1; justify-content: center; }
    .pe-card { padding: 18px 16px 20px; }
    .pe-grid2 { grid-template-columns: minmax(0, 1fr); }
    .pe-avatar { width: 76px; height: 76px; }
    .pe-cover-zone { grid-template-columns: minmax(0, 1fr); }
    .pe-avatar-zone { align-items: flex-start; }
    .pe-photo-btns .sd-act { flex: 1 1 auto; justify-content: center; }
    .pe-social { grid-template-columns: 34px minmax(0, 1fr); padding: 10px; gap: 10px; }
    .pe-social-ico { width: 34px; height: 34px; margin-top: 21px; font-size: 15px; }
    .pe-social-count { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
    .pe-social-count .pe-err { flex-basis: 100%; }
    .pe-social-count > label { margin: 0; white-space: nowrap; }
    .pe-social-count input { height: 36px; max-width: 150px; }
    .pe-social:not(.filled) .pe-social-count { display: none; }
    .pe-prefix { max-width: 48%; font-size: 12.5px; }
    .pe-account a { margin-left: 0; }
    .pe-savebar { left: 12px; right: 12px; bottom: 12px; transform: none; gap: 10px; padding: 10px 10px 10px 14px; }
    @keyframes peBar { from { opacity: 0; transform: translateY(10px); } }
    .pe-savebar-msg { font-size: 12.5px; white-space: normal; flex: 1; }
    .pe-panel-legacy .settings-card { padding: 18px 16px; }
    .pe-panel-legacy .stat-row, .pe-panel-legacy .award-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .pe-crop-tools .sd-act { height: 38px; }
}
html.pe-js .pe-social.pe-more { display: none; }
.pe-more-btn { margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px dashed var(--s-border-strong); background: transparent; font: 600 13px var(--s-font); color: var(--s-text-2); cursor: pointer; }
.pe-more-btn:hover { border-color: var(--primary); color: var(--primary); }
.pe-more-btn span { color: var(--text-secondary); font-weight: 500; }
html:not(.pe-js) .pe-more-btn { display: none; }
.pe-prefix-input.full .pe-prefix { display: none; }
.pe-prefix-input.full input { padding-left: 11px; }

/* ==========================================================================
   18. Onboarding wizard (onboarding.php)
   ========================================================================== */
body.ob-body {
    min-height: 100vh;
    background:
        radial-gradient(60% 50% at 10% 0%, #efedff 0%, rgba(239, 237, 255, 0) 70%),
        radial-gradient(50% 45% at 100% 100%, #fcebf6 0%, rgba(252, 235, 246, 0) 70%),
        var(--bg-dark);
}
html[data-theme="dark"] body.ob-body {
    background:
        radial-gradient(60% 50% at 10% 0%, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0) 70%),
        radial-gradient(50% 45% at 100% 100%, rgba(217, 70, 239, 0.12) 0%, rgba(217, 70, 239, 0) 70%),
        var(--bg-dark);
}
.ob { max-width: 1180px; margin: 0 auto; padding: 0 24px 48px; }
.ob-top { display: flex; align-items: center; gap: 20px; height: 76px; }
.ob-logo img { height: 28px; display: block; }
.ob-logo .logo-dark { display: none; }
html[data-theme="dark"] .ob-logo .logo-dark { display: block; }
html[data-theme="dark"] .ob-logo .logo-light { display: none; }
.ob-steps { list-style: none; margin: 0 auto; padding: 0; display: flex; align-items: center; gap: 6px; }
.ob-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--s-text-3); }
.ob-steps li + li::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--s-border-strong); margin-right: 2px; }
.ob-step-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--card-bg); border: 1.5px solid var(--s-border-strong); color: var(--text-secondary); }
.ob-steps li.current { color: var(--text-primary); }
.ob-steps li.current .ob-step-dot { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-soft); }
.ob-steps li.done .ob-step-dot { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.ob-steps li.done + li::before, .ob-steps li.current::before { background: var(--primary); }
.ob-later { border: 0; background: transparent; font: 600 13.5px var(--s-font); color: var(--text-secondary); cursor: pointer; padding: 8px 10px; border-radius: 10px; white-space: nowrap; }
.ob-later:hover { color: var(--text-primary); background: var(--card-bg); }
.ob-progress { display: none; height: 4px; border-radius: 4px; background: var(--s-border-strong); overflow: hidden; }
.ob-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4f46e5, #a855f7); transition: width .35s ease; }

.ob-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 48px; align-items: start; margin-top: 28px; }
.ob-main {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--s-shadow-md);
    padding: 36px 40px 28px; min-height: 520px; display: flex; flex-direction: column;
}
.ob-step { display: none; flex: 1; }
.ob-step.active { display: block; animation: obIn .28s ease; }
@keyframes obIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.ob-kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.ob-step h1 { margin-top: 8px; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; color: var(--text-primary); }
.ob-lead { margin-top: 8px; margin-bottom: 26px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); max-width: 520px; }
.ob-opt { margin-left: 6px; font-weight: 500; font-size: 12px; color: var(--s-text-3); }
.ob-form .pe-field .form-input { height: 48px; font-size: 15px; }

/* photo */
.ob-photo { display: flex; align-items: center; gap: 22px; padding: 24px; border-radius: 20px; }
.ob-avatar { width: 128px; height: 128px; font-size: 44px; }
.ob-avatar .pe-avatar-cam { width: 38px; height: 38px; font-size: 15px; }
.ob-photo-txt b { display: block; font-size: 17px; color: var(--primary); }
.ob-photo-txt small { display: block; margin-top: 6px; font-size: 13.5px; color: var(--text-secondary); }
.ob-photo-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-photo-btns .sd-act { height: 40px; padding: 0 14px; font-size: 14px; }
.ob-photo-txt .ob-photo-btns + small { margin-top: 10px; }
/* Take photo (desktop webcam sheet, built by profile-editor.js) */
.pe-cam-stage { display: flex; align-items: center; justify-content: center; }
.pe-cam-stage video { display: block; width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }

/* links */
.ob-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 18px; }
.ob-idea { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--s-border-strong); background: var(--card-bg); font: 600 13px var(--s-font); color: var(--s-text-2); cursor: pointer; }
.ob-idea i { font-size: 10px; color: var(--primary); }
.ob-idea:hover { border-color: var(--primary); color: var(--primary); }
.ob-link-row { display: grid; grid-template-columns: 28px minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px; align-items: start; }
.ob-link-row .pe-field { margin-bottom: 10px; }
.ob-link-row .pe-err { display: block; margin-top: 4px; font-size: 12px; }
.ob-link-num { width: 28px; height: 28px; margin-top: 10px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ob-social { grid-template-columns: 38px minmax(0, 1fr); }

/* templates */
.ob-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ob-tpl { position: relative; display: block; cursor: pointer; border-radius: 16px; padding: 8px; border: 2px solid transparent; background: var(--bg-dark); transition: border-color .15s, transform .15s; }
.ob-tpl:hover { transform: translateY(-2px); }
.ob-tpl input { position: absolute; opacity: 0; pointer-events: none; }
.ob-tpl.selected { border-color: var(--primary); background: var(--primary-soft); }
.ob-tpl.selected::after { content: '\f00c'; font: 900 11px 'Font Awesome 6 Free'; position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; }
.ob-tpl-thumb { display: block; aspect-ratio: 3 / 4; border-radius: 11px; overflow: hidden; background: var(--a, #111); }
.ob-tpl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-mini { display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; padding: 18% 14% 0; }
.ob-mini i { width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--b); }
.ob-mini b { width: 60%; height: 8px; border-radius: 4px; background: var(--c); opacity: .9; }
.ob-mini s { width: 40%; height: 6px; border-radius: 3px; background: var(--c); opacity: .45; margin-bottom: 6px; }
.ob-mini u { width: 100%; height: 14px; border-radius: 6px; background: var(--c); opacity: .85; }
.ob-mini u + u { opacity: .55; }
.ob-tpl-name { display: block; padding: 9px 4px 3px; font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.ob-tpl-name em { font-style: normal; font-weight: 600; font-size: 11px; color: var(--primary); margin-left: 4px; }
.ob-more-templates { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--primary); text-decoration: none; }
.ob-more-templates .si { width: 15px; height: 15px; }

/* nav */
.ob-nav { display: flex; align-items: center; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.ob-nav[hidden] { display: none; }
.ob-nav-spacer { flex: 1; }
.ob-back, .ob-skip { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; font: 600 14px var(--s-font); color: var(--text-secondary); cursor: pointer; }
.ob-back:hover, .ob-skip:hover { background: var(--bg-dark); color: var(--text-primary); }
.ob-flip { transform: rotate(180deg); width: 16px; height: 16px; }
.ob-next { min-width: 150px; }
.ob-next.busy { color: transparent; position: relative; pointer-events: none; }
.ob-next.busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: peSpin .7s linear infinite; }
.ob-next.pulse { animation: obPulse 1.4s ease 2; }
@keyframes obPulse { 50% { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0.18); } }

/* done */
.ob-done { text-align: center; position: relative; padding-top: 18px; }
.ob-done .ob-lead { margin-left: auto; margin-right: auto; }
.ob-done-badge { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; background: linear-gradient(135deg, #4f46e5, #a855f7); box-shadow: 0 14px 30px -10px rgba(79, 70, 229, 0.6); }
.ob-share { max-width: 460px; margin: 0 auto; padding: 18px; border-radius: 18px; background: var(--bg-dark); border: 1px solid var(--border); }
.ob-share-url { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); text-decoration: none; word-break: break-all; }
.ob-share-url:hover { color: var(--primary); }
.ob-share-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ob-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
.ob-qr[hidden] { display: none; }
.ob-done-next { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ob-confetti { position: absolute; left: 50%; top: 30px; width: 0; height: 0; pointer-events: none; }
.ob-confetti i { position: absolute; width: 8px; height: 14px; border-radius: 2px; opacity: 0; }
.ob-confetti i:nth-child(odd) { background: #4f46e5; } .ob-confetti i:nth-child(even) { background: #ec4899; } .ob-confetti i:nth-child(3n) { background: #f59e0b; }
.ob-confetti.go i { animation: obConf 1.1s cubic-bezier(.2, .7, .3, 1) forwards; }
.ob-confetti i:nth-child(1) { --x: -140px; --y: -40px; --r: -120deg; } .ob-confetti i:nth-child(2) { --x: 130px; --y: -60px; --r: 140deg; }
.ob-confetti i:nth-child(3) { --x: -90px; --y: -110px; --r: 60deg; }   .ob-confetti i:nth-child(4) { --x: 95px; --y: -120px; --r: -80deg; }
.ob-confetti i:nth-child(5) { --x: -180px; --y: 20px; --r: 200deg; }  .ob-confetti i:nth-child(6) { --x: 175px; --y: 10px; --r: -200deg; }
.ob-confetti i:nth-child(7) { --x: -40px; --y: -150px; --r: 90deg; }  .ob-confetti i:nth-child(8) { --x: 40px; --y: -150px; --r: -90deg; }
@keyframes obConf { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 80px)) rotate(var(--r)); } }

.ob-preview { position: sticky; top: 24px; }
body.ob-finished .ob-preview { opacity: 1; }

@media (max-width: 1100px) {
    .ob-steps .ob-step-label { display: none; }
    .ob-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; }
    .ob-preview .pe-phone { width: 270px; }
    .ob-preview .pe-phone-screen { height: 500px; }
}
@media (max-width: 860px) {
    .ob-layout { grid-template-columns: minmax(0, 1fr); }
    .ob-preview { display: none; }
}
@media (max-width: 640px) {
    .ob { padding: 0 0 calc(96px + env(safe-area-inset-bottom)); }
    .ob-top { height: 60px; padding: 0 16px; gap: 10px; }
    .ob-logo img { height: 24px; }
    .ob-steps { display: none; }
    .ob-later { margin-left: auto; }
    .ob-progress { display: block; margin: 0 16px; }
    .ob-layout { margin-top: 18px; }
    .ob-main { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; padding: 24px 18px 20px; min-height: 0; background: transparent; border: 0; }
    .ob-step h1 { font-size: 25px; }
    .ob-lead { font-size: 14.5px; margin-bottom: 20px; }
    .ob-photo { flex-direction: column; text-align: center; padding: 28px 18px; }
    .ob-photo-btns { justify-content: center; }
    .ob-photo-btns .sd-act { flex: 1 1 0; justify-content: center; }
    .ob-link-row { grid-template-columns: 24px minmax(0, 1fr); }
    .ob-link-row .pe-field:last-child { grid-column: 2; margin-top: -4px; }
    .ob-link-num { width: 24px; height: 24px; font-size: 11.5px; }
    .ob-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ob-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--card-bg); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px -12px rgba(16, 24, 40, 0.18);
    }
    .ob-next { min-width: 0; flex: 1; max-width: 220px; }
    .ob-done-next .sd-btn { width: 100%; }
}
.sd-check-guided { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--card-bg); border: 1px solid var(--s-border-strong); font-size: 13px; font-weight: 700; color: var(--primary); text-decoration: none; }
.sd-check-guided .si { width: 15px; height: 15px; }
.sd-check-guided:hover { border-color: var(--primary); }
body.ob-body { margin: 0; }
body.ob-body *, body.ob-body *::before, body.ob-body *::after { box-sizing: border-box; }
body.ob-body h1, body.ob-body h3, body.ob-body p, body.ob-body ol { margin-bottom: 0; }
body.ob-body .ob-lead { margin-bottom: 26px; }
.ob-tpl-thumb { aspect-ratio: 5 / 4; }
.ob-mini { padding: 10% 18% 0; gap: 5px; }
.ob-mini i { width: 24%; }
.ob-mini u { height: 11px; }
@media (max-width: 640px) { body.ob-body .ob-lead { margin-bottom: 20px; } }
body.ob-finished .ob-later { visibility: hidden; }

/* ==========================================================================
   19. Content manager (content.php)
   ========================================================================== */
.cm { max-width: 1440px; margin: 0 auto; }
.cm-drop {
    position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--s-radius);
    border: 1.5px dashed var(--s-border-strong); background: var(--card-bg); cursor: pointer; transition: border-color .15s, background .15s;
}
.cm-drop:hover, .cm-drop.over { border-color: var(--primary); background: var(--primary-soft); }
.cm-drop.over { border-style: solid; }
.cm-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
html:not(.cm-js) .cm-drop input[type=file] { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto; }
.cm-drop-ico { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.cm-drop-txt b { display: block; font-size: 14.5px; color: var(--text-primary); }
.cm-drop-txt b u { color: var(--primary); text-decoration: none; }
.cm-drop-txt small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-secondary); }
.cm-upload-label { cursor: pointer; }

.cm-queue { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cm-queue:empty { display: none; }
.cm-q { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--border); }
.cm-q-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-dark); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cm-q-main { flex: 1; min-width: 0; }
.cm-q-main b { display: block; font-size: 13.5px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-q-main small { display: block; margin-top: 4px; font-size: 12px; color: var(--text-secondary); }
.cm-q-bar { display: block; margin-top: 6px; height: 5px; border-radius: 9px; background: var(--bg-darker); overflow: hidden; }
.cm-q-bar i { display: block; width: 0; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #4f46e5, #a855f7); transition: width .2s; }
.cm-q.ok .cm-q-bar i { background: var(--success); }
.cm-q.ok .cm-q-ico { color: var(--success); background: var(--s-green-bg); }
.cm-q.err { border-color: rgba(239, 68, 68, 0.35); }
.cm-q.err small { color: var(--danger); font-weight: 600; }
.cm-q.err .cm-q-bar { display: none; }
.cm-q-x { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.cm-q-x:hover { background: var(--bg-dark); }

.cm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.cm-toolbar[hidden] { display: none; }
.cm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-chip { height: 36px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--border); background: var(--card-bg); font: 600 13px var(--s-font); color: var(--s-text-2); cursor: pointer; }
.cm-chip span { margin-left: 4px; color: var(--s-text-3); font-weight: 600; }
.cm-chip:hover { border-color: var(--s-border-strong); }
.cm-chip.active { background: var(--text-primary); border-color: var(--text-primary); color: var(--card-bg); }
.cm-chip.active span { color: inherit; opacity: .7; }
.cm-chip[hidden] { display: none; }
.cm-search { position: relative; width: 240px; }
.cm-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--s-text-3); }
.cm-search input { width: 100%; height: 38px; padding: 0 12px 0 34px; border-radius: 10px; border: 1px solid var(--s-border-strong); background: var(--s-input-bg); font: 500 13.5px var(--s-font); color: var(--text-primary); }
.cm-search input:focus { outline: none; border-color: var(--primary); box-shadow: var(--s-ring); }
.cm-hint { margin: 12px 0 0; font-size: 12.5px; color: var(--s-text-3); }
.cm-hint i { margin-right: 6px; }
.cm-hint[hidden] { display: none; }

.cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 14px; }
.cm-card { position: relative; display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); overflow: hidden; transition: box-shadow .15s, transform .15s, opacity .2s; }
.cm-card[hidden] { display: none; }
.cm-card:hover { box-shadow: var(--s-shadow-md); }
.cm-card.featured { border-color: rgba(245, 158, 11, 0.45); }
.cm-card.busy { opacity: .55; pointer-events: none; }
.cm-card.dragging { opacity: .4; transform: scale(.97); }
.cm-card.cm-new { animation: cmNew .9s ease; }
.cm-card.cm-gone { opacity: 0; transform: scale(.95); }
@keyframes cmNew { from { box-shadow: 0 0 0 3px var(--primary); } }
.cm-sortable .cm-card { cursor: grab; }
.cm-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--bg-darker); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cm-thumb img, .cm-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cm-thumb-ico { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.cm-thumb-ico .si { width: 28px; height: 28px; }
.cm-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(16, 24, 40, 0.6); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; padding-left: 2px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cm-badge { position: absolute; top: 10px; padding: 4px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(16, 24, 40, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cm-yt { left: 10px; } .cm-yt i { color: #ff3b30; }
.cm-star { right: 10px; background: #f59e0b; display: none; }
.cm-card.featured .cm-star { display: inline-block; }
.cm-body { padding: 12px 14px 4px; flex: 1; }
.cm-title { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.cm-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.cm-meta .sd-pill { padding: 2px 8px; font-size: 11px; }
.cm-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 8px; }
.cm-actions form { margin: 0; display: contents; }
.cm-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border: 0; border-radius: 9px; background: transparent; font: 600 11px var(--s-font); color: var(--text-secondary); cursor: pointer; text-decoration: none; }
.cm-btn i { font-size: 14px; }
.cm-btn:hover { background: var(--bg-dark); color: var(--text-primary); }
.cm-feature[aria-pressed="true"] { color: #d97706; }
.cm-del:hover { color: var(--danger); background: var(--s-red-bg); }
.cm-empty { background: var(--card-bg); border: 1px dashed var(--s-border-strong); border-radius: var(--s-radius); margin-top: 18px; }
.cm-empty[hidden] { display: none; }

.cm-modal-body { padding: 18px 18px 4px; }
.cm-edit-preview, .cm-yt-preview { position: relative; height: 150px; border-radius: 12px; overflow: hidden; background: var(--bg-darker); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.cm-edit-preview img, .cm-edit-preview video, .cm-yt-preview img { width: 100%; height: 100%; object-fit: cover; }
.cm-edit-preview .cm-badge { display: none; }
.cm-yt-preview[hidden] { display: none; }
.cm-modal .pe-field .form-input, .cm-modal .pe-field .form-textarea { width: 100%; padding: 11px 13px; }

@media (max-width: 768px) {
    .cm-drop { padding: 16px; }
    .cm-drop-ico { width: 42px; height: 42px; }
    .cm-search { width: 100%; }
    .cm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cm-body { padding: 10px 10px 2px; }
    .cm-title { font-size: 13px; }
    .cm-meta span:last-child { display: none; }
    .cm-actions { padding: 4px; }
    .cm-btn span { display: none; }
    .cm-btn { padding: 9px 2px; }
    .cm-hint { display: none; }
}

/* ==========================================================================
   20. Music (music.php)
   ========================================================================== */
.mu { max-width: 1100px; }
.mu-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--border); margin-bottom: 16px; }
.mu-tab { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; font: 600 13.5px var(--s-font); color: var(--s-text-2); cursor: pointer; }
.mu-tab span { padding: 1px 7px; border-radius: 99px; background: var(--bg-darker); font-size: 11.5px; color: var(--text-secondary); }
.mu-tab.active { background: var(--primary-soft); color: var(--primary); }
.mu-tab.active span { background: var(--card-bg); color: var(--primary); }
.mu-panel { display: none; }
.mu-panel.active { display: block; }

.mu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mu-row { display: grid; grid-template-columns: 18px 52px minmax(0, 1fr) 56px auto auto 36px 36px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--s-shadow-xs); transition: box-shadow .15s, opacity .15s; }
.mu-row:hover { box-shadow: var(--s-shadow-md); }
.mu-row.off .mu-info, .mu-row.off .mu-art { opacity: .45; }
.mu-row.busy, .mu-album.busy { opacity: .5; pointer-events: none; }
.mu-row.dragging, .mu-album.dragging, .mu-at.dragging { opacity: .35; }
.mu-row.mu-new { animation: cmNew .9s ease; }
.mu-row form, .mu-album form { margin: 0; display: contents; }
.mu-grip { color: var(--s-text-3); cursor: grab; font-size: 13px; text-align: center; }
.mu-art { position: relative; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--bg-darker); cursor: pointer; }
.mu-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-art-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--s-amber); background: var(--s-amber-bg); font-size: 18px; }
.mu-art-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(16, 24, 40, 0.45); font-size: 14px; opacity: 0; transition: opacity .15s; }
.mu-art:hover .mu-art-play, .mu-art.playing .mu-art-play, .mu-art:focus-visible .mu-art-play { opacity: 1; }
.mu-info { min-width: 0; }
.mu-info b { display: block; font-size: 14.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-info small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-dur { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: right; }
.mu-price { padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--s-green-bg); color: var(--s-green); }
.mu-price.paid { background: var(--primary-soft); color: var(--primary); }
.mu-price.both { background: var(--s-amber-bg); color: #b45309; }
html[data-theme="dark"] .mu-price.both { color: var(--s-amber); }
.mu-switch { position: relative; width: 40px; height: 23px; padding: 0; border: 0; border-radius: 99px; background: var(--s-border-strong); cursor: pointer; transition: background .15s; }
.mu-switch span { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25); transition: transform .15s; }
.mu-switch[aria-checked="true"] { background: var(--primary); }
.mu-switch[aria-checked="true"] span { transform: translateX(17px); }
.mu-icon { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 14px; }
.mu-icon:hover { background: var(--bg-dark); color: var(--text-primary); }
.mu-icon.mu-del:hover { background: var(--s-red-bg); color: var(--danger); }

.mu-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.mu-album { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); overflow: hidden; cursor: grab; }
.mu-album.off .mu-cover, .mu-album.off .mu-album-body { opacity: .5; }
.mu-cover { position: relative; aspect-ratio: 1; background: var(--bg-darker); }
.mu-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-cover .mu-art-ph { font-size: 40px; color: var(--s-purple); background: var(--s-purple-bg); }
.mu-cover .mu-price { position: absolute; top: 10px; right: 10px; box-shadow: var(--s-shadow-sm); }
.mu-album-body { padding: 12px 14px 4px; }
.mu-album-body b { display: block; font-size: 15px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-album-body small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-secondary); }
.mu-album-actions { display: flex; align-items: center; gap: 4px; padding: 10px 10px 12px 14px; }
.mu-album-actions .mu-tracks-btn { height: 34px; padding: 0 12px; font-size: 12.5px; margin-right: auto; }

/* modals */
.mu-form .cm-modal-body { max-height: min(70vh, 640px); overflow-y: auto; }
.mu-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; border: 1.5px dashed var(--s-border-strong); cursor: pointer; transition: border-color .15s, background .15s; }
.mu-drop:hover, .mu-drop.over { border-color: var(--primary); background: var(--primary-soft); }
.mu-drop.has { border-style: solid; border-color: var(--primary); }
.mu-drop input, .mu-art-pick input, .mu-cover-pick input, .mu-at-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mu-drop-ico { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--s-amber-bg); color: var(--s-amber); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.mu-drop-txt b { display: block; font-size: 14px; color: var(--text-primary); word-break: break-all; }
.mu-drop-txt small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.mu-or { margin-top: 10px; }
.mu-or label { font-weight: 500; color: var(--text-secondary); }
.mu-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.mu-art-row { align-items: start; }
.mu-art-pick, .mu-cover-pick { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 6px 0; }
.mu-art-pick b { display: block; font-size: 13px; color: var(--s-text-2); }
.mu-art-pick small { display: block; font-size: 12px; color: var(--text-secondary); }
.mu-art-prev { position: relative; width: 64px; height: 64px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: var(--bg-darker); border: 1px dashed var(--s-border-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-secondary); font-size: 18px; }
.mu-art-prev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mu-art-prev small { font-size: 11px; }
.mu-art-pick:hover .mu-art-prev, .mu-cover-pick:hover .mu-art-prev { border-color: var(--primary); }
.mu-album-top { display: flex; gap: 16px; align-items: flex-start; }
.mu-cover-prev { width: 128px; height: 128px; }
.mu-album-fields { flex: 1; min-width: 0; }
.mu-pricing { margin-top: 6px; padding: 14px; border-radius: 14px; background: var(--bg-dark); }
.mu-pricing-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13.5px; color: var(--text-primary); }
.mu-lock { font-size: 12px; font-weight: 600; color: var(--primary); text-decoration: none; }
.mu-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mu-seg label { position: relative; cursor: pointer; }
.mu-seg input { position: absolute; opacity: 0; pointer-events: none; }
.mu-seg span { display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--s-border-strong); background: var(--card-bg); font-size: 13px; font-weight: 600; color: var(--s-text-2); text-align: center; }
.mu-seg input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.mu-seg input:focus-visible + span { box-shadow: var(--s-ring); }
.mu-seg label.disabled { opacity: .45; cursor: not-allowed; }
.mu-price-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: end; margin-top: 12px; }
.mu-price-row[hidden] { display: none; }
.mu-money { position: relative; }
.mu-money span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-weight: 600; }
.mu-money input { padding-left: 26px !important; }
.mu-check { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13px; color: var(--s-text-2); cursor: pointer; }
.mu-at-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mu-at { display: grid; grid-template-columns: 16px 20px 32px minmax(0, 1fr) 48px 36px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg-dark); }
.mu-at-n { font-size: 12px; font-weight: 700; color: var(--s-text-3); text-align: center; }
.mu-at-play { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--primary-soft); color: var(--primary); cursor: pointer; font-size: 11px; }
.mu-at-play.playing { background: var(--primary); color: #fff; }
.mu-at-t { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-at-empty { padding: 14px; text-align: center; font-size: 13px; color: var(--text-secondary); background: var(--bg-dark); border-radius: 12px; }
.mu-at-add { padding: 12px; border-radius: 14px; border: 1px dashed var(--s-border-strong); }
.mu-at-add-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 72px auto; gap: 8px; }
.mu-at-add .form-input { height: 38px; padding: 0 11px; }
.mu-at-file { position: relative; height: 38px; cursor: pointer; }
.mu-at-url { width: 100%; margin-top: 8px; }
.mu-at-errs .pe-err { display: block; margin-top: 4px; font-size: 12px; }

@media (max-width: 768px) {
    .mu-tabs { display: flex; }
    .mu-tab { flex: 1; justify-content: center; }
    .mu-row { grid-template-columns: 46px minmax(0, 1fr) auto 32px 32px; gap: 10px; padding: 8px 10px; }
    .mu-grip, .mu-dur { display: none; }
    .mu-art { width: 46px; height: 46px; }
    .mu-row .mu-price { grid-column: 2; grid-row: 2; justify-self: start; margin-top: -6px; }
    .mu-row .mu-vis { grid-column: 3; grid-row: 1 / span 2; }
    .mu-icon { width: 32px; height: 32px; }
    .mu-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mu-grid2, .mu-price-row { grid-template-columns: minmax(0, 1fr); }
    .mu-seg span { font-size: 12px; height: 44px; }
    .mu-cover-prev { width: 96px; height: 96px; }
    .mu-at-add-row { grid-template-columns: auto minmax(0, 1fr); }
    .mu-at-dur { grid-column: 1; }
}

/* ==========================================================================
   21. My Links (links.php)
   ========================================================================== */
.lk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; align-items: start; }
.lk-add { display: flex; align-items: flex-end; gap: 12px; padding: 18px; border-radius: var(--s-radius); background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--s-shadow-sm); }
.lk-add-fields { flex: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; min-width: 0; }
.lk-add .pe-field { margin: 0; }
.lk-add .form-input { width: 100%; height: 46px; padding: 0 13px; }
.lk-add .pe-err { display: block; margin-top: 4px; font-size: 12px; }
.lk-add-btn { height: 46px; }
.lk-add-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.lk-limit { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--primary-soft); font-size: 13px; color: var(--s-text-2); }
.lk-limit[hidden] { display: none; }
.lk-limit i { color: var(--primary); }
.lk-limit a { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--primary); text-decoration: none; white-space: nowrap; }
.lk-limit .si { width: 14px; height: 14px; }
.lk-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lk-row { display: grid; grid-template-columns: 18px 42px minmax(0, 1fr) auto 36px 44px 36px 36px; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--s-shadow-xs); }
.lk-row form { margin: 0; display: contents; }
.lk-row.featured { border-color: rgba(245, 158, 11, 0.45); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08); }
.lk-row.off .lk-txt, .lk-row.off .lk-ico { opacity: .45; }
.lk-row.busy { opacity: .5; pointer-events: none; }
.lk-row.dragging { opacity: .35; }
.lk-row.mu-new { animation: cmNew .9s ease; }
.lk-ico { width: 42px; height: 42px; border-radius: 11px; overflow: hidden; background: var(--s-blue-bg); color: var(--s-blue); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.lk-ico img { width: 100%; height: 100%; object-fit: cover; }
.lk-txt { min-width: 0; }
.lk-txt b { display: block; font-size: 14.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-txt small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-clicks { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.lk-clicks b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lk-star[aria-pressed="true"] { color: #d97706; }
.lk-icons { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.lk-icons label { cursor: pointer; }
.lk-icons input { position: absolute; opacity: 0; pointer-events: none; }
.lk-icons span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); color: var(--s-text-2); font-size: 14px; }
.lk-icons input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.lk-icons input:focus-visible + span { box-shadow: var(--s-ring); }
.lk-thumb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.lk-feat { margin: 14px 0 6px; }
.lk-modal .form-input { width: 100%; }
#lkEdit .pe-field .form-input { width: 100%; padding: 11px 13px; }
.pv-link .fas { margin-right: 6px; opacity: .7; }
.pv-link.pv-feat { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #3b2300; }
.pv-empty { padding: 14px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, 0.2); font-size: 12px; color: #9a98ad; }
@media (max-width: 1100px) { .lk-layout { grid-template-columns: minmax(0, 1fr); } .lk-preview { display: none; } }
@media (max-width: 768px) {
    .lk-add { flex-direction: column; align-items: stretch; padding: 14px; }
    .lk-add-fields { grid-template-columns: minmax(0, 1fr); }
    .lk-row { grid-template-columns: 38px minmax(0, 1fr) 32px 44px 32px; gap: 8px; padding: 8px 10px; }
    .lk-row .mu-grip, .lk-row .lk-clicks, .lk-row [data-action="delete"] .mu-del { display: none; }
    .lk-ico { width: 38px; height: 38px; }
    .lk-icons { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lk-limit { flex-wrap: wrap; }
    .lk-limit a { margin-left: 0; }
}
.lk-del-modal { color: var(--danger) !important; }
.lk-del-modal:hover { border-color: var(--danger) !important; background: var(--s-red-bg) !important; }

/* ==========================================================================
   22. Profile types: type fields, type picker, change-type modal
   ========================================================================== */
.tf-group-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.tf-group-head:not(:first-child) { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.tf-group-head i { width: 30px; height: 30px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.tf-group-head h3 { font-size: 15px; font-weight: 800; color: var(--text-primary); margin: 0; }
.tf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.tf-field.tf-wide { grid-column: 1 / -1; }
.tf-field .form-input, .tf-field .form-textarea { width: 100%; padding: 11px 13px; font-size: 14.5px; }
.tf-field select.form-input { height: 45px; }
.tf-field > .pe-err { display: block; margin-top: 4px; font-size: 12px; }
.tf-toggle { margin-top: 0; }
.tf-rep { display: flex; flex-direction: column; gap: 8px; }
.tf-rep-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) 36px; gap: 8px; align-items: center; padding: 8px; border-radius: 12px; background: var(--bg-dark); }
.tf-rep-row .form-input { height: 40px; padding: 0 11px; font-size: 13.5px; }
.tf-rep-row .tf-rep-wide { grid-column: 1 / -1; min-height: 78px; padding: 9px 11px; font-size: 13.5px; resize: vertical; }   /* multi-line sub-field (e.g. résumé bullet points) */
.tf-rep-row:has(.tf-rep-wide) .tf-rep-del { grid-column: -2; grid-row: 1; }
.tf-rep-add { margin-top: 8px; height: 36px; font-size: 13px; }

.tp-search { position: relative; }
.tp-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--s-text-3); font-size: 14px; }
.tp-search input { width: 100%; height: 48px; padding: 0 14px 0 40px; border-radius: 12px; border: 1px solid var(--s-border-strong); background: var(--s-input-bg); font: 500 15px var(--s-font); color: var(--text-primary); box-sizing: border-box; }
.tp-search input:focus { outline: none; border-color: var(--primary); box-shadow: var(--s-ring); }
.tp-list { margin-top: 12px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.tp-group + .tp-group { margin-top: 12px; }
.tp-group-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-text-3); margin: 0 2px 6px; }
.tp-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.tp-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--card-bg); font: 600 13.5px var(--s-font); color: var(--text-primary); cursor: pointer; text-align: left; }
.tp-opt:hover { border-color: var(--s-border-strong); background: var(--bg-dark); }
.tp-opt.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.tp-opt .fa-check { margin-left: auto; }
.tp-emoji { font-size: 18px; width: 24px; text-align: center; }
.tp-label small { display: block; font-weight: 500; font-size: 11.5px; color: var(--text-secondary); }
.tp-none { margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
.tp-none[hidden] { display: none; }

.pe-type-chip { display: inline-flex; align-items: center; gap: 6px; }
.pe-type-change { border: 0; background: transparent; padding: 2px 6px; border-radius: 6px; font: 700 12.5px var(--s-font); color: var(--primary); cursor: pointer; }
.pe-type-change:hover { background: var(--primary-soft); }
.pe-type-box { width: min(720px, 100%); }
/* the type picker can be taller than a phone screen: the list scrolls, the Cancel / Switch type buttons stay visible */
.pe-type-box { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.pe-type-box .cm-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pe-type-box .pe-crop-tools { flex: none; border-top: 1px solid var(--border); }
.pe-type-box .tp-list { max-height: none; overflow: visible; }
.pe-type-diff { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--primary-soft); font-size: 13.5px; color: var(--s-text-2); }
.pe-type-diff[hidden] { display: none; }
.pe-type-diff ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pe-type-diff i { width: 18px; color: var(--primary); }
.pe-crop-hint { font-size: 12.5px; color: var(--text-secondary); }
@media (max-width: 768px) {
    .tf-grid { grid-template-columns: minmax(0, 1fr); }
    .tf-rep-row { grid-template-columns: minmax(0, 1fr) 36px; }
    .tf-rep-row .form-input { grid-column: 1; }
    .tf-rep-row .tf-rep-del { grid-column: 2; grid-row: 1; }
    .tp-opts { grid-template-columns: minmax(0, 1fr); }
    .tp-list { max-height: 50vh; }
    .pe-crop-hint { display: none; }
}
.ob-type-current { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--primary); background: var(--primary-soft); margin-bottom: 14px; }
.ob-type-current .tp-emoji { font-size: 26px; }
.ob-type-current b { font-size: 16px; color: var(--text-primary); }
.ob-type-current .pe-type-change { margin-left: auto; font-size: 13.5px; }
#obTypePicker[hidden] { display: none; }
.ob-tpl.locked { opacity: .7; cursor: not-allowed; }
.ob-tpl.locked:hover { transform: none; }
.ob-tpl-lock, .ob-tpl-rec { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.ob-tpl-lock { background: rgba(16, 24, 40, 0.75); color: #fff; }
.ob-tpl-rec { background: var(--primary); color: #fff; }
.ob-tpl-name small { font-weight: 600; font-size: 11px; color: var(--text-secondary); margin-left: 4px; }
.ob-tpl-thumb img { object-position: top; }
body.ob-body .tf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 640px) { body.ob-body .tf-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   23. Analytics (analytics.php)
   ========================================================================== */
.an { max-width: 1440px; margin: 0 auto; }
.an > * + * { margin-top: 20px; }
.an-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.an-kpi { display: flex; gap: 12px; padding: 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); min-width: 0; }
.an-kpi-body { min-width: 0; flex: 1; }
.an-kpi-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.an-kpi-value { margin-top: 2px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-kpi-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; }
.an-kpi-foot .sd-change { font-size: 12px; }
.an-kpi-hint { font-size: 11.5px; color: var(--s-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-series { display: flex; gap: 6px; flex-wrap: wrap; }
.an-ser { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--border); background: var(--card-bg); font: 600 12.5px var(--s-font); color: var(--text-secondary); cursor: pointer; }
.an-ser i { width: 10px; height: 10px; border-radius: 3px; }
.an-ser b { color: var(--text-primary); }
.an-ser:not(.on) { opacity: .45; }
.an-ser:not(.on) i { background: var(--s-border-strong) !important; }
.an-chart { height: 240px; }
.an-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.an-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.an-grid2 > .sd-card, .an-grid3 > .sd-card { padding-bottom: 18px; }
.an-pad { padding: 14px 22px 0 !important; }
.an-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg-dark); }
.an-tabs button { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font: 600 12px var(--s-font); color: var(--text-secondary); cursor: pointer; }
.an-tabs button.on { background: var(--card-bg); color: var(--text-primary); box-shadow: var(--s-shadow-xs); }
.an-loc[hidden] { display: none; }
.an-none { font-size: 13px; color: var(--text-secondary); list-style: none; }
.an-mini2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.an-mini2 h4 { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .05em; }
.an-mini2 p { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 5px; font-size: 13px; color: var(--s-text-2); }
.an-mini2 b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.an-heat { display: grid; grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.an-heat i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--primary); }
.an-hd { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); }
.an-hh { font-size: 10px; color: var(--s-text-3); }
.an-heat-note { margin: 12px 0 0; font-size: 13px; color: var(--text-secondary); }
.an-heat-note b { color: var(--text-primary); }
.an-content { list-style: none; margin: 0; padding: 12px 22px 0; display: flex; flex-direction: column; gap: 8px; }
.an-content li { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.an-rank { font-size: 13px; font-weight: 800; color: var(--s-text-3); text-align: center; }
.an-thumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--bg-darker); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.an-thumb img { width: 100%; height: 100%; object-fit: cover; }
.an-ct b { display: block; font-size: 13.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ct small { font-size: 12px; color: var(--text-secondary); }
.an-cn { font-size: 13px; color: var(--text-secondary); }
.an-cn b { color: var(--text-primary); }
.an-foot-note { padding: 10px 22px 16px; margin: 0; font-size: 12px; color: var(--s-text-3); }
@media (max-width: 1180px) { .an-grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 900px) { .an-grid2, .an-grid3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
    .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .an-kpi { flex-direction: column; gap: 8px; padding: 12px; }
    .an-kpi-value { font-size: 20px; }
    .an-kpi-hint { display: none; }
    .an-chart { height: 190px; margin: 18px 16px 0 42px !important; }
    .an-pad { padding: 12px 16px 0 !important; }
    .an .pe-head-actions .sd-select { flex: 1; }
}
@media (max-width: 768px) { .an-chart .sd-xlab:not(.first):not(.last), .sd-audience .sd-xlab:not(.first):not(.last) { display: none; } }

/* ==========================================================================
   24. Bookings (bookings.php)
   ========================================================================== */
.bk { max-width: 1200px; }
.bk > * + * { margin-top: 18px; }
.bk .pe-head + .alert { margin-top: 0; }
.bk-js .bk-panel[hidden] { display: none; }
.bk:not(.bk-js) .bk-js-only, .bk:not(.bk-js) .bk-tabs { display: none; }
.bk:not(.bk-js) .bk-panel + .bk-panel { margin-top: 18px; }
.bk-tabs { margin-bottom: 0; }

.bk-setup { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--s-radius); background: var(--s-amber-bg); border: 1px solid transparent; }
.bk-setup > div { flex: 1; min-width: 0; }
.bk-setup b { display: block; font-size: 14px; color: var(--text-primary); }
.bk-setup p { margin: 2px 0 0; font-size: 13px; color: var(--s-text-2); line-height: 1.5; }
.bk-setup .sd-tile { background: var(--card-bg); }

.bk-card { padding: 0; overflow: hidden; }
.bk-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 14px; }
.bk-card-head h2 { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); margin: 0; }
.bk-card-head p { margin: 3px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.bk-toolbar { padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }
.bk-muted { margin: 0; padding: 0 22px 20px; font-size: 13px; color: var(--text-secondary); }
.bk-none { margin: 0; padding: 28px 22px; text-align: center; font-size: 13.5px; color: var(--text-secondary); }
.bk-none[hidden] { display: none; }
.bk-empty { padding: 40px 22px 34px; }

/* appointments */
.bk-list { list-style: none; margin: 0; padding: 0; }
.bk-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.bk-row:last-child { border-bottom: 0; }
.bk-row[hidden] { display: none; }
.bk-row.is-cancelled .bk-date, .bk-row.is-cancelled .bk-main { opacity: .6; }
.bk-date { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7px 0 8px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); line-height: 1.1; }
.bk-date b { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.bk-date small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.bk-row[data-group="attention"] .bk-date { background: var(--s-amber-bg); color: var(--s-amber); }
.bk-row.is-completed .bk-date, .bk-row.is-cancelled .bk-date { background: var(--bg-darker); color: var(--text-secondary); }
.bk-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-who b { font-size: 15px; color: var(--text-primary); }
.bk-what, .bk-contact { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; font-size: 13px; color: var(--s-text-2); }
.bk-what i, .bk-contact i { width: 14px; color: var(--s-text-3); font-size: 12px; }
.bk-what em { color: var(--s-text-3); }
.bk-contact a { color: var(--text-secondary); text-decoration: none; overflow-wrap: anywhere; }
.bk-contact a:hover { color: var(--primary); }
.bk-contact span { color: var(--s-text-3); }
.bk-amt { color: var(--s-green) !important; font-weight: 600; }
.bk-amt i { color: inherit !important; }
.bk-notes { margin: 8px 0 0; padding: 8px 11px; border-radius: 10px; background: var(--bg-darker); font-size: 13px; line-height: 1.5; color: var(--s-text-2); overflow-wrap: anywhere; }
.bk-notes i { margin-right: 4px; color: var(--s-text-3); }
.bk-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bk-actions form { margin: 0; }
.bk-actions .sd-act { height: 34px; padding: 0 11px; font-size: 12.5px; gap: 6px; }
.bk-pill-confirmed { background: var(--primary-soft); color: var(--primary); }
.bk-pill-pending, .bk-pill-attention { background: var(--s-amber-bg); color: var(--s-amber); }
.bk-pill-completed { background: var(--s-green-bg); color: var(--s-green); }
.bk-pill-cancelled { background: var(--s-red-bg); color: var(--s-red); }

/* services */
.bk-svcs { list-style: none; margin: 0; padding: 0 0 6px; }
.bk-svc { display: flex; align-items: flex-start; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--border); }
.bk-svc-main { flex: 1; min-width: 0; }
.bk-svc-main b { font-size: 14.5px; color: var(--text-primary); }
.bk-svc-main p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.bk-svc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; color: var(--s-text-2); }
.bk-svc-meta i { color: var(--s-text-3); margin-right: 3px; }
.bk-svc-actions { display: flex; align-items: center; gap: 4px; }
.bk-svc-actions form { margin: 0; display: flex; }
.bk-svc-actions .mu-switch { margin-right: 6px; }
.bk-svc.off .sd-tile, .bk-svc.off .bk-svc-main { opacity: .5; }

/* hours */
.bk-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.bk-hours { padding: 0 22px 20px; }
.bk-day { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid var(--border); }
.bk-day-name { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.bk-day-check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bk-check-ui { position: relative; width: 36px; height: 21px; border-radius: 99px; background: var(--s-border-strong); transition: background .15s; flex-shrink: 0; }
.bk-check-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .25); transition: transform .15s; }
.bk-day-check:checked + .bk-check-ui { background: var(--primary); }
.bk-day-check:checked + .bk-check-ui::after { transform: translateX(15px); }
.bk-day-check:focus-visible + .bk-check-ui { box-shadow: var(--s-ring); }
.bk-times { display: flex; align-items: center; gap: 8px; }
.bk-times .form-input { width: 128px; height: 38px; padding: 0 10px; }
.bk-times span { font-size: 13px; color: var(--text-secondary); }
.bk-closed { display: none; font-size: 13px; color: var(--s-text-3); }
.bk-js .bk-day.off .bk-times { display: none; }
.bk-js .bk-day.off .bk-closed { display: block; }
.bk-day.invalid .bk-times .form-input { border-color: var(--danger); }
.bk-hours-err { margin: 10px 0 0; }
.bk-hours-err[hidden] { display: none; }
.bk-hours-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); }
.bk-block-form { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 0 22px 16px; }
.bk-block-form .pe-field { margin: 0; }
.bk-block-form .form-input { width: 100%; height: 40px; padding: 0 11px; }
.bk-blocks { list-style: none; margin: 0; padding: 0 0 8px; }
.bk-blocks li { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 22px; border-top: 1px solid var(--border); font-size: 13.5px; }
.bk-block-date { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.bk-block-note { flex: 1; min-width: 0; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-blocks form { margin: 0 0 0 auto; }

/* calendar sync */
.bk-gcal { display: flex; align-items: center; gap: 18px; padding: 22px; }
.bk-gcal-logo { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--bg-darker); color: #4285f4; font-size: 24px; }
.bk-gcal-body { flex: 1; min-width: 0; }
.bk-gcal-body h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--text-primary); margin: 0; }
.bk-gcal-body p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); max-width: 620px; }
.bk-gcal-body .bk-muted { padding: 0; margin-top: 6px; font-size: 12.5px; }
.bk-gcal form { margin: 0; }

/* modals */
.bk-cancel-who { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.bk-cancel-who:empty { display: none; }
.bk-note { display: flex; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--primary-soft); font-size: 13px; line-height: 1.5; color: var(--s-text-2); }
.bk-note i { margin-top: 3px; color: var(--primary); }
.bk-note[hidden] { display: none; }
.bk-cancel-check { align-items: flex-start; margin-bottom: 14px; }
.bk-cancel-check input { margin-top: 2px; }
.sd-act.bk-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.sd-act.bk-danger:hover { filter: brightness(.95); color: #fff; }
.sd-act[disabled] { opacity: .6; cursor: default; }
#service-modal select.form-input, #cancel-modal select.form-input { height: 44px; }

@media (max-width: 1024px) { .bk-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
    .bk-setup { flex-wrap: wrap; }
    .bk-setup .sd-act { width: 100%; justify-content: center; }
    .bk-row { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; padding: 14px; }
    .bk-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .bk-date b { font-size: 18px; }
    .bk-card-head { padding: 16px 16px 12px; flex-wrap: wrap; }
    .bk-svc { padding: 12px 16px; flex-wrap: wrap; }
    .bk-svc > .sd-tile { display: none; }
    .bk-svc-actions { width: 100%; justify-content: flex-end; }
    .bk-hours { padding: 0 16px 16px; }
    .bk-day { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 0; }
    .bk-times .form-input { flex: 1; width: auto; min-width: 0; }
    .bk-block-form { grid-template-columns: minmax(0, 1fr); padding: 0 16px 14px; }
    .bk-blocks li { padding-left: 16px; }
    .bk-gcal { flex-wrap: wrap; padding: 18px 16px; }
    .bk-gcal-logo { display: none; }
    .bk-gcal-body h2 { flex-wrap: wrap; }
    .bk-gcal .sd-act, .bk-gcal form { width: 100%; }
    .bk-gcal .sd-act { justify-content: center; }
    .bk .pe-head-actions { flex-wrap: wrap; }
    .bk .pe-head-actions .sd-act { flex: 1 1 calc(50% - 5px); padding: 0 10px; }
    .bk .pe-head-actions .sd-act-primary { flex-basis: 100%; }
    .bk-tabs { display: grid; grid-template-columns: repeat(4, auto); overflow: visible; }
    .bk-tabs .mu-tab { padding: 0 6px; font-size: 13px; justify-content: center; gap: 5px; }
    .bk-tabs .mu-tab span { padding: 1px 5px; font-size: 11px; }
    .bk-card-head .sd-act-primary { display: none; }
}
.cm-chip.bk-chip-warn:not(.active) { border-color: var(--s-amber); color: var(--s-amber); }
.cm-chip.bk-chip-warn:not(.active) span { color: inherit; }

/* Sidebar: Profile group (Edit profile / Templates / Custom Builder) */
.menu-sub > summary { list-style: none; cursor: pointer; user-select: none; }
.menu-sub > summary::-webkit-details-marker { display: none; }
.menu-sub .menu-chev { margin-left: auto; width: 16px !important; height: 16px !important; transition: transform .18s; }
.menu-sub[open] .menu-chev { transform: rotate(180deg); }
.menu-sub.has-active > summary { color: var(--text-primary); }
.menu-sub.has-active > summary .si:first-child { color: var(--primary); }
.menu-children { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 21px; padding-left: 10px; border-left: 1px solid var(--border); }
.menu-children .menu-link { padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
.menu-children .menu-link .si { width: 18px; height: 18px; }
.sidebar.collapsed .menu-sub > summary { display: none; }
.sidebar.collapsed .menu-children { margin: 0; padding: 0; border: 0; }
.menu-sub > summary.menu-link { display: flex; align-items: center; }
.menu-children .menu-link { gap: 10px; padding-left: 10px; padding-right: 8px; }
.menu-children .menu-link > span:not(.menu-badge) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.menu-children .menu-badge { margin-left: auto; flex-shrink: 0; }
.menu-children { margin-left: 18px; padding-left: 6px; }
.menu-children .menu-link { padding-left: 8px; font-size: 14px; letter-spacing: -0.01em; }
.menu-children .menu-badge { padding: 2px 6px; font-size: 10px; }
.sd-stat.sd-stat-locked { grid-template-columns: auto minmax(0, 1fr); } /* keep 2 columns at every width (media rules above set 3) */

/* ==========================================================================
   25. Tips & Meter (tips.php) — reuses .bk-card-head, .an-kpis, .mu-icon
   ========================================================================== */
.tp { max-width: 1200px; }
.tp > * + * { margin-top: 18px; }
.tp-status { padding: 20px 22px 8px; }
.tp-status.is-live { background: linear-gradient(135deg, var(--card-bg) 55%, var(--s-green-bg) 170%); }
.tp-status.is-off { background: linear-gradient(135deg, var(--card-bg) 55%, var(--s-amber-bg) 170%); }
.tp-status-head { display: flex; gap: 14px; align-items: flex-start; }
.tp-status-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--text-primary); }
.tp-status-head p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.tp-steps { list-style: none; margin: 14px 0 0; padding: 0; }
.tp-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.tp-steps li > div { flex: 1; min-width: 0; }
.tp-steps b { display: block; font-size: 14px; color: var(--text-primary); }
.tp-steps small { display: block; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.tp-steps form { margin: 0; }
.tp-steps .sd-act { height: 36px; }
.tp-dot { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--bg-darker); color: var(--text-secondary); border: 1px solid var(--border); }
.tp-steps li.done .tp-dot { background: var(--s-green); border-color: var(--s-green); color: #fff; }
.tp-steps li.done b { color: var(--text-secondary); }

.tp-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tp-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tp-card { padding: 0; overflow: hidden; }
.tp-meter { padding: 20px 22px; }
.tp-meter-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.tp-meter h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--text-primary); }
.tp-meter p { margin: 3px 0 0; font-size: 13px; color: var(--text-secondary); }
.tp-meter-amt { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.tp-meter-amt b { font-size: 20px; color: var(--text-primary); }
.tp-bar { height: 12px; margin-top: 14px; border-radius: 99px; background: var(--bg-darker); overflow: hidden; }
.tp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f59e0b, #f97316); min-width: 0; }
.tp-meter-foot { margin-top: 8px; font-size: 12.5px; color: var(--text-secondary); }

.tp-list { list-style: none; margin: 0; padding: 0 0 4px; }
.tp-list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px 12px 22px; border-top: 1px solid var(--border); }
.tp-list li.is-refunded { opacity: .6; }
.tp-av { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--s-amber-bg); color: var(--s-amber); font-weight: 800; font-size: 14px; }
.tp-li-main { flex: 1; min-width: 0; }
.tp-li-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-li-top b { font-size: 14px; color: var(--text-primary); }
.tp-when { font-size: 12px; color: var(--s-text-3); }
.tp-li-main p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--s-text-2); font-style: italic; overflow-wrap: anywhere; }
.tp-amt { font-weight: 800; font-size: 14.5px; color: var(--s-green); white-space: nowrap; padding-top: 6px; }
.tp-list form { margin: 0; }
.tp-top { list-style: none; margin: 0; padding: 0 0 6px; }
.tp-top li { display: flex; align-items: center; gap: 10px; padding: 10px 22px; border-top: 1px solid var(--border); font-size: 14px; }
.tp-top b { color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-top small { color: var(--text-secondary); font-size: 12px; margin-right: auto; }
.tp-top .tp-amt { padding: 0; }
.tp-rank { width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--bg-darker); color: var(--text-secondary); flex-shrink: 0; }
.tp-rank.r1 { background: #fef3c7; color: #b45309; }
.tp-rank.r2 { background: #e5e7eb; color: #4b5563; }
.tp-rank.r3 { background: #fde7d9; color: #b45309; }
html[data-theme="dark"] .tp-rank.r1, html[data-theme="dark"] .tp-rank.r2, html[data-theme="dark"] .tp-rank.r3 { background: var(--bg-darker); }

.tp-settings { position: sticky; top: 90px; }
.tp-form { padding: 0 22px 20px; }
.tp-form .pe-field .form-input, .tp-form .pe-field .form-textarea { width: 100%; padding: 10px 12px; }
.tp-form .pe-field .form-textarea { min-height: 70px; }
.tp-toggle { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); cursor: pointer; }
.tp-toggle:last-of-type { margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.tp-toggle > span { flex: 1; min-width: 0; }
.tp-toggle b { display: block; font-size: 14px; color: var(--text-primary); }
.tp-toggle small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.tp-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tp-toggle i { position: relative; width: 40px; height: 23px; flex-shrink: 0; border-radius: 99px; background: var(--s-border-strong); transition: background .15s; }
.tp-toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.25); transition: transform .15s; }
.tp-toggle input:checked + i { background: var(--primary); }
.tp-toggle input:checked + i::after { transform: translateX(17px); }
.tp-toggle input:focus-visible + i { box-shadow: var(--s-ring); }
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tp-chips span { padding: 4px 10px; border-radius: 99px; background: var(--s-amber-bg); color: var(--s-amber); font-size: 12.5px; font-weight: 700; }
.tp-save { display: flex; justify-content: flex-end; padding-top: 4px; }

@media (max-width: 1100px) { .tp-grid { grid-template-columns: minmax(0, 1fr); } .tp-settings { position: static; } }
@media (max-width: 768px) {
    .tp .pe-head-actions .sd-act { flex: 1 1 calc(50% - 5px); padding: 0 10px; }
    .tp-status { padding: 16px 16px 6px; }
    .tp-steps li { flex-wrap: wrap; }
    .tp-steps li > .sd-act, .tp-steps li > form { margin-left: 38px; }
    .tp-meter { padding: 16px; }
    .tp-list li { padding: 12px 14px; }
    .tp-top li { padding: 10px 16px; }
    .tp-form { padding: 0 16px 16px; }
    .tp-save .sd-act { width: 100%; justify-content: center; }
}
.bk .an-kpis, .tp .an-kpis, .ms .an-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (max-width: 768px) { .bk .an-kpis, .tp .an-kpis, .ms .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   26. Store (store.php) — reuses .tp-card/.tp-form/.tp-toggle, .bk-setup, .mu-switch/.mu-icon, .cm-badge
   ========================================================================== */
.st { max-width: 1240px; }
.st > * + * { margin-top: 18px; }
.st-how { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--primary-soft); font-size: 13.5px; line-height: 1.5; color: var(--s-text-2); }
.st-how i { color: var(--primary); margin-top: 3px; }
.st-how p { margin: 0; }
.st-how b { color: var(--text-primary); }
.st-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.st-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.st-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.st-card { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); overflow: hidden; cursor: grab; transition: box-shadow .15s, transform .15s; }
.st-card:hover { box-shadow: var(--s-shadow-md, 0 6px 18px rgba(16,24,40,.08)); }
.st-card.dragging { opacity: .5; transform: scale(.98); }
.st-card.off .st-cover, .st-card.off .st-body { opacity: .55; }
.st-cover { position: relative; aspect-ratio: 1 / 1; background: var(--bg-darker); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.st-cover img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.st-ph { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--s-purple-bg); color: var(--s-purple); font-size: 24px; }
.st-feat { left: 10px; background: #f59e0b; }
.st-hidden { right: 10px; }
.st-body { padding: 12px 14px 6px; flex: 1; min-width: 0; }
.st-title { display: block; font-size: 14.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-price { margin-top: 2px; font-size: 15px; font-weight: 800; color: var(--text-primary); }
.st-price s { margin-left: 4px; font-size: 12.5px; font-weight: 600; color: var(--s-text-3); }
.st-meta { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: 12px; color: var(--text-secondary); min-width: 0; }
.st-meta a { color: var(--primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-nolink { color: var(--s-amber); font-weight: 600; }
.st-actions { display: flex; align-items: center; gap: 2px; padding: 6px 8px 8px 12px; border-top: 1px solid var(--border); }
.st-actions form { margin: 0; display: flex; }
.st-star[aria-pressed="true"] { color: #d97706; }
.st-hint { margin: 0; }
.st-side { position: sticky; top: 90px; }
.st-form .cm-modal-body { max-height: min(72vh, 680px); overflow-y: auto; }
.st-form .pe-field .form-input, .st-form .pe-field .form-textarea { width: 100%; padding: 10px 12px; }
.st-form select.form-input { height: 44px; }
.st-form .mu-check { margin-bottom: 10px; }
.st-cover-row { margin-bottom: 6px; }
.st-form .form-input.invalid, .st-form .pe-prefix-input:has(input.invalid) { border-color: var(--danger); }
@media (max-width: 1100px) { .st-layout { grid-template-columns: minmax(0, 1fr); } .st-side { position: static; } }
@media (max-width: 768px) {
    .st .pe-head-actions .sd-act { flex: 1 1 calc(50% - 5px); padding: 0 10px; }
    .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .st-body { padding: 10px 10px 4px; }
    .st-actions { padding: 4px 4px 6px 8px; }
    .st-actions .mu-icon { width: 30px; height: 30px; }
    .st-card { cursor: default; }
}
.st-form [hidden], .cm-modal .sd-act[hidden] { display: none !important; }
.tp-pay span { background: var(--primary-soft); color: var(--primary); }

/* ==========================================================================
   27. Memberships (memberships.php) — reuses .st-how/.st-actions/.st-form, .tp-list, .bk-setup
   ========================================================================== */
.ms { max-width: 1200px; }
.ms > * + * { margin-top: 18px; }
.ms-tiers { list-style: none; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ms-tier { --tier: var(--primary); position: relative; display: flex; flex-direction: column; padding: 18px 0 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); overflow: hidden; cursor: grab; }
.ms-tier::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tier); }
.ms-tier.off > :not(.st-actions) { opacity: .55; }
.ms-tier.dragging { opacity: .5; }
.ms-tier-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 0 18px; }
.ms-tier-top b { font-size: 16px; color: var(--text-primary); }
.ms-price { font-size: 20px; font-weight: 800; color: var(--tier); white-space: nowrap; letter-spacing: -.02em; }
.ms-price small { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-left: 2px; }
.ms-desc { margin: 6px 18px 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.ms-perks { list-style: none; margin: 10px 18px 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--s-text-2); }
.ms-perks i { color: var(--tier); font-size: 11px; margin-right: 7px; }
.ms-more { color: var(--s-text-3); font-size: 12px; }
.ms-tier-meta { display: flex; flex-direction: column; gap: 3px; margin: 12px 18px 12px; font-size: 12px; color: var(--text-secondary); flex: 1; justify-content: flex-end; }
.ms-tier-meta a { color: var(--primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-tier-meta i { width: 14px; }
.ms-members { overflow: visible; }
.ms-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 0 22px 12px; }
.ms-toolbar .cm-search { width: 240px; height: 36px; padding: 0 12px; }
.ms-list li { align-items: center; }
.ms-list .tp-av { background: color-mix(in srgb, var(--tier, var(--primary)) 14%, transparent); color: var(--tier, var(--primary)); }
.ms-list[hidden], .ms-list li[hidden] { display: none; }
.ms-sub { font-style: normal !important; }
.ms-sub a { color: var(--text-secondary); text-decoration: none; }
.ms-sub a:hover { color: var(--primary); }
.ms-note { color: var(--s-text-3) !important; }
.ms-tier-pill { background: color-mix(in srgb, var(--tier) 14%, transparent); color: var(--tier); }
.ms-list .tp-amt { padding: 0; }
.ms-list .tp-amt small { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.ms-status { margin: 0; }
.ms-status .sd-select { height: 34px; font-size: 12.5px; padding: 0 28px 0 10px; }
.ms-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-colors input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ms-colors span { display: block; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.ms-colors input:checked + span { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.ms-colors input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 768px) {
    .ms .pe-head-actions .sd-act { flex: 1 1 calc(50% - 5px); padding: 0 10px; }
    .ms-tiers { grid-template-columns: minmax(0, 1fr); }
    .ms-tier { cursor: default; }
    .ms-toolbar { padding: 0 16px 12px; }
    .ms-toolbar .cm-search { width: 100%; }
    .ms-list li { flex-wrap: wrap; }
    .ms-list .tp-li-main { flex-basis: calc(100% - 46px); }
    .ms-list .tp-amt { margin-left: 46px; margin-right: auto; }
}
.st-form .pe-field .form-textarea { min-height: 76px; }

/* ==========================================================================
   28. Audience (subscribers.php) — reuses .tp-list/.tp-form, .an-kpis, .cm-chips, .cm-drop
   ========================================================================== */
.au { max-width: 1240px; }
.au > * + * { margin-top: 18px; }
.au .an-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.au-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.au-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.au-side { position: sticky; top: 90px; }
.au-growth { padding: 20px 22px 16px; }
.au-growth h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--text-primary); }
.au-growth p { margin: 3px 0 0; font-size: 13px; color: var(--text-secondary); }
.au-sources { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: flex-end; font-size: 12.5px; color: var(--text-secondary); }
.au-sources b { color: var(--text-primary); }
.au-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: end; gap: 3px; height: 90px; margin-top: 16px; }
.au-bars i { display: block; border-radius: 4px 4px 1px 1px; background: var(--primary); min-height: 2px; }
.au-bars i.z { background: var(--border); }
.au-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--s-text-3); }
.au-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }
.au-toolbar .cm-chip { display: inline-flex; align-items: center; text-decoration: none; }
.au-search { display: flex; gap: 8px; align-items: center; }
.au-search .form-input { width: 220px; height: 36px; padding: 0 12px; }
.au-search .sd-select { height: 36px; }
.au-list li { align-items: center; }
.au-list li:first-child { border-top: 0; }
.au-av { background: var(--primary-soft); color: var(--primary); }
.au-list .tp-li-top b { font-size: 13.5px; overflow-wrap: anywhere; }
.au-tag { margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--bg-darker); color: var(--s-text-2); font-size: 11.5px; text-decoration: none; }
.au-tag:hover { color: var(--primary); }
.au-list form { margin: 0; }
.au-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); }
.au-pager .sd-act { height: 34px; }
.au-purge { margin: 0; padding: 10px 22px 14px; border-top: 1px solid var(--border); }
.au-link-btn { border: 0; background: none; padding: 0; font: 600 12.5px var(--s-font); color: var(--danger); cursor: pointer; }
.au-link-btn:hover { text-decoration: underline; }
.au-help { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.au-drop { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; cursor: pointer; }
.au-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.au-side .tp-save { justify-content: space-between; gap: 8px; }
@media (max-width: 1100px) { .au-layout { grid-template-columns: minmax(0, 1fr); } .au-side { position: static; } }
@media (max-width: 768px) {
    .au .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .au .pe-head-actions { flex-wrap: wrap; }
    .au .pe-head-actions .sd-act { flex: 1 1 calc(50% - 5px); padding: 0 10px; }
    .au .pe-head-actions .sd-act-primary { flex-basis: 100%; }
    .au-growth { padding: 16px; }
    .au-sources { justify-content: flex-start; margin-top: 8px; }
    .au-growth .tp-meter-top { flex-direction: column; }
    .au-toolbar { padding: 14px; }
    .au-search, .au-search .form-input { width: 100%; }
    .au-list li { padding: 12px 10px 12px 14px; }
}
.au-drop { position: relative; } .au-drop input[type=file] { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer; }

/* ==========================================================================
   29. Email Campaigns (campaigns.php)
   ========================================================================== */
.cp { max-width: 1240px; }
.cp > * + * { margin-top: 18px; }
.cp-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--s-radius); background: var(--s-amber-bg); }
.cp-note b { display: block; font-size: 14px; color: var(--text-primary); }
.cp-note p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--s-text-2); }
.cp-note .sd-tile { background: var(--card-bg); }
.cp-list li { align-items: center; }
.cp-li-link { text-decoration: none; color: inherit; }
.cp-li-link:hover b { color: var(--primary); }
.cp-list form { margin: 0; }
.cp-pill-draft { background: var(--bg-darker); color: var(--s-text-2); }
.cp-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: none; }
.cp-back:hover { color: var(--primary); }
.cp-compose > * + * { margin-top: 18px; }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.cp-editor-card { padding: 22px; }
.cp-editor-card .pe-field .form-input { width: 100%; padding: 11px 13px; }
.cp-count, .pe-count.warn { color: var(--s-amber); }
.cp-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border: 1px solid var(--s-border-strong); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--bg-darker); }
.cp-toolbar button { height: 32px; min-width: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--s-text-2); font: 600 12px var(--s-font); cursor: pointer; }
.cp-toolbar button:hover { background: var(--card-bg); color: var(--text-primary); }
.cp-edit { min-height: 360px; padding: 16px 18px; border: 1px solid var(--s-border-strong); border-radius: 0 0 12px 12px; background: var(--s-input-bg, var(--card-bg)); color: var(--text-primary); font-size: 15px; line-height: 1.6; outline: none; overflow-wrap: anywhere; }
.cp-edit:focus { border-color: var(--primary); box-shadow: var(--s-ring); }
.cp-edit:empty::before { content: attr(data-placeholder); color: var(--s-text-3); }
.cp-edit h2 { font-size: 21px; margin: 0 0 10px; }
.cp-edit h3 { font-size: 17px; margin: 14px 0 6px; }
.cp-edit p { margin: 0 0 10px; }
.cp-edit a { color: var(--primary); }
.cp-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 90px; }
.cp-side-card { padding: 16px 18px; }
.cp-side-card h2 { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--text-primary); }
.cp-to { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.cp-to:hover { background: var(--bg-dark); }
.cp-to input { accent-color: var(--primary); }
.cp-to span { display: flex; justify-content: space-between; flex: 1; gap: 8px; font-size: 13.5px; }
.cp-to b { color: var(--text-primary); font-weight: 600; }
.cp-to small { color: var(--text-secondary); }
.cp-small { margin: 6px 0 0; font-size: 12.5px; color: var(--text-secondary); }
.cp-small a { color: var(--primary); }
.cp-starters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cp-starters button { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); color: var(--s-text-2); font: 600 12.5px var(--s-font); cursor: pointer; text-align: left; }
.cp-starters button:hover { border-color: var(--primary); color: var(--primary); }
.cp-starters i { width: 14px; color: var(--s-text-3); }
.cp-inbox { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; background: var(--bg-darker); font-size: 12.5px; margin-bottom: 10px; }
.cp-inbox b { color: var(--text-primary); font-size: 13px; }
.cp-inbox span { color: var(--s-text-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-inbox small { color: var(--s-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-frame { width: 100%; height: 360px; border: 1px solid var(--border); border-radius: 10px; background: #f4f5f7; }
@media (max-width: 1100px) { .cp-grid { grid-template-columns: minmax(0, 1fr); } .cp-side { position: static; } }
@media (max-width: 768px) {
    .cp .pe-head-actions .sd-act { flex: 1 1 calc(50% - 5px); padding: 0 10px; }
    .cp-editor-card { padding: 16px; }
    .cp-edit { min-height: 260px; }
}

/* ==========================================================================
   30. My Listings (listings.php) — reuses .st-actions/.st-form/.cm-badge/.au-drop
   ========================================================================== */
.ls { max-width: 1240px; }
.ls > * + * { margin-top: 18px; }
.ls-grid { list-style: none; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.ls-card { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); overflow: hidden; cursor: grab; }
.ls-card.dragging { opacity: .5; }
.ls-cover { position: relative; aspect-ratio: 4 / 3; background: var(--bg-darker); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ls-cover img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ls-status { left: 10px; }
.ls-status.s-sold { background: rgba(217, 45, 32, .85); }
.ls-status.s-pending, .ls-status.s-in-escrow { background: rgba(217, 119, 6, .88); }
.ls-status.s-just-listed { background: rgba(18, 183, 106, .88); }
.ls-card .st-feat { left: auto; right: 10px; }
.ls-count { right: 10px; bottom: 10px; top: auto; }
.ls-body { padding: 12px 14px 8px; flex: 1; min-width: 0; }
.ls-price { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary); }
.ls-title { display: block; margin-top: 2px; font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-place { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-facts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--s-text-2); }
.ls-facts i { color: var(--s-text-3); margin-right: 3px; }
.ls-open { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--primary); }
.ls-empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ls-modal .pe-crop-box { width: min(680px, 100%); }
.ls-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.ls-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 10px; }
.ls-photos[hidden] { display: none; }
.ls-ph { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--bg-darker); }
.ls-ph.cover { outline: 2px solid var(--primary); outline-offset: 1px; }
.ls-ph img { width: 100%; height: 100%; object-fit: cover; }
.ls-ph-tag { position: absolute; left: 5px; bottom: 5px; padding: 1px 6px; border-radius: 99px; background: rgba(16, 24, 40, .7); color: #fff; font-size: 10.5px; font-weight: 700; }
.ls-ph-btn { position: absolute; top: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(16, 24, 40, .65); color: #fff; font-size: 11px; cursor: pointer; }
.ls-ph-btn.x { right: 4px; }
.ls-ph-btn.star { left: 4px; }
.ls-ph-btn.star .fas { color: #fbbf24; }
.ls-drop { margin-bottom: 14px; }
.ls-import-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--primary-soft); font-size: 13px; color: var(--s-text-2); }
.ls-import-note[hidden] { display: none; }
@media (max-width: 768px) {
    .ls .pe-head-actions { flex-wrap: wrap; }
    .ls .pe-head-actions .sd-act { flex: 1 1 calc(50% - 5px); padding: 0 10px; }
    .ls .pe-head-actions .sd-act-primary { flex-basis: 100%; }
    .ls-grid { grid-template-columns: minmax(0, 1fr); }
    .ls-card { cursor: default; }
    .ls-grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ==========================================================================
   31. Settings (settings.php) — reuses .mu-tabs, .bk-card-head, .bk-gcal, .tp-save
   ========================================================================== */
.se { max-width: 860px; }
.se > * + * { margin-top: 18px; }
.se-tabs { margin-bottom: 0; }
.se-tabs .mu-tab { text-decoration: none; }
.se-card { padding: 0; overflow: hidden; }
.se-body { padding: 0 22px 20px; }
.se-body .pe-field .form-input { width: 100%; padding: 10px 12px; }
.se-body .pe-err { display: block; margin-top: 5px; }
.se-rows { padding: 0 22px 10px; }
.se-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 14px; }
.se-row > span { width: 220px; flex-shrink: 0; color: var(--text-secondary); }
.se-row > b { flex: 1; min-width: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.se-row .sd-act { height: 34px; }
.se-stripe { padding: 22px; }
.se-stripe-logo { color: #635bff; }
.se-stripe-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.se-stripe-actions form { margin: 0; }
.se-note { position: relative; margin: 10px 0 0; padding-left: 22px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.se-note > i { position: absolute; left: 2px; top: 3px; color: var(--s-text-3); }
.se-note a { color: var(--primary); }
.se-pay label i { width: 16px; color: var(--s-text-3); margin-right: 4px; }
.se-plan { padding: 22px; }
.se-plan-head { display: flex; align-items: center; gap: 14px; }
.se-plan-head > div { flex: 1; min-width: 0; }
.se-plan-head h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-primary); }
.se-plan-head p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.se-plan-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: color-mix(in srgb, var(--plan) 14%, transparent); }
.se-plan h3 { margin: 20px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.se-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 13.5px; color: var(--s-text-2); }
.se-feats i { width: 18px; color: var(--s-green); }
.se-feats-next i { color: var(--s-text-3); }
@media (max-width: 768px) {
    .se-tabs { display: grid; grid-template-columns: repeat(4, auto); }
    .se-tabs .mu-tab { padding: 0 6px; justify-content: center; font-size: 12.5px; }
    .se-body, .se-rows { padding-left: 16px; padding-right: 16px; }
    .se-row { flex-wrap: wrap; }
    .se-row > span { width: 100%; }
    .se-stripe { padding: 18px 16px; flex-wrap: wrap; }
    .se-plan { padding: 18px 16px; }
    .se-plan-head { flex-wrap: wrap; }
    .se-feats { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   32. Plans (upgrade.php)
   ========================================================================== */
.up { max-width: 1240px; }
.up-hero { text-align: center; max-width: 640px; margin: 4px auto 24px; }
.up-hero h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary); }
.up-hero p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }
.up-hero p b { color: var(--text-primary); }
.up-reason { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 7px 14px; border-radius: 99px; background: var(--s-amber-bg); color: var(--s-amber); font-size: 13px; font-weight: 700; }
.up-billing { display: inline-flex; gap: 2px; margin-top: 16px; padding: 4px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--border); }
.up-billing button { height: 34px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; font: 600 13px var(--s-font); color: var(--s-text-2); cursor: pointer; }
.up-billing button.on { background: var(--primary-soft); color: var(--primary); }
.up-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.up-plan { --plan: var(--primary); position: relative; display: flex; flex-direction: column; padding: 22px 20px 20px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); }
.up-plan.current { border-color: var(--plan); }
.up-plan.pick { border: 2px solid var(--primary); box-shadow: 0 10px 30px rgba(79, 70, 229, .12); }
.up-flag { position: absolute; top: -11px; left: 18px; padding: 3px 10px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; }
.up-plan.current .up-flag { background: var(--plan); }
.up-plan h2 { font-size: 17px; font-weight: 800; color: var(--text-primary); }
.up-tag { margin-top: 2px; font-size: 13px; color: var(--text-secondary); }
.up-price { margin: 14px 0 6px; font-size: 13px; color: var(--text-secondary); min-height: 40px; }
.up-price b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary); }
.up-price small { display: block; font-size: 12px; color: var(--s-green); font-weight: 600; }
.up-price [hidden] { display: none; }
.up-plus { margin: 8px 0 6px; font-size: 12px; font-weight: 700; color: var(--s-text-3); }
.up-plan ul { list-style: none; padding: 0; margin: 6px 0 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.up-plan li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--s-text-2); }
.up-plan li i { margin-top: 3px; font-size: 11px; color: var(--plan); }
.up-plan li em { font-style: normal; font-size: 11.5px; color: var(--s-amber); font-weight: 600; }
.up-cta { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 11px; background: var(--primary); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.up-cta:hover { background: var(--primary-dark); color: #fff; }
.up-cta.is-current, .up-cta.is-muted { background: var(--bg-darker); color: var(--text-secondary); }
.up-note { max-width: 760px; margin: 20px auto 0; }
@media (max-width: 1180px) { .up-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; } }
@media (max-width: 640px) { .up-plans { grid-template-columns: minmax(0, 1fr); } .up-hero h1 { font-size: 25px; } }

/* Auth: show/hide password */
body.studio-auth .input-icon-wrapper { position: relative; }
.auth-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--s-text-3, #98a2b3); cursor: pointer; }
.auth-eye:hover { color: var(--text-primary); background: rgba(16, 24, 40, .05); }
body.studio-auth #password { padding-right: 46px; }

/* ==========================================================================
   33. Templates (templates.php)
   ========================================================================== */
.tm { max-width: 1320px; }
.tm > * + * { margin-top: 18px; }
.tm-current { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.tm-current-thumb { position: relative; width: 64px; height: 88px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: var(--bg-darker); display: flex; align-items: center; justify-content: center; color: var(--s-text-3); }
.tm-current-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: 1; }
.tm-current-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tm-current-body small { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.tm-current-body b { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.tm-current-body span { font-size: 13px; color: var(--text-secondary); }
.tm-current-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tm-current-actions .menu-badge { margin-left: 2px; }
.tm-filters { display: flex; flex-direction: column; gap: 10px; }
.tm-type-note { margin: 0; font-size: 13.5px; color: var(--text-secondary); }
.tm-type-note i { color: var(--primary); margin-right: 4px; }
.tm-type-note a, .ob-looks-hint a { color: var(--primary); font-weight: 600; }
.tm-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tm-filter-row .sd-select { height: 36px; }
.tm-seg { background: var(--card-bg); border: 1px solid var(--border); }
.tm-seg button { height: 28px; }
.tm-search { width: 220px; height: 36px; padding: 0 12px; margin-left: auto; }
.tm-grid { list-style: none; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.tm-card { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); overflow: hidden; }
.tm-card[hidden] { display: none; }
.tm-card.is-current { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.tm-thumb { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; background: var(--bg-darker); cursor: pointer; overflow: hidden; }
.tm-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: 1; transition: transform .25s; }
.tm-card:hover .tm-thumb img { transform: scale(1.03); }
.tm-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--s-text-3); background: linear-gradient(160deg, var(--bg-darker), var(--primary-soft)); }
.tm-ph i { font-size: 22px; }
.tm-ph b { font-size: 13px; color: var(--s-text-2); padding: 0 12px; text-align: center; }
.tm-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; z-index: 2; }
.tm-badge { padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(16, 24, 40, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tm-badge.cur { background: var(--primary); }
.tm-badge.new { background: #12b76a; }
.tm-badge.tier { position: absolute; top: 8px; right: 8px; z-index: 2; }
.tm-badge.tier.pro { background: linear-gradient(135deg, #7c3aed, #db2777); }
.tm-badge.tier.free { background: rgba(255, 255, 255, .92); color: #101828; }
.tm-hover { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 26px 0 10px; text-align: center; color: #fff; font-weight: 700; font-size: 13px; background: linear-gradient(transparent, rgba(16, 24, 40, .75)); opacity: 0; transition: opacity .2s; }
.tm-card:hover .tm-hover, .tm-thumb:focus-visible .tm-hover { opacity: 1; }
.tm-body { padding: 10px 12px 4px; min-width: 0; }
.tm-body b { display: block; font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-body small { display: block; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-actions { display: flex; gap: 6px; padding: 8px 12px 12px; }
.tm-actions form { margin: 0; flex: 1; display: flex; }
.tm-actions .sd-act { flex: 1; justify-content: center; height: 34px; padding: 0 10px; font-size: 12.5px; }
.tm-using { background: var(--bg-darker) !important; color: var(--text-secondary) !important; cursor: default; box-shadow: none !important; }
.tm-upgrade { color: #7c3aed !important; border-color: rgba(124, 58, 237, .35) !important; }
.tm-classic { padding: 0; overflow: hidden; }
.tm-classic > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; }
.tm-classic > summary::-webkit-details-marker { display: none; }
.tm-classic > summary > span { flex: 1; display: flex; flex-direction: column; }
.tm-classic > summary b { font-size: 15px; color: var(--text-primary); }
.tm-classic > summary small { font-size: 12.5px; color: var(--text-secondary); }
.tm-classic > summary i { color: var(--text-secondary); transition: transform .2s; }
.tm-classic[open] > summary i { transform: rotate(180deg); }
.tm-grid-classic { padding: 0 20px 20px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
/* preview modal */
.tm-modal { z-index: 3000; }
.tm-modal-box { width: min(980px, 100%); height: min(860px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--s-shadow-lg); overflow: hidden; }
.tm-modal-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--border); }
.tm-modal-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tm-modal-title b { font-size: 16px; color: var(--text-primary); }
.tm-modal-title small { font-size: 12.5px; color: var(--text-secondary); }
.tm-modal-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px; background: var(--bg-darker); }
.tm-phone { position: relative; height: 100%; max-height: 720px; aspect-ratio: 9 / 19; border-radius: 34px; padding: 10px; background: #0b0f1a; box-shadow: 0 20px 50px rgba(16, 24, 40, .25); }
.tm-phone iframe { width: 100%; height: 100%; border: 0; border-radius: 26px; background: #fff; }
/* The page renders at a real phone width (390px) and is scaled to fit the frame (see fitPhone in onboarding.js / templates-manager.js) */
.tm-screen { position: absolute; inset: 10px; overflow: hidden; border-radius: 26px; background: #fff; }
.tm-screen iframe { position: absolute; top: 0; left: 0; width: 390px; border-radius: 0; transform-origin: 0 0; }
.tm-phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 34%; height: 18px; border-radius: 0 0 12px 12px; background: #0b0f1a; z-index: 2; }
.tm-loading { position: absolute; inset: 10px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .7); color: #475467; font-size: 22px; }
.tm-loading[hidden] { display: none; }
.tm-nav { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-primary); cursor: pointer; flex-shrink: 0; }
.tm-nav:disabled { opacity: .35; cursor: default; }
.tm-modal-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); }
.tm-modal-foot p { flex: 1; min-width: 0; margin: 0; font-size: 13px; color: var(--text-secondary); }
.tm-modal-foot form { margin: 0; }
@media (max-width: 1024px) { .tm-search { margin-left: 0; width: 100%; } }
@media (max-width: 768px) {
    .tm-current { flex-wrap: wrap; }
    .tm-current-actions { width: 100%; }
    .tm-current-actions .sd-act { flex: 1; justify-content: center; }
    .tm-filter-row .tm-seg { overflow-x: auto; max-width: 100%; }
    .tm-filter-row .sd-select { flex: 1; }
    .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tm-actions { flex-direction: column; }
    .tm-actions .sd-act, .tm-actions form { flex: none; width: 100%; }
    .tm-modal-box { height: calc(100vh - 16px); border-radius: 16px; }
    .tm-modal-head { flex-wrap: wrap; }
    .tm-modal-head .tm-seg { order: 3; width: 100%; display: flex; }
    .tm-modal-head .tm-seg button { flex: 1; }
    .tm-nav { display: none; }
    .tm-modal-stage { padding: 10px; }
    .tm-modal-foot { flex-wrap: wrap; }
    .tm-modal-foot p { flex-basis: 100%; }
}

/* Profile › Appearance: current template card */
.pe-tpl { display: flex; gap: 16px; align-items: flex-start; }
.pe-tpl-thumb { position: relative; width: 96px; aspect-ratio: 3 / 4; flex-shrink: 0; border-radius: 14px; overflow: hidden; background: var(--bg-darker); display: flex; align-items: center; justify-content: center; color: var(--s-text-3); border: 1px solid var(--border); }
.pe-tpl-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: 1; }
.pe-tpl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pe-tpl-body small { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.pe-tpl-body b { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.pe-tpl-body > span { font-size: 13px; color: var(--text-secondary); }
.pe-tpl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Profile › Appearance › Page sections */
.pe-secs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.pe-sec { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.pe-sec-name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.pe-sec-act { display: inline-flex; align-items: center; gap: 6px; }
.pe-sec:first-child [data-sec-move="-1"], .pe-sec:last-child [data-sec-move="1"] { visibility: hidden; }
.pe-sec .toggle { margin-left: 6px; }

/* Content ▾ Photos / Videos / Documents pages: one kind per page, no type chips */
.cm-section .cm-chips { display: none !important; }

/* ==========================================================================
   34. Launch mode — "Coming soon" / Notify me (plans-lib.php)
   ========================================================================== */
.plan-soon-pill { background: var(--s-amber-bg) !important; color: var(--s-amber) !important; }
.plan-notify { gap: 7px; }
.plan-notify.is-joined, .plan-notify:disabled { background: var(--s-green-bg) !important; border-color: transparent !important; color: var(--s-green) !important; cursor: default; opacity: 1; box-shadow: none; }
.soon-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: var(--s-amber-bg); color: var(--s-amber); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sd-stat-soon .sd-stat-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sd-stat-notify { grid-area: value; margin-top: 8px; }
.sd-stat-notify .sd-act { height: 32px; padding: 0 12px; font-size: 12.5px; }
.se-soon-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-limit .soon-tag { margin-left: auto; }
.lk-limit .plan-notify { height: 30px; padding: 0 10px; font-size: 12px; }
.up-flag-soon { background: var(--s-amber) !important; }
.up-price-soon b { font-size: 22px !important; color: var(--s-amber) !important; }
.up-cta.plan-notify { width: 100%; border: 0; cursor: pointer; font-family: inherit; gap: 8px; }

/* ==========================================================================
   35. Finish setup — shared completion (dashboard card, profile ring, sidebar card, user menu)
   ========================================================================== */
a.pe-score { text-decoration: none; transition: transform .15s; }
a.pe-score:hover { transform: scale(1.06); }
.pe-score-done { background: var(--s-green) !important; }
.pe-score-done span { color: var(--s-green); font-size: 13px; }
.pe-finish { white-space: nowrap; }
.sd-check-setup { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
.sd-check-ring-row { display: flex; align-items: center; gap: 14px; }
.sd-check-ring { width: 64px; height: 64px; }
.sd-check-ring span { width: 52px; height: 52px; font-size: 14px; }
.sd-check-next { margin: 6px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.sd-check-next b { color: var(--text-primary); }
.sd-check-cta { align-self: flex-start; height: 44px; padding: 0 16px; font-size: 14px; }
.studio-setup-card {
    margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px;
    border: 1px solid var(--primary-soft-2, var(--border)); border-radius: 14px; text-decoration: none; color: var(--text-primary);
    background: var(--primary-soft); transition: border-color .15s, box-shadow .15s;
}
.studio-setup-card + .studio-help-card { margin-top: 0; }
.studio-setup-card:hover { border-color: var(--primary); box-shadow: var(--s-shadow-md); }
.studio-setup-card .studio-help-text strong { font-size: 13px; }
.studio-setup-card .studio-help-text > span { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 600; }
.studio-setup-ring { width: 40px; height: 40px; }
.studio-setup-ring span { width: 32px; height: 32px; font-size: 10.5px; }
.sidebar.collapsed .studio-setup-card { display: none; }
.dropdown-setup { color: var(--primary) !important; font-weight: 600; }
.dropdown-setup-pct { --p: 0; margin-left: auto; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--bg-darker) 0); }
@media (max-width: 1180px) { .sd-check-setup { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
    .sd-check-ring { width: 56px; height: 56px; }
    .sd-check-ring span { width: 46px; height: 46px; font-size: 13px; }
    .sd-check-cta { align-self: stretch; justify-content: center; }
    .sd-check h2 { padding-right: 0; }
    .pe-head-actions { flex-wrap: wrap; }   /* lets the full-width guided-setup button take its own row instead of pushing the page sideways */
    .pe-head-actions .pe-finish { flex: 1 1 100%; }
}

/* ==========================================================================
   36. Mobile fixes: sidebar sticky foot, crop tools, wizard "Pick a look"
   ========================================================================== */
/* sidebar: the nav scrolls, the Finish-setup + Need-help cards stay pinned at the bottom (safe-area aware) */
.sidebar { height: 100vh; height: 100dvh; overflow: hidden !important; }
.sidebar-menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 10px; }
.sidebar-menu::-webkit-scrollbar { display: none; }
.sidebar-foot { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--sidebar-bg); }
.sidebar-foot .studio-help-card, .sidebar-foot .studio-setup-card { margin: 0; }
.sidebar.collapsed .sidebar-foot { display: none; }
@media (max-width: 1024px) { .sidebar { height: 100dvh; } }
/* crop dialog: tools on the left (or their own row on phones), Cancel then Save photo on the right */
.pe-crop-tools [data-crop-cancel] { margin-left: auto; }
@media (max-width: 640px) {
    .pe-crop-tools { padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .pe-crop-tools .pe-crop-spacer { flex-basis: 100%; height: 0; }
    .pe-crop-tools .sd-act-primary { min-width: 132px; justify-content: center; }
}
/* wizard "Pick a look": tall page previews, one per row on phones */
.ob-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ob-look { position: relative; display: block; cursor: pointer; border-radius: 18px; padding: 8px 8px 0; border: 2px solid var(--border); background: var(--card-bg); transition: border-color .15s, box-shadow .15s; }
.ob-look input { position: absolute; opacity: 0; pointer-events: none; }
.ob-look.selected { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.ob-look.locked { opacity: .7; cursor: not-allowed; }
.ob-look-shot { position: relative; display: block; aspect-ratio: 1 / 2; border-radius: 12px; overflow: hidden; background: var(--bg-darker); }
.ob-look-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ob-look-shot .ob-mini { position: absolute; inset: 0; }
.ob-look-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 99px; background: rgba(16, 24, 40, .72); color: #fff; font: 700 12.5px var(--s-font); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ob-look-zoom:hover { background: rgba(16, 24, 40, .9); }
.ob-look-tag { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: var(--primary); }
.ob-look-tag.lock { background: rgba(16, 24, 40, .75); }
.ob-look-tag.cur { background: #12b76a; }
.ob-look-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 6px 10px; min-width: 0; }
.ob-look-foot b { display: block; font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-look-foot small { display: block; font-size: 11.5px; color: var(--text-secondary); }
.ob-look-foot > span:first-child { flex: 1 1 auto; min-width: 0; }
.ob-look-pick { flex: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--s-border-strong); background: var(--card-bg); font: 700 12.5px var(--s-font); color: var(--s-text-2); }
.ob-look.selected .ob-look-pick { background: var(--primary); border-color: var(--primary); color: #fff; }
.ob-looks-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--text-secondary); }
@media (max-width: 1100px) { .ob-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 640px) {
    .ob-looks { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ob-look-shot { aspect-ratio: auto; height: min(78vh, 720px); }
    .ob-look-foot b { font-size: 15px; }
    .ob-look-pick { height: 38px; padding: 0 14px; font-size: 13.5px; }
}
.ob-body .tm-modal-box { height: min(860px, calc(100dvh - 24px)); }
.ob-body .tm-modal-foot form { margin: 0; }
.dropdown-setup.is-done { color: var(--text-secondary) !important; font-weight: 500; }

/* Dashboard on phones: the setup card leads; uploading lives in Content ▾ and Shortcuts */
@media (max-width: 768px) {
    .sd-head > .sd-btn-primary[href="content.php"] { display: none; }
}

/* ==========================================================================
   37. Onboarding wizard v2: template-driven "Fill in your page" cards, preview sheet, preview & publish
   ========================================================================== */
.ob-progress-lbl { display: none; margin: 8px 16px 0; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.ob-look-needs { display: block; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-look-name { color: var(--text-primary); }
/* cards */
.ob-cards { display: flex; flex-direction: column; gap: 12px; }
.ob-card { border: 1px solid var(--border); border-radius: 18px; background: var(--card-bg); }
.ob-card[hidden] { display: none; }
.ob-card-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: var(--s-font); color: var(--text-primary); border-radius: 18px; }
.ob-card-head:hover { background: var(--bg-dark); }
.ob-card-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ob-card-ttl { flex: 1; min-width: 0; }
.ob-card-ttl b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.ob-card-ttl small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-card-tag { flex: none; padding: 4px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; background: var(--bg-dark); color: var(--text-secondary); }
.ob-card[data-filled="1"] .ob-card-tag { background: rgba(18, 183, 106, .12); color: #0f8f54; }
.ob-card[data-filled="1"] .ob-card-tag::before { content: '\f00c'; font: 900 10px 'Font Awesome 6 Free'; margin-right: 5px; }
.ob-card-chev { flex: none; font-size: 12px; color: var(--s-text-3); transition: transform .2s; }
.ob-card.collapsed .ob-card-chev { transform: rotate(-90deg); }
.ob-card-body { padding: 2px 16px 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.ob-card.collapsed .ob-card-body { display: none; }
.ob-card-note { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.ob-card-note i { color: var(--primary); margin-right: 4px; }
.ob-card .ob-form:last-child .pe-field:last-child { margin-bottom: 0; }
.ob-card .tf-form .tf-grid { margin-bottom: 0; }
.ob-kicker-fields { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.ob-kicker-fields[hidden] { display: none; }
.ob-cover.pe-cover-zone { margin-bottom: 14px; }
.ob-cover .pe-cover { height: 120px; }
.ob-text-cover[hidden] { display: none; }
.ob-saved-links { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ob-saved-links[hidden] { display: none; }
.ob-saved-links li { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 99px; background: var(--bg-dark); font-size: 12.5px; font-weight: 600; color: var(--text-primary); max-width: 100%; }
.ob-saved-links li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-saved-links li i { color: #12b76a; font-size: 11px; }
.ob-saved-links li.more { color: var(--text-secondary); }
.ob-card .ob-ideas { margin: 0 0 14px; }
.ob-card .ob-more-templates { margin-top: 6px; }
.ob-video-cur { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px; border-radius: 12px; background: var(--bg-dark); }
.ob-video-cur[hidden] { display: none; }
.ob-video-cur img { width: 88px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #111; }
.ob-video-cur b { display: block; font-size: 13.5px; color: var(--text-primary); }
.ob-video-cur small { display: block; font-size: 12px; color: var(--text-secondary); }
/* preview button (phones / tablets only) + full-screen sheet */
.ob-pv-btn { display: none; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border: 1px solid var(--s-border-strong); border-radius: 12px; background: var(--card-bg); font: 700 14px var(--s-font); color: var(--primary); cursor: pointer; }
.ob-pv-btn[hidden] { display: none !important; }
.ob-sheet { position: fixed; inset: 0; z-index: 130; background: rgba(16, 24, 40, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: stretch; justify-content: center; }
.ob-sheet[hidden] { display: none; }
.ob-sheet-box { width: 100%; max-width: 480px; display: flex; flex-direction: column; background: var(--card-bg); }
.ob-sheet-head { flex: none; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border); }
.ob-sheet-head b { font-size: 15px; color: var(--text-primary); }
.ob-sheet-head small { flex: 1; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-sheet-head .pe-crop-x { position: static; }
.ob-sheet-real { flex: 1; position: relative; overflow: hidden; background: #0b0b0f; }
.ob-sheet-foot { flex: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.ob-sheet-foot .sd-btn { width: 100%; }
/* preview & publish */
.ob-final { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; align-items: start; }
.ob-final-phone.pe-phone { width: 100%; max-width: 412px; }
.ob-final-phone .pe-phone-screen { height: 720px; }
.ob-final-side { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 24px; }
.ob-final-side .sd-act { justify-content: flex-start; height: 44px; }
.ob-final-tpl { margin: 0 0 6px; font-size: 13.5px; color: var(--text-secondary); }
.ob-final-tpl b { color: var(--text-primary); }
.ob-final-side .ob-card-note { margin: 10px 0 0; font-size: 12.5px; }
body[data-ob-step="publish"] .ob-layout { grid-template-columns: minmax(0, 1fr); }
body[data-ob-step="publish"] .ob-preview { display: none; }
body[data-ob-step="publish"] .ob-main { max-width: 860px; margin: 0 auto; width: 100%; }
.ob-next.ob-next-publish { background: linear-gradient(135deg, #4f46e5, #a855f7); }
@media (max-width: 860px) {
    .ob-pv-btn { display: inline-flex; }
    .ob-final { grid-template-columns: minmax(0, 1fr); }
    .ob-final-side { position: static; flex-direction: row; flex-wrap: wrap; }
    .ob-final-side .sd-act { flex: 1 1 45%; justify-content: center; }
    .ob-final-tpl, .ob-final-side .ob-card-note { flex-basis: 100%; }
}
@media (max-width: 640px) {
    .ob-progress-lbl { display: block; }
    .ob-card { border-radius: 16px; }
    .ob-card-head { padding: 12px 12px; gap: 10px; }
    .ob-card-body { padding: 12px 12px 14px; }
    .ob-card-ttl b { font-size: 14.5px; }
    .ob-cover.pe-cover-zone { grid-template-columns: minmax(0, 1fr); }
    .ob-pv-btn { padding: 0 12px; }
    .ob-pv-btn span { display: none; }
    .ob-skip { padding: 0 10px; }
    .ob-next { max-width: none; }
    .ob-final-phone.pe-phone { max-width: none; padding: 0; border-radius: 18px; box-shadow: none; background: transparent; }
    .ob-final-phone .pe-phone-screen { height: min(70vh, 640px); border-radius: 18px; border: 1px solid var(--border); }
    .ob-sheet-box { max-width: none; }
}
@media (max-width: 640px) { .ob-step .ob-kicker { display: none; } }
.ob-body .sd-act[hidden], .pe-photo-btns .sd-act[hidden] { display: none !important; }
.ob-skip[hidden], .ob-back[hidden] { display: none; }
.ob-pv-btn { gap: 7px; }
@media (max-width: 640px) {
    .ob-nav { gap: 6px; }
    .ob-back { padding: 0 8px; }
    .ob-pv-btn { width: 44px; padding: 0; justify-content: center; }
    .ob-pv-btn span { display: none; }
    .ob-next { flex: 1 1 auto; min-width: 0; padding-left: 12px; padding-right: 12px; }
    .ob-next span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 640px) { .ob-next { overflow: hidden; } .ob-next span { min-width: 0; flex: 0 1 auto; } }

/* ==========================================================================
   37. Guided wizard (2026-10-03): design checklist, one section at a time, photos, link photos, pre-publish check
   ========================================================================== */
.ob-check { margin: -6px 0 16px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--card-bg); }
.ob-check-head { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; }
.ob-check-head i { margin-left: 6px; font-size: 11px; transition: transform .2s; }
.ob-check:not(.is-open) .ob-check-head i { transform: rotate(-90deg); }
.ob-check:not(.is-open) .ob-check-bar { margin-bottom: 0; }
.ob-check-head b { font-size: 15px; color: var(--text-primary); }
.ob-check-head span { flex: none; font-size: 13px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ob-check-bar { height: 6px; margin: 10px 0 8px; border-radius: 99px; background: var(--bg-dark); overflow: hidden; }
.ob-check-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #a855f7); transition: width .3s; }
.ob-check ul, .ob-missing ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ob-check ul[hidden] { display: none; }
.ob-check li button, .ob-missing li button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 6px; border: 0; border-radius: 10px; background: none; font: 500 14px var(--s-font); color: var(--text-primary); text-align: left; cursor: pointer; }
.ob-check li button:hover, .ob-missing li button:hover { background: var(--bg-dark); }
.ob-check li button:focus-visible, .ob-missing li button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ob-check li i, .ob-missing li i { flex: none; font-size: 17px; color: var(--s-text-3); }
.ob-check li.is-done i { color: #12b76a; }
.ob-check li.is-done span { color: var(--text-secondary); }
.ob-check li span, .ob-missing li span { flex: 1; min-width: 0; }
.ob-check li em, .ob-missing li em { flex: none; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px; color: var(--text-secondary); background: var(--bg-dark); }
.ob-check li.is-todo.is-rec em { color: var(--primary); background: var(--primary-soft); }
.ob-check li.is-done em { color: #067647; background: #dcfae6; }

.ob-guide { margin: 0 0 12px; display: grid; gap: 8px; }
.ob-guide-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ob-guide-count { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--primary); }
.ob-guide-all { border: 0; background: none; font: 600 13px var(--s-font); color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 0; }
.ob-guide-dots { display: flex; gap: 6px; }
.ob-guide-dots i { flex: 1; height: 4px; border-radius: 99px; background: var(--bg-dark); }
.ob-guide-dots i.ok { background: #12b76a; }
.ob-guide-dots i.on { background: var(--primary); }
.ob-guide-tip { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--primary-soft); color: var(--text-primary); font-size: 13.5px; line-height: 1.45; }
.ob-guide-tip::before { content: '\f0eb'; font: 900 13px 'Font Awesome 6 Free'; color: var(--primary); margin-right: 8px; }
.ob-guide-pv { display: none; justify-self: start; }
.ob-guided .ob-card:not(.ob-active) { display: none; }
.ob-guided .ob-card.ob-active .ob-card-chev { display: none; }

.ob-no-followers .ob-fcount, .ob-no-followers .ob-ftoggle { display: none !important; }
.ob-social .ob-fcount { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; }
.ob-social .ob-fcount > label { margin: 0; font-size: 12.5px; white-space: nowrap; }
.ob-social .ob-fcount input { width: 100%; max-width: 160px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--s-border-strong); background: var(--s-input-bg); font: 500 14px var(--s-font); color: var(--text-primary); }
.ob-social .ob-fcount .pe-err { flex-basis: 100%; font-size: 12px; }
.ob-social:not(.filled) .ob-fcount { display: none; }
.ob-ftoggle { margin-top: 14px; }

.ob-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ob-photo-th, .ob-photo-add { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg-dark); }
.ob-photo-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-photo-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed var(--s-border-strong); color: var(--primary); font: 700 12.5px var(--s-font); cursor: pointer; order: -1; }
.ob-photo-add i { font-size: 18px; }
.ob-photos + input + .ob-card-note { margin-top: 10px; }

.ob-saved-links.with-photos { display: grid; gap: 6px; }
.ob-saved-links.with-photos li { display: flex; align-items: center; height: auto; min-height: 52px; padding: 6px 6px 6px 12px; border-radius: 12px; font-size: 13.5px; }
.ob-lthumb[hidden] { display: none !important; }
.ob-lthumb { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 64px; height: 40px; border-radius: 10px; border: 1.5px dashed var(--s-border-strong); background: var(--card-bg); color: var(--primary); font: 700 12px var(--s-font); cursor: pointer; overflow: hidden; padding: 0; }
.ob-saved-links li .ob-lthumb i { color: var(--primary); font-size: 13px; }
.ob-lthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-lthumb:has(img) { border-style: solid; }
.ob-lthumb.busy { opacity: .5; pointer-events: none; }
.ob-lthumb[hidden] { display: none; }

.ob-missing { margin: 4px 0 6px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--card-bg); }
.ob-missing > b { display: block; font-size: 14.5px; color: var(--text-primary); }
.ob-missing > p { margin: 4px 0 8px; font-size: 13px; color: var(--text-secondary); }
.ob-missing li em { color: var(--primary); background: var(--primary-soft); }
.ob-missing.is-alert { border-color: #f79009; box-shadow: 0 0 0 4px rgba(247, 144, 9, .15); }
@media (max-width: 860px) {
    .ob-guide-pv { display: inline-flex; }
}
@media (max-width: 480px) {
    .ob-check { padding: 14px; }
    .ob-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ob-looks-more { margin: 14px auto 0; display: flex; justify-content: center; }
.ob-look[hidden] { display: none; }

.pe-sub-tpl { margin-top: 4px; font-size: 13.5px; }
.pe-sub-tpl i { color: var(--primary); margin-right: 4px; }
.pe-sub-tpl a { font-weight: 600; }