@import url('./button-theme.css');
@font-face{font-family:Inter;src:url('assets/InterVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--brand:#ff4a4a;--ink:rgba(255,255,255,0.96);--muted:rgba(255,255,255,0.509);--line:rgba(255,255,255,.09)}
.membership-profile,.membership-summary{display:flex;align-items:center;gap:14px;padding:20px 16px;border-radius:20px;background:rgba(30,30,32,0.82);margin:16px 0}.membership-profile h2{font-size:17px}.membership-profile a{display:flex;gap:6px;align-items:center;margin-top:10px;background:#3a1c1e;padding:5px 12px;border-radius:99px;font-size:12px;color:rgba(255,255,255,0.509)}.membership-profile a svg{width:14px;height:14px}.membership-summary>div{min-width:0}.membership-summary-arrow{display:grid;place-items:center;margin-left:auto;width:32px;height:32px;color:rgba(255,255,255,0.509);flex-shrink:0}.membership-summary-arrow svg{width:20px;height:20px}.membership-summary h2{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:16px}.membership-plan-status{font-size:11px;padding:4px 9px;border-radius:999px;font-weight:650;line-height:1.2}.membership-summary p{font-size:12px;margin-top:10px;overflow-wrap:anywhere}.membership-summary-monthly .membership-plan-status{background:#3a1c1e;color:#d83434}.membership-summary-yearly{background:linear-gradient(135deg,rgba(30,30,32,0.0092),rgba(58,28,30,0.9))}.membership-summary-yearly .membership-icon{background:#3a1c1e;color:rgba(255,255,255,0.96)}.membership-summary-yearly .membership-plan-status{background:#141416;color:#fff}.membership-summary-expired .membership-icon{background:#242427;color:rgba(255,255,255,0.431)}.membership-summary-expired .membership-plan-status{background:#4d1920;color:#ed6e82}.membership-summary-inactive .membership-icon{background:#242427;color:rgba(255,255,255,0.509)}.membership-summary-inactive .membership-plan-status{background:#242427;color:rgba(255,255,255,0.588)}.membership-menu{margin-top:28px;padding:0 20px;border-radius:20px;background:rgba(30,30,32,0.82)}.membership-menu a{display:flex;align-items:center;gap:16px;padding:23px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:15px}.membership-menu a:last-child{border:0}.membership-menu a>svg:last-child{margin-left:auto;width:18px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(480px,100%);display:flex;justify-content:space-around;background:rgba(30,30,32,0.92);border-top:1px solid rgba(255,255,255,.09);padding:10px 12px max(12px,env(safe-area-inset-bottom));z-index:5}.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;padding:8px 18px;border-radius:99px;color:rgba(255,255,255,0.509)}.bottom-nav a[aria-current]{background:#3a1c1e;color:#d83434}#app[data-page=me]{padding-bottom:110px}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 95% 10%,#3a1c1e,transparent 45%),radial-gradient(ellipse at 5% 80%,#3a1c1e,transparent 40%),#3a1c1e;color:var(--ink);font-family:Inter,sans-serif}body:has(#app[data-page=account]),body:has(#app[data-page=account-settings]){background:#3a1c1e url('assets/account-settings-bg-v3.png') center top/cover fixed no-repeat}button,a{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--brand);outline-offset:4px}::selection{background:#5a2428;color:var(--ink)}#app{max-width:480px;margin:auto;padding:max(20px,env(safe-area-inset-top)) 20px calc(36px + env(safe-area-inset-bottom));min-height:100dvh}svg{width:24px;height:24px;flex-shrink:0}h1,h2,p{margin:0}h1{font-size:26px;line-height:1.25}h2{font-size:23px;line-height:1.25}p{color:var(--muted);line-height:1.5}.navhead{display:flex;align-items:center;justify-content:space-between;margin:4px 0 22px;gap:12px}.navhead h1{font-size:20px;font-weight:650}.round,.header-spacer{width:44px;height:44px;display:grid;place-items:center}.round{border:0;background:transparent;border-radius:50%;color:var(--ink)}
.membership-card{position:relative;overflow:hidden;isolation:isolate;padding:22px 16px 20px;min-height:185px;border-radius:20px;background:linear-gradient(125deg,#3a1c1e,#1e1e20 45%,#3a1c1e);border:1px solid rgba(255,255,255,.09)}.membership-card::before,.membership-card::after{content:'';position:absolute;z-index:-1;width:140%;height:130px;left:-18%;bottom:-58px;background:rgba(30,30,32,0.45);border-radius:50%;transform:rotate(-18deg)}.membership-card::after{left:25%;bottom:34px;background:rgba(30,30,32,0.36)}.membership-identity{display:flex;gap:14px;align-items:center;position:relative;z-index:1}.membership-identity h2{font-size:23px;margin-bottom:8px}.membership-crown-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#3a1c1e;color:#ff4a4a;flex-shrink:0}.membership-crown-icon svg{width:34px;height:34px}.membership-status{display:inline-block;border-radius:999px;background:#3a1c1e;color:#d83434;font-size:16px;font-weight:650;padding:4px 14px}.membership-crown{position:absolute;right:10px;top:44px;width:100px;height:104px;object-fit:contain;pointer-events:none}.membership-facts{position:relative;z-index:1;margin-top:22px}.membership-facts p{font-size:14px;margin-top:5px}.membership-facts p:first-child{color:var(--ink)}.yearly.membership-card{border-color:#ff4a4a}.yearly .membership-status{background:linear-gradient(100deg,#1e1e20,#4d3f19);border:1px solid #735d26}.yearly .membership-crown-icon{border:1px solid #735d26}.expired .membership-crown{filter:grayscale(1);opacity:.65}.expired .membership-status{background:#4d1920;color:#e37788}.expired .membership-crown-icon{background:#242427;color:rgba(255,255,255,0.431)}
.membership-warning{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:12px;padding:14px 16px;border-radius:16px;background:#4d1920;color:#e77388}.membership-warning-icon{display:grid;place-items:center;background:#ef5b6c;border-radius:50%;width:38px;height:38px;color:var(--ink)}.membership-warning-copy{display:flex;min-width:0;flex-direction:column;gap:2px}.membership-warning strong{font-size:16px;line-height:1.35}.membership-warning-copy small{font-size:12px;line-height:1.35;color:inherit}.membership-warning-action{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:13px;font-weight:650}.membership-warning-action svg{width:17px;height:17px}.membership-warning.empty{background:#4d1920;color:#e77388}.membership-warning.empty .membership-warning-icon{background:#ef5b6c;color:white}
.membership-plans{margin-top:28px}.membership-plans>p{margin:7px 0 20px;font-size:15px}.membership-option{position:relative;display:grid;grid-template-columns:22px 46px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:22px 12px;text-align:left;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(30,30,32,0.82);color:var(--ink);margin-top:14px;min-height:92px}.membership-option.selected{border:1.5px solid var(--brand);background:linear-gradient(140deg,#1e1e20,#3a1c1e)}.membership-option:hover{background:#3a1c1e}.membership-radio{width:22px;height:22px;border:2px solid #98a2b3;border-radius:50%;display:grid;place-items:center}.selected .membership-radio{border-color:#ff4a4a}.selected .membership-radio::after{content:'';width:12px;height:12px;background:var(--brand);border-radius:50%}.membership-icon{display:grid;place-items:center;background:#3a1c1e;color:#ff4a4a;border-radius:50%;width:46px;height:46px}.membership-icon svg{width:27px;height:27px}.membership-option-copy strong{font-size:16px;font-weight:650;line-height:1.3;display:block}.membership-option-copy small{display:block;margin-top:5px;color:var(--muted);font-size:14px;line-height:1.4}.membership-price{display:flex;flex-direction:column;align-items:flex-end;min-width:60px}.membership-price strong{font-size:22px;font-weight:650;color:#d83434;font-variant-numeric:tabular-nums}.membership-price small{color:var(--muted);margin-top:3px}.membership-best{position:absolute;right:16px;top:-12px;border-radius:999px;background:var(--brand);color:var(--ink);font-size:12px;font-weight:650;padding:5px 12px}.membership-value{grid-column:3/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}.membership-value small{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:5px 10px;border-radius:999px;background:#3a1c1e;color:#d83434;font-size:12px;font-weight:600;line-height:1.25}.membership-value small:last-child{background:#3a1c1e;color:#d83434}.membership-value svg{width:14px;height:14px}
.membership-cta{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;border:0;border-radius:999px;min-height:54px;margin-top:22px;padding:12px 18px;background:var(--u-button);color:#fff;font-size:18px;font-weight:650;box-shadow:var(--u-button-shadow);opacity:1}.membership-billing{display:flex;align-items:center;gap:18px;margin-top:24px;padding:20px 18px;background:rgba(30,30,32,0.82);border-radius:20px;font-size:18px;border:1px solid var(--line)}.membership-billing>svg:first-child{width:30px;height:30px}.membership-billing>svg:last-child{margin-left:auto}.membership-note{font-size:13px;text-align:center;margin:14px 6px}.membership-links{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:18px;font-size:12px;color:var(--muted)}.membership-links button{border:0;background:none;color:inherit;padding:6px;min-height:36px}
.membership-login{min-height:65dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;text-align:center}.membership-login p{font-size:15px;max-width:32ch}.secondary{border:1px solid var(--line);background:#1e1e20;color:var(--ink);border-radius:12px;padding:12px 20px;min-height:44px}.membership-history article{display:grid;grid-template-columns:1fr auto;gap:8px;padding:20px 0;border-bottom:1px solid var(--line)}.membership-history article strong{overflow-wrap:anywhere}.membership-history article span{font-size:13px;color:var(--muted)}dialog{color:var(--ink);max-width:420px;border:0;border-radius:24px;padding:30px;background:#1e1e20}dialog::backdrop{background:rgba(20,20,22,0.4)}dialog p{margin:14px 0}.spinner{width:32px;height:32px;border:3px solid #5a2428;border-top-color:var(--brand);border-radius:50%;animation:member-spin 1s linear infinite}@keyframes member-spin{to{transform:rotate(360deg)}}
.membership-mode,.membership-test-note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:#2a1a1c;color:var(--ink);font-size:13px;line-height:1.45}.membership-mode{margin:4px 0 14px;justify-content:space-between}.membership-mode span,.membership-test-note span{color:var(--muted)}.membership-test-note{margin-top:14px;text-align:left}.membership-test-note strong{white-space:nowrap;color:#d83434}
.membership-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:11px 14px;border-radius:14px;background:#2a1a1c;color:var(--ink);font-size:13px}.membership-preview strong{color:#d83434}.membership-preview span{text-align:right;color:var(--muted)}
.account-management{display:flex;min-height:calc(100dvh - 100px);flex-direction:column;gap:16px}.account-identity,.account-action,.account-danger-row{width:100%;display:flex;align-items:center;gap:18px;border:0;border-radius:16px;background:rgba(30,30,32,0.86);padding:20px;text-align:left;color:var(--ink);box-shadow:0 8px 28px rgba(237,59,59,0.08)}.account-identity{align-items:flex-start;padding-block:24px}.account-identity>div,.account-action>span:nth-child(2),.account-danger-row>span:nth-child(2){min-width:0;display:flex;flex:1;flex-direction:column}.account-identity h2,.account-action strong,.account-danger-row strong{font-size:18px;line-height:1.35}.account-identity strong{margin-top:8px;font-size:16px;color:rgba(255,255,255,0.403);font-weight:550}.account-identity p{margin-top:12px;font-size:14px;max-width:30ch}.account-action small,.account-danger-row small{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.45}.account-action>svg:last-child,.account-danger-row>svg:last-child{width:20px;color:rgba(255,255,255,0.431)}.account-tile{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;flex:0 0 auto}.account-tile svg{width:30px;height:30px}.account-tile.apple{background:#3a1c1e;color:rgba(255,255,255,0.96)}.account-tile.signout{background:#4d1924;color:#df4866}.account-tile.settings{background:#2a1a1c;color:#ff7a7a}.account-tile.delete{background:#4d1920;color:#e67588}.account-management footer{margin:auto 0 24px;display:flex;flex-direction:column;align-items:center;color:rgba(255,255,255,0.358)}.account-management footer strong{font-size:18px}.account-management footer span{margin-top:5px;font-size:13px}.account-settings-copy{margin:8px 2px 22px}.account-settings-copy h2{font-size:19px}.account-settings-copy p{margin-top:8px;font-size:14px}.account-danger-row strong{color:#ed6e82}.membership-confirm{text-align:center}.membership-dialog-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;border-radius:16px;background:#2a1a1c;color:#ff7a7a}.membership-dialog-icon.danger{background:#4d1920;color:#e67588}.membership-confirm h2{font-size:22px}.membership-confirm p{font-size:14px;line-height:1.55}.membership-dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.membership-dialog-actions .membership-cta{margin:0;border-radius:12px;min-height:48px;font-size:15px}.danger-button{border:0;border-radius:12px;background:#c8334c;color:white;font-weight:650;min-height:48px}.account-action:hover,.account-danger-row:hover{background:#3a1c1e}
@media(max-width:380px){#app{padding-inline:16px}.membership-option{grid-template-columns:20px 36px minmax(0,1fr) auto;gap:7px;padding-inline:10px}.membership-icon{width:36px;height:36px}.membership-option-copy strong{font-size:14px}.membership-option-copy small{font-size:12px}.membership-price strong{font-size:19px}.membership-value{grid-column:2/-1;margin-top:5px}.membership-value small{font-size:11px}.membership-warning{grid-template-columns:34px minmax(0,1fr);padding:13px}.membership-warning-icon{width:34px;height:34px}.membership-warning-action{grid-column:2;justify-self:start}.membership-crown{width:85px;right:4px}.membership-facts p{font-size:12px}.membership-identity h2{font-size:21px}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}
.membership-state-switcher{margin:0 0 16px;padding:14px;border-radius:18px;background:rgba(30,30,32,0.86);box-shadow:0 4px 18px rgba(0,0,0,0.36)}
.membership-state-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:3px 12px;margin-bottom:11px}
.membership-state-heading strong{font-size:14px;line-height:20px;color:var(--ink)}
.membership-state-heading span{font-size:11px;line-height:16px;color:var(--muted)}
.membership-state-options{display:flex;flex-wrap:wrap;gap:8px}
.membership-state-options button{min-height:36px;padding:7px 11px;border:1px solid #5a2428;border-radius:10px;background:#3a1c1e;color:var(--ink);font-size:12px;font-weight:600;line-height:18px}
.membership-state-options button[aria-pressed=true]{border-color:#ff4a4a;background:#3a1c1e;color:#d83434}
.membership-state-options button:focus-visible,.membership-state-reset:focus-visible{outline:2px solid #ff4a4a;outline-offset:2px}
.membership-state-reset{display:block;margin:10px 0 0;padding:4px 0;border:0;background:transparent;color:#d83434;font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
body:has(#app[data-page=subscription]){background:#3a1c1e url('assets/membership-detail-bg.jpg') center top/cover fixed no-repeat}
.membership-card .membership-avatar{display:block;width:62px;height:62px;flex:0 0 62px;object-fit:contain}
.membership-card .membership-status.is-active{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:4px 12px;border:0;border-radius:999px;background:#3a1c1e;color:#d83434;font-size:16px;font-weight:650;line-height:24px}
.membership-card .membership-status-gem{display:block;width:18px;height:18px;object-fit:contain;flex:0 0 18px}
.membership-card.monthly,.membership-card.yearly{border:1px solid rgba(255,74,74,0.34);background:radial-gradient(ellipse at 92% 10%,rgba(58,28,30,0.5),transparent 52%),linear-gradient(145deg,rgba(30,30,32,0.98),rgba(58,28,30,0.94) 55%,rgba(58,28,30,0.86));box-shadow:0 8px 22px rgba(237,59,59,0.09)}
.membership-card.yearly{border-color:rgba(255,74,74,0.46);background:radial-gradient(ellipse at 94% 5%,rgba(58,28,30,0.58),transparent 54%),linear-gradient(145deg,#1e1e20,rgba(58,28,30,0.96) 54%,rgba(58,28,30,0.92));box-shadow:0 9px 24px rgba(237,59,59,0.11)}
.membership-card.monthly::before,.membership-card.yearly::before{left:-16%;bottom:-74px;width:132%;height:128px;transform:rotate(-9deg);background:rgba(30,30,32,0.54)}
.membership-card.monthly::after,.membership-card.yearly::after{left:42%;bottom:-92px;width:90%;height:142px;transform:rotate(-14deg);background:rgba(58,28,30,0.42)}
.membership-card .membership-card-crown{position:absolute;z-index:0;pointer-events:none;object-fit:contain}
.membership-card .membership-card-crown-yearly{width:146px;height:142px;right:-27px;bottom:-8px;opacity:.68}
.membership-card .membership-card-crown-monthly{width:158px;height:116px;right:-32px;bottom:-2px;opacity:.22}
.membership-card .membership-identity,.membership-card .membership-facts{position:relative;z-index:2}
.membership-card.monthly,.membership-card.yearly{border:0;border-radius:20px;background:#1e1e20 url('assets/membership-card-surface-monthly.jpg') center 40%/115% 150% no-repeat;box-shadow:0 6px 16px rgba(237,59,59,0.08)}
.membership-card.yearly{background-image:url('assets/membership-card-surface-yearly.jpg');box-shadow:0 7px 19px rgba(237,59,59,0.09)}
.membership-card.monthly::before,.membership-card.monthly::after,.membership-card.yearly::before,.membership-card.yearly::after{content:none}
.membership-card.monthly::after,.membership-card.yearly::after{content:'';position:absolute;z-index:0;left:auto;right:-12%;bottom:-37px;width:75%;height:58px;border-radius:50%;transform:rotate(-12deg);background:rgba(58,28,30,0.42);pointer-events:none}
/* Preserve each source aspect ratio; the transparent margins extend past the
   clipped card edge so the visible crown meets the edge and lower surface. */
.membership-card .membership-card-crown-yearly{width:145.7px;height:auto;object-fit:contain;right:-6px;bottom:13.16px;opacity:.72}
.membership-card.yearly{background-size:115% 220%;background-position:center 35%}
.membership-card.yearly::after{right:-6px;bottom:0;left:auto;width:155px;height:160px;transform:none;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1292 1334'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%233a1c1e'/%3E%3Cstop offset='1' stop-color='%232a1214'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 1334 L400 1170 C640 1100 930 1000 1250 1020 L1292 1020 V1334 Z' fill='url(%23g)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.membership-card .membership-card-crown-monthly{width:185px;height:auto;object-fit:contain;right:-38px;bottom:8px;opacity:.40}
.membership-card.monthly::after{right:-38px;bottom:1px;width:185px;height:123.34px;border-radius:0;transform:none;background:url('assets/membership-card-crown-monthly.png') center/contain no-repeat;clip-path:inset(78% 0 0 0);opacity:.18;filter:saturate(1.25)}
.membership-card.monthly{background-image:linear-gradient(rgba(30,30,32,0.22),rgba(30,30,32,0.22)),url('assets/membership-card-surface-monthly.jpg');box-shadow:0 2px 5px rgba(237,59,59,0.1),0 6px 12px rgba(237,59,59,0.04)}
.membership-card.yearly .membership-avatar{filter:drop-shadow(0 5px 5px rgba(237,59,59,0.16))}
.membership-card .membership-status.is-active{gap:5px;min-height:25px;padding:3px 9px;font-size:12px;line-height:18px}
.membership-card .membership-status-gem{width:14px;height:14px;flex-basis:14px}

/* Keep the two purchase options visually parallel and remove the decorative
   icon from the value badge. */
.membership-option-copy small{min-height:38px;line-height:19px}
.membership-value svg{display:none}
.membership-warning{grid-template-columns:24px minmax(0,1fr) auto;gap:8px;padding:6px 10px}
.membership-warning{padding:8px 10px}
.membership-warning-icon{width:24px;height:24px}
.membership-warning-icon svg{width:14px;height:14px}
.membership-warning-copy small{font-size:11px;line-height:16px}
.membership-warning-copy{gap:0}
.membership-warning strong{line-height:18px}
.membership-warning-copy small{line-height:14px}
.membership-warning.empty .membership-warning-copy small{white-space:nowrap;font-size:12px;letter-spacing:-.03em}

/* Membership purchase palette: one LifeTag cyan-green family with clear depth. */
.membership-plans{--plan-accent:#d83434;--plan-soft:#3a1c1e;--plan-soft-strong:#3a1c1e;--plan-border:#3a1c1e}
.membership-option{border-color:var(--plan-border);background:rgba(30,30,32,0.88)}
.membership-option:hover{background:var(--plan-soft)}
.membership-option.selected{border:1px solid #ff4a4a;background:rgba(30,30,32,0.88)}
.membership-radio{border-color:#98a2b3}
.selected .membership-radio{border-color:var(--plan-accent)}
.selected .membership-radio::after{background:var(--plan-accent)}
.membership-plans .membership-icon{background:var(--plan-soft);color:var(--plan-accent)}
.membership-price strong{color:var(--plan-accent)}
.membership-best{background:var(--u-button);color:#fff;box-shadow:none}
.membership-value{grid-column:2/-1;flex-wrap:nowrap;gap:8px}
.membership-value small{white-space:nowrap}
.membership-value small{background:#3a1c1e;color:#d83434}
.membership-value small:last-child{background:var(--plan-soft-strong);color:#d83434}
.membership-plans .membership-icon{background:rgba(255,74,74,0.12);color:#ff4a4a}
.membership-plans .membership-icon{color:var(--u-brand)}
/* Subscription plan icons use the same mint treatment as the onboarding benefits. */
.membership-plans .membership-icon{background:rgba(255,74,74,0.11);color:#ff4a4a}
.membership-plans .membership-icon svg{width:60%;height:60%}
#app[data-page="subscription"] .membership-preview,
#app[data-page="subscription"] .membership-test-note,
#app[data-page="subscription"] .membership-billing{margin-top:18px;padding:12px 18px;min-height:58px}
#app[data-page="subscription"] .membership-billing>svg:first-child{width:26px;height:26px}
#app[data-page="subscription"] .membership-billing{margin-top:48px;padding:8px 18px;min-height:50px}
#app[data-page="subscription"] .membership-billing>svg:first-child{width:24px;height:24px}
.membership-plans .selected .membership-radio{border-color:var(--u-brand)}
.membership-plans .selected .membership-radio::after{background:var(--u-brand)}
.membership-cta:hover:not(:disabled){filter:brightness(1.025)}
.membership-cta:active:not(:disabled){filter:brightness(.96)}
.membership-cta:disabled{filter:none;background:linear-gradient(110deg,#242427,#242427);color:rgba(255,255,255,0.413);box-shadow:none;cursor:default}
.membership-cta[data-preview=true]:disabled{background:var(--u-button);color:#fff;box-shadow:var(--u-button-shadow);opacity:1}
/* Active membership summaries use the same mint icon treatment for both plans. */
#app[data-page="me"] .membership-crown-icon,
#app[data-page="me"] .membership-summary-monthly .membership-icon,
#app[data-page="me"] .membership-summary-yearly .membership-icon{background:rgba(255,74,74,0.11)!important;color:#ff4a4a!important}
#app[data-page="me"] .membership-summary-inactive .membership-icon{background:#242427!important;color:rgba(255,255,255,0.509)!important}
#app[data-page="me"] .membership-summary-expired .membership-icon{background:#242427!important;color:rgba(255,255,255,0.431)!important}
body:has(#app[data-page=subscription]){background:#3a1c1e}
.membership-card .membership-status.is-active{background:rgba(255,74,74,0.12);color:#ff4a4a}
body:has(#app[data-page=subscription]),body:has(#app[data-page=subscription]) #app{background:#1e1e20}
body:has(#app[data-page="billing"]),body:has(#app[data-page="billing"]) #app{background:#1e1e20}
#app[data-page="billing"] .membership-history{min-height:0;padding:8px 0 0;background:#1e1e20}
#app[data-page="billing"] .membership-history{display:grid;gap:0}
#app[data-page="billing"] .billing-record{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.09);align-items:start}
#app[data-page="billing"] .billing-record:last-child{border-bottom:0}
#app[data-page="billing"] .billing-record-copy,#app[data-page="billing"] .billing-record-value{display:flex;min-width:0;flex-direction:column;gap:3px}
#app[data-page="billing"] .billing-record-copy strong{font-size:15px;line-height:20px;color:rgba(255,255,255,0.96)}
#app[data-page="billing"] .billing-record-value{align-items:flex-end;white-space:nowrap}
#app[data-page="billing"] .billing-record-value b{font-size:15px;line-height:20px;color:rgba(255,255,255,0.96);font-variant-numeric:tabular-nums}
#app[data-page="billing"] .billing-record-value span{font-size:12px;line-height:17px;color:rgba(255,255,255,0.509)}
#app[data-page="billing"] .billing-record-refund .billing-record-value b{color:rgba(255,255,255,0.509)}
.membership-card .membership-avatar{background:transparent;border:0;border-radius:0}
.membership-card .membership-avatar{transform:none}
.membership-card .membership-facts{margin-left:1px}
.membership-card .membership-facts{margin-left:3px}
.membership-card .membership-facts{transform:translateX(2px)}
.membership-card.monthly .membership-avatar{filter:none}
.membership-card.yearly .membership-avatar{filter:drop-shadow(0 5px 5px rgba(237,59,59,0.16))}
.membership-card .membership-status.is-active{align-items:center}
.membership-card .membership-status-text{display:inline-flex;align-items:center;height:14px;line-height:14px;transform:none}
.membership-card .membership-status-gem{display:block;transform:none}
.membership-card .membership-card-crown-monthly{content:url('assets/membership-monthly-crown-arc-reference.png');width:135px;height:auto;right:0;bottom:0;opacity:1;filter:none}
.membership-card.monthly::after{content:none}
.membership-warning-icon{line-height:0}
.membership-warning-icon svg{display:block;margin:auto;transform:translateX(1px)}
.membership-warning:not(.empty) .membership-warning-icon{color:#fff}
.membership-card.yearly::after{width:145.7px;height:150.4px}

/* Billing History: the receipts note sits at the bottom of the page, not under the first row. */
#app[data-page="billing"]{display:flex;flex-direction:column;box-sizing:border-box}
#app[data-page="billing"] .membership-note{margin-top:auto;margin-bottom:-14px;padding-bottom:0}

/* Touch devices: no sticky hover underline, no tap highlight flash, no pressed-down back button. */
*{-webkit-tap-highlight-color:transparent}
.navhead .round:active,.navhead a:active{transform:none;filter:none}

/* Expired and not-subscribed cards: near-white surface with a soft grey crown. brightness+contrast keep the outline tone and lighten only the fill. */
.membership-card.expired,.membership-card.inactive{background:#1e1e20 linear-gradient(145deg,#1e1e20,#1e1e20);box-shadow:0 6px 16px rgba(237,59,59,0.08)}
.membership-card.expired::before,.membership-card.inactive::before{content:none}
.membership-card.expired::after,.membership-card.inactive::after{filter:grayscale(1) saturate(0) brightness(.66) contrast(3)!important;opacity:.3!important}
.membership-card.expired .membership-card-crown,.membership-card.inactive .membership-card-crown{filter:grayscale(1) saturate(0) brightness(.66) contrast(3);opacity:.3}
.membership-card.inactive .membership-status{background:#242427;color:rgba(255,255,255,0.509)}
.membership-card .membership-status{white-space:nowrap}

/* Expired / not-subscribed status chips: no gold gradient or border. */
.membership-card .membership-status:not(.is-active){border:0;background:#242427}
.membership-card.expired .membership-status{background:#4d1920;color:#e37788;border:0}
/* Touch screens keep :hover after a tap; it filled the unselected plan green. Only the selected plan is highlighted. */
@media (hover:none){.membership-option:hover:not(.selected){background:inherit}}
.membership-option-extra .membership-option-copy small{min-height:0}.membership-price small:empty{display:none}
.membership-warning-icon svg{transform:none;stroke-width:2.75}.membership-warning-copy{gap:3px}

.navhead [data-membership-action=subscription-info]{border:0;outline:0;background:none;box-shadow:none;appearance:none;-webkit-appearance:none;color:rgba(255,255,255,0.378)}
.navhead [data-membership-action=subscription-info] svg{box-sizing:content-box;width:14px;height:14px;padding:4px;border-radius:50%;background:#1e1e20;box-shadow:0 1px 5px rgba(0,0,0,0.36);stroke-width:1.5}
.membership-info p+p{margin-top:12px}.membership-info-links{display:flex;gap:10px;align-items:center;justify-content:center;font-size:14px}.membership-info-links a{color:var(--mint);text-decoration:underline}

.membership-loading{position:fixed;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,0.429);font:500 14px/20px Inter,system-ui,sans-serif}
.membership-loading-spinner{width:18px;height:18px;border:2px solid rgba(255,74,74,0.2);border-top-color:#ff4a4a;border-radius:50%;animation:membership-loading-spin .8s linear infinite}
@keyframes membership-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.membership-loading-spinner{animation:none}}

.navhead [data-membership-action=subscription-info]{--aira-icon-neutral:rgba(255,255,255,0.378)}
.membership-terms{display:flex;flex-direction:column;gap:22px;padding:8px 4px 40px}
.membership-terms h2{margin:0 0 6px;font-size:16px;line-height:22px;font-weight:600;color:rgba(255,255,255,0.96)}
.membership-terms p{margin:0;font-size:15px;line-height:23px;color:rgba(255,255,255,0.525)}
.membership-legal{margin:44px 0 28px;text-align:center;font-size:12px;line-height:18px;color:rgba(255,255,255,0.286)}
.membership-legal a{color:rgba(255,255,255,0.286);text-decoration:underline;text-underline-offset:2px}

/* LifeTag membership art: crown illustrations and avatars come from the design mockups.
   Monthly and yearly share one card colour; only the crown and the avatar differ. */
.membership-card.monthly,.membership-card.yearly{background:#1e1e20 url('assets/membership-card-surface-yearly.jpg') center 40%/115% 150% no-repeat!important;box-shadow:0 7px 19px rgba(237,59,59,0.09)!important}
.membership-card.monthly::after,.membership-card.yearly::after{display:none!important}
.membership-card.yearly .membership-card-crown-yearly{content:url('assets/membership-card-crown-yearly.png?v=lt14');width:29.6%!important;height:auto!important;right:4.7%!important;bottom:20.5%!important;z-index:0;opacity:1!important;filter:none!important;object-fit:contain}
.membership-card.monthly .membership-card-crown-monthly{content:url('assets/membership-card-crown-monthly.png?v=lt14');width:29.9%!important;height:60.5%!important;right:2.9%!important;bottom:calc(17.5% - 7px)!important;z-index:0;opacity:1!important;filter:none!important;object-fit:fill}

/* The arc the crown stands on: a wide, shallow curve whose top follows the crown's base, with both ends raised.
   It sits above the crown (z-index 1) and is opaque, so the crown's lower edge disappears into it; text stays above both. */
.membership-card.monthly::before,.membership-card.yearly::before{content:''!important;position:absolute;z-index:1;left:20.7%;top:77%;right:auto;bottom:auto;width:119.7%;height:135%;transform:none;border-radius:50%;background:linear-gradient(180deg,#8a3539 0,#6b2a2e 60px,#4b2023 150px,#33191b 240px);box-shadow:inset 0 2px 1px rgba(255,190,190,.75);pointer-events:none}
.membership-card.monthly::before{left:22.4%;top:77.5%;background:linear-gradient(180deg,#9a5256 0,#753a3e 60px,#4f2528 150px,#35191c 240px)}

/* Billing History: keep the amount and the date clearly apart. */
.billing-record-value{gap:14px!important}
.billing-record-value span{margin-left:14px}

/* Low-allowance and used-up notices are both red. */
.membership-warning,.membership-warning:not(.empty){background:#4d1920!important;color:#e77388!important}
.membership-warning .membership-warning-icon,.membership-warning:not(.empty) .membership-warning-icon{background:#ef5b6c!important;color:#fff!important}

/* Expired and not-subscribed: a grey card with a grey crown and arc (red is only for an active plan). */
.membership-card.expired,.membership-card.inactive{background:#262629 linear-gradient(145deg,#2d2d30,#212123)!important;border-color:rgba(255,255,255,.09)!important;box-shadow:0 6px 16px rgba(0,0,0,.25)!important}
.membership-card.expired::before,.membership-card.inactive::before{content:''!important;background:linear-gradient(180deg,#4a4a4e 0,#37373a 60px,#2a2a2d 150px,#222224 240px)!important;box-shadow:inset 0 2px 1px rgba(255,255,255,.22)!important}
.membership-card.expired .membership-card-crown,.membership-card.inactive .membership-card-crown{filter:grayscale(1) saturate(0) brightness(.9)!important;opacity:.5!important}
.membership-card.expired .membership-status,.membership-card.inactive .membership-status{background:#3a3a3d!important;color:#b9b9c0!important;border:0!important}

/* The Active chip sits on a red card, so it is a soft white tint instead of red. */
.membership-card.monthly .membership-status.is-active,.membership-card.yearly .membership-status.is-active{background:rgba(255,255,255,.2)!important;color:#fff!important;border:0!important}