.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: 28px 16px;
  background:
    radial-gradient(circle at 18% 15%, rgba(124,108,255,.28), transparent 30rem),
    radial-gradient(circle at 83% 78%, rgba(84,215,255,.14), transparent 32rem),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #090c18;
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
  isolation: isolate;
}

.auth-gate::before,
.auth-gate::after { content: ""; position: fixed; pointer-events: none; }
.auth-gate::before {
  z-index: 0;
  width: min(74vw, 960px);
  height: min(74vw, 960px);
  left: -26vw;
  top: -38vw;
  border: 1px solid rgba(124,108,255,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(124,108,255,.018), 0 0 0 140px rgba(84,215,255,.012);
}
.auth-gate::after {
  content: "∑     π     lim     ∫     Δ";
  z-index: 0;
  right: 4vw;
  bottom: 3vh;
  color: rgba(255,255,255,.045);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 2.6vw, 2.2rem);
  letter-spacing: .36em;
  white-space: nowrap;
}

.auth-loading-card,
.auth-card {
  width: min(100%, 470px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: rgba(18,22,42,.92);
  box-shadow: 0 30px 90px rgba(0,0,0,.44);
  backdrop-filter: blur(22px);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.auth-loading-card::before,
.auth-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(124,108,255,.85), rgba(84,215,255,.62), transparent); }
.auth-card::after { content: "x²"; position: absolute; right: -7px; top: 50px; color: rgba(183,173,255,.045); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 5.5rem; transform: rotate(-10deg); pointer-events: none; }
.auth-card > * { position: relative; z-index: 1; }

.auth-loading-card { min-height: 330px; display: grid; place-items: center; align-content: center; gap: 19px; color: #9da4c0; }
.auth-logo { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(145deg, #8172ff, #5746df); color: white; font-size: 24px; font-weight: 800; box-shadow: 0 13px 34px rgba(124,108,255,.35); }
.auth-spinner { width: 25px; height: 25px; border: 2px solid rgba(255,255,255,.15); border-top-color: #8172ff; border-radius: 50%; animation: auth-spin .8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-card { padding: 29px; box-shadow: 0 30px 90px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.045); }
.auth-topline { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 25px; }
.auth-brand { display: flex; align-items: center; gap: 11px; font-weight: 780; letter-spacing: -.02em; }
.auth-brand .auth-logo { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
.auth-language { display: flex; gap: 4px; padding: 3px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.035); }
.auth-language button { border: 0; background: transparent; color: #9299b5; border-radius: 7px; padding: 6px 9px; cursor: pointer; font-size: .8rem; font-weight: 750; }
.auth-language button.active { color: white; background: rgba(124,108,255,.28); }
.auth-heading { margin: 0 0 7px; font-size: 1.75rem; letter-spacing: -.035em; }
.auth-subtitle { margin: 0 0 22px; color: #aab0c9; line-height: 1.55; font-size: .9rem; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 20px; border-radius: 12px; background: linear-gradient(145deg, rgba(6,9,20,.82), rgba(14,18,35,.72)); border: 1px solid rgba(255,255,255,.08); }
.auth-tab { border: 0; padding: 10px; border-radius: 9px; color: #8f96b1; background: transparent; cursor: pointer; font-weight: 720; font-size: .9rem; }
.auth-tab.active { color: white; background: rgba(124,108,255,.2); }
.auth-form { display: grid; gap: 15px; }
.field { display: grid; gap: 7px; }
.field label { color: #d9dced; font-size: .875rem; font-weight: 680; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 11px;
  outline: none;
  color: #f7f8ff;
  background: rgba(6,9,20,.72);
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: #7c6cff; box-shadow: 0 0 0 4px rgba(124,108,255,.13); }
.field-help { color: #777f9a; font-size: .78rem; line-height: 1.45; }
.auth-submit { min-height: 50px; border: 0; border-radius: 12px; color: white; background: linear-gradient(135deg, #8172ff, #6554e9); cursor: pointer; font-size: .9rem; font-weight: 760; box-shadow: 0 12px 30px rgba(105,86,235,.27); }
.auth-submit:hover { filter: brightness(1.08); }
.auth-submit:disabled { cursor: wait; opacity: .65; }
.auth-link { padding: 0; border: 0; background: none; color: #a89eff; cursor: pointer; font-size: .82rem; text-align: left; }
.auth-link:hover { color: white; }
.auth-message { min-height: 0; border-radius: 10px; padding: 10px 12px; font-size: .78rem; line-height: 1.5; }
.auth-message:empty { display: none; }
.auth-message.error { color: #ffc2c8; border: 1px solid rgba(255,107,122,.24); background: rgba(255,107,122,.075); }
.auth-message.success { color: #aef0d2; border: 1px solid rgba(97,230,167,.24); background: rgba(97,230,167,.075); }
.auth-open-note { display: flex; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); color: #848ca8; font-size: .73rem; line-height: 1.45; }
.auth-open-note::before { content: "✓"; color: #61e6a7; font-weight: 800; }

.account-zone { display: flex; align-items: center; gap: 9px; padding-left: 4px; }
.account-summary { display: grid; gap: 1px; max-width: 170px; }
.account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dce0f2; font-size: .75rem; }
.role-chip { width: fit-content; color: #a89eff; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.admin-open,
.logout-button { border: 1px solid rgba(255,255,255,.13); border-radius: 9px; padding: 8px 10px; background: rgba(255,255,255,.04); cursor: pointer; font-size: .73rem; }
.admin-open { color: #d9d5ff; border-color: rgba(124,108,255,.3); background: rgba(124,108,255,.1); }
.logout-button { color: #9ca3bd; }
.admin-open:hover,
.logout-button:hover { color: white; background: rgba(255,255,255,.08); }

.admin-dashboard { padding: 40px 0 70px; }
.admin-shell { border: 1px solid rgba(255,255,255,.14); border-radius: 22px; overflow: hidden; background: rgba(19,23,43,.82); box-shadow: 0 26px 70px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.035); position: relative; }
.admin-shell::before { content: ""; position: absolute; z-index: 2; left: 28px; right: 28px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #7c6cff, #54d7ff, transparent); pointer-events: none; }
.admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 25px 27px; border-bottom: 1px solid rgba(255,255,255,.1); background: linear-gradient(145deg, rgba(124,108,255,.10), rgba(84,215,255,.035)); }
.admin-kicker { color: #b7adff; font-size: .72rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.admin-head h1 { margin: 7px 0 6px; font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -.04em; }
.admin-head p { margin: 0; color: #aab0c9; font-size: .86rem; line-height: 1.5; }
.admin-close { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); padding: 9px 12px; border-radius: 10px; cursor: pointer; color: #d9dcec; white-space: nowrap; }
.admin-tabs { display: flex; gap: 6px; padding: 14px 20px 0; border-bottom: 1px solid rgba(255,255,255,.1); overflow-x: auto; }
.admin-tab { border: 0; border-bottom: 2px solid transparent; background: none; color: #858da8; padding: 10px 12px 13px; cursor: pointer; white-space: nowrap; font-weight: 700; font-size: .875rem; }
.admin-tab.active { color: #eceaff; border-bottom-color: #7c6cff; }
.admin-body { padding: 25px 27px 30px; }
.admin-section-title { margin: 0 0 5px; font-size: 1.16rem; letter-spacing: -.02em; }
.admin-section-copy { margin: 0 0 20px; color: #8f96af; font-size: .82rem; line-height: 1.55; }
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.upload-grid .full { grid-column: 1 / -1; }
.file-drop { position: relative; display: grid; place-items: center; min-height: 130px; padding: 18px; border: 1px dashed rgba(124,108,255,.45); border-radius: 13px; background: radial-gradient(circle at 50% 0, rgba(124,108,255,.1), transparent 75%), rgba(124,108,255,.04); text-align: center; cursor: pointer; }
.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 100%; padding: 0; }
.file-drop strong { display: block; margin-bottom: 5px; font-size: .9rem; }
.file-drop span { color: #8189a5; font-size: .75rem; }
.admin-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.admin-primary { border: 0; border-radius: 11px; padding: 12px 17px; background: linear-gradient(135deg, #8172ff, #6554e9); color: white; font-weight: 750; cursor: pointer; }
.admin-primary:disabled { cursor: wait; opacity: .6; }
.upload-progress { flex: 1; display: grid; gap: 5px; color: #8991ac; font-size: .74rem; }
.progress-track { height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); }
.progress-bar { width: 0; height: 100%; background: linear-gradient(90deg, #7c6cff, #54d7ff); transition: width .2s ease; }
.admin-notice { margin-top: 15px; border-radius: 10px; padding: 10px 12px; font-size: .78rem; line-height: 1.5; }
.admin-notice.error { color: #ffc2c8; background: rgba(255,107,122,.07); border: 1px solid rgba(255,107,122,.22); }
.admin-notice.success { color: #aef0d2; background: rgba(97,230,167,.07); border: 1px solid rgba(97,230,167,.22); }
.admin-notice:empty { display: none; }

.data-list { display: grid; gap: 10px; }
.data-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 15px; align-items: center; padding: 15px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(5,8,18,.38)); }
.data-title { margin: 0 0 5px; font-size: .9rem; }
.data-meta { color: #7f879f; font-size: .72rem; line-height: 1.5; }
.data-description { color: #a4abc1; margin: 7px 0 0; font-size: .78rem; line-height: 1.45; }
.data-controls { display: flex; align-items: center; gap: 8px; }
.compact-select { min-height: 37px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; color: #e8eaf5; background: #111528; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #8088a3; }
.status-dot.published { background: #61e6a7; box-shadow: 0 0 10px rgba(97,230,167,.55); }
.empty-state { padding: 32px 18px; border: 1px dashed rgba(255,255,255,.13); border-radius: 13px; color: #8189a4; text-align: center; font-size: .83rem; }
.loading-line { padding: 22px 0; color: #878fa9; font-size: .82rem; }

.video-slot { border-top: 1px solid rgba(255,255,255,.1); }
.lesson-video-list { display: grid; gap: 1px; background: rgba(255,255,255,.08); }
.lesson-video { padding: 18px; background: #0c1020; }
.lesson-video video { display: block; width: 100%; max-height: 520px; border-radius: 11px; background: #03050b; }
.lesson-video h4 { margin: 13px 0 4px; font-size: .94rem; }
.lesson-video p { margin: 0; color: #8f97b0; font-size: .79rem; line-height: 1.5; }
.video-load-error { padding: 22px; color: #f2bac0; background: rgba(255,107,122,.055); font-size: .79rem; }

@media (max-width: 920px) {
  .demo-pill { display: none; }
  header { align-items: flex-start; padding: 16px 0; }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .account-zone { order: 3; width: 100%; justify-content: flex-end; }
}

@media (max-width: 680px) {
  .auth-card { padding: 23px 18px; }
  .upload-grid { grid-template-columns: 1fr; }
  .upload-grid .full { grid-column: auto; }
  .admin-head { padding: 20px; }
  .admin-body { padding: 21px 17px 25px; }
  .data-card { grid-template-columns: 1fr; }
  .data-controls { justify-content: flex-start; }
  .account-summary { display: none; }
  .admin-open { max-width: 115px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 460px) {
  .brand > span { display: none; }
  .account-zone { width: auto; order: initial; }
  .admin-open, .logout-button { padding: 7px 8px; font-size: .68rem; }
}

/* Light theme · authentication and management */
.auth-gate {
  color: #18213c;
  background:
    radial-gradient(circle at 18% 15%, rgba(126,108,255,.22), transparent 31rem),
    radial-gradient(circle at 83% 78%, rgba(84,215,255,.22), transparent 33rem),
    linear-gradient(rgba(47,65,112,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,65,112,.045) 1px, transparent 1px),
    #edf4ff;
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
}
.auth-gate::before { border-color: rgba(104,87,232,.16); box-shadow: 0 0 0 70px rgba(104,87,232,.025), 0 0 0 140px rgba(22,141,181,.018); }
.auth-gate::after { color: rgba(37,49,88,.075); }
.auth-loading-card,
.auth-card {
  border-color: rgba(48,62,107,.13);
  background: rgba(255,255,255,.88);
  box-shadow: 0 30px 90px rgba(48,70,126,.16), inset 0 1px 0 rgba(255,255,255,.95);
}
.auth-loading-card { color: #68738f; }
.auth-card::after { color: rgba(84,69,187,.055); }
.auth-spinner { border-color: rgba(48,62,107,.14); border-top-color: #6857e8; }
.auth-language { border-color: rgba(48,62,107,.12); background: rgba(238,243,255,.88); }
.auth-language button { color: #69748f; }
.auth-language button.active { color: #3d307f; background: rgba(104,87,232,.13); }
.auth-heading { color: #18213c; }
.auth-subtitle { color: #66718f; }
.auth-tabs { border-color: rgba(48,62,107,.10); background: linear-gradient(145deg, rgba(233,239,253,.86), rgba(245,248,255,.92)); }
.auth-tab { color: #69748f; }
.auth-tab.active { color: #3d307f; background: rgba(104,87,232,.13); }
.field label { color: #35405d; }
.field input,
.field select,
.field textarea { color: #18213c; background: rgba(255,255,255,.94); border-color: rgba(48,62,107,.16); }
.field-help, .auth-open-note { color: #737e99; }
.auth-open-note { border-color: rgba(48,62,107,.10); }
.auth-link { color: #5746c3; }
.auth-message.error, .admin-notice.error { color: #a43e49; background: rgba(204,66,81,.075); border-color: rgba(204,66,81,.20); }
.auth-message.success, .admin-notice.success { color: #16704f; background: rgba(22,132,92,.075); border-color: rgba(22,132,92,.20); }
.account-email { color: #35405d; }
.role-chip { color: #5b49c8; }
.admin-open, .logout-button { border-color: rgba(48,62,107,.14); background: rgba(255,255,255,.62); }
.admin-open { color: #4d3caf; border-color: rgba(104,87,232,.25); background: rgba(104,87,232,.08); }
.logout-button { color: #68738f; }
.admin-open:hover, .logout-button:hover { color: #30256f; background: rgba(104,87,232,.10); }
.admin-shell { color: #18213c; border-color: rgba(48,62,107,.13); background: rgba(255,255,255,.88); box-shadow: 0 26px 70px rgba(48,70,126,.13), inset 0 1px 0 rgba(255,255,255,.9); }
.admin-head { border-color: rgba(48,62,107,.10); background: linear-gradient(145deg, rgba(104,87,232,.09), rgba(84,195,226,.08)); }
.admin-kicker { color: #5d4bca; }
.admin-head p, .admin-section-copy { color: #66718f; }
.admin-close { color: #4f5a78; border-color: rgba(48,62,107,.14); background: rgba(255,255,255,.62); }
.admin-tabs { border-color: rgba(48,62,107,.10); }
.admin-tab { color: #717c98; }
.admin-tab.active { color: #4d3caf; }
.file-drop { background: radial-gradient(circle at 50% 0, rgba(104,87,232,.10), transparent 75%), rgba(104,87,232,.035); }
.file-drop span, .upload-progress { color: #717c98; }
.progress-track { background: rgba(48,62,107,.10); }
.data-card { border-color: rgba(48,62,107,.10); background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(244,247,255,.76)); }
.data-meta { color: #717c98; }
.data-description { color: #5f6a86; }
.compact-select { color: #26304c; background: #ffffff; border-color: rgba(48,62,107,.14); }
.empty-state { color: #717c98; border-color: rgba(48,62,107,.15); }
.loading-line { color: #717c98; }
.video-slot { border-color: rgba(48,62,107,.10); }
.lesson-video-list { background: rgba(48,62,107,.09); }
.lesson-video { color: #18213c; background: #ffffff; }
.lesson-video p { color: #66718f; }
.video-load-error { color: #a43e49; background: rgba(204,66,81,.07); }

.role-approval-queue{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}.role-approval-queue .data-controls{display:flex;gap:10px;flex-wrap:wrap}.role-approval-queue .data-card p{font-size:14px;line-height:1.6}