/* Premium Store body. Shared banner dimensions remain in page_banner_layout.css. */
/* Tier artwork and benefits share one readable card rhythm. */
#app-shell #main #view-upgrade .upgrade-page { padding:clamp(18px,2.2vw,32px); background:linear-gradient(145deg,#10101c,#090910 65%); color:#f6f3ff; min-width:0; }
#view-upgrade [hidden] { display:none!important; }
#view-upgrade :is(#upgrade-status,#upgrade-checkout-status,#store-availability):empty { display:none; }
#view-upgrade .upgrade-membership-summary { display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:16px; padding:14px 20px; border:1px solid var(--phantom-frame-purple,#8b5cf6); border-radius:12px; background:linear-gradient(110deg,#161424,#10111c); margin-bottom:22px; }
#view-upgrade .store-account-crystal { grid-row:1/3; object-fit:contain; width:64px; height:72px; align-self:center; }
#view-upgrade #upgrade-current-heading { margin:0 0 5px; font:600 20px Georgia,serif; }
#view-upgrade #upgrade-current { color:#c1b5df; font-size:14px; }
#view-upgrade .store-plans-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 24px; margin-bottom:14px; }
#view-upgrade :is(#upgrade-memberships-heading,#upgrade-topups-heading) { margin:0; font:600 clamp(25px,2.1vw,32px)/1.2 Georgia,serif; }
#view-upgrade .store-plans-heading>p { grid-column:1; margin:0; color:#beb6cf; font-size:14px; }
#view-upgrade .store-cadence { grid-column:2; grid-row:1/3; display:flex; align-self:start; padding:3px; gap:2px; border:1px solid var(--phantom-frame-purple,#8b5cf6); border-radius:999px; background:#0a0912; }
#app-shell #main #view-upgrade .store-cadence-option { min-height:40px; padding:8px 24px; background:transparent; color:#bbb1d2; border:1px solid var(--phantom-frame-purple,#8b5cf6); border-radius:999px; font-size:14px; }
#app-shell #main #view-upgrade .store-cadence-option[aria-pressed="true"] { color:#fff; background:linear-gradient(180deg,#64389d,#322047); border-color:var(--phantom-frame-purple,#8b5cf6); box-shadow:0 0 10px #9056e64a; }
#view-upgrade #store-availability { margin:-4px 0 14px; text-align:right; color:#bfb6d3; font-size:13px; }
#view-upgrade :is(#upgrade-memberships,#upgrade-topups) { display:grid; gap:18px; min-width:0; }
#view-upgrade #upgrade-memberships { grid-template-columns:repeat(2,minmax(0,1fr)); }
#view-upgrade #upgrade-topups { grid-template-columns:repeat(4,minmax(0,1fr)); }
#app-shell #main #view-upgrade .upgrade-offering { position:relative; isolation:isolate; min-width:0; display:flex; flex-direction:column; align-items:stretch; padding:32px 24px 20px; gap:8px; background:linear-gradient(145deg,#12111d,#090910); border:1px solid var(--phantom-frame-purple,#8b5cf6); border-radius:12px; box-shadow:none; }
#app-shell #main #view-upgrade .store-plan { padding-top:60px; min-height:400px; }
#app-shell #main #view-upgrade .store-plan-recommended { border-color:var(--phantom-frame-purple,#8b5cf6); background:radial-gradient(ellipse at top right,#3a1c5c70,transparent 65%),linear-gradient(145deg,#171125,#0d0917); box-shadow:0 0 0 1px #b57cf790,0 0 25px #a25fea55; }
#app-shell #main #view-upgrade .store-plan[data-store-tier="tier_3"] { background:radial-gradient(ellipse at top right,#55308365,transparent 65%),linear-gradient(145deg,#171225,#0b0a13); box-shadow:inset 0 0 28px #a46be516; }
#view-upgrade .store-recommended { position:absolute; top:12px; left:24px; margin:0; padding:3px 12px; border-radius:99px; background:linear-gradient(135deg,#f4d787,#c59d48); color:#211804; font-size:12px; font-weight:700; display:flex; align-items:center; gap:6px; text-transform:uppercase; }
#view-upgrade .upgrade-offering h4 { margin:0; max-width:70%; font:600 23px/1.2 Georgia,serif; }
#view-upgrade .store-allowance { margin:0; max-width:72%; color:#c4b8de; font-size:15px; }
#view-upgrade .store-price { margin:5px 0 16px; font:600 clamp(25px,2.5vw,38px)/1.2 Georgia,serif; color:#faf6ff; }
#view-upgrade .store-price-unit { margin-left:6px; font:400 14px Georgia,serif; color:#c4b8de; white-space:nowrap; }
#view-upgrade .store-card-crystal { position:absolute; right:10px; top:35px; width:clamp(74px,7vw,110px); height:110px; object-fit:contain; z-index:-1; pointer-events:none; }
#view-upgrade .store-plan .store-price { position:relative; z-index:1; }
#view-upgrade .store-topup .store-card-crystal { width:74px; height:85px; top:9px; right:8px; }
#app-shell #main #view-upgrade .upgrade-offering button { margin-top:auto; width:100%; align-self:stretch; min-height:42px; height:auto; max-height:none; padding:10px 12px; border-radius:8px; background:#8550db; color:white; font-size:14px; }
#app-shell #main #view-upgrade .upgrade-offering button:disabled { opacity:1; background:linear-gradient(110deg,#333040,#393549); color:#bab0d3; border-color:var(--phantom-frame-purple,#8b5cf6); cursor:not-allowed; }
#view-upgrade .store-topups-section { margin-top:24px; padding-top:18px; border-top:1px solid var(--phantom-frame-purple,#8b5cf6); }
#view-upgrade .store-topups-section>p { color:#beb6cf; font-size:14px; margin:6px 0 16px; }
#app-shell #main #view-upgrade .store-topup { padding:20px 18px 16px; min-height:150px; }
#view-upgrade .store-topup h4 { display:none; }
#view-upgrade .store-topup .store-allowance { color:#eee6fc; font:600 18px Georgia,serif; }
#view-upgrade .store-topup .store-price { font-size:25px; margin:2px 0 12px; }
#view-upgrade .upgrade-history { margin-top:22px; padding:16px 20px; border:1px solid var(--phantom-frame-purple,#8b5cf6); border-radius:12px; background:linear-gradient(110deg,#151321,#10111c); }
#view-upgrade .upgrade-history summary { cursor:pointer; font:600 17px Georgia,serif; }
#view-upgrade .upgrade-history summary>span { float:right; font:13px system-ui,sans-serif; color:#bcb1d3; }
#view-upgrade #upgrade-history { color:#bcb1d3; font-size:14px; margin-top:12px; }
#view-upgrade #upgrade-checkout-status { color:#c5b8de; font-size:14px; }
#view-upgrade[data-store-cadence="monthly"] .store-plan button[data-checkout-cadence="annual"],
#view-upgrade[data-store-cadence="annual"] .store-plan button[data-checkout-cadence="monthly"] { display:none!important; }
@media(max-width:1100px) {
  #view-upgrade #upgrade-topups { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #app-shell #main #view-upgrade .upgrade-offering { padding-left:18px; padding-right:18px; }
  #view-upgrade .store-price { font-size:28px; }
  #view-upgrade .store-card-crystal { width:76px; right:4px; opacity:.75; }
}
@media(max-width:760px) {
  #view-upgrade #upgrade-memberships { grid-template-columns:1fr; }
  #view-upgrade .store-plans-heading { grid-template-columns:1fr; }
  #view-upgrade .store-cadence { grid-column:1; grid-row:3; justify-self:start; margin-top:8px; }
  #view-upgrade #store-availability { text-align:left; }
  #view-upgrade .store-price { font-size:34px; }
  #view-upgrade .store-card-crystal { width:110px; right:20px; opacity:1; }
  #app-shell #main #view-upgrade .store-plan { min-height:210px; }
}
@media(max-width:440px) {
  #view-upgrade #upgrade-topups { grid-template-columns:1fr; }
  #view-upgrade .upgrade-history summary>span { display:none; }
}

#view-upgrade .store-description { margin:0 0 12px; max-width:60%; min-height:42px; color:#c8bedb; font-size:14px; line-height:1.5; }
#view-upgrade .store-plan .store-card-crystal { top:55px; right:8px; opacity:1; width:100px; height:110px; }
#view-upgrade .store-plan[data-store-tier="tier_2"] .store-card-crystal { width:132px; height:132px; }
#view-upgrade .store-plan[data-store-tier="tier_3"] .store-card-crystal { width:158px; height:148px; }
#view-upgrade .store-plan .store-allowance { max-width:100%; margin-top:16px; }
#view-upgrade .store-benefits { list-style:none; padding:16px 0 8px; margin:0 0 12px; border-top:1px solid var(--phantom-frame-purple,#8b5cf6); display:grid; gap:12px; font-size:14px; color:#d9cfea; line-height:1.45; }
#view-upgrade .store-benefits li { position:relative; padding-left:32px; }
#view-upgrade .store-benefits li::before { content:"\2713" / ""; position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; color:#160c27; background:#aa79ef; display:grid; place-items:center; font-weight:800; }
@media (min-width:761px) and (max-width:1100px) {
 #view-upgrade .store-description { max-width:100%; min-height:63px; padding-right:0; }
 #view-upgrade .store-plan .store-card-crystal { top:140px; width:70px; height:80px; }
 #view-upgrade .store-plan[data-store-tier="tier_2"] .store-card-crystal { width:88px; height:88px; }
 #view-upgrade .store-plan[data-store-tier="tier_3"] .store-card-crystal { width:104px; height:98px; }
 #view-upgrade .store-plan .store-allowance { margin-top:90px; }
}
@media (max-width:760px) { #app-shell #main #view-upgrade .store-plan { min-height:400px; } }

#app-shell #main #view-upgrade .store-plan[data-store-tier="studio"] { background:radial-gradient(ellipse at top right,#61438165,transparent 65%),linear-gradient(145deg,#1b1427,#0b0a13); }
#view-upgrade .store-plan[data-store-tier="studio"] .store-card-crystal { width:158px; height:148px; }
#view-upgrade .store-plan[data-store-tier="studio"] .store-benefits { display:grid; grid-template-columns:1fr; gap:12px; }
#view-upgrade .studio-billing-consent { display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5; margin:0 0 14px; color:#d9cfea; }
#view-upgrade .studio-billing-consent input { flex:0 0 auto; width:18px; height:18px; margin:3px 0 0; accent-color:#a879ef; }
@media(max-width:650px) { #view-upgrade .store-plan[data-store-tier="studio"] .store-benefits { grid-template-columns:1fr; } }

/* Compact premium cards: reduce space by about 20% without shrinking body text. */
#app-shell #main #view-upgrade .store-plan {min-height:240px;padding:27px 16px 10px;gap:3px;}
#view-upgrade .upgrade-offering h4 {font-size:20px;}
#view-upgrade .store-description {min-height:32px;margin-bottom:4px;line-height:1.35;}
#view-upgrade .store-plan .store-allowance {margin-top:4px;font-size:14px;}
#view-upgrade .store-price {font-size:26px;margin:2px 0 6px;}
#view-upgrade .store-benefits {gap:6px;padding:9px 0 3px;margin-bottom:8px;line-height:1.3;}
#view-upgrade .store-benefits li {padding-left:25px;}
#view-upgrade .store-benefits li::before {width:18px;height:18px;font-size:12px;}
#app-shell #main #view-upgrade .upgrade-offering button {min-height:34px;padding:6px 10px;font-size:14px;}
#view-upgrade .store-recommended {top:8px;left:16px;padding:2px 10px;font-size:11px;}
#view-upgrade .store-plan .store-card-crystal {top:35px;width:64px;height:70px;}
#view-upgrade .store-plan[data-store-tier="tier_2"] .store-card-crystal {width:85px;height:85px;}
#view-upgrade .store-plan:is([data-store-tier="tier_3"],[data-store-tier="studio"]) .store-card-crystal {width:101px;height:94px;}
@media (min-width:761px) and (max-width:1100px) {
 #view-upgrade .store-description {max-width:65%;min-height:48px;}
 #view-upgrade .store-plan .store-allowance {margin-top:8px;}
 #view-upgrade .store-plan .store-card-crystal {top:50px;right:0;}
}
@media(max-width:760px){#app-shell #main #view-upgrade .store-plan {min-height:240px;}#app-shell #main #view-upgrade .upgrade-offering button {min-height:44px;}}

.studio-purchase-dialog {box-sizing:border-box;width:min(600px,calc(100vw - 32px));max-height:85vh;overflow:auto;padding:24px;border:1px solid #8b5cf6;border-radius:16px;background:#14101f;color:#f6f4ff;}
.studio-purchase-dialog::backdrop {background:#000a;}
.studio-purchase-dialog p {line-height:1.5;}
.studio-purchase-dialog button {margin:12px 8px 0 0;min-height:44px;}
.studio-purchase-dialog .studio-billing-consent {display:flex;gap:12px;margin-top:20px;}
.membership-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;}

#view-upgrade .store-plan .store-card-crystal{width:86px;height:92px}
#view-upgrade .store-plan[data-store-tier="tier_2"] .store-card-crystal{width:110px;height:112px}
#view-upgrade .store-plan:is([data-store-tier="tier_3"],[data-store-tier="studio"]) .store-card-crystal{width:130px;height:124px}

#app-shell #main #view-upgrade .store-plan{min-height:0;padding-bottom:14px}
#view-upgrade .store-description{min-height:0}
#view-upgrade #upgrade-memberships{align-items:start}

/* Static, character-free colour: translucent surfaces without GPU blur or animation. */
#app-shell #main #view-upgrade .upgrade-page {
 background:radial-gradient(ellipse at 95% 5%,#47336b 0,transparent 45%),radial-gradient(ellipse at 0 45%,#173b43 0,transparent 45%),linear-gradient(145deg,#1c142e,#100e1b 65%);
}
#app-shell #main #view-upgrade :is(.store-plan,.store-topup,.upgrade-membership-summary) {
 background:linear-gradient(120deg,#211a35ed,#181626d9)!important;
 border-color:#76618b!important;
}
#app-shell #main #view-upgrade .upgrade-membership-summary {
 background:var(--phantom-cloud-surface) center/cover!important;
 grid-template-columns:minmax(0,1fr);gap:6px;padding:22px 26px;
}
#view-upgrade .upgrade-membership-summary .store-account-crystal {display:none}
#view-upgrade #upgrade-current {color:#e0d7ef;line-height:1.55}
#app-shell #main #view-upgrade .store-plan {
 display:grid;grid-template-columns:minmax(0,1fr) clamp(86px,7vw,130px);
 gap:8px 12px;padding:22px 20px 16px;
}
#app-shell #main #view-upgrade .store-plan-recommended {padding-top:38px;border-color:#b894df!important}
#view-upgrade .store-plan > * {grid-column:1/-1;min-width:0}
#view-upgrade .store-plan h4 {grid-column:1;grid-row:1;max-width:none;align-self:end}
#view-upgrade .store-plan .store-description {grid-column:1;grid-row:2;max-width:none;min-height:0;padding:0;margin:0;line-height:1.5}
#view-upgrade .store-plan .store-card-crystal {
 position:static!important;grid-column:2;grid-row:1/3;align-self:center;justify-self:center;
 width:100%!important;height:auto!important;max-height:124px;z-index:auto;opacity:1;
}
#view-upgrade .store-plan .store-allowance {max-width:none;margin:0;line-height:1.5}
#view-upgrade .store-plan .store-benefits {margin:0;padding:12px 0;line-height:1.5}
#view-upgrade .store-plan :is(.store-description,.store-allowance,.store-benefits) {color:#e0d7ef}
#app-shell #main #view-upgrade .store-plan button {min-height:44px;line-height:1.4}
@media(max-width:440px) {
 #app-shell #main #view-upgrade .store-plan {grid-template-columns:minmax(0,1fr) 76px;padding-left:16px;padding-right:16px}
 #app-shell #main #view-upgrade .upgrade-membership-summary {padding:18px}
}
@media(forced-colors:active) {
 #app-shell #main #view-upgrade :is(.store-plan,.store-topup,.upgrade-membership-summary) {background:Canvas!important;border-color:CanvasText!important}
}

/* Owner-requested Store scene: the promo's lighter castle, beneath unchanged cards.
   Height-fit preserves the entire sky-to-path composition on long/mobile pages. */
#app-shell #main #view-upgrade .upgrade-page {position:relative;isolation:isolate;}
#app-shell #main #view-upgrade .upgrade-page::before {
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:url("assets/store-castle-dark-runes-20261016.png") center bottom / auto 100% no-repeat;
 opacity:.68;border-radius:inherit;
}
@media(forced-colors:active){#app-shell #main #view-upgrade .upgrade-page::before{display:none;}}

/* Readable Store copy over the light castle path; existing product cards stay intact. */
#app-shell #main #view-upgrade :is(.store-plans-heading,#upgrade-topups-heading,.store-topups-section>p,#store-availability,#upgrade-status,#upgrade-checkout-status) {
 background-color:rgba(13,11,24,.90);color:#eee8f8;
 padding:12px 16px;border-radius:10px;line-height:1.5;
}
#app-shell #main #view-upgrade .store-plans-heading>p {color:#e0d7ef;}
#app-shell #main #view-upgrade #upgrade-topups-heading {margin:0;border-radius:10px 10px 0 0;padding-bottom:4px;}
#app-shell #main #view-upgrade .store-topups-section>p {margin:0 0 16px;border-radius:0 0 10px 10px;padding-top:0;}
#app-shell #main #view-upgrade :is(#upgrade-status,#upgrade-checkout-status,#store-availability):empty {display:none;}
@media(forced-colors:active){#app-shell #main #view-upgrade :is(.store-plans-heading,#upgrade-topups-heading,.store-topups-section>p,#store-availability,#upgrade-status,#upgrade-checkout-status){background:Canvas;color:CanvasText;}}