:root{color-scheme:dark}
*{box-sizing:border-box}
.account-page{
  min-height:100vh; margin:0; background:#09090a; color:var(--cream);
  font-family:'Inter',sans-serif;
}
.account-shell{width:min(1400px,calc(100% - 64px)); margin:0 auto; padding-bottom:70px}
.account-nav{
  min-height:114px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-bottom:1px solid var(--line);
}
.account-logo{width:138px}
.account-nav nav{display:flex; align-items:center; gap:12px}
.account-nav__link,.account-logout{
  min-height:40px; display:inline-flex; align-items:center; gap:8px; padding:0 13px;
  border:0; background:none; color:#85858a; font:inherit; font-size:10px; font-weight:650;
  letter-spacing:.06em; text-decoration:none; text-transform:uppercase; cursor:pointer;
}
.account-nav__link svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6}
.account-nav__link:hover{color:var(--cream)}
.account-logout{border:1px solid var(--line); border-radius:999px}
.account-logout:hover{border-color:#55555a; color:var(--cream)}
.account-hero{
  min-height:310px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px;
  padding:55px clamp(24px,4vw,58px); margin:38px 0 26px; overflow:hidden; position:relative;
  border:1px solid var(--line); border-radius:16px;
  background:
    linear-gradient(108deg,rgba(255,220,21,.09),transparent 38%),
    radial-gradient(circle at 80% 0,rgba(255,255,255,.07),transparent 30rem),
    #101011;
}
.account-hero::after{
  content:""; position:absolute; width:400px; height:400px; right:-180px; bottom:-300px;
  border:1px solid rgba(255,220,21,.35); border-radius:50%; box-shadow:0 0 0 60px rgba(255,220,21,.018),0 0 0 120px rgba(255,220,21,.012);
}
.profile-avatar{
  width:104px; height:104px; display:grid; place-items:center; position:relative; z-index:1;
  border:1px solid rgba(255,220,21,.5); border-radius:50%; background:#171713;
  color:var(--gold); font-family:'Unbounded',sans-serif; font-size:25px; font-weight:750;
  box-shadow:0 0 45px rgba(255,220,21,.07);
}
.account-hero__copy{position:relative; z-index:1}
.account-hero__copy p{margin:0 0 12px; color:var(--gold); font-size:9px; font-weight:750; letter-spacing:.2em; text-transform:uppercase}
.account-hero__copy h1{margin:0; font-family:'Unbounded',sans-serif; font-size:clamp(31px,4vw,54px); line-height:1; letter-spacing:-.05em}
.account-hero__copy>span{display:block; margin-top:14px; color:#727278; font-size:12px}
.account-hero__ticket{
  width:190px; min-height:108px; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; z-index:1; padding:19px; border:1px dashed #3a3a3e; border-radius:10px;
  background:rgba(7,7,8,.52); color:#68686e;
}
.account-hero__ticket span{font-size:8px; font-weight:700; letter-spacing:.16em; text-transform:uppercase}
.account-hero__ticket b{color:var(--cream); font-family:'Unbounded',sans-serif; font-size:15px; letter-spacing:.05em}
.account-layout{display:grid; grid-template-columns:220px minmax(0,1fr); gap:40px; padding-top:22px}
.account-sidebar{position:sticky; top:22px; height:max-content}
.account-tabs{display:grid; gap:5px}
.account-tabs button{
  min-height:48px; display:grid; grid-template-columns:27px 1fr auto; align-items:center; gap:10px;
  width:100%; padding:0 13px; border:1px solid transparent; border-radius:8px;
  background:none; color:#74747a; font:inherit; font-size:11px; text-align:left; cursor:pointer;
  transition:.2s;
}
.account-tabs button>span{color:#44444a; font-size:8px; font-weight:700; letter-spacing:.1em}
.account-tabs button i{min-width:20px; padding:3px 5px; border-radius:999px; background:#202024; color:#77777c; font-size:8px; font-style:normal; text-align:center}
.account-tabs button:hover{background:#111113; color:var(--cream)}
.account-tabs button.is-active{border-color:#2c2c30; background:#151516; color:var(--cream)}
.account-tabs button.is-active>span{color:var(--gold)}
.account-sidebar__note{margin:28px 13px 0; padding-top:20px; border-top:1px solid var(--line); color:#505056; font-size:9px; line-height:1.55}
.account-content{min-width:0}
.account-panel{animation:panel-in .35s ease both}
@keyframes panel-in{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.panel-heading{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px}
.panel-heading>div>span{color:var(--gold); font-size:8px; font-weight:750; letter-spacing:.17em; text-transform:uppercase}
.panel-heading h2{margin:7px 0 0; font-family:'Unbounded',sans-serif; font-size:clamp(24px,3vw,35px); line-height:1; letter-spacing:-.04em}
.panel-heading>a,.panel-heading>button{
  border:0; background:none; color:#85858a; font:inherit; font-size:10px; font-weight:650;
  letter-spacing:.05em; text-decoration:none; text-transform:uppercase; cursor:pointer;
}
.panel-heading>a span{margin-left:7px; color:var(--gold)}
.panel-heading>a:hover,.panel-heading>button:hover{color:var(--cream)}
.account-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.account-stats article{
  min-height:180px; display:flex; flex-direction:column; padding:23px; border:1px solid var(--line);
  border-radius:11px; background:#101011;
}
.account-stats article>span{color:#66666c; font-size:8px; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.account-stats strong{margin-top:auto; font-family:'Unbounded',sans-serif; color:#f0ede5; font-size:38px; line-height:1}
.account-stats p{margin:10px 0 0; color:#5c5c62; font-size:9px}
.account-stats__accent{background:var(--gold)!important; border-color:var(--gold)!important}
.account-stats__accent>span,.account-stats__accent p{color:#675b1c!important}
.account-stats__accent strong{color:#12110a}
.account-stats__accent a{margin-top:auto; color:#12110a; font-size:10px; font-weight:750; text-decoration:none; text-transform:uppercase}
.account-preview{margin-top:50px}
.panel-heading--small h2{font-size:21px}
.saved-preview{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px}
.saved-preview__item{
  min-height:74px; display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center;
  padding:8px; border:1px solid var(--line); border-radius:9px; color:var(--cream); text-decoration:none;
}
.saved-preview__item img{width:48px; height:58px; object-fit:cover; border-radius:4px; background:#202024}
.saved-preview__item span{font-size:10px; font-weight:650; line-height:1.35}
.saved-preview__item:hover{border-color:#49494e; background:#101011}
.account-empty{
  min-height:180px; display:grid; place-content:center; justify-items:center; text-align:center;
  border:1px dashed #2d2d31; border-radius:11px; color:#5d5d63;
}
.account-empty strong{color:var(--cream); font-family:'Unbounded',sans-serif; font-size:17px}
.account-empty p{margin:9px 0 16px; font-size:10px}
.account-empty a{color:var(--gold); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.saved-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.saved-card{min-width:0}
.saved-card__poster{display:block; position:relative; aspect-ratio:2/3; overflow:hidden; border-radius:9px; background:#171719}
.saved-card__poster img{width:100%; height:100%; object-fit:cover; transition:transform .35s,opacity .2s}
.saved-card__poster:hover img{transform:scale(1.025)}
.saved-card__poster span{
  position:absolute; left:12px; top:12px; padding:6px 8px; border-radius:5px;
  background:rgba(8,8,9,.84); color:var(--gold); font-size:8px; font-weight:750; letter-spacing:.1em; text-transform:uppercase;
}
.saved-card__body{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start; padding-top:13px}
.saved-card h3{margin:0; color:var(--cream); font-family:'Unbounded',sans-serif; font-size:14px; line-height:1.25; letter-spacing:-.025em}
.saved-card p{margin:7px 0 0; color:#5e5e64; font-size:9px}
.saved-card button{
  width:31px; height:31px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:50%; background:none; color:#696970; cursor:pointer;
}
.saved-card button:hover{border-color:#714943; color:#d57a70}
.saved-card button svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6}
.profile-form{padding:28px; border:1px solid var(--line); border-radius:12px; background:#101011}
.profile-form__grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.profile-form label:not(.profile-genres label){display:grid; gap:8px}
.profile-form label>span,.profile-form legend{color:#8a898b; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.profile-form input:not([type=checkbox]){
  width:100%; height:48px; padding:0 14px; border:1px solid #303034; border-radius:7px;
  outline:none; background:#0a0a0b; color:var(--cream); font:inherit; font-size:13px;
}
.profile-form input:focus{border-color:#686861; box-shadow:0 0 0 3px rgba(255,220,21,.05)}
.profile-form input:disabled{color:#595960; cursor:not-allowed}
.profile-form small{color:#55555b; font-size:8px}
.profile-form fieldset{margin:34px 0 0; padding:25px 0 0; border:0; border-top:1px solid var(--line)}
.profile-form legend{padding:0; transform:translateY(30px)}
.profile-genres{display:flex; flex-wrap:wrap; gap:8px; padding-top:22px}
.profile-genres input{position:absolute; opacity:0}
.profile-genres span{display:block; padding:9px 13px; border:1px solid #303034; border-radius:999px; color:#75757b; font-size:10px; cursor:pointer}
.profile-genres input:checked+span{border-color:var(--gold); background:rgba(255,220,21,.09); color:var(--gold)}
.profile-form__actions{display:flex; align-items:center; justify-content:flex-end; gap:18px; margin-top:30px}
.profile-form__actions>span{color:#78a278; font-size:10px}
.profile-form__actions button{
  min-height:44px; padding:0 18px; border:0; border-radius:7px; background:var(--gold);
  color:#12110a; font:inherit; font-size:9px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
}
.account-guard{min-height:calc(100vh - 185px); display:grid; place-content:center; justify-items:center; text-align:center}
.account-guard img{width:140px}
.account-guard h1{margin:28px 0 8px; font-family:'Unbounded',sans-serif; font-size:32px}
.account-guard p{margin:0; color:var(--muted); font-size:13px}
.account-guard div{display:flex; gap:10px; margin-top:25px}
.account-guard a{padding:12px 18px; border:1px solid var(--line); border-radius:7px; color:var(--cream); font-size:10px; font-weight:700; text-decoration:none; text-transform:uppercase}
.account-guard a:last-child{border-color:var(--gold); background:var(--gold); color:#111}

@media(max-width:900px){
  .account-layout{grid-template-columns:1fr}
  .account-sidebar{position:static}
  .account-tabs{display:grid; grid-template-columns:repeat(3,1fr)}
  .account-sidebar__note{display:none}
}
@media(max-width:720px){
  .account-shell{width:calc(100% - 32px)}
  .account-nav{min-height:88px}
  .account-logo{width:108px}
  .account-hero{grid-template-columns:auto 1fr; min-height:250px; gap:20px; padding:32px 22px}
  .profile-avatar{width:72px; height:72px; font-size:18px}
  .account-hero__ticket{display:none}
  .account-stats{grid-template-columns:1fr}
  .account-stats article{min-height:135px}
  .account-stats strong{margin-top:24px}
  .saved-preview,.saved-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-form__grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .account-nav__link{font-size:0; width:40px; justify-content:center}
  .account-nav__link svg{width:19px; height:19px}
  .account-logout{font-size:9px}
  .account-hero{grid-template-columns:1fr; text-align:center}
  .profile-avatar{margin:auto}
  .account-tabs button{grid-template-columns:1fr; justify-items:center; padding:7px 4px; font-size:9px}
  .account-tabs button>span,.account-tabs button i{display:none}
  .panel-heading{align-items:flex-start; flex-direction:column}
  .saved-grid{gap:12px}
  .saved-card h3{font-size:11px}
  .saved-card__body{grid-template-columns:1fr}
  .saved-card button{width:100%; border-radius:7px}
  .profile-form{padding:20px 16px}
}
@media(prefers-reduced-motion:reduce){.account-panel{animation:none}}