/* Aura Music Studio: main site. Every class and variable from the old file is kept, so all pages restyle without markup changes. */
:root{
  --bg:#07070c;--card:#0d0d16;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);--txt:#f5f4fb;--mut:#9a98b6;
  --acc:#8b6cff;--acc2:#ffb45a;--blue:#4aa8ff;--good:#3ddc97;--bad:#ff6b7a;--field:#09090f;
  --head:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --body:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;color-scheme:dark}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 46% at 50% -12%,color-mix(in srgb,var(--acc) 24%,transparent),transparent 72%),radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.3px) 0 0/26px 26px;
  -webkit-mask-image:linear-gradient(#000 0,#000 35%,transparent 92%);mask-image:linear-gradient(#000 0,#000 35%,transparent 92%)}
h1,h2,h3{font-family:var(--head);letter-spacing:-.02em;line-height:1.12}
a{color:var(--acc);text-decoration:none}
a:hover{color:color-mix(in srgb,var(--acc) 70%,#fff)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--acc) 40%,transparent)}

/* navigation: floating glass bar */
.nav{position:sticky;top:14px;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;width:min(1120px,calc(100% - 32px));margin:14px auto 0;padding:9px 10px 9px 22px;background:rgba(13,13,22,.68);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line);border-radius:99px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:10px;color:var(--txt);font:700 1.2rem var(--head);letter-spacing:-.02em;justify-self:start}
.brand:hover{color:var(--txt)}.brand span:not(.bars){color:var(--mut);font-weight:500}
.bars{display:flex;align-items:center;gap:3px;height:24px}
.bars i{width:4px;border-radius:3px;background:linear-gradient(var(--acc2),var(--acc))}
.bars i:nth-child(1){height:10px}.bars i:nth-child(2){height:17px}.bars i:nth-child(3){height:24px}.bars i:nth-child(4){height:14px}.bars i:nth-child(5){height:8px}
.links{display:flex;gap:6px;align-items:center}
.links.mid{gap:2px;padding:4px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:99px}
.links.end{justify-self:end}
.links a:not(.btn),.linkbtn{color:var(--mut);padding:7px 16px;border-radius:99px;font-weight:500;font-size:.93rem;transition:color .15s,background .15s}
.links a:not(.btn):hover,.linkbtn:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.links a.on{color:var(--txt);background:color-mix(in srgb,var(--acc) 26%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent)}
.nav-av{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--line2)}
.wrap{max-width:1120px;margin:0 auto;padding:44px 24px 80px;min-height:72vh}

/* hero */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:84px 0 70px}
.hero h1{font-size:clamp(2.9rem,9vw,5.7rem);font-weight:700;line-height:1.02;margin:30px 0 24px;letter-spacing:-.04em}
.hero h1 em{font-style:normal;background:linear-gradient(95deg,var(--acc) 5%,var(--blue) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#a3a1c2;font-size:1.2rem;max-width:560px;margin:0 0 36px}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.03);color:#cdcbe6;font-size:.88rem;font-weight:500}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:#2ee6d6;box-shadow:0 0 8px #2ee6d6}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .row{justify-content:center}

/* stat strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);max-width:780px;margin:0 auto 72px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.02);overflow:hidden}
.strip div{padding:24px 28px;border-left:1px solid var(--line)}
.strip div:first-child{border-left:0}
.strip b{display:block;font:600 1.5rem var(--head);letter-spacing:-.02em}
.strip span{color:var(--mut);font-size:.95rem}

/* player mock-up */
.mock{background:linear-gradient(165deg,#16142b,#0b0a18);border:1px solid #2b2650;border-radius:28px;padding:22px;box-shadow:0 40px 90px color-mix(in srgb,var(--acc) 22%,transparent);display:grid;gap:8px;max-width:360px;margin:0 auto 72px}
.art{aspect-ratio:1;border-radius:20px;background:linear-gradient(135deg,var(--acc2),var(--acc) 58%,#4b2fb0)}
.eq{display:flex;gap:5px;align-items:flex-end;height:42px;margin-top:10px}
.eq i{flex:1;background:linear-gradient(var(--acc2),var(--acc));border-radius:3px;animation:b 1.1s ease-in-out infinite alternate}
.eq i:nth-child(2n){animation-delay:.2s}.eq i:nth-child(3n){animation-delay:.45s}.eq i:nth-child(5n){animation-delay:.7s}
@keyframes b{from{height:15%}to{height:100%}}
@media(prefers-reduced-motion:reduce){.eq i{animation:none;height:60%}html{scroll-behavior:auto}}

/* layout grids */
.grid3,.plans,.dash{display:grid;gap:18px}
.grid3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:36px}
.plans{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.dash{grid-template-columns:1.15fr 1fr;align-items:start;margin-bottom:18px}
.col{display:grid;gap:18px;align-content:start;min-width:0}

/* cards */
.card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:24px;padding:26px;transition:border-color .2s}
.card h2,.card h3{margin:0 0 10px}
.card.glow{border-color:color-mix(in srgb,var(--acc) 40%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 13%,transparent),rgba(255,255,255,.015))}
.card.danger{border-color:rgba(255,107,122,.32)}
.ic{width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc);display:grid;place-items:center;font-size:1.3rem;margin-bottom:12px}
.card ul{padding-left:18px;color:var(--mut)}
.big{font:700 1.7rem var(--head);margin:4px 0 10px;letter-spacing:-.02em}
.narrow{max-width:420px;margin:48px auto}

/* profile */
.profile{display:flex;gap:18px;align-items:center;margin-bottom:26px}.profile h1{margin:0;font-size:2.1rem;letter-spacing:-.03em}
.avatar{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font:700 1.8rem var(--head);color:#14101f;background:linear-gradient(135deg,var(--acc2),var(--acc));box-shadow:0 0 0 3px var(--bg),0 0 0 4px color-mix(in srgb,var(--acc) 60%,transparent),0 0 30px color-mix(in srgb,var(--acc) 35%,transparent)}
img.avatar{object-fit:cover;background:#222;padding:0}
.dc{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:10px}.dc p{margin:4px 0 0}

/* forms */
label{display:block;margin:12px 0;font-size:.9rem;font-weight:500;color:var(--mut)}
input,select,textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;background:var(--field);color:var(--txt);border:1px solid var(--line);border-radius:14px;font:1rem var(--body);transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:var(--line2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 24%,transparent)}
::placeholder{color:#605e7d}
textarea{resize:vertical;min-height:80px}
input[type=color]{height:44px;padding:4px;cursor:pointer}
input[type=checkbox]{display:inline-block;width:auto;margin:0 8px 0 0;accent-color:var(--acc)}
label.chk{color:var(--txt);font-size:1rem}
input[type=file]{padding:8px;color:var(--mut);font-size:.9rem}
input[type=file]::file-selector-button{background:#1a1a2c;color:var(--txt);border:0;border-radius:99px;padding:7px 14px;margin-right:10px;font-weight:600;cursor:pointer}
form.inline{display:flex;gap:10px;align-items:center}form.inline input{margin:0;flex:1;min-width:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 16px}

/* buttons */
.btn{display:inline-block;background:var(--acc);color:#0d0a1c;border:1px solid transparent;border-radius:99px;padding:12px 26px;font:600 1rem var(--body);cursor:pointer;transition:filter .15s,transform .12s,box-shadow .15s}
.btn:hover{filter:brightness(1.12);color:#0d0a1c;transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.lg{padding:17px 38px;font-size:1.05rem;box-shadow:0 0 44px color-mix(in srgb,var(--acc) 50%,transparent)}
.btn.ghost{background:rgba(255,255,255,.03);color:var(--txt);border-color:var(--line)}
.btn.ghost:hover{background:rgba(255,255,255,.08);border-color:var(--line2);color:var(--txt);filter:none}
.btn.small{padding:9px 18px;font-size:.93rem}
.btn.red{background:var(--bad);color:#2a0b10}.btn.red:hover{color:#2a0b10}
.linkbtn{background:none;border:0;cursor:pointer;font:500 .93rem var(--body)}

/* text states */
.muted{color:var(--mut);font-size:.93rem}.err{color:#ff8a96}.ok{color:var(--good)}
.notice{padding:14px 18px;border-radius:16px;border:1px solid var(--line);background:var(--card);margin:0 0 18px}
.notice.ok{border-color:rgba(61,220,151,.45);background:rgba(61,220,151,.07)}
.notice.err{border-color:rgba(255,107,122,.5);background:rgba(255,107,122,.07)}
.tag{display:inline-block;padding:3px 12px;border-radius:99px;background:rgba(255,255,255,.08);font-size:.85rem;font-weight:600}
.tag.ok{background:rgba(61,220,151,.16);color:#b7f5d8}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));border-radius:99px}
.ann{border-left:3px solid var(--acc);padding:8px 14px;margin:8px 0;background:rgba(255,255,255,.03);border-radius:0 14px 14px 0}
.ann.warning{border-color:#f2c53d}.ann.update{border-color:#5b8cff}.ann b{display:block}
.split{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
code{background:var(--field);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.85em}

/* danger zone */
.zone h3{margin-bottom:4px}
.zrow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.zrow:first-of-type{margin-top:10px}.zrow p{margin:2px 0 0;max-width:560px}
details.zrow{display:block}
details.zrow summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;list-style:none}
details.zrow summary::-webkit-details-marker{display:none}
details.zrow[open] summary .btn{display:none}
details.zrow form{margin-top:14px;max-width:360px}

/* confirm dialog */
.modal{position:fixed;inset:0;background:rgba(3,3,8,.78);backdrop-filter:blur(6px);display:none;place-items:center;z-index:50;padding:20px}
.modal.open{display:grid}
.modal-box{background:#0e0e18;border:1px solid var(--line2);border-radius:24px;padding:26px;width:100%;max-width:420px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal-box h3{margin:0 0 8px}

/* admin / manage panel */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--line)}
.tab{color:var(--mut);padding:10px 16px;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:600}
.tab:hover{color:var(--txt)}.tab.active{color:var(--acc);border-color:var(--acc)}
.tscroll{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:.93rem}
table.t th{text-align:left;color:var(--mut);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}

.foot{text-align:center;color:var(--mut);padding:30px;font-size:.88rem;border-top:1px solid var(--line)}

@media(max-width:860px){
  .hero{padding:44px 0 44px}
  .strip{grid-template-columns:1fr}.strip div{border-left:0;border-top:1px solid var(--line)}.strip div:first-child{border-top:0}
  .dash{grid-template-columns:1fr}
  .nav{grid-template-columns:1fr auto;border-radius:26px;padding:10px 12px 10px 16px;top:8px;margin-top:8px}
  .links.mid{grid-column:1/-1;grid-row:2;justify-content:center}
  .wrap{padding:28px 16px 56px}.brand span:not(.bars){display:none}
}
/* premium support tickets */
.lock{max-width:560px;margin:30px auto}.lock ul{margin:0 0 16px}
.tk-list{display:grid;gap:8px}
.tk-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02);color:var(--txt);transition:border-color .15s,background .15s}
.tk-row:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--line));background:rgba(255,255,255,.045);color:var(--txt)}
.tk-row.done{opacity:.65}.tk-row b{overflow-wrap:anywhere}
.tag.warn{background:rgba(255,180,90,.16);color:var(--acc2)}
.thread{display:grid;gap:14px}
.thread .agent{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line)}
.msg{max-width:88%;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.msg.me{justify-self:end;background:color-mix(in srgb,var(--acc) 14%,transparent);border-color:color-mix(in srgb,var(--acc) 32%,var(--line))}
.msg.staff{justify-self:start;border-color:rgba(61,220,151,.28)}
.msg .mh{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px;font-size:.92rem}.msg .mh .muted{margin-left:auto;font-size:.8rem}
.msg .mb{overflow-wrap:anywhere;line-height:1.6}
.sysmsg{text-align:center;color:var(--mut);font-size:.85rem}
form.rate{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}form.rate .muted{margin-right:6px}
@media(max-width:860px){.msg{max-width:100%}}