/* ============================================================
   GTBIT Alumni — theme.css
   DEFAULT: BRIGHT VIBRANT (light, electric, vivid)
   DARK MODE: body.dark-mode
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Syne:wght@700;800;900&display=swap');

/* ==================== VARIABLES ==================== */
:root {
  /* BRIGHT MODE palette */
  --bg-page:      #EEF2FF;
  --bg-secondary: #E0E7FF;
  --bg-tertiary:  #FFFFFF;

  --primary:        #4F46E5;
  --primary-light:  #818CF8;
  --primary-dark:   #3730A3;
  --secondary:      #06B6D4;
  --secondary-light:#67E8F9;
  --coral:          #F43F5E;
  --lime:           #84CC16;
  --amber:          #F59E0B;
  --violet:         #A855F7;
  --success:        #10B981;
  --danger:         #EF4444;

  --text-primary:   #0F172A;
  --text-secondary: #334155;
  --text-muted:     #64748B;

  --card-bg:        rgba(255,255,255,0.88);
  --card-border:    rgba(79,70,229,0.14);
  --card-shadow:    0 4px 20px rgba(79,70,229,0.09);
  --card-shadow-lg: 0 12px 42px rgba(79,70,229,0.16);
  --glass-blur:     blur(18px);

  --sidebar-bg-from:#4F46E5;
  --sidebar-bg-to:  #1E1B4B;
  --topbar-bg:      rgba(255,255,255,0.93);
  --topbar-border:  rgba(79,70,229,0.10);

  --sidebar-width:    268px;
  --sidebar-collapsed:70px;
  --topbar-height:    64px;

  --radius:    18px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --ease:      cubic-bezier(0.4,0,0.2,1);
  --transition:all 0.26s var(--ease);

  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Syne', sans-serif;

  --g-primary: linear-gradient(135deg,#4F46E5 0%,#818CF8 100%);
  --g-coral:   linear-gradient(135deg,#F43F5E 0%,#FB923C 100%);
  --g-cyan:    linear-gradient(135deg,#06B6D4 0%,#22D3EE 100%);
  --g-lime:    linear-gradient(135deg,#84CC16 0%,#22C55E 100%);
  --g-violet:  linear-gradient(135deg,#A855F7 0%,#EC4899 100%);
  --g-amber:   linear-gradient(135deg,#F59E0B 0%,#EF4444 100%);
}

/* ==================== DARK MODE ==================== */
body.dark-mode {
  --bg-page:      #09071A;
  --bg-secondary: #110E2B;
  --bg-tertiary:  #1A1636;

  --primary:       #818CF8;
  --primary-light: #A5B4FC;
  --primary-dark:  #4F46E5;
  --secondary:     #22D3EE;
  --coral:         #FB7185;
  --lime:          #A3E635;
  --amber:         #FCD34D;

  --text-primary:   #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted:     #64748B;

  --card-bg:        rgba(26,22,54,0.90);
  --card-border:    rgba(129,140,248,0.18);
  --card-shadow:    0 4px 22px rgba(0,0,0,0.5);
  --card-shadow-lg: 0 16px 50px rgba(0,0,0,0.6);

  --sidebar-bg-from:#1A1636;
  --sidebar-bg-to:  #09071A;
  --topbar-bg:      rgba(9,7,26,0.93);
  --topbar-border:  rgba(129,140,248,0.12);
}

/* ==================== BASE ==================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body {
  font-family: var(--font);
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 0.35s ease, color 0.25s ease;
}

/* Ambient colour orbs */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 700px 500px at  5% 10%, rgba(79,70,229,.07) 0%,transparent 65%),
    radial-gradient(ellipse 500px 400px at 95%  5%, rgba(244,63,94,.07) 0%,transparent 65%),
    radial-gradient(ellipse 500px 500px at 50% 95%, rgba(6,182,212,.06) 0%,transparent 65%),
    radial-gradient(ellipse 300px 300px at 80% 50%, rgba(132,204,22,.05) 0%,transparent 60%);
  transition: opacity .4s ease;
}
body.dark-mode::before {
  background:
    radial-gradient(ellipse 700px 500px at  5% 10%, rgba(79,70,229,.22) 0%,transparent 60%),
    radial-gradient(ellipse 500px 400px at 95%  5%, rgba(168,85,247,.16) 0%,transparent 60%),
    radial-gradient(ellipse 500px 500px at 50% 95%, rgba(6,182,212,.13) 0%,transparent 60%);
}

/* ==================== CARD / GLASS ==================== */
.card, .glass-card {
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  transition: var(--transition);
  position: relative; overflow: hidden;
}
.card:hover,.glass-card:hover {
  box-shadow: var(--card-shadow-lg);
  transform: translateY(-2px);
}

/* ==================== SIDEBAR ==================== */
#sidebar {
  position: fixed; top:0; left:0; height:100vh;
  width: var(--sidebar-width);
  background: linear-gradient(170deg, var(--sidebar-bg-from) 0%, var(--sidebar-bg-to) 100%);
  z-index: 1000;
  display: flex; flex-direction: column; overflow: hidden;
  transition: width 0.30s var(--ease);
  box-shadow: 4px 0 28px rgba(0,0,0,0.13);
}
body.dark-mode #sidebar { box-shadow: 4px 0 28px rgba(0,0,0,0.55); }
#sidebar.collapsed { width: var(--sidebar-collapsed); }
#sidebar.collapsed .nav-label,
#sidebar.collapsed .sidebar-logo-text,
#sidebar.collapsed .sidebar-section-label { opacity:0; width:0; overflow:hidden; white-space:nowrap; }

.sidebar-header {
  padding: 18px 16px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  min-height: var(--topbar-height);
}
.sidebar-logo {
  width: 40px; height: 40px; flex-shrink:0;
  background: rgba(255,255,255,0.18); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; border: 1px solid rgba(255,255,255,0.22);
}
.sidebar-logo-text h6 {
  font-size:13.5px; font-weight:900; color:white; line-height:1.2;
  white-space:nowrap; font-family: var(--font-display);
}
.sidebar-logo-text small { font-size:10px; color:rgba(255,255,255,0.55); white-space:nowrap; }

.sidebar-nav {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding: 12px 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.sidebar-section-label {
  font-size:9px; font-weight:900; letter-spacing:2px; text-transform:uppercase;
  color: rgba(255,255,255,0.38); padding: 12px 12px 4px;
  white-space:nowrap; transition: var(--transition);
}
.nav-link {
  display:flex; align-items:center; gap:11px;
  padding: 10px 12px; border-radius: 10px;
  color: rgba(255,255,255,0.70) !important;
  text-decoration:none; font-size:13.5px; font-weight:600;
  transition: var(--transition); margin-bottom:2px;
  white-space:nowrap; position:relative;
}
.nav-link:hover { background:rgba(255,255,255,0.11); color:white !important; }
.nav-link.active {
  background: rgba(255,255,255,0.20) !important;
  color: white !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.15);
}
.nav-link.active::before {
  content:''; position:absolute; left:0; top:18%; bottom:18%;
  width:3px; background:white; border-radius:0 3px 3px 0;
}
.nav-icon { font-size:16px; width:22px; text-align:center; flex-shrink:0; }
.sidebar-footer { padding:12px 8px; border-top:1px solid rgba(255,255,255,0.10); }

/* ==================== TOPBAR ==================== */
#topbar {
  position:fixed; top:0; left:var(--sidebar-width); right:0;
  height: var(--topbar-height);
  background: var(--topbar-bg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--topbar-border);
  z-index:999; display:flex; align-items:center;
  padding: 0 22px; gap:14px;
  transition: left 0.30s var(--ease);
  box-shadow: 0 1px 16px rgba(79,70,229,0.07);
}
#topbar.sidebar-collapsed { left: var(--sidebar-collapsed); }

.topbar-search { flex:1; max-width:380px; position:relative; }
.topbar-search input {
  width:100%;
  background: var(--bg-secondary);
  border: 1.5px solid var(--card-border);
  border-radius: 50px;
  padding: 8px 18px 8px 42px;
  color: var(--text-primary); font-size:13px; font-family:var(--font);
  outline:none; transition:var(--transition);
}
.topbar-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.13);
  background: var(--bg-tertiary);
}
.topbar-search input::placeholder { color:var(--text-muted); }
.topbar-search .search-icon {
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); font-size:15px;
}
#searchResults {
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background: var(--card-bg); backdrop-filter:var(--glass-blur);
  border: 1px solid var(--card-border); border-radius: 14px;
  box-shadow: var(--card-shadow-lg); display:none;
  max-height:300px; overflow-y:auto; z-index:9999; padding:6px 0;
}

/* ==================== MAIN CONTENT ==================== */
#main-content {
  margin-left: var(--sidebar-width);
  margin-top: var(--topbar-height);
  padding: 26px;
  min-height: calc(100vh - var(--topbar-height));
  position:relative; z-index:1;
  transition: margin-left 0.30s var(--ease);
}
#main-content.sidebar-collapsed { margin-left: var(--sidebar-collapsed); }

/* ==================== BUTTONS ==================== */
.btn-primary-grad {
  background: var(--g-primary); border:none; color:white;
  border-radius:50px; padding:10px 26px; font-weight:700; font-size:14px;
  cursor:pointer; transition:var(--transition);
  box-shadow: 0 4px 16px rgba(79,70,229,0.32);
  font-family:var(--font); display:inline-flex; align-items:center; gap:6px;
  text-decoration:none;
}
.btn-primary-grad:hover { transform:translateY(-2px); color:white; box-shadow:0 8px 26px rgba(79,70,229,0.42); filter:brightness(1.07); }
.btn-coral  { background:var(--g-coral);  border:none; color:white; border-radius:50px; padding:10px 26px; font-weight:700; font-size:14px; cursor:pointer; transition:var(--transition); font-family:var(--font); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.btn-coral:hover  { transform:translateY(-2px); color:white; filter:brightness(1.08); }
.btn-cyan   { background:var(--g-cyan);   border:none; color:white; border-radius:50px; padding:10px 26px; font-weight:700; font-size:14px; cursor:pointer; transition:var(--transition); font-family:var(--font); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.btn-cyan:hover   { transform:translateY(-2px); color:white; filter:brightness(1.08); }
.btn-lime   { background:var(--g-lime);   border:none; color:white; border-radius:50px; padding:10px 26px; font-weight:700; font-size:14px; cursor:pointer; transition:var(--transition); font-family:var(--font); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.btn-lime:hover   { transform:translateY(-2px); color:white; filter:brightness(1.08); }
.btn-violet { background:var(--g-violet); border:none; color:white; border-radius:50px; padding:10px 26px; font-weight:700; font-size:14px; cursor:pointer; transition:var(--transition); font-family:var(--font); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.btn-glass {
  background: rgba(79,70,229,0.07);
  border: 1.5px solid var(--card-border);
  color: var(--text-secondary); border-radius:50px;
  padding:9px 22px; font-weight:600; font-size:13px;
  cursor:pointer; transition:var(--transition); font-family:var(--font); text-decoration:none;
}
.btn-glass:hover { background:rgba(79,70,229,0.14); color:var(--primary); border-color:var(--primary); }
.btn-outline {
  background:transparent; border:2px solid var(--primary);
  color:var(--primary); border-radius:50px; padding:9px 24px;
  font-weight:700; font-size:14px; cursor:pointer; transition:var(--transition); font-family:var(--font); text-decoration:none;
}
.btn-outline:hover { background:var(--primary); color:white; }
.btn-danger { background:var(--g-amber); border:none; color:white; border-radius:50px; padding:8px 18px; font-weight:700; font-size:13px; cursor:pointer; transition:var(--transition); font-family:var(--font); }

/* ==================== FORM ==================== */
.form-control-glass {
  background: var(--bg-secondary) !important;
  border: 1.5px solid var(--card-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  padding: 11px 15px !important;
  font-size: 14px !important; font-family: var(--font) !important;
  transition: var(--transition) !important; width:100%;
}
.form-control-glass:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12) !important;
  background: var(--bg-tertiary) !important; outline:none !important;
}
.form-control-glass::placeholder { color:var(--text-muted) !important; }
.form-control-glass option { background:var(--bg-tertiary); color:var(--text-primary); }
.form-label { font-size:12px; font-weight:700; color:var(--text-secondary); margin-bottom:5px; letter-spacing:.2px; }

/* ==================== STAT CARDS ==================== */
.stat-card { padding:22px; position:relative; overflow:hidden; }
.stat-icon { width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.stat-value { font-size:30px; font-weight:900; line-height:1; color:var(--text-primary); font-family:var(--font-display); }
.stat-label { font-size:12px; color:var(--text-muted); font-weight:600; margin-top:3px; }
.stat-bg    { position:absolute; right:-14px; top:-14px; font-size:88px; opacity:0.06; line-height:1; }
.icon-indigo { background:rgba(79,70,229,0.13); color:var(--primary); }
.icon-coral  { background:rgba(244,63,94,0.12);  color:var(--coral); }
.icon-cyan   { background:rgba(6,182,212,0.12);  color:var(--secondary); }
.icon-lime   { background:rgba(132,204,22,0.12); color:var(--lime); }
.icon-amber  { background:rgba(245,158,11,0.12); color:var(--amber); }
.icon-violet { background:rgba(168,85,247,0.12); color:var(--violet); }

/* ==================== TABLES ==================== */
.table-glass { background:transparent !important; color:var(--text-primary) !important; }
.table-glass thead th {
  background:rgba(79,70,229,0.08) !important; color:var(--text-secondary) !important;
  font-weight:800 !important; font-size:11px !important; text-transform:uppercase; letter-spacing:1px;
  border:none !important; padding:13px 14px !important;
}
.table-glass tbody tr { transition:var(--transition); border-bottom:1px solid var(--card-border) !important; }
.table-glass tbody tr:hover { background:rgba(79,70,229,0.04) !important; cursor:pointer; }
.table-glass tbody td { border:none !important; padding:12px 14px !important; font-size:13.5px; vertical-align:middle; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background:var(--bg-secondary) !important; border:1.5px solid var(--card-border) !important;
  color:var(--text-primary) !important; border-radius:var(--radius-sm) !important;
  padding:6px 12px !important; font-family:var(--font) !important;
}
.dataTables_wrapper .dataTables_info { color:var(--text-muted) !important; font-size:13px; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color:var(--text-secondary) !important; border-radius:8px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background:var(--g-primary) !important; color:white !important; border:none !important; }

/* ==================== BADGES ==================== */
.badge-pill { padding:4px 12px; border-radius:50px; font-size:11px; font-weight:700; display:inline-block; }
.badge-approved { background:rgba(16,185,129,0.14); color:#059669; border:1px solid rgba(16,185,129,0.3); }
.badge-pending  { background:rgba(245,158,11,0.14); color:#D97706; border:1px solid rgba(245,158,11,0.3); }
.badge-rejected { background:rgba(239,68,68,0.14);  color:#DC2626; border:1px solid rgba(239,68,68,0.3); }
.badge-new      { background:rgba(79,70,229,0.14);  color:var(--primary); border:1px solid rgba(79,70,229,0.3); }
.badge-info     { background:rgba(6,182,212,0.12);  color:var(--secondary); border:1px solid rgba(6,182,212,0.3); }

/* ==================== AVATARS ==================== */
.avatar-sm { width:36px; height:36px; border-radius:50%; background:var(--g-primary); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:white; flex-shrink:0; }
.avatar-lg { width:86px; height:86px; border-radius:50%; background:var(--g-primary); display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:900; color:white; margin:0 auto 14px; box-shadow:0 6px 24px rgba(79,70,229,0.28); }
.avatar-sm img,.avatar-lg img { width:100%; height:100%; border-radius:50%; object-fit:cover; }

/* ==================== PAGE HEADER ==================== */
.page-header { margin-bottom:24px; }
.page-header h1 { font-size:23px; font-weight:900; font-family:var(--font-display); color:var(--text-primary); }
.page-header p  { font-size:13px; color:var(--text-muted); margin-top:4px; }
.breadcrumb-glass { background:none; padding:0; margin:0 0 6px; }
.breadcrumb-glass .breadcrumb-item { font-size:12px; color:var(--text-muted); }
.breadcrumb-glass .breadcrumb-item+.breadcrumb-item::before { color:var(--text-muted); }
.breadcrumb-glass .breadcrumb-item.active { color:var(--text-secondary); }

/* ==================== SEPARATOR ==================== */
.separator { height:1px; background:var(--card-border); margin:18px 0; }

/* ==================== REGISTRATION STEPPER ==================== */
.reg-stepper { display:flex; align-items:center; margin-bottom:30px; }
.reg-step { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
.reg-step:not(:last-child)::after {
  content:''; position:absolute; top:18px; left:calc(50% + 22px);
  width:calc(100% - 44px); height:2px;
  background:var(--card-border); transition:background .4s ease; z-index:0;
}
.reg-step.done:not(:last-child)::after { background:var(--g-lime); }
.reg-step.active:not(:last-child)::after { background:var(--g-primary); }
.reg-step-circle {
  width:36px; height:36px; border-radius:50%;
  border:2px solid var(--card-border); background:var(--bg-tertiary);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:var(--text-muted);
  position:relative; z-index:1; transition:var(--transition);
}
.reg-step.active .reg-step-circle { background:var(--g-primary); border-color:var(--primary); color:white; box-shadow:0 4px 16px rgba(79,70,229,0.32); }
.reg-step.done  .reg-step-circle  { background:var(--g-lime);    border-color:var(--lime);    color:white; }
.reg-step-label { font-size:11px; font-weight:700; color:var(--text-muted); margin-top:7px; text-align:center; }
.reg-step.active .reg-step-label { color:var(--primary); }
.reg-step.done   .reg-step-label { color:var(--success); }

/* ==================== REPEAT ENTRY CARDS ==================== */
.repeat-card {
  background:var(--bg-secondary); border:1.5px solid var(--card-border);
  border-radius:var(--radius-sm); padding:18px; margin-bottom:14px; transition:var(--transition);
}
.repeat-card:hover { border-color:var(--primary-light); }
.delete-entry-btn {
  background:rgba(244,63,94,0.10); border:1px solid rgba(244,63,94,0.25);
  color:var(--coral); border-radius:8px; padding:4px 10px;
  font-size:11px; font-weight:700; cursor:pointer; transition:var(--transition); font-family:var(--font);
}
.delete-entry-btn:hover { background:rgba(244,63,94,0.2); }

/* ==================== CHATBOT ==================== */
#chatbot-toggle {
  position:fixed; bottom:24px; right:24px; width:54px; height:54px;
  background:var(--g-primary); border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:white; cursor:pointer;
  box-shadow:0 6px 22px rgba(79,70,229,0.38); transition:var(--transition); z-index:2000;
}
#chatbot-toggle:hover { transform:scale(1.1); }
#chatbot-box {
  position:fixed; bottom:92px; right:24px; width:340px; max-height:460px;
  display:none; flex-direction:column; border-radius:var(--radius); overflow:hidden;
  z-index:1999; border:1px solid var(--card-border); box-shadow:var(--card-shadow-lg);
}
#chatbot-box.open { display:flex; animation:slideUpCB .28s ease; }
.chatbot-header { background:var(--g-primary); padding:13px 17px; display:flex; align-items:center; gap:10px; }
.chatbot-messages { flex:1; overflow-y:auto; padding:13px; background:var(--bg-tertiary); scrollbar-width:thin; }
.chat-bubble { max-width:82%; padding:9px 13px; border-radius:14px; font-size:13px; line-height:1.5; }
.chat-msg.bot  { display:flex; margin-bottom:9px; }
.chat-msg.user { display:flex; justify-content:flex-end; margin-bottom:9px; }
.chat-msg.bot  .chat-bubble { background:var(--bg-secondary); color:var(--text-primary); border-bottom-left-radius:4px; }
.chat-msg.user .chat-bubble { background:var(--g-primary); color:white; border-bottom-right-radius:4px; }
.chatbot-input { display:flex; gap:7px; padding:9px 13px; background:var(--bg-tertiary); border-top:1px solid var(--card-border); }
.chatbot-input input { flex:1; background:var(--bg-secondary); border:1.5px solid var(--card-border); border-radius:50px; padding:8px 14px; color:var(--text-primary); font-size:13px; outline:none; font-family:var(--font); }
.chatbot-input input:focus { border-color:var(--primary); }

/* ==================== GALLERY ==================== */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.gallery-item { border-radius:12px; overflow:hidden; position:relative; aspect-ratio:4/3; cursor:pointer; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gallery-item:hover img { transform:scale(1.07); }
.gallery-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(15,23,42,.72) 0%,transparent 55%);
  opacity:0; transition:opacity .3s; display:flex; align-items:flex-end; padding:12px;
}
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay p { color:white; font-size:12px; font-weight:600; margin:0; }

/* ==================== THEME TOGGLE PILL ==================== */
#themeToggle {
  position:relative; width:52px; height:28px;
  background:var(--bg-secondary); border:1.5px solid var(--card-border);
  border-radius:50px; cursor:pointer; transition:var(--transition); flex-shrink:0;
  padding:0; overflow:hidden;
}
#themeToggle::after {
  content:''; position:absolute; top:3px; left:3px;
  width:19px; height:19px; border-radius:50%;
  background:var(--g-amber); transition:var(--transition) transform;
}
body.dark-mode #themeToggle::after { transform:translateX(24px); background:var(--g-violet); }

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);} }
@keyframes slideUpCB { from{opacity:0;transform:translateY(22px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);} }
.animate-in { animation:fadeInUp .42s ease both; }
.animate-in:nth-child(1){animation-delay:.04s}
.animate-in:nth-child(2){animation-delay:.09s}
.animate-in:nth-child(3){animation-delay:.13s}
.animate-in:nth-child(4){animation-delay:.18s}
.animate-in:nth-child(5){animation-delay:.22s}
.animate-in:nth-child(6){animation-delay:.26s}

/* ==================== TEXT UTILITIES ==================== */
.text-gradient { background:var(--g-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.text-gradient-coral { background:var(--g-coral); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.text-gradient-cyan  { background:var(--g-cyan);  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ==================== ALERTS ==================== */
.alert-success-custom { background:rgba(16,185,129,0.12); border:1.5px solid rgba(16,185,129,0.35); color:#059669; border-radius:12px; padding:13px 18px; font-size:13px; font-weight:600; }
.alert-error-custom   { background:rgba(244,63,94,0.10);  border:1.5px solid rgba(244,63,94,0.3);  color:#E11D48; border-radius:12px; padding:13px 18px; font-size:13px; font-weight:600; }
body.dark-mode .alert-success-custom { color:#34D399; }
body.dark-mode .alert-error-custom   { color:#FB7185; }

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(79,70,229,0.22);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:rgba(79,70,229,0.42);}

/* ==================== RESPONSIVE ==================== */
@media(max-width:991px){
  #sidebar{transform:translateX(-100%);width:var(--sidebar-width)!important;transition:transform .28s ease!important;}
  #sidebar.mobile-open{transform:translateX(0);}
  #topbar,#main-content{margin-left:0;left:0;}
  #main-content{padding:18px 14px;}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:999;backdrop-filter:blur(4px);}
  .sidebar-overlay.active{display:block;}
}
@media(max-width:575px){
  .stat-value{font-size:24px;}
  #chatbot-box{width:calc(100vw - 34px);right:17px;}
  .reg-step-label{font-size:10px;}
}