:root {
  --bg: #f2f2f7;
  --surface: #ffffff;
  --text: #000000;
  --text-dim: #8e8e93;
  --text-faint: #a0a0a6;
  --accent: #007aff;
  --danger: #ff3b30;
  --ok: #34c759;
  --field-bg: rgba(118, 118, 128, 0.12);
  --separator: rgba(60, 60, 67, 0.2);
  --card-radius: 20px;
  --field-radius: 12px;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --text: #ffffff;
    --text-dim: #8e8e93;
    --text-faint: #6c6c70;
    --field-bg: rgba(118, 118, 128, 0.24);
    --separator: rgba(84, 84, 88, 0.55);
  }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overscroll-behavior: none;
}

.bg { display: none; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.auth__card,
.lang,
.settings,
.edit,
.app__content {
  animation: screen-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .auth__card,
  .lang,
  .settings,
  .edit,
  .app__content { animation: none; }
}