/* PenPilot appearances. Shared directly with the React bundle.
   Glass styles are enabled only for classic palettes by appearance.js.
   !important is limited to Bootstrap utilities and existing inline colors. */

:root[data-appearance] {
    --pp-bg: #f2f5fa;
    --pp-surface: #ffffff;
    --pp-soft: #f5f7fb;
    --pp-text: #1a2538;
    --pp-muted: #59677a;
    --pp-border: #d6deea;
    --pp-accent: #2455c7;
    --pp-accent-hover: #1943a3;
    --pp-accent-soft: #eaf0ff;
    --pp-on-accent: #ffffff;
    --pp-nav: #ffffff;
    --pp-nav-text: #1a2538;
    --pp-radius: 10px;
    --pp-control-radius: 6px;
    --pp-shadow: 0 3px 14px #172b4d08;
    --pp-heading: 'Segoe UI', system-ui, sans-serif;
    --pp-reading: 'Segoe UI', system-ui, sans-serif;
    --pp-success: #187044;
    --pp-success-soft: #eaf5ee;
    --pp-danger: #b12c3a;
    --pp-danger-soft: #fff0f1;
    --pp-warning: #805b08;
    --pp-warning-soft: #fff6dc;
    --pp-info: #126582;
    --pp-info-soft: #eaf6fb;
}

:root[data-appearance="editorial"] {
    --pp-bg: #f0ede6;
    --pp-surface: #fffdf8;
    --pp-soft: #f5f1e8;
    --pp-text: #302b27;
    --pp-muted: #6c6259;
    --pp-border: #d8d0c1;
    --pp-accent: #8b3347;
    --pp-accent-hover: #6d2536;
    --pp-accent-soft: #f5e8e9;
    --pp-nav: #fffdf8;
    --pp-nav-text: #302b27;
    --pp-radius: 2px;
    --pp-control-radius: 3px;
    --pp-shadow: 0 4px 0 #d8d0c15c;
    --pp-heading: 'Iowan Old Style', 'Palatino Linotype', 'Noto Serif CJK SC', Georgia, serif;
    --pp-reading: 'Iowan Old Style', 'Palatino Linotype', 'Noto Serif CJK SC', Georgia, serif;
}

:root[data-appearance="atelier"] {
    --pp-bg: #f3e9d8;
    --pp-surface: #fffcf5;
    --pp-soft: #f8f0e3;
    --pp-text: #203d36;
    --pp-muted: #596a60;
    --pp-border: #d9cdb8;
    --pp-accent: #a44720;
    --pp-accent-hover: #853818;
    --pp-accent-soft: #fbe9da;
    --pp-nav: #203d36;
    --pp-nav-text: #fff8e9;
    --pp-radius: 24px;
    --pp-control-radius: 12px;
    --pp-shadow: 0 8px 24px #55462e0a;
    --pp-heading: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
}

:root[data-appearance="nocturne"] {
    --pp-radius: 14px;
    --pp-control-radius: 8px;
    --pp-accent: #176b70;
    --pp-accent-hover: #0e5458;
    --pp-accent-soft: #e2f4f2;
    --pp-heading: 'Segoe UI', system-ui, sans-serif;
}

/* Every appearance supports the existing light/dark control. */
:root[data-appearance][data-theme="dark"] {
    --pp-bg: #10151f;
    --pp-surface: #19212e;
    --pp-soft: #202b3b;
    --pp-text: #e5edf6;
    --pp-muted: #acb9c9;
    --pp-border: #364459;
    --pp-accent: #9fbdff;
    --pp-accent-hover: #c4d7ff;
    --pp-accent-soft: #263c61;
    --pp-on-accent: #111d30;
    --pp-nav: #141c28;
    --pp-nav-text: #e5edf6;
    --pp-shadow: 0 8px 24px #0000001a;
    --pp-success: #8bd9b0;
    --pp-success-soft: #193e30;
    --pp-danger: #ffabb4;
    --pp-danger-soft: #482630;
    --pp-warning: #efd086;
    --pp-warning-soft: #423922;
    --pp-info: #8bd6ed;
    --pp-info-soft: #193d4b;
}

:root[data-appearance="editorial"][data-theme="dark"] {
    --pp-bg: #211e1e;
    --pp-surface: #2d2727;
    --pp-soft: #362f2f;
    --pp-text: #f1e8df;
    --pp-muted: #c5b7ac;
    --pp-border: #554747;
    --pp-accent: #f2acb6;
    --pp-accent-hover: #fbd2d8;
    --pp-accent-soft: #513039;
    --pp-nav: #292323;
    --pp-nav-text: #f1e8df;
}

:root[data-appearance="atelier"][data-theme="dark"] {
    --pp-bg: #172721;
    --pp-surface: #22392f;
    --pp-soft: #2b4439;
    --pp-text: #f3efdf;
    --pp-muted: #b7c6ba;
    --pp-border: #486050;
    --pp-accent: #f6bc87;
    --pp-accent-hover: #ffdab8;
    --pp-accent-soft: #53422c;
    --pp-nav: #162c23;
    --pp-nav-text: #f3efdf;
}

:root[data-appearance="nocturne"][data-theme="dark"] {
    --pp-bg: #101820;
    --pp-surface: #192630;
    --pp-soft: #20323e;
    --pp-border: #364d5a;
    --pp-accent: #87dad0;
    --pp-accent-hover: #b2eee6;
    --pp-accent-soft: #214842;
    --pp-nav: #14212b;
}

/* A compact native picker stays usable with keyboards and mobile browsers. */
.appearance-controls {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-inline: .65rem;
}
.appearance-label { display: flex; align-items: center; gap: .4rem; font-size: .875rem; white-space: nowrap; }
.appearance-select.form-select { width: 10.25rem; min-width: 0; font-size: .875rem; padding-block: .5rem; }
.appearance-mode.btn { min-width: 2.5rem; min-height: 2.5rem; padding: .4rem .65rem; }
.appearance-mode[aria-pressed="true"] { box-shadow: inset 0 0 0 2px currentColor; }

[data-appearance] body {
    background: var(--pp-bg);
    color: var(--pp-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    min-height: 100vh;
}
[data-appearance] .liquid-orbs { display: none; }
[data-appearance] :is(h1, h2, h3, h4, h5, h6, .navbar-brand) { font-family: var(--pp-heading); color: var(--pp-text); }
[data-appearance] :is(h4, h5, h6) { line-height: 1.35; }
[data-appearance] a { color: var(--pp-accent); }
[data-appearance] a:hover { color: var(--pp-accent-hover); }
[data-appearance] :is(.text-muted, .form-text, .landing-subtitle, .empty-state, .session-meta, .block-number, .variant-word-count, .comment-header, .stat-label) { color: var(--pp-muted) !important; }
[data-appearance] :is(.text-dark, .session-title, .comment-author, .empty-state h5) { color: var(--pp-text) !important; }
[data-appearance] :is(.text-primary, .stat-value, .log-verb) { color: var(--pp-accent) !important; }
[data-appearance] :is(.text-success, .log-actor) { color: var(--pp-success) !important; }
[data-appearance] :is(.text-danger, .label-required) { color: var(--pp-danger) !important; }
[data-appearance] .text-warning { color: var(--pp-warning) !important; }
[data-appearance] .text-info { color: var(--pp-info) !important; }
[data-appearance] .border { border-color: var(--pp-border) !important; }
[data-appearance] :is(.bg-light, .bg-white) { background: var(--pp-soft) !important; color: var(--pp-text); }
[data-appearance] :is(.small, small, .btn-sm, .form-control-sm, .form-select-sm) { font-size: .875rem; }
[data-appearance] .badge { font-size: .8125rem; font-weight: 600; line-height: 1.3; }
[data-appearance] :is(.badge.bg-primary, .role-badge.author) { background: var(--pp-accent-soft) !important; color: var(--pp-accent); }
[data-appearance] .badge.bg-secondary { background: var(--pp-soft) !important; color: var(--pp-muted); }
[data-appearance] :is(.badge.bg-success, .badge-active) { background: var(--pp-success-soft) !important; color: var(--pp-success); }
[data-appearance] .badge.bg-info { background: var(--pp-info-soft) !important; color: var(--pp-info); }
[data-appearance] .badge.bg-warning { background: var(--pp-warning-soft) !important; color: var(--pp-warning) !important; }
[data-appearance] .badge.bg-danger { background: var(--pp-danger-soft) !important; color: var(--pp-danger); }

/* Chrome and workspace rhythm. */
[data-appearance] .navbar {
    background: var(--pp-nav) !important;
    color: var(--pp-nav-text);
    border-bottom: 1px solid var(--pp-border);
    padding: .8rem 1.25rem;
}
[data-appearance] .navbar :is(.navbar-brand, .nav-link, .appearance-label) { color: var(--pp-nav-text); }
[data-appearance] .navbar-brand { font-size: 1.375rem; font-weight: 700; letter-spacing: -.025em; }
[data-appearance] .navbar-brand i { margin-inline-end: .45rem; }
[data-appearance] .navbar .nav-link:hover { opacity: .75; }
[data-appearance] .navbar-toggler { color: var(--pp-nav-text); border-color: currentColor; }
[data-appearance][data-theme="light"] .navbar-toggler-icon { filter: brightness(0); }
[data-appearance="atelier"][data-theme="light"] .navbar-toggler-icon { filter: none; }
[data-appearance] body > .container-fluid,
[data-appearance] #root > .container-fluid { max-width: 1720px; padding: 1.5rem; margin-top: 0 !important; }
[data-appearance] :is(.card, .stat-card, .session-card) {
    background: var(--pp-surface);
    color: var(--pp-text);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow);
    margin-bottom: 1.25rem;
}
[data-appearance] .card-header {
    background: var(--pp-surface) !important;
    color: var(--pp-text) !important;
    border-bottom: 1px solid var(--pp-border);
    border-radius: var(--pp-radius) var(--pp-radius) 0 0 !important;
    padding: 1.1rem 1.4rem;
}
[data-appearance] .card-header :is(h4, h5, h6) { margin-bottom: 0; }
[data-appearance] .card-body { padding: 1.4rem; }
[data-appearance] .card-footer { background: var(--pp-soft); border-color: var(--pp-border); }
[data-appearance] .workspace-sidebar .card { box-shadow: none; }
[data-appearance] .workspace-sidebar .card-header { background: transparent !important; border-bottom: 0; }
[data-appearance] .workspace-sidebar .card-header h5 { font-family: inherit; font-size: .875rem; color: var(--pp-muted); }
[data-appearance] .workspace-sidebar .list-group { padding: .3rem .6rem .7rem; gap: .2rem; }
[data-appearance] .list-group-item {
    background: transparent;
    color: var(--pp-text);
    border-color: var(--pp-border);
    padding: .7rem .8rem;
    font-size: .9375rem;
    border-radius: var(--pp-control-radius);
    transition: background-color .15s;
}
[data-appearance] .list-group-item:hover { background: var(--pp-soft); color: var(--pp-accent); }
[data-appearance] .list-group-item.active { background: var(--pp-accent-soft); color: var(--pp-accent); border-color: var(--pp-accent); font-weight: 600; }
[data-appearance] .list-group-item i { margin-inline: 0 .6rem; }

/* Inputs, buttons, and their focus/disabled/selected states. */
[data-appearance] .btn {
    border-radius: var(--pp-control-radius);
    font-weight: 600;
    padding: .6rem 1rem;
    line-height: 1.4;
    box-shadow: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
[data-appearance] .btn-sm,
[data-appearance] .btn-group-sm > .btn { padding: .4rem .65rem; font-size: .875rem; }
[data-appearance] .btn-lg { padding: .8rem 1.35rem; font-size: 1rem; }
[data-appearance] :is(.btn-primary, .landing-cta) { background: var(--pp-accent); border-color: var(--pp-accent); color: var(--pp-on-accent); }
[data-appearance] :is(.btn-primary, .landing-cta):is(:hover, :active, :focus) { background: var(--pp-accent-hover); border-color: var(--pp-accent-hover); color: var(--pp-on-accent); transform: none; }
[data-appearance] :is(.btn-outline-primary, .btn-link) { color: var(--pp-accent); border-color: var(--pp-accent); background: transparent; }
[data-appearance] .btn-link { border-color: transparent; }
[data-appearance] .btn-outline-primary:is(:hover, :active, .active) { background: var(--pp-accent); color: var(--pp-on-accent); }
[data-appearance] :is(.btn-outline-secondary, .btn-outline-light, .appearance-mode) { background: var(--pp-surface); color: var(--pp-muted); border-color: var(--pp-border); }
[data-appearance] :is(.btn-outline-secondary, .btn-outline-light, .appearance-mode):hover { color: var(--pp-text); background: var(--pp-soft); }
[data-appearance] .btn-outline-secondary:is(:active, .active) { color: var(--pp-accent); background: var(--pp-accent-soft); border-color: var(--pp-accent); }
[data-appearance] .btn-secondary { background: var(--pp-soft); border-color: var(--pp-border); color: var(--pp-text); }
[data-appearance] :is(.btn-success, .btn-outline-success) { --pp-button: var(--pp-success); --pp-button-bg: var(--pp-success-soft); }
[data-appearance] :is(.btn-danger, .btn-outline-danger) { --pp-button: var(--pp-danger); --pp-button-bg: var(--pp-danger-soft); }
[data-appearance] :is(.btn-warning, .btn-outline-warning) { --pp-button: var(--pp-warning); --pp-button-bg: var(--pp-warning-soft); }
[data-appearance] :is(.btn-info, .btn-outline-info) { --pp-button: var(--pp-info); --pp-button-bg: var(--pp-info-soft); }
[data-appearance] :is(.btn-success, .btn-outline-success, .btn-danger, .btn-outline-danger, .btn-warning, .btn-outline-warning, .btn-info, .btn-outline-info) {
    color: var(--pp-button); background: var(--pp-button-bg); border-color: var(--pp-button);
}
[data-appearance] :is(.btn-success, .btn-outline-success, .btn-danger, .btn-outline-danger, .btn-warning, .btn-outline-warning, .btn-info, .btn-outline-info):hover { box-shadow: inset 0 0 0 1px var(--pp-button); }
[data-appearance] .btn:disabled { opacity: .5; }
[data-appearance] :is(.form-control, .form-select, .input-group-text, .i18n-language-selector) {
    background-color: var(--pp-surface);
    color: var(--pp-text);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-control-radius);
    padding: .65rem .8rem;
    line-height: 1.5;
}
[data-appearance] .form-select { padding-inline-end: 2.25rem; }
[data-appearance][data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' fill='none' stroke='%23bdccd8' stroke-width='2'%3E%3Cpath d='m2 3 6 6 6-6'/%3E%3C/svg%3E"); }
[data-appearance] .form-select option { background: var(--pp-surface); color: var(--pp-text); }
[data-appearance] .form-control::placeholder { color: var(--pp-muted); opacity: .85; }
[data-appearance] :is(.form-control, .form-select):disabled { background-color: var(--pp-soft); color: var(--pp-muted); }
[data-appearance] .form-label { font-size: .9375rem; font-weight: 600; }
[data-appearance] .form-check-input { background-color: var(--pp-surface); border-color: var(--pp-muted); }
[data-appearance] .form-check-input:checked { background-color: var(--pp-accent); border-color: var(--pp-accent); }
[data-appearance][data-theme="dark"] .form-check-input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23111d30' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5 10 3 3 7-7'/%3E%3C/svg%3E"); }
[data-appearance][data-theme="dark"] .form-check-input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23111d30'/%3E%3C/svg%3E"); }
[data-appearance] :is(.form-control, .form-select):focus { border-color: var(--pp-accent); box-shadow: 0 0 0 3px var(--pp-accent-soft); }
[data-appearance] :is(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 3px; }
[data-appearance] :is(.form-control, .form-select).is-required { border-inline-start: 3px solid var(--pp-danger); }
[data-appearance] :is(.form-control, .form-select).is-invalid { border-color: var(--pp-danger); }
[data-appearance] :is(.form-control, .form-select).is-valid { border-color: var(--pp-success); }
[data-appearance] #new-session-modal :is(.form-control, .form-select).has-value { background-color: var(--pp-accent-soft); border-color: var(--pp-accent); box-shadow: none; }

/* Reading and drafting surfaces remain quiet, even when controls are colorful. */
[data-appearance] :is(.writing-block, .variant-option, .comment-box, .log-entry) {
    background: var(--pp-surface);
    color: var(--pp-text);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-control-radius);
    padding: 1rem 1.2rem;
}
[data-appearance] .writing-block { border-inline-start: 3px solid var(--pp-accent); margin-bottom: .75rem; }
[data-appearance] :is(.writing-block, .variant-option):hover { background: var(--pp-soft); border-color: var(--pp-accent); box-shadow: none; }
[data-appearance] .variant-option.selected { background: var(--pp-success-soft); border: 2px solid var(--pp-success); }
[data-appearance] :is(#writing-content, #reader-content, #story-panel-content, .rendered-content, .variant-text) { font-family: var(--pp-reading); line-height: 1.85; }
[data-appearance] #writing-content { padding-block: .75rem; }
[data-appearance] :is(#reader-content, #story-panel, #story-panel-content) { background: var(--pp-surface); color: var(--pp-text); }
[data-appearance] #story-panel-header { background: var(--pp-accent-soft); color: var(--pp-accent); }
[data-appearance] .rendered-content :is(pre, th, code) { background: var(--pp-soft); color: var(--pp-text); border-color: var(--pp-border); }
[data-appearance] .rendered-content blockquote { color: var(--pp-muted); border-color: var(--pp-accent); }
[data-appearance] .rendered-content td { border-color: var(--pp-border); }
[data-appearance] :is(.why-this-panel, #blocks-list .block-item) { background: var(--pp-soft); color: var(--pp-text); border-color: var(--pp-accent); }
[data-appearance] :is(.block-edit-hint, .why-this-btn, .btn-xs) { font-size: .8125rem; }
[data-appearance] .block-edit-hint { color: var(--pp-accent); }
[data-appearance] :is(.ai-critique-comment, .alert-warning) { background: var(--pp-warning-soft); color: var(--pp-warning); border-color: var(--pp-warning); }
[data-appearance] :is(.alert-info, .toast-info) { background: var(--pp-info-soft); color: var(--pp-info); border-color: var(--pp-info); }
[data-appearance] :is(.alert-success, .toast-success) { background: var(--pp-success-soft); color: var(--pp-success); border-color: var(--pp-success); }
[data-appearance] :is(.alert-danger, .toast-error) { background: var(--pp-danger-soft); color: var(--pp-danger); border-color: var(--pp-danger); }
[data-appearance] :is(.alert-secondary, .alert-light) { background: var(--pp-soft); color: var(--pp-text); border-color: var(--pp-border); }
[data-appearance] .alert-primary { background: var(--pp-accent-soft); color: var(--pp-accent); border-color: var(--pp-accent); }

/* Tables, dialogs, suggestions, and Bootstrap navigation. */
[data-appearance] .table { --bs-table-bg: transparent; --bs-table-striped-bg: var(--pp-soft); --bs-table-striped-color: var(--pp-text); --bs-table-hover-bg: var(--pp-soft); --bs-table-hover-color: var(--pp-text); color: var(--pp-text); border-color: var(--pp-border); }
[data-appearance] .table > :not(caption) > * > * { padding: .8rem; border-color: var(--pp-border); }
[data-appearance] .table thead { background: var(--pp-soft); color: var(--pp-muted); font-size: .875rem; }
[data-appearance] .table-hover tbody tr:hover { background: var(--pp-soft); }
[data-appearance] :is(.modal-content, .dropdown-menu, .ai-suggestions-dropdown, .toast, .popover) { background: var(--pp-surface); color: var(--pp-text); border: 1px solid var(--pp-border); border-radius: var(--pp-radius); }
[data-appearance] :is(.modal-header, .modal-footer, .toast-header, .popover-header) { background: var(--pp-soft); color: var(--pp-text); border-color: var(--pp-border); }
[data-appearance] .modal-header .btn-close { filter: none; }
[data-appearance][data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }
[data-appearance] .modal-body { padding: 1.5rem; }
[data-appearance] .dropdown-item { color: var(--pp-text); font-size: .9375rem; }
[data-appearance] :is(.dropdown-item, .prompt-suggestion):is(:hover, :focus) { background: var(--pp-accent-soft); color: var(--pp-accent); }
[data-appearance] .dropdown-item:is(.active, :active) { background: var(--pp-accent); color: var(--pp-on-accent); }
[data-appearance] .dropdown-divider { border-color: var(--pp-border); }
[data-appearance] :is(.dropdown-header, .dropdown-item.disabled) { color: var(--pp-muted); }
[data-appearance] .popover-body { color: var(--pp-text); }
[data-appearance] :is(.nav-tabs, .nav-tabs .nav-link.active, .accordion-item) { border-color: var(--pp-border); }
[data-appearance] :is(.nav-tabs .nav-link.active, .accordion-item, .accordion-button) { background: var(--pp-surface); color: var(--pp-text); }
[data-appearance] .accordion-button:not(.collapsed) { background: var(--pp-accent-soft); color: var(--pp-accent); }
[data-appearance] .progress { background: var(--pp-soft); }
[data-appearance] .progress-bar { background-color: var(--pp-accent); color: var(--pp-on-accent); }
[data-appearance] .progress-bar.bg-success { background-color: var(--pp-success-soft) !important; color: var(--pp-success); }
[data-appearance] .progress-bar.bg-info { background-color: var(--pp-info-soft) !important; color: var(--pp-info); }
:root[data-appearance] #auto-drive-bar .ad-bar-body { background: var(--pp-surface); color: var(--pp-text); }
[data-appearance] #auto-drive-bar .ad-bar-header { background: var(--pp-nav); color: var(--pp-nav-text); }
[data-appearance] #auto-drive-bar .ad-section-item { background: var(--pp-soft); color: var(--pp-text); border-color: var(--pp-border); }
[data-appearance] #auto-drive-bar .ad-active { background: var(--pp-accent-soft); border-color: var(--pp-accent); }
[data-appearance] #auto-drive-bar .ad-done { background: var(--pp-success-soft); border-color: var(--pp-success); }
[data-appearance] #auto-drive-bar .ad-error { background: var(--pp-danger-soft); border-color: var(--pp-danger); }
[data-appearance] :is(.page-link, .page-item.disabled .page-link) { background: var(--pp-surface); color: var(--pp-accent); border-color: var(--pp-border); }
[data-appearance] .page-item.active .page-link { background: var(--pp-accent); color: var(--pp-on-accent); }

/* Each theme has its own shape and typography, beyond its palette. */
[data-appearance] #login-section { max-width: 1280px; margin-inline: auto; }
[data-appearance] :is(.landing-title, .landing-hero-icon) { background: none; -webkit-text-fill-color: currentColor; color: var(--pp-accent); animation: none; }
[data-appearance] .landing-title { color: var(--pp-text); font-size: clamp(2.75rem, 5vw, 4rem); letter-spacing: -.045em; }
[data-appearance] .landing-hero { padding-block: 2.5rem !important; }
[data-appearance] .landing-hero-icon { font-size: 2rem; }
[data-appearance] .landing-feature-card:hover { transform: none; box-shadow: var(--pp-shadow); border-color: var(--pp-accent); }
[data-appearance] .landing-feature-card:hover .landing-feature-icon { transform: none; }
[data-appearance] .landing-login .card-body { border-top: 3px solid var(--pp-accent); border-image: none; }
[data-appearance="studio"] .workspace-sidebar .card { background: transparent; border-color: transparent; }
[data-appearance="editorial"] .navbar { border-bottom: 3px double var(--pp-border); }
[data-appearance="editorial"] .navbar-brand { font-size: 1.6rem; }
[data-appearance="editorial"] .card-header :is(h4, h5) { font-size: 1.6rem; font-weight: 500; }
[data-appearance="editorial"] .workspace-sidebar .card { background: transparent; border: 0; border-inline-end: 1px solid var(--pp-border); }
[data-appearance="editorial"] .writing-block { border-inline-start-width: 1px; padding: 1.4rem 1.6rem; }
[data-appearance="editorial"] #writing-content { font-size: 1.125rem; }
[data-appearance="atelier"] .navbar { padding-block: 1rem; }
[data-appearance="atelier"] .card-header { padding-block: 1.4rem; }
[data-appearance="atelier"] .card-header :is(h4, h5) { font-weight: 700; }
[data-appearance="atelier"] .workspace-sidebar .list-group { padding-bottom: 1.2rem; }
[data-appearance="atelier"] .btn { border-radius: 999px; }
[data-appearance="atelier"] .landing-title { letter-spacing: -.06em; font-weight: 800 !important; }
[data-appearance="nocturne"] .workspace-sidebar .card { background: var(--pp-nav); }
[data-appearance="nocturne"] :is(.table thead, .workspace-sidebar .card-header h5, .block-number) { font-family: ui-monospace, 'Cascadia Code', monospace; }
[data-appearance="nocturne"] .writing-block { border-inline-start-color: var(--pp-border); }
[data-appearance="nocturne"] .writing-block:hover { border-inline-start-color: var(--pp-accent); }
[data-appearance][dir="rtl"] .form-select { background-position: left .75rem center; }

@media (min-width: 992px) {
    [data-appearance] .workspace-sidebar { width: 245px; }
    [data-appearance] .workspace-sidebar + .col-md-9 { width: calc(100% - 245px); }
}
@media (max-width: 1199px) {
    [data-appearance] .navbar { padding-inline: .5rem; }
    .appearance-label { font-size: .875rem; }
    .appearance-controls { margin-inline: .3rem; }
    .appearance-select.form-select { width: 9rem; }
}
@media (max-width: 991px) {
    [data-appearance] .navbar-collapse { padding-top: .8rem; }
    [data-appearance] .navbar-nav { align-items: stretch !important; gap: .4rem; }
    [data-appearance] .navbar-nav > .nav-item { margin-inline: 0 !important; }
    .appearance-controls { margin: .3rem 0; flex-wrap: wrap; }
    .appearance-select.form-select { flex: 1; width: auto; max-width: 18rem; }
    [data-appearance] .penpilot-navbar .navbar-collapse { flex-basis: 100%; }
    [data-appearance] .penpilot-navbar .navbar-nav { flex-direction: row; flex-wrap: wrap; align-items: center !important; }
    [data-appearance] .penpilot-navbar .language-selector { width: auto; }
}
@media (max-width: 767px) {
    [data-appearance] body > .container-fluid,
    [data-appearance] #root > .container-fluid { padding: .85rem; }
    [data-appearance] .card-body,
    [data-appearance] .modal-body { padding: 1rem; }
    [data-appearance] .card-header { padding-inline: 1rem; }
    [data-appearance] .navbar-brand { font-size: 1.2rem; }
    [data-appearance] :is(.form-control, .form-select) { font-size: 1rem; }
    [data-appearance] #writing-panel .card-header .btn-group[role="toolbar"] { flex-wrap: wrap; gap: .25rem; margin-inline-start: 0 !important; }
    [data-appearance] #story-panel { max-width: calc(100vw - 1.5rem); min-width: 0; right: .75rem; }
    [data-appearance] .toast { min-width: 0; max-width: calc(100vw - 1.5rem); }
}
@media (prefers-reduced-motion: reduce) {
    [data-appearance] *, [data-appearance] *::before, [data-appearance] *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}