/* =====================================================================
   Ayani — Admin styles
   Cinematic obsidian shell, generous whitespace, wide-tracked markers.
   ===================================================================== */

html, body, #root {
  height: 100%;
  margin: 0;
}
body {
  background: #000;
  color: #9F9F9F;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* Crosshair cursor inside admin surfaces */
.adm-surface, .adm-surface * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><line x1='14' y1='2' x2='14' y2='10' stroke='%23ffffff' stroke-width='1'/><line x1='14' y1='18' x2='14' y2='26' stroke='%23ffffff' stroke-width='1'/><line x1='2' y1='14' x2='10' y2='14' stroke='%23ffffff' stroke-width='1'/><line x1='18' y1='14' x2='26' y2='14' stroke='%23ffffff' stroke-width='1'/><circle cx='14' cy='14' r='1' fill='%23ffffff'/></svg>") 14 14, crosshair;
}
.adm-surface input, .adm-surface textarea {
  cursor: text;
}

/* ===== Shared atoms =================================================== */

button, input, textarea, select {
  font-family: inherit;
  cursor: inherit;
}

.adm {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #000;
  color: #9F9F9F;
  overflow: hidden;
  isolation: isolate;
}

/* Lens flare arc — the signature top-edge highlight */
.adm-flare {
  position: absolute;
  pointer-events: none;
  inset: -200px -200px auto -200px;
  height: 600px;
  background:
    radial-gradient(ellipse 1100px 220px at 30% 10%, rgba(244,238,222,0.18), transparent 60%),
    radial-gradient(ellipse 800px 160px at 75% 0%, rgba(244,238,222,0.10), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.9;
  z-index: 0;
}
.adm-flare::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 36%, rgba(244,238,222,0.22) 50%, transparent 62%);
  mix-blend-mode: screen;
  filter: blur(6px);
  opacity: 0.55;
}

/* ===== Header ========================================================= */

.adm-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 56px 24px;
}
.adm-head-mark { display: flex; align-items: center; gap: 18px; }
.adm-head-mark img { height: 22px; opacity: 0.95; }
.adm-head-mark .sep { color: #3A3A3A; font-size: 18px; line-height: 1; }
.adm-head-mark .role {
  font: 500 11px/1 'DM Sans', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9F9F9F;
}
.adm-head-right { display: flex; align-items: center; gap: 14px; }
.adm-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 14px;
  font: 500 11px/1 'DM Sans', sans-serif;
  letter-spacing: 0.04em;
  color: #9F9F9F;
  transition: all 220ms ease;
}
.adm-pill:hover { color: #fff; border-color: rgba(255,255,255,0.18); }
.adm-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: #9F9F9F; }

/* ===== Stat strip ===================================================== */

.adm-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0 56px 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
}
.adm-stat {
  background: rgba(10,10,11,0.85);
  padding: 18px 22px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.adm-stat .lbl {
  font: 500 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #646464;
}
.adm-stat .val {
  font: 300 32px/1 'DM Sans', sans-serif;
  letter-spacing: -0.01em;
  color: #fff;
}
.adm-stat .delta {
  font: 400 11px/1 'DM Sans', sans-serif;
  color: #9F9F9F;
}

/* ===== Toolbar ======================================================== */

.adm-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 56px 16px;
}
.adm-search {
  flex: 1;
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
}
.adm-search svg { width: 14px; height: 14px; stroke: #646464; fill: none; stroke-width: 1.5; }
.adm-search input {
  flex: 1;
  background: transparent; border: 0; color: #9F9F9F;
  font: 400 12px/1 'DM Sans', sans-serif;
  outline: none;
}
.adm-search input::placeholder { color: #646464; }
.adm-filter {
  display: flex; gap: 0;
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 3px;
}
.adm-filter button {
  background: transparent; border: 0; color: #646464;
  font: 500 11px/1 'DM Sans', sans-serif;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 180ms ease;
}
.adm-filter button:hover { color: #9F9F9F; }
.adm-filter button.is-active { background: rgba(255,255,255,0.06); color: #fff; }

/* ===== List =========================================================== */

.adm-list-head {
  display: grid;
  grid-template-columns: 280px 110px 110px 1fr 90px 100px 24px;
  align-items: center;
  gap: 18px;
  margin: 0 56px;
  padding: 0 26px 12px;
  font: 500 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3A3A3A;
  position: relative;
  z-index: 2;
}
.adm-list {
  position: relative; z-index: 2;
  margin: 0 56px;
  display: flex; flex-direction: column; gap: 8px;
  height: calc(100vh - 360px);
  min-height: 160px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.adm-list::-webkit-scrollbar { width: 6px; }
.adm-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }

.adm-row {
  display: grid;
  grid-template-columns: 280px 110px 110px 1fr 90px 100px 24px;
  align-items: center;
  gap: 18px;
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px 26px;
  text-align: left;
  color: #9F9F9F;
  width: 100%;
  font-family: inherit;
  transition: all 220ms ease;
}
.adm-row:hover {
  background: var(--box-bg-hover);
  border-color: rgba(255,255,255,0.14);
  color: #fff;
}
.adm-row.is-active {
  background: var(--box-bg-active);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}

.adm-user-cell {
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.adm-avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--box-bg-active);
  display: flex; align-items: center; justify-content: center;
  font: 500 11px/1 'DM Sans', sans-serif;
  letter-spacing: 0.05em;
  color: #9F9F9F;
  flex-shrink: 0;
}
.adm-row.is-active .adm-avatar,
.adm-row:hover .adm-avatar { color: #fff; border-color: rgba(255,255,255,0.22); }
.adm-user-text { min-width: 0; }
.adm-user-name {
  font: 500 13px/1.2 'DM Sans', sans-serif;
  color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-user-meta {
  font: 400 11px/1.2 'DM Sans', sans-serif;
  color: #646464;
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.adm-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 9px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.4);
  color: #9F9F9F;
  white-space: nowrap;
}
.adm-tag .dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.adm-tag.is-active   { color: #C8D4C2; }
.adm-tag.is-suspended{ color: #E5B5B0; }
.adm-tag.is-invited  { color: #9F9F9F; }
.adm-tag.is-admin    { color: #fff; border-color: rgba(255,255,255,0.22); }
.adm-tag.is-mentor   { color: #F4F2EE; }
.adm-tag.is-member   { color: #9F9F9F; }

.adm-cell-num {
  font: 400 13px/1.2 'DM Sans', sans-serif;
  color: inherit;
}
.adm-cell-num .sub {
  display: block;
  font-size: 11px;
  color: #646464;
  margin-top: 4px;
}
.adm-progress-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.adm-progress-cell .label {
  display: flex; justify-content: space-between;
  font: 400 11px/1 'DM Sans', sans-serif;
  color: #9F9F9F;
}
.adm-progress-cell .label .pct { color: #fff; }
.adm-row:not(.is-active):not(:hover) .adm-progress-cell .label .pct { color: inherit; }
.adm-bar {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.adm-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: #fff;
  border-radius: 999px;
}
.adm-row:not(.is-active):not(:hover) .adm-bar-fill { background: #9F9F9F; }

.adm-row .arrow svg {
  width: 14px; height: 14px;
  stroke: #646464; fill: none; stroke-width: 1.5;
  transition: stroke 220ms ease, transform 220ms ease;
}
.adm-row:hover .arrow svg, .adm-row.is-active .arrow svg {
  stroke: #fff; transform: translateX(2px);
}

/* ===== Side panel (detail) =========================================== */

.adm-panel-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 8;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.adm-panel {
  position: absolute;
  top: 0; right: 0;
  width: 540px;
  height: 100%;
  background: #07070a;
  border-left: 1px solid rgba(255,255,255,0.08);
  z-index: 9;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: -40px 0 80px -20px rgba(0,0,0,0.9);
  animation: panel-in 260ms cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes panel-in {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.adm-panel-flare {
  position: absolute;
  inset: -120px -80px auto -80px;
  height: 320px;
  background: radial-gradient(ellipse 600px 140px at 50% 0%, rgba(244,238,222,0.16), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.adm-panel-head {
  position: relative;
  padding: 28px 32px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.adm-panel-head .left { display: flex; gap: 16px; min-width: 0; }
.adm-panel-head .avatar-lg {
  width: 56px; height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: var(--box-bg-active);
  display: flex; align-items: center; justify-content: center;
  font: 500 16px/1 'DM Sans', sans-serif; color: #fff;
  flex-shrink: 0;
}
.adm-panel-head h2 {
  font: 500 22px/1.1 'DM Sans', sans-serif;
  color: #fff;
  margin: 0 0 6px;
}
.adm-panel-head .sub {
  font: 400 12px/1.4 'DM Sans', sans-serif;
  color: #646464;
}
.adm-panel-head .tags { margin-top: 10px; display: flex; gap: 6px; }
.adm-panel-close {
  background: transparent; border: 0; color: #646464;
  width: 32px; height: 32px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 220ms ease;
}
.adm-panel-close:hover { color: #fff; border-color: rgba(255,255,255,0.22); }

.adm-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.adm-panel-body::-webkit-scrollbar { width: 6px; }
.adm-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }

.adm-section { margin-top: 28px; }
.adm-section:first-child { margin-top: 0; }
.adm-section h3 {
  font: 500 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #646464;
  margin: 0 0 14px;
}

.adm-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
}
.adm-stat-grid .cell {
  background: #0A0A0B;
  padding: 14px 16px;
}
.adm-stat-grid .lbl {
  font: 500 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #646464;
  margin-bottom: 6px;
}
.adm-stat-grid .val {
  font: 300 22px/1 'DM Sans', sans-serif;
  color: #fff;
  letter-spacing: -0.01em;
}
.adm-stat-grid .sub {
  font: 400 11px/1 'DM Sans', sans-serif;
  color: #646464; margin-top: 4px;
}

/* Activity sparkline strip */
.adm-spark {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 4px;
  height: 56px;
  align-items: end;
  background: rgba(10,10,11,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px;
}
.adm-spark .bar {
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
  min-height: 2px;
}
.adm-spark .bar.empty { background: rgba(255,255,255,0.04); }

/* Module access list (panel) */
.adm-mod-list { display: flex; flex-direction: column; gap: 8px; }
.adm-mod-item {
  display: grid;
  grid-template-columns: 56px 1fr 70px 36px;
  align-items: center;
  gap: 14px;
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px 14px;
}
.adm-mod-item.is-locked { opacity: 0.5; }
.adm-mod-item .code {
  font: 500 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.18em;
  color: #646464;
}
.adm-mod-item .title {
  font: 500 12px/1.2 'DM Sans', sans-serif;
  color: #9F9F9F;
}
.adm-mod-item .title .cur {
  display: inline-block; margin-left: 8px;
  font: 400 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.18em;
  color: #F4F2EE;
  text-transform: uppercase;
}
.adm-mod-item .pct {
  font: 400 11px/1 'DM Sans', sans-serif;
  color: #9F9F9F;
  text-align: right;
}
.adm-mod-toggle {
  width: 28px; height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 0;
  position: relative;
  padding: 0;
  transition: background 220ms ease;
}
.adm-mod-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: #9F9F9F;
  transition: all 220ms ease;
}
.adm-mod-toggle.on { background: rgba(255,255,255,0.30); }
.adm-mod-toggle.on::after { left: 14px; background: #fff; }

/* Lessons completed list */
.adm-log {
  display: flex; flex-direction: column; gap: 6px;
}
.adm-log-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 14px;
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font: 400 12px/1.2 'DM Sans', sans-serif;
  color: #9F9F9F;
}
.adm-log-row .when { color: #646464; font-size: 11px; }

/* Login events list */
.adm-events {
  display: flex; flex-direction: column;
}
.adm-event {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font: 400 12px/1.2 'DM Sans', sans-serif;
  color: #9F9F9F;
}
.adm-event:last-child { border-bottom: 0; }
.adm-event .when { color: #fff; font-weight: 500; font-size: 12px; }
.adm-event .when .sub { display: block; color: #646464; font-weight: 400; margin-top: 3px; font-size: 11px; }
.adm-event .device { color: #646464; font-size: 11px; }

/* Action row at panel bottom */
.adm-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 8px;
}
.adm-action {
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 11px 14px;
  font: 500 11px/1 'DM Sans', sans-serif;
  letter-spacing: 0.06em;
  color: #9F9F9F;
  transition: all 220ms ease;
}
.adm-action:hover { color: #fff; border-color: rgba(255,255,255,0.22); }
.adm-action.danger { color: #E5B5B0; }
.adm-action.danger:hover { color: #fff; border-color: rgba(229,181,176,0.5); }
.adm-action[disabled] { opacity: 0.45; pointer-events: none; }

/* Manage: reset-password field, delete danger-zone, action feedback */
.adm-danger-zone {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(229,181,176,0.18);
}
.adm-danger-zone > label {
  display: block;
  font: 500 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #E5B5B0; margin-bottom: 8px;
}
.adm-danger-note { font-size: 11px; color: #646464; margin-bottom: 10px; }
.adm-danger-note b { color: #E5B5B0; letter-spacing: 0.1em; }
.adm-danger-zone input {
  box-sizing: border-box;
  background: var(--box-bg);
  border: 1px solid rgba(229,181,176,0.22);
  color: #fff; padding: 12px 14px; border-radius: 8px;
  font: 400 13px/1 'DM Sans', sans-serif; outline: none;
  transition: border-color 220ms ease;
}
.adm-danger-zone input::placeholder { color: #6a4a48; letter-spacing: 0.1em; }
.adm-danger-zone input:focus { border-color: rgba(229,181,176,0.5); }
.adm-manage-msg { margin-top: 14px; font-size: 12px; letter-spacing: 0.01em; }
.adm-manage-msg.ok  { color: #9FbF9F; }
.adm-manage-msg.err { color: #d98a8a; }

/* Editable mini-fields */
.adm-kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 14px;
  align-items: center;
}
.adm-kv .k {
  font: 500 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #646464;
}
.adm-kv .v {
  font: 400 12px/1 'DM Sans', sans-serif;
  color: #9F9F9F;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
}
.adm-kv .v.editable:hover { color: #fff; border-color: rgba(255,255,255,0.18); }

/* ===== New member dialog ============================================== */

.adm-dialog-scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 20;
  display: flex; align-items: center; justify-content: center;
}
.adm-dialog {
  width: 480px;
  background: #07070a;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  animation: dialog-in 240ms cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes dialog-in {
  from { transform: translateY(16px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.adm-dialog .flare {
  position: absolute;
  inset: -80px -40px auto -40px;
  height: 200px;
  background: radial-gradient(ellipse 500px 120px at 50% 0%, rgba(244,238,222,0.15), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.adm-dialog h3 {
  font: 500 18px/1.1 'DM Sans', sans-serif;
  color: #fff;
  margin: 0 0 6px;
}
.adm-dialog .sub {
  font: 400 12px/1.4 'DM Sans', sans-serif;
  color: #646464;
  margin-bottom: 22px;
}
.adm-field { margin-bottom: 14px; }
.adm-field > label {
  display: block;
  font: 500 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #646464;
  margin-bottom: 6px;
}
.adm-field input {
  width: 100%; box-sizing: border-box;
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  color: #fff;
  padding: 12px 14px;
  border-radius: 8px;
  font: 400 13px/1 'DM Sans', sans-serif;
  outline: none;
  transition: border-color 220ms ease;
}
.adm-field input::placeholder { color: #3A3A3A; }
.adm-field input:focus { border-color: rgba(255,255,255,0.22); }

.adm-mod-pick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.adm-mod-pick button {
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: left;
  color: #9F9F9F;
  font: 500 11px/1.2 'DM Sans', sans-serif;
  transition: all 220ms ease;
}
.adm-mod-pick button .c {
  display: block;
  font: 500 9px/1 'DM Sans', sans-serif;
  letter-spacing: 0.22em;
  color: #3A3A3A;
  margin-bottom: 5px;
}
.adm-mod-pick button:hover { color: #fff; border-color: rgba(255,255,255,0.18); }
.adm-mod-pick button.on {
  color: #fff; border-color: rgba(255,255,255,0.30);
  background: rgba(40,40,44,0.85);
}
.adm-mod-pick button.on .c { color: #9F9F9F; }

.adm-role-pick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.adm-role-pick button {
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
  color: #9F9F9F;
  font: 500 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 220ms ease;
}
.adm-role-pick button:hover { color: #fff; border-color: rgba(255,255,255,0.18); }
.adm-role-pick button.on { color: #fff; border-color: rgba(255,255,255,0.30); background: rgba(40,40,44,0.85); }
.adm-role-pick.two { grid-template-columns: repeat(2, 1fr); }

.adm-dialog-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 24px;
}
.adm-dialog-error {
  margin-top: 16px; font-size: 12px; color: #d98a8a; letter-spacing: 0.01em;
}
.adm-action[disabled], .adm-btn-glow[disabled] { opacity: 0.5; pointer-events: none; }

/* Rotating glow button */
@property --adm-btn-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes adm-btn-spin { to { --adm-btn-angle: 360deg; } }

.adm-btn-glow {
  position: relative;
  background: var(--box-bg);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 12px 22px;
  font: 500 11px/1 'DM Sans', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  isolation: isolate;
  transition: color 220ms ease;
}
.adm-btn-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--adm-btn-angle),
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,0)   72%,
    rgba(255,255,255,0.95) 82%,
    rgba(255,255,255,0)   92%,
    rgba(255,255,255,0)   100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: adm-btn-spin 4.5s linear infinite;
  pointer-events: none;
  z-index: -1;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
}
.adm-btn-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
  z-index: -1;
}

/* ===== Nav tabs (Members / Content) ==================================== */
.adm-nav-tabs {
  display: flex; gap: 4px;
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 4px;
}
.adm-nav-tabs button {
  padding: 8px 16px;
  border-radius: 6px;
  font: 500 11px/1 'DM Sans', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #646464;
  transition: all 220ms ease;
}
.adm-nav-tabs button:hover { color: #fff; }
.adm-nav-tabs button.on { color: #fff; background: rgba(40,40,44,0.85); border: 1px solid rgba(255,255,255,0.12); }

/* ===== Content (lesson video) panel ===================================== */
.adm-content {
  position: relative; z-index: 2;
  margin: 0 56px;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  height: calc(100vh - 170px);
}
.adm-content-empty {
  color: #646464;
  font-size: 12px;
  padding: 20px 4px;
}
.adm-content-empty.err { color: #d98a8a; }
.adm-content-list {
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.adm-content-list::-webkit-scrollbar { width: 6px; }
.adm-content-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }
.adm-content-mod-label {
  font: 500 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3A3A3A;
  padding: 16px 10px 8px;
}
.adm-content-mod-label:first-child { padding-top: 4px; }
.adm-lesson-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 6px;
  cursor: pointer;
  font: 500 10px/1 var(--ayani-font-ui);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #646464;
}
.adm-lesson-divider::before,
.adm-lesson-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
.adm-lesson-divider:hover { color: #9F9F9F; }
.adm-lesson-row {
  width: 100%; box-sizing: border-box;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 6px;
  text-align: left;
  color: #9F9F9F;
  transition: all 220ms ease;
}
.adm-lesson-row:hover { color: #fff; border-color: rgba(255,255,255,0.18); }
.adm-lesson-row.on { color: #fff; border-color: rgba(255,255,255,0.30); background: rgba(40,40,44,0.85); }
.adm-lesson-row .n {
  display: block;
  font: 500 9px/1 'DM Sans', sans-serif;
  letter-spacing: 0.18em;
  color: #3A3A3A;
  margin-bottom: 4px;
}
.adm-lesson-row .t { font: 500 12px/1.3 'DM Sans', sans-serif; }
.adm-content-video-dot {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #3A3A3A;
}
.adm-content-video-dot.has { background: #8FD19E; }

.adm-content-panel {
  background: #07070a;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 32px;
  overflow-y: auto;
}
.adm-content-panel h3 {
  font: 500 18px/1.3 'DM Sans', sans-serif;
  color: #fff;
  margin: 0 0 4px;
}
.adm-content-panel .sub {
  font: 400 12px/1.4 'DM Sans', sans-serif;
  color: #646464;
  margin-bottom: 22px;
}
.adm-content-video-status {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 11px/1 'DM Sans', sans-serif;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  color: #9F9F9F;
  margin-bottom: 22px;
}
.adm-content-video-status .dot { width: 6px; height: 6px; border-radius: 999px; }
.adm-content-video-status.has-video .dot { background: #8FD19E; }
.adm-content-video-status.no-video .dot { background: #3A3A3A; }
.adm-content-ok {
  margin-top: 16px; font-size: 12px; color: #8FD19E; letter-spacing: 0.01em;
}
.adm-field select {
  width: 100%; box-sizing: border-box;
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  color: #fff;
  padding: 12px 14px;
  border-radius: 8px;
  font: 400 13px/1 'DM Sans', sans-serif;
  outline: none;
}
.adm-field input[type="file"] {
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  color: #9F9F9F;
  padding: 10px 14px;
  border-radius: 8px;
  font: 400 12px/1 'DM Sans', sans-serif;
  width: 100%; box-sizing: border-box;
}
.adm-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  margin-top: 4px;
}
.adm-progress-fill {
  height: 100%;
  background: #fff;
  transition: width 180ms ease;
}

/* ===== Content tree + editors (Phase 4) =================================== */
.adm-content-mod { margin-bottom: 10px; }
.adm-content-mod-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 10px 8px;
  cursor: pointer;
  border-radius: 8px;
  color: #3A3A3A;
  transition: color 220ms ease;
}
.adm-content-mod-head .lbl {
  font: 500 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-content-mod-head:hover { color: #9F9F9F; }
.adm-content-mod-head.on { color: #fff; }
.adm-content-mod:first-child .adm-content-mod-head { padding-top: 4px; }

.adm-lesson-row-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.adm-content-tools { display: inline-flex; gap: 2px; }
.adm-icon-btn {
  background: transparent;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: #3A3A3A;
  border: 1px solid transparent;
  transition: all 180ms ease;
}
.adm-icon-btn:hover { color: #fff; border-color: rgba(255,255,255,0.18); background: rgba(40,40,44,0.85); }
.adm-icon-btn.danger:hover { color: #E5B5B0; border-color: rgba(229,181,176,0.5); }
.adm-icon-btn[disabled] { opacity: 0.3; pointer-events: none; }
.adm-lesson-row.on .adm-icon-btn, .adm-content-mod-head.on .adm-icon-btn { color: #646464; }

.adm-content-add {
  background: transparent;
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  margin: 0 0 6px;
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #3A3A3A;
  font: 500 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 220ms ease;
}
.adm-content-add:hover { color: #fff; border-color: rgba(255,255,255,0.22); }
.adm-content-add.on { color: #fff; border-style: solid; border-color: rgba(255,255,255,0.30); background: rgba(40,40,44,0.85); }
.adm-content-add.mod { margin-top: 14px; padding: 12px 14px; }

.adm-content-section {
  padding-top: 22px;
  margin-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.adm-content-panel .sub + .adm-content-section { padding-top: 0; margin-top: 0; border-top: 0; }
.adm-content-section > h4 {
  font: 500 10px/1 'DM Sans', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #646464;
  margin: 0 0 16px;
}
.adm-field .hint, .adm-content-section h4 .hint {
  color: #3A3A3A; letter-spacing: 0; text-transform: none; font-weight: 400;
}
.adm-field-row { display: flex; gap: 12px; }
.adm-content-panel .adm-dialog-actions { margin-top: 14px; }
.adm-content-panel .adm-danger-zone { margin-top: 28px; }

.adm-doc-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.adm-doc-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 12px;
  color: #9F9F9F;
}
.adm-doc-row > svg { flex: 0 0 auto; color: #646464; }
.adm-doc-row .name {
  flex: 1; min-width: 0;
  font: 500 12px/1.3 'DM Sans', sans-serif;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-doc-row .name .file {
  display: block;
  font: 400 11px/1.3 'DM Sans', sans-serif;
  color: #646464;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-kind-pick { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.adm-kind-pick button {
  background: transparent;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  color: #646464;
  font: 500 9px/1 'DM Sans', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 180ms ease;
}
.adm-kind-pick button:hover { color: #fff; border-color: rgba(255,255,255,0.18); }
.adm-kind-pick button.on { color: #fff; border-color: rgba(255,255,255,0.30); background: rgba(40,40,44,0.85); }
.adm-kind-pick button[disabled] { opacity: 0.5; pointer-events: none; }
.adm-doc-add {
  padding: 16px;
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 10px;
}

/* Member list placeholder rows (loading / error / no match) */
.adm-list-empty {
  padding: 60px; text-align: center;
  color: #646464; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.adm-list-empty.err { color: #d98a8a; text-transform: none; letter-spacing: 0.01em; }
.adm-kv .v .muted { color: #3A3A3A; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
.adm { height: 100dvh; }

/* Tablets / small laptops: drop the Watch column so the member table fits. */
@media (max-width: 1200px) {
  .adm-list-head, .adm-row { grid-template-columns: 220px 90px 100px 1fr 90px 24px; }
  .adm-list-head > :nth-child(5), .adm-row > :nth-child(5) { display: none; }
}

/* Phones (portrait ≤900px wide, or landscape ≤500px tall): the dashboard
   becomes one scrolling page; the member table turns into stacked cards and
   the detail panel / dialogs go full-screen. */
@media (max-width: 900px), (max-height: 500px) {
  body { overflow: auto; }
  .adm { height: auto; min-height: 100dvh; padding-bottom: 32px; }

  /* 16px form text stops iOS Safari zooming in on focus. */
  .adm-search input, .adm-field input, .adm-field select, .adm-danger-zone input { font-size: 16px; }

  /* Header */
  .adm-head { flex-wrap: wrap; gap: 14px; padding: 20px 16px 16px; }
  .adm-head-right { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  .adm-head-right .adm-pill { display: none; }
  .adm-nav-tabs button { padding: 11px 16px; }

  /* Stats */
  .adm-stats { grid-template-columns: repeat(2, 1fr); margin: 0 16px 16px; }
  .adm-stat { padding: 14px 16px 16px; }
  .adm-stat .val { font-size: 24px; }

  /* Toolbar: search on its own row, each filter full-width below */
  .adm-toolbar { flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
  .adm-search { flex-basis: 100%; }
  .adm-filter { flex-basis: 100%; }
  .adm-filter button { flex: 1; padding: 10px 6px; }

  /* Member list → cards */
  .adm-list-head { display: none; }
  .adm-list { margin: 0 16px; height: auto; min-height: 0; overflow: visible; padding-right: 0; }
  .adm-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
  }
  .adm-row > .adm-user-cell,
  .adm-row > .adm-progress-cell { grid-column: 1 / -1; }
  .adm-row > :nth-child(5) { display: block; }
  .adm-row > .arrow { display: none; }
  .adm-list-empty { padding: 40px 16px; }

  /* Member detail panel: full-screen sheet */
  .adm-panel-scrim { position: fixed; }
  .adm-panel { position: fixed; width: 100%; height: 100dvh; border-left: 0; }
  .adm-panel-head { padding: 20px 16px 16px; }
  .adm-panel-close { width: 40px; height: 40px; flex-shrink: 0; }
  .adm-panel-body { padding: 20px 16px 40px; }
  .adm-panel-head .tags { flex-wrap: wrap; }

  /* Dialogs */
  .adm-dialog-scrim { position: fixed; padding: 16px; box-sizing: border-box; }
  .adm-dialog {
    width: 100%; max-width: 480px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 24px 20px;
    box-sizing: border-box;
  }
  .adm-mod-pick { grid-template-columns: repeat(2, 1fr); }

  /* Content tab: tree, then the edit panel beneath it */
  .adm-content { grid-template-columns: 1fr; height: auto; margin: 0 16px; }
  .adm-content-list { overflow: visible; padding-right: 0; }
  .adm-content-panel { overflow: visible; padding: 20px 16px; scroll-margin-top: 12px; }
  .adm-field-row { flex-wrap: wrap; }
  .adm-field-row > * { flex: 1 1 200px; min-width: 0; }
  .adm-icon-btn { min-width: 32px; min-height: 32px; }
  .adm-doc-row { flex-wrap: wrap; }
}