:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #22252f;
  --border: #2a2d3a;
  --text: #e4e4e7;
  --text-dim: #9ca3af;
  --accent: #6366f1;
  --accent-glow: rgba(99,102,241,.15);
  --green: #22c55e;
  --red: #ef4444;
  --amber: #f59e0b;
  --teal: #14b8a6;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
#app { min-height: 100vh; }

/* Password Gate */
.login-wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem; }
.login-card { background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:2.5rem; width:100%; max-width:380px; text-align:center; }
.login-card .lock { font-size:2.5rem; margin-bottom:.5rem; }
.login-card h1 { font-size:1.5rem; font-weight:600; margin-bottom:.25rem; }
.login-card .subtitle { color:var(--text-dim); font-size:.875rem; margin-bottom:1.5rem; }
.login-card input { width:100%; padding:.75rem 1rem; background:var(--surface2); border:1px solid var(--border); border-radius:.5rem; color:var(--text); font-size:1rem; outline:none; transition:border .2s; }
.login-card input:focus { border-color:var(--accent); }
.login-card input.shake { animation: shake .4s; border-color:var(--red); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.login-card button { width:100%; padding:.75rem; margin-top:1rem; background:var(--accent); border:none; border-radius:.5rem; color:#fff; font-size:1rem; font-weight:600; cursor:pointer; transition:opacity .2s; }
.login-card button:hover { opacity:.9; }
.login-card .error { color:var(--red); font-size:.8rem; margin-top:.75rem; min-height:1.2em; }

/* Portal */
.portal-wrap { min-height:100vh; display:flex; flex-direction:column; }
.portal-header { display:flex; justify-content:space-between; align-items:center; padding:1.25rem 1.5rem; border-bottom:1px solid var(--border); }
.portal-header h1 { font-size:1.25rem; font-weight:600; }
.portal-header .logout { background:none; border:1px solid var(--border); color:var(--text-dim); padding:.4rem .75rem; border-radius:.375rem; cursor:pointer; font-size:.8rem; }
.portal-header .logout:hover { color:var(--text); border-color:var(--text-dim); }
.portal-grid { flex:1; display:flex; align-items:center; justify-content:center; gap:1.5rem; padding:2rem; flex-wrap:wrap; }
.portal-card { background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:2.5rem 2rem; width:280px; text-align:center; cursor:pointer; transition:all .25s; }
.portal-card:hover { border-color:var(--accent); transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.portal-card .icon { font-size:3rem; margin-bottom:.75rem; }
.portal-card h2 { font-size:1.2rem; font-weight:600; margin-bottom:.25rem; }
.portal-card p { color:var(--text-dim); font-size:.85rem; line-height:1.4; }

/* Dashboard layout */
.dash-wrap { min-height:100vh; display:flex; flex-direction:column; }
.dash-header { display:flex; align-items:center; gap:.75rem; padding:1rem 1.5rem; border-bottom:1px solid var(--border); }
.dash-header .back { background:none; border:1px solid var(--border); color:var(--text-dim); padding:.35rem .6rem; border-radius:.375rem; cursor:pointer; font-size:.85rem; }
.dash-header .back:hover { color:var(--text); border-color:var(--text-dim); }
.dash-header h1 { font-size:1.15rem; font-weight:600; flex:1; }
.dash-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); padding:0 1.5rem; overflow-x:auto; }
.dash-tabs button { background:none; border:none; border-bottom:2px solid transparent; color:var(--text-dim); padding:.75rem 1rem; font-size:.85rem; cursor:pointer; white-space:nowrap; transition:all .2s; }
.dash-tabs button.active { color:var(--accent); border-bottom-color:var(--accent); }
.dash-tabs button:hover { color:var(--text); }
.dash-content { flex:1; padding:1.5rem; overflow-y:auto; }

/* Cards/panels */
.card { background:var(--surface); border:1px solid var(--border); border-radius:.75rem; padding:1.25rem; margin-bottom:1rem; }
.card h3 { font-size:.95rem; font-weight:600; margin-bottom:.75rem; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:1rem; }

/* Stat cards */
.stat { display:flex; flex-direction:column; }
.stat .label { font-size:.75rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.25rem; }
.stat .value { font-size:1.5rem; font-weight:700; }
.stat .delta { font-size:.8rem; margin-top:.15rem; }
.delta.good { color:var(--green); }
.delta.bad { color:var(--red); }
.delta.warn { color:var(--amber); }

/* Badge */
.badge { display:inline-block; padding:.15rem .5rem; border-radius:9999px; font-size:.7rem; font-weight:600; }
.badge.normal { background:rgba(34,197,94,.15); color:var(--green); }
.badge.high { background:rgba(239,68,68,.15); color:var(--red); }
.badge.low { background:rgba(245,158,11,.15); color:var(--amber); }
.badge.pending { background:rgba(99,102,241,.15); color:var(--accent); }
.badge.completed { background:rgba(34,197,94,.15); color:var(--green); }

/* Table */
.data-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.data-table th { text-align:left; color:var(--text-dim); font-weight:500; padding:.5rem .75rem; border-bottom:1px solid var(--border); font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; }
.data-table td { padding:.65rem .75rem; border-bottom:1px solid var(--border); }
.data-table tr:last-child td { border-bottom:none; }

/* Chart container */
.chart-container { position:relative; height:250px; margin-top:.5rem; }
.chart-container.small { height:180px; }

/* Explanations */
.explainer { font-size:.8rem; color:var(--text-dim); line-height:1.5; margin-top:.5rem; padding:.75rem; background:var(--surface2); border-radius:.5rem; }

/* Progress bar */
.progress-bar { height:6px; background:var(--surface2); border-radius:3px; overflow:hidden; margin-top:.35rem; }
.progress-bar .fill { height:100%; border-radius:3px; transition:width .5s; }

/* Timeline */
.timeline-item { display:flex; gap:.75rem; padding:.75rem 0; border-bottom:1px solid var(--border); }
.timeline-item:last-child { border-bottom:none; }
.timeline-dot { width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:.35rem; flex-shrink:0; }
.timeline-dot.done { background:var(--green); }
.timeline-dot.pending { background:var(--text-dim); }
.timeline-body h4 { font-size:.9rem; font-weight:500; }
.timeline-body .meta { font-size:.75rem; color:var(--text-dim); margin-top:.15rem; }

/* Loading */
.loading { display:flex; align-items:center; justify-content:center; padding:3rem; color:var(--text-dim); }
.spinner { width:24px; height:24px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite; margin-right:.75rem; }
@keyframes spin { to{transform:rotate(360deg)} }

/* Responsive */
@media (max-width:640px) {
  .portal-grid { flex-direction:column; align-items:stretch; padding:1rem; }
  .portal-card { width:100%; }
  .card-grid { grid-template-columns:1fr; }
  .dash-header { padding:.75rem 1rem; }
  .dash-content { padding:1rem; }
  .dash-tabs { padding:0 1rem; }
}