/* 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: Team & access, My account, Accounts (families / classes), Sign-in & security,
 * and the permission states of the shell (hidden / view only). Builds on admin.css; everything is adm-scoped.
 *
 * Sections
 *   01 shell: view-only ribbon, nav lock, my-account link, no-access
 *   02 account types (chips, marks) + learners | accounts switch + accounts table
 *   03 learner form: "add to that account", locked number; learner profile account link
 *   04 team: roles, table, roles explained, permissions matrix, member drawer, temporary password
 *   05 my account
 *   06 one account: head, learner cards, move / add dialogs
 *   07 settings: sign-in & security + live preview
 *   08 overview: accounts summary, six attention items
 */

/* =====================================================================================================
   01 · SHELL — view only, no access, my account
   ===================================================================================================== */
.adm-viewonly { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; margin: 0; padding: .65rem .9rem; border-radius: var(--adm-r-sm); background: #EEF3F7; border: 1px solid rgba(14, 48, 73, .14); color: var(--deep-700); font-size: .86rem; line-height: 1.45; }
.adm-viewonly > .i { width: 1.05rem; height: 1.05rem; flex: none; color: var(--deep-600); }
.adm-viewonly > span { flex: 1 1 260px; min-width: 0; }
.adm-viewonly strong { font-weight: 700; color: var(--deep-800); }
.adm-viewonly a { font-weight: 650; color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* edit controls on a view-only page: still visible, clearly inactive; a click explains why */
.adm-page[data-perm="view"] :is([data-act="add"], [data-act="issue"], [data-act="edit"], [data-act="save-progress"], [data-act="reset-progress"], [data-act="cert-toggle"], [data-act="restore"], [data-act="bulk-issue"], [data-act="bulk-suspend"], [data-act="bulk-restore"], [data-act="bulk-reset"], [data-act="bulk-delete"], [data-act="add-learner"], [data-act="edit-account"], [data-act="pause"], [data-move], [data-write], form button[type="submit"]) { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.adm-nav__lock { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: auto; border-radius: 6px; color: rgba(220, 232, 238, .55); flex: none; }
.adm-nav__lock .i { width: .85rem; height: .85rem; }
.adm-nav__lock[hidden] { display: none; }
.adm-nav__lock + .adm-nav__badge { margin-left: .3rem; }
.adm-nav__group[hidden] { display: none; }
@media (min-width: 1024px) { .adm.is-collapsed .adm-nav__lock { display: none; } }

a.adm-me { color: inherit; transition: background-color var(--t-fast), border-color var(--t-fast); }
a.adm-me:hover { background: rgba(255, 255, 255, .09); border-color: var(--line-strong); }
a.adm-me:hover .adm-me__text strong { color: #fff; }

/* the page title keeps its width; the search box gives way first (long names in the account menu) */
@media (min-width: 720px) { .adm-top__titles { flex-shrink: 0; max-width: 46%; } }
.adm-noaccess { padding-block: 2.2rem; }
.adm-actions--center { justify-content: center; }

/* =====================================================================================================
   02 · ACCOUNT TYPES, LEARNERS | ACCOUNTS SWITCH, ACCOUNTS TABLE
   ===================================================================================================== */
.adm-body { --acc-student: #0E7E89; --acc-student-bg: #DAF5F6; --acc-parent: #C24A2A; --acc-parent-bg: #FFE9E1; --acc-teacher: #5C49B0; --acc-teacher-bg: #ECE8FA; }
.adm-acctype { display: inline-flex; align-items: center; gap: .3em; padding: .2em .6em .2em .45em; border-radius: 999px; font-size: .74rem; font-weight: 650; line-height: 1.35; white-space: nowrap; background: var(--acc-student-bg); color: var(--acc-student); }
.adm-acctype .i { width: 1.05em; height: 1.05em; }
.adm-acctype--parent { background: var(--acc-parent-bg); color: var(--acc-parent); }
.adm-acctype--teacher { background: var(--acc-teacher-bg); color: var(--acc-teacher); }
.adm-acctype__n { margin-left: .15em; padding: 0 .4em; border-radius: 999px; background: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.adm-acct__mark { --s: 52px; width: var(--s); height: var(--s); flex: none; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(150deg, #E7F8F9, var(--acc-student-bg)); color: var(--acc-student); box-shadow: inset 0 0 0 1px rgba(14, 126, 137, .18); }
.adm-acct__mark .i { width: 46%; height: 46%; }
.adm-acct__mark--parent { background: linear-gradient(150deg, #FFF3EE, var(--acc-parent-bg)); color: var(--acc-parent); box-shadow: inset 0 0 0 1px rgba(194, 74, 42, .16); }
.adm-acct__mark--teacher { background: linear-gradient(150deg, #F5F2FD, var(--acc-teacher-bg)); color: var(--acc-teacher); box-shadow: inset 0 0 0 1px rgba(92, 73, 176, .16); }
.adm-acct__mark--sm { --s: 36px; border-radius: 11px; }

.adm-viewswitch { flex: none; display: inline-flex; }
.adm-body .adm-viewswitch a { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-soft); font-weight: 600; }
.adm-viewswitch a .i { width: 1rem; height: 1rem; }
.adm-body .adm-viewswitch a[aria-current="page"] { color: var(--text); }
.adm-body .adm-viewswitch a[aria-current="page"] .i { color: var(--gold-600); }
.adm-body .adm-viewswitch a:not([aria-current]):hover { color: var(--text); }
.adm-who__acc { display: inline-flex; align-items: center; gap: .2rem; color: var(--text-soft); font-weight: 600; }
.adm-who__acc .i { width: .85rem; height: .85rem; }

.adm-chip--toggle .i { width: .95rem; height: .95rem; }
.adm-chip--toggle .adm-chip__n:empty { display: none; }
.adm-table--accounts .adm-td-main { min-width: 210px; }
.adm-acc-email__v { display: inline-flex; align-items: center; gap: .3rem; max-width: 220px; min-width: 0; }
.adm-acc-email__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.adm-verified { display: inline-grid; place-items: center; color: var(--ok); flex: none; }
.adm-verified .i { width: 1rem; height: 1rem; }
.adm-acc-names__v { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; max-width: 260px; }
.adm-acc-names__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); min-width: 0; }
.adm-lcount { min-width: 26px; height: 26px; padding: 0 .4rem; flex: none; display: inline-grid; place-items: center; border-radius: 999px; background: rgba(16, 12, 46, .07); color: var(--text-soft); font: 700 .8rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.adm-lcount.is-multi { background: var(--deep-800); color: var(--gold-300); }
@container (max-width: 1100px) { .adm-table--accounts .adm-acc-certs { display: none; } .adm-table--accounts .adm-acc-email__v { max-width: 210px; } .adm-table--accounts .adm-acc-names__v { max-width: 190px; } }
@container (max-width: 980px) { .adm-table--accounts .adm-acc-levels { display: none; } }
@container (max-width: 860px) { .adm-table--accounts .adm-acc-type { display: none; } }
@container (max-width: 760px) { .adm-table--accounts .adm-acc-email { display: none; } }
@media (max-width: 719.98px) {
  .adm-lead > .adm-viewswitch { order: -1; width: 100%; }
  .adm-viewswitch a { flex: 1; justify-content: center; }
  .adm-acc-email__v, .adm-acc-names__v { max-width: 62vw; }
  .adm-table--accounts td.adm-acc-email { display: flex; }
  .adm-table--accounts td.adm-acc-certs, .adm-table--accounts td.adm-acc-type, .adm-table--accounts td.adm-acc-levels { display: flex; }
  .adm-table--accounts td.adm-td-main { grid-column: 1 / 3; }
  .adm-table--accounts td.adm-acc-type { grid-column: 3; grid-row: 1; border-top: 0; padding: 0 0 .5rem; align-self: start; }
  .adm-table--accounts td.adm-acc-type::before { display: none; }
  .adm-table--accounts td.is-empty { display: none; }
  .adm-toolbar__row > .adm-chip--toggle { flex: none; }
  .adm-accounts .adm-toolbar__row > .adm-selectwrap { flex: 1 1 160px; }
}

/* =====================================================================================================
   03 · LEARNER FORM + PROFILE LINKS
   ===================================================================================================== */
.adm-joinacc { display: grid; gap: .45rem; margin-top: .35rem; padding: .75rem .85rem; border-radius: var(--adm-r-sm); background: #F3F8FA; border: 1px solid rgba(14, 48, 73, .14); animation: adm-rise .25s var(--ease-out); }
.adm-joinacc[hidden] { display: none; }
.adm-joinacc__head { display: flex; align-items: flex-start; gap: .5rem; font-size: .88rem; color: var(--text); line-height: 1.4; }
.adm-joinacc__head > .i { width: 1.05rem; height: 1.05rem; margin-top: .1rem; flex: none; color: var(--deep-600); }
.adm-joinacc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8rem; color: var(--text-soft); padding-left: 1.55rem; }
.adm-joinacc__warn { font-size: .82rem; color: #8A5606; padding-left: 1.55rem; }
.adm-joinacc__warn a, .adm-lockedfield a { font-weight: 650; color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.adm-joinacc__act { display: flex; flex-wrap: wrap; gap: .4rem; padding-left: 1.55rem; }
.adm-body .adm-joinacc [data-join][aria-pressed="true"] { background: #FBF3DA; border-color: var(--gold-500); color: var(--gold-ink); box-shadow: 0 0 0 3px var(--gold-glow); }
.adm-lockedfield { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-height: 42px; padding: .45rem .8rem; border-radius: 10px; background: var(--adm-soft); border: 1px dashed var(--adm-line-2); font-size: .9rem; color: var(--text); }
.adm-lockedfield > .i { width: 1rem; height: 1rem; color: var(--text-mute); }

.adm-acctlink { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; max-width: 100%; padding: .18rem .5rem .18rem .45rem; border-radius: 8px; background: var(--acc-student-bg); color: var(--acc-student); font-weight: 650; font-size: .8rem; transition: filter var(--t-fast); }
.adm-acctlink > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-acctlink--parent { background: var(--acc-parent-bg); color: var(--acc-parent); }
.adm-acctlink--teacher { background: var(--acc-teacher-bg); color: var(--acc-teacher); }
.adm-acctlink:hover { filter: brightness(.96); text-decoration: underline; text-underline-offset: 3px; }
.adm-profile__meta .adm-acctlink .i { width: .9rem; height: .9rem; flex: none; }
.adm-dl__aside { font-size: .8rem; margin-left: .2rem; text-decoration: underline; text-underline-offset: 3px; }
.adm-dl dd .adm-acctype { margin-right: .2rem; }

/* =====================================================================================================
   04 · TEAM — roles, table, roles explained, permissions matrix, drawer, temporary password
   ===================================================================================================== */
.adm-role { display: inline-flex; align-items: center; gap: .3em; padding: .22em .62em .22em .5em; border-radius: 999px; font-size: .74rem; font-weight: 700; line-height: 1.3; white-space: nowrap; background: rgba(16, 12, 46, .07); color: var(--text-soft); }
.adm-role .i { width: 1.05em; height: 1.05em; }
.adm-role--owner { background: rgba(200, 149, 46, .2); color: var(--gold-ink); }
.adm-role--admin { background: #E2E9EF; color: var(--deep-700); }
.adm-role--editor { background: #ECE8FA; color: #5C49B0; }
.adm-role--support { background: #DAF2E8; color: #0E7A56; }
.adm-role__custom { display: inline-flex; align-items: center; margin-left: .3rem; padding: .12em .5em; border-radius: 6px; border: 1px dashed var(--gold-500); color: var(--gold-ink); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.adm-rolecell { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .2rem; }
.adm-teamava { font-size: .74rem; }
.adm-teamava.is-owner { background: linear-gradient(140deg, #EBCB72, var(--gold-600)); color: #1B1303; box-shadow: none; }
.adm-teamava.adm-ava--lg { font-size: 1.15rem; }
.adm-pwstate { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--text-mute); white-space: nowrap; }
.adm-pwstate .i { width: .95rem; height: .95rem; }
.adm-pwstate.is-set { color: var(--text-soft); }
.adm-pwstate.is-set .i { color: var(--ok); }
.adm-pwstate.is-temp { color: #8A5606; font-weight: 600; }
.adm-table--team2 .adm-td-main { min-width: 230px; }
.adm-team__foot { margin: 0; padding: .85rem 16px .95rem calc(16px + 1.5rem); border-top: 1px solid var(--adm-line); background: var(--adm-head); }
.adm-team__foot > .i { left: 16px; top: 1.05rem; }

/* roles explained: a matrix on wide screens, one card per role on phones */
.adm-roletable-wrap { min-width: 0; border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm); overflow: hidden; }
.adm-roletable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; table-layout: fixed; }
.adm-roletable th, .adm-roletable td { padding: .45rem .5rem; border-bottom: 1px solid var(--adm-row); text-align: center; }
.adm-roletable thead th { background: var(--adm-head); border-bottom-color: var(--adm-line); }
.adm-roletable thead th:first-child, .adm-roletable tbody th { width: 30%; text-align: left; padding-left: 14px; }
.adm-roletable thead th:first-child { font-size: .66rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.adm-roletable tbody tr:last-child > * { border-bottom: 0; }
.adm-roletable tbody tr:hover { background: var(--adm-hover); }
.adm-roletable__mod { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--text); }
.adm-roletable__mod .i { width: 1rem; height: 1rem; color: var(--text-mute); }
.adm-lvdot { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex: none; }
.adm-lvdot .i { width: .9rem; height: .9rem; }
.adm-lvdot.is-edit { background: rgba(200, 149, 46, .2); color: var(--gold-ink); }
.adm-lvdot.is-view { background: #E2EEF4; color: #24617F; }
.adm-lvdot.is-none { background: transparent; color: rgba(16, 12, 46, .28); }
.adm-rolehints { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem 1rem; margin-top: 14px; }
.adm-rolehints > div { display: grid; gap: .35rem; align-content: start; justify-items: start; }
.adm-rolehints dd { font-size: .8rem; color: var(--text-soft); line-height: 1.45; }
.adm-rolecards { display: none; }
@media (max-width: 1099.98px) { .adm-rolehints { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719.98px) {
  .adm-roletable-wrap, .adm-rolehints { display: none; }
  .adm-rolecards { display: grid; gap: 10px; }
  .adm-rolecard { display: grid; gap: .45rem; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--adm-line); background: var(--adm-head); }
  .adm-rolecard > p { font-size: .84rem; color: var(--text-soft); line-height: 1.45; }
  .adm-rolecard__line { display: flex; align-items: flex-start; gap: .5rem; }
  .adm-rolecard__line .adm-lvdot { width: 22px; height: 22px; margin-top: 1px; }
  .adm-rolecard__line strong { color: var(--text); font-weight: 650; margin-right: .2rem; }
}

/* permissions matrix: 11 modules × None / View / Edit */
.adm-perms { display: grid; gap: .6rem; min-width: 0; }
.adm-perms__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.adm-perms__state { display: flex; align-items: flex-start; gap: .45rem; flex: 1 1 240px; min-width: 0; font-size: .84rem; color: var(--text-soft); line-height: 1.45; }
.adm-perms__state .i { width: 1rem; height: 1rem; margin-top: .15rem; flex: none; color: var(--ok); }
.adm-perms__state strong { color: var(--text); font-weight: 650; }
.adm-perms__state.is-custom .i { color: var(--gold-600); }
.adm-perms__state.is-custom strong { color: var(--gold-ink); }
.adm-perms__legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .76rem; color: var(--text-mute); }
.adm-perms__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.adm-perms__legend b { width: 10px; height: 10px; border-radius: 3px; background: rgba(16, 12, 46, .14); }
.adm-perms__legend b.is-view { background: #7FB3CC; }
.adm-perms__legend b.is-edit { background: var(--gold-500); }
.adm-perms__list { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm); background: #fff; overflow: hidden; }
.adm-perm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; padding: .5rem .55rem .5rem .7rem; border-bottom: 1px solid var(--adm-row); transition: background-color var(--t-fast); }
.adm-perm:last-child { border-bottom: 0; }
.adm-perm.is-changed { background: #FFFAEC; }
.adm-perm__mod { display: flex; align-items: center; gap: .6rem; flex: 1 1 200px; min-width: 0; }
.adm-perm__ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--adm-soft); color: var(--text-mute); transition: background-color var(--t-fast), color var(--t-fast); }
.adm-perm__ico .i { width: .95rem; height: .95rem; }
.adm-perm[data-level="view"] .adm-perm__ico { background: #E2EEF4; color: #24617F; }
.adm-perm[data-level="edit"] .adm-perm__ico { background: rgba(200, 149, 46, .18); color: var(--gold-ink); }
.adm-perm__txt { display: grid; min-width: 0; }
.adm-perm__txt strong { font-weight: 650; font-size: .88rem; color: var(--text); line-height: 1.3; }
.adm-perm__txt small { font-size: .74rem; color: var(--text-mute); line-height: 1.35; }
.adm-perm[data-level="none"] .adm-perm__txt strong { color: var(--text-mute); }
.adm-perm__opts { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(16, 12, 46, .06); border: 1px solid var(--adm-line); }
.adm-perm__opt { position: relative; }
.adm-perm__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.adm-perm__opt span { display: inline-grid; place-items: center; min-width: 52px; min-height: 30px; padding: 0 .6rem; border-radius: 8px; font-size: .8rem; font-weight: 650; color: var(--text-soft); transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.adm-perm__opt input:hover + span { color: var(--text); }
.adm-perm__opt input:checked + span { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(28, 22, 70, .16), 0 0 0 1px var(--adm-line); }
.adm-perm__opt--view input:checked + span { background: #E2EEF4; color: #1D5470; box-shadow: 0 0 0 1px rgba(36, 97, 127, .3); }
.adm-perm__opt--edit input:checked + span { background: #FBF0D2; color: var(--gold-ink); box-shadow: 0 0 0 1px rgba(166, 123, 36, .4); }
.adm-perm__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.adm-perm__opt input:disabled { cursor: default; }
.adm-perms.is-locked .adm-perm__opt input:not(:checked) + span { opacity: .45; }
.adm-perms.is-locked .adm-perm__opt input:checked + span { box-shadow: none; }
@media (max-width: 480px) {
  .adm-perm { padding: .55rem .6rem; }
  .adm-perm__mod { flex-basis: 100%; }
  .adm-perm__txt small { display: none; }
  .adm-perm__opts { width: 100%; }
  .adm-perm__opt { flex: 1; }
  .adm-perm__opt span { width: 100%; min-height: 36px; }
}

/* invite: role radios + "customise access" */
.adm-roleradios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
@media (max-width: 560px) { .adm-roleradios { grid-template-columns: 1fr; } }
.adm-roleradios--inline { gap: .4rem; }
.adm-disclose { border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm); background: var(--adm-head); min-width: 0; }
.adm-disclose__btn { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 46px; padding: .5rem .85rem; border-radius: var(--adm-r-sm); font-weight: 650; font-size: .9rem; color: var(--text); text-align: left; }
.adm-disclose__btn .i { width: 1rem; height: 1rem; color: var(--text-mute); transition: transform var(--t-med) var(--ease-out); }
.adm-disclose__btn[aria-expanded="true"] .i { transform: rotate(180deg); }
.adm-disclose__btn small { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--text-mute); }
.adm-disclose__btn:hover { background: rgba(16, 12, 46, .035); }
.adm-disclose__body { padding: 0 .75rem .75rem; }

/* member drawer */
.adm-body .adm-memberdrawer .modal__panel { --mw: 600px; }
.adm-memberform { gap: .9rem; }
.adm-body .adm-subhead { margin-top: .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); font-family: var(--font-body); }
.adm-memberstats dd > span { font-size: .9rem; font-weight: 600; color: var(--text); }
.adm-memberstats dd .adm-pwstate { font-size: .86rem; }
.adm-memberacts { display: grid; gap: 0; padding-top: .2rem; border-top: 1px solid var(--adm-line); }
.adm-memberacts .adm-subhead { margin: .9rem 0 .4rem; }
.adm-memberacts .adm-datarow:first-of-type { padding-top: .85rem; }
.adm-memberacts .adm-datarow { grid-template-columns: auto minmax(0, 1fr) auto; }
.adm-memberacts .adm-datarow .btn { grid-column: auto; justify-self: end; }
@media (max-width: 560px) { .adm-memberacts .adm-datarow { grid-template-columns: auto minmax(0, 1fr); } .adm-memberacts .adm-datarow .btn { grid-column: 2; justify-self: start; } }
.adm-drawer__meta .adm-role, .adm-drawer__meta .badge { vertical-align: middle; }

/* one-time temporary password */
.adm-temppass { display: grid; gap: .9rem; }
.adm-temppass__lead { font-size: .9rem; color: var(--text-soft); line-height: 1.5; }
.adm-temppass__lead strong { color: var(--text); }
.adm-temppass__box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .2rem .6rem; padding: .8rem .8rem .8rem 1rem; border-radius: 14px; background: var(--deep-800); color: #F3F7FA; box-shadow: inset 0 0 0 1px rgba(229, 197, 104, .35); }
.adm-temppass__label { grid-column: 1 / -1; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); }
.adm-temppass__pw { font-size: 1.2rem; font-weight: 650; letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
.adm-temppass__box .adm-copy { width: 40px; height: 40px; color: #DCE8EE; background: rgba(255, 255, 255, .08); }
.adm-temppass__box .adm-copy:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.adm-temppass .adm-note { margin-top: 0; }
.adm-note--backend { padding: .6rem .75rem .6rem calc(.75rem + 1.5rem); border-radius: 10px; background: #F3F6F9; border: 1px solid var(--adm-line); }
.adm-note--backend > .i { left: .75rem; top: .78rem; color: var(--deep-600); }
.adm-note--backend strong { color: var(--text); }

/* =====================================================================================================
   05 · MY ACCOUNT
   ===================================================================================================== */
.adm-myhead { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; background: radial-gradient(520px 200px at 0% 0%, rgba(229, 197, 104, .16), transparent 70%), linear-gradient(180deg, #FCFBF7, #fff); }
.adm-myhead__ava { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(140deg, #EBCB72, var(--gold-600)); color: #1B1303; font: 700 1.3rem/1 var(--font-display); box-shadow: 0 10px 24px -12px rgba(122, 90, 12, .6); }
.adm-myhead__id { flex: 1 1 260px; min-width: 0; }
.adm-body .adm-myhead__name { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); font-weight: 700; letter-spacing: -.025em; overflow-wrap: anywhere; }
.adm-myhead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin-top: .35rem; color: var(--text-soft); font-size: .88rem; }
.adm-mycol { display: grid; gap: 18px; align-content: start; min-width: 0; }
@media (max-width: 719.98px) { .adm-mycol { gap: 14px; } .adm-myhead .adm-actions { width: 100%; } .adm-myhead .adm-actions .btn { flex: 1; } }
.adm-reveal { display: grid; gap: .8rem; animation: adm-rise .25s var(--ease-out); }
.adm-reveal[hidden] { display: none; }
.adm-reveal .adm-note { margin-top: 0; }
.adm-pwrules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1rem; font-size: .82rem; color: var(--text-mute); }
.adm-pwrules li { display: flex; align-items: center; gap: .4rem; transition: color var(--t-fast); }
.adm-pwrules .i { width: .95rem; height: .95rem; padding: 2px; border-radius: 50%; background: rgba(16, 12, 46, .08); color: transparent; transition: background-color var(--t-fast), color var(--t-fast); flex: none; }
.adm-pwrules li.is-ok { color: var(--text); }
.adm-pwrules li.is-ok .i { background: var(--ok); color: #fff; }
@media (max-width: 480px) { .adm-pwrules { grid-template-columns: 1fr; } }
.adm-pwmeter { height: 5px; border-radius: 999px; background: rgba(16, 12, 46, .08); overflow: hidden; }
.adm-pwmeter i { display: block; height: 100%; border-radius: inherit; background: var(--c-coral); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease-out), background-color var(--t-med); }
.adm-pwmeter i[data-tone="ok"] { background: var(--c-gold); }
.adm-pwmeter i[data-tone="strong"] { background: var(--c-green); }
.adm-myaccess { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.adm-myaccess__row { display: flex; align-items: flex-start; gap: .65rem; }
.adm-myaccess__row > div { min-width: 0; }
.adm-myaccess__row strong { display: block; font-weight: 650; font-size: .88rem; color: var(--text); }
.adm-myaccess__row p { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.adm-myaccess__mod { padding: .15rem .55rem; border-radius: 999px; background: var(--adm-soft); border: 1px solid var(--adm-line); font-size: .78rem; font-weight: 600; color: var(--text-soft); }
a.adm-myaccess__mod:hover { border-color: var(--gold-500); color: var(--gold-ink); }
.adm-myaccess__mod.is-none { background: none; border-style: dashed; color: var(--text-mute); }

/* =====================================================================================================
   06 · ONE ACCOUNT
   ===================================================================================================== */
.adm-acct__head .adm-acct__mark { --s: 72px; border-radius: 22px; }
.adm-acct__email { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.adm-acct__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adm-acct__ago { font-size: 1.15rem !important; letter-spacing: -.015em !important; }
@media (max-width: 1099.98px) {
  .adm-acct__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm-acct__stats > div, .adm-acct__stats > div:nth-child(n + 4) { grid-column: auto; border-top: 0; }
  .adm-acct__stats > div:nth-child(3) { border-right: 1px solid var(--adm-line); }
}
@media (max-width: 719.98px) {
  .adm-acct__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-acct__stats > div, .adm-acct__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-acct__stats > div:nth-child(2n) { border-right: 0; }
  .adm-acct__stats > div:nth-last-child(-n + 2) { border-bottom: 0; }
  .adm-acct__stats > div:last-child { grid-column: auto; border-right: 0; }
  .adm-acct__head .adm-acct__mark { --s: 56px; border-radius: 17px; }
}
.adm-acct__learners { display: grid; gap: 12px; min-width: 0; }
.adm-acct__learners .adm-sectionhead { margin-top: 0; }
.adm-lcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.adm-lcard { position: relative; display: grid; gap: .8rem; align-content: start; min-width: 0; padding: 16px; background: #fff; border: 1px solid var(--adm-line); border-radius: var(--adm-r); box-shadow: var(--adm-shadow); }
.adm-lcard.is-muted { opacity: .7; }
.adm-lcard__top { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; }
.adm-lcard__top .adm-ava { --s: 48px; }
.adm-lcard__id { flex: 1; min-width: 0; }
.adm-body .adm-lcard__name { font-size: .98rem; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.adm-lcard__name a { color: var(--text); }
.adm-lcard__name a:hover { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.adm-lcard__meta { margin-top: .15rem; font-size: .8rem; color: var(--text-mute); }
.adm-lcard__prog .adm-prog { width: 100%; }
.adm-lcard__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; padding: .6rem .7rem; border-radius: 11px; background: var(--adm-head); }
.adm-lcard__facts dt { font-size: .62rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.adm-lcard__facts dd { margin-top: .2rem; font-size: .84rem; color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.adm-lcard__last { padding: .05rem .4rem; border-radius: 6px; background: rgba(200, 149, 46, .16); color: var(--gold-ink); font-size: .68rem; font-weight: 650; }
.adm-lcard__foot { display: flex; flex-wrap: wrap; gap: .4rem; }
.adm-lcard__foot .btn--secondary { flex: 1; }
.adm-lcard--add { place-content: center; justify-items: center; gap: .3rem; min-height: 200px; text-align: center; background: transparent; border: 1.5px dashed var(--adm-line-2); box-shadow: none; color: var(--text-soft); transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.adm-lcard--add > .i { width: 1.6rem; height: 1.6rem; color: var(--gold-600); margin-bottom: .3rem; }
.adm-lcard--add strong { font-weight: 650; color: var(--text); }
.adm-lcard--add small { font-size: .8rem; color: var(--text-mute); max-width: 32ch; }
button.adm-lcard--add:hover { border-color: var(--gold-500); background: #FFFCF3; }
.adm-lcard--add.is-note > .i { color: var(--text-mute); }
.adm-movewarn { display: flex; align-items: flex-start; gap: .5rem; margin-top: .45rem; padding: .55rem .7rem; border-radius: 10px; background: var(--warn-soft); color: #6B4304; font-size: .82rem; line-height: 1.45; }
.adm-movewarn[hidden] { display: none; }
.adm-movewarn > .i { width: 1rem; height: 1rem; margin-top: .1rem; flex: none; color: var(--warn); }
.adm-move .adm-movewarn { margin-top: 0; background: #F3F6F9; color: var(--text-soft); }
.adm-move .adm-movewarn > .i { color: var(--deep-600); }
.adm-checkline { display: inline-flex; align-items: center; gap: .45rem; margin-top: .35rem; font-size: .86rem; color: var(--text-soft); cursor: pointer; }
.adm-checkline input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold-600); }
.adm-typeradios .adm-radio strong { display: inline-flex; align-items: center; gap: .35rem; }
.adm-typeradios .adm-radio strong .i { width: 1rem; height: 1rem; }
.adm-typeradios .adm-radio input:disabled + span { opacity: .55; cursor: not-allowed; }
.adm-move { gap: .8rem; }
.adm-body .adm-move__search { max-width: none; flex: none; }
.adm-move__list { display: grid; gap: .4rem; min-height: 120px; max-height: 46vh; overflow-y: auto; padding: 2px; align-content: start; }
.adm-move__hint { font-size: .86rem; padding: .6rem .2rem; }
.adm-move__row { gap: .65rem; }
.adm-move__row.is-full { opacity: .55; cursor: not-allowed; }
.adm-move__row:has(input:checked) { border-color: var(--gold-500); background: #FFFAEC; box-shadow: 0 0 0 3px var(--gold-glow); }
.adm-move__main { display: grid; min-width: 0; flex: 1; }
.adm-move__main strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-move__main small { font-size: .78rem; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================================================
   07 · SETTINGS — sign-in & security
   ===================================================================================================== */
.adm-settings__auth { grid-column: 1 / -1; scroll-margin-top: 16px; }
.adm-teamlink .adm-datarow { padding-top: 0; }
.adm-authset { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.adm-authset__form { display: grid; gap: 1rem; min-width: 0; }
.adm-authset__side { position: sticky; top: 12px; min-width: 0; }
@media (max-width: 1099.98px) { .adm-authset { grid-template-columns: minmax(0, 1fr); } .adm-authset__side { position: static; } }
.adm-authset__sub { padding-left: calc(44px + .8rem); transition: opacity var(--t-med); }
.adm-authset__sub.is-off { opacity: .45; }
.adm-authset__sub .adm-radio > span { gap: .4rem; }
.adm-authset__sub .adm-radio .i { width: 1rem; height: 1rem; }
@media (max-width: 480px) { .adm-authset__sub { padding-left: 0; } }
.adm-form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .adm-form-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-form-row--3 > .field:first-child { grid-column: 1 / -1; } }
.adm-unit { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.adm-unit .input { flex: 1 1 60px; min-width: 0; width: 100%; font-variant-numeric: tabular-nums; }
.adm-unit > span { flex: none; font-size: .84rem; color: var(--text-mute); }
.adm-typerows { display: grid; gap: .1rem; }
.adm-typerow { display: grid; grid-template-columns: minmax(0, 1fr) 170px; align-items: center; gap: .6rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--adm-row); }
.adm-typerow:last-child { border-bottom: 0; padding-bottom: 0; }
.adm-typerow .adm-switch strong { display: block; }
.adm-typerow__max { flex-direction: row; align-items: center; gap: .5rem; }
.adm-typerow__max .field__label { flex: none; font-weight: 550; color: var(--text-mute); }
.adm-typerow__max .input:disabled { background: var(--adm-soft); }
@media (max-width: 560px) { .adm-typerow { grid-template-columns: minmax(0, 1fr); } .adm-typerow__max { padding-left: calc(44px + .8rem); } }
.adm-provider { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: .84rem; }
.adm-body .adm-secretnote { align-items: flex-start; font-size: .84rem; }
.adm-secretnote > .i { width: 1.1rem; height: 1.1rem; margin-top: .1rem; flex: none; color: var(--info); }

/* live preview: a small phone screen + plain-words rules */
.adm-authprev { display: grid; gap: .9rem; padding: 14px; border-radius: var(--adm-r); background: linear-gradient(180deg, #F3F7FA, #FAF8F2); border: 1px solid var(--adm-line); }
.adm-authprev__label { display: flex; align-items: center; gap: .45rem; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.adm-authprev__label .i { width: .95rem; height: .95rem; color: var(--gold-600); }
.adm-authprev__device { justify-self: center; width: min(100%, 270px); padding: 10px; border-radius: 30px; background: #0B1D2D; box-shadow: 0 18px 40px -20px rgba(10, 6, 40, .7), inset 0 0 0 1px rgba(229, 197, 104, .25); }
.adm-authprev__screen { display: grid; justify-items: center; gap: .55rem; padding: 18px 14px 16px; border-radius: 22px; background: radial-gradient(120% 70% at 50% 0%, #15486A, var(--deep-900) 70%); color: #EAF2F6; text-align: center; overflow: hidden; }
.adm-authprev__brand { width: 34px; height: 34px; }
.adm-authprev__brand svg { width: 100%; height: 100%; }
.adm-authprev__title { font: 700 1.05rem/1.2 var(--font-display); letter-spacing: -.01em; }
.adm-authprev__input { display: flex; align-items: center; gap: .5rem; width: 100%; height: 36px; padding: 0 .7rem; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-size: .78rem; }
.adm-authprev__input b { color: var(--gold-300); font-weight: 650; }
.adm-authprev__input i { font-style: normal; color: rgba(234, 242, 246, .7); letter-spacing: .04em; }
.adm-authprev__small { display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: .72rem; color: rgba(234, 242, 246, .8); line-height: 1.35; }
.adm-authprev__small .i { width: .9rem; height: .9rem; flex: none; color: #5FE0B5; }
.adm-authprev__code { display: flex; justify-content: center; gap: 4px; width: 100%; }
.adm-authprev__code span { flex: 1 1 0; max-width: 28px; height: 32px; display: grid; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); font: 700 .86rem/1 var(--font-display); }
.adm-authprev__code span.is-on { border-color: var(--gold-300); color: #fff; }
.adm-authprev__tiny { font-size: .64rem; color: rgba(234, 242, 246, .55); }
.adm-authprev__btn { display: grid; place-items: center; width: 100%; height: 34px; margin-top: .2rem; border-radius: 10px; background: linear-gradient(180deg, #E5C568, #C8952E); color: #1B1303; font-size: .8rem; font-weight: 700; }
.adm-authprev__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.adm-authprev__list li { display: flex; align-items: flex-start; gap: .55rem; font-size: .84rem; color: var(--text-soft); line-height: 1.45; }
.adm-authprev__list li > .i { width: 1rem; height: 1rem; margin-top: .15rem; flex: none; color: var(--gold-600); }
.adm-authprev__list strong { display: block; color: var(--text); font-weight: 650; font-size: .8rem; }
.adm-authprev .adm-note { margin-top: 0; }
.adm-note--warnline { color: #6B4304; }
.adm-note--warnline > .i { color: var(--warn); }

/* =====================================================================================================
   08 · OVERVIEW — accounts summary, a sixth attention item
   ===================================================================================================== */
.adm-ovacc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.adm-ovacc__tile { display: flex; align-items: center; gap: .8rem; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--adm-line); background: var(--adm-head); color: inherit; transition: border-color var(--t-fast), transform .28s var(--ease-out); }
.adm-ovacc__tile .adm-acct__mark { --s: 44px; border-radius: 13px; }
@media (hover: hover) { .adm-ovacc__tile:hover { border-color: var(--adm-line-2); transform: translateY(-1px); } }
.adm-ovacc__txt { display: grid; min-width: 0; }
.adm-ovacc__txt strong { font: 700 1.45rem/1.05 var(--font-display); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.adm-ovacc__txt > span { font-weight: 600; font-size: .86rem; color: var(--text); }
.adm-ovacc__txt small { font-size: .76rem; color: var(--text-mute); line-height: 1.35; }
.adm-ovacc__tile--multi { background: var(--deep-800); border-color: var(--deep-800); }
.adm-ovacc__tile--multi .adm-ovacc__txt strong { color: var(--gold-300); }
.adm-ovacc__tile--multi .adm-ovacc__txt > span { color: #F3F7FA; }
.adm-ovacc__tile--multi .adm-ovacc__txt small { color: #9FB6C6; }
.adm-ovacc__ring { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(229, 197, 104, .14); color: var(--gold-300); box-shadow: inset 0 0 0 1px rgba(229, 197, 104, .4); }
.adm-ovacc__ring .i { width: 1.2rem; height: 1.2rem; }
@media (max-width: 1279.98px) { .adm-ovacc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .adm-ovacc__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* six items: three per row on wide screens (the five-item layout stays as it is) */
@media (min-width: 860px) {
  .adm-attn__items--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .adm-attn__items--6 .adm-attn__item, .adm-attn__items--6 .adm-attn__item:nth-child(n + 4) { grid-column: span 2; }
}
.adm-memberform .input:disabled { background: var(--adm-soft); color: var(--text-soft); border-style: dashed; cursor: default; }
.adm-memberform .adm-radio input:disabled { cursor: default; }
.adm-memberform .adm-radio input:disabled:not(:checked) + span { opacity: .55; }