/* [project]/src/app/cairo_f54a18b7.module.css [app-client] (css) */
@font-face {
  font-family: cairo;
  src: url("../media/cairo_arabic.p.40_3w74kn95bo.woff2") format("woff2");
  font-display: swap;
  font-weight: 200 1000;
  font-style: normal;
}

@font-face {
  font-family: cairo;
  src: url("../media/cairo_latin_ext.p.0nlsxckj73qpt.woff2") format("woff2");
  font-display: swap;
  font-weight: 200 1000;
  font-style: normal;
}

@font-face {
  font-family: cairo;
  src: url("../media/cairo_latin.p.08tn9snzkmifr.woff2") format("woff2");
  font-display: swap;
  font-weight: 200 1000;
  font-style: normal;
}

.cairo_f54a18b7-module__KL-0xq__className {
  font-family: cairo, Segoe UI, Tahoma, sans-serif;
}

.cairo_f54a18b7-module__KL-0xq__variable {
  --font-cairo: "cairo", Segoe UI, Tahoma, sans-serif;
}

/* [project]/src/app/theme-tokens.css [app-client] (css) */
:root, html[data-theme="ocean"][data-color-scheme="light"] {
  --color-primary: #0e6b71;
  --color-primary-strong: #0b5559;
  --color-on-primary: #fff;
  --color-accent: #a9e2cd;
  --color-text: #102f36;
  --color-text-muted: #557078;
  --color-bg: #f5f3ec;
  --color-surface: #fffdf8;
  --color-surface-muted: #ebe8df;
  --color-line: #102f3624;
  --teal: #0e6b71;
  --color-sidebar: #102f36;
  --color-sidebar-text: #e8f4f1;
  --color-sidebar-muted: #a4c0bb;
  --color-sidebar-current: #e5f4ef;
  --color-sidebar-current-text: #123f3c;
  --color-focus: #1a8f86;
  --color-success: #1d6b45;
  --color-success-bg: #e5f6ee;
  --color-warning: #8a5a16;
  --color-warning-bg: #fff4df;
  --color-danger: #9d3b36;
  --color-danger-bg: #fdeceb;
  --color-info: #2d5f8a;
  --color-info-bg: #e8f1fa;
  --color-shadow: #102f361f;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

html[data-theme="ocean"][data-color-scheme="dark"] {
  --color-primary: #7ed8cc;
  --color-primary-strong: #b6efe6;
  --color-on-primary: #06211f;
  --color-accent: #1d4f49;
  --color-text: #e7f4f1;
  --color-text-muted: #a9c3be;
  --color-bg: #0d1b1f;
  --color-surface: #15292e;
  --color-surface-muted: #1c353b;
  --color-line: #2d4a4f;
  --color-sidebar: #091417;
  --color-sidebar-text: #e7f4f1;
  --color-sidebar-muted: #8eada8;
  --color-sidebar-current: #1b4b46;
  --color-sidebar-current-text: #dffaf4;
  --color-focus: #8ee6db;
  --color-success: #8ed7b0;
  --color-success-bg: #16382a;
  --color-warning: #f0cc8a;
  --color-warning-bg: #3a2d14;
  --color-danger: #ffb1ab;
  --color-danger-bg: #3d201e;
  --color-info: #b7d4f5;
  --color-info-bg: #1a3148;
  --color-shadow: #00000059;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

html[data-theme="modern-blue"][data-color-scheme="light"] {
  --color-primary: #1d4e89;
  --color-primary-strong: #163e6d;
  --color-on-primary: #fff;
  --color-accent: #c5d8f5;
  --color-text: #152033;
  --color-text-muted: #52627a;
  --color-bg: #f4f7fb;
  --color-surface: #fff;
  --color-surface-muted: #eef3fa;
  --color-line: #d5dfec;
  --color-sidebar: #142033;
  --color-sidebar-text: #e7eef8;
  --color-sidebar-muted: #a9b8cc;
  --color-sidebar-current: #e7eefb;
  --color-sidebar-current-text: #163e6d;
  --color-focus: #2f6fbe;
  --color-success: #1d6b45;
  --color-success-bg: #e5f6ee;
  --color-warning: #8a5a16;
  --color-warning-bg: #fff4df;
  --color-danger: #9d3b36;
  --color-danger-bg: #fdeceb;
  --color-info: #1d4e89;
  --color-info-bg: #e8f1fa;
  --color-shadow: #1420331f;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

html[data-theme="modern-blue"][data-color-scheme="dark"] {
  --color-primary: #9cc2ff;
  --color-primary-strong: #d3e4ff;
  --color-on-primary: #0c1730;
  --color-accent: #243e66;
  --color-text: #e8eef8;
  --color-text-muted: #b0c0d6;
  --color-bg: #0e1624;
  --color-surface: #172236;
  --color-surface-muted: #20304a;
  --color-line: #314864;
  --color-sidebar: #0a1220;
  --color-sidebar-text: #e8eef8;
  --color-sidebar-muted: #96aac6;
  --color-sidebar-current: #243e66;
  --color-sidebar-current-text: #e7f0ff;
  --color-focus: #b9d4ff;
  --color-success: #8ed7b0;
  --color-success-bg: #16382a;
  --color-warning: #f0cc8a;
  --color-warning-bg: #3a2d14;
  --color-danger: #ffb1ab;
  --color-danger-bg: #3d201e;
  --color-info: #b7d4f5;
  --color-info-bg: #1a3148;
  --color-shadow: #00000059;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

html[data-theme="emerald"][data-color-scheme="light"] {
  --color-primary: #0f7a4b;
  --color-primary-strong: #0c613c;
  --color-on-primary: #fff;
  --color-accent: #b7e4cb;
  --color-text: #12281c;
  --color-text-muted: #4d6b5a;
  --color-bg: #f3f7f4;
  --color-surface: #fff;
  --color-surface-muted: #eef6f1;
  --color-line: #d3e5da;
  --color-sidebar: #123024;
  --color-sidebar-text: #e7f6ee;
  --color-sidebar-muted: #a3c4b2;
  --color-sidebar-current: #e5f6ec;
  --color-sidebar-current-text: #0c613c;
  --color-focus: #1a9a60;
  --color-success: #0f7a4b;
  --color-success-bg: #e5f6ee;
  --color-warning: #8a5a16;
  --color-warning-bg: #fff4df;
  --color-danger: #9d3b36;
  --color-danger-bg: #fdeceb;
  --color-info: #1d4e89;
  --color-info-bg: #e8f1fa;
  --color-shadow: #12281c1f;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

html[data-theme="emerald"][data-color-scheme="dark"] {
  --color-primary: #8ee0b4;
  --color-primary-strong: #c8f5dd;
  --color-on-primary: #062114;
  --color-accent: #1d4a32;
  --color-text: #e7f6ee;
  --color-text-muted: #a9cbb8;
  --color-bg: #0e1a14;
  --color-surface: #173026;
  --color-surface-muted: #1e3d2e;
  --color-line: #2d5340;
  --color-sidebar: #09140f;
  --color-sidebar-text: #e7f6ee;
  --color-sidebar-muted: #8fb5a0;
  --color-sidebar-current: #1d4a32;
  --color-sidebar-current-text: #e5fff2;
  --color-focus: #b6f0d0;
  --color-success: #8ee0b4;
  --color-success-bg: #16382a;
  --color-warning: #f0cc8a;
  --color-warning-bg: #3a2d14;
  --color-danger: #ffb1ab;
  --color-danger-bg: #3d201e;
  --color-info: #b7d4f5;
  --color-info-bg: #1a3148;
  --color-shadow: #00000059;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

html[data-theme="royal-purple"][data-color-scheme="light"] {
  --color-primary: #5b3d8f;
  --color-primary-strong: #472f72;
  --color-on-primary: #fff;
  --color-accent: #ddd0f5;
  --color-text: #241833;
  --color-text-muted: #64577a;
  --color-bg: #f6f4fa;
  --color-surface: #fff;
  --color-surface-muted: #f3eef8;
  --color-line: #e0d7ee;
  --color-sidebar: #241833;
  --color-sidebar-text: #f4eefc;
  --color-sidebar-muted: #c3b4d8;
  --color-sidebar-current: #f1eafa;
  --color-sidebar-current-text: #472f72;
  --color-focus: #7a57c2;
  --color-success: #1d6b45;
  --color-success-bg: #e5f6ee;
  --color-warning: #8a5a16;
  --color-warning-bg: #fff4df;
  --color-danger: #9d3b36;
  --color-danger-bg: #fdeceb;
  --color-info: #2d5f8a;
  --color-info-bg: #e8f1fa;
  --color-shadow: #2418331f;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

html[data-theme="royal-purple"][data-color-scheme="dark"] {
  --color-primary: #d4bcff;
  --color-primary-strong: #eadfff;
  --color-on-primary: #1a1028;
  --color-accent: #42305f;
  --color-text: #f4eefc;
  --color-text-muted: #cbbde0;
  --color-bg: #16121c;
  --color-surface: #241c30;
  --color-surface-muted: #312542;
  --color-line: #4a3b62;
  --color-sidebar: #100c16;
  --color-sidebar-text: #f4eefc;
  --color-sidebar-muted: #b7a6d0;
  --color-sidebar-current: #42305f;
  --color-sidebar-current-text: #f6efff;
  --color-focus: #e4d4ff;
  --color-success: #8ed7b0;
  --color-success-bg: #16382a;
  --color-warning: #f0cc8a;
  --color-warning-bg: #3a2d14;
  --color-danger: #ffb1ab;
  --color-danger-bg: #3d201e;
  --color-info: #b7d4f5;
  --color-info-bg: #1a3148;
  --color-shadow: #00000059;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

html[data-theme="minimal"][data-color-scheme="light"] {
  --color-primary: #2f2f2f;
  --color-primary-strong: #1a1a1a;
  --color-on-primary: #fff;
  --color-accent: #e4e4e0;
  --color-text: #1a1a1a;
  --color-text-muted: #5e5e5a;
  --color-bg: #f7f7f5;
  --color-surface: #fff;
  --color-surface-muted: #f1f1ee;
  --color-line: #e0e0db;
  --color-sidebar: #1f1f1f;
  --color-sidebar-text: #f5f5f2;
  --color-sidebar-muted: #bdbdb8;
  --color-sidebar-current: #f3f3f0;
  --color-sidebar-current-text: #1a1a1a;
  --color-focus: #4a4a4a;
  --color-success: #1d6b45;
  --color-success-bg: #e5f6ee;
  --color-warning: #8a5a16;
  --color-warning-bg: #fff4df;
  --color-danger: #9d3b36;
  --color-danger-bg: #fdeceb;
  --color-info: #2d5f8a;
  --color-info-bg: #e8f1fa;
  --color-shadow: #1a1a1a1a;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

html[data-theme="minimal"][data-color-scheme="dark"] {
  --color-primary: #f0f0ec;
  --color-primary-strong: #fff;
  --color-on-primary: #161616;
  --color-accent: #3a3a3a;
  --color-text: #f5f5f2;
  --color-text-muted: #c2c2bc;
  --color-bg: #141414;
  --color-surface: #1e1e1e;
  --color-surface-muted: #2a2a2a;
  --color-line: #3d3d3d;
  --color-sidebar: #101010;
  --color-sidebar-text: #f5f5f2;
  --color-sidebar-muted: #b0b0aa;
  --color-sidebar-current: #333330;
  --color-sidebar-current-text: #fff;
  --color-focus: #fff;
  --color-success: #8ed7b0;
  --color-success-bg: #16382a;
  --color-warning: #f0cc8a;
  --color-warning-bg: #3a2d14;
  --color-danger: #ffb1ab;
  --color-danger-bg: #3d201e;
  --color-info: #b7d4f5;
  --color-info-bg: #1a3148;
  --color-shadow: #0006;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

:root {
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --teal: var(--color-primary);
  --mint: var(--color-accent);
  --paper: var(--color-bg);
  --white: var(--color-surface);
  --line: var(--color-line);
  --font-sans: "Segoe UI", Tahoma, Arial, sans-serif;
}

/* [project]/src/app/globals.css [app-client] (css) */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-cairo), var(--font-sans);
  margin: 0;
}

button, input, select, a {
  font: inherit;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.hero {
  background: radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--color-accent) 55%, transparent), transparent 32%),
    linear-gradient(145deg, var(--color-bg) 0%, var(--color-surface-muted) 100%);
  min-height: 720px;
  padding: 28px clamp(24px, 6vw, 88px) 80px;
}

.nav {
  direction: rtl;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.brand {
  color: var(--ink);
  align-items: center;
  gap: 12px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.brandMark {
  background: var(--color-primary);
  width: 38px;
  height: 38px;
  color: var(--color-on-primary);
  border-radius: 12px;
  place-items: center;
  display: grid;
}

.navActions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.phase {
  border: 1px solid var(--line);
  min-height: 44px;
  color: var(--muted);
  background: var(--color-surface);
  direction: rtl;
  border-radius: 100px;
  align-items: center;
  padding: 8px 14px;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
}

.heroGrid {
  grid-template-columns: 1.12fr .88fr;
  align-items: center;
  gap: clamp(44px, 7vw, 110px);
  max-width: 1240px;
  margin: 110px auto 0;
  display: grid;
}

.eyebrow, .sectionLabel {
  color: var(--teal);
  letter-spacing: .08em;
  font-size: 14px;
  font-weight: 800;
}

h1 {
  letter-spacing: -.045em;
  margin: 15px 0 22px;
  font-size: clamp(48px, 6.6vw, 88px);
  line-height: 1.1;
}

.lead {
  max-width: 650px;
  color: var(--muted);
  margin: 0 0 32px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.9;
}

.statusButton {
  background: var(--ink);
  min-height: 48px;
  color: var(--color-on-primary);
  cursor: pointer;
  border: 0;
  border-radius: 14px;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  transition: transform .2s, background .2s;
  display: inline-flex;
}

.statusButton:hover {
  transform: translateY(-2px);
}

.statusButton.online {
  background: var(--color-success);
}

.statusButton.offline {
  background: var(--color-danger);
}

.statusDot {
  background: var(--mint);
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: 50%;
}

.architecture {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  box-shadow: 0 24px 60px var(--color-shadow);
  direction: rtl;
  border-radius: 32px;
  padding: 32px;
}

.archNode {
  border: 1px solid var(--line);
  background: var(--color-surface-muted);
  color: var(--color-text);
  text-align: center;
  border-radius: 18px;
  padding: 21px 18px;
  font-weight: 800;
}

.archNode small {
  color: var(--muted);
  margin-top: 5px;
  font-weight: 500;
  display: block;
}

.archNode.primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.archNode.primary small {
  color: color-mix(in srgb, var(--color-on-primary) 82%, transparent);
}

.archNode.muted {
  background: none;
  border-style: dashed;
}

.archNode.database {
  background: var(--color-success-bg);
}

.archRow {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  display: grid;
}

.connector {
  background: var(--line);
  width: 1px;
  height: 32px;
  margin: 0 auto;
}

.content {
  max-width: 1240px;
  margin: 0 auto;
  padding: 100px clamp(24px, 6vw, 88px) 120px;
}

h2 {
  letter-spacing: -.025em;
  max-width: 760px;
  margin: 10px 0 48px;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.3;
}

.cards {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  display: grid;
}

.card {
  border: 1px solid var(--line);
  background: var(--color-surface);
  min-height: 250px;
  color: var(--color-text);
  border-radius: 22px;
  padding: 26px;
}

.card > span {
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
}

.card h3 {
  margin: 42px 0 12px;
  font-size: 23px;
}

.card p {
  color: var(--muted);
  margin: 0;
  line-height: 1.8;
}

.note {
  border-right: 4px solid var(--teal);
  background: var(--color-surface-muted);
  color: var(--color-text);
  align-items: baseline;
  gap: 24px;
  margin-top: 42px;
  padding: 24px 28px;
  display: flex;
}

.note p {
  color: var(--muted);
  margin: 0;
}

.adminShell {
  background: var(--color-bg);
  min-height: 100vh;
  color: var(--color-text);
  padding: 24px clamp(20px, 5vw, 72px) 52px;
}

.adminHeader {
  direction: rtl;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
}

.quietButton {
  border: 1px solid var(--line);
  background: var(--color-surface);
  color: var(--ink);
  cursor: pointer;
  border-radius: 12px;
  padding: 10px 16px;
}

.adminIntro {
  max-width: 1280px;
  margin: 70px auto 32px;
}

.adminIntro h1 {
  margin: 8px 0;
  font-size: clamp(38px, 5vw, 62px);
}

.adminIntro > p:last-child {
  max-width: 780px;
  color: var(--muted);
  line-height: 1.8;
}

.panel {
  border: 1px solid var(--line);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 14px 38px var(--color-shadow);
  border-radius: 22px;
  padding: 26px;
}

.loginPanel {
  max-width: 520px;
  margin: 36px auto;
}

.panel h2 {
  margin: 8px 0 22px;
  font-size: 28px;
}

.stackForm {
  gap: 16px;
  display: grid;
}

.stackForm label, .scopeControls label {
  color: var(--muted);
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  display: grid;
}

.stackForm input, .stackForm select, .scopeControls input, .scopeControls select {
  border: 1px solid var(--line);
  background: var(--color-surface);
  width: 100%;
  min-width: 0;
  min-height: 44px;
  color: var(--ink);
  border-radius: 11px;
  padding: 9px 12px;
}

.primaryButton {
  background: var(--ink);
  min-height: 46px;
  color: var(--color-on-primary);
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 700;
}

.primaryButton:disabled, .revokeButton:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.notice {
  border-radius: 12px;
  max-width: 1280px;
  margin: 16px auto;
  padding: 14px 18px;
}

.notice.success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.notice.error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.sessionPanel {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  max-width: 1280px;
  margin: 18px auto;
  display: flex;
}

.sessionPanel > div:first-child {
  gap: 7px;
  display: grid;
}

.assignmentChips {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.assignmentChips span, .countBadge {
  background: var(--color-line);
  color: var(--teal);
  border-radius: 100px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 700;
}

.scopePanel {
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: 22px;
  max-width: 1280px;
  margin: 18px auto;
  display: grid;
}

.scopePanel h2 {
  margin-bottom: 0;
}

.scopeControls {
  align-items: end;
  gap: 12px;
  display: flex;
}

.scopeControls label {
  flex: 0 0 180px;
}

.scopeControls .scopeIdField {
  flex: 280px;
}

.scopeHint {
  color: var(--muted);
  padding-bottom: 12px;
  font-size: 13px;
}

.adminGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
  max-width: 1280px;
  margin: 18px auto;
  display: grid;
}

.permissionPicker {
  border: 1px solid var(--line);
  border-radius: 13px;
  max-height: 330px;
  padding: 14px;
  overflow: auto;
}

.permissionPicker legend {
  color: var(--muted);
  padding: 0 7px;
  font-size: 13px;
}

.permissionGroup {
  border-bottom: 1px solid var(--line);
  padding: 11px 0;
}

.permissionGroup:last-child {
  border-bottom: 0;
}

.permissionOptions {
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 8px;
  display: flex;
}

.permissionOptions label {
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
}

.permissionOptions input {
  accent-color: var(--teal);
}

.usersPanel {
  max-width: 1280px;
  margin: 18px auto;
}

.panelHeading {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.panelHeading h2 {
  margin-bottom: 0;
}

.userList {
  margin-top: 20px;
}

.userRow {
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(180px, .7fr) 1.3fr;
  gap: 18px;
  padding: 16px 0;
  display: grid;
}

.userIdentity, .userAssignments {
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.userIdentity span, .mutedText {
  color: var(--muted);
  overflow-wrap: anywhere;
  font-size: 13px;
}

.assignmentLine {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  display: flex;
}

.revokeButton {
  border: 1px solid var(--color-danger-bg);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 9px;
}

.emptyState {
  color: var(--muted);
}

.adminFooter {
  max-width: 1280px;
  color: var(--muted);
  margin: 28px auto 0;
  font-size: 13px;
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
  }

  .heroGrid {
    grid-template-columns: 1fr;
    margin-top: 72px;
  }

  .cards {
    grid-template-columns: 1fr 1fr;
  }

  .scopePanel, .adminGrid {
    grid-template-columns: 1fr;
  }

  .scopeControls {
    flex-direction: column;
    align-items: stretch;
  }

  .scopeControls label, .scopeControls .scopeIdField {
    flex-basis: auto;
  }
}

@media (max-width: 560px) {
  .brand span:last-child {
    display: none;
  }

  .hero {
    padding-inline: 20px;
  }

  .heroGrid {
    margin-top: 64px;
  }

  h1 {
    font-size: 46px;
  }

  .architecture {
    padding: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .note {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .sessionPanel, .panelHeading {
    flex-direction: column;
    align-items: flex-start;
  }

  .userRow {
    grid-template-columns: 1fr;
  }
}

.adminAppShell {
  --admin-ink: var(--color-text);
  --admin-muted: var(--color-text-muted);
  --admin-line: var(--color-line);
  --admin-paper: var(--color-bg);
  --admin-card: var(--color-surface);
  --admin-accent: var(--color-primary);
  --admin-accent-dark: var(--color-primary);
  --admin-sidebar: var(--color-text);
  background: var(--admin-paper);
  min-height: 100vh;
  color: var(--admin-ink);
  direction: rtl;
  grid-template-columns: 264px minmax(0, 1fr);
  display: grid;
}

.adminAppShell button, .adminAppShell input, .adminAppShell select {
  font: inherit;
}

.adminAppShell button:focus-visible, .adminAppShell input:focus-visible, .adminAppShell select:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.adminSidebar {
  background: var(--admin-sidebar);
  width: 264px;
  height: 100vh;
  color: var(--color-sidebar-text);
  flex-direction: column;
  grid-column: 1;
  padding: 22px 15px 16px;
  display: flex;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.adminBrand {
  min-height: 54px;
  color: inherit;
  align-items: center;
  gap: 11px;
  padding: 2px 7px;
  text-decoration: none;
  display: flex;
}

.brandEmblem {
  background: var(--color-primary);
  width: 42px;
  height: 42px;
  color: var(--color-sidebar-text);
  border: 1px solid #fff3;
  border-radius: 14px;
  place-items: center;
  font-size: 20px;
  font-weight: 800;
  display: grid;
}

.brandCopy {
  gap: 4px;
  display: grid;
}

.brandCopy strong {
  letter-spacing: -.02em;
  font-size: 15px;
}

.brandCopy small {
  color: var(--color-sidebar-muted);
  font-size: 11px;
}

.sidebarDivider {
  background: #e2f4f01f;
  height: 1px;
  margin: 20px 7px 16px;
}

.adminNavigation {
  gap: 14px;
  display: grid;
}

.navGroup {
  gap: 4px;
  display: grid;
}

.navGroupLabel {
  color: var(--color-sidebar-muted);
  letter-spacing: .08em;
  padding: 2px 11px 6px;
  font-size: 10px;
  font-weight: 800;
}

.navItem {
  width: 100%;
  min-height: 39px;
  color: var(--color-sidebar-text);
  text-align: right;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  transition: background .18s, color .18s;
  display: flex;
}

.navItem:hover:not(:disabled) {
  color: var(--color-on-primary);
  background: #ffffff14;
}

.navItem.current {
  background: var(--color-line);
  color: var(--color-sidebar-current-text);
  font-weight: 800;
}

.navItem:disabled {
  color: var(--color-sidebar-muted);
  cursor: not-allowed;
}

.navItem.comingSoon {
  opacity: .78;
}

.navItem > span:nth-child(2) {
  white-space: nowrap;
  flex: 1;
  font-size: 12px;
}

.navItem small {
  color: var(--color-sidebar-muted);
  white-space: nowrap;
  border: 1px solid #ffffff21;
  border-radius: 20px;
  padding: 3px 6px;
  font-size: 9px;
}

.navItem.current small {
  border-color: var(--color-surface-muted);
  color: var(--color-sidebar-current-text);
}

.navIcon {
  flex: none;
  width: 17px;
  height: 17px;
}

.sidebarFoot {
  color: var(--color-sidebar-muted);
  border-top: 1px solid #e2f4f01f;
  grid-template-columns: 9px 1fr;
  align-items: center;
  gap: 0 8px;
  margin: auto 7px 0;
  padding: 15px 4px 2px;
  font-size: 11px;
  display: grid;
}

.sidebarFoot small {
  color: var(--color-sidebar-muted);
  grid-column: 2;
  margin-top: 4px;
  font-size: 10px;
}

.systemDot {
  background: var(--color-accent);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px #78d2aa21;
}

.adminWorkspace {
  grid-column: 2;
  min-width: 0;
}

.adminTopbar {
  border-bottom: 1px solid var(--color-line);
  background: #ffffffdb;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  min-height: 142px;
  padding: 24px clamp(22px, 4vw, 56px);
  display: flex;
}

.topbarHeading {
  min-width: 0;
}

.breadcrumb {
  color: var(--color-text-muted);
  align-items: center;
  gap: 9px;
  font-size: 11px;
  display: flex;
}

.breadcrumbSlash {
  color: var(--color-sidebar-muted);
}

.breadcrumb strong {
  color: var(--admin-accent-dark);
  font-weight: 800;
}

.topbarHeading h1 {
  color: var(--admin-ink);
  letter-spacing: -.04em;
  margin: 8px 0 4px;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.25;
}

.topbarHeading p {
  color: var(--admin-muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
}

.topbarActions {
  flex: none;
  align-items: center;
  gap: 17px;
  display: flex;
}

.scopePicker {
  color: var(--color-text-muted);
  gap: 5px;
  font-size: 10px;
  display: grid;
}

.scopePicker select, .roleSelect select {
  border: 1px solid var(--admin-line);
  background: var(--color-surface);
  min-width: 125px;
  min-height: 38px;
  color: var(--admin-ink);
  border-radius: 9px;
  padding: 6px 30px 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.scopeIdPicker {
  color: var(--color-text-muted);
  gap: 5px;
  font-size: 10px;
  display: grid;
}

.scopeIdPicker input {
  border: 1px solid var(--admin-line);
  background: var(--color-surface);
  width: 154px;
  min-height: 38px;
  color: var(--admin-ink);
  direction: ltr;
  border-radius: 9px;
  padding: 6px 10px;
  font-family: ui-monospace, Consolas, monospace !important;
  font-size: 10px !important;
}

.accountBadge {
  border-right: 1px solid var(--admin-line);
  align-items: center;
  gap: 9px;
  padding-right: 16px;
  display: flex;
}

.accountAvatar, .tableAvatar {
  background: var(--color-line);
  width: 35px;
  height: 35px;
  color: var(--color-primary);
  border-radius: 12px;
  flex: none;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  display: grid;
}

.accountBadge > span:last-child {
  gap: 3px;
  display: grid;
}

.accountBadge strong {
  max-width: 150px;
  color: var(--admin-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.accountBadge small {
  color: var(--admin-muted);
  font-size: 10px;
}

.logoutButton {
  border: 1px solid var(--admin-line);
  background: var(--color-surface);
  min-height: 35px;
  color: var(--color-danger);
  cursor: pointer;
  border-radius: 9px;
  padding: 0 12px;
  font-size: 11px;
}

.logoutButton:hover {
  border-color: var(--color-danger-bg);
  background: var(--color-danger-bg);
}

.secureIndicator {
  color: var(--color-text-muted);
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.secureIndicator .navIcon {
  width: 15px;
  height: 15px;
}

.adminContent {
  width: min(100%, 1450px);
  margin: 0 auto;
  padding: 27px clamp(20px, 4vw, 56px) 38px;
}

.adminNotice {
  border: 1px solid #0000;
  border-radius: 11px;
  align-items: center;
  gap: 10px;
  margin-bottom: 19px;
  padding: 12px 15px;
  font-size: 12px;
  line-height: 1.6;
  display: flex;
}

.adminNotice > span {
  background: #0000000f;
  border-radius: 50%;
  place-items: center;
  width: 20px;
  height: 20px;
  font-weight: 900;
  display: grid;
}

.adminNotice.success {
  border-color: var(--color-line);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.adminNotice.error {
  border-color: var(--color-danger-bg);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.adminFooter {
  border-top: 1px solid var(--color-line);
  color: var(--color-text-muted);
  justify-content: space-between;
  gap: 14px;
  padding: 14px clamp(20px, 4vw, 56px) 20px;
  font-size: 10px;
  display: flex;
}

.adminFooter span:first-child {
  font-weight: 800;
}

.surfaceCard {
  border: 1px solid var(--color-line);
  background: var(--admin-card);
  border-radius: 15px;
  min-width: 0;
  padding: clamp(18px, 2vw, 25px);
  box-shadow: 0 4px 15px #18393b06;
}

.dashboardView, .managementView {
  gap: 18px;
  display: grid;
}

.welcomeBanner {
  background: linear-gradient(112deg, var(--color-primary), var(--color-primary) 77%, var(--color-primary));
  min-height: 142px;
  color: var(--color-on-primary);
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 25px 28px;
  display: flex;
  overflow: hidden;
}

.welcomeEyebrow {
  color: var(--color-accent);
  letter-spacing: .07em;
  font-size: 10px;
  font-weight: 800;
}

.welcomeBanner h2 {
  margin: 9px 0 5px;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.35;
}

.welcomeBanner p {
  color: var(--color-surface-muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
}

.bannerSeal {
  width: 82px;
  height: 82px;
  color: var(--color-sidebar-text);
  background: #ffffff17;
  border: 1px solid #ffffff30;
  border-radius: 26px;
  place-items: center;
  display: grid;
  transform: rotate(-7deg);
}

.bannerSeal .navIcon {
  width: 38px;
  height: 38px;
}

.metricGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.metricCard {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 14px;
  align-items: center;
  gap: 14px;
  min-height: 105px;
  padding: 18px;
  display: flex;
}

.metricGlyph {
  border-radius: 13px;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
}

.metricGlyph .navIcon {
  width: 20px;
  height: 20px;
}

.metricGlyph.blue {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.metricGlyph.green {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.metricGlyph.amber {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.metricCard > div {
  gap: 2px;
  display: grid;
}

.metricCard small {
  color: var(--color-text-muted);
  font-size: 11px;
}

.metricCard strong {
  color: var(--color-text);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.15;
}

.metricCard span:not(.metricGlyph) {
  color: var(--color-text-muted);
  font-size: 9px;
}

.dashboardColumns {
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  display: grid;
}

.surfaceHeading {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  display: flex;
}

.surfaceHeading h2, .surfaceHeading h3 {
  color: var(--admin-ink);
  letter-spacing: -.025em;
  margin: 5px 0 0;
  font-size: 19px;
}

.surfaceHeading p {
  color: var(--admin-muted);
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.8;
}

.sectionKicker {
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
}

.scopePill, .rowCount, .readOnlyTag {
  background: var(--color-line);
  color: var(--color-primary);
  white-space: nowrap;
  border-radius: 30px;
  align-items: center;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.dashboardScope > p {
  color: var(--color-text-muted);
  margin: 16px 0;
  font-size: 11px;
  line-height: 1.9;
}

.scopeSummary {
  border-top: 1px solid var(--color-bg);
  gap: 6px;
  padding-top: 13px;
  display: grid;
}

.scopeSummary span {
  color: var(--color-text-muted);
  font-size: 10px;
}

.scopeSummary strong {
  color: var(--color-text);
  font-size: 12px;
}

.quickActions .surfaceHeading {
  margin-bottom: 8px;
}

.quickActions > button {
  border: 0;
  border-top: 1px solid var(--color-bg);
  width: 100%;
  color: var(--color-text);
  text-align: right;
  cursor: pointer;
  background: none;
  align-items: center;
  gap: 11px;
  padding: 11px 4px;
  display: flex;
}

.quickActions > button > .navIcon {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

.quickActions > button > span {
  flex: 1;
  gap: 3px;
  display: grid;
}

.quickActions > button strong {
  font-size: 11px;
}

.quickActions > button small {
  color: var(--color-text-muted);
  font-size: 9px;
}

.quickActions > button b {
  color: var(--color-text-muted);
  font-size: 14px;
}

.scopeFootnote {
  border: 1px dashed var(--color-line);
  color: var(--color-text-muted);
  border-radius: 11px;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  font-size: 10px;
  line-height: 1.7;
  display: flex;
}

.scopeFootnote .navIcon {
  width: 15px;
  height: 15px;
  color: var(--color-text-muted);
}

.createCard, .dataCard {
  gap: 16px;
  display: grid;
}

.createCard > .surfaceHeading {
  margin-bottom: 0;
}

.cardOrdinal {
  color: var(--color-surface-muted);
  font-size: 28px;
  font-weight: 300;
}

.adminForm {
  gap: 14px;
  display: grid;
}

.adminForm label, .roleSelect {
  color: var(--color-text-muted);
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.adminForm input, .adminForm select {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  width: 100%;
  min-width: 0;
  min-height: 42px;
  color: var(--color-text);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 500;
}

.adminForm input::placeholder {
  color: var(--color-surface-muted);
}

.adminForm label small {
  color: var(--color-text-muted);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.7;
}

.formGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fullField {
  grid-column: 1 / -1;
}

.optionalLabel {
  color: var(--color-text-muted);
  margin-right: 4px;
  font-size: 9px;
  font-weight: 500;
  display: inline;
}

.formActions {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 5px;
  display: flex;
}

.formActions > span {
  color: var(--color-text-muted);
  font-size: 10px;
}

.actionButton {
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 41px;
  padding: 0 15px;
  font-size: 11px;
  font-weight: 800;
  transition: transform .15s, background .15s;
  display: inline-flex;
}

.actionButton:hover:not(:disabled) {
  transform: translateY(-1px);
}

.actionButton:disabled {
  opacity: .54;
  cursor: not-allowed;
}

.primaryAction {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.primaryAction:hover:not(:disabled) {
  background: var(--color-primary);
}

.primaryAction span {
  font-size: 15px;
}

.dataTableWrap, .matrixViewport {
  overscroll-behavior-inline: contain;
  max-width: 100%;
  overflow-x: auto;
}

.dataTable, .capabilityMatrix {
  border-collapse: separate;
  border-spacing: 0;
  text-align: right;
  width: 100%;
}

.dataTable {
  min-width: 730px;
}

.dataTable th {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: 11px 12px;
  font-size: 10px;
  font-weight: 800;
}

.dataTable th:first-child {
  border-radius: 0 9px 0 0;
}

.dataTable th:last-child {
  border-radius: 9px 0 0;
}

.dataTable td {
  border-bottom: 1px solid var(--color-bg);
  color: var(--color-text-muted);
  padding: 12px;
  font-size: 10px;
}

.tableIdentity {
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.tableAvatar {
  border-radius: 10px;
  width: 29px;
  height: 29px;
  font-size: 11px;
}

.tableAvatar .navIcon {
  width: 15px;
  height: 15px;
}

.tableIdentity strong {
  color: var(--color-text);
  font-size: 11px;
}

.usernameCell {
  color: var(--color-text-muted) !important;
  font-size: 11px !important;
}

.mutedValue {
  color: var(--color-text-muted);
}

.rolePills {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.rolePills span {
  background: var(--color-line);
  color: var(--color-text-muted);
  white-space: nowrap;
  border-radius: 20px;
  padding: 4px 6px;
  font-size: 9px;
}

.activeBadge {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-radius: 20px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 800;
}

.emptyPanel {
  border: 1px dashed var(--color-line);
  text-align: center;
  border-radius: 12px;
  justify-items: center;
  gap: 9px;
  padding: 35px 15px;
  display: grid;
}

.emptyPanel > .navIcon {
  width: 25px;
  height: 25px;
  color: var(--color-text-muted);
}

.emptyPanel strong {
  color: var(--color-text-muted);
  font-size: 12px;
}

.emptyPanel span {
  max-width: 440px;
  color: var(--color-text-muted);
  font-size: 10px;
  line-height: 1.8;
}

.permissionNotice {
  border-color: var(--color-line);
  background: var(--color-surface);
  align-items: center;
  gap: 14px;
  display: flex;
}

.permissionNotice > .navIcon {
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
}

.permissionNotice h2 {
  color: var(--color-text);
  margin: 0 0 5px;
  font-size: 16px;
}

.permissionNotice p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 11px;
}

.roleNameRow {
  align-items: end;
  gap: 18px;
  display: flex;
}

.roleNameRow > label {
  flex: 1;
}

.scopeContext {
  background: var(--color-line);
  min-height: 42px;
  color: var(--color-text-muted);
  white-space: nowrap;
  border-radius: 9px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
}

.scopeContext .navIcon {
  width: 15px;
  height: 15px;
}

.matrixHeading {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 7px;
  display: flex;
}

.matrixHeading h3 {
  color: var(--color-text);
  margin: 0;
  font-size: 13px;
}

.matrixHeading p {
  color: var(--color-text-muted);
  margin: 4px 0 0;
  font-size: 9px;
}

.matrixHeading > span {
  color: var(--color-text-muted);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
}

.capabilityMatrix {
  border: 1px solid var(--color-line);
  border-radius: 11px;
  min-width: 800px;
  overflow: hidden;
}

.capabilityMatrix th, .capabilityMatrix td {
  border-bottom: 1px solid var(--color-bg);
  border-left: 1px solid var(--color-bg);
}

.capabilityMatrix tr:last-child th, .capabilityMatrix tr:last-child td {
  border-bottom: 0;
}

.capabilityMatrix th:last-child, .capabilityMatrix td:last-child {
  border-left: 0;
}

.capabilityMatrix thead th {
  background: var(--color-surface);
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
  padding: 10px 8px;
  font-size: 10px;
  font-weight: 800;
}

.capabilityMatrix thead th:first-child {
  text-align: right;
  min-width: 178px;
  padding-right: 14px;
}

.capabilityMatrix tbody th {
  background: var(--color-surface);
  min-width: 178px;
  color: var(--color-text);
  padding: 9px 14px;
  font-size: 10px;
  font-weight: 800;
}

.capabilityMatrix tbody th span, .capabilityMatrix tbody th small {
  display: block;
}

.capabilityMatrix tbody th small {
  color: var(--color-text-muted);
  margin-top: 3px;
  font-size: 8px;
  font-weight: 500;
}

.capabilityMatrix td {
  background: var(--color-surface);
  text-align: center;
  min-width: 66px;
  padding: 6px;
}

.matrixCheck {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  margin: 0 auto;
  display: inline-flex !important;
}

.matrixCheck input {
  opacity: 0;
  height: 1px;
  position: absolute;
  width: 1px !important;
}

.matrixCheck > span {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  width: 20px;
  height: 20px;
  color: var(--color-on-primary);
  border-radius: 6px;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  display: grid;
}

.matrixCheck input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.matrixCheck input:focus-visible + span {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.matrixCheck.unavailable {
  cursor: not-allowed;
  opacity: .4;
}

.matrixMark {
  border-radius: 6px;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 10px;
  font-weight: 900;
  display: inline-grid;
}

.matrixMark.granted {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.matrixMark.notGranted {
  color: var(--color-surface-muted);
}

.roleCardGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.roleCard {
  border: 1px solid var(--color-line);
  border-radius: 11px;
  grid-template-columns: 37px minmax(0, 1fr);
  align-items: center;
  gap: 0 10px;
  padding: 12px;
  display: grid;
}

.roleCardIcon {
  background: var(--color-line);
  width: 35px;
  height: 35px;
  color: var(--color-primary);
  border-radius: 11px;
  grid-row: span 2;
  place-items: center;
  display: grid;
}

.roleCardIcon .navIcon {
  width: 18px;
  height: 18px;
}

.roleCard h3 {
  color: var(--color-text);
  margin: 0;
  font-size: 11px;
}

.roleCard p {
  color: var(--color-text-muted);
  margin: 3px 0 0;
  font-size: 9px;
}

.roleCard > button {
  color: var(--color-primary);
  cursor: pointer;
  background: none;
  border: 0;
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
  padding: 0;
  font-size: 9px;
  font-weight: 800;
}

.roleSelect {
  min-width: 190px;
}

.matrixRoleInfo {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 11px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.matrixRoleInfo .roleCardIcon {
  flex: none;
}

.matrixRoleInfo > div {
  flex: 1;
  gap: 4px;
  display: grid;
}

.matrixRoleInfo strong {
  color: var(--color-text);
  font-size: 11px;
}

.matrixRoleInfo small {
  color: var(--color-text-muted);
  font-size: 9px;
}

.readOnlyTag {
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.readOnlyNote {
  border-right: 2px solid var(--color-line);
  color: var(--color-text-muted);
  margin: -4px 0 0;
  padding: 10px 12px;
  font-size: 9px;
  line-height: 1.8;
}

.assignmentForm {
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
}

.assignmentForm .actionButton {
  min-width: 132px;
}

.assignmentList {
  gap: 7px;
  display: grid;
}

.assignmentCard {
  border: 1px solid var(--color-line);
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  display: flex;
}

.assignmentIdentity {
  flex: 1;
  gap: 3px;
  min-width: 100px;
  display: grid;
}

.assignmentIdentity strong {
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.assignmentIdentity small {
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  font-size: 9px;
  overflow: hidden;
}

.assignmentRole {
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 800;
}

.revokeButton {
  border: 1px solid var(--color-danger-bg);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  cursor: pointer;
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 9px;
}

.developmentCard {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 17px;
  align-content: center;
  justify-items: start;
  gap: 13px;
  max-width: 690px;
  min-height: 320px;
  margin: 10px auto;
  padding: clamp(24px, 5vw, 48px);
  display: grid;
  box-shadow: 0 8px 26px #18393b0a;
}

.developmentIcon {
  background: var(--color-line);
  width: 55px;
  height: 55px;
  color: var(--color-primary);
  border-radius: 17px;
  place-items: center;
  display: grid;
}

.developmentIcon .navIcon {
  width: 25px;
  height: 25px;
}

.developmentTag {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-radius: 20px;
  padding: 5px 9px;
  font-size: 9px;
  font-weight: 800;
}

.developmentCard h2 {
  color: var(--color-text);
  margin: 0;
  font-size: 23px;
}

.developmentCard p {
  max-width: 530px;
  color: var(--color-text-muted);
  margin: 0;
  font-size: 12px;
  line-height: 2;
}

.developmentScope {
  border-top: 1px solid var(--color-bg);
  color: var(--color-text-muted);
  padding-top: 12px;
  font-size: 10px;
}

.sessionRestore {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 17px;
  justify-items: start;
  gap: 12px;
  max-width: 560px;
  margin: 28px auto;
  padding: clamp(22px, 4vw, 36px);
  display: grid;
  box-shadow: 0 16px 45px #20413f0f;
}

.sessionRestore h2 {
  color: var(--color-text);
  margin: 0;
  font-size: 23px;
}

.sessionRestore p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
}

.loginStage {
  grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr);
  align-items: center;
  gap: clamp(24px, 5vw, 68px);
  max-width: 1010px;
  min-height: calc(100vh - 220px);
  margin: 0 auto;
  padding: 18px 0;
  display: grid;
}

.loginWelcome {
  max-width: 490px;
  padding: 20px 4px;
}

.loginWelcome h2 {
  color: var(--color-text);
  letter-spacing: -.04em;
  margin: 14px 0;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.4;
}

.loginWelcome h2 em {
  color: var(--color-primary);
  font-style: normal;
}

.loginWelcome > p {
  max-width: 420px;
  color: var(--color-text-muted);
  margin: 0;
  font-size: 13px;
  line-height: 2.1;
}

.welcomeFoot {
  color: var(--color-text-muted);
  align-items: center;
  gap: 8px;
  margin-top: 27px;
  font-size: 10px;
  display: flex;
}

.welcomeFoot .navIcon {
  width: 16px;
  height: 16px;
}

.loginCard {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 17px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 16px 45px #20413f0f;
}

.loginCardMark {
  background: var(--color-line);
  width: 43px;
  height: 43px;
  color: var(--color-text-muted);
  border-radius: 13px;
  place-items: center;
  display: grid;
}

.loginCardMark .navIcon {
  width: 21px;
  height: 21px;
}

.loginCardHeading {
  margin: 20px 0 22px;
}

.loginCardHeading > span {
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
}

.loginCardHeading h2 {
  color: var(--color-text);
  margin: 6px 0;
  font-size: 23px;
}

.loginCardHeading p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 10px;
}

.loginCard .adminForm {
  gap: 15px;
}

.loginCard .adminForm label {
  color: var(--color-text-muted);
}

.loginCard .actionButton {
  justify-content: space-between;
  margin-top: 5px;
}

.loginSecurity {
  color: var(--color-text-muted);
  align-items: center;
  gap: 6px;
  margin: 17px 0 0;
  font-size: 9px;
  display: flex;
}

.loginSecurity .navIcon {
  width: 13px;
  height: 13px;
}

.sidebarBrandRow {
  align-items: center;
  gap: 4px;
  display: flex;
}

.sidebarBrandRow .adminBrand {
  flex: 1;
  min-width: 0;
}

.sidebarCollapseButton {
  width: 30px;
  height: 30px;
  color: var(--color-sidebar-text);
  cursor: pointer;
  background: #ffffff0d;
  border: 1px solid #ffffff29;
  border-radius: 8px;
  flex: none;
  place-items: center;
  display: grid;
}

.sidebarCollapseButton:hover {
  background: #ffffff1f;
}

.adminAppShell.sidebarCollapsed {
  grid-template-columns: 76px minmax(0, 1fr);
}

.sidebarCollapsed .adminSidebar {
  width: 76px;
  padding-inline: 10px;
}

.sidebarCollapsed .sidebarBrandRow {
  flex-wrap: wrap;
  justify-content: center;
}

.sidebarCollapsed .sidebarBrandRow .adminBrand {
  flex: 0 0 100%;
  justify-content: center;
  padding-inline: 0;
}

.sidebarCollapsed .brandCopy, .sidebarCollapsed .navGroupLabel, .sidebarCollapsed .navItem > span:nth-child(2), .sidebarCollapsed .navItem small, .sidebarCollapsed .sidebarFoot > span:not(.systemDot), .sidebarCollapsed .sidebarFoot small {
  display: none;
}

.sidebarCollapsed .navItem {
  justify-content: center;
  padding-inline: 8px;
}

.sidebarCollapsed .sidebarFoot {
  grid-template-columns: 1fr;
  justify-items: center;
  margin-inline: 0;
  display: grid;
}

.sidebarCollapsed .systemDot {
  display: block;
}

.sidebarCollapsed .sidebarDivider {
  margin-inline: 2px;
}

.academicManager {
  gap: 16px;
  display: grid;
}

.academicToolbar {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 13px;
  align-items: end;
  gap: 12px;
  padding: 14px;
  display: flex;
}

.academicToolbar label {
  min-width: 135px;
  color: var(--color-text-muted);
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.academicToolbar .academicSearch {
  flex: 1;
  min-width: min(100%, 220px);
}

.academicToolbar input, .academicToolbar select {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 39px;
  color: var(--color-text);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11px;
}

.academicTableCard {
  padding: 0;
  overflow: hidden;
}

.academicTable {
  min-width: 680px;
}

.academicTable th:first-child {
  min-width: 205px;
}

.academicPrimary {
  color: var(--color-text);
  font-size: 11px;
  font-weight: 800;
  display: block;
}

.academicSecondary {
  color: var(--color-text-muted);
  margin-top: 4px;
  font-size: 9px;
  display: block;
}

.academicRowActions {
  gap: 6px;
  display: flex;
}

.academicRowActions button {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 29px;
  color: var(--color-primary);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 7px;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 800;
}

.academicRowActions button:hover:not(:disabled) {
  background: var(--color-line);
}

.academicRowActions button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.inactiveBadge {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-radius: 20px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 800;
}

.academicModalBackdrop {
  z-index: 20;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #0e272b7a;
  place-items: center;
  padding: 18px;
  display: grid;
  position: fixed;
  inset: 0;
}

.academicModal {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 16px;
  width: min(100%, 700px);
  max-height: min(90vh, 800px);
  padding: clamp(18px, 3vw, 28px);
  overflow: auto;
  box-shadow: 0 24px 80px #0c25283d;
}

.academicModal .surfaceHeading {
  align-items: flex-start;
}

.academicModal .surfaceHeading h2 {
  font-size: 20px;
}

.modalClose {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 9px;
  flex: none;
  place-items: center;
  font-size: 20px;
  display: grid;
}

.programChooser {
  border: 1px solid var(--color-line);
  border-radius: 10px;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-width: 0;
  margin: 0;
  padding: 12px;
  display: flex;
}

.programChooser legend {
  color: var(--color-text-muted);
  padding: 0 5px;
  font-size: 11px;
  font-weight: 800;
}

.programChooser legend small {
  color: var(--color-text-muted);
  margin-right: 6px;
  font-weight: 500;
}

.programChooser label {
  align-items: center;
  gap: 6px;
  font-size: 10px;
  display: flex;
}

.programChooser label input {
  width: 15px;
  min-height: 15px;
  accent-color: var(--color-primary);
}

.programChooser > p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 10px;
}

.qrManager {
  gap: 16px;
  display: grid;
}

.qrControlCard, .qrBatchCard, .qrCodeCard {
  padding: clamp(16px, 2.2vw, 24px);
}

.qrControlGrid {
  grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.3fr);
  align-items: end;
  gap: 16px;
  display: grid;
}

.qrControlGrid label, .qrBatchForm label {
  color: var(--color-text-muted);
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.qrControlGrid select, .qrBatchForm input {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 40px;
  color: var(--color-text);
  border-radius: 9px;
  padding: 8px 10px;
}

.qrBatchForm {
  align-items: end;
  gap: 10px;
  display: flex;
}

.qrBatchForm label {
  flex: 1;
}

.qrBatchForm .actionButton {
  min-height: 40px;
}

.qrTwoColumn {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 16px;
  display: grid;
}

.qrBatchList, .qrStatusList {
  gap: 9px;
  display: grid;
}

.qrBatchRow, .qrStatusRow {
  border-bottom: 1px solid var(--color-line);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  display: flex;
}

.qrBatchRow > div {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.qrBatchRow strong {
  color: var(--color-text);
  font-size: 11px;
}

.qrBatchRow span, .qrStatusRow small {
  color: var(--color-text-muted);
  font-size: 10px;
}

.qrStatusRow > div:first-child {
  align-items: center;
  gap: 9px;
  display: flex;
}

.qrStatusBadge {
  white-space: nowrap;
  border-radius: 18px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 800;
}

.qrStatusBadge.issued {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.qrStatusBadge.activated {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.qrStatusBadge.revoked {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.qrCaption {
  color: var(--color-text-muted);
  font-size: 10px;
}

.quietButton {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 32px;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 800;
}

.qrPrintSheet {
  display: none;
}

.qrStudentPage {
  background: linear-gradient(145deg, var(--color-line), var(--color-surface) 48%, var(--color-line));
  max-width: 100%;
  min-height: 100vh;
  color: var(--color-text);
  padding: 12px 12px 24px;
  font-family: inherit;
  overflow-x: clip;
}

.studentHome {
  gap: 16px;
  margin-top: 16px;
  display: grid;
}

.studentNoticeList {
  gap: 8px;
  margin: 0;
  padding-inline-start: 18px;
  display: grid;
}

.qrStudentBrand {
  align-items: center;
  gap: 11px;
  width: min(100%, 760px);
  margin: 0 auto 18px;
  display: flex;
}

.facultyIdentityMark {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: inline-flex;
}

.facultyIdentityMark img {
  object-fit: contain;
  border-radius: 10px;
  width: 32px;
  height: 32px;
}

.facultyIdentityMark span {
  display: grid;
}

.appearanceTabs {
  gap: 8px;
  margin: 0 0 16px;
  display: flex;
}

.appearanceTabs button {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 40px;
  color: var(--color-text);
  border-radius: 10px;
  padding: 0 14px;
  font-weight: 800;
}

.appearanceTabs button[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-surface);
}

.qrStudentBrand > span {
  background: var(--color-primary);
  width: 42px;
  height: 42px;
  color: var(--color-surface);
  border-radius: 14px;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
  display: grid;
}

.qrStudentBrand > div {
  gap: 3px;
  display: grid;
}

.qrStudentBrand strong {
  font-size: 14px;
}

.qrStudentBrand small {
  color: var(--color-text-muted);
  font-size: 10px;
}

.qrStudentCard {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 18px;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 28px);
  box-shadow: 0 12px 36px #31554c12;
}

.qrStudentKicker {
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 900;
}

.qrStudentCard h1 {
  color: var(--color-text);
  margin: 7px 0 3px;
  font-size: clamp(24px, 5vw, 34px);
}

.qrStudentCourseCode {
  color: var(--color-text-muted);
  text-align: right;
  direction: ltr;
  margin: 0 0 10px;
  font-size: 12px;
}

.qrStudentCardNumber {
  border: 1px solid var(--color-line);
  background: var(--color-line);
  width: fit-content;
  min-height: 42px;
  color: var(--color-text);
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
}

.qrStudentCardNumber strong {
  color: var(--color-primary);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  font-size: 20px;
}

.qrIdentityNotice {
  border: 1px solid var(--color-warning-bg);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-radius: 12px;
  margin: 16px 0;
  padding: 14px;
}

.qrIdentityNotice strong {
  font-size: 13px;
}

.qrIdentityNotice p {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.8;
}

.qrActivationForm {
  gap: 13px;
  display: grid;
}

.qrActivationForm input {
  border: 1px solid var(--color-line);
  outline-color: var(--color-primary);
  background: var(--color-surface);
  width: 100%;
  min-height: 45px;
  color: var(--color-text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}

.qrActivationForm input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px #4aa39420;
}

.qrActivationForm label small {
  color: var(--color-text-muted);
  font-weight: 500;
}

.qrPrivacyNote, .qrExamWarning {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 10px;
  line-height: 1.8;
}

.qrPrimaryButton {
  background: var(--color-primary);
  min-height: 46px;
  color: var(--color-surface);
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
}

.qrPrimaryButton:disabled {
  opacity: .6;
  cursor: wait;
}

.qrInlineError {
  color: var(--color-danger);
  margin: 0;
  font-size: 11px;
}

.qrStudentError {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-radius: 11px;
  padding: 16px;
}

.qrStudentError p {
  font-size: 12px;
}

.qrStudentError button {
  border: 1px solid var(--color-danger-bg);
  background: var(--color-surface);
  min-height: 36px;
  color: var(--color-danger);
  border-radius: 8px;
  padding: 0 12px;
  font-weight: 800;
}

.qrUnverifiedBadge {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-radius: 20px;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
}

.qrExamWarning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.qrLectures {
  margin-top: 24px;
}

.qrLectures h2 {
  color: var(--color-text);
  font-size: 18px;
}

.qrLecture {
  border-top: 1px solid var(--color-line);
  gap: 12px;
  padding: 15px 0;
  display: flex;
}

.qrLectureNumber {
  background: var(--color-line);
  width: 32px;
  height: 32px;
  color: var(--color-primary);
  border-radius: 10px;
  flex: 0 0 32px;
  place-items: center;
  font-weight: 900;
  display: grid;
}

.qrLectureBody {
  flex: 1;
  min-width: 0;
}

.qrLecture h3 {
  margin: 3px 0 6px;
  font-size: 13px;
}

.qrLecture p, .qrEmptyLectures {
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.7;
}

.qrLecture ul {
  gap: 7px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.qrLecture li {
  background: var(--color-bg);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font-size: 10px;
  display: flex;
}

.qrLecture li.qrLectureFile {
  justify-content: stretch;
  display: grid;
}

.qrLectureFileHeading {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.qrFileViewer {
  color: var(--color-primary);
  gap: 8px;
  display: grid;
}

.qrFileViewer summary {
  cursor: pointer;
  font-weight: 800;
}

.qrFileViewer iframe {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 8px;
  width: 100%;
  height: min(70vh, 720px);
}

.qrFileViewer video, .qrFileViewer img {
  object-fit: contain;
  background: #132;
  border-radius: 8px;
  width: 100%;
  max-height: 70vh;
  display: block;
}

.qrLecture li a {
  color: var(--color-primary);
  font-weight: 900;
  text-decoration: none;
}

.qrLecture li small {
  color: var(--color-text-muted);
}

.qrStudentFooter {
  width: min(100%, 760px);
  color: var(--color-text-muted);
  text-align: center;
  margin: 14px auto;
  font-size: 10px;
}

.qrStudentBrand a, .myCoursesHeading .qrPrimaryButton, .myCourseCard .qrPrimaryButton, .myCourseBack {
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  text-decoration: none;
  display: inline-flex;
}

.brandTools {
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  display: flex;
}

.qrStudentBrand a, .myCourseBack {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-primary);
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 800;
}

.brandTools a {
  margin-inline-start: 0;
}

.myCourseBack {
  margin: 0 0 8px;
  margin-inline-start: 0;
}

.myCoursesPanel {
  width: min(100%, 1040px);
}

.myCoursesPanel h1 {
  color: var(--color-text);
  letter-spacing: 0;
  margin: 0;
  font-size: 28px;
  line-height: 1.25;
}

.myCoursesHeading {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.myCoursesIntro {
  color: var(--color-text-muted);
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

.myCourseAdd {
  border: 1px solid var(--color-line);
  background: var(--color-line);
  border-radius: 12px;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  display: grid;
}

.myCourseAdd ol {
  color: var(--color-text);
  margin: 0;
  padding-inline-start: 18px;
  font-size: 13px;
  line-height: 1.7;
}

.myCourseAdd p, .myCourseAdd strong {
  margin: 0;
  font-size: 13px;
}

.myCourseAdd label {
  color: var(--color-text-muted);
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}

.myCourseAdd input {
  box-sizing: border-box;
  border: 1px solid var(--color-line);
  width: 100%;
  min-height: 42px;
  font: inherit;
  border-radius: 9px;
  padding: 8px 10px;
}

.myCoursesGrid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
  display: grid;
}

.myCourseCard {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 14px;
  align-content: start;
  gap: 6px;
  padding: 14px;
  display: grid;
}

.myCourseCard span, .myCourseCard p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 12px;
}

.myCourseCard h2 {
  color: var(--color-text);
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
}

.myCourseCard .qrPrimaryButton {
  width: 100%;
  margin-top: 6px;
}

.qrStudentLoading {
  text-align: center;
  color: var(--color-text-muted);
  padding: 18px 0;
}

.emptyPanel p {
  margin: 6px 0 0;
}

@media (max-width: 640px) {
  .myCoursesHeading {
    flex-direction: column;
    align-items: stretch;
  }

  .myCoursesHeading .qrPrimaryButton, .myCourseCard .qrPrimaryButton, .myCourseAdd .qrPrimaryButton {
    width: 100%;
  }
}

.qrActivationForm {
  gap: 12px;
  margin-top: 16px;
  display: grid;
}

.qrActivationForm label {
  color: var(--color-text-muted);
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.qrActivationForm input {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 44px;
  color: var(--color-text);
  font: inherit;
  border-radius: 9px;
  padding: 10px 12px;
}

.qrActivationForm input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.qrActivationForm .qrPrimaryButton {
  width: 100%;
}

.studyPlan {
  margin-top: 18px;
}

.studyPlanGrid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  display: grid;
}

.studyPlan article, .examList li, .examRunner section {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 12px;
  gap: 6px;
  padding: 12px;
  display: grid;
}

.examList {
  gap: 8px;
  padding: 0;
  list-style: none;
  display: grid;
}

.examList li.examRowSelected {
  border-color: var(--color-primary);
}

.examRowActions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.examRowActions .actionButton {
  min-height: 40px;
}

.examWorkspace {
  gap: 14px;
  scroll-margin-top: 12px;
  display: grid;
}

@media (max-width: 760px) {
  .examRowActions .actionButton {
    flex: calc(50% - 8px);
  }
}

.examRunner {
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  overflow-x: clip;
}

.examRunner header, .examNav {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.examRunner button, .examRunner input, .examRunner textarea {
  max-width: 100%;
}

.examRunner button {
  min-height: 44px;
}

.appUpdateBanner {
  z-index: 20;
  color: #fff;
  background: #103b46;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  display: flex;
  position: sticky;
  top: 0;
}

.examRunner label, .examRunner textarea {
  gap: 6px;
  display: grid;
}

.examRunner textarea {
  min-height: 140px;
  font: inherit;
}

@media (max-width: 640px) {
  .studyPlanGrid {
    grid-template-columns: 1fr;
  }
}

.studentManagementView .formWide {
  grid-column: 1 / -1;
}

.studentManagementView .formWide select {
  min-height: 100px;
}

@media (max-width: 760px) {
  .qrControlGrid, .qrTwoColumn {
    grid-template-columns: 1fr;
  }

  .qrBatchForm {
    flex-direction: column;
    align-items: stretch;
  }

  .qrBatchForm .actionButton {
    justify-content: center;
    width: 100%;
  }
}

.lectureManager {
  gap: 16px;
  display: grid;
}

.lectureToolbar {
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  padding: 20px;
  display: flex;
}

.lectureToolbar h2, .lectureEditor h2 {
  color: var(--color-text);
  margin: 5px 0;
  font-size: 18px;
}

.lectureToolbar p {
  color: var(--color-text-muted);
  margin: 4px 0 0;
  font-size: 10px;
}

.lectureToolbar > label {
  min-width: min(100%, 300px);
  color: var(--color-text-muted);
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.lectureToolbar select {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 39px;
  color: var(--color-text);
  border-radius: 8px;
  padding: 7px 10px;
}

.lectureEditor {
  padding: 20px;
}

.lectureToggles {
  flex-wrap: wrap;
  gap: 12px 22px;
  display: flex;
}

.lectureToggles label {
  color: var(--color-text-muted);
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
}

.lectureToggles input {
  accent-color: var(--color-primary);
}

.lectureList {
  gap: 12px;
  display: grid;
}

.lectureAdminCard {
  padding: 18px;
}

.lectureAdminHeader {
  justify-content: space-between;
  gap: 12px;
  display: flex;
}

.lectureAdminHeader h3 {
  color: var(--color-text);
  margin: 8px 0 4px;
  font-size: 15px;
}

.lectureAdminHeader p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 10px;
}

.lectureAdminMeta {
  color: var(--color-text-muted);
  gap: 14px;
  margin: 13px 0 8px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
}

.lectureFileRow {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-radius: 7px;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  font-size: 10px;
  display: flex;
}

.lectureFileRow small {
  color: var(--color-text-muted);
}

.lectureUpload {
  border: 1px dashed var(--color-surface-muted);
  color: var(--color-primary);
  border-radius: 9px;
  gap: 6px;
  margin-top: 12px;
  padding: 11px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.lectureUpload input {
  font-size: 10px;
}

.lectureUpload small {
  color: var(--color-text-muted);
  font-weight: 500;
}

@media print {
  @page {
    size: A4;
    margin: 10mm;
  }

  body:has(.qrPrintSheet) * {
    visibility: hidden !important;
  }

  :is(body:has(.qrPrintSheet) .qrPrintSheet, body:has(.qrPrintSheet) .qrPrintSheet *) {
    visibility: visible !important;
  }

  body:has(.qrPrintSheet) .qrPrintSheet {
    grid-template-columns: repeat(3, 1fr);
    align-content: start;
    gap: 5mm;
    width: 100%;
    padding: 0;
    display: grid;
    position: absolute;
    inset: 0;
  }

  body:has(.qrPrintSheet) .qrPrintCard {
    break-inside: avoid;
    text-align: center;
    color: #123d3a;
    border: 1px dashed #788;
    border-radius: 3mm;
    align-content: center;
    justify-items: center;
    min-height: 75mm;
    padding: 4mm;
    display: grid;
  }

  body:has(.qrPrintSheet) .qrPrintCard img {
    object-fit: contain;
    width: 42mm;
    height: 42mm;
  }

  body:has(.qrPrintSheet) .qrPrintCard strong {
    margin-top: 2mm;
    font-size: 10pt;
  }

  body:has(.qrPrintSheet) .qrPrintCard small {
    margin-top: 1mm;
    font-size: 7pt;
  }

  body:has(.qrPrintSheet) .qrPrintCard span {
    margin-top: 2mm;
    font-size: 8pt;
  }

  .appearanceControls, .themeSwitcher, .schemeToggle {
    display: none !important;
  }

  body:not(:has(.qrPrintSheet)) {
    color: #122028 !important;
    background: #fff !important;
    padding-bottom: 0 !important;
  }

  body:not(:has(.qrPrintSheet)) :is(.hero, .content, .card, .architecture, .archNode, .note, .panel, .qrStudentPage, .qrStudentCard, .myCourseCard, .surfaceCard, .adminTopbar, .adminWorkspace, .loginCard, .adminSidebar) {
    color: #122028 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
}

@media (max-width: 1120px) {
  .adminAppShell {
    grid-template-columns: 226px minmax(0, 1fr);
  }

  .adminSidebar {
    width: 226px;
    padding-inline: 11px;
  }

  .adminTopbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .topbarActions {
    justify-content: space-between;
    width: 100%;
  }

  .dashboardColumns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .adminAppShell, .adminAppShell.sidebarCollapsed {
    display: block;
  }

  .adminSidebar {
    width: 100%;
    height: auto;
    padding: 12px 14px 9px;
    position: static;
    overflow: hidden;
  }

  .sidebarCollapsed .adminSidebar {
    width: 100%;
    padding: 12px 14px 9px;
  }

  .sidebarBrandRow, .sidebarCollapsed .sidebarBrandRow {
    justify-content: space-between;
  }

  .sidebarCollapsed .sidebarBrandRow .adminBrand {
    flex: 1;
    justify-content: flex-start;
  }

  .sidebarCollapsed .brandCopy {
    display: grid;
  }

  .sidebarCollapsed .navItem > span:nth-child(2), .sidebarCollapsed .navItem small {
    display: inline;
  }

  .sidebarCollapsed .sidebarFoot {
    display: none;
  }

  .adminBrand {
    min-height: 42px;
  }

  .brandEmblem {
    border-radius: 11px;
    width: 35px;
    height: 35px;
    font-size: 17px;
  }

  .sidebarDivider, .sidebarFoot {
    display: none;
  }

  .adminNavigation {
    scrollbar-width: thin;
    gap: 6px;
    padding: 10px 0 2px;
    display: flex;
    overflow-x: auto;
  }

  .navGroup {
    display: contents;
  }

  .navGroupLabel {
    display: none;
  }

  .navItem {
    flex: none;
    gap: 7px;
    width: auto;
    min-height: 36px;
    padding: 7px 10px;
  }

  .navItem > span:nth-child(2) {
    font-size: 10px;
  }

  .navItem small {
    font-size: 8px;
  }

  .adminTopbar {
    min-height: auto;
    padding: 18px 20px;
  }

  .topbarActions {
    flex-wrap: wrap;
    gap: 10px;
  }

  .accountBadge {
    margin-right: auto;
  }

  .adminContent {
    padding: 18px 16px 26px;
  }

  .loginStage {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 560px;
    min-height: auto;
  }

  .loginWelcome {
    padding: 10px 3px;
  }

  .loginWelcome h2 {
    font-size: 34px;
  }

  .loginWelcome > p {
    font-size: 11px;
  }

  .loginWelcome .welcomeFoot {
    margin-top: 13px;
  }

  .metricGrid {
    gap: 9px;
  }

  .metricCard {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    min-height: 130px;
    padding: 13px;
  }

  .metricCard strong {
    font-size: 21px;
  }

  .formGrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .adminBrand {
    padding-inline: 3px;
  }

  .brandCopy strong {
    font-size: 13px;
  }

  .navItem {
    padding-inline: 8px;
  }

  .navIcon {
    width: 15px;
    height: 15px;
  }

  .navItem > span:nth-child(2) {
    font-size: 9px;
  }

  .topbarHeading h1 {
    font-size: 24px;
  }

  .topbarHeading p {
    font-size: 10px;
  }

  .scopePicker {
    flex: 1;
  }

  .scopePicker select {
    width: 100%;
  }

  .scopeIdPicker {
    flex: 1.15;
  }

  .scopeIdPicker input {
    width: 100%;
  }

  .accountBadge {
    border-top: 1px solid var(--admin-line);
    border-right: 0;
    order: 3;
    width: 100%;
    margin-right: 0;
    padding: 9px 0 0;
  }

  .logoutButton {
    order: 2;
  }

  .welcomeBanner {
    min-height: 135px;
    padding: 20px;
  }

  .welcomeBanner h2 {
    font-size: 22px;
  }

  .welcomeBanner p {
    max-width: 275px;
    font-size: 10px;
  }

  .bannerSeal {
    border-radius: 18px;
    width: 54px;
    height: 54px;
  }

  .bannerSeal .navIcon {
    width: 27px;
    height: 27px;
  }

  .metricGrid {
    grid-template-columns: 1fr;
  }

  .metricCard {
    flex-direction: row;
    align-items: center;
    min-height: 83px;
  }

  .metricCard > div {
    flex: 1;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
  }

  .metricCard small, .metricCard span:not(.metricGlyph) {
    grid-column: 1;
  }

  .metricCard strong {
    grid-area: 1 / 2 / span 2;
  }

  .formGrid, .assignmentForm, .roleCardGrid {
    grid-template-columns: 1fr;
  }

  .fullField {
    grid-column: auto;
  }

  .formActions, .roleNameRow {
    flex-direction: column;
    align-items: stretch;
  }

  .scopeContext {
    align-self: start;
  }

  .roleSelect, .roleSelect select {
    width: 100%;
  }

  .assignmentCard {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .assignmentIdentity {
    flex-basis: calc(100% - 60px);
  }

  .assignmentRole {
    margin-right: 39px;
  }

  .adminFooter {
    flex-direction: column;
    gap: 5px;
  }

  .developmentCard {
    min-height: 270px;
  }

  .academicToolbar {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .academicToolbar .academicSearch {
    flex-basis: 100%;
  }

  .academicToolbar > .actionButton {
    flex: 1;
  }

  .academicModalBackdrop {
    align-items: end;
    padding: 0;
  }

  .academicModal {
    border-radius: 17px 17px 0 0;
    width: 100%;
    max-height: 92vh;
  }

  .lectureToolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .lectureToolbar > label {
    min-width: 100%;
  }

  .lectureToggles {
    flex-direction: column;
    align-items: flex-start;
  }
}

.studentLevelChip {
  border: 1px solid var(--line, var(--color-line));
  background: var(--surface-muted, var(--color-surface));
  border-radius: .8rem;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: .25rem;
  padding: .65rem .8rem;
  display: inline-flex;
}

.attemptCountButton {
  border: 1px solid var(--color-surface-muted);
  background: var(--color-line);
  min-height: 36px;
  color: var(--color-primary);
  font: inherit;
  cursor: pointer;
  border-radius: .65rem;
  padding: .35rem .7rem;
  font-weight: 700;
}

.attemptCountButton:hover, .attemptCountButton:focus-visible {
  background: var(--color-surface-muted);
  outline: 2px solid var(--color-primary);
}

.attemptLogDialog p {
  margin: .35rem 0;
  line-height: 1.7;
}

.attemptLog {
  gap: .75rem;
  margin: .8rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.attemptLog li {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: .8rem;
  gap: .15rem;
  padding: .8rem .9rem;
  display: grid;
}

.attemptLog time {
  color: var(--color-text);
  font-weight: 700;
}

.studentDetailPanel {
  margin-top: 1rem;
  padding: 1.25rem;
}

.studentDetailPanel h4 {
  margin-bottom: .65rem;
}

.studentDetailPanel article {
  margin-inline: 0;
  display: flex;
}

.studentManagementView .surfaceCard {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.studentManagementView .surfaceHeading {
  flex-wrap: wrap;
  align-items: flex-end;
}

.studentManagementView .surfaceHeading > label {
  min-width: 0;
  color: var(--color-text-muted);
  flex: 160px;
  gap: 6px;
  font-size: 12px;
  display: grid;
}

.studentManagementView .surfaceHeading input, .studentManagementView .surfaceHeading select {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  width: 100%;
  min-width: 0;
  min-height: 42px;
  color: var(--color-text);
  border-radius: 9px;
  padding: 9px 11px;
}

.studentManagementView .dataTableWrap {
  width: 100%;
  min-width: 0;
}

.studentTabs {
  gap: 8px;
  margin: 0 0 14px;
  padding-bottom: 4px;
  display: flex;
  overflow-x: auto;
}

.studentTabs button {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 42px;
  color: var(--color-text);
  cursor: pointer;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
}

.studentTabs button[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-surface);
}

.studentTabCount {
  background: var(--color-bg);
  min-width: 1.4rem;
  color: var(--color-text-muted);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  display: inline-flex;
}

.studentTabCount.pending {
  background: var(--color-danger);
  color: var(--color-surface);
}

.studentTabs button[aria-selected="true"] .studentTabCount {
  background: var(--color-surface);
  color: var(--color-primary);
}

.studentTabs button[aria-selected="true"] .studentTabCount.pending {
  color: var(--color-danger);
}

.studentFilters {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
  display: grid;
}

.studentFilters label, .studentIdentityStack {
  min-width: 0;
  color: var(--color-text-muted);
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.studentFilters input, .studentFilters select {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  width: 100%;
  min-width: 0;
  min-height: 42px;
  color: var(--color-text);
  font: inherit;
  border-radius: 9px;
  padding: 9px 11px;
  font-weight: 500;
}

.studentFilterActions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.studentFilterActions button {
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  min-height: 42px;
  color: var(--color-surface);
  cursor: pointer;
  border-radius: 9px;
  padding: 0 14px;
  font-weight: 800;
}

.studentFilterActions button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.studentFilterActions .quietButton {
  border-color: var(--color-line);
  background: var(--color-surface);
  color: var(--color-primary);
}

.studentIdentityCell {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.studentIdentityStack {
  color: var(--color-text-muted);
  font-weight: 650;
}

.studentRosterTable {
  min-width: 720px;
}

.studentRosterTable td {
  vertical-align: top;
}

.studentCourseSummary {
  gap: 4px;
  min-width: 140px;
  display: grid;
}

.studentCourseSummary strong, .studentCourseSummary span {
  color: var(--color-text);
}

.studentCourseSummary small {
  color: var(--color-text-muted);
}

.studentCourseSummary button, .studentActionMenu summary {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 34px;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.studentActionMenu {
  display: inline-block;
  position: relative;
}

.studentActionMenu summary {
  align-items: center;
  list-style: none;
  display: inline-flex;
}

.studentActionMenu summary::-webkit-details-marker {
  display: none;
}

.studentActionMenu[open] > div {
  z-index: 6;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 10px;
  gap: 4px;
  min-width: 148px;
  margin-top: 6px;
  padding: 6px;
  display: grid;
  position: absolute;
  inset-inline-end: 0;
  box-shadow: 0 12px 32px #102a4324;
}

.studentActionMenu button {
  min-height: 36px;
  color: var(--color-text);
  text-align: start;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 0 10px;
  font-weight: 700;
}

.studentActionMenu button:hover:not(:disabled) {
  background: var(--color-line);
}

.studentActionMenu button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.studentMobileList {
  display: none;
}

.studentMobileCard {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 12px;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.studentMobileCard header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.studentMobileCard p {
  color: var(--color-text-muted);
  margin: 0;
}

.studentCourseDetail {
  gap: 8px;
  margin-top: 12px;
  display: grid;
}

.studentCourseDetail h5 {
  color: var(--color-text);
  margin: 0;
}

@media (max-width: 820px) {
  .studentDesktopTable {
    display: none;
  }

  .studentMobileList {
    gap: 12px;
    display: grid;
  }

  .studentActionMenu[open] > div {
    box-shadow: none;
    position: static;
  }

  .studentFilters {
    grid-template-columns: 1fr;
  }
}

.qrPageHeading {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  display: flex;
}

.qrPageHeading h2 {
  margin: .35rem 0;
}

.qrPageHeading p {
  color: var(--muted, var(--color-text-muted));
  max-width: 52rem;
}

.qrStats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
  display: grid;
}

.qrStats article {
  border-top: 3px solid var(--accent, var(--color-primary));
  gap: .65rem;
  padding: 1.25rem;
  display: grid;
}

.qrStats strong {
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
}

.qrFilters {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  display: grid;
}

.qrFilters label, .qrControlCard > label {
  gap: .45rem;
  font-weight: 600;
  display: grid;
}

.qrFilters input, .qrFilters select {
  width: 100%;
  min-width: 0;
}

.qrFilters form {
  align-items: end;
  gap: .5rem;
  display: flex;
}

.qrFilters form label {
  flex: 1;
  min-width: 0;
}

.qrBulkBar {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.qrBulkBar p {
  max-width: 55rem;
  color: var(--muted, var(--color-text-muted));
  margin-top: .5rem;
  font-size: .9rem;
}

.qrCardsTable {
  min-width: 1100px;
  font-size: .87rem;
}

.qrCardsTable input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.qrCardsTable td {
  vertical-align: middle;
}

.qrCardsTable .academicRowActions {
  min-width: 190px;
}

.qrPagination {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  display: flex;
}

.qrDanger {
  color: var(--color-danger);
  border-color: var(--color-danger-bg);
  background: var(--color-danger-bg);
}

.qrDanger:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.qrConfirmation {
  border: 1px solid var(--color-line);
  width: min(620px, 100vw - 2rem);
  max-height: 85vh;
  color: var(--color-text);
  background: var(--color-surface);
  border-radius: 1rem;
  padding: 1.5rem;
  overflow-y: auto;
  box-shadow: 0 20px 90px #102a4340;
}

.qrConfirmation::backdrop {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #102a4377;
}

.qrConfirmation h2 {
  margin-top: 0;
}

.qrConfirmation p {
  line-height: 1.8;
}

.qrConfirmActions {
  justify-content: end;
  gap: .75rem;
  margin-top: 1.5rem;
  display: flex;
}

.qrConfirmationNumbers {
  background: var(--color-surface-muted);
  border-radius: .65rem;
  flex-wrap: wrap;
  gap: .45rem;
  max-height: 220px;
  padding: .75rem;
  display: flex;
  overflow: auto;
}

.qrConfirmationNumbers span {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: .4rem;
  padding: .4rem .6rem;
  font-size: .8rem;
}

@media (max-width: 700px) {
  .qrStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qrPageHeading > a {
    text-align: center;
    width: 100%;
  }

  .qrFilters {
    grid-template-columns: 1fr;
  }

  .qrBulkBar > .academicRowActions {
    flex-wrap: wrap;
    width: 100%;
  }

  .studentLevelChip {
    justify-content: space-between;
    width: 100%;
  }

  .studentDetailPanel {
    overflow-wrap: anywhere;
  }
}

.qrActivationForm select {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  width: 100%;
  min-width: 0;
  min-height: 45px;
  color: var(--color-text);
  font: inherit;
  border-radius: 10px;
  padding: 10px 12px;
}

.qrActivationForm select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.qrStatButton {
  text-align: start;
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-primary);
  gap: .6rem;
  text-decoration: none;
  display: grid;
}

.qrStatButton:hover, .qrStatButton:focus-visible {
  background: var(--color-surface-muted);
  outline: 2px solid var(--color-primary);
}

.qrManager, .qrManager .surfaceCard {
  min-width: 0;
}

.qrManager .dataCard {
  grid-template-columns: minmax(0, 1fr);
}

.qrManager .dataTableWrap {
  width: 100%;
  min-width: 0;
}

.qrDetailGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  display: grid;
}

.qrDetailGrid dt {
  color: var(--color-text-muted);
  font-size: .8rem;
}

.qrDetailGrid dd {
  overflow-wrap: anywhere;
  margin: .3rem 0 0;
}

.qrReason {
  gap: .5rem;
  display: grid;
}

.qrReason select {
  width: 100%;
  min-height: 42px;
}

.qrFilters input, .qrFilters select {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 44px;
  color: var(--color-text);
  font: inherit;
  border-radius: 9px;
  padding: 9px 11px;
}

@media (max-width: 1100px) {
  .qrCardsTable .qrExtraColumn {
    display: none;
  }

  .qrCardsTable {
    min-width: 650px;
  }
}

@media (max-width: 560px) {
  .qrDetailGrid {
    grid-template-columns: 1fr;
  }
}

.qrPageLinks {
  flex-wrap: wrap;
  gap: .5rem;
  display: flex;
}

.accessLogTableWrap {
  width: 100%;
  overflow-x: auto;
}

.accessLogTable {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  min-width: 760px;
}

.accessLogTable th, .accessLogTable td {
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--color-line);
  overflow-wrap: anywhere;
  padding: .75rem .45rem;
}

.accessLogTable th:first-child, .accessLogTable td:first-child {
  width: 11rem;
}

.accessLogTable th:nth-child(6), .accessLogTable td:nth-child(6) {
  width: 9rem;
}

.qrCardPreview {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: .75rem;
  width: min(100%, 42rem);
  height: auto;
  margin: .75rem 0;
  display: block;
}

.cardActions {
  position: relative;
}

.cardActions summary {
  cursor: pointer;
  list-style: none;
}

.cardActions summary::-webkit-details-marker {
  display: none;
}

.cardActions[open] {
  z-index: 2;
}

.cardActionMenu {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: .7rem;
  gap: .35rem;
  min-width: 11rem;
  margin-top: .35rem;
  padding: .5rem;
  display: grid;
}

.accessLogTable th {
  color: var(--color-text-muted);
  font-size: .82rem;
  font-weight: 700;
}

.accessResult {
  border-radius: .5rem;
  padding: .15rem .5rem;
  font-weight: 700;
  display: inline-flex;
}

.accessResult.success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.accessResult.denied {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.accessTrace {
  gap: .6rem;
  margin-top: 1rem;
  display: grid;
}

.accessTrace ol {
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.accessTrace li {
  border: 1px solid var(--color-line);
  border-radius: .75rem;
  gap: .15rem;
  padding: .7rem .8rem;
  display: grid;
}

.accessHistory .attemptLog small {
  color: var(--color-text-muted);
}

@media (max-width: 760px) {
  .accessLogTable {
    table-layout: auto;
    min-width: 0;
  }

  .accessLogTable thead {
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  .accessLogTable, .accessLogTable tbody {
    display: block;
  }

  .accessLogTable tr {
    border: 1px solid var(--color-line);
    border-radius: .85rem;
    gap: .25rem;
    margin-bottom: .75rem;
    padding: .85rem;
    display: grid;
  }

  .accessLogTable td {
    overflow-wrap: anywhere;
    border: 0;
    grid-template-columns: minmax(5.5rem, 8rem) minmax(0, 1fr);
    gap: .35rem;
    width: auto;
    padding: .15rem 0;
    display: grid;
  }

  .accessLogTable td:before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: .78rem;
  }

  .qrPageLinks {
    width: 100%;
  }

  .qrPageLinks > a {
    text-align: center;
    flex: 1;
  }
}

.adminAppShell {
  --admin-ink: var(--color-text);
  --admin-muted: var(--color-text-muted);
  --admin-line: var(--color-line);
  --admin-paper: var(--color-bg);
  --admin-card: var(--color-surface);
  --admin-accent: var(--color-primary);
  --admin-accent-dark: var(--color-primary-strong);
  --admin-sidebar: var(--color-sidebar);
}

.adminSidebar {
  background: var(--color-sidebar);
  color: var(--color-sidebar-text);
}

.navItem.current {
  background: var(--color-sidebar-current);
  color: var(--color-sidebar-current-text);
}

.navItem {
  color: var(--color-sidebar-muted);
}

.navItem:hover:not(:disabled) {
  color: var(--color-sidebar-text);
}

.brandEmblem, .qrStudentBrand > span, .primaryAction, .primaryButton, .qrPrimaryButton, .studentTabs button[aria-selected="true"], .studentFilterActions > button:not(.quietButton):not(.qrDanger) {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.appearanceControls {
  align-items: center;
  gap: 8px;
  display: inline-flex;
  position: relative;
}

.schemeToggle, .themeSwitcherButton, .themeChoiceRow button, .themeChoiceGrid button, .themeDefaultButton {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 44px;
  color: var(--color-text);
  cursor: pointer;
  border-radius: 12px;
}

.schemeToggle {
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-weight: 800;
  display: inline-flex;
}

.themeSwitcher {
  z-index: 30;
  position: relative;
}

.themeSwitcherButton {
  box-shadow: 0 8px 24px var(--color-shadow);
  padding: 0 16px;
  font-weight: 800;
}

.themeSwitcherButton:focus-visible, .themeChoiceRow button:focus-visible, .themeChoiceGrid button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.themeSwitcherButton[aria-expanded="true"] {
  border-color: var(--color-primary);
}

.themeSwitcherPanel {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  width: min(320px, 100vw - 32px);
  color: var(--color-text);
  box-shadow: 0 16px 40px var(--color-shadow);
  z-index: 40;
  border-radius: 16px;
  gap: 10px;
  padding: 14px;
  display: grid;
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
}

.themeSwitcherPanel h2 {
  margin: 0;
  font-size: 16px;
}

.themeSwitcherPanel p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.themeChoiceRow, .themeChoiceGrid {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.themeChoiceRow button, .themeChoiceGrid button {
  padding: 0 10px;
  font-weight: 700;
}

.themeChoiceRow button[aria-pressed="true"], .themeChoiceGrid button[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-surface-muted);
}

.themeChoiceGrid button {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.themeChoiceGrid button span {
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

.themePreview {
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px;
  display: flex;
}

.themePreview b {
  background: var(--color-primary);
  min-height: 32px;
  color: var(--color-on-primary);
  border-radius: 8px;
  align-items: center;
  padding: 0 10px;
  display: inline-flex;
}

.qrStudentPage, .adminShell {
  background: var(--color-bg);
  color: var(--color-text);
}

.qrStudentCard, .surfaceCard, .panel, .loginCard, .metricCard, .myCourseCard, .academicModal, .dataTable, .academicToolbar, .adminTopbar, input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-line);
}

@media (prefers-reduced-motion: no-preference) {
  body, .surfaceCard, .qrStudentCard, .adminSidebar, .adminTopbar, .myCourseCard {
    transition: background-color .18s, color .18s, border-color .18s;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.themeSwitcherPanel {
  max-height: min(62vh, 420px);
  overflow: auto;
}

.themeDefaultButton {
  width: 100%;
  font-weight: 800;
}

@media (max-width: 768px) {
  .qrPrimaryButton, .primaryButton, .primaryAction, .statusButton, .actionButton, .schemeToggle, .myCoursesHeading .qrPrimaryButton, .myCourseAdd .qrPrimaryButton, .myCourseCard .qrPrimaryButton {
    min-height: 44px;
  }

  .themeSwitcherPanel {
    width: auto;
    position: fixed;
    inset-block-start: 72px;
    inset-inline: 12px;
  }

  .nav {
    align-items: flex-start;
  }

  .navActions {
    flex-wrap: wrap;
  }

  .schemeToggleText {
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }
}

html[data-theme="ocean"][data-color-scheme="light"] .hero {
  background: radial-gradient(circle at 82% 18%, #a9e2cd57, #0000 30%), linear-gradient(145deg, #f8f6ef 0%, #e7f0eb 100%);
}

html[data-theme="ocean"][data-color-scheme="light"] :is(.brandMark, .primaryButton, .statusButton, .archNode.primary) {
  color: #fff;
  background: #102f36;
}

html[data-theme="ocean"][data-color-scheme="light"] .archNode.primary small {
  color: #b9d3d6;
}

html[data-theme="ocean"][data-color-scheme="light"] .statusButton.online {
  background: #116b4d;
}

html[data-theme="ocean"][data-color-scheme="light"] .statusButton.offline {
  background: #8b3a31;
}

html[data-theme="ocean"][data-color-scheme="light"] .primaryAction {
  color: #fff;
  background: #155f5c;
}

html[data-theme="ocean"][data-color-scheme="light"] .qrPrimaryButton {
  color: #fff;
  background: #16766b;
}

html[data-theme="ocean"][data-color-scheme="light"] .qrStudentBrand > span {
  color: #fff;
  background: #146f66;
}

html[data-theme="ocean"][data-color-scheme="light"] .archNode.database {
  background: #dff2e9;
}

html[data-theme="ocean"][data-color-scheme="light"] .note {
  background: #ebe8df;
}

.universityLogin {
  background: var(--color-bg);
  min-height: 100dvh;
  color: var(--color-text);
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  display: grid;
}

.loginIdentity {
  background: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--color-accent) 42%, transparent), transparent 34%), linear-gradient(165deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 62%, #000));
  color: var(--color-on-primary);
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(28px, 5vw, 72px);
  display: flex;
  position: relative;
  overflow: hidden;
}

.loginIdentityBrand, .loginIdentityPoints {
  align-items: center;
  gap: 12px;
  display: flex;
}

.loginMark {
  background: color-mix(in srgb, var(--color-on-primary) 16%, transparent);
  border-radius: 16px;
  place-items: center;
  width: 52px;
  height: 52px;
  font-size: 26px;
  font-weight: 800;
  display: grid;
}

.loginIdentityBrand {
  align-items: center;
}

.loginIdentityBrand div {
  display: grid;
}

.loginIdentityBrand small, .loginIdentityCopy p, .loginIdentityPoints {
  color: color-mix(in srgb, var(--color-on-primary) 82%, transparent);
}

.loginIdentityCopy h1 {
  max-width: 12ch;
  color: var(--color-on-primary);
  letter-spacing: 0;
  margin: 0 0 12px;
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.25;
}

.loginIdentityCopy p {
  max-width: 36rem;
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
}

.loginIdentityPoints {
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loginIdentityPoints li {
  border: 1px solid color-mix(in srgb, var(--color-on-primary) 28%, transparent);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
}

.loginAccess {
  flex-direction: column;
  min-width: 0;
  padding: 20px clamp(20px, 4vw, 56px) 32px;
  display: flex;
}

.loginAccessBar {
  justify-content: flex-end;
  display: flex;
}

.loginAccessCard {
  flex: 1;
  align-content: center;
  gap: 18px;
  width: min(100%, 440px);
  margin-inline: auto;
  display: grid;
}

.loginAccessHeading h2, .loginStatus h2 {
  color: var(--color-text);
  letter-spacing: 0;
  margin: 0 0 8px;
  font-size: 32px;
}

.loginAccessHeading p, .loginStatus p {
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.8;
}

.loginForm {
  gap: 14px;
  display: grid;
}

.loginForm label {
  color: var(--color-text);
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  display: grid;
}

.loginForm input {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  width: 100%;
  min-height: 48px;
  color: var(--color-text);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 16px;
}

.loginPassword {
  display: block;
  position: relative;
}

.loginPassword input {
  padding-inline-end: 84px;
}

.loginPassword button {
  inset-inline-end: 4px;
  background: var(--color-surface-muted);
  min-width: 72px;
  min-height: 44px;
  color: var(--color-text);
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  font-weight: 800;
  position: absolute;
  top: 2px;
}

.loginError {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-radius: 12px;
  margin: 0;
  padding: 12px 14px;
  font-weight: 700;
  line-height: 1.7;
}

.loginSubmit {
  background: var(--color-primary);
  width: 100%;
  min-height: 48px;
  color: var(--color-on-primary);
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
}

.loginSubmit:disabled {
  opacity: .7;
  cursor: wait;
}

.loginLinks {
  flex-wrap: wrap;
  gap: 10px 16px;
  display: flex;
}

.loginLinks a {
  color: var(--color-primary);
  font-weight: 800;
}

html[data-theme="ocean"][data-color-scheme="light"] .loginSubmit {
  color: #fff;
  background: #102f36;
}

.loginLogo, .brandLogo {
  object-fit: contain;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border-radius: 12px;
  width: 38px;
  height: 38px;
}

.loginIdentityImage {
  background-position: center;
  background-size: cover;
}

.homeIdentityImage {
  object-fit: cover;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  width: min(100%, 420px);
  max-height: 180px;
  margin: 8px 0 16px;
  display: block;
}

.appearancePage {
  gap: 16px;
  display: grid;
}

.appearanceGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.appearanceFields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.appearanceFields label, .appearanceAssetActions {
  gap: 6px;
  display: grid;
}

.appearanceFields .fullField {
  grid-column: 1 / -1;
}

.appearanceFields input, .appearanceFields textarea, .appearanceFields select {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  width: 100%;
  min-height: 44px;
  color: var(--color-text);
  font: inherit;
  border-radius: 12px;
  padding: 8px 12px;
}

.appearanceFields textarea {
  resize: vertical;
  min-height: 110px;
}

.appearanceColor {
  align-items: center;
  gap: 8px;
  display: flex;
}

.appearanceColor input[type="color"] {
  background: none;
  border: 0;
  width: 44px;
  min-height: 44px;
  padding: 0;
}

.appearanceHint, .appearanceSplitNote {
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.7;
}

.appearanceDirty, .appearanceError, .appearanceSuccess {
  border-radius: 12px;
  margin: 0;
  padding: 12px 14px;
  font-weight: 700;
}

.appearanceDirty {
  background: var(--color-warning-bg, #fff4d6);
  color: var(--color-text);
}

.appearanceError {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.appearanceSuccess {
  background: var(--color-success-bg, #e7f6ef);
  color: var(--color-text);
}

.appearanceAssets {
  gap: 12px;
  display: grid;
}

.appearanceAsset {
  border: 1px solid var(--color-line);
  border-radius: 16px;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: grid;
}

.appearanceAssetPreview {
  background: var(--color-surface-muted);
  width: 96px;
  height: 72px;
  color: var(--color-text-muted);
  border-radius: 12px;
  place-items: center;
  font-size: 13px;
  display: grid;
  overflow: hidden;
}

.appearanceAssetPreview img, .appearancePreview img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.appearanceAssetActions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.appearanceAssetActions input {
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.appearanceAssetActions button, .appearanceReset button, .appearanceSchemeSwitch button {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 44px;
  color: var(--color-text);
  cursor: pointer;
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 800;
}

.appearanceAssetActions button:disabled, .appearanceReset button:disabled, .appearanceFields :disabled {
  opacity: .65;
  cursor: not-allowed;
}

.appearanceLocalBadge {
  color: var(--color-text);
}

.appearancePreview {
  background: var(--color-bg);
  border-radius: 16px;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  padding: 12px;
  display: grid;
}

.appearancePreview.dark {
  color: #f4f7f6;
  background: #132027;
}

.appearancePreviewLogin, .appearancePreviewHome {
  border-radius: 16px;
  min-height: 180px;
  padding: 16px;
}

.appearancePreviewLogin {
  color: #fff;
  background: linear-gradient(165deg, var(--preview-primary), color-mix(in srgb, var(--preview-primary) 55%, #000));
  background-position: center;
  background-size: cover;
  align-content: end;
  gap: 8px;
  display: grid;
}

.appearancePreviewLogin div {
  align-items: center;
  gap: 8px;
  display: flex;
}

.appearancePreviewLogin img, .appearancePreviewLogin b {
  background: #ffffff2e;
  border-radius: 10px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.appearancePreviewLogin h3, .appearancePreviewLogin p, .appearancePreviewHome strong {
  margin: 0;
}

.appearancePreviewHome {
  background: var(--color-surface);
  color: var(--color-text);
  align-content: start;
  gap: 8px;
  display: grid;
}

.appearancePreview.dark .appearancePreviewHome {
  color: #f4f7f6;
  background: #1b2c33;
}

.appearancePreviewHome img {
  object-fit: cover;
  border-radius: 12px;
  height: 88px;
}

.appearanceSwatches {
  gap: 8px;
  display: flex;
}

.appearanceSwatches i {
  border-radius: 999px;
  width: 28px;
  height: 28px;
}

.appearanceSwatches i:first-child {
  background: var(--preview-primary);
}

.appearanceSwatches i:nth-child(2) {
  background: var(--preview-secondary);
}

.appearanceSwatches i:nth-child(3) {
  background: var(--preview-accent);
}

.appearanceReset, .appearanceResetConfirm {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.appearanceStatus {
  padding: 18px;
}

@media (max-width: 900px) {
  .universityLogin {
    grid-template-columns: 1fr;
  }

  .loginIdentity {
    gap: 16px;
    padding: 28px 20px 20px;
  }

  .loginIdentityCopy h1 {
    max-width: none;
    font-size: 30px;
  }

  .loginIdentityPoints {
    display: none;
  }

  .loginAccess {
    padding: 8px 16px 28px;
  }

  .loginAccessCard {
    width: min(100%, 460px);
  }

  .appearanceGrid, .appearanceFields, .appearancePreview, .appearanceAsset {
    grid-template-columns: 1fr;
  }

  .lectureToolbar, .academicToolbar {
    align-items: stretch;
  }
}

.questionTools {
  padding: 14px 16px;
}

.questionTools .formActions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.questionTools .formActions .actionButton {
  min-height: 40px;
}

.questionGuide {
  padding: 14px 16px;
}

.questionGuide h2, .lectureManager h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.questionGuide ol {
  margin: 8px 0;
  padding-inline-start: 22px;
}

.lectureManager .emptyPanel {
  margin-top: 8px;
}

.lectureManager .actionButton.primaryAction {
  min-height: 40px;
}

.examDesk {
  gap: 10px;
  min-width: 0;
  display: grid;
  overflow-x: clip;
}

.examDesk .surfaceCard {
  padding: 14px;
}

.examIntro, .examInfoBar, .examListHead, .examFilters, .examPrimaryActions, .examRowActions {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 8px;
  display: flex;
}

.examIntro > div, .examInfoBar > div {
  min-width: 0;
}

.examDesk h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
}

.examDesk h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}

.examDesk p {
  margin: 0;
  line-height: 1.55;
}

.examNotice {
  border: 1px solid var(--color-line);
  background: var(--color-surface-muted, var(--color-bg));
  border-radius: 12px;
  padding: 10px 12px;
}

.examFilters label, .examFormGrid label, .filePick {
  gap: 6px;
  min-width: min(100%, 220px);
  font-size: 13px;
  font-weight: 700;
  display: grid;
}

.examFormGrid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: 8px;
  display: grid;
}

.examWarning {
  color: #6b3a00;
  background: #fff6e8;
  border: 1px solid #a15c00;
  border-radius: 12px;
  padding: 8px 10px;
}

.examLeave {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 14px;
  gap: 8px;
  padding: 12px;
  display: grid;
}

.examPager {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.examListTable td, .examListTable th {
  padding: 6px;
  font-size: 13px;
}

.examFormGrid .examSpan, .examCheck.examSpan {
  grid-column: 1 / -1;
}

.examCheck {
  align-items: center;
  gap: 8px;
  font-weight: 700;
  display: flex !important;
}

.examTabs {
  scrollbar-width: thin;
  gap: 8px;
  padding-bottom: 6px;
  display: flex;
  overflow-x: auto;
}

.examTabs button {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 42px;
  color: var(--color-text);
  cursor: pointer;
  border-radius: 999px;
  flex: none;
  padding: 0 14px;
  font-weight: 800;
}

.examTabs button[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
}

.examPanel {
  gap: 8px;
  min-width: 0;
  display: grid;
}

.examPanel[hidden] {
  display: none;
}

.examStatGrid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  display: grid;
}

.examStatGrid article, .examStatGrid .examStat, .examSubcard, .examBucket {
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  color: inherit;
  text-align: right;
  border-radius: 14px;
  gap: 8px;
  padding: 12px;
  display: grid;
}

.examStatGrid .examStat {
  cursor: pointer;
  font: inherit;
}

.examStatGrid .examStat[aria-pressed="true"], .examFilters button[aria-pressed="true"] {
  border-color: var(--color-primary);
}

.examStatGrid strong {
  font-size: 22px;
}

.examDesk, .examTableWrap {
  max-width: 100%;
  overflow-x: clip;
}

.examMonitorDialog {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  width: min(640px, 100vw - 24px);
  max-height: calc(100vh - 24px);
  color: var(--color-text);
  border-radius: 16px;
  padding: 16px;
  overflow: auto;
}

.examMonitorDialog::backdrop {
  background: #0f172a73;
}

.examDetailGrid {
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 8px 12px;
  margin: 0;
  display: grid;
}

.examDetailGrid div {
  display: contents;
}

.examDetailGrid dt {
  color: var(--color-text-muted);
  font-weight: 800;
}

.examDetailGrid dd {
  overflow-wrap: anywhere;
  margin: 0;
}

.examAttemptLog {
  gap: 6px;
  margin: 0;
  padding-inline-start: 18px;
  display: grid;
}

.examWideTable {
  border-collapse: collapse;
  text-align: right;
  width: 100%;
}

.examWideTable th, .examWideTable td {
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
  padding: 10px;
}

.filePick input[type="file"] {
  max-width: 100%;
}

.examPreview {
  gap: 10px;
  margin: 0;
  padding-inline-start: 20px;
  display: grid;
}

.examPreview li {
  gap: 6px;
  display: grid;
}

@media (max-width: 760px) {
  .lectureToolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .questionGuide, .lectureEditor, .lectureManager .surfaceCard {
    padding: 14px;
  }

  .examInfoBar, .examFilters, .examPrimaryActions {
    align-items: stretch;
  }

  .examWideTable thead {
    display: none;
  }

  .examWideTable, .examWideTable tbody, .examWideTable tr, .examWideTable td {
    width: auto;
    display: block;
  }

  .examWideTable tr {
    border: 1px solid var(--color-line);
    border-radius: 14px;
    margin-bottom: 10px;
    padding: 10px;
  }

  .examWideTable td {
    border: 0;
    padding: 4px 0;
  }

  .examWideTable td:before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 800;
    display: block;
  }

  .examDetailGrid {
    grid-template-columns: 1fr;
  }

  .examMonitorDialog {
    width: calc(100vw - 16px);
  }
}

.noticeBadge {
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  margin-top: 8px;
  padding: 4px 10px;
  font-weight: 800;
  display: inline-flex;
}

.reportBar {
  background: var(--color-line);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.reportBar span {
  background: var(--color-primary);
  height: 100%;
  display: block;
}

.academicReports {
  max-width: 100%;
  overflow-x: clip;
}

.rbacView {
  min-width: 0;
}

.rbacIntro p, .rbacDetail > p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
}

.rbacRoleGrid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  display: grid;
}

.rbacRoleCard {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 13px;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  display: grid;
}

.rbacRoleCard.system {
  border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-line));
  background: color-mix(in srgb, var(--color-warning-bg) 55%, var(--color-surface));
}

.rbacRoleHead {
  align-items: center;
  gap: 10px;
  display: flex;
}

.rbacRoleHead h3 {
  color: var(--color-text);
  margin: 0;
  font-size: 14px;
}

.rbacRoleHead small {
  color: var(--color-text-muted);
  font-size: 10px;
}

.rbacRoleCard > p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 11px;
  line-height: 1.8;
}

.rbacRoleMeta, .rbacActions {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.rbacChip {
  background: var(--color-line);
  color: var(--color-text-muted);
  border-radius: 20px;
  align-items: center;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.rbacChip.lock {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.rbacChip.ok {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.rbacActions button, .textButton {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 34px;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 800;
}

.rbacActions button:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: .7;
}

.rbacActions button:not(:disabled):hover, .textButton:hover {
  background: var(--color-bg);
}

.rbacDetailGrid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 16px;
  margin: 12px 0 0;
  display: grid;
}

.rbacDetailGrid div {
  gap: 4px;
  display: grid;
}

.rbacDetailGrid dt {
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 800;
}

.rbacDetailGrid dd {
  color: var(--color-text);
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
}

.rbacToolbar {
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  display: flex;
}

.rbacToolbar label, .rbacSearch {
  min-width: min(100%, 180px);
  color: var(--color-text-muted);
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.rbacToolbar input, .rbacToolbar select, .rbacRolePicker select {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-height: 40px;
  color: var(--color-text);
  border-radius: 9px;
  padding: 8px 10px;
}

.rbacCount {
  color: var(--color-text-muted);
  margin-inline-start: auto;
  font-size: 10px;
  font-weight: 800;
}

.rbacRolePicker {
  margin: 4px 0 8px;
}

.actionLegend {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  display: flex;
}

.actionLegend > span {
  background: var(--color-bg);
  max-width: 100%;
  color: var(--color-text-muted);
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 10px;
  line-height: 1.6;
}

.actionLegend strong {
  color: var(--color-text);
}

.rbacGroupList {
  gap: 10px;
  min-width: 0;
  display: grid;
}

.rbacGroup {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 12px;
  overflow: hidden;
}

.rbacGroup summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  list-style: none;
  display: flex;
}

.rbacGroup summary::-webkit-details-marker {
  display: none;
}

.rbacGroup summary strong {
  color: var(--color-text);
  font-size: 13px;
  display: block;
}

.rbacGroup summary small {
  color: var(--color-text-muted);
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.6;
  display: block;
}

.rbacGroup summary b {
  color: var(--color-text-muted);
  font-size: 11px;
}

.rbacGroup ul {
  border-top: 1px solid var(--color-bg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rbacPermRow {
  border-top: 1px solid var(--color-bg);
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 11px 12px;
  display: grid;
}

.rbacPermRow.granted {
  background: color-mix(in srgb, var(--color-success-bg) 45%, transparent);
}

.rbacPermRow.sensitive {
  border-right: 3px solid var(--color-warning);
}

.rbacPermRow strong {
  color: var(--color-text);
  font-size: 12px;
  display: block;
}

.rbacPermRow small {
  color: var(--color-text-muted);
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.7;
  display: block;
}

.rbacPermMeta {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  display: flex;
}

.rbacPermMeta code {
  color: var(--color-text-muted);
  direction: ltr;
  font-size: 9px;
}

.rbacPermMeta em {
  color: var(--color-text-muted);
  font-size: 9px;
  font-style: normal;
}

.rbacPermMeta b {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-radius: 20px;
  padding: 3px 6px;
  font-size: 8px;
}

.rbacActionChip {
  background: var(--color-line);
  color: var(--color-text-muted);
  white-space: nowrap;
  border-radius: 20px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 800;
}

.rbacSaveBar {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  display: flex;
  position: sticky;
  bottom: 8px;
  box-shadow: 0 8px 24px #18393b14;
}

.rbacSaveBar span {
  color: var(--color-text-muted);
  font-size: 11px;
}

.rbacSaveBar.dirty {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
}

.rbacSaveBar.dirty span {
  color: var(--color-warning);
  font-weight: 800;
}

.rbacSaveBar .actionButton:disabled {
  opacity: .54;
}

@media (max-width: 760px) {
  .rbacToolbar, .rbacSaveBar, .roleNameRow {
    flex-direction: column;
    align-items: stretch;
  }

  .rbacCount {
    margin-inline-start: 0;
  }

  .rbacPermRow {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .rbacActionChip {
    grid-column: 2;
    justify-self: start;
  }

  .metricGrid, .dashboardColumns, .roleCardGrid {
    grid-template-columns: 1fr;
  }
}

/*# sourceMappingURL=src_app_0liqhk7q9gzrh._.css.map*/