/* Палитра — единое место для смены цветов. Тот же подход, что и в wishlist-app. */
:root {
  --bg:  #0f0f0f;
  --sf:  #161616;
  --sf2: #1c1c1c;
  --br:  rgba(255,255,255,0.06);
  --br2: rgba(255,255,255,0.11);
  --tx:  #f0ede8;
  --tx2: rgba(240,237,232,0.5);
  --tx3: rgba(240,237,232,0.2);
  --ac:  #e8c84a;
  --adim:rgba(232,200,74,0.1);
  --abr: rgba(232,200,74,0.28);
  --gn:  #4ade80;
  --bl:  #63b3ed;
  --red: #f87171;

  --font:    'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Unbounded', var(--font);
  --mono:    'SF Mono', Consolas, monospace;
}

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

html { color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--abr); }

a { color: var(--bl); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.5px; }

.card {
  background: var(--sf);
  border: 1px solid var(--br);
  border-radius: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font: 500 13px/1 var(--font);
  color: var(--tx2);
  background: var(--sf2);
  border: 1px solid var(--br2);
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.btn:hover { color: var(--tx); border-color: rgba(255,255,255,.22); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.primary {
  background: var(--adim);
  color: var(--ac);
  border-color: var(--abr);
}
.btn.primary:hover { background: rgba(232,200,74,.16); border-color: rgba(232,200,74,.45); }
.btn.danger { color: var(--red); border-color: rgba(248,113,113,.25); background: transparent; }
.btn.danger:hover { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.4); }
.btn.sm { padding: 6px 11px; font-size: 12px; }

.input {
  font: 400 13px/1.4 var(--font);
  color: var(--tx);
  background: var(--sf2);
  border: 1px solid var(--br);
  border-radius: 9px;
  padding: 9px 12px;
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
.input:focus { border-color: var(--abr); }
.input::placeholder { color: var(--tx3); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--sf2);
  color: var(--tx2);
  border: 1px solid var(--br);
}
.badge.ok   { background: rgba(74,222,128,.08);  color: var(--gn);  border-color: rgba(74,222,128,.2); }
.badge.err  { background: rgba(248,113,113,.08); color: var(--red); border-color: rgba(248,113,113,.2); }
.badge.warn { background: var(--adim);           color: var(--ac);  border-color: var(--abr); }

.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--tx3);
}
.dot.ok   { background: var(--gn); animation: dot-breathe 2.6s ease-in-out infinite; }
.dot.err  { background: var(--red); }
.dot.warn { background: var(--ac); }
@keyframes dot-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.35); }
  50%      { box-shadow: 0 0 0 4px rgba(74,222,128,0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}