:root{
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
  --bg:#f2f2f7;
  --outside:#e5e5ea;
  --card:#ffffff;
  --label:#000000;
  --secondary:#8e8e93;
  --value:#8a8a8e;
  --sep:#bdbdc2;
  --chev:#aeaeb2;
  --accent:#007bfe;
  --green:#31c859;
  --red:#ff3b30;
  --off:rgba(118,118,128,.12);
  --press:#d1d1d6;
  --bar:rgba(255,255,255,.72);
  --disabled:rgba(60,60,67,.3);
  --z:1;
  --pad:20px;
  --margin:20px;
  --gap:26px;
  --hair:.5;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
@media (min-resolution:3dppx){:root{--hair:.34}}
@media (max-resolution:1dppx){:root{--hair:1;--sep:#d8d8dc}}
@media (max-width:374px){:root{--pad:16px;--margin:16px}}

/* Themes. The light values below are exactly the colours the screens used before, so light looks unchanged; every
   colour that has to follow the theme is a variable (surfaces, hairlines, text, status colours, the "ink" of the
   black buttons). Fixed colour surfaces (wallet card, avatars, Face ID, colour tiles) stay literal on purpose.
   The dark set is chosen in the app (Home > Theme) and stored as state.theme; <html data-theme="dark"> switches it. */
:root{
  --pg:#f1f2f5;
  --pg-bg:radial-gradient(120% 55% at 10% -8%,#fff 0,rgba(255,255,255,0) 62%),radial-gradient(80% 40% at 100% 4%,rgba(75,73,209,.07),rgba(75,73,209,0) 70%),#f1f2f5;
  --ink:#111217;--on-ink:#fff;
  --ink-rgb:17,18,23;--paper-rgb:255,255,255;--on-ink-rgb:255,255,255;--sheet-rgb:250,250,253;
  --raise:#fff;--hi:#fff;--press-rd:#f0f1f6;--av1:#eceef4;--av2:#dcdfe8;
  --rd-sec:#6a6e7a;--text2:#454853;--faint:#a1a1a8;
  --link:#0064d1;--ok:#17863f;--bad:#d70015;--bad2:#b00012;--warn:#a35c00;
  --brand:#4b49d1;--brand2:#7674f4;--brand-t:#3b3aa0;--brand-bar:#c9c8f2;
  --tile-dark:#1c1c1e;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0d0e12;--outside:#060709;--card:#16171c;--label:#f2f3f7;--secondary:#9a9eab;--value:#9a9eab;
  --sep:rgba(255,255,255,.12);--chev:#5f6370;--accent:#5ea4ff;--green:#3ddc84;--red:#ff453a;
  --off:rgba(255,255,255,.1);--press:#24262d;--bar:rgba(22,23,28,.72);--disabled:rgba(235,235,245,.3);
  --pg:#0d0e12;
  --pg-bg:radial-gradient(120% 55% at 10% -8%,rgba(255,255,255,.06) 0,rgba(255,255,255,0) 62%),radial-gradient(80% 40% at 100% 4%,rgba(124,122,255,.1),rgba(124,122,255,0) 70%),#0d0e12;
  --ink:#f2f3f7;--on-ink:#111217;
  --ink-rgb:242,243,247;--paper-rgb:22,23,28;--on-ink-rgb:17,18,23;--sheet-rgb:19,20,25;
  --raise:#262830;--hi:rgba(255,255,255,.08);--press-rd:#22242b;--av1:#2c2e37;--av2:#20222a;
  --rd-sec:#9a9eab;--text2:#c5c8d2;--faint:#6e7280;
  --link:#6fb1ff;--ok:#4cd27a;--bad:#ff7d73;--bad2:#ff8f86;--warn:#ffb454;
  --brand:#8d8bff;--brand2:#a8a6ff;--brand-t:#b4b3ff;--brand-bar:#3b3a86;
  --tile-dark:#3a3d48;
}

html{box-sizing:border-box;height:100%;background:var(--bg)}
*,*::before,*::after{box-sizing:inherit}
body{height:100%;margin:0;background:var(--bg);display:flex;justify-content:center}
@media (min-width:500px){html,body{background:var(--outside)}}

.app{
  --fs:calc(17px*var(--z));
  --lh:calc(22px*var(--z));
  --fs-foot:calc(13px*var(--z));
  --lh-foot:calc(16px*var(--z));
  --fs-large:calc(34px*var(--z));
  --lh-large:calc(41px*var(--z));
  --row-h:calc(44px*var(--z));
  --tile-size:calc(29px*var(--z));
  position:relative;width:100%;max-width:430px;height:100%;overflow:hidden;
  background:var(--bg);color:var(--label);
  font-family:var(--font);font-size:var(--fs);line-height:var(--lh);letter-spacing:-.43px;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  -webkit-user-select:none;user-select:none;
}
@media (min-width:500px){.app{box-shadow:0 0 0 .5px rgba(0,0,0,.12)}}

/* Screens and push navigation */
.screen{
  position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;background:var(--bg);
  transform:translateX(100%);visibility:hidden;
  transition:transform .5s cubic-bezier(.32,.72,0,1),visibility 0s linear .5s;
}
.screen.is-active{
  transform:none;visibility:visible;box-shadow:-2px 0 14px rgba(0,0,0,.07);
  transition:transform .5s cubic-bezier(.32,.72,0,1),visibility 0s;
}
.screen.is-behind{transform:translateX(-30%)}
@media (prefers-reduced-motion:reduce){.screen,.screen.is-active{transition-duration:0s;transition-delay:0s}}

/* Navigation bar */
.nav{
  position:sticky;top:0;z-index:5;height:44px;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--bar);
  -webkit-backdrop-filter:blur(25px) saturate(180%);backdrop-filter:blur(25px) saturate(180%);
  transition:opacity .2s;
}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sep);
  transform:scaleY(var(--hair));transform-origin:bottom;transition:opacity .2s;
}
.nav-title{
  grid-column:2;margin:0;font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.43px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
.nav--large::before,.nav--large::after,.nav--large .nav-title{opacity:0}
.nav--large.is-scrolled::before,.nav--large.is-scrolled::after,.nav--large.is-scrolled .nav-title{opacity:1}
.nav--large .nav-title{transition:opacity .2s}

.back{
  grid-column:1;justify-self:start;display:flex;align-items:center;gap:9px;min-width:0;max-width:100%;
  height:44px;padding:0 8px 0 12px;border:0;background:none;color:var(--accent);
  font:inherit;font-size:17px;line-height:22px;letter-spacing:-.43px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.back svg{flex:none}
.back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back:active,.nav-action:active:not(:disabled){opacity:.35}
.nav-action{
  grid-column:3;justify-self:end;height:44px;padding:0 20px 0 8px;border:0;background:none;
  color:var(--accent);font:inherit;font-size:17px;line-height:22px;letter-spacing:-.43px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav-action:disabled{color:var(--disabled);cursor:default}

.large-title{
  margin:0;padding:8px var(--margin) 14px;font-size:var(--fs-large);line-height:var(--lh-large);
  font-weight:700;letter-spacing:.4px;
}

/* Content */
.content{display:flex;flex-direction:column;padding:0 var(--margin) 44px}
.content--home{gap:var(--gap)}
.content--list{padding-top:22px}

.card{background:var(--card);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.card--icons{--inset:calc(var(--pad) + var(--tile-size) + 15px)}

.row{
  position:relative;display:flex;align-items:center;gap:15px;width:100%;
  min-height:var(--row-h);padding:calc(6.5px*var(--z)) var(--pad);margin:0;border:0;
  background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;
  -webkit-tap-highlight-color:transparent;
}
button.row{cursor:pointer}
button.row:active{background:var(--press)}
.row::after{
  content:"";position:absolute;right:0;bottom:0;left:var(--inset,var(--pad));height:1px;
  background:var(--sep);transform:scaleY(var(--hair));transform-origin:bottom;
}
.row:last-child::after{display:none}
.row[hidden]{display:none}
.row:has(+ .row[hidden])::after{display:none}
.row--action{color:var(--accent)}
.label{flex:1;min-width:0}
.trail{flex:none;display:flex;align-items:center;gap:8px;margin-left:auto}
.value{color:var(--value);white-space:nowrap}
.chev{flex:none;color:var(--chev)}
.check{flex:none;color:var(--accent);visibility:hidden}
.row[aria-checked="true"] .check{visibility:visible}
/* A server that is not serving cannot be picked, so its name reads as inactive; the ETA stays legible. */
.row[disabled]{cursor:default}
.row[disabled] .label{color:var(--secondary)}

.tile{
  position:relative;flex:none;display:grid;place-items:center;width:var(--tile-size);height:var(--tile-size);
  border-radius:calc(6.5px*var(--z));background:var(--tint);color:#fff;
}
.tile svg{width:70%;height:70%}
/* Overlay above the glyph so the --tint cut-outs inside the icons take the same shading as the tile body. */
.tile::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 46%,rgba(0,0,0,.04) 74%,rgba(0,0,0,.09));
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.18),inset 0 0 0 .5px rgba(0,0,0,.05);
}
/* Service marks that ship as their own artwork sit on a white tile with a hairline edge. */
.tile.is-plain{background:#fff;color:var(--label)}
.tile.is-plain svg{width:76%;height:76%}
.tile.is-plain::after{background:none;box-shadow:inset 0 0 0 .5px rgba(60,60,67,.18)}
/* Country chip: bands come from --f1..--f3 on the instance, so one symbol serves every flag. */
.flag{flex:none;width:calc(26px*var(--z));height:calc(18px*var(--z))}
.card--flag{--inset:calc(var(--pad) + 26px*var(--z) + 15px)}

.row--account{min-height:calc(70px*var(--z));gap:16px;padding-block:calc(5px*var(--z))}
.card--acct{--inset:calc(var(--pad) + 60px*var(--z) + 16px)}
.avatar{flex:none;width:calc(60px*var(--z));height:calc(60px*var(--z))}
.account-text{display:flex;flex-direction:column;min-width:0}
.account-title{color:var(--label)}
.account-sub{font-size:var(--fs-foot);line-height:var(--lh-foot);letter-spacing:-.08px;margin-top:-2px}
.badge{
  flex:none;display:grid;place-items:center;min-width:calc(21px*var(--z));height:calc(21px*var(--z));
  padding:0 calc(6px*var(--z));border-radius:calc(11px*var(--z));background:var(--red);color:#fff;
  font-size:calc(15px*var(--z));line-height:1;font-weight:600;font-variant-numeric:tabular-nums;
}
.badge[hidden]{display:none}
.group{display:flex;flex-direction:column;padding-bottom:var(--gap)}
.group[hidden],.card[hidden]{display:none}
.group.has-foot{padding-bottom:20px}
.group:last-child{padding-bottom:0}
.group-label,.group-foot{
  margin:0;font-size:var(--fs-foot);line-height:var(--lh-foot);letter-spacing:-.08px;
  font-weight:400;color:var(--secondary);
}
.group-label{padding:0 var(--pad) 6px;text-transform:uppercase}
.group-foot{padding:6px var(--pad) 0}

/* Switch */
.switch{
  position:relative;flex:none;width:51px;height:31px;margin-left:auto;padding:0;border:0;border-radius:999px;
  background:var(--off);cursor:pointer;transition:background-color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.switch::before{
  content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:999px;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);
  transition:transform .28s cubic-bezier(.3,.7,.2,1),width .2s ease;
}
.switch[aria-checked="true"]{background:var(--green)}
.switch[aria-checked="true"]::before{transform:translateX(20px)}
.switch:active::before{width:33px}
.switch[aria-checked="true"]:active::before{transform:translateX(14px)}
@media (prefers-reduced-motion:reduce){.switch,.switch::before{transition:none}}

.dot{flex:none;width:calc(9px*var(--z));height:calc(9px*var(--z));border-radius:50%;background:var(--secondary)}
.dot.on{background:var(--green)}
.dot.off-mark{background:var(--secondary)}

/* Wallet */
.wallet-stack{position:relative;height:calc(246px*var(--z));margin-bottom:var(--gap)}
.wallet-card{position:absolute;left:0;right:0;height:calc(228px*var(--z));border-radius:calc(14px*var(--z))}
.wallet-card.is-back2{top:0;margin:0 calc(26px*var(--z));background:linear-gradient(155deg,#4a4a4f,#2c2c30);opacity:.4}
.wallet-card.is-back1{top:calc(9px*var(--z));margin:0 calc(13px*var(--z));background:linear-gradient(155deg,#6b6be0,#3f3f9e);opacity:.72}
.wallet-card.is-front{
  top:calc(18px*var(--z));z-index:2;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(18px*var(--z));color:#fff;
  background:linear-gradient(155deg,#3a3a44 0%,#101014 58%,#1d1d26 100%);
  box-shadow:0 calc(14px*var(--z)) calc(30px*var(--z)) rgba(0,0,0,.3);
}
.wallet-line{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wallet-line--foot{align-items:baseline}
.wallet-issuer{font-size:calc(15px*var(--z));font-weight:600;letter-spacing:-.2px}
.wallet-chip{
  width:calc(34px*var(--z));height:calc(26px*var(--z));border-radius:calc(5px*var(--z));
  background:linear-gradient(150deg,#f0d68a,#c9a44a 55%,#e8cf85);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18);
}
.wallet-figure{margin:0}
.wallet-cap{margin:0;font-size:var(--fs-foot);line-height:var(--lh-foot);letter-spacing:-.08px;color:rgba(255,255,255,.62)}
.wallet-bal{margin:calc(1px*var(--z)) 0 0;font-size:calc(30px*var(--z));line-height:calc(36px*var(--z));font-weight:700;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.wallet-nick{font-size:calc(13px*var(--z));font-weight:600;letter-spacing:-.1px}
.wallet-num{font-size:calc(13px*var(--z));letter-spacing:.5px;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
.wallet-topup{
  position:relative;display:inline-flex;align-items:center;gap:calc(5px*var(--z));
  margin-top:calc(10px*var(--z));height:calc(30px*var(--z));padding:0 calc(12px*var(--z));
  border:0;border-radius:calc(15px*var(--z));background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  color:#fff;font:inherit;font-size:calc(14px*var(--z));font-weight:600;letter-spacing:-.2px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.wallet-topup::after{content:"";position:absolute;inset:calc(-7px*var(--z));border-radius:inherit}
.wallet-topup svg{width:calc(12px*var(--z));height:calc(12px*var(--z));flex:none}
.wallet-topup:active,.wallet-topup.is-hit{background:rgba(255,255,255,.3)}
.card--txn{--inset:calc(var(--pad) + var(--tile-size) + 15px)}
.card--txn .row{min-height:calc(56px*var(--z));padding-block:calc(6px*var(--z))}
.label--two{display:flex;flex-direction:column;gap:calc(1px*var(--z))}
.label--two b{font-weight:400;font-size:var(--fs);line-height:var(--lh);letter-spacing:inherit}
.label--two small{font-size:var(--fs-foot);line-height:var(--lh-foot);letter-spacing:-.08px;color:var(--secondary)}
.txn-mark{
  flex:none;display:grid;place-items:center;width:var(--tile-size);height:var(--tile-size);border-radius:50%;
  background:var(--tint);color:#fff;font-size:calc(10px*var(--z));font-weight:600;letter-spacing:-.2px;
}
.txn-amt{font-size:var(--fs);white-space:nowrap;font-variant-numeric:tabular-nums}
.txn-amt.is-in{color:var(--green)}

.row--danger{color:var(--red);justify-content:center}

/* Modal sheet */
.sheet-root{position:absolute;inset:0;z-index:20;display:flex;align-items:flex-end;visibility:hidden;transition:visibility 0s linear .44s}
.sheet-root[hidden]{display:none}
.sheet-veil{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .38s ease}
.sheet{position:relative;width:100%;display:flex;flex-direction:column;border-radius:14px 14px 0 0;background:var(--bg);box-shadow:0 -1px 0 rgba(0,0,0,.06);transform:translateY(100%);transition:transform .44s cubic-bezier(.36,.72,.2,1)}
.sheet-root.is-open{visibility:visible;transition-delay:0s}
.sheet-root.is-open .sheet-veil{opacity:1}
.sheet-root.is-open .sheet{transform:none}
.sheet-grabber{flex:none;width:36px;height:5px;margin:5px auto 0;border-radius:3px;background:rgba(60,60,67,.3)}
.sheet-head{flex:none;display:grid;grid-template-columns:46px 1fr 46px;align-items:center;padding:4px 8px 8px}
.sheet-x{display:grid;place-items:center;width:30px;height:30px;justify-self:end;margin-right:6px;border:0;border-radius:50%;background:var(--off);color:var(--secondary);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sheet-x[hidden]{display:none}
.sheet-title{margin:0;text-align:center;font-size:calc(17px*var(--z));font-weight:600;letter-spacing:-.41px}
.sheet-body{padding:0 var(--pad) calc(22px*var(--z))}
.sheet-body[hidden]{display:none}
.sheet-cta{display:block;width:100%;min-height:calc(51px*var(--z));margin-top:calc(18px*var(--z));border:0;border-radius:13px;background:var(--accent);color:#fff;font:inherit;font-size:calc(17px*var(--z));font-weight:600;letter-spacing:-.41px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sheet-cta[disabled]{opacity:.4}

/* Amount entry */
.amt-hero{position:relative;display:flex;align-items:baseline;justify-content:center;gap:calc(4px*var(--z));padding:calc(2px*var(--z)) 0 calc(12px*var(--z))}
.amt-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sep);transform:scaleY(var(--hair));transform-origin:bottom}
.amt-cur{font-size:calc(26px*var(--z));font-weight:600;letter-spacing:-.6px}
.amt-input{width:calc(158px*var(--z));min-width:0;border:0;background:none;padding:0;color:var(--label);font:inherit;font-size:calc(38px*var(--z));line-height:calc(46px*var(--z));font-weight:700;letter-spacing:-1.2px;text-align:center;font-variant-numeric:tabular-nums;-webkit-user-select:text;user-select:text}
.amt-input:focus{outline:none}
.amt-input::placeholder{color:var(--disabled)}
.amt-row{display:flex;justify-content:center;gap:calc(8px*var(--z));padding:calc(14px*var(--z)) 0 calc(2px*var(--z))}
.amt{padding:calc(7px*var(--z)) calc(14px*var(--z));border:0;border-radius:calc(15px*var(--z));background:var(--off);color:var(--accent);font:inherit;font-size:calc(15px*var(--z));font-weight:600;letter-spacing:-.3px;font-variant-numeric:tabular-nums;cursor:pointer;-webkit-tap-highlight-color:transparent}
.amt:active{background:var(--press)}
.amt.is-on{background:var(--accent);color:#fff}

/* Purchase sheet */
.tile.is-buy{width:calc(64px*var(--z));height:calc(64px*var(--z));border-radius:calc(14px*var(--z));flex:none}
.buy-card{border-radius:14px;background:var(--card);overflow:hidden}
.buy-row{display:flex;align-items:center;gap:calc(12px*var(--z));padding:calc(14px*var(--z)) var(--pad)}
.buy-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.buy-name{margin:0;font-size:var(--fs);line-height:var(--lh);font-weight:600;letter-spacing:-.41px}
.buy-sub{margin:0;font-size:var(--fs-foot);line-height:var(--lh-foot);color:var(--secondary)}
.buy-acct{position:relative;margin:0;padding:calc(11px*var(--z)) var(--pad);font-size:var(--fs-foot);line-height:var(--lh-foot);color:var(--secondary);font-variant-numeric:tabular-nums}
.buy-acct::before{content:"";position:absolute;top:0;left:var(--pad);right:0;height:1px;background:var(--sep);transform:scaleY(var(--hair));transform-origin:top}
.buy-status{display:flex;flex-direction:column;align-items:center;gap:calc(7px*var(--z));padding:calc(24px*var(--z)) 0 calc(6px*var(--z))}
.buy-mark{display:grid;place-items:center;height:calc(34px*var(--z))}
.buy-spin,.buy-done{grid-area:1/1}
.buy-spin{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.buy-done{opacity:0;transform:scale(.8);transition:opacity .2s ease,transform .3s cubic-bezier(.32,1.4,.5,1)}
.buy-done path{stroke-dasharray:24;stroke-dashoffset:24}
.buy-cap{margin:0;font-size:calc(15px*var(--z));line-height:calc(20px*var(--z));letter-spacing:-.2px}
@keyframes draw{to{stroke-dashoffset:0}}
.is-done .buy-spin{opacity:0;animation:none}
.is-done .buy-done{opacity:1;transform:none}
.is-done .buy-done path{animation:draw .3s cubic-bezier(.65,0,.35,1) .1s forwards}

/* Face ID badge */
.fid-root{position:absolute;inset:0;z-index:15;display:flex;justify-content:center;visibility:hidden;transition:visibility 0s linear .44s}
.fid-root[hidden]{display:none}
.fid-veil{position:absolute;inset:0;background:rgba(0,0,0,.62);opacity:0;transition:opacity .3s ease}
.fid-box{position:relative;margin-top:calc(10px*var(--z));opacity:0;transform:translateY(calc(-46px*var(--z))) scale(.7);transition:opacity .3s ease,transform .44s cubic-bezier(.32,1.05,.5,1)}
.fid-root.is-open{visibility:visible;transition-delay:0s}
.fid-root.is-open .fid-veil{opacity:1}
.fid-root.is-open .fid-box{opacity:1;transform:none}
.fid-frame{position:relative;display:grid;place-items:center;width:calc(140px*var(--z));height:calc(140px*var(--z));border-radius:calc(38px*var(--z));background:#000;overflow:hidden;color:#5ee07a}
.fid-scan{position:absolute;left:14%;right:14%;height:calc(3px*var(--z));border-radius:2px;background:linear-gradient(90deg,rgba(94,224,122,0),rgba(94,224,122,.92) 50%,rgba(94,224,122,0));box-shadow:0 0 calc(18px*var(--z)) rgba(94,224,122,.55);animation:scan 1.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes scan{0%,100%{transform:translateY(calc(-42px*var(--z)))}50%{transform:translateY(calc(42px*var(--z)))}}
@media (prefers-reduced-motion:reduce){.sheet,.sheet-veil,.fid-box,.fid-veil{transition-duration:.01s}.sheet-root,.fid-root{transition-delay:0s}.buy-done path{animation:none;stroke-dashoffset:0}.fid-scan{animation:none;transform:translateY(calc(-20px*var(--z)))}}

/* Account and device detail */
.acct-hero{display:flex;flex-direction:column;align-items:center;padding-bottom:calc(22px*var(--z))}
.avatar.is-hero{width:calc(84px*var(--z));height:calc(84px*var(--z))}
.acct-name{margin:calc(7px*var(--z)) 0 0;font-size:calc(21px*var(--z));line-height:calc(26px*var(--z));font-weight:600;letter-spacing:-.3px}
.acct-role{margin:calc(1px*var(--z)) 0 0;font-size:var(--fs-foot);line-height:var(--lh-foot);color:var(--secondary)}
.dev-hero{display:flex;flex-direction:column;align-items:center;padding-bottom:calc(22px*var(--z))}
.dev-glyph{width:calc(66px*var(--z));height:calc(66px*var(--z));color:var(--label)}
.dev-name{margin:calc(9px*var(--z)) 0 0;font-size:calc(21px*var(--z));line-height:calc(26px*var(--z));font-weight:600;letter-spacing:-.3px;text-align:center}

/* Device list: platform mark on the left, platform name under the device name */
.card--dev{--inset:calc(var(--pad) + 30px*var(--z) + 15px)}
.card--dev .row{min-height:calc(48px*var(--z));padding-block:calc(4px*var(--z))}
.dev-mark{flex:none;width:calc(30px*var(--z));height:calc(30px*var(--z))}
.row--empty{color:var(--secondary);justify-content:center}
.row--danger.is-accent{color:var(--accent)}
.dev-mark.is-off{opacity:.45}
.card--dev .row.is-busy,.row--danger.is-busy{opacity:.5;pointer-events:none}

/* VPN plans */
.plan-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:calc(20px*var(--z))}
.tile.is-plan{width:calc(54px*var(--z));height:calc(54px*var(--z));border-radius:calc(13px*var(--z))}
.plan-price{margin:calc(9px*var(--z)) 0 0;font-size:calc(30px*var(--z));line-height:calc(36px*var(--z));font-weight:700;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.plan-cap{margin:calc(2px*var(--z)) 0 0;font-size:calc(15px*var(--z));line-height:calc(20px*var(--z));letter-spacing:-.2px}
.plan-eq{margin:calc(2px*var(--z)) 0 0;font-size:var(--fs-foot);line-height:var(--lh-foot);color:var(--secondary)}
.plan-save{font-style:normal;color:#ff9500}
.value.is-over{color:var(--red)}
.value.is-link{color:var(--accent)}

/* Free Trial offer screen */
.offer-card{padding:calc(16px*var(--z)) var(--pad) calc(18px*var(--z))}
.offer-head{display:flex;align-items:center;gap:calc(14px*var(--z))}
.tile.is-offer{width:calc(56px*var(--z));height:calc(56px*var(--z));border-radius:calc(13px*var(--z))}
.offer-title{display:flex;flex-direction:column;min-width:0}
.offer-title b{font-size:calc(21px*var(--z));line-height:calc(26px*var(--z));font-weight:600;letter-spacing:-.5px}
.offer-title small{font-size:calc(17px*var(--z));line-height:calc(22px*var(--z));letter-spacing:-.4px;color:var(--secondary)}
.offer-title small.is-over{color:var(--red)}
.offer-body,.offer-note p{
  margin:calc(16px*var(--z)) 0 0;font-size:var(--fs);line-height:var(--lh);
  letter-spacing:-.4px;color:var(--label);font-weight:400;
}
.offer-list{
  margin:calc(14px*var(--z)) 0 0;padding-left:calc(22px*var(--z));
  font-size:var(--fs);line-height:var(--lh);letter-spacing:-.4px;color:var(--label);
}
.offer-list li::marker{font-size:calc(17px*var(--z))}
.offer-list li + li{margin-top:calc(8px*var(--z))}
.offer-note{padding:calc(15px*var(--z)) var(--pad) calc(13px*var(--z))}
.offer-note p{margin-top:calc(3px*var(--z));letter-spacing:-.2px}
.offer-note-title{margin:0;font-size:var(--fs);line-height:var(--lh);font-weight:600;letter-spacing:-.4px}
.offer-note + .row::before,
.offer-note + .row[hidden] + .row::before{
  content:"";position:absolute;top:0;right:0;left:var(--pad);height:1px;
  background:var(--sep);transform:scaleY(var(--hair));transform-origin:top;
}
.group .sheet-cta{margin-top:0}

/* Whitelist VPN client */
.conn-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(14px*var(--z)) 0 calc(22px*var(--z))}
.conn-orb{
  display:grid;place-items:center;width:calc(126px*var(--z));height:calc(126px*var(--z));padding:0;
  border:0;border-radius:50%;background:var(--card);color:#5856d6;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 0 0 calc(1px*var(--z)) var(--sep) inset,0 calc(2px*var(--z)) calc(12px*var(--z)) rgba(0,0,0,.05);
  transition:background .35s ease,color .35s ease,box-shadow .35s ease,transform .12s ease;
}
.conn-orb:active{transform:scale(.97)}
.conn-orb svg{width:calc(50px*var(--z));height:calc(50px*var(--z))}
.conn-orb.is-pending{animation:connPulse 1.5s ease-in-out infinite}
.conn-orb.is-on{background:#5856d6;color:#fff;box-shadow:0 0 0 calc(6px*var(--z)) rgba(88,86,214,.12) inset,0 calc(2px*var(--z)) calc(14px*var(--z)) rgba(88,86,214,.32)}
@keyframes connPulse{
  0%,100%{box-shadow:0 0 0 calc(4px*var(--z)) rgba(88,86,214,.10) inset,0 0 0 calc(1px*var(--z)) var(--sep) inset}
  50%{box-shadow:0 0 0 calc(14px*var(--z)) rgba(88,86,214,.16) inset,0 0 0 calc(1px*var(--z)) var(--sep) inset}
}
.conn-state{margin:calc(15px*var(--z)) 0 0;font-size:calc(24px*var(--z));line-height:calc(30px*var(--z));font-weight:700;letter-spacing:-.6px}
.conn-sub{margin:calc(3px*var(--z)) 0 0;font-size:var(--fs-foot);line-height:var(--lh-foot);color:var(--secondary);letter-spacing:-.2px}

/* Support: an answer belongs to its own question cell and expands in place */
.faq-item{position:relative}
.faq-item::after{
  content:"";position:absolute;right:0;bottom:0;left:var(--pad);height:1px;
  background:var(--sep);transform:scaleY(var(--hair));transform-origin:bottom;
}
.faq-item:last-child::after{display:none}
.faq-item .row::after{display:none}
.row--disclose .chev{transition:transform .3s cubic-bezier(.3,.6,.3,1)}
.faq-item.is-open .chev{transform:rotate(90deg)}
.faq-a{
  max-height:0;overflow:hidden;padding:0 var(--pad);
  visibility:hidden;
  transition:max-height .32s cubic-bezier(.3,.6,.3,1),visibility 0s linear .32s;
}
.faq-item.is-open .faq-a{
  visibility:visible;
  transition:max-height .32s cubic-bezier(.3,.6,.3,1),visibility 0s linear 0s;
}
.faq-a p{
  margin:0 0 calc(10px*var(--z));font-size:calc(15px*var(--z));line-height:calc(20px*var(--z));
  letter-spacing:-.4px;color:var(--label);font-weight:400;
}
.faq-a p:first-child{margin-top:calc(2px*var(--z))}
.faq-a .faq-note{
  margin-top:calc(-2px*var(--z));padding-top:calc(10px*var(--z));
  font-size:var(--fs-foot);line-height:var(--lh-foot);
  letter-spacing:-.08px;color:var(--secondary);
}
.value.is-copy{-webkit-user-select:none;user-select:none}
/* A panel subscription URL is one long token: `.label{flex:1}` would give it a zero basis and the
   URL would paint over the caption, so the label keeps its width and the trail takes the rest. */
#row-vpn-link .label{flex:none}
#row-vpn-link .trail{flex:0 1 auto;min-width:0}
#vpn-link-value{overflow:hidden;text-overflow:ellipsis}

/* Editable rows */
.nav-x{grid-column:1;justify-self:start;height:44px;padding:0 8px 0 20px;border:0;background:none;color:var(--accent);font:inherit;font-size:17px;line-height:22px;letter-spacing:-.43px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav-x:active{opacity:.35}
.row--field{gap:12px}
.row--field .label{flex:none}
/* A multi-line field keeps its label on the first text line instead of centring it. */
.row--area{align-items:flex-start;gap:12px;padding-top:calc(11px*var(--z));padding-bottom:calc(11px*var(--z))}
.row--area .label{padding-top:calc(3px*var(--z))}
.field.area{min-height:calc(74px*var(--z));text-align:left;line-height:calc(22px*var(--z));resize:none}
.label.is-empty{color:var(--secondary);text-align:center}
.field{flex:1;min-width:0;border:0;background:none;padding:0;color:var(--label);font:inherit;font-size:var(--fs);line-height:var(--lh);text-align:right;-webkit-user-select:text;user-select:text}
.field::placeholder{color:var(--disabled)}
.field:focus{outline:none}

/* Birthday wheel */
.sheet-head--txt{grid-template-columns:calc(66px*var(--z)) 1fr calc(66px*var(--z))}
.sheet-txt{border:0;background:none;color:var(--accent);font:inherit;font-size:calc(15px*var(--z));letter-spacing:-.2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sheet-txt:first-child{justify-self:start;padding-left:6px}
.sheet-txt.is-strong{justify-self:end;padding-right:6px;font-weight:600}
.sheet-note{margin:calc(12px*var(--z)) 0 0;font-size:var(--fs-foot);line-height:var(--lh-foot);color:var(--secondary)}
.wheel{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:calc(200px*var(--z));margin:0 var(--pad) calc(10px*var(--z))}
.wheel::before,.wheel::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--sep);transform:scaleY(var(--hair))}
.wheel::before{top:calc(81px*var(--z));transform-origin:top}
.wheel::after{bottom:calc(81px*var(--z));transform-origin:bottom}
.wheel-col{overflow-y:auto;scrollbar-width:none;scroll-snap-type:y mandatory;text-align:center;padding:calc(81px*var(--z)) 0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent)}
.wheel-col::-webkit-scrollbar{display:none}
.wheel-i{height:calc(38px*var(--z));line-height:calc(38px*var(--z));font-size:calc(21px*var(--z));letter-spacing:-.6px;color:var(--disabled);scroll-snap-align:center}
.wheel-i.is-on{color:var(--label)}

/* Alert */
.alert-root{position:absolute;inset:0;z-index:25;display:grid;place-items:center;padding:0 calc(48px*var(--z));visibility:hidden;transition:visibility 0s linear .22s}
.alert-root[hidden]{display:none}
.alert-veil{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .22s ease}
.alert{position:relative;width:100%;overflow:hidden;border-radius:calc(14px*var(--z));background:var(--card);opacity:0;transform:scale(1.08);transition:opacity .22s ease,transform .22s cubic-bezier(.36,.72,.2,1)}
.alert-root.is-open{visibility:visible;transition-delay:0s}
.alert-root.is-open .alert-veil{opacity:1}
.alert-root.is-open .alert{opacity:1;transform:none}
.alert-body{padding:calc(17px*var(--z)) calc(16px*var(--z)) calc(16px*var(--z));text-align:center}
.alert-title{margin:0;font-size:calc(17px*var(--z));line-height:calc(22px*var(--z));font-weight:600;letter-spacing:-.41px}
.alert-msg{margin:calc(3px*var(--z)) 0 0;font-size:calc(13px*var(--z));line-height:calc(18px*var(--z))}
.alert-acts{position:relative;display:flex;flex-direction:column}
.alert-acts::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--sep);transform:scaleY(var(--hair));transform-origin:top}
.alert-btn{position:relative;border:0;background:none;padding:calc(12px*var(--z)) 0;color:var(--accent);font:inherit;font-size:calc(17px*var(--z));line-height:calc(22px*var(--z));letter-spacing:-.41px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.alert-btn:active{background:var(--press)}
.alert-btn+.alert-btn::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--sep);transform:scaleY(var(--hair));transform-origin:top}
.alert-btn.is-danger{font-weight:600;color:var(--red)}
@media (prefers-reduced-motion:reduce){.alert,.alert-veil{transition-duration:.01s}.alert-root{transition-delay:0s}}

/* Search */

button:focus{outline:none}
button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.switch:focus-visible{outline-offset:2px}

/* Home in the redesign look (variant 1): the same settings list, bezel cards, thin black line icons on soft grey
   squares, the Telegram photo on the account row. Scoped to .hm so the scrolling nav and the search keep working. */
.screen.hm{
  --pad:16px;--tile-size:30px;--secondary:var(--rd-sec);--value:var(--rd-sec);--sep:rgba(var(--ink-rgb),.1);--rd-ink:var(--ink);
  background:var(--pg-bg);
}
/* The main screen starts higher: the 44 px bar above the big title is empty until the page is scrolled, so the title
   moves up into it (the bar still lies over the top and takes the title over when the page scrolls), and the search
   sits a little closer to the first card. The Language block now fits on a phone about 700 px high. */
.hm .nav--large{margin-bottom:-30px}
.hm .content--home{padding-bottom:24px}
.hm .large-title{padding:8px calc(var(--margin) + 5px) 12px;font-size:34px;line-height:38px;font-weight:800;letter-spacing:-.045em}
.hm .content--home{padding-inline:calc(var(--margin) + 5px);gap:16px}
.hm .content--home .card{border-radius:25px;margin:5px 0;box-shadow:0 0 0 5px rgba(var(--paper-rgb),.55),0 0 0 6px rgba(var(--ink-rgb),.055),0 1px 2px rgba(17,18,23,.04),0 16px 30px -18px rgba(17,18,23,.2)}
.hm .content--home .row{min-height:48px;font-size:16px;letter-spacing:-.015em}
.hm .content--home .row::after{background:rgba(var(--ink-rgb),.1)}
.hm .content--home button.row:active{background:var(--press-rd)}
.hm .content--home .tile{border-radius:9px;background:rgba(17,18,23,.06);color:var(--rd-ink);box-shadow:none}
.hm .content--home .tile::after{display:none}
.hm .content--home .tile svg{width:60%;height:60%}
.hm .content--home .tile.is-ink{background:var(--rd-ink);color:var(--on-ink)}
.hm .content--home .value{font-size:15px;font-weight:500;letter-spacing:0}
.hm .content--home .row--account{min-height:72px;gap:14px}
.hm .card--acct{--inset:calc(var(--pad) + 56px + 14px)}
.hm-ava{position:relative;flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;overflow:hidden;color:#fff;font-size:23px;font-weight:600;
  background:linear-gradient(180deg,var(--a1,#82b1ff),var(--a2,#665fff))}
.hm-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm .account-text{flex:1;min-width:0}
.hm .account-title{font-size:19px;line-height:23px;font-weight:700;letter-spacing:-.03em}
.hm .account-sub{font-size:13px;line-height:17px;color:var(--secondary);margin-top:1px}

/* ==========================================================================================
   Redesign: Notifications, VPN, Support (class .rd on the screen). A frosted shell around a white core,
   a large title and one ink-black action. Everything is scoped to .rd, so no other screen changes.
   Footnotes and values are a little darker here (#6a6e7a, 4.9:1 on white) than the iOS grey. */
.screen.rd{
  --pad:16px;--tile-size:34px;
  --secondary:var(--rd-sec);--value:var(--rd-sec);--sep:rgba(var(--ink-rgb),.1);
  --rd-ink:var(--ink);--rd-brand:var(--brand);--rd-brand2:var(--brand2);--rd-line:rgba(var(--ink-rgb),.1);
  --rd-settle:cubic-bezier(.22,1,.36,1);--rd-spring:cubic-bezier(.34,1.45,.64,1);
  background:var(--pg-bg);
}
.rd .content{padding-inline:calc(var(--margin) + 5px)}
.rd .content--list{padding-top:4px}

/* the bar: a floating glass back button, the large title below is the visible title */
.rd .nav{height:60px;padding:8px 16px 0;pointer-events:none}
.rd .nav::before,.rd .nav::after{display:none}
.rd .nav-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rd .back{
  pointer-events:auto;justify-self:start;width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;
  color:var(--rd-ink);background:rgba(var(--paper-rgb),.66);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 0 0 1px rgba(var(--ink-rgb),.06),0 10px 22px -10px rgba(17,18,23,.28),inset  0 1px 0 var(--hi);
  transition:transform .5s var(--rd-spring);
}
.rd .back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rd .back svg{width:11px;height:19px}
.rd .back:active{opacity:1;transform:scale(.92);transition:transform .08s linear}
.rd-title{margin:0;padding:6px 6px 16px;font-size:34px;line-height:38px;font-weight:800;letter-spacing:-.045em;text-wrap:balance}

/* double bezel: the card is the white core, the translucent shell is a ring around it */
.rd .card{
  border-radius:25px;margin:5px 0;
  box-shadow:0 0 0 5px rgba(var(--paper-rgb),.55),0 0 0 6px rgba(var(--ink-rgb),.055),0 1px 2px rgba(17,18,23,.04),0 16px 30px -18px rgba(17,18,23,.2);
}
.rd .group{padding-bottom:18px}
.rd .group.has-foot{padding-bottom:20px}
.rd .group:last-child{padding-bottom:0}
.rd .group-label{padding:0 14px 10px;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.12em}
.rd .group-foot{padding:10px 14px 0;font-size:12.5px;line-height:18px;letter-spacing:.005em}
.rd .group-foot:empty{display:none}
.rd .row{min-height:58px;font-size:16px;font-weight:600;letter-spacing:-.015em}
.rd .row::after{background:var(--rd-line)}
.rd button.row:active{background:var(--press-rd)}
.rd .value{font-size:15px;font-weight:500;letter-spacing:0}
.rd .value.is-link{color:var(--link)}
.rd .tile{border-radius:10px;box-shadow:0 4px 10px -4px var(--tint)}
.rd .tile::after{border-radius:inherit}

/* ink-black action with its arrow in a nested circle */
.rd .btn-ink{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:62px;margin:5px 0;
  padding:0 9px 0 26px;border:0;border-radius:31px;background:var(--rd-ink);color:var(--on-ink);text-align:left;
  font-size:16px;font-weight:700;letter-spacing:-.015em;cursor:pointer;
  box-shadow:0 20px 32px -16px rgba(17,18,23,.6),inset  0 1px 0 rgba(var(--on-ink-rgb),.14);
  transition:transform .5s var(--rd-spring);
}
.rd .btn-ink::after{display:none}
.rd .btn-ink:active,.rd button.btn-ink:active{background:var(--rd-ink);transform:scale(.97);transition:transform .08s linear}
.rd .bi-l{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.rd .bi-l small{font-size:12.5px;font-weight:500;letter-spacing:0;opacity:.68;margin-top:1px}
.rd .bi-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(var(--on-ink-rgb),.14)}
/* No backdrop blur here: the page behind this button is a flat gradient, so the blur showed nothing, and on iPhone a blurred
   button below a scrolling strip sometimes was not painted at all until the screen was scrolled. */
.rd .btn-ghost{background:rgba(var(--paper-rgb),.66);color:var(--rd-ink);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.07),inset  0 1px 0 var(--hi)}
.rd .btn-ghost .bi-ic{background:rgba(var(--ink-rgb),.06)}
.rd .btn-ghost:active,.rd button.btn-ghost:active{background:rgba(var(--paper-rgb),.66)}
.rd .btn-ink[hidden]{display:none}
.rd .vpn-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.rd .vpn-actions .btn-ink{margin:0}

/* Notifications: with the master switch off, the categories read as inactive */
.rd .group .card{transition:opacity .35s var(--rd-settle)}
.rd .group.is-dim .card{opacity:.5}

/* VPN: a compact status header, action rows and the devices on the plan */
.rd-vpn .group-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0}
.rd-vpn .group-label.vl{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:flex;justify-content:space-between;align-items:baseline;padding:0 14px 10px}
.rd-vpn .group-label.vl span+span{text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px}
/* VPN: the days left as one big number with a thin bar, then My Devices as a strip of cards you swipe. */
.vpn-big{padding:16px 18px 14px}
.vpn-big .pp-top{padding:0}
.vpn-big .pp-big{margin:6px 0 0;display:flex;align-items:baseline;gap:8px}
.vpn-big .pp-big b{font-size:44px;line-height:46px;letter-spacing:-.05em}
.vpn-big .pp-big span{font-size:16px}
.vpn-big .pp-bar{margin:10px 0 8px}
.vpn-big .pp-until{margin:0}
.vd-all{border:0;background:none;font:inherit;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--link);padding:0;cursor:pointer}
/* VPN: My Devices as a dense list in one card (the same rows as Devices in Account, one line each, the time on the right). */
.vd-list .row{min-height:48px;padding-block:4px}
.vd-list .dev-mark{width:28px;height:28px}
.vd-list .row .label{font-weight:600}
.vd-list .row.is-off{opacity:.55}
.vd-list .trail .value{font-size:14px;font-weight:500;color:var(--secondary)}
.vpn-head{display:flex;flex-direction:row;align-items:center;gap:14px;padding:14px 16px}
.vh-ring{position:relative;flex:none;width:52px;height:52px}
.vh-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.vh-ring circle{fill:none;stroke-width:5}
.vr-t{stroke:rgba(var(--ink-rgb),.08)}
.vr-f{stroke:var(--rd-brand);stroke-linecap:round;transition:stroke-dasharray .8s var(--rd-settle)}
.vh-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:17px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vh-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vh-txt b{font-size:17px;line-height:22px;font-weight:700;letter-spacing:-.02em}
.vh-txt span{font-size:14px;line-height:19px;font-weight:500;color:var(--secondary)}
.vh-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;font-size:12px;font-weight:700;color:var(--ok);background:rgba(23,134,63,.11)}
.vh-chip .dot{width:7px;height:7px;background:#2fbf5f}
.vr-ic{flex:none;color:var(--secondary)}
.vr-ic.is-ok{color:var(--ok)}
#vpn-link-value{font-variant-numeric:tabular-nums}
.vpn-upnote{padding:14px 16px}
.vpn-upnote p{display:flex;gap:10px;margin:0;font-size:14px;line-height:20px;font-weight:400;color:var(--text2)}
.vpn-upnote svg{flex:none;margin-top:1.5px;color:var(--rd-brand)}
.vpn-upnote[hidden]{display:none}
.rd .offer-note{padding:18px 18px 16px}
.rd .offer-note-title{font-size:20px;line-height:24px;font-weight:800;letter-spacing:-.04em}
.rd .offer-note p{margin-top:6px;font-size:14.5px;line-height:21px;font-weight:400;color:var(--text2);letter-spacing:0}

/* Plan: one segmented control, the day sum, three ways to pay */
.rd-plan .group-label{padding:0 14px 10px}
.plan-seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 18px;padding:2px;border-radius:13px;background:rgba(var(--ink-rgb),.07)}
.ps-th{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px)/3);border-radius:11px;background:var(--raise);
  box-shadow:0 1px 3px rgba(17,18,23,.14),0 0 0 .5px rgba(var(--ink-rgb),.04);transform:translateX(var(--i,0%));transition:transform .45s var(--rd-settle)}
.plan-seg button{position:relative;z-index:1;height:36px;border:0;background:none;font:inherit;font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--rd-ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.plan-sum{padding-top:2px}
/* Plan ring: the days you have (black) and the days this payment adds (green) around the total. */
.plan-ring{display:flex;flex-direction:column;align-items:center;margin:0 0 14px}
.pr-ring{position:relative;width:168px;height:168px;margin:2px 0 0}
.pr-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.pr-ring circle{fill:none;stroke-width:14;stroke-linecap:round;transition:stroke-dasharray .5s var(--rd-settle,cubic-bezier(.22,1,.36,1))}
.pr-bg{stroke:rgba(var(--ink-rgb),.07)}
.pr-add{stroke:#34c759}
.pr-now{stroke:var(--rd-ink)}
.pr-mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.pr-mid b{display:block;font-size:46px;line-height:46px;font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--rd-ink)}
.pr-mid small{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--secondary)}
.pr-lg{display:flex;justify-content:center;gap:16px;margin:8px 0 0;font-size:13px;color:var(--secondary)}
.pr-lg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.pr-lg i.n{background:var(--rd-ink)}
.pr-lg i.a{background:#34c759}
.pr-lg span[hidden]{display:none}
.pr-note{margin:6px 14px 0;text-align:center;font-size:12px;line-height:16px;color:var(--secondary)}
.pr-note[hidden]{display:none}
.pr-until{display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px;margin:12px 14px 4px;text-align:center;font-size:13px;line-height:18px;color:var(--secondary)}
.pr-until #plan-until{font-weight:700;color:var(--rd-ink)}
/* Plan screen: the reason a payment could not start sits above the ring. */
.pr-err{display:flex;gap:12px;margin:0 0 14px;padding:14px 16px;border-radius:20px;background:var(--raise);box-shadow:0 0 0 1px rgba(215,0,21,.22),0 14px 24px -20px rgba(215,0,21,.4)}
.pr-err[hidden]{display:none}
.pr-err .ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,59,48,.12);color:var(--bad)}
.pr-err .ic svg{width:16px;height:16px}
.pr-err b{display:block;font-size:16px;letter-spacing:-.02em;color:var(--rd-ink)}
.pr-err p{margin:2px 0 0;font-size:13px;line-height:18px;color:var(--secondary)}
.pr-err.is-wait{box-shadow:0 0 0 1px rgba(163,92,0,.25),0 14px 24px -20px rgba(163,92,0,.4)}
.pr-err.is-wait .ic{background:rgba(255,149,0,.16);color:var(--warn)}
/* Payment result screen */
.res-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 0 14px}
.res-badge{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--raise);color:var(--bad);box-shadow:0 0 0 1px rgba(215,0,21,.18),0 18px 30px -16px rgba(215,0,21,.35)}
.res-badge svg{width:34px;height:34px}
.res-badge.is-wait{color:var(--warn);box-shadow:0 0 0 1px rgba(163,92,0,.2),0 18px 30px -16px rgba(163,92,0,.3)}
.res-hero h2{margin:16px 0 4px;font-size:28px;line-height:32px;font-weight:800;letter-spacing:-.04em;color:var(--rd-ink)}
.res-hero p{margin:0;max-width:30ch;font-size:15px;line-height:21px;color:var(--secondary)}
.res-steps{padding:6px 0}
.res-step{display:flex;gap:14px;padding:10px 18px;position:relative}
.res-step+.res-step::before{content:"";position:absolute;left:32px;top:-12px;height:24px;width:2px;background:rgba(var(--ink-rgb),.12)}
.res-step .d{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:rgba(var(--ink-rgb),.07);color:var(--secondary);font-size:13px;font-weight:700}
.res-step .d svg{width:14px;height:14px}
.res-step.is-ok .d{background:var(--rd-ink);color:var(--on-ink)}
.res-step.is-no .d{background:rgba(255,59,48,.12);color:var(--bad)}
.res-step.is-wt .d{background:rgba(255,149,0,.16);color:var(--warn)}
.res-step b{display:block;font-size:16px;letter-spacing:-.01em;font-weight:600;color:var(--rd-ink)}
.res-step small{display:block;font-size:13px;line-height:17px;color:var(--secondary)}
/* Payment received sheet */
.rf-asg.pay-ok{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 20px 18px}
.pk-badge{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--rd-ink);color:var(--on-ink);box-shadow:0 14px 24px -14px rgba(17,18,23,.6)}
.pay-ok h2{margin:12px 0 2px;font-size:22px;line-height:26px;font-weight:800;letter-spacing:-.035em;color:var(--rd-ink)}
.rf-asg.pay-ok p{margin:0;padding:0;border:0;max-width:none;font-size:15px;line-height:20px;color:var(--rd-sec)}
.rf-asg.pay-ok .pk-done{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;margin-top:18px;padding:0 8px 0 24px;border:0;border-radius:28px;background:var(--rd-ink);color:var(--on-ink);font:inherit;font-size:16px;font-weight:700;letter-spacing:-.015em;cursor:pointer;box-shadow:0 18px 28px -16px rgba(17,18,23,.6),inset  0 1px 0 rgba(var(--on-ink-rgb),.14)}
.rf-asg.pay-ok .pk-done+.pk-done{border-top:0}
.pk-c{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--on-ink);color:var(--rd-ink)}
.ps-chips{display:flex;align-items:center;justify-content:center;gap:6px;padding:16px 12px 4px;font-size:15px;font-weight:600;letter-spacing:-.015em}
.ps-chips span{padding:5px 11px;border-radius:99px;background:rgba(var(--ink-rgb),.06);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:360px){.ps-chips{gap:4px;font-size:14px}.ps-chips span{padding:5px 8px}}
.ps-chips span.p{background:rgba(75,73,209,.1);color:var(--brand-t)}
.ps-chips span.t{background:var(--rd-brand);color:var(--on-ink)}
.ps-chips i{font-style:normal;font-weight:500;color:var(--faint)}
.ps-bar{display:flex;gap:3px;height:5px;margin:12px 16px 2px}
.ps-bar[hidden]{display:none}
.ps-bar i{border-radius:3px;transition:flex .45s var(--rd-settle)}
.ps-bar i:first-child{background:var(--brand-bar)}
.ps-bar i:last-child{background:var(--rd-brand)}
.ps-tot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px 14px}
.ps-tot>span{display:flex;flex-direction:column;font-size:14px;line-height:19px;font-weight:500;color:var(--secondary)}
.ps-tot small{font-size:13px}
.ps-tot b{font-size:26px;line-height:30px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pay-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pay-tiles button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px 10px;border:0;border-radius:18px;background:var(--raise);
  font:inherit;color:var(--rd-ink);cursor:pointer;box-shadow:0 0 0 1px rgba(var(--ink-rgb),.08);-webkit-tap-highlight-color:transparent;
  transition:box-shadow .2s var(--rd-settle),transform .5s var(--rd-spring)}
.pay-tiles button:active{transform:scale(.96);transition:transform .08s linear}
.pay-tiles button[aria-checked="true"]{box-shadow:0 0 0 2px var(--rd-ink)}
/* The three payment marks are thin line drawings in the interface's one black, straight on the card. */
.pay-tiles .tile.is-logo{width:46px;height:46px;background:none;box-shadow:none;color:var(--rd-ink)}
.pay-tiles .tile.is-logo::after{display:none}
.pay-tiles .tile.is-logo svg{width:78%;height:78%}
.pay-tiles b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.amt-hint{margin:10px 0 0;text-align:center;font-size:13px;color:var(--secondary)}
.amt-hint[hidden]{display:none}
.wallet-note{margin:14px 0 10px;text-align:center}
/* A way to pay that is switched off, or not connected yet: the tile stays in place but is greyed out, says why in one word, and can not be picked. */
.pay-tiles button.is-off{background:rgba(var(--ink-rgb),.035);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.06);cursor:default}
.pay-tiles button.is-off .tile,.pay-tiles button.is-off b{opacity:.38}
.pay-tiles button.is-off:active{transform:none}
.pay-tiles .pt-note{margin-top:-4px;padding:2px 8px;border-radius:99px;background:rgba(var(--ink-rgb),.07);font-size:11px;line-height:14px;font-weight:600;letter-spacing:.01em;color:var(--secondary)}
.pay-tiles .pt-note:empty{display:none}
.rd-plan #plan-foot{text-align:center}

/* Support */
.rd .faq-item::after{background:var(--rd-line)}
.rd .row--disclose{min-height:58px}
/* Notifications is a list of switches, so it is denser than the other redesigned screens: 44 px rows, a 52 px master row with its status line, 28 px tiles. */
.screen[data-screen="notifications"] .row{min-height:44px}
.screen[data-screen="notifications"] .row:has(.label--two){min-height:52px}
.screen[data-screen="notifications"] .card--icons{--tile-size:28px}
.rd .faq-a{padding:0 16px}
/* Account: the Telegram photo and name, the plan and its days left, the devices. */
.prof-me{padding-top:6px}
.prof-ava{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;overflow:hidden;color:#fff;font-size:38px;font-weight:600;letter-spacing:-.02em;
  background:linear-gradient(180deg,var(--a1,#72d5fd),var(--a2,#2a9ef1));box-shadow:0 12px 24px -14px rgba(17,18,23,.45)}
.prof-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rd .prof-me .acct-name{margin-top:12px;font-size:26px;line-height:30px;font-weight:800;letter-spacing:-.04em;color:var(--rd-ink)}
.rd .prof-me .acct-role{font-size:14px;line-height:19px}
.prof-plan{padding:14px 0 12px}
.pp-top{display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.pp-kick{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary)}
.pp-pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(36,138,61,.12);color:var(--ok)}
.pp-pill.is-trial{background:rgba(0,122,255,.12);color:var(--link)}
.pp-big{margin:6px 20px 0;font-size:15px;font-weight:600;color:var(--secondary)}
.pp-big b{font-size:34px;line-height:38px;font-weight:800;letter-spacing:-.045em;color:var(--rd-ink)}
.pp-bar{height:6px;border-radius:3px;background:rgba(var(--ink-rgb),.08);margin:10px 20px 6px;overflow:hidden}
.pp-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--rd-ink);transition:width .5s cubic-bezier(.22,1,.36,1)}
.pp-until{margin:0 20px;font-size:13px;line-height:17px;color:var(--secondary)}
.prof-dev-l{display:flex;justify-content:space-between}
.rf-asg p b{display:block;color:var(--rd-ink);font-weight:600}
.rf-asg button.is-red{color:#ff3b30}
.rf-asg button.is-busy{opacity:.5;pointer-events:none}
/* Servers and the Developer screens (class .rd .mono): the home look, thin black icons on grey squares, dense rows. */
.mono .card--icons .tile,.mono .row--action .tile{border-radius:9px;background:rgba(17,18,23,.06);color:var(--rd-ink);box-shadow:none}
.mono .card--icons .tile::after,.mono .row--action .tile::after{display:none}
.mono .card--icons .tile svg,.mono .row--action .tile svg{width:60%;height:60%}
.mono{--tile-size:30px}
.mono .row{min-height:48px;font-weight:500}
.mono .row:has(.label--two){min-height:56px}
.mono .row--action{color:var(--link);font-weight:600}
.mono .row--danger{font-weight:600}
.mono .row--field .label,.mono .row--area .label{font-weight:500}
.mono .value{font-variant-numeric:tabular-nums}
/* the status of an available server stays on one line; an unavailable one says why under its name */
.mono .card--flag .value{white-space:nowrap}
/* editors: Cancel is a glass pill on the left, Save the same pill on the right */
.rd .nav-x{
  pointer-events:auto;grid-column:1;justify-self:start;height:44px;padding:0 18px;border-radius:22px;
  color:var(--rd-ink);font-size:16px;font-weight:600;letter-spacing:-.015em;background:rgba(var(--paper-rgb),.66);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 0 0 1px rgba(var(--ink-rgb),.06),0 10px 22px -10px rgba(17,18,23,.28),inset  0 1px 0 var(--hi);
}
.rd .nav-x:active{opacity:1;transform:scale(.94)}
.rd .nav-action:disabled{opacity:.45}
/* a card whose only row is hidden (Delete on a new item) leaves no empty frame behind */
.mono .card:not(:has(> :not([hidden]))){display:none}
/* News: two-line rows with a tile, an unread dot, the answer lined up under the title. */
.screen[data-screen="news"] .row--disclose{min-height:52px}
.screen[data-screen="news"] .card--icons{--tile-size:28px}
.screen[data-screen="news"] .faq-item::after{left:var(--inset)}
.screen[data-screen="news"] .faq-a{padding-left:var(--inset)}
.screen[data-screen="news"] .group-label{display:flex;justify-content:space-between}
.screen[data-screen="news"] .label--two b{font-weight:600}
.screen[data-screen="news"] .faq-item .label--two small{font-weight:400}
.nw-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#007aff}
/* Past Promotions: still readable, but plainly over — a grey tag tile and a quieter title */
.card.is-past .tile{filter:grayscale(1);opacity:.55}
.card.is-past .label b{color:var(--secondary)}
.rd .faq-a p{font-size:14.5px;line-height:21px;color:var(--text2);letter-spacing:0}
.rd .faq-a .faq-note{color:var(--secondary)}
.rd .faq-a p:first-child{margin-top:0}
.rd .faq-item.is-open>.row{font-weight:700}
.rd #sup-id,.rd #sup-plan,.rd #sup-dev{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .rd .back,.rd .btn-ink{transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .rd .back,.rd .btn-ghost{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--raise)}
}

/* Wallet (class .rd): the card keeps its balance and the Add Money pill, only the frame around it changes */
.rd .nav-action{
  pointer-events:auto;grid-column:3;justify-self:end;height:44px;padding:0 18px;border-radius:22px;
  color:var(--rd-ink);font-size:16px;font-weight:700;letter-spacing:-.015em;background:rgba(var(--paper-rgb),.66);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 0 0 1px rgba(var(--ink-rgb),.06),0 10px 22px -10px rgba(17,18,23,.28),inset  0 1px 0 var(--hi);
  transition:transform .5s var(--rd-spring);
}
.rd .nav-action:active:not(:disabled){opacity:1;transform:scale(.94);transition:transform .08s linear}
.rd .wallet-stack{margin-top:2px}
.rd .card--txn .row{min-height:60px}
.rd .txn-amt{font-weight:700;letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){.rd .nav-action{transition:none}}
@media (prefers-reduced-transparency:reduce){.rd .nav-action{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--raise)}}

/* Referrals (class .rd): the level card, the ladder sheet, friends with search and a filter menu, a friend's card, gift and Telegram sheets */
.rd .rf-hero{padding:6px 0 4px}
.rf-kick{margin:14px 18px 0;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary)}
.rf-lvn{display:flex;align-items:baseline;gap:8px;margin:6px 18px 0}
.rf-lvn b{font-size:34px;line-height:38px;font-weight:800;letter-spacing:-.045em}
.rf-lvn small{font-size:15px;font-weight:600;color:var(--secondary)}
.rf-trk{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:16px 18px 8px}
.rf-trk i{position:relative;overflow:hidden;height:8px;border-radius:4px;background:rgba(var(--ink-rgb),.08)}
.rf-trk i.on{background:var(--rd-ink)}
.rf-trk i.part::after{content:"";position:absolute;inset:0;width:var(--f,50%);background:var(--rd-ink)}
.rf-names{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:0 18px;font-size:10px;line-height:13px;font-weight:600;letter-spacing:.02em;color:var(--secondary)}
.rf-names span.now{color:var(--rd-ink)}
.rf-names span:last-child{text-align:right}
.rf-names span:not(:first-child):not(:last-child){text-align:center}
.rf-hint{margin:12px 18px 6px;font-size:14px;line-height:20px;color:var(--secondary)}
.rd .rf-cmp{min-height:50px;margin-top:6px;border-top:1px solid var(--rd-line)}
.rd .rf-cmp .label{font-weight:700}
.rd .rf-hero .btn-ink{width:calc(100% - 20px);margin:8px 10px 0}
.rd .rf-hero .btn-ghost{margin:8px 10px 10px;min-height:50px;border-radius:25px;width:calc(100% - 20px)}
.rd .rf-hero .btn-ghost .bi-ic{width:34px;height:34px}
.rd .rf-hero .row+.row::before{display:none}
.rd .rf-strong{color:var(--rd-ink);font-weight:700}
.rf-big{padding:16px 18px 8px}
.rf-big b{display:block;font-size:40px;line-height:42px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.rf-big span{font-size:14px;color:var(--secondary)}
.rd .rf-gl{display:flex;justify-content:space-between;align-items:baseline}
.rf-link{border:0;background:none;font:inherit;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--link);cursor:pointer;padding:0}
.rf-av{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,#eceef4,#dcdfe8);font-size:15px;font-weight:700;color:#6a6e7a}
.rd .rf-fr{gap:12px}
.rf-pill{flex:none;padding:4px 9px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.rf-pill.is-paid{background:var(--rd-ink);color:var(--on-ink)}
.rf-pill.is-trial{background:rgba(0,100,209,.12);color:var(--link)}
.rf-pill.is-joined,.rf-pill.is-none{background:rgba(var(--ink-rgb),.07);color:var(--secondary)}
.rf-pill.is-act{background:rgba(36,138,61,.12);color:var(--ok)}
.rd .rf-fr .value.rf-strong{font-size:16px}

/* search with the filter button, tokens, menu */
.rf-srch{display:flex;align-items:center;gap:8px;height:44px;margin:0 5px 12px;padding:0 6px 0 14px;border-radius:22px;background:rgba(var(--paper-rgb),.7);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.06)}
.rf-srch>svg{flex:none;color:var(--secondary)}
.rf-srch input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--rd-ink);outline:none;-webkit-appearance:none;appearance:none}
.rf-srch input::-webkit-search-cancel-button{display:none}
.rf-fbtn{flex:none;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:rgba(var(--ink-rgb),.06);color:var(--rd-ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.rf-fbtn.is-on{background:var(--rd-ink);color:var(--on-ink)}
.rf-toks{display:flex;flex-wrap:wrap;gap:8px;margin:0 5px 10px}
.rf-toks:empty{display:none}
.rf-tok{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 12px;border:0;border-radius:15px;background:var(--rd-ink);color:var(--on-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.rf-tok i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(var(--on-ink-rgb),.2);font-style:normal;font-size:11px}
.rf-sub{margin:0 8px 10px;font-size:13px;line-height:18px;color:var(--secondary)}
.rf-empty{padding:28px 20px;text-align:center;font-size:15px;line-height:21px;color:var(--secondary)}
.rf-menu{position:absolute;right:26px;top:var(--mt,170px);z-index:6;width:236px;padding:6px;border-radius:18px;background:rgba(var(--paper-rgb),.88);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 0 0 .5px rgba(var(--ink-rgb),.1),0 24px 48px -12px rgba(17,18,23,.35);transform-origin:top right;animation:rfpop .32s var(--rd-spring)}
.rf-menu[hidden]{display:none}
.rf-menu p{margin:0;padding:8px 12px 4px;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary)}
.rf-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;height:40px;padding:0 12px;border:0;border-radius:12px;background:none;font:inherit;font-size:16px;color:var(--rd-ink);text-align:left;cursor:pointer}
.rf-menu button:active{background:rgba(var(--ink-rgb),.06)}
.rf-menu hr{border:0;border-top:1px solid rgba(var(--ink-rgb),.08);margin:4px 8px}
@keyframes rfpop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* a friend's card */
.rf-pf{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2px 0 18px}
.rf-pf .rf-av{width:76px;height:76px;font-size:30px;margin-bottom:10px}
.rf-pf b{font-size:24px;line-height:28px;font-weight:800;letter-spacing:-.03em}
.rf-pf small{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:14px;color:var(--secondary)}
.rf-subc{padding:18px 18px 16px}
.rf-subc .sh{display:flex;align-items:center;justify-content:space-between}
.rf-subc .sh span:first-child{font-size:11px;line-height:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary)}
.rf-subc .big{margin:10px 0 0;font-size:28px;line-height:32px;font-weight:800;letter-spacing:-.04em}
.rf-subc p.big{color:var(--rd-ink)}
.rf-subc p{margin:4px 0 0;font-size:14px;line-height:19px;color:var(--secondary)}
.rf-subc .bar{height:8px;margin-top:14px;border-radius:4px;background:rgba(var(--ink-rgb),.08);overflow:hidden}
.rf-subc .bar i{display:block;height:100%;border-radius:4px;background:var(--rd-ink)}

/* the sheets of this section */
.sheet-root{--rd-ink:var(--ink);--rd-spring:cubic-bezier(.34,1.45,.64,1)}
.sheet--rf{max-height:92%;background:rgba(var(--sheet-rgb),.96);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);border-radius:30px 30px 0 0}
.rf-sh{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 4px}
.rf-sh h2{margin:0;font-size:22px;line-height:28px;font-weight:800;letter-spacing:-.03em}
.rf-sb{overflow-y:auto;padding:8px 21px calc(26px + env(safe-area-inset-bottom,0px));scrollbar-width:none}
.rf-sb::-webkit-scrollbar{display:none}
.rf-note{margin:14px 4px 0;font-size:13px;line-height:18px;color:var(--rd-sec)}
.rf-lad{position:relative;padding-left:44px}
.rf-lad::before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:rgba(var(--ink-rgb),.1)}
.rf-lad::after{content:"";position:absolute;left:15px;top:14px;width:2px;height:var(--h,40%);background:var(--rd-ink)}
.rf-ls{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;margin-bottom:10px;border-radius:20px;background:var(--raise);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.07)}
.rf-ls .k{position:absolute;left:-44px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--raise);box-shadow:0 0 0 2px rgba(var(--ink-rgb),.14);font-size:13px;font-weight:700;color:var(--rd-sec)}
.rf-ls.is-done .k{background:var(--rd-ink);color:var(--on-ink);box-shadow:none}
.rf-ls.is-cur{flex-direction:column;align-items:stretch;padding:16px;background:var(--rd-ink);color:var(--on-ink);box-shadow:0 20px 32px -16px rgba(17,18,23,.6)}
.rf-ls.is-cur .k{background:var(--on-ink);color:var(--rd-ink);box-shadow:0 0 0 4px rgba(var(--ink-rgb),.18)}
.rf-ls.is-next{box-shadow:0 0 0 1.5px var(--rd-ink)}
.rf-ls b{display:block;font-size:17px;line-height:22px;letter-spacing:-.02em}
.rf-ls small{display:block;font-size:13px;line-height:17px;color:var(--rd-sec)}
.rf-ls .r{text-align:right;font-size:14px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.rf-ls .r small{font-weight:500}
.rf-ls.is-cur small{color:rgba(var(--on-ink-rgb),.64)}
.rf-ls .top{display:flex;justify-content:space-between;gap:10px}
.rf-pb{height:6px;margin:10px 0 6px;border-radius:3px;background:rgba(var(--on-ink-rgb),.18);overflow:hidden}
.rf-pb i{display:block;height:100%;border-radius:3px;background:var(--on-ink)}

.rf-plan{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:0 18px;margin-bottom:8px;border:0;border-radius:20px;background:var(--raise);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.08);font:inherit;color:var(--rd-ink);text-align:left;cursor:pointer;transition:box-shadow .25s}
.rf-plan[aria-checked="true"]{box-shadow:0 0 0 2px var(--rd-ink)}
.rf-plan .l{flex:1}
.rf-plan .l b{display:block;font-size:17px;line-height:22px;letter-spacing:-.02em}
.rf-plan .l small{font-size:13px;color:var(--rd-sec)}
.rf-plan .p{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.rf-plan .d{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset  0 0 0 2px rgba(var(--ink-rgb),.2)}
.rf-plan[aria-checked="true"] .d{background:var(--rd-ink);box-shadow:none}
.rf-plan[aria-checked="true"] .d::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-ink)}
.rf-sum{margin:10px 0 12px;padding:6px 16px;border-radius:20px;background:rgba(var(--ink-rgb),.045)}
.rf-sum div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;font-size:15px}
.rf-sum div+div{border-top:1px solid rgba(var(--ink-rgb),.07)}
.rf-sum span:first-child{color:var(--rd-sec)}
.rf-sum b{font-variant-numeric:tabular-nums}
.rf-to{margin:0 0 14px;font-size:15px;color:var(--rd-sec)}
.rf-to b{color:var(--rd-ink)}
.rf-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:62px;margin-top:12px;padding:0 9px 0 26px;border:0;border-radius:31px;background:var(--rd-ink);color:var(--on-ink);font:inherit;font-size:16px;font-weight:700;letter-spacing:-.015em;text-align:left;cursor:pointer;box-shadow:0 20px 32px -16px rgba(17,18,23,.6),inset  0 1px 0 rgba(var(--on-ink-rgb),.14)}
.rf-cta .c{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--on-ink);color:var(--rd-ink)}
.rf-cta[disabled]{opacity:.4;cursor:default}
.rf-as{position:relative;display:flex;flex-direction:column;gap:8px;width:100%;padding:0 10px calc(10px + env(safe-area-inset-bottom,0px));transform:translateY(120%);transition:transform .44s cubic-bezier(.36,.72,.2,1)}
.sheet-root.is-open .rf-as{transform:none}
.rf-asg{border-radius:22px;background:rgba(var(--sheet-rgb),.94);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);overflow:hidden}
.rf-asg p{margin:0;padding:14px 16px 12px;text-align:center;font-size:13px;color:var(--rd-sec);border-bottom:1px solid rgba(var(--ink-rgb),.08)}
.rf-asg button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:58px;border:0;background:none;font:inherit;font-size:20px;color:var(--accent);cursor:pointer}
.rf-asg button+button{border-top:1px solid rgba(var(--ink-rgb),.08)}
.rf-asc button{font-weight:600}

/* Discounts and limited plans on Choose Plan (the combined design): the red sale line on top, the
   black limited strip under it, the red tag on a discounted term and the receipt under the switch. */
.pd-sale{display:flex;align-items:center;gap:10px;min-height:44px;margin:0 0 12px;padding:7px 14px;border-radius:22px;background:rgba(215,0,21,.08);color:var(--bad2);font-size:14px;line-height:18px;font-weight:600;letter-spacing:-.01em}
.pd-sale[hidden]{display:none}
.pd-sale svg{flex:none;width:17px;height:17px}
.pd-t{flex:1;min-width:0}
.pd-cd{flex:none;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.pd-cd:empty{display:none}
.pl-lims{display:grid;gap:8px;margin:0 0 14px}
.pl-lims[hidden]{display:none}
.pl-strip{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 12px 8px 14px;border:0;border-radius:18px;background:var(--rd-ink);color:var(--on-ink);font:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;box-shadow:0 14px 24px -18px rgba(17,18,23,.7);transition:transform .45s var(--rd-spring)}
.pl-strip:active{transform:scale(.98);transition:transform .08s linear}
.pl-strip .t{flex:1;min-width:0}
.pl-strip b{display:block;overflow:hidden;font-size:15px;line-height:20px;letter-spacing:-.02em;text-overflow:ellipsis;white-space:nowrap}
.pl-strip small{display:block;overflow:hidden;font-size:12px;line-height:16px;color:rgba(var(--on-ink-rgb),.65);text-overflow:ellipsis;white-space:nowrap}
.pl-strip .ck2{position:relative;flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset  0 0 0 2px rgba(var(--paper-rgb),.4)}
.pl-strip[aria-checked="true"] .ck2{background:var(--on-ink);box-shadow:none}
.pl-strip[aria-checked="true"] .ck2::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--rd-ink)}
.pl-strip .mini{display:flex;flex:none;gap:4px}
.pl-strip .mini i{min-width:28px;padding:3px 2px;border-radius:8px;background:rgba(var(--on-ink-rgb),.12);font-style:normal;font-size:13px;line-height:16px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.plan-seg button em{position:absolute;top:-8px;right:6px;padding:0 6px;border-radius:8px;background:#d70015;color:#fff;font-style:normal;font-size:10px;line-height:15px;font-weight:800;letter-spacing:.02em;box-shadow:0 0 0 2px #f1f2f5}
.plan-seg.is-off .ps-th{opacity:0}
.plan-seg.is-off button{color:var(--secondary)}
.plan-seg.is-2{grid-template-columns:repeat(2,1fr);margin:0 0 10px}
.plan-seg.is-2 .ps-th{width:calc((100% - 4px)/2)}
.rcpt{margin:-6px 0 18px;padding:2px 0;border-radius:20px;background:var(--card);
  box-shadow:0 0 0 5px rgba(var(--paper-rgb),.55),0 0 0 6px rgba(var(--ink-rgb),.055),0 1px 2px rgba(17,18,23,.04)}
.rcpt:empty{display:none}
.rcpt div{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 18px;font-size:15px;line-height:20px}
.rcpt div+div::before{content:"";position:absolute;top:0;right:0;left:18px;height:1px;background:var(--rd-line);transform:scaleY(var(--hair));transform-origin:top}
.rcpt span:first-child{min-width:0;color:var(--secondary)}
.rcpt span:last-child{flex:none;color:var(--rd-ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rcpt .is-off span:last-child{color:var(--bad)}
.rcpt .is-tot span{color:var(--rd-ink);font-size:17px;font-weight:800}

/* Prices admin: struck base and bold current price, the editors' live preview line, the date wheel. */
.pz-v s{margin-right:2px;color:var(--faint)}
.pz-v b{color:var(--rd-ink);font-weight:700}
.pz-now{margin-left:8px;color:var(--bad);font-weight:600;white-space:nowrap}
.ad-unit{margin-left:6px}
.ad-prev{margin:10px 0 0;padding:12px 16px;border-radius:18px;background:rgba(var(--ink-rgb),.045);font-size:13px;line-height:18px;color:var(--secondary)}
.ad-prev:empty{display:none}
.ad-prev.is-err{background:rgba(215,0,21,.07);color:var(--bad2)}
#ad-terms .row.is-dim .label{color:var(--secondary)}
.wheel.is-dt{grid-template-columns:2fr 1fr 1fr}

/* Device marks are outline logos in ink, the way the payment logos are drawn. */
.dev-mark{color:var(--rd-ink,var(--rd-ink))}

/* Free Trial (variant T1): the bar under the big number is full, the whole trial is still ahead. */
.screen[data-screen="trial"] .pp-bar i{width:100%}

/* Language (variant M4): a wide glass menu that opens from its row with a tail, a flag and the name once. */
.lang-root .sheet-veil{background:rgba(17,18,23,.14)}
.lang-pop{position:absolute;left:18px;right:18px;padding:8px;border-radius:24px;background:rgba(var(--paper-rgb),.92);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  box-shadow:0 0 0 1px rgba(var(--ink-rgb),.06),0 24px 44px -14px rgba(17,18,23,.42);opacity:0;transform:translateY(8px) scale(.97);transform-origin:85% 100%;transition:opacity .2s ease,transform .3s var(--rd-spring)}
.lang-pop.is-below{transform:translateY(-8px) scale(.97);transform-origin:85% 0}
.lang-root.is-open .lang-pop{opacity:1;transform:none}
.lang-hd{margin:0;padding:6px 8px 8px;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rd-sec)}
.lang-c{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* Two cards do not fit side by side on the narrowest phones: they stack, the menu just grows taller. */
@media (max-width:359px){.lang-c{grid-template-columns:minmax(0,1fr)}}
.lang-c button{position:relative;display:flex;align-items:center;gap:10px;min-height:56px;padding:0 40px 0 14px;border:0;border-radius:18px;background:var(--raise);font:inherit;text-align:left;color:var(--rd-ink);cursor:pointer;box-shadow:0 0 0 1px rgba(var(--ink-rgb),.08);-webkit-tap-highlight-color:transparent;transition:transform .2s var(--rd-spring)}
.lang-c button:active{transform:scale(.97)}
.lang-c button[aria-checked="true"]{box-shadow:0 0 0 2px var(--rd-ink)}
.lang-c .flag,.lang-c .swatch{width:26px;height:18px;flex:none}
.lang-c b{font-size:16px;line-height:20px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.lang-c .tk{position:absolute;top:50%;right:12px;display:grid;place-items:center;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--rd-ink);color:var(--on-ink);opacity:0;transition:opacity .15s ease}
.lang-c .tk svg{width:11px;height:10px}
.lang-c button[aria-checked="true"] .tk{opacity:1}
.lang-tail{position:absolute;right:46px;bottom:-7px;width:18px;height:18px;border-radius:3px;background:rgba(var(--paper-rgb),.92);transform:rotate(45deg);box-shadow:3px 3px 6px -3px rgba(17,18,23,.18)}
.lang-pop.is-below .lang-tail{top:-7px;bottom:auto;box-shadow:-3px -3px 6px -3px rgba(17,18,23,.18)}

/* No scrollbars anywhere: on a phone they never show, and on desktop Telegram the thick system one
   (with arrows) sat on the right edge of every screen. Wheel, touchpad and keys still scroll. */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none}