/* Novda LMS — Premium Multi-Theme Modern SaaS Design System */
:root,
html[data-theme="light"] {
  --n-green: #059669;
  --n-green-dark: #064E3B;
  --n-green-light: #10B981;
  --n-green-glow: rgba(16, 185, 129, 0.25);
  --n-primary: #059669;
  --n-primary-dark: #047857;
  --n-panel-bg: #FFFFFF;
  --n-mint: #ECFDF5;
  --n-mint-border: #A7F3D0;
  --n-bg: #F8FAFC;
  --n-card-bg: #FFFFFF;
  --n-ink: #0F2E1E;
  --n-ink-soft: #475569;
  --n-ink-faint: #94A3B8;
  --n-border: #E2E8F0;
  --n-border-strong: #CBD5E1;
  --n-row-hover: #F4FAF6;
  --n-topbar-bg: rgba(255, 255, 255, 0.94);
  --n-body-bg: #F8FAFC;
  --n-sidebar-bg: linear-gradient(180deg, #071F14 0%, #0A2B1C 55%, #05160D 100%);
  --n-sidebar-brand-border: rgba(255, 255, 255, 0.08);
  --n-sidebar-logo-bg: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  --n-sidebar-logo-color: #059669;
  --n-sidebar-logo-border: rgba(52, 211, 153, 0.5);
  --n-sidebar-logo-shadow: 0 4px 12px rgba(16, 185, 129, 0.28);
  --n-sidebar-word-accent: #34D399;
  --n-sidebar-item-color: rgba(255, 255, 255, 0.75);
  --n-sidebar-item-hover: rgba(255, 255, 255, 0.09);
  --n-sidebar-active-bg: linear-gradient(90deg, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0.06) 100%);
  --n-sidebar-active-line: #34D399;
  --n-sidebar-active-glow: 0 0 8px #34D399;
  --n-red: #DC2626;
  --n-red-bg: #FEF2F2;
  --n-red-border: #FECACA;
  --n-amber: #D97706;
  --n-amber-bg: #FFFBEB;
  --n-amber-border: #FDE68A;
  --n-cyan: #0891B2;
  --n-cyan-bg: #ECFEFF;
  --n-cyan-border: #A5F3FC;
  --n-indigo: #4F46E5;
  --n-indigo-bg: #EEF2FF;
  --n-indigo-border: #C7D2FE;
  --n-slate: #475569;
  --n-slate-bg: #F1F5F9;
  --n-subj-math: #2563EB; --n-subj-math-bg: #EFF6FF; --n-subj-math-line: #BFDBFE;
  --n-subj-eng: #0891B2; --n-subj-eng-bg: #ECFEFF; --n-subj-eng-line: #A5F3FC;
  --n-subj-phys: #7C3AED; --n-subj-phys-bg: #F5F3FF; --n-subj-phys-line: #DDD6FE;
  --n-subj-chem: #D97706; --n-subj-chem-bg: #FFFBEB; --n-subj-chem-line: #FDE68A;
  --n-subj-native: #059669; --n-subj-native-bg: #ECFDF5; --n-subj-native-line: #A7F3D0;
  --n-subj-it: #475569; --n-subj-it-bg: #F8FAFC; --n-subj-it-line: #E2E8F0;
  --n-subj-history: #DC2626; --n-subj-history-bg: #FEF2F2; --n-subj-history-line: #FECACA;
  --n-subj-arts: #DB2777; --n-subj-arts-bg: #FDF2F8; --n-subj-arts-line: #FBCFE8;
  --n-subj-pe: #0D9488; --n-subj-pe-bg: #F0FDFA; --n-subj-pe-line: #99F6E4;
  --n-subj-geo: #EA580C; --n-subj-geo-bg: #FFF7ED; --n-subj-geo-line: #FED7AA;
  --n-room-1: #059669; --n-room-1-bg: #ECFDF5;
  --n-room-2: #2563EB; --n-room-2-bg: #EFF6FF;
  --n-room-3: #7C3AED; --n-room-3-bg: #F5F3FF;
  --n-room-4: #D97706; --n-room-4-bg: #FFFBEB;
}

* { box-sizing: border-box; }

html:has(.n-shell), body:has(.n-shell) {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--n-bg);
  color: var(--n-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .n-page-title, .n-drawer-title, .n-logo-word {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.025em;
}

input, select, textarea, button { font-family: inherit; }
::placeholder { color: var(--n-ink-faint); }
a { color: var(--n-green); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--n-green-dark); }

button, a { transition: transform .18s cubic-bezier(0.2,0.8,0.2,1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
input, select, textarea { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=datetime-local], input[type=month],
input:not([type]), select, textarea {
  height: 42px; padding: 0 14px; border: 1.5px solid var(--n-border); border-radius: 10px; font-size: 14px; background: #fff; color: var(--n-ink);
}
textarea { height: auto; padding: 12px 14px; resize: vertical; }
input[type=checkbox], input[type=radio] { height: auto; width: auto; accent-color: var(--n-green); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--n-green-light) !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16) !important;
}

/* Animations */
@keyframes novdaSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes novdaBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes novdaFadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes novdaFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes novdaPopIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes novdaToastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes novdaCardRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes novdaBtnShine { 0% { left: -100%; } 100% { left: 200%; } }
@keyframes nPulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } }
@keyframes nUnreadPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* Layout shell */
.n-shell { display: flex; height: 100vh; overflow: hidden; }

.n-sidebar {
  width: 250px;
  flex-shrink: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--n-sidebar-bg);
  display: flex;
  flex-direction: column;
  transition: width .25s cubic-bezier(0.2,0.8,0.2,1), background .3s ease;
  box-shadow: 4px 0 24px rgba(0,0,0,.15);
  z-index: 20;
}
.n-sidebar.collapsed { width: 76px; }
.n-sidebar-brand {
  display: flex; align-items: center; justify-content: flex-start; padding: 22px 20px 20px; color: #fff;
  white-space: nowrap; overflow: hidden; border-bottom: 1px solid var(--n-sidebar-brand-border);
}
.n-logo-mark {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: var(--n-sidebar-logo-bg);
  color: var(--n-sidebar-logo-color); border: 1.5px solid var(--n-sidebar-logo-border);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
  box-shadow: var(--n-sidebar-logo-shadow);
  transition: all .3s ease;
}
.n-logo-word { font-weight: 800; font-size: 19px; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.n-logo-word b { font-weight: 800; color: var(--n-sidebar-word-accent); margin-left: 5px; transition: color .3s ease; }
.n-sidebar.collapsed .n-sidebar-brand { justify-content: center; padding: 20px 0; }
.n-sidebar.collapsed .n-sidebar-brand span.n-logo-word { display: none; }

.n-sidebar-nav {
  flex: 1; min-height: 0; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.n-sidebar-nav::-webkit-scrollbar { width: 5px; }
.n-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }

.n-nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: none; border-radius: 11px;
  cursor: pointer; width: 100%; text-align: left; font-size: 13.5px; text-decoration: none;
  background: transparent; color: var(--n-sidebar-item-color); font-weight: 600;
  transition: all .2s ease;
}
.n-nav-item:hover { background: var(--n-sidebar-item-hover); color: #fff; transform: translateX(3px); }
.n-nav-item.active {
  background: var(--n-sidebar-active-bg);
  color: #fff; font-weight: 700;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.12);
}
.n-nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3.5px; border-radius: 0 4px 4px 0;
  background: var(--n-sidebar-active-line); box-shadow: var(--n-sidebar-active-glow);
}
.n-nav-item i {
  font-size: 17px; width: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7); transition: color .2s ease, transform .2s ease;
}
.n-nav-item:hover i { color: var(--n-sidebar-word-accent); transform: scale(1.1); }
.n-nav-item.active i { color: var(--n-sidebar-word-accent); }
.n-nav-item span { white-space: nowrap; overflow: hidden; }

.n-unread-pulse {
  animation: nUnreadPulse 1.8s infinite ease-in-out;
}

.n-sidebar-footer { padding: 14px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 4px; }
.n-sidebar-footer button, .n-sidebar-footer form button {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: none; border-radius: 10px;
  background: transparent; cursor: pointer; font-size: 13.5px; width: 100%; text-align: left; font-weight: 600;
  transition: all .2s ease;
}
.n-sidebar-footer .n-collapse-btn { color: rgba(255,255,255,.75); }
.n-sidebar-footer .n-collapse-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.n-sidebar-footer .n-logout-btn { color: #FCA5A5; }
.n-sidebar-footer .n-logout-btn:hover { background: rgba(239, 68, 68, 0.12); color: #EF4444; }

.n-main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; overscroll-behavior: none; background: var(--n-bg); }
.n-topbar {
  height: 68px; flex-shrink: 0; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--n-border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
  position: sticky; top: 0; z-index: 10;
}
.n-topbar-left { display: flex; align-items: center; gap: 16px; }
.n-page-title { font-size: 20px; font-weight: 800; color: var(--n-ink); letter-spacing: -0.025em; }

.n-dash-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px;
  border: 1.5px solid var(--n-border); background: #fff; color: #334155; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.n-dash-btn:hover { background: var(--n-mint); border-color: var(--n-green-light); color: var(--n-green); transform: translateY(-1px); box-shadow: 0 4px 10px -3px rgba(16, 185, 129, 0.2); }

.n-user-menu { position: relative; }
.n-user-trigger {
  display: flex; align-items: center; gap: 11px; border: 1.5px solid transparent; background: transparent;
  cursor: pointer; padding: 5px 10px 5px 6px; border-radius: 12px; line-height: 1.35;
  transition: all .2s ease;
}
.n-user-trigger:hover { background: rgba(16, 185, 129, 0.06); border-color: var(--n-mint-border); }
.n-user-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  color: var(--n-green); border: 1.5px solid var(--n-mint-border);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
  font-family: 'Outfit', sans-serif; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}
.n-user-name { font-size: 14px; font-weight: 700; color: var(--n-ink); text-align: left; white-space: nowrap; }
.n-user-role { font-size: 11.5px; color: var(--n-ink-soft); font-weight: 600; text-align: left; white-space: nowrap; }
.n-user-dropdown {
  position: absolute; right: 0; top: 56px; width: 220px; background: #fff; border: 1.5px solid var(--n-border);
  border-radius: 14px; box-shadow: 0 16px 36px -10px rgba(15,35,25,.2); padding: 6px; z-index: 25;
  animation: novdaPopIn .18s cubic-bezier(0.2,0.8,0.2,1) both;
}
.n-user-dropdown button, .n-user-dropdown a {
  width: 100%; text-align: left; padding: 10px 12px; border: none; background: transparent; border-radius: 9px;
  cursor: pointer; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--n-ink);
  transition: all .15s ease;
}
.n-user-dropdown button:hover, .n-user-dropdown a:hover { background: var(--n-bg); color: var(--n-green); transform: translateX(3px); }
.n-user-dropdown .danger { color: var(--n-red); }
.n-user-dropdown .danger:hover { background: var(--n-red-bg); color: var(--n-red); }
.n-user-dropdown hr { border: none; height: 1px; background: var(--n-border); margin: 6px 8px; }

.n-content { flex: 1; padding: 28px 28px 48px; }

/* Buttons & Micro-Interactions */
.n-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border: none; border-radius: 11px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer;
  box-shadow: 0 4px 14px -3px rgba(16, 185, 129, 0.45);
  transition: all .2s cubic-bezier(0.2,0.8,0.2,1);
}
.n-btn::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.n-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 8px 20px -3px rgba(16, 185, 129, 0.55);
  transform: translateY(-2px); color: #fff;
}
.n-btn:hover::after { animation: novdaBtnShine 0.75s ease; }
.n-btn:active { transform: translateY(0); box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.35); }

.n-btn-outline-danger {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 1.5px solid var(--n-red-border);
  border-radius: 11px; background: #fff; color: var(--n-red); font-weight: 700; font-size: 13.5px; cursor: pointer;
  transition: all .2s ease;
}
.n-btn-outline-danger:hover { background: var(--n-red-bg); border-color: var(--n-red); transform: translateY(-1px); box-shadow: 0 4px 12px -3px rgba(220, 38, 38, 0.2); }

.n-icon-btn {
  border: 1.5px solid var(--n-border); background: #fff; border-radius: 9px; width: 34px; height: 34px;
  cursor: pointer; margin-right: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all .18s cubic-bezier(0.2,0.8,0.2,1);
}
.n-icon-btn:last-child { margin-right: 0; }
.n-icon-btn.edit { color: var(--n-green); }
.n-icon-btn.edit:hover { background: var(--n-mint); border-color: var(--n-green-light); transform: translateY(-2px) scale(1.06); box-shadow: 0 4px 10px -2px rgba(16, 185, 129, 0.25); }
.n-icon-btn.danger { color: var(--n-red); }
.n-icon-btn.danger:hover { background: var(--n-red-bg); border-color: var(--n-red); transform: translateY(-2px) scale(1.06); box-shadow: 0 4px 10px -2px rgba(220, 38, 38, 0.25); }
.n-icon-btn.sms { color: var(--n-amber); }
.n-icon-btn.sms:hover { background: var(--n-amber-bg); border-color: var(--n-amber); transform: translateY(-2px) scale(1.06); box-shadow: 0 4px 10px -2px rgba(217, 119, 6, 0.25); }
.n-icon-btn:active { transform: scale(.92); }

/* Modern Cards & Filter Bars */
.n-card {
  background: #fff; border: 1.5px solid var(--n-border); border-radius: 16px; padding: 24px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 6px 16px -4px rgba(15, 35, 25, 0.04);
}
.n-table-card {
  background: #fff; border: 1.5px solid var(--n-border); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 8px 24px -6px rgba(15, 35, 25, 0.05);
  animation: novdaCardRise .4s cubic-bezier(.22,1,.36,1) both .05s;
}
.n-table-scroll { overflow-x: auto; }
.n-filter-bar {
  background: #fff; border: 1.5px solid var(--n-border); border-radius: 16px; padding: 18px 20px;
  margin-bottom: 20px; display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03);
}
.n-field { display: flex; flex-direction: column; gap: 6px; }
.n-field label { font-size: 12.5px; font-weight: 700; color: var(--n-ink-soft); }
.n-field input, .n-field select {
  height: 42px; padding: 0 14px; border: 1.5px solid var(--n-border); border-radius: 10px; font-size: 13.5px; background: #fff;
}
.n-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 14px; }
.n-page-header h1 { font-size: 24px; font-weight: 800; color: var(--n-ink); margin: 0; letter-spacing: -0.025em; }

/* Badges & Chips */
.n-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3;
}
.n-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: var(--n-mint); color: var(--n-green); border: 1px solid var(--n-mint-border);
}
.n-empty-row td { text-align: center; padding: 48px 20px; color: var(--n-ink-faint); font-weight: 600; font-size: 14px; }

/* Upgraded Stat Cards Grid */
.n-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 24px; }
.n-stat-card {
  text-align: left; background: #fff; border: 1.5px solid var(--n-border); border-radius: 16px; padding: 18px 20px;
  cursor: pointer; transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 4px 12px -2px rgba(15, 35, 25, 0.03);
  animation: novdaCardRise .45s cubic-bezier(.22,1,.36,1) both;
  position: relative; overflow: hidden;
}
.n-stat-card:hover {
  transform: translateY(-4px); box-shadow: 0 16px 32px -8px rgba(16, 185, 129, 0.16); border-color: var(--n-mint-border);
}
.n-stat-card i {
  width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; background: var(--n-mint); color: var(--n-green); margin-bottom: 8px;
  border: 1px solid var(--n-mint-border);
}
.n-stat-value {
  font-family: 'Outfit', sans-serif; font-size: 25px; font-weight: 800; color: var(--n-ink); margin-top: 4px; line-height: 1.15;
}
.n-stat-label { font-size: 13px; font-weight: 600; color: var(--n-ink-soft); margin-top: 4px; }
.n-stat-sub { font-size: 12px; color: var(--n-green); font-weight: 700; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }

/* Modern Tables */
table { min-width: 760px; border-collapse: collapse; width: 100%; font-size: 13.5px; }
table td, table th { white-space: nowrap; padding: 15px 18px; vertical-align: middle; }
table.compact td, table.compact th { padding: 10px 16px; }
thead tr { background: #F8FAFC; border-bottom: 1.5px solid var(--n-border); }
thead th { text-align: left; color: var(--n-ink-soft); font-weight: 750; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; }
thead th.text-end { text-align: right; }
tbody tr { border-top: 1px solid #F1F5F9; transition: background .15s ease, transform .15s ease; }
tbody tr:hover { background: var(--n-row-hover); }
td.text-end { text-align: right; }

/* Student & Staff Avatar Initials */
.n-avatar-circle {
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12.5px; font-family: 'Outfit', sans-serif; flex-shrink: 0;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  color: #059669; border: 1.5px solid var(--n-mint-border);
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.15);
}
.n-avatar-circle.indigo { background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%); color: #4F46E5; border-color: #C7D2FE; }
.n-avatar-circle.cyan { background: linear-gradient(135deg, #ECFEFF 0%, #CFFAFE 100%); color: #0891B2; border-color: #A5F3FC; }
.n-avatar-circle.amber { background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%); color: #D97706; border-color: #FDE68A; }
.n-avatar-circle.red { background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%); color: #DC2626; border-color: #FECACA; }

.n-user-cell {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 600;
}
.n-user-cell .name { font-weight: 700; color: var(--n-ink); transition: color .15s ease; }
.n-user-cell:hover .name { color: var(--n-green); }

/* Quick Filter Pills Bar (Lidlar, To'lovlar, Guruhlar) */
.n-quick-filters {
  display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center;
}
.n-quick-filters-label {
  font-size: 12.5px; color: var(--n-ink-soft); font-weight: 700; margin-right: 4px; display: inline-flex; align-items: center; gap: 6px;
}
.n-filter-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: 999px;
  border: 1.5px solid var(--n-border); background: #ffffff; color: var(--n-ink); font-size: 13px; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: all .18s cubic-bezier(0.2,0.8,0.2,1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.n-filter-chip:hover {
  border-color: var(--n-green-light); background: var(--n-mint); color: var(--n-green); transform: translateY(-1px);
}
.n-filter-chip.active {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #ffffff; border-color: transparent;
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.45);
}
.n-filter-chip.active-indigo {
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  color: #ffffff; border-color: transparent;
  box-shadow: 0 4px 12px -2px rgba(79, 70, 229, 0.45);
}
.n-filter-chip.active-red {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: #ffffff; border-color: transparent;
  box-shadow: 0 4px 12px -2px rgba(220, 38, 38, 0.45);
}
.n-filter-chip.active-blue {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  color: #ffffff; border-color: transparent;
  box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.45);
}
.n-filter-chip.active-slate {
  background: linear-gradient(135deg, #64748B 0%, #475569 100%);
  color: #ffffff; border-color: transparent;
  box-shadow: 0 4px 12px -2px rgba(71, 85, 105, 0.45);
}
.n-filter-chip .chip-count {
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: rgba(0,0,0,.06); color: inherit;
}
.n-filter-chip.active .chip-count,
.n-filter-chip.active-indigo .chip-count,
.n-filter-chip.active-red .chip-count,
.n-filter-chip.active-blue .chip-count,
.n-filter-chip.active-slate .chip-count {
  background: rgba(255,255,255,.25); color: #ffffff;
}

/* Modern Summary Strip (Payments, Expenses, etc.) */
.n-summary-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px;
}
.n-summary-card {
  background: #ffffff; border: 1.5px solid var(--n-border); border-radius: 14px; padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.03); transition: all .2s ease;
}
.n-summary-card:hover { transform: translateY(-2px); border-color: var(--n-mint-border); box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.12); }
.n-summary-icon {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.n-summary-icon.green { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.n-summary-icon.amber { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
.n-summary-icon.red { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }
.n-summary-icon.blue { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
.n-summary-val { font-family: 'Outfit', sans-serif; font-size: 19px; font-weight: 800; color: var(--n-ink); }
.n-summary-lbl { font-size: 12px; color: var(--n-ink-soft); font-weight: 600; }

/* Progress bars */
.n-bar-track { height: 9px; background: #F1F5F9; border-radius: 999px; overflow: hidden; }
.n-bar-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.n-bar-fill.subj-math { background: var(--n-subj-math); }
.n-bar-fill.subj-eng { background: var(--n-subj-eng); }
.n-bar-fill.subj-phys { background: var(--n-subj-phys); }
.n-bar-fill.subj-chem { background: var(--n-subj-chem); }
.n-bar-fill.subj-native { background: var(--n-subj-native); }
.n-bar-fill.subj-it { background: var(--n-subj-it); }
.n-bar-fill.subj-history { background: var(--n-subj-history); }
.n-bar-fill.subj-arts { background: var(--n-subj-arts); }
.n-bar-fill.subj-pe { background: var(--n-subj-pe); }
.n-bar-fill.subj-geo { background: var(--n-subj-geo); }
.subj-math { color: var(--n-subj-math); }
.subj-eng { color: var(--n-subj-eng); }
.subj-phys { color: var(--n-subj-phys); }
.subj-chem { color: var(--n-subj-chem); }
.subj-native { color: var(--n-subj-native); }
.subj-it { color: var(--n-subj-it); }
.subj-history { color: var(--n-subj-history); }
.subj-arts { color: var(--n-subj-arts); }
.subj-pe { color: var(--n-subj-pe); }
.subj-geo { color: var(--n-subj-geo); }

/* Drawer / slide-over panel */
.n-backdrop { position: fixed; inset: 0; background: rgba(11,36,23,.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 40; animation: novdaBackdropIn .2s ease both; }
.n-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 480px; max-width: 94vw; background: #fff;
  border-radius: 20px 0 0 20px;
  box-shadow: -24px 0 60px -15px rgba(15,35,25,.35); z-index: 41; display: flex; flex-direction: column;
  animation: novdaSlideIn .3s cubic-bezier(.22,1,.36,1) both;
}
.n-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1.5px solid var(--n-border); }
.n-drawer-title { font-size: 19px; font-weight: 800; color: var(--n-ink); }
.n-drawer-close {
  border: none; background: rgba(0,0,0,.04); border-radius: 8px; width: 32px; height: 32px;
  cursor: pointer; font-size: 20px; color: var(--n-ink-soft); display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.n-drawer-close:hover { background: var(--n-red-bg); color: var(--n-red); }
.n-drawer-body { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.n-drawer-footer { padding: 18px 24px; border-top: 1.5px solid var(--n-border); display: flex; gap: 12px; background: #FAFCFA; }
.n-field-block label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--n-ink); }
.n-field-block input, .n-field-block select, .n-field-block textarea {
  width: 100%; height: 44px; padding: 0 14px; border: 1.5px solid var(--n-border); border-radius: 10px; font-size: 14px; background: #fff;
}
.n-field-block textarea { height: auto; padding: 12px 14px; resize: vertical; }
.n-field-hint { font-size: 12px; color: var(--n-ink-soft); margin-top: 5px; }
.n-drawer-save {
  flex: 1; height: 46px; border: none; border-radius: 11px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff; font-family: 'Outfit', sans-serif; font-weight: 700; cursor: pointer; font-size: 15px;
  box-shadow: 0 4px 14px -3px rgba(16, 185, 129, 0.45);
  transition: all .2s ease;
}
.n-drawer-save:hover { background: linear-gradient(135deg, #059669 0%, #047857 100%); box-shadow: 0 8px 20px -3px rgba(16, 185, 129, 0.55); transform: translateY(-1px); }
.n-drawer-cancel {
  flex: 1; height: 46px; border: 1.5px solid var(--n-border); border-radius: 11px; background: #fff; color: var(--n-ink);
  font-weight: 700; cursor: pointer; font-size: 14.5px; text-align: center; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; transition: all .2s ease;
}
.n-drawer-cancel:hover { color: var(--n-ink); background: var(--n-bg); border-color: var(--n-border-strong); }

.n-chip-toggle {
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--n-border);
  background: #fff; color: var(--n-ink-soft); transition: transform .15s ease, border-color .18s ease, background .18s ease;
}
.n-chip-toggle:hover { transform: translateY(-1px); border-color: var(--n-green); color: var(--n-green); }
.n-chip-toggle.selected { border-color: var(--n-green); background: var(--n-mint); color: var(--n-green); font-weight: 700; }
.n-chip-static { padding: 6px 12px; border-radius: 999px; font-size: 13px; border: 1.5px solid var(--n-border); background: var(--n-bg); color: #3E4A44; }

/* Toast */
.n-toast {
  position: fixed; bottom: 28px; right: 28px; background: #0F2E1E; color: #fff; padding: 14px 22px; border-radius: 12px;
  font-size: 14px; font-weight: 600; box-shadow: 0 16px 36px -8px rgba(0,0,0,.4); z-index: 50;
  border-left: 4px solid #34D399; animation: novdaToastIn .3s cubic-bezier(.22,1,.36,1) both;
}

/* ==========================================================================
   MODERN CALENDAR & DATE PICKER SUITE (DAYS & MONTHS)
   ========================================================================== */

/* 1. Date & Month Input Trigger */
.n-datepick {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.n-date-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--n-border);
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--n-ink);
  font-size: 13.5px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  user-select: none;
}
.n-date-trigger:hover {
  border-color: var(--n-mint-border);
  background: #FBFDFB;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
  transform: translateY(-1px);
}
.n-datepick.open .n-date-trigger {
  border-color: var(--n-green);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
  background: #FFFFFF;
}
.n-date-icon-box {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--n-mint);
  color: var(--n-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  border: 1px solid var(--n-mint-border);
  transition: transform 0.2s ease;
}
.n-date-trigger:hover .n-date-icon-box {
  transform: scale(1.08);
}
.n-date-trigger-label {
  font-weight: 700;
  color: var(--n-ink);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.n-date-trigger-arrow {
  margin-left: auto;
  font-size: 11px;
  color: var(--n-ink-soft);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}
.n-datepick.open .n-date-trigger-arrow {
  transform: rotate(180deg);
  color: var(--n-green);
}

.n-filter-bar .n-datepick,
.n-field .n-datepick,
.n-field-block .n-datepick {
  width: 100%;
}
.n-filter-bar .n-date-trigger,
.n-field .n-date-trigger,
.n-field-block .n-date-trigger {
  width: 100%;
}

.n-fin-date-inputs .n-datepick {
  display: inline-flex;
  width: auto;
}
.n-fin-date-inputs .n-date-trigger {
  height: 32px;
  padding: 0 8px;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 12.5px;
  gap: 6px;
}
.n-fin-date-inputs .n-date-trigger:hover {
  background: rgba(0, 0, 0, 0.04);
}
.n-fin-date-inputs .n-date-icon-box {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

/* 2. Popover Calendar Card (Days & Months) */
.n-cal-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1050;
  width: 320px;
  padding: 16px 14px 12px;
  background: #FFFFFF;
  border: 1.5px solid var(--n-border);
  border-radius: 18px;
  box-shadow: 0 20px 45px -8px rgba(15, 35, 25, 0.16), 0 6px 18px -4px rgba(0, 0, 0, 0.05);
  animation: novdaCalPop .22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes novdaCalPop {
  0% { opacity: 0; transform: translateY(-8px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 3. Calendar Header */
.n-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}
.n-cal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  color: #0F2E1E;
  letter-spacing: -0.01em;
}
.n-cal-nav {
  display: flex;
  gap: 5px;
}
.n-cal-nav button {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--n-border);
  border-radius: 9px;
  background: #FFFFFF;
  color: var(--n-ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.n-cal-nav button:hover {
  border-color: var(--n-green);
  color: var(--n-green);
  background: var(--n-mint);
  transform: scale(1.08);
}

/* 4. Days Grid & DOW headers */
.n-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.n-cal-dows {
  margin-bottom: 4px;
}
.n-cal-grid .dow {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  color: var(--n-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 0 6px;
}
.n-cal-grid .dow.weekend {
  color: #EF4444;
}

/* 5. Day Cells */
.n-cal-days .day {
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--n-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.16s ease;
  position: relative;
}
.n-cal-days .day:hover {
  background: var(--n-mint);
  color: var(--n-green);
  font-weight: 750;
  transform: scale(1.08);
}
.n-cal-days .day.muted {
  color: var(--n-ink-faint);
  opacity: 0.4;
}
.n-cal-days .day.today:not(.sel) {
  color: var(--n-green);
  font-weight: 800;
  box-shadow: inset 0 0 0 1.5px var(--n-green);
  background: rgba(16, 185, 129, 0.08);
}
.n-cal-days .day.sel {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  transform: scale(1.06);
}

/* 6. Months Grid */
.n-cal-months {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-top: 6px;
}
.n-cal-months .day {
  height: 42px;
  border: 1.5px solid var(--n-border);
  background: #FFFFFF;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  color: var(--n-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}
.n-cal-months .day:hover {
  border-color: var(--n-green);
  background: var(--n-mint);
  color: var(--n-green);
  transform: translateY(-1px);
}
.n-cal-months .day.today:not(.sel) {
  border-color: var(--n-green);
  color: var(--n-green);
  background: rgba(16, 185, 129, 0.06);
}
.n-cal-months .day.sel {
  border-color: transparent !important;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}

/* 7. Time Input for Datetime Pickers */
.n-cal-time {
  padding: 10px 4px 4px;
  border-top: 1px dashed var(--n-border);
  margin-top: 10px;
}
.n-cal-time-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--n-ink-soft);
  margin-bottom: 6px;
}
.n-cal-time-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--n-border);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  background: #FFFFFF;
  color: var(--n-ink);
  transition: border-color 0.18s ease;
}
.n-cal-time-input:focus {
  border-color: var(--n-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* 8. Calendar Footer (Quick Buttons) */
.n-cal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--n-border);
}
.n-cal-foot .quick {
  display: flex;
  gap: 6px;
  width: 100%;
}
.n-cal-foot .quick button {
  flex: 1;
  height: 30px;
  padding: 0 10px;
  white-space: nowrap;
  border: 1.5px solid var(--n-border);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 11.5px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  color: var(--n-ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.18s ease;
}
.n-cal-foot .quick button:hover {
  border-color: var(--n-green);
  color: var(--n-green);
  background: var(--n-mint);
  transform: translateY(-1px);
}

/* 9. Timetable Day Tabs (Dars jadvali kunlari) */
.n-day-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
.n-day-tab {
  height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  border: 1.5px solid var(--n-border);
  background: #FFFFFF;
  color: var(--n-ink);
  display: inline-flex;
  align-items: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.n-day-tab:hover {
  border-color: var(--n-mint-border);
  background: var(--n-mint);
  color: var(--n-green);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.2);
}
.n-day-tab.active, .n-day-tab.active:hover {
  border-color: #059669;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px -3px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}
.n-day-tab .count {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: var(--n-mint);
  color: var(--n-green);
  transition: all 0.18s ease;
}
.n-day-tab.active .count {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* 10. Attendance Lesson Date Cards (Guruh davomati kunlari) */
.n-lesson-chip {
  height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 750;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  border: 1.5px solid var(--n-border);
  background: #FFFFFF;
  color: var(--n-ink);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.n-lesson-chip:hover {
  transform: translateY(-2px);
  border-color: var(--n-green);
  color: var(--n-green);
  background: var(--n-mint);
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.2);
}
.n-lesson-chip.active {
  border-color: #059669;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px -3px rgba(16, 185, 129, 0.45);
  transform: translateY(-1px);
}
.n-lesson-chip.active:hover {
  color: #FFFFFF !important;
}

/* 11. Dark Theme Overrides for Calendars */
html[data-theme="dark"] .n-date-trigger {
  background: #0B1E14;
  border-color: rgba(52, 211, 153, 0.25);
  color: #E2E8F0;
}
html[data-theme="dark"] .n-date-trigger:hover {
  background: #0F2A1C;
  border-color: #34D399;
}
html[data-theme="dark"] .n-cal-pop {
  background: #0A1C13;
  border-color: rgba(52, 211, 153, 0.25);
  box-shadow: 0 20px 45px -8px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .n-cal-title {
  color: #F1F5F9;
}
html[data-theme="dark"] .n-cal-nav button {
  background: #0F2A1C;
  border-color: rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
}
html[data-theme="dark"] .n-cal-days .day {
  color: #E2E8F0;
}
html[data-theme="dark"] .n-cal-days .day:hover {
  background: rgba(16, 185, 129, 0.2);
  color: #34D399;
}
html[data-theme="dark"] .n-cal-months .day {
  background: #0B1E14;
  border-color: rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
}
html[data-theme="dark"] .n-cal-months .day:hover {
  background: rgba(16, 185, 129, 0.2);
  color: #34D399;
  border-color: #34D399;
}
html[data-theme="dark"] .n-cal-foot .quick button {
  background: #0F2A1C;
  border-color: rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
}
html[data-theme="dark"] .n-day-tab {
  background: #0B1E14;
  border-color: rgba(52, 211, 153, 0.25);
  color: #E2E8F0;
}
html[data-theme="dark"] .n-lesson-chip {
  background: #0B1E14;
  border-color: rgba(52, 211, 153, 0.25);
  color: #E2E8F0;
}

.n-att-btn {
  height: 32px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--n-border); background: #fff; transition: all .15s ease;
}
.n-att-btn.present { color: #166534; }
.n-att-btn.present:hover { border-color: #166534; background: #F0FDF4; }
.n-att-btn.present.active { border-color: #166534; background: #DCFCE7; color: #14532D; box-shadow: 0 2px 6px rgba(22, 101, 52, 0.2); }
.n-att-btn.absent { color: #B91C1C; }
.n-att-btn.absent:hover { border-color: #B91C1C; background: #FEF2F2; }
.n-att-btn.absent.active { border-color: #B91C1C; background: #FEE2E2; color: #991B1B; box-shadow: 0 2px 6px rgba(185, 28, 28, 0.2); }
.n-att-btn.excused { color: #B45309; }
.n-att-btn.excused:hover { border-color: #B45309; background: #FFFBEB; }
.n-att-btn.excused.active { border-color: #B45309; background: #FEF3C7; color: #92400E; box-shadow: 0 2px 6px rgba(180, 83, 9, 0.2); }

/* Charts */
.n-chart-wrap { position: relative; cursor: crosshair; }
.n-chart-gridlabel { position: absolute; left: 0; transform: translateY(-50%); text-align: right; font-size: 11px; color: var(--n-ink-faint); font-weight: 600; }
.n-chart-tooltip {
  position: absolute; top: -8px; transform: translate(-50%, -100%); background: #0F2E1E; color: #fff; padding: 8px 12px;
  border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; z-index: 5; box-shadow: 0 8px 18px -8px rgba(0,0,0,.35);
  display: none;
}
.n-chart-tooltip.visible { display: block; }
.n-chart-vline { position: absolute; top: 0; bottom: 0; width: 1.5px; background: #CBD5E1; pointer-events: none; display: none; }
.n-chart-vline.visible { display: block; }
.n-chart-labels { display: flex; margin-top: 10px; }
.n-chart-labels span { flex: 1; text-align: center; font-size: 12px; font-weight: 600; color: var(--n-ink-soft); }

/* Login */
/* Modern Animated Login & Auth System */
.n-login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.12) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 40%),
              #F4F9F6;
  padding: 40px 24px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}
.n-login-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.n-login-bg canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.n-login-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.5;
  animation: novdaDrift 22s ease-in-out infinite;
  pointer-events: none;
}
.n-login-blob.b1 {
  width: 360px;
  height: 360px;
  background: rgba(16, 185, 129, 0.22);
  top: -80px;
  left: -60px;
}
.n-login-blob.b2 {
  width: 300px;
  height: 300px;
  background: rgba(6, 182, 212, 0.18);
  bottom: -90px;
  right: -40px;
  animation-duration: 28s;
  animation-direction: reverse;
}
.n-login-blob.b3 {
  width: 240px;
  height: 240px;
  background: rgba(245, 158, 11, 0.15);
  top: 45%;
  right: 22%;
  animation-duration: 34s;
}
@keyframes novdaDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .n-login-blob { animation: none; }
}
.n-auth-content-container {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.n-login-back {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(16, 185, 129, 0.22);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #0F2E1E;
  text-decoration: none;
  box-shadow: 0 8px 24px -6px rgba(11, 58, 31, 0.15);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.n-login-back:hover {
  color: #059669;
  border-color: #10B981;
  background: #ffffff;
  transform: translateX(-4px);
  box-shadow: 0 12px 28px -6px rgba(16, 185, 129, 0.25);
}

.n-login-card, .n-auth-card {
  width: 100%;
  max-width: 440px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(24px);
  border: 1.5px solid rgba(16, 185, 129, 0.2);
  border-radius: 26px;
  box-shadow: 0 30px 70px -15px rgba(11, 58, 31, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  padding: 40px 36px 32px;
  animation: nLoginCardEntrance 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  position: relative;
  overflow: hidden;
}
.n-login-card::before, .n-auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #10B981, #059669, #34D399, #06B6D4);
}

@keyframes nLoginCardEntrance {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Brand Header */
.n-login-brand-header {
  text-align: center;
  margin-bottom: 20px;
}
.n-login-brand-icon-wrap {
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1.5px solid rgba(52, 211, 153, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -4px rgba(16, 185, 129, 0.3);
  position: relative;
  animation: nFloatLogo 4s ease-in-out infinite;
}
.n-login-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
@keyframes nFloatLogo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.n-login-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #047857;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}
.n-login-chip-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: nStatusPulse 1.8s infinite;
}

.n-login-title {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #0F2E1E;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  text-align: center;
}
.n-login-subtitle {
  font-size: 13.5px;
  color: #64748B;
  text-align: center;
  margin: 0 0 24px;
  line-height: 1.5;
}

/* Form Inputs */
.n-login-field {
  margin-bottom: 16px;
  position: relative;
  text-align: left;
}
.n-login-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}
.n-login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.n-login-field-icon {
  position: absolute;
  left: 14px;
  font-size: 17px;
  color: #94A3B8;
  transition: all 0.2s ease;
  pointer-events: none;
}
.n-login-input-wrap input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 42px;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  font-size: 14.5px;
  background: #ffffff;
  color: #0F2E1E;
  font-family: inherit;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.n-login-input-wrap input:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14) !important;
  outline: none;
}
.n-login-input-wrap:focus-within .n-login-field-icon {
  color: #059669;
  transform: scale(1.1);
}

.n-login-toggle {
  position: absolute;
  right: 8px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #94A3B8;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 17px;
  transition: all 0.2s ease;
}
.n-login-toggle:hover {
  background: #F1F5F9;
  color: #0F2E1E;
}

.n-login-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 22px;
  font-size: 13px;
}
.n-login-checkbox-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #475569;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.n-login-forgot-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #059669;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.n-login-forgot-link:hover {
  color: #047857;
  text-decoration: underline;
}

/* Submit Button with Shine Animation */
.n-login-submit {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #10B981 0%, #059669 60%, #047857 100%);
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.45);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.n-login-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgba(16, 185, 129, 0.55);
}
.n-login-submit:active {
  transform: translateY(0);
}
.n-login-submit::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: rotate(25deg);
  transition: left 0.6s ease;
}
.n-login-submit:hover::after {
  left: 120%;
}
.n-login-submit i {
  transition: transform 0.2s ease;
}
.n-login-submit:hover i {
  transform: translateX(4px);
}

.n-login-footer-trust {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #E2E8F0;
  text-align: center;
  font-size: 12px;
  color: #94A3B8;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.n-login-footer-trust i {
  color: #10B981;
  font-size: 14px;
}

.n-login-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #DC2626;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: nShake 0.4s ease;
}
@keyframes nShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Auth Cards (Password Reset) */
.n-auth-card {
  text-align: center;
}
.n-auth-icon-circle {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1.5px solid rgba(52, 211, 153, 0.4);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 10px 24px -4px rgba(16, 185, 129, 0.25);
}
.n-auth-card h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #0F2E1E;
  margin: 0 0 8px;
}
.n-auth-card p {
  color: #64748B;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 20px;
}
.n-auth-card .n-btn {
  width: 100%;
  height: 48px;
  justify-content: center;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.n-auth-quick-help {
  margin-top: 24px;
  padding: 16px;
  border-radius: 14px;
  background: #F8FAF9;
  border: 1px dashed #CBD5E1;
  text-align: left;
}
.n-auth-quick-help h5 {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.n-auth-contact-btns {
  display: flex;
  gap: 10px;
}
.n-auth-tg-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #0284C7;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.n-auth-tg-btn:hover {
  background: #0369A1;
  color: #ffffff;
  transform: translateY(-1px);
}
.n-auth-call-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #EAF6EF;
  color: #14532D;
  border: 1px solid #CFE8D8;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.n-auth-call-btn:hover {
  background: #14532D;
  color: #ffffff;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .n-login-page {
    padding: 76px 16px 36px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .n-login-back {
    top: 14px;
    left: 14px;
    padding: 7px 14px;
    font-size: 12px;
  }
  .n-login-card, .n-auth-card {
    padding: 30px 18px 24px;
    border-radius: 22px;
    margin-top: 6px;
  }
  .n-login-title, .n-auth-card h4 {
    font-size: 22px;
  }
}

/* Settings Grid & Modern Cards */
.n-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.n-settings-card {
  text-align: left; background: #fff; border: 1.5px solid var(--n-border); border-radius: 16px; padding: 24px;
  cursor: pointer; transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
  display: flex; flex-direction: column; width: 100%; position: relative; overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 4px 12px -2px rgba(15, 35, 25, 0.03);
}
.n-settings-card:hover {
  transform: translateY(-4px); box-shadow: 0 16px 32px -8px rgba(16, 185, 129, 0.16); border-color: var(--n-mint-border);
}
.n-settings-card:hover .card-arrow {
  transform: translateX(4px); color: var(--n-green) !important;
}
.n-settings-card:not(.n-settings-card-theme) i,
.n-settings-card-theme .theme-header-left > i {
  width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; background: var(--n-mint); color: var(--n-green);
  border: 1.5px solid var(--n-mint-border); box-shadow: 0 4px 12px var(--n-green-glow); margin-bottom: 12px;
}
.n-settings-card .title { font-family: 'Outfit', sans-serif; font-size: 17px; font-weight: 800; color: var(--n-ink); margin-top: 4px; }
.n-settings-card .desc { font-size: 13.5px; color: var(--n-ink-soft); margin-top: 6px; line-height: 1.45; }

.n-narrow { max-width: 480px; margin: 0 auto; }
.n-form-row { display: flex; gap: 14px; }
.n-form-row > * { flex: 1; }
.n-form-actions { display: flex; gap: 12px; margin-top: 12px; }
.n-alert { padding: 14px 18px; border-radius: 12px; margin-bottom: 18px; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.n-alert.success { background: var(--n-mint); color: var(--n-green-dark); border: 1px solid var(--n-mint-border); }
.n-alert.error, .n-alert.danger { background: var(--n-red-bg); color: var(--n-red); border: 1px solid var(--n-red-border); }
.n-alert.info { background: var(--n-cyan-bg); color: var(--n-cyan); border: 1px solid var(--n-cyan-border); }

/* Upgraded Timetable */
.n-tt-table { min-width: 100%; border-collapse: separate; border-spacing: 0; }
.n-tt-table th, .n-tt-table td { text-align: center; padding: 10px; border-bottom: 1px solid var(--n-border); border-right: 1px solid var(--n-border); }
.n-tt-table th:last-child, .n-tt-table td:last-child { border-right: none; }
.n-tt-table tbody tr:last-child td { border-bottom: none; }
.n-tt-table tbody tr { border-top: none; }
.n-tt-table tbody tr:hover { background: transparent; }
.n-tt-table thead th { background: #F8FAFC; font-weight: 750; color: var(--n-ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding: 14px 12px; }
.n-tt-table thead th.n-tt-room-head { position: relative; padding: 16px 14px 14px; }
.n-tt-table thead th.n-tt-room-head::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--n-green); border-radius: 4px 4px 0 0; }
.n-tt-table thead th.n-tt-room-head { border-right-width: 2px; }
.n-tt-table td.room-cell { border-right-width: 2px; }
.n-tt-table thead th.n-tt-room-head:last-child, .n-tt-table td.room-cell:last-child { border-right: none; }
.n-tt-room { display: inline-flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif; font-weight: 800; color: var(--n-green); font-size: 14.5px; letter-spacing: -.01em; }
.n-tt-room::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.n-tt-room-cap { display: inline-block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 11px; color: var(--n-ink-faint); margin-top: 4px; background: rgba(0,0,0,.04); padding: 1px 7px; border-radius: 999px; }
.n-tt-table thead th.room-1 { background: var(--n-room-1-bg); border-right-color: #A7F3D0; }
.n-tt-table td.room-1 { background: rgba(5, 150, 105, 0.02); border-right-color: #E2E8F0; }
.n-tt-table td.room-1 .n-tt-free a:hover { border-color: var(--n-room-1); color: var(--n-room-1); background: var(--n-mint); }
.n-tt-table thead th.room-1::before { background: var(--n-room-1); }
.room-1 .n-tt-room { color: var(--n-room-1); }

.n-tt-table thead th.room-2 { background: var(--n-room-2-bg); border-right-color: #BFDBFE; }
.n-tt-table td.room-2 { background: rgba(37, 99, 235, 0.02); border-right-color: #E2E8F0; }
.n-tt-table td.room-2 .n-tt-free a:hover { border-color: var(--n-room-2); color: var(--n-room-2); background: var(--n-subj-math-bg); }
.n-tt-table thead th.room-2::before { background: var(--n-room-2); }
.room-2 .n-tt-room { color: var(--n-room-2); }

.n-tt-table thead th.room-3 { background: var(--n-room-3-bg); border-right-color: #DDD6FE; }
.n-tt-table td.room-3 { background: rgba(124, 58, 237, 0.02); border-right-color: #E2E8F0; }
.n-tt-table td.room-3 .n-tt-free a:hover { border-color: var(--n-room-3); color: var(--n-room-3); background: var(--n-subj-phys-bg); }
.n-tt-table thead th.room-3::before { background: var(--n-room-3); }
.room-3 .n-tt-room { color: var(--n-room-3); }

.n-tt-table thead th.room-4 { background: var(--n-room-4-bg); border-right-color: #FDE68A; }
.n-tt-table td.room-4 { background: rgba(217, 119, 6, 0.02); border-right-color: #E2E8F0; }
.n-tt-table td.room-4 .n-tt-free a:hover { border-color: var(--n-room-4); color: var(--n-room-4); background: var(--n-subj-chem-bg); }
.n-tt-table thead th.room-4::before { background: var(--n-room-4); }
.room-4 .n-tt-room { color: var(--n-room-4); }

.n-tt-time { background: #F8FAFC; font-family: 'Outfit', sans-serif; font-weight: 750; color: var(--n-ink); font-size: 13.5px; white-space: nowrap; width: 96px; }
.n-tt-time span { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: 11px; color: var(--n-ink-faint); margin-top: 2px; }

.n-tt-free { padding: 6px !important; }
.n-tt-free a {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 64px; border-radius: 12px;
  border: 1.5px dashed #CBD5E1; color: var(--n-ink-faint); font-size: 12px; font-weight: 600; text-decoration: none; background: transparent;
  transition: all .2s ease;
}
.n-tt-free a:hover { border-color: var(--n-green); color: var(--n-green); background: var(--n-mint); transform: scale(1.01); box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.18); }
.n-tt-free a i { font-size: 12px; }

/* Lesson blocks — colour keyed to the subject */
.n-tt-busy { padding: 6px !important; vertical-align: middle; }
.n-tt-lesson {
  display: flex; flex-direction: column; justify-content: center; min-height: 68px; padding: 12px 14px; border-radius: 12px; text-align: left;
  background: var(--n-mint); border: 1.5px solid var(--n-mint-border); border-left: 4px solid var(--n-green);
  text-decoration: none; color: var(--n-green); position: relative; overflow: hidden;
  box-shadow: 0 2px 6px -1px rgba(0,0,0,0.05); transition: all .2s cubic-bezier(0.2,0.8,0.2,1);
}
.n-tt-lesson:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -4px rgba(15,35,25,.14); }
.n-tt-lesson .subject { display: block; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13.5px; line-height: 1.35; white-space: normal; }
.n-tt-lesson .teacher { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 11.5px; color: var(--n-ink-soft); margin-top: 4px; }
.n-tt-lesson.subj-math { background: var(--n-subj-math-bg); border-color: var(--n-subj-math-line); border-left-color: var(--n-subj-math); color: var(--n-subj-math); }
.n-tt-lesson.subj-eng { background: var(--n-subj-eng-bg); border-color: var(--n-subj-eng-line); border-left-color: var(--n-subj-eng); color: var(--n-subj-eng); }
.n-tt-lesson.subj-phys { background: var(--n-subj-phys-bg); border-color: var(--n-subj-phys-line); border-left-color: var(--n-subj-phys); color: var(--n-subj-phys); }
.n-tt-lesson.subj-chem { background: var(--n-subj-chem-bg); border-color: var(--n-subj-chem-line); border-left-color: var(--n-subj-chem); color: var(--n-subj-chem); }
.n-tt-lesson.subj-native { background: var(--n-subj-native-bg); border-color: var(--n-subj-native-line); border-left-color: var(--n-subj-native); color: var(--n-subj-native); }
.n-tt-lesson.subj-it { background: var(--n-subj-it-bg); border-color: var(--n-subj-it-line); border-left-color: var(--n-subj-it); color: var(--n-subj-it); }
.n-tt-lesson.subj-history { background: var(--n-subj-history-bg); border-color: var(--n-subj-history-line); border-left-color: var(--n-subj-history); color: var(--n-subj-history); }
.n-tt-lesson.subj-arts { background: var(--n-subj-arts-bg); border-color: var(--n-subj-arts-line); border-left-color: var(--n-subj-arts); color: var(--n-subj-arts); }
.n-tt-lesson.subj-pe { background: var(--n-subj-pe-bg); border-color: var(--n-subj-pe-line); border-left-color: var(--n-subj-pe); color: var(--n-subj-pe); }
.n-tt-lesson.subj-geo { background: var(--n-subj-geo-bg); border-color: var(--n-subj-geo-line); border-left-color: var(--n-subj-geo); color: var(--n-subj-geo); }
.n-tt-lesson .meta { display: block; font-weight: 600; font-size: 11px; color: inherit; opacity: .8; margin-top: 5px; letter-spacing: .01em; }

/* Subject legend */
.n-tt-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.n-tt-legend .item {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; white-space: nowrap; line-height: 1; flex: 0 0 auto;
  background: #fff; border: 1.5px solid var(--n-border); color: var(--n-ink); font-size: 12.5px; font-weight: 650;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.n-tt-legend .item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.n-tt-legend .item.subj-math { background: var(--n-subj-math-bg); border-color: var(--n-subj-math-line); color: var(--n-subj-math); }
.n-tt-legend .item.subj-eng { background: var(--n-subj-eng-bg); border-color: var(--n-subj-eng-line); color: var(--n-subj-eng); }
.n-tt-legend .item.subj-phys { background: var(--n-subj-phys-bg); border-color: var(--n-subj-phys-line); color: var(--n-subj-phys); }
.n-tt-legend .item.subj-chem { background: var(--n-subj-chem-bg); border-color: var(--n-subj-chem-line); color: var(--n-subj-chem); }
.n-tt-legend .item.subj-native { background: var(--n-subj-native-bg); border-color: var(--n-subj-native-line); color: var(--n-subj-native); }
.n-tt-legend .item.subj-it { background: var(--n-subj-it-bg); border-color: var(--n-subj-it-line); color: var(--n-subj-it); }
.n-tt-legend .item.subj-history { background: var(--n-subj-history-bg); border-color: var(--n-subj-history-line); color: var(--n-subj-history); }
.n-tt-legend .item.subj-arts { background: var(--n-subj-arts-bg); border-color: var(--n-subj-arts-line); color: var(--n-subj-arts); }
.n-tt-legend .item.subj-pe { background: var(--n-subj-pe-bg); border-color: var(--n-subj-pe-line); color: var(--n-subj-pe); }
.n-tt-legend .item.subj-geo { background: var(--n-subj-geo-bg); border-color: var(--n-subj-geo-line); color: var(--n-subj-geo); }

/* Day Tabs */
.n-day-tabs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.n-day-tab {
  height: 40px; padding: 0 18px; border-radius: 11px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1;
  border: 1.5px solid var(--n-border); background: #fff; color: var(--n-ink); display: inline-flex; align-items: center; flex: 0 0 auto;
  transition: all .2s ease; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.n-day-tab:hover { border-color: var(--n-green-light); background: var(--n-mint); color: var(--n-green); transform: translateY(-1px); }
.n-day-tab.active, .n-day-tab.active:hover {
  border-color: transparent; background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff; box-shadow: 0 4px 14px -3px rgba(16, 185, 129, 0.45);
}
.n-day-tab .count {
  margin-left: 8px; font-size: 11px; font-weight: 800; color: var(--n-ink-faint); background: rgba(0,0,0,.05);
  padding: 2px 7px; border-radius: 999px;
}
.n-day-tab.active .count { color: #fff; background: rgba(255,255,255,.25); }

/* Modern Chat Interface */
.n-chat-card {
  background: #fff; border: 1.5px solid var(--n-border); border-radius: 18px; display: flex; flex-direction: column;
  height: calc(100vh - 200px); min-height: 520px; overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 8px 24px -6px rgba(15, 35, 25, 0.05);
}
.n-chat-messages { flex: 1; overflow-y: auto; padding: 26px; display: flex; flex-direction: column; gap: 14px; background: #F8FAFC; }
.n-chat-bubble-row { display: flex; animation: novdaFadeInUp .25s ease both; }
.n-chat-bubble-row.mine { justify-content: flex-end; }
.n-chat-bubble {
  max-width: 65%; background: #ffffff; border: 1.5px solid var(--n-border); border-radius: 18px 18px 18px 4px;
  padding: 12px 18px; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.04);
}
.n-chat-bubble-row.mine .n-chat-bubble {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-color: transparent; border-radius: 18px 18px 4px 18px; color: #ffffff;
  box-shadow: 0 4px 14px -2px rgba(5, 150, 105, 0.35);
}
.n-chat-sender { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 800; color: var(--n-green); margin-bottom: 4px; }
.n-chat-bubble-row.mine .n-chat-sender { color: rgba(255,255,255,.9); }
.n-chat-text { font-size: 14px; color: var(--n-ink); white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.n-chat-bubble-row.mine .n-chat-text { color: #ffffff; }
.n-chat-time { font-size: 11px; color: var(--n-ink-faint); margin-top: 6px; text-align: right; font-weight: 600; }
.n-chat-bubble-row.mine .n-chat-time { color: rgba(255,255,255,.75); }
.n-chat-form { display: flex; gap: 12px; padding: 18px 22px; border-top: 1.5px solid var(--n-border); background: #ffffff; align-items: flex-end; }
.n-chat-form textarea {
  flex: 1; height: 46px; max-height: 120px; padding: 12px 16px; border: 1.5px solid var(--n-border); border-radius: 12px;
  font-size: 14px; resize: vertical; line-height: 1.4; background: #FAFCFA;
}
.n-chat-form textarea:focus { background: #ffffff; border-color: var(--n-green-light) !important; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16) !important; }
.n-chat-form .n-btn { height: 46px; padding: 0 22px; flex-shrink: 0; }
html[data-theme="dark"] .n-chat-card { background: #0F1B14; }
html[data-theme="dark"] .n-chat-messages { background: #09130D; }
html[data-theme="dark"] .n-chat-bubble { background: #0F1B14; border-color: var(--n-border); }
html[data-theme="dark"] .n-chat-bubble-row.mine .n-chat-bubble { background: linear-gradient(135deg, #059669 0%, #047857 100%); }
html[data-theme="dark"] .n-chat-form { background: #0F1B14; }
html[data-theme="dark"] .n-chat-form textarea { background: #09130D; color: var(--n-ink); }

/* ==========================================================================
   NOVDA LMS — 6 LUXURY THEME PALETTES
   1. Zumrad (light - default)
   2. Zumrad Tun (dark)
   3. Midnight Moviy (navy)
   4. Okean Salqinligi (ocean)
   5. Kiber Binafsha (purple)
   6. Issiq Mocha (coffee)
   ========================================================================== */

/* 2. Zumrad Tun (Deep Emerald Dark) */
html[data-theme="dark"] {
  --n-bg: #0B1310;
  --n-card-bg: #0F1B14;
  --n-ink: #F3F7F4;
  --n-ink-soft: rgba(243, 247, 244, 0.65);
  --n-ink-faint: rgba(243, 247, 244, 0.4);
  --n-border: rgba(255, 255, 255, 0.12);
  --n-border-strong: rgba(255, 255, 255, 0.22);
  --n-row-hover: rgba(255, 255, 255, 0.04);
  --n-green: #10B981;
  --n-green-dark: #059669;
  --n-green-light: #34D399;
  --n-green-glow: rgba(16, 185, 129, 0.35);
  --n-mint: rgba(16, 185, 129, 0.14);
  --n-mint-border: rgba(16, 185, 129, 0.28);
  --n-topbar-bg: #0F1B14;
  --n-body-bg: radial-gradient(circle at 20% 10%, #173A26 0%, transparent 50%), #0B1310;
  --n-sidebar-bg: linear-gradient(180deg, #071F14 0%, #0A2B1C 55%, #05160D 100%);
  --n-sidebar-brand-border: rgba(255, 255, 255, 0.08);
  --n-sidebar-logo-bg: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  --n-sidebar-logo-color: #059669;
  --n-sidebar-logo-border: rgba(52, 211, 153, 0.5);
  --n-sidebar-logo-shadow: 0 4px 12px rgba(16, 185, 129, 0.28);
  --n-sidebar-word-accent: #34D399;
  --n-sidebar-active-bg: linear-gradient(90deg, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0.06) 100%);
  --n-sidebar-active-line: #34D399;
  --n-sidebar-active-glow: 0 0 8px #34D399;
}

/* 3. Midnight Moviy (SaaS Tech Deep Sapphire) */
html[data-theme="navy"] {
  --n-bg: #0A0F1D;
  --n-card-bg: #10172A;
  --n-ink: #F1F5F9;
  --n-ink-soft: #94A3B8;
  --n-ink-faint: #64748B;
  --n-border: rgba(148, 163, 184, 0.14);
  --n-border-strong: rgba(148, 163, 184, 0.26);
  --n-row-hover: rgba(255, 255, 255, 0.04);
  --n-green: #0284C7;
  --n-green-dark: #0369A1;
  --n-green-light: #38BDF8;
  --n-green-glow: rgba(2, 132, 199, 0.35);
  --n-mint: rgba(14, 165, 233, 0.14);
  --n-mint-border: rgba(56, 189, 248, 0.28);
  --n-topbar-bg: #10172A;
  --n-body-bg: radial-gradient(circle at 20% 10%, #1E3A8A 0%, transparent 50%), #0A0F1D;
  --n-sidebar-bg: linear-gradient(180deg, #070D18 0%, #0D1933 55%, #060B14 100%);
  --n-sidebar-brand-border: rgba(255, 255, 255, 0.08);
  --n-sidebar-logo-bg: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  --n-sidebar-logo-color: #FFFFFF;
  --n-sidebar-logo-border: rgba(56, 189, 248, 0.5);
  --n-sidebar-logo-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
  --n-sidebar-word-accent: #38BDF8;
  --n-sidebar-active-bg: linear-gradient(90deg, rgba(2, 132, 199, 0.25) 0%, rgba(2, 132, 199, 0.06) 100%);
  --n-sidebar-active-line: #38BDF8;
  --n-sidebar-active-glow: 0 0 10px #38BDF8;
}

/* 4. Okean Salqinligi (Crisp Light Ocean Sky) */
html[data-theme="ocean"] {
  --n-bg: #F0F6FC;
  --n-card-bg: #FFFFFF;
  --n-ink: #0C1E38;
  --n-ink-soft: #475569;
  --n-ink-faint: #94A3B8;
  --n-border: #E0E7F1;
  --n-border-strong: #CBD5E1;
  --n-row-hover: #F4F8FD;
  --n-green: #0284C7;
  --n-green-dark: #0369A1;
  --n-green-light: #38BDF8;
  --n-green-glow: rgba(2, 132, 199, 0.22);
  --n-mint: #E0F2FE;
  --n-mint-border: #BAE6FD;
  --n-topbar-bg: rgba(255, 255, 255, 0.94);
  --n-body-bg: #F0F6FC;
  --n-sidebar-bg: linear-gradient(180deg, #0C1E38 0%, #102A4E 55%, #081426 100%);
  --n-sidebar-brand-border: rgba(255, 255, 255, 0.08);
  --n-sidebar-logo-bg: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
  --n-sidebar-logo-color: #0284C7;
  --n-sidebar-logo-border: rgba(56, 189, 248, 0.5);
  --n-sidebar-logo-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
  --n-sidebar-word-accent: #38BDF8;
  --n-sidebar-active-bg: linear-gradient(90deg, rgba(2, 132, 199, 0.25) 0%, rgba(2, 132, 199, 0.06) 100%);
  --n-sidebar-active-line: #38BDF8;
  --n-sidebar-active-glow: 0 0 8px #38BDF8;
}

/* 5. Kiber Binafsha (Amethyst Cyber Dark) */
html[data-theme="purple"] {
  --n-bg: #0D0818;
  --n-card-bg: #150E24;
  --n-ink: #FAF5FF;
  --n-ink-soft: rgba(250, 245, 255, 0.65);
  --n-ink-faint: rgba(250, 245, 255, 0.4);
  --n-border: rgba(192, 132, 252, 0.14);
  --n-border-strong: rgba(192, 132, 252, 0.26);
  --n-row-hover: rgba(255, 255, 255, 0.04);
  --n-green: #9333EA;
  --n-green-dark: #7E22CE;
  --n-green-light: #C084FC;
  --n-green-glow: rgba(147, 51, 234, 0.35);
  --n-mint: rgba(147, 51, 234, 0.16);
  --n-mint-border: rgba(192, 132, 252, 0.3);
  --n-topbar-bg: #150E24;
  --n-body-bg: radial-gradient(circle at 20% 10%, #3B1668 0%, transparent 50%), #0D0818;
  --n-sidebar-bg: linear-gradient(180deg, #120921 0%, #1A0D30 55%, #0A0513 100%);
  --n-sidebar-brand-border: rgba(255, 255, 255, 0.08);
  --n-sidebar-logo-bg: linear-gradient(135deg, #A855F7 0%, #7E22CE 100%);
  --n-sidebar-logo-color: #FFFFFF;
  --n-sidebar-logo-border: rgba(192, 132, 252, 0.5);
  --n-sidebar-logo-shadow: 0 4px 12px rgba(168, 85, 247, 0.35);
  --n-sidebar-word-accent: #C084FC;
  --n-sidebar-active-bg: linear-gradient(90deg, rgba(147, 51, 234, 0.25) 0%, rgba(147, 51, 234, 0.08) 100%);
  --n-sidebar-active-line: #C084FC;
  --n-sidebar-active-glow: 0 0 10px #C084FC;
}

/* 6. Issiq Mocha (Cozy Espresso Amber Dark) */
html[data-theme="coffee"] {
  --n-bg: #120D0A;
  --n-card-bg: #1B1410;
  --n-ink: #FFFBEB;
  --n-ink-soft: rgba(255, 251, 235, 0.65);
  --n-ink-faint: rgba(255, 251, 235, 0.4);
  --n-border: rgba(245, 158, 11, 0.14);
  --n-border-strong: rgba(245, 158, 11, 0.26);
  --n-row-hover: rgba(255, 255, 255, 0.04);
  --n-green: #D97706;
  --n-green-dark: #B45309;
  --n-green-light: #FBBF24;
  --n-green-glow: rgba(217, 119, 6, 0.35);
  --n-mint: rgba(217, 119, 6, 0.16);
  --n-mint-border: rgba(251, 191, 36, 0.3);
  --n-topbar-bg: #1B1410;
  --n-body-bg: radial-gradient(circle at 20% 10%, #3D2314 0%, transparent 50%), #120D0A;
  --n-sidebar-bg: linear-gradient(180deg, #18110D 0%, #231913 55%, #100B08 100%);
  --n-sidebar-brand-border: rgba(255, 255, 255, 0.08);
  --n-sidebar-logo-bg: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  --n-sidebar-logo-color: #B45309;
  --n-sidebar-logo-border: rgba(251, 191, 36, 0.5);
  --n-sidebar-logo-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
  --n-sidebar-word-accent: #FBBF24;
  --n-sidebar-active-bg: linear-gradient(90deg, rgba(217, 119, 6, 0.25) 0%, rgba(217, 119, 6, 0.07) 100%);
  --n-sidebar-active-line: #FBBF24;
  --n-sidebar-active-glow: 0 0 10px #FBBF24;
}

/* Common Dark-Theme Styles (Applied to dark, navy, purple, coffee) */
html[data-theme="dark"] body,
html[data-theme="navy"] body,
html[data-theme="purple"] body,
html[data-theme="coffee"] body {
  background: var(--n-body-bg);
}

html[data-theme="dark"] .n-card,
html[data-theme="dark"] .n-table-card,
html[data-theme="dark"] .n-filter-bar,
html[data-theme="dark"] .n-stat-card,
html[data-theme="dark"] .n-settings-card,
html[data-theme="dark"] .n-drawer,
html[data-theme="dark"] .n-topbar,
html[data-theme="dark"] .n-user-dropdown,
html[data-theme="dark"] .n-auth-card,
html[data-theme="dark"] .n-login-card,
html[data-theme="navy"] .n-card,
html[data-theme="navy"] .n-table-card,
html[data-theme="navy"] .n-filter-bar,
html[data-theme="navy"] .n-stat-card,
html[data-theme="navy"] .n-settings-card,
html[data-theme="navy"] .n-drawer,
html[data-theme="navy"] .n-topbar,
html[data-theme="navy"] .n-user-dropdown,
html[data-theme="navy"] .n-auth-card,
html[data-theme="navy"] .n-login-card,
html[data-theme="purple"] .n-card,
html[data-theme="purple"] .n-table-card,
html[data-theme="purple"] .n-filter-bar,
html[data-theme="purple"] .n-stat-card,
html[data-theme="purple"] .n-settings-card,
html[data-theme="purple"] .n-drawer,
html[data-theme="purple"] .n-topbar,
html[data-theme="purple"] .n-user-dropdown,
html[data-theme="purple"] .n-auth-card,
html[data-theme="purple"] .n-login-card,
html[data-theme="coffee"] .n-card,
html[data-theme="coffee"] .n-table-card,
html[data-theme="coffee"] .n-filter-bar,
html[data-theme="coffee"] .n-stat-card,
html[data-theme="coffee"] .n-settings-card,
html[data-theme="coffee"] .n-drawer,
html[data-theme="coffee"] .n-topbar,
html[data-theme="coffee"] .n-user-dropdown,
html[data-theme="coffee"] .n-auth-card,
html[data-theme="coffee"] .n-login-card {
  background: var(--n-card-bg);
  border-color: var(--n-border);
}

html[data-theme="dark"] thead tr,
html[data-theme="navy"] thead tr,
html[data-theme="purple"] thead tr,
html[data-theme="coffee"] thead tr {
  background: var(--n-bg);
}

html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea,
html[data-theme="navy"] input, html[data-theme="navy"] select, html[data-theme="navy"] textarea,
html[data-theme="purple"] input, html[data-theme="purple"] select, html[data-theme="purple"] textarea,
html[data-theme="coffee"] input, html[data-theme="coffee"] select, html[data-theme="coffee"] textarea {
  background: var(--n-bg);
  color: var(--n-ink);
  border-color: var(--n-border);
}

html[data-theme="dark"] .n-bar-track,
html[data-theme="navy"] .n-bar-track,
html[data-theme="purple"] .n-bar-track,
html[data-theme="coffee"] .n-bar-track {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .n-chip-static,
html[data-theme="navy"] .n-chip-static,
html[data-theme="purple"] .n-chip-static,
html[data-theme="coffee"] .n-chip-static {
  background: rgba(255, 255, 255, 0.06);
  color: var(--n-ink);
}

html[data-theme="dark"] .n-tt-table thead th, html[data-theme="dark"] .n-tt-time,
html[data-theme="navy"] .n-tt-table thead th, html[data-theme="navy"] .n-tt-time,
html[data-theme="purple"] .n-tt-table thead th, html[data-theme="purple"] .n-tt-time,
html[data-theme="coffee"] .n-tt-table thead th, html[data-theme="coffee"] .n-tt-time {
  background: var(--n-bg);
}

html[data-theme="dark"] .n-chat-card,
html[data-theme="navy"] .n-chat-card,
html[data-theme="purple"] .n-chat-card,
html[data-theme="coffee"] .n-chat-card {
  background: var(--n-card-bg);
}

html[data-theme="dark"] .n-chat-messages,
html[data-theme="navy"] .n-chat-messages,
html[data-theme="purple"] .n-chat-messages,
html[data-theme="coffee"] .n-chat-messages {
  background: var(--n-bg);
}

html[data-theme="dark"] .n-chat-bubble,
html[data-theme="navy"] .n-chat-bubble,
html[data-theme="purple"] .n-chat-bubble,
html[data-theme="coffee"] .n-chat-bubble {
  background: var(--n-card-bg);
  border-color: var(--n-border);
}

html[data-theme="dark"] .n-chat-bubble-row.mine .n-chat-bubble,
html[data-theme="navy"] .n-chat-bubble-row.mine .n-chat-bubble,
html[data-theme="purple"] .n-chat-bubble-row.mine .n-chat-bubble,
html[data-theme="coffee"] .n-chat-bubble-row.mine .n-chat-bubble {
  background: linear-gradient(135deg, var(--n-green) 0%, var(--n-green-dark) 100%);
  color: #FFFFFF;
}

html[data-theme="dark"] .n-chat-form,
html[data-theme="navy"] .n-chat-form,
html[data-theme="purple"] .n-chat-form,
html[data-theme="coffee"] .n-chat-form {
  background: var(--n-card-bg);
}

html[data-theme="dark"] .n-chat-form textarea,
html[data-theme="navy"] .n-chat-form textarea,
html[data-theme="purple"] .n-chat-form textarea,
html[data-theme="coffee"] .n-chat-form textarea {
  background: var(--n-bg);
  color: var(--n-ink);
}

html[data-theme="dark"] .n-stat-card i, html[data-theme="dark"] .n-settings-card i,
html[data-theme="navy"] .n-stat-card i, html[data-theme="navy"] .n-settings-card i,
html[data-theme="purple"] .n-stat-card i, html[data-theme="purple"] .n-settings-card i,
html[data-theme="coffee"] .n-stat-card i, html[data-theme="coffee"] .n-settings-card i {
  color: var(--n-green-light);
  background: var(--n-mint);
  border-color: var(--n-mint-border);
}

html[data-theme="dark"] .n-stat-sub,
html[data-theme="navy"] .n-stat-sub,
html[data-theme="purple"] .n-stat-sub,
html[data-theme="coffee"] .n-stat-sub {
  color: var(--n-green-light);
}

html[data-theme="dark"] .n-dash-btn,
html[data-theme="navy"] .n-dash-btn,
html[data-theme="purple"] .n-dash-btn,
html[data-theme="coffee"] .n-dash-btn {
  background: var(--n-card-bg);
  color: var(--n-ink);
  border-color: var(--n-border);
}

html[data-theme="dark"] .n-field-hint a,
html[data-theme="dark"] .n-login-meta a,
html[data-theme="dark"] .n-auth-card a:not(.n-btn),
html[data-theme="navy"] .n-field-hint a,
html[data-theme="navy"] .n-login-meta a,
html[data-theme="navy"] .n-auth-card a:not(.n-btn),
html[data-theme="purple"] .n-field-hint a,
html[data-theme="purple"] .n-login-meta a,
html[data-theme="purple"] .n-auth-card a:not(.n-btn),
html[data-theme="coffee"] .n-field-hint a,
html[data-theme="coffee"] .n-login-meta a,
html[data-theme="coffee"] .n-auth-card a:not(.n-btn) {
  color: var(--n-green-light);
}

html[data-theme="dark"] .n-field-hint a:hover,
html[data-theme="dark"] .n-login-meta a:hover,
html[data-theme="dark"] .n-auth-card a:not(.n-btn):hover,
html[data-theme="navy"] .n-field-hint a:hover,
html[data-theme="navy"] .n-login-meta a:hover,
html[data-theme="navy"] .n-auth-card a:not(.n-btn):hover,
html[data-theme="purple"] .n-field-hint a:hover,
html[data-theme="purple"] .n-login-meta a:hover,
html[data-theme="purple"] .n-auth-card a:not(.n-btn):hover,
html[data-theme="coffee"] .n-field-hint a:hover,
html[data-theme="coffee"] .n-login-meta a:hover,
html[data-theme="coffee"] .n-auth-card a:not(.n-btn):hover {
  color: var(--n-green-light);
  opacity: 0.85;
}

/* ==========================================================================
   THEME GALLERY & PICKER (Settings Hub & Topbar)
   ========================================================================== */

.n-settings-card-theme {
  grid-column: 1 / -1;
  cursor: default !important;
  background: var(--n-card-bg);
  border: 1.5px solid var(--n-border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 4px 12px -2px rgba(15, 35, 25, 0.03);
}
.n-settings-card-theme:hover {
  transform: none !important;
  border-color: var(--n-border);
}
.n-settings-card-theme .theme-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.n-settings-card-theme .theme-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.n-settings-card-theme .theme-header-left i {
  margin-bottom: 0;
}

.n-theme-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.n-theme-card-option {
  position: relative;
  background: var(--n-bg);
  border: 2px solid var(--n-border);
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--n-ink);
  outline: none;
  width: 100%;
}
.n-theme-card-option:hover {
  transform: translateY(-3px);
  border-color: var(--n-green-light);
  box-shadow: 0 10px 24px -6px var(--n-green-glow);
}
.n-theme-card-option.active {
  border-color: var(--n-green);
  background: color-mix(in srgb, var(--n-green) 6%, var(--n-card-bg));
  box-shadow: 0 0 0 3px var(--n-green-glow), 0 10px 28px -6px rgba(0, 0, 0, 0.12);
}

/* Theme Mockup Wireframe Preview */
.n-theme-mockup {
  height: 82px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.08);
  position: relative;
}
.n-theme-mockup-side {
  width: 28%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px;
}
.n-theme-mockup-side .mini-logo {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-bottom: 3px;
}
.n-theme-mockup-side .mini-item {
  height: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  width: 80%;
}
.n-theme-mockup-side .mini-item.active {
  width: 100%;
}
.n-theme-mockup-main {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 6px;
}
.n-theme-mockup-topbar {
  height: 10px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.2);
  width: 100%;
}
.n-theme-mockup-body {
  display: flex;
  gap: 6px;
  flex: 1;
}
.n-theme-mockup-card {
  flex: 1;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px;
  gap: 4px;
}
.n-theme-mockup-pill {
  width: 65%;
  height: 6px;
  border-radius: 3px;
}
.n-theme-mockup-line {
  width: 40%;
  height: 4px;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.3);
}

/* Theme Option Meta */
.n-theme-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.n-theme-name-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.n-theme-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.n-theme-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--n-ink);
}
.n-theme-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--n-mint);
  color: var(--n-green);
  border: 1px solid var(--n-mint-border);
}
.n-theme-card-option i {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: inherit !important;
  color: inherit !important;
}
.n-theme-check-badge {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--n-green);
  padding: 0 9px;
  height: 22px;
  max-height: 22px;
  border-radius: 999px;
  box-shadow: 0 2px 6px var(--n-green-glow);
  line-height: 22px;
  white-space: nowrap;
  box-sizing: border-box;
}
.n-theme-check-badge i {
  font-size: 11px !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
}
.n-theme-card-option.active .n-theme-check-badge {
  display: inline-flex;
}

.n-theme-desc-text {
  font-size: 12.5px;
  color: var(--n-ink-soft);
  line-height: 1.4;
  margin: 0;
}

.n-theme-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.n-theme-swatch {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  display: inline-block;
}

/* Topbar Quick Switcher */
.n-theme-quick-wrap {
  position: relative;
  margin-right: 6px;
}
.n-theme-quick-btn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1.5px solid var(--n-border);
  background: var(--n-card-bg);
  color: var(--n-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.n-theme-quick-btn:hover {
  background: var(--n-mint);
  color: var(--n-green);
  border-color: var(--n-mint-border);
  transform: translateY(-1px);
}
.n-theme-quick-dropdown {
  position: absolute;
  right: 0;
  top: 48px;
  width: 250px;
  background: var(--n-card-bg);
  border: 1.5px solid var(--n-border);
  border-radius: 14px;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.35);
  padding: 8px;
  z-index: 35;
  animation: novdaPopIn 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.n-theme-quick-dropdown .quick-title {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--n-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--n-border);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.n-theme-quick-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--n-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.n-theme-quick-item:hover {
  background: var(--n-bg);
  color: var(--n-green);
  transform: translateX(2px);
}
.n-theme-quick-item.active {
  background: var(--n-mint);
  color: var(--n-green);
  font-weight: 700;
}
.n-theme-quick-item .quick-swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex-shrink: 0;
}
.n-theme-quick-item .quick-check {
  margin-left: auto;
  font-size: 14px;
  color: var(--n-green);
}

@media (max-width: 720px) {
  .n-content { padding: 20px 16px 40px; }
  .n-drawer { width: 100%; }
}

/* Mobile / tablet: off-canvas sidebar */
.n-mobile-menu-btn { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; color: var(--n-ink); font-size: 20px; cursor: pointer; border-radius: 8px; flex-shrink: 0; }
.n-mobile-menu-btn:hover { background: var(--n-bg); }
.n-mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(11,36,23,.45); z-index: 55; }
.n-mobile-backdrop.visible { display: block; }

@media (max-width: 900px) {
  .n-sidebar {
    position: fixed; top: 0; left: 0; width: 260px !important; height: 100vh; z-index: 60;
    transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.3);
  }
  .n-sidebar.mobile-open { transform: translateX(0); }
  .n-sidebar .n-collapse-btn { display: none; }
  .n-sidebar span[data-sidebar-label] { display: inline !important; }
  .n-mobile-menu-btn { display: inline-flex; }
  .n-page-title { font-size: 15.5px; }
  .n-topbar { padding: 0 14px; }
  .n-user-name, .n-user-role { display: none; }
  .n-content { padding: 16px 14px 32px; }
}

/* Public landing page (novdalc.uz root) */
html:not(:has(.n-shell)) {
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: auto;
  max-width: 100%;
}
body.n-landing-body {
  margin: 0;
  background: var(--n-bg);
  color: var(--n-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: clip;
  overflow-y: visible;
  overscroll-behavior: auto;
  max-width: 100%;
  width: 100%;
  position: relative;
}
.n-landing-body *,
.n-landing-body *::before,
.n-landing-body *::after {
  box-sizing: border-box;
}

.n-landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(9, 28, 18, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(52, 211, 153, 0.2);
  box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}
.n-landing-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.n-landing-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.n-landing-brand:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}
.n-landing-logo-img {
  height: 52px;
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.3));
  transition: transform 0.3s ease;
}
.n-landing-brand:hover .n-landing-logo-img {
  transform: scale(1.05) rotate(-2deg);
}
.n-landing-brand-text {
  display: flex;
  flex-direction: column;
}
.n-landing-wordmark {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.05em;
  color: #ffffff;
  line-height: 1.05;
}
.n-landing-brand-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.n-landing-brand-tagline {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #34D399;
  margin-top: 3px;
  text-transform: uppercase;
}

.n-landing-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.n-landing-menu a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 16px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  white-space: nowrap;
}
.n-landing-menu a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
.n-landing-menu a.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(5, 150, 105, 0.5));
  border: 1px solid rgba(52, 211, 153, 0.45);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.25);
}
.n-landing-menu a.n-landing-menu-test {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6EE7B7;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.3);
}
.n-landing-menu a.n-landing-menu-test:hover {
  color: #ffffff;
  background: rgba(16, 185, 129, 0.28);
  border-color: rgba(52, 211, 153, 0.6);
  transform: translateY(-1px);
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.3);
}
.n-landing-menu a.n-landing-menu-test i {
  font-size: 14px;
}

.n-btn-text-desktop {
  display: inline;
}
.n-btn-text-mobile {
  display: none;
}

.n-nav-test-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.n-nav-test-btn i {
  font-size: 15px;
  color: #A7F3D0;
}
.n-nav-test-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.n-landing-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.n-nav-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #A7F3D0;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.n-nav-phone-btn:hover {
  color: #ffffff;
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(52, 211, 153, 0.5);
  transform: translateY(-1px);
}
.n-landing-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #ffffff;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.n-landing-admin-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}
.n-landing-admin-btn.ghost {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
}
.n-landing-admin-btn.ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

.n-landing-hero { max-width: 1180px; margin: 0 auto; padding: 32px 24px 48px; }
.n-landing-hero-banner-wrap { position: relative; width: 100%; overflow: hidden; border-radius: 20px; box-shadow: 0 24px 50px -24px rgba(11,32,22,.35); }
.n-landing-hero-banner { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.n-landing-hero-banner-wrap:hover .n-landing-hero-banner { transform: scale(1.05); }
.n-landing-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.n-landing-cta-row-overlay { position: absolute; left: 6%; bottom: 8%; }
.n-landing-cta-row-mobile-only { display: none; margin-top: 20px; justify-content: center; }
.n-landing-cta-primary { background: var(--n-green); color: #fff; padding: 14px 26px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 15px; }
.n-landing-cta-primary:hover { background: var(--n-green-dark); }
.n-landing-cta-secondary { background: var(--n-mint); color: var(--n-green-dark); padding: 14px 26px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 15px; border: 1px solid var(--n-mint-border); }
.n-landing-cta-secondary:hover { background: var(--n-mint-border); }

.n-landing-section { max-width: 1180px; margin: 0 auto; padding: 64px 24px; }
.n-landing-section.alt { max-width: none; background: #fff; border-top: 1px solid var(--n-border); border-bottom: 1px solid var(--n-border); }
.n-landing-section.alt > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.n-landing-section h2 { font-size: 28px; font-weight: 800; color: var(--n-ink); margin: 0 0 12px; }
.n-landing-section-lead { font-size: 15.5px; color: var(--n-ink-soft); max-width: 640px; margin: 0 0 32px; line-height: 1.6; }
.n-landing-sub-h { font-size: 18px; font-weight: 800; color: var(--n-ink); margin: 40px 0 16px; }
.n-landing-empty { color: var(--n-ink-faint); font-size: 14px; }

/* Modern Section Chips */
.n-section-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #EAF6EF;
  border: 1px solid #CFE8D8;
  color: #14532D;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(20, 83, 45, 0.06);
}

.n-section-chip i {
  font-size: 14px;
  color: #15803D;
}

.n-section-chip.chip-gold {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08);
}

.n-section-chip.chip-gold i {
  color: #D97706;
}

/* Redesigned Biz haqimizda Section Card */
.n-about-card-hero {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  padding: 40px 38px;
  box-shadow: 0 10px 30px -8px rgba(20, 83, 45, 0.06);
  position: relative;
  overflow: hidden;
}

.n-about-card-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #10B981 0%, #059669 50%, #0D9488 100%);
}

.n-about-main-title {
  font-family: 'Outfit', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #0F2E1E;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  line-height: 1.2;
}

.n-about-lead-desc {
  font-size: 16.5px;
  line-height: 1.75;
  color: #4A5568;
  max-width: 880px;
  margin: 0 0 32px;
  font-weight: 400;
}

.n-about-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.n-pillar-card {
  background: #F8FAF9;
  border: 1px solid #E2EBF0;
  border-radius: 16px;
  padding: 22px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.n-pillar-card:hover {
  background: #ffffff;
  transform: translateY(-3px);
  border-color: #A7F3D0;
  box-shadow: 0 12px 28px -6px rgba(20, 83, 45, 0.12);
}

.n-pillar-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  flex-shrink: 0;
}

.n-pillar-icon.p-green {
  background: #EAF6EF;
  color: #15803D;
  border: 1px solid #CFE8D8;
}

.n-pillar-icon.p-emerald {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.n-pillar-icon.p-cyan {
  background: #ECFEFF;
  color: #0E7490;
  border: 1px solid #CCEDF3;
}

.n-pillar-title {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1A202C;
  margin: 0 0 5px;
  letter-spacing: -0.01em;
}

.n-pillar-text {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}

/* Redesigned Natijalarimiz Section Header */
.n-landing-results-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-top: 52px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.n-results-header-info {
  flex: 1 1 460px;
}

.n-results-main-title {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #0F2E1E;
  margin: 0 0 8px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.n-landing-results-sublead {
  font-size: 15.5px;
  color: #4A5568;
  margin: 0;
  line-height: 1.55;
}

.n-results-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .n-about-card-hero { padding: 28px 20px; }
  .n-about-pillars { grid-template-columns: 1fr; gap: 12px; }
  .n-landing-results-header-row { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 36px; }
  .n-results-header-actions { align-items: flex-start; width: 100%; }
  .n-results-not-all-badge, .n-results-grid-toggle-btn { width: 100%; justify-content: center; }
}

.n-3d-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 28px auto 0;
  padding: 40px 16px 36px;
  background: radial-gradient(circle at 50% 20%, #153828 0%, #0D2218 60%, #07130D 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  box-shadow: 0 24px 60px -15px rgba(10, 26, 19, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
  overflow-x: clip;
  max-width: 100%;
  user-select: none;
}

.n-3d-carousel-stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 480px;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.n-3d-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 310px;
  height: 450px;
  transform-style: preserve-3d;
  cursor: pointer;
  border-radius: 22px;
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.4s ease;
  will-change: transform, opacity;
}

.n-3d-card-bg {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(150deg, #182c21 0%, #0e1b14 100%);
  overflow: hidden;
  transition: transform 0.2s ease-out;
}

.n-3d-card-content {
  position: absolute;
  inset: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 10;
  transition: transform 0.2s ease-out;
}

.n-3d-card-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.n-3d-card-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 2px;
  letter-spacing: -0.3px;
}

.n-3d-card-subtitle {
  font-size: 13px;
  color: #A7F3D0;
  margin: 0;
  font-weight: 500;
}

.n-3d-card-media {
  position: relative;
  width: 100%;
  height: 180px;
  margin: 10px 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.2s ease-out;
}

.n-3d-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.n-3d-card-media-overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 185, 129, 0.35);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  transition: opacity 0.2s ease;
}

.n-3d-card:hover .n-3d-card-media-overlay {
  opacity: 1;
}

.n-3d-card-desc {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.45;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.n-3d-card-btn {
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}

.n-3d-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -4px rgba(16, 185, 129, 0.7);
}

.n-3d-card-glare {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: overlay;
  transition: opacity 0.3s ease;
}

.n-3d-card-border {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Controls */
.n-3d-carousel-controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  z-index: 30;
}

.n-3d-ctrl-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.n-3d-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
}

.n-3d-playpause.active {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.5);
  color: #34D399;
}

.n-3d-counter {
  font-size: 13px;
  font-weight: 700;
  color: #A7F3D0;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.n-3d-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 180px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px;
}

.n-3d-dots::-webkit-scrollbar {
  display: none;
}

.n-3d-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}

.n-3d-dot.active {
  width: 20px;
  background: #34D399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.7);
}

.n-results-grid-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.n-results-grid-toggle-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.45);
}

.n-results-grid-toggle-btn i {
  font-size: 16px;
}

.n-results-not-all-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #FFFBEB;
  border: 1.5px solid #FDE68A;
  color: #92400E;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
  line-height: 1.4;
}

.n-results-not-all-badge i {
  color: #D97706;
  font-size: 15px;
}

.n-results-not-all-badge strong {
  font-weight: 700;
  color: #78350F;
}

.n-all-grid-footer-note {
  margin-top: 24px;
  padding: 16px 20px;
  background: rgba(13, 31, 22, 0.9);
  border: 1px dashed rgba(245, 158, 11, 0.4);
  border-radius: 14px;
  color: #E2E8F0;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}

.n-all-grid-footer-note strong {
  color: #FBBF24;
}

.n-all-grid-footer-note a {
  color: #34D399;
  text-decoration: underline;
  font-weight: 600;
}

.n-results-all-grid {
  margin-top: 24px;
  padding: 24px;
  background: rgba(7, 40, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  animation: fadeIn 0.3s ease;
}

.n-all-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.n-all-grid-item {
  background: rgba(13, 31, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.n-all-grid-item:hover {
  transform: translateY(-4px);
  border-color: rgba(52, 211, 153, 0.4);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.5);
}

.n-all-grid-thumb {
  position: relative;
  width: 100%;
  height: 130px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.n-all-grid-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.n-all-grid-item:hover .n-all-grid-thumb img {
  transform: scale(1.05);
}

.n-all-grid-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 40, 24, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #34D399;
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.n-all-grid-item:hover .n-all-grid-overlay {
  opacity: 1;
}

.n-all-grid-info {
  margin-top: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.n-all-grid-info h5 {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin: 6px 0 2px;
}

.n-all-grid-sub {
  font-size: 11.5px;
  color: #94A3B8;
  margin: 0;
}

/* Lightbox Modal */
.n-cert-modal-box {
  background: #0D1F16;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8);
  position: relative;
  animation: nModalPop 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes nModalPop {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.n-cert-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  z-index: 10;
  transition: background 0.2s;
}

.n-cert-modal-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.n-cert-modal-header {
  padding: 20px 24px 12px;
}

.n-cert-modal-header h4 {
  margin: 0;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
}

.n-cert-modal-body {
  padding: 0 24px 16px;
  overflow-y: auto;
  text-align: center;
}

.n-cert-modal-body img {
  max-width: 100%;
  max-height: 58vh;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.n-cert-modal-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
}

/* ============================================================
   EYE-CATCHING SUBJECTS & COURSES SHOWCASE
   ============================================================ */
.n-landing-subjects-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 36px;
}
.n-landing-subjects-head h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #0F2E1E;
  margin-bottom: 12px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.n-landing-subjects-head h2 .accent {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.n-landing-subjects-head .n-landing-section-lead {
  font-size: 16px;
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 0;
  max-width: 680px;
}
.n-landing-subjects-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  background: linear-gradient(135deg, #10B981 0%, #047857 100%);
  color: #ffffff;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}
.n-landing-subjects-cta:hover {
  background: linear-gradient(135deg, #059669 0%, #064E3B 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(16, 185, 129, 0.45);
}
.n-live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6EE7B7;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.8);
  animation: nPulseDot 1.8s infinite;
}
@keyframes nPulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(110, 231, 183, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(110, 231, 183, 0); }
}

.n-landing-subject-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.n-landing-subject-card {
  background: #ffffff;
  border: 1.5px solid #E2E8F0;
  border-radius: 22px;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 24px -6px rgba(20, 83, 45, 0.05);
  display: flex;
  flex-direction: column;
}
.n-landing-subject-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #E2E8F0;
  transition: background 0.3s ease;
}

.n-landing-subject-card:hover {
  transform: translateY(-5px);
  border-color: #A7F3D0;
  box-shadow: 0 20px 36px -10px rgba(20, 83, 45, 0.12);
}

/* Category Accents for Subjects */
.n-landing-subject-card[data-subject="IELTS"]::before { background: linear-gradient(90deg, #6366F1, #4F46E5); }
.n-landing-subject-card[data-subject="IELTS"] .n-subject-icon-box { background: #EEF2FF; color: #4F46E5; border: 1px solid #C7D2FE; }
.n-landing-subject-card[data-subject="IELTS"] .n-subject-tag-badge { background: #EEF2FF; color: #4338CA; }

.n-landing-subject-card[data-subject="CEFR"]::before { background: linear-gradient(90deg, #10B981, #059669); }
.n-landing-subject-card[data-subject="CEFR"] .n-subject-icon-box { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.n-landing-subject-card[data-subject="CEFR"] .n-subject-tag-badge { background: #ECFDF5; color: #047857; }

.n-landing-subject-card[data-subject="SAT"]::before { background: linear-gradient(90deg, #8B5CF6, #7C3AED); }
.n-landing-subject-card[data-subject="SAT"] .n-subject-icon-box { background: #F5F3FF; color: #7C3AED; border: 1px solid #DDD6FE; }
.n-landing-subject-card[data-subject="SAT"] .n-subject-tag-badge { background: #F5F3FF; color: #6D28D9; }

.n-landing-subject-card[data-subject="DTM"]::before { background: linear-gradient(90deg, #F43F5E, #E11D48); }
.n-landing-subject-card[data-subject="DTM"] .n-subject-icon-box { background: #FFF1F2; color: #E11D48; border: 1px solid #FECDD3; }
.n-landing-subject-card[data-subject="DTM"] .n-subject-tag-badge { background: #FFF1F2; color: #BE123C; }

.n-landing-subject-card[data-subject="Milliy sertifikat"]::before { background: linear-gradient(90deg, #10B981, #0D9488); }
.n-landing-subject-card[data-subject="Milliy sertifikat"] .n-subject-icon-box { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.n-landing-subject-card[data-subject="Milliy sertifikat"] .n-subject-tag-badge { background: #F0FDF4; color: #166534; }

.n-landing-subject-card[data-subject="English Kids"]::before { background: linear-gradient(90deg, #F59E0B, #D97706); }
.n-landing-subject-card[data-subject="English Kids"] .n-subject-icon-box { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
.n-landing-subject-card[data-subject="English Kids"] .n-subject-tag-badge { background: #FFFBEB; color: #B45309; }

/* Fallbacks for any other subjects */
.n-subject-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: #EAF6EF;
  color: #14532D;
  border: 1px solid #CFE8D8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: transform 0.25s ease;
}
.n-landing-subject-card:hover .n-subject-icon-box {
  transform: scale(1.08);
}
.n-subject-tag-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #F1F5F9;
  color: #475569;
}

.n-landing-subject-card-toggle {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 26px 24px 20px;
  cursor: pointer;
  font-family: inherit;
  flex: 1;
}

.n-subject-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  width: 100%;
}

.n-landing-subject-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #0F2E1E;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}

.n-landing-subject-short {
  font-size: 14px;
  color: #64748B;
  line-height: 1.55;
  margin-bottom: 22px;
  min-height: 44px;
}

.n-landing-subject-footer-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 14px;
  border-top: 1px dashed #E2E8F0;
  margin-top: auto;
}

.n-subject-learn-more {
  font-size: 13px;
  font-weight: 700;
  color: #10B981;
  transition: color 0.2s ease;
}
.n-landing-subject-card:hover .n-subject-learn-more {
  color: #047857;
}

.n-landing-subject-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F1F5F9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: transform 0.3s ease, background 0.2s ease, color 0.2s ease;
}
.n-landing-subject-card.expanded .n-landing-subject-arrow {
  transform: rotate(180deg);
  background: #10B981;
  color: #ffffff;
}

.n-landing-subject-detail-wrap {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
  padding: 0 24px;
}
.n-landing-subject-card.expanded .n-landing-subject-detail-wrap {
  max-height: 300px;
  opacity: 1;
  padding: 0 24px 24px;
}
.n-landing-subject-detail-text {
  font-size: 13.5px;
  color: #4B5563;
  line-height: 1.65;
  margin: 0 0 14px;
  border-top: 1px solid #F1F5F9;
  padding-top: 16px;
}
.n-subject-detail-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.n-subject-detail-cta-btn:hover {
  background: #10B981;
  color: #ffffff;
  border-color: #10B981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* ============================================================
   PRESTIGIOUS FOUNDER & TEAM SHOWCASE CARD
   ============================================================ */
.n-team-section {
  padding: 72px 24px;
}
.n-team-header {
  margin-bottom: 36px;
}
.n-team-main-title {
  font-family: 'Outfit', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #0F2E1E;
  margin: 0 0 10px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.n-landing-founder-card {
  background: linear-gradient(145deg, #ffffff 0%, #F8FAF9 100%);
  border: 1.5px solid #D1FAE5;
  border-radius: 28px;
  padding: 40px;
  box-shadow: 0 20px 48px -12px rgba(20, 83, 45, 0.08);
  position: relative;
  overflow: hidden;
}
.n-landing-founder-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #F59E0B 0%, #10B981 50%, #059669 100%);
}

.n-founder-card-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.n-founder-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.n-founder-badge-pill i {
  color: #10B981;
}
.n-founder-exp-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.n-founder-exp-pill i {
  color: #D97706;
}

.n-founder-card-content {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.n-founder-profile-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  width: 170px;
}

.n-founder-avatar-wrap {
  position: relative;
  width: 140px;
  height: 140px;
}

.n-landing-founder-avatar {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  object-fit: cover;
  object-position: center 12%;
  box-shadow: 0 12px 28px -6px rgba(20, 83, 45, 0.25);
  border: 3.5px solid #10B981;
  background: #EAF6EF;
}

.n-founder-verified-tick {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #10B981;
  color: #ffffff;
  border: 3.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45);
}

.n-founder-stats-strip {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 10px 14px;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.n-founder-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.n-founder-stat-item .stat-num {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #0F2E1E;
}
.n-founder-stat-item .stat-lbl {
  font-size: 10.5px;
  color: #64748B;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.n-founder-stat-sep {
  width: 1px;
  height: 26px;
  background: #E2E8F0;
}

.n-landing-founder-body {
  flex: 1;
}

.n-founder-name-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.n-landing-founder-name {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #0F2E1E;
  letter-spacing: -0.02em;
}

.n-founder-role-tag {
  background: #EAF6EF;
  color: #047857;
  border: 1px solid #A7F3D0;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

.n-landing-founder-title {
  font-size: 15.5px;
  color: #4B5563;
  margin-bottom: 24px;
  font-weight: 500;
}

.n-landing-founder-achievements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-bottom: 26px;
}

.n-ach-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #E2EBF0;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1E293B;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.25s ease;
}
.n-ach-chip:hover {
  transform: translateX(4px);
  border-color: #A7F3D0;
  box-shadow: 0 6px 16px rgba(20, 83, 45, 0.08);
}

.n-ach-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.n-ach-icon.ach-gold { background: #FEF3C7; color: #D97706; }
.n-ach-icon.ach-amber { background: #FFFBEB; color: #B45309; }
.n-ach-icon.ach-blue { background: #EEF2FF; color: #4338CA; }
.n-ach-icon.ach-emerald { background: #ECFDF5; color: #059669; }
.n-ach-icon.ach-green { background: #F0FDF4; color: #15803D; }
.n-ach-icon.ach-star { background: #FFF1F2; color: #E11D48; }

.n-ach-chip.highlight-ms {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1.5px solid #FCD34D;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);
}
.ms-highlight-text {
  font-weight: 800;
  color: #92400E;
}

.n-founder-quote-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F8FAF9;
  border-left: 3.5px solid #10B981;
  padding: 14px 18px;
  border-radius: 0 14px 14px 0;
  color: #4A5568;
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.55;
}
.n-founder-quote-bar i {
  font-size: 22px;
  color: #10B981;
  flex-shrink: 0;
}

/* ============================================================
   ELEVATED "MANZIL VA ALOQA" CONTACT HUB
   ============================================================ */
.n-contact-section {
  padding: 72px 24px;
}
.n-contact-header {
  margin-bottom: 36px;
}
.n-contact-main-title {
  font-family: 'Outfit', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #0F2E1E;
  margin: 0 0 10px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.n-landing-aloqa-grid {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 28px;
  align-items: stretch;
}

.n-contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Building Photo Card */
.n-bino-showcase-card {
  background: #ffffff;
  border: 1.5px solid #E2E8F0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 8px 24px -6px rgba(20, 83, 45, 0.06);
}
.n-bino-photo-wrapper {
  position: relative;
  width: 100%;
  height: 210px;
}
.n-bino-photo-wrapper .n-landing-aloqa-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.n-bino-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 46, 30, 0.2) 0%, rgba(15, 46, 30, 0.85) 100%);
}
.n-bino-top-tags {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 2;
}
.n-bino-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 46, 30, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.n-bino-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(16, 185, 129, 0.9);
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}
.n-bino-status-pill.status-closed {
  background: rgba(15, 23, 42, 0.85);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.n-bino-status-pill.status-closed .n-live-pulse {
  background: #EF4444;
  box-shadow: none;
  animation: none;
}
.n-bino-bottom-name {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  z-index: 2;
  color: #ffffff;
}
.n-bino-bottom-name h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.n-bino-bottom-name p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Detail Cards Stack */
.n-contact-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================================
   CREATIVE SCHEDULE MASTER COMPONENT
   ============================================================ */
.n-schedule-master-card {
  background: linear-gradient(145deg, #ffffff 0%, #F5FBF7 100%);
  border: 1.5px solid #D1FAE5;
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 6px 20px -4px rgba(16, 185, 129, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.n-schedule-master-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10B981, #059669, #34D399);
}
.n-schedule-master-card:hover {
  border-color: #6EE7B7;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgba(16, 185, 129, 0.16);
}

.n-schedule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.n-schedule-title-side {
  display: flex;
  align-items: center;
  gap: 12px;
}
.n-schedule-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  border: 1px solid #A7F3D0;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
}
.n-schedule-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #059669;
  margin-bottom: 2px;
}
.n-schedule-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 16.5px;
  font-weight: 800;
  color: #0F2E1E;
  margin: 0;
  letter-spacing: -0.01em;
}

.n-schedule-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.n-schedule-live-badge.status-open {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
}
.n-schedule-live-badge.status-closed {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}
.n-schedule-live-badge .n-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: nStatusPulse 1.8s infinite;
}
.n-schedule-live-badge.status-closed .n-pulse-dot {
  background: #EF4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: none;
}

@keyframes nStatusPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* 7 Days Bar */
.n-schedule-days-bar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 14px;
  background: #ffffff;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid #E2E8F0;
}
.n-day-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 2px;
  border-radius: 10px;
  background: #F8FAF9;
  border: 1px solid #E2E8F0;
  transition: all 0.25s ease;
  position: relative;
  cursor: default;
}
.n-day-chip.open {
  background: #F0FDF4;
  border-color: #DCFCE7;
  color: #14532D;
}
.n-day-chip.open:hover {
  background: #DCFCE7;
  border-color: #86EFAC;
  transform: translateY(-2px);
}
.n-day-chip.rest {
  background: #FFFBEB;
  border-color: #FEF3C7;
  color: #92400E;
}
.n-day-chip.rest:hover {
  background: #FEF3C7;
  transform: translateY(-2px);
}
.n-day-chip.today {
  background: linear-gradient(135deg, #10B981, #059669) !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
  z-index: 2;
}
.n-day-chip.today::after {
  content: 'Bugun';
  position: absolute;
  top: -8px;
  background: #0F2E1E;
  color: #ffffff;
  font-size: 8px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.n-day-chip.today .day-code,
.n-day-chip.today .day-sub {
  color: #ffffff !important;
}
.n-day-chip.today .day-dot {
  background: #ffffff !important;
}
.n-day-chip .day-code {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 3px;
}
.n-day-chip .day-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #10B981;
  margin-bottom: 3px;
}
.n-day-chip .day-dot.rest-dot {
  background: #F59E0B;
}
.n-day-chip .day-sub {
  font-size: 9px;
  font-weight: 700;
  opacity: 0.85;
}

/* 2 Slots Stack */
.n-schedule-slots-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.n-slot-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  background: #ffffff;
  transition: all 0.2s ease;
}
.n-slot-item.slot-primary {
  background: linear-gradient(135deg, #ffffff 0%, #F0FDF4 100%);
  border-color: #BBF7D0;
}
.n-slot-item.slot-primary:hover {
  border-color: #86EFAC;
}
.n-slot-item.slot-secondary {
  background: linear-gradient(135deg, #ffffff 0%, #FFFBEB 100%);
  border-color: #FDE68A;
}
.n-slot-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #FEF3C7;
  color: #D97706;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.n-slot-icon-box.rest-icon {
  background: #FEE2E2;
  color: #DC2626;
}
.n-slot-info {
  flex: 1;
  min-width: 0;
}
.n-slot-period {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.n-slot-time-highlight {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: #0F2E1E;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.n-slot-time-highlight.rest-time {
  color: #B45309;
}
.n-slot-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  flex-shrink: 0;
}
.n-slot-status-chip.open-chip {
  background: #DCFCE7;
  color: #15803D;
}
.n-slot-status-chip.rest-chip {
  background: #FEF3C7;
  color: #B45309;
}

.n-contact-detail-card {
  background: #ffffff;
  border: 1.5px solid #E2E8F0;
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 16px -4px rgba(20, 83, 45, 0.04);
  transition: all 0.25s ease;
  position: relative;
}
.n-contact-detail-card:hover {
  transform: translateY(-2px);
  border-color: #A7F3D0;
  box-shadow: 0 8px 24px -4px rgba(20, 83, 45, 0.08);
}

.n-contact-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.n-contact-icon-box.icon-emerald {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}
.n-contact-icon-box.icon-green {
  background: #EAF6EF;
  color: #14532D;
  border: 1px solid #CFE8D8;
}
.n-contact-icon-box.icon-cyan {
  background: #ECFEFF;
  color: #0E7490;
  border: 1px solid #CCEDF3;
}

.n-contact-detail-body {
  flex: 1;
}
.n-contact-detail-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.n-contact-detail-value {
  font-size: 14.5px;
  font-weight: 700;
  color: #0F2E1E;
  line-height: 1.4;
}
.n-contact-detail-sub {
  font-size: 12.5px;
  color: #64748B;
  margin-top: 2px;
}
.n-contact-phone-link {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #059669;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
  display: inline-block;
}
.n-contact-phone-link:hover {
  color: #047857;
}

.n-contact-call-quick-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}
.n-contact-call-quick-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
}

/* Map Showcase Column */
.n-landing-map-showcase {
  background: #ffffff;
  border: 1.5px solid #E2E8F0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 32px -8px rgba(20, 83, 45, 0.08);
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 460px;
}
.n-map-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #ffffff;
  border-bottom: 1px solid #E2E8F0;
  gap: 12px;
  flex-wrap: wrap;
}
.n-map-top-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0F2E1E;
  font-weight: 700;
  font-size: 13.5px;
}
.n-map-top-chip i {
  color: #EF4444;
  font-size: 16px;
}
.n-map-route-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #EAF6EF;
  color: #14532D;
  border: 1px solid #CFE8D8;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.n-map-route-btn:hover {
  background: #14532D;
  color: #ffffff;
  border-color: #14532D;
}

.n-landing-map-frame {
  flex: 1;
  min-height: 380px;
}
.n-landing-map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
}

.n-map-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #F8FAF9;
  border-top: 1px solid #E2E8F0;
  gap: 12px;
  flex-wrap: wrap;
}
.n-map-coord-text {
  font-size: 12px;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 6px;
}
.n-map-full-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #059669;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}
.n-map-full-btn:hover {
  color: #047857;
  text-decoration: underline;
}

/* ============================================================
   CREATIVE SOCIAL MEDIA HUB & LUXURY FOOTER
   ============================================================ */
.n-landing-creative-footer {
  background: radial-gradient(circle at 50% 0%, #133A25 0%, #0B2417 50%, #06150D 100%);
  color: #ffffff;
  padding: 64px 24px 32px;
  border-top: 1.5px solid rgba(16, 185, 129, 0.25);
  position: relative;
  overflow: hidden;
}
.n-footer-inner-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.n-footer-social-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
}
.n-footer-social-h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: #ffffff;
  margin: 10px 0 10px;
  letter-spacing: -0.02em;
}
.n-footer-social-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
}

.n-footer-social-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 56px;
}

.n-social-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 20px;
  text-decoration: none;
  display: block;
  position: relative;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: #ffffff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.n-social-card:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.4);
}

.n-social-card.card-telegram:hover {
  border-color: #38BDF8;
  box-shadow: 0 16px 36px -8px rgba(56, 189, 248, 0.35);
}
.n-social-card.card-bot:hover {
  border-color: #34D399;
  box-shadow: 0 16px 36px -8px rgba(52, 211, 153, 0.35);
}
.n-social-card.card-instagram:hover {
  border-color: #F472B6;
  box-shadow: 0 16px 36px -8px rgba(244, 114, 182, 0.35);
}
.n-social-card.card-phone:hover {
  border-color: #4ADE80;
  box-shadow: 0 16px 36px -8px rgba(74, 222, 128, 0.35);
}

.n-social-card-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.n-social-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.tg-icon {
  background: linear-gradient(135deg, #0284C7, #0369A1);
  color: #ffffff;
}
.bot-icon {
  background: linear-gradient(135deg, #059669, #047857);
  color: #ffffff;
}
.insta-icon {
  background: linear-gradient(135deg, #E1306C, #FD1D1D, #F56040);
  color: #ffffff;
}
.phone-icon {
  background: linear-gradient(135deg, #10B981, #0D9488);
  color: #ffffff;
}

.n-social-card-text {
  flex: 1;
  min-width: 0;
}
.n-social-tag {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #A7F3D0;
  font-weight: 700;
  margin-bottom: 2px;
}
.n-social-name {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.n-social-handle {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.n-social-action-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}
.n-social-card:hover .n-social-action-arrow {
  transform: translate(2px, -2px);
  background: #ffffff;
  color: #0F2E1E;
}

/* Bottom Copyright Strip */
.n-footer-bottom-bar {
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.n-footer-brand-side {
  display: flex;
  align-items: center;
  gap: 12px;
}
.n-footer-logo-img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: contain;
}
.n-footer-brand-name {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  display: block;
  letter-spacing: 0.02em;
}
.n-footer-brand-name b {
  color: #34D399;
}
.n-footer-tagline {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

.n-footer-copy-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.n-footer-admin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.n-footer-admin-link:hover {
  background: #ffffff;
  color: #0F2E1E;
}

.n-landing-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(11,32,22,.55); z-index: 100; align-items: center; justify-content: center; padding: 20px; }
.n-landing-modal-backdrop.open { display: flex; }
.n-landing-modal { position: relative; background: #fff; border-radius: 20px; padding: 36px 32px 28px; text-align: center; max-width: 320px; width: 100%; box-shadow: 0 30px 60px -20px rgba(11,32,22,.5); }
.n-landing-modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--n-bg); color: var(--n-ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; }
.n-landing-modal-close:hover { background: var(--n-border); }
.n-landing-modal-logo { width: 72px; height: 72px; margin: 0 auto 14px; display: block; }
.n-landing-modal-name { font-weight: 800; font-size: 17px; color: var(--n-ink); margin-bottom: 4px; }
.n-landing-modal-phone { font-weight: 700; font-size: 15px; color: var(--n-ink-soft); margin-bottom: 20px; }
.n-landing-modal-call { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }

@media (max-width: 900px) {
  .n-landing-menu { display: none; }
  .n-nav-phone-btn { display: none; }
  .n-nav-test-btn { display: inline-flex; }
  .n-landing-hero { padding: 20px 20px 32px; }
  .n-landing-cta-row-desktop-only { display: none; }
  .n-landing-cta-row-mobile-only { display: flex; }
  .n-landing-aloqa-grid { grid-template-columns: 1fr; gap: 20px; }
  .n-landing-map { min-height: 280px; }
  .n-landing-map iframe { min-height: 280px; }
  .n-landing-founder-card { padding: 28px 20px; }
  .n-founder-card-content { flex-direction: column; align-items: center; text-align: center; gap: 24px; }
  .n-founder-profile-col { width: 100%; }
  .n-founder-name-row { justify-content: center; }
  .n-landing-founder-achievements { grid-template-columns: 1fr; width: 100%; }
  .n-founder-card-topbar { justify-content: center; }
  .n-landing-subjects-head { flex-direction: column; align-items: stretch; gap: 16px; }
  .n-landing-subject-grid { grid-template-columns: 1fr; gap: 14px; }
  .n-footer-social-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 768px) {
  /* Prevent horizontal overflow */
  html:not(:has(.n-shell)) {
    overflow-x: clip !important;
  }
  body.n-landing-body {
    overflow-x: clip !important;
    overflow-y: visible !important;
    max-width: 100vw !important;
  }

  /* Standardized Section Spacing Rhythm */
  .n-landing-section {
    padding: 38px 16px;
  }
  .n-landing-section.alt {
    padding: 38px 16px;
  }
  .n-landing-section h2,
  .n-about-main-title,
  .n-results-main-title,
  .n-team-main-title,
  .n-contact-main-title {
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 8px;
    font-weight: 800;
  }
  .n-landing-section-lead,
  .n-about-lead-desc,
  .n-landing-results-sublead,
  .n-footer-social-desc {
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .n-section-chip {
    font-size: 12px;
    padding: 4px 12px;
    margin-bottom: 8px;
  }

  /* Header & Navigation */
  .n-landing-nav-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 8px 14px;
    gap: 8px;
  }
  .n-landing-logo-img {
    height: 38px;
    width: auto;
  }
  .n-landing-brand-tagline,
  .n-landing-brand-sub {
    display: none;
  }
  .n-landing-wordmark {
    font-size: 19px;
  }
  .n-landing-nav-actions {
    gap: 6px;
  }
  .n-btn-text-desktop {
    display: none;
  }
  .n-btn-text-mobile {
    display: inline;
  }
  .n-nav-test-btn {
    padding: 6px 11px;
    font-size: 12px;
    gap: 5px;
    border-radius: 999px;
  }
  .n-landing-admin-btn {
    padding: 6px 11px;
    font-size: 12px;
    gap: 5px;
    border-radius: 999px;
  }

  /* Hero Section */
  .n-landing-hero {
    padding: 14px 14px 26px;
  }
  .n-landing-hero-banner-wrap {
    border-radius: 16px;
  }
  .n-landing-cta-row-mobile-only {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-top: 14px;
  }
  .n-landing-cta-primary,
  .n-landing-cta-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 13px 18px;
    font-size: 14.5px;
    border-radius: 12px;
  }

  /* About Section */
  .n-about-card-hero {
    padding: 20px 14px;
    border-radius: 18px;
  }
  .n-about-pillars {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .n-pillar-card {
    padding: 12px 14px;
    border-radius: 12px;
    gap: 12px;
    align-items: center;
  }
  .n-pillar-icon {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }
  .n-pillar-title {
    font-size: 14.5px;
    margin-bottom: 2px;
  }
  .n-pillar-desc {
    font-size: 12.5px;
    line-height: 1.45;
  }

  /* Results Section & 3D Carousel */
  .n-landing-results-header-row {
    margin-top: 26px;
    margin-bottom: 14px;
    gap: 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .n-results-header-actions {
    width: 100%;
    gap: 8px;
  }
  .n-results-not-all-badge {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    padding: 9px 12px;
    font-size: 12px;
    border-radius: 12px;
    line-height: 1.4;
  }
  .n-results-grid-toggle-btn {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    padding: 11px 16px;
    font-size: 13px;
    border-radius: 12px;
  }
  .n-3d-carousel-wrapper {
    margin-top: 14px;
    padding: 18px 8px 16px;
    border-radius: 18px;
    max-width: 100%;
    overflow: hidden;
  }
  .n-3d-carousel-stage {
    height: 410px;
    max-width: 100%;
    overflow: hidden;
  }
  .n-3d-card {
    width: 270px;
    height: 385px;
    border-radius: 18px;
  }
  .n-3d-card-content {
    padding: 14px 12px;
  }
  .n-3d-card-media {
    height: 170px;
  }
  .n-3d-card-desc {
    font-size: 12px;
    line-height: 1.35;
    margin-bottom: 6px;
  }
  .n-3d-card-btn {
    padding: 8px 12px;
    font-size: 12px;
    width: 100%;
    justify-content: center;
    border-radius: 10px;
  }
  .n-3d-carousel-controls {
    margin-top: 12px;
    gap: 6px;
    justify-content: center;
  }
  .n-3d-dots {
    max-width: 110px;
  }
  .n-all-grid-container {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Subjects Section */
  .n-landing-subjects-head {
    margin-bottom: 18px;
    gap: 12px;
  }
  .n-landing-subjects-cta {
    width: 100%;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    padding: 12px 18px;
    font-size: 14px;
    border-radius: 12px;
  }
  .n-landing-subject-grid {
    gap: 10px;
  }
  .n-landing-subject-card {
    border-radius: 14px;
  }
  .n-landing-subject-card-toggle {
    padding: 14px 14px;
  }
  .n-landing-subject-name {
    font-size: 16px;
  }
  .n-landing-subject-short {
    font-size: 12.5px;
  }
  .n-subject-detail-cta-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 10px;
  }

  /* Team & Founder Section */
  .n-team-header {
    margin-bottom: 18px;
    text-align: center;
  }
  .n-landing-founder-card {
    padding: 20px 14px;
    border-radius: 18px;
    margin-bottom: 18px;
  }
  .n-founder-card-topbar {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 14px;
  }
  .n-founder-badge-pill,
  .n-founder-exp-pill {
    font-size: 11px;
    padding: 4px 9px;
  }
  .n-founder-card-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .n-founder-profile-col {
    width: 100%;
  }
  .n-founder-avatar-wrap {
    width: 110px;
    height: 110px;
    margin: 0 auto;
  }
  .n-landing-founder-avatar {
    width: 110px;
    height: 110px;
  }
  .n-founder-name-row {
    justify-content: center;
    gap: 6px;
  }
  .n-landing-founder-name {
    font-size: 21px;
    text-align: center;
  }
  .n-landing-founder-title {
    font-size: 13px;
    text-align: center;
    margin-bottom: 14px;
  }
  .n-founder-stats-strip {
    justify-content: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
  }
  .n-founder-stat-item .stat-num {
    font-size: 16px;
  }
  .n-founder-stat-item .stat-lbl {
    font-size: 10.5px;
  }
  .n-landing-founder-achievements {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 14px;
    width: 100%;
  }
  .n-ach-chip {
    padding: 9px 12px;
    font-size: 12px;
    border-radius: 10px;
  }
  .n-founder-quote-bar {
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 0 10px 10px 0;
    text-align: left;
  }

  /* Aloqa (Contact & Map) Section */
  .n-contact-section {
    padding: 38px 16px;
  }
  .n-contact-header {
    margin-bottom: 18px;
    text-align: center;
  }
  .n-landing-aloqa-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .n-contact-info-col {
    gap: 10px;
  }
  .n-bino-showcase-card {
    border-radius: 16px;
  }
  .n-bino-photo-wrapper {
    height: 170px;
  }
  .n-bino-bottom-name h3 {
    font-size: 15px;
  }
  .n-schedule-master-card {
    padding: 14px 12px;
    border-radius: 16px;
  }
  .n-schedule-days-bar {
    gap: 3px;
    padding: 5px 3px;
  }
  .n-day-chip {
    padding: 4px 1px;
    font-size: 9.5px;
    border-radius: 5px;
  }
  .n-contact-detail-card {
    padding: 11px 12px;
    border-radius: 12px;
    gap: 10px;
  }
  .n-landing-map-showcase {
    border-radius: 16px;
  }
  .n-map-top-bar {
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .n-map-route-btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    padding: 9px 12px;
    font-size: 12.5px;
    border-radius: 8px;
  }
  .n-landing-map-frame iframe {
    min-height: 220px;
    height: 220px;
  }
  .n-map-bottom-bar {
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .n-map-coord-text {
    text-align: center;
    font-size: 11px;
  }
  .n-map-full-btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 8px;
  }

  /* Footer */
  .n-landing-creative-footer {
    padding: 34px 16px 20px;
  }
  .n-footer-social-head {
    margin-bottom: 18px;
    text-align: center;
  }
  .n-footer-social-h3 {
    font-size: 19px;
    line-height: 1.3;
    margin-bottom: 6px;
  }
  .n-footer-social-desc {
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .n-footer-social-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 18px;
  }
  .n-social-card {
    padding: 11px 12px;
    border-radius: 12px;
  }
  .n-social-name {
    font-size: 14px;
  }
  .n-social-handle {
    font-size: 12px;
  }
  .n-footer-bottom-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding-top: 16px;
  }
  .n-footer-copy-text {
    font-size: 11.5px;
  }
  .n-footer-admin-link {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 8px;
  }
}

@media (max-width: 480px) {
  .n-landing-logo-img {
    height: 33px;
  }
  .n-landing-wordmark {
    font-size: 17px;
  }
  .n-nav-test-btn {
    padding: 5px 9px;
    font-size: 11.5px;
    gap: 4px;
  }
  .n-landing-admin-btn {
    padding: 5px 9px;
    font-size: 11.5px;
    gap: 4px;
  }
  .n-landing-nav-actions {
    gap: 5px;
  }
  .n-3d-card {
    width: 255px;
    height: 375px;
  }
  .n-3d-carousel-stage {
    height: 395px;
  }
  .n-3d-card-media {
    height: 155px;
  }
}



/* ============================================================
   MODERN FINANCIAL STATISTICS DASHBOARD COMPONENT
   ============================================================ */
.n-fin-card {
  padding: 24px 26px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--n-border);
  box-shadow: 0 4px 20px -6px rgba(15, 35, 25, 0.05);
  margin-bottom: 24px;
}

/* Header */
.n-fin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}
.n-fin-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.n-fin-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 6px 16px -4px rgba(16, 185, 129, 0.35);
  flex-shrink: 0;
}
.n-fin-title {
  font-size: 18px;
  font-weight: 750;
  color: var(--n-ink);
  margin: 0 0 2px 0;
  letter-spacing: -0.015em;
}
.n-fin-subtitle {
  font-size: 13px;
  color: var(--n-ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Controls */
.n-fin-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.n-fin-presets {
  display: inline-flex;
  background: var(--n-bg);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--n-border);
  gap: 2px;
}
.n-fin-preset-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--n-ink-soft);
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.n-fin-preset-btn:hover {
  color: var(--n-ink);
  background: rgba(0, 0, 0, 0.04);
}
.n-fin-preset-btn.active {
  background: #ffffff;
  color: var(--n-green);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  font-weight: 700;
}

.n-fin-date-form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.n-fin-date-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--n-bg);
  border: 1px solid var(--n-border);
  border-radius: 10px;
  padding: 3px 8px;
}
.n-fin-input {
  border: none !important;
  background: transparent !important;
  font-size: 12.5px !important;
  height: 30px !important;
  padding: 0 !important;
  color: var(--n-ink) !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
}
.n-fin-sep {
  color: var(--n-ink-faint);
  font-size: 12px;
}
.n-fin-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--n-border);
  background: var(--n-bg);
  color: var(--n-ink);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.n-fin-btn:hover {
  border-color: var(--n-green);
  background: var(--n-mint);
  color: var(--n-green);
}

/* 4 KPI Metrics */
.n-fin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.n-fin-kpi-box {
  background: var(--n-bg);
  border: 1px solid var(--n-border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.n-fin-kpi-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.2s ease;
}
.n-fin-kpi-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.08);
}
.n-fin-kpi-income::after { background: linear-gradient(90deg, #10B981, #059669); }
.n-fin-kpi-expense::after { background: linear-gradient(90deg, #F59E0B, #D97706); }
.n-fin-kpi-profit::after { background: linear-gradient(90deg, #059669, #10B981); }
.n-fin-kpi-loss::after { background: linear-gradient(90deg, #EF4444, #DC2626); }
.n-fin-kpi-avg::after { background: linear-gradient(90deg, #0284C7, #38BDF8); }

.n-fin-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.n-fin-kpi-lbl {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--n-ink-soft);
}
.n-fin-kpi-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.n-fin-kpi-income .n-fin-kpi-icon { background: rgba(16, 185, 129, 0.12); color: #059669; }
.n-fin-kpi-expense .n-fin-kpi-icon { background: rgba(245, 158, 11, 0.12); color: #D97706; }
.n-fin-kpi-profit .n-fin-kpi-icon { background: rgba(16, 185, 129, 0.12); color: #059669; }
.n-fin-kpi-loss .n-fin-kpi-icon { background: rgba(239, 68, 68, 0.12); color: #DC2626; }
.n-fin-kpi-avg .n-fin-kpi-icon { background: rgba(2, 132, 199, 0.12); color: #0284C7; }

.n-fin-kpi-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--n-ink);
  margin-bottom: 12px;
  white-space: nowrap;
}
.n-fin-kpi-income .n-fin-kpi-val { color: #059669; }
.n-fin-kpi-expense .n-fin-kpi-val { color: #D97706; }
.n-fin-kpi-profit .n-fin-kpi-val { color: #059669; }
.n-fin-kpi-loss .n-fin-kpi-val { color: #DC2626; }
.n-fin-kpi-avg .n-fin-kpi-val { color: #0284C7; }

.n-fin-kpi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.n-fin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1;
}
.n-fin-badge-green { background: #E8F5E9; color: #1B5E20; }
.n-fin-badge-amber { background: #FEF3C7; color: #92400E; }
.n-fin-badge-red { background: #FEE2E2; color: #991B1B; }
.n-fin-badge-blue { background: #E0F2FE; color: #075985; }
.n-fin-kpi-hint {
  font-size: 11.5px;
  color: var(--n-ink-faint);
  white-space: nowrap;
}

/* Chart Area */
.n-fin-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--n-border);
}
.n-fin-chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--n-ink);
}
.n-fin-chart-title i {
  color: var(--n-green);
  font-size: 16px;
}
.n-fin-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: var(--n-ink-soft);
}
.n-fin-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.n-fin-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}
.n-fin-dot-income {
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}
.n-fin-dot-expense {
  background: #F59E0B;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.n-fin-chart-wrap {
  position: relative;
  cursor: crosshair;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.015) 100%);
  border-radius: 12px;
  padding: 6px 0;
}
.n-fin-gridlabel {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  text-align: right;
  width: 56px;
  font-size: 11px;
  font-weight: 500;
  color: var(--n-ink-faint);
  font-variant-numeric: tabular-nums;
}
.n-fin-gridline {
  stroke: rgba(0, 0, 0, 0.05);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.n-fin-svg {
  width: 100%;
  height: 190px;
  overflow: visible;
  display: block;
}
.n-fin-vline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.6), rgba(245, 158, 11, 0.6));
  pointer-events: none;
  display: none;
  z-index: 4;
}
.n-fin-vline.visible { display: block; }

.n-fin-dot-pay {
  fill: #10B981;
  stroke: #ffffff;
  stroke-width: 2.5;
  transition: r 0.15s ease;
}
.n-fin-dot-exp {
  fill: #F59E0B;
  stroke: #ffffff;
  stroke-width: 2.5;
  transition: r 0.15s ease;
}

.n-fin-x-labels {
  display: flex;
  margin-top: 10px;
}
.n-fin-x-labels span {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--n-ink-faint);
  font-weight: 500;
}

/* Tooltip */
.n-fin-tooltip {
  position: absolute;
  top: -12px;
  background: #111E16;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: none;
  transition: left 0.05s ease-out;
}
.n-fin-tooltip.visible { display: block; }

/* Breakdown Section */
.n-fin-breakdown-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--n-border);
}
.n-fin-breakdown-card {
  background: var(--n-bg);
  border: 1px solid var(--n-border);
  border-radius: 14px;
  padding: 18px 20px;
}
.n-fin-breakdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.n-fin-breakdown-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--n-ink);
}
.n-fin-breakdown-sub {
  font-size: 12px;
  color: var(--n-ink-soft);
  font-weight: 600;
}
.n-fin-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.n-fin-breakdown-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.n-fin-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.n-fin-item-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.n-fin-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
}
.n-fin-item-name {
  font-weight: 600;
  color: var(--n-ink);
}
.n-fin-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.n-fin-item-amt {
  font-weight: 700;
  color: var(--n-ink);
  font-size: 13px;
}
.n-fin-item-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--n-ink-soft);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 6px;
}
.n-fin-item-bar-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.n-fin-item-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.n-fin-empty-state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  color: var(--n-ink-faint);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
  border: 1px dashed var(--n-border);
}

/* Dark Theme overrides for Financial Dashboard */
html[data-theme="dark"] .n-fin-card {
  background: #0F1B14;
  box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .n-fin-preset-btn.active {
  background: rgba(255, 255, 255, 0.08);
  color: #34D399;
}
html[data-theme="dark"] .n-fin-kpi-box {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .n-fin-kpi-box:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .n-fin-kpi-income .n-fin-kpi-val { color: #34D399; }
html[data-theme="dark"] .n-fin-kpi-expense .n-fin-kpi-val { color: #FBBF24; }
html[data-theme="dark"] .n-fin-kpi-profit .n-fin-kpi-val { color: #34D399; }
html[data-theme="dark"] .n-fin-kpi-loss .n-fin-kpi-val { color: #F87171; }
html[data-theme="dark"] .n-fin-kpi-avg .n-fin-kpi-val { color: #38BDF8; }
html[data-theme="dark"] .n-fin-badge-green { background: rgba(52, 211, 153, 0.15); color: #34D399; }
html[data-theme="dark"] .n-fin-badge-amber { background: rgba(251, 191, 36, 0.15); color: #FBBF24; }
html[data-theme="dark"] .n-fin-badge-red { background: rgba(248, 113, 113, 0.15); color: #F87171; }
html[data-theme="dark"] .n-fin-badge-blue { background: rgba(56, 189, 248, 0.15); color: #38BDF8; }
html[data-theme="dark"] .n-fin-gridline { stroke: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .n-fin-dot-pay,
html[data-theme="dark"] .n-fin-dot-exp { stroke: #0F1B14; }
html[data-theme="dark"] .n-fin-breakdown-card { background: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .n-fin-item-badge { background: rgba(255, 255, 255, 0.08); color: var(--n-ink-soft); }
html[data-theme="dark"] .n-fin-item-bar-track { background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .n-fin-empty-state { background: rgba(255, 255, 255, 0.02); }

/* ==========================================================================
   Annual Monthly Enrollment Bar Chart & KPI Section
   ========================================================================== */
.n-kpi-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 16px;
  flex-wrap: wrap;
}
.n-kpi-big {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--n-ink);
  line-height: 1;
}
.n-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--n-mint);
  color: var(--n-green);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--n-mint-border);
}
.n-kpi-delta.negative {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #FECACA;
}
.n-kpi-row .lbl,
.n-kpi-peak-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--n-ink-soft);
  background: rgba(0, 0, 0, 0.03);
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid var(--n-border);
}
html[data-theme="dark"] .n-kpi-row .lbl,
html[data-theme="dark"] .n-kpi-peak-tag {
  background: rgba(255, 255, 255, 0.04);
}

.n-mbar-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: var(--n-ink-soft);
}
.n-mbar-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.n-mbar-legend-item .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.n-mbar-legend-item .dot.up {
  background: linear-gradient(135deg, #10B981, #059669);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}
.n-mbar-legend-item .dot.down {
  background: linear-gradient(135deg, #F87171, #DC2626);
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

/* Monthly bar chart grid */
.n-mbars-wrap {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(248, 250, 252, 0.9) 100%);
  border: 1px solid var(--n-border);
  border-radius: 14px;
  padding: 24px 12px 12px;
  margin-top: 4px;
}
html[data-theme="dark"] .n-mbars-wrap {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.n-mbars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  align-items: end;
  height: 160px;
  position: relative;
  border-bottom: 1.5px solid var(--n-border);
  padding-bottom: 2px;
}
.n-mbars .col {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 100%;
  position: relative;
  border-radius: 8px 8px 0 0;
  padding: 0 2px;
  transition: all 0.2s ease;
}
.n-mbars .col:hover {
  background: rgba(16, 185, 129, 0.06);
}
.n-mbars .col.peak {
  background: rgba(16, 185, 129, 0.08);
  border-radius: 8px 8px 0 0;
}
.n-mbars .col.peak::before {
  content: '★';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #10B981;
}

.n-mbars .bar {
  width: 14px;
  min-height: 0;
  border-radius: 6px 6px 0 0;
  position: relative;
  transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s ease;
  transform-origin: bottom center;
}
.n-mbars .col:hover .bar {
  transform: scaleY(1.04);
}
.n-mbars .bar.up {
  background: linear-gradient(180deg, #10B981 0%, #059669 100%);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}
.n-mbars .bar.down {
  background: linear-gradient(180deg, #F87171 0%, #DC2626 100%);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}
.n-mbars .bar span {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  color: var(--n-ink);
  background: var(--n-card-bg);
  border: 1px solid var(--n-border);
  padding: 1px 5px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.n-mbars .bar.up span {
  color: #059669;
  border-color: #A7F3D0;
}
.n-mbars .bar.down span {
  color: #DC2626;
  border-color: #FECACA;
}

.n-mbars-x {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.n-mbars-x span {
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--n-ink-soft);
  transition: color 0.2s ease;
}
.n-mbars-x span.peak {
  color: var(--n-green);
  font-weight: 800;
}

/* ==========================================================================
   Modern Financial Dynamics Chart (Chart.js Canvas + Controls)
   ========================================================================== */
.n-fin-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 14px;
}
.n-fin-chart-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.n-fin-chart-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--n-mint);
  color: var(--n-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  border: 1px solid var(--n-mint-border);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}
.n-fin-chart-title {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--n-ink);
  line-height: 1.2;
}
.n-fin-chart-sub {
  font-size: 12px;
  color: var(--n-ink-soft);
  margin-top: 2px;
}

.n-fin-chart-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Chart type switcher: [ Chiziqli ] [ Ustunli ] */
.n-chart-type-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--n-bg);
  border: 1px solid var(--n-border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.n-chart-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--n-ink-soft);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.n-chart-type-btn:hover {
  color: var(--n-ink);
  background: rgba(0, 0, 0, 0.04);
}
.n-chart-type-btn.active {
  background: #ffffff;
  color: var(--n-green);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
html[data-theme="dark"] .n-chart-type-btn.active {
  background: #1A2E22;
  color: #34D399;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Series Pills (Kirim & Chiqim) */
.n-fin-series-pills {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.n-fin-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--n-border);
  background: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--n-ink-soft);
  cursor: pointer;
  transition: all 0.2s ease;
}
.n-fin-pill-btn .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}
.n-fin-pill-income .dot {
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}
.n-fin-pill-income strong {
  color: #059669;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  margin-left: 2px;
}
.n-fin-pill-expense .dot {
  background: #F59E0B;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}
.n-fin-pill-expense strong {
  color: #D97706;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  margin-left: 2px;
}
.n-fin-pill-btn.muted {
  opacity: 0.4;
  text-decoration: line-through;
  background: rgba(0, 0, 0, 0.03);
}
html[data-theme="dark"] .n-fin-pill-btn {
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .n-fin-pill-income strong { color: #34D399; }
html[data-theme="dark"] .n-fin-pill-expense strong { color: #FBBF24; }

/* Canvas Container */
.n-fin-canvas-container {
  position: relative;
  width: 100%;
  margin: 14px 0 18px;
  padding: 10px 6px 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(248, 250, 252, 0.8) 100%);
  border: 1px solid var(--n-border);
  border-radius: 16px;
}
html[data-theme="dark"] .n-fin-canvas-container {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
}
.n-fin-canvas-wrap {
  position: relative;
  height: 270px;
  width: 100%;
}

/* Custom Floating Glassmorphic Tooltip */
.n-fin-custom-tooltip {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 14px 34px -6px rgba(0, 0, 0, 0.45);
  transition: opacity 0.15s ease;
  min-width: 210px;
  opacity: 0;
}
.n-fin-custom-tooltip .n-tip-header {
  font-size: 12px;
  font-weight: 700;
  color: #94A3B8;
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 0.02em;
}
.n-fin-custom-tooltip .n-tip-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.n-fin-custom-tooltip .n-tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
}
.n-fin-custom-tooltip .n-tip-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #CBD5E1;
}
.n-fin-custom-tooltip .n-tip-label .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
}
.n-fin-custom-tooltip .n-tip-label .dot.pay { background: #34D399; }
.n-fin-custom-tooltip .n-tip-label .dot.exp { background: #FBBF24; }
.n-fin-custom-tooltip .n-tip-val {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
}
.n-fin-custom-tooltip .n-tip-val.pay { color: #34D399; }
.n-fin-custom-tooltip .n-tip-val.exp { color: #FBBF24; }
.n-fin-custom-tooltip .n-tip-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0 2px;
}
.n-fin-custom-tooltip .n-tip-row.net {
  font-size: 12px;
  margin-top: 1px;
}
.n-fin-custom-tooltip .n-tip-val.pos { color: #34D399; }
.n-fin-custom-tooltip .n-tip-val.neg { color: #F87171; }