/* 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:340px;max-width:100%;display:flex;flex-direction:column;gap:14px;z-index:10}
.vpn-panel{display:flex;flex-direction:column;align-items:center;padding:18px 20px 16px;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:14px}
.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:12px;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:36px}
.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-card{padding:16px 18px}
.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:5;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}
.eva-fig.is-left{right:calc(50% + 170px - 2.2rem);left:auto}
.eva-fig.is-right{left:calc(50% + 170px - 2.2rem);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){.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)}
html[data-eva] .settings-wrap{--eva-h:min(560px,calc(100vh - 80px));--eva-r:.491;--eva-a:.38;--eva-b:.76;--eva-w:calc(var(--eva-h) * var(--eva-r));
  max-width:calc(670px + var(--eva-w) * (var(--eva-b) - var(--eva-a)));margin-right:calc(var(--eva-w) * (1 - var(--eva-b)) - 14px)}
html[data-theme="sakura_dark"][data-eva] .settings-wrap{--eva-r:.332;--eva-a:.29;--eva-b:.78}
html[data-eva] .settings-wrap .settings{padding-right:calc(var(--eva-w) * (var(--eva-b) - var(--eva-a)) + 20px)}
html[data-eva] .settings-eva{display:block;height:var(--eva-h);left:calc(100% - 14px - var(--eva-w) * var(--eva-b))}
@media (max-width:900px),(max-height:430px){html[data-eva] .settings-eva{display:none}
  html[data-eva] .settings-wrap{margin-right:0;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] .eva-fig{display:none!important}
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:100%}
html[data-compact] .vpn-panel .ring{width:150px;height:150px}
html[data-compact] .vpn-panel .ring svg{width:54px;height:54px}
html[data-compact] .vpn-stage{align-items:flex-start;padding-top:4px}
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}