: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}}