/* ATLAS BEATS — v15: ATLAS RADIO (page, cards, home strip, integration guide) */
.radio-sec { margin: 0 auto 30px; max-width: 1180px; padding: 0 4px; }
.pg-frame.pg-native .radio-sec { max-width: 1180px; margin: 0 auto; }
/* live pill */
.rd-live-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; font-size: 11px; font-weight: 900; letter-spacing: .14em; color: #fff; background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 6px 20px rgba(239, 68, 68, .35); font-style: normal; }
.rd-live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: rdPulse 1.4s ease-out infinite; }
@keyframes rdPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }
.nav-item .cnt.live, .dr-page .cnt.live { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; }
.nav-item.nav-radio .i, .dr-page#drRadio .i { color: #f87171; }
.icon-btn.rd-top { background: linear-gradient(135deg, #dc2626, #7c3aed); } .icon-btn.rd-top .i { color: #fff; }

/* ── hero ── */
.rd-hero { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid var(--line-2); margin: 4px 0 18px; background: radial-gradient(120% 140% at 0% 0%, rgba(239, 68, 68, .22), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(124, 58, 237, .32), transparent 60%), linear-gradient(135deg, #130c24, #07060d); isolation: isolate; }
.rd-hero::before { content: ''; position: absolute; inset: -40% -10%; background: conic-gradient(from 90deg at 50% 50%, transparent 0 70%, rgba(255, 255, 255, .05) 80%, transparent 90%); animation: rdSweep 9s linear infinite; pointer-events: none; z-index: -1; }
@keyframes rdSweep { to { transform: rotate(1turn); } }
.rd-hero-in { padding: 34px 34px 28px; display: grid; gap: 14px; justify-items: start; }
.rd-h1 { margin: 0; display: flex; align-items: center; gap: 14px; font-size: clamp(30px, 4.4vw, 52px); font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.rd-h1 .i { width: .9em; height: .9em; color: #f87171; filter: drop-shadow(0 0 18px rgba(248, 113, 113, .6)); }
.rd-h1 b { background: linear-gradient(90deg, #f87171, #c084fc 60%, #60a5fa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rd-sub { margin: 0; max-width: 760px; color: var(--ink-2); font-size: 15px; line-height: 1.8; }
.rd-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-stats span { padding: 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.rd-stats b { color: #fff; font-size: 15px; margin-inline-end: 4px; }
.rd-stat-live b { color: #4ade80; }
.rd-hero-acts .btn { min-height: 46px; border-radius: 16px; gap: 10px; }
.rd-onair { display: flex; align-items: center; gap: 14px; width: min(100%, 560px); padding: 12px; border-radius: 20px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); }
.rd-onair[hidden] { display: none; }
.rd-oa-art { width: 64px; height: 64px; border-radius: 16px; flex: none; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--s1), var(--s2)); font-size: 26px; font-style: normal; }
.rd-oa-art img { width: 100%; height: 100%; object-fit: cover; }
.rd-oa-tx { flex: 1; min-width: 0; display: grid; gap: 3px; }
.rd-oa-tx small { font-size: 10.5px; letter-spacing: .12em; font-weight: 800; color: #f87171; text-transform: uppercase; }
.rd-oa-tx b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-oa-tx > span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-oa-prog { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 5px; }
.rd-oa-prog i { display: block; height: 100%; background: linear-gradient(90deg, #f87171, #c084fc); transition: width 1s linear; }
.rd-oa-btn { width: 50px; height: 50px; border-radius: 50%; border: 0; background: #fff; color: #07060d; display: grid; place-items: center; cursor: pointer; flex: none; box-shadow: 0 10px 28px rgba(255, 255, 255, .18); transition: transform .15s; }
.rd-oa-btn:hover { transform: scale(1.06); } .rd-oa-btn .i { width: 22px; height: 22px; }

/* ── channel grid (station cards) ── */
.rd-grid-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 2px 12px; }
.rd-groups { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-grp { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.rd-grp em { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: inherit; }
.rd-grp:hover { color: var(--text); transform: translateY(-1px); }
.rd-grp.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #7c3aed, #3b82f6); box-shadow: 0 8px 22px rgba(124, 58, 237, .28); }
.rd-grp.on em { background: rgba(255, 255, 255, .22); }
.rd-grid .card.rd-off { display: none; }
.rd-hint { font-size: 12.5px; color: var(--muted); }
.rd-grid.grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.rd-grid .card { border-radius: 24px; }
.rd-grid .card .art { aspect-ratio: 1.35; }
.rd-live-tag { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 99px; font-size: 10px; font-weight: 900; letter-spacing: .14em; color: #fff; background: rgba(185, 28, 28, .92); backdrop-filter: blur(6px); }
.rd-live-tag i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: rdPulse 1.4s ease-out infinite; }
.rd-grid .card .body { padding-bottom: 12px; }
.rd-grid .card .now { min-height: 20px; }
.rd-prog { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 10px 0 10px; }
.rd-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--s1), var(--s2)); transition: width 1s linear; }
.rd-acts { display: flex; gap: 8px; }
.rd-act { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s, transform .15s; }
.rd-act:hover { background: rgba(255, 255, 255, .11); transform: translateY(-1px); }
.rd-act .i { width: 14px; height: 14px; }

/* ── home strip ── */
.rd-home { margin: 14px 0 6px; }
.rd-home[hidden] { display: none; }
.rd-home-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.rd-home-head h2 { margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; }
.rd-home-head h2 .i { color: #f87171; }
.rd-home-head .rd-live-pill { padding: 3px 9px; font-size: 10px; }
.rd-more { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; padding: 6px 8px; border-radius: 10px; }
.rd-more:hover { background: rgba(255, 255, 255, .06); }
[dir="rtl"] .rd-more .i { transform: scaleX(-1); }
.rd-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rd-strip::-webkit-scrollbar { display: none; }
.rd-chip { flex: none; scroll-snap-align: start; display: flex; align-items: center; gap: 11px; width: 236px; padding: 9px; border-radius: 20px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: transform .18s, border-color .18s, background .18s; }
.rd-chip:hover { transform: translateY(-2px); background: var(--glass-2); }
.rd-chip.on { border-color: color-mix(in srgb, var(--s1) 70%, #fff 10%); box-shadow: 0 12px 34px color-mix(in srgb, var(--s1) 30%, transparent); }
.rd-chip-art { position: relative; width: 56px; height: 56px; border-radius: 15px; flex: none; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--s1), var(--s2)); }
.rd-chip-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rd-chip-art em { font-style: normal; font-size: 22px; position: relative; z-index: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.rd-chip-art img ~ em { display: none; }
.rd-chip-eq { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 10px; background: rgba(0, 0, 0, .35); z-index: 2; }
.rd-chip.playing .rd-chip-eq { display: flex; }
.rd-chip-eq i { width: 4px; height: 10px; border-radius: 2px; background: #fff; animation: rdEq .9s ease-in-out infinite; }
.rd-chip-eq i:nth-child(2) { animation-delay: .2s; height: 18px; } .rd-chip-eq i:nth-child(3) { animation-delay: .4s; }
@keyframes rdEq { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.rd-chip-tx { min-width: 0; display: grid; gap: 3px; }
.rd-chip-tx b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-chip-tx small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── integration guide ── */
.rd-how { margin-top: 26px; }
.rd-how-in > * { min-width: 0; max-width: 100%; }
.rd-how-in { min-width: 0; overflow: hidden; border-radius: 26px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); padding: 26px; display: grid; gap: 16px; }
.rd-how-head h2 { margin: 0 0 8px; font-size: 22px; font-weight: 900; display: flex; align-items: center; gap: 10px; }
.rd-how-head h2 .i { color: #c084fc; }
.rd-how-head p { margin: 0; color: var(--ink-2); line-height: 1.8; font-size: 14px; max-width: 820px; }
.rd-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rd-pick label { font-size: 13px; color: var(--muted); font-weight: 700; }
.rd-pick select { font: inherit; font-size: 14px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: #141126; color: var(--ink); min-width: 220px; }
.rd-urls { display: grid; gap: 8px; }
.rd-url { min-width: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.rd-url small { font-size: 12px; color: var(--muted); font-weight: 700; }
.rd-url code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 12.5px; color: #e9e5ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: left; }
.rd-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-tab { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.rd-tab.on { background: #fff; color: #07060d; border-color: #fff; }
.rd-tabbody { min-width: 0; }
.rd-code { position: relative; margin: 0; max-width: 100%; direction: ltr; padding: 16px 48px 16px 16px; border-radius: 16px; background: #0a0814; border: 1px solid var(--line); overflow: auto; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 12.5px; line-height: 1.7; color: #d6d3ff; text-align: left; max-height: 380px; }
.rd-copy-code { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center; cursor: pointer; }
.rd-txt { margin: 0; color: var(--ink-2); line-height: 1.85; font-size: 14px; }
.rd-dl { display: flex; gap: 8px; margin-top: 12px; }
.rd-dl .btn { text-decoration: none; }
.rd-note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* player bar: live badge instead of a seekable feel */
body.is-radio .player .pl-station::before, body.is-radio #plStation::before { content: 'LIVE'; display: inline-block; margin-inline-end: 7px; padding: 2px 7px 2px; border-radius: 6px; font-size: 9.5px; font-weight: 900; letter-spacing: .12em; color: #fff; background: #dc2626; vertical-align: 1px; }
body.is-radio .progress, body.is-radio #progress { cursor: default; }

@media (max-width: 760px) {
  .rd-hero-in { padding: 22px 18px 20px; gap: 12px; }
  .rd-sub { font-size: 13.5px; line-height: 1.7; }
  .rd-hero::before { display: none; }
  .rd-grid.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rd-live-tag { font-size: 9px; padding: 3px 7px; }
  .rd-acts { flex-direction: column; } .rd-act { justify-content: center; }
  .rd-how-in { padding: 18px 14px; }
  .rd-url { grid-template-columns: 1fr; gap: 6px; } .rd-url .rd-act { justify-self: start; }
  .rd-chip { width: 212px; }
  .rd-onair { width: 100%; }
}
@media (pointer: coarse) { .rd-chip:hover { transform: none; } }

/* ── v14.4: ATLAS RADIO as a site of its own (body.radio-site) — same player, radio chrome ── */
body.radio-site #stage, body.radio-site #appsRow, body.radio-site #songSection, body.radio-site #plDetail, body.radio-site #radioHome, body.radio-site #artistsHome,
body.radio-site #plSection, body.radio-site #shopSection, body.radio-site #forYouHome, body.radio-site .side-pages, body.radio-site #nav, body.radio-site #searchWrap, body.radio-site #djTopBtn,
body.radio-site #drDj, body.radio-site #drLib, body.radio-site #drShop, body.radio-site #drJam, body.radio-site #drNav, body.radio-site .fy-home, body.radio-site #v12ForYou { display: none !important; }
body.radio-site main.main > #radioSection { display: block; margin-top: 4px; }
body.radio-site #radioSection .rd-hero { margin-top: 6px; }
body.radio-site .brand .wordmark .wm i, body.radio-site .brand-m .wordmark .wm i { color: #ff5a5a; }
body.radio-site #radioTopBtn { display: inline-flex; }
body.site-switch main.main, body.site-switch .sidebar { animation: rdSiteIn .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rdSiteIn { from { opacity: 0; transform: translateY(12px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.rd-side { display: none; flex-direction: column; gap: 2px; margin: 2px 0 10px; }
body.radio-site .rd-side { display: flex; }
.rd-side-h { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; font-size: 11px; font-weight: 800; letter-spacing: .6px; color: #ff6b6b; }
.rd-side-h i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 0 rgba(255, 59, 59, .6); animation: sgLive 1.4s ease-out infinite; }
.rd-side-h em { font-style: normal; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-inline-start: auto; font-size: 10.5px; }
.rd-side .nav-item { width: 100%; background: transparent; border: 0; cursor: pointer; font-family: inherit; }
.rd-side .nav-item:hover { background: var(--glass); color: var(--text); }
.rd-side .nav-item .cnt { margin-inline-start: auto; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--glass-2); color: var(--muted); }
.rd-side .nav-item.active .cnt { color: #fff; background: rgba(255, 255, 255, .14); }
.rd-nav-em { width: 20px; text-align: center; font-size: 15px; }
.rd-side .rd-nav-back { margin-top: 8px; border: 1px dashed var(--line) !important; color: var(--text); }
.rd-side .rd-nav-back:hover { border-color: var(--line-2) !important; background: linear-gradient(90deg, color-mix(in srgb, #7c3aed 22%, transparent), transparent); }
.drawer .dr-rdnav { display: none; }
body.radio-site .drawer .dr-rdnav { display: grid; gap: 4px; margin: 4px 0 8px; }

/* ── v14.4: server directory ── */
.rd-servers { margin: 34px 0 10px; }
.sv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.sv-head h2 { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.sv-head h2 .i { width: 22px; height: 22px; color: var(--accent); }
.sv-n { font-style: normal; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--glass-2); color: var(--muted); }
.sv-head p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; max-width: 720px; line-height: 1.7; }
.sv-addbtn { flex: none; }
.sv-pf { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.sv-pfb { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.sv-pfb em { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.sv-pfb:hover { color: var(--text); }
.sv-pfb.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #7c3aed, #3b82f6); }
.sv-pfb.on em { background: rgba(255, 255, 255, .22); }
.sv-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--pc) 22%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent); color: var(--pc); }
.sv-ic svg { width: 62%; height: 62%; fill: currentColor; }
.sv-pfb .sv-ic { width: 20px; height: 20px; border-radius: 6px; border: 0; background: transparent; }
.sv-pfb.on .sv-ic { color: #fff; }
.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.sv-card { position: relative; display: grid; gap: 10px; padding: 16px; border-radius: 22px; border: 1px solid var(--line); background: var(--glass); overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; }
.sv-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--pc); opacity: .9; }
[dir="rtl"] .sv-card::before { inset: 0 0 0 auto; }
.sv-card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
.sv-card.hid { opacity: .55; }
.sv-card.flash { animation: svFlash 1.6s ease; }
@keyframes svFlash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 70%, transparent); } }
.sv-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sv-t { display: grid; gap: 2px; min-width: 0; }
.sv-t b { font-size: 15.5px; font-weight: 800; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-t small { color: var(--muted); font-size: 12px; }
.sv-tick { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #3b82f6; color: #fff; flex: none; }
.sv-tick .i { width: 11px; height: 11px; }
.sv-addr { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 13px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--text); font: inherit; cursor: pointer; text-align: start; transition: border-color .2s, background .2s; }
.sv-addr:hover { border-color: var(--line-2); background: rgba(0, 0, 0, .35); }
.sv-addr code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; letter-spacing: .2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-addr .i { flex: none; color: var(--muted); }
.sv-desc { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.sv-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.sv-ch { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--s1) 50%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--s1) 28%, transparent), color-mix(in srgb, var(--s2) 18%, transparent)); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.sv-ch i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 0 rgba(255, 59, 59, .6); animation: sgLive 1.4s ease-out infinite; }
.sv-by a { color: var(--accent); font-weight: 700; text-decoration: none; }
.sv-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.sv-a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; transition: color .2s, border-color .2s, background .2s; }
.sv-a:hover { color: var(--text); border-color: var(--line-2); background: var(--glass); }
.sv-a.danger:hover { color: #fff; background: #dc2626; border-color: #dc2626; }
.sv-empty { grid-column: 1 / -1; padding: 34px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 22px; font-size: 14px; }
.sv-form { display: grid; gap: 12px; padding: 18px; margin-bottom: 16px; border-radius: 22px; border: 1px solid var(--line-2); background: var(--glass-2); animation: rdSiteIn .4s ease both; }
.sv-form.sv-login { grid-template-columns: 1fr auto auto; align-items: center; }
.sv-form.sv-login p { margin: 0; color: var(--muted); font-size: 14px; }
.sv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sv-f { display: grid; gap: 6px; min-width: 0; }
.sv-f label { font-size: 12px; font-weight: 700; color: var(--muted); }
.sv-f input, .sv-f select { height: 44px; padding: 0 13px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--text); font: inherit; font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s; min-width: 0; }
.sv-f input:focus, .sv-f select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.sv-f select option { background: #14121f; color: #fff; }
.sv-pfpick { display: flex; gap: 6px; flex-wrap: wrap; }
.sv-err { padding: 9px 12px; border-radius: 10px; background: rgba(220, 38, 38, .14); border: 1px solid rgba(220, 38, 38, .4); color: #fecaca; font-size: 13px; font-weight: 600; }
.sv-facts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 767px) {
  .rd-servers { margin-top: 26px; }
  .sv-grid { grid-template-columns: 1fr; gap: 10px; }
  .sv-row { grid-template-columns: 1fr; }
  .sv-form { padding: 14px; border-radius: 18px; }
  .sv-form.sv-login { grid-template-columns: 1fr; }
  .sv-head h2 { font-size: 18px; }
  .sv-addbtn { width: 100%; }
  .sv-card { padding: 14px; border-radius: 18px; }
  body.radio-site #radioSection { padding-bottom: 8px; }
}