/* =====================================================================
   ETMS — Aurora Dark v6.0
   World-Class Full Dark SaaS Dashboard | 2026
   Plus Jakarta Sans + JetBrains Mono
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,opsz,wght@0,6..18,300;0,6..18,400;0,6..18,500;0,6..18,600;0,6..18,700;0,6..18,800;1,6..18,400&family=JetBrains+Mono:wght@500;700&display=swap');

/* ─── Design Tokens ─── */
:root {
  /* Core palette */
  --primary:        #6366f1;
  --primary-d:      #4f46e5;
  --primary-l:      #818cf8;
  --primary-xl:     #c7d2fe;
  --primary-bg:     rgba(99,102,241,.12);
  --primary-soft:   rgba(99,102,241,.18);
  --secondary:      #0ea5e9;
  --success:        #10b981;
  --warning:        #f59e0b;
  --danger:         #ef4444;
  --purple:         #a855f7;
  --pink:           #ec4899;
  --teal:           #14b8a6;
  --orange:         #f97316;

  /* Dark theme neutrals */
  --gray-50:        rgba(255,255,255,.02);
  --gray-100:       rgba(255,255,255,.04);
  --gray-200:       rgba(255,255,255,.07);
  --gray-300:       rgba(255,255,255,.11);
  --gray-400:       rgba(255,255,255,.22);
  --gray-500:       rgba(255,255,255,.35);
  --gray-600:       rgba(255,255,255,.5);
  --gray-700:       rgba(255,255,255,.65);
  --gray-800:       rgba(255,255,255,.8);
  --gray-900:       rgba(255,255,255,.92);

  /* Semantic text — Dark mode */
  --text-main:      #f1f5f9;
  --text-primary:   #f1f5f9;
  --text-body:      #cbd5e1;
  --text-muted:     #64748b;
  --text-faint:     #334155;

  /* Dark surfaces */
  --border:         rgba(255,255,255,.08);
  --border-h:       rgba(99,102,241,.45);
  --body-bg:        #030712;
  --surface:        #080d1a;
  --surface-2:      #0c1328;
  --card-bg:        rgba(255,255,255,.038);
  --glass-bg:       rgba(255,255,255,.042);
  --glass-border:   rgba(255,255,255,.09);
  --glass-blur:     28px;

  /* Layout */
  --sidebar-w:      272px;
  --topbar-h:       66px;
  --page-pad:       28px;

  /* Radius */
  --radius-xs:      6px;
  --radius-sm:      10px;
  --radius:         16px;
  --radius-lg:      22px;
  --radius-xl:      30px;
  --radius-full:    9999px;

  /* Shadows — deep dark-optimised */
  --shadow-xs:      0 1px 2px rgba(0,0,0,.25);
  --shadow-sm:      0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow:         0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
  --shadow-md:      0 10px 15px -3px rgba(0,0,0,.45), 0 4px 6px -4px rgba(0,0,0,.35);
  --shadow-lg:      0 20px 25px -5px rgba(0,0,0,.5), 0 8px 10px -6px rgba(0,0,0,.4);
  --shadow-xl:      0 25px 60px -12px rgba(0,0,0,.7);
  --shadow-card:    0 0 0 1px rgba(255,255,255,.07), 0 2px 8px rgba(0,0,0,.35), 0 8px 32px rgba(0,0,0,.2);
  --shadow-card-h:  0 0 0 1px rgba(99,102,241,.35), 0 4px 16px rgba(0,0,0,.4), 0 16px 50px rgba(99,102,241,.14);
  --shadow-glow:    0 0 50px rgba(99,102,241,.3);

  /* Motion */
  --font:           'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;
  --ease:           cubic-bezier(.4, 0, .2, 1);
  --ease-out:       cubic-bezier(0, 0, .2, 1);
  --ease-spring:    cubic-bezier(.34, 1.56, .64, 1);
  --ease-bounce:    cubic-bezier(.68, -.55, .265, 1.55);
  --t-fast:         130ms;
  --t-normal:       220ms;
  --t-slow:         380ms;
  --transition:     all var(--t-normal) var(--ease);
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.65;
  min-height: 100%;
  background-color: var(--body-bg);
}
/* Aurora animated background */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 15% 5%,  rgba(99,102,241,.32) 0%, transparent 48%),
    radial-gradient(ellipse 65% 55% at 88% 12%, rgba(14,165,233,.22) 0%, transparent 45%),
    radial-gradient(ellipse 55% 65% at 8%  90%, rgba(168,85,247,.22) 0%, transparent 45%),
    radial-gradient(ellipse 40% 45% at 80% 88%, rgba(20,184,166,.18) 0%, transparent 42%);
  animation: auroraShift 22s ease-in-out infinite alternate;
}
/* Dot grid overlay */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 34px 34px;
}
@keyframes auroraShift {
  0%   { transform: scale(1) rotate(0deg);     opacity: 1;   }
  33%  { transform: scale(1.04) rotate(.8deg); opacity: .85; }
  66%  { transform: scale(.98) rotate(-.5deg); opacity: .92; }
  100% { transform: scale(1.06) rotate(1.2deg);opacity: 1;   }
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea, a { font-family: var(--font); }

/* ─── Custom Scrollbar ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,.22); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,.45); }

/* =====================================================================
   SIDEBAR — Ultra-Dark Glassmorphic Aurora
   ===================================================================== */
.sidebar-wrap {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-w); height: 100vh;
  background: rgba(3,7,18,.94);
  backdrop-filter: blur(48px) saturate(200%);
  -webkit-backdrop-filter: blur(48px) saturate(200%);
  z-index: 1050;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  box-shadow: 4px 0 60px rgba(0,0,0,.55), 1px 0 0 rgba(99,102,241,.15);
  border-right: 1px solid rgba(99,102,241,.1);
  transition: transform var(--t-slow) var(--ease);
}
.sidebar-wrap::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 180% 50% at 50% -5%, rgba(99,102,241,.2) 0%, transparent 45%),
    radial-gradient(ellipse 120% 70% at -30% 100%, rgba(14,165,233,.12) 0%, transparent 48%);
  pointer-events: none; z-index: 0;
}
.sidebar-wrap > * { position: relative; z-index: 1; }
.sidebar-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); }

/* Brand */
.sidebar-brand {
  padding: 22px 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0; text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.sidebar-brand:hover { background: rgba(255,255,255,.025); }
.brand-icon {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1 0%, #818cf8 45%, #38bdf8 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 4px 20px rgba(99,102,241,.7), 0 0 70px rgba(99,102,241,.28);
  animation: brandPulse 4s ease-in-out infinite alternate;
}
@keyframes brandPulse {
  0%   { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 4px 18px rgba(99,102,241,.6), 0 0 55px rgba(99,102,241,.2); }
  100% { box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 4px 28px rgba(99,102,241,.95), 0 0 90px rgba(99,102,241,.42); }
}
.brand-name {
  color: #fff; font-size: 15px; font-weight: 800;
  letter-spacing: -.4px; display: block; line-height: 1.2;
}
.brand-sub {
  color: rgba(255,255,255,.22); font-size: 9px; display: block;
  margin-top: 3px; letter-spacing: .9px; text-transform: uppercase;
}
.brand-version {
  margin-left: auto; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.28), rgba(99,102,241,.14));
  border: 1px solid rgba(99,102,241,.4);
  padding: 2px 10px; border-radius: 20px;
  color: var(--primary-l); font-size: 9px; font-weight: 700; letter-spacing: .5px;
}

/* Sidebar user block */
.sidebar-user {
  margin: 14px 14px 8px; padding: 14px 15px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  transition: all var(--t-fast) var(--ease);
}
.sidebar-user:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(99,102,241,.2);
}
.su-avatar {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: 0 0 0 2px rgba(99,102,241,.45), 0 3px 14px rgba(99,102,241,.5);
}
.su-name { color: #f1f5f9; font-size: 13px; font-weight: 700; line-height: 1.25; }
.su-role {
  color: rgba(255,255,255,.28); font-size: 10.5px; margin-top: 3px;
  display: flex; align-items: center; gap: 6px;
}
.su-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--success);
  box-shadow: 0 0 10px var(--success), 0 0 18px rgba(16,185,129,.5);
  animation: pls 2.4s ease-in-out infinite;
}

/* Navigation */
.sidebar-nav { padding: 4px 12px; flex: 1; }
.nav-section-label {
  padding: 18px 14px 6px;
  color: rgba(255,255,255,.14); font-size: 9px; font-weight: 700;
  letter-spacing: 2.8px; text-transform: uppercase;
}
.sidebar-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 2px;
  color: rgba(255,255,255,.38); font-size: 13px; font-weight: 500;
  border-radius: 12px; white-space: nowrap;
  transition: all var(--t-fast) var(--ease);
  position: relative; overflow: hidden;
}
.sidebar-nav a i {
  font-size: 14px; width: 20px; text-align: center; flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease-spring), color var(--t-fast);
}
.sidebar-nav a:hover {
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.06);
}
.sidebar-nav a:hover i { transform: scale(1.14) translateX(1px); color: var(--primary-l); }
.sidebar-nav a.nav-active {
  color: #fff; font-weight: 600;
  background: linear-gradient(135deg, rgba(99,102,241,.3), rgba(99,102,241,.1));
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.32), 0 4px 20px rgba(99,102,241,.2);
}
.sidebar-nav a.nav-active i { color: var(--primary-l); }
.sidebar-nav a.nav-active::before {
  content: ''; position: absolute; left: 0; top: 16%; bottom: 16%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--primary-xl), var(--primary));
  box-shadow: 0 0 14px var(--primary), 0 0 28px rgba(99,102,241,.4);
}
.nav-badge {
  margin-left: auto;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.4);
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
}
.nav-active .nav-badge { background: rgba(99,102,241,.38); color: #c7d2fe; }

/* Sidebar footer */
.sidebar-footer {
  padding: 14px 12px 22px;
  border-top: 1px solid rgba(255,255,255,.04);
  flex-shrink: 0;
}
.logout-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  color: rgba(239,68,68,.48); font-size: 12.5px; font-weight: 600;
  transition: all var(--t-fast) var(--ease);
}
.logout-link:hover {
  color: var(--danger); background: rgba(239,68,68,.08);
  box-shadow: inset 0 0 0 1px rgba(239,68,68,.15);
}
.sidebar-ver {
  color: rgba(255,255,255,.08); font-size: 9px;
  padding: 10px 14px 0; letter-spacing: .3px;
}

/* Overlay & mobile */
.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 1049;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--t-slow) var(--ease);
}
.sidebar-overlay.active { display: block; opacity: 1; }

/* =====================================================================
   MAIN CONTENT AREA
   ===================================================================== */
.main-content {
  margin-left: var(--sidebar-w); min-height: 100vh;
  display: flex; flex-direction: column;
}

/* ─── TOPBAR — Dark Frosted Glass ─── */
.topbar {
  position: sticky; top: 0; z-index: 900;
  height: var(--topbar-h); padding: 0 var(--page-pad);
  background: rgba(3,7,18,.78);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: 0 1px 0 rgba(99,102,241,.1), 0 4px 24px rgba(0,0,0,.3);
  flex-shrink: 0;
}
.topbar::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(99,102,241,.4) 30%, rgba(14,165,233,.35) 70%, transparent 100%);
  pointer-events: none;
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.mob-toggle {
  display: none; width: 38px; height: 38px; border: none; cursor: pointer;
  border-radius: 12px; background: rgba(255,255,255,.06); color: var(--text-main);
  align-items: center; justify-content: center; font-size: 16px;
  transition: all var(--t-fast) var(--ease); flex-shrink: 0;
}
.mob-toggle:hover { background: rgba(99,102,241,.2); transform: scale(1.05); }
.topbar-page-icon {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px;
  box-shadow: 0 4px 18px rgba(99,102,241,.4);
}
.topbar-page-title {
  font-size: 16px; font-weight: 800; color: var(--text-main);
  letter-spacing: -.45px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar-clock {
  display: flex; flex-direction: column; align-items: flex-end;
  padding-right: 16px; border-right: 1px solid rgba(255,255,255,.07); margin-right: 4px;
}
.tc-time {
  font-size: 15px; font-weight: 700; color: #93c5fd;
  letter-spacing: -.2px; font-variant-numeric: tabular-nums;
  line-height: 1.2; font-family: var(--font-mono);
}
.tc-date { font-size: 10px; color: rgba(255,255,255,.25); font-weight: 500; margin-top: 2px; }
.topbar-user-chip {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  padding: 5px 16px 5px 6px; border-radius: var(--radius-full);
  box-shadow: 0 0 0 1px rgba(99,102,241,.15);
  cursor: default;
  backdrop-filter: blur(10px);
  transition: all var(--t-fast) var(--ease);
}
.topbar-user-chip:hover {
  border-color: rgba(99,102,241,.35);
  background: rgba(255,255,255,.08);
}
.tuc-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 11px;
}
.tuc-info { line-height: 1.25; }
.tuc-name { font-size: 12.5px; font-weight: 700; color: #f1f5f9; }
.tuc-role { font-size: 10px; color: rgba(255,255,255,.3); }

/* Page body */
.page-body { padding: var(--page-pad); flex: 1; max-width: 1600px; }

/* =====================================================================
   PAGE HEADER (.ph) — Aurora Strip
   ===================================================================== */
.ph {
  display: flex; align-items: center; gap: 22px;
  border-radius: var(--radius-lg); padding: 28px 32px; margin-bottom: 28px;
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(24px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 8px 40px rgba(0,0,0,.3);
}
.ph::before {
  content: ''; position: absolute; right: -80px; top: -80px;
  width: 280px; height: 280px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--ph-glow, rgba(99,102,241,.18)) 0%, transparent 60%);
}
.ph::after {
  content: ''; position: absolute; bottom: -50px; left: 80px;
  width: 200px; height: 200px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--ph-glow, rgba(99,102,241,.1)) 0%, transparent 60%);
}
/* Color variants */
.ph-indigo { --ph-glow: rgba(99,102,241,.25);  border-color: rgba(99,102,241,.22); background: linear-gradient(135deg, rgba(99,102,241,.14) 0%, rgba(99,102,241,.04) 100%); }
.ph-sky    { --ph-glow: rgba(14,165,233,.22);   border-color: rgba(14,165,233,.2);  background: linear-gradient(135deg, rgba(14,165,233,.14) 0%, rgba(14,165,233,.04) 100%); }
.ph-green  { --ph-glow: rgba(16,185,129,.22);   border-color: rgba(16,185,129,.2);  background: linear-gradient(135deg, rgba(16,185,129,.14) 0%, rgba(16,185,129,.04) 100%); }
.ph-amber  { --ph-glow: rgba(245,158,11,.22);   border-color: rgba(245,158,11,.2);  background: linear-gradient(135deg, rgba(245,158,11,.14) 0%, rgba(245,158,11,.04) 100%); }
.ph-purple { --ph-glow: rgba(168,85,247,.22);   border-color: rgba(168,85,247,.2);  background: linear-gradient(135deg, rgba(168,85,247,.14) 0%, rgba(168,85,247,.04) 100%); }
.ph-pink   { --ph-glow: rgba(236,72,153,.22);   border-color: rgba(236,72,153,.2);  background: linear-gradient(135deg, rgba(236,72,153,.14) 0%, rgba(236,72,153,.04) 100%); }
.ph-teal   { --ph-glow: rgba(20,184,166,.22);   border-color: rgba(20,184,166,.2);  background: linear-gradient(135deg, rgba(20,184,166,.14) 0%, rgba(20,184,166,.04) 100%); }

.ph-icon {
  width: 68px; height: 68px; border-radius: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff; position: relative; z-index: 1;
}
.ph-icon::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.25) 0%, transparent 55%);
}
.ph-indigo .ph-icon { background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: 0 8px 32px rgba(99,102,241,.55),  0 0 0 1px rgba(255,255,255,.1); }
.ph-sky    .ph-icon { background: linear-gradient(135deg, #0ea5e9, #0c84bf); box-shadow: 0 8px 32px rgba(14,165,233,.5),   0 0 0 1px rgba(255,255,255,.1); }
.ph-green  .ph-icon { background: linear-gradient(135deg, #10b981, #047857); box-shadow: 0 8px 32px rgba(16,185,129,.5),   0 0 0 1px rgba(255,255,255,.1); }
.ph-amber  .ph-icon { background: linear-gradient(135deg, #f59e0b, #b45309); box-shadow: 0 8px 32px rgba(245,158,11,.5),   0 0 0 1px rgba(255,255,255,.1); }
.ph-purple .ph-icon { background: linear-gradient(135deg, #a855f7, #6d28d9); box-shadow: 0 8px 32px rgba(168,85,247,.5),   0 0 0 1px rgba(255,255,255,.1); }
.ph-pink   .ph-icon { background: linear-gradient(135deg, #ec4899, #9d174d); box-shadow: 0 8px 32px rgba(236,72,153,.5),   0 0 0 1px rgba(255,255,255,.1); }
.ph-teal   .ph-icon { background: linear-gradient(135deg, #14b8a6, #0e7a6d); box-shadow: 0 8px 32px rgba(20,184,166,.5),   0 0 0 1px rgba(255,255,255,.1); }

.ph-text   { flex: 1; min-width: 0; position: relative; z-index: 1; }
.ph-title  {
  font-size: 27px; font-weight: 900; letter-spacing: -.8px;
  line-height: 1.15; color: #f1f5f9; margin-bottom: 6px;
}
.ph-sub    { font-size: 13.5px; color: rgba(255,255,255,.38); line-height: 1.55; }
.ph-actions {
  display: flex; gap: 10px; align-items: center;
  flex-shrink: 0; position: relative; z-index: 1;
}
.ph-meta {
  display: flex; gap: 18px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.07); flex-wrap: wrap;
}
.ph-meta-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: rgba(255,255,255,.35); font-weight: 500;
}
.ph-meta-item i { font-size: 12px; }
.pmi-v { color: rgba(255,255,255,.75); font-weight: 700; }

/* =====================================================================
   STAT CARDS — Full Gradient Aurora Cards
   ===================================================================== */
.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px; margin-bottom: 26px;
}
.ss-card {
  border-radius: var(--radius); padding: 24px 22px 20px;
  display: flex; align-items: flex-start; gap: 16px;
  transition: all var(--t-normal) var(--ease);
  position: relative; overflow: hidden; cursor: default;
  border: 1px solid transparent;
}
/* Card glow ring on hover */
.ss-card::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius);
  opacity: 0; transition: opacity var(--t-normal) var(--ease);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--ss-glow, rgba(99,102,241,.45));
}
.ss-card:hover { transform: translateY(-5px); }
.ss-card:hover::after { opacity: 1; }

/* Per-variant gradient backgrounds */
.ss-ind { --ss-glow: rgba(99,102,241,.55);  background: linear-gradient(135deg, rgba(99,102,241,.22) 0%, rgba(99,102,241,.06) 100%); border-color: rgba(99,102,241,.22); box-shadow: 0 4px 30px rgba(99,102,241,.12); }
.ss-sky { --ss-glow: rgba(14,165,233,.55);  background: linear-gradient(135deg, rgba(14,165,233,.2)  0%, rgba(14,165,233,.05) 100%); border-color: rgba(14,165,233,.2);  box-shadow: 0 4px 30px rgba(14,165,233,.1);  }
.ss-grn { --ss-glow: rgba(16,185,129,.55);  background: linear-gradient(135deg, rgba(16,185,129,.2)  0%, rgba(16,185,129,.05) 100%); border-color: rgba(16,185,129,.2);  box-shadow: 0 4px 30px rgba(16,185,129,.1);  }
.ss-amb { --ss-glow: rgba(245,158,11,.55);  background: linear-gradient(135deg, rgba(245,158,11,.18) 0%, rgba(245,158,11,.04) 100%); border-color: rgba(245,158,11,.18); box-shadow: 0 4px 30px rgba(245,158,11,.1);  }
.ss-red { --ss-glow: rgba(239,68,68,.55);   background: linear-gradient(135deg, rgba(239,68,68,.18)  0%, rgba(239,68,68,.04) 100%);  border-color: rgba(239,68,68,.18);  box-shadow: 0 4px 30px rgba(239,68,68,.1);   }
.ss-prp { --ss-glow: rgba(168,85,247,.55);  background: linear-gradient(135deg, rgba(168,85,247,.2)  0%, rgba(168,85,247,.05) 100%); border-color: rgba(168,85,247,.2);  box-shadow: 0 4px 30px rgba(168,85,247,.1);  }
.ss-tl  { --ss-glow: rgba(20,184,166,.55);  background: linear-gradient(135deg, rgba(20,184,166,.2)  0%, rgba(20,184,166,.05) 100%); border-color: rgba(20,184,166,.2);  box-shadow: 0 4px 30px rgba(20,184,166,.1);  }

.ss-card:hover.ss-ind { box-shadow: 0 8px 50px rgba(99,102,241,.28); }
.ss-card:hover.ss-sky { box-shadow: 0 8px 50px rgba(14,165,233,.24); }
.ss-card:hover.ss-grn { box-shadow: 0 8px 50px rgba(16,185,129,.24); }
.ss-card:hover.ss-amb { box-shadow: 0 8px 50px rgba(245,158,11,.22); }
.ss-card:hover.ss-red { box-shadow: 0 8px 50px rgba(239,68,68,.22);  }
.ss-card:hover.ss-prp { box-shadow: 0 8px 50px rgba(168,85,247,.24); }
.ss-card:hover.ss-tl  { box-shadow: 0 8px 50px rgba(20,184,166,.24); }

/* Decorative blobs */
.ss-card .ss-blob {
  position: absolute; right: -20px; top: -20px;
  width: 100px; height: 100px; border-radius: 50%;
  opacity: .35; pointer-events: none; filter: blur(28px);
}
.ss-ind .ss-blob { background: #6366f1; }
.ss-sky .ss-blob { background: #0ea5e9; }
.ss-grn .ss-blob { background: #10b981; }
.ss-amb .ss-blob { background: #f59e0b; }
.ss-red .ss-blob { background: #ef4444; }
.ss-prp .ss-blob { background: #a855f7; }
.ss-tl  .ss-blob { background: #14b8a6; }

.ss-icon {
  width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; position: relative;
}
.ss-icon::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.35) 0%, transparent 55%);
}
.ss-ind .ss-icon { background: rgba(99,102,241,.3); color: #a5b4fc; box-shadow: 0 4px 20px rgba(99,102,241,.45); }
.ss-sky .ss-icon { background: rgba(14,165,233,.28); color: #7dd3fc; box-shadow: 0 4px 20px rgba(14,165,233,.4);  }
.ss-grn .ss-icon { background: rgba(16,185,129,.28); color: #6ee7b7; box-shadow: 0 4px 20px rgba(16,185,129,.4);  }
.ss-amb .ss-icon { background: rgba(245,158,11,.28); color: #fcd34d; box-shadow: 0 4px 20px rgba(245,158,11,.4);  }
.ss-red .ss-icon { background: rgba(239,68,68,.28);  color: #fca5a5; box-shadow: 0 4px 20px rgba(239,68,68,.4);   }
.ss-prp .ss-icon { background: rgba(168,85,247,.28); color: #d8b4fe; box-shadow: 0 4px 20px rgba(168,85,247,.4);  }
.ss-tl  .ss-icon { background: rgba(20,184,166,.28); color: #5eead4; box-shadow: 0 4px 20px rgba(20,184,166,.4);  }

.ss-body { flex: 1; min-width: 0; }
.ss-val {
  font-size: 34px; font-weight: 900; line-height: 1; color: #f8fafc;
  letter-spacing: -1.5px; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(255,255,255,.1);
}
.ss-lbl { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 7px; font-weight: 500; }
.ss-prog {
  margin-top: 12px; height: 4px; background: rgba(255,255,255,.08);
  border-radius: 2px; overflow: hidden;
}
.ss-prog-fill {
  height: 100%; border-radius: 2px;
  transition: width 1.5s var(--ease-out); width: 0;
  position: relative;
}
.ss-prog-fill::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 30px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4));
  animation: shimmerProg 2s ease-in-out infinite 1.5s;
}
@keyframes shimmerProg {
  0%   { opacity: 0; transform: translateX(-20px); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(10px); }
}
.ss-ind .ss-prog-fill { background: linear-gradient(90deg, rgba(99,102,241,.6), #818cf8); }
.ss-sky .ss-prog-fill { background: linear-gradient(90deg, rgba(14,165,233,.6), #38bdf8); }
.ss-grn .ss-prog-fill { background: linear-gradient(90deg, rgba(16,185,129,.6), #34d399); }
.ss-amb .ss-prog-fill { background: linear-gradient(90deg, rgba(245,158,11,.6), #fcd34d); }
.ss-red .ss-prog-fill { background: linear-gradient(90deg, rgba(239,68,68,.6),  #f87171); }
.ss-prp .ss-prog-fill { background: linear-gradient(90deg, rgba(168,85,247,.6), #c084fc); }
.ss-tl  .ss-prog-fill { background: linear-gradient(90deg, rgba(20,184,166,.6), #5eead4); }

/* Legacy accent bar (kept for compatibility) */
.ss-accent { display: none; }

/* =====================================================================
   CARDS — Aurora Dark Glass Surface
   ===================================================================== */
.card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 24px;
  box-shadow: var(--shadow-card);
  position: relative;
  transition: all var(--t-normal) var(--ease);
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent 0%, rgba(99,102,241,.7) 25%, rgba(14,165,233,.7) 75%, transparent 100%);
  opacity: .4; transition: opacity var(--t-normal) var(--ease);
}
.card:hover::before { opacity: 1; }
.card:hover {
  border-color: rgba(99,102,241,.22);
  box-shadow: var(--shadow-card-h);
}
.card-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: rgba(99,102,241,.04);
}
.card-title {
  font-size: 15px; font-weight: 800; color: #f1f5f9;
  margin: 0; letter-spacing: -.3px;
}
.card-subtitle { font-size: 12px; color: rgba(255,255,255,.3); margin-top: 3px; }
.card-body { padding: 26px; }
.card-footer {
  padding: 14px 24px;
  border-top: 1px solid rgba(255,255,255,.05);
  background: rgba(99,102,241,.03);
}

/* =====================================================================
   TABLE TOOLBAR — Dark Filter Bar
   ===================================================================== */
.table-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,.05);
  flex-wrap: wrap;
}
.toolbar-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.toolbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.toolbar-search { position: relative; min-width: 220px; max-width: 320px; flex: 1; }
.toolbar-search > i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.2); font-size: 13px; pointer-events: none; z-index: 1;
}
.toolbar-search input {
  width: 100%; padding: 10px 16px 10px 40px;
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-full);
  font-size: 13px; font-family: var(--font); color: #f1f5f9;
  background: rgba(255,255,255,.06);
  transition: all var(--t-fast) var(--ease); outline: none;
}
.toolbar-search input:focus {
  border-color: rgba(99,102,241,.5);
  box-shadow: 0 0 0 4px rgba(99,102,241,.12);
  background: rgba(255,255,255,.09);
}
.toolbar-search input::placeholder { color: rgba(255,255,255,.18); }

.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.fp {
  padding: 7px 15px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.38);
  white-space: nowrap; user-select: none;
}
.fp:hover { border-color: rgba(99,102,241,.38); color: var(--primary-l); background: var(--primary-bg); }
.fp.active { border-color: rgba(99,102,241,.45); color: #a5b4fc; background: rgba(99,102,241,.15); box-shadow: 0 0 14px rgba(99,102,241,.15); }
.fp.fp-prog.active  { border-color: rgba(245,158,11,.45); color: #fcd34d; background: rgba(245,158,11,.12); }
.fp.fp-done.active  { border-color: rgba(16,185,129,.45); color: #6ee7b7; background: rgba(16,185,129,.12); }
.fp.fp-pend.active  { border-color: rgba(239,68,68,.45);  color: #fca5a5; background: rgba(239,68,68,.12);  }
.fp.fp-hold.active  { border-color: rgba(239,68,68,.45);  color: #fca5a5; background: rgba(239,68,68,.12);  }
.toolbar-count { font-size: 12.5px; color: rgba(255,255,255,.28); white-space: nowrap; font-weight: 500; }

/* =====================================================================
   DATA TABLE — Dark Clean Grid
   ===================================================================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table thead tr { background: rgba(255,255,255,.03); }
.data-table thead th {
  color: rgba(255,255,255,.28); font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.06);
  white-space: nowrap; user-select: none;
}
.data-table thead th.sortable { cursor: pointer; }
.data-table thead th.sortable:hover { color: var(--primary-l); }
.data-table tbody tr { transition: background var(--t-fast) var(--ease); }
.data-table tbody tr:nth-child(even) { background: rgba(255,255,255,.018); }
.data-table tbody tr:hover { background: rgba(99,102,241,.1) !important; }
.data-table tbody tr.filtered-out { display: none; }
.data-table tbody td {
  padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.03);
  color: var(--text-body); vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.no-data td { text-align: center; padding: 70px 18px; color: rgba(255,255,255,.2); }
.no-data-icon  { font-size: 48px; display: block; margin: 0 auto 16px; opacity: .15; }
.no-data-title { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.25); margin-bottom: 6px; }
.no-data-sub   { font-size: 12.5px; color: rgba(255,255,255,.15); }

/* User cell */
.uc { display: flex; align-items: center; gap: 12px; }
.uc-av {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.uc-name { font-weight: 700; font-size: 13.5px; color: #f1f5f9; line-height: 1.25; }
.uc-sub  { font-size: 11.5px; color: rgba(255,255,255,.3); margin-top: 2px; }
.uc-meta { font-size: 11.5px; color: rgba(255,255,255,.3); margin-top: 2px; }
.uc-av-ind { background: linear-gradient(135deg, #6366f1, #818cf8); }
.uc-av-prp { background: linear-gradient(135deg, #a855f7, #818cf8); }
.uc-av-sky { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.uc-av-grn { background: linear-gradient(135deg, #10b981, #34d399); }
.uc-av-amb { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.uc-av-tl  { background: linear-gradient(135deg, #14b8a6, #5eead4); }

/* Action buttons */
.action-row { display: flex; align-items: center; gap: 6px; }
.bti {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; text-decoration: none; cursor: pointer;
  border: none; font-family: var(--font);
  transition: all var(--t-fast) var(--ease-spring);
}
.bti-e { background: rgba(99,102,241,.12);  color: #a5b4fc;  border: 1px solid rgba(99,102,241,.2);  }
.bti-v { background: rgba(14,165,233,.12);  color: #7dd3fc;  border: 1px solid rgba(14,165,233,.2);  }
.bti-d { background: rgba(239,68,68,.12);   color: #fca5a5;  border: 1px solid rgba(239,68,68,.2);   }
.bti-w { background: rgba(245,158,11,.12);  color: #fcd34d;  border: 1px solid rgba(245,158,11,.2);  }
.bti-s { background: rgba(16,185,129,.12);  color: #6ee7b7;  border: 1px solid rgba(16,185,129,.2);  }
.bti-e:hover { background: #6366f1; color: #fff; box-shadow: 0 4px 18px rgba(99,102,241,.55); transform: scale(1.12); border-color: #6366f1; }
.bti-v:hover { background: #0ea5e9; color: #fff; box-shadow: 0 4px 18px rgba(14,165,233,.55); transform: scale(1.12); border-color: #0ea5e9; }
.bti-d:hover { background: #ef4444; color: #fff; box-shadow: 0 4px 18px rgba(239,68,68,.55);  transform: scale(1.12); border-color: #ef4444; }
.bti-w:hover { background: #f59e0b; color: #fff; box-shadow: 0 4px 18px rgba(245,158,11,.55); transform: scale(1.12); border-color: #f59e0b; }
.bti-s:hover { background: #10b981; color: #fff; box-shadow: 0 4px 18px rgba(16,185,129,.55); transform: scale(1.12); border-color: #10b981; }

/* =====================================================================
   STATUS BADGES — Dark Neon Pills
   ===================================================================== */
.bs {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: var(--radius-full);
  font-size: 11.5px; font-weight: 700; white-space: nowrap; letter-spacing: .15px;
}
.bs-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.bs-progress { background: rgba(245,158,11,.12); color: #fcd34d; border: 1px solid rgba(245,158,11,.28); }
.bs-progress .bs-dot { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; animation: pls 1.4s ease-in-out infinite; }
.bs-complete { background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.28); }
.bs-complete .bs-dot { background: #10b981; box-shadow: 0 0 6px #10b981; }
.bs-pending  { background: rgba(100,116,139,.08); color: #94a3b8; border: 1px solid rgba(100,116,139,.2); }
.bs-pending .bs-dot  { background: #64748b; }
.bs-active   { background: rgba(99,102,241,.14); color: #a5b4fc; border: 1px solid rgba(99,102,241,.28); }
.bs-active .bs-dot   { background: #818cf8; box-shadow: 0 0 6px #818cf8; animation: pls 1.4s ease-in-out infinite; }
.bs-danger   { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.26); }
.bs-danger .bs-dot   { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.bs-clocked  { background: rgba(14,165,233,.12); color: #7dd3fc; border: 1px solid rgba(14,165,233,.26); }
.bs-clocked .bs-dot  { background: #0ea5e9; box-shadow: 0 0 6px #0ea5e9; }
.bs-teal     { background: rgba(20,184,166,.12); color: #5eead4; border: 1px solid rgba(20,184,166,.26); }
.bs-teal .bs-dot     { background: #14b8a6; box-shadow: 0 0 6px #14b8a6; }
.bs-hold     { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.26); }
.bs-hold .bs-dot     { background: #dc2626; box-shadow: 0 0 6px #dc2626; }
@keyframes pls { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .2; transform: scale(.55); } }

/* Live indicators */
.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: var(--radius-full);
  background: rgba(16,185,129,.12); color: #6ee7b7;
  font-size: 10.5px; font-weight: 700;
  border: 1px solid rgba(16,185,129,.28);
  box-shadow: 0 0 14px rgba(16,185,129,.2);
}
.live-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #10b981; flex-shrink: 0;
  box-shadow: 0 0 8px #10b981;
  animation: pls 1.4s ease-in-out infinite;
}
.live-timer {
  font-size: 13px; font-weight: 800; color: #6ee7b7;
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
  font-family: var(--font-mono);
  text-shadow: 0 0 20px rgba(16,185,129,.4);
}

/* =====================================================================
   BUTTONS — Aurora Gradient Buttons
   ===================================================================== */
.btn-p, .btn-s, .btn-d, .btn-w, .btn-o, .btn-sec, .btn-sky, .btn-prp, .btn-teal {
  border: none; padding: 11px 22px; border-radius: 12px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all var(--t-normal) var(--ease);
  font-family: var(--font); text-decoration: none;
  position: relative; overflow: hidden; white-space: nowrap; letter-spacing: -.1px;
}
.btn-p::before, .btn-s::before, .btn-d::before, .btn-w::before,
.btn-sky::before, .btn-prp::before, .btn-teal::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, transparent 55%);
  pointer-events: none;
}
.btn-p   { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; box-shadow: 0 2px 16px rgba(99,102,241,.5);  }
.btn-s   { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 2px 16px rgba(16,185,129,.45); }
.btn-d   { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; box-shadow: 0 2px 16px rgba(239,68,68,.45);  }
.btn-w   { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 2px 16px rgba(245,158,11,.45); }
.btn-sky { background: linear-gradient(135deg, #0ea5e9, #0284c7); color: #fff; box-shadow: 0 2px 16px rgba(14,165,233,.45); }
.btn-prp { background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; box-shadow: 0 2px 16px rgba(168,85,247,.45); }
.btn-teal{ background: linear-gradient(135deg, #14b8a6, #0f766e); color: #fff; box-shadow: 0 2px 16px rgba(20,184,166,.45); }
.btn-p:hover   { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(99,102,241,.65);  }
.btn-s:hover   { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(16,185,129,.55);  }
.btn-d:hover   { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(239,68,68,.6);    }
.btn-w:hover   { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(245,158,11,.6);   }
.btn-sky:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(14,165,233,.6);   }
.btn-prp:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(168,85,247,.65);  }
.btn-teal:hover{ color: #fff; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(20,184,166,.6);   }
.btn-o {
  background: transparent; color: var(--primary-l);
  border: 1.5px solid rgba(99,102,241,.4);
}
.btn-o:hover {
  background: var(--primary); color: #fff;
  box-shadow: 0 4px 22px rgba(99,102,241,.55); border-color: var(--primary);
}
.btn-sec {
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.12);
}
.btn-sec:hover {
  background: rgba(255,255,255,.1); color: #f1f5f9;
  border-color: rgba(255,255,255,.22);
}
.btn-sm { padding: 7px 15px; font-size: 12px; border-radius: 10px; gap: 6px; }

/* =====================================================================
   FORMS — Dark Glass Inputs
   ===================================================================== */
.fg { margin-bottom: 22px; }
.fl {
  display: block; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.35);
  margin-bottom: 7px; text-transform: uppercase; letter-spacing: .9px;
}
.fi {
  width: 100%; padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  font-size: 13.5px; font-family: var(--font); color: #f1f5f9;
  background: rgba(255,255,255,.07); outline: none; line-height: 1.5;
  transition: all var(--t-fast) var(--ease);
}
.fi:focus {
  border-color: rgba(99,102,241,.6);
  box-shadow: 0 0 0 4px rgba(99,102,241,.14), 0 2px 8px rgba(99,102,241,.1);
  background: rgba(255,255,255,.1);
}
.fi:hover:not(:focus) { border-color: rgba(99,102,241,.3); }
.fi::placeholder { color: rgba(255,255,255,.18); }
select.fi {
  cursor: pointer; padding-right: 40px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2394a3b8' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
select.fi option { background: #0c1328; color: #f1f5f9; }
textarea.fi { resize: vertical; min-height: 100px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.f3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.fi-icon { position: relative; }
.fi-icon > i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.25); font-size: 13px; pointer-events: none; z-index: 1;
}
.fi-icon > .fi { padding-left: 42px; }
.form-sec-title {
  font-size: 13px; font-weight: 700; color: #f1f5f9;
  margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(99,102,241,.15);
  display: flex; align-items: center; gap: 8px;
}
.form-sec-title i { color: var(--primary-l); font-size: 14px; }
.fs-card {
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.18); border-radius: 12px; padding: 24px;
}
.inline-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inline-form .fi { margin: 0; width: auto; flex: 1; min-width: 140px; }

/* =====================================================================
   ALERTS + TOAST SYSTEM — Dark Aurora
   ===================================================================== */
.alert-e, .alert-s, .alert-w {
  padding: 14px 18px; border-radius: 12px; font-size: 13px;
  margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
  font-weight: 500;
}
.alert-e { background: rgba(239,68,68,.1);  color: #fca5a5; border: 1px solid rgba(239,68,68,.25); }
.alert-s { background: rgba(16,185,129,.1); color: #6ee7b7; border: 1px solid rgba(16,185,129,.25); }
.alert-w { background: rgba(245,158,11,.1); color: #fcd34d; border: 1px solid rgba(245,158,11,.25); }

.toast-rack {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none; min-width: 320px;
}
.toast {
  background: rgba(8,13,26,.92); backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  padding: 16px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(99,102,241,.15);
  max-width: 380px; display: flex; align-items: center; gap: 14px;
  pointer-events: all;
  animation: toastIn var(--t-slow) var(--ease-out) forwards;
}
.toast.leaving { animation: toastOut var(--t-normal) var(--ease) forwards; }
.toast-ico {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.toast-s .toast-ico { background: rgba(16,185,129,.18); color: #6ee7b7; }
.toast-e .toast-ico { background: rgba(239,68,68,.18);  color: #fca5a5; }
.toast-w .toast-ico { background: rgba(245,158,11,.18); color: #fcd34d; }
.toast-tt { font-size: 13px; font-weight: 700; color: #f1f5f9; }
.toast-tm { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 2px; }
.toast-x {
  margin-left: auto; flex-shrink: 0; background: none; border: none;
  cursor: pointer; color: rgba(255,255,255,.2); font-size: 18px;
  padding: 0 2px; line-height: 1; transition: color var(--t-fast);
}
.toast-x:hover { color: #f1f5f9; }
@keyframes toastIn  { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0);   opacity: 1; } }
@keyframes toastOut { from { opacity: 1;                                } to { transform: translateX(110%); opacity: 0; } }

/* =====================================================================
   TABS — Dark Segment Control
   ===================================================================== */
.tab-bar {
  display: flex; gap: 4px;
  background: rgba(255,255,255,.04); border-radius: 14px;
  padding: 5px; border: 1px solid rgba(255,255,255,.07);
  width: fit-content; margin-bottom: 24px;
}
.tab-bar a {
  padding: 9px 20px; font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.35); text-decoration: none; border-radius: 11px;
  transition: all var(--t-fast) var(--ease);
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.tab-bar a:hover { color: #f1f5f9; background: rgba(255,255,255,.06); }
.tab-bar a.tab-active {
  color: var(--primary-l); font-weight: 700;
  background: linear-gradient(135deg, rgba(99,102,241,.3), rgba(99,102,241,.12));
  box-shadow: 0 0 0 1px rgba(99,102,241,.35), 0 4px 18px rgba(99,102,241,.2);
}

/* =====================================================================
   MODALS — Dark Frosted Glass
   ===================================================================== */
.modal-content {
  border-radius: var(--radius-lg) !important; border: none !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08) !important;
  overflow: hidden;
  background: rgba(8,13,26,.92) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
}
.modal-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-d)) !important;
  border: none !important; padding: 24px 28px !important;
  position: relative; overflow: hidden;
}
.modal-header::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 65%);
}
.modal-title {
  color: #fff !important; font-weight: 800 !important; font-size: 16px !important;
  font-family: var(--font) !important; letter-spacing: -.3px !important;
  position: relative; z-index: 1;
}
.modal-header .close { color: rgba(255,255,255,.6) !important; opacity: 1 !important; font-size: 24px !important; position: relative; z-index: 1; transition: color var(--t-fast) !important; }
.modal-header .close:hover { color: #fff !important; }
.modal-body   { padding: 28px !important; }
.modal-footer { border-top: 1px solid rgba(255,255,255,.05) !important; padding: 18px 28px !important; background: rgba(99,102,241,.03) !important; }
.modal { z-index: 1060; }
.modal-backdrop { z-index: 1055; }

/* =====================================================================
   EMPLOYEE TAG WIDGET — Dark Glass
   ===================================================================== */
.employee-tag-container {
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: 10px 12px; min-height: 52px; background: rgba(255,255,255,.07);
  cursor: text; position: relative;
  transition: all var(--t-fast) var(--ease);
}
.employee-tag-container:focus-within {
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 0 0 4px rgba(99,102,241,.14);
}
.selected-tags { display: inline; }
.employee-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(99,102,241,.22);
  color: #a5b4fc; padding: 5px 12px 5px 14px; margin: 3px;
  border-radius: var(--radius-full); font-size: 12px; font-weight: 700;
  border: 1px solid rgba(99,102,241,.35);
  animation: tagPop .18s var(--ease-out);
}
@keyframes tagPop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.employee-tag .remove-tag {
  cursor: pointer; font-size: 16px; line-height: 1; opacity: .45;
  transition: opacity var(--t-fast); margin-left: 3px;
}
.employee-tag .remove-tag:hover { opacity: 1; color: var(--danger); }
.employee-search-input {
  border: none; outline: none; padding: 5px 8px; font-size: 13px;
  font-family: var(--font); min-width: 160px; background: transparent;
  display: inline-block; color: #f1f5f9;
}
.employee-search-input::placeholder { color: rgba(255,255,255,.2); }
.employee-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: rgba(8,13,26,.96); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; max-height: 200px; overflow-y: auto;
  z-index: 2000; box-shadow: 0 20px 50px rgba(0,0,0,.6);
  animation: dropIn .18s var(--ease-out);
  backdrop-filter: blur(24px);
}
@keyframes dropIn { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.employee-dropdown-item {
  padding: 12px 18px; cursor: pointer; font-size: 13px; font-weight: 500;
  transition: background var(--t-fast); color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.employee-dropdown-item:last-child { border-bottom: none; }
.employee-dropdown-item:hover { background: rgba(99,102,241,.15); color: #f1f5f9; }
.employee-dropdown-item.no-results { color: rgba(255,255,255,.25); cursor: default; font-style: italic; }

/* =====================================================================
   DETAIL GRID — Dark Aurora
   ===================================================================== */
.detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; overflow: hidden; margin-bottom: 24px;
}
.dg-cell { background: rgba(255,255,255,.04); padding: 20px 24px; }
.dg-cell.full {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(99,102,241,.03));
}
.dg-lbl {
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,.28);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}
.dg-val {
  font-size: 14px; font-weight: 500; color: #e2e8f0;
  display: flex; align-items: center; gap: 8px; line-height: 1.6;
}
.status-banner {
  display: flex; align-items: center; gap: 16px;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.22); border-radius: 14px;
  padding: 18px 24px; margin-bottom: 24px; flex-wrap: wrap;
}

/* =====================================================================
   UTILITIES — Dark Variants
   ===================================================================== */
code {
  background: rgba(99,102,241,.15);
  color: #a5b4fc; border: 1px solid rgba(99,102,241,.25);
  padding: 3px 9px; border-radius: 6px;
  font-size: 12px; font-family: var(--font-mono); font-weight: 600; letter-spacing: .2px;
}
.task-title-wrap { position: relative; cursor: default; display: inline-block; max-width: 100%; }
.task-title-main {
  font-weight: 700; font-size: 13.5px; color: #f1f5f9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; max-width: 260px;
}
.task-desc-tip {
  display: none; position: absolute; left: 0; top: 100%; z-index: 600;
  background: rgba(8,13,26,.98); color: #cbd5e1; font-size: 12px; font-weight: 400;
  padding: 14px 18px; border-radius: 14px; white-space: pre-wrap;
  max-width: 360px; box-shadow: 0 24px 60px rgba(0,0,0,.7); line-height: 1.7;
  margin-top: 8px; border: 1px solid rgba(99,102,241,.2); pointer-events: none;
  backdrop-filter: blur(20px);
}
.task-desc-tip::before {
  content: ''; position: absolute; top: -7px; left: 18px;
  width: 13px; height: 13px; background: rgba(8,13,26,.98);
  transform: rotate(45deg);
  border-left: 1px solid rgba(99,102,241,.2);
  border-top: 1px solid rgba(99,102,241,.2);
}
.task-title-wrap:hover .task-desc-tip { display: block; animation: fadeUp .18s var(--ease-out); }
@keyframes fadeUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.date-preset {
  padding: 7px 14px; border-radius: var(--radius-full);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.4); white-space: nowrap;
  transition: all var(--t-fast) var(--ease);
}
.date-preset:hover {
  border-color: rgba(99,102,241,.45); color: var(--primary-l);
  background: rgba(99,102,241,.12); box-shadow: 0 0 14px rgba(99,102,241,.15);
}
.divider { height: 1px; background: rgba(255,255,255,.07); margin: 22px 0; }

/* ─── Entrance Animations ─── */
@keyframes fadeUpIn { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ph, .stat-strip, .card { animation: fadeUpIn .45s var(--ease-out) both; }
.stat-strip { animation-delay: .07s; }
.card       { animation-delay: .12s; }

/* =====================================================================
   PROJECT MANAGEMENT COMPONENTS
   ===================================================================== */
.proj-name-wrap { display: flex; align-items: center; gap: 12px; }
.proj-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; flex-shrink: 0;
}
.proj-title { font-weight: 700; font-size: 13.5px; color: #f1f5f9; line-height: 1.3; }
.proj-creator { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 1px; }

.prio-badge {
  display: inline-flex; align-items: center; padding: 3px 11px;
  border-radius: var(--radius-full); font-size: 11px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase;
}
.prio-low    { background: rgba(20,184,166,.14);  color: #5eead4;  border: 1px solid rgba(20,184,166,.25); }
.prio-med    { background: rgba(245,158,11,.14);  color: #fcd34d;  border: 1px solid rgba(245,158,11,.25); }
.prio-high   { background: rgba(249,115,22,.14);  color: #fdba74;  border: 1px solid rgba(249,115,22,.25); }
.prio-urgent { background: rgba(239,68,68,.14);   color: #fca5a5;  border: 1px solid rgba(239,68,68,.25);  }

.member-count-badge, .task-count-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600;
  background: rgba(99,102,241,.14); color: var(--primary-l);
  border: 1px solid rgba(99,102,241,.22);
}
.task-count-badge .tcb-done { color: #6ee7b7; }

.mini-progress { display: flex; align-items: center; gap: 8px; min-width: 100px; }
.mini-prog-bar {
  flex: 1; height: 6px; background: rgba(255,255,255,.08);
  border-radius: 3px; overflow: hidden;
}
.mini-prog-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--success), var(--teal));
  transition: width .8s var(--ease-out);
}
.mini-prog-pct { font-size: 12px; font-weight: 700; color: #f1f5f9; white-space: nowrap; min-width: 32px; }

.project-detail-grid { display: grid; grid-template-columns: 340px 1fr; gap: 22px; margin-bottom: 26px; }

.member-list { padding: 0 20px 16px; }
.member-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.member-item:last-child { border-bottom: none; }
.no-data-mini { text-align: center; padding: 28px; color: rgba(255,255,255,.2); font-size: 13px; }
.no-data-mini i { display: block; font-size: 30px; opacity: .25; margin-bottom: 8px; }

.btn-sm-p {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
  color: #fff; border: none; border-radius: 8px;
  font-size: 11px; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: var(--transition); box-shadow: 0 2px 10px rgba(99,102,241,.4);
}
.btn-sm-p:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(99,102,241,.55); }
.btn-sm-sec {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px;
  background: rgba(99,102,241,.14); color: var(--primary-l); border: none; border-radius: 8px;
  font-size: 11px; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: var(--transition); border: 1px solid rgba(99,102,241,.22);
}
.btn-sm-sec:hover { background: rgba(99,102,241,.22); }

.link-task-list { max-height: 350px; overflow-y: auto; }
.link-task-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background var(--t-fast) var(--ease);
}
.link-task-item:hover { background: rgba(99,102,241,.08); }
.ltl-title { font-weight: 600; font-size: 13px; color: #f1f5f9; }
.ltl-user  { font-size: 11.5px; color: rgba(255,255,255,.3); margin-top: 2px; }

.report-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 26px; }

.dist-bars { padding: 16px 22px 22px; }
.dist-item { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dist-item:last-child { margin-bottom: 0; }
.dist-label { font-size: 12.5px; font-weight: 600; color: #cbd5e1; min-width: 85px; white-space: nowrap; }
.dist-bar { flex: 1; height: 10px; background: rgba(255,255,255,.07); border-radius: 5px; overflow: hidden; }
.dist-fill { height: 100%; border-radius: 5px; transition: width 1s var(--ease-out); }
.dist-val { font-size: 13px; font-weight: 800; color: #f1f5f9; min-width: 30px; text-align: right; }

/* =====================================================================
   DASHBOARD — Quick Actions Grid
   ===================================================================== */
.quick-actions-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 16px;
}
.qa-item {
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  padding: 26px 14px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.04);
  text-decoration: none !important; color: rgba(255,255,255,.5);
  transition: all var(--t-normal) var(--ease);
  position: relative; overflow: hidden;
}
.qa-item::before {
  content: ''; position: absolute; inset: 0; border-radius: 18px;
  opacity: 0; transition: opacity var(--t-normal) var(--ease);
  background: linear-gradient(135deg, rgba(99,102,241,.12), transparent);
}
.qa-item:hover {
  border-color: rgba(99,102,241,.35);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(99,102,241,.25);
  color: #f1f5f9;
}
.qa-item:hover::before { opacity: 1; }
.qa-icon {
  width: 56px; height: 56px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  transition: transform var(--t-fast) var(--ease-spring);
  position: relative; z-index: 1;
}
.qa-item:hover .qa-icon { transform: scale(1.1) rotate(-3deg); }
.qa-label {
  font-size: 12.5px; font-weight: 600; text-align: center;
  position: relative; z-index: 1;
}

/* =====================================================================
   LOGIN PAGE — Centered Premium v7.1  (zero-scroll)
   ===================================================================== */

html:has(.login-page),
body:has(.login-page) { overflow: hidden !important; height: 100vh !important; }

.login-page {
  height: 100vh; overflow: hidden;
  background: #030712;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.login-page::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 80% at 12% 8%,  rgba(99,102,241,.38) 0%, transparent 52%),
    radial-gradient(ellipse 70% 65% at 88% 85%, rgba(14,165,233,.28) 0%, transparent 48%),
    radial-gradient(ellipse 55% 60% at 50% 50%, rgba(168,85,247,.14) 0%, transparent 46%);
  animation: loginAurora 24s ease-in-out infinite alternate;
}
@keyframes loginAurora {
  0%   { transform: scale(1)    rotate(0deg);   opacity: 1; }
  50%  { transform: scale(1.06) rotate(.8deg);  opacity: .8; }
  100% { transform: scale(1.03) rotate(-.5deg); opacity: 1; }
}
.login-page::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Orbs */
.login-orb { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.lo1 { width: 720px; height: 720px; background: radial-gradient(circle at 40% 40%, rgba(99,102,241,.5), transparent 62%); top: -250px; right: -200px; animation: lo1a 14s ease-in-out infinite; z-index: 0; }
.lo2 { width: 620px; height: 620px; background: radial-gradient(circle at 60% 60%, rgba(14,165,233,.44), transparent 62%); bottom: -200px; left: -160px; animation: lo2a 18s ease-in-out infinite; z-index: 0; }
.lo3 { width: 440px; height: 440px; background: radial-gradient(circle, rgba(168,85,247,.38), transparent 62%); top: 50%; left: 47%; transform: translate(-50%, -50%); animation: lo3a 12s ease-in-out infinite; z-index: 0; }
.lo4 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(20,184,166,.32), transparent 62%); bottom: 15%; right: 30%; animation: lo4a 15s ease-in-out infinite; z-index: 0; }
@keyframes lo1a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,35px) scale(1.08); } }
@keyframes lo2a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-50px) scale(1.06); } }
@keyframes lo3a { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-52%,-47%) scale(1.18); } }
@keyframes lo4a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,25px) scale(1.12); } }

/* Aurora beams */
.aurora-beam { position: fixed; pointer-events: none; z-index: 0; opacity: .15; }
.ab1 { width: 2px; height: 80vh; top: 0; left: 48%; background: linear-gradient(180deg,transparent,rgba(99,102,241,.8),transparent); filter: blur(2px); animation: beamFade 8s ease-in-out infinite; }
.ab2 { width: 1px; height: 65vh; top: 15%; left: 52%; background: linear-gradient(180deg,transparent,rgba(14,165,233,.7),transparent); filter: blur(1px); animation: beamFade 11s ease-in-out infinite 4s; }
@keyframes beamFade { 0%,100% { opacity: .06; } 50% { opacity: .22; } }

/* Entrance keyframes */
@keyframes liFadeUp   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes liLogoSpin { from { opacity: 0; transform: rotate(-10deg) scale(.7); } to { opacity: 1; transform: rotate(0) scale(1); } }

/* ─── Centered wrapper ─── */
.lp-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  padding: 20px; box-sizing: border-box;
}

/* Ambient glow behind card */
.lp-wrap::before {
  content: ''; position: absolute;
  width: 520px; height: 520px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(99,102,241,.18) 0%, rgba(168,85,247,.08) 45%, transparent 70%);
  animation: loginAurora 14s ease-in-out infinite alternate;
}

/* ─── Card ─── */
.lp-card {
  width: 100%; max-width: 420px;
  position: relative; z-index: 2;
  background: rgba(8,8,26,.78);
  backdrop-filter: blur(72px); -webkit-backdrop-filter: blur(72px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  padding: 36px 38px 30px;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.16),
    0 24px 60px rgba(0,0,0,.65),
    0 4px 24px rgba(99,102,241,.12);
  animation: liFadeUp .65s cubic-bezier(.22,1,.36,1) both;
}
/* Top iridescent line */
.lp-card::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.9) 30%, rgba(56,189,248,.7) 70%, transparent);
  border-radius: 28px 28px 0 0;
}
/* Subtle inner glow ring */
.lp-card::after {
  content: ''; position: absolute; inset: 0; border-radius: 28px; pointer-events: none;
  background: linear-gradient(160deg, rgba(99,102,241,.06) 0%, transparent 50%);
}

/* ─── Brand chip ─── */
.lp-brand {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 22px;
  animation: liFadeUp .5s cubic-bezier(.22,1,.36,1) .08s both;
}
.lp-brand-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 70%, #38bdf8 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
  box-shadow: 0 4px 18px rgba(99,102,241,.65), inset 0 1px 0 rgba(255,255,255,.22);
  animation: liLogoSpin .55s cubic-bezier(.34,1.56,.64,1) .22s both;
}
.lp-brand-name { color: #fff; font-size: 13.5px; font-weight: 800; letter-spacing: -.2px; line-height: 1.2; }
.lp-brand-ver { color: rgba(255,255,255,.2); font-size: 9.5px; letter-spacing: .8px; margin-top: 2px; }

/* Divider under brand */
.lp-brand-divider {
  height: 1px; background: rgba(255,255,255,.06);
  margin: 0 0 22px;
}

/* ─── Heading ─── */
.lp-head {
  margin-bottom: 20px;
  animation: liFadeUp .5s cubic-bezier(.22,1,.36,1) .16s both;
}
.lp-title {
  font-size: 27px; font-weight: 900; color: #fff;
  letter-spacing: -.65px; line-height: 1.1; margin-bottom: 5px;
}
.lp-sub { font-size: 12.5px; color: rgba(255,255,255,.3); line-height: 1.55; }

/* ─── Alert ─── */
.lp-alert {
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.22);
  color: #fca5a5; padding: 11px 14px; border-radius: 12px;
  font-size: 12px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px; line-height: 1.45;
}

/* ─── Form ─── */
.lp-fg { margin-bottom: 13px; }
.lp-fg:nth-child(1) { animation: liFadeUp .5s cubic-bezier(.22,1,.36,1) .24s both; }
.lp-fg:nth-child(2) { animation: liFadeUp .5s cubic-bezier(.22,1,.36,1) .32s both; }
.lp-label {
  display: block; font-size: 9.5px; font-weight: 700;
  color: rgba(255,255,255,.28); margin-bottom: 7px;
  text-transform: uppercase; letter-spacing: 1.2px;
}
.lp-iw { position: relative; }
.lp-ii {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.18); font-size: 11px; pointer-events: none;
  transition: color .2s ease; z-index: 1;
}
.lp-iw:focus-within .lp-ii { color: #818cf8; }
.lp-input {
  width: 100%; padding: 12px 14px 12px 40px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09); border-radius: 12px;
  color: #fff; font-size: 13px; font-family: var(--font); outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
}
.lp-input:focus {
  border-color: rgba(99,102,241,.6);
  background: rgba(255,255,255,.085);
  box-shadow: 0 0 0 3px rgba(99,102,241,.13);
}
.lp-input::placeholder { color: rgba(255,255,255,.15); }
.lp-eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,.2);
  cursor: pointer; font-size: 12px; padding: 4px 5px;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s ease; line-height: 1;
}
.lp-eye:hover { color: rgba(255,255,255,.6); }

/* ─── Sign In button ─── */
.lp-btn {
  width: 100%; padding: 13px; margin-top: 6px;
  border: none; border-radius: 13px;
  color: #fff; font-size: 14px; font-weight: 800;
  cursor: pointer; font-family: var(--font); letter-spacing: -.1px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  box-shadow: 0 4px 22px rgba(99,102,241,.52), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  animation: liFadeUp .5s cubic-bezier(.22,1,.36,1) .4s both;
}
.lp-btn::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-20deg); transition: left .55s ease;
  pointer-events: none;
}
.lp-btn:hover::before { left: 160%; }
.lp-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(99,102,241,.72), inset 0 1px 0 rgba(255,255,255,.2); }
.lp-btn:active { transform: translateY(0); }

/* ─── Divider ─── */
.lp-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 10px; color: rgba(255,255,255,.16); font-size: 10.5px;
  animation: liFadeUp .5s cubic-bezier(.22,1,.36,1) .48s both;
}
.lp-divider::before, .lp-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.07); }
.lp-divider span { white-space: nowrap; font-weight: 500; }

/* ─── Register link ─── */
.lp-register {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: rgba(255,255,255,.26); font-size: 12px; font-weight: 600;
  text-decoration: none; padding: 10px 18px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  box-sizing: border-box;
  animation: liFadeUp .5s cubic-bezier(.22,1,.36,1) .54s both;
}
.lp-register:hover { color: #a5b4fc; border-color: rgba(99,102,241,.3); background: rgba(99,102,241,.08); text-decoration: none; }

/* ─── Card footer ─── */
.lp-foot {
  text-align: center; margin-top: 14px;
  font-size: 10px; color: rgba(255,255,255,.1); letter-spacing: .3px;
  animation: liFadeUp .5s cubic-bezier(.22,1,.36,1) .6s both;
}

/* =====================================================================
   EDIT GRID (update-employee / update-admin)
   ===================================================================== */
.edit-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 24px; align-items: start; max-width: 920px;
}

/* =====================================================================
   RESPONSIVE — Mobile First
   ===================================================================== */
@media (max-width: 1100px) {
  :root { --sidebar-w: 252px; --page-pad: 22px; }
}

@media (max-width: 900px) {
  .report-row { grid-template-columns: 1fr; }
  .project-detail-grid { grid-template-columns: 1fr; }
}

/* Small-height screens (landscape phones) — allow scroll rather than clipping */
@media (max-height: 620px) {
  html:has(.login-page),
  body:has(.login-page) { overflow: auto !important; height: auto !important; }
  .login-page { height: auto; min-height: 100vh; overflow: visible; }
  .lp-wrap { align-items: flex-start; padding: 24px 20px; }
}

@media (max-width: 768px) {
  :root { --page-pad: 16px; }
  .sidebar-wrap { transform: translateX(-100%); }
  .sidebar-wrap.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .mob-toggle { display: flex; }
  .topbar { padding: 0 16px; }
  .topbar-clock { display: none; }
  .f2, .f3 { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .ph { padding: 20px; flex-wrap: wrap; gap: 16px; }
  .ph-icon { width: 56px; height: 56px; font-size: 22px; }
  .ph-title { font-size: 22px; }
  .ph-actions { width: 100%; padding-top: 12px; }
  .table-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar-search { max-width: 100%; }
  .detail-grid { grid-template-columns: 1fr; }
  .dg-cell.full { grid-column: span 1; }
  .tab-bar { width: 100%; overflow-x: auto; }
  .member-item { flex-wrap: wrap; gap: 8px; }
  .inline-form { flex-direction: column; }
  .inline-form .fi { width: 100%; min-width: auto; }
  .action-row { flex-wrap: wrap; }
  .ss-val { font-size: 28px; }
  .ss-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 19px; }
  .tuc-info { display: none; }
  .topbar-user-chip { padding: 5px 8px; }
  .quick-actions-grid { grid-template-columns: repeat(3, 1fr); }
  .ph-meta { gap: 10px; }
  .ph-actions .btn-p, .ph-actions .btn-sec, .ph-actions .btn-sky, .ph-actions .btn-w { font-size: 12px; padding: 9px 16px; }
}

@media (max-width: 480px) {
  .stat-strip { grid-template-columns: 1fr; }
  .page-body { padding: 12px; }
  .card-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .topbar-page-title { font-size: 14px; }
  .topbar-page-icon { width: 32px; height: 32px; font-size: 12px; border-radius: 10px; }
  .tab-bar { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-bar a { padding: 7px 14px; font-size: 11.5px; flex-shrink: 0; }
  .bs { font-size: 10.5px; padding: 4px 10px; }
  .data-table { font-size: 12.5px; }
  .data-table thead th { font-size: 9.5px; padding: 10px 12px; }
  .data-table tbody td { padding: 12px; }
  .ph-icon { width: 48px; height: 48px; font-size: 19px; border-radius: 14px; }
  .ph-title { font-size: 19px; }
  .ph-sub { font-size: 12px; }
  .modal-body { padding: 20px !important; }
  .modal-header { padding: 18px 22px !important; }
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
  .ss-card { padding: 18px; }
  .ss-val { font-size: 24px; }
  .lp-wrap { padding: 14px; }
  .lp-card { padding: 28px 24px 24px; border-radius: 22px; }
  .lp-title { font-size: 23px; }
  .edit-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   PRINT
   ===================================================================== */
@media print {
  .sidebar-wrap, .topbar, .mob-toggle, .toast-rack, .sidebar-overlay { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .page-body { padding: 0 !important; }
  .ph, .stat-strip { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  body::before, body::after { display: none !important; }
  .card {
    border: 1px solid #ddd !important; box-shadow: none !important;
    background: #fff !important; margin-bottom: 14px;
    backdrop-filter: none !important;
  }
  .card::before { display: none !important; }
  .data-table tbody tr:hover { background: transparent !important; }
  .data-table thead th, .data-table tbody td { color: #000 !important; border-color: #ddd !important; }
  .bs { background: #f0f0f0 !important; color: #000 !important; border-color: #ccc !important; }
}