*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);background:var(--bg);color:var(--tx);
  min-height:100vh;overflow-x:hidden;
  background-image:var(--grain);
  transition:background .3s,color .3s;
}

/* ── LAYOUT ── */
.app{display:flex;min-height:100vh}

/* ── SIDEBAR ── */
.sb{
  width:220px;min-height:100vh;background:var(--s);
  border-right:1px solid var(--bd);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;flex-shrink:0;
  transition:background .3s,border-color .3s;
}
.sb-logo{
  padding:24px 18px 18px;padding-top:calc(24px + env(safe-area-inset-top));
  border-bottom:1px solid var(--bd);
  position:relative;overflow:hidden;
}
.sb-logo::before{
  content:'';position:absolute;top:-30px;right:-30px;
  width:100px;height:100px;
  background:radial-gradient(circle,var(--acd) 0%,transparent 70%);
  pointer-events:none;
}
.sb-brand{
  font-family:var(--disp);font-size:28px;font-weight:900;
  letter-spacing:-0.5px;line-height:1;
  color:var(--tx);
}
.sb-brand span{color:var(--ac)}
.sb-tagline{font-size:10px;color:var(--tx3);letter-spacing:3px;text-transform:uppercase;margin-top:4px}
.sb-nav{padding:14px 10px;flex:1}
.sb-sec{
  font-family:var(--disp);font-size:11px;font-weight:700;color:var(--tx3);
  letter-spacing:3px;text-transform:uppercase;
  padding:12px 10px 5px;
}
.nb{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:var(--rs);border:none;background:none;
  cursor:pointer;color:var(--tx2);font-family:var(--body);font-size:13px;font-weight:500;
  transition:all .15s;text-align:left;position:relative;
}
.nb:hover{background:var(--s2);color:var(--tx)}
.nb.on{
  background:var(--ac);color:#fff;font-weight:600;
}
.nb.on .ni{filter:grayscale(1) brightness(10)}
.nb .ni{font-size:15px;width:20px;text-align:center;flex-shrink:0;transition:transform .15s}
.nb:hover .ni{transform:scale(1.15)}
.nb .pill{
  margin-left:auto;background:var(--rd);color:#fff;
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:20px;
  animation:pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge{0%,100%{opacity:1}50%{opacity:.6}}
.sb-cars{padding:8px 10px 16px;border-top:1px solid var(--bd)}
.sbclbl{font-family:var(--disp);font-size:11px;font-weight:700;color:var(--tx3);letter-spacing:3px;text-transform:uppercase;padding:0 8px 8px}
.cpill{
  display:flex;align-items:center;gap:8px;padding:7px 10px;
  border-radius:var(--rs);cursor:pointer;color:var(--tx2);font-size:13px;
  transition:all .15s;font-weight:500;
}
.cpill:hover{background:var(--s2);color:var(--tx)}
.cpill.on{background:var(--s3);color:var(--tx)}
.cdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:transform .15s}
.cpill:hover .cdot{transform:scale(1.4)}

/* ── USER BLOCK (bottom of sidebar) ── */
.sb-user{
  padding:12px 14px;border-top:1px solid var(--bd);
  display:flex;align-items:center;gap:10px;
}
.sb-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--ac);color:#000;
  font-family:var(--disp);font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sb-user-info{flex:1;min-width:0}
.sb-user-name{font-size:12px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-email{font-size:10px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-logout{
  flex-shrink:0;border:none;background:none;cursor:pointer;
  color:var(--tx3);font-size:15px;padding:4px;border-radius:var(--rs);
  transition:all .15s;line-height:1;
}
.sb-logout:hover{background:var(--rdd);color:var(--rd)}

/* ── THEME TOGGLE ── */
.theme-toggle{
  margin:0 10px 14px;
  display:flex;background:var(--s2);border:1px solid var(--bd);
  border-radius:20px;padding:3px;
}
.tt-btn{
  flex:1;padding:5px;border:none;background:none;cursor:pointer;
  border-radius:16px;font-size:13px;transition:all .2s;color:var(--tx2);
}
.tt-btn.on{background:var(--ac);color:#fff;}

/* ── TOPBAR ── */
.topbar{
  padding:14px 28px;padding-top:calc(14px + env(safe-area-inset-top));
  border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--s);position:sticky;top:0;z-index:20;
  backdrop-filter:blur(12px);
  transition:background .3s;
}
.ptitle{
  font-family:var(--disp);font-size:22px;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;
}
.tbr{display:flex;gap:8px;align-items:center}
.ct{padding:24px 28px}