/* Клиентска зона 0to1 Method — цветове и шрифтове като на 0to1method.com */
:root {
  --bg: #f8f7f4; --card: #ffffff; --ink: #0f1923; --navy: #1e2e3b; --muted: #6b8090; --line: #00000014;
  --accent: #2e8b76; --accent-2: #1a5a4e; --accent-soft: #e0f0ec; --mint: #9fe1cb; --bad: #c8372d; --bad-soft: #fbe9e7; --warn: #8a5a00; --warn-soft: #fff4e0;
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 1px 2px #0f19230d, 0 8px 24px #0f19230f;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f1923; --card: #172532; --ink: #eef2f4; --navy: #d8e1e7; --muted: #93a6b4; --line: #ffffff17;
  --accent: #4fb89f; --accent-2: #9fe1cb; --accent-soft: #1d3a37; --bad: #e5574c; --bad-soft: #3a1c1a; --warn: #f3cf8a; --warn-soft: #3a2c12;
  --shadow: 0 1px 2px #0006, 0 8px 24px #0005; color-scheme: dark } }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
a { color: var(--accent-2); }

.top { display: flex; align-items: center; gap: 12px; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); }
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.brand b { font: 500 22px/1.15 var(--display); }
.brand b em { color: var(--accent); }
.top .sp { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 100px; padding: 2px; background: var(--card); }
.seg button { border: 0; background: none; padding: 4px 11px; border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--navy); color: var(--bg); }

.wrap { max-width: 980px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 20px; }
h1 { margin: 0; font: 500 32px/1.15 var(--display); letter-spacing: -.01em; text-wrap: balance; }
h1 em { color: var(--accent); }
h2 { margin: 0; font: 500 22px/1.2 var(--display); }
.muted { color: var(--muted); }
.card { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 100px; padding: 10px 18px; font-weight: 600; background: var(--navy); color: var(--bg); text-decoration: none; }
.btn.light { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn.accent { background: var(--accent); color: #fff; }
.btn.danger { background: var(--bad-soft); color: var(--bad); }
.btn[disabled] { opacity: .5; cursor: default; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.field small { color: var(--muted); font-size: 12px; }
.note { border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.note.bad { background: var(--bad-soft); color: var(--bad); }
.note.warn { background: var(--warn-soft); color: var(--warn); }
.note.ok { background: var(--accent-soft); color: var(--accent-2); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent-2); white-space: nowrap; }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }