:root,
html[data-theme="blue"] {
    --bg: #0b1020;
    --bg-elevated: #141b2f;
    --bg-input: #0f1528;
    --bg-nav: rgba(11, 16, 32, 0.94);
    --bg-panel: rgba(20, 27, 47, 0.85);
    --bg-group: rgba(20, 27, 47, 0.72);
    --bg-group-folders: rgba(18, 24, 40, 0.9);
    --bg-code: #0a0e1a;
    --code-text: #d7e3ff;
    --border: rgba(255, 255, 255, 0.1);
    --border-folder: rgba(255, 255, 255, 0.1);
    --text: #e8eefc;
    --text-muted: #9aa8c7;
    --accent: #5b9fff;
    --accent-press: #3d82e8;
    --accent-soft: rgba(91, 159, 255, 0.1);
    --accent-soft-strong: rgba(91, 159, 255, 0.12);
    --accent-border: rgba(91, 159, 255, 0.45);
    --accent-inset: rgba(91, 159, 255, 0.12);
    --accent-row: rgba(91, 159, 255, 0.22);
    --accent-active-bg: rgba(91, 159, 255, 0.22);
    --accent-active-ring: rgba(91, 159, 255, 0.45);
    --accent-flash: rgba(91, 159, 255, 0.35);
    --accent-flash-zero: rgba(91, 159, 255, 0);
    --btn-on-accent: #061018;
    --danger: #ff7b7b;
    --ok: #6ddea8;
    --warn: #f0c674;
    --date: #5ec8c0;
    --date-soft: rgba(94, 200, 192, 0.16);
    --date-border: rgba(94, 200, 192, 0.4);
    --glow-a: rgba(91, 159, 255, 0.18);
    --glow-b: rgba(109, 222, 168, 0.08);
    --nav-chip: rgba(255, 255, 255, 0.05);
    --preview-wash-a: rgba(20, 27, 47, 0.92);
    --preview-wash-b: rgba(15, 21, 40, 0.96);
    --edit-btn-bg: rgba(20, 27, 47, 0.65);
    --hairline: rgba(255, 255, 255, 0.06);
    --selection-bg: rgba(255, 186, 73, 0.55);
    --search-hit-bg: rgba(255, 214, 10, 0.42);
    --search-hit-current-bg: rgba(255, 153, 0, 0.72);
    --search-hit-current-ring: rgba(255, 140, 0, 0.85);
    --cancel-action-bg: rgba(255, 123, 123, 0.14);
    --cancel-action-border: rgba(255, 123, 123, 0.45);
    --ok-soft: rgba(109, 222, 168, 0.06);
    --ok-border: rgba(109, 222, 168, 0.28);
    --danger-soft: rgba(255, 123, 123, 0.08);
    --danger-border: rgba(255, 123, 123, 0.45);
    --radius: 12px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    /* Total Home Screen status-bar clearance (settings slider; replaces safe-area top). */
    --pwa-top-gap: 57px;
    /* Tab bar bottom edge vs screen bottom (settings slider; can be negative). */
    --pwa-bottom-offset: 25px;
    /* Preview / List body text scale (1 = default 1.02rem). */
    --preview-font-scale: 1;
    --font: "Outfit", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
    --dialog-backdrop: rgba(11, 16, 32, 0.65);
    --saving-backdrop: rgba(11, 16, 32, 0.78);
    color-scheme: dark;
}

html[data-theme="oled"] {
    --bg: #000000;
    --bg-elevated: #0a0a0a;
    --bg-input: #050505;
    --bg-nav: rgba(0, 0, 0, 0.96);
    --bg-panel: rgba(12, 12, 12, 0.96);
    --bg-group: rgba(14, 14, 14, 0.95);
    --bg-group-folders: rgba(10, 10, 10, 0.98);
    --bg-code: #000000;
    --code-text: #e6e6e6;
    --border: rgba(255, 255, 255, 0.12);
    --border-folder: rgba(255, 255, 255, 0.1);
    --text: #f2f2f2;
    --text-muted: #9a9a9a;
    /* Pure greyscale accents — no blue */
    --accent: #d4d4d4;
    --accent-press: #a3a3a3;
    --accent-soft: rgba(255, 255, 255, 0.08);
    --accent-soft-strong: rgba(255, 255, 255, 0.12);
    --accent-border: rgba(255, 255, 255, 0.34);
    --accent-inset: rgba(255, 255, 255, 0.1);
    --accent-row: rgba(255, 255, 255, 0.18);
    --accent-active-bg: rgba(255, 255, 255, 0.16);
    --accent-active-ring: rgba(255, 255, 255, 0.4);
    --accent-flash: rgba(255, 255, 255, 0.32);
    --accent-flash-zero: rgba(255, 255, 255, 0);
    --btn-on-accent: #000000;
    --danger: #cfcfcf;
    --ok: #b8b8b8;
    --warn: #a6a6a6;
    --date: #b0b0b0;
    --date-soft: rgba(255, 255, 255, 0.1);
    --date-border: rgba(255, 255, 255, 0.28);
    --glow-a: transparent;
    --glow-b: transparent;
    --nav-chip: rgba(255, 255, 255, 0.04);
    --preview-wash-a: rgba(8, 8, 8, 0.98);
    --preview-wash-b: rgba(0, 0, 0, 1);
    --edit-btn-bg: rgba(20, 20, 20, 0.9);
    --hairline: rgba(255, 255, 255, 0.08);
    --selection-bg: rgba(255, 255, 255, 0.28);
    --search-hit-bg: rgba(255, 255, 255, 0.2);
    --search-hit-current-bg: rgba(255, 255, 255, 0.38);
    --search-hit-current-ring: rgba(255, 255, 255, 0.55);
    --cancel-action-bg: rgba(255, 255, 255, 0.1);
    --cancel-action-border: rgba(255, 255, 255, 0.4);
    --ok-soft: rgba(255, 255, 255, 0.05);
    --ok-border: rgba(255, 255, 255, 0.22);
    --danger-soft: rgba(255, 255, 255, 0.06);
    --danger-border: rgba(255, 255, 255, 0.28);
    --dialog-backdrop: rgba(0, 0, 0, 0.72);
    --saving-backdrop: rgba(0, 0, 0, 0.84);
    color-scheme: dark;
}

html[data-theme="light"] {
    --bg: #e8ecf4;
    --bg-elevated: #ffffff;
    --bg-input: #f7f9fc;
    --bg-nav: rgba(255, 255, 255, 0.94);
    --bg-panel: rgba(255, 255, 255, 0.92);
    --bg-group: rgba(255, 255, 255, 0.88);
    --bg-group-folders: rgba(246, 248, 252, 0.96);
    --bg-code: #e8ecf2;
    --code-text: #152033;
    --border: rgba(20, 32, 56, 0.12);
    --border-folder: rgba(20, 32, 56, 0.1);
    --text: #152033;
    --text-muted: #5c6b86;
    --accent: #2f6fdb;
    --accent-press: #245bb8;
    --accent-soft: rgba(47, 111, 219, 0.1);
    --accent-soft-strong: rgba(47, 111, 219, 0.12);
    --accent-border: rgba(47, 111, 219, 0.35);
    --accent-inset: rgba(47, 111, 219, 0.1);
    --accent-row: rgba(47, 111, 219, 0.16);
    --accent-active-bg: rgba(47, 111, 219, 0.16);
    --accent-active-ring: rgba(47, 111, 219, 0.4);
    --accent-flash: rgba(47, 111, 219, 0.28);
    --accent-flash-zero: rgba(47, 111, 219, 0);
    --btn-on-accent: #ffffff;
    --danger: #d64545;
    --ok: #1f9d66;
    --warn: #b7791f;
    --date: #0f766e;
    --date-soft: rgba(15, 118, 110, 0.12);
    --date-border: rgba(15, 118, 110, 0.32);
    --glow-a: rgba(47, 111, 219, 0.12);
    --glow-b: rgba(31, 157, 102, 0.06);
    --nav-chip: rgba(20, 32, 56, 0.04);
    --preview-wash-a: rgba(255, 255, 255, 0.96);
    --preview-wash-b: rgba(247, 249, 252, 0.98);
    --edit-btn-bg: rgba(247, 249, 252, 0.95);
    --hairline: rgba(20, 32, 56, 0.08);
    --selection-bg: rgba(255, 186, 73, 0.65);
    --search-hit-bg: rgba(255, 196, 0, 0.45);
    --search-hit-current-bg: rgba(255, 152, 0, 0.7);
    --search-hit-current-ring: rgba(210, 110, 0, 0.75);
    --cancel-action-bg: rgba(214, 69, 69, 0.12);
    --cancel-action-border: rgba(214, 69, 69, 0.4);
    --ok-soft: rgba(31, 157, 102, 0.08);
    --ok-border: rgba(31, 157, 102, 0.28);
    --danger-soft: rgba(214, 69, 69, 0.08);
    --danger-border: rgba(214, 69, 69, 0.4);
    --dialog-backdrop: rgba(21, 32, 51, 0.38);
    --saving-backdrop: rgba(21, 32, 51, 0.48);
    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    min-height: 100dvh;
    /* Block double-tap zoom; keep pan/scroll. */
    touch-action: manipulation;
}

html,
body {
    margin: 0;
    min-height: 100%;
    min-height: 100dvh;
    background:
        radial-gradient(1200px 600px at 10% -10%, var(--glow-a), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, var(--glow-b), transparent 55%),
        var(--bg);
    color: var(--text);
    font-family: var(--font);
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
}

body {
    min-height: 100dvh;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.app {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    height: 100dvh;
    max-width: 720px;
    margin: 0 auto;
    --app-top-pad: calc(12px + var(--safe-top));
    padding: var(--app-top-pad) 14px 0;
    /* Leave room for fixed bottom nav (+ mobile path dock). Negative bottom-offset shrinks this. */
    padding-bottom: max(
        12px,
        calc(var(--nav-offset, 52px) + var(--pwa-bottom-offset, 0px) + var(--path-dock-offset, 0px) + 12px)
    );
    overflow: hidden;
}

/* Single toast overlay — fixed to the app shell, never participates in layout */
.app-toast {
    position: absolute;
    top: calc(var(--app-top-pad, 12px) + 6px);
    left: 50%;
    z-index: 10000;
    box-sizing: border-box;
    margin: 0;
    width: max-content;
    max-width: min(92%, 320px);
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow:
        0 10px 28px -12px rgba(0, 0, 0, 0.65),
        0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translate3d(-50%, -6px, 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    will-change: opacity, transform;
}

.app-toast[hidden] {
    display: none !important;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
}

.app-toast.is-ok {
    color: var(--ok);
}

.app-toast.is-warn {
    color: var(--warn);
}

.app-toast.is-error {
    color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
    .app-toast {
        transition: opacity 0.01ms linear;
        transform: translate3d(-50%, 0, 0);
    }
}

.context-strip {
    margin-bottom: 10px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.context-strip-main {
    min-width: 0;
}

.view-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.view-title--doc {
    font-size: clamp(1.2rem, 4.2vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text);
    max-width: 100%;
}

.loading-file-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.status {
    margin: 0;
    min-height: 1.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.status.is-error {
    color: var(--danger);
}

.status.is-ok {
    color: var(--ok);
}

.status.is-warn {
    color: var(--warn);
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ——— Nav bar: bottom tabs on mobile, top on desktop ——— */
.nav-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    /* Slider value is the CSS bottom offset: negative pushes into empty Home Screen space. */
    bottom: var(--pwa-bottom-offset, 0px);
    top: auto;
    z-index: 40;
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* No safe-area / invisible footer padding — clearance is only via --pwa-bottom-offset. */
    padding: 4px 10px 0;
    background: var(--bg-nav);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Standalone uses a JS-measured physical screen height. On iOS,
   -webkit-fill-available excludes the lower system region and clips fixed UI. */
@media (display-mode: standalone),
       (display-mode: fullscreen),
       (display-mode: minimal-ui) {
    html,
    body {
        height: var(--pwa-screen-height, 100dvh);
        min-height: var(--pwa-screen-height, 100dvh);
        overflow: hidden;
    }

    .app {
        height: var(--pwa-screen-height, 100dvh);
        min-height: var(--pwa-screen-height, 100dvh);
        /* Status bar clearance is fully controlled by the Settings slider. */
        --app-top-pad: var(--pwa-top-gap);
        padding-top: var(--app-top-pad);
        overflow: hidden;
    }

    body {
        position: relative;
    }

    .nav-bar {
        position: absolute;
    }
}

/* Older iOS: display-mode media query can miss; class set in index.html */
html.is-standalone,
html.is-standalone body {
    height: var(--pwa-screen-height, 100dvh);
    min-height: var(--pwa-screen-height, 100dvh);
    overflow: hidden;
}

html.is-standalone .app {
    height: var(--pwa-screen-height, 100dvh);
    min-height: var(--pwa-screen-height, 100dvh);
    --app-top-pad: var(--pwa-top-gap);
    padding-top: var(--app-top-pad);
    overflow: hidden;
}

html.is-standalone body {
    position: relative;
}

html.is-standalone .nav-bar {
    position: absolute;
}

.nav-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 5px;
    border-radius: 12px;
    background: var(--nav-chip);
    border: 1px solid var(--border);
}

.nav-actions-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-actions-editor {
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.nav-actions-editor .btn {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 8px;
    min-height: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-actions-editor .btn-undo,
.nav-actions-editor .btn-redo {
    flex: 0.85 1 0;
}

.nav-actions-editor .btn-save {
    flex: 1 1 0;
    min-height: 32px;
    height: 32px;
    padding: 0;
}

.nav-action-icon {
    width: 18px;
    height: 18px;
    display: block;
    background: currentColor;
    flex: 0 0 auto;
}

.nav-action-icon--search {
    -webkit-mask: url('./Assets/SVGs/search.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/search.svg') center / contain no-repeat;
}

.nav-action-icon--import {
    -webkit-mask: url('./Assets/SVGs/import.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/import.svg') center / contain no-repeat;
}

.nav-action-icon--edit {
    -webkit-mask: url('./Assets/SVGs/edit-2.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/edit-2.svg') center / contain no-repeat;
}

.nav-action-icon--cross {
    width: 14px;
    height: 14px;
    -webkit-mask: url('./Assets/SVGs/cross.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/cross.svg') center / contain no-repeat;
}

.nav-action-icon--add-list {
    -webkit-mask: url('./Assets/SVGs/add-square.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/add-square.svg') center / contain no-repeat;
}

.nav-action-icon--rename {
    -webkit-mask: url('./Assets/SVGs/rename.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/rename.svg') center / contain no-repeat;
}

.nav-action-icon--menu {
    -webkit-mask: url('./Assets/SVGs/menu.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/menu.svg') center / contain no-repeat;
}

.nav-action-icon--undo {
    -webkit-mask: url('./Assets/SVGs/undo.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/undo.svg') center / contain no-repeat;
}

.nav-action-icon--redo {
    -webkit-mask: url('./Assets/SVGs/redo.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/redo.svg') center / contain no-repeat;
}

.nav-action-icon--save {
    width: 17px;
    height: 17px;
    -webkit-mask: url('./Assets/SVGs/save.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/save.svg') center / contain no-repeat;
}

.nav-actions-editor .btn-icon[aria-expanded="true"] {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--accent);
}

.nav-actions-editor.is-action-locked .btn:not(.is-active-action) {
    opacity: 0.32;
    filter: grayscale(0.35);
}

.nav-actions-editor.is-action-locked .btn.is-active-action {
    opacity: 1;
    filter: none;
}

.btn-save.is-flashing:not(:disabled) {
    animation: save-flash 1.1s ease-in-out infinite;
}

@keyframes save-flash {
    0%,
    100% {
        box-shadow: 0 0 0 0 var(--accent-flash-zero);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 0 4px var(--accent-flash);
        filter: brightness(1.12);
    }
}

html[data-theme="light"] .btn-save.is-flashing:not(:disabled) {
    animation-name: save-flash-light;
}

@keyframes save-flash-light {
    0%,
    100% {
        box-shadow: 0 0 0 0 var(--accent-flash-zero);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 0 4px var(--accent-flash);
        filter: brightness(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-save.is-flashing:not(:disabled) {
        animation: none;
        box-shadow: 0 0 0 3px var(--accent-flash);
    }
}

.nav-bar-inner {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 2px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
}

.nav-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    border-radius: 9px;
    min-height: 36px;
    min-width: 0;
    padding: 0.35rem 0.08rem;
    font: inherit;
    font-weight: 600;
    font-size: 0.74rem;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-tab-label {
    display: block;
}

.nav-tab.is-active {
    background: var(--accent-active-bg);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--accent-active-ring);
}

.nav-tab:not(.is-active):active {
    background: rgba(255, 255, 255, 0.06);
}

.finder-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.finder-actions .create-actions {
    flex: 1 1 auto;
}

/* Pinned tab: reuse Finder action strip, but only show Sort. */
.nav-actions-finder.is-pinned-only .browse-mode-row,
.nav-actions-finder.is-pinned-only .create-actions {
    display: none;
}

.nav-actions-finder.is-pinned-only .finder-actions {
    width: 100%;
}

.btn-finder-sort {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.85rem;
    font-weight: 650;
}

.btn-finder-sort-label {
    display: inline-block;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.item-action-btn.is-selected {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--accent-active-ring);
}

.finder-path-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 8px 6px 6px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-panel);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* Mobile: dock path + Up above the bottom nav for easier reach */
@media (max-width: 767.98px) {
    .finder-path-bar:not([hidden]) {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        z-index: 29;
        width: calc(100% - 28px);
        max-width: 692px;
        bottom: calc(var(--nav-offset, 52px) + var(--pwa-bottom-offset, 0px) + 6px);
        margin: 0;
        background: var(--bg-nav);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow:
            0 -8px 28px rgba(0, 0, 0, 0.28),
            inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    }
}

.finder-up-btn {
    flex: 0 0 auto;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-input);
    color: var(--text);
    cursor: pointer;
    touch-action: manipulation;
}

.finder-up-btn:not(:disabled):active {
    transform: scale(0.96);
}

.finder-up-btn:not(:disabled):hover,
.finder-up-btn:not(:disabled):focus-visible {
    color: var(--accent);
    border-color: var(--accent-border);
}

.finder-up-icon {
    width: 18px;
    height: 18px;
    display: block;
    background: currentColor;
    -webkit-mask: url('./Assets/SVGs/Up-ArrowIcons.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/Up-ArrowIcons.svg') center / contain no-repeat;
}

.folder-path {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.35;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.folder-path::-webkit-scrollbar {
    display: none;
}

.folder-path--crumbs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px 6px;
    white-space: nowrap;
}

.folder-path--plain {
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-path-crumb {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: inherit;
    font-weight: 600;
    padding: 6px 4px;
    min-height: 32px;
    cursor: pointer;
    border-radius: 8px;
}

.folder-path-crumb:hover,
.folder-path-crumb:focus-visible {
    background: var(--accent-soft);
}

.folder-path-sep {
    color: var(--text-muted);
    opacity: 0.55;
    flex: 0 0 auto;
}

.folder-path-current {
    color: var(--text);
    font-weight: 700;
    padding: 6px 4px;
}

@media (min-width: 768px) {
    .app {
        --app-top-pad: calc(16px + var(--safe-top));
        --desktop-chrome-width: 560px;
        /* Desktop chrome is in-flow at the top — don't reserve bottom-nav clearance. */
        --nav-offset: 0px;
        --path-dock-offset: 0px;
        max-width: none;
        width: 100%;
        padding: var(--app-top-pad) 24px calc(20px + var(--safe-bottom));
        gap: 0;
    }

    html.is-standalone .app {
        --app-top-pad: var(--pwa-top-gap);
        padding-top: var(--app-top-pad);
    }

    /*
     * Keep the desktop nav in document flow. Mobile uses fixed/absolute bottom
     * chrome; if that leaks onto wide viewports the Finder list paints under
     * the tabs + action strip (and the path bar).
     */
    .nav-bar,
    html.is-standalone .nav-bar {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none;
        z-index: 5;
        order: -1;
        width: 100%;
        max-width: none;
        margin: 0 0 10px;
        padding: 0;
        background: transparent;
        border: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        gap: 8px;
        align-items: center;
        /* Tabs first at top; action strip sits under the mode tabs */
        flex-direction: column-reverse;
        flex: 0 0 auto;
    }

    .nav-actions {
        width: 100%;
        max-width: var(--desktop-chrome-width);
        box-sizing: border-box;
        background: var(--bg-panel);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .nav-bar-inner {
        width: 100%;
        max-width: var(--desktop-chrome-width);
        box-sizing: border-box;
        padding: 3px;
        background: var(--bg-panel);
        border: 1px solid var(--border);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .context-strip {
        flex: 0 0 auto;
        position: relative;
        z-index: 1;
    }

    .main {
        position: relative;
        z-index: 0;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Mode switcher is mobile-first; hide on wide screens (nav chrome is enough) */
    .view-mode-dock {
        align-items: center;
        width: 100%;
    }

    .view-mode-bar {
        display: none !important;
    }
}

.view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.view[hidden],
[hidden] {
    display: none !important;
}

.empty-panel {
    margin: auto 0;
    padding: 28px 20px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    background: var(--bg-panel);
}

.empty-panel-title {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 650;
}

.empty-panel-copy {
    margin: 0 0 18px;
    color: var(--text-muted);
    line-height: 1.45;
}

.finder-loading {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 18px 0 12px;
    padding: 28px 20px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 2px);
    background: var(--bg-panel);
    text-align: center;
}

.finder-loading[hidden] {
    display: none !important;
}

.finder-loading-title {
    margin: 0;
    max-width: 28ch;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.35;
    color: var(--text-muted);
}

.finder-loading .loading-bar {
    margin-top: 0;
    width: min(100%, 220px);
}

.file-list.is-loading-hidden,
#btn-load-more.is-loading-hidden,
#browse-empty.is-loading-hidden {
    display: none !important;
}

.editor-loading {
    margin: auto 0;
    padding: 36px 24px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--accent-soft-strong);
    border-top-color: var(--accent);
    animation: loading-spin 0.8s linear infinite;
}

.loading-title {
    margin: 6px 0 0;
    font-size: 1.1rem;
    font-weight: 650;
}

.loading-bar {
    margin-top: 10px;
    width: min(100%, 260px);
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--accent-soft-strong);
}

.loading-bar-fill {
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: loading-bar-slide 1.1s ease-in-out infinite;
}

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

@keyframes loading-bar-slide {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(320%);
    }
}

.editor-active {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
}

.editor-active.is-pdf .view-mode-dock,
.editor-active.is-pdf .editor-scroll,
.editor-active.is-csv .view-mode-bar,
.editor-active.is-csv .editor-scroll {
    display: none !important;
}

/* Plain text: Raw only — no Preview / List switcher, keep the autosave bar */
.editor-active.is-text .view-mode-bar {
    display: none !important;
}

.editor-active.is-text .view-mode-dock {
    min-height: 0;
}

/* Phone layout reserves 52px for Preview / Raw / More. CSV has no mode switcher. */
.editor-active.is-csv .view-mode-dock {
    min-height: 0;
}

.pdf-viewer {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pdf-file-name {
    margin: 0;
    padding: 8px 12px 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.pdf-stage {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    background: #141414;
    padding: 10px 8px 16px;
}

html[data-theme="light"] .pdf-stage {
    background: #d5d8de;
}

.pdf-stage.is-inking {
    touch-action: none;
}

.pdf-sheet {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: max-content;
    min-width: 100%;
}

.pdf-page {
    position: relative;
    flex: 0 0 auto;
    margin: 0 0 12px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.pdf-page-canvas,
.pdf-ink {
    display: block;
}

.pdf-ink {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    touch-action: none;
}

.pdf-stage.is-inking .pdf-ink {
    pointer-events: auto;
}

.pdf-text-note {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    max-width: calc(100% - 8px);
    touch-action: none;
}

.pdf-text-move {
    flex: 0 0 auto;
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    border: 1px solid #1971c2;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    touch-action: none;
}

.pdf-text-box {
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 4px 6px;
    border: 1px solid #1971c2;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: #111;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.25;
    resize: none;
    transform-origin: top left;
    touch-action: manipulation;
}

.pdf-status {
    margin: 0;
    padding: 8px 12px;
    color: var(--text);
    background: var(--bg-panel);
}

.pdf-line-edit {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.pdf-line-edit[hidden] {
    display: none !important;
}

.pdf-line-input {
    flex: 1;
    min-width: 0;
    width: auto;
    min-height: 44px;
    font-size: 16px;
    line-height: 1.3;
    transform: none;
}

.pdf-toolbar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.pdf-tool {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    touch-action: manipulation;
}

.pdf-tool--icon {
    min-width: 44px;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.pdf-tool.is-active {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.pdf-tool:disabled {
    opacity: 0.4;
}

.pdf-colors {
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto;
}

.pdf-color {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--swatch, #111);
    touch-action: manipulation;
}

.pdf-color[data-pdf-color="#111111"] { --swatch: #111111; }
.pdf-color[data-pdf-color="#e03131"] { --swatch: #e03131; }
.pdf-color[data-pdf-color="#1971c2"] { --swatch: #1971c2; }

.pdf-color.is-active {
    border-color: var(--text);
}

.pdf-zoom-label,
.pdf-page-label {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 2.5rem;
    text-align: center;
}

.pdf-page-label {
    margin-left: auto;
}

.editor-scroll {
    flex: 1;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Raw mode: fill remaining height and scroll inside the textarea */
.editor-scroll:has(> .editor:not([hidden])) {
    overflow: hidden;
}

.view-settings {
    justify-content: flex-start;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.view-ai {
    justify-content: flex-start;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

@media (min-width: 768px) {
    .view-ai {
        align-items: center;
    }

    .view-ai .ai-active,
    .view-ai .empty-panel {
        width: min(100%, var(--desktop-chrome-width, 560px));
    }
}

.ai-active {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 2px 2px 28px;
    min-width: 0;
}

.ai-lede {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.ai-tasks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 3px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
}

.ai-task {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    width: 100%;
    min-height: 40px;
    min-width: 0;
    padding: 0 4px;
    font: inherit;
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    touch-action: manipulation;
}

.ai-task.is-active {
    background: var(--accent-active-bg);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--accent-active-ring);
}

.ai-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 650;
}

.ai-field textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 88px;
    resize: vertical;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    padding: 10px 12px;
    font: inherit;
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.4;
}

.ai-field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.ai-status {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

.ai-status.is-error {
    color: var(--danger);
}

.ai-status.is-ok {
    color: var(--text);
}

.ai-cost {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

.ai-result-title {
    margin: 0;
    font-size: 0.95rem;
}

.ai-result {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-result-body {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 42vh;
    overflow: auto;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.45;
}

.ai-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-attachments {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-elevated);
}

.ai-chip-name {
    margin: 0;
    flex: 1 1 8rem;
    min-width: 0;
    font-weight: 650;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-chip-modes {
    display: flex;
    gap: 4px;
    padding: 2px;
    border-radius: 999px;
    border: 1px solid var(--border);
}

.ai-chip-mode,
.ai-chip-remove {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    cursor: pointer;
}

.ai-chip-mode.is-active {
    background: var(--accent-active-bg);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--accent-active-ring);
}

.ai-thread {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-bubble {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    white-space: pre-wrap;
    line-height: 1.45;
}

.ai-bubble--user {
    background: var(--bg-elevated);
}

.ai-reply {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.45;
    color: var(--text);
}

.ai-diff {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    --ai-diff-del: #ff5c5c;
    --ai-diff-add: #3ddc97;
    --ai-diff-del-bg: color-mix(in srgb, var(--ai-diff-del) 38%, transparent);
    --ai-diff-add-bg: color-mix(in srgb, var(--ai-diff-add) 38%, transparent);
}

html[data-theme="light"] .ai-diff {
    --ai-diff-del: #c62828;
    --ai-diff-add: #0d7a45;
    --ai-diff-del-bg: color-mix(in srgb, #e53935 30%, transparent);
    --ai-diff-add-bg: color-mix(in srgb, #1f9d66 30%, transparent);
}

html[data-theme="oled"] .ai-diff {
    --ai-diff-del-bg: color-mix(in srgb, #ff5c5c 16%, #000000);
    --ai-diff-add-bg: color-mix(in srgb, #3ddc97 14%, #000000);
}

.ai-diff-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-diff-counts {
    margin: 0;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
}

.ai-diff-jumps {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-diff-jump-label {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ai-diff-jump {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elevated);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ai-diff-jump:hover,
.ai-diff-jump:focus-visible {
    border-color: var(--accent-border);
}

.ai-diff-jump-line {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.ai-diff-jump-kind {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ai-diff-jump--del .ai-diff-jump-kind {
    color: var(--ai-diff-del);
}

.ai-diff-jump--add .ai-diff-jump-kind {
    color: var(--ai-diff-add);
}

.ai-diff-jump-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.ai-diff-row.is-ai-jump .ai-diff-cell--del,
.ai-diff-row.is-ai-jump .ai-diff-cell--add {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.ai-diff-legend {
    display: flex;
    gap: 12px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.ai-diff-swatch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ai-diff-swatch::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.ai-diff-swatch--del {
    color: var(--ai-diff-del);
}

.ai-diff-swatch--add {
    color: var(--ai-diff-add);
}

.ai-diff-swatch--del::before {
    background: var(--ai-diff-del);
}

.ai-diff-swatch--add::before {
    background: var(--ai-diff-add);
}

.ai-diff-scroll {
    max-height: 50vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.ai-diff-head,
.ai-diff-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ai-diff-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 650;
}

.ai-diff-head span,
.ai-diff-cell {
    padding: 6px 8px;
    min-width: 0;
}

.ai-diff-cell {
    display: flex;
    gap: 6px;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.4;
    border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.ai-diff-cell + .ai-diff-cell {
    border-left: 1px solid var(--border);
}

.ai-diff-cell--del {
    background: var(--ai-diff-del-bg);
    box-shadow: inset 4px 0 0 var(--ai-diff-del);
}

.ai-diff-cell--add {
    background: var(--ai-diff-add-bg);
    box-shadow: inset 4px 0 0 var(--ai-diff-add);
}

.ai-diff-cell--del .ai-diff-mark {
    color: var(--ai-diff-del);
}

.ai-diff-cell--add .ai-diff-mark {
    color: var(--ai-diff-add);
}

.ai-diff-cell--del .ai-diff-text {
    text-decoration: line-through;
}

.ai-diff-line {
    flex: 0 0 auto;
    min-width: 2.1rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    text-align: right;
}

.ai-diff-cell--del .ai-diff-line,
.ai-diff-cell--add .ai-diff-line {
    color: inherit;
}

.ai-diff-mark {
    flex: 0 0 auto;
    width: 0.8rem;
    color: var(--text-muted);
    font-weight: 700;
}

.ai-diff-text {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .ai-diff-head {
        display: none;
    }

    .ai-diff-row {
        grid-template-columns: 1fr;
    }

    .ai-diff-cell--pad,
    .ai-diff-row .ai-diff-cell--equal + .ai-diff-cell--equal {
        display: none;
    }

    .ai-diff-cell + .ai-diff-cell {
        border-left: 0;
    }
}

.settings-card {
    padding: 22px 18px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    background: var(--bg-panel);
}

/* Settings → Drive image data today */
/* Own palette: the OLED theme’s status colours are greys, but this meter must read at a glance. */
.usage-meter {
    --usage-ok: #6ddea8;
    --usage-warn: #f0c674;
    --usage-danger: #ff7b7b;
    --usage-color: var(--usage-ok);
    margin: 0 0 20px;
    padding: 14px 14px 12px;
    border: 1px solid color-mix(in srgb, var(--usage-color) 38%, var(--border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--usage-color) 7%, transparent);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

html[data-theme="oled"] .usage-meter {
    --usage-ok: #51cf66;
    --usage-warn: #fcc419;
    --usage-danger: #ff6b6b;
}

html[data-theme="light"] .usage-meter {
    --usage-ok: #1f9d66;
    --usage-warn: #b7791f;
    --usage-danger: #d64545;
}

.usage-meter[data-level="warn"] {
    --usage-color: var(--usage-warn);
}

.usage-meter[data-level="critical"],
.usage-meter[data-level="over"] {
    --usage-color: var(--usage-danger);
}

.usage-meter-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    margin-bottom: 10px;
}

.usage-meter-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.usage-meter-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--usage-color);
}

.usage-meter-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 22%, transparent);
    overflow: hidden;
}

.usage-meter-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--usage-color);
    transition: width 0.4s ease, background-color 0.3s ease;
}

.usage-meter-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 12px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.usage-meter[data-level="critical"] #image-usage-percent,
.usage-meter[data-level="over"] #image-usage-percent {
    color: var(--usage-danger);
    font-weight: 600;
}

.usage-meter-hourly {
    margin: 6px 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.usage-meter-hourly[data-paused="1"] {
    color: var(--usage-warn);
    font-weight: 600;
}

.usage-meter-hourly:empty {
    display: none;
}

.settings-heading {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.settings-lede {
    margin: 0 0 20px;
    color: var(--text-muted);
    line-height: 1.45;
}

.settings-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.settings-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 4px;
    padding: 3px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
}

.settings-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    min-height: 40px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}

.settings-tab.is-active {
    background: var(--accent-active-bg);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--accent-active-ring);
}

.ai-usage-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ai-usage-total {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.ai-usage-total span {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.ai-usage-total strong {
    display: block;
    margin-top: 4px;
    font-size: 0.95rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.ai-usage-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-usage-item {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.ai-usage-name,
.ai-usage-meta,
.ai-usage-cost {
    margin: 0;
    overflow-wrap: anywhere;
}

.ai-usage-name {
    font-weight: 650;
}

.ai-usage-meta,
.ai-usage-cost {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.settings-prefs {
    margin: 4px 0 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-subheading {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
}

.settings-prefs-lede {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.settings-prefs-lede--tight {
    margin-top: -4px;
}

.settings-pref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-pref--toggle {
    min-height: 44px;
}

.settings-pref--slider {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

.settings-slider-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.settings-slider {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    margin: 0;
    accent-color: var(--accent);
}

.settings-slider-value {
    flex: 0 0 auto;
    min-width: 3.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--text);
}

.settings-pref-label {
    font-size: 0.92rem;
    font-weight: 550;
}

.settings-toggle {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--accent);
    flex: 0 0 auto;
}

.settings-select {
    min-width: 11.5rem;
    max-width: 60%;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    padding: 0 10px;
    font: inherit;
    font-size: 0.9rem;
}

.settings-hint {
    margin-top: 4px;
}

.btn {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    border-radius: 999px;
    padding: 0.7rem 1rem;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    min-height: 44px;
    cursor: pointer;
    touch-action: manipulation;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--accent);
    border-color: transparent;
    color: var(--btn-on-accent);
}

.btn-primary:not(:disabled):active {
    background: var(--accent-press);
}

.btn-ghost {
    background: transparent;
}

.btn-danger {
    background: var(--danger);
    border-color: transparent;
    color: #1a0a0a;
}

.btn-danger:not(:disabled):active {
    filter: brightness(0.92);
}

html[data-theme="light"] .btn-danger {
    color: #fff;
}

.btn-large {
    width: 100%;
    min-height: 52px;
    font-size: 1.05rem;
}

.btn-block {
    width: 100%;
    margin-top: 10px;
}

/* ——— Login ——— */
.app.is-login {
    max-width: none;
    padding: 0;
    background: #000;
}

html:has(.app.is-login),
html:has(.app.is-login) body {
    background: #000;
}

.app.is-login .context-strip {
    display: none;
}

.app.is-login .main {
    min-height: 100dvh;
}

.view-login {
    position: relative;
    isolate: isolate;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: max(24px, var(--pwa-top-gap, 57px)) 24px max(32px, var(--pwa-bottom-offset, 25px));
    overflow: hidden;
    background: #000;
}

.login-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.login-aurora {
    position: absolute;
    inset: -45%;
    background: conic-gradient(
        from 180deg at 50% 50%,
        rgba(91, 159, 255, 0.55),
        rgba(109, 222, 168, 0.28),
        rgba(0, 0, 0, 0),
        rgba(240, 198, 116, 0.22),
        rgba(61, 130, 232, 0.4),
        rgba(0, 0, 0, 0),
        rgba(91, 159, 255, 0.5)
    );
    filter: blur(72px);
    opacity: 0.9;
    animation: login-aurora-spin 28s linear infinite;
}

.login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    will-change: transform, opacity;
}

.login-orb--a {
    width: min(58vw, 420px);
    height: min(58vw, 420px);
    top: 8%;
    left: -8%;
    background: radial-gradient(circle, rgba(91, 159, 255, 0.55) 0%, rgba(91, 159, 255, 0) 70%);
    animation: login-orb-drift-a 14s ease-in-out infinite alternate;
}

.login-orb--b {
    width: min(48vw, 360px);
    height: min(48vw, 360px);
    right: -6%;
    bottom: 12%;
    background: radial-gradient(circle, rgba(109, 222, 168, 0.4) 0%, rgba(109, 222, 168, 0) 70%);
    animation: login-orb-drift-b 18s ease-in-out infinite alternate;
}

.login-orb--c {
    width: min(42vw, 300px);
    height: min(42vw, 300px);
    left: 35%;
    top: 55%;
    background: radial-gradient(circle, rgba(240, 198, 116, 0.28) 0%, rgba(240, 198, 116, 0) 70%);
    animation: login-orb-drift-c 12s ease-in-out infinite alternate;
}

.login-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.88) 75%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.7));
}

.login-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: min(100%, 360px);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    animation: login-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.login-mark {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    color: rgba(232, 238, 252, 0.92);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 0 0 1px rgba(91, 159, 255, 0.12),
        0 18px 50px rgba(0, 0, 0, 0.45),
        0 0 60px rgba(91, 159, 255, 0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: login-mark-breathe 5.5s ease-in-out infinite;
}

.login-mark-icon {
    width: 38px;
    height: auto;
}

.btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #1a1a1a;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 16px 40px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-login:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 20px 44px rgba(0, 0, 0, 0.4);
}

.btn-login:not(:disabled):active {
    transform: translateY(0);
    filter: none;
    background: #f3f3f3;
}

.btn-login-google {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.view-login .error-text {
    margin: 0;
    max-width: 28rem;
    text-align: center;
    color: #ff9b9b;
    font-size: 0.9rem;
    line-height: 1.4;
}

@keyframes login-aurora-spin {
    from { transform: rotate(0deg) scale(1.05); }
    to { transform: rotate(360deg) scale(1.05); }
}

@keyframes login-orb-drift-a {
    from { transform: translate(0, 0) scale(1); opacity: 0.85; }
    to { transform: translate(12%, 18%) scale(1.12); opacity: 1; }
}

@keyframes login-orb-drift-b {
    from { transform: translate(0, 0) scale(1); opacity: 0.75; }
    to { transform: translate(-14%, -10%) scale(1.18); opacity: 1; }
}

@keyframes login-orb-drift-c {
    from { transform: translate(0, 0) scale(0.95); opacity: 0.55; }
    to { transform: translate(-8%, 12%) scale(1.2); opacity: 0.9; }
}

@keyframes login-mark-breathe {
    0%, 100% {
        transform: translateY(0);
        box-shadow:
            0 0 0 1px rgba(91, 159, 255, 0.12),
            0 18px 50px rgba(0, 0, 0, 0.45),
            0 0 60px rgba(91, 159, 255, 0.18);
    }
    50% {
        transform: translateY(-4px);
        box-shadow:
            0 0 0 1px rgba(91, 159, 255, 0.22),
            0 22px 56px rgba(0, 0, 0, 0.5),
            0 0 80px rgba(91, 159, 255, 0.3);
    }
}

@keyframes login-card-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-aurora,
    .login-orb,
    .login-mark,
    .login-card {
        animation: none !important;
    }
}

.brand {
    margin: 0 0 8px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.lede {
    margin: 0 0 22px;
    color: var(--text-muted);
    line-height: 1.45;
}

.lede code {
    font-family: var(--mono);
    font-size: 0.9em;
}

.error-text {
    margin: 14px 0 0;
    color: var(--danger);
    font-size: 0.9rem;
}

.settings-tips {
    margin: 16px 0 0;
    padding-left: 1.1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.settings-tips kbd {
    font-family: var(--mono);
    font-size: 0.8em;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 4px;
    background: rgba(255, 255, 255, 0.04);
}

.nav-tab.has-dirty .nav-tab-label {
    color: var(--warn);
}

.create-actions {
    display: flex;
    gap: 8px;
    margin: 0;
}

.create-actions .btn {
    flex: 1;
}

.browse-mode-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-mode {
    flex: 1 1 auto;
    min-width: 30%;
    border-radius: 999px;
}

.browse-hint a {
    color: var(--accent);
}

.btn-mode.is-active {
    background: var(--accent-row);
    border-color: var(--accent-border);
    color: var(--text);
}

.search-form {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    margin-bottom: 10px;
}

.search-form[hidden] {
    display: none !important;
}

.search-input {
    flex: 1;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    padding: 0 14px;
    font: inherit;
    font-size: 16px;
}

/* Client-side filter for the current Finder folder (not Drive-wide search) */
.folder-filter-form {
    flex: 0 0 auto;
    margin: 0 0 10px;
}

.folder-filter-form[hidden] {
    display: none !important;
}

.folder-filter-field {
    position: relative;
    display: flex;
    align-items: center;
}

.folder-filter-icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    opacity: 0.55;
    background: currentColor;
    color: var(--text-muted);
    -webkit-mask: url('./Assets/SVGs/search.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/search.svg') center / contain no-repeat;
}

.folder-filter-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    padding: 0 14px 0 36px;
    font: inherit;
    font-size: 16px;
    outline: none;
}

.folder-filter-input::placeholder {
    color: var(--text-muted);
    opacity: 0.85;
}

.folder-filter-input:focus {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.browse-hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.file-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

/* Mobile defaults / prefs: markdown section order relative to folders */
.file-list[data-md-mobile="bottom"] .file-group--folders {
    order: 1;
}

.file-list[data-md-mobile="bottom"] .file-group--markdown {
    order: 2;
}

.file-list[data-md-mobile="top"] .file-group--folders {
    order: 2;
}

.file-list[data-md-mobile="top"] .file-group--markdown {
    order: 1;
}

.file-group--pdf {
    order: 3;
}

.file-group--recent {
    order: -1;
    background: rgba(109, 222, 168, 0.08);
    border-color: rgba(109, 222, 168, 0.4);
    box-shadow: inset 0 0 0 1px rgba(109, 222, 168, 0.1);
}

html[data-theme="light"] .file-group--recent {
    background: rgba(31, 157, 102, 0.08);
    border-color: rgba(31, 157, 102, 0.28);
    box-shadow: inset 0 0 0 1px rgba(31, 157, 102, 0.08);
}

html[data-theme="oled"] .file-group--recent {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
}

.file-group--recent .file-group-title {
    color: var(--ok);
}

.file-list--pinned {
    gap: 12px;
}

.file-group--pinned-folders,
.file-group--pinned-markdown,
.file-group--pinned-pdf {
    background: rgba(240, 198, 116, 0.08);
    border-color: rgba(240, 198, 116, 0.4);
    box-shadow: inset 0 0 0 1px rgba(240, 198, 116, 0.1);
}

html[data-theme="light"] .file-group--pinned-folders,
html[data-theme="light"] .file-group--pinned-markdown,
html[data-theme="light"] .file-group--pinned-pdf {
    background: rgba(176, 126, 20, 0.08);
    border-color: rgba(176, 126, 20, 0.28);
    box-shadow: inset 0 0 0 1px rgba(176, 126, 20, 0.08);
}

html[data-theme="oled"] .file-group--pinned-folders,
html[data-theme="oled"] .file-group--pinned-markdown,
html[data-theme="oled"] .file-group--pinned-pdf {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
}

.file-group--pinned-folders .file-group-title,
.file-group--pinned-markdown .file-group-title,
.file-group--pinned-pdf .file-group-title {
    color: var(--warn);
}

.file-group--recent .file-group-list > .file-row:nth-child(n + 4) {
    display: none;
}

@media (min-width: 768px) {
    .file-list[data-md-desktop="bottom"] .file-group--folders {
        order: 1;
    }

    .file-list[data-md-desktop="bottom"] .file-group--markdown {
        order: 2;
    }

    .file-list[data-md-desktop="top"] .file-group--folders {
        order: 2;
    }

    .file-list[data-md-desktop="top"] .file-group--markdown {
        order: 1;
    }

    .file-group--recent {
        order: -1;
    }

    .file-group--recent .file-group-list > .file-row:nth-child(n + 4) {
        display: flex;
    }

    .file-group--recent .file-group-list > .file-row:nth-child(n + 6) {
        display: none;
    }
}

.file-group {
    flex-shrink: 0;
    border-radius: calc(var(--radius) + 4px);
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg-group);
}

.file-group--folders {
    background: var(--bg-group-folders);
    border-color: var(--border-folder);
}

.file-group--markdown {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    box-shadow: inset 0 0 0 1px var(--accent-inset);
}

.file-group-title {
    margin: 0;
    padding: 10px 14px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.file-group--markdown .file-group-title {
    color: var(--accent);
}

.file-group-list {
    display: flex;
    flex-direction: column;
}

.file-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    border-radius: 0;
    min-height: 52px;
    overflow: hidden;
}

.file-group-list .file-row + .file-row {
    border-top: 1px solid var(--border);
}

.file-group--folders .file-group-list .file-row + .file-row {
    border-top-color: var(--hairline);
}

.file-group--markdown .file-group-list .file-row + .file-row {
    border-top-color: var(--accent-row);
}

.file-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 14px 8px 14px 14px;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.file-row-menu {
    flex: 0 0 auto;
    align-self: center;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 10px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--edit-btn-bg);
    color: var(--text-muted);
    cursor: pointer;
    touch-action: manipulation;
}

.file-row-menu:hover,
.file-row-menu:focus-visible {
    color: var(--accent);
    border-color: var(--accent-border);
}

.file-row-menu:active {
    transform: scale(0.96);
}

.file-row--folder {
    border-color: transparent;
    background: transparent;
}

.file-row--markdown {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.file-row.file-row--important {
    background: rgba(255, 255, 255, 0.07);
}

html[data-theme="oled"] .file-row.file-row--important {
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] .file-row.file-row--important {
    background: rgba(21, 32, 51, 0.07);
}

.file-row--markdown .file-row-name {
    font-weight: 600;
}

.file-row-main:active {
    background: rgba(255, 255, 255, 0.04);
}

.file-group--markdown .file-row-main:active {
    background: var(--accent-soft-strong);
}

.btn-small {
    min-height: 32px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    line-height: 1.2;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.dialog-hint {
    margin: 0 0 12px !important;
    font-size: 0.9rem;
}

.fill-dates-fieldset {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fill-dates-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated, var(--bg-input));
    cursor: pointer;
}

.fill-dates-option:has(input:checked) {
    border-color: var(--accent-border);
    background: var(--accent-soft);
}

.fill-dates-option:has(input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.fill-dates-option input {
    margin-top: 3px;
    flex: 0 0 auto;
}

.fill-dates-option-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fill-dates-option-title {
    font-weight: 600;
    color: var(--text);
}

.fill-dates-option-meta {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.fill-dates-custom-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.fill-dates-custom-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
}

.fill-dates-custom-input:disabled {
    opacity: 0.55;
}

.fill-dates-custom-input:focus {
    outline: none;
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-inset);
}

.fill-dates-preview {
    margin: 0 0 8px;
    font-size: 0.86rem;
    color: var(--date, var(--text-muted));
    font-family: var(--mono);
    overflow-wrap: anywhere;
}

.fill-dates-error {
    margin: 0 0 10px;
    font-size: 0.86rem;
    color: var(--danger);
}

.editor-more-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    margin: 14px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated, var(--bg-input));
    font-size: 0.82rem;
    line-height: 1.35;
}

.editor-more-stats-label {
    color: var(--text-muted);
    min-width: 0;
}

.editor-more-stats-value {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.editor-more-stats-value.is-pending {
    color: var(--text-muted);
    font-style: italic;
}

.dialog--editor-more {
    max-height: min(84dvh, 640px);
    width: min(92vw, 420px);
}

.editor-more-body {
    display: flex;
    flex-direction: column;
    max-height: min(84dvh, 640px);
    padding: 0;
    overflow: hidden;
}

.editor-more-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 20px 12px;
    -webkit-overflow-scrolling: touch;
}

.editor-more-scroll > h2 {
    margin-top: 0;
}

.editor-more-footer {
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
    z-index: 1;
    margin: 0;
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.editor-more-close {
    justify-content: center;
}

.name-input {
    width: 100%;
    min-height: 48px;
    margin: 0 0 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    padding: 0 14px;
    font: inherit;
    font-size: 16px;
}

.name-input:focus {
    outline: none;
    border-color: var(--accent-border);
}

.name-dialog-warning {
    margin: -8px 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
    background: color-mix(in srgb, var(--warn) 14%, var(--bg-input));
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.35;
}

.name-input:has(+ .name-dialog-warning:not([hidden])) {
    margin-bottom: 10px;
    border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
}

.file-row-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
}

.file-row-icon--important {
    width: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}

.file-row-star {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: #ffd000;
    -webkit-mask: url('/assets/SVGs/StarIcons.svg') center / contain no-repeat;
    mask: url('/assets/SVGs/StarIcons.svg') center / contain no-repeat;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7));
}

html[data-theme="light"] .file-row-star {
    background-color: #d89a00;
}

.file-row-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.file-row-label {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-row-name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
    font-weight: 500;
}

.file-row-name--custom {
    color: var(--file-text-color, var(--text));
}

.file-row-name--bold,
.file-row--markdown .file-row-name--bold {
    font-family: "Archivo Black", "Outfit", system-ui, sans-serif;
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: 0.01em;
    line-height: 1.35;
    padding: 6px 3px;
    margin: -6px -3px;
    text-shadow: 0 0 8px color-mix(in srgb, currentColor 5%, transparent);
}

.file-row-opened-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.file-row-opened-dot--day {
    background: #f0c674;
}

.file-row-opened-dot--week {
    background: #5b9fff;
}

html[data-theme="light"] .file-row-opened-dot {
    box-shadow: 0 0 0 1px rgba(20, 32, 56, 0.14);
}

html[data-theme="light"] .file-row-opened-dot--day {
    background: #d4a017;
}

html[data-theme="light"] .file-row-opened-dot--week {
    background: #2f6fdb;
}

html[data-theme="oled"] .file-row-opened-dot--day {
    background: #e0c060;
}

html[data-theme="oled"] .file-row-opened-dot--week {
    background: #c8c8c8;
}

.file-row--folder .file-row-icon img {
    filter: invert(0.88) brightness(0.95);
    opacity: 0.9;
}

.file-row--markdown .file-row-icon img {
    filter: invert(58%) sepia(55%) saturate(1200%) hue-rotate(185deg) brightness(1.05);
}

html[data-theme="light"] .file-row--folder .file-row-icon img,
html[data-theme="light"] .move-folder-list .file-row-icon img {
    filter: none;
    opacity: 0.92;
}

html[data-theme="light"] .file-row--markdown .file-row-icon img {
    /* Dark blue so markdown icons read clearly on light surfaces */
    filter: invert(28%) sepia(70%) saturate(1400%) hue-rotate(200deg) brightness(0.85);
    opacity: 1;
}

.file-group--pdf {
    background: color-mix(in srgb, #e03131 14%, transparent);
    border-color: color-mix(in srgb, #e03131 48%, var(--border));
}

.file-group--pdf .file-group-title {
    color: #ff6b6b;
}

html[data-theme="light"] .file-group--pdf .file-group-title {
    color: #c92a2a;
}

html[data-theme="oled"] .file-group--pdf {
    background: color-mix(in srgb, #ff5c5c 12%, #000000);
    border-color: color-mix(in srgb, #ff5c5c 42%, #000000);
}

.file-group--pdf .file-group-list .file-row + .file-row {
    border-top-color: color-mix(in srgb, #e03131 28%, transparent);
}

.file-row--pdf .file-row-name {
    font-weight: 600;
}

.file-row--pdf .file-row-icon img {
    filter: invert(27%) sepia(86%) saturate(2400%) hue-rotate(346deg) brightness(0.95);
}

html[data-theme="light"] .file-row--pdf .file-row-icon img {
    filter: invert(18%) sepia(90%) saturate(3000%) hue-rotate(346deg) brightness(0.85);
}

.file-group--csv,
.file-group--pinned-csv {
    background: color-mix(in srgb, #2f9e44 14%, transparent);
    border-color: color-mix(in srgb, #2f9e44 48%, var(--border));
}

.file-group--csv .file-group-title,
.file-group--pinned-csv .file-group-title {
    color: #8ce99a;
}

html[data-theme="light"] .file-group--csv .file-group-title,
html[data-theme="light"] .file-group--pinned-csv .file-group-title {
    color: #2b8a3e;
}

html[data-theme="oled"] .file-group--csv,
html[data-theme="oled"] .file-group--pinned-csv {
    background: color-mix(in srgb, #69db7c 12%, #000000);
    border-color: color-mix(in srgb, #69db7c 42%, #000000);
}

.file-row--csv .file-row-name {
    font-weight: 600;
}

.file-row--csv .file-row-icon img {
    filter: invert(48%) sepia(55%) saturate(700%) hue-rotate(85deg) brightness(0.95);
}

html[data-theme="light"] .file-row--csv .file-row-icon img {
    filter: invert(32%) sepia(60%) saturate(800%) hue-rotate(85deg) brightness(0.8);
}

.file-group--images,
.file-group--pinned-images {
    background: color-mix(in srgb, #ae3ec9 14%, transparent);
    border-color: color-mix(in srgb, #ae3ec9 48%, var(--border));
}

.file-group--images .file-group-title,
.file-group--pinned-images .file-group-title {
    color: #e599f7;
}

html[data-theme="light"] .file-group--images .file-group-title,
html[data-theme="light"] .file-group--pinned-images .file-group-title {
    color: #9c36b5;
}

html[data-theme="oled"] .file-group--images,
html[data-theme="oled"] .file-group--pinned-images {
    background: color-mix(in srgb, #da77f2 12%, #000000);
    border-color: color-mix(in srgb, #da77f2 42%, #000000);
}

.file-group--images .file-group-list .file-row + .file-row,
.file-group--pinned-images .file-group-list .file-row + .file-row {
    border-top-color: color-mix(in srgb, #ae3ec9 28%, transparent);
}

.file-row--image .file-row-icon img {
    filter: invert(55%) sepia(40%) saturate(1500%) hue-rotate(250deg) brightness(1.05);
}

html[data-theme="light"] .file-row--image .file-row-icon img {
    filter: invert(30%) sepia(60%) saturate(1800%) hue-rotate(260deg) brightness(0.8);
}

/* Tapped image row: thumbnail panel wraps under the name + menu */
.file-row.has-image-preview {
    flex-wrap: wrap;
}

.file-image-preview {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 12px 14px;
    min-width: 0;
}

.file-image-thumb {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-muted);
    overflow: hidden;
    cursor: pointer;
    touch-action: manipulation;
}

.file-image-thumb:disabled {
    cursor: progress;
}

.file-image-thumb:not(:disabled):hover,
.file-image-thumb:focus-visible {
    border-color: var(--accent-border);
}

.file-image-thumb:not(:disabled):active {
    transform: scale(0.97);
}

.file-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.file-image-thumb-status {
    font-size: 0.8rem;
    padding: 6px;
    text-align: center;
}

.file-image-preview .file-image-thumb:disabled .file-image-thumb-status {
    animation: file-image-pulse 1.2s ease-in-out infinite;
}

@keyframes file-image-pulse {
    50% {
        opacity: 0.45;
    }
}

.file-image-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
}

.file-image-details {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.file-image-hint {
    color: var(--text-muted);
}

.file-image-preview.is-error .file-image-hint {
    color: var(--danger);
}

.file-image-close {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--edit-btn-bg);
    color: var(--text-muted);
    cursor: pointer;
}

/* Full-screen image viewer — edge to edge; chrome floats over the photo */
.image-viewer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, var(--viewer-dim, 1));
    color: #f1f3f5;
    overflow: hidden;
    overscroll-behavior: contain;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.image-viewer[open] {
    display: block;
}

.image-viewer::backdrop {
    background: transparent;
}

.image-viewer-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
}

.image-viewer-stage.is-zoomed {
    cursor: grab;
}

.image-viewer-stage.is-zoomed:active {
    cursor: grabbing;
}

.image-viewer-img {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: none;
    max-height: none;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    will-change: transform;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    transition: filter 0.25s ease;
}

.image-viewer-img.is-animating {
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.25s ease;
}

.image-viewer-img:not([src]) {
    visibility: hidden;
}

.image-viewer-stage.is-loading .image-viewer-img {
    filter: blur(8px);
}

.image-viewer-bar,
.image-viewer-foot {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.image-viewer-bar {
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(8px + var(--safe-top)) calc(12px + env(safe-area-inset-right, 0px)) 24px
        calc(16px + env(safe-area-inset-left, 0px));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.image-viewer-heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.image-viewer-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(241, 243, 245, 0.72);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.image-viewer-title {
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.image-viewer-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: inherit;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.image-viewer-foot {
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px calc(16px + env(safe-area-inset-right, 0px)) calc(14px + var(--safe-bottom))
        calc(16px + env(safe-area-inset-left, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.image-viewer.is-chrome-hidden .image-viewer-bar {
    opacity: 0;
    transform: translateY(-8px);
}

.image-viewer.is-chrome-hidden .image-viewer-foot {
    opacity: 0;
    transform: translateY(8px);
}

.image-viewer.is-chrome-hidden .image-viewer-close,
.image-viewer.is-chrome-hidden .image-viewer-original {
    pointer-events: none;
}

/* Bottom controls: [prev]  Full resolution  [next] — out of the way of the photo */
.image-viewer-controls {
    width: 100%;
    max-width: 460px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: center;
    justify-items: center;
    gap: 12px;
}

.image-viewer-controls.is-single {
    grid-template-columns: minmax(0, 1fr);
}

/* Fixed columns so a hidden middle button never pulls the next arrow inward */
#image-viewer-prev {
    grid-column: 1;
}

#image-viewer-original {
    grid-column: 2;
}

#image-viewer-next {
    grid-column: 3;
}

.image-viewer-controls.is-single #image-viewer-original {
    grid-column: 1;
}

.image-viewer-controls:not(:has(:not([hidden]))) {
    display: none;
}

.image-viewer-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: opacity 0.2s ease, transform 0.15s ease, background-color 0.15s ease;
}

.image-viewer-nav[hidden] {
    display: none;
}

.image-viewer-nav img {
    width: 22px;
    height: 20px;
    /* The arrow SVGs are black — show them white on the dark button */
    filter: invert(1);
    pointer-events: none;
}

.image-viewer-nav:not(:disabled):hover,
.image-viewer-nav:focus-visible {
    background: rgba(255, 255, 255, 0.18);
}

.image-viewer-nav:not(:disabled):active {
    transform: scale(0.94);
}

.image-viewer-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.image-viewer.is-chrome-hidden .image-viewer-nav {
    pointer-events: none;
}

.image-viewer-status {
    max-width: 560px;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: center;
    color: rgba(241, 243, 245, 0.82);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    overflow-wrap: anywhere;
}

.image-viewer-status[data-kind="error"] {
    color: #ff8787;
}

.image-viewer-status[data-kind="progress"] {
    color: #f1f3f5;
    font-variant-numeric: tabular-nums;
}

.image-viewer-original {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.image-viewer-original:disabled {
    opacity: 0.55;
    cursor: progress;
}

.image-viewer-status[data-kind="error"] {
    color: #ff8787;
}

.csv-viewer {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.csv-viewer[hidden] {
    display: none !important;
}

.csv-file-name {
    margin: 0;
    padding: 4px 2px 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csv-grid {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}

.csv-note {
    margin: 0;
    padding: 8px 12px 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.csv-scroll {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.csv-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 100%;
}

.csv-table th,
.csv-table td {
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: var(--bg);
    vertical-align: top;
}

.csv-corner,
.csv-col-head,
.csv-row-head {
    position: sticky;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 650;
    z-index: 1;
}

.csv-col-head,
.csv-corner {
    top: 0;
    z-index: 2;
}

.csv-row-head,
.csv-corner {
    left: 0;
}

.csv-row-head {
    z-index: 2;
}

.csv-col-head {
    z-index: 3;
}

.csv-corner,
.csv-row-head {
    width: 2.25rem;
    min-width: 2.25rem;
    max-width: 2.75rem;
    padding: 0 2px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.csv-corner {
    z-index: 4;
}

.csv-col-head {
    padding: 6px 8px;
    white-space: nowrap;
    text-align: left;
}

.csv-col-head.is-active,
.csv-table tr.is-active .csv-row-head {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 22%, var(--bg-elevated));
}

.csv-table td.is-active {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}

.csv-input {
    display: block;
    width: 100%;
    min-width: 7.5rem;
    min-height: 44px;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    line-height: 1.3;
    padding: 8px 10px;
    touch-action: manipulation;
}

.csv-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg));
}

.csv-read {
    min-width: 7.5rem;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 520px) {
    .csv-input,
    .csv-read {
        min-width: 38vw;
    }
}

.csv-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
    padding: 8px 0 4px;
}

.csv-active-label {
    flex: 1 1 100%;
    margin: 0;
    min-height: 1.2em;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.2;
}

.csv-toolbar .btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    min-height: 44px;
    padding-inline: 8px;
}

.empty-state {
    margin: 24px 0;
    text-align: center;
    color: var(--text-muted);
}

.view-editor {
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.editor-file-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex: 0 0 auto;
    padding: 0 2px;
}

.editor-file-title {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editor-file-heading:not(:has(.editor-file-title:not(:empty))) {
    display: none;
}

/* Keep Edit chrome under the status bar; Home Screen uses safe-area + gap. */
.app.is-editing-doc {
    padding-top: var(--app-top-pad);
}

html.is-standalone .app.is-editing-doc {
    --app-top-pad: var(--pwa-top-gap);
    padding-top: var(--app-top-pad);
}

.app.is-editing-doc .context-strip {
    margin-bottom: 0;
    gap: 0;
}

.app.is-editing-doc .view-title {
    display: none;
}

.app.is-editing-doc .status {
    min-height: 0;
    font-size: 0.8rem;
    line-height: 1.2;
    margin: 0 0 4px;
}

.app.is-editing-doc .context-strip:has(.status:empty) {
    display: none;
}

.editor-search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-elevated);
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.nav-actions > .editor-search-bar {
    order: -1;
}

.editor-search-bar[hidden] {
    display: none !important;
}

.editor-search-input {
    flex: 1 1 12rem;
    min-width: 0;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text);
    padding: 0 12px;
    font: inherit;
    font-size: 0.95rem;
    outline: none;
}

.editor-search-input:focus {
    border-color: var(--accent-border);
}

.editor-search-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.editor-search-count {
    min-width: 4.5rem;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.editor-search-count[data-empty="true"] {
    color: var(--warn);
}

.editor-search-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 36px;
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.editor-search-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.editor-search-opt:has(input:checked),
.editor-search-opt.is-active {
    border-color: var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent);
}

.editor-search-opt:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.editor-search-nav,
.editor-search-close {
    min-width: 36px;
    min-height: 36px;
    padding: 0;
}

.editor {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    resize: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text);
    padding: 14px;
    font-family: var(--mono);
    font-size: 16px;
    line-height: 1.5;
    outline: none;
}

.editor:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
}

.editor:focus {
    border-color: var(--accent-border);
}

.editor::selection {
    background: var(--selection-bg);
    color: inherit;
}

/* Find highlights in Preview / List */
mark.search-hit {
    background: var(--search-hit-bg);
    color: inherit;
    border-radius: 3px;
    padding: 0 0.06em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

mark.search-hit--current {
    background: var(--search-hit-current-bg);
    box-shadow: 0 0 0 1px var(--search-hit-current-ring);
}

html[data-theme="light"] mark.search-hit {
    background: var(--search-hit-bg);
}

html[data-theme="light"] mark.search-hit--current {
    background: var(--search-hit-current-bg);
    box-shadow: 0 0 0 1px var(--search-hit-current-ring);
}

html[data-theme="light"] .editor::selection {
    background: var(--selection-bg);
}

.view-mode-dock {
    position: sticky;
    top: 0;
    z-index: 6;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
}

.view-mode-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 3px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.55);
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.view-mode-menu {
    display: none;
}

/* Idle autosave countdown — remaining time until Drive save */
.autosave-bar {
    margin-top: 6px;
    height: 2px;
    width: 100%;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 80%, transparent);
    overflow: hidden;
    flex: 0 0 auto;
}

.autosave-bar[hidden] {
    display: none !important;
}

.autosave-bar-fill {
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: var(--accent, #6ea8fe);
    transform-origin: left center;
    transform: scaleX(1);
    will-change: transform;
    opacity: 0.85;
}

html[data-theme="light"] .autosave-bar-fill {
    background: #3b6fd8;
}

@media (prefers-reduced-motion: reduce) {
    .autosave-bar-fill {
        transition: none;
    }
}

.view-mode-btn,
.view-mode-more {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    min-height: 34px;
    padding: 0 6px;
    font: inherit;
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1.2;
    cursor: pointer;
    touch-action: manipulation;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-mode-btn.is-active {
    background: var(--accent-active-bg);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--accent-active-ring);
}

@media (max-width: 767.98px) {
    .editor-active {
        position: relative;
    }

    .editor-scroll {
        order: 1;
    }

    .view-mode-dock {
        order: 2;
        position: relative;
        top: auto;
        z-index: 8;
        min-height: 52px;
        overflow: visible;
    }

    .view-mode-bar {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4px;
        position: relative;
        min-height: 52px;
        padding: 3px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--bg);
        box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.7);
        touch-action: none;
        -webkit-touch-callout: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .view-mode-btn--main,
    .view-mode-more {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        min-height: 46px;
        padding: 0 8px;
        border-radius: 11px;
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--text-muted);
        background: transparent;
    }

    .view-mode-btn--main.is-active,
    .view-mode-more.is-active {
        background: var(--accent-active-bg);
        color: var(--text);
        box-shadow: inset 0 0 0 1px var(--accent-active-ring);
    }

    .view-mode-more::after {
        content: "";
        width: 8px;
        height: 8px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: translateY(2px) rotate(-45deg);
        opacity: 0.75;
        flex: 0 0 auto;
    }

    .view-mode-bar.is-picking .view-mode-more::after {
        transform: translateY(-1px) rotate(135deg);
    }

    .view-mode-bar.is-picking .view-mode-menu {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(100% + 6px);
        z-index: 30;
        padding: 6px;
        border-radius: 16px;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
        box-shadow:
            0 -18px 40px rgba(0, 0, 0, 0.45),
            0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .view-mode-bar.is-picking .view-mode-menu .view-mode-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 52px;
        padding: 0 16px;
        border-radius: 12px;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text);
        background: transparent;
    }

    .view-mode-bar.is-picking .view-mode-menu .view-mode-btn.is-active {
        box-shadow: inset 0 0 0 1px var(--accent-active-ring);
        background: var(--accent-active-bg);
    }

    .view-mode-bar.is-picking .view-mode-menu .view-mode-btn.is-drag-over {
        background: var(--accent);
        color: var(--btn-on-accent);
        box-shadow: none;
    }

    .view-mode-btn--main:active,
    .view-mode-more:active {
        transform: scale(0.985);
    }
}

html.is-view-mode-picking,
html.is-view-mode-picking .editor-scroll,
html.is-view-mode-picking .editor {
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

html.is-view-mode-picking .editor-scroll {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .view-mode-bar.is-picking .view-mode-btn {
        transition: none;
    }
}

.lists-status {
    margin: 0;
    font-size: 0.85rem;
    color: var(--warn);
}

.lists-status.is-error {
    color: var(--danger);
}

.lists-root {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    padding-bottom: 8px;
}

.lists-root--pure-reader .mdlist-header-actions,
.lists-root--pure-reader .mdlist-actions,
.lists-root--pure-reader .mdplain-mini-editor {
    display: none !important;
}

html.is-pure-reader-preview #btn-click-edit,
html.is-pure-reader-preview #btn-insert-list {
    display: none !important;
}

.lists-root--placing .md-preview--placing > [data-md-line] {
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.lists-root--placing .md-preview--placing > [data-md-line]:hover {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent-border);
}

.lists-root--click-edit .md-preview--click-edit > [data-md-line] {
    cursor: text;
    border-radius: 8px;
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.lists-root--click-edit .md-preview--click-edit > [data-md-line]:hover {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent-border);
}

.lists-root--click-edit .mdlist-stack--click-edit {
    cursor: text;
}

.lists-root--click-edit .mdlist-stack--click-edit:hover .mdlist-block {
    box-shadow: inset 0 0 0 1px var(--accent-border);
}

.btn-click-edit--active,
.btn-insert-list--cancel,
.btn-editor-more--cancel {
    background: var(--accent-row);
    border-color: var(--accent-border);
    color: var(--text);
}

.nav-actions-editor.is-action-locked .btn.is-active-action.btn-click-edit--active,
.nav-actions-editor.is-action-locked .btn.is-active-action.btn-insert-list--cancel,
.nav-actions-editor.is-action-locked .btn.is-active-action.btn-editor-more--cancel {
    color: var(--danger);
    background: var(--cancel-action-bg);
    border-color: var(--cancel-action-border);
}

.lists-root--placing .mdlist-stack--placing {
    cursor: pointer;
}

.lists-root--placing .mdlist-stack--placing .mdlist-block,
.lists-root--placing .mdlist-stack--placing .mdlist-agent-note {
    pointer-events: none;
}

.lists-root--placing .mdlist-stack--placing:hover .mdlist-block {
    box-shadow: inset 0 0 0 1px var(--accent-border);
}

.is-place-target {
    background: var(--accent-soft) !important;
    box-shadow: inset 0 0 0 2px var(--accent) !important;
    border-radius: 8px;
}

.list-place-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
}

.list-place-picker-label {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
}

.list-place-picker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.list-place-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-panel);
}

.list-place-empty p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.4;
}

.lists-warning,
.lists-empty-hint {
    margin: 0;
    color: var(--warn);
    font-size: 0.9rem;
    line-height: 1.4;
}

.preview-toc-mount {
    position: relative;
    z-index: 1;
}

.preview-toc-mount--sticky {
    position: sticky;
    top: 0;
    z-index: 3;
}

.preview-toc {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    overflow: hidden;
}

.preview-toc-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.preview-toc-summary::-webkit-details-marker {
    display: none;
}

.preview-toc-summary::before {
    content: '';
    width: 0.45em;
    height: 0.45em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    flex: 0 0 auto;
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.preview-toc[open] .preview-toc-summary::before {
    transform: rotate(45deg);
}

.preview-toc-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
}

.preview-toc-meta {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--text-muted);
}

.preview-toc-hint {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--accent);
}

.preview-toc-nav {
    border-top: 1px solid var(--border);
    max-height: min(40vh, 18rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 8px;
}

.preview-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.preview-toc-item {
    margin: 0;
}

.preview-toc-link {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.35;
    padding: 8px 12px 8px calc(12px + (var(--toc-level, 0) * 0.85rem));
    cursor: pointer;
    overflow-wrap: anywhere;
}

.preview-toc-link:hover,
.preview-toc-link:focus-visible {
    background: var(--accent-soft);
    color: var(--accent);
    outline: none;
}

.preview-toc-link--list {
    color: var(--accent);
    font-weight: 650;
}

/* ——— Contents view mode ——— */
.lists-root--contents {
    gap: 0;
}

.contents-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    padding: 4px 0 12px;
}

.contents-view-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contents-view-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.contents-view-meta,
.contents-view-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

.contents-view-nav {
    margin: 0;
}

.contents-view-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contents-view-item {
    margin: 0;
}

.contents-view-link {
    appearance: none;
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-elevated);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
    padding: 14px 14px 14px calc(14px + (var(--toc-level, 0) * 14px));
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.contents-view-link:hover,
.contents-view-link:focus-visible {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    outline: none;
}

.contents-view-link:active {
    transform: scale(0.99);
}

.contents-view-link--list {
    color: var(--accent);
    font-weight: 650;
}

.toc-flash {
    animation: toc-flash-pulse 1.25s ease;
}

@keyframes toc-flash-pulse {
    0% {
        box-shadow: inset 0 0 0 0 transparent;
        background-color: transparent;
    }
    20% {
        box-shadow: inset 0 0 0 2px var(--accent);
        background-color: var(--accent-soft);
    }
    100% {
        box-shadow: inset 0 0 0 0 transparent;
        background-color: transparent;
    }
}

.md-preview > h1.toc-flash,
.md-preview > h2.toc-flash,
.md-preview > h3.toc-flash,
.md-preview > h4.toc-flash,
.md-preview > h5.toc-flash,
.md-preview > h6.toc-flash,
.mdlist-stack.toc-flash .mdlist-block {
    border-radius: 8px;
}

.lists-empty {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-panel);
}

.mdlist-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mdlist-agent-note {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-panel);
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.mdlist-agent-note-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-weight: 650;
    letter-spacing: 0.02em;
    user-select: none;
}

.mdlist-agent-note-summary::-webkit-details-marker {
    display: none;
}

.mdlist-agent-note-summary::before {
    content: '';
    width: 0.45em;
    height: 0.45em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    flex: 0 0 auto;
    opacity: 0.75;
    transition: transform 0.15s ease;
}

.mdlist-agent-note[open] .mdlist-agent-note-summary::before {
    transform: rotate(45deg);
}

.mdlist-agent-note-summary:hover,
.mdlist-agent-note-summary:focus-visible {
    color: var(--text);
}

.mdlist-agent-note-body {
    margin: 0;
    padding: 0 10px 8px;
    max-width: 72ch;
}

.mdlist-block {
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    background: var(--accent-soft);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Keep Done / + Item chrome visible; only the item list scrolls. */
.mdlist-block--editing {
    max-height: calc(
        100dvh - var(--app-top-pad) - max(0px, var(--nav-offset, 52px) + var(--pwa-bottom-offset, 0px)) - var(--path-dock-offset, 0px) - 10.5rem
    );
    min-height: 0;
}

.mdlist-block--editing > .mdlist-header {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 3;
    margin: -12px -12px 0;
    padding: 12px 12px 8px;
    background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--bg-elevated);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 1px 0 var(--hairline);
}

.mdlist-block--editing > .mdlist-filter-note {
    flex: 0 0 auto;
}

.mdlist-block--editing > .mdlist-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.mdlist-block--editing > .mdlist-actions {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0 -12px -12px;
    padding: 8px 12px 12px;
    background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--bg-elevated);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 -1px 0 var(--hairline);
}

.mdlist-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mdlist-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title title"
        "count actions";
    align-items: center;
    gap: 8px;
    column-gap: 10px;
}

.mdlist-title-row > .mdplain-title,
.mdlist-title-row > .mdlist-title,
.mdlist-title-row > .mdlist-title-input {
    grid-area: title;
    width: 100%;
    max-width: none;
}

.mdlist-title-row > .mdlist-count {
    grid-area: count;
    justify-self: start;
}

.mdlist-title-row > .mdlist-header-actions,
.mdlist-title-row > .btn {
    grid-area: actions;
    justify-self: end;
}

.mdlist-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    justify-self: end;
    align-self: center;
}

.mdlist-title-row .btn {
    flex-shrink: 0;
    border-radius: 6px;
    min-height: 32px;
    padding: 0.25rem 0.7rem;
    white-space: nowrap;
    justify-self: end;
    align-self: center;
}

.mdlist-title-input {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
    font-size: 1.422em;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    padding: 0 12px;
}

.mdlist-count {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    align-self: center;
    justify-self: end;
}

.mdlist-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.mdlist-filter-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.mdlist-rank {
    flex: 0 0 auto;
    align-self: center;
    min-width: 2rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--accent);
}

.mdlist-title {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    font-size: 1.422em;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mdlist-edit-btn,
.mdlist-add-btn,
.mdlist-copy-btn,
.mdlist-reorder-btn,
.mdplain-mini-icon-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--edit-btn-bg);
    color: var(--text-muted);
    cursor: pointer;
    touch-action: manipulation;
}

.mdlist-reorder-btn {
    width: auto;
    min-width: 32px;
    padding: 0 10px;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.mdlist-reorder-btn.is-active {
    color: var(--text);
    background: var(--accent-soft);
    border-color: var(--accent-border);
}

.mdlist-add-btn--top,
.mdlist-add-btn--bottom {
    width: auto;
    min-width: 32px;
    padding: 0 5px;
}

.mdlist-edit-btn:hover,
.mdlist-edit-btn:focus-visible,
.mdlist-add-btn:hover,
.mdlist-add-btn:focus-visible,
.mdlist-copy-btn:hover,
.mdlist-copy-btn:focus-visible,
.mdlist-reorder-btn:hover,
.mdlist-reorder-btn:focus-visible,
.mdplain-mini-icon-btn:hover,
.mdplain-mini-icon-btn:focus-visible {
    color: var(--accent);
    border-color: var(--accent-border);
}

.mdlist-edit-btn:active,
.mdlist-add-btn:active,
.mdlist-copy-btn:active,
.mdlist-reorder-btn:active,
.mdplain-mini-icon-btn:active {
    transform: scale(0.96);
}

.mdlist-add-btn-icon,
.mdlist-copy-btn-icon,
.mdplain-mini-icon-btn-icon {
    width: 16px;
    height: 16px;
    display: block;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url('./Assets/SVGs/add-square.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/add-square.svg') center / contain no-repeat;
}

.mdlist-add-btn-arrow {
    width: 11px;
    height: 11px;
    display: block;
    flex: 0 0 auto;
    background: currentColor;
}

.mdlist-add-btn-arrow--up {
    -webkit-mask: url('./Assets/SVGs/Up-ArrowIcons.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/Up-ArrowIcons.svg') center / contain no-repeat;
}

.mdlist-add-btn-arrow--down {
    -webkit-mask: url('./Assets/SVGs/Down-ArrowIcons.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/Down-ArrowIcons.svg') center / contain no-repeat;
}

.mdlist-copy-btn-icon {
    -webkit-mask-image: url('./Assets/SVGs/copy.svg');
    mask-image: url('./Assets/SVGs/copy.svg');
}

.mdplain-mini-icon-btn-icon--add {
    -webkit-mask-image: url('./Assets/SVGs/add-square.svg');
    mask-image: url('./Assets/SVGs/add-square.svg');
}

.mdplain-mini-icon-btn-icon--indent {
    -webkit-mask-image: url('./Assets/SVGs/Right-ArrowIcons.svg');
    mask-image: url('./Assets/SVGs/Right-ArrowIcons.svg');
}

.mdplain-mini-icon-btn-icon--outdent {
    -webkit-mask-image: url('./Assets/SVGs/Left-ArrowIcons.svg');
    mask-image: url('./Assets/SVGs/Left-ArrowIcons.svg');
}

.mdplain-mini-icon-btn-icon--up {
    -webkit-mask-image: url('./Assets/SVGs/Up-ArrowIcons.svg');
    mask-image: url('./Assets/SVGs/Up-ArrowIcons.svg');
}

.mdplain-mini-icon-btn-icon--down {
    -webkit-mask-image: url('./Assets/SVGs/Down-ArrowIcons.svg');
    mask-image: url('./Assets/SVGs/Down-ArrowIcons.svg');
}

.mdplain-mini-icon-btn-icon--top {
    -webkit-mask-image: url('./Assets/SVGs/To-TopIcons.svg');
    mask-image: url('./Assets/SVGs/To-TopIcons.svg');
}

.mdplain-mini-icon-btn-icon--bottom {
    -webkit-mask-image: url('./Assets/SVGs/To-BottomIcons.svg');
    mask-image: url('./Assets/SVGs/To-BottomIcons.svg');
}

.mdplain-mini-icon-btn-icon--delete {
    -webkit-mask-image: url('./Assets/SVGs/bin.svg');
    mask-image: url('./Assets/SVGs/bin.svg');
}

.mdlist-block--view {
    gap: 8px;
}

.mdlist-items--view {
    gap: 0;
}

.mdlist-view-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 4px;
    border-top: 1px solid var(--hairline);
}

.mdlist-view-item:first-child {
    border-top: 0;
    padding-top: 2px;
}

.mdlist-view-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mdlist-view-text {
    font-size: 1rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.mdlist-view-text strong,
.mdplain-view-text strong,
.mdplain-task-label strong {
    font-weight: 700;
    color: var(--text);
}

.mdlist-view-text em,
.mdplain-view-text em,
.mdplain-task-label em {
    font-style: italic;
}

.mdlist-view-text del,
.mdplain-view-text del,
.mdplain-task-label del {
    color: var(--text-muted);
}

.mdlist-view-text a,
.mdplain-view-text a,
.mdplain-task-label a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mdlist-view-tags {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.mdlist-filter-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.mdlist-filter-select {
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    padding: 0 10px;
}

.mdlist-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mdlist-items--reorder {
    gap: 6px;
}

.mdlist-reorder-item {
    gap: 8px;
    min-height: 44px;
    padding: 4px 6px;
    border-radius: 10px;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent-border) 55%, transparent);
}

.mdlist-reorder-item.is-dragging,
.mdlist-reorder-item.is-drag-ghost {
    background: var(--bg-elevated);
    border-color: var(--accent-border);
}

.mdlist-items.is-sorting {
    user-select: none;
    -webkit-user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .mdlist-items.is-sorting > .mdlist-item,
    .mdlist-drag-placeholder {
        transition: none !important;
    }
}

.mdlist-drag-placeholder {
    display: block;
    box-sizing: border-box;
    flex-shrink: 0;
    list-style: none;
    pointer-events: none;
    border-radius: 10px;
    border: 2px dashed color-mix(in srgb, var(--accent-border) 75%, transparent);
    background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
}

html.is-mdlist-sorting {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}

html.is-mdlist-sorting body {
    cursor: grabbing;
}

.mdlist-reorder-item .mdlist-handle {
    width: 40px;
    min-height: 40px;
    border-radius: 8px;
}

.mdlist-reorder-text {
    flex: 1;
    min-width: 0;
    align-self: center;
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdlist-block--reordering,
.mdplain-block--reordering {
    border-color: var(--accent-border);
    box-shadow: inset 0 0 0 1px var(--accent-soft);
}

.mdlist-empty-item {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 8px 0;
}

.mdlist-item {
    display: flex;
    gap: 8px;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    padding: 8px;
    touch-action: manipulation;
}

.mdlist-item.mdlist-reorder-item {
    align-items: center;
}

.mdlist-item.is-dragging,
.mdlist-item.is-drag-ghost {
    opacity: 1;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
    z-index: 10000;
    list-style: none;
}

.mdlist-item.is-drag-ghost {
    cursor: grabbing;
}

.mdlist-handle {
    flex: 0 0 auto;
    width: 44px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.mdlist-handle:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mdlist-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mdlist-text,
.mdlist-score,
.mdlist-tags {
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    padding: 0 12px;
    box-sizing: border-box;
}

.mdlist-text {
    display: block;
    resize: none;
    overflow: hidden;
    height: 44px;
    max-height: 44px;
    line-height: 1.35;
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: pre-wrap;
    word-break: break-word;
}

.mdlist-text.is-expanded {
    overflow-y: auto;
    max-height: min(45vh, 20rem);
}

.mdlist-item-meta {
    display: grid;
    grid-template-columns: minmax(5rem, 7rem) 1fr;
    gap: 8px;
}

.mdlist-score-label,
.mdlist-tags-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.mdlist-move {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.mdlist-move-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--edit-btn-bg);
    color: var(--text-muted);
    cursor: pointer;
    touch-action: manipulation;
    flex-shrink: 0;
}

.mdlist-move-btn:hover:not(:disabled),
.mdlist-move-btn:focus-visible:not(:disabled) {
    color: var(--accent);
    border-color: var(--accent-border);
}

.mdlist-move-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mdlist-arrow {
    width: 16px;
    height: 16px;
    display: block;
    background: currentColor;
}

.mdlist-arrow--up {
    -webkit-mask: url('./Assets/SVGs/Up-ArrowIcons.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/Up-ArrowIcons.svg') center / contain no-repeat;
}

.mdlist-arrow--down {
    -webkit-mask: url('./Assets/SVGs/Down-ArrowIcons.svg') center / contain no-repeat;
    mask: url('./Assets/SVGs/Down-ArrowIcons.svg') center / contain no-repeat;
}

.mdlist-delete {
    margin-left: auto;
    color: var(--danger);
    flex-shrink: 0;
    border-radius: 6px;
    min-height: 32px;
    padding: 0.25rem 0.7rem;
    white-space: nowrap;
}

.mdlist-delete-list {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

.mdlist-delete-list:hover,
.mdlist-delete-list:focus-visible {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    border-color: var(--danger);
}

.mdlist-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.mdlist-actions .btn {
    flex-shrink: 0;
    border-radius: 6px;
    min-height: 32px;
    padding: 0.25rem 0.7rem;
    white-space: nowrap;
}

.mdlist-actions .mdlist-delete-list {
    margin-left: auto;
}

/* ——— Plain markdown lists (interactive in Preview) ——— */
.mdplain-block {
    border: 1px solid var(--ok-border);
    border-radius: var(--radius);
    background: var(--ok-soft);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mdplain-block--editing {
    max-height: calc(
        100dvh - var(--app-top-pad) - max(0px, var(--nav-offset, 52px) + var(--pwa-bottom-offset, 0px)) - var(--path-dock-offset, 0px) - 10.5rem
    );
    min-height: 0;
}

.mdplain-block--editing > .mdplain-header {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 3;
    margin: -12px -12px 0;
    padding: 12px 12px 8px;
    background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--bg-elevated);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 1px 0 var(--hairline);
}

.mdplain-block--editing > .mdplain-items,
.mdplain-block--editing > .mdlist-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.mdplain-block--editing > .mdlist-actions {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0 -12px -12px;
    padding: 8px 12px 12px;
    background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--bg-elevated);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 -1px 0 var(--hairline);
}

.mdplain-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mdplain-convert-btn {
    width: 100%;
}

.mdplain-title {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    font-size: 1.422em;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mdplain-hint {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.mdplain-view-items {
    margin: 0;
    padding: 0 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mdplain-view-items--ordered {
    /* Numbers are rendered as inline markers (flex kills native ol markers). */
    padding-left: 0;
    list-style: none;
}

.mdplain-view-items--task {
    list-style: none;
    padding-left: 0;
}

.mdplain-view-items--tree {
    list-style: none;
    padding-left: 0;
}

.mdplain-view-item {
    line-height: 1.45;
    overflow-wrap: anywhere;
    border-radius: 6px;
    transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.mdplain-view-item-main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.45em;
}

.mdplain-view-num {
    flex: 0 0 auto;
    min-width: 1.35em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1.45;
    user-select: none;
}

.mdplain-view-item-main > .mdplain-view-text,
.mdplain-view-item-main > .mdplain-task-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* Nest depth via colour (no horizontal indent — room is tight on phone). */
.mdplain-view-item--nested,
.mdplain-view-item[data-depth="1"],
.mdplain-item--nested,
.mdplain-item[data-depth="1"] {
    color: color-mix(in srgb, var(--text) 72%, var(--text-muted));
}

.mdplain-view-item[data-depth="2"],
.mdplain-item[data-depth="2"] {
    color: color-mix(in srgb, var(--text) 55%, var(--text-muted));
}

.mdplain-view-item[data-depth="3"],
.mdplain-item[data-depth="3"] {
    color: color-mix(in srgb, var(--text) 42%, var(--text-muted));
}

.mdplain-view-item[data-depth="4"],
.mdplain-item[data-depth="4"] {
    color: var(--text-muted);
}

.mdplain-view-item--nested .mdplain-view-text,
.mdplain-view-item--nested .mdplain-task-label,
.mdplain-view-item[data-depth] .mdplain-view-text,
.mdplain-view-item[data-depth] .mdplain-task-label {
    color: inherit;
}

/* Segmented: nested items live inside the parent card as sub-containers.
   Up to 5 shells: top-level card + depth levels 1–4. Darker = deeper. */
html[data-list-layout="segmented"] {
    --nest-shell-1: color-mix(in srgb, #000 18%, var(--bg-elevated, #1a2230));
    --nest-shell-2: color-mix(in srgb, #000 32%, var(--bg-elevated, #1a2230));
    --nest-shell-3: color-mix(in srgb, #000 46%, var(--bg-elevated, #1a2230));
    --nest-shell-4: color-mix(in srgb, #000 58%, var(--bg-elevated, #1a2230));
}

html[data-theme="light"][data-list-layout="segmented"] {
    --nest-shell-1: color-mix(in srgb, #000 6%, var(--list-stripe-uniform, #e8ecf2));
    --nest-shell-2: color-mix(in srgb, #000 12%, var(--list-stripe-uniform, #e8ecf2));
    --nest-shell-3: color-mix(in srgb, #000 18%, var(--list-stripe-uniform, #e8ecf2));
    --nest-shell-4: color-mix(in srgb, #000 26%, var(--list-stripe-uniform, #e8ecf2));
}

html[data-theme="oled"][data-list-layout="segmented"] {
    --nest-shell-1: #141414;
    --nest-shell-2: #0f0f0f;
    --nest-shell-3: #0a0a0a;
    --nest-shell-4: #050505;
}

.mdplain-view-nest {
    list-style: none;
    margin: 8px 0 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 8px;
    background: color-mix(in srgb, #000 8%, transparent);
}

html[data-theme="light"] .mdplain-view-nest {
    background: color-mix(in srgb, #000 4%, transparent);
}

html[data-list-layout="segmented"] .mdplain-view-nest > .mdplain-view-item {
    margin: 0;
    padding: 7px 9px;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    box-shadow: none;
}

html[data-list-layout="segmented"] .mdplain-view-nest > .mdplain-view-item[data-depth="1"],
html[data-list-layout="segmented"][data-list-stripe="normal"] .mdplain-view-nest > .mdplain-view-item[data-depth="1"],
html[data-list-layout="segmented"][data-list-stripe="zebra"] .mdplain-view-nest > .mdplain-view-item[data-depth="1"],
html[data-list-layout="segmented"][data-list-stripe="spectrum"] .mdplain-view-nest > .mdplain-view-item[data-depth="1"] {
    background: var(--nest-shell-1) !important;
}

html[data-list-layout="segmented"] .mdplain-view-nest > .mdplain-view-item[data-depth="2"],
html[data-list-layout="segmented"][data-list-stripe="normal"] .mdplain-view-nest > .mdplain-view-item[data-depth="2"],
html[data-list-layout="segmented"][data-list-stripe="zebra"] .mdplain-view-nest > .mdplain-view-item[data-depth="2"],
html[data-list-layout="segmented"][data-list-stripe="spectrum"] .mdplain-view-nest > .mdplain-view-item[data-depth="2"] {
    background: var(--nest-shell-2) !important;
}

html[data-list-layout="segmented"] .mdplain-view-nest > .mdplain-view-item[data-depth="3"],
html[data-list-layout="segmented"][data-list-stripe="normal"] .mdplain-view-nest > .mdplain-view-item[data-depth="3"],
html[data-list-layout="segmented"][data-list-stripe="zebra"] .mdplain-view-nest > .mdplain-view-item[data-depth="3"],
html[data-list-layout="segmented"][data-list-stripe="spectrum"] .mdplain-view-nest > .mdplain-view-item[data-depth="3"] {
    background: var(--nest-shell-3) !important;
}

html[data-list-layout="segmented"] .mdplain-view-nest > .mdplain-view-item[data-depth="4"],
html[data-list-layout="segmented"][data-list-stripe="normal"] .mdplain-view-nest > .mdplain-view-item[data-depth="4"],
html[data-list-layout="segmented"][data-list-stripe="zebra"] .mdplain-view-nest > .mdplain-view-item[data-depth="4"],
html[data-list-layout="segmented"][data-list-stripe="spectrum"] .mdplain-view-nest > .mdplain-view-item[data-depth="4"] {
    background: var(--nest-shell-4) !important;
}

.mdplain-view-item.is-long-pressing {
    background: var(--accent-soft-strong);
    transform: scale(0.985);
}

/* Continuous: depth still shown via text colour */
html[data-list-layout="continuous"] .mdplain-view-item--nested[data-depth="1"],
html[data-list-layout="continuous"] .mdplain-item--nested[data-depth="1"] {
    color: color-mix(in srgb, var(--text) 72%, var(--text-muted));
}

html[data-list-layout="continuous"] .mdplain-view-item--nested[data-depth="2"],
html[data-list-layout="continuous"] .mdplain-item--nested[data-depth="2"] {
    color: color-mix(in srgb, var(--text) 55%, var(--text-muted));
}

html[data-list-layout="continuous"] .mdplain-view-item--nested[data-depth="3"],
html[data-list-layout="continuous"] .mdplain-item--nested[data-depth="3"] {
    color: color-mix(in srgb, var(--text) 42%, var(--text-muted));
}

html[data-list-layout="continuous"] .mdplain-view-item--nested[data-depth="4"],
html[data-list-layout="continuous"] .mdplain-item--nested[data-depth="4"] {
    color: var(--text-muted);
}

.mdplain-view-item--mini-editing {
    list-style: none;
}

.mdplain-view-items--task .mdplain-view-item--mini-editing {
    margin-left: 0;
}

.mdplain-mini-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.mdplain-mini-editor--nested {
    border-color: color-mix(in srgb, var(--accent-border) 55%, var(--border));
}

.mdplain-mini-level {
    align-self: flex-start;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    user-select: none;
}

.mdplain-mini-editor--nested .mdplain-mini-text {
    color: color-mix(in srgb, var(--text) 72%, var(--text-muted));
}

.mdplain-mini-editor--nested[data-depth="2"] .mdplain-mini-text {
    color: color-mix(in srgb, var(--text) 55%, var(--text-muted));
}

.mdplain-mini-editor--nested[data-depth="3"] .mdplain-mini-text {
    color: color-mix(in srgb, var(--text) 42%, var(--text-muted));
}

.mdplain-mini-editor--nested[data-depth="4"] .mdplain-mini-text {
    color: var(--text-muted);
}

.mdplain-mini-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.mdplain-mini-text {
    width: 100%;
    min-height: 44px;
    resize: none;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--hairline);
    border-radius: calc(var(--radius) - 2px);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
}

.mdplain-mini-text:focus {
    outline: none;
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-inset);
}

.mdplain-mini-toolbar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mdplain-mini-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-height: 32px;
    min-width: 0;
}

.mdplain-mini-actions--top {
    width: 100%;
    justify-content: flex-start;
}

.mdplain-mini-actions--top .mdlist-copy-btn {
    margin-left: auto;
    flex: 0 0 auto;
}

.mdplain-mini-actions--tools {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mdplain-mini-actions--tools::-webkit-scrollbar {
    display: none;
}

.mdplain-mini-actions .mdplain-mini-done-btn {
    margin-left: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mdplain-mini-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.mdplain-mini-icon-btn:disabled:hover,
.mdplain-mini-icon-btn:disabled:focus-visible {
    color: var(--text-muted);
    border-color: var(--border);
}

.mdplain-view-text {
    color: inherit;
}

.mdplain-task-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: default;
}

.mdplain-task-label input {
    margin-top: 0.3em;
    flex: 0 0 auto;
}

.mdplain-check-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.mdplain-check {
    width: 18px;
    height: 18px;
}

.md-preview--prose-chunk {
    margin: 0;
}

.mixed-markdown-wrap > .mdplain-block {
    margin: 4px 0;
}

.mixed-markdown-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mixed-markdown-editor {
    width: 100%;
    min-height: 6rem;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text);
    padding: 12px;
    font-family: var(--mono);
    font-size: 16px;
    line-height: 1.45;
}

.mixed-markdown--error {
    margin: 0;
    padding: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--danger-border);
    background: var(--danger-soft);
    color: var(--danger);
    white-space: pre-wrap;
    font-family: var(--mono);
    font-size: 0.85rem;
}

/* ——— Markdown preview ——— */
.md-preview,
.lists-root {
    font-size: calc(1.02rem * var(--preview-font-scale, 1));
}

.md-preview {
    flex: 0 0 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    padding: 18px 16px 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, var(--preview-wash-a), var(--preview-wash-b)),
        var(--bg-elevated);
    color: var(--text);
    line-height: 1.65;
}

.md-preview--segment {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    padding: 14px 14px 16px;
    background: var(--bg-panel);
}

.md-preview > *:first-child {
    margin-top: 0;
}

.md-preview > *:last-child {
    margin-bottom: 0;
}

.md-preview .md-empty {
    color: var(--text-muted);
    font-style: italic;
}

.md-preview h1,
.md-preview h2,
.md-preview h3,
.md-preview h4,
.md-preview h5,
.md-preview h6 {
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 1.35em 0 0.55em;
}

.md-preview h1 {
    font-size: 1.814em;
}

.md-preview h2 {
    font-size: 1.422em;
}

.md-preview h3 { font-size: 1.176em; }
.md-preview h4 { font-size: 1.059em; }
.md-preview h5,
.md-preview h6 {
    font-size: 0.961em;
    color: var(--text-muted);
}

.md-preview p {
    margin: 0.85em 0;
}

.md-preview a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.md-preview strong {
    font-weight: 700;
    color: var(--text);
}

.md-preview em {
    font-style: italic;
}

.md-preview del {
    color: var(--text-muted);
}

.md-date-tag {
    display: inline-block;
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 0.12em 0.45em;
    border-radius: 0.35em;
    border: 1px solid var(--date-border);
    color: var(--date);
    background: var(--date-soft);
    vertical-align: baseline;
    white-space: nowrap;
}

.md-preview .md-date-tag--block {
    display: inline-block;
    font-size: 0.92em;
    padding: 0.2em 0.55em;
}

.md-preview .md-date-block {
    margin: 0.85em 0;
}

.md-date-tag--raw {
    font-weight: 500;
    opacity: 0.9;
    font-style: italic;
}

.mdplain-mini-date {
    margin: 0;
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    padding: 0 10px;
    width: fit-content;
    max-width: min(100%, 12rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--date);
    background: var(--date-soft);
    border: 1px solid var(--date-border);
    border-radius: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    cursor: pointer;
    pointer-events: auto;
}

.mdplain-mini-date:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-inset);
    border-color: var(--accent-border);
}

.mdplain-mini-date.is-long-pressing {
    transform: scale(0.97);
    filter: brightness(0.96);
}

.edit-item-date-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}

.edit-item-date-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--hairline);
    border-radius: calc(var(--radius) - 2px);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    touch-action: manipulation;
}

.edit-item-date-input:focus {
    outline: none;
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-inset);
}

.edit-item-date-error {
    margin: -6px 0 12px;
    font-size: 0.82rem;
    color: var(--danger);
}

.md-preview code {
    font-family: var(--mono);
    font-size: 0.9em;
    background: var(--accent-soft-strong);
    border: 1px solid var(--accent-inset);
    border-radius: 6px;
    padding: 0.1em 0.35em;
    color: var(--text);
}

.md-preview pre.md-code {
    margin: 1em 0;
    padding: 14px 14px;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-code);
    -webkit-overflow-scrolling: touch;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.md-preview pre.md-code code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 0.863em;
    line-height: 1.5;
    color: var(--code-text);
    white-space: inherit;
    overflow-wrap: inherit;
    word-break: inherit;
}

.md-preview pre.md-code--mdlist {
    border-color: var(--accent-border);
    background: var(--accent-soft);
}

.md-preview pre.md-code--mdlist::before {
    content: "mdlist";
    display: block;
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}

.md-preview blockquote {
    margin: 1em 0;
    padding: 0.35em 0 0.35em 1em;
    border-left: 3px solid var(--accent);
    color: var(--text-muted);
    background: var(--accent-soft);
    border-radius: 0 10px 10px 0;
}

html[data-theme="light"] .md-preview strong {
    color: #0b1220;
}

html[data-theme="light"] .md-preview blockquote {
    background: #e6eaef;
    color: #152033;
}

html[data-theme="light"] .md-preview blockquote strong {
    color: #0b1220;
}

html[data-theme="light"] .md-preview pre.md-code {
    background: #e6eaef;
    border-color: rgba(20, 32, 56, 0.12);
}

html[data-theme="light"] .md-preview pre.md-code code {
    color: #152033;
}

.md-preview blockquote > *:first-child { margin-top: 0.4em; }
.md-preview blockquote > *:last-child { margin-bottom: 0.4em; }

.md-preview ul,
.md-preview ol {
    margin: 0.85em 0;
    padding-left: 1.4em;
}

.md-preview ol {
    list-style: decimal;
}

.md-preview ul {
    list-style: disc;
}

.md-preview li > ul,
.md-preview li > ol,
.md-preview .md-preview-nest {
    margin: 0.45em 0 0.35em;
    padding-left: 0;
    list-style: none;
}

/* Nested ordered lists keep numbers (depth chips are for bullets only). */
.md-preview li > ol,
.md-preview ol.md-preview-nest {
    list-style: decimal;
    padding-left: 1.5em;
}

.md-preview li {
    margin: 0.35em 0;
}

/* Depth cue in Preview (max 4): colour + level chip — not horizontal indent. */
.md-preview li.md-li-nested {
    color: color-mix(in srgb, var(--text) 72%, var(--text-muted));
    list-style: none;
}

.md-preview ol > li.md-li-nested {
    list-style: decimal;
}

.md-preview ol > li.md-li-nested::before {
    content: none;
    display: none;
}

.md-preview li.md-li-depth-2 {
    color: color-mix(in srgb, var(--text) 55%, var(--text-muted));
}

.md-preview li.md-li-depth-3 {
    color: color-mix(in srgb, var(--text) 42%, var(--text-muted));
}

.md-preview li.md-li-depth-4 {
    color: var(--text-muted);
}

html[data-list-layout="continuous"] .md-preview li.md-li-depth-1 {
    color: color-mix(in srgb, var(--text) 72%, var(--text-muted));
}

html[data-list-layout="continuous"] .md-preview li.md-li-depth-2 {
    color: color-mix(in srgb, var(--text) 55%, var(--text-muted));
}

html[data-list-layout="continuous"] .md-preview li.md-li-depth-3 {
    color: color-mix(in srgb, var(--text) 42%, var(--text-muted));
}

html[data-list-layout="continuous"] .md-preview li.md-li-depth-4 {
    color: var(--text-muted);
}

.md-preview li.md-li-nested > :not(ul):not(ol) {
    color: inherit;
}

.md-preview li.md-li-nested::before {
    content: attr(data-depth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35em;
    height: 1.35em;
    margin-right: 0.45em;
    padding: 0 0.3em;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-elevated, var(--bg));
    color: var(--text-muted);
    font-size: 0.72em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    vertical-align: 0.15em;
}

.md-preview li.md-task.md-li-nested::before {
    margin-top: 0.2em;
    vertical-align: top;
}

.md-preview li.md-task.md-li-nested {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
}

.md-preview li.md-task.md-li-nested > label {
    flex: 1 1 auto;
    min-width: 0;
}

.md-preview li.md-task.md-li-nested > .md-preview-nest {
    flex: 1 1 100%;
}

/* Segmented Preview: each nest level is its own shell (up to 5: root + 1–4).
   Darker background = deeper. Overrides zebra/spectrum so depth stays readable. */
html[data-list-layout="segmented"] .md-preview .md-preview-nest {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 6px;
    border-radius: 8px;
    background: color-mix(in srgb, #000 8%, transparent);
    list-style: none;
}

html[data-theme="light"][data-list-layout="segmented"] .md-preview .md-preview-nest {
    background: color-mix(in srgb, #000 4%, transparent);
}

html[data-list-layout="segmented"] .md-preview .md-preview-nest > li {
    margin: 0;
    padding: 7px 9px;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    list-style: none;
}

html[data-list-layout="segmented"] .md-preview ol.md-preview-nest > li {
    list-style: decimal;
    list-style-position: inside;
}

html[data-list-layout="segmented"] .md-preview li.md-li-depth-1,
html[data-list-layout="segmented"][data-list-stripe="normal"] .md-preview li.md-li-depth-1,
html[data-list-layout="segmented"][data-list-stripe="zebra"] .md-preview li.md-li-depth-1,
html[data-list-layout="segmented"][data-list-stripe="spectrum"] .md-preview li.md-li-depth-1 {
    background: var(--nest-shell-1) !important;
}

html[data-list-layout="segmented"] .md-preview li.md-li-depth-2,
html[data-list-layout="segmented"][data-list-stripe="normal"] .md-preview li.md-li-depth-2,
html[data-list-layout="segmented"][data-list-stripe="zebra"] .md-preview li.md-li-depth-2,
html[data-list-layout="segmented"][data-list-stripe="spectrum"] .md-preview li.md-li-depth-2 {
    background: var(--nest-shell-2) !important;
}

html[data-list-layout="segmented"] .md-preview li.md-li-depth-3,
html[data-list-layout="segmented"][data-list-stripe="normal"] .md-preview li.md-li-depth-3,
html[data-list-layout="segmented"][data-list-stripe="zebra"] .md-preview li.md-li-depth-3,
html[data-list-layout="segmented"][data-list-stripe="spectrum"] .md-preview li.md-li-depth-3 {
    background: var(--nest-shell-3) !important;
}

html[data-list-layout="segmented"] .md-preview li.md-li-depth-4,
html[data-list-layout="segmented"][data-list-stripe="normal"] .md-preview li.md-li-depth-4,
html[data-list-layout="segmented"][data-list-stripe="zebra"] .md-preview li.md-li-depth-4,
html[data-list-layout="segmented"][data-list-stripe="spectrum"] .md-preview li.md-li-depth-4 {
    background: var(--nest-shell-4) !important;
}

.md-preview ul.md-task-list {
    list-style: none;
    padding-left: 0;
}

.md-preview li > ul.md-task-list {
    padding-left: 0;
}

.md-preview li.md-task {
    display: block;
}

.md-preview li.md-task.md-li-nested {
    display: flex;
}

.md-preview li.md-task label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: default;
}

.md-preview li.md-task input {
    margin-top: 0.35em;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent);
}

.md-preview hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.6em 0;
}

.md-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
    display: block;
    margin: 1em 0;
}

.md-preview .md-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 1.15em 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-muted) 65%, transparent) transparent;
}

.md-preview .md-table-wrap:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.md-preview .md-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.md-preview .md-table-wrap::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 65%, transparent);
    border-radius: 999px;
}

.md-preview .md-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.md-preview table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.94em;
    line-height: 1.45;
}

.md-preview th,
.md-preview td {
    padding: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    background: transparent;
}

.md-preview th:last-child,
.md-preview td:last-child {
    border-right: 0;
}

.md-preview tbody tr:last-child td,
.md-preview tbody tr:last-child th {
    border-bottom: 0;
}

/* Inner box wraps text and sets a readable column floor. Extra columns past
   that floor widen the table so the wrap can scroll instead of crushing text. */
.md-preview .md-table-cell {
    box-sizing: border-box;
    min-width: 8.5rem;
    padding: 0.6em 0.8em;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.md-preview .md-table-cell a,
.md-preview .md-table-cell code {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.md-preview .md-table-cell code {
    white-space: break-spaces;
}

.md-preview .md-table-cell img {
    max-width: min(100%, 16rem);
    height: auto;
    margin: 0.35em 0;
}

.md-preview thead th {
    background: var(--accent-soft-strong);
    font-weight: 700;
    border-bottom-color: var(--accent-border);
}

.md-preview tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--text) 5%, transparent);
}

@media (max-width: 520px) {
    .md-preview .md-table-cell {
        min-width: 7.25rem;
        padding: 0.5em 0.65em;
    }
}

.dialog {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text);
    padding: 0;
    max-width: min(92vw, 420px);
}

.dialog--danger {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

.dialog--danger .dialog-body h2 {
    color: var(--danger);
}

.dialog--warn {
    border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
}

.dialog--warn .dialog-body h2 {
    color: var(--warn);
}

.dialog-emphasis {
    margin: -8px 0 18px !important;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text) !important;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.dialog::backdrop {
    background: var(--dialog-backdrop, rgba(11, 16, 32, 0.65));
}

.dialog--saving {
    max-width: min(92vw, 360px);
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    color-scheme: inherit;
    -webkit-appearance: none;
    appearance: none;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

.dialog--saving:focus,
.dialog--saving:focus-visible,
.dialog--saving:focus-within {
    outline: none !important;
    box-shadow: none !important;
}

.dialog--saving::backdrop {
    background: var(--saving-backdrop, var(--dialog-backdrop, rgba(11, 16, 32, 0.78)));
    pointer-events: all;
}

html[data-theme="blue"] .dialog::backdrop {
    background: rgba(11, 16, 32, 0.65);
}

html[data-theme="blue"] .dialog--saving::backdrop {
    background: rgba(11, 16, 32, 0.78);
}

html[data-theme="oled"] .dialog::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

html[data-theme="oled"] .dialog--saving::backdrop {
    background: rgba(0, 0, 0, 0.84);
}

html[data-theme="light"] .dialog::backdrop {
    background: rgba(21, 32, 51, 0.38);
}

html[data-theme="light"] .dialog--saving::backdrop {
    background: rgba(21, 32, 51, 0.48);
}

html[data-theme="light"] .dialog--saving {
    background: #ffffff;
    color: #152033;
    border-color: rgba(20, 32, 56, 0.12);
}

html[data-theme="oled"] .dialog--saving,
html[data-theme="oled"] .dialog--saving[data-oled-chrome],
.dialog--saving[data-oled-chrome] {
    background: #000000 !important;
    color: #f2f2f2 !important;
    /* iOS uses outline-style:auto (system blue) on focused dialogs — replace, don’t only unset. */
    border: 1px solid #4a4a4a !important;
    outline: 1px solid #4a4a4a !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    color-scheme: dark;
    accent-color: #c8c8c8;
    -webkit-appearance: none;
    appearance: none;
}

html[data-theme="oled"] .dialog--saving:focus,
html[data-theme="oled"] .dialog--saving:focus-visible,
html[data-theme="oled"] .dialog--saving:focus-within,
.dialog--saving[data-oled-chrome]:focus,
.dialog--saving[data-oled-chrome]:focus-visible,
.dialog--saving[data-oled-chrome]:focus-within {
    outline: 1px solid #4a4a4a !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: 1px solid #4a4a4a !important;
}

html[data-theme="oled"] .dialog--saving .loading-spinner,
.dialog--saving[data-oled-chrome] .loading-spinner {
    border-color: #2a2a2a !important;
    border-top-color: #c8c8c8 !important;
}

.saving-dialog-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    user-select: none;
    -webkit-user-select: none;
}

.saving-dialog-spinner {
    margin-bottom: 10px;
}

.saving-dialog-body h2 {
    margin-bottom: 6px;
}

.saving-dialog-body p {
    margin-bottom: 0;
}

.dialog-body {
    margin: 0;
    padding: 20px;
}

.dialog-body h2 {
    margin: 0 0 8px;
    font-size: 1.15rem;
}

.dialog-body p {
    margin: 0 0 18px;
    color: var(--text-muted);
    line-height: 1.4;
}

.dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.dialog-actions--triple {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dialog-actions--triple .btn-primary {
    grid-column: 1 / -1;
}

.dialog-actions--pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.dialog-actions--pair .btn {
    width: 100%;
}

@media (min-width: 420px) {
    .dialog-actions--triple {
        grid-template-columns: auto auto 1fr;
    }

    .dialog-actions--triple .btn-primary {
        grid-column: auto;
        justify-self: end;
    }
}

.item-actions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-action-btn {
    justify-content: flex-start;
    border-radius: 12px;
}

.dialog--color {
    max-width: min(94vw, 420px);
    width: 100%;
}

.dialog--color .dialog-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.file-color-preview {
    margin: 0 0 14px !important;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--file-text-color, var(--text)) !important;
    font-weight: 650;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
    text-align: center;
}

.file-color-preview.is-bold {
    font-family: "Archivo Black", "Outfit", system-ui, sans-serif;
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: 0.01em;
    text-shadow: 0 0 8px color-mix(in srgb, currentColor 5%, transparent);
}

.file-color-bold {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    margin: 0 0 14px;
    font-size: 0.95rem;
    font-weight: 600;
}

.dialog--color .file-color-label {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.file-color-swatches {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

.file-color-swatch {
    appearance: none;
    width: 100%;
    aspect-ratio: 1;
    min-height: 44px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: var(--swatch, var(--bg-input));
    cursor: pointer;
    touch-action: manipulation;
}

.file-color-swatch.is-selected {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
}

.file-color-swatch--default {
    background:
        linear-gradient(
            135deg,
            transparent 46%,
            var(--danger) 46%,
            var(--danger) 54%,
            transparent 54%
        ),
        var(--text);
}

html[data-theme="light"] .file-color-swatch {
    border-color: rgba(0, 0, 0, 0.16);
}

.file-color-sv {
    position: relative;
    height: 168px;
    margin: 0 0 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background-color: hsl(var(--color-hue, 210) 100% 50%);
    background-image:
        linear-gradient(to bottom, transparent, #000),
        linear-gradient(to right, #fff, transparent);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: crosshair;
}

.file-color-sv-thumb {
    position: absolute;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.4);
    background: var(--file-text-color, #fff);
    pointer-events: none;
    left: 50%;
    top: 50%;
}

.file-color-hue-label {
    display: block;
    margin: 0 0 16px;
}

.file-color-hue {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 36px;
    margin: 0;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: linear-gradient(
        to right,
        #ff0000,
        #ffff00,
        #00ff00,
        #00ffff,
        #0000ff,
        #ff00ff,
        #ff0000
    );
    cursor: pointer;
    touch-action: manipulation;
}

.file-color-hue::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.file-color-hue::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.dialog-actions--color {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dialog-actions--color #file-color-reset {
    grid-column: 1 / -1;
}

.dialog-actions--color #file-color-apply {
    grid-column: 2;
}

.dialog--move {
    max-width: min(96vw, 480px);
    width: 100%;
}

.dialog--move .dialog-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(84dvh, 640px);
}

.move-path-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 8px 6px 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-input);
}

.move-mode-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0 0 10px;
}

.move-mode-bar .btn-mode {
    min-height: 36px;
    font-size: 0.82rem;
}

.move-folder-list {
    flex: 1;
    min-height: 12rem;
    max-height: min(42dvh, 320px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-group);
}

.move-folder-row {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 14px 12px;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.move-folder-row:last-child {
    border-bottom: 0;
}

.move-folder-row:active {
    background: var(--accent-soft);
}

.move-folder-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 560;
}

.move-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 28px 14px;
    text-align: center;
    color: var(--text-muted);
}

.move-loading-label {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    max-width: 28ch;
}

.move-loading .loading-bar {
    margin-top: 0;
    width: min(100%, 200px);
}

.move-folder-list .file-row-icon img {
    filter: invert(0.88) brightness(0.95);
    opacity: 0.9;
}

@media (min-width: 640px) {
    .editor-active {
        gap: 8px;
    }
}

/* ——— List item stripe modes (Settings → List item stripes) ——— */

html[data-list-layout="segmented"][data-list-stripe="normal"],
html[data-list-layout="segmented"][data-list-stripe="zebra"],
html[data-list-layout="segmented"][data-list-stripe="spectrum"] {
    --list-stripe-pad-y: 8px;
    --list-stripe-pad-x: 10px;
    --list-stripe-radius: 8px;
}

/* Normal + segmented: uniform container fill (same colour for every item) */
html[data-list-stripe="normal"] {
    --list-stripe-uniform: rgba(255, 255, 255, 0.07);
}

html[data-theme="light"][data-list-stripe="normal"] {
    --list-stripe-uniform: #e8ecf2;
}

html[data-theme="oled"][data-list-stripe="normal"] {
    --list-stripe-uniform: #141414;
}

html[data-list-stripe="zebra"] {
    --list-stripe-a: rgba(255, 255, 255, 0.045);
    --list-stripe-b: rgba(255, 255, 255, 0.11);
    --list-stripe-text-a: #f2f4f8;
    --list-stripe-text-b: #9aa3b2;
}

html[data-theme="light"][data-list-stripe="zebra"] {
    --list-stripe-a: #ffffff;
    --list-stripe-b: #e6e9ee;
    --list-stripe-text-a: #141c28;
    --list-stripe-text-b: #6b7585;
}

html[data-theme="oled"][data-list-stripe="zebra"] {
    --list-stripe-a: #0c0c0c;
    --list-stripe-b: #1c1c1c;
    --list-stripe-text-a: #f0f0f0;
    --list-stripe-text-b: #8a8a8a;
}

/* Segmented: each item is its own container */
html[data-list-layout="segmented"][data-list-stripe="normal"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item),
html[data-list-layout="segmented"][data-list-stripe="zebra"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item),
html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item) {
    border-radius: var(--list-stripe-radius);
}

html[data-list-layout="segmented"][data-list-stripe="normal"] :is(
    .mdlist-view-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item),
html[data-list-layout="segmented"][data-list-stripe="zebra"] :is(
    .mdlist-view-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item),
html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-view-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item) {
    padding: var(--list-stripe-pad-y) var(--list-stripe-pad-x);
    margin: 2px 0;
}

html[data-list-layout="segmented"][data-list-stripe="normal"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item) {
    background: var(--list-stripe-uniform);
}

html[data-list-layout="segmented"][data-list-stripe="zebra"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(odd) {
    background: var(--list-stripe-a);
}

html[data-list-layout="segmented"][data-list-stripe="zebra"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(even) {
    background: var(--list-stripe-b);
}

html[data-list-layout="segmented"][data-list-stripe="normal"] .mdlist-view-item,
html[data-list-layout="segmented"][data-list-stripe="zebra"] .mdlist-view-item,
html[data-list-layout="segmented"][data-list-stripe="spectrum"] .mdlist-view-item {
    border-top-color: transparent;
}

/* Continuous: flowing list; stripe modes tint text colour */
html[data-list-layout="continuous"][data-list-stripe="zebra"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(odd) {
    color: var(--list-stripe-text-a);
}

html[data-list-layout="continuous"][data-list-stripe="zebra"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(even) {
    color: var(--list-stripe-text-b);
}

html[data-list-layout="continuous"][data-list-stripe="zebra"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item) :is(
    .mdlist-view-text,
    .mdlist-view-tags,
    .mdplain-view-text,
    .mdlist-rank,
    .mdplain-task-label
),
html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item) :is(
    .mdlist-view-text,
    .mdlist-view-tags,
    .mdplain-view-text,
    .mdlist-rank,
    .mdplain-task-label
) {
    color: inherit;
}

/* Spectrum backgrounds (segmented) + text colours (continuous) */
html[data-list-stripe="spectrum"] {
    --ls-0: hsl(0 58% 18% / 0.72);
    --ls-1: hsl(22.5 58% 17% / 0.72);
    --ls-2: hsl(45 56% 16% / 0.72);
    --ls-3: hsl(67.5 52% 15% / 0.72);
    --ls-4: hsl(90 50% 15% / 0.72);
    --ls-5: hsl(112.5 48% 15% / 0.72);
    --ls-6: hsl(135 50% 15% / 0.72);
    --ls-7: hsl(157.5 52% 15% / 0.72);
    --ls-8: hsl(180 52% 15% / 0.72);
    --ls-9: hsl(202.5 54% 16% / 0.72);
    --ls-10: hsl(225 56% 18% / 0.72);
    --ls-11: hsl(247.5 54% 18% / 0.72);
    --ls-12: hsl(270 52% 18% / 0.72);
    --ls-13: hsl(292.5 52% 17% / 0.72);
    --ls-14: hsl(315 54% 17% / 0.72);
    --ls-15: hsl(337.5 56% 17% / 0.72);
    --ls-text-0: hsl(0 72% 68%);
    --ls-text-1: hsl(22.5 72% 66%);
    --ls-text-2: hsl(45 74% 62%);
    --ls-text-3: hsl(67.5 70% 60%);
    --ls-text-4: hsl(90 68% 60%);
    --ls-text-5: hsl(112.5 66% 60%);
    --ls-text-6: hsl(135 68% 60%);
    --ls-text-7: hsl(157.5 68% 60%);
    --ls-text-8: hsl(180 68% 60%);
    --ls-text-9: hsl(202.5 70% 64%);
    --ls-text-10: hsl(225 72% 70%);
    --ls-text-11: hsl(247.5 70% 74%);
    --ls-text-12: hsl(270 68% 74%);
    --ls-text-13: hsl(292.5 68% 72%);
    --ls-text-14: hsl(315 70% 70%);
    --ls-text-15: hsl(337.5 72% 68%);
}

html[data-theme="light"][data-list-stripe="spectrum"] {
    --ls-0: hsl(0 70% 94%);
    --ls-1: hsl(22.5 70% 93%);
    --ls-2: hsl(45 72% 92%);
    --ls-3: hsl(67.5 60% 92%);
    --ls-4: hsl(90 55% 92%);
    --ls-5: hsl(112.5 50% 92%);
    --ls-6: hsl(135 50% 92%);
    --ls-7: hsl(157.5 48% 92%);
    --ls-8: hsl(180 48% 92%);
    --ls-9: hsl(202.5 55% 93%);
    --ls-10: hsl(225 60% 94%);
    --ls-11: hsl(247.5 55% 94%);
    --ls-12: hsl(270 50% 94%);
    --ls-13: hsl(292.5 50% 94%);
    --ls-14: hsl(315 55% 94%);
    --ls-15: hsl(337.5 60% 94%);
    --ls-text-0: hsl(0 65% 38%);
    --ls-text-1: hsl(22.5 65% 36%);
    --ls-text-2: hsl(45 68% 34%);
    --ls-text-3: hsl(67.5 55% 30%);
    --ls-text-4: hsl(90 50% 28%);
    --ls-text-5: hsl(112.5 48% 28%);
    --ls-text-6: hsl(135 48% 28%);
    --ls-text-7: hsl(157.5 48% 28%);
    --ls-text-8: hsl(180 48% 28%);
    --ls-text-9: hsl(202.5 55% 32%);
    --ls-text-10: hsl(225 55% 38%);
    --ls-text-11: hsl(247.5 50% 40%);
    --ls-text-12: hsl(270 48% 38%);
    --ls-text-13: hsl(292.5 48% 36%);
    --ls-text-14: hsl(315 52% 36%);
    --ls-text-15: hsl(337.5 55% 36%);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 1) {
    background: var(--ls-0);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 1) {
    color: var(--ls-text-0);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 2) {
    background: var(--ls-1);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 2) {
    color: var(--ls-text-1);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 3) {
    background: var(--ls-2);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 3) {
    color: var(--ls-text-2);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 4) {
    background: var(--ls-3);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 4) {
    color: var(--ls-text-3);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 5) {
    background: var(--ls-4);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 5) {
    color: var(--ls-text-4);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 6) {
    background: var(--ls-5);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 6) {
    color: var(--ls-text-5);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 7) {
    background: var(--ls-6);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 7) {
    color: var(--ls-text-6);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 8) {
    background: var(--ls-7);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 8) {
    color: var(--ls-text-7);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 9) {
    background: var(--ls-8);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 9) {
    color: var(--ls-text-8);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 10) {
    background: var(--ls-9);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 10) {
    color: var(--ls-text-9);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 11) {
    background: var(--ls-10);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 11) {
    color: var(--ls-text-10);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 12) {
    background: var(--ls-11);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 12) {
    color: var(--ls-text-11);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 13) {
    background: var(--ls-12);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 13) {
    color: var(--ls-text-12);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 14) {
    background: var(--ls-13);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 14) {
    color: var(--ls-text-13);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 15) {
    background: var(--ls-14);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 15) {
    color: var(--ls-text-14);
}

html[data-list-layout="segmented"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 16) {
    background: var(--ls-15);
}

html[data-list-layout="continuous"][data-list-stripe="spectrum"] :is(
    .mdlist-item,
    .mdlist-view-item,
    .mdplain-item,
    .mdplain-view-item,
    .md-preview ul > li,
    .md-preview ol > li
):not(.mdlist-empty-item):nth-child(16n + 16) {
    color: var(--ls-text-15);
}

/* —— Version history —— */
.dialog--history,
.dialog--history-preview {
    width: min(96vw, 560px);
    max-height: min(90dvh, 720px);
}

.history-body,
.history-preview-body {
    display: flex;
    flex-direction: column;
    max-height: min(90dvh, 720px);
    padding: 0;
    overflow: hidden;
}

.history-header,
.history-preview-header {
    flex-shrink: 0;
    padding: 20px 20px 8px;
}

.history-header h2,
.history-preview-header h2 {
    margin: 0 0 8px;
}

.history-status {
    margin: 0 20px 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.history-status.is-error {
    background: rgba(255, 90, 90, 0.12);
    color: #ffb4b4;
}

.history-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 12px 12px;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-input);
}

.history-item.is-current {
    border-color: var(--accent-border);
    background: var(--accent-soft);
}

.history-item-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
}

.history-item-time {
    font-weight: 600;
    color: var(--text);
}

.history-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.history-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

.history-badge--current {
    background: var(--accent-active-bg);
    color: var(--text);
}

.history-badge--protected {
    background: rgba(120, 200, 140, 0.16);
    color: #b7e6c2;
}

.history-item-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.history-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.history-item-actions .btn {
    flex: 1 1 auto;
    min-width: 7rem;
}

.history-footer,
.history-preview-actions {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

.history-preview-text {
    flex: 1 1 auto;
    min-height: 12rem;
    max-height: min(50dvh, 420px);
    margin: 0 12px;
    padding: 12px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-code);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    -webkit-overflow-scrolling: touch;
}

.history-preview-actions .btn {
    flex: 1 1 auto;
    min-width: 6.5rem;
}

.history-empty {
    margin: 12px;
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
}

.history-badge--named {
    background: rgba(255, 196, 90, 0.18);
    color: #ffd78a;
}

.conflict-review-label {
    display: block;
    margin: 8px 20px 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.conflict-review-pane {
    max-height: min(28dvh, 220px);
    min-height: 6rem;
}

/* Bullets whose text contains !!! */
html {
    --bullet-important-bg: hsl(40 68% 24%);
    --bullet-important-star: #ffd000;
}

html[data-theme="light"] {
    --bullet-important-bg: #ffe39a;
    --bullet-important-star: #c48a00;
}

html[data-theme="oled"] {
    --bullet-important-bg: #3a2c08;
    --bullet-important-star: #ffd000;
}

.mdplain-view-item.md-bullet-important > .mdplain-view-item-main,
.mdplain-view-item.md-bullet-important > .mdplain-mini-editor,
.mdlist-view-item.md-bullet-important,
.md-preview li.md-bullet-important > .md-bullet-important-row {
    position: relative;
    font-weight: 700;
    color: var(--text);
    padding-bottom: 22px;
}

.mdlist-item.md-bullet-important {
    position: relative;
    font-weight: 700;
    color: var(--text);
    padding-bottom: 28px;
}

.mdplain-view-item.md-bullet-important > .mdplain-view-item-main .mdplain-view-text,
.mdplain-view-item.md-bullet-important > .mdplain-view-item-main .mdplain-task-label,
.mdlist-view-item.md-bullet-important .mdlist-view-text,
.mdlist-item.md-bullet-important .mdlist-text,
.mdplain-view-item.md-bullet-important .mdplain-mini-text,
.md-preview li.md-bullet-important > .md-bullet-important-row {
    color: var(--text);
    font-weight: 700;
}

.md-preview li.md-bullet-important > .md-bullet-important-row {
    display: block;
    border-radius: 8px;
    background: var(--bullet-important-bg);
    padding: 6px 8px 22px;
}

.mdplain-view-item.md-bullet-important > .mdplain-view-item-main::after,
.mdplain-view-item.md-bullet-important > .mdplain-mini-editor::after,
.mdlist-view-item.md-bullet-important::after,
.mdlist-item.md-bullet-important::after,
.md-preview li.md-bullet-important > .md-bullet-important-row::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 3px;
    width: 16px;
    height: 16px;
    background-color: var(--bullet-important-star);
    -webkit-mask: url('/assets/SVGs/StarIcons.svg') center / contain no-repeat;
    mask: url('/assets/SVGs/StarIcons.svg') center / contain no-repeat;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7));
    pointer-events: none;
}

.mdlist-item.md-bullet-important .mdlist-text {
    font-weight: 700;
}

/* Beat list stripes and nested shells. */
html[data-list-layout="segmented"][data-list-stripe] li.mdplain-view-item.md-bullet-important[data-depth],
html[data-list-layout="segmented"][data-list-stripe] li.mdplain-item.md-bullet-important[data-depth],
html[data-list-layout="segmented"][data-list-stripe] li.mdlist-view-item.md-bullet-important:not(.mdlist-empty-item),
html[data-list-layout="segmented"][data-list-stripe] li.mdlist-item.md-bullet-important:not(.mdplain-item),
html[data-list-layout="continuous"] li.mdplain-view-item.md-bullet-important,
html[data-list-layout="continuous"] li.mdplain-item.md-bullet-important,
html[data-list-layout="continuous"] li.mdlist-view-item.md-bullet-important,
html[data-list-layout="continuous"] li.mdlist-item.md-bullet-important {
    background: var(--bullet-important-bg) !important;
    color: var(--text);
}

html[data-list-layout="segmented"][data-list-stripe] .md-preview li.md-bullet-important[data-depth] {
    background: transparent !important;
}

/* Text files in Finder / Pinned */
.file-group--text,
.file-group--pinned-text {
    background: color-mix(in srgb, #868e96 14%, transparent);
    border-color: color-mix(in srgb, #868e96 48%, var(--border));
}

.file-group--text .file-group-title,
.file-group--pinned-text .file-group-title {
    color: #ced4da;
}

html[data-theme="light"] .file-group--text .file-group-title,
html[data-theme="light"] .file-group--pinned-text .file-group-title {
    color: #495057;
}

html[data-theme="oled"] .file-group--text,
html[data-theme="oled"] .file-group--pinned-text {
    background: color-mix(in srgb, #adb5bd 10%, #000000);
    border-color: color-mix(in srgb, #adb5bd 38%, #000000);
}

.file-group--text .file-group-list .file-row + .file-row,
.file-group--pinned-text .file-group-list .file-row + .file-row {
    border-top-color: color-mix(in srgb, #868e96 28%, transparent);
}

.file-row--text .file-row-name {
    font-weight: 600;
}

.file-row--text .file-row-icon img {
    filter: invert(78%);
}

html[data-theme="light"] .file-row--text .file-row-icon img {
    filter: invert(30%);
}

/* + Note: tap = markdown, long-press = type chooser */
.btn-new-note {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.5s ease;
}

.btn-new-note.is-pressing {
    transform: scale(0.96);
    box-shadow: 0 0 0 4px var(--accent-active-ring);
}

.new-file-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.new-file-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 60px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.new-file-option:hover,
.new-file-option:focus-visible {
    border-color: var(--accent-border);
    background: var(--accent-soft);
}

.new-file-option:active {
    transform: scale(0.99);
}

.new-file-option img {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
}

.new-file-option--markdown img {
    filter: invert(58%) sepia(55%) saturate(1200%) hue-rotate(185deg) brightness(1.05);
}

.new-file-option--text img {
    filter: invert(78%);
}

.new-file-option--csv img {
    filter: invert(48%) sepia(55%) saturate(700%) hue-rotate(85deg) brightness(0.95);
}

html[data-theme="light"] .new-file-option--markdown img {
    filter: invert(28%) sepia(70%) saturate(1400%) hue-rotate(200deg) brightness(0.85);
}

html[data-theme="light"] .new-file-option--text img {
    filter: invert(30%);
}

html[data-theme="light"] .new-file-option--csv img {
    filter: invert(32%) sepia(60%) saturate(800%) hue-rotate(85deg) brightness(0.8);
}

.new-file-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.new-file-option-title {
    font-weight: 700;
}

.new-file-option-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.csv-help { flex: 0 0 auto; font-size: 0.85rem; overflow-wrap: anywhere; }
.csv-help summary { min-height: 44px; padding: 12px 8px; box-sizing: border-box; cursor: pointer; }
.csv-help p { margin: 0; padding: 0 8px 8px; max-height: 7rem; overflow: auto; }
.csv-input.csv-error { color: var(--danger, #d94040); }