/* Ported from Pearls of Quran (CharacterBee) for Alfiya Academy by tools/port_admin.py. Edit the Alfiya files, not this copy's source. */
/*
 * Pearls of Quran — Admin panel (/admin).
 * A calm, data-dense workspace on the pearl (light) theme: pearl-white canvas, crisp white cards with hairline
 * borders, a deep-sea navy sidebar, brand gold for actions and active states, sea colours for data only.
 * Builds on tokens.css / base.css / components.css — shared components are only re-tuned under .adm-body.
 * Everything here is scoped with adm- / viz-. Motion uses transform + opacity only.
 *
 * Sections
 *   01 tokens + shared component density      09 learner profile + level map
 *   02 utilities + tones                      10 analytics
 *   03 boot + sign-in                         11 certificates + template editor
 *   04 shell: sidebar, top bar                12 competition
 *   05 overlays: popover, palette, lightbox   13 content + level editor
 *   06 page primitives: cards, KPIs, hero     14 inbox
 *   07 lists, chips, tabs, states             15 activity
 *   08 tables, toolbar, pager, bulk bar       16 settings     17 charts     18 print
 */

/* =====================================================================================================
   01 · TOKENS + SHARED COMPONENT DENSITY
   ===================================================================================================== */
.adm-body {
  --adm-side-w: 256px;
  --adm-side-cw: 76px;
  --adm-top-h: 64px;
  --adm-line: rgba(16, 12, 46, .1);
  --adm-line-2: rgba(16, 12, 46, .18);
  --adm-row: rgba(16, 12, 46, .065);
  --adm-hover: #FAF7EF;
  --adm-sel: #FBF3DA;
  --adm-head: #FAF8F2;
  --adm-soft: #F6F2E8;
  --adm-r: 16px;
  --adm-r-sm: 12px;
  --adm-shadow: 0 1px 2px rgba(28, 22, 70, .05), 0 10px 28px -16px rgba(28, 22, 70, .2);
  --adm-shadow-hover: 0 2px 4px rgba(28, 22, 70, .06), 0 18px 40px -18px rgba(28, 22, 70, .3);
  --adm-shadow-pop: 0 4px 10px rgba(16, 12, 46, .08), 0 24px 60px -12px rgba(16, 12, 46, .28);
  --gold-ink: #7A5A0C;
  /* data colours (same family as POQ.charts HEX) */
  --c-gold: #C8952E; --c-teal: #2FA596; --c-aqua: #3B8FD6; --c-coral: #E0562F; --c-lilac: #8E7BD6; --c-green: #1FAF54; --c-deep: #1F0A8C;
  --viz-grid: #EEEBF4; --viz-axis: #CFCADB;
  background: var(--bg);
  font-size: .95rem;
  line-height: 1.5;
}
/* headings inside the admin never inherit the marketing-site display sizes */
.adm-body :where(h1, h2, h3, h4) { font-size: 1.05rem; line-height: 1.25; letter-spacing: -.012em; font-weight: 650; font-variation-settings: 'opsz' 24; }

/* buttons: squarer, denser */
.adm-body .btn { --btn-h: 42px; border-radius: 11px; font-size: .94rem; font-weight: 600; padding: 0 1.1em; }
.adm-body .btn--sm { --btn-h: 36px; font-size: .875rem; padding: 0 .85em; border-radius: 10px; }
.adm-body .btn--icon { padding: 0; }
.adm-body .btn--block { --btn-h: 46px; }
.adm-body .btn .i { width: 1.1em; height: 1.1em; }
.adm-body .btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 rgba(116, 91, 14, .45), 0 4px 12px -2px rgba(200, 149, 46, .32); }
.adm-body .btn--secondary { background: #fff; border-color: var(--adm-line-2); box-shadow: 0 1px 1px rgba(28, 22, 70, .04); }
.adm-body .btn--ghost { color: var(--text-soft); }
.adm-body .btn--danger { box-shadow: 0 1px 0 rgba(120, 20, 24, .4); }
.adm-body .btn[disabled] { box-shadow: none; }
@media (hover: hover) {
  .adm-body .btn--primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(116, 91, 14, .45), 0 8px 18px -4px rgba(200, 149, 46, .45); }
  .adm-body .btn--secondary:hover { background: #fff; border-color: var(--gold-500); color: var(--text); }
  .adm-body .btn--ghost:hover { background: rgba(16, 12, 46, .06); color: var(--text); }
  .adm-body .btn--danger:hover { transform: translateY(-1px); }
}
.adm-body .btn.adm-danger-ghost { color: var(--danger); }
@media (hover: hover) { .adm-body .btn.adm-danger-ghost:hover { background: var(--danger-soft); color: var(--danger); } }
.adm-body .spinner { width: 1em; height: 1em; }

/* fields */
.adm-body .input, .adm-body .select, .adm-body .textarea { min-height: 42px; padding: .55rem .8rem; border-radius: 10px; border-width: 1px; border-color: var(--adm-line-2); font-size: 16px; font-weight: 450; }
.adm-body .textarea { min-height: 84px; max-height: 320px; line-height: 1.5; field-sizing: content; }
.adm-body .select { padding-right: 2.2rem; background-position: right .7rem center; background-size: .95rem; }
.adm-body .input:hover, .adm-body .select:hover, .adm-body .textarea:hover { border-color: rgba(16, 12, 46, .34); }
.adm-body .input:focus, .adm-body .select:focus, .adm-body .textarea:focus, .adm-body .phone:focus-within { border-color: var(--gold-500); box-shadow: 0 0 0 3px var(--gold-glow); }
.adm-body .has-error .input, .adm-body .has-error .select, .adm-body .has-error .textarea, .adm-body .has-error .phone { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.adm-body .input-wrap > .i { left: .8rem; width: 1.1rem; height: 1.1rem; }
.adm-body .input-wrap > .i ~ .input { padding-left: 2.5rem; }
.adm-body .phone { min-height: 42px; border-radius: 10px; border-width: 1px; border-color: var(--adm-line-2); }
.adm-body .phone__code { border-right-width: 1px; border-right-color: var(--adm-line-2); padding-left: .8rem; }
.adm-body .phone__plus { color: var(--gold-ink); }
.adm-body .field { gap: .35rem; }
.adm-body .field__label { font-size: .84rem; font-weight: 600; flex-wrap: wrap; gap: .25rem .75rem; }
.adm-body .field__hint { font-size: .8rem; line-height: 1.45; }
.adm-body .field__error { font-size: .82rem; }
.adm-body .field__opt { font-size: .7rem; font-weight: 600; }
.adm-body .field__req { color: #C24A2A; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.adm-body .field-row { gap: .9rem; }
@media (min-width: 720px) { .adm-body .input, .adm-body .select, .adm-body .textarea { font-size: .94rem; } }
.form, .adm-form { display: grid; gap: 1rem; min-width: 0; }
.form > .field + .field, .adm-form > .field + .field, .adm-form .field-row { margin-top: 0; }
.form-row, .adm-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.form-row > .field + .field, .adm-form-row > .field + .field { margin-top: 0; }
@media (max-width: 560px) { .form-row, .adm-form-row { grid-template-columns: 1fr; } }

/* switch: the thumb is positioned from the input itself, so long two-line labels stay aligned */
.adm-body .switch input { position: relative; width: 44px; height: 26px; border-width: 1px; border-color: var(--adm-line-2); background: rgba(16, 12, 46, .12); }
.adm-body .switch input::after { left: 3px; width: 18px; height: 18px; margin-top: -9px; background: #fff; box-shadow: 0 1px 3px rgba(16, 12, 46, .35); }
.adm-body .switch input:checked { background: var(--gold-500); border-color: var(--gold-600); }
.adm-body .switch input:checked::after { transform: translateX(18px); }
.adm-body .switch input:disabled { opacity: .55; cursor: progress; }
.adm-switch { align-items: flex-start; gap: .8rem; }
.adm-switch input { margin-top: 2px; }
.adm-switch > span { display: grid; gap: 2px; min-width: 0; }
.adm-switch strong { font-weight: 650; color: var(--text); line-height: 1.3; }
.adm-switch small { font-weight: 400; color: var(--text-soft); font-size: .84rem; line-height: 1.45; }
.adm-switch--inline { align-items: center; }
.adm-switch--inline input { margin-top: 0; }

/* badges, chips, alerts, kbd, code */
.adm-body .badge { font-size: .72rem; font-weight: 650; padding: .2em .62em; gap: .3em; line-height: 1.35; background: rgba(16, 12, 46, .07); color: var(--text-soft); }
.adm-body .badge .i { width: 1.05em; height: 1.05em; }
.adm-body .badge--ok { background: var(--ok-soft); color: #0E6E4E; }
.adm-body .badge--danger { background: var(--danger-soft); color: #B02A30; }
.adm-body .badge--warn { background: var(--warn-soft); color: #8A5606; }
.adm-body .badge--info { background: var(--info-soft); color: #185F98; }
.adm-body .badge--gold { background: rgba(200, 149, 46, .17); color: var(--gold-ink); }
.adm-body .alert { border-radius: var(--adm-r-sm); font-weight: 450; font-size: .875rem; }
.adm-body .alert strong { font-weight: 650; }
.adm-body kbd { font-size: .7rem; padding: .18em .5em; border-radius: 6px; border-color: var(--adm-line-2); background: #fff; color: var(--text-soft); box-shadow: 0 1px 0 var(--adm-line-2); white-space: nowrap; }
.adm-body code { font: 600 .86em ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace; padding: .1em .4em; border-radius: 6px; background: var(--adm-soft); border: 1px solid var(--adm-line); overflow-wrap: break-word; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.adm-body .seg { padding: 3px; border-radius: 11px; background: rgba(16, 12, 46, .06); border-color: var(--adm-line); max-width: 100%; }
.adm-body .seg button, .adm-body .seg a { min-height: 32px; padding: 0 .8rem; border-radius: 8px; font-size: .84rem; white-space: nowrap; }
.adm-body .seg [aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(28, 22, 70, .16), 0 0 0 1px var(--adm-line); }
.adm-body .seg button:not([aria-pressed="true"]):hover { color: var(--text); }
.adm-body .bar { background: rgba(16, 12, 46, .09); }
.adm-body .bar--sm { height: 6px; }
.adm-body .file-pill { border-width: 1px; border-color: var(--adm-line-2); border-radius: var(--adm-r-sm); background: var(--adm-head); }
.adm-body .file-pill > .i { color: var(--ok); flex: none; }

/* modal, confirm, menu, toast */
.adm-body .modal__backdrop { background: rgba(5, 19, 33, .6); }
.adm-body .modal__panel { border-radius: 20px; border-color: var(--adm-line); background: #fff; box-shadow: var(--adm-shadow-pop); }
.adm-body .modal__head { padding: 1.15rem 1.1rem .4rem 1.35rem; align-items: center; }
.adm-body .modal__icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(200, 149, 46, .16); color: var(--gold-ink); }
.adm-body .modal__titles { padding-top: 0; }
.adm-body .modal__title { font-size: 1.2rem; line-height: 1.2; }
.adm-body .modal__sub { margin-top: .15rem; font-size: .84rem; }
.adm-body .modal__body { padding: .9rem 1.35rem 1.35rem; }
.adm-body .modal__head--bare + .modal__body { padding-top: 1.5rem; }
.adm-body .modal__foot { padding: .8rem 1.35rem; gap: .5rem; background: var(--adm-head); border-top-color: var(--adm-line); }
.adm-body .modal--drawer .modal__panel { border-radius: 20px 0 0 20px; }
.adm-body .confirm__icon { width: 56px; height: 56px; border-radius: 18px; color: var(--gold-ink); }
.adm-body .confirm__icon--danger { color: var(--danger); }
.adm-body .confirm__title { font-size: 1.2rem; }
.adm-body .confirm__msg { font-size: .92rem; }
.adm-body .menu { border-radius: 14px; border-color: var(--adm-line); background: #fff; box-shadow: var(--adm-shadow-pop); padding: .35rem; }
.adm-body .menu.adm-menu { min-width: 232px; }
.adm-body .menu__head { font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-body .menu__item { min-height: 38px; border-radius: 9px; font-size: .9rem; font-weight: 500; padding: .35rem .65rem; gap: .6rem; }
.adm-body .menu__item .i { width: 1.1rem; height: 1.1rem; }
.adm-body .menu__item:hover, .adm-body .menu__item:focus-visible { background: var(--adm-soft); }
.adm-body .menu__item--danger:hover { background: var(--danger-soft); }
.adm-body .menu__item kbd { flex: none; }
.adm-body .toast { border-radius: 14px; }
.adm-body .toast__title { font-size: .94rem; }
.adm-body .toast__msg { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .adm-body .toast-stack { bottom: max(1rem, env(safe-area-inset-bottom)); }
  .adm-body .modal--drawer .modal__panel { border-radius: 0; }
  .adm-body .modal__foot { justify-content: stretch; }
  .adm-body .modal__foot .btn { flex: 1 1 auto; }
}
/* phones: comfortable touch targets */
@media (max-width: 719.98px) {
  .adm-body .btn--sm { --btn-h: 40px; }
  .adm-body .input, .adm-body .select, .adm-body .textarea, .adm-body .phone { min-height: 44px; }
  .adm-body .seg button, .adm-body .seg a { min-height: 40px; }
  .adm-body .menu__item { min-height: 42px; }
}
.adm-skip { border: 0; }

/* =====================================================================================================
   02 · UTILITIES + TONES
   ===================================================================================================== */
.adm-muted { color: var(--text-mute); }
.adm-mono { font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace; font-size: .9em; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.adm-nowrap { white-space: nowrap; }
.adm-num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-strong { font-weight: 650; color: var(--text); }
.adm-break { overflow-wrap: anywhere; }
.adm-foot-left { margin-right: auto; }
.adm-inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.adm-inline .input { flex: 1 1 220px; min-width: 0; }
.adm-linkbtn { color: var(--gold-ink); font-weight: 650; text-decoration: underline; text-decoration-color: rgba(122, 90, 12, .4); text-underline-offset: 3px; border-radius: 4px; }
.adm-linkbtn:hover { text-decoration-color: currentColor; }
.adm-body .link { color: var(--gold-ink); }
/* notes and tick lists: the icon hangs in the left margin so mixed inline content (text, links, code) flows normally */
.adm-note { position: relative; margin-top: .9rem; padding-left: 1.5rem; font-size: .84rem; line-height: 1.5; color: var(--text-soft); }
.adm-note > .i { position: absolute; left: 0; top: .2em; width: 1rem; height: 1rem; color: var(--gold-600); }
.adm-note a { font-weight: 650; color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.adm-note--center { padding-left: 0; text-align: center; }
.adm-note--center > .i { position: static; display: inline-block; vertical-align: -.16em; margin-right: .35rem; }
.adm-note--warn { margin: 0; padding: .7rem 1.35rem .7rem calc(1.35rem + 1.5rem); background: var(--warn-soft); color: #6B4304; border-top: 1px solid rgba(169, 106, 8, .22); }
.adm-note--warn > .i { left: 1.35rem; top: .9rem; color: var(--warn); }
.adm-prose { color: var(--text-soft); line-height: 1.6; font-size: .92rem; margin-top: .9rem; }
.adm-prose strong { color: var(--text); }
.adm-ticks { list-style: none; padding: 0; margin-top: .8rem; display: grid; gap: .5rem; color: var(--text-soft); font-size: .88rem; }
.adm-ticks li { position: relative; padding-left: 1.55rem; line-height: 1.5; }
.adm-ticks .i { position: absolute; left: 0; top: .22em; width: 1rem; height: 1rem; color: var(--ok); stroke-width: 2.6; }

/* tones: icon chips in KPIs, activity, notifications, data rows */
.adm-tone--gold { background: #FAEFD0; color: #8A6410; }
.adm-tone--teal { background: #DBF0F3; color: #0F6A7D; }
.adm-tone--aqua { background: #DAF5F6; color: #0E7E89; }
.adm-tone--coral { background: #FFE5DC; color: #C24A2A; }
.adm-tone--lilac { background: #ECE8FA; color: #5C49B0; }
.adm-tone--green { background: #DAF2E8; color: #0E7A56; }
.adm-tone--deep { background: #E2E9EF; color: #1F0A8C; }

/* depth zones: water colours, shallow → deep (same values as POQ.ocean.zones) */
.adm-hero__zone--surface, .adm-depth--surface, .adm-levelmap__zone--surface, .adm-zone--surface { --za: #2FA8B8; --zb: #15788F; }
.adm-hero__zone--reef, .adm-depth--reef, .adm-levelmap__zone--reef, .adm-zone--reef { --za: #15788F; --zb: #0E5A78; }
.adm-hero__zone--lagoon, .adm-depth--lagoon, .adm-levelmap__zone--lagoon, .adm-zone--lagoon { --za: #0E5A78; --zb: #0B4163; }
.adm-hero__zone--twilight, .adm-depth--twilight, .adm-levelmap__zone--twilight, .adm-zone--twilight { --za: #0B4163; --zb: #0A2C4C; }
.adm-hero__zone--midnight, .adm-depth--midnight, .adm-levelmap__zone--midnight, .adm-zone--midnight { --za: #0A2C4C; --zb: #071C33; }
.adm-hero__zone--treasure, .adm-depth--treasure, .adm-levelmap__zone--treasure, .adm-zone--treasure { --za: #071C33; --zb: #0A0433; }

/* =====================================================================================================
   03 · BOOT + SIGN-IN
   ===================================================================================================== */
.adm-root { min-height: 100vh; min-height: 100dvh; }
.adm-boot { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 1rem; color: var(--text-soft); font-weight: 600; }
.adm-boot__ring { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(200, 149, 46, .25); border-top-color: var(--gold-500); animation: spin .8s linear infinite; }
.adm-noscript { max-width: 520px; margin: 40px auto; padding: 20px; text-align: center; font-weight: 600; }

.adm-auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); background: var(--bg); }
.adm-auth__art {
  --logo-ink: #F3F7FA; --logo-disc: #FBF8EF;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 1.25rem;
  padding: clamp(28px, 4vw, 52px) clamp(28px, 4.5vw, 64px) 20px; color: #F3F7FA;
  background: radial-gradient(760px 440px at 18% -8%, rgba(146, 128, 255, .34), transparent 64%), linear-gradient(180deg, #2B1BA8 0%, #1F0A8C 36%, #120760 70%, #0A0433 100%);
}
/* light rays through the water + a faint geometric lattice on the sea floor */
.adm-auth__art::before { content: ''; position: absolute; inset: -10% -30% 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(98deg, transparent 0 5.5%, rgba(255, 255, 255, .06) 7% 9.5%, transparent 12% 19%, rgba(255, 255, 255, .035) 21% 22.5%, transparent 25% 31%); -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .5) 45%, transparent 85%); mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .5) 45%, transparent 85%); transform-origin: 50% 0; animation: rays-sway 18s var(--ease-in-out) infinite alternate; }
.adm-auth__art::after { content: ''; position: absolute; inset: 40% 0 0; z-index: -1; pointer-events: none; opacity: .1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23E5C568' stroke-width='1'%3E%3Cpath d='M48 10 59.1 36.9 86 48 59.1 59.1 48 86 36.9 59.1 10 48 36.9 36.9Z'/%3E%3Crect x='21.1' y='21.1' width='53.8' height='53.8'/%3E%3Crect x='21.1' y='21.1' width='53.8' height='53.8' transform='rotate(45 48 48)'/%3E%3Cpath d='M0 0l21.1 21.1M96 0 74.9 21.1M0 96l21.1-21.1M96 96 74.9 74.9M48 0v10M48 86v10M0 48h10M86 48h10'/%3E%3C/g%3E%3C/svg%3E"); background-size: 84px 84px; -webkit-mask-image: linear-gradient(to top, #000 0, transparent 85%); mask-image: linear-gradient(to top, #000 0, transparent 85%); }
.adm-auth__glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.adm-auth__glow--a { width: 46vmax; height: 46vmax; left: -18vmax; top: -16vmax; background: radial-gradient(closest-side, rgba(180, 165, 255, .2), transparent 70%); animation: pool-drift 26s ease-in-out infinite alternate; }
.adm-auth__glow--b { width: 34vmax; height: 34vmax; left: 50%; bottom: -14vmax; margin-left: -17vmax; background: radial-gradient(closest-side, rgba(229, 197, 104, .22), transparent 70%); }
.adm-auth__logo { height: 46px; flex: none; }
.adm-auth__logo svg { height: 100%; width: auto; }
.adm-auth__logo .bl-letter, .adm-auth__logo .bl-book { fill: var(--gold-300); }
.adm-auth__copy { max-width: 34rem; margin-block: auto; }
.adm-auth__eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem; border-radius: 999px; border: 1px solid rgba(229, 197, 104, .4); background: rgba(229, 197, 104, .1); color: var(--gold-300); font-size: .7rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
.adm-auth__eyebrow .i { width: 1rem; height: 1rem; }
.adm-auth__title { margin-top: 1.1rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.6rem); line-height: 1.02; letter-spacing: -.03em; font-variation-settings: 'opsz' 96; text-wrap: balance; }
.adm-auth__title span { color: var(--gold-300); }
.adm-auth__lead { margin-top: .9rem; max-width: 30rem; font-size: 1.04rem; line-height: 1.6; color: #C9C3EE; }
.adm-auth__facts { display: flex; flex-wrap: wrap; gap: .4rem 0; margin-top: 1.4rem; }
.adm-auth__facts li { display: grid; gap: .1rem; padding: 0 1.4rem; border-left: 1px solid rgba(200, 192, 255, .2); }
.adm-auth__facts li:first-child { padding-left: 0; border-left: 0; }
.adm-auth__facts strong { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.adm-auth__facts span { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8FA9BB; }
.adm-auth__scene { position: relative; flex: none; width: min(100%, 620px); margin-inline: auto; }
.adm-auth__strand { display: block; }
.adm-auth__shell { position: absolute; left: 50%; top: -6%; width: 25%; margin-left: -12.5%; }
.adm-auth__shell svg { width: 100%; height: auto; }
.adm-auth__legal { font-size: .76rem; color: #9A93C9; }
.adm-auth__main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 40px 24px; }
.adm-auth__card { width: min(100%, 420px); display: grid; gap: 1rem; padding: clamp(22px, 3.4vw, 34px); background: #fff; border: 1px solid var(--adm-line); border-radius: 22px; box-shadow: var(--shadow-2); animation: vt-in .5s var(--ease-out) both; }
.adm-auth__card > .field + .field { margin-top: 0; }
.adm-auth__mark { width: 50px; height: 50px; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 16px -6px rgba(116, 91, 14, .55); }
.adm-auth__mark svg { width: 100%; height: 100%; }
.adm-body .adm-auth__h { font-size: 1.75rem; line-height: 1.1; letter-spacing: -.025em; font-weight: 700; font-variation-settings: 'opsz' 60; }
.adm-auth__sub { margin-top: -.6rem; color: var(--text-soft); }
.adm-auth__err.is-shake { animation: field-shake .4s var(--ease-out); }
.adm-pass { position: relative; }
.adm-body .adm-pass > .input { padding-right: 3rem; }
.adm-pass__toggle { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; color: var(--text-mute); }
.adm-pass__toggle:hover { background: var(--adm-soft); color: var(--text); }
.adm-pass__toggle .i { width: 1.15rem; height: 1.15rem; }
.adm-auth__submit .arrow { transition: transform var(--t-med) var(--ease-out); }
@media (hover: hover) { .adm-auth__submit:hover .arrow { transform: translateX(3px); } }
.adm-auth__submit.is-ready { animation: adm-ready 1.2s var(--ease-out) 2; }
@keyframes adm-ready { 0%, 100% { transform: none; } 40% { transform: scale(1.025); } }
.adm-auth__or { display: flex; align-items: center; gap: .75rem; color: var(--text-mute); font-size: .7rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.adm-auth__or::before, .adm-auth__or::after { content: ''; flex: 1; height: 1px; background: var(--adm-line); }
.adm-auth__note { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .85rem; border-radius: var(--adm-r-sm); background: var(--adm-head); border: 1px solid var(--adm-line); color: var(--text-soft); font-size: .84rem; line-height: 1.5; }
.adm-auth__note .i { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .15em; color: var(--gold-600); }
.adm-auth__note strong { color: var(--text); }
.adm-auth__foot a { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .7rem; border-radius: 10px; color: var(--text-soft); font-weight: 600; font-size: .9rem; }
.adm-auth__foot a:hover { color: var(--text); background: rgba(16, 12, 46, .06); }
.adm-auth__foot .i { width: 1rem; height: 1rem; }
@media (max-width: 899.98px) {
  .adm-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .adm-auth__art { padding: 18px 20px 0; gap: .5rem; background: radial-gradient(520px 300px at 10% -20%, rgba(146, 128, 255, .34), transparent 64%), linear-gradient(180deg, #2B1BA8 0%, #1F0A8C 55%, #120760 100%); }
  .adm-auth__logo { height: 34px; }
  .adm-auth__copy { margin-block: .5rem 0; }
  .adm-auth__eyebrow, .adm-auth__lead, .adm-auth__facts, .adm-auth__legal, .adm-auth__glow--b { display: none; }
  .adm-auth__title { margin-top: 0; font-size: 1.7rem; }
  .adm-auth__scene { width: min(100%, 420px); margin-top: -.4rem; margin-bottom: -2.6rem; }
  .adm-auth__main { justify-content: flex-start; padding: 22px 16px 32px; }
  .adm-auth__mark { display: none; }
  .adm-body .adm-auth__h { font-size: 1.5rem; }
}

/* =====================================================================================================
   04 · SHELL: SIDEBAR + TOP BAR
   ===================================================================================================== */
.adm { --adm-offset: var(--adm-side-w); min-height: 100vh; min-height: 100dvh; }
.adm.is-collapsed { --adm-offset: var(--adm-side-cw); }
.adm-main { min-width: 0; margin-left: var(--adm-offset); }

/* the sidebar is a slice of deep sea: deep tokens directly, gold marks the current page */
.adm-side {
  --text: #F3F7FA; --text-soft: #C9C3EE; --text-mute: #9A93C9; --glass: rgba(255, 255, 255, .055); --glass-2: rgba(255, 255, 255, .09);
  --line: rgba(200, 192, 255, .14); --line-strong: rgba(200, 192, 255, .26); --accent: var(--gold-300); --focus: var(--gold-300);
  position: fixed; inset: 0 auto 0 0; z-index: 70; width: var(--adm-side-w); display: flex; flex-direction: column; isolation: isolate; overflow: hidden;
  color: var(--text); background: linear-gradient(180deg, var(--deep-800) 0%, var(--deep-900) 48%, var(--deep-950) 100%);
  border-right: 1px solid rgba(10, 6, 40, .6); transition: transform .32s var(--ease-out);
}
.adm-side::before { content: ''; position: absolute; inset: 0 0 auto; height: 260px; z-index: -1; pointer-events: none; background: radial-gradient(260px 200px at 20% -10%, rgba(146, 128, 255, .2), transparent 70%); }
.adm-side::after { content: ''; position: absolute; inset: auto 0 0; height: 300px; z-index: -1; pointer-events: none; opacity: .11; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23E5C568' stroke-width='1'%3E%3Cpath d='M48 10 59.1 36.9 86 48 59.1 59.1 48 86 36.9 59.1 10 48 36.9 36.9Z'/%3E%3Crect x='21.1' y='21.1' width='53.8' height='53.8'/%3E%3Crect x='21.1' y='21.1' width='53.8' height='53.8' transform='rotate(45 48 48)'/%3E%3Cpath d='M0 0l21.1 21.1M96 0 74.9 21.1M0 96l21.1-21.1M96 96 74.9 74.9M48 0v10M48 86v10M0 48h10M86 48h10'/%3E%3C/g%3E%3C/svg%3E"); background-size: 64px 64px; -webkit-mask-image: linear-gradient(to top, #000 0, transparent 100%); mask-image: linear-gradient(to top, #000 0, transparent 100%); }
.adm-side__head { display: flex; align-items: center; gap: .5rem; min-height: var(--adm-top-h); padding: 10px 12px 10px 16px; flex: none; }
.adm-brand { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; padding: 4px; margin: -4px; border-radius: 12px; color: var(--text); }
.adm-brand__mark { width: 38px; height: 38px; flex: none; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(229, 197, 104, .35), 0 6px 14px -6px rgba(0, 0, 0, .6); }
.adm-brand__mark svg { width: 100%; height: 100%; }
.adm-brand__text { display: grid; gap: 1px; min-width: 0; }
.adm-brand__text strong { font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-brand__text small { font-size: .62rem; font-weight: 650; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-300); }
.adm-side__close { display: none; color: var(--text-soft); }
.adm-body .adm-side .btn--ghost:hover { background: var(--glass-2); color: var(--text); }
.adm-nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 16px; scrollbar-width: none; }
.adm-nav::-webkit-scrollbar { display: none; }
.adm-nav__label { padding: 1rem .7rem .45rem; font-size: .64rem; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: #9A93C9; white-space: nowrap; }
.adm-nav ul { display: grid; gap: 2px; }
.adm-nav__link { position: relative; display: flex; align-items: center; gap: .7rem; min-height: 42px; padding: 4px 10px 4px 8px; border-radius: 10px; color: var(--text-soft); font-weight: 550; font-size: .93rem; transition: background-color var(--t-fast), color var(--t-fast); }
.adm-nav__link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.adm-nav__link[aria-current="page"] { background: linear-gradient(90deg, rgba(229, 197, 104, .2), rgba(229, 197, 104, .05)); color: #fff; font-weight: 650; }
.adm-nav__link[aria-current="page"]::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold-300); box-shadow: 0 0 12px rgba(229, 197, 104, .7); }
.adm-nav__icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; color: #8FA9BB; transition: color var(--t-fast); }
.adm-nav__icon .i { width: 1.2rem; height: 1.2rem; }
.adm-nav__link:hover .adm-nav__icon { color: #DCE8EE; }
.adm-nav__link[aria-current="page"] .adm-nav__icon { color: var(--gold-300); }
.adm-nav__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-nav__badge { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--gold-300); color: #1B1303; font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.adm-side__foot { display: grid; gap: .6rem; padding: 12px; flex: none; border-top: 1px solid var(--line); }
.adm-me { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.adm-me__ava, .adm-usermenu__ava { flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(140deg, #EBCB72, var(--gold-600)); color: #1B1303; font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
.adm-me__ava { width: 34px; height: 34px; font-size: .8rem; }
.adm-me__text { display: grid; min-width: 0; }
.adm-me__text strong { font-size: .88rem; font-weight: 650; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-me__text small { font-size: .72rem; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-side__btns { display: flex; gap: .5rem; }
.adm-side__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 38px; padding: 0 .7rem; border-radius: 10px; border: 1px solid var(--line); color: var(--text-soft); font-weight: 600; font-size: .86rem; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.adm-side__btn:hover { background: rgba(255, 255, 255, .07); border-color: var(--line-strong); color: #fff; }
.adm-side__btn .i { width: 1.05rem; height: 1.05rem; }
.adm-side__collapse { flex: none; width: 38px; padding: 0; }
.adm-side__collapse .i { transition: transform .3s var(--ease-out); }
.adm-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(10, 6, 40, .6); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }

/* collapsed rail (desktop) */
@media (min-width: 1024px) {
  .adm.is-collapsed .adm-side { width: var(--adm-side-cw); overflow: visible; }
  .adm.is-collapsed .adm-side::before, .adm.is-collapsed .adm-side::after { width: var(--adm-side-cw); }
  .adm.is-collapsed .adm-brand__text, .adm.is-collapsed .adm-nav__text, .adm.is-collapsed .adm-me__text, .adm.is-collapsed .adm-side__btn:not(.adm-side__collapse) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .adm.is-collapsed .adm-side__head { padding: 10px 0; justify-content: center; }
  .adm.is-collapsed .adm-brand { flex: none; }
  .adm.is-collapsed .adm-nav { overflow: visible; padding: 4px 14px 16px; }
  .adm.is-collapsed .adm-nav__label { font-size: 0; padding: .75rem 0 .4rem; }
  .adm.is-collapsed .adm-nav__label::before { content: ''; display: block; height: 1px; margin: 0 8px; background: var(--line); }
  .adm.is-collapsed .adm-nav__group:first-child .adm-nav__label::before { display: none; }
  .adm.is-collapsed .adm-nav__link { justify-content: center; padding: 4px; }
  .adm.is-collapsed .adm-nav__link[aria-current="page"]::before { left: -14px; }
  .adm.is-collapsed .adm-nav__badge { position: absolute; top: 1px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px; font-size: .62rem; line-height: 18px; }
  .adm.is-collapsed .adm-nav__link::after { content: attr(data-label); position: absolute; left: calc(100% + 12px); top: 50%; translate: -4px -50%; z-index: 80; padding: .4rem .65rem; border-radius: 8px; background: #03101C; color: #fff; font-size: .8rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: var(--adm-shadow-pop); transition: opacity var(--t-fast), translate var(--t-med) var(--ease-out); }
  .adm.is-collapsed .adm-nav__link:hover::after, .adm.is-collapsed .adm-nav__link:focus-visible::after { opacity: 1; translate: 0 -50%; }
  .adm.is-collapsed .adm-me { justify-content: center; padding: 6px; background: none; border-color: transparent; }
  .adm.is-collapsed .adm-side__btns { flex-direction: column; }
  .adm.is-collapsed .adm-side__btn { width: 100%; padding: 0; }
  .adm.is-collapsed .adm-side__collapse .i { transform: rotate(180deg); }
}
/* off-canvas drawer below 1024px */
@media (max-width: 1023.98px) {
  .adm { --adm-offset: 0px; }
  .adm-side { width: min(288px, 86vw); transform: translateX(-104%); visibility: hidden; transition: transform .32s var(--ease-out), visibility 0s .32s; }
  .adm.is-drawer-open .adm-side { transform: none; visibility: visible; transition: transform .32s var(--ease-out), visibility 0s; box-shadow: 0 0 60px rgba(10, 6, 40, .6); }
  .adm.is-drawer-open .adm-scrim { opacity: 1; visibility: visible; }
  .adm-side__close { display: inline-flex; }
  .adm-side__collapse { display: none; }
  .adm-nav__link { min-height: 46px; }
  .adm-side__btn { min-height: 42px; }
}

/* top bar */
.adm-top { position: sticky; top: 0; z-index: 60; height: var(--adm-top-h); display: flex; align-items: center; gap: .6rem; padding: 0 clamp(16px, 2.4vw, 32px); background: var(--bg); border-bottom: 1px solid var(--adm-line); }
.adm-top__burger { display: none; flex: none; }
.adm-top__titles { min-width: 0; display: grid; flex: 0 1 auto; margin-right: auto; }
.adm-top__crumb { display: inline-flex; align-items: center; gap: .25rem; width: max-content; max-width: 100%; color: var(--text-mute); font-size: .74rem; font-weight: 600; line-height: 1.2; }
.adm-top__crumb:hover { color: var(--gold-ink); }
.adm-top__crumb .i { width: .85rem; height: .85rem; }
.adm-body .adm-top__title { font-size: 1.3rem; font-weight: 700; line-height: 1.2; letter-spacing: -.022em; font-variation-settings: 'opsz' 48; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
.adm-search { display: flex; align-items: center; gap: .6rem; flex: 0 1 380px; min-width: 0; height: 40px; padding: 0 .5rem 0 .8rem; border-radius: 11px; background: #fff; border: 1px solid var(--adm-line-2); color: var(--text-mute); text-align: left; box-shadow: 0 1px 1px rgba(28, 22, 70, .04); transition: border-color var(--t-fast), color var(--t-fast); }
.adm-search:hover { border-color: var(--gold-500); color: var(--text-soft); }
.adm-search > .i { width: 1.1rem; height: 1.1rem; flex: none; }
.adm-search__ph { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .88rem; }
.adm-search kbd { flex: none; }
.adm-demo { flex: none; cursor: default; }
.adm-demo[data-tip]::after { bottom: auto; top: calc(100% + 8px); }
.adm-top__site { flex: none; }
.adm-bell { position: relative; flex: none; }
.adm-body .adm-bell[aria-expanded="true"] { background: rgba(16, 12, 46, .07); color: var(--text); }
.adm-bell__dot { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #E0552F; color: #fff; font-size: .64rem; font-weight: 700; line-height: 15px; text-align: center; border: 1.5px solid var(--bg); font-variant-numeric: tabular-nums; }
.adm-usermenu { display: flex; align-items: center; gap: .55rem; flex: none; min-height: 42px; padding: 3px 8px 3px 4px; border-radius: 999px; border: 1px solid transparent; text-align: left; color: var(--text); transition: background-color var(--t-fast), border-color var(--t-fast); }
.adm-usermenu:hover, .adm-usermenu[aria-expanded="true"] { background: #fff; border-color: var(--adm-line-2); }
.adm-usermenu__ava { width: 34px; height: 34px; font-size: .8rem; }
.adm-usermenu__text { display: grid; min-width: 0; line-height: 1.2; }
.adm-usermenu__text strong { font-size: .86rem; font-weight: 650; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-usermenu__text small { font-size: .7rem; color: var(--text-mute); }
.adm-usermenu > .i { width: .95rem; height: .95rem; color: var(--text-mute); }
.adm-view { max-width: 1480px; margin-inline: auto; padding: clamp(16px, 2.2vw, 28px) clamp(16px, 2.4vw, 32px) 80px; outline: none; }
@media (max-width: 1279.98px) { .adm-search { flex-basis: 300px; } }
@media (max-width: 1023.98px) {
  .adm-top__burger { display: inline-flex; margin-left: -6px; }
  .adm-search { flex-basis: 260px; }
}
@media (max-width: 859.98px) {
  .adm-top__site span, .adm-usermenu__text, .adm-usermenu > .i { display: none; }
  .adm-body .adm-top__site { width: 42px; padding: 0; }
  .adm-usermenu { padding: 3px; }
}
@media (max-width: 719.98px) {
  .adm-body { --adm-top-h: 58px; }
  .adm-top { gap: .2rem; padding: 0 10px; }
  .adm-body .adm-top__title { font-size: 1.1rem; }
  .adm-top__crumb { font-size: .7rem; }
  .adm-search { flex: none; width: 42px; height: 42px; padding: 0; justify-content: center; border-color: transparent; background: none; box-shadow: none; color: var(--text-soft); }
  .adm-search__ph, .adm-search kbd { display: none; }
  .adm-search > .i { width: 1.25rem; height: 1.25rem; }
  .adm-demo, .adm-top__site { display: none; }
  .adm-top__burger { margin-left: -2px; }
}

/* =====================================================================================================
   05 · OVERLAYS: POPOVER, NOTIFICATIONS, PALETTE, LIGHTBOX, DRAWERS
   ===================================================================================================== */
.adm-pop { position: fixed; z-index: var(--z-menu); width: min(360px, calc(100vw - 16px)); background: #fff; border: 1px solid var(--adm-line); border-radius: 16px; box-shadow: var(--adm-shadow-pop); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity var(--t-fast), transform var(--t-med) var(--ease-out); overflow: hidden; }
.adm-pop.is-open { opacity: 1; transform: none; }
.adm-notif__head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem .6rem; }
.adm-notif__head strong { font-family: var(--font-display); font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.adm-notif__list { padding: 0 .4rem; display: grid; gap: 2px; }
.adm-notif__item { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 11px; color: var(--text); }
.adm-notif__item:hover, .adm-notif__item:focus-visible { background: var(--adm-soft); }
.adm-notif__ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; }
.adm-notif__ico .i { width: 1.15rem; height: 1.15rem; }
.adm-notif__txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.adm-notif__txt strong { font-size: .9rem; font-weight: 650; line-height: 1.3; }
.adm-notif__txt small { color: var(--text-mute); font-size: .78rem; }
.adm-notif__chev { width: 1rem; height: 1rem; color: var(--text-mute); flex: none; }
.adm-notif__empty { display: flex; gap: .9rem; align-items: center; padding: .4rem 1rem 1rem; color: var(--text-soft); font-size: .86rem; }
.adm-notif__empty svg { width: 46px; height: 46px; flex: none; }
.adm-notif__empty strong { color: var(--text); }
.adm-notif__foot { margin-top: .5rem; padding: .25rem .4rem; border-top: 1px solid var(--adm-line); background: var(--adm-head); }
.adm-notif__foot a { display: flex; align-items: center; gap: .5rem; min-height: 40px; padding: 0 .6rem; border-radius: 9px; font-weight: 600; font-size: .86rem; color: var(--gold-ink); }
.adm-notif__foot a:hover { background: rgba(16, 12, 46, .05); }
.adm-notif__foot .i { width: 1rem; height: 1rem; }

/* quick search (Ctrl/Cmd + K) */
.adm-palette.modal { place-items: start center; padding-top: min(12vh, 110px); }
.adm-body .adm-palette .modal__panel { --mw: 640px; border-radius: 18px; }
.adm-palette .modal__head { display: none; }
.adm-body .adm-palette .modal__body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.adm-pal { display: flex; flex-direction: column; max-height: min(70vh, 600px); min-height: 0; }
.adm-pal__bar { display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; border-bottom: 1px solid var(--adm-line); flex: none; }
.adm-pal__bar > .i { width: 1.25rem; height: 1.25rem; color: var(--gold-600); flex: none; }
.adm-pal__input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 1.05rem; line-height: 1.4; color: var(--text); padding: .35rem 0; }
.adm-pal__input::placeholder { color: var(--text-mute); }
.adm-pal__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .4rem; }
.adm-pal__group { padding: .7rem .6rem .35rem; font-size: .64rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); }
.adm-pal__status { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; color: var(--text-soft); font-size: .88rem; }
.adm-pal__status .spinner { color: var(--gold-600); }
.adm-pal__item { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 46px; padding: .4rem .6rem; border-radius: 10px; text-align: left; color: var(--text-soft); scroll-margin: 8px; }
.adm-pal__item[aria-selected="true"] { background: #FBF3DA; color: var(--text); box-shadow: inset 0 0 0 1px rgba(200, 149, 46, .38); }
.adm-pal__ico { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--adm-soft); color: var(--text-soft); }
.adm-pal__item[aria-selected="true"] .adm-pal__ico { background: #fff; color: var(--gold-ink); }
.adm-pal__ico .i { width: 1.1rem; height: 1.1rem; }
.adm-pal__ico--pearl { background: radial-gradient(circle at 50% 40%, var(--deep-600), var(--deep-800)); }
.adm-pal__item[aria-selected="true"] .adm-pal__ico--pearl { background: radial-gradient(circle at 50% 40%, var(--deep-600), var(--deep-800)); }
.adm-pal__ico--pearl svg { width: 70%; height: 70%; }
.adm-pal__main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.adm-pal__main strong { font-size: .92rem; font-weight: 600; line-height: 1.3; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-pal__main small { color: var(--text-mute); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-pal__hint { font-size: .74rem; color: var(--text-mute); font-weight: 550; white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.adm-pal__none { display: flex; gap: .9rem; align-items: center; padding: 1.4rem 1rem; color: var(--text-soft); font-size: .9rem; }
.adm-pal__none svg { width: 48px; height: 48px; flex: none; }
.adm-pal__none small { color: var(--text-mute); }
.adm-pal__foot { display: flex; gap: 1rem; flex-wrap: wrap; padding: .55rem 1rem; border-top: 1px solid var(--adm-line); background: var(--adm-head); color: var(--text-mute); font-size: .74rem; flex: none; }
.adm-pal__foot span { display: inline-flex; gap: .3rem; align-items: center; }
@media (max-width: 640px) {
  .adm-palette.modal { padding: 10px; }
  .adm-pal { max-height: calc(100dvh - 40px); }
  .adm-pal__foot, .adm-pal__hint, .adm-pal__bar kbd { display: none; }
}

/* book-page lightbox */
.adm-body .adm-lightbox .modal__panel { --mw: 720px; background: var(--deep-900); border-color: rgba(200, 192, 255, .2); }
.adm-body .adm-lightbox .modal__x { color: #DCE8EE; background: rgba(255, 255, 255, .08); }
.adm-body .adm-lightbox .modal__x:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.adm-body .adm-lightbox .modal__body { padding: 0; }
.adm-lb { position: relative; margin: 0; }
.adm-lb__stage { display: grid; place-items: center; padding: 44px 60px 8px; min-height: 50vh; }
.adm-lb__img { max-height: min(72vh, 860px); width: auto; border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); opacity: 0; transform: scale(.98); transition: opacity .3s, transform .4s var(--ease-out); }
.adm-lb__img.is-in { opacity: 1; transform: none; }
.adm-lb__cap { text-align: center; color: #C9C3EE; font-weight: 600; font-size: .86rem; padding: .6rem 1rem 1rem; }
.adm-lb__nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; transition: background-color var(--t-fast); }
.adm-lb__nav:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.adm-lb__nav:disabled { opacity: .25; cursor: default; }
.adm-lb__nav--prev { left: 8px; }
.adm-lb__nav--next { right: 8px; }
.adm-lightbox :focus-visible { outline-color: var(--gold-300); }
@media (max-width: 640px) { .adm-lb__stage { padding: 52px 10px 4px; min-height: 0; } .adm-lb__nav { top: auto; bottom: 6px; translate: none; } .adm-lb__cap { padding: 1rem 60px 1.2rem; } }

/* drawers (learner quick view, competition entry, inbox on phones) */
.adm-body .adm-drawer .modal__panel { --mw: 540px; }
.adm-body .adm-drawer .modal__head:not(.modal__head--bare) { padding-bottom: .9rem; border-bottom: 1px solid var(--adm-line); }
.adm-body .adm-drawer .modal__body { padding-top: 1.1rem; }
.adm-drawer__body { display: grid; gap: 1.1rem; }
.adm-drawer__who { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.adm-drawer__who > div { min-width: 0; }
.adm-drawer__name { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.2; }
.adm-drawer__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .3rem; margin-top: .2rem; font-size: .86rem; color: var(--text-soft); }
.adm-drawer__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm); overflow: hidden; background: var(--adm-head); }
.adm-drawer__stats > div { padding: .7rem .9rem; border-right: 1px solid var(--adm-line); border-bottom: 1px solid var(--adm-line); min-width: 0; }
.adm-drawer__stats > div:nth-child(2n) { border-right: 0; }
.adm-drawer__stats > div:nth-last-child(-n + 2) { border-bottom: 0; }
.adm-drawer__stats dt, .adm-profile__stats dt, .adm-auto__stats dt, .adm-verify__stat dt { font-size: .66rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.adm-drawer__stats dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; min-height: 1.7rem; }
.adm-drawer__stats dd strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.adm-drawer__stats dd small { color: var(--text-mute); font-size: .8rem; }

/* =====================================================================================================
   06 · PAGE PRIMITIVES: LEAD, GRID, CARDS, KPI TILES, HERO, NEEDS-ATTENTION
   ===================================================================================================== */
.adm-page { display: grid; gap: 18px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.adm-lead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.2rem; }
.adm-lead__text { min-width: 0; flex: 1 1 320px; }
.adm-lead__desc { color: var(--text-soft); max-width: 78ch; }
.adm-lead__desc strong { color: var(--text); font-weight: 650; }
.adm-lead__desc .badge { vertical-align: 1px; }
.adm-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .7rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); }
.adm-eyebrow .i { width: .95rem; height: .95rem; }
.adm-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.adm-btncount { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #E0552F; color: #fff; font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.adm-dlstate { font-size: .84rem; }
.adm-dlstate:empty { display: none; }
.adm-certs.is-exporting { cursor: progress; }
.adm-sectionhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem 1rem; margin-top: .6rem; }
.adm-body .adm-sectionhead__title { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; font-variation-settings: 'opsz' 40; }
.adm-sectionhead__title .i { width: 1.2rem; height: 1.2rem; color: var(--gold-600); flex: none; }
.adm-sectionhead__sub { color: var(--text-mute); font-size: .86rem; margin-top: .1rem; }

.adm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.adm-grid > * { grid-column: 1 / -1; min-width: 0; }
.adm-grid > .adm-span-4 { grid-column: span 4; }
.adm-grid > .adm-span-5 { grid-column: span 5; }
.adm-grid > .adm-span-6 { grid-column: span 6; }
.adm-grid > .adm-span-7 { grid-column: span 7; }
.adm-grid > .adm-span-8 { grid-column: span 8; }
.adm-grid > .adm-span-12 { grid-column: 1 / -1; }
/* mid widths: the wide chart takes the row, a plain (non-chart) third-width card spreads out under it */
@media (max-width: 1279.98px) {
  .adm-grid > .adm-span-8, .adm-grid > .adm-span-4:not(.adm-chart) { grid-column: 1 / -1; }
  .adm-grid > .adm-span-4:not(.adm-chart) .adm-depths { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
}
@media (max-width: 1099.98px) {
  .adm-grid > [class*="adm-span-"] { grid-column: 1 / -1; }
  .adm-grid > .adm-span-4:not(.adm-chart) .adm-depths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719.98px) { .adm-grid > .adm-span-4:not(.adm-chart) .adm-depths { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 719.98px) { .adm-grid, .adm-page { gap: 14px; } }

.adm-card { position: relative; min-width: 0; padding: 18px 20px 20px; background: #fff; border: 1px solid var(--adm-line); border-radius: var(--adm-r); box-shadow: var(--adm-shadow); }
.adm-card--flush { padding: 0; overflow: hidden; }
.adm-card__pad { padding: 18px 20px 0; }
.adm-card__pad .adm-card__head { margin-bottom: 14px; }
.adm-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem .9rem; margin-bottom: 14px; }
.adm-card__titles { min-width: 0; flex: 1 1 220px; }
.adm-body .adm-card__title { font-size: 1rem; font-weight: 650; letter-spacing: -.012em; line-height: 1.3; }
.adm-card__sub { margin-top: .15rem; color: var(--text-mute); font-size: .84rem; line-height: 1.45; }
.adm-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35rem; }
@media (max-width: 719.98px) { .adm-card { padding: 16px; border-radius: 14px; } .adm-card--flush { padding: 0; } .adm-card__pad { padding: 16px 16px 0; } }

.adm-chart { display: flex; flex-direction: column; }
.adm-chart__legend { margin: -4px 0 12px; }
.adm-chart__host { position: relative; min-width: 0; }
.adm-chart__foot { margin-top: .6rem; color: var(--text-mute); font-size: .82rem; }
.adm-body .adm-tabletoggle[aria-pressed="true"] { background: #FBF3DA; color: var(--gold-ink); }

/* KPI tiles */
.adm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.adm-kpi { --tone: var(--c-gold); position: relative; display: flex; flex-direction: column; gap: .55rem; min-width: 0; padding: 15px 16px 14px; background: #fff; border: 1px solid var(--adm-line); border-radius: var(--adm-r); box-shadow: var(--adm-shadow); color: inherit; overflow: hidden; transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color var(--t-fast); }
.adm-kpi::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--tone), transparent 85%); opacity: .85; }
.adm-kpi--gold { --tone: var(--c-gold); } .adm-kpi--teal { --tone: var(--c-teal); } .adm-kpi--aqua { --tone: var(--c-aqua); } .adm-kpi--coral { --tone: var(--c-coral); }
.adm-kpi--lilac { --tone: var(--c-lilac); } .adm-kpi--green { --tone: var(--c-green); } .adm-kpi--deep { --tone: var(--c-deep); }
@media (hover: hover) {
  a.adm-kpi:hover { transform: translateY(-2px); box-shadow: var(--adm-shadow-hover); border-color: var(--adm-line-2); }
  a.adm-kpi:hover .adm-kpi__mark { transform: scale(1.12) rotate(8deg); }
}
.adm-kpi.is-loading { min-height: 138px; gap: .8rem; justify-content: center; }
.adm-kpi.is-loading::before { display: none; }
.adm-kpi__mark { position: absolute; right: 12px; top: 13px; width: 30px; height: 30px; pointer-events: none; transition: transform .6s var(--ease-spring); }
.adm-kpi__mark svg { width: 100%; height: 100%; }
.adm-kpi__top { display: flex; align-items: center; gap: .55rem; min-width: 0; padding-right: 36px; }
.adm-kpi__ico { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; }
.adm-kpi__ico .i { width: 1.05rem; height: 1.05rem; }
.adm-kpi__label { min-width: 0; font-size: .68rem; font-weight: 650; line-height: 1.22; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adm-kpi__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .3rem .6rem; min-height: 40px; }
.adm-kpi__value { font-family: var(--font-display); font-size: 2.05rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--text); font-variant-numeric: tabular-nums; font-variation-settings: 'opsz' 72; white-space: nowrap; }
.adm-kpi__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; min-width: 0; margin-top: auto; color: var(--text-mute); font-size: .78rem; line-height: 1.35; }
.adm-kpi .viz-spark { flex: none; }
.adm-kpi__pearl { width: 40px; height: 40px; flex: none; }
.adm-kpi__pearl svg { width: 100%; height: 100%; }
.adm-ring { flex: none; }
.adm-tries { display: inline-flex; gap: 5px; margin-bottom: 6px; }
.adm-tries i { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(90deg, var(--c-gold) var(--f, 0%), #ECE7DA var(--f, 0%)); box-shadow: inset 0 0 0 1px rgba(166, 123, 36, .35); }
.adm-delta { display: inline-flex; align-items: center; gap: 2px; padding: .12em .5em .12em .35em; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm-delta .i { width: .85rem; height: .85rem; }
.adm-delta--up { background: var(--ok-soft); color: #0E6E4E; }
.adm-delta--down { background: var(--danger-soft); color: #B02A30; }
.adm-delta--down .i { transform: rotate(90deg); }
.adm-delta--flat { background: rgba(16, 12, 46, .07); color: var(--text-soft); }
.adm-meter { display: block; height: 6px; border-radius: 999px; background: rgba(16, 12, 46, .09); overflow: hidden; }
.adm-meter i { display: block; height: 100%; border-radius: inherit; background: var(--c-gold); }
.adm-meter--teal i { background: var(--c-teal); }
.adm-meter--aqua i { background: var(--c-aqua); }
.adm-meter--green i { background: var(--c-green); }
@media (max-width: 1179.98px) { .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) and (max-width: 1023.98px) { .adm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 719.98px) {
  .adm-kpis { gap: 10px; }
  .adm-kpi { padding: 13px 13px 12px; border-radius: 14px; }
  .adm-kpi__value { font-size: 1.7rem; }
  .adm-kpi__mark { width: 24px; height: 24px; right: 10px; top: 12px; }
  .adm-kpi__top { padding-right: 26px; gap: .45rem; }
  .adm-kpi__ico { width: 26px; height: 26px; border-radius: 8px; }
  .adm-kpi__label { font-size: .64rem; letter-spacing: .06em; white-space: normal; line-height: 1.25; }
  .adm-kpi .viz-spark { width: 56px; height: 28px; }
}
@media (max-width: 359.98px) { .adm-kpis { grid-template-columns: 1fr; } }

/* overview hero: a deep-sea scene; the course strand sits in six columns of water, shallow → deep */
.adm-hero {
  --text: #F3F7FA; --text-soft: #C9C3EE; --text-mute: #8FA9BB; --glass: rgba(255, 255, 255, .07); --glass-2: rgba(255, 255, 255, .12);
  --line: rgba(200, 192, 255, .16); --line-strong: rgba(200, 192, 255, .3); --accent: var(--gold-300); --focus: var(--gold-300);
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: stretch; gap: 1rem 2rem;
  padding: 26px 26px 22px 30px; border-radius: 20px; color: var(--text);
  background: radial-gradient(680px 340px at 8% -30%, rgba(146, 128, 255, .38), transparent 62%), radial-gradient(520px 300px at 46% 130%, rgba(200, 149, 46, .2), transparent 62%), linear-gradient(118deg, #14677F 0%, #1F0A8C 44%, #120760 100%);
  box-shadow: 0 1px 2px rgba(16, 12, 46, .2), 0 22px 46px -22px rgba(16, 12, 46, .6);
}
.adm-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(104deg, transparent 0 4.5%, rgba(255, 255, 255, .05) 6% 8%, transparent 10.5% 17%, rgba(255, 255, 255, .03) 19% 20.5%, transparent 23% 29%); -webkit-mask-image: linear-gradient(115deg, #000 0, rgba(0, 0, 0, .55) 38%, transparent 66%); mask-image: linear-gradient(115deg, #000 0, rgba(0, 0, 0, .55) 38%, transparent 66%); }
.adm-hero__text { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding-block: .4rem; }
.adm-body .adm-hero__title { margin-top: .6rem; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; font-variation-settings: 'opsz' 96; }
.adm-hero__lead { margin: .7rem 0 1.2rem; max-width: 46ch; color: #C3D4DF; line-height: 1.55; }
.adm-hero__lead strong { color: #fff; font-weight: 650; }
.adm-body .adm-hero .btn--secondary { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(200, 192, 255, .34); box-shadow: none; }
.adm-body .adm-hero .btn--ghost { color: #C3D4DF; }
@media (hover: hover) {
  .adm-body .adm-hero .btn--secondary:hover { background: rgba(255, 255, 255, .15); border-color: var(--gold-300); color: #fff; }
  .adm-body .adm-hero .btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
}
.adm-hero__strand { position: relative; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.adm-hero__zones { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: 14px; box-shadow: 0 0 0 1px rgba(200, 192, 255, .2), 0 14px 30px -14px rgba(0, 0, 0, .6); }
.adm-hero__zone { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; min-width: 0; min-height: 176px; padding: 12px 4px 10px; background: linear-gradient(180deg, var(--za), var(--zb)); }
.adm-hero__zone + .adm-hero__zone { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1); }
.adm-hero__zone:first-child { border-radius: 14px 0 0 14px; }
.adm-hero__zone:last-child { border-radius: 0 14px 14px 0; }
.adm-hero__zname { order: 2; min-height: 2.3em; display: grid; place-items: center; font-size: .6rem; font-weight: 650; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; text-align: center; color: rgba(255, 255, 255, .8); text-wrap: balance; }
.adm-hero__zone--treasure .adm-hero__zname { color: var(--gold-300); }
.adm-hero__pearls { flex: 1; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 38px; gap: 2px; place-items: center; align-content: center; }
.adm-hero__p { position: relative; display: block; width: calc(var(--s, .6) * 36px); aspect-ratio: 1; border-radius: 50%; transition: transform .35s var(--ease-spring); }
.adm-hero__p svg { width: 100%; height: 100%; }
.adm-hero__p > .skeleton { display: block; width: 22px; height: 22px; border-radius: 50%; margin: auto; }
a.adm-hero__p:hover, a.adm-hero__p:focus-visible { transform: scale(1.18); z-index: 3; }
.adm-hero__p[data-tip]::after { z-index: 6; }
.adm-hero__zone:nth-child(-n + 2) .adm-hero__p[data-tip]::after { left: 0; translate: 0 4px; }
.adm-hero__zone:nth-last-child(-n + 3) .adm-hero__p[data-tip]::after { left: auto; right: 0; translate: 0 4px; }
@media (hover: hover) { .adm-hero__zone:nth-child(-n + 2) .adm-hero__p[data-tip]:hover::after, .adm-hero__zone:nth-last-child(-n + 3) .adm-hero__p[data-tip]:hover::after { translate: 0 0; } }
.adm-hero__cap { font-size: .72rem; color: #8FA9BB; text-align: right; }
@media (max-width: 1099.98px) {
  .adm-hero { grid-template-columns: 1fr; padding: 22px; }
  .adm-hero__zone { min-height: 150px; }
  .adm-hero__cap { text-align: left; }
}
@media (max-width: 719.98px) {
  .adm-hero { padding: 18px 16px 16px; border-radius: 16px; }
  /* phones: the six zones become rows, top → bottom darker */
  .adm-hero__zones { grid-template-columns: 1fr; }
  .adm-hero__zone { flex-direction: row; justify-content: space-between; gap: .5rem; min-height: 0; padding: 4px 8px 4px 12px; background: linear-gradient(90deg, var(--za), var(--zb)); }
  .adm-hero__zone + .adm-hero__zone { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
  .adm-hero__zone:first-child { border-radius: 14px 14px 0 0; }
  .adm-hero__zone:last-child { border-radius: 0 0 14px 14px; }
  .adm-hero__zname { order: 0; flex: 1; min-height: 0; place-items: center start; text-align: left; font-size: .62rem; }
  .adm-hero__pearls { flex: none; width: auto; grid-template-columns: repeat(6, 30px); grid-auto-rows: 40px; gap: 0; }
  .adm-hero__p { width: calc(var(--s, .6) * 28px); }
  .adm-hero__p::before { content: ''; position: absolute; inset: 50% auto auto 50%; width: 30px; height: 40px; translate: -50% -50%; }
}
@media (max-width: 379.98px) { .adm-hero__pearls { grid-template-columns: repeat(6, 26px); } .adm-hero__p { width: calc(var(--s, .6) * 24px); } .adm-hero__p::before { width: 26px; } }

/* needs attention */
.adm-attn { display: grid; gap: .8rem; min-width: 0; }
.adm-attn__head { display: flex; align-items: center; gap: .5rem .6rem; flex-wrap: wrap; }
.adm-attn__head > .i { width: 1.2rem; height: 1.2rem; color: var(--gold-600); }
.adm-body .adm-attn__head h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; font-variation-settings: 'opsz' 40; white-space: nowrap; }
.adm-attn__head span { color: var(--text-mute); font-size: .86rem; }
.adm-attn__items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.adm-attn__item { --tone: var(--c-gold); position: relative; display: flex; flex-direction: column; gap: .4rem; min-width: 0; padding: 13px 14px 14px 17px; border-radius: 14px; background: #fff; border: 1px solid var(--adm-line); box-shadow: var(--adm-shadow); overflow: hidden; }
.adm-attn__item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone); }
.adm-attn__item--teal { --tone: var(--c-teal); } .adm-attn__item--coral { --tone: var(--c-coral); } .adm-attn__item--lilac { --tone: var(--c-lilac); } .adm-attn__item--deep { --tone: var(--c-deep); }
.adm-attn__item.is-clear { --tone: rgba(16, 12, 46, .14); background: rgba(255, 255, 255, .55); box-shadow: none; }
.adm-attn__top { display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: 30px; }
.adm-attn__ico { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; }
.adm-attn__ico .i { width: 1rem; height: 1rem; }
.adm-attn__item.is-clear .adm-attn__ico { background: rgba(16, 12, 46, .06); color: var(--text-mute); }
.adm-attn__n { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.adm-attn__item.is-clear .adm-attn__n { color: var(--text-mute); }
.adm-attn__title { flex: 1; min-width: 0; font-weight: 600; font-size: .84rem; color: var(--text-soft); line-height: 1.2; }
.adm-attn__txt { color: var(--text-mute); font-size: .8rem; line-height: 1.45; }
.adm-attn__act { margin-top: auto; padding-top: .35rem; }
.adm-stack { display: inline-flex; flex: none; padding-left: 8px; }
.adm-stack__i { width: 26px; height: 26px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, var(--deep-600), var(--deep-800)); border: 2px solid #fff; }
.adm-stack__i svg { width: 72%; height: 72%; }
.adm-stack__i--txt { background: #DBF0F3; color: #0F6A7D; font-size: .6rem; font-weight: 700; letter-spacing: 0; }
.adm-stack__i--more { background: #E9EDF1; color: var(--text-soft); font-size: .6rem; font-weight: 700; }
.adm-refs { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.adm-ref { padding: .25em .45em; border-radius: 6px; background: #FFE5DC; color: #A8421F; font: 650 .62rem/1.2 ui-monospace, Consolas, monospace; white-space: nowrap; }
@media (max-width: 1499.98px) {
  .adm-attn__items { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .adm-attn__item { grid-column: span 2; }
  .adm-attn__item:nth-child(n + 4) { grid-column: span 3; }
}
@media (max-width: 859.98px) { .adm-attn__items { grid-template-columns: 1fr; gap: 8px; } .adm-attn__item, .adm-attn__item:nth-child(n + 4) { grid-column: auto; } .adm-attn__item.is-clear { padding-block: 8px; } .adm-attn__item.is-clear .adm-attn__txt { display: none; } }

/* depth zones list (overview) */
.adm-depths { display: grid; gap: 2px; margin: -4px 0; }
.adm-depth { display: flex; align-items: center; gap: .75rem; padding: .42rem 0; border-bottom: 1px solid var(--adm-row); min-width: 0; }
.adm-depth:last-child { border-bottom: 0; }
.adm-depth__art { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, var(--za), var(--zb)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.adm-depth__art svg { width: 62%; height: 62%; }
.adm-depth__main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.adm-depth__main strong { font-weight: 650; font-size: .9rem; line-height: 1.3; }
.adm-depth__main small { color: var(--text-mute); font-size: .76rem; }
.adm-depth__main .adm-meter { margin-top: .3rem; height: 5px; }
.adm-depth__main .adm-meter i { background: linear-gradient(90deg, var(--za), var(--zb)); }
.adm-depth__n { flex: none; display: grid; justify-items: end; min-width: 3ch; }
.adm-depth__n strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.adm-depth__n small { color: var(--text-mute); font-size: .74rem; font-variant-numeric: tabular-nums; }

/* =====================================================================================================
   07 · LISTS, ACTIVITY, AVATARS, PROGRESS, STATES, CHIPS, TABS
   ===================================================================================================== */
.adm-list { display: grid; gap: 1px; margin: -6px -8px; }
.adm-list__row { display: flex; align-items: center; gap: .75rem; padding: .5rem; border-radius: 11px; color: inherit; }
.adm-list__row:hover { background: var(--adm-hover); }
.adm-list__main { flex: 1; min-width: 0; display: grid; }
.adm-list__main strong { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-list__main small { color: var(--text-mute); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-list__side { flex: none; width: 140px; }
@media (max-width: 480px) { .adm-list__side { width: 96px; } }

.adm-acts { display: grid; gap: 1px; }
.adm-act { display: flex; gap: .75rem; align-items: flex-start; padding: .45rem 0; }
.adm-act__ico { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; }
.adm-act__ico .i { width: 1rem; height: 1rem; }
.adm-act__body { min-width: 0; padding-top: 1px; }
.adm-act__text { color: var(--text); font-weight: 500; font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.adm-act__text a { color: inherit; }
.adm-act__text a:hover { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.adm-act__meta { color: var(--text-mute); font-size: .76rem; margin-top: 1px; }
.adm-act.is-compact { padding: .38rem 0; }
.adm-act.is-compact .adm-act__text { font-size: .875rem; }
.adm-acts--timeline .adm-act { position: relative; padding: .55rem 0; }
.adm-acts--timeline .adm-act::before { content: ''; position: absolute; left: 15.5px; top: 44px; bottom: -6px; width: 1px; background: var(--adm-line-2); }
.adm-acts--timeline .adm-act:last-child::before { display: none; }

/* avatars: a pearl resting on deep water */
.adm-ava { --s: 38px; width: var(--s); height: var(--s); flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: radial-gradient(circle at 50% 38%, var(--deep-600), var(--deep-800)); box-shadow: inset 0 0 0 1px rgba(229, 197, 104, .55); overflow: hidden; }
.adm-ava svg { width: 64%; height: 64%; }
.adm-ava--sm { --s: 32px; }
.adm-ava--lg { --s: 60px; }
.adm-ava--xl { --s: 88px; box-shadow: inset 0 0 0 1.5px rgba(229, 197, 104, .7), 0 10px 24px -10px rgba(16, 12, 46, .55); }
.adm-ava--initials { background: linear-gradient(145deg, #E8EEF2, #D3DEE6); box-shadow: inset 0 0 0 1px rgba(16, 12, 46, .1); color: var(--deep-600); font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .01em; }
.adm-inline-pearl { display: inline-grid; width: 22px; height: 22px; vertical-align: -5px; margin-right: .35rem; flex: none; }
.adm-inline-pearl svg { width: 100%; height: 100%; }

.adm-prog { display: flex; align-items: center; gap: .6rem; min-width: 104px; }
.adm-prog .bar { flex: 1; min-width: 44px; }
.adm-prog.is-complete .bar__fill { background: linear-gradient(90deg, #1F9D77, #55CFA6); }
.adm-prog__n { flex: none; min-width: 3.4ch; font-size: .82rem; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.adm-prog__n small { color: var(--text-mute); font-weight: 500; font-size: .9em; }
.adm-prog-rows { display: grid; gap: .9rem; }
.adm-prog-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: .75rem; }
.adm-prog-row__label { display: grid; font-weight: 600; font-size: .9rem; }
.adm-prog-row__label small { color: var(--text-mute); font-weight: 400; font-size: .76rem; }
.adm-prog-row__n { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.adm-prog-row__n small { color: var(--text-mute); font-size: .8em; font-weight: 500; }
@media (max-width: 480px) { .adm-prog-row { grid-template-columns: minmax(0, 1fr) auto; } .adm-prog-row .bar { grid-column: 1 / -1; grid-row: 2; } }

.adm-empty { display: grid; justify-items: center; text-align: center; gap: .3rem; padding: 2.2rem 1.2rem 2.4rem; color: var(--text-soft); }
.adm-empty.is-compact { padding: 1.3rem 1rem 1.5rem; }
.adm-empty__art { width: 96px; margin-bottom: .3rem; }
.adm-empty.is-compact .adm-empty__art { width: 68px; }
.adm-empty__art svg { width: 100%; height: auto; }
.adm-empty__title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 650; letter-spacing: -.012em; color: var(--text); }
.adm-empty__text { max-width: 42ch; font-size: .88rem; line-height: 1.5; }
.adm-empty .btn { margin-top: .6rem; }
.adm-empty.is-error .adm-empty__art { filter: saturate(.4); }

.adm-skel-line { display: block; height: 11px; margin: 10px 0; border-radius: 999px; }
.adm-skel-line--xl { height: 28px; border-radius: 8px; }
.adm-skel-row { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--adm-row); }
.adm-skel-row .adm-skel-line { margin: 0; }
.adm-skel-ava { display: block; width: 36px; height: 36px; flex: none; border-radius: 50%; }
.adm-skel-block { display: block; width: 100%; border-radius: 12px; }
.adm-body .skeleton { background-image: linear-gradient(90deg, rgba(16, 12, 46, .05) 0%, rgba(16, 12, 46, .1) 50%, rgba(16, 12, 46, .05) 100%); }

.adm-copy { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: .15rem; vertical-align: middle; border-radius: 7px; color: var(--text-mute); flex: none; transition: background-color var(--t-fast), color var(--t-fast); }
.adm-copy:hover { background: var(--adm-soft); color: var(--gold-ink); }
.adm-copy .i { width: .9rem; height: .9rem; }
@media (max-width: 719.98px) { .adm-copy { width: 40px; height: 40px; margin-block: -6px; } .adm-copy .i { width: 1rem; height: 1rem; } }

.adm-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-width: 0; }
.adm-chip { display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .7rem; border-radius: 999px; border: 1px solid var(--adm-line-2); background: #fff; color: var(--text-soft); font-size: .82rem; font-weight: 600; white-space: nowrap; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.adm-chip:hover { border-color: var(--gold-500); color: var(--text); }
.adm-chip[aria-pressed="true"] { background: var(--deep-800); border-color: var(--deep-800); color: #fff; }
.adm-chip__n { padding: .08em .5em; border-radius: 999px; background: rgba(16, 12, 46, .07); color: var(--text-mute); font-size: .72rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.adm-chip[aria-pressed="true"] .adm-chip__n { background: rgba(229, 197, 104, .24); color: var(--gold-300); }
.adm-chip__ico { width: 22px; height: 22px; margin-left: -.35rem; border-radius: 50%; display: grid; place-items: center; }
.adm-chip__ico .i { width: .8rem; height: .8rem; }
@media (max-width: 719.98px) { .adm-chip { height: 40px; padding: 0 .85rem; } }

.adm-selectwrap { display: inline-flex; min-width: 0; }
.adm-body .adm-select { min-height: 36px; height: 36px; padding-top: 0; padding-bottom: 0; font-size: .86rem; font-weight: 550; color: var(--text-soft); background-color: #fff; max-width: 250px; }
@media (max-width: 719.98px) { .adm-body .adm-select { min-height: 42px; height: 42px; font-size: 16px; } }

/* tabs (A.tabsMarkup → .tabs__list / .tabs__tab / .tabs__ink) */
.adm-tabsbar { display: flex; min-width: 0; border-bottom: 1px solid var(--adm-line); }
.tabs__list { position: relative; display: flex; gap: .15rem; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { display: inline-flex; align-items: center; gap: .45rem; flex: none; min-height: 44px; padding: 0 .85rem; border-radius: 9px 9px 0 0; color: var(--text-soft); font-weight: 600; font-size: .9rem; white-space: nowrap; transition: color var(--t-fast), background-color var(--t-fast); }
.tabs__tab .i { width: 1.05rem; height: 1.05rem; color: var(--text-mute); transition: color var(--t-fast); }
.tabs__tab:hover { color: var(--text); background: rgba(16, 12, 46, .04); }
.tabs__tab[aria-selected="true"] { color: var(--text); }
.tabs__tab[aria-selected="true"] .i { color: var(--gold-600); }
.tabs__tab:focus-visible { outline-offset: -3px; }
.adm-tabs .tabs__ink { bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--gold-500); pointer-events: none; }
.adm-tabs__n { min-width: 20px; padding: .08em .45em; border-radius: 999px; background: rgba(16, 12, 46, .08); color: var(--text-soft); font-size: .7rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.tabs__tab[aria-selected="true"] .adm-tabs__n { background: rgba(200, 149, 46, .2); color: var(--gold-ink); }

/* =====================================================================================================
   08 · TOOLBAR, TABLES, PAGER, BULK BAR
   ===================================================================================================== */
.adm-toolbar { display: grid; gap: .6rem; padding: 12px 14px; border-bottom: 1px solid var(--adm-line); background: #fff; }
.adm-toolbar--bare { padding: 0; border: 0; background: none; }
.adm-toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; min-width: 0; }
.adm-toolbar__count { font-size: .8rem; }
.adm-toolbar__count:empty { display: none; }
.adm-searchbox { position: relative; flex: 1 1 260px; min-width: 200px; max-width: 420px; }
.adm-searchbox > .i { position: absolute; left: .7rem; top: 50%; translate: 0 -50%; width: 1.05rem; height: 1.05rem; color: var(--text-mute); pointer-events: none; }
.adm-body .adm-searchbox .input { padding-left: 2.3rem; min-height: 38px; height: 38px; background: #fff; }
.adm-searchbox .input::-webkit-search-cancel-button { cursor: pointer; }
.adm-filters { gap: .5rem; }
.adm-filters__spacer { flex: 1; }
.adm-filters-toggle { display: none; }
.adm-tablewrap { position: relative; overflow: auto; max-height: max(380px, calc(100dvh - 236px)); container-type: inline-size; overscroll-behavior-x: contain; transition: opacity .2s; }
.adm-tablewrap--tall { max-height: max(420px, calc(100dvh - 190px)); }
.adm-tablewrap.is-refreshing { opacity: .5; pointer-events: none; }
.adm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.adm-table caption { text-align: left; }
.adm-table thead th { position: sticky; top: 0; z-index: 2; padding: .6rem .6rem; background: var(--adm-head); border-bottom: 1px solid var(--adm-line); text-align: left; font-size: .66rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); white-space: nowrap; }
.adm-table .adm-ava:not(.adm-ava--sm) { --s: 34px; }
.adm-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--adm-row); vertical-align: middle; color: var(--text-soft); }
.adm-table th:first-child, .adm-table td:first-child { padding-left: 16px; }
.adm-table th:last-child, .adm-table td:last-child { padding-right: 12px; }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody tr { transition: background-color .12s; }
.adm-table tbody tr:hover { background: var(--adm-hover); }
.adm-table tbody tr.is-selected { background: var(--adm-sel); }
.adm-table tbody tr.is-link { cursor: pointer; }
.adm-table tbody tr.is-muted td { color: var(--text-mute); }
.adm-table tbody tr.is-muted .adm-ava { opacity: .6; }
.adm-table tbody tr.is-flagged { background: #FFFAEC; }
.adm-table .adm-num { text-align: right; }
.adm-table th.adm-num .adm-th-sort { flex-direction: row-reverse; }
.adm-table a:not(.btn):not(.adm-who) { color: var(--gold-ink); font-weight: 550; }
.adm-table__group th { position: static; padding: .55rem .6rem .45rem 16px; background: linear-gradient(90deg, #EDF4F6, #F7FAFA); border-bottom: 1px solid var(--adm-line); text-align: left; font-family: var(--font-display); font-size: .84rem; font-weight: 650; letter-spacing: -.005em; color: var(--deep-600); }
.adm-table__group th span { margin-left: .5rem; font-family: var(--font-body); font-size: .72rem; font-weight: 550; color: var(--text-mute); }
.adm-table tbody tr.adm-table__group:hover { background: none; }
.adm-table--learners .adm-td-main { min-width: 200px; }
.adm-table--levels td { padding-top: .42rem; padding-bottom: .42rem; }
.adm-table--levels .adm-td-main { min-width: 210px; }
.adm-table--levels .adm-heat { min-width: 96px; }
.adm-phone { font-variant-numeric: tabular-nums; font-size: .84rem; }
.adm-td-check { width: 42px; padding-right: 0 !important; }
.adm-td-menu { width: 50px; text-align: right; }
.adm-td-actions { text-align: right; white-space: nowrap; width: 1%; }
.adm-td-prog { min-width: 136px; }
.adm-td-wrap { min-width: 260px; line-height: 1.45; color: var(--text) !important; }
.adm-th-sort { display: inline-flex; align-items: center; gap: .2rem; margin: -.3rem -.4rem; padding: .3rem .4rem; border-radius: 7px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.adm-th-sort:hover { color: var(--text); background: rgba(16, 12, 46, .06); }
.adm-th-sort.is-on { color: var(--gold-ink); }
.adm-th-sort__i { display: inline-grid; opacity: .5; }
.adm-th-sort.is-on .adm-th-sort__i { opacity: 1; }
.adm-th-sort__i .i { width: .8rem; height: .8rem; }
.adm-cb { width: 17px; height: 17px; margin: 0; accent-color: var(--gold-600); cursor: pointer; vertical-align: middle; }
.adm-who { display: flex; align-items: center; gap: .7rem; min-width: 0; color: inherit; text-align: left; }
a.adm-who:hover .adm-who__name, .adm-who--btn:hover .adm-who__name { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.adm-who--btn { padding: 0; border-radius: 8px; max-width: 100%; }
.adm-who__txt { display: grid; min-width: 0; }
.adm-who__name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.adm-who__name .badge { vertical-align: 1px; margin-left: .2rem; }
.adm-who__sub { font-size: .76rem; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.adm-rowbtns { display: inline-flex; align-items: center; gap: 2px; }
.adm-file { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-soft); font-size: .82rem; white-space: nowrap; }
.adm-file .i { width: 1rem; height: 1rem; color: var(--ok); }
/* column priority (container query on the table wrapper) */
@container (max-width: 1060px) { .adm-table--learners .adm-hide-sm { display: none; } }
@container (max-width: 900px) { .adm-table--learners th:nth-child(4), .adm-table--learners td:nth-child(4) { display: none; } }

.adm-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: 10px 14px; border-top: 1px solid var(--adm-line); background: var(--adm-head); }
.adm-pager__left { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.adm-pager__info { font-size: .84rem; color: var(--text-mute); }
.adm-pager__info strong { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.adm-pager__btns { display: flex; align-items: center; gap: 3px; }
.adm-pager__btn { min-width: 34px; height: 34px; padding: 0 .4rem; border-radius: 9px; display: grid; place-items: center; color: var(--text-soft); font-size: .86rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.adm-pager__btn:hover:not(:disabled) { background: rgba(16, 12, 46, .07); color: var(--text); }
.adm-pager__btn[aria-current] { background: var(--deep-800); color: #fff; }
.adm-pager__btn:disabled { opacity: .35; cursor: default; }
.adm-pager__btn .i { width: 1.05rem; height: 1.05rem; }
.adm-pager__gap { color: var(--text-mute); padding: 0 .2rem; }

.adm-bulk { position: fixed; z-index: 55; bottom: 18px; left: calc(var(--adm-offset) + (100vw - var(--adm-offset)) / 2); translate: -50% 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem; width: max-content; max-width: calc(100vw - var(--adm-offset) - 24px); padding: 7px 7px 7px 16px; border-radius: 15px; background: var(--deep-800); color: #F3F7FA; border: 1px solid rgba(200, 192, 255, .2); box-shadow: 0 18px 44px -10px rgba(10, 6, 40, .6); animation: adm-rise .3s var(--ease-out); }
@keyframes adm-rise { from { opacity: 0; transform: translateY(12px); } }
.adm-bulk__count { font-weight: 600; margin-right: .2rem; white-space: nowrap; font-size: .88rem; }
.adm-bulk__count strong { color: var(--gold-300); font-variant-numeric: tabular-nums; }
.adm-bulk__link { color: var(--gold-300); font-weight: 600; font-size: .86rem; text-decoration: underline; text-underline-offset: 3px; padding: .35rem; border-radius: 7px; }
.adm-bulk__sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .18); margin: 0 .2rem; }
.adm-bulk__btn { display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .7rem; border-radius: 9px; color: #F3F7FA; font-size: .84rem; font-weight: 600; white-space: nowrap; transition: background-color var(--t-fast); }
.adm-bulk__btn:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.adm-bulk__btn .i { width: 1rem; height: 1rem; }
.adm-bulk__btn--danger { color: #FF9D9F; }
.adm-bulk__btn--danger:hover:not(:disabled) { background: rgba(229, 72, 77, .28); }
.adm-bulk__x { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: #C9C3EE; }
.adm-bulk__x:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.adm-bulk :focus-visible { outline-color: var(--gold-300); }

/* tables → cards below 720px */
@media (max-width: 719.98px) {
  .adm-tablewrap { max-height: none; overflow: visible; container-type: normal; }
  .adm-table--cards, .adm-table--cards tbody { display: block; }
  .adm-table--cards thead { display: none; }
  .adm-table--cards tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; background: var(--adm-head); }
  .adm-table--cards tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .6rem; align-items: center; padding: 12px 14px 8px; background: #fff; border: 1px solid var(--adm-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(28, 22, 70, .05); }
  .adm-table--cards tbody tr:hover { background: #fff; }
  .adm-table--cards tbody tr.is-selected { background: var(--adm-sel); border-color: var(--gold-500); }
  .adm-table--cards tbody tr.is-flagged { background: #FFFAEC; }
  .adm-table--cards td, .adm-table--cards td:first-child, .adm-table--cards td:last-child { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; min-height: 36px; padding: .35rem 0; border: 0; border-top: 1px solid var(--adm-row); text-align: right; }
  .adm-table--cards td[data-label]::before { content: attr(data-label); flex: none; font-size: .64rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); text-align: left; }
  .adm-table--cards td.adm-td-main { grid-column: 1 / 3; grid-row: 1; border-top: 0; padding: 0 0 .5rem; text-align: left; justify-content: flex-start; }
  .adm-table--cards td.adm-td-check { grid-column: 1; grid-row: 1; border-top: 0; padding: 0 0 .5rem; width: auto; min-width: 28px; }
  .adm-table--cards td.adm-td-check + td.adm-td-main { grid-column: 2; }
  .adm-table--cards td.adm-td-menu, .adm-table--cards td.adm-td-actions { grid-column: 3; grid-row: 1; border-top: 0; padding: 0 0 .5rem; width: auto; }
  .adm-table--cards td.adm-td-actions:empty { display: none; }
  .adm-table--cards .adm-hide-sm { display: none; }
  .adm-table--cards .adm-prog { min-width: 0; width: 60%; }
  .adm-table--cards .adm-td-prog { min-width: 0; }
  .adm-table--cards .adm-td-wrap { min-width: 0; display: block; text-align: left; }
  .adm-table--cards .adm-td-wrap::before { display: block; margin-bottom: .25rem; }
  .adm-table--cards .adm-who__name, .adm-table--cards .adm-who__sub { max-width: 56vw; }
  .adm-table--cards .adm-heat { width: 62%; }
  .adm-table--cards .adm-cb { width: 22px; height: 22px; }
  .adm-table--cards tr.adm-table__group { display: block; padding: .5rem .2rem 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .adm-table--cards .adm-table__group th { display: block; padding: 0; background: none; border: 0; font-size: .95rem; }
  /* issued certificates: the number leads the card */
  .adm-table--cards td.adm-mono.adm-strong[data-label="Number"] { order: -1; }
  .adm-toolbar { padding: 12px; }
  .adm-searchbox { max-width: none; min-width: 0; flex-basis: 100%; }
  .adm-body .adm-searchbox .input { min-height: 44px; height: 44px; }
  .adm-filters { display: none; }
  .adm-filters.is-open { display: flex; }
  .adm-filters-toggle { display: inline-flex; }
  .adm-filters .adm-selectwrap { flex: 1 1 calc(50% - .5rem); }
  .adm-filters__spacer { display: none; }
  .adm-body .adm-filters .adm-select, .adm-toolbar__row > .adm-selectwrap, .adm-toolbar__row > [data-actors], .adm-toolbar__row > [data-actors] .adm-selectwrap, .adm-body .adm-toolbar__row > .adm-selectwrap .adm-select, .adm-body [data-actors] .adm-select { max-width: none; width: 100%; }
  .adm-pager { justify-content: center; }
  .adm-pager__left { width: 100%; justify-content: center; }
  .adm-pager__btn { min-width: 40px; height: 40px; }
  /* phones: two tidy rows — what is selected (and close) on top, the six actions as icons underneath */
  .adm-bulk { bottom: 10px; width: calc(100vw - 16px); max-width: 430px; padding: 4px 6px 6px; border-radius: 14px; justify-content: flex-start; gap: 2px; }
  .adm-bulk__count { order: 1; padding-left: .5rem; }
  .adm-bulk__link { order: 2; font-size: .8rem; }
  .adm-bulk__x { order: 3; margin-left: auto; width: 40px; height: 40px; }
  .adm-bulk__sep { order: 4; flex: 0 0 100%; width: 100%; height: 1px; margin: 0 0 2px; background: rgba(255, 255, 255, .12); }
  .adm-bulk__btn { order: 5; flex: 1 1 0; min-width: 40px; height: 42px; padding: 0; justify-content: center; }
  .adm-bulk__btn span { display: none; }
  .adm-bulk__btn .i { width: 1.2rem; height: 1.2rem; }
  .adm-learners { padding-bottom: 96px; }
}

/* form bits used in modals and editors */
.adm-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.adm-fieldset > legend { padding: 0; margin-bottom: .4rem; width: 100%; }
.adm-radios { display: flex; flex-wrap: wrap; gap: .5rem; }
.adm-radio { position: relative; }
.adm-radio input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.adm-radio > span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .95rem; border-radius: 10px; border: 1px solid var(--adm-line-2); background: #fff; font-size: .88rem; font-weight: 600; color: var(--text-soft); transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.adm-radio input:hover + span { border-color: var(--gold-500); }
.adm-radio input:checked + span { border-color: var(--gold-500); background: #FBF3DA; color: var(--gold-ink); box-shadow: 0 0 0 3px var(--gold-glow); }
.adm-radio input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.adm-radios--stack { display: grid; }
.adm-radios--stack .adm-radio > span { display: grid; gap: 2px; width: 100%; padding: .6rem .85rem; }
.adm-radios--stack .adm-radio strong { color: var(--text); font-weight: 650; }
.adm-radios--stack .adm-radio small { font-weight: 400; color: var(--text-soft); font-size: .8rem; line-height: 1.4; }
.adm-avatars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .35rem; }
@media (max-width: 560px) { .adm-avatars { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; } }
.adm-avatar-opt { position: relative; }
.adm-avatar-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.adm-avatar-opt > span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--adm-line-2); background: radial-gradient(circle at 50% 40%, var(--deep-600), var(--deep-800)); transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.adm-avatar-opt svg { width: 62%; height: 62%; transition: transform .3s var(--ease-spring); }
.adm-avatar-opt input:hover + span { border-color: var(--gold-500); }
.adm-avatar-opt input:checked + span { border-color: var(--gold-500); box-shadow: 0 0 0 3px var(--gold-glow), inset 0 0 0 1.5px var(--gold-300); }
.adm-avatar-opt input:checked + span svg { transform: scale(1.14); }
.adm-avatar-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.adm-issue__list { display: grid; gap: .4rem; max-height: 50vh; overflow-y: auto; padding: 2px; }
.adm-check-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 11px; border: 1px solid var(--adm-line); cursor: pointer; }
.adm-check-row:hover { background: var(--adm-hover); }
.adm-check-row input { width: 18px; height: 18px; accent-color: var(--gold-600); flex: none; margin: 0; }
.adm-issue__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; }
.adm-issue__who > span:last-child { display: grid; min-width: 0; }
.adm-issue__who strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-issue__who small { color: var(--text-mute); font-size: .78rem; }
.adm-issue__num { font: 650 .84rem ui-monospace, Consolas, monospace; color: var(--gold-ink); white-space: nowrap; }

.adm-dl { display: grid; }
.adm-dl > div { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: .75rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--adm-row); }
.adm-dl > div:last-child { border-bottom: 0; }
.adm-dl dt { font-size: .82rem; color: var(--text-mute); font-weight: 550; }
.adm-dl dd { color: var(--text); min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; font-size: .9rem; }
.adm-dl dd .i { width: 1rem; height: 1rem; color: var(--text-mute); }
.adm-dl dd .badge .i { color: inherit; }
.adm-dl dd a { color: var(--gold-ink); font-weight: 550; }
.adm-dl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
.adm-dl--2 > div { grid-template-columns: 1fr; gap: .15rem; align-content: start; }
.adm-dl--2 > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.adm-dl--compact > div { padding: .42rem 0; }
@media (max-width: 560px) { .adm-dl--2 { grid-template-columns: 1fr; } .adm-dl--2 > div:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--adm-row); } .adm-dl > div { grid-template-columns: 1fr; gap: .1rem; } }

/* save bars */
.adm-savebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: 1rem; padding: .6rem .6rem .6rem 1rem; border-radius: 13px; background: var(--deep-800); color: #F3F7FA; box-shadow: 0 14px 34px -12px rgba(10, 6, 40, .5); animation: adm-rise .3s var(--ease-out); }
.adm-savebar p { font-weight: 600; font-size: .9rem; }
.adm-savebar strong { color: var(--gold-300); }
.adm-body .adm-savebar .btn--ghost { color: #DCE8EE; }
.adm-body .adm-savebar .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.adm-body .adm-savebar .btn.adm-danger-ghost { color: #FF9D9F; }
.adm-savebar :focus-visible { outline-color: var(--gold-300); }
.adm-savebar--sticky, .adm-savebar.is-static { background: #fff; color: var(--text-soft); border: 1px solid var(--adm-line-2); box-shadow: var(--adm-shadow-hover); animation: none; }
.adm-savebar--sticky { position: sticky; bottom: 14px; z-index: 20; margin-top: 0; }
.adm-savebar.is-static { box-shadow: none; background: var(--adm-head); }
.adm-savebar--sticky.is-dirty, .adm-savebar.is-static.is-dirty { background: var(--deep-800); color: #F3F7FA; border-color: var(--deep-800); }
.adm-body .adm-savebar--sticky:not(.is-dirty) .btn--ghost, .adm-body .adm-savebar.is-static:not(.is-dirty) .btn--ghost { color: var(--text-soft); }
.adm-body .adm-savebar--sticky:not(.is-dirty) .btn--ghost:hover { background: rgba(16, 12, 46, .06); color: var(--text); }
.adm-body .adm-savebar--sticky:not(.is-dirty) .btn.adm-danger-ghost { color: var(--danger); }
.adm-savebar--sticky:not(.is-dirty) :focus-visible, .adm-savebar.is-static:not(.is-dirty) :focus-visible { outline-color: var(--focus); }

/* =====================================================================================================
   09 · LEARNER PROFILE, STRAND, LEVEL MAP (PROGRESS EDITOR), ATTEMPTS, CERTIFICATE TAB
   ===================================================================================================== */
.adm-profile { padding: 0; overflow: hidden; }
.adm-profile__hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; padding: 20px 22px 18px; background: radial-gradient(520px 200px at 0% 0%, rgba(146, 128, 255, .12), transparent 70%), linear-gradient(180deg, #FCFBF7, #fff); }
.adm-profile__id { flex: 1 1 300px; min-width: 0; }
.adm-profile__name { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }
.adm-body .adm-profile__name h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem); font-weight: 700; line-height: 1.1; letter-spacing: -.028em; font-variation-settings: 'opsz' 72; overflow-wrap: anywhere; }
.adm-profile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-top: .5rem; color: var(--text-mute); font-size: .84rem; }
.adm-profile__meta > span { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.adm-profile__meta .i { width: .95rem; height: .95rem; }
.adm-idchip { padding: 1px 1px 1px .6rem; border-radius: 8px; background: var(--adm-soft); border: 1px solid var(--adm-line); color: var(--text-soft); max-width: 100%; }
.adm-idchip .adm-mono { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44vw; }
.adm-profile__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--adm-line); }
.adm-profile__stats > div { padding: 13px 18px 15px; border-right: 1px solid var(--adm-line); min-width: 0; }
.adm-profile__stats > div:last-child { border-right: 0; }
.adm-profile__stats dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .4rem; margin-top: .4rem; }
.adm-profile__stats dd strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.adm-profile__stats dd small { color: var(--text-mute); font-size: .78rem; }
.adm-profile__stats dd .adm-prog, .adm-profile__stats dd .adm-meter { flex-basis: 100%; margin-top: .4rem; }
.adm-profile__stats .adm-prog__n { display: none; }
.adm-profile__stats dd strong.adm-profile__cert { font-size: 1.05rem; line-height: 1.35; letter-spacing: -.01em; }
@media (max-width: 1099.98px) {
  .adm-profile__stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .adm-profile__stats > div { grid-column: span 2; }
  .adm-profile__stats > div:nth-child(n + 4) { grid-column: span 3; border-top: 1px solid var(--adm-line); }
  .adm-profile__stats > div:nth-child(3) { border-right: 0; }
}
@media (max-width: 560px) {
  .adm-profile__hero { padding: 16px 16px 14px; gap: .8rem; }
  .adm-profile__ava { --s: 64px; }
  .adm-profile__actions { width: 100%; }
  .adm-profile__actions .btn:not(.btn--icon) { flex: 1; }
  .adm-profile__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-profile__stats > div, .adm-profile__stats > div:nth-child(n + 4) { grid-column: auto; padding: 11px 16px 13px; border-top: 0; border-bottom: 1px solid var(--adm-line); border-right: 1px solid var(--adm-line); }
  .adm-profile__stats > div:nth-child(2n) { border-right: 0; }
  .adm-profile__stats > div:last-child { grid-column: 1 / -1; border-bottom: 0; border-right: 0; }
  .adm-note--warn { padding-left: calc(16px + 1.5rem); padding-right: 16px; } .adm-note--warn > .i { left: 16px; }
}
.adm-notes { display: grid; gap: .6rem; }
.adm-notes__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .84rem; }

/* a learner's strand of 36, shown on deep water */
.adm-strand { display: grid; gap: .7rem; min-width: 0; }
.adm-strand .strand { padding: 10px clamp(6px, 2%, 22px) 4px; border-radius: 14px; background: radial-gradient(60% 90% at 50% 0%, rgba(146, 128, 255, .22), transparent 70%), linear-gradient(180deg, #2B1BA8 0%, #1F0A8C 46%, #120760 100%); box-shadow: inset 0 0 0 1px rgba(200, 192, 255, .14); }
.adm-strand .st-bead.is-locked circle { stroke-opacity: .75; fill-opacity: .4; }
.adm-strand .st-thread { stroke-opacity: .7; }
.adm-strand__now { display: flex; align-items: flex-start; gap: .5rem; font-size: .88rem; color: var(--text-soft); line-height: 1.5; }
.adm-strand__now .i { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .15em; color: var(--gold-600); }
.adm-strand__now strong { color: var(--text); font-weight: 650; }

/* the 36-level progress editor, grouped by depth zone */
.adm-levelmap__legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: -2px 0 14px; color: var(--text-mute); font-size: .78rem; font-weight: 550; }
.adm-levelmap__legend span { display: inline-flex; align-items: center; gap: .4rem; }
.adm-levelmap__legend i { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid; }
.adm-levelmap__legend .is-done { background: #E2F5EE; border-color: #1FAF54; }
.adm-levelmap__legend .is-current { background: #FBF3DA; border-color: var(--gold-500); }
.adm-levelmap__legend .is-locked { background: #EEF1F4; border-color: #BAC6D1; }
.adm-levelmap__legend .is-changed { background: #fff; border-color: var(--c-lilac); border-style: dashed; }
.adm-levelmap { display: grid; gap: 12px; }
.adm-levelmap__zone { border: 1px solid var(--adm-line); border-radius: 14px; overflow: hidden; background: var(--adm-head); }
.adm-levelmap__zhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; padding: .5rem .9rem; color: #fff; background: linear-gradient(90deg, var(--za), var(--zb)); }
.adm-levelmap__zhead strong { font-family: var(--font-display); font-weight: 650; font-size: .95rem; letter-spacing: -.01em; }
.adm-levelmap__zhead span { font-size: .76rem; color: rgba(255, 255, 255, .78); }
.adm-levelmap__zhead .adm-levelmap__zcount { margin-left: auto; padding: .05em .55em; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-weight: 650; font-variant-numeric: tabular-nums; }
.adm-levelmap__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.adm-lvl { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: .55rem; align-items: start; min-width: 0; padding: 9px 10px 9px 9px; border-radius: 11px; border: 1.5px solid var(--adm-line-2); background: #fff; text-align: left; transition: transform .22s var(--ease-out), border-color var(--t-fast), box-shadow var(--t-fast); }
@media (hover: hover) { .adm-lvl:hover { transform: translateY(-2px); border-color: var(--gold-500); box-shadow: 0 8px 18px -10px rgba(28, 22, 70, .4); } }
.adm-lvl__art { grid-row: 1 / 4; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, var(--deep-600), var(--deep-800)); }
.adm-lvl__art svg { width: 66%; height: 66%; }
.adm-lvl__art svg.shell { width: 82%; height: auto; }
.adm-lvl__n { font-family: var(--font-display); font-size: .95rem; font-weight: 700; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.adm-lvl__n::before { content: 'Level '; font-family: var(--font-body); font-size: .62rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.adm-lvl__title { margin-top: 2px; font-size: .74rem; font-weight: 550; line-height: 1.25; color: var(--text-soft); hyphens: auto; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adm-lvl__when { margin-top: 3px; font-size: .68rem; color: var(--text-mute); align-self: end; }
.adm-lvl.is-done { border-color: rgba(47, 184, 138, .55); background: linear-gradient(180deg, #fff, #F1FAF6); }
.adm-lvl.is-done .adm-lvl__when { color: #0E6E4E; font-weight: 600; }
.adm-lvl.is-current { border-color: var(--gold-500); background: linear-gradient(180deg, #fff, #FDF6E2); box-shadow: 0 0 0 3px var(--gold-glow); }
.adm-lvl.is-current .adm-lvl__when { color: var(--gold-ink); font-weight: 600; }
.adm-lvl.is-locked { background: #F6F7F8; border-color: var(--adm-line); }
.adm-lvl.is-locked .adm-lvl__n, .adm-lvl.is-locked .adm-lvl__title { color: var(--text-mute); }
.adm-lvl.is-locked .adm-lvl__art { background: radial-gradient(circle at 50% 38%, #C9D4DD, #A9B8C5); }
.adm-lvl.is-changed { border-style: dashed; border-color: var(--c-lilac); box-shadow: 0 0 0 3px rgba(142, 123, 214, .18); }
.adm-lvl.is-changed::after { content: ''; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-lilac); }
@media (max-width: 1279.98px) { .adm-levelmap__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .adm-levelmap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; }
  .adm-lvl { padding: 8px; column-gap: .45rem; min-height: 64px; }
  .adm-lvl__art { width: 34px; height: 34px; }
}

.adm-pips { display: inline-flex; gap: 4px; }
.adm-pip { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; }
.adm-pip .i { width: .8rem; height: .8rem; stroke-width: 3; }
.adm-pip.is-ok { background: var(--ok-soft); color: var(--ok); }
.adm-pip.is-bad { background: var(--danger-soft); color: var(--danger); }

.adm-certstate { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem .9rem; border-radius: var(--adm-r-sm); background: var(--adm-soft); border: 1px solid var(--adm-line); color: var(--text-soft); }
.adm-certstate > .i { width: 1.4rem; height: 1.4rem; flex: none; margin-top: .1em; }
.adm-certstate > span { display: grid; gap: 2px; min-width: 0; }
.adm-certstate strong { font-family: var(--font-display); font-size: 1.02rem; font-weight: 650; color: var(--text); letter-spacing: -.01em; }
.adm-certstate small { font-size: .84rem; color: var(--text-soft); line-height: 1.45; }
.adm-certstate.is-ok { background: var(--ok-soft); border-color: rgba(19, 133, 95, .28); }
.adm-certstate.is-ok > .i { color: var(--ok); }
.adm-certstate.is-warn { background: var(--warn-soft); border-color: rgba(169, 106, 8, .28); }
.adm-certstate.is-warn > .i { color: var(--warn); }
.adm-certstate.is-gold { background: #FBF3DA; border-color: rgba(200, 149, 46, .4); }
.adm-certstate.is-gold > .i { color: var(--gold-600); }
.adm-stack-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.adm-certprev { max-width: 480px; margin-inline: auto; }
.adm-certprev .cert-preview { border-radius: 8px; box-shadow: 0 0 0 1px rgba(16, 12, 46, .1), 0 18px 40px -16px rgba(28, 22, 70, .45); }
.adm-certprev--modal { max-width: 520px; }

/* =====================================================================================================
   10 · ANALYTICS
   ===================================================================================================== */
.adm-heat { display: inline-flex; align-items: center; gap: .6rem; width: 100%; min-width: 116px; }
.adm-heat__bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(16, 12, 46, .08); overflow: hidden; min-width: 36px; }
.adm-heat__bar i { display: block; height: 100%; border-radius: inherit; background: var(--c-gold); }
.adm-heat--track .adm-heat__bar i { background: #9FB6C4; }
.adm-heat--teal .adm-heat__bar i { background: var(--c-teal); }
.adm-heat--green .adm-heat__bar i { background: var(--c-green); }
.adm-heat--coral .adm-heat__bar i { background: var(--c-coral); }
.adm-heat__v { flex: none; min-width: 3.4ch; text-align: right; font-size: .84rem; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.adm-rate { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.adm-rate.is-low { color: #8A5606; }
.adm-rate .i { width: .95rem; height: .95rem; color: var(--warn); }
.adm-rate__flag { padding: .05em .5em; border-radius: 999px; background: var(--warn-soft); font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.adm-flag { margin-left: .25rem; vertical-align: 1px; }
.adm-rank { display: grid; gap: 1px; margin: -6px -8px; }
.adm-rank__row { display: flex; align-items: center; gap: .7rem; padding: .5rem; border-radius: 11px; color: inherit; }
.adm-rank__row:hover { background: var(--adm-hover); }
.adm-rank__n { width: 22px; flex: none; text-align: center; font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.adm-rank li:first-child .adm-rank__n { color: var(--c-coral); }
.adm-rank__main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.adm-rank__main strong { font-weight: 600; font-size: .9rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-rank__main small { color: var(--text-mute); font-size: .78rem; line-height: 1.4; }
.adm-rank--q .adm-rank__main strong.adm-rank__q { white-space: normal; font-family: var(--font-display); font-size: .98rem; letter-spacing: -.01em; }
.adm-rank__val { flex: none; width: 150px; }
@media (max-width: 560px) { .adm-rank__row { flex-wrap: wrap; } .adm-rank__val { width: 100%; padding-left: calc(22px + 32px + 1.4rem); } }
.adm-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: .9rem; border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm); background: var(--adm-head); overflow: hidden; }
.adm-facts:empty { display: none; }
.adm-facts > .skeleton { grid-column: 1 / -1; margin: 10px 12px; }
.adm-fact { display: grid; gap: 1px; padding: .6rem .8rem; border-right: 1px solid var(--adm-line); min-width: 0; }
.adm-fact:last-child { border-right: 0; }
.adm-fact strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-fact span { font-size: .66rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
@media (max-width: 480px) { .adm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-fact:nth-child(2) { border-right: 0; } .adm-fact:nth-child(-n + 2) { border-bottom: 1px solid var(--adm-line); } }

/* =====================================================================================================
   11 · CERTIFICATES + TEMPLATE POSITION EDITOR
   ===================================================================================================== */
.adm-auto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
.adm-auto__main { display: flex; gap: 1rem; align-items: center; flex: 1 1 360px; min-width: 0; }
.adm-auto__cert { width: 54px; flex: none; transform: rotate(-4deg); transition: transform .5s var(--ease-spring); }
.adm-auto:hover .adm-auto__cert { transform: rotate(2deg) scale(1.04); }
.adm-auto__cert .cert-preview { border-radius: 4px; box-shadow: 0 0 0 1px rgba(16, 12, 46, .14), 0 8px 18px -8px rgba(28, 22, 70, .55); }
.adm-auto__txt { min-width: 0; }
.adm-auto__stats { display: grid; grid-template-columns: repeat(4, auto); border-radius: var(--adm-r-sm); border: 1px solid var(--adm-line); background: var(--adm-head); overflow: hidden; }
.adm-auto__stats > div { padding: .55rem .95rem; border-right: 1px solid var(--adm-line); min-width: 88px; }
.adm-auto__stats > div:last-child { border-right: 0; }
.adm-auto__stats dd { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; color: var(--text); margin-top: .15rem; font-variant-numeric: tabular-nums; }
.adm-auto__stats dd.adm-mono { font-family: ui-monospace, Consolas, monospace; font-size: 1.02rem; letter-spacing: 0; color: var(--gold-ink); line-height: 1.47; }
@media (max-width: 719.98px) { .adm-auto__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .adm-auto__stats > div:nth-child(2) { border-right: 0; } .adm-auto__stats > div:nth-child(-n + 2) { border-bottom: 1px solid var(--adm-line); } }

.adm-designer__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr); gap: 1.5rem; align-items: start; }
.adm-designer__preview { position: sticky; top: calc(var(--adm-top-h) + 16px); min-width: 0; }
.adm-designer__controls { display: grid; gap: 1rem; min-width: 0; }
.adm-designer__controls > .field + .field { margin-top: 0; }
.adm-designer__group, .adm-setgroup { border: 1px solid var(--adm-line); border-radius: 14px; padding: .7rem 1rem 1rem; margin: 0; display: grid; gap: .7rem; min-width: 0; background: var(--adm-head); }
.adm-designer__group legend, .adm-setgroup legend { display: inline-flex; align-items: center; gap: .45rem; padding: 0 .4rem; margin-left: -.4rem; font-family: var(--font-display); font-size: .95rem; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.adm-designer__group legend .i, .adm-setgroup legend .i { width: 1rem; height: 1rem; color: var(--gold-600); }
.adm-slider { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem .6rem; }
.adm-slider label { font-weight: 600; font-size: .82rem; color: var(--text-soft); }
.adm-slider output { font: 650 .78rem ui-monospace, Consolas, monospace; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.adm-slider input[type="range"] { grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.adm-slider input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--gold-500) var(--fill, 50%), rgba(16, 12, 46, .13) var(--fill, 50%)); }
.adm-slider input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--gold-500) var(--fill, 50%), rgba(16, 12, 46, .13) var(--fill, 50%)); }
.adm-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--gold-500); box-shadow: 0 1px 4px rgba(16, 12, 46, .3); }
.adm-slider input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--gold-500); box-shadow: 0 1px 4px rgba(16, 12, 46, .3); }
.adm-slider input[type="range"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.adm-slider--color { padding-top: .1rem; }
.adm-color { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; }
.adm-color input[type="color"] { width: 40px; height: 30px; padding: 2px; border-radius: 8px; border: 1px solid var(--adm-line-2); background: #fff; cursor: pointer; }
.adm-nudge { display: flex; align-items: center; gap: .25rem; }
.adm-nudge__label { margin-right: auto; font-weight: 600; font-size: .82rem; color: var(--text-soft); }
.adm-body .adm-nudge__btn { border: 1px solid var(--adm-line-2); background: #fff; }
.adm-designer__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.adm-designer__btns .btn--primary { margin-left: auto; }
/* the template with its two draggable markers (JS sets left/top in % of the .cert-preview box) */
.adm-certprev.adm-tpl { position: relative; padding: 0; max-width: 520px; user-select: none; -webkit-user-select: none; }
.adm-tpl__layer { position: absolute; inset: 0; pointer-events: none; }
/* a see-through ring with a centre dot, so the text under the marker stays readable */
.adm-tpl__handle { --hc: var(--gold-500); position: absolute; width: 36px; height: 36px; transform: translate(-50%, -50%); pointer-events: auto; touch-action: none; cursor: grab; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .22); border: 2px solid var(--hc); box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 2px 8px rgba(16, 12, 46, .3); transition: background-color var(--t-fast); }
.adm-tpl__handle::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.adm-tpl__handle::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--hc); box-shadow: 0 0 0 1.5px #fff; }
.adm-tpl__handle > .i { display: none; }
.adm-tpl__handle--number { --hc: var(--c-teal); }
.adm-tpl__handle:hover, .adm-tpl__handle:focus-visible { background: rgba(255, 255, 255, .45); }
.adm-tpl__handle.is-dragging { cursor: grabbing; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 6px var(--gold-glow); }
.adm-tpl__handle--number.is-dragging { box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 6px rgba(21, 145, 163, .28); }
.adm-tpl__tag { position: absolute; left: 50%; top: calc(100% + 6px); translate: -50% 0; padding: .15em .5em; border-radius: 6px; background: var(--deep-800); color: #fff; font-size: .66rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.adm-tpl__handle--number .adm-tpl__tag { left: auto; right: calc(100% + 6px); top: 50%; translate: 0 -50%; background: var(--teal-600); }
@media (max-width: 1099.98px) { .adm-designer__grid { grid-template-columns: 1fr; } .adm-designer__preview { position: static; } }
@media (max-width: 719.98px) { .adm-tpl__handle { width: 40px; height: 40px; } .adm-designer__btns .btn { flex: 1 1 auto; } .adm-designer__btns .btn--primary { margin-left: 0; } }

/* =====================================================================================================
   12 · COMPETITION
   ===================================================================================================== */
.adm-reg__form { display: grid; gap: .9rem; }
.adm-reg__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem; }
.adm-reg__head > div { min-width: 0; flex: 1 1 320px; }
.adm-reg__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem 1rem; align-items: start; }
.adm-reg__fields > .field + .field { margin-top: 0; }
.adm-body .adm-reg__fields .textarea { min-height: 88px; }
.adm-reg__foot { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; flex-wrap: wrap; font-size: .84rem; }
@media (max-width: 1099.98px) { .adm-reg__fields { grid-template-columns: 1fr; } }
.adm-verify__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm); background: var(--adm-head); overflow: hidden; }
.adm-verify__stat { --tone: var(--text-mute); padding: .6rem .9rem .7rem; border-right: 1px solid var(--adm-line); min-width: 0; }
.adm-verify__stat:last-child { border-right: 0; }
.adm-verify__stat--verified { --tone: var(--ok); } .adm-verify__stat--mismatch { --tone: var(--warn); } .adm-verify__stat--notfound { --tone: var(--danger); }
.adm-verify__stat dt { display: flex; align-items: center; gap: .35rem; }
.adm-verify__stat dt .i { width: .95rem; height: .95rem; color: var(--tone); }
.adm-verify__stat dd { margin-top: .2rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.adm-verify__stat dd .adm-linkbtn { font: inherit; color: var(--text); text-decoration-color: var(--tone); text-decoration-thickness: 2px; text-underline-offset: 5px; min-width: 40px; min-height: 36px; text-align: left; }
.adm-verify__bulk { margin-top: .9rem; align-items: center; flex-wrap: wrap; }
.adm-verify__bulk > span { flex: 1 1 240px; min-width: 0; }
.adm-body .adm-verify__bulk > .i { margin-top: 0; }
@media (max-width: 560px) { .adm-verify__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-verify__stat:nth-child(2) { border-right: 0; } .adm-verify__stat:nth-child(-n + 2) { border-bottom: 1px solid var(--adm-line); } }
.adm-check { cursor: help; }
.adm-pd { display: grid; gap: 1rem; }
.adm-pd > .field + .field, .adm-pd > .field { margin-top: 0; }
.adm-pd__check > div { min-width: 0; }
.adm-pd .alert a { font-weight: 650; display: inline-flex; align-items: center; gap: .25rem; color: var(--gold-ink); }
.adm-pd .alert a .i { width: .9rem; height: .9rem; margin: 0; color: inherit; }
.adm-body .adm-pd__h { margin-top: .3rem; font-family: var(--font-body); font-size: .68rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.adm-filepill { flex-wrap: wrap; }
.adm-filepill .file-pill__name { display: block; }
/* status steps: received → verified → shortlisted → winner, or rejected */
.adm-steps-wrap { display: grid; gap: .6rem; }
.adm-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adm-steps__item { position: relative; min-width: 0; }
.adm-steps__item + .adm-steps__item::before { content: ''; position: absolute; top: 17px; right: calc(50% + 20px); left: calc(-50% + 20px); height: 2px; border-radius: 2px; background: var(--adm-line-2); }
.adm-steps__item.is-done + .adm-steps__item::before { background: var(--ok); }
.adm-steps__btn { position: relative; display: grid; justify-items: center; gap: .3rem; width: 100%; padding: 2px 2px 4px; border-radius: 10px; color: var(--text-mute); }
.adm-steps__dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--adm-line-2); font-family: var(--font-display); font-size: .84rem; font-weight: 700; color: var(--text-mute); transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.adm-steps__dot .i { width: 1rem; height: 1rem; stroke-width: 2.8; }
.adm-steps__label { font-size: .76rem; font-weight: 600; line-height: 1.2; text-align: center; }
.adm-steps__btn:hover .adm-steps__dot { border-color: var(--gold-500); color: var(--gold-ink); }
.adm-steps__item.is-done .adm-steps__dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.adm-steps__item.is-done .adm-steps__btn { color: var(--text-soft); }
.adm-steps__item.is-current .adm-steps__dot { background: var(--gold-500); border-color: var(--gold-600); color: #1B1303; box-shadow: 0 0 0 4px var(--gold-glow); }
.adm-steps__item.is-current .adm-steps__btn { color: var(--text); }
.adm-steps__reject { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: 0 .8rem; border-radius: 10px; border: 1px solid var(--adm-line-2); background: #fff; color: var(--text-soft); font-size: .84rem; font-weight: 600; transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast); }
.adm-steps__reject .i { width: 1rem; height: 1rem; }
.adm-steps__reject:hover { border-color: var(--danger); color: var(--danger); }
.adm-steps__reject.is-current { background: var(--danger); border-color: var(--danger); color: #fff; }
.adm-steps__hint { font-size: .82rem; color: var(--text-soft); }

/* =====================================================================================================
   13 · CONTENT: ZONES → LEVEL CARDS, LEVEL EDITOR, LEARNER PREVIEW, PAGE THUMBS
   ===================================================================================================== */
.adm-zones { display: grid; gap: 22px; min-width: 0; }
.adm-zone { display: grid; gap: 12px; min-width: 0; }
.adm-zone__head { position: relative; isolation: isolate; display: flex; align-items: center; gap: .9rem; padding: .75rem 1.1rem; border-radius: 14px; color: #fff; overflow: hidden; background: linear-gradient(100deg, var(--za), var(--zb)); box-shadow: 0 10px 24px -16px rgba(16, 12, 46, .8); }
.adm-zone__head::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(104deg, transparent 0 5%, rgba(255, 255, 255, .06) 6.5% 9%, transparent 11% 18%); -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%); }
.adm-zone__n { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.adm-zone__titles { flex: 1; min-width: 0; }
.adm-body .adm-zone__title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; font-variation-settings: 'opsz' 40; }
.adm-zone__sub { font-size: .78rem; color: rgba(255, 255, 255, .78); margin-top: 1px; }
.adm-zone__pearls { display: flex; gap: 5px; flex: none; }
.adm-zone__pearls svg { width: 20px; height: 20px; }
@media (max-width: 560px) { .adm-zone__pearls { display: none; } .adm-zone__head { padding: .65rem .85rem; gap: .7rem; } }
.adm-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.adm-levels__empty { grid-column: 1 / -1; }
.adm-level { position: relative; display: flex; flex-direction: column; gap: .55rem; min-width: 0; padding: 15px 16px 14px; background: #fff; border: 1px solid var(--adm-line); border-radius: var(--adm-r); box-shadow: var(--adm-shadow); color: inherit; transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color var(--t-fast); }
@media (hover: hover) {
  a.adm-level:hover { transform: translateY(-3px); box-shadow: var(--adm-shadow-hover); border-color: var(--adm-line-2); }
  a.adm-level:hover .adm-level__pearl svg { transform: scale(1.1); }
  a.adm-level:hover .adm-level__edit { color: var(--gold-ink); }
}
.adm-level.is-loading { min-height: 220px; }
.adm-level.is-edited { border-color: rgba(31, 115, 183, .4); }
.adm-level__top { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.adm-level__top .badge { margin-left: auto; }
.adm-level__top .badge + .badge { margin-left: .25rem; }
.adm-level__pearl { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, var(--deep-600), var(--deep-800)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint, #E5C568) 34%, #fff); }
.adm-level__pearl svg { width: 64%; height: 64%; transition: transform .45s var(--ease-spring); }
.adm-level__meta { display: grid; min-width: 0; }
.adm-level__n { font-size: .66rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.adm-level__fname { font-size: .8rem; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-body .adm-level__title { font-size: 1.08rem; font-weight: 650; line-height: 1.25; letter-spacing: -.015em; color: var(--text); }
.adm-level__theme { font-size: .84rem; line-height: 1.45; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adm-level__pages { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-mute); font-size: .78rem; font-weight: 550; }
.adm-level__pages .i { width: .9rem; height: .9rem; }
.adm-level__qs { list-style: none; padding: 0; counter-reset: q; display: grid; gap: .35rem; flex: 1; align-content: start; padding-top: .55rem; border-top: 1px solid var(--adm-row); }
.adm-level__qs li { counter-increment: q; position: relative; padding-left: 1.5rem; font-size: .8rem; line-height: 1.4; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adm-level__qs li::before { content: counter(q); position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; background: var(--adm-soft); color: var(--text-mute); font-size: .64rem; font-weight: 700; }
.adm-level__foot { display: flex; align-items: center; gap: .4rem .8rem; flex-wrap: wrap; padding-top: .6rem; border-top: 1px solid var(--adm-row); font-size: .76rem; color: var(--text-mute); }
.adm-level__foot strong { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.adm-level__stat { display: inline-flex; align-items: center; gap: .4rem; }
.adm-level__bar { display: block; width: 44px; height: 5px; border-radius: 999px; background: rgba(16, 12, 46, .1); overflow: hidden; }
.adm-level__bar b { display: block; height: 100%; border-radius: inherit; background: var(--c-gold); }
.adm-level__edit { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; color: var(--text-soft); font-weight: 600; font-size: .8rem; transition: color var(--t-fast); }
.adm-level__edit .i { width: .9rem; height: .9rem; }

.adm-editor__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.adm-editor__form { display: grid; gap: 16px; min-width: 0; }
.adm-editor__side { display: grid; gap: 16px; position: sticky; top: calc(var(--adm-top-h) + 16px); min-width: 0; }
@media (max-width: 1099.98px) { .adm-editor__grid { grid-template-columns: 1fr; } .adm-editor__side { position: static; } }
.adm-draft-alert { align-items: center; }
.adm-fixed { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; padding: .7rem .85rem; border-radius: var(--adm-r-sm); border: 1px dashed var(--adm-line-2); background: var(--adm-head); }
.adm-fixed__pearl { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, var(--deep-600), var(--deep-800)); }
.adm-fixed__pearl svg { width: 64%; height: 64%; }
.adm-fixed__txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.adm-fixed__txt strong { font-weight: 650; }
.adm-fixed__txt span { font-size: .8rem; color: var(--text-mute); line-height: 1.4; }
.adm-qcard { display: grid; gap: .9rem; }
.adm-qcard > .field + .field, .adm-qcard > .field { margin-top: 0; }
.adm-qcard__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.adm-qcard__head .adm-card__title { display: flex; align-items: center; gap: .6rem; }
.adm-qcard__n { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--deep-800); color: var(--gold-300); font-family: var(--font-display); font-size: .9rem; font-weight: 700; }
.adm-body .adm-qtext { min-height: 60px; font-weight: 550; }
.adm-opts { display: grid; gap: .4rem; }
.adm-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem; padding: 4px; border-radius: 13px; border: 1px solid transparent; transition: border-color var(--t-fast), background-color var(--t-fast); }
.adm-opt.is-correct { border-color: rgba(19, 133, 95, .35); background: var(--ok-soft); }
.adm-opt.has-error { grid-template-columns: auto minmax(0, 1fr); }
.adm-opt .field__error { grid-column: 2; }
.adm-opt__radio { position: relative; display: grid; place-items: center; width: 40px; height: 40px; cursor: pointer; }
.adm-opt__radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.adm-opt__letter { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--adm-line-2); font-family: var(--font-display); font-size: .88rem; font-weight: 700; color: var(--text-soft); transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.adm-opt__radio:hover .adm-opt__letter { border-color: var(--ok); color: var(--ok); }
.adm-opt__radio input:checked ~ .adm-opt__letter { background: var(--ok); border-color: var(--ok); color: #fff; }
.adm-opt__radio input:focus-visible ~ .adm-opt__letter { outline: 2px solid var(--focus); outline-offset: 2px; }

/* the quiz as the learner sees it: a small deep-sea phone screen */
.adm-kid { --text: #F3F7FA; position: relative; display: grid; gap: .8rem; padding: 16px; border-radius: 16px; color: #F3F7FA; background: radial-gradient(360px 200px at 85% -10%, rgba(146, 128, 255, .24), transparent 65%), linear-gradient(180deg, var(--deep-700), var(--deep-900)); box-shadow: inset 0 0 0 1px rgba(200, 192, 255, .16); }
.adm-kid__top { display: flex; align-items: center; gap: .7rem; }
.adm-kid__top > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.adm-kid__top strong { font-family: var(--font-display); font-weight: 650; line-height: 1.2; }
.adm-kid__top small { font-size: .78rem; color: #C9C3EE; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-kid__pearl { width: 40px; height: 40px; flex: none; }
.adm-kid__pearl svg { width: 100%; height: 100%; }
.adm-kid__step { padding: .2em .65em; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(200, 192, 255, .24); font-size: .76rem; font-weight: 650; color: var(--gold-300); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-kid__dots { display: flex; gap: 5px; }
.adm-kid__dots i { flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.adm-kid__dots i.is-done { background: var(--aqua-400); }
.adm-kid__dots i.is-on { background: var(--gold-300); }
.adm-kid__q { font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); font-weight: 650; line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; overflow-wrap: anywhere; }
.adm-kid__opts { display: grid; gap: .5rem; }
.adm-kid__opt { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 50px; padding: .5rem .7rem; text-align: left; border-radius: 13px; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(200, 192, 255, .26); color: #F3F7FA; font-weight: 600; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), background-color var(--t-fast), opacity var(--t-fast); }
.adm-kid__opt:hover { border-color: var(--gold-300); background: rgba(255, 255, 255, .1); }
.adm-kid__opt:active { transform: scale(.985); }
.adm-kid__opt > .i { margin-left: auto; width: 1.25rem; height: 1.25rem; flex: none; }
.adm-kid__opt:focus-visible { outline-color: var(--gold-300); }
.adm-kid__letter { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(229, 197, 104, .16); color: var(--gold-300); font-family: var(--font-display); font-size: .86rem; font-weight: 700; }
.adm-kid__opt.is-right { border-color: #1FAF54; background: rgba(47, 184, 138, .18); }
.adm-kid__opt.is-right .adm-kid__letter { background: #1FAF54; color: #03241A; }
.adm-kid__opt.is-right > .i { color: #5FE0B5; }
.adm-kid__opt.is-wrong { border-color: #E5484D; background: rgba(229, 72, 77, .18); animation: field-shake .4s var(--ease-out); }
.adm-kid__opt.is-wrong .adm-kid__letter { background: #E5484D; color: #fff; }
.adm-kid__opt.is-wrong > .i { color: #FF8B8F; }
.adm-kid__opt.is-dim { opacity: .5; }
.adm-kid__fb { padding: .6rem .8rem; border-radius: 12px; font-size: .86rem; line-height: 1.45; }
.adm-kid__fb strong { font-family: var(--font-display); font-size: 1rem; }
.adm-kid__fb p { margin-top: 2px; color: #C3D4DF; }
.adm-kid__fb.is-right { background: rgba(47, 184, 138, .16); box-shadow: inset 0 0 0 1px rgba(47, 184, 138, .4); }
.adm-kid__fb.is-right strong { color: #5FE0B5; }
.adm-kid__fb.is-wrong { background: rgba(229, 72, 77, .14); box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .4); }
.adm-kid__fb.is-wrong strong { color: #FF8B8F; }
.adm-kid__hint { text-align: center; color: #8FA9BB; font-size: .8rem; }
.adm-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: .5rem; }
.adm-page-thumb { position: relative; display: block; border-radius: 7px; overflow: hidden; background: var(--adm-soft); border: 1px solid var(--adm-line-2); aspect-ratio: 120 / 172; transition: transform .22s var(--ease-out), box-shadow .22s; }
@media (hover: hover) { .adm-page-thumb:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -10px rgba(28, 22, 70, .5); } }
.adm-page-thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-page-thumb span { position: absolute; left: 4px; bottom: 4px; padding: .05em .45em; border-radius: 5px; background: rgba(16, 12, 46, .82); color: #fff; font-size: .66rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* =====================================================================================================
   14 · INBOX
   ===================================================================================================== */
.adm-mail { display: grid; grid-template-columns: minmax(300px, 372px) minmax(0, 1fr); min-height: min(640px, calc(100dvh - 240px)); overflow: hidden; }
.adm-mail__list { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--adm-line); background: var(--adm-head); }
.adm-mail__tools { display: grid; gap: .6rem; padding: 12px; border-bottom: 1px solid var(--adm-line); }
.adm-mail__tools .adm-searchbox { max-width: none; min-width: 0; flex: none; }
.adm-mail__items { flex: 1; overflow-y: auto; max-height: calc(100dvh - 300px); min-height: 280px; }
.adm-mail__ul { padding: 6px; display: grid; gap: 2px; }
.adm-msg { position: relative; display: flex; gap: .7rem; width: 100%; padding: .7rem .65rem; border-radius: 12px; text-align: left; color: var(--text-soft); transition: background-color .12s; }
.adm-msg:hover { background: rgba(16, 12, 46, .04); }
.adm-msg.is-active { background: #fff; box-shadow: inset 0 0 0 1px rgba(200, 149, 46, .6), 0 4px 12px -6px rgba(28, 22, 70, .25); }
.adm-msg__ava { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #E8EEF2, #D3DEE6); color: var(--deep-600); font-family: var(--font-display); font-size: .74rem; font-weight: 700; }
.adm-msg__ava .i { width: 1rem; height: 1rem; }
.adm-msg.is-deletion .adm-msg__ava { background: #FFE5DC; color: #C24A2A; }
.adm-msg__ava--lg { width: 44px; height: 44px; font-size: .9rem; }
.adm-msg__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.adm-msg__top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.adm-msg__top strong { color: var(--text); font-weight: 550; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-msg.is-new .adm-msg__top strong { font-weight: 700; }
.adm-msg__time { flex: none; font-size: .72rem; color: var(--text-mute); }
.adm-msg__subject { display: flex; align-items: center; gap: .4rem; min-width: 0; color: var(--text); font-weight: 550; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-msg.is-new .adm-msg__subject { font-weight: 650; }
.adm-msg__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 3px rgba(200, 149, 46, .22); }
.adm-msg__snippet { font-size: .8rem; color: var(--text-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.adm-msg__tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.adm-mail__read { min-width: 0; overflow-y: auto; max-height: calc(100dvh - 190px); background: #fff; }
.adm-mail__read > .adm-empty { min-height: 100%; align-content: center; }
.adm-mail__read > .skeleton { margin-inline: 22px; }
.adm-read { display: grid; gap: 1rem; padding: 20px 22px 22px; min-width: 0; }
.adm-read__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .7rem 1rem; }
.adm-read__titles { min-width: 0; flex: 1 1 220px; }
.adm-read__kicker { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; color: var(--text-mute); font-size: .78rem; font-weight: 550; }
.adm-read__kicker .i { width: .9rem; height: .9rem; }
.adm-body .adm-read__subject { margin-top: .35rem; font-size: 1.35rem; font-weight: 700; line-height: 1.2; letter-spacing: -.022em; font-variation-settings: 'opsz' 48; outline: none; overflow-wrap: anywhere; }
.adm-read__status { flex: none; }
.adm-read__from { display: flex; gap: .75rem; align-items: center; padding: .7rem .85rem; border-radius: var(--adm-r-sm); background: var(--adm-head); border: 1px solid var(--adm-line); min-width: 0; }
.adm-read__from > div { min-width: 0; }
.adm-read__from strong { font-weight: 650; }
.adm-read__contact { margin-top: 1px; font-size: .84rem; color: var(--text-soft); display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .2rem; overflow-wrap: anywhere; }
.adm-read__contact a { color: var(--gold-ink); font-weight: 550; }
.adm-read__body { font-size: .98rem; line-height: 1.7; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; padding: .2rem .1rem; max-width: 72ch; }
.adm-read__dl { padding: .2rem 1rem; border-radius: var(--adm-r-sm); border: 1px solid var(--adm-line); }
.adm-read__foot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--adm-line); }
.adm-read__foot .adm-note { margin-top: 0; flex: 1 1 100%; }
/* guided deletion: three steps on a rail */
.adm-guide { display: grid; gap: .8rem; padding: .9rem 1rem 1rem; border-radius: 14px; background: var(--adm-head); border: 1px solid var(--adm-line); min-width: 0; }
.adm-body .adm-guide__head { font-size: 1rem; font-weight: 650; }
.adm-guide__list { display: grid; }
.adm-guide__step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .75rem; padding-bottom: 1rem; }
.adm-guide__step:last-child { padding-bottom: 0; }
.adm-guide__step::before { content: ''; position: absolute; left: 14.5px; top: 32px; bottom: 2px; width: 1px; background: var(--adm-line-2); }
.adm-guide__step:last-child::before { display: none; }
.adm-guide__step.is-done::before { background: var(--ok); }
.adm-guide__n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--adm-line-2); font-family: var(--font-display); font-size: .82rem; font-weight: 700; color: var(--text-mute); }
.adm-guide__n .i { width: .95rem; height: .95rem; stroke-width: 2.8; }
.adm-guide__step.is-current .adm-guide__n { background: var(--gold-500); border-color: var(--gold-600); color: #1B1303; box-shadow: 0 0 0 4px var(--gold-glow); }
.adm-guide__step.is-done .adm-guide__n { background: var(--ok); border-color: var(--ok); color: #fff; }
.adm-guide__body { display: grid; gap: .5rem; justify-items: start; min-width: 0; padding-top: .25rem; font-size: .86rem; }
.adm-guide__body > .alert, .adm-guide__body > ul { justify-self: stretch; }
.adm-body .adm-guide__title { font-family: var(--font-body); font-size: .92rem; font-weight: 650; letter-spacing: 0; }
.adm-guide__step:not(.is-current):not(.is-done) .adm-guide__title { color: var(--text-soft); }
.adm-find__list { display: grid; gap: .5rem; }
.adm-find__item { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; padding: .65rem .75rem; border-radius: 11px; background: #fff; border: 1px solid var(--adm-line); }
.adm-find__item .adm-who { flex: 1 1 200px; }
.adm-find__btns { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.adm-body .adm-maildrawer .modal__body { padding-top: 2.6rem; }
.adm-maildrawer .adm-read { padding: 0 0 .5rem; }
.adm-body .adm-maildrawer .modal__x { background: #fff; box-shadow: 0 0 0 1px var(--adm-line-2), 0 2px 8px rgba(28, 22, 70, .12); }
@media (max-width: 899.98px) {
  .adm-mail { grid-template-columns: 1fr; min-height: 0; }
  .adm-mail__list { border-right: 0; }
  .adm-mail__read { display: none; }
  .adm-mail__items { max-height: none; min-height: 0; }
  .adm-find__btns { margin-left: 0; }
}

/* =====================================================================================================
   15 · ACTIVITY
   ===================================================================================================== */
.adm-timeline { padding: 4px 18px 18px; }
.adm-timeline > .adm-skel-row { margin-inline: -18px; }
.adm-day + .adm-day { margin-top: .4rem; }
.adm-body .adm-day__label { position: sticky; top: var(--adm-top-h); z-index: 3; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .85rem 0 .5rem; background: linear-gradient(180deg, #fff 78%, rgba(255, 255, 255, 0)); font-size: .95rem; font-weight: 650; color: var(--text); }
.adm-day__label span { font-family: var(--font-body); font-size: .74rem; font-weight: 550; letter-spacing: 0; color: var(--text-mute); }
.adm-more { display: flex; justify-content: center; padding: .9rem 0 .2rem; }
@media (max-width: 719.98px) { .adm-timeline { padding: 2px 14px 14px; } .adm-timeline > .adm-skel-row { margin-inline: -14px; } }

/* =====================================================================================================
   16 · SETTINGS
   ===================================================================================================== */
.adm-settings__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.adm-settings__site { display: grid; gap: 1rem; }
.adm-settings__site .adm-card__head { margin-bottom: 0; }
.adm-settings__side { display: grid; gap: 18px; min-width: 0; }
.adm-settings__team { grid-column: 1 / -1; }
@media (max-width: 1099.98px) { .adm-settings__grid { grid-template-columns: minmax(0, 1fr); } }
.adm-setgroup > .field + .field, .adm-setgroup > .field { margin-top: 0; }
.adm-setgroup > .adm-note, .adm-setgroup > .adm-muted { margin-top: 0; font-size: .84rem; }
.adm-anprev { display: grid; gap: .4rem; padding: .7rem; border-radius: var(--adm-r-sm); background: #fff; border: 1px dashed var(--adm-line-2); min-width: 0; }
.adm-anprev__label { font-size: .64rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.adm-anprev__bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .3rem .6rem; min-height: 38px; padding: .45rem .9rem; border-radius: 9px; background: linear-gradient(90deg, var(--deep-800), var(--deep-600), var(--deep-800)); color: #F3F7FA; font-size: .84rem; font-weight: 550; text-align: center; overflow-wrap: anywhere; transition: opacity var(--t-med); }
.adm-anprev__bar > .i { width: 1rem; height: 1rem; color: var(--gold-300); flex: none; }
.adm-anprev__link { display: inline-flex; align-items: center; gap: .25rem; color: var(--gold-300); font-weight: 650; white-space: nowrap; }
.adm-anprev__link .i { width: .9rem; height: .9rem; }
.adm-anprev__state { font-size: .78rem; }
.adm-anprev.is-off .adm-anprev__bar { opacity: .4; filter: grayscale(.7); }
.adm-videoprev { min-width: 0; font-size: .84rem; }
.adm-videoprev__fig { margin: 0; display: grid; gap: .45rem; }
.adm-videoprev__video { display: block; width: 100%; max-width: 380px; aspect-ratio: 16 / 9; border-radius: 12px; background: radial-gradient(60% 80% at 50% 0%, #2B1BA8, var(--deep-900)); box-shadow: 0 0 0 1px var(--adm-line-2); }
.adm-videoprev__fig.is-off .adm-videoprev__video { opacity: .5; }
.adm-videoprev.has-error .adm-videoprev__video { box-shadow: 0 0 0 2px var(--danger); }
.adm-videoprev.has-error figcaption { color: var(--danger); font-weight: 600; }
.adm-datarow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .85rem 0; border-bottom: 1px solid var(--adm-row); }
.adm-datarow:last-child { border-bottom: 0; padding-bottom: 0; }
.adm-datarow:first-of-type { padding-top: 0; }
.adm-datarow strong { font-weight: 650; }
.adm-datarow p { font-size: .82rem; margin-top: 1px; line-height: 1.45; }
.adm-datarow__ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; }
.adm-datarow__ico .i { width: 1.1rem; height: 1.1rem; }
@media (max-width: 560px), (min-width: 1100px) and (max-width: 1359.98px) { .adm-datarow { grid-template-columns: auto minmax(0, 1fr); } .adm-datarow .btn { grid-column: 2; justify-self: start; } }
.adm-table--team .adm-select { min-width: 110px; }
.adm-roles { padding-top: 14px; padding-bottom: 16px; border-top: 1px solid var(--adm-line); background: var(--adm-head); }
.adm-roles__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 1.2rem; }
.adm-roles__list > div { display: grid; gap: .3rem; align-content: start; justify-items: start; }
.adm-roles__list dd { font-size: .82rem; color: var(--text-soft); line-height: 1.45; }
@media (max-width: 719.98px) { .adm-roles__list { grid-template-columns: 1fr; } .adm-roles__list > div { grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: .6rem; } }

/* =====================================================================================================
   17 · CHARTS (POQ.charts → viz-*)
   ===================================================================================================== */
.viz { position: relative; min-width: 0; }
.viz__plot { position: relative; width: 100%; }
.viz-svg { display: block; overflow: visible; font-family: var(--font-body); touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.viz-svg:focus { outline: none; }
.viz-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 8px; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-base { stroke: var(--viz-axis); }
.viz-tick { fill: var(--text-mute); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.viz-axis-title { fill: var(--text-mute); font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.viz-cat { fill: var(--text); font-size: 13px; font-weight: 600; }
.viz-cat__sub { fill: var(--text-mute); font-size: 12px; font-weight: 400; }
.viz-val { fill: var(--text-soft); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.viz-line { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.viz-end, .viz-dot { stroke: #fff; stroke-width: 2; }
.viz-cross { stroke: #9FB0BF; stroke-width: 1; stroke-dasharray: 3 3; }
.viz-bar { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .18s; }
.viz-bar--h { transform-origin: 0% 50%; }
.viz-svg.has-active .viz-bar:not(.is-active) { opacity: .4; }
.viz-svg.has-active .viz-bar--track.is-active { opacity: 1; }
.viz-hit { fill: transparent; }
.viz-svg.is-clickable .viz-hit, .viz-svg.is-clickable .viz-cell { cursor: pointer; }
.viz-band { pointer-events: none; }
.viz-group__line { stroke: #C3CED8; }
.viz-group__label { fill: var(--text-soft); font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.viz-note text { fill: var(--text); font-size: 12px; font-weight: 700; }
.viz-note path { fill: none; stroke: var(--text-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.viz-seg { fill: none; pointer-events: stroke; transition: opacity .18s; }
.viz-svg.has-active .viz-seg:not(.is-active) { opacity: .35; }
.viz-cell { transform-box: fill-box; transform-origin: center; }
.viz-cell__t { font-size: 11px; font-weight: 650; pointer-events: none; font-variant-numeric: tabular-nums; }
.viz-ring { fill: none; stroke: var(--text); stroke-width: 2; pointer-events: none; }
.viz-donut { display: flex; align-items: center; gap: 1.25rem; }
.viz-donut.is-stacked { flex-direction: column; align-items: stretch; gap: .8rem; }
.viz-donut.is-stacked .viz-donut__svg { align-self: center; }
.viz-donut__svg { flex: none; }
.viz-donut__value { font: 700 26px var(--font-display); letter-spacing: -.03em; fill: var(--text); font-variant-numeric: tabular-nums; }
.viz-donut__label { font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; fill: var(--text-mute); }
.viz-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; flex: 1; min-width: 0; }
.viz-legend__item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; padding: .4rem .55rem; border-radius: 9px; font-size: .88rem; transition: background-color .15s; }
.viz-legend__item.is-active { background: var(--adm-soft); }
.viz-legend__sw { width: 10px; height: 10px; border-radius: 3px; }
.viz-legend__lab { color: var(--text-soft); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-legend__val { font: 700 .98rem/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.viz-legend__pct { min-width: 3.4ch; text-align: right; color: var(--text-mute); font-size: .8rem; font-variant-numeric: tabular-nums; }
.viz-tip { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; min-width: 120px; max-width: min(280px, 88vw); padding: .55rem .7rem; border-radius: 11px; background: #06192A; color: #F3F7FA; box-shadow: 0 0 0 1px rgba(200, 192, 255, .16), 0 12px 30px -8px rgba(10, 6, 40, .55); font-size: .82rem; line-height: 1.35; }
.viz-tip__head { margin-bottom: .25rem; color: #C9C3EE; font-size: .74rem; font-weight: 600; }
.viz-tip__row { display: flex; align-items: baseline; gap: .45rem; }
.viz-tip__row + .viz-tip__row { margin-top: 2px; }
.viz-tip__key { width: 12px; height: 3px; flex: none; border-radius: 2px; align-self: center; }
.viz-tip__key.is-rect { width: 9px; height: 9px; border-radius: 3px; }
.viz-tip__val { font: 700 1rem/1.2 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.viz-tip__lab { color: #C9C3EE; }
.viz-tip__foot { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid rgba(255, 255, 255, .14); color: #C9C3EE; font-size: .74rem; }
.viz-keys { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; list-style: none; padding: 0; margin: 0; color: var(--text-soft); font-size: .8rem; font-weight: 550; }
.viz-keys li { display: inline-flex; align-items: center; gap: .45rem; }
.viz-keys__sw { width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(16, 12, 46, .12); }
.viz-keys__sw.is-line { width: 16px; height: 3px; border-radius: 2px; box-shadow: none; }
.viz-scale { display: flex; align-items: center; gap: .6rem; color: var(--text-mute); font-size: .76rem; font-weight: 550; }
.viz-scale i { width: 150px; max-width: 34vw; height: 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(16, 12, 46, .1); }
.viz__table { overflow: hidden; }
.viz-table-wrap { height: 100%; overflow: auto; border: 1px solid var(--adm-line); border-radius: 11px; }
.viz-table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.viz-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .84rem; }
.viz-table th, .viz-table td { padding: .42rem .75rem; border-bottom: 1px solid var(--adm-row); text-align: left; }
.viz-table thead th { position: sticky; top: 0; background: var(--adm-head); font-size: .64rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); border-bottom-color: var(--adm-line); }
.viz-table tbody th { font-weight: 600; color: var(--text); }
.viz-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.viz-spark { display: block; }

/* =====================================================================================================
   18 · PRINT
   ===================================================================================================== */
@media print {
  .adm-side, .adm-top, .adm-bulk, .adm-scrim, .toast-stack { display: none !important; }
  .adm-main { margin: 0; }
  .adm-card, .adm-kpi { box-shadow: none; break-inside: avoid; }
}