:root{--bg:#070708;--panel:#121014;--panel2:#19151b;--text:#f7f2ed;--muted:#9d959a;--line:rgba(255,255,255,.1);--fire:#ff6a1b;--gold:#ffbd43;--bad:#ff5548}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 70% -10%,rgba(255,77,22,.16),transparent 30%),#080708;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}.login-body{min-height:100dvh;display:grid;place-items:center;padding:20px}.login-card{width:min(430px,100%);border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,#181319,#0d0b0e);padding:26px;box-shadow:0 30px 90px #000;text-align:center}.studio-logo{font-size:50px}.login-card small{color:var(--gold);font-weight:900;letter-spacing:.18em}.login-card h1{margin:6px 0;font-size:38px}.login-card p{color:var(--muted)}.login-card form{display:grid;gap:12px;text-align:left;margin:20px 0}.login-card label,.editor label,.form-row label{display:grid;gap:6px;font-size:10px;font-weight:900;letter-spacing:.1em;color:#b7afb4}.login-card input,.editor input,.editor select,.editor textarea,.form-row input,.form-row select{width:100%;border:1px solid #3b3439;border-radius:11px;background:#080708;color:#fff;padding:12px;outline:0}.login-card input:focus,.editor input:focus,.editor select:focus,.editor textarea:focus,.form-row input:focus,.form-row select:focus{border-color:var(--fire)}.login-card button,.button{border:0;border-radius:11px;padding:12px 16px;font-weight:950;cursor:pointer}.login-card button,.button.fire{background:linear-gradient(135deg,#ff4a18,#ff9f2f);color:#160806}.button.dark{background:#242026;color:#eee;border:1px solid var(--line)}.button.danger{background:#371313;color:#ff8a80;border:1px solid #61211d}.login-card a{color:#aaa}.hint{font-size:11px}.alert{padding:10px;border-radius:10px}.alert.bad{background:#35100f;color:#ff918a}
.studio header{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(8,7,8,.9);position:sticky;top:0;z-index:50;backdrop-filter:blur(12px)}header>div{display:flex;flex-direction:column}header small{color:var(--gold);font-size:9px;letter-spacing:.17em;font-weight:900}header strong{font-size:17px}header nav{display:flex;gap:8px}header nav a{color:#d8d2d6;text-decoration:none;font-size:10px;font-weight:900;border:1px solid var(--line);padding:9px 10px;border-radius:10px}.studio-shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:calc(100dvh - 66px)}aside{border-right:1px solid var(--line);padding:16px;background:#0d0b0e;position:sticky;top:66px;height:calc(100dvh - 66px)}.profile-mark{display:flex;align-items:center;gap:10px;padding:10px;margin-bottom:14px;border-bottom:1px solid var(--line)}.profile-mark>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff4d1a,#72231c);font-weight:950}.profile-mark div{display:flex;flex-direction:column}.profile-mark small{color:#827b80;font-size:10px}.nav-btn{width:100%;text-align:left;border:0;background:transparent;color:#a39ba0;padding:12px;border-radius:10px;font-weight:850;cursor:pointer}.nav-btn.active{color:#fff;background:linear-gradient(90deg,rgba(255,91,27,.17),rgba(255,255,255,.02));border-left:3px solid var(--fire)}.save-status{position:absolute;left:16px;right:16px;bottom:18px;font-size:10px;color:#787176;padding:9px;border:1px solid var(--line);border-radius:9px;text-align:center}
main{padding:24px;min-width:0}.tab{display:none}.tab.active{display:block}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:20px}.page-head small{color:var(--gold);font-weight:950;letter-spacing:.17em;font-size:9px}.page-head h1{margin:3px 0 4px;font-size:42px;line-height:.95}.page-head p{margin:0;color:var(--muted)}.head-actions{display:flex;gap:8px;flex-wrap:wrap}.panel{background:linear-gradient(180deg,#141116,#0d0b0e);border:1px solid var(--line);border-radius:18px;padding:17px}.form-row{display:grid;grid-template-columns:1fr 2fr 1fr;gap:12px}.beat-tools{display:flex;gap:7px;margin:14px 0}.sequencer{overflow:auto;border:1px solid var(--line);border-radius:14px;padding:10px;background:#090809}.seq-row{display:grid;grid-template-columns:80px repeat(16,34px);gap:5px;align-items:center;min-width:720px;margin-bottom:6px}.seq-label{font-size:10px;font-weight:950;color:#b7afb3}.seq-cell{width:34px;height:34px;border-radius:7px;border:1px solid #393338;background:#141116;cursor:pointer}.seq-cell.active{background:linear-gradient(135deg,#ff4d18,#ff9a2a);box-shadow:0 0 13px rgba(255,85,24,.25)}.seq-row:nth-child(2) .seq-cell.active{background:linear-gradient(135deg,#6a53d7,#9b82ff)}.seq-row:nth-child(3) .seq-cell.active{background:linear-gradient(135deg,#167d67,#55ddb5)}.seq-row:nth-child(4) .seq-cell.active{background:linear-gradient(135deg,#be7a07,#ffd441)}.legend{font-size:9px;color:#6f696d;margin-top:8px;display:flex;gap:12px}.legend span{color:#aaa}.tip{margin-top:14px;border:1px solid rgba(255,157,46,.22);background:rgba(255,91,24,.06);border-radius:13px;padding:12px;color:#b8b0b5}.tip b{color:#ffb542}
.split{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px}.list-panel{display:grid;align-content:start;gap:8px}.list-item{border:1px solid var(--line);border-radius:12px;padding:12px;background:#111014;cursor:pointer}.list-item.active{border-color:#ff6a1b;background:rgba(255,95,27,.08)}.list-item small{display:block;color:#827a80;font-size:9px}.list-item b{display:block;margin-top:3px}.editor{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}.editor label.wide{grid-column:1/-1}.editor textarea{min-height:110px;resize:vertical}.editor .button{justify-self:start}.danger-row{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px}.boss-preview{grid-column:1/-1;min-height:130px;border-radius:14px;background:radial-gradient(circle,rgba(255,74,22,.24),transparent 35%),#080708;display:grid;place-items:center;font-size:40px}.music-list{display:grid;gap:8px}.music-row{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:11px;padding:10px}.music-row small{color:#827b7f}.upload-panel{margin-bottom:14px}.drop{display:grid!important;place-items:center;text-align:center;border:1px dashed #4c4249;border-radius:14px;padding:26px;cursor:pointer}.drop input{display:none}.drop span{font-size:42px}.drop small{color:#867e83;margin-top:5px}.upload-panel>.button{margin-top:10px}.steps{display:grid;gap:10px}.steps article{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:start;border:1px solid var(--line);border-radius:15px;padding:15px;background:#111014}.steps article>b{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff4e18,#ff9e2f);color:#160806;font-size:22px}.steps h3{margin:2px 0 5px}.steps p{margin:0;color:#9e969b;line-height:1.5}.settings-editor{max-width:760px}.password-panel{max-width:760px;margin-top:14px}
@media(max-width:900px){.studio-shell{grid-template-columns:1fr}aside{position:static;height:auto;display:flex;overflow:auto;gap:6px;padding:9px;border-right:0;border-bottom:1px solid var(--line)}.profile-mark,.save-status{display:none}.nav-btn{white-space:nowrap;width:auto}.nav-btn.active{border-left:0;border-bottom:2px solid var(--fire)}main{padding:16px}.split{grid-template-columns:1fr}.list-panel{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.studio header{height:auto;min-height:60px;padding:10px}.studio-shell{min-height:auto}.page-head{align-items:flex-start;flex-direction:column}.page-head h1{font-size:34px}.form-row,.editor{grid-template-columns:1fr}.editor label.wide,.danger-row{grid-column:auto}.list-panel{grid-template-columns:1fr}.beat-tools{flex-wrap:wrap}header nav a:first-child{display:none}.panel{padding:13px}}
.list-item{width:100%;color:inherit;text-align:left;font:inherit}.editor small{color:#80777d;font-size:10px;line-height:1.4}.editor-preview{min-height:150px;border:1px solid var(--line);border-radius:14px;background:radial-gradient(circle at 50% 20%,rgba(255,85,22,.18),transparent 45%),#080708;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;overflow:hidden}.editor-preview span{color:var(--gold);font-size:10px;font-weight:950;letter-spacing:.12em}.editor-preview strong{font-size:25px}.toggle-row{display:flex!important;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;padding:11px;background:#0b090c}.toggle-row input{width:22px!important;height:22px;accent-color:var(--fire)}.toggle-row span{display:grid}.toggle-row span b{color:#fff;font-size:11px}.boss-preview img{width:100%;height:170px;object-fit:contain;filter:drop-shadow(0 12px 24px #000)}.media-row{gap:14px;flex-wrap:wrap}.media-meta{display:flex;align-items:center;gap:10px;min-width:min(360px,100%)}.media-meta img{width:68px;height:52px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}.audio-mark{width:52px;height:52px;display:grid;place-items:center;border-radius:9px;background:#21161a;font-size:23px}.media-meta div{display:grid;gap:2px}.media-meta code{color:#d4a181;font-size:9px;word-break:break-all}.media-row audio{max-width:360px;width:100%}.muted{color:var(--muted)}.seq-cell.playing{filter:brightness(1.8);box-shadow:0 0 20px rgba(255,183,65,.5)}