:root {
    --paper: #f4efe3;
    --paper-deep: #e8dfcf;
    --ink: #171512;
    --ink-soft: #5f5a52;
    --red: #867213;
    --red-dark: #69580f;
    --accent-contrast: #fff;
    --accent-wash: rgba(165, 138, 11, 0.17);
    --accent-focus: rgba(134, 114, 19, 0.28);
    --line: rgba(23, 21, 18, 0.16);
    --white: #fffdf7;
    --panel: rgba(255, 253, 247, 0.9);
    --success: #2e6a47;
    --shadow: 0 20px 60px rgba(52, 42, 29, 0.12);
    --type-section-title: clamp(1.25rem, 2vw, 1.6rem);
    --type-page-title: var(--type-section-title);
}

html[data-accent='gold'] { --red: #867213; --red-dark: #69580f; --accent-wash: rgba(165, 138, 11, 0.17); --accent-focus: rgba(134, 114, 19, 0.28); }
html[data-accent='antique-gold'] { --red: #a58a0b; --red-dark: #806b08; --accent-wash: rgba(134, 114, 19, 0.18); --accent-focus: rgba(165, 138, 11, 0.28); }
html[data-accent='fire-red'] { --red: #af1e2d; --red-dark: #891621; --accent-wash: rgba(178, 31, 45, 0.15); --accent-focus: rgba(175, 30, 45, 0.28); }
html[data-accent='pigeon-blue'] { --red: #596274; --red-dark: #454d5c; --accent-wash: rgba(112, 122, 140, 0.2); --accent-focus: rgba(89, 98, 116, 0.28); }
html[data-accent='bronze'] { --red: #865d32; --red-dark: #684725; --accent-wash: rgba(155, 107, 63, 0.18); --accent-focus: rgba(134, 93, 50, 0.28); }
html[data-accent='slate'] { --red: #505968; --red-dark: #3d4552; --accent-wash: rgba(102, 112, 128, 0.18); --accent-focus: rgba(80, 89, 104, 0.28); }
html[data-accent='forest-green'] { --red: #3c634a; --red-dark: #2d4b37; --accent-wash: rgba(84, 119, 92, 0.18); --accent-focus: rgba(60, 99, 74, 0.28); }
html[data-accent='petrol'] { --red: #2e6672; --red-dark: #24505a; --accent-wash: rgba(57, 113, 122, 0.18); --accent-focus: rgba(46, 102, 114, 0.28); }
html[data-accent='cobalt-blue'] { --red: #2458a6; --red-dark: #1b4484; --accent-wash: rgba(36, 88, 166, 0.16); --accent-focus: rgba(36, 88, 166, 0.3); }
html[data-accent='violet'] { --red: #7052a7; --red-dark: #563d84; --accent-wash: rgba(112, 82, 167, 0.17); --accent-focus: rgba(112, 82, 167, 0.3); }
html[data-accent='black'] { --red: #171512; --red-dark: #000000; --accent-wash: rgba(23, 21, 18, 0.12); --accent-focus: rgba(23, 21, 18, 0.26); }
html[data-accent='none'] { --red: #6c6b68; --red-dark: #52514f; --accent-wash: rgba(89, 88, 85, 0.1); --accent-focus: rgba(89, 88, 85, 0.22); }

html[data-background='sand'] { --paper: #ead7b9; --paper-deep: #d8bd93; --white: #fbf4e8; --panel: rgba(251, 244, 232, 0.86); }
html[data-background='mist-blue'] { --paper: #d4e6ed; --paper-deep: #b8d4df; --white: #f5fbfd; --panel: rgba(245, 251, 253, 0.86); }
html[data-background='sage'] { --paper: #d9e7d2; --paper-deep: #bdd5b2; --white: #f7fbf4; --panel: rgba(247, 251, 244, 0.86); }
html[data-background='rose'] { --paper: #ecd7de; --paper-deep: #dcbac8; --white: #fdf7f9; --panel: rgba(253, 247, 249, 0.86); }
html[data-background='stone'] { --paper: #dce2df; --paper-deep: #c4cfca; --white: #f7faf8; --panel: rgba(247, 250, 248, 0.86); }
html[data-background='sky-blue'] { --paper: #c7e4f1; --paper-deep: #a9d0e2; --white: #f4fbfe; --panel: rgba(244, 251, 254, 0.85); }
html[data-background='mint'] { --paper: #cce8da; --paper-deep: #a8d4c0; --white: #f4fcf8; --panel: rgba(244, 252, 248, 0.85); }
html[data-background='lavender'] { --paper: #e2d8f0; --paper-deep: #cbbbe1; --white: #fbf8fe; --panel: rgba(251, 248, 254, 0.86); }
html[data-background='apricot'] { --paper: #f1d9c0; --paper-deep: #dfbc96; --white: #fff8f1; --panel: rgba(255, 248, 241, 0.86); }
html[data-background='white'] { --paper: #ffffff; --paper-deep: #e8eaed; --white: #ffffff; --panel: rgba(255, 255, 255, 0.9); }
html[data-background='custom'] { --paper: var(--custom-paper-light, #D8C4E8); --paper-deep: var(--custom-paper-deep-light, #C4AFD4); --white: var(--custom-white-light, #DCC9EB); --panel: var(--custom-panel-light, #E0CDED); }

html[data-theme='dark'] {
    --paper: #111313;
    --paper-deep: #252828;
    --ink: #f2eee5;
    --ink-soft: #bbb6ad;
    --red: #e0524d;
    --red-dark: #bd3c38;
    --accent-contrast: #171512;
    --line: rgba(242, 238, 229, 0.16);
    --white: #1b1e1e;
    --panel: rgba(27, 30, 30, 0.94);
    --success: #73bd8e;
    --shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
}

html[data-theme='dark'][data-accent='gold'] { --red: #d7b838; --red-dark: #b5971e; }
html[data-theme='dark'][data-accent='antique-gold'] { --red: #c1a33a; --red-dark: #a28628; }
html[data-theme='dark'][data-accent='fire-red'] { --red: #f06a73; --red-dark: #d14c57; }
html[data-theme='dark'][data-accent='pigeon-blue'] { --red: #b8c0ce; --red-dark: #98a2b2; }
html[data-theme='dark'][data-accent='bronze'] { --red: #d3a46b; --red-dark: #b98550; }
html[data-theme='dark'][data-accent='slate'] { --red: #b0bac9; --red-dark: #929dad; }
html[data-theme='dark'][data-accent='forest-green'] { --red: #91bd9d; --red-dark: #72a181; }
html[data-theme='dark'][data-accent='petrol'] { --red: #82bfc8; --red-dark: #64a2ac; }
html[data-theme='dark'][data-accent='cobalt-blue'] { --red: #86b4ff; --red-dark: #6697e5; }
html[data-theme='dark'][data-accent='violet'] { --red: #c7a9f0; --red-dark: #aa8bd5; }
html[data-theme='dark'][data-accent='black'] { --red: #e8e6e1; --red-dark: #c9c6c0; }
html[data-theme='dark'][data-accent='none'] { --red: #aaa8a2; --red-dark: #8a8883; }

html[data-theme='dark'][data-background='sand'] { --paper: #211a12; --paper-deep: #362917; --white: #2a2116; --panel: rgba(42, 33, 22, 0.9); }
html[data-theme='dark'][data-background='mist-blue'] { --paper: #102027; --paper-deep: #193743; --white: #162b34; --panel: rgba(22, 43, 52, 0.9); }
html[data-theme='dark'][data-background='sage'] { --paper: #132118; --paper-deep: #23402c; --white: #1c3022; --panel: rgba(28, 48, 34, 0.9); }
html[data-theme='dark'][data-background='rose'] { --paper: #24151d; --paper-deep: #422632; --white: #341d28; --panel: rgba(52, 29, 40, 0.9); }
html[data-theme='dark'][data-background='stone'] { --paper: #17201f; --paper-deep: #293735; --white: #202c2a; --panel: rgba(32, 44, 42, 0.9); }
html[data-theme='dark'][data-background='sky-blue'] { --paper: #102530; --paper-deep: #1b4456; --white: #173645; --panel: rgba(23, 54, 69, 0.9); }
html[data-theme='dark'][data-background='mint'] { --paper: #11261f; --paper-deep: #1d4939; --white: #17372c; --panel: rgba(23, 55, 44, 0.9); }
html[data-theme='dark'][data-background='lavender'] { --paper: #1e182b; --paper-deep: #36294b; --white: #2b203c; --panel: rgba(43, 32, 60, 0.9); }
html[data-theme='dark'][data-background='apricot'] { --paper: #291a11; --paper-deep: #4b2d1c; --white: #382115; --panel: rgba(56, 33, 21, 0.9); }
html[data-theme='dark'][data-background='white'] { --paper: #151515; --paper-deep: #292929; --white: #202020; --panel: rgba(32, 32, 32, 0.92); }
html[data-theme='dark'][data-background='custom'] { --paper: var(--custom-paper-dark, #251D2C); --paper-deep: var(--custom-paper-deep-dark, #382C41); --white: var(--custom-white-dark, #302638); --panel: var(--custom-panel-dark, #352A3D); }

* { box-sizing: border-box; }

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

html[data-font-size='small'] { font-size: 15px; }
html[data-font-size='standard'] { font-size: 16px; }
html[data-font-size='large'] { font-size: 17px; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background:
        radial-gradient(circle at 10% 0%, var(--accent-wash), transparent 26rem),
        repeating-linear-gradient(0deg, transparent 0, transparent 5px, rgba(64, 50, 35, 0.018) 6px),
        var(--paper);
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.65;
}

a { color: inherit; }
button, input, textarea, select { font: inherit; }

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}

.site-header--background {
    background-color: var(--paper);
    background-image: var(--header-background-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.site-header--background-soft {
    --header-background-tint: color-mix(in srgb, var(--paper) 28%, transparent);
    background-image: linear-gradient(var(--header-background-tint), var(--header-background-tint)), var(--header-background-image);
}
.site-header--background-strong {
    --header-background-tint: color-mix(in srgb, var(--paper) 52%, transparent);
    background-image: linear-gradient(var(--header-background-tint), var(--header-background-tint)), var(--header-background-image);
}

@media (min-width: 981px) {
    .site-body .site-header--with-logo {
        align-items: flex-end;
        padding-bottom: 12px;
    }
}

.page-hero {
    width: min(820px, calc(100% - 40px));
    height: clamp(180px, 25vw, 340px);
    margin: 0 auto 36px;
    overflow: hidden;
    background: var(--paper-deep);
    border-radius: 10px;
}

.page-hero--gradient {
    background: linear-gradient(125deg, var(--accent-wash), transparent 68%), var(--paper-deep);
}

.page-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-header-image-settings,
.page-seo-settings {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.page-header-image-settings > summary,
.page-seo-settings > summary {
    color: var(--ink);
    cursor: pointer;
    font-weight: 700;
}

.page-header-image-fields {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.page-header-image-fields p,
.page-header-image-fields small { margin: 0; }

.page-password-settings {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.page-password-settings > summary {
    color: var(--ink);
    cursor: pointer;
    font-weight: 700;
}

.page-password-fields {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.page-password-fields p,
.page-password-fields small { margin: 0; }

.page-password-gate {
    padding: clamp(20px, 4vw, 36px);
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: 10px;
}

.page-password-gate h1 { margin-bottom: 12px; }
.page-password-form { max-width: 420px; margin-top: 24px; }

.page-related-settings { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 5px; }
.page-related-settings > summary { color: var(--ink); cursor: pointer; font-weight: 700; }
.page-related-settings > p { margin: 0; }
.page-related-options { display: grid; gap: 6px; max-height: 260px; overflow: auto; padding: 10px; background: color-mix(in srgb, var(--panel) 72%, var(--paper)); border: 1px solid var(--line); border-radius: 4px; }
.page-related-options .check-row { margin: 0; }

.related-pages { margin-top: clamp(30px, 5vw, 52px); padding-top: 20px; border-top: 1px solid var(--line); }
.related-pages h2 { margin: 0 0 13px; color: var(--ink); font-size: 1.05rem; }
.related-pages ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.related-pages li { min-width: 0; }
.related-pages a { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; text-decoration: none; transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.related-pages a span { color: var(--red); }
.related-pages a:hover, .related-pages a:focus-visible { color: var(--red); background: var(--accent-wash); border-color: var(--red); transform: translateY(-1px); }
.related-pages--text a,
.related-pages--compact a { min-height: 0; padding: 2px 0; background: transparent; border: 0; border-radius: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.related-pages--text a:hover, .related-pages--text a:focus-visible,
.related-pages--compact a:hover, .related-pages--compact a:focus-visible { background: transparent; transform: none; }
.related-pages--text ul { gap: 6px 18px; }
.related-pages--compact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin-top: 18px; padding-top: 0; border-top: 0; font-size: .9rem; }
.related-pages--compact ul { display: inline-flex; flex-wrap: wrap; gap: 0; }
.related-pages--compact li + li::before { margin: 0 7px; color: var(--ink-soft); content: '·'; }
.related-pages--compact .related-pages-arrow { color: var(--ink-soft); font-weight: 700; }

.site-primary-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    gap: 20px;
    min-width: 0;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.86rem;
    font-weight: 650;
}

.site-primary-nav a {
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
}

.site-primary-nav a:hover,
.site-primary-nav a[aria-current='page'] {
    color: var(--red);
}

.site-extra-menu {
    position: relative;
    z-index: 30;
    flex: 0 0 auto;
    margin-left: 0;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.86rem;
    font-weight: 650;
}

.site-extra-menus { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; margin-left: 8px; }

.site-extra-menu > summary {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 13px;
    color: var(--ink-soft);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.site-extra-menu > summary::-webkit-details-marker { display: none; }
.site-extra-menu > summary::marker { content: ''; }
.site-extra-menu > summary:hover,
.site-extra-menu[open] > summary { color: var(--red); border-color: var(--red); }
.site-extra-menu--hamburger > summary { width: 42px; padding: 8px; }
.site-extra-menu-background--paper > summary,
.site-extra-menu-background--paper .site-extra-menu-panel { background: var(--paper); }
.site-extra-menu-hamburger { display: grid; width: 20px; gap: 4px; }
.site-extra-menu-hamburger span { height: 2px; background: currentColor; border-radius: 2px; }
.site-extra-menu-chevron { font-size: 1rem; transition: transform 160ms ease; }
.site-extra-menu[open] .site-extra-menu-chevron { transform: rotate(180deg); }

.site-extra-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: min(320px, calc(100vw - 32px));
    max-height: min(65vh, 420px);
    gap: 3px;
    overflow: auto;
    padding: 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.site-extra-menu-panel a {
    padding: 10px 12px;
    color: var(--ink-soft);
    border-radius: 6px;
    text-decoration: none;
}

.site-extra-menu-panel a:hover,
.site-extra-menu-panel a[aria-current='page'] { color: var(--red); background: var(--accent-wash); }

.site-extra-menu--text > summary,
.site-extra-menu--text.site-extra-menu-background--paper > summary {
    min-height: auto;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.site-extra-menu--text > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.site-extra-menu--text .site-extra-menu-chevron { font-size: .75rem; }
.site-extra-menu--text .site-extra-menu-panel {
    top: calc(100% + 10px);
    width: min(235px, calc(100vw - 32px));
    max-height: min(55vh, 320px);
    gap: 0;
    padding: 4px;
    background: var(--paper);
    border-radius: 5px;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--ink) 14%, transparent);
    backdrop-filter: none;
    font-size: .82rem;
}
.site-extra-menu--text .site-extra-menu-panel a { padding: 6px 9px; border-radius: 3px; }

.extra-menu-admin-panel { display: grid; gap: 22px; padding: clamp(16px, 3vw, 28px); }
.extra-menu-admin-panel .settings-copy p { max-width: 760px; }
.extra-menu-navigation-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.extra-menu-navigation-links a { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 14px 16px; color: var(--ink); background: color-mix(in srgb, var(--panel) 70%, var(--paper)); border: 1px solid var(--line); border-radius: 5px; text-decoration: none; }
.extra-menu-navigation-links a:hover { border-color: var(--red); background: var(--accent-wash); }
.extra-menu-navigation-links a > span { color: var(--ink-soft); font-size: .82rem; line-height: 1.45; }
.extra-menu-navigation-links a > .extra-menu-navigation-action { margin-top: 3px; color: var(--red); font-weight: 700; }
@media (max-width: 640px) { .extra-menu-navigation-links { grid-template-columns: minmax(0, 1fr); } }
.extra-menu-page-picker { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 15px; border: 1px solid var(--line); border-radius: 6px; }
.extra-menu-page-picker legend { padding: 0 6px; font-weight: 700; }
.extra-menu-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.extra-menu-add-row select { flex: 1 1 240px; min-width: 0; }
.extra-menu-selected-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.extra-menu-selected-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 9px 10px 9px 13px; background: color-mix(in srgb, var(--panel) 70%, var(--paper)); border: 1px solid var(--line); border-radius: 5px; }
.extra-menu-selected-title { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.extra-menu-item-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.extra-menu-item-actions button { min-width: 34px; min-height: 34px; padding: 4px 8px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.extra-menu-item-actions button:hover:not(:disabled),
.extra-menu-item-actions button:focus-visible { color: var(--accent-contrast); background: var(--red); border-color: var(--red); }
.extra-menu-item-actions button:disabled { opacity: .4; cursor: not-allowed; }
.extra-menu-empty { margin: 0; padding: 12px; color: var(--ink-soft); background: color-mix(in srgb, var(--panel) 70%, var(--paper)); border: 1px dashed var(--line); border-radius: 5px; }

.site-search {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: normal;
    text-transform: none;
}

.site-search-toggle {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 8px;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.site-search-toggle svg {
    display: block;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.site-search-toggle:hover,
.site-search-toggle:focus-visible,
.site-search-toggle[aria-expanded='true'] {
    color: var(--red);
    background: var(--accent-wash);
    border-color: var(--line);
    outline: none;
    box-shadow: var(--hover-shadow, 0 0 0 2px var(--accent-focus));
}

.site-search-panel {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    display: grid;
    gap: 10px;
    width: min(390px, calc(100vw - 28px));
    max-height: min(70vh, 520px);
    padding: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-color: color-mix(in srgb, var(--ink) 38%, var(--paper)) color-mix(in srgb, var(--paper) 72%, var(--panel));
    scrollbar-width: thin;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    font-size: 0.9rem;
    letter-spacing: normal;
    text-transform: none;
}

.site-search-panel::-webkit-scrollbar {
    width: 10px;
}

.site-search-panel::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--paper) 72%, var(--panel));
    border-radius: 8px;
}

.site-search-panel::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink) 38%, var(--paper));
    border: 2px solid color-mix(in srgb, var(--paper) 72%, var(--panel));
    border-radius: 8px;
}

.site-search-panel::-webkit-scrollbar-thumb:hover {
    background: var(--red);
}

.site-search-panel[hidden] { display: none; }

.site-search--footer .site-search-panel {
    top: auto;
    bottom: calc(100% + 9px);
}

.site-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 8px;
}

.site-search-form input {
    min-width: 0;
    min-height: 42px;
    margin: 0;
}

.site-search-close {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    align-self: center;
    padding: 0;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.15rem;
}

.site-search-close:hover,
.site-search-close:focus-visible { color: var(--red); border-color: var(--red); outline: none; }

.site-search-status {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.site-search-results {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-search-result {
    display: grid;
    gap: 3px;
    padding: 10px;
    color: var(--ink);
    background: color-mix(in srgb, var(--panel) 70%, var(--paper));
    border: 1px solid var(--line);
    border-radius: 5px;
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.site-search-result:hover,
.site-search-result:focus-visible {
    border-color: var(--red);
    outline: none;
    box-shadow: var(--hover-shadow, 0 0 0 2px var(--accent-focus));
}

.site-search-result-type {
    color: var(--red);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-search-result-snippet {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.8rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
}

.brand > span:last-child {
    overflow: hidden;
    max-width: min(30vw, 280px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-mark {
    width: 30px;
    height: 30px;
    border: 7px solid var(--red);
    border-radius: 48% 52% 46% 54%;
    transform: rotate(-12deg);
}

.brand-logo {
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
}

.quiet-link,
.text-action {
    color: var(--ink-soft);
    text-underline-offset: 4px;
}

.quiet-link:hover,
.text-action:hover { color: var(--red); }

.site-body {
    background: var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
}

.site-body--gradient {
    background: linear-gradient(110deg, var(--accent-wash), transparent 36%), var(--paper);
}

.site-body--background-image {
    background-color: var(--paper);
    background-image: var(--site-background-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.site-body--background-repeat {
    background-position: top left;
    background-size: auto;
    background-repeat: repeat;
}

.site-body--background-overlay-soft {
    background-image: linear-gradient(var(--panel), var(--panel)), var(--site-background-image);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}

.site-body--background-overlay-soft.site-body--background-repeat {
    background-position: top left, top left;
    background-size: auto, auto;
    background-repeat: repeat, repeat;
}

.site-body--background-overlay-dark {
    background-image: linear-gradient(rgba(0, 0, 0, 0.43), rgba(0, 0, 0, 0.43)), var(--site-background-image);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}

.site-body--background-overlay-dark.site-body--background-repeat {
    background-position: top left, top left;
    background-size: auto, auto;
    background-repeat: repeat, repeat;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.admin-body .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
}

.admin-body .admin-product-mark { justify-self: end; }

.admin-product-mark {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--ink);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
}

.admin-product-mark strong {
    font-weight: 800;
}

.admin-product-mark span {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.admin-product-mark:hover,
.admin-product-mark:focus-visible {
    color: var(--accent);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 12px;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 99px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--ink);
    border-color: var(--red);
}

.theme-toggle-icon {
    width: 14px;
    height: 14px;
    background: linear-gradient(90deg, var(--red) 50%, transparent 50%);
    border: 2px solid var(--red);
    border-radius: 50%;
}

main {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.eyebrow {
    margin: 0 0 14px;
    color: var(--red);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.12; }

.content-grid {
    display: grid;
    gap: 18px;
    width: min(960px, 100%);
    margin: 0 auto;
    padding: 52px 0 90px;
}

.content-grid--cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-grid--cards .content-card,
.content-grid--magazine .content-card:not(.content-card--magazine-featured) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 190px 1fr;
}

.content-grid--cards .content-card.no-image,
.content-grid--magazine .content-card.no-image {
    grid-template-rows: 1fr;
}

.content-grid--cards .card-image,
.content-grid--magazine .content-card:not(.content-card--magazine-featured) .card-image {
    height: 190px;
    min-height: 190px;
}

.content-grid--magazine {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-grid--magazine .content-card--magazine-featured {
    grid-column: 1 / -1;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
    min-height: 300px;
}

.content-grid--magazine .content-card--magazine-featured.no-image {
    grid-template-columns: minmax(0, 1fr);
}

.content-grid--magazine .content-card--magazine-featured .card-image {
    height: 100%;
    min-height: 300px;
}

.content-card {
    display: grid;
    grid-template-columns: minmax(190px, 270px) minmax(0, 1fr);
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(23, 21, 18, 0.04);
    transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.content-card.no-image {
    grid-template-columns: 1fr;
}

.content-grid--stripe .content-card { grid-template-columns: minmax(0, 1fr); }
.content-grid--stripe .content-card > .card-heading { margin: 0; padding: clamp(22px, 3vw, 34px); }
.content-grid--stripe .content-card > .card-heading h2 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); }
.content-grid--stripe .content-card > .card-image { display: block; width: 100%; height: clamp(170px, 25vw, 260px); min-height: 0; }
.content-grid--stripe-flat .content-card > .card-image { height: clamp(114px, 16.7vw, 174px); }
.content-grid--stripe .content-card > .card-image img { width: 100%; height: 100%; object-fit: cover; }
.content-grid--stripe .content-card > .card-copy { padding: clamp(22px, 3vw, 34px); }
.content-grid--stripe .content-card.no-image > .card-heading { padding-bottom: 0; }

.content-card:hover {
    border-color: var(--accent-focus);
    box-shadow: 0 10px 28px rgba(23, 21, 18, 0.11);
    transform: translateY(-2px);
}

.card-image {
    min-height: 210px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: zoom-in;
}

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

.card-image:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: -3px;
}

.image-lightbox {
    position: fixed;
    inset: auto;
    top: 50%;
    left: 50%;
    width: auto;
    max-width: min(96vw, 1800px);
    max-height: 94vh;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
    transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.image-lightbox.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-duration: 420ms;
}

.image-lightbox::backdrop {
    background: rgba(0, 0, 0, 0);
    transition: background 200ms ease;
}

.image-lightbox.is-visible::backdrop {
    background: rgba(0, 0, 0, 0.82);
    transition-duration: 420ms;
}

.image-lightbox img {
    display: block;
    max-width: min(96vw, 1800px);
    max-height: 94vh;
    object-fit: contain;
    cursor: zoom-out;
}

@media (prefers-reduced-motion: reduce) {
    .image-lightbox,
    .image-lightbox::backdrop {
        transition-duration: 0.01ms;
    }
}

.admin-layout.media-admin-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}
.media-admin-layout .editor-panel { position: static; }
.media-library-content { min-width: 0; margin-top: 20px; }
.media-library-content > .list-tools { margin-top: 0; }
.media-library-disclosure > summary h2 { margin: 0; }
.media-library-disclosure > summary .info-icon-button { margin-left: -4px; }
.media-library-summary-count {
    display: grid;
    min-width: 30px;
    height: 30px;
    margin-left: auto;
    place-items: center;
    padding: 0 8px;
    color: var(--ink-soft);
    background: var(--paper-deep);
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 750;
}

.entry-list.media-entry-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 245px), 1fr));
    gap: 16px;
    max-height: none;
    padding: 8px 2px 2px;
    overflow: visible;
}
.entry-row.media-entry-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    background: color-mix(in srgb, var(--panel) 82%, var(--paper));
    border: 1px solid var(--line);
    border-radius: 8px;
}
.media-entry-row .media-entry-preview {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 5px;
}
.media-entry-row .media-entry-preview .entry-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.media-entry-row .entry-summary {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
}
.media-entry-row .entry-summary h3,
.media-entry-row .entry-summary > p { overflow-wrap: anywhere; }
.media-entry-row .entry-summary h3 { margin: 0; }
.media-entry-row .markdown-snippet { margin-top: 4px; }
.media-entry-row .markdown-copy { margin-top: 4px; }
.media-entry-row .entry-actions { margin-top: 4px; }

@media (max-width: 560px) {
    .entry-list.media-entry-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
    .media-entry-row .media-entry-preview { width: 100%; height: auto; }
}

.card-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(24px, 4vw, 38px);
}

.card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.card-copy h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--type-section-title);
    font-weight: 720;
    letter-spacing: -0.025em;
}

.card-featured {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--red);
    font-size: 1.05rem;
    line-height: 1;
}

.entry-date {
    flex: 0 0 auto;
    margin-top: 2px;
    padding: 4px 8px;
    color: var(--ink-soft);
    background: var(--accent-wash);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.body-text {
    color: var(--ink-soft);
    font-size: 0.96rem;
    line-height: 1.62;
}

.text-expander summary {
    list-style: none;
    cursor: pointer;
}

.text-expander summary::-webkit-details-marker { display: none; }

.expand-label {
    margin-left: 4px;
    color: var(--red);
    font-size: 0.82rem;
    font-weight: 750;
    white-space: nowrap;
}

.expand-less { display: none; }

.text-expander[open] .text-preview,
.text-expander[open] .expand-more { display: none; }

.text-expander[open] .expand-less {
    display: inline-block;
    margin: 0 0 10px;
}

.text-full { color: var(--ink-soft); }

.text-expander summary:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 4px;
    border-radius: 2px;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 18px;
    color: var(--red);
    font-size: 0.86rem;
    font-weight: 750;
    text-decoration: none;
}

.card-link:hover { color: var(--red-dark); }

.card-link span {
    transition: transform 140ms ease;
}

.card-link:hover span { transform: translateX(3px); }

.pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    width: min(960px, 100%);
    margin: -50px auto 90px;
    color: var(--ink-soft);
    font-size: 0.84rem;
    font-weight: 700;
}

.pagination-link {
    width: fit-content;
    padding: 9px 12px;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
}

.pagination-link:hover {
    color: var(--red);
    border-color: var(--red);
}

.pagination-link:last-child { justify-self: end; }

.pagination-link.is-disabled {
    opacity: 0.38;
}

.pagination-current {
    text-align: center;
    white-space: nowrap;
}

.empty-state {
    display: grid;
    justify-items: center;
    padding: 90px 20px 130px;
    text-align: center;
}

.empty-state h2 {
    margin: 26px 0 4px;
    font-size: 1.5rem;
    font-weight: 700;
}

.empty-state p,
.muted { color: var(--ink-soft); }

.ink-circle {
    width: 92px;
    height: 92px;
    border: 16px solid var(--ink);
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0.8;
    transform: rotate(-25deg);
}

.site-footer {
    display: flex;
    justify-content: space-between;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 28px 0 40px;
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-brand {
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
}

.footer-nav a {
    color: var(--ink-soft);
    text-decoration: none;
}

.footer-nav a:hover { color: var(--red); }

.footer-legal {
    color: inherit;
    text-decoration: none;
}

.footer-legal:hover { color: var(--red); }

.footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    min-width: 0;
}

.footer-consent {
    padding: 0;
    color: var(--ink-soft);
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.footer-consent:hover,
.footer-consent:focus-visible { color: var(--red); }

.page-main {
    min-height: calc(100vh - 210px);
    padding: 64px 0 100px;
}

.page-article,
.archive-section {
    width: min(820px, 100%);
    margin: 0 auto;
}

.page-article h1,
.archive-section h1 {
    margin: 0 0 30px;
    font-size: var(--type-page-title);
    font-weight: 750;
    letter-spacing: -0.045em;
}

.page-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 30px;
}
.page-title-row h1 { flex: 1 1 auto; min-width: 0; margin: 0; }
.admin-title-edit {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--ink-soft);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.admin-title-edit:hover,
.admin-title-edit:focus-visible {
    color: var(--accent-contrast, #fff);
    background: var(--red);
    border-color: var(--red);
    transform: translateY(-1px);
}
.card-heading > .admin-title-edit { margin-top: 2px; }

.page-body {
    color: var(--ink-soft);
    font-size: 0.96rem;
    line-height: 1.62;
}

.page-body .markdown-content-container {
    margin: 1.5em 0;
    padding: clamp(16px, 2.5vw, 28px);
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: 10px;
}

.page-body .markdown-content-container > :first-child { margin-top: 0; }
.page-body .markdown-content-container > :last-child { margin-bottom: 0; }

.page-body > :first-child { margin-top: 0; }

.page-body p,
.page-body ul,
.page-body ol,
.page-body blockquote,
.page-body pre,
.markdown-table-wrap {
    margin: 0 0 1.35em;
}

.page-body h2,
.page-body h3,
.page-body h4 {
    margin: 1.75em 0 0.65em;
    color: var(--ink);
    font-weight: 760;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.page-body h2 { font-size: var(--type-section-title); }
.page-body h3 { font-size: 1.12rem; }
.page-body h4 { font-size: 1rem; }

.page-body a {
    color: var(--red);
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.page-body strong { color: var(--ink); }

.page-body ul,
.page-body ol { padding-left: 1.25em; }

.page-body blockquote {
    padding: 2px 0 2px 18px;
    color: var(--ink);
    border-left: 3px solid var(--red);
}

.page-body blockquote p { margin: 0; }

.markdown-admin-rating,
.rating-editor-preview {
    color: var(--red);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
}

.markdown-admin-rating { margin: 1rem 0; }
.rating-editor-preview { min-height: 1.7em; margin: 0; }
.markdown-admin-rating--percent,
.rating-editor-preview--percent {
    display: flex;
    width: min(420px, 100%);
    align-items: center;
    gap: 12px;
    font-size: 0.92rem;
    letter-spacing: 0;
}
.rating-preview-track {
    appearance: none;
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 80px;
    height: 12px;
    overflow: hidden;
    background: var(--red-dark);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.rating-preview-track::-webkit-progress-bar {
    background: var(--red-dark);
    border-radius: 999px;
}
.rating-preview-track::-webkit-progress-value {
    background: var(--red);
    border-radius: inherit;
}
.rating-preview-track::-moz-progress-bar {
    background: var(--red);
    border-radius: 999px;
}
.rating-preview-value { min-width: 3.2em; color: var(--ink); text-align: right; }
.markdown-admin-rating--rank,
.rating-editor-preview--rank {
    width: fit-content;
    padding: 0.4em 0.8em;
    color: var(--ink);
    background: var(--accent-wash);
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: 4px;
    font-size: 1rem;
    letter-spacing: 0;
}
.rating-editor-preview--rank { min-height: 0; }
#rating-editor [hidden] { display: none !important; }
.page-body hr {
    height: 1px;
    margin: 2em 0;
    background: var(--line);
    border: 0;
}

.page-body code,
.markdown-snippet,
.markdown-help code {
    padding: 0.12em 0.35em;
    color: var(--ink);
    background: var(--paper-deep);
    border-radius: 2px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.86em;
}

.page-body pre {
    overflow-x: auto;
    padding: 16px;
    background: var(--paper-deep);
    border: 1px solid var(--line);
}

.page-body pre code {
    padding: 0;
    background: transparent;
}

.page-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5em 0;
}

.page-image {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 1.5em 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: zoom-in;
}

.page-image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: inherit;
}

.page-image:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
}

.page-image--left { margin-right: auto; }

.page-image--center { margin-inline: auto; }

.page-image--right { margin-left: auto; }

.page-image--wrap.page-image--left {
    float: left;
    margin: 0.35em 1.35em 0.7em 0;
}

.page-image--wrap.page-image--right {
    float: right;
    margin: 0.35em 0 0.7em 1.35em;
}

.markdown-gallery {
    display: grid;
    width: 100%;
    margin: 0 0 1.35em;
}

.markdown-gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.markdown-gallery-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.markdown-gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.markdown-gallery-gap-small { gap: 8px; }
.markdown-gallery-gap-medium { gap: 16px; }
.markdown-gallery-gap-large { gap: 28px; }

.markdown-gallery .page-image {
    width: 100%;
    max-width: none;
    margin: 0;
}

.markdown-gallery .page-image img { width: 100%; }

.page-body::after {
    display: table;
    clear: both;
    content: '';
}

.youtube-embed {
    width: min(100%, 900px);
    aspect-ratio: 16 / 9;
    margin: 1.5em 0;
    overflow: hidden;
    background: var(--paper-deep);
    border: 1px solid var(--line);
}

.youtube-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.youtube-placeholder {
    display: grid;
    align-content: center;
    justify-items: start;
    height: 100%;
    padding: clamp(20px, 5vw, 44px);
    color: var(--ink-soft);
    background: linear-gradient(135deg, var(--accent-wash), transparent 70%), var(--paper-deep);
}

.youtube-placeholder p { margin: 0 0 10px; }
.youtube-placeholder .eyebrow { color: var(--red); }

.download-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: min(100%, 760px);
    margin: 1.5em 0;
    padding: 22px;
    background: linear-gradient(135deg, var(--accent-wash), transparent 72%), var(--panel);
    border: 1px solid var(--line);
    border-left: 4px solid var(--red);
    border-radius: 4px 20px 4px 4px;
}

.download-card-copy { min-width: 0; }
.download-card-copy .eyebrow { margin-bottom: 8px; color: var(--red); }

.download-card h2 {
    margin: 0;
    color: var(--ink);
    font-size: var(--type-section-title);
    font-weight: 760;
}

.download-card-copy > p:last-child {
    margin: 8px 0 0;
    color: var(--ink-soft);
}

.download-card .button { flex: 0 0 auto; }

.download-card.is-disabled {
    border-left-color: var(--ink-soft);
    opacity: 0.72;
}

.download-unavailable { cursor: not-allowed; }
.download-missing { color: var(--ink-soft); }

.download-confirm-dialog {
    width: min(560px, calc(100vw - 28px));
    margin: auto;
    padding: 0;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px 28px 4px 4px;
    box-shadow: var(--shadow);
}

.download-confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.62); }

.download-confirm-dialog-content {
    display: grid;
    gap: 18px;
    padding: clamp(24px, 5vw, 38px);
}

.download-confirm-dialog-content h2,
.download-confirm-dialog-content p { margin: 0; }

.download-confirm-dialog-content h2 {
    font-size: var(--type-section-title);
    font-weight: 760;
}

.download-confirm-page {
    width: min(720px, calc(100% - 40px));
    margin: 0 auto;
    padding: 64px 0 90px;
}

.download-confirm-page-card {
    display: grid;
    gap: 20px;
    padding: clamp(28px, 6vw, 52px);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px 34px 4px 4px;
    box-shadow: 0 10px 28px rgba(23, 21, 18, 0.08);
}

.download-confirm-page-card h1,
.download-confirm-page-card p { margin: 0; }

.download-confirm-page-card h1 {
    font-size: var(--type-page-title);
    font-weight: 760;
}

.download-description { color: var(--ink-soft); }

.youtube-consent-dialog {
    width: min(560px, calc(100vw - 28px));
    margin: auto;
    padding: 0;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.youtube-consent-dialog::backdrop { background: rgba(0, 0, 0, 0.62); }

.youtube-consent-dialog-content {
    display: grid;
    gap: 18px;
    padding: clamp(24px, 5vw, 38px);
}

.youtube-consent-dialog-content h2,
.youtube-consent-dialog-content p { margin: 0; }

.youtube-consent-dialog-content h2 {
    font-size: var(--type-section-title);
    font-weight: 760;
}

.markdown-table-wrap { overflow-x: auto; }

.markdown-table-width-25 { width: min(25%, 100%); }
.markdown-table-width-50 { width: min(50%, 100%); }
.markdown-table-width-75 { width: min(75%, 100%); }
.markdown-table-width-100 { width: 100%; }
.markdown-table-align-center { margin-left: auto; margin-right: auto; }
.markdown-table-align-right { margin-left: auto; }

.page-body table {
    width: 100%;
    min-width: 440px;
    border-collapse: collapse;
    color: var(--ink);
    font-size: 0.9em;
}

.page-body th,
.page-body td {
    padding: 10px 12px;
    text-align: left;
    border: 1px solid var(--line);
}

.page-body th {
    color: var(--ink);
    background: var(--accent-wash);
    font-weight: 760;
}

.not-found > p:not(.eyebrow) { color: var(--ink-soft); }

.archive-list {
    display: grid;
    gap: 12px;
    margin-top: 36px;
}

.archive-link-row { display: flex; align-items: stretch; gap: 8px; }
.archive-link-row > .archive-link { flex: 1 1 auto; }
.archive-link-row > .admin-title-edit { align-self: center; }

.archive-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.archive-link:hover {
    border-color: var(--accent-focus);
    box-shadow: 0 8px 22px rgba(23, 21, 18, 0.1);
    transform: translateY(-1px);
}

.admin-body {
    background: linear-gradient(110deg, var(--accent-wash), transparent 36%), var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

.admin-body.admin-body--gradient-disabled {
    background: var(--paper);
}

.admin-body.site-body--background-image {
    background-color: var(--paper);
    background-image: var(--site-background-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.admin-body.site-body--background-repeat {
    background-position: top left;
    background-size: auto;
    background-repeat: repeat;
}

.admin-body.site-body--background-overlay-soft {
    background-image: linear-gradient(var(--panel), var(--panel)), var(--site-background-image);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}

.admin-body.site-body--background-overlay-soft.site-body--background-repeat {
    background-position: top left, top left;
    background-size: auto, auto;
    background-repeat: repeat, repeat;
}

.admin-body.site-body--background-overlay-dark {
    background-image: linear-gradient(rgba(0, 0, 0, 0.43), rgba(0, 0, 0, 0.43)), var(--site-background-image);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}

.admin-body.site-body--background-overlay-dark.site-body--background-repeat {
    background-position: top left, top left;
    background-size: auto, auto;
    background-repeat: repeat, repeat;
}

/* Das Bild liegt auf einer eigenen Ebene hinter dem Inhalt. So kann es nicht
   von einer Hintergrundfarbe des Browsers oder einer Seitenfläche überdeckt werden. */
.site-body--background-image,
.admin-body.site-body--background-image {
    position: relative;
    isolation: isolate;
    background-image: none;
}

.site-body--background-image::before,
.admin-body.site-body--background-image::before {
    position: fixed;
    z-index: 0;
    inset: var(--site-background-inset, 0px);
    display: block;
    background-color: var(--paper);
    background-image: var(--site-background-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(var(--site-background-blur, 0px));
    content: '';
    pointer-events: none;
}

.site-body--background-repeat::before,
.admin-body.site-body--background-repeat::before {
    background-position: top left;
    background-size: auto;
    background-repeat: repeat;
}

.site-body--background-overlay-soft::before,
.admin-body.site-body--background-overlay-soft::before {
    background-image: linear-gradient(var(--panel), var(--panel)), var(--site-background-image);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}

.site-body--background-overlay-soft.site-body--background-repeat::before,
.admin-body.site-body--background-overlay-soft.site-body--background-repeat::before {
    background-position: top left, top left;
    background-size: auto, auto;
    background-repeat: repeat, repeat;
}

.site-body--background-overlay-dark::before,
.admin-body.site-body--background-overlay-dark::before {
    background-image: linear-gradient(rgba(0, 0, 0, 0.43), rgba(0, 0, 0, 0.43)), var(--site-background-image);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}

.site-body--background-overlay-dark.site-body--background-repeat::before,
.admin-body.site-body--background-overlay-dark.site-body--background-repeat::before {
    background-position: top left, top left;
    background-size: auto, auto;
    background-repeat: repeat, repeat;
}

.site-body--background-image > :is(.site-header, main, .site-footer),
.admin-body.site-body--background-image > :is(.site-header, main) {
    position: relative;
    z-index: 1;
}

.admin-main { padding: 60px 0 100px; }

.admin-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 38px;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: var(--shadow);
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 66px;
    padding: 14px 22px;
    color: var(--ink-soft);
    border-right: 1px solid var(--line);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.admin-nav-link:nth-child(3n) { border-right: 0; }

.admin-nav-link:hover {
    color: var(--ink);
    background: var(--accent-wash);
}

.admin-nav-link.is-active {
    color: var(--accent-contrast);
    background: var(--red);
}

.admin-nav-number {
    opacity: 0.62;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
}

.admin-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.overview-card {
    display: grid;
    gap: 5px;
    min-height: 112px;
    padding: 20px;
    color: var(--ink-soft);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 3px 20px 3px 3px;
    box-shadow: 0 1px 2px rgba(23, 21, 18, 0.05);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.overview-card:hover {
    color: var(--ink);
    border-color: var(--red);
    background: var(--accent-wash);
}

.overview-number {
    color: var(--red);
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.overview-stats-panel {
    display: grid;
    gap: 18px;
    margin-bottom: 28px;
    padding: clamp(20px, 3vw, 30px);
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(23, 21, 18, 0.05);
}
.overview-stats-panel .settings-copy h2 { margin: 0; font-size: 1.15rem; }
.overview-stats-panel .settings-copy .eyebrow { margin-bottom: 6px; }
.overview-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr));
    gap: 12px;
}
.overview-stat-card {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 15px;
    background: color-mix(in srgb, var(--panel) 72%, var(--paper));
    border: 1px solid var(--line);
    border-radius: 4px;
}
.overview-stat-label { color: var(--ink-soft); font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.overview-stat-card .overview-number { font-size: clamp(1.15rem, 2vw, 1.45rem); overflow-wrap: anywhere; }
.overview-stat-card small { line-height: 1.45; }
.overview-stats-note { margin: 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.5; }
.page-views-panel { min-width: 0; }
.page-views-disclosure-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.page-views-disclosure-summary::-webkit-details-marker { display: none; }
.page-views-summary-copy { display: grid; gap: 4px; }
.page-views-summary-copy .eyebrow { margin: 0; }
.page-views-summary-copy > strong { color: var(--ink); font-size: 1.15rem; }
.page-views-summary-copy > small { color: var(--ink-soft); font-size: .8rem; }
.page-views-disclosure-icon { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; color: var(--red); border: 1px solid var(--line); border-radius: 50%; font-size: 1.2rem; transition: transform 160ms ease, color 160ms ease, background 160ms ease; }
.page-views-panel[open] > .page-views-disclosure-summary .page-views-disclosure-icon { color: var(--accent-contrast); background: var(--red); border-color: var(--red); transform: rotate(45deg); }
.page-views-disclosure-summary:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 4px; }
.page-views-content { display: grid; gap: 18px; min-width: 0; }
.page-views-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.page-views-heading .settings-copy > p:last-child { margin: 5px 0 0; color: var(--ink-soft); font-size: .82rem; }
.page-views-period-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.page-views-period-form label { width: 100%; color: var(--ink-soft); font-size: .78rem; font-weight: 700; }
.page-views-period-form select { min-width: 150px; min-height: 40px; }
.page-views-total { display: flex; align-items: baseline; gap: 10px; padding: 13px 15px; background: color-mix(in srgb, var(--panel) 72%, var(--paper)); border: 1px solid var(--line); border-radius: 4px; }
.page-views-total strong { color: var(--red); font-size: 1.6rem; letter-spacing: -.04em; }
.page-views-total span { color: var(--ink-soft); font-size: .84rem; }
.page-views-table-wrap { max-width: 100%; max-height: min(60vh, 460px); overflow: auto; border: 1px solid var(--line); }
.page-views-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.page-views-table th, .page-views-table td { padding: 10px 11px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.page-views-table thead th { position: sticky; top: 0; z-index: 1; color: var(--ink-soft); background: var(--panel); font-size: .75rem; }
.page-views-table th:first-child, .page-views-table td:first-child { text-align: left; }
.page-views-table tbody th { min-width: 170px; font-weight: 700; }
.page-views-table tbody th small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: .72rem; font-weight: 400; }
.page-views-table thead small { font-weight: 400; }
.page-views-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.page-views-admin-setting, .page-views-reset-form { display: grid; align-content: start; justify-items: start; gap: 10px; padding: 14px; background: color-mix(in srgb, var(--panel) 72%, var(--paper)); border: 1px solid var(--line); border-radius: 4px; }
.page-views-controls .check-row { align-items: flex-start; }
.page-views-controls .check-row input { flex: 0 0 18px; }
.page-views-controls small { color: var(--ink-soft); font-size: .76rem; line-height: 1.45; }
.login-security-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); align-items: center; gap: 16px; margin-bottom: 28px; padding: 18px 22px; background: var(--panel); border: 1px solid var(--line); }
.login-security-summary .eyebrow { margin: 0 0 4px; }
.login-security-summary h2 { margin: 0; font-size: 1rem; }
.login-security-summary p:last-child { margin: 6px 0 0; font-size: .84rem; }
.login-security-summary > small { color: var(--ink-soft); font-size: .76rem; line-height: 1.45; }

.overview-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.overview-notes-panel { display: grid; gap: 18px; margin-top: 20px; }
.overview-notes-panel .settings-copy h2 { margin-bottom: 0; }
.overview-notes-form { display: grid; gap: 0; min-width: 0; }
.overview-notes-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.overview-notes-tabs [role='tab'] { min-height: 38px; padding: 8px 13px; color: var(--ink-soft); background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 3px 3px 0 0; cursor: pointer; font-size: 0.84rem; font-weight: 700; }
.overview-notes-tabs [role='tab']:hover, .overview-notes-tabs [role='tab']:focus-visible { color: var(--red); outline: 2px solid var(--accent-focus); outline-offset: 1px; }
.overview-notes-tabs [role='tab'][aria-selected='true'] { color: var(--red); background: var(--paper-deep); border-color: var(--line); }
.overview-notes-form [role='tabpanel'] { padding: 10px; background: var(--paper-deep); border: 1px solid var(--line); border-top: 0; }
.overview-notes-form textarea { display: block; width: 100%; min-height: 125px; margin: 0; resize: vertical; line-height: 1.5; }
.overview-notes-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.overview-notes-actions small { color: var(--ink-soft); font-size: 0.78rem; }
.overview-actions > .button-row { justify-content: flex-end; }

@media (max-width: 640px) {
    .login-security-summary { grid-template-columns: minmax(0, 1fr); }
}

.auth-panel,
.editor-panel,
.entries-panel,
.settings-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.admin-body .auth-panel,
.admin-body .editor-panel,
.admin-body .entries-panel,
.admin-body .settings-panel,
.admin-body .frontpage-settings,
.admin-body .admin-nav {
    box-shadow: 0 1px 2px rgba(23, 21, 18, 0.05);
}

.auth-panel {
    width: min(560px, 100%);
    margin: 40px auto;
    padding: clamp(32px, 6vw, 64px);
    border-radius: 4px 36px 4px 4px;
}

.auth-panel h1,
.admin-heading h1 {
    margin: 0 0 12px;
    font-size: var(--type-page-title);
    font-weight: 750;
    letter-spacing: -0.045em;
    color: var(--red);
}

.auth-panel > p:not(.eyebrow),
.admin-heading p:last-child { color: var(--ink-soft); }

.form-stack {
    display: grid;
    gap: 16px;
    margin-top: 34px;
}

.form-stack label:not(.check-row) {
    display: grid;
    gap: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
}

small {
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 400;
}

input,
textarea,
select {
    width: 100%;
    color: var(--ink);
    background: var(--white);
    border: 1px solid rgba(23, 21, 18, 0.28);
    border-radius: 2px;
    outline: none;
}

input {
    min-height: 48px;
    padding: 10px 13px;
}

select {
    min-height: 48px;
    padding: 10px 36px 10px 13px;
}

input[type='file'] { padding: 9px; }

textarea {
    min-height: 210px;
    padding: 14px;
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--accent-focus);
}

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
}

.check-row input {
    width: 18px;
    min-height: 18px;
    accent-color: var(--red);
}

.footer-link-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
}

.footer-link-switch input {
    position: absolute;
    width: 1px;
    min-height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.footer-link-switch-control {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--line);
    border-radius: 99px;
    transition: background 160ms ease;
}

.footer-link-switch-control::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    content: '';
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(23, 21, 18, 0.22);
    transition: transform 160ms ease;
}

.footer-link-switch input:checked + .footer-link-switch-control { background: var(--red); }
.footer-link-switch input:checked + .footer-link-switch-control::after { transform: translateX(18px); }
.footer-link-switch input:focus-visible + .footer-link-switch-control { outline: 3px solid var(--accent-focus); outline-offset: 3px; }

.placement-options {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 3px;
}

.placement-options legend {
    padding: 0 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
}

.search-page-exclusions {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-color: color-mix(in srgb, var(--ink) 38%, var(--paper)) color-mix(in srgb, var(--paper) 72%, var(--panel));
    scrollbar-width: thin;
}

.search-page-protected {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.search-page-protected small { font-style: italic; }

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 19px;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.button-primary {
    color: var(--accent-contrast);
    background: var(--red);
}

.page-body a.button-primary { color: #171512; }

.button-primary:hover { background: var(--red-dark); }

.button-secondary {
    color: var(--ink);
    background: transparent;
    border-color: var(--line);
}

.button-secondary:hover { background: rgba(23, 21, 18, 0.05); }

.flash {
    width: min(760px, 100%);
    margin: 0 auto 28px;
    padding: 14px 18px;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 5px solid var(--ink-soft);
    font-family: Arial, Helvetica, sans-serif;
}

.flash-success { border-left-color: var(--success); }
.flash-error { border-left-color: var(--red); }

.admin-nav + .flash {
    margin-top: -18px;
    margin-bottom: 38px;
}

.admin-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 44px;
}

.admin-heading p { margin-bottom: 0; }

.settings-panel {
    padding: clamp(22px, 3vw, 38px);
    border-radius: 3px 36px 3px 3px;
}

.settings-copy {
    max-width: 660px;
}

.settings-copy h2,
.placeholder-panel h2 {
    margin: 0;
    font-size: var(--type-page-title);
    font-weight: 750;
    letter-spacing: -0.045em;
    color: var(--red);
}

.settings-copy > p:last-child,
.placeholder-panel > p:last-child {
    color: var(--ink-soft);
}

.security-information-list {
    max-height: min(72vh, 900px);
    margin-top: 28px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-color: color-mix(in srgb, var(--ink) 38%, var(--paper)) color-mix(in srgb, var(--paper) 72%, var(--panel));
    scrollbar-width: thin;
}

.security-information-list::-webkit-scrollbar { width: 10px; }

.security-information-list::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--paper) 72%, var(--panel));
    border-radius: 8px;
}

.security-information-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink) 38%, var(--paper));
    border: 2px solid color-mix(in srgb, var(--paper) 72%, var(--panel));
    border-radius: 8px;
}

.security-information-list::-webkit-scrollbar-thumb:hover { background: var(--red); }

.security-information-details {
    border-top: 1px solid var(--line);
}

.security-information-details > summary {
    padding: 18px 0 12px;
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
}

.security-information-details > pre {
    margin: 8px 0 0;
    padding: 18px;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Admin-Überschriften verwenden durchgängig die aktive Akzentfarbe. */
.admin-body h1,
.admin-body h2,
.admin-body h3,
.admin-body .admin-disclosure > summary,
.admin-body .editor-disclosure > summary,
.admin-body .security-information-details > summary,
.admin-body .page-header-image-settings > summary,
.admin-body .page-seo-settings > summary,
.admin-body .page-password-settings > summary {
    color: var(--red);
}

/* Der Markdown-Editor bleibt eine Frontend-Vorschau und behält dessen Textfarbe. */
.admin-body .markdown-preview h1,
.admin-body .markdown-preview h2,
.admin-body .markdown-preview h3 { color: var(--ink); }

.maintenance-settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
    align-items: start;
    gap: clamp(24px, 4vw, 48px);
    margin-bottom: 28px;
}

.backup-settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
    align-items: start;
    gap: clamp(24px, 4vw, 48px);
    margin-bottom: 28px;
}

.backup-actions {
    display: grid;
    gap: 16px;
}

.backup-actions form {
    display: grid;
    gap: 8px;
}

.backup-actions small { color: var(--ink-soft); }

.update-package-settings,
.current-version-settings { margin-bottom: 28px; }

.system-settings-disclosure {
    display: block;
    padding: 0;
    margin-bottom: 28px;
}

.system-settings-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: clamp(22px, 3vw, 38px);
    cursor: pointer;
    list-style: none;
}

.system-settings-summary::-webkit-details-marker { display: none; }

.system-settings-summary:focus-visible {
    outline: 3px solid var(--accent-focus);
    outline-offset: -3px;
}

.system-settings-summary > .settings-copy { max-width: 850px; }

.system-settings-summary .settings-copy h2 { margin: 0; }

.system-settings-summary .settings-copy > p:last-child { margin-bottom: 0; }

.system-settings-toggle {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--red);
    border: 1px solid var(--line);
    border-radius: 50%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 160ms ease, color 160ms ease, background 160ms ease;
}

.system-settings-disclosure[open] > .system-settings-summary .system-settings-toggle {
    color: var(--accent-contrast);
    background: var(--red);
    border-color: var(--red);
    transform: rotate(45deg);
}

.system-settings-content {
    padding: 0 clamp(22px, 3vw, 38px) clamp(22px, 3vw, 38px);
}

.system-settings-content .update-package-content { width: 100%; }

.system-settings-content .security-information-list {
    max-height: min(62vh, 760px);
    margin-top: 0;
}

.current-version-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 30px);
}

.current-version-column {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
    padding: clamp(18px, 2.5vw, 28px);
    background: color-mix(in srgb, var(--panel) 72%, var(--paper));
    border: 1px solid var(--line);
}

.current-version-column h3 {
    margin: 0;
    font-size: var(--type-section-title);
}

.current-version-column > p,
.current-version-column > small { margin: 0; }

.current-version-column .form-stack { margin: 0; }

.current-version-status { margin: 0; }

.current-version-column code { overflow-wrap: anywhere; }

.update-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.update-title-row h2 { margin: 0; }

.update-info-button {
    display: inline-grid;
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    place-items: center;
    padding: 0;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
}

.update-info-button:hover,
.update-info-button:focus-visible {
    color: var(--accent-contrast);
    background: var(--red);
    border-color: var(--red);
    outline: none;
}

.info-icon-button {
    display: inline-grid;
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    place-items: center;
    padding: 0;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
}

.info-icon-button:hover,
.info-icon-button:focus-visible {
    color: var(--accent-contrast);
    background: var(--red);
    border-color: var(--red);
    outline: none;
}

.media-disclosure-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.media-library-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.update-help-dialog {
    width: min(560px, calc(100vw - 28px));
}

.update-help-form { gap: 18px; }

.update-help-copy {
    display: grid;
    gap: 12px;
    line-height: 1.6;
}

.update-help-copy p { margin: 0; }

.update-package-content,
.update-package-preview {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.update-package-summary {
    display: grid;
    gap: 6px;
}

.update-package-summary p,
.update-package-preview > p { margin: 0; }

.update-package-status {
    padding: 12px 14px;
    border-left: 3px solid var(--green, #4ca87c);
    background: var(--panel-raised, var(--panel));
}

.update-package-status--warning {
    border-left-color: var(--red);
}

.update-package-file-list {
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--line);
    background: var(--panel-raised, var(--panel));
}

.update-package-file-list ul {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.update-package-file-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 0.88rem;
}

.update-package-file-list li:last-child { border-bottom: 0; }
.update-package-file-list code { overflow-wrap: anywhere; }
.update-package-file-list li span { flex: 0 0 auto; color: var(--ink-soft); }

.update-install-form {
    padding: 16px;
    border: 1px solid var(--line);
    background: var(--panel-raised, var(--panel));
}

.update-install-form > p { margin: 0; }

.maintenance-access-form {
    width: min(100%, 440px);
    margin-top: 34px;
}

.form-error {
    margin: 0;
    color: var(--red);
    font-weight: 700;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 800px;
    margin-top: 38px;
}

.theme-option {
    display: grid;
    gap: 7px;
    padding: 18px;
    text-align: left;
    border: 3px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13);
    transition: border-color 140ms ease, transform 140ms ease;
}

.theme-option:hover { transform: translateY(-2px); }

.theme-option.is-active {
    border-color: var(--red);
    outline: 2px solid var(--panel);
    outline-offset: -5px;
}

.theme-option-light {
    color: #171512;
    background: #f4efe3;
}

.theme-option-dark {
    color: #f2eee5;
    background: #151717;
}

.theme-option small { color: currentColor; opacity: 0.68; }

.theme-preview {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-rows: 32px 32px;
    gap: 7px;
    height: 88px;
    margin-bottom: 8px;
    padding: 8px;
    background: currentColor;
    border-radius: 2px;
    opacity: 0.9;
}

.theme-preview span {
    background: var(--red);
    border-radius: 1px;
}

.theme-preview span:first-child {
    grid-row: 1 / 3;
    opacity: 0.34;
}

.theme-preview span:last-child { opacity: 0.56; }

.theme-current {
    margin: 24px 0 0;
    color: var(--ink-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings-divider {
    height: 1px;
    margin: 32px 0;
    background: var(--line);
}

.admin-disclosure {
    border-bottom: 1px solid var(--line);
}

.admin-disclosure:last-child { border-bottom: 0; }

.admin-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    cursor: pointer;
    color: var(--ink);
    font-size: var(--type-section-title);
    font-weight: 750;
    letter-spacing: -0.035em;
    list-style: none;
}

.admin-disclosure > summary::-webkit-details-marker { display: none; }

.admin-disclosure > summary > span:last-child {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    color: var(--red);
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 160ms ease, color 160ms ease, background 160ms ease;
}

.admin-disclosure[open] > summary > span:last-child {
    color: var(--accent-contrast);
    background: var(--red);
    border-color: var(--red);
    transform: rotate(45deg);
}

.admin-disclosure-content { padding: 6px 0 28px; }

.admin-disclosure-content > p {
    max-width: 720px;
    margin: 0;
    color: var(--ink-soft);
}

.admin-disclosure-content > .form-stack { margin-top: 22px; }

.favicon-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
}

.favicon-preview img {
    display: block;
    width: 32px;
    height: 32px;
    padding: 4px;
    object-fit: contain;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.branding-form { max-width: 680px; }

.header-background-form { max-width: 680px; }
.header-background-preview {
    display: block;
    width: 100%;
    height: clamp(120px, 18vw, 200px);
    object-fit: cover;
    object-position: center;
    border: 1px solid var(--line);
    border-radius: 7px;
}
.header-background-preview[hidden] { display: none; }
.header-background-form [data-header-tint-options].is-disabled { opacity: .55; }

.branding-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    background: var(--paper-deep);
    border: 1px solid var(--line);
}

.branding-preview-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.branding-preview-brand .brand-logo { max-width: 32vw; height: auto; }

.branding-preview-brand strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.branding-preview > span {
    flex: 0 0 auto;
    color: var(--ink-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.branding-dimensions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.branding-dimensions label {
    display: grid;
    gap: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
}

.accent-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    max-width: 900px;
    margin-top: 34px;
}

.custom-accent-form { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; max-width: 900px; margin-top: 18px; padding: 16px; background: var(--paper-deep); border: 1px solid var(--line); }
.custom-accent-form label { display: grid; gap: 7px; font-family: Arial, Helvetica, sans-serif; font-size: .82rem; font-weight: 800; }
.custom-accent-form input[type='color'] { width: 82px; height: 44px; padding: 4px; }

.accent-option {
    display: grid;
    justify-items: start;
    gap: 9px;
    min-height: 116px;
    padding: 14px;
    color: var(--ink);
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: 3px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    transition: border-color 140ms ease, transform 140ms ease;
}

.accent-option:hover {
    border-color: var(--swatch);
    transform: translateY(-2px);
}

.accent-option.is-active {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--accent-focus);
}

.font-size-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 680px;
    margin-top: 34px;
}

.font-size-option {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 104px;
    padding: 14px;
    color: var(--ink);
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: 3px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    transition: border-color 140ms ease, transform 140ms ease;
}

.font-size-option:hover {
    border-color: var(--red);
    transform: translateY(-2px);
}

.font-size-option.is-active {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--accent-focus);
}

.font-size-sample {
    color: var(--red);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
    line-height: 1;
}

.font-size-option--small .font-size-sample { font-size: 1.4rem; }
.font-size-option--standard .font-size-sample { font-size: 1.8rem; }
.font-size-option--large .font-size-sample { font-size: 2.2rem; }

.hover-effect-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    max-width: 900px;
    margin-top: 34px;
}

.hover-effect-option {
    display: grid;
    justify-items: center;
    gap: 12px;
    min-height: 104px;
    padding: 14px;
    color: var(--ink);
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: 3px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
}

.hover-effect-option:hover,
.hover-effect-option.is-active {
    border-color: var(--red);
}

.hover-effect-option.is-active {
    box-shadow: 0 0 0 3px var(--accent-focus);
}

.hover-effect-sample {
    display: block;
    width: 74px;
    height: 34px;
    background: var(--red);
    border-radius: 2px;
}

.hover-effect-option--shadow .hover-effect-sample {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), 0 2px 5px rgba(0, 0, 0, 0.18);
}

.hover-effect-option--glow .hover-effect-sample {
    box-shadow: 0 14px 32px var(--accent-focus), 0 3px 8px var(--accent-focus), 0 0 20px var(--accent-focus);
}

.hover-effect-option--lift .hover-effect-sample {
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
    transform: translateY(-4px);
}

.hover-effect-option--zoom .hover-effect-sample {
    transform: scale(1.1);
}

.hover-effect-demo-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 22px;
    color: var(--ink-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
}

.background-image-preview {
    display: block;
    width: min(100%, 360px);
    max-height: 180px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 3px;
}

.background-image-blur-control {
    display: grid;
    gap: 7px;
}

.background-image-blur-control input[type='range'] { width: min(100%, 480px); accent-color: var(--red); }
.background-image-blur-control output { color: var(--red); font-weight: 750; }

html[data-hover-effect] :is(button, a.button, .content-card, .page-image) {
    transition: box-shadow 160ms ease, transform 160ms ease;
}

html[data-hover-effect='shadow'] :is(button, a.button, .content-card, .page-image):hover {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34), 0 3px 7px rgba(0, 0, 0, 0.18);
}

html[data-hover-effect='glow'] :is(button, a.button, .content-card, .page-image):hover {
    box-shadow: 0 16px 36px var(--accent-focus), 0 4px 10px var(--accent-focus), 0 0 22px var(--accent-focus);
}

html[data-hover-effect='lift'] :is(button, a.button, .content-card, .page-image):hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
    transform: translateY(-4px);
}

html[data-hover-effect='zoom'] :is(button, a.button, .content-card, .page-image):hover {
    position: relative;
    z-index: 1;
    transform: scale(1.035);
}

html[data-hover-effect='none'] :is(button, a.button, .content-card, .page-image):hover {
    box-shadow: none;
    transform: none;
}

html[data-hover-effect] .page-image.page-image--no-hover:hover {
    box-shadow: none;
    transform: none;
}

.accent-swatch {
    width: 100%;
    height: 54px;
    background: var(--swatch);
    border: 1px solid rgba(23, 21, 18, 0.08);
    border-radius: 2px 14px 2px 2px;
}

.background-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 900px;
    margin-top: 34px;
}

.background-option {
    display: grid;
    justify-items: start;
    gap: 9px;
    min-height: 116px;
    padding: 14px;
    color: var(--ink);
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: 3px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    transition: border-color 140ms ease, transform 140ms ease;
}

.background-option:hover {
    border-color: var(--red);
    transform: translateY(-2px);
}

.background-option.is-active {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--accent-focus);
}

.background-swatch {
    width: 100%;
    height: 54px;
    background: var(--background-swatch);
    border: 1px solid rgba(23, 21, 18, 0.1);
    border-radius: 2px 14px 2px 2px;
}

.background-option--paper { --background-swatch: #f4efe3; }
.background-option--sand { --background-swatch: #ead7b9; }
.background-option--mist-blue { --background-swatch: #d4e6ed; }
.background-option--sage { --background-swatch: #d9e7d2; }
.background-option--rose { --background-swatch: #ecd7de; }
.background-option--stone { --background-swatch: #dce2df; }
.background-option--sky-blue { --background-swatch: #c7e4f1; }
.background-option--mint { --background-swatch: #cce8da; }
.background-option--lavender { --background-swatch: #e2d8f0; }
.background-option--apricot { --background-swatch: #f1d9c0; }
.background-option--white { --background-swatch: #ffffff; }
.background-option--custom { --background-swatch: var(--custom-paper-light, #D8C4E8); }

.custom-background-form { max-width: 560px; margin-top: 28px; }
.custom-text-color-form { max-width: 560px; }
.custom-background-color-fields { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: end; gap: 12px; }
.custom-background-color-fields label { display: grid; gap: 7px; font-family: Arial, Helvetica, sans-serif; font-size: 0.82rem; font-weight: 800; }
.custom-background-color-fields input[type='color'] { width: 72px; height: 44px; padding: 4px; }

.accent-gold { --swatch: #a58a0b; }
.accent-antique-gold { --swatch: #867213; }
.accent-fire-red { --swatch: #b21f2d; }
.accent-pigeon-blue { --swatch: #707a8c; }
.accent-bronze { --swatch: #9b6b3f; }
.accent-slate { --swatch: #667080; }
.accent-forest-green { --swatch: #54775c; }
.accent-petrol { --swatch: #39717a; }
.accent-cobalt-blue { --swatch: #2458a6; }
.accent-violet { --swatch: #7052a7; }
.accent-black { --swatch: #171512; }
.accent-none { --swatch: #888782; }

.placeholder-panel {
    display: grid;
    min-height: 360px;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.placeholder-mark {
    display: grid;
    width: 78px;
    height: 78px;
    margin-bottom: 26px;
    place-items: center;
    color: var(--accent-contrast);
    background: var(--red);
    border-radius: 50% 46% 52% 44%;
    font-size: 2rem;
    font-style: italic;
}

.admin-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.86fr) minmax(400px, 1.14fr);
    gap: 28px;
    align-items: start;
}

.frontpage-settings {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
    padding: 26px 30px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: var(--shadow);
}

.frontpage-settings h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 500;
}

.frontpage-settings p:last-child {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.frontpage-settings-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    width: min(100%, 470px);
}

.frontpage-settings-form label {
    display: grid;
    gap: 6px;
    min-width: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
}

.frontpage-settings-form select { min-width: 100px; }

.frontpage-settings-form .startpage-choice {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
}

.frontpage-settings-form .startpage-choice .check-row {
    display: flex;
    align-items: center;
    min-width: 0;
}
.frontpage-settings-form .startpage-page-select { min-width: 0; }
.frontpage-settings-form .startpage-page-select select { min-width: 0; width: 100%; }

.editor-panel,
.entries-panel { padding: clamp(24px, 4vw, 42px); }

.editor-panel {
    position: sticky;
    top: 20px;
}

.editor-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    color: var(--ink);
    font-size: var(--type-section-title);
    font-weight: 720;
    letter-spacing: -0.02em;
    list-style: none;
}

.editor-disclosure > summary::-webkit-details-marker { display: none; }

.editor-disclosure > summary > span:last-child {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--red);
    border: 1px solid var(--line);
    border-radius: 50%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 160ms ease, color 160ms ease, background 160ms ease;
}

.editor-disclosure[open] > summary > span:last-child {
    color: var(--accent-contrast);
    background: var(--red);
    border-color: var(--red);
    transform: rotate(45deg);
}

.editor-disclosure > .panel-intro,
.editor-disclosure > .editor-panel-heading,
.editor-disclosure > .form-stack { margin-top: 20px; }

.editor-panel h2,
.entries-panel h2 {
    margin: 0;
    font-size: var(--type-section-title);
    font-weight: 720;
    letter-spacing: -0.02em;
}

.editor-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.panel-width-toggle {
    flex: 0 0 auto;
    min-width: 42px;
    min-height: 34px;
    padding: 5px 9px;
    color: var(--red);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: -0.08em;
}

.panel-width-toggle:hover,
.panel-width-toggle:focus-visible {
    color: var(--accent-contrast);
    background: var(--red);
    border-color: var(--red);
    outline: none;
}

.pages-admin-layout.page-editor-expanded {
    grid-template-columns: 1fr;
}

.pages-admin-layout.page-editor-expanded .editor-panel {
    position: static;
}

.page-list-view-toggle { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; padding: 8px; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.page-list-view-toggle svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.page-list-view-toggle:hover, .page-list-view-toggle:focus-visible, .page-list-view-toggle[aria-pressed='true'] { color: var(--accent-contrast); background: var(--red); border-color: var(--red); outline: none; }

.panel-intro {
    margin: 14px 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

.markdown-input {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.88rem;
    line-height: 1.6;
}

.markdown-input,
.markdown-preview {
    scrollbar-color: color-mix(in srgb, var(--ink) 58%, var(--paper)) var(--paper-deep);
    scrollbar-width: thin;
}

.markdown-input::-webkit-scrollbar,
.markdown-preview::-webkit-scrollbar {
    width: 10px;
}

.markdown-input::-webkit-scrollbar-track,
.markdown-preview::-webkit-scrollbar-track {
    background: var(--paper-deep);
    border-radius: 8px;
}

.markdown-input::-webkit-scrollbar-thumb,
.markdown-preview::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink) 58%, var(--paper));
    border: 2px solid var(--paper-deep);
    border-radius: 8px;
}

.markdown-input::-webkit-scrollbar-thumb:hover,
.markdown-preview::-webkit-scrollbar-thumb:hover {
    background: var(--ink-soft);
}

.markdown-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px;
    background: var(--paper-deep);
    border: 1px solid var(--line);
}

.markdown-view-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.markdown-editor-search { display: inline-flex; align-items: center; gap: 3px; min-width: 0; margin-left: 4px; }
.markdown-editor-search[hidden] { display: none; }
.markdown-editor-search input { width: clamp(120px, 17vw, 185px); min-height: 30px; padding: 4px 7px; font-size: .76rem; }
.markdown-editor-search button { width: 30px; height: 30px; padding: 0; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.markdown-editor-search button:hover, .markdown-editor-search button:focus-visible { color: var(--accent-contrast); background: var(--red); border-color: var(--red); outline: none; }
.markdown-editor-search button:disabled { opacity: .45; cursor: default; }
.markdown-editor-search span { min-width: 32px; color: var(--ink-soft); font-size: .72rem; font-variant-numeric: tabular-nums; text-align: right; }

.markdown-plugin-index {
    margin: 4px 0 0;
    padding: 9px 11px;
    background: var(--paper-deep);
    border: 1px solid var(--line);
    border-radius: 3px;
}

.markdown-plugin-index[hidden] { display: none !important; }
.markdown-plugin-index > summary { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 0.86rem; font-weight: 750; }
.markdown-plugin-index-count { color: var(--ink-soft); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.markdown-plugin-index-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.markdown-plugin-index-item { position: relative; min-height: 32px; padding: 5px 9px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; font-size: 0.8rem; font-weight: 650; }
.markdown-plugin-index-item.is-plugin { padding-left: 19px; }
.markdown-plugin-index-item.is-plugin::before { position: absolute; bottom: 7px; left: 7px; width: 5px; height: 5px; background: var(--red); border: 1px solid color-mix(in srgb, var(--red) 72%, var(--ink)); border-radius: 50%; content: ''; }
.markdown-plugin-index-item:hover, .markdown-plugin-index-item:focus-visible { color: var(--accent-contrast); background: var(--red); border-color: var(--red); outline: none; }
.markdown-plugin-index > small { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 0.75rem; }

.markdown-view-button {
    min-height: 30px;
    padding: 5px 11px;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
}

.markdown-view-button:hover,
.markdown-view-button:focus-visible,
.markdown-view-button.is-active {
    color: var(--accent-contrast);
    background: var(--red);
    border-color: var(--red);
    outline: none;
}

.markdown-preview-status {
    margin-left: auto;
    color: var(--ink-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
}

.markdown-preview {
    min-height: 360px;
    max-height: 70vh;
    margin: 0;
    padding: 20px;
    overflow: auto;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 2px;
}

.markdown-tool {
    display: grid;
    width: 34px;
    height: 32px;
    place-items: center;
    padding: 0;
    color: var(--ink-soft);
    background: var(--white);
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 750;
}

.markdown-tool svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.markdown-tool svg .icon-filled {
    fill: currentColor;
    stroke: currentColor;
}

.markdown-tool:hover,
.markdown-tool:focus-visible {
    color: var(--accent-contrast);
    background: var(--red);
    border-color: var(--red);
    outline: none;
}

.markdown-tool-rating { color: var(--red); }
.markdown-tool-rating:hover,
.markdown-tool-rating:focus-visible { color: var(--accent-contrast); }

.emoji-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.emoji-picker-button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.emoji-picker-button:hover,
.emoji-picker-button:focus-visible {
    background: var(--accent-wash);
    border-color: var(--red);
    outline: none;
    transform: translateY(-1px);
}

.markdown-tool-bold { font-weight: 900; }
.markdown-tool-italic { font-style: italic; }
.markdown-tool-numbered { font-size: 0.72rem; }
.markdown-tool-quote { font-family: Georgia, serif; font-size: 1.3rem; }

.markdown-toolbar .markdown-heading-picker {
    display: block;
    gap: 0;
}

.markdown-heading-picker select {
    width: 34px;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0 3px;
    color: var(--ink-soft);
    background: var(--white);
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.markdown-heading-picker select:hover,
.markdown-heading-picker select:focus-visible {
    border-color: var(--red);
    outline: none;
}

.markdown-toolbar .markdown-plugin-picker {
    display: block;
    margin: 0;
}

.markdown-plugin-picker select {
    width: auto;
    max-width: 145px;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0 24px 0 8px;
    color: var(--ink-soft);
    background: var(--white);
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.markdown-plugin-picker select:hover,
.markdown-plugin-picker select:focus-visible {
    border-color: var(--red);
    outline: none;
}

.plugin-settings { margin-bottom: 28px; }

.plugin-list {
    display: grid;
    gap: 14px;
    margin-top: 26px;
}

.plugin-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 20px;
    background: color-mix(in srgb, var(--panel) 88%, var(--accent-wash));
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: 6px;
}

.plugin-entry h3 {
    margin: 8px 0 6px;
    font-size: 1rem;
}

.plugin-entry p { margin: 0 0 8px; color: var(--ink-soft); }
.plugin-entry small { color: var(--ink-soft); }
.plugin-entry form { margin: 0; }

.before-after-editor-labels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.openstreetmap-editor-fields {
    display: grid;
    gap: 10px;
}

.openstreetmap-editor-fields > p { margin: 0; }
.openstreetmap-editor-fields > label { display: grid; gap: 6px; }
.openstreetmap-editor-fields textarea { min-height: 84px; resize: vertical; }

.openstreetmap-editor-size {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.openstreetmap-editor-size label { display: grid; gap: 6px; }

.text-effects-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.text-effects-editor-grid > label { display: grid; gap: 6px; }
.text-effects-editor-wide { grid-column: 1 / -1; }
.text-effects-editor-grid textarea { min-height: 92px; resize: vertical; }
.text-effects-editor-preview-caption { margin: 16px 0 8px; font-size: .85rem; font-weight: 700; }
.text-effects-editor-preview { min-height: 76px; display: flex; align-items: center; padding: 18px; overflow: hidden; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 5px; }
.text-effects-editor-preview .text-effects-plugin { color: var(--ink); }
.text-effects-editor-preview > * { margin: 0; }

@media (max-width: 640px) {
    .text-effects-editor-grid { grid-template-columns: minmax(0, 1fr); }
    .text-effects-editor-wide { grid-column: auto; }
}

.social-links-editor-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.social-links-editor-options label { display: grid; gap: 6px; }
.social-links-editor-list { display: grid; gap: 10px; }

.social-links-editor-row {
    display: grid;
    grid-template-columns: minmax(125px, 0.8fr) minmax(190px, 1.4fr) minmax(118px, 0.8fr) minmax(118px, 0.8fr) auto;
    align-items: end;
    gap: 12px;
    padding: 14px;
    background: var(--paper-deep);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.social-links-editor-row label { display: grid; gap: 6px; margin: 0; }
.social-links-editor-remove { min-height: 40px; padding: 8px 12px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.social-links-editor-remove:hover, .social-links-editor-remove:focus-visible { color: var(--accent-contrast); background: var(--red); border-color: var(--red); }

.top-10-editor-toggles { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.top-10-editor-toggles .check-row { margin: 0; }
.top-10-editor-list { display: grid; gap: 12px; }

.top-10-editor-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
    padding: 14px;
    background: var(--paper-deep);
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: 4px;
}

.top-10-editor-row > label { display: grid; gap: 6px; margin: 0; }
.top-10-editor-row-heading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top-10-entry-position { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; min-height: 34px; padding: 4px 10px; color: var(--accent-contrast); background: var(--red); border: 1px solid color-mix(in srgb, var(--red) 78%, var(--ink)); border-radius: 999px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.top-10-editor-row-actions { display: flex; gap: 6px; }
.top-10-editor-row-actions button { min-width: 36px; min-height: 34px; padding: 4px 8px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.top-10-editor-row-actions button:hover:not(:disabled), .top-10-editor-row-actions button:focus-visible { color: var(--accent-contrast); background: var(--red); border-color: var(--red); }
.top-10-editor-row-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
.top-10-entry-internal-label[hidden], .top-10-entry-external-label[hidden] { display: none; }

@media (max-width: 620px) {
    .top-10-editor-row { grid-template-columns: 1fr; }
    .top-10-editor-row-heading { grid-column: 1; }
}

@media (max-width: 620px) {
    .social-links-editor-options { grid-template-columns: 1fr; }
    .social-links-editor-row { grid-template-columns: 1fr; }
    .social-links-editor-remove { justify-self: end; }
}

.image-slider-editor-list {
    display: grid;
    gap: 10px;
}

.image-slider-editor-text-toggle { margin-bottom: 0; }
.image-slider-editor-hover-toggle,
.image-slider-editor-autoplay-toggle { margin-bottom: 0; }

.image-slider-editor-shadow-style {
    display: grid;
    gap: 7px;
    max-width: 320px;
    margin: 0;
}

.image-slider-editor-interval {
    max-width: 240px;
    margin: 0;
}

.image-slider-editor-transitions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 620px;
}
.image-slider-editor-transitions label { display: grid; gap: 7px; margin: 0; }

@media (max-width: 560px) {
    .image-slider-editor-transitions { grid-template-columns: minmax(0, 1fr); }
}

.image-slider-editor-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding: 12px;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: 4px;
}

.image-slider-editor-image { margin: 0; }
.image-slider-editor-position { display: block; margin-bottom: 6px; }

.image-slider-editor-copy {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(160px, .7fr) minmax(220px, 1.3fr);
    gap: 10px 12px;
}

.image-slider-editor-copy[hidden] { display: none; }
.image-slider-editor-copy > label { margin: 0; }
.image-slider-editor-text { min-height: 72px; resize: vertical; }

.image-slider-editor-link {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(160px, .7fr) minmax(220px, 1.3fr);
    gap: 10px 12px;
}

.image-slider-editor-link > label { margin: 0; }

.image-slider-editor-actions {
    display: flex;
    gap: 6px;
}

.image-slider-editor-move,
.image-slider-editor-remove {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
    font-size: 1rem;
}

.image-slider-editor-move:hover:not(:disabled),
.image-slider-editor-move:focus-visible,
.image-slider-editor-remove:hover,
.image-slider-editor-remove:focus-visible {
    color: var(--accent-contrast);
    background: var(--red);
    border-color: var(--red);
    outline: none;
}

.image-slider-editor-move:disabled {
    opacity: .35;
    cursor: default;
}

.tabs-editor-list {
    display: grid;
    gap: 12px;
}

.tabs-editor-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 8px;
    padding: 12px;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: 4px;
}

.tabs-editor-row textarea { grid-column: 1 / -1; min-height: 120px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.84rem; }

.tabs-editor-remove {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
    font-size: 1.1rem;
}

.tabs-editor-remove:hover,
.tabs-editor-remove:focus-visible { color: var(--accent-contrast); background: var(--red); border-color: var(--red); outline: none; }

.cards-editor-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.cards-editor-row {
    color: var(--ink);
    background: color-mix(in srgb, var(--panel) 88%, var(--white) 12%);
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: 4px;
}

.cards-editor-row-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: color-mix(in srgb, var(--panel) 72%, var(--accent) 28%);
}

.cards-editor-row-toggle {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 70px minmax(0, 1fr) minmax(90px, auto) 20px;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 36px;
    padding: 0;
    color: var(--ink);
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.cards-editor-row-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.cards-editor-row-number { color: var(--red); font-weight: 800; white-space: nowrap; }
.cards-editor-row-summary { overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.cards-editor-row-meta { overflow: hidden; color: var(--ink-soft); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.cards-editor-row-chevron { color: var(--red); font-size: 1.3rem; text-align: center; transition: transform 140ms ease; }
.cards-editor-row-toggle[aria-expanded='true'] .cards-editor-row-chevron { transform: rotate(180deg); }
.cards-editor-row.is-collapsed .cards-editor-row-heading { border-bottom: 0; }

.cards-editor-fields {
    display: grid;
    grid-template-columns: minmax(110px, .5fr) minmax(0, 1.5fr);
    gap: 10px 12px;
    padding: 14px 14px 58px;
}

.cards-editor-fields[hidden] { display: none !important; }
.cards-editor-fields > label { margin: 0; }
.cards-editor-icon-fields {
    position: relative;
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.cards-editor-image-fields {
    display: grid;
    gap: 7px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.cards-editor-image-fields > label { display: grid; gap: 5px; margin: 0; }
.cards-editor-image-fields .cards-editor-image-lightbox-label { display: flex; align-items: center; gap: 7px; }
.cards-editor-image-fields .cards-editor-image-lightbox-label input { width: auto; margin: 0; }
.cards-editor-image-fields [hidden] { display: none !important; }

.cards-editor-field-caption {
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9rem;
    font-weight: 800;
}

.cards-editor-icon-picker { position: relative; }

.cards-editor-icon-picker > summary {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 7px 10px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 3px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .86rem;
    list-style: none;
}

.cards-editor-icon-picker > summary::-webkit-details-marker { display: none; }
.cards-editor-icon-picker > summary::after { content: '▾'; color: var(--ink-soft); }
.cards-editor-icon-picker[open] > summary { border-color: var(--red); box-shadow: 0 0 0 2px var(--accent-focus); }

.cards-editor-icon-preview {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--red);
    background: var(--accent-wash);
    border-radius: 3px;
    font-size: 1.05rem;
    font-weight: 800;
}

.cards-editor-icon-summary-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cards-editor-icon-options {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    gap: 6px;
    width: min(280px, calc(100vw - 76px));
    padding: 9px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 5px;
    box-shadow: var(--shadow);
}

.cards-editor-icon-option {
    min-height: 38px;
    padding: 6px;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 3px;
    cursor: pointer;
    font: inherit;
}

.cards-editor-icon-option:hover,
.cards-editor-icon-option:focus-visible,
.cards-editor-icon-option.is-active {
    color: var(--accent-contrast);
    background: var(--red);
    border-color: var(--red);
    outline: none;
}

.cards-editor-icon-custom-label { margin: 0; }
.cards-editor-content-label { grid-column: 1 / -1; }
.cards-editor-content { min-height: 100px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .84rem; }
.cards-editor-kind-label { grid-column: 1; }
.cards-editor-internal-label { grid-column: 2; }
.cards-editor-external-label { grid-column: 1 / -1; }
.cards-editor-link-label { grid-column: 1; }
.cards-editor-link-style-label { grid-column: 2; }

.cards-editor-remove {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
    font-size: 1.1rem;
}

.cards-editor-remove:hover,
.cards-editor-remove:focus-visible { color: var(--accent-contrast); background: var(--red); border-color: var(--red); outline: none; }

@media (max-width: 620px) {
    .image-slider-editor-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .image-slider-editor-actions { justify-content: flex-end; }
    .image-slider-editor-copy,
    .image-slider-editor-link { grid-template-columns: 1fr; }
    .cards-editor-fields { grid-template-columns: 1fr; }
    .cards-editor-fields > label { grid-column: 1 / -1; }
    .cards-editor-icon-fields { grid-column: 1 / -1; }
    .cards-editor-row-toggle { grid-template-columns: 60px minmax(0, 1fr) 18px; }
    .cards-editor-row-meta { display: none; }
}

.markdown-plugin-unavailable {
    margin: 1.5em 0;
    padding: 14px 16px;
    color: var(--ink-soft);
    background: var(--accent-wash);
    border-left: 3px solid var(--red);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.media-picker {
    width: min(900px, calc(100vw - 28px));
    max-width: 900px;
    max-height: min(780px, calc(100vh - 28px));
    padding: 0;
    overflow: hidden;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.media-drop-zone {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 22px;
    text-align: center;
    background: color-mix(in srgb, var(--panel) 78%, var(--accent) 22%);
    border: 1px dashed var(--line-strong, var(--line));
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.media-picker-upload-zone {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 18px;
    color: var(--ink);
    text-align: center;
    background: color-mix(in srgb, var(--panel) 78%, var(--accent) 22%);
    border: 1px dashed var(--line-strong, var(--line));
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.media-picker-upload-zone:hover,
.media-picker-upload-zone:focus-within,
.media-picker-upload-zone.is-dragging {
    background: color-mix(in srgb, var(--panel) 58%, var(--accent) 42%);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.media-picker-upload-zone[aria-busy="true"] { cursor: progress; opacity: .72; }
.media-picker-upload-zone > span:not(.media-drop-icon) { color: var(--ink-soft); font-size: .9rem; }
.media-picker-upload-zone .media-drop-select { color: var(--accent); font-weight: 750; text-decoration: underline; }
.media-picker-upload-zone .media-drop-hint { font-size: .78rem; }
.media-picker-upload-status,
.media-picker-dimensions {
    min-height: 1.3em;
    margin: -12px 0 0;
    color: var(--ink-soft);
    font-size: .82rem;
}
.media-picker-dimensions { margin: -8px 0 0; }

.media-drop-zone:hover,
.media-drop-zone:focus-within {
    border-color: var(--accent);
}

.media-drop-zone.is-dragging {
    background: color-mix(in srgb, var(--panel) 58%, var(--accent) 42%);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.media-drop-icon {
    color: var(--accent);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
}

.media-drop-zone > span:not(.media-drop-icon) {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.media-drop-zone .media-drop-select {
    color: var(--accent);
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.media-drop-zone .media-drop-hint {
    font-size: 0.78rem;
}

.media-drop-status {
    min-height: 1.3em;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
}

.help-tooltip {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-inline-start: .35rem;
    color: var(--ink);
    background: var(--paper-deep);
    border: 1px solid var(--line-strong, var(--line));
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1;
    cursor: help;
}
.help-tooltip__content {
    position: absolute;
    z-index: 30;
    left: 50%;
    bottom: calc(100% + 8px);
    width: min(280px, calc(100vw - 48px));
    padding: 10px 12px;
    color: var(--panel-ink, var(--ink));
    background: var(--panel, #fff);
    border: 1px solid var(--line-strong, var(--line));
    border-radius: 5px;
    box-shadow: var(--shadow);
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    pointer-events: none;
}
.help-tooltip:hover .help-tooltip__content,
.help-tooltip:focus .help-tooltip__content,
.help-tooltip:focus-within .help-tooltip__content {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}
.download-file-drop-zone { margin-block: 2px 14px; }

.media-picker::backdrop { background: rgba(0, 0, 0, 0.62); }

.media-picker-form {
    display: grid;
    gap: 20px;
    max-height: min(780px, calc(100vh - 28px));
    padding: clamp(22px, 4vw, 36px);
    overflow-y: auto;
    scrollbar-color: color-mix(in srgb, var(--ink) 38%, var(--paper)) color-mix(in srgb, var(--paper) 72%, var(--panel));
    scrollbar-width: thin;
}

.media-picker-form::-webkit-scrollbar,
.media-picker-form textarea::-webkit-scrollbar { width: 10px; height: 10px; }

.media-picker-form::-webkit-scrollbar-track,
.media-picker-form textarea::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--paper) 72%, var(--panel));
    border-radius: 8px;
}

.media-picker-form::-webkit-scrollbar-thumb,
.media-picker-form textarea::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink) 38%, var(--paper));
    border: 2px solid color-mix(in srgb, var(--paper) 72%, var(--panel));
    border-radius: 8px;
}

.media-picker-form::-webkit-scrollbar-thumb:hover,
.media-picker-form textarea::-webkit-scrollbar-thumb:hover { background: var(--red); }

.media-picker-form textarea {
    scrollbar-color: color-mix(in srgb, var(--ink) 38%, var(--paper)) color-mix(in srgb, var(--paper) 72%, var(--panel));
    scrollbar-width: thin;
}

.media-picker-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
}

.media-picker-header h2 {
    margin: 0;
    font-size: var(--type-section-title);
    font-weight: 720;
    letter-spacing: -0.02em;
}

.media-picker-close {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}

.media-picker-close:hover,
.media-picker-close:focus-visible {
    color: var(--accent-contrast);
    background: var(--red);
    border-color: var(--red);
    outline: none;
}

.media-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    max-height: min(48vh, 440px);
    overflow-y: auto;
    padding: 2px;
}

.gallery-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: min(48vh, 440px);
    overflow-y: auto;
    padding: 2px;
}

.media-picker-item {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    color: var(--ink-soft);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
}

.media-picker-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 0.72;
    object-fit: contain;
    padding: 4px;
    background-color: #f5f5f5;
    background-image:
        linear-gradient(45deg, #d5d5d5 25%, transparent 25%),
        linear-gradient(-45deg, #d5d5d5 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d5d5d5 75%),
        linear-gradient(-45deg, transparent 75%, #d5d5d5 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.media-picker-item span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.media-picker-item:hover,
.media-picker-item:focus-visible,
.media-picker-item.is-selected {
    color: var(--ink);
    background: var(--accent-wash);
    border-color: var(--red);
    outline: none;
}

.content-media-picker { padding: 12px; border: 1px solid var(--line); border-radius: 5px; }
.content-media-picker > summary { cursor: pointer; font-weight: 700; }
.content-media-picker > .muted { margin: 10px 0; font-size: .84rem; }
.content-media-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 8px; max-height: 350px; overflow-y: auto; margin: 12px 0; }
.content-media-picker-item { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font-size: .78rem; }
.content-media-picker-item:has(input:checked) { border-color: var(--red); background: var(--accent-wash); }
.content-media-picker-item:focus-within { outline: 2px solid var(--red); outline-offset: 1px; }
.content-media-picker-item input[type='radio'] { width: 17px; height: 17px; min-height: 17px; margin: 0; padding: 0; justify-self: start; accent-color: var(--red); }
.content-media-picker-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--paper); }
.content-media-picker-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gallery-picker-item {
    position: relative;
}

.gallery-picker-item.is-selected {
    border-width: 2px;
    box-shadow: 0 0 0 3px var(--accent-focus);
}

.gallery-picker-item.is-selected::after {
    content: "\2713";
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: var(--accent-contrast);
    background: var(--red);
    border: 2px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.download-picker-list {
    display: grid;
    gap: 10px;
}

.download-picker-item {
    display: grid;
    gap: 5px;
    width: 100%;
    padding: 15px 16px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 3px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
}

.download-picker-item strong { font-size: 0.92rem; }

.download-picker-item span {
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.download-picker-item .download-picker-meta {
    color: var(--red);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.download-picker-item:hover,
.download-picker-item:focus-visible,
.download-picker-item.is-selected {
    background: var(--accent-wash);
    border-color: var(--red);
    outline: none;
}

.download-picker-item.is-disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.media-picker-alt-label {
    display: grid;
    gap: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
}

.media-picker-alt-label small {
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 400;
}

.media-image-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.media-image-options label {
    display: grid;
    gap: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
}

.media-image-options label.media-picker-original-size {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 10px;
}

.media-image-options label.media-picker-switch {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-weight: 700;
}

.media-image-options small {
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
}

.media-picker-actions { margin-top: -4px; }

.gallery-picker-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.gallery-picker-options label {
    display: grid;
    gap: 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
}

.table-editor-dialog { max-width: 1040px; }

.link-editor-dialog { max-width: 560px; }

.link-editor-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.link-editor-fields label {
    display: grid;
    gap: 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
}

.link-editor-fields label:first-child,
.link-editor-fields #link-editor-external-field { grid-column: 1 / -1; }
.link-editor-fields #link-editor-external-field[hidden] { display: none; }

.page-body a.markdown-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0.35em 0.2em;
    text-decoration: none;
}

.page-body a.markdown-link-button:hover { text-decoration: none; }

.columns-editor-dialog { max-width: 980px; }

.columns-editor-layout-label {
    display: grid;
    gap: 7px;
    max-width: 360px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
}

.columns-editor-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.columns-editor-fields label {
    display: grid;
    align-content: start;
    gap: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
}

.columns-editor-fields label[hidden] { display: none; }
.columns-editor-fields textarea { min-height: 180px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.84rem; }
.columns-editor-background { width: fit-content; }
.columns-image-field { display: grid; align-content: start; gap: 12px; }
.columns-image-field label { display: grid; align-content: start; gap: 8px; }
.columns-image-field[hidden] { display: none; }

.page-body .markdown-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 34px);
    align-items: start;
    margin: 1.6em 0;
}

.page-body .markdown-columns--background {
    padding: clamp(16px, 2.5vw, 28px);
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: 10px;
}

.page-body .markdown-column { min-width: 0; }
.page-body .markdown-column > :first-child { margin-top: 0; }
.page-body .markdown-column > :last-child { margin-bottom: 0; }
.page-body .markdown-column .page-image {
    display: flex;
    width: 100%;
    justify-content: center;
    background: transparent;
}
.page-body .markdown-column .page-image--left { justify-content: flex-start; }
.page-body .markdown-column .page-image--right { justify-content: flex-end; }
.page-body .markdown-columns--valign-middle { align-items: center; }
.page-body .markdown-columns--valign-bottom { align-items: end; }

.table-editor-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

@media (max-width: 560px) {
    .link-editor-fields { grid-template-columns: 1fr; }
    .link-editor-fields label:first-child,
    .link-editor-fields #link-editor-external-field { grid-column: auto; }
    .columns-editor-fields { grid-template-columns: 1fr; }
    .page-body .markdown-columns { grid-template-columns: minmax(0, 1fr); }
}

.table-editor-options > label:not(.table-header-switch) {
    display: grid;
    gap: 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
}

.table-header-switch { min-height: 42px; }

.table-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.table-editor-actions .button { padding: 8px 11px; font-size: 0.78rem; }

.table-editor-grid-wrap {
    max-height: min(42vh, 380px);
    overflow: auto;
    border: 1px solid var(--line);
}

.table-editor-grid {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
}

.table-editor-grid th,
.table-editor-grid td {
    min-width: 150px;
    padding: 5px;
    border: 1px solid var(--line);
}

.table-editor-grid th { background: var(--accent-wash); }

.table-editor-grid input {
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 7px 8px;
    background: var(--panel);
    border: 1px solid transparent;
    font-size: 0.82rem;
}

.table-editor-grid input:focus { border-color: var(--red); outline: none; }

.markdown-help {
    padding: 14px 16px;
    background: var(--paper-deep);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.84rem;
}

.markdown-help summary {
    color: var(--red);
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
}

.markdown-help pre {
    overflow-x: auto;
    margin: 14px 0 10px;
    white-space: pre-wrap;
}

.markdown-help code {
    display: block;
    padding: 12px;
    line-height: 1.55;
}

.markdown-help p { margin: 0; }

.markdown-snippet {
    display: inline-block;
    max-width: 100%;
    margin-top: 12px;
    overflow-x: auto;
    white-space: nowrap;
}

.markdown-code-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.markdown-code-row .markdown-snippet { min-width: 0; }

.markdown-copy {
    flex: 0 0 auto;
    width: 30px;
    height: 28px;
    margin-top: 12px;
    padding: 0;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
    font-size: 1rem;
}

.markdown-copy:hover,
.markdown-copy:focus-visible,
.markdown-copy.is-copied {
    color: var(--accent-contrast);
    background: var(--red);
    border-color: var(--red);
    outline: none;
}

.current-image {
    padding: 12px;
    background: var(--paper-deep);
}

.current-image img {
    display: block;
    width: 100%;
    max-height: 240px;
    margin-bottom: 12px;
    object-fit: cover;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.section-title span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: white;
    background: var(--ink);
    border-radius: 50%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
}

.entry-list { display: grid; }
.page-compact-row { display: none; }

#pages-list.is-compact .page-entry-row {
    display: block;
    padding: 6px 0;
}

#pages-list.is-compact .page-entry-row[hidden] { display: none; }
#pages-list.is-compact .page-entry-row > .entry-placeholder,
#pages-list.is-compact .page-entry-row .entry-summary > :not(.page-compact-row) { display: none !important; }
#pages-list.is-compact .page-entry-row .page-compact-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 9px; }
#pages-list.is-compact .page-compact-row h3 { min-width: 0; margin: 0; overflow: hidden; font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
.page-compact-edit,
.page-compact-delete > summary { display: grid; width: 30px; height: 30px; place-items: center; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; font-family: Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 700; line-height: 1; text-decoration: none; }
.page-compact-edit:hover, .page-compact-edit:focus-visible { color: var(--accent-contrast); background: var(--red); border-color: var(--red); outline: none; }
.page-compact-delete { position: relative; }
.page-compact-delete > summary { color: var(--red); list-style: none; }
.page-compact-delete > summary::-webkit-details-marker { display: none; }
.page-compact-delete > summary:hover, .page-compact-delete > summary:focus-visible { color: var(--accent-contrast); background: var(--red); outline: none; }
.page-compact-delete[open] > form { position: absolute; z-index: 5; top: calc(100% + 5px); right: 0; min-width: 150px; margin: 0; padding: 9px 11px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow); }
.page-compact-delete[open] .delete-form { margin-top: 0; }

.media-usage-check-form {
    display: flex;
    align-items: end;
}

.media-usage-check-form .button {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 0.82rem;
}

.media-usage-summary {
    margin: 10px 0 4px;
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.media-entry-preview {
    display: block;
    width: 110px;
    height: 110px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    cursor: zoom-in;
}

.media-entry-preview:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}

.media-entry-preview .entry-thumb {
    display: block;
    transition: transform 180ms ease;
}

.media-entry-preview:hover .entry-thumb {
    transform: scale(1.04);
}

.media-usage-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 8px 0;
    font-size: 0.78rem;
}

.media-usage-result a {
    color: var(--red);
    text-underline-offset: 2px;
}

.media-usage-badge {
    padding: 3px 8px;
    border-radius: 99px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.media-usage-badge.is-used {
    color: var(--red);
    background: var(--accent-wash);
}

.media-usage-badge.is-unused {
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--paper) 72%, var(--panel));
}

.list-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    margin: 18px 0 8px;
}

.list-tools label {
    display: grid;
    gap: 5px;
    color: var(--ink-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.list-tools label:first-child { flex: 1 1 230px; }

.list-tools input,
.list-tools select {
    min-height: 38px;
    margin: 0;
    font-family: inherit;
    font-size: 0.85rem;
    letter-spacing: normal;
    text-transform: none;
}

.list-empty-state { margin: 18px 0 0; }

.entry-row[hidden] { display: none; }

.media-entry-list {
    max-height: 640px;
    padding-right: 10px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-color: color-mix(in srgb, var(--ink) 38%, var(--paper)) color-mix(in srgb, var(--paper) 72%, var(--panel));
    scrollbar-width: thin;
}

.media-entry-list::-webkit-scrollbar {
    width: 10px;
}

.media-entry-list::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--paper) 72%, var(--panel));
    border-radius: 8px;
}

.media-entry-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink) 38%, var(--paper));
    border: 2px solid color-mix(in srgb, var(--paper) 72%, var(--panel));
    border-radius: 8px;
}

.media-entry-list::-webkit-scrollbar-thumb:hover {
    background: var(--red);
}

.entry-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}

.download-entry-row { grid-template-columns: 1fr; }

.entry-thumb,
.entry-placeholder {
    width: 110px;
    height: 110px;
    object-fit: cover;
    background: var(--paper-deep);
}

.entry-placeholder {
    display: grid;
    place-items: center;
    color: var(--ink-soft);
    font-size: 2rem;
}

.page-preview-link { align-content: center; gap: 5px; border-radius: 4px; font-size: 2rem; text-decoration: none; transition: box-shadow 150ms ease, transform 150ms ease, filter 150ms ease; }
.page-preview-link--public { color: var(--accent-contrast); background: var(--red); }
.page-preview-link--admin { color: var(--red); background: var(--paper-deep); border: 1px solid var(--red); }
.page-preview-link small { font-size: 0.75rem; font-weight: 750; }
.page-preview-link--admin small { color: var(--ink-soft); }
.page-preview-link:hover, .page-preview-link:focus-visible { color: var(--accent-contrast); filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 5px 15px color-mix(in srgb, var(--ink) 22%, transparent); outline: 2px solid var(--red); outline-offset: 3px; }
.page-preview-link--admin:hover small, .page-preview-link--admin:focus-visible small { color: var(--accent-contrast); }
.admin-page-preview-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px 14px; padding: 8px 16px; color: var(--accent-contrast); background: var(--red); font-size: 0.8rem; }
.admin-page-preview-banner a { color: inherit; font-weight: 750; text-underline-offset: 3px; }

.entry-summary h3 {
    margin: 7px 0 5px;
    font-size: 1rem;
    font-weight: 750;
}

.entry-summary > p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.85rem;
    line-height: 1.5;
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.status {
    padding: 3px 8px;
    border-radius: 99px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.featured-tag {
    padding: 3px 8px;
    color: var(--red);
    background: var(--accent-wash);
    border-radius: 99px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.status-live {
    color: var(--success);
    background: rgba(46, 106, 71, 0.1);
}

.status-draft {
    color: var(--ink-soft);
    background: rgba(23, 21, 18, 0.07);
}

.location-tag {
    padding: 3px 8px;
    color: var(--ink-soft);
    background: var(--accent-wash);
    border-radius: 99px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.entry-actions {
    display: flex;
    align-items: start;
    gap: 18px;
    margin-top: 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
}

.menu-order-hint {
    margin: -4px 0 16px;
    font-size: 0.78rem;
}

.menu-order-actions {
    display: inline-flex;
    gap: 7px;
}

.entry-actions summary {
    color: var(--ink-soft);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.delete-form { margin-top: 8px; }

.text-action {
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.danger { color: var(--red); }

@media (max-width: 980px) {
    .site-header {
        flex-wrap: wrap;
        gap: 16px 24px;
    }

    .admin-body .site-header {
        gap: 16px;
    }

    .site-primary-nav {
        order: 3;
        justify-content: flex-end;
        width: 100%;
        padding-top: 14px;
        overflow-x: auto;
        border-top: 1px solid var(--line);
    }

}

@media (max-width: 860px) {
    .content-card,
    .admin-layout { grid-template-columns: 1fr; }
    .editor-panel { position: static; }
    .current-version-columns { grid-template-columns: 1fr; }

    .frontpage-settings {
        align-items: start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .site-header,
    main,
    .site-footer { width: min(100% - 24px, 1180px); }

    .site-header { padding: 17px 0; }

    .admin-body .site-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .admin-product-mark {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        font-size: 0.72rem;
    }

    .quiet-link { font-size: 0.82rem; }
    .header-actions { gap: 9px; }
    .theme-toggle { padding-inline: 10px; }
    .branding-dimensions { grid-template-columns: 1fr; }
    .branding-preview { align-items: start; flex-direction: column; }
    .content-card { min-height: 0; }
    .content-grid { padding-top: 28px; }
    .card-image { min-height: 210px; max-height: 280px; }

    .download-card {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    .download-card .button { width: 100%; }

    .page-image--wrap.page-image--left,
    .page-image--wrap.page-image--right {
        float: none;
        margin: 1.25em auto;
    }

    .markdown-gallery { grid-template-columns: 1fr; }

    .media-image-options { grid-template-columns: 1fr; }

    .maintenance-settings,
    .backup-settings { grid-template-columns: 1fr; }

    .plugin-entry,
    .before-after-editor-labels { grid-template-columns: 1fr; }

    .site-footer,
    .admin-heading {
        align-items: start;
        flex-direction: column;
    }

    .footer-nav { justify-content: flex-start; }
    .footer-actions { justify-content: flex-start; }

    .page-main { padding-top: 44px; }

    .pagination {
        gap: 8px;
        margin-top: -28px;
        font-size: 0.72rem;
    }

    .pagination-link { padding: 8px; }

    .frontpage-settings { padding: 22px; }

    .frontpage-settings-form {
        align-items: end;
        width: 100%;
    }

    .frontpage-settings-form .button { flex: 1; }

    .admin-main { padding-top: 36px; }

    .admin-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 38px;
    }

    .admin-nav-link { border-right: 1px solid var(--line); }
    .admin-nav-link:nth-child(2n) { border-right: 0; }

    .admin-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .overview-actions {
        align-items: start;
        flex-direction: column;
    }

    .admin-nav-link {
        justify-content: center;
        min-height: 58px;
        padding: 10px 8px;
        font-size: 0.78rem;
    }

    .admin-nav-number { display: none; }

    .theme-options { grid-template-columns: 1fr; }
    .accent-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .background-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hover-effect-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .table-editor-options { grid-template-columns: 1fr; }
    .gallery-picker-options { grid-template-columns: 1fr; }

    .entry-row {
        grid-template-columns: 72px 1fr;
        gap: 14px;
    }

    .entry-thumb,
    .entry-placeholder {
        width: 72px;
        height: 72px;
    }

    .media-entry-preview {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 720px) {
    .page-hero { height: clamp(140px, 42vw, 220px); }
    .page-hero--desktop-only { display: none; }
}

@media (max-width: 860px) {
    .content-grid--cards,
    .content-grid--magazine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .content-grid--cards,
    .content-grid--magazine { grid-template-columns: minmax(0, 1fr); }

    .content-grid--magazine .content-card--magazine-featured {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .content-grid--magazine .content-card--magazine-featured .card-image {
        height: 230px;
        min-height: 230px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .content-card { transition: none; }

    .content-card:hover { transform: none; }

    html[data-hover-effect='lift'] :is(button, a.button, .content-card, .page-image):hover,
    html[data-hover-effect='zoom'] :is(button, a.button, .content-card, .page-image):hover { transform: none; }
}

/* Prozentbreiten für Einzelbilder bleiben mit der Content-Security-Policy kompatibel. */
.page-body .page-image.page-image--percent { width: var(--page-image-width); }
.page-body .page-image.page-image--percent img { width: 100%; }
.page-image--width-1 { --page-image-width: 1%; }
.page-image--width-2 { --page-image-width: 2%; }
.page-image--width-3 { --page-image-width: 3%; }
.page-image--width-4 { --page-image-width: 4%; }
.page-image--width-5 { --page-image-width: 5%; }
.page-image--width-6 { --page-image-width: 6%; }
.page-image--width-7 { --page-image-width: 7%; }
.page-image--width-8 { --page-image-width: 8%; }
.page-image--width-9 { --page-image-width: 9%; }
.page-image--width-10 { --page-image-width: 10%; }
.page-image--width-11 { --page-image-width: 11%; }
.page-image--width-12 { --page-image-width: 12%; }
.page-image--width-13 { --page-image-width: 13%; }
.page-image--width-14 { --page-image-width: 14%; }
.page-image--width-15 { --page-image-width: 15%; }
.page-image--width-16 { --page-image-width: 16%; }
.page-image--width-17 { --page-image-width: 17%; }
.page-image--width-18 { --page-image-width: 18%; }
.page-image--width-19 { --page-image-width: 19%; }
.page-image--width-20 { --page-image-width: 20%; }
.page-image--width-21 { --page-image-width: 21%; }
.page-image--width-22 { --page-image-width: 22%; }
.page-image--width-23 { --page-image-width: 23%; }
.page-image--width-24 { --page-image-width: 24%; }
.page-image--width-25 { --page-image-width: 25%; }
.page-image--width-26 { --page-image-width: 26%; }
.page-image--width-27 { --page-image-width: 27%; }
.page-image--width-28 { --page-image-width: 28%; }
.page-image--width-29 { --page-image-width: 29%; }
.page-image--width-30 { --page-image-width: 30%; }
.page-image--width-31 { --page-image-width: 31%; }
.page-image--width-32 { --page-image-width: 32%; }
.page-image--width-33 { --page-image-width: 33%; }
.page-image--width-34 { --page-image-width: 34%; }
.page-image--width-35 { --page-image-width: 35%; }
.page-image--width-36 { --page-image-width: 36%; }
.page-image--width-37 { --page-image-width: 37%; }
.page-image--width-38 { --page-image-width: 38%; }
.page-image--width-39 { --page-image-width: 39%; }
.page-image--width-40 { --page-image-width: 40%; }
.page-image--width-41 { --page-image-width: 41%; }
.page-image--width-42 { --page-image-width: 42%; }
.page-image--width-43 { --page-image-width: 43%; }
.page-image--width-44 { --page-image-width: 44%; }
.page-image--width-45 { --page-image-width: 45%; }
.page-image--width-46 { --page-image-width: 46%; }
.page-image--width-47 { --page-image-width: 47%; }
.page-image--width-48 { --page-image-width: 48%; }
.page-image--width-49 { --page-image-width: 49%; }
.page-image--width-50 { --page-image-width: 50%; }
.page-image--width-51 { --page-image-width: 51%; }
.page-image--width-52 { --page-image-width: 52%; }
.page-image--width-53 { --page-image-width: 53%; }
.page-image--width-54 { --page-image-width: 54%; }
.page-image--width-55 { --page-image-width: 55%; }
.page-image--width-56 { --page-image-width: 56%; }
.page-image--width-57 { --page-image-width: 57%; }
.page-image--width-58 { --page-image-width: 58%; }
.page-image--width-59 { --page-image-width: 59%; }
.page-image--width-60 { --page-image-width: 60%; }
.page-image--width-61 { --page-image-width: 61%; }
.page-image--width-62 { --page-image-width: 62%; }
.page-image--width-63 { --page-image-width: 63%; }
.page-image--width-64 { --page-image-width: 64%; }
.page-image--width-65 { --page-image-width: 65%; }
.page-image--width-66 { --page-image-width: 66%; }
.page-image--width-67 { --page-image-width: 67%; }
.page-image--width-68 { --page-image-width: 68%; }
.page-image--width-69 { --page-image-width: 69%; }
.page-image--width-70 { --page-image-width: 70%; }
.page-image--width-71 { --page-image-width: 71%; }
.page-image--width-72 { --page-image-width: 72%; }
.page-image--width-73 { --page-image-width: 73%; }
.page-image--width-74 { --page-image-width: 74%; }
.page-image--width-75 { --page-image-width: 75%; }
.page-image--width-76 { --page-image-width: 76%; }
.page-image--width-77 { --page-image-width: 77%; }
.page-image--width-78 { --page-image-width: 78%; }
.page-image--width-79 { --page-image-width: 79%; }
.page-image--width-80 { --page-image-width: 80%; }
.page-image--width-81 { --page-image-width: 81%; }
.page-image--width-82 { --page-image-width: 82%; }
.page-image--width-83 { --page-image-width: 83%; }
.page-image--width-84 { --page-image-width: 84%; }
.page-image--width-85 { --page-image-width: 85%; }
.page-image--width-86 { --page-image-width: 86%; }
.page-image--width-87 { --page-image-width: 87%; }
.page-image--width-88 { --page-image-width: 88%; }
.page-image--width-89 { --page-image-width: 89%; }
.page-image--width-90 { --page-image-width: 90%; }
.page-image--width-91 { --page-image-width: 91%; }
.page-image--width-92 { --page-image-width: 92%; }
.page-image--width-93 { --page-image-width: 93%; }
.page-image--width-94 { --page-image-width: 94%; }
.page-image--width-95 { --page-image-width: 95%; }
.page-image--width-96 { --page-image-width: 96%; }
.page-image--width-97 { --page-image-width: 97%; }
.page-image--width-98 { --page-image-width: 98%; }
.page-image--width-99 { --page-image-width: 99%; }
.page-image--width-100 { --page-image-width: 100%; }