/* Rotana.net redesign — public site. Tokens and components follow the design boards. */
:root {
  --bg: #0B100D; --surface: #121A16; --surface2: #18221D; --deep: #070B09; --grid: #0E1411;
  --text: #F2F5F3; --text2: #C3CEC7; --text3: #C9D3CD; --muted: #A5B3AB; --muted2: #7E8D85; --ph: #8E9C94;
  --green: #136E42; --green-h: #18874F; --accent: #5BC48C; --mint: #8FE0B4; --red: #E5484D; --red-soft: #FF9A9D;
  --light: #F3F5F0; --ink: #0F1712; --ink2: #4E5C54; --line-l: #D5DDD8; --card-l: #E1E7E3;
  --line: rgba(255,255,255,0.07); --line2: rgba(255,255,255,0.12);
  --ease: cubic-bezier(.22,1,.36,1);
  --gut: max(56px, calc((100vw - 1328px) / 2));
  --hdr: 84px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Readex Pro', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif; font-weight: 400; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
img.broken { visibility: hidden; }
button { font: inherit; border: 0; cursor: pointer; background: none; color: inherit; padding: 0; }
input { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--mint); }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: var(--text); color: var(--bg); transform: translateY(-160%); transition: transform .2s; }
.skip:focus { transform: none; color: var(--bg); }
.boot { min-height: 100vh; display: grid; place-items: center; opacity: .5; }
.grow { flex-grow: 1; }
.muted { color: var(--muted); } .muted2 { color: var(--muted2); } .sm { font-size: 13px; }
.caps { text-transform: uppercase; letter-spacing: .1em; }
html[lang="ar"] .caps, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { text-transform: none; letter-spacing: 0; }
.kick { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.kick.accent { color: var(--accent); } .kick.green { color: var(--green); } .kick.mint { color: var(--mint); }
.flip { display: inline-flex; }
[dir="rtl"] .flip { transform: scaleX(-1); }
.ph { background-color: var(--surface2); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 14px); }
.phL { background-image: repeating-linear-gradient(135deg, rgba(19,110,66,0.06) 0 1px, transparent 1px 14px); }
.fade { animation: fd .5s ease; }
@keyframes fd { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ld { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 8px; background: var(--red); animation: pl 1.8s infinite; }
.ld.lg { width: 12px; height: 12px; }
@keyframes pl { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.55); } 70% { box-shadow: 0 0 0 8px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }
.flash { animation: flash 1.2s ease-out; border-radius: 20px; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(91,196,140,0), inset 0 0 0 2px rgba(91,196,140,.9); background-color: rgba(91,196,140,.07); } 60% { box-shadow: 0 0 36px 4px rgba(91,196,140,.18), inset 0 0 0 2px rgba(91,196,140,.5); } 100% { box-shadow: 0 0 0 0 rgba(91,196,140,0), inset 0 0 0 2px rgba(91,196,140,0); background-color: transparent; } }
html.loading .progress { transform: scaleX(.7); opacity: 1; transition: transform 8s cubic-bezier(.1,.7,.2,1), opacity .2s; }
.progress { position: fixed; top: 0; inset-inline: 0; height: 2px; z-index: 60; background: var(--accent); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform .3s, opacity .4s .2s; }
[dir="rtl"] .progress { transform-origin: right; }

/* ---- buttons, chips ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s; font-weight: 500; }
.btn:hover { transform: translateY(-1px); }
.bp { background: var(--green); color: #fff; } .bp:hover { background: var(--green-h); color: #fff; }
.bg { background: rgba(255,255,255,0.08); color: var(--text); border: 1px solid rgba(255,255,255,0.14); }
.bg:hover { background: rgba(255,255,255,0.14); color: #fff; }
.bl { background: #fff; color: var(--bg); font-weight: 600; } .bl:hover { background: #DDEEE4; color: var(--bg); }
.outline { color: var(--ink); border: 1px solid #C9D3CD; } .outline:hover { color: var(--ink); border-color: var(--ink2); }
.pill { height: 44px; padding: 0 16px; border-radius: 22px; font-size: 14px; }
.pill.sm { height: 44px; padding: 0 16px; font-size: 14px; }
.pill.md { height: 52px; padding: 0 24px; border-radius: 26px; font-size: 15px; }
.pill.lg { height: 56px; padding: 0 24px; border-radius: 28px; font-size: 16px; }
.icon-btn { width: 44px; height: 44px; border-radius: 22px; flex-shrink: 0; }
.tog .i-on, .tog .i-off { display: inline-flex; }
.tog:not(.on) .i-on, .tog.on .i-off { display: none; }
.bg.tog.on { border-color: rgba(91,196,140,.55); color: var(--mint); }
.rem { color: var(--muted); min-height: 44px; font-size: 14px; gap: 8px; } .rem:hover { color: #fff; } .rem.on { color: var(--accent); }
.remfill.on { background: var(--green); border-color: var(--green); color: #fff; }
.chips { display: flex; gap: 10px; align-items: center; }
.chips.wrap { flex-wrap: wrap; }
.chip { height: 44px; padding: 0 20px; border-radius: 22px; font-size: 14px; font-weight: 500; background: rgba(255,255,255,0.06); color: var(--text2); border: 1px solid rgba(255,255,255,0.10); transition: all .2s; }
.chip:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip.sm { height: 36px; padding: 0 14px; font-size: 13px; }
.chip .cnt { opacity: .6; font-size: 12px; margin-inline-start: 2px; }
.chip.static { display: inline-flex; align-items: center; cursor: default; height: 36px; padding: 0 14px; font-size: 13px; }
.chip.static:hover { transform: none; }
.chipL { height: 44px; padding: 0 18px; border-radius: 22px; font-size: 14px; background: #fff; color: var(--ink2); border: 1px solid #DCE3DE; }
.chipL:hover { color: var(--ink); border-color: #9FB0A6; } .chipL.on { background: var(--green); color: #fff; border-color: var(--green); }
.more { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; white-space: nowrap; min-height: 44px; }
.row-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.app { height: 56px; padding: 0 22px; border-radius: 14px; font-size: 15px; font-weight: 400; }
.app.sm { height: 48px; padding: 0 16px; border-radius: 12px; font-size: 14px; justify-content: flex-start; }
.card { transition: transform .3s var(--ease), border-color .3s, background-color .3s; border: 1px solid transparent; color: var(--text); }
.card:hover { transform: translateY(-4px); border-color: rgba(91,196,140,0.45); color: var(--text); }
.row { transition: background-color .2s; } .row:hover { background: rgba(255,255,255,0.05); } .row.on { background: rgba(91,196,140,0.12); }
.bar { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .6s var(--ease); }
.bar.thin { height: 3px; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.badge { position: absolute; top: 12px; inset-inline-start: 12px; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--green); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; }
.tag { position: absolute; top: 12px; inset-inline-start: 12px; height: 24px; padding: 0 10px; border-radius: 12px; background: rgba(0,0,0,0.55); font-size: 12px; display: flex; align-items: center; z-index: 1; }
.playc { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 26px; background: rgba(255,255,255,0.92); color: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 1; transition: transform .3s var(--ease); }
.playc.sm { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.card:hover .playc { transform: scale(1.08); }
.livepill { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 14px; background: rgba(229,72,77,0.16); color: var(--red-soft); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.chlogo { position: relative; flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; background: var(--bc, var(--green)); display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font-size: 13px; font-weight: 700; }
.chlogo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; background: var(--bc, var(--green)); }
.chlogo img.broken { display: none; }
.chlogo.sm { width: 40px; height: 40px; border-radius: 10px; font-size: 12px; }
.chlogo.lg { width: 72px; height: 72px; border-radius: 18px; font-size: 20px; }
.chlogo.lg img { padding: 10px; }
.chlogo.xl { width: 88px; height: 88px; border-radius: 20px; font-size: 22px; }
.chlogo.xl img { padding: 12px; }
.empty { padding: 64px 0; text-align: center; font-size: 16px; color: var(--muted); grid-column: 1 / -1; }
.state { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 96px var(--gut); }
.state h1 { font-size: 44px; }
.state p { font-size: 17px; color: var(--muted); max-width: 520px; }
.state-ic { width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; background: rgba(91,196,140,.12); color: var(--accent); }
.eq { display: flex; align-items: center; height: 20px; }
.eq span { display: inline-block; width: 3px; margin-inline-end: 2px; background: var(--accent); border-radius: 2px; animation: eq 1s infinite ease-in-out; }
.eq span:nth-child(2) { animation-delay: .2s; } .eq span:nth-child(3) { animation-delay: .4s; } .eq span:nth-child(4) { animation-delay: .1s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.eq.off span { animation: none; height: 4px; }
.dot { display: block; width: 10px; height: 10px; border-radius: 10px; background: rgba(255,255,255,0.28); transition: all .3s; }
.on > .dot, .dot.on { width: 32px; background: var(--accent); }

/* ---- header -------------------------------------------------------------------- */
.top { position: sticky; top: 0; z-index: 30; height: var(--hdr); display: flex; align-items: center; gap: 32px; padding: 0 var(--gut); background: rgba(11,16,13,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 56px; width: auto; }
.mainnav { display: flex; align-items: center; gap: 26px; }
.nav { position: relative; color: var(--text2); font-size: 15px; font-weight: 500; white-space: nowrap; transition: color .2s; }
.nav:hover, .nav.on { color: #fff; }
.navbar { display: none; }
.mainnav .nav.on .navbar { display: block; position: absolute; inset-inline: 0; bottom: -8px; height: 2px; border-radius: 2px; background: var(--accent); }
.searchwrap { position: relative; }
.srch { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 14px; border-radius: 22px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: var(--text); transition: border-color .2s, background-color .2s; }
.srch:focus-within { border-color: var(--accent); background: rgba(255,255,255,0.1); }
.srch input { background: transparent; border: 0; outline: none; color: var(--text); width: 100%; font-size: 14px; min-width: 0; }
.srch input::placeholder { color: var(--ph); }
.srch input::-webkit-search-cancel-button { filter: invert(.7); }
.sic { color: var(--ph); display: flex; }
.sres { position: absolute; top: 56px; inset-inline-end: 0; width: 400px; max-width: calc(100vw - 32px); max-height: 70vh; overflow: auto; padding: 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line2); box-shadow: 0 24px 60px rgba(0,0,0,0.5); z-index: 40; }
.shead { padding: 8px 12px; font-size: 12px; color: var(--muted); letter-spacing: .08em; }
.res { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text); min-height: 44px; transition: background-color .15s; }
.res:hover, .res:focus-visible { background: rgba(255,255,255,0.06); color: #fff; }
.res img { width: 56px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.ric { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(91,196,140,.12); color: var(--accent); flex-shrink: 0; }
.rname { flex-grow: 1; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rkind { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.snone { padding: 12px; font-size: 14px; color: var(--muted); }
.msearch { display: none; }
.signin { color: var(--text); font-size: 14px; min-height: 44px; }
.signin:hover { color: #fff; }
.joinbtn { padding: 0 20px; }
.top > * { flex-shrink: 0; } .top .grow { flex-shrink: 1; min-width: 0; } .top .searchwrap { flex: 0 1 300px; min-width: 150px; }
[dir=rtl] .top { gap: 24px; } [dir=rtl] .mainnav { gap: 22px; }

/* ---- rails (shared) -------------------------------------------------------------- */
.rail { padding: 48px var(--gut); display: flex; flex-direction: column; gap: 28px; }
.rhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rhead-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rhead h2 { font-size: 36px; line-height: 1.15; display: flex; align-items: center; gap: 14px; }
.rhead p { font-size: 16px; color: var(--muted); }
.rhead-end { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.sponsor { font-size: 13px; color: var(--muted2); } .sponsor b { color: var(--text2); font-weight: 500; }
.arrows { display: flex; gap: 8px; }
.scroller { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }

/* hero */
.hero { position: relative; height: 740px; padding: 0; gap: 0; overflow: hidden; background: var(--bg); }
.hslides { position: absolute; inset: 0; }
.hslide { position: absolute; inset: 0; background-color: var(--tone, #15372A); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 14px); opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.hslide.on { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.hbg { position: absolute; inset: 0; overflow: hidden; }
.hbg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: blur(28px) saturate(1.1); transform: scale(1.15); }
.hbg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,16,13,.78) 0%, rgba(11,16,13,.35) 55%, rgba(11,16,13,.1) 100%), linear-gradient(0deg, rgba(11,16,13,.85) 0%, transparent 35%); }
[dir="rtl"] .hbg::after { background: linear-gradient(270deg, rgba(11,16,13,.78) 0%, rgba(11,16,13,.35) 55%, rgba(11,16,13,.1) 100%), linear-gradient(0deg, rgba(11,16,13,.85) 0%, transparent 35%); }
.rings span { position: absolute; border-radius: 50%; pointer-events: none; }
.rings .r1 { top: 60px; inset-inline-end: -140px; width: 820px; height: 820px; border: 1px solid rgba(91,196,140,0.18); }
.rings .r2 { top: 150px; inset-inline-end: -50px; width: 640px; height: 640px; border: 1px solid rgba(91,196,140,0.28); }
.hart { position: absolute; top: 190px; inset-inline-end: 40px; width: 540px; height: 540px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.45); }
.hart img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 8s linear; }
.hslide.on .hart img { transform: scale(1.12); }
.swoosh { position: absolute; inset-inline-start: -40px; bottom: 90px; width: 700px; height: 150px; border-radius: 50%; border-top: 26px solid rgba(255,255,255,0.12); transform: rotate(-14deg); pointer-events: none; }
.hcopy { position: absolute; top: 200px; inset-inline-start: var(--gut); width: min(640px, calc(100% - 700px)); min-width: 460px; display: flex; flex-direction: column; gap: 22px; }
.hslide.on .hcopy { animation: fd .7s ease; }
.hkick { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text2); flex-wrap: wrap; }
.htitle { font-size: clamp(48px, 6.4vw, 96px); line-height: 1; font-weight: 600; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: .06em; }
.htitle.long { font-size: clamp(40px, 4.6vw, 68px); line-height: 1.05; }
.htitle a { color: inherit; } .htitle a:hover { color: #fff; }
.hdesc { font-size: 20px; line-height: 1.6; color: var(--text3); max-width: 560px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hbtns { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.hctrl { position: absolute; bottom: 40px; inset-inline: var(--gut); display: flex; align-items: center; gap: 28px; z-index: 2; }
.harrows { display: flex; gap: 8px; }
.hdots { display: flex; gap: 28px; min-width: 0; overflow: hidden; }
.hdot { display: flex; flex-direction: column; gap: 10px; min-height: 44px; justify-content: center; color: var(--ph); font-size: 14px; font-weight: 500; max-width: 200px; text-align: start; }
.hdot.on { color: #fff; }
.dlbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* on air */
.onair { padding-top: 88px; }
.cgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ccard { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 16px; background: var(--surface); border-color: var(--line); }
.crow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cnum { font-size: 12px; color: var(--muted2); }
.ctitle { font-size: 14px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnow { font-size: 18px; font-weight: 600; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cnow.muted { color: var(--muted2); font-weight: 400; font-size: 15px; }
.cnext { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); min-height: 1.5em; }

/* continue */
.kgrid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; }
.kcard { display: flex; flex-direction: column; gap: 14px; border-radius: 16px; }
.kimg { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
.kimg img, .limg img, .aimg img, .pimg img, .ccimg img, .timg img, .gthumb img { width: 100%; height: 100%; object-fit: cover; }
.kbar { position: absolute; bottom: 0; inset-inline: 0; height: 4px; background: rgba(255,255,255,0.15); }
.kbar span { display: block; height: 4px; background: var(--accent); }
.kmeta { display: flex; justify-content: space-between; gap: 12px; padding: 0 4px; }
.kmeta > span:first-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kname { font-size: 17px; font-weight: 600; }
.ksub, .kleft { font-size: 13px; color: var(--muted); }
.kleft { white-space: nowrap; }

/* posters */
.prow { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 80px) / 6); gap: 16px; }
.pgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 16px; }
.pcard { display: flex; flex-direction: column; gap: 12px; border-radius: 14px; position: relative; }
.pimg { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); }
.ptitle { position: absolute; bottom: 0; inset-inline: 0; padding: 48px 16px 16px; font-size: 22px; line-height: 1.12; font-weight: 700; background: linear-gradient(0deg, rgba(7,11,9,.92), transparent); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pmeta { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; min-width: 0; }
.pname { font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgen { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top10 .prow { grid-auto-columns: calc((100% - 64px) / 5); }
.ranked { padding-inline-start: 56px; }
.rank { position: absolute; inset-inline-start: 0; bottom: 34px; font-size: 150px; line-height: .8; font-weight: 700; color: transparent; -webkit-text-stroke: 2px rgba(91,196,140,.55); letter-spacing: -0.06em; z-index: 0; }
.ranked .pimg { z-index: 1; }

/* landscape */
.lrow { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; }
.lcard { display: flex; flex-direction: column; gap: 12px; border-radius: 14px; }
.limg { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); }
.lmeta { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; min-width: 0; }
.lname { font-size: 17px; font-weight: 600; line-height: 1.3; }
.lsub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* articles */
.agrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.acard { display: flex; flex-direction: column; gap: 14px; border-radius: 16px; background: var(--surface); border-color: var(--line); overflow: hidden; }
.aimg { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.ameta { display: flex; flex-direction: column; gap: 8px; padding: 0 20px 20px; }
.ameta .kick { color: var(--accent); font-size: 12px; }
.aname { font-size: 19px; font-weight: 600; line-height: 1.3; }
.adek { font-size: 14px; color: var(--muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.adate { font-size: 12px; color: var(--muted2); margin-top: 4px; }
.acard.big { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; border-radius: 24px; }
.acard.big .aimg { aspect-ratio: auto; min-height: 420px; }
.acard.big .ameta { padding: 48px; justify-content: center; gap: 16px; }
.acard.big .aname { font-size: 40px; line-height: 1.12; }
.acard.big .adek { font-size: 18px; -webkit-line-clamp: 5; }

/* tonight */
.tline { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; }
.tl { position: absolute; top: 34px; inset-inline: 0; height: 1px; background: rgba(255,255,255,0.12); min-width: 100%; }
.tcol { position: relative; display: flex; flex-direction: column; gap: 18px; }
.ttime { display: flex; align-items: center; gap: 12px; height: 68px; font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tdot { width: 14px; height: 14px; border-radius: 7px; background: var(--bg); border: 3px solid var(--accent); flex-shrink: 0; }
.tcard { flex-grow: 1; padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.timg { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; margin-bottom: 4px; }
.tch { font-size: 13px; color: var(--muted); }
.tname { font-size: 20px; font-weight: 600; color: var(--text); line-height: 1.3; }
a.tname:hover { color: var(--mint); }
.tcard .rem { margin-top: auto; }

/* music */
.musicb { padding-bottom: 96px; }
.mwrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; padding: 48px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.mcopy { display: flex; flex-direction: column; gap: 20px; }
.mcopy h2 { font-size: 44px; line-height: 1.1; }
.mcopy p { font-size: 16px; line-height: 1.7; color: var(--muted); }
.radio { margin-top: auto; display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: 18px; background: var(--bg); border: 1px solid rgba(255,255,255,0.08); }
.radbtn { width: 60px; height: 60px; border-radius: 30px; flex-shrink: 0; }
.rm { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.rname { font-size: 17px; font-weight: 600; } .rsub { font-size: 13px; color: var(--muted); }
.mside { display: flex; flex-direction: column; gap: 18px; }
.mhead { font-size: 15px; font-weight: 500; color: var(--text2); }
.mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mcard { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 16px; background: var(--bg); border-color: var(--line); }
.mm { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mname { font-size: 16px; font-weight: 600; } .msub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* group band (light) */
.grpband { background-color: var(--light); color: var(--ink); padding-top: 104px; padding-bottom: 104px; gap: 56px; }
.gtop { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end; }
.gtop > div:first-child { display: flex; flex-direction: column; gap: 18px; }
.gtop h2 { font-size: 56px; line-height: 1.08; letter-spacing: -0.01em; }
.gside { display: flex; flex-direction: column; gap: 24px; }
.gside p { font-size: 18px; line-height: 1.7; color: var(--ink2); }
.stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-l); }
.stats > div { padding: 28px 0; display: flex; flex-direction: column; gap: 6px; padding-inline-end: 16px; }
.sv { font-size: 56px; font-weight: 600; color: var(--green); line-height: 1.1; }
.sl { font-size: 15px; color: var(--ink2); }
.ggrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gcard, .ctcard { padding: 28px; border-radius: 20px; background: #fff; border: 1px solid var(--card-l); color: var(--ink); display: flex; flex-direction: column; gap: 14px; }
.gcard:hover, .ctcard:hover { color: var(--ink); border-color: rgba(19,110,66,.45); }
.gic { color: var(--green); display: flex; }
.gname { font-size: 20px; font-weight: 600; } .gsub { font-size: 14px; line-height: 1.6; color: var(--ink2); }

/* apps */
.apps { padding-top: 96px; padding-bottom: 96px; }
.appsw { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.appsw > div:first-child { display: flex; flex-direction: column; gap: 18px; }
.appsw h2 { font-size: 44px; line-height: 1.1; }
.appsw p { font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 560px; }
.appbtns { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* spotlight (library featured) */
.spot { padding-top: 32px; padding-bottom: 0; }
.spotin { position: relative; min-height: 460px; border-radius: 28px; background-color: #15372A; overflow: hidden; display: flex; align-items: flex-end; padding: 48px; }
.spotbg { position: absolute; inset: 0; } .spotbg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: blur(24px); transform: scale(1.1); }
.sring { position: absolute; top: -120px; inset-inline-end: -80px; width: 620px; height: 620px; border-radius: 50%; border: 1px solid rgba(91,196,140,0.25); }
.sart { position: absolute; top: -40px; inset-inline-end: 0; width: 460px; height: 460px; border-radius: 50%; background: rgba(255,255,255,0.05); overflow: hidden; }
.sart img { width: 100%; height: 100%; object-fit: cover; }
.scopy { position: relative; display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.scopy h2 { font-size: clamp(40px, 5.4vw, 80px); line-height: 1; font-weight: 700; }
.scopy p { font-size: 18px; line-height: 1.6; color: var(--text3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.scopy .row-btns { margin-top: 8px; }

/* ---- page heads, library -------------------------------------------------------- */
.phead { padding: 48px var(--gut) 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.phead > div:first-child { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.phead h1 { font-size: 56px; letter-spacing: -0.01em; line-height: 1.1; }
.phead p { font-size: 17px; color: var(--muted); }
.phead.lib { padding-top: 64px; }
.phead.lib h1 { font-size: 44px; }
.libctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.libctl .chip { height: 44px; padding: 0 16px; font-size: 13px; display: inline-flex; align-items: center; }
.libbar { padding: 20px var(--gut) 0; }
.libgen { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.libgen .chip { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; }
.count { font-size: 14px; white-space: nowrap; padding-top: 10px; }
.libgrid { padding: 28px var(--gut) 88px; }
body[data-view="news"] .phead .chips { flex-wrap: wrap; }
.phead .chips .chip { display: inline-flex; align-items: center; }

/* ---- title detail --------------------------------------------------------------- */
.thero { position: relative; min-height: 680px; display: flex; align-items: flex-end; padding: 120px var(--gut) 64px; overflow: hidden; background: var(--deep); }
.thbg { position: absolute; inset: 0; } .thbg img { width: 100%; height: 100%; object-fit: cover; }
.thscrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,16,13,.95) 0%, rgba(11,16,13,.75) 38%, rgba(11,16,13,.15) 75%), linear-gradient(0deg, var(--bg) 0%, rgba(11,16,13,0) 45%); }
[dir="rtl"] .thscrim { background: linear-gradient(270deg, rgba(11,16,13,.95) 0%, rgba(11,16,13,.75) 38%, rgba(11,16,13,.15) 75%), linear-gradient(0deg, var(--bg) 0%, rgba(11,16,13,0) 45%); }
.thcopy { position: relative; max-width: 720px; display: flex; flex-direction: column; gap: 18px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.crumbs a { color: var(--text2); } .crumbs a:hover { color: #fff; }
.thch { display: inline-flex; align-items: center; gap: 12px; color: var(--text2); font-size: 15px; align-self: flex-start; min-height: 32px; }
.thcopy h1 { font-size: clamp(40px, 5.4vw, 80px); line-height: 1.02; letter-spacing: -0.02em; }
.tmeta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 15px; color: var(--text2); }
.tmeta .sep, .byline .sep { color: var(--muted2); }
.tsyn { font-size: 18px; line-height: 1.7; color: var(--text3); max-width: 680px; }
.thcopy .chips { flex-wrap: wrap; }
.thcopy .chip { display: inline-flex; align-items: center; }
.tinfo { padding: 48px var(--gut); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; }
.tinfo h2 { font-size: 28px; margin-bottom: 20px; }
.airings { display: flex; flex-direction: column; gap: 8px; }
.airing { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.airing.now { border-color: rgba(91,196,140,.6); background: #1B2B22; }
.aw { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.awhen { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.awhen .muted { font-weight: 400; font-size: 12px; }
.ach { font-size: 13px; color: var(--muted); }
.cast { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 16px; }
.person { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.face { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 600; color: var(--accent); border: 2px solid var(--line2); }
.face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25% !important; }
.pn { font-size: 15px; font-weight: 500; } .pr { font-size: 13px; color: var(--muted); }

/* ---- news & article ------------------------------------------------------------- */
.nlead { padding: 32px var(--gut) 0; }
.ngrid { padding: 32px var(--gut) 88px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.art { padding: 48px var(--gut) 24px; }
.arthead { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.arthead h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.08; letter-spacing: -0.015em; }
.standfirst { font-size: 22px; line-height: 1.55; color: var(--text3); font-weight: 300; }
.byline { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.byline b { color: var(--text); font-weight: 500; }
.arthero { margin: 36px auto 0; max-width: 1200px; }
.arthero img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 24px; }
.arthero figcaption { font-size: 13px; color: var(--muted2); margin-top: 10px; }
.artbody { max-width: 1200px; margin: 48px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; justify-content: center; }
.prose { max-width: 720px; font-size: 18px; line-height: 1.8; color: var(--text3); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 28px; line-height: 1.25; color: var(--text); margin-top: 1.8em; }
.prose h3, .prose h4, .prose h5, .prose h6 { font-size: 21px; color: var(--text); margin-top: 1.5em; }
.prose ul { list-style: disc; padding-inline-start: 1.4em; } .prose ol { list-style: decimal; padding-inline-start: 1.4em; }
.prose li + li { margin-top: .4em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose blockquote { margin: 1.4em 0; padding-inline-start: 20px; border-inline-start: 3px solid var(--accent); font-size: 21px; color: var(--text); }
.prose code { background: var(--surface2); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.prose hr { border: 0; border-top: 1px solid var(--line2); }
.artside { display: flex; flex-direction: column; gap: 20px; align-self: start; position: sticky; top: calc(var(--hdr) + 24px); }
.aside-box { padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.aside-box h2 { font-size: 16px; margin-bottom: 8px; }
.chrow { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; color: var(--text); font-size: 14px; }
.chrow span:not(.chlogo) { flex-grow: 1; } .chrow:hover { color: #fff; }

/* ---- group page (light) --------------------------------------------------------- */
body[data-view="group"] main { background: var(--light); color: var(--ink); }
body[data-view="group"] .flash { border-radius: 0; }
.ghero { position: relative; padding: 112px var(--gut) 72px; display: flex; flex-direction: column; gap: 56px; overflow: hidden; }
.gring { position: absolute; top: -200px; inset-inline-end: -160px; width: 760px; height: 760px; border-radius: 50%; border: 1px solid rgba(19,110,66,0.18); }
.gdisc { position: absolute; top: -100px; inset-inline-end: -60px; width: 560px; height: 560px; border-radius: 50%; background: var(--green); overflow: hidden; }
.gdisc span { position: absolute; inset-inline-start: -80px; bottom: 120px; width: 760px; height: 180px; border-radius: 50%; border-top: 34px solid var(--light); transform: rotate(-14deg); }
.gcopy { position: relative; display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.gcopy h1 { font-size: clamp(48px, 5.8vw, 84px); line-height: 1.02; letter-spacing: -0.02em; }
.gcopy p { font-size: 20px; line-height: 1.65; color: var(--ink2); max-width: 640px; }
.ghero .stats > div { padding-bottom: 0; }
.ghero .sv { font-size: 60px; }
.gdivs { padding: 72px var(--gut); display: flex; flex-direction: column; gap: 32px; }
.shead { display: flex; flex-direction: column; gap: 10px; }
.shead h2 { font-size: 48px; line-height: 1.1; }
.tabs { display: flex; gap: 32px; border-bottom: 1px solid rgba(255,255,255,0.08); overflow-x: auto; scrollbar-width: none; }
.tab { height: 52px; font-size: 16px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; transition: all .2s; white-space: nowrap; flex-shrink: 0; }
.tab:hover { color: #fff; } .tab.on { color: #fff; border-bottom-color: var(--accent); }
.tabs.light { gap: 36px; border-bottom-color: var(--line-l); }
.tabs.light .tab { height: 56px; font-size: 17px; color: var(--ink2); }
.tabs.light .tab:hover, .tabs.light .tab.on { color: var(--ink); } .tabs.light .tab.on { border-bottom-color: var(--green); }
.dvpanel { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 40px; border-radius: 28px; background: #fff; border: 1px solid var(--card-l); }
.dvpanel > div:first-child { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.dvpanel h3 { font-size: 40px; color: var(--green); }
.dvpanel p { font-size: 18px; line-height: 1.7; color: var(--ink2); }
.dvart { position: relative; height: 320px; border-radius: 20px; background-color: #E7EDE9; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--green); }
.dvring { position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(19,110,66,.25); box-shadow: 0 0 0 60px rgba(19,110,66,.05); }
.dvic { position: relative; width: 150px; height: 150px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 60px rgba(19,110,66,.18); }
.gtl { background: var(--ink); color: var(--text); padding: 96px var(--gut); display: flex; flex-direction: column; gap: 48px; }
.tlgrid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.tlline { position: absolute; top: 8px; inset-inline: 0; height: 2px; background: rgba(91,196,140,0.35); }
.tlgrid li { position: relative; display: flex; flex-direction: column; gap: 16px; }
.tldot { width: 18px; height: 18px; border-radius: 9px; background: var(--light); border: 4px solid var(--green); }
.tly { font-size: 44px; font-weight: 600; color: var(--accent); line-height: 1; }
.tlt { font-size: 20px; font-weight: 600; } .tlb { font-size: 15px; line-height: 1.6; color: var(--muted); }
.gcar { padding: 96px var(--gut); display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; }
.gcarmain { display: flex; flex-direction: column; gap: 24px; }
.gcarmain h2 { font-size: 48px; line-height: 1.1; } .gcarmain p { font-size: 17px; line-height: 1.7; color: var(--ink2); }
.depgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; min-height: 360px; }
.depcard { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--card-l); color: var(--ink); align-self: start; }
.depcard:hover { color: var(--ink); }
.dn { font-size: 19px; font-weight: 600; } .db { font-size: 14px; line-height: 1.6; color: var(--ink2); }
.dl { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--green); }
.alert { align-self: start; display: flex; flex-direction: column; gap: 18px; padding: 36px; border-radius: 28px; background: var(--green); color: #fff; margin-top: 64px; }
.alert h3 { font-size: 28px; } .alert p { font-size: 15px; line-height: 1.6; color: #D6EDE0; }
.subform { display: flex; flex-direction: column; gap: 10px; }
.subform label { font-size: 13px; color: #D6EDE0; }
.subform input { height: 52px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: #fff; outline: none; font-size: 15px; }
.subform input:focus { border-color: #fff; }
.subform input::placeholder { color: rgba(255,255,255,.6); }
.subform .btn { height: 52px; border-radius: 14px; font-size: 15px; }
.subdone { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 14px; background: rgba(255,255,255,0.14); font-size: 15px; font-weight: 500; }
.gcontact { padding: 0 var(--gut) 104px; display: flex; flex-direction: column; gap: 28px; }
.gcontact h2 { font-size: 36px; }
.ctgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ctm { font-size: 14px; color: var(--green); font-weight: 500; }
body[data-view="group"] .chipL:focus-visible, body[data-view="group"] :focus-visible { outline-color: var(--green); }

/* ---- live -------------------------------------------------------------------------- */
.livemain { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; padding: 32px var(--gut) 72px; }
.livecol { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.player { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background-color: #050806; border: 1px solid rgba(255,255,255,0.08); }
.player:fullscreen { border-radius: 0; }
.pmedia { position: absolute; inset: 0; }
.pvideo { width: 100%; height: 100%; object-fit: contain; background: #000; }
.pposter { position: absolute; inset: 0; } .pposter img { width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(.9); }
.pposter::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(5,8,6,.35), rgba(5,8,6,.85)); }
.pcenter { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; padding-bottom: 110px; }
.plbl { font-size: 12px; letter-spacing: .14em; color: rgba(255,255,255,0.5); }
.player .pname { font-size: clamp(24px, 3vw, 44px); font-weight: 600; color: rgba(255,255,255,0.9); }
.pnote { font-size: 14px; color: var(--muted); }
.bigplay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -80%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; font-weight: 500; font-size: 15px; z-index: 2; opacity: 0; transition: opacity .25s; }
.player:hover .bigplay, .bigplay:focus-visible { opacity: 1; }
.pvideo ~ .bigplay, .pmedia:has(video) ~ .bigplay { opacity: 1; }
.bpc { width: 76px; height: 76px; border-radius: 38px; background: rgba(255,255,255,.92); color: var(--bg); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 40px rgba(0,0,0,.5); transition: transform .25s var(--ease); }
.bigplay:hover .bpc { transform: scale(1.06); }
.ptop { position: absolute; top: 20px; inset-inline: 20px; display: flex; justify-content: space-between; align-items: center; z-index: 1; pointer-events: none; }
.livebadge { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(229,72,77,0.9); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.wd { width: 7px; height: 7px; border-radius: 4px; background: #fff; }
.qual { height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(0,0,0,0.55); font-size: 12px; display: flex; align-items: center; }
.pbar { position: absolute; bottom: 0; inset-inline: 0; padding: 18px 20px; background: rgba(5,8,6,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 14px; z-index: 1; }
.prange { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.ptrack { position: relative; flex-grow: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.18); }
.pfill { height: 4px; background: var(--accent); border-radius: 4px; transition: width .6s var(--ease); }
.pknob { position: absolute; top: -5px; width: 14px; height: 14px; margin-inline-start: -7px; border-radius: 7px; background: #fff; transition: inset-inline-start .6s var(--ease); }
.plive { color: var(--red-soft); font-weight: 600; letter-spacing: .06em; }
.pctl { display: flex; align-items: center; gap: 8px; }
.pctl .btn.on { color: var(--red-soft); }
.nowinfo { display: flex; gap: 20px; align-items: flex-start; }
.nimain { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; min-width: 0; }
.nisub { font-size: 14px; color: var(--muted); }
.nimain h1 { font-size: 40px; line-height: 1.1; }
.nimain h1 a { color: var(--text); } .nimain h1 a:hover { color: var(--mint); }
.ninext { font-size: 15px; color: var(--text2); }
.nibtns { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.tpanel { min-height: 240px; }
.sched { display: flex; flex-direction: column; gap: 4px; }
.srow { display: flex; align-items: center; gap: 20px; padding: 10px 18px; min-height: 60px; border-radius: 14px; }
.srow.now { background: rgba(91,196,140,0.10); }
.srow.past { opacity: .6; }
.stime { width: 170px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.stitle { flex-grow: 1; font-size: 17px; font-weight: 500; min-width: 0; }
.stitle a { color: var(--text); } .stitle a:hover { color: var(--mint); }
.nowtag { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--accent); font-weight: 600; min-height: 44px; }
.srow a.rem { color: var(--accent); } .srow a.rem:hover { color: var(--mint); }
.about { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.about p { font-size: 18px; line-height: 1.7; color: var(--text3); }
.fh { font-size: 13px; color: var(--muted2); letter-spacing: .08em; }
.social { display: flex; gap: 10px; flex-wrap: wrap; }
.catch { display: flex; flex-direction: column; gap: 18px; }
.catchgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ccu { display: flex; flex-direction: column; gap: 10px; border-radius: 14px; }
.ccimg { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
.ccn { font-size: 16px; font-weight: 600; } .ccd { font-size: 13px; color: var(--muted); }
.chaside { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); align-self: start; position: sticky; top: calc(var(--hdr) + 16px); max-height: calc(100vh - var(--hdr) - 32px); overflow: auto; scrollbar-width: thin; }
.ah { font-size: 18px; font-weight: 600; }
.chips.sm { gap: 8px; }
.chaside .chip { display: inline-flex; align-items: center; }
.chlist { display: flex; flex-direction: column; gap: 2px; }
.chitem { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: var(--text); width: 100%; }
.chitem:hover { color: var(--text); }
.cn { width: 22px; font-size: 12px; color: var(--muted2); flex-shrink: 0; }
.cm { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex-grow: 1; }
.cmn { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- guide ------------------------------------------------------------------------- */
body[data-view="guide"] main { padding-bottom: 80px; }
.gdays { display: flex; gap: 8px; padding: 20px var(--gut) 4px; }
.day { flex-direction: column; gap: 2px; min-width: 84px; height: 56px; padding: 0 12px; border-radius: 14px; font-size: 14px; flex-shrink: 0; display: inline-flex; }
.dtag { font-size: 10px; letter-spacing: .06em; opacity: .7; }
.gcats { padding: 16px var(--gut) 0; flex-wrap: wrap; }
.gpanel { margin: 24px var(--gut) 0; min-height: 132px; padding: 24px 28px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; }
.ghint { font-size: 16px; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.gdet { display: flex; align-items: center; gap: 28px; width: 100%; }
.gthumb { width: 150px; height: 84px; border-radius: 12px; flex-shrink: 0; overflow: hidden; }
.gdm { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; min-width: 0; font-size: 14px; }
.gdt { font-size: 26px; font-weight: 600; line-height: 1.2; }
.gdt a { color: var(--text); } .gdt a:hover { color: var(--mint); }
.gdb { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.epg { position: relative; margin: 24px var(--gut) 0; border-radius: 20px; background: var(--grid); border: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scroll-snap-type: none; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.epg::-webkit-scrollbar { display: block; height: 10px; } .epg::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 10px; }
.epgin { position: relative; }
.erow { display: flex; height: 84px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.erow.ehead { height: 48px; border-bottom-color: rgba(255,255,255,0.08); background: var(--surface); position: relative; }
.ech { position: sticky; inset-inline-start: 0; z-index: 3; width: 220px; flex-shrink: 0; display: flex; align-items: center; background: var(--surface); border-inline-end: 1px solid rgba(255,255,255,0.08); }
.ech a { display: flex; align-items: center; gap: 12px; padding: 0 16px; width: 100%; height: 100%; color: var(--text); font-size: 13px; font-weight: 500; line-height: 1.3; }
.ech a:hover { color: #fff; background: rgba(255,255,255,.03); }
.etrack { position: relative; flex-shrink: 0; }
.tick { position: absolute; top: 0; height: 48px; display: flex; align-items: center; padding-inline-start: 10px; border-inline-start: 1px solid rgba(255,255,255,0.08); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.slot { position: absolute; top: 8px; bottom: 8px; margin-inline-start: 3px; padding: 10px 12px; border-radius: 10px; background-color: var(--surface2); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; gap: 4px; text-align: start; overflow: hidden; transition: background-color .2s, border-color .2s; }
.slot:hover { background-color: #22302A; border-color: rgba(91,196,140,0.5); }
.slot.past { opacity: .55; }
.slot.now { border-color: rgba(91,196,140,0.6); background-color: #1B2B22; }
.slot.on { background-color: var(--green); border-color: var(--accent); opacity: 1; }
.stl { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stm { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.slot.on .stm { color: #D6EDE0; }
.nowline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); pointer-events: none; z-index: 2; transition: inset-inline-start .6s linear; }
.nowline span { position: absolute; top: 12px; inset-inline-start: -26px; width: 54px; height: 24px; border-radius: 12px; background: var(--red); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* ---- footer ------------------------------------------------------------------------ */
.foot { background: var(--deep); border-top: 1px solid rgba(255,255,255,0.06); padding: 72px var(--gut) 40px; }
.fgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr; gap: 48px; }
.fbrand { display: flex; flex-direction: column; gap: 20px; }
.fbrand img { height: 72px; width: auto; align-self: flex-start; }
.fbrand p { font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 340px; }
.fcol { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.fcol .nav { font-size: 15px; }
.fcol .app { width: 100%; }
.fh { font-size: 13px; color: var(--muted2); }
.fbase { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted2); }
.conn { display: inline-flex; align-items: center; gap: 8px; }
.cdot { width: 8px; height: 8px; border-radius: 4px; background: #6b6b6b; }
.conn.ok .cdot { background: var(--accent); box-shadow: 0 0 0 3px rgba(91,196,140,.18); }
.tabbar { display: none; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); z-index: 70; padding: 12px 20px; border-radius: 14px; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- responsive ---------------------------------------------------------------------- */
@media (max-width: 1320px) {
  .top { gap: 22px; }
  .mainnav { gap: 20px; }
  .srch { width: 220px; }
  .signin { display: none; }
}
@media (max-width: 1180px) {
  :root { --gut: 40px; }
  .mainnav { gap: 16px; } .nav { font-size: 14px; }
  .srch { width: 180px; }
  .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prow { grid-auto-columns: calc((100% - 64px) / 5); }
  .pgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .agrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agrid > :nth-child(n+4) { display: none; }
  .hart { width: 420px; height: 420px; top: 220px; }
  .hcopy { width: calc(100% - 520px); min-width: 400px; }
  .livemain { grid-template-columns: minmax(0, 1fr) 340px; }
  .fgrid { grid-template-columns: 1.4fr 1fr 1fr; }
  .fgrid .fcol:last-child { grid-column: span 3; flex-direction: row; flex-wrap: wrap; align-items: center; } .fgrid .fcol:last-child .app { width: auto; }
  .ggrid, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .artbody { grid-template-columns: minmax(0, 1fr); } .artside { position: static; }
}
@media (max-width: 1000px) {
  .joinbtn { display: none; }
  .mainnav { display: none; }
  .srch { width: 260px; }
  .hart { width: 340px; height: 340px; top: 110px; inset-inline-end: -40px; opacity: .9; }
  .hcopy { width: auto; inset-inline-end: var(--gut); min-width: 0; top: auto; bottom: 130px; }
  .hero { height: 680px; }
  .gtop, .appsw, .mwrap, .tinfo, .gcar, .dvpanel { grid-template-columns: 1fr; }
  .appbtns { justify-content: flex-start; }
  .livemain { grid-template-columns: 1fr; }
  .chaside { position: static; max-height: none; }
  .chlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .acard.big { grid-template-columns: 1fr; } .acard.big .aimg { min-height: 0; aspect-ratio: 16 / 9; } .acard.big .ameta { padding: 28px; }
  .ngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tlgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tlline { display: none; }
  .alert { margin-top: 0; }
  .ctgrid { grid-template-columns: 1fr; }
  .lrow { grid-auto-columns: calc((100% - 32px) / 3); }
  .tline { grid-auto-columns: calc((100% - 32px) / 3); }
  .kgrid { grid-auto-columns: calc((100% - 32px) / 3); }
}

/* mobile (390 board) */
@media (max-width: 760px) {
  :root { --gut: 16px; --hdr: 72px; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .top { gap: 8px; padding: 0 16px; }
  .logo img { height: 46px; }
  .searchwrap { position: absolute; top: 72px; inset-inline: 0; padding: 10px 16px; background: rgba(11,16,13,.96); border-bottom: 1px solid var(--line); display: none; }
  .top.search-open .searchwrap { display: block; }
  .srch { width: 100%; }
  .sres { position: static; width: auto; max-width: none; margin-top: 8px; }
  .msearch { display: inline-flex; }
  .langbtn { padding: 0 14px; font-size: 13px; }
  .langbtn svg { display: none; }
  .rail { padding: 16px var(--gut); gap: 14px; }
  .rhead h2 { font-size: 22px; gap: 10px; }
  .rhead p { font-size: 14px; }
  .rhead-end .arrows { display: none; }
  .more { font-size: 14px; }
  .scroller { margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  /* hero card */
  .hero { height: auto; padding: 16px; background: var(--bg); }
  .hslides { position: relative; height: 440px; border-radius: 24px; overflow: hidden; }
  .hbg img { opacity: .55; filter: none; transform: none; }
  .hbg::after, [dir="rtl"] .hbg::after { background: linear-gradient(0deg, rgba(11,16,13,.96) 0%, rgba(11,16,13,.55) 50%, rgba(11,16,13,.1) 100%); }
  .rings .r1 { display: none; }
  .rings .r2 { top: -60px; inset-inline-end: -80px; width: 340px; height: 340px; background: rgba(255,255,255,.05); border-color: rgba(91,196,140,.25); }
  .hart { display: none; }
  .hcopy { inset-inline: 22px; bottom: 22px; top: auto; width: auto; gap: 12px; }
  .hkick { font-size: 13px; }
  .htitle, .htitle.long { font-size: 40px; line-height: 1.02; }
  .htitle.long { font-size: 32px; }
  .hdesc { display: none; }
  .hbtns { margin-top: 0; }
  .hbtns > :first-child { flex-grow: 1; height: 52px; }
  .hbtns > .tog { display: none; }
  .hctrl { position: static; justify-content: center; padding-top: 12px; }
  .harrows { display: none; }
  .hdots { gap: 6px; }
  .hdot { min-height: 44px; min-width: 20px; align-items: center; }
  .dlbl { display: none; }
  /* on air: horizontal cards */
  .onair { padding-top: 16px; }
  .onair .chips { overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .onair .chip { flex-shrink: 0; height: 40px; padding: 0 16px; font-size: 13px; }
  .cgrid { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; grid-template-columns: none; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-snap-type: x mandatory; }
  .cgrid > * { scroll-snap-align: start; }
  .ccard { padding: 16px; border-radius: 18px; gap: 12px; }
  .ccard .chlogo { width: 40px; height: 40px; border-radius: 10px; }
  .cnow { font-size: 17px; }
  .cnext, .cnum { display: none; }
  /* continue as a list */
  .kgrid { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; overflow: visible; }
  .kcard { flex-direction: row; align-items: center; gap: 14px; padding: 6px; }
  .kimg { width: 136px; height: 76px; aspect-ratio: auto; border-radius: 12px; flex-shrink: 0; }
  .kimg .tag, .kimg .playc { display: none; }
  .kbar { height: 3px; } .kbar span { height: 3px; }
  .kmeta { flex-direction: column; gap: 4px; padding: 0; }
  .kname { font-size: 16px; }
  /* rails */
  .prow, .top10 .prow { grid-auto-columns: 140px; gap: 12px; }
  .ranked { padding-inline-start: 36px; } .rank { font-size: 96px; bottom: 44px; }
  .ptitle { font-size: 16px; padding: 32px 10px 10px; }
  .lrow { grid-auto-columns: 260px; gap: 12px; }
  .agrid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 280px; }
  .agrid > :nth-child(n+4) { display: flex; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  /* tonight: list rows */
  .tline { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; overflow: visible; }
  .tl, .tdot, .timg { display: none; }
  .tcol { flex-direction: row; align-items: center; gap: 0; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
  .ttime { height: auto; font-size: 18px; width: 56px; flex-shrink: 0; }
  .tcard { padding: 0; border: 0; background: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-width: 0; }
  .tch { order: 2; font-size: 12px; width: calc(100% - 120px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tname { order: 1; font-size: 15px; width: calc(100% - 120px); }
  .tcard .rem { order: 3; margin: 0; margin-inline-start: auto; position: relative; font-size: 13px; }
  .tcard { position: relative; flex-grow: 1; }
  .tcard .rem { position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); }
  /* blocks */
  .mwrap { padding: 24px; border-radius: 22px; }
  .mcopy h2, .appsw h2 { font-size: 30px; }
  .mgrid { grid-template-columns: 1fr; }
  .musicb { padding-bottom: 32px; }
  .grpband { padding-top: 56px; padding-bottom: 56px; gap: 32px; }
  .gtop { gap: 24px; } .gtop h2 { font-size: 34px; }
  .sv { font-size: 40px; }
  .ggrid { grid-template-columns: 1fr; }
  .apps { padding-top: 48px; padding-bottom: 48px; }
  .spotin { padding: 24px; min-height: 420px; border-radius: 24px; }
  .sart { width: 300px; height: 300px; top: -40px; inset-inline-end: -60px; }
  .sring { display: none; }
  .phead { padding-top: 28px; }
  .phead h1, .phead.lib h1 { font-size: 34px; }
  .libctl { width: 100%; } .srch.lib { width: 100%; }
  .libgen { flex-direction: column; gap: 12px; }
  .libgen .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + 32px); margin-inline: -16px; padding-inline: 16px; }
  .libgen .chip { flex-shrink: 0; }
  .count { padding-top: 0; }
  .thero { min-height: 560px; padding-top: 200px; padding-bottom: 32px; }
  .thscrim, [dir="rtl"] .thscrim { background: linear-gradient(0deg, var(--bg) 8%, rgba(11,16,13,.7) 55%, rgba(11,16,13,.2) 100%); }
  .tsyn { font-size: 16px; }
  .thcopy .row-btns .btn { flex-grow: 1; }
  .airing { flex-wrap: wrap; }
  .face { width: 88px; height: 88px; } .cast { grid-auto-columns: 100px; }
  .ngrid { grid-template-columns: 1fr; }
  .standfirst { font-size: 18px; }
  .prose { font-size: 17px; }
  .arthero img { border-radius: 16px; }
  .livemain { padding-top: 0; gap: 20px; }
  .player { margin-inline: -16px; border-radius: 0; border-inline: 0; }
  .pbar { padding: 10px 12px; gap: 8px; }
  .pctl .btn.pill, .pctl .btn:nth-last-child(2), .pctl .btn:nth-last-child(3) { display: none; }
  .pctl .icon-btn { width: 44px; height: 44px; }
  .pcenter .chlogo.xl { width: 56px; height: 56px; border-radius: 14px; }
  .pcenter { padding-bottom: 80px; gap: 6px; }
  .bigplay { opacity: 1; transform: translate(-50%, -70%); }
  .bigplay > span:last-child { display: none; }
  .bpc { width: 60px; height: 60px; }
  .nowinfo { flex-wrap: wrap; gap: 14px; }
  .nowinfo .chlogo.lg { width: 52px; height: 52px; border-radius: 14px; }
  .nimain h1 { font-size: 26px; }
  .nibtns { width: 100%; justify-content: flex-start; }
  .srow { flex-wrap: wrap; gap: 4px 12px; padding: 10px 12px; }
  .stime { width: 100%; font-size: 13px; }
  .catchgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chlist { grid-template-columns: 1fr; }
  .gpanel { padding: 18px; }
  .gdet { flex-wrap: wrap; gap: 14px; }
  .gthumb { width: 112px; height: 63px; }
  .gdm { width: calc(100% - 130px); }
  .gdt { font-size: 20px; }
  .ech { width: 120px; } .ech a { padding: 0 10px; font-size: 12px; gap: 8px; } .ech .chlogo { display: none; }
  .erow { height: 72px; }
  .ghero { padding-top: 72px; gap: 32px; }
  .gring { display: none; } .gdisc { width: 280px; height: 280px; top: -80px; inset-inline-end: -100px; }
  .gcopy p { font-size: 17px; }
  .ghero .sv { font-size: 40px; }
  .shead h2, .gcarmain h2 { font-size: 32px; }
  .gdivs, .gcar { padding-top: 48px; padding-bottom: 48px; }
  .dvpanel { padding: 24px; } .dvpanel h3 { font-size: 28px; } .dvart { height: 200px; }
  .tabs.light { gap: 24px; }
  .gtl { padding-top: 56px; padding-bottom: 56px; }
  .tlgrid { grid-template-columns: 1fr; }
  .depgrid { grid-template-columns: 1fr; min-height: 0; }
  .alert { padding: 24px; }
  .foot { padding: 48px 16px 32px; }
  .fgrid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .fbrand { grid-column: span 2; }
  .fgrid .fcol:last-child { grid-column: span 2; }
  .fbase { margin-top: 32px; }
  .toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
  .tabbar { position: fixed; bottom: 0; inset-inline: 0; z-index: 40; height: calc(72px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: rgba(11,16,13,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,0.08); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ph); font-size: 11px; font-weight: 500; min-height: 44px; }
  .tabbar a.on { color: #fff; }
  .tbar { position: absolute; top: 0; width: 28px; height: 3px; border-radius: 3px; background: transparent; }
  .tabbar a.on .tbar { background: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ld, .eq span { animation: none !important; }
  .card:hover, .btn:hover { transform: none; }
  .hslide.on .hart img { transform: scale(1.04); }
}