:root{color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--navy-950: #060a1a;--navy-900: #0a1128;--navy-800: #0f1b3d;--navy-700: #16234f;--navy-600: #1e2c5e;--accent: #3b82f6;--accent-bright: #60a5fa;--cyan: #22d3ee;--text: #e8ecfb;--text-dim: #94a3c4;--danger: #fca5a5}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--navy-900);color:var(--text)}#root{min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}.site-header{position:sticky;top:0;z-index:10;background:var(--navy-950);border-bottom:1px solid rgba(96,165,250,.15)}.header-inner{width:100%;margin:0;padding:16px 32px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;letter-spacing:.01em}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--cyan));color:#04122b;font-size:.8rem;box-shadow:0 0 18px #3b82f68c}.platform-nav{display:flex;gap:18px;font-size:.82rem;color:var(--text-dim)}.platform-nav span{position:relative;padding-bottom:2px;cursor:pointer}.platform-nav span:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:linear-gradient(90deg,var(--accent),var(--cyan));transform:scaleX(0);transition:transform .25s ease}.platform-nav span:hover{color:var(--text)}.platform-nav span:hover:after{transform:scaleX(1)}.page{flex:1;width:100%;max-width:none;margin:0;padding:40px 32px;display:flex;flex-direction:column}.card{background:var(--navy-800);border:1px solid rgba(96,165,250,.18);border-radius:18px;padding:32px;box-shadow:0 20px 60px #02061780}h1{margin:0 0 8px;font-size:1.6rem;background:linear-gradient(90deg,var(--text),var(--accent-bright));-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{margin:0 0 24px;color:var(--text-dim);font-size:.95rem;line-height:1.5}.url-form{display:flex;gap:10px}.url-form input{flex:1;padding:13px 15px;border-radius:10px;border:1px solid rgba(148,163,196,.25);background:#0408168c;color:var(--text);font-size:.95rem;transition:border-color .2s,box-shadow .2s}.url-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #3b82f640}.url-form input::placeholder{color:#5b6690}.primary-btn,.secondary-btn{padding:13px 22px;border:none;border-radius:10px;font-weight:600;font-size:.92rem;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;min-width:44px;display:inline-flex;align-items:center;justify-content:center}.primary-btn{background:linear-gradient(135deg,var(--accent),var(--cyan));color:#041022;box-shadow:0 8px 20px #3b82f659}.primary-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 26px #3b82f680}.secondary-btn{background:#94a3c41f;color:var(--text);border:1px solid rgba(148,163,196,.3)}.secondary-btn:hover:not(:disabled){background:#94a3c433;transform:translateY(-1px)}.primary-btn:disabled,.secondary-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.badge{display:inline-block;margin-top:14px;padding:4px 12px;border-radius:999px;background:#22d3ee1f;border:1px solid rgba(34,211,238,.3);color:var(--cyan);font-size:.78rem;font-weight:600;letter-spacing:.02em}.error{margin-top:16px;color:var(--danger);font-size:.9rem}.cookies-section{margin-top:16px}.cookies-toggle{background:none;border:none;padding:0;color:var(--text-dim);font-size:.82rem;font-weight:600;cursor:pointer;transition:color .2s}.cookies-toggle:hover{color:var(--accent-bright)}.cookies-body{margin-top:10px;padding:14px;border-radius:10px;border:1px solid rgba(148,163,196,.2);background:#04081666}.cookies-body p{margin:0 0 10px;color:var(--text-dim);font-size:.8rem;line-height:1.5}.cookies-steps{margin:0 0 12px;padding-left:20px;color:var(--text-dim);font-size:.8rem;line-height:1.6}.cookies-steps li::marker{color:var(--accent-bright)}.cookies-steps strong{color:var(--text)}.cookies-input{width:100%;resize:vertical;padding:10px 12px;border-radius:8px;border:1px solid rgba(148,163,196,.25);background:#0006;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;line-height:1.4}.cookies-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #3b82f640}.result{margin-top:28px;padding-top:24px;border-top:1px solid rgba(148,163,196,.15)}.preview-card{display:flex;gap:16px;align-items:flex-start}.thumb{width:130px;height:130px;object-fit:cover;border-radius:12px;border:1px solid rgba(148,163,196,.2);flex-shrink:0}.preview-meta h2{font-size:1.02rem;margin:0 0 8px;font-weight:600}.truncate-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.meta-row{display:flex;gap:12px;flex-wrap:wrap;color:var(--text-dim);font-size:.82rem}.controls{margin-top:22px;display:flex;flex-direction:column;gap:14px}.tab-group{display:inline-flex;background:#04081680;border:1px solid rgba(148,163,196,.2);border-radius:10px;padding:4px;gap:4px;width:fit-content}.tab{padding:8px 16px;border:none;background:transparent;color:var(--text-dim);font-size:.85rem;font-weight:600;border-radius:7px;cursor:pointer;transition:background .2s,color .2s}.tab.active{background:linear-gradient(135deg,var(--accent),var(--cyan));color:#041022}.quality-group{display:flex;flex-wrap:wrap;gap:8px}.pill{padding:7px 14px;border-radius:999px;border:1px solid rgba(148,163,196,.3);background:#94a3c414;color:var(--text-dim);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease}.pill:hover{border-color:var(--accent-bright);color:var(--text)}.pill.active{background:#3b82f633;border-color:var(--accent-bright);color:var(--accent-bright)}.action-row{display:flex;gap:10px;flex-wrap:wrap}.player-wrap{margin-top:20px}.player{width:100%;border-radius:14px;border:1px solid rgba(148,163,196,.2);background:#000;max-height:420px}.player.audio{height:48px;background:transparent}.fade-in-up{animation:fadeInUp .45s ease both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.site-footer{text-align:center;color:#4d5a85;font-size:.8rem;margin-top:24px;padding-bottom:12px}@media (max-width: 520px){.platform-nav{display:none}.preview-card{flex-direction:column}.thumb{width:100%;height:200px}}