:root{--bg:#0b0b0f;--surface-1:#141419;--surface-2:#1c1c23;--surface-3:#26262f;--border:#2a2a33;--border-strong:#3a3a46;--text:#f2f2f5;--text-2:#a8a8b3;--text-muted:#6e6e7a;--accent:#6d5cff;--accent-hover:#5c4be6;--accent-soft:#6d5cff24;--accent-2:#2dd4bf;--success:#34d399;--success-soft:#34d39924;--danger:#f4565e;--danger-soft:#f4565e24;--warning:#fbbf24;--shadow-sm:0 1px 2px #0006;--shadow-md:0 8px 24px #00000073;--r-sm:8px;--r-md:14px;--r-lg:20px;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;--font-num:ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;background-image:radial-gradient(700px at 15% -5%,#6d5cff0f,#0000 60%);background-attachment:fixed;margin:0;line-height:1.5}#root{max-width:1400px;margin-inline:auto;padding:24px}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}h1{letter-spacing:-.02em;margin:0;font-size:1.75rem;font-weight:700}h2{letter-spacing:-.01em;margin:0 0 16px;font-size:1.25rem;font-weight:700}.topbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:20px;display:flex}.topbar nav{align-items:center;gap:16px;display:flex}.section{margin-bottom:40px}.library{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;display:grid}.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;display:flex;overflow:hidden}.card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);background:var(--surface-2);transform:translateY(-4px)}.card__cover{aspect-ratio:16/9;background:var(--surface-2);position:relative}.card__cover img{object-fit:cover;width:100%;height:100%;display:block}.card__cover-empty{width:100%;height:100%;color:var(--text-muted);justify-content:center;align-items:center;font-size:13px;display:flex}.card__body{flex-direction:column;gap:10px;padding:12px 14px 14px;display:flex}.card__title{color:var(--text);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px;font-weight:600;line-height:1.3;display:-webkit-box;overflow:hidden}.card__meta{color:var(--text-muted);font-size:12px;font-weight:500}.badges{flex-wrap:wrap;gap:6px;display:flex;position:absolute;top:8px;left:8px}.badge{letter-spacing:.04em;text-transform:uppercase;border-radius:var(--r-sm);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--text);background:#0b0b0f99;align-items:center;padding:3px 7px;font-size:11px;font-weight:700;display:inline-flex}.badge--demo{background:var(--warning);color:#1a1205}.badge--coop{background:var(--accent,#14b8a6);color:#03110d}.badge--players{color:var(--text);background:#0b0b0fb8}.card__coop{color:var(--accent,#5eead4);font-size:12px;font-weight:600}.shots{scrollbar-width:thin;scrollbar-color:var(--border) transparent;gap:6px;padding-bottom:6px;display:flex;overflow-x:auto}.shots::-webkit-scrollbar{height:6px}.shots::-webkit-scrollbar-track{background:0 0}.shots::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}.shots::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.shots a{flex:none}.shots img{border-radius:var(--r-sm);object-fit:cover;opacity:.85;width:auto;height:56px;transition:opacity .15s;display:block}.shots img:hover{opacity:1}.card.is-done .card__cover img{filter:saturate(.55)brightness(.78)}.card.is-done{border-color:var(--success-soft)}.rating-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.rating__avg{font:700 13px var(--font-num);color:var(--accent,#fbbf24);white-space:nowrap}.rating__avg small{color:var(--text-muted);font-weight:500}.rating{flex-wrap:wrap;gap:3px;display:flex}.rating button{border:1px solid var(--border);background:var(--surface-2);width:22px;height:26px;color:var(--text-muted);font:600 12px var(--font-num);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:0;line-height:1;transition:background .12s,color .12s,border-color .12s;display:inline-flex}.rating button:hover{border-color:var(--border-strong);color:var(--text-2)}.rating button.is-filled{background:var(--accent-soft);border-color:var(--accent);color:#c9c1ff}.actions{flex-wrap:wrap;gap:6px;display:flex}.btn{border-radius:var(--r-sm);cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font);white-space:nowrap;border:1px solid #0000;align-items:center;gap:6px;padding:8px 12px;text-decoration:none;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.btn:hover{text-decoration:none}.btn--primary{background:var(--accent);color:#fff}.btn--primary:hover{background:var(--accent-hover)}.btn--ghost{border-color:var(--border);color:var(--text-2);background:0 0}.btn--ghost:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)}.btn--suggest{border-color:var(--accent-2);color:var(--accent-2);background:0 0}.btn--suggest:hover{background:#2dd4bf1f}.btn--danger{color:var(--text-muted);background:0 0}.btn--danger:hover{background:var(--danger-soft);color:var(--danger)}.btn--done{border-color:var(--success);color:var(--success);background:var(--success-soft)}input,select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm);font-size:14px;font-family:var(--font);padding:8px 12px}input::placeholder{color:var(--text-muted)}input:focus,select:focus,button:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.add-row{gap:8px;margin-bottom:20px;display:flex}.add-row input{flex:1}.empty{text-align:center;color:var(--text-2);border:1px dashed var(--border);border-radius:var(--r-md);grid-column:1/-1;padding:48px 16px}.toast{background:var(--surface-3);border:1px solid var(--border-strong);color:var(--text);border-radius:var(--r-sm);box-shadow:var(--shadow-md);z-index:50;padding:10px 16px;font-size:14px;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.player{aspect-ratio:16/9;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);width:100%;max-width:900px;margin:0 auto;position:relative;overflow:hidden}.player #yt-player,.player iframe{border:0;width:100%;height:100%;display:block}.player__title{text-align:center;color:var(--text-2);max-width:900px;margin:12px auto 0}.player__sound{z-index:2;cursor:pointer;color:#03110d;background:var(--accent,#14b8a6);border:0;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:700;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 6px 20px #00000073}.player__sound:hover{filter:brightness(1.08)}.queue{color:var(--text-2);margin:0;padding-left:20px}.queue li{margin:6px 0}.login{text-align:center;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);max-width:380px;box-shadow:var(--shadow-md);margin:80px auto;padding:32px}@media (prefers-reduced-motion:reduce){*{transition:none!important}.card:hover{transform:none}}