/* AVISION — paper outside, booth inside. */
:root {
  --paper: #FFFFFF;
  --paper-2: #F4F4F4;
  --paper-3: #EAEAEA;
  --ink: #111111;
  --ink-2: #444444;
  --ink-3: #767676;
  --rule: #E6E6E6;
  --sh-1: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.035);
  --sh-2: 0 12px 32px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --red: #CE0000;
  --red-ink: #A80000;
  --red-wash: #FCEDED;
  --ok: #1D7A46;
  --ok-wash: #E8F4EC;
  --warn: #8A5A00;
  --warn-wash: #FBF2DE;

  --booth: #1B1C20;
  --booth-2: #24262B;
  --booth-3: #30333A;
  --booth-ink: #F2F1EE;
  --booth-ink-2: #A9ABB2;
  --booth-red: #FF4A4A;

  --f-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-display: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-latin: "Jost", "IBM Plex Sans Arabic", sans-serif;

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.latin { font-family: var(--f-latin); direction: ltr; unicode-bidi: isolate; }

.boot { min-height: 100vh; display: grid; place-items: center; }
.boot img { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .boot img { animation: none; } }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.top .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.brand b { font-family: var(--f-latin); font-weight: 500; letter-spacing: .32em; font-size: 17px; }
.nav { display: flex; gap: 4px; margin-inline-start: auto; align-items: center; }
.nav a { text-decoration: none; padding: 6px 10px; border-radius: var(--r-s); color: var(--ink-2); font-size: 15px; white-space: nowrap; }
.brand b { white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--paper-2); }
.nav a.on { color: var(--ink); font-weight: 600; }
.menu-btn { display: none; margin-inline-start: auto; background: none; border: 1px solid var(--rule); border-radius: var(--r-s); padding: 6px 10px; }
@media (max-width: 1100px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; inset-inline: 0; top: 64px; max-height: calc(100dvh - 64px); overflow: auto; background: var(--paper); border-bottom: 1px solid var(--rule); flex-direction: column; align-items: stretch; padding: 8px var(--gutter) 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px; font-size: 17px; }
}

/* ---------- Buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: var(--r-s);
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: #000; }
.btn.red { background: var(--red); border-color: var(--red); }
.btn.red:hover { background: var(--red-ink); border-color: var(--red-ink); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--red-ink); text-decoration: underline; cursor: pointer; }

label.f { display: block; margin-bottom: 16px; }
label.f > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
label.f small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.in, select.in, textarea.in {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--rule);
  border-radius: var(--r-s); background: #fff; font-size: 16px;
}
textarea.in { min-height: 140px; line-height: 1.8; resize: vertical; }
.in:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,20,20,.08); }
.check { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--red); }

.note { padding: 12px 16px; border-radius: var(--r-s); font-size: 15px; margin: 0 0 16px; }
.note.err { background: var(--red-wash); color: var(--red-ink); }
.note.ok { background: var(--ok-wash); color: var(--ok); }
.note.warn { background: var(--warn-wash); color: var(--warn); }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.3; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(32px, 5vw, 48px); }
h2 { font-size: clamp(24px, 3.2vw, 32px); }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.page { padding-top: 48px; padding-bottom: 96px; }
.page-head { margin-bottom: 32px; }
.page-head p { color: var(--ink-2); max-width: 60ch; }

/* ---------- Performance marks (exercises & scripts) ---------- */
.mk-pause, .mk-long { color: var(--red); font-family: var(--f-latin); font-weight: 400; padding: 0 .12em; }
.mk-long { letter-spacing: -.08em; }
.mk-stress { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: .08em; text-underline-offset: .28em; }
.mk-breath { color: var(--red); font-size: .7em; vertical-align: .3em; }
.mk-up, .mk-down { color: var(--red); font-size: .62em; vertical-align: .45em; font-family: var(--f-latin); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-2); font-size: 14px; margin: 0 0 24px; }
.legend span b { color: var(--red); font-family: var(--f-latin); font-weight: 500; margin-inline-end: 6px; }

/* ---------- Hero ---------- */
.hero { background: #000; color: #fff; position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; padding-top: clamp(72px, 14vw, 160px); padding-bottom: clamp(72px, 12vw, 140px); }
.hero .mark-bg { position: absolute; z-index: 0; inset-inline-end: -4%; top: 50%; transform: translateY(-50%); width: min(46vw, 560px); opacity: .9; pointer-events: none; }
.hero .kicker { font-family: var(--f-latin); letter-spacing: .42em; font-size: 14px; color: rgba(255,255,255,.6); margin: 0 0 28px; direction: ltr; text-align: right; }
.hero h1 { font-size: clamp(40px, 7.4vw, 88px); line-height: 1.18; font-weight: 700; margin: 0 0 28px; max-width: 11ch; }
.hero .lede { max-width: 46ch; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.9; color: rgba(255,255,255,.72); margin-bottom: 40px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btn.ghost { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; }
.hero .btn.ghost:hover { border-color: #fff; }
@media (max-width: 900px) { .hero .mark-bg { width: 110vw; inset-inline-end: -50vw; opacity: .25; } }

/* ---------- Sections ---------- */
.sec { padding: clamp(64px, 9vw, 112px) 0; }
.sec.alt { background: var(--paper-2); }
.sec-title { margin-bottom: 40px; max-width: 60ch; }
.sec-title h2 { margin: 0 0 10px; font-size: clamp(28px, 3.6vw, 40px); }
.sec-title p { color: var(--ink-2); margin: 0; font-size: 18px; }

.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.tracks li { background: #fff; border-radius: 16px; padding: 36px 32px; display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.tracks li.open { background: #000; color: #fff; }
.tracks li.open p { color: rgba(255,255,255,.7); }
.tracks h3 { margin: 0; font-size: 26px; }
.tracks p { margin: 0; color: var(--ink-2); flex: 1; }
.tracks .state { font-size: 14px; font-weight: 600; }
.tracks li.open .state { color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.tracks li.open .state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.tracks .state.soon { color: var(--ink-3); }

.trainer { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.trainer .photo { aspect-ratio: 4/5; background: #000; border-radius: 16px; overflow: hidden; display: grid; place-items: center; }
.trainer .photo img { width: 100%; height: 100%; object-fit: cover; }
.trainer .photo .ph { width: 38%; height: auto; object-fit: contain; }
.trainer h2 { margin-bottom: .2em; font-size: clamp(30px, 4vw, 44px); }
.trainer .role { color: var(--red); font-weight: 600; margin-bottom: 20px; }
.trainer .bio { color: var(--ink-2); max-width: 54ch; font-size: 18px; line-height: 1.95; }
.facts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 40px; }
.facts li b { display: block; font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.facts li span { color: var(--ink-3); font-size: 14px; }
@media (max-width: 760px) { .trainer { grid-template-columns: 1fr; } .trainer .photo { max-width: 320px; } .facts { grid-template-columns: repeat(2, auto); } }

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.feature .visual { background: #000; border-radius: 16px; aspect-ratio: 4/3; display: grid; place-items: center; padding: 32px; color: #fff; }
.feature .visual .wave { display: flex; align-items: center; gap: 5px; height: 40%; width: 80%; justify-content: center; }
.feature .visual .wave i { display: block; width: 4px; border-radius: 2px; background: rgba(255,255,255,.85); }
.feature .visual .wave i.r { background: var(--red); }
.feature ul { list-style: none; padding: 0; margin: 24px 0 32px; }
.feature li { padding: 10px 0; display: flex; gap: 12px; align-items: baseline; color: var(--ink-2); }
.feature li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--red); transform: translateY(-3px); }
@media (max-width: 800px) { .feature { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; gap: 32px; } }

.cta-band { background: #000; color: #fff; text-align: center; }
.cta-band h2 { font-size: clamp(28px, 4vw, 44px); }
.cta-band p { color: rgba(255,255,255,.7); max-width: 44ch; margin: 0 auto 32px; }

.foot { padding: 40px 0 48px; color: rgba(255,255,255,.55); font-size: 14px; background: #000; }
.foot a { color: rgba(255,255,255,.8); text-decoration: none; }
.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot .brand b { color: #fff; }

/* ---------- Lists (scripts, media, admin rows) ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.toolbar .in { max-width: 320px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--rule); background: #fff; border-radius: 999px; padding: 4px 14px; font-size: 14px; cursor: pointer; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rows > li { border-bottom: 1px solid var(--rule); }
.rows a.row, .rows .row { display: flex; gap: 16px; align-items: center; padding: 16px 4px; text-decoration: none; }
.rows a.row:hover { background: var(--paper-2); }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-weight: 600; display: block; }
.row .s { color: var(--ink-3); font-size: 14px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.tag.red { background: var(--red-wash); color: var(--red-ink); }
.tag.ok { background: var(--ok-wash); color: var(--ok); }
.tag.warn { background: var(--warn-wash); color: var(--warn); }

.empty { padding: 40px 0; color: var(--ink-2); }

/* ---------- Script reader ---------- */
.reader-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 16px 0 24px; }
.script-body { font-size: var(--reader-size, 24px); line-height: 2.1; white-space: pre-wrap; max-width: 34em; font-family: var(--f-body); }
.script-notes { margin-top: 32px; padding: 16px 20px; background: var(--paper-2); border-radius: var(--r-m); color: var(--ink-2); font-size: 15px; }
@media print {
  .top, .foot, .reader-tools, .no-print { display: none !important; }
  .script-body { font-size: 18pt; }
}

/* ---------- Auth ---------- */
.auth { max-width: 440px; margin: 0 auto; padding: 56px var(--gutter) 96px; }
.auth h1 { font-size: 32px; }
.auth .switch { margin-top: 20px; color: var(--ink-2); font-size: 15px; }

/* ---------- Members grid ---------- */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.mcard { text-decoration: none; display: block; }
.mcard .thumb { aspect-ratio: 16/9; background: var(--booth); border-radius: var(--r-m); overflow: hidden; position: relative; display: grid; place-items: center; }
.mcard .thumb img { width: 100%; height: 100%; object-fit: cover; }
.mcard .thumb .play { width: 44px; opacity: .9; }
.mcard .t { font-weight: 600; margin-top: 10px; display: block; }
.mcard .s { color: var(--ink-3); font-size: 14px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 28px; overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font-weight: 600; color: var(--ink-3); cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--red); }

/* ---------- Studio (the booth) ---------- */
.booth { background: var(--booth); color: var(--booth-ink); min-height: calc(100vh - 64px); }
.booth a { color: var(--booth-ink); }
.booth .wrap { padding-top: 24px; padding-bottom: 64px; }
.booth h1 { font-size: clamp(22px, 3vw, 30px); margin: 0; }
.booth .muted { color: var(--booth-ink-2); }
.booth-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 24px; }
@media (max-width: 900px) { .stage { grid-template-columns: 1fr; } }
.screen { position: relative; background: #000; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 16/9; }
.screen video { width: 100%; height: 100%; object-fit: contain; }
.screen .sub { position: absolute; inset-inline: 0; bottom: 0; padding: 14px 18px; background: linear-gradient(transparent, rgba(0,0,0,.8)); font-size: clamp(16px, 2.2vw, 22px); font-weight: 600; text-align: center; }
.tally { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--red); color: #fff; font-family: var(--f-latin); font-size: 12px; letter-spacing: .14em; padding: 4px 10px; border-radius: 4px; display: none; }
.tally.on { display: block; animation: pulse 1s ease-in-out infinite; }
.transport { display: flex; align-items: center; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.tbtn { min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: var(--r-s); border: 1px solid var(--booth-3); background: var(--booth-2); color: var(--booth-ink); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.tbtn:hover { border-color: var(--booth-ink-2); }
.tbtn.rec { background: var(--red); border-color: var(--red); color: #fff; }
.tbtn.rec.live { background: #fff; color: var(--red); }
.tbtn[disabled] { opacity: .4; cursor: not-allowed; }
.tbtn.ico { padding: 0; width: 44px; justify-content: center; font-size: 18px; }
.time { font-family: var(--f-latin); font-variant-numeric: tabular-nums; color: var(--booth-ink-2); direction: ltr; }
.seek { width: 100%; accent-color: var(--booth-red); }
.toggle { display: inline-flex; border: 1px solid var(--booth-3); border-radius: var(--r-s); overflow: hidden; }
.toggle button { background: transparent; border: 0; color: var(--booth-ink-2); padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 14px; }
.toggle button.on { background: var(--booth-ink); color: var(--booth); }
.panel { background: var(--booth-2); border-radius: var(--r-m); padding: 16px; }
.panel h3 { font-size: 16px; margin-bottom: 10px; font-family: var(--f-body); }
.cues { list-style: none; margin: 0; padding: 0; max-height: 56vh; overflow-y: auto; }
.cue { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px; border-radius: var(--r-s); cursor: pointer; border: 1px solid transparent; }
.cue:hover { background: var(--booth-3); }
.cue.now { border-color: var(--booth-ink-2); }
.cue.sel { background: var(--booth-3); border-color: var(--booth-red); }
.cue .n { font-family: var(--f-latin); color: var(--booth-ink-2); font-size: 13px; min-width: 1.6em; }
.cue .tx { font-size: 17px; line-height: 1.7; }
.cue .st { font-size: 12px; color: var(--booth-ink-2); white-space: nowrap; }
.cue .st.has { color: #7BD89A; }
.meter { height: 6px; background: var(--booth-3); border-radius: 3px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: #7BD89A; transition: width .05s linear; }
.meter i.hot { background: var(--booth-red); }
.row-ctl { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 14px; color: var(--booth-ink-2); }
.row-ctl input[type=range] { flex: 1; accent-color: var(--booth-ink); }
.booth .note.err { background: rgba(255,74,74,.12); color: #FFB3B3; }
.booth .note.ok { background: rgba(123,216,154,.12); color: #A6E9BC; }
.booth .note.warn { background: rgba(255,200,90,.1); color: #F2D28A; }
.booth .in { background: var(--booth); border-color: var(--booth-3); color: var(--booth-ink); }
.booth .btn.ghost { color: var(--booth-ink); border-color: var(--booth-3); }
.script-full { white-space: pre-wrap; font-size: 18px; line-height: 2; }
.count { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-latin); font-size: 96px; color: #fff; background: rgba(0,0,0,.35); }

/* ---------- Exercises ---------- */
.ex-body { font-size: var(--reader-size, 26px); line-height: 2.3; max-width: 32em; white-space: pre-wrap; }

/* ---------- Admin ---------- */
.admin-grid { display: grid; grid-template-columns: 200px 1fr; gap: 32px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 80px; align-self: start; }
.admin-nav button { text-align: start; background: none; border: 0; padding: 10px 12px; border-radius: var(--r-s); cursor: pointer; color: var(--ink-2); font-weight: 600; display: flex; justify-content: space-between; }
.admin-nav button.on { background: var(--paper-2); color: var(--ink); }
.admin-nav .badge { background: var(--red); color: #fff; border-radius: 999px; font-size: 12px; padding: 0 8px; }
@media (max-width: 800px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin-nav { flex-direction: row; overflow-x: auto; position: static; border-bottom: 1px solid var(--rule); }
  .admin-nav button { white-space: nowrap; }
}
.box { border: 1px solid var(--rule); border-radius: var(--r-m); padding: 20px; margin-bottom: 20px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .grid2 { grid-template-columns: 1fr; } }
.code { font-family: var(--f-latin); font-size: 20px; letter-spacing: .12em; font-weight: 600; direction: ltr; }
.file-slot { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px dashed var(--rule); border-radius: var(--r-s); margin-bottom: 10px; }
.file-slot .grow { flex: 1; min-width: 0; }
.progress { height: 4px; background: var(--paper-2); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.progress i { display: block; height: 100%; background: var(--red); width: 0; }
.cue-edit { display: grid; grid-template-columns: 76px 76px 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.cue-edit .in { min-height: 40px; padding: 6px 10px; }
.cue-edit .in.t { font-family: var(--f-latin); direction: ltr; text-align: center; }
@media (max-width: 600px) { .cue-edit { grid-template-columns: 64px 64px 1fr; } .cue-edit .x { grid-column: 3; justify-self: end; } }
table.t { width: 100%; border-collapse: collapse; font-size: 15px; }
table.t th { text-align: start; font-size: 13px; color: var(--ink-3); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--rule); }
table.t td { padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.scroll-x { overflow-x: auto; }
.toast { position: fixed; bottom: 20px; inset-inline-start: 50%; transform: translateX(50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--r-s); z-index: 50; font-size: 15px; }

@media (max-width: 600px) {
  .rows .row { flex-wrap: wrap; }
  .rows .row .grow { flex-basis: 100%; }
  .code { font-size: 18px; }
}

/* segmented toggles (language / tashkeel) */
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 3px; background: #fff; }
.seg button { border: 0; background: transparent; padding: 6px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; min-height: 34px; }
.seg button.on { background: var(--ink); color: #fff; }
.script-body.en { font-family: "Jost", var(--f-body); text-align: left; line-height: 1.65; max-width: 36em; }

/* practice recorder */
.rec-box { margin-top: 40px; border-radius: 16px; background: var(--paper-2); padding: 24px; }
.rec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.rec-head b { font-size: 18px; }
.rec-live { display: inline-flex; align-items: center; gap: 8px; color: var(--red-ink); font-weight: 600; font-size: 14px; }
.rec-live i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: pulse 1s ease-in-out infinite; }
.rec-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rec-result { margin-top: 16px; }
.rec-result audio { width: 100%; }
.meter.light { background: #fff; margin-bottom: 14px; height: 6px; border-radius: 3px; overflow: hidden; }
.meter.light i { display: block; height: 100%; background: var(--ok); }
.meter.light i.hot { background: var(--red); }

/* exercises */
.ex-instr { color: var(--ink-2); font-size: 18px; max-width: 60ch; }
.ex-lines > div { margin-bottom: .2em; }
.lesson { font-size: 18px; line-height: 1.95; max-width: 62ch; }
.lesson h3 { font-size: 22px; margin: 36px 0 8px; }
.lesson p { margin: 0 0 12px; }
.lesson ul { margin: 0 0 16px; padding-inline-start: 22px; }
.lesson li { margin-bottom: 6px; }
.lesson b { color: var(--ink); }
.tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 24px; line-height: 2.2; padding: 20px; border-radius: 16px; background: var(--paper-2); }
.tok { padding: 0 2px; }
.tok.tap { background: transparent; border: 0; border-radius: 6px; padding: 0 6px; cursor: pointer; font-size: inherit; line-height: inherit; }
.tok.tap:hover { background: #fff; }
.tok.tap.on { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 8px; color: var(--ink); font-weight: 700; }
.gap { min-width: 18px; height: 36px; border: 0; background: transparent; cursor: pointer; color: var(--red); font-family: var(--f-latin); font-size: 22px; border-radius: 6px; padding: 0 3px; }
.gap:hover { background: #fff; }
.gap.g0:hover::after { content: "·"; color: var(--ink-3); }
.ex-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.answer { border-inline-start: 3px solid var(--red); padding: 8px 18px; font-size: 22px; line-height: 2.1; margin: 8px 0 0; }
.answer b { display: block; font-size: 14px; color: var(--red-ink); }
.variants { list-style: none; padding: 0; margin: 0; counter-reset: v; }
.variants li { padding: 16px 18px; border-radius: 12px; margin-bottom: 8px; background: var(--paper-2); }
.variants li.sel { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.v-text { font-size: 24px; line-height: 2; }
.v-actions { display: flex; gap: 12px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.v-meaning { margin: 10px 0 0; color: var(--ink-2); }
.ecard { background: #000; color: #fff; border-radius: 20px; padding: 36px 28px; text-align: center; }
.ecard-label { color: rgba(255,255,255,.6); font-size: 14px; }
.ecard-emotion { font-size: clamp(36px, 7vw, 56px); font-weight: 700; color: #fff; margin: 4px 0 16px; }
.ecard-emotion::after { content: ""; display: block; width: 40px; height: 3px; background: var(--red); margin: 12px auto 0; }
.ecard-line { font-size: 24px; margin-bottom: 24px; }
.ecard .btn.ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.ex-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; }
.unit { margin-bottom: 48px; }
.unit-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.unit-head h2 { margin: 0; font-size: 26px; }
.unit.fold { margin-bottom: 10px; border: 1px solid var(--rule); border-radius: 14px; background: #fff; overflow: hidden; }
.unit.fold .fold-h { width: 100%; margin: 0; padding: 14px 16px; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: start; align-items: center; }
.unit.fold .fold-h h2 { font-size: 20px; flex: 1; }
.unit.fold .fold-h:hover { background: var(--paper-2); }
.unit.fold .fold-chev { transition: transform .2s; color: var(--ink-3); }
.unit.fold.open .fold-chev { transform: rotate(180deg); }
.unit.fold .rows { margin: 0; border-top: 1px solid var(--rule); }
.unit.fold .rows li:last-child .row { border-bottom: 0; }
.fold-new { color: var(--red); }
.unit-n { width: 34px; height: 34px; border-radius: 50%; background: #000; color: #fff; display: inline-grid; place-items: center; font-size: 15px; transform: translateY(-4px); }

/* language switch */
.lang-btn { background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; min-height: 32px; white-space: nowrap; }
.lang-btn:hover { color: var(--ink); border-color: var(--ink); }
.hero .kicker { text-align: start; direction: inherit; }
html[dir="ltr"] .hero h1 { max-width: 14ch; }
html[dir="ltr"] body { font-family: "Jost", var(--f-body); }

/* hero QR (wide screens only — on a phone you are already here) */
.hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
.qr-card { margin: 0; background: #fff; color: var(--ink); border-radius: 20px; padding: 20px 20px 16px; text-align: center; width: 260px; }
.qr-card img { width: 220px; height: 220px; margin: 0 auto; image-rendering: pixelated; }
.qr-card figcaption { font-size: 15px; font-weight: 600; margin-top: 10px; line-height: 1.5; }
.qr-card figcaption span { display: block; font-weight: 500; color: var(--ink-3); font-size: 13px; }
.hero .mark-bg { opacity: .14; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .qr-card { display: none; } .hero .mark-bg { opacity: .25; } }

/* ---------- mobile fit ---------- */
html, body { overflow-x: clip; }
.feature > *, .split > *, .trainer > *, .stage > *, .admin-grid > *, .hero-grid > * { min-width: 0; }
.feature .visual .wave { gap: 3px; width: 88%; }
.feature .visual .wave i { flex: 1 1 0; max-width: 5px; min-width: 2px; }
img, video, audio { max-width: 100%; }
.script-body, .ex-body, .lesson, .v-text, .tokens, .answer { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  body { font-size: 16px; }
  .top .wrap { gap: 10px; height: 58px; }
  .brand b { letter-spacing: .22em; font-size: 15px; }
  .brand img { width: 26px; height: 26px; }
  .nav { top: 58px; }
  .menu-btn { padding: 6px 12px; }
  .lang-btn { padding: 4px 10px; }
  .page { padding-top: 32px; padding-bottom: 64px; }
  .hero .wrap { padding-top: 56px; padding-bottom: 56px; }
  .hero .kicker { letter-spacing: .3em; font-size: 12px; margin-bottom: 18px; }
  .hero h1 { font-size: 40px; }
  .hero .lede { font-size: 17px; margin-bottom: 28px; }
  .hero .actions .btn { flex: 1 1 100%; }
  .sec { padding: 56px 0; }
  .sec-title { margin-bottom: 28px; }
  .tracks li { padding: 28px 22px; min-height: 0; }
  .feature .visual { aspect-ratio: 16/9; padding: 20px; }
  .trainer .photo { max-width: 100%; aspect-ratio: 4/4.4; }
  .facts { gap: 8px 24px; }
  .facts li b { font-size: 22px; }
  .foot .wrap { flex-direction: column; align-items: flex-start; }
  .toolbar .in { max-width: none; }
  .reader-tools { gap: 6px; }
  .seg button { padding: 6px 12px; }
  .script-notes { font-size: 14px; }
  .rec-box { padding: 18px; border-radius: 14px; }
  .rec-actions .btn { flex: 1 1 auto; }
  .tokens { font-size: 20px; padding: 14px; }
  .v-text { font-size: 20px; }
  .ecard { padding: 28px 18px; }
  .ecard-line { font-size: 20px; }
  .ex-nav .btn { flex: 1; }
  .mgrid { grid-template-columns: 1fr; }
  .unit-head h2 { font-size: 22px; }
  .tabs button { padding: 10px 10px; font-size: 15px; }
  .auth { padding-top: 32px; }
  .box { padding: 16px; }
  .booth .wrap { padding-top: 16px; }
  .transport { gap: 8px; }
  .tbtn { padding: 0 12px; font-size: 15px; }
  .toggle { display: flex; width: 100%; }
  .toggle button { flex: 1; padding: 8px 6px; font-size: 13px; }
  .row-ctl span:first-child { min-width: 72px !important; }
  .cues { max-height: none; }
}
@media (max-width: 600px) {
  table.t thead { display: none; }
  table.t, table.t tbody, table.t tr, table.t td { display: block; width: 100%; }
  table.t tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  table.t td { border: 0; padding: 3px 0; }
  .scroll-x { overflow: visible; }
  .admin-nav { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .cue-edit { grid-template-columns: 1fr 1fr; }
  .cue-edit .in:nth-child(3) { grid-column: 1 / -1; }
  .cue-edit .x { grid-column: 1 / -1; justify-self: start; }
  .file-slot { flex-wrap: wrap; }
}

/* ---------- community ---------- */
.feed { display: flex; flex-direction: column; gap: 16px; }
.post { background: #fff; border: 1px solid var(--rule); border-radius: 16px; padding: 18px; }
.thread { margin-top: 48px; }
.thread h2 { font-size: 22px; margin-bottom: 16px; }
.thread .post { margin-bottom: 12px; }
.post-head { display: flex; align-items: center; gap: 12px; }
.post-head .grow { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.avatar.sm { width: 30px; height: 30px; font-size: 12px; }
.post-title { margin: 12px 0 10px; font-weight: 600; }
.post audio { width: 100%; }
.play-btn { display: inline-flex; align-items: center; gap: 10px; border: 0; background: var(--paper-2); border-radius: 999px; padding: 10px 18px; font-weight: 600; cursor: pointer; }
.play-btn span { color: var(--red); }
.post-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 10px; }
.act { background: none; border: 0; padding: 6px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.act:hover { background: var(--paper-2); color: var(--ink); }
.act.on { color: var(--red); }
.act.try { margin-inline-start: auto; color: var(--red-ink); }
.comments { margin-top: 10px; }
.comment { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--paper-2); }
.comment .grow { min-width: 0; }
.comment p { margin: 2px 0 0; font-size: 15px; }
.comment-form { display: flex; gap: 8px; margin-top: 10px; }
.comment-form .in { min-height: 40px; }
.consent-bar { background: var(--warn-wash); color: var(--ink); border-radius: 12px; padding: 14px 18px; margin-bottom: 24px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.consent-bar p { margin: 0; flex: 1 1 260px; font-size: 15px; }
.check.consent { align-items: flex-start; font-size: 14px; line-height: 1.7; }
.check.consent input { margin-top: 4px; flex: none; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- profiles & friends ---------- */
.avatar.img { object-fit: cover; padding: 0; background: var(--paper-2); }
.av-link { display: inline-flex; border-radius: 50%; }
a.who { color: inherit; text-decoration: none; }
a.who:hover b { text-decoration: underline; text-underline-offset: 3px; }
.profile-head { display: flex; gap: 24px; align-items: flex-start; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--rule); }
.profile-head h1 { margin: 4px 0 6px; font-size: clamp(26px, 5vw, 36px); }
.profile-head .grow { min-width: 0; flex: 1; }
.bio-text { margin: 12px 0 0; line-height: 1.9; white-space: pre-line; color: var(--ink-2); }
.profile-actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.locked { border: 1px dashed var(--rule); border-radius: var(--r-m); padding: 28px 20px; text-align: center; }
.locked::before { content: "🔒"; display: block; font-size: 26px; margin-bottom: 8px; }
.locked p { margin: 6px 0 0; }
.precs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.prec { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--rule); border-radius: var(--r-m); padding: 16px; }
.prec .grow { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.prec audio { width: 100%; margin-top: 4px; }
.play-btn.sm { padding: 7px 14px; font-size: 14px; align-self: flex-start; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.people li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.person { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.person:hover b { text-decoration: underline; }
.photo-row { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.box h3 { margin-top: 0; display: flex; align-items: center; gap: 8px; }
.badge-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; vertical-align: middle; }
.check.private { align-items: flex-start; line-height: 1.7; }
.check.private input { margin-top: 4px; flex: none; }
@media (max-width: 600px) {
  .profile-head { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .profile-actions { justify-content: center; }
  .prec { flex-direction: column; }
  .prec .act.try { align-self: flex-start; }
}

/* ---------- members directory ---------- */
.tabs-seg { margin: 4px 0 16px; }
.tabs-seg a { display: inline-flex; align-items: center; padding: 6px 20px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; min-height: 36px; }
.tabs-seg a.on { background: var(--ink); color: #fff; }
.people-tools { display: grid; gap: 12px; margin-bottom: 20px; }
.people-tools .chip { display: inline-flex; align-items: center; gap: 6px; }
.dir { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dir-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--rule); border-radius: var(--r-m); padding: 12px 14px; }
.dir-card .person { flex: 1; min-width: 0; }
.dir-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dir-txt b { overflow-wrap: anywhere; }
.dir-bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; }
.dir-card > .btn, .dir-card > span { flex: none; }
@media (max-width: 600px) {
  .dir-card { flex-wrap: wrap; }
  .dir-card > .btn, .dir-card > span { width: 100%; justify-content: center; }
  .dir-card > span .btn { flex: 1; }
}

/* ---------- trainer rating & pinned note ---------- */
.stars-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.stars-lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.stars { display: inline-flex; gap: 1px; }
.star { font-style: normal; font-size: 20px; line-height: 1; color: #d9d6d0; }
.star.on { color: var(--red); }
.stars.edit .star { border: 0; background: transparent; padding: 3px 2px; cursor: pointer; font-size: 23px; transition: transform .1s; }
.stars.edit .star:hover { transform: scale(1.15); }
.stars-num { font-size: 14px; }
.rate-chip { color: var(--red); font-weight: 700; }
.trainer-note { margin-top: 14px; border: 1px solid var(--red); border-inline-start-width: 4px; background: var(--red-wash); border-radius: var(--r-m); padding: 12px 14px; }
.trainer-note p { margin: 6px 0 0; line-height: 1.85; white-space: pre-line; }
.tn-head { display: flex; align-items: center; gap: 8px; color: var(--red-ink); }
.trainer-note.editing textarea { margin-top: 8px; min-height: 90px; background: #fff; }
.tn-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.tn-add { margin-top: 12px; border: 1px dashed var(--red); background: transparent; color: var(--red-ink); border-radius: var(--r-m); padding: 8px 14px; font-weight: 600; cursor: pointer; width: 100%; }
@media (max-width: 400px) { .stars.edit .star { font-size: 21px; padding: 3px 1px; } .star { font-size: 18px; } }

/* ---------- reports ---------- */
.report-btn { color: var(--ink-3, #8a867f); display: inline-flex; align-items: center; gap: 4px; }
.report-btn:hover { color: var(--red); }
.report-btn.icon { padding: 2px 6px; align-self: flex-start; }
body.no-scroll { overflow: hidden; }
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 200; padding: 16px; }
.modal { background: #fff; border-radius: var(--r-l, 16px); padding: 22px; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal h3 { margin: 0 0 6px; }
.reasons { display: grid; gap: 6px; }
.reason { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rule); border-radius: var(--r-m); padding: 10px 12px; cursor: pointer; font-size: 15px; }
.reason input { accent-color: var(--red); width: 18px; height: 18px; flex: none; }
.reason.on { border-color: var(--red); background: var(--red-wash); }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .modal-back { place-items: end stretch; padding: 0; }
  .modal { width: 100%; border-radius: 18px 18px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .modal-actions .btn { flex: 1; }
}
.rep { border: 1px solid var(--rule); border-radius: var(--r-m); padding: 16px; margin-bottom: 14px; }
.rep-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rep-head .grow { flex: 1; min-width: 0; }
.rep-content { margin: 12px 0; padding: 12px; background: var(--paper-2); border-radius: var(--r-m); }
.rep-quote { margin: 0; line-height: 1.8; white-space: pre-line; }
.rep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rep-list li { border-inline-start: 3px solid var(--red); padding-inline-start: 10px; }
.rep-list p { margin: 4px 0 0; color: var(--ink-2); }
.rep-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.btn.danger { color: var(--red-ink); border-color: var(--red); }
@media (max-width: 600px) { .rep-actions .btn { flex: 1 1 calc(50% - 8px); } }

/* ---------- messages ---------- */
.msgs { display: grid; gap: 12px; }
.msg { border: 1px solid var(--rule); border-radius: var(--r-m); padding: 16px; margin-bottom: 12px; background: #fff; }
.msgs .msg { margin-bottom: 0; }
.msg.unread { border-color: var(--red); box-shadow: inset 4px 0 0 var(--red); }
[dir="rtl"] .msg.unread { box-shadow: inset -4px 0 0 var(--red); }
.msg.pinned { background: var(--paper-2); }
.msg-head { display: flex; align-items: flex-start; gap: 10px; }
.msg-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-head img { margin-top: 3px; flex: none; }
.msg-body { margin-top: 10px; line-height: 1.9; white-space: pre-line; overflow-wrap: anywhere; }
.msg-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.inbox-banner { display: flex; align-items: center; gap: 12px; background: #000; color: #fff; border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 24px; text-decoration: none; }
.inbox-banner .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inbox-banner .small { color: rgba(255,255,255,.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-banner .arrow { font-size: 20px; color: var(--red); }
.compose .seg { flex-wrap: wrap; border-radius: 18px; }
.cohort-picks { display: grid; gap: 6px; margin-bottom: 16px; }
.pick { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rule); border-radius: var(--r-m); padding: 10px 12px; cursor: pointer; }
.pick input { width: 18px; height: 18px; accent-color: var(--red); flex: none; }
.pick .grow { flex: 1; min-width: 0; font-weight: 600; }
.pick.on { border-color: var(--red); background: var(--red-wash); }
.compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.in.sm, select.in.sm { padding: 6px 10px; min-height: 34px; font-size: 14px; }
.cohort-sel { min-width: 170px; max-width: 100%; }
@media (max-width: 600px) { .compose-foot .btn { width: 100%; } .cohort-sel { width: 100%; } }
.gap.ok { background: var(--ok-wash); color: var(--ok); }
.gap.bad { background: var(--red-wash); outline: 1px dashed var(--red); }
.gap.g0.bad::after { content: "؟"; color: var(--red); font-size: 14px; }

/* ================= decks (presentations) ================= */
.dk-shell { position: fixed; inset: 0; background: #000; color: #fff; overflow: hidden; cursor: default; user-select: none; }
.dk-shell.idle { cursor: none; }
.dk-wait { position: absolute; inset: 0; display: grid; place-items: center; color: #aaa; }
.dk-stagebox { position: absolute; inset: 0; overflow: hidden; }
.dk-stage { position: absolute; top: 50%; left: 50%; width: 1600px; height: 900px; transform-origin: center; }
.dk { position: absolute; inset: 0; padding: 90px 110px; display: flex; flex-direction: column; font-family: var(--f-body); direction: rtl; text-align: right; overflow: hidden; }
.dk-light { background: #fff; color: #111; }
.dk-dark { background: #000; color: #fff; }
.dk h1 { font-size: 104px; line-height: 1.15; margin: 0; font-weight: 700; letter-spacing: 0; }
.dk h2, .dk-title { font-size: 64px; line-height: 1.2; margin: 0 0 44px; font-weight: 700; }
.dk-kicker { color: var(--red); font-size: 30px; font-weight: 600; margin: 0 0 22px; letter-spacing: .02em; }
.dk-foot { position: absolute; bottom: 34px; left: 110px; right: 110px; display: flex; align-items: center; gap: 12px; font-size: 20px; opacity: .55; }
.dk-foot img { width: 26px; height: 26px; }
.dk-foot .dk-num { margin-inline-start: auto; }
.dk-dark .dk-foot { color: #fff; }

.dk-cover { justify-content: center; }
.dk-cover h1 { font-size: 132px; max-width: 1100px; }
.dk-mark-bg { position: absolute; left: -120px; top: 50%; transform: translateY(-50%); width: 760px; opacity: .16; }
.dk-sub { margin: 36px 0 0; }
.dk-sub span { background: var(--red); color: #fff; font-size: 40px; font-weight: 700; padding: 8px 30px; border-radius: 999px; }
.dk-by { font-size: 34px; margin: 56px 0 0; color: #bbb; }

.dk-section { justify-content: center; }
.dk-section h1 { font-size: 120px; }
.dk-seclist { margin: 48px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 60px; counter-reset: s; max-width: 1250px; }
.dk-seclist li { font-size: 36px; color: #ddd; counter-increment: s; display: flex; gap: 18px; align-items: baseline; }
.dk-seclist li::before { content: counter(s, arabic-indic); color: var(--red); font-weight: 700; min-width: 34px; }
.dk-chips { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 48px; max-width: 1350px; }
.dk-chips span { border: 2px solid rgba(255,255,255,.28); border-radius: 999px; padding: 10px 28px; font-size: 32px; }
.dk-chips.sm span { font-size: 26px; padding: 6px 20px; }

.dk-statement { justify-content: center; }
.dk-statement h1 { font-size: 96px; }
.dk-lead { font-size: 52px; line-height: 1.6; margin: 40px 0 0; max-width: 1300px; font-weight: 500; }
.dk-subp { font-size: 36px; line-height: 1.7; margin: 26px 0 0; color: #666; max-width: 1250px; }
.dk-dark .dk-subp { color: #bbb; }
.dk-pills { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 56px; }
.dk-pills span { background: #f2f0ec; border-radius: 18px; padding: 18px 32px; font-size: 38px; font-weight: 600; }
.dk-pills span::before { content: "●"; color: var(--red); font-size: .6em; margin-inline-end: 14px; vertical-align: .25em; }

.dk-quote { justify-content: center; }
.dk-qmark { font-size: 260px; line-height: .6; color: var(--red); font-family: Georgia, serif; height: 120px; }
.dk-quote blockquote { margin: 0; font-size: 66px; line-height: 1.5; font-weight: 600; max-width: 1350px; }

.dk-grid { display: grid; gap: 24px; flex: 1; align-content: start; }
.dk-grid.n5 { grid-template-columns: repeat(6, 1fr); }
.dk-grid.n5 .dk-card { grid-column: span 2; }
.dk-grid.n5 .dk-card:nth-child(4) { grid-column: 2 / span 2; }
.dk-grid.n8 { grid-template-columns: repeat(4, 1fr); }
.dk-card { background: #f5f3ef; border-radius: 26px; padding: 30px 32px; display: flex; flex-direction: column; gap: 10px; }
.dk-card h3 { font-size: 38px; margin: 0; font-weight: 700; }
.dk-card h3 small { font-size: 22px; color: #888; font-weight: 500; }
.dk-card p { font-size: 28px; line-height: 1.6; margin: 0; color: #444; }
.dk-grid.small .dk-card { padding: 24px 26px; }
.dk-grid.small .dk-card h3 { font-size: 32px; }
.dk-grid.small .dk-card p { font-size: 24px; }
.dk-ico { font-size: 44px; line-height: 1; }
.dk-idx { color: var(--red); font-size: 26px; font-weight: 600; }

.dk-two { flex-direction: row; gap: 60px; align-items: center; }
.dk-col { flex: 1; background: #f5f3ef; border-radius: 30px; padding: 54px 56px; align-self: stretch; margin-bottom: 40px; }
.dk-col:nth-child(2) { background: #000; color: #fff; }
.dk-col h2 { font-size: 66px; margin: 0 0 30px; }
.dk-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.dk-col li { font-size: 38px; line-height: 1.45; display: flex; gap: 18px; }
.dk-col li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--red); margin-top: .55em; }

.dk-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; flex: 1; margin-bottom: 50px; }
.dk-day { border: 2px solid #e6e3dd; border-radius: 26px; padding: 30px 26px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.dk-day.on { background: #000; color: #fff; border-color: #000; }
.dk-dn { color: var(--red); font-weight: 700; font-size: 24px; }
.dk-day h3 { font-size: 34px; margin: 0 0 8px; line-height: 1.3; }
.dk-day ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.dk-day li { font-size: 23px; line-height: 1.5; color: #555; }
.dk-day.on li { color: #ddd; }
.dk-tag { margin-top: auto; font-size: 20px; color: var(--red); font-weight: 600; }

.dk-bio { flex-direction: row; gap: 80px; align-items: center; padding-inline-end: 0; }
.dk-photo { width: 600px; align-self: stretch; margin: -90px 0; flex: none; order: 2; position: relative; }
.dk-photo img { width: 100%; height: 100%; object-fit: cover; }
.dk-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, transparent 60%, #000); }
.dk-biotext { flex: 1; }
.dk-biotext h1 { font-size: 96px; margin-bottom: 30px; }
.dk-biotext ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dk-biotext li { font-size: 32px; color: #ddd; display: flex; gap: 16px; }
.dk-biotext li::before { content: "—"; color: var(--red); }
.dk-tt { font-size: 26px; color: #999; margin: 40px 0 0; }
.dk-bio .dk-chips { margin-top: 16px; }

.dk-image .dk-imgbox { flex: 1; display: grid; place-items: center; margin-bottom: 50px; min-height: 0; }
.dk-imgbox img { max-width: 100%; max-height: 640px; object-fit: contain; }

.dk-video { padding: 60px 90px 50px; gap: 24px; }
.dk-vhead { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dk-vhead h2 { margin: 0; font-size: 56px; }
.dk-vhead .dk-kicker { margin: 0; }
.dk-vn { width: 64px; height: 64px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 30px; font-weight: 700; flex: none; }
.dk-cap { width: 100%; margin: 0; font-size: 30px; color: #bbb; }
.dk-player { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.dk-player video { width: 100%; flex: 1; min-height: 0; background: #111; border-radius: 18px; object-fit: contain; }
.dk-audio { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 40px; background: #0d0d0d; border-radius: 24px; padding: 60px; }
.dk-audio audio { width: 100%; height: 60px; }
.dk-wave { display: flex; align-items: center; gap: 10px; height: 260px; justify-content: center; }
.dk-wave i { width: 14px; height: var(--h); background: var(--red); border-radius: 7px; opacity: .85; }
.dk-parts { display: flex; gap: 12px; }
.dk-parts button { background: #222; color: #fff; border: 0; border-radius: 999px; padding: 10px 26px; font-size: 24px; cursor: pointer; font-family: inherit; }
.dk-parts button.on { background: var(--red); }
.dk-missing { flex: 1; display: grid; place-items: center; border: 3px dashed #555; border-radius: 20px; color: #999; font-size: 28px; padding: 30px; text-align: center; }
.dk-light .dk-missing { border-color: #ccc; }

.dk-sentence { font-size: 72px; font-weight: 700; line-height: 1.7; margin: 10px 0 40px; }
.dk-sentence span { transition: color .2s; }
.dk-sentence .hot { color: var(--red); text-decoration: underline; text-decoration-thickness: 8px; text-underline-offset: 20px; }
.dk-meaning { background: #f5f3ef; border-radius: 26px; padding: 36px 44px; min-height: 190px; }
.dk-meaning p { font-size: 46px; line-height: 1.5; margin: 0; font-weight: 500; animation: dkin .35s ease; }
.dk-meaning .muted { color: #999; }
.dk-mlabel { color: var(--red); font-size: 24px; font-weight: 700; display: block; margin-bottom: 8px; }
.dk-dots { display: flex; gap: 12px; margin-top: 30px; }
.dk-dots i { width: 16px; height: 16px; border-radius: 50%; background: #ddd; }
.dk-dots i.on { background: var(--red); }
@keyframes dkin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.dk-plain { font-size: 40px; font-weight: 700; margin: -14px 0 22px; color: #555; }
.dk-pauses { padding-top: 70px; }
.dk-pauses .dk-title { margin-bottom: 24px; }
.dk-readings { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dk-readings li { border: 2px solid #eee; border-radius: 22px; padding: 16px 30px; opacity: .35; transition: opacity .25s; }
.dk-readings li.on { opacity: 1; border-color: var(--red); }
.dk-mk { font-size: 40px; margin: 0; font-weight: 600; }
.dk-mean { font-size: 27px; color: #555; margin: 6px 0 0; line-height: 1.5; animation: dkin .35s ease; }

.dk-end { flex-direction: row; align-items: center; justify-content: space-between; gap: 60px; }
.dk-end h1 { font-size: 130px; }
.dk-end .dk-lead { font-size: 40px; color: #ddd; }
.dk-next { font-size: 34px; color: var(--red); margin-top: 50px; font-weight: 600; }
.dk-qr { background: #fff; border-radius: 30px; padding: 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: #000; font-size: 24px; flex: none; }
.dk-qr img { width: 330px; height: 330px; }

.dk-black { position: fixed; inset: 0; background: #000; z-index: 5; }
.dk-progress { position: fixed; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.08); z-index: 6; }
.dk-progress i { display: block; height: 100%; background: var(--red); margin-inline-start: 0; transition: width .3s; }
.dk-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; background: rgba(20,20,20,.88); border-radius: 999px; padding: 6px 10px; z-index: 7; transition: opacity .3s; direction: rtl; }
.dk-shell.idle .dk-bar { opacity: 0; pointer-events: none; }
.dk-bar button { background: transparent; color: #fff; border: 0; font: inherit; font-size: 16px; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.dk-bar button:hover { background: rgba(255,255,255,.12); }
.dk-bar span { color: #aaa; font-size: 14px; padding: 0 6px; }

/* presenter view */
.dk-pres { position: fixed; inset: 0; background: #111; color: #eee; display: grid; grid-template-rows: auto 1fr auto; direction: rtl; }
.dk-pres header { display: flex; align-items: center; gap: 24px; padding: 12px 20px; border-bottom: 1px solid #222; }
.dk-pres header b { flex: 1; }
.dk-timer { font-size: 22px; font-weight: 700; color: #fff; }
.dk-timer .linkbtn { color: #aaa; font-size: 13px; }
.dk-pmain { display: grid; grid-template-columns: 1fr 380px; gap: 16px; padding: 16px; min-height: 0; }
.dk-pcur { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.dk-pcur .dk-stagebox { position: relative; flex: 1; inset: auto; }
.dk-pctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.dk-pctl span { color: #aaa; }
.dk-pres aside { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.dk-pnext { position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; }
.dk-pnext .dk-stagebox { position: absolute; }
.dk-plabel { margin: 0; font-size: 13px; color: #888; }
.dk-notes { flex: 1; overflow: auto; background: #1b1b1b; border-radius: 10px; padding: 14px 16px; font-size: 20px; line-height: 1.8; }
.dk-strip { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; border-top: 1px solid #222; }
.dk-strip button { flex: none; background: #1d1d1d; color: #bbb; border: 0; border-radius: 8px; padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-strip button.on { background: var(--red); color: #fff; }
.dk-pcur .dk-stagebox, .dk-pnext .dk-stagebox { background: #000; }

.deck-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
@media (max-width: 600px) { .deck-actions .btn { flex: 1 1 45%; } }
.dk-grid.n6 { grid-template-columns: repeat(3, 1fr); }
.dk-grid.n6.small .dk-card { padding: 30px 34px; }
.dk-grid.n6.small .dk-card h3 { font-size: 38px; }
.dk-grid.n6.small .dk-card p { font-size: 28px; }
.dk-end { justify-content: center; }

/* ================= dubbing studio ================= */
.mcard b { display: block; margin-top: 10px; }
.dub-cast { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip-c { --c: #888; border: 2px solid var(--c); background: transparent; color: var(--booth-ink); border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.chip-c.on { background: var(--c); color: #fff; }
.dub-admin .chip-c, .page .chip-c { color: var(--ink); }
.dub-admin .chip-c.on { color: #fff; }
.dub-who { font-weight: 700; margin-inline-end: 6px; }
.dub-timeline { position: relative; height: 34px; background: var(--booth-2); border-radius: 8px; margin-top: 10px; cursor: pointer; overflow: hidden; }
.dub-timeline i { position: absolute; top: 6px; bottom: 6px; background: var(--c); border-radius: 4px; min-width: 3px; opacity: .8; }
.dub-timeline i.has { box-shadow: inset 0 -4px 0 rgba(255,255,255,.85); }
.dub-timeline i.sel { outline: 2px solid #fff; outline-offset: 1px; }
.dub-timeline .ph { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; }
.dub-line { margin-top: 4px; }
.dub-lh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dub-text { font-size: clamp(20px, 2.6vw, 28px); font-weight: 600; line-height: 1.6; margin: 12px 0 6px; }
.fit { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.fit.ok { background: rgba(123,216,154,.15); color: #7BD89A; }
.fit.warn { background: rgba(255,200,90,.15); color: #F2D28A; }
.fit.bad { background: rgba(255,74,74,.15); color: #FF8A8A; }
.dub-wave { width: 100%; height: 110px; background: #121316; border-radius: 8px; display: block; margin-top: 8px; }
.dub-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.dub-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 4px; vertical-align: middle; }
.dub-ctl { display: flex; gap: 14px 18px; flex-wrap: wrap; align-items: center; margin-top: 4px; font-size: 14px; color: var(--booth-ink-2); }
.dub-ctl label { display: inline-flex; align-items: center; gap: 8px; }
.dub-ctl input[type=range] { width: 110px; accent-color: var(--booth-ink); }
.dub-ctl select.in { min-height: 34px; padding: 4px 8px; }
.nudge { display: inline-flex; align-items: center; border: 1px solid var(--booth-3); border-radius: 8px; overflow: hidden; }
.nudge button { background: var(--booth-2); color: var(--booth-ink); border: 0; padding: 6px 10px; cursor: pointer; font: inherit; font-size: 13px; }
.nudge .time { padding: 0 8px; min-width: 3.4em; text-align: center; }
.cue.other { opacity: .5; }
.dub .cues { max-height: 46vh; }
/* admin */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 8px; }
.slot { border: 1px dashed var(--rule); border-radius: var(--r-m); padding: 14px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.slot.has { border-style: solid; border-color: var(--ok); background: var(--ok-wash); }
.dub-char { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.dub-char input[type=color] { width: 36px; height: 36px; border: 0; padding: 0; background: none; }
.dub-char .cast { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 100%; }
.pick.sm { padding: 4px 10px; font-size: 13px; }
.dub-prev video { width: 100%; max-width: 420px; border-radius: 8px; background: #000; display: block; margin-bottom: 10px; }
.dub-lines { display: grid; gap: 8px; }
.dub-lrow { display: grid; grid-template-columns: 28px 130px 84px 84px 1fr auto auto; gap: 6px; align-items: center; }
.dub-lrow .n { color: var(--ink-3); font-size: 13px; }
.dub-lrow .t { direction: ltr; text-align: center; }
.dub-lrow .orig { grid-column: 3 / -1; font-size: 13px; color: var(--ink-3); }
@media (max-width: 700px) {
  .dub-lrow { grid-template-columns: 28px 1fr 1fr; }
  .dub-lrow > :nth-child(5) { grid-column: 1 / -1; }
  .dub-lrow .orig { grid-column: 1 / -1; }
}
.dur-pill { background: var(--booth-3); color: var(--booth-ink); border-radius: 999px; padding: 4px 14px; font-size: 14px; }
.dur-pill b { font-size: 18px; margin-inline-start: 4px; }
.hud { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(0,0,0,.45); color: #fff; text-align: center; pointer-events: none; }
.hud-n { font-family: var(--f-latin); font-size: clamp(72px, 14vw, 140px); font-weight: 600; line-height: 1; animation: hudpop .9s ease-out; }
.hud-t { font-size: clamp(15px, 2vw, 20px); font-weight: 600; }
.hud-t.big { font-size: clamp(22px, 3.4vw, 36px); }
.hud.talk { background: rgba(0,0,0,.2); justify-content: flex-end; padding-bottom: 18%; }
.hud.talk .hud-t.big { color: #7BD89A; }
.hud-bar { width: min(70%, 420px); height: 12px; background: rgba(255,255,255,.2); border-radius: 6px; overflow: hidden; direction: rtl; }
.hud-bar i { display: block; height: 100%; background: #7BD89A; }
.hud.over .hud-t.big { color: #FF6B6B; }
@keyframes hudpop { from { transform: scale(1.4); opacity: .2; } to { transform: scale(1); opacity: 1; } }
.dub-proj { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 16px; }
.dub-proj > select { max-width: 280px; }
.dub-team { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dub-members { display: inline-flex; }
.dub-members .dm { margin-inline-start: -6px; border-radius: 50%; border: 2px solid var(--booth); position: relative; display: inline-flex; }
.dub-members .dm.on::after { content: ""; position: absolute; bottom: -1px; inset-inline-end: -1px; width: 10px; height: 10px; border-radius: 50%; background: #3FD07A; border: 2px solid var(--booth); }
.tbtn.sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.dub-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--booth-3); }
.dub-pick select { min-height: 34px; padding: 4px 8px; }

/* ---------- guided tour ---------- */
.guide-btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 10px 16px 10px 18px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; text-align: start; transition: border-color .15s, box-shadow .15s; }
.guide-btn:hover { border-color: var(--ink-3); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.guide-btn .gi { width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--f-latin); flex: none; }
.guide-btn b { display: block; font-size: 15px; }
.guide-btn small { display: block; color: var(--ink-3); font-size: 13px; }
.tour { position: fixed; inset: 0; z-index: 400; }
.tour-dim { position: fixed; background: rgba(10,10,12,.62); }
.tour-hole { position: fixed; border-radius: 10px; box-shadow: 0 0 0 2px var(--red), 0 0 0 6px rgba(206,0,0,.18); pointer-events: none; }
.tour-card { position: fixed; background: var(--paper); color: var(--ink); border-radius: 16px; padding: 18px 20px 16px; box-shadow: 0 24px 70px rgba(0,0,0,.35); max-height: calc(100dvh - 32px); overflow: auto; animation: tourIn .25s ease; }
.tour-card.center { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); animation: none; }
.tour-card.sheet { left: 12px; right: 12px; bottom: 12px; max-height: 55dvh; }
@keyframes tourIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tour-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tour-n { font-size: 13px; color: var(--ink-3); letter-spacing: .05em; }
.tour-x { background: none; border: 0; font-size: 16px; color: var(--ink-3); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.tour-x:hover { background: var(--paper-2); color: var(--ink); }
.tour-mark { display: block; margin: 4px 0 10px; }
.tour-card h3 { margin: 0 0 6px; font-size: 20px; }
.tour-card p { margin: 0; color: var(--ink-2); line-height: 1.75; font-size: 15.5px; }
.tour-legend { display: grid; gap: 6px; margin-top: 12px; padding: 10px 12px; background: var(--paper-2); border-radius: 10px; font-size: 14px; color: var(--ink-2); }
.tour-legend b { color: var(--red); margin-inline-end: 6px; display: inline-block; min-width: 3.2em; direction: ltr; }
.tour-dots { display: flex; gap: 5px; margin: 14px 0 12px; flex-wrap: wrap; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); }
.tour-dots i.done { background: var(--ink-3); }
.tour-dots i.on { background: var(--red); width: 20px; border-radius: 4px; }
.tour-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tour-skip { margin-inline-start: auto; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .tour-card { animation: none; } }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.contact-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.contact-btns .btn { display: inline-flex; align-items: center; gap: 10px; }
.ig-btn { background: var(--ink); color: #fff; }
.wa-btn { background: #1F9D55; color: #fff; border-color: #1F9D55; }
.wa-btn:hover { background: #188046; }
.ig-qr { display: grid; justify-items: center; gap: 10px; padding: 22px 22px 18px; background: #fff; border-radius: 22px; box-shadow: 0 12px 40px rgba(0,0,0,.10); text-decoration: none; color: var(--ink); transition: transform .15s; }
.ig-qr:hover { transform: translateY(-2px); }
.ig-qr img { width: 220px; height: 220px; display: block; }
.ig-qr span { font-size: 20px; letter-spacing: .04em; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; gap: 28px; } .ig-qr { justify-self: center; } }
.wa-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0; border: 1px solid #CBE8D6; background: #F1FAF4; border-radius: var(--r-m); text-decoration: none; color: var(--ink); max-width: 560px; }
.wa-card:hover { border-color: #1F9D55; }
.wa-card .wa-ic { width: 42px; height: 42px; border-radius: 50%; background: #1F9D55; color: #fff; display: grid; place-items: center; flex: none; }
.wa-card b { display: block; }
.wa-card small { display: block; color: var(--ink-2); font-size: 13px; }
.wa-card .wa-go { color: #1F9D55; font-size: 20px; }
.wa-fab-w { position: fixed; left: 14px; bottom: 18px; z-index: 150; transition: transform .25s ease, opacity .25s ease; }
.wa-fab-w.tucked { transform: translateX(calc(-100% - 2px)); opacity: .55; pointer-events: none; }
.wa-fab { position: relative; width: 48px; height: 48px; border-radius: 50%; background: #1F9D55; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: transform .15s; }
.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 26px; height: 26px; }
.wa-fab-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #1B1C20; color: #fff; font: 700 15px/1 system-ui; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); padding: 0; }
/* report-a-problem tab: half off the right edge, out of the way until tapped */
.rp-fab { position: fixed; right: 0; bottom: 120px; z-index: 149; height: 42px; padding: 0 12px 0 12px; border: 0; border-radius: 21px 0 0 21px; background: #1B1C20; color: #fff; display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1 inherit; font-family: inherit; box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer; transition: transform .25s ease, opacity .25s ease; }
.rp-fab svg { width: 18px; height: 18px; flex: none; }
.rp-fab:hover, .rp-fab:focus-visible { background: var(--red); outline: none; }
.rp-fab.tucked { transform: translateX(100%); opacity: .5; pointer-events: none; }
body.ig .rp-fab { bottom: calc(150px + env(safe-area-inset-bottom)); }
.rp-sheet { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }
.rp-here { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: 14px; } .rp-here small { font-size: 12px; word-break: break-all; }
.tag.new-tag { background: var(--red); color: #fff; border-color: var(--red); font-weight: 700; transform: rotate(-4deg); box-shadow: 0 2px 6px rgba(206,0,0,.3); animation: newPop .6s cubic-bezier(.2,.9,.3,1.4); }
@keyframes newPop { from { transform: rotate(-4deg) scale(.6); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }
.rec-dl { width: 100%; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .rec-dl small { font-weight: 400; opacity: .7; }

/* ---------- trophies ---------- */
.space-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: -12px 0 28px; }
.space-cards:empty { display: none; }
.bar { display: block; height: 8px; background: var(--paper-2); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #E8A93A, var(--red)); border-radius: inherit; transition: width .6s ease; }
[dir="rtl"] .bar i, html[dir="rtl"] .bar i { margin-inline-start: 0; }
.bar.big { height: 12px; margin: 8px 0 6px; }
.lvl-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r-m); text-decoration: none; color: var(--ink); background: linear-gradient(135deg, #FFF8EC, #fff 60%); }
.lvl-card:hover { border-color: #E8A93A; }
.lvl-card b { display: block; margin-bottom: 6px; }
.lvl-card small { display: block; color: var(--ink-2); font-size: 12.5px; margin-top: 5px; }
.lvl-num { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #F2C14E, #D4891C); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 20px; flex: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.lvl-tro { font-weight: 700; white-space: nowrap; }
.lvl { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 99px; background: #FFF4DE; color: #7A4B00; font-size: 13px; font-weight: 600; }
.lvl b { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #F2C14E, #D4891C); color: #fff; display: grid; place-items: center; font-size: 12px; }
.ptro { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.ptro-m { display: inline-flex; gap: 2px; }
/* medals */
.medal { position: relative; display: inline-grid; place-items: center; border-radius: 50%; flex: none; line-height: 1;
  background: radial-gradient(circle at 35% 30%, var(--m1), var(--m2) 70%); box-shadow: inset 0 0 0 3px var(--m3), inset 0 -4px 0 rgba(0,0,0,.12), 0 3px 10px rgba(0,0,0,.12); }
.medal span { filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
.medal.t1 { --m1: #F3C9A0; --m2: #C27C45; --m3: #A9652F; }
.medal.t2 { --m1: #F4F6F8; --m2: #B9C0C8; --m3: #98A1AB; }
.medal.t3 { --m1: #FFE79A; --m2: #E3A92B; --m3: #C68B13; }
.medal.t4 { --m1: #E9F2FF; --m2: #9DB6E8; --m3: #6F8FD6; }
.medal.off { --m1: #F1F0EE; --m2: #E2E0DC; --m3: #D5D2CD; box-shadow: inset 0 0 0 3px var(--m3); }
.medal.off span { filter: grayscale(1) opacity(.35); }
/* page */
.tro-hero { display: flex; align-items: center; gap: 22px; padding: 22px; border-radius: 16px; background: linear-gradient(135deg, #1B1C20, #2B2420); color: #fff; margin-bottom: 26px; flex-wrap: wrap; }
.tro-hero h2 { margin: 0; color: #fff; }
.tro-hero .muted { color: rgba(255,255,255,.65); }
.tro-hero .bar { background: rgba(255,255,255,.12); }
.tro-hero .grow { min-width: 220px; }
.tro-lvl { width: 84px; height: 84px; border-radius: 22px; background: linear-gradient(135deg, #F2C14E, #D4891C); display: grid; place-items: center; align-content: center; flex: none; box-shadow: inset 0 -5px 0 rgba(0,0,0,.15); color: #fff; }
.tro-lvl span { font-size: 34px; font-weight: 700; line-height: 1; }
.tro-lvl small { font-size: 12px; opacity: .9; }
.tro-lvl.big { width: 100px; height: 100px; margin: 0 auto; }
.tro-stats { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.tro-stats li { display: grid; text-align: center; }
.tro-stats b { font-size: 24px; }
.tro-stats b small { font-size: 13px; opacity: .6; }
.tro-stats span { font-size: 12.5px; color: rgba(255,255,255,.7); }
.tro-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tro-grid li { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 18px 14px 14px; border: 1px solid var(--rule); border-radius: 14px; background: #fff; align-content: start; }
.tro-grid li.ok { border-color: #F0D9A8; background: linear-gradient(180deg, #FFFBF2, #fff); }
.tro-grid li b { font-size: 15px; margin-top: 4px; }
.tro-done { font-size: 12.5px; color: var(--ok); font-weight: 600; }
.tro-prog { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 2px; }
.tro-prog .bar { flex: 1; height: 6px; }
.tro-how { margin-top: 26px; border: 1px solid var(--rule); border-radius: 12px; padding: 12px 16px; }
.tro-how summary { cursor: pointer; font-weight: 600; }
.tro-how ul { list-style: none; padding: 0; margin: 12px 0 8px; display: grid; gap: 6px; max-width: 460px; }
.tro-how li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--rule); padding-bottom: 6px; }
.tro-how li b { color: var(--ok); }
.seg-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.chip-b { border: 1px solid var(--rule); background: #fff; border-radius: 99px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink-2); }
.chip-b.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 640px; }
.board li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; }
.board li.me { border-color: var(--red); background: var(--red-wash); }
.board li.top1 { background: linear-gradient(90deg, #FFF6DB, #fff); border-color: #F0D9A8; }
.board .rank { width: 32px; text-align: center; font-weight: 700; font-size: 18px; color: var(--ink-3); }
.board .who { display: flex; align-items: center; gap: 10px; flex: 1; text-decoration: none; color: var(--ink); font-weight: 600; min-width: 0; }
.board .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board li > b { font-size: 18px; }
/* celebration */
.tro-pop { text-align: center; position: relative; overflow: hidden; padding-top: 30px; }
.tro-pop .medal { animation: tropop .6s cubic-bezier(.2,1.6,.4,1) both; }
.tro-pop h3 { font-size: 24px; margin: 14px 0 6px; }
.tro-pop-m { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tro-up { margin-top: 8px; color: #7A4B00; }
@keyframes tropop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; left: calc(var(--i) * 5.5% + 2%); width: 8px; height: 12px; border-radius: 2px; background: hsl(calc(var(--i) * 47), 85%, 58%); animation: confetti 1.8s calc(var(--i) * 60ms) ease-in forwards; opacity: 0; }
@keyframes confetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(320px) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .tro-pop .medal, .confetti i { animation: none; } .confetti { display: none; } }
@media (max-width: 600px) { .tro-stats { width: 100%; justify-content: space-around; } .tro-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- review (timed notes) ---------- */
.rv { margin: 10px 0 12px; border: 1px solid var(--rule); border-radius: 12px; padding: 12px; background: #fff; }
.rv-bar { display: flex; align-items: center; gap: 10px; }
.rv-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 14px; cursor: pointer; flex: none; }
.rv-play:disabled { opacity: .4; }
.rv-wave-wrap { flex: 1; min-width: 0; }
.rv-wave { display: block; width: 100%; height: 64px; cursor: pointer; border-radius: 6px; background: var(--paper-2); }
.rv-wave.loading { display: grid; place-items: center; font-size: 13px; color: var(--ink-3); cursor: default; }
.rv-time { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
[dir="rtl"] .rv-wave { direction: ltr; }
.rv-notes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.rv-notes li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: #FFF8EC; border: 1px solid #F0D9A8; border-radius: 10px; }
.rv-notes p { margin: 0 0 4px; }
.rv-at { border: 0; background: #E8A93A; color: #fff; border-radius: 99px; padding: 3px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; font-weight: 600; }
.rv-at.gen { background: var(--ink-3); cursor: default; }
.rv-voice { width: 100%; max-width: 360px; height: 36px; }
.rv-add { margin-top: 12px; border-top: 1px dashed var(--rule); padding-top: 10px; display: grid; gap: 8px; }
.rv-add-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rv-add-a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rv-recording { animation: rvpulse 1s ease-in-out infinite; }
@keyframes rvpulse { 50% { opacity: .6; } }
.rows li.focus > .row { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 8px; }

/* ---------- notifications ---------- */
.bell { position: relative; }
.bell-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.bell-btn:hover { background: var(--paper-2); }
.bell-n { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; border-radius: 99px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.bell-pop { position: absolute; top: 46px; inset-inline-end: -60px; width: min(360px, calc(100vw - 24px)); background: #fff; border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.18); z-index: 60; overflow: hidden; }
.bell-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.bell-pop ul { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 420px); overflow: auto; }
.bell-pop li button { display: flex; gap: 10px; width: 100%; text-align: start; background: none; border: 0; border-bottom: 1px solid var(--paper-2); padding: 10px 14px; cursor: pointer; font: inherit; color: var(--ink); }
.bell-pop li button:hover { background: var(--paper-2); }
.bell-pop li.new button { background: #FFF6F6; }
.bell-pop li.new b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-inline-end: 6px; vertical-align: middle; }
.bell-pop .bi { font-size: 18px; line-height: 1.4; }
.bell-pop b { display: block; font-size: 14px; }
.bell-pop .grow span { display: block; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bell-pop small { color: var(--ink-3); font-size: 12px; }
.bell-f { padding: 10px 14px; background: var(--paper-2); }
.push-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 18px; }
.bell-f .push-row { margin: 0; }
.push-row.ok span { color: var(--ok); font-size: 14px; font-weight: 600; }
@media (max-width: 1100px) { .bell { margin-inline-start: auto; } .bell + .lang-btn, .menu-btn { margin-inline-start: 0; } }
@media (max-width: 600px) { .bell-pop { position: fixed; top: 64px; inset-inline: 12px; width: auto; } }

/* ---------- weekly challenge ---------- */
.chal-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: -12px 0 24px; border-radius: 14px; text-decoration: none; color: #fff; background: linear-gradient(120deg, #1B1C20, #3A2A12); }
.chal-card small { display: block; color: rgba(255,255,255,.7); font-size: 12.5px; }
.chal-card b { display: block; font-size: 17px; margin: 2px 0; }
.chal-ic { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #F2C14E, #D4891C); display: grid; place-items: center; font-size: 24px; flex: none; }
.chal-ic.big { width: 72px; height: 72px; font-size: 36px; border-radius: 18px; }
.page .chal-card { margin-top: 0; }
.chal-hero { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 24px; }
.chal-hero h1 { margin: 2px 0 6px; }
.chal-hero .kicker { margin: 0; color: var(--ink-3); font-size: 14px; }
.chal-hero .kicker .live { color: var(--red); font-weight: 600; }
.chal-rec { margin-top: 28px; padding-top: 6px; }
.chal-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chal-entries li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 12px; }
.chal-entries li.win { border-color: #F0D9A8; background: linear-gradient(90deg, #FFF6DB, #fff); }
.chal-entries .who { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 600; }
.chal-entries .grow-row { display: flex; gap: 10px; align-items: center; margin-inline-start: auto; }
.chal-entries audio { height: 34px; max-width: 260px; }
.chal-entries p { width: 100%; margin: 4px 0 0; }

/* ---------- report a mistake ---------- */
.fix-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 18px 0 6px; }
.fix-item .fix-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fix-item .fix-h a { color: var(--ink); }
.fix-body { margin: 10px 0; white-space: pre-wrap; background: var(--paper-2); border-radius: 8px; padding: 10px 12px; }
.fix-f { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fix-f .small { margin-inline-end: auto; }

/* ---------- install guide ---------- */
.hero .guide-btn + .guide-btn { margin-inline-start: 8px; }
a.guide-btn { text-decoration: none; }
.inst-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.inst-dev { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.inst-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.inst-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--rule); border-radius: 14px; background: #fff; }
.inst-n { width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; font-size: 14px; }
.inst-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; flex: none; color: #0A84FF; }
.inst-ic .ico { width: 28px; height: 28px; }
.inst-ic .ico.app { width: 40px; height: 40px; border-radius: 10px; }
.inst-steps b { display: block; font-size: 16px; margin-bottom: 4px; }
.inst-steps p { margin: 0; color: var(--ink-2); line-height: 1.7; }
.inst-push .push-row { margin: 0; }
.inst-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: -12px 0 20px; border: 1px solid var(--rule); border-radius: 14px; background: linear-gradient(135deg, #F6F8FF, #fff); }
.inst-banner img { border-radius: 10px; }
.inst-banner b { display: block; }
.inst-banner small { display: block; color: var(--ink-2); font-size: 13px; }
.inst-x { background: none; border: 0; color: var(--ink-3); font-size: 15px; cursor: pointer; padding: 4px; }
.bell-f { display: grid; gap: 8px; }
.bell-f a { color: var(--ink-2); }

/* ---------- opening sting ---------- */
.intro { position: fixed; inset: 0; z-index: 10000; background: #fff; display: grid; place-items: center; overflow: hidden; cursor: pointer; transition: opacity .6s ease; -webkit-tap-highlight-color: transparent; }
.intro.out { opacity: 0; pointer-events: none; }
.iv-stage { position: relative; display: grid; place-items: center; }
.iv-logo { width: min(78vw, 440px); height: auto; display: block; overflow: visible; transform-origin: 52% 28%; animation: ivFly .85s cubic-bezier(.7,0,.84,0) 2.45s forwards; }
.iv-mark { filter: drop-shadow(0 0 0 rgba(206,0,0,0)); animation: ivBloom 2.2s ease .6s forwards; }
.iv-a { opacity: 0; transform-box: fill-box; transform-origin: center; animation: ivIn .75s cubic-bezier(.2,.9,.25,1.1) .1s forwards; }
.iv-b { opacity: 0; transform-box: fill-box; transform-origin: center; animation: ivSlot .5s cubic-bezier(.2,1.4,.4,1) .6s forwards; }
.iv-shine { opacity: 0; animation: ivShine .9s ease-in-out .95s forwards; }
.iv-glow { position: absolute; top: 28%; left: 52%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(206,0,0,.16), rgba(206,0,0,0) 62%); opacity: 0; animation: ivGlow 2s ease .6s forwards; pointer-events: none; }
.iv-l { opacity: 0; transform-box: fill-box; transform-origin: center bottom; animation: ivLetter .5s cubic-bezier(.2,.8,.3,1) forwards; animation-delay: calc(1.05s + var(--i) * .07s); }
.iv-tag { opacity: 0; animation: ivFade .7s ease 1.65s forwards; }
@keyframes ivIn { from { opacity: 0; transform: scale(.72); filter: blur(14px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ivSlot { from { opacity: 0; transform: translate(60px, 50px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ivShine { 0% { opacity: 1; transform: translateX(0) skewX(-18deg); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(1500px) skewX(-18deg); } }
@keyframes ivGlow { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes ivBloom { 0% { filter: drop-shadow(0 0 0 rgba(206,0,0,0)); } 20% { filter: drop-shadow(0 6px 22px rgba(206,0,0,.35)); } 100% { filter: drop-shadow(0 0 0 rgba(206,0,0,0)); } }
@keyframes ivLetter { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes ivFade { to { opacity: 1; } }
@keyframes ivFly { 0% { transform: scale(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(16); opacity: 0; } }
.intro.reduce .iv-logo { animation: none; }
.intro.reduce .iv-a, .intro.reduce .iv-b, .intro.reduce .iv-l, .intro.reduce .iv-tag { animation-duration: .01s; animation-delay: 0s; }
.intro.reduce .iv-shine, .intro.reduce .iv-glow { display: none; }

/* =====================================================================
   Instagram-style app (phones) + feed / profile / stories (all sizes)
   ===================================================================== */
.ig-top, .ig-nav { display: none; }
@media (max-width: 760px) {
  body.ig .top, body.ig .foot { display: none !important; }
  body.ig .ig-top { display: flex; position: sticky; top: 0; z-index: 30; align-items: center; justify-content: space-between; height: 54px; padding: 0 12px; padding-top: env(safe-area-inset-top); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); box-sizing: content-box; }
  body.ig .ig-nav { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 40; height: 52px; padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,.98); border-top: 1px solid var(--rule); justify-content: space-around; align-items: center; box-sizing: content-box; }
  body.ig #main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.ig .wa-fab-w { bottom: calc(66px + env(safe-area-inset-bottom)); }
  body.ig .page { padding-top: 18px; }
  body.ig .inst-banner { margin-top: 0; }
}
.ig-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.ig-logo b { font-family: var(--f-latin); font-weight: 500; letter-spacing: .3em; font-size: 15px; }
.ig-top-a { display: flex; gap: 4px; }
.ig-icon { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; background: none; border: 0; color: var(--ink); cursor: pointer; border-radius: 50%; text-decoration: none; }
.ig-icon:active { transform: scale(.9); }
.ig-badge { position: absolute; top: 2px; inset-inline-end: 0; min-width: 18px; height: 18px; border-radius: 99px; background: #ED4956; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; }
.ig-tab { position: relative; display: grid; place-items: center; width: 52px; height: 48px; color: var(--ink); background: none; border: 0; cursor: pointer; text-decoration: none; }
.ig-tab:active { transform: scale(.88); }
.ig-tab.me .avatar { outline: 1.5px solid transparent; outline-offset: 2px; }
.ig-tab.me.on .avatar { outline-color: var(--ink); }
.ig-dot { position: absolute; bottom: 7px; left: 50%; margin-left: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: #ED4956; }

/* sheets */
.sheet-back { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .2s ease; }
.sheet { width: min(560px, 100%); max-height: 86dvh; background: #fff; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; animation: sheetUp .28s cubic-bezier(.2,.9,.3,1); padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 761px) { .sheet-back { align-items: center; } .sheet { border-radius: 16px; } }
.sheet-grab { width: 40px; height: 4px; border-radius: 4px; background: #d6d6d6; margin: 8px auto 4px; flex: none; }
.sheet-h { text-align: center; font-size: 16px; margin: 4px 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.sheet-body { overflow: auto; flex: 1; padding: 4px 14px; }
.sheet-body.pad { padding: 12px 16px; }
.sheet-foot { display: flex; gap: 8px; padding: 10px 16px 14px; }
.sheet-empty { text-align: center; color: var(--ink-3); padding: 30px 10px; }
.sheet-quick { display: flex; justify-content: space-around; padding: 6px 10px; border-top: 1px solid var(--rule); }
.sheet-quick button { background: none; border: 0; font-size: 24px; cursor: pointer; padding: 4px; }
.sheet-in { display: flex; align-items: center; gap: 10px; padding: 8px 12px 10px; border-top: 1px solid var(--rule); }
.sheet-in input { flex: 1; border: 1px solid var(--rule); border-radius: 99px; padding: 10px 14px; font: inherit; font-size: 15px; outline: none; }
.sheet-in button { background: none; border: 0; color: #0095F6; font-weight: 700; font: inherit; font-weight: 700; cursor: pointer; }
.sheet-in button:disabled { opacity: .4; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.create-list { list-style: none; margin: 0; padding: 4px 10px; }
.create-list button { display: flex; gap: 14px; align-items: center; width: 100%; padding: 12px 8px; background: none; border: 0; border-bottom: 1px solid var(--paper-2); font: inherit; text-align: start; cursor: pointer; color: var(--ink); }
.create-list .cl-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--paper-2); display: grid; place-items: center; font-size: 22px; flex: none; }
.create-list b { display: block; } .create-list small { color: var(--ink-3); font-size: 13px; }
.cl-go { color: var(--ink-3); font-size: 22px; }

/* feed */
.ig-feed { max-width: 470px; margin: 0 auto; padding: 8px 0 24px; }
@media (min-width: 761px) { .ig-feed { padding-top: 28px; } }
.ig-search { padding: 0 12px 10px; }
.ig-search a { display: block; background: var(--paper-2); border-radius: 10px; padding: 9px 14px; color: var(--ink-3); text-decoration: none; font-size: 15px; }
.ig-post { border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin-bottom: 8px; }
@media (min-width: 761px) { .ig-post { border: 1px solid var(--rule); border-radius: 10px; margin-bottom: 20px; overflow: hidden; } }
.ig-ph { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.ig-av { border-radius: 50%; padding: 2px; display: inline-flex; }
.ig-av.ring { background: conic-gradient(from 200deg, #E8A93A, #CE0000, #9B2335, #E8A93A); }
.ig-av.ring .avatar { border: 2px solid #fff; }
.ig-name { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.ig-sub { display: block; color: var(--ink-2); font-size: 12px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.ig-verified { display: inline-flex; vertical-align: -2px; }
.ig-menu-w { position: relative; display: flex; align-items: center; }
.ig-menu { position: absolute; top: 40px; inset-inline-end: 0; z-index: 20; background: #fff; border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.14); min-width: 200px; overflow: hidden; }
.ig-menu > * { display: block; width: 100%; padding: 12px 14px; background: none; border: 0; border-bottom: 1px solid var(--paper-2); text-align: start; font: inherit; color: var(--ink); text-decoration: none; cursor: pointer; }
.ig-menu .danger { color: #ED4956; }
.ig-report { background: none; border: 0; color: var(--ink-3); cursor: pointer; padding: 6px; font-size: 13px; }
.ig-media { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; color: #fff; cursor: pointer; overflow: hidden; user-select: none; -webkit-user-select: none; }
@media (max-width: 760px) { .ig-media { aspect-ratio: 4 / 4.2; } }
.ig-title { position: absolute; top: 18%; inset-inline: 10%; text-align: center; font-size: clamp(20px, 6vw, 28px); font-weight: 700; line-height: 1.4; margin: 0; text-shadow: 0 2px 16px rgba(0,0,0,.25); }
.ig-play { position: absolute; bottom: 24%; width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); border: 1.5px solid rgba(255,255,255,.55); display: grid; place-items: center; transition: transform .15s; }
.ig-play.on { background: rgba(255,255,255,.28); }
.ig-media:active .ig-play { transform: scale(.94); }
.ig-bars { position: absolute; bottom: 9%; display: flex; gap: 3px; align-items: center; height: 34px; }
.ig-bars i { width: 3px; height: 30%; border-radius: 2px; background: rgba(255,255,255,.7); }
.ig-bars.on i { animation: igBar 0.9s ease-in-out infinite; animation-delay: var(--d); }
@keyframes igBar { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.ig-rate { position: absolute; top: 12px; inset-inline-end: 12px; background: rgba(0,0,0,.35); border-radius: 99px; padding: 4px 10px; font-size: 13px; color: #FFD66B; }
.ig-rate b { color: #fff; }
.ig-dur { position: absolute; bottom: 12px; inset-inline-start: 12px; font-size: 12px; background: rgba(0,0,0,.3); border-radius: 99px; padding: 2px 8px; }
.ig-prog { position: absolute; bottom: 0; inset-inline-start: 0; height: 3px; background: #fff; transition: width .25s linear; }
.kar-dl { margin-top: 10px; gap: 8px; flex-wrap: wrap; }
/* the seek strip: a thin line that grows under the finger into a scrubber with a knob */
.ig-seek { position: absolute; bottom: 0; inset-inline: 0; height: 26px; cursor: pointer; touch-action: none; z-index: 2; }
.ig-seek::before { content: ''; position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: rgba(255,255,255,.3); }
.ig-seek-fill { position: absolute; bottom: 0; inset-inline-start: 0; height: 3px; background: #fff; transition: height .12s; }
.ig-seek-knob { position: absolute; bottom: -4px; width: 11px; height: 11px; margin-inline-start: -5.5px; border-radius: 50%; background: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.ig-seek:hover::before, .ig-seek:active::before, .ig-seek:hover .ig-seek-fill, .ig-seek:active .ig-seek-fill { height: 5px; }
.ig-seek:hover .ig-seek-knob, .ig-seek:active .ig-seek-knob { opacity: 1; transform: scale(1); bottom: -3px; }
@media (hover: none) { .ig-seek-knob { opacity: .9; transform: none; bottom: -4px; } }
.ig-burst { position: absolute; display: grid; place-items: center; animation: igBurst .9s ease forwards; pointer-events: none; }
.ig-burst svg { width: 110px; height: 110px; filter: drop-shadow(0 4px 20px rgba(0,0,0,.25)); }
.ig-burst path { fill: #fff; stroke: #fff; }
@keyframes igBurst { 0% { transform: scale(0); opacity: 0; } 15% { transform: scale(1.15); opacity: 1; } 30% { transform: scale(.95); } 45% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: scale(1) translateY(-30px); opacity: 0; } }
.ig-actions { display: flex; align-items: center; gap: 2px; padding: 4px 6px 0; }
.ig-actions .end { margin-inline-start: auto; }
.ig-icon.liked { animation: igPop .35s ease; }
@keyframes igPop { 50% { transform: scale(1.25); } }
.ig-stars { padding: 0 12px; }
.ig-likes { margin: 2px 12px; font-weight: 700; font-size: 14px; }
.ig-cap { margin: 4px 12px; font-size: 14px; line-height: 1.55; }
.ig-cap a { color: var(--ink); text-decoration: none; }
.ig-cap.small { font-size: 13.5px; }
.ig-tn { margin: 6px 12px; font-size: 14px; background: #FFF8EC; border-radius: 8px; padding: 6px 10px; }
.ig-tn-edit { padding: 0 12px; }
.ig-tn-edit .trainer-note:not(.editing) { display: none; }
.ig-more, .ig-add { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--ink-3); font: inherit; font-size: 14px; padding: 4px 12px; cursor: pointer; text-align: start; }
.ig-time { margin: 4px 12px 0; color: var(--ink-3); font-size: 11.5px; }
.ig-skel { height: 520px; margin: 8px 12px 20px; border-radius: 10px; background: linear-gradient(90deg, #f3f3f3, #fafafa, #f3f3f3); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
.ig-empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 50px 24px; }
.ig-empty > span { font-size: 44px; } .ig-empty p { color: var(--ink-2); margin: 0 0 6px; }
.ig-loadmore { display: block; margin: 10px auto; }
.ig-c { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; }
.ig-c p { margin: 2px 0 0; font-size: 14px; }
.ig-c b { font-size: 14px; }
.ig-c.pinned { background: #FFF8EC; border-radius: 10px; padding: 10px; margin: 6px 0; }

/* stories bar */
.stories { display: flex; gap: 14px; overflow-x: auto; padding: 8px 12px 12px; scrollbar-width: none; border-bottom: 1px solid var(--rule); margin-bottom: 10px; }
.stories::-webkit-scrollbar { display: none; }
.st-item { display: grid; justify-items: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 0; flex: none; width: 70px; font: inherit; color: var(--ink); }
.st-ring { position: relative; padding: 2.5px; border-radius: 50%; background: conic-gradient(from 200deg, #E8A93A, #CE0000, #9B2335, #E8A93A); display: inline-flex; }
.st-ring .avatar, .st-ring .st-chal { border: 2.5px solid #fff; }
.st-ring.seen { background: #d4d4d4; }
.st-ring.gold { background: conic-gradient(#F2C14E, #D4891C, #F2C14E); }
.st-ring.me { background: none; }
.st-ring.me .avatar { border-color: transparent; }
.st-plus { position: absolute; bottom: 0; inset-inline-end: 0; width: 22px; height: 22px; border-radius: 50%; background: #0095F6; color: #fff; display: grid; place-items: center; font-weight: 700; border: 2.5px solid #fff; line-height: 1; }
.st-chal { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; background: #1B1C20; }
.st-name { font-size: 12px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-empty { align-self: center; padding-inline-start: 4px; }

/* story viewer */
.story { position: fixed; inset: 0; z-index: 500; color: #fff; display: flex; flex-direction: column; animation: fadeIn .2s ease; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
@media (min-width: 761px) { .story { inset: 0 auto; left: 0; right: 0; width: 420px; margin: 0 auto; box-shadow: 0 0 0 100vmax rgba(0,0,0,.85); } }
.story-bars { display: flex; gap: 4px; padding: 10px 10px 0; direction: ltr; }
[dir="rtl"] .story-bars { direction: rtl; }
.story-bars i { flex: 1; height: 2.5px; background: rgba(255,255,255,.35); border-radius: 2px; overflow: hidden; }
.story-bars b { display: block; height: 100%; background: #fff; }
.story-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.story-h b { font-size: 14px; display: inline-flex; gap: 4px; align-items: center; }
.story-h span { font-size: 12.5px; opacity: .75; }
.story-chal { font-size: 22px; }
.story-x { margin-inline-start: auto; background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; padding: 6px; }
.story-body { flex: 1; display: grid; place-items: center; padding: 20px; position: relative; user-select: none; -webkit-user-select: none; }
.story-take { display: grid; justify-items: center; gap: 22px; text-align: center; }
.story-take p { font-size: 26px; font-weight: 700; margin: 0; line-height: 1.5; text-shadow: 0 2px 16px rgba(0,0,0,.25); }
.story-take h2 { color: #fff; margin: 0; font-size: 28px; }
.story-take small { opacity: .7; }
.story-take .ig-bars { position: static; height: 48px; }
.story-big { font-size: 64px; }
.story-text { font-size: 26px; font-weight: 700; text-align: center; line-height: 1.6; white-space: pre-wrap; margin: 0; }
.story-img { max-width: 100%; max-height: 72dvh; border-radius: 10px; object-fit: contain; }
.story-cap { position: absolute; bottom: 20px; inset-inline: 16px; text-align: center; background: rgba(0,0,0,.4); border-radius: 10px; padding: 8px 12px; margin: 0; }
.story-f { display: flex; align-items: center; gap: 10px; padding: 10px 14px 16px; min-height: 60px; }
.story-btn { flex: 1; text-align: center; border: 1.5px solid rgba(255,255,255,.6); border-radius: 99px; padding: 10px; color: #fff; text-decoration: none; font-weight: 600; }
.story-act { background: none; border: 0; color: #fff; cursor: pointer; }
.story-prev { border-radius: 14px; aspect-ratio: 9 / 12; max-height: 46dvh; display: grid; place-items: center; padding: 20px; margin: 10px 0; }
.story-prev textarea { width: 100%; height: 100%; background: none; border: 0; color: #fff; font: inherit; font-size: 22px; font-weight: 700; text-align: center; resize: none; outline: none; }
.story-prev textarea::placeholder { color: rgba(255,255,255,.6); }
.bg-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--rule); cursor: pointer; }
.bg-dot.on { box-shadow: 0 0 0 2px var(--ink); }

/* profile */
.ig-prof { max-width: 640px; margin: 0 auto; padding: 14px 0 24px; }
.igp-head { display: flex; align-items: center; gap: 22px; padding: 6px 16px; }
.igp-av { flex: none; }
.igp-stats { flex: 1; display: flex; justify-content: space-around; list-style: none; margin: 0; padding: 0; text-align: center; }
.igp-stats li { display: grid; }
.igp-stats b { font-size: 18px; }
.igp-stats span { font-size: 13px; color: var(--ink-2); }
.igp-info { padding: 10px 16px 0; }
.igp-info h1 { font-size: 16px; margin: 0; display: flex; gap: 6px; align-items: center; }
.igp-role { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; }
.igp-bio { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; }
.igp-btns { display: flex; gap: 6px; padding: 12px 16px; align-items: center; }
.igp-btns > * { flex: 1; }
.igp-btns .ig-report { flex: 0 0 auto; }
.igp-btn { display: block; text-align: center; background: #EFEFEF; border: 0; border-radius: 8px; padding: 8px 10px; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; cursor: pointer; }
.igp-btns .btn { width: 100%; border-radius: 8px; }
.igp-hl { display: flex; gap: 14px; overflow-x: auto; padding: 6px 16px 12px; text-decoration: none; color: var(--ink); scrollbar-width: none; }
.igp-hl::-webkit-scrollbar { display: none; }
.igp-hl-i { display: grid; justify-items: center; gap: 4px; width: 66px; flex: none; }
.igp-hl-i small { font-size: 11.5px; text-align: center; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igp-tabs { display: flex; justify-content: center; border-top: 1px solid var(--rule); }
.igp-tabs span { padding: 10px 30px; border-top: 1.5px solid var(--ink); margin-top: -1px; }
.igp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.igp-tile { position: relative; aspect-ratio: 1; border: 0; color: #fff; cursor: pointer; padding: 10px 8px; display: grid; place-items: center; overflow: hidden; font: inherit; }
.igp-tile span { font-size: 12.5px; font-weight: 700; line-height: 1.35; text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.igp-tile-ic { position: absolute; top: 6px; inset-inline-end: 8px; font-style: normal; font-size: 13px; opacity: .9; }
.igp-tile em { position: absolute; bottom: 6px; inset-inline-start: 8px; font-style: normal; font-size: 11.5px; color: #FFD66B; }
.igp-lock { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 40px 20px; }
.igp-lock > span { font-size: 40px; }

/* activity */
.ig-h1 { font-size: 22px; padding: 0 14px; margin: 6px 0 12px; }
.ig-sec { font-size: 15px; padding: 0 14px; margin: 14px 0 4px; }
.ig-acts { list-style: none; margin: 0; padding: 0; }
.ig-acts button { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px 14px; background: none; border: 0; text-align: start; font: inherit; cursor: pointer; color: var(--ink); }
.ig-acts li.new button { background: #F5F9FF; }
.ig-act-av { position: relative; flex: none; display: block; } .ig-act-av .avatar { display: block; }
.ig-act-bd { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); font-size: 11px; line-height: 1; display: grid; place-items: center; font-style: normal; }
.bell-pop .ig-act-bd { width: 17px; height: 17px; font-size: 10px; }
.ig-act-th { flex: none; border-radius: 6px; object-fit: cover; background: var(--paper-2); align-self: center; }
.ig-act-th.ph { display: grid; place-items: center; font-size: 18px; }
.ig-act-th.sth { border-radius: 8px; color: #fff; }
.ig-act-th.sth.txt { display: block; overflow: hidden; font-size: 7px; line-height: 1.3; padding: 4px; text-align: center; word-break: break-word; }
.ig-acts[dir="ltr"] button, .bell-pop ul[dir="ltr"] li button { text-align: left; }
.ig-acts[dir="ltr"] .grow, .bell-pop ul[dir="ltr"] .grow { min-width: 0; }
.ig-act-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; font-size: 20px; flex: none; }
.ig-acts b { font-size: 14px; } .ig-acts span { font-size: 14px; } .ig-acts small { color: var(--ink-3); font-size: 12.5px; }
.ig-activity .box { display: grid; gap: 8px; }
/* same order as Instagram regardless of language: home on the left, profile on the right */
.ig-nav, .ig-top { direction: ltr; }
/* labelled tab bar */
@media (max-width: 760px) { body.ig .ig-nav { height: 58px; } body.ig #main { padding-bottom: calc(70px + env(safe-area-inset-bottom)); } body.ig .wa-fab-w { bottom: calc(72px + env(safe-area-inset-bottom)); } }
.ig-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 62px; height: 56px; color: var(--ink-3); }
.ig-tab.on { color: var(--ink); }
.ig-tab small { font-size: 10.5px; font-weight: 600; line-height: 1; }
.ig-tab.on small { color: var(--ink); }
.ig-rec { width: 42px; height: 30px; border-radius: 10px; background: var(--red); display: grid; place-items: center; box-shadow: 0 3px 10px rgba(206,0,0,.35); }
.ig-tab.rec small { color: var(--red); }
.ig-top-a .ig-badge { top: 3px; }
/* home feed reads left-to-right like Instagram; Arabic captions still flow right-to-left */
.ig-feed:not(.ig-activity) { direction: ltr; }
.ig-feed:not(.ig-activity) .story-bars { direction: ltr; }
.ig-feed .ig-title, .ig-feed [dir="auto"] { unicode-bidi: plaintext; }
.igp-user { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; direction: ltr; text-align: start; }
.uname-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.uname-in { display: flex; align-items: center; flex: 1; min-width: 200px; border: 1px solid var(--rule); border-radius: var(--r-s); padding-left: 10px; background: #fff; }
.uname-in i { font-style: normal; color: var(--ink-3); }
.uname-in .in { border: 0; flex: 1; padding-left: 2px; }
.err-t { color: #C0392B; } .ok-t { color: var(--ok); }
.ig-ph .grow, .ig-c .grow, .ig-acts .grow, .create-list .grow { flex: 1; min-width: 0; }
.ig-ph .ig-sub { text-align: left; }
/* share with friends */
.ig-share { direction: ltr; }
.ig-share-search { padding: 4px 14px 10px; }
.ig-share-search input { width: 100%; border: 0; background: #EFEFEF; border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 15px; outline: none; }
.ig-share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 6px; padding: 6px 0 14px; }
.ig-share-p { display: grid; justify-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); }
.ig-share-av { position: relative; display: inline-flex; }
.ig-share-av i { position: absolute; bottom: 0; right: 0; width: 22px; height: 22px; border-radius: 50%; background: #0095F6; color: #fff; font-style: normal; font-size: 13px; display: none; place-items: center; border: 2px solid #fff; }
.ig-share-p.on .ig-share-av i { display: grid; }
.ig-share-p small { font-size: 12.5px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-share-f { padding: 10px 14px 14px; border-top: 1px solid var(--rule); }
.ig-send { width: 100%; background: #0095F6; color: #fff; border: 0; border-radius: 10px; padding: 12px; font: inherit; font-weight: 700; cursor: pointer; }
.ig-send:disabled { opacity: .6; }
.ig-share-link { display: grid; justify-items: center; gap: 4px; background: none; border: 0; font: inherit; font-size: 12.5px; cursor: pointer; margin: 0 auto; color: var(--ink); }
.ig-share-link span { width: 52px; height: 52px; border-radius: 50%; background: #EFEFEF; display: grid; place-items: center; font-size: 22px; }
/* post cover photos */
.ig-media.has-cover, .igp-tile.has-cover { background-size: cover; background-position: center; }
.rec-cover { display: flex; gap: 12px; align-items: center; margin: 12px 0 4px; padding: 10px; border: 1px dashed var(--rule); border-radius: 12px; }
.rec-cover img, .rec-cover-ph { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; }
.rec-cover-ph { display: grid; place-items: center; background: var(--paper-2); font-size: 26px; }
.rec-cover b { display: block; } .rec-cover small { display: block; color: var(--ink-3); font-size: 12.5px; margin-bottom: 6px; }
.ig-menu span { display: block; } .ig-menu span button { display: block; width: 100%; padding: 12px 14px; background: none; border: 0; text-align: start; font: inherit; cursor: pointer; border-bottom: 1px solid var(--paper-2); }
.igp-btns .igp-rep { flex: 0 0 auto; color: #C0392B; }
.ig-report.sm { font-size: 12px; color: var(--ink-3); }
/* social links */
.social-in { display: grid; gap: 4px; margin-bottom: 14px; }
.social-in .f { margin-bottom: 6px; }
.handle-in { display: flex; align-items: center; border: 1px solid var(--rule); border-radius: var(--r-s); padding-left: 10px; background: #fff; }
.handle-in i { font-style: normal; color: var(--ink-3); }
.handle-in .in { border: 0; flex: 1; padding-left: 2px; }
.igp-social { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.igp-soc { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 99px; background: #EFEFEF; color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600; direction: ltr; }
.igp-soc.ig { background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF); color: #fff; }
.igp-soc.tt { background: #000; color: #fff; }
.f .handle-in { display: flex; flex-direction: row; align-items: center; margin: 0; font-weight: 400; }
.f .handle-in i { display: inline; margin: 0; }
.f .handle-in .in { width: auto; min-width: 0; flex: 1; margin: 0; }
.ig-refresh { display: grid; place-items: center; height: 44px; }
.ig-refresh i { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid #ddd; border-top-color: var(--ink); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- follow / following ---------- */
.follow-btn { flex: none; border: 0; border-radius: 8px; background: #0095F6; color: #fff; font: inherit; font-weight: 600; font-size: 14px; padding: 7px 18px; cursor: pointer; white-space: nowrap; }
.follow-btn:hover { background: #1877F2; }
.follow-btn.on { background: #EFEFEF; color: var(--ink); }
.follow-btn.on:hover { background: #DBDBDB; }
.follow-btn.sm { font-size: 13px; padding: 5px 14px; }
.follow-btn:disabled { opacity: .6; cursor: default; }
.igp-btns .follow-btn { flex: 1; padding: 8px 12px; }
.igp-cnt { display: grid; background: transparent; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: center; }
.igp-cnt b { font-size: 18px; }
.fl-list { list-style: none; margin: 0; padding: 0; }
.fl-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.fl-list .person { flex: 1; }
.fl-list .person span { display: grid; min-width: 0; }
.fl-list .person small { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igp-cnt:disabled { cursor: default; }
.igp-fby { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink-2); text-align: start; cursor: pointer; }
.igp-fby b { color: var(--ink); font-weight: 600; }
.igp-fby-av { display: inline-flex; flex: none; }
.igp-fby-av > * { border: 2px solid var(--paper, #fff); border-radius: 50%; box-sizing: content-box; }
.igp-fby-av > * + * { margin-left: -8px; }
.unf-sheet { padding-bottom: 14px; text-align: center; }
.unf-q { margin: 6px 16px 14px; font-size: 15px; }
.unf-sheet button { display: block; width: 100%; border: 0; border-top: 1px solid var(--rule); background: none; padding: 14px; font: inherit; font-size: 15px; cursor: pointer; }
.unf-yes { color: #ED4956; font-weight: 700; }
.ig-prof .igp-info h1 { justify-content: flex-start; text-align: left; }
.ig-prof .igp-bio, .ig-prof .igp-role { text-align: left; }
.igp-first { margin-top: 8px; border-radius: 8px; }

/* stories: own story, likes, viewers */
.st-item { position: relative; }
.st-me { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; }
.st-item > .st-plus { position: absolute; top: 44px; inset-inline-end: 2px; cursor: pointer; padding: 0; font: inherit; font-weight: 700; z-index: 1; }
.story-who { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: #fff; padding: 0; cursor: pointer; font: inherit; min-width: 0; }
.story-who b { font-size: 14px; display: inline-flex; gap: 4px; align-items: center; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-act { margin-inline-start: auto; }
.story-act svg { width: 30px; height: 30px; }
.story-act.on svg { animation: likePop .35s ease; }
@keyframes likePop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.story-pop { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; animation: igBurst .9s ease forwards; }
.story-pop svg { width: 110px; height: 110px; filter: drop-shadow(0 4px 20px rgba(0,0,0,.3)); }
.story-seen { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: #fff; font: inherit; font-size: 14px; cursor: pointer; padding: 6px 0; }
.story-del { margin-inline-start: auto; background: none; border: 0; color: #fff; opacity: .85; font: inherit; font-size: 14px; cursor: pointer; padding: 6px; }
.story-sheet { z-index: 600; color: var(--ink); }
.sv-likes { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 8px; font-size: 14px; }
.sv-likes svg, .sv-heart svg { width: 18px; height: 18px; }
.sv-heart { flex: none; }
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-list button { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 8px 0; font: inherit; color: var(--ink); cursor: pointer; text-align: start; }
.sp-list .grow { display: grid; min-width: 0; }
.sp-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-list small { color: var(--ink-3); }
.sp-thumb { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.sp-add { width: 30px; height: 30px; border-radius: 50%; background: #0095F6; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.rec-story { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--paper-2); }
.rec-story span { flex: 1; min-width: 180px; font-size: 14px; }
.story-vid { max-width: 100%; max-height: 74dvh; border-radius: 10px; background: #000; pointer-events: none; }
.story-unmute { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.55); color: #fff; border: 0; border-radius: 99px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; z-index: 2; }
.follow-btn.on:disabled[title] { opacity: 1; }
.ig-uposts-h { display: flex; align-items: center; gap: 10px; padding: 8px 6px; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.ig-uposts-h span { display: grid; line-height: 1.25; }
.ig-uposts-h small { color: var(--ink-3); font-size: 12px; }
.ig-uposts-h b { font-size: 15px; }
.ig-back { background: none; border: 0; font-size: 30px; line-height: 1; padding: 0 10px 4px; cursor: pointer; color: var(--ink); }
.sheet { position: relative; }
.sheet-x { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #EFEFEF; color: var(--ink); font-size: 15px; cursor: pointer; display: grid; place-items: center; z-index: 2; }
.tester-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 450; display: flex; align-items: center; gap: 10px; background: #1B1C20; color: #fff; padding: 8px 8px 8px 14px; border-radius: 99px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 13.5px; white-space: nowrap; max-width: calc(100% - 24px); }
.tester-bar button { background: #CE0000; color: #fff; border: 0; border-radius: 99px; padding: 7px 12px; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 760px) { body.ig .tester-bar { bottom: calc(68px + env(safe-area-inset-bottom)); } }
.igp-btns { flex-wrap: wrap; }

/* ---------- TextLab: course scripts with switchable layers and personal marks ---------- */
.tl { margin: 10px 0 24px; }
.tl-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; position: sticky; top: 0; z-index: 15; background: var(--paper, #fff); }
@media (max-width: 760px) { body.ig .tl:not(.stage) .tl-bar { top: calc(54px + env(safe-area-inset-top)); } }
.tl-sp { flex: 1; }
.tl-tog { border: 1.5px solid var(--rule); background: #fff; color: var(--ink-2); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tl-tog.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tl-tog.tl-edit { border-color: #0A66C2; color: #0A66C2; }
.tl-tog.tl-edit.on { background: #0A66C2; color: #fff; }
.tl-hint { margin: 2px 0 8px; font-size: 13.5px; color: #0A66C2; }
.tl-perf { margin: 6px 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--paper-2); font-size: 14.5px; line-height: 1.8; }
.tl-text { line-height: 2.25; }
.tl-text p { margin: 0 0 .9em; }
.tl-unit { white-space: nowrap; }
.tl-w { border-radius: 6px; }
.tl-w.st { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: .08em; text-underline-offset: .3em; font-weight: 700; }
.tl-w.ms { background: rgba(10,102,194,.12); box-shadow: 0 .12em 0 #0A66C2; }
.tl-w.ed { cursor: pointer; outline: 1px dashed rgba(10,102,194,.35); outline-offset: 2px; }
.tl-w.sel { background: rgba(10,102,194,.25); }
.tl-p { color: var(--red); font-family: var(--f-latin); padding: 0 .1em; }
.tl-p.p2 { letter-spacing: -.08em; }
.tl-p.mine { color: #0A66C2; font-weight: 700; }
.tl-chip { display: inline-block; font-size: .55em; line-height: 1.5; vertical-align: .3em; padding: .05em .6em; border-radius: 99px; white-space: nowrap; margin: 0 .15em; font-weight: 600; }
.tl-chip.tr { background: #FDECEC; color: #9B1C1C; }
.tl-chip.mine { background: #E7F0FA; color: #0A66C2; max-width: 14em; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tl-menu { padding: 4px 16px 14px; }
.tl-mh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tl-mh b { font-size: 20px; }
.tl-x { background: #EFEFEF; border: 0; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; }
.tl-row { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-top: 1px solid var(--paper-2); flex-wrap: wrap; }
.tl-row > span:first-child { width: 100%; font-size: 13px; color: var(--ink-3); }
.tl-opt { border: 1.5px solid var(--rule); background: #fff; border-radius: 10px; padding: 7px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.tl-opt.sm { padding: 5px 10px; font-size: 13.5px; }
.tl-opt.on { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.tl-custom { display: inline-flex; gap: 6px; align-items: center; }
.tl-custom .in { width: 120px; padding: 6px 10px; }
.tl-row textarea { width: 100%; }
.tl-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--paper-2); }
.tl-sheet { max-height: 80dvh; overflow: auto; }
/* on a slide (1600×900 canvas) */
.dk-text { padding: 56px 90px 60px; }
.dk-texthead { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.dk-texthead h2 { margin: 0; font-size: 44px; }
.tl.stage { display: flex; flex-direction: column; min-height: 0; flex: 1; margin: 0; position: relative; }
.tl.stage .tl-bar { position: static; padding: 6px 0 10px; gap: 10px; }
.tl.stage .tl-tog { font-size: 20px; padding: 8px 18px; }
.tl.stage .tl-perf { font-size: 22px; margin: 0 0 10px; }
.tl.stage .tl-hint { font-size: 20px; }
.tl.stage .tl-text { flex: 1; overflow: auto; padding-inline-end: 8px; line-height: 2.1; }
.tl-pop { position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,.25); display: grid; place-items: center; border-radius: 12px; }
.tl-pop .tl-menu { background: #fff; border-radius: 18px; width: 760px; max-height: 90%; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); font-size: 20px; padding: 18px 26px; }
.tl-pop .tl-opt { font-size: 20px; padding: 9px 16px; }
.tl-pop .tl-row > span:first-child { font-size: 18px; }
.tl-pop .tl-mh b { font-size: 30px; }
/* course section */
.course-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.course-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; color: var(--ink); text-decoration: none; background: #fff; }
.course-item:hover { border-color: var(--ink-3); }
.course-item .grow { display: grid; gap: 3px; min-width: 0; }
.course-item small { color: var(--ink-3); font-size: 13px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-n { width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.course-go { color: var(--ink-3); }
.course-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 0 0 14px; border-radius: 14px; background: linear-gradient(135deg, #1B1C20, #4A1414); color: #fff; text-decoration: none; }
.course-banner .grow { display: grid; gap: 2px; }
.course-banner small { opacity: .8; font-size: 13px; }
.cb-ic { font-size: 26px; }
.send-st { margin-top: 10px; }
.msg-open { margin-top: 10px; }

@media (max-width: 760px) { .tl:not(.stage) .tl-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; } .tl:not(.stage) .tl-bar::-webkit-scrollbar { display: none; } .tl:not(.stage) .tl-sp { display: none; } }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; align-items: center; }
.presets-h { width: 100%; font-size: 12.5px; color: var(--ink-3); }
.preset { border: 1.5px solid var(--rule); background: #fff; border-radius: 99px; padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.preset.on { background: var(--red); border-color: var(--red); color: #fff; }
/* back buttons */
body.ig .ig-top { justify-content: flex-start; gap: 4px; }
.ig-top .ig-top-a { margin-left: auto; }
.ig-backbtn { background: none; border: 0; padding: 4px 2px 4px 0; margin-left: -4px; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.back-btn { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--rule); background: #fff; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; margin-inline-end: 10px; display: grid; place-items: center; }
.back-btn:hover { border-color: var(--ink-3); }
.ig-c.focus { background: #FFF6D6; border-radius: 10px; box-shadow: 0 0 0 6px #FFF6D6; }

/* v66: positive presets, people filter in student recordings, "recorded" marks */
.preset.pos { border-color: #9ed4ad; color: #1d7a3a; background: #f2fbf4; }
.preset.pos.on { background: #1f9d4c; border-color: #1f9d4c; color: #fff; }
.presets-h + .presets-h, .preset + .presets-h { margin-top: 6px; }
.sub-people { border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; background: #fff; }
.sub-people-h { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.sub-people-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 210px; overflow-y: auto; }
.sp { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--rule); background: #fff; border-radius: 99px; padding: 5px 11px; font: inherit; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.sp.on { background: var(--ink, #111); border-color: var(--ink, #111); color: #fff; }
.sp-new { background: var(--red); color: #fff; border-radius: 99px; min-width: 20px; height: 20px; font-size: 11.5px; display: inline-grid; place-items: center; padding: 0 6px; }
.sp-n { color: var(--ink-3); font-size: 12px; }
.sp.on .sp-n { color: #ddd; }
.sub-who { font-size: 14px; margin: 0 0 10px; }
.done-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: #1d7a3a; background: #e8f6ec; border: 1px solid #b9e2c5; border-radius: 99px; padding: 2px 8px; white-space: nowrap; flex: none; }
.mcard { position: relative; }
.mcard-done { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; }
.course-item .done-tag { margin-inline-start: 6px; }

/* v67: two-part trainer notes */
.note-ed { display: grid; gap: 10px; margin: 6px 0 10px; }
.note-box { border-radius: 12px; padding: 10px 12px; border: 1.5px solid; }
.note-box.good { border-color: #b9e2c5; background: #f3fbf5; }
.note-box.dev { border-color: #f1d3a6; background: #fff8ee; }
.note-h { display: block; font-size: 14px; margin-bottom: 4px; }
.note-box.good .note-h { color: #1d7a3a; }
.note-box.dev .note-h { color: #a35a00; }
.note-ed textarea.in { min-height: 76px; background: #fff; width: 100%; }
.note-ed .presets { margin: 4px 0 8px; }
.note-view { display: grid; gap: 8px; margin-top: 6px; }
.note-view p { margin: 0; white-space: pre-line; }
.note-disc { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.ig-c .note-view { font-size: 14px; }

/* v68: student recordings as folding rows */
.sub-rows { display: grid; gap: 8px; }
.sub-row { border: 1px solid var(--rule); border-radius: 12px; background: #fff; overflow: hidden; scroll-margin-top: 80px; }
.sub-row.open { border-color: var(--ink-3); box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.sub-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: 0; font: inherit; text-align: start; cursor: pointer; color: inherit; }
.sub-head:hover { background: #fafafa; }
.sub-kind { flex: none; font-size: 12px; font-weight: 600; background: #f1f1f1; border-radius: 8px; padding: 3px 8px; color: var(--ink-2); }
.sub-what { display: flex; flex-direction: column; min-width: 0; }
.sub-what b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-what small { color: var(--ink-3); font-size: 12.5px; }
.sub-chev { flex: none; color: var(--ink-3); }
.sub-body { padding: 4px 12px 12px; border-top: 1px solid var(--rule); }
.sub-text { margin: 10px 0; }
.sub-text-in { margin-top: 8px; max-height: 60vh; overflow-y: auto; border: 1px solid var(--rule); border-radius: 10px; padding: 10px; background: #fcfcfc; }

/* v69: studio edit timeline and level presets */
.lvl-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.lvl-presets button { font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--booth-3); background: var(--booth-2); color: var(--booth-ink-2); cursor: pointer; }
.lvl-presets button.on { background: var(--booth-ink); color: var(--booth); border-color: var(--booth-ink); }
.lvl-presets button:disabled { opacity: .45; cursor: default; }
.etl { margin-top: 16px; background: var(--booth-2); border: 1px solid var(--booth-3); border-radius: 14px; padding: 12px; color: var(--booth-ink); user-select: none; -webkit-user-select: none; }
.etl-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.etl-zoom { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; font-size: 13px; color: var(--booth-ink-2); }
.etl-zoom button, .etl-undo, .etl-tools button { font: inherit; font-size: 13px; background: var(--booth-3); color: var(--booth-ink); border: 0; border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.etl-zoom button { width: 30px; padding: 5px 0; }
.etl-zoom button:disabled, .etl-undo:disabled, .etl-tools button:disabled { opacity: .4; cursor: default; }
.etl-scroll { overflow-x: auto; overflow-y: hidden; border-radius: 8px; background: #141518; }
.etl-inner { position: relative; padding-bottom: 4px; }
.etl-row { display: flex; align-items: stretch; border-bottom: 1px solid #22242a; }
.etl-name { flex: none; width: 72px; font-size: 11.5px; color: var(--booth-ink-2); display: flex; align-items: center; padding: 0 6px; position: sticky; left: 0; background: #141518; z-index: 3; direction: rtl; }
.etl-lane { position: relative; height: 38px; flex: none; cursor: text; touch-action: pan-x; }
.etl-row.etl-mine .etl-lane { height: 52px; background: repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.03) 39px 40px); }
.etl-row.etl-locked .etl-lane { opacity: .9; }
.etl-row.etl-locked canvas { position: absolute; left: 0; top: 2px; }
.etl-lock { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 11px; opacity: .6; }
.etl-video { background: repeating-linear-gradient(90deg, #2c2f37 0 46px, #23252c 46px 48px); }
.etl-video span { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 11px; opacity: .6; }
.etl-ruler .etl-lane { height: 22px; cursor: pointer; }
.etl-ruler i { position: absolute; top: 0; bottom: 0; border-left: 1px solid #3a3d45; }
.etl-ruler i span { position: absolute; left: 3px; top: 3px; font-size: 10px; color: var(--booth-ink-2); font-style: normal; white-space: nowrap; }
.etl-clip { position: absolute; top: 4px; height: 44px; background: rgba(232,40,40,.22); border: 1.5px solid rgba(255,90,90,.85); border-radius: 6px; overflow: hidden; cursor: grab; touch-action: none; }
.etl-clip.on { background: rgba(232,40,40,.6); border-color: #fff; z-index: 2; }
.etl-clip:active { cursor: grabbing; }
.etl-h { position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize; z-index: 2; }
.etl-h.l { left: 0; } .etl-h.r { right: 0; }
.etl-clip.on .etl-h { background: rgba(255,255,255,.35); }
.etl-clip.on .etl-h.l { border-radius: 4px 0 0 4px; } .etl-clip.on .etl-h.r { border-radius: 0 4px 4px 0; }
.etl-head { position: absolute; top: 0; bottom: 0; width: 2px; background: #ffd23f; pointer-events: none; z-index: 4; }
.etl-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.etl-tools .small { color: var(--booth-ink-2); margin-inline-end: 4px; }
.etl-tools .x { background: #5a1d1d; }
.etl-help { margin: 10px 0 0; font-size: 12.5px; color: var(--booth-ink-2); line-height: 1.7; }
@media (max-width: 640px) { .etl { padding: 10px 8px; } .etl-name { font-size: 10.5px; } }
.mcard-draft { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; font-size: 11.5px; }

/* v73: ads in the feed play over their picture; studio sharing and mute */
.ig-adv { position: absolute; inset: 0; background: #000; display: grid; place-items: center; }
.ig-adv video, .ig-adv img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ig-media.is-ad .ig-title { background: rgba(0,0,0,.45); padding: 6px 10px; border-radius: 10px; transition: opacity .3s; }
.ig-media.vid-on .ig-title, .ig-media.vid-on .ig-play { opacity: 0; }
.ig-media.vid-on:hover .ig-play { opacity: .8; }
.studio-share { display: flex; gap: 8px; flex-wrap: wrap; }
.studio-share.sec { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--booth-3); }
.studio-done { margin: 0 0 10px; font-size: 13.5px; color: #7fd69a; }
.studio-mute { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.studio-mute .switch { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.studio-mute .switch input { width: 18px; height: 18px; accent-color: var(--red); }
.story-ad { position: absolute; inset: 0; display: grid; place-items: center; background: #000; }
.story-ad video { width: 100%; max-height: 100%; object-fit: contain; }
.story-ad p { position: absolute; bottom: 90px; inset-inline: 16px; text-align: center; color: #fff; font-weight: 700; margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.studio-all { width: 100%; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; } .studio-all small { font-weight: 400; opacity: .8; }
.rec-all { width: 100%; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; } .rec-all small { font-weight: 400; opacity: .85; }
.update-bar { position: fixed; z-index: 9999; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; background: #1B1C20; color: #fff; padding: 10px 12px 10px 16px; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.25); font-size: 14px; width: max-content; max-width: calc(100vw - 32px); }
.update-bar button { font: inherit; font-weight: 700; background: var(--red); color: #fff; border: 0; border-radius: 10px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
/* v77: grid cover picker for video takes */
.fp-back { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; }
.fp { background: #fff; color: var(--ink); border-radius: 16px; padding: 16px; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; display: grid; gap: 10px; }
.fp small { color: var(--ink-3); line-height: 1.6; }
.fp-frame { aspect-ratio: 1 / 1; max-height: 52dvh; margin: 0 auto; width: 100%; max-width: 52dvh; background: #000; border-radius: 10px; overflow: hidden; }
.fp-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp input[type=range] { width: 100%; accent-color: var(--red); }
.fp-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hdr-cup { font-size: 20px; line-height: 1; text-decoration: none; padding: 7px; border-radius: 10px; }
.hdr-cup:hover { background: rgba(0,0,0,.05); }
@media (max-width: 1100px) { .hdr-cup { margin-inline-start: auto; } .hdr-cup + .bell { margin-inline-start: 0; } }

/* v80: ✨ voice enhancement controls */
.enh { margin: 10px 0 4px; display: grid; gap: 6px; }
.enh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.enh-btn { font: inherit; font-weight: 700; font-size: 14px; border: 0; border-radius: 99px; padding: 8px 16px; cursor: pointer; color: #fff; background: linear-gradient(135deg, #7b3fe4, #ce0000); display: inline-flex; align-items: center; gap: 8px; }
.enh-btn:disabled { opacity: .6; cursor: default; }
.enh-seg { display: inline-flex; border: 1.5px solid var(--rule); border-radius: 99px; overflow: hidden; }
.enh-seg button { font: inherit; font-size: 13.5px; border: 0; background: #fff; color: var(--ink-2); padding: 7px 14px; cursor: pointer; }
.enh-seg button.on { background: #7b3fe4; color: #fff; font-weight: 700; }
.enh-seg button:disabled { cursor: default; }
.enh-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.enh-auto input { width: 16px; height: 16px; accent-color: #7b3fe4; }
.enh-help { font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.enh.dark .enh-seg { border-color: var(--booth-3); }
.enh.dark .enh-seg button { background: var(--booth-2); color: var(--booth-ink-2); }
.enh.dark .enh-seg button.on { background: #7b3fe4; color: #fff; }
.enh.dark .enh-auto, .enh.dark .enh-help { color: var(--booth-ink-2); }
.enh-spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: enhspin .8s linear infinite; }
@keyframes enhspin { to { transform: rotate(360deg); } }
.dub-enh { margin-top: 12px; }

/* v81: simple take editor */
.ted-wrap { margin: 10px 0 2px; }
.ted-open { font: inherit; font-size: 14px; font-weight: 600; width: 100%; text-align: center; border: 1.5px dashed var(--rule); background: #fff; color: var(--ink-2); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.ted-open:disabled { opacity: .55; cursor: default; }
.ted-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ted { display: grid; gap: 8px; }
.ted-wave { position: relative; background: #fff7f7; border: 1px solid #f1d6d6; border-radius: 10px; overflow: hidden; cursor: crosshair; }
.ted-head { position: absolute; top: 0; bottom: 0; width: 2px; background: #1B1C20; pointer-events: none; }
.ted-time { font-size: 12px; color: var(--ink-3); text-align: center; }
.ted-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ted-b { font: inherit; font-size: 13.5px; border: 1.5px solid var(--rule); background: #fff; color: var(--ink); border-radius: 99px; padding: 6px 12px; cursor: pointer; }
.ted-b.red { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.ted-b.soft { background: #f6f6f7; }
.ted-b:disabled { opacity: .45; cursor: default; }
.ted-help { font-size: 12px; color: var(--ink-3); line-height: 1.6; }

/* v82: take player card (play, waveform, original/enhanced, edit) */
.tp { border: 1px solid var(--rule); border-radius: 16px; background: #fff; padding: 12px; display: grid; gap: 8px; margin-bottom: 4px; }
.tp-main { display: flex; align-items: center; gap: 12px; }
.tp-play { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--red); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(206,0,0,.25); }
.tp-play.on { background: #1B1C20; box-shadow: none; }
.tp-wave { flex: 1; min-width: 0; border-radius: 10px; background: #fff7f7; cursor: pointer; overflow: hidden; }
.tp-wave.edit { cursor: crosshair; outline: 1.5px dashed rgba(206,0,0,.35); outline-offset: -1.5px; }
.tp-time { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: -2px; }
.tp-bar, .tp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tp-bar { justify-content: center; }
.tp-btn { font: inherit; font-size: 13.5px; font-weight: 600; border: 1.5px solid var(--rule); background: #fff; color: var(--ink); border-radius: 99px; padding: 7px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tp-btn.on { background: #1B1C20; border-color: #1B1C20; color: #fff; }
.tp-btn.red { background: var(--red); border-color: var(--red); color: #fff; }
.tp-btn.soft { background: #f6f6f7; font-weight: 500; }
.tp-btn.magic { border: 0; color: #fff; background: linear-gradient(135deg, #7b3fe4, #ce0000); }
.tp-btn:disabled { opacity: .45; cursor: default; }
.tp-seg { display: inline-flex; border: 1.5px solid var(--rule); border-radius: 99px; overflow: hidden; }
.tp-seg button { font: inherit; font-size: 13.5px; font-weight: 600; border: 0; background: #fff; color: var(--ink-2); padding: 7px 16px; cursor: pointer; }
.tp-seg button.on { background: #7b3fe4; color: #fff; }
.tp-edit { border-top: 1px solid var(--rule); padding-top: 10px; display: grid; gap: 8px; }
.tp-hint { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.tp-auto { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.tp-auto input { width: 15px; height: 15px; accent-color: #7b3fe4; }

/* v83: background music for takes */
.mp-back { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.55); display: grid; place-items: end center; }
@media (min-width: 700px) { .mp-back { place-items: center; } }
.mp { background: #fff; width: min(520px, 100%); max-height: min(80dvh, 640px); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 700px) { .mp { border-radius: 18px; } }
.mp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.mp-x { border: 0; background: #f1f1f1; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 14px; }
.mp-cats { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
.mp-cats::-webkit-scrollbar { display: none; }
.mp-cats button { flex: none; font: inherit; font-size: 13px; border: 1.5px solid var(--rule); background: #fff; border-radius: 99px; padding: 5px 12px; cursor: pointer; color: var(--ink-2); }
.mp-cats button.on { background: #7b3fe4; border-color: #7b3fe4; color: #fff; }
.mp-list { overflow-y: auto; padding: 0 8px 12px; }
.mp-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
.mp-row:hover, .mp-row.cur { background: #f6f2fe; }
.mp-row .grow { display: flex; flex-direction: column; min-width: 0; }
.mp-row small { color: var(--ink-3); font-size: 12px; }
.mp-play { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #ede6fc; color: #7b3fe4; cursor: pointer; font-size: 13px; }
.mp-play.on { background: #7b3fe4; color: #fff; }
.mp-pick { flex: none; font: inherit; font-size: 13px; font-weight: 700; border: 0; background: #1B1C20; color: #fff; border-radius: 99px; padding: 6px 14px; cursor: pointer; }
.mus { border-top: 1px solid var(--rule); padding-top: 10px; display: grid; gap: 6px; }
.mus-head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.mus-head small { color: var(--ink-3); }
.mus-strip { border-radius: 8px; background: #f6f2fe; overflow: hidden; }
.mus-hint { font-size: 12px; color: var(--ink-3); }
.mus-ctl { display: grid; gap: 8px; }
.mus-vol { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mus-vol input { flex: 1; accent-color: #7b3fe4; }
.mus-pre { display: flex; gap: 6px; flex-wrap: wrap; }
.mus-pre button { font: inherit; font-size: 12.5px; border: 1.5px solid var(--rule); background: #fff; border-radius: 99px; padding: 4px 11px; cursor: pointer; }
.mus-pre button.on { background: #7b3fe4; border-color: #7b3fe4; color: #fff; }
.mus-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-inline-end: 14px; cursor: pointer; }
.mus-chk input { accent-color: #7b3fe4; width: 16px; height: 16px; }
.mp-head, .mp-cats { flex: none; }
.mp-list { flex: 1; min-height: 0; }
.mp-row .grow { flex: 1; }
.mp-cats button { white-space: nowrap; line-height: 1.4; }
/* toasts above everything, and above the phone tab bar */
.toast { z-index: 2147483000; max-width: calc(100vw - 32px); }
@media (max-width: 760px) { .toast { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* two-voice ads: roles and partner recording */
.role-tag { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px; margin-inline-end: 6px; vertical-align: 1px; background: rgba(255,255,255,.12); color: #fff; }
.role-tag.r0 { background: #e0457b; }
.role-tag.r1 { background: #2f7bf6; }
.role-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 6px; background: #888; }
.role-dot.r0 { background: #e0457b; } .role-dot.r1 { background: #2f7bf6; }
.cues .cue.other { opacity: .5; }
.cues .cue.other.sel { opacity: .8; }
.duet-panel .toggle { flex-wrap: wrap; }
.duet-box { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.duet-join { display: flex; gap: 8px; }
.duet-join .in { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .1em; }
.duet-invite { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.duet-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.duet-members li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.screen .sub .role-tag { font-size: 12px; }

/* ================= «دليل معدات التسجيل» (gear course) ================= */
.gx { --gx-red: var(--red); --gx-ink: var(--ink); --gx-soft: var(--paper-2); padding-bottom: 60px; }
.gx-hero { background: radial-gradient(120% 140% at 85% 10%, #3a0d0d 0%, var(--booth) 55%); color: var(--booth-ink); display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; padding: clamp(28px, 6vw, 64px) var(--gutter); overflow: hidden; }
.gx-hero-in { max-width: 640px; }
.gx-kicker { display: inline-block; font-size: 13px; letter-spacing: .02em; color: #ffb3b3; background: rgba(255,74,74,.12); border: 1px solid rgba(255,74,74,.3); padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; }
.gx-hero h1 { font-size: clamp(30px, 5.5vw, 52px); line-height: 1.15; margin: 0 0 14px; color: #fff; }
.gx-hero p { color: var(--booth-ink-2); font-size: clamp(15px, 2vw, 18px); line-height: 1.8; margin: 0 0 18px; }
.gx-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.gx-meta span { background: rgba(255,255,255,.07); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.gx-meta b { color: #fff; }
.gx-hero-art svg { width: 100%; max-width: 280px; display: block; margin: auto; }
.gx-hero-mic { fill: #2c2f36; stroke: #fff; stroke-width: 2; }
.gx-hero-gr { stroke: rgba(255,255,255,.35); stroke-width: 2; }
.gx-hero-st { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.gx-hero-waves circle { fill: none; stroke: var(--booth-red); stroke-width: 2; opacity: 0; transform-origin: 100px 80px; animation: gxRing 3s ease-out infinite; animation-delay: calc(var(--i) * 1s); }
@keyframes gxRing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }

.gx-nav { position: sticky; top: 64px; z-index: 19; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.gx-prog { height: 3px; background: var(--rule); } .gx-prog i { display: block; height: 100%; background: var(--red); transition: width .5s; }
.gx-nav-s { display: flex; gap: 6px; overflow-x: auto; padding: 10px var(--gutter); scrollbar-width: none; }
.gx-nav-s::-webkit-scrollbar { display: none; }
.gx-nav-s button { flex: none; border: 1px solid var(--rule); background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer; white-space: nowrap; display: flex; gap: 6px; align-items: center; transition: all .2s; }
.gx-nav-s button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.gx-nav-s button.read:not(.on) { border-color: var(--ok); color: var(--ok); }

.gx-body { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); }
.gx-ch { padding: 48px 0 28px; border-bottom: 1px solid var(--rule); scroll-margin-top: 110px; }
.gx-ch-h { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.gx-ch-n { font-size: 40px; font-weight: 700; color: var(--red); opacity: .25; line-height: 1; }
.gx-ch-h h2 { margin: 0; font-size: clamp(22px, 3.4vw, 30px); }
.gx-ch-b { font-size: 16.5px; line-height: 1.95; color: var(--ink); }
.gx-ch-b p { margin: 0 0 16px; }
.gx-ch-b h4 { font-size: 19px; margin: 28px 0 12px; }
.gx-ch-f { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.gx-foot { text-align: center; margin-top: 32px; }

.gx-rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--d, 0s); }
.gx-rv.gx-on { opacity: 1; transform: none; }

/* shared drawing styles */
.gx svg .gx-fill { fill: #2c2f36; stroke: #141414; stroke-width: 1.5; }
.gx svg .gx-fill.dark { fill: #141414; }
.gx svg .gx-fill.open { fill: url(#none); fill: #fff; stroke-dasharray: 3 3; }
.gx svg .gx-line { stroke: #141414; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.gx svg .gx-grille { stroke: rgba(255,255,255,.35); stroke-width: 2; }
.gx svg .gx-mini { font-size: 11px; fill: var(--ink-3); font-family: var(--f-body); }
.gx svg .gx-lbl { font-size: 14px; fill: var(--ink); font-weight: 600; font-family: var(--f-body); }

.gx-chain { width: 100%; max-width: 640px; display: block; margin: 8px auto 20px; overflow: visible; }
.gx-flow { stroke: var(--red); stroke-width: 3; stroke-dasharray: 6 8; fill: none; animation: gxFlow 1s linear infinite; }
@keyframes gxFlow { to { stroke-dashoffset: 28; } }
.gx-chain .gx-flow { animation-direction: reverse; }
.gx-node .gx-waves { stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; animation: gxPulse 1.6s ease-in-out infinite; }
.gx-knob { fill: #fff; stroke: #141414; } .gx-led { fill: #3ad07a; animation: gxBlink 1.2s steps(2) infinite; }
.gx-wave-on { stroke: #3ad07a; stroke-width: 2; stroke-linejoin: round; }
@keyframes gxPulse { 50% { opacity: .35; } }
@keyframes gxBlink { 50% { fill: #f5c542; } }

.gx-fam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 20px; }
.gx-fam figure, .gx-phones figure { margin: 0; background: var(--paper-2); border-radius: 14px; padding: 16px; text-align: center; }
.gx-fam svg { width: 100%; max-width: 120px; height: 150px; }
.gx-fam figcaption, .gx-phones figcaption { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.7; }
.gx-fam figcaption b, .gx-phones figcaption b { font-size: 17px; }
.gx-fam figcaption span, .gx-phones figcaption span { color: var(--ink-2); }
.gx-diaph { fill: none; stroke: #ffb3b3; stroke-width: 2.5; animation: gxVib .18s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.gx-diaph.thick { stroke-width: 4; animation-duration: .3s; }
@keyframes gxVib { to { transform: scale(1.12, 1.12); } }
.gx-beam { stroke: var(--red); stroke-width: 2; stroke-dasharray: 3 4; animation: gxFlow 1s linear infinite reverse; }

.gx-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 18px; }
.gx-vs > div { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; font-size: 15px; }
.gx-vs ul { margin: 6px 0 0; padding-inline-start: 18px; line-height: 1.8; }
.gx-spec { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 6px 0 18px; }
.gx-spec th, .gx-spec td { text-align: start; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--rule); line-height: 1.7; }
.gx-spec th { width: 28%; font-weight: 700; background: var(--paper-2); }
.gx-spec td.muted { font-size: 13.5px; }
.gx-tip { display: flex; gap: 12px; background: #fff7e6; border: 1px solid #f3dfb0; border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; font-size: 15px; line-height: 1.85; }
.gx-tip.warn { background: var(--red-wash); border-color: #f2c4c4; }
.gx-tip.buy { background: var(--ok-wash); border-color: #bfe0cb; }
.gx-tip > span { font-size: 20px; line-height: 1.5; }
.gx-steps { margin: 6px 0 18px; padding: 0; list-style: none; counter-reset: gs; }
.gx-steps li { counter-increment: gs; position: relative; padding: 4px 44px 12px 0; line-height: 1.85; }
.gx-steps li::before { content: counter(gs); position: absolute; right: 0; top: 4px; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--f-latin); font-size: 14px; }

.gx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-chips button { border: 1px solid var(--rule); background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; cursor: pointer; transition: all .2s; }
.gx-chips button.on { background: var(--red); border-color: var(--red); color: #fff; }

.gx-polar { background: var(--booth); color: var(--booth-ink); border-radius: 16px; padding: 18px; margin: 8px 0 18px; }
.gx-polar .gx-chips button { background: transparent; color: var(--booth-ink-2); border-color: var(--booth-3); }
.gx-polar .gx-chips button.on { background: var(--booth-red); border-color: var(--booth-red); color: #fff; }
.gx-polar-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: center; margin-top: 14px; }
.gx-polar svg { width: 100%; max-width: 340px; display: block; margin: auto; touch-action: none; cursor: crosshair; }
.gx-polar .gx-ring { fill: none; stroke: rgba(255,255,255,.12); }
.gx-polar .gx-lobe { fill: rgba(255,74,74,.28); stroke: var(--booth-red); stroke-width: 2; transition: d .4s; }
.gx-polar .gx-fill { fill: #fff; stroke: none; } .gx-polar .gx-line { stroke: #fff; }
.gx-polar .gx-mini { fill: var(--booth-ink-2); }
.gx-ray { stroke: #ffd36b; stroke-width: 2; stroke-dasharray: 4 5; animation: gxFlow 1s linear infinite reverse; }
.gx-src { fill: #f5a623; }
.gx-readout { display: flex; flex-direction: column; gap: 6px; }
.gx-readout b { font-size: 24px; color: #fff; }
.gx-bar { height: 10px; border-radius: 99px; background: rgba(127,127,127,.25); overflow: hidden; }
.gx-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3ad07a, #f5c542); border-radius: 99px; transition: width .15s; }
.gx-use { margin: 14px 0 0; color: var(--booth-ink); font-size: 15px; line-height: 1.8; }

.gx-gain { background: var(--booth); color: var(--booth-ink); border-radius: 16px; padding: 18px; margin: 4px 0 18px; }
.gx-meter { direction: ltr; }
.gx-meter-scale { position: relative; height: 18px; font-size: 11px; color: var(--booth-ink-2); font-family: var(--f-latin); }
.gx-meter-scale span { position: absolute; transform: translateX(-50%); }
.gx-meter-bar { position: relative; height: 16px; border-radius: 4px; background: linear-gradient(90deg, #3ad07a 0 70%, #f5c542 70% 90%, #ff4a4a 90%); overflow: hidden; }
.gx-meter-bar i { position: absolute; inset: 0 0 0 auto; background: #111; transition: width .09s linear; }
body.ig .gx-nav { top: calc(54px + env(safe-area-inset-top)); }
.gx-target { position: absolute; left: 70%; width: 20%; top: 0; bottom: 0; border: 2px dashed rgba(255,255,255,.7); border-radius: 3px; }
.gx-slider { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.gx-slider input { flex: 1; min-width: 160px; }
.gx-verdict { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 15px; }
.gx-verdict.ok { background: rgba(58,208,122,.15); color: #8ff0b8; } .gx-verdict.warn { background: rgba(245,197,66,.15); color: #ffe08a; } .gx-verdict.bad { background: rgba(255,74,74,.18); color: #ffb3b3; }

.gx-console { background: var(--paper-2); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.gx-console svg { width: 100%; max-width: 420px; display: block; margin: auto; }
.gx-console .gx-track { fill: #111; } .gx-console .gx-cap { fill: #ddd; animation: gxFader 3s ease-in-out infinite alternate; }
.gx-console .gx-screen { fill: #0d0f12; }
.gx-pad { fill: #444; animation: gxPad 2.4s infinite; } .gx-pad.p1 { animation-delay: .6s; } .gx-pad.p2 { animation-delay: 1.2s; } .gx-pad.p3 { animation-delay: 1.8s; }
@keyframes gxPad { 0%, 20% { fill: var(--booth-red); } 30%, 100% { fill: #444; } }
@keyframes gxFader { to { transform: translateY(18px); } }

.gx-pop { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: center; background: var(--paper-2); border-radius: 16px; padding: 16px; margin-bottom: 18px; }
.gx-pop svg { width: 100%; }
.gx-puff { fill: #9ec5ff; animation: gxPuff 1.6s ease-in infinite; animation-delay: calc(var(--i) * .08s); }
@keyframes gxPuff { 0% { transform: translateX(0); opacity: .9; } 100% { transform: translateX(185px); opacity: .9; } }
.filtered .gx-puff { animation-name: gxPuffF; }
@keyframes gxPuffF { 0% { transform: translateX(0); opacity: .9; } 50% { transform: translateX(88px) scale(1); opacity: .9; } 100% { transform: translateX(150px) scale(.2); opacity: 0; } }
.gx-pf { opacity: 0; transition: opacity .4s; } .filtered .gx-pf { opacity: 1; }
.gx-mesh { fill: rgba(20,20,20,.12); stroke: #141414; stroke-width: 2; stroke-dasharray: 2 2; }
.gx-boom { fill: none; stroke: var(--red); stroke-width: 3; opacity: 0; } svg:not(.filtered) .gx-boom { animation: gxBoom 1.6s infinite; }
@keyframes gxBoom { 0%, 80% { opacity: 0; } 88% { opacity: 1; } 100% { opacity: 0; } }

.gx-room { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: center; background: var(--paper-2); border-radius: 16px; padding: 16px; margin-bottom: 18px; }
.gx-room svg { width: 100%; max-width: 360px; }
.gx-walls { fill: #fff; stroke: #141414; stroke-width: 4; }
.gx-panels { fill: #7b5b3a; opacity: .9; animation: gxIn .5s ease; }
@keyframes gxIn { from { opacity: 0; } }
.gx-refl { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 6 6; animation: gxFlow .9s linear infinite reverse; opacity: .85; }
.treated .gx-refl { stroke: #3a9c5f; opacity: .55; }
.gx-rt { margin: 12px 0 8px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.gx-rt .gx-bar i { background: linear-gradient(90deg, #3ad07a, #ff4a4a); transition: width .6s; }

.gx-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.gx-phones svg { width: 100%; max-width: 160px; height: 120px; overflow: visible; }
.gx-leak { stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; animation: gxPulse 1.4s infinite; } .gx-leak.l2 { animation-delay: .4s; }

.gx-daws { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.gx-daw { border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; transition: box-shadow .2s, transform .2s; }
.gx-daw:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.gx-daw b { font-size: 19px; } .gx-daw small { color: var(--red-ink); } .gx-daw p { margin: 4px 0; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.gx-daw .tag { align-self: flex-start; }

.gx-ba { display: grid; gap: 10px; margin-bottom: 18px; }
.gx-ba > div { background: var(--booth); border-radius: 12px; padding: 10px 14px; color: var(--booth-ink-2); }
.gx-ba svg { width: 100%; height: 70px; display: block; }
.gx-wf { fill: #3ad07a; } .gx-wf.noisy { fill: #ff8a8a; }

.gx-check { display: flex; flex-direction: column; gap: 10px; }
.gx-ring-wrap { display: flex; align-items: center; gap: 12px; }
.gx-pring { width: 56px; height: 56px; transform: rotate(-90deg); } .gx-pring circle { fill: none; stroke: var(--rule); stroke-width: 5; } .gx-pring circle.on { stroke: var(--ok); stroke-linecap: round; transition: stroke-dasharray .4s; }
.gx-ring-wrap > b { font-size: 22px; }
.gx-check-g h4 { margin: 14px 0 8px !important; }
.gx-ci { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background .2s; font-size: 15.5px; line-height: 1.8; }
.gx-ci:hover { background: var(--paper-2); }
.gx-ci input { margin-top: 6px; width: 18px; height: 18px; accent-color: var(--ok); flex: none; }
.gx-ci.on span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }

.gx-adv { display: flex; flex-direction: column; gap: 14px; }
.gx-q b { display: block; margin-bottom: 8px; font-size: 16px; }
.gx-q b .latin { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; margin-inline-end: 6px; }
.gx-rec { background: var(--booth); color: var(--booth-ink); border-radius: 16px; padding: 18px; animation: gxIn .5s ease; }
.gx-rec h4 { margin: 0 0 10px !important; color: #fff; }
.gx-rec-i { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--booth-3); font-size: 15px; line-height: 1.8; }
.gx-rec-i b { color: #fff; } .gx-rec .linkbtn { color: var(--booth-ink-2); margin-top: 10px; }

.gx-quiz { display: flex; flex-direction: column; gap: 16px; }
.gx-qq > b { display: block; margin-bottom: 8px; font-size: 16px; line-height: 1.8; }
.gx-opts { display: flex; flex-direction: column; gap: 6px; }
.gx-opts button { text-align: start; border: 1px solid var(--rule); background: #fff; border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 15px; cursor: pointer; transition: all .2s; }
.gx-opts button:hover:not(:disabled) { border-color: var(--ink); }
.gx-opts button.right { background: var(--ok-wash); border-color: var(--ok); color: var(--ok); font-weight: 600; }
.gx-opts button.wrong { background: var(--red-wash); border-color: var(--red); color: var(--red-ink); }
.gx-opts button.dim { opacity: .5; }
.gx-ok { color: var(--ok); margin: 6px 0 0; } .gx-no { color: var(--red-ink); margin: 6px 0 0; }
.gx-score { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--paper-2); border-radius: 14px; padding: 16px; }
.gx-score b { font-size: 28px; color: var(--red); }

.gear-banner .cb-ic { background: var(--booth); }

@media (max-width: 760px) {
  .gx-hero { grid-template-columns: 1fr; }
  .gx-hero-art { display: none; }
  .gx-fam { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .gx-fam figure { padding: 10px 8px; } .gx-fam figcaption span { font-size: 12.5px; line-height: 1.6; } .gx-fam figcaption b { font-size: 14px; }
  .gx-vs, .gx-daws, .gx-phones, .gx-pop, .gx-room { grid-template-columns: 1fr; }
  .gx-polar-body { grid-template-columns: 1fr; }
  .gx-spec th { width: 34%; } .gx-spec td.muted { display: none; }
  .gx-rec-i { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 420px) { .gx-fam { grid-template-columns: 1fr; } .gx-fam svg { height: 120px; } }
@media (prefers-reduced-motion: reduce) {
  .gx *, .gx *::before { animation: none !important; transition: none !important; }
  .gx-rv { opacity: 1; transform: none; }
}
.gx-ex { border: 1px solid #bfe0cb; background: var(--ok-wash); border-radius: 14px; padding: 14px 16px; margin: 0 0 18px; }
.gx-ex-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.gx-ex-h b { font-size: 16px; } .gx-ex-h small { color: var(--ink-2); font-size: 13px; }
.gx-ex-g { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-top: 1px dashed #bfe0cb; }
.gx-ex-k { font-weight: 700; font-size: 14.5px; color: var(--ok); padding-top: 6px; }
.gx-ex ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gx-ex li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gx-ex li::before { content: '•'; color: var(--ok); font-weight: 700; }
.gx-ex li a { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #bfe0cb; border-radius: 999px; padding: 4px 12px; color: var(--ink); text-decoration: none; font-size: 14.5px; transition: all .2s; }
.gx-ex li a:hover { border-color: var(--ok); background: var(--ok); color: #fff; }
.gx-ex li a i { font-style: normal; font-size: 12px; opacity: .7; }
.gx-ex li small { color: var(--ink-2); font-size: 13.5px; }
.gx-ex-n { margin: 10px 0 0 !important; font-size: 13.5px; color: var(--ink-2); line-height: 1.8; }
@media (max-width: 560px) { .gx-ex-g { grid-template-columns: 1fr; gap: 6px; } .gx-ex-k { padding-top: 0; } }
/* buttons inside the dark panels of the gear guide */
.gx-polar .btn.ghost, .gx-gain .btn.ghost, .gx-rec .btn.ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); }
.gx-polar .btn.ghost:hover, .gx-gain .btn.ghost:hover, .gx-rec .btn.ghost:hover { background: var(--booth-red); border-color: var(--booth-red); }
.gx-readout .btn { margin-top: 8px; align-self: flex-start; }
.gx-polar .muted, .gx-gain .muted, .gx-rec .muted { color: var(--booth-ink-2) !important; }

/* gear guide inside the presentation (1600×900 canvas) */
.dk-gear .dk-title { margin-bottom: 28px; }
.dk-gear-body { flex: 1; display: flex; gap: 50px; align-items: center; min-height: 0; padding-bottom: 50px; }
.dk-gear .gx-w { flex: 1; padding: 0; min-width: 0; max-height: 100%; }
.dk-gear.side .gx-w { flex: 1.25; }
.dk .gx-rv { opacity: 1; transform: none; }
.dk-gear-side { flex: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.dk-gear-side li { font-size: 34px; line-height: 1.5; display: flex; gap: 16px; }
.dk-gear-side li::before { content: "●"; color: var(--red); font-size: .55em; margin-top: .55em; }
.dk-gear .gx-chain { max-width: none; }
.dk-gear .gx-console svg { max-width: none; }
.dk-spec table { width: 100%; border-collapse: collapse; }
.dk-spec th, .dk-spec td { text-align: start; padding: 13px 22px; border-bottom: 2px solid #eee; font-size: 28px; line-height: 1.5; vertical-align: top; }
.dk-spec th { font-weight: 700; width: 26%; background: #f5f3ef; text-align: left; }
.dk-spec .dk-spec-c { color: #777; font-size: 25px; width: 32%; }
.dk-prod { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 30px; flex: 1; align-content: start; }
.dk-prod-g { background: #f5f3ef; border-radius: 26px; padding: 30px 34px; }
.dk-prod-g h3 { font-size: 40px; margin: 0 0 20px; color: var(--red); text-align: left; }
.dk-prod-g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.dk-prod-g li { display: flex; flex-direction: column; gap: 4px; }
.dk-prod-g a { white-space: nowrap; font-size: 31px; font-weight: 700; color: #111; text-decoration: none; align-self: flex-start; }
.dk-prod-g a i { font-style: normal; color: var(--red); font-size: 24px; }
.dk-prod-g small { font-size: 26px; color: #666; }
.dk-prod-n { font-size: 24px; color: #888; margin: 18px 0 40px; }
.dk-grid.n2 { grid-template-columns: repeat(2, 1fr); }
.dk-grid.n3 { grid-template-columns: repeat(3, 1fr); }
.dk-grid.n4 { grid-template-columns: repeat(2, 1fr); }
.dk-grid .dk-card h3 .latin, .dk-card h3:lang(en) { direction: ltr; }
.gx-q1 { display: flex; flex-direction: column; gap: 14px; }
.gx-q1-q { font-size: 26px; line-height: 1.6; }
.gx-q1 .gx-opts button { font-size: 21px; padding: 14px 20px; }
.gx-q1 p { font-size: 19px; margin: 6px 0 0; }
/* buying advisor on a slide: the three questions side by side, the advice below in a compact grid */
.dk .gx-adv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 22px; align-items: start; }
.dk .gx-adv > .gx-q b { font-size: 15px; }
.dk .gx-adv .gx-chips { flex-direction: column; align-items: stretch; }
.dk .gx-adv .gx-chips button { text-align: start; font-size: 13px; padding: 6px 12px; }
.dk .gx-adv > .gx-rec, .dk .gx-adv > p { grid-column: 1 / -1; }
.dk .gx-rec { padding: 12px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 18px; }
.dk .gx-rec h4 { grid-column: 1 / -1; font-size: 15px; margin: 0 0 2px !important; }
.dk .gx-rec-i { grid-template-columns: 1fr; gap: 2px; padding: 6px 0; font-size: 12.5px; line-height: 1.6; border-bottom: 0; border-top: 1px solid var(--booth-3); }
.dk .gx-rec .linkbtn { grid-column: 1 / -1; margin-top: 2px; font-size: 12px; justify-self: start; }
.gx-terms { border: 1px solid var(--rule); border-radius: 14px; margin: 22px 0 0; background: #fafaf8; }
.gx-terms summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 16px; list-style: none; }
.gx-terms summary::-webkit-details-marker { display: none; }
.gx-terms summary::after { content: '▾'; float: left; color: var(--ink-3); transition: transform .2s; }
.gx-terms:not([open]) summary::after { transform: rotate(90deg); }
.gx-terms summary small { color: var(--ink-3); font-weight: 500; }
.gx-terms dl, .gx-gloss dl { margin: 0; padding: 0 16px 10px; }
.gx-gloss dl { padding: 0; margin-top: 12px; }
.gx-term { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.8; }
.gx-term dt { font-weight: 700; color: var(--red-ink); text-align: right; }
.gx-term dd { margin: 0; color: var(--ink-2); }
.gx-gloss .in { width: 100%; }
@media (max-width: 560px) { .gx-term { grid-template-columns: 1fr; gap: 2px; } .gx-term dt { text-align: right; } }
.dk-terms .dk-title { margin-bottom: 26px; }
.dk-terms dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; align-content: start; }
.dk-terms dl > div { background: #f5f3ef; border-radius: 20px; padding: 18px 24px; }
.dk-terms dt { font-size: 30px; font-weight: 700; color: var(--red); text-align: right; margin-bottom: 4px; }
.dk-terms dd { margin: 0; font-size: 23px; line-height: 1.55; color: #333; }

/* ================= casting calls ================= */
.cast-calls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.cast-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: linear-gradient(90deg, #1b1c20, #3a0d0d); color: #fff; text-decoration: none; }
.cast-banner .cast-ic { font-size: 26px; }
.cast-banner b { display: block; font-size: 16px; }
.cast-banner small { color: #d8d8dc; }
.cast-banner .tag.red { background: var(--booth-red); color: #fff; }
.cast-script { white-space: pre-wrap; font-size: 22px; line-height: 2; background: var(--paper-2); border-radius: 14px; padding: 20px 22px; margin: 14px 0; }
.cast-script.sm { font-size: 16px; padding: 12px 14px; }
.cast-mine { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.cast-mine audio { width: 100%; }
.cast-admin .panel-light { border: 1px solid var(--rule); border-radius: 14px; padding: 16px; margin-bottom: 20px; }
.cast-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cast-detail { width: 100%; padding: 12px 0 4px; display: flex; flex-direction: column; gap: 12px; }
.cast-share { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--paper-2); border-radius: 10px; padding: 10px 12px; }
.cast-share .latin { word-break: break-all; }
.cast-subs { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cast-subs li { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--rule); border-radius: 10px; padding: 8px 12px; }
.cast-subs li.off { opacity: .45; }
.cast-subs audio { width: 100%; min-width: 180px; }
.cast-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) { .cast-row { grid-template-columns: 1fr; } .cast-subs li { grid-template-columns: 1fr; } }

.cast-pub { min-height: 100vh; background: #0f1013; color: #f2f1ee; font-family: var(--f-body); padding: 0 var(--gutter) 60px; }
.cast-pub header { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 26px 0 10px; letter-spacing: .25em; font-size: 13px; color: #bbb; }
.cast-pub header img { width: 28px; height: 28px; }
.cast-pub main { max-width: 720px; margin: 0 auto; }
.cast-pub-k { color: var(--booth-red); margin: 30px 0 6px; font-weight: 600; }
.cast-pub h1 { font-size: clamp(28px, 5vw, 44px); margin: 0 0 6px; color: #fff; }
.cast-pub-n { color: #a9abb2; margin: 0 0 18px; }
.cast-pub-f { display: flex; gap: 8px; margin-bottom: 16px; }
.cast-pub-f button { background: transparent; color: #ddd; border: 1px solid #3a3d44; border-radius: 999px; padding: 6px 16px; font: inherit; cursor: pointer; }
.cast-pub-f button.on { background: var(--booth-red); border-color: var(--booth-red); color: #fff; }
.cast-pub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cast-pub-list li { display: flex; gap: 16px; align-items: center; background: #1b1c20; border-radius: 16px; padding: 16px 18px; }
.cast-pub-i { font-size: 22px; font-weight: 700; color: var(--booth-red); opacity: .8; }
.cast-pub-list b { display: block; font-size: 18px; margin-bottom: 8px; color: #fff; }
.cast-pub-list audio { width: 100%; }
.cast-pub-empty { max-width: 520px; margin: 80px auto; text-align: center; }

.gask-back { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; }
.gask { background: #fff; border-radius: 20px; padding: 28px 24px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.gask-ic { font-size: 40px; }
.gask h2 { margin: 8px 0 8px; font-size: 24px; }
.gask p { color: var(--ink-2); line-height: 1.8; margin: 0 0 18px; font-size: 15px; }
.gask-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gask-btns .btn { min-height: 52px; font-size: 17px; }
.ig-cast { padding: 0 12px; } .ig-cast .cast-calls { margin: 10px 0 4px; }
.cast-pub-list li > div { flex: 1; min-width: 0; }
.gask-btns .btn { flex-direction: column; gap: 0; line-height: 1.2; }
.gask-btns .btn small { font-size: 12px; opacity: .7; }
.duet-ask { display: flex; flex-direction: column; gap: 8px; background: rgba(255,74,74,.12); border: 1px solid rgba(255,74,74,.4); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.duet-ask b { font-size: 16px; }
.duet-ask-b { display: flex; gap: 8px; }

/* ✦ Elite VO */
.elite-badge { display: inline-flex; align-items: center; gap: 3px; font-family: var(--f-latin); font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #6b4a00; background: linear-gradient(135deg, #f7e08a, #d4a429 60%, #f3d36b); border-radius: 999px; padding: 2px 8px; vertical-align: 2px; white-space: nowrap; box-shadow: 0 0 0 1px rgba(160,110,0,.25) inset; }
.elite-ring { border-radius: 50%; padding: 3px; background: conic-gradient(#f7e08a, #d4a429, #fff1b8, #d4a429, #f7e08a); }
.elite-ring img, .elite-ring > * { border: 3px solid #fff; border-radius: 50%; }
.igp-role.elite-role { color: #a07400; font-weight: 700; }
.elite-card { background: linear-gradient(135deg, #1b1c20, #3b2e0c); color: #f7e08a; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.elite-card .latin { font-size: 18px; font-weight: 700; }
.elite-card small { color: #e6dcc0; line-height: 1.7; }
.elite-codes { border: 1px solid #ecd58b; background: #fffaf0; border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.elite-new { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.elite-new .in { flex: 1; min-width: 160px; }

/* v104: record a piece into a take; edit a saved take */
.tp-ins { justify-content: space-between; }
.tp-pre { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.tp-pre input { width: 15px; height: 15px; accent-color: var(--red); }
.tp-recp { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff4f4; border: 1px solid rgba(206,0,0,.18); font-size: 13.5px; }
.te-sheet { max-height: 92dvh; }
.te-sheet .sheet-h small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.rec-dirty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #fff8e6; border: 1px solid #f1d58a; font-size: 13.5px; }
.tp-lvl { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
.tp-seg.sm button { padding: 5px 12px; font-size: 12.5px; }

/* v106: coaches */
.coach-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, #1f6f5c, #2fa37f); border-radius: 99px; padding: 2px 8px; vertical-align: middle; white-space: nowrap; }
.coach-role { color: #1f6f5c; font-weight: 600; }
.coach-card { background: linear-gradient(135deg, #0f3d33, #1f6f5c) !important; }
.ig-rate small { font-weight: 600; opacity: .85; }
.ig-rates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 2px 14px 6px; font-size: 13px; }
.ig-rates-avg b { color: #E8A93A; font-size: 15px; }
.ig-rates-avg small { color: var(--ink-3); }
.ig-rates-i { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; background: #f6f6f7; color: var(--ink-2); }
.ig-rates-i b { color: #c78a1d; }
.ig-tn.coach b { color: #1f6f5c; }
.ig-c.pinned.coach { background: #f1faf6; }
.rv-sheet { max-height: 92dvh; }
.rv-sheet .sheet-h small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.rv-who { display: block; font-size: 12.5px; color: #1f6f5c; margin-bottom: 2px; }
.rv-who small { color: var(--ink-3); font-weight: 500; }

/* v107: restoration faders */
.tp-mix { display: grid; gap: 10px; border-top: 1px solid var(--rule); padding-top: 10px; }
.tp-mix-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
@media (max-width: 520px) { .tp-mix-g { grid-template-columns: minmax(0, 1fr); } }
.tp-fader { display: grid; gap: 2px; min-width: 0; }
.tp-fader-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13.5px; }
.tp-fader output { font-size: 12.5px; color: var(--red); font-variant-numeric: tabular-nums; }
.tp-fader small { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.tp-fader input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; margin: 0; }
.tp-fader input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 5px; background: linear-gradient(to right, var(--red) var(--p, 50%), #ece6e6 var(--p, 50%)); }
.tp-fader input[type=range]::-moz-range-track { height: 5px; border-radius: 5px; background: #ece6e6; }
.tp-fader input[type=range]::-moz-range-progress { height: 5px; border-radius: 5px; background: var(--red); }
.tp-fader input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--red); margin-top: -7.5px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.tp-fader input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--red); }
.tp-presets { justify-content: center; }
.tp-presets .tp-btn.on { background: #1B1C20; border-color: #1B1C20; color: #fff; }

/* ======================================================================
   v108 — the premium pass. Identity kept: white paper, black ink, the red mark.
   Red is reserved for the brand, the one key action on a screen and live states;
   black carries emphasis and secondary actions; light grey carries surfaces.
   ====================================================================== */
body { font-size: 16.5px; line-height: 1.7; text-rendering: optimizeLegibility; }
h1, h2, h3 { letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(30px, 4.2vw, 42px); line-height: 1.25; }
h2 { font-size: clamp(22px, 2.8vw, 28px); }
.page-head { margin-bottom: 28px; }
.page-head p { color: var(--ink-3); font-size: 15.5px; margin: 4px 0 0; }

/* header: quieter links, the current page as a soft pill */
.top { background: rgba(255,255,255,.86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom-color: rgba(0,0,0,.06); }
.nav a { padding: 7px 12px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); transition: background .15s, color .15s; }
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.nav a.on { background: var(--paper-2); color: var(--ink); font-weight: 600; }
@media (max-width: 1100px) { .nav a { border-radius: 10px; } }

/* buttons: black primary, red for the key action, grey secondary — no outlines */
.btn { border-radius: 11px; font-size: 15.5px; letter-spacing: 0; transition: background .15s, border-color .15s, transform .08s, box-shadow .15s; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: var(--paper-2); border-color: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--paper-3); border-color: transparent; }
.btn.sm { border-radius: 9px; font-size: 14px; min-height: 36px; }
.btn.red { box-shadow: 0 6px 16px rgba(206,0,0,.18); }
.btn.red:hover { box-shadow: 0 8px 20px rgba(206,0,0,.22); }
.hero .btn.ghost { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.hero .btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.linkbtn { text-decoration-color: rgba(168,0,0,.35); text-underline-offset: 3px; }
.linkbtn:hover { text-decoration-color: currentColor; }

/* fields */
.in, select.in, textarea.in { border-radius: 11px; border-color: var(--rule); transition: border-color .15s, box-shadow .15s; }
.in:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,17,17,.09); }
label.f > span { font-size: 13.5px; color: var(--ink-2); }
.chip { border-radius: 999px; background: var(--paper-2); border-color: transparent; color: var(--ink-2); font-weight: 500; padding: 5px 14px; }
.chip:hover { background: var(--paper-3); color: var(--ink); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip-b { background: var(--paper-2); border-color: transparent; }
.chip-b.on { background: var(--ink); color: #fff; }

/* lists, tags, tables */
.rows { border-top: 0; }
.rows > li { border-bottom: 1px solid var(--rule); }
.rows a.row, .rows .row { padding: 18px 6px; border-radius: 12px; }
.rows a.row:hover { background: var(--paper-2); }
.row .s { font-size: 13.5px; margin-top: 2px; }
.tag { font-size: 12px; padding: 3px 10px; letter-spacing: 0; }
table.t th { font-size: 12.5px; color: var(--ink-3); padding: 10px 8px; }
table.t td { padding: 12px 8px; }
.empty { color: var(--ink-3); }

/* content cards */
.mcard .thumb { border-radius: 14px; box-shadow: var(--sh-1); transition: transform .2s ease, box-shadow .2s ease; }
.mcard:hover .thumb { transform: translateY(-2px); box-shadow: var(--sh-2); }
.mcard .t, .mcard b { margin-top: 12px; }
.tabs { gap: 2px; margin-bottom: 24px; }
.tabs button { padding: 11px 14px; font-size: 15px; color: var(--ink-3); transition: color .15s; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); }
.tabs-seg a { background: var(--paper-2); }
.tabs-seg a.on { background: var(--ink); }
.tabs-seg { display: flex; gap: 6px; flex-wrap: wrap; }

/* recorder */
.rec-box { border-radius: 20px; background: var(--paper-2); }
.rec-box .in { background: #fff; }
.tp { border: 0; box-shadow: var(--sh-1); border-radius: 16px; }
.tp-btn { border-color: transparent; background: var(--paper-2); }
.tp-btn:hover { background: var(--paper-3); }
.tp-btn.on { background: var(--ink); color: #fff; }
.tp-btn.red { background: var(--red); color: #fff; }
.tp-seg { border-color: var(--rule); }

/* member home: quick links as one calm set */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 14px; }
.course-banner { margin: 0; background: var(--paper-2); color: var(--ink); border-radius: 16px; padding: 16px 18px; transition: background .15s, transform .15s; }
.course-banner:hover { background: var(--paper-3); }
.course-banner small { opacity: 1; color: var(--ink-3); font-size: 13px; }
.course-banner .cb-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 22px; flex: none; }
.gear-banner .cb-ic { background: var(--ink); }
.course-banner > span[aria-hidden] { color: var(--ink-3); }
.wa-card { border-color: transparent; background: #F1FAF4; border-radius: 16px; max-width: none; }
.lvl-card { border-color: transparent; background: var(--paper-2); border-radius: 16px; }
.lvl-card:hover { background: var(--paper-3); border-color: transparent; }
.space-cards { margin: 0 0 32px; }
.cast-banner { border-radius: 16px; }
.chal-card { border-radius: 16px; }
.elite-card, .coach-card { border-radius: 16px; }

/* admin */
.admin-nav button { border-radius: 10px; padding: 10px 14px; font-weight: 500; }
.admin-nav button.on { background: var(--ink); color: #fff; font-weight: 600; }
.admin-nav button.on .badge { background: #fff; color: var(--red); }
.toolbar .in { border-radius: 11px; }

/* overlays */
.toast { border-radius: 12px; box-shadow: var(--sh-2); padding: 11px 18px; }
.modal { border-radius: 20px; box-shadow: var(--sh-2); }
.sheet { box-shadow: 0 -8px 40px rgba(0,0,0,.18); }
@media (min-width: 761px) { .sheet { border-radius: 20px; box-shadow: var(--sh-2); } }
.sheet-x { background: var(--paper-2); }
.sheet-x:hover { background: var(--paper-3); }

/* community */
@media (min-width: 761px) { .ig-post { border: 0; border-radius: 16px; box-shadow: var(--sh-1); margin-bottom: 24px; } }
.ig-feed { padding-top: 12px; }
.ig-add { border-radius: 999px; }
.igp-btn { border-radius: 10px; background: var(--paper-2); }
.igp-btn:hover { background: var(--paper-3); }

/* footer */
.foot { background: #000; }
/* my recordings: what matters on one line, the utilities quiet beneath */
.sub-acts { width: 100%; display: grid; gap: 8px; margin-top: 4px; }
.sub-main { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sub-main audio { width: 100%; }
.sub-util { display: flex; gap: 4px 14px; flex-wrap: wrap; align-items: center; }
.ubtn { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13.5px; color: var(--ink-3); cursor: pointer; text-decoration: none; transition: color .15s; }
.ubtn:hover { color: var(--ink); }
.ubtn.danger:hover { color: var(--red-ink); }
.ubtn:disabled { opacity: .5; cursor: default; }
/* dark surfaces keep translucent secondary buttons */
.booth .btn.ghost, .ecard .btn.ghost { background: rgba(255,255,255,.08); border-color: transparent; color: #fff; }
.booth .btn.ghost:hover, .ecard .btn.ghost:hover { background: rgba(255,255,255,.16); border-color: transparent; }
.gx-polar .btn.ghost, .gx-gain .btn.ghost, .gx-rec .btn.ghost { background: rgba(255,255,255,.1); color: #fff; border-color: transparent; }
/* phones: the two learning tiles side by side, so the content starts sooner */
@media (max-width: 600px) {
  .quick-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .quick-grid .course-banner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .quick-grid .course-banner small { display: none; }
  .quick-grid .course-banner > span[aria-hidden] { display: none; }
  .quick-grid .course-banner .cb-ic { width: 40px; height: 40px; font-size: 20px; border-radius: 11px; }
  .wa-card { padding: 12px 14px; }
  .wa-card .wa-ic { width: 36px; height: 36px; }
}
/* finishing touches */
::selection { background: var(--red-wash); color: var(--red-ink); }
.page { animation: pageIn .28s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .page, .mcard .thumb, .btn { animation: none; transition: none; } }
.nav a.nav-quiet { color: var(--ink-3); font-size: 13.5px; }
.nav a.nav-quiet:hover { color: var(--ink); background: transparent; }
.hdr-cup { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: var(--ink); }
.hdr-cup:hover { background: var(--paper-2); }
/* trainer / coach tools on a post: quiet chips in one row, not dashed boxes */
.ig-tn-edit { display: inline-block; padding: 0; margin: 6px 0 0 6px; }
.ig-tn-edit:first-of-type, .ig-stars + .ig-tn-edit { margin-inline-start: 12px; }
.ig-tn-edit .tn-add { width: auto; margin: 0; border: 0; background: var(--paper-2); color: var(--ink-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; }
.ig-tn-edit .tn-add:hover { background: var(--paper-3); color: var(--ink); }
.ig-tn-edit .trainer-note.editing { display: block; margin: 8px 0; }
.ig-tn-edit:has(.editing) { display: block; padding: 0 12px; margin: 8px 0 0; }
/* community on a wide screen: the feed keeps its width; a quiet column sits beside it */
.ig-layout { display: flex; justify-content: center; align-items: flex-start; gap: 48px; }
.ig-layout > .ig-feed { margin: 0; }
.ig-aside { display: none; }
@media (min-width: 1100px) {
  .ig-aside { display: block; width: 300px; flex: none; position: sticky; top: 88px; padding-top: 20px; }
}
.ig-me { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); padding: 6px 0 18px; }
.ig-me b { display: block; font-size: 15px; }
.ig-me small { display: block; color: var(--ink-3); font-size: 13px; }
.ig-aside-sec { border-top: 1px solid var(--rule); padding: 16px 0; }
.ig-aside-sec header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.ig-aside-sec header b { font-size: 14px; }
.ig-aside-sec header a { font-size: 13px; color: var(--ink-3); text-decoration: none; }
.ig-aside-sec header a:hover { color: var(--ink); }
.ig-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ig-board li { display: flex; align-items: center; gap: 10px; }
.ig-board-n { width: 18px; color: var(--ink-3); font-size: 13px; text-align: center; }
.ig-board-who { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 500; }
.ig-board-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-board li b { font-size: 13px; color: var(--ink-2); }
.ig-aside-links { display: grid; gap: 4px; }
.ig-aside-links a { text-decoration: none; color: var(--ink-2); font-size: 14px; padding: 8px 10px; border-radius: 10px; transition: background .15s, color .15s; }
.ig-aside-links a:hover { background: var(--paper-2); color: var(--ink); }
.ig-aside-foot { color: var(--ink-3); font-size: 12px; letter-spacing: .18em; margin: 14px 0 0; }
/* phones: the feed fills the screen inside the community layout */
.ig-layout { width: 100%; min-width: 0; }
.ig-layout > .ig-feed { width: 100%; max-width: 470px; min-width: 0; }
/* the coaches page: one team, equal cards, portraits first */
.cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: stretch; }
.cp-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 22px 22px; border-radius: 22px; background: var(--paper-2); min-width: 0; }
.cp-av { text-decoration: none; margin-bottom: 4px; }
.cp-av .avatar { box-shadow: 0 0 0 4px var(--paper-2), 0 0 0 6px var(--ink); font-size: 36px; }
.cp-card h2 { font-size: 19px; margin: 4px 0 0; }
.cp-role { margin: 0; font-size: 13.5px; color: var(--ink-2); min-height: 1.5em; }
.cp-bio { margin: 6px 0 0; font-size: 14.5px; line-height: 1.75; white-space: pre-wrap; flex: 1; }
.cp-foot { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cp-soc { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--ink-2); text-decoration: none; }
.cp-soc:hover { color: var(--ink); }
.cp-card .coach-title { text-align: center; }
.cp-card.lead { grid-column: 1 / -1; flex-direction: row; text-align: start; align-items: center; gap: 24px; padding: 24px 28px; background: var(--ink); color: #fff; }
.cp-card.lead .cp-av .avatar { box-shadow: 0 0 0 4px var(--ink), 0 0 0 6px var(--red); }
.cp-card.lead .cp-role { color: rgba(255,255,255,.75); }
.cp-card.lead .cp-bio { color: rgba(255,255,255,.9); }
.cp-card.lead .cp-foot { justify-content: flex-start; margin-top: 8px; }
.cp-card.lead .btn.ghost { background: rgba(255,255,255,.12); color: #fff; }
.cp-card.lead .cp-soc { background: rgba(255,255,255,.12); color: #fff; }
.cp-card.lead .coach-title { text-align: start; }
.cp-body { display: grid; gap: 6px; justify-items: center; min-width: 0; flex: 1; width: 100%; }
.cp-card.lead .cp-body { justify-items: start; }
@media (max-width: 600px) { .cp-card.lead .cp-body { justify-items: center; } }
@media (max-width: 600px) { .cp-card.lead { flex-direction: column; text-align: center; align-items: center; } .cp-card.lead .cp-foot { justify-content: center; } .cp-card.lead .coach-title { text-align: center; } }
.coach-banner .cb-ic { background: #1f6f5c; }
.dub-banner .cb-ic { background: #4a1414; }
@media (max-width: 600px) {
  .quick-grid > .course-banner:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .quick-grid > .course-banner:last-child:nth-child(odd) small { display: block; }
}
.coach-title { display: block; margin-top: 6px; min-height: 34px; font-size: 13px; max-width: 260px; }
.tp-gap { align-items: center; }
.tp-gap-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.tp-gap-l input { width: 64px; min-height: 34px; padding: 4px 8px; border: 1.5px solid var(--rule); border-radius: 9px; font: inherit; font-size: 14px; text-align: center; }
.mine-h { margin: 36px 0 12px; font-size: 22px; }
/* sizes: course tiles two across on desktop, course rows stretch, coaches three across */
.course-item .grow { flex: 1; }
@media (min-width: 601px) {
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .course-banner { padding: 18px 20px; gap: 16px; }
  .course-banner .cb-ic { width: 52px; height: 52px; font-size: 24px; border-radius: 14px; }
  .course-banner b { font-size: 17px; }
  .course-banner small { font-size: 13.5px; line-height: 1.6; }
  .cp-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (min-width: 1000px) { .cp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* v125: editor zoom (Ctrl+wheel / pinch / buttons), overview strip, move, keyboard hint */
.tp-time { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tp-zoom { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--rule); border-radius: 99px; padding: 1px 4px; background: #fff; }
.tp-zoom button { font: inherit; font-size: 14px; font-weight: 700; line-height: 1; width: 24px; height: 22px; border: 0; background: transparent; color: var(--ink-2); border-radius: 99px; cursor: pointer; }
.tp-zoom button:disabled { opacity: .35; cursor: default; }
.tp-zoom button:hover:not(:disabled) { background: #f1f1f3; }
.tp-zoom b { min-width: 34px; text-align: center; font-size: 11.5px; color: var(--ink-2); }
.tp-mini { border-top: 1px solid #f1d6d6; cursor: grab; }
.tp-wave canvas.moving { cursor: copy; }
.tp-move { border-top: 1px dashed var(--rule); padding-top: 8px; }
.tp-keys { margin: 0; font-size: 11.5px; line-height: 1.7; }
@media (hover: none) { .tp-keys { display: none; } }

/* v125: recorder — attempts, device draft, mic check */
.rec-mic { font: inherit; font-size: 12.5px; font-weight: 600; border: 1px solid var(--rule); background: #fff; color: var(--ink-2); border-radius: 99px; padding: 5px 11px; cursor: pointer; }
.rec-mic:hover { border-color: var(--ink-3); color: var(--ink); }
.rec-draft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #f3f7ff; border: 1px solid #c9d8f5; font-size: 13.5px; }
.rec-draft > span:last-child { display: inline-flex; gap: 10px; align-items: center; }
.rec-takes { margin: 12px 0 0; border: 1px solid var(--rule); border-radius: 14px; background: #fafafa; padding: 10px 12px; }
.rec-takes-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.rec-takes-h small { font-size: 12px; }
.rec-takes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rec-takes li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--rule); }
.rec-takes li.cur { border-color: var(--red); background: #fff7f7; }
.rec-takes li b { font-size: 14px; }
.rec-takes li em { font-style: normal; font-size: 11px; color: var(--red); background: #fde3e3; border-radius: 99px; padding: 1px 7px; margin-inline-start: 4px; }
.rec-takes li small { display: block; font-size: 12px; }
.tk-play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 13px; cursor: pointer; display: grid; place-items: center; }
.tk-play.on { background: var(--red); }
.unf-yes.danger { color: #b00; font-weight: 600; }
.mic-sheet .mic-body { display: grid; gap: 14px; }
.meter.light.big { height: 14px; position: relative; border: 1px solid var(--rule); margin: 0; }
.meter.light.big b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); transform: translateX(-1px); }
.mic-verdict { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.mic-verdict.hot { color: #b00; font-weight: 700; }
.mic-verdict.low { color: #8a5a00; }
.mic-gain input[type=range] { width: 100%; accent-color: var(--red); }
.mic-gain span { display: flex; justify-content: space-between; }
.mic-test { padding-top: 6px; border-top: 1px solid var(--rule); }

/* v125: community — saved, likers, replies, mentions, collaborator, notification shelves */
button.ig-likes { display: block; background: none; border: 0; font: inherit; font-weight: 700; font-size: 14px; color: var(--ink); margin: 2px 12px; padding: 0; cursor: pointer; text-align: start; }
.ig-icon.saved { color: var(--ink); }
.ig-name-w { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ig-and { color: var(--ink-3); font-weight: 600; }
.ig-mention { color: #00376b; font-weight: 600; text-decoration: none; }
.ig-c.reply { margin-inline-start: 38px; padding-top: 4px; }
.ig-c-acts { display: flex; gap: 12px; margin-top: 2px; }
.ig-c-acts .linkbtn { color: var(--ink-3); font-weight: 600; font-size: 12px; }
.ig-replying { display: flex; justify-content: space-between; align-items: center; padding: 6px 14px; font-size: 13px; background: #f6f6f7; border-top: 1px solid var(--rule); }
.ig-replying button { border: 0; background: none; font-size: 14px; cursor: pointer; color: var(--ink-3); }
.ig-sugg { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; border-top: 1px solid var(--rule); background: #fff; }
.ig-sugg button { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule); background: #fff; border-radius: 99px; padding: 4px 12px 4px 4px; font: inherit; cursor: pointer; }
.ig-sugg button span { display: flex; flex-direction: column; line-height: 1.15; text-align: start; }
.ig-sugg button b { font-size: 13px; }
.ig-sugg button small { font-size: 11px; color: var(--ink-3); }
.ig-send.danger { background: #fff; color: #b00; border: 1.5px solid #f1c0c0; }
.ntabs { display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.ntabs button { flex: none; font: inherit; font-size: 13px; font-weight: 600; border: 0; background: none; color: var(--ink-3); padding: 6px 10px 8px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 5px; }
.ntabs button.on { color: var(--ink); border-bottom-color: var(--red); }
.ntabs button i { font-style: normal; font-size: 10.5px; background: var(--red); color: #fff; border-radius: 99px; padding: 0 5px; line-height: 15px; }
.ig-activity .ntabs { border: 1px solid var(--rule); border-radius: 12px; background: #fff; padding: 4px 8px 0; }
.igp-tabs.three button { flex: 1; font: inherit; border: 0; background: none; color: var(--ink-3); padding: 8px 0 6px; border-top: 1.5px solid transparent; margin-top: -1px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.igp-tabs.three button small { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.igp-tabs.three button.on { color: var(--ink); border-top-color: var(--ink); }
.mine-extra { margin-top: 18px; border: 1px solid var(--rule); border-radius: 14px; background: #fafafa; padding: 0 14px; }
.mine-extra summary { cursor: pointer; padding: 12px 0; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; list-style: none; }
.mine-extra summary::-webkit-details-marker { display: none; }
.mine-extra summary::before { content: '▸'; color: var(--ink-3); font-size: 12px; }
.mine-extra[open] summary::before { content: '▾'; }
.mine-extra summary small { font-weight: 400; font-size: 12px; flex-basis: 100%; }
.mine-extra .rows { margin: 0 0 12px; }
.av-frame { position: relative; overflow: hidden; border-radius: 12px; background: #111; touch-action: none; cursor: grab; user-select: none; }
.av-frame img { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; }
.av-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.45); pointer-events: none; }
.hdr-me { display: inline-flex; padding: 3px; border-radius: 50%; border: 1.5px solid transparent; }
.hdr-me:hover { border-color: var(--red); }
@media (max-width: 600px) { .hdr-me { display: none; } }
.sg-form { display: grid; gap: 14px; }
.sg-form .seg-row { margin-bottom: 0; }
.sg-body { margin: 8px 0; white-space: pre-wrap; font-size: 14px; line-height: 1.7; }
.sg-row { align-items: flex-start; }
.row-h { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.row-h .seg-row { margin: 0; }
.unf-yes.keep { color: var(--ink); }
.mic-sheet .sheet-h small, .av-crop .sheet-h small, .ig-share .sheet-h small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }

/* v127: the pro editor — a dark console, icon tools, a status bar that names the tool under the finger */
.tp.pro { background: #1b1c20; border-color: #1b1c20; color: #eee; padding: 10px; gap: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.tp.pro .tp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tp.pro .etb-g { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.05); }
.etb { width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,.88); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .12s, color .12s, transform .08s; -webkit-tap-highlight-color: transparent; }
.etb svg { width: 22px; height: 22px; display: block; }
.etb:hover:not(:disabled), .etb:focus-visible { background: rgba(255,255,255,.12); outline: none; }
.etb:active:not(:disabled) { transform: scale(.94); }
.etb:disabled { opacity: .3; cursor: default; }
.etb.on { background: var(--red); color: #fff; }
.etb.danger:hover:not(:disabled) { background: rgba(206,0,0,.35); color: #ffb3b3; }
.etb.magic { color: #d9b8ff; }
.etb.magic:hover:not(:disabled) { background: rgba(123,63,228,.35); }
.etb.big { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.1); }
.etb.big svg { width: 24px; height: 24px; }
.etb.rec { color: #ff3b3b; background: rgba(255,59,59,.14); }
.etb.rec:hover:not(:disabled) { background: rgba(255,59,59,.3); }
.etb.rec.live { background: var(--red); color: #fff; animation: pulse 1.1s ease-in-out infinite; }
.etb-gap { width: 48px; height: 30px; margin-inline-start: -2px; border: 0; border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 12.5px; text-align: center; padding: 0 4px; }
.etb-gap:focus { outline: 1.5px solid var(--red); }
.etb-seg { display: inline-flex; border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.08); margin: 0 2px; }
.etb-seg button { font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: transparent; color: rgba(255,255,255,.8); padding: 0 11px; height: 32px; cursor: pointer; }
.etb-seg button.on { background: #7b3fe4; color: #fff; }
.tp.pro .tp-screen { background: #0f1013; border-radius: 12px; overflow: hidden; position: relative; cursor: crosshair; border: 1px solid rgba(255,255,255,.06); }
.tp.pro .tp-screen.rec { cursor: default; }
.tp.pro .tp-screen canvas.moving { cursor: copy; }
.tp.pro .tp-mini { border-top: 1px solid rgba(255,255,255,.08); cursor: grab; }
.tp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; }
.tp-empty-t { font-size: 13px; color: rgba(255,255,255,.45); }
.rec-live.big { font-size: 26px; font-weight: 700; color: #fff; }
.rec-live.big i { width: 14px; height: 14px; }
.meter.dark { width: 100%; max-width: 420px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.meter.dark i { display: block; height: 100%; width: 0; background: #5ad17a; transition: width .05s linear; }
.meter.dark i.hot { background: #ff3b3b; }
.tp-recline { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(15,16,19,.9); border-top: 1px solid rgba(255,255,255,.08); color: #fff; }
.tp-recline .rec-live { color: #fff; }
.tp.pro .tp-transport { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tp-clock { flex: 1; min-width: 90px; text-align: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.tp-clock small { color: rgba(255,255,255,.5); font-weight: 500; }
.tp-zoomg { display: inline-flex; gap: 0; padding: 2px; border-radius: 10px; background: rgba(255,255,255,.05); }
.tp-zoomg .etb { width: 34px; height: 34px; }
.tp-status { min-height: 22px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.6); padding: 2px 6px; border-top: 1px solid rgba(255,255,255,.07); }
.tp-status b { color: #fff; font-weight: 700; }
.tp.pro .tp-pre { color: rgba(255,255,255,.55); }
.tp.pro .tp-auto { color: rgba(255,255,255,.55); }
.tp.pro .tp-lvl { color: rgba(255,255,255,.6); }
.tp.pro .tp-seg { border-color: rgba(255,255,255,.15); }
.tp.pro .tp-seg button { background: transparent; color: rgba(255,255,255,.8); }
.tp.pro .tp-seg button.on { background: #7b3fe4; color: #fff; }
.tp.pro .tp-mix { border-top-color: rgba(255,255,255,.08); }
.tp.pro .tp-fader small { color: rgba(255,255,255,.45); }
.tp.pro .tp-fader output { color: #ff8a8a; }
.tp.pro .tp-fader input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--red) var(--p, 50%), rgba(255,255,255,.18) var(--p, 50%)); }
.tp.pro .tp-fader input[type=range]::-moz-range-track { background: rgba(255,255,255,.18); }
.tp.pro .tp-fader input[type=range]::-webkit-slider-thumb { background: #1b1c20; }
.tp.pro .tp-presets .tp-btn { background: transparent; color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.2); }
.tp.pro .tp-presets .tp-btn.on { background: #fff; color: #1b1c20; border-color: #fff; }
.tp.pro .mus { color: var(--ink); background: #fff; border-radius: 12px; padding: 10px; }
.te-sheet .tp.pro { box-shadow: none; }
@media (max-width: 600px) {
  .tp.pro { padding: 8px; border-radius: 14px; }
  .tp.pro .tp-tools { gap: 4px 6px; }
  .etb { width: 36px; height: 36px; }
  .tp.pro .etb-g { padding: 2px; }
}

/* v129: dubbing course closed for now */
.course-banner.soon { opacity: .75; cursor: default; filter: grayscale(.4); }
.soon-badge { display: inline-block; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--ink); border-radius: 99px; padding: 4px 12px; letter-spacing: .02em; }
.dub-soon .soon-badge { font-size: 15px; padding: 7px 18px; background: var(--red); }
.course-banner.soon { position: relative; }
@media (max-width: 600px) { .quick-grid .course-banner.soon .soon-badge { position: absolute; top: 10px; inset-inline-start: 10px; font-size: 11px; padding: 3px 9px; } }
.meter.light.big.db { height: 16px; }
.meter.light.big.db span { position: absolute; top: 1px; font-size: 9px; color: var(--ink-3); transform: translateX(-50%); pointer-events: none; }
.meter.light.big.db span:nth-of-type(1) { left: 2%; transform: none; } .meter.light.big.db span:nth-of-type(2) { left: 33.3%; } .meter.light.big.db span:nth-of-type(3) { left: 66.6%; } .meter.light.big.db span:nth-of-type(4) { left: 90%; } .meter.light.big.db span:nth-of-type(5) { left: 100%; transform: translateX(-110%); }

/* v132: partner courses (MIC) — cards, the partnership badge, the home strip */
.partner { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 6px 10px; border-radius: 12px; border: 1px solid rgba(0,0,0,.08); background: #fff; }
.partner img { height: 34px; width: auto; display: block; }
.partner span { display: flex; flex-direction: column; line-height: 1.2; }
.partner small { font-size: 10.5px; color: var(--ink-3); letter-spacing: .02em; }
.partner b { font-size: 13px; color: var(--ink); }
.partner.big { padding: 10px 14px; border-radius: 14px; }
.partner.big img { height: 52px; }
.partner.big b { font-size: 15px; }
.foot .partner { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.foot .partner img { filter: brightness(0) invert(1); opacity: .9; }
.foot .partner small { color: rgba(255,255,255,.5); }
.foot .partner b { color: #fff; }
.courses-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.courses-head > div { flex: 1; min-width: 260px; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.ccard { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.05); transition: transform .15s, box-shadow .15s; }
.ccard:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.09); }
.ccard.skel { min-height: 380px; background: linear-gradient(90deg, #f3f3f4, #fafafa, #f3f3f4); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-color: transparent; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ccard.hidden-c { opacity: .5; }
.ccard.pinned { border-color: rgba(206,0,0,.35); }
.ccard-img { position: relative; display: block; aspect-ratio: 1 / 1; background: #f3f3f4; }
.ccard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccard-ph { display: grid; place-items: center; height: 100%; font-size: 48px; }
.ccard-tag { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; border-radius: 99px; padding: 4px 10px; }
.ccard-pin { position: absolute; top: 12px; inset-inline-end: 12px; background: #fff; border-radius: 99px; padding: 3px 7px; font-size: 13px; }
.ccard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ccard-body h3 { margin: 0; font-size: 17px; line-height: 1.4; }
.ccard-price { margin: 0; font-size: 15px; display: flex; gap: 6px; align-items: baseline; }
.ccard-price b { font-size: 20px; color: var(--red); }
.ccard-price span { color: var(--ink-3); font-size: 13px; }
.ccard-price s { color: var(--ink-3); font-size: 13px; }
.ccard-note { margin: 0; font-size: 13.5px; background: #fff8e6; border: 1px solid #f1d58a; border-radius: 10px; padding: 7px 10px; }
.ccard-desc { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ccard-desc.open { display: block; -webkit-line-clamp: unset; }
.ccard-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.ccard-acts .btn { flex: 1; text-align: center; min-width: 120px; }
.btn.wa { border-color: #25D366; color: #128C7E; }
.btn.wa:hover { background: #25D366; color: #fff; border-color: #25D366; }
.btn.disabled { opacity: .5; pointer-events: none; }
.ccard-foot { font-size: 11.5px; }
.ccard-admin { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--rule); padding-top: 8px; }
.partner-sec { margin-top: 40px; padding: 22px; border-radius: 18px; background: var(--paper-2, #f6f6f7); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.partner-sec p { margin: 0; flex: 1; min-width: 240px; font-size: 14.5px; line-height: 1.8; }
.cstrip-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.cstrip-h > div { margin: 0; }
.mic-banner .cb-ic img { width: 30px; height: 30px; }
@media (max-width: 600px) { .partner img { height: 28px; } .partner.big img { height: 40px; } .courses-head { flex-direction: column; } .foot .wrap { justify-content: center; text-align: center; } }
.partner img { flex: none; }
.partner span { min-width: 0; }

/* v134: certificate request band */
.cert-sec { padding: 0 0 8px; }
.cert-band { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 24px; border-radius: 20px; background: linear-gradient(135deg, #1b1c20, #3a1414); color: #fff; }
.cert-ic { font-size: 40px; line-height: 1; }
.cert-band h2 { margin: 0 0 6px; font-size: 20px; color: #fff; }
.cert-band p { margin: 0; color: rgba(255,255,255,.78); font-size: 14.5px; line-height: 1.7; max-width: 640px; }
.cert-btn { white-space: nowrap; }
@media (max-width: 600px) { .cert-band { padding: 18px; } .cert-btn { width: 100%; text-align: center; } }
.cast-banner.cert-home { margin-bottom: 12px; background: linear-gradient(90deg, #1b1c20, #2a2340); }

/* v136: the trainer's video posts */
.ig-vpost { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0 0 10px; padding: 11px 14px; border: 1px dashed var(--red); border-radius: 12px; background: #fff; color: var(--red); font: inherit; font-weight: 700; cursor: pointer; }
.ig-vpost:hover { background: #fff4f4; }
.ig-adv.own video { background: #000; }
.vp-sheet { max-height: 92vh; }
.vp-sheet .sheet-h small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12.5px; margin-top: 3px; }
.vp-pick { display: grid; place-items: center; gap: 4px; width: 100%; padding: 36px 16px; border: 2px dashed var(--rule); border-radius: 16px; background: var(--paper-2); font: inherit; color: var(--ink); cursor: pointer; }
.vp-pick span { font-size: 40px; }
.vp-pick small { color: var(--ink-3); }
.vp-prev { background: #000; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 46vh; display: grid; place-items: center; }
.vp-prev video { width: 100%; height: 100%; object-fit: contain; display: block; }
.vp-file { margin: 8px 0 6px; text-align: center; }
.vp-cap { width: 100%; box-sizing: border-box; resize: none; font: inherit; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; margin-bottom: 10px; }
.vp-prog { height: 6px; border-radius: 6px; background: var(--paper-2); overflow: hidden; margin: 4px 0 6px; }
.vp-prog i { display: block; height: 100%; background: var(--red); transition: width .25s; }
.btn.wide { width: 100%; }

/* v137: video posts keep their shape; magnetic scrolling through posts (like reels) */
.ig-media.is-vid { width: 100%; }
.ig-media.is-vid .ig-adv video, .ig-media.is-vid .ig-adv img { object-fit: contain; }

/* v140: the feed loads the next page by itself; sheets keep their scrolling to themselves (no page scroll behind them) */
.ig-loadmore { display: grid; place-items: center; height: 56px; }
.ig-loadmore i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--ink-3); animation: spin .8s linear infinite; }
.sheet-body, .sheet, .bell-pop, .ig-menu { overscroll-behavior: contain; }

/* v141: the trainer's usage dashboard */
.stats { display: grid; gap: 18px; }
.st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.st-tile { background: var(--paper-2); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.st-tile small { color: var(--ink-3); font-size: 12.5px; }
.st-tile b { font-size: 28px; line-height: 1.1; }
.st-diff { font-size: 12px; color: var(--ink-3); } .st-diff.up { color: var(--ok); } .st-diff.down { color: var(--red); }
.st-hint { font-size: 12px; color: var(--ink-3); }
.st-range { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--ink-3); }
.st-range .ubtn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.st-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.st-chart { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 12px 14px 8px; }
.st-chart-h { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 8px; }
.st-bars { display: flex; align-items: flex-end; gap: 2px; height: 72px; }
.st-bars i { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; opacity: .9; }
.st-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.st-sec { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; }
.st-sec h3 { margin: 0 0 10px; font-size: 16px; } .st-sec h3 small { font-weight: 400; font-size: 12.5px; }
.st-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.st-list { list-style: none; margin: 0; padding: 0; } .st-list li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--paper-2); font-size: 14px; }
.st-list li > span:not(.grow) { min-width: 44px; text-align: end; }
.st-exit { color: var(--red); }
.st-errs b { font-weight: 500; font-size: 13px; overflow-wrap: anywhere; }
.st-funnel { display: grid; gap: 6px; }
.st-fstep { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--paper-2); overflow: hidden; font-size: 14px; }
.st-fstep i { position: absolute; inset: 0 auto 0 0; background: rgba(206,0,0,.14); } .st-fstep span, .st-fstep b { position: relative; }
.st-table-w { overflow: auto; } .st-table { border-collapse: collapse; font-size: 13px; } .st-table th, .st-table td { padding: 5px 8px; text-align: center; border: 1px solid var(--paper-2); }

/* v142: username first */
.ugate { max-width: 420px; text-align: start; }
.ugate h2, .ugate > p, .ugate .gask-ic { text-align: center; }
.ugate .gask-ic { font-family: var(--f-latin, inherit); font-weight: 700; }
.ugate-f { display: grid; gap: 4px; margin: 10px 0; }
.ugate-in { display: flex; align-items: center; gap: 6px; border: 1px solid var(--rule); border-radius: 12px; padding: 0 10px; background: #fff; }
.ugate-in b { color: var(--ink-3); } .ugate-in input { border: 0; flex: 1; padding: 11px 4px; font-size: 16px; outline: none; background: none; }
.ugate-st { min-height: 16px; font-size: 12.5px; color: var(--ink-3); } .ugate-st.free { color: var(--ok); } .ugate-st.taken, .ugate-st.bad { color: var(--red); }
.igp-real { margin: -4px 0 6px; color: var(--ink-2); font-weight: 600; }

/* v143: accessibility — screen readers, keyboard, braille, device preferences */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -60px; inset-inline-start: 12px; z-index: 10001; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 700; }
.skip-link:focus { top: 12px; }
#main:focus { outline: none; }
.ig-media:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
html.a11y-big { font-size: 112%; } html.a11y-big body { font-size: 1.05em; }
html.a11y-contrast { --ink-2: #111; --ink-3: #333; --rule: #999; --paper-2: #eee; } html.a11y-contrast .muted, html.a11y-contrast .small.muted { color: #333; }
html.a11y-contrast a, html.a11y-contrast .linkbtn { text-decoration: underline; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } }
.access-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.read-mode h1 { font-size: 30px; } .read-body p { font-size: 24px; line-height: 2; margin: 0 0 18px; } .read-note { margin-top: 24px; }
.a11y-set { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); } .a11y-set h3 { margin: 0 0 6px; } .a11y-set .check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }

/* v144: one take a day to the trainer */
.quota { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); background: var(--paper-2); border-radius: 10px; padding: 8px 12px; }
.quota.wait { background: #FFF6E5; color: #6b4a00; } .quota.wait b { font-weight: 700; } .quota small { color: inherit; opacity: .8; }
.quota.compact { font-size: 13px; padding: 6px 10px; }
.igp-plus { font-size: 20px; line-height: 1; font-weight: 500; min-width: 40px; }

/* v145: a new member's first take */
.start-head h1 { font-size: 30px; margin: 6px 0 8px; } .start-head p { color: var(--ink-2); font-size: 16px; line-height: 1.8; }
.start-card { background: #fff; border: 1px solid var(--rule); border-radius: 18px; padding: 18px 20px; margin: 18px 0; box-shadow: var(--sh-1); }
.start-card h2 { margin: 0 0 10px; font-size: 20px; }
.start-next { margin-top: 24px; } .start-next h3 { margin: 0 0 8px; } .start-next ol { padding-inline-start: 22px; line-height: 1.9; color: var(--ink-2); } .start-next li b { color: var(--ink); }
.start-acts { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }

/* v146: Android — older WebViews without dvh fall back to the plain viewport unit instead of ignoring the rule */
@supports not (height: 1dvh) {
  .nav { max-height: calc(100vh - 64px); } .modal, .fp { max-height: calc(100vh - 32px); } .sheet { max-height: 86vh; } .vp-sheet { max-height: 92vh; }
}

/* v147: achievements page on narrow / large-font Android screens — nothing fixed-width, everything wraps */
@media (max-width: 600px) {
  .tro-hero { padding: 18px 16px; gap: 16px; }
  .tro-hero .grow { min-width: 0; flex: 1 1 160px; }
  .tro-stats { flex-wrap: wrap; gap: 10px 14px; } .tro-stats li { flex: 1 1 80px; min-width: 0; } .tro-stats b { font-size: 22px; }
  .tro-grid li { padding: 14px 8px 12px; min-width: 0; } .tro-grid li b, .tro-grid li small, .tro-grid li span { overflow-wrap: anywhere; max-width: 100%; }
  .lvl-tro { white-space: normal; }
  .page-head h1 { overflow-wrap: anywhere; }
}
.tro-grid li, .lvl-card, .tro-hero { min-width: 0; max-width: 100%; box-sizing: border-box; }
.tro-prog { min-width: 0; } .tro-prog small, .tro-prog span { white-space: nowrap; }

/* v148: sign-in in the bar for visitors; the story heart; admin tags */
.hdr-auth { display: flex; gap: 8px; align-items: center; margin-inline-start: auto; }
.hdr-login { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 6px 8px; white-space: nowrap; }
.hdr-auth .btn.sm { min-height: 34px; padding: 0 12px; font-size: 14px; }
@media (min-width: 1101px) { .hdr-auth { display: none; } }
@media (max-width: 1100px) { .top .menu-btn { margin-inline-start: 6px; } }
@keyframes heartPop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.story-act.on svg { animation: heartPop .5s cubic-bezier(.2,.9,.3,1.4); color: #ff2d55; fill: #ff2d55; }
.story-act.on { color: #ff2d55; }
.tag.shared-tag { background: #EEF4FF; color: #1d3f8a; }

/* v149: the trainer's review card */
.rvn { background: #fff; border: 1px solid #F0D9A8; border-radius: 16px; margin: 0 0 14px; box-shadow: var(--sh-1); overflow: hidden; }
.rvn.done { padding: 12px 16px; border-color: var(--rule); color: var(--ink-2); }
.rvn-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(180deg, #FFFBF2, #fff); cursor: pointer; }
.rvn-h b { font-size: 15px; } .rvn-n { margin-inline-start: auto; font-weight: 700; } .rvn-n small { font-weight: 400; color: var(--ink-3); } .rvn-chev { color: var(--ink-3); }
.rvn-b { padding: 12px 16px 14px; display: grid; gap: 10px; }
.rvn-who { display: flex; align-items: center; gap: 10px; } .rvn-who b { display: block; } .rvn-who small { color: var(--ink-3); font-size: 12.5px; }
.rvn-tag { color: #1d3f8a; }
.rvn-note { margin: 0; background: var(--paper-2); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.rvn-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ig-feed .rvn { margin: 8px 0 12px; }

.oauth { display: grid; gap: 10px; margin: 6px 0 14px; }
.oauth-g { width: 100%; gap: 10px; background: #fff; }
.oauth-or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12.5px; } .oauth-or i { flex: 1; height: 1px; background: var(--rule); }

/* v150: the measurement page, readable */
.st-toc { display: flex; flex-wrap: wrap; gap: 6px; } .st-toc a { font-size: 13px; padding: 5px 10px; border-radius: 99px; background: var(--paper-2); color: var(--ink-2); text-decoration: none; } .st-toc a:hover { background: var(--ink); color: #fff; }
.st-why { margin: -4px 0 12px; color: var(--ink-2); font-size: 13.5px; line-height: 1.8; background: #FFFBF2; border-inline-start: 3px solid #F0D9A8; padding: 6px 10px; border-radius: 6px; }
.st-today .st-tile { background: #fff; border: 1px solid var(--rule); }
.st-daily th, .st-daily td { text-align: center; white-space: nowrap; } .st-daily td.st-day { text-align: start; font-weight: 600; } .st-daily tr.today td { font-weight: 700; } .st-daily th { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.st-list-h { font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--rule) !important; }
.stats .st-sec[id] { scroll-margin-top: 80px; }

.rvn-rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rvn-ok { font-size: 12.5px; color: var(--ok); font-weight: 600; }
.rvn-recent { margin-top: 4px; border-top: 1px dashed var(--rule); padding-top: 8px; } .rvn-recent summary { cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.rvn-recent ul { list-style: none; margin: 8px 0 0; padding: 0; } .rvn-recent li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--paper-2); font-size: 14px; } .rvn-recent .stars-row { margin: 0; }

/* v151: the measurement page on phones — nothing wider than the screen */
.stats, .stats > *, .st-sec, .st-two > * { min-width: 0; max-width: 100%; }
.st-table-w { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.st-charts { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.st-tiles { grid-template-columns: repeat(auto-fit, minmax(min(150px, 45%), 1fr)); }
@media (max-width: 600px) {
  .st-toc { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .st-toc a { white-space: nowrap; flex: none; }
  .st-tile b { font-size: 24px; } .st-sec { padding: 12px; } .st-why { font-size: 13px; }
  .st-list li { flex-wrap: wrap; } .st-list li > span:not(.grow) { min-width: 36px; }
}

/* ===== كاريوكي الكرتون ===== */
.kar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.kar-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; }
.kar-card b { font-size: 15px; } .kar-card small { color: var(--ink-2); }
.kar-cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-s); background: #111; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.kar-head .kar-cover { width: 48px; height: 48px; flex: 0 0 48px; font-size: 22px; }
.kar-mygroups { margin: 0 0 18px; } .kar-mygroups h2 { font-size: 17px; margin: 0 0 8px; }
.kar-mygroups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kar-mygroups li { display: flex; align-items: center; gap: 8px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 10px; }
.kar.booth { display: flex; flex-direction: column; min-height: calc(100vh - 64px); padding: 0 0 90px; }
.kar-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--booth-3); }
.kar-head h1 { font-size: 18px; margin: 0; } .kar-head small { color: var(--booth-ink-2); }
.kar-back { font-size: 28px; line-height: 1; text-decoration: none; padding: 0 6px; }
.kar-load { padding: 10px 16px; } .kar-load .bar { height: 4px; background: var(--booth-3); border-radius: 2px; overflow: hidden; margin-bottom: 4px; } .kar-load .bar i { display: block; height: 100%; background: var(--booth-red); }
.kar-lyrics { position: relative; flex: 1 1 auto; max-height: 38vh; overflow-y: auto; padding: 14px 16px; scroll-behavior: smooth; }
.kar-line { margin: 0 0 10px; font-size: 20px; line-height: 1.55; font-weight: 600; color: var(--booth-ink-2); cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; padding: 4px 8px; border-radius: 8px; transition: color .2s; }
.kar-line.past { color: var(--booth-ink-2); opacity: .55; }
.kar-line.on { color: var(--booth-ink); opacity: 1; background: rgba(255,255,255,.05); }
.kar-line.sel { outline: 1px dashed var(--booth-3); }
.kar-line.choir { font-weight: 500; font-style: normal; } .kar-line.choir .w { color: #8fd3ff; } .kar-line.choir.on .w { color: #bfe7ff; }
.kar-line .w { transition: color .12s; } .kar-line.on .w.on { color: var(--booth-red, #ff5a5f); }
.kar-line-meta { margin-inline-start: auto; font-size: 12px; font-weight: 400; display: inline-flex; gap: 6px; align-items: center; } .kar-line-meta i { color: #8fd3ff; font-style: normal; } .kar-line-meta b { color: #7BD89A; }
.kar-transport { padding: 8px 16px; border-top: 1px solid var(--booth-3); border-bottom: 1px solid var(--booth-3); }
.kar-transport .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .kar-transport .time { color: var(--booth-ink-2); font-size: 13px; }
.kar-rec-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kar-cur { margin: 10px 0 6px; font-size: 16px; color: var(--booth-ink); font-weight: 600; }
.kar-rec-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.kar-rec-row .meter { flex: 1 1 80px; min-width: 60px; }
.kar-count { font-size: 34px; font-weight: 800; min-width: 44px; text-align: center; color: var(--booth-red); }
.kar-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .tbtn.sm.on { background: var(--booth-ink); color: var(--booth); }
.kar-fader { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--booth-ink-2); min-width: 120px; flex: 1 1 140px; } .kar-fader input { width: 100%; accent-color: var(--booth-red); } .kar-fader b { color: var(--booth-ink); }
.kar-fx { margin-top: 10px; padding: 12px; border: 1px solid var(--booth-3); border-radius: var(--r-s); display: flex; flex-wrap: wrap; gap: 10px 14px; background: var(--booth-2); } .kar-fx .toggle { flex: 1 1 100%; } .kar-fx .row { flex: 1 1 100%; display: flex; gap: 8px; flex-wrap: wrap; } .kar-fx .linkbtn { color: var(--booth-ink-2); }
.kar-share { padding: 14px 16px; border-top: 1px solid var(--booth-3); }
.kar-group { margin-top: 12px; padding: 12px; border: 1px solid var(--booth-3); border-radius: var(--r-s); display: grid; gap: 8px; } .kar-group .in { background: var(--booth-2); color: var(--booth-ink); border-color: var(--booth-3); }
.kar-friends { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .kar-friends li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kar-admin .kar-admin-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 60vh; overflow-y: auto; }
.kar-admin .kar-admin-lines li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .kar-admin .kar-admin-lines .in.grow { flex: 1 1 200px; }
.wrap-row { flex-wrap: wrap; }
@media (max-width: 600px) { .kar-line { font-size: 18px; } .kar-lyrics { max-height: 30vh; } .kar-transport .toggle { width: 100%; } }

/* karaoke: headphones row + stacked tracks */
.kar-ears { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--booth-3); font-size: 13px; color: var(--booth-ink-2); }
.kar-ears label.small { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; flex: 1 1 100%; }
.kar-tracks { display: grid; gap: 8px; padding: 12px 16px 4px; }
.kar-tr { border: 1px solid var(--booth-3); border-radius: var(--r-s); background: var(--booth-2); overflow: hidden; transition: opacity .15s; }
.kar-tr.stem { background: transparent; }
.kar-tr.dim { opacity: .45; } .kar-tr.muted .kar-tr-name { opacity: .5; } .kar-tr.has { border-color: rgba(123,216,154,.5); }
.kar-tr.open { border-color: var(--booth-ink-2); } .kar-tr.live { border-color: var(--booth-red); box-shadow: 0 0 0 2px rgba(229,72,77,.3); }
.kar-tr-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.kar-tr-ico { font-size: 20px; flex: 0 0 auto; }
.kar-tr-name { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .kar-tr-name b { font-size: 15px; } .kar-tr-name small { color: var(--booth-ink-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kar-tr-name .ok, .kar-cur .ok { color: #7BD89A; }
.kar-chip { font-style: normal; font-size: 12px; }
.kar-tr-btns { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.kar-ms { min-width: 34px; min-height: 34px; border-radius: 8px; border: 1px solid var(--booth-3); background: transparent; color: var(--booth-ink-2); font-weight: 700; font-size: 13px; cursor: pointer; }
.kar-ms.on { background: #F5A524; border-color: #F5A524; color: #000; } .kar-ms.solo.on { background: #7BD89A; border-color: #7BD89A; }
.kar-ms.chev { font-size: 15px; }
.kar-recb { min-width: 40px; min-height: 40px; border-radius: 50%; border: 2px solid var(--booth-red); background: transparent; color: var(--booth-red); font-size: 18px; cursor: pointer; }
.kar-recb:not(:disabled):hover, .kar-recb.live { background: var(--booth-red); color: #fff; } .kar-recb:disabled { opacity: .35; cursor: default; }
.kar-strip { position: relative; height: 22px; margin: 0 12px 8px; background: rgba(255,255,255,.04); border-radius: 4px; display: flex; align-items: flex-end; gap: 1px; overflow: hidden; direction: ltr; }
.kar-strip i { flex: 1 1 0; background: #7BD89A; opacity: .85; border-radius: 1px 1px 0 0; min-width: 1px; }
.kar-strip b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--booth-red); }
.kar-tr.stem .kar-fader.row { flex-direction: row; align-items: center; gap: 10px; padding: 0 12px 10px; } .kar-tr.stem .kar-fader.row span { flex: 0 0 auto; } .kar-tr.stem .kar-fader.row input { flex: 1; }
.kar-panel { padding: 4px 12px 12px; border-top: 1px dashed var(--booth-3); }
.kar-rec-live { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.kar-rec-live .meter { flex: 1 1 60px; }
.kar-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--booth-red); animation: kar-blink 1s infinite; } @keyframes kar-blink { 50% { opacity: .2; } }
.tbtn.sm.live { background: var(--booth-red); border-color: var(--booth-red); color: #fff; }

/* karaoke: punch in/out */
.kar-strip u { position: absolute; top: 0; bottom: 0; background: rgba(229,72,77,.22); border-inline: 1px solid var(--booth-red); text-decoration: none; }
.kar-strip { cursor: pointer; }
.kar-punch { padding: 8px 0 4px; display: grid; gap: 6px; }
.kar-punch-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .kar-punch-row .lbl { color: var(--booth-ink-2); font-size: 13px; min-width: 24px; } .kar-punch-row b { min-width: 52px; font-size: 15px; }
.kar-nudge { display: inline-flex; border: 1px solid var(--booth-3); border-radius: 8px; overflow: hidden; } .kar-nudge button { background: transparent; border: 0; color: var(--booth-ink-2); min-height: 32px; padding: 0 8px; font-size: 12px; cursor: pointer; border-inline-start: 1px solid var(--booth-3); } .kar-nudge button:first-child { border: 0; } .kar-nudge button:hover { color: var(--booth-ink); }
.kar-punch p.small { margin: 2px 0 0; color: var(--booth-ink-2); }
.tbtn.sm.ico { min-width: 34px; padding: 0 8px; }

/* karaoke: waveforms, per-row controls, shortcuts */
.kar-wave { display: block; width: calc(100% - 24px); height: 56px; margin: 0 12px 10px; border-radius: 4px; cursor: crosshair; touch-action: none; }
.kar-tr.stem .kar-wave { height: 36px; opacity: .8; }
.kar-vol { width: 64px; accent-color: var(--booth-ink-2); margin-inline-end: 4px; }
.kar-ms.play { font-size: 14px; }
.kar-keys { padding: 8px 16px; font-size: 12px; color: var(--booth-ink-2); border-bottom: 1px solid var(--booth-3); line-height: 1.9; } .kar-keys b { color: var(--booth-ink); background: var(--booth-2); border: 1px solid var(--booth-3); border-radius: 4px; padding: 0 5px; font-family: ui-monospace, monospace; font-size: 11px; }
.kar-rec-state { display: inline-flex; align-items: center; gap: 8px; } .kar-rec-state .meter { width: 70px; }
.kar-rec-state .kar-count { font-size: 20px; min-width: 20px; }
.kar-nohp { color: var(--booth-ink-2); font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }
.kar-tr-h { padding: 8px 12px 6px; }
.kar-tracks .kar-tr-btns { gap: 3px; }
@media (max-width: 420px) { .kar-vol { width: 44px; } .kar-ms { min-width: 30px; min-height: 32px; } .kar-recb { min-width: 36px; min-height: 36px; } }

.kar-add { width: 100%; min-height: 44px; border: 1px dashed var(--booth-3); border-radius: var(--r-s); background: transparent; color: var(--booth-ink-2); font-weight: 600; cursor: pointer; } .kar-add:hover:not(:disabled) { color: var(--booth-ink); border-color: var(--booth-ink-2); } .kar-add:disabled { opacity: .5; cursor: default; } .kar-add small { font-weight: 400; }
.kar-add-form { padding: 10px 12px; } .kar-add-form .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .kar-add-form .in, .kar-own .in { background: var(--booth); color: var(--booth-ink); border-color: var(--booth-3); }
.kar-own { display: flex; gap: 12px; align-items: center; padding: 6px 0 2px; flex-wrap: wrap; } .kar-own .linkbtn { color: var(--booth-ink-2); } .kar-own form.row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kar-chip.role { color: var(--booth-ink-2); font-weight: 400; font-size: 11px; border: 1px solid var(--booth-3); border-radius: 999px; padding: 0 6px; }

.kar-video { position: relative; background: #000; }
.kar-video video { display: block; width: 100%; max-height: 34vh; object-fit: contain; background: #000; }
.kar-video.off { background: transparent; text-align: center; padding: 4px 0; }
.kar-vid-x { position: absolute; top: 6px; inset-inline-end: 8px; background: rgba(0,0,0,.55); color: #fff; border: 0; border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; } .kar-video.off .kar-vid-x { position: static; background: var(--booth-2); color: var(--booth-ink-2); }
@media (max-width: 600px) { .kar-video video { max-height: 28vh; } .kar-lyrics { max-height: 24vh; } }

.tbtn.ico.big { min-width: 52px; min-height: 48px; padding: 0; justify-content: center; border-radius: 999px; background: var(--booth-ink); color: var(--booth); border-color: var(--booth-ink); } .tbtn.ico.big.live { background: var(--booth-red); border-color: var(--booth-red); color: #fff; }
.kar-ms.play, .kar-recb { display: inline-flex; align-items: center; justify-content: center; } .kar-recb svg { width: 18px; height: 18px; }

.kar button, .kar canvas, .kar input[type=range] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.kar-debug { font-size: 10px; background: #000; color: #0f0; margin: 0; padding: 4px 8px; white-space: pre-wrap; }

.kar-admin-t input { width: 64px; padding: 2px 4px; min-height: 26px; font-size: 12px; }

/* story scripts: each part in its own colour */
.tl p.tl-part { color: var(--part); border-inline-start: 4px solid var(--part); padding-inline-start: .5em; }
.tl-who { display: inline-block; font-size: .6em; font-weight: 800; line-height: 1.5; vertical-align: .3em; padding: .05em .7em; border-radius: 99px; background: var(--part); color: #fff; margin-inline-end: .2em; white-space: nowrap; }
.tl.stage p.tl-part { border-inline-start-width: 6px; }

.mk-who { display: inline-block; color: #fff; font-weight: 800; font-size: .7em; line-height: 1.5; padding: .05em .7em; border-radius: 99px; vertical-align: .2em; margin-inline-end: .2em; }
.mk-chip { display: inline-block; font-size: .62em; line-height: 1.5; vertical-align: .25em; padding: .05em .6em; border-radius: 99px; background: #FDECEC; color: #9B1C1C; font-weight: 600; margin-inline-end: .15em; white-space: nowrap; }
.mk-part { color: var(--part); }

/* ===================== the desktop editor of the ad studio (DAW view) ===================== */
.daw-page { padding: 0 0 40px; }
.daw-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 22px 10px; border-bottom: 1px solid var(--booth-3); }
.daw-title { display: flex; flex-direction: column; gap: 2px; margin-inline-end: 8px; min-width: 180px; }
.daw-title h1 { font-size: 22px; margin: 0; }
.daw-top .switch.small { font-size: 13px; color: var(--booth-ink-2); display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.daw-loading { padding: 12px 22px 0; }
.daw-main { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; padding: 16px 22px 0; align-items: start; }
@media (min-width: 1400px) { .daw-main { grid-template-columns: 380px minmax(0, 1fr); } }
.daw-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 72px; }
.daw-side .screen { aspect-ratio: 16/9; }
.daw-side .screen .sub { font-size: 15px; padding: 10px 12px; }
.daw-side .cues { max-height: 34vh; }
.daw-side .panel { padding: 12px 14px; margin-top: 0 !important; }
.daw-side .panel h3 { margin-top: 0; }
.daw-transport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.daw-transport .tbtn { min-height: 40px; }
.daw-work { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.daw-pub .panel { margin-top: 0 !important; }
.daw { background: #141518; border: 1px solid var(--booth-3); border-radius: 14px; padding: 10px 10px 8px; color: var(--booth-ink); user-select: none; -webkit-user-select: none; }
.daw-empty { min-height: 380px; }
.daw-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.daw-tools { display: inline-flex; gap: 4px; align-items: center; }
.daw-tools button, .daw-insp button { font: inherit; font-size: 13px; background: var(--booth-3); color: var(--booth-ink); border: 0; border-radius: 8px; padding: 6px 11px; cursor: pointer; white-space: nowrap; }
.daw-tools button.on { background: var(--booth-ink); color: var(--booth); }
.daw-tools button:disabled, .daw-insp button:disabled { opacity: .4; cursor: default; }
.daw-zoom { margin-inline-start: auto; }
.daw-zoom input[type=range] { width: 130px; accent-color: var(--booth-ink-2); direction: ltr; }
.daw-lanes { position: relative; border-radius: 8px; overflow: hidden; background: #0f1012; border: 1px solid #22242a; }
.daw-row { display: flex; align-items: stretch; border-bottom: 1px solid #22242a; }
.daw-row:last-of-type { border-bottom: 0; }
.daw-name { flex: none; width: var(--name-w, 118px); box-sizing: border-box; font-size: 12px; color: var(--booth-ink-2); display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px; background: #17181c; border-right: 1px solid #22242a; direction: rtl; text-align: right; }
.daw-row.mine .daw-name { color: #ffb0b0; font-weight: 700; }
.daw-row.ruler .daw-name { font-size: 12px; }
.daw-clock { font-size: 15px; color: var(--booth-ink); font-weight: 700; letter-spacing: .02em; }
.daw-clock small { font-size: 10px; color: var(--booth-ink-2); font-weight: 600; }
.daw-lane { position: relative; flex: 1 1 auto; min-width: 0; touch-action: none; }
.daw-row.ruler .daw-lane { cursor: pointer; background: #121317; }
.daw-row.daw-locked .daw-lane { background: repeating-linear-gradient(90deg, transparent 0 59px, rgba(255,255,255,.025) 59px 60px); cursor: pointer; }
.daw-row.video .daw-lane { background: repeating-linear-gradient(90deg, #2a2d35 0 44px, #22252c 44px 46px); }
.daw-row.text .daw-lane { cursor: pointer; }
.daw-row.mine .daw-lane { background: repeating-linear-gradient(90deg, transparent 0 59px, rgba(255,255,255,.035) 59px 60px); }
.daw-c { display: block; width: 100%; }
.daw-head { position: absolute; top: 0; bottom: 0; width: 2px; background: #ffd23f; pointer-events: none; z-index: 4; box-shadow: 0 0 6px rgba(255,210,63,.6); }
.daw-head::before { content: ''; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top: 8px solid #ffd23f; }
.daw-meter { display: block; height: 5px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; direction: ltr; }
.daw-meter i { display: block; height: 100%; background: #2fbf71; }
.daw-meter i.hot { background: var(--red); }
.daw-scroll { width: 100%; margin: 6px 0 0; accent-color: var(--booth-ink-2); direction: ltr; height: 14px; }
.daw-insp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; min-height: 34px; font-size: 13px; }
.daw-insp b { margin-inline-end: 6px; }
.daw-insp label { display: inline-flex; align-items: center; gap: 6px; color: var(--booth-ink-2); }
.daw-insp input[type=range] { width: 120px; accent-color: #ffe678; direction: ltr; }
.daw-insp input[type=number] { width: 64px; font: inherit; font-size: 13px; background: var(--booth-3); color: var(--booth-ink); border: 0; border-radius: 6px; padding: 4px 6px; direction: ltr; }
.daw-insp button.x { color: #ffb0b0; }
.daw-help { line-height: 1.6; }

/* ⛶ full screen on any picture */
.fs-btn { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 6; width: 34px; height: 34px; border-radius: 8px; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; display: grid; place-items: center; }
.screen:hover .fs-btn, .ig-media:hover .fs-btn, .kar-video:hover .fs-btn, .fs-btn:focus-visible { opacity: 1; }
@media (hover: none) { .fs-btn { opacity: .75; } }
.ig-media .fs-btn { top: auto; bottom: 12px; }
.ig-media.is-ad .ig-rate ~ .fs-btn, .ig-media .fs-btn { inset-inline-end: 12px; }
:fullscreen { background: #000; }
.screen:fullscreen, .ig-media:fullscreen, .kar-video:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100vh; display: grid; place-items: center; }
.screen:fullscreen video, .ig-media:fullscreen video, .kar-video:fullscreen video { width: 100vw; height: 100vh; max-height: none; object-fit: contain; }
.screen:fullscreen .sub { font-size: clamp(22px, 3vw, 40px); padding: 24px 40px; }
.ig-media:fullscreen .ig-title { display: none; }
.ig-media:fullscreen .ig-seek { height: 40px; }
:fullscreen .fs-btn { opacity: .6; }

/* ===================== karaoke on the desktop: song left, multitrack right ===================== */
.kar-wide { padding-bottom: 30px; }
.kar-wide-main { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; padding: 10px 18px 0; align-items: start; }
@media (min-width: 1400px) { .kar-wide-main { grid-template-columns: 420px minmax(0, 1fr); } }
.kar-wide-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 72px; }
.kar-wide-side .kar-video video { max-height: 30vh; }
.kar-wide-side .kar-lyrics { max-height: 36vh; border: 1px solid var(--booth-3); border-radius: 12px; }
.kar-wide-side .kar-transport { padding: 0; }
.kar-wide-side .kar-share { padding: 12px 0 0; }
.kar-wide-work { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kar-wide-panel { margin: 0; }
.kar-wide-panel .kar-tr-h { cursor: default; }
.daw-kh { display: flex; flex-direction: column; gap: 6px; padding: 2px 0; direction: rtl; }
.daw-kh b { font-size: 12.5px; color: var(--booth-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daw-kh small { font-weight: 400; color: var(--booth-ink-2); }
.daw-kh-b { display: flex; align-items: center; gap: 4px; }
.daw-kh-b .kar-vol { width: 70px; }
.daw-kh-b .kar-recb { width: 30px; height: 30px; }
.daw-kh.open b { color: #ffe678; }
.daw-row.mine .daw-name { color: var(--booth-ink); font-weight: 600; }
.dub-daw { margin-top: 18px; }

.rec-daw { margin: 12px 0; background: var(--booth); color: var(--booth-ink); border-radius: 14px; padding: 12px; }
.rec-daw .time { color: var(--booth-ink-2); }

/* v69: graduates of the voice-acting & dubbing course — a quiet black mark beside the name, in the site's own black and light grey */
.dub-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .01em; color: #e9e9ec; background: linear-gradient(135deg, #1b1c20, #3a3b42); border-radius: 999px; padding: 2px 8px 2px 7px; vertical-align: 2px; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 1px 2px rgba(0,0,0,.18); }
.dub-badge svg { opacity: .85; flex: none; }
h1 .dub-badge { vertical-align: middle; font-size: 12px; }
.dir-txt .dub-badge, .dir-txt .elite-badge, .dir-txt .coach-badge, .dir-txt .tag { align-self: flex-start; }
.dub-badge svg { width: 13px; height: 13px; }