:root{color-scheme:dark;--bg:#0b121d;--side:#0e1724;--panel:#121e2e;--panel2:#152235;--line:#223248;--txt:#eaf3fb;--muted:#8397ad;--cyan:#51d4ec;--blue:#4685ef;--green:#39d9b3;--warn:#ffd17e;--radius:15px}*{box-sizing:border-box}body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--txt);background:radial-gradient(ellipse at 80% 0%,#132b3d 0%,transparent 43%),var(--bg);font-size:14px}.shell{display:flex;min-height:100vh}.sidebar{width:242px;background:linear-gradient(180deg,#0f1b2b,#0b1522);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:29px 18px 23px;flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;padding:0 7px 46px}.brand-mark{width:41px;height:41px}.brand strong{display:block;font-size:18px;letter-spacing:1.8px}.brand span{display:block;font-size:9px;letter-spacing:2.1px;color:#6f9bae;margin-top:5px}.nav-title{font-size:10px;font-weight:750;color:#526980;letter-spacing:1.6px;margin:6px 13px 17px}.nav{text-decoration:none;display:flex;align-items:center;padding:13px 14px;margin:2px 0;border-radius:10px;color:#90a3b8;gap:13px;font-weight:550}.nav.active{color:#a5eefe;background:linear-gradient(90deg,#123b53,#152d45);border:1px solid #20506b}.nav-icon{font-size:21px;width:21px;text-align:center}.side-bottom{margin-top:auto;font-size:12px;color:#7ac9cb;line-height:1.7;border-top:1px solid var(--line);padding:19px 8px 0}.side-bottom small{color:#8294a7}.lock-icon{font-size:16px;margin-right:5px}.main{min-width:0;flex:1;max-width:1600px;margin:0 auto;padding:39px 41px 20px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:31px}.eyebrow{font-size:10px;color:#5cbdce;letter-spacing:2px;font-weight:700;margin-bottom:9px}h1{font-size:29px;line-height:1.2;margin:0;font-weight:680;letter-spacing:-.3px}.topbar p{color:var(--muted);margin:9px 0 0}.topright{text-align:right;display:flex;flex-direction:column;gap:9px;align-items:flex-end}.status{background:#17362f;border:1px solid #245747;color:#7cf2ca;border-radius:50px;font-size:12px;padding:8px 12px;white-space:nowrap}.status i{display:inline-block;height:7px;width:7px;border-radius:50%;background:#4de2b4;margin-right:7px}.status.off{color:#ffc891;background:#3b2d20;border-color:#63412c}.status.off i{background:#ffc891}.update{font-size:11px;color:#61768a}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:19px}.metric{border-radius:var(--radius);padding:21px 20px 19px;border:1px solid var(--line);background:linear-gradient(155deg,#162336,#111e2e);min-height:150px}.metric-head{color:#a0b0c2;display:flex;justify-content:space-between;align-items:center;font-size:12px}.glyph{font-size:18px;color:#58798f}.metric-number{margin-top:16px;font-size:31px;font-weight:700;letter-spacing:-.8px;white-space:nowrap}.metric-number.cyan{color:var(--cyan)}.metric-sub{color:#778a9e;font-size:11px;margin-top:10px;line-height:1.5}.content-grid{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(300px,1fr);gap:17px}.panel{background:linear-gradient(175deg,#142031,#101a29);border:1px solid var(--line);border-radius:var(--radius);min-width:0;overflow:hidden}.panel-heading{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:23px 23px 21px}.panel-heading h2{font-size:16px;font-weight:670;margin:0}.panel-heading p{font-size:11px;color:#7790a6;margin:8px 0 0;line-height:1.4}.pill{font-size:9px;font-weight:800;color:#5bdbd8;letter-spacing:1.3px;padding:6px 9px;border-radius:6px;background:#113e4b;border:1px solid #1e6470;white-space:nowrap}.pill.subtle{background:#18293b;border-color:#28445b;color:#8ba7c0}.tablewrap{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:600px}thead{background:#152336}th{text-align:left;padding:13px 17px;color:#7794a8;font-size:9px;letter-spacing:.9px;font-weight:750}td{padding:17px;color:#bdcee0;border-top:1px solid #1d2c3e;font-size:12px;white-space:nowrap}td:first-child,th:first-child{padding-left:23px}td:last-child,th:last-child{padding-right:23px}.uname{font-weight:650;color:#dceff9;font-size:12px}.udesc{font-size:10px;color:#698a9e;margin-top:5px}.live{color:#59ddb9}.quiet{color:#9aaec0}.live:before,.quiet:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:7px}.empty{padding:35px!important;text-align:center;color:#8fa3b5}.network-panel,.peers-panel{padding-bottom:19px}.network-item{border-top:1px solid #1d2d40;display:flex;align-items:center;justify-content:space-between;padding:14px 23px;gap:10px}.network-item span{font-size:12px;color:#8ea5ba}.network-item strong{font-size:14px;font-weight:650}.tiny-caption{font-size:10px;color:#688399;padding:13px 23px;line-height:1.6}.chart{height:196px;display:flex;align-items:stretch;justify-content:space-around;gap:12px;padding:7px 29px 0;border-top:1px solid #1c2b3c}.chart-col{display:flex;flex:1;align-items:center;justify-content:flex-end;flex-direction:column;gap:8px}.bar-holder{height:142px;width:100%;display:flex;align-items:flex-end;justify-content:center}.bar{min-height:2px;width:min(100%,37px);border-radius:5px 5px 0 0;background:linear-gradient(180deg,#52d7e5,#3375b4);box-shadow:0 0 20px #45bbda18}.chart-day{font-size:10px;color:#8da3b9}.chart-num{font-size:9px;color:#5e899b;height:12px}.peerlist{padding:3px 22px;min-height:72px}.peer{display:inline-block;border:1px solid #2b4358;border-radius:8px;padding:8px 10px;margin:3px 5px 7px 0;color:#b8d2e2;background:#142b3b;font-size:12px}.footer{display:flex;justify-content:space-between;gap:20px;padding:23px 2px 8px;color:#597287;font-size:10px}@media(max-width:1250px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid{grid-template-columns:1fr}.sidebar{width:205px}.main{padding:32px 24px}}@media(max-width:680px){.shell{display:block}.sidebar{width:100%;height:auto;padding:15px 18px;display:block}.brand{padding:0}.nav,.nav-title,.side-bottom{display:none}.main{padding:25px 15px}.topbar{display:block}.topright{margin-top:18px;flex-direction:row;align-items:center;justify-content:space-between}.stats{gap:9px}.metric{padding:16px 13px;min-height:133px}.metric-head{font-size:11px}.metric-number{font-size:27px}h1{font-size:26px}.panel-heading{padding:19px 16px}.network-item{padding:13px 16px}.footer{display:block}.footer span{display:block;margin-bottom:7px}}

/* v1.1 authorization/settings */
body:not(.authenticated) .shell{display:none}
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;background:radial-gradient(ellipse at 54% 30%,#152f45 0%,#0b121d 72%)}
.login-screen[hidden]{display:none}
.auth-card,.dialog-card{width:100%;max-width:415px;background:linear-gradient(150deg,#17293d,#101b2a);border:1px solid #294057;box-shadow:0 24px 78px #0008;border-radius:20px;padding:34px}
.auth-logo{width:56px;height:56px;margin:16px 0 22px}.auth-kicker{font-size:11px;letter-spacing:2px;font-weight:700;color:#51d4ec}
.auth-card h1{font-size:25px}.auth-help,.dialog-card p{color:var(--muted);font-size:12px;line-height:1.6;margin:12px 0 26px}
.auth-card label,.dialog-card label{display:block;font-size:12px;color:#acbfce;margin:16px 0 8px}
.auth-card input,.dialog-card input{display:block;width:100%;background:#0d1827;color:#ebf7ff;border:1px solid #2b4963;border-radius:9px;padding:13px 14px;font-family:inherit;font-size:14px;outline:none}
.auth-card input:focus,.dialog-card input:focus{border-color:#54d4e8;box-shadow:0 0 0 3px #54d4e81e}
.primary-btn,.secondary-btn{border-radius:9px;border:1px solid #297a9d;background:linear-gradient(140deg,#1c8eb4,#2b6bba);color:white;padding:12px 18px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.primary-btn:disabled{opacity:.6;cursor:wait}.auth-card .primary-btn{width:100%;margin-top:12px}
.secondary-btn{border-color:#32536b;background:#203247;color:#d8eaf7}.form-error{color:#ffb3a2;font-size:12px;min-height:16px;margin-top:12px;line-height:1.4}
.auth-footnote{color:#6f8ba2;text-align:center;font-size:11px;margin-top:25px}
.nav-button{border:0;width:100%;background:none;text-align:left;color:#a1b5ca;cursor:pointer;font:inherit}
.nav-button:hover{color:#effaff;background:#192f44}
.dialog-backdrop{position:fixed;inset:0;background:#050c14d9;display:flex;align-items:center;justify-content:center;padding:18px;z-index:100}
.dialog-backdrop[hidden]{display:none}.dialog-card{max-width:450px}.dialog-card h2{font-size:20px;margin:0}.dialog-card p{margin:10px 0 20px}.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.traffic-totals{display:flex;gap:12px;padding:0 23px 15px}.traffic-totals>div{flex:1;background:#172b3c;border:1px solid #26435a;border-radius:10px;padding:13px}.traffic-totals span{display:block;font-size:10px;color:#87a4b8;margin-bottom:7px}.traffic-totals strong{font-size:19px;color:#d6f5fc}
.traffic-rows{padding:0 23px 8px}.traffic-day{display:grid;grid-template-columns:53px minmax(30px,1fr) 86px;gap:10px;align-items:center;margin:10px 0;color:#92a8b9;font-size:11px}.traffic-day strong{text-align:right;color:#c5e2ed;font-weight:600}
.traffic-meter{height:9px;border-radius:12px;background:#223348;overflow:hidden}.traffic-bar{height:100%;border-radius:12px;background:linear-gradient(90deg,#337ac0,#50d9cb)}
@media(max-width:680px){.auth-card,.dialog-card{padding:24px}.traffic-totals,.traffic-rows{padding-left:16px;padding-right:16px}}
/* v1.3 family dashboard and VPS health */
.stats{grid-template-columns:repeat(5,minmax(0,1fr))}.service-value{font-size:25px}.service-value.ok{color:var(--green)}.service-value.bad{color:#ffac96}.speed-value{font-size:25px}
.users-panel{grid-column:1/-1}.family-controls{display:flex;gap:12px;align-items:center;padding:0 23px 18px;flex-wrap:wrap;color:#8eaac0;font-size:12px}.family-controls select,.dialog-card select{background:#0e1c2c;border:1px solid #34536b;border-radius:9px;color:#eaf3fb;padding:11px 12px;max-width:100%;font:inherit}.family-controls .helper-text{font-size:11px;color:#69869a}.family-name{font-weight:750;color:#e5f7fa;font-size:13px}.group-tag{display:inline-block;font-size:10px;color:#70d7e3;margin:5px 0 0}.group-tag.muted{color:#7d91a6}.tag-btn{font:inherit;border-radius:8px;cursor:pointer;background:#17374b;color:#7de5ea;border:1px solid #2a5d71;padding:8px 11px;white-space:nowrap}.tag-btn:hover{background:#20526c}.member-profile{font-size:11px;color:#82abc0;overflow-wrap:anywhere;background:#0e1b2b;border-radius:9px;padding:11px}.dialog-card select{width:100%}
.system-panel{padding-bottom:4px}.system-measures{padding:0 24px 14px}.system-measure{padding:7px 0 15px}.system-row{display:flex;justify-content:space-between;gap:15px;color:#a2b8c9;font-size:12px;margin-bottom:10px}.system-row strong{color:#e6f1fa}.system-measure small{display:block;font-size:10px;color:#728da2;margin-top:7px}.track{background:#22354c;height:8px;border-radius:20px;overflow:hidden}.track-fill{height:100%;width:0;background:linear-gradient(90deg,#3d78d4,#38d6c5);border-radius:20px;transition:width .5s}.track-fill.warn{background:linear-gradient(90deg,#ed9c4e,#ee5e64)}.system-footer{border-top:1px solid #25364a;padding:15px 23px;font-size:11px;color:#899eaf}.system-footer strong{color:#d2e8f1}.system-spark-head{padding:3px 23px 8px;display:flex;justify-content:space-between;gap:9px;align-items:center}.system-spark-head strong{font-size:12px}.system-spark-head span{font-size:10px;color:#728da2}.spark-wrap{padding:4px 23px 13px;font-size:11px;color:#728da2;min-height:65px}.spark-wrap svg{width:100%;height:80px;display:block}
@media(max-width:1250px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:790px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.speed-value{font-size:21px}}
@media(max-width:680px){.sidebar{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:wrap}.sidebar .brand{width:100%;margin-bottom:7px}.sidebar .nav{display:flex;padding:8px 10px;margin:0;font-size:11px;gap:5px}.sidebar .nav-icon{font-size:13px;width:14px}.sidebar .nav-title,.sidebar .side-bottom{display:none}.family-controls,.system-measures,.system-footer,.system-spark-head,.spark-wrap{padding-left:16px;padding-right:16px}.helper-text{width:100%}.stats .metric{min-height:118px}.stats .metric-number{font-size:23px}.stats .speed-value{font-size:19px}.stats .service-value{font-size:20px}.system-spark-head{flex-wrap:wrap}}

/* v1.4: read-only per-user Xray traffic accounting */
.member-traffic{grid-column:1/-1;padding-bottom:8px}
.traffic-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:0 23px 12px}
.traffic-summary>div{border:1px solid #2a4359;background:#15283a;border-radius:12px;padding:17px}
.traffic-summary span{font-size:11px;display:block;color:#83a2b8;margin-bottom:10px}
.traffic-summary strong{font-size:23px;color:#57dadd}
.traffic-hint{padding:0 23px 9px;color:#a2c1d0;font-size:12px;line-height:1.6}
.pill.ready{color:#65ebbd;border-color:#286a60;background:#133b36}
.live-traffic{color:#a1e9ed}
@media(max-width:680px){.traffic-summary{padding:0 16px 12px;gap:7px}.traffic-summary>div{padding:13px}.traffic-summary strong{font-size:17px}.traffic-hint{padding:0 16px 9px}}

/* v1.5 Profile management */
#addProfileBtn{width:auto;min-width:175px;padding:10px 15px;font-size:13px}
#addProfileBtn:disabled{opacity:.45;cursor:not-allowed}
#userRows td:last-child{min-width:168px}
#userRows td:last-child .tag-btn{margin:2px 3px 2px 0}
.profile-link-card{max-width:560px}
.profile-link-card textarea{width:100%;border-radius:9px;border:1px solid #35465d;background:#0f1b2c;color:#e8f6ff;resize:vertical;padding:12px;font:12px/1.5 monospace;overflow-wrap:anywhere}
.qr-wrapper{display:flex;align-items:center;justify-content:center;margin:14px auto;background:#fff;border-radius:12px;width:min(100%,275px);height:275px;padding:12px}
.qr-wrapper img{width:100%;height:100%;object-fit:contain}
@media(max-width:700px){#addProfileBtn{width:100%;max-width:280px}.profile-link-card{max-width:96vw}}

/* v1.6 Security section */
.safety-panel { grid-column: 1 / -1; }
.safety-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0 16px; }
.safety-item { background:#131f2f;border:1px solid #2b3c50;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px; }
.safety-item>span { font-size:.81rem;color:#91a6bc; }
.safety-item>strong { font-size:1.12rem;color:#eaf7ff; }
.safety-item>small { font-size:.77rem;color:#8ea5bc; }
.safety-item>small.bad {color:#ff9d95;}
.audit-heading {margin-top:28px;}
.audit-events { display:flex;flex-direction:column;gap:0;border:1px solid #2a394b;border-radius:11px;overflow:hidden;max-height:340px;overflow-y:auto; }
.audit-row { display:grid;grid-template-columns:minmax(130px,1.2fr) minmax(150px,2fr) auto;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid #263647;font-size:.83rem; }
.audit-row:last-child { border-bottom:0; }
.audit-row strong {font-weight:600;color:#e4eff9;}
.audit-row span {color:#91a6bc;overflow-wrap:anywhere;}
.audit-row .audit-flag {color:#4fd5b9;text-align:right;}
.audit-row .audit-flag.audit-error {color:#ff9d95;}
@media(max-width:660px){.safety-grid{grid-template-columns:1fr}.audit-row{grid-template-columns:1fr auto}.audit-row>span:nth-child(2){grid-column:1/-1;grid-row:2}.audit-row .audit-flag{grid-column:2;grid-row:1}}

.traffic-mini-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0;}
.traffic-mini-grid>div {border:1px solid #2a394b;background:#131f2f;border-radius:9px;padding:11px;display:flex;flex-direction:column;gap:5px;}
.traffic-mini-grid span {color:#8ea5bc;font-size:.76rem;}
.traffic-mini-grid strong {color:#e6f9ff;font-size:1.04rem;}
#userTrafficDays {max-height:300px;overflow-y:auto;margin:12px 0;}

/* v1.7 Telegram only */
.telegram-panel{grid-column:1/-1}
.telegram-panel .safety-grid{padding:0 22px}
.telegram-panel .tiny-caption{padding:0 22px 14px}
@media(max-width:680px){.telegram-panel .safety-grid,.telegram-panel .tiny-caption{padding-left:14px;padding-right:14px}}

/* v1.8 - card-based family dashboard, search, ranking, traffic details */
.family-controls-v18{gap:10px;padding-bottom:13px}.family-controls-v18>label:not(.search-wrap){font-size:11px;color:#7f9ab0}
.search-wrap{display:flex!important;align-items:center;gap:8px;flex:1 1 210px;max-width:370px;background:#0d1a2a;border:1px solid #30465c;border-radius:10px;padding:0 10px;margin:0!important;color:#58ccdc}
.search-wrap:focus-within{border-color:#4fcfdf;box-shadow:0 0 0 3px #40bac71a}.search-wrap span{font-size:22px;line-height:1}
.search-wrap input{background:transparent!important;border:0!important;box-shadow:none!important;color:#ecf7ff;font:inherit;flex:1;min-width:0;padding:11px 0;outline:none}
.view-switch,.range-switch{display:flex;gap:3px;background:#101d2b;padding:3px;border:1px solid #284057;border-radius:10px}
.view-btn{border:0;border-radius:7px;background:transparent;color:#839fb8;cursor:pointer;padding:8px 10px;font-family:inherit;font-size:11px;font-weight:600;white-space:nowrap}
.view-btn.selected{background:#24566c;color:#d7f9ff;box-shadow:0 2px 8px #0003}.view-btn:focus-visible,.tag-btn:focus-visible{outline:2px solid #69e3ed;outline-offset:2px}
.people-summary{display:flex;gap:18px;flex-wrap:wrap;padding:0 23px 16px;font-size:11px;color:#93b9ca}.people-summary span::before{content:'•';color:#4ed5d4;margin-right:8px}
.profile-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr));gap:13px;padding:0 23px 20px}
.profile-card{min-width:0;background:linear-gradient(150deg,#182c40 0%,#111f30 100%);border:1px solid #2b455e;border-radius:14px;padding:17px;box-shadow:0 8px 20px #040d173d;display:flex;flex-direction:column;gap:14px;transition:border-color .15s}
.profile-card:hover{border-color:#3d8a9b}.profile-disabled{opacity:.8;border-style:dashed}
.profile-top{display:flex;align-items:center;gap:10px;min-width:0}.profile-avatar{flex:0 0 40px;height:40px;display:grid;place-items:center;background:linear-gradient(145deg,#245f85,#147b7c);border:1px solid #318eaa;color:#eaffff;font-size:13px;font-weight:800;border-radius:12px}
.profile-identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.profile-identity strong{color:#edf7ff;overflow-wrap:anywhere;font-size:14px}.profile-identity span{font-size:10px;color:#7798b3;overflow-wrap:anywhere}
.profile-group{font-size:10px;border:1px solid #365a6d;background:#153447;color:#80dae4;border-radius:20px;padding:6px 8px;white-space:nowrap}
.profile-state{display:flex;align-items:center;gap:7px;color:#90a5b9;font-size:11px}.profile-state i{width:8px;height:8px;border-radius:50%;background:#7890a6}.profile-state.state-recent{color:#6de4c1}.profile-state.state-recent i{background:#42dda9;box-shadow:0 0 0 3px #2debb114}.profile-state.state-disabled{color:#ffaa9d}.profile-state.state-disabled i{background:#ffaa9d}
.profile-traffic{padding:15px;border:1px solid #294359;background:#112337;border-radius:11px;display:flex;flex-direction:column;gap:7px}
.profile-traffic>span:first-child{font-size:10px;color:#8eb0c4}.profile-traffic strong{font-size:25px;line-height:1.2;color:#eefaff;font-weight:750}.profile-traffic .traffic-breakdown{font-size:11px;color:#64d3d5}
.profile-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}.profile-meta>div{min-width:0;display:flex;flex-direction:column;gap:6px}.profile-meta small{font-size:10px;color:#7792a9}.profile-meta strong{font-size:11px;color:#bcd0df;font-weight:600;overflow-wrap:anywhere}
.profile-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}.profile-actions .tag-btn{padding:8px 9px;font-size:10px}.tag-btn.accent-btn{background:#125169;border-color:#29798e;color:#a9f1ff}.tag-btn.danger-btn{color:#ffb1a6;border-color:#68454c;background:#34222d}
.profile-cards[hidden],#usersTableWrap[hidden]{display:none!important}.cards-placeholder{grid-column:1/-1;color:#829eb5;padding:23px;text-align:center;font-size:12px}
.family-ranking{min-width:0}.family-ranking-list{padding:0 23px 12px;display:flex;flex-direction:column;gap:17px}.ranking-row{display:flex;flex-direction:column;gap:8px}.ranking-head{display:flex;justify-content:space-between;gap:14px;font-size:12px}.ranking-head span{color:#c8deeb;overflow-wrap:anywhere}.ranking-head strong{color:#74e2de;white-space:nowrap}.ranking-track{height:8px;background:#243748;border-radius:20px;overflow:hidden}.ranking-fill{height:100%;background:linear-gradient(90deg,#2668ba,#38d3c6);border-radius:20px}
.traffic-chart-top{display:flex;gap:10px;justify-content:space-between;align-items:center;margin:18px 0 8px}.traffic-chart-top strong{font-size:13px}.traffic-chart-top p{font-size:10px;margin:3px 0;color:#829eb4}.traffic-legend{display:flex;gap:15px;font-size:10px;color:#92adc0}.traffic-legend>span{display:flex;align-items:center;gap:6px}.traffic-legend i{display:inline-block;width:10px;height:10px;border-radius:3px}.dl-legend{background:#36c2d1}.ul-legend{background:#5485e6}
.user-traffic-chart{min-height:150px;padding:12px 0 0;color:#819aad;font-size:11px}.traffic-bars{height:122px;display:flex;gap:6px;align-items:end;padding-bottom:0;border-bottom:1px solid #375064}.traffic-chart-col{height:100%;display:flex;flex:1;min-width:0;flex-direction:column;gap:4px;align-items:center;justify-content:end}.traffic-stacks{height:96px;width:100%;display:flex;gap:3px;align-items:end;justify-content:center}.traffic-stack-download{width:45%;max-width:18px;min-height:1px;border-radius:3px 3px 0 0;background:linear-gradient(0deg,#197fa9,#42dce0)}.traffic-stack-upload{width:45%;max-width:18px;min-height:1px;border-radius:3px 3px 0 0;background:linear-gradient(0deg,#315db5,#78a6fb)}.traffic-chart-col small{font-size:9px;color:#91a9bc}.traffic-chart-sum{font-size:10px;color:#acc8d8;margin:13px 0}
#userTrafficDays{padding:0;max-height:205px;overflow:auto;margin:12px 0}.traffic-detail-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:9px 10px;border-bottom:1px solid #24384a;color:#91adc1;font-size:11px}.traffic-detail-row>span:nth-child(2){color:#5dd6df;text-align:right}.traffic-detail-row>span:nth-child(3){color:#91aafa;text-align:right}
#userTrafficDialog .dialog-card{max-width:560px;max-height:calc(100vh - 34px);overflow-y:auto}
@media(max-width:720px){.family-controls-v18{align-items:stretch}.family-controls-v18>label:not(.search-wrap){display:none}.family-controls-v18 .search-wrap{order:-1;flex-basis:100%;max-width:none}.family-controls-v18 select{flex:1 1 115px;max-width:none}.profile-cards{grid-template-columns:1fr;padding:0 15px 15px}.people-summary{padding:0 15px 14px}.family-ranking-list{padding:0 15px 12px}.view-switch{margin-left:auto}.profile-traffic strong{font-size:23px}.traffic-chart-top{flex-wrap:wrap}}


/* v1.9 quality: server-side probes, not VPN-client measurements */
.quality-panel{grid-column:1/-1}.quality-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;padding:0 20px 18px}
.quality-tile{border:1px solid #2b4c63;border-radius:12px;background:#15293b;padding:15px;display:flex;flex-direction:column;gap:7px;min-width:0}
.quality-tile>span{font-size:10px;color:#96b4c7}.quality-tile strong{font-size:21px;color:#d3f9f4;overflow-wrap:anywhere}.quality-tile strong.quality-error{color:#ffa4a3}.quality-tile small{font-size:10px;color:#7ba4bc;overflow-wrap:anywhere}
.quality-control{padding:0 20px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px}.quality-control strong{font-size:13px;color:#e7f5ff}.quality-control p{font-size:11px;color:#86aec3;margin:6px 0 0}
.quality-graph{margin:0 20px;min-height:125px;height:145px;border:1px solid #2c4a5d;background:repeating-linear-gradient(to bottom,#142b3d 0,#142b3d 1px,transparent 1px,transparent 30px);border-radius:12px;padding:12px;display:flex;align-items:end;gap:3px;color:#a1b7c8;font-size:11px}
.quality-col{flex:1;height:100%;min-width:2px;display:flex;align-items:end}.quality-bar{width:100%;max-width:22px;background:linear-gradient(0deg,#167d92,#43ddc7);border-radius:3px 3px 1px 1px;margin:auto auto 0}.quality-loss .quality-bar{background:linear-gradient(0deg,#7b3851,#ee9086)}.quality-empty .quality-bar{background:#37495a;opacity:.45}
.quality-legend{padding:12px 20px 0;display:flex;gap:18px;flex-wrap:wrap;color:#86a6bd;font-size:11px}.quality-legend span{display:flex;align-items:center;gap:6px}.quality-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}.quality-good{background:#42d9c8}.quality-bad{background:#e28d89}.quality-no-data{background:#435569}
.quality-panel>.tiny-caption{line-height:1.6}
@media(max-width:850px){.quality-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.quality-top{padding:0 13px 14px;gap:8px}.quality-tile{padding:12px}.quality-tile strong{font-size:18px}.quality-control{padding:0 13px 14px;flex-wrap:wrap}.quality-graph{margin:0 13px}.quality-legend{padding:10px 13px 0;gap:12px}}

/* v2.0 subscriptions */
.subscription-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:12px;margin-top:15px}
.subscription-item{display:flex;gap:14px;justify-content:space-between;align-items:center;padding:16px;border:1px solid #294157;border-radius:14px;background:#142236;min-width:0;flex-wrap:wrap}
.subscription-info{min-width:0;display:flex;flex-direction:column;gap:6px;flex:1}
.subscription-info strong{color:#e9f4fc;font-size:14px;overflow-wrap:anywhere}
.subscription-info small{color:#8ca9bc;line-height:1.5;overflow-wrap:anywhere}
#subUrl{width:100%;overflow-wrap:anywhere}
#subNodeName{width:100%}

/* RELAIDEX v2.0.1: keep subscription actions inside the modal, responsive. */
#subscriptionDialog.dialog-backdrop{
  overflow-y:auto;
  padding:16px;
}
#subscriptionDialog .dialog-card{
  min-width:0;
  width:100%;
  max-width:450px;
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
#subscriptionDialog .dialog-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;
  gap:10px;
  margin-top:18px;
}
#subscriptionDialog .dialog-actions button{
  min-width:0;
  width:100%;
  min-height:46px;
  padding:11px 8px;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.3;
}
#subscriptionDialog #saveSubName{grid-column:1;grid-row:1}
#subscriptionDialog #copySub{grid-column:2;grid-row:1}
#subscriptionDialog #closeSub{grid-column:1;grid-row:2}
#subscriptionDialog #rotateSub{grid-column:2;grid-row:2}
@media(max-width:380px){
  #subscriptionDialog.dialog-backdrop{padding:10px}
  #subscriptionDialog .dialog-card{max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);padding:20px}
  #subscriptionDialog .dialog-actions{gap:8px}
  #subscriptionDialog .dialog-actions button{font-size:12px;padding:10px 5px}
}


/* RELAIDEX v2.1 — subscription studio; no changes outside subscriptions. */
#subscriptions-panel .tiny-caption{line-height:1.65}
#subscriptionDialog .dialog-card{max-width:550px;padding:24px;background:linear-gradient(162deg,#172d42 0%,#101c2d 46%,#0e1827 100%);border:1px solid #2b4a61;box-shadow:0 34px 90px #0009}
.sub-modal-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sub-brand-icon{width:51px;height:51px;display:grid;place-items:center;flex-shrink:0;border-radius:15px;background:linear-gradient(135deg,#246abd,#2dcac9);box-shadow:0 9px 25px #116f9d55;color:#f7ffff;font-size:31px;font-weight:900}
.sub-modal-heading{min-width:0}.sub-eyebrow{display:block;color:#51d4ec;font-size:9px;letter-spacing:2px;font-weight:800;margin-bottom:6px}
#subscriptionDialog .sub-modal-heading h2{margin:0 0 4px;font-size:22px;letter-spacing:-.4px}
#subscriptionDialog #subscriptionPerson{color:#91b2c6;margin:0;font-size:12px;overflow-wrap:anywhere}
.sub-benefits{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 24px}
.sub-benefits span{border:1px solid #27536a;background:#13384b80;border-radius:99px;color:#83dbdd;padding:7px 11px;font-size:11px;font-weight:600}
.sub-section-title{display:flex;gap:11px;align-items:center;margin:8px 0 14px}
.sub-section-title>span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#183c52;border:1px solid #28506a;font-size:11px;font-weight:850;color:#61d2e8;flex-shrink:0}
.sub-section-title>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.sub-section-title strong{font-size:14px;color:#e9f7ff}.sub-section-title small{font-size:11px;color:#88a7bb;line-height:1.3}
.sub-style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:18px}
.sub-style-choice{min-width:0;border:1px solid #29475c;background:#15273a;border-radius:12px;color:#b8d5e7;min-height:68px;padding:9px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-family:inherit;font-size:11px;font-weight:650;transition:background .15s,border-color .15s,transform .15s}
.sub-style-choice:hover{border-color:#49bacc;background:#1b374a;transform:translateY(-1px)}
.sub-style-choice.selected{border-color:#3acfd9;box-shadow:inset 0 0 0 1px #2b9cba,0 0 0 2px #16485d77;background:#184253;color:#eefcff}
.sub-style-choice:focus-visible{outline:2px solid #76dce9;outline-offset:2px}
.sub-style-symbol{font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif;font-size:22px;line-height:1.2}
#subscriptionDialog label[for="subNodeName"]{margin:0 0 8px}
#subscriptionDialog #subNodeName{border:1px solid #355970;background:#091827;padding:12px 13px;border-radius:10px;color:#ecf7fd;font-size:13px;min-height:44px}
#subscriptionDialog #subNodeName:focus{outline:2px solid #299cb5;outline-offset:1px}
.sub-live-preview{display:flex;align-items:center;gap:11px;padding:14px;margin:13px 0 26px;border-radius:14px;background:linear-gradient(105deg,#163247,#112439);border:1px solid #2d536d;min-width:0}
.sub-preview-emblem{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;color:#bcfcfd;font-size:25px;background:#1b546d}
.sub-preview-details{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}.sub-preview-eyebrow{font-size:9px;color:#63b5ca;font-weight:700;letter-spacing:1px}
.sub-preview-details strong{font-size:14px;overflow-wrap:anywhere;line-height:1.4}.sub-preview-details small{font-size:11px;color:#7ea9bd}
.sub-preview-status{font-size:19px;color:#5ee5d4;align-self:center}
.sub-access-heading{margin-top:6px}
#subscriptionDialog #subUrl{font-size:11px;line-height:1.45;background:#0b1827;border:1px solid #314d65;border-radius:9px;resize:vertical;min-height:55px}
.sub-qr-row{display:flex;align-items:center;justify-content:center;gap:18px;border:1px solid #243e51;border-radius:13px;background:#0c1c2d;padding:15px;margin:13px 0 17px}
#subscriptionDialog .sub-qr-row .qr-wrapper{margin:0;flex:0 0 160px;width:160px;height:160px;padding:7px;display:flex;border-radius:12px;overflow:hidden;background:#fff}
#subscriptionDialog .sub-qr-row .qr-wrapper img{width:160px;height:160px;object-fit:contain}
.sub-qr-copy{flex:1;min-width:0}.sub-qr-copy strong{color:#ebf6ff;font-size:13px}.sub-qr-copy p{margin:9px 0;color:#99b7c8;font-size:11px;line-height:1.6}.sub-qr-copy>span{font-size:10px;color:#e0bd82;line-height:1.55;display:block}
.sub-info-note{border-left:2px solid #399ca9;background:#12314777;border-radius:0 9px 9px 0;color:#99c7d5;font-size:11px;line-height:1.7;padding:11px 12px;margin:0 0 12px}
#subscriptionDialog .dialog-actions{padding:0;margin-top:16px;gap:10px}
#subscriptionDialog .dialog-actions button{transition:filter .15s, transform .15s}
#subscriptionDialog .dialog-actions button:hover{filter:brightness(1.12)}
.subscription-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,335px),1fr));gap:13px}
.subscription-item{display:flex;flex-direction:column;align-items:stretch;gap:15px;flex-wrap:nowrap;position:relative;background:linear-gradient(145deg,#172c41,#101e2e);border:1px solid #2a4960;border-radius:15px;padding:17px;overflow:hidden}
.subscription-item:before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:linear-gradient(90deg,#286dc0,#48d5d0,transparent)}
.sub-list-top{display:flex;justify-content:space-between;align-items:start;gap:9px}
.sub-list-identity{display:flex;gap:10px;align-items:center;min-width:0;flex:1}
.sub-list-avatar{display:grid;place-items:center;width:35px;height:35px;flex-shrink:0;border-radius:10px;background:#1a506c;color:#70dce5;font-size:23px}
.sub-list-identity>div{display:flex;flex-direction:column;min-width:0;gap:4px}
.sub-list-identity strong{font-size:13px;overflow-wrap:anywhere}.sub-list-identity small{font-size:10px;color:#7f9fb7;overflow-wrap:anywhere}
.sub-list-status{flex-shrink:0;border-radius:80px;padding:5px 8px;font-size:10px;font-weight:700;background:#174b4670;border:1px solid #286758;color:#58e8bc}
.sub-list-status.sub-list-off{background:#4d343674;color:#efa4a0;border-color:#6d3c45}
.sub-list-node{border-radius:10px;background:#0d1e30;border:1px solid #2c4860;padding:12px;color:#e2f2ff;font-size:13px;line-height:1.5;min-height:46px;overflow-wrap:anywhere}
.sub-list-bottom{display:flex;justify-content:space-between;align-items:center;gap:11px;flex-wrap:wrap}
.sub-list-frequency{color:#78afc2;font-size:10px;font-weight:650}
.sub-list-bottom .tag-btn{white-space:normal;text-align:center}
@media(max-width:550px){
 #subscriptionDialog .dialog-card{padding:17px;max-width:100%}
 .sub-style-grid{gap:6px}
 .sub-style-choice{min-height:62px;font-size:10px}
 .sub-qr-row{gap:13px;padding:12px;flex-direction:column}
 #subscriptionDialog .sub-qr-row .qr-wrapper{flex:0 0 130px;width:130px;height:130px;padding:5px}
 #subscriptionDialog .sub-qr-row .qr-wrapper img{width:120px;height:120px}
 .sub-qr-copy{text-align:center;width:100%}
 .sub-qr-copy p{font-size:10px;margin:5px 0}
 .sub-qr-copy>span{text-align:center}
}
@media(max-width:360px){.sub-qr-row{flex-direction:column}.sub-qr-copy{text-align:center}.sub-qr-copy>span{text-align:left}.sub-benefits{gap:5px}}
@media(prefers-reduced-motion:reduce){.sub-style-choice{transition:none}.sub-style-choice:hover{transform:none}}

/* v2.2 subscription client selector */
.sub-client-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 0 18px}
.sub-client{border:1px solid #304a60;border-radius:10px;background:#14283b;color:#e5f4fd;padding:12px 9px;text-align:left;cursor:pointer;min-width:0}
.sub-client strong,.sub-client small{display:block;overflow-wrap:anywhere}
.sub-client strong{font-size:12px}.sub-client small{font-size:10px;color:#8fb0c5;margin-top:5px}
.sub-client.selected{border-color:#50d4ef;background:#164560;box-shadow:inset 0 0 0 1px #3ca6ca55}
.sub-client:focus-visible{outline:2px solid #65ddef;outline-offset:2px}
@media(min-width:600px){.sub-client-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* RELAIDEX Security Center v2.2 */
.security-center{grid-column:1/-1}.security-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 20px 20px}
.security-metric{background:linear-gradient(135deg,#153146,#14263a);border:1px solid #2a5268;border-radius:13px;display:flex;flex-direction:column;gap:7px;padding:16px;min-width:0}
.security-metric>span{font-size:11px;color:#89b1c9}.security-metric>strong{font-size:27px;color:#d3f5fc;font-weight:720;overflow-wrap:anywhere}
.security-metric>strong.security-state{font-size:20px;color:#4fe2c6}.security-metric>strong.security-locked{color:#ffaaa3}.security-metric>small{font-size:10px;color:#7798ad;line-height:1.5}
.security-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:0 20px 18px}.security-pane{border:1px solid #294259;border-radius:13px;background:#102034;min-width:0;overflow:hidden}
.security-pane-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px;border-bottom:1px solid #263e52}.security-pane-head strong{font-size:14px;color:#e3f4fc}.security-pane-head p{margin:5px 0 0;font-size:11px;color:#8aa5b8}.security-pane-head .tag-btn{white-space:normal;text-align:center}
.security-entries{padding:5px 15px 10px;max-height:380px;min-height:70px;overflow-y:auto;color:#94b0c1;font-size:12px}.security-entry{padding:12px 2px;border-bottom:1px solid #213449;display:flex;align-items:center;gap:11px;min-width:0}.security-entry:last-child{border-bottom:0}.security-entry>div{min-width:0}.security-entry strong{font-size:12px;color:#ddf0f9;display:block;overflow-wrap:anywhere;font-weight:650}.security-entry small{display:block;margin-top:5px;font-size:10px;color:#8da8b9;line-height:1.55;overflow-wrap:anywhere}
.security-chip{font-size:8px;color:#7af1d1;border:1px solid #2a7b70;background:#16473e;border-radius:30px;padding:3px 6px;vertical-align:middle}.security-event-symbol{flex:0 0 25px;width:25px;height:25px;border-radius:8px;display:grid;place-items:center;font-size:13px}.security-event-good{color:#68e2c6;background:#19423f}.security-event-bad{color:#ffaeae;background:#472a38}
.security-fineprint{font-size:10px;line-height:1.55;color:#7696ac;padding:11px 16px 14px}.security-center .tiny-caption{padding-top:4px;overflow-wrap:anywhere}
#securityLogoutDialog .dialog-card{max-width:460px}#securityLogoutDialog .dialog-actions{flex-wrap:wrap}#securityLogoutDialog .dialog-actions button{white-space:normal;min-height:44px}
@media(max-width:1100px){.security-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.security-columns{grid-template-columns:1fr;gap:12px;padding:0 12px 12px}.security-metrics{gap:8px;padding:0 12px 16px}.security-metric{padding:12px}.security-metric>strong{font-size:23px}.security-pane-head{flex-wrap:wrap}.security-pane-head .tag-btn{font-size:11px}}