:root {
  --surface-0: #ffffff;
  --surface-1: #f5f6f8;
  --surface-2: #ffffff;
  --text-primary: #14161a;
  --text-secondary: #55585f;
  --text-muted: #8b8e96;
  --text-accent: #0095fd;
  --text-danger: #b3261e;
  --text-success: #1a7a3c;
  --text-warning: #a15c00;
  --bg-accent: #e6f4ff;
  --bg-warning: #fff4e0;
  --border: #e6e7eb;
  --border-strong: #d3d5db;
  --brand: #0095fd;
  --brand-dark: #0077cc;
  --radius: 8px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

#root { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }

button {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-primary);
  cursor: pointer;
}
button:hover { background: var(--surface-1); }
button:active { transform: scale(0.98); }
button:disabled { cursor: default; }

button.primary {
  background: var(--brand);
  color: #ffffff;
  border-color: var(--brand);
}
button.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

input, select, textarea {
  font-family: inherit;
}

a { color: var(--text-accent); }

::placeholder { color: var(--text-muted); }

.nav-tabs-desktop { display: flex; }
.mobile-menu-toggle { display: none; }
.nav-tabs-mobile-panel { display: none; }

@media (max-width: 720px) {
  .nav-tabs-desktop { display: none; }
  .mobile-menu-toggle { display: flex; }
  .nav-tabs-mobile-panel.open { display: flex; }
  #root { padding-left: 12px; padding-right: 12px; }
}