/* TalentOS Shell v4 — Google Material 3 Inspired · Premium */

:root {
  /* ── Brand ────────────────────────────── */
  --c-blue:        #0070AD;
  --c-blue-d:      #005A8B;
  --c-blue-dd:     #00426B;
  --c-blue-l:      #008FD4;
  --c-blue-bg:     #E8F4FB;
  --c-blue-bg2:    #D0E9F7;
  --c-blue-bdr:    #96CAE8;

  /* ── Neutrals ───────────────────────── */
  --c-bg:          #F0F4F8;
  --c-bg2:         #E8EDF3;
  --c-surface:     #FFFFFF;
  --c-surface2:    #F8FAFC;
  --c-border:      #E2E8F0;
  --c-border-d:    #CBD5E1;
  --c-text:        #0F1F2E;
  --c-text-2:      #2D4156;
  --c-text-3:      #64748B;
  --c-text-4:      #94A3B8;

  /* ── Sidebar ─────────────────────────── */
  --sb-w:          256px;
  --sb-bg:         #143F6B;
  --sb-bg2:        #1B5089;
  --sb-bdr:        rgba(255,255,255,.05);
  --sb-item-h:     rgba(255,255,255,.045);
  --sb-item-a:     rgba(0,143,212,.15);

  /* ── Status ──────────────────────────── */
  --c-success:     #10B981;
  --c-success-bg:  #ECFDF5;
  --c-warning:     #F59E0B;
  --c-warning-bg:  #FFFBEB;
  --c-danger:      #EF4444;
  --c-danger-bg:   #FEF2F2;
  --c-info:        #0070AD;
  --c-info-bg:     #E8F4FB;

  /* ── Radius ──────────────────────────── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  10px;
  --r-xl:  12px;
  --r-2xl: 16px;
  --r-3xl: 20px;

  /* ── Elevation shadows ───────────────── */
  --sh-0:   none;
  --sh-xs:  0 1px 2px rgba(15,31,46,.04);
  --sh-sm:  0 1px 4px rgba(15,31,46,.06), 0 1px 2px rgba(15,31,46,.04);
  --sh-md:  0 4px 16px rgba(15,31,46,.07), 0 1px 4px rgba(15,31,46,.04);
  --sh-lg:  0 12px 40px rgba(15,31,46,.12), 0 4px 12px rgba(15,31,46,.06);
  --sh-xl:  0 24px 64px rgba(15,31,46,.16), 0 8px 24px rgba(15,31,46,.08);

  /* ── Type ────────────────────────────── */
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;

  /* ── Motion ──────────────────────────── */
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-out:    cubic-bezier(0,0,.2,1);
  --ease-in:     cubic-bezier(.4,0,1,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:    100ms;
  --dur-base:    160ms;
  --dur-slow:    240ms;

  /* ── Topbar ──────────────────────────── */
  --topbar-h:    60px;

  /* ── Backward-compat aliases ─────────── */
  --brand:         var(--c-blue);
  --brand-dark:    var(--c-blue-d);
  --brand-light:   var(--c-blue-l);
  --brand-soft:    var(--c-blue-bg);
  --brand-border:  var(--c-blue-bdr);
  --brand-soft-2:  rgba(0,112,173,.07);
  --bg:            var(--c-bg);
  --card-bg:       var(--c-surface);
  --content-bg:    var(--c-bg);
  --border:        var(--c-border);
  --border-2:      var(--c-border-d);
  --border-light:  #EDF1F7;
  --border-strong: var(--c-border-d);
  --slate:         var(--c-text);
  --slate2:        var(--c-text-2);
  --slate3:        var(--c-text-3);
  --muted:         var(--c-text-3);
  --muted-2:       var(--c-text-4);
  --subtle:        var(--c-surface2);
  --subtle-2:      var(--c-bg2);
  --sidebar-width: var(--sb-w);
  --sidebar-bg:    var(--sb-bg);
  --success:       var(--c-success);
  --success-bg:    var(--c-success-bg);
  --warning:       var(--c-warning);
  --warning-bg:    var(--c-warning-bg);
  --danger:        var(--c-danger);
  --danger-bg:     var(--c-danger-bg);
  --info:          var(--c-info);
  --info-bg:       var(--c-info-bg);
  --indigo:        var(--c-blue);
  --indigo-bg:     var(--c-blue-bg);
  --violet:        #7C3AED;
  --violet-bg:     #F5F3FF;
  --emerald:       #059669;
  --emerald-bg:    #ECFDF5;
  --teal:          #0D9488;
  --teal-bg:       #F0FDFA;
  --amber:         #D97706;
  --amber-bg:      #FFFBEB;
  --rose:          #E11D48;
  --rose-bg:       #FFF1F2;
  --sky:           #0EA5E9;
  --sky-bg:        #F0F9FF;
  --r-card:        var(--r-xl);
  --shadow-sm:     var(--sh-sm);
  --shadow-md:     var(--sh-md);
  --font-sans:     var(--font);
  --font-display:  var(--font);
}

html, body { height: 100%; margin: 0; }
*, *::before, *::after { box-sizing: border-box; }


/* ═══════════════════════════════════════════════════════
   APP SHELL LAYOUT
═══════════════════════════════════════════════════════ */
.app-shell-body {
  background: var(--c-bg);
  font-family: var(--font);
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sb-w) 1fr;
  min-height: 100vh;
}

.app-shell-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  background: var(--c-bg);
}

.app-shell-content {
  flex: 1;
  padding: 28px 32px 40px;
}


/* ═══════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════ */
.app-side {
  background: var(--sb-bg);
  width: var(--sb-w);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  z-index: 300;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,.035);
  background-image:
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,112,173,.20) 0%, transparent 70%);
}
.app-side::-webkit-scrollbar { display: none; }


/* ── Brand / Logo ────────────────────── */
.app-side .brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 18px;
  height: var(--topbar-h);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  text-decoration: none;
  background: rgba(0,0,0,.08);
  position: relative;
}
.app-side .brand::after {
  content: '';
  position: absolute;
  bottom: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,143,212,.25), transparent);
}

.app-side .brand .logo-icon {
  width: 34px; height: 34px;
  background: linear-gradient(145deg, #008FD4 0%, #0070AD 55%, #005A8B 100%);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 16px;
  font-family: var(--font);
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(0,112,173,.55), inset 0 1px 0 rgba(255,255,255,.20);
  letter-spacing: -.03em;
}

.app-side .brand .logo-name,
.app-side .brand .logo-text {
  font-size: 15.5px;
  font-weight: 700;
  color: #F0F6FC;
  letter-spacing: -.035em;
  line-height: 1;
}
.app-side .brand .logo-name span,
.app-side .brand .logo-text em {
  color: #60C8E8;
  font-style: normal;
}
.app-side .brand .logo-ver,
.app-side .brand .logo-badge {
  margin-left: auto;
  font-size: 9px;
  color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 5px;
  padding: 2px 7px;
  font-weight: 600;
  letter-spacing: .08em;
}


/* ── Nav scroll area ─────────────────── */
.app-side nav {
  flex: 1;
  padding: 8px 0 16px;
  overflow-y: auto;
  scrollbar-width: none;
}
.app-side nav::-webkit-scrollbar { display: none; }


/* ── Group label ─────────────────────── */
.app-side .nav-group,
.app-side .group {
  padding: 0 10px 2px;
}
.app-side .nav-section,
.app-side .group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  padding: 14px 10px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 0;
  width: 100%;
  font-family: inherit;
}
.app-side .group-label:hover { color: #fff; }
.app-side .group-label .grp-chev {
  width: 12px; height: 12px;
  transition: transform .2s ease;
  stroke: rgba(255,255,255,.6);
  flex-shrink: 0;
}
.app-side .group.open .group-label .grp-chev { transform: rotate(180deg); }
.app-side .group .grp-items { display: none; }
.app-side .group.open .grp-items { display: block; }


/* ── Nav item ────────────────────────── */
.app-side .item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-lg);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  margin-bottom: 1px;
  white-space: nowrap;
  position: relative;
  letter-spacing: -.012em;
}

.app-side .item .ico {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease);
}
.app-side .item .ico svg {
  width: 15px; height: 15px;
  stroke: rgba(255,255,255,.7);
  transition: stroke var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.app-side .item .label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.app-side .item .item-badge {
  font-size: 9px; font-weight: 700;
  background: rgba(0,143,212,.25);
  color: #60C8E8;
  padding: 1px 6px;
  border-radius: 99px;
  letter-spacing: .02em;
}

/* hover */
.app-side .item:hover {
  background: var(--sb-item-h);
  color: rgba(255,255,255,.72);
}
.app-side .item:hover .ico { background: rgba(255,255,255,.05); }
.app-side .item:hover .ico svg { stroke: rgba(255,255,255,.48); }

/* active */
.app-side .item.active {
  background: var(--sb-item-a);
  color: #FFFFFF;
  font-weight: 600;
}
.app-side .item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 3px;
  background: linear-gradient(180deg, #60C8E8, #0070AD);
  border-radius: 0 3px 3px 0;
}
.app-side .item.active .ico {
  background: rgba(0,143,212,.22);
}
.app-side .item.active .ico svg { stroke: #7DD8F0; }


/* ── Sidebar footer / user strip ──────── */
.app-side .side-footer {
  flex-shrink: 0;
  padding: 8px 10px 12px;
  border-top: 1px solid rgba(255,255,255,.04);
  background: rgba(0,0,0,.10);
}

.side-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  text-decoration: none;
}
.side-user:hover { background: rgba(255,255,255,.05); }

.side-avatar {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #008FD4, #0070AD);
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,112,173,.45);
}
.side-name {
  font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.80);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.012em;
}
.side-role {
  font-size: 10px;
  color: rgba(255,255,255,.24);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 1px;
}
.side-online {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-success);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(16,185,129,.20);
  animation: pulse-soft 2.8s ease-in-out infinite;
}
.side-signout {
  color: rgba(255,255,255,.16);
  display: flex;
  padding: 4px; border-radius: 5px;
  transition: color .10s, background .10s;
}
.side-signout:hover { color: #FCA5A5; background: rgba(239,68,68,.14); }

/* Sidebar popup menu */
.side-menu-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.60); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.side-menu-link:last-child { border-bottom: none; }
.side-menu-link:hover { background: rgba(0,112,173,.18); color: rgba(255,255,255,.92); }
.side-menu-link svg { stroke: rgba(255,255,255,.26); flex-shrink: 0; transition: stroke var(--dur-fast); }
.side-menu-link:hover svg { stroke: #60C8E8; }
.side-menu-danger { color: #FCA5A5 !important; }
.side-menu-danger svg { stroke: rgba(252,165,165,.40) !important; }
.side-menu-danger:hover { background: rgba(239,68,68,.14) !important; }

#side-user-menu {
  background: #152235 !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: var(--r-xl) !important;
  overflow: hidden;
  box-shadow: 0 -16px 48px rgba(0,0,0,.65) !important;
}

/* Mobile overlay */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(8,18,30,.60); z-index: 400;
  backdrop-filter: blur(6px);
}
.sidebar-overlay.show { display: block; }


/* ═══════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════ */
.app-head {
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(15,31,46,.04), 0 2px 8px rgba(15,31,46,.04);
}

#menu-btn {
  display: none;
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1.5px solid var(--c-border);
  align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--c-text-3);
  flex-shrink: 0;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
#menu-btn:hover {
  background: var(--c-blue-bg);
  border-color: var(--c-blue-bdr);
  color: var(--c-blue);
}


/* ── Search ──────────────────────────── */
.topbar-search {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 300px;
  height: 38px;
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: 999px;
  padding: 0 14px 0 12px;
  gap: 8px;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), background var(--dur-base);
}
.topbar-search:focus-within {
  background: #fff;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(0,112,173,.10);
}
.topbar-search svg { color: var(--c-text-4); flex-shrink: 0; pointer-events: none; }
.topbar-search input[type="search"],
.topbar-search input {
  flex: 1; height: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  color: var(--c-text) !important;
  font-family: var(--font) !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none; appearance: none;
  min-width: 0;
}
.topbar-search input::placeholder { color: var(--c-text-4) !important; opacity: 1 !important; }
.topbar-search input[type="search"]::-webkit-search-cancel-button,
.topbar-search input[type="search"]::-webkit-search-decoration { display: none; }


/* ── Topbar icon btn ─────────────────── */
.tb-icon-btn {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1.5px solid var(--c-border);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--c-text-3);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
  position: relative; flex-shrink: 0;
}
.tb-icon-btn:hover {
  background: var(--c-blue-bg);
  border-color: var(--c-blue-bdr);
  color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(0,112,173,.07);
}
.tb-icon-btn .notif-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-warning);
  border: 2px solid #fff;
  position: absolute; top: 4px; right: 4px;
  pointer-events: none;
}


/* ── User chip ───────────────────────── */
.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: transparent;
  border: 1.5px solid var(--c-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
  flex-shrink: 0;
}
.user-chip:hover {
  background: var(--c-blue-bg);
  border-color: var(--c-blue-bdr);
  box-shadow: 0 0 0 3px rgba(0,112,173,.07);
}
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #008FD4, #0070AD);
  color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); flex-shrink: 0;
}
.user-avatar-lg { width: 38px; height: 38px; font-size: 14px; border-radius: 10px; }
.user-name {
  font-size: 13px; font-weight: 600;
  color: var(--c-text); letter-spacing: -.012em;
}
.user-chevron { color: var(--c-text-4); transition: transform .16s var(--ease); flex-shrink: 0; }
.user-chip[aria-expanded="true"] .user-chevron { transform: rotate(180deg); }


/* ── User dropdown ───────────────────── */
.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 256px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-xl);
  padding: 5px;
  z-index: 9999;
  opacity: 0; transform: translateY(-8px) scale(.97);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.user-dropdown.open { opacity: 1; transform: none; pointer-events: all; }

.user-dropdown-header {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 5px;
  background: var(--c-blue-bg);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.user-dropdown-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 500; color: var(--c-text-2);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.user-dropdown-item svg { color: var(--c-text-4); flex-shrink: 0; transition: color var(--dur-fast); }
.user-dropdown-item:hover { background: var(--c-blue-bg); color: var(--c-blue); }
.user-dropdown-item:hover svg { color: var(--c-blue); }
.user-dropdown-divider { height: 1px; background: var(--c-border); margin: 4px 0; }
.user-dropdown-danger { color: var(--c-danger) !important; }
.user-dropdown-danger svg { color: var(--c-danger) !important; }
.user-dropdown-danger:hover { background: var(--c-danger-bg) !important; }


/* ═══════════════════════════════════════════════════════
   FLASH MESSAGES
═══════════════════════════════════════════════════════ */
.flash-msg {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 28px; font-size: 13px; font-weight: 500;
  border-bottom: 1px solid transparent; line-height: 1.4;
  animation: slideInDown var(--dur-base) var(--ease-out) both;
}
.flash-msg.flash-success {
  background: #ECFDF5;
  border-bottom-color: #A7F3D0;
  color: #065F46;
}
.flash-msg.flash-error {
  background: #FEF2F2;
  border-bottom-color: #FECACA;
  color: #991B1B;
}
.flash-msg.flash-info {
  background: var(--c-blue-bg);
  border-bottom-color: var(--c-blue-bdr);
  color: #004572;
}


/* ═══════════════════════════════════════════════════════
   APP FOOTER
═══════════════════════════════════════════════════════ */
.app-footer {
  border-top: 1px solid var(--c-border);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(8px);
  font-size: 11.5px;
  color: var(--c-text-3);
  flex-shrink: 0;
}
.app-footer-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--c-text-4);
}
.app-footer-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-success);
  box-shadow: 0 0 6px rgba(16,185,129,.45);
}


/* ═══════════════════════════════════════════════════════
   MOBILE RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-side {
    position: fixed; top: 0; left: 0; height: 100vh;
    transform: translateX(-100%); z-index: 500;
    transition: transform .24s var(--ease);
  }
  .app-side.open {
    transform: translateX(0);
    box-shadow: 12px 0 64px rgba(0,0,0,.50);
  }
  #menu-btn { display: inline-flex; }
  .app-shell-content { padding: 20px 16px 32px; }
  .topbar-search { max-width: 200px; }
}

@media (max-width: 480px) {
  .app-head { padding: 0 16px; gap: 10px; }
  .topbar-search { max-width: 160px; }
}


/* ═══════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
═══════════════════════════════════════════════════════ */
.toast-stack {
  position: fixed;
  bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 99999; pointer-events: none;
  max-width: 360px;
}
.toast-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-lg);
  font-size: 13px; font-weight: 500;
  color: var(--c-text-2);
  pointer-events: all;
  animation: slideInRight .22s var(--ease-out) both;
  min-width: 260px;
  font-family: var(--font);
  letter-spacing: -.012em;
}
.toast-item.is-leaving {
  animation: slideInRight .20s var(--ease-in) reverse both;
}
.toast-item.success { border-left: 3px solid var(--c-success); }
.toast-item.error   { border-left: 3px solid var(--c-danger); }
.toast-item.warning { border-left: 3px solid var(--c-warning); }
.toast-item.info    { border-left: 3px solid var(--c-blue); }
.toast-icon { flex-shrink: 0; display: flex; align-items: center; }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px) scale(.96); }
  to   { opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════
   COMMAND PALETTE  (⌘K)
═══════════════════════════════════════════════════════ */
.cmdk-backdrop {
  position: fixed; inset: 0;
  background: rgba(8,16,30,.55);
  backdrop-filter: blur(8px);
  z-index: 9990;
  animation: fadeIn .16s var(--ease-out) both;
}
.cmdk-shell {
  position: fixed;
  top: 15vh; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 580px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-xl), 0 0 0 1px rgba(0,112,173,.06);
  z-index: 9991;
  overflow: hidden;
  animation: popIn .22s var(--ease-spring) both;
  margin: 0 16px;
}
#cmdk-input {
  width: 100%; height: 54px;
  padding: 0 20px;
  font-size: 15px; font-weight: 500;
  border: none; border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  outline: none;
  font-family: var(--font);
  letter-spacing: -.012em;
}
#cmdk-input::placeholder { color: var(--c-text-4); }
.cmdk-list {
  max-height: 380px; overflow-y: auto;
  padding: 5px;
  scrollbar-width: thin;
}
.cmdk-group-title {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-text-4); padding: 12px 12px 4px;
}
.cmdk-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-lg);
  font-size: 13.5px; font-weight: 500; color: var(--c-text-2);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cmdk-item .ico { color: var(--c-text-4); flex-shrink: 0; }
.cmdk-item:hover, .cmdk-item.is-active {
  background: var(--c-blue-bg);
  color: var(--c-blue);
}
.cmdk-item:hover .ico, .cmdk-item.is-active .ico { color: var(--c-blue); }
.cmdk-footer {
  border-top: 1px solid var(--c-border);
  padding: 9px 16px;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--c-surface2);
  font-size: 11px; color: var(--c-text-4);
}
.cmdk-footer kbd {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px;
  font-size: 10.5px; font-weight: 600; color: var(--c-text-3);
  font-family: var(--font);
}


/* ═══════════════════════════════════════════════════════
   PAGE LOADER  (thin top bar)
═══════════════════════════════════════════════════════ */
#page-loader {
  position: fixed; top: 0; left: 0;
  height: 2.5px; width: 0;
  z-index: 9999;
  background: linear-gradient(90deg, var(--c-blue-l), var(--c-blue), var(--c-blue-d));
  transition: width .25s var(--ease-out), opacity .30s;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
}


/* ═══════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════ */
@keyframes fadeIn       { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes slideInDown  { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes slideInUp    { from { opacity: 0; transform: translateY(6px); }  to { opacity: 1; transform: none; } }
@keyframes scaleIn      { from { opacity: 0; transform: scale(.96); }       to { opacity: 1; transform: scale(1); } }
@keyframes pulse-soft   { 0%,100% { opacity: 1; } 50% { opacity: .35; } }