:root { --bg:#09090b; --panel:#131316; --panel-2:#1a1a1f; --line:#29292f; --text:#f5f5f7; --muted:#9898a3; --yellow:#ffd633; --purple:#8b5cf6; --pink:#ec4899; }
* { box-sizing:border-box; margin:0; padding:0; }
html { color-scheme:dark; scroll-behavior:smooth; }
body { min-height:100vh; overflow-x:hidden; background:var(--bg); color:var(--text); font-family:'Manrope',sans-serif; -webkit-font-smoothing:antialiased; }
button, input { font:inherit; } button { color:inherit; }
.ambient { position:fixed; width:520px; height:520px; border-radius:50%; filter:blur(120px); opacity:.13; pointer-events:none; }
.ambient-one { background:var(--purple); top:-240px; right:-170px; } .ambient-two { background:var(--pink); bottom:-300px; left:-250px; }
.shell { width:min(1120px, calc(100% - 48px)); min-height:100vh; margin:auto; position:relative; z-index:1; }
.topbar { height:92px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; border:0; background:none; font-size:21px; font-weight:800; cursor:pointer; letter-spacing:-.04em; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; color:#111; background:linear-gradient(135deg,var(--yellow),#ff9f1c); box-shadow:0 8px 25px #ffd63338; }
.session-bar { display:flex; gap:8px; }
.icon-button, .text-button { border:1px solid var(--line); background:#17171b; color:#c4c4cc; border-radius:12px; padding:10px 15px; cursor:pointer; transition:.2s ease; }
.text-button { background:none; border-color:transparent; padding-left:0; }
.icon-button:hover { border-color:#484851; color:white; transform:translateY(-1px); } .text-button:hover { color:white; }
.icon-button:disabled, .text-button:disabled, .compare-button:disabled, .playlist-open:disabled { cursor:wait; opacity:.6; transform:none; }
.icon-button.copied, .primary-button.copied { color:#7ee2a8; border-color:#2d6a47; }
.hidden { display:none!important; }
.auth-layout { min-height:calc(100vh - 140px); display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:80px; padding-bottom:70px; }
.hero-copy { max-width:650px; }
.eyebrow { color:var(--yellow); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:16px; }
h1 { font-size:clamp(38px,6vw,72px); line-height:1.02; letter-spacing:-.055em; }
.hero-copy h1 span { color:transparent; background:linear-gradient(90deg,var(--yellow),#ff8a4c); background-clip:text; }
.hero-copy > p, .lead { color:var(--muted); font-size:18px; line-height:1.7; max-width:570px; margin:25px 0 30px; }
.primary-button { display:inline-flex; justify-content:center; align-items:center; gap:10px; border:0; border-radius:14px; padding:15px 22px; text-decoration:none; color:#111; background:var(--yellow); font-weight:800; cursor:pointer; box-shadow:0 10px 32px #ffd6331c; transition:.25s cubic-bezier(.2,.8,.2,1); }
.primary-button:hover { transform:translateY(-2px); background:#ffe15e; box-shadow:0 15px 38px #ffd6332a; } .primary-button:disabled { opacity:.55; transform:none; }
.primary-button.compact { padding:12px 18px; border-radius:11px; }
.yandex-dot { width:17px; height:17px; display:inline-block; border-radius:50%; background:#fc3f1d; position:relative; }
.yandex-dot:after { content:'Я'; position:absolute; color:white; font-size:10px; font-weight:800; inset:1px 0 0 4px; }
.privacy-note { color:#666671; font-size:12px; margin-top:15px; }
.vinyl-stage { position:relative; height:430px; display:grid; place-items:center; }
.vinyl { width:min(31vw,360px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:repeating-radial-gradient(circle,#16161a 0 3px,#222228 4px 6px,#101012 7px 10px); box-shadow:0 35px 90px #000, inset 0 0 0 2px #323239; animation:float 5s ease-in-out infinite; }
.vinyl:before { content:''; position:absolute; width:45%; height:45%; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--pink)); box-shadow:0 0 50px #8b5cf666; }
.vinyl-label { z-index:1; font-size:44px; font-weight:800; }
.auth-code { max-width:650px; margin:8vh auto; text-align:center; }.auth-code h1 { font-size:clamp(34px,5vw,54px); }.auth-code .lead { margin:18px auto 28px; }
.code-box { padding:28px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,#18181c,#111114); }
.code-box .label { display:block; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.code-row { display:flex; justify-content:center; align-items:center; gap:15px; margin:18px 0 24px; }.code-row strong { font-size:clamp(32px,7vw,52px); letter-spacing:.13em; }
.status-box { padding:14px 18px; border-radius:13px; margin:16px 0; text-align:center; color:#b8b8c2; background:#17171b; border:1px solid var(--line); }.status-success { color:#7ee2a8; border-color:#264c37; }.status-error { color:#ff8a8a; border-color:#512e33; }
.spinner { display:inline-block; width:17px; height:17px; border:2px solid #444; border-top-color:var(--yellow); border-radius:50%; animation:spin .75s linear infinite; vertical-align:-3px; margin-right:9px; flex:0 0 auto; }.spinner.dark { border-color:#1114; border-top-color:#111; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:55px 0 28px; }.section-heading h1 { font-size:clamp(36px,5vw,58px); }.section-heading h2 { font-size:30px; letter-spacing:-.04em; }.section-heading p { color:var(--muted); margin-top:10px; }.section-heading.small { margin:0 0 24px; }
.room-banner { display:flex; align-items:center; justify-content:space-between; gap:20px; background:#251f0c; border:1px solid #594c1c; border-radius:16px; padding:17px 20px; margin-bottom:20px; }.room-banner span { color:#c7b96f; font-size:14px; }
.playlist-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding-bottom:60px; }
.playlist-card { background:linear-gradient(145deg,#18181c,#121215); border:1px solid var(--line); border-radius:20px; overflow:hidden; opacity:0; animation:cardIn .5s ease forwards; animation-delay:var(--delay); transition:.25s ease; }.playlist-card:hover { border-color:#42424b; transform:translateY(-3px); box-shadow:0 18px 45px #0006; }
.playlist-open { width:100%; padding:17px; display:flex; align-items:center; gap:15px; color:inherit; background:none; border:0; text-align:left; cursor:pointer; }.cover { width:64px; height:64px; flex:0 0 auto; display:grid; place-items:center; border-radius:15px; background:#25252b; box-shadow:inset 0 0 0 1px #ffffff0a; }.cover.liked { background:#31282c; }
.cover-mark { width:28px; height:28px; border:2px solid #777783; border-radius:50%; position:relative; }.cover-mark:after { content:''; position:absolute; width:6px; height:6px; border-radius:50%; background:#777783; inset:9px; }.cover.liked .cover-mark { border-color:#b9808a; }.cover.liked .cover-mark:after { background:#b9808a; }
.playlist-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:5px; }.playlist-copy strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.playlist-copy small { color:var(--muted); }.round-arrow { flex:0 0 auto; color:#777782; font-size:11px; font-weight:700; transition:.2s; }.playlist-card:hover .round-arrow { color:var(--text); }
.compare-button { width:100%; padding:11px; background:#1c1c21; border:0; border-top:1px solid var(--line); color:#aaaab5; cursor:pointer; font-size:12px; font-weight:700; transition:.2s; }.compare-button:hover { color:var(--text); background:#222228; }.compare-button.room-ready { color:#7ee2a8; background:#17231c; }
.room-status-panel { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); align-items:center; gap:22px; margin-bottom:20px; padding:22px; border:1px solid #35443b; border-radius:18px; background:#141a17; }.room-state { display:flex; gap:16px; align-items:flex-start; }.room-state .eyebrow { color:#7ee2a8; margin-bottom:5px; }.room-state h2 { font-size:22px; }.room-state p { max-width:560px; margin-top:7px; color:var(--muted); font-size:13px; line-height:1.55; }.room-state-indicator { width:12px; height:12px; flex:0 0 auto; margin-top:5px; border-radius:50%; background:#63c78c; box-shadow:0 0 0 5px #63c78c18; animation:statusPulse 1.8s ease-in-out infinite; }.room-panel-close { position:absolute; top:5px; right:13px; font-size:11px; }
.back-button { margin-top:25px; }.track-list { display:grid; gap:8px; padding-bottom:30px; }.track-item { display:flex; align-items:center; gap:14px; min-width:0; padding:12px 14px; border:1px solid #24242a; border-radius:14px; background:#141417; transition:.2s; }.track-item:hover { background:#1b1b20; border-color:#383841; transform:translateX(3px); }.track-number { color:#555561; width:25px; text-align:center; font-variant-numeric:tabular-nums; }.mini-cover { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; background:#24242a; }.mini-cover span { width:16px; height:16px; border:1px solid #70707b; border-radius:50%; }
.track-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }.track-info strong,.track-info span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.track-info span { color:var(--muted); font-size:12px; }.play-link { flex:0 0 auto; color:#111; background:var(--yellow); padding:8px 11px; border-radius:9px; text-decoration:none; font-size:11px; font-weight:800; }
.yandex-badge { color:#ddd; border:1px solid var(--line); padding:10px 13px; border-radius:11px; text-decoration:none; font-size:12px; }.list-note,.empty-note { color:var(--muted); text-align:center; padding:18px; }
.waiting-room { max-width:680px; margin:6vh auto; text-align:center; }.waiting-room h1 { font-size:clamp(38px,5vw,60px); }.waiting-room > p { color:var(--muted); margin:18px auto 28px; }.pulse-rings { width:110px; height:110px; display:grid; place-items:center; margin:0 auto 35px; border-radius:50%; background:#2a2210; color:var(--yellow); font-size:32px; box-shadow:0 0 0 0 #ffd63330; animation:pulse 2s infinite; }.share-row { display:flex; gap:9px; padding:8px; border:1px solid var(--line); border-radius:16px; background:#141417; }.share-row input { flex:1; min-width:0; background:none; border:0; outline:0; padding:0 10px; color:#bdbdc6; }
.match-hero { text-align:center; padding:25px 0 50px; }.match-hero h1 { font-size:clamp(25px,4vw,42px); margin-top:25px; }.match-hero h1 span { color:#62626c; }.score-ring { --score:0; width:210px; height:210px; margin:auto; border-radius:50%; padding:9px; background:conic-gradient(var(--yellow) calc(var(--score)*1%),#25252b 0); box-shadow:0 0 60px #ffd63312; }.score-ring > div { width:100%; height:100%; border-radius:50%; display:grid; align-content:center; background:var(--bg); }.score-ring strong { font-size:52px; letter-spacing:-.06em; }.score-ring span { color:var(--muted); font-size:12px; }.score-details { display:flex; justify-content:center; gap:12px; margin-top:18px; }.score-details span { background:#17171b; border:1px solid var(--line); border-radius:10px; padding:8px 12px; color:var(--muted); font-size:12px; }.score-details b { color:white; margin-left:5px; }
.result-section { margin-bottom:50px; }.artist-chips { display:flex; flex-wrap:wrap; gap:9px; }.artist-chip { border:1px solid #38313f; background:#1e1924; border-radius:99px; padding:10px 14px; font-size:13px; }.artist-chip small { color:#bd92ef; margin-left:5px; }.count-badge { border-radius:99px; background:#24242a; padding:7px 12px; color:var(--muted); font-size:12px; }.recommend-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.recommend-column { min-width:0; padding:18px; border:1px solid var(--line); border-radius:18px; background:#111114; }.recommend-column h3 { margin-bottom:14px; font-size:14px; color:#bdbdc6; }.recommend-column .track-item { margin-bottom:8px; }.recommend-column .play-link span { display:none; }
.history-item { display:flex; gap:9px; margin-bottom:9px; }.history-open { flex:1; display:flex; flex-direction:column; gap:5px; text-align:left; border:1px solid var(--line); background:#151519; color:white; border-radius:14px; padding:16px; cursor:pointer; }.history-open span { color:var(--muted); font-size:12px; }.empty-state { text-align:center; color:var(--muted); padding:70px 20px; }.empty-state h1,.empty-state h2 { color:white; margin-bottom:10px; }
.toast { position:fixed; left:50%; bottom:25px; z-index:20; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#f1f1f3; color:#111; border-radius:10px; padding:10px 16px; font-size:13px; font-weight:700; transition:.25s; }.toast.visible { transform:translate(-50%,0); opacity:1; }
.view-enter { animation:viewIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes float { 50% { transform:translateY(-12px) rotate(3deg); } } @keyframes statusPulse { 50% { opacity:.45; } } @keyframes cardIn { to { opacity:1; } } @keyframes viewIn { from { opacity:0; transform:translateY(14px); } }
@media (max-width:800px) { .shell { width:min(100% - 30px,680px); }.auth-layout { grid-template-columns:1fr; gap:15px; text-align:center; padding:50px 0 80px; }.hero-copy { margin:auto; }.hero-copy > p { margin-left:auto; margin-right:auto; }.vinyl-stage { order:-1; height:210px; }.vinyl { width:190px; }.vinyl-label { font-size:25px; }.playlist-grid,.recommend-grid { grid-template-columns:1fr; }.section-heading { align-items:flex-start; flex-direction:column; }.yandex-badge { align-self:flex-start; }.room-status-panel { grid-template-columns:1fr; } }
@media (max-width:520px) { .shell { width:calc(100% - 22px); }.topbar { height:70px; }.auth-layout { min-height:calc(100vh - 80px); padding-top:15px; }.vinyl-stage { height:170px; }.vinyl { width:150px; }.hero-copy > p,.lead { font-size:15px; line-height:1.6; }.primary-button { width:100%; }.privacy-note { line-height:1.5; }.code-box { padding:20px 14px; }.code-row { flex-direction:column; }.section-heading { margin-top:35px; }.room-banner { align-items:flex-start; flex-direction:column; }.playlist-open { padding:13px; }.cover { width:54px; height:54px; }.play-link span { display:none; }.track-item { gap:9px; padding:10px; }.score-ring { width:180px; height:180px; }.score-ring strong { font-size:44px; }.score-details { flex-wrap:wrap; }.share-row { flex-direction:column; }.recommend-column { padding:12px; }.history-item { align-items:stretch; }.history-item > .icon-button { padding:9px; }.session-bar .icon-button { padding:8px 10px; font-size:12px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }