/* 6Comix reader (episodes/episode_detail.html + reader/reader.js).
State lives in classes on : rd-on (reader page), rd-paged (page-by-page mode), rd-gap, rd-hide-ui,
rd-peek (translation hidden while a key is held) and data-rd-bg (black | dim | light).
The fixed chrome (.rd-ui) is moved to by the script, so nothing in the site layout can pin it. */
@font-face { font-family: 'Mikhak'; src: url('../fonts/Mikhak-Medium.woff2') format('woff2'); font-weight: 100 600; font-display: swap; }
@font-face { font-family: 'Mikhak'; src: url('../fonts/Mikhak-Bold.woff2') format('woff2'); font-weight: 700 900; font-display: swap; }
html.rd-on {
--rd-bg: #07080c;
--rd-fg: #eef0f7;
--rd-muted: rgba(238, 240, 247, .58);
--rd-soft: rgba(238, 240, 247, .08);
--rd-line: rgba(238, 240, 247, .12);
--rd-glass: rgba(12, 14, 20, .78);
--rd-accent: #2be6cd;
--rd-accent-2: #ff5c93;
--rd-sk: #13151c;
--rd-top-h: 56px;
--rd-bot-h: 64px;
background: var(--rd-bg);
}
html.rd-on[data-rd-bg="dim"] { --rd-bg: #1c1e24; --rd-sk: #25272e; }
html.rd-on[data-rd-bg="light"] { --rd-bg: #eceae4; --rd-fg: #16171c; --rd-muted: rgba(22, 23, 28, .6); --rd-soft: rgba(22, 23, 28, .06); --rd-line: rgba(22, 23, 28, .12); --rd-sk: #dedcd5; }
html.rd-on body { background: var(--rd-bg) !important; }
html.rd-on #site-navbar, html.rd-on body > footer { display: none !important; }
.rd { position: relative; min-height: 100vh; background: var(--rd-bg); color: var(--rd-fg); font-family: 'Vazirmatn', Tahoma, sans-serif; direction: rtl; }
.rd *, .rd-ui * { box-sizing: border-box; }
.rd-ui [hidden], .rd [hidden] { display: none !important; }
.rd-body { padding-top: calc(var(--rd-top-h) + env(safe-area-inset-top)); }
.rd-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------------------------------------------------------------- intro */
.rd-intro { display: flex; align-items: center; gap: 14px; max-width: min(var(--rd-w, 800px), 100%); margin: 6px auto 14px; padding: 0 16px; }
.rd-intro-cover { flex: none; width: 56px; height: 76px; border-radius: 10px; object-fit: cover; background: var(--rd-soft); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.rd-intro-text { min-width: 0; flex: 1; }
.rd-intro h1 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.5; color: var(--rd-fg); }
.rd-intro h1 small { display: block; font-size: 13px; font-weight: 600; color: var(--rd-muted); }
.rd-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--rd-muted); }
.rd-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--rd-soft); }
.rd-chip.tr { background: rgba(43, 230, 205, .14); color: var(--rd-accent); font-weight: 700; }
.rd-chip.warn { background: rgba(255, 176, 32, .16); color: #ffb020; font-weight: 700; }
.rd-preview { max-width: min(var(--rd-w, 800px), 100%); margin: 0 auto 12px; padding: 0 16px; }
.rd-preview div { padding: 10px 14px; border-radius: 12px; background: rgba(255, 176, 32, .12); color: #ffb020; font-size: 12px; line-height: 1.8; }
/* ---------------------------------------------------------------- the pages: vertical mode */
.rd-stage { position: relative; }
.rd-strip { --rd-gap-px: 0px; display: flex; flex-direction: column; gap: var(--rd-gap-px); width: 100%; max-width: var(--rd-w, 800px); margin: 0 auto; direction: ltr; }
html.rd-gap .rd-strip { --rd-gap-px: 12px; }
.rd-page {
--s: 1;
position: relative; width: 100%; margin: 0; overflow: hidden; background: var(--rd-sk);
touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
html.rd-gap .rd-page { border-radius: 4px; }
.rd-page.zoomed { touch-action: none; cursor: grab; z-index: 5; }
.rd-img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform-origin: 0 0; transition: opacity .45s ease; -webkit-user-drag: none; }
.rd-page.ready .rd-img { opacity: 1; }
.rd-noscript { display: block; width: 100%; height: auto; }
.rd-sk { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--rd-muted); font-size: 11px; transition: opacity .35s ease; }
.rd-sk::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, var(--rd-soft) 50%, transparent 80%) 0 0 / 250% 100%; animation: rd-shine 1.6s linear infinite; }
.rd-page.ready .rd-sk { opacity: 0; pointer-events: none; }
.rd-ring { position: relative; width: 52px; height: 52px; }
.rd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rd-ring circle { fill: none; stroke-width: 4; }
.rd-ring .track { stroke: var(--rd-line); }
.rd-ring .bar { stroke: url(#rdRingGrad); stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: 138.2; transition: stroke-dashoffset .15s linear; }
.rd-ring.indet svg { animation: rd-spin 1s linear infinite; }
.rd-ring.indet .bar { stroke-dashoffset: 100; }
.rd-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--rd-fg); }
.rd-err { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--rd-sk); color: var(--rd-muted); font-size: 12px; }
.rd-err[hidden] { display: none; }
.rd-err button { padding: 6px 14px; border: 0; border-radius: 10px; background: var(--rd-soft); color: var(--rd-fg); font: inherit; font-weight: 700; cursor: pointer; }
@keyframes rd-shine { to { background-position: -250% 0; } }
@keyframes rd-spin { to { transform: rotate(270deg); } }
/* the page while held: the original art without the translation */
.rd-page.peek::after {
content: 'متن اصلی'; position: absolute; top: 10px; left: 50%; z-index: 30; transform: translateX(-50%);
padding: 3px 12px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font: 700 11px 'Vazirmatn', sans-serif; pointer-events: none;
}
/* ---------------------------------------------------------------- the translation layer (v2 reader)
The editor draws every page in a 720-wide space; --s = this page's width / 720 and --m is the offset the editor
recorded every x against. Boxes are laid out at design size and scaled, so the font fit never depends on the screen. */
.tr-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; direction: ltr; transform-origin: 0 0; transition: opacity .2s ease, visibility .2s; }
.tr-off .tr-layer, html.rd-peek .tr-layer, .rd-page.peek .tr-layer { opacity: 0; visibility: hidden; }
.tr-layer .bx {
position: absolute; left: calc((var(--x) - var(--m, 0)) * var(--s) * 1px); top: calc(var(--y) * var(--s) * 1px);
width: calc((var(--ex) - var(--x)) * 1px); height: calc((var(--ey) - var(--y)) * 1px); transform: scale(var(--s)); transform-origin: 0 0;
}
.tr-layer .bxi { width: 100%; height: 100%; background: var(--bg); color: var(--fg); border-radius: calc(var(--r) * 1%); transform: rotate(calc(var(--rot) * 1deg)); }
.tr-layer .bt {
width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; white-space: nowrap; direction: rtl;
justify-content: var(--jc); align-items: var(--ai); font-weight: var(--fw); font-family: 'Mikhak', 'Vazirmatn', Tahoma, sans-serif;
}
.tr-layer .bt > div { max-width: none; }
/* ---------------------------------------------------------------- the pages: page-by-page mode */
html.rd-paged .rd-stage { height: 100vh; height: 100dvh; overflow: hidden; touch-action: pan-y; }
html.rd-paged .rd-strip { position: relative; display: block; max-width: none; height: 100%; }
html.rd-paged .rd-page { position: absolute; width: auto; aspect-ratio: auto !important; visibility: hidden; border-radius: 0; }
html.rd-paged .rd-page.in-view { visibility: visible; will-change: transform; }
html.rd-paged .rd-page.zoomed { overflow: hidden; }
.rd-arrow {
position: absolute; top: 50%; z-index: 40; display: none; width: 48px; height: 88px; margin-top: -44px; border: 0; border-radius: 14px;
background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; opacity: 0; transition: opacity .2s, background .2s;
}
.rd-arrow svg { width: 26px; height: 26px; }
.rd-arrow.l { left: 12px; } .rd-arrow.r { right: 12px; }
.rd-arrow:hover { background: rgba(0, 0, 0, .6); }
.rd-arrow[disabled] { display: none !important; }
@media (hover: hover) and (pointer: fine) {
html.rd-paged .rd-arrow { display: grid; place-items: center; }
html.rd-paged .rd-stage:hover .rd-arrow { opacity: 1; }
}
/* ---------------------------------------------------------------- the end of the episode */
.rd-end { max-width: 560px; margin: 0 auto; padding: 28px 16px calc(var(--rd-bot-h) + 40px + env(safe-area-inset-bottom)); text-align: center; }
.rd-end-kicker { margin: 0; color: var(--rd-accent); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.rd-end h2 { margin: 4px 0 18px; font-size: 20px; font-weight: 800; color: var(--rd-fg); }
a.rd-next {
display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; text-align: right; text-decoration: none; color: #0a0d14;
background: linear-gradient(120deg, var(--rd-accent), #7cf1e1); box-shadow: 0 12px 34px rgba(43, 230, 205, .25); transition: transform .15s ease;
}
a.rd-next:active { transform: scale(.98); }
.rd-next img, .rd-next .ph { flex: none; width: 88px; height: 60px; border-radius: 12px; object-fit: cover; background: rgba(0, 0, 0, .15); }
.rd-next span { flex: 1; min-width: 0; }
.rd-next small { display: block; font-size: 12px; font-weight: 700; opacity: .75; }
.rd-next b { display: block; font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-next svg { flex: none; width: 26px; height: 26px; }
.rd-caught { padding: 16px; border-radius: 16px; background: var(--rd-soft); color: var(--rd-fg); line-height: 1.9; font-size: 14px; }
.rd-caught b { color: var(--rd-accent); }
.rd-end-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.rd-end-actions a, .rd-end-actions button {
display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border: 0; border-radius: 14px;
background: var(--rd-soft); color: var(--rd-fg); font: 700 12px 'Vazirmatn', sans-serif; text-decoration: none; cursor: pointer;
}
.rd-end-actions svg { width: 20px; height: 20px; opacity: .85; }
.rd-end-prev { display: inline-block; margin-top: 16px; color: var(--rd-muted); font-size: 12px; }
/* ---------------------------------------------------------------- chrome */
.rd-ui { direction: rtl; font-family: 'Vazirmatn', Tahoma, sans-serif; color: #eef0f7; }
.rd-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 1110; height: 3px; background: rgba(255, 255, 255, .06); pointer-events: none; }
.rd-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 0; transform: scaleX(0); background: linear-gradient(90deg, var(--rd-accent), var(--rd-accent-2)); transition: transform .15s linear; }
.rd-top, .rd-bottom {
position: fixed; left: 0; right: 0; z-index: 1100; display: flex; align-items: center; gap: 6px;
background: var(--rd-glass); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
transition: transform .28s cubic-bezier(.2, .7, .2, 1), opacity .28s;
}
.rd-top { top: 0; min-height: var(--rd-top-h); padding: calc(4px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 4px max(10px, env(safe-area-inset-left)); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.rd-bottom { bottom: 0; min-height: var(--rd-bot-h); padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); border-top: 1px solid rgba(255, 255, 255, .06); }
html.rd-hide-ui .rd-top { transform: translateY(-110%); opacity: 0; }
html.rd-hide-ui .rd-bottom { transform: translateY(110%); opacity: 0; }
@media (min-width: 720px) {
.rd-top, .rd-bottom { left: 50%; right: auto; width: min(760px, calc(100% - 24px)); transform: translateX(-50%); }
.rd-top { top: 8px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); padding-top: 4px; }
.rd-bottom { bottom: 10px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); padding-bottom: 8px; }
html.rd-hide-ui .rd-top { transform: translate(-50%, -130%); }
html.rd-hide-ui .rd-bottom { transform: translate(-50%, 130%); }
.rd-progress { top: 0; }
}
.rd-ic, a.rd-ic {
flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; padding: 0;
background: transparent; color: #eef0f7; cursor: pointer; text-decoration: none; transition: background .15s, transform .1s;
}
.rd-ic:hover { background: rgba(255, 255, 255, .1); }
.rd-ic:active { transform: scale(.92); }
.rd-ic svg { width: 21px; height: 21px; }
.rd-ic[aria-disabled="true"] { opacity: .28; pointer-events: none; }
.rd-ic:focus-visible, .rd-ui button:focus-visible, .rd-ui a:focus-visible, .rd button:focus-visible, .rd a:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; }
.rd-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 4px 8px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: right; cursor: pointer; font: inherit; }
.rd-titles:hover { background: rgba(255, 255, 255, .06); }
.rd-titles b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; }
.rd-titles span { display: flex; align-items: center; gap: 4px; max-width: 100%; font-size: 11px; color: rgba(238, 240, 247, .6); white-space: nowrap; }
.rd-titles span em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.rd-titles svg { flex: none; width: 13px; height: 13px; }
.rd-trbtn {
flex: none; display: inline-flex; align-items: center; height: 32px; padding: 3px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1);
cursor: pointer; font: 800 11px 'Vazirmatn', sans-serif;
}
.rd-trbtn span { display: grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 999px; color: rgba(238, 240, 247, .6); transition: background .2s, color .2s; }
.rd-trbtn[aria-pressed="true"] .fa, .rd-trbtn[aria-pressed="false"] .en { background: var(--rd-accent); color: #07080c; }
.rd-scrub { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.rd-scrub input[dir="ltr"] { direction: ltr; }
.rd-scrub input[dir="rtl"] { direction: rtl; }
.rd-scrub input { flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; accent-color: var(--rd-accent); cursor: pointer; -webkit-appearance: none; appearance: none; }
.rd-scrub input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(var(--rd-dir, 90deg), var(--rd-accent) 0 var(--p, 0%), rgba(255, 255, 255, .16) var(--p, 0%)); }
.rd-scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(43, 230, 205, .35); }
.rd-scrub input::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.rd-scrub input::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--rd-accent); }
.rd-scrub input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
.rd-scrub output { flex: none; min-width: 52px; font-size: 12px; font-weight: 700; text-align: center; color: rgba(238, 240, 247, .8); font-variant-numeric: tabular-nums; }
.rd-dim { position: fixed; inset: 0; z-index: 1050; background: #000; opacity: 0; pointer-events: none; transition: opacity .2s; }
/* toast, auto-scroll pill */
.rd-toast {
position: fixed; left: 50%; bottom: calc(var(--rd-bot-h) + 22px + env(safe-area-inset-bottom)); z-index: 1120; display: flex; align-items: center; gap: 10px;
width: max-content; max-width: calc(100% - 24px); padding: 10px 12px 10px 16px; border-radius: 16px; background: rgba(20, 22, 30, .94); color: #eef0f7;
box-shadow: 0 12px 40px rgba(0, 0, 0, .45); font-size: 13px; line-height: 1.7; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: transform .25s, opacity .25s;
}
.rd-toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.rd-toast button { flex: none; padding: 6px 12px; border: 0; border-radius: 10px; background: var(--rd-accent); color: #07080c; font: 800 12px 'Vazirmatn', sans-serif; cursor: pointer; }
.rd-toast button.x { background: transparent; color: rgba(238, 240, 247, .6); padding: 6px; }
.rd-auto {
position: fixed; left: 50%; bottom: calc(var(--rd-bot-h) + 22px + env(safe-area-inset-bottom)); z-index: 1115; display: flex; align-items: center; gap: 4px;
padding: 4px; border-radius: 999px; background: rgba(20, 22, 30, .94); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transform: translateX(-50%);
}
.rd-auto[hidden] { display: none; }
.rd-auto span { padding: 0 8px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-auto .rd-ic { width: 34px; height: 34px; border-radius: 999px; }
.rd-auto .rd-ic svg { width: 17px; height: 17px; }
html.rd-hide-ui .rd-toast, html.rd-hide-ui .rd-auto { bottom: calc(22px + env(safe-area-inset-bottom)); }
/* sheets: settings, episodes, pages, keys */
.rd-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .25s; }
.rd-backdrop.open { opacity: 1; }
.rd-backdrop[hidden], .rd-sheet[hidden] { display: none; }
.rd-sheet {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 1210; display: flex; flex-direction: column; max-height: 82vh; max-height: 82dvh;
padding-bottom: env(safe-area-inset-bottom); border-radius: 22px 22px 0 0; background: #11131a; color: #eef0f7;
box-shadow: 0 -20px 60px rgba(0, 0, 0, .5); transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.rd-sheet.open { transform: none; }
.rd-sheet-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px 8px 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.rd-sheet-head::before { content: ''; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.rd-sheet-head h2 { flex: 1; margin: 6px 0 0; font-size: 15px; font-weight: 800; color: #eef0f7; }
.rd-sheet-body { overflow: auto; overscroll-behavior: contain; padding: 12px 16px 18px; }
@media (min-width: 720px) {
.rd-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, calc(100% - 32px)); max-height: 80vh; border-radius: 22px; transform: translate(-50%, -46%) scale(.97); opacity: 0; transition: transform .22s, opacity .22s; }
.rd-sheet.open { transform: translate(-50%, -50%); opacity: 1; }
.rd-sheet.wide { width: min(860px, calc(100% - 32px)); }
.rd-sheet-head::before { display: none; }
}
.rd-set { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.rd-set:last-child { border-bottom: 0; }
.rd-set > label, .rd-set > .rd-set-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.rd-set small { display: block; font-weight: 400; font-size: 11px; color: rgba(238, 240, 247, .55); }
.rd-seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.rd-seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; color: rgba(238, 240, 247, .7); font: 700 12px 'Vazirmatn', sans-serif; cursor: pointer; }
.rd-seg button svg { width: 17px; height: 17px; }
.rd-seg button[aria-pressed="true"] { background: #eef0f7; color: #07080c; }
.rd-set input[type=range] { width: 100%; accent-color: var(--rd-accent); }
.rd-switch { position: relative; flex: none; width: 44px; height: 26px; }
.rd-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.rd-switch i { position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); transition: background .2s; pointer-events: none; }
.rd-switch i::after { content: ''; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.rd-switch input:checked + i { background: var(--rd-accent); }
.rd-switch input:checked + i::after { transform: translateX(-18px); }
.rd-switch input:focus-visible + i { outline: 2px solid var(--rd-accent); outline-offset: 2px; }
.rd-swatches button { flex: 1; }
.rd-swatches i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
html:not(.rd-paged) .rd-only-paged, html.rd-paged .rd-only-scroll { display: none; }
.rd-set-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-set-actions button, .rd-set-actions a { flex: 1 1 140px; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #eef0f7; font: 700 12px 'Vazirmatn', sans-serif; text-decoration: none; cursor: pointer; }
.rd-set-actions svg { width: 17px; height: 17px; }
@media (max-width: 639px) { .rd-wide-only { display: none; } }
.rd-eps { margin: 0; padding: 0; list-style: none; }
.rd-eps a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; color: #eef0f7; text-decoration: none; }
.rd-eps a:hover { background: rgba(255, 255, 255, .06); }
.rd-eps a[aria-current="page"] { background: rgba(43, 230, 205, .12); box-shadow: inset 0 0 0 1px rgba(43, 230, 205, .35); }
.rd-eps img, .rd-eps .ph { flex: none; width: 64px; height: 42px; border-radius: 8px; object-fit: cover; background: rgba(255, 255, 255, .06); }
.rd-eps span { flex: 1; min-width: 0; }
.rd-eps b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-eps small { font-size: 11px; color: rgba(238, 240, 247, .55); }
.rd-eps em { flex: none; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.rd-eps em.read { color: #2fcf9d; background: rgba(47, 207, 157, .12); }
.rd-eps em.going { color: #ffb020; background: rgba(255, 176, 32, .12); }
.rd-eps em.now { color: var(--rd-accent); background: rgba(43, 230, 205, .12); }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; direction: ltr; }
.rd-grid button { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .05); cursor: pointer; aspect-ratio: 2 / 3; }
.rd-grid img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rd-grid b { position: absolute; left: 6px; bottom: 6px; min-width: 24px; padding: 1px 6px; border-radius: 8px; background: rgba(0, 0, 0, .7); color: #fff; font: 700 11px 'Vazirmatn', sans-serif; }
.rd-grid button[aria-current="true"] { box-shadow: 0 0 0 3px var(--rd-accent); }
.rd-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; margin: 0; font-size: 13px; }
.rd-keys div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.rd-keys kbd { display: inline-block; min-width: 26px; padding: 2px 7px; border-radius: 7px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35); font: 700 11px ui-monospace, monospace; text-align: center; color: #fff; }
.rd-gest { margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 2; color: rgba(238, 240, 247, .8); }
html.rd-on:fullscreen .rd-top { top: 0; }
@media (prefers-reduced-motion: reduce) {
.rd-sk::before, .rd-ring.indet svg { animation: none; }
.rd-top, .rd-bottom, .rd-sheet, .rd-toast, .rd-img, .rd-progress i { transition: none; }
}