:root{--blue:#1558d6;--cyan:#35c7f2;--bg:#050a12;--panel:#0b1627;--line:#26364e;--muted:#8fa1ba}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:#f7f9ff;font-family:Helvetica,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}.top{height:68px;padding:0 clamp(18px,4vw,60px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #243248;background:#07101d}.brand{font-weight:900;letter-spacing:.2em}.brand span{margin-left:14px;color:var(--cyan);font-size:11px}.top nav{display:flex;gap:18px;color:#b8c5d8;font-size:13px}.container{width:min(1180px,calc(100% - 36px));margin:0 auto;padding:48px 0}.page-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.page-title h1{margin:4px 0;font-size:clamp(32px,5vw,58px);letter-spacing:-.05em}.page-title>span{color:var(--muted)}.eyebrow{color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.18em}.auth{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 70% 10%,#103b80 0,transparent 34%),#050a12}.auth-card{width:min(460px,calc(100% - 32px));padding:42px;border:1px solid var(--line);border-radius:20px;background:#091423;box-shadow:0 30px 80px #000}.auth-card h1{font-size:38px;margin:26px 0}.auth-card form,.panel form{display:grid;gap:14px}label{display:grid;gap:7px;color:#9db0c9;font-size:12px;font-weight:700}input{width:100%;padding:13px;border:1px solid #32445d;border-radius:9px;color:white;background:#050c16}input[type=file]{padding:22px}.primary,button.primary{display:inline-flex;justify-content:center;padding:13px 18px;border:0;border-radius:9px;color:#fff;background:var(--blue);font-weight:800;cursor:pointer}.hint{margin-top:25px;color:#8798ae;font-size:12px;line-height:1.6}.error,.success{margin:15px 0;padding:13px;border-radius:9px}.error{border:1px solid #9f3240;background:#3d1218}.success{border:1px solid #217a5c;background:#0e3328}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel{padding:24px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.panel h2{margin-top:0}.panel p{color:var(--muted)}.wide{margin-top:18px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:13px;text-align:left;border-bottom:1px solid var(--line)}th{color:#7488a4;font-size:10px;letter-spacing:.12em}.inline{display:inline-block!important;margin-left:12px}.inline button{border:0;color:#85b4ff;background:none;cursor:pointer}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.tab-card{min-height:250px;padding:26px;display:flex;flex-direction:column;border:1px solid #2b3e58;border-radius:16px;background:linear-gradient(145deg,#0d1c31,#08101c)}.tab-card small{color:var(--cyan);font-weight:800}.tab-card h2{margin:28px 0 8px;font-size:27px}.tab-card p{color:var(--muted);flex:1}.empty{padding:45px;border:1px dashed #334965;border-radius:14px;color:var(--muted)}
.player-shell{width:min(1320px,calc(100% - 36px));margin:0 auto;padding:32px 0 55px}.song-head{display:flex;justify-content:space-between;gap:22px;align-items:end}.song-head h1{margin:5px 0;font-size:clamp(30px,4vw,52px)}.status{padding:14px 18px;border-left:2px solid var(--cyan);background:var(--panel)}.sections,.toolbar,.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.sections{margin:22px 0}.sections button,.toolbar button,.controls button{padding:9px 13px;border:1px solid #30435e;border-radius:8px;color:#91a4be;background:#0a1423}.sections button.active,.toolbar button.active,.controls button.active,.controls .play{color:white;background:var(--blue)}.workspace{border:1px solid var(--line);border-radius:15px;overflow:hidden}.toolbar{justify-content:space-between;padding:11px;background:#0a1422}.visuals{display:grid;grid-template-columns:1.45fr .85fr;min-height:410px}.visuals.only{grid-template-columns:1fr}.fretboard{position:relative;min-height:410px;overflow:hidden;background:radial-gradient(ellipse at 50% 16%,rgba(21,88,214,.28),transparent 45%),#050c16}.neck{position:absolute;inset:35px 7% 45px;clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);background:linear-gradient(90deg,#26364e,#0e1c31 7%,#15243b 50%,#0e1c31 93%,#26364e)}.string{position:absolute;top:37px;left:50%;height:calc(100% - 84px);transform-origin:top;width:var(--w);background:#d9e4ef;box-shadow:0 0 5px #fff;clip-path:polygon(35% 0,65% 0,100% 100%,0 100%)}.marker{position:absolute;z-index:5;width:70px;height:70px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--blue);font-size:25px;font-weight:900;box-shadow:0 0 30px #1666df;transform:translate(-50%,-50%)}.marker b{position:absolute;left:50%;bottom:67px;transform:translateX(-50%);padding:7px 10px;border-radius:6px;background:#0d63df;font-size:16px;white-space:nowrap}.left .neck,.left .string,.left .marker{transform:scaleX(-1)}.left .marker span,.left .marker b{transform:scaleX(-1)}.left .marker b{transform:translateX(-50%) scaleX(-1)}.labels{position:absolute;bottom:12px;left:6%;right:6%;display:flex;justify-content:space-between;color:#91a5c0;font-weight:900}.tab{padding:25px 18px;background:#07101c;overflow:auto}.tab-grid{min-width:510px;display:grid;gap:13px}.tab-row{height:40px;position:relative;display:grid;grid-template-columns:28px repeat(6,1fr);align-items:center}.tab-row:after{content:"";position:absolute;left:30px;right:0;top:50%;height:var(--thick);background:#8998aa}.tab-row>span{z-index:2;text-align:center;font-weight:800}.tab-row .string-name{text-align:left;color:#5e789a}.tab-note{padding:7px;border-radius:6px;background:#07101c}.tab-note.current{background:var(--blue)}.controls{padding:16px;background:#0b1627}.controls .timeline{flex:1;min-width:220px}.controls input{padding:0}.teacher{margin-top:13px;padding:16px;border-left:3px solid var(--cyan);background:#0b1627;color:#cbd7e7}.teacher small{display:block;color:var(--cyan);margin-bottom:5px}.player-foot{margin-top:22px;color:#6f829e;font-size:12px}
@media(max-width:850px){.admin-grid,.cards,.visuals{grid-template-columns:1fr}.page-title,.song-head{align-items:start;flex-direction:column}.visuals{min-height:0}.top nav{gap:10px}.brand{font-size:13px}.toolbar{align-items:flex-start;flex-direction:column}.auth-card{padding:28px}}