:root{
  --glass: rgba(255,255,255,0.08);
  --glass-brd: rgba(255,255,255,0.18);
  --txt: #eef2ff;
  --muted: #a9b4d0;
  --indigo:#6366f1; --violet:#8b5cf6; --teal:#0891b2; --cyan:#22d3ee;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;}
body{
  min-height:100vh;color:var(--txt);
  background:linear-gradient(-45deg,#0b1020,#10233b,#0e3b3b,#241b4d);
  background-size:400% 400%;animation:bgShift 18s ease infinite;
}
@keyframes bgShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes slide-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.fade-in{animation:fade-in .5s ease}
.slide-up{animation:slide-up .5s ease}

/* Glass primitives */
.card,.sidebar,.panel .glass,.kpi,.chart-box,.toast{
  background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-brd);border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.35);
}

/* Landing / login */
.center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;}
.card{padding:34px;width:100%;max-width:460px;text-align:center;animation:slide-up .5s ease;}
.brand-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px;}
.brand-row img{width:48px;height:48px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));}
.brand-row h1,.brand-row h2{font-size:20px;letter-spacing:.5px;}
.muted{color:var(--muted);}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;}
.role-btn{padding:30px 12px;border-radius:22px;text-decoration:none;color:#fff;font-weight:700;
  display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .18s, box-shadow .18s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 24px rgba(0,0,0,.4);}
.role-btn .ico{font-size:34px;}
.role-btn:hover{transform:translateY(-6px);}
.role-btn.oem{background:linear-gradient(135deg,var(--indigo),var(--violet));}
.role-btn.dealer{background:linear-gradient(135deg,var(--teal),var(--cyan));}

/* App layout */
.app{display:flex;min-height:100vh;}
.sidebar{width:240px;margin:14px;padding:16px;display:flex;flex-direction:column;gap:6px;height:calc(100vh - 28px);position:sticky;top:14px;}
.side-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;border-bottom:1px solid var(--glass-brd);margin-bottom:8px;}
.side-brand img{width:40px;height:40px;}
.side-brand span{font-weight:700;font-size:13px;line-height:1.2;}
.sidebar a{display:flex;align-items:center;gap:10px;padding:11px 12px;color:var(--muted);text-decoration:none;border-radius:12px;cursor:pointer;transition:background .15s,color .15s,transform .15s;font-size:14px;}
.sidebar a:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(3px);}
.sidebar a.active{background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;}
.main{flex:1;padding:24px;position:relative;overflow-x:auto;}
.main::before{content:'';position:absolute;inset:0;background:url('../assets/logo.svg') center/380px no-repeat;opacity:.05;pointer-events:none;z-index:0;}
.panel{position:relative;z-index:1;animation:fade-in .4s ease;}
.hidden{display:none;}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.hamburger{width:44px;height:44px;flex:0 0 44px;border-radius:14px;cursor:pointer;background:var(--glass);
  border:1px solid var(--glass-brd);color:#fff;font-size:20px;backdrop-filter:blur(18px);}
.app.collapsed .sidebar{display:none;}

/* Forms */
input,select,textarea{width:100%;padding:11px;border-radius:10px;font-size:15px;color:var(--txt);
  background:rgba(255,255,255,.06);border:1px solid var(--glass-brd);outline:none;}
input::placeholder,textarea::placeholder{color:var(--muted);}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.2);}
select option{color:#111;}
input:disabled{opacity:.55;}
.form-row{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:10px;margin:9px 0;}
.form-row>label{color:var(--muted);text-align:right;font-size:14px;font-weight:600;}
button{width:100%;padding:12px;border-radius:12px;font-size:15px;font-weight:600;border:none;cursor:pointer;
  color:#fff;transition:transform .15s,box-shadow .15s;}
button:hover{transform:translateY(-2px);}
button.primary{background:linear-gradient(135deg,var(--indigo),var(--violet));box-shadow:0 8px 20px rgba(99,102,241,.4);}
button.teal{background:linear-gradient(135deg,var(--teal),var(--cyan));}
button.danger{background:linear-gradient(135deg,#ef4444,#dc2626);}
button.ghost{background:rgba(255,255,255,.08);border:1px solid var(--glass-brd);width:auto;padding:10px 16px;}

/* Chassis blocks */
.chassis-blocks{display:flex;gap:10px;}
.chassis-blocks input{width:52px;height:56px;text-align:center;font-size:22px;font-weight:700;border-radius:12px;}

/* Tables */
table{width:100%;border-collapse:collapse;margin-top:12px;}
th,td{padding:10px;border-bottom:1px solid rgba(255,255,255,.12);text-align:left;font-size:13px;white-space:nowrap;}
th{color:var(--cyan);text-transform:uppercase;letter-spacing:.4px;font-size:12px;}
td input{padding:6px;font-size:12px;}

/* Toast */
.toast{position:fixed;top:20px;right:20px;padding:15px 22px;color:#fff;z-index:999;
  background:linear-gradient(135deg,#ef4444,#dc2626);animation:shake .5s, fade-in .3s;border-radius:14px;font-weight:600;}
.toast.ok{background:linear-gradient(135deg,#16a34a,#22c55e);animation:fade-in .3s;}

/* Dashboard */
.dash-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px;}
.dash-toolbar .last-updated{color:var(--muted);font-size:13px;margin-left:auto;}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
.kpi{padding:20px;transition:transform .18s;}
.kpi:hover{transform:translateY(-5px);}
.kpi h3{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.kpi .num{font-size:34px;font-weight:800;margin-top:8px;
  background:linear-gradient(135deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.chart-box{padding:18px;}
.chart-box h3{font-size:15px;margin-bottom:10px;}
.note{color:var(--muted);font-size:13px;margin:8px 0;}

/* Responsive */
@media (max-width:768px){
  .app{flex-direction:column;}
  .sidebar{width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;margin:10px;}
  .sidebar a{flex:1;justify-content:center;padding:10px 8px;font-size:12px;}
  .side-brand{width:100%;}
  .role-grid{grid-template-columns:1fr;}
  .kpi-grid{grid-template-columns:1fr 1fr;}
  .chart-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .form-row>label{text-align:left;}
}

/* Floating unhide button (only visible when sidebar is collapsed) */

.nav-toggle {

  display: none;

  width: 48px;

  height: 48px;

  font-size: 20px;

  margin-bottom: 16px;

  border-radius: 14px;

  background: rgba(255,255,255,0.12);

  backdrop-filter: blur(18px);

  border: 1px solid rgba(255,255,255,0.18);

  color: #fff;

  cursor: pointer;

  transition: transform .15s;

}

.nav-toggle:hover { transform: translateY(-2px); }


/* when sidebar is hidden, reveal the floating toggle */

.app.collapsed .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }