* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, Segoe UI, sans-serif; background: #f3f4f6; color:#1f2937; }
.screen { display: none; } .screen.active { display: block; }
.view { display: none; padding: 24px; } .view.active { display: block; }

#auth-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#7c3aed,#1e40af); }
.auth-card { background:#fff; padding:32px; border-radius:16px; width:420px; }
.auth-card h1 { text-align:center; margin-bottom:20px; color:#7c3aed; }
.auth-card input { width:100%; padding:12px; margin-bottom:12px; border:1px solid #d1d5db; border-radius:8px; }

header { background:#1e293b; color:#fff; padding:12px 20px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.brand { font-weight:700; }
nav { display:flex; gap:4px; flex-wrap:wrap; }
.nav-btn { background:transparent; color:#cbd5e1; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; font-size:14px; }
.nav-btn.active { background:#7c3aed; color:#fff; }
.user-info { margin-left:auto; display:flex; gap:12px; align-items:center; }

.row { display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; align-items:center; }
.row input, .row select { padding:8px; border:1px solid #d1d5db; border-radius:6px; }
textarea { width:100%; padding:8px; border:1px solid #d1d5db; border-radius:6px; margin:6px 0; min-height:60px; }

.primary { background:#7c3aed; color:#fff; padding:10px 16px; border:none; border-radius:6px; cursor:pointer; font-weight:600; }
.secondary { background:#e5e7eb; color:#1f2937; padding:8px 12px; border:none; border-radius:6px; cursor:pointer; }
.danger { background:#dc2626; color:#fff; padding:6px 12px; border:none; border-radius:6px; cursor:pointer; }
.success { background:#16a34a; color:#fff; padding:6px 12px; border:none; border-radius:6px; cursor:pointer; }

.data-table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; margin:12px 0; }
.data-table th,.data-table td { padding:10px; text-align:left; border-bottom:1px solid #e5e7eb; }
.data-table th { background:#f9fafb; font-weight:600; }

.card { background:#fff; padding:16px; border-radius:8px; margin:8px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.stat { background:#fff; padding:20px; border-radius:10px; text-align:center; }
.stat .num { font-size:32px; font-weight:700; color:#7c3aed; }
.stat .lbl { color:#6b7280; font-size:14px; }

.temp-pw { background:#fef3c7; padding:8px; border-radius:6px; font-family:monospace; font-weight:700; margin:4px 0; }

hr { margin:24px 0; border:0; border-top:1px solid #e5e7eb; }