/* ══════════════════════════════════════════════════════════════
   BSS IT Project Monitor — Design System
   Dark mode premium · Glassmorphism · Smooth animations
   ══════════════════════════════════════════════════════════════ */

/* ─── Tokens ───────────────────────────────────────────────── */
:root {
  --bg-base      : #f8fafc;
  --bg-surface   : #ffffff;
  --bg-card      : rgba(255, 255, 255, 0.9);
  --bg-card-hover: rgba(255, 255, 255, 1);
  --border       : rgba(0, 0, 0, 0.08);
  --border-hover : rgba(0, 0, 0, 0.16);

  --indigo-400   : #6366f1;
  --indigo-500   : #4f46e5;
  --indigo-600   : #4338ca;
  --violet-500   : #7c3aed;
  --emerald-400  : #10b981;
  --emerald-500  : #059669;
  --amber-400    : #f59e0b;
  --amber-500    : #d97706;
  --rose-400     : #f43f5e;
  --rose-500     : #e11d48;

  --text-primary : #0f172a;
  --text-secondary: #475569;
  --text-muted   : #64748b;

  --radius-sm    : 8px;
  --radius-md    : 12px;
  --radius-lg    : 16px;
  --radius-xl    : 20px;

  --shadow-glow-indigo : 0 0 40px rgba(99,102,241,.15);
  --shadow-glow-emerald: 0 0 40px rgba(16,185,129,.15);

  --transition   : 220ms cubic-bezier(.4,0,.2,1);
  --font         : 'Inter', system-ui, -apple-system, sans-serif;
}

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

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family   : var(--font);
  background    : var(--bg-base);
  color         : var(--text-primary);
  min-height    : 100vh;
  line-height   : 1.6;
  -webkit-font-smoothing: antialiased;

  /* Subtle mesh gradient background */
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(99,102,241,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(139,92,246,.08) 0%, transparent 50%);
}

/* ─── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--bg-base); }
::-webkit-scrollbar-thumb  { background: rgba(0,0,0,.15); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25); }

/* ─── Header ────────────────────────────────────────────────── */
.app-header {
  position  : sticky;
  top       : 0;
  z-index   : 100;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width  : 1400px;
  margin     : 0 auto;
  padding    : 14px 24px;
  display    : flex;
  align-items: center;
  gap        : 20px;
}

.header-brand {
  display    : flex;
  align-items: center;
  gap        : 12px;
  flex       : 1;
}

.brand-logo svg {
  width : 36px;
  height: 36px;
  filter: drop-shadow(0 0 12px rgba(99,102,241,.5));
}

.brand-name {
  display    : block;
  font-size  : 1rem;
  font-weight: 700;
  background : linear-gradient(135deg, var(--indigo-600), var(--violet-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-subtitle {
  display   : block;
  font-size : .72rem;
  color     : var(--text-muted);
  letter-spacing: .02em;
}

.header-actions {
  display    : flex;
  align-items: center;
  gap        : 16px;
}

.sync-info {
  display    : flex;
  align-items: center;
  gap        : 6px;
  font-size  : .78rem;
  color      : var(--text-secondary);
}

.sync-dot {
  width       : 7px;
  height      : 7px;
  border-radius: 50%;
  background  : var(--text-muted);
  transition  : background var(--transition);
}
.sync-dot.syncing  { background: var(--amber-400); animation: pulse 1s infinite; }
.sync-dot.synced   { background: var(--emerald-400); }
.sync-dot.error    { background: var(--rose-400); }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  display    : inline-flex;
  align-items: center;
  gap        : 7px;
  padding    : 8px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size  : .83rem;
  font-weight: 600;
  cursor     : pointer;
  border     : none;
  outline    : none;
  transition : all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

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

.btn-sync {
  background: linear-gradient(135deg, var(--indigo-500), var(--violet-500));
  color      : white;
  box-shadow : 0 4px 15px rgba(99,102,241,.3);
}
.btn-sync:hover  { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,.4); }
.btn-sync:active { transform: translateY(0); }
.btn-sync:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-outline {
  background: transparent;
  color      : var(--text-secondary);
  border     : 1px solid var(--border-hover);
}
.btn-outline:hover { background: var(--bg-card-hover); color: var(--text-primary); }

.btn-back {
  display    : inline-flex;
  align-items: center;
  gap        : 6px;
  padding    : 7px 12px;
  border-radius: var(--radius-sm);
  background : transparent;
  color      : var(--text-secondary);
  border     : 1px solid var(--border);
  font-size  : .83rem;
  font-weight: 500;
  cursor     : pointer;
  transition : all var(--transition);
  font-family: var(--font);
  flex-shrink: 0;
}
.btn-back svg { width: 15px; height: 15px; }
.btn-back:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-hover); }

/* Spinning animation for sync button */
.btn-sync.loading svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Main Layout ───────────────────────────────────────────── */
.app-main {
  max-width: 1400px;
  margin   : 0 auto;
  padding  : 28px 24px 60px;
}

.view { animation: fadeUp .3s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Summary Cards ─────────────────────────────────────────── */
.summary-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap                  : 16px;
  margin-bottom        : 28px;
}

.summary-card {
  display      : flex;
  align-items  : center;
  gap          : 16px;
  padding      : 20px 22px;
  border-radius: var(--radius-lg);
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  backdrop-filter: blur(12px);
  transition   : all var(--transition);
  position     : relative;
  overflow     : hidden;
}

.summary-card::before {
  content    : '';
  position   : absolute;
  inset      : 0;
  opacity    : 0;
  transition : opacity var(--transition);
  border-radius: inherit;
}

.summary-card:hover::before { opacity: 1; }
.summary-card:hover { transform: translateY(-2px); border-color: var(--border-hover); }

.card-icon-wrap {
  width        : 48px;
  height       : 48px;
  border-radius: var(--radius-sm);
  display      : flex;
  align-items  : center;
  justify-content: center;
  flex-shrink  : 0;
}
.card-icon-wrap svg { width: 22px; height: 22px; }

.card-total .card-icon-wrap { background: rgba(99,102,241,.15); color: var(--indigo-400); }
.card-avg   .card-icon-wrap { background: rgba(139,92,246,.15); color: #c4b5fd; }
.card-done  .card-icon-wrap { background: rgba(16,185,129,.15); color: var(--emerald-400); }
.card-critical .card-icon-wrap { background: rgba(244,63,94,.15); color: var(--rose-400); }

.card-total::before    { background: linear-gradient(135deg, rgba(99,102,241,.06), transparent); }
.card-avg::before      { background: linear-gradient(135deg, rgba(139,92,246,.06), transparent); }
.card-done::before     { background: linear-gradient(135deg, rgba(16,185,129,.06), transparent); }
.card-critical::before { background: linear-gradient(135deg, rgba(244,63,94,.06), transparent); }

.card-body { display: flex; flex-direction: column; }

.card-value {
  font-size  : 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.card-total    .card-value { color: var(--indigo-400); }
.card-avg      .card-value { color: #c4b5fd; }
.card-done     .card-value { color: var(--emerald-400); }
.card-critical .card-value { color: var(--rose-400); }

.card-label { font-size: .78rem; color: var(--text-muted); font-weight: 500; }

/* ─── Toolbar ───────────────────────────────────────────────── */
.toolbar {
  display    : flex;
  align-items: center;
  gap        : 12px;
  margin-bottom: 20px;
  flex-wrap  : wrap;
}

.search-wrap {
  position  : relative;
  flex      : 1;
  min-width : 200px;
}
.search-icon {
  position : absolute;
  left     : 12px;
  top      : 50%;
  transform: translateY(-50%);
  width    : 16px;
  height   : 16px;
  color    : var(--text-muted);
  pointer-events: none;
}
.search-input {
  width        : 100%;
  padding      : 10px 12px 10px 38px;
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--radius-sm);
  color        : var(--text-primary);
  font-family  : var(--font);
  font-size    : .875rem;
  outline      : none;
  transition   : all var(--transition);
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--indigo-500); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }

.filter-wrap { display: flex; gap: 10px; }

.filter-select {
  padding      : 9px 32px 9px 12px;
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--radius-sm);
  color        : var(--text-primary);
  font-family  : var(--font);
  font-size    : .83rem;
  outline      : none;
  cursor       : pointer;
  transition   : all var(--transition);
  appearance   : none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.filter-select:focus { border-color: var(--indigo-500); }

/* ─── Project Grid ──────────────────────────────────────────── */
.project-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap                  : 16px;
}

/* Project Card */
.project-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding      : 20px;
  cursor       : pointer;
  transition   : all var(--transition);
  backdrop-filter: blur(8px);
  display      : flex;
  flex-direction: column;
  gap          : 14px;
  position     : relative;
  overflow     : hidden;
}

.project-card::before {
  content : '';
  position: absolute;
  top     : 0;
  left    : 0;
  right   : 0;
  height  : 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.project-card.status-done     { --accent: var(--emerald-500); }
.project-card.status-warning  { --accent: var(--amber-500); }
.project-card.status-critical { --accent: var(--rose-500); }
.project-card.status-error    { --accent: var(--text-muted); }

.project-card::before { background: var(--accent); }

.project-card:hover {
  border-color: var(--border-hover);
  transform   : translateY(-3px);
  box-shadow  : 0 12px 40px rgba(0,0,0,.3), 0 0 0 1px var(--border-hover);
}

.card-top {
  display    : flex;
  align-items: flex-start;
  justify-content: space-between;
  gap        : 10px;
}

.card-project-name {
  font-size  : .95rem;
  font-weight: 700;
  color      : var(--text-primary);
  line-height: 1.4;
  flex       : 1;
}

.badge {
  padding      : 3px 10px;
  border-radius: 999px;
  font-size    : .7rem;
  font-weight  : 600;
  white-space  : nowrap;
  flex-shrink  : 0;
}
.badge-done     { background: rgba(16,185,129,.15); color: var(--emerald-400); border: 1px solid rgba(16,185,129,.3); }
.badge-warning  { background: rgba(245,158,11,.15); color: var(--amber-400);   border: 1px solid rgba(245,158,11,.3); }
.badge-critical { background: rgba(244,63,94,.15);  color: var(--rose-400);    border: 1px solid rgba(244,63,94,.3); }
.badge-error    { background: rgba(71,85,105,.2);   color: var(--text-secondary); border: 1px solid var(--border); }

.card-meta {
  display  : flex;
  flex-wrap: wrap;
  gap      : 10px;
}

.meta-item {
  display    : flex;
  align-items: center;
  gap        : 5px;
  font-size  : .75rem;
  color      : var(--text-muted);
}
.meta-item svg { width: 12px; height: 12px; flex-shrink: 0; }

.card-progress { display: flex; flex-direction: column; gap: 6px; }

.progress-header {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

.progress-label { font-size: .75rem; color: var(--text-muted); }
.progress-pct   { font-size: .875rem; font-weight: 700; color: var(--text-primary); }

.progress-bar-track {
  height       : 6px;
  background   : rgba(0,0,0,.08);
  border-radius: 999px;
  overflow     : hidden;
}

.progress-bar-fill {
  height       : 100%;
  border-radius: 999px;
  transition   : width 1s cubic-bezier(.4,0,.2,1);
  background   : var(--accent);
  box-shadow   : 0 0 8px var(--accent);
}

.progress-detail {
  font-size: .72rem;
  color    : var(--text-muted);
}

.card-footer {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding-top    : 12px;
  border-top     : 1px solid var(--border);
}

.card-modified {
  font-size: .72rem;
  color    : var(--text-muted);
}

.card-arrow {
  width : 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.card-arrow svg { width: 14px; height: 14px; color: var(--text-muted); }
.project-card:hover .card-arrow { background: rgba(99,102,241,.2); }
.project-card:hover .card-arrow svg { color: var(--indigo-400); }

.card-error-msg {
  font-size: .75rem;
  color    : var(--rose-400);
  background: rgba(244,63,94,.08);
  border   : 1px solid rgba(244,63,94,.2);
  border-radius: var(--radius-sm);
  padding  : 6px 10px;
}

/* ─── Loading / Empty / Error States ───────────────────────── */
.loading-state, .empty-state, .error-state {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  justify-content: center;
  gap           : 12px;
  padding       : 80px 24px;
  text-align    : center;
  color         : var(--text-muted);
}

.loading-state p, .empty-state p, .error-state p { font-size: .875rem; }
.empty-state h3, .error-state h3 { color: var(--text-secondary); font-size: 1.1rem; }
.empty-state svg, .error-state svg { width: 56px; height: 56px; opacity: .4; }

.spinner {
  width        : 40px;
  height       : 40px;
  border       : 3px solid rgba(0,0,0,.1);
  border-top   : 3px solid var(--indigo-500);
  border-radius: 50%;
  animation    : spin 1s linear infinite;
}

/* ─── Detail View ───────────────────────────────────────────── */
.detail-header {
  display    : flex;
  align-items: flex-start;
  gap        : 16px;
  margin-bottom: 20px;
  flex-wrap  : wrap;
}

.detail-title-wrap { flex: 1; }

.detail-title {
  font-size  : 1.5rem;
  font-weight: 800;
  background : linear-gradient(135deg, var(--text-primary), var(--text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
  margin-bottom: 8px;
}

.detail-badges { display: flex; flex-wrap: wrap; gap: 8px; }

.meta-bar {
  display      : flex;
  flex-wrap    : wrap;
  gap          : 8px;
  padding      : 14px 18px;
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

.meta-chip {
  display    : flex;
  align-items: center;
  gap        : 6px;
  font-size  : .78rem;
  color      : var(--text-secondary);
  padding    : 4px 10px;
  background : rgba(0,0,0,.04);
  border-radius: var(--radius-sm);
  border     : 1px solid var(--border);
}
.meta-chip svg  { width: 12px; height: 12px; color: var(--indigo-400); }
.meta-chip span { font-weight: 600; color: var(--text-primary); }

/* ─── Progress Donut ────────────────────────────────────────── */
.detail-progress-section {
  margin-bottom: 28px;
}

.progress-overview {
  display    : flex;
  align-items: center;
  gap        : 32px;
  padding    : 24px 28px;
  background : var(--bg-card);
  border     : 1px solid var(--border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(12px);
  flex-wrap  : wrap;
}

.progress-donut { width: 130px; height: 130px; flex-shrink: 0; }

.donut-track { fill: none; stroke: rgba(0,0,0,.06); stroke-width: 12; }
.donut-fill  { fill: none; stroke: var(--emerald-500); stroke-width: 12; stroke-linecap: round;
               transition: stroke-dasharray 1.2s cubic-bezier(.4,0,.2,1);
               filter: drop-shadow(0 0 8px rgba(16,185,129,.5)); }

.donut-pct { font-size: 22px; font-weight: 800; fill: var(--text-primary); text-anchor: middle; dominant-baseline: middle; font-family: var(--font); }
.donut-lbl { font-size: 9px; fill: var(--text-muted); text-anchor: middle; font-family: var(--font); }

.progress-stats {
  display: flex;
  gap    : 40px;
}

.pstat {
  display       : flex;
  flex-direction: column;
  gap           : 4px;
}
.pstat-val { font-size: 2rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.pstat-lbl { font-size: .75rem; color: var(--text-muted); }

/* ─── Checklist Table ───────────────────────────────────────── */
.checklist-section { animation: fadeUp .3s ease; }

.section-title {
  font-size    : 1.1rem;
  font-weight  : 700;
  color        : var(--text-secondary);
  margin-bottom: 14px;
}

.table-wrap {
  border-radius: var(--radius-lg);
  border       : 1px solid var(--border);
  overflow     : hidden;
  background   : var(--bg-card);
}

.checklist-table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : .83rem;
}

.checklist-table thead {
  background: rgba(0,0,0,.04);
  border-bottom: 1px solid var(--border);
}

.checklist-table th {
  padding    : 12px 14px;
  text-align : left;
  color      : var(--text-muted);
  font-weight: 600;
  font-size  : .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.checklist-table td {
  padding    : 11px 14px;
  border-bottom: 1px solid rgba(0,0,0,.04);
  vertical-align: top;
}

.checklist-table tbody tr:last-child td { border-bottom: none; }

.checklist-table tbody tr:hover td { background: rgba(0,0,0,.025); }

/* Category row */
.row-category td {
  background : rgba(99,102,241,.06);
  color      : var(--indigo-400);
  font-weight: 700;
  font-size  : .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding    : 9px 14px;
  border-bottom: 1px solid rgba(99,102,241,.15);
}

/* Status badge in table */
.status-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 3px 10px;
  border-radius: 999px;
  font-size    : .7rem;
  font-weight  : 600;
  white-space  : nowrap;
}

.status-tervalidasi {
  background: rgba(16,185,129,.12);
  color     : var(--emerald-400);
  border    : 1px solid rgba(16,185,129,.25);
}

.status-onprogress {
  background: rgba(245,158,11,.12);
  color     : var(--amber-400);
  border    : 1px solid rgba(245,158,11,.25);
}

.status-draft {
  background: rgba(244,63,94,.12);
  color     : var(--rose-400);
  border    : 1px solid rgba(244,63,94,.25);
}

.status-empty {
  background: rgba(71,85,105,.15);
  color     : var(--text-muted);
  border    : 1px solid var(--border);
}

.status-dot {
  width : 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Link cell */
.cell-link a {
  color         : var(--indigo-400);
  text-decoration: none;
  display       : inline-flex;
  align-items   : center;
  gap           : 4px;
  font-size     : .78rem;
  transition    : color var(--transition);
}
.cell-link a:hover { color: var(--indigo-400); text-decoration: underline; }
.cell-link svg { width: 11px; height: 11px; }

/* No column */
.col-no { width: 48px; text-align: center; color: var(--text-muted); }

/* ─── Toast ─────────────────────────────────────────────────── */
.toast {
  position     : fixed;
  bottom       : 24px;
  right        : 24px;
  padding      : 12px 20px;
  border-radius: var(--radius-md);
  font-size    : .875rem;
  font-weight  : 500;
  z-index      : 9999;
  transform    : translateY(100px);
  opacity      : 0;
  transition   : all .3s cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(12px);
  max-width    : 360px;
  pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.3); color: var(--emerald-400); }
.toast.error   { background: rgba(244,63,94,.15);  border: 1px solid rgba(244,63,94,.3);  color: var(--rose-400);    }
.toast.info    { background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.3); color: var(--indigo-400);  }

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .app-main    { padding: 20px 16px 48px; }
  .header-inner { padding: 12px 16px; }
  .brand-subtitle { display: none; }
  .summary-grid   { grid-template-columns: repeat(2, 1fr); }
  .project-grid   { grid-template-columns: 1fr; }
  .progress-stats { gap: 20px; }
  .progress-overview { gap: 20px; }
  .detail-header { gap: 12px; }
  .detail-title  { font-size: 1.2rem; }
  .filter-wrap   { flex-wrap: wrap; width: 100%; }
  .filter-select { flex: 1; min-width: 130px; }
}

@media (max-width: 480px) {
  .summary-grid   { grid-template-columns: 1fr; }
  .header-actions { gap: 8px; }
  .sync-info      { display: none; }
}

/* ════════════════════════════════════════════════════════════
   LOGIN PAGE
   ════════════════════════════════════════════════════════════ */

.login-page {
  position   : fixed;
  inset      : 0;
  display    : flex;
  align-items: center;
  justify-content: center;
  z-index    : 200;
  overflow   : hidden;
  background : var(--bg-base);
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(99,102,241,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(139,92,246,.14) 0%, transparent 55%);
}

/* Animated blobs */
.login-bg-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.login-shape {
  position     : absolute;
  border-radius: 50%;
  filter       : blur(80px);
  opacity      : 0.18;
  animation    : blobFloat 8s ease-in-out infinite;
}
.shape-1 {
  width : 500px; height: 500px;
  background: radial-gradient(circle, #6366f1, transparent 70%);
  top: -120px; left: -120px;
  animation-delay: 0s;
}
.shape-2 {
  width : 400px; height: 400px;
  background: radial-gradient(circle, #8b5cf6, transparent 70%);
  bottom: -80px; right: -80px;
  animation-delay: -4s;
}
.shape-3 {
  width : 300px; height: 300px;
  background: radial-gradient(circle, #10b981, transparent 70%);
  top: 60%; left: 60%;
  animation-delay: -2s;
}
@keyframes blobFloat {
  0%,100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(15px, -20px) scale(1.04); }
  66%      { transform: translate(-10px, 12px) scale(0.97); }
}

/* Login card */
.login-card {
  position     : relative;
  z-index      : 1;
  width        : 100%;
  max-width    : 400px;
  background   : rgba(255,255,255,.9);
  border       : 1px solid rgba(0,0,0,.10);
  border-radius: var(--radius-xl);
  padding      : 40px 36px 32px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow   : 0 24px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.12);
  animation    : cardIn .45s cubic-bezier(.34,1.26,.64,1) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.login-logo {
  display        : flex;
  justify-content: center;
  margin-bottom  : 16px;
}
.login-logo svg {
  width : 56px;
  height: 56px;
  filter: drop-shadow(0 0 20px rgba(99,102,241,.55));
}

.login-brand   { text-align: center; margin-bottom: 32px; }
.login-title   {
  font-size  : 1.5rem;
  font-weight: 800;
  background : linear-gradient(135deg, #818cf8, #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}
.login-subtitle { font-size: .83rem; color: var(--text-muted); }

/* Form */
.login-form { display: flex; flex-direction: column; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
  font-size  : .78rem;
  font-weight: 600;
  color      : var(--text-secondary);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.input-wrap { position: relative; }
.input-icon {
  position : absolute;
  left     : 13px;
  top      : 50%;
  transform: translateY(-50%);
  width    : 16px; height: 16px;
  stroke   : var(--text-muted);
  pointer-events: none;
  transition: stroke var(--transition);
}
.form-input {
  width         : 100%;
  background    : rgba(0,0,0,.04);
  border        : 1px solid var(--border);
  border-radius : var(--radius-sm);
  padding       : 11px 44px 11px 38px;
  font-family   : var(--font);
  font-size     : .88rem;
  color         : var(--text-primary);
  outline       : none;
  transition    : border-color var(--transition), box-shadow var(--transition);
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus {
  border-color: var(--indigo-500);
  box-shadow  : 0 0 0 3px rgba(99,102,241,.18);
}
.form-input:focus + .input-icon,
.input-wrap:focus-within .input-icon { stroke: var(--indigo-400); }

/* Toggle password button */
.toggle-password {
  position  : absolute;
  right     : 12px;
  top       : 50%;
  transform : translateY(-50%);
  background: none;
  border    : none;
  cursor    : pointer;
  padding   : 4px;
  display   : flex;
  color     : var(--text-muted);
  transition: color var(--transition);
}
.toggle-password:hover { color: var(--text-secondary); }
.toggle-password svg   { width: 16px; height: 16px; stroke: currentColor; }

/* Login error */
.login-error {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  background   : rgba(244,63,94,.12);
  border       : 1px solid rgba(244,63,94,.3);
  border-radius: var(--radius-sm);
  padding      : 10px 14px;
  font-size    : .82rem;
  color        : var(--rose-400);
}
.login-error svg { width: 15px; height: 15px; flex-shrink: 0; }

@keyframes shakeFx {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
.shake { animation: shakeFx .4s ease both; }

/* Login button */
.btn-login {
  width          : 100%;
  padding        : 13px;
  background     : linear-gradient(135deg, var(--indigo-500), var(--violet-500));
  border         : none;
  border-radius  : var(--radius-sm);
  font-family    : var(--font);
  font-size      : .92rem;
  font-weight    : 700;
  color          : #fff;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  transition     : all var(--transition);
  box-shadow     : 0 4px 20px rgba(99,102,241,.35);
  margin-top     : 4px;
}
.btn-login:hover:not(:disabled) {
  transform : translateY(-1px);
  box-shadow: 0 8px 28px rgba(99,102,241,.5);
}
.btn-login:active { transform: translateY(0); }
.btn-login:disabled { opacity: .65; cursor: not-allowed; }

/* Spinner inside button */
.btn-spinner {
  width : 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.login-footer {
  margin-top : 24px;
  text-align : center;
  font-size  : .72rem;
  color      : var(--text-muted);
}

/* ── User menu (header) ──────────────────────────────────────── */
.user-menu {
  display    : flex;
  align-items: center;
  gap        : 10px;
}

.user-label {
  display    : flex;
  align-items: center;
  gap        : 6px;
  font-size  : .8rem;
  color      : var(--text-secondary);
}
.user-label svg { width: 14px; height: 14px; stroke: currentColor; }

.btn-logout {
  display    : inline-flex;
  align-items: center;
  gap        : 6px;
  padding    : 7px 13px;
  background : rgba(244,63,94,.12);
  border     : 1px solid rgba(244,63,94,.22);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size  : .78rem;
  font-weight: 600;
  color      : var(--rose-400);
  cursor     : pointer;
  transition : all var(--transition);
  white-space: nowrap;
}
.btn-logout svg { width: 13px; height: 13px; stroke: currentColor; }
.btn-logout:hover {
  background: rgba(244,63,94,.22);
  border-color: rgba(244,63,94,.4);
  transform : translateY(-1px);
}

/* Responsive login */
@media (max-width: 480px) {
  .login-card { padding: 30px 20px 24px; margin: 16px; }
  .user-label { display: none; }
}