:root {
  --bg: #0b0d12;
  --card: rgba(10,12,20,.55);
  --stroke: #21263a;
  --accent: #4f8cff;
  --fg: #e8e8ec;
  --muted: #9aa0a6;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #0b0d12; color: var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.app { height: 100%; width: 100%; }

/* Drawer */
#drawer {
  position: fixed; inset: 0 auto 0 0; width: 280px; max-width: 86vw;
  background: linear-gradient(180deg, rgba(8,10,16,.85), rgba(12,14,22,.65));
  backdrop-filter: saturate(120%) blur(10px);
  border-right: 1px solid var(--stroke);
  transform: translateX(-100%); transition: transform .28s ease;
  display: flex; flex-direction: column; z-index: 30;
}

#drawer.open { transform: translateX(0); }