/* FutiaSpace — pages/premium.css */
.premium{display:flex;flex-direction:column;gap:var(--section-gap);padding:var(--sp-4) var(--sp-4) var(--sp-8)}
.premium h2{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.02em;margin-bottom:var(--sp-3)}

/* Hero */
.premium__hero{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center;color:#fff;
  padding:36px var(--sp-5) 30px;border-radius:var(--radius-xl);
  background:radial-gradient(120% 120% at 50% -10%,rgba(255,213,74,.38),transparent 60%),linear-gradient(135deg,var(--c-brown) 0%,#7a3f10 55%,#b8700f 100%);
  box-shadow:0 18px 40px -14px rgba(122,63,16,.65),inset 0 0 0 1px rgba(255,255,255,.1)}
.premium__hero::before{content:"";position:absolute;z-index:-1;right:-50px;bottom:-60px;width:190px;height:190px;border-radius:50%;border:28px solid rgba(255,213,74,.12)}
.premium__badge{display:grid;place-items:center;width:84px;height:84px;margin-bottom:var(--sp-2);border-radius:50%;background:var(--gradient-gold);color:var(--c-brown);
  box-shadow:0 0 0 8px rgba(255,213,74,.16),0 14px 32px -8px rgba(245,179,1,.7)}
.premium__hero h1{font-size:var(--fs-2xl);text-shadow:0 2px 14px rgba(0,0,0,.3)}
.premium__hero p{max-width:290px;font-size:var(--fs-sm);color:rgba(255,255,255,.86)}
.premium__status{margin-top:var(--sp-3);padding:6px 16px;border-radius:var(--radius-pill);background:rgba(255,213,74,.2);color:var(--gold-light);font-size:var(--fs-xs);font-weight:800;letter-spacing:.03em;border:1px solid rgba(255,213,74,.35)}

/* Features */
.premium__features{display:flex;flex-direction:column;gap:var(--sp-3)}
.premium-feature{display:flex;align-items:center;gap:var(--sp-4);padding:var(--card-pad);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--highlight),var(--shadow-card)}
.premium-feature__icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--gold-tint);color:var(--gold-text)}
.premium-feature>div:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.premium-feature strong{font-size:var(--fs-sm);font-weight:800}
.premium-feature span{font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.5}

/* Plans */
.premium__plans{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);padding-top:var(--sp-2)}
.premium-plan{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px var(--sp-3) 20px;background:var(--bg-surface);
  border:1px solid var(--border-strong);border-radius:var(--radius-xl);box-shadow:var(--highlight),var(--shadow-card);text-align:center;
  transition:transform var(--t-fast) var(--spring),border-color var(--t-fast),box-shadow var(--t-base)}
.premium-plan:hover{border-color:var(--accent-text);transform:translateY(-2px)}
.premium-plan:active{transform:scale(.97)}
.premium-plan__label{font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.premium-plan__amount{font-size:var(--fs-2xl);font-weight:800;letter-spacing:var(--tracking-tight);line-height:1.1}
.premium-plan__sub{font-size:var(--fs-xs);color:var(--text-secondary)}
.premium-plan--best{border-color:var(--gold);background:linear-gradient(180deg,var(--gold-tint),transparent 70%),var(--bg-surface);box-shadow:var(--shadow-gold)}
.premium-plan--best:hover{border-color:var(--gold-light)}
.premium-plan--best .premium-plan__amount{color:var(--gold-text)}
.premium-plan__best{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:3px 12px;border-radius:var(--radius-pill);white-space:nowrap;
  background:var(--gradient-gold);color:var(--c-brown);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase}

/* Active subscription */
.premium__active{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-5);border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--green-tint),transparent),var(--bg-surface);border:1px solid color-mix(in srgb,var(--c-green-light) 40%,transparent)}
.premium__active h2{margin:0}
.premium__active p{color:var(--text-secondary);font-size:var(--fs-sm)}
.premium__active .btn{margin-top:var(--sp-2)}

/* Payment history */
.premium__history:empty{display:none}
.payment-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-2);padding:14px var(--sp-4);
  background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--highlight),var(--shadow-card)}
.payment-row>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.payment-row strong{font-size:var(--fs-sm);font-weight:800}
.payment-row__ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-2xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.payment-row__right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;font-weight:800;font-size:var(--fs-sm)}
.payment-row__status{padding:2px 10px;border-radius:var(--radius-pill);background:var(--bg-elevated);color:var(--text-secondary);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.payment-row--pending .payment-row__status{background:var(--warning-tint);color:var(--warning)}
.payment-row--approved .payment-row__status,.payment-row--confirmed .payment-row__status,.payment-row--paid .payment-row__status,.payment-row--success .payment-row__status{background:var(--success-tint);color:var(--success)}
.payment-row--rejected .payment-row__status,.payment-row--failed .payment-row__status,.payment-row--declined .payment-row__status{background:var(--danger-tint);color:var(--danger-text)}

/* Payment sheet */
.payment-steps{display:flex;flex-direction:column;gap:var(--sp-5)}
.payment-step{display:flex;align-items:flex-start;gap:var(--sp-3)}
.payment-step__num{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c-green);color:#fff;font-size:var(--fs-xs);font-weight:800;box-shadow:0 4px 10px -2px rgba(45,125,50,.55)}
.payment-step>div:last-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.payment-step>div:last-child>strong{font-size:var(--fs-sm);font-weight:800;line-height:1.35;padding-top:4px}
.bank-card{padding:2px var(--sp-4);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.bank-card>div{display:flex;align-items:center;gap:var(--sp-2);padding:11px 0}
.bank-card>div+div{border-top:1px solid var(--border-subtle)}
.bank-card span{flex:none;width:64px;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.bank-card strong{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:800;overflow:hidden;text-overflow:ellipsis}
.bank-card .btn{flex:none;min-height:30px;padding:0 10px}
.reference-pill{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:6px 6px 6px var(--sp-4);border-radius:var(--radius-pill);
  background:var(--green-tint);border:1px dashed var(--accent-text)}
.reference-pill span{min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-xs);font-weight:800;color:var(--accent-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proof-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);min-height:120px;padding:var(--sp-4);overflow:hidden;
  border:2px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--bg-elevated);color:var(--text-muted);font-size:var(--fs-xs);font-weight:700;cursor:pointer;
  transition:border-color var(--t-fast),color var(--t-fast)}
.proof-slot:hover{border-color:var(--c-green-light);color:var(--accent-text)}
.proof-slot img{width:100%;max-height:200px;object-fit:cover;border-radius:var(--radius-md)}

@media (max-width:359px){.premium__plans{grid-template-columns:1fr}}
@media (min-width:768px){.premium{padding-inline:0}}