.sidebar {
    background: #111217;
    border-right: 1px solid #2f3339;
    color: #f1f2f3;
}

.brand-mark {
    background: #238264;
    color: #fff;
}

.brand small,
.identity small,
.text-button {
    color: #a7a9b4;
}

.main-nav {
    gap: 6px;
}

.nav-link {
    color: #b9bbc2;
    border-radius: 6px;
}

.nav-link:hover {
    background: #1b1d21;
    color: #fff;
}

.nav-link.active {
    background: #22252b;
    color: #fff;
    box-shadow: inset 3px 0 #73bf69;
}

.nav-icon {
    background: #2a2d33;
    color: #d8d9da;
    border-radius: 5px;
}

.nav-external {
    margin-left: auto;
    color: #777b85;
    font-size: 12px;
}

.nav-count {
    min-width: 19px;
    margin-left: auto;
    padding: 4px 6px;
    border-radius: 999px;
    background: #8c3b3b;
    color: #fff;
    font-size: 8px;
    font-weight: 850;
    text-align: center;
}

.notification-center-list {
    display: grid;
    gap: 8px;
    max-width: 1100px;
}

.notification-center-read-all .secondary-button:disabled {
    border-color: var(--line);
    color: var(--muted);
    cursor: default;
    opacity: .85;
}

.notification-center-list form {
    margin: 0;
}

.notification-center-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-left: 4px solid #705523;
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.notification-center-item.critical {
    border-left-color: #c55353;
}

.notification-center-item.unread {
    background: color-mix(in srgb, var(--card) 90%, #238264);
}

.notification-center-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #777b85;
}

.notification-center-item.unread .notification-center-dot {
    background: #73bf69;
}

.notification-center-copy strong,
.notification-center-copy small {
    display: block;
}

.notification-center-copy strong {
    font-size: 11px;
}

.notification-center-copy small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
}

.settings-state.danger {
    background: #3a2021;
    color: #ff7373;
}

.sidebar-foot {
    border-top-color: #2f3339;
}

.status-badge.down {
    background: #fde8e7;
    color: var(--danger);
}

.status-badge.pending {
    background: #fff1dc;
    color: var(--warn);
}

.inventory-freshness {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #edf1ee;
    color: #8a938e;
    font-size: 9px;
}

.backup-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 7px;
    border-radius: 999px;
    background: #e9edeb;
    color: #65706b;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .055em;
    line-height: 1;
}

.backup-status.large {
    padding: 8px 11px;
    font-size: 10px;
}

.backup-status.pass,
.status-copy.pass {
    background: #e3f6ec;
    color: #207354;
}

.backup-status.warning,
.status-copy.warning {
    background: #fff1dc;
    color: var(--warn);
}

.backup-status.critical,
.status-copy.critical {
    background: #fde8e7;
    color: var(--danger);
}

.backup-status.unknown,
.status-copy.unknown {
    background: #e9edeb;
    color: #65706b;
}

.server-backup-state {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 10px;
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid #edf1ee;
}

.server-backup-state > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
}

.server-backup-state small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.4;
}

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

.storage-summary-grid.without-storage .backup-fleet-summary-card {
    grid-column: 1 / -1;
}

.backup-empty-state {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 86px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
}

.backup-empty-marker {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: #e9edeb;
    color: #65706b;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
}

.backup-empty-state > div {
    min-width: 0;
}

.backup-empty-state strong,
.backup-empty-state p {
    display: block;
    margin: 0;
}

.backup-empty-state strong {
    font-size: 13px;
}

.backup-empty-state p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}

.backup-coverage {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 7px 9px;
    border-radius: 999px;
    background: #e9edeb;
    color: #65706b;
    font-size: 9px;
    font-weight: 800;
}

.storage-summary-card {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
}

.storage-summary-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.storage-summary-card header span:not(.backup-status),
.storage-summary-card header strong,
.storage-summary-card > small {
    display: block;
}

.storage-summary-card header span:not(.backup-status),
.storage-summary-card > small,
.storage-summary-card dt,
.storage-summary-card dd small {
    color: var(--muted);
    font-size: 9px;
}

.storage-summary-card header strong {
    margin-top: 4px;
    font-size: 14px;
}

.storage-summary-card dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 16px 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--line);
}

.storage-summary-card dl div {
    min-width: 0;
    padding: 11px;
    background: var(--card);
}

.backup-verification-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.backup-verification-marker {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: #e9edeb;
    color: #65706b;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
}

.backup-verification-summary > div {
    min-width: 0;
}

.backup-verification-summary strong,
.backup-verification-summary small {
    display: block;
}

.backup-verification-summary strong {
    font-size: 11px;
}

.backup-verification-summary small,
.backup-verification-note,
.backup-capacity-note {
    color: var(--muted);
    font-size: 9px;
    line-height: 1.5;
}

.backup-verification-summary small {
    margin-top: 3px;
}

.backup-verification-note,
.backup-capacity-note {
    margin: 8px 0 0;
}

.backup-capacity-note {
    padding-left: 40px;
}

.storage-summary-card dt,
.storage-summary-card dd,
.storage-summary-card dd small {
    display: block;
}

.storage-summary-card dd {
    margin: 7px 0 0;
    font-size: 13px;
    font-weight: 800;
}

.storage-summary-card dd small {
    margin-top: 4px;
    font-weight: 500;
    line-height: 1.35;
}

.server-alert-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.server-alert-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .055em;
    line-height: 1;
    text-transform: uppercase;
}

.server-alert-count strong {
    font-size: 11px;
}

.server-alert-count.critical {
    border-color: #e5b8b5;
    border-left-color: var(--danger);
    background: #fde8e7;
    color: var(--danger);
}

.server-alert-count.warning {
    border-color: #efd4ab;
    border-left-color: var(--warn);
    background: #fff1dc;
    color: var(--warn);
}

.server-alert-summary + .metric-list {
    margin-top: 14px;
}

.monitoring-content {
    min-height: 100vh;
    padding: 32px 24px;
    background: #0b0c0e;
    color: #d8d9da;
    overflow-x: clip;
}

.monitoring-back-button {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid #3a613f;
    border-radius: 6px;
    background: #1b2f22;
    color: #9cdd8d;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
}

.monitoring-back-button:hover {
    border-color: #73bf69;
    background: #24432d;
    color: #fff;
}

.monitoring-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.monitoring-header h1 {
    margin: 5px 0 9px;
    color: #f3f4f5;
    font-size: clamp(31px, 4vw, 46px);
    letter-spacing: -.045em;
    line-height: 1;
}

.monitoring-header p {
    margin: 0;
    color: #a7a9b4;
}

.monitoring-header-back {
    margin-top: 1px;
}

.monitoring-content .back-link,
.monitoring-content .eyebrow {
    color: #73bf69 !important;
}

.live-metric-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.live-metric-card {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid #2f3339;
    border-radius: 8px;
    background: #181b1f;
}

.live-metric-card span,
.live-metric-card small {
    display: block;
    color: #a7a9b4;
}

.live-metric-card span {
    font-size: 10px;
    font-weight: 750;
}

.live-metric-card strong {
    display: block;
    margin: 9px 0 4px;
    color: #f3f4f5;
    font-size: 21px;
    letter-spacing: -.03em;
}

.live-metric-card small {
    font-size: 9px;
}

.live-metric-card.availability.healthy {
    border-color: #2f6d48;
    background: linear-gradient(135deg, #183525, #181b1f);
}

.live-metric-card.availability.healthy strong {
    color: #73bf69;
}

.live-metric-card.availability.down {
    border-color: #8c3b3b;
    background: linear-gradient(135deg, #3a2021, #181b1f);
}

.live-metric-card.availability.down strong {
    color: #ff7373;
}

.monitoring-panel {
    overflow: hidden;
    border: 1px solid #2f3339;
    border-radius: 10px;
    background: #111217;
}

.backup-monitoring-panel {
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid #2f3339;
    border-radius: 10px;
    background: #111217;
}

.backup-empty-state-detail {
    margin-bottom: 18px;
    border-color: #2f3339;
    border-radius: 10px;
    background: #111217;
    color: #f3f4f5;
}

.backup-empty-state-detail .backup-empty-marker {
    background: #22252b;
    color: #a7a9b4;
}

.backup-empty-state-detail .eyebrow {
    margin-bottom: 5px;
}

.backup-empty-state-detail p:not(.eyebrow) {
    color: #a7a9b4;
}

.backup-monitoring-panel > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 17px 18px;
    border-bottom: 1px solid #2f3339;
}

.backup-monitoring-panel h2 {
    margin: 4px 0 5px;
    color: #f3f4f5;
    font-size: 18px;
}

.backup-monitoring-panel > header small,
.backup-detail-grid article > span,
.backup-detail-grid article > small,
.backup-capacity-row span:not(.backup-status),
.backup-capacity-row small {
    color: #a7a9b4;
    font-size: 9px;
}

.backup-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #2f3339;
}

.backup-detail-grid article {
    min-width: 0;
    padding: 15px 18px;
    background: #181b1f;
}

.backup-detail-grid article > span,
.backup-detail-grid article > strong,
.backup-detail-grid article > small {
    display: block;
}

.backup-detail-grid article > strong {
    margin: 8px 0 5px;
    color: #f3f4f5;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.backup-detail-note {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 18px;
    border-top: 1px solid #2f3339;
    background: #15171b;
}

.backup-detail-note p {
    margin: 0;
    color: #a7a9b4;
    font-size: 9px;
    line-height: 1.5;
}

.backup-detail-grid article > strong.status-copy {
    width: fit-content;
    padding: 5px 7px;
    border-radius: 999px;
    font-size: 9px;
}

.backup-capacity-row {
    display: grid;
    grid-template-columns: minmax(190px, 2fr) repeat(3, minmax(110px, 1fr)) auto;
    align-items: center;
    gap: 18px;
    padding: 15px 18px;
    border-top: 1px solid #2f3339;
    background: #111217;
}

.backup-capacity-row div > span,
.backup-capacity-row div > strong,
.backup-capacity-row div > small {
    display: block;
}

.backup-capacity-row div > strong {
    margin-top: 5px;
    color: #f3f4f5;
    font-size: 12px;
}

.backup-capacity-row div > small {
    margin-top: 4px;
}

.monitoring-panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 18px;
    border-bottom: 1px solid #2f3339;
}

.monitoring-panel-head h2 {
    margin: 4px 0 0;
    color: #f3f4f5;
    font-size: 18px;
}

.range-picker {
    display: flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid #2f3339;
    border-radius: 6px;
    background: #181b1f;
}

.range-picker a {
    min-width: 44px;
    padding: 7px 9px;
    border-radius: 4px;
    color: #a7a9b4;
    text-align: center;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
}

.range-picker a:hover {
    background: #22252b;
    color: #fff;
}

.range-picker a.active {
    background: #2f6d48;
    color: #fff;
}

.grafana-panel-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
    background: #0b0c0e;
}

.grafana-panel {
    position: relative;
    height: 310px;
    overflow: hidden;
    border: 1px solid #2f3339;
    border-radius: 8px;
    background: #181b1f;
}

.grafana-panel.status {
    grid-column: span 2;
}

.grafana-panel.wide {
    grid-column: span 4;
}

.grafana-panel.half {
    grid-column: span 5;
}

.grafana-panel.network {
    grid-column: span 6;
}

.grafana-panel.swap {
    grid-column: span 4;
}

.grafana-panel-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #111217;
}

.grafana-expand-button {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid #454950;
    border-radius: 5px;
    background: rgba(24, 27, 31, .94);
    color: #d8d9da;
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}

.grafana-expand-button:hover,
.grafana-expand-button:focus-visible {
    border-color: #73bf69;
    background: #24432d;
    color: #fff;
    outline: none;
}

body.grafana-panel-expanded {
    overflow: hidden;
}

.grafana-panel.is-expanded {
    position: fixed;
    inset: 12px;
    z-index: 1000;
    width: auto;
    height: auto;
    border-color: #4b5159;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .82), 0 20px 60px rgba(0, 0, 0, .6);
}

.grafana-panel.is-expanded .grafana-expand-button {
    top: 12px;
    right: 12px;
    border-color: #73bf69;
    background: #1b2f22;
    color: #fff;
    font-size: 10px;
}

.monitoring-empty {
    padding: 38px 24px;
    background: #181b1f;
    color: #d8d9da;
    text-align: center;
}

.monitoring-empty strong {
    font-size: 15px;
}

.monitoring-empty p {
    max-width: 620px;
    margin: 8px auto 0;
    color: #a7a9b4;
    font-size: 11px;
    line-height: 1.6;
}

.inventory-disclosure {
    overflow: hidden;
    margin-top: 16px;
    border: 1px solid #2f3339;
    border-radius: 8px;
    background: #111217;
}

.inventory-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

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

.inventory-disclosure > summary strong,
.inventory-disclosure > summary small {
    display: block;
}

.inventory-disclosure > summary strong {
    font-size: 12px;
}

.inventory-disclosure > summary small {
    margin-top: 4px;
    color: #a7a9b4;
    font-size: 9px;
}

.inventory-disclosure[open] > summary {
    border-bottom: 1px solid #2f3339;
}

.inventory-content {
    padding: 18px;
}

.monitoring-content .detail-card,
.monitoring-content .service-list,
.monitoring-content .history-list {
    border-color: #2f3339;
    background: #181b1f;
}

.monitoring-content .detail-card span,
.monitoring-content .detail-card small,
.monitoring-content .history-list small {
    color: #a7a9b4;
}

.monitoring-content .detail-card strong,
.monitoring-content .section-heading h2 {
    color: #f3f4f5;
}

.monitoring-content .service-list > div,
.monitoring-content .history-list > div {
    border-bottom-color: #2f3339;
}

.monitoring-content .alert-row {
    border-color: #2f3339;
    border-left-color: var(--warn);
    background: #181b1f;
}

.monitoring-content .alert-row.critical {
    border-left-color: var(--danger);
}

.monitoring-content .alert-row p {
    color: #a7a9b4;
}

@media (max-width: 1200px) {
    .live-metric-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .backup-capacity-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .grafana-panel.status,
    .grafana-panel.wide,
    .grafana-panel.half,
    .grafana-panel.network,
    .grafana-panel.swap {
        grid-column: span 1;
    }
}

@media (max-width: 760px) {
    .monitoring-content {
        padding: 28px 14px;
    }

    .monitoring-header {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .monitoring-header-back {
        order: -1;
        width: 100%;
        text-align: center;
    }

    .monitoring-panel-head {
        display: block;
    }

    .live-metric-grid {
        grid-template-columns: 1fr 1fr;
    }

    .storage-summary-grid,
    .backup-detail-grid,
    .backup-capacity-row {
        grid-template-columns: 1fr;
    }

    .storage-summary-card dl {
        grid-template-columns: 1fr;
    }

    .backup-empty-state {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .backup-coverage {
        width: 100%;
        margin-left: 53px;
        text-align: center;
    }

    .backup-capacity-note {
        padding-left: 0;
    }

    .backup-detail-note {
        align-items: flex-start;
    }

    .backup-monitoring-panel > header {
        align-items: flex-start;
    }

    .range-picker {
        overflow-x: auto;
        margin-top: 14px;
    }

    .grafana-panel-grid {
        grid-template-columns: 1fr;
        padding: 8px;
    }

    .grafana-panel {
        height: 300px;
    }

    .grafana-panel.is-expanded {
        inset: 6px;
        height: auto;
    }

    .grafana-expand-button [data-grafana-expand-label] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .grafana-panel.is-expanded .grafana-expand-button [data-grafana-expand-label] {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .inventory-content {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .live-metric-grid {
        grid-template-columns: 1fr;
    }
}

body[data-theme="light"] {
    color-scheme: light;
}

body[data-theme="dark"] {
    --ink: #f3f4f5;
    --muted: #a7a9b4;
    --line: #2f3339;
    --paper: #0b0c0e;
    --card: #181b1f;
    --green: #73bf69;
    --green-2: #73bf69;
    --mint: #1b2f22;
    --navy: #111217;
    --shadow: 0 18px 50px rgba(0, 0, 0, .34);
    color-scheme: dark;
    background: var(--paper);
    color: var(--ink);
}

.preference-panel {
    display: grid;
    gap: 11px;
    padding-bottom: 16px;
}

.preference-row {
    display: grid;
    gap: 6px;
    margin: 0;
}

.preference-label {
    color: #8f929b;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.segmented-control {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    padding: 3px;
    border: 1px solid #2f3339;
    border-radius: 7px;
    background: #181b1f;
}

.preference-option {
    min-width: 0;
    padding: 7px 5px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #a7a9b4;
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
}

.preference-option:hover,
.preference-option:focus-visible {
    background: #22252b;
    color: #fff;
    outline: none;
}

.preference-option.active {
    background: #2f6d48;
    color: #fff;
}

.preference-option:disabled {
    cursor: progress;
    opacity: .65;
}

.sidebar-foot .identity {
    padding: 15px 0;
    border-top: 1px solid #2f3339;
}

.logout-form {
    padding-top: 12px;
    border-top: 1px solid #2f3339;
    text-align: center;
}

.logout-button {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    text-align: center;
}

.logout-button:hover,
.logout-button:focus-visible {
    background: #1b1d21;
    color: #fff;
    outline: none;
}

body[data-theme="dark"] .main-content:not(.monitoring-content) {
    background: var(--paper);
    color: var(--ink);
}

body[data-theme="dark"] .header-state,
body[data-theme="dark"] .summary-card:not(.accent),
body[data-theme="dark"] .server-card,
body[data-theme="dark"] .trust-strip > div,
body[data-theme="dark"] .alert-row,
body[data-theme="dark"] .detail-card,
body[data-theme="dark"] .service-list,
body[data-theme="dark"] .history-list,
body[data-theme="dark"] .empty-state,
body[data-theme="dark"] .settings-section {
    background: var(--card);
    border-color: var(--line);
}

body[data-theme="dark"] .summary-card.accent {
    border-color: #2f6d48;
    background: linear-gradient(135deg, #183525, #111217);
}

body[data-theme="dark"] .summary-card.accent span,
body[data-theme="dark"] .summary-card.accent small {
    color: #a7c4b5;
}

body[data-theme="dark"] .server-card:hover {
    border-color: #4b7658;
}

body[data-theme="dark"] .server-card {
    color: var(--ink);
}

body[data-theme="dark"] .server-monogram {
    background: #1b2f22;
    color: #9cdd8d;
}

body[data-theme="dark"] .metric-list div,
body[data-theme="dark"] .inventory-freshness,
body[data-theme="dark"] .server-backup-state,
body[data-theme="dark"] .backup-verification-summary,
body[data-theme="dark"] .service-list > div,
body[data-theme="dark"] .history-list > div {
    border-color: #2f3339;
}

body[data-theme="dark"] .backup-status.pass,
body[data-theme="dark"] .status-copy.pass {
    background: #183525;
    color: #73bf69;
}

body[data-theme="dark"] .backup-status.warning,
body[data-theme="dark"] .status-copy.warning {
    background: #3a2d18;
    color: #f2a93b;
}

body[data-theme="dark"] .backup-status.critical,
body[data-theme="dark"] .status-copy.critical {
    background: #3a2021;
    color: #ff7373;
}

body[data-theme="dark"] .backup-status.unknown,
body[data-theme="dark"] .status-copy.unknown {
    background: #272a30;
    color: #b6b9c1;
}

body[data-theme="dark"] .backup-verification-marker {
    background: #272a30;
    color: #b6b9c1;
}

body[data-theme="dark"] .status-badge {
    background: #272a30;
    color: #b6b9c1;
}

body[data-theme="dark"] .status-badge.healthy {
    background: #183525;
    color: #73bf69;
}

body[data-theme="dark"] .status-badge.pending,
body[data-theme="dark"] .status-badge.stale {
    background: #3a2d18;
    color: #f2a93b;
}

body[data-theme="dark"] .status-badge.down {
    background: #3a2021;
    color: #ff7373;
}

body[data-theme="dark"] .status-badge.provider {
    background: #1e2938;
    color: #91a9ca;
}

body[data-theme="dark"] .status-badge.planned {
    background: #2d243b;
    color: #b99cda;
}

body[data-theme="dark"] .server-alert-count.critical {
    border-color: #70413f;
    border-left-color: #e0524d;
    background: #3a2021;
    color: #ff7373;
}

body[data-theme="dark"] .server-alert-count.warning {
    border-color: #69502a;
    border-left-color: #d58a22;
    background: #3a2d18;
    color: #f2a93b;
}

body[data-theme="dark"] .trust-strip {
    background: var(--line);
    border-color: var(--line);
}

body[data-theme="dark"] .trust-icon {
    background: #1b2f22;
    color: #9cdd8d;
}

body[data-theme="dark"] .alert-button {
    border: 1px solid #3a613f;
    background: #1b2f22;
    color: #9cdd8d;
}

body[data-theme="dark"] .pulse {
    box-shadow: 0 0 0 5px rgba(53, 170, 119, .16);
}

body[data-theme="light"] .monitoring-content {
    background: var(--paper);
    color: var(--ink);
}

body[data-theme="light"] .monitoring-header h1,
body[data-theme="light"] .monitoring-panel-head h2,
body[data-theme="light"] .live-metric-card strong,
body[data-theme="light"] .monitoring-content .detail-card strong,
body[data-theme="light"] .monitoring-content .section-heading h2 {
    color: var(--ink);
}

body[data-theme="light"] .monitoring-header p,
body[data-theme="light"] .live-metric-card span,
body[data-theme="light"] .live-metric-card small,
body[data-theme="light"] .monitoring-empty p,
body[data-theme="light"] .inventory-disclosure > summary small,
body[data-theme="light"] .monitoring-content .detail-card span,
body[data-theme="light"] .monitoring-content .detail-card small,
body[data-theme="light"] .monitoring-content .history-list small,
body[data-theme="light"] .monitoring-content .alert-row p {
    color: var(--muted);
}

body[data-theme="light"] .monitoring-back-button {
    border-color: #a9cdb8;
    background: #e8f5ee;
    color: #185c45;
}

body[data-theme="light"] .monitoring-back-button:hover {
    border-color: #238264;
    background: #dff2e9;
    color: #10241d;
}

body[data-theme="light"] .live-metric-card,
body[data-theme="light"] .monitoring-panel,
body[data-theme="light"] .backup-monitoring-panel,
body[data-theme="light"] .grafana-panel,
body[data-theme="light"] .monitoring-empty,
body[data-theme="light"] .inventory-disclosure,
body[data-theme="light"] .monitoring-content .detail-card,
body[data-theme="light"] .monitoring-content .service-list,
body[data-theme="light"] .monitoring-content .history-list,
body[data-theme="light"] .monitoring-content .alert-row {
    border-color: var(--line);
    background: var(--card);
}

body[data-theme="light"] .backup-monitoring-panel > header,
body[data-theme="light"] .backup-detail-note,
body[data-theme="light"] .backup-capacity-row {
    border-color: var(--line);
    background: var(--card);
}

body[data-theme="light"] .backup-monitoring-panel h2,
body[data-theme="light"] .backup-detail-grid article > strong,
body[data-theme="light"] .backup-capacity-row div > strong {
    color: var(--ink);
}

body[data-theme="light"] .backup-monitoring-panel > header small,
body[data-theme="light"] .backup-detail-note p,
body[data-theme="light"] .backup-detail-grid article > span,
body[data-theme="light"] .backup-detail-grid article > small,
body[data-theme="light"] .backup-capacity-row span:not(.backup-status),
body[data-theme="light"] .backup-capacity-row small {
    color: var(--muted);
}

body[data-theme="light"] .backup-detail-grid {
    background: var(--line);
}

body[data-theme="light"] .backup-detail-grid article {
    background: var(--card);
}

body[data-theme="light"] .live-metric-card.availability.healthy {
    border-color: #a9cdb8;
    background: linear-gradient(135deg, #e8f5ee, #fff);
}

body[data-theme="light"] .live-metric-card.availability.healthy strong {
    color: #207354;
}

body[data-theme="light"] .live-metric-card.availability.down {
    border-color: #e5b8b5;
    background: linear-gradient(135deg, #fde8e7, #fff);
}

body[data-theme="light"] .live-metric-card.availability.down strong {
    color: var(--danger);
}

body[data-theme="light"] .monitoring-panel-head,
body[data-theme="light"] .inventory-disclosure[open] > summary,
body[data-theme="light"] .monitoring-content .service-list > div,
body[data-theme="light"] .monitoring-content .history-list > div {
    border-color: var(--line);
}

body[data-theme="light"] .range-picker {
    border-color: var(--line);
    background: #f1f4f2;
}

body[data-theme="light"] .range-picker a {
    color: var(--muted);
}

body[data-theme="light"] .range-picker a:hover {
    background: #e5ebe7;
    color: var(--ink);
}

body[data-theme="light"] .range-picker a.active {
    background: #238264;
    color: #fff;
}

body[data-theme="light"] .grafana-panel-grid {
    background: #e9eeea;
}

body[data-theme="light"] .grafana-panel-frame {
    background: #fff;
}

body[data-theme="light"] .grafana-expand-button {
    border-color: #c6d0ca;
    background: rgba(255, 255, 255, .94);
    color: var(--ink);
}

body[data-theme="light"] .grafana-expand-button:hover,
body[data-theme="light"] .grafana-expand-button:focus-visible {
    border-color: #238264;
    background: #e8f5ee;
    color: #10241d;
}

body[data-theme="light"] .monitoring-content .alert-row {
    border-left-color: var(--warn);
}

body[data-theme="light"] .monitoring-content .alert-row.critical {
    border-left-color: var(--danger);
}

body[data-theme="dark"].auth-shell .auth-panel {
    background: #0b0c0e;
}

body[data-theme="dark"].auth-shell .auth-card {
    border-color: #2f3339;
    background: #181b1f;
    color: #f3f4f5;
}

body[data-theme="dark"].auth-shell .form-stack input {
    border-color: #454950;
    background: #111217;
    color: #f3f4f5;
}

body[data-theme="dark"].auth-shell .secret-fallback code,
body[data-theme="dark"].auth-shell .recovery-grid li {
    background: #111217;
}

body[data-theme="dark"].auth-shell .form-divider::before,
body[data-theme="dark"].auth-shell .form-divider::after {
    background: #2f3339;
}

.settings-page-header {
    max-width: 1160px;
}

.settings-workspace {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    max-width: 1160px;
}

.settings-navigation {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
}

.settings-navigation-heading {
    margin: 13px 9px 4px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.settings-navigation-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    padding: 8px 9px;
    border-radius: 7px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.settings-navigation-link:hover,
.settings-navigation-link:focus-visible {
    background: color-mix(in srgb, var(--card) 78%, #238264);
    color: var(--ink);
    outline: none;
}

.settings-navigation-link.active {
    background: #1b2f22;
    color: #9cdd8d;
    box-shadow: inset 3px 0 #73bf69;
}

.settings-navigation-link.disabled {
    cursor: default;
    opacity: .5;
}

.settings-navigation-link small {
    font-size: 7px;
    text-transform: uppercase;
}

.settings-content-pane {
    min-width: 0;
}

.settings-focus-card {
    max-width: none;
    margin-top: 0;
}

.settings-notice {
    max-width: 1100px;
    margin: 0 0 18px;
    padding: 13px 15px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.5;
}

.settings-notice.success {
    border-color: #3a613f;
    background: #1b2f22;
    color: #9cdd8d;
}

.settings-notice.error {
    border-color: #70413f;
    background: #3a2021;
    color: #ff9c98;
}

.settings-notice ul {
    margin: 7px 0 0;
    padding-left: 18px;
}

.settings-section {
    max-width: 1100px;
    margin-top: 18px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
}

.settings-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.settings-overview-card {
    display: grid;
    gap: 7px;
    min-height: 128px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--card) 92%, var(--paper));
    color: var(--ink);
    text-decoration: none;
}

.settings-overview-card:hover {
    border-color: #4b7658;
}

.settings-overview-card span,
.settings-overview-card small {
    color: var(--muted);
    font-size: 9px;
}

.settings-overview-card strong {
    font-size: 28px;
    line-height: 1;
}

.settings-overview-card small {
    align-self: end;
    color: #73bf69;
    font-weight: 750;
}

.settings-overview-card.danger strong {
    color: #ff7373;
}

.notification-safety-banner {
    display: grid;
    gap: 5px;
    margin-top: 18px;
    padding: 13px 14px;
    border: 1px solid #705523;
    border-left: 4px solid #d89628;
    border-radius: 8px;
    background: #332a1d;
    color: #f3c878;
}

.notification-safety-banner strong {
    font-size: 10px;
}

.notification-safety-banner span {
    color: #cdb88f;
    font-size: 9px;
    line-height: 1.5;
}

.settings-subsection {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.settings-subsection > h3 {
    margin: 0 0 7px;
    font-size: 15px;
}

.settings-subsection > p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.55;
}

.notification-rule-form,
.notification-recipient-form {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--card) 94%, var(--paper));
}

.notification-rule-form + .notification-rule-form {
    margin-top: 10px;
}

.notification-option-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.notification-option-grid fieldset {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.notification-option-grid legend {
    padding: 0 4px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
}

.compact-grid {
    margin-top: 14px;
}

.check-field.align-end {
    align-self: end;
    min-height: 42px;
}

.recipient-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.recipient-grid .check-field {
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.recipient-grid b,
.recipient-grid small {
    display: block;
}

.recipient-grid b {
    color: var(--ink);
    font-size: 9px;
}

.recipient-grid small {
    margin-top: 3px;
    font-size: 8px;
}

.settings-readonly-row,
.device-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.settings-readonly-row strong,
.settings-readonly-row small,
.device-row strong,
.device-row small {
    display: block;
}

.settings-readonly-row strong,
.device-row strong {
    font-size: 10px;
}

.settings-readonly-row small,
.device-row small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 8px;
}

.server-gate-list {
    display: grid;
    gap: 7px;
}

.server-gate-row {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--card) 94%, var(--paper));
}

.server-gate-row summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 13px;
    cursor: pointer;
    list-style: none;
}

.server-gate-row summary::-webkit-details-marker {
    display: none;
}

.server-gate-row summary strong,
.server-gate-row summary small {
    display: block;
}

.server-gate-row summary strong {
    font-size: 10px;
}

.server-gate-row summary small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 8px;
}

.server-gate-form {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
    align-items: end;
    gap: 10px;
    padding: 13px;
    border-top: 1px solid var(--line);
}

.server-gate-form .check-field {
    grid-column: 1 / -1;
}

.push-registration-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--card) 92%, var(--paper));
}

.push-registration-card[hidden],
[data-push-iphone-only][hidden],
[data-push-current-active][hidden] {
    display: none !important;
}

.push-registration-card p {
    margin: 0;
    color: var(--muted);
    font-size: 9px;
}

.push-registration-card p[data-state="success"] { color: #73bf69; }
.push-registration-card p[data-state="error"] { color: #ff7373; }

.push-registration-card .primary-button:disabled {
    cursor: not-allowed;
    filter: grayscale(.7);
    opacity: .45;
}

.notification-option-grid.preference-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.device-row .text-button {
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
}

.notification-preference-form > .check-field {
    margin: 14px 0;
}

.notification-preference-form > .secondary-button {
    width: max-content;
    background: transparent;
}

.settings-empty-state {
    margin: 18px 0 0;
    padding: 24px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    color: var(--muted);
    text-align: center;
    font-size: 10px;
}

.settings-table-wrap {
    overflow-x: auto;
    margin-top: 18px;
}

.settings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px;
}

.settings-table th,
.settings-table td {
    padding: 11px 9px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

.settings-table th {
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
}

.delivery-status {
    display: inline-block;
    padding: 5px 7px;
    border-radius: 999px;
    background: #272a30;
    color: #b6b9c1;
    font-size: 7px;
    font-weight: 850;
    text-transform: uppercase;
}

.delivery-status.accepted { background: #183525; color: #73bf69; }
.delivery-status.failed { background: #3a2021; color: #ff7373; }
.delivery-status.pending, .delivery-status.sending { background: #332a1d; color: #f3c878; }

.settings-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.settings-section-heading h2 {
    margin: 5px 0 7px;
    font-size: 22px;
    letter-spacing: -.03em;
}

.settings-section-heading p:not(.eyebrow) {
    max-width: 700px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.settings-state {
    flex: 0 0 auto;
    padding: 7px 9px;
    border-radius: 999px;
    background: #272a30;
    color: #b6b9c1;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.settings-state.active {
    background: #183525;
    color: #73bf69;
}

.settings-state.warning {
    background: #332a1d;
    color: #f3c878;
}

.security-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.security-method {
    display: flex;
    gap: 13px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--card) 92%, var(--paper));
}

.security-method.active {
    border-color: #3a613f;
}

.security-method.planned {
    opacity: .78;
}

.security-method-icon {
    display: grid;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    place-items: center;
    border-radius: 8px;
    background: #2a2d33;
    color: #d8d9da;
    font-size: 9px;
    font-weight: 900;
}

.security-method.active .security-method-icon {
    background: #1b2f22;
    color: #9cdd8d;
}

.security-method > div {
    min-width: 0;
    flex: 1;
}

.security-method-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.security-method-title h3 {
    margin: 0;
    font-size: 12px;
}

.security-method-title span {
    color: var(--green);
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
}

.security-method p,
.security-method small {
    display: block;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.55;
}

.security-method p {
    margin: 6px 0 0;
}

.security-method small {
    margin-top: 7px;
}

.settings-boundary-note {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-left: 3px solid #3a613f;
    border-radius: 5px;
    background: #1b2f22;
    color: #b6c7bd;
    font-size: 9px;
    line-height: 1.6;
}

.settings-form {
    margin-top: 18px;
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--card) 92%, var(--paper));
}

.settings-toggle-row strong,
.settings-toggle-row small {
    display: block;
}

.settings-toggle-row strong {
    font-size: 11px;
}

.settings-toggle-row small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.5;
}

.switch-control {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.switch-control input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.switch-control > span {
    position: relative;
    width: 34px;
    height: 19px;
    border-radius: 999px;
    background: #454950;
    transition: .16s ease;
}

.switch-control > span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    content: "";
    transition: .16s ease;
}

.switch-control input:checked + span {
    background: #2f6d48;
}

.switch-control input:checked + span::after {
    transform: translateX(15px);
}

.switch-control input:focus-visible + span {
    outline: 2px solid #73bf69;
    outline-offset: 2px;
}

.switch-control b {
    font-size: 9px;
}

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

.settings-form-grid .span-2 {
    grid-column: span 2;
}

.field {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--ink);
    font-size: 10px;
    font-weight: 750;
}

.field > span {
    color: var(--muted);
}

.field input,
.field select {
    width: 100%;
    min-height: 42px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: none;
    background: color-mix(in srgb, var(--card) 82%, var(--paper));
    color: var(--ink);
    font: inherit;
    font-weight: 600;
}

.field input:focus,
.field select:focus {
    border-color: #4b7658;
    box-shadow: 0 0 0 3px rgba(115, 191, 105, .12);
}

.field small {
    color: var(--muted);
    font-size: 8px;
    font-weight: 500;
    line-height: 1.45;
}

.check-field {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 9px;
}

.check-field input {
    width: 15px;
    height: 15px;
    margin: 0;
}

.settings-sensitive-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.settings-sensitive-action .primary-button {
    min-height: 42px;
}

.smtp-test-panel {
    display: grid;
    grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr);
    align-items: end;
    gap: 20px;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.smtp-test-panel > div strong,
.smtp-test-panel > div small {
    display: block;
}

.smtp-test-panel > div strong {
    font-size: 11px;
}

.smtp-test-panel > div small {
    margin-top: 6px;
    color: var(--muted);
    font-size: 9px;
}

.smtp-test-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.smtp-test-form .secondary-button {
    min-height: 42px;
    cursor: pointer;
    font: inherit;
    font-size: 10px;
}

.smtp-test-form .secondary-button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.smtp-summary-card {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card) 94%, var(--paper));
}

.smtp-summary-heading,
.smtp-summary-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.smtp-summary-heading strong,
.smtp-summary-heading small {
    display: block;
}

.smtp-summary-heading strong {
    font-size: 14px;
}

.smtp-summary-heading small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
}

.smtp-test-state {
    padding: 6px 8px;
    border-radius: 999px;
    background: #332a1d;
    color: #f3c878;
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
}

.smtp-test-state.success {
    background: #183525;
    color: #73bf69;
}

.smtp-test-state.failure {
    background: #3a2021;
    color: #ff9c98;
}

.smtp-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.smtp-summary-grid > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.smtp-summary-grid dt {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.smtp-summary-grid dd,
.smtp-summary-grid small {
    display: block;
    overflow-wrap: anywhere;
}

.smtp-summary-grid dd {
    margin: 7px 0 0;
    font-size: 10px;
    font-weight: 800;
}

.smtp-summary-grid small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 500;
    line-height: 1.4;
}

.smtp-summary-actions {
    justify-content: flex-start;
}

.smtp-summary-actions .secondary-button,
.smtp-delete-disclosure > summary {
    min-height: 40px;
    padding: 11px 14px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

.smtp-delete-disclosure > summary {
    border: 1px solid #70413f;
    border-radius: 9px;
    color: #ff9c98;
    list-style: none;
}

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

.smtp-delete-form {
    display: grid;
    gap: 12px;
    max-width: 520px;
    margin-top: 12px;
    padding: 15px;
    border: 1px solid #70413f;
    border-radius: 10px;
    background: #261a1b;
}

.smtp-delete-form p {
    margin: 0;
    color: #d9b4b2;
    font-size: 9px;
    line-height: 1.55;
}

.smtp-danger-button {
    min-height: 42px;
    border: 0;
    border-radius: 9px;
    background: #a43b37;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 850;
}

.smtp-editor {
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card) 94%, var(--paper));
}

.smtp-summary-card + .smtp-editor:not([open]) {
    display: none;
}

.smtp-editor > summary {
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

.smtp-editor > summary strong,
.smtp-editor > summary small {
    display: block;
}

.smtp-editor > summary strong {
    font-size: 12px;
}

.smtp-editor > summary small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
}

.smtp-editor[open] > summary {
    border-bottom: 1px solid var(--line);
}

.smtp-editor .settings-form {
    margin: 0;
    padding: 18px;
}

.smtp-editor-actions {
    display: grid;
    gap: 8px;
    min-width: 180px;
}

.smtp-editor-actions a {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
}

[data-single-submit][aria-busy="true"] {
    opacity: .72;
}

[data-single-submit] button:disabled {
    cursor: progress;
}

body[data-theme="light"] .settings-boundary-note {
    border-left-color: #238264;
    background: #e8f5ee;
    color: #185c45;
}

body[data-theme="light"] .settings-notice.success {
    border-color: #a9cdb8;
    background: #e8f5ee;
    color: #185c45;
}

body[data-theme="light"] .settings-notice.error {
    border-color: #e5b8b5;
    background: #fde8e7;
    color: #9b302c;
}

body[data-theme="light"] .smtp-delete-form {
    background: #fff5f4;
}

body[data-theme="light"] .smtp-delete-form p {
    color: #8f4541;
}

body[data-theme="light"] .security-method-icon {
    background: #eef2ef;
    color: #46504b;
}

body[data-theme="light"] .security-method.active .security-method-icon {
    background: #e8f5ee;
    color: #185c45;
}

body[data-theme="light"] .settings-state.active {
    background: #e3f6ec;
    color: #207354;
}

body[data-theme="light"] .settings-navigation-link.active {
    background: #e8f5ee;
    color: #185c45;
    box-shadow: inset 3px 0 #238264;
}

body[data-theme="light"] .notification-safety-banner {
    border-color: #efd4ab;
    border-left-color: var(--warn);
    background: #fff1dc;
    color: #8b570f;
}

body[data-theme="light"] .notification-safety-banner span {
    color: #855f2d;
}

body[data-theme="light"] .delivery-status {
    background: #eef2ef;
    color: #65706b;
}

body[data-theme="light"] .delivery-status.accepted { background: #e3f6ec; color: #207354; }
body[data-theme="light"] .delivery-status.failed { background: #fde8e7; color: #b5423d; }
body[data-theme="light"] .delivery-status.pending,
body[data-theme="light"] .delivery-status.sending { background: #fff1dc; color: #b87314; }

@media (max-width: 980px) {
    .settings-workspace {
        grid-template-columns: 1fr;
    }

    .settings-navigation {
        position: static;
        display: flex;
        overflow-x: auto;
        gap: 5px;
    }

    .settings-navigation-heading {
        display: none;
    }

    .settings-navigation-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 760px) {
    .settings-section {
        padding: 18px;
    }

    .settings-section-heading,
    .settings-toggle-row {
        display: grid;
    }

    .settings-state {
        width: max-content;
    }

    .security-method-grid,
    .settings-form-grid,
    .settings-sensitive-action,
    .smtp-test-panel,
    .smtp-test-form,
    .settings-overview-grid,
    .notification-option-grid,
    .recipient-grid,
    .server-gate-form {
        grid-template-columns: 1fr;
    }

    .settings-form-grid .span-2 {
        grid-column: span 1;
    }

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

    .smtp-summary-heading,
    .smtp-summary-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .smtp-summary-actions .secondary-button,
    .smtp-delete-disclosure,
    .smtp-delete-disclosure > summary {
        width: 100%;
        text-align: center;
    }

    .push-registration-card,
    .settings-readonly-row,
    .device-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .smtp-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .sidebar-foot {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        margin-top: 22px;
    }

    .preference-panel {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .sidebar-foot .identity {
        min-width: 0;
        padding: 12px 0 0;
    }

    .logout-form {
        padding: 12px 0 0;
    }

    .logout-button {
        width: auto;
        white-space: nowrap;
    }

    .main-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .main-nav .nav-link {
        min-height: 42px;
    }

    .main-nav .nav-link.disabled {
        display: none;
    }
}

@media (max-width: 480px) {
    .preference-panel {
        gap: 7px;
    }
}

.daily-report-history,
.daily-report-server-list {
    display: grid;
    gap: 14px;
}

.device-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.daily-report-history-row {
    display: grid;
    grid-template-columns: minmax(150px, .6fr) minmax(260px, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    color: var(--ink);
    text-decoration: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.daily-report-history-row:hover,
.daily-report-history-row:focus-visible {
    border-color: #73bf69;
}

.daily-report-history-row span:first-child {
    display: grid;
    gap: 4px;
}

.daily-report-history-row small,
.daily-report-history-metrics {
    color: var(--muted);
}

.daily-report-server {
    padding: 22px;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.daily-report-server > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.daily-report-server h2,
.daily-report-server h3,
.daily-report-server p {
    margin: 0;
}

.daily-report-server header p,
.daily-report-server footer {
    color: var(--muted);
}

.daily-report-server-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.daily-report-server-grid section {
    padding: 16px;
    background: color-mix(in srgb, var(--card) 86%, var(--paper));
    border-radius: 12px;
}

.daily-report-server-grid h3 {
    margin-bottom: 10px;
    font-size: .88rem;
}

.daily-report-server-grid dl,
.daily-report-server-grid dl div {
    margin: 0;
}

.daily-report-server-grid dl div {
    display: grid;
    grid-template-columns: minmax(70px, auto) 1fr;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}

.daily-report-server-grid dt {
    color: var(--muted);
}

.daily-report-server-grid dd {
    margin: 0;
    text-align: right;
}

.recommendation-increase {
    color: #b84444;
    font-weight: 700;
}

.recommendation-watch {
    color: #9a681e;
    font-weight: 700;
}

.daily-report-server footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 18px;
    font-size: .82rem;
}

@media (max-width: 980px) {
    .daily-report-server-grid {
        grid-template-columns: 1fr;
    }
}

/* iPhone Home Screen PWA pilot */
.pwa-onboarding {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card) 92%, #238264);
}

.pwa-onboarding-steps {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pwa-onboarding-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
}

.pwa-step-number {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #3a613f;
    border-radius: 50%;
    background: #1b2f22;
    color: #9cdd8d;
    font-size: 12px;
    font-weight: 850;
}

.pwa-onboarding-step strong {
    display: block;
    color: var(--ink);
    font-size: 13px;
}

.pwa-onboarding-step p,
.pwa-install-instructions,
.pwa-privacy-list {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

.pwa-onboarding-step p {
    margin: 6px 0 0;
}

.pwa-install-instructions,
.pwa-privacy-list {
    margin: 9px 0 0;
    padding-left: 20px;
}

.pwa-install-instructions li + li,
.pwa-privacy-list li + li {
    margin-top: 5px;
}

.pwa-state-confirmed {
    color: #9cdd8d !important;
    font-weight: 750;
}

.push-registration-card {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.4fr) auto;
    align-items: end;
}

.push-registration-card .push-device-name,
.push-registration-card .push-explicit-consent {
    min-width: 0;
}

.push-registration-card .push-explicit-consent {
    min-height: 44px;
    align-items: center;
}

.push-registration-card > p {
    grid-column: 1 / -1;
    min-height: 18px;
}

.push-registration-card p[data-state="warning"] { color: #f3c878; }
.push-registration-card p[data-state="inactive"] { color: var(--muted); }

.device-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.device-row-actions form {
    margin: 0;
}

.device-row-actions .secondary-button,
.device-row-actions .text-button {
    min-height: 44px;
    margin: 0;
}

@media (max-width: 720px) {
    .push-registration-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .push-registration-card > p {
        grid-column: auto;
    }
}

@media (max-width: 720px) {
    html,
    body {
        min-height: 100%;
        background: var(--paper);
    }

    .app-shell,
    .auth-shell,
    .auth-grid,
    .monitoring-content {
        min-height: 100dvh;
    }

    .app-shell {
        display: block;
        padding-bottom: calc(74px + env(safe-area-inset-bottom));
    }

    .sidebar {
        position: static;
        height: auto;
        min-height: 72px;
        padding-top: max(14px, env(safe-area-inset-top));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: 14px;
        padding-left: max(16px, env(safe-area-inset-left));
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .sidebar .brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }

    .sidebar .brand small {
        display: none;
    }

    .main-nav {
        position: fixed;
        z-index: 1000;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        margin: 0;
        padding: 7px max(8px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        border-top: 1px solid #2f3339;
        background: rgba(17, 18, 23, .97);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .28);
    }

    .main-nav .nav-link {
        position: relative;
        min-height: 56px;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 5px 4px;
        font-size: 11px;
        line-height: 1.1;
        text-align: center;
    }

    .main-nav .nav-link.active {
        box-shadow: inset 0 3px #73bf69;
    }

    .main-nav .nav-icon {
        width: 25px;
        height: 25px;
        font-size: 9px;
    }

    .main-nav .nav-count {
        position: absolute;
        top: 5px;
        right: 18%;
        margin: 0;
    }

    .main-nav .nav-grafana,
    .main-nav .nav-link.disabled {
        display: none;
    }

    .sidebar-foot {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .sidebar-foot .preference-panel {
        display: none;
    }

    .sidebar-foot .identity {
        padding: 0;
    }

    .sidebar-foot .identity > span:last-child {
        display: none;
    }

    .logout-form {
        padding: 0;
    }

    .logout-button {
        min-height: 44px;
        padding: 9px 10px;
        border: 1px solid #2f3339;
        border-radius: 8px;
    }

    .main-content,
    .monitoring-content {
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
        padding-left: max(16px, env(safe-area-inset-left));
    }

    .auth-intro {
        min-height: 220px;
        gap: 24px;
        padding-top: max(28px, env(safe-area-inset-top));
        padding-right: max(22px, env(safe-area-inset-right));
        padding-left: max(22px, env(safe-area-inset-left));
    }

    .auth-intro h1 {
        margin-bottom: 12px;
        font-size: 34px;
    }

    .auth-intro p {
        margin-bottom: 0;
        font-size: 13px;
    }

    .auth-panel {
        padding-right: max(18px, env(safe-area-inset-right));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
        padding-left: max(18px, env(safe-area-inset-left));
    }

    .auth-card input,
    .auth-card button,
    .primary-button,
    .secondary-button,
    .settings-navigation-link,
    .text-button {
        min-height: 44px;
    }

    .settings-navigation-link,
    .settings-section p,
    .settings-section small,
    .push-registration-card p,
    .device-row small,
    .notification-center-copy small {
        font-size: 12px;
        line-height: 1.5;
    }

    .settings-readonly-row strong,
    .device-row strong,
    .notification-center-copy strong {
        font-size: 13px;
    }

    .settings-section {
        padding: 16px;
    }

    .pwa-onboarding {
        padding: 15px;
    }

    .pwa-onboarding-step {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
    }

    .pwa-step-number {
        width: 30px;
        height: 30px;
    }

    .pwa-onboarding-step p,
    .pwa-install-instructions,
    .pwa-privacy-list {
        font-size: 12px;
    }

    .push-registration-card,
    .device-row {
        width: 100%;
    }

    .push-registration-card .primary-button,
    .device-row-actions,
    .device-row-actions form,
    .device-row-actions button {
        width: 100%;
    }

    .device-row-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* GTT Digital mobile refinement and interface preferences */
.monitoring-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 44px;
    padding: 10px 16px;
}

.settings-interface-card + .settings-focus-card {
    margin-top: 18px;
}

.settings-preference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.settings-preference-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--card) 92%, var(--paper));
}

.settings-preference-card h3 {
    margin: 0;
    font-size: 13px;
}

.settings-preference-card p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.5;
}

.settings-preference-card .preference-option {
    min-height: 44px;
    font-size: 10px;
}

body[data-theme="light"] .settings-preference-card .segmented-control {
    border-color: var(--line);
    background: #eef2ef;
}

body[data-theme="light"] .settings-preference-card .preference-option {
    color: var(--muted);
}

body[data-theme="light"] .settings-preference-card .preference-option:hover,
body[data-theme="light"] .settings-preference-card .preference-option:focus-visible {
    background: #dfe7e2;
    color: var(--ink);
}

body[data-theme="light"] .settings-preference-card .preference-option.active {
    background: #238264;
    color: #fff;
}

@media (max-width: 720px) {
    .sidebar {
        position: sticky;
        top: 0;
        z-index: 900;
    }

    .auth-shell {
        overflow-x: hidden;
    }

    .auth-grid {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-intro,
    .auth-panel,
    .auth-card {
        min-width: 0;
        max-width: 100%;
    }

    .auth-panel {
        display: block;
        padding-top: 18px;
    }

    .auth-card {
        width: 100%;
        margin: 0 auto;
        padding: 22px;
        overflow-wrap: anywhere;
    }

    .auth-card h2 {
        font-size: clamp(23px, 6.2vw, 26px);
        line-height: 1.1;
    }

    .auth-card .form-stack {
        gap: 13px;
        margin-top: 20px;
    }

    .monitoring-content {
        padding-top: 24px;
    }
}

@media (max-width: 760px) {
    .daily-report-history-row,
    .daily-report-server > header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .daily-report-history-row > :last-child,
    .daily-report-server > header .status-badge {
        grid-column: 1 / -1;
    }

    .daily-report-server {
        padding: 18px;
    }

    .daily-report-server-grid dl div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .daily-report-server-grid dd {
        text-align: left;
    }

    .monitoring-back-button {
        width: 100%;
    }

    .settings-preference-grid,
    .settings-preference-card {
        grid-template-columns: 1fr;
    }

    .settings-preference-card {
        gap: 12px;
    }
}

@media (max-width: 600px) {
    .auth-intro {
        min-height: 0;
        padding-top: max(18px, env(safe-area-inset-top));
        padding-bottom: 16px;
    }

    .auth-intro > div:nth-child(2) {
        display: none;
    }

    .auth-intro .security-note {
        font-size: 10px;
    }

    .auth-panel {
        padding-top: 16px;
    }

    .auth-card {
        padding: 20px;
        border-radius: 18px;
    }
}

@media (max-width: 720px) and (max-height: 600px) and (orientation: landscape) {
    .auth-grid {
        grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    }

    .auth-intro,
    .auth-panel {
        min-height: 100dvh;
    }

    .auth-intro {
        padding: max(16px, env(safe-area-inset-top)) 24px max(16px, env(safe-area-inset-bottom));
    }

    .auth-intro h1 {
        margin: 8px 0 0;
        font-size: 28px;
    }

    .auth-intro > div:nth-child(2) > p:not(.eyebrow) {
        display: none;
    }

    .auth-panel {
        overflow-y: auto;
        padding: 16px max(18px, env(safe-area-inset-right)) 16px 18px;
    }

    .auth-card {
        padding: 18px;
    }

    .auth-card h2 {
        margin: 5px 0 6px;
        font-size: 24px;
    }

    .auth-card .form-stack {
        gap: 10px;
        margin-top: 14px;
    }

    .auth-card .privacy-copy {
        margin-top: 12px;
    }
}

/* Mobile application chrome: existing visual language, compact navigation. */
.mobile-menu-disclosure,
.mobile-quick-nav,
.mobile-context-bar {
    display: none;
}

@media (max-width: 720px) {
    .app-shell {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    .sidebar {
        position: sticky;
        z-index: 1200;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px auto;
        gap: 8px;
    }

    .sidebar .brand {
        min-width: 0;
        overflow: hidden;
    }

    .sidebar .brand > span:last-child,
    .sidebar .brand strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .main-nav {
        display: none;
    }

    .mobile-menu-disclosure {
        display: block;
        align-self: center;
        width: 44px;
        height: 44px;
    }

    .mobile-menu-toggle {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        list-style: none;
        border: 1px solid #2f3339;
        border-radius: 8px;
        background: transparent;
        color: #b7cbc3;
        cursor: pointer;
        font-size: 20px;
        line-height: 1;
    }

    .mobile-menu-toggle::-webkit-details-marker {
        display: none;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus-visible,
    .mobile-menu-disclosure[open] .mobile-menu-toggle {
        border-color: #3a613f;
        background: #1d3d32;
        color: #fff;
        outline: none;
    }

    .mobile-menu-toggle:focus-visible {
        box-shadow: 0 0 0 3px rgba(115, 191, 105, .28);
    }

    .mobile-menu-panel {
        position: fixed;
        z-index: 1210;
        top: var(--mobile-shell-bottom, 80px);
        right: 12px;
        left: 12px;
        display: grid;
        max-height: calc(100dvh - var(--mobile-shell-bottom, 80px) - 20px);
        gap: 6px;
        padding: 10px;
        overflow-y: auto;
        border: 1px solid #2f3339;
        border-radius: 12px;
        background: rgba(17, 18, 23, .99);
        box-shadow: 0 16px 36px rgba(0, 0, 0, .38);
    }

    .mobile-menu-disclosure:not([open]) .mobile-menu-panel {
        display: none;
    }

    .mobile-menu-panel .nav-link {
        position: relative;
        min-height: 48px;
        margin: 0;
    }

    .mobile-menu-panel .nav-link.active {
        box-shadow: inset 3px 0 #73bf69;
    }

    .mobile-menu-panel .nav-count {
        margin-left: auto;
    }

    .sidebar-foot {
        min-width: 0;
        justify-self: end;
    }

    .mobile-quick-nav {
        position: fixed;
        z-index: 1000;
        bottom: max(10px, env(safe-area-inset-bottom));
        left: 50%;
        display: grid;
        width: min(calc(100% - 24px), 460px);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding: 7px;
        border: 1px solid #2f3339;
        border-radius: 14px;
        background: rgba(17, 18, 23, .97);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .28);
        transform: translate(-50%, 0);
        transition: transform .2s ease, visibility .2s ease;
    }

    .mobile-quick-nav.is-hidden,
    .mobile-keyboard-active .mobile-quick-nav,
    .mobile-menu-open .mobile-quick-nav {
        visibility: hidden;
        transform: translate(-50%, calc(100% + 24px));
    }

    .mobile-quick-nav .nav-link {
        position: relative;
        min-height: 56px;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 5px 4px;
        font-size: 11px;
        line-height: 1.1;
        text-align: center;
    }

    .mobile-quick-nav .nav-link.active {
        box-shadow: inset 0 3px #73bf69;
    }

    .mobile-quick-nav .nav-icon {
        width: 25px;
        height: 25px;
        font-size: 9px;
    }

    .mobile-quick-nav .nav-count {
        position: absolute;
        top: 5px;
        right: 18%;
        margin: 0;
    }

    .mobile-context-bar {
        position: absolute;
        z-index: 1190;
        top: 100%;
        right: 0;
        left: 0;
        display: flex;
        min-height: 52px;
        align-items: center;
        padding: 4px max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left));
        border-top: 1px solid #202329;
        border-bottom: 1px solid #2f3339;
        background: rgba(17, 18, 23, .97);
        pointer-events: none;
    }

    .mobile-context-back {
        width: auto;
        min-width: 44px;
        min-height: 44px;
        gap: 7px;
        padding: 9px 12px;
        overflow: hidden;
        white-space: nowrap;
        pointer-events: auto;
        transition: width .2s ease, min-width .2s ease, padding .2s ease;
    }

    .mobile-context-back [data-context-back-label] {
        max-width: 180px;
        overflow: hidden;
        opacity: 1;
        transition: max-width .2s ease, opacity .15s ease;
    }

    .mobile-context-bar.is-compact .mobile-context-back {
        width: 44px;
        min-width: 44px;
        padding-right: 0;
        padding-left: 0;
    }

    .mobile-context-bar.is-compact .mobile-context-back [data-context-back-label] {
        max-width: 0;
        opacity: 0;
    }

    .desktop-context-back {
        display: none;
    }

    .has-mobile-context .main-content,
    .has-mobile-context .monitoring-content {
        padding-top: 76px;
    }

    .auth-card .form-stack input,
    .auth-card .form-stack select,
    .auth-card .form-stack textarea,
    .field input.ios-no-zoom-field {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }
}

@media (max-width: 380px) {
    .sidebar {
        padding-right: max(12px, env(safe-area-inset-right));
        padding-left: max(12px, env(safe-area-inset-left));
    }

    .sidebar .brand {
        gap: 8px;
    }

    .logout-button {
        padding-right: 8px;
        padding-left: 8px;
    }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    .mobile-quick-nav,
    .mobile-context-back,
    .mobile-context-back [data-context-back-label] {
        transition: none;
    }
}