/* =====================================================================
   app.css — page layout for the product. Components and tokens come from
   tokens.css / components.css (shipped as exported from the design system);
   this file only arranges them. Logical properties throughout.
   Breakpoints: phone < 600 · tablet 600–1023 · desktop ≥ 1024.
   ===================================================================== */

html, body { margin: 0; min-height: 100%; }
body { background: var(--bg-primary); }
:root { --m: var(--margin-compact); }
@media (min-width: 600px) { :root { --m: var(--margin-regular); } }
@media (min-width: 1024px) { :root { --m: var(--margin-wide); } }

/* Phosphor icons are filled glyphs (components.css .ico is for stroked stand-ins). */
.ph { display: block; flex: none; }
[hidden] { display: none !important; }
.link-tint { color: var(--tint-text); font-weight: 600; text-decoration: none; }
.link-tint:hover { text-decoration: underline; }
.link-tap { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }
.btn .spinner { display: none; }
.btn.is-loading .spinner { display: block; }
.btn.is-loading > span { visibility: hidden; }
.seg-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.meta-watched { display: inline-flex; align-items: center; gap: 4px; color: var(--success); }
.row-watched { color: var(--success); }

/* ---------- Navigation ---------- */
.app-nav { position: sticky; top: 0; z-index: 10; padding: 0; background: var(--bg-primary); transition: box-shadow var(--duration-fast); }
.app-nav.is-scrolled { background: var(--material-regular-bg); -webkit-backdrop-filter: var(--material-regular-filter); backdrop-filter: var(--material-regular-filter); }
@media (prefers-reduced-transparency: reduce) { .app-nav.is-scrolled { background: var(--material-regular-fallback); backdrop-filter: none; } }
.app-nav-inner { width: 100%; max-width: 1360px; margin-inline: auto; min-height: 60px; padding-inline: calc(var(--m) - 12px) var(--m); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.app-nav-inner > .brand { margin-inline-start: 12px; }
.nav-back { padding-inline: 4px 12px; gap: 2px; min-width: 0; max-width: min(480px, 70vw); }

/* ---------- Page shells ---------- */
.page { max-width: 1360px; margin-inline: auto; padding: 4px var(--m) 64px; display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 600px) { .page { gap: 36px; } }
.section { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.page-title { margin: 4px 0 0; font-size: 34px; font-weight: 700; line-height: 41px; letter-spacing: -0.02em; }
.page-title:lang(ar) { line-height: 52px; letter-spacing: 0; }
@media (min-width: 600px) {
  .page-title { font-size: 48px; line-height: 52px; }
  .page-title:lang(ar) { line-height: 68px; }
}

/* ---------- Library: shelf & collections ---------- */
.shelf-arrows { display: none; gap: var(--space-2); }
@media (min-width: 1024px) and (hover: hover) { .shelf-arrows { display: flex; } }
.shelf-wrap { position: relative; margin-inline-end: calc(-1 * var(--m)); }
@media (min-width: 1024px) { .shelf-wrap { margin-inline-end: 0; } .shelf-wrap .shelf-fade { display: none; } }
.app-shelf { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; grid-auto-columns: 288px; padding-block: 4px 8px; padding-inline-end: var(--m); scroll-padding-inline: 0; }
.app-shelf::-webkit-scrollbar { display: none; }
@media (min-width: 600px) { .app-shelf { grid-auto-columns: 340px; } }
@media (min-width: 1024px) { .app-shelf { grid-auto-columns: 400px; padding-inline-end: 0; } }

.grid-collections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 20px; }
@media (min-width: 600px) { .grid-collections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-collections { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.thumb-cover { border-radius: var(--radius-lg); }
.cover-title { position: absolute; inset-inline: 18px; bottom: 16px; color: var(--on-media); }
.cover-progress { display: flex; align-items: center; gap: 10px; }

/* ---------- Collection ---------- */
.col-head { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.col-cover { width: 100%; flex: none; border-radius: var(--radius-lg); }
.col-info { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.col-title { font-size: 28px; font-weight: 700; line-height: 34px; letter-spacing: -0.02em; }
.col-title:lang(ar) { line-height: 44px; letter-spacing: 0; }
.col-actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.col-cta { width: 100%; }
.col-ring { display: flex; align-items: center; gap: 10px; }
@media (min-width: 1024px) {
  .col-head { flex-direction: row; align-items: center; gap: 36px; }
  .col-cover { width: 440px; }
  .col-title { font-size: 34px; line-height: 41px; }
  .col-title:lang(ar) { line-height: 52px; }
  .col-cta { width: auto; }
}
.col-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.col-tools .search-box { flex: 1 1 100%; }
@media (min-width: 1024px) {
  .col-tools { flex-wrap: nowrap; justify-content: space-between; }
  .col-tools .search-box { flex: 0 1 360px; }
}
.chapters { display: flex; flex-direction: column; gap: 4px; }
.chapter + .chapter .chapter-head { border-top: 0.5px solid var(--separator); }
.chapter-head .chev { transition: transform var(--duration-base) var(--ease-standard); }
.chapter-body { padding-block: 8px 20px; }
.grid-lessons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 20px; }
@media (min-width: 600px) { .grid-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-lessons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grid-lessons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.list-lessons { display: flex; flex-direction: column; }
.list-lessons .lrow-thumb { width: 112px; }
@media (min-width: 1024px) { .list-lessons .lrow-thumb { width: 160px; } }
.lrow-dur { flex: none; }
.chapters[data-view="grid"] .view-list, .chapters[data-view="list"] .view-grid { display: none; }
.no-results { text-align: center; padding: 48px 0; margin: 0; }

/* ---------- Lesson ---------- */
.page-lesson { max-width: 1440px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 1024px) { .page-lesson { grid-template-columns: minmax(0, 1fr) 380px; } }
.lesson-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.lesson-info { display: flex; flex-direction: column; gap: 6px; }
.lesson-title { font-size: 22px; font-weight: 700; line-height: 28px; letter-spacing: -0.01em; }
.lesson-title:lang(ar) { line-height: 36px; letter-spacing: 0; }
@media (min-width: 1024px) {
  .lesson-title { font-size: 28px; line-height: 34px; letter-spacing: -0.02em; }
  .lesson-title:lang(ar) { line-height: 44px; letter-spacing: 0; }
}
.lesson-nav { display: flex; gap: 12px; justify-content: space-between; }
.lesson-nav > .btn { flex: 1; }
@media (min-width: 1024px) { .lesson-nav { justify-content: flex-start; } .lesson-nav > .btn { flex: 0 0 auto; } }
.lesson-side { display: flex; flex-direction: column; gap: 4px; }
.lesson-side-head { display: flex; flex-direction: column; padding: 0 0 8px; }
@media (min-width: 1024px) {
  .lesson-side { position: sticky; top: 76px; border-radius: var(--radius-lg); background: var(--bg-secondary); padding: 16px 8px 8px; }
  .lesson-side-head { padding: 0 10px 8px; }
}
@media (max-width: 1023px) { .lesson-side .lrow { padding-inline: 0; } }
.player .frame.thumb { aspect-ratio: auto; }
.player .frame .thumb-num { font-size: clamp(64px, 14vw, 160px); inset-inline-end: 4%; bottom: 2%; }

/* ---------- Auth ---------- */
.auth-page { min-height: 100dvh; display: flex; flex-direction: column; }
.auth-nav { padding-inline: var(--m); min-height: 64px; }
.auth-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 48px var(--m) 16px; }
.auth-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 28px; }
.auth-intro { display: flex; flex-direction: column; gap: 8px; }
.auth-form { display: flex; flex-direction: column; gap: 20px; }
.auth-footer { padding: 0 var(--m) 28px; display: flex; justify-content: center; }
.auth-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-md); color: var(--label-primary); }
.auth-note .ph { margin-top: 3px; }
.auth-note-neutral { background: var(--fill-quaternary); }
.auth-note-neutral .ph { color: var(--label-secondary); }
.auth-alt { display: flex; flex-direction: column; gap: 20px; }
.auth-or { display: flex; align-items: center; gap: 12px; }
.auth-or > span:not(.t-footnote) { flex: 1; height: 1px; background: var(--separator); }
.g-button-slot { display: flex; justify-content: center; min-height: 44px; }
.auth-brand-wide { display: none; }
@media (min-width: 600px) {
  .auth-page { background: var(--bg-grouped-primary); }
  .auth-main { justify-content: center; padding-top: 0; padding-bottom: 40px; }
  .auth-card { padding: 40px; border-radius: var(--radius-xl); background: var(--bg-grouped-secondary); box-shadow: var(--shadow-card), 0 0 0 1px var(--elevation-border); }
  .auth-back-phone { display: none; }
  .auth-brand-wide { display: block; }
}

/* OTP: one real input over six drawn cells. */
.otp-form { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.otp-field { position: relative; }
.otp-input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0;
  font-size: 16px; color: transparent; background: transparent; caret-color: transparent; z-index: 1; cursor: text;
}
.otp-status { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; min-height: 52px; }
.otp-inline { display: inline-flex; gap: 6px; align-items: center; }
.otp-ok { color: var(--success); }
.resend { display: flex; justify-content: center; min-height: 44px; align-items: center; }

/* ---------- System pages ---------- */
.sys-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 var(--m) 80px; min-height: calc(100dvh - 64px); }
.sys-card { max-width: 400px; gap: 12px; }
.sys-glyph { background: var(--fill-tertiary); color: var(--label-primary); }
.sys-404 { font-family: Inter, sans-serif; font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--label-tertiary); margin-bottom: 8px; }
.sys-actions { display: flex; flex-direction: column; gap: 4px; align-self: stretch; margin-top: 16px; }

/* ---------- Account sheet / dialog ---------- */
.acct { border: 0; padding: 8px var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom)); color: var(--label-primary); background: var(--bg-sheet);
  flex-direction: column; gap: 20px; width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.acct[open] { display: flex; }
.acct::backdrop { background: var(--scrim); }
.acct-grabber { margin-bottom: 0; }
.acct-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.acct-who { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.acct-section { display: flex; flex-direction: column; gap: 6px; }
.acct form { margin: 0; }
@media (min-width: 600px) {
  .acct { width: 440px; margin: auto; border-radius: var(--radius-xl); padding: var(--space-6); }
  .acct-grabber { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .acct[open] { animation: acct-in var(--duration-slow) var(--ease-emphasized); }
  @keyframes acct-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- View transitions (thumbnail → player) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- Fixes on top of components.css ---------- */
/* Focus is drawn by the field's wrapper (like the design's .is-focus), not the bare input. */
.input-wrap:focus-within { border-color: var(--tint); box-shadow: 0 0 0 4px var(--tint-subtle); background: var(--bg-primary); }
.input-wrap.is-error:focus-within { border-color: var(--danger); box-shadow: none; background: var(--danger-subtle); }
.input-wrap .input:focus-visible, .search-box .input:focus-visible { outline: none; }
.search-box:focus-within { border-color: var(--tint); box-shadow: 0 0 0 4px var(--tint-subtle); }
.otp-cell.is-error.is-focus, .otp-cell.is-success.is-focus { box-shadow: none; }
.otp-cell.is-error.is-focus::after { display: none; }
/* Disclosure: a collapsed chapter's chevron points to the inline end (› in LTR, ‹ in RTL). */
.chapter-head.is-collapsed .chev { transform: rotate(-90deg); }
[dir="rtl"] .chapter-head.is-collapsed .chev { transform: rotate(90deg); }

/* ---------- Demo mode (preview deployments only) ---------- */
.demo-note { background: var(--warning-subtle); }
.demo-note > .ph { color: var(--warning); }
.demo-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.demo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.demo-pick { border: 0; background: none; padding: 0; min-height: 32px; font: inherit; font-size: 15px; color: var(--tint-text); cursor: pointer; text-decoration: underline; }
.demo-code { font-family: Inter, sans-serif; font-size: 20px; letter-spacing: 0.08em; }

/* ---------- Player (board 07–09) ---------- */
.vp { container-type: inline-size; outline: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.vp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.vp[data-loaded] .vp-poster { visibility: hidden; }
.vp[data-loaded] { background: var(--player-bg); }
.vp-hit { position: absolute; inset: 0; }
.vp.is-idle-ui { cursor: none; }
.vp .p-top, .vp .p-bar, .vp .vp-compact-center, .vp .vp-bigplay {
  transition: opacity var(--duration-base) var(--ease-standard);
}
.vp.is-idle-ui .p-top, .vp.is-idle-ui .p-bar, .vp.is-idle-ui .vp-compact-center { opacity: 0; pointer-events: none; }
.vp .p-top { z-index: 2; }
.vp .p-bar { z-index: 3; }
.vp .vp-top-title { display: none; }
.vp.is-full .vp-top-title { display: block; }
.vp .p-top { padding-block-end: 12px; }
.vp:not(.is-full) .p-top { background: none; justify-content: flex-end; }

/* Before first play and after the end: the big button. While loading: the spinner. */
.vp .vp-bigplay, .vp .vp-spinner { display: none; z-index: 2; }
.vp[data-state="idle"]:not([data-buffering]) .vp-bigplay,
.vp[data-state="ended"] .vp-bigplay { display: grid; }
.vp[data-buffering] .vp-spinner { display: grid; }
.vp-bigplay .ph { margin-inline-start: 4px; }
[dir="rtl"] .vp-bigplay .ph { margin-inline-start: 0; margin-inline-end: 4px; }

/* Play/pause and sound/mute glyph swaps. */
.vp .vp-when-playing, .vp .vp-when-muted, .vp .vp-when-full { display: none; }
.vp[data-state="playing"] .vp-when-playing { display: contents; }
.vp[data-state="playing"] .vp-when-paused { display: none; }
.vp[data-muted] .vp-when-muted { display: contents; }
.vp[data-muted] .vp-when-sound { display: none; }
.vp.is-full .vp-when-full { display: contents; }
.vp.is-full .vp-when-windowed { display: none; }
.vp .pbtn .ph { pointer-events: none; }

/* Scrub bar: thumb and time bubble appear on hover and while dragging. */
.vp .scrub-thumb, .vp .scrub-bubble { opacity: 0; pointer-events: none; transition: opacity var(--duration-fast); }
.vp .scrub:hover .scrub-thumb, .vp .scrub.is-active .scrub-thumb, .vp .scrub:focus-visible .scrub-thumb { opacity: 1; }
.vp .scrub:hover .scrub-bubble, .vp .scrub.is-active .scrub-bubble { opacity: 1; }
.vp .scrub:hover .scrub-track { height: 8px; }
.vp .scrub:focus-visible { outline: 2px solid var(--on-media); outline-offset: 2px; border-radius: 6px; }
.vp-volume { display: flex; align-items: center; gap: 4px; }
.vp-vol { width: 72px; height: 44px; display: flex; align-items: center; cursor: pointer; }
.vp-vol:focus-visible { outline: 2px solid var(--on-media); outline-offset: 2px; border-radius: 6px; }

/* Wide vs compact (the player's own width, not the viewport). */
.vp .vp-compact-only, .vp .vp-compact-center { display: none; }
@container (max-width: 599px) {
  .vp .vp-wide-only { display: none; }
  .vp .vp-compact-only { display: grid; }
  .vp .vp-compact-center { display: flex; position: absolute; inset: 0; margin: auto; height: max-content; justify-content: center; align-items: center; gap: 28px; z-index: 2; }
  .vp[data-state="idle"] .vp-compact-center, .vp[data-buffering] .vp-compact-center { display: none; }
  .vp .p-bar { inset-inline: 8px; bottom: 8px; }
  .vp .vp-cc-play { width: 60px; height: 60px; }
  .vp .wm { font-size: 12px; }
}

/* Menus, HUD, reconnecting pill, up next. */
.vp-menu { position: absolute; z-index: 6; inset-inline-end: 16px; bottom: 104px; color: var(--label-primary); max-height: calc(100% - 120px); overflow: auto; }
@container (max-width: 599px) { .vp-menu { top: 52px; bottom: auto; inset-inline-end: 8px; } }
.vp-menu .menu-label { text-align: start; }
.vp .hud { z-index: 4; }
.vp-pill { z-index: 4; inset-inline-start: 16px; bottom: 112px; }
@container (max-width: 599px) { .vp-pill { bottom: 64px; inset-inline-start: 8px; } }
.vp .upnext { z-index: 5; color: var(--on-media); }
@container (max-width: 599px) { .vp .upnext { inset-inline: 8px; width: auto; bottom: 64px; } }
.vp-upnext-row { display: flex; gap: 12px; align-items: center; }
.vp-upnext-thumb { width: 120px; flex: none; border-radius: 8px; }
.vp-upnext-thumb .thumb-num { font-size: 28px; inset-inline-end: 8px; bottom: 2px; }
.vp-upnext-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.vp-upnext-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.c-media2 { color: var(--on-media-secondary); }

/* Blocking card (error, another device, paused, session ended) and "not available yet". */
.vp .p-block, .vp-unavailable .p-block { z-index: 7; }
.vp[data-blocked] .p-bar, .vp[data-blocked] .p-top, .vp[data-blocked] .vp-compact-center, .vp[data-blocked] .vp-bigplay { display: none; }
.vp-card-actions { display: flex; flex-direction: column; gap: 4px; align-self: stretch; margin-top: 8px; }
@container (max-width: 599px) {
  .p-card { padding: 20px 16px 16px; gap: 8px; }
  .p-card .p-card-glyph { width: 44px; height: 44px; }
  .p-card .t-title-3 { font-size: 17px; line-height: 24px; }
}
.vp-unavailable { container-type: inline-size; }
.vp-unavailable .p-block { background: rgba(0, 0, 0, 0.55); }

/* Watermark: top layer, moved by player.ts; fades 600 ms around each move. */
.vp .wm { z-index: 30; transition: opacity 600ms var(--ease-standard); }
.vp .wm.is-fading { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .vp .wm.vp-wm-live { animation: vp-wm-drift 14s ease-in-out infinite alternate; }
  @keyframes vp-wm-drift { from { translate: 0 0; } to { translate: 1% 1.5%; } }
}

/* Full screen: element fullscreen, or filling the viewport where that isn't available (iPhone). */
.vp.is-full { border-radius: 0; }
.vp:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; }
.vp.is-pseudo-full { position: fixed; inset: 0; z-index: 100; width: 100vw; height: 100dvh; aspect-ratio: auto; border-radius: 0; }
.vp-lock-scroll, .vp-lock-scroll body { overflow: hidden; }
.vp .vp-spinner { pointer-events: none; }
/* Phone sheet for blocking states (outside the player so it can cover the page). */
.vp-sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; background: var(--scrim-strong); }
.vp-sheet[hidden] { display: none; }
.vp-sheet-card { width: 100%; padding: 28px var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom)); color: var(--label-primary); }
.vp-sheet-card .p-card { width: 100%; padding: 0; background: none; gap: 12px; }
.vp-sheet-card .p-card-glyph { background: var(--fill-tertiary); color: var(--label-primary); }
.vp-sheet-card .c-media2 { color: var(--label-secondary); }
@media (prefers-reduced-motion: no-preference) {
  .vp-sheet:not([hidden]) .vp-sheet-card { animation: acct-in var(--duration-slow) var(--ease-emphasized); }
}

/* ---------- Brand mark (no brand name: a solid tinted play mark replaces the dashed logo slot) ---------- */
.brand-mark { border: 0; background: var(--tint-subtle); color: var(--tint-text); }
.brand-word { color: var(--label-primary); }

/* ---------- Admin ---------- */
.adm { background: var(--bg-grouped-primary); }
.adm .app-nav { background: var(--bg-grouped-primary); }
.adm-nav { flex-direction: column; align-items: stretch; gap: 0; }
.adm-tabs-wrap { width: 100%; box-sizing: border-box; }
.adm-nav-end { display: flex; align-items: center; gap: 4px; }
.adm-nav-end .btn { gap: 6px; }
@media (max-width: 599px) { .adm-nav-end .btn span { display: none; } }
.adm-tabs-wrap { max-width: 1040px; margin-inline: auto; padding: 0 var(--m) 10px; overflow-x: auto; scrollbar-width: none; }
.adm-tabs-wrap::-webkit-scrollbar { display: none; }
.adm-tabs { display: flex; width: max-content; min-width: 100%; }
.adm-tabs .seg-item, .adm-filter .seg-item { flex: 1; text-decoration: none; white-space: nowrap; }
@media (min-width: 600px) { .adm-tabs { min-width: 0; } .adm-tabs .seg-item { flex: none; padding-inline: 20px; } }
.adm-page { max-width: 1040px; gap: 28px; padding-top: 16px; }
.adm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
.adm-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-back { align-self: flex-start; margin-inline-start: -12px; gap: 2px; max-width: 100%; }
.adm-title { margin: 0; font-size: 28px; font-weight: 700; line-height: 34px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.adm-title:lang(ar) { line-height: 44px; letter-spacing: 0; }
@media (min-width: 600px) { .adm-title { font-size: 34px; line-height: 41px; } .adm-title:lang(ar) { line-height: 52px; } }
.adm-head-actions, .adm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.adm-section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.adm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.adm-group-label { margin: 0; padding-block-end: 0; font-weight: 400; }
.adm-note { margin: 0; padding-inline: 16px; }
.adm-card { background: var(--bg-grouped-secondary); border-radius: var(--radius-lg); padding: 16px; }
.adm-form { display: flex; flex-direction: column; gap: 20px; }
.adm-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .adm-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; } }
.adm-form-grid > .input-wrap, .adm-form-grid .adm-tones { min-width: 0; }
.adm-form-actions { display: flex; justify-content: flex-start; }
@media (max-width: 599px) { .adm-form-actions .btn { width: 100%; } }
.adm-inline-form { margin: 0; display: contents; }
.adm-danger { display: flex; padding-top: 8px; border-top: 0.5px solid var(--separator); }
.adm-danger .btn { margin-top: 20px; }

/* Stats */
.adm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .adm-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.adm-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--bg-grouped-secondary); color: var(--label-primary); text-decoration: none; transition: background-color var(--duration-fast); }
.adm-stat:hover { background: color-mix(in srgb, var(--bg-grouped-secondary) 92%, var(--label-primary)); }
.adm-stat:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.adm-stat-n { font-family: Inter, var(--font-sans); font-size: 28px; font-weight: 700; line-height: 34px; font-variant-numeric: tabular-nums; }

/* Lists */
.adm-tools { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.adm-tools .search-box { flex: 1 1 280px; }
.adm-filter { display: flex; }
.adm-filter-wide { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.adm-link-row { transition: background-color var(--duration-fast); }
.adm-link-row:hover { background: var(--fill-quaternary); }
.adm-link-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.adm-row-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.adm-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.adm-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; }
.adm-act .row-accessory { align-self: flex-start; padding-top: 4px; white-space: nowrap; }
.adm-empty { padding: 40px 0; }
.adm-swatch { width: 44px; height: 44px; aspect-ratio: auto; flex: none; border-radius: 10px; }
.adm-note, .field-help.is-error, [data-up-status].is-error { overflow-wrap: anywhere; }
[data-up-status].is-error { color: var(--danger); }

/* Controls on native inputs, drawn like the design's switch and checkbox */
.adm-row-control { cursor: pointer; }
.adm-switch { appearance: none; -webkit-appearance: none; position: relative; margin: 0; width: 51px; height: 31px; flex: none; border-radius: var(--radius-full); background: var(--fill-primary); cursor: pointer; transition: background-color var(--duration-base) var(--ease-standard); }
.adm-switch::before { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 27px; height: 27px; border-radius: var(--radius-full); background: var(--switch-thumb); box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.16); transition: inset-inline-start var(--duration-base) var(--ease-emphasized); }
.adm-switch:checked { background: var(--tint); }
.adm-switch:checked::before { inset-inline-start: 22px; }
.adm-switch:disabled { opacity: 0.4; cursor: default; }
.adm-switch:focus-visible, .adm-check:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.adm-check { appearance: none; -webkit-appearance: none; margin: 0; width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: var(--radius-xs); border: 1.5px solid var(--label-tertiary); background: transparent; cursor: pointer; }
.adm-check:checked { background: var(--tint); border-color: var(--tint); }
.adm-check:checked::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid var(--on-tint); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.adm-textarea { align-items: stretch; padding-block: 4px; }
.adm-textarea .input { height: auto; min-height: 88px; padding-block: 10px; resize: vertical; line-height: 1.6; font-size: 16px; }
.adm-select { position: relative; padding-inline-end: 12px; }
.adm-select .input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 28px; }
.adm-select-caret { position: absolute; inset-inline-end: 16px; pointer-events: none; color: var(--label-secondary); }
.adm-seg-radio { position: absolute; opacity: 0; pointer-events: none; }
.adm-pub { display: flex; flex-direction: column; gap: 16px; }
.adm-pub .seg { width: 100%; }
.adm-pub .seg-item { cursor: pointer; }
.adm-pub .seg-item:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* Cover colour */
.adm-tones { border: 0; margin: 0; padding: 0; }
.adm-tones legend { padding: 0; margin-bottom: 6px; }
.adm-tone-row { display: flex; gap: 10px; flex-wrap: wrap; }
.adm-tone { position: relative; cursor: pointer; }
.adm-tone input { position: absolute; opacity: 0; }
.adm-tone .thumb { display: block; width: 52px; height: 36px; aspect-ratio: auto; border-radius: 10px; }
.adm-tone input:checked + .thumb { box-shadow: 0 0 0 2px var(--bg-grouped-secondary), 0 0 0 4px var(--tint); }
.adm-tone input:focus-visible + .thumb { outline: 2px solid var(--focus-ring); outline-offset: 5px; }

/* Collection editor */
.adm-chapters { display: flex; flex-direction: column; gap: 20px; }
.adm-chapter { display: flex; flex-direction: column; gap: 8px; }
.adm-chapter-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-chapter-form { display: flex; align-items: center; gap: 8px; flex: 1 1 420px; min-width: 0; margin: 0; }
.adm-chapter-n { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--fill-tertiary); font-weight: 600; }
.adm-inline-input { flex: 1; min-width: 0; height: 40px; padding-inline: 12px; border-radius: var(--radius-sm); background: var(--fill-tertiary); font-size: 15px; font-weight: 600; }
.adm-inline-input:focus { background: var(--bg-primary); box-shadow: 0 0 0 2px var(--tint); }
@media (max-width: 599px) { .adm-chapter-form .adm-inline-input:lang(en) { display: none; } }
.adm-chapter-tools, .adm-lesson-tools { display: flex; gap: 6px; flex: none; }
.adm-lesson-row { padding-inline-end: 8px; }
.adm-lesson-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.adm-lesson-link:hover .t-body { color: var(--tint-text); }
.adm-lesson-n { width: 32px; flex: none; font-family: Inter, var(--font-sans); font-weight: 700; font-size: 17px; color: var(--label-secondary); text-align: center; font-variant-numeric: tabular-nums; }
.adm-add-row { color: var(--tint-text); }
.adm-add-row .row-icon { background: transparent; }
.adm-add-chapter { display: flex; flex-direction: column; gap: 14px; margin: 0; }

/* Upload */
.adm-up-progress { padding: 0 16px 8px; }
.adm-up-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 16px 16px; }

/* Invite */
.adm-invite { display: flex; flex-direction: column; gap: 10px; }
.adm-invite-text { width: 100%; box-sizing: border-box; border: 0; resize: none; border-radius: var(--radius-md); padding: 12px 14px; background: var(--fill-quaternary); color: var(--label-primary); font: 15px/1.7 var(--font-sans); }
.adm-invite-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Watermark lookup */
.adm-wm { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0; }
.adm-wm .field { flex: 1 1 220px; }
.adm-wm .input { text-transform: uppercase; }

/* Toast + confirm */
.adm-toast-wrap { position: fixed; inset-inline: 0; bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; justify-content: center; padding-inline: 16px; z-index: 50; pointer-events: none; }
.adm-toast-wrap .toast { pointer-events: auto; transition: opacity var(--duration-base), transform var(--duration-base); }
.adm-toast-wrap .toast.is-error .ico { color: var(--danger); }
.adm-toast-wrap.is-leaving .toast, .adm-toast-wrap .toast.is-leaving { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: no-preference) {
  .adm-toast-wrap .toast { animation: adm-toast-in var(--duration-slow) var(--ease-emphasized); }
  @keyframes adm-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
.adm-confirm { border: 0; padding: 0; background: transparent; margin: auto; color: var(--label-primary); }
.adm-confirm::backdrop { background: var(--scrim); }
.adm-confirm .alert { margin: 0; }
.adm-confirm-text { display: flex; flex-direction: column; gap: 6px; }