*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
--bg:#000000;--card:#111115;--border:#222230;--text:#e8e8ed;--text2:#8a8a99;
--accent1:#7c5bf5;--accent2:#5b8cf5;--green:#34d399;--red:#f87171;--yellow:#fbbf24;
--grad:linear-gradient(135deg,#7c5bf5,#5b8cf5);
}
html,body{height:100%;overflow:hidden}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:480px;margin:0 auto;position:relative;overflow:hidden;background:#000}
.header{padding:18px 20px 14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent}
.logo{display:flex;align-items:center}
.logo-text{font-family:'Unbounded',sans-serif;font-size:26px;font-weight:900;letter-spacing:2px;color:#fff}

/* Quick tiles row */
.quick-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-bottom:14px}
.quick-tile{aspect-ratio:1;border-radius:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s;position:relative;overflow:hidden;border:none;background:var(--card)}
.quick-tile:active{transform:scale(.96)}
.quick-tile-icon{display:none}
.quick-tile-label{display:none}
.quick-tile img{width:100%;height:100%;object-fit:cover;border-radius:18px;pointer-events:none}
.quick-tile-skel{aspect-ratio:1;border-radius:18px;background:linear-gradient(90deg,#1a1a2e 25%,#2a2a45 50%,#1a1a2e 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}

/* Bento grid — 2 left + 1 right tall */
.bento{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(140px,1fr) minmax(140px,1fr);gap:12px;margin-bottom:14px;position:relative}

/* Glass card base */
.bento-glass{border-radius:20px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:transform .15s;overflow:hidden;position:relative;background:rgba(255,255,255,.04);border:none;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.bento-glass:active{transform:scale(.97)}

/* Keys bento card */
.bento-glass.bento-keys{grid-column:1;grid-row:1;background:#14141a;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;cursor:pointer}
.bento-keys:active{transform:scale(.96)}
.bento-keys-icon{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.bento-keys-title{font-size:11px;font-weight:600;color:rgba(255,255,255,.45);line-height:1.3;letter-spacing:.2px}
.bento-keys-sub{font-size:10px;color:rgba(255,255,255,.5);margin-top:4px}
.bento-ring-wrap{position:relative;width:80px;height:80px;margin-bottom:6px}
.bento-ring-glow{position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(74,222,128,.12) 0%,transparent 70%);animation:bentoGlow 3s ease-in-out infinite}
@keyframes bentoGlow{0%,100%{opacity:.6;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
.bento-ring-svg{width:80px;height:80px}
.bento-ring-svg svg{animation:bentoSpin 20s linear infinite;transform-origin:center}
@keyframes bentoSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.bento-ring-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.bento-ring-num{font-size:22px;font-weight:900;color:#fff;line-height:1}
.bento-ring-den{font-size:12px;font-weight:600;color:rgba(255,255,255,.3)}

/* Keys popup */
.keys-popup-card{background:#14141a!important;opacity:0;pointer-events:none;position:fixed}
.keys-popup-card.morphing{overflow:hidden}
/* While the popup is morphing from bento → fullscreen, keep ALL contents fully hidden.
   Without this, JS-controlled inline opacity races the morph on first open and the
   inner devices/flags/buttons flash for a frame before the card finishes expanding. */
.keys-popup-card.morphing>*,
.sub-popup-card.sx-popup.morphing>*,
.sub-popup-card.corp-card.morphing>*{visibility:hidden!important}
.sub-popup-overlay.open .keys-popup-card{pointer-events:auto}
.keys-key-item{background:rgba(255,255,255,.06);border-radius:14px;padding:14px;margin-bottom:10px;width:100%}
.keys-key-name{font-size:14px;font-weight:700;color:#fff;margin-bottom:6px}
.keys-key-link{font-size:11px;color:rgba(255,255,255,.5);word-break:break-all;cursor:pointer;padding:8px;background:rgba(255,255,255,.04);border-radius:8px;margin-top:6px;transition:background .2s}
.keys-key-link:active{background:rgba(255,255,255,.12)}
.keys-key-btns{display:flex;gap:8px;margin-top:10px}
.keys-key-btn{flex:1;padding:10px;border-radius:10px;border:none;font-size:12px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:4px}
.keys-key-btn--copy{background:rgba(255,255,255,.1);color:#fff}
.keys-key-btn--copy:active{background:rgba(255,255,255,.2)}
.keys-key-btn--connect{background:#3b82f6;color:#fff}
.keys-key-btn--connect:active{background:#2563eb}
/* Keys popup — app tabs */
.kp-tabs{display:flex;gap:0;background:rgba(255,255,255,.06);border-radius:12px;padding:3px;margin-bottom:12px;width:100%}
.kp-tab{flex:1;padding:9px 4px;border-radius:10px;border:none;background:transparent;color:rgba(255,255,255,.4);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;white-space:nowrap}
.kp-tab.active{background:rgba(255,255,255,.12);color:#fff}
.kp-tab:active{transform:scale(.95)}
.kp-tab--disabled{opacity:.4}

/* Keys popup — platform tabs */
.kp-platforms{display:flex;gap:0;background:rgba(255,255,255,.04);border-radius:10px;padding:2px;margin-bottom:16px;width:100%}
.kp-plat{flex:1;padding:7px 4px;border-radius:8px;border:none;background:transparent;color:rgba(255,255,255,.35);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.kp-plat.active{background:rgba(255,255,255,.1);color:#fff}
.kp-plat:active{transform:scale(.93)}
.kp-plat svg{width:16px;height:16px;opacity:.5}
.kp-plat.active svg{opacity:1}

/* Keys popup — body/steps */
.kp-body{width:100%;animation:kpFadeIn .3s ease}
@keyframes kpFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.kp-step{display:flex;gap:12px;padding-bottom:18px;position:relative;animation:kpStepIn .4s ease both}
.kp-step:nth-child(1){animation-delay:.05s}
.kp-step:nth-child(2){animation-delay:.1s}
.kp-step:nth-child(3){animation-delay:.15s}
.kp-step:nth-child(4){animation-delay:.2s}
@keyframes kpStepIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.kp-step:last-child{padding-bottom:0}
.kp-step-marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.kp-step-num{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.kp-step-num--done{background:rgba(52,211,153,.15);color:#34d399}
.kp-step-line{width:2px;flex:1;background:rgba(255,255,255,.06);margin-top:6px}
.kp-step:last-child .kp-step-line{display:none}
.kp-step-content{flex:1;padding-top:2px}
.kp-step-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:3px}
.kp-step-title--done{color:#34d399}
.kp-step-desc{font-size:12px;color:rgba(255,255,255,.4);line-height:1.5;margin-bottom:8px}
.kp-btn{display:block;width:100%;padding:12px;border-radius:12px;border:none;font-size:14px;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;transition:all .15s;color:#fff;margin-bottom:6px}
.kp-btn:active{transform:scale(.97)}
.kp-btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.kp-btn--secondary{background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);font-size:12px;font-weight:600}
.kp-btn--copy{background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);font-size:12px;font-weight:600}
.kp-or{text-align:center;font-size:11px;color:rgba(255,255,255,.2);margin:8px 0}
.kp-link{font-size:11px;color:rgba(255,255,255,.3);word-break:break-all;padding:10px;background:rgba(255,255,255,.04);border-radius:8px;cursor:pointer;transition:background .15s;margin-bottom:8px}
.kp-link:active{background:rgba(255,255,255,.1)}
.kp-qr{display:flex;justify-content:center;padding:16px;background:#fff;border-radius:12px;margin-bottom:8px}
.kp-qr canvas{max-width:180px;max-height:180px}
.kp-coming{text-align:center;color:rgba(255,255,255,.25);font-size:14px;padding:40px 0;font-style:italic}
.kp-router-msg{text-align:center;color:rgba(255,255,255,.4);font-size:13px;padding:20px 0;line-height:1.6}

/* Keys popup v2 — header */
.kp-header{display:flex;align-items:center;justify-content:space-between;padding:4px 0 12px}
.kp-header-title{font-size:18px;font-weight:800;color:#fff}
.kp-header-counter{font-size:14px;color:rgba(255,255,255,.4);font-weight:600}
.kp-header-counter .kp-ring-num{font-size:14px;font-weight:800;color:#fff}
.kp-header-counter .kp-ring-sep{font-size:13px;color:rgba(255,255,255,.2)}
.kp-header-counter .kp-ring-den{font-size:13px;color:rgba(255,255,255,.3)}

/* Free slot row */
.kp-dev-free-slot{border:1px dashed rgba(255,255,255,.08);background:transparent;cursor:default}
.kp-dev-free-slot:active{background:transparent}
.kp-dev-dot.free{color:rgba(255,255,255,.15);font-size:14px;font-weight:700}

/* Status panel */
.kp-status-panel{display:flex;align-items:center;gap:20px;padding:16px 0;margin-bottom:8px}
.kp-ring-wrap{position:relative;width:90px;height:90px;flex-shrink:0;cursor:pointer}
.kp-ring-wrap::before{content:'';position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(74,222,128,.12) 0%,transparent 70%);animation:bentoGlow 3s ease-in-out infinite;pointer-events:none}
.kp-ring-wrap svg{transform:rotate(-90deg);animation:bentoSpin 20s linear infinite;transform-origin:center}
.kp-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.kp-ring-nums{display:flex;align-items:baseline;gap:2px}
.kp-ring-num{font-size:22px;font-weight:800;color:#fff}
.kp-ring-sep{font-size:16px;color:rgba(255,255,255,.3);font-weight:300}
.kp-ring-den{font-size:14px;color:rgba(255,255,255,.35);font-weight:600}
.kp-ring-label{display:block;font-size:7px;color:rgba(255,255,255,.25);text-transform:uppercase;letter-spacing:.8px;margin-top:2px}
.kp-stats{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.kp-stat{min-width:0;display:flex;flex-direction:column;gap:2px}
.kp-stat-val{font-size:16px;font-weight:700;color:#fff}
.kp-stat-label{font-size:11px;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.5px}
.kp-stat-flags{display:flex;gap:0;align-items:center;min-height:56px;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding:0;margin:0;touch-action:pan-x;width:100%;max-width:100%;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;pointer-events:auto}
.kp-stat-flags::-webkit-scrollbar{display:none}
.kp-flag-chip{padding:20px 3px;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;pointer-events:auto}
.kp-flag-chip svg{display:block;border-radius:3px;flex-shrink:0;transition:transform .25s cubic-bezier(.2,.8,.2,1.4),box-shadow .25s,filter .25s;pointer-events:none;will-change:transform}
.kp-flag-chip:active svg{transform:translateY(-3px) scale(.95)}
.kp-flag-chip.active svg{transform:translateY(-10px) scale(1.18)}
.kp-expand-btn{display:block;width:100%;padding:12px;background:transparent;border:1px dashed rgba(255,255,255,.12);border-radius:12px;color:rgba(255,255,255,.4);font-size:13px;font-weight:600;cursor:pointer;text-align:center;margin-bottom:16px;transition:all .15s}
.kp-expand-btn:active{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.2)}

/* Device list expandable */
.kp-device-list{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1)}
.kp-device-list.open{max-height:220px;margin-bottom:12px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;transform:translateZ(0)}
.kp-device-list.open::-webkit-scrollbar{display:none}
.kp-dev-row{display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(255,255,255,.05);border-radius:10px;margin-bottom:6px;cursor:pointer;transition:background .2s,opacity .3s,transform .3s}
.kp-dev-row:active{background:rgba(255,255,255,.1)}
.kp-dev-online{background:rgba(34,197,94,.08)}
.kp-dev-empty{border:1px dashed rgba(255,255,255,.1);background:transparent;cursor:default}
.kp-dev-dot{font-size:10px;color:rgba(255,255,255,.25);flex-shrink:0;width:14px;text-align:center}
.kp-dev-dot.online{color:#22c55e}
.kp-dev-name{font-size:13px;font-weight:600;color:#fff;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp-dev-empty .kp-dev-name{color:rgba(255,255,255,.25)}
.kp-dev-status{font-size:11px;color:rgba(255,255,255,.3);flex-shrink:0}
.kp-dev-status.online{color:#22c55e}
.kp-dev-cfg{font-size:11px;font-weight:600;flex-shrink:0;background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,.65),rgba(255,255,255,.3));background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:kpShimmer 2.5s ease-in-out infinite}
@keyframes kpShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Big connect button */
.kp-big-connect{display:flex;align-items:center;justify-content:center;width:100%;padding:16px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:none;border-radius:16px;color:#fff;font-size:17px;font-weight:800;text-decoration:none;text-align:center;margin:12px 0;transition:all .15s;box-shadow:none}
.kp-big-connect:active{transform:scale(.97);background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06))}
.kp-no-key{text-align:center;color:rgba(255,255,255,.35);font-size:13px;padding:20px 0}

/* Family accordion in popup */
.kp-fam-toggle{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;background:rgba(255,255,255,.04);border:none;border-radius:14px;cursor:pointer;font-family:inherit;transition:background .2s,border-radius .3s .05s;margin-top:16px}
.kp-fam-toggle:active{transform:scale(.98)}
.kp-fam-toggle.open{border-radius:14px 14px 0 0;background:rgba(255,255,255,.06);transition:background .2s,border-radius 0s}
.kp-fam-toggle.closing{border-radius:14px 14px 0 0;background:rgba(255,255,255,.06);transition:background .2s,border-radius 0s}
.kp-fam-spinner{width:40px;height:40px;flex-shrink:0;position:relative;border-radius:50%;overflow:hidden}
.kp-fam-av-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;border-radius:50%;opacity:0;transform:scale(.85);transition:opacity .4s ease,transform .4s ease;will-change:opacity,transform}
.kp-fam-av-slide.active{opacity:1;transform:scale(1)}
.kp-fam-av-slide.exit{opacity:0;transform:scale(.85)}
.kp-fam-mid{flex:1;text-align:left}
.kp-fam-mid-title{font-size:13px;font-weight:700;color:#fff}
.kp-fam-mid-sub{font-size:10px;color:rgba(255,255,255,.35);margin-top:2px}
.kp-fam-mid-sub b{color:rgba(255,255,255,.6);font-weight:700}
.kp-fam-chevron{width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}
.kp-fam-toggle.open .kp-fam-chevron{transform:rotate(180deg)}
.kp-fam-body{max-height:0;overflow:hidden;background:rgba(255,255,255,.03);border-radius:0 0 14px 14px;transition:max-height .3s cubic-bezier(.4,0,.2,1),padding .3s cubic-bezier(.4,0,.2,1);padding:0 14px;will-change:max-height}
.kp-fam-body.open{padding:10px 14px 14px}
.kp-fam-owner{display:flex;align-items:center;gap:10px;padding:10px 0 12px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:8px}
.kp-fam-owner .av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;border:2px solid rgba(255,255,255,.15);overflow:hidden}
.kp-fam-owner-info{flex:1}
.kp-fam-owner-name{font-size:13px;font-weight:700;color:#fff}
.kp-fam-owner-badge{font-size:10px;color:rgba(255,255,255,.3)}
.kp-fam-you{font-size:9px;font-weight:700;color:#4ade80;background:rgba(74,222,128,.1);padding:3px 8px;border-radius:6px;letter-spacing:.5px}
.kp-fam-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.kp-fam-row:last-of-type{border-bottom:none}
.kp-fam-row .av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.kp-fam-info{flex:1;min-width:0}
.kp-fam-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.kp-fam-meta{font-size:10px;color:rgba(255,255,255,.25);margin-top:1px}
.kp-fam-medal{font-size:13px;flex-shrink:0}
.kp-fam-rm{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;opacity:.25;transition:opacity .15s;flex-shrink:0}
.kp-fam-rm:hover{opacity:.6}
.kp-fam-invite{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:11px;background:transparent;border:1.5px dashed rgba(255,255,255,.08);border-radius:10px;color:rgba(255,255,255,.35);font-size:12px;font-weight:600;cursor:pointer;margin-top:10px;font-family:inherit;transition:all .15s}
.kp-fam-invite:active{background:rgba(255,255,255,.04)}

/* Router pre-order banner — big tile */
.kp-router-banner{position:relative;margin:20px 0 8px;border-radius:20px;overflow:hidden;cursor:pointer;transition:transform .15s;height:180px}
.kp-router-banner:active{transform:scale(.97)}
.kp-router-img{position:absolute;inset:0;background:url('tiles/tile-router.jpg') center/cover no-repeat}
.kp-router-overlay{position:absolute;inset:0;background:linear-gradient(270deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.2) 60%,transparent 100%);display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;padding:18px 20px;text-align:right}
.kp-router-badge{display:inline-block;width:fit-content;font-size:10px;font-weight:800;color:#fff;letter-spacing:1.5px;padding:4px 10px;border:1px solid rgba(255,255,255,.25);border-radius:6px;background:rgba(255,255,255,.1);margin-bottom:8px}
.kp-router-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:4px}
.kp-router-timer{display:flex;align-items:center;gap:3px;margin-top:2px}
.kp-rt-block{display:inline-flex;align-items:baseline;gap:1px;padding:2px 5px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:4px;border:1px solid rgba(255,255,255,.1)}
.kp-rt-num{font-size:11px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.kp-rt-lbl{font-size:8px;font-weight:600;color:rgba(255,255,255,.4)}
.kp-rt-sep{font-size:10px;font-weight:700;color:rgba(255,255,255,.2);margin:0 0}

/* Router pre-order sheet */
.router-sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,0);transition:background .4s;z-index:10010;pointer-events:none}
.router-sheet-bg.open{background:rgba(0,0,0,.6);pointer-events:auto}
.router-sheet{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;background:linear-gradient(180deg,#0d1f2d 0%,#0a1a2e 40%,#0f0f18 100%);border-radius:20px 20px 0 0;padding:12px 24px 36px;z-index:10011;transform:translateY(100%);transition:transform .4s cubic-bezier(.32,.72,.32,1);max-height:85vh;overflow-y:auto}
.router-sheet.open{transform:translateY(0)}
.router-sheet-handle{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.15);margin:0 auto 20px}
.router-sheet-icon{display:flex;justify-content:center;margin-bottom:16px}
.router-sheet-title{text-align:center;font-family:'Unbounded',sans-serif;font-size:22px;font-weight:800;color:#fff;letter-spacing:3px;margin-bottom:10px}
.router-sheet-sub{text-align:center;font-size:14px;color:rgba(255,255,255,.5);line-height:1.5;margin-bottom:20px;padding:0 8px}
.router-sheet-badge{text-align:center;font-size:12px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:1px;text-transform:uppercase;padding:8px 16px;border:1px solid rgba(255,255,255,.15);border-radius:20px;display:inline-block;margin:0 auto 20px;width:auto;display:table;background:rgba(255,255,255,.05)}
.router-sheet-countdown{text-align:center;margin-bottom:24px}
.router-sheet-cd-label{font-size:12px;color:rgba(255,255,255,.35);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.router-sheet-timer{display:flex;justify-content:center;gap:10px}
.router-timer-block{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:10px 8px;background:rgba(255,255,255,.05);border-radius:12px;border:1px solid rgba(255,255,255,.06)}
.router-timer-num{font-size:24px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.router-timer-label{font-size:10px;color:rgba(255,255,255,.35);margin-top:2px}
.router-timer-done{font-size:18px;font-weight:700;color:#fff}
.router-sheet-cta{display:block;width:100%;padding:16px;background:#fff;border:none;border-radius:16px;color:#000;font-size:16px;font-weight:800;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;box-shadow:0 4px 20px rgba(255,255,255,.1)}
.router-sheet-cta:active{transform:scale(.97);box-shadow:0 2px 10px rgba(255,255,255,.05)}
.router-sheet-hint{text-align:center;font-size:11px;color:rgba(255,255,255,.2);margin-top:10px}

/* Action buttons row */
.kp-actions{display:flex;gap:8px;margin-bottom:16px}
.kp-action-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;background:rgba(255,255,255,.05);border-radius:12px;border:none;color:rgba(255,255,255,.6);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none}
.kp-action-btn:active{background:rgba(255,255,255,.1);transform:scale(.95)}
.kp-action-btn svg{opacity:.5}

/* App pills row */
.kp-app-row{display:flex;gap:6px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.kp-app-pill{flex:1;padding:10px 4px;border-radius:10px;border:none;background:rgba(255,255,255,.05);color:rgba(255,255,255,.4);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
.kp-app-pill.active{background:rgba(59,130,246,.15);color:#60a5fa}
.kp-app-pill:active{transform:scale(.95)}

/* Setup Wizard */
.wiz-bg{position:fixed;inset:0;background:rgba(0,0,0,0);transition:background .5s ease;z-index:10003;pointer-events:none}
.wiz-bg.open{background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto}
.wiz-sheet{position:fixed;bottom:0;left:0;right:0;background:rgba(18,21,26,.78);backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);border-radius:24px 24px 0 0;padding:12px 20px calc(24px + env(safe-area-inset-bottom));z-index:10004;height:74vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 -12px 50px rgba(0,0,0,.5);transform:translateY(100%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.wiz-sheet.open{transform:translateY(0)}
.wiz-handle{width:36px;height:4px;background:rgba(255,255,255,.15);border-radius:2px;margin:0 auto 20px}
.wiz-content{transition:opacity .25s ease;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.wiz-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:6px}
.wiz-subtitle{font-size:13px;color:rgba(255,255,255,.45);line-height:1.5;margin-bottom:20px}
.wiz-subtitle b{color:rgba(255,255,255,.7)}

/* Wizard platform rows */
.wiz-platform-row{display:flex;align-items:center;gap:14px;padding:12px 16px;background:rgba(255,255,255,.04);border-radius:14px;margin-bottom:6px;cursor:pointer;transition:all .2s;border:none}
.wiz-platform-row.active{background:rgba(255,255,255,.08)}
.wiz-platform-row:active{transform:scale(.98)}
.wiz-plat-icon{width:40px;height:40px;background:rgba(255,255,255,.06);border-radius:10px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5)}
.wiz-platform-row.active .wiz-plat-icon{color:#fff}
.wiz-plat-label{flex:1;font-size:15px;font-weight:600;color:rgba(255,255,255,.6)}
.wiz-platform-row.active .wiz-plat-label{color:#fff}
.wiz-plat-radio{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center}
.wiz-platform-row.active .wiz-plat-radio{border-color:#3b82f6}
.wiz-radio-fill{width:12px;height:12px;border-radius:50%;background:#3b82f6}

/* Wizard step card */
.wiz-step-card{display:flex;gap:14px;padding:16px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);border-radius:16px;margin-bottom:16px}
.wiz-step-num{width:32px;height:32px;border-radius:10px;background:#3b82f6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}
.wiz-step-info{flex:1}
.wiz-step-card-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px}
.wiz-step-card-desc{font-size:12px;color:rgba(255,255,255,.45);line-height:1.5}

/* Wizard buttons */
.wiz-btn-primary{display:block;width:100%;padding:16px;background:#3b82f6;border-radius:14px;border:none;color:#fff;font-size:16px;font-weight:700;cursor:pointer;text-align:center;margin-top:16px;transition:all .15s}
.wiz-btn-primary:active{transform:scale(.97);background:#2563eb}
.wiz-btn-primary.disabled{opacity:.35;pointer-events:none}
.wiz-btn-skip{display:block;width:100%;padding:12px;background:transparent;border:none;color:rgba(255,255,255,.4);font-size:14px;font-weight:600;cursor:pointer;text-align:center;margin-top:4px}
.wiz-store-btn{display:block;width:100%;padding:14px;background:rgba(255,255,255,.06);border-radius:12px;border:none;color:rgba(255,255,255,.7);font-size:14px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;margin-bottom:8px;transition:all .15s}
.wiz-store-btn:active{background:rgba(255,255,255,.12)}

/* Wizard app switch */
.wiz-app-switch{display:flex;gap:6px;margin:12px 0}
.wiz-app-btn{flex:1;padding:8px;border-radius:8px;border:none;background:rgba(255,255,255,.04);color:rgba(255,255,255,.35);font-size:12px;font-weight:600;cursor:pointer;text-align:center;transition:all .2s}
.wiz-app-btn.active{background:rgba(59,130,246,.12);color:#60a5fa}

/* Wizard connect block */
.wiz-connect-block{background:rgba(255,255,255,.04);border-radius:16px;padding:16px;margin-bottom:8px}
.wiz-connect-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px}
.wiz-connect-desc{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:12px}
.wiz-connect-btn{display:block;width:100%;padding:12px;background:rgba(255,255,255,.08);border-radius:10px;border:1px solid rgba(255,255,255,.12);color:#fff;font-size:14px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:all .2s}
.wiz-connect-btn:active{background:rgba(255,255,255,.15)}
.wiz-connect-btn.done{border-color:rgba(52,211,153,.3);color:#34d399;background:rgba(52,211,153,.08)}

/* Wizard dots */
.wiz-dots{display:flex;justify-content:center;gap:6px;margin-top:20px;margin-bottom:4px}
.wiz-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12);transition:all .3s}
.wiz-dot.active{background:#3b82f6;width:20px;border-radius:4px}

/* QR code bottom sheet */
.kp-qr-sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,0);transition:background .5s ease;z-index:10005;pointer-events:none}
.kp-qr-sheet-bg.open{background:rgba(0,0,0,.55);pointer-events:auto}
.kp-qr-sheet{position:fixed;bottom:0;left:0;right:0;background:rgba(26,29,36,.78);backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);border-radius:20px 20px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));z-index:10006;max-height:85vh;overflow-y:auto;box-shadow:0 -8px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);transform:translateY(100%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.kp-qr-sheet.open{transform:translateY(0)}
.kp-qr-sheet-handle{width:36px;height:4px;background:rgba(255,255,255,.15);border-radius:2px;margin:0 auto 16px}
.kp-qr-sheet-title{font-size:17px;font-weight:700;color:#fff;text-align:center;margin-bottom:16px}
.kp-qr-sheet-step{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.kp-qr-sheet-num{width:28px;height:28px;border-radius:50%;background:rgba(59,130,246,.15);color:#60a5fa;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.kp-qr-sheet-text{font-size:14px;color:rgba(255,255,255,.6);line-height:1.5;padding-top:3px}

/* Referral — wrapper with blurred glow behind */
.bento-ref-wrap{grid-column:1;grid-row:2;position:relative;overflow:visible}
.bento-ref{background:linear-gradient(135deg,#e85d4a,#f0836f)!important;border:none!important;width:100%;height:100%;position:relative;z-index:1;justify-content:space-between!important;padding:14px 12px!important;overflow:hidden}
.bento-ref::before{content:'';position:absolute;inset:-4px;background:url('tiles/tile-referral.webp') center 60%/cover no-repeat;animation:handshake 1.8s ease-in-out infinite;transform-origin:center center;pointer-events:none;z-index:0}
@keyframes handshake{0%{transform:translate(0,0) rotate(0deg)}10%{transform:translate(-1px,1px) rotate(-0.5deg)}20%{transform:translate(1px,-1px) rotate(0.5deg)}30%{transform:translate(-1px,0) rotate(-0.3deg)}40%{transform:translate(1px,1px) rotate(0.3deg)}50%{transform:translate(0,-1px) rotate(0deg)}60%{transform:translate(-1px,1px) rotate(-0.5deg)}70%{transform:translate(1px,0) rotate(0.3deg)}80%{transform:translate(0,0) rotate(0deg)}100%{transform:translate(0,0) rotate(0deg)}}
.bento-ref .bento-ref-badge{display:none}
.bento-ref .bento-ref-title{color:#fff;font-size:15px;font-weight:900;text-shadow:0 2px 6px rgba(0,0,0,.35);line-height:1.2;position:relative;z-index:1}
.bento-ref .bento-ref-sub{color:rgba(255,255,255,.85);font-size:10px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.3);margin-top:0;position:relative;z-index:1}
.bento-ref .bento-ref-level{background:rgba(0,0,0,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-weight:700;border:none;text-shadow:0 1px 2px rgba(0,0,0,.3);margin-top:auto;align-self:flex-start;position:relative;z-index:1}
.bento-ref-badge{width:36px;height:36px;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.bento-ref-badge svg{position:relative;z-index:1}
/* Sparkle particles */
.bento-ref-sparkles{position:absolute;inset:-20px;pointer-events:none}
.bento-ref-sparkle{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffd700;opacity:0;box-shadow:0 0 4px currentColor}
.bento-ref-badge.has-refs .bento-ref-sparkle{animation:sparkleFloat 2.5s ease-in-out infinite}
@keyframes sparkleFloat{0%{opacity:0;transform:translate(0,0) scale(0)}15%{opacity:1;transform:scale(1.2)}50%{opacity:.8;transform:translate(calc(var(--sx)*.6),calc(var(--sy)*.6)) scale(1)}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0)}}
.bento-ref-title{font-size:13px;font-weight:700;color:#fff;line-height:1.3}
.bento-ref-sub{font-size:10px;color:var(--text2);margin-top:4px;font-weight:600}
.bento-ref-level{font-size:9px;color:var(--text2);margin-top:6px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.06);display:inline-block}
.bento-ref-level b{color:#ffd700}

/* Subscription card right — Unicorn style */
.bento-sub{grid-column:2;grid-row:1/3;background:linear-gradient(160deg,#4f8cf7,#3b6de0);border:none;border-radius:20px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;cursor:pointer;transition:transform .15s}
.bento-sub:active{transform:scale(.97)}
.bento-sub-header{flex:1}
.bento-sub-plan{font-size:20px;font-weight:900;color:#fff;line-height:1.2;white-space:pre-line}
.bento-sub-expires{font-size:11px;color:rgba(255,255,255,.6);margin-top:4px;font-weight:500}
.bento-sub-days{display:none;margin-top:12px}
.bento-sub-days-num{font-size:36px;font-weight:900;color:#fff;line-height:1}
.bento-sub-days-label{font-size:10px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.bento-sub-progress{display:none;margin-top:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden}
.bento-sub-progress-bar{height:100%;border-radius:2px;transition:width .6s ease}
.bento-sub-traffic{display:none;font-size:11px;color:rgba(255,255,255,.6);margin-top:8px;font-weight:600}
.bento-sub-traffic b{color:#fff;font-weight:800}
.bento-sub-status{display:none;font-size:10px;color:rgba(255,255,255,.45);margin-top:4px;font-weight:500}
.bento-sub-cta{display:flex;align-items:flex-end;justify-content:flex-end;margin-top:auto}
.bento-sub-arrow{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);color:#3b6de0;display:flex;align-items:center;justify-content:center}
/* Plan color themes */
.bento-sub.active-sub .bento-sub-arrow{background:rgba(255,255,255,.12);color:#fff}
.bento-sub.sub-personal{background:linear-gradient(135deg,#1a6bb5,#2196F3)}
.bento-sub.sub-family{background:linear-gradient(135deg,#2e8b2e,#32cd32)}
.bento-sub.sub-trial{background:linear-gradient(135deg,#92400e,#b45309,#d97706)}
.bento-sub.sub-owner{background:linear-gradient(135deg,#059669,#10b981)}
.bento-sub.sub-expired{background:linear-gradient(160deg,#dc2626,#b91c1c,#ef4444)}
.bento-sub.sub-family-member{background:linear-gradient(160deg,#6366f1,#4f46e5,#818cf8)}
.bento-skel{border-radius:20px;background:linear-gradient(90deg,#1a1a2e 25%,#2a2a45 50%,#1a1a2e 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}

/* Server card locked state */
.server-card.locked{position:relative;pointer-events:none}
.server-card.locked .server-split,.server-card.locked #deviceSubRow{filter:blur(6px);opacity:.4}
.server-card-lock{display:none;position:absolute;inset:0;z-index:5;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:16px}
.server-card.locked .server-card-lock{display:flex}
.server-card-lock svg{opacity:.5}
.server-card-lock span{font-size:13px;font-weight:700;color:var(--text2)}

.content{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 16px 8px;-webkit-overflow-scrolling:touch}
.content::-webkit-scrollbar{display:none}
.tab-content{display:none;animation:fadeUp .35s ease}
.tab-content.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Skeleton shimmer for loading values */
.skel-block{display:block;background:linear-gradient(90deg,#1a1a2e 25%,#2a2a45 50%,#1a1a2e 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:12px}
/* Full-page skeleton overlay */
#homeSkeleton{position:relative;z-index:10}
#tab-home{position:relative}
#tab-home.loading>*:not(#homeSkeleton){display:none!important}
#tab-home.loading>#homeSkeleton{display:block!important}
.app.skeleton-loading .tabbar{display:none!important}
.skeleton{color:transparent!important;-webkit-text-fill-color:transparent!important;background:linear-gradient(90deg,#1e1e2a 25%,#33334a 50%,#1e1e2a 75%)!important;background-size:200% 100%!important;animation:shimmer 1.4s linear infinite!important;border-radius:8px!important;min-width:48px;min-height:1.2em;display:inline-block}
.skeleton *{visibility:hidden}
.status-label.skeleton{min-width:110px}

/* Wave entrance for home cards — each starts invisible, JS reveals one by one */
#tab-home>.ref-banner,#tab-home>.card,#tab-home>#noKeyBlock,#tab-home>#hasKeyBlock,#tab-home>#familyManageBlock,#tab-home>#familyViewBlock,#tab-home>.greeting,#tab-home>.quick-tiles,#tab-home>.bento{opacity:0;transform:translateY(22px)}
.wave-card{opacity:0;transform:translateY(18px)}
.wave-card.visible{opacity:1!important;transform:translateY(0)!important;transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)!important}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:12px;transition:all .2s}

/* Server card — split layout: map left, info right, light blue */
.server-card{display:flex;flex-direction:column;overflow:hidden;padding:0;position:relative;border:none;background:#14141a}
.server-split{display:flex;min-height:130px}
.server-map-side{width:33%;max-width:160px;min-width:100px;min-height:140px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-right:none}
.server-map-contour{width:100%;height:100%}
.server-info-side{flex:1;min-width:0;padding:14px 20px 14px 16px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.server-info-top{display:flex;align-items:flex-start;justify-content:space-between}
.server-country{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.2px}
.server-proto{font-size:9px;color:var(--text2);font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:.5px}
.server-status{width:10px;height:10px;flex-shrink:0;margin-top:4px}
.status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.status-dot.online{background:#4ade80;box-shadow:0 0 10px #4ade8080,0 0 20px #4ade8040;animation:pulse 2s infinite}
.status-dot.offline{background:var(--red);box-shadow:0 0 10px #f8717180}
.server-metrics-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.server-metric-row{display:flex;align-items:center;gap:6px}
.server-metric-label{font-size:10px;color:var(--text2);font-weight:600;flex:1}
.server-metric-val{font-size:14px;font-weight:800;font-family:'Inter',monospace;color:#fff;text-align:right;margin-left:auto}
.speed-unit{font-size:8px;font-weight:600;color:var(--text2);letter-spacing:.3px}
.speed-measuring{animation:speedDots 1.2s infinite}
@keyframes speedDots{0%,20%{opacity:.2}50%{opacity:1}80%,100%{opacity:.2}}
@keyframes devPulse{0%{box-shadow:0 0 0 0 #ef444480}70%{box-shadow:0 0 0 8px #ef444400}100%{box-shadow:0 0 0 0 #ef444400}}
.server-traffic-inline{display:flex;gap:12px;margin-top:2px}
.server-traffic-compact{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.server-traffic-item{display:flex;align-items:center;gap:3px;font-size:10px;font-weight:700;color:#ffffff60}
.server-help-btn{width:22px;height:22px;border-radius:50%;background:#ffffff15;border:1px solid #ffffff25;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .2s}
.server-help-btn:active{background:#ffffff15}
.server-help-btn svg{width:12px;height:12px}
.info-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10005;opacity:0;pointer-events:none;transition:opacity .25s;display:flex;align-items:flex-end;justify-content:center}
.info-overlay.open{opacity:1;pointer-events:auto}
.info-sheet{width:100%;max-width:420px;background:var(--card);border-radius:20px 20px 0 0;padding:20px 20px 32px;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1)}
.info-overlay.open .info-sheet{transform:translateY(0)}
.info-sheet-handle{width:36px;height:4px;border-radius:2px;background:#ffffff20;margin:0 auto 16px}
.info-sheet h3{font-size:16px;font-weight:800;margin-bottom:14px;color:#fff}
.info-section{margin-bottom:14px}
.info-section-title{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.info-section p{font-size:12px;color:var(--text2);line-height:1.5;margin:0}

.greeting{font-size:16px;font-weight:700;margin-bottom:14px}
.greeting-sub{font-size:12px;color:var(--text2);font-weight:500;margin-left:6px}

.sub-card{display:flex;align-items:center;gap:14px;border-color:#7c5bf530}
.sub-card-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#7c5bf520,#5b8cf515);border:1px solid #7c5bf530;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sub-card-info{flex:1}
.sub-card-title{font-size:14px;font-weight:700;margin-bottom:2px}
.sub-card-desc{font-size:12px;color:var(--text2)}
.sub-card-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:8px;flex-shrink:0}
.sub-card-badge.active{background:#34d39915;color:var(--green);border:1px solid #34d39930}

.traffic-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.traffic-item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center}
.traffic-val{font-size:18px;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.traffic-label{font-size:10px;color:var(--text2);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}

.btn-primary{width:100%;padding:15px;border:none;border-radius:14px;background:var(--grad);color:#fff;font-size:15px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;position:relative;overflow:hidden}
.btn-primary:active{transform:scale(.98);opacity:.9}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#fff2,transparent);pointer-events:none}
.btn-secondary{width:100%;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font-size:14px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}
.btn-secondary:active{transform:scale(.98);background:#22222a}
.btn-sm{padding:10px 16px;font-size:13px;border-radius:10px;width:auto}
.btn-copy{background:linear-gradient(135deg,#7c5bf515,#5b8cf510);border:1px solid #7c5bf540;color:var(--accent2)}
.btn-copy.copied{border-color:var(--green);color:var(--green);background:#34d39910}
.btn-trial{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,#667eea,#5a67d8,#7c5bf5);color:#fff;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;position:relative;overflow:hidden;transition:all .2s}
.btn-trial:active{transform:scale(.98);opacity:.9}
.btn-trial:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-trial::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,#fff3,transparent);animation:trialShimmer 2.5s ease-in-out infinite}
@keyframes trialShimmer{0%{left:-100%}50%{left:120%}100%{left:120%}}

.key-card{border-color:#7c5bf540}
.key-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.key-title{font-size:15px;font-weight:700}
.key-active{font-size:11px;font-weight:600;color:var(--green);background:#34d39915;border:1px solid #34d39930;padding:2px 8px;border-radius:6px}
.key-proto{font-size:11px;color:var(--text2);margin-bottom:14px}
.key-actions{display:flex;flex-direction:column;gap:8px}
.qr-wrap{background:#fff;border-radius:12px;padding:16px;margin-top:12px;display:flex;justify-content:center;display:none}
.qr-wrap.show{display:flex;animation:fadeUp .3s ease}
.qr-wrap canvas,.qr-wrap img{border-radius:4px}

.setup-guide{margin-top:12px;border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden;max-height:0;opacity:0;transform:translateY(16px);transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .4s ease,transform .4s ease;pointer-events:none}
.setup-guide.show{max-height:500px;opacity:1;transform:translateY(0);pointer-events:auto}
.setup-guide-title{font-size:13px;font-weight:700;padding:14px 16px 0;color:var(--text);display:flex;align-items:center;gap:8px}
.setup-guide-title svg{flex-shrink:0}
.setup-guide-tabs{display:flex;gap:6px;padding:10px 16px 0;flex-wrap:wrap}
.sg-tab{padding:6px 12px;border-radius:8px;font-size:11px;font-weight:600;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s}
.sg-tab.active{background:var(--grad);border-color:transparent;color:#fff}
.sg-tab:active{transform:scale(.96)}
.sg-body{padding:12px 16px 14px}
.sg-steps{display:flex;flex-direction:column;gap:2px}
.sg-dl{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:linear-gradient(135deg,#7c5bf510,#5b8cf508);border:1px solid #7c5bf525;cursor:pointer;margin-bottom:8px;transition:all .2s}
.sg-dl:active{transform:scale(.98);opacity:.8}
.sg-dl-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--grad);flex-shrink:0}
.sg-dl-text{flex:1}
.sg-dl-name{font-size:12px;font-weight:600;color:var(--text)}
.sg-dl-sub{font-size:10px;color:var(--text2);margin-top:1px}
.sg-dl-arrow{color:var(--text2)}
.sg-dl.green{background:linear-gradient(135deg,#34d39910,#05966908);border-color:#34d39925}
.sg-dl.green .sg-dl-icon{background:linear-gradient(135deg,#059669,#34d399)}

.dl-card{display:flex;align-items:center;gap:14px;cursor:pointer}
.dl-card:active{transform:scale(.99)}
.dl-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dl-icon.ios{background:linear-gradient(135deg,#333,#1a1a1a);border:1px solid #444}
.dl-icon.android{background:linear-gradient(135deg,#1b3a1b,#0d1f0d);border:1px solid #2a4a2a}
.dl-icon.windows{background:linear-gradient(135deg,#1a2540,#0d1520);border:1px solid #2a3550}
.dl-icon.macos{background:linear-gradient(135deg,#2a2030,#1a1520);border:1px solid #3a2a45}
.dl-info{flex:1}
.dl-name{font-size:14px;font-weight:600;margin-bottom:2px}
.dl-app{font-size:12px;color:var(--text2)}
.dl-btn{padding:8px 16px;border-radius:10px;background:var(--grad);border:none;color:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;flex-shrink:0}
.dl-btn:active{opacity:.8}

.acc{border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:8px;background:var(--card)}
.acc-head{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;-webkit-user-select:none;user-select:none}
.acc-head-left{display:flex;align-items:center;gap:10px}
.acc-head-left span{font-size:14px;font-weight:600}
.acc-chevron{transition:transform .25s;flex-shrink:0}
.acc.open .acc-chevron{transform:rotate(90deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.acc.open .acc-body{max-height:500px}
.acc-inner{padding:0 18px 16px}
.step{display:flex;gap:12px;padding:8px 0}
.step-num{width:24px;height:24px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;margin-top:1px}
.step-text{font-size:13px;color:var(--text2);line-height:1.55}

.profile-back-row{padding:4px 0 8px}
.profile-back-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:#fff;font-size:14px;font-weight:600;cursor:pointer;padding:4px 0;font-family:inherit}
.profile-back-btn svg{flex-shrink:0}
.avatar-area{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0 16px}
.avatar{width:64px;height:64px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#fff}
.avatar-name{font-size:18px;font-weight:700}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid #2a2a3520}
.info-row:last-child{border-bottom:none}
.info-label{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:8px}
.info-val{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;text-align:right;max-width:55%}

.sec-title{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.sec-sub{font-size:13px;color:var(--text2);margin-bottom:16px;line-height:1.5}

.plan-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:12px;cursor:pointer;transition:all .3s;position:relative}
.plan-card:active{transform:scale(.99)}
.plan-card.selected{border-color:var(--accent1);background:linear-gradient(135deg,#7c5bf508,#5b8cf506);box-shadow:0 0 24px #7c5bf520,inset 0 0 0 1px #7c5bf530}
.plan-name{font-size:17px;font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.plan-desc{font-size:12px;color:var(--text2);margin-bottom:10px}
.plan-price{font-size:28px;font-weight:800;margin-top:8px}
.plan-price span{font-size:13px;font-weight:500;color:var(--text2)}
.plan-badge{position:absolute;top:14px;right:14px;font-size:10px;font-weight:700;padding:4px 10px;border-radius:8px}
.plan-badge.popular{background:linear-gradient(135deg,#7c5bf530,#667eea20);color:#a78bfa;border:1px solid #7c5bf540}
.plan-badge.corp{background:linear-gradient(135deg,#f59e0b20,#f9731618);color:#fbbf24;border:1px solid #f59e0b40}
.plan-features{list-style:none;padding:0;margin:0 0 4px}
.plan-features li{font-size:12px;color:var(--text2);padding:3px 0;display:flex;align-items:flex-start;gap:8px;line-height:1.4}
.plan-features li::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent1);flex-shrink:0;margin-top:5px}
.plan-features .accent{color:var(--accent2);font-weight:600}
.dur-tabs{display:flex;gap:6px;margin-bottom:16px;background:var(--card);border-radius:12px;padding:4px;border:1px solid var(--border)}
.dur-tab{flex:1;text-align:center;padding:8px 4px;border-radius:10px;cursor:pointer;font-size:12px;font-weight:600;color:var(--text2);transition:all .2s;position:relative}
.dur-tab:active{transform:scale(.97)}
.dur-tab.active{background:var(--grad);color:#fff}
.dur-tab .dur-save{display:block;font-size:9px;font-weight:700;color:var(--green);margin-top:2px}
.dur-tab.active .dur-save{color:#a7f3d0}
.plan-old-price{font-size:13px;color:var(--text2);text-decoration:line-through;margin-right:6px;font-weight:500}
.plan-total{font-size:11px;color:var(--text2);margin-top:4px}
/* Wizard */
@keyframes wizSlideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes wizSlideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-30px)}}
@keyframes wizFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.wiz-step-enter{animation:wizSlideIn .3s ease forwards}
.wiz-step-exit{animation:wizSlideOut .2s ease forwards}
.wiz-cards{display:flex;flex-direction:column;gap:10px}
.wiz-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;cursor:pointer;transition:all .2s;position:relative;display:flex;flex-direction:column;gap:4px;animation:wizFadeUp .3s ease backwards}
.wiz-card:nth-child(2){animation-delay:.08s}
.wiz-card:nth-child(3){animation-delay:.16s}
.wiz-card:active{transform:scale(.98);opacity:.9}
.wiz-card.selected{border-color:var(--border);background:var(--card)}
.wiz-card.popular{border-color:#7c5bf560;background:linear-gradient(135deg,#7c5bf518,#667eea10);box-shadow:0 0 20px #7c5bf515,inset 0 1px 0 #ffffff08}
.wiz-card.popular.selected{border-color:#7c5bf560;background:linear-gradient(135deg,#7c5bf518,#667eea10);box-shadow:0 0 20px #7c5bf515}
/* Old wiz-card image styles removed — replaced by .wiz-plan-card */
/* New plan cards (Вечный VPN style) */
.wiz-plan-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:20px;cursor:pointer;transition:all .2s;position:relative;animation:wizFadeUp .3s ease backwards}
.wiz-plan-card:nth-child(2){animation-delay:.08s}
.wiz-plan-card:nth-child(3){animation-delay:.16s}
.wiz-plan-card:active{transform:scale(.98);opacity:.9}
.wiz-plan-popular{border-color:rgba(124,91,245,.3);box-shadow:0 0 20px rgba(124,91,245,.08)}
.wiz-plan-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.wiz-plan-badge{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5)}
.wiz-plan-badge--family{color:#a78bfa;background:rgba(124,91,245,.12)}
.wiz-plan-badge--corp{color:#f59e0b;background:rgba(245,158,11,.12)}
.wiz-plan-discount{font-size:12px;font-weight:700;color:#4ade80;background:rgba(74,222,128,.12);border-radius:8px;padding:4px 10px}
.wiz-plan-name{font-size:18px;font-weight:800;color:#fff;margin-bottom:4px}
.wiz-plan-desc{font-size:12px;color:rgba(255,255,255,.45);margin-bottom:16px;line-height:1.4}
.wiz-plan-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,.04);border-radius:12px;padding:12px 8px;margin-bottom:16px}
.wiz-plan-spec{text-align:center}
.wiz-plan-spec-label{font-size:10px;color:rgba(255,255,255,.35);margin-bottom:4px;font-weight:500}
.wiz-plan-spec-val{font-size:18px;font-weight:800;color:#fff}
.wiz-plan-buy{width:100%;padding:14px;border:none;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}
.wiz-plan-buy:active{transform:scale(.97);background:rgba(255,255,255,.12)}
.wiz-plan-popular .wiz-plan-buy{background:linear-gradient(135deg,#7c5bf5,#667eea);color:#fff}
.wiz-plan-price{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:12px}
.wiz-plan-price b{font-size:22px;color:#fff;font-weight:800}
.wiz-plan-features{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.wiz-plan-features span{font-size:10px;color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:3px 8px}
.wiz-plan-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;background:linear-gradient(135deg,#7c5bf5,#667eea);border-radius:8px;padding:4px 12px}
/* Popup plan cards — glass on colored bg */
.popup-plans-title{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;padding:0 2px}
.popup-plan-cards{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.popup-plan-cards{transition:opacity .2s,transform .2s}
.pp-card{background:rgba(0,0,0,.25);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;cursor:pointer;transition:transform .15s;position:relative;overflow:hidden;opacity:0;transform:translateY(12px);animation:ppCardIn .4s ease forwards}
@keyframes ppCardIn{to{opacity:1;transform:translateY(0)}}
.pp-card:nth-child(1){animation-delay:.05s}
.pp-card:nth-child(2){animation-delay:.12s}
.pp-card:nth-child(3){animation-delay:.19s}
.pp-card:active{transform:scale(.97)}
.pp-card-pattern{position:absolute;top:0;right:0;width:120px;height:100%;opacity:.06;pointer-events:none}
.pp-card--current{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.2);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.pp-card--popular{border-color:rgba(255,255,255,.3)}
.pp-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pp-card-left{display:flex;align-items:center;gap:10px}
.pp-card-icon{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);flex-shrink:0}
.pp-card-icon svg{width:18px;height:18px}
.pp-card-name{font-size:15px;font-weight:700;color:#fff;line-height:1.2}
.pp-card-desc{font-size:11px;color:rgba(255,255,255,.55);margin-top:1px}
.pp-card-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border-radius:6px;padding:3px 8px;flex-shrink:0}
.pp-card-tag--current{color:rgba(255,255,255,.9);background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.25)}
.pp-card-tag--popular{color:#fff;background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.2)}
.pp-card-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.pp-card-price{font-size:11px;color:rgba(255,255,255,.6)}
.pp-card-price b{font-size:20px;font-weight:800;color:#fff}
.pp-card-features{display:flex;flex-wrap:wrap;gap:4px}
.pp-card-features span{font-size:9px;color:rgba(255,255,255,.6);background:rgba(255,255,255,.1);border-radius:5px;padding:2px 7px}
.pp-card-btn{border:none;border-radius:10px;padding:8px 18px;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;flex-shrink:0}
.pp-card-btn--select{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.15)}
.pp-card-btn--select:active{background:rgba(255,255,255,.3)}
.pp-card-btn--extend{background:rgba(255,255,255,.95);color:#000;border:none}
.pp-card-btn--extend:active{background:#fff}
/* Plans header row */
.popup-plans-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.popup-plans-header .popup-plans-title{margin-bottom:0}
.pp-gift-btn{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:5px 12px 5px 8px;cursor:pointer;color:#fff;font-size:12px;font-weight:700;transition:all .15s}
.pp-gift-btn:active{transform:scale(.95);background:rgba(255,255,255,.25)}
.pp-gift-btn--active{background:rgba(255,255,255,.9)!important;color:#000!important;border-color:rgba(255,255,255,.9)!important}
.pp-gift-emoji{display:inline-block;font-size:16px;animation:giftShake 2s ease-in-out infinite}
@keyframes giftShake{0%,100%{transform:rotate(0)}10%{transform:rotate(-12deg)}20%{transform:rotate(10deg)}30%{transform:rotate(-8deg)}40%{transform:rotate(6deg)}50%,100%{transform:rotate(0)}}
.kp-sub-title{font-size:18px;font-weight:800;color:#fff;margin-bottom:4px}
.kp-sub-subtitle{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:16px;line-height:1.4}
.kp-plans{display:flex;flex-direction:column;gap:12px}
.wiz-popular-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;background:linear-gradient(135deg,#7c5bf5,#667eea);border-radius:8px;padding:5px 14px;width:fit-content;position:relative;z-index:1}
.wiz-popular-tag.pulse{animation:popularPulse 2s ease-in-out infinite}
@keyframes popularPulse{0%,100%{box-shadow:0 0 0 0 rgba(124,91,245,.5)}50%{box-shadow:0 0 0 8px rgba(124,91,245,0)}}
.wiz-card-subtitle{font-size:12px;color:#a78bfa;font-weight:600;margin-top:2px}
.wiz-card-icon{color:var(--accent2);margin-bottom:2px}
.wiz-card.popular .wiz-card-icon{color:#a78bfa}
.wiz-card-title{font-size:18px;font-weight:800;color:#fff}
.wiz-card-desc{font-size:13px;color:var(--text2)}
.wiz-card-price{font-size:13px;color:var(--text2);margin-top:2px}
.wiz-card-price b{font-size:18px;color:#4ade80;font-weight:800}
.wiz-card-features{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wiz-card-features span{font-size:10px;color:var(--text2);background:#ffffff08;border:1px solid #ffffff10;border-radius:6px;padding:3px 8px}
.wiz-back{background:none;border:1px solid var(--border);border-radius:10px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .2s}
.wiz-back:active{background:#ffffff10}
.wiz-dur-list{display:flex;flex-direction:column;gap:8px}
.wiz-dur-item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:space-between;animation:wizFadeUp .3s ease backwards}
.wiz-dur-item:nth-child(2){animation-delay:.06s}
.wiz-dur-item:nth-child(3){animation-delay:.12s}
.wiz-dur-item:nth-child(4){animation-delay:.18s}
.wiz-dur-item:active{transform:scale(.98)}
.wiz-dur-item.selected{border-color:var(--border);background:var(--card)}
.wiz-dur-item.best{border-color:#4ade8040}
.wiz-dur-left{display:flex;flex-direction:column;gap:2px}
.wiz-dur-period{font-size:15px;font-weight:700;color:#fff}
.wiz-dur-monthly{font-size:12px;color:var(--text2)}
.wiz-dur-right{text-align:right}
.wiz-dur-total{font-size:16px;font-weight:800;color:#fff}
.wiz-dur-save{font-size:11px;font-weight:700;color:#4ade80;margin-top:2px}
.wiz-summary{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
.wiz-sum-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #ffffff08}
.wiz-sum-row:last-child{border-bottom:none}
.wiz-sum-label{font-size:13px;color:var(--text2)}
.wiz-sum-val{font-size:13px;font-weight:700;color:#fff}
.wiz-sum-total{display:flex;justify-content:space-between;padding:12px 0 0;margin-top:4px;border-top:1px solid var(--border)}
.wiz-sum-total .wiz-sum-label{font-size:15px;font-weight:700;color:#fff}
.wiz-sum-total .wiz-sum-val{font-size:20px;font-weight:900;color:#4ade80}
.wiz-buy-btn{width:100%;margin-top:14px;padding:14px;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;transition:all .2s;box-shadow:0 4px 15px rgba(59,130,246,.3)}
.wiz-buy-btn:active{transform:scale(.97);opacity:.9}
.wiz-buy-btn.gift-mode{background:linear-gradient(135deg,#667eea,#4f46e5);box-shadow:0 4px 15px #4f46e530}
/* Gift toggle */
.gift-toggle{display:flex;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:3px;margin-bottom:16px;position:relative;overflow:hidden}
.gift-toggle-btn{flex:1;padding:10px 0;text-align:center;font-size:13px;font-weight:600;border:none;background:transparent;color:var(--text2);cursor:pointer;border-radius:10px;transition:all .25s ease;position:relative;z-index:1;font-family:'Inter',sans-serif}
.gift-toggle-btn.active{color:#fff}
.gift-toggle-slider{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);border-radius:10px;background:linear-gradient(135deg,#34d399,#059669);transition:all .3s cubic-bezier(.4,0,.2,1);z-index:0}
.gift-toggle-slider.gift{left:calc(50%);background:linear-gradient(135deg,#667eea,#4f46e5)}
/* Gift result sheet */
.gift-link-box{background:#ffffff10;border:1px solid var(--border);border-radius:12px;padding:12px;font-family:monospace;font-size:13px;word-break:break-all;color:var(--text);user-select:all;margin-bottom:16px}
.addon-buy-btn{background:linear-gradient(135deg,#667eea,#7c5bf5);color:#fff;border:none;border-radius:10px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;font-family:'Inter',sans-serif;transition:all .2s;white-space:nowrap}
.addon-buy-btn:active{transform:scale(.95);opacity:.8}
.addon-device-btn{background:var(--card);color:var(--accent2);border:1px solid var(--accent1);border-radius:10px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s;white-space:nowrap}
.addon-device-btn:active{transform:scale(.95);background:var(--accent1);color:#fff}
/* VPN Setup accordion */
.vpn-setup-card{cursor:pointer;transition:all .2s}
.vpn-setup-card:active{transform:scale(.98);opacity:.9}
/* Full-screen VPN settings panel */
.vsp{position:fixed;inset:0;z-index:9000;background:#0f1115;transform:translateX(100%);transition:transform .4s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;overflow:hidden}
.vsp.open{transform:translateX(0)}
.vsp-header{display:flex;align-items:center;gap:12px;padding:14px 16px;flex-shrink:0;min-height:52px}
.vsp-back{width:36px;height:36px;border-radius:10px;border:none;background:#ffffff08;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.vsp-back:active{background:#ffffff15}
.vsp-title{font-size:17px;font-weight:800;flex:1}
.vsp-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
/* Accordion items */
.vpn-acc-item{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:10px;border-left:3px solid var(--border);transition:border-color .3s,box-shadow .3s}
.vpn-acc-item:active{background:#ffffff06}
.vpn-acc-item[data-accent="purple"]{border-left-color:#7c5bf5}
.vpn-acc-item[data-accent="blue"]{border-left-color:#5bc0de}
.vpn-acc-item[data-accent="green"]{border-left-color:#34d399}
.vpn-acc-item[data-accent="orange"]{border-left-color:#f59e0b}
.vpn-acc-item[data-accent="violet"]{border-left-color:#a78bfa}
.vpn-acc-header{display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer;-webkit-tap-highlight-color:rgba(255,255,255,.05)}
.vpn-acc-header .vpn-acc-title{font-weight:700;font-size:14px;flex:1}
.vpn-acc-header .vpn-acc-desc{font-size:11px;color:var(--text2);margin-top:2px;font-weight:400}
.vpn-acc-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vpn-acc-chevron{transition:transform .35s cubic-bezier(.32,.72,0,1);flex-shrink:0}
.vpn-acc-chevron.open{transform:rotate(180deg)}
.vpn-acc-body{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1)}
.vpn-acc-body.open{grid-template-rows:1fr}
.vpn-acc-inner{min-height:0;overflow:hidden}
.vpn-acc-pad{padding:0 16px 16px}
#vpnSetupContent{display:none}
/* Platform switcher */
.tl-platform-switcher{display:flex;gap:6px;margin-bottom:12px;padding:4px;background:var(--card);border-radius:12px;border:1px solid var(--border)}
.tl-plat-btn{flex:1;padding:8px 4px;border:none;border-radius:8px;background:transparent;color:var(--text2);font-size:11px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .2s}
.tl-plat-btn.active{background:#059669;color:#fff;box-shadow:0 2px 8px #05966930}
.tl-plat-btn:not(.active):active{background:#ffffff10}
/* Timeline (Tribute-style) */
.tl{display:flex;flex-direction:column;gap:0;padding:4px 0}
.tl-step{display:flex;gap:14px;position:relative}
.tl-rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:32px}
.tl-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;border:2px solid var(--border);background:var(--card);transition:all .4s ease;position:relative;z-index:1}
.tl-step.done .tl-circle{border-color:#059669;background:#059669;color:#fff}
.tl-step.active .tl-circle{border-color:#059669;background:#059669;color:#fff;box-shadow:0 0 12px #05966940}
.tl-line{width:2px;flex:1;min-height:12px;background:var(--border);transition:background .4s ease}
.tl-step.done .tl-line{background:#059669}
.tl-body{flex:1;padding-bottom:16px}
.tl-step:last-child .tl-body{padding-bottom:0}
.tl-step:last-child .tl-line{display:none}
.tl-title{font-size:14px;font-weight:700;color:var(--text);line-height:32px}
.tl-step.done .tl-title{color:#34d399}
.tl-desc{font-size:12px;color:var(--text2);margin-top:4px;line-height:1.5}
.tl-action{margin-top:10px}
.tl-btn{width:100%;padding:12px;border:none;border-radius:12px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}
.tl-btn:active{transform:scale(.97);opacity:.85}
.tl-btn.primary{background:linear-gradient(135deg,#059669,#047857);color:#fff;box-shadow:0 2px 12px #05966930}
.tl-btn.secondary{background:var(--card);border:1px solid var(--border);color:var(--text)}
.tl-btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text2);font-size:13px;font-weight:600;padding:10px 12px}
.tl-check{width:16px;height:16px}
.tl-or{text-align:center;font-size:11px;color:var(--text2);margin:8px 0}
.copy-guide{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin .3s ease;margin-top:0}
.copy-guide.show{max-height:300px;opacity:1;margin-top:10px}
/* QR Sheet (bottom sheet) */
.sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none}
.sheet-overlay.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:10000;background:var(--bg-secondary,#1a1b20);border-radius:20px 20px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1)}
.sheet.show{transform:translateY(0)}
.sheet-handle{width:36px;height:4px;border-radius:2px;background:#ffffff20;margin:0 auto 16px}
.sheet-title{font-size:16px;font-weight:700;text-align:center;margin-bottom:16px}
.sheet-qr{display:flex;justify-content:center;background:#fff;border-radius:12px;padding:16px;margin-bottom:12px}
.sheet-close{width:100%;padding:12px;border:none;border-radius:12px;background:#ffffff10;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif}

/* VPN Connect Sheet */
.vpn-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none}
.vpn-sheet-overlay.show{opacity:1;pointer-events:auto}
.vpn-sheet{position:fixed;left:0;right:0;bottom:0;z-index:10000;background:#13141a;border-radius:20px 20px 0 0;max-height:92vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1)}
.vpn-sheet.show{transform:translateY(0)}
.vpn-sheet-handle{width:36px;height:4px;border-radius:2px;background:#ffffff20;margin:12px auto 0;flex-shrink:0}
.vpn-sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 20px calc(20px + env(safe-area-inset-bottom))}
.vpn-sheet-locked{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}
.vpn-sheet-lock-icon{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;margin-bottom:20px;animation:lockBounce 2s ease-in-out infinite}
@keyframes lockBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.vpn-sheet-lock-title{font-size:18px;font-weight:800;color:#fff;margin-bottom:8px}
.vpn-sheet-lock-desc{font-size:13px;color:var(--text2);line-height:1.5;margin-bottom:24px}
.vpn-sheet-lock-btn{padding:14px 32px;border:none;border-radius:14px;background:linear-gradient(135deg,#4f8cf7,#3b6de0);color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:opacity .2s}
.vpn-sheet-lock-btn:active{opacity:.8}
/* Active state — timeline steps */
.vpn-sheet-title{font-size:17px;font-weight:800;margin-bottom:16px}
.vpn-sheet-step{display:flex;gap:14px;margin-bottom:20px}
.vpn-sheet-step-num{width:32px;height:32px;border-radius:50%;background:rgba(52,211,153,.1);border:2px solid #34d399;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#34d399;flex-shrink:0}
.vpn-sheet-step-num.done{background:#34d399;color:#000}
.vpn-sheet-step-num.done svg{display:block}
.vpn-sheet-step-content{flex:1;padding-top:4px}
.vpn-sheet-step-name{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px}
.vpn-sheet-step-desc{font-size:12px;color:var(--text2);line-height:1.4}
.vpn-sheet-step-btn{margin-top:10px;padding:10px 16px;border:none;border-radius:10px;background:#34d399;color:#000;font-size:13px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;display:inline-flex;align-items:center;gap:6px;transition:opacity .2s}
.vpn-sheet-step-btn:active{opacity:.8}
.vpn-sheet-step-btn.outline{background:transparent;border:1px solid var(--border);color:var(--text)}

.sub-info{background:linear-gradient(135deg,#7c5bf510,#5b8cf508);border:1px solid #7c5bf530;border-radius:14px;padding:16px;margin-bottom:16px}
.sub-info-row{display:flex;justify-content:space-between;padding:6px 0}
.sub-info-label{font-size:13px;color:var(--text2)}
.sub-info-val{font-size:13px;font-weight:600}

.sub-status-card{border-radius:16px;padding:20px;margin-bottom:16px;text-align:center;position:relative;overflow:hidden}
.sub-status-card.trial{background:linear-gradient(135deg,#e65c00,#f9a825);border:none}
.sub-status-card.trial .sub-status-title{color:#fff}
.sub-status-card.trial .sub-badge.trial{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3)}
.sub-status-card.trial .sub-countdown{background:none;-webkit-background-clip:unset;-webkit-text-fill-color:#fff;color:#fff}
.sub-status-card.trial .sub-countdown-label{color:rgba(255,255,255,.7)}
.sub-status-card.trial .sub-progress{background:rgba(255,255,255,.2)}
.sub-status-card.trial .sub-progress-fill{background:rgba(255,255,255,.8)}
.sub-status-card.trial .sub-expire{color:rgba(255,255,255,.6)}
.sub-status-card.active{background:linear-gradient(135deg,#34d39908,#34d39904);border:1px solid #34d39930}
.sub-status-card.plan-personal{background:linear-gradient(135deg,#1a6bb5,#2196F3);border:none}
.sub-status-card.plan-family{background:linear-gradient(135deg,#2e8b2e,#32cd32);border:none}
.sub-status-card.plan-corporate{background:linear-gradient(135deg,#8b2252,#a0306a);border:none}
.sub-status-card[class*="plan-"] .sub-status-title{color:#fff}
.sub-status-card[class*="plan-"] .sub-badge.active{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3)}
.sub-status-card[class*="plan-"] .sub-countdown{background:none;-webkit-background-clip:unset;-webkit-text-fill-color:#fff;color:#fff}
.sub-status-card[class*="plan-"] .sub-countdown-label{color:rgba(255,255,255,.7)}
.sub-status-card[class*="plan-"] .sub-progress{background:rgba(255,255,255,.2)}
.sub-status-card[class*="plan-"] .sub-progress-fill{background:rgba(255,255,255,.8)}
.sub-status-card[class*="plan-"] .sub-expire{color:rgba(255,255,255,.6)}
.sub-status-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sub-status-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.sub-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:6px;text-transform:uppercase;letter-spacing:.5px}
.sub-badge.trial{background:#f59e0b20;color:#f59e0b;border:1px solid #f59e0b40}
.sub-badge.active{background:#34d39920;color:#34d399;border:1px solid #34d39940}
.sub-countdown{font-size:44px;font-weight:800;letter-spacing:-1px;line-height:1}
.sub-countdown.trial{background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sub-countdown.active{background:linear-gradient(135deg,#34d399,#6ee7b7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sub-countdown-label{font-size:13px;color:var(--text2);margin-top:4px;font-weight:500}
.sub-progress{height:4px;border-radius:2px;background:#ffffff10;margin:16px 0 12px;overflow:hidden}
.sub-progress-fill{height:100%;border-radius:2px;transition:width .5s ease}
.sub-progress-fill.trial{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.sub-progress-fill.active{background:linear-gradient(90deg,#34d399,#6ee7b7)}
.sub-expire{font-size:12px;color:var(--text2)}
.sub-cta{margin-top:14px}
.sub-cta button{width:100%;padding:12px;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s}
.sub-cta button:active{transform:scale(.98);opacity:.9}
.sub-cta-trial{background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff}
.sub-cta-renew{background:linear-gradient(135deg,#34d399,#059669);color:#fff}

/* Subscription Popup — Apple Wallet */
.sub-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:9000;pointer-events:none;visibility:hidden;transition:background .4s ease,visibility 0s linear 1s}
.sub-popup-overlay.open{background:rgba(0,0,0,.75);pointer-events:auto;visibility:visible;transition:background .4s ease,visibility 0s linear 0s}
.sub-popup-overlay.open>.sub-popup-card{opacity:1!important;pointer-events:auto!important}
.sub-popup-card{position:fixed;overflow-y:auto;overflow-x:hidden;padding:20px;-webkit-overflow-scrolling:touch;will-change:transform,top,left,width,height,border-radius;transition:top .6s cubic-bezier(.4,0,.2,1),left .6s cubic-bezier(.4,0,.2,1),width .6s cubic-bezier(.4,0,.2,1),height .6s cubic-bezier(.4,0,.2,1),border-radius .6s cubic-bezier(.4,0,.2,1),opacity .3s;pointer-events:none}
.sub-popup-overlay:not(.open)>.sub-popup-card{pointer-events:none!important}
.sub-popup-card.morphing{overflow:hidden}
.sub-popup-card>*{opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.sub-popup-overlay.open .sub-popup-card>*{opacity:1;transform:translateY(0)}
.sub-popup-overlay.open .sub-popup-card>.wallet-close{transition-delay:.65s}
.sub-popup-overlay.open .sub-popup-card>.wallet-brand{transition-delay:.7s}
.sub-popup-overlay.open .sub-popup-card>#refPopupBody{transition-delay:.7s}
.sub-popup-overlay.open .sub-popup-card>.wallet-plan{transition-delay:.6s}
.sub-popup-overlay.open .sub-popup-card>.wallet-status{transition-delay:.62s}
.sub-popup-overlay.open .sub-popup-card>.wallet-countdown{transition-delay:.64s}
.sub-popup-overlay.open .sub-popup-card>.wallet-progress{transition-delay:.66s}
.sub-popup-overlay.open .sub-popup-card>.wallet-info-row{transition-delay:.68s}
.sub-popup-overlay.open .sub-popup-card>.wallet-tear{transition-delay:.72s}
.sub-popup-overlay.open .sub-popup-card>.popup-plans-header{transition-delay:.75s}
.sub-popup-overlay.open .sub-popup-card>.popup-plan-cards{transition-delay:.78s}
.sub-popup-overlay.open .sub-popup-card>.wallet-setting{transition-delay:.82s}
.sub-popup-card.plan-personal{background:linear-gradient(135deg,#1a6bb5,#2196F3);--plan-accent:#60a5fa;--plan-accent-bg:rgba(96,165,250,.15);--plan-accent-border:rgba(96,165,250,.4)}
.sub-popup-card.plan-family{background:linear-gradient(135deg,#2e8b2e,#32cd32);--plan-accent:#4ade80;--plan-accent-bg:rgba(74,222,128,.15);--plan-accent-border:rgba(74,222,128,.4)}
.sub-popup-card.plan-corporate{background:linear-gradient(135deg,#8b2252,#a0306a);--plan-accent:#f472b6;--plan-accent-bg:rgba(244,114,182,.15);--plan-accent-border:rgba(244,114,182,.4)}
.sub-popup-card.plan-trial{background:linear-gradient(135deg,#92400e,#b45309,#d97706);--plan-accent:#fbbf24;--plan-accent-bg:rgba(251,191,36,.15);--plan-accent-border:rgba(251,191,36,.4)}
.sub-popup-card.plan-owner{background:linear-gradient(135deg,#059669,#10b981);--plan-accent:#34d399;--plan-accent-bg:rgba(52,211,153,.15);--plan-accent-border:rgba(52,211,153,.4)}

/* Wallet elements */
.wallet-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;backdrop-filter:blur(4px)}
.wallet-close:active{background:rgba(255,255,255,.3);transform:scale(.9)}
.wallet-brand{font-size:11px;font-weight:800;color:rgba(255,255,255,.4);letter-spacing:4px;text-align:center;margin-bottom:16px}
.wallet-plan{font-size:17px;font-weight:700;color:#fff;text-align:center}
.wallet-status{font-size:12px;color:rgba(255,255,255,.7);text-align:center;margin-top:4px}
.wallet-countdown{font-size:36px;font-weight:900;color:#fff;text-align:center;line-height:1;margin:16px 0 4px;letter-spacing:-1px}
.wallet-progress{height:4px;background:rgba(255,255,255,.15);border-radius:2px;margin:10px 0;overflow:hidden}
.wallet-progress-bar{height:100%;background:var(--plan-accent,rgba(255,255,255,.7));border-radius:2px;transition:width .6s ease}
.wallet-info-row{display:flex;justify-content:space-between;margin:8px 0 0}
.wallet-info-item{text-align:center;flex:1}
.wallet-info-value{font-size:13px;font-weight:700;color:#fff}
.wallet-info-label{font-size:10px;color:rgba(255,255,255,.45);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}
.wallet-tear{border:none;height:1px;margin:14px -20px;background:repeating-linear-gradient(90deg,transparent,transparent 4px,rgba(255,255,255,.1) 4px,rgba(255,255,255,.1) 8px)}
.wallet-device{display:flex;align-items:center;justify-content:space-between;padding:8px 0;animation:walletDeviceIn .4s ease both}
@keyframes walletDeviceIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.wallet-slot{animation:walletSlotIn .4s ease both}
@keyframes walletSlotIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.wallet-device-left{display:flex;align-items:center;gap:10px}
.wallet-device-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7)}
.wallet-device-name{font-size:13px;font-weight:600;color:#fff}
.wallet-device-meta{font-size:10px;color:rgba(255,255,255,.4);margin-top:1px}
.wallet-device-right{font-size:10px;font-weight:600;color:rgba(255,255,255,.5)}
.wallet-device-right.online{color:#4ade80}
.wallet-device-actions{display:flex;gap:8px;margin-left:8px}
.wallet-device-btn{background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;padding:4px;font-size:11px}
.wallet-device-btn:active{color:#fff}
.wallet-slot{display:flex;align-items:center;justify-content:space-between;padding:8px 0;cursor:pointer}
.wallet-slot-left{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.3)}
.wallet-slot-circle{width:32px;height:32px;border:1px dashed rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center}
.wallet-slot-label{font-size:12px;color:rgba(255,255,255,.3)}
.wallet-slot-add{font-size:11px;font-weight:600;color:rgba(0,0,0,.8);background:#fff;border:none;border-radius:8px;padding:6px 14px;cursor:pointer}
.wallet-slot-add:active{opacity:.7;transform:scale(.95)}
.wallet-expand{text-align:center;font-size:12px;color:#fff;padding:8px 0;cursor:pointer;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
.wallet-expand:active{opacity:.7}
.wallet-setting{display:flex;justify-content:space-between;align-items:center;padding:4px 0}
.wallet-limit-block{background:rgba(0,0,0,.15);border-radius:12px;overflow:hidden;margin-top:0;padding:0 14px;max-height:0;opacity:0;transition:max-height .5s ease,opacity .4s ease,padding .5s ease,margin-top .5s ease}
.wallet-limit-block.open{max-height:180px;opacity:1;padding:14px;margin-top:8px}
.wallet-limit-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:10px}
.wallet-limit-minus,.wallet-limit-plus{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);border:none;color:#fff;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif}
.wallet-limit-minus:active,.wallet-limit-plus:active{background:rgba(255,255,255,.25)}
.wallet-limit-num{font-size:28px;font-weight:800;color:#fff;min-width:30px;text-align:center}
.wallet-limit-info{display:flex;flex-direction:column;gap:2px;font-size:11px;color:rgba(255,255,255,.5);text-align:center;margin-bottom:10px}
.wallet-limit-info b{color:rgba(255,255,255,.8)}
.wallet-limit-buy{width:100%;padding:12px;background:#fff;border:none;border-radius:10px;color:#000;font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif}
.wallet-limit-buy:active{opacity:.8;transform:scale(.97)}
.wallet-setting span{font-size:13px;color:rgba(255,255,255,.7)}

/* Device Picker */
.dp-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:9500;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;transition:background .3s}
.dp-overlay.open{background:rgba(0,0,0,.6);pointer-events:auto}
.dp-sheet{width:100%;max-width:400px;background:#1a1a2e;border-radius:20px 20px 0 0;padding:24px 20px 32px;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,1,.23,1)}
.dp-overlay.open .dp-sheet{transform:translateY(0)}
.dp-title{font-size:16px;font-weight:700;color:#fff;text-align:center;margin-bottom:18px}
.dp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.dp-platform{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:12px;background:rgba(255,255,255,.05);border:2px solid transparent;cursor:pointer;color:rgba(255,255,255,.5);transition:all .2s}
.dp-platform.active{border-color:var(--dp-accent,var(--green));color:#fff;background:var(--dp-accent-bg,rgba(52,211,153,.1))}
.dp-platform:active{transform:scale(.95)}
.dp-platform-label{font-size:11px;font-weight:600}
.dp-input-wrap{margin-bottom:14px}
.dp-input{width:100%;padding:12px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#fff;font-size:14px;font-weight:500;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s;box-sizing:border-box}
.dp-input:focus{border-color:var(--dp-accent,var(--green))}
.dp-input::placeholder{color:rgba(255,255,255,.3)}
.dp-confirm{width:100%;padding:14px;background:var(--dp-accent,var(--green));border:none;border-radius:12px;color:#000;font-size:15px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s}
.dp-confirm:active{transform:scale(.97);opacity:.9}
.dp-confirm:disabled{opacity:.5}

/* Subscription Cabinet — inside gradient card */
.cab-divider{height:1px;background:rgba(255,255,255,.12);margin:16px 0}
.cab-section-inline{margin-top:0}
.cab-section-header-inline{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cab-section-header-inline span:first-child{font-size:13px;font-weight:700;color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:.5px}
.cab-section-header-inline span:last-child{font-size:13px;font-weight:700;color:rgba(255,255,255,.6)}
.cab-actions-inline{display:flex;gap:8px;margin-bottom:12px}
.cab-action-pill{flex:1;background:rgba(255,255,255,.12);border:none;border-radius:10px;padding:10px 6px;text-align:center;font-size:12px;font-weight:600;color:#fff;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif;backdrop-filter:blur(4px)}
.cab-action-pill:active{background:rgba(255,255,255,.2);transform:scale(.96)}
.cab-autorenew-row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.cab-autorenew-row span{font-size:13px;color:rgba(255,255,255,.7)}
.cab-toggle{position:relative;display:inline-block;width:44px;height:24px;cursor:pointer}
.cab-toggle input{opacity:0;width:0;height:0}
.cab-toggle-slider{position:absolute;inset:0;background:#333;border-radius:12px;transition:background .2s}
.cab-toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s}
.cab-toggle input:checked+.cab-toggle-slider{background:var(--green)}
.cab-toggle input:checked+.cab-toggle-slider::before{transform:translateX(20px)}
.cab-device-card{background:rgba(255,255,255,.08);border:none;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;margin-bottom:8px;backdrop-filter:blur(4px)}
.cab-device-icon{font-size:22px;flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border-radius:10px}
.cab-device-info{flex:1;min-width:0}
.cab-device-name{font-size:13px;font-weight:600;color:#fff;margin-bottom:1px}
.cab-device-meta{font-size:11px;color:rgba(255,255,255,.5)}
.cab-device-actions{display:flex;gap:6px;flex-shrink:0}
.cab-device-del{background:none;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.6);border-radius:8px;padding:5px 10px;font-size:10px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s}
.cab-device-del:active{background:rgba(239,68,68,.3);border-color:#ef4444;color:#ef4444}
.cab-add-device-btn-inline{width:100%;padding:10px;background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.2);border-radius:10px;color:rgba(255,255,255,.5);font-size:12px;font-weight:600;cursor:pointer;text-align:center;transition:all .2s;font-family:'Inter',sans-serif;margin-top:4px}
.cab-add-device-btn-inline:active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}
.cab-expand-limit-btn{width:100%;padding:10px;background:none;border:none;color:rgba(255,255,255,.45);font-size:12px;font-weight:600;cursor:pointer;text-align:center;font-family:'Inter',sans-serif;margin-top:6px;transition:color .2s}
.cab-expand-limit-btn:active{color:rgba(255,255,255,.8)}
.cab-payment-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.cab-payment-item:last-child{border-bottom:none}
.cab-payment-plan{font-size:13px;font-weight:600;color:#fff}
.cab-payment-date{font-size:11px;color:rgba(255,255,255,.4);margin-top:2px}
.cab-payment-amount{font-size:14px;font-weight:700;color:#fff}
.cab-empty-inline{text-align:center;padding:16px;color:rgba(255,255,255,.35);font-size:12px}

/* Proxy Sheet */
.px-header{text-align:center;margin-bottom:20px;opacity:0;transform:translateY(12px);transition:all .5s .1s}
.vpn-sheet.show .px-header{opacity:1;transform:translateY(0)}
.px-icon{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,#2AABEE,#229ED9);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 8px 32px rgba(42,171,238,.3);position:relative;overflow:hidden}
.px-icon::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);border-radius:20px}
.px-title{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.3px}
.px-sub{font-size:13px;color:var(--text2);margin-top:6px;line-height:1.5}

/* QR block */
.px-qr-wrap{opacity:0;transform:scale(.9);transition:all .5s .2s}
.vpn-sheet.show .px-qr-wrap{opacity:1;transform:scale(1)}
.px-qr-card{background:linear-gradient(135deg,#ffffff08,#ffffff04);border:1px solid var(--border);border-radius:20px;padding:20px;text-align:center;position:relative;overflow:hidden}
.px-qr-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(42,171,238,.06),transparent,rgba(42,171,238,.06),transparent);animation:pxSpin 6s linear infinite}
@keyframes pxSpin{to{transform:rotate(360deg)}}
.px-qr-inner{position:relative;z-index:1}
.px-qr-box{width:180px;height:180px;margin:0 auto 12px;background:#fff;border-radius:14px;padding:10px;box-shadow:0 4px 24px rgba(0,0,0,.3)}
.px-qr-box canvas,.px-qr-box img{border-radius:6px!important}
.px-qr-hint{font-size:11px;color:var(--text2);line-height:1.5}

/* Server cards */
.px-servers{display:flex;flex-direction:column;gap:10px;margin-top:16px;opacity:0;transform:translateY(15px);transition:all .5s .3s}
.vpn-sheet.show .px-servers{opacity:1;transform:translateY(0)}
.px-srv{background:linear-gradient(135deg,#ffffff06,#ffffff03);border:1px solid var(--border);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .2s}
.px-srv:active{transform:scale(.98);border-color:rgba(42,171,238,.4)}
.px-srv-flag{font-size:24px;line-height:1}
.px-srv-info{flex:1;min-width:0}
.px-srv-name{font-size:14px;font-weight:700;color:#fff}
.px-srv-loc{font-size:11px;color:var(--text2);margin-top:2px}
.px-srv-dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 8px rgba(52,211,153,.5);flex-shrink:0}
.px-srv-btn{padding:7px 14px;border-radius:10px;background:linear-gradient(135deg,#2AABEE,#229ED9);color:#fff;font-size:12px;font-weight:700;border:none;cursor:pointer;white-space:nowrap;font-family:'Inter',sans-serif;transition:all .15s}
.px-srv-btn:active{transform:scale(.95);opacity:.8}

/* Action buttons */
.px-actions{display:flex;gap:10px;margin-top:16px;opacity:0;transform:translateY(15px);transition:all .5s .4s}
.vpn-sheet.show .px-actions{opacity:1;transform:translateY(0)}
.px-btn{flex:1;padding:14px;border:none;border-radius:14px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}
.px-btn:active{transform:scale(.97)}
.px-btn--connect{background:linear-gradient(135deg,#2AABEE,#229ED9);box-shadow:0 4px 20px rgba(42,171,238,.3)}
.px-btn--share{background:linear-gradient(135deg,#ffffff10,#ffffff06);border:1px solid var(--border)}
.px-btn--share:active{border-color:rgba(42,171,238,.4)}

/* Free badge */
.px-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:8px;background:linear-gradient(135deg,rgba(52,211,153,.15),rgba(52,211,153,.05));border:1px solid rgba(52,211,153,.2);font-size:11px;font-weight:700;color:#34d399;margin-top:10px}

/* Floating particles */
.px-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:20px}
.px-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(42,171,238,.4);animation:pxFloat 3s ease-in-out infinite}
@keyframes pxFloat{0%{opacity:0;transform:translateY(20px)}50%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}

/* Admin */
.admin-user{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.admin-user:last-child{border-bottom:none}
.admin-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.admin-avatar.owner{background:var(--grad)}
.admin-avatar.family{background:linear-gradient(135deg,#34d399,#059669)}
.admin-avatar.user{background:linear-gradient(135deg,#8a8a99,#555)}
.admin-user-info{flex:1;min-width:0}
.admin-user-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-user-meta{font-size:11px;color:var(--text2)}
.admin-user-traffic{font-size:11px;color:var(--accent2);font-weight:600}
.admin-user-actions{display:flex;gap:6px;flex-shrink:0}
.admin-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.admin-btn:active{transform:scale(.9)}
.admin-btn.remove{border-color:#f8717140}
.admin-btn.remove:active{background:#f8717120}

.admin-add{display:flex;gap:8px;margin-bottom:16px}
.admin-input{flex:1;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#12121a;color:var(--text);font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s}
.admin-input:focus{border-color:var(--accent1)}
.admin-input::placeholder{color:#555}
.admin-add-btn{padding:12px 20px;border-radius:12px;background:var(--grad);border:none;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;flex-shrink:0}
.admin-add-btn:active{opacity:.8}
.admin-add-btn:disabled{opacity:.5}

.admin-user-sub{font-size:11px;color:var(--green);font-weight:600}
.admin-user-sub.expired{color:var(--red)}
.admin-user-refs{font-size:11px;color:var(--accent1)}
.admin-detail{background:#12121a;border:1px solid var(--border);border-radius:12px;margin:0 0 8px;padding:14px;display:none}
.admin-detail.open{display:block}
.admin-detail-section{margin-bottom:12px}
.admin-detail-section:last-child{margin-bottom:0}
.admin-detail-title{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.admin-detail-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:12px}
.admin-detail-row .label{color:var(--text2)}
.admin-detail-row .val{font-weight:600}
.admin-detail-row .val.active{color:var(--green)}
.admin-detail-row .val.expired{color:var(--red)}
.admin-revoke-btn{padding:6px 12px;border-radius:8px;background:#f8717120;border:1px solid #f8717140;color:#f87171;font-size:11px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif}
.admin-revoke-btn:active{opacity:.7}
.admin-info-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.admin-info-btn:active{transform:scale(.9)}

/* App Block Overlay */
.app-block-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.app-block-bg{position:absolute;inset:0;background:var(--bg,#000)}
.app-block-bg::before{content:'';position:absolute;top:-40%;left:-40%;width:180%;height:180%;background:radial-gradient(circle at 30% 20%,rgba(124,91,245,.12) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgba(91,140,245,.1) 0%,transparent 50%);animation:abOrbs 8s ease-in-out infinite alternate}
.app-block-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,var(--bg,#000) 100%)}
@keyframes abOrbs{0%{transform:translate(0,0) scale(1)}100%{transform:translate(5%,-5%) scale(1.1)}}
.app-block-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:32px 28px;text-align:center;max-width:360px;animation:abFadeIn .6s ease-out}
@keyframes abFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.app-block-logo{font-family:'Unbounded',sans-serif;font-size:18px;font-weight:900;letter-spacing:3px;color:#fff;margin-bottom:32px;opacity:.7}
.app-block-icon{width:96px;height:96px;margin-bottom:28px;border-radius:28px;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(135deg,rgba(124,91,245,.2),rgba(91,140,245,.2));border:1px solid rgba(124,91,245,.25);backdrop-filter:blur(12px)}
.app-block-pulse{position:absolute;inset:-8px;border-radius:32px;border:1.5px solid rgba(124,91,245,.3);animation:abPulse 2.5s ease-in-out infinite}
@keyframes abPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:0;transform:scale(1.15)}}
.app-block-title{font-size:24px;font-weight:800;color:#fff;margin-bottom:8px;letter-spacing:-.3px}
.app-block-desc{font-size:14px;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:20px}
.app-block-steps{display:flex;flex-direction:column;gap:10px;width:100%;margin-bottom:28px;text-align:left}
.app-block-step{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:14px;transition:all .3s}
.app-block-step-num{width:28px;height:28px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0}
.app-block-step-text{font-size:13px;color:rgba(255,255,255,.75);line-height:1.4}
.app-block-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--grad);color:#fff;text-decoration:none;padding:16px 32px;border-radius:16px;font-size:15px;font-weight:700;overflow:hidden;transition:transform .2s;box-shadow:0 4px 24px rgba(124,91,245,.3)}
.app-block-btn:active{transform:scale(.97)}
.app-block-btn-shimmer{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:abShimmer 2.5s ease-in-out infinite}
@keyframes abShimmer{0%{left:-100%}100%{left:100%}}
.app-block-hint{margin-top:16px;font-size:12px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:6px}
.app-block-hint::before{content:'';width:6px;height:6px;border-radius:50%;background:rgba(52,211,153,.6);animation:abDot 1.5s ease-in-out infinite}
@keyframes abDot{0%,100%{opacity:.4}50%{opacity:1}}

.adm-monitor{background:linear-gradient(135deg,#0f1a2e,#121520);border:1px solid #667eea30;border-radius:16px;padding:16px;margin-bottom:16px}
.adm-monitor-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.adm-monitor-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.adm-monitor-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.adm-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.adm-dot-online{background:#22c55e;box-shadow:0 0 6px #22c55e80}
.adm-dot-offline{background:#ef4444;box-shadow:0 0 6px #ef444480}
.adm-dot-loading{background:#888;animation:adm-pulse 1.2s infinite}
@keyframes adm-pulse{0%,100%{opacity:.4}50%{opacity:1}}
.adm-monitor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.adm-metric{background:#0a0e18;border-radius:12px;padding:12px}
.adm-metric-header{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}
.adm-metric-val{font-size:16px;font-weight:800;color:var(--text);margin-bottom:6px}
.adm-metric-bar{height:6px;background:#1a1a2e;border-radius:3px;overflow:hidden}
.adm-metric-fill{height:100%;border-radius:3px;transition:width .6s ease}
.adm-fill-cpu{background:linear-gradient(90deg,#667eea,#7c5bf5)}
.adm-fill-ram{background:linear-gradient(90deg,#22c55e,#16a34a)}
.adm-fill-disk{background:linear-gradient(90deg,#f59e0b,#d97706)}
.adm-fill-cpu.high{background:linear-gradient(90deg,#ef4444,#dc2626)}
.adm-fill-ram.high{background:linear-gradient(90deg,#ef4444,#dc2626)}
.adm-fill-disk.high{background:linear-gradient(90deg,#ef4444,#dc2626)}
.adm-monitor-footer{display:flex;gap:12px;padding-top:12px;border-top:1px solid #ffffff08}
.adm-footer-item{flex:1;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.adm-footer-item b{color:var(--text);font-weight:700}
.admin-stat{display:flex;gap:8px;margin-bottom:16px}
.admin-stat-item{flex:1;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
.admin-stat-val{font-size:20px;font-weight:800}
.admin-stat-label{font-size:10px;color:var(--text2);margin-top:2px;text-transform:uppercase;letter-spacing:.3px}

.ref-card{background:linear-gradient(135deg,#1a1530,#151520);border:1px solid #7c5bf530;border-radius:14px;padding:16px;margin-top:12px}
.ref-title{font-size:14px;font-weight:700;margin-bottom:6px}
.ref-desc{font-size:12px;color:var(--text2);margin-bottom:12px;line-height:1.5}
.ref-link{font-size:12px;color:var(--accent2);word-break:break-all;background:#12121a;padding:10px;border-radius:8px;margin-bottom:8px}

.ref-banner{background:linear-gradient(135deg,#13102a,#0e1028);border:1px solid #7c5bf520;border-radius:16px;padding:16px;margin-bottom:12px;position:relative;overflow:hidden;cursor:pointer;transition:transform .15s}
.ref-banner:active{transform:scale(.98)}
.ref-banner-bg{position:absolute;top:-40px;right:-40px;width:140px;height:140px;background:radial-gradient(circle,#667eea10,transparent 70%);pointer-events:none}
.ref-banner-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ref-banner-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.ref-banner-desc{font-size:12px;color:var(--text2);margin-bottom:12px}
.ref-banner-levels{display:flex;gap:4px;margin-bottom:10px}
.ref-banner-level{display:flex;flex-direction:column;align-items:center;flex:1;padding:8px 2px;background:#0a0a18;border-radius:10px;border:1px solid #ffffff06;transition:all .4s ease;position:relative}
.ref-banner-level.ref-glow{border-color:var(--glow-color);box-shadow:0 0 12px var(--glow-color),0 0 24px color-mix(in srgb,var(--glow-color) 40%,transparent),inset 0 0 8px color-mix(in srgb,var(--glow-color) 15%,transparent);animation:refGlow 2.5s ease-in-out infinite;background:color-mix(in srgb,var(--glow-color) 8%,#0a0a18)}
@keyframes refGlow{0%,100%{box-shadow:0 0 12px var(--glow-color),0 0 24px color-mix(in srgb,var(--glow-color) 40%,transparent),inset 0 0 8px color-mix(in srgb,var(--glow-color) 15%,transparent)}50%{box-shadow:0 0 18px var(--glow-color),0 0 36px color-mix(in srgb,var(--glow-color) 50%,transparent),inset 0 0 12px color-mix(in srgb,var(--glow-color) 20%,transparent)}}
.ref-banner-level.ref-reached{opacity:.4}
.ref-banner-level-disc{font-size:10px;font-weight:800;margin-top:4px;letter-spacing:.3px}
.ref-banner-my{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#667eea0a;border:1px solid #667eea15;border-radius:10px}
.ref-banner-my-text{font-size:12px;color:var(--text2);flex:1}
.ref-banner-my-text b{color:var(--text)}
.ref-banner-copy{display:flex;align-items:center;gap:5px;background:linear-gradient(135deg,#667eea,#7c5bf5);border:none;border-radius:8px;padding:6px 12px;color:#fff;font-size:11px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;white-space:nowrap;transition:opacity .2s}
.ref-banner-copy:active{opacity:.7}
.ref-section{margin-top:12px}
.ref-level-card{background:linear-gradient(135deg,#1a1530,#151520);border:1px solid #7c5bf530;border-radius:16px;padding:18px;margin-bottom:12px}
.ref-level-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ref-level-badge{display:flex;align-items:center;gap:10px}
.ref-level-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#12121a}
.ref-level-name{font-size:18px;font-weight:800;color:var(--text)}
.ref-level-discount{font-size:13px;font-weight:700;color:var(--accent2);background:#667eea20;padding:4px 10px;border-radius:8px}
.ref-progress{margin-bottom:14px}
.ref-progress-bar{height:8px;background:#1a1a2e;border-radius:4px;overflow:hidden;margin-top:6px}
.ref-progress-fill{height:100%;border-radius:4px;transition:width .5s ease;background:linear-gradient(90deg,#667eea,#7c5bf5)}
.ref-progress-text{font-size:11px;color:var(--text2);display:flex;justify-content:space-between}
.ref-stats{display:flex;gap:8px}
.ref-stat{flex:1;text-align:center;background:#12121a;border-radius:10px;padding:10px 6px}
.ref-stat-val{font-size:18px;font-weight:800;color:var(--text)}
.ref-stat-label{font-size:10px;color:var(--text2);margin-top:2px;text-transform:uppercase;letter-spacing:.3px}
.ref-section-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ref-section-header .ref-title{margin-bottom:0}
.ref-invite-card{position:relative;overflow:hidden}
.ref-invite-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ref-invite-header .ref-title{margin-bottom:0}
.ref-copy-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:none;border-radius:12px;background:linear-gradient(135deg,#667eea,#7c5bf5);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s}
.ref-copy-btn:active{opacity:.8}
.ref-levels-list{margin-top:0}
.ref-level-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;background:#12121a;transition:all .2s}
.ref-level-item.active{background:#667eea15;border:none}
.ref-level-item.reached{opacity:.55}
.ref-level-item-icon{min-width:34px;height:34px;border-radius:10px;background:#0f0f1a;display:flex;align-items:center;justify-content:center}
.ref-level-item-info{flex:1}
.ref-level-item-name{font-size:13px;font-weight:700}
.ref-level-item-desc{font-size:11px;color:var(--text2);margin-top:1px}
.ref-level-item-check{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#22c55e20}
.ref-level-item-check svg{width:14px;height:14px}
.ref-people-list{margin-top:12px}
.ref-person{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:#12121a;margin-bottom:6px}
.ref-person:last-child{margin-bottom:0}
.ref-person-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#667eea,#7c5bf5);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0}
.ref-person-info{flex:1;min-width:0}
.ref-person-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-person-sub{font-size:11px;color:var(--text2);margin-top:1px}
.ref-person-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;flex-shrink:0}
.ref-person-badge.active{color:#22c55e;background:#22c55e15}
.ref-person-badge.inactive{color:var(--text2);background:#ffffff08}

/* Referral popup — Ocean Night */
.ref-popup-card{background:#14141a!important;border:none;scrollbar-width:none;-ms-overflow-style:none}
.ref-popup-card::-webkit-scrollbar{display:none}
/* Stagger fade-in is driven by JS (openRefPopup) — identical to keys popup pattern */
.ref-popup-card>#refPopupBody{transition-delay:0s}
.rp-hero{text-align:center;padding:4px 0 6px;position:relative}
.rp-hero-glow{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;background:#6366f1;filter:blur(60px);opacity:.18}
.rp-hero-tgs{width:160px;height:160px;margin:0 auto 14px;position:relative;will-change:transform;transform:translateZ(0)}
.rp-hero-level{font-size:24px;font-weight:800;position:relative;color:#fff;letter-spacing:-.3px}
.rp-hero-discount{display:none}
.rp-stats{display:flex;gap:8px;margin:14px 0}
.rp-stat{flex:1;background:rgba(255,255,255,.04);border-radius:12px;padding:10px 8px;text-align:center}
.rp-stat-val{font-size:18px;font-weight:800}
.rp-stat-accent{color:#c7d2fe}
.rp-stat-label{font-size:9px;color:rgba(255,255,255,.3);margin-top:2px;font-weight:600}
.rp-progress{background:rgba(255,255,255,.04);border-radius:12px;padding:12px;margin-bottom:14px}
.rp-progress-header{display:flex;justify-content:space-between;font-size:11px;margin-bottom:6px}
.rp-progress-label{color:rgba(255,255,255,.4)}
.rp-progress-count{color:#fff;font-weight:700}
.rp-bar{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.rp-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#4338ca,#6366f1);transition:width .6s}
.rp-btn-main{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border-radius:14px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;border:none;background:linear-gradient(135deg,#4338ca,#4f46e5);margin-bottom:8px;font-family:inherit}
/* Копилка — флип-карточка (credit-card proportions, ~1.586:1) */
.rp-piggy-wrap{margin:18px 0 14px;perspective:1400px}
.rp-piggy{position:relative;width:100%;aspect-ratio:1.586/1;min-height:200px;border-radius:16px;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.55,.08,.16,1);box-shadow:0 16px 36px -14px rgba(0,0,0,.7),0 4px 12px -4px rgba(0,0,0,.4)}
.rp-piggy.rp-piggy-tappable{cursor:pointer}
.rp-piggy.rp-piggy-tappable:active{transform:scale(.985)}
.rp-piggy.rp-piggy-tappable.flipped:active{transform:rotateY(180deg) scale(.985)}
.rp-piggy.flipped{transform:rotateY(180deg)}
.rp-piggy-face{position:absolute;inset:0;border-radius:16px;background:#1a1a22;padding:12px 14px;display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;transition:opacity 0s linear .425s,visibility 0s linear .425s}
.rp-piggy .rp-piggy-front{pointer-events:auto;opacity:1;visibility:visible;z-index:2}
.rp-piggy .rp-piggy-back{transform:rotateY(180deg);pointer-events:none;opacity:0;visibility:hidden;z-index:1}
.rp-piggy.flipped .rp-piggy-front{pointer-events:none;opacity:0;visibility:hidden;z-index:1}
.rp-piggy.flipped .rp-piggy-back{pointer-events:auto;opacity:1;visibility:visible;z-index:2}
.rp-piggy-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px;flex-wrap:nowrap}
.rp-piggy-label{font-size:9.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.35);flex-shrink:0}
.rp-piggy-main{display:flex;align-items:center;gap:4px;padding:0;flex:1;min-height:0}
.rp-piggy-tgs{width:128px;height:128px;flex-shrink:0;margin-left:-10px;will-change:transform;transform:translateZ(0)}
.rp-piggy-num{flex:1;display:flex;align-items:baseline;gap:5px;justify-content:center;min-width:0}
.rp-piggy-num-big{font-size:84px;line-height:1;font-weight:900;color:#fff;letter-spacing:-2.4px;font-feature-settings:'tnum' 1}
.rp-piggy-num-unit{font-size:20px;font-weight:700;color:rgba(255,255,255,.5)}
.rp-piggy-hint{text-align:center;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.35);padding:4px 32px 2px}
.rp-piggy-flipdot{position:absolute;right:10px;bottom:10px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);pointer-events:none;animation:rp-flipdot-pulse 2.2s ease-in-out infinite}
@keyframes rp-flipdot-pulse{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:.95;transform:scale(1.06)}}
/* Back face */
.rp-piggy-back-body{flex:1;display:flex;align-items:center;gap:14px;padding:4px 2px;min-height:0}
.rp-piggy-ring{position:relative;width:76px;height:76px;flex-shrink:0}
.rp-piggy-ring svg{display:block;width:100%;height:100%}
.rp-piggy-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.rp-piggy-ring-big{font-size:14px;font-weight:900;color:#fff;line-height:1;letter-spacing:-.3px}
.rp-piggy-ring-sub{font-size:9px;font-weight:700;color:rgba(199,210,254,.7);margin-top:2px;letter-spacing:.2px}
.rp-piggy-back-stats{flex:1;display:flex;flex-direction:column;gap:5px}
.rp-piggy-back-row{display:flex;justify-content:space-between;align-items:baseline;font-size:11px}
.rp-piggy-back-row span{color:rgba(255,255,255,.5);font-weight:600}
.rp-piggy-back-row b{color:#fff;font-weight:800;font-size:12.5px}
.rp-piggy-back-foot{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.05);text-align:center;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.45);letter-spacing:.1px}
.rp-confetti{position:fixed;width:9px;height:14px;border-radius:2px;pointer-events:none;z-index:99999;will-change:transform,opacity;animation:rp-confetti-fly 1.4s cubic-bezier(.22,.65,.25,1) forwards}
@keyframes rp-confetti-fly{0%{transform:translate(0,0) rotate(0deg);opacity:1}70%{opacity:1}100%{transform:translate(var(--cx),calc(var(--cy) + 260px)) rotate(720deg);opacity:0}}
.rp-piggy-prog{margin-bottom:12px}
.rp-piggy-prog-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;margin-bottom:6px}
.rp-piggy-prog-head>span:first-child{color:rgba(255,255,255,.5)}
.rp-piggy-prog-head>span:last-child{color:rgba(255,255,255,.85)}
.rp-piggy-bar{height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.rp-piggy-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#6366f1,#a78bfa);transition:width .8s cubic-bezier(.4,0,.2,1)}
.rp-piggy-max{text-align:center;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fbbf24;margin-bottom:12px}
.rp-piggy-hint{text-align:center;font-size:11px;font-weight:600;color:rgba(255,255,255,.35);padding-top:2px}
.rp-piggy-claim{display:flex;align-items:center;justify-content:center;width:100%;padding:9px;border-radius:10px;color:#fff;font-size:13px;font-weight:800;letter-spacing:.1px;cursor:pointer;border:none;background:linear-gradient(135deg,#4338ca,#4f46e5);font-family:inherit;transition:transform .15s,background .25s}
.rp-piggy-claim:active{transform:scale(.98)}
.rp-piggy-claim.disabled{background:rgba(255,255,255,.04);color:rgba(255,255,255,.45);cursor:default}
.rp-piggy-claim.disabled:active{transform:none}
.rp-piggy-claim.loading{opacity:.7;pointer-events:none}
.rp-piggy-claim.claimed{background:linear-gradient(135deg,#16a34a,#22c55e);pointer-events:none;cursor:default;animation:rp-claim-pop .35s cubic-bezier(.34,1.56,.64,1)}
.rp-piggy-claim.claimed:active{transform:none}
@keyframes rp-claim-pop{0%{transform:scale(.96)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
.rp-btn-copy{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:12px;color:rgba(255,255,255,.6);font-size:13px;font-weight:600;cursor:pointer;border:none;background:rgba(255,255,255,.05);font-family:inherit;position:relative;overflow:hidden}
.rp-btn-copy::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(74,222,128,.4),transparent);transition:none;pointer-events:none}
.rp-btn-copy.copied::after{left:100%;transition:left .6s ease}
.rp-how-cards{display:flex;gap:8px;margin-top:14px;align-items:stretch}
.rp-how-card{flex:1;min-width:0;background:rgba(255,255,255,.03);border:none;border-radius:14px;padding:16px 8px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:140px;justify-content:flex-start}
.rp-how-tgs{width:52px;height:52px;flex-shrink:0;will-change:transform;transform:translateZ(0)}
.rp-how-text{font-size:11.5px;color:rgba(255,255,255,.5);line-height:1.35;font-weight:500;text-wrap:balance;-webkit-text-wrap:balance;hyphens:none;word-break:normal;overflow-wrap:break-word}
.rp-how-text b{color:#c7d2fe;font-weight:700;white-space:nowrap}
.rp-how-text b{color:#c7d2fe;font-weight:700}
.rp-levels{margin-top:14px}
.rp-levels-title{font-size:20px;font-weight:800;margin-bottom:12px;text-align:center;background:linear-gradient(135deg,#c0c0c0,#fff,#c0c0c0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 8px rgba(255,255,255,.08))}
/* Rules — plain list at the bottom of the referral popup */
.rp-rules-plain{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.05)}
.rp-rules-plain-title{font-size:12px;font-weight:700;color:rgba(255,255,255,.45);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
.rp-rules-plain .rp-rules-item{font-size:12px;color:rgba(255,255,255,.45);line-height:1.55;padding:4px 0 4px 16px;position:relative}
.rp-rules-plain .rp-rules-item::before{content:'·';position:absolute;left:4px;top:4px;color:rgba(255,255,255,.3);font-weight:700}
.rp-level-card{margin-bottom:6px;border-radius:12px;background:rgba(255,255,255,.03);overflow:hidden;transition:background .15s}
.rp-level-card.active{background:rgba(99,102,241,.1)}
.rp-level-card.expanded{background:rgba(255,255,255,.05)}
.rp-level-card.active.expanded{background:rgba(99,102,241,.14)}
.rp-level-row{display:flex;align-items:center;gap:10px;padding:10px 12px;user-select:none;-webkit-tap-highlight-color:transparent}
.rp-level-row:active{opacity:.8}
.rp-level-chev{font-size:20px;line-height:1;color:rgba(255,255,255,.3);transition:transform .32s cubic-bezier(.4,0,.2,1);flex-shrink:0;font-weight:600}
.rp-level-card.expanded .rp-level-chev{transform:rotate(90deg);color:rgba(255,255,255,.6)}
.rp-level-detail{height:0;overflow:hidden;opacity:0;transition:height .32s cubic-bezier(.4,0,.2,1),opacity .2s ease;will-change:height;contain:layout paint}
.rp-level-card.expanded .rp-level-detail{opacity:1;transition:height .32s cubic-bezier(.4,0,.2,1),opacity .25s ease .05s}
.rp-level-detail-inner{padding:0 14px 12px 56px}
.rp-level-detail-hint{font-size:11px;font-weight:600;color:rgba(255,255,255,.4);padding:2px 0 8px;letter-spacing:.1px}
.rp-level-detail-item{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.rp-level-detail-item:last-child{border-bottom:none}
.rp-level-detail-lbl{font-size:12px;font-weight:600;color:rgba(255,255,255,.5)}
.rp-level-detail-val{font-size:13px;font-weight:800;color:#c7d2fe;font-feature-settings:'tnum' 1}
.rp-level-card.active .rp-level-detail-val{color:#fff}
.rp-level-tgs{width:32px;height:32px;flex-shrink:0;will-change:transform;transform:translateZ(0)}
.rp-level-info{flex:1}
.rp-level-name{font-size:12px;font-weight:700}
.rp-level-req{font-size:10px;color:rgba(255,255,255,.3)}
.rp-level-perks{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;text-align:right}
.rp-level-perk-days{font-size:12px;font-weight:800;color:#c7d2fe;letter-spacing:-.1px;white-space:nowrap}
.rp-level-perk-disc{font-size:10px;font-weight:600;color:rgba(255,255,255,.45);letter-spacing:.2px;white-space:nowrap}
.rp-level-card.active .rp-level-perk-days{color:#fff}
.rp-level-card.active .rp-level-perk-disc{color:rgba(255,255,255,.7)}
/* Rules table — days × duration × level */
.rp-rules-table{margin-top:18px;padding:14px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04)}
.rp-rules-table-title{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;text-align:center}
.rp-rules-grid{display:grid;grid-template-columns:auto repeat(4,1fr);gap:1px;background:rgba(255,255,255,.04);border-radius:10px;overflow:hidden;font-feature-settings:'tnum' 1}
.rp-rules-th,.rp-rules-rowlbl,.rp-rules-cell{padding:8px 4px;text-align:center;background:#15151c;font-size:11px}
.rp-rules-th{font-weight:700;color:rgba(255,255,255,.45);text-transform:lowercase;letter-spacing:.2px;background:#1a1a22}
.rp-rules-th-empty{background:#1a1a22}
.rp-rules-rowlbl{font-weight:800;color:#fff;text-align:left;padding-left:10px;background:#1a1a22}
.rp-rules-cell{color:rgba(199,210,254,.85);font-weight:700}
.rp-rules-rowlbl.active{color:#a5b4fc;background:rgba(99,102,241,.14)}
.rp-rules-cell.active{color:#fff;background:rgba(99,102,241,.14)}
.rp-people{margin-top:14px}
.rp-people-title{font-size:12px;font-weight:700;margin-bottom:8px;color:rgba(255,255,255,.5)}
.rp-person{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.rp-person:last-child{border-bottom:none}
.rp-person-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:#fff}
.rp-person-info{flex:1;min-width:0}
.rp-person-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-person-status{font-size:10px;margin-top:1px}
.rp-person-status.active{color:#4ade80}
.rp-person-status.inactive{color:rgba(255,255,255,.25)}

.loader{width:20px;height:20px;border:2px solid #fff4;border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block}

.awg-card{border-color:#34d39940;margin-top:12px}
.awg-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.awg-title{font-size:15px;font-weight:700}
.awg-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;background:#34d39915;color:var(--green);border:1px solid #34d39930}
.awg-proto{font-size:11px;color:var(--text2);margin-bottom:14px}
.awg-actions{display:flex;flex-direction:column;gap:8px}
.awg-tabs{display:flex;gap:4px;margin-bottom:12px;background:var(--bg-secondary);border-radius:10px;padding:3px}
.awg-tab{flex:1;padding:8px 6px;border:none;border-radius:8px;background:transparent;color:var(--text2);font-size:12px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:all .2s;text-align:center}
.awg-tab.active{background:var(--bg-card);color:var(--text);box-shadow:0 1px 3px #0003}
.awg-tab-gaming.active{color:#34d399}
.awg-mode-hint{font-size:11px;color:var(--text2);line-height:1.5;margin-bottom:10px;padding:8px 10px;background:var(--bg-secondary);border-radius:8px}
.btn-gaming{background:linear-gradient(135deg,#059669,#34d399);width:100%;padding:15px;border:none;border-radius:14px;color:#fff;font-size:15px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;position:relative;overflow:hidden}
.btn-gaming:active{transform:scale(.98);opacity:.9}
.btn-gaming:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-gaming::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#fff2,transparent);pointer-events:none}
.proxy-card{border-color:#2AABEE30;background:linear-gradient(135deg,var(--card) 0%,#2AABEE0a 100%)}
.proxy-card-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.proxy-icon-wrap{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#2AABEE,#229ED9);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.proxy-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-proxy-item{background:linear-gradient(135deg,#2AABEE20,#229ED915);border:1px solid #2AABEE40;border-radius:12px;color:#fff;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 10px;transition:all .2s}
.btn-proxy-item:active{transform:scale(.97);opacity:.85;background:linear-gradient(135deg,#2AABEE35,#229ED925)}
.btn-support{background:linear-gradient(135deg,#667eea,#5a67d8);width:100%;padding:15px;border:none;border-radius:14px;color:#fff;font-size:15px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;position:relative;overflow:hidden}
.btn-support:active{transform:scale(.98);opacity:.9}

.tabbar{display:flex;justify-content:space-around;padding:8px 8px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:#13131aF0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-shrink:0;transform:translateY(100%);opacity:0;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.tabbar.visible{transform:translateY(0);opacity:1}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 12px;border-radius:10px;cursor:pointer;transition:all .15s;border:none;background:none;font-family:'Inter',sans-serif;position:relative}
.tab svg,.tab-icon{transition:all .15s}
.tab-icon{width:22px;height:22px;opacity:.55}
.tab.active .tab-icon{opacity:1;filter:brightness(1.2) drop-shadow(0 0 4px rgba(124,91,245,.4))}
.tab-label{font-size:10px;font-weight:600;transition:color .15s}
.tab.active svg,.tab.active .tab-icon{color:var(--accent1)}
.tab.active .tab-label{color:var(--accent1)}
.tab:not(.active) svg{color:#8a8a99}
.tab:not(.active) .tab-label{color:#8a8a99}
.tab.active::before{content:'';position:absolute;top:-8px;width:20px;height:2px;border-radius:1px;background:var(--accent1);box-shadow:0 0 8px #7c5bf560}
.tab-hidden{display:none!important}

.fam-member{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.fam-member:last-child{border-bottom:none}
.fam-member-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#34d399,#059669);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.fam-member-info{flex:1;min-width:0}
.fam-member-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fam-member-meta{font-size:11px;color:var(--text2)}
.fam-member-medal{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.fam-member-rm{width:28px;height:28px;border-radius:8px;border:1px solid #f8717130;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.fam-member-rm:active{background:#f8717115}

.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:#1a1a24;border:1px solid var(--border);color:var(--text);padding:10px 20px;border-radius:12px;font-size:13px;font-weight:600;opacity:0;transition:all .3s;z-index:100;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* --- Onboarding overlay --- */
.geo-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:22px;border-radius:6px;cursor:pointer;transition:all .2s;font-size:14px;border:1.5px solid transparent;padding:0;background:none;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.geo-btn.active{background:rgba(102,126,234,.15);border-color:rgba(102,126,234,.5);box-shadow:0 0 8px rgba(102,126,234,.2)}
.geo-btn:not(.active):active{background:rgba(255,255,255,.1)}
.server-locs-row{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:8px 0 2px;margin-top:6px;border-top:1px solid rgba(255,255,255,.06)}
.server-locs-row::-webkit-scrollbar{display:none}
.geo-fallback-flag{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:42px;line-height:1}

/* Device action sheet — slide up */
.dev-sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9998;opacity:0;transition:opacity .25s}
.dev-sheet-bg.show{opacity:1}
.dev-sheet{position:fixed;bottom:0;left:0;right:0;background:rgba(17,17,21,.78);backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);border-radius:20px 20px 0 0;padding:24px 20px 32px;z-index:9999;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.68,0,1.0)}
.dev-sheet.show{transform:translateY(0)}
.dev-sheet-handle{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.15);margin:0 auto 16px}
.dev-sheet-title{font-size:17px;font-weight:700;color:#fff;text-align:center;margin-bottom:2px}
.dev-sheet-status{font-size:13px;text-align:center;margin-bottom:16px}
.dev-sheet-status.online{color:#34d399}
.dev-sheet-status.offline{color:var(--text2,#8a8a99)}
.dev-sheet-section{font-size:11px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 8px;text-align:center}
.dev-sheet-row{display:flex;gap:8px}
.dev-sheet-btn{flex:1;padding:13px;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:transform .15s,opacity .15s}
.dev-sheet-btn:active{transform:scale(.97);opacity:.8}
.dev-sheet-btn--key{background:rgba(255,255,255,.07);color:#fff}
.dev-sheet-btn--app{background:rgba(124,91,245,.12);color:var(--accent1,#7c5bf5)}
.dev-sheet-btn--rename{background:rgba(255,255,255,.07);color:#fff}
.dev-sheet-btn--forget{background:rgba(248,113,113,.1);color:var(--red,#f87171)}
.dev-sheet-btn--cancel{background:transparent;color:var(--text2,#8a8a99);font-weight:500}

/* ===== Profile v2 ===== */
.prof-hero{display:flex;flex-direction:column;align-items:center;padding:8px 0 18px;position:relative}
.prof-avatar{width:112px;height:112px;border-radius:50%;background:linear-gradient(135deg,#7c5bf5,#5b8cf5);display:flex;align-items:center;justify-content:center;font-family:Unbounded,sans-serif;font-weight:900;font-size:46px;color:#fff;box-shadow:0 12px 40px rgba(124,91,245,.35);overflow:hidden}
.prof-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.prof-name{font-size:28px;font-weight:800;margin-top:18px;color:#fff;letter-spacing:-.5px}
.prof-sub{font-size:13px;color:var(--text2,#8a8a99);margin-top:6px;font-weight:500}
.prof-sub b{color:#fff;font-weight:700}
.prof-brand{font-family:Unbounded,sans-serif;font-weight:700;letter-spacing:1px;color:#fff}
.prof-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.prof-btn{height:50px;border-radius:14px;background:#14141a;color:#fff;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:Inter,sans-serif;border:none;letter-spacing:-.1px}
.prof-btn:active{background:#1c1c24}
.prof-btn svg{width:17px;height:17px;color:var(--text2,#8a8a99)}
.prof-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.prof-stat{border-radius:22px;padding:16px 16px 18px;position:relative;overflow:hidden;background:#14141a;min-height:170px;display:flex;flex-direction:column;justify-content:flex-end}
.prof-stat-tgs{position:absolute;top:6px;right:4px;width:108px;height:108px;pointer-events:none}
.prof-stat-tgs canvas,.prof-stat-tgs svg{width:100%!important;height:100%!important}
.prof-stat-val{font-size:26px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.6px}
.prof-stat-val .unit{font-size:13px;font-weight:600;color:var(--text2,#8a8a99);margin-left:4px}
.prof-stat-label{font-size:12px;color:var(--text2,#8a8a99);margin-top:6px;font-weight:500}
.prof-stat--geo .prof-stat-val{font-size:20px;display:flex;align-items:center;gap:8px}
.prof-stat-flag{font-size:20px;line-height:1;flex-shrink:0}
.prof-donate{margin-top:24px;border-radius:24px;padding:22px 20px 20px;background:#14141a;text-align:center}
.prof-donut{width:120px;height:120px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;font-size:96px;line-height:1;filter:drop-shadow(0 12px 30px rgba(244,114,182,.35))}
.prof-donate-title{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.3px;margin-bottom:16px}
.prof-donate-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.prof-donate-btn{position:relative;overflow:hidden;height:52px;border-radius:14px;background:rgba(255,255,255,.06);color:#fff;font-size:15px;font-weight:800;cursor:pointer;font-family:Inter,sans-serif;border:none;letter-spacing:-.2px;transition:background .15s;isolation:isolate}
.prof-donate-btn:active{background:rgba(255,255,255,.14)}
.prof-donate-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 20%,rgba(52,211,153,.0) 30%,rgba(52,211,153,.75) 50%,rgba(52,211,153,.0) 70%,transparent 80%);transform:translateX(-120%);pointer-events:none;z-index:0}
.prof-donate-btn.sweep::before{animation:profDonSweep .7s ease-out forwards}
.prof-donate-btn > *{position:relative;z-index:1}
@keyframes profDonSweep{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.prof-sec-title{margin:26px 4px 12px;font-size:14px;font-weight:700;color:#fff;letter-spacing:-.1px}
.prof-act-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.prof-act-list::-webkit-scrollbar{display:none}
.prof-act{flex-shrink:0;scroll-snap-align:start;display:flex;align-items:center;gap:12px;padding:14px;background:#14141a;border-radius:16px}
.prof-act--donate{background:#14141a}
.prof-act-method{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background:#fff}
.prof-act-method img{display:block;width:100%;height:100%;object-fit:cover}
.prof-act-method.donate{background:linear-gradient(135deg,#f472b6,#c73c9b);font-size:22px}
.prof-act-body{flex:1;min-width:0}
.prof-act-title{font-size:14px;font-weight:700;color:#fff;line-height:1.3}
.prof-act-time{font-size:11px;color:var(--text2,#8a8a99);margin-top:3px;font-weight:500}
.prof-act-amt{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;letter-spacing:-.2px}
.prof-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding:14px 6px}
.prof-meta-id{font-size:11px;color:var(--text3,#5a5a66);font-family:ui-monospace,Menlo,monospace;cursor:pointer;font-weight:500}
.prof-meta-ver{font-size:11px;color:var(--text3,#5a5a66);font-weight:500}

/* Donate custom sheet */
.prof-sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:1000}
.prof-sheet-bg.open{opacity:1;pointer-events:auto}
.prof-sheet{position:fixed;left:0;right:0;bottom:0;background:#14141a;border-radius:24px 24px 0 0;padding:10px 20px 24px;transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);z-index:1001;max-width:480px;margin:0 auto}
.prof-sheet.open{transform:translateY(0)}
.prof-sheet-handle{width:40px;height:4px;background:rgba(255,255,255,.2);border-radius:2px;margin:0 auto 12px}
.prof-sheet-title{font-size:20px;font-weight:800;color:#fff;text-align:center;letter-spacing:-.3px}
.prof-sheet-sub{font-size:13px;color:var(--text2,#8a8a99);text-align:center;margin-top:6px}
.prof-sheet-input-wrap{position:relative;margin-top:18px}
.prof-sheet-input{width:100%;height:56px;background:rgba(255,255,255,.06);border:none;border-radius:16px;padding:0 48px 0 20px;color:#fff;font-size:22px;font-weight:800;font-family:Inter,sans-serif;outline:none;letter-spacing:-.3px}
.prof-sheet-input::-webkit-outer-spin-button,.prof-sheet-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.prof-sheet-cur{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--text2,#8a8a99);font-size:18px;font-weight:800}
.prof-sheet-btn{width:100%;height:52px;margin-top:14px;border:none;border-radius:16px;background:linear-gradient(135deg,#7c5bf5,#5b8cf5);color:#fff;font-size:15px;font-weight:800;cursor:pointer;font-family:Inter,sans-serif;letter-spacing:-.1px}
.prof-sheet-btn:active{opacity:.9}
.prof-sheet-btn:disabled{opacity:.4;cursor:not-allowed}

/* ============================================================
   CORPORATE — pill switcher, corp bento, corp sheets (v2 system)
   All corp styles are namespaced with .corp-* or under body.corp-mode.
   ============================================================ */

/* Greeting row with pill */
.greeting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;min-height:22px}
.greeting-row .greeting{margin-bottom:0;flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.2}
.greeting-row .greeting-sub{margin-left:0;font-size:11px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* Context pill — borderless, solid glass */
.ctx-pill{display:inline-flex;align-items:center;padding:3px;border-radius:12px;background:rgba(255,255,255,.05);flex-shrink:0;gap:2px}
.ctx-pill[hidden]{display:none!important}
.ctx-pill-seg{padding:6px 13px;border-radius:9px;background:transparent;border:none;outline:none;color:rgba(255,255,255,.5);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .18s ease,color .18s ease;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;letter-spacing:.1px}
.ctx-pill-seg:active{transform:scale(.96)}
.ctx-pill-seg.active{background:rgba(255,255,255,.14);color:#fff}

/* Corp mode — hide personal elements */
body.corp-mode #quickTiles{display:none}
body.corp-mode #bentoGrid{display:none}
body.corp-mode #bentoCorp{display:grid}
body:not(.corp-mode) #bentoCorp{display:none!important}

/* Corporate bento grid */
.bento-corp{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(140px,1fr) minmax(140px,1fr);gap:12px;margin-bottom:14px;position:relative}

/* Corp devices (top-left) — reuse bento-keys look but with corp accent */
.bento-corp-devices{grid-column:1;grid-row:1;background:#14141a}

/* Corp plan (top-right) — green gradient like bento-sub but for corp */
.bento-corp-plan{grid-column:2;grid-row:1/3;background:#14141a;border:1px solid rgba(255,255,255,.04)!important;color:#fff;padding:18px 16px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;border-radius:20px;position:relative;overflow:hidden}
.bento-corp-plan::before{content:'';position:absolute;top:-40%;right:-30%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.04) 0%,transparent 70%);pointer-events:none}
.bento-corp-plan .bento-sub-plan{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.3px;margin-bottom:4px}
.bento-corp-plan .bento-sub-expires{font-size:12px;color:rgba(255,255,255,.75);font-weight:600}
.bento-corp-infinity{margin:20px 0 6px;color:#fff;opacity:.95}
.bento-corp-plan-sub{font-size:11px;color:rgba(255,255,255,.7);font-weight:600;letter-spacing:.2px;text-transform:uppercase;margin-bottom:10px}
.bento-corp-profile-link{font-size:11px;color:rgba(255,255,255,.75);font-weight:600;margin-top:auto}
.bento-corp-plan .bento-sub-cta{position:absolute;right:14px;bottom:14px}
.bento-corp-plan .bento-sub-arrow{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff}

/* Corp team (bottom-left) */
.bento-corp-team{grid-column:1;grid-row:2;background:#14141a;align-items:flex-start!important;text-align:left!important;padding:16px!important}
.bento-corp-team-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.bento-corp-team-title{font-size:13px;font-weight:700;color:#fff}
.bento-corp-team-count{font-size:28px;font-weight:900;color:#fff;line-height:1;margin:4px 0}
.bento-corp-team-sub{font-size:11px;color:rgba(255,255,255,.5);font-weight:600}

/* Corp settings (bottom-right alt slot if plan moves) — not used yet, plan takes full right column */
.bento-corp-settings{display:none}

/* Corp popups — reuse .sub-popup-overlay / .sub-popup-card morph pattern.
   Our cards inherit the morph transitions; only card-content styling is corp-specific. */
.sub-popup-card.corp-card{background:#14141a!important;border:none;scrollbar-width:none;-ms-overflow-style:none;color:#fff}
.sub-popup-card.corp-card::-webkit-scrollbar{display:none}
.sub-popup-card.corp-card>.wallet-close{transition-delay:.65s}
.sub-popup-card.corp-card>.wallet-brand{transition-delay:.68s}
.sub-popup-card.corp-card>.corp-sheet-head,
.sub-popup-card.corp-card>.corp-info-head,
.sub-popup-card.corp-card>.corp-invite-head,
.sub-popup-card.corp-card>.sheet-title{transition-delay:.7s}
.sub-popup-card.corp-card>.corp-seats-bar{transition-delay:.72s}
.sub-popup-card.corp-card>.corp-seat-manager{transition-delay:.74s}
.sub-popup-card.corp-card>.corp-members-list,
.sub-popup-card.corp-card>.corp-devices-list,
.sub-popup-card.corp-card>.corp-info-rows{transition-delay:.76s}
.sub-popup-card.corp-card>.corp-sheet-actions{transition-delay:.8s}
.sub-popup-card.corp-card>.corp-field{transition-delay:.78s}

/* Seat manager (owner-only stepper for total seats) */
.corp-seat-manager{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);margin-bottom:14px}
.corp-seat-manager[hidden]{display:none!important}
.corp-seat-manager-title{font-size:13px;font-weight:700;color:#fff}
.corp-seat-manager-hint{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px}
.corp-stepper-lg{height:40px}
.corp-stepper-lg .corp-stepper-btn{width:40px;height:40px;font-size:17px}
.corp-stepper-lg .corp-stepper-val{min-width:46px;font-size:16px}
.corp-stepper-btn:disabled{opacity:.3;cursor:not-allowed}
.corp-sheet-head{margin-bottom:14px}
.corp-sheet-sub{font-size:12px;color:var(--text2);text-align:center;margin-top:-8px;margin-bottom:8px}
.corp-sheet-actions{display:flex;flex-direction:column;gap:8px;margin:16px 0 8px}
.corp-sheet-actions[hidden]{display:none!important}
.corp-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.08);color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:-.1px;transition:transform .15s,opacity .15s}
.corp-btn-primary:active{transform:scale(.98);opacity:.92}
.corp-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;height:44px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:transparent;color:rgba(255,255,255,.7);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.corp-btn-ghost:active{background:rgba(255,255,255,.05)}
.corp-btn-danger{color:#f87171;border-color:rgba(248,113,113,.25)}
.corp-btn-danger:active{background:rgba(248,113,113,.08)}

/* Seat usage bar */
.corp-seats-bar{margin:4px 0 14px}
.corp-seats-label{font-size:12px;color:var(--text2);margin-bottom:6px}
.corp-seats-label b{color:#fff;font-weight:800}
.corp-seats-track{width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.corp-seats-fill{height:100%;background:rgba(255,255,255,.45);border-radius:3px;transition:width .4s ease}

/* Members list */
.corp-members-list{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;margin:4px -4px}
.corp-member{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04)}
.corp-member-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;flex-shrink:0}
.corp-member-main{flex:1;min-width:0}
.corp-member-name{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.corp-member-meta{font-size:11px;color:var(--text2);margin-top:2px;display:flex;gap:6px;align-items:center}
.corp-member-role{padding:2px 7px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.corp-member-role.owner{background:rgba(255,255,255,.1);color:#fff}
.corp-member-role.admin{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75)}
.corp-member-role.member{background:rgba(255,255,255,.04);color:rgba(255,255,255,.5)}
.corp-member-kick{width:28px;height:28px;border-radius:8px;border:none;background:rgba(248,113,113,.1);color:#f87171;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.corp-member-kick:active{background:rgba(248,113,113,.2)}

/* Fields */
.corp-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.corp-field-label{font-size:12px;color:var(--text2);font-weight:600}
.corp-field-hint{font-size:11px;color:var(--text2);opacity:.7;margin-top:4px}
.corp-input{width:100%;height:44px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#fff;font-size:14px;font-weight:600;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s}
.corp-input:focus{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.05)}

/* Stepper */
.corp-stepper{display:inline-flex;align-items:center;gap:0;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);align-self:flex-start}
.corp-stepper-btn{width:44px;height:44px;border:none;background:transparent;color:#fff;font-size:18px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .1s}
.corp-stepper-btn:active{background:rgba(255,255,255,.08)}
.corp-stepper-val{min-width:44px;text-align:center;font-size:15px;font-weight:800;color:#fff}

/* Servers selection */
.corp-servers{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.corp-server-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:rgba(255,255,255,.6);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.corp-server-chip.on{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.corp-server-chip:active{transform:scale(.95)}

/* Device list */
.corp-devices-list{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;margin:4px -4px 6px}
.corp-device-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04)}
.corp-device-icon{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(255,255,255,.7)}
.corp-device-name{flex:1;font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.corp-device-meta{font-size:11px;color:var(--text2);margin-top:2px}
.corp-device-del{width:28px;height:28px;border-radius:8px;border:none;background:rgba(248,113,113,.1);color:#f87171;cursor:pointer;display:flex;align-items:center;justify-content:center}
.corp-device-del:active{background:rgba(248,113,113,.2)}
.corp-empty{text-align:center;padding:24px 16px;color:var(--text2);font-size:13px}

/* Info sheet */
.corp-info-head{display:flex;align-items:center;gap:14px;padding:4px 0 18px;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:14px}
.corp-info-badge{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.corp-info-name{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.3px;line-height:1.2}
.corp-info-status{font-size:12px;color:var(--text2);font-weight:600;margin-top:2px}
.corp-info-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.corp-info-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.05)}
.corp-info-row:last-child{border-bottom:none}
.corp-info-row-label{font-size:12px;color:var(--text2);font-weight:600}
.corp-info-row-val{font-size:13px;color:#fff;font-weight:700}

/* Invite sheet */
.corp-invite-head{text-align:center;padding:4px 0 14px}
.corp-invite-icon{font-size:44px;margin-bottom:8px}
.corp-invite-box{padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.85);font-family:'SF Mono',Menlo,monospace;word-break:break-all;margin:8px 0 12px;line-height:1.45}

/* Toast for corp */
.corp-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);padding:12px 20px;border-radius:14px;background:rgba(30,30,40,.95);color:#fff;font-size:13px;font-weight:600;z-index:10001;opacity:0;transition:transform .25s ease,opacity .25s ease;box-shadow:0 10px 30px rgba(0,0,0,.4);pointer-events:none}
.corp-toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ============ SUBSCRIBE PAGE REDESIGN (sx-*) ============ */
/* Holographic card */
.sx-card-wrap{margin:4px 0 18px;animation:sxFadeUp .32s cubic-bezier(.16,1,.3,1) both}
@keyframes sxFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.sx-card-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}
.sx-card-brand{font-weight:700;font-size:14px;letter-spacing:-.005em;color:#fff;opacity:.92;text-transform:none}
.sx-card-status{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 12px;border-radius:999px;background:rgba(0,0,0,.28);font-size:11px;font-weight:700;color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sx-card-status .sx-dot{width:6px;height:6px;border-radius:999px;background:#c8ff5e;box-shadow:0 0 8px #c8ff5e}
.sx-flippable .theme-trial .sx-card-status .sx-dot{background:#fbbf24;box-shadow:0 0 8px #fbbf24}
.sx-flippable .theme-expired .sx-card-status .sx-dot{background:#fff;box-shadow:0 0 8px #fff}
.sx-card-deco{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(circle at 110% 0%,rgba(255,255,255,.18) 0%,transparent 38%),radial-gradient(circle at 0% 100%,rgba(0,0,0,.18) 0%,transparent 36%)}
.sx-card-deco::after{content:'';position:absolute;top:14px;right:14px;width:38px;height:28px;border-radius:6px;background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.12);display:none}
.sx-card-mid{margin-top:auto;position:relative;z-index:2}
.sx-card-time{display:flex;align-items:baseline;gap:9px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1;color:#fff;flex-wrap:nowrap}
.sx-time-grp{display:inline-flex;align-items:baseline;gap:3px}
.sx-card-time .sx-num{font-size:34px;line-height:1;color:#fff;-webkit-text-fill-color:#fff}
.sx-card-time .sx-unit{font-size:13px;font-weight:700;opacity:.65;letter-spacing:0;color:#fff}
.sx-card-time-cap{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-top:6px;color:#fff}
.sx-card-bottom{display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:2;margin-top:14px;gap:10px}
.sx-card-plan-block{display:flex;flex-direction:column;gap:3px;min-width:0}
.sx-card-plan-cap{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sx-card-plan-name{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-flip-circ{width:auto;height:36px;border-radius:999px;padding:0 4px 0 14px;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;cursor:pointer;color:#fff;transition:background .15s,transform .15s;flex-shrink:0}
.sx-flip-circ:active{background:rgba(255,255,255,.28);transform:scale(.97)}
.sx-flip-label{font:700 13px/1 'Inter','Manrope',-apple-system,system-ui,sans-serif;letter-spacing:-.01em;color:#fff}
.sx-flip-circ-only{width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.22);display:grid;place-items:center;color:#fff}

/* Quick actions */
.sx-qa-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 0 18px;animation:sxFadeUp .35s ease backwards;animation-delay:.08s}
.sx-qa-row-3{grid-template-columns:repeat(3,1fr)}
.sx-qa{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;cursor:pointer;color:#fff;padding:0;font-family:inherit}
.sx-qa-circ{width:50px;height:50px;border-radius:999px;background:rgba(255,255,255,.07);border:none;display:grid;place-items:center;color:#fff;transition:background .15s,transform .15s}
.sx-qa:hover .sx-qa-circ{background:rgba(255,255,255,.10)}
.sx-qa:active .sx-qa-circ{background:rgba(255,255,255,.14);transform:scale(.94)}
.sx-qa-lbl{font-size:11px;font-weight:600;color:rgba(255,255,255,.62)}

/* Section header */
.sx-section-h{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);padding:14px 4px 10px}

/* Plans header row with integrated gift toggle */
.sx-plans-header{display:flex;align-items:center;justify-content:space-between;padding:14px 2px 10px;gap:12px}
.sx-plans-header .sx-section-h{padding:0;flex:1;min-width:0}
.sx-gift-toggle{display:inline-flex;align-items:center;gap:6px;padding:7px 13px 7px 11px;border-radius:999px;background:rgba(255,255,255,.06);border:none;cursor:pointer;color:rgba(255,255,255,.78);font:700 12px/1 'Inter','Manrope',sans-serif;letter-spacing:.02em;transition:background .15s,color .15s,transform .12s;flex-shrink:0}
.sx-gift-toggle:hover{background:rgba(255,255,255,.10);color:#fff}
.sx-gift-toggle:active{transform:scale(.96)}
.sx-gift-toggle.on{background:#fff;color:#0b0d12}
.sx-gift-toggle.on:hover{background:#f3f4f6;color:#0b0d12}
.sx-gift-toggle-emoji{font-size:14px;line-height:1;animation:sxGiftWiggle 2.4s ease-in-out infinite}
@keyframes sxGiftWiggle{0%,100%{transform:rotate(0)}10%{transform:rotate(-12deg)}20%{transform:rotate(10deg)}30%{transform:rotate(-8deg)}40%{transform:rotate(6deg)}50%,100%{transform:rotate(0)}}
.sx-gift-toggle-lbl{letter-spacing:-.005em}

/* Plan stack — bold tiles with big TGS at bottom-right */
.sx-plan-stack{display:flex;flex-direction:column;gap:10px;padding-bottom:8px}
.sx-plan-card{position:relative;background:#181b24;border:none;border-radius:18px;padding:18px 20px 18px 20px;cursor:pointer;overflow:hidden;transition:background .2s ease;animation:sxFadeUp .35s ease backwards;display:flex;flex-direction:column;gap:14px;min-height:208px}
.sx-plan-card:nth-child(1){animation-delay:.10s}
.sx-plan-card:nth-child(2){animation-delay:.16s}
.sx-plan-card:nth-child(3){animation-delay:.22s}
@media (hover:hover) and (pointer:fine){.sx-plan-card:hover{background:#20232e}}
.sx-plan-card.current{background:#20232e}

/* TGS at bottom-right, large with breathing room */
.sx-plan-card-tgs{position:absolute;bottom:14px;right:14px;width:104px;height:104px;pointer-events:none;z-index:0;opacity:.95}
.sx-plan-card-tgs canvas,.sx-plan-card-tgs svg{width:100%!important;height:100%!important;display:block}

/* Top row: name (left) + price (right, big) */
.sx-plan-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;position:relative;z-index:1}
.sx-plan-card-title{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.sx-plan-card-tag{display:inline-block;height:20px;padding:0 10px;border-radius:999px;font:700 10px/20px 'Inter','Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;width:fit-content;background:rgba(255,255,255,.10);color:rgba(255,255,255,.65)}
.sx-plan-card-name{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.1}
.sx-plan-card-price{display:flex;flex-direction:column;align-items:flex-end;gap:0;flex-shrink:0;line-height:1}
.sx-plan-card-price-from{font-size:10px;color:rgba(255,255,255,.5);font-weight:600;letter-spacing:.06em;text-transform:lowercase;margin-bottom:2px}
.sx-plan-card-price-num{font-size:28px;font-weight:800;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.sx-plan-card-price-per{font-size:11px;color:rgba(255,255,255,.55);font-weight:600;margin-top:3px}

/* Features — clean stacked text, no bullets, subtle hanging indent */
.sx-plan-card-features{display:flex;flex-direction:column;gap:3px;position:relative;z-index:1;padding-right:108px}
.sx-plan-card-feature{font-size:12px;color:rgba(255,255,255,.72);font-weight:450;line-height:1.32;letter-spacing:-.005em}
.sx-plan-card-feature + .sx-plan-card-feature{padding-top:0}

/* Duration step — separate view with back button */
.sx-dur-step{display:flex;flex-direction:column;gap:14px;animation:sxFadeUp .3s cubic-bezier(.16,1,.3,1) both}
.sx-dur-step-head{display:flex;align-items:center;gap:12px;padding:0 2px}
.sx-dur-back{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);border:none;cursor:pointer;color:#fff;display:grid;place-items:center;flex-shrink:0;transition:background .15s}
@media (hover:hover) and (pointer:fine){.sx-dur-back:hover{background:rgba(255,255,255,.10)}}
.sx-dur-back:active{transform:scale(.94)}
.sx-dur-step-title{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.005em;line-height:1.15}
.sx-dur-step-list{display:flex;flex-direction:column;gap:8px}
.sx-dur-card{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-radius:16px;background:#181b24;cursor:pointer;transition:background .18s,transform .12s}
@media (hover:hover) and (pointer:fine){.sx-dur-card:hover{background:#20232e}}
.sx-dur-card:active{transform:scale(.99)}
.sx-dur-card.best{background:#20232e}
.sx-dur-card-left{display:flex;flex-direction:column;gap:3px;min-width:0}
.sx-dur-card-name{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.01em}
.sx-dur-card-mo{font-size:12px;color:rgba(255,255,255,.55);font-weight:500}
.sx-dur-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.sx-dur-card-total{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.015em;font-variant-numeric:tabular-nums;line-height:1}
.sx-dur-card-pct-pill{display:inline-block;font-size:11px;font-weight:800;background:rgba(255,255,255,.08);color:rgba(255,255,255,.70);padding:4px 10px;border-radius:7px;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.02em}
.sx-dur-card.best{background:#222632}
@media (hover:hover) and (pointer:fine){.sx-dur-card.best:hover{background:#272c39}}

/* Price-hike banner — top of plan stack until 15 May */
.sx-price-banner{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;margin:0 0 12px;border-radius:14px;background:linear-gradient(135deg,rgba(255,153,51,.14),rgba(255,99,71,.10));border:1px solid rgba(255,153,51,.22);animation:sxFadeUp .35s ease backwards;animation-delay:.05s}
.sx-price-banner-icon{font-size:20px;line-height:1;flex-shrink:0;margin-top:1px;filter:saturate(1.1)}
.sx-price-banner-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.sx-price-banner-title{font-size:13px;font-weight:800;color:#ffb673;letter-spacing:-.005em;line-height:1.2}
.sx-price-banner-sub{font-size:11.5px;color:rgba(255,255,255,.62);font-weight:500;line-height:1.35}

/* Future-price capsule on plan tiles */
.sx-plan-card-future{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;font-size:11px;font-weight:700;color:#ffb673;background:rgba(255,153,51,.12);border:1px solid rgba(255,153,51,.22);padding:5px 10px;border-radius:999px;letter-spacing:-.005em;font-variant-numeric:tabular-nums;position:relative;z-index:1;line-height:1.1}

/* Future-price row on duration tiles */
.sx-dur-card{flex-direction:column;align-items:stretch}
.sx-dur-card-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sx-dur-card-future{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,153,51,.22);font-size:11.5px;font-weight:700;color:#ffb673;font-variant-numeric:tabular-nums;letter-spacing:-.005em;line-height:1.1}
.sx-dur-card.best .sx-dur-card-pct-pill{background:rgba(255,255,255,.12);color:rgba(255,255,255,.88)}

/* (calculator widget removed) */

/* Popup container override — sx redesign inside management popup */
.sub-popup-card.sx-popup{background:var(--bg-primary,#0f1115)!important;padding:20px 16px 28px;scrollbar-width:none;-ms-overflow-style:none}
.sub-popup-card.sx-popup::-webkit-scrollbar{width:0;height:0;display:none}
.sub-popup-card.sx-popup .sx-popup-inner{display:flex;flex-direction:column;gap:0;opacity:0;transform:translateY(10px);transition:opacity .28s ease,transform .28s ease}
.sub-popup-overlay.open .sub-popup-card.sx-popup .sx-popup-inner{opacity:1;transform:translateY(0);transition-delay:.6s}
.sub-popup-card.sx-popup>.wallet-close{opacity:0;transform:translateY(0);transition:opacity .2s ease}
.sub-popup-overlay.open .sub-popup-card.sx-popup>.wallet-close{opacity:1;transition-delay:.7s}

/* Flippable card */
.sx-card-wrap.sx-card-wrap-flip{perspective:1400px}
.sx-flippable{position:relative;width:100%;max-width:380px;aspect-ratio:1.586/1;height:auto;margin:0 auto;border-radius:18px;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.55,.08,.16,1);cursor:pointer;background:transparent;padding:0;display:block;overflow:visible;box-shadow:0 12px 30px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.18)}
.sx-flippable.flipped{transform:rotateY(180deg)}
.sx-face{position:absolute;inset:0;border-radius:18px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:14px 18px;display:flex;flex-direction:column;transition:opacity 0s linear .425s,visibility 0s linear .425s}
.sx-flippable .sx-face.sx-front{pointer-events:auto;opacity:1;visibility:visible;z-index:2}
.sx-flippable .sx-face.sx-back{pointer-events:none;opacity:0;visibility:hidden;z-index:1}
.sx-flippable.flipped .sx-face.sx-front{pointer-events:none;opacity:0;visibility:hidden;z-index:1}
.sx-flippable.flipped .sx-face.sx-back{pointer-events:auto;opacity:1;visibility:visible;z-index:2}
/* WHY: .sx-face.sx-front sets visibility:visible + pointer-events:auto, which override the
   parent overlay's visibility:hidden / pointer-events:none. When subPopupOverlay is closed,
   the invisible card still captured clicks at top:0/left:0 (≈315×337px), blocking the home
   screen header zone AND the first 5 server flags inside the keys popup. */
.sub-popup-overlay:not(.open) .sx-flippable,
.sub-popup-overlay:not(.open) .sx-face{visibility:hidden!important;pointer-events:none!important}
.sx-face.sx-front{background:#1c2540;color:#fff}
.sx-face.sx-front.theme-personal{background:linear-gradient(135deg,#1a6bb5,#2196F3)}
.sx-face.sx-front.theme-family{background:linear-gradient(135deg,#2e8b2e,#32cd32)}
.sx-face.sx-front.theme-corporate{background:linear-gradient(135deg,#8b2252,#a0306a)}
.sx-face.sx-front.theme-trial{background:linear-gradient(135deg,#92400e,#b45309,#d97706)}
.sx-face.sx-front.theme-expired{background:linear-gradient(135deg,#dc2626,#991b1b)}
.sx-face.sx-back{transform:rotateY(180deg);background:#11131a;padding:14px;gap:8px;color:#fff}

/* Back face */
.sx-back-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.sx-back-head .t{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.62)}
.sx-flip-btn{height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:none;cursor:pointer;color:#fff;font:700 11px/1 'Inter','Manrope',sans-serif;display:inline-flex;align-items:center;gap:6px}
.sx-flip-btn:active{transform:scale(.95);background:rgba(255,255,255,.14)}

.sx-setting-card{position:relative;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.05);display:flex;flex-direction:column}
.sx-setting-card .sc-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;width:100%;padding:10px 14px;min-height:44px}
.sx-setting-card .sc-row + .sc-row{border-top:1px solid rgba(255,255,255,.06)}
.sx-setting-card .sc-text{min-width:0}
.sx-setting-card .sc-text .sc-l{font-size:13px;font-weight:700;letter-spacing:-.01em;color:#fff;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-setting-card .sc-text .sc-s{font-size:10px;color:rgba(255,255,255,.55);margin-top:2px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Toggle */
.sx-toggle{position:relative;width:40px;height:24px;background:rgba(255,255,255,.12);border-radius:999px;transition:background .18s;cursor:pointer;flex-shrink:0}
.sx-toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:999px;transition:transform .22s cubic-bezier(.2,.9,.2,1)}
.sx-toggle.on{background:#c8ff5e}
.sx-toggle.on::after{transform:translateX(16px);background:#0b0d12}

/* Addon counter */
.sx-counter{display:flex;align-items:center;gap:8px;flex-shrink:0}
.sx-cnt-btn{width:26px;height:26px;border-radius:7px;border:none;background:rgba(255,255,255,.1);color:#fff;font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;padding:0}
.sx-cnt-btn:active{background:rgba(255,255,255,.2);transform:scale(.92)}
.sx-cnt-btn:disabled{opacity:.3;cursor:not-allowed}
.sx-cnt-val{min-width:16px;text-align:center;font-size:14px;font-weight:800;color:#fff}

/* Back meta row */
.sx-back-meta{display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;border-radius:14px;background:rgba(255,255,255,.04);padding:12px 14px;margin-top:auto}
.sx-back-meta .bm-cell{display:flex;flex-direction:column;gap:3px}
.sx-back-meta .bm-l{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.sx-back-meta .bm-v{font-size:14px;font-weight:800;letter-spacing:-.01em;color:#fff}
.sx-back-meta .bm-divider{height:28px;background:rgba(255,255,255,.08);margin:0 12px}

/* CALYPSØ Router card (bento-glass style, under server-card on home) */
/* CALYPSØ Router card — exact copy of the piggy-bank flip mechanic
   (.rp-piggy / .rp-piggy-face). Same structure: wrapper has perspective,
   inner rotates, faces are absolute with backface-visibility:hidden plus a
   delayed visibility/opacity swap that hides the off-side at mid-flip. */
.router-card{margin:14px 0 0 0;perspective:1400px;opacity:0;transform:translateY(12px)}
.router-card.ready{animation:routerCardIn .5s cubic-bezier(.2,.85,.3,1) .25s both}
@keyframes routerCardIn{
  0%{opacity:0;transform:translateY(12px)}
  100%{opacity:1;transform:translateY(0)}
}
.router-flip-inner{position:relative;width:100%;min-height:280px;border-radius:16px;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.55,.08,.16,1);box-shadow:0 16px 36px -14px rgba(0,0,0,.7),0 4px 12px -4px rgba(0,0,0,.4);cursor:pointer}
.router-card.flipped .router-flip-inner{transform:rotateY(180deg)}
.router-flip-face{position:absolute;inset:0;border-radius:16px;background:#14141a;display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;transition:opacity 0s linear .425s,visibility 0s linear .425s}
.router-card .router-flip-front{pointer-events:auto;opacity:1;visibility:visible;z-index:2}
.router-card .router-flip-back{transform:rotateY(180deg);pointer-events:none;opacity:0;visibility:hidden;z-index:1}
.router-card.flipped .router-flip-front{pointer-events:none;opacity:0;visibility:hidden;z-index:1}
.router-card.flipped .router-flip-back{pointer-events:auto;opacity:1;visibility:visible;z-index:2}
/* Front: TGS in the upper-right, text on the bottom-left. */
.router-flip-front{padding:16px 18px;justify-content:flex-end}
.router-flip-back{padding:14px 16px 16px;gap:14px}
.router-flip-front-head{position:relative;z-index:1;max-width:65%}
.router-flip-title{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1.15}
.router-flip-sub{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:5px;line-height:1.35}
.router-tgs{position:absolute;top:-6px;right:-6px;width:190px;height:190px;display:flex;align-items:center;justify-content:center;pointer-events:none;will-change:transform;transform:translateZ(0)}
.router-tgs canvas,.router-tgs svg{width:100%!important;height:100%!important}
.router-flip-back-head{display:flex;align-items:center;justify-content:space-between}
.router-flip-back-title{font-size:9.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.35)}
.router-flip-close{background:rgba(255,255,255,.06);border:0;color:rgba(255,255,255,.7);width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.router-flip-close:active{background:rgba(255,255,255,.12)}
.router-flip-section-label{font-size:9.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:8px}
.router-flip-row{display:flex;gap:8px;align-items:stretch}
.router-flip-link{flex:1;min-width:0;font-family:'JetBrains Mono','Menlo',monospace;font-size:11px;color:rgba(255,255,255,.7);background:rgba(0,0,0,.25);border-radius:10px;padding:10px 12px;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.router-flip-btn{flex-shrink:0;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:0;color:#fff;font-size:13px;font-weight:600;padding:0 14px;border-radius:10px;cursor:pointer}
.router-flip-btn:active{transform:scale(.97);background:rgba(255,255,255,.14)}
.router-flip-btn.copied{background:rgba(34,197,94,.18);color:#7ee9a4}
/* Action buttons (Wi-Fi / Instructions) — text-only, two-up grid, compact */
.router-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.router-action-btn{width:100%;background:rgba(255,255,255,.06);border:0;color:#fff;border-radius:10px;padding:11px 12px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;letter-spacing:-.005em;text-align:center}
.router-action-btn:active{transform:scale(.985);background:rgba(255,255,255,.1)}
/* Open router admin — full-width, blue accent, text-only */
.router-admin-btn{display:block;width:100%;background:#2f80ed;border:0;color:#fff;border-radius:10px;padding:12px 14px;margin-top:8px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;letter-spacing:-.005em;text-align:center}
.router-admin-btn:active{transform:scale(.985);background:#2670d3}
.router-admin-hint{margin-top:8px;font-size:11.5px;color:rgba(255,255,255,.4);text-align:center;line-height:1.4}

/* Router setup instructions sheet */
.router-instr-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:998;opacity:0;pointer-events:none;transition:opacity .25s ease}
.router-instr-bg.open{opacity:1;pointer-events:auto}
.router-instr-sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%) translateY(100%);width:100%;max-width:440px;max-height:85vh;background:#1a1a22;border-radius:20px 20px 0 0;padding:14px 18px 26px;z-index:999;transition:transform .35s cubic-bezier(.2,.85,.3,1);display:flex;flex-direction:column;gap:10px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.router-instr-sheet.open{transform:translateX(-50%) translateY(0)}
.router-instr-handle{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin:0 auto 4px}
.router-instr-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.router-instr-title{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.01em}
.router-instr-close{background:rgba(255,255,255,.06);border:0;color:rgba(255,255,255,.7);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0}
.router-instr-close:active{background:rgba(255,255,255,.12)}
.router-instr-body{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.router-instr-step{display:flex;gap:14px;align-items:flex-start}
.router-instr-step-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.router-instr-step-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.router-instr-step-text b{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.005em;line-height:1.25}
.router-instr-step-text span{font-size:13px;color:rgba(255,255,255,.6);line-height:1.45}
.router-instr-step-text code{font-family:'JetBrains Mono','Menlo',monospace;font-size:12px;background:rgba(255,255,255,.07);padding:1px 6px;border-radius:5px;color:#fff}
.router-instr-step-text b{color:#fff}
.router-instr-hint{margin-top:6px;font-size:12px;color:rgba(255,255,255,.4);line-height:1.45;padding:10px 12px;background:rgba(255,255,255,.04);border-radius:10px;text-align:center}

/* Router Wi-Fi sheet */
.router-wifi-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:12px}
.router-wifi-qr{width:220px;height:220px;background:#fff;border-radius:14px;padding:12px;display:flex;align-items:center;justify-content:center}
.router-wifi-qr img,.router-wifi-qr canvas{display:block;width:100%!important;height:100%!important}
.router-wifi-qr-hint{font-size:12px;color:rgba(255,255,255,.45);text-align:center;line-height:1.4;max-width:260px}
.router-wifi-creds{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.router-wifi-cred-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border-radius:12px;padding:10px 12px}
.router-wifi-cred-label{font-size:9.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.4);width:60px;flex-shrink:0}
.router-wifi-cred-val{flex:1;min-width:0;font-family:'JetBrains Mono','Menlo',monospace;font-size:14px;color:#fff;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.router-wifi-copy{flex-shrink:0;background:rgba(255,255,255,.08);border:0;color:rgba(255,255,255,.85);width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s,color .15s}
.router-wifi-copy:active{transform:scale(.94);background:rgba(255,255,255,.14)}
.router-wifi-copy.copied{background:rgba(34,197,94,.18);color:#7ee9a4}