/* ============================================================
   account.css — login / checkout / account dashboard
   Relies on styles.css (tokens, fonts, .logo, .btn) + sector.css (sp-nav, sp-footer)
   ============================================================ */

.acct-main{max-width:1100px;margin:0 auto;padding:clamp(120px,15vh,170px) clamp(20px,5vw,56px) clamp(60px,8vw,100px)}
.acct-narrow{max-width:520px}

/* shared field */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;text-align:left}
.field label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.field input,.field select{background:transparent;border:1px solid var(--line);color:var(--ink);
  padding:14px 16px;border-radius:10px;font-family:var(--sans);font-size:15px;letter-spacing:.02em}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold)}
.field--row{flex-direction:row;gap:14px}
.field--row>div{flex:1;display:flex;flex-direction:column;gap:8px}
.form-msg{min-height:20px;font-size:13px;color:#e6896f;letter-spacing:.02em;margin:4px 0 10px}
.form-msg.ok{color:var(--gold-soft)}

/* ---------- Login / Signup ---------- */
.auth-head{text-align:center;margin-bottom:30px}
.auth-head .sub-eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.auth-head h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(28px,4vw,46px);letter-spacing:-.01em}
.auth-card{border:1px solid var(--line);border-radius:14px;padding:clamp(26px,3.4vw,42px);
  background:linear-gradient(180deg,rgba(36,28,19,.45),rgba(20,16,11,.2))}
.auth-tabs{display:flex;gap:6px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:40px;padding:5px;margin-bottom:26px}
.auth-tabs button{flex:1;border:0;background:transparent;color:var(--ink-dim);cursor:pointer;
  padding:11px;border-radius:40px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;transition:.3s}
.auth-tabs button.active{background:var(--gold);color:#1a1408;font-weight:600}
.auth-card .btn{width:100%;justify-content:center;margin-top:6px}
.auth-alt{text-align:center;margin-top:20px;font-size:13px;color:var(--ink-dim)}
.auth-note{text-align:center;margin-top:26px;font-size:11px;letter-spacing:.04em;color:var(--ink-dim);opacity:.7;line-height:1.6}

/* ---------- Checkout ---------- */
.co-head{margin-bottom:40px}
.co-head .sub-eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.co-head h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,4.4vw,54px);letter-spacing:-.01em;margin-top:12px}
.co-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,3.5vw,54px);align-items:start}
.co-panel{border:1px solid var(--line);border-radius:14px;padding:clamp(24px,3vw,38px);background:linear-gradient(180deg,rgba(36,28,19,.4),rgba(20,16,11,.15))}
.co-panel h2{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:18px;letter-spacing:.04em;margin-bottom:22px}
.demo-banner{display:flex;gap:10px;align-items:flex-start;border:1px dashed rgba(201,165,92,.5);border-radius:10px;
  padding:14px 16px;margin-bottom:24px;font-size:12.5px;line-height:1.55;color:var(--gold-soft);background:rgba(201,165,92,.06)}
.co-pay .btn{width:100%;justify-content:center;margin-top:6px}

/* order summary */
.co-summary{border:1px solid var(--line);border-radius:14px;overflow:hidden;position:sticky;top:100px}
.co-summary__cover{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.co-summary__body{padding:24px}
.co-summary__plan{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:20px;letter-spacing:.03em}
.co-summary__ed{color:var(--ink-dim);font-size:13px;margin:6px 0 18px}
.co-line{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink)}
.co-line--total{font-family:var(--display);font-size:20px;color:var(--ink);font-weight:500}
.co-line span:last-child{color:var(--gold-soft)}
.co-guard{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:10px;text-align:center}
.co-guard p{color:var(--ink-dim);font-size:13px;margin-bottom:12px}
@media(max-width:820px){.co-grid{grid-template-columns:1fr}.co-summary{position:static;order:-1}}

/* ---------- Account dashboard ---------- */
.acct-header{display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line);padding-bottom:34px;margin-bottom:44px;flex-wrap:wrap}
.avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:500;font-size:22px;color:#1a1408;
  background:radial-gradient(circle at 30% 30%,var(--gold-soft),var(--gold))}
.acct-header__who{flex:1;min-width:200px}
.acct-header__who h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,3vw,38px);letter-spacing:-.01em}
.acct-header__who p{color:var(--ink-dim);font-size:14px;margin-top:6px}
.acct-section h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(16px,1.8vw,22px);
  letter-spacing:.04em;border-bottom:1px solid var(--line);padding-bottom:14px;margin:0 0 28px}

/* subscriptions list */
.sub-row{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.sub-row__cover{width:54px;height:72px;object-fit:cover;border-radius:3px;flex:0 0 auto}
.sub-row__info{flex:1;min-width:0}
.sub-row__info h3{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:16px;letter-spacing:.03em}
.sub-row__info p{color:var(--ink-dim);font-size:13px;margin-top:5px}
.sub-row__price{color:var(--gold-soft);font-size:14px;white-space:nowrap}

/* library grid */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:clamp(16px,2vw,26px);margin-top:34px}
.lib-card{display:block;cursor:pointer}
.lib-card__cover{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:3/4;background:var(--bg-2);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.lib-card__cover img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.lib-card:hover .lib-card__cover img{transform:scale(1.05)}
.lib-card__read{position:absolute;inset:auto 0 0 0;padding:14px;background:linear-gradient(0deg,rgba(7,6,5,.85),transparent);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);opacity:0;transition:.4s}
.lib-card:hover .lib-card__read{opacity:1}
.lib-card__t{font-size:13px;color:var(--ink-dim);margin-top:12px;line-height:1.4}

/* empty state */
.empty{text-align:center;border:1px dashed var(--line);border-radius:14px;padding:clamp(40px,6vw,70px)}
.empty p{color:var(--ink-dim);font-weight:300;margin-bottom:22px}