/* UpRankers Webspace & Mail Panel – design revision 1.1
   Precise implementations of the Security, Statistics, Backups,
   Settings and Support concept screens. */

:root {
    --sidebar-width: 220px;
    --topbar-height: 60px;
    --radius: 10px;
    --radius-sm: 8px;
    --v11-card: #0b1927;
    --v11-card-2: #0d1d2d;
    --v11-line: #1b3044;
    --v11-purple: #8b5cf6;
    --v11-purple-bright: #9b6cff;
}

body {
    font-size: 13px;
    background:
        radial-gradient(circle at 72% -10%, rgba(75, 34, 137, .08), transparent 34%),
        linear-gradient(180deg, #06111d 0%, #071421 100%);
}

.sidebar {
    padding: 13px 12px 14px;
    background: linear-gradient(180deg, rgba(5, 17, 29, .99), rgba(4, 15, 26, .99));
}

.brand {
    min-height: 50px;
    padding: 0 6px 12px;
    margin-bottom: 3px;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.brand-copy strong {
    font-size: 16px;
}

.brand-copy small {
    text-transform: none;
    letter-spacing: 0;
    font-size: 9px;
}

.sidebar-nav {
    gap: 1px;
    padding: 4px 0 14px;
}

.nav-item {
    min-height: 37px;
    padding: 7px 11px;
    border-radius: 7px;
    font-size: 12px;
}

.nav-item.active {
    background: linear-gradient(90deg, #6e36cd, #6730c7);
}

.nav-item.active::before {
    display: none;
}

.nav-item .icon {
    width: 16px;
    height: 16px;
}

.sidebar-profile {
    display: block;
    padding: 10px;
    border-radius: 9px;
}

.sidebar-profile-main {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 15px;
    align-items: center;
    gap: 9px;
}

.sidebar-profile-main strong,
.sidebar-profile-main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-profile-main strong {
    font-size: 11px;
}

.sidebar-profile-main small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.sidebar-account-link {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--border-soft);
    color: #a78bfa;
    font-size: 10px;
}

.sidebar-account-link .icon {
    width: 13px;
    height: 13px;
}

.topbar {
    height: var(--topbar-height);
    grid-template-columns: minmax(180px, 1fr) minmax(360px, 510px) minmax(270px, 1fr);
    padding: 0 30px;
    border-bottom-color: rgba(95, 126, 158, .11);
    background: rgba(5, 16, 27, .82);
}

.topbar-search {
    height: 36px;
    border-radius: 7px;
    background: rgba(6, 20, 33, .82);
}

.topbar-search kbd {
    display: none;
}

.topbar-profile {
    min-width: 160px;
}

.content {
    padding: 8px 36px 18px;
}

.page-heading {
    min-height: 54px;
    margin-bottom: 12px;
    align-items: center;
}

.page-heading h1 {
    margin-bottom: 4px;
    font-size: 25px;
    font-weight: 670;
}

.page-heading p {
    font-size: 12px;
}

.card {
    border-color: var(--v11-line);
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0)),
        linear-gradient(145deg, #0d1b29, #091725);
    box-shadow: none;
}

.section-gap {
    margin-top: 12px;
}

.app-footer {
    padding: 10px 36px 14px;
    border-top: 0;
    font-size: 10px;
}

.app-footer nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.app-footer a:hover {
    color: var(--text-soft);
}

.badge-purple {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .16);
    border-color: rgba(139, 92, 246, .25);
}

.badge-danger {
    color: #fda4af;
    background: rgba(244, 63, 94, .12);
    border-color: rgba(244, 63, 94, .22);
}

.v11-icon-box {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    color: #a78bfa;
    background: rgba(139, 92, 246, .13);
    border: 1px solid rgba(139, 92, 246, .1);
}

.v11-icon-box.small {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.v11-icon-box.muted {
    color: var(--muted);
    background: rgba(148, 163, 184, .08);
    border-color: var(--border-soft);
}

.v11-icon-box .icon {
    width: 19px;
    height: 19px;
}

.v11-icon-box.small .icon {
    width: 16px;
    height: 16px;
}

.v11-card-title {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-soft);
}

.v11-card-title h2 {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
}

.v11-card-title h2 span {
    margin-left: 5px;
    padding: 3px 6px;
    border-radius: 5px;
    color: #c4b5fd;
    background: rgba(139, 92, 246, .15);
    font-size: 8px;
}

.v11-card-title small {
    color: var(--muted);
    font-size: 9px;
}

.v11-card-title > button,
.v11-card-title > span button {
    border: 0;
    background: transparent;
    color: #a78bfa;
    font-size: 10px;
    cursor: pointer;
}

.v11-title-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: var(--muted);
    background: rgba(255,255,255,.03);
}

.v11-title-icon .icon {
    width: 14px;
}

.v11-card-button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(139, 92, 246, .2);
    border-radius: 6px;
    color: #bda8ff;
    background: rgba(139, 92, 246, .09);
    font-size: 10px;
    cursor: pointer;
    transition: .18s ease;
}

.v11-card-button:hover,
.v11-wide-link:hover {
    color: #ddd6fe;
    background: rgba(139, 92, 246, .15);
}

.v11-card-button.compact {
    min-height: 31px;
}

.v11-wide-link {
    width: calc(100% - 28px);
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 14px 12px;
    padding: 6px 10px;
    border: 1px solid rgba(139, 92, 246, .13);
    border-radius: 6px;
    color: #a78bfa;
    background: rgba(139, 92, 246, .055);
    font-size: 10px;
    cursor: pointer;
}

.v11-text-action {
    padding: 0;
    border: 0;
    color: #a78bfa;
    background: transparent;
    font-size: 10px;
    cursor: pointer;
}

.v11-segmented {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: rgba(255,255,255,.015);
}

.v11-segmented button {
    min-height: 29px;
    padding: 5px 12px;
    border: 0;
    border-radius: 5px;
    color: var(--muted);
    background: transparent;
    font-size: 10px;
    cursor: pointer;
}

.v11-segmented button.active {
    color: #ddd6fe;
    background: rgba(139, 92, 246, .13);
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .5);
}

.v11-table-wrap {
    min-width: 0;
    overflow-x: auto;
}

.v11-table-wrap table {
    min-width: 0;
}

.v11-table-wrap th,
.v11-table-wrap td {
    padding: 8px 12px;
    font-size: 9px;
}

.v11-table-wrap th {
    text-transform: none;
    letter-spacing: 0;
    background: transparent;
    font-size: 9px;
    font-weight: 500;
}

.v11-table-wrap .icon-button.small {
    width: 25px;
    height: 25px;
    border: 0;
    background: transparent;
}

.v11-table-wrap .icon-button.small .icon {
    width: 13px;
}

.v11-table-footer {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border-top: 1px solid var(--border-soft);
    color: var(--muted);
    font-size: 9px;
}

.v11-online-dot {
    width: 6px;
    height: 6px;
    display: inline-block;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 7px rgba(52, 211, 153, .5);
}

/* --------------------------------------------------------------------------
   Security
   -------------------------------------------------------------------------- */

.security-feature-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.security-feature-card {
    min-height: 160px;
    display: flex;
    flex-direction: column;
    padding: 12px;
}

.security-feature-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
}

.security-feature-head h2 {
    min-height: 31px;
    margin: 1px 0 4px;
    font-size: 11px;
    line-height: 1.25;
}

.security-feature-head .badge {
    min-height: 18px;
    padding: 2px 7px;
    font-size: 8px;
}

.security-feature-card p,
.security-feature-card small {
    margin: 11px 0 0;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.4;
}

.security-feature-card small {
    margin-top: 4px;
}

.security-feature-card .v11-card-button {
    width: 100%;
    margin-top: auto;
}

.security-main-grid,
.security-bottom-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.18fr 1.32fr;
    gap: 12px;
}

.security-main-grid > .card {
    min-height: 276px;
}

.security-overview-body {
    min-height: 190px;
    display: grid;
    grid-template-columns: 155px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 14px 8px;
}

.security-score-ring {
    position: relative;
    width: 145px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from 210deg, #20c7c0 0 21%, #8b5cf6 21% var(--security-score), #253448 var(--security-score) 100%);
}

.security-score-ring::after {
    content: "";
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: #0b1927;
    box-shadow: inset 0 0 25px rgba(0,0,0,.25);
}

.security-score-ring > div {
    position: relative;
    z-index: 1;
    text-align: center;
}

.security-score-ring strong,
.security-score-ring span {
    display: block;
}

.security-score-ring strong {
    font-size: 27px;
    line-height: 1;
}

.security-score-ring span {
    margin-top: 5px;
    color: var(--text-soft);
    font-size: 9px;
}

.security-score-copy > strong {
    font-size: 10px;
}

.security-score-copy > p {
    margin: 8px 0 10px;
    color: var(--muted);
    font-size: 9px;
}

.security-score-copy ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.security-score-copy li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 9px;
}

.security-score-copy li span::before {
    content: "";
    width: 6px;
    height: 6px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--green);
}

.security-score-copy li b {
    color: var(--text-soft);
    font-weight: 500;
}

.security-event-list {
    padding: 0 14px;
}

.security-event-row {
    min-height: 41px;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-soft);
}

.security-event-row:last-child {
    border-bottom: 0;
}

.security-event-icon {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.security-event-icon .icon {
    width: 12px;
}

.security-event-icon.tone-success {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .12);
}

.security-event-icon.tone-purple {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .13);
}

.security-event-icon.tone-danger {
    color: #fda4af;
    background: rgba(244, 63, 94, .12);
}

.security-event-row strong,
.security-event-row small {
    display: block;
}

.security-event-row strong {
    font-size: 9px;
}

.security-event-row small,
.security-event-row time {
    color: var(--muted);
    font-size: 8px;
}

.security-event-row time {
    text-align: right;
}

.security-ip-title {
    padding-right: 10px;
}

.security-ip-title .v11-segmented button {
    min-height: 28px;
    padding: 5px 10px;
}

.security-ip-table table {
    width: 100%;
}

.security-ip-table th,
.security-ip-table td {
    padding: 8px 10px;
}

.v11-split-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px 12px;
    border-top: 1px solid var(--border-soft);
}

.security-bottom-grid > .card {
    min-height: 226px;
}

.certificate-layout {
    min-height: 145px;
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 14px 6px;
}

.certificate-lock {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--text-soft);
    background: rgba(255,255,255,.035);
    border: 1px solid var(--border-soft);
}

.certificate-lock .icon {
    width: 24px;
    height: 24px;
}

.certificate-layout dl,
.v11-kv-list {
    margin: 0;
}

.certificate-layout dl > div,
.v11-kv-list > div {
    min-height: 22px;
    display: grid;
    grid-template-columns: minmax(100px, .9fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(120,146,176,.09);
    font-size: 8.5px;
}

.certificate-layout dl > div:last-child,
.v11-kv-list > div:last-child {
    border-bottom: 0;
}

.certificate-layout dt,
.v11-kv-list dt {
    color: var(--muted);
}

.certificate-layout dd,
.v11-kv-list dd {
    margin: 0;
    color: var(--text-soft);
    overflow-wrap: anywhere;
}

.v11-kv-list {
    min-height: 151px;
    padding: 8px 14px 4px;
}

.security-recommendation-list {
    padding: 0 14px;
}

.security-recommendation-row {
    min-height: 39px;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-soft);
}

.security-recommendation-row > span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--muted);
    background: rgba(255,255,255,.035);
}

.security-recommendation-row > span .icon {
    width: 12px;
}

.security-recommendation-row strong,
.security-recommendation-row small {
    display: block;
}

.security-recommendation-row strong {
    font-size: 8.5px;
}

.security-recommendation-row small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 7.5px;
}

.security-recommendation-row button {
    border: 0;
    color: #a78bfa;
    background: transparent;
    font-size: 8px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Statistics
   -------------------------------------------------------------------------- */

.stats-heading-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-date {
    min-width: 190px;
    justify-content: space-between;
}

.stats-metric-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.stats-metric-card {
    position: relative;
    min-height: 111px;
    padding: 11px 12px 9px;
    overflow: hidden;
}

.stats-metric-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-soft);
    font-size: 10px;
}

.stats-metric-heading .v11-icon-box {
    width: 29px;
    height: 29px;
}

.stats-metric-heading .v11-icon-box .icon {
    width: 15px;
}

.stats-metric-value {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 5px;
    margin-top: 7px;
}

.stats-metric-value strong {
    font-size: 18px;
    letter-spacing: -.02em;
}

.stats-metric-value em {
    font-size: 9px;
    font-style: normal;
    white-space: nowrap;
}

.trend-up {
    color: #4ade80;
}

.trend-down {
    color: #f87171;
}

.stats-metric-card > small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 8px;
}

.stats-sparkline {
    width: calc(100% + 4px);
    height: 24px;
    margin: 3px -2px -4px;
    overflow: visible;
}

.stats-sparkline polyline {
    fill: none;
    stroke: #8b5cf6;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px rgba(139,92,246,.45));
}

.stats-mini-progress {
    height: 5px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 20px;
    background: #17283a;
}

.stats-mini-progress span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #7245d4, #9b6cff);
}

.stats-chart-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.stats-chart-card {
    min-height: 233px;
    overflow: hidden;
}

.stats-chart-legend {
    padding: 7px 14px 0;
    color: var(--muted);
    font-size: 8px;
}

.stats-chart-legend i {
    width: 6px;
    height: 6px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--purple);
}

.stats-chart-canvas {
    height: 150px;
    padding: 0 7px;
}

.stats-chart-canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.stats-chart-card .v11-wide-link {
    min-height: 27px;
    margin-bottom: 8px;
    border: 0;
    background: transparent;
}

.stats-detail-grid {
    display: grid;
    grid-template-columns: .95fr .95fr 1.12fr 1fr;
    gap: 12px;
}

.stats-list-card {
    min-height: 190px;
    overflow: hidden;
}

.stats-list-head,
.stats-list-row,
.stats-spike-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px 65px;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
}

.stats-list-head {
    min-height: 28px;
    color: var(--muted);
    font-size: 8px;
}

.stats-list-row,
.stats-spike-row {
    min-height: 25px;
    border-top: 1px solid rgba(120,146,176,.08);
    font-size: 8.5px;
}

.stats-list-row b,
.stats-spike-row b,
.stats-spike-row time {
    color: var(--text-soft);
    font-size: 8px;
    font-weight: 500;
    text-align: right;
}

.folder-entry {
    display: flex;
    align-items: center;
    gap: 5px;
}

.folder-entry .icon {
    width: 12px;
    color: #fbbf24;
}

.stats-list-card .v11-wide-link {
    min-height: 26px;
    margin-top: 4px;
    margin-bottom: 6px;
    border: 0;
    background: transparent;
}

.stats-source-row {
    min-height: 25px;
    display: grid;
    grid-template-columns: 90px minmax(50px, 1fr) 48px 38px;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-top: 1px solid rgba(120,146,176,.08);
    font-size: 8px;
}

.stats-source-row > span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.stats-source-row > span .icon {
    width: 11px;
}

.stats-source-row b,
.stats-source-row em {
    color: var(--text-soft);
    font-size: 8px;
    font-style: normal;
    font-weight: 500;
    text-align: right;
}

.stats-source-bar {
    height: 5px;
    overflow: hidden;
    border-radius: 20px;
    background: #17283a;
}

.stats-source-bar i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #8b5cf6;
}

.stats-spike-row > span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.stats-spike-row > span .icon {
    width: 12px;
}

.tone-danger {
    color: #fb7185;
}

.tone-warning {
    color: #fbbf24;
}

.tone-purple {
    color: #a78bfa;
}

.stats-events-card {
    min-height: 152px;
    overflow: hidden;
}

.stats-events-card .v11-table-wrap th,
.stats-events-card .v11-table-wrap td {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Backups
   -------------------------------------------------------------------------- */

.backup-metric-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.backup-metric-card {
    min-height: 113px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 13px;
}

.backup-metric-card small,
.backup-metric-card strong,
.backup-metric-card em {
    display: block;
}

.backup-metric-card small {
    color: var(--muted);
    font-size: 9px;
}

.backup-metric-card strong {
    margin-top: 6px;
    font-size: 19px;
    line-height: 1.18;
}

.backup-metric-card strong b {
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.backup-metric-card em {
    margin-top: 7px;
    color: #4ade80;
    font-size: 8px;
    font-style: normal;
}

.backup-metric-card em.muted {
    color: var(--muted);
}

.backup-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.35fr) minmax(310px, 1fr);
    gap: 12px;
}

.backup-table-card {
    min-height: 382px;
    overflow: hidden;
}

.backup-table-card .v11-table-wrap th,
.backup-table-card .v11-table-wrap td {
    padding: 8px 10px;
}

.backup-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.backup-type .icon {
    width: 13px;
    color: #60a5fa;
}

.backup-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.backup-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.backup-status.ok i {
    background: var(--green);
}

.backup-status.error i {
    background: var(--red);
}

.backup-actions {
    white-space: nowrap;
}

.backup-table-card > .v11-wide-link {
    margin-top: 8px;
    border: 0;
    background: transparent;
}

.backup-side-stack {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
}

.backup-side-card {
    min-height: 185px;
    overflow: hidden;
}

.backup-plan-list,
.backup-target-list {
    padding: 0 14px;
}

.backup-plan-list > div,
.backup-target-list > div {
    min-height: 43px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-soft);
}

.backup-plan-list strong,
.backup-plan-list small,
.backup-target-list strong,
.backup-target-list small {
    display: block;
}

.backup-plan-list strong,
.backup-target-list strong {
    font-size: 9px;
}

.backup-plan-list small,
.backup-target-list small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 8px;
}

.backup-plan-list em {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-soft);
    font-size: 8px;
    font-style: normal;
}

.backup-plan-list em i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
}

.backup-side-card .v11-wide-link {
    min-height: 27px;
    margin-bottom: 7px;
    border: 0;
    background: transparent;
}

.backup-target-list > div {
    min-height: 52px;
}

.backup-target-list .stats-mini-progress {
    margin-top: 5px;
}

.target-check,
.target-empty {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #4ade80;
    border: 1px solid rgba(74,222,128,.6);
}

.target-check .icon {
    width: 11px;
}

.target-empty {
    border-color: var(--muted);
}

.backup-bottom-grid {
    display: grid;
    grid-template-columns: .92fr 1.05fr 1.28fr;
    gap: 12px;
}

.backup-bottom-grid > .card {
    min-height: 226px;
    overflow: hidden;
}

.restore-point-list,
.backup-job-list {
    padding: 0 14px;
}

.restore-point-list > button {
    width: 100%;
    min-height: 43px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto 14px;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.restore-folder {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #fbbf24;
    background: rgba(251,191,36,.1);
}

.restore-folder .icon {
    width: 14px;
}

.restore-point-list strong,
.restore-point-list small {
    display: block;
}

.restore-point-list strong {
    font-size: 9px;
}

.restore-point-list strong em {
    margin-left: 4px;
    padding: 2px 5px;
    border-radius: 4px;
    color: #c4b5fd;
    background: rgba(139, 92, 246, .15);
    font-size: 7px;
    font-style: normal;
}

.restore-point-list small,
.restore-point-list b {
    color: var(--muted);
    font-size: 8px;
    font-weight: 500;
}

.restore-point-list > button > .icon {
    width: 12px;
    color: var(--muted);
}

.backup-job-list > div {
    min-height: 43px;
    display: grid;
    grid-template-columns: 32px minmax(100px, 1fr) minmax(130px, auto) 25px 25px;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid var(--border-soft);
}

.backup-job-list strong,
.backup-job-list small {
    display: block;
}

.backup-job-list strong {
    font-size: 9px;
}

.backup-job-list small {
    color: var(--muted);
    font-size: 8px;
}

.backup-job-list em {
    color: #4ade80;
    font-size: 7.5px;
    font-style: normal;
}

.backup-lower-card .v11-wide-link {
    min-height: 27px;
    margin-top: 5px;
    margin-bottom: 7px;
    border: 0;
    background: transparent;
}

.restore-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 12px 18px 5px;
}

.restore-steps::before {
    content: "";
    position: absolute;
    left: 52px;
    right: 52px;
    top: 23px;
    height: 1px;
    background: var(--border);
}

.restore-steps span {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 7.5px;
    text-align: center;
}

.restore-steps b {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--text-soft);
    background: #0b1927;
    border: 1px solid var(--border);
    font-size: 9px;
}

.restore-steps span.active b {
    color: white;
    background: var(--purple);
    border-color: var(--purple);
}

.backup-wizard-card > p {
    margin: 3px 14px 8px;
    color: var(--muted);
    font-size: 8px;
}

.restore-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 0 14px 8px;
}

.restore-type-grid button {
    min-height: 54px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: inherit;
    background: rgba(255,255,255,.015);
    text-align: left;
    cursor: pointer;
}

.restore-type-grid button.active {
    border-color: rgba(139,92,246,.55);
    background: rgba(139,92,246,.08);
}

.restore-type-grid button > span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #60a5fa;
    background: rgba(59,130,246,.1);
}

.restore-type-grid button .icon {
    width: 14px;
}

.restore-type-grid strong,
.restore-type-grid small {
    display: block;
}

.restore-type-grid strong {
    font-size: 8.5px;
}

.restore-type-grid small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 7px;
}

.backup-wizard-card .v11-wide-link {
    min-height: 28px;
    margin-bottom: 7px;
    border: 0;
    background: transparent;
}

/* --------------------------------------------------------------------------
   Settings
   -------------------------------------------------------------------------- */

.settings-v11-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.settings-v11-card {
    min-height: 224px;
    display: flex;
    flex-direction: column;
    padding: 12px;
}

.settings-v11-card.settings-v11-short {
    min-height: 183px;
}

.settings-v11-title {
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.settings-v11-title > span {
    color: #a78bfa;
}

.settings-v11-title > span .icon {
    width: 17px;
}

.settings-v11-title h2 {
    margin: 0;
    font-size: 12px;
}

.settings-v11-form {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

.settings-v11-form > label:not(.stack):not(.settings-inline-switch) {
    display: grid;
    grid-template-columns: minmax(95px, .8fr) minmax(0, 1.25fr);
    align-items: center;
    gap: 8px;
    color: var(--text-soft);
    font-size: 8.5px;
}

.settings-v11-card label.stack {
    display: grid;
    gap: 3px;
    color: var(--muted);
    font-size: 8px;
}

.settings-v11-card input,
.settings-v11-card select,
.settings-v11-card textarea {
    min-height: 30px;
    padding: 6px 9px;
    border-radius: 5px;
    font-size: 8.5px;
}

.settings-v11-card input[readonly] {
    color: var(--text-soft);
}

.settings-v11-card .v11-card-button {
    width: 100%;
    margin-top: auto;
}

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

.settings-switch-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.settings-switch-list label,
.settings-inline-switch {
    min-height: 34px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    position: relative;
}

.settings-switch-list strong,
.settings-switch-list small,
.settings-inline-switch strong,
.settings-inline-switch small {
    display: block;
}

.settings-switch-list strong,
.settings-inline-switch strong {
    font-size: 8.5px;
}

.settings-switch-list small,
.settings-inline-switch small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 7.2px;
}

.settings-switch-list input,
.settings-inline-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-switch-list i,
.settings-inline-switch i {
    position: relative;
    width: 29px;
    height: 16px;
    justify-self: end;
    border-radius: 999px;
    background: #304155;
    cursor: pointer;
    transition: .18s ease;
}

.settings-switch-list i::after,
.settings-inline-switch i::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: .18s ease;
}

.settings-switch-list input:checked + i,
.settings-inline-switch input:checked + i {
    background: #7c3aed;
}

.settings-switch-list input:checked + i::after,
.settings-inline-switch input:checked + i::after {
    transform: translateX(13px);
    background: white;
}

.settings-action-row,
.settings-billing-list > div,
.settings-account-list > div,
.settings-count-row {
    min-height: 31px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.settings-action-row strong,
.settings-action-row small,
.settings-account-list strong,
.settings-account-list small {
    display: block;
}

.settings-action-row strong,
.settings-account-list strong {
    font-size: 8.5px;
}

.settings-action-row small,
.settings-account-list small {
    color: var(--muted);
    font-size: 7px;
}

.settings-action-row button,
.settings-billing-list button,
.settings-account-list button,
.settings-button-row button {
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(139,92,246,.16);
    border-radius: 5px;
    color: #bca8ff;
    background: rgba(139,92,246,.09);
    font-size: 7.5px;
    cursor: pointer;
}

.settings-v11-card > p {
    min-height: 32px;
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 8px;
}

.settings-count-row {
    color: var(--text-soft);
    font-size: 8.5px;
}

.settings-count-row b {
    padding: 3px 7px;
    border-radius: 5px;
    background: rgba(255,255,255,.04);
    font-size: 8px;
}

.settings-button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: auto;
}

.settings-button-row button.primary {
    color: white;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.settings-billing-list,
.settings-account-list {
    display: grid;
    gap: 4px;
    flex: 1;
}

.settings-billing-list > div,
.settings-account-list > div {
    color: var(--muted);
    font-size: 7.5px;
}

.settings-billing-list b,
.settings-account-list b {
    color: var(--text-soft);
    font-size: 7.5px;
    font-weight: 500;
}

.settings-billing-list > div {
    display: grid;
    grid-template-columns: minmax(90px, .8fr) minmax(0, 1fr) auto;
}

.settings-account-list .danger {
    color: #fda4af;
    border-color: rgba(244,63,94,.35);
    background: rgba(244,63,94,.06);
}

/* --------------------------------------------------------------------------
   Support
   -------------------------------------------------------------------------- */

.support-summary-grid {
    display: grid;
    grid-template-columns: .95fr .95fr .95fr 1.1fr 1.15fr;
    gap: 12px;
}

.support-summary-card {
    min-height: 142px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-content: start;
    gap: 9px;
    padding: 13px;
}

.support-summary-card > div h2 {
    margin: 1px 0 6px;
    font-size: 12px;
}

.support-summary-card > div p {
    margin: 0;
    color: var(--muted);
    font-size: 8.5px;
    line-height: 1.45;
}

.support-summary-card > div > strong:not(.live-status) {
    display: block;
    margin: 2px 0 1px;
    font-size: 22px;
}

.support-summary-card > button {
    grid-column: 1 / -1;
    align-self: end;
    margin-top: auto;
}

.support-summary-card > .button {
    width: 100%;
    min-height: 33px;
    font-size: 9px;
}

.support-priority-card {
    display: flex;
    flex-direction: column;
}

.support-priority-card ul {
    display: grid;
    gap: 6px;
    margin: 5px 0 0;
    padding: 0;
    list-style: none;
}

.support-priority-card li {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    color: var(--text-soft);
    font-size: 8.5px;
}

.support-priority-card li i,
.live-status i,
.support-priority i,
.support-status-list i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.priority-high {
    background: #ef4444;
}

.priority-medium {
    background: #f59e0b;
}

.priority-low {
    background: #22c55e;
}

.live-status {
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
}

.live-status i {
    display: inline-block;
    margin-right: 5px;
    background: #22c55e;
}

.support-v11-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(280px, 1.05fr);
    gap: 12px;
}

.support-v11-main {
    display: grid;
    gap: 12px;
}

.support-ticket-card {
    min-height: 300px;
    overflow: hidden;
}

.support-ticket-card .v11-card-title select {
    width: 205px;
    min-height: 31px;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 8px;
}

.support-ticket-card .v11-table-wrap th,
.support-ticket-card .v11-table-wrap td {
    padding: 8px 10px;
}

.support-ticket-card table {
    min-width: 780px;
}

.support-priority {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-soft);
}

.support-priority.tone-danger i {
    background: #ef4444;
}

.support-priority.tone-warning i {
    background: #f59e0b;
}

.support-priority.tone-success i {
    background: #22c55e;
}

.support-ticket-actions {
    white-space: nowrap;
}

.v11-pagination {
    display: flex;
    align-items: center;
    gap: 3px;
}

.v11-pagination button {
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 5px;
    color: var(--muted);
    background: transparent;
    font-size: 8px;
    cursor: pointer;
}

.v11-pagination button.active {
    color: white;
    background: #6d28d9;
}

.support-new-ticket {
    min-height: 244px;
    overflow: hidden;
}

.support-ticket-form {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 16px;
    padding: 11px 14px 13px;
}

.support-ticket-fields,
.support-message-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.support-ticket-form label.stack {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 8px;
}

.support-ticket-form input,
.support-ticket-form select,
.support-ticket-form textarea {
    min-height: 31px;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 8.5px;
}

.support-ticket-form textarea {
    min-height: 108px;
}

.support-ticket-form label small {
    color: var(--muted-2);
    font-size: 7px;
}

.support-file-field input[type="file"] {
    padding: 5px;
}

.support-message-field .button {
    min-width: 155px;
    align-self: flex-end;
    margin-top: auto;
}

.support-v11-side {
    display: grid;
    gap: 12px;
    align-content: start;
}

.support-side-card {
    overflow: hidden;
}

.support-faq-list {
    padding: 0 14px;
}

.support-faq-list button {
    width: 100%;
    min-height: 33px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-soft);
    background: transparent;
    font-size: 8.5px;
    text-align: left;
    cursor: pointer;
}

.support-faq-list button .icon {
    width: 11px;
    color: var(--muted);
}

.support-side-card .v11-wide-link {
    min-height: 28px;
    margin-top: 5px;
    margin-bottom: 7px;
    border: 0;
    background: transparent;
}

.support-side-card .v11-card-title > span {
    color: var(--muted);
    font-size: 7.5px;
}

.support-side-card .v11-card-title > span em {
    margin-left: 5px;
    color: #4ade80;
    font-style: normal;
}

.support-side-card .v11-card-title > span em i {
    width: 5px;
    height: 5px;
    display: inline-block;
    margin-right: 4px;
    border-radius: 50%;
    background: #22c55e;
}

.support-status-list {
    padding: 5px 14px 2px;
}

.support-status-list > div {
    min-height: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-soft);
    font-size: 8.5px;
}

.support-status-list span,
.support-status-list b {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.support-status-list span i,
.support-status-list b i {
    background: #22c55e;
}

.support-status-list b {
    color: #4ade80;
    font-size: 8px;
    font-weight: 500;
}

.support-team-card .v11-card-title {
    align-items: flex-start;
}

.support-team-card .v11-card-title h2,
.support-team-card .v11-card-title small {
    display: block;
}

.support-team-card .v11-card-title small {
    margin-top: 3px;
}

.support-team-list {
    padding: 0 14px;
}

.support-team-list > div {
    min-height: 47px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid var(--border-soft);
}

.team-avatar {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: linear-gradient(135deg, #b08968, #6d28d9);
    font-size: 8px;
    font-weight: 700;
}

.support-team-list strong,
.support-team-list small {
    display: block;
}

.support-team-list strong {
    font-size: 8.5px;
}

.support-team-list small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 6.8px;
}

.support-team-list button {
    min-height: 26px;
    padding: 4px 8px;
    border: 1px solid rgba(139,92,246,.28);
    border-radius: 5px;
    color: #bca8ff;
    background: transparent;
    font-size: 7px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 1550px) {
    .content {
        padding-left: 28px;
        padding-right: 28px;
    }

    .security-feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stats-metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .settings-v11-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1220px) {
    .security-main-grid,
    .security-bottom-grid,
    .stats-chart-grid,
    .backup-bottom-grid {
        grid-template-columns: 1fr 1fr;
    }

    .security-main-grid > :last-child,
    .security-bottom-grid > :last-child,
    .backup-bottom-grid > :last-child {
        grid-column: 1 / -1;
    }

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

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

    .backup-main-grid {
        grid-template-columns: 1fr;
    }

    .backup-side-stack {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

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

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

    .support-v11-layout {
        grid-template-columns: 1fr;
    }

    .support-v11-side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1020px) {
    .topbar {
        grid-template-columns: minmax(140px, .7fr) minmax(240px, 1.2fr) auto;
        padding: 0 16px;
    }

    .content {
        padding: 12px 18px 22px;
    }

    .stats-heading-actions {
        flex-wrap: wrap;
    }

    .security-feature-grid,
    .stats-metric-grid,
    .backup-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

@media (max-width: 820px) {
    .page-heading {
        align-items: flex-start;
    }

    .page-actions,
    .stats-heading-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .security-main-grid,
    .security-bottom-grid,
    .stats-chart-grid,
    .stats-detail-grid,
    .backup-bottom-grid,
    .backup-side-stack,
    .settings-v11-grid,
    .support-v11-side {
        grid-template-columns: 1fr;
    }

    .security-main-grid > :last-child,
    .security-bottom-grid > :last-child,
    .backup-bottom-grid > :last-child {
        grid-column: auto;
    }

    .support-ticket-form {
        grid-template-columns: 1fr;
    }

    .support-message-field .button {
        align-self: stretch;
    }

    .app-footer {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 560px) {
    .security-feature-grid,
    .stats-metric-grid,
    .backup-metric-grid,
    .support-summary-grid {
        grid-template-columns: 1fr;
    }

    .security-overview-body {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .security-score-copy {
        width: 100%;
    }

    .settings-dual-field {
        grid-template-columns: 1fr;
    }

    .settings-v11-form > label:not(.stack):not(.settings-inline-switch) {
        grid-template-columns: 1fr;
    }

    .stats-heading-actions > * {
        width: 100%;
    }

    .v11-segmented {
        justify-content: stretch;
    }

    .v11-segmented button {
        flex: 1;
    }

    .restore-type-grid {
        grid-template-columns: 1fr;
    }

    .support-ticket-card .v11-card-title {
        align-items: stretch;
        flex-direction: column;
    }

    .support-ticket-card .v11-card-title select {
        width: 100%;
    }

    .app-footer nav {
        gap: 12px;
    }
}

/* Desktop-density refinements for the 1672 × 941 concept viewport. */
@media (min-width: 1551px) {
    body[data-page="statistics"] .stats-metric-card {
        min-height: 106px;
        height: 106px;
        padding: 9px 10px 7px;
    }

    body[data-page="statistics"] .stats-chart-card {
        min-height: 212px;
        height: 212px;
    }

    body[data-page="statistics"] .stats-chart-card .v11-card-title,
    body[data-page="statistics"] .stats-list-card .v11-card-title,
    body[data-page="statistics"] .stats-events-card .v11-card-title {
        min-height: 35px;
        padding: 7px 12px;
    }

    body[data-page="statistics"] .stats-chart-legend {
        padding-top: 4px;
    }

    body[data-page="statistics"] .stats-chart-canvas {
        height: 124px;
    }

    body[data-page="statistics"] .stats-chart-card .v11-wide-link {
        min-height: 22px;
        margin-top: 0;
        margin-bottom: 5px;
    }

    body[data-page="statistics"] .stats-list-card {
        min-height: 184px;
        height: 184px;
    }

    body[data-page="statistics"] .stats-list-head {
        min-height: 20px;
    }

    body[data-page="statistics"] .stats-list-row,
    body[data-page="statistics"] .stats-source-row,
    body[data-page="statistics"] .stats-spike-row {
        min-height: 21px;
    }

    body[data-page="statistics"] .stats-list-card .v11-wide-link {
        min-height: 20px;
        margin-top: 1px;
        margin-bottom: 3px;
    }

    body[data-page="statistics"] .stats-events-card {
        min-height: 190px;
        height: 190px;
    }

    body[data-page="statistics"] .stats-events-card .v11-table-wrap th,
    body[data-page="statistics"] .stats-events-card .v11-table-wrap td {
        padding: 4px 10px;
        line-height: 1.12;
    }

    body[data-page="statistics"] .stats-events-card .v11-table-footer {
        min-height: 28px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    body[data-page="support"] .support-summary-card {
        min-height: 132px;
        height: 132px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    body[data-page="support"] .support-v11-main {
        grid-template-rows: 300px 258px;
    }

    body[data-page="support"] .support-ticket-card,
    body[data-page="support"] .support-new-ticket {
        min-height: 0;
        height: 100%;
    }

    body[data-page="support"] .support-ticket-card {
        display: flex;
        flex-direction: column;
    }

    body[data-page="support"] .support-ticket-card .v11-card-title {
        min-height: 40px;
        height: 40px;
        padding: 4px 11px;
    }

    body[data-page="support"] .support-ticket-card .v11-table-wrap {
        flex: 1;
        overflow: hidden;
    }

    body[data-page="support"] .support-ticket-card .v11-table-wrap th,
    body[data-page="support"] .support-ticket-card .v11-table-wrap td {
        padding: 5px 8px;
        line-height: 1.12;
    }

    body[data-page="support"] .support-ticket-card .v11-table-footer {
        min-height: 30px;
        padding: 3px 11px;
    }

    body[data-page="support"] .support-new-ticket .v11-card-title {
        min-height: 36px;
        height: 36px;
        padding: 6px 12px;
    }

    body[data-page="support"] .support-ticket-form {
        gap: 12px;
        padding: 8px 12px 10px;
    }

    body[data-page="support"] .support-ticket-fields,
    body[data-page="support"] .support-message-field {
        gap: 6px;
    }

    body[data-page="support"] .support-ticket-form textarea {
        min-height: 86px;
        height: 86px;
    }

    body[data-page="support"] .support-v11-side {
        grid-template-rows: 185px 177px 172px;
    }

    body[data-page="support"] .support-v11-side > .card {
        min-height: 0;
        height: 100%;
    }

    body[data-page="support"] .support-v11-side .v11-card-title {
        min-height: 35px;
        padding: 6px 11px;
    }

    body[data-page="support"] .support-faq-list button {
        min-height: 25px;
    }

    body[data-page="support"] .support-side-card .v11-wide-link {
        min-height: 21px;
        margin-top: 2px;
        margin-bottom: 3px;
    }

    body[data-page="support"] .support-status-list {
        padding-top: 2px;
    }

    body[data-page="support"] .support-status-list > div {
        min-height: 19px;
    }

    body[data-page="support"] .support-team-list > div {
        min-height: 39px;
    }
}

/* Keep the compact mobile topbar inside narrow viewports. */
@media (max-width: 560px) {
    .topbar {
        grid-template-columns: minmax(110px, 1fr) auto;
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .topbar-actions {
        grid-column: 2;
        width: auto;
        min-width: 0;
    }
}

.backup-status.pending i {
    background: var(--orange);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .1);
}

/* Exact desktop density for the 1672 × 941 security and backup concepts. */
@media (min-width: 1551px) {
    body[data-page="security"] .security-ip-table th,
    body[data-page="security"] .security-ip-table td {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    body[data-page="backups"] .backup-table-card .v11-table-wrap th,
    body[data-page="backups"] .backup-table-card .v11-table-wrap td {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    body[data-page="backups"] .backup-bottom-grid > .card {
        min-height: 210px;
    }

    body[data-page="backups"] .restore-point-list > button,
    body[data-page="backups"] .backup-job-list > div {
        min-height: 39px;
    }

    body[data-page="backups"] .restore-steps {
        padding-top: 8px;
        padding-bottom: 3px;
    }

    body[data-page="backups"] .restore-steps::before {
        top: 19px;
    }

    body[data-page="backups"] .restore-type-grid button {
        min-height: 50px;
    }
}

@media (min-width: 1551px) {
    body[data-page="backups"] .backup-table-card .v11-table-wrap th,
    body[data-page="backups"] .backup-table-card .v11-table-wrap td {
        padding-top: 4.5px;
        padding-bottom: 4.5px;
    }
}

@media (min-width: 1551px) {
    body[data-page="backups"] .backup-plan-list > div {
        min-height: 39px;
    }
}

/* Avoid a fractional extra document pixel in the reference desktop viewport. */
@media (min-width: 1551px) {
    .app-footer {
        padding-bottom: 13px;
    }
}