:root {
    /* Logo palette: charcoal, forest green, tan/gold, neon green */
    --bg: #0c100f;
    --bg-card: #151a17;
    --bg-elevated: #1f2621;
    --bg-rgb: 12, 16, 15;
    --text: #efece4;
    --text-muted: #9a968a;
    --accent: #c8a868;
    --accent-dim: #8f7540;
    --accent-rgb: 200, 168, 104;
    --glow: #12e050;
    --forest: #0d3a18;
    --forest-mid: #1a4a28;
    --danger: #c94444;
    --success: #00a818;
    --on-accent: #0c100f;
    --border: rgba(200, 168, 104, 0.18);
    --radius: 12px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --body-overlay-top: rgba(var(--bg-rgb), 0.72);
    --body-overlay-bottom: rgba(8, 22, 14, 0.88);
}

/* Per-user themes (Account → Appearance) */
body[data-theme="neon"] {
    --accent: #12e050;
    --accent-dim: #0a9030;
    --accent-rgb: 18, 224, 80;
    --border: rgba(18, 224, 80, 0.22);
    --glow: #12e050;
    --success: #12e050;
    --on-accent: #0c100f;
    --forest: #0d3a18;
    --forest-mid: #1a4a28;
}

body[data-theme="forest"] {
    --bg: #0a120e;
    --bg-card: #121a15;
    --bg-elevated: #1a261e;
    --bg-rgb: 10, 18, 14;
    --accent: #3d8f5a;
    --accent-dim: #2a6340;
    --accent-rgb: 61, 143, 90;
    --border: rgba(61, 143, 90, 0.22);
    --glow: #4caf7a;
    --success: #3d8f5a;
    --on-accent: #0a120e;
    --forest: #0d3a18;
    --forest-mid: #1a4a28;
    --body-overlay-top: rgba(var(--bg-rgb), 0.75);
    --body-overlay-bottom: rgba(8, 28, 16, 0.9);
}

body[data-theme="silver"] {
    --bg: #101012;
    --bg-card: #18181c;
    --bg-elevated: #222228;
    --bg-rgb: 16, 16, 18;
    --text: #f2f0ea;
    --text-muted: #9a9890;
    --accent: #c8c4b8;
    --accent-dim: #8a877c;
    --accent-rgb: 200, 196, 184;
    --border: rgba(200, 196, 184, 0.2);
    --glow: #12e050;
    --success: #4caf7a;
    --on-accent: #101012;
    --forest: #1a1a1e;
    --forest-mid: #2a2a30;
    --body-overlay-top: rgba(var(--bg-rgb), 0.78);
    --body-overlay-bottom: rgba(12, 12, 16, 0.9);
}

body[data-theme="light"] {
    --bg: #f4f0e6;
    --bg-card: #fffcf5;
    --bg-elevated: #ebe5d6;
    --bg-rgb: 244, 240, 230;
    --text: #1a1a16;
    --text-muted: #6a6558;
    --accent: #8f7540;
    --accent-dim: #6e5a30;
    --accent-rgb: 143, 117, 64;
    --border: rgba(143, 117, 64, 0.28);
    --glow: #0a9030;
    --forest: #d8e4d8;
    --forest-mid: #c4d4c4;
    --danger: #b33a3a;
    --success: #1a7a40;
    --on-accent: #fffcf5;
    --body-overlay-top: rgba(244, 240, 230, 0.88);
    --body-overlay-bottom: rgba(244, 240, 230, 0.94);
}

body[data-theme="light-neon"] {
    --bg: #eef6ef;
    --bg-card: #f7fcf8;
    --bg-elevated: #dfece1;
    --bg-rgb: 238, 246, 239;
    --text: #142018;
    --text-muted: #5a6a5e;
    --accent: #0a9030;
    --accent-dim: #087028;
    --accent-rgb: 10, 144, 48;
    --border: rgba(10, 144, 48, 0.28);
    --glow: #12e050;
    --forest: #d4ead9;
    --forest-mid: #bfe0c6;
    --danger: #b33a3a;
    --success: #0a9030;
    --on-accent: #f7fcf8;
    --body-overlay-top: rgba(238, 246, 239, 0.88);
    --body-overlay-bottom: rgba(238, 246, 239, 0.94);
}

body[data-theme="light-forest"] {
    --bg: #eef2eb;
    --bg-card: #f8faf6;
    --bg-elevated: #e0e6da;
    --bg-rgb: 238, 242, 235;
    --text: #161c16;
    --text-muted: #5a6458;
    --accent: #2a6340;
    --accent-dim: #1e4a30;
    --accent-rgb: 42, 99, 64;
    --border: rgba(42, 99, 64, 0.28);
    --glow: #3d8f5a;
    --forest: #d6e2d4;
    --forest-mid: #c2d4be;
    --danger: #b33a3a;
    --success: #2a6340;
    --on-accent: #f8faf6;
    --body-overlay-top: rgba(238, 242, 235, 0.88);
    --body-overlay-bottom: rgba(238, 242, 235, 0.94);
}

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

.hidden { display: none !important; }
.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;
}

html { font-size: 16px; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg);
    background-image:
        linear-gradient(180deg, var(--body-overlay-top) 0%, var(--body-overlay-bottom) 100%),
        var(--site-bg, url("/assets/img/site-bg.jpg"));
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text);
    line-height: 1.5;
    min-height: 100dvh;
    padding-top: var(--safe-top);
    padding-bottom: calc(80px + var(--safe-bottom));
}

@supports (-webkit-touch-callout: none) {
    /* iOS Safari: fixed backgrounds are unreliable */
    body { background-attachment: scroll; }
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-main {
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem;
}

.page-header { margin-bottom: 1.25rem; }
.page-header h1 { margin: 0.25rem 0; font-size: 1.5rem; }
.tag-field-error {
    color: var(--danger);
    margin: 0.35rem 0 0;
}
input.is-invalid {
    border-color: var(--danger);
}
.back-link { font-size: 0.9rem; color: var(--text-muted); }

.card {
    background: var(--bg-card);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.empty-state { text-align: center; padding: 2rem 1rem; color: var(--text-muted); }

/* Auth */
.auth-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}
.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}
.auth-about {
    text-align: left;
    padding: 1.25rem 1.5rem;
}
.auth-about h2 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent);
}
.auth-about > p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.auth-about-cta {
    margin-top: 0.85rem !important;
    font-weight: 600;
    color: var(--text) !important;
}
.auth-request-form {
    margin-top: 1rem;
    text-align: left;
}
.auth-request-form .optional {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.85em;
}
.auth-request-form textarea {
    resize: vertical;
    min-height: 4.5rem;
}
.auth-request-form .hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
/* Honeypot: keep out of layout / tab order without using display:none alone */
.hp-field {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.brand-mark {
    display: flex;
    justify-content: center;
    margin: 0 0 0.75rem;
}
.brand-logo {
    display: block;
    width: min(200px, 65vw);
    height: auto;
}
.auth-card > h1 { text-align: center; }
.auth-card > .subtitle { text-align: center; }

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}
.site-brand:hover { text-decoration: none; }
.site-brand-logo {
    display: block;
    width: 5.5rem;
    height: auto;
    flex-shrink: 0;
}
.site-brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.site-brand-text h1 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.25;
}
.site-brand-name {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}

.offline-brand {
    display: block;
    width: min(180px, 55vw);
    height: auto;
    margin: 0 auto 1rem;
}

/* Theme picker (Account → Appearance) */
.appearance-subheading {
    margin: 1.25rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}
.appearance-subheading:first-of-type {
    margin-top: 0.75rem;
}
.theme-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.theme-option {
    position: relative;
    margin: 0;
}
.theme-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
}
.theme-option-card {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    box-sizing: border-box;
}
.theme-option input:focus-visible + .theme-option-card {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.theme-option input:checked + .theme-option-card {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35);
}
.theme-swatch {
    background:
        linear-gradient(135deg, var(--swatch-accent) 0 42%, transparent 42%),
        var(--swatch-bg);
    border: 1px solid rgba(255,255,255,0.12);
}
body[data-theme^="light"] .theme-swatch {
    border-color: rgba(0, 0, 0, 0.12);
}

body[data-theme^="light"] input,
body[data-theme^="light"] textarea,
body[data-theme^="light"] select {
    border-color: rgba(0, 0, 0, 0.14);
}
body[data-theme^="light"] .btn-outline {
    color: #1a3a22;
    border-color: #5a8a66;
}
body[data-theme^="light"] .bottom-nav {
    border-top-color: rgba(var(--accent-rgb), 0.28);
}
body[data-theme^="light"] .card {
    border-color: rgba(var(--accent-rgb), 0.22);
}

/* Forms */
.form-stack { display: flex; flex-direction: column; gap: 1rem; }
label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
input, textarea, select {
    background: var(--bg-elevated);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text);
    padding: 0.75rem;
    font-size: 1rem;
    width: 100%;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.55);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18);
}
input[type="color"] { height: 44px; padding: 4px; }
input[type="radio"],
input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    min-width: 1.1rem;
    padding: 0;
    border-radius: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: #d4b878; text-decoration: none; color: var(--on-accent); }
.btn.is-busy,
.btn:disabled {
    filter: brightness(0.55);
    opacity: 0.85;
    cursor: wait;
    pointer-events: none;
}
.btn-primary.is-busy,
.btn-primary:disabled {
    background: #5a4a28;
    color: #c8b888;
}
.btn-primary.is-busy:hover,
.btn-primary:disabled:hover {
    background: #5a4a28;
    color: #c8b888;
}
.btn-secondary { background: var(--bg-elevated); color: var(--text); border: 1px solid rgba(var(--accent-rgb),0.3); }
.btn-outline {
    background: var(--forest);
    color: #d8e8d8;
    border: 1px solid #2a6a3a;
}
.btn-outline:hover { background: var(--forest-mid); text-decoration: none; color: #fff; }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.85rem; }
.btn-icon { padding: 0.5rem; font-size: 1.25rem; }
.btn-text { background: none; border: none; color: var(--accent); cursor: pointer; }

/* Mic dictation */
.dictate-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.dictate-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.dictate-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.btn-dictate {
    flex-shrink: 0;
    padding: 0.35rem 0.55rem;
    font-size: 1.1rem;
    line-height: 1;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 8px;
}
.btn-dictate .dictate-icon {
    display: block;
}
.btn-dictate:hover {
    border-color: var(--accent);
}
.btn-dictate.is-listening {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: var(--accent);
    color: var(--accent);
}

/* Campaign grid */
.campaign-grid { display: grid; gap: 1rem; }
.campaign-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 0;
    border: 1px solid rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
    color: var(--text);
    text-decoration: none;
    min-height: 140px;
    touch-action: manipulation;
}
.campaign-card.has-cover {
    background-color: var(--bg-card);
    background-image: var(--cover);
    background-size: cover;
    background-position: center;
}
.campaign-card:hover { border-color: var(--accent); text-decoration: none; }
.campaign-card.is-hidden { display: none; opacity: 0.55; }
.campaign-grid.show-hidden .campaign-card.is-hidden { display: flex; }
.campaign-card.is-system-filtered { display: none !important; }
.campaign-card.is-dragging {
    opacity: 0.85;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    z-index: 5;
}
.campaign-card-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--accent);
    z-index: 2;
}
.campaign-card-toolbar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.75rem 0.75rem;
    margin-top: auto;
}
.campaign-card-toolbar-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.65rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.campaign-card.has-cover .campaign-card-toolbar-meta { color: rgba(232,230,227,0.85); }
.campaign-card-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    background: rgba(var(--bg-rgb),0.65);
    color: var(--text-muted);
    cursor: grab;
    touch-action: none;
    user-select: none;
    letter-spacing: -0.15em;
    font-size: 0.85rem;
    line-height: 1;
}
.campaign-card-handle:active { cursor: grabbing; }
.campaign-card-visibility {
    flex: 0 0 auto;
    background: rgba(var(--bg-rgb),0.65) !important;
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--text) !important;
    min-height: 2.25rem;
}
.campaign-card-visibility:hover {
    background: rgba(var(--bg-rgb),0.85) !important;
    color: #fff !important;
    text-decoration: none;
}
.campaign-card-body {
    position: relative;
    z-index: 1;
    padding: 1.25rem 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-height: 0;
    color: inherit;
    text-decoration: none;
}
.campaign-card-body:hover { text-decoration: none; color: inherit; }
.campaign-card h2 {
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.campaign-meta {
    margin: 0;
    color: var(--text-muted);
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.campaign-meta + .campaign-meta { margin-top: 0.15rem; }
.campaign-card.has-cover .campaign-meta { color: rgba(232,230,227,0.85); }

.cover-picker {
    border: 1px solid rgba(var(--accent-rgb),0.2);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 0;
}
.cover-picker legend {
    padding: 0 0.35rem;
    color: var(--accent);
    font-weight: 600;
}
.cover-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0 1rem;
}
.cover-preset-option {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    cursor: pointer;
    margin: 0;
}
.cover-preset-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cover-preset-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.cover-preset-option input:checked + .cover-preset-thumb,
.cover-preset-option input:focus-visible + .cover-preset-thumb {
    border-color: var(--accent);
}
.cover-preset-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}
.cover-preset-keep-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    padding: 0.35rem;
}
.cover-preset-keep-thumb.has-image {
    padding: 0;
    color: transparent;
    background-color: transparent;
    background-size: cover;
    background-position: center;
}

.fab {
    position: fixed;
    right: 1.25rem;
    bottom: calc(1.25rem + var(--safe-bottom));
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    z-index: 50;
}

/* Bottom nav */
.bottom-nav {
    display: flex;
    gap: 0.5rem;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 640px;
    box-sizing: border-box;
    background: var(--bg-card);
    border-top: 1px solid rgba(var(--accent-rgb), 0.22);
    padding: 0.5rem 1rem;
    padding-bottom: calc(0.5rem + var(--safe-bottom));
    z-index: 40;
}
.bottom-nav-item {
    flex: 1;
    text-align: center;
    padding: 0.7rem 0.5rem;
    font-size: 0.85rem;
    min-height: 44px;
    color: var(--text-muted);
}
.bottom-nav-item.active {
    font-weight: 700;
    color: var(--accent);
}

.tab-panel { padding-bottom: 1rem; }

/* Notes */
.note-item.pinned { border-left: 3px solid var(--accent); }
.note-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}
.note-header h3 { flex: 1; margin: 0; min-width: 0; }
.note-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin: 0.75rem 0 0.5rem;
}
.note-actions-start {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}
.note-action-form {
    margin: 0;
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    align-items: center;
}
.note-actions .btn {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    min-height: 40px;
    padding: 0.55rem 0.95rem;
    font-size: 0.9rem;
}
.btn-danger {
    background: #8b2e2e;
    color: #fff;
    border: 1px solid #c45c5c;
}
.btn-danger:hover { background: #a33a3a; }
.btn-danger-text { color: #c45c5c; }
.danger-zone { margin-top: 1rem; border-color: rgba(196, 92, 92, 0.4); }
/* Checkbox left of its label text (overrides stacked label { flex-direction: column }) */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]):not(.cover-preset-option),
.checkbox-label,
.checkbox-row,
.radio-label {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
}
.checkbox-label {
    display: inline-flex;
    margin: 0;
    font-size: 0.95rem;
    color: var(--text);
    cursor: pointer;
    line-height: 1.2;
}
label:has(> input[type="checkbox"]) > input[type="checkbox"],
label:has(> input[type="radio"]):not(.cover-preset-option) > input[type="radio"],
.checkbox-label input[type="checkbox"],
.checkbox-row input[type="checkbox"],
.radio-label input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    min-width: 1.1rem;
    margin: 0.15rem 0 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.checkbox-label span,
.radio-label span { line-height: 1.35; }
.note-pdf-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0.25rem;
}
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0; }
.tag {
    background: var(--bg-elevated);
    color: var(--accent);
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}
.tag-share {
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.12);
}
.tag-hidden {
    border: 1px solid rgba(180, 80, 80, 0.45);
    background: rgba(180, 80, 80, 0.12);
    color: #c97878;
}
.tag-deceased {
    border: 1px solid rgba(140, 140, 140, 0.5);
    background: rgba(120, 120, 120, 0.14);
    color: #a0a0a0;
}
.character-name-deceased {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    opacity: 0.85;
}
.character-row-deceased {
    opacity: 0.78;
}
.page-header-action-btns .inline-form {
    display: inline;
    margin: 0;
}
.share-help { margin: 0.5rem 0 0.75rem; }
.share-with-fieldset {
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 0.5rem;
    padding: 0.65rem 0.85rem 0.85rem;
    margin: 0.35rem 0 0.75rem;
}
.share-with-fieldset legend {
    padding: 0 0.25rem;
    font-weight: 600;
    font-size: 0.95rem;
}
.share-with-fieldset > .hint {
    margin: 0 0 0.5rem;
}
.radio-label,
.share-with-fieldset .checkbox-label,
label.radio-label,
label.checkbox-label {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.3rem 0;
    cursor: pointer;
    width: auto;
}
.radio-label span,
.share-with-fieldset .checkbox-label span,
label.radio-label span,
label.checkbox-label span {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}
.radio-label input[type="radio"],
.share-with-fieldset input[type="radio"],
.share-with-fieldset input[type="checkbox"],
label.radio-label > input[type="radio"],
label.checkbox-label > input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    min-width: 1.1rem;
    margin: 0.15rem 0 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--accent);
    order: -1; /* keep control left of text even if markup order drifts */
}
.share-players {
    margin: 0.35rem 0 0 1.6rem;
}
.share-players-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.share-players-list .checkbox-label {
    margin: 0;
}
.character-row h3 .tag {
    vertical-align: middle;
    margin-left: 0.35rem;
}
.tag-suggestions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag-suggest {
    background: var(--bg-elevated);
    border: 1px solid rgba(var(--accent-rgb),0.3);
    color: var(--text);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
}
.tag-suggest:hover {
    border-color: var(--accent);
}
.tag-suggest.is-selected {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.note-php-limit-warning {
    color: var(--accent);
}
.list-item { display: block; color: var(--text); text-decoration: none; }
.list-item:hover { border-color: var(--accent); text-decoration: none; }
.list-item.character-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.4rem 0.65rem;
    margin-bottom: 0.35rem;
}
.list-item.character-row h3 {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
}
.list-item.character-row .meta {
    margin: 0;
    flex-shrink: 0;
    text-align: right;
    font-size: 0.8rem;
    line-height: 1.25;
}
.teaser { color: var(--text-muted); font-size: 0.9rem; }
.teaser.markdown {
    margin: 0.35rem 0 0;
}
.teaser.markdown p {
    margin: 0.25rem 0;
}
.teaser.markdown p:first-child {
    margin-top: 0;
}
.teaser.markdown p:last-child {
    margin-bottom: 0;
}
.teaser.markdown h1,
.teaser.markdown h2,
.teaser.markdown h3 {
    margin: 0.4rem 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text);
    line-height: 1.3;
}
.teaser.markdown h1:first-child,
.teaser.markdown h2:first-child,
.teaser.markdown h3:first-child {
    margin-top: 0;
}
.teaser.markdown ul,
.teaser.markdown ol {
    margin: 0.2rem 0 0.35rem;
    padding-left: 1.2rem;
}
.teaser.markdown li {
    margin: 0.1rem 0;
}
.teaser.markdown strong {
    color: var(--text);
}
.search-blurb mark {
    background: rgba(var(--accent-rgb), 0.35);
    color: inherit;
    padding: 0 0.1em;
    border-radius: 2px;
}
.search-results-heading { margin: 0 0 0.75rem; }
.note-item.note-target-flash {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    transition: outline-color 0.3s ease;
}
.session-view-actions { margin: 1rem 0 0; }
.sessions-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 0.75rem;
}

/* Character */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}
.stat-grid div {
    background: var(--bg-elevated);
    padding: 0.75rem;
    border-radius: 8px;
}
.stat-grid span { display: block; font-size: 0.75rem; color: var(--text-muted); }
.stat-grid-edit {
    margin: 0;
}
.stat-grid-edit label {
    background: var(--bg-elevated);
    padding: 0.75rem;
    border-radius: 8px;
    margin: 0;
}
.stat-grid-edit input {
    width: 100%;
    margin-top: 0.35rem;
}
.spell-list { margin: 0.5rem 0; padding-left: 1.25rem; }
.feature-list {
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.feature-item {
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.feature-item:last-child { border-bottom: 0; }
.feature-item > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.45rem 0;
    list-style: none;
}
.feature-item > summary::-webkit-details-marker { display: none; }
.feature-item > summary::before {
    content: "›";
    display: inline-block;
    width: 0.9rem;
    margin-right: 0.15rem;
    color: var(--text-muted);
    font-weight: 700;
    transition: transform 0.15s ease;
}
.feature-item[open] > summary::before {
    transform: rotate(90deg);
}
.feature-item-plain {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.45rem 0 0.45rem 1.05rem;
}
.feature-desc {
    margin: 0 0 0.65rem 1.05rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}
.feature-edit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.75rem;
}
.feature-edit-list .checkbox-row {
    min-width: 0;
    align-items: flex-start;
    word-break: break-word;
}
@media (min-width: 720px) {
    .feature-edit-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.section-heading {
    font-size: 1rem;
    margin: 1.25rem 0 0.5rem;
    color: var(--text-muted);
    font-weight: 600;
}
.character-hub-groups {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.character-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.character-group-toggle::before {
    content: '▾';
    display: inline-block;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}
.character-hub-group.is-collapsed .character-group-toggle::before {
    transform: rotate(-90deg);
}
.character-hub-group.is-collapsed .character-group-body {
    display: none;
}
.character-group-count {
    font-weight: 500;
    color: var(--text-muted);
}
.character-hub-subgroup {
    margin-left: 0.75rem;
    margin-top: 0.35rem;
}
.character-hub-subgroup > .character-group-toggle {
    font-size: 0.95rem;
    margin-top: 0.5rem;
}
.character-list-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}
.inline-add-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.inline-add-form input[type="text"] {
    flex: 1;
    min-width: 0;
}
.name-field-with-random {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.name-field-with-random > label {
    flex: 1;
    min-width: 0;
}
.name-field-with-random .name-random-btn {
    align-self: flex-start;
}
@media (min-width: 480px) {
    .name-field-with-random {
        flex-direction: row;
        align-items: flex-end;
        gap: 0.5rem;
    }
    .name-field-with-random .name-random-btn {
        align-self: flex-end;
        margin-bottom: 0.05rem;
    }
}
.name-with-random {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.name-with-random input[type="text"] {
    flex: 1;
    min-width: 0;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: end;
}
.form-row-2 label:last-child {
    min-width: 5.5rem;
}
.hp-max-with-temp .hp-max-temp-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.hp-max-with-temp input {
    margin-top: 0 !important;
}

.ability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 0.75rem 0 0;
}
.ability-grid-compact {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.25rem;
    margin: 0 0 0.65rem;
}
.character-display-heading {
    margin: 0.55rem 0 0.35rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.character-display > .character-display-heading:first-child {
    margin-top: 0;
}
.character-display-heading + .ability-grid-compact,
.character-display-heading + .save-grid,
.character-display-heading + .senses-readout {
    margin-top: 0;
}
.ability-score {
    background: var(--bg-elevated);
    border-radius: 8px;
    padding: 0.6rem 0.4rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: center;
}
.ability-grid-compact .ability-score {
    padding: 0.2rem 0.1rem;
    border-radius: 6px;
    gap: 0;
}
.ability-abbr {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
}
.ability-grid-compact .ability-abbr {
    font-size: 0.55rem;
    letter-spacing: 0.02em;
}
.ability-value { font-size: 1.25rem; line-height: 1.1; }
.ability-grid-compact .ability-value {
    font-size: 0.85rem;
    line-height: 1.15;
}
.ability-mod { font-size: 0.85rem; color: var(--text-muted); }
.ability-grid-compact .ability-mod {
    font-size: 0.6rem;
}
.ability-display-modifiers .ability-mod {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.15;
}
.ability-display-stats .ability-value {
    font-size: 0.85rem;
}
.ability-grid-edit .ability-score {
    margin: 0;
}
.ability-grid-edit input {
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    padding: 0.35rem;
}
.ability-display-fieldset {
    margin: 0.85rem 0 0;
    padding: 0;
    border: 0;
}
.ability-display-fieldset legend {
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.ability-display-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.25rem;
}
.save-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.25rem;
    margin: 0 0 0.65rem;
}
.save-score {
    background: var(--bg-elevated);
    border-radius: 6px;
    padding: 0.2rem 0.1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.save-abbr {
    display: block;
    font-size: 0.55rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.save-value {
    font-size: 0.85rem;
    line-height: 1.15;
}
.save-proficient {
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.55);
}
.save-proficient .save-abbr::after {
    content: " ●";
    color: var(--accent);
    font-size: 0.45rem;
}
.senses-readout {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.65rem;
}
.senses-readout > div {
    background: var(--bg-elevated);
    padding: 0.35rem 0.55rem;
    border-radius: 6px;
    text-align: center;
    flex: 1 1 auto;
    min-width: 5.5rem;
}
.senses-readout span {
    display: block;
    font-size: 0.6rem;
    color: var(--text-muted);
    line-height: 1.2;
}
.senses-readout strong {
    font-size: 0.9rem;
    line-height: 1.2;
}

.combat-readout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    margin: 0;
}
.combat-readout > div {
    background: var(--bg-elevated);
    padding: 0.35rem 0.4rem;
    border-radius: 6px;
    text-align: center;
}
.combat-readout span {
    display: block;
    font-size: 0.6rem;
    color: var(--text-muted);
    line-height: 1.2;
}
.combat-readout strong {
    font-size: 0.9rem;
    line-height: 1.2;
}
.hp-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    margin: 0;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 8px;
    background: var(--bg-elevated);
}
.hp-label,
.hp-temp-label {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
}
.hp-temp-label {
    margin-left: 0.25rem;
    color: var(--text-muted);
    font-weight: 500;
}
.hp-stepper {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.hp-qty {
    min-width: 2.5rem;
    text-align: center;
    font-size: 1rem;
    white-space: nowrap;
}
.hp-max {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ammo-trackers {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ammo-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    margin: 0;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 8px;
    background: var(--bg-elevated);
}
.ammo-row .hp-stepper {
    gap: 0.35rem;
    margin-left: auto;
}
.ammo-name {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ammo-qty {
    min-width: 2.5rem;
    text-align: center;
    font-size: 1rem;
    white-space: nowrap;
}
.ammo-container {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.ammo-fill {
    flex-shrink: 0;
}
.ammo-edit-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ammo-edit-row {
    display: grid;
    grid-template-columns: 1fr 4.5rem 5.5rem;
    gap: 0.5rem;
    align-items: center;
}
.ammo-edit-head {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tracker-subheading {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0.85rem 0 0.4rem;
}
.tracker-subheading:first-of-type {
    margin-top: 0.25rem;
}
.use-trackers {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.use-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
    padding: 0.35rem 0.5rem;
    margin: 0;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 8px;
    background: var(--bg-elevated);
}
.use-name {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    min-width: 0;
    flex: 1 1 8rem;
}
.use-recharge {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.use-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-left: auto;
}
.use-check {
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}
.use-check input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--accent);
}
.use-check-readonly {
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--border, rgba(255,255,255,0.25));
    border-radius: 3px;
    background: transparent;
    display: inline-block;
}
.use-check-readonly.is-used {
    background: var(--accent);
    border-color: var(--accent);
}
.tracker-rest-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.uses-edit-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.uses-edit-row {
    display: grid;
    grid-template-columns: 1fr 4.5rem 7.5rem;
    gap: 0.5rem;
    align-items: center;
}
.uses-edit-head {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.named-edit-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.named-edit-row {
    display: grid;
    gap: 0.5rem;
    align-items: center;
}
.named-edit-head {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0 0.1rem;
}
.gear-edit-row {
    grid-template-columns: 1fr 4.5rem;
}
.named-desc-edit-row {
    grid-template-columns: minmax(6rem, 0.4fr) 1fr;
}
.gear-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gear-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.gear-list li:last-child {
    border-bottom: 0;
}
.gear-slots-meta {
    font-weight: 400;
    margin-left: 0.35rem;
}

.linked-note {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.linked-note:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.linked-note:first-of-type {
    padding-top: 0;
}
.linked-note h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

/* Modal */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.modal-content {
    position: relative;
    width: 100%;
    max-height: 90dvh;
    overflow-y: auto;
    border-radius: var(--radius) var(--radius) 0 0;
    margin: 0;
}

/* Flash messages */
.flash {
    position: fixed;
    top: calc(0.5rem + var(--safe-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    max-width: 90%;
    font-size: 0.9rem;
}
.flash-success { background: var(--success); color: var(--on-accent); }
.flash-error { background: var(--danger); color: #fff; }
.edit-save-status {
    min-height: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: -0.25rem 0 0.25rem;
}
.edit-save-status.is-saving { color: var(--text-muted); }
.edit-save-status.is-saved { color: var(--success); }
.edit-save-status.is-error { color: var(--danger); }

.offline-banner {
    background: var(--accent-dim);
    color: #fff;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.85rem;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 300;
}
.offline-banner.hidden { display: none; }

.install-hint {
    background: var(--bg-elevated);
    border-bottom: 1px solid rgba(var(--accent-rgb),0.3);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
}
.install-hint p { margin: 0; }

.logout-form { text-align: center; margin-top: 2rem; }
.logged-in-as {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}
.logout-form .logged-in-as { margin: 0 0 0.5rem; }
.logged-in-as a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.auth-footer {
    margin: 1.25rem 0 0;
    font-size: 0.9rem;
}
.auth-footer a { color: var(--accent); }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.12);
}

.impersonate-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 1rem;
    background: var(--forest);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.45);
    font-size: 0.9rem;
}
.impersonate-banner p { margin: 0; }

#webauthn-status.flash-error,
#webauthn-login-status.flash-error {
    color: #f08080;
}

.markdown h1,
.markdown h2,
.markdown h3 {
    margin: 0.65rem 0 0.25rem;
    line-height: 1.25;
    font-weight: 650;
}
.markdown h1 { font-size: 1.35rem; }
.markdown h2 { font-size: 1.15rem; }
.markdown h3 { font-size: 1.05rem; }
.markdown h1:first-child,
.markdown h2:first-child,
.markdown h3:first-child {
    margin-top: 0;
}
.markdown p {
    margin: 0.45rem 0;
}
.markdown ul,
.markdown ol {
    margin: 0.35rem 0 0.55rem;
    padding-left: 1.35rem;
}
.markdown li {
    margin: 0.15rem 0;
}
.markdown li + li {
    margin-top: 0.1rem;
}
.note-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0.75rem 0;
}
.note-image-large {
    max-height: 80vh;
    width: auto;
    margin: 0 auto;
}
.note-image-hero {
    text-align: center;
}
.note-pdf-actions-top {
    margin-bottom: 1rem;
}
.list-item-with-thumb {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.list-item-static {
    cursor: default;
}
.list-item-static:hover {
    border-color: var(--border);
}
.list-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--bg-elevated);
}
.list-item-body {
    min-width: 0;
    flex: 1;
}
.list-item-actions {
    margin-top: 0.5rem;
}
.editor-scroll {
    max-height: 50vh;
    overflow-y: auto;
    resize: vertical;
}
.list-summary-input {
    min-height: 3.5rem;
}
.list-summary-field {
    display: block;
}
.list-summary-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}
.list-summary-toolbar > span:first-child {
    font-weight: 500;
}
.list-summary-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.detail-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.detail-pagination-actions {
    display: flex;
    gap: 0.5rem;
}
.import-image-confirm {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}
.import-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.import-image-option {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.8rem;
}
.import-image-option select,
.import-image-option input[type="text"] {
    width: 100%;
    font-size: 0.8rem;
}
.import-image-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}
.code-block {
    background: var(--bg-elevated);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
}
.error-log-toolbar { margin-bottom: 1rem; }
.error-log-meta { margin: 0.75rem 0 0; }
.error-log-panel { padding: 0; overflow: hidden; }
.error-log-pre {
    margin: 0;
    padding: 0.85rem 1rem;
    max-height: min(70vh, 40rem);
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-muted);
    background: var(--bg-elevated);
}
.card-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--text);
}
.gm-request-meta {
    margin: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.gm-request-meta dt {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}
.gm-request-meta dd {
    margin: 0.15rem 0 0;
}
.gm-request-notes {
    white-space: pre-wrap;
    word-break: break-word;
}
.form-grid-2 {
    display: grid;
    gap: 1rem;
}
@media (min-width: 640px) {
    .form-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}
.collapsible summary { cursor: pointer; font-weight: 600; margin-bottom: 0.5rem; }

.search-inline { display: flex; gap: 0.5rem; align-items: center; }
.search-inline input { flex: 1; }
.hub-edit-row {
    margin: -0.35rem 0 0.75rem;
}

.tag-filters-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: -0.25rem 0 0.75rem;
}
.tag-filter-groups {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tag-filter-group.is-collapsed > .tag-filters,
.tag-filter-group.is-collapsed > .tag-filter-subgroups {
    display: none;
}
.tag-filter-subgroups {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-left: 0.65rem;
    margin: 0 0 0.15rem;
    border-left: 1px solid rgba(var(--accent-rgb), 0.2);
}
.tag-filter-subgroup {
    margin: 0;
}
.tag-filter-subgroup .tag-group-toggle {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    margin-bottom: 0.2rem;
}
.tag-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0;
    margin: 0 0 0.25rem;
    cursor: pointer;
}
.tag-group-toggle::before {
    content: '▾';
    display: inline-block;
    transition: transform 0.15s ease;
}
.tag-filter-group.is-collapsed .tag-group-toggle::before {
    transform: rotate(-90deg);
}
.tag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
    margin: 0;
}
.tag-filters-import {
    flex-shrink: 0;
    margin-left: auto;
}
.tag-filter {
    background: var(--bg-elevated);
    border: 1px solid rgba(var(--accent-rgb),0.3);
    color: var(--text);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    text-decoration: none;
}
.tag-filter:hover { text-decoration: none; border-color: var(--accent); }
.tag-filter.active {
    background: rgba(var(--accent-rgb),0.2);
    border-color: var(--accent);
    color: var(--accent);
}

.user-admin-card { margin-top: 1rem; }
.user-admin-card .card-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
    color: var(--text);
}
.user-admin-card .form-stack { margin-top: 0.75rem; }
.user-admin-card .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0.25rem;
}
.user-admin-card .hint { margin-top: 0.5rem; }
.user-play-summary {
    margin: 0.65rem 0 0.25rem;
    padding: 0.65rem 0.75rem;
    background: var(--bg-elevated);
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
}
.user-play-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.user-play-list li {
    padding: 0.2rem 0;
    font-size: 0.92rem;
    line-height: 1.35;
}
.user-list-item {
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.4rem;
}
.user-list-item .user-list-row {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.25;
}
.user-list-item .user-list-row + .user-list-row {
    margin-top: 0.15rem;
    font-size: 0.85rem;
}

.users-toolbar { margin-bottom: 1rem; }
.users-filter-row {
    display: grid;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .users-filter-row {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
.users-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}
.users-actions-row .btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.users-sort-row {
    margin-top: 0;
    align-items: center;
}
.password-field {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
}
.password-field input {
    flex: 1;
    min-width: 0;
}
.password-field [data-toggle-password] {
    flex-shrink: 0;
    align-self: stretch;
}
.user-membership-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
}
.user-membership-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.inline-form { display: inline; margin: 0; }
.checkbox-row {
    font-weight: 500;
}

.campaign-header { border-left: 4px solid var(--accent); padding-left: 0.75rem; }
.page-campaign-label {
    margin: 0 0 0.15rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    line-height: 1.3;
}
.page-header-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}
.page-header-top h1 {
    flex: 1;
    min-width: 0;
    margin: 0;
    line-height: 1.25;
}
.page-header-actions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}
/* Buttons placed directly in the actions slot stay on one row */
.page-header-actions > .btn {
    display: inline-flex;
}
.page-header-actions:has(> .btn) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
.page-header-actions .btn {
    white-space: nowrap;
}
.page-header-action-btns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
}
.signed-in-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
}
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--radius, 6px);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
}
.icon-btn:hover,
.icon-btn:focus-visible {
    color: var(--accent);
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}
.icon-btn svg {
    display: block;
}
.campaign-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    justify-content: space-between;
    margin: 0 0 0.75rem;
}
.campaign-list-toolbar-start {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.campaign-list-toolbar-end {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-left: auto;
}
.card-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.35rem;
}
.card-heading-row h2 {
    margin: 0;
}
.card-heading-row .hint,
.card-heading-row a {
    font-size: 0.9rem;
}
.help-page-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.help-article .card-heading-row {
    margin-bottom: 0.15rem;
}
.campaign-system-filter {
    margin: 0;
    display: inline-flex;
    align-items: center;
}
.campaign-system-filter select {
    min-width: 10rem;
    margin: 0;
}
.hub-list-toolbar {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 0.75rem;
}
.adventure-source-files {
    margin: 0 0 1.25rem;
}
.adventure-source-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.hub-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.hub-entry {
    position: relative;
}
.hub-entry.is-hidden { display: none; opacity: 0.55; }
.hub-list.show-hidden .hub-entry.is-hidden { display: block; }
.hub-list .hub-entry.card {
    margin-bottom: 0;
}
.hub-entry.pinned {
    border-left: 3px solid var(--accent);
}
.hub-entry-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.35rem;
}
.hub-entry-title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.3;
}
.hub-entry-title a {
    color: var(--text);
    text-decoration: none;
}
.hub-entry-title a:hover {
    color: var(--accent);
    text-decoration: none;
}
.hub-entry-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}
.hub-entry-visibility {
    min-height: 2.25rem;
    background: rgba(var(--bg-rgb), 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text) !important;
}
.hub-entry-visibility:hover {
    background: rgba(var(--bg-rgb), 0.85) !important;
    color: #fff !important;
    text-decoration: none;
}
.hub-entry-main.list-item {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
.hub-entry-main.list-item:hover {
    border: none;
    text-decoration: none;
}
.hub-entry:hover {
    border-color: var(--accent);
}
.hub-entry .teaser.markdown {
    color: var(--text-muted);
}
.hub-entry .teaser.markdown h1,
.hub-entry .teaser.markdown h2,
.hub-entry .teaser.markdown h3,
.hub-entry .teaser.markdown strong {
    color: var(--text);
}
.page-header .subtitle {
    margin: 0.5rem 0 0;
    width: 100%;
    max-width: 100%;
}

/* ---- Help Center ---- */
.help-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
}
.help-search-label {
    display: block;
    margin: 0;
}
.help-search-label input[type="search"] {
    width: 100%;
    margin: 0;
}
.help-role-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.help-role-filters .btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.help-topics {
    margin: 0 0 1.25rem;
}
.help-topic-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}
@media (min-width: 640px) {
    .help-topic-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.help-topic-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius, 8px);
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    text-decoration: none;
}
.help-topic-card:hover {
    border-color: rgba(var(--accent-rgb), 0.45);
    text-decoration: none;
}
.help-topic-title {
    font-weight: 600;
}
.help-topic-summary {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.help-role-badge {
    align-self: flex-start;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.help-article,
.help-faq,
.help-glossary {
    scroll-margin-top: 1rem;
}
.help-faq-item {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.55rem 0;
}
.help-faq-item:first-of-type {
    border-top: 0;
}
.help-faq-item summary {
    cursor: pointer;
    font-weight: 600;
}
.help-faq-item p {
    margin: 0.45rem 0 0;
}
.help-glossary-list {
    margin: 0;
}
.help-glossary-row {
    display: grid;
    grid-template-columns: minmax(5rem, 8rem) 1fr;
    gap: 0.5rem 1rem;
    padding: 0.4rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.help-glossary-row:first-child {
    border-top: 0;
}
.help-glossary-row dt {
    font-weight: 600;
    margin: 0;
}
.help-glossary-row dd {
    margin: 0;
    color: var(--text-muted);
}
.help-no-results {
    margin: 0 0 1rem;
}

@media (min-width: 640px) {
    .modal { align-items: center; justify-content: center; }
    .modal-content { max-width: 640px; border-radius: var(--radius); }
}