:root {
    --color-header: #000000;
    --color-text: #111111;
    --color-surface: #ffffff;
    --color-clapback-surface: #f7f7f7;
    --color-surface-muted: #f5f5f5;
    --color-border: #8a8a8a;
    --color-muted: #707070;
    --color-accent: #e21b2d;
    --color-accent-button: #e21b2d;
    --color-accent-dark: #bd1323;
    --color-success: #217a3c;
    --color-surface-elevated: #ffffff;
    --color-control: #ffffff;
    --color-control-border: #cfcfcf;
    --color-text-strong: #333333;
    --color-text-soft: #555555;
    --color-accent-surface: #fff7f8;
    --color-accent-surface-soft: #fff5f6;
    --color-accent-surface-hover: #ffedef;
    --color-accent-surface-strong: #ffe9eb;
    --color-accent-border: #efb9bf;
    --color-success-surface: #edf7f0;
    --color-success-surface-soft: #f2faf4;
    --color-success-border: #b8dabf;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --radius-control: 4px;
    --radius-card: 6px;
    --radius-modal: 8px;
    --border: 1px solid var(--color-border);
    --header-height: 56px;
    --left-width: 240px;
    --right-ad-width: 160px;
    --site-max-width: 1480px;
    --situation-font-size: 19.8px;
    --situation-detail-font-size: 25.3px;
    --clapback-font-size: 18.7px;
    --situation-mobile-font-size: 18.7px;
    --situation-detail-mobile-font-size: 22px;
    --shadow-menu: 0 8px 28px rgb(0 0 0 / 14%);
    color-scheme: light;
}

html[data-theme="dark"] {
    --color-text: #f2f2f2;
    --color-surface: #121212;
    --color-clapback-surface: #1b1b1b;
    --color-surface-muted: #242424;
    --color-surface-elevated: #1a1a1a;
    --color-control: #1d1d1d;
    --color-control-border: #626262;
    --color-border: #545454;
    --color-muted: #b8b8b8;
    --color-accent: #ff5262;
    --color-accent-button: #d92337;
    --color-accent-dark: #ff7b87;
    --color-success: #68ce86;
    --color-text-strong: #e7e7e7;
    --color-text-soft: #cccccc;
    --color-accent-surface: #251619;
    --color-accent-surface-soft: #211518;
    --color-accent-surface-hover: #351a1f;
    --color-accent-surface-strong: #431d23;
    --color-accent-border: #8f3f49;
    --color-success-surface: #17271c;
    --color-success-surface-soft: #182c1e;
    --color-success-border: #3f7950;
    --shadow-menu: 0 10px 32px rgb(0 0 0 / 55%);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
body.is-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
img, svg { display: block; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.2; }
form { margin: 0; }
.auth-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; pointer-events: none !important; }

.site-gate {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #111111;
}
.site-gate__card {
    width: min(100%, 430px);
    padding: 36px;
    border-top: 7px solid #c63b2f;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    box-shadow: 0 24px 70px rgb(0 0 0 / 38%);
}
.site-gate__eyebrow {
    margin-bottom: 10px;
    color: #c63b2f;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.site-gate__card h1 { margin-bottom: 10px; font-size: 32px; }
.site-gate__card > p:not(.site-gate__eyebrow) { margin-bottom: 24px; color: #555555; }
.site-gate__card form { display: grid; gap: 10px; }
.site-gate__card label { font-size: 14px; font-weight: 750; }
.site-gate__card input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #8a8a8a;
    border-radius: 4px;
    background: #ffffff;
    color: #111111;
}
.site-gate__card input:focus { outline: 3px solid rgb(198 59 47 / 24%); border-color: #c63b2f; }
.site-gate__card button {
    min-height: 48px;
    margin-top: 4px;
    padding: 10px 16px;
    border: 0;
    border-radius: 4px;
    background: #c63b2f;
    color: #ffffff;
    font-weight: 800;
}
.site-gate__card button:hover { background: #a82d24; }
.site-gate__error { margin: 0 !important; color: #b42318 !important; font-size: 14px; font-weight: 700; }

@media (max-width: 520px) {
    .site-gate { padding: 16px; }
    .site-gate__card { padding: 26px 22px; }
    .site-gate__card h1 { font-size: 28px; }
}

:focus-visible {
    outline: 3px solid var(--color-text);
    outline-offset: 2px;
}
.top-nav :focus-visible { outline-color: #fff; }
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.skip-link {
    position: fixed;
    left: var(--space-4);
    top: var(--space-2);
    z-index: 200;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    color: var(--color-text);
    transform: translateY(-150%);
}
.skip-link:focus { transform: none; }
.icon { flex: 0 0 auto; transition: color .15s ease; }

/* Every interactive icon uses the same red hover cue as Header → Shuffle. */
:where(a, button, summary, [role="button"]):not(:disabled):hover .icon,
.top-search:hover .icon,
.clapback-row:hover .icon,
.add-clapback:hover .icon {
    color: var(--color-accent);
}

.button,
.icon-button,
.card-action,
.vote-button,
.profile-trigger,
.profile-name-trigger,
.text-size-controls button,
.top-nav__login,
.text-button {
    border: 0;
    background: none;
}
.button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 8px 15px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.button:hover { filter: brightness(.96); }
.button:active { transform: translateY(1px); }
.button--primary, .button--danger { background: var(--color-accent-button); color: #fff; }
.button--primary:hover, .button--danger:hover { background: var(--color-header); }
.button--dark { background: var(--color-header); color: #fff; }
.button--light { border-color: #555; background: #fff; color: #111; }
.button--secondary { border-color: #cfcfcf; background: var(--color-surface); color: var(--color-text); }
.button--danger-outline { border-color: var(--color-accent); background: #fff; color: var(--color-accent); }
.button--block { width: 100%; }
.icon-button {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--radius-control);
}
.icon-button:hover { background: rgb(128 128 128 / 15%); }
.icon-button--subtle { width: 34px; height: 34px; color: var(--color-muted); }
.text-button { padding: 0; color: var(--color-text); font-size: 14px; font-weight: 650; }
.text-button:hover { text-decoration: underline; }
.danger-text { color: var(--color-accent) !important; }

.top-nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--header-height);
    background: var(--color-header);
    color: #fff;
}
.top-nav__inner {
    display: flex;
    width: min(calc(100% - 32px), var(--site-max-width));
    height: 100%;
    align-items: center;
    gap: var(--space-5);
    margin: 0 auto;
}
.wordmark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}
.wordmark__image { width: auto; height: 32px; object-fit: contain; }
.top-nav .wordmark { transform-origin: left center; transition: transform .28s cubic-bezier(.2, .8, .2, 1), filter .28s ease; will-change: transform; }
.top-nav .wordmark:hover, .top-nav .wordmark:focus-visible { filter: drop-shadow(0 4px 10px rgb(226 27 45 / 34%)); transform: translateX(7px) scale(1.08); }
.top-nav .top-nav__inner > a.wordmark:hover,
.top-nav .top-nav__inner > a.wordmark:focus-visible { filter: drop-shadow(0 8px 0 var(--brand-red-dark)); }
.wordmark--surface { padding: 2px; background: #000; }
.top-nav__hamburger { display: none; color: #fff; }
.top-nav__links { display: flex; align-self: stretch; align-items: center; gap: var(--space-1); }
.top-nav__link {
    display: flex;
    flex: 0 0 auto;
    height: 100%;
    align-items: center;
    gap: 7px;
    padding: 0 var(--space-3);
    border-bottom: 3px solid transparent;
    color: #d0d0d0;
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
}
.top-nav__link:hover { color: #fff; }
.top-nav__link.is-active { border-bottom-color: var(--color-accent); color: #fff; }
.top-search {
    display: flex;
    width: min(250px, 20vw);
    height: 36px;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    padding: 0 var(--space-3);
    border: 1px solid #444;
    border-radius: var(--radius-control);
    background: #1d1d1d;
    color: #a9a9a9;
}
.top-search:focus-within { border-color: #aaa; color: #fff; }
.top-search input {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    appearance: none;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: 14px;
}
.top-search input:focus { border: 0; outline: 0; background: transparent; box-shadow: none; }
.top-search input::-webkit-search-decoration,
.top-search input::-webkit-search-cancel-button,
.top-search input::-webkit-search-results-button,
.top-search input::-webkit-search-results-decoration { appearance: none; }
.top-search input::placeholder { color: #aaa; }
.top-nav__actions { display: flex; align-items: center; gap: var(--space-2); }
.top-nav__post { min-width: 158px; box-shadow: 0 3px 12px rgb(226 27 45 / 30%); }
.top-nav__post:hover { box-shadow: 0 4px 18px rgb(226 27 45 / 42%); }
.top-nav__saved { color: #fff; }
.top-nav__saved.is-active { background: rgb(255 255 255 / 14%); }
.top-nav__saved.is-active .icon { fill: currentColor; color: var(--color-accent); }
.top-nav__notification { position: relative; color: #fff; }
.badge {
    position: absolute;
    top: 1px;
    right: -7px;
    display: flex;
    min-width: 25px;
    height: 19px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 5px;
    border: 2px solid #000;
    border-radius: 20px;
    background: #fff;
    color: #111;
    font-size: 9px;
    font-weight: 800;
}
.badge__dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--color-accent-button); }
.profile-trigger { display: flex; min-height: 42px; align-items: center; gap: var(--space-2); padding: 2px 4px; color: #fff; }
.profile-trigger__name { max-width: 100px; overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.top-nav__auth { display: flex; align-items: center; gap: var(--space-3); }
.top-nav__login { flex: 0 0 auto; color: #fff; font-size: 14px; font-weight: 650; white-space: nowrap; }
.top-nav__mobile-auth { display: none; color: #fff; }

.menu-wrap { position: relative; }
.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 120;
    width: 230px;
    overflow: hidden;
    border: var(--border);
    border-radius: var(--radius-modal);
    background: var(--color-surface);
    box-shadow: var(--shadow-menu);
    color: var(--color-text);
}
.dropdown[hidden] { display: none; }
.dropdown--profile a,
.dropdown--profile button {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    gap: var(--space-3);
    padding: 9px var(--space-4);
    border: 0;
    background: #fff;
    text-align: left;
    font-size: 14px;
}
.dropdown--profile a:hover, .dropdown--profile button:hover { background: var(--color-surface-muted); }
.dropdown--profile form { border-top: var(--border); }
.profile-menu-text-size { padding: var(--space-3) var(--space-4); border-top: var(--border); }
.profile-menu-text-size > span { display: block; margin-bottom: var(--space-2); color: var(--color-muted); font-size: 11px; font-weight: 750; }
.text-size-controls { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: var(--space-2); }
.dropdown--profile .text-size-controls button { display: grid; width: 36px; min-height: 34px; place-items: center; padding: 0; border: 1px solid #999; border-radius: var(--radius-control); background: #fff; color: #111; font-size: 19px; font-weight: 750; line-height: 1; text-align: center; }
.dropdown--profile .text-size-controls button:hover { border-color: #111; background: var(--color-surface-muted); }
.dropdown--profile .text-size-controls button:disabled { border-color: #ccc; color: #aaa; opacity: 1; }
.text-size-controls span { font-size: 12px; font-weight: 750; text-align: center; white-space: nowrap; }
.dropdown--notifications { width: min(360px, calc(100vw - 24px)); }
.dropdown__heading { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: var(--border); }
.dropdown__heading a { color: var(--color-muted); font-size: 12px; font-weight: 650; }
.dropdown__empty { margin: 0; padding: var(--space-6); color: var(--color-muted); text-align: center; }
.notification-compact { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-bottom: var(--border); font-size: 13px; }
.notification-compact:hover { background: var(--color-surface-muted); }
.notification-compact.is-unread { border-left: 3px solid var(--color-accent); background: #fafafa; font-weight: 650; }
.notification-compact time { color: var(--color-muted); font-size: 11px; font-weight: 400; }

.application-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    width: min(calc(100% - 32px), var(--site-max-width));
    align-items: start;
    margin: 0 auto;
    padding-top: calc(var(--header-height) + var(--space-4));
}
.application-shell.has-left-sidebar { grid-template-columns: var(--left-width) minmax(0, 1fr); }
.application-shell.has-right-ad { grid-template-columns: minmax(0, 1fr) var(--right-ad-width); }
.application-shell.has-left-sidebar.has-right-ad { grid-template-columns: var(--left-width) minmax(0, 1fr) var(--right-ad-width); }
.main-feed { min-width: 0; padding-bottom: 80px; }
.left-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    height: auto;
    max-height: calc(100vh - var(--header-height) - var(--space-8));
    overflow-y: auto;
    padding: 0 var(--space-2) var(--space-6) 0;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.left-sidebar::-webkit-scrollbar { display: none; }
.left-sidebar > nav { display: flex; min-height: 100%; flex-direction: column; }
.sidebar-section { padding: var(--space-2) 0 var(--space-4); border-bottom: var(--border); }
.sidebar-section + .sidebar-section { padding-top: var(--space-4); }
.sidebar-label { margin: 0 0 var(--space-2); padding: 0 var(--space-3); color: var(--color-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-link {
    position: relative;
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: var(--space-3);
    padding: 8px var(--space-3);
    border-radius: var(--radius-control);
    color: #333;
    font-size: 14px;
    font-weight: 550;
}
.sidebar-link--pro {
    width: calc(100% - (var(--space-2) * 2));
    min-height: 44px;
    margin: var(--space-3) var(--space-2) 0;
    justify-content: center;
    border: 1px solid #b80f20;
    background: var(--color-accent-button);
    box-shadow: 0 3px 12px rgb(226 27 45 / 24%);
    color: #fff;
    font-weight: 800;
    text-align: center;
}
.sidebar-link--pro strong { color: #fff; font-size: 16px; }
.sidebar-link.sidebar-link--pro:hover { border-color: #000; background: #000; box-shadow: 0 4px 16px rgb(0 0 0 / 30%); color: #fff; }
.sidebar-link--pro:hover .icon { color: var(--color-accent); }
.sidebar-link:hover { background: var(--color-surface-muted); }
.sidebar-link.is-active { background: var(--color-surface-muted); color: #000; font-weight: 750; }
.sidebar-link.is-active::before { position: absolute; inset: 8px auto 8px 0; width: 3px; border-radius: 2px; background: var(--color-accent); content: ""; }
.sidebar-feature { padding: var(--space-4) 0; border-bottom: var(--border); }
.sidebar-clapback { display: block; margin: 0 var(--space-1); padding: var(--space-3); border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius-control) var(--radius-control) 0; background: #fff7f8; }
.sidebar-clapback:hover { background: #ffedef; }
.sidebar-clapback > span:not(.sidebar-clapback__stats) { display: block; margin-bottom: var(--space-2); font-size: 13px; font-weight: 650; line-height: 1.45; }
.sidebar-clapback small { color: var(--color-muted); font-size: 11px; }
.sidebar-clapback small { color: #6f6f6f; }
.sidebar-clapback__stats { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 5px; color: var(--color-muted); }
.sidebar-clapback__stats span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 650; line-height: 1.2; }
.sidebar-join { margin: 0; padding: var(--space-4); border: 1px solid #efb9bf; border-top: 3px solid var(--color-accent); border-radius: var(--radius-card); background: #fff8f8; }
.sidebar-join .sidebar-label { padding: 0; color: var(--color-accent); }
.sidebar-join p { margin-bottom: var(--space-4); color: #626262; font-size: 12px; }
.sidebar-login-link { display: block; width: 100%; margin-top: var(--space-3); padding: var(--space-1); border: 0; background: transparent; color: #555; font-size: 11px; font-weight: 650; text-align: center; }
.sidebar-login-link:hover { color: var(--color-accent); text-decoration: underline; }
.sidebar-community { margin-top: auto; padding: var(--space-5) var(--space-3) 0; border-top: var(--border); }
.sidebar-community .sidebar-label { padding: 0; }
.side-module__eyebrow, .eyebrow { color: var(--color-accent) !important; font-size: 11px !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.community-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0; }
.community-stats div { display: flex; flex-direction: column-reverse; }
.community-stats dt { color: var(--color-muted); font-size: 11px; }
.sidebar-social-links { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.sidebar-social-links a { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: var(--border); border-radius: 50%; background: var(--color-surface-muted); color: var(--color-text); transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease; }
.sidebar-social-links a:hover { border-color: var(--color-accent); background: var(--color-accent-surface); color: var(--color-accent); transform: translateY(-1px); }

.right-ad-rail { position: sticky; top: calc(var(--header-height) + var(--space-4)); min-width: 0; align-self: start; }
.right-ad-rail__sticky { display: flex; flex-direction: column; gap: var(--space-3); }
.theme-toggle {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    border: var(--border);
    border-radius: var(--radius-card);
    background: var(--color-surface-elevated);
    color: var(--color-text);
    text-align: left;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.theme-toggle:hover { border-color: var(--color-accent); background: var(--color-surface-muted); box-shadow: 0 4px 14px rgb(0 0 0 / 12%); }
.theme-toggle__icons { position: relative; display: flex; width: 52px; height: 28px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 6px; border: 1px solid var(--color-control-border); border-radius: 20px; background: var(--color-surface-muted); color: var(--color-muted); }
.theme-toggle__icons .icon { position: relative; z-index: 1; }
.theme-toggle__icons .icon:first-child { color: #8a5a00; }
.theme-toggle__knob { position: absolute; z-index: 0; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-surface-elevated); box-shadow: 0 1px 4px rgb(0 0 0 / 28%); transition: transform .2s ease, background-color .2s ease; }
.theme-toggle[aria-pressed="true"] .theme-toggle__knob { background: var(--color-accent-button); transform: translateX(24px); }
.theme-toggle[aria-pressed="true"] .theme-toggle__icons .icon:first-child { color: var(--color-muted); }
.theme-toggle[aria-pressed="true"] .theme-toggle__icons .icon:nth-child(2) { color: #fff; }
.theme-toggle:hover .theme-toggle__knob { background: var(--color-header); }
.theme-toggle[aria-pressed]:hover .theme-toggle__icons .icon { color: var(--color-accent); }
.theme-toggle__copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.15; }
.theme-toggle__copy strong { font-size: 12px; white-space: nowrap; }
.theme-toggle__copy small { margin-top: 3px; color: var(--color-muted); font-size: 10px; }
.theme-toggle--mobile { margin-bottom: var(--space-3); }
html.is-theme-switching *,
html.is-theme-switching *::before,
html.is-theme-switching *::after { transition: none !important; }
.ad-slot { display: flex; align-items: center; justify-content: center; border: 1px solid #000; border-radius: var(--radius-card); background: #000; color: #fff; text-align: center; }
.ad-slot span { color: #d7d7d7; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ad-slot strong { color: #fff; font-size: 13px; }
.ad-slot small { color: #aaa; font-size: 10px; }
.ad-slot--vertical { width: 160px; height: 600px; flex-direction: column; gap: 5px; }
.right-ad-rail__remove {
    display: inline-flex;
    width: 160px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--color-accent-button);
    border-radius: var(--radius-control);
    background: var(--color-accent-button);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}
.right-ad-rail__remove:hover { border-color: #000; background: #000; color: #fff; }
.right-ad-rail__remove:hover .icon { color: var(--color-accent); }
.ad-slot--horizontal { width: calc(100% - (var(--space-4) * 2)); min-height: 90px; flex-direction: column; gap: 3px; margin: var(--space-4); }
.community-stats dd { margin: 0; font-size: 18px; font-weight: 750; }
.sidebar-footer { display: flex; flex-wrap: wrap; gap: 6px var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border); color: var(--color-muted); font-size: 11px; }
.sidebar-footer a:hover { color: var(--color-accent); text-decoration: underline; }
.sidebar-footer span { width: 100%; }

.feed-intro, .page-heading {
    padding: var(--space-5) var(--space-5) var(--space-4);
    border: var(--border);
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--color-surface);
}
.feed-intro h1, .page-heading h1 { margin-bottom: var(--space-2); font-size: 25px; letter-spacing: -.45px; }
.feed-intro p:last-child, .page-heading p:last-child { margin-bottom: 0; color: var(--color-muted); font-size: 14px; }
.feed-intro .feed-intro__lead { margin: var(--space-3) 0 var(--space-2); color: #111; font-size: 19px; font-weight: 800; line-height: 1.35; }
.feed-intro p.feed-intro__support { max-width: 850px; margin: 0; color: #111; font-size: 15px; font-weight: 500; line-height: 1.55; }
.feed-intro--clapback {
    background-color: #fff;
    background-image: url("../../media/2026/08/3b4bd9588b713459e4ac0143826896c2.png");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}
.feed-intro--roasts {
    background-color: #fff;
    background-image: url("../../media/2026/08/thumbs/c0ec95bceed8ef79b6e001215391e616.webp");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}
.page-heading { margin-bottom: var(--space-4); border-radius: var(--radius-card); }
.page-heading--compact { padding-block: var(--space-4); }
.page-heading--compact h1 { margin: 0; }
.page-heading--with-action { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

.tabs {
    display: flex;
    min-height: 48px;
    align-items: stretch;
    gap: var(--space-5);
    padding: 0 var(--space-5);
    border-bottom: var(--border);
    background: var(--color-surface);
}
.tab {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 1px;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 700;
}
.tab::after { position: absolute; inset: auto 0 -1px; height: 3px; background: transparent; content: ""; }
.tab:hover { color: var(--color-text); }
.tab.is-active { color: var(--color-text); }
.tab.is-active::after { background: var(--color-accent); }

.feed-controls {
    display: flex;
    min-height: 50px;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-6);
    padding: 0 var(--space-5);
    border-bottom: var(--border);
    background: var(--color-surface);
}
.feed-controls.is-refreshing { pointer-events: none; }
.content-type-tabs, .feed-sort-tabs { display: flex; min-width: 0; align-items: stretch; gap: var(--space-5); }
.feed-sort-tabs { margin-left: auto; }
.content-type-tab, .feed-sort-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 1px;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 750;
}
.content-type-tab::after, .feed-sort-tab::after { position: absolute; inset: auto 0 -1px; height: 3px; background: transparent; content: ""; }
.content-type-tab:hover, .feed-sort-tab:hover, .content-type-tab.is-active, .feed-sort-tab.is-active { color: var(--color-text); }
.content-type-tab:hover .icon, .content-type-tab.is-active .icon { color: var(--color-accent); }
.content-type-tab.is-active::after, .feed-sort-tab.is-active::after { background: var(--color-accent); }
.feed-sort-select { display: none; }
.post-type-tabs { min-height: 50px; margin-bottom: var(--space-4); padding: 0 var(--space-5); border-bottom: var(--border); background: var(--color-surface); }

.feed-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; border: 0; }
.feed-list.is-refreshing { min-height: 220px; opacity: .48; pointer-events: none; transition: opacity .14s ease; }
.feed-intro--top-liners {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    background-color: #fff;
    background-image: url("../../media/2026/08/thumbs/e9d85f72bdadbc4384881f6aca2ce0a6.webp");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}
.feed-intro--top-liners > div { min-width: 0; }
.feed-intro--top-liners .button { flex: 0 0 auto; }
.top-liner-list { gap: 9px; }
.top-liner-card {
    position: relative;
    display: grid;
    min-height: 82px;
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) auto;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--color-accent-dark);
    border-radius: 8px;
    background: var(--color-accent-button);
    color: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 9%);
}
.top-liner-card__meta { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 7px; padding: 10px 12px; background: rgb(0 0 0 / 14%); }
.top-liner-author { display: flex; min-width: 0; align-items: center; gap: 8px; }
.top-liner-author > span { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; }
.top-liner-author strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.top-liner-author time { color: rgb(255 255 255 / 76%); font-size: 11px; font-weight: 600; }
.top-liner-category { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid rgb(255 255 255 / 42%); border-radius: 999px; color: #fff; font-size: 10px; font-weight: 750; line-height: 1.2; }
.top-liner-category span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-liner-category:hover { border-color: #fff; background: rgb(0 0 0 / 20%); }
.top-liner-category:hover .icon, .top-liner-author:hover strong { color: #fff; }
.top-liner-card__text { align-self: center; margin: 0; padding: 13px 18px; color: #fff; font-size: clamp(14px, var(--clapback-font-size), 32px); font-weight: 750; line-height: 1.35; }
.top-liner-card__actions { display: flex; min-width: 60px; align-items: center; justify-content: center; gap: 1px; padding: 5px 8px 5px 2px; }
.top-liner-report, .top-liner-owner-remove button { display: inline-grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: rgb(255 255 255 / 78%); }
.top-liner-report:hover, .top-liner-owner-remove button:hover { background: rgb(0 0 0 / 22%); color: #fff; }
.top-liner-card__vote .vote-control { color: #fff; }
.top-liner-card__vote .vote-button,
.top-liner-card__vote .vote-button .icon { color: #fff !important; }
.top-liner-card__vote .vote-button:hover, .top-liner-card__vote .vote-button.is-active { color: #fff !important; }
.top-liner-card__vote .vote-button:hover { background: rgb(0 0 0 / 18%); }
.top-liner-card__vote .vote-score { color: #fff; }
.top-liner-card .admin-inline-tools--compact { margin: 0; }
.top-liner-card .admin-inline-tools--compact button { color: rgb(255 255 255 / 78%); }
.top-liner-card .admin-inline-tools--compact button:hover { background: rgb(0 0 0 / 22%); color: #fff; }
.top-liner-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: var(--space-4) 0; }
.top-liner-pagination .button { min-width: 38px; min-height: 36px; padding: 6px 10px; }
.situation-card { position: relative; border-bottom: var(--border); background: var(--color-surface); }
.feed-list > .situation-card {
    border: var(--border);
    border-radius: 9px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 7%);
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.feed-list > .ad-slot--horizontal { width: 100%; margin: 0; }
.situation-card--detail { border: var(--border); border-top: var(--border); border-radius: var(--radius-card); }
.content-header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-2); }
.user-line { display: flex; min-width: 0; align-items: center; gap: var(--space-3); }
.user-line > span:not(.avatar) { display: flex; min-width: 0; flex-direction: column; }
.user-line strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.user-line small { color: var(--color-muted); font-size: 12px; }
.content-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.situation-category-pill {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--color-accent-border);
    border-radius: 999px;
    background: var(--color-accent-surface-soft);
    color: var(--color-accent-dark);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
.situation-category-pill .icon { width: 14px; height: 14px; }
.situation-category-pill:hover { border-color: var(--color-accent); background: var(--color-accent-surface-hover); color: var(--color-accent-dark); }
.avatar {
    display: grid;
    overflow: hidden;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #d5d5d5;
    border-radius: 50%;
    background: var(--color-surface-muted);
    color: #333;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -.2px;
}
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.avatar--xl { width: 84px; height: 84px; font-size: 22px; }
.avatar--sm { width: 32px; height: 32px; font-size: 9px; }
.avatar--xs { width: 25px; height: 25px; font-size: 8px; }
.situation-text {
    display: block;
    padding: var(--space-3) var(--space-5) var(--space-5);
    color: var(--color-text);
    font-size: clamp(14px, var(--situation-font-size), 36px);
    font-weight: 570;
    line-height: 1.55;
}
a.situation-text:hover { text-decoration: underline; text-decoration-color: #ccc; text-underline-offset: 3px; }
.situation-text--feed {
    position: relative;
    margin: 0 var(--space-5) var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-5) 62px;
    border-left: 3px solid var(--color-accent);
    border-radius: 3px 0 0 3px;
    background: linear-gradient(90deg, var(--color-accent-surface-soft), var(--color-surface));
}
.situation-text--feed::before {
    position: absolute;
    top: 11px;
    left: 17px;
    color: var(--color-accent);
    content: "“";
    font-family: Georgia, serif;
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
}
a.situation-text--feed:hover { background: linear-gradient(90deg, var(--color-accent-surface-hover), var(--color-surface)); text-decoration: none; }
.situation-text--detail { margin: 0 var(--space-5) var(--space-4); font-size: clamp(17px, var(--situation-detail-font-size), 46px); font-weight: 650; line-height: 1.48; }
.situation-vote-shell { position: relative; }
.situation-vote-shell:not(.situation-vote-shell--roast) .situation-text--feed { min-height: 100px; padding-right: 76px; }
.situation-card__vote { position: absolute; top: 50%; right: calc(var(--space-5) + 7px); z-index: 3; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); }
.situation-card__vote .vote-control { cursor: auto; }
.situation-vote-shell--roast .roast-title { min-height: 84px; padding-right: 76px; }
.situation-vote-shell--roast .situation-card__vote { top: 4px; transform: none; }
.situation-navigation { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.situation-navigation__button { min-width: 116px; min-height: 40px; justify-content: center; background: var(--color-surface); }
.situation-navigation__button--previous .icon { transform: rotate(180deg); }
.situation-navigation__button:hover { border-color: var(--color-text); background: var(--color-surface-muted); }
.situation-navigation__button:hover .icon { color: var(--color-accent); }
.situation-navigation__button:disabled { border-color: var(--color-control-border); background: var(--color-surface-muted); color: var(--color-muted); opacity: .5; }
.roast-title { display: block; margin: 0; padding: var(--space-2) var(--space-5) var(--space-4); color: var(--color-text); font-size: clamp(17px, var(--situation-font-size), 30px); font-weight: 750; line-height: 1.35; }
a.roast-title:hover { color: var(--color-accent); }
.roast-title--detail { padding-top: var(--space-3); font-size: clamp(22px, var(--situation-detail-font-size), 40px); }
.roast-image { display: block; overflow: hidden; width: 100%; margin: 0; border-block: var(--border); background: #0b0b0b; }
.roast-image img { width: 100%; height: auto; max-height: none; object-fit: contain; }
.roast-image:hover img { opacity: .97; }
.roast-image--detail:hover img { opacity: 1; }
.roast-gallery { min-width: 0; border-top: 2px solid var(--color-accent-button); background: #111; }
.roast-gallery__viewport { position: relative; width: 100%; max-height: 720px; aspect-ratio: 4 / 3; overflow: hidden; background: #111; isolation: isolate; }
.roast-gallery__slide { position: absolute; inset: 0; display: block; overflow: hidden; background: #111; }
.roast-gallery__slide[hidden] { display: none; }
.roast-gallery__link { position: absolute; inset: 0; display: block; overflow: hidden; }
.roast-gallery__slide::after { position: absolute; z-index: 1; inset: 0; background: rgb(0 0 0 / 20%); content: ""; pointer-events: none; }
.roast-gallery__ambient { position: absolute; width: 100%; height: 100%; inset: 0; transform: scale(1.12); filter: blur(28px) brightness(.42) saturate(.8); object-fit: cover; opacity: .82; }
.roast-gallery__image { position: absolute; z-index: 2; width: 100%; height: 100%; inset: 0; object-fit: contain; }
.roast-gallery--feed .roast-gallery__slide:hover .roast-gallery__image { opacity: .98; }
.roast-gallery__arrow { position: absolute; z-index: 5; top: 50%; display: grid; width: 42px; height: 42px; place-items: center; padding: 0; transform: translateY(-50%); border: 1px solid rgb(255 255 255 / 14%); border-radius: 50%; background: rgb(0 0 0 / 82%); color: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 35%); }
.roast-gallery__arrow--previous { left: 14px; }
.roast-gallery__arrow--previous .icon { transform: rotate(180deg); }
.roast-gallery__arrow--next { right: 14px; }
.roast-gallery__arrow:hover:not(:disabled) { border-color: rgb(255 255 255 / 34%); background: #000; }
.roast-gallery__arrow:disabled { color: #777; cursor: default; opacity: .72; }
.roast-gallery__arrow:focus-visible, .roast-gallery__dots button:focus-visible, .roast-gallery:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.roast-gallery__dots { position: absolute; z-index: 5; bottom: 17px; left: 50%; display: flex; align-items: center; justify-content: center; gap: 1px; padding: 4px 6px; transform: translateX(-50%); border-radius: 999px; background: rgb(0 0 0 / 82%); box-shadow: 0 1px 4px rgb(0 0 0 / 30%); }
.roast-gallery__dots button { display: grid; width: 15px; height: 15px; place-items: center; padding: 0; border-radius: 50%; }
.roast-gallery__dots button span { width: 7px; height: 7px; border-radius: 50%; background: #666; transition: background-color .14s ease, transform .14s ease; }
.roast-gallery__dots button[aria-current="true"] span { transform: scale(1.08); background: #fff; }
.roast-gallery-missing { display: grid; min-height: 280px; place-items: center; background: #111; color: #fff; }
.situation-stats { display: flex; flex-wrap: wrap; gap: var(--space-5); padding: 10px var(--space-5); border-top: var(--border); color: var(--color-muted); font-size: 12px; }
.situation-stats span { display: flex; align-items: center; gap: 5px; }
.situation-stats strong { color: #444; }
.situation-detail-meta { display: flex; min-height: 48px; align-items: stretch; justify-content: space-between; border-top: var(--border); }
.situation-detail-meta .situation-stats { min-width: 0; flex: 1 1 auto; align-content: center; border-top: 0; }
.situation-detail-actions { display: flex; flex: 0 0 auto; align-items: stretch; }
.situation-detail-actions .card-action + .card-action { border-left: var(--border); }
.situation-detail-share { min-width: 104px; flex: 0 0 auto; padding-inline: var(--space-5); }
.situation-clapback-cta { display: flex; align-items: center; justify-content: center; padding: 14px var(--space-5); border-top: var(--border); background: var(--color-surface); }
.situation-clapback-cta--bottom { margin: var(--space-4) 0; border: var(--border); border-radius: var(--radius-card); }
.clapback-cta { display: inline-flex; width: min(100%, 230px); min-height: 42px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 10px; padding: 7px 14px 7px 18px; border: 1px solid var(--color-accent-button); border-radius: 7px; background: var(--color-accent-button); box-shadow: 0 4px 11px rgb(226 27 45 / 18%); color: #fff; font-size: 13px; font-weight: 850; letter-spacing: .055em; line-height: 1; text-transform: uppercase; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.clapback-cta--inline { width: auto; min-width: 142px; min-height: 38px; align-self: center; margin: 5px 8px; padding-block: 6px; }
.situation-actions .clapback-cta--inline { min-width: 136px; margin-inline: 6px; }
.situation-detail-actions .clapback-cta--inline,
.situation-actions .clapback-cta--inline { box-shadow: none; }
.situation-detail-actions .clapback-cta--inline:hover,
.situation-actions .clapback-cta--inline:hover { box-shadow: none; transform: none; }
.clapback-cta:hover { border-color: #000; background: #000; box-shadow: 0 7px 18px rgb(0 0 0 / 24%); transform: translateY(-1px); }
.clapback-cta:active { transform: translateY(1px); }
.clapback-cta .clapback-mark { flex: 0 0 auto; color: #fff; }
.situation-actions { display: flex; min-height: 47px; align-items: stretch; border-top: var(--border); }
.situation-card__footer { display: flex; min-height: 48px; align-items: stretch; border-top: var(--border); }
.situation-card__footer .situation-stats { flex: 0 1 auto; align-content: center; padding-right: var(--space-3); border-top: 0; }
.situation-card__footer .situation-actions { min-width: 0; flex: 1 1 auto; border-top: 0; }
.situation-card__footer .situation-actions--primary { flex: 0 1 auto; padding-left: var(--space-5); }
.situation-card__footer .situation-actions--secondary { flex: 0 1 auto; margin-left: auto; }
.situation-card__footer .situation-actions--primary > *,
.situation-card__footer .situation-actions--secondary > * { margin: 0; }
.situation-card__footer .situation-actions--primary .clapback-cta--inline { min-width: 120px; min-height: 34px; padding: 5px 10px 5px 12px; gap: 7px; border-radius: 7px; font-size: 11px; }
.situation-card__footer .situation-actions--primary .clapback-cta--inline .clapback-mark { width: 21px; height: 21px; }
.situation-card__footer .situation-actions--primary .card-action { flex: 0 1 auto; }
.situation-card__footer .situation-actions--secondary .situation-stats { flex: 0 1 auto; padding-inline: 8px; }
.situation-card__footer .situation-actions--secondary .card-action { flex: 0 0 auto; }
.feed-list > .situation-card .situation-actions .card-action:first-child { border-bottom-left-radius: 8px; }
.feed-list > .situation-card .situation-actions .card-action:last-child { border-bottom-right-radius: 8px; }
.card-action {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px var(--space-3);
    color: #555;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}
.card-action:hover { background: var(--color-surface-muted); color: #111; }
.card-action--strong { color: var(--color-accent); font-weight: 800; }
.card-action--strong:hover { background: #fff1f2; color: var(--color-accent-dark); }
.card-action--flag { display: none; }
.situation-save-button { min-width: 48px; flex: 0 0 48px; padding-inline: 12px; }
.situation-save-button .icon { transition: color .16s ease, fill .16s ease, transform .16s ease; }
.situation-save-button.is-saved { background: var(--color-accent-surface); color: var(--color-accent); }
.situation-save-button.is-saved .icon { fill: currentColor; }
.situation-save-button:hover .icon { transform: translateY(-1px); }
.situation-save-button.is-loading { pointer-events: none; opacity: .55; }
.saved-feed .situation-card { transition: opacity .16s ease, transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.saved-feed .situation-card.is-removing { opacity: 0; transform: scale(.985); }
.saved-type-tabs { min-height: 50px; margin-bottom: var(--space-4); padding: 0 var(--space-5); border-bottom: var(--border); background: var(--color-surface); }

.admin-inline-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 var(--space-5) var(--space-2); padding: 6px 8px; border: 1px solid #efb9bf; border-radius: var(--radius-control); background: #fff5f6; }
.admin-inline-tools > span { margin-right: 3px; color: var(--color-accent-dark); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.admin-inline-tools form { display: inline-flex; }
.admin-inline-tools button { display: inline-flex; min-height: 28px; align-items: center; gap: 5px; padding: 4px 8px; border: 0; border-radius: 3px; background: #fff; color: #333; font-size: 11px; font-weight: 750; }
.admin-inline-tools button:hover { background: #111; color: #fff; }
.clapback-row .admin-inline-tools { margin: 0 0 var(--space-2); }
.admin-inline-tools--compact {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.admin-inline-tools--compact form { display: inline-flex; }
.admin-inline-tools--compact button {
    display: inline-grid;
    width: 28px;
    height: 28px;
    min-height: 28px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-muted);
}
.admin-inline-tools--compact button:hover { background: var(--color-surface-muted); color: var(--color-accent); }
.admin-inline-tools--compact button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.content-header__actions > .admin-inline-tools--compact { margin-right: 2px; }
.clapback-row__author > .admin-inline-tools--compact { margin: 0; }

.more-menu { position: relative; }
.more-menu summary { display: grid; width: 34px; height: 34px; place-items: center; border-radius: var(--radius-control); color: var(--color-muted); cursor: pointer; list-style: none; }
.more-menu summary::-webkit-details-marker { display: none; }
.more-menu summary:hover { background: var(--color-surface-muted); }
.more-menu__panel { position: absolute; top: 100%; right: 0; z-index: 10; min-width: 130px; padding: var(--space-1); border: var(--border); border-radius: var(--radius-control); background: #fff; box-shadow: var(--shadow-menu); }
.more-menu__panel button { width: 100%; padding: var(--space-2) var(--space-3); border: 0; background: #fff; text-align: left; font-size: 13px; }
.more-menu__panel button:hover { background: var(--color-surface-muted); }

.add-clapback { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-4) 0; padding: var(--space-4); border: 1px solid #efb9bf; border-left: 4px solid var(--color-accent); border-radius: var(--radius-card); background: #fff8f8; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.add-clapback[hidden] { display: none; }
.add-clapback:hover, .add-clapback:focus-within { border-color: var(--color-accent); background: #fff3f4; box-shadow: 0 4px 16px rgb(226 27 45 / 9%); }
.add-clapback form { min-width: 0; flex: 1; }
.add-clapback textarea { min-height: 88px; }
.add-clapback textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgb(226 27 45 / 16%); }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.form-footer > span { color: var(--color-muted); font-size: 11px; }
.add-clapback__guest { display: flex; width: 100%; min-height: 58px; align-items: center; gap: var(--space-3); padding: var(--space-2); border: 0; border-radius: var(--radius-control); background: transparent; text-align: left; transition: background-color .16s ease, transform .16s ease; }
.add-clapback__guest:hover { background: #ffe9eb; }
.add-clapback__guest:active { transform: translateY(1px); }
.add-clapback__guest > .icon { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--color-accent-button); color: #fff; }
.add-clapback__guest > span { display: flex; flex-direction: column; }
.add-clapback__guest strong { color: var(--color-accent-dark); font-size: 15px; text-transform: uppercase; }
.add-clapback__guest small { color: var(--color-muted); }
.add-clapback__guest small { color: #6f6f6f; }

/* The revealed composer stays compact and neutral; red is reserved for its
   accent and submit action instead of filling the entire editing surface. */
html .add-clapback.add-clapback--collapsible {
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid var(--color-control-border);
    border-left: 3px solid var(--color-accent);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 2px 7px rgb(0 0 0 / 7%);
    color: var(--color-text);
}
html .add-clapback.add-clapback--collapsible:hover,
html .add-clapback.add-clapback--collapsible:focus-within {
    border-color: var(--color-accent);
    background: var(--color-surface);
    box-shadow: 0 3px 10px rgb(0 0 0 / 9%);
}
html .add-clapback.add-clapback--collapsible > .avatar { align-self: flex-start; margin-top: 3px; }
html .add-clapback.add-clapback--collapsible textarea {
    height: 68px;
    min-height: 68px;
    padding: 10px 12px;
    border: 1px solid var(--color-control-border);
    background: var(--color-surface);
    color: var(--color-text);
    line-height: 1.4;
    resize: vertical;
}
html .add-clapback.add-clapback--collapsible textarea:focus {
    border-color: var(--color-accent);
    outline: 0;
    box-shadow: 0 0 0 2px rgb(218 41 33 / 14%);
}
html .add-clapback.add-clapback--collapsible .form-footer { margin-top: 6px; }
html .add-clapback.add-clapback--collapsible .form-footer > span { color: var(--color-muted); }
html .add-clapback.add-clapback--collapsible .form-footer .button {
    min-height: 34px;
    padding: 6px 13px;
    border-radius: 5px;
    box-shadow: none;
    font-size: 12px;
}
html .add-clapback.add-clapback--collapsible .form-footer .button:hover {
    box-shadow: none;
    transform: none;
}
html[data-theme="dark"] .add-clapback.add-clapback--collapsible,
html[data-theme="dark"] .add-clapback.add-clapback--collapsible:hover,
html[data-theme="dark"] .add-clapback.add-clapback--collapsible:focus-within {
    border-color: #444;
    border-left-color: var(--color-accent);
    background: var(--color-surface);
    box-shadow: 0 2px 7px rgb(0 0 0 / 35%);
    color: var(--color-text);
}
html[data-theme="dark"] .add-clapback.add-clapback--collapsible:focus-within { border-color: var(--color-accent); }
html[data-theme="dark"] .add-clapback.add-clapback--collapsible textarea { border-color: #555; background: var(--color-surface-elevated); }
.verification-prompt { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3); }
.verification-prompt a { text-decoration: underline; }

.clapbacks-section { border: 0; border-radius: 0; }
.clapbacks-section > .tabs { margin-bottom: var(--space-4); border: var(--border); border-radius: var(--radius-card); }
.section-heading { padding: var(--space-5) 0 var(--space-2); }
.section-heading h2 { margin: 0; font-size: 18px; }
.section-heading h2 span { color: var(--color-muted); font-size: 14px; font-weight: 500; }
.clapback-list { display: flex; flex-direction: column; gap: 17px; }
.profile-nav + .clapback-list { padding-top: var(--space-4); }
.clapback-popularity-label { position: relative; z-index: 3; display: flex; width: fit-content; min-width: 0; min-height: 22px; align-items: center; justify-content: center; gap: 5px; margin: 0 0 -4px 20px; padding: 4px 9px; border: 0; border-radius: 5px 5px 2px 2px; background: var(--color-accent-button); box-shadow: none; color: #fff; font-size: 9px; font-weight: 850; letter-spacing: .045em; line-height: 1; text-transform: uppercase; }
.clapback-popularity-label .icon { width: 13px; height: 13px; flex: 0 0 auto; color: #fff; }
.clapback-row {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 94px;
    padding: 18px 78px 24px 24px;
    border: 1px solid #dc7d86;
    border-radius: 12px;
    background: var(--color-clapback-surface);
    box-shadow: 0 2px 5px rgb(0 0 0 / 7%);
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.clapback-row::before,
.clapback-row::after { position: absolute; top: 100%; left: 20px; width: 0; height: 0; border-style: solid; content: ""; pointer-events: none; }
.clapback-row::before { border-width: 25px 25px 0 0; border-color: #dc7d86 transparent transparent transparent; }
.clapback-row::after { left: 22px; border-width: 22px 22px 0 0; border-color: var(--color-clapback-surface) transparent transparent transparent; }
.clapback-row__author,
.clapback-row__vote { cursor: auto; }
.clapback-row:focus-within { border-color: var(--color-accent); background: var(--color-clapback-surface); box-shadow: 0 0 0 1px var(--color-accent), 0 5px 14px rgb(0 0 0 / 10%); }
.clapback-row:focus-within::before { border-top-color: var(--color-accent); }
.clapback-row__meta { display: flex; min-height: 50px; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: 0 18px 0 20px; }
.clapback-row__author { display: flex; width: max-content; max-width: calc(100% - 105px); min-height: 50px; align-items: center; justify-content: flex-end; gap: 5px; margin-left: auto; padding: 7px 10px; background: var(--color-clapback-surface); }
.clapback-author { min-width: 0; justify-content: flex-start; gap: 7px; }
.clapback-author strong { max-width: 180px; }
.clapback-author time { flex: 0 0 auto; color: var(--color-muted); font-size: 12px; }
.clapback-row__author .icon-button { width: 30px; height: 30px; flex: 0 0 auto; }
.clapback-text {
    position: static;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: clamp(14px, var(--clapback-font-size), 34px);
    font-weight: 700;
    line-height: 1.45;
}
.clapback-context { display: block; margin: var(--space-1) 0 var(--space-2); color: var(--color-muted); font-size: 12px; }
.clapback-context:hover { text-decoration: underline; }
.clapback-row__vote { position: absolute; top: 50%; right: 14px; z-index: 2; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); }
.clapback-row__footer { display: flex; flex: 0 0 auto; align-items: center; margin-left: 6px; padding-top: 5px; }
.vote-control { display: flex; width: 46px; align-items: center; flex-direction: column; padding: 2px 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--color-muted); }
.vote-button { display: inline-flex; width: 36px; height: 30px; flex: 0 0 30px; align-items: center; justify-content: center; padding: 3px; border: 0; border-radius: 7px; background: transparent; color: #686868 !important; cursor: pointer; transition: color .14s ease, background-color .14s ease, transform .14s ease; }
.vote-button .icon { width: 22px; height: 22px; color: inherit !important; fill: currentColor; stroke: none; }
.vote-button:hover { background: transparent; color: var(--color-accent) !important; }
.vote-button:active { transform: scale(.9); }
.vote-button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; }
.vote-button.is-active { color: var(--color-accent) !important; }
.vote-score { display: block; min-width: 38px; padding: 1px 2px; color: var(--color-text); font-size: 13px; font-weight: 850; line-height: 1.15; text-align: center; font-variant-numeric: tabular-nums; }
.vote-control.is-loading { opacity: .58; pointer-events: none; }
.reply-action { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; padding: 4px 9px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-muted); font-size: 12px; font-weight: 750; }
.reply-action:hover { background: var(--color-surface-muted); color: var(--color-accent-dark); }
.clapback-row__footer .reply-action { min-height: 38px; color: var(--color-text); font-size: 15px; font-weight: 500; }
.clapback-row__footer .reply-action__label { text-transform: lowercase; }
.reply-action__count { font-variant-numeric: tabular-nums; }
.reply-composer[hidden], .reply-node[hidden], .reply-thread__show-all[hidden] { display: none; }
.clapback-thread > .reply-composer { margin: var(--space-2) 18px 0 53px; }
.reply-composer { padding: var(--space-3); border: 1px solid var(--color-control-border); border-radius: 8px; background: var(--color-surface-elevated); }
.reply-composer label { color: var(--color-text-soft); font-size: 11px; font-weight: 750; }
.reply-composer textarea { min-height: 68px; margin-top: 5px; resize: vertical; font-size: 14px; }
.reply-composer textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgb(226 27 45 / 14%); }
.reply-composer__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.reply-composer__footer > span { color: var(--color-muted); font-size: 10px; }
.reply-composer__footer > div { display: flex; gap: var(--space-2); }
.reply-thread { margin: var(--space-3) 18px 0 53px; }
.clapback-thread > .reply-composer:not([hidden]) + .reply-thread { margin-top: var(--space-4); }
.reply-thread__list { display: flex; flex-direction: column; gap: var(--space-3); }
.reply-node { position: relative; min-width: 0; }
.reply-card { min-width: 0; padding: 10px 12px; border: 1px solid var(--color-control-border); border-radius: 9px; background: var(--color-surface-elevated); }
.reply-card--deleted { border-style: dashed; background: var(--color-surface-muted); }
.reply-card__header { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 5px; }
.reply-author { min-width: 0; flex: 1 1 140px; gap: 6px; }
.reply-author strong { overflow: hidden; max-width: 180px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reply-author time { flex: 0 0 auto; color: var(--color-muted); font-size: 11px; }
.reply-card__body { margin: 8px 0 0; color: var(--color-text); font-size: 15px; font-weight: 400; line-height: 1.5; }
.reply-card__actions { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.reply-card__vote .vote-control { width: auto; flex-direction: row; padding: 0; }
.reply-card__vote .vote-button { width: 28px; height: 28px; flex-basis: 28px; }
.reply-card__vote .vote-button .icon { width: 17px; height: 17px; }
.reply-card__vote .vote-score { min-width: 24px; padding-inline: 0; font-size: 12px; }
.reply-card > .reply-composer { margin-top: var(--space-2); }
.reply-deleted { margin: 0; color: var(--color-muted); font-size: 13px; font-style: italic; }
.reply-children { position: relative; display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-3) 0 0 18px; padding-left: 18px; border-left: 2px solid var(--color-control-border); }
.reply-children > .reply-node::before { position: absolute; top: 21px; left: -18px; width: 17px; border-top: 2px solid var(--color-control-border); content: ""; }
.reply-admin-tools { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; margin-left: auto; }
.reply-admin-tools form, .reply-owner-remove { display: inline-flex; }
.reply-admin-tools button, .reply-owner-remove button { display: inline-grid; min-width: 27px; height: 27px; padding: 3px 6px; place-items: center; border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-control); color: var(--color-text-soft); font-size: 10px; font-weight: 800; }
.reply-admin-tools button:hover, .reply-owner-remove button:hover { border-color: var(--color-accent); background: var(--color-accent-surface-hover); color: var(--color-accent-dark); }
.reply-owner-remove { margin-left: auto; }
.reply-thread__show-all { min-width: 170px; margin: var(--space-3) 0 0; }
.end-of-feed { margin: 0; padding: var(--space-5); color: var(--color-muted); text-align: center; font-size: 12px; }
.clapback-list > .end-of-feed { margin-top: -24px; padding-top: 6px; }
.load-more-wrap { padding: var(--space-5); text-align: center; }
.load-more { min-width: 150px; }
.loading-row { display: flex; justify-content: center; gap: 5px; padding: 8px; }
.loading-row span { width: 7px; height: 7px; border-radius: 50%; background: #777; animation: pulse 1s infinite alternate; }
.loading-row span:nth-child(2) { animation-delay: .15s; }.loading-row span:nth-child(3) { animation-delay: .3s; }
.load-more-skeleton { margin: calc(var(--space-5) * -1); text-align: left; }

label { display: flex; flex-direction: column; gap: 6px; color: #333; font-size: 13px; font-weight: 700; }
label small { color: var(--color-muted); font-size: 11px; font-weight: 400; }
input, textarea, select {
    width: 100%;
    min-height: 42px;
    padding: 9px var(--space-3);
    border: 1px solid #cfcfcf;
    border-radius: var(--radius-control);
    outline: 0;
    background: #fff;
    font-size: 15px;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { border-color: #111; box-shadow: 0 0 0 1px #111; }
.form-card, .settings-card { padding: var(--space-6); border: var(--border); border-radius: var(--radius-card); }
.form-card form, .settings-card form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-card--narrow { max-width: 520px; }
.form-card__note { display: flex; gap: var(--space-3); padding: var(--space-3); background: var(--color-surface-muted); }
.form-card__note p { display: flex; margin: 0; flex-direction: column; font-size: 13px; }
.form-card__note span { color: var(--color-muted); }
.roast-upload-control { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); }
.roast-upload-control__label { color: var(--color-text-strong); font-size: 13px; font-weight: 700; }
.roast-upload-input { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.roast-upload-input:focus + .roast-upload-actions .roast-upload-picker { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.roast-upload-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.roast-upload-actions [hidden] { display: none; }
.roast-upload-actions .roast-upload-picker { display: inline-flex; align-items: center; flex-direction: row; justify-content: center; gap: 7px; color: var(--color-text); font-size: 13px; }
.roast-upload-actions output { margin-left: auto; color: var(--color-muted); font-size: 12px; font-weight: 650; }
.roast-upload-control > small { color: var(--color-muted); font-size: 11px; font-weight: 400; }
.roast-upload-message { margin: 0; padding: 9px 11px; border-left: 3px solid var(--color-accent); background: var(--color-surface-muted); color: var(--color-text); font-size: 12px; }
.roast-upload-message[hidden], .roast-upload-preview-list[hidden] { display: none; }
.roast-upload-preview-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.roast-upload-preview-item { position: relative; min-width: 0; overflow: hidden; border: var(--border); border-radius: var(--radius-card); background: #111; }
.roast-upload-preview-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.roast-upload-preview-item span { position: absolute; bottom: 7px; left: 7px; min-width: 24px; padding: 3px 7px; border-radius: 999px; background: rgb(0 0 0 / 78%); color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
.roast-upload-preview-item button { position: absolute; top: 7px; right: 7px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgb(255 255 255 / 22%); border-radius: 50%; background: rgb(0 0 0 / 82%); color: #fff; }
.roast-upload-preview-item button:hover { background: #000; }
.settings-card + .settings-card { margin-top: var(--space-4); }
.settings-card h2 { margin-bottom: var(--space-5); font-size: 18px; }
.settings-card form { max-width: 480px; }
.notification-settings__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.notification-settings__heading h2 { margin-bottom: var(--space-1); }
.notification-settings__heading p { margin: 0 0 var(--space-5); color: var(--color-muted); font-size: 13px; }
.notification-settings__heading > .icon { flex: 0 0 auto; color: var(--color-accent); }
.social-settings__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.social-settings__heading h2 { margin-bottom: var(--space-1); }
.social-settings__heading p { max-width: 620px; margin: 0 0 var(--space-5); color: var(--color-muted); font-size: 13px; }
.social-settings__heading > .icon { flex: 0 0 auto; color: var(--color-accent); }
.social-settings form { max-width: 620px; }
.social-field-label { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.social-field-label .social-icon { color: var(--color-text); }
.social-settings label:focus-within .social-icon { color: var(--color-accent); }
.social-settings input[aria-invalid="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.social-field-error { color: var(--color-accent-dark); font-size: 12px; font-weight: 650; line-height: 1.4; }
.social-form-status { margin: 0; padding: var(--space-3); border: 1px solid var(--color-control-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-control); background: var(--color-accent-surface-soft); color: var(--color-accent-dark); font-size: 13px; font-weight: 650; }
.social-form-status.is-success { border-left-color: var(--color-success); background: var(--color-success-surface-soft); color: var(--color-success); }
.social-settings [data-social-submit]:disabled { border-color: #c9c9c9; background: #dedede; color: #858585; opacity: 1; box-shadow: none; }
.notification-preference { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4); border: var(--border); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.notification-preference > span { display: flex; flex-direction: column; gap: 2px; }
.notification-preference small { color: var(--color-muted); font-weight: 450; }
.notification-preference input { width: 20px; min-width: 20px; height: 20px; accent-color: var(--color-accent-button); }
.pro-settings__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.pro-settings__heading h2 { margin-bottom: var(--space-3); }
.pro-subscription-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-5); }
.pro-subscription-details div { padding: var(--space-3); border: var(--border); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.pro-subscription-details dt { color: var(--color-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.pro-subscription-details dd { margin: var(--space-1) 0 0; font-size: 14px; font-weight: 750; }
.pro-cancel-note { margin: var(--space-4) 0 0; padding: var(--space-3); border-left: 3px solid var(--color-accent); background: #fff5f6; color: #555; font-size: 12px; }
.avatar-settings__heading { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.avatar-settings__heading h2 { margin: 0 0 4px; }
.avatar-settings__heading p { margin: 0; color: var(--color-muted); font-size: 13px; line-height: 1.5; }
.avatar-file-label small { display: block; margin-top: 6px; color: var(--color-muted); font-size: 12px; font-weight: 400; }
.avatar-cropper { display: grid; grid-template-columns: minmax(180px, 240px) minmax(180px, 1fr); align-items: center; gap: var(--space-5); padding: var(--space-4); border: var(--border); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.avatar-cropper[hidden] { display: none; }
.avatar-cropper__preview { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #d7d7d7; cursor: grab; touch-action: none; }
.avatar-cropper__preview:active { cursor: grabbing; }
.avatar-cropper__preview canvas { display: block; width: 100%; height: 100%; }
.avatar-cropper__preview > span { position: absolute; inset: 0; border: 3px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.15); pointer-events: none; }
.avatar-cropper__controls { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.avatar-cropper__controls label { gap: 6px; }
.avatar-cropper__controls output { float: right; color: var(--color-muted); font-weight: 500; }
.avatar-cropper__controls input[type="range"] { width: 100%; padding: 0; accent-color: var(--color-accent); }
.avatar-cropper__controls p, .avatar-cropper__status, .field-help { margin: 0; color: var(--color-muted); font-size: 12px; line-height: 1.5; }
.avatar-cropper__status.is-error { color: var(--color-accent); font-weight: 650; }
.verification-banner, .warning-banner { margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-accent); border-radius: var(--radius-card); }
.verification-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.verification-banner > div { display: flex; align-items: center; gap: var(--space-3); }
.verification-banner span { display: flex; flex-direction: column; }
.verification-banner small { color: var(--color-muted); }
.warning-banner { border-left-width: 4px; }
.warning-banner p { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: 13px; }

.profile-header { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-6); border: var(--border); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.profile-header__identity h1 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); font-size: 25px; }
.profile-header__identity p { margin: 0; color: var(--color-muted); font-size: 13px; }
.profile-social-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.profile-social-links a { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: var(--border); border-radius: 50%; background: var(--color-surface-muted); color: var(--color-text); transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease; }
.profile-social-links a:hover { border-color: var(--color-accent); background: var(--color-accent-surface); color: var(--color-accent); transform: translateY(-1px); }
.role-badge, .status-pill { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 20px; background: var(--color-surface-muted); color: #555; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.bot-badge { display: inline-flex; align-items: center; margin-left: 5px; padding: 2px 6px; border: 1px solid var(--color-accent); border-radius: 20px; background: var(--color-accent-surface); color: var(--color-accent-dark); font-size: 9px; font-weight: 850; line-height: 1.2; letter-spacing: .05em; vertical-align: middle; }
.profile-stats { display: flex; grid-column: 1 / -1; gap: var(--space-8); margin: var(--space-2) 0 0; padding-top: var(--space-4); border-top: var(--border); }
.profile-stats div { display: flex; flex-direction: column-reverse; }
.profile-stats dt { color: var(--color-muted); font-size: 12px; }
.profile-stats dd { margin: 0; font-size: 20px; font-weight: 750; }
.profile-nav { display: flex; min-height: 54px; align-items: center; justify-content: space-between; border-inline: var(--border); border-bottom: var(--border); }
.profile-nav .tabs { border: 0; }
.sort-select { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); padding-right: var(--space-4); color: var(--color-muted); font-size: 12px; }
.sort-select select { width: auto; min-height: 34px; padding: 5px 28px 5px 9px; font-size: 12px; }

.search-page-form { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-3); border: var(--border); border-radius: var(--radius-card); }
.search-page-form input { border: 0; box-shadow: none; }
.member-results { padding: var(--space-4) var(--space-5); border-inline: var(--border); border-bottom: var(--border); }
.member-results h2 { margin-bottom: var(--space-3); font-size: 14px; }
.member-results > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.member-results a { display: flex; align-items: center; gap: var(--space-2); padding: 5px var(--space-3) 5px 5px; border: var(--border); border-radius: 30px; font-size: 13px; font-weight: 650; }

.notification-list { border: var(--border); border-radius: var(--radius-card); }
.notification-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: var(--border); }
.notification-row:last-child { border-bottom: 0; }
.notification-row:hover { background: var(--color-surface-muted); }
.notification-row.is-unread { border-left: 3px solid var(--color-accent); background: #fafafa; }
.notification-row > span { display: flex; flex-direction: column; }
.notification-row strong { font-size: 14px; }
.notification-row small { color: var(--color-muted); }
.simple-list__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border); }
.simple-list__row:last-child { border-bottom: 0; }
.simple-list__row > span { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.simple-list__row small { color: var(--color-muted); }

.empty-state { display: flex; min-height: 230px; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8); color: var(--color-muted); text-align: center; }
.empty-state h2 { margin: var(--space-3) 0 var(--space-1); color: var(--color-text); font-size: 18px; }
.empty-state p { max-width: 420px; margin-bottom: var(--space-4); font-size: 14px; }
.skeleton-card { display: flex; gap: var(--space-3); padding: var(--space-5); border-bottom: var(--border); }
.skeleton-avatar { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: #e9e9e9; animation: shimmer 1s infinite alternate; }
.skeleton-card div { width: 100%; }
.skeleton-card div span { display: block; width: 35%; height: 10px; margin-bottom: var(--space-3); border-radius: 3px; background: #e9e9e9; animation: shimmer 1s infinite alternate; }
.skeleton-card div span:nth-child(2) { width: 92%; height: 18px; }.skeleton-card div span:nth-child(3) { width: 70%; height: 18px; }

.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: 0 0 var(--space-4); }
.admin-stats div { padding: var(--space-4); border: var(--border); border-radius: var(--radius-card); }
.admin-stats dt { color: var(--color-muted); font-size: 12px; }
.admin-stats dd { margin: var(--space-1) 0 0; font-size: 24px; font-weight: 800; }
.admin-section { margin-bottom: var(--space-4); padding: var(--space-5); border: var(--border); border-radius: var(--radius-card); }
.admin-section h2 { font-size: 18px; }
.admin-list { border-top: var(--border); }
.report-item { display: grid; grid-template-columns: 1fr minmax(220px, 280px); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--border); }
.report-item > div { display: flex; flex-direction: column; gap: 5px; }
.report-item small { color: var(--color-muted); }
.report-item p { margin: var(--space-2) 0 0; }
.report-item form { display: flex; flex-direction: column; gap: var(--space-2); }
.status-pill--pending, .status-pill--suspended { background: #fff0f1; color: #d0162a; }
.status-pill--actioned, .status-pill--active { background: #edf7f0; color: var(--color-success); }
.admin-table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: var(--space-3); border-bottom: var(--border); text-align: left; white-space: nowrap; }
th { color: var(--color-muted); font-size: 11px; text-transform: uppercase; }
td strong, td small { display: block; }
td small { color: var(--color-muted); }
.category-admin-list { display: flex; flex-direction: column; gap: var(--space-2); }
.category-admin-list form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) 210px auto auto; gap: var(--space-2); align-items: center; }
.category-icon-picker { position: relative; min-width: 0; }
.category-icon-picker > summary { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 8px var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-control); color: var(--color-text-strong); cursor: pointer; list-style: none; }
.category-icon-picker > summary::-webkit-details-marker { display: none; }
.category-icon-picker > summary > span { display: flex; min-width: 0; align-items: center; gap: var(--space-2); }
.category-icon-picker > summary > span span { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.category-icon-picker[open] > summary { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.category-icon-picker[open] > summary > .icon { transform: rotate(90deg); }
.category-icon-picker__popup { position: absolute; z-index: 80; top: calc(100% + 6px); right: 0; display: grid; width: min(520px, calc(100vw - 48px)); max-height: 360px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow-y: auto; padding: var(--space-3); border: var(--border); border-radius: var(--radius-card); background: var(--color-surface-elevated); box-shadow: var(--shadow-menu); }
.category-icon-choice { display: flex; min-width: 0; min-height: 58px; align-items: center; gap: 7px; padding: 8px; border: 1px solid transparent; border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-text-strong); cursor: pointer; font-size: 11px; font-weight: 700; }
.category-icon-choice input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; pointer-events: none; }
.category-icon-choice__visual { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--color-surface-elevated); }
.category-icon-choice:hover { border-color: var(--color-accent); background: var(--color-accent-surface-hover); }
.category-icon-choice:hover .icon { color: var(--color-accent); }
.category-icon-choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-surface-strong); color: var(--color-accent-dark); }
.category-icon-choice:has(input:focus-visible) { outline: 2px solid var(--color-text); outline-offset: 2px; }
.checkbox { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); white-space: nowrap; }
.checkbox input { width: 18px; min-height: 18px; }

.application-shell--admin { display: block; width: min(calc(100% - 32px), var(--site-max-width)); }
.main-feed--admin { width: 100%; padding-bottom: 80px; }
.admin-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-5) var(--space-6); border: var(--border); border-top: 3px solid var(--color-accent); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.admin-heading h1 { margin-bottom: var(--space-1); font-size: 27px; }
.admin-heading p:last-child { margin: 0; color: var(--color-muted); font-size: 13px; }
.admin-tabs { display: flex; min-height: 52px; align-items: stretch; gap: var(--space-5); overflow-x: auto; padding: 0 var(--space-6); border-inline: var(--border); border-bottom: var(--border); white-space: nowrap; }
.admin-tab { position: relative; display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: 14px; font-weight: 750; }
.admin-tab::after { position: absolute; inset: auto 0 -1px; height: 3px; background: transparent; content: ""; }
.admin-tab:hover { color: var(--color-text); }
.admin-tab.is-active { color: var(--color-text); }
.admin-tab.is-active::after { background: var(--color-accent); }
.admin-tab > span { display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border-radius: 20px; background: var(--color-accent-button); color: #fff; font-size: 10px; }
.automation-tabs { display: flex; min-height: 54px; align-items: stretch; gap: var(--space-5); overflow-x: auto; margin-top: var(--space-5); padding: 0 var(--space-5); border: var(--border); border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--color-surface); white-space: nowrap; }
.automation-tab { position: relative; display: flex; min-height: 52px; flex: 0 0 auto; align-items: center; padding: 0 1px; color: var(--color-muted); font-size: 13px; font-weight: 750; }
.automation-tab::after { position: absolute; inset: auto 0 -1px; height: 3px; background: transparent; content: ""; }
.automation-tab:hover { color: var(--color-text); }
.automation-tab.is-active { color: var(--color-text); }
.automation-tab.is-active::after { background: var(--color-accent); }
.automation-workspace { min-width: 0; padding: 0 var(--space-1); border-inline: var(--border); border-bottom: var(--border); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.admin-overview, .admin-panel { padding: var(--space-5) 0; }
.admin-ad-control { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); padding: var(--space-5); border: var(--border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-card); }
.admin-ad-control h2 { margin-bottom: var(--space-1); font-size: 20px; }
.admin-ad-control p:last-child { margin: 0; color: var(--color-muted); font-size: 13px; }
.admin-stats--overview { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.admin-stats--overview div { min-height: 132px; padding: var(--space-5); border-top: 3px solid #111; background: #fff; }
.admin-stats--overview .admin-stat--alert { border-top-color: var(--color-accent); background: #fff8f8; }
.admin-stats--overview dt { font-size: 13px; }
.admin-stats--overview dd { margin-top: auto; font-size: 34px; }
.admin-panel { border-bottom: var(--border); }
.admin-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-4); padding: var(--space-5); border: var(--border); border-radius: var(--radius-card); }
.admin-panel__heading h2 { margin-bottom: var(--space-1); font-size: 21px; }
.admin-panel__heading p { margin: 0; color: var(--color-muted); font-size: 13px; }
.automation-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.automation-admin-grid .admin-panel { min-width: 0; }
.automation-card .admin-panel__heading { margin-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.automation-settings-form { display: grid; gap: var(--space-4); padding: var(--space-5); border: var(--border); border-top: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); }
.automation-settings-form label:not(.checkbox), .automation-import-form label { display: grid; gap: var(--space-2); font-size: 13px; font-weight: 750; }
.automation-settings-form input:not([type="checkbox"]), .automation-import-form select, .automation-import-form input[type="file"] { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-control); }
.automation-settings-form label small, .automation-import-form label small { color: var(--color-muted); font-weight: 500; }
.automation-settings-form--schedule { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.automation-settings-form--schedule .checkbox, .automation-settings-form--schedule .automation-field-note, .automation-settings-form--schedule .button { grid-column: 1 / -1; }
.automation-post-now { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border); }
.automation-post-now strong { font-size: 14px; }
.automation-post-now p { max-width: 54ch; margin: var(--space-1) 0 0; color: var(--color-muted); font-size: 11px; }
.automation-post-now form { flex: 0 0 auto; }
.automation-post-now--situation { margin-top: 0; padding: var(--space-4) var(--space-5); border: var(--border); border-top: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--color-surface-muted); }
.automation-post-now--situation .button { min-width: 136px; }
.automation-card .automation-settings-form--schedule { border-radius: 0; }
.automation-field-note, .automation-disclosure, .automation-empty { margin: 0; color: var(--color-muted); font-size: 13px; }
.automation-pool { margin-top: var(--space-5); }
.automation-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-5); }
.automation-stats div { padding: var(--space-4); border: var(--border); border-top: 3px solid var(--color-text); border-radius: var(--radius-card); background: var(--color-surface-elevated); }
.automation-stats dt { color: var(--color-muted); font-size: 12px; }
.automation-stats dd { margin: var(--space-1) 0 0; font-size: 25px; font-weight: 800; }
.automation-import-form { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(280px, 1.5fr) auto; align-items: end; gap: var(--space-4); padding: var(--space-5); border: var(--border); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.automation-import-form .button { min-height: 44px; }
.automation-disclosure { margin-top: var(--space-3); }
.automation-schedule { margin-top: var(--space-5); }
.automation-empty { padding: 0 var(--space-5) var(--space-5); }
.automation-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.automation-table th, .automation-table td { padding: var(--space-3) var(--space-4); border-bottom: var(--border); text-align: left; vertical-align: top; }
.automation-table th { color: var(--color-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.automation-table td { font-size: 13px; }
.automation-table td:first-child { white-space: nowrap; }
.automation-table a { color: var(--color-accent-dark); font-weight: 700; }
.admin-broadcast__form { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; align-items: end; gap: var(--space-4); padding: var(--space-5); border: var(--border); border-radius: var(--radius-card); background: var(--color-surface); }
.admin-broadcast__form label { min-width: 0; }
.admin-broadcast__form textarea { min-height: 82px; resize: vertical; }
.admin-broadcast__form .button { min-height: 44px; margin-bottom: 20px; }
.admin-broadcast__history { margin-top: var(--space-5); border: var(--border); border-radius: var(--radius-card); background: var(--color-surface); }
.admin-broadcast__history h3 { margin: 0; padding: var(--space-4) var(--space-5); border-bottom: var(--border); font-size: 16px; }
.admin-broadcast__history article { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) var(--space-5); border-bottom: var(--border); }
.admin-broadcast__history article:last-child { border-bottom: 0; }
.admin-broadcast__history article > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.admin-broadcast__history article strong { font-size: 14px; }
.admin-broadcast__history article a { overflow: hidden; color: var(--color-accent); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.admin-broadcast__history article > span { flex: 0 0 auto; color: var(--color-muted); font-size: 11px; }
.admin-broadcast__empty { margin: 0; padding: var(--space-5); color: var(--color-muted); }
.cms-page-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.cms-page-list article { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto auto auto; align-items: center; gap: var(--space-2); padding: var(--space-3); border: var(--border); border-radius: var(--radius-card); background: #fff; }
.cms-page-list article > div { display: flex; min-width: 0; flex-direction: column; }
.cms-page-list article strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.cms-page-list article small { color: var(--color-muted); font-size: 11px; }
.cms-page-list form { display: inline-flex; }
.cms-editor-form { overflow: hidden; border: var(--border); border-top: 3px solid var(--color-accent); border-radius: var(--radius-card); background: #fff; }
.cms-editor-form > header, .cms-editor-form > footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-surface-muted); }
.cms-editor-form > header h3, .cms-editor-form > header p { margin: 0; }
.cms-editor-form > header > div:last-child { display: flex; gap: var(--space-2); }
.cms-editor-form > footer { color: var(--color-muted); font-size: 12px; }
.cms-fields-grid { display: grid; grid-template-columns: 1fr 1fr 180px; gap: var(--space-4); padding: var(--space-5); border-bottom: var(--border); }
.cms-field-wide { grid-column: 1 / -1; }
.cms-slug-field { display: flex; min-width: 0; align-items: center; border: var(--border); border-radius: var(--radius-control); }
.cms-slug-field span { flex: 0 0 auto; padding-left: 10px; color: var(--color-muted); font-size: 11px; }
.cms-slug-field input { min-width: 100px; border: 0; box-shadow: none; }
.cms-feature-current { display: flex; align-items: center; gap: var(--space-4); }
.cms-feature-current img { width: 180px; max-height: 110px; border-radius: var(--radius-control); object-fit: cover; }
.cms-composer { padding: var(--space-5); }
.cms-composer__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.cms-composer__heading h3 { margin-bottom: 3px; font-size: 17px; }
.cms-composer__heading p { margin: 0; color: var(--color-muted); font-size: 12px; }
.cms-view-tabs { display: flex; overflow: hidden; border: var(--border); border-radius: var(--radius-control); }
.cms-view-tabs button { min-height: 32px; padding: 5px 12px; border: 0; background: #fff; font-size: 12px; font-weight: 750; }
.cms-view-tabs button.is-active { background: #111; color: #fff; }
.cms-toolbar { display: flex; flex-wrap: wrap; gap: 5px; padding: var(--space-2); border: var(--border); border-bottom: 0; border-radius: var(--radius-control) var(--radius-control) 0 0; background: var(--color-surface-muted); }
.cms-toolbar button { display: inline-flex; min-width: 34px; min-height: 32px; align-items: center; justify-content: center; gap: 5px; padding: 4px 8px; border: 1px solid #c8c8c8; border-radius: 3px; background: #fff; font-size: 12px; }
.cms-toolbar button:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cms-toolbar.is-disabled { opacity: .45; pointer-events: none; }
.cms-visual-editor, .cms-source-editor { width: 100%; min-height: 430px; overflow: auto; padding: var(--space-5); border: var(--border); border-radius: 0 0 var(--radius-control) var(--radius-control); outline: 0; background: #fff; color: #111; font: 16px/1.65 Georgia, "Times New Roman", serif; }
.cms-visual-editor:focus, .cms-source-editor:focus { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.cms-visual-editor img { max-width: 100%; height: auto; margin-block: var(--space-3); border-radius: var(--radius-card); }
.cms-source-editor { border-radius: var(--radius-control); font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.cms-upload-status { min-height: 20px; margin: var(--space-2) 0 0; color: var(--color-success); font-size: 12px; }
.cms-upload-status.is-error { color: var(--color-accent); }
.cms-page { overflow: hidden; border: var(--border); border-top: 3px solid var(--color-accent); border-radius: var(--radius-card); background: #fff; }
.cms-page__admin { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-5); border-bottom: var(--border); background: #fff5f6; color: var(--color-accent-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.cms-page__feature { width: 100%; max-height: 440px; object-fit: cover; }
.cms-page > header { padding: var(--space-8) var(--space-8) var(--space-4); }
.cms-page > header h1 { margin: 0; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.8px; }
.cms-content { padding: 0 var(--space-8) var(--space-8); font-size: 17px; line-height: 1.72; }
.cms-content > :last-child { margin-bottom: 0; }
.cms-content .cms-lead { color: #444; font-size: 21px; line-height: 1.55; }
.cms-content h2 { margin-top: var(--space-8); font-size: 27px; }
.cms-content h3 { margin-top: var(--space-6); font-size: 21px; }
.cms-content a { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.cms-content img { max-width: 100%; height: auto; margin-block: var(--space-4); border-radius: var(--radius-card); }
.cms-content blockquote { margin: var(--space-5) 0; padding: var(--space-3) var(--space-5); border-left: 4px solid var(--color-accent); background: #fff5f6; }
.cms-content table { display: block; overflow-x: auto; }
.cms-content pre { overflow-x: auto; padding: var(--space-4); border-radius: var(--radius-card); background: #111; color: #fff; }
.admin-user-search { display: flex; width: min(520px, 100%); gap: var(--space-2); }
.admin-user-search input { min-width: 220px; }
.admin-users-table-wrap { border: var(--border); border-radius: var(--radius-card); }
.admin-users-table { table-layout: fixed; font-size: 12px; }
.admin-users-table th:nth-child(1) { width: 88px; }
.admin-users-table th:nth-child(2) { width: 150px; }
.admin-users-table th:nth-child(3) { width: 245px; }
.admin-users-table th:nth-child(4) { width: 145px; }
.admin-users-table th:nth-child(5) { width: 78px; }
.admin-users-table th:nth-child(6) { width: 82px; }
.admin-users-table th:nth-child(7) { width: 242px; }
.admin-users-table th, .admin-users-table td { padding: 7px 8px; white-space: normal; vertical-align: middle; }
.admin-users-table tbody tr:last-child td { border-bottom: 0; }
.admin-users-table td > small, .admin-users-table td > span + small { display: block; margin-top: 2px; color: var(--color-muted); font-size: 10px; white-space: nowrap; }
.admin-table-user { display: flex; align-items: center; gap: 6px; }
.admin-table-user > span { display: flex; min-width: 0; flex-direction: column; }
.admin-table-user small { color: var(--color-muted); font-size: 9px; }
.admin-table-input { width: 100%; min-height: 32px; padding: 5px 7px; font-size: 12px; }
.admin-table-email { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-table-actions { display: flex; align-items: center; gap: 5px; }
.admin-table-actions form { flex: 0 0 auto; }
.button--compact { min-height: 32px; padding: 5px 9px; font-size: 11px; }
.admin-table-protected { display: inline-flex; align-items: center; gap: 5px; color: var(--color-muted); font-size: 11px; font-weight: 700; }
.admin-user-list { display: flex; flex-direction: column; gap: var(--space-3); }
.admin-user-row { padding: var(--space-4); border: var(--border); border-radius: var(--radius-card); background: #fff; }
.admin-user-summary { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.admin-user-summary > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.admin-user-summary strong { font-size: 15px; }
.admin-user-summary small, .admin-user-meta { color: var(--color-muted); font-size: 11px; }
.admin-user-edit { display: grid; grid-template-columns: minmax(160px, .7fr) minmax(230px, 1.3fr) auto; gap: var(--space-3); align-items: end; padding: var(--space-3); background: var(--color-surface-muted); }
.admin-user-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding: var(--space-3) 0; border-bottom: var(--border); }
.admin-user-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-3); }
.admin-protected-note { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3); background: var(--color-surface-muted); color: #555; font-size: 13px; }
.admin-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); padding: var(--space-5); }

.social-clap-automation, .social-clap-queue { min-width: 0; margin-bottom: var(--space-5); }
.oneup-publisher { min-width: 0; margin-bottom: var(--space-5); }
.oneup-publisher-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-4); border: var(--border); border-radius: var(--radius-card); background: #fff; }
.oneup-publisher-settings > label:not(.checkbox) { display: grid; gap: var(--space-2); font-size: 13px; font-weight: 750; }
.oneup-publisher-settings label small { color: var(--color-muted); font-weight: 500; }
.oneup-publisher-toggle, .oneup-publisher-note, .oneup-publisher-settings > .button { grid-column: 1 / -1; }
.oneup-publisher-note { margin: 0; color: var(--color-muted); font-size: 12px; }
.oneup-publisher-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 0; }
.oneup-publisher-stats > div { padding: var(--space-3); border: var(--border); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.oneup-publisher-stats dt { color: var(--color-muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.oneup-publisher-stats dd { margin: var(--space-1) 0 0; font-size: 16px; font-weight: 850; }
.oneup-publisher-last-run { margin: var(--space-4) 0 0; color: var(--color-muted); font-size: 12px; }
.social-clap-error { color: var(--color-accent-dark) !important; font-weight: 700; }
.social-clap-automation code { padding: 2px 6px; border-radius: 5px; background: var(--color-surface-muted); font-size: .9em; }
.social-clap-controls { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(260px, .7fr); gap: var(--space-4); }
.social-clap-settings, .social-clap-run-now { padding: var(--space-4); border: var(--border); border-radius: var(--radius-card); background: #fff; }
.social-clap-settings { display: grid; gap: var(--space-4); }
.social-clap-settings > label:not(.checkbox) { display: grid; gap: var(--space-2); font-size: 13px; font-weight: 750; }
.social-clap-settings small { color: var(--color-muted); font-weight: 500; }
.social-clap-run-now { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.social-clap-run-now > strong { font-size: 16px; }
.social-clap-run-now > p { margin: var(--space-2) 0 var(--space-4); color: var(--color-muted); font-size: 12px; }
.social-clap-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 0; }
.social-clap-stats > div { padding: var(--space-3); border: var(--border); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.social-clap-stats dt { color: var(--color-muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.social-clap-stats dd { margin: var(--space-1) 0 0; font-size: 22px; font-weight: 850; }
.social-clap-last-run { margin: var(--space-4) 0 0; color: var(--color-muted); font-size: 12px; }
.social-clap-table td { vertical-align: middle; }
.social-clap-table td:first-child { display: grid; grid-template-columns: 86px minmax(130px, 1fr); gap: var(--space-2); align-items: center; min-width: 250px; }
.social-clap-table td:first-child img { display: block; width: 86px; height: 86px; border-radius: 8px; object-fit: cover; }
.social-clap-table td small { display: block; max-width: 290px; margin-top: 4px; overflow-wrap: anywhere; color: var(--color-muted); font-size: 10px; }

.image-generator-admin { min-width: 0; }
.generator-load-form { padding: var(--space-5); border: var(--border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-card); background: #fff8f8; }
.generator-load-form > label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); font-size: 14px; font-weight: 750; }
.generator-load-form > label span { color: var(--color-muted); font-size: 11px; font-weight: 500; }
.generator-load-form > div { display: flex; gap: var(--space-3); }
.generator-load-form input { min-width: 0; }
.generator-status { min-height: 22px; margin: var(--space-3) 0; color: var(--color-muted); font-size: 12px; }
.generator-status.is-error { color: var(--color-accent-dark); font-weight: 700; }
.generator-status.is-success { color: var(--color-success); font-weight: 700; }
.generator-studio { display: grid; grid-template-columns: minmax(340px, .82fr) minmax(500px, 1.18fr); gap: var(--space-5); align-items: start; }
.generator-copy-editor, .generator-preview-panel { min-width: 0; padding: var(--space-5); border: var(--border); border-radius: var(--radius-card); background: #fff; }
.generator-copy-editor { display: flex; flex-direction: column; gap: var(--space-4); }
.generator-copy-editor > header, .generator-preview-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.generator-copy-editor h3, .generator-preview-panel h3 { margin: 0; font-size: 19px; }
.generator-copy-editor > header a { color: var(--color-accent); font-size: 12px; font-weight: 750; text-decoration: underline; }
.generator-copy-editor label { font-size: 13px; font-weight: 750; }
.generator-copy-editor label > span { float: right; color: var(--color-muted); font-size: 10px; font-weight: 550; }
.generator-copy-editor textarea { min-height: 82px; margin-top: var(--space-1); resize: vertical; line-height: 1.45; }
.generator-copy-editor label:first-of-type textarea { min-height: 132px; }
.generator-field-help { margin: 0; padding: var(--space-3); background: var(--color-surface-muted); color: var(--color-muted); font-size: 11px; }
.generator-preview-panel { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.generator-preview-panel > header > span { color: var(--color-muted); font-size: 11px; font-weight: 700; }
.generator-preview-frame { position: relative; overflow: hidden; border: var(--border); border-radius: var(--radius-card); background: #000; aspect-ratio: 1; }
.generator-preview-frame img { width: 100%; height: 100%; object-fit: contain; }
.generator-preview-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-3); background: rgb(0 0 0 / 68%); color: #fff; font-size: 13px; font-weight: 750; }
.generator-preview-loading[hidden] { display: none; }
.generator-preview-loading span { width: 20px; height: 20px; border: 2px solid rgb(255 255 255 / 35%); border-top-color: #fff; border-radius: 50%; animation: generator-spin .75s linear infinite; }
.generator-export-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.generator-export-actions .button { flex: 1 1 auto; }
.generator-saved-result { margin-top: var(--space-4); padding: var(--space-3); border: 1px solid #b8dabf; border-radius: var(--radius-card); background: #f2faf4; }
.generator-saved-result label { font-size: 11px; font-weight: 750; }
.generator-saved-result label > div { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.generator-saved-result input { min-width: 0; background: #fff; font-size: 11px; }
.generator-saved-result > a { display: inline-block; margin-top: var(--space-2); color: var(--color-success); font-size: 11px; font-weight: 750; text-decoration: underline; }
@keyframes generator-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .automation-post-now { align-items: stretch; flex-direction: column; }
    .automation-post-now .button { width: 100%; }
    .social-clap-controls { grid-template-columns: 1fr; }
    .social-clap-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oneup-publisher-settings { grid-template-columns: 1fr; }
    .oneup-publisher-toggle, .oneup-publisher-note, .oneup-publisher-settings > .button { grid-column: auto; }
    .oneup-publisher-stats { grid-template-columns: 1fr; }
}

html[data-theme="dark"] .social-clap-settings,
html[data-theme="dark"] .social-clap-run-now,
html[data-theme="dark"] .oneup-publisher-settings { background: var(--color-surface); }

.modal__panel.modal__panel--media { width: min(1480px, calc(100vw - 32px)); max-height: calc(100vh - 24px); padding: var(--space-7); }
.media-modal__heading { padding-right: var(--space-8); }
.media-modal__heading h2 { margin-bottom: var(--space-2); }
.media-modal__heading p:last-child { margin-bottom: var(--space-5); color: var(--color-muted); font-size: 13px; }
.media-upload { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) !important; align-items: end; padding: var(--space-4); border: 1px solid #efb9bf; border-left: 4px solid var(--color-accent); border-radius: var(--radius-card); background: #fff8f8; }
.media-upload input[type="file"] { padding: 7px; background: #fff; }
.media-library-tabs { display: flex; gap: var(--space-2); margin-top: var(--space-5); border-bottom: var(--border); }
.media-library-tabs button { display: inline-flex; align-items: center; gap: var(--space-2); padding: 11px 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--color-muted); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.media-library-tabs button span { display: inline-grid; min-width: 24px; height: 24px; padding: 0 7px; place-items: center; border-radius: 999px; background: var(--color-surface-muted); font-size: 11px; }
.media-library-tabs button.is-active { border-bottom-color: var(--color-accent); color: var(--color-text); }
.media-library { margin-top: var(--space-4); }
.media-library__heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: var(--border); }
.media-library__heading h3 { margin: 0; font-size: 17px; }
.media-library__heading span { color: var(--color-muted); font-size: 12px; }
.media-library__empty { padding: var(--space-6); color: var(--color-muted); text-align: center; }
.media-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.media-item { min-width: 0; padding: var(--space-3); border: var(--border); border-radius: var(--radius-card); }
.media-item > img { width: 100%; height: 180px; object-fit: contain; border: var(--border); background: var(--color-surface-muted); }
.media-item__meta { display: flex; min-width: 0; flex-direction: column; padding: var(--space-3) 0; }
.media-item__meta strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.media-item__meta small { color: var(--color-muted); font-size: 11px; }
.media-item label + label { margin-top: var(--space-2); }
.media-copy-row { display: flex; gap: var(--space-2); }
.media-copy-row input { min-width: 0; font-size: 11px; }
.media-copy-status { min-height: 20px; margin: var(--space-2) 0 0; color: var(--color-success); font-size: 11px; }
.media-file-list { display: grid; gap: var(--space-3); }
.media-file-item { display: grid; grid-template-columns: auto minmax(180px, .7fr) minmax(260px, 1.3fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3); border: var(--border); border-radius: var(--radius-card); }
.media-file-item__type { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 10px; background: var(--color-surface-muted); color: var(--color-accent-dark); font-size: 11px; font-weight: 900; }
.media-file-item__meta { display: grid; min-width: 0; gap: 3px; }
.media-file-item__meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-file-item__meta small { color: var(--color-muted); font-size: 11px; overflow-wrap: anywhere; }
.media-file-item > label { min-width: 0; }
.media-file-item .media-copy-status { display: none; }

@media (max-width: 1100px) {
    .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .media-file-item { grid-template-columns: auto minmax(0, 1fr); }
    .media-file-item > label, .media-file-item > .button { grid-column: 1 / -1; }
}

.legal-page { padding: var(--space-8); border: var(--border); border-radius: var(--radius-card); }
.legal-page h1 { font-size: 28px; }
.legal-page__lead { font-size: 19px; font-weight: 600; }
.legal-page p { max-width: 70ch; }

.app-page { padding: var(--space-8); border: var(--border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-card); }
.app-page__mark { display: grid; width: 62px; height: 62px; margin-bottom: var(--space-5); place-items: center; border-radius: 50%; background: var(--color-accent-button); color: #fff; box-shadow: 0 6px 18px rgb(226 27 45 / 20%); }
.app-page h1 { margin-bottom: var(--space-3); font-size: 32px; letter-spacing: -.7px; }
.app-page__lead { max-width: 520px; margin-bottom: var(--space-8); color: #555; font-size: 18px; line-height: 1.55; }
.app-feature-list { margin: 0 0 var(--space-8); padding: 0; border-block: var(--border); list-style: none; }
.app-feature-list li { display: grid; grid-template-columns: 38px 1fr; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: var(--border); }
.app-feature-list li:last-child { border-bottom: 0; }
.app-feature-list li > span { color: var(--color-accent); font-size: 12px; font-weight: 850; }
.app-feature-list strong { font-size: 15px; }
.app-feature-list p { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: 13px; }
.app-page__notice { margin-bottom: var(--space-5); padding: var(--space-4); border-left: 4px solid var(--color-accent); background: #fff5f6; }
.app-page__notice strong { color: var(--color-accent-dark); font-size: 13px; text-transform: uppercase; }
.app-page__notice p { margin: var(--space-1) 0 0; color: #555; font-size: 13px; }

.shuffle-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-4); padding: var(--space-5); border: var(--border); border-top: 3px solid var(--color-accent); border-radius: var(--radius-card); }
.shuffle-heading h1 { margin-bottom: var(--space-1); font-size: 26px; }
.shuffle-heading p:last-child { margin: 0; color: var(--color-muted); font-size: 13px; }
.shuffle-heading--detail { margin-bottom: var(--space-4); }
.featured-clapback { border: 0; background: transparent; }
.featured-clapback > .eyebrow { margin: 0; padding: 0 0 var(--space-2); }
.featured-clapback .clapback-row { background: var(--color-clapback-surface); }
.shuffle-result { overflow: hidden; border: var(--border); border-radius: var(--radius-card); }
.shuffle-result > .situation-card { border-bottom: var(--border); }
.shuffle-result__clapback { padding-top: var(--space-4); background: #fff; }
.shuffle-result__clapback > .eyebrow { margin: 0; padding: 0 var(--space-5) var(--space-2); }
.shuffle-result__clapback .clapback-row { margin: 0 var(--space-4) calc(var(--space-4) + 25px); }
.shuffle-result__context { display: flex; min-height: 48px; align-items: center; justify-content: flex-end; gap: var(--space-1); padding: 0 var(--space-5); color: var(--color-accent); font-size: 13px; font-weight: 750; }
.shuffle-result__context:hover { background: #fff5f6; color: var(--color-accent-dark); }

.mobile-drawer, .drawer-backdrop { display: none; }
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: var(--space-4); }
.modal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 68%); }
.modal__panel { position: relative; z-index: 1; width: min(100%, 480px); max-height: calc(100vh - 32px); overflow-y: auto; padding: var(--space-6); border-radius: var(--radius-modal); background: var(--color-surface); box-shadow: 0 20px 60px rgb(0 0 0 / 25%); }
.modal__panel--auth { width: min(100%, 430px); }
.auth-form-error { margin: 0; padding: 11px 12px; border: 1px solid #e1939b; border-left: 4px solid var(--color-accent-button); border-radius: var(--radius-control); background: #fff1f2; color: #8e1823; font-size: 13px; font-weight: 650; line-height: 1.4; }
.auth-form-error:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.modal__panel--pro { width: min(100%, 520px); border-top: 5px solid var(--color-accent); }
.modal__close { position: absolute; top: var(--space-2); right: var(--space-2); }
.modal__wordmark { display: flex; justify-content: center; width: fit-content; margin: 3px auto var(--space-5); }
.modal h2 { padding-right: var(--space-6); font-size: 22px; }
.modal__lead { color: var(--color-muted); font-size: 14px; }
.modal form { display: flex; flex-direction: column; gap: var(--space-4); }
.tabs--auth { margin: 0 calc(var(--space-6) * -1) var(--space-5); padding-inline: var(--space-6); }
.form-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.form-row-between a { font-size: 13px; text-decoration: underline; }
.copy-field { display: flex; gap: var(--space-2); }
.copy-field input { min-width: 0; }
.share-options { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.share-options a { font-size: 13px; font-weight: 650; text-decoration: underline; }
.status-message { min-height: 22px; margin: var(--space-3) 0 0; color: var(--color-success); font-size: 13px; }
.pro-price { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.pro-price strong { color: var(--color-accent); font-size: 42px; line-height: 1; }
.pro-price span { color: var(--color-muted); font-size: 13px; font-weight: 700; }
.pro-benefits { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0; padding: 0; list-style: none; }
.pro-benefits li { display: flex; align-items: flex-start; gap: var(--space-3); }
.pro-benefits .icon { margin-top: 2px; color: var(--color-accent); }
.pro-active-state { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); padding: var(--space-4); border: 1px solid #b8dabf; border-radius: var(--radius-card); background: #f2faf4; color: var(--color-success); }
.pro-active-state > div { display: flex; flex-direction: column; }
.pro-active-state span { color: #4f6253; font-size: 12px; }
.pro-auth-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.pro-payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); }
.pro-payment-options form { gap: var(--space-2); padding: var(--space-3); border: var(--border); border-radius: var(--radius-card); }
.pro-payment-options small { color: var(--color-muted); font-size: 10px; line-height: 1.4; text-align: center; }
.button--paypal { border-color: #0070ba; background: #0070ba; color: #fff; }
.pro-details-link { display: block; margin-top: var(--space-4); color: var(--color-accent); font-size: 12px; font-weight: 750; text-align: center; text-decoration: underline; }
.pro-page { overflow: hidden; border: var(--border); border-top: 5px solid var(--color-accent); border-radius: var(--radius-card); }
.pro-page > header { padding: var(--space-8); background: #fff7f8; }
.pro-page > header h1 { margin-bottom: var(--space-3); font-size: 34px; }
.pro-page > header p:last-child { max-width: 650px; margin: 0; color: #555; font-size: 17px; }
.pro-page__offer { padding: var(--space-8); }
.pro-page__price { display: flex; align-items: center; gap: var(--space-3); }
.pro-page__price strong { color: var(--color-accent); font-size: 58px; line-height: 1; }
.pro-page__price span { color: var(--color-muted); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.pro-security-note { margin: 0; padding: var(--space-4) var(--space-8); border-top: var(--border); background: var(--color-surface-muted); color: var(--color-muted); font-size: 11px; }
.pro-cancelled-note { margin: var(--space-5) var(--space-8) 0; padding: var(--space-3); border: var(--border); border-left: 4px solid var(--color-accent); }
.toast-region { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 180; display: flex; width: min(390px, calc(100vw - 32px)); flex-direction: column; gap: var(--space-2); }
.toast { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border); border-left: 4px solid #333; border-radius: var(--radius-control); background: #fff; box-shadow: var(--shadow-menu); font-size: 14px; }
.toast--error, .toast--warning { border-left-color: var(--color-accent); }
.toast--success { border-left-color: var(--color-success); }
.toast button { padding: 4px; border: 0; background: transparent; }

/* Explicit dark palette: surfaces, text, borders, states, and hovers are
   mapped individually. Intentional black brand/advertising areas stay black. */
html[data-theme="dark"] .button--light,
html[data-theme="dark"] .button--secondary,
html[data-theme="dark"] .button--danger-outline {
    border-color: var(--color-control-border);
    background: var(--color-control);
    color: var(--color-text);
}
html[data-theme="dark"] .button--danger-outline { border-color: var(--color-accent); color: var(--color-accent); }
html[data-theme="dark"] .button--dark { background: #f2f2f2; color: #111; }
html[data-theme="dark"] .dropdown--profile a,
html[data-theme="dark"] .dropdown--profile button,
html[data-theme="dark"] .dropdown--profile .text-size-controls button,
html[data-theme="dark"] .more-menu__panel,
html[data-theme="dark"] .more-menu__panel button {
    background: var(--color-surface-elevated);
    color: var(--color-text);
}
html[data-theme="dark"] .dropdown--profile .text-size-controls button { border-color: var(--color-control-border); }
html[data-theme="dark"] .dropdown--profile .text-size-controls button:hover { border-color: var(--color-text); background: var(--color-surface-muted); }
html[data-theme="dark"] .dropdown--profile .text-size-controls button:disabled { border-color: #555; color: #888; }
html[data-theme="dark"] .notification-compact.is-unread,
html[data-theme="dark"] .notification-row.is-unread { background: #1d1d1d; }
html[data-theme="dark"] .sidebar-link,
html[data-theme="dark"] label { color: var(--color-text-strong); }
html[data-theme="dark"] .sidebar-link.is-active { color: var(--color-text); }
html[data-theme="dark"] .sidebar-link.sidebar-link--pro,
html[data-theme="dark"] .sidebar-link.sidebar-link--pro span { color: #fff; }
html[data-theme="dark"] .sidebar-clapback,
html[data-theme="dark"] .sidebar-join,
html[data-theme="dark"] .add-clapback,
html[data-theme="dark"] .generator-load-form,
html[data-theme="dark"] .media-upload,
html[data-theme="dark"] .pro-page > header {
    border-color: var(--color-accent-border);
    background: var(--color-accent-surface);
}
html[data-theme="dark"] .sidebar-clapback:hover,
html[data-theme="dark"] .add-clapback:hover,
html[data-theme="dark"] .add-clapback:focus-within,
html[data-theme="dark"] .add-clapback__guest:hover,
html[data-theme="dark"] .shuffle-result__context:hover {
    background: var(--color-accent-surface-hover);
}
html[data-theme="dark"] .sidebar-join p,
html[data-theme="dark"] .sidebar-login-link,
html[data-theme="dark"] .situation-stats strong,
html[data-theme="dark"] .card-action,
html[data-theme="dark"] .vote-button,
html[data-theme="dark"] .pro-cancel-note,
html[data-theme="dark"] .role-badge,
html[data-theme="dark"] .status-pill,
html[data-theme="dark"] .admin-protected-note,
html[data-theme="dark"] .app-page__lead,
html[data-theme="dark"] .app-page__notice p,
html[data-theme="dark"] .pro-page > header p:last-child {
    color: var(--color-text-soft);
}
html[data-theme="dark"] .sidebar-clapback small,
html[data-theme="dark"] .add-clapback__guest small { color: var(--color-muted); }
html[data-theme="dark"] .sidebar-link.sidebar-link--pro:hover { border-color: #777; background: #000; color: #fff; }
html[data-theme="dark"] a.situation-text:hover { text-decoration-color: #777; }
html[data-theme="dark"] .card-action:hover { background: var(--color-surface-muted); color: var(--color-text); }
html[data-theme="dark"] .card-action--strong:hover { background: var(--color-accent-surface-hover); color: var(--color-accent-dark); }
html[data-theme="dark"] .situation-category-pill { border-color: var(--color-accent-border); background: var(--color-accent-surface-soft); color: var(--color-accent-dark); }
html[data-theme="dark"] .situation-category-pill:hover { border-color: var(--color-accent); background: var(--color-accent-surface-hover); }
html[data-theme="dark"] .right-ad-rail__remove:hover { border-color: #777; background: #000; color: #fff; }
html[data-theme="dark"] .feed-intro .feed-intro__lead,
html[data-theme="dark"] .feed-intro p.feed-intro__support { color: var(--color-text); }
html[data-theme="dark"] .feed-intro--clapback {
    background-color: #0b0b0d;
    background-image: url("../../media/2026/08/591c21a10040a5b91e16330bbb582238.png");
}
html[data-theme="dark"] .feed-intro--roasts {
    background-color: #0b0b0d;
    background-image: url("../../media/2026/08/7eb076a70553526abdf34ad6c2afaee3.png");
}
html[data-theme="dark"] .feed-intro--top-liners {
    background-color: #0b0b0d;
    background-image: url("../../media/2026/08/thumbs/0af4cce963835df36d58deafeb063786.webp");
}
html[data-theme="dark"] .situation-text--feed { background: linear-gradient(90deg, var(--color-accent-surface-soft), var(--color-surface)); }
html[data-theme="dark"] a.situation-text--feed:hover { background: linear-gradient(90deg, var(--color-accent-surface-hover), var(--color-surface)); }
html[data-theme="dark"] .admin-inline-tools,
html[data-theme="dark"] .pro-cancel-note,
html[data-theme="dark"] .cms-page__admin,
html[data-theme="dark"] .cms-content blockquote,
html[data-theme="dark"] .app-page__notice {
    border-color: var(--color-accent-border);
    background: var(--color-accent-surface-soft);
}
html[data-theme="dark"] .admin-inline-tools button { background: var(--color-control); color: var(--color-text-strong); }
html[data-theme="dark"] .admin-inline-tools button:hover { background: #f2f2f2; color: #111; }
html[data-theme="dark"] .admin-inline-tools--compact { border: 0; background: transparent; }
html[data-theme="dark"] .admin-inline-tools--compact button { background: transparent; color: var(--color-muted); }
html[data-theme="dark"] .admin-inline-tools--compact button:hover { background: var(--color-surface-muted); color: var(--color-accent); }
html[data-theme="dark"] .top-liner-card .admin-inline-tools--compact button { color: rgb(255 255 255 / 78%); }
html[data-theme="dark"] .top-liner-card .admin-inline-tools--compact button:hover { background: rgb(0 0 0 / 22%); color: #fff; }
html[data-theme="dark"] .clapback-row,
html[data-theme="dark"] .cms-page-list article,
html[data-theme="dark"] .cms-editor-form,
html[data-theme="dark"] .cms-page,
html[data-theme="dark"] .admin-user-row,
html[data-theme="dark"] .generator-copy-editor,
html[data-theme="dark"] .generator-preview-panel,
html[data-theme="dark"] .toast {
    background: var(--color-surface-elevated);
}
html[data-theme="dark"] .clapback-row { border-color: var(--color-accent-border); background: var(--color-clapback-surface); box-shadow: 0 2px 6px rgb(0 0 0 / 35%); }
html[data-theme="dark"] .clapback-row::before { border-top-color: var(--color-accent-border); }
html[data-theme="dark"] .clapback-row::after { border-top-color: var(--color-clapback-surface); }
html[data-theme="dark"] .clapback-text { border: 0; background: transparent; box-shadow: none; }
html[data-theme="dark"] .clapback-row__author { background: transparent; }
html[data-theme="dark"] .clapback-row:focus-within { border-color: var(--color-accent); background: var(--color-clapback-surface); box-shadow: 0 0 0 1px var(--color-accent), 0 5px 14px rgb(0 0 0 / 45%); }
html[data-theme="dark"] .clapback-row:focus-within::before { border-top-color: var(--color-accent); }
html[data-theme="dark"] .reply-card,
html[data-theme="dark"] .reply-composer { border-color: var(--color-control-border); background: var(--color-surface-elevated); }
html[data-theme="dark"] .reply-card--deleted { background: var(--color-surface-muted); }
html[data-theme="dark"] .reply-children,
html[data-theme="dark"] .reply-children > .reply-node::before { border-color: var(--color-control-border); }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .generator-saved-result input,
html[data-theme="dark"] .media-upload input[type="file"] {
    border-color: var(--color-control-border);
    background: var(--color-control);
    color: var(--color-text);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #a9a9a9; opacity: 1; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus { border-color: #e7e7e7; box-shadow: 0 0 0 1px #e7e7e7; }
html[data-theme="dark"] .top-search input,
html[data-theme="dark"] .top-search input:focus {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
}
html[data-theme="dark"] .avatar { border-color: var(--color-control-border); color: var(--color-text-strong); }
html[data-theme="dark"] .avatar-cropper__preview { background: #333; }
html[data-theme="dark"] .status-pill--pending,
html[data-theme="dark"] .status-pill--suspended { background: var(--color-accent-surface-hover); color: var(--color-accent); }
html[data-theme="dark"] .status-pill--actioned,
html[data-theme="dark"] .status-pill--active { background: var(--color-success-surface); color: var(--color-success); }
html[data-theme="dark"] .skeleton-avatar,
html[data-theme="dark"] .skeleton-card div span { background: #333; animation-name: shimmer-dark; }
html[data-theme="dark"] .admin-stats--overview div { border-top-color: #ddd; background: var(--color-surface-elevated); }
html[data-theme="dark"] .admin-stats--overview .admin-stat--alert { border-top-color: var(--color-accent); background: var(--color-accent-surface); }
html[data-theme="dark"] .cms-view-tabs button,
html[data-theme="dark"] .cms-toolbar button {
    border-color: var(--color-control-border);
    background: var(--color-control);
    color: var(--color-text);
}
html[data-theme="dark"] .cms-view-tabs button.is-active { background: #f2f2f2; color: #111; }
html[data-theme="dark"] .category-icon-picker > summary,
html[data-theme="dark"] .category-icon-picker__popup { border-color: var(--color-control-border); background: var(--color-surface-elevated); color: var(--color-text); }
html[data-theme="dark"] .category-icon-choice { background: var(--color-surface-muted); color: var(--color-text); }
html[data-theme="dark"] .category-icon-choice__visual { background: var(--color-control); }
html[data-theme="dark"] .category-icon-choice:hover { border-color: var(--color-accent); background: var(--color-accent-surface-hover); }
html[data-theme="dark"] .category-icon-choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-surface-strong); color: var(--color-accent-dark); }
html[data-theme="dark"] .cms-visual-editor,
html[data-theme="dark"] .cms-source-editor { background: var(--color-control); color: var(--color-text); }
html[data-theme="dark"] .cms-content .cms-lead { color: var(--color-text-soft); }
html[data-theme="dark"] .generator-saved-result,
html[data-theme="dark"] .pro-active-state {
    border-color: var(--color-success-border);
    background: var(--color-success-surface-soft);
    color: var(--color-success);
}
html[data-theme="dark"] .pro-active-state span { color: var(--color-muted); }
html[data-theme="dark"] .shuffle-result__clapback { background: var(--color-surface-elevated); }
html[data-theme="dark"] .mobile-drawer,
html[data-theme="dark"] .mobile-drawer__header { background: var(--color-surface-elevated); color: var(--color-text); }
html[data-theme="dark"] .modal__panel { background: var(--color-surface-elevated); }
html[data-theme="dark"] .auth-form-error { border-color: #9d434c; border-left-color: var(--color-accent); background: #351a1d; color: #ffb5bc; }

@keyframes shimmer-dark { to { background: #454545; } }

@keyframes pulse { to { opacity: .3; transform: translateY(-2px); } }
@keyframes shimmer { to { background: #f4f4f4; } }

@media (hover: hover) {
    .feed-list > .situation-card:hover { border-color: #b7b7b7; background: var(--color-surface-muted); box-shadow: 0 4px 13px rgb(0 0 0 / 10%); }
    html[data-theme="dark"] .feed-list > .situation-card:hover { border-color: #686868; background: var(--color-surface-muted); box-shadow: 0 4px 14px rgb(0 0 0 / 38%); }
    .clapback-row:hover { border-color: #dc7d86; background: var(--color-clapback-surface); box-shadow: 0 0 0 1px #dc7d86, 0 6px 18px rgb(0 0 0 / 11%); }
    html[data-theme="dark"] .clapback-row:hover { border-color: var(--color-accent-border); background: var(--color-clapback-surface); box-shadow: 0 0 0 1px var(--color-accent-border), 0 6px 18px rgb(0 0 0 / 48%); }
}

@media (max-width: 1279px) {
    .application-shell, .top-nav__inner { width: calc(100% - 32px); }
    .right-ad-rail { display: none; }
    .application-shell.has-right-ad { grid-template-columns: minmax(0, 1fr); }
    .application-shell.has-left-sidebar.has-right-ad { grid-template-columns: var(--left-width) minmax(0, 1fr); }
    .top-search { width: 190px; }
}

@media (max-width: 1100px) {
    .generator-studio { grid-template-columns: 1fr; }
    .generator-preview-panel { position: static; }
    .admin-broadcast__form { grid-template-columns: 1fr 1fr; }
    .admin-broadcast__form .button { grid-column: 1 / -1; width: fit-content; margin-bottom: 0; }
}

@media (max-width: 1023px) {
    .application-shell { display: block; width: calc(100% - 32px); }
    .left-sidebar { display: none; }
    .top-nav__inner { width: calc(100% - 24px); gap: var(--space-2); }
    .top-nav__hamburger { display: inline-flex; }
    .top-nav__links { display: none; }
    .top-search { width: min(230px, 26vw); margin-left: auto; }
    .mobile-drawer { position: fixed; inset: 0 auto 0 0; z-index: 140; display: block; width: min(330px, 88vw); overflow-y: auto; padding-bottom: var(--space-6); background: #fff; box-shadow: var(--shadow-menu); transform: translateX(-105%); transition: transform .2s ease; }
    .mobile-drawer.is-open { transform: none; }
    .mobile-drawer__header { position: sticky; top: 0; z-index: 2; display: flex; height: var(--header-height); align-items: center; justify-content: space-between; padding: 0 var(--space-4); border-bottom: var(--border); background: #fff; }
    .mobile-drawer > nav { display: flex; min-height: calc(100vh - var(--header-height) - var(--space-6)); flex-direction: column; padding: var(--space-3); }
    .drawer-backdrop { position: fixed; inset: 0; z-index: 130; display: block; background: rgb(0 0 0 / 55%); }
    .drawer-backdrop[hidden] { display: none; }
    .application-shell--admin { width: calc(100% - 32px); }
    .admin-stats--overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-panel__heading { align-items: stretch; flex-direction: column; }
    .admin-user-search { width: 100%; }
    .automation-admin-grid { grid-template-columns: 1fr; }
    .automation-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .category-icon-picker__popup { left: 0; right: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    :root { --header-height: 54px; }
    .avatar-cropper { grid-template-columns: 1fr; }
    .avatar-cropper__preview { max-width: 240px; margin-inline: auto; }
    .application-shell { width: 100%; padding-top: calc(var(--header-height) + var(--space-2)); }
    .main-feed { padding: 0 var(--space-3) 70px; }
    .wordmark__image { height: 24px; }
    .top-search { display: none; }
    .top-nav__actions { margin-left: auto; gap: 0; }
    .top-nav__post { min-width: 44px; width: 44px; padding: 0; }
    .top-nav__post span { display: none; }
    .profile-trigger { padding-inline: var(--space-1); }
    .profile-trigger__name, .top-nav__auth { display: none; }
    .top-nav__mobile-auth { display: inline-flex; }
    .top-nav__notification, .top-nav__saved, .profile-trigger, .top-nav__mobile-auth { width: 42px; height: 44px; }
    .dropdown--notifications { position: fixed; top: var(--header-height); right: var(--space-2); }
    .feed-intro, .page-heading { padding: var(--space-4); }
    .feed-intro h1, .page-heading h1 { font-size: 22px; }
    .feed-intro .feed-intro__lead { font-size: 17px; }
    .feed-intro p.feed-intro__support { font-size: 14px; }
    .feed-intro { border-radius: var(--radius-card) var(--radius-card) 0 0; }
    .tabs { padding-inline: var(--space-4); }
    .automation-tabs { gap: var(--space-4); padding-inline: var(--space-4); }
    .automation-settings-form { padding: var(--space-4); }
    .automation-settings-form > *, .automation-settings-form label { min-width: 0; }
    .automation-settings-form .checkbox { align-items: flex-start; white-space: normal; }
    .automation-settings-form input:not([type="checkbox"]) { min-width: 0; max-width: 100%; }
    .feed-controls { min-height: 52px; flex-wrap: wrap; gap: 0; padding-inline: var(--space-4); }
    .content-type-tabs { width: 100%; min-height: 50px; justify-content: space-between; gap: var(--space-3); }
    .feed-controls .content-type-tab { gap: 4px; font-size: 12px; white-space: nowrap; }
    .feed-controls .content-type-tab .icon { width: 15px; height: 15px; }
    .feed-sort-tabs { display: none; }
    .feed-sort-select { display: flex; width: 100%; min-width: 118px; min-height: 44px; align-items: center; justify-content: flex-end; flex-direction: row; gap: 6px; margin-left: auto; border-top: var(--border); color: var(--color-muted); font-size: 11px; }
    .feed-sort-select select { width: auto; min-width: 88px; min-height: 34px; padding: 5px 26px 5px 8px; font-size: 12px; }
    .feed-intro--top-liners { align-items: flex-start; flex-direction: column; gap: var(--space-4); }
    .feed-intro--top-liners {
        background-image:
            linear-gradient(90deg, rgb(255 255 255 / 98%) 0%, rgb(255 255 255 / 96%) 58%, rgb(255 255 255 / 84%) 100%),
            url("../../media/2026/08/thumbs/e9d85f72bdadbc4384881f6aca2ce0a6.webp");
    }
    html[data-theme="dark"] .feed-intro--top-liners {
        background-image:
            linear-gradient(90deg, rgb(11 11 13 / 98%) 0%, rgb(11 11 13 / 94%) 58%, rgb(11 11 13 / 76%) 100%),
            url("../../media/2026/08/thumbs/0af4cce963835df36d58deafeb063786.webp");
    }
    .feed-intro--top-liners .button { width: 100%; }
    .feed-intro--roasts {
        background-image:
            linear-gradient(90deg, rgb(255 255 255 / 98%) 0%, rgb(255 255 255 / 95%) 58%, rgb(255 255 255 / 80%) 100%),
            url("../../media/2026/08/thumbs/c0ec95bceed8ef79b6e001215391e616.webp");
    }
    html[data-theme="dark"] .feed-intro--roasts {
        background-image:
            linear-gradient(90deg, rgb(11 11 13 / 98%) 0%, rgb(11 11 13 / 93%) 58%, rgb(11 11 13 / 72%) 100%),
            url("../../media/2026/08/7eb076a70553526abdf34ad6c2afaee3.png");
    }
    .top-liner-card { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; }
    .top-liner-card__meta { grid-column: 1; grid-row: 1; flex-direction: row; align-items: center; justify-content: flex-start; padding: 8px 10px; }
    .top-liner-category { margin-left: auto; }
    .top-liner-card__text { grid-column: 1 / -1; grid-row: 2; padding: 12px 14px 14px; font-size: clamp(14px, var(--clapback-font-size), 28px); }
    .top-liner-card__actions { grid-column: 2; grid-row: 1; padding: 3px 6px 3px 0; background: rgb(0 0 0 / 14%); }
    .post-type-tabs { padding-inline: var(--space-4); }
    .content-header { padding: var(--space-3) var(--space-4) var(--space-2); }
    .situation-text { padding: var(--space-3) var(--space-4) var(--space-4); font-size: clamp(14px, var(--situation-mobile-font-size), 34px); }
    .situation-text--feed { margin: 0 var(--space-4) var(--space-3); padding: var(--space-4) var(--space-4) var(--space-4) 48px; }
    .situation-text--feed::before { top: 9px; left: 13px; font-size: 43px; }
    .situation-text--detail { font-size: clamp(17px, var(--situation-detail-mobile-font-size), 40px); }
    .situation-vote-shell:not(.situation-vote-shell--roast) .situation-text--feed { min-height: 96px; padding-right: 64px; }
    .situation-card__vote { right: calc(var(--space-4) + 3px); }
    .situation-vote-shell--roast .roast-title { min-height: 80px; padding-right: 64px; }
    .situation-navigation { margin-bottom: var(--space-2); }
    .situation-navigation__button { min-width: 104px; min-height: 38px; padding-inline: var(--space-3); }
    .roast-title { padding: var(--space-2) var(--space-4) var(--space-3); }
    .roast-title--detail { font-size: clamp(20px, var(--situation-detail-mobile-font-size), 34px); }
    .roast-gallery__viewport { max-height: none; aspect-ratio: 1; }
    .roast-gallery__arrow { width: 40px; height: 40px; }
    .roast-gallery__arrow--previous { left: 10px; }
    .roast-gallery__arrow--next { right: 10px; }
    .roast-gallery__dots { bottom: 12px; }
    .roast-upload-preview-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .roast-upload-actions output { width: 100%; margin-left: 0; }
    .situation-stats { gap: var(--space-3); padding-inline: var(--space-4); }
    .situation-detail-meta { flex-wrap: wrap; }
    .situation-detail-meta .situation-stats { width: 100%; flex-basis: 100%; gap: var(--space-2); padding: 9px var(--space-3); }
    .situation-detail-actions { width: 100%; }
    .situation-detail-actions .clapback-cta--inline { min-width: 0; flex: 1 1 auto; }
    .situation-detail-actions .situation-detail-share { flex: 1 1 auto; }
    .situation-detail-share { min-width: 78px; padding-inline: var(--space-2); }
    .situation-clapback-cta { padding: 12px var(--space-4); }
    .situation-clapback-cta--bottom { margin-block: var(--space-3); }
    .clapback-cta { width: min(100%, 230px); min-height: 42px; }
    .clapback-cta--inline, .situation-actions .clapback-cta--inline { width: calc(100% - 8px); min-width: 0; min-height: 40px; margin: 4px; padding: 6px; gap: 6px; font-size: 11px; }
    .clapback-cta--inline .clapback-mark { width: 23px; height: 23px; }
    .situation-actions { display: flex; }
    .situation-card__footer { flex-direction: column; flex-wrap: nowrap; }
    .situation-card__footer .situation-actions--secondary { width: 100%; min-height: 40px; flex: 0 0 auto; order: 1; justify-content: flex-end; margin-left: 0; }
    .situation-card__footer .situation-actions--secondary .situation-stats { width: auto; min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; gap: var(--space-2); padding: 5px var(--space-2) 5px var(--space-4); border-bottom: 0; }
    .situation-card__footer .situation-actions--secondary .card-action { min-height: 40px; padding-inline: var(--space-2); }
    .situation-card__footer .situation-actions--secondary .situation-save-button { min-width: 42px; flex-basis: 42px; }
    .situation-card__footer .situation-actions--primary { width: 100%; box-sizing: border-box; flex: 0 0 auto; flex-wrap: wrap; order: 2; padding: var(--space-2) var(--space-4) 0; }
    .situation-card__footer .situation-actions--primary .clapback-cta--inline { width: 100%; max-width: none; min-width: 0; min-height: 40px; flex: 1 0 100%; margin: 0; padding: 6px 12px; border-radius: 7px; font-size: 11px; }
    .situation-card__footer .situation-actions--primary .clapback-cta--inline .clapback-mark { width: 21px; height: 21px; }
    .situation-card__footer .situation-actions--primary .card-action { width: 100%; min-height: 38px; flex: 1 0 100%; }
    .card-action { min-height: 48px; padding-inline: var(--space-2); white-space: normal; }
    .card-action--flag { display: none; }
    .clapback-row { padding: var(--space-4) 66px var(--space-5) var(--space-4); }
    .clapback-popularity-label { min-width: 0; min-height: 21px; margin-bottom: -4px; margin-left: 14px; padding: 4px 8px; font-size: 9px; }
    .clapback-list { gap: 16px; }
    .clapback-row__meta { gap: 3px; padding-right: 3px; padding-left: 9px; }
    .clapback-row__author { max-width: calc(100% - 82px); min-height: 46px; padding-inline: 7px; }
    .clapback-row__footer { padding-top: 3px; }
    .clapback-row__footer .reply-action { gap: 4px; padding-inline: 5px; font-size: 13px; }
    .reply-thread, .clapback-thread > .reply-composer { margin-left: 18px; }
    .reply-children { margin-left: 10px; padding-left: 13px; }
    .reply-children > .reply-node::before { left: -13px; width: 12px; }
    .reply-composer__footer { align-items: stretch; flex-direction: column; }
    .reply-composer__footer > div { justify-content: flex-end; }
    .admin-inline-tools { margin-inline: var(--space-4); }
    .clapback-row .admin-inline-tools { margin-inline: 0; }
    .content-header__actions > .admin-inline-tools--compact,
    .clapback-row__author > .admin-inline-tools--compact { margin: 0; }
    .cms-page-list article { grid-template-columns: 1fr auto; }
    .cms-page-list article > a, .cms-page-list article > form { grid-column: auto; }
    .cms-fields-grid { grid-template-columns: 1fr; padding: var(--space-4); }
    .cms-field-wide { grid-column: auto; }
    .cms-editor-form > header, .cms-editor-form > footer, .cms-composer__heading { align-items: stretch; flex-direction: column; }
    .cms-editor-form > header > div:last-child, .cms-editor-form > footer .button { width: 100%; }
    .cms-editor-form > header > div:last-child > * { flex: 1; }
    .cms-composer { padding: var(--space-3); }
    .cms-visual-editor, .cms-source-editor { min-height: 340px; padding: var(--space-4); }
    .cms-page > header { padding: var(--space-6) var(--space-4) var(--space-3); }
    .cms-content { padding: 0 var(--space-4) var(--space-6); font-size: 16px; }
    .clapback-row__main { flex-basis: calc(100% - 60px); }
    .clapback-row__vote { right: 9px; }
    html .add-clapback.add-clapback--collapsible { gap: 8px; padding: 8px; }
    .add-clapback > .avatar { display: none; }
    html .add-clapback.add-clapback--collapsible textarea { height: 62px; min-height: 62px; }
    .page-heading--with-action { align-items: flex-start; flex-direction: column; }
    .profile-header { grid-template-columns: auto 1fr; padding: var(--space-4); }
    .profile-header__action { grid-column: 1 / -1; width: 100%; }
    .profile-header__action .button { width: 100%; }
    .profile-stats { justify-content: space-between; gap: var(--space-3); }
    .profile-stats dd { font-size: 18px; }
    .profile-nav { align-items: stretch; flex-direction: column; }
    .sort-select { justify-content: space-between; padding: var(--space-2) var(--space-4); border-top: var(--border); }
    .sort-select select { width: 130px; }
    .verification-banner { align-items: flex-start; flex-direction: column; }
    .pro-subscription-details, .pro-payment-options { grid-template-columns: 1fr; }
    .pro-auth-actions, .admin-ad-control { align-items: stretch; flex-direction: column; }
    .admin-broadcast__form { grid-template-columns: 1fr; padding: var(--space-4); }
    .admin-broadcast__form .button { grid-column: auto; width: 100%; }
    .admin-broadcast__history article { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
    .pro-page > header, .pro-page__offer { padding: var(--space-5); }
    .pro-security-note { padding-inline: var(--space-5); }
    .pro-cancelled-note { margin-inline: var(--space-5); }
    .ad-slot--horizontal { width: calc(100% - (var(--space-3) * 2)); min-height: 72px; margin: var(--space-3); }
    .admin-stats { grid-template-columns: 1fr 1fr; }
    .admin-heading { align-items: stretch; flex-direction: column; padding: var(--space-4); }
    .admin-heading .button { width: 100%; }
    .admin-tabs { gap: var(--space-4); padding-inline: var(--space-4); }
    .admin-overview, .admin-panel { padding-top: var(--space-3); }
    .admin-stats--overview { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
    .admin-stats--overview div { min-height: 105px; padding: var(--space-4); }
    .admin-stats--overview dd { font-size: 27px; }
    .admin-panel__heading { padding: var(--space-4); }
    .automation-settings-form--schedule, .automation-import-form { grid-template-columns: 1fr; }
    .automation-settings-form--schedule .checkbox, .automation-settings-form--schedule .automation-field-note, .automation-settings-form--schedule .button { grid-column: auto; }
    .automation-stats { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
    .admin-user-search { flex-direction: column; }
    .admin-user-search input { min-width: 0; }
    .admin-user-edit { grid-template-columns: 1fr; }
    .admin-user-actions { align-items: stretch; flex-direction: column; }
    .admin-user-actions form, .admin-user-actions .button { width: 100%; }
    .generator-load-form > label, .generator-copy-editor > header, .generator-preview-panel > header { align-items: stretch; flex-direction: column; }
    .generator-load-form > div, .generator-saved-result label > div { flex-direction: column; }
    .generator-load-form .button, .generator-saved-result .button { width: 100%; }
    .generator-copy-editor, .generator-preview-panel, .generator-load-form { padding: var(--space-4); }
    .modal__panel--media { max-height: calc(100vh - 16px); }
    .media-upload { display: flex !important; align-items: stretch; flex-direction: column; }
    .media-grid { grid-template-columns: 1fr; }
    .report-item { grid-template-columns: 1fr; }
    .category-admin-list form { grid-template-columns: 1fr; padding-bottom: var(--space-3); border-bottom: var(--border); }
    .category-icon-picker__popup { position: fixed; inset: 80px 12px auto; width: auto; max-height: calc(100vh - 100px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .legal-page { padding: var(--space-5); }
    .app-page { padding: var(--space-5); }
    .app-page h1 { font-size: 27px; }
    .app-page__lead { margin-bottom: var(--space-6); font-size: 16px; }
    .shuffle-heading { align-items: stretch; flex-direction: column; padding: var(--space-4); }
    .shuffle-heading .button { width: 100%; }
    .modal { padding: var(--space-2); align-items: end; }
    .modal__panel { width: 100%; max-height: calc(100vh - 16px); padding: var(--space-5); border-radius: var(--radius-modal) var(--radius-modal) 0 0; }
    #auth-modal { align-items: center; }
    #auth-modal .modal__panel--auth { width: min(100%, 430px); border-radius: var(--radius-modal); }
    .tabs--auth { margin-inline: calc(var(--space-5) * -1); padding-inline: var(--space-5); }
    .copy-field { align-items: stretch; flex-direction: column; }
    .toast-region { right: var(--space-2); bottom: var(--space-2); width: calc(100vw - 16px); }
}

@media (max-width: 390px) {
    .main-feed { padding-inline: var(--space-2); }
    .top-nav__inner { width: calc(100% - 12px); }
    .wordmark__image { height: 18px; }
    .feed-controls { gap: 0; padding-inline: 10px; }
    .feed-controls .content-type-tabs { gap: 8px; }
    .feed-controls .content-type-tab { gap: 3px; font-size: 11px; }
    .feed-sort-select { min-width: 92px; gap: 3px; }
    .feed-sort-select select { min-width: 70px; padding-right: 22px; font-size: 11px; }
    .top-nav__hamburger { width: 38px; }
    .top-nav__post, .top-nav__notification, .top-nav__saved, .profile-trigger, .top-nav__mobile-auth { width: 40px; height: 42px; }
    .situation-actions { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .85fr) 44px; }
    .situation-actions .card-action:nth-child(3) { border-top: 0; grid-column: auto; }
    .situation-save-button { min-width: 44px; flex-basis: 44px; }
    .situation-stats { gap: var(--space-2); font-size: 11px; }
    .situation-card__footer .situation-actions--secondary .situation-stats { gap: 4px; padding-right: 4px; padding-left: var(--space-2); font-size: 10px; }
    .situation-card__footer .situation-actions--secondary .situation-stats span { gap: 3px; }
    .situation-card__footer .situation-actions--secondary .card-action { padding-inline: 5px; font-size: 11px; }
    .situation-card__footer .situation-actions--secondary .situation-save-button { min-width: 38px; flex-basis: 38px; }
    .situation-category-pill { max-width: 145px; }
    .situation-category-pill span { overflow: hidden; text-overflow: ellipsis; }
    .profile-stats dt { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}