:root{--bg:#eef3f8;--card:#ffffff;--text:#1f2937;--muted:#64748b;--primary:#4f46e5;--primary2:#06b6d4;--border:#e2e8f0;--shadow:0 10px 30px rgba(15,23,42,.08)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at top right,#f0f9ff,#eef3f8 38%,#f8fafc);color:var(--text)}
.app{display:flex;min-height:100vh;gap:1rem;padding:1rem}.sidebar{width:250px;background:linear-gradient(180deg,#0f172a,#1e293b);color:#fff;padding:1rem;border-radius:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.45rem;position:sticky;top:1rem;height:calc(100vh - 2rem)}
.sidebar h2{margin:.2rem 0 .6rem}.sidebar a{color:#dbeafe;text-decoration:none;padding:.6rem .7rem;border-radius:12px;transition:.2s}.sidebar a:hover{background:rgba(99,102,241,.25);transform:translateX(2px)}
.content{flex:1;padding:.2rem .4rem}h1{margin:.2rem 0 1rem}h3{margin-top:1.1rem}.card,table,form{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
form,.card{padding:1rem;margin-bottom:1rem}label{display:block;margin-bottom:.7rem;font-size:.92rem;color:var(--muted)}input,select,textarea,button{width:100%;padding:.65rem .72rem;border:1px solid #cbd5e1;border-radius:12px;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:#818cf8;box-shadow:0 0 0 3px rgba(99,102,241,.15)}
button,.btn{background:linear-gradient(90deg,var(--primary),var(--primary2));color:#fff;border:none;cursor:pointer;padding:.65rem 1rem;text-decoration:none;display:inline-block;width:auto;border-radius:12px;font-weight:600}
table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}th,td{padding:.72rem;border-bottom:1px solid var(--border);text-align:left}tr:last-child td{border-bottom:none}
.flash{padding:.8rem 1rem;border-radius:12px;margin:0 0 1rem}.flash.success{background:#dcfce7}.flash.error{background:#fee2e2}
.tracks{list-style:none;padding:0}.track-item{display:grid;grid-template-columns:30px 1.3fr 1.2fr 1fr 100px 1.8fr;gap:.45rem;background:#fff;padding:.55rem;border:1px solid var(--border);margin-bottom:.45rem;border-radius:14px}
.drag{cursor:grab;display:flex;align-items:center;justify-content:center}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.65rem}
@media(max-width:980px){.app{flex-direction:column;padding:.6rem}.sidebar{width:100%;position:static;height:auto}.track-item{grid-template-columns:1fr}}