*,:before,:after{box-sizing:border-box;margin:0;padding:0}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}:root{--bg:#0d0d0d;--surface:#1a1a1a;--border:#333;--accent:#6c63ff;--accent-fg:#fff;--text:#f0f0f0;--muted:#888;--radius:10px}[data-theme=light]{--bg:#f5f5f5;--surface:#fff;--border:#e0e0e0;--accent:#1a1a1a;--accent-fg:#fff;--text:#111;--muted:#666}html,body,#root{background:var(--bg);height:100%;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:15px;line-height:1.5}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}input,textarea,select{font-family:inherit;font-size:inherit;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);outline:none;width:100%;padding:10px 14px;transition:border-color .15s}input:focus,textarea:focus,select:focus{border-color:var(--accent)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.hide-scrollbar{scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}.app-shell{height:100vh;display:flex;overflow:hidden}.sidebar{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:220px;padding:0;display:flex;overflow:hidden}.sidebar-logo{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:20px 20px 16px;display:flex}.sidebar-nav{flex-direction:column;flex:1;gap:2px;padding:12px 10px;display:flex;overflow-y:auto}.nav-item{color:var(--muted);cursor:pointer;border-radius:8px;align-items:center;gap:12px;padding:10px 12px;font-size:14px;font-weight:500;text-decoration:none;transition:background .12s,color .12s;display:flex}.nav-item:hover{color:var(--text);background:#ffffff0f}.nav-item.active{color:var(--text);background:#ffffff1a}.nav-item svg{opacity:.7;flex-shrink:0;transition:opacity .12s}.nav-item:hover svg,.nav-item.active svg{opacity:1}.sidebar-bottom{border-top:1px solid var(--border);padding:10px}.app-content{background:var(--bg);flex-direction:column;flex:1;display:flex;overflow:hidden}.app-main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:32px;overflow-y:auto}.mobile-nav,.mobile-header,.player-progress-bar,.player-time-mobile{display:none}.player-volume{appearance:none;cursor:pointer;border:none;border-radius:999px;outline:none;height:4px}.player-volume::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:12px;height:12px;margin-top:-4px}.player-volume::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:12px;height:12px}.player-volume::-webkit-slider-runnable-track{border-radius:999px;height:4px}.player-volume::-moz-range-track{border-radius:999px;height:4px}.player-mute-btn,.mobile-player{display:none}.mobile-mini-bar{background:var(--surface);border-top:1px solid var(--border);flex-shrink:0;align-items:center;gap:10px;height:64px;padding:0 12px;display:flex;overflow:hidden}.mobile-player-drawer{z-index:200;background:var(--bg);flex-direction:column;transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;inset:0;transform:translateY(100%)}.mobile-player-drawer.open{transform:translateY(0)}@media (width<=768px){.sidebar{display:none}.app-main{padding:20px 16px}.desktop-player{display:none!important}.mobile-player{display:block}.mobile-header{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:10px;padding:12px 16px;display:flex}.mobile-nav{background:var(--surface);border-top:1px solid var(--border);flex-shrink:0;display:flex}.mobile-nav a{color:var(--muted);flex-direction:column;flex:1;align-items:center;gap:3px;padding:10px 0;font-size:10px;font-weight:500;text-decoration:none;transition:color .12s;display:flex}.mobile-nav a.active{color:var(--accent)}.mobile-nav svg{opacity:.7}.mobile-nav a.active svg{opacity:1}}.card-grid,.feed-list{flex-direction:column;gap:2px;display:flex}.tile-card{border-radius:10px;align-items:center;gap:0;padding:10px 12px 10px 10px;transition:background .12s;display:flex;position:relative}.tile-card:hover{background:var(--surface)}.tile-art{background:var(--border);border-radius:8px;flex-shrink:0;width:76px;height:76px;position:relative;overflow:hidden}.tile-art-btn{cursor:pointer;color:#ffffffeb;background:#0000002e;border:none;border-radius:8px;justify-content:center;align-items:center;font-size:20px;transition:background .15s,font-size .15s;display:flex;position:absolute;inset:0}.tile-art-btn:hover{background:#0000006b;font-size:22px}.tile-info{flex:1;align-items:center;gap:12px;min-width:0;padding:0 4px 0 14px;display:flex}.tile-menu{flex-shrink:0;align-items:center;gap:2px;display:flex}.tile-overflow-btn{letter-spacing:1px;width:34px;height:34px;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;transition:background .12s,color .12s;display:none}.tile-overflow-btn:hover{background:var(--border);color:var(--text)}.tile-menu-btn{width:30px;height:30px;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;font-size:15px;transition:background .12s,color .12s;display:flex}.tile-menu-btn:hover{background:var(--border);color:var(--text)}.feed-card{border-radius:8px;flex-wrap:wrap;align-items:flex-start;gap:12px;padding:10px 8px;transition:background .12s;display:flex}.feed-card:hover{background:var(--surface)}.feed-card-body{flex:1;min-width:0}.feed-card-actions{flex-direction:row;flex-shrink:0;align-items:center;gap:6px;display:flex}@media (width<=480px){.feed-card-body{flex-basis:calc(100% - 56px)}.feed-card-actions{margin-top:-2px;margin-left:56px}}.tile-title{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;line-height:1.35;overflow:hidden}@media (width<=480px){.tile-title{white-space:normal;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box}}.type-badge{letter-spacing:.05em;text-transform:uppercase;background:var(--border);color:var(--muted);border-radius:4px;flex-shrink:0;align-items:center;padding:2px 6px;font-size:10px;font-weight:700;display:inline-flex}.icon-btn{width:28px;height:28px;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;font-size:13px;transition:background .12s,color .12s;display:flex}.icon-btn:hover{background:var(--border);color:var(--text)}@media (width<=480px){.tile-card{flex-wrap:wrap;padding:10px}.tile-art{width:64px;height:64px}.tile-info{flex-wrap:wrap;align-items:flex-start;gap:6px;padding:0 8px 6px 12px}.tile-info>div:first-child{flex-basis:100%}.tile-menu{flex-basis:100%;justify-content:flex-start;gap:2px}.tile-menu-btn{width:34px;height:34px}.tile-overflow-btn{display:flex}.tile-menu:not(.tile-menu-open) .tile-menu-btn,.tile-menu:not(.tile-menu-open) .generate-btn-text{display:none}}.landing-cta{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.landing-cta-primary{color:#111;background:#f0f0f0;border-radius:10px;align-items:center;gap:8px;padding:14px 28px;font-size:15px;font-weight:700;text-decoration:none;transition:opacity .15s,transform .15s;display:inline-flex}.landing-cta-secondary{color:#888;background:0 0;border:1px solid #2a2a2a;border-radius:10px;align-items:center;gap:8px;padding:14px 28px;font-size:15px;font-weight:600;text-decoration:none;transition:border-color .15s,color .15s;display:inline-flex}@media (width<=480px){.landing-cta{flex-direction:column;width:100%;padding:0 8px}.landing-cta-primary,.landing-cta-secondary{justify-content:center;width:100%}}.bento-grid{grid-template-columns:repeat(12,1fr);gap:12px;display:grid}.bento-left{grid-column:span 7}.bento-right{grid-column:span 5}@media (width<=768px){.bento-grid{grid-template-columns:1fr}.bento-left,.bento-right{grid-column:span 1}}.section-label{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-size:11px;font-weight:600}.now-playing-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;align-items:center;gap:12px;padding:14px 16px;transition:border-color .12s;display:flex}.now-playing-card:hover{border-color:var(--accent)}.chip{background:var(--surface);color:var(--muted);border:1px solid var(--border);cursor:pointer;white-space:nowrap;border-radius:20px;flex-shrink:0;padding:6px 16px;font-size:13px;font-weight:400;transition:all .15s}.chip.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:600}