/* ========================================================================
   Backup Control — Design tokens
   ======================================================================== */
:root {
    color-scheme: light;
    font-family: Inter, Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Brand */
    --color-primary: #1a73e8;
    --color-primary-hover: #1666cc;
    --color-primary-soft: #e8f0fe;
    --color-secondary: #00a6a6;
    --color-accent: #246bfd;
    --brand-gradient: linear-gradient(145deg, #246bfd, #00a6a6);

    /* Surfaces */
    --color-surface: #ffffff;
    --color-surface-alt: #fafbfc;
    --color-surface-sunken: #f6f8fb;
    --color-surface-tint: #eef0f3;

    /* Borders */
    --color-border: #dfe3e8;
    --color-border-strong: #c8ced6;
    --color-divider: #edf0f3;

    /* Text */
    --color-text: #202124;
    --color-text-strong: #16325c;
    --color-text-muted: #5f6368;
    --color-text-faint: #8b9299;

    /* Semantic */
    --color-success: #1e8e3e;
    --color-success-soft: #e6f4ea;
    --color-warning: #b06000;
    --color-warning-soft: #fef3e5;
    --color-warning-icon: #f9ab00;
    --color-danger: #c5221f;
    --color-danger-soft: #fce8e6;
    --color-info: #8430ce;
    --color-info-soft: #f3e8fd;

    /* Geometry */
    --radius-xs: 6px;
    --radius-sm: 9px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 999px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgb(30 42 55 / 8%);
    --shadow-md: 0 2px 5px rgb(30 42 55 / 12%), 0 8px 24px rgb(30 42 55 / 6%);
    --shadow-lg: 0 4px 14px rgb(26 115 232 / 25%);
    --shadow-popover: 0 6px 20px rgb(30 42 55 / 18%), 0 2px 6px rgb(30 42 55 / 10%);

    /* Typography */
    --font-display: clamp(28px, 4vw, 40px);
    --font-h1: clamp(26px, 3vw, 32px);
    --font-h2: 20px;
    --font-h3: 16px;
    --font-body: 15px;
    --font-small: 13px;
    --font-micro: 12px;

    /* Layout */
    --topbar-height: 68px;
    --workspace-max: 1500px;
    --workspace-narrow: 1100px;

    /* Legacy aliases (kept until all rules migrate) */
    --blue: var(--color-primary);
    --blue-soft: var(--color-primary-soft);
    --border: var(--color-border);
    --muted: var(--color-text-muted);
    --shadow: var(--shadow-md);

    color: var(--color-text);
    background: var(--color-surface-sunken);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--color-surface-sunken); }
a { color: var(--color-primary); text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: var(--space-2); font-size: var(--font-h1); line-height: 1.12; font-weight: 600; }
h2 { margin-bottom: var(--space-2); font-size: var(--font-h2); font-weight: 600; }
h3 { margin-bottom: var(--space-3); font-size: var(--font-h3); font-weight: 600; }
p { color: var(--color-text-muted); font-size: var(--font-body); }

/* ========================================================================
   Buttons
   ======================================================================== */
button, .button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 42px; padding: 10px 18px;
    border: 0; border-radius: var(--radius-md);
    background: var(--color-primary); color: #fff;
    font: inherit; font-weight: 600; cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}
button:hover, .button:hover { background: var(--color-primary-hover); }
button:active, .button:active { transform: translateY(1px); }
button:focus-visible, .button:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 1px; }
.button.large { min-height: 52px; padding-inline: 24px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.secondary { background: var(--color-surface-tint); color: var(--color-text); }
.secondary:hover { background: var(--color-border); }
.danger { background: var(--color-danger); }
.danger:hover { background: #a01b18; }
.ghost { min-height: 38px; background: transparent; color: var(--color-primary); padding-inline: 10px; }
.ghost:hover { background: var(--color-primary-soft); }
.text-link { font-size: var(--font-small); }
.centered { text-align: center; }

/* ========================================================================
   Icons
   ======================================================================== */
.icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

.icon-button {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px; min-height: 40px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft); color: var(--color-primary);
    padding: 0;
}
.icon-button:hover { background: #d8e6fb; }
.icon-button.subtle { background: transparent; color: var(--color-text-muted); }
.icon-button.subtle:hover { background: var(--color-surface-tint); color: var(--color-text); }
.icon-button.danger { background: var(--color-danger-soft); color: var(--color-danger); }
.icon-button.danger:hover { background: #f8d4d1; }

/* Action row at bottom of a card */
.action-row {
    display: flex; gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-divider);
    justify-content: center;
}

/* ========================================================================
   Flags
   ======================================================================== */
.flag {
    display: inline-block; width: 22px; height: 15px;
    vertical-align: middle; border-radius: 2px;
    background-size: cover; background-position: center;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%);
    flex-shrink: 0;
}
.flag-de { background-image: url("/static/flags/de.svg"); }
.flag-fi { background-image: url("/static/flags/fi.svg"); }
.flag-fr { background-image: url("/static/flags/fr.svg"); }
.flag-ee { background-image: url("/static/flags/ee.svg"); }
.flag-ru { background-image: url("/static/flags/ru.svg"); }
.flag-nl { background-image: url("/static/flags/nl.svg"); }

/* ========================================================================
   Topbar
   ======================================================================== */
.topbar {
    position: sticky; top: 0; z-index: 10;
    min-height: var(--topbar-height); padding: 0 var(--space-7);
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-7);
    background: var(--color-surface); border-top: 3px solid var(--color-secondary);
    box-shadow: var(--shadow-sm);
}
.brand {
    display: inline-flex; align-items: center; gap: var(--space-3);
    color: var(--color-text-strong); font-size: 19px; font-weight: 700;
}
.brand-mark, .public-mark {
    display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: var(--radius-md); color: #fff;
    background: var(--brand-gradient); box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.brand-mark img, .public-mark img { width: 100%; height: 100%; display: block; }

nav { display: flex; gap: var(--space-2); }
/* Never push the user menu off the page: the nav scrolls instead. */
.topbar nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-link {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    color: var(--color-text-muted); font-weight: 600; font-size: var(--font-body);
}
.nav-link:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.nav-link.active { color: var(--color-text); background: var(--color-surface-tint); }

/* ========================================================================
   User menu (avatar + dropdown)
   ======================================================================== */
.user-menu { position: relative; display: inline-block; }
.avatar {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; border-radius: var(--radius-pill);
    color: #fff; font-weight: 700; font-size: 14px;
    background: var(--brand-gradient); border: 0; cursor: pointer;
}
.user-trigger {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
    background: transparent; color: var(--color-text); border: 0;
    border-radius: var(--radius-pill); cursor: pointer; min-height: 44px;
}
.user-trigger:hover { background: var(--color-surface-sunken); }
.user-trigger .name { font-weight: 600; font-size: var(--font-body); }
.user-trigger .icon { color: var(--color-text-muted); }

.popover {
    position: absolute; top: calc(100% + var(--space-2)); right: 0;
    min-width: 220px; padding: var(--space-2);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-popover);
    z-index: 50;
}
.popover[hidden] { display: none; }
.menu-item {
    display: flex; align-items: center; gap: var(--space-3); width: 100%;
    padding: var(--space-3); border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--color-text); text-align: left;
    font: inherit; cursor: pointer; min-height: auto;
}
.menu-item:hover { background: var(--color-surface-sunken); }
.menu-item.danger { color: var(--color-danger); }
.menu-item .icon { color: var(--color-text-muted); }
.menu-item.danger .icon { color: var(--color-danger); }
.menu-divider { height: 1px; background: var(--color-divider); margin: var(--space-1) 0; }
.menu-form { margin: 0; }
.menu-form .menu-item { width: 100%; }

/* ========================================================================
   Workspace
   ======================================================================== */
.workspace { width: min(var(--workspace-max), 100%); margin: 0 auto; padding: var(--space-8) var(--space-7) 64px; }
.workspace.narrow { width: min(var(--workspace-narrow), 100%); }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); margin-bottom: var(--space-8); }
.page-heading p { margin: 0; font-size: var(--font-body); }

/* ========================================================================
   Cards & panels
   ======================================================================== */
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-bottom: var(--space-6); }
.metric-grid.three { grid-template-columns: repeat(3, 1fr); }
.metric-grid.two { grid-template-columns: repeat(2, 1fr); }
.metric-card, .panel, .config-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
}
.metric-card { min-height: 180px; padding: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; }
.metric-card strong { margin: var(--space-5) 0 var(--space-3); font-size: 32px; font-weight: 500; }
.metric-card > span:not(.metric-icon) { color: var(--color-text-muted); font-size: var(--font-body); }
.metric-card small { margin-top: var(--space-2); color: var(--color-text-faint); font-size: var(--font-small); }
.metric-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); }
.metric-icon.blue { color: var(--color-primary); background: var(--color-primary-soft); }
.metric-icon.green { color: var(--color-success); background: var(--color-success-soft); }
.metric-icon.amber { color: var(--color-warning-icon); background: var(--color-warning-soft); }
.metric-icon.violet { color: var(--color-info); background: var(--color-info-soft); }

.panel { padding: var(--space-6); margin-bottom: var(--space-6); }
.service-strip { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; gap: var(--space-6); }
.service-strip > div { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); align-items: center; }
.service-strip small { grid-column: 2; color: var(--color-text-muted); }
.status-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-danger); }
.status-dot.active { background: var(--color-success); box-shadow: 0 0 0 5px var(--color-success-soft); }

.section-title { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); margin-bottom: var(--space-5); }
.section-title h2, .section-title p { margin-bottom: 0; }
.section-title h2 { display: inline-flex; align-items: center; gap: var(--space-2); }
.section-title h2 .icon { color: var(--color-text-muted); }
.section-title .text-link { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; }

.quick-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.quick-actions .button { flex: 1 1 180px; }

/* ------------------------------------------------------------------
   Members grid / cards (admin /admin/members)
   ------------------------------------------------------------------ */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }
.member-card {
    display: grid; gap: var(--space-3);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.member-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); }
.member-card-name h3 { margin: 0; font-size: var(--font-h3); }
.member-card-name small { color: var(--color-text-muted); }
.member-card dl { margin: 0; display: grid; gap: var(--space-2); }
.member-card dl div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--font-small); }
.member-card .card-action {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-2) 0 0; border-top: 1px solid var(--color-divider); margin-top: var(--space-2);
    color: var(--color-primary); font-weight: 600;
}

.member-heading { display: flex; align-items: center; gap: var(--space-4); }
.avatar-lg { width: 56px; height: 56px; font-size: 22px; }

.empty-row { color: var(--color-text-muted); text-align: center; padding: var(--space-6) !important; }

/* ------------------------------------------------------------------
   Wizard layout (create-configuration page)
   ------------------------------------------------------------------ */
.wizard-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: start; }
.wizard-side { display: grid; gap: var(--space-5); }
.info-panel p { margin: 0 0 var(--space-3); }
.type-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); font-size: var(--font-body); color: var(--color-text); }
.type-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface-sunken); }
.limit-panel .limit-count { margin: 0 0 var(--space-3); color: var(--color-text); font-size: var(--font-body); }
.limit-panel .limit-count strong { color: var(--color-primary); font-weight: 700; }
.wizard-actions { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.field-hint { display: block; color: var(--color-text-muted); font-weight: 400; font-size: var(--font-small); margin-top: var(--space-1); }

/* ------------------------------------------------------------------
   Submit-button loading spinner (data-wizard-form)
   ------------------------------------------------------------------ */
button.is-loading { color: transparent !important; pointer-events: none; position: relative; }
button.is-loading::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------
   Card menu (kebab popover anchored to the top-right of a config card)
   ------------------------------------------------------------------ */
.card-menu { position: relative; }
.card-menu .popover { top: calc(100% + var(--space-1)); right: 0; }

/* ------------------------------------------------------------------
   Modals (native <dialog>)
   ------------------------------------------------------------------ */
dialog.modal {
    width: min(420px, 100%); padding: 0;
    border: 1px solid var(--color-border); border-radius: var(--radius-xl);
    background: var(--color-surface); box-shadow: var(--shadow-popover);
}
dialog.modal::backdrop { background: rgb(15 23 42 / 35%); backdrop-filter: blur(2px); }
dialog.modal[open] { animation: modal-in 0.12s ease-out; }
@keyframes modal-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
    padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-divider);
}
.modal-head h2 { margin: 0; font-size: var(--font-h2); }
.modal-body { padding: var(--space-6); }
.modal-body img.qr-large { width: min(100%, 320px); }
.modal-body p { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--font-small); }
.modal-foot {
    display: flex; justify-content: flex-end; gap: var(--space-3);
    padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-divider);
}

/* ========================================================================
   Forms
   ======================================================================== */
.form-grid { display: grid; gap: var(--space-4); align-items: end; }
.form-grid.five { grid-template-columns: repeat(5, minmax(130px, 1fr)) auto; }
.form-grid.four { grid-template-columns: repeat(4, minmax(140px, 1fr)) auto; }
.form-grid.password-form { grid-template-columns: 1fr 1fr auto; margin-top: var(--space-5); }
.stack-form { display: grid; gap: var(--space-4); }
label { display: grid; gap: var(--space-2); color: #4e5661; font-size: var(--font-small); font-weight: 600; }
input, select, textarea {
    width: 100%; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-text); font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #c6dafc; border-color: var(--color-primary); }
.optional { color: var(--color-text-faint); font-weight: 400; }

/* ========================================================================
   Config cards
   ======================================================================== */
.config-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.config-card { overflow: hidden; box-shadow: var(--shadow-sm); position: relative; }
.config-head {
    display: flex; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-5); border-bottom: 1px solid var(--color-divider);
}
.chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 5px 10px; border-radius: var(--radius-xs);
    background: var(--color-surface-tint); color: var(--color-text-muted);
    font-size: var(--font-small); font-weight: 600;
}
.chip.awg { background: var(--color-success-soft); color: var(--color-success); }
.chip.warp { background: var(--color-primary-soft); color: var(--color-primary); }
.chip.flag-chip { background: var(--color-surface-sunken); color: var(--color-text); }
.chip.online { background: var(--color-success-soft); color: var(--color-success); }
.chip.missing { background: var(--color-danger-soft); color: var(--color-danger); }
.config-card dl { margin: 0; padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-3); }
.config-card dl div, .details div { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
dt { color: var(--color-text-muted); font-size: var(--font-small); }
dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-size: var(--font-body); }
.card-action {
    display: block; padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-divider); font-weight: 600; text-align: right;
}
.state {
    display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
    border-radius: var(--radius-pill); background: var(--color-success-soft);
    color: var(--color-success); font-size: var(--font-micro); white-space: nowrap;
}
.state.revoked { background: var(--color-danger-soft); color: var(--color-danger); }
.state.revocation_failed { background: var(--color-warning-soft); color: var(--color-warning); }

/* ========================================================================
   Layouts
   ======================================================================== */
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.members-layout { grid-template-columns: minmax(280px, 0.7fr) 1.3fr; }
.table-panel { min-width: 0; }
.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-3) var(--space-5); border-top: 1px solid #e7eaee; text-align: left; font-size: var(--font-small); }
th { color: var(--color-text-muted); background: var(--color-surface-alt); font-size: var(--font-micro); text-transform: uppercase; letter-spacing: 0.04em; }
td small { display: block; color: var(--color-text-muted); margin-top: 3px; }
.compact-panel { padding-block: var(--space-4); }
summary { cursor: pointer; font-weight: 600; }
.profile-layout { display: grid; grid-template-columns: minmax(320px, 0.9fr) 1.1fr; gap: var(--space-6); }
.qr-panel { text-align: center; }
.qr-large { width: min(100%, 420px); }
.actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.details { width: 100%; display: grid; gap: var(--space-3); margin: var(--space-3) 0; }

/* ========================================================================
   Progress bar
   ======================================================================== */
.progress {
    width: 100%; height: 6px; border-radius: var(--radius-pill);
    background: var(--color-surface-tint); overflow: hidden;
}
.progress > span { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; }
.progress.success > span { background: var(--color-success); }
.progress.warning > span { background: var(--color-warning-icon); }

/* ========================================================================
   Auth
   ======================================================================== */
.auth-shell {
    min-height: 100vh; display: grid; place-items: center; padding: var(--space-6);
    background: linear-gradient(145deg, #f7faff, #eef3f8);
}
.auth-panel {
    width: min(420px, 100%); padding: var(--space-8); display: grid; gap: var(--space-5);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl); box-shadow: var(--shadow-md);
}
.wide-auth { width: min(500px, 100%); }
.auth-brand { margin-bottom: var(--space-3); }
.qr { width: 220px; max-width: 100%; justify-self: center; }
code {
    display: block; padding: 10px; margin-top: 10px;
    background: var(--color-surface-tint); border-radius: var(--radius-xs);
    overflow-wrap: anywhere; font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: var(--font-small);
}
.alert { padding: 15px 17px; border-radius: var(--radius-md); }
.alert.error { color: #b3261e; background: var(--color-danger-soft); }
.alert.success { color: #137333; background: var(--color-success-soft); }
.alert.info { color: var(--color-warning); background: var(--color-warning-soft); }
.invite-url { background: var(--color-surface); color: var(--color-text); user-select: all; }
fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); }
legend { color: var(--color-text-muted); font-size: var(--font-small); font-weight: 600; }
.check { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
.check input { width: 18px; min-height: 18px; }
hr { width: 100%; border: 0; border-top: 1px solid var(--color-border); margin: var(--space-5) 0; }
.empty {
    grid-column: 1 / -1; padding: var(--space-10); color: var(--color-text-muted);
    text-align: center; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
}
.security-panel { display: grid; justify-items: start; gap: var(--space-3); }
.security-panel .stack-form { width: min(420px, 100%); }
.public-shell { min-height: 100vh; display: grid; align-content: center; justify-items: center; text-align: center; padding: var(--space-6); }
.public-mark { width: 72px; height: 72px; border-radius: var(--radius-xl); margin-bottom: var(--space-5); }
.public-mark img { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------------
   Security page (TOTP enrollment / status)
   ------------------------------------------------------------------ */
.security-status { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; }
.security-status h2 { margin: 0 0 var(--space-1); }
.security-status p { margin: 0; }
.totp-setup { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: start; }
.totp-setup .qr { width: 200px; }
.totp-setup p { margin: 0 0 var(--space-3); }
@media (max-width: 760px) {
    .totp-setup { grid-template-columns: 1fr; justify-items: center; }
}

/* ------------------------------------------------------------------
   Profile detail (single configuration)
   ------------------------------------------------------------------ */
.profile-actions { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.profile-actions .button, .profile-actions button { justify-content: flex-start; }
.profile-actions form { margin: 0; }
.page-heading .text-link { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ------------------------------------------------------------------
   Copy-to-clipboard helpers
   ------------------------------------------------------------------ */
.copy-row { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
.copy-row code { flex: 1; margin: 0; user-select: all; }
[data-copy].is-copied { background: var(--color-success-soft); color: var(--color-success); }
[data-copy].is-copied .icon { animation: copy-flash 0.4s ease-out; }
@keyframes copy-flash { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }

/* ------------------------------------------------------------------
   Node channel speed (hourly probe against speed.cloudflare.com)
   ------------------------------------------------------------------ */
.speed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.speed-card {
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-5); display: grid; gap: var(--space-4); min-width: 0;
}
.speed-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.speed-head b { display: inline-flex; align-items: center; gap: var(--space-2); }
.chip.speed-ok { background: var(--color-success-soft); color: var(--color-success); }
.chip.speed-degraded, .chip.speed-stale { background: var(--color-warning-soft); color: var(--color-warning); }
.chip.speed-error { background: var(--color-danger-soft); color: var(--color-danger); }
.speed-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.speed-figures div { display: grid; gap: 2px; }
.speed-figures dd { text-align: left; white-space: nowrap; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.speed-figures dd small { font-size: var(--font-small); color: var(--color-text-faint); font-weight: 400; }
.speed-spark { width: 100%; height: auto; display: block; overflow: visible; }
.speed-spark .base { stroke: var(--color-divider); stroke-width: 1; }
.speed-spark .line { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.speed-spark .solo { fill: var(--color-primary); }
.speed-spark .fail { fill: var(--color-danger); stroke: var(--color-surface); stroke-width: 2; }
.speed-spark .last { fill: var(--color-primary); stroke: var(--color-surface); stroke-width: 2; }
.speed-spark .hit { fill: transparent; }
.speed-spark .hit:hover { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 1; }
.speed-axis { display: flex; justify-content: space-between; color: var(--color-text-faint); font-size: var(--font-small); margin-top: -8px; }
.speed-meta { color: var(--color-text-muted); font-size: var(--font-small); display: grid; gap: 2px; }
.speed-meta .warn { color: var(--color-danger); overflow-wrap: anywhere; }
@media (max-width: 1100px) { .speed-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
    .speed-grid { grid-template-columns: minmax(0, 1fr); }
    .speed-figures dd { font-size: 19px; }
}

/* ------------------------------------------------------------------
   Admin dashboard: service chips, summary, ranking, events
   ------------------------------------------------------------------ */
.svc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.svc {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    border: 1px solid var(--color-border); border-radius: var(--radius-pill);
    background: var(--color-surface); color: var(--color-text-muted); font-size: var(--font-small);
}
.svc .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); }
.svc.down { border-color: var(--color-danger); color: var(--color-danger); background: var(--color-danger-soft); }
.svc.down .dot { background: var(--color-danger); }
.svc b { font-weight: 600; }

.summary-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-5); }
.summary-grid > *, .speed-grid > *, .two-column > * { min-width: 0; }
.summary { display: grid; gap: var(--space-3); align-content: start; }
.summary h3 {
    display: inline-flex; align-items: center; gap: var(--space-2); margin: 0;
    color: var(--color-text-muted); font-size: 14px;
}
.summary small { color: var(--color-text-faint); font-size: var(--font-small); }
.summary-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.summary-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.summary-pair div, .window { display: grid; align-content: start; min-width: 0; }
.summary-pair strong, .window strong { font-size: 30px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.summary-pair span, .window > span { color: var(--color-text-muted); font-size: 14px; }
.summary-facts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: 0;
    padding-top: var(--space-3); border-top: 1px solid var(--color-divider);
}
.summary-facts div { display: grid; }
.summary-facts dd { text-align: left; }
.windows { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.legend { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: var(--font-small); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-left: var(--space-2); border-radius: 3px; }
.legend i.awg { background: var(--color-success); }
.legend i.warp { background: var(--color-primary); }

/* SVG bars (CSP forbids inline width styles) */
.bar { display: block; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; }
.bar .track { fill: var(--color-surface-tint); }
.bar .fill { fill: var(--color-primary); }
.bar.meter .fill { fill: var(--color-success); }
.bar.split { margin: var(--space-2) 0 6px; }
.bar.split .awg { fill: var(--color-success); }
.bar.split .warp { fill: var(--color-primary); }
.bar.rank-bar { height: 4px; border-radius: 2px; }

.node-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0;
    padding-top: var(--space-3); border-top: 1px solid var(--color-divider);
}
.node-stats div { display: grid; }
.node-stats dd { text-align: left; font-variant-numeric: tabular-nums; }

.rank-head, .rank li { display: grid; grid-template-columns: 32px 1fr 56px 96px; gap: var(--space-3); align-items: center; }
.rank-head { color: var(--color-text-faint); font-size: var(--font-micro); }
.rank-head span:first-child { grid-column: 4; grid-row: 1; text-align: right; }
.rank-head span:last-child { grid-column: 3; grid-row: 1; text-align: right; }
.rank, .events { list-style: none; margin: 0; padding: 0; }
.rank li { padding: 9px 0; }
.rank li + li, .events li + li { border-top: 1px solid var(--color-divider); }
.rank-main { display: grid; gap: 6px; min-width: 0; }
.rank-main a { color: var(--color-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-num { text-align: right; color: var(--color-text-muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-num.strong { color: var(--color-text); }
.avatar.sm {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--font-small); font-weight: 600;
}
.events li { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--space-3); align-items: center; padding: 10px 0; }
.events li div { display: grid; min-width: 0; }
.events b { font-size: 14px; font-weight: 500; }
.event-count {
    display: inline-block; margin-left: var(--space-1); padding: 0 6px; border-radius: var(--radius-pill);
    background: var(--color-surface-tint); color: var(--color-text-muted); font-size: var(--font-micro); font-weight: 600;
}
.events small { color: var(--color-text-faint); font-size: var(--font-micro); overflow-wrap: anywhere; }
.events time { color: var(--color-text-faint); font-size: var(--font-micro); white-space: nowrap; }
.event-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; }
.event-icon.ok { background: var(--color-success-soft); color: var(--color-success); }
.event-icon.warn { background: var(--color-danger-soft); color: var(--color-danger); }
.event-icon.info { background: var(--color-primary-soft); color: var(--color-primary); }
.event-icon.muted { background: var(--color-surface-tint); color: var(--color-text-muted); }
.chip { white-space: nowrap; }
@media (max-width: 1100px) { .summary-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
    .windows, .summary-facts { grid-template-columns: 1fr; gap: var(--space-4); }
    .events li { grid-template-columns: 32px 1fr; }
    .events time { grid-column: 2; }
}

/* ========================================================================
   Responsive
   ======================================================================== */
@media (max-width: 1440px) {
    .topbar { gap: var(--space-5); }
    .nav-link { padding: var(--space-3); }
    .user-trigger .name { display: none; }
}
@media (max-width: 1100px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid.five, .form-grid.four { grid-template-columns: repeat(2, 1fr); }
    .config-grid { grid-template-columns: repeat(2, 1fr); }
    .wizard-layout { grid-template-columns: 1fr; }
    .wizard-side { order: -1; }
}
@media (max-width: 760px) {
    .topbar { grid-template-columns: 1fr auto; padding: 0 var(--space-4); gap: var(--space-2); }
    .topbar nav { grid-row: 2; grid-column: 1 / -1; padding-bottom: var(--space-2); overflow-x: auto; }
    .brand { font-size: 17px; }
    .workspace { padding: var(--space-6) var(--space-4) 48px; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .metric-grid, .metric-grid.three, .config-grid, .two-column, .profile-layout, .wizard-layout { grid-template-columns: 1fr; }
    .metric-card { min-height: 160px; }
    .service-strip { grid-template-columns: 1fr 1fr; }
    .form-grid.five, .form-grid.four, .form-grid.password-form { grid-template-columns: 1fr; }
    .panel { padding: var(--space-5); border-radius: var(--radius-lg); }
    .table-wrap { margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); }
    h1 { font-size: 28px; }
}

/* --------------------------------------------------------------------------
   Routing service picker (wizard): checkbox list shown for the "selected" policy
   -------------------------------------------------------------------------- */
.service-picker { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.service-picker[hidden] { display: none; }
.service-option {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.service-option:hover { background: var(--color-surface-muted, rgba(0, 0, 0, .02)); }
.service-option input { margin-top: 3px; }
.service-option span { display: grid; gap: 2px; }
.service-option small { color: var(--color-text-muted); }
.service-hint { margin: 0; color: var(--color-text-muted); font-size: var(--font-small); }

/* --------------------------------------------------------------------------
   Discrete levels instead of inline styles: the CSP ships style-src 'self',
   so a style="width: 42%" attribute never applies. Width comes from data-level
   here, and the template only picks a bucket.
   -------------------------------------------------------------------------- */
.progress > span[data-level="0"] { width: 0%; }
.progress > span[data-level="1"] { width: 5%; }
.progress > span[data-level="2"] { width: 10%; }
.progress > span[data-level="3"] { width: 15%; }
.progress > span[data-level="4"] { width: 20%; }
.progress > span[data-level="5"] { width: 25%; }
.progress > span[data-level="6"] { width: 30%; }
.progress > span[data-level="7"] { width: 35%; }
.progress > span[data-level="8"] { width: 40%; }
.progress > span[data-level="9"] { width: 45%; }
.progress > span[data-level="10"] { width: 50%; }
.progress > span[data-level="11"] { width: 55%; }
.progress > span[data-level="12"] { width: 60%; }
.progress > span[data-level="13"] { width: 65%; }
.progress > span[data-level="14"] { width: 70%; }
.progress > span[data-level="15"] { width: 75%; }
.progress > span[data-level="16"] { width: 80%; }
.progress > span[data-level="17"] { width: 85%; }
.progress > span[data-level="18"] { width: 90%; }
.progress > span[data-level="19"] { width: 95%; }
.progress > span[data-level="20"] { width: 100%; }

/* Inline styles are inert under the CSP, so these two live in the stylesheet. */
.icon-flip { transform: rotate(180deg); }
.modal-body.centered { text-align: center; }

/* Archive toggle above a configuration list. */
.archive-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-small);
}

/* Traffic windows inside a config card: D/W/M markers keep the row on one line.
   The full wording lives in the title attribute. */
.traffic-windows {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px var(--space-3);
}
.traffic-windows span { white-space: nowrap; }
.traffic-windows b {
    margin-right: 4px;
    color: var(--color-text-faint);
    font-size: var(--font-small);
    font-weight: 600;
}
.traffic-note { display: block; margin-top: 2px; color: var(--color-text-faint); font-size: var(--font-small); }

/* Telegram binding block */
.telegram-block { display: grid; gap: var(--space-3); }
.telegram-block p { margin: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.muted { color: var(--color-text-muted); font-size: var(--font-small); }

/* Broadcasts */
textarea { resize: vertical; line-height: 1.45; }
.check.nested { margin-left: var(--space-6); }
fieldset select { margin: 0 0 var(--space-2) var(--space-6); width: calc(100% - var(--space-6)); }
.broadcast-text { white-space: pre-line; max-width: 320px; }