:root{
  --bg:#000;
  --surface:#0b0b0d;
  --surface-elevated:#131316;
  --text:#f7f7f8;
  --muted:#9b9ba6;
  --line:rgba(255,255,255,.09);
  --accent:#ff3aa7;
  --danger:#ff5a72;
  --success:#61d095;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --radius-1:12px;
  --radius-2:16px;
  --radius-3:16px;
  --radius-4:18px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:15px/1.38 -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
button,input{font:inherit}
button{min-height:44px;color:inherit;cursor:pointer}
button:disabled{opacity:.42;cursor:default}
svg{width:19px;height:19px;stroke-width:1.8}
[hidden]{display:none}
.app-shell{width:min(100%,430px);min-height:100vh;margin:auto;padding:calc(var(--safe-top) + 8px) 16px calc(88px + var(--safe-bottom))}
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand,.user-chip,.ghost-icon,.link-help{border:0;background:transparent;padding:0}
.brand img{display:block;width:78px;height:34px;object-fit:contain;object-position:left}
.user-chip{display:flex;align-items:center;gap:10px;min-width:0}
.user-chip>span:first-child{display:grid;text-align:right}
.user-chip b{font-size:12px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip small,.eyebrow,.page-section-head small{color:var(--muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.avatar,.profile-avatar{display:grid;place-items:center;overflow:hidden;background:var(--surface-elevated);border:1px solid var(--line);font-weight:750}
.avatar{width:38px;height:38px;border-radius:13px}
.avatar img,.profile-avatar img{width:100%;height:100%;object-fit:cover}
.page{display:none;padding-bottom:16px}
.page.active{display:block}
.page-intro{margin:18px 2px 16px}
.page-intro.compact{margin-top:10px}
.page-intro h1{margin:4px 0 0;font-size:28px;line-height:1.12;letter-spacing:-.035em}
.page-intro p{margin:8px 0 0;color:var(--muted)}
.hero-card,.link-card,.current-card,.capacity-card,.profile-hero,.referral-card,.balance-card,.notice,.sheet-summary{
  border:1px solid var(--line);border-radius:var(--radius-4);background:var(--surface);padding:20px
}
.hero-card{background:var(--surface)}
.hero-head,.capacity-top,.current-card,.link-heading,.link-value,.profile-hero,.sheet-summary{display:flex;align-items:center;gap:12px}
.hero-head,.capacity-top,.link-value,.current-card{justify-content:space-between}
.status,.mini-status,.profile-plan-chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:rgba(255,255,255,.06);padding:7px 10px;color:var(--muted);font-size:12px;font-style:normal}
.status i{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.status.active,.mini-status.active{color:var(--success)}
.status.active i{background:var(--success);box-shadow:0 0 0 4px rgba(97,208,149,.12)}
.hero-copy{margin:26px 0 20px}
.hero-copy small,.hero-stats small,.current-main small,.capacity-copy small,.sheet-summary small{display:block;color:var(--muted)}
.hero-copy h2{margin:3px 0;font-size:26px}
.hero-copy p{margin:0;color:var(--muted)}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-stats>div{display:flex;align-items:center;gap:10px}
.stat-icon,.icon-box,.link-icon,.device-symbol{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:14px;background:var(--surface-elevated);color:var(--accent)}
.progress{height:5px;margin:16px 0;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.progress span{display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .25s ease}
.primary,.copy-button,.sheet-primary{width:100%;border:0;border-radius:var(--radius-2);background:var(--accent);color:#fff;font-weight:800;padding:0 16px}
.primary{display:flex;align-items:center;justify-content:space-between}
.primary span{display:flex;align-items:center;gap:9px}
.link-card{margin-top:12px}
.link-copy{display:grid;flex:1}
.link-copy span,.link-card code{color:var(--muted);font-size:12px}
.link-value{margin:16px 0;padding:12px 14px;border-radius:var(--radius-1);background:var(--bg)}
.link-value code{overflow:hidden;text-overflow:ellipsis}
.copy-button{background:var(--surface-elevated);color:var(--text)}
.link-help{width:100%;display:flex;justify-content:center;align-items:center;gap:8px;color:var(--muted)}
.section-title,.page-section-head{display:flex;align-items:end;justify-content:space-between;margin:22px 2px 10px}
.section-title h3,.page-section-head h3{margin:0;font-size:17px}
.section-title span,.page-section-head>span{color:var(--muted);font-size:12px}
.quick-grid,.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick-grid button,.stats-grid article{border:1px solid var(--line);border-radius:var(--radius-2);background:var(--surface);padding:14px;text-align:left}
.quick-grid button{display:grid;gap:6px}
.quick-grid button>span{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:var(--surface-elevated);color:var(--accent)}
.quick-grid small,.stats-grid small{color:var(--muted)}
.notice{display:flex;align-items:center;gap:12px;margin-top:12px;padding:14px}
.notice>span{color:var(--accent)}
.notice div{flex:1}.notice p{margin:2px 0;color:var(--muted);font-size:12px}
.notice button{border:0;border-radius:12px;background:var(--accent);color:#180814;font-weight:800;padding:0 12px}
.plans,.device-list,.menu-list,.reward-list,.faq,.payment-list{display:grid;gap:10px}
.plan-card,.device,.secondary-row,.menu-list button,.reward-list>div,.payment-list button,.support-cta{
  border:1px solid var(--line);border-radius:var(--radius-2);background:var(--surface);padding:14px
}
.plan-card{position:relative;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.plan-card.featured{border-color:rgba(241,91,181,.42)}
.plan-label{position:absolute;right:12px;top:-8px;padding:3px 7px;border-radius:8px;background:var(--accent);color:#180814;font-size:9px;font-weight:900}
.plan-info h3{margin:0}.plan-info p{margin:3px 0;color:var(--muted);font-size:12px}.plan-info em{color:var(--success);font-size:12px;font-style:normal}
.plan-price{text-align:right}.plan-price b,.plan-price small{display:block}.plan-price small{color:var(--muted)}
.plan-card button{grid-column:1/-1;border:0;border-radius:13px;background:var(--surface-elevated);font-weight:750}
.current-main,.capacity-copy{display:flex;align-items:center;gap:12px}
.current-main>div{display:grid}.current-main span{color:var(--muted);font-size:12px}
.secondary-row,.menu-list button,.support-cta,.payment-list button{width:100%;display:flex;align-items:center;gap:12px;text-align:left}
.secondary-row>span:nth-child(2),.menu-list button>span:nth-child(2),.support-cta>span,.payment-list button>span:nth-child(2){display:grid;flex:1}
.secondary-row small,.menu-list small,.support-cta small,.payment-list small{color:var(--muted)}
.capacity-card p{margin-bottom:0;color:var(--muted);font-size:12px}
.capacity-progress{margin-bottom:0}
.device{display:flex;align-items:center;gap:12px}
.device-copy{display:grid;flex:1}.device-copy small{color:var(--muted)}
.device-remove,.sheet-close{display:grid;place-items:center;border:0;border-radius:12px;background:var(--surface-elevated);color:var(--danger)}
.profile-hero{align-items:center}
.profile-avatar{width:72px;height:72px;border-radius:24px;font-size:24px}
.profile-meta{min-width:0}.profile-meta h1{margin:2px 0}.profile-meta p{margin:0 0 8px;color:var(--muted)}
.profile-stats{grid-template-columns:repeat(3,1fr);margin:12px 0}
.stats-grid article{display:grid;gap:4px;text-align:center}.stats-grid article svg{margin:auto;color:var(--accent)}
.profile-id{display:flex;align-items:center;justify-content:space-between;margin-top:16px;color:var(--muted)}
.profile-id button{border:0;background:transparent;display:flex;align-items:center;gap:8px}
.referral-card code{display:block;margin:10px 0 16px;padding:12px;border-radius:12px;background:var(--bg);color:var(--muted);overflow-wrap:anywhere}
.referral-card>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.referral-card button{border:1px solid var(--line);border-radius:13px;background:var(--surface-elevated)}
.referral-card .soft-primary{background:var(--accent);color:#180814;border-color:transparent}
.reward-list>div{display:flex;align-items:center;gap:10px}.reward-list>div>span:nth-child(2){display:grid;flex:1}.reward-list small{color:var(--muted)}.reward-list em{color:var(--success);font-style:normal}
.balance-card{display:flex;align-items:center;gap:12px}.balance-card div{display:grid}.balance-card small{color:var(--muted)}
.promo-field{display:grid;gap:8px;margin:16px 0 10px;color:var(--muted);font-size:13px}
.promo-field input{min-height:48px;border:1px solid var(--line);border-radius:var(--radius-2);background:var(--surface);color:var(--text);padding:0 16px;text-transform:uppercase;outline:none}
.promo-field input:focus{border-color:var(--accent)}
.promo-apply{min-height:44px;width:100%;border:1px solid var(--line);border-radius:14px;background:var(--surface-elevated);color:var(--text);font-weight:750}
.promo-hint{min-height:20px;color:var(--muted);font-size:13px}
.faq details{border:1px solid var(--line);border-radius:var(--radius-2);background:var(--surface);padding:0 14px}
.faq summary{min-height:54px;display:flex;align-items:center;justify-content:space-between;list-style:none}.faq summary span{display:flex;align-items:center;gap:9px}.faq p{color:var(--muted);margin-top:0}
.bottom-nav{position:fixed;z-index:20;left:50%;bottom:calc(10px + var(--safe-bottom));transform:translateX(-50%);width:min(calc(100% - 24px),406px);display:grid;grid-template-columns:repeat(3,1fr);padding:7px;border:1px solid var(--line);border-radius:20px;background:#0b0b0d}
.bottom-nav button{border:0;border-radius:14px;background:transparent;color:var(--muted);display:grid;place-items:center;gap:2px;font-size:10px}
.bottom-nav button.active{background:var(--surface-elevated);color:var(--accent)}
.sheet-backdrop{position:fixed;z-index:30;inset:0;background:rgba(0,0,0,.65)}
.sheet{position:fixed;z-index:31;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,430px);max-height:88vh;overflow:auto;border:1px solid var(--line);border-radius:24px 24px 0 0;background:var(--surface-elevated);padding:12px 18px calc(20px + var(--safe-bottom))}
.sheet-handle{width:42px;height:4px;margin:0 auto 8px;border-radius:99px;background:var(--line)}
.sheet-close{position:absolute;right:16px;top:16px;width:44px}
.sheet h2{margin:5px 0}.sheet>p{color:var(--muted)}
.sheet-summary{margin:14px 0;background:var(--surface)}.sheet-summary div{display:grid;flex:1}.sheet-summary em{color:var(--muted);font-size:12px;font-style:normal}
.toast{position:fixed;z-index:50;left:50%;bottom:calc(94px + var(--safe-bottom));transform:translate(-50%,16px);max-width:calc(100% - 32px);padding:11px 15px;border:1px solid var(--line);border-radius:14px;background:var(--surface-elevated);opacity:0;pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.loader{position:fixed;z-index:60;inset:0;display:grid;place-items:center;background:var(--bg)}.loader.hidden{display:none}.loader img{width:92px}.loader span{position:absolute;margin-top:90px;width:28px;height:28px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
.empty{padding:20px;border:1px dashed var(--line);border-radius:var(--radius-2);color:var(--muted);text-align:center}
i[data-lucide]:empty::before{content:"•";display:grid;place-items:center;width:1em;height:1em}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes page-in{from{opacity:0;transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;animation:none;transition:none}}
@media (max-width:370px){.app-shell{padding-inline:12px}.hero-stats,.quick-grid{grid-template-columns:1fr}.profile-stats{grid-template-columns:1fr 1fr}.plan-card{grid-template-columns:1fr}}



/* MGN VPN compact black UI */
body{background:#000}
.app-shell{padding:calc(var(--safe-top) + 6px) 14px calc(82px + var(--safe-bottom))}
.topbar{height:54px}
.page-intro{margin:14px 2px 12px}
.page-intro.compact{margin-top:8px}
.page-intro h1{font-size:24px;letter-spacing:-.025em}
.hero-card,.link-card,.current-card,.capacity-card,.profile-hero,.referral-card,.balance-card,.notice,.sheet-summary,.legal-card{
  border-radius:16px;background:#0b0b0d;border:1px solid rgba(255,255,255,.08);box-shadow:none
}
.hero-card,.link-card,.current-card,.capacity-card,.profile-hero,.referral-card,.balance-card,.legal-card{padding:16px}
.hero-copy{margin:18px 0 16px}
.hero-copy h2{font-size:24px}
.stat-icon,.icon-box,.link-icon,.device-symbol{background:#151518;color:var(--accent);border-radius:12px}
.primary,.sheet-primary{background:var(--accent);color:#fff;border-radius:13px}
.copy-button{background:#151518;color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:13px}
.personal-link{border-color:rgba(255,58,167,.42)}
.personal-link .link-value{
  border:1px solid rgba(255,58,167,.28);
  background:#050505;
  min-height:48px;
}
.personal-link .link-value code{color:#fff;font-weight:700;letter-spacing:.01em}
.link-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.link-actions button{min-height:48px}
.link-private{display:flex;align-items:center;gap:7px;margin-top:11px;color:var(--muted);font-size:11px}
.link-private svg{width:14px;height:14px;color:var(--accent)}
.quick-grid button,.stats-grid article,.plan-card,.device,.secondary-row,.menu-list button,.reward-list>div,.payment-list button,.support-cta{
  border-radius:14px;background:#0b0b0d;border:1px solid rgba(255,255,255,.08);box-shadow:none
}
.quick-grid button:active,.secondary-row:active,.menu-list button:active,.plan-card button:active{transform:none}
.plan-card.featured{border-color:rgba(255,58,167,.45)}
.plan-label{background:var(--accent);color:#fff}
.plan-card button{background:#151518;color:#fff}
.plan-card.featured button{background:var(--accent)}
.profile-avatar{border-radius:18px}
.profile-devices-card{display:grid;gap:10px}
.profile-devices-card .capacity-progress{margin:0 0 2px}
.profile-devices-card .device-list{gap:8px}
.profile-devices-card .secondary-row{margin-top:0}
.support-field{display:grid;gap:8px;margin:0 0 10px;color:var(--muted);font-size:13px}
.support-field textarea{
  width:100%;resize:vertical;min-height:132px;max-height:280px;
  border:1px solid var(--line);border-radius:14px;background:#0b0b0d;
  color:var(--text);padding:13px 14px;outline:none;font:inherit
}
.support-field textarea:focus{border-color:rgba(255,58,167,.70)}
.support-field small{text-align:right;color:var(--muted)}
.support-note{margin-top:12px}
.legal-card h3{margin:18px 0 6px;font-size:15px}
.legal-card h3:first-child{margin-top:0}
.legal-card p{margin:0;color:var(--muted);font-size:13px}
.promo-field input{background:#0b0b0d;border-radius:14px}
.promo-field input:focus{border-color:rgba(255,58,167,.70)}
.promo-apply{background:#151518}
.bottom-nav{
  bottom:calc(8px + var(--safe-bottom));padding:6px;border-radius:16px;
  background:#0b0b0d;border:1px solid rgba(255,255,255,.09);box-shadow:none
}
.bottom-nav button{border-radius:11px}
.bottom-nav button.active{background:#17171a;color:var(--accent)}
.sheet{background:#101012;border-color:rgba(255,255,255,.09)}
.loader{background:#000}
.loader span{margin-top:72px;border-top-color:var(--accent)}
@media (max-width:370px){
  .app-shell{padding-inline:12px}
  .hero-stats,.quick-grid{grid-template-columns:1fr 1fr}
}


/* ===== Reference pass: black + MGN pink, iOS-like proportions ===== */
:root{
  --accent:#ff3aa7;
  --accent-strong:#ff2496;
  --accent-soft:rgba(255,58,167,.16);
  --surface:#0d0d10;
  --surface-elevated:#17171c;
  --text:#fff;
  --muted:#9e9eaa;
  --line:rgba(255,255,255,.085);
  --success:#30d978
}

html,body{background:#000}
body{letter-spacing:-.005em}
.app-shell{
  width:min(100%,430px);
  padding:calc(var(--safe-top) + 8px) 16px calc(92px + var(--safe-bottom));
  background:#000
}

/* Header: compact logo, avatar + two-line identity like reference */
.topbar{height:72px;gap:14px}
.brand{display:flex;align-items:center}
.brand img{
  width:76px;
  height:34px;
  object-fit:contain;
  object-position:left center;
  filter:none
}
.user-chip{gap:10px}
.user-chip-copy{display:grid;text-align:left!important;min-width:0}
.user-chip b{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",sans-serif;
  font-size:15px;
  line-height:1.1;
  font-weight:750;
  letter-spacing:-.02em;
  max-width:132px
}
.user-chip small{
  margin-top:3px;
  font-size:11px;
  line-height:1.15;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
  font-weight:650
}
.user-chip small.active{color:var(--success)}
.avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  border:0;
  background:#1a1a1f;
  font-size:16px;
  position:relative
}
.avatar::after{
  content:"";
  position:absolute;
  right:1px;
  bottom:1px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--success);
  border:2px solid #000
}

/* Home starts immediately with the tariff card */
.page[data-page="home"] .page-intro.compact{display:none}
.page[data-page="home"]{padding-top:8px}

/* Tariff card */
.hero-card{
  padding:22px 20px 20px;
  border-radius:22px;
  background:#0e0e11;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 14px 36px rgba(0,0,0,.26)
}
.hero-card .hero-head{display:none}
.hero-copy{margin:0 0 22px}
.hero-copy small{
  font-size:13px;
  color:#8f8f9a;
  letter-spacing:0
}
.hero-copy h2{
  margin:4px 0 0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",sans-serif;
  font-size:34px;
  line-height:1;
  font-weight:850;
  letter-spacing:-.045em;
  color:#fff
}
.hero-copy p{display:none}
.hero-stats{gap:0}
.hero-stats>div{
  min-height:62px;
  gap:12px;
  padding-right:14px
}
.hero-stats>div+div{
  padding-left:18px;
  padding-right:0
}
.hero-stats>div:first-child{border-right:1px solid rgba(255,255,255,.09)}
.hero-stats small{
  font-size:12px;
  line-height:1.1;
  color:#9a9aa5
}
.hero-stats b{
  display:block;
  margin-top:3px;
  font-size:19px;
  line-height:1.08;
  font-weight:780;
  letter-spacing:-.025em
}
.stat-icon{
  flex-basis:50px;
  width:50px;
  height:50px;
  border-radius:14px;
  background:#1a171d;
  color:var(--accent)
}
.stat-icon svg{width:24px;height:24px;stroke-width:2}
.hero-card>.progress,#homeSubscriptionAction{display:none}

/* Main bright VPN card */
.personal-link{
  margin-top:14px;
  padding:22px 18px 18px;
  border:0!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#ff3aab 0%,#ff2694 58%,#ec1785 100%)!important;
  box-shadow:0 14px 34px rgba(255,35,143,.16)!important;
  color:#fff
}
.link-heading{gap:13px}
.link-icon{
  flex-basis:52px;
  width:52px;
  height:52px;
  border-radius:15px;
  color:#fff!important;
  background:rgba(255,255,255,.13)!important
}
.link-icon svg{width:27px;height:27px;stroke-width:2.1}
.link-copy b{
  font-size:24px;
  line-height:1.05;
  font-weight:830;
  letter-spacing:-.035em;
  color:#fff
}
.link-copy span{
  margin-top:4px;
  color:rgba(255,255,255,.78)!important;
  font-size:13px;
  line-height:1.25
}
.personal-link .link-value{
  min-height:58px;
  margin:18px 0 10px;
  padding:0 14px 0 16px;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:16px;
  background:#151519!important
}
.personal-link .link-value code{
  color:#fff!important;
  font-size:16px!important;
  font-weight:720!important;
  letter-spacing:-.015em!important
}
.link-copy-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:#24242a;
  color:#fff
}
.link-copy-icon svg{width:21px;height:21px}
.link-actions{gap:9px;margin-top:0}
.link-primary-action{
  min-height:54px!important;
  border:0!important;
  border-radius:15px!important;
  background:#fff!important;
  color:#111!important;
  font-size:16px;
  font-weight:800
}
.link-primary-action svg{width:21px;height:21px}
.link-secondary-action{
  width:100%;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:15px;
  background:rgba(0,0,0,.04);
  color:#fff;
  font-weight:750
}
.link-secondary-action svg{width:20px;height:20px}
.link-private{
  justify-content:center;
  margin-top:11px;
  color:rgba(255,255,255,.68)!important;
  font-size:10px
}
.link-private svg{color:#fff!important}

/* Quick tiles */
.section-title{margin:20px 2px 10px}
.section-title h3{
  font-size:16px;
  font-weight:760;
  letter-spacing:-.02em
}
.quick-grid{gap:10px}
.quick-grid button{
  min-height:102px;
  padding:14px;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:18px!important;
  background:#0e0e11!important;
  box-shadow:0 10px 22px rgba(0,0,0,.16)!important
}
.quick-grid button>span{
  width:42px;
  height:42px;
  border-radius:13px;
  background:#1a171d;
  color:var(--accent)
}
.quick-grid button>span svg{width:23px;height:23px;stroke-width:2}
.quick-grid b{
  margin-top:3px;
  font-size:15px;
  line-height:1.1;
  font-weight:760;
  letter-spacing:-.02em
}
.quick-grid small{
  font-size:11px;
  line-height:1.25;
  color:#8f8f9a
}

/* Shared pages */
.page-intro h1{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",sans-serif;
  font-weight:820;
  letter-spacing:-.04em
}
.eyebrow,.page-section-head small{
  letter-spacing:.09em;
  font-weight:700
}
.icon-box,.device-symbol{
  background:#1a171d!important;
  color:var(--accent)!important
}
.plan-card.featured{border-color:rgba(255,58,167,.42)!important}
.plan-label{background:var(--accent)!important;color:#fff!important}
.plan-card.featured button,.sheet-primary{background:var(--accent)!important;color:#fff!important}
.promo-field input:focus,.support-field textarea:focus{border-color:rgba(255,58,167,.65)!important}

/* Bottom nav: glass-black with pink active icon + underline */
.bottom-nav{
  width:min(calc(100% - 22px),408px);
  bottom:calc(8px + var(--safe-bottom));
  padding:7px 8px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:rgba(14,14,17,.96);
  box-shadow:0 10px 30px rgba(0,0,0,.38)
}
.bottom-nav button{
  min-height:54px;
  position:relative;
  border-radius:14px;
  background:transparent!important;
  color:#888894;
  gap:3px
}
.bottom-nav button svg{
  width:22px;
  height:22px;
  stroke-width:2
}
.bottom-nav button small{
  font-size:10px;
  font-weight:650;
  letter-spacing:0
}
.bottom-nav button.active{color:var(--accent)!important}
.bottom-nav button.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-3px;
  width:28px;
  height:4px;
  border-radius:99px;
  transform:translateX(-50%);
  background:var(--accent);
  box-shadow:0 0 10px rgba(255,58,167,.35)
}

/* Smaller loader/brand mark */
.loader img{width:82px!important}
.loader span{border-top-color:var(--accent)!important}

/* No neon/AI-looking motion */
.quick-grid button,.plan-card,.secondary-row,.menu-list button,.personal-link,.hero-card{
  transition:none!important
}

@media (max-width:370px){
  .brand img{width:70px}
  .user-chip b{max-width:105px}
  .hero-copy h2{font-size:30px}
  .link-copy b{font-size:21px}
  .hero-stats b{font-size:17px}
}


/* Final reference cleanup: no neon/glow, functional inline copy, clean device summary */
.status.active i{box-shadow:none!important}
.personal-link{box-shadow:0 12px 28px rgba(0,0,0,.24)!important}
.bottom-nav button.active::after{box-shadow:none!important}
.link-copy-icon{
  flex:0 0 38px;
  padding:0;
  border:0;
  min-height:38px;
  cursor:pointer
}
.link-copy-icon:active{opacity:.72}
.device-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
  padding:0 2px;
  color:var(--muted);
  font-size:12px
}
.device-summary b{
  color:#fff;
  font-size:14px;
  font-weight:760
}


/* ===== Motion pass: minimal iOS-like, fast, tactile ===== */
:root{
  --ease-out:cubic-bezier(.22,.8,.28,1);
  --ease-spring:cubic-bezier(.2,.9,.25,1.15);
  --motion-fast:150ms;
  --motion-med:260ms
}

/* Flatter, cleaner hierarchy */
.hero-card,
.quick-grid button,
.current-card,
.capacity-card,
.profile-hero,
.plan-card,
.device,
.secondary-row,
.menu-list button,
.referral-card,
.balance-card,
.legal-card{
  box-shadow:none!important
}
.hero-card,
.quick-grid button,
.current-card,
.capacity-card,
.profile-hero,
.plan-card,
.device,
.secondary-row,
.menu-list button{
  border-color:rgba(255,255,255,.065)!important
}
.personal-link{
  box-shadow:0 8px 24px rgba(0,0,0,.18)!important
}

/* Re-enable only deliberate micro-transitions */
.quick-grid button,
.plan-card,
.secondary-row,
.menu-list button,
.personal-link,
.hero-card{
  transition:
    transform var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    opacity var(--motion-fast) ease!important
}
button,.link-copy-icon,.bottom-nav button{
  transition:
    transform var(--motion-fast) var(--ease-out),
    opacity var(--motion-fast) ease,
    color var(--motion-fast) ease,
    background-color var(--motion-fast) ease!important
}
svg{
  transition:
    transform var(--motion-med) var(--ease-spring),
    stroke var(--motion-fast) ease!important
}

/* Press feedback: tiny and physical, never bouncy/cartoonish */
button.pressing,
[data-nav].pressing,
.plan-card.pressing{
  transform:scale(.975)!important
}
.quick-grid button.pressing{transform:scale(.965)!important}
.link-copy-icon.pressing{transform:scale(.91)!important}
.personal-link button.pressing{transform:scale(.985)!important}

/* First paint + page navigation stagger */
.motion-in{
  opacity:0;
  transform:translate3d(0,10px,0) scale(.992);
  animation:mgn-enter 430ms var(--ease-out) forwards;
  animation-delay:calc(var(--motion-index,0) * 34ms);
  will-change:transform,opacity
}
.topbar-in{
  opacity:0;
  transform:translate3d(0,-8px,0);
  animation:mgn-header 390ms var(--ease-out) 40ms forwards
}
.nav-in{
  opacity:0;
  transform:translate(-50%,12px);
  animation:mgn-nav 440ms var(--ease-out) 120ms forwards
}

@keyframes mgn-enter{
  from{opacity:0;transform:translate3d(0,10px,0) scale(.992)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes mgn-header{
  from{opacity:0;transform:translate3d(0,-8px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes mgn-nav{
  from{opacity:0;transform:translate(-50%,12px)}
  to{opacity:1;transform:translate(-50%,0)}
}

/* Active bottom-nav feels native */
.bottom-nav button.active svg{transform:translateY(-1px) scale(1.08)}
.nav-pop svg{animation:nav-icon-pop 320ms var(--ease-spring)}
@keyframes nav-icon-pop{
  0%{transform:scale(.9)}
  58%{transform:scale(1.13)}
  100%{transform:translateY(-1px) scale(1.08)}
}
.bottom-nav button.active::after{
  transition:width 220ms var(--ease-out),opacity 160ms ease!important
}

/* Pink card: one restrained reveal, no infinite glow */
.personal-link.motion-in{
  animation:mgn-link-enter 500ms var(--ease-out) forwards;
  animation-delay:calc(var(--motion-index,0) * 34ms)
}
@keyframes mgn-link-enter{
  0%{opacity:0;transform:translate3d(0,13px,0) scale(.982)}
  68%{opacity:1;transform:translate3d(0,-1px,0) scale(1.004)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
.personal-link.motion-in .link-icon svg{
  animation:link-icon-draw 480ms var(--ease-spring) 120ms both
}
@keyframes link-icon-draw{
  0%{opacity:.2;transform:rotate(-12deg) scale(.72)}
  100%{opacity:1;transform:rotate(0) scale(1)}
}

/* Statistics feel alive without flashy counters */
.hero-card.motion-in .stat-icon{
  animation:stat-icon-in 420ms var(--ease-spring) both
}
.hero-card.motion-in .hero-stats>div:nth-child(2) .stat-icon{animation-delay:55ms}
@keyframes stat-icon-in{
  from{opacity:0;transform:scale(.78)}
  to{opacity:1;transform:scale(1)}
}
.progress span{transition:width 520ms var(--ease-out)!important}

/* Mini pop for explicit actions */
.micro-pop{animation:micro-pop 360ms var(--ease-spring)}
@keyframes micro-pop{
  0%{transform:scale(1)}
  45%{transform:scale(.965)}
  100%{transform:scale(1)}
}

/* Sheets and toast */
.sheet:not([hidden]){
  animation:sheet-in 340ms var(--ease-out) both
}
.sheet-backdrop:not([hidden]){
  animation:backdrop-in 220ms ease both
}
@keyframes sheet-in{
  from{opacity:0;transform:translate(-50%,18px)}
  to{opacity:1;transform:translate(-50%,0)}
}
@keyframes backdrop-in{
  from{opacity:0}
  to{opacity:1}
}
.toast{
  transition:
    opacity 180ms ease,
    transform 220ms var(--ease-out)!important
}

/* Inputs: subtle focus instead of glow */
.promo-field input,
.support-field textarea{
  transition:border-color 160ms ease,background-color 160ms ease!important
}
.promo-field input:focus,
.support-field textarea:focus{
  box-shadow:none!important;
  background:#101014!important
}

/* Copy icon gives immediate visual acknowledgment */
.link-copy-icon:active svg{transform:scale(.82) rotate(-4deg)}
.link-primary-action:active svg,
.link-secondary-action:active svg{transform:scale(.9)}

/* Respect accessibility and low-power preferences */
@media (prefers-reduced-motion:reduce){
  .motion-in,.topbar-in,.nav-in,.nav-pop,.micro-pop,
  .personal-link.motion-in,.personal-link.motion-in .link-icon svg,
  .hero-card.motion-in .stat-icon,.sheet:not([hidden]),.sheet-backdrop:not([hidden]){
    animation:none!important;
    opacity:1!important;
    transform:none!important
  }
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important
  }
}


/* ===== Compact pass: fit more on one phone screen ===== */
.app-shell{
  padding:calc(var(--safe-top) + 4px) 12px calc(78px + var(--safe-bottom))!important
}
.topbar{
  height:56px!important;
  gap:10px!important
}
.brand img{
  width:68px!important;
  height:30px!important
}
.avatar{
  width:38px!important;
  height:38px!important
}
.avatar::after{
  width:8px!important;
  height:8px!important
}
.user-chip{gap:8px!important}
.user-chip b{font-size:13px!important;max-width:116px!important}
.user-chip small{font-size:10px!important;margin-top:2px!important}

.page[data-page="home"]{padding-top:4px!important}
.page{padding-bottom:10px!important}

.hero-card{
  padding:16px 15px 15px!important;
  border-radius:17px!important
}
.hero-copy{margin:0 0 14px!important}
.hero-copy small{font-size:11px!important}
.hero-copy h2{
  margin-top:3px!important;
  font-size:27px!important;
  letter-spacing:-.04em!important
}
.hero-stats>div{
  min-height:48px!important;
  gap:9px!important;
  padding-right:10px!important
}
.hero-stats>div+div{padding-left:12px!important}
.hero-stats small{font-size:10px!important}
.hero-stats b{font-size:16px!important;margin-top:2px!important}
.stat-icon{
  flex-basis:38px!important;
  width:38px!important;
  height:38px!important;
  border-radius:11px!important
}
.stat-icon svg{width:19px!important;height:19px!important}

.personal-link{
  margin-top:10px!important;
  padding:16px 14px 13px!important;
  border-radius:18px!important
}
.link-heading{gap:10px!important}
.link-icon{
  flex-basis:42px!important;
  width:42px!important;
  height:42px!important;
  border-radius:12px!important
}
.link-icon svg{width:21px!important;height:21px!important}
.link-copy b{font-size:19px!important}
.link-copy span{font-size:11px!important;margin-top:2px!important}
.personal-link .link-value{
  min-height:46px!important;
  margin:12px 0 8px!important;
  padding:0 8px 0 12px!important;
  border-radius:13px!important
}
.personal-link .link-value code{font-size:13px!important}
.link-copy-icon{
  width:32px!important;
  height:32px!important;
  min-height:32px!important;
  flex-basis:32px!important;
  border-radius:9px!important
}
.link-copy-icon svg{width:17px!important;height:17px!important}
.link-actions{gap:7px!important}
.link-actions button{
  min-height:43px!important;
  font-size:13px!important;
  border-radius:13px!important
}
.link-private{font-size:9px!important;margin-top:8px!important}

.section-title{margin:14px 2px 7px!important}
.section-title h3{font-size:14px!important}
.quick-grid{gap:8px!important}
.quick-grid button{
  min-height:78px!important;
  padding:11px!important;
  border-radius:15px!important;
  gap:4px!important
}
.quick-grid button>span{
  width:33px!important;
  height:33px!important;
  border-radius:10px!important
}
.quick-grid button>span svg{width:18px!important;height:18px!important}
.quick-grid b{font-size:13px!important;margin-top:1px!important}
.quick-grid small{font-size:10px!important;line-height:1.15!important}

.notice{
  margin-top:9px!important;
  padding:11px!important;
  border-radius:14px!important
}
.notice p{font-size:10px!important}
.notice button{min-height:38px!important;font-size:11px!important}

.page-intro{
  margin:11px 1px 9px!important
}
.page-intro h1{font-size:22px!important}
.page-intro p{font-size:12px!important;margin-top:5px!important}
.page-section-head{
  margin:15px 1px 7px!important
}
.page-section-head h3{font-size:15px!important}
.page-section-head small,.eyebrow{font-size:9px!important}

.current-card,.capacity-card,.profile-hero,.referral-card,.balance-card,.legal-card{
  padding:13px!important;
  border-radius:15px!important
}
.profile-avatar{
  width:54px!important;
  height:54px!important;
  border-radius:16px!important
}
.profile-meta h1{font-size:20px!important;margin:1px 0!important}
.profile-meta p{font-size:11px!important;margin-bottom:5px!important}
.profile-plan-chip{padding:5px 8px!important;font-size:10px!important}
.profile-stats{margin:8px 0!important}
.stats-grid{gap:7px!important}
.stats-grid article{
  padding:9px 6px!important;
  border-radius:13px!important
}
.stats-grid article svg{width:17px!important;height:17px!important}
.stats-grid small{font-size:9px!important}
.stats-grid b{font-size:13px!important}

.device,.secondary-row,.menu-list button,.reward-list>div,.payment-list button{
  padding:10px!important;
  border-radius:13px!important
}
.icon-box,.device-symbol{
  width:35px!important;
  height:35px!important;
  flex-basis:35px!important;
  border-radius:10px!important
}
.icon-box svg,.device-symbol svg{width:18px!important;height:18px!important}
.secondary-row b,.menu-list b,.device-copy b{font-size:12px!important}
.secondary-row small,.menu-list small,.device-copy small{font-size:9px!important}

.plan-card{
  padding:11px!important;
  gap:8px!important;
  border-radius:14px!important
}
.plan-info h3{font-size:14px!important}
.plan-info p,.plan-info em,.plan-price small{font-size:10px!important}
.plan-price b{font-size:14px!important}
.plan-card button{min-height:40px!important;font-size:12px!important}

.bottom-nav{
  width:min(calc(100% - 18px),412px)!important;
  bottom:calc(5px + var(--safe-bottom))!important;
  padding:4px 6px 5px!important;
  border-radius:17px!important
}
.bottom-nav button{
  min-height:47px!important;
  border-radius:11px!important;
  gap:1px!important
}
.bottom-nav button svg{width:19px!important;height:19px!important}
.bottom-nav button small{font-size:9px!important}
.bottom-nav button.active::after{
  width:22px!important;
  height:3px!important;
  bottom:-1px!important
}

.sheet{
  padding:10px 14px calc(14px + var(--safe-bottom))!important;
  border-radius:19px 19px 0 0!important
}
.sheet h2{font-size:20px!important}
.sheet>p{font-size:11px!important}

/* Keep motion restrained on compact UI */
.motion-in{
  animation-duration:340ms!important;
  animation-delay:calc(var(--motion-index,0) * 24ms)!important
}