.subscription-page { color:#ede8ff; padding-bottom:60px; }
.sub-hero { text-align:center; padding:34px 10px 32px; }
.sub-eyebrow { font-size:10px; letter-spacing:4px; color:#c3ace9; font-weight:900; }
.sub-hero h1 { font-family:Pacifico,cursive; font-size:clamp(26px,5vw,38px); font-weight:400; margin:0 0 16px; }
.sub-hero p { max-width:480px; margin:0 auto 24px; color:#bcb0d0; line-height:1.8; font-size:14px; }
.subscribe-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; background:linear-gradient(120deg,#c7a7ee,#efaecb); color:#32233e; text-decoration:none; border-radius:999px; padding:15px 30px; font:900 14px 'Zen Maru Gothic',sans-serif; box-shadow:0 5px 28px #c594df26; transition:transform .3s,box-shadow .3s; }
.subscribe-button:hover { transform:scale(1.055); box-shadow:0 8px 32px #c594df50; }
.sub-note { display:block; margin-top:12px; font-size:11px; color:#a99abb; }
.sub-section { border:1px solid #bda3e335; border-radius:24px; background:linear-gradient(135deg,#302441e8,#181226ef); padding:26px; margin:18px 0; }
.sub-section h2 { font-family:Pacifico,cursive; font-size:26px; font-weight:400; }
.sub-section p { color:#bcb0d0; font-size:13px; line-height:1.7; margin:8px 0 20px; }
.sub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:12px; }
.sub-card { margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:142px; padding:18px 8px; border-radius:16px; border:1px solid #c8b2ec23; background:#c6a9f00b; transition:background .3s,border-color .3s; }
.sub-card:hover { background:#c6a9f01c; border-color:#c8b2ec66; }
.sub-card img { width:56px; height:56px; object-fit:contain; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.sub-card:hover img { transform:scale(1.2) rotate(-4deg); }
.sub-card figcaption { font-size:11px; text-align:center; color:#d3c4e7; overflow-wrap:anywhere; max-width:100%; }
.sub-group h3 { font-size:12px; letter-spacing:1px; margin:22px 0 12px; color:#edbdd9; }
.badge-grid .sub-card { min-height:115px; }
.badge-grid img { width:36px; height:36px; image-rendering:pixelated; }
.sub-status { text-align:center; color:#b9a7ca; font-size:12px; line-height:1.7; padding:10px; }
.sub-empty { color:#a99abb; font-size:13px; padding:24px 0; }
.sub-retry { border:1px solid #c7a7ee60; background:#c7a7ee15; color:#e8daf8; font:inherit; border-radius:20px; padding:7px 16px; margin:8px; }
.sub-retry[hidden] { display:none; }
a:focus-visible,button:focus-visible { outline:2px solid #f9a8c9; outline-offset:4px; }
@media(max-width:560px) { .sub-section { padding:20px 15px; } .sub-grid { grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; } .page-header-back { letter-spacing:.5px; font-size:9px; padding:8px; } }
@media(prefers-reduced-motion:reduce) { .subscription-page *, .subscribe-button { animation:none!important; transition:none!important; } }

.sub-status-dot { position:relative; top:2px; display:block; flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:#b9a7ca;  transition:background .3s,box-shadow .3s; }
.sub-status[data-state="ready"] .sub-status-dot { background:#9cd9b5; animation:collectionBlink 1.8s ease-in-out infinite; }
.sub-status[data-state="loading"] .sub-status-dot { background:#cbb5ee; animation:collectionPulse 1.4s ease-in-out infinite; }
.sub-status[data-state="stale"] .sub-status-dot { background:#e8bd7f; }
.sub-status[data-state="error"] .sub-status-dot { background:#e89aa7; }
@keyframes collectionPulse { 50% { opacity:.35; } }

.sub-status-line { display:inline-flex; align-items:center; justify-content:center; gap:9px; max-width:100%; }
@keyframes collectionGlow { 0%,100% { box-shadow:0 0 4px #9cd9b54d,0 0 0 0 #9cd9b500; } 50% { box-shadow:0 0 11px #9cd9b5a6,0 0 18px 3px #9cd9b533; } }
.sub-hero { position:relative; isolation:isolate; max-width:720px; margin:0 auto 8px; padding:8px 16px 12px; }
.sub-hero::before { content:''; position:absolute; z-index:-1; inset:10% 5% 0; background:radial-gradient(ellipse at center,#b38bd518,transparent 70%); pointer-events:none; }
.sub-hero::after { content:''; display:block; width:180px; height:1px; margin:18px auto 0; background:linear-gradient(90deg,transparent,#d7aed866,transparent); }
.sub-hero-ornament { display:flex; align-items:center; justify-content:center; gap:18px; color:#d8b0cf; margin:0 auto 6px; }
.sub-hero-ornament span { width:64px; height:1px; background:linear-gradient(90deg,transparent,#d8b0cf70); }
.sub-hero-ornament span:last-child { transform:rotate(180deg); }
.subscribe-button { position:relative; border:1px solid #f7d4ec88; min-width:172px; box-shadow:0 5px 28px #c594df26,inset 0 1px 0 #ffffff4d; }
.subscribe-button:focus-visible { transform:scale(1.055); }
.subscribe-button:active { transform:scale(1.02); }

@keyframes collectionBlink { 0%,100% { opacity:1; box-shadow:0 0 10px #9cd9b58c; } 50% { opacity:.12; box-shadow:0 0 2px #9cd9b51a; } }

@media(max-width:640px) {
  .sub-hero { margin:0 auto 8px; padding:4px 4px 8px; }
  .sub-hero h1 { font-size:clamp(25px,6.5vw,32px); line-height:1.5; margin-bottom:14px; }
  .sub-hero-ornament { gap:12px; }
  .sub-hero-ornament svg { width:32px; height:32px; }
  .subscribe-button { min-height:48px; min-width:180px; padding:12px 24px; }
  .sub-section { margin:14px 0; padding:20px 14px; border-radius:20px; }
  .sub-section h2 { font-size:clamp(21px,5.5vw,26px); line-height:1.5; overflow-wrap:break-word; }
  .sub-section p { font-size:13px; margin:8px 0 16px; }
  .sub-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .sub-card { min-width:0; min-height:122px; padding:14px 6px; gap:10px; }
  .sub-card img { width:48px; height:48px; }
  .sub-card figcaption { font-size:10px; }
  .badge-grid .sub-card { min-height:100px; }
  .badge-grid img { width:36px; height:36px; }
  .sub-status { font-size:11px; padding:10px 4px; }
  .sub-retry { min-height:44px; }
}
@media(hover:none) and (pointer:coarse) {
  .subscribe-button:hover,.subscribe-button:focus-visible { transform:none; }
  .subscribe-button:active { transform:scale(.97); }
  .sub-card:hover img { transform:none; }
}

.badge-tier + .badge-tier { margin-top:24px; padding-top:4px; border-top:1px solid #c8b2ec23; }
.badge-tier .badge-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
@media(max-width:760px) { .badge-tier .badge-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }