:root {
  --color-primary: #1a365d;
  --color-primary-dark: #12284a;
  --color-primary-light: #2c5282;
  --color-secondary: #2b6cb0;
  --color-secondary-hover: #2c5282;
  --color-accent: #d69e2e;
  --color-accent-dark: #b7791f;
  --color-success: #2f855a;
  --color-success-light: #9ae6b4;
  --color-danger: #c53030;
  --color-danger-light: #fed7d7;
  --color-warning: #dd6b20;
  --color-warning-light: #feebc8;
  --color-surface: #f7fafc;
  --color-white: #ffffff;
  --color-gray-50: #f7fafc;
  --color-gray-100: #edf2f7;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e0;
  --color-gray-400: #a0aec0;
  --color-gray-500: #718096;
  --color-gray-600: #4a5568;
  --color-gray-700: #2d3748;
  --color-gray-800: #1a202c;
  --color-text: #2d3748;
  --color-text-muted: #718096;
  --color-border: #e2e8f0;
  --sidebar-width: 248px;
  --sidebar-offset: 284px;
  --sidebar-collapsed-width: 80px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 22px;
  --shadow-sm: 0 2px 6px rgba(0,0,0,.04);
  --shadow-md: 0 4px 14px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 24px rgba(26,54,93,.15);
  --shadow-xl: 0 16px 48px rgba(26,54,93,.2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-gray-800);
}
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

a { color: var(--color-secondary); text-decoration: none; }
a:hover { color: var(--color-primary); }

.page-loader {
  position: fixed; inset: 0; background: var(--color-white);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  transition: opacity .3s ease, visibility .3s ease;
}
.page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader .loader-inner {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.page-loader .brand {
  font-weight: 700; font-size: 20px;
  color: var(--color-gray-800);
  letter-spacing: 1px;
}
.page-loader .dots {
  display: flex; gap: 8px;
}
.page-loader .dots span {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-secondary);
  animation: dotPulse 1.2s infinite ease-in-out;
}
.page-loader .dots span:nth-child(2) { animation-delay: .15s; background: var(--color-primary); }
.page-loader .dots span:nth-child(3) { animation-delay: .3s; background: var(--color-accent); }
@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(.5); opacity: .5; }
  40% { transform: scale(1); opacity: 1; }
}

.app-layout { min-height: 100vh; display: block; position: relative; }

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  margin: 18px;
  background: var(--color-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  z-index: 100;
  overflow: hidden;
}
.sidebar-header {
  padding: 22px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-header .logo-mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 16px;
  flex-shrink: 0;
}
.sidebar-header .logo-mark.logo-mark-img {
  background: #0b0b0b;
  object-fit: cover;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
}
.sidebar-header .logo-text { color: #fff; font-weight: 700; font-size: 15px; line-height: 1.1; }
.sidebar-header .logo-sub { color: rgba(255,255,255,.6); font-size: 11px; font-weight: 500; letter-spacing: .3px; }

.sidebar-nav {
  padding: 14px 10px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }

.sidebar-section-title,
.sidebar-section-toggle {
  padding: 10px 12px;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
}
.sidebar-section-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  font-family: inherit; text-align: left;
  border-radius: 10px;
  margin: 8px 0 4px;
  transition: color .15s ease, background .15s ease;
}
.sidebar-section-name {
  flex: 1;
  min-width: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-section-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
}
.sidebar-section-chevron {
  font-size: 18px !important;
  opacity: .85;
  color: #fff;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.sidebar-group.collapsed .sidebar-section-chevron { transform: rotate(-90deg); }
.sidebar-group-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .22s ease;
}
.sidebar-group.collapsed .sidebar-group-body { grid-template-rows: 0fr; }
.sidebar-group-inner { overflow: hidden; min-height: 0; }
.sidebar-group.is-active-group .sidebar-section-toggle { color: rgba(255,255,255,.7); }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  margin: 2px 0;
  border-radius: 12px;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  transition: all .18s ease;
  text-decoration: none;
  font-weight: 500;
  font-size: 13.5px;
}
.nav-item:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.nav-item.active {
  background: var(--color-secondary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(43,108,176,.35);
}
.nav-item .material-symbols-rounded { font-size: 20px; opacity: .95; }
.nav-item.nav-badge { position: relative; }
.nav-item.nav-badge::after {
  content: attr(data-badge);
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: var(--color-danger); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px;
}

.sidebar-foot {
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 8px;
}
.sidebar-footer {
  padding: 4px 6px;
  display: flex; align-items: center; gap: 10px;
  flex: 1;
  min-width: 0;
  border-radius: 10px;
}
a.sidebar-footer { text-decoration: none; color: inherit; }
a.sidebar-footer:hover { background: rgba(255,255,255,.06); }
.sidebar-foot-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sidebar-foot-btn {
  width: 36px; height: 36px; border: none; border-radius: 10px;
  background: rgba(255,255,255,.08); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; padding: 0;
  font-family: inherit;
}
.sidebar-foot-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.sidebar-foot-btn.is-on { background: var(--color-secondary); color: #fff; }
.sidebar-foot-btn .material-symbols-rounded { font-size: 20px; color: inherit; }
.sidebar-footer .user-avatar {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px;
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-footer .user-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sidebar-footer .user-info { flex: 1; min-width: 0; }
.sidebar-footer .user-name { color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer .user-role { color: rgba(255,255,255,.55); font-size: 11px; font-weight: 500; }

.main-wrapper {
  margin-left: var(--sidebar-offset);
  min-height: 100vh;
  display: flex; flex-direction: column;
}

.topbar {
  margin: 18px 18px 0 18px;
  padding: 0 20px;
  height: 64px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky; top: 18px; z-index: 90;
}
.topbar-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.topbar-title { font-weight: 700; font-size: 16px; color: var(--color-gray-800); }
.topbar-breadcrumbs {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-gray-500); font-weight: 500;
}
.topbar-breadcrumbs a { color: var(--color-gray-500); }
.topbar-breadcrumbs a:hover { color: var(--color-secondary); }
.topbar-breadcrumbs .sep { opacity: .4; }

.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--color-gray-50);
  padding: 8px 14px;
  border-radius: 10px;
  flex: 1; max-width: 360px;
  border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.search-box:focus-within {
  background: var(--color-white);
  border-color: var(--color-secondary);
}
.search-box .material-symbols-rounded { color: var(--color-gray-400); font-size: 20px; }
.search-box input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--color-text);
}

.topbar-right { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--color-gray-50);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-gray-600);
  transition: all .15s ease;
  position: relative;
}
.icon-btn:hover { background: var(--color-gray-100); color: var(--color-secondary); }
.icon-btn .badge-dot {
  position: absolute; top: 8px; right: 9px;
  width: 9px; height: 9px;
  background: var(--color-danger);
  border: 2px solid #fff; border-radius: 50%;
}
.icon-btn .badge-count {
  position: absolute; top: 5px; right: 5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--color-danger); color: #fff;
  border-radius: 9px;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

.user-menu {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 4px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s;
  position: relative;
}
.user-menu:hover { background: var(--color-gray-50); }
.user-menu .user-initials {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.user-menu .user-initials img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.user-menu .user-details { display: none; }
.user-menu .user-details .um-name { font-size: 13px; font-weight: 600; color: var(--color-gray-800); }
.user-menu .user-details .um-role { font-size: 11px; color: var(--color-gray-500); }
.user-menu .material-symbols-rounded { font-size: 18px; color: var(--color-gray-500); }
@media (min-width: 1100px) {
  .user-menu .user-details { display: block; }
}

.dropdown-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px; background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border);
  padding: 8px;
  display: none; z-index: 200;
  animation: dropFade .18s ease;
}
.dropdown-menu.show { display: block; }
@keyframes dropFade { from { opacity: 0; transform: translateY(-6px);} to { opacity: 1; transform: translateY(0);} }
.dropdown-item .um-kbd {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-gray-500);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1px 6px;
}
button.dropdown-item {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
html.focus-host,
html.focus-host body {
  height: 100%;
  overflow: hidden;
}
html.focus-ready body > *:not(.focus-shell) { display: none !important; }
.focus-shell {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--color-surface);
}
.focus-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--color-surface);
}
.focus-resume {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100001;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--color-secondary);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.focus-resume[hidden] { display: none !important; }
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  color: var(--color-gray-700); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .12s;
}
.dropdown-item:hover { background: var(--color-gray-50); color: var(--color-secondary); }
.dropdown-item .material-symbols-rounded { font-size: 18px; color: var(--color-gray-500); }
.dropdown-item.danger { color: var(--color-danger); }
.dropdown-item.danger:hover { background: var(--color-danger-light); }
.dropdown-divider { height: 1px; background: var(--color-gray-100); margin: 6px 4px; }

.content {
  margin: 18px;
  padding: 0;
  flex: 1;
}
.content-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 14px;
}
.content-header .ch-left h1 { margin-bottom: 4px; }
.content-header .ch-left p { color: var(--color-gray-500); font-size: 13.5px; }
.content-header .ch-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  border: 1px solid var(--color-gray-100);
}
.card + .card { margin-top: 18px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; gap: 12px; flex-wrap: wrap;
}
.card-head h3 { font-size: 16px; font-weight: 700; color: var(--color-gray-800); }
.card-head .card-head-sub { font-size: 12.5px; color: var(--color-gray-500); margin-top: 2px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
  transition: transform .15s, box-shadow .15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card .sc-info { flex: 1; min-width: 0; }
.stat-card .sc-label {
  font-size: 12px; font-weight: 600; color: var(--color-gray-500);
  letter-spacing: .3px; text-transform: uppercase; margin-bottom: 8px;
}
.stat-card .sc-value {
  font-size: 28px; font-weight: 800; color: var(--color-gray-800);
  line-height: 1; margin-bottom: 6px;
}
.stat-card .sc-foot {
  font-size: 12px; color: var(--color-gray-500); font-weight: 500;
}
.stat-card .sc-foot .up { color: var(--color-success); }
.stat-card .sc-foot .down { color: var(--color-danger); }
.stat-card .sc-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-card .sc-icon.blue { background: rgba(43,108,176,.1); color: var(--color-secondary); }
.stat-card .sc-icon.green { background: rgba(47,133,90,.1); color: var(--color-success); }
.stat-card .sc-icon.amber { background: rgba(214,158,46,.12); color: var(--color-accent-dark); }
.stat-card .sc-icon.rose { background: rgba(197,48,48,.1); color: var(--color-danger); }
.stat-card .sc-icon.indigo { background: rgba(26,54,93,.1); color: var(--color-primary); }
.stat-card .sc-icon .material-symbols-rounded { font-size: 24px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px;
  border-radius: 10px;
  font-family: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; border: none;
  transition: all .15s ease;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.btn .material-symbols-rounded { font-size: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled,
.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  transform: none;
}
.btn-primary {
  background: var(--color-secondary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(43,108,176,.25);
}
.btn-primary:hover { background: var(--color-primary); color: #fff; box-shadow: 0 4px 14px rgba(26,54,93,.3); }
.btn-secondary {
  background: var(--color-white); color: var(--color-gray-700);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover { background: var(--color-gray-50); border-color: var(--color-gray-300); }
.btn-success { background: var(--color-success); color: #fff; box-shadow: 0 2px 8px rgba(47,133,90,.25);}
.btn-success:hover { background: #276749; color: #fff; }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #9b2c2c; color: #fff; }
.btn-warning { background: var(--color-warning); color: #fff; }
.btn-warning:hover { background: #c05621; color: #fff; }
.btn-outline-primary {
  background: var(--color-white); color: var(--color-secondary);
  border: 1px solid rgba(43,108,176,.3);
}
.btn-outline-primary:hover { background: rgba(43,108,176,.08); border-color: var(--color-secondary); }
.btn-sm { padding: 7px 12px; font-size: 12px; border-radius: 8px; }
.btn-sm .material-symbols-rounded { font-size: 16px; }
.btn-lg { padding: 13px 22px; font-size: 14px; }
.btn-block { width: 100%; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  line-height: 1.5;
}
.badge-success { background: #c6f6d5; color: #22543d; }
.badge-danger { background: #fed7d7; color: #742a2a; }
.badge-warning { background: #feebc8; color: #744210; }
.badge-info { background: #bee3f8; color: #2a4365; }
.badge-muted { background: var(--color-gray-100); color: var(--color-gray-600); }
.badge-primary { background: rgba(43,108,176,.15); color: var(--color-primary); }
.badge-amber { background: #faf089; color: #744210; }

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-weight: 600; font-size: 13px;
  color: var(--color-gray-700);
  margin-bottom: 6px;
}
.form-group label .req { color: var(--color-danger); margin-left: 2px; }
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: inherit; font-size: 13.5px; color: var(--color-text);
  background-color: var(--color-white);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  box-shadow: none;
  appearance: none;
}
.form-control:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(43,108,176,.12);
}
textarea.form-control { resize: vertical; min-height: 90px; line-height: 1.5; }
select.form-control { appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23718096' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.form-help { font-size: 12px; color: var(--color-gray-500); margin-top: 6px; }
.form-error { color: var(--color-danger); font-size: 12px; margin-top: 4px; font-weight: 500; }

.ss-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: top;
  min-width: 0;
  max-width: 100%;
}
.ss-wrap.ss-block { display: flex; width: 100%; }
.ss-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.ss-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  background-image: none !important;
  background-color: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 13.5px;
  padding: 10px 36px 10px 14px;
  padding-right: 36px !important;
  position: relative;
  outline: none;
  box-sizing: border-box;
}
.ss-trigger:focus,
.ss-trigger:focus-visible {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(43,108,176,.12);
}
.ss-trigger .ss-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-trigger.is-placeholder .ss-value { color: var(--color-gray-400); }
.ss-trigger .ss-caret {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--color-gray-500);
  pointer-events: none;
  transition: transform .15s;
}
.ss-wrap.is-open .ss-caret { transform: translateY(-50%) rotate(180deg); }
.ss-wrap.is-disabled { pointer-events: none; }
.ss-wrap.is-disabled .ss-trigger {
  opacity: .6;
  cursor: not-allowed;
}
.ss-wrap.ss-invalid .ss-trigger {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(197,48,48,.12);
}
.ss-panel {
  position: fixed;
  z-index: 6200;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ss-panel[hidden] { display: none !important; }
.ss-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-gray-50);
}
.ss-search-wrap .material-symbols-rounded {
  font-size: 18px;
  color: var(--color-gray-400);
}
.ss-search {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--color-text);
}
.ss-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  max-height: 260px;
}
.ss-option {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-gray-800);
  cursor: pointer;
  line-height: 1.35;
}
.ss-option:hover,
.ss-option.is-active {
  background: rgba(43,108,176,.1);
  color: var(--color-primary);
}
.ss-option.is-selected {
  background: rgba(43,108,176,.16);
  color: var(--color-primary);
  font-weight: 700;
}
.ss-option.is-disabled {
  opacity: .45;
  cursor: default;
}
.ss-empty {
  padding: 14px 10px;
  text-align: center;
  color: var(--color-gray-500);
  font-size: 13px;
  font-weight: 500;
}
.filter-select .ss-wrap {
  width: auto;
  min-width: 140px;
  flex: 1;
}
.filter-select .ss-trigger {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 22px 0 0 !important;
  min-height: 22px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 0;
}
.filter-select .ss-trigger .ss-caret { right: 0; font-size: 18px; }

.alert {
  padding: 14px 16px; border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 500;
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.alert .material-symbols-rounded { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.alert-success { background: #f0fff4; border-color: #9ae6b4; color: #22543d; }
.alert-danger { background: #fff5f5; border-color: #feb2b2; color: #742a2a; }
.alert-warning { background: #fffaf0; border-color: #fbd38d; color: #744210; }
.alert-info { background: #ebf8ff; border-color: #90cdf4; color: #2a4365; }

.data-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  max-height: 500px;
  overflow-y: auto;
}
.data-table-wrapper table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.data-table-wrapper::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
.data-table-wrapper::-webkit-scrollbar-track {
  background: var(--color-gray-50);
  border-radius: 999px;
}
.data-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: 999px;
  border: 2px solid var(--color-gray-50);
}
.data-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead th {
  background: var(--color-gray-50);
  color: var(--color-gray-600);
  font-weight: 700; font-size: 12px;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  letter-spacing: .2px;
  text-transform: uppercase;
}
.data-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-700);
  vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--color-gray-50); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .td-actions { white-space: nowrap; text-align: right; }
.action-icon-btn {
  width: 32px; height: 32px; border-radius: 8px;
  border: none; background: var(--color-gray-50);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-gray-500);
  transition: all .13s; margin-left: 2px;
}
.action-icon-btn:hover { background: var(--color-primary); color: #fff; }
.action-icon-btn.danger:hover { background: var(--color-danger); color: #fff; }
.action-icon-btn.success:hover { background: var(--color-success); color: #fff; }
.action-icon-btn .material-symbols-rounded { font-size: 17px; }

.mobile-nav {
  display: none;
  position: fixed;
  bottom: 14px; left: 14px; right: 14px;
  height: 64px;
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  z-index: 95;
  padding: 8px 6px;
  align-items: center;
  justify-content: space-around;
}
.mobile-nav a, .mobile-nav button {
  flex: 1;
  max-width: 90px;
  height: 100%;
  border: none; background: transparent;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  border-radius: 16px;
  cursor: pointer;
  color: var(--color-gray-500);
  font-family: inherit;
  text-decoration: none;
  transition: all .18s;
}
.mobile-nav a .material-symbols-rounded,
.mobile-nav button .material-symbols-rounded { font-size: 22px; }
.mobile-nav a span.lbl,
.mobile-nav button span.lbl { font-size: 10px; font-weight: 600; line-height: 1; }
.mobile-nav a.active,
.mobile-nav button.active {
  background: rgba(43,108,176,.12);
  color: var(--color-secondary);
}
.mobile-nav a.active {
  box-shadow: inset 0 0 0 2px rgba(43,108,176,.2);
}
.mobile-nav .mn-badge-wrap { position: relative; }
.mobile-nav .mn-badge {
  position: absolute; top: 2px; right: calc(50% - 22px);
  background: var(--color-danger); color: #fff;
  font-size: 9px; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 1024px) {
  .sidebar { transform: translateX(-120%); transition: transform .25s ease; }
  .sidebar.show { transform: translateX(0); }
  .main-wrapper { margin-left: 0; }
  .topbar { margin: 12px; height: 52px; padding: 0 14px; }
  .content { margin: 12px; padding-bottom: 92px; }
  .mobile-nav { display: flex; }
  .search-box { display: none; }
  .user-menu .user-details { display: none !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-card .sc-value { font-size: 22px; }
  .stat-card .sc-icon { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
  .content-header { flex-direction: column; align-items: stretch; }
  .content-header .ch-right { flex-wrap: nowrap; overflow-x: auto; }
  .form-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .btn { padding: 9px 14px; }
  .card { padding: 16px; border-radius: 14px; }
}

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 98;
  backdrop-filter: blur(2px);
}
.sidebar-backdrop.show { display: block; }
@media (min-width: 1025px) { .sidebar-backdrop { display: none !important; } }

.notifications-panel {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  width: 380px; max-width: calc(100vw - 24px);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border);
  z-index: 200;
  display: none;
  overflow: hidden;
  animation: dropFade .18s ease;
}
.notifications-panel.show { display: block; }
.np-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-gray-100);
  display: flex; align-items: center; justify-content: space-between;
}
.np-head h4 { font-size: 14px; font-weight: 700; }
.np-head .np-count { font-size: 12px; color: var(--color-gray-500); }
.np-list { max-height: 420px; overflow-y: auto; }
.np-item {
  display: flex; gap: 12px; padding: 13px 18px;
  border-bottom: 1px solid var(--color-gray-50);
  cursor: pointer;
  transition: background .12s;
}
.np-item:hover { background: var(--color-gray-50); }
.np-item.unread { background: rgba(43,108,176,.04); }
.np-item .np-icon {
  width: 36px; height: 36px; border-radius: 10px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.np-item .np-icon.info { background: #bee3f8; color: var(--color-secondary); }
.np-item .np-icon.success { background: #c6f6d5; color: var(--color-success); }
.np-item .np-icon.warning { background: #feebc8; color: var(--color-warning); }
.np-item .np-icon.danger { background: #fed7d7; color: var(--color-danger); }
.np-item .np-icon .material-symbols-rounded { font-size: 18px; }
.np-item .np-content { flex: 1; min-width: 0; }
.np-item .np-title { font-size: 13px; font-weight: 600; color: var(--color-gray-800); margin-bottom: 3px; }
.np-item .np-msg { font-size: 12px; color: var(--color-gray-500); line-height: 1.4; }
.np-item .np-time { font-size: 11px; color: var(--color-gray-400); margin-top: 5px; }
.np-empty { padding: 40px 20px; text-align: center; color: var(--color-gray-500); }
.np-empty .material-symbols-rounded { font-size: 42px; color: var(--color-gray-300); display: block; margin-bottom: 10px; }
.np-foot {
  padding: 10px 18px;
  border-top: 1px solid var(--color-gray-100);
  text-align: center;
}
.np-foot a { font-size: 12.5px; font-weight: 600; }

.empty-state {
  text-align: center; padding: 50px 20px;
  color: var(--color-gray-500);
}
.empty-state .material-symbols-rounded {
  font-size: 52px; color: var(--color-gray-300); display: block; margin-bottom: 14px;
}
.empty-state h4 { color: var(--color-gray-600); margin-bottom: 6px; }
.empty-state p { font-size: 13.5px; }

.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-end { display: flex; justify-content: flex-end; align-items: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.text-muted { color: var(--color-gray-500); }
.text-sm { font-size: 12.5px; } .text-xs { font-size: 11px; }
.font-bold { font-weight: 700; } .font-semibold { font-weight: 600; }
.text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } .text-danger { color: var(--color-danger); } .text-success { color: var(--color-success); }
.w-full { width: 100%; }
.hidden { display: none !important; }
@media (min-width: 1025px) { .md\:hidden { display: none !important; } }
@media (max-width: 1024px) { .lg\:hidden { display: none !important; } }

.tabs {
  display: flex; gap: 4px;
  background: var(--color-gray-50);
  padding: 5px;
  border-radius: 12px;
  margin-bottom: 18px;
  overflow-x: auto;
}
.tab-item {
  padding: 9px 16px;
  border-radius: 8px;
  font-weight: 600; font-size: 13px;
  color: var(--color-gray-600);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  border: none; background: transparent; font-family: inherit;
}
.tab-item:hover { color: var(--color-secondary); }
.tab-item.active {
  background: var(--color-white); color: var(--color-secondary);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 500; display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.modal-backdrop.show { display: flex; animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0;} to { opacity: 1;} }
.modal {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: modalPop .2s ease;
}
@keyframes modalPop { from { transform: scale(.95); opacity: 0;} to { transform: scale(1); opacity: 1;} }
.modal-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-gray-100);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-head h3 { font-size: 17px; }
.modal-close {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--color-gray-50);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-gray-500);
  transition: background .12s;
}
.modal-close:hover { background: var(--color-gray-100); color: var(--color-danger); }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--color-gray-100);
  display: flex; justify-content: flex-end; gap: 10px;
  flex-wrap: wrap;
}

.pwa-install {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 9800;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(26,54,93,.18);
  max-width: 480px;
  margin: 0 auto;
}
.pwa-install.show { display: flex; }
.pwa-install img {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
}
.pwa-install .pwa-copy { flex: 1; min-width: 0; }
.pwa-install .pwa-copy strong { display: block; color: var(--color-gray-800); font-size: 13.5px; }
.pwa-install .pwa-copy span { display: block; color: var(--color-gray-500); font-size: 12px; margin-top: 2px; }
.pwa-install .pwa-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pwa-install .pwa-actions button {
  border: 0; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.pwa-install .pwa-install-btn { background: var(--color-primary); color: #fff; }
.pwa-install .pwa-dismiss-btn { background: var(--color-gray-100); color: var(--color-gray-600); }
@media (display-mode: standalone), (display-mode: minimal-ui) {
  .pwa-install { display: none !important; }
  body { padding-top: env(safe-area-inset-top, 0); }
}

.theme-toggle .theme-icon-to-light { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-to-dark { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-to-light { display: inline-block; }
.collapse-icon-open { display: none !important; }
html.sidebar-collapsed .collapse-icon-close { display: none !important; }
html.sidebar-collapsed .collapse-icon-open { display: inline-block !important; }

.auth-theme-wrap,
.global-theme-wrap {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 80;
}
.auth-theme-wrap .icon-btn,
.global-theme-wrap .icon-btn {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
body:has(.topbar) .global-theme-wrap,
body:has(.site-nav-wrap) .global-theme-wrap {
  display: none;
}
body.scan-app-live .global-theme-wrap {
  top: auto;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.sidebar-collapse-btn {
  margin-left: auto;
  width: 32px; height: 32px; border-radius: 8px;
  border: none; cursor: pointer;
  background: rgba(255,255,255,.08);
  color: #fff;
  display: none;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s ease;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,.16); }
.sidebar-collapse-btn .material-symbols-rounded { font-size: 20px; }
@media (min-width: 1025px) {
  .sidebar-collapse-btn { display: flex; }
  .sidebar, .main-wrapper {
    transition: width .22s ease, margin-left .22s ease;
  }
  html.sidebar-collapsed {
    --sidebar-width: var(--sidebar-collapsed-width);
    --sidebar-offset: calc(var(--sidebar-collapsed-width) + 36px);
  }
  html.sidebar-collapsed .sidebar-brand-text,
  html.sidebar-collapsed .sidebar-section-toggle,
  html.sidebar-collapsed .nav-item > span:not(.material-symbols-rounded),
  html.sidebar-collapsed .sidebar-footer .user-info,
  html.sidebar-collapsed .nav-item.nav-badge::after {
    display: none;
  }
  html.sidebar-collapsed .sidebar-header {
    justify-content: center;
    flex-wrap: wrap;
    padding: 16px 10px 12px;
    gap: 8px;
  }
  html.sidebar-collapsed .sidebar-collapse-btn { margin-left: 0; }
  html.sidebar-collapsed .sidebar-nav { padding: 10px 8px; }
  html.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 11px 8px;
    gap: 0;
    position: relative;
  }
  html.sidebar-collapsed .nav-item:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #0b1220;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    z-index: 40;
    pointer-events: none;
  }
  html.sidebar-collapsed .sidebar-group.collapsed .sidebar-group-body {
    grid-template-rows: 1fr;
  }
  html.sidebar-collapsed .sidebar-foot {
    flex-direction: column;
    padding: 10px 8px;
  }
  html.sidebar-collapsed .sidebar-footer {
    justify-content: center;
    padding: 4px;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-surface: #0b1220;
  --color-white: #151d2e;
  --color-gray-50: #1b2436;
  --color-gray-100: #243044;
  --color-gray-200: #334155;
  --color-gray-300: #475569;
  --color-gray-400: #7c8ca4;
  --color-gray-500: #94a3b8;
  --color-gray-600: #cbd5e1;
  --color-gray-700: #e2e8f0;
  --color-gray-800: #f1f5f9;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-border: #2a364a;
  --color-secondary: #60a5fa;
  --color-secondary-hover: #93c5fd;
  --color-accent: #fbbf24;
  --color-accent-dark: #f59e0b;
  --shadow-sm: 0 2px 6px rgba(0,0,0,.28);
  --shadow-md: 0 4px 14px rgba(0,0,0,.35);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.45);
}
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

[data-theme="dark"] .alert-success { background: rgba(47,133,90,.16); border-color: rgba(154,230,180,.35); color: #9ae6b4; }
[data-theme="dark"] .alert-danger { background: rgba(197,48,48,.16); border-color: rgba(254,178,178,.35); color: #feb2b2; }
[data-theme="dark"] .alert-warning { background: rgba(214,158,46,.14); border-color: rgba(251,211,141,.35); color: #fbd38d; }
[data-theme="dark"] .alert-info { background: rgba(43,108,176,.16); border-color: rgba(144,205,244,.3); color: #90cdf4; }
[data-theme="dark"] .badge-success { background: rgba(47,133,90,.22); color: #9ae6b4; }
[data-theme="dark"] .badge-danger { background: rgba(197,48,48,.22); color: #feb2b2; }
[data-theme="dark"] .badge-warning,
[data-theme="dark"] .badge-amber { background: rgba(214,158,46,.22); color: #fbd38d; }
[data-theme="dark"] .badge-info { background: rgba(43,108,176,.22); color: #90cdf4; }
[data-theme="dark"] .badge-primary { background: rgba(96,165,250,.18); color: #93c5fd; }
[data-theme="dark"] .bg-green-100 { background-color: rgba(47,133,90,.22) !important; }
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-800 { color: #9ae6b4 !important; }
[data-theme="dark"] .bg-red-100,
[data-theme="dark"] .bg-rose-100 { background-color: rgba(197,48,48,.22) !important; }
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-rose-800 { color: #feb2b2 !important; }
[data-theme="dark"] .bg-yellow-100,
[data-theme="dark"] .bg-amber-100 { background-color: rgba(214,158,46,.22) !important; }
[data-theme="dark"] .text-yellow-800,
[data-theme="dark"] .text-amber-800 { color: #fbd38d !important; }
[data-theme="dark"] .bg-blue-100,
[data-theme="dark"] .bg-sky-100 { background-color: rgba(43,108,176,.22) !important; }
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-sky-800 { color: #93c5fd !important; }
[data-theme="dark"] .bg-gray-100 { background-color: var(--color-gray-100) !important; }
[data-theme="dark"] .text-gray-700 { color: var(--color-gray-700) !important; }
[data-theme="dark"] .np-item .np-icon.info { background: rgba(43,108,176,.25); }
[data-theme="dark"] .np-item .np-icon.success { background: rgba(47,133,90,.25); }
[data-theme="dark"] .np-item .np-icon.warning { background: rgba(214,158,46,.25); }
[data-theme="dark"] .np-item .np-icon.danger { background: rgba(197,48,48,.25); }
[data-theme="dark"] .btn-primary:hover { background: #1e4a8a; }
[data-theme="dark"] .action-icon-btn:hover { background: var(--color-secondary); }
[data-theme="dark"] .text-primary { color: #93c5fd; }
[data-theme="dark"] .bg-white { background-color: var(--color-white) !important; }
[data-theme="dark"] .dropdown-item.danger:hover { background: rgba(197,48,48,.22); }
[data-theme="dark"] .stat-card .sc-icon.indigo { color: #93c5fd; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { color-scheme: dark; }

[data-theme="dark"] .site-nav-wrap {
  background: rgba(11,18,32,.92);
  border-bottom-color: var(--color-border);
  box-shadow: none;
}
[data-theme="dark"] .site-brand-text strong { color: var(--color-gray-800); }
[data-theme="dark"] .site-brand-text small { color: var(--color-gray-500); }
[data-theme="dark"] .site-nav-links a.nav-link { color: var(--color-gray-600); }
[data-theme="dark"] .site-nav-links a.nav-link:hover,
[data-theme="dark"] .site-nav-links a.nav-link.is-active { color: #fff; background: rgba(96,165,250,.12); }
[data-theme="dark"] .site-nav-actions { border-left-color: var(--color-border); }
[data-theme="dark"] .site-nav-actions .btn-outline-primary {
  background: var(--color-white);
  color: var(--color-gray-700);
  border-color: var(--color-border);
}
[data-theme="dark"] .site-nav-toggle,
[data-theme="dark"] .site-nav-mobile-tools .theme-toggle {
  background: var(--color-white);
  color: var(--color-gray-800);
  border-color: var(--color-border);
}
@media (max-width: 900px) {
  [data-theme="dark"] .site-nav-links {
    background: var(--color-white);
    border-color: var(--color-border);
  }
}
[data-theme="dark"] .landing-footer {
  background: var(--color-surface);
  border-top-color: var(--color-border);
}
[data-theme="dark"] .landing-footer .foot-brand h4,
[data-theme="dark"] .landing-footer .foot-col h5 { color: var(--color-gray-800); }
[data-theme="dark"] .landing-footer .foot-brand p,
[data-theme="dark"] .landing-footer .foot-bottom { color: var(--color-gray-500); }
[data-theme="dark"] .landing-footer .foot-col ul a { color: var(--color-gray-600); }
[data-theme="dark"] .landing-footer .foot-bottom { border-top-color: var(--color-border); }
[data-theme="dark"] .hero-section,
[data-theme="dark"] .about-hero,
[data-theme="dark"] .apply-page {
  background:
    radial-gradient(circle at 85% 15%, rgba(214,158,46,.12), transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(43,108,176,.16), transparent 45%),
    linear-gradient(180deg, #0b1220 0%, #151d2e 100%);
}
[data-theme="dark"] .hero-kicker {
  color: var(--color-gray-700);
  background: rgba(96,165,250,.12);
}
[data-theme="dark"] .hero-copy h1,
[data-theme="dark"] .section-head h2,
[data-theme="dark"] .about-hero h1,
[data-theme="dark"] .gal-hero h1,
[data-theme="dark"] .res-hero h1,
[data-theme="dark"] .page-head h1,
[data-theme="dark"] .apply-hero h1,
[data-theme="dark"] .content-wrap h2,
[data-theme="dark"] .faq h2 {
  color: var(--color-gray-800);
}
[data-theme="dark"] .hero-copy p,
[data-theme="dark"] .hero-meta .hm,
[data-theme="dark"] .section-head p,
[data-theme="dark"] .about-hero .lead,
[data-theme="dark"] .content-wrap p,
[data-theme="dark"] .gal-hero p,
[data-theme="dark"] .res-hero p,
[data-theme="dark"] .page-head p,
[data-theme="dark"] .apply-hero p {
  color: var(--color-gray-600);
}
[data-theme="dark"] .feat-card,
[data-theme="dark"] .about-card,
[data-theme="dark"] .about-stat,
[data-theme="dark"] .pipe-item,
[data-theme="dark"] .benefit-card,
[data-theme="dark"] .res-card,
[data-theme="dark"] .faq details,
[data-theme="dark"] .apply-card,
[data-theme="dark"] .apply-hero-meta span,
[data-theme="dark"] .note {
  background: var(--color-white);
  border-color: var(--color-border);
}
[data-theme="dark"] .feat-card h3,
[data-theme="dark"] .about-card h3,
[data-theme="dark"] .about-stat b,
[data-theme="dark"] .pipe-item h3,
[data-theme="dark"] .benefit-card h3,
[data-theme="dark"] .res-card h3,
[data-theme="dark"] .faq summary,
[data-theme="dark"] .apply-form-head h2,
[data-theme="dark"] .apply-help b,
[data-theme="dark"] .exam-card h3 {
  color: var(--color-gray-800);
}
[data-theme="dark"] .feat-card p,
[data-theme="dark"] .about-card p,
[data-theme="dark"] .about-stat span,
[data-theme="dark"] .pipe-item p,
[data-theme="dark"] .benefit-card p,
[data-theme="dark"] .res-card p,
[data-theme="dark"] .faq details p,
[data-theme="dark"] .exam-card p,
[data-theme="dark"] .exam-card ul li,
[data-theme="dark"] .apply-form-head .intro,
[data-theme="dark"] .apply-help,
[data-theme="dark"] .note {
  color: var(--color-gray-600);
}
[data-theme="dark"] .exam-card {
  background: linear-gradient(135deg, var(--color-white), var(--color-gray-50));
  border-color: var(--color-border);
}
[data-theme="dark"] .exam-card .subject-pills span {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}
[data-theme="dark"] .exam-card.uce .exam-badge { color: #93c5fd; }
[data-theme="dark"] .exam-card.uace .exam-badge { color: #fbd38d; }
[data-theme="dark"] .schedule,
[data-theme="dark"] .tl-item,
[data-theme="dark"] .gal-card,
[data-theme="dark"] .gal-filters button {
  background: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-gray-600);
}
[data-theme="dark"] .content-wrap h1,
[data-theme="dark"] .exam-card h2,
[data-theme="dark"] .schedule h2,
[data-theme="dark"] .gal-card h3 {
  color: var(--color-gray-800);
}
[data-theme="dark"] .gal-card p,
[data-theme="dark"] .content-wrap p.intro { color: var(--color-gray-600); }
[data-theme="dark"] .uce .badge-inline { color: #93c5fd; }
[data-theme="dark"] .stepper-step,
[data-theme="dark"] .review-item {
  background: var(--color-gray-50);
  border-color: var(--color-border);
}
[data-theme="dark"] .stepper-step.active {
  background: rgba(43,108,176,.16);
  border-color: rgba(96,165,250,.45);
}
[data-theme="dark"] .stepper-step.done {
  background: rgba(47,133,90,.14);
  border-color: rgba(154,230,180,.35);
}
[data-theme="dark"] .stepper-step .txt .st,
[data-theme="dark"] .review-item .rv { color: var(--color-gray-500); }
[data-theme="dark"] .stepper-step .txt .sl,
[data-theme="dark"] .review-item .rvv,
[data-theme="dark"] .wz-summary-box b { color: var(--color-gray-800); }
[data-theme="dark"] .wz-summary-box {
  background: linear-gradient(135deg, rgba(43,108,176,.16), rgba(214,158,46,.1));
  border-color: var(--color-border);
}
[data-theme="dark"] .res-card .ic {
  background: rgba(96,165,250,.16);
  color: #93c5fd;
}
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-dropdown {
  background: var(--color-white) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .select2-results__option {
  color: var(--color-gray-700) !important;
}
[data-theme="dark"] .select2-search__field {
  background: var(--color-gray-50) !important;
  color: var(--color-text) !important;
}
[data-theme="dark"] .ss-option:hover,
[data-theme="dark"] .ss-option.is-active {
  background: rgba(96,165,250,.16);
  color: #93c5fd;
}
[data-theme="dark"] .ss-option.is-selected {
  background: rgba(96,165,250,.22);
  color: #93c5fd;
}

@media print {
  .ss-panel { display: none !important; }
  html[data-theme="dark"] {
    --color-surface: #ffffff;
    --color-white: #ffffff;
    --color-gray-50: #f7fafc;
    --color-gray-100: #edf2f7;
    --color-gray-200: #e2e8f0;
    --color-gray-600: #4a5568;
    --color-gray-700: #2d3748;
    --color-gray-800: #1a202c;
    --color-text: #2d3748;
    --color-border: #e2e8f0;
  }
}