:root {
  --page: #f1f5f9;
  --surface: #ffffff;
  --surface-raised: #f8fafc;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #dbe3ec;
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --positive: #2563eb;
  --warning: #d79a20;
  --danger: #e1485f;
  --dark-page: #000000;
  --dark-surface: #0a0a0a;
  --dark-raised: #111111;
  --dark-line: #262626;
  --dark-card-line: rgba(255, 255, 255, .06);
  --glass-light: rgba(255, 255, 255, .62);
  --glass-light-line: rgba(15, 23, 42, .08);
  --glass-dark: #0a0a0a;
  --glass-dark-line: rgba(255, 255, 255, .08);
  --dark-ink: #fafafa;
  --dark-muted: #a1a1aa;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
  --shadow-lg: 0 18px 45px rgba(15, 23, 42, .18);
}

* { box-sizing: border-box; letter-spacing: 0 !important; }
html, body { max-width: 100vw; overflow-x: hidden; }
body {
  margin: 0;
  color: var(--ink) !important;
  background: var(--page) !important;
  background-image: none !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
body h1, body h2, body h3, body h4, body strong,
button, input, select, textarea, table, .swal2-container {
  font-family: Inter, Arial, sans-serif !important;
}
body h1, body h2, body h3, body h4, body strong { color: var(--ink); }
html.dark, html.dark body { color: var(--dark-ink) !important; background: var(--dark-page) !important; background-color: var(--dark-page) !important; background-image: none !important; }
html.dark body h1, html.dark body h2, html.dark body h3, html.dark body h4,
html.dark body strong { color: var(--dark-ink); }

/* Clean blue ambient lighting (behind all content, blurred through glass cards) */
.ambient-bg {
  position: fixed !important;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  display: none !important;
}
.ambient-blob { position: absolute; border-radius: 50%; filter: blur(100px); }
.ambient-blob-indigo {
  top: -200px; left: -180px; width: 660px; height: 660px;
  background: rgba(14, 165, 233, .08);
}
.ambient-blob-blue {
  bottom: -220px; right: -200px; width: 740px; height: 740px;
  background: rgba(37, 99, 235, .09);
}
html.dark .ambient-blob-indigo { background: rgba(14, 165, 233, .12); }
html.dark .ambient-blob-blue { background: rgba(37, 99, 235, .14); }

header {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
}
header > div { max-width: 1500px !important; height: 76px !important; }
header img { filter: drop-shadow(0 3px 5px rgba(15, 23, 42, .15)); }
header h1 { color: var(--ink) !important; font-size: 24px !important; line-height: 1.15 !important; font-weight: 700 !important; padding: 0 !important; }
header p { color: var(--brand) !important; font-size: 12px !important; line-height: 1.35 !important; font-weight: 600 !important; }
header nav {
  padding: 4px !important;
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  background: var(--surface-raised) !important;
  box-shadow: none !important;
}
html.dark header { background: #000000 !important; border-color: var(--dark-line) !important; box-shadow: none !important; }
html.dark header h1 { color: var(--dark-ink) !important; }
html.dark header nav { background: #0a0a0a !important; border-color: var(--dark-line) !important; }

.nav-tab {
  min-height: 38px;
  padding-inline: 14px !important;
  color: var(--muted) !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
html.dark .nav-tab { color: #a1a1aa !important; }
html.dark .nav-tab:hover { color: #e2e8f0 !important; background: #171717 !important; }
.nav-tab.bg-white, .nav-tab.dark\:bg-zinc-800,
html.dark .nav-tab.bg-white, html.dark .nav-tab.dark\:bg-zinc-800 {
  color: #ffffff !important;
  background: #2563eb !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.nav-tab.bg-white svg, .nav-tab.dark\:bg-zinc-800 svg { color: #ffffff !important; }
html.dark .nav-tab.bg-white, html.dark .nav-tab.dark\:bg-zinc-800 {
  color: #ffffff !important;
  background: #2563eb !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html.dark .nav-tab.bg-white svg, html.dark .nav-tab.dark\:bg-zinc-800 svg { color: #ffffff !important; }

main { max-width: 1500px !important; }
.view-panel { transform: none !important; }
.view-panel h2 { font-size: clamp(26px, 2vw, 32px) !important; line-height: 1.2 !important; font-weight: 700 !important; }
.view-panel h3 { font-size: 19px !important; line-height: 1.3 !important; font-weight: 700 !important; }
.view-panel h4 { font-size: 17px !important; line-height: 1.35 !important; font-weight: 600 !important; }
.view-panel p { font-size: 14px !important; line-height: 1.55 !important; }

.view-panel > div, #students-grid > div, #view-settings > div, #view-reports > div {
  color: var(--ink) !important;
  background: var(--glass-light) !important;
  border-color: var(--glass-light-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .08) !important;
  transform: none !important;
  backdrop-filter: blur(18px) saturate(150%);
}
/* Student cards sit on already-frosted panels — translucent material, no extra blur (performance) */
#students-grid > div { backdrop-filter: none !important; background: rgba(255, 255, 255, .72) !important; }
html.dark .view-panel > div, html.dark #students-grid > div,
html.dark #view-settings > div, html.dark #view-reports > div {
  color: var(--dark-ink) !important;
  background: var(--glass-dark) !important;
  background-image: none !important;
  border-color: var(--glass-dark-line) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}
html.dark #students-grid > div { background: var(--dark-surface) !important; background-image: none !important; }
#view-attendance > div:first-child { overflow: hidden; border: 1px solid var(--line) !important; }
html.dark #view-attendance > div:first-child { border-color: var(--dark-card-line) !important; }
#view-attendance > div:first-child::before,
#empty-students-msg::before, #empty-students-msg::after,
.report-kpi::after, .report-chart-card::before { content: none !important; }

button {
  border-radius: 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease !important;
  box-shadow: none !important;
}
button.rounded-full { border-radius: 9999px !important; }
button.rounded-2xl, button.rounded-3xl, button.rounded-xl, button.rounded-lg { border-radius: 16px !important; }
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(0); }
button.bg-emerald-500, button.bg-emerald-600,
.bg-emerald-500, .bg-emerald-600 {
  color: #ffffff !important;
  background: var(--brand) !important;
  box-shadow: none !important;
}
button.bg-emerald-500:hover, button.bg-emerald-600:hover {
  background: #3b82f6 !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}
button.bg-emerald-500:active, button.bg-emerald-600:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}
.text-emerald-500, .text-emerald-600, .dark\:text-emerald-400 { color: var(--brand) !important; }
.bg-emerald-500\/10, .bg-emerald-500\/15, .bg-emerald-500\/20 { background: rgba(37,99,235,.12) !important; }
.border-emerald-500, .border-emerald-500\/20, .border-emerald-500\/30, .border-emerald-500\/40 { border-color: rgba(37,99,235,.35) !important; }
.shadow-emerald-500\/20, .shadow-emerald-500\/10 { --tw-shadow: none !important; box-shadow: none !important; }
.text-amber-500, .dark\:text-amber-400 { color: var(--warning) !important; }
.text-rose-500, .dark\:text-rose-400 { color: var(--danger) !important; }

input, select, textarea {
  color: var(--ink) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.04) !important;
  font-size: 14px !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand) !important; --tw-ring-color: rgba(37,99,235,.25) !important; }
label { font-size: 13px !important; font-weight: 600 !important; }
html.dark input, html.dark select, html.dark textarea {
  color: var(--dark-ink) !important;
  background: #0d0d0f !important;
  border-color: var(--dark-line) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2) !important;
}

/* ===== Settings tab: frosted materials + modern inputs ===== */
#view-settings div.bg-slate-50, #view-settings div.dark\:bg-dark-elevated {
  background: rgba(255, 255, 255, .50) !important;
  border-color: rgba(15, 23, 42, .10) !important;
}
html.dark #view-settings div.bg-slate-50, html.dark #view-settings div.dark\:bg-dark-elevated {
  background: #111111 !important;
  border-color: rgba(255, 255, 255, .10) !important;
}
#view-settings input {
  background: rgba(255, 255, 255, .65) !important;
  border-color: rgba(15, 23, 42, .10) !important;
  box-shadow: none !important;
}
html.dark #view-settings input {
  background: #050505 !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: none !important;
}
#view-settings input:focus, html.dark #view-settings input:focus {
  border-color: rgba(37, 99, 235, .65) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .30) !important;
}
html.dark #view-settings label { color: #cbd5e1 !important; }
#view-settings input[type="checkbox"] { accent-color: var(--brand) !important; }

#empty-students-msg {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--glass-light) !important;
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px dashed var(--glass-light-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .08) !important;
}
#empty-students-msg.hidden { display: none; }
html.dark #empty-students-msg { background: var(--dark-surface) !important; background-image: none !important; border-color: var(--glass-dark-line) !important; }
#empty-students-msg > svg {
  width: 70px !important; height: 70px !important; margin: 0 auto 18px !important; padding: 18px;
  color: #ffffff !important; background: var(--brand) !important; border: 0 !important; border-radius: 16px !important;
  box-shadow: none !important; animation: none !important; transform: none !important;
}
#empty-students-msg h3 { font-weight: 700 !important; }
#empty-students-msg p { color: var(--muted) !important; font-weight: 500 !important; }
html.dark #empty-students-msg p { color: var(--dark-muted) !important; }
#students-grid > div { overflow: hidden; transition: transform .18s ease, box-shadow .18s ease !important; }
#students-grid > div:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(15,23,42,.1) !important; }
#students-grid strong { font-size: 16px !important; font-weight: 700 !important; }
#students-grid span, #students-grid p { font-size: 13px !important; }

.report-kpis { perspective: none !important; }
.report-kpi {
  --kpi-accent: var(--brand);
  min-height: 140px;
  position: relative;
  padding: 20px;
  overflow: hidden;
  background: var(--glass-light) !important;
  border: 1px solid var(--glass-light-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .08) !important;
  transform: none !important;
  backdrop-filter: blur(18px) saturate(150%);
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.report-kpi:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(15,23,42,.1) !important; }
.report-kpi-cyan { --kpi-accent: var(--brand); }
.report-kpi-red { --kpi-accent: var(--danger); }
.report-kpi-gold { --kpi-accent: var(--warning); }
.report-kpi-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: var(--kpi-accent); border-radius: 14px; box-shadow: none !important; }
.report-kpi-icon svg { width: 16px; height: 16px; }
.report-kpi-label { display: block; margin-top: 14px; color: var(--muted); font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .1em !important; }
.report-kpi strong { display: block; margin-top: 6px; color: var(--ink); font-size: 44px !important; line-height: 1 !important; font-weight: 800 !important; }
.report-kpi small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .06em !important; }
html.dark .report-kpi { background: var(--dark-surface) !important; background-image: none !important; border-color: var(--glass-dark-line) !important; box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035) !important; }
html.dark .report-kpi-label, html.dark .report-kpi small { color: var(--dark-muted) !important; }
html.dark .report-kpi strong { color: var(--dark-ink) !important; }
.report-chart-card { min-height: 300px; background: var(--glass-light) !important; border: 1px solid var(--glass-light-line) !important; border-radius: 20px !important; box-shadow: 0 8px 28px rgba(15, 23, 42, .08) !important; transform: none !important; backdrop-filter: blur(18px) saturate(150%); }
html.dark .report-chart-card { background: var(--dark-surface) !important; background-image: none !important; border-color: var(--glass-dark-line) !important; }
.report-chart-card canvas { filter: none !important; }
.report-chart-card h4 { font-size: 17px !important; }
.report-chart-card h4 + span { font-size: 12px !important; font-weight: 500 !important; }

 table { font-size: 14px !important; }
table thead { color: #526171 !important; background: rgba(241, 245, 249, .55) !important; font-size: 11px !important; }
table th { font-weight: 700 !important; }
table td { font-size: 14px !important; line-height: 1.45 !important; font-weight: 500 !important; }
table tbody { background: rgba(255, 255, 255, .35) !important; }
table tbody tr { border-color: var(--line) !important; }
table tbody tr:hover { background: var(--surface-raised) !important; }
html.dark table thead { color: #c4d0dc !important; background: #111111 !important; }
html.dark table tbody { background: #080808 !important; }
html.dark table tbody tr { border-color: var(--dark-line) !important; }
html.dark table tbody tr:hover { background: var(--dark-raised) !important; }
#view-reports table th { padding-block: 15px !important; }
#view-reports table td { padding-block: 17px !important; }
#view-reports table td:first-child { font-weight: 600 !important; }

#modal-register, #modal-attendance, #modal-notify-parent { backdrop-filter: blur(4px) !important; }
#modal-register > div, #modal-attendance > div, #modal-notify-parent > div, .swal2-popup {
  color: var(--ink) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 28px !important;
  box-shadow: var(--shadow-lg) !important;
}
#modal-register:not(.hidden) > div,
#modal-attendance:not(.hidden) > div,
#modal-notify-parent:not(.hidden) > div,
.swal2-popup.swal2-show { animation: dialog-enter .2s ease-out both !important; }
.swal2-popup.swal2-hide { animation: dialog-exit .15s ease-in both !important; }
html.dark #modal-register > div, html.dark #modal-attendance > div,
html.dark #modal-notify-parent > div, html.dark .swal2-popup {
  color: var(--dark-ink) !important;
  background: var(--dark-surface) !important;
  border-color: var(--dark-line) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.65) !important;
}
#modal-register .rounded-3xl, #modal-register .rounded-2xl,
#modal-notify-parent .rounded-3xl, #modal-notify-parent .rounded-2xl,
#modal-attendance .rounded-3xl, #modal-attendance .rounded-2xl { border-radius: 20px !important; }
.swal2-title { color: var(--ink) !important; font-size: 20px !important; font-weight: 700 !important; }
.swal2-html-container { color: var(--muted) !important; font-size: 14px !important; line-height: 1.5 !important; }
html.dark .swal2-title { color: var(--dark-ink) !important; }
html.dark .swal2-html-container { color: var(--dark-muted) !important; }
.swal2-actions button { border-radius: 14px !important; box-shadow: none !important; }
.swal2-input, .swal2-select, .swal2-textarea,
.swal2-validation-message, .swal2-actions, .swal2-footer {
  border-radius: 16px !important;
}
.swal2-popup { overflow: hidden !important; padding: 28px !important; }
.swal2-input { min-height: 50px !important; }
.swal2-confirm, .swal2-cancel { min-height: 42px !important; padding-inline: 20px !important; }
.swal2-input:focus, .swal2-textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .28) !important;
}
.scanner-laser { background: var(--brand) !important; box-shadow: none !important; }

#mobile-drawer { background: var(--surface) !important; border-color: var(--line) !important; box-shadow: -12px 0 30px rgba(15,23,42,.16) !important; }
html.dark #mobile-drawer { background: var(--dark-surface) !important; border-color: var(--dark-line) !important; box-shadow: -12px 0 30px rgba(0,0,0,.35) !important; }

@keyframes dialog-enter { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dialog-exit { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(5px) scale(.99); } }
@keyframes content-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: content-enter .22s ease-out both !important; }

@media (max-width: 767px) {
  body { font-size: 15px !important; }
  main { padding: 12px !important; }
  .view-panel { width: 100%; min-width: 0; }
  .view-panel > :is(div, section, article, aside, form) { max-width: 100%; }
  .view-panel h2 { font-size: 23px !important; }
  .view-panel h3 { font-size: 18px !important; }
  .view-panel h4 { font-size: 16px !important; }
  .view-panel p { font-size: 14px !important; }
  button, .nav-tab { font-size: 13px !important; }
  table, table td { font-size: 13px !important; }
  .report-kpi { min-height: 124px; padding: 15px; }
  .report-kpi strong { font-size: 34px !important; }
  .report-kpi-label { font-size: 9px !important; }
  .report-chart-card { min-height: 250px; }
  .view-panel .overflow-x-auto {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .view-panel table { min-width: 680px; }
  #view-students table { min-width: 760px; }
  #view-reports table { min-width: 760px; }
  #mobile-drawer { width: min(88vw, 320px) !important; padding: 20px !important; }
  #modal-register, #modal-attendance, #modal-notify-parent { padding: 10px !important; }
  #modal-register > div, #modal-attendance > div, #modal-notify-parent > div {
    width: 100% !important;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    border-radius: 22px !important;
  }
  .swal2-popup {
    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }
  .swal2-actions { width: 100%; gap: 8px; }
  .swal2-actions button { flex: 1 1 120px; margin: 0 !important; }
  button:hover, #students-grid > div:hover, .report-kpi:hover { transform: none !important; }
}

@media (max-width: 560px) {
  header > div { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 7px !important; height: 76px !important; padding-inline: 9px !important; }
  header > div > div:first-child { min-width: 0 !important; width: auto !important; gap: 7px !important; overflow: visible !important; }
  header > div > div:first-child img { width: 46px !important; height: 46px !important; margin-left: 0 !important; transform: none !important; }
  header > div > div:first-child > div { min-width: 0 !important; }
  header h1 { width: max-content !important; max-width: none !important; overflow: visible !important; white-space: nowrap !important; font-size: clamp(12px,3.7vw,15px) !important; line-height: 1.2 !important; }
  header p { max-width: 100% !important; overflow: hidden !important; white-space: nowrap !important; font-size: 9px !important; }
  header > div > div:last-child { display: grid !important; grid-template-columns: repeat(3,34px) !important; gap: 4px !important; }
  header > div > div:last-child button { width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 0 !important; display: grid !important; place-items: center !important; }
  #btn-google-auth span { display: none !important; }
  main { padding: 12px !important; }
  .view-panel { gap: 12px; }
  .view-panel > div { border-radius: 22px !important; }
  #view-attendance > div:first-child { padding: 16px !important; gap: 14px !important; }
  #view-attendance > div:first-child > div:last-child,
  #view-attendance > div:first-child > div:last-child > button,
  #view-attendance > div:first-child > div:last-child > div { width: 100% !important; }
  #view-attendance > div:first-child > div:last-child > button { min-height: 42px; justify-content: center; }
  #students-grid { gap: 10px !important; }
  #students-grid > div { min-width: 0; padding: 12px !important; border-radius: 20px !important; }
  #students-grid h3 { font-size: 13px !important; }
  #students-grid button { min-height: 36px !important; line-height: 1.2 !important; }
  #empty-students-msg { min-height: 280px; padding: 28px 18px !important; border-radius: 22px !important; }
  #report-kpis { gap: 10px !important; }
  .report-kpi { min-height: 118px; padding: 13px !important; border-radius: 20px !important; }
  .report-kpi-icon { width: 32px; height: 32px; }
  .report-kpi-label { margin-top: 10px; line-height: 1.25 !important; }
  .report-kpi strong { font-size: 30px !important; }
  .report-kpi small { font-size: 9px !important; line-height: 1.25 !important; }
  .report-chart-card { min-height: 240px; padding: 14px !important; border-radius: 22px !important; }
  .report-chart-card > div:first-child { align-items: flex-start !important; gap: 8px; }
  #view-reports > div:first-child > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr; width: 100% !important; }
  #view-reports > div:first-child > div:last-child button:first-child { grid-column: 1 / -1; width: 100%; }
  #view-settings > div { padding: 16px !important; border-radius: 22px !important; }
  #view-settings > div > div:first-child { align-items: flex-start !important; gap: 10px; }
  #view-settings > div > div:first-child > div { min-width: 0; }
  #view-settings > div > div:first-child button { flex: 0 0 auto; padding-inline: 10px !important; }
  #modal-notify-parent .grid-cols-3 { gap: 6px !important; }
  #modal-notify-parent .grid-cols-3 button { min-width: 0; padding: 9px 5px !important; }
  #modal-notify-parent > div > div:last-child { align-items: stretch !important; }
  #modal-notify-parent > div > div:last-child > div { display: grid !important; grid-template-columns: auto minmax(0, 1fr); width: 100%; }
  #modal-notify-parent > div > div:last-child button { justify-content: center; }
  #modal-register > div { padding: 16px !important; }
  #modal-register > div > div:last-child { display: grid !important; grid-template-columns: 1fr 1.35fr; }
  #modal-register > div > div:last-child button { min-width: 0; padding-inline: 10px !important; white-space: normal; }
}

@media (max-width: 390px) {
  header > div { gap: 4px !important; padding-inline: 7px !important; }
  header > div > div:first-child { gap: 5px !important; }
  header > div > div:first-child img { width: 40px !important; height: 40px !important; }
  header h1 { font-size: clamp(12px,3.55vw,14px) !important; }
  header p { font-size: 8px !important; }
  header > div > div:last-child { grid-template-columns: repeat(3,30px) !important; gap: 3px !important; }
  header > div > div:last-child button { width: 30px !important; height: 30px !important; min-width: 30px !important; }
  header > div > div:last-child button svg { width: 16px !important; height: 16px !important; }
  main { padding: 10px !important; }
  #students-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #students-grid > div { padding: 10px !important; }
  #students-grid button { padding-inline: 6px !important; }
  #report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* === Strictly smooth edges: no sharp corners on any card, block, input or modal === */
.view-panel :is(div, section, aside, article, form):is(.rounded-2xl, .rounded-3xl):not([class*="rounded-full"]) { border-radius: 26px !important; }
.view-panel :is(div, section, aside, article, form):is(.rounded-xl, .rounded-lg):not([class*="rounded-full"]) { border-radius: 18px !important; }
.view-panel :is(div, section, aside, form):is(.rounded-md, .rounded-sm, .rounded):not([class*="rounded-full"]) { border-radius: 12px !important; }
.view-panel > :is(div, section, aside, article, form),
#students-grid > div, .report-kpi, .report-chart-card,
#mobile-drawer, #fz-chat-panel, .fz-bubble {
  border-radius: 24px !important;
}
#mobile-drawer { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* Visibly rounded surfaces, including dynamically generated cards and password prompts */
.view-panel > div,
.view-panel [class*="bg-white"]:not([class*="rounded-full"]),
.view-panel [class*="dark:bg-dark-card"]:not([class*="rounded-full"]),
.view-panel [class*="dark:bg-dark-elevated"]:not([class*="rounded-full"]),
#students-grid > div,
.swal2-popup,
.swal2-input,
.swal2-actions button {
  border-radius: 24px !important;
}
.swal2-input, .swal2-actions button { border-radius: 16px !important; }
.view-panel :is(input, select, textarea),
#view-settings :is(input, select, textarea) { border-radius: 12px !important; }
.view-panel table { border-collapse: separate !important; border-spacing: 0 !important; }
.view-panel thead > tr:first-child > th:first-child { border-top-left-radius: 12px !important; }
.view-panel thead > tr:first-child > th:last-child { border-top-right-radius: 12px !important; }
.view-panel tbody > tr:last-child > td:first-child { border-bottom-left-radius: 12px !important; }
.view-panel tbody > tr:last-child > td:last-child { border-bottom-right-radius: 12px !important; }

/* Inputs keep a modest radius regardless of utility classes */
.view-panel :is(input, select, textarea)[class],
#view-settings :is(input, select, textarea)[class] { border-radius: 12px !important; }

/* Final dark-mode guard: solid black/navy only, with no decorative gradients. */
html.dark :is(body, header, main, .view-panel, .view-panel > div, #students-grid > div,
  .report-kpi, .report-chart-card, #empty-students-msg, #mobile-drawer,
  #modal-register > div, #modal-attendance > div, #modal-notify-parent > div,
  .swal2-popup) {
  background-image: none !important;
}
html.dark .view-panel :is(section, article, aside, form, div):not([class*="rounded-full"]) {
  background-image: none !important;
}

/* Final pure-black dark treatment: neutral surfaces, no gradients or button glow. */
html.dark body,
html.dark main,
html.dark .view-panel { background-color: #000000 !important; }
html.dark .view-panel > div,
html.dark #students-grid > div,
html.dark #view-settings > div,
html.dark #view-reports > div,
html.dark .report-kpi,
html.dark .report-chart-card,
html.dark #empty-students-msg,
html.dark #mobile-drawer,
html.dark #modal-register > div,
html.dark #modal-attendance > div,
html.dark #modal-notify-parent > div,
html.dark .swal2-popup {
  background-color: #0a0a0a !important;
  background-image: none !important;
  border-color: #262626 !important;
}
html.dark .view-panel :is(.dark\:bg-dark-card, .dark\:bg-dark-elevated) {
  background-color: #111111 !important;
  background-image: none !important;
}
button[class*="shadow-blue"],
button[class*="shadow-emerald"],
button.bg-blue-500,
button.bg-blue-600,
button.bg-emerald-500,
button.bg-emerald-600,
.swal2-actions button {
  --tw-shadow: 0 0 #0000 !important;
  box-shadow: none !important;
  filter: none !important;
}
.view-panel > :is(div, section, aside, article, form),
#students-grid > div,
.report-kpi,
.report-chart-card,
#empty-students-msg,
#fz-chat-panel { border-radius: 26px !important; }
button:not(.rounded-full),
.nav-tab,
.swal2-actions button { border-radius: 16px !important; }

header nav { border-radius: 24px !important; overflow: hidden; }
header nav .nav-tab { border-radius: 18px !important; }

/* Final corner guard for every visible interactive surface and content block. */
:is(button, input, select, textarea):not([class*="rounded-full"]) {
  border-radius: 14px !important;
}
.view-panel :is([class*="card"], [class*="block"], [class*="panel"], [class*="shadow"], [class*="bg-white"], [class*="dark:bg-dark-card"], [class*="dark:bg-dark-elevated"]):not([class*="rounded-full"]),
#mobile-drawer,
.swal2-popup,
#fz-chat-panel,
.fz-bubble {
  border-radius: 26px !important;
  overflow: hidden;
}
/* Popups must stay scrollable on small screens — content was getting cut off. */
#modal-register > div,
#modal-attendance > div,
#modal-notify-parent > div {
  border-radius: 26px !important;
  max-height: 85dvh !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
  #modal-register > div, #modal-attendance > div, #modal-notify-parent > div { max-height: 90dvh !important; }
}
.swal2-input,
.swal2-select,
.swal2-textarea,
.swal2-actions button,
.fz-head-btns button,
#fz-chat-send {
  border-radius: 14px !important;
}