:root{
  --bg-0: #0E0B1C;
  --bg-1: #150F29;
  --glass: rgba(255,255,255,0.055);
  --glass-border: rgba(255,255,255,0.10);
  --text: #F3F1FA;
  --text-dim: #A79FC2;
  --text-faint: #6E6688;
  --violet: #9B8CFF;
  --violet-soft: #7A6CE0;
  --teal: #3FE0C5;
  --rose: #FF89A6;
  --amber: #FFC26B;
  --display: 'Space Grotesk', 'Inter', sans-serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --mono: 'Space Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } }

body{
  font-family: var(--sans); color: var(--text); min-height: 100vh; background: var(--bg-0);
  position: relative; overflow-x: hidden;
}
.mesh{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(600px 500px at 12% 8%, rgba(155,140,255,0.28), transparent 60%),
    radial-gradient(560px 480px at 90% 12%, rgba(63,224,197,0.16), transparent 60%),
    radial-gradient(700px 600px at 50% 105%, rgba(255,137,166,0.14), transparent 60%),
    var(--bg-0);
  filter: blur(40px);
}
::selection{ background: var(--violet); color: #0E0B1C; }

#login-view, #mfa-view{
  position: relative; z-index: 1; min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 24px;
}
#mfa-view{ display:none; }

.login-card{
  width: 100%; max-width: 400px; background: var(--glass); backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px); border: 1px solid var(--glass-border); border-radius: 28px;
  padding: 40px 34px 30px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  animation: rise .6s cubic-bezier(.19,1,.22,1) both;
}
@keyframes rise{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }

.orb-wrap{ width:64px; height:64px; margin: 0 auto 20px; position:relative; }
.orb-ring{
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg, var(--violet), var(--teal), var(--rose), var(--violet));
  animation: spin 6s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.orb-inner{ position:absolute; inset:4px; border-radius:50%; background: var(--bg-1); display:flex; align-items:center; justify-content:center; }
.orb-inner svg{ width:22px; height:22px; stroke: var(--text); }

.brand{ text-align:center; font-family: var(--display); font-weight:600; font-size: 13px; letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 10px; }
.login-title{ text-align:center; font-family: var(--display); font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.login-sub{ text-align:center; font-size: 13.5px; color: var(--text-dim); margin-bottom: 24px; line-height:1.55; }

.field{ margin-bottom: 13px; }
.field label{ display:block; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.field input, .field select{
  width:100%; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); border-radius: 12px;
  padding: 12px 14px; color: var(--text); font-size: 13.5px; font-family: var(--sans); outline:none;
}
.field input:focus{ border-color: var(--violet); }
.field input::placeholder{ color: var(--text-faint); }

.btn-primary{
  width:100%; background: linear-gradient(135deg, var(--violet), var(--violet-soft)); color: #0E0B1C; border:none;
  border-radius: 14px; padding: 13px; font-size: 14px; font-weight: 700; cursor:pointer; font-family: var(--sans);
  box-shadow: 0 10px 30px -8px rgba(155,140,255,0.5);
}
.btn-secondary{
  width:100%; background: transparent; border: 1px solid var(--glass-border); color: var(--text);
  border-radius: 12px; padding: 12px; font-size: 13.5px; font-weight: 600; cursor:pointer; font-family: var(--sans);
}

.error-text{ font-size: 12.5px; color: var(--rose); margin: 10px 0; min-height: 1em; }
.toggle-row{ text-align:center; font-size: 12.5px; color: var(--text-dim); margin-top: 18px; }
.toggle-row a{ color: var(--violet); cursor:pointer; text-decoration:none; }

.trust-row{ margin-top: 22px; display:flex; align-items:center; justify-content:center; gap: 16px; flex-wrap: wrap; }
.trust-item{ display:flex; align-items:center; gap:5px; font-size: 10.5px; color: var(--text-faint); font-family: var(--mono); }
.trust-item svg{ width:11px; height:11px; }

#app-view{ display:none; position:relative; z-index:1; min-height:100vh; }

.navbar{
  position: sticky; top: 14px; z-index: 5; margin: 14px 18px 0;
  display:flex; align-items:center; justify-content:space-between; padding: 10px 10px 10px 18px;
  background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border); border-radius: 20px; flex-wrap: wrap; gap: 10px;
}
.nav-left{ display:flex; align-items:center; gap:16px; }
.logo{ font-family: var(--display); font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; }
.logo .dot{ width:8px; height:8px; border-radius:50%; background: linear-gradient(135deg, var(--violet), var(--teal)); }
select.vehicle-select{
  background: rgba(255,255,255,0.05); border:1px solid var(--glass-border); color: var(--text);
  padding: 8px 12px; border-radius: 999px; font-size: 12.5px; font-family: var(--sans);
}
.nav-right{ display:flex; align-items:center; gap: 10px; }
.session-pill{
  display:flex; align-items:center; gap:6px; background: rgba(63,224,197,0.10); border: 1px solid rgba(63,224,197,0.28);
  color: var(--teal); font-size: 11px; padding: 6px 12px; border-radius: 999px; font-family: var(--mono);
}
.session-pill svg{ width:11px; height:11px; }
.signout-link{
  font-size:12px; color: var(--text-dim); cursor:pointer; border: 1px solid var(--glass-border);
  padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,0.03);
}
.signout-link:hover{ color: var(--rose); border-color: var(--rose); }

.content{ padding: 26px 18px 80px; max-width: 1180px; margin: 0 auto; }
.page-head{ margin-bottom: 20px; }
.page-head h1{ font-family: var(--display); font-size: 22px; font-weight: 700; }

.bento{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 800px){ .bento{ grid-template-columns: 1fr 1fr; } }
.stat-card{ background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; padding: 18px; }
.stat-label{ font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; }
.stat-value{ font-family: var(--mono); font-size: 21px; font-weight:700; }

.panel{ background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; overflow:hidden; margin-bottom: 20px; }
.panel-header{ display:flex; align-items:center; justify-content:space-between; padding: 16px 20px; border-bottom: 1px solid var(--glass-border); }
.panel-header h3{ font-family: var(--display); font-size: 14.5px; font-weight:600; }

.row{ display:grid; grid-template-columns: 90px 90px 1.6fr 1fr 90px; gap: 10px; padding: 12px 20px; align-items:center; border-bottom: 1px solid var(--glass-border); font-size: 13px; }
.row:last-child{ border-bottom:none; }
.row.head{ font-size: 10.5px; text-transform:uppercase; letter-spacing:0.05em; color: var(--text-faint); }
.cat-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:7px; background: var(--violet); }
.num{ font-family: var(--mono); } .dim{ color: var(--text-dim); }

.inline-form{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 16px 20px; }
@media (max-width: 900px){ .inline-form{ grid-template-columns: repeat(2, 1fr); } }
.inline-form input, .inline-form select{
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); border-radius: 10px;
  padding: 9px 10px; color: var(--text); font-size: 12.5px; font-family: var(--sans);
}
.inline-form button{
  grid-column: span 1; background: linear-gradient(135deg, var(--violet), var(--violet-soft)); border:none;
  color:#0E0B1C; border-radius: 10px; font-weight:700; font-size:12.5px; cursor:pointer;
}

.settings-panel{ padding: 18px 20px; }
.settings-panel p{ color: var(--text-dim); font-size: 13px; margin-bottom: 12px; line-height:1.6; }
#mfa-setup-panel{ display:none; margin-top: 14px; }
#mfa-setup-qr svg, #mfa-setup-qr img{ background:#fff; padding:10px; border-radius:10px; }