:root {

/* Brand */
--brand-primary:#000B58;
--brand-secondary:#003161;
--brand-accent:#006A67;
--brand-highlight:#FDEB9E;

/* Semantic Colors */
--color-success:#10b981;
--color-success-light:#d1fae5;
--color-success-dark:#065f46;

--color-warning:#f59e0b;
--color-warning-light:#fef3c7;
--color-warning-dark:#92400e;

--color-danger:#ef4444;
--color-danger-light:#fee2e2;
--color-danger-dark:#991b1b;

--color-info:#3b82f6;
--color-info-light:#dbeafe;
--color-info-dark:#1e40af;

/* Brand Gradient */
--gradient-main:linear-gradient(
135deg,
#000B58 0%,
#003161 45%,
#006A67 75%,
#FDEB9E 100%
);

/* Neutrals */
--slate-50:#f8fafc;
--slate-100:#f1f5f9;
--slate-200:#e2e8f0;
--slate-300:#cbd5e1;
--slate-400:#94a3b8;
--slate-500:#64748b;
--slate-600:#475569;
--slate-700:#334155;
--slate-800:#1e293b;
--slate-900:#0f172a;

/* Layout */
--sidebar-width:256px;
--header-height:60px;
--content-max-w:100%;

/* Shadows */
--shadow-xs:0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-sm:0 1px 3px 0 rgb(0 0 0 / 0.07),0 1px 2px -1px rgb(0 0 0 / 0.07);
--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.07),0 2px 4px -2px rgb(0 0 0 / 0.07);
--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.07),0 4px 6px -4px rgb(0 0 0 / 0.05);
--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.08),0 8px 10px -6px rgb(0 0 0 / 0.05);
--shadow-sidebar:4px 0 24px 0 rgb(0 0 0 / 0.10);
--shadow-card:0 0 0 1px rgb(0 0 0 / 0.04),0 2px 8px 0 rgb(0 0 0 / 0.06);

/* Radius */
--radius-sm:6px;
--radius-md:10px;
--radius-lg:14px;
--radius-xl:18px;
--radius-2xl:24px;
--radius-full:9999px;

/* Typography */
--font-sans:'Plus Jakarta Sans',system-ui,sans-serif;
--font-mono:'JetBrains Mono','Fira Code',monospace;

/* Transitions */
--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);
--transition-base:200ms cubic-bezier(0.4,0,0.2,1);
--transition-slow:300ms cubic-bezier(0.4,0,0.2,1);

}
/* Dark mode token overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:    var(--slate-900);
    --bg-card:    var(--slate-800);
    --bg-sidebar: #0d1117;
    --text-primary:   var(--slate-50);
    --text-secondary: var(--slate-400);
    --border-color:   var(--slate-700);
  }
}


/* ─── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: #f5f6fa;
  color: var(--slate-800);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font-family: inherit;
}

img, svg {
  display: block;
  max-width: 100%;
}


/* ─── Typography ─────────────────────────────────────────── */
.text-display {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.text-heading-xl {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.text-heading-lg {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.text-heading-md {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.text-heading-sm {
  font-size: 0.9375rem;
  font-weight: 600;
}

.text-body {
  font-size: 0.9375rem;
  line-height: 1.65;
}

.text-sm {
  font-size: 0.8125rem;
}

.text-xs {
  font-size: 0.75rem;
}

.text-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.font-mono {
  font-family: var(--font-mono);
}


/* ─── Layout Shell ───────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition-slow);
}

.page-body {
  flex: 1;
  padding: 1.75rem 2rem;
  max-width: var(--content-max-w);
  width: 100%;
}


/* ─── Sidebar ────────────────────────────────────────────── */
.sidebar {

width:var(--sidebar-width);

background:linear-gradient(
180deg,
#000B58 0%,
#003161 45%,
#002a53 100%
);

color:#e2e8f0;

display:flex;
flex-direction:column;

position:fixed;

top:0;
left:0;

height:100vh;

z-index:50;

box-shadow:var(--shadow-sidebar);

transition:transform .3s ease,width .3s ease;

overflow:hidden;

border-top-right-radius:18px;
border-bottom-right-radius:18px;

}

.sidebar.collapsed {
  width: 64px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  min-height: var(--header-height);
}

.company-logo {
    height: 34px;            /* SAME as SM */
    width: 34px;             /* SAME as SM */
    border-radius: 10px;     /* match SM style */
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-brand-icon{

width:34px;
height:34px;

background:var(--gradient-main);

border-radius:10px;

display:flex;
align-items:center;
justify-content:center;

color:white;

font-weight:700;

}
.sidebar-brand-text {
  overflow: hidden;
  transition: opacity var(--transition-base), width var(--transition-base);
}

.sidebar-brand-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.sidebar-brand-role {
  font-size: 0.6875rem;
  color: #94a3b8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

.sidebar-nav{

flex:1;

overflow-y:auto;

overflow-x:hidden;

padding:1.4rem .9rem;

scroll-behavior:smooth;

}

.sidebar-nav::-webkit-scrollbar{

width:6px;

}

.sidebar-nav::-webkit-scrollbar-thumb{

background:rgba(255,255,255,0.15);

border-radius:10px;

}

.sidebar-nav::-webkit-scrollbar-thumb:hover{

background:rgba(255,255,255,0.25);

}


/* SECTION LABELS */
.nav-section-label{

font-size:.65rem;

font-weight:700;

letter-spacing:.18em;

text-transform:uppercase;

color:#8ca3c0;

padding:1rem .9rem .4rem;

opacity:.9;

}

.sidebar.collapsed .nav-section-label{
  opacity:0;
}


/* SIDEBAR ITEMS */

.nav-item{

display:flex;
align-items:center;

gap:.9rem;

padding:.75rem 1rem;

border-radius:12px;

font-size:.92rem;
font-weight:500;

color:#cbd5e1;

cursor:pointer;

transition:all .2s ease;

margin-bottom:8px;

position:relative;

/* permanent box */
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.05);

}

.nav-item:hover{

background:linear-gradient(
90deg,
rgba(253,235,158,.95),
rgba(253,235,158,.75)
);

color:#000B58;

border-color:#FDEB9E;

transform:translateX(2px);

}

.nav-item.active{

background:linear-gradient(
90deg,
#FDEB9E 0%,
#f7d96b 100%
);

color:#000B58;

font-weight:600;

box-shadow:0 4px 12px rgba(0,0,0,.15);

}

.nav-item.active::before{

content:"";

position:absolute;

left:-8px;

top:50%;

transform:translateY(-50%);

width:6px;

height:18px;

border-radius:6px;

background:#FDEB9E;

}


/* ICON */

.nav-item-icon{
  width:20px;
  height:20px;

  flex-shrink:0;

  opacity:0.85;
}

.nav-item.active .nav-item-icon{
  opacity:1;
}


/* TEXT */

.nav-item-label{
  flex:1;
  transition:opacity var(--transition-base);
}


.sidebar.collapsed .nav-item-label,
.sidebar.collapsed .sidebar-brand-text {
  opacity: 0;
  pointer-events: none;
  width: 0;
}

.sidebar-footer {
  padding: 0.75rem 0.6rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  overflow: hidden;
}

.sidebar-user:hover {
  background: rgba(255,255,255,0.06);
}

.sidebar-avatar{

width:30px;
height:30px;

border-radius:50%;

background:var(--gradient-main);

color:white;

font-size:.8rem;

font-weight:700;

display:flex;
align-items:center;
justify-content:center;

}

.sidebar-user-info {
  flex: 1;
  overflow: hidden;
  transition: opacity var(--transition-base), width var(--transition-base);
}

.sidebar.collapsed .sidebar-user-info {
  opacity: 0;
  width: 0;
}

.sidebar-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 0.6875rem;
  color: #64748b;
  text-transform: capitalize;
  white-space: nowrap;
}

.sidebar-logout {
  color: #64748b;
  transition: color var(--transition-fast);
  flex-shrink: 0;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
}

.sidebar-logout:hover {
  color: #f87171;
  background: rgba(248,113,113,0.1);
}

.sidebar.collapsed .sidebar-logout {
  opacity: 0;
}


/* ─── Top Header ─────────────────────────────────────────── */
.page-header {
  height: var(--header-height);
  background: white;
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: var(--shadow-xs);
}

.page-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-menu-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-500);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.header-menu-btn:hover {
  background: var(--slate-100);
  color: var(--slate-700);
}

.page-title-block h1 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--slate-800);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.page-title-block p {
  font-size: 0.75rem;
  color: var(--slate-400);
  line-height: 1;
}

.page-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-date {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--slate-400);
  background: var(--slate-100);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
}

.header-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--slate-200);
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-500);
  transition: all var(--transition-fast);
  position: relative;
}

.header-icon-btn:hover {
  background: var(--slate-50);
  border-color: var(--slate-300);
  color: var(--slate-700);
}

.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  background: var(--indigo-500);
  border-radius: var(--radius-full);
  border: 1.5px solid white;
}


/* ─── Flash Messages ─────────────────────────────────────── */
.messages-container {
  padding: 1rem 2rem 0;
}

.alert {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  animation: alertSlideIn 0.25s ease;
}

@keyframes alertSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.alert-success {
  background: var(--color-success-light);
  color: var(--color-success-dark);
  border: 1px solid rgba(16,185,129,0.2);
}

.alert-error {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
  border: 1px solid rgba(239,68,68,0.2);
}

.alert-warning {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
  border: 1px solid rgba(245,158,11,0.2);
}

.alert-info {
  background: var(--color-info-light);
  color: var(--color-info-dark);
  border: 1px solid rgba(59,130,246,0.2);
}

.alert-close {
  margin-left: auto;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  line-height: 1;
}

.alert-close:hover { opacity: 1; }


/* ─── Cards ──────────────────────────────────────────────── */
.card{
background:white;
border-radius:var(--radius-xl);
box-shadow:var(--shadow-card);
padding:1.8rem;
border:1px solid rgba(0,0,0,0.05);
transition:box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-sm {
  padding: 1.125rem 1.375rem;
  border-radius: var(--radius-lg);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.card-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--slate-800);
  letter-spacing: -0.01em;
}

.card-action {
  font-size: 0.75rem;
  color: var(--indigo-600);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.card-action:hover { color: var(--indigo-700); }


/* ─── Stat Cards ─────────────────────────────────────────── */

/* ─── Stat Cards (GLOBAL COMPONENT) ───────────────────── */

.stat-card{

background:white;

border-radius:var(--radius-xl);

padding:1.4rem 1.6rem;

box-shadow:var(--shadow-card);

border:1px solid rgba(0,0,0,.05);

display:flex;
flex-direction:column;

align-items:flex-start;

gap:6px;

position:relative;

overflow:hidden;

transition:all .2s ease;

}

.stat-card::after{

content:"";

position:absolute;

top:0;

left:0;

right:0;

height:3px;

background:var(--gradient-main);

opacity:.8;

}

.stat-card:hover{

transform:translateY(-3px);

box-shadow:var(--shadow-lg);

}

.stat-card-label{

font-size:.68rem;

font-weight:700;

letter-spacing:.08em;

text-transform:uppercase;

color:var(--slate-500);

margin-bottom:4px;

}

.stat-card-value{

font-size:2rem;

font-weight:800;

letter-spacing:-.03em;

line-height:1.2;

color:var(--slate-900);

font-family:var(--font-mono);

margin-bottom:4px;

}

.stat-card-meta{

font-size:.72rem;

color:var(--slate-400);

margin-top:4px;

display:flex;

align-items:center;

gap:4px;

}

.stat-icon{

width:36px;

height:36px;

border-radius:10px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:6px;

}

.stat-progress{

height:4px;

background:var(--slate-100);

border-radius:var(--radius-full);

margin-top:8px;

overflow:hidden;

}

.stat-progress-bar{

height:100%;

border-radius:var(--radius-full);

background:var(--gradient-main);

transition:width .8s cubic-bezier(.4,0,.2,1);

}
/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}

.btn:focus-visible {
  outline: 2px solid var(--indigo-500);
  outline-offset: 2px;
}

.btn-primary{

background:var(--gradient-main);

color:white;

border:none;

box-shadow:0 6px 16px rgba(0,0,0,0.18);

}

.btn-primary:hover{

transform:translateY(-2px);

box-shadow:0 12px 24px rgba(0,0,0,0.22);

}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-secondary {
  background: white;
  color: var(--slate-700);
  border-color: var(--slate-200);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  background: var(--slate-50);
  border-color: var(--slate-300);
  color: var(--slate-800);
}

.btn-success {
  background: var(--color-success);
  color: white;
  border-color: var(--color-success);
  box-shadow: 0 1px 3px rgba(16,185,129,0.25);
}

.btn-success:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}

.btn-danger {
  background: white;
  color: var(--color-danger);
  border-color: rgba(239,68,68,0.3);
}

.btn-danger:hover {
  background: var(--color-danger-light);
  border-color: var(--color-danger);
}

.btn-ghost {
  background: transparent;
  color: var(--slate-600);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--slate-100);
  color: var(--slate-800);
}

.btn-sm {
  font-size: 0.75rem;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-sm);
}

.btn-lg {
  font-size: 0.9375rem;
  padding: 0.6875rem 1.375rem;
  border-radius: var(--radius-lg);
}

.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-md);
}

.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.btn-sm svg { width: 13px; height: 13px; }
.btn-lg svg { width: 17px; height: 17px; }


/* ─── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.2rem 0.5625rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Audit status badges */
.badge-upcoming {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}
.badge-upcoming .badge-dot { background: var(--color-warning); }

.badge-running {
  background: var(--color-info-light);
  color: var(--color-info-dark);
}
.badge-running .badge-dot {
  background: var(--color-info);
  animation: pulse-dot 1.5s infinite;
}

.badge-completed {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}
.badge-completed .badge-dot { background: var(--color-success); }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

/* Role badges */
.badge-admin    { background: #ede9fe; color: #5b21b6; }
.badge-manager  { background: #dbeafe; color: #1e40af; }
.badge-auditor  { background: #fce7f3; color: #9d174d; }


/* ─── Grids ──────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}

@media (max-width: 1200px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.content-grid-2{

display:grid;

grid-template-columns:1fr 1fr;

gap:2rem;

margin-bottom:3rem;

}

@media (max-width: 960px) {
  .content-grid-2 { grid-template-columns: 1fr; }
}

.section-gap { margin-bottom: 2.2rem; }


/* ─── Empty States ───────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
}

.empty-state-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.empty-state-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 0.25rem;
}

.empty-state-desc {
  font-size: 0.8125rem;
  color: var(--slate-400);
}


/* ─── Divider ────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--slate-100);
  margin: 1.25rem 0;
}


/* ─── Animations ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: fadeUp 0.35s ease both;
}

.animate-delay-1 { animation-delay: 0.05s; }
.animate-delay-2 { animation-delay: 0.10s; }
.animate-delay-3 { animation-delay: 0.15s; }
.animate-delay-4 { animation-delay: 0.20s; }


/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--slate-300); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }


/* ─── Responsive Sidebar ─────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0;
  }
  .page-body {
    padding: 1.25rem;
  }
  .sidebar-overlay {
    display: block;
  }
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 49;
  backdrop-filter: blur(2px);
}

.nav-group-items{
display:none;
padding-left:10px;
}

.nav-group.open .nav-group-items{
display:block;
}

.nav-group{
margin-bottom:6px;
}

.nav-group-title{

cursor:pointer;

display:flex;

justify-content:space-between;

align-items:center;

padding:.7rem 1rem;

margin-bottom:8px;

font-size:.9rem;

font-weight:600;

color:#cbd5e1;

border-radius:12px;

/* permanent box */
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.05);

transition:all .2s ease;

}

.nav-group-title:hover{

background:rgba(255,255,255,.08);
border-radius:8px;

}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.login-page{

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:#f5f6fa;

}

.login-card{

width:380px;

padding:40px;

background:white;

border-radius:16px;

box-shadow:0 20px 40px rgba(0,0,0,0.08);

}

.login-card h2{

text-align:center;

margin-bottom:28px;

color:var(--slate-800);

font-weight:700;

}

.login-card input{

width:100%;

padding:12px 14px;

margin-bottom:16px;

border:1px solid var(--slate-200);

border-radius:8px;

font-size:14px;

}

.login-btn{

width:100%;

padding:12px;

border:none;

border-radius:30px;

background:var(--gradient-main);

color:white;

font-weight:600;

cursor:pointer;

transition:all 0.25s;

}

.login-btn:hover{

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(0,0,0,0.18);

}

.nav-arrow{

font-size:.75rem;

opacity:.6;

transition:transform .25s ease;

}

.nav-group.open .nav-arrow{

transform:rotate(90deg);

opacity:1;

}