<div class="accent-demo">
  <p class="accent-title">accent-color: #6366f1 — одна властивість для всіх</p>
  <div class="accent-grid">
    <label class="accent-item">
      <input type="checkbox" checked> Checkbox checked
    </label>
    <label class="accent-item">
      <input type="checkbox"> Checkbox unchecked
    </label>
    <label class="accent-item">
      <input type="radio" name="r1" checked> Radio checked
    </label>
    <label class="accent-item">
      <input type="radio" name="r1"> Radio unchecked
    </label>
    <label class="accent-item accent-item--full">
      <span>Range slider</span>
      <input type="range" value="65">
    </label>
    <label class="accent-item accent-item--full">
      <span>Progress</span>
      <progress value="65" max="100"></progress>
    </label>
  </div>
  <div class="accent-compare">
    <div class="accent-block a1">
      <p>accent-color: #6366f1</p>
      <input type="checkbox" checked>
      <input type="radio" checked name="r2">
      <input type="range" value="50">
    </div>
    <div class="accent-block a2">
      <p>accent-color: #10b981</p>
      <input type="checkbox" checked>
      <input type="radio" checked name="r3">
      <input type="range" value="50">
    </div>
    <div class="accent-block a3">
      <p>accent-color: #ec4899</p>
      <input type="checkbox" checked>
      <input type="radio" checked name="r4">
      <input type="range" value="50">
    </div>
  </div>
</div>

.accent-demo {
  padding: 1rem;
  background: #f8fafc;
  font-family: system-ui, sans-serif;
  font-size: 0.875rem;
  color: #1e293b;
  accent-color: #6366f1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.accent-title { margin: 0; font-weight: 700; color: #64748b; }
.accent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.accent-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e2e8f0;
  cursor: pointer;
}
.accent-item input { width: 1rem; height: 1rem; }
.accent-item--full { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.accent-item--full input, .accent-item--full progress { width: 100%; }

.accent-compare { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.accent-block {
  flex: 1;
  min-width: 100px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}
.accent-block p { margin: 0; font-size: 0.72rem; color: #64748b; font-weight: 700; }
.accent-block input { width: 100%; }
.a1 { accent-color: #6366f1; }
.a2 { accent-color: #10b981; }
.a3 { accent-color: #ec4899; }

<div class="focus-demo">
  <p class="fd-label">Спробуйте Tab та клік мишею — побачите різницю:</p>
  <div class="focus-grid">
    <div class="focus-field">
      <label>:focus (завжди)</label>
      <input class="fi-always" type="text" placeholder="Клік або Tab...">
    </div>
    <div class="focus-field">
      <label>:focus-visible (тільки Tab)</label>
      <input class="fi-visible" type="text" placeholder="Клік або Tab...">
    </div>
    <div class="focus-field focus-within-demo">
      <label>Контейнер з :focus-within</label>
      <input type="text" placeholder="Клацніть сюди...">
    </div>
  </div>
</div>

.focus-demo {
  padding: 1rem;
  background: #f8fafc;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: #1e293b;
}
.fd-label { margin: 0 0 0.75rem; color: #64748b; font-style: italic; }
.focus-grid { display: flex; flex-direction: column; gap: 0.6rem; }
.focus-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.focus-field label { font-size: 0.78rem; font-weight: 600; color: #374151; }
.focus-field input {
  padding: 0.5rem 0.75rem;
  border: 1.5px solid #d1d5db;
  border-radius: 7px;
  font-size: 0.9rem;
  font-family: inherit;
  background: white;
  color: #1e293b;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* :focus — спрацьовує ЗАВЖДИ */
.fi-always:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* :focus-visible — тільки при навігації клавіатурою */
.fi-visible:focus-visible {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
/* .fi-visible:focus залишається без кастомного стилю — чистий клік */

/* :focus-within на контейнері */
.focus-within-demo {
  background: white;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  transition: border-color 0.15s, background 0.15s;
}
.focus-within-demo:focus-within {
  border-color: #ec4899;
  background: #fdf2f8;
}
.focus-within-demo:focus-within label {
  color: #ec4899;
}
.focus-within-demo label { transition: color 0.15s; }
.focus-within-demo input {
  border: none;
  padding: 0.25rem 0;
  background: transparent;
  width: 100%;
}

<div class="state-demo">
  <div class="state-row">
    <label class="toggle-label">
      <input type="checkbox" class="toggle-cb">
      <span class="toggle-track"><span class="toggle-thumb"></span></span>
      <span class="toggle-text">Сповіщення</span>
    </label>
  </div>
  <div class="state-row">
    <div class="placeholder-field">
      <input type="text" placeholder="Введіть щось..." class="ph-input">
      <label class="ph-label">Ваше ім'я</label>
    </div>
  </div>
  <div class="state-row">
    <input class="ro-input" type="text" value="Тільки для читання" readonly>
    <input class="rw-input" type="text" value="Можна редагувати">
  </div>
</div>

.state-demo {
  padding: 1rem;
  background: #f8fafc;
  font-family: system-ui, sans-serif;
  font-size: 0.875rem;
  color: #1e293b;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.state-row { display: flex; flex-direction: column; gap: 0.4rem; }

/* Toggle switch через :checked */
.toggle-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.toggle-cb { display: none; }
.toggle-track {
  width: 44px; height: 24px;
  background: #d1d5db;
  border-radius: 100px;
  position: relative;
  transition: background 0.25s;
  flex-shrink: 0;
}
.toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.25s;
}
.toggle-cb:checked + .toggle-track {
  background: #6366f1;
}
.toggle-cb:checked + .toggle-track .toggle-thumb {
  transform: translateX(20px);
}
.toggle-text { font-size: 0.9rem; color: #374151; }

/* Floating label через :placeholder-shown */
.placeholder-field { position: relative; }
.ph-input {
  width: 100%;
  padding: 1.25rem 0.75rem 0.4rem;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  background: white;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.ph-input::placeholder { color: transparent; }
.ph-label {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  font-size: 0.9rem;
  color: #9ca3af;
  pointer-events: none;
  transition: all 0.15s ease;
  transform-origin: left top;
}
/* Коли поле порожнє — label великий (placeholder видно) */
.ph-input:placeholder-shown + .ph-label {
  top: 0.75rem;
  font-size: 0.9rem;
  color: #9ca3af;
}
/* Коли є текст або фокус — label маленький вгорі */
.ph-input:not(:placeholder-shown) + .ph-label,
.ph-input:focus + .ph-label {
  top: 0.3rem;
  font-size: 0.68rem;
  color: #6366f1;
  font-weight: 600;
}
.ph-input:focus { border-color: #6366f1; }

/* :read-only vs :read-write */
.ro-input, .rw-input {
  padding: 0.5rem 0.75rem;
  border: 1.5px solid;
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.ro-input {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}
.ro-input:read-only { background: #f1f5f9; }
.rw-input {
  border-color: #d1d5db;
  background: white;
  color: #1e293b;
}
.rw-input:read-write:focus { border-color: #6366f1; }

<form class="validation-demo" novalidate>
  <div class="vd-row">
    <label>:invalid (моментально після завантаження)</label>
    <input class="vd-invalid-always" type="email" required placeholder="email@example.com">
    <span class="vd-msg vd-msg--err">Невалідний email</span>
    <span class="vd-msg vd-msg--ok">✓ Валідний email</span>
  </div>
  <div class="vd-row">
    <label>:user-invalid (тільки після взаємодії)</label>
    <input class="vd-user-invalid" type="email" required placeholder="email@example.com">
    <span class="vd-msg vd-msg--err">Введіть правильний email</span>
    <span class="vd-msg vd-msg--ok">✓ Чудово!</span>
  </div>
  <div class="vd-row">
    <label>:in-range / :out-of-range (число від 1 до 10)</label>
    <input class="vd-range-input" type="number" min="1" max="10" value="5">
    <span class="vd-msg vd-msg--err">Поза діапазоном 1–10</span>
    <span class="vd-msg vd-msg--ok">✓ В межах діапазону</span>
  </div>
</form>

.validation-demo {
  padding: 1rem;
  background: #f8fafc;
  font-family: system-ui, sans-serif;
  font-size: 0.875rem;
  color: #1e293b;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.vd-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.vd-row label { font-size: 0.78rem; font-weight: 600; color: #374151; }

.vd-invalid-always,
.vd-user-invalid,
.vd-range-input {
  padding: 0.5rem 0.75rem;
  border: 1.5px solid #d1d5db;
  border-radius: 7px;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  background: white;
  transition: border-color 0.15s, background 0.15s;
}

.vd-msg { font-size: 0.75rem; display: none; }
.vd-msg--err { color: #ef4444; }
.vd-msg--ok  { color: #10b981; }

/* :invalid — одразу, незалежно від взаємодії */
.vd-invalid-always:invalid {
  border-color: #ef4444;
  background: #fff5f5;
}
.vd-invalid-always:invalid ~ .vd-msg--err { display: block; }
.vd-invalid-always:valid { border-color: #10b981; background: #f0fdf4; }
.vd-invalid-always:valid ~ .vd-msg--ok   { display: block; }

/* :user-invalid — тільки після взаємодії */
.vd-user-invalid:user-invalid {
  border-color: #ef4444;
  background: #fff5f5;
}
.vd-user-invalid:user-invalid ~ .vd-msg--err { display: block; }
.vd-user-invalid:user-valid { border-color: #10b981; background: #f0fdf4; }
.vd-user-valid:user-valid ~ .vd-msg--ok { display: block; }

/* :in-range / :out-of-range */
.vd-range-input:in-range { border-color: #10b981; background: #f0fdf4; }
.vd-range-input:in-range ~ .vd-msg--ok  { display: block; }
.vd-range-input:out-of-range { border-color: #ef4444; background: #fff5f5; }
.vd-range-input:out-of-range ~ .vd-msg--err { display: block; }

<form class="has-form">
  <div class="hf-group">
    <label class="hf-label">Email</label>
    <input type="email" required placeholder="your@email.com" class="hf-input">
  </div>
  <div class="hf-group">
    <label class="hf-label">Пароль</label>
    <input type="password" minlength="8" required placeholder="Мінімум 8 символів" class="hf-input">
  </div>
  <div class="hf-group">
    <label class="hf-label">
      <input type="checkbox" required class="hf-cb">
      Я погоджуюся з умовами
    </label>
  </div>
  <button type="submit" class="hf-submit">Зареєструватися</button>
</form>

.has-form {
  padding: 1.25rem;
  background: white;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  font-family: system-ui, sans-serif;
  font-size: 0.875rem;
  color: #1e293b;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 360px;
  margin: 0 auto;

  /* Форма підсвічується червоним якщо є :user-invalid поля */
  &:has(input:user-invalid) {
    border-color: #fca5a5;
    background: #fff8f8;
  }

  /* Форма стає зеленою коли всі поля валідні */
  &:has(input:valid):not(:has(input:invalid)) {
    border-color: #86efac;
    background: #f0fdf4;
  }
}

.hf-group { display: flex; flex-direction: column; gap: 0.3rem; }

.hf-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.15s;

  /* Label підсвічується коли вкладений input у фокусі */
  &:has(input:focus),
  &:has(+ .hf-input:focus) {
    color: #6366f1;
  }
}

.hf-input {
  padding: 0.5rem 0.75rem;
  border: 1.5px solid #d1d5db;
  border-radius: 7px;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  background: white;
  transition: all 0.15s;

  &:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
  &:user-valid   { border-color: #10b981; background: #f0fdf4; }
  &:user-invalid { border-color: #ef4444; background: #fff5f5; }
}

.hf-cb { accent-color: #6366f1; width: 1rem; height: 1rem; }

.hf-submit {
  padding: 0.6rem;
  background: #6366f1;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  margin-top: 0.25rem;

  &:hover { background: #4f46e5; }
}