/* VibeDesk platform tokens. Site documents retain their own content/theme. */
@font-face {
    font-family: 'Manrope'; src: url('../fonts/manrope-variable.ttf') format('truetype');
    font-style: normal; font-weight: 200 800; font-display: swap;
}
:root {
    color-scheme: light;
    --font-ui: 'Manrope', system-ui, sans-serif;
    --accent: #ffd600; --accent-hover: #ffe24a; --accent-active: #e0bd00; --accent-contrast: #171600;
    --accent-strong: #756000; --accent-soft: #fff9dc; --accent-line: #d6bb43;
    --accent-selection: #ffe866; --halo: #ffd6000d; --accent-shadow: #ffd60024;
    --yellow: var(--accent); --yellow-dark: var(--accent-strong); --black: #0b0b0b;
    --ink: #191a1c; --muted: #686a70; --line: #e4e5e8; --border: var(--line);
    --surface: #fff; --surface-raised: #f7f8fa; --canvas: #f5f6f8;
    --sidebar: #fff; --soft: #faf9ef; --panel: var(--canvas);
    --accent-dark: var(--accent-strong); --shadow: 0 4px 24px #11182704;
    --error: #a52d30; --error-bg: #fff2f2; --error-line: #e9b6b6;
    --header: #ffffffed;
    font-family: var(--font-ui); color: var(--ink); background: var(--canvas);
    font-synthesis: none;
}
:root[data-vibe-palette='red'] { --accent:#dc2626; --accent-hover:#ef4444; --accent-active:#b91c1c; --accent-contrast:#fff; --accent-strong:#a61b1b; --accent-soft:#fef0f0; --accent-line:#e7a0a0; --accent-selection:#f7a3a3; --halo:#dc26260d; --accent-shadow:#dc26262b; }
:root[data-vibe-palette='blue'] { --accent:#2563eb; --accent-hover:#3b82f6; --accent-active:#1d4ed8; --accent-contrast:#fff; --accent-strong:#1d4ed8; --accent-soft:#eff6ff; --accent-line:#9db9f5; --accent-selection:#a9c4ff; --halo:#2563eb0d; --accent-shadow:#2563eb2b; }
:root[data-vibe-palette='purple'] { --accent:#9333ea; --accent-hover:#a855f7; --accent-active:#7e22ce; --accent-contrast:#fff; --accent-strong:#7921c7; --accent-soft:#f8efff; --accent-line:#cca4ed; --accent-selection:#d6b0f8; --halo:#9333ea0d; --accent-shadow:#9333ea2b; }
:root[data-vibe-palette='green'] { --accent:#15803d; --accent-hover:#16a34a; --accent-active:#166534; --accent-contrast:#fff; --accent-strong:#126b34; --accent-soft:#edf9f1; --accent-line:#9acbaa; --accent-selection:#9edbb2; --halo:#15803d0d; --accent-shadow:#15803d2b; }
:root[data-vibe-palette='orange'] { --accent:#c2410c; --accent-hover:#ea580c; --accent-active:#9a3412; --accent-contrast:#fff; --accent-strong:#a33a0c; --accent-soft:#fff2ea; --accent-line:#e6ad91; --accent-selection:#f2b08d; --halo:#c2410c0d; --accent-shadow:#c2410c2b; }
:root[data-vibe-palette='cyan'] { --accent:#0e7490; --accent-hover:#0891b2; --accent-active:#155e75; --accent-contrast:#fff; --accent-strong:#0b657e; --accent-soft:#e9f8fb; --accent-line:#91c7d3; --accent-selection:#94d5e2; --halo:#0e74900d; --accent-shadow:#0e74902b; }
:root[data-vibe-palette='pink'] { --accent:#db2777; --accent-hover:#ec4899; --accent-active:#be185d; --accent-contrast:#fff; --accent-strong:#b51e61; --accent-soft:#fff0f6; --accent-line:#e9a2bf; --accent-selection:#f5afcc; --halo:#db27770d; --accent-shadow:#db27772b; }
:root[data-vibe-theme='dark'] {
    color-scheme: dark;
    --ink: #f2f2f3; --muted: #a0a1a8; --line: #292a2d; --border: var(--line);
    --surface: #111214; --surface-raised: #191a1d; --canvas: #080808;
    --sidebar: #0d0e10; --soft: #191911; --panel: var(--canvas);
    --accent-strong: #e4ca48; --accent-soft: #211f12; --accent-line: #635821; --halo: #ffd6000c;
    --accent-dark: var(--accent-strong); --yellow-dark: var(--accent-strong); --shadow: 0 6px 24px #00000018;
    --error: #ffb4b5; --error-bg: #30191b; --error-line: #754045;
    --header: #0e0f11ed;
}
:root[data-vibe-theme='dark'][data-vibe-palette='red'] { --accent-strong:#ff8383; --accent-soft:#2b1719; --accent-line:#743434; --halo:#dc26260c; }
:root[data-vibe-theme='dark'][data-vibe-palette='blue'] { --accent-strong:#8ab4ff; --accent-soft:#141d32; --accent-line:#334f82; --halo:#2563eb0c; }
:root[data-vibe-theme='dark'][data-vibe-palette='purple'] { --accent-strong:#c896ff; --accent-soft:#25162f; --accent-line:#633788; --halo:#9333ea0c; }
:root[data-vibe-theme='dark'][data-vibe-palette='green'] { --accent-strong:#6ee79a; --accent-soft:#12281a; --accent-line:#356d47; --halo:#15803d0c; }
:root[data-vibe-theme='dark'][data-vibe-palette='orange'] { --accent-strong:#ff9a62; --accent-soft:#2b1b13; --accent-line:#81492d; --halo:#c2410c0c; }
:root[data-vibe-theme='dark'][data-vibe-palette='cyan'] { --accent-strong:#67d5ec; --accent-soft:#10262b; --accent-line:#306b78; --halo:#0e74900c; }
:root[data-vibe-theme='dark'][data-vibe-palette='pink'] { --accent-strong:#ff86b9; --accent-soft:#2d1722; --accent-line:#7c3555; --halo:#db27770c; }
body { font-family: var(--font-ui); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font-family: inherit; }
::selection { background: var(--accent-selection); color: var(--ink); }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 4px; }
:where(button,a) { -webkit-tap-highlight-color: transparent; }
:where(button,a,input,textarea,select) { transition: background-color .16s, border-color .16s, box-shadow .16s, transform .16s; }
.brand, .editor-brand, .mobile-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--font-ui); font-weight: 800; letter-spacing: -.055em; text-decoration: none; white-space: nowrap; }
.brand { font-size: 24px; }
.brand-symbol {
    display: block; width: 36px; height: 36px; flex: 0 0 36px;
    background: var(--accent);
    -webkit-mask: url('../logo/vibedesk-symbol.svg') center / contain no-repeat;
    mask: url('../logo/vibedesk-symbol.svg') center / contain no-repeat;
    filter: drop-shadow(0 2px 7px var(--accent-shadow));
}
.brand .brand-name, .editor-brand .brand-name, .brand > span:last-child, .mobile-brand strong { color: inherit; }
.brand > span:last-child > span { color: inherit; }
.workspace { min-width: 0; background: radial-gradient(ellipse 800px 500px at 90% 0%, var(--halo), transparent 75%), var(--canvas); }
.dashboard-main, .internal-main { background: transparent; }
.sidebar { background: var(--sidebar); color: var(--ink); border-right: 1px solid var(--line); padding: 25px 12px 18px; }
.sidebar-top { padding-bottom: 24px; }
.side-nav p { color: var(--muted); font-size: 9px; letter-spacing: .14em; margin-top: 22px; margin-bottom: 9px; }
.side-nav a, .side-nav button, .sidebar-bottom > a, .sidebar-bottom button { color: var(--muted); min-height: 40px; border-radius: 9px; font-size: 12px; gap: 12px; }
.side-nav a > span, .side-nav button > span, .sidebar-bottom > a > span, .sidebar-bottom button > span { color: inherit; }
.side-nav a:hover, .side-nav button:hover, .sidebar-bottom > a:hover, .sidebar-bottom button:hover { background: var(--accent-soft); color: var(--ink); }
.side-nav a.active, .side-nav a.active:hover { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 3px 14px var(--accent-shadow); }
.sidebar-bottom { border-color: var(--line); padding-top: 12px; }
.sidebar-close { color: var(--ink); }
.topbar { background: var(--header); border-color: var(--line); height: 74px; }
.crumb, .topbar-back { color: var(--muted); }
.crumb span { color: var(--muted); }
.top-actions > button:not(.account-button), .platform-theme-toggle { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; min-height: 36px; }
.platform-theme-toggle { width: auto !important; min-width: 88px; padding: 7px 12px !important; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.top-actions > button:not(.account-button):hover, .platform-theme-toggle:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.account-button { color: var(--ink); }
.avatar { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent-line); }
.dashboard-main { padding-top: 42px; }
.welcome { gap: 24px; }
.welcome h1, .internal-hero h1 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.2; letter-spacing: -.055em; }
.welcome p:not(.eyebrow), .internal-hero p:not(.eyebrow) { line-height: 1.7; }
.eyebrow, .panel-eyebrow { color: var(--accent-dark); letter-spacing: .15em; }
.section-title h2, .two-columns h2, .integrations h2 { line-height: 1.3; letter-spacing: -.045em; }
.overview { gap: 14px; }
.overview article { min-width: 0; min-height: 116px; border-color: var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); align-items: flex-start; padding: 20px 16px; }
.overview strong { color: var(--ink); font-size: 26px; font-weight: 800; margin: 6px 0 2px; line-height: 1.2; }
.overview small, .overview em { color: var(--muted); }
.overview small { font-size: 9px; }
.overview em { line-height: 1.5; }
.overview-icon { flex-shrink: 0; width: 34px; height: 34px; background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent-line); border-radius: 10px; }
.sites-section, .quick-section, .themes-section, .activity-section, .editor-card, .domain-card, .management article, .internal-card, .site-card {
    background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow);
}
.sites-section, .quick-section, .themes-section, .activity-section { padding: 30px; margin-top: 24px; }
.overview article, .site-card, .quick-grid a { transition: border-color .16s, box-shadow .16s, transform .16s; }
.overview article:hover, .site-card:hover { border-color: var(--accent-line); box-shadow: 0 4px 24px var(--accent-soft); }
.primary-button, .outline-button, .dark-button, .text-button { min-height: 42px; border-radius: 9px; }
.primary-button, .submit-button, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); box-shadow: 0 4px 16px var(--accent-shadow); }
.primary-button:hover, .submit-button:hover, .button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 5px 20px var(--accent-shadow); transform: translateY(-1px); }
.primary-button:active, .submit-button:active, .button.primary:active { background: var(--accent-active); border-color: var(--accent-active); }
.outline-button, .button, .editor-actions .button:not(.primary), .integrations .outline-button { background: var(--surface); border-color: var(--line); color: var(--ink); }
.outline-button:hover, .button:hover, .editor-actions .button:hover:not(.primary), .integrations .outline-button:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.dark-button { background: var(--ink); color: var(--surface); }
.dark-button:hover { background: var(--accent); color: var(--accent-contrast); }
.empty-site { background: var(--soft); border-color: var(--accent-line); padding: 28px; border-radius: 12px; }
.empty-illustration, .editor-mini { background: var(--surface-raised); border-color: var(--accent-line); }
.site-sketch { background: var(--accent-soft); }
.site-sketch i, .site-sketch b { background: var(--muted); }
.quick-grid { gap: 12px; }
.quick-grid a { background: var(--surface); border-color: var(--line); border-radius: 11px; padding: 19px; min-height: 112px; }
.quick-grid a:hover { background: var(--accent-soft); border-color: var(--accent-line); transform: translateY(-2px); }
.quick-grid span { color: var(--accent-dark); }
.quick-grid b { font-size: 13px; }
.quick-grid small { font-size: 11px; line-height: 1.5; }
.editor-card { background: radial-gradient(ellipse at 100% 100%, var(--accent-soft), transparent 80%), var(--surface); }
.editor-card > p, .editor-card > h2, .editor-card > a { position: relative; z-index: 1; }
.editor-mini { opacity: .55; pointer-events: none; }
.editor-mini > span, .waiting, .back-link { color: var(--accent-dark); }
.role, .activity-icon.muted { background: var(--surface-raised); color: var(--muted); }
.role.admin, .activity-icon, .placeholder-icon, .dialog-icon, .site-status { background: var(--accent-soft); color: var(--accent-dark); }
.activity-section small, .activity-list time { color: var(--muted); }
.integrations { border: 1px solid var(--accent-line); background: radial-gradient(ellipse at 100% 100%,var(--accent-soft),transparent 70%), var(--surface); color: var(--ink); }
.integrations p:not(.eyebrow) { color: var(--muted); }
.integrations .eyebrow { color: var(--accent-dark); }
.site-card-art { background: var(--surface-raised); }
.site-card-art span { color: var(--accent-dark); }
.site-card-art i { background: var(--line); }
.site-card-art i:last-child { background: var(--accent); }
.setup-grid label { color: var(--ink); }
.setup-grid input, .setup-grid textarea { color: var(--ink); background: var(--surface-raised); border-color: var(--line); border-radius: 9px; min-height: 44px; font-size: 13px; }
.setup-grid aside { background: var(--soft); border: 1px solid var(--accent-line); }
.site-alert, .alert-error { background: var(--error-bg); color: var(--error); border-color: var(--error-line); }
.feature-dialog, dialog, .template-library, .template-preview-dialog { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
dialog p { color: var(--muted); }
dialog::backdrop { background: #08080899; backdrop-filter: blur(3px); }
/* Editor chrome; the authored website and template previews are intentionally scoped out. */
.editor-body, .preview-body { background: var(--canvas); color: var(--ink); }
.editor-top, .preview-bar { background: var(--header); color: var(--ink); border-bottom: 1px solid var(--line); }
.editor-top { gap: 20px; }
.editor-brand { display: inline-flex; font-size: 22px; }
.editor-brand span { color: inherit; }
.project-heading > span, #save-status, .preview-bar small, .canvas-toolbar b { color: var(--muted); }
#save-status.error { color: var(--error); }
.element-panel, .properties-panel { background: var(--surface); border-color: var(--line); color: var(--ink); }
.canvas-workspace { background: radial-gradient(ellipse at 50% 0%,var(--halo),transparent 65%),var(--canvas); }
.canvas-toolbar { border-color: var(--line); }
.canvas-tip, .panel-note, .editor-back { color: var(--muted); }
.element-buttons button, .preset-button { background: var(--surface-raised); color: var(--ink); border-color: var(--line); border-radius: 9px; }
.element-buttons button span { color: var(--accent-dark); }
.element-buttons button:hover, .preset-button:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.property-field, .visual-panel .property-field { color: var(--muted); }
.property-field input, .property-field textarea, .property-field select { background: var(--surface-raised); color: var(--ink); border-color: var(--line); border-radius: 8px; }
.property-field input:focus, .property-field textarea:focus, .property-field select:focus { border-color: var(--accent-line); }
.current-page { background: var(--accent-soft); color: var(--ink); border: 1px solid var(--accent-line); }
.current-page span { color: var(--accent-dark); }
.device-switch, .preview-bar .device-switch { background: var(--surface); border-color: var(--line); }
.device-switch button { color: var(--muted); }
.device-switch button[aria-pressed=true] { background: var(--accent); color: var(--accent-contrast); font-weight: 800; }
.add-section-bottom { color: var(--muted); border-color: var(--accent-line); }
.add-section-bottom:hover { background: var(--accent-soft); }
.button.danger { color: var(--error); }
/* Selection actions belong to the VibeDesk interface, not the authored site. */
.properties-panel .context-toolbar {
    background: var(--surface-raised);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.properties-panel .context-toolbar button {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
}
.properties-panel .context-toolbar button:hover {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--ink);
}
.properties-panel .context-toolbar button:active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
    transform: translateY(1px);
}
.properties-panel .context-toolbar button:focus-visible {
    outline: 3px solid var(--accent-dark);
    outline-offset: 2px;
}
.properties-panel .context-toolbar button.danger {
    color: var(--error);
}
.properties-panel .context-toolbar button.danger:hover {
    background: var(--error-bg);
    border-color: var(--error-line);
    color: var(--error);
}
.properties-panel .context-toolbar button.danger:active {
    background: var(--error);
    border-color: var(--error);
    color: var(--surface);
}
.template-card { background: var(--surface-raised); border-color: var(--line); }
.template-card p { color: var(--muted); }
.template-category { color: var(--accent-dark); }
.visual-group { border-color: var(--line); }
.visual-group input[type=range], .contrast-option input, .section-spacing input[type=range] { accent-color: var(--accent); }
.preset-button:hover { border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--accent-soft); }
.site-base-picker input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-shadow); background: var(--accent-soft); color: var(--ink); }
.site-base-picker input:focus-visible + span { outline: 3px solid var(--accent-strong); }
.editor-page-link { color: var(--ink); }
.editor-page-link:hover, .editor-page-link.is-current { border-color: var(--accent-line); background: var(--accent-soft); }
.editor-page-link span { color: var(--muted); }
.editable-section.selected { border-color: var(--accent); }
.editable-block.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-shadow); }
.editable-section:hover > .section-handle, .editable-section.selected > .section-handle,
.move-handle, .resize-handle, .personalize-handle, .section-personalize-handle,
.section-move-handle, .layer-order-handle, .element-effects-handle { background: var(--accent); color: var(--accent-contrast); }
.section-move-handle:hover, .layer-order-handle:hover, .element-effects-handle:hover,
.move-handle:hover, .personalize-handle:hover, .section-personalize-handle:hover { background: var(--accent-hover); color: var(--accent-contrast); }
.section-move-handle:active, .layer-order-handle:active, .element-effects-handle:active,
.move-handle:active, .personalize-handle:active, .section-personalize-handle:active { background: var(--accent-active); color: var(--accent-contrast); }
.section-move-menu, .layer-order-menu, .element-effects-menu { border-color: var(--line); background: var(--surface); color: var(--ink); }
.layer-item-select { color: var(--ink); }
.section-move-option, .layer-order-row, .layer-order-step, .element-effect-choice { border-color: var(--line); background: var(--surface-raised); color: var(--ink); }
.section-move-option:hover:not(:disabled), .layer-item-select:hover,
.layer-order-step:hover:not(:disabled), .element-effect-choice:hover, .element-effect-choice.active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.section-move-option:disabled, .layer-order-menu > p, .element-effects-menu > p { color: var(--muted); }
.resize-handle { border-color: var(--accent-contrast); }
.alignment-guide { background: var(--accent); }
.drop-zone.active, .section-drop-zone.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.inline-editing { outline-color: var(--accent) !important; background: var(--accent-soft); }
.context-tip { border-left-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.section-option { background: var(--surface-raised); color: var(--ink); border-color: var(--line); }
.section-option:hover { border-color: var(--accent-line); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-shadow); }
.section-option small { color: var(--muted); }
.vibe-confirmation { border-color: var(--line); background: var(--surface); color: var(--ink); }
.vibe-confirmation-icon { background: var(--accent-soft); color: var(--accent-strong); }
.vibe-confirmation p { color: var(--muted); }
.vibe-confirmation-actions button { border-color: var(--line); background: var(--surface-raised); color: var(--ink); }
.vibe-confirmation-actions button:hover { background: var(--accent-soft); }
.vibe-confirmation-actions [data-confirmation-confirm] { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }
.vibe-confirmation-actions [data-confirmation-confirm]:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.error-page .editor-brand { color: var(--ink); }
.error-page p { color: var(--muted); }
/* VibeDesk color themes. These controls never target .site-document. */
.platform-theme-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; scroll-margin-top: 100px; }
.platform-theme-intro h2 { margin: 4px 0 7px; font-size: 23px; letter-spacing: -.045em; }
.platform-theme-intro > div:first-child > p:last-child { max-width: 620px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.platform-theme-current { flex: 0 0 210px; padding: 14px 16px; border: 1px solid var(--accent-line); border-radius: 11px; background: var(--accent-soft); }
.platform-theme-current span, .platform-theme-current strong, .platform-theme-current small { display: block; }
.platform-theme-current span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.platform-theme-current strong { margin: 4px 0; font-size: 13px; }
.platform-theme-current small { color: var(--muted); font-size: 10px; }
.platform-theme-current small b { color: var(--accent-strong); }
.platform-theme-notice { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); }
.platform-theme-notice > span { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-strong); }
.platform-theme-notice p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.platform-theme-notice strong { color: var(--ink); }
.color-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.color-theme-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); transition: border-color .16s, box-shadow .16s, transform .16s; }
.color-theme-card:hover { transform: translateY(-2px); border-color: var(--theme-primary); box-shadow: 0 8px 24px var(--accent-soft); }
.color-theme-card.is-active { border-color: var(--theme-primary); box-shadow: 0 0 0 2px var(--theme-primary), 0 8px 24px var(--accent-soft); }
.color-theme-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 45px; }
.color-theme-card h3 { margin: 0; font-size: 14px; letter-spacing: -.025em; }
.color-theme-card-heading p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.color-theme-status { flex-shrink: 0; padding: 5px 7px; border-radius: 999px; background: var(--theme-primary); color: var(--theme-contrast); font-size: 8px; font-weight: 800; }
.color-theme-preview { display: grid; grid-template-columns: 56px 1fr; height: 100px; margin: 14px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); }
.color-theme-preview-sidebar { display: flex; flex-direction: column; gap: 8px; padding: 17px 12px; background: var(--theme-secondary); }
.color-theme-preview-sidebar i { display: block; width: 30px; height: 5px; border-radius: 5px; background: #ffffff4a; }
.color-theme-preview-sidebar i:first-child { height: 12px; background: var(--theme-primary); }
.color-theme-preview-content { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; padding: 17px; background: linear-gradient(135deg, var(--surface), var(--surface-raised)); }
.color-theme-preview-content > i { position: absolute; top: 13px; right: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--theme-primary); }
.color-theme-preview-content > b { color: var(--ink); font-size: 12px; }
.color-theme-preview-content > em { padding: 6px 10px; border-radius: 6px; background: var(--theme-primary); color: var(--theme-contrast); font-size: 8px; font-style: normal; font-weight: 800; }
.color-theme-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.color-theme-footer .outline-button { min-height: 34px; padding: 0 12px; }
.color-theme-footer .outline-button:disabled { opacity: 1; cursor: default; border-color: var(--theme-primary); background: var(--theme-primary); color: var(--theme-contrast); }
.color-theme-swatches { display: inline-flex; align-items: center; padding-left: 6px; }
.color-theme-swatches i { display: block; width: 23px; height: 23px; margin-left: -6px; border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.color-theme-swatches .primary { background: var(--theme-primary); }
.color-theme-swatches .secondary { background: var(--theme-secondary); }
.platform-theme-summary { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.platform-theme-summary-preview { position: relative; flex: 0 0 82px; width: 82px; height: 58px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.platform-theme-summary-preview i { position: absolute; inset: 0 auto 0 0; width: 23px; background: var(--black); }
.platform-theme-summary-preview span { position: absolute; top: 12px; left: 34px; width: 35px; height: 6px; border-radius: 5px; background: var(--line); }
.platform-theme-summary-preview b { position: absolute; bottom: 11px; left: 34px; width: 27px; height: 12px; border-radius: 4px; background: var(--accent); }
.platform-theme-summary > div:nth-child(2) { min-width: 0; flex: 1; }
.platform-theme-summary small, .platform-theme-summary strong, .platform-theme-summary > div:nth-child(2) > span { display: block; }
.platform-theme-summary small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.platform-theme-summary strong { margin: 4px 0 2px; font-size: 13px; }
.platform-theme-summary > div:nth-child(2) > span { color: var(--muted); font-size: 10px; }
/* Keep inherited platform typography from changing saved website presentation. */
.site-document { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color-scheme: light; }
/* Authentication shares the same palette, including the presentation panel. */
.brand-panel { background: radial-gradient(ellipse at 25% 70%,var(--accent-soft),transparent 70%),var(--sidebar); color: var(--ink); border-right: 1px solid var(--line); }
.brand-panel::before, .brand-panel::after { border-color: var(--accent-line); opacity: .35; }
.brand-copy h1 { font-size: clamp(46px, 5.4vw, 78px); line-height: 1.06; }
.brand-copy h1 em { color: var(--accent-dark); }
.brand-copy > p:last-child, .brand-footer p { color: var(--muted); }
.brand-footer { border-color: var(--line); }
.brand-footer strong { color: var(--ink); }
.brand-copy .eyebrow { color: var(--accent-dark); }
.avatars span { border-color: var(--sidebar); background: var(--accent); }
.form-panel { position: relative; background: radial-gradient(ellipse at 90% 0%,var(--halo),transparent 60%),var(--surface); }
.auth-theme-toggle { align-self: flex-end; margin-bottom: 25px; }
.input-wrap input { background: var(--surface-raised); color: var(--ink); border-color: var(--line); }
.input-wrap input:focus { background: var(--surface); border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.input-wrap input::placeholder { color: var(--muted); opacity: .8; }
.input-wrap > svg, .password-toggle svg { stroke: var(--muted); }
.password-toggle:hover { background: var(--accent-soft); }
.form-panel footer { color: var(--muted); }
.alert-info { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-line); }
.login-card h2 { line-height: 1.25; }
/* Replaces font glyphs with consistent local outline icons. */
.vibe-icon { display: inline-block; width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0; }
@media(min-width:1100px) { .editor-top { min-height: 82px; }.element-panel,.properties-panel { top: 82px; max-height: calc(100vh - 82px); min-height: calc(100vh - 82px); } }
@media(max-width:1190px) { .editor-top { gap: 12px; }.editor-brand { font-size: 19px; }.editor-brand .brand-symbol { width: 30px; height: 30px; flex-basis: 30px; } }
@media(max-width:760px) {
    .topbar { height: 64px; padding: 0 18px; }
    .top-actions .platform-theme-toggle { display: inline-grid !important; min-width: 78px; padding: 0 8px !important; }
    .dashboard-main { padding: 28px 18px 44px; }
    .welcome { flex-wrap: wrap; gap: 18px; }
    .welcome .primary-button { flex-shrink: 0; }
    .overview article { min-height: 105px; padding: 16px 12px; }
    .sites-section, .quick-section, .themes-section, .activity-section { padding: 22px 18px; }
    .section-title > a { margin-top: 16px; }
    .quick-grid a { padding: 15px; }
    .empty-site { padding: 20px; }
    .editor-mini { opacity: .2; }
    .domain-line { flex-wrap: wrap; }
    .section-title h2 { font-size: 21px; }
    .dialog-actions { flex-wrap: wrap; }
    .platform-theme-intro { align-items: stretch; flex-direction: column; }
    .platform-theme-current { flex-basis: auto; }
    .color-theme-grid { grid-template-columns: 1fr; }
    .platform-theme-summary { align-items: flex-start; flex-wrap: wrap; }
    .platform-theme-summary .outline-button { width: 100%; }
}
@media(max-width:600px) {
    .editor-top .editor-brand .brand-name { display: none; }
    .editor-top { gap: 12px; }
    .editor-actions { justify-content: flex-start; }
    .editor-actions .button { min-height: 40px; }
    .element-panel details { width: 48%; }
    .preview-bar .brand-name { display: none; }
    .auth-theme-toggle { margin-bottom: 18px; }
    .mobile-brand { margin-top: 4px; }
}
@media(prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.mobile-brand { display: none; }
@media(max-width:860px) { .mobile-brand { display: inline-flex; } }
.welcome h1 > span { display: inline-block; width: 22px; height: 22px; margin-left: 5px; vertical-align: middle; background: var(--accent); -webkit-mask: url('../logo/vibedesk-symbol.svg') center / contain no-repeat; mask: url('../logo/vibedesk-symbol.svg') center / contain no-repeat; font-size: 0; }