.client-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:26px 0;padding-bottom:22px;border-bottom:1px solid var(--line)}
.client-activity{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:middle;background:var(--ink-4)}.client-activity.online{background:var(--ok)}.client-activity.offline{background:var(--err)}.client-activity.unknown{background:var(--warn)}
#ccOverlay .client-profile-modal{display:flex;flex-direction:column;padding:0;overflow:hidden;max-height:calc(100dvh - 40px)}
#ccOverlay .client-profile-modal>h3{flex:none;margin:0;padding:24px 28px;border-bottom:1px solid var(--line)}
#ccOverlay #ccBody{overflow:auto;min-height:0;padding:22px 28px;overscroll-behavior:contain;scrollbar-width:thin}
#ccOverlay .client-profile-modal .modal-foot{position:static;margin:0;padding:16px 28px;flex:none}
.client-filters button:focus-visible,.client-name:focus-visible{outline:2px solid #79c6e8;outline-offset:3px}
/* Neutral dark table, aligned with the surrounding navigation. */
html[data-theme=dark] #vpnBody .client-table-wrap{--surface:#101010;--surface-2:#131313;--surface-3:#1b1b1b;--line:#292929;--line-faint:#222;--line-strong:#353535;--ink-hi:#eee;--ink-2:#c6c6c6;--ink-3:#999;--ink-4:#858585;background:#101010;border-color:#292929;box-shadow:none;border-radius:12px;color-scheme:dark}
html[data-theme=dark] #vpnBody .client-table{background:none;border:0;box-shadow:none;border-radius:0}
html[data-theme=dark] #vpnBody .client-table thead{background:#0d0d0d}
html[data-theme=dark] #vpnBody .client-table tbody tr{background:#101010}
html[data-theme=dark] #vpnBody .client-table tbody tr:nth-child(even){background:#131313}
html[data-theme=dark] #vpnBody .client-table tbody tr:hover{background:#1b1b1b}
html[data-theme=dark] #vpnBody .client-table tbody tr:has(input:checked){background:#162126}
html[data-theme=dark] #vpnBody .client-table .client-row-actions>.btn{border-color:#333;color:#bbb;background:none}
html[data-theme=dark] #vpnBody .client-table .client-row-actions>.btn:hover{border-color:#555;background:#242424;color:#fff}
html[data-theme=dark] #vpnBody .client-table .client-row-actions>.btn.danger{border-color:transparent;color:#858585}
html[data-theme=dark] #vpnBody .client-table .client-row-actions>.btn.danger:hover{color:var(--err);background:#281616}
.client-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.client-table .client-row-actions>.btn{display:inline-flex;align-items:center;justify-content:center;height:34px;min-height:34px;padding:0 10px;line-height:1;margin:0;box-sizing:border-box;flex:none}
.client-table .client-row-actions>.btn:not(.client-details){width:34px;padding:0}
.client-row-actions .client-icon{align-items:center;justify-content:center;line-height:0}
#ccBody h4{font-size:13px;line-height:1.5;margin:0 0 13px;color:var(--ink-hi);font-weight:600}
.client-summary{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:20px;padding:4px 0 22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.client-summary-item{min-width:0}.client-summary-item .sub{font-size:11px;color:var(--ink-3);margin-bottom:8px!important}.client-summary-item .title{font-size:16px;line-height:1.5;color:var(--ink-hi);letter-spacing:-.025em}.client-summary-item .title>.dim{display:block;font-size:11px;font-weight:400;letter-spacing:0;margin-top:4px}.client-summary-item .badge{font-size:11px;padding:5px 8px;letter-spacing:0}.client-summary-item .prog{height:3px}
.client-management{margin-bottom:24px}.client-main-actions{display:flex;gap:9px}.client-main-actions .btn{padding:10px 16px;min-height:40px;border-radius:9px;font-size:12px;box-shadow:none}.client-main-actions .btn.primary{background:#79c6e8;color:#102630;border-color:#79c6e8}
.client-extra-actions{margin-top:13px}.client-extra-actions>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font-size:12px;color:var(--ink-3);padding:9px 0}.client-extra-actions>summary::-webkit-details-marker,.client-profile-danger>summary::-webkit-details-marker{display:none}.client-extra-actions>summary .client-icon{margin-left:auto}.client-extra-actions[open]>summary .client-icon{transform:rotate(180deg)}
.client-extra-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding-top:6px}.client-extra-list .btn{justify-content:flex-start;font-size:12px;min-height:40px;border-radius:8px;box-shadow:none}
.client-parameters{margin-bottom:24px}.client-attributes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}.client-attribute{padding:11px 0;border-bottom:1px solid var(--line)}.client-attribute .main{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px}.client-attribute .sub{font-size:11px;color:var(--ink-3)}.client-attribute .title{font-size:12px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere;margin:0!important}
.client-subscription{padding-top:19px;border-top:1px solid var(--line)}.client-subscription>p{font-size:12px;line-height:1.6;color:var(--ink-3);margin:0 0 12px}.client-subscription .keybox{font-size:11px;overflow-wrap:anywhere;line-height:1.7;padding:11px 13px}.client-link-actions{display:flex;gap:8px;margin-top:9px}.client-link-actions .btn{width:auto;margin:0;min-height:36px;font-size:12px;padding:8px 12px;box-shadow:none;justify-content:center;border-radius:8px}.client-link-actions .client-profile-qr{flex:none}
#ccBody .client-profile-danger{margin:23px 0 0;padding:13px 16px;background:rgba(239,68,68,.035)}.client-profile-danger>summary{display:flex;align-items:center;gap:9px;list-style:none;cursor:pointer;color:#ef4444;font-size:11px;font-weight:600}.client-profile-danger>summary .client-icon:last-child{margin-left:auto}.client-profile-danger[open]>summary .client-icon:last-child{transform:rotate(180deg)}.client-profile-danger>p{margin-top:13px}
.client-extra-actions summary:focus-visible,.client-profile-danger summary:focus-visible{outline:2px solid #79c6e8;outline-offset:4px;border-radius:3px}
html[data-theme=light] .client-profile-danger>summary{color:#b42318}
@media(max-width:600px){.client-summary{grid-template-columns:1fr 1fr;gap:18px}.client-summary-item:last-child{grid-column:1/-1}.client-attributes{grid-template-columns:1fr}.client-extra-list{grid-template-columns:1fr}.client-summary-item .title{font-size:14px}}
.qr-controls .qr-contrast.poor{color:#d97706!important}
.subscription-studio .qr-preview canvas{border-radius:12px}
html[data-theme=light] .client-profile-danger :is(strong,.btn){color:#b42318}
.client-stat{display:flex;align-items:center;gap:18px;border-right:1px solid var(--line);padding-right:24px}.client-stat:last-child{border:0}.client-stat span{font-size:12px;color:var(--ink-3)}.client-stat strong{margin-left:auto;font-size:26px;color:var(--ink-hi)}
.client-toolbar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.client-toolbar #uSearch{width:210px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-size:12px}.client-toolbar #uCount{margin-left:auto;font:11px var(--mono);color:var(--ink-4)}
.client-filters{display:flex;gap:3px;flex-wrap:wrap}.client-filters button{border:0;background:none;color:var(--ink-3);padding:9px 10px;border-radius:8px;font:12px var(--sans);cursor:pointer}.client-filters button[aria-pressed=true]{background:var(--surface-3);color:var(--ink-hi)}
#vpnBody .client-table-wrap{background:var(--surface);border-radius:15px;border:1px solid var(--line)}.client-table th{font-size:11px;font-weight:500;color:var(--ink-4);padding:15px!important;background:none!important}.client-table td{padding:17px 15px!important;vertical-align:middle;font-size:12px!important;background:none!important}.client-table tbody tr:nth-child(even){background:var(--surface-2)}.client-table tbody tr:hover{background:var(--surface-3)}
.client-name{font-size:13px;font-weight:600;color:var(--ink-hi)}.client-meta{display:block;font-size:10px;color:var(--ink-3);margin-top:5px;line-height:1.5}.client-expiry{display:block;font:10px/1.6 var(--sans);color:var(--ink-4);margin-top:4px}.client-table .badge{background:none!important;padding:0;font-size:11px;gap:6px}.client-table .btn{border-radius:8px;font-size:11px;min-height:32px;padding:7px 9px;background:none;box-shadow:none}.client-table .btn.danger{border-color:transparent;color:var(--ink-4)}.client-table .btn.danger:hover{border-color:var(--err);color:var(--err)}.client-icon{display:inline-flex}.client-traffic-bar{max-width:120px;height:3px;background:var(--line);margin-top:8px;border-radius:3px;overflow:hidden}.client-traffic-bar span{display:block;height:100%;background:#79c6e8}.client-empty{text-align:center;padding:30px;color:var(--ink-3)}
#ccOverlay .client-profile-modal{max-width:700px;width:700px}#ccBody .client-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:13px;overflow:hidden;margin:0 0 23px;background:var(--surface)}#ccBody .client-profile-grid .row{padding:14px 16px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}#ccBody .client-profile-grid .row:nth-child(odd){border-right:1px solid var(--line)}#ccBody .client-profile-grid .sub{font-size:11px;color:var(--ink-3)}#ccBody .client-profile-grid .title{font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.client-profile-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:22px}.client-profile-actions .btn{min-height:40px;justify-content:flex-start;padding:10px 12px;border-radius:9px;font-size:12px}.client-profile-actions .btn.primary{background:#79c6e8;color:#102630;border-color:#79c6e8}.client-profile-danger{border:1px solid #ef444440;border-radius:12px;padding:15px 17px;background:#ef44440a;margin:18px 0 22px}.client-profile-danger strong{font-size:12px;color:#ef4444}.client-profile-danger p{font-size:12px;line-height:1.6;color:var(--ink-3);margin:7px 0 12px}.client-profile-danger .btn{color:#ef4444;border-color:#ef444440;background:#ef44440a;font-size:12px}.client-profile-qr{margin-top:8px;width:100%;justify-content:center}
#cuOverlay .subscription-modal{max-width:760px;width:760px}.subscription-studio{display:grid;grid-template-columns:260px 1fr;gap:28px;margin:4px 0 24px;align-items:center}.qr-preview canvas{display:block;width:240px;height:240px;max-width:100%;margin:auto;image-rendering:pixelated;border-radius:0}.qr-preview p{font-size:12px;text-align:center;line-height:1.6;color:var(--ink-3);margin:13px 0 0}.qr-controls h4{font-size:17px;margin:0 0 8px;color:var(--ink-hi)}.qr-controls>p{font-size:12px;line-height:1.7;color:var(--ink-3)}.qr-palette{border:0;padding:0;margin:20px 0;display:flex;gap:8px;flex-wrap:wrap}.qr-palette legend{font-size:12px;color:var(--ink-2);margin-bottom:10px}.qr-swatch{width:25px;height:25px;border-radius:7px;border:1px solid #8888;cursor:pointer;position:relative}.qr-swatch[aria-pressed=true]{outline:2px solid var(--ink-hi);outline-offset:3px}.qr-swatch:focus-visible{outline:2px solid #79c6e8;outline-offset:3px}.qr-contrast{font-size:11px!important;color:var(--ok)!important}.qr-contrast.poor{color:var(--warn)!important}.qr-controls .btn{font-size:11px;padding:8px 0}.qr-error{color:var(--err)}
@media(max-width:700px){.client-overview{gap:12px}.client-stat{display:block;padding-right:10px}.client-stat strong{display:block;margin-top:8px}.client-toolbar #uCount{margin-left:0}.client-table th:nth-child(4),.client-table td:nth-child(4){display:none}.client-table .client-details{display:none}.subscription-studio{grid-template-columns:1fr;gap:22px}.qr-controls{max-width:320px;margin:auto;width:100%}.client-profile-actions{grid-template-columns:1fr}#ccBody .client-profile-grid{grid-template-columns:1fr}#ccBody .client-profile-grid .row{border-right:0!important}}
