.vpn-node-picker{margin-top:8px}.vpn-summary{margin:12px 0}.vpn-summary .row:empty{display:none}.vpn-summary .s{line-height:1.55}.vpn-client-row>div{min-width:0;flex:1}.vpn-client-row b,.vpn-traffic-name b{overflow-wrap:anywhere}.vpn-empty{padding:20px 15px;color:var(--ink2);font-size:14px}.vpn-total{margin:0 0 12px}.vpn-traffic-name{flex:1;min-width:0}.vpn-traffic-name .bar{margin:8px 0 3px;height:4px}.vpn-traffic-name .bar i{background:var(--acc)}.vpn-traffic-list .li{gap:14px}.vpn-traffic-list .li>span{white-space:nowrap;font-size:13px;font-weight:650}.vpn-history{width:100%;margin-top:12px}.vpn-note{margin:12px 8px}.vpn-guide{padding-left:22px;line-height:1.7}.vpn-guide li{margin:10px 0}#vpn-sections{margin-top:12px}#vpn-search{width:100%;margin:12px 0}#vpn-periods button{font-size:12px;padding:8px 4px}

.vpn-client-detail .kpi{min-width:0}.vpn-client-detail .kpi .v{font-size:20px;line-height:1.35;overflow-wrap:anywhere}

.vpn-filter-group h2 {font-size:20px;line-height:1.35;margin:14px 0;overflow-wrap:anywhere}
.vpn-filter-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.vpn-filter-actions .btn {min-height:44px;padding:10px 6px;white-space:normal;font-size:14px}
.vpn-filter-services {display:grid;gap:12px}
.vpn-filter-card {border:1px solid var(--line);border-radius:18px;background:var(--card);padding:14px}
.vpn-filter-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.vpn-filter-heading b {font-size:17px;overflow-wrap:anywhere}
.vpn-filter-denied {background:var(--danger-soft,#fee2e2);color:var(--danger,#b91c1c)}
.vpn-filter-settings {margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:18px}
.vpn-filter-settings summary {min-height:44px;cursor:pointer;font-weight:700;line-height:44px}
.vpn-filter-member {min-height:48px;cursor:pointer}
.vpn-filter-member input {width:24px;height:24px;flex:none;accent-color:var(--primary,#137b96)}
.vpn-filter-settings textarea {width:100%;min-height:112px;font-size:16px;box-sizing:border-box;resize:vertical;margin:10px 0}
.vpn-filter-settings > .btn {margin-top:10px;width:100%;min-height:44px}

.vpn-dashboard .vpn-summary { padding:16px 14px }
.vpn-kpis { display:grid; grid-template-columns:.8fr 1fr 1.25fr; gap:8px; margin:0 }
.vpn-kpis > div { min-width:0 }
.vpn-kpis > div + div { border-inline-start:1px solid currentColor; border-color:color-mix(in srgb,currentColor 28%,transparent); padding-inline-start:10px }
.vpn-kpis dt { font-size:12px; line-height:1.25; min-height:2.5em }
.vpn-kpis dd { margin:2px 0 0; font-size:clamp(17px, 5.4vw, 25px); line-height:1.15; font-weight:750; overflow-wrap:anywhere }
.vpn-statusbar,.vpn-list-heading { display:flex; align-items:center; justify-content:space-between; gap:8px }
.vpn-statusbar .btn,.vpn-list-heading select { min-height:44px }
.vpn-statusbar #vpn-asof { font-variant-numeric:tabular-nums }
.vpn-dashboard .vpn-note { margin:6px 0 14px; line-height:1.45 }
.vpn-dashboard #vpn-search { display:block; min-height:44px; margin:0 0 8px; box-sizing:border-box; font-size:16px }
.vpn-chips { display:flex; flex-wrap:wrap; gap:6px }
.vpn-chips .btn { min-height:44px; padding:7px 10px; font-size:13px; flex:auto }
.vpn-chips [aria-pressed=true] { border-color:var(--acc); color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc) }
.vpn-list-heading { margin:12px 0 6px }
.vpn-list-heading h2 { margin:0; font-size:17px }
.vpn-list-heading select { min-width:0; max-width:55%; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:6px 8px; font:inherit; font-size:13px }
.vpn-dashboard .vpn-client-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; min-height:68px }
.vpn-client-row small { margin-top:4px; line-height:1.3 }
.vpn-client-row > .vpn-row-meta { flex:0 0 auto; max-width:48%; text-align:right; font-variant-numeric:tabular-nums }
.vpn-state { display:inline-flex; align-items:center; justify-content:flex-end; gap:5px; font-size:12px; font-weight:650; color:var(--ink2); line-height:1.25 }
.vpn-state::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none }
.vpn-state[data-state=online] { color:var(--acc) }
.vpn-state[data-state=disabled] { color:var(--danger,#b91c1c) }
.vpn-client-row progress { display:block; width:100%; height:5px; margin-top:6px; accent-color:var(--acc) }
.vpn-detail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0 }
.vpn-detail > div { padding:10px; border:1px solid var(--line); border-radius:10px }
.vpn-detail dt { color:var(--ink2); font-size:12px }
.vpn-detail dd { margin:4px 0 0; font-weight:650; overflow-wrap:anywhere }
.vpn-dashboard :is(button,input,select):focus-visible { outline:2px solid var(--acc); outline-offset:2px }