/* Floating fuel shortcut avoids forcing a scroll back to the top action row. */
.rant-modal-fuel-fab {
    position: absolute;
    right: 1.15rem;
    bottom: 1.15rem;
    z-index: 6;
    min-width: 0;
    padding: 0.42rem 0.72rem;
    box-shadow: 0 10px 20px rgba(201, 106, 38, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.2s ease;
}

.rant-modal-fuel-fab.is-visible {
    opacity: 0.98;
    transform: translateY(0);
    pointer-events: auto;
}

.rant-modal-fuel-fab:disabled {
    pointer-events: none;
}

.rant-modal-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    white-space: pre-wrap;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

body.modal-open {
    overflow: hidden;
}

body.panel-open {
    overflow: hidden;
}

@media (min-width: 900px) {
    body.panel-dismissed #account-panel.panel-default-desktop,
    body.composer-dismissed #composer-panel.panel-default-desktop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
        padding: 0.58rem 0.72rem;
        min-height: 0;
    }

    #account-panel.is-minimized > :not(.panel-close):not(.section-header),
    #composer-panel.is-minimized > :not(.panel-close):not(.section-header) {
        display: none !important;
    }

    #account-panel.is-minimized .section-header,
    #composer-panel.is-minimized .section-header {
        margin: 0;
        padding-right: 0;
        flex: 1 1 auto;
        cursor: pointer;
        order: 1;
    }

    #account-panel.is-minimized .section-header .section-subtitle,
    #composer-panel.is-minimized .section-header .section-subtitle {
        display: none;
    }

    #account-panel.is-minimized .section-header h2,
    #account-panel.is-minimized .section-header .section-title,
    #composer-panel.is-minimized .section-header h2,
    #composer-panel.is-minimized .section-header .section-title {
        font-size: 1.06rem;
        padding-left: 0.62rem;
    }

    #account-panel.is-minimized .panel-close,
    #composer-panel.is-minimized .panel-close {
        position: static;
        top: auto;
        right: auto;
        padding: 0.28rem 0.68rem;
        font-size: 0.78rem;
        line-height: 1;
        margin-left: auto;
        order: 2;
    }

    #account-panel.is-minimized .panel-close .btn-icon,
    #composer-panel.is-minimized .panel-close .btn-icon {
        display: none;
    }
}

@media (min-width: 900px) {
    .top-bar-inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "brand search actions";
    }

    .utility-menu-btn {
        display: inline-flex;
    }
}

@media (min-width: 701px) {
    .search-toggle {
        display: none !important;
    }
}

@media (min-width: 900px) {
    body.compose-view .compose-page {
        width: min(760px, calc(100vw - 2rem)) !important;
        max-width: 760px !important;
    }

    body.compose-view .compose-page .compose-page-panel {
        width: 100%;
    }

    .layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "feed";
        align-items: flex-start;
    }

    /* Keep admin pages full-width on desktop even when base layout uses a sidebar track. */
    .layout.layout-admin {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "feed";
    }

    /* Canonical documents ship without utility sidebars; keep the main track full-width. */
    .layout.layout-focused {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "feed";
    }

    /* Canonical feed view keeps topics visible as a left rail on desktop/tablet. */
    .layout.layout-focused.layout-with-topics {
        grid-template-columns: var(--sidebar-col) minmax(0, 1fr);
        grid-template-areas: "sidebar feed";
        align-items: start;
    }

    .layout.layout-focused.layout-with-topics .sidebar {
        position: static;
        inset: auto;
        width: auto;
        max-height: none;
        overflow: visible;
        padding: 0;
        z-index: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        align-content: start;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .layout.layout-focused.layout-with-topics #account-panel.panel-default-desktop,
    .layout.layout-focused.layout-with-topics #composer-panel.panel-default-desktop {
        display: none;
    }

    .layout.layout-focused.layout-with-topics #account-panel.panel-default-desktop.is-open,
    .layout.layout-focused.layout-with-topics #composer-panel.panel-default-desktop.is-open {
        display: block;
    }

    .layout.layout-focused.layout-with-topics .sidebar > .account-panel:not(.is-open),
    .layout.layout-focused.layout-with-topics .sidebar > .create-rant:not(.is-open) {
        display: none;
    }

    .layout.layout-focused.layout-with-topics .sidebar > .account-panel.is-open,
    .layout.layout-focused.layout-with-topics .sidebar > .create-rant.is-open,
    body.compose-view .sidebar > .account-panel.panel-default-desktop.is-open {
        position: fixed;
        top: var(--dialog-shell-gap);
        left: 50%;
        transform: translateX(-50%);
        width: var(--dialog-shell-width);
        max-height: calc(100vh - (2 * var(--dialog-shell-gap)));
        max-height: calc(100dvh - (2 * var(--dialog-shell-gap)));
        z-index: 95;
        overflow-y: auto;
        margin: 0;
        border-radius: var(--dialog-shell-radius);
        box-shadow: var(--dialog-shell-shadow);
        padding: var(--dialog-shell-padding);
        border: 1px solid var(--panel-border);
        background: var(--panel-sheen), var(--panel-ember-wash), var(--card);
    }

    .layout.layout-focused.layout-with-topics .sidebar > .account-panel.is-open,
    body.compose-view .sidebar > .account-panel.panel-default-desktop.is-open {
        min-height: calc(100vh - (2 * var(--dialog-shell-gap)));
        min-height: calc(100dvh - (2 * var(--dialog-shell-gap)));
    }

    .layout.layout-focused.layout-with-topics .sidebar > .account-panel.is-open .panel-close,
    body.compose-view .sidebar > .account-panel.panel-default-desktop.is-open .panel-close {
        min-width: 0;
        width: auto;
        padding: 0.3rem 0.66rem;
        gap: 0.3rem;
    }

    .layout.layout-focused.layout-with-topics .sidebar > .account-panel.is-open .panel-close .btn-icon,
    body.compose-view .sidebar > .account-panel.panel-default-desktop.is-open .panel-close .btn-icon {
        display: none;
    }

    .layout.layout-focused.layout-with-topics .sidebar > .topics-panel.panel-default-desktop {
        display: grid;
    }

    .layout.layout-focused.layout-with-topics .topics-panel .panel-close.desktop-only {
        display: none;
    }

    .layout.layout-focused.layout-with-topics .topics-panel,
    .layout.layout-focused.layout-with-topics .rant-feed {
        min-width: 0;
    }

    /* Keep rant route width stable from first paint, even before JS hydration completes. */
    body.rant-view .layout.layout-with-topics {
        grid-template-columns: var(--sidebar-col) minmax(0, 1fr);
        grid-template-areas: "sidebar feed";
        align-items: start;
    }

    body.rant-view .layout.layout-with-topics .sidebar {
        width: var(--sidebar-col);
        min-width: var(--sidebar-col);
        max-width: var(--sidebar-col);
        flex-shrink: 0;
    }

    body.rant-view .layout.layout-with-topics .rant-feed {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    /* In split layout, fully hide dismissed account/composer panels instead of showing minimized strips. */
    body.panel-dismissed .layout.layout-with-topics #account-panel.panel-default-desktop:not(.is-open),
    body.composer-dismissed .layout.layout-with-topics #composer-panel.panel-default-desktop:not(.is-open) {
        display: none !important;
    }

    .sidebar {
        position: fixed;
        inset: 0;
        width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.9rem;
        z-index: 96;
        display: grid;
        grid-template-columns: minmax(0, min(760px, 96vw));
        justify-content: center;
        align-content: flex-start;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .sidebar::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    body.utility-drawer-open .sidebar {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.utility-drawer-open .layout-admin .sidebar {
        display: grid;
    }

    .panel-default-desktop {
        display: block;
    }

    .topics-panel.panel-default-desktop {
        display: none;
    }

    body.utility-drawer-open .topics-panel.panel-default-desktop.is-open {
        display: grid;
    }

    body.utility-drawer-open #account-panel.is-minimized,
    body.utility-drawer-open #composer-panel.is-minimized {
        display: none !important;
    }

}

@media (max-width: 900px) {
    :root {
        --dialog-shell-gap: clamp(0.3rem, 1.5vw, 0.9rem);
        --dialog-shell-radius: 15px;
        --dialog-shell-padding: 0.88rem;
    }

    .utility-menu-btn {
        display: none !important;
    }

    .desktop-only {
        display: none !important;
    }

    .topics-context-adjacent {
        display: none;
    }

    .top-bar {
        position: sticky;
        top: 0;
        z-index: 80;
        background: var(--bg);
    }

    .mobile-feed-switch {
        display: flex;
        margin: -0.2rem 0 0.4rem;
    }

    .topics-panel.panel-default-desktop {
        display: none;
    }

    .topic-context-mobile {
        display: block;
        width: 100%;
        order: -1;
        margin-bottom: 0.05rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: color-mix(in srgb, var(--surface-soft) 70%, var(--card));
    }

    .topic-context-mobile > summary {
        list-style: none;
        cursor: pointer;
        padding: 0.44rem 0.56rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.42rem;
    }

    .topic-context-mobile > summary::-webkit-details-marker {
        display: none;
    }

    .topic-context-mobile-title {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--ink);
    }

    .topic-context-mobile-meta {
        font-size: 0.69rem;
        font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        white-space: nowrap;
    }

    .topic-context-mobile-body {
        border-top: 1px solid var(--border);
        padding: 0.46rem 0.58rem 0.54rem;
        display: grid;
        gap: 0.34rem;
    }

    .topic-context-mobile-body p {
        margin: 0;
        font-size: 0.76rem;
        line-height: 1.38;
        color: var(--muted);
    }

    .topic-context-mobile-body ul {
        margin: 0;
        padding-left: 1rem;
        display: grid;
        gap: 0.2rem;
    }

    .topic-context-mobile-body li {
        margin: 0;
        font-size: 0.78rem;
        line-height: 1.33;
    }

    .topic-context-mobile-body li a {
        color: var(--ink);
        text-decoration: none;
        font-weight: 600;
    }

    .topic-context-mobile-body li a:hover,
    .topic-context-mobile-body li a:focus-visible {
        text-decoration: underline;
        text-underline-offset: 0.14em;
    }

    .account-panel.panel.is-open,
    .create-rant.panel.is-open {
        position: fixed;
        top: var(--dialog-shell-gap);
        left: 50%;
        transform: translateX(-50%);
        width: var(--dialog-shell-width);
        max-height: calc(100vh - (2 * var(--dialog-shell-gap)));
        max-height: calc(100dvh - (2 * var(--dialog-shell-gap)));
        z-index: 95;
        overflow-y: auto;
        margin: 0;
        border-radius: var(--dialog-shell-radius);
        box-shadow: var(--dialog-shell-shadow);
        padding: var(--dialog-shell-padding);
        background: var(--panel-sheen), var(--panel-ember-wash), var(--card);
    }

    .account-panel.panel.is-open {
        min-height: calc(100vh - (2 * var(--dialog-shell-gap)));
        min-height: calc(100dvh - (2 * var(--dialog-shell-gap)));
    }

    .account-panel.panel.is-open .panel-close {
        min-width: 2.2rem;
        width: 2.2rem;
        padding: 0;
        gap: 0;
    }

    .account-panel.panel.is-open .panel-close .btn-icon {
        width: 1.05rem;
        height: 1.05rem;
        font-size: inherit;
        line-height: 1;
    }

    .create-rant.panel.is-open {
        min-height: calc(100dvh - (2 * var(--dialog-shell-gap)));
    }

    /* Standalone /compose should behave as page content, not as a floating utility drawer. */
    body.compose-view .compose-page .create-rant.panel.is-open {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-height: none;
        min-height: 0;
        z-index: auto;
        overflow: visible;
        margin: 0;
        border-radius: 16px;
        padding: 0.8rem;
        box-shadow: var(--panel-shadow);
        background: var(--panel-sheen), var(--panel-ember-wash), var(--card);
        border: 1px solid var(--panel-border);
    }

    .topics-panel.panel.is-open {
        display: grid;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: auto;
        max-height: none;
        z-index: auto;
        overflow: visible;
        margin: 0;
        border-radius: 18px;
        padding: 1.1rem 1rem;
        background: var(--panel-sheen), var(--panel-ember-wash), var(--card);
        border: 1px solid var(--panel-border);
        box-shadow: var(--panel-shadow);
    }

    body[data-mobile-panel="topics"] .rant-feed {
        display: none;
    }

    body[data-mobile-panel="topics"] .layout {
        grid-template-areas: "sidebar";
    }

    body[data-mobile-panel="topics"] .topics-panel .panel-close.mobile-only {
        display: none;
    }

    .mobile-only {
        display: inline-flex;
    }

    /* Keep policy modal content scrollable on mobile by fixing the card viewport. */
    .modal.policy-modal .modal-card {
        height: calc(100vh - (2 * var(--modal-padding)));
        max-height: calc(100vh - (2 * var(--modal-padding)));
        height: calc(100dvh - (2 * var(--modal-padding)));
        max-height: calc(100dvh - (2 * var(--modal-padding)));
    }

    .modal.policy-modal .policy-body.modal-body-scroll {
        min-height: 0;
    }
}

@media (max-width: 700px) {
    :root {
        --dialog-shell-gap: 0.3rem;
    }

    .modal {
        --modal-padding: var(--dialog-shell-gap);
    }
    .top-bar {
        padding: 0.4rem 0.5rem 0.5rem;
    }

    .back-to-top-btn {
        right: 0.88rem;
        bottom: 0.88rem;
        width: 4.25rem;
        height: 4.25rem;
    }

    .header-search {
        justify-content: center;
    }

    .header-search .search-label {
        flex: 1 1 auto;
        min-width: 0;
    }

    .feed-filters {
        flex-wrap: wrap;
        gap: 0.8rem;
        align-items: flex-start;
    }

    .feed-header-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 0.45rem;
        row-gap: 0.35rem;
    }

    .feed-topic-context {
        width: auto;
        grid-column: 2;
        justify-self: end;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 0.34rem;
    }

    .feed-header-top h1,
    .feed-header-top h2 {
        min-width: 0;
    }

    .feed-topic-context .filter-text {
        max-width: 9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .feed-topic-context-label {
        font-size: 0.68rem;
    }

    .feed-topic-context .pill-clear-x,
    .topics-active-topic .pill-clear-x {
        width: 1.08rem;
        height: 1.08rem;
        font-size: 0;
    }

    .mobile-feed-switch-btn {
        padding: 0.32rem 0.58rem;
        font-size: 0.78rem;
    }

    .feed-filter-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.4rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .feed-filter-pills::-webkit-scrollbar {
        height: 0;
    }

    .feed-tag-pills {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.3rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .feed-tag-pills::-webkit-scrollbar {
        height: 0;
    }

    .feed-filter-pills .filter-text {
        display: none;
    }

    .feed-tag-pills .filter-text {
        display: inline;
    }

    .topic-follow-btn {
        padding: 0.2rem 0.46rem;
        font-size: 0.66rem;
    }

    .feed-topic-context-follow .topic-follow-btn {
        padding: 0.18rem 0.42rem;
        font-size: 0.62rem;
    }

    .filter-icon {
        margin-right: 0;
    }

    .pill {
        padding: 0.4rem 0.65rem;
    }

    .feed-filter-pills .pill.is-active {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    }

    .feed-filter-status {
        display: inline-flex;
    }

    .search-context {
        padding: 0.52rem 0.58rem;
        border-radius: 10px;
    }

    .topics-item {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .topics-item .topic-follow-form {
        margin-left: auto;
    }

    .topics-active-pill-clearable {
        margin-left: 0;
    }

    .search-context-head {
        gap: 0.3rem 0.45rem;
    }

    .search-context-title {
        font-size: 0.84rem;
    }

    .search-context-meta {
        font-size: 0.74rem;
    }

    .search-form {
        flex-direction: row;
        align-items: center;
    }

    .search-scope {
        gap: 0.3rem 0.45rem;
    }

    .search-scope-label {
        font-size: 0.68rem;
    }

    .search-live {
        max-height: min(50vh, 320px);
    }

    .search-form .btn {
        width: auto;
    }

    .search-clear {
        flex-basis: 100%;
        align-self: flex-start;
    }

    .container {
        padding: 0 0.6rem;
        gap: 1.1rem;
    }

    .account-panel,
    .create-rant,
    .topics-panel,
    .rant-feed {
        padding: 0.8rem;
        border-radius: 15px;
    }

    .account-group summary {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "heading toggle"
            "note note";
        row-gap: 0.35rem;
        align-items: start;
    }

    .account-group-heading {
        grid-area: heading;
    }

    .account-group-note {
        grid-area: note;
        text-align: left;
        white-space: normal;
        padding-left: 2.35rem;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }

    .account-group summary::after {
        grid-area: toggle;
        align-self: center;
    }

    .settings-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .settings-row .btn {
        justify-self: start;
    }

    .settings-inline-controls {
        justify-content: flex-start;
    }

    .account-return-metrics {
        grid-template-columns: 1fr;
        gap: 0.36rem;
    }

    .account-return-item-meta {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .tag-selector-actions {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .tag-selection-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.16rem;
    }

    .tag-selector-actions .btn {
        justify-self: start;
    }

    .composer-momentum {
        padding: 0.48rem 0.56rem;
        gap: 0.42rem;
    }

    .composer-step + .composer-step {
        padding-top: 0.62rem;
    }

    .composer-step-title {
        font-size: 0.82rem;
    }

    .composer-hints {
        gap: 0.3rem;
    }

    .composer-prompt {
        grid-template-columns: 1fr;
    }

    .composer-prompt-actions {
        grid-column: auto;
    }

    .rant-card {
        padding: 0.8rem;
        border-radius: 15px;
    }

    .top-bar-inner {
        padding: 0.55rem 0.7rem;
        gap: 0.5rem;
    }

    .top-bar-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "brand actions";
        text-align: left;
    }

    .brand {
        align-items: flex-start;
    }

    .logo {
        max-width: 170px;
    }

    .tagline {
        display: none;
    }

    .control-actions {
        justify-content: flex-end;
        display: flex;
        gap: 0.5rem;
        width: auto;
    }

    .control-actions .btn {
        width: auto;
        justify-content: center;
    }

    .control-search {
        max-width: none;
        display: none;
    }

    .search-toggle {
        display: inline-flex;
    }

    .top-bar .density-toggle {
        display: none;
    }

    .icon-btn .btn-text {
        display: none;
    }

    .icon-btn .btn-icon {
        display: inline-flex;
    }

    .top-bar .btn.btn-small.icon-btn {
        width: 2.4rem;
        height: 2.4rem;
        padding: 0;
    }

    body.density-compact .top-bar .btn.btn-small.icon-btn {
        width: 2.05rem;
        height: 2.05rem;
    }

    .fuel-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .fuel-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .feed-action-chip {
        padding: 0.28rem 0.5rem;
    }

    .feed-opportunity-callout {
        margin-top: 0.34rem;
        margin-bottom: 0.62rem;
        padding: 0.5rem 0.56rem;
        gap: 0.3rem;
    }

    .feed-opportunity-title {
        font-size: 0.82rem;
    }

    .feed-opportunity-copy {
        font-size: 0.75rem;
    }

    .feed-opportunity-link {
        font-size: 0.71rem;
        padding: 0.18rem 0.5rem;
    }

    .rant-share-text {
        display: none;
    }

    .rant-title h3 {
        font-size: 1.15rem;
    }

    .rant-meta {
        font-size: 0.88rem;
    }

    .rant-body {
        font-size: 1rem;
    }

    .modal-card {
        --modal-card-width: var(--dialog-shell-width);
        --modal-card-padding: var(--dialog-shell-padding);
        max-height: calc(100vh - (2 * var(--modal-padding)));
        max-height: calc(100dvh - (2 * var(--modal-padding)));
        border-radius: var(--dialog-shell-radius);
        border: 1px solid rgba(15, 23, 42, 0.05);
    }

    .modal-card-compact,
    .modal-card-dialog {
        --modal-card-width: 100%;
        --modal-card-padding: 0.84rem;
    }

    .modal-header-actions {
        justify-content: flex-end;
        width: auto;
        flex-wrap: nowrap;
    }

    .modal-close {
        width: 2.2rem;
        height: 2.2rem;
        padding: 0;
    }

    .rant-modal-actions {
        padding: 0.44rem 0.52rem;
        gap: 0.42rem;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "heat heat heat"
            "fuel comments share"
            "note note note";
    }

    .rant-modal-mini-meter {
        --meter-height: 12px;
        --heat-pill-slot: clamp(126px, 42%, 158px);
        gap: 0.28rem;
    }

    .rant-modal-mini-meter .meter-row {
        padding-left: calc(var(--heat-pill-slot) - 7px);
    }

    .rant-modal-mini-meter .heat-meta {
        font-size: 0.58rem;
    }

    .rant-modal-actions .fuel-note {
        width: 100%;
        margin-left: 0;
        text-align: left;
    }

    .rant-modal-fuel-fab {
        right: 0.95rem;
        bottom: 0.95rem;
        padding: 0.42rem 0.46rem;
    }

    .rant-modal-fuel-fab .fuel-text {
        display: none;
    }

    .rant-modal-comment-count .comment-label {
        display: none;
    }

    .comment-item.is-reply {
        margin-left: 0;
    }

    .comment-actions {
        flex-direction: row;
        align-items: center;
    }

    .comment-note {
        text-align: right;
    }

    .comment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    .comment-header-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .comment-children {
        padding-left: 0.75rem;
        margin-left: 0.35rem;
    }

    .search-popover-inner {
        width: 100%;
        padding: 0.6rem;
    }

    .search-popover-form {
        flex-wrap: wrap;
    }

    .verify-pop {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(260px, 80vw);
    }

    .admin-list-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-inline {
        width: 100%;
    }

    .admin-filters {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) and (pointer: coarse) {
    .rant-share-text {
        display: none;
    }

    .rant-share-btn.feed-action-chip {
        width: 2rem;
        min-width: 2rem;
        padding: 0;
        justify-content: center;
        gap: 0;
    }

    .rant-share-btn .rant-share-icon {
        width: 1rem;
        height: 1rem;
    }
}

@media (max-width: 560px) {
    .modal-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "actions"
            "copy";
    }

    .modal-header-copy {
        grid-area: copy;
    }

    .modal-header > .modal-close {
        grid-area: actions;
        justify-self: end;
    }

    .modal-header-actions {
        grid-area: actions;
        justify-self: end;
    }

    .modal-title {
        -webkit-line-clamp: 3;
    }
}

body[data-theme="dark"] {
    --bg: #0c1219;
    --bg-glow: rgba(207, 113, 46, 0.2);
    --card: #151d27;
    --ink: #e7edf5;
    --muted: #9aa8bb;
    --accent: #cf712e;
    --accent-soft: rgba(207, 113, 46, 0.22);
    --accent-ink: #24170f;
    --accent-deep: #ffd8b2;
    --cool: #63b6df;
    --border: rgba(124, 142, 168, 0.3);
    --panel-border: rgba(124, 142, 168, 0.24);
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    --panel-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
    --panel-shadow-strong: 0 28px 56px rgba(0, 0, 0, 0.6);
    --panel-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(255, 255, 255, 0) 72%);
    --panel-ember-wash: radial-gradient(130% 120% at 100% 0%, rgba(207, 113, 46, 0.18) 0%, rgba(207, 113, 46, 0) 58%);
    --panel-rail: linear-gradient(90deg, rgba(207, 113, 46, 0.78) 0%, rgba(207, 113, 46, 0.44) 34%, rgba(207, 113, 46, 0) 100%);
    --surface-soft: rgba(124, 142, 168, 0.12);
    --surface-soft-strong: rgba(124, 142, 168, 0.18);
    --bg-stripe: rgba(148, 163, 184, 0.06);
    --heading-ink: #f3f6fb;
    --focus-ring: rgba(207, 113, 46, 0.5);
    --fire-grad-start: #f4d29f;
    --fire-grad-mid: #d68445;
    --fire-grad-end: #b85122;
    --fire-ring: rgba(207, 113, 46, 0.35);
    --link: #f0bf8e;
    --link-hover: #ffdcb7;
    --link-bg: rgba(207, 113, 46, 0.22);
    --link-bg-hover: rgba(207, 113, 46, 0.32);
}

/* Dashboard semantic colors — brighter in dark mode for legibility */
body[data-theme="dark"] {
    --dash-ok:   #3ac470;
    --dash-mid:  #e0a020;
    --dash-warn: #e85547;
}

body[data-theme="dark"] .dash-trend-up   { color: #3ac470; }
body[data-theme="dark"] .dash-trend-down { color: #e85547; }

body[data-theme="dark"] .top-bar {
    /* Keep header transparent so the global body background starts at the top. */
    background: transparent;
}

body[data-theme="dark"] .pill {
    background: var(--surface-soft);
    border-color: rgba(124, 142, 168, 0.34);
    color: var(--muted);
}

body[data-theme="dark"] .pill.pill-tag {
    border-color: rgba(124, 142, 168, 0.4);
}

body[data-theme="dark"] .topic-follow-btn {
    border-color: rgba(124, 142, 168, 0.42);
    color: #a9bdcf;
}

body[data-theme="dark"] .topic-follow-btn:hover {
    border-color: rgba(207, 113, 46, 0.58);
    color: #e4edf7;
}

body[data-theme="dark"] .topic-follow-btn.is-followed {
    border-color: rgba(207, 113, 46, 0.62);
    color: #f0bf8e;
    background: rgba(207, 113, 46, 0.16);
}

body[data-theme="dark"] .mobile-feed-switch {
    background: rgba(16, 26, 38, 0.86);
    border-color: rgba(124, 142, 168, 0.32);
}

body[data-theme="dark"] .mobile-feed-switch-btn {
    color: #a9bdcf;
}

body[data-theme="dark"] .mobile-feed-switch-btn.is-active {
    color: #e7eff8;
    border-color: rgba(207, 113, 46, 0.58);
    background: rgba(207, 113, 46, 0.16);
}

body[data-theme="dark"] .pill-clear-x {
    border-color: rgba(124, 142, 168, 0.34);
    background: rgba(18, 30, 44, 0.72);
    color: #a9bdcf;
}

body[data-theme="dark"] .feed-topic-context-pill-clearable:hover .pill-clear-x,
body[data-theme="dark"] .topics-active-pill-clearable:hover .pill-clear-x {
    border-color: rgba(207, 113, 46, 0.58);
    background: rgba(207, 113, 46, 0.16);
    color: #e7eff8;
}

body[data-theme="dark"] .topics-tab {
    background: rgba(18, 30, 44, 0.76);
    border-color: rgba(124, 142, 168, 0.32);
    color: #a9bdcf;
}

body[data-theme="dark"] .topics-tab.is-active {
    color: #e7eff8;
    border-color: rgba(207, 113, 46, 0.58);
    background: rgba(207, 113, 46, 0.16);
}

body[data-theme="dark"] .topics-active-topic {
    border-color: rgba(124, 142, 168, 0.3);
    background: rgba(18, 30, 44, 0.72);
}

body[data-theme="dark"] .topics-item {
    border-color: rgba(124, 142, 168, 0.28);
    background: rgba(16, 26, 38, 0.64);
}

body[data-theme="dark"] .topic-picker,
body[data-theme="dark"] .tag-selector {
    background: rgba(16, 26, 38, 0.64);
    border-color: rgba(124, 142, 168, 0.32);
}

body[data-theme="dark"] .composer-topic-menu {
    background: rgba(16, 26, 38, 0.8);
    border-color: rgba(124, 142, 168, 0.34);
}

body[data-theme="dark"] .composer-topic-option {
    background: rgba(18, 30, 44, 0.78);
    border-color: transparent;
    color: #dce6f3;
}

body[data-theme="dark"] .composer-topic-option:hover,
body[data-theme="dark"] .composer-topic-option.is-active {
    border-color: rgba(207, 113, 46, 0.56);
    background: rgba(207, 113, 46, 0.16);
}

body[data-theme="dark"] .composer-topic-selected {
    border-color: rgba(124, 142, 168, 0.34);
    background: rgba(18, 30, 44, 0.78);
}

body[data-theme="dark"] .composer-topic-chip {
    color: #dce6f3;
}

body[data-theme="dark"] .composer-topic-selected.is-new {
    border-color: rgba(207, 113, 46, 0.58);
    background: rgba(207, 113, 46, 0.16);
}

body[data-theme="dark"] .composer-topic-selected.is-new .composer-topic-chip {
    color: #f3c392;
}

body[data-theme="dark"] .composer-topic-clear {
    border-left-color: rgba(124, 142, 168, 0.34);
    color: #9fb2c8;
    background: rgba(16, 26, 38, 0.74);
}

body[data-theme="dark"] .composer-topic-clear:hover {
    border-left-color: rgba(207, 113, 46, 0.56);
    color: #e7eff8;
    background: rgba(207, 113, 46, 0.16);
}

body[data-theme="dark"] .composer-topic-warning {
    border-color: rgba(207, 113, 46, 0.5);
    background: rgba(24, 38, 55, 0.72);
}

body[data-theme="dark"] .tag-selection-summary {
    background: rgba(18, 30, 44, 0.64);
    border-color: rgba(124, 142, 168, 0.3);
}

body[data-theme="dark"] .tag-selection-chip {
    background: rgba(16, 26, 38, 0.78);
    border-color: rgba(124, 142, 168, 0.34);
    color: #dce6f3;
}

body[data-theme="dark"] .tag-selection-chip.is-custom {
    border-color: rgba(207, 113, 46, 0.58);
    color: #f3c392;
    background: rgba(207, 113, 46, 0.16);
}

body[data-theme="dark"] .tag-check {
    background: rgba(18, 30, 44, 0.78);
    border-color: rgba(124, 142, 168, 0.3);
    color: #c8d4e2;
}

body[data-theme="dark"] .rant-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 62%), var(--card);
}

body[data-theme="dark"] .rant-card.is-owner-rant {
    border-color: rgba(207, 113, 46, 0.38);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.36);
}

body[data-theme="dark"] .rant-card.is-owner-rant::before {
    width: 3px;
    opacity: 0.66;
    background: linear-gradient(180deg, rgba(207, 113, 46, 0.82) 0%, rgba(207, 113, 46, 0.2) 100%);
}

body[data-theme="dark"] .rant-card::before {
    background: linear-gradient(180deg, rgba(207, 113, 46, 0.72) 0%, rgba(207, 113, 46, 0.16) 100%);
    opacity: 0.42;
}

body[data-theme="dark"] .rant-card.is-clickable:hover {
    border-color: rgba(207, 113, 46, 0.45);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.42);
}

body[data-theme="dark"] .rant-card.is-clickable:focus-visible {
    outline-color: var(--focus-ring);
}

body[data-theme="dark"] .pill.is-active,
body[data-theme="dark"] .policy-link.is-active {
    background: linear-gradient(150deg, #2a3a4e 0%, #1d2a3a 100%);
    color: #f8fafc;
    border-color: rgba(124, 142, 168, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 16px rgba(3, 8, 16, 0.35);
}

body[data-theme="dark"] .policy-link {
    background: var(--surface-soft);
    border-color: rgba(124, 142, 168, 0.32);
}

body[data-theme="dark"] .menu-link {
    background: var(--surface-soft);
    border-color: rgba(124, 142, 168, 0.32);
    color: #dde6f2;
}

body[data-theme="dark"] .menu-link:hover {
    border-color: rgba(207, 113, 46, 0.62);
    box-shadow: 0 8px 16px rgba(207, 113, 46, 0.18);
}

body[data-theme="dark"] .link-pill,
body[data-theme="dark"] .link,
body[data-theme="dark"] .policy-body a,
body[data-theme="dark"] .rules-link,
body[data-theme="dark"] .policy-accept a,
body[data-theme="dark"] .policy-modal-links a,
body[data-theme="dark"] .comment-policy a {
    color: var(--link);
}

body[data-theme="dark"] .account-group {
    background: rgba(18, 27, 38, 0.68);
    border-color: rgba(124, 142, 168, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

body[data-theme="dark"] .account-return-tile,
body[data-theme="dark"] .account-return-item {
    background: rgba(16, 26, 38, 0.7);
    border-color: rgba(124, 142, 168, 0.28);
}

body[data-theme="dark"] .account-return-link:hover {
    color: #f0bf8e;
}

body[data-theme="dark"] .reply-type {
    background: rgba(207, 113, 46, 0.2);
    border-color: rgba(207, 113, 46, 0.42);
    color: #ffdcb7;
}

body[data-theme="dark"] .notif-count {
    background: rgba(207, 113, 46, 0.26);
    color: #ffdcb7;
    border-color: rgba(5, 10, 18, 0.9);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.42);
}

body[data-theme="dark"] .notif-panel {
    border-color: rgba(207, 113, 46, 0.35);
    box-shadow: var(--shadow);
}

body[data-theme="dark"] .notif-panel-empty {
    color: var(--muted);
}

body[data-theme="dark"] .account-group summary {
    background: var(--surface-soft);
}

body[data-theme="dark"] .account-group:hover summary {
    background: var(--surface-soft-strong);
}

body[data-theme="dark"] .account-group-icon {
    background: var(--accent-soft);
    color: var(--accent-deep);
    border-color: rgba(207, 113, 46, 0.45);
}

body[data-theme="dark"] .admin-tab {
    background: var(--surface-soft);
    color: var(--muted);
}

body[data-theme="dark"] .admin-tab.is-active {
    background: linear-gradient(140deg, var(--fire-grad-start) 0%, var(--fire-grad-mid) 62%, var(--fire-grad-end) 100%);
    color: #23170f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 18px rgba(207, 113, 46, 0.24);
}

body[data-theme="dark"] .admin-tab-pill {
    background: rgba(10, 16, 24, 0.42);
    color: #ebf1f8;
}

body[data-theme="dark"] .admin-pill-tag {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

body[data-theme="dark"] .admin-priority-high {
    background: rgba(248, 113, 113, 0.22);
    color: #fecaca;
}

body[data-theme="dark"] .admin-priority-medium {
    background: rgba(251, 191, 36, 0.22);
    color: #fde68a;
}

body[data-theme="dark"] .admin-priority-low {
    background: rgba(96, 165, 250, 0.22);
    color: #bfdbfe;
}

body[data-theme="dark"] .admin-event-level-warning {
    background: rgba(251, 191, 36, 0.22);
    color: #fde68a;
}

body[data-theme="dark"] .admin-event-level-error,
body[data-theme="dark"] .admin-event-level-critical {
    background: rgba(248, 113, 113, 0.22);
    color: #fecaca;
}

body[data-theme="dark"] .search-popover {
    background: rgba(5, 10, 18, 0.78);
}

body[data-theme="dark"] .auth-gate,
body[data-theme="dark"] .rules-card,
body[data-theme="dark"] .comment-replying,
body[data-theme="dark"] .comment-item.is-reply {
    background: rgba(207, 113, 46, 0.1);
    border-color: rgba(207, 113, 46, 0.32);
}

body[data-theme="dark"] .composer-step + .composer-step {
    border-top-color: rgba(124, 142, 168, 0.24);
}

body[data-theme="dark"] .composer-step-title {
    color: #9fb2c8;
}

body[data-theme="dark"] .composer-step.is-active .composer-step-title {
    color: #e8eef6;
}

body[data-theme="dark"] .composer-step-index {
    border-color: rgba(124, 142, 168, 0.34);
    background: rgba(15, 24, 36, 0.72);
    color: #9fb2c8;
}

body[data-theme="dark"] .composer-step.is-active .composer-step-index {
    border-color: rgba(207, 113, 46, 0.54);
    color: #f0bf8e;
}

body[data-theme="dark"] .composer-step.is-complete .composer-step-index {
    border-color: rgba(41, 136, 94, 0.48);
    background: rgba(41, 136, 94, 0.14);
    color: #7fd2aa;
}

body[data-theme="dark"] .composer-rant-guardrail {
    color: #f0bf8e;
}

body[data-theme="dark"] .composer-momentum {
    border-color: rgba(124, 142, 168, 0.3);
    background: rgba(18, 30, 44, 0.64);
}

body[data-theme="dark"] .composer-momentum-label {
    color: #a8bbd0;
}

body[data-theme="dark"] .composer-momentum-toggle {
    border-color: rgba(124, 142, 168, 0.38);
    background: rgba(15, 24, 36, 0.72);
    color: #b8c8da;
}

body[data-theme="dark"] .composer-momentum-toggle:hover {
    border-color: rgba(207, 113, 46, 0.54);
    color: #e8eef6;
}

body[data-theme="dark"] .composer-momentum-toggle.is-open {
    border-color: rgba(207, 113, 46, 0.6);
    background: rgba(207, 113, 46, 0.2);
    color: #f3c392;
}

body[data-theme="dark"] .composer-progress-track {
    background: rgba(124, 142, 168, 0.2);
}

body[data-theme="dark"] .composer-progress-text {
    color: #9fb2c8;
}

body[data-theme="dark"] .composer-hint-chip {
    border-color: rgba(124, 142, 168, 0.28);
    background: rgba(15, 24, 36, 0.68);
    color: #b9c9dc;
}

body[data-theme="dark"] .composer-hint-chip.is-warn {
    border-color: rgba(207, 113, 46, 0.54);
    background: rgba(207, 113, 46, 0.14);
    color: #f0bf8e;
}

body[data-theme="dark"] .rules-card-collapsed > summary {
    color: #a8bbd0;
}

body[data-theme="dark"] .rules-card-collapsed[open] > summary {
    color: #e8eef6;
}

body[data-theme="dark"] .rules-card-collapsed > summary::before {
    border-color: rgba(124, 142, 168, 0.34);
    background: rgba(15, 24, 36, 0.72);
}

body[data-theme="dark"] .composer-hint-chip.is-good {
    border-color: rgba(101, 145, 198, 0.52);
    background: rgba(101, 145, 198, 0.14);
    color: #cfe4ff;
}

body[data-theme="dark"] .composer-hint-chip.is-strong {
    border-color: rgba(84, 179, 136, 0.5);
    background: rgba(84, 179, 136, 0.13);
    color: #b9f0d3;
}

body[data-theme="dark"] .composer-prompt-label {
    color: #e8eef6;
}

body[data-theme="dark"] .composer-prompt-text {
    color: #afc0d4;
}

body[data-theme="dark"] .rules-summary strong {
    color: #f3f6fb;
}

body[data-theme="dark"] .comment-item.is-reply {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(31, 44, 61, 0.58));
    border-color: rgba(124, 142, 168, 0.28);
}

body[data-theme="dark"] .rage-preview {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

body[data-theme="dark"] .danger-zone {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
}

body[data-theme="dark"] .account-security-zone {
    background: rgba(18, 27, 38, 0.62);
    border-color: rgba(124, 142, 168, 0.34);
}

body[data-theme="dark"] .account-panel .btn-outline,
body[data-theme="dark"] .account-panel .btn-primary {
    background: linear-gradient(180deg, rgba(29, 42, 58, 0.82) 0%, rgba(18, 28, 40, 0.92) 100%);
    border-color: rgba(124, 142, 168, 0.4);
    color: #d5deea;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .account-panel .btn-primary {
    border-color: rgba(207, 113, 46, 0.54);
    color: var(--accent-deep);
}

body[data-theme="dark"] .account-panel .btn-danger {
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.38) 0%, rgba(69, 16, 16, 0.5) 100%);
    border-color: rgba(248, 113, 113, 0.46);
    color: #fecaca;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .account-panel .btn-outline:hover,
body[data-theme="dark"] .account-panel .btn-primary:hover {
    border-color: rgba(207, 113, 46, 0.62);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.34);
}

body[data-theme="dark"] .account-panel .btn-danger:hover {
    border-color: rgba(248, 113, 113, 0.62);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.34);
}

body[data-theme="dark"] .menu-item:hover {
    background: var(--surface-soft-strong);
}

body[data-theme="dark"] .policy-table th {
    background: rgba(124, 142, 168, 0.24);
}

body[data-theme="dark"] .comment-item.is-author {
    border-color: rgba(207, 113, 46, 0.55);
    background: rgba(207, 113, 46, 0.14);
    box-shadow: 0 0 0 1px rgba(207, 113, 46, 0.2);
}

body[data-theme="dark"] .comment-item.is-new {
    animation: commentFlashDark 2.2s ease-out;
}

body[data-theme="dark"] .comment-item.is-focus-target {
    border-color: rgba(255, 175, 90, 0.55);
    background: rgba(207, 113, 46, 0.15);
    box-shadow: 0 0 0 3px rgba(255, 175, 90, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .comment-item {
    border-color: rgba(124, 142, 168, 0.34);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

body[data-theme="dark"] .comment-children {
    border-left-color: rgba(207, 113, 46, 0.3);
}

body[data-theme="dark"] .author-link,
body[data-theme="dark"] .comment-author,
body[data-theme="dark"] .comment-author-link {
    color: var(--accent-deep);
}

body[data-theme="dark"] .author-link:hover,
body[data-theme="dark"] .comment-author-link:hover {
    color: #ffe6cc;
}

body[data-theme="dark"] .feed-action-chip {
    border-color: rgba(124, 142, 168, 0.38);
    color: #cbd5e1;
    background: rgba(16, 24, 35, 0.82);
}

body[data-theme="dark"] .feed-activity-pill.is-opportunity {
    border-color: rgba(201, 106, 38, 0.45);
    background: color-mix(in srgb, rgba(201, 106, 38, 0.12) 60%, rgba(16, 24, 35, 0.82));
}

body[data-theme="dark"] .feed-activity-opportunity {
    color: #ffcd9c;
}

body[data-theme="dark"] .feed-opportunity-callout {
    border-color: rgba(201, 106, 38, 0.45);
    background: color-mix(in srgb, rgba(201, 106, 38, 0.14) 44%, rgba(16, 24, 35, 0.84));
}

body[data-theme="dark"] .feed-opportunity-link {
    background: rgba(11, 21, 34, 0.88);
    border-color: rgba(124, 142, 168, 0.48);
    color: #dbe8ff;
}

body[data-theme="dark"] .modal-tab {
    background: var(--surface-soft);
    color: var(--muted);
}

body[data-theme="dark"] .modal-tab.is-active {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

body[data-theme="dark"] .modal-item {
    border-color: rgba(124, 142, 168, 0.3);
    background: rgba(16, 24, 35, 0.78);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

body[data-theme="dark"] .modal-item-excerpt {
    color: #e2e8f0;
}

body[data-theme="dark"] .modal-rant-link {
    color: #f8fafc;
}

body[data-theme="dark"] .modal-rant-link:hover {
    color: var(--accent-deep);
}

body[data-theme="dark"] .comment-count:hover {
    color: #ffe5cb;
    border-color: rgba(207, 113, 46, 0.62);
}

body[data-theme="dark"] .fuel-btn {
    border-color: rgba(207, 113, 46, 0.46);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.34), 0 6px 14px rgba(207, 113, 46, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body[data-theme="dark"] .fuel-btn:hover {
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.38), 0 8px 16px rgba(207, 113, 46, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

body[data-theme="dark"] .fuel-delta-pop {
    background: rgba(8, 15, 24, 0.95);
    border-color: rgba(255, 184, 112, 0.6);
    color: #ffd79f;
}

body[data-theme="dark"] .comment-sort {
    background: rgba(124, 142, 168, 0.12);
    border-color: rgba(124, 142, 168, 0.34);
}

body[data-theme="dark"] .comment-sort-btn {
    color: var(--muted);
}

body[data-theme="dark"] .comment-sort-btn.is-active {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

body[data-theme="dark"] .account-btn.is-authenticated::after {
    box-shadow: 0 0 0 1px #15202c, 0 0 8px rgba(34, 197, 94, 0.5);
}

body[data-theme="dark"] .rant-modal-actions,
body[data-theme="dark"] .comment-header,
body[data-theme="dark"] .comment-form {
    background: rgba(16, 24, 35, 0.82);
    border-color: rgba(124, 142, 168, 0.34);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

body[data-theme="dark"] .rant-editor {
    background: rgba(16, 24, 35, 0.82);
    border-color: rgba(124, 142, 168, 0.34);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

body[data-theme="dark"] .rant-modal-fuel-fab {
    box-shadow: 0 12px 24px rgba(255, 126, 39, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

body[data-theme="dark"] .rant-meta {
    color: #cbd5e1;
}

body[data-theme="dark"] .identity-emblem--founding,
body[data-theme="dark"] .profile-badge--founding {
    border-color: rgba(96, 165, 250, 0.46);
    color: #cfe6ff;
    background: color-mix(in srgb, #3b82f6 22%, var(--surface-soft));
}

body[data-theme="dark"] .identity-emblem--firestarter,
body[data-theme="dark"] .profile-badge--firestarter {
    border-color: rgba(251, 146, 60, 0.46);
    color: #ffd4ad;
    background: color-mix(in srgb, #f97316 22%, var(--surface-soft));
}

body[data-theme="dark"] .identity-emblem--custom,
body[data-theme="dark"] .profile-badge--custom {
    border-color: rgba(148, 163, 184, 0.44);
    color: #dce7f4;
    background: color-mix(in srgb, #334155 22%, var(--surface-soft));
}

body[data-theme="dark"] .identity-emblem.has-image {
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

body[data-theme="dark"] .profile-badge-icon.has-image {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(4, 8, 15, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

body[data-theme="dark"] .rant-body {
    color: #dee7f2;
}

body[data-theme="dark"] .heat-meta {
    color: #e2e8f0;
}

body[data-theme="dark"] .heat-peak {
    color: var(--accent-deep);
}

body[data-theme="dark"] .heat-trend--rising {
    color: #fdba74;
}

body[data-theme="dark"] .heat-trend--cooling {
    color: #7dd3fc;
}

body[data-theme="dark"] .heat-trend--steady {
    color: #94a3b8;
}

/* Legacy dark heat-badge stack removed; canonical badge rules live near file end. */

body[data-theme="dark"] .btn-outline {
    background: linear-gradient(180deg, rgba(30, 43, 59, 0.72) 0%, rgba(17, 26, 38, 0.88) 100%);
    border-color: rgba(207, 113, 46, 0.56);
    color: var(--accent-deep);
}

body[data-theme="dark"] .btn-outline:hover {
    box-shadow: 0 6px 12px rgba(207, 113, 46, 0.2);
}

body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="email"],
body[data-theme="dark"] input[type="password"],
body[data-theme="dark"] input[type="search"],
body[data-theme="dark"] input[type="number"],
body[data-theme="dark"] input[type="url"],
body[data-theme="dark"] input[type="tel"],
body[data-theme="dark"] select,
body[data-theme="dark"] textarea,
body[data-theme="dark"] .search-input {
    background: rgba(16, 24, 35, 0.85);
    border-color: rgba(124, 142, 168, 0.34);
    color: var(--ink);
}

body[data-theme="dark"] .comment-form textarea:focus {
    border-color: rgba(207, 113, 46, 0.65);
    box-shadow: inset 0 0 0 1px rgba(207, 113, 46, 0.45);
}

body[data-theme="dark"] option {
    background: #101826;
    color: #f8fafc;
}

body[data-theme="dark"] .meter {
    background: rgba(16, 24, 35, 0.92);
    border-color: rgba(124, 142, 168, 0.34);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6),
        0 0 calc(7px + var(--heat-intensity) * 14px) rgba(207, 113, 46, calc(0.12 + var(--heat-intensity) * 0.3));
}

body[data-theme="dark"] .meter-ticks {
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(124, 142, 168, 0.38) 0 1px,
            rgba(0, 0, 0, 0) 1px 6px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(124, 142, 168, 0.56) 0 1px,
            rgba(0, 0, 0, 0) 1px 30px
        );
    opacity: 0.5;
}

body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
    color: rgba(148, 163, 184, 0.8);
}

body[data-theme="dark"] .alert-success {
    background: rgba(34, 197, 94, 0.2);
    color: #bbf7d0;
}

body[data-theme="dark"] .alert-error {
    background: rgba(248, 113, 113, 0.2);
    color: #fecaca;
}

body[data-theme="dark"] .alert-warn {
    background: rgba(255, 154, 31, 0.2);
    color: #ffd7a8;
}

body[data-theme="dark"] .admin-card-warn {
    background: rgba(248, 113, 113, 0.16);
}

@keyframes commentFlashDark {
    0% {
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
        background: rgba(255, 154, 31, 0.2);
    }
    100% {
        box-shadow: none;
        background: var(--card);
    }
}


/* ---- Promoted Feed Card Heat Language (from dev preview) ---- */
/* Production feed-card heat language. */
body .rant-grid {
    gap: 0.92rem;
}

body {
    --dev-radius-control: 11px;
    --dev-radius-chip: 9px;
    --dev-control-border: color-mix(in srgb, var(--border) 78%, #6f809a);
    --dev-control-border-strong: color-mix(in srgb, var(--border) 64%, #8ca3c0);
    --dev-control-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(236, 242, 249, 0.96) 100%);
    --dev-control-bg-soft: color-mix(in srgb, var(--card) 84%, var(--surface-soft));
    --dev-control-ink: color-mix(in srgb, var(--muted) 90%, var(--ink));
    --dev-control-shadow:
        0 2px 8px rgba(11, 18, 29, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    --dev-control-shadow-hover:
        0 4px 12px rgba(11, 18, 29, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.24);
    --dev-input-bg: linear-gradient(180deg, rgba(250, 252, 255, 0.96) 0%, rgba(241, 246, 253, 0.98) 100%);
}

body[data-theme="dark"] {
    --dev-control-border: rgba(116, 140, 166, 0.5);
    --dev-control-border-strong: rgba(146, 170, 198, 0.58);
    --dev-control-bg: linear-gradient(180deg, rgba(44, 61, 83, 0.9) 0%, rgba(30, 45, 63, 0.92) 100%);
    --dev-control-bg-soft: linear-gradient(180deg, rgba(38, 54, 75, 0.9) 0%, rgba(27, 41, 59, 0.94) 100%);
    --dev-control-ink: #cbd9ea;
    --dev-control-shadow:
        0 3px 10px rgba(4, 9, 16, 0.42),
        inset 0 0 0 1px rgba(194, 214, 236, 0.08);
    --dev-control-shadow-hover:
        0 5px 14px rgba(4, 9, 16, 0.5),
        inset 0 0 0 1px rgba(208, 224, 242, 0.12);
    --dev-input-bg: linear-gradient(180deg, rgba(20, 31, 45, 0.92) 0%, rgba(14, 24, 36, 0.96) 100%);
}

body :is(
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .btn,
    .pill,
    .modal-close,
    .search-toggle,
    .feed-action-chip,
    .search-input,
    .search-clear,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    textarea,
    select,
    .topic-follow-btn,
    .panel-close,
    .search-popover-close,
    .modal-close,
    .menu-trigger,
    .policy-link,
    .link-pill,
    .rules-link,
    .topics-legal-link,
    .admin-tab,
    .admin-pill,
    .admin-tab-pill,
    .comment-sort-btn,
    .comment-total,
    .comment-badge,
    .comment-removed-tag,
    .comment-replying,
    .search-recent-pill
) {
    border-radius: var(--dev-radius-control) !important;
}

/* Neutral controls share one rectangular surface language. */
body :is(
    .btn-outline,
    .feed-action-chip,
    .comment-count,
    .rant-share-btn,
    .pill:not(.is-active),
    .topic-follow-btn:not(.is-followed),
    .panel-close,
    .search-popover-close,
    .modal-close,
    .menu-trigger,
    .policy-link:not(.is-active),
    .link-pill,
    .rules-link,
    .topics-legal-link,
    .admin-tab:not(.is-active),
    .admin-tab-pill,
    .comment-sort,
    .comment-sort-btn:not(.is-active),
    .search-recent-pill,
    .topics-tab:not(.is-active),
    .mobile-feed-switch-btn:not(.is-active),
    .search-live-item,
    .composer-topic-chip,
    .tag-selection-chip,
    .tag-check,
    .search-clear
) {
    border-color: var(--dev-control-border);
    background: var(--dev-control-bg-soft);
    color: var(--dev-control-ink);
    box-shadow: var(--dev-control-shadow);
}

body :is(
    .btn-outline:hover,
    .comment-count:hover,
    .rant-share-btn:hover,
    .topic-follow-btn:not(.is-followed):hover,
    .panel-close:hover,
    .search-popover-close:hover,
    .modal-close:hover,
    .search-live-item:hover,
    .search-clear:hover,
    .admin-tab:not(.is-active):hover,
    .topics-tab:not(.is-active):hover,
    .mobile-feed-switch-btn:not(.is-active):hover
) {
    border-color: var(--dev-control-border-strong);
    box-shadow: var(--dev-control-shadow-hover);
}

/* Normalize inline text-actions into compact rectangular controls. */
body :is(
    .comment-reply,
    .reply-cancel,
    .comment-thread-toggle,
    .comment-edit,
    .comment-delete
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.18rem 0.5rem;
    border: 1px solid var(--dev-control-border);
    background: var(--dev-control-bg-soft);
    color: var(--dev-control-ink);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.15;
    box-shadow: var(--dev-control-shadow);
    border-radius: var(--dev-radius-chip) !important;
}

body :is(
    .comment-reply:hover,
    .reply-cancel:hover,
    .comment-thread-toggle:hover,
    .comment-edit:hover,
    .comment-delete:hover
) {
    border-color: var(--dev-control-border-strong);
    box-shadow: var(--dev-control-shadow-hover);
    text-decoration: none;
}

body .comment-delete {
    color: color-mix(in srgb, #b91c1c 84%, var(--dev-control-ink));
    border-color: color-mix(in srgb, #b91c1c 46%, var(--dev-control-border));
}

body :is(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    textarea,
    select,
    .search-input,
    .settings-select
) {
    border-color: var(--dev-control-border);
    background: var(--dev-input-bg);
    color: var(--ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

body[data-theme="dark"] :is(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    textarea,
    select,
    .search-input,
    .settings-select
) {
    color: #dbe7f5;
}

body .rant-card {
    --tier-border: rgba(122, 140, 162, 0.34);
    --tier-border-alpha: 0.34;
    --tier-glow: 0 0 0 0 rgba(0, 0, 0, 0);
    --heat-scale: 0;
    --tier-top-line: linear-gradient(90deg, rgba(141, 159, 182, 0.12), rgba(141, 159, 182, 0.05));
    --tier-top-opacity: 0;
    --tier-top-height: 2px;
    --meter-start: #cedbeb;
    --meter-mid: #a9bfd8;
    --meter-end: #819dbd;
    --meter-glow: rgba(102, 145, 191, 0.25);
    --meter-track-bg: linear-gradient(180deg, #eef3fa 0%, #e1eaf6 100%);
    --meter-track-border: rgba(147, 167, 192, 0.72);
    --badge-ink: #34485f;
    --badge-bg: linear-gradient(125deg, #eaf0f8 0%, #d4dfec 55%, #c4d4e6 100%);
    --badge-border: rgba(111, 132, 157, 0.44);
    --badge-halo: rgba(120, 152, 191, 0.12);
    --badge-ice-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
    --trend-shift: rgba(124, 142, 168, 0.3);
    --heat-pill-slot: clamp(132px, 27%, 170px);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.54) 0%, rgba(255, 255, 255, 0) 56%),
        radial-gradient(
            120% 110% at 100% 0%,
            rgba(228, 102, 43, calc(0.032 + var(--heat-scale) * 0.34)) 0%,
            rgba(228, 102, 43, 0) 66%
        ),
        var(--card);
    padding: 0.98rem 1.04rem 0.95rem;
    gap: 0.6rem;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--tier-border) 82%, var(--trend-shift) 18%);
    box-shadow:
        0 10px 20px rgba(11, 18, 29, 0.1),
        inset 0 0 0 1px rgba(223, 98, 36, calc(var(--heat-scale) * 0.62)),
        0 0 calc(5px + var(--heat-scale) * 18px) rgba(223, 98, 36, calc(0.06 + var(--heat-scale) * 0.34)),
        var(--tier-glow);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "heat heat"
        "title title"
        "meta meta"
        "body body"
        "prompt prompt"
        "actions actions";
}

body[data-theme="dark"] .rant-card {
    --meter-track-bg: linear-gradient(180deg, #1a2a42 0%, #142238 100%);
    --meter-track-border: rgba(120, 146, 177, 0.58);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 56%),
        radial-gradient(
            120% 110% at 100% 0%,
            rgba(228, 102, 43, calc(0.022 + var(--heat-scale) * 0.24)) 0%,
            rgba(228, 102, 43, 0) 70%
        ),
        var(--card);
}

/* Dark-mode tone pass: keep heat legible, reduce neon intensity. */
body[data-theme="dark"] .rant-card {
    --tier-border: color-mix(in srgb, var(--tier-border) 78%, rgba(118, 140, 166, 0.42));
    --tier-glow: 0 8px 18px rgba(5, 10, 18, 0.36);
}

/* Legacy dark badge ring/glow overrides removed; canonical rules live near file end. */

body[data-theme="dark"] .meter {
    box-shadow:
        inset 0 1px 2px rgba(5, 10, 18, 0.7),
        0 0 7px color-mix(in srgb, var(--meter-glow) 44%, transparent);
}

body[data-theme="dark"] .meter-fill {
    filter: saturate(0.84) brightness(0.9);
    box-shadow: 0 0 7px color-mix(in srgb, var(--meter-glow) 52%, transparent);
}

body[data-theme="dark"] .meter-fill::after {
    opacity: 0.72;
}

/* Legacy dark trend badge overrides removed; canonical rules live near file end. */

body[data-theme="dark"] .rant-card[data-heat-band="cold"] {
    --meter-start: #9ab2c9;
    --meter-mid: #7f9bb9;
    --meter-end: #6788aa;
    --meter-glow: rgba(111, 146, 184, 0.28);
    --badge-bg: linear-gradient(125deg, #adc0d5 0%, #93acc5 56%, #7b98b6 100%);
    --badge-border: rgba(121, 150, 182, 0.68);
    --badge-ink: #17344d;
    --badge-halo: rgba(108, 140, 176, 0.18);
    --badge-ice-overlay:
        radial-gradient(84% 94% at 12% 2%, rgba(244, 249, 255, 0.24) 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(72% 88% at 88% 2%, rgba(244, 249, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, rgba(236, 244, 252, 0.28) 0%, rgba(220, 232, 246, 0.14) 28%, rgba(211, 225, 241, 0.02) 55%, rgba(203, 218, 236, 0) 70%);
}

body[data-theme="dark"] .rant-modal-mini-meter {
    --meter-track-bg: linear-gradient(180deg, #1a2a42 0%, #142238 100%);
    --meter-track-border: rgba(120, 146, 177, 0.58);
}

body[data-theme="dark"] .rant-modal-mini-meter .meter {
    box-shadow:
        inset 0 1px 2px rgba(5, 10, 18, 0.7),
        0 0 7px color-mix(in srgb, var(--meter-glow) 44%, transparent);
}

body[data-theme="dark"] .rant-modal-mini-meter .meter-fill {
    filter: saturate(0.84) brightness(0.9);
    box-shadow: 0 0 7px color-mix(in srgb, var(--meter-glow) 52%, transparent);
}

/* Legacy dark modal trend badge override removed; canonical rules live near file end. */

body[data-theme="dark"] .rant-modal-mini-meter[data-heat-band="cold"] {
    --badge-ice-overlay:
        radial-gradient(84% 94% at 12% 2%, rgba(244, 249, 255, 0.24) 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(72% 88% at 88% 2%, rgba(244, 249, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, rgba(236, 244, 252, 0.28) 0%, rgba(220, 232, 246, 0.14) 28%, rgba(211, 225, 241, 0.02) 55%, rgba(203, 218, 236, 0) 70%);
}

body .rant-card::before {
    width: 1px;
    opacity: calc(0.16 + (var(--heat-scale) * 0.62));
    background:
        linear-gradient(180deg, rgba(130, 148, 172, 0.38) 0%, rgba(130, 148, 172, 0.02) 100%),
        linear-gradient(180deg, rgba(223, 98, 36, calc(0.26 + (var(--heat-scale) * 0.74))) 0%, rgba(223, 98, 36, 0) 100%);
}

body .rant-card::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: var(--tier-top-height);
    border-radius: 999px;
    background: var(--tier-top-line);
    opacity: min(1, calc(var(--tier-top-opacity) + (var(--heat-scale) * 0.32)));
    pointer-events: none;
}

body .rant-card > header {
    grid-area: title;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 0.06rem;
}

body .rant-card .rant-title {
    padding-top: 0.02rem;
}

body .rant-card > header .heat-badge {
    position: absolute;
    left: 1.04rem;
    top: 1.01rem;
    z-index: 5;
    width: var(--heat-pill-slot);
    justify-content: center;
    pointer-events: none;
}

/* Flatten fuel row so meter and actions can live in separate layout zones. */
body .rant-card .fuel-row {
    display: contents;
}

body .rant-card .fire-meter {
    grid-area: heat;
    padding-top: 0.02rem;
    margin-top: 0;
    min-height: 0;
}

body .rant-card .fire-meter .meter-row {
    min-height: 1.18rem;
    position: relative;
    padding-left: calc(var(--heat-pill-slot) - 7px);
    width: 100%;
    align-items: flex-start;
}

body .rant-card .fire-meter .meter {
    margin-top: 0;
}

body .rant-card .heat-meta {
    margin-top: 0.08rem;
    justify-content: flex-end;
    opacity: 0.7;
    line-height: 1;
}

body .rant-card .heat-flame {
    display: none;
}

body .rant-card .heat-peak {
    font-size: 0;
    letter-spacing: 0;
    opacity: 0.78;
}

body .rant-card .heat-peak::after {
    content: "MAX " attr(data-peak-value) "\00B0";
    font-size: 0.7rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--muted) 94%, var(--ink));
    letter-spacing: 0.07em;
}

body .rant-card .rant-body {
    grid-area: body;
    margin-top: 0.02rem;
}

body .rant-card .rant-spark-prompt {
    grid-area: prompt;
}

body .rant-card .rant-meta {
    grid-area: meta;
    order: 4;
    margin-top: 0.02rem;
    margin-bottom: 0;
    align-self: center;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    border-top: none;
    padding-top: 0.1rem;
}

body .rant-card .fuel-actions {
    grid-area: actions;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 0.02rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    padding-top: 0.34rem;
}

body .rant-card .fuel-actions .fuel-note {
    width: 100%;
    order: 4;
    text-align: right;
}

body .rant-card .fuel-actions .fuel-form {
    order: 1;
}

body .rant-card .fuel-actions .comment-count {
    order: 2;
    margin-left: auto;
}

body .rant-card .fuel-actions .rant-share-btn {
    order: 3;
}

body .rant-card.is-clickable:hover {
    border-color: color-mix(in srgb, var(--tier-border) 76%, var(--trend-shift) 24%);
    box-shadow:
        0 14px 26px rgba(11, 18, 29, 0.14),
        var(--tier-glow);
}

body .rant-card.is-clickable:hover::before {
    opacity: 0.26;
}

/* Trend controls border temperature so "hot" sort has useful contrast. */
body .rant-card[data-heat-trend="smoldering"] {
    --trend-shift: rgba(188, 132, 79, 0.42);
}

body .rant-card[data-heat-trend="rising"] {
    --trend-shift: rgba(211, 122, 50, 0.55);
}

body .rant-card[data-heat-trend="ignited"] {
    --trend-shift: rgba(227, 101, 42, 0.62);
}

body .rant-card[data-heat-trend="inferno"],
body .rant-card[data-heat-trend="viral"] {
    --trend-shift: rgba(232, 78, 32, 0.74);
}

body .rant-card[data-heat-trend="steady"] {
    --trend-shift: rgba(128, 146, 170, 0.34);
}

body .rant-card[data-heat-trend="cooling"] {
    --trend-shift: rgba(83, 119, 154, 0.42);
}