/* ============================================================
   TECHIONIC HQ — Operations Platform
   Elite Light Theme | v3.0
   Fonts: Cormorant Garamond × Jost × JetBrains Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Jost:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

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

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  --bg:        #f5f3ef;
  --surface:   #ffffff;
  --surface-2: #f0ede8;
  --surface-3: #e8e4de;
  --border:    #e0dbd3;
  --border-md: #cdc8bf;
  --accent:       #1a51e0;
  --accent-hover: #1440c4;
  --accent-light: rgba(26,81,224,0.08);
  --accent-glow:  rgba(26,81,224,0.22);
  --success: #0f7c5a;
  --warning: #c47a00;
  --danger:  #c8253b;
  --text:       #141210;
  --text-muted: #8a8278;
  --text-dim:   #bab4ab;
  --brand-techionic: #1a51e0;
  --brand-ascend:    #6d28d9;
  --brand-apex:      #c47a00;
  --brand-internal:  #0f7c5a;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Jost', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', monospace;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05), 0 3px 8px rgba(0,0,0,0.04);
  --shadow:    0 1px 3px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.05), 0 20px 40px rgba(0,0,0,0.04);
  --shadow-lg: 0 2px 6px rgba(0,0,0,0.07), 0 12px 28px rgba(0,0,0,0.08), 0 40px 60px rgba(0,0,0,0.07);
  --shadow-xl: 0 4px 8px rgba(0,0,0,0.08), 0 20px 40px rgba(0,0,0,0.12), 0 60px 80px rgba(0,0,0,0.10);
  --spring: cubic-bezier(0.175,0.885,0.32,1.275);
  --smooth: cubic-bezier(0.4,0,0.2,1);
  --out:    cubic-bezier(0.0,0,0.2,1);
  --in:     cubic-bezier(0.4,0,1,1);
}

/* ── BASE ────────────────────────────────────────────────────── */
body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--font-sans);
  font-size:   15px;
  font-weight: 400;
  line-height: 1.65;
  min-height:  100vh;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:  hidden;
  position:    relative;
}
/* Dot-grid texture */
body::before {
  content:    '';
  position:   fixed;
  inset:      0;
  background: radial-gradient(circle, rgba(160,150,135,0.22) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
/* Warm top vignette */
body::after {
  content:  '';
  position: fixed;
  inset:    0;
  background: radial-gradient(ellipse 90% 55% at 50% -5%, rgba(255,253,248,0.85) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar             { width: 5px; }
::-webkit-scrollbar-track       { background: var(--bg); }
::-webkit-scrollbar-thumb       { background: var(--border-md); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ── LAYOUT ──────────────────────────────────────────────────── */
.container {
  max-width: 1320px;
  margin:    0 auto;
  padding:   0 32px;
  position:  relative;
  z-index:   1;
}

/* ── NAVBAR ──────────────────────────────────────────────────── */
.navbar {
  position:  sticky;
  top:       0;
  z-index:   200;
  height:    66px;
  display:   flex;
  align-items:     center;
  justify-content: space-between;
  padding:   0 36px;
  background: rgba(245,243,239,0.92);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s var(--smooth);
}
.navbar.scrolled {
  box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,0.06);
}
.navbar-brand {
  font-family:    var(--font-serif);
  font-weight:    700;
  font-size:      26px;
  letter-spacing: 3px;
  color:          var(--text);
  text-transform: uppercase;
  line-height:    1;
  user-select:    none;
}
.navbar-brand span { color: var(--accent); }
.navbar-right {
  display:     flex;
  align-items: center;
  gap:         22px;
}
.navbar-user {
  font-size:   13px;
  font-weight: 400;
  color:       var(--text-muted);
}
.navbar-user b { color: var(--text); font-weight: 600; }
.logout-btn {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  padding:     8px 18px;
  background:  var(--surface);
  border:      1px solid var(--border-md);
  border-radius: var(--r-sm);
  color:       var(--text-muted);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size:   13px;
  font-weight: 500;
  cursor:      pointer;
  box-shadow:  var(--shadow-sm);
  will-change: transform, box-shadow;
  transition:  color        0.18s var(--smooth),
               border-color 0.18s var(--smooth),
               box-shadow   0.18s var(--smooth),
               transform    0.18s var(--smooth);
}
.logout-btn:hover {
  border-color: var(--danger);
  color:        var(--danger);
  box-shadow:   0 0 0 3px rgba(200,37,59,0.08);
  transform:    translateY(-1px);
}
.logout-btn:active { transform: translateY(0); }

/* ── DASHBOARD LAYOUT ────────────────────────────────────────── */
.dashboard-layout {
  display:     grid;
  grid-template-columns: 400px 1fr;
  gap:         32px;
  padding:     36px 0 60px;
  align-items: start;
}
.form-sticky {
  position:   sticky;
  top:        90px;
  align-self: start;
}

/* ── CARD ────────────────────────────────────────────────────── */
.card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       30px;
  position:      relative;
  box-shadow:    var(--shadow);
  will-change:   transform, box-shadow;
  transition:    box-shadow 0.35s var(--smooth),
                 transform  0.35s var(--smooth);
}
.card h3 {
  font-family:    var(--font-sans);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  24px;
}

/* ── FORM ────────────────────────────────────────────────────── */
.field { margin-bottom: 16px; }
.form-label {
  display:        block;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  6px;
}

select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea {
  width:         100%;
  display:       block;
  background:    var(--surface);
  border:        1.5px solid var(--border);
  border-radius: var(--r-sm);
  color:         var(--text);
  font-family:   var(--font-sans);
  font-size:     14px;
  font-weight:   400;
  padding:       11px 14px;
  margin-bottom: 14px;
  outline:       none;
  will-change:   border-color, box-shadow;
  transition:    border-color 0.2s var(--smooth),
                 box-shadow   0.2s var(--smooth),
                 background   0.2s var(--smooth);
  -webkit-appearance: none;
  appearance:    none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238a8278' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 14px center;
  padding-right:       40px;
  cursor: pointer;
}
select option { background: var(--surface); color: var(--text); }
select:focus, input:focus, textarea:focus {
  border-color: var(--accent);
  background:   #fdfcfb;
  box-shadow:   0 0 0 3px var(--accent-light);
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
textarea { resize: vertical; min-height: 88px; line-height: 1.5; }

.input-wrap       { position: relative; }
.input-wrap input { padding-right: 44px; margin-bottom: 14px; }
.input-icon {
  position:  absolute;
  right:     13px;
  top:       50%;
  transform: translateY(-58%);
  cursor:    pointer;
  color:     var(--text-dim);
  font-size: 16px;
  line-height: 1;
  user-select: none;
  transition: color 0.15s var(--smooth);
}
.input-icon:hover { color: var(--text-muted); }

/* ── SLIDER ──────────────────────────────────────────────────── */
.slider-wrap {
  background:    var(--surface-2);
  border:        1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding:       14px 16px 17px;
  margin-bottom: 14px;
  transition:    border-color 0.2s var(--smooth), box-shadow 0.2s var(--smooth);
}
.slider-wrap:focus-within {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px var(--accent-light);
}
.slider-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   12px;
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  1px;
  text-transform:  uppercase;
  color:           var(--text-muted);
}
.slider-val {
  font-family: var(--font-mono);
  font-size:   16px;
  font-weight: 500;
  color:       var(--accent);
  min-width:   44px;
  text-align:  right;
}
input[type="range"] {
  width:   100%;
  height:  5px;
  border-radius: 5px;
  outline: none;
  padding: 0; margin: 0;
  border: none; box-shadow: none;
  cursor:  pointer;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(
    90deg,
    var(--accent) 0%, var(--accent) var(--pct,100%),
    var(--border) var(--pct,100%), var(--border) 100%
  );
  transition: background 0.12s var(--smooth);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:  20px; height: 20px;
  background:    var(--surface);
  border:        2.5px solid var(--accent);
  border-radius: 50%;
  cursor:        pointer;
  box-shadow:    0 1px 4px rgba(0,0,0,0.14);
  will-change:   transform, box-shadow;
  transition:    transform  0.22s var(--spring),
                 box-shadow 0.2s var(--smooth);
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform:  scale(1.3);
  box-shadow: 0 0 0 5px var(--accent-light), 0 2px 6px rgba(0,0,0,0.12);
}
input[type="range"]::-moz-range-thumb {
  width:  16px; height: 16px;
  background: var(--surface);
  border: 2.5px solid var(--accent);
  border-radius: 50%;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.submit-btn, button[type="submit"] {
  width:   100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:     8px;
  padding: 13px 28px;
  background:    var(--accent);
  border:        none;
  border-radius: var(--r-sm);
  color:         #fff;
  font-family:   var(--font-sans);
  font-size:     12px;
  font-weight:   700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor:        pointer;
  position:      relative;
  overflow:      hidden;
  box-shadow:    0 1px 2px rgba(26,81,224,0.25), 0 4px 12px rgba(26,81,224,0.25);
  will-change:   transform, box-shadow;
  transition:    transform    0.25s var(--spring),
                 box-shadow   0.22s var(--smooth),
                 background   0.2s var(--smooth);
}
.submit-btn::before, button[type="submit"]::before {
  content:  '';
  position: absolute;
  top: -10%; left: -80%;
  width: 60%; height: 120%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform:  skewX(-15deg);
  transition: left 0.6s var(--smooth);
}
.submit-btn:hover::before, button[type="submit"]:hover::before { left: 160%; }
.submit-btn:hover, button[type="submit"]:hover {
  background:  var(--accent-hover);
  box-shadow:  0 2px 6px rgba(26,81,224,0.3), 0 8px 24px rgba(26,81,224,0.32);
  transform:   translateY(-2px);
}
.submit-btn:active, button[type="submit"]:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 3px rgba(26,81,224,0.2);
}
.submit-btn:disabled, button[type="submit"]:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none !important;
}

.btn-secondary {
  background:    var(--surface);
  border:        1.5px solid var(--border-md);
  color:         var(--text-muted);
  border-radius: var(--r-sm);
  padding:       11px 20px;
  font-family:   var(--font-sans);
  font-size:     12px;
  font-weight:   700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor:        pointer;
  box-shadow:    var(--shadow-sm);
  will-change:   transform, box-shadow;
  transition:    color 0.18s var(--smooth), border-color 0.18s var(--smooth),
                 transform 0.22s var(--spring), box-shadow 0.18s var(--smooth);
}
.btn-secondary:hover {
  color: var(--text); border-color: var(--border-md);
  transform: translateY(-1px); box-shadow: var(--shadow);
}
.btn-group { display: flex; gap: 12px; margin-top: 24px; }
.btn-group button, .btn-group .submit-btn { flex: 1; }

/* ── FEED ────────────────────────────────────────────────────── */
.feed-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   22px;
}
.feed-header h2 {
  font-family:    var(--font-serif);
  font-size:      30px;
  font-weight:    700;
  letter-spacing: 0.5px;
  color:          var(--text);
  line-height:    1;
}
.live-badge {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color:       var(--success);
  text-transform: uppercase;
  font-family: var(--font-sans);
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: live-pulse 2.2s ease infinite;
  flex-shrink: 0;
}
@keyframes live-pulse {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(15,124,90,0.5); }
  50%     { opacity:.7;box-shadow:0 0 0 6px rgba(15,124,90,0); }
}

/* ── TASK ITEMS ──────────────────────────────────────────────── */
.task-list { display: flex; flex-direction: column; gap: 10px; }

.task-item {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       20px 22px 18px;
  position:      relative;
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
  will-change:   transform, box-shadow;
  transition:    transform    0.35s var(--spring),
                 box-shadow   0.3s var(--smooth),
                 border-color 0.2s var(--smooth);
  animation:     itemUp 0.55s var(--out) both;
}
/* Bottom brand bar that expands on hover */
.task-item::after {
  content:  '';
  position: absolute;
  bottom:0; left:0; right:0;
  height:   2.5px;
  background: var(--item-accent, var(--accent));
  transform:  scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--spring);
}
.task-item:hover {
  transform:    translateY(-3px);
  box-shadow:   var(--shadow-lg);
  border-color: var(--border-md);
}
.task-item:hover::after { transform: scaleX(1); }

.task-item:nth-child(1)  { animation-delay: 0.04s; }
.task-item:nth-child(2)  { animation-delay: 0.09s; }
.task-item:nth-child(3)  { animation-delay: 0.14s; }
.task-item:nth-child(4)  { animation-delay: 0.19s; }
.task-item:nth-child(5)  { animation-delay: 0.24s; }
.task-item:nth-child(6)  { animation-delay: 0.29s; }
.task-item:nth-child(7)  { animation-delay: 0.34s; }
.task-item:nth-child(8)  { animation-delay: 0.39s; }
.task-item:nth-child(9)  { animation-delay: 0.44s; }
.task-item:nth-child(10) { animation-delay: 0.49s; }

@keyframes itemUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

.task-meta {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             12px;
  margin-bottom:   10px;
}
.task-meta-left {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         8px;
}
.task-author { font-size:14px; font-weight:600; color:var(--text); }
.task-time {
  font-family: var(--font-mono);
  font-size:   11px;
  font-weight: 500;
  color:       var(--text-dim);
  white-space: nowrap;
  background:  var(--surface-2);
  padding:     2px 8px;
  border-radius: var(--r-sm);
  border:      1px solid var(--border);
}
.brand-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 9px;
  border-radius: 4px;
  font-size:     10px;
  font-weight:   700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-left:   2px solid currentColor;
}
.brand-Techionic { color:var(--brand-techionic); background:rgba(26,81,224,0.07);  }
.brand-Ascend    { color:var(--brand-ascend);    background:rgba(109,40,217,0.07); }
.brand-Apex      { color:var(--brand-apex);      background:rgba(196,122,0,0.07);  }
.brand-Internal  { color:var(--brand-internal);  background:rgba(15,124,90,0.07);  }

.task-title { font-size:14.5px; color:var(--text); line-height:1.55; margin-bottom:14px; }

.task-footer {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         10px;
  flex-wrap:   wrap;
}
.task-category {
  font-family:    var(--font-sans);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color:          var(--text-muted);
  background:     var(--surface-2);
  border:         1px solid var(--border);
  padding:        3px 10px;
  border-radius:  4px;
}
.task-link {
  font-size:   12px;
  font-weight: 600;
  color:       var(--accent);
  text-decoration: none;
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  letter-spacing: 0.3px;
  transition:  color 0.15s var(--smooth), gap 0.2s var(--spring);
}
.task-link:hover { color:var(--accent-hover); gap:7px; }

/* ── PARTICIPATION BAR ───────────────────────────────────────── */
.part-bar-wrap   { margin-top:14px; }
.part-bar-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   6px;
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  0.8px;
  text-transform:  uppercase;
  color:           var(--text-dim);
}
.part-bar-pct { color:var(--text-muted); font-family:var(--font-mono); }
.participation-bar {
  height:        5px;
  background:    var(--surface-2);
  border-radius: 5px;
  overflow:      hidden;
  border:        1px solid var(--border);
}
.participation-fill {
  height:     100%;
  width:      0 !important;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), #4f8cf7);
  transition: width 1.1s var(--out);
}

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state {
  text-align:    center;
  padding:       72px 20px;
  color:         var(--text-dim);
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-sm);
}
.empty-icon { font-size:36px; display:block; margin-bottom:14px; opacity:.4; }

/* ── PORTAL / INDEX ──────────────────────────────────────────── */
.portal-header {
  text-align: center;
  padding:    70px 0 50px;
  animation:  fadeDown 0.7s var(--out) both;
}
.portal-logo {
  font-family:    'Plus Jakarta Sans', sans-serif;;
  font-size:      54px;
  font-weight:    700;
  letter-spacing: 7px;
  color:          var(--text);
  line-height:    1;
  margin-bottom:  14px;
  text-transform: uppercase;
}
.portal-logo span { color:var(--accent); }
.portal-divider {
  width:         44px;
  height:        2px;
  background:    var(--accent);
  margin:        0 auto 16px;
  border-radius: 2px;
}
.portal-sub {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--text-dim);
}

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

.profile-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   20px;
  padding-bottom:        60px;
}

.profile-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  padding:       32px 20px 26px;
  text-align:    center;
  cursor:        pointer;
  position:      relative;
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
  will-change:   transform, box-shadow;
  transition:    transform    0.4s var(--spring),
                 box-shadow   0.4s var(--smooth),
                 border-color 0.3s var(--smooth);
  animation:     itemUp 0.55s var(--out) both;
}
/* Top accent line that expands on hover */
.profile-card::before {
  content:  '';
  position: absolute;
  top:0; left:50%; right:50%;
  height:   2.5px;
  background: var(--accent);
  transition: left 0.45s var(--spring), right 0.45s var(--spring);
}
.profile-card:hover::before { left:0; right:0; }
.profile-card:hover {
  transform:    translateY(-6px);
  box-shadow:   var(--shadow-xl);
  border-color: var(--border-md);
}

.profile-card:nth-child(1) { animation-delay:0.05s; }
.profile-card:nth-child(2) { animation-delay:0.10s; }
.profile-card:nth-child(3) { animation-delay:0.15s; }
.profile-card:nth-child(4) { animation-delay:0.20s; }
.profile-card:nth-child(5) { animation-delay:0.25s; }
.profile-card:nth-child(6) { animation-delay:0.30s; }
.profile-card:nth-child(7) { animation-delay:0.35s; }
.profile-card:nth-child(8) { animation-delay:0.40s; }

.profile-avatar {
  width:         64px;
  height:        64px;
  border-radius: 50%;
  background:    linear-gradient(135deg, var(--accent), #4f8cf7);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-family:   var(--font-serif);
  font-size:     28px;
  font-weight:   700;
  color:         #fff;
  margin:        0 auto 18px;
  box-shadow:    0 4px 14px rgba(26,81,224,0.22);
  will-change:   transform, box-shadow;
  transition:    transform  0.45s var(--spring),
                 box-shadow 0.3s var(--smooth);
}
.profile-card:hover .profile-avatar {
  transform:  scale(1.1) rotate(-4deg);
  box-shadow: 0 8px 24px rgba(26,81,224,0.32);
}
.profile-card h3 { font-size:15px; font-weight:600; color:var(--text); margin-bottom:8px; }
.department-tag {
  display:       inline-block;
  font-size:     10px;
  font-weight:   700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:         var(--accent);
  background:    var(--accent-light);
  padding:       3px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.email-tag { font-size:12px; color:var(--text-dim); word-break:break-all; }
.admin-badge {
  position:   absolute;
  top:        12px;
  right:      12px;
  background: linear-gradient(135deg, var(--warning), var(--danger));
  color:      #fff;
  font-size:  9px;
  font-weight: 800;
  letter-spacing: 1px;
  padding:    3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* ── MODAL ───────────────────────────────────────────────────── */
.modal {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         500;
  background:      rgba(20,18,16,0.5);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  align-items:     center;
  justify-content: center;
  padding:         20px;
  animation:       overlayIn 0.3s var(--smooth);
}
.modal.show { display:flex; }
@keyframes overlayIn { from{opacity:0;} to{opacity:1;} }

.modal-content {
  background:    var(--surface);
  border:        1px solid var(--border-md);
  border-radius: var(--r-xl);
  padding:       44px 40px;
  width:         100%;
  max-width:     420px;
  position:      relative;
  box-shadow:    var(--shadow-xl);
  animation:     modalPop 0.5s var(--spring);
  overflow:      hidden;
}
.modal-content::before {
  content:  '';
  position: absolute;
  top:0; left:0; right:0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #4f8cf7);
}
@keyframes modalPop {
  from { opacity:0; transform:scale(0.90) translateY(24px); }
  to   { opacity:1; transform:scale(1)    translateY(0); }
}
.modal-close {
  position:   absolute;
  top:14px; right:14px;
  width:30px; height:30px;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: 50%;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--text-muted);
  font-size:     16px;
  line-height:   1;
  will-change:   transform;
  transition:    border-color 0.18s var(--smooth),
                 color        0.18s var(--smooth),
                 transform    0.25s var(--spring);
}
.modal-close:hover {
  border-color: var(--danger);
  color:        var(--danger);
  transform:    scale(1.1) rotate(90deg);
}
.modal-content h3 {
  font-family:   var(--font-serif);
  font-size:     26px;
  font-weight:   700;
  margin-bottom: 6px;
  color:         var(--text);
}
.modal-sub {
  font-size:     13px;
  color:         var(--text-muted);
  margin-bottom: 28px;
  line-height:   1.5;
}
.modal-cancel {
  text-align: center;
  margin-top: 16px;
  font-size:  13px;
  color:      var(--text-dim);
  cursor:     pointer;
  transition: color 0.15s var(--smooth);
}
.modal-cancel:hover { color:var(--text-muted); }

/* ── AUTH FORM ───────────────────────────────────────────────── */
.auth-wrapper {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         28px;
}
.auth-form {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  padding:       48px 44px;
  width:         100%;
  max-width:     460px;
  position:      relative;
  overflow:      hidden;
  box-shadow:    var(--shadow-xl);
  animation:     itemUp 0.6s var(--out) both;
}
.auth-form::before {
  content:  '';
  position: absolute;
  top:0; left:0; right:0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #4f8cf7);
}
.form-logo {
  font-family:    var(--font-serif);
  font-size:      22px;
  font-weight:    700;
  letter-spacing: 2px;
  color:          var(--text);
  margin-bottom:  4px;
  text-transform: uppercase;
}
.form-logo span { color:var(--accent); }
.auth-form h2 {
  font-family:   var(--font-sans);
  font-size:     22px;
  font-weight:   700;
  margin-bottom: 6px;
  color:         var(--text);
}
.auth-form .sub {
  font-size:     14px;
  color:         var(--text-muted);
  margin-bottom: 32px;
  line-height:   1.5;
}
.error-msg {
  background:    rgba(200,37,59,0.05);
  border:        1px solid rgba(200,37,59,0.2);
  border-left:   3px solid var(--danger);
  border-radius: var(--r-sm);
  color:         var(--danger);
  font-size:     13px;
  font-weight:   500;
  padding:       11px 14px;
  margin-bottom: 22px;
}

/* ── DEPT CARDS ──────────────────────────────────────────────── */
.dept-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  margin-bottom:         18px;
}
.dept-card {
  background:    var(--surface);
  border:        1.5px solid var(--border);
  border-radius: var(--r);
  padding:       18px 12px;
  text-align:    center;
  cursor:        pointer;
  color:         var(--text-muted);
  font-size:     13px;
  font-weight:   500;
  box-shadow:    var(--shadow-sm);
  will-change:   transform, box-shadow;
  transition:    border-color 0.2s var(--smooth),
                 color        0.2s var(--smooth),
                 background   0.2s var(--smooth),
                 transform    0.28s var(--spring),
                 box-shadow   0.2s var(--smooth);
}
.dept-icon { font-size:20px; display:block; margin-bottom:8px; }
.dept-card:hover {
  border-color: var(--border-md); color:var(--text);
  transform:    translateY(-2px); box-shadow:var(--shadow);
}
.dept-card.selected {
  background:   var(--accent-light);
  border-color: var(--accent);
  color:        var(--accent);
  font-weight:  600;
  transform:    translateY(-2px);
  box-shadow:   0 0 0 4px rgba(26,81,224,0.06), var(--shadow);
}

/* ── STEP INDICATOR ──────────────────────────────────────────── */
.pipeline-container {
  max-width:     500px;
  margin:        6% auto;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  padding:       44px;
  box-shadow:    var(--shadow-xl);
  position:      relative;
  overflow:      hidden;
}
.pipeline-container::before {
  content:  '';
  position: absolute;
  top:0; left:0; right:0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #4f8cf7);
}
.step-indicator {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   36px;
  position:        relative;
}
.step-indicator::before {
  content:''; position:absolute; top:50%; left:0;
  width:100%; height:1.5px;
  background: var(--border); transform:translateY(-50%); z-index:0;
}
.step-dot {
  width:32px; height:32px;
  background:    var(--surface-2);
  border:        2px solid var(--border-md);
  border-radius: 50%;
  z-index:1;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:12px; font-weight:700;
  color:     var(--text-dim);
  will-change: transform;
  transition: all 0.4s var(--spring);
}
.step-dot.active {
  background:  var(--accent); border-color:var(--accent);
  color:#fff; box-shadow:0 0 0 4px var(--accent-light); transform:scale(1.1);
}
.step-dot.done { background:var(--success); border-color:var(--success); color:#fff; }
.form-step       { display:none; }
.form-step.active {
  display:   block;
  animation: slideUp 0.5s var(--out) both;
}
@keyframes slideUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── TOAST ───────────────────────────────────────────────────── */
.toast {
  position:   fixed;
  bottom:28px; right:28px;
  z-index:    9000;
  display:    flex;
  align-items: center;
  gap:        10px;
  padding:    14px 22px;
  background: var(--surface);
  border:     1px solid rgba(15,124,90,0.22);
  border-left: 3px solid var(--success);
  border-radius: var(--r);
  color:      var(--text);
  font-size:  14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation:  toastIn  0.5s var(--spring) both,
              toastOut 0.3s var(--in) 3s forwards;
}
.toast-icon { color:var(--success); flex-shrink:0; font-size:16px; }
@keyframes toastIn  { from{opacity:0;transform:translateX(28px) scale(0.95);} to{opacity:1;transform:translateX(0) scale(1);} }
@keyframes toastOut { to{opacity:0;transform:translateX(28px);pointer-events:none;} }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:1100px) {
  .dashboard-layout { grid-template-columns:350px 1fr; gap:24px; }
}
@media (max-width:860px) {
  .dashboard-layout { grid-template-columns:1fr; padding:24px 0 48px; gap:24px; }
  .form-sticky      { position:static; }
  .navbar           { padding:0 20px; }
  .navbar-brand     { font-size:22px; letter-spacing:2px; }
  .navbar-user      { display:none; }
  .portal-logo      { font-size:38px; letter-spacing:4px; }
  .portal-header    { padding:48px 0 36px; }
  .profile-grid     { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
}
@media (max-width:600px) {
  .container       { padding:0 18px; }
  .card            { padding:22px 18px; }
  .profile-grid    { grid-template-columns:1fr 1fr; gap:12px; }
  .profile-card    { padding:24px 14px 20px; }
  .profile-avatar  { width:52px; height:52px; font-size:22px; }
  .portal-logo     { font-size:30px; letter-spacing:3px; }
  .task-meta       { flex-direction:column; align-items:flex-start; gap:8px; }
  .task-time       { align-self:flex-end; }
  .modal-content   { padding:36px 24px; }
  .auth-form       { padding:38px 24px; }
  .pipeline-container { padding:32px 22px; margin:4% auto; }
  .toast           { bottom:16px; right:16px; left:16px; font-size:13px; }
  .logout-btn      { padding:7px 13px; font-size:12px; }
  .navbar-brand    { font-size:18px; }
  .feed-header h2  { font-size:24px; }
}
@media (max-width:400px) {
  .profile-grid { grid-template-columns:1fr; }
  .dept-grid    { grid-template-columns:1fr; }
}