:root {
  --bg: #272022; 
  --bg2: #141212; 
  --bg3: #141414;
  --border: #222222; 
  --border2: #333333;
  --text: #bdbdbd;
  --muted: #888888; 
  --muted2: #555555;
  --accent: #bdbdbd;
  --red: #e05050; 
  --green: #4ade80;
  --font: 'Roboto', sans-serif;
  --nav-h: 62px; 
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

svg { 
  width: 18px; height: 18px; 
  stroke: currentColor; fill: none; 
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; 
  flex-shrink: 0; vertical-align: middle; 
}

.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

@media(min-width: 769px) {
  body { font-size: 16px; }
  svg { width: 22px; height: 22px; }
  .icon-sm { width: 18px; height: 18px; }
  .icon-lg { width: 28px; height: 28px; }
}