:root{--bg:#080a10;--panel:#10131b;--panel2:#151923;--line:#252a37;--text:#f7f8fb;--muted:#9298a8;--cyan:#45c6f2;--violet:#7163ec;--magenta:#d34acb;--gradient:linear-gradient(100deg,var(--cyan),var(--violet) 52%,var(--magenta));font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 65% -20%,#31266a33,transparent 36%),var(--bg)}
button,input,select{font:inherit}
.ambient{position:fixed;filter:blur(90px);opacity:.14;pointer-events:none}
.ambient-a{width:360px;height:360px;background:#46c6f2;left:30%;top:15%}
.ambient-b{width:420px;height:420px;background:#d34acb;right:-220px;bottom:-120px}
.sidebar{position:fixed;inset:0 auto 0 0;width:258px;padding:28px 20px 22px;border-right:1px solid #1d212b;background:#0a0c12e8;backdrop-filter:blur(18px);display:flex;flex-direction:column;z-index:5}
.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;padding:0 8px 35px}
.brand-mark{width:39px;height:39px;display:grid;place-items:center;clip-path:polygon(50% 0,100% 100%,0 100%);padding-top:7px;background:var(--gradient);font:15px Audiowide}
.brand strong{font:20px Audiowide;display:block}
.brand small{display:block;color:#777e91;font-size:8px;letter-spacing:4px;margin-top:3px}
.sidebar nav{display:grid;gap:6px}
.nav-item{border:0;background:transparent;color:#858b99;padding:12px 14px;border-radius:10px;text-align:left;display:flex;gap:12px;align-items:center;cursor:pointer}
.nav-item span{font-size:20px;width:22px;text-align:center}
.nav-item label{cursor:pointer;font-weight:500}
.nav-item:hover,.nav-item.active{background:#ffffff0a;color:white}
.nav-item.active{box-shadow:inset 2px 0 var(--cyan)}
.security-card{margin-top:auto;border:1px solid var(--line);border-radius:13px;padding:14px;display:flex;gap:10px;background:#ffffff03}
.status-dot{width:8px;height:8px;border-radius:50%;background:#4ce5b1;box-shadow:0 0 10px #4ce5b1;display:inline-block;flex:0 0 auto;margin-top:5px}
.security-card strong{font-size:12px}
.security-card p{font-size:10px;color:var(--muted);line-height:1.5;margin:5px 0 0}
.profile{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);margin-top:16px;padding:18px 6px 0}
.avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--gradient);font-weight:700;font-size:12px}
.profile strong,.profile small{display:block;font-size:12px}
.profile small{color:var(--muted);font-size:9px;margin-top:2px}
.profile button{margin-left:auto;background:none;border:0;color:#767c8b}
main{margin-left:258px;max-width:1450px;padding:0 42px 70px}
header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1a1e27}
header h1{font-size:20px;margin:5px 0 0}
.kicker,.eyebrow{font-size:9px;letter-spacing:2.5px;color:var(--cyan);font-weight:700;margin:0}
.header-actions{display:flex;gap:10px}
.header-actions select,.icon-button{color:#dce0e8;background:#11151e;border:1px solid var(--line);border-radius:9px;height:38px;padding:0 13px}
.icon-button{width:38px}
.view{display:none}
.view.active{display:block}
.hero{margin:34px 0 22px;border:1px solid #354168;border-radius:18px;min-height:176px;padding:34px 38px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative;background:linear-gradient(115deg,#132432 0%,#161a37 50%,#301637 100%)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#45c6f214,#7163ec18,#d34acb1e)}
.hero>div{position:relative}
.hero h2{font-size:31px;letter-spacing:-1.2px;margin:11px 0}
.hero p:last-child{color:#b3b7c3;font-size:13px}
.sound-bars{display:flex;align-items:center;gap:7px;height:80px;opacity:.8}
.sound-bars i{width:5px;border-radius:9px;background:var(--gradient);height:25%}
.sound-bars i:nth-child(2),.sound-bars i:nth-child(8){height:50%}
.sound-bars i:nth-child(3),.sound-bars i:nth-child(7){height:80%}
.sound-bars i:nth-child(4),.sound-bars i:nth-child(6){height:60%}
.sound-bars i:nth-child(5){height:100%}
form{background:#0d1017;border:1px solid #202530;border-radius:18px}
.form-section{display:grid;grid-template-columns:48px 220px 1fr;gap:18px;padding:32px;border-bottom:1px solid var(--line)}
.section-number{width:38px;height:38px;border:1px solid #343a49;border-radius:10px;display:grid;place-items:center;color:#737a8c;font-size:11px}
.section-copy h3{margin:4px 0 8px;font-size:16px}
.section-copy p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}
.section-copy em{font-style:normal;font-size:9px;color:#8f96a7;border:1px solid #333947;border-radius:20px;padding:3px 7px;margin-left:5px}
.form-grid{display:grid;grid-template-columns:1fr 180px;gap:18px}
.field{display:grid;gap:8px;align-content:start}
.field span{font-size:11px;color:#c1c5cf;font-weight:600}
.field input,.field select{width:100%;height:46px;border:1px solid #2a303c;border-radius:9px;background:#131720;color:white;padding:0 14px;outline:none}
.field input:focus,.field select:focus{border-color:#7163ec;box-shadow:0 0 0 3px #7163ec20}
.upload-tile{height:112px;border:1px dashed #3a4151;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:#11151d;text-align:center}
.upload-tile:hover,.upload-tile.selected{border-color:var(--cyan);background:#45c6f207}
.upload-tile input,.audio-drop input{display:none}
.upload-icon{font-size:18px;color:var(--cyan);margin-bottom:6px}
.upload-tile strong{font-size:10px}
.upload-tile small{font-size:8px;color:var(--muted);margin-top:5px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-section{grid-template-rows:auto auto auto}
.music-section .song-title-field,.music-section .audio-drop,.music-section .file-list,.music-section .metadata-grid,.music-section .ai-review,.music-section .analysis-result{grid-column:3}
.audio-drop{border:1px dashed #465064;border-radius:13px;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#151923,#10131a);cursor:pointer}
.audio-drop:hover,.audio-drop.dragging{border-color:var(--cyan);background:#45c6f208}
.wave-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--gradient);font-size:27px;margin-bottom:14px}
.audio-drop strong{font-size:14px}
.audio-drop small{color:var(--muted);font-size:10px;margin:7px 0 13px}
.audio-drop button{border:1px solid #353c4b;background:#171b25;color:white;border-radius:8px;padding:8px 12px;font-size:10px}
.file-list{display:grid;gap:8px}
.file-list>div{display:flex;align-items:center;gap:11px;padding:10px 13px;background:#12161e;border:1px solid #242a35;border-radius:10px}
.track-number{font-size:9px;color:#666d7c}
.track-icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#252a39;color:#b8a5ff}
.file-list div div{display:grid}
.file-list strong{font-size:11px}
.file-list small{font-size:8px;color:var(--muted);margin-top:3px}
.ready-pill{margin-left:auto;font-size:8px;color:#4ce5b1;background:#4ce5b111;border-radius:20px;padding:4px 8px}
.metadata-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:8px}
.form-footer{display:flex;align-items:center;justify-content:space-between;padding:22px 32px}
.form-footer p{color:var(--muted);font-size:10px;display:flex;gap:9px}
.primary-button{border:0;color:white;background:var(--gradient);border-radius:10px;height:44px;padding:0 7px 0 18px;display:flex;align-items:center;gap:16px;font-weight:600;font-size:11px;cursor:pointer;box-shadow:0 9px 30px #7163ec30}
.primary-button b{width:31px;height:31px;border-radius:7px;background:#ffffff20;display:grid;place-items:center}
.primary-button:disabled{opacity:.55;cursor:wait}
.page-title{padding:38px 0 20px}
.page-title h2{font-size:28px;margin:0}
.page-title p{color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.stats article{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:24px}
.stats small{display:block;color:var(--muted)}
.stats strong{display:block;font-size:35px;margin-top:15px}
.empty-view{text-align:center;padding:150px 20px}
.empty-view>span{font-size:45px;color:var(--violet)}
.empty-view p{color:var(--muted)}
#toast{position:fixed;right:25px;bottom:25px;transform:translateY(30px);opacity:0;pointer-events:none;background:#15251f;border:1px solid #2d765c;padding:15px 19px;border-radius:11px;font-size:12px;transition:.25s;z-index:20}
#toast.show{transform:none;opacity:1}
#toast.error{background:#2a151b;border-color:#8c334b}
.song-title-field{margin-bottom:2px}.ai-review{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 17px;border:1px solid #31384a;border-radius:12px;background:linear-gradient(100deg,#45c6f208,#7163ec0d,#d34acb0a)}
.ai-review>div{display:flex;align-items:center;gap:12px}.ai-review strong,.ai-review small{display:block}.ai-review strong{font-size:11px}.ai-review small{font-size:9px;color:var(--muted);margin-top:4px}.ai-orb{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--gradient);font-weight:700;font-size:10px}.ai-review button{border:1px solid #7163ec;color:white;background:#7163ec22;border-radius:8px;padding:10px 13px;font-size:10px;cursor:pointer}.ai-review button:disabled{opacity:.55}
.analysis-result{padding:16px 18px;border-radius:11px;border:1px solid #303747;background:#12161e}.analysis-result.approved{border-color:#2d765c}.analysis-result.rejected{border-color:#8c334b}.analysis-result>strong{font-size:12px}.analysis-result p,.analysis-result small{font-size:9px;color:var(--muted);line-height:1.5}.analysis-result h4{font-size:10px;margin:14px 0 8px}.analysis-result ul{margin:0;padding-left:18px}.analysis-result li{font-size:10px;margin:7px 0}.analysis-result li small{display:block}
@media(max-width:1000px){.sidebar{width:78px}
.brand span:last-child,.nav-item label,.security-card,.profile>div:not(.avatar),.profile button{display:none}
.brand{padding-left:0}
.nav-item{justify-content:center}
.profile{justify-content:center}
main{margin-left:78px;padding:0 24px}
.form-section{grid-template-columns:45px 1fr}
.section-copy{grid-column:2}
.form-grid,.music-section .song-title-field,.music-section .audio-drop,.music-section .file-list,.music-section .metadata-grid,.music-section .ai-review,.music-section .analysis-result{grid-column:2}
.metadata-grid{grid-template-columns:1fr}
.stats{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){main{margin-left:0;padding:0 14px}
.sidebar{position:fixed;inset:auto 0 0 0;width:auto;height:64px;flex-direction:row;z-index:10;padding:8px 12px}
.brand,.security-card,.profile{display:none}
.sidebar nav{display:flex;width:100%;justify-content:space-around}
.nav-item{padding:9px 15px}
.nav-item span{font-size:18px}
header{height:75px}
.hero{padding:26px 22px}
.hero h2{font-size:24px}
.sound-bars{display:none}
.form-section{padding:22px 18px;grid-template-columns:36px 1fr}
.form-grid{grid-template-columns:1fr}
.metadata-grid{grid-template-columns:1fr}
.form-footer{align-items:flex-start;gap:15px;flex-direction:column;padding:20px}
.primary-button{width:100%;justify-content:space-between}
.stats{grid-template-columns:1fr 1fr}
.view{padding-bottom:70px}
.ai-review{align-items:flex-start;flex-direction:column}.ai-review button{width:100%}
}

.password-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
.password-wrapper input { width: 100%; padding-right: 40px; box-sizing: border-box; }
.toggle-password { position: absolute; right: 8px; background: transparent; border: none; color: #94a3b8; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: color 0.2s, background 0.2s; }
.toggle-password:hover { color: #ffffff; background: rgba(255,255,255,0.1); }


.static-icon { position: absolute; right: 12px; color: #94a3b8; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.profile-menu { position: absolute; bottom: calc(100% + 10px); right: 0; left: 0; background: #11151d; border: 1px solid #242a35; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 50; }
.profile-menu button { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; background: transparent; border: none; color: #858b99; text-align: left; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.profile-menu button:hover { background: #ffffff0a; color: white; }
.profile-menu button.active { background: #ffffff11; color: #4ce5b1; }