/* =====================================================================
   MR CAPTION — Aurora Studio
   Deep violet-black surfaces, glowing purple→blue accent, glass cards,
   dark + light themes, RTL/LTR aware.
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --d: 1;
  --f-ui: 'Vazirmatn', 'Inter', 'Noto Sans Syriac Eastern', 'Noto Sans Syriac', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-num: 'Inter', 'Vazirmatn', system-ui, sans-serif;
  --r-xl: 24px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --green: #22c55e;
  --red: #f43f5e;
  --maxw: 1560px;
}
html[dir="rtl"] { --d: -1; }

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #06051a;
  --tx: #f4f2ff;
  --mu: #a9a5d0;
  --s1: rgba(16, 11, 40, .78);   /* cards (glass) */
  --s2: #1b1546;                 /* raised / hover */
  --panel: #0e0a24;
  --fld: rgba(6, 4, 22, .7);     /* inputs */
  --bd: rgba(132, 108, 255, .24);
  --bd2: rgba(132, 108, 255, .45);
  --ac: #6d4aff;
  --ac2: #4a62ff;
  --acT: #b2a6ff;                /* accent used as text */
  --on-ac: #ffffff;
  --glow: rgba(109, 74, 255, .4);
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 50px rgba(0, 0, 0, .4);
  --o1: #6d28d9; --o2: #2563eb; --o3: #7c3aed; --o4: #4f46e5;
  --o-op: .5;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f1ff;
  --tx: #17133a;
  --mu: #5b5784;
  --s1: rgba(255, 255, 255, .85);
  --s2: #ece9ff;
  --panel: #ffffff;
  --fld: #f6f4ff;
  --bd: rgba(80, 60, 200, .16);
  --bd2: rgba(80, 60, 200, .34);
  --ac: #5b3df5;
  --ac2: #3b55f0;
  --acT: #4f35d8;
  --on-ac: #ffffff;
  --glow: rgba(91, 61, 245, .26);
  --shadow: 0 1px 2px rgba(40, 30, 120, .06), 0 16px 40px rgba(40, 30, 120, .1);
  --o1: #a78bfa; --o2: #93c5fd; --o3: #c4b5fd; --o4: #bfdbfe;
  --o-op: .55;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: var(--bd2) transparent; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.7;
  color: var(--tx);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
  transition: background .3s, color .3s;
}
body.menu { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--acT); outline-offset: 2px; }
::selection { background: var(--ac); color: var(--on-ac); }
.i { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- background: violet aurora ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(130px); opacity: var(--o-op); }
.aurora i:nth-child(1) { width: 56vmax; height: 40vmax; background: var(--o1); top: -18vmax; inset-inline-end: -14vmax; }
.aurora i:nth-child(2) { width: 50vmax; height: 36vmax; background: var(--o4); bottom: -16vmax; inset-inline-start: -14vmax; opacity: calc(var(--o-op) * .8); }
.aurora i:nth-child(3) { width: 34vmax; height: 26vmax; background: var(--o2); top: 34%; inset-inline-end: -12vmax; opacity: calc(var(--o-op) * .45); }
.aurora i:nth-child(4) { width: 30vmax; height: 24vmax; background: var(--o3); top: 8%; inset-inline-start: 18%; opacity: calc(var(--o-op) * .3); }

/* ---------- surfaces ---------- */
.bar, .card, .pc, .pay, .drawer {
  position: relative;
  background: var(--s1);
  border: 1px solid var(--bd);
  box-shadow: var(--shadow);
}
.card {
  border-radius: var(--r-lg);
  padding: 24px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.wrap { max-width: var(--maxw); margin: 0 auto; }
.wrap > *, .hero > * { min-width: 0; }

/* ---------- header ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  max-width: var(--maxw);
  margin: 0 auto;
  height: 80px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 0;
  border-bottom: 1px solid var(--bd);
  border-radius: 0;
  box-shadow: none;
}
.logo { display: flex; align-items: center; gap: 12px; direction: ltr; flex-shrink: 0; }
.logo-mark { width: 44px; height: 44px; filter: drop-shadow(0 6px 16px var(--glow)); }
.logo-t { font-family: var(--f-num); font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.logo-t b { margin-inline-start: .22em; font-weight: 800; background: linear-gradient(120deg, #8b6bff, #5b7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav { display: flex; align-items: center; gap: 6px; margin-inline-start: 26px; }
.nav a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 20px;
  border-radius: 99px;
  font-weight: 600; font-size: 1rem;
  color: var(--mu);
  transition: color .2s, background .2s;
}
.nav a:hover { color: var(--tx); background: color-mix(in srgb, var(--ac) 10%, transparent); }
.nav a.on { color: var(--tx); background: color-mix(in srgb, var(--ac) 16%, transparent); }
.nav a.on::after { content: ''; position: absolute; bottom: 4px; inset-inline: 24px; height: 3px; border-radius: 9px; background: linear-gradient(90deg, var(--ac), var(--ac2)); box-shadow: 0 0 12px var(--glow); }

.tools { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; min-width: 0; }
.icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.05rem;
  color: var(--mu);
  background: transparent;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: background .2s, color .2s;
}
.icon:hover:not(:disabled) { background: color-mix(in srgb, var(--ac) 14%, transparent); color: var(--tx); }
.icon:disabled { opacity: .3; }
.bell { color: var(--tx); }
.bell::after { content: ''; position: absolute; top: 9px; inset-inline-end: 11px; width: 8px; height: 8px; border-radius: 50%; background: #f472b6; box-shadow: 0 0 8px #f472b6; }

/* sun · switch · moon */
.tsw { display: flex; align-items: center; gap: 10px; padding-inline-end: 6px; }
.tsw .sun { color: #fbbf24; }
.tsw .moon { color: var(--acT); }
#theme {
  width: 52px; height: 28px;
  padding: 0; font-size: 0;
  border-radius: 99px;
  border: 0;
  background: linear-gradient(90deg, var(--ac), var(--ac2));
  box-shadow: 0 0 18px var(--glow);
  overflow: visible;
}
#theme::after { content: ''; position: absolute; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; inset-inline-end: 3px; transition: inset .3s var(--ease); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
html[data-theme="light"] #theme::after { inset-inline-end: calc(100% - 25px); }
#theme:hover:not(:disabled) { background: linear-gradient(90deg, var(--ac), var(--ac2)); }

.burger { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-content: center; gap: 5px; border: 1px solid var(--bd); transition: background .2s; }
.burger:hover { background: color-mix(in srgb, var(--ac) 14%, transparent); }
.burger i { display: block; width: 18px; height: 1.8px; border-radius: 2px; background: var(--tx); transition: transform .35s var(--ease), opacity .2s; }
body.menu .burger i:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
body.menu .burger i:nth-child(2) { opacity: 0; }
body.menu .burger i:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

.acct {
  height: 52px;
  max-width: 44vw;
  padding: 0 18px 0 8px;
  padding-inline: 8px 18px;
  border-radius: 99px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--tx);
  background: var(--s1);
  border: 1px solid var(--bd2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  transition: border-color .2s, box-shadow .2s;
}
.acct:hover { border-color: var(--acT); box-shadow: 0 0 20px var(--glow); }
.acct > span { overflow: hidden; text-overflow: ellipsis; }
.acct::after { content: '⌄'; color: var(--mu); margin-top: -6px; }
.acct-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.acct-ph { width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ac) 22%, transparent); color: var(--acT); }
#acctImg:not([hidden]) + .acct-ph { display: none; }
.acct-pro { font-style: normal; background: linear-gradient(135deg, var(--ac), var(--ac2)); color: #fff; font-size: .6rem; padding: 1px 6px; border-radius: 5px; font-weight: 800; margin-inline-start: 6px; }

/* ---------- drawer ---------- */
.veil { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s; }
body.menu .veil { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  z-index: 70;
  inset-block: 10px;
  inset-inline-start: 10px;
  width: min(340px, calc(100vw - 20px));
  border-radius: var(--r-xl);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  transform: translateX(calc(var(--d) * -112%));
  transition: transform .45s var(--ease);
  overflow: hidden;
}
body.menu .drawer { transform: none; }
.dh { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 8px; }
.dh h2 { font-size: 1.05rem; font-weight: 800; }
.db { padding: 6px 18px 20px; overflow: auto; }
details { border: 1px solid var(--bd); border-radius: var(--r-md); background: var(--fld); }
summary { list-style: none; cursor: pointer; padding: 13px 16px; font-weight: 700; font-size: .9rem; display: flex; justify-content: space-between; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '⌄'; color: var(--mu); transition: transform .3s var(--ease); }
details[open] summary::after { transform: rotate(180deg); }
.in { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 16px; }
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld > span, .grid label > span { font-size: .78rem; color: var(--mu); font-weight: 600; }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, 1.05fr);
  gap: 22px;
  align-items: stretch;
  padding-top: 30px;
}
.hero-txt { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding-block: 24px; }
.hero h1 { font-size: clamp(2rem, 2.9vw, 3.1rem); font-weight: 800; line-height: 1.22; letter-spacing: -.02em; }
.hero h1 b { display: inline-block; font-weight: 800; background: linear-gradient(110deg, #9b7bff, #5b7bff 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 30em; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.65; color: var(--mu); }
.go { display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; margin-top: 6px; }
html[dir="rtl"] .go .arr { transform: scaleX(-1); }

.hero-art { position: relative; min-height: 340px; display: grid; place-items: center; }
.hero-art > svg { width: 100%; max-width: 560px; height: auto; overflow: visible; }
.badge {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 20px;
  border-radius: 16px;
  font-weight: 700; line-height: 1.25;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 12px 30px rgba(60, 40, 200, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
  animation: float 6s ease-in-out infinite;
  direction: ltr;
}
.badge b { font-size: 1.05rem; font-family: var(--f-num); }
.badge small { font-size: .85rem; opacity: .9; font-family: var(--f-ui); }
.b1 { top: 2%; inset-inline-end: 8%; background: linear-gradient(135deg, #8b4dff, #6d3aed); transform: rotate(-4deg); }
.b2 { top: 30%; inset-inline-end: -2%; background: linear-gradient(135deg, #3b82f6, #2563eb); transform: rotate(4deg); animation-delay: -2s; }
.b3 { bottom: 8%; inset-inline-end: 12%; background: linear-gradient(135deg, #4f6bff, #3b4fe0); transform: rotate(-3deg); animation-delay: -4s; padding: 12px 22px; }
@keyframes float { 50% { translate: 0 -8px; } }

/* ---------- card header (number + title + subtitle) ---------- */
.chead { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; min-width: 0; }
.chead > div { min-width: 0; flex: 1; }
.chead h3 { font-size: 1.2rem; font-weight: 800; line-height: 1.35; }
.csub { font-size: .8rem; color: var(--mu); line-height: 1.5; }
.chead .ghost { margin-inline-start: auto; flex-shrink: 0; }
.n {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-num); font-size: 1rem; font-weight: 700; font-style: normal;
  color: #fff;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  box-shadow: 0 6px 18px var(--glow);
}
.card h4 { font-size: .78rem; font-weight: 700; margin: 20px 0 10px; color: var(--mu); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- upload stage ---------- */
.stage { display: flex; flex-direction: column; animation: up .7s var(--ease) both; background: var(--s1); }
@keyframes up { from { opacity: 0; transform: translateY(12px); } }

.drop {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  min-height: 250px;
  padding: 26px 20px 60px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1.5px dashed var(--bd2);
  background: radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--ac) 12%, transparent), transparent 70%), var(--fld);
  transition: border-color .25s, transform .35s var(--ease), box-shadow .25s;
}
.drop > *:not(.wave) { position: relative; z-index: 1; }
.drop:hover, .drop.over { border-color: var(--acT); }
.drop.over { transform: scale(.992); box-shadow: 0 0 0 4px var(--glow); }
.cloud { width: 64px; height: 64px; fill: none; stroke: url(#wvG); stroke: var(--acT); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 4px 14px var(--glow)); }
.drop b { font-size: 1.12rem; font-weight: 700; margin-top: 8px; }
.drop small { color: var(--mu); font-size: .85rem; }
.chips { display: flex; gap: 8px; margin-top: 10px; direction: ltr; }
.chips span { padding: 3px 14px; border-radius: 99px; font-family: var(--f-num); font-size: .78rem; font-weight: 600; background: color-mix(in srgb, var(--ac) 12%, transparent); border: 1px solid var(--bd2); }
.wave { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 64px; pointer-events: none; }

.player { position: relative; border-radius: var(--r-md); overflow: hidden; background: #000; line-height: 0; }
.player video { width: 100%; max-height: 340px; display: block; object-fit: contain; background: #000; }
.capw { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; overflow: hidden; line-height: 1.3; }
.capw.top { align-items: flex-start; }
.capw.mid { align-items: center; }
.capw.bot { align-items: flex-end; }
#cap { position: relative; display: none; max-width: 88%; text-align: center; padding: .06em .3em; border-radius: .3em; white-space: pre-wrap; paint-order: stroke fill; transform-origin: center; }
#cap .w { position: relative; z-index: 1; display: inline-block; }
#cap .hb { position: absolute; z-index: 0; display: none; pointer-events: none; transform-origin: center; }
.stage > .ghost { margin-top: 12px; width: 100%; }

/* ---------- buttons ---------- */
.main, .ghost, .seg button, .tabs button, .upl, .pm-btn, .guest, .gbtn, .ch, .fi { position: relative; overflow: hidden; }
.main {
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: .98rem;
  color: var(--on-ac);
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  box-shadow: 0 10px 28px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .25s var(--ease), box-shadow .25s, filter .25s;
}
.main:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 14px 34px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .28); }
.main:active { transform: scale(.985); }
.main:disabled { opacity: .5; transform: none; box-shadow: none; filter: none; }
#gen { width: 100%; margin-top: 16px; min-height: 58px; font-size: 1.05rem; }
.ghost {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: .86rem;
  background: transparent;
  border: 1px solid var(--bd2);
  transition: background .2s, border-color .2s;
}
.ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--ac) 12%, transparent); border-color: var(--acT); }
.ghost:disabled { opacity: .5; }
.ghost.sm { min-height: 38px; padding: 0 16px; font-size: .82rem; border-radius: 12px; border-color: var(--ac); }
.main .i, .ghost .i { width: 20px; height: 20px; }
.main:has(.i), .ghost.out { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.ghost.out { min-height: 52px; padding: 0 26px; font-size: .98rem; font-weight: 700; border: 1.5px solid var(--ac); color: var(--tx); }

.seg { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--fld); border: 1px solid var(--bd); }
.seg button { flex: 1; min-height: 36px; padding: 0 12px; border-radius: 9px; font-weight: 600; font-size: .83rem; color: var(--mu); white-space: nowrap; transition: color .2s, background .2s, box-shadow .2s; }
.seg button:hover { color: var(--tx); }
.seg button.on { color: var(--tx); background: color-mix(in srgb, var(--ac) 22%, var(--s2)); box-shadow: 0 0 0 1px var(--bd2); }
.seg.wide { width: 100%; }

/* language picker: three big tiles */
#vl { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; padding: 0; border: 0; background: none; }
#vl button { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 74px; padding: 8px; border-radius: 16px; background: var(--fld); border: 1px solid var(--bd2); color: var(--tx); box-shadow: none; }
#vl button b { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
#vl button small { font-size: .78rem; font-family: var(--f-num); opacity: .8; }
#vl button.on { background: linear-gradient(135deg, var(--ac), var(--ac2)); border-color: transparent; color: #fff; box-shadow: 0 10px 26px var(--glow); }

.rp { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .3); transform: scale(0); animation: rp .6s ease-out forwards; pointer-events: none; }
@keyframes rp { to { transform: scale(1); opacity: 0; } }

/* ---------- studio row ---------- */
.studio-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.55fr);
  gap: 22px;
  margin-top: 22px;
  align-items: stretch;
}
.pbar { height: 4px; margin-top: 16px; border-radius: 99px; background: var(--fld); overflow: hidden; }
.pbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ac), var(--ac2)); transition: width .3s linear; }
.pbar.ind i { width: 38%; animation: ind 1.2s ease-in-out infinite; }
@keyframes ind { 0% { transform: translateX(calc(var(--d) * -110%)); } 100% { transform: translateX(calc(var(--d) * 290%)); } }
.status { min-height: 1.6em; margin-top: 10px; font-size: .84rem; font-weight: 600; }
.note { margin-top: 8px; font-size: .78rem; color: var(--mu); line-height: 1.75; }
.note.priv { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.note.priv .i { width: 16px; height: 16px; color: var(--acT); }
.note.warn {
  color: var(--tx);
  padding: 9px 14px;
  margin: 0 0 12px;
  border-radius: 10px;
  background: color-mix(in srgb, #f59e0b 10%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
}

/* captions */
.list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; min-height: 120px; overflow: auto; padding: 2px; }
.row { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-md); background: var(--fld); border: 1px solid var(--bd); transition: border-color .2s; }
.row:focus-within { border-color: var(--acT); }
.tm { display: flex; align-items: center; gap: 6px; }
.tm input { width: 80px; padding: 6px 10px; border-radius: 8px; font-size: .8rem; font-family: var(--f-num); }
.x { margin-inline-start: auto; width: 30px; height: 30px; border-radius: 8px; font-size: 1.05rem; color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); transition: background .2s; }
.x:hover { background: color-mix(in srgb, var(--red) 22%, transparent); }
.row textarea { width: 100%; resize: vertical; min-height: 52px; padding: 9px 12px; border-radius: 10px; font-size: .94rem; line-height: 1.6; }
.empty, .fempty { padding: 22px 10px; text-align: center; color: var(--mu); font-size: .9rem; }
.list .empty { align-self: center; margin-block: auto; color: var(--tx); font-weight: 600; }
.list .empty::before {
  content: ''; display: block; width: 68px; height: 68px; margin: 0 auto 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%238b7bff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8h20l12 12v34a2 2 0 0 1-2 2H18a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z'/%3E%3Cpath d='M38 8v12h12M24 32h20M24 40h20M24 48h12'/%3E%3Cpath d='M52 6v8M48 10h8' stroke='%23c4b5fd'/%3E%3C/svg%3E") center / contain no-repeat;
}
.trans { display: flex; gap: 8px; margin-top: 14px; }
.trans select { flex: 0 0 auto; }

/* ---------- fields ---------- */
input:not([type=range]):not([type=color]):not([type=checkbox]), select, textarea {
  background: var(--fld);
  border: 1px solid var(--bd);
  border-radius: 10px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:not([type=range]):not([type=color]):focus, select:focus, textarea:focus { border-color: var(--acT); box-shadow: 0 0 0 3px var(--glow); }
select { padding: 0 12px; min-height: 44px; font-size: .88rem; font-weight: 600; width: 100%; }
.trans select { width: auto; min-width: 118px; }
input[type=search] { width: 100%; min-height: 42px; padding: 0 14px; font-size: .88rem; }
input[type=range] { width: 100%; accent-color: var(--ac); height: 26px; }
input[type=color] { width: 100%; height: 42px; padding: 3px; border-radius: 10px; border: 1px solid var(--bd); background: var(--fld); cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 7px; }
input[type=color]::-moz-color-swatch { border: 0; border-radius: 7px; }

/* ---------- step 3: style studio ---------- */
.tabs { display: flex; gap: 3px; padding: 4px; margin-bottom: 18px; border-radius: 14px; background: var(--fld); border: 1px solid var(--bd); overflow-x: auto; }
.tabs button { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: .86rem; color: var(--mu); white-space: nowrap; transition: color .2s, background .2s; }
.tabs button i { font-style: normal; font-family: var(--f-num); font-weight: 700; font-size: .8rem; }
.tabs button:hover { color: var(--tx); }
.tabs button.on { color: #fff; background: linear-gradient(135deg, var(--ac), var(--ac2)); box-shadow: 0 6px 18px var(--glow); }
.sbody { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 20px; align-items: start; }
.panes { min-width: 0; max-height: 360px; overflow: auto; padding: 2px; }
.pane { display: none; }
.pane.on { display: block; animation: pane .35s var(--ease); }
@keyframes pane { from { opacity: 0; transform: translateY(6px); } }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid label, .grid .fld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.grid .full { grid-column: 1 / -1; }
.grid label > span { display: flex; justify-content: space-between; align-items: center; }
/* slider rows: label (+ value pill) on one side, control on the other */
.grid label.full { flex-direction: row; align-items: center; gap: 16px; }
.grid label.full > span { flex: 0 0 150px; font-size: .86rem; color: var(--tx); gap: 8px; }
.grid label.full > input, .grid label.full > select { flex: 1; min-width: 0; }
.grid label:not(.full) { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.grid label:not(.full) > span { font-size: .86rem; color: var(--tx); }
.grid label:not(.full) > input[type=range] { flex: 0 0 55%; }
.grid label:not(.full) > select { flex: 0 0 55%; width: auto; }
.grid input[type=color] { width: 36px; height: 36px; padding: 2px; border-radius: 50%; border: 2px solid var(--bd2); }
.grid input[type=color]::-webkit-color-swatch { border-radius: 50%; }
.grid input[type=color]::-moz-color-swatch { border-radius: 50%; }
.grid em { font-style: normal; font-family: var(--f-num); font-size: .78rem; color: var(--tx); font-weight: 600; padding: 2px 10px; border-radius: 9px; background: var(--fld); border: 1px solid var(--bd); }

.sprev { position: relative; height: 156px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--bd2); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.sprev svg { width: 100%; height: 100%; display: block; }
.sprev-t { position: absolute; bottom: 14px; inset-inline: 0; margin-inline: auto; width: max-content; direction: ltr; padding: 3px 16px; border-radius: 10px; font-family: var(--f-num); font-weight: 800; font-size: 1.05rem; color: #fff; background: rgba(8, 6, 24, .62); }
.sprev-t b { margin-inline-start: .3em; background: linear-gradient(120deg, #a78bfa, #7c8cff); -webkit-background-clip: text; background-clip: text; color: transparent; }

#pf .seg { margin-bottom: 10px; }
#ftabs button { padding: 0 6px; font-size: .8rem; }
.flist { display: grid; gap: 6px; max-height: 220px; overflow: auto; margin: 10px 0; padding: 2px; }
.fi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 14px; border-radius: 12px; text-align: start; background: var(--fld); border: 1px solid var(--bd); transition: border-color .2s, background .2s; }
.fi:hover { border-color: var(--bd2); }
.fi small { direction: ltr; font-family: var(--f-num); font-size: .66rem; color: var(--mu); }
.fi span { font-size: 1.25rem; line-height: 1.5; }
.fi.on { border-color: var(--acT); background: color-mix(in srgb, var(--ac) 14%, var(--fld)); }
.upl { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--r-md); border: 1.5px dashed var(--bd2); font-weight: 600; font-size: .84rem; color: var(--mu); cursor: pointer; transition: color .2s, border-color .2s; }
.upl:hover { color: var(--tx); border-color: var(--acT); }

.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 2px; }
.ch { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; border-radius: 12px; font-size: .76rem; font-weight: 600; text-align: start; direction: ltr; background: var(--fld); border: 1px solid var(--bd); transition: border-color .2s, background .2s; }
.ch b { min-width: 22px; height: 22px; padding: 0 4px; display: grid; place-items: center; border-radius: 6px; font-family: var(--f-num); font-size: .6rem; background: var(--s2); color: var(--mu); }
.ch:hover { border-color: var(--bd2); }
.ch.on { border-color: var(--acT); background: color-mix(in srgb, var(--ac) 14%, var(--fld)); }
.ch.on b { background: var(--ac); color: #fff; }
.ch .pv { display: grid; place-items: center; height: 58px; overflow: hidden; border-radius: 8px; background: #0b0a1c; border: 1px solid var(--bd); }
.ch .pv i { font-style: normal; font-weight: 900; font-size: 17px; line-height: 1.3; color: #fff; white-space: nowrap; font-family: var(--f-ui); -webkit-text-stroke: 3px #000; paint-order: stroke fill; transform-origin: center; }
.ch .cl { display: flex; align-items: center; gap: 8px; }

/* ---------- bottom bar ---------- */
.bottombar { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 22px; padding: 20px 28px; }
.feat { display: flex; align-items: center; gap: 14px; }
.feat + .feat { padding-inline-start: 26px; border-inline-start: 1px solid var(--bd); }
.fi-ic { width: 40px; height: 40px; color: var(--acT); filter: drop-shadow(0 4px 12px var(--glow)); }
.feat b { display: block; font-size: .95rem; line-height: 1.4; }
.feat small { display: block; font-size: .82rem; color: var(--mu); line-height: 1.4; }
.bb-actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 14px; }
.bb-note { flex-basis: 100%; margin: -6px 0 0; text-align: center; }

/* ---------- pricing ---------- */
.plans { max-width: var(--maxw); margin: 80px auto 0; padding: 0 0 70px; text-align: center; }
.p-badge { display: inline-block; padding: 5px 16px; border-radius: 99px; font-size: .78rem; font-weight: 700; color: var(--acT); background: color-mix(in srgb, var(--ac) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 32%, transparent); margin-bottom: 14px; }
.plans h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.35; margin-bottom: 8px; letter-spacing: -.01em; }
.sub { color: var(--mu); font-size: .9rem; line-height: 1.75; }
.p-controls { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin: 26px 0 34px; }
.p-toggle { min-width: 250px; }
.c-toggle { min-width: 150px; direction: ltr; }
.save-pill { font-style: normal; font-size: .64rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--green); color: #04210f; margin-inline-start: 4px; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.pc { display: flex; flex-direction: column; text-align: start; padding: 28px 26px 26px; border-radius: var(--r-xl); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: transform .35s var(--ease), border-color .25s, box-shadow .25s; }
.pc:hover { transform: translateY(-4px); border-color: var(--bd2); }
.pc.hot { border-color: var(--acT); background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 16%, var(--s1)), var(--s1) 60%); box-shadow: 0 0 0 1px var(--ac), 0 24px 60px var(--glow); }
.hot-ribbon { position: absolute; top: -13px; inset-inline-end: 24px; z-index: 2; padding: 3px 14px; border-radius: 99px; font-size: .72rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--ac), var(--ac2)); box-shadow: 0 6px 16px var(--glow); }
.pc .nm { font-weight: 800; font-size: 1.1rem; }
.pc .pdesc { margin-top: 4px; font-size: .82rem; color: var(--mu); min-height: 2.8em; }
.pr-box { margin: 18px 0 16px; padding: 0; text-align: start; background: none; border: 0; }
.pc .pr { direction: ltr; text-align: start; font-family: var(--f-num); font-size: 2.1rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.2; }
.pc .pr small { margin-inline-start: 6px; font-size: .78rem; font-weight: 500; letter-spacing: 0; color: var(--mu); font-family: var(--f-ui); }
.pc .sub-pr { margin-top: 4px; font-size: .78rem; font-weight: 600; color: var(--mu); }
.p-feats { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 6px 0 26px; padding: 18px 0 0; border-top: 1px solid var(--bd); flex: 1; }
.p-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: .86rem; line-height: 1.55; }
.p-feats li i { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: .62rem; font-weight: 800; color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); }
.pc .buy-btn { margin-top: auto; width: 100%; position: relative; z-index: 1; }
.pc:not(.hot) .buy-btn { color: var(--tx); background: transparent; border: 1px solid var(--bd2); box-shadow: none; }
.pc:not(.hot) .buy-btn:hover { background: color-mix(in srgb, var(--ac) 12%, transparent); border-color: var(--acT); filter: none; }
.rate { margin-top: 18px; font-size: .76rem; color: var(--mu); }
.pay { margin-top: 28px; padding: 22px; border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pay > b { font-size: .84rem; color: var(--mu); font-weight: 600; }
.pm { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; position: relative; z-index: 1; }
.pm span { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 12px; background: var(--fld); border: 1px solid var(--bd); font-weight: 600; font-size: .83rem; direction: ltr; }
.pm svg { width: 30px; height: 30px; flex-shrink: 0; }

/* ---------- footer ---------- */
.foot { max-width: var(--maxw); margin: 0 auto; padding: 26px 6px 34px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; color: var(--mu); font-size: .92rem; }
.social { display: flex; gap: 12px; }
.social a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--tx); background: var(--s1); border: 1px solid var(--bd2); transition: border-color .2s, box-shadow .2s, transform .25s var(--ease); }
.social a:hover { border-color: var(--acT); box-shadow: 0 0 18px var(--glow); transform: translateY(-2px); }
.social svg { width: 20px; height: 20px; }
.tag { display: inline-flex; align-items: center; gap: 8px; font-style: italic; font-weight: 600; background: linear-gradient(110deg, #9b7bff, #5b7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag .i { color: #a78bfa; fill: #a78bfa; stroke: none; width: 18px; height: 18px; }

/* ---------- modals ---------- */
.welcome {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: radial-gradient(50vmax 36vmax at 50% 0%, color-mix(in srgb, var(--ac) 28%, transparent), transparent 70%), rgba(4, 3, 14, .8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: wf .3s var(--ease);
}
@keyframes wf { from { opacity: 0; } }
.wbox {
  position: relative;
  width: min(100%, 420px);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 24px 24px;
  border-radius: var(--r-xl);
  background: var(--panel);
  border: 1px solid var(--bd2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 60px var(--glow);
  animation: up .45s var(--ease) both;
}
.cbox { width: min(100%, 460px); }
.wclose { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 5; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: .8rem; color: var(--mu); border: 1px solid var(--bd); transition: color .2s, background .2s; }
.wclose:hover { color: var(--tx); background: var(--s2); }
.wlogo { direction: ltr; text-align: center; font-family: var(--f-num); font-weight: 800; font-size: .95rem; letter-spacing: .14em; }
.wlogo b { margin-inline-start: .45em; font-weight: 800; background: linear-gradient(120deg, #8b6bff, #5b7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wbox h1, .m-title { text-align: center; font-size: 1.4rem; font-weight: 800; line-height: 1.4; }
.wbox .sub { text-align: center; font-size: .84rem; }
.w-inp { width: 100%; min-height: 46px; padding: 0 14px; font-size: 16px; }
.or { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--mu); font-size: .76rem; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--bd); }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: var(--r-md); font-weight: 600; font-size: .9rem; color: #1f1f1f; background: #fff; border: 1px solid rgba(0, 0, 0, .1); transition: transform .25s var(--ease), box-shadow .25s; }
.gbtn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.gbtn svg { width: 20px; height: 20px; flex-shrink: 0; }
.guest { min-height: 42px; border-radius: var(--r-md); color: var(--mu); font-weight: 600; font-size: .84rem; transition: color .2s, background .2s; }
.guest:hover { color: var(--tx); background: var(--s2); }
.err { min-height: 1.2em; text-align: center; font-size: .78rem; color: var(--red); }
.g-header { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 4px; }

.chk-body { display: flex; flex-direction: column; gap: 12px; }
.c-head { text-align: center; }
.c-tag { font-size: .74rem; font-weight: 700; color: var(--acT); text-transform: uppercase; letter-spacing: .06em; }
.c-summary { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-md); background: var(--fld); border: 1px solid var(--bd); }
.c-row { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; color: var(--mu); }
.c-row b { direction: ltr; color: var(--tx); }
.c-row.total { margin-top: 3px; padding-top: 10px; border-top: 1px solid var(--bd); font-size: .98rem; font-weight: 800; color: var(--tx); }
.c-row.total b { font-family: var(--f-num); color: var(--acT); }
.c-green { color: var(--green) !important; }
.promo-box { display: flex; gap: 8px; align-items: stretch; }
.promo-box .w-inp { flex: 1; min-height: 40px; }
.promo-msg { min-height: 1.1em; margin-top: -6px; font-size: .75rem; color: var(--green); }
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-btn { display: flex; flex-direction: column; align-items: flex-start; direction: ltr; padding: 11px 13px; border-radius: 12px; text-align: start; background: var(--fld); border: 1px solid var(--bd); transition: border-color .2s, background .2s; }
.pm-btn b { font-size: .86rem; }
.pm-btn span { font-size: .68rem; color: var(--mu); }
.pm-btn.on { border-color: var(--acT); background: color-mix(in srgb, var(--ac) 14%, var(--fld)); box-shadow: 0 0 0 3px var(--glow); }
.pay-fields { display: flex; flex-direction: column; gap: 8px; }
.pay-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.c-secure { text-align: center; font-size: .72rem; color: var(--mu); }
.c-success { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0; text-align: center; }
.succ-ico { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; font-size: 1.6rem; font-weight: 800; color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); border: 1.5px solid var(--green); }
.receipt { width: 100%; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: 12px; font-size: .8rem; text-align: start; direction: ltr; background: var(--fld); border: 1px dashed var(--bd2); }

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
  .studio-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .studio { grid-column: 1 / -1; }
  .nav a { padding: 0 14px; }
  .bell, #undo, #redo { display: none; }
}
@media (max-width: 1099px) {
  /* hero children join the page flow so the player can stay pinned */
  .wrap { display: flex; flex-direction: column; }
  .hero { display: contents; }
  .hero-txt { order: 1; align-items: center; text-align: center; padding-top: 24px; }
  .hero-art { order: 2; min-height: 300px; }
  .stage { order: 3; margin-top: 8px; }
  .studio-row { order: 4; }
  .bottombar { order: 5; }
  .plans { order: 6; }
  .stage.has { position: sticky; top: 84px; z-index: 30; padding: 10px; background: var(--panel); }
  .stage.has .chead { display: none; }
  .stage.has .player video { max-height: 30svh; }
  .nav { display: none; }
  .pgrid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .plans { margin-top: 56px; }
  .feat + .feat { padding-inline-start: 0; border: 0; }
  .bb-actions { margin-inline-start: 0; width: 100%; }
  .bb-actions > * { flex: 1; }
}
@media (max-width: 767px) {
  .studio-row { grid-template-columns: minmax(0, 1fr); }
  .sbody { grid-template-columns: minmax(0, 1fr); }
  .sprev { order: -1; height: 130px; }
  .grid label.full > span { flex-basis: 110px; }
  .bottombar { gap: 18px; padding: 18px; }
  .logo-t { font-size: 1.35rem; }
  .logo-mark { width: 36px; height: 36px; }
}
@media (max-width: 560px) {
  .card { padding: 18px; border-radius: 18px; }
  .bar { height: 68px; gap: 10px; }
  .acct { max-width: 40vw; padding-inline: 6px 12px; height: 46px; }
  .tsw .sun, .tsw .moon { display: none; }
  .hero h1 { font-size: 2rem; }
  .grid { gap: 12px; }
  .p-controls { flex-direction: column; }
  .p-toggle, .c-toggle { width: 100%; max-width: 340px; }
  .foot { justify-content: center; text-align: center; }
  #vl button b { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* language controls (7 languages) */
#langs { flex-wrap: wrap; }
#langs button { flex: 1 1 auto; }
#ftabs { flex-wrap: wrap; }
:lang(syr), [lang="aii"], [lang="cld"] { font-family: 'Noto Sans Syriac Eastern','Noto Sans Syriac','Vazirmatn',sans-serif; }
#langs button[lang="syr"], #vl button b { line-height: 1.5; }

/* word-motion tab */
.tabs button.hot:not(.on) { color: var(--acT); }
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; padding: 2px; margin-bottom: 14px; }
.hc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 12px; font-size: .76rem; font-weight: 600; background: var(--fld); border: 1px solid var(--bd); color: var(--tx); transition: border-color .2s, background .2s; }
.hc:hover { border-color: var(--bd2); }
.hc.on { border-color: var(--acT); background: color-mix(in srgb, var(--ac) 14%, var(--fld)); }
.hc .pv { display: grid; place-items: center; height: 58px; overflow: hidden; border-radius: 8px; background: #0b0a1c; border: 1px solid var(--bd); }
.hc .hp { position: relative; display: inline-block; white-space: nowrap; font-size: 17px; font-weight: 900; line-height: 1.5; color: #fff; font-family: 'Vazirmatn','Inter',sans-serif; -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.hc .hp .w { position: relative; z-index: 1; display: inline-block; }
.hc .hp .hb { position: absolute; z-index: 0; display: none; pointer-events: none; }
.hc .cl { display: flex; align-items: center; gap: 8px; }
.hc .cl b { min-width: 22px; height: 22px; padding: 0 4px; display: grid; place-items: center; border-radius: 6px; font-family: var(--f-num); font-size: .6rem; background: var(--s2); color: var(--mu); }
.hc.on .cl b { background: var(--ac); color: #fff; }
.hc .cl em { font-style: normal; text-align: start; }
.hcol { margin-top: 4px; }

#cap .em, .hc .hp .em { position: absolute; z-index: 2; display: none; pointer-events: none; font-weight: 400; line-height: 1; -webkit-text-stroke: 0; font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }
.aiem { width: 100%; margin-top: 12px; }