:root {
    color-scheme: light dark;
    --bg: #1b222d;
    --surface: #1e2936;
    --surface-raised: #232f3d;
    --border: #263341;
    --control-hover-border: #526474;
    --focus: #62c792;
    --text: #e5edf5;
    --muted: #91a0af;
    --accent: #8ce0b5;
    --accent-ink: #102219;
    --accent-hover: #a2ecc6;
    --accent-hover-ink: #102219;
    --link: #a5e8c5;
    --danger: #ff8c8c;
    --surface-hover: #1c2933;
    --code-bg: #090e14;
    --code-fg: #dbe7ee;
    --code-comment: #82909d;
    --code-keyword: #c792ea;
    --code-string: #a5d6a7;
    --code-number: #f2ae72;
    --code-title: #82aaff;
    --code-variable: #79c0ff;
    --code-meta: #ff7b72;
    --glow: #1b2f40;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1b222d;
    --surface: #1e2936;
    --surface-raised: #232f3d;
    --border: #263341;
    --control-hover-border: #526474;
    --focus: #62c792;
    --text: #e5edf5;
    --muted: #91a0af;
    --accent: #8ce0b5;
    --accent-ink: #102219;
    --accent-hover: #a2ecc6;
    --accent-hover-ink: #102219;
    --link: #a5e8c5;
    --danger: #ff8c8c;
    --surface-hover: #1c2933;
    --code-bg: #090e14;
    --code-fg: #dbe7ee;
    --code-comment: #82909d;
    --code-keyword: #c792ea;
    --code-string: #a5d6a7;
    --code-number: #f2ae72;
    --code-title: #82aaff;
    --code-variable: #79c0ff;
    --code-meta: #ff7b72;
    --glow: #1b2f40;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f3f1eb;
    --surface: #f9f8f4;
    --surface-raised: #ffffff;
    --border: #d9d7cc;
    --control-hover-border: #bdcdbf;
    --focus: #347a52;
    --text: #242923;
    --muted: #6d726b;
    --accent: #347a52;
    --accent-ink: #ffffff;
    --accent-hover: #2d6f4a;
    --accent-hover-ink: #ffffff;
    --link: #2e6e48;
    --danger: #ad424a;
    --surface-hover: #e9f0e9;
    --code-bg: #f8f8f4;
    --code-fg: #29332d;
    --code-comment: #737b73;
    --code-keyword: #8052a0;
    --code-string: #327a45;
    --code-number: #a65e18;
    --code-title: #315da8;
    --code-variable: #246b8a;
    --code-meta: #b44442;
    --glow: #e1ebe1;
    --header-bg: #e4e8e1;
    --header-glow: #cadbcd;
    --header-border: #c8d1c8;
}

@media (prefers-color-scheme: light) {
    html:not([data-theme]) {
        color-scheme: light;
        --bg: #f3f1eb;
        --surface: #f9f8f4;
        --surface-raised: #ffffff;
        --border: #d9d7cc;
        --control-hover-border: #bdcdbf;
        --focus: #347a52;
        --text: #242923;
        --muted: #6d726b;
        --accent: #347a52;
        --accent-ink: #ffffff;
        --accent-hover: #2d6f4a;
        --accent-hover-ink: #ffffff;
        --link: #2e6e48;
        --danger: #ad424a;
        --surface-hover: #e9f0e9;
        --code-bg: #f8f8f4;
        --code-fg: #29332d;
        --code-comment: #737b73;
        --code-keyword: #8052a0;
        --code-string: #327a45;
        --code-number: #a65e18;
        --code-title: #315da8;
        --code-variable: #246b8a;
        --code-meta: #b44442;
        --glow: #e1ebe1;
        --header-bg: #e4e8e1;
        --header-glow: #cadbcd;
        --header-border: #c8d1c8;
    }
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background: radial-gradient(ellipse at 50% -300px, var(--glow) 0, transparent 46%), var(--bg);
    font: 14px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
html[data-theme="light"] body { background: radial-gradient(ellipse 78% 360px at 8% -80px, #e0ece2 0, transparent 100%), radial-gradient(ellipse 46% 340px at 100% 40px, #efe8da 0, transparent 100%), var(--bg); }
@media (prefers-color-scheme: light) { html:not([data-theme]) body { background: radial-gradient(ellipse 78% 360px at 8% -80px, #e0ece2 0, transparent 100%), radial-gradient(ellipse 46% 340px at 100% 40px, #efe8da 0, transparent 100%), var(--bg); } }
a { color: var(--link); text-decoration: none; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
a:hover { color: var(--accent); text-decoration: none; }
button, input, textarea, select { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.site-header { height: 68px; border-bottom: 1px solid color-mix(in srgb, var(--muted) 13%, transparent); background: color-mix(in srgb, var(--bg) 88%, transparent); }
html[data-theme="light"] .site-header { border-bottom-color: var(--header-border); background: radial-gradient(ellipse 72% 280px at 50% -205px, var(--header-glow) 0, transparent 100%), linear-gradient(105deg, #e2e8e1 0%, var(--header-bg) 52%, #e8e8df 100%); }
@media (prefers-color-scheme: light) { html:not([data-theme]) .site-header { border-bottom-color: var(--header-border); background: radial-gradient(ellipse 72% 280px at 50% -205px, var(--header-glow) 0, transparent 100%), linear-gradient(105deg, #e2e8e1 0%, var(--header-bg) 52%, #e8e8df 100%); } }
.header-inner, .content-shell, .footer-inner { width: min(100% - 40px, 1200px); margin: 0 auto; }
.header-inner { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 355px) minmax(0, 1fr); align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font: 500 15px ui-monospace, SFMono-Regular, Consolas, monospace; }
.brand:hover { color: var(--accent); }
.brand-mark { font-size: 17px; }
.header-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 12px; }
.header-actions form { margin: 0; }
.header-search { grid-column: 2; grid-row: 1; width: 100%; height: 35px; display: flex; align-items: center; gap: 8px; padding: 0 5px 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-raised); }
.header-search:focus-within { border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 13%, transparent); }
.header-search svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--muted); stroke-linecap: round; stroke-width: 1.7; }
.header-search input { width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }
.header-search input::placeholder { color: var(--muted); }
.header-search input:focus-visible { outline: 0; }
.header-search input::-webkit-search-cancel-button { cursor: pointer; }
.header-search button { flex: none; padding: 3px 7px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 9px; cursor: pointer; }
.header-search button:hover { border-color: var(--accent); color: var(--accent); }
.search-submit-mobile { display: none; }
.button, .theme-toggle { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-raised); color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; cursor: pointer; }
.button:hover, .theme-toggle:hover { border-color: var(--control-hover-border); background: var(--surface-hover); color: var(--text); }
.button-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.button-primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--accent-hover-ink); }
.button-secondary { border-color: var(--control-hover-border); background: var(--surface-raised); color: var(--text); }
.button-secondary:hover { border-color: var(--accent); background: var(--surface-hover); color: var(--text); }
.button-quiet { border-color: transparent; background: transparent; color: var(--muted); }
.button-quiet:hover { border-color: var(--border); background: var(--surface-raised); color: var(--text); }
.button-plus { font-size: 16px; font-weight: 400; line-height: 10px; }
.theme-toggle { width: 32px; min-height: 32px; padding: 0; border-radius: 50%; }
.theme-indicator { width: 14px; height: 14px; display: block; border: 1px solid #607080; border-radius: 50%; background: linear-gradient(90deg, #202a34 0 50%, #62d98d 50% 100%); }
html[data-theme="dark"] .theme-indicator { border-color: #81909d; background: #202a34; }
html[data-theme="light"] .theme-indicator { border-color: var(--accent); background: var(--accent); }
.header-nav-link { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); font-size: 11px; font-weight: 550; white-space: nowrap; }
.header-nav-link svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.header-nav-link:hover { border-color: var(--border); background: var(--surface-raised); color: var(--text); }
.header-nav-link.is-active { color: var(--accent); }
.account-menu { position: relative; }
.account-trigger { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-raised); color: var(--muted); cursor: pointer; }
.account-trigger:hover, .account-trigger[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); }
.account-trigger svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.account-dropdown[hidden] { display: none; }
.account-dropdown { position: absolute; z-index: 20; top: calc(100% + 9px); right: 0; width: 228px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 16px 40px rgba(0, 0, 0, .28); }
.account-dropdown-heading { display: flex; align-items: center; gap: 10px; padding: 10px 9px 12px; border-bottom: 1px solid var(--border-muted); margin-bottom: 5px; }
.account-avatar { width: 29px; height: 29px; display: grid; flex: none; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, var(--surface-raised)); color: var(--accent); font-size: 12px; font-weight: 650; }
.account-dropdown-email { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-link { width: 100%; display: block; padding: 8px 9px; border-radius: 5px; color: var(--text); font-size: 11px; text-align: left; }
.dropdown-link:hover { background: var(--surface-raised); color: var(--text); text-decoration: none; }
.account-dropdown form { margin: 0; }
.dropdown-signout { border: 0; background: transparent; cursor: pointer; }
.dropdown-divider { height: 1px; margin: 5px 3px; background: var(--border-muted); }

.main-shell { min-height: calc(100vh - 125px); }
.content-shell { padding-top: 43px; padding-bottom: 65px; }
.centered-panel-page { display: flex; flex-direction: column; }
.centered-panel-page .site-header, .centered-panel-page .site-footer { flex: none; }
.centered-panel-page .main-shell { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.centered-panel-page .content-shell { flex: 1; display: flex; flex-direction: column; }
.centered-panel-page .form-panel { margin-block: auto; }
.page-header { margin: 0 0 21px; }
.page-header h1 { margin: 0; color: var(--text); font-size: 28px; font-weight: 600; letter-spacing: -.045em; line-height: 1.12; }
.page-header > p:not(.eyebrow), .page-header .page-intro, .page-header .snippet-long-description { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.form-panel-intro { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.page-header-library { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }
.page-header-snippet-view { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.page-header-library > div, .page-header-snippet-view > div:first-child { min-width: 0; }
.eyebrow { margin: 0 0 10px; color: var(--accent); font: 500 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .13em; text-transform: uppercase; }
.form-panel h1, .not-found h1 { margin: 0; color: var(--text); font-size: 34px; font-weight: 600; letter-spacing: -.045em; line-height: 1.12; }
.snippet-section { margin-top: 37px; }
.library-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: start; gap: 34px; }
.library-layout-public { grid-template-columns: minmax(0, 1fr); }
.library-layout > .snippet-section { min-width: 0; margin-top: 0; }
.page-header-search strong { color: var(--text); font-weight: 600; }
.search-limit-note { margin-top: 12px; color: var(--muted); font-size: 10px; }
.section-heading { min-height: 35px; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.section-heading h2 { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; }
.section-count { padding: 2px 8px; border: 1px solid var(--border); border-radius: 99px; color: var(--muted); font-size: 10px; }
.snippet-list { display: flex; flex-direction: column; gap: 7px; }
.snippet-row { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 14px 15px; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--text); }
.snippet-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--surface-raised); color: var(--text); box-shadow: 0 7px 24px rgba(0, 0, 0, .12); }
html[data-theme="light"] .snippet-row { border-color: #d8d8cf; background: #fff; box-shadow: 0 3px 12px rgba(43, 53, 43, .045); }
html[data-theme="light"] .snippet-row:hover { border-color: #a9c4ae; background: #fff; box-shadow: 0 9px 24px rgba(43, 70, 49, .10); }
@media (prefers-color-scheme: light) {
    html:not([data-theme]) .snippet-row { border-color: #d8d8cf; background: #fff; box-shadow: 0 3px 12px rgba(43, 53, 43, .045); }
    html:not([data-theme]) .snippet-row:hover { border-color: #a9c4ae; background: #fff; box-shadow: 0 9px 24px rgba(43, 70, 49, .10); }
}
.snippet-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.snippet-title { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.snippet-row:hover .snippet-title { color: var(--accent); }
.snippet-description { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.snippet-meta { display: flex; flex: none; align-items: center; gap: 13px; color: var(--muted); font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.visibility-label { padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 99px; color: var(--accent); font: 10px/1.35 system-ui, sans-serif; }
.empty-state { margin-top: 8px; padding: 46px 20px; border: 1px dashed var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface) 75%, transparent); color: var(--muted); text-align: center; }
.empty-icon { margin-bottom: 10px; color: var(--accent); font: 21px ui-monospace, SFMono-Regular, Consolas, monospace; }
.empty-state h3 { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; }
.empty-state p { margin: 7px 0 19px; font-size: 12px; }
.empty-state-compact { padding: 18px; font-size: 12px; }
.empty-state-compact p { margin: 0; }
.not-found { margin-top: 80px; }
.not-found h1 { margin-bottom: 9px; font-size: 28px; }

.form-panel { width: 100%; margin: 0; padding: 30px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 85%, transparent), var(--surface)); box-shadow: 0 24px 70px rgba(0, 0, 0, .16); }
.content-width-narrow { max-width: 560px; margin-inline: auto; }
.form-panel h1 { margin-bottom: 9px; font-size: 27px; }
.form-panel-intro { margin: 0 0 23px; font-size: 12px; }
.form-panel-links { display: flex; flex-direction: column; gap: 12px; }
.form-panel .form-stack + .form-panel-links { margin-top: 12px; }
.form-panel-links .form-panel-intro { margin: 0; }
.form-panel-links .button-full { margin-top: 0; }
.form-panel-links .form-divider { margin: 5px 0 0; }
.form-stack { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.language-input-wrap { position: relative; }
.language-suggestions { position: absolute; z-index: 20; top: calc(100% + 5px); left: 0; right: 0; max-height: 220px; overflow: auto; padding: 4px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-raised); box-shadow: 0 14px 36px rgba(0, 0, 0, .35); }
.language-suggestions[hidden] { display: none; }
.language-option { width: 100%; display: block; padding: 7px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--text); font-size: 12px; text-align: left; cursor: pointer; }
.language-option:hover, .language-option.is-active { background: color-mix(in srgb, var(--accent) 13%, var(--surface-raised)); color: var(--accent); }
.field label { color: var(--text); font-size: 12px; font-weight: 600; }
.field small { color: var(--muted); font-size: 10px; }
.field input, .field textarea, .field select { width: 100%; min-height: 38px; padding: 9px 11px; border: 1px solid #2a3948; border-radius: 6px; background: color-mix(in srgb, var(--bg) 75%, var(--surface)); color: var(--text); font-size: 12px; }
html[data-theme="light"] .field input, html[data-theme="light"] .field textarea, html[data-theme="light"] .field select { border-color: var(--border); }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.button-full { width: 100%; min-height: 39px; margin-top: 3px; }
.form-page { width: 100%; margin: 0; }
.editor-panel { display: flex; flex-direction: column; gap: 18px; padding: 25px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 85%, transparent), var(--surface)); box-shadow: 0 18px 55px rgba(0, 0, 0, .13); }
html[data-theme="dark"] .form-panel, html[data-theme="dark"] .editor-panel, html[data-theme="dark"] .settings-panel { border-color: color-mix(in srgb, var(--accent) 18%, var(--border)); background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 90%, #314253), var(--surface)); box-shadow: 0 22px 60px rgba(0, 0, 0, .3), inset 0 1px 0 color-mix(in srgb, var(--accent) 24%, transparent); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .form-panel, html:not([data-theme]) .editor-panel, html:not([data-theme]) .settings-panel { border-color: color-mix(in srgb, var(--accent) 18%, var(--border)); background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 90%, #314253), var(--surface)); box-shadow: 0 22px 60px rgba(0, 0, 0, .3), inset 0 1px 0 color-mix(in srgb, var(--accent) 24%, transparent); } }
.optional { margin-left: 5px; color: var(--muted); font-size: 10px; font-weight: 400; }
.form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.field textarea { min-height: 75px; resize: vertical; }
.code-editor { position: relative; }
.field textarea.code-input { min-height: 340px; padding: 13px; font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 4; white-space: pre; }
.code-editor .code-input { position: relative; z-index: 1; display: block; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--code-fg); }
.code-editor .code-input::placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); }
.code-editor .code-input::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.code-editor-highlight { position: absolute; z-index: 0; inset: 0; overflow: hidden; margin: 0; padding: 13px; border: 1px solid transparent; border-radius: 6px; background: var(--code-bg); color: var(--code-fg); font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 4; white-space: pre; pointer-events: none; }
.code-editor-highlight code { font: inherit; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 3px; }
.delete-action { margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--border); text-align: right; }
.text-button { padding: 4px; border: 0; background: transparent; color: var(--link); font-size: 11px; cursor: pointer; }
.text-button:hover { color: var(--accent); text-decoration: underline; }
.text-danger { color: var(--danger); }
.settings-page { display: flex; flex-direction: column; gap: 18px; width: 100%; margin: 0; }
.settings-panel { padding: 24px; border: 1px solid var(--border); border-radius: 9px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 82%, transparent), var(--surface)); box-shadow: 0 16px 48px rgba(0, 0, 0, .12); }
.settings-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 2px; }
.form-divider { display: flex; align-items: center; gap: 12px; margin: 17px 0 13px; color: var(--muted); font-size: 10px; }
.form-divider::before, .form-divider::after { height: 1px; flex: 1; background: var(--border); content: ""; }
.settings-panel h2 { margin: 0; color: var(--text); font-size: 16px; font-weight: 600; }
.settings-panel h3 { margin: 12px 0 4px; color: var(--text); font-size: 12px; }
.settings-panel > p { margin: 0; color: var(--muted); font-size: 12px; }
.admin-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 11px; }
.admin-row > span, .admin-account-row > div:first-child { min-width: 0; }
.admin-account-row > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.admin-row strong { color: var(--text); }
.admin-row small, .admin-row span { color: var(--muted); }
.admin-row-actions { display: flex; flex: none; gap: 7px; }
.admin-row-actions .button { min-height: 30px; padding: 5px 8px; font-size: 10px; }
.settings-area { width: 100%; }
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 22px; }
.page-sidebar { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 17px; padding: 3px 0; }
.page-sidebar > .eyebrow { margin: 2px 12px 0; }
.page-sidebar nav { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--border); }
.sidebar-nav-link { display: block; margin-left: -1px; padding: 9px 12px; border-left: 2px solid transparent; color: var(--muted); font-size: 12px; font-weight: 550; }
.sidebar-nav-link:hover { background: color-mix(in srgb, var(--surface-raised) 70%, transparent); color: var(--text); }
.sidebar-nav-link.is-active { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); font-weight: 650; }
.sidebar-panel { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.sidebar-panel h2 { margin: 0 0 7px; color: var(--text); font-size: 12px; font-weight: 600; }
.sidebar-panel p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.settings-content { min-width: 0; }
.settings-page-title { margin: 0 0 5px; color: var(--text); font-size: 24px; font-weight: 600; letter-spacing: -.04em; line-height: 1.2; }
.settings-page-description { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.settings-content > .settings-panel { margin-top: 0; }

.snippet-page { width: 100%; }
.snippet-view-copy { width: 100%; min-width: 0; }
.separator { color: var(--muted); }
.snippet-metadata-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; width: 100%; }
.snippet-metadata { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; margin: 0; color: var(--muted); font-size: 10px; }
.snippet-metadata-item { white-space: nowrap; }
.snippet-page-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.terminal-command-control { display: flex; width: min(500px, 42vw); min-width: 290px; border-radius: 7px; }
.terminal-command-control:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.terminal-command-input { width: 100%; min-width: 0; height: 36px; padding: 8px 10px; border: 1px solid var(--border); border-right: 0; border-radius: 7px 0 0 7px; background: var(--surface); color: var(--muted); font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.terminal-command-input:focus-visible { outline: 0; }
.terminal-command-copy { z-index: 1; flex: none; margin-left: -1px; }
.terminal-command-copy:focus-visible { outline: 0; }
.code-panel { position: relative; width: 100%; min-width: 0; }
.code-panel .code-block { box-sizing: border-box; width: 100%; }
.code-copy { position: absolute; z-index: 1; top: 11px; right: 11px; }
.code-block { overflow: auto; min-height: 165px; margin: 0; padding: 21px 23px; border: 1px solid var(--border); border-radius: 8px; background: var(--code-bg); color: var(--code-fg); font: 12px/1.75 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 4; white-space: pre; box-shadow: 0 13px 38px rgba(0, 0, 0, .18); }
.markdown-tabs { display: flex; gap: 3px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.markdown-tab { padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; }
.markdown-tab:hover { color: var(--text); }
.markdown-tab.is-active { border-bottom-color: var(--accent); color: var(--text); }
.markdown-editor-tabs[hidden], [data-markdown-editor-panel][hidden] { display: none; }
.markdown-editor-tabs { margin: 8px 0 10px; }
.markdown-viewer .markdown-preview { min-height: 165px; padding: 20px 23px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 13px 38px rgba(0, 0, 0, .12); }
.markdown-preview { overflow-wrap: anywhere; }
.markdown-preview > :first-child { margin-top: 0; }
.markdown-preview > :last-child { margin-bottom: 0; }
.markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4, .markdown-preview h5, .markdown-preview h6 { margin: 1.25em 0 .55em; line-height: 1.3; letter-spacing: -.025em; }
.markdown-preview h1 { font-size: 25px; }
.markdown-preview h2 { padding-bottom: 6px; border-bottom: 1px solid var(--border); font-size: 20px; }
.markdown-preview h3 { font-size: 16px; }
.markdown-preview p, .markdown-preview ul, .markdown-preview ol, .markdown-preview blockquote, .markdown-preview table, .markdown-preview pre { margin: 0 0 14px; }
.markdown-preview ul, .markdown-preview ol { padding-left: 24px; }
.markdown-preview li + li { margin-top: 4px; }
.markdown-preview blockquote { padding: 2px 0 2px 13px; border-left: 3px solid var(--border); color: var(--muted); }
.markdown-preview code { padding: 2px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--code-bg); font: 0.88em ui-monospace, SFMono-Regular, Consolas, monospace; }
.markdown-preview pre { overflow: auto; padding: 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--code-bg); color: var(--code-fg); font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 4; }
.markdown-preview pre code { padding: 0; border: 0; background: transparent; font: inherit; }
.markdown-preview table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.markdown-preview th, .markdown-preview td { padding: 7px 10px; border: 1px solid var(--border); text-align: left; }
.markdown-preview th { background: var(--surface-raised); }
.markdown-preview img { max-width: 100%; height: auto; }
.markdown-preview hr { margin: 20px 0; border: 0; border-top: 1px solid var(--border); }
.markdown-source[hidden], .markdown-preview[hidden] { display: none; }
.code-block .hljs-comment, .code-editor-highlight .hljs-comment, .code-block .hljs-quote, .code-editor-highlight .hljs-quote, .markdown-preview .hljs-comment, .markdown-preview .hljs-quote { color: var(--code-comment); font-style: italic; }
.code-block .hljs-keyword, .code-editor-highlight .hljs-keyword, .code-block .hljs-selector-tag, .code-editor-highlight .hljs-selector-tag, .code-block .hljs-literal, .code-editor-highlight .hljs-literal, .code-block .hljs-section, .code-editor-highlight .hljs-section, .markdown-preview .hljs-keyword, .markdown-preview .hljs-selector-tag, .markdown-preview .hljs-literal, .markdown-preview .hljs-section { color: var(--code-keyword); }
.code-block .hljs-string, .code-editor-highlight .hljs-string, .code-block .hljs-attr, .code-editor-highlight .hljs-attr, .code-block .hljs-meta-string, .code-editor-highlight .hljs-meta-string, .code-block .hljs-addition, .code-editor-highlight .hljs-addition, .markdown-preview .hljs-string, .markdown-preview .hljs-attr, .markdown-preview .hljs-meta-string, .markdown-preview .hljs-addition { color: var(--code-string); }
.code-block .hljs-number, .code-editor-highlight .hljs-number, .code-block .hljs-built_in, .code-editor-highlight .hljs-built_in, .code-block .hljs-type, .code-editor-highlight .hljs-type, .code-block .hljs-template-variable, .code-editor-highlight .hljs-template-variable, .markdown-preview .hljs-number, .markdown-preview .hljs-built_in, .markdown-preview .hljs-type, .markdown-preview .hljs-template-variable { color: var(--code-number); }
.code-block .hljs-title, .code-editor-highlight .hljs-title, .code-block .hljs-title.class_, .code-editor-highlight .hljs-title.class_, .code-block .hljs-title.function_, .code-editor-highlight .hljs-title.function_, .markdown-preview .hljs-title, .markdown-preview .hljs-title.class_, .markdown-preview .hljs-title.function_ { color: var(--code-title); }
.code-block .hljs-variable, .code-editor-highlight .hljs-variable, .code-block .hljs-params, .code-editor-highlight .hljs-params, .code-block .hljs-property, .code-editor-highlight .hljs-property, .markdown-preview .hljs-variable, .markdown-preview .hljs-params, .markdown-preview .hljs-property { color: var(--code-variable); }
.code-block .hljs-meta, .code-editor-highlight .hljs-meta, .code-block .hljs-doctag, .code-editor-highlight .hljs-doctag, .markdown-preview .hljs-meta, .markdown-preview .hljs-doctag { color: var(--code-meta); }
.revision-panel { margin-top: 35px; }
.revision-panel .section-heading { margin-bottom: 10px; }
.revision-day-group + .revision-day-group { margin-top: 17px; }
.revision-date { margin: 0 0 5px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.revision-timeline { position: relative; margin: 0; padding: 0 0 0 26px; list-style: none; }
.revision-timeline::before { position: absolute; top: 8px; bottom: 8px; left: 13px; width: 1px; background: var(--border); content: ""; }
.revision-row { position: relative; display: grid; grid-template-columns: 145px max-content minmax(0, 1fr) 230px 82px; align-items: center; gap: 12px; min-height: 46px; margin-left: -25px; padding: 6px 8px 6px 25px; border: 0; border-radius: 6px; color: var(--muted); font-size: 11px; transition: background-color .15s ease; }
.revision-row:hover { background: color-mix(in srgb, var(--surface-hover) 75%, transparent); }
.revision-row form { justify-self: end; margin: 0; }
.revision-marker { position: absolute; top: 50%; left: 8px; width: 11px; height: 11px; transform: translateY(-50%); border: 2px solid var(--muted); border-radius: 50%; background: var(--surface); }
.revision-row-current .revision-marker { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.revision-row-viewed:not(.revision-row-current) .revision-marker { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.revision-row-viewed { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.revision-moment { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.revision-moment time { color: var(--text); font-size: 11px; }
.revision-clock { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.revision-version { display: flex; min-width: 0; align-items: center; justify-self: end; gap: 5px; }
.revision-hash { overflow: hidden; color: var(--link); font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; }
.revision-version-action { min-height: 28px; padding: 4px 9px; font-size: 10px; }
.revision-copy { display: inline-grid; width: 21px; height: 22px; flex: none; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.revision-copy:hover { background: var(--surface-raised); color: var(--accent); }
.revision-copy:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.revision-row-spacer { min-width: 0; }
.flash { margin-bottom: 20px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; }
.flash-success { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--text); }
.flash-error { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: var(--text); }
.site-footer { border-top: 1px solid color-mix(in srgb, var(--muted) 13%, transparent); color: var(--muted); font-size: 10px; }
.footer-inner { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }

@media (max-width: 760px) {
    .site-header { height: auto; }
    .header-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 9px 10px; padding: 9px 0 10px; }
    .brand { grid-column: 1; grid-row: 1; }
    .header-actions { grid-column: 2; grid-row: 1; gap: 6px; }
    .header-search { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; height: 35px; gap: 7px; padding-left: 9px; }
}

@media (max-width: 640px) {
    .header-inner, .content-shell, .footer-inner { width: min(100% - 30px, 1200px); }
    .header-actions { gap: 5px; }
    .header-search button { width: 24px; height: 24px; padding: 0; font-size: 13px; }
    .search-submit-label { display: none; }
    .search-submit-mobile { display: inline; }
    .button { min-height: 33px; padding: 6px 9px; font-size: 10px; }
    .theme-toggle { width: 31px; min-height: 31px; padding: 0; }
    .header-nav-link { width: 33px; min-height: 33px; padding: 0; }
    .header-nav-link-label { display: none; }
    .content-shell { padding-top: 27px; padding-bottom: 45px; }
    .page-header h1 { font-size: 27px; }
    .page-header > p:not(.eyebrow), .page-header .page-intro, .page-header .snippet-long-description { max-width: 260px; font-size: 12px; }
    .page-header-snippet-view .snippet-long-description { max-width: none; }
    .page-header-library, .page-header-snippet-view { align-items: flex-start; flex-direction: column; gap: 12px; }
    .page-header-library > .button, .snippet-page-actions { align-self: stretch; flex: none; }
    .snippet-page-actions { flex-wrap: nowrap; min-width: 0; }
    .snippet-metadata-row { align-items: stretch; flex-direction: column; gap: 10px; }
    .terminal-command-control { flex: 1; width: auto; min-width: 0; }
    .snippet-row { align-items: flex-start; flex-direction: column; gap: 9px; padding: 12px; }
    .snippet-meta { flex-wrap: wrap; gap: 9px; }
    .snippet-description { max-width: calc(100vw - 60px); }
    .form-columns { grid-template-columns: 1fr; gap: 18px; }
    .editor-panel { gap: 15px; padding: 16px; }
    .field textarea.code-input { min-height: 270px; }
    .code-block { padding: 14px; font-size: 11px; }
    .markdown-viewer .markdown-preview { padding: 15px; font-size: 13px; }
    .markdown-preview h1 { font-size: 22px; }
    .markdown-preview h2 { font-size: 18px; }
    .markdown-preview pre { font-size: 11px; }
    .revision-row { grid-template-columns: minmax(75px, 100px) max-content minmax(0, 1fr) minmax(120px, 160px) 62px; gap: 5px; min-height: 43px; padding-right: 3px; }
    .revision-moment time { font-size: 10px; }
    .revision-clock { font-size: 9px; }
    .revision-hash { font-size: 10px; }
    .revision-version-action { min-height: 26px; padding: 4px 6px; font-size: 9px; }
    .form-panel { padding: 22px; }
    .admin-account-row { align-items: flex-start; flex-direction: column; }
    .admin-row-actions { width: 100%; }
    .footer-inner { min-height: 48px; }
}

@media (max-width: 760px) {
    .library-layout { grid-template-columns: minmax(0, 1fr); gap: 25px; }
    .page-sidebar { position: static; padding: 0; }
    .page-sidebar > .eyebrow { margin-left: 0; }
    .page-sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 0 10px; border-left: 0; border-bottom: 1px solid var(--border); }
    .page-sidebar .sidebar-nav-link { margin: 0 0 -1px; padding: 8px 2px; border-left: 0; border-bottom: 2px solid transparent; }
    .page-sidebar .sidebar-nav-link.is-active { border-bottom-color: var(--accent); background: transparent; }
    .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 390px) {
    .brand > span:last-child { display: none; }
    .header-inner, .content-shell, .footer-inner { width: min(100% - 22px, 1200px); }
    .revision-row { grid-template-columns: minmax(65px, 82px) max-content minmax(0, 1fr) minmax(110px, 125px) 54px; gap: 4px; }
    .revision-version-action { padding-right: 4px; padding-left: 4px; }
}