:root{--text:#282931;--muted:#81858e;--line:#edf0f3;--surface:#fff;--rail:#f3f4f6;--accent:#da588f;--accent-rgb:218,88,143;--blue:#258ed7;--size-xs:12px;--size-sm:14px;--size-md:18px;--size-lg:28px;font-family:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;font-size:var(--size-sm);color:var(--text);background:#f1f2f6;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.58}button:focus-visible,input:focus-visible{outline:3px solid #51b9f6;outline-offset:3px}button{border:0;background:none;color:inherit}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-library{position:absolute;width:0;height:0;overflow:hidden}svg.compass,svg:has(use[href="#icon-compass"]){stroke:none}h1,h2,p{margin:0}h1{font-size:var(--size-lg);font-weight:500}h2{font-size:var(--size-md);font-weight:500}p{line-height:1.7}[hidden]{display:none!important}.tiny-text,.eyebrow,.field-hint{font-size:var(--size-xs);color:var(--muted)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell{width:min(860px,calc(100vw - 64px));height:min(650px,calc(100dvh - 64px));min-height:510px;display:grid;grid-template-columns:minmax(0,1fr) 210px;background:var(--surface);border:1px solid #e6e7ec;border-radius:12px;overflow:hidden;box-shadow:0 24px 70px #20234914}.main-content{overflow-y:auto;min-width:0}.page{min-height:100%;width:100%}.mobile-header{display:none}.account-rail{background:var(--rail);padding:34px 24px 24px;display:flex;flex-direction:column;border-left:1px solid #ececf1}.rail-brand{text-align:center}.rail-avatar,.profile-avatar,.auth-mark{display:inline-flex;align-items:center;justify-content:center;color:#fff;background:var(--accent);border-radius:50%}.rail-avatar{height:62px;width:62px;margin:8px auto 14px}.rail-avatar svg{width:45px;height:45px}.rail-brand h2{margin-bottom:10px}.rail-brand>button{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;margin-bottom:4px}.rail-brand>button svg{height:14px;width:14px}.rail-brand>button span{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rail-nav{display:grid;gap:4px;margin-top:36px}.rail-nav button,.menu-dialog nav button{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 4px;border-radius:6px}.rail-nav svg{width:20px;height:20px;color:#a0a4ac}.rail-nav button:hover{background:#e9eaee}.rail-nav button.active{color:var(--accent)}.rail-nav button.active svg{color:var(--accent)}.rail-footer{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:24px}.rail-renew{border:1px solid #dab5c5;background:#fff;border-radius:20px;width:100%;padding:7px 10px;color:var(--accent)}.version-text{opacity:.7}
.home-page{display:flex;flex-direction:column;position:relative;padding:24px 36px}.home-membership{text-align:right;min-height:102px}.remaining-label{display:inline-flex;align-items:center;gap:2px;color:var(--accent);font-size:var(--size-xs);padding:0}.remaining-label svg{width:12px;height:12px}.remaining-counter{display:flex;align-items:baseline;gap:8px;justify-content:flex-end;margin:8px 0 4px}#remaining-days{letter-spacing:4px;border:1px solid #e1e2e6;padding:1px 8px;font-size:var(--size-md);min-width:58px;text-align:center;color:#464a54}.counter-unit{font-size:var(--size-xs)}.connection-center{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px 0 34px}.connection-orb{width:168px;height:168px;border-radius:50%;padding:12px;color:var(--accent);background:rgba(var(--accent-rgb),.07);transition:background .2s,transform .2s}.connection-orb:hover{transform:scale(1.035)}.orb-inner{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:1px solid rgba(var(--accent-rgb),.55);box-shadow:0 3px 13px rgba(var(--accent-rgb),.19)}.orb-inner .compass{width:70px;height:70px}#orb-caption{display:none}.connection-title{font-size:var(--size-lg);margin:26px 0 8px;font-weight:500}.node-shortcut{display:flex;align-items:center;gap:4px;font-size:var(--size-sm);color:#7b7c85;margin-bottom:14px}.node-shortcut svg{width:14px;height:14px}.primary-button{background:var(--accent);border:1px solid transparent;color:#fff;padding:12px 20px;min-height:44px;border-radius:4px;transition:filter .2s}.primary-button:hover{filter:brightness(.95)}.connection-action{width:min(270px,100%);border-radius:1px;font-size:var(--size-md);padding:9px 14px}.connection-note{font-size:var(--size-xs);color:var(--muted);max-width:330px;margin-top:15px;min-height:42px}.connection-orb.connecting{animation:connection-breathe 1.4s ease-in-out infinite}.connection-orb.verified{background:rgba(var(--accent-rgb),.1)}.connection-orb.error{opacity:.8}.mobile-node-label,.mobile-membership-bar{display:none}@keyframes connection-breathe{50%{box-shadow:0 0 0 9px rgba(var(--accent-rgb),.06)}}
.detail-page{padding:34px 34px 30px}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.eyebrow{letter-spacing:2px;margin-bottom:7px}.heading-icon{width:30px;height:30px;color:var(--accent)}.member-summary{padding:18px 0 23px;border-bottom:1px solid var(--line);margin-bottom:24px}.member-badge{display:inline-block;color:var(--accent);font-size:var(--size-xs);background:rgba(var(--accent-rgb),.07);padding:5px 10px;border-radius:20px;margin-bottom:12px}.member-summary h2{margin-bottom:7px}.member-summary p{font-size:var(--size-xs);color:var(--muted)}.plans-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.plan-card{border:1px solid #bdd7ea;padding:21px 16px;text-align:center}.plan-card.premium{border-color:#e6bbcd}.plan-kind{color:var(--blue);font-size:var(--size-xs)}.premium .plan-kind{color:var(--accent)}.plan-card h2{margin:15px 0 5px}.plan-card p{font-size:var(--size-xs);color:var(--muted)}.plan-divider{height:1px;background:var(--line);margin:20px 0}.plan-period{display:block;margin-bottom:7px}.test-membership{border:1px dashed #c7d8e6;background:#fafcfe;padding:18px;margin-top:24px;display:flex;gap:20px;align-items:center}.test-label{font-size:var(--size-xs);color:var(--blue)}.test-membership h2{margin:6px 0}.test-membership p{font-size:var(--size-xs);color:var(--muted)}.test-membership .primary-button{font-size:var(--size-xs);white-space:nowrap;padding:10px 15px;flex-shrink:0}
.account-profile{display:flex;align-items:center;gap:16px;margin:30px 0 26px}.profile-avatar{width:58px;height:58px;flex-shrink:0}.profile-avatar svg{width:39px;height:39px}.account-profile h2{margin-bottom:5px;overflow-wrap:anywhere}.account-profile p{color:var(--muted);font-size:var(--size-xs);overflow-wrap:anywhere}.account-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;gap:18px}.account-stat{display:flex;align-items:center;gap:10px;text-align:left;padding:0;min-width:0}.account-stat>svg{color:var(--accent);width:24px;height:24px}.account-stat>span{font-size:var(--size-xs);color:var(--muted);flex:1}.account-stat strong{font-weight:400;display:block;color:var(--text);font-size:var(--size-sm);padding-top:5px}.account-stat .small-arrow{width:12px;height:12px;color:var(--muted)}.subheading{margin:24px 0 16px}.devices-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.device-card{padding:16px;border:1px solid var(--line);min-width:0}.device-card svg{color:var(--accent);width:27px;height:27px;margin-bottom:9px}.device-card p{font-size:var(--size-xs);color:var(--muted);overflow-wrap:anywhere}.device-card h3{font-size:var(--size-sm);font-weight:400;margin:0 0 5px;overflow-wrap:anywhere}.empty-state{font-size:var(--size-sm);color:var(--muted);padding:24px 0;grid-column:1/-1}.secondary-button{border:1px solid #dedfe6;background:#fff;border-radius:4px;padding:11px 18px;color:#696d77}.account-auth-action{display:block;margin-top:26px;width:100%}.node-mode{display:flex;align-items:center;gap:9px;padding:14px 0 20px;border-bottom:1px solid var(--line);font-size:var(--size-xs);color:var(--muted)}.node-mode>svg{width:20px;height:20px;color:var(--accent)}.mode-pill{margin-left:auto;color:var(--accent);padding:4px 7px;border:1px solid #edcfdb;border-radius:3px}.nodes-list{padding-top:5px}.node-row{width:100%;display:flex;align-items:center;gap:13px;text-align:left;padding:17px 2px;border-bottom:1px solid var(--line)}.node-region{height:27px;width:36px;background:#f5f6f9;border:1px solid #e8ebf0;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:var(--size-xs);color:#7c8492}.node-text{flex:1;min-width:0}.node-text strong{display:block;font-weight:400;overflow-wrap:anywhere}.node-text span{font-size:var(--size-xs);color:var(--muted)}.node-radio{width:18px;height:18px;border:1px solid #c9cbd3;border-radius:50%;padding:4px}.node-row.selected .node-radio{border-color:var(--accent)}.node-row.selected .node-radio:after{content:"";display:block;height:100%;background:var(--accent);border-radius:50%}.field-hint{margin-top:20px;line-height:1.7}
.auth-page{padding:44px 44px 30px;max-width:460px;margin:auto;display:flex;flex-direction:column;justify-content:center}.auth-mark{width:58px;height:58px;margin-bottom:20px}.auth-mark svg{height:42px;width:42px}.auth-page>p{color:var(--muted);font-size:var(--size-xs);margin-top:7px}.auth-tabs{display:flex;border-bottom:1px solid var(--line);margin:26px 0 24px}.auth-tabs button{flex:1;padding:13px 0;font-size:var(--size-sm);color:var(--muted);border-bottom:2px solid transparent}.auth-tabs button[aria-selected="true"]{color:var(--accent);border-color:var(--accent)}#auth-form{display:grid;gap:10px}#auth-form label{font-size:var(--size-xs);color:#686c76}#auth-form input{height:46px;width:100%;border:1px solid #e1e4eb;border-radius:4px;padding:0 12px;color:var(--text);background:#fff}#auth-form input::placeholder{color:#adb0b8}#auth-form>label:not(:first-child){margin-top:6px}.password-field{position:relative}.password-field input{padding-right:57px!important}.password-field button{position:absolute;right:12px;top:0;height:100%;font-size:var(--size-xs);color:var(--muted)}#confirm-password-wrap{margin-top:6px;display:grid;gap:10px}.form-error{color:#c94356;font-size:var(--size-xs);min-height:19px;margin-top:4px}.auth-footnote{text-align:center;margin-top:20px!important}.icon-button{padding:10px;display:grid;place-items:center;color:inherit}.icon-button svg{height:21px;width:21px}.menu-dialog{border:0;border-radius:0 10px 10px 0;margin:0;height:100dvh;width:280px;max-height:100dvh;max-width:85vw;padding:24px;background:#fff;box-shadow:10px 0 40px #15172426}.menu-dialog::backdrop{background:#15172555}.menu-heading{display:flex;justify-content:space-between;align-items:center;color:var(--accent);font-size:var(--size-md);padding-bottom:16px;border-bottom:1px solid var(--line)}.menu-dialog nav{display:grid;gap:6px;padding-top:20px}.menu-dialog nav svg{color:var(--accent)}.menu-dialog>p{position:absolute;bottom:28px}.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);padding:12px 18px;background:#363b49;color:#fff;font-size:var(--size-sm);border-radius:5px;max-width:min(440px,calc(100vw - 36px));box-shadow:0 8px 25px #15172422;z-index:10;line-height:1.6;white-space:normal}
body[data-mode="android"],body[data-mode="ios"]{--accent:#23afe3;--accent-rgb:35,175,227;background:#fff}body[data-mode="android"] .app-shell,body[data-mode="ios"] .app-shell{width:100vw;height:100dvh;min-height:0;border:0;border-radius:0;box-shadow:none}
@media(max-width:640px){:root{--accent:#23afe3;--accent-rgb:35,175,227;background:#fff}body{display:block;background:#fff}.app-shell{width:100%;height:100dvh;min-height:0;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column}.account-rail{display:none}.mobile-header{display:flex;align-items:center;min-height:58px;padding:env(safe-area-inset-top,0px) 8px 0;box-sizing:content-box;background:linear-gradient(110deg,#b783d8 0%,#a8a2e2 49%,#46b8e6 100%);color:#fff;flex-shrink:0}.mobile-header>span{flex:1;margin-left:2px;font-size:var(--size-md)}.main-content{flex:1;overflow-y:auto}.home-page{padding:0;min-height:100%;display:flex}.home-membership{display:none}.connection-center{position:relative;min-height:420px;padding:65px 28px 80px}.mobile-node-label{display:block;position:absolute;top:16px;left:18px;font-size:var(--size-xs);color:#787e86}.connection-orb{width:200px;height:200px;color:#fff;padding:13px;background:#bfe7f7;box-shadow:-8px 4px 0 #e1f3fb;transform:rotate(-10deg)}.connection-orb:hover{transform:rotate(-10deg) scale(1.025)}.orb-inner{background:#2db3e5;color:#fff;box-shadow:0 4px 18px #269bcb22;border:0;transform:rotate(10deg)}.orb-inner .compass{height:65px;width:65px;margin-bottom:8px}#orb-caption{display:block;font-size:var(--size-sm)}.connection-orb.verified{background:#b8e4f5}.connection-title{font-size:var(--size-md);margin-top:30px;color:#6e7682}.node-shortcut{margin-top:9px;margin-bottom:0;font-size:var(--size-xs)}.connection-action{display:none}.connection-note{margin-top:12px;max-width:290px;min-height:42px}.mobile-membership-bar{display:flex;align-items:center;min-height:58px;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);background:#fff;flex-shrink:0;margin-top:auto}.mobile-membership-bar>span{flex:1;text-align:center;font-size:var(--size-xs);color:var(--muted);padding:10px 12px}.mobile-membership-bar>button{align-self:stretch;color:#fff;background:#278fd7;min-width:98px;padding:12px 20px}.detail-page{padding:26px 22px 32px}.page-heading{margin-bottom:20px}.page-heading .heading-icon{width:27px;height:27px}.member-summary{margin-bottom:20px;padding-top:5px}.plans-grid{gap:12px}.plan-card{padding:20px 11px}.plan-card.premium{border-color:#dbc4e7}.premium .plan-kind{color:#b277cd}.test-membership{display:block;padding:18px;margin-top:22px}.test-membership .primary-button{margin-top:15px;width:100%;font-size:var(--size-sm)}.account-profile{margin-top:24px}.account-stats{gap:12px}.devices-list{gap:11px}.device-card{padding:14px}.auth-page{padding:34px 28px 28px;min-height:100%;max-width:420px;justify-content:flex-start}.auth-mark{margin-top:6px}.auth-tabs{margin-top:24px}.toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))}.mode-pill{border-color:#cee9f4}.connection-center .connection-orb.connecting{animation:connection-breathe 1.4s ease-in-out infinite}}
@media(min-width:641px){body[data-mode="android"] .app-shell,body[data-mode="ios"] .app-shell{width:420px;height:min(860px,100dvh);display:flex;flex-direction:column}body[data-mode="android"] .account-rail,body[data-mode="ios"] .account-rail{display:none}body[data-mode="android"] .mobile-header,body[data-mode="ios"] .mobile-header{display:flex;background:linear-gradient(110deg,#b783d8,#46b8e6);color:#fff;align-items:center;min-height:58px;padding:8px}body[data-mode="android"] .mobile-header>span,body[data-mode="ios"] .mobile-header>span{flex:1}body[data-mode="android"] .main-content,body[data-mode="ios"] .main-content{flex:1}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Approved navy design, 2026-10-16. Shared by all five client shells.
   Connection styling never substitutes for status === connected && verified. */
:root{--navy:#10263f;--accent:#1769e8;--accent-rgb:23,105,232;--blue:#1769e8;--size-xs:12px;--size-sm:14px;--size-md:18px;--size-lg:28px;--text:#142a43;--muted:#687b90;--line:#dfe6ee;--rail:#10263f;background:#edf1f5}
body{background:#edf1f5}.app-shell{width:min(900px,calc(100vw - 64px));height:min(700px,calc(100dvh - 64px));border-color:#dce3eb;border-radius:10px;box-shadow:0 16px 48px #112c4512;grid-template-columns:minmax(0,1fr) 210px}
h1,h2{font-weight:650;letter-spacing:-.25px}.account-rail{padding:30px 20px 22px;border:0;color:#fff}.rail-brand h2{font-size:24px}.rail-brand>.tiny-text,.rail-footer>.tiny-text{color:#a2b6ca}.rail-avatar{width:58px;height:58px;margin-top:0;border-radius:12px;background:#24435f;border:1px solid #3c5973}.rail-avatar svg{width:41px;height:41px}.rail-nav{margin-top:30px;gap:6px}.rail-nav button{padding:12px;border-radius:5px;color:#b8cada}.rail-nav button svg{color:#a4c0dc}.rail-nav button:hover{background:#203c57}.rail-nav button.active{background:#284661;color:#fff;box-shadow:inset 3px 0 #54a1ff}.rail-nav button.active svg{color:#cce3ff}.rail-renew{border-color:transparent;background:#1769e8;border-radius:5px;min-height:44px;color:#fff}.profile-avatar,.auth-mark{border-radius:12px;background:var(--navy)}
.home-page{padding:24px 32px}.home-membership{min-height:86px}.remaining-label{color:#456c94}#remaining-days{border-color:#dfe6ee;color:var(--navy);border-radius:4px;font-weight:600}.connection-center{padding:0 0 20px}.connection-eyebrow{color:#74869a;font-size:var(--size-xs);letter-spacing:1.5px;margin-bottom:24px}.connection-orb{width:158px;height:158px;padding:10px;background:#edf3fc;border:1px solid #dce8fa;color:#fff;box-shadow:none;transform:none}.connection-orb:hover{transform:scale(1.025)}.orb-inner{background:var(--navy);color:#fff;border:0;box-shadow:none;transform:none}.orb-inner .power-symbol{height:57px;width:57px;stroke-width:1.8}.connection-orb.verified{background:#edf3fc}.connection-orb.error{opacity:1;border-color:#c8d8ec}.connection-title{color:var(--navy);margin:22px 0 12px;font-weight:650}.node-shortcut{width:min(280px,100%);min-height:50px;margin:0 0 14px;padding:12px 15px;border:1px solid #dfe6ef;border-radius:6px;background:#f9fbfd;color:#274967;justify-content:space-between}.primary-button{background:var(--blue);border-radius:6px;min-height:44px;font-weight:600;text-align:center;text-decoration:none}.connection-action{width:min(280px,100%);font-size:var(--size-sm);padding:12px;border-radius:6px}.connection-note{color:#72859a;margin-top:12px}.secondary-button{border-color:#c7d5e4;color:#285c91;border-radius:6px;min-height:44px}#orb-caption{display:none}
.detail-page{padding:30px}.page-heading{margin-bottom:22px}.eyebrow{color:#59728e;letter-spacing:2px}.heading-icon{color:#40698e}.member-badge{background:#e9f0f8;color:#3e628a;border-radius:4px}.member-summary{margin-bottom:20px}.plans-grid{gap:14px;align-items:start}.plan-card,.plan-card.premium{border:1px solid #dce5ee;padding:16px 12px;border-radius:7px;text-align:left}.plan-kind,.premium .plan-kind{color:#305e8c;font-size:var(--size-sm);font-weight:600}.plan-card h2{font-size:var(--size-md);margin:8px 0}.plan-card.premium{border-top:3px solid var(--navy);padding-top:14px}.plan-option{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:1px solid #dfe6ef;border-radius:6px;padding:13px 10px;margin-top:10px;text-align:left;background:#fff;color:var(--navy)}.plan-option:hover{border-color:#8db1e7;background:#f3f7fe}.plan-option:focus-visible{outline-color:#1769e8}.plan-option strong{font-size:var(--size-sm);white-space:nowrap}.plan-option span{font-size:var(--size-xs)}.plan-option[aria-pressed="true"]{border-color:#367de0;background:#f3f7fe;box-shadow:inset 3px 0 #1769e8}.plan-permissions{min-height:42px}.membership-checkout{border:1px solid #dce5ee;border-radius:7px;background:#f8fafd;margin-top:18px;padding:18px}.membership-checkout>p:first-child{font-weight:600}.checkout-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.checkout-actions>*{flex:1;min-width:160px}.test-membership{border-color:#ccd9e8;border-radius:7px;background:#f8fafc}.test-label{color:#3b6d9d}
.account-stats{border-color:var(--line)}.account-stat>svg{color:#40698e}.device-card{border-color:var(--line);border-radius:7px;background:#fbfcfe}.device-card svg{color:#40698e}.node-mode{color:#687b90}.mode-pill{border-color:#dce6f2;color:#42678e;background:#eef3f9;border-radius:4px}.node-row{border:1px solid #dfe7f0;border-radius:7px;margin-top:12px;padding:14px 12px}.node-row.selected{border-color:#4688df;background:#f3f7fe}.node-region{background:#eaf0f7;color:#355f88;border-color:transparent;border-radius:5px;width:38px;height:34px}.node-text strong{font-weight:600}.node-radio{border-color:#a6b8ca}.node-row.selected .node-radio{border-color:#1769e8}.node-row.selected .node-radio:after{background:#1769e8}
.auth-page{padding:36px 40px 28px}.auth-page h1{font-weight:650}.auth-tabs button[aria-selected="true"]{color:#1769e8;border-color:#1769e8}#auth-form label{color:#314e69}#auth-form input{min-height:46px;border-color:#d9e2ed;background:#fbfcfe;border-radius:6px}#auth-form input::placeholder{color:#8b9aab}.menu-dialog{background:#fff;border-radius:0 10px 10px 0}.menu-heading{color:var(--navy)}.menu-dialog nav button{border-radius:6px}.menu-dialog nav button:hover{background:#edf3fa}.menu-dialog nav svg{color:#40698e}.toast{background:#10263f;border-radius:7px}.form-error{color:#b43245}button:focus-visible,input:focus-visible,a:focus-visible{outline-color:#5b9bf0}
body[data-mode="android"],body[data-mode="ios"]{--accent:#1769e8;--accent-rgb:23,105,232}
.membership-buy{width:100%;margin-top:18px}.connection-mode-field{margin:18px 0}.connection-mode-field>label{display:block;font-size:var(--size-xs);color:#314e69;margin-bottom:7px}.connection-mode-field>select{width:100%;min-height:44px;padding:10px;border:1px solid #d9e2ed;background:#f8fafc;color:#687b90;border-radius:6px;font:inherit}.connection-mode-field .field-hint{margin-top:8px}
.membership-back{display:flex;align-items:center;gap:5px;margin-bottom:22px;font-weight:600;padding:9px 12px}.membership-back svg{width:18px;height:18px}.upgrade-amounts{display:grid;gap:10px;margin:18px 0}.upgrade-amounts>div{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #dfe6ee;padding-bottom:10px}.upgrade-amounts dt{color:#687b90;font-size:var(--size-xs)}.upgrade-amounts dd{margin:0;font-weight:600;white-space:nowrap}.upgrade-amounts>div:last-child dd{font-size:22px;color:#10263f}
.orb-inner .connected-symbol{width:84px;height:84px;object-fit:contain;animation:none;border-radius:50%}
/* The 256px approved asset has a 226px disk. Fill the existing inner circle
   with that disk; its transparent margin is clipped, never the outer halo. */
.connection-orb.verified .orb-inner{background:transparent;overflow:hidden}
.connection-orb.verified .connected-symbol{width:113.274336%;height:113.274336%;max-width:none;max-height:none;flex:none;border-radius:0}
.brand-symbol{display:block;width:42px;height:42px;object-fit:contain;flex-shrink:0}.rail-avatar,.profile-avatar,.auth-mark{background:transparent;border:0;border-radius:50%}.rail-avatar .brand-symbol,.profile-avatar .brand-symbol,.auth-mark .brand-symbol{width:100%;height:100%}.rail-nav .brand-symbol,.menu-dialog nav .brand-symbol{width:20px;height:20px}.mobile-brand-symbol{display:block;width:28px;height:28px;object-fit:contain;flex-shrink:0;margin-right:7px}
.recovery-status{max-width:360px;margin-top:10px;padding:12px;border:1px solid #c7d5e4;border-radius:6px;color:#285c91;background:#f9fbfd;font-size:var(--size-xs);line-height:1.7}.recovery-status button{margin-top:8px;padding:8px 12px}
.client-version-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:5px 10px;margin-top:16px;font-size:11px;color:#71869d}.rail-footer .client-version-tools{color:#b8cada}.client-update-button{border:0;background:none;color:inherit;padding:4px 0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.client-update-dialog{width:min(440px,calc(100vw - 40px));box-sizing:border-box;padding:26px;border:1px solid #dce5ef;border-radius:12px;background:#fff;color:#10263f;line-height:1.7}.client-update-dialog::backdrop{background:rgba(16,38,63,.4)}.client-update-dialog h2{margin:0 0 12px;font-size:22px}.client-update-dialog p{font-size:13px}.client-update-actions{display:flex;gap:10px;margin-top:20px}.client-update-actions button{flex:1}
@media(max-width:640px){body{background:#fff}.app-shell{width:100%;height:100dvh;border:0;border-radius:0;display:flex;flex-direction:column;box-shadow:none}.mobile-header{background:#10263f;min-height:56px;padding-right:12px}.mobile-header>span{font-weight:600;font-size:var(--size-md)}.home-page{padding:0}.home-membership{display:none}.connection-center{min-height:460px;padding:70px 24px 38px}.connection-eyebrow{display:none}.mobile-node-label{top:19px;left:22px;color:#718396}.connection-orb{width:190px;height:190px;background:#edf3fc;padding:12px;border-color:#dce8fa;box-shadow:none;transform:none}.connection-orb:hover{transform:scale(1.025)}.orb-inner{background:#10263f;transform:none;color:#fff}.orb-inner .power-symbol{width:66px;height:66px}.connection-orb.verified{background:#edf3fc}.connection-title{font-size:var(--size-lg);color:#10263f;margin-top:30px}.node-shortcut{font-size:var(--size-sm);margin-top:10px;min-height:56px;width:100%;max-width:330px}.connection-note{margin-top:14px}.mobile-membership-bar{margin:0 20px;padding-bottom:max(12px,env(safe-area-inset-bottom,0px));padding-top:12px;gap:10px;min-height:76px}.mobile-membership-bar>span{text-align:left;padding:0;line-height:1.6;color:#314e69;font-weight:500}.mobile-membership-bar>button{align-self:center;border-radius:6px;min-height:44px;background:#1769e8;min-width:82px;padding:11px 18px;font-weight:600}.detail-page{padding:26px 20px}.plans-grid{gap:10px}.plan-card,.plan-card.premium{padding:14px 10px}.plan-card.premium{padding-top:12px}.plan-option{display:block;padding:12px 9px}.plan-option span,.plan-option strong{display:block}.plan-option strong{margin-top:5px}.plan-permissions{min-height:60px}.auth-page{padding:30px 24px}.account-rail{display:none}.checkout-actions>*{min-width:100%;}.membership-checkout{padding:15px}.connection-action{display:none}}
@media(min-width:641px){body[data-mode="android"] .mobile-header,body[data-mode="ios"] .mobile-header{background:#10263f}body[data-mode="android"] .connection-orb,body[data-mode="ios"] .connection-orb{width:180px;height:180px}body[data-mode="android"] .connection-center,body[data-mode="ios"] .connection-center{padding:30px 0}body[data-mode="android"] .connection-eyebrow,body[data-mode="ios"] .connection-eyebrow{display:none}body[data-mode="android"] .mobile-membership-bar,body[data-mode="ios"] .mobile-membership-bar{display:flex;gap:10px;border-top:1px solid var(--line);padding:15px 20px}body[data-mode="android"] .mobile-membership-bar>span,body[data-mode="ios"] .mobile-membership-bar>span{flex:1}body[data-mode="android"] .mobile-membership-bar>button,body[data-mode="ios"] .mobile-membership-bar>button{background:#1769e8;color:#fff;min-height:44px;padding:10px 15px;border-radius:6px}}

/* Shared animated launch view; CSS fallback cannot trap users if JavaScript fails. */
.app-startup{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#f6f8fc;color:#10263f;pointer-events:auto;animation:none}.app-startup[hidden]{display:none}.connection-countdown{font-size:64px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;color:#fff}.connection-countdown[hidden]{display:none}@keyframes startup-dismiss{to{opacity:0;visibility:hidden}}

.brand-slogan{white-space:pre-wrap}.rail-brand h2{font-size:20px;line-height:1.5;overflow-wrap:anywhere}.version-text{line-height:1.6;overflow-wrap:anywhere}

/* Keep navigation and version controls reachable in short desktop/tablet windows. */
.account-rail{min-height:0;overflow-y:auto;overscroll-behavior:contain}.rail-brand,.rail-nav,.rail-footer{flex-shrink:0}
@media(min-width:641px) and (max-height:760px){.account-rail{padding:16px 20px}.rail-avatar{width:48px;height:48px;margin:0 auto 8px}.rail-brand h2{margin-bottom:6px;font-size:18px}.rail-nav{margin-top:16px;gap:2px}.rail-nav button{padding-top:10px;padding-bottom:10px}.rail-footer{padding-top:12px}.rail-footer .client-version-tools{margin-top:8px}}
.background-help{margin-top:20px;padding:14px 0;border-top:1px solid var(--line);line-height:1.7}.background-help summary{cursor:pointer;font-weight:600}.background-help p{margin-top:10px}.background-help button{margin-top:10px}

.other-devices{grid-column:1/-1;min-width:0;margin-top:8px}.other-devices summary{cursor:pointer;color:var(--muted);padding:10px 0}.other-devices>.devices-list{margin-top:8px}
.device-access-panel{padding:16px;margin-bottom:16px;border:1px solid var(--line);border-radius:8px;background:#f4f8fd}.device-access-panel>[role="status"]{font-weight:600;color:var(--navy);margin-bottom:8px}.device-access-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.device-access-actions button{font-size:var(--size-xs);min-height:40px}.device-remove-button{font-size:var(--size-xs);margin-top:12px;padding:8px 12px}.device-card button:disabled{opacity:.6;cursor:wait}#device-access-error:empty{display:none}#device-access-error{margin-top:10px}#device-remove-dialog p{overflow-wrap:anywhere}#device-remove-dialog .client-update-actions{flex-wrap:wrap}
/* Shared connection settings keep the same compact form on all platforms. */
.network-preferences { max-width: 360px; width: 100%; margin: 12px auto 0; text-align: left; }
.network-preferences[hidden] { display: none; }
.network-preferences label { display: block; margin: 8px 0 5px; font-size: 13px; }
.network-preferences select { width: 100%; padding: 9px 12px; border: 1px solid var(--line, #dedfe6); border-radius: 9px; color: var(--text, #393c45); background: #fff; }
.network-preferences summary { cursor: pointer; font-size: 12px; margin-top: 10px; }

.open-source-settings{font-size:12px;color:inherit;margin-top:16px;text-align:left}.open-source-settings details{margin:8px 0 8px 12px}.open-source-settings summary{cursor:pointer}.open-source-settings pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:24rem;overflow:auto}

.help-page{display:flex;flex-direction:column;min-height:100%}.help-support{align-self:flex-start;margin-top:24px}.help-footer{margin-top:auto;padding-top:32px;text-align:left;color:inherit}.open-source-settings>summary{color:inherit;min-height:44px;display:list-item;padding:12px 0;cursor:pointer}.open-source-settings>summary:focus-visible{outline:3px solid Highlight;outline-offset:3px}

/* Native desktop windows use the full content area; keep inner page spacing. */
body[data-mode="desktop"],body[data-mode="macos"]{place-items:stretch}
body[data-mode="desktop"] .app-shell,body[data-mode="macos"] .app-shell{width:100%;height:100dvh;min-height:0;margin:0;border:0;border-radius:0;box-shadow:none}

/* Shared customer UI: readable hierarchy, explicit actions and compact layouts. */
:root{--size-xs:13px;--muted:#5c7085}
button:disabled{cursor:default}
.detail-page{max-width:1120px;margin-inline:auto}
.page-heading{margin-bottom:22px}
.page-heading h1{font-size:28px;line-height:1.3;letter-spacing:-.4px}
.eyebrow{letter-spacing:1px}
.secondary-button{min-height:44px;border-color:#c6d4e4;color:#285176;border-radius:8px}
.primary-button{border-radius:8px}
.home-membership{min-height:90px}
.connection-center{padding-block:16px 24px}
.connection-title{line-height:1.3;margin-top:22px}
.connection-note{font-size:13px;line-height:1.7;min-height:0;color:#526a82}
.connection-orb[data-state="error"]{border-color:#c96868;background:#fff2f2}
.connection-orb.verified{border-color:#a6c8b6}
.connection-orb.verified .orb-inner{box-shadow:0 0 0 3px #d7eade}
.node-shortcut{max-width:340px;min-height:48px;border-radius:8px}
.node-shortcut span{overflow-wrap:anywhere;min-width:0;text-align:left}
.node-current{color:#26714f!important;font-weight:600}
.empty-actions,.connection-error-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.connection-error-actions{justify-content:center}
.empty-actions button,.connection-error-actions button{min-height:44px}
#line-switch-result{width:100%;margin-top:14px;text-align:left}
#nodes-refresh-status:empty{display:none}
.member-summary{padding:20px;border:1px solid #dce5f0;background:#f5f8fc;border-radius:12px;margin-bottom:20px}
.member-summary .member-badge{margin-bottom:10px;border-radius:6px}
.member-summary h2{font-size:22px}
.plans-grid{gap:16px}
.plan-card{border-radius:10px;background:#fff;padding:18px}
.plan-card h2{margin-top:10px}
.plan-option{min-height:48px;border-radius:8px}
.account-profile{padding:18px;background:#f5f8fc;border:1px solid #dce5f0;border-radius:12px;margin:22px 0 16px}
.account-stats{padding:18px 4px}
.device-access-panel{padding:18px;border-radius:10px}
.device-access-panel .field-hint{margin-top:8px}
.device-card{padding:18px;border-radius:10px}
.device-last-seen{margin-top:6px}
.help-page>.page-heading{margin-bottom:12px}
.help-support{margin-top:18px;min-width:180px}
.help-questions{margin-top:30px;width:100%;max-width:640px}
.help-questions h2{font-weight:650;font-size:17px;margin-bottom:12px}
.help-questions details{border:1px solid #dce5f0;border-radius:10px;margin-top:10px;background:#f8fafd}
.help-questions summary{cursor:pointer;min-height:48px;padding:14px 16px;line-height:1.5;font-weight:600}
.help-questions p{padding:0 16px 14px;color:#526a82;font-size:14px}
.help-questions button{margin:0 16px 16px}
.help-questions summary:focus-visible{outline:3px solid #5b9bf0;outline-offset:2px}
.rail-nav button{min-height:44px}
.mobile-header>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-header #header-account{flex-shrink:0;margin-left:auto}
.account-auth-action{max-width:420px}
@media(min-width:641px) and (max-height:620px){
 .home-page{padding:16px 24px}.home-membership{min-height:70px}
 .connection-center{padding:8px 0 18px;justify-content:flex-start}
 .connection-eyebrow{margin-bottom:8px}.connection-orb{width:132px;height:132px}
 .connection-title{font-size:26px;margin-top:14px}.node-shortcut{margin-top:4px;margin-bottom:10px}
 .connection-note{margin-top:10px}
}
@media(max-width:640px){
 .mobile-header{padding-top:env(safe-area-inset-top,0px);min-height:calc(56px + env(safe-area-inset-top,0px))}
 .connection-center{min-height:0;flex:1;padding:56px 24px 24px;justify-content:center}
 .connection-orb{width:156px;height:156px}
 .connection-title{margin-top:22px;font-size:28px}
 .connection-action{display:block;width:100%;max-width:330px;font-size:16px;min-height:48px;border-radius:8px}
 .node-shortcut{margin-top:12px;margin-bottom:12px;min-height:48px;max-width:330px}
 .connection-note{max-width:330px;margin-top:12px}
 .mobile-membership-bar{flex-shrink:0;font-size:13px;min-height:70px}
 .detail-page{padding:24px 20px}.page-heading h1{font-size:26px}
 .member-summary{padding:16px}.membership-back{display:none}
 .account-profile{margin-top:18px;padding:16px}.account-auth-action{max-width:none}
 .help-support{align-self:stretch;min-height:48px}.help-questions{margin-top:26px}
 .connection-error-actions{max-width:330px;width:100%}.connection-error-actions button{flex:1;min-width:120px}
 .devices-list{grid-template-columns:1fr}
}
@media(max-width:640px) and (max-height:700px){
 .connection-center{padding-top:40px;padding-bottom:18px;justify-content:flex-start}
 .connection-orb{width:128px;height:128px}.connection-title{font-size:25px;margin-top:14px}
 .node-shortcut{margin-top:8px;margin-bottom:8px}.connection-note{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){.connection-orb{animation:none;transition:none}.connection-orb:hover{transform:none}}

.account-password-panel{margin:16px 0;padding:16px 18px;border:1px solid #dce5f0;border-radius:10px;background:#f8fafd}
.account-password-panel>label{display:block;font-weight:600;margin-bottom:10px}
.account-password-value{display:flex;align-items:center;gap:10px;min-width:0}
.account-password-value input{font:inherit;font-family:ui-monospace,Consolas,monospace;min-width:0;flex:1;width:100%;height:46px;padding:10px 12px;border:1px solid #c6d4e4;border-radius:8px;background:#fff;color:#10263f}
.account-password-value button{flex-shrink:0;min-width:66px}
.account-password-panel .field-hint{margin-top:10px;line-height:1.7}
#account-password-relogin{margin-top:12px}
.plan-permissions{min-height:0}
.plan-card .plan-option{padding-block:12px}
@media(max-width:640px){.plan-card .plan-option{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 8px;align-items:center}.plan-card .plan-option strong{margin-top:0}.account-password-panel{padding:16px}.plan-card{min-width:0}}

.app-startup{background:#020713;color:#bcefff}.startup-globe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;pointer-events:none}

/* Android has native system insets above the WebView. Do not count them twice.
   Reserve both touch targets so titles never run underneath the account icon. */
body[data-mode="android"] .mobile-header{
 display:grid;grid-template-columns:44px 24px minmax(0,1fr) 44px;column-gap:8px;
 width:100%;height:52px;min-height:52px;box-sizing:border-box;padding:0 8px;
 align-items:center;flex-shrink:0;
}
body[data-mode="android"] .mobile-header .icon-button{
 width:44px;min-width:44px;height:44px;padding:10px;margin:0;
}
body[data-mode="android"] .mobile-header .mobile-brand-symbol{
 width:24px;height:24px;margin:0;object-fit:contain;
}
body[data-mode="android"] .mobile-header #header-title{
 min-width:0;margin:0;font-size:clamp(16px,4.2vw,18px);line-height:1.25;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body[data-mode="android"] .mobile-header #header-account{margin:0;justify-self:end}
.app-startup{background:#040b17}
body[data-mode="android"] .app-startup{
 background:#040b17 url('./assets/startup-globe-poster.png') center/cover no-repeat;
}
.app-startup iframe{background:transparent}

body[data-mode="android"] .app-shell{width:100%;height:100dvh;min-height:0}

@media(max-width:640px){.app-startup{background:#040b17 url('./assets/startup-globe-poster.png') center/cover no-repeat}}