.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 0 22px;}
@media (max-width:680px){.stat-grid{grid-template-columns:repeat(2,1fr);}.card{padding:24px;}.card.wide{padding:20px;}}
.stat{border:1px solid var(--line-soft);border-radius:10px;padding:24px 22px;background:var(--paper-2);}
.stat .n{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:26px;color:var(--accent);line-height:1.1;}
.spd{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-2);white-space:nowrap;}
.meter{height:6px;margin-top:7px;background:var(--field);border:1px solid var(--line-soft);border-radius:3px;overflow:hidden;min-width:90px;}
.meter>i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s ease;}
.lim{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.lim-count{font-family:"IBM Plex Mono",monospace;font-size:14px;white-space:nowrap;}
.lim-form{display:flex;align-items:center;gap:10px;margin:0;}
.lim-form input[type=range]{width:104px;padding:0;margin:0;border:none;background:transparent;accent-color:var(--accent);}
.stat .l{margin-top:10px;font-size:13px;color:var(--ink-soft);}

.who{font-weight:600;font-size:21px;}
.devices{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px;margin-top:4px;}
.device{border:1px solid var(--line-soft);border-radius:12px;padding:24px;margin:0;background:var(--paper-2);
  display:flex;flex-direction:column;gap:18px;}
.device > *{margin:0;}
.dev-head{display:flex;flex-direction:column;gap:12px;}
.dev-name{width:100%;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:15px;}
.dev-actions{display:flex;gap:10px;flex-wrap:wrap;}
.dev-actions form{margin:0;}
.device .suburl{margin:0;}
.device .qr{margin:0 auto;}
.dev-label{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:15px;}

/* clients/apps tab — grid of download cards (.app-card, not .app — body has class "app") */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;}
.app-card{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:12px;
  padding:22px 24px;text-decoration:none;color:var(--ink);transition:border-color .12s,transform .12s;}
.app-card:hover{border-color:var(--ink);transform:translateY(-2px);text-decoration:none;}
.app-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
.app-h h3{margin:0;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:16px;}
.app-dl{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--accent);}
.app-dl .ic{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.app-card p{margin:0 0 14px;font-size:13px;color:var(--ink-soft);line-height:1.45;}
.app-card .chips{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;}
.app-card .chip{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-2);border:1px solid var(--line-soft);border-radius:3px;padding:3px 8px;}

body.app{display:block;padding:0;}
.shell{min-height:100vh;}
.rail{position:fixed;top:0;left:0;bottom:0;z-index:60;width:62px;background:var(--paper);border-right:1.5px solid var(--ink);
  display:flex;flex-direction:column;gap:3px;padding:14px 11px;overflow:hidden;transition:width .16s ease;}
.rail:hover{width:212px;box-shadow:6px 0 26px rgba(0,0,0,.18);}
.content{margin-left:62px;min-width:0;padding:46px 48px 90px;}
.page{width:100%;max-width:960px;margin:0 auto;}
.page.wide{max-width:1240px;}

.ptitle{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:23px;letter-spacing:.01em;
  color:var(--ink);margin:0 0 26px;padding:0;}

.block{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:12px;padding:30px 32px;margin:30px 0;}
.block:last-child{margin-bottom:0;}
.block > h2:first-child{margin-top:0;}
.block > :last-child{margin-bottom:0;}
.block > form:last-child > button[type=submit]{margin-bottom:0;}
.block .table-wrap{background:none;border:none;border-radius:0;}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:20px;}
body.app form > button[type=submit]{width:auto;}
body.app .add{background:var(--paper-2);}

.rlogo{display:block;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:18px;color:var(--ink);
  text-align:center;white-space:nowrap;margin:2px 0 14px;text-decoration:none;}
.rlogo:hover{text-decoration:none;}
.rlogo .mir{color:var(--accent);}
.rail:hover .rlogo{text-align:left;padding-left:9px;}

.racct{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;}
.ravi{width:36px;height:36px;flex:none;border-radius:50%;border:1.5px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);}
.racct .lbl{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-2);white-space:nowrap;}
.rail:hover .racct{justify-content:flex-start;padding-left:3px;}

.rnav{display:flex;flex-direction:column;gap:3px;}
.rfoot{margin-top:auto;display:flex;flex-direction:column;gap:3px;padding-top:10px;}

.rail .tab,.ritem{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;text-align:left;
  background:none;border:none;border-radius:6px;color:var(--ink-soft);cursor:pointer;text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:13.5px;padding:11px 10px;white-space:nowrap;transition:background .12s;}
.rail .tab:hover,.ritem:hover{color:var(--ink);background:var(--paper-2);transform:none;text-decoration:none;}
.rail .tab.active{background:var(--accent);color:#fff;}
.rail:hover .tab,.rail:hover .ritem{justify-content:flex-start;}
.rail .tab .lbl,.ritem .lbl,.rlogo .lbl,.racct .lbl{display:none;}
.rail:hover .tab .lbl,.rail:hover .ritem .lbl,.rail:hover .rlogo .lbl,.rail:hover .racct .lbl{display:inline;}
.rail .ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ritem.js-theme .ic-sun{display:none;}.ritem.js-theme .ic-moon{display:block;}
:root[data-theme="dark"] .ritem.js-theme .ic-sun{display:block;}:root[data-theme="dark"] .ritem.js-theme .ic-moon{display:none;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ritem.js-theme .ic-sun{display:block;}:root:not([data-theme="light"]) .ritem.js-theme .ic-moon{display:none;}}

.topbar{display:none;align-items:center;gap:12px;background:var(--paper);}
.hamb{background:none;border:none;color:var(--ink);cursor:pointer;padding:4px;display:inline-flex;}
.hamb:hover{transform:none;}
.hamb .ic{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.topbar-title{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:17px;}
.rail-overlay{display:none;}

body.app .table-wrap{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:12px;}

html{scrollbar-width:thin;scrollbar-color:var(--line-soft) transparent;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:7px;border:3px solid var(--paper);}
::-webkit-scrollbar-thumb:hover{background:var(--ink-soft);}

@media (max-width:860px){
  .rail,.rail:hover{width:236px;box-shadow:0 0 44px rgba(0,0,0,.32);transition:transform .2s ease;transform:translateX(-100%);}
  .rail.open{transform:none;}
  .rail .rlogo{text-align:left;padding-left:9px;}
  .rail .racct{justify-content:flex-start;padding-left:3px;}
  .rail .tab,.rail .ritem{justify-content:flex-start;}
  .rail .tab .lbl,.rail .ritem .lbl,.rail .rlogo .lbl,.rail .racct .lbl{display:inline;}
  .content{margin-left:0;padding:0 16px 60px;}
  .block{padding:22px 18px;margin-bottom:18px;}
  .add{padding:4px 18px;margin-bottom:18px;}
  .ptitle{display:none;}
  .stat-grid{gap:14px;}
  .topbar{display:flex;margin:0 -16px 18px;padding:14px 16px;border-bottom:1.5px solid var(--ink);}
  .rail-overlay{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s;}
  .rail-overlay.show{opacity:1;pointer-events:auto;}
}

.tab-panel{display:none;}
.tab-panel.active{display:block;animation:fadein .2s ease;}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}

.toast{
  position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:100;
  max-width:min(620px,92vw);display:flex;align-items:center;gap:16px;
  background:#1B1915;color:#F1ECE1;border:1.5px solid #1B1915;
  padding:15px 18px;border-radius:5px;box-shadow:0 14px 44px rgba(0,0,0,.32);
  font-family:"IBM Plex Mono",monospace;font-size:14px;line-height:1.5;animation:toastin .22s ease;
}
.toast-x{
  background:none;border:none;color:#F1ECE1;font-size:22px;line-height:1;padding:0 2px;
  cursor:pointer;flex:none;
}
.toast-x:hover{color:var(--accent);transform:none;}
@keyframes toastin{from{opacity:0;transform:translate(-50%,-8px);}to{opacity:1;transform:translate(-50%,0);}}

.tg-login{display:flex;justify-content:center;margin:6px 0 12px;}
.btn-tg{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:#29A0E0;border:1.5px solid #29A0E0;color:#fff;border-radius:6px;
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14px;letter-spacing:.01em;
  padding:12px 22px;cursor:pointer;transition:transform .12s,filter .12s;width:auto;}
.btn-tg:hover{transform:translateY(-1px);filter:brightness(1.06);}
.btn-tg svg{width:20px;height:20px;flex:none;display:block;}
#tg-loading{display:none;padding:52px 0;text-align:center;color:var(--ink-soft);font-family:"IBM Plex Mono",monospace;font-size:15px;}

html.tg body{background-image:none;padding:0;display:block;min-height:auto;}
html.tg .card{max-width:none;border:none;border-radius:0;box-shadow:none;padding:16px 16px 40px;}
html.tg .brand{display:none;}
html.tg #tg-loading{display:block;}
html.tg #login-content{display:none;}

.theme-fab{
  position:fixed;top:18px;right:18px;z-index:120;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:1.5px solid var(--line-soft);border-radius:8px;background:var(--paper);color:var(--ink);
  cursor:pointer;padding:0;box-shadow:0 6px 18px rgba(0,0,0,.12);transition:border-color .15s;
}
.theme-fab:hover{border-color:var(--ink);transform:none;}
.theme-fab svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;}
.theme-fab .ic-sun{display:none;} .theme-fab .ic-moon{display:block;}
:root[data-theme="dark"] .theme-fab .ic-sun{display:block;} :root[data-theme="dark"] .theme-fab .ic-moon{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-fab .ic-sun{display:block;}
  :root:not([data-theme="light"]) .theme-fab .ic-moon{display:none;}
}
html.tg .theme-fab{top:10px;right:10px;}
.lang-fab{
  position:fixed;top:18px;right:68px;z-index:120;display:inline-flex;align-items:center;justify-content:center;
  height:42px;min-width:42px;padding:0 12px;border:1.5px solid var(--line-soft);border-radius:8px;
  background:var(--paper);color:var(--ink);cursor:pointer;font-family:"IBM Plex Mono",monospace;font-weight:600;
  font-size:12px;letter-spacing:.04em;box-shadow:0 6px 18px rgba(0,0,0,.12);transition:border-color .15s;
}
.lang-fab:hover{border-color:var(--ink);}
html.tg .lang-fab{top:10px;right:60px;}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:6px;}
.plans .plan{position:relative;display:flex;flex-direction:column;gap:5px;margin:0;
  background:var(--paper);border:1.5px solid var(--line-soft);border-radius:12px;padding:22px 22px 20px;
  transition:border-color .12s,transform .12s;}
.plans .plan:hover{border-color:var(--ink);transform:translateY(-3px);}
.plans .plan-best{border-color:var(--accent);}
.plans .plan-term{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.plans .plan-price{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:30px;color:var(--ink);line-height:1.05;}
.plans .plan-permonth{font-size:13px;color:var(--ink-soft);margin-bottom:16px;}
.plans .plan-badge{position:absolute;top:16px;right:16px;background:var(--accent);color:#fff;
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:11px;letter-spacing:.02em;padding:3px 9px;border-radius:20px;}
body.app .plans .plan button[type=submit]{width:100%;margin-top:auto;}
table.admin td input:not([type=checkbox]),table.admin td select{margin:0;padding:9px 11px;font-size:13px;}
table.admin td.actions button{white-space:nowrap;}
table.admin td .muted{white-space:nowrap;}
.tab-panel > .table-wrap{margin-bottom:22px;}

/* multihop chain map (servers tab) */
.hint{margin-top:-14px;margin-bottom:20px;font-size:13px;}
.chains{display:flex;flex-direction:column;gap:24px;}
.chain{display:flex;align-items:stretch;flex-wrap:wrap;gap:0;}
.chain-node{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:188px;
  border:1.5px solid var(--line-soft);border-radius:11px;background:var(--paper);padding:13px 16px;}
.chain-row{display:flex;align-items:center;gap:9px;min-width:0;}
.cc{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:11px;letter-spacing:.05em;flex:none;
  border:1px solid var(--line-soft);border-radius:4px;padding:2px 7px;color:var(--ink-2);}
.cn-name{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cn-foot{display:flex;align-items:center;gap:8px;}
.cn-ip{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft);}
.cn-stat{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-soft);margin-left:auto;}
.cn-stat.off{color:var(--danger);}
.badge{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 9px;border-radius:20px;border:1px solid var(--line-soft);color:var(--ink-soft);flex:none;}
.badge-ok{color:var(--ok);}
.badge-off{color:var(--danger);}
.chain-arrow{flex:none;align-self:center;padding:0 20px;color:var(--accent);font-size:20px;line-height:1;font-weight:600;}
.chain-exits{display:flex;flex-direction:column;gap:12px;}
.chain-end{display:flex;align-items:center;justify-content:center;text-align:center;
  border:1.5px dashed var(--line-soft);border-radius:11px;background:var(--paper-2);padding:13px 18px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);}
.chain-direct{display:flex;align-items:center;border:1.5px dashed var(--line-soft);border-radius:11px;
  padding:13px 16px;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-soft);}
.chain.is-off{opacity:.5;}
.chains-idle{margin-top:14px;font-size:13px;color:var(--ink-soft);}
.chains-idle .cc{margin-right:5px;}
.pinlist{display:flex;flex-direction:column;gap:22px;margin-top:18px;}
.pinrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:0;
  padding:16px 22px;background:var(--field);border:1.5px solid var(--line-soft);border-radius:10px;}
.pinrow .cc{flex:none;}
.pin-name{flex:none;font-weight:500;}
.pin-ip{flex:none;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft);}
.pinrow .chain-arrow{padding:0 2px;font-size:16px;}
.pinrow select{flex:1 1 220px;width:auto;min-width:180px;margin-top:0;}
.pinrow button{flex:none;}
.hy2cell{text-align:center;}
.fp-form{display:flex;align-items:center;gap:12px;margin:0;flex-wrap:wrap;}
.fp-label{display:flex;align-items:center;gap:10px;}
.fp-label select{width:auto;min-width:150px;margin-top:0;}
@media (max-width:680px){
  .chain{flex-direction:column;align-items:stretch;gap:7px;}
  .chain-node,.chain-end,.chain-direct,.chain-exits{width:100%;}
  .chain-arrow{align-self:center;padding:1px 0;transform:rotate(90deg);}
}

.load-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px;margin-bottom:24px;}
.load-card{border:1px solid var(--line-soft);border-radius:12px;background:var(--paper-2);
  padding:18px 20px;display:flex;flex-direction:column;gap:15px;}
.lc-head{display:flex;align-items:center;gap:10px;}
.lc-head .cn-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lc-head .lc-stat{margin-left:auto;}
.lc-online{display:flex;align-items:baseline;gap:8px;}
.lc-num{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:26px;color:var(--accent);line-height:1;}
.lc-lbl{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);}
.lc-rate{display:flex;flex-direction:column;gap:5px;}
.lc-row{display:flex;align-items:center;justify-content:space-between;}
.lc-dir{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);}
.lc-rate .spd{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-2);}
.lc-rate .meter{margin:2px 0 6px;}
@media (max-width:680px){.load-grid{grid-template-columns:1fr;}}

.users-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 20px;}
#user-search{flex:1;min-width:220px;max-width:380px;margin:0;}
.hwid-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;margin-left:auto;}
.hwid-bar input{width:80px;margin:0;}

.users-list{display:flex;flex-direction:column;gap:12px;}
.ucard{border:1px solid var(--line-soft);border-radius:12px;background:var(--paper-2);
  padding:16px 18px;display:flex;flex-direction:column;gap:12px;}
.uc-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.uc-name{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:15px;color:var(--ink);}
.uc-left{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-soft);}
.ttl-soon{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;}
.uc-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);}
.uc-devices{display:flex;flex-direction:column;gap:8px;padding:11px 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.uc-dev-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;}
.uc-dev-row .lim-form{margin:0;display:flex;align-items:center;gap:10px;}
.uc-dev-row input[type=range]{width:120px;padding:0;margin:0;border:none;background:transparent;accent-color:var(--accent);}
.uc-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.uc-actions form{margin:0;}
.uc-actions .ulink{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--accent);margin-right:4px;}

.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:18px;}
.pg{min-width:34px;padding:6px 10px;border:1px solid var(--line-soft);border-radius:6px;background:var(--paper);
  color:var(--ink-2);cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:13px;}
.pg:hover:not(:disabled){border-color:var(--ink);}
.pg.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.pg:disabled{opacity:.4;cursor:default;}

/* operator page (limited Telegram mini-app role) */
.op{max-width:800px;}
.op-block{margin-bottom:30px;}
.op-block > h3{margin:0 0 14px;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:16px;}
.op-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;}
.op-app{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  border:1px solid var(--line-soft);border-radius:12px;background:var(--paper-2);padding:14px;}
.op-name{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:15px;}
.op-qr{width:132px;}
.op-qr svg{width:100%;height:auto;display:block;background:#fff;padding:8px;border-radius:6px;}
.op-platforms{font-size:11px;color:var(--ink-soft);}

/* SSH keys page */
.ssh-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.ssh-fp{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft);word-break:break-all;margin:10px 0 2px;}
.device .ssh-pub input{font-family:"IBM Plex Mono",monospace;font-size:12px;}
a.btn-sm{display:inline-block;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px;
  padding:8px 13px;border:1.5px solid var(--line-soft);border-radius:4px;color:var(--ink);}
a.btn-sm:hover{border-color:var(--ink);text-decoration:none;}