:root{--bg:#0a0a0c;--surface:#131318;--surface-2:#1c1c24;--text:#ececf1;--text-dim:#8a8a99;--accent:#b388ff;--accent-2:#7c4dff;--border:#26262f}*{box-sizing:border-box}body,html{margin:0;padding:0}body{background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,sans-serif;font-size:15px;line-height:1.45}a,body{color:var(--text)}a{text-decoration:none}a:hover{color:var(--accent)}.app-shell{display:grid;grid-template-rows:auto 1fr auto;min-height:100vh}.topbar{display:flex;align-items:center;gap:24px;padding:14px 24px;border-bottom:1px solid var(--border);background:rgba(10,10,12,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:-webkit-sticky;position:sticky;top:0;z-index:50}.brand{font-weight:700;letter-spacing:-.02em;font-size:18px;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.topbar nav{display:flex;gap:16px;color:var(--text-dim)}.topbar-right{margin-left:auto;display:flex;gap:12px;align-items:center}.topbar-search input{background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:7px 12px;border-radius:999px;font-size:13px;width:220px;outline:none}.topbar-search input:focus{border-color:var(--accent)}.topbar-login{background:var(--accent);color:#0a0a0c;border:none;padding:7px 16px;border-radius:999px;font-weight:600;cursor:pointer;font-size:13px}.topbar-user{display:flex;gap:12px;align-items:center;font-size:13px}.topbar-user a{font-size:18px}.link-btn,.topbar-user-name{color:var(--text-dim)}.link-btn{background:none;border:none;cursor:pointer;font-size:13px;text-decoration:underline;padding:0}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;width:92%;max-width:380px}.modal-tabs{display:flex;gap:4px;margin-bottom:18px}.modal-tab{flex:1 1;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);padding:8px;border-radius:8px;cursor:pointer;font-size:14px}.modal-tab.active{background:var(--accent);color:#0a0a0c;font-weight:600;border-color:var(--accent)}.modal-form{display:grid;grid-gap:12px;gap:12px}.modal-form input{background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:11px 14px;border-radius:10px;font-size:14px;outline:none}.modal-form input:focus{border-color:var(--accent)}.modal-error{background:#3a1f1f;border:1px solid #6b2c2c;color:#ffb4b4;padding:10px;border-radius:8px;font-size:13px}.modal-submit{background:var(--accent);color:#0a0a0c;border:none;padding:11px;border-radius:10px;font-weight:600;cursor:pointer;font-size:14px}.track-card{position:relative}.like-btn{position:absolute;top:16px;right:16px;background:rgba(10,10,12,.7);border:none;color:white;width:32px;height:32px;border-radius:999px;cursor:pointer;font-size:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.like-btn.liked{color:#ff5f7e}.like-btn:hover{background:rgba(10,10,12,.9)}.content{padding:24px 24px 110px;max-width:1200px;margin:0 auto;width:100%}.genre-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:20px;scrollbar-width:thin}.genre-chips::-webkit-scrollbar{height:4px}.genre-chips::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:4px}.chip{background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:13px;padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}.chip-active,.chip:hover{border-color:var(--accent)}.chip-active{background:var(--accent);color:#0a0a0c;font-weight:600}.chip-count{opacity:.55;margin-left:4px;font-size:11px}.chip-active .chip-count{opacity:.7}.track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:16px;gap:16px}.track-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;cursor:pointer;transition:transform .15s,border-color .15s}.track-card:hover{transform:translateY(-2px);border-color:var(--accent)}.track-card .cover{aspect-ratio:1;background:linear-gradient(135deg,var(--accent-2),var(--surface-2));border-radius:8px;margin-bottom:10px}.track-card .title{font-weight:600;margin-bottom:2px}.track-card .author{color:var(--text-dim);font-size:13px}.track-card .ai-tag{display:inline-block;margin-top:8px;font-size:11px;padding:2px 8px;background:var(--surface-2);border-radius:999px;color:var(--text-dim)}.player-bar{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--border);padding:10px 16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;grid-gap:16px;gap:16px;z-index:60}.player-meta{display:flex;align-items:center;gap:12px;min-width:0}.player-meta .mini-cover{width:44px;height:44px;border-radius:6px;background:linear-gradient(135deg,var(--accent-2),var(--surface-2));flex-shrink:0}.player-meta .text{min-width:0}.player-meta .text .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-meta .text .a{color:var(--text-dim);font-size:13px}.player-controls{display:flex;align-items:center;gap:12px}.player-controls button{background:var(--accent);color:#0a0a0c;border:none;width:40px;height:40px;border-radius:999px;font-size:16px;font-weight:700;cursor:pointer}.player-controls button:hover{background:var(--accent-2);color:white}.player-progress{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:12px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.player-progress .bar{height:4px;width:100%;background:var(--surface-2);border-radius:999px;overflow:hidden}.player-progress .bar>div{height:100%;background:var(--accent);width:0;transition:width .2s linear}.empty-state{text-align:center;padding:80px 24px;color:var(--text-dim)}.empty-state h2{color:var(--text);margin-bottom:8px}