:root{--ink:#131211;--ash:#1d1b19;--line:#34302c;--bone:#F2E6D0;--smoke:#a39d94;--red:#ff5353;--ember:#e8403f;--gold:#D5AA65;--gold-h:#E0BC80;--r:.875rem}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
body{font-family:'IBM Plex Sans Hebrew',system-ui,sans-serif;background:var(--ink);color:var(--bone);min-height:100dvh;line-height:1.5;
 background-image:radial-gradient(120% 60% at 50% -10%,rgba(255,83,83,.22),transparent 60%)}
h1,h2,.display{font-family:'Karantina',sans-serif;font-weight:700;line-height:.95;letter-spacing:.01em}
.wrap{max-width:460px;margin:0 auto;padding:20px 18px 40px}
header{display:flex;justify-content:center;padding:8px 0 18px;border-bottom:1px solid var(--line);margin-bottom:26px}
header img{height:42px}
h1{font-size:3.4rem;color:var(--bone)} h1 em{font-style:normal;color:var(--red)}
.lead{color:var(--smoke);margin:6px 0 22px;font-size:1.02rem}
label{display:block;font-size:.9rem;color:var(--smoke);margin-bottom:6px}
input{width:100%;font:inherit;font-size:16px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--ash);color:var(--bone);outline:none}
input:focus{border-color:var(--red)}
:focus-visible{outline:2px solid #ffd166;outline-offset:2px}
.btn{display:block;width:100%;font:inherit;font-weight:700;font-size:1.05rem;padding:14px;border-radius:var(--r);border:0;cursor:pointer;margin-top:12px;text-align:center;text-decoration:none}
.btn-cta{background:var(--gold);color:var(--ink)} .btn-cta:hover{background:var(--gold-h)}
.btn-red{background:var(--red);color:#fff} .btn-red:hover{background:var(--ember)}
.btn-ghost{background:transparent;color:var(--bone);border:1px solid var(--line)}
.btn:disabled{opacity:.5}
.card{background:var(--ash);border:1px solid var(--line);border-radius:18px;padding:18px}
.cover{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#000;display:block}
.track-t{font-family:'Karantina';font-size:2.3rem;line-height:1;margin-top:14px}
.track-a{color:var(--smoke)}
.hidden{display:none!important}
.msg{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(255,83,83,.12);border:1px solid rgba(255,83,83,.35);font-size:.95rem}
.ok{background:rgba(213,170,101,.12);border-color:rgba(213,170,101,.4)}
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--red);border-radius:50%;animation:s .7s linear infinite;vertical-align:middle;margin-inline-start:8px}
@keyframes s{to{transform:rotate(1turn)}}
.results{list-style:none;margin-top:10px}
.results li{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;cursor:pointer}
.results li:hover{background:var(--ash)} .results img{width:48px;height:48px;border-radius:8px}
.link{background:none;border:0;color:var(--smoke);text-decoration:underline;font:inherit;margin-top:16px;cursor:pointer}
.row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.row img{width:56px;height:56px;border-radius:8px;object-fit:cover}
.row .meta{flex:1;min-width:0} .row .t{font-weight:700} .row small{color:var(--smoke)}
.pill{font-size:.75rem;padding:2px 8px;border-radius:99px;background:var(--line);color:var(--smoke)} .pill.on{background:var(--red);color:#fff}
.row a{color:var(--gold)}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
.pl{display:flex;gap:14px;align-items:center}
.pl img,.pl .ph{width:72px;height:72px;border-radius:10px;object-fit:cover;background:var(--line);flex:none}
.pl .n{font-family:'Karantina';font-size:1.9rem;line-height:1}
.eyebrow{font-size:.8rem;color:var(--smoke);letter-spacing:.04em}
select{width:100%;font:inherit;font-size:16px;padding:13px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--ink);color:var(--bone)}
.sp-grid{display:grid;gap:10px;margin-top:16px}
.or{color:var(--smoke);font-size:.85rem;text-align:center}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1ed760;margin-inline-end:6px}
.dot.off{background:var(--red)}

.acts{display:flex;gap:8px;align-items:center;flex:none}
.btn.add{width:auto;margin:0;padding:9px 14px;font-size:.92rem}
.add-err{flex-basis:100%;color:var(--red);font-size:.88rem}
.add-err:empty{display:none}

.btn-quiet{background:transparent;color:var(--smoke,#a39d94);border:1px solid #34302c;border-radius:999px;padding:6px 12px;font:inherit;font-size:.85rem;cursor:pointer}
.btn-quiet:hover{color:#F2E6D0;border-color:#a39d94}
.btn-quiet:disabled{opacity:.6}

@media (max-width:520px){.acts{flex-basis:100%;justify-content:flex-start}}

.swap{display:block;margin:18px auto 0;background:none;border:0;color:#a39d94;font:inherit;font-size:.88rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
