/* NekoVPN-specific layout on top of neko-base.css (shared with NekoTrade) */
.scene-bg{inset:0;left:0;top:0;width:100%;height:100%;transform:none;background-size:cover;background-position:center}
.scene-bg.sc-off{background-image:var(--art-img-bg-off)}.scene-bg.sc-on{background-image:var(--art-img-bg-on)}.scene-bg.sc-settings{background-image:var(--art-img-bg-settings)}
/* main screen */
.vpn-stage{position:relative;height:100%;display:flex;align-items:center;justify-content:center;isolation:isolate}
.vpn-col{position:relative;width:292px;max-width:100%;display:flex;flex-direction:column;gap:14px;z-index:10}
.vpn-panel{display:flex;flex-direction:column;align-items:center;padding:20px 18px 18px;text-align:center}
.peer-pill{width:100%;height:2.75rem;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-pill);background:var(--dd-bg);box-shadow:var(--shadow-hairline);font-weight:800;padding:0 14px;white-space:nowrap;overflow:hidden}
.peer-pill .dot{flex:none;color:var(--text-3)}.peer-pill.on .dot{color:var(--online);box-shadow:0 0 8px var(--online)}
.peer-pill span.nm{overflow:hidden;text-overflow:ellipsis}
.vpn-panel .ring{width:194px;height:194px;margin-top:20px}
.vpn-panel .ring svg{width:70px;height:70px}
.vpn-panel .ring:disabled{cursor:default}
.vpn-panel .ring.gleam .gleam{animation:glass-gleam 1.15s ease-out}
.ring .seed-flower{background-image:var(--art-img-blossom)}
html[data-art-blossom] .ring .seed-flower{display:block}
.status-line{margin-top:16px;font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--text-2);transition:color .4s;min-height:22px}
.status-line.on{color:var(--accent-hi)}
.status-sub{margin-top:4px;min-height:24px}
.shell-hint{margin-top:8px;font-size:11.5px;color:var(--text-3);line-height:1.4}
.traffic{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.traffic .chip b{color:var(--text);font-weight:800}
/* «Приложения» */
.apps-block{margin-top:18px}
.apps-count{margin-top:2px;min-height:32px;padding:4px 12px;border:0;border-radius:var(--radius-pill);background:none;color:var(--text-2);font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;transition:color .15s}
.apps-count:hover{color:var(--text)}
.apps-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.apps-list{display:flex;flex-wrap:wrap;gap:8px;max-height:132px;overflow:auto}
.app-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border-radius:var(--radius-pill);background:var(--btn-ghost);font-size:12.5px;font-weight:700;max-width:100%}
.app-chip.off{opacity:.55}
.app-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-chip .toggle{width:36px;height:22px}.app-chip .toggle::after{width:18px;height:18px}.app-chip .toggle.on::after{transform:translateX(16px)}
.app-chip .x{width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:var(--text-3);cursor:pointer;display:grid;place-items:center;font-size:12px}
.app-chip .x:hover{color:var(--bad);background:var(--btn-ghost-hover)}
.apps-add{display:flex;gap:8px;margin-top:12px}
.apps-add .input{min-height:38px;padding:7px 14px}
.apps-empty{font-size:12.5px;color:var(--text-3)}
/* character (sakura themes, admin art): left of the card while off, right while on — like the old NekoVPN */
.eva-fig{position:absolute;z-index:20;top:50%;height:var(--eva-height);pointer-events:none;transform:translateY(-50%);transition:opacity .85s cubic-bezier(.2,0,0,1),left .85s cubic-bezier(.2,0,0,1),right .85s cubic-bezier(.2,0,0,1);display:none}
html[data-eva] .eva-fig{display:block}
/* each figure's hip/waist line meets the tile edge: --eva-in-off / --eva-in-on = how deep the art's inner edge goes into
   the tile, in art heights (measured on the art; Сакура тёмная ON = the owner's ideal, 2026-10-31) */
.vpn-stage{--tile-half:146px;--eva-in-off:.095;--eva-in-on:.095}
html[data-theme="sakura_dark"] .vpn-stage{--eva-in-off:.135;--eva-in-on:.095}
html[data-theme="sakura_light"] .vpn-stage{--eva-in-off:.165;--eva-in-on:.197}
.eva-fig.is-left{right:calc(50% + var(--tile-half) - var(--eva-height) * var(--eva-in-off));left:auto}
.eva-fig.is-right{left:calc(50% + var(--tile-half) - var(--eva-height) * var(--eva-in-on));right:auto}
.eva-fig.is-hidden{opacity:0}
.eva-fig img{height:100%;width:auto;display:block;transform-origin:50% 42%;animation:eva-breathe 4.8s ease-in-out infinite;filter:var(--char-shadow)}
@keyframes eva-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012,1.02)}}
@media (prefers-reduced-motion:reduce){.eva-fig img{animation:none}}
@media (max-width:860px){html:not([data-compact]) .eva-fig{display:none!important}}
/* settings: no ✕, closes on Esc / outside click; character art on the right in sakura themes */
.settings-bg{align-items:center}
.settings-wrap{position:relative;max-width:680px;width:100%}
.settings-wrap .settings{max-width:none}
/* sakura themes: the character stands IN FRONT of the panel's right part. The glass runs on behind her and ends a sliver past her
   back (--eva-b of the art width, +14px); the content keeps its width and ends just before her body (--eva-a). She is fixed to the
   wrap, the content scrolls under her; the wrap is shifted left so panel + character stay centred. */
.settings-eva{display:none;position:absolute;z-index:2;top:50%;transform:translateY(-50%);pointer-events:none}
.settings-eva img{height:100%;width:auto;display:block;animation:eva-breathe 4.8s ease-in-out infinite;filter:var(--char-shadow)}
/* geometry (owner 2026-10-31): the panel is the SAME box in every theme and centred in the window; in sakura themes the
   glass runs --eva-extra past the content and the girl (as tall as on the main screen) stands over its right edge — the
   edge passes about through the middle of her body (--eva-left = art left edge -> panel edge). --eva-over = how far the
   widest girl sticks out on the right; the same room is kept on the left so the panel stays centred and identical. */
.settings-wrap{--eva-h:var(--eva-height,min(640px,calc(100vh - 64px)));--eva-extra:calc(var(--eva-h) * .1627);--eva-over:calc(var(--eva-h) * .232 - 14px);
  width:min(calc(670px + var(--eva-extra)),calc(100vw - 2 * var(--eva-over) - 24px));max-width:none;margin:0 auto}
html[data-eva] .settings-wrap{--eva-left:calc(14px + var(--eva-h) * .259)}
html[data-theme="sakura_dark"][data-eva] .settings-wrap{--eva-left:calc(4px + var(--eva-h) * .175)}
html[data-eva] .settings-wrap .settings{padding-right:calc(var(--eva-extra) + 20px)}
html[data-eva] .settings-eva{display:block;height:var(--eva-h);left:calc(100% - var(--eva-left))}
@media (max-width:900px),(max-height:430px){html[data-eva] .settings-eva{display:none}
  .settings-wrap{width:100%;max-width:680px}html[data-eva] .settings-wrap .settings{padding-right:30px}}
/* users tab */
.uavatar.dev svg{width:17px;height:17px}
.lrow .title .chip{font-size:11px;padding:2px 9px}
.stat.wide{width:150px}
.qr-box{display:grid;place-items:center;background:#fff;border-radius:var(--radius-md);padding:14px;margin-top:10px}
.qr-box img{width:280px;height:280px;display:block}
.sect{margin:16px 0 8px}
/* compact view (~380 px): one narrow column, no character, short title bar */
html[data-compact] main#root{padding:4px 10px 10px}
html[data-compact] #root>.vpn-stage,html[data-compact] #root>.screen{max-width:380px;margin:0 auto}
html[data-compact] .appname{display:none}
html[data-compact] .titlebar{padding:0 8px 0 12px}
html[data-compact] .tabs{margin-left:10px}
html[data-compact] .tab{padding:6px 11px}
html[data-compact] .vpn-col{width:214px}
html[data-compact] .vpn-panel .ring{width:140px;height:140px;margin-top:16px}
html[data-compact] .vpn-panel .ring svg{width:54px;height:54px}
html[data-compact] .vpn-stage{align-items:center;padding:0}
html[data-compact] .vpn-col{gap:10px}
html[data-compact] .lrow{flex-wrap:wrap;gap:10px}
html[data-compact] .lrow .stat{display:none}
html[data-compact] .panel{padding:16px 14px 10px}
html[data-compact] .panel-head h1{font-size:22px}
@media (max-width:640px){.lrow .stat{display:none}.panel-head .btn{padding:8px 12px}}
html[data-settings] .eva-fig{opacity:0!important}
/* browser download page (regular accounts) */
.dl-card{text-align:center;padding:34px 34px 30px}
.dl-card .login-brand{margin:0 0 16px}
.dl-card h1{font-size:26px;margin-bottom:8px}
.dl-card .muted{font-size:13px;line-height:1.5}
.dl-card .btn{width:100%;margin-top:22px;padding:11px}
/* device of this PC (shell): picker inside the power card */
button.peer-pill{border:0;color:var(--text);font:inherit;font-weight:800;cursor:default}
button.peer-pill.can-pick{cursor:pointer}
button.peer-pill.can-pick:hover{box-shadow:0 0 0 1px var(--dd-menu-border)}
.vpn-main{display:flex;flex-direction:column;align-items:center;width:100%}
.dev-pick{width:100%;display:flex;flex-direction:column;gap:10px;padding:6px 0 2px}
.dev-pick-title{font-family:var(--font-display);font-weight:800;font-size:16px;margin-bottom:2px}
.dev-list{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow:auto;padding:4px;border-radius:1rem;background:var(--dd-bg);box-shadow:var(--shadow-hairline)}
.dev-opt{display:flex;align-items:center;gap:10px;min-height:2.6rem;padding:.4rem .9rem;border:0;border-radius:.75rem;background:transparent;color:var(--text);font-weight:800;cursor:pointer;text-align:left;transition:background .12s}
.dev-opt:hover{background:var(--dd-hover-bg)}
.dev-opt.is-active{background:var(--dd-active-bg);color:var(--dd-active-fg)}
.dev-opt .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-opt .dot{color:var(--text-3)}.dev-opt .dot.on{color:var(--online)}
.dev-pick .btn{width:100%}
.dev-cancel{margin-top:-2px}
/* drag & drop order of the device rows (long press, no handles) */
.list .lrow[data-pid]{position:relative;transition:transform .2s cubic-bezier(.2,0,0,1),box-shadow .2s,background .2s}
.list .lrow.no-anim{transition:none!important}
html.is-reordering,html.is-reordering *{user-select:none!important;-webkit-user-select:none!important;cursor:grabbing!important}
.list .lrow.is-lifted{z-index:5;opacity:1;transition:box-shadow .2s,background .2s;background:var(--bg-1);border-radius:var(--radius-md,14px);
  box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 0 1px var(--dd-menu-border);animation:row-lift .26s cubic-bezier(.2,0,0,1)}
.list .lrow.is-lifted.is-dropping{transition:transform .18s cubic-bezier(.2,0,0,1),box-shadow .18s}
@keyframes row-lift{0%{scale:1}45%{scale:1.03}100%{scale:1}}
html.is-reordering .list{overflow:visible}

/* PC shell: «Туннель поднят, но трафик не идёт» */
.conn.warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}

/* compact (~380 px): settings fit the window, the theme dropdown goes under its title instead of overflowing */
html[data-compact] .settings-bg{padding:4px 8px 8px}
html[data-compact] .settings{padding:18px 16px;max-height:calc(100vh - 64px)}
html[data-compact] .srow{gap:12px}
html[data-compact] .srow-dd{flex-wrap:wrap}
html[data-compact] .srow-dd .grow{flex:1 1 100%}
html[data-compact] .settings .theme-dd{width:100%;flex:1 1 100%}
html[data-compact] .settings .grid2{grid-template-columns:1fr}
html[data-compact] .update-bar{max-width:calc(100vw - 16px);gap:8px;font-size:12.5px;bottom:12px;padding-left:14px}
.update-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-compact][data-eva] .settings-wrap .settings{padding-right:16px}
/* one character at a time (sakura themes: the same girl in different outfits): while Settings shows her beside the panel,
   the figures of the screen underneath (lying one under «Пользователи», the one by the power button) fade out */
html[data-list-art] .list-art{transition:opacity .3s ease}
html[data-settings] .list-art{opacity:0!important}
html[data-settings] .eva-fig{opacity:0!important;transition:opacity .3s ease}
/* PC shell: WireSock auto-install line under the status */
.ws-line{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:4px;font-size:13px;color:var(--text-2);text-align:center}
.ws-line[hidden]{display:none}
.ws-bar{width:180px;height:4px;border-radius:2px;background:var(--divider);overflow:hidden;position:relative}
.ws-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .3s}
.ws-bar.busy i{width:35%;position:absolute;animation:ws-busy 1.2s ease-in-out infinite}
@keyframes ws-busy{0%{left:-35%}100%{left:100%}}

/* «Главная / Пользователи» exactly on the window's centre axis (same as the power tile); compact keeps the flow layout */
.titlebar .tabs{position:absolute;left:50%;transform:translateX(-50%);margin-left:0}
html[data-compact] .titlebar .tabs{position:static;transform:none;margin-left:10px}
/* the update bar never covers content: room is reserved at the bottom while it is shown */
html[data-update-bar] main#root{padding-bottom:72px}
html[data-update-bar] .settings-bg{bottom:64px}
html[data-update-bar] .settings{max-height:calc(100vh - 140px)}
html[data-update-bar] .settings-wrap{--eva-h:min(640px,calc(100vh - 140px))}

/* region (server) selector above the power button, like the old NekoVPN's tunnel pill: icon · name · chevron (only with 2+) */
.region-pill{display:grid!important;grid-template-columns:20px minmax(0,1fr) 20px;gap:6px;padding:0 12px!important}
.region-pill .rg-ico{width:20px;height:20px;display:grid;place-items:center;object-fit:contain}
.region-pill .dot{color:var(--text-3)}.region-pill.on .dot{color:var(--online);box-shadow:0 0 8px var(--online)}
.region-pill .nm{text-align:center}
.region-pill .dd-chev{width:16px;height:16px;color:var(--text-3);transition:transform .2s}
.region-pill .dd-chev svg{width:16px;height:16px}
.region-pill.is-open .dd-chev{transform:rotate(180deg)}
button.region-pill.can-pick{cursor:pointer}
.region-menu .dd-opt{text-align:center}
/* «Серверы» block in Settings */
.servers-block{margin-top:18px}
.rg-list{display:flex;flex-direction:column;gap:4px}
.rg-row{display:flex;align-items:center;gap:2px;border-radius:12px;padding-right:4px;transition:background .15s}
.rg-row:not(.is-active):hover{background:var(--dd-hover-bg)}
.rg-row.is-active{background:var(--dd-active-bg)}
.rg-pick{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:2.5rem;padding:.3rem .85rem;border:0;background:none;color:var(--text);font:inherit;font-weight:800;cursor:pointer;text-align:left;border-radius:12px}
.rg-row.is-active .rg-pick{cursor:default;color:var(--dd-active-fg)}
.rg-pick .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-pick .dot{color:var(--text-3)}.rg-row.is-active .dot{color:var(--accent)}
.dev-row.flash{animation:row-flash 1.4s ease}
@keyframes row-flash{0%,60%{background:var(--dd-active-bg)}100%{background:transparent}}
/* apps: compact chips */
.apps-list{gap:6px;max-height:170px}
.app-chip{gap:4px;padding:2px 2px 2px 11px;font-size:12px}
.app-chip .toggle{width:30px;height:18px;margin-left:2px}.app-chip .toggle::after{width:14px;height:14px}.app-chip .toggle.on::after{transform:translateX(14px)}
.app-chip .x{width:20px;height:20px;font-size:10px}
/* one block at a time: while Settings is open the screen underneath (power tile / users) fades out, only the background stays */
main#root{transition:opacity .3s ease}
html[data-settings] main#root{opacity:0;pointer-events:none}
/* compact (Android-like): smaller tile in the middle; the same girl stays, tall, partly UNDER the frosted tile (blurred
   through it) so she never covers the button */
html[data-compact] .vpn-stage{--tile-half:107px;--eva-in-off:.185;--eva-in-on:.135}
html[data-compact] .eva-fig{z-index:5;height:min(600px,calc(100vh - 56px))}
html[data-compact] .eva-fig.is-left{right:calc(50% + var(--tile-half) - min(600px,calc(100vh - 56px)) * var(--eva-in-off))}
html[data-compact] .eva-fig.is-right{left:calc(50% + var(--tile-half) - min(600px,calc(100vh - 56px)) * var(--eva-in-on))}
html[data-compact] .vpn-panel{padding:14px 14px 12px}
html[data-compact] .region-pill{height:2.4rem;font-size:13.5px}
html[data-compact] .status-line{margin-top:12px;font-size:15px}
#win{overflow:clip}   /* overflow:hidden boxes can still be scrolled by focus(); the girls stick out of the window on purpose */
/* compact title bar fits 360–380 px: smaller buttons/tabs; with the admin's two tabs the logo makes room */
html[data-compact] .tb-right{gap:2px}
html[data-compact] .tb-btn{width:28px;height:28px}
html[data-compact] .tabs{margin-left:8px}
html[data-compact] .tab{padding:6px 8px;font-size:12px}
html[data-compact] .titlebar:has(.tabs:not([hidden])) .brand{display:none}
html[data-compact] .titlebar:has(.tabs:not([hidden])) .tabs{margin-left:0}
/* compact, Сакура светлая (owner 2026-10-31): anchored to the window edges instead of the tile — OFF: her raised elbow at the
   left edge; ON: her whole body visible, the right edge just past her hip (the stage starts 10px inside the window) */
html[data-theme="sakura_light"][data-compact] .eva-fig.is-left{left:-15px;right:auto}
html[data-theme="sakura_light"][data-compact] .eva-fig.is-right{right:-15px;left:auto}
.rg-host{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.server-form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* v11: account without servers — the power button stays visible but inert; calm grey status (not an error) */
.vpn-panel .ring.is-na{cursor:default;opacity:.42;filter:saturate(.4)}
.vpn-panel .ring.is-na .seed-flower{opacity:0}
.status-line.is-na{color:var(--text-2)}
/* admin: account dialog — server access toggles, current password (eye + copy) */
.acc-servers .row-check{margin-top:8px}
.acc-servers{padding:2px 2px 0}
.pw-line{display:flex;align-items:center;gap:6px}
.pw-line .input{flex:1;min-width:0;font-family:ui-monospace,Consolas,monospace;letter-spacing:.02em}
.pw-unknown{font-size:13px;padding:9px 2px}
/* v13 «Пользователи»: «Аккаунты» / «Устройства без аккаунта» / «Устройства с аккаунтом» */
.sect{display:flex;align-items:center;gap:8px}
.sect.first{margin-top:2px}
.sect-n{font-size:11px;font-weight:800;letter-spacing:0;color:var(--text-3);background:var(--btn-ghost);border-radius:var(--radius-pill);padding:1px 8px;min-width:22px;text-align:center}
.empty.sm{padding:16px 10px;font-size:12.5px}
.tg-ph{width:48px;flex:none}
.acc-row .actions{width:162px;justify-content:flex-end}
.ibtn:disabled{opacity:.35;cursor:default}
.srv-pick{margin-top:2px}
.srv-pick .rg-pick .dim{font-weight:600}
/* device limit 1…5: − N + and five dots */
.stepper{display:flex;align-items:center;gap:10px}
.stp-b{border-radius:50%}
.stp-b:disabled{opacity:.35;cursor:default}
.stp-v{min-width:22px;text-align:center;font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--text)}
.stp-dots{display:flex;gap:7px;margin-left:8px}
.stp-dot{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:var(--toggle-off);cursor:pointer;transition:background .15s,transform .15s}
.stp-dot.on{background:var(--accent)}
.stp-dot:hover{transform:scale(1.3)}
/* «Мои устройства» (Settings + the browser page of regular accounts) */
.md-block{margin-top:18px}
.md-head-n{margin-left:2px}
.md-count{font-size:11.5px;padding:2px 10px}
.md-list{display:flex;flex-direction:column;gap:2px}
.md-row{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:14px;transition:background .15s}
.md-row:hover{background:var(--dd-hover-bg)}
.md-row .uavatar{width:34px;height:34px}
.md-row.off .md-main,.md-row.off .uavatar{opacity:.55}
.md-main{min-width:0}
.md-row .t{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;min-width:0}
.md-row .t .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-row .t .chip{font-size:11px;padding:2px 9px;flex:none}
.md-row .s{font-size:12px;color:var(--text-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-row .actions{gap:4px}
.md-row .actions .ibtn{width:32px;height:32px}
.md-foot{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.md-foot:empty{display:none}
.dl-stack{height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:16px;padding:16px 12px}
.dl-stack .dl-card{flex:none}
.dl-stack .dl-card{width:400px;max-width:100%}
.md-card{width:400px;max-width:100%;flex:none;margin-top:0;padding:18px 18px 16px}
html[data-compact] .md-row .uavatar{display:none}
html[data-compact] .md-row{padding:8px 2px}
html[data-compact] .md-block{padding:14px 12px}
html[data-compact] .md-row .actions{gap:2px}
html[data-compact] .md-row .actions .ibtn{width:30px;height:30px}
@media (max-width:520px){.md-row .uavatar,.md-row .md-dl{display:none}.md-card{padding:16px 12px 14px}.md-row{padding:8px 4px}.md-row .actions{gap:2px}
  .dl-stack .dl-card{padding:26px 22px 22px}.dl-stack .dl-card h1{font-size:22px}}
/* v14: an account's devices open under it (chevron on the right; closed by default) */
.acc-group{position:relative;border-bottom:1px solid var(--divider)}
.acc-group:last-child{border-bottom:0}
.acc-group>.lrow{border-bottom:0}
.acc-row .main{cursor:default}
.acc-row.has-devs .main{cursor:pointer}
.acc-ctl{display:flex;align-items:center;gap:14px;flex:none}
.acc-chev{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:36px;min-width:52px;padding:0 8px 0 11px;border:0;border-radius:var(--radius-pill);
  background:var(--btn-ghost);color:var(--text-2);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;transition:background .15s,color .15s;flex:none}
.acc-chev:hover:not(:disabled){background:var(--btn-ghost-hover);color:var(--text)}
.acc-chev:disabled{opacity:.4;cursor:default}
.acc-chev-i{display:grid;place-items:center;width:18px;height:18px;transition:transform .28s cubic-bezier(.2,0,0,1)}
.acc-chev-i svg{width:16px;height:16px}
.acc-group.open .acc-chev{color:var(--accent-hi);background:var(--dd-active-bg)}
.acc-group.open .acc-chev-i{transform:rotate(180deg)}
.acc-devs{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s cubic-bezier(.2,0,0,1),opacity .22s ease}
.acc-group.open .acc-devs{grid-template-rows:1fr;opacity:1}
.acc-devs-in{min-height:0;overflow:hidden}
/* v14.1: no tree indent — the nested panel is symmetric and full width; panel inset 6px + row padding 10px = the 16px
   padding of top-level rows, so avatar / traffic / speed / buttons line up with «Устройства без аккаунта» */
.acc-devs-list{margin:0 6px 10px;border-radius:16px;background:var(--glass-nested);box-shadow:var(--shadow-hairline)}
.acc-devs-list .lrow{padding:12px 10px}
.list .acc-group{transition:transform .2s cubic-bezier(.2,0,0,1),box-shadow .2s,background .2s}
.list .acc-group.no-anim{transition:none!important}
.list .acc-group.is-lifted{z-index:5;transition:box-shadow .2s,background .2s;background:var(--bg-1);border-radius:var(--radius-md,14px);
  box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 0 1px var(--dd-menu-border);animation:row-lift .26s cubic-bezier(.2,0,0,1)}
.list .acc-group.is-lifted.is-dropping{transition:transform .18s cubic-bezier(.2,0,0,1),box-shadow .18s}
@media (prefers-reduced-motion:reduce){.acc-devs,.acc-chev-i{transition:none}}
/* narrow window / phone / compact: name on the first line, controls on the second */
@media (max-width:640px){
  .users-scroll .lrow{flex-wrap:wrap;row-gap:10px}
  .users-scroll .lrow .main{flex:1 1 calc(100% - 56px)}
  .users-scroll .lrow>.toggle{margin-left:52px}
  .users-scroll .lrow .tg-ph{display:none}
  .users-scroll .lrow>.actions{margin-left:auto}
  .acc-ctl{flex:1 1 100%;padding-left:52px;gap:10px}
  .acc-ctl .actions{width:auto;margin-left:auto}
  .acc-ctl .actions.ph{display:none}
  .acc-ctl .tg-ph+.actions.ph+.acc-chev,.acc-ctl .acc-chev{margin-left:auto}
  .acc-ctl .actions:not(.ph)+.acc-chev{margin-left:0}
  .panel{padding:16px 12px 10px}
}
html[data-compact] .users-scroll .lrow .main{flex:1 1 calc(100% - 56px)}
html[data-compact] .acc-ctl{flex:1 1 100%;padding-left:52px;gap:10px}
html[data-compact] .acc-ctl .actions{width:auto;margin-left:auto}
html[data-compact] .acc-ctl .actions.ph{display:none}
html[data-compact] .acc-ctl .acc-chev{margin-left:auto}
html[data-compact] .acc-ctl .actions:not(.ph)+.acc-chev{margin-left:0}
html[data-compact] .users-scroll .lrow .tg-ph{display:none}
html[data-compact] .users-scroll .acc-devs-list .lrow .tg-ph{display:block}   /* v14.1: nested buttons line up with the free rows (toggle slot) */
/* Android app (data-android, set by its bridge): phone touches, the apps block of the phone */
html[data-android]{-webkit-tap-highlight-color:transparent}
html[data-android] .a-apps .dd{width:100%}
html[data-android] .a-apps .app-chip{padding:5px 12px}
html[data-android] .settings .srow .btn.sm{flex:none}

/* 1.0.2: «Готово» in the Android settings rows stays a button (opens the system screen) */
button.chip-btn{border:0;font:inherit;font-size:12px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .15s,transform .1s}
button.chip-btn:hover{filter:brightness(1.08)}button.chip-btn:active{transform:scale(.96)}
/* 1.0.2: swipe between tabs — no browser back/forward overscroll gesture in narrow layouts */
html[data-compact],html[data-compact] body{overscroll-behavior-x:none}

/* 1.0.3: updates inbox («Почта обновлений»): envelope in the header + unread lamp, feed panel (same glass as settings) */
.tb-mail{position:relative}
.mail-dot{position:absolute;top:6px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 0 2px var(--bg-1),0 0 8px 2px var(--accent-hi);opacity:0;transform:scale(.4);transition:opacity .2s,transform .2s;pointer-events:none}
html[data-compact] .mail-dot{top:3px;right:2px;width:7px;height:7px}
.tb-mail.unread .mail-dot{opacity:1;transform:none;animation:mail-glow 2.4s ease-in-out infinite}
@keyframes mail-glow{0%,100%{box-shadow:0 0 0 2px var(--bg-1),0 0 5px 1px var(--accent-hi)}50%{box-shadow:0 0 0 2px var(--bg-1),0 0 12px 4px var(--accent-hi)}}
@media (prefers-reduced-motion:reduce){.tb-mail.unread .mail-dot{animation:none}}
.mail-card{max-width:560px;width:100%;display:flex;flex-direction:column;padding:22px 0 8px}
.mail-card h1{padding:0 26px 10px;margin:0}
.mail-feed{overflow:auto;padding:0 26px 14px;flex:1;min-height:0}
.mail-entry{padding:14px 0;border-bottom:1px solid var(--divider)}
.mail-entry:last-child{border-bottom:0}
.mail-entry .mh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mail-entry .mv{font-weight:800;font-size:15px;color:var(--text)}
.mail-entry .md{font-size:12px;color:var(--text-3,var(--text-2))}
.mail-entry .mt{margin-top:6px;font-weight:700;color:var(--text)}
.mail-entry ul{margin:6px 0 0;padding-left:18px;color:var(--text-2);font-size:13.5px;line-height:1.5}
.mail-entry .ma{margin-top:10px;display:flex;gap:8px}
.mail-empty{padding:18px 0;color:var(--text-2)}
html[data-compact] .mail-card{padding:16px 0 6px}html[data-compact] .mail-card h1{padding:0 16px 8px;font-size:24px}
html[data-compact] .mail-feed{padding:0 16px 10px}

/* 1.0.5: swipe between tabs follows the finger (same as NekoTrade 0.4.8+); no browser back/forward overscroll, no sideways scrollbar */
html[data-compact],html[data-compact] body{overscroll-behavior-x:none;overflow-x:hidden}

/* 1.0.6: device bound to this app (locked), bind tags, personal Telegram proxy */
.dev-locked{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--line,rgba(255,255,255,.12));font-weight:700;font-size:14px;white-space:nowrap;cursor:default;opacity:.92}
.lk{display:inline-flex;width:14px;height:14px;flex:none;color:var(--accent)}.lk svg{width:100%;height:100%}
.md-bind,.bind-tag{display:inline-flex;align-items:center;gap:5px}.md-bind .lk,.bind-tag .lk{width:12px;height:12px;opacity:.8}
.bind-tag{margin-left:8px}.bind-row>span{display:inline-flex;align-items:center;gap:7px}.bind-row{margin-top:12px}
.px-block{margin-top:14px}
.px-empty{display:flex;align-items:center;gap:12px;padding:10px 6px}
.px-ic{display:inline-flex;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;background:var(--dd-hover-bg);color:var(--accent);flex:none}.px-ic svg{width:18px;height:18px}
.px-line{display:flex;gap:8px;align-items:center;margin-top:10px}.px-link{flex:1;min-width:0;font-size:12.5px;text-overflow:ellipsis;font-family:ui-monospace,Consolas,monospace}
.px-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn.ghost.danger-t{color:#e5484d}
.chip.px-on{font-size:11px;padding:2px 9px;color:var(--online);border-color:currentColor}
.px-admin{margin-top:14px}.px-note{margin-top:4px}

/* 1.0.7: bound-device row without subtitle; proxy actions in one row (copy · regenerate · delete) */
.dev-row .s:empty{display:none}
.px-line .ibtn{flex:none}.px-line .px-regen{color:var(--accent)}.px-line .ibtn.danger{color:#e5484d}