/* Glass concept: translucent layers, luminous edges and restrained blue depth. */
:root{--line:rgba(143,164,199,.23);--muted:#5e708c;--tint:rgba(225,237,255,.7)}
body{background:radial-gradient(ellipse at 74% 12%,#d2e3ff 0,transparent 42%),radial-gradient(ellipse at 18% 75%,#dfe7f7 0,transparent 48%),#eaf0f8;background-attachment:fixed}
.app-shell{background:radial-gradient(ellipse 370px 360px at 105% 22%,#bed6ff88,transparent 75%),radial-gradient(ellipse 330px 420px at -30% 57%,#c4d6fb80,transparent 75%),linear-gradient(150deg,#f6f9ffb8,#eaf1fb99 55%,#f7f9fddd);border-inline:1px solid #ffffffa8;box-shadow:inset 1px 0 0 #fff,0 22px 90px #385b8415}
.demo-label{background:#e7eff873;border-bottom:1px solid #ffffff9c}
.card,dialog{background:linear-gradient(145deg,#ffffffdb,#ffffff7d 52%,#f8fbffab);border:1px solid #ffffffdd;backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);box-shadow:inset 0 1px 0 #fff,inset 1px 0 0 #ffffffc9,inset 0 -1px 0 #bccde247,0 14px 35px #40649612,0 3px 7px #40649606}
.card{border-radius:27px}.hero{background:radial-gradient(ellipse at 50% 28%,#ffffffc9,transparent 65%),linear-gradient(145deg,#ffffffe6,#ffffff8c 52%,#eff5ffa6)}
.referral-card{background:linear-gradient(130deg,#ffffffdf,#edf5ffa8 70%,#e0ebff80)}
.segments,.plan-grid{background:linear-gradient(155deg,#cad8ee66,#e0e9f459 55%,#ffffff59);border:1px solid #c8d5e58c;box-shadow:inset 0 2px 5px #385a8812,inset 0 -1px 0 #ffffffd9,0 1px 0 #ffffffd9}
.segments button,.plan{transition:background .2s,box-shadow .2s,transform .2s}
.segments button[aria-pressed=true],.plan[aria-pressed=true]{background:linear-gradient(150deg,#ffffffed,#ffffffb8 40%,#e7f0ffc9);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,inset 0 -3px 8px #7195d317,0 5px 14px #385c8d20,0 1px 3px #385c8d14;color:#204eab}
.segments button{border:1px solid transparent}.plan{border:1px solid transparent}
.primary{background:radial-gradient(ellipse at 50% 0,#8eb7ff88,transparent 65%),linear-gradient(180deg,#5388f1e8,#2c65e8ed 48%,#1949cdeF);border:1px solid #ffffff95;box-shadow:inset 0 1px 0 #ffffffd9,inset 1px 0 1px #ffffff5c,inset 0 -6px 12px #153b972e,0 10px 23px #285bd138,0 2px 5px #183f7d20;text-shadow:0 1px 2px #143d7f33;backdrop-filter:blur(12px)}
.primary:before{left:2%;right:2%;height:50%;top:1px;border-radius:14px 14px 55% 55%;background:linear-gradient(180deg,#ffffff66,#ffffff15 70%,transparent);opacity:.9}
.primary:hover{background:linear-gradient(180deg,#6595f4,#3270ed 52%,#2255d3);box-shadow:inset 0 1px 0 #ffffffe6,0 13px 26px #285bd147,0 2px 5px #183f7d20}
.primary .arrow-circle{background:linear-gradient(#ffffff38,#ffffff14);border:1px solid #ffffff35;box-shadow:inset 0 1px 0 #ffffff47,0 2px 6px #1945a51a}
.secondary,.icon-button,.tile-icon,.platforms button{background:linear-gradient(145deg,#ffffffe3,#f4f8ff9e 60%,#dfe9f58c);border:1px solid #ffffffc9;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 6px #7c99bc10,0 4px 12px #395a8710;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tile-icon.blue{background:linear-gradient(145deg,#ffffffcf,#d7e6ffa6);color:var(--blue)}
.methods button[aria-pressed=true],.platforms button[aria-pressed=true]{background:linear-gradient(145deg,#f8fbffed,#dbe9ffc9);border-color:#a9c2f3;box-shadow:inset 0 1px 0 #fff,0 4px 11px #39649b16;color:#2353b7}
.navigation{bottom:12px;width:min(436px,calc(100% - 24px));padding:7px 8px calc(7px + env(safe-area-inset-bottom));border:1px solid #ffffffe6;border-radius:23px;background:linear-gradient(145deg,#ffffffbb,#eff5ff99);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #bbcde34d,0 10px 32px #24446820,0 2px 6px #2444680d}
.navigation a{border:1px solid transparent}.navigation a[aria-current=page]{border-color:#ffffffdf;background:linear-gradient(145deg,#ffffffc9,#d9e8ffc4);box-shadow:inset 0 1px 0 #fff,0 3px 9px #496a9614}
.orb{background:radial-gradient(circle,#d6e6ffc9,#eff6ff6b 61%,#ffffff52 72%);border-color:#ffffffdc;box-shadow:inset 0 1px 2px #fff,0 6px 26px #547acc0d}.orb:before{border-color:#a4c0f03d;box-shadow:inset 0 1px 0 #ffffffd6}
.shield{background:linear-gradient(145deg,#a4c6ff,#5a8ff1 38%,#2863dc 64%,#1b49b6);position:relative}.shield:before{content:"";position:absolute;inset:2px 6px 52%;border-radius:50%;background:linear-gradient(#ffffff80,#ffffff03);transform:rotate(-20deg)}
.badge{background:#e7f5eda8;border:1px solid #ffffffab;box-shadow:inset 0 1px 0 #ffffff8a}.badge.expired{background:#ffede4c9}.notice{background:#e1ecff94;border:1px solid #ffffffa6}.notice.success{background:#e5f3eeb8}.danger-button{background:linear-gradient(#fff7f5,#f6dcde);color:#993448;text-shadow:none;box-shadow:inset 0 1px #fff,0 5px 15px #ab55611a}.danger-button:before{background:linear-gradient(#ffffffbb,transparent)}.danger-button:hover{background:linear-gradient(#fff7f5,#f3d1d5)}
dialog{background:linear-gradient(145deg,#fffffff5,#eff5fff0);box-shadow:inset 0 1px 0 #fff,0 25px 90px #17325440}dialog::backdrop{background:#233c5e3d;backdrop-filter:blur(7px)}
.review select{background:linear-gradient(145deg,#ffffffbf,#f3f7ff73);border-color:#ffffffd6;box-shadow:inset 0 1px #fff,0 5px 15px #496a9610}.review-bottom{border-color:#c4d1e4a6}
@media(max-width:1099px){.review{background:#e8effa9c;backdrop-filter:blur(16px)}}
@media(max-width:480px){body{background:#eaf0f8}.app-shell{border:0}.navigation{bottom:10px}}
/* Second pass: thicker optical edges and clearer separation between glass layers. */
.app-shell{background:radial-gradient(ellipse 310px 370px at 112% 29%,#8fbbff94,transparent 74%),radial-gradient(ellipse 250px 340px at -18% 66%,#a9c4f88c,transparent 75%),radial-gradient(ellipse 350px 190px at 18% 5%,#ffffffed,transparent 85%),linear-gradient(155deg,#edf5ffdd,#e1ebf9c4 54%,#f6f9ffdb)}
.card{position:relative;isolation:isolate;background:linear-gradient(125deg,#ffffffb8,#ffffff47 48%,#f6faff70);border:1px solid #ffffffe8;box-shadow:inset 0 2px 1px #ffffffed,inset 2px 0 2px #ffffffa6,inset -1px -2px 3px #82a6d530,0 22px 42px #375f9621,0 5px 10px #375f960e;backdrop-filter:blur(30px) saturate(155%);-webkit-backdrop-filter:blur(30px) saturate(155%)}
.card:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,#ffffff80,transparent 25%,transparent 66%,#ffffff38 84%,transparent);box-shadow:inset 0 0 0 1px #ffffff26}
.hero{background:radial-gradient(ellipse at 50% 28%,#ffffffad,transparent 62%),linear-gradient(130deg,#ffffffab,#f3f8ff61 65%,#e7f0ff75)}
.referral-card{background:linear-gradient(125deg,#ffffffb8,#eaf3ff78 70%,#cde0ff61)}
.segments,.plan-grid{background:linear-gradient(145deg,#a8bedb4d,#d8e5f659 46%,#ffffff47);border-color:#b3c7e1a3;box-shadow:inset 0 3px 7px #30598f20,inset 1px 0 3px #486b9410,inset 0 -1px 0 #fffffff5,0 1px 0 #ffffffc9}
.segments button[aria-pressed=true],.plan[aria-pressed=true]{background:linear-gradient(145deg,#ffffffeb,#ffffff8c 43%,#dceaffb8);border-color:#fffffff5;box-shadow:inset 0 2px 1px #fff,inset 1px 0 1px #fff,inset 0 -4px 8px #7ba3db26,0 8px 15px #355e9630,0 2px 4px #355e9620;text-shadow:0 1px 0 #ffffffb3}
.secondary,.icon-button,.tile-icon,.platforms button{background:linear-gradient(135deg,#ffffffd4,#ffffff66 48%,#dce8f78c);border-color:#ffffffeb;box-shadow:inset 0 2px 1px #ffffffed,inset 1px 0 1px #ffffffb3,inset 0 -3px 7px #7599c51c,0 7px 16px #395c8c1c,0 2px 4px #395c8c0a}
.methods button[aria-pressed=true],.platforms button[aria-pressed=true]{background:linear-gradient(135deg,#ffffffcf,#cbdfff94);border-color:#92b7f1;box-shadow:inset 0 2px 1px #fff,inset 0 -3px 8px #75a3e133,0 7px 15px #3c6aab24}
.primary{background:radial-gradient(ellipse at 50% -20%,#c2dcffb3,transparent 65%),linear-gradient(180deg,#6699f6eb,#306ce9ed 50%,#1748cdeF);box-shadow:inset 0 2px 1px #ffffffd9,inset 1px 0 2px #ffffff78,inset -1px 0 2px #ffffff47,inset 0 -7px 13px #0f338a40,0 13px 27px #235ad14a,0 3px 6px #15377e30}
.primary:before{left:1%;right:1%;top:1px;height:49%;background:linear-gradient(#ffffff8c,#ffffff26 65%,transparent);border-radius:13px 13px 50% 50%;opacity:1}
.primary:after{content:"";position:absolute;bottom:1px;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,#b5d5ffb3,transparent);pointer-events:none}
.navigation{background:linear-gradient(130deg,#ffffffa8,#ecf4ff70 60%,#ffffffa1);border-color:#fffffff2;box-shadow:inset 0 2px 1px #fff,inset 1px 0 2px #ffffffb3,inset 0 -2px 3px #7e9cc230,0 15px 35px #24476f30,0 3px 7px #24476f14;backdrop-filter:blur(32px) saturate(170%);-webkit-backdrop-filter:blur(32px) saturate(170%)}
.navigation a[aria-current=page]{background:linear-gradient(135deg,#ffffffe0,#d3e5ffad);box-shadow:inset 0 2px 1px #fff,inset 0 -2px 4px #7d9fcb26,0 5px 10px #355b8e21}
dialog{background:linear-gradient(135deg,#fffffff0,#eaf3ffe6);box-shadow:inset 0 2px 1px #fff,inset 0 -2px 3px #7e9cc230,0 30px 95px #17325452}
.danger-button{background:linear-gradient(#fff7f5,#f6dcde);box-shadow:inset 0 2px #fff,0 7px 17px #ab556126}
@supports not (backdrop-filter:blur(1px)){.card,dialog{background:#f7faff}.navigation{background:#f1f6fc}}

.dashboard{padding:21px;text-align:left}.dashboard-head h2{font-size:15px;letter-spacing:-.2px}.dashboard-head .badge{flex-shrink:0}.dashboard-stats{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;margin:22px 0}.subscription-stat,.device-stat{min-width:0}.subscription-stat>span,.device-stat>span{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;min-height:24px}.subscription-stat>strong,.device-stat>strong{display:block;font-size:26px;font-weight:700;line-height:1.35;letter-spacing:-.9px;margin:4px 0 5px}.subscription-stat>small,.device-stat>small{font-size:11px;color:var(--muted)}.device-stat{padding:0 0 0 16px;border-left:1px solid #a8bedb70;text-align:left}.device-stat>span svg{width:15px;height:15px}.device-stat em{font-size:17px;color:var(--muted);font-style:normal;font-weight:450}.device-stat>small{display:flex;align-items:center;gap:3px;color:var(--blue)}.device-stat>small svg{width:12px;height:12px}.dashboard-link{display:flex;gap:10px;align-items:center;margin:0 0 17px;padding:10px 11px 10px 13px;background:linear-gradient(135deg,#d5e3f566,#ffffff59);border:1px solid #ffffffd6;box-shadow:inset 0 2px 5px #33547f0f;border-radius:14px}.dashboard-link>div{flex:1;min-width:0}.dashboard-link label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}.dashboard-link input{border:0;background:transparent;color:#375c91;width:100%;padding:0;font-size:12px;text-overflow:ellipsis;outline-offset:2px}.dashboard-link .icon-button{border-radius:11px}.dashboard-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}.dashboard-footer .text-button{font-size:11px}.dashboard>.primary{font-size:14px}.dashboard-hint{font-size:13px;line-height:1.6;color:var(--muted);margin-bottom:18px}@media(max-width:359px){.dashboard{padding:16px}.subscription-stat>strong,.device-stat>strong{font-size:23px}.device-stat{padding-left:10px}.dashboard-stats{gap:8px}.dashboard>.primary{font-size:12px;padding-inline:9px}}

/* Stable navigation: keep viewport width and page positions during interaction. */
html{scrollbar-gutter:stable;scroll-behavior:auto}html.sheet-open{overflow:hidden}#screen{min-height:calc(100dvh - 112px);overflow-anchor:none}.navigation a{transition:background .18s ease,box-shadow .18s ease,color .18s ease}.navigation a:active{transform:scale(.97)}.payment-card>.segments{position:relative}.segments button,.plan{touch-action:manipulation}.sheet-head{position:sticky;top:-24px;z-index:2;background:#f2f7fff2;padding:12px 0;margin-top:-12px}dialog{overscroll-behavior:contain}
@media(prefers-reduced-motion:reduce){.navigation a{transition:none}.navigation a:active{transform:none}}
html,body,.app-shell{overflow-anchor:none}