/*
 * Copyright (c) 2026 PsyGioX. Licensed under the MIT License.
 * Source: https://github.com/PsyGioX/PsyGioX-website — Site: https://psygiox-dev.vercel.app/
 *
 * Copyright (c) 2026 PsyGioX. Лицензия MIT.
 * Исходники: https://github.com/PsyGioX/PsyGioX-website — Сайт: https://psygiox-dev.vercel.app/
 */
/* ==========================================================================
   Инструменты (instruments/*.html и instruments/index.html): общая часть.
   Всё на токенах из site.css — цвета и шрифты меняются в :root, а не здесь.
   Страничные особенности (дерево JSON, diff, QR…) лежат в <style> самой страницы.
   ========================================================================== */

/* ---------- Макет ---------- */
.tool-container { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; padding: 36px 0 8px; }
.tool-container > * + * { margin-top: 24px; }
.hidden { display: none !important; }
.muted { color: var(--dim); }
.tool-container label:not(.checkbox-group):not(.btn):not(.drop), .card label:not(.checkbox-group):not(.btn):not(.drop) { display: block; margin: 0 0 6px; font-size: 12px; color: var(--dim); letter-spacing: 0.02em; }

/* ---------- Панели: мягкое «стекло» ---------- */
.tool-hero, .card, .tools-hero .hero-inner, .tools-card, .tool-tile {
  position: relative;
  background: var(--panel);
  border: 2px solid var(--white-border);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 34px -18px rgba(var(--shadow-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  transition: transform 0.35s var(--spring), border-color 0.25s, box-shadow 0.3s var(--ease);
}
.card:hover, .card:focus-within, .tool-tile:hover { border-color: rgba(var(--cyan-rgb), 0.3); }

.tool-hero { padding: clamp(22px, 4vw, 36px); }
.tool-hero h1 { margin-bottom: 12px; font-size: clamp(28px, 4.6vw, 42px); color: var(--star); }
.tool-hero p { max-width: 82ch; color: var(--dim); font-size: 15px; }
.tool-hero .hero-actions, .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.tool-hero .chips { margin-top: 18px; }

.card { padding: clamp(18px, 3vw, 28px); }
.card h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: clamp(18px, 2.4vw, 22px); color: var(--star); }
.card h2 .bi { color: var(--cyan); }
.card h3 { margin-bottom: 10px; font-size: 15px; color: var(--dim); }
.grid-2 { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.tool-grid { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; align-items: start; }
.tool-row { display: grid; gap: 12px; grid-template-columns: 2fr 2fr 1fr; }
.input-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.input-row .tool-input { flex: 1 1 200px; width: auto; }
@media (max-width: 860px) { .grid-2, .grid-3, .tool-grid, .tool-row { grid-template-columns: 1fr; } }

/* ---------- Поля ---------- */
.tool-input, .tool-select, .tool-textarea, .textarea-field, .result-textarea, .result-field { width: 100%; min-height: 46px; padding: 11px 14px; font-size: 14px; }
.tool-select { appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%) !important; background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50% !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; }
.tool-textarea, .textarea-field, .result-textarea { min-height: 220px; line-height: 1.6; font-size: 13px; resize: vertical; tab-size: 2; }
.textarea-field.error, .tool-input.error { border-color: var(--hot) !important; box-shadow: 0 0 0 1px var(--hot) !important; }
.textarea-field[readonly], .result-textarea[readonly] { color: var(--dim) !important; }
.result-field { display: flex; align-items: center; word-break: break-all; font-size: 18px; color: var(--cyan); background: rgba(var(--void-rgb), 0.75); border: 1px solid var(--line-mid); }
.card input[type="number"] { -moz-appearance: textfield; }
.card input[type="range"] { width: 100%; height: 22px; padding: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.card input[type="color"] { width: 46px; height: 46px; padding: 3px; background: transparent; border: 1px solid var(--line-mid); cursor: pointer; }
.checkbox-group { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; color: var(--star); font-size: 14px; cursor: pointer; }
.checkbox-group input { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.checkbox-group small { color: var(--faint); font-size: 12px; }
.options-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 14px 0 0; }
.options-bar .tool-select { width: auto; min-width: 160px; }
.hint { color: var(--dim); font-size: 13px; margin-bottom: 14px; }

/* ---------- Кнопки, чипы ---------- */
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.card .btn, .tool-hero .btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.btn .bi { font-size: 1.05em; }
.copy-btn, .icon-btn { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; font-size: 15px; }
.btn--danger { --c: var(--hot); --c-rgb: 255, 92, 159; }
.wa-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 16px; color: var(--ok); border: 1px solid rgba(var(--ok-rgb), 0.4); }
.wa-link:hover { text-decoration: none; background: rgba(var(--ok-rgb), 0.1); }

/* ---------- Статусы и бейджи ---------- */
.badge { display: inline-block; padding: 3px 10px; margin-bottom: 8px; font-size: 12px; color: var(--cyan); border: 1px solid var(--line-mid); }
.badge-valid, .badge-invalid { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 14px; }
.badge-valid { color: var(--ok); background: rgba(var(--ok-rgb), 0.12); border: 1px solid rgba(var(--ok-rgb), 0.35); }
.badge-invalid { color: var(--hot); background: rgba(var(--hot-rgb), 0.12); border: 1px solid rgba(var(--hot-rgb), 0.4); }
.status-panel { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; border: 1px solid var(--line-dim); }
.status-panel.info { color: var(--dim); }
.status-panel.valid { color: var(--ok); border-color: rgba(var(--ok-rgb), 0.35); background: rgba(var(--ok-rgb), 0.07); }
.status-panel.error { color: var(--hot); border-color: rgba(var(--hot-rgb), 0.45); background: rgba(var(--hot-rgb), 0.08); }
.status-panel.warn { color: var(--warn); border-color: rgba(var(--warn-rgb), 0.4); background: rgba(var(--warn-rgb), 0.07); }
.warning { padding: 10px 14px; margin-top: 12px; font-size: 13px; color: var(--warn); border: 1px solid rgba(var(--warn-rgb), 0.4); background: rgba(var(--warn-rgb), 0.07); }
.info-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 8px 0; font-size: 14px; border-bottom: 1px dashed var(--line-dim); }
.info-line strong { color: var(--dim); font-weight: 500; }

/* ---------- Статистика ---------- */
.stats-grid { display: grid; gap: 12px; margin-top: 20px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.stat-card { padding: 14px; text-align: center; border: 1px solid var(--line-dim); background: rgba(var(--void-rgb), 0.5); }
.stat-number { font-family: var(--f-display); font-size: 22px; font-weight: 700; color: var(--cyan); }
.stat-label { margin-top: 2px; font-size: 12px; color: var(--dim); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line-dim); }
.faq-item:last-child { border-bottom: 0; }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 14px 0; font-family: var(--f-display); font-size: 15px; font-weight: 600; text-align: left; color: var(--star); background: none; border: 0; }
.faq-question:hover { color: var(--cyan); }
.faq-question .arrow { flex: none; width: 9px; height: 9px; border: solid var(--cyan); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.2s; }
.faq-question[aria-expanded="true"] .arrow { transform: rotate(-135deg); }
.faq-answer { padding: 0 0 16px; color: var(--dim); font-size: 14px; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 400; max-width: min(92vw, 520px); padding: 12px 20px; font-size: 14px; color: var(--star); background: var(--space); border: 1px solid var(--line); box-shadow: 0 0 30px rgba(var(--cyan-rgb), 0.25); opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity 0.2s, transform 0.2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Вкладки ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 13px; }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: dialog-in 0.2s var(--ease); }

/* ---------- Подвал/кнопка «наверх» ---------- */
.tool-container + .toast + .footer-section, .footer-section { margin-top: 56px; }

/* ==========================================================================
   Каталог (instruments/index.html)
   ========================================================================== */
.tools-hero, .tools-wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.tools-hero { padding: 36px 0 24px; }
.tools-hero .hero-inner { padding: clamp(22px, 4vw, 40px); }
.tools-hero h1 { margin-bottom: 14px; font-size: clamp(30px, 5vw, 46px); }
.tools-hero p { max-width: 76ch; color: var(--dim); }
.tools-wrap { padding-bottom: 8px; }
.tools-card { padding: clamp(18px, 3vw, 32px); }
.tools-card h2 { margin-bottom: 8px; font-size: clamp(22px, 3vw, 28px); }
.section-lead { margin-bottom: 22px; color: var(--dim); }
.tools-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 26px; }
.tools-search .tool-input { flex: 1 1 260px; width: auto; }
.tool-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; font-family: var(--f-display); font-size: 13px; font-weight: 600; color: var(--star); background: transparent; border: 1px solid var(--line-mid); transition: border-color 0.2s, color 0.2s, background-color 0.2s; }
.tool-chip:hover { color: var(--cyan); border-color: var(--cyan); }
.tool-chip.is-active { color: var(--cyan); border-color: var(--cyan); background: rgba(var(--cyan-rgb), 0.12); box-shadow: 0 0 16px rgba(var(--cyan-rgb), 0.18); }
.tools-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.tool-tile { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.tool-tile:hover { transform: translateY(-6px) rotate(-0.4deg); box-shadow: 0 26px 44px -20px rgba(var(--shadow-rgb), 0.6), inset 0 1px 0 rgba(255,255,255,0.5); }
.tool-tile[hidden] { display: none; }
.tool-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.tool-title { margin-bottom: 6px; font-size: 18px; color: var(--star); }
.tool-desc { font-size: 13px; color: var(--dim); }
.tool-badge { flex: none; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; font-family: var(--f-display); font-size: 16px; font-weight: 700; color: var(--cyan); border: 1px solid var(--line-mid); background: rgba(var(--cyan-rgb), 0.07); }
.tool-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-meta span { padding: 1px 9px; font-size: 11px; color: var(--star); border: 1px solid var(--line-ion); background: rgba(var(--ion-rgb), 0.07); }
.tool-actions { margin-top: auto; padding-top: 4px; }
.tool-tile .btn { min-height: 42px; font-size: 14px; }
.tool-new { padding: 1px 8px; margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; vertical-align: middle; color: var(--on-pastel); background: var(--cyan); }
.tools-empty { padding: 28px; text-align: center; color: var(--dim); border: 1px dashed var(--line-mid); }
.tools-faq { margin-top: 24px; }
/* ==========================================================================
   Lo-fi: закругления, пастельные акценты, мягкие статусы
   ========================================================================== */
.tool-hero h1, .tools-hero h1 { font-weight: 900; letter-spacing: -0.02em; }
.result-field { border-radius: 16px; background: var(--field); border-width: 2px; }
.card input[type="color"] { border-radius: 14px; border-width: 2px; background: var(--field); }
.card input[type="range"] { accent-color: var(--ion); }
.wa-link { border-radius: 999px; color: var(--ok); border-width: 2px; }
.badge { padding: 3px 12px; font-weight: 800; color: var(--on-pastel); background: var(--p-lav); border: 0; border-radius: 999px; }
.badge-valid, .badge-invalid { border-radius: 999px; border-width: 2px; font-weight: 800; }
.status-panel { border-radius: var(--r-md); border-width: 2px; }
.warning { border-radius: var(--r-md); border-width: 2px; }
.stat-card { border-radius: var(--r-md); border-width: 2px; background: var(--panel); }
.stat-number { font-weight: 900; }
.info-line { border-bottom-width: 2px; }
.faq-question { font-weight: 800; }
.faq-question .arrow { border-width: 0 3px 3px 0; border-radius: 1px; }
.toast { border-radius: 999px; border: 2px solid var(--white-border); background: var(--space); box-shadow: 0 16px 30px -12px rgba(var(--shadow-rgb), 0.6); font-weight: 700; }
.tool-chip { border-radius: 999px; border-width: 2px; font-weight: 800; background: var(--glass); transition: transform 0.25s var(--spring), border-color 0.2s, background-color 0.2s, color 0.2s; }
.tool-chip:hover { transform: translateY(-2px); }
.tool-chip.is-active { color: var(--on-pastel); background: linear-gradient(135deg, var(--p-lav), var(--p-pink)); border-color: rgba(255,255,255,0.85); box-shadow: 0 3px 0 rgba(150,100,200,0.4); }
.tool-badge { border-radius: 16px; border: 0; font-weight: 900; color: var(--on-pastel); background: var(--p-lav); }
.tool-tile:nth-child(5n + 2) .tool-badge { background: var(--p-pink); }
.tool-tile:nth-child(5n + 3) .tool-badge { background: var(--p-mint); }
.tool-tile:nth-child(5n + 4) .tool-badge { background: var(--p-butter); }
.tool-tile:nth-child(5n + 5) .tool-badge { background: var(--p-sky); }
.tool-meta span { padding: 1px 11px; font-weight: 700; color: var(--dim); background: rgba(var(--cyan-rgb), 0.1); border: 0; border-radius: 999px; }
.tool-new { color: var(--on-pastel); background: var(--p-butter); border-radius: 999px; padding: 1px 9px; letter-spacing: 0.04em; }
.tools-empty { border-radius: var(--r-lg); border-width: 3px; }
.tab-pane.active { animation: dialog-in 0.4s var(--spring); }
.tool-hero, .tools-hero .hero-inner { background-image: radial-gradient(60% 120% at 100% 0%, rgba(248, 180, 208, 0.28), transparent 70%); }

/* ==========================================================================
   Общие блоки новых инструментов: хэши, JWT, время, cron, текст, URL, chmod, подсети, meta-теги
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--f-mono); }
.tool-container .card + .card, .tool-container .tool-hero + .card { margin-top: 24px; }

/* Строки результата: подпись, значение, кнопка «копировать» */
.out-list { display: grid; gap: 10px; }
.out-row { display: grid; grid-template-columns: minmax(92px, 150px) minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 10px 12px 10px 16px; border: 2px solid var(--line-dim); border-radius: var(--r-md); background: var(--field); transition: border-color 0.2s, background-color 0.2s; }
.out-row.is-match { border-color: rgba(var(--ok-rgb), 0.6); background: rgba(var(--ok-rgb), 0.08); }
.out-row__k { font-size: 12px; font-weight: 800; color: var(--dim); }
.out-row__k small { display: block; margin-top: 2px; font-weight: 600; color: var(--faint); }
.out-row__v { min-width: 0; font-family: var(--f-mono); font-size: 13px; line-height: 1.5; color: var(--star); word-break: break-all; overflow-wrap: anywhere; user-select: all; }
.out-row__v.is-empty { color: var(--faint); user-select: none; }
.out-row .copy-btn { min-width: 38px; height: 38px; }
@media (max-width: 620px) { .out-row { grid-template-columns: minmax(0, 1fr) auto; } .out-row__k { grid-column: 1 / -1; } }

/* Статусные «таблетки» */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 13px; font-weight: 800; border-radius: 999px; border: 2px solid var(--line-mid); color: var(--dim); background: var(--field); }
.pill.ok { color: var(--ok); border-color: rgba(var(--ok-rgb), 0.45); background: rgba(var(--ok-rgb), 0.1); }
.pill.warn { color: var(--warn); border-color: rgba(var(--warn-rgb), 0.45); background: rgba(var(--warn-rgb), 0.1); }
.pill.bad { color: var(--hot); border-color: rgba(var(--hot-rgb), 0.45); background: rgba(var(--hot-rgb), 0.1); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.note-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.note-list li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 13px; font-size: 13px; border-radius: var(--r-sm); border: 2px solid var(--line-dim); background: var(--field); color: var(--dim); }
.note-list li.ok { color: var(--ok); border-color: rgba(var(--ok-rgb), 0.35); }
.note-list li.warn { color: var(--warn); border-color: rgba(var(--warn-rgb), 0.4); background: rgba(var(--warn-rgb), 0.06); }
.note-list li.bad { color: var(--hot); border-color: rgba(var(--hot-rgb), 0.4); background: rgba(var(--hot-rgb), 0.06); }
.note-list .bi { flex: none; margin-top: 2px; }

/* Переключатель-сегмент и компактные поля */
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; border: 2px solid var(--line-dim); background: var(--field); }
.seg button { min-height: 34px; padding: 0 14px; font-size: 13px; font-weight: 800; color: var(--dim); background: transparent; border: 0; border-radius: 999px; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.seg button[aria-pressed="true"] { color: var(--on-pastel); background: linear-gradient(135deg, var(--p-lav), var(--p-pink)); }
.field-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 14px; }
.field-grid .span-all { grid-column: 1 / -1; }
.code-box { margin: 0; padding: 14px 16px; overflow: auto; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.65; color: var(--code-ink); background: var(--code-bg); border-radius: var(--r-md); white-space: pre-wrap; word-break: break-word; }
.table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 2px solid var(--line-dim); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { padding: 9px 13px; text-align: left; vertical-align: top; border-bottom: 1px dashed var(--line-dim); }
.data-table th { font-size: 12px; font-weight: 800; color: var(--dim); background: var(--field); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td.mono, .data-table .mono { font-size: 12.5px; word-break: break-all; }
.drop { display: grid; place-items: center; gap: 6px; padding: 28px 18px; text-align: center; color: var(--dim); border: 3px dashed var(--line-mid); border-radius: var(--r-lg); background: var(--field); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.drop:hover, .drop.is-over, .drop:focus-within { border-color: var(--cyan); background: rgba(var(--cyan-rgb), 0.07); }
.drop .bi { font-size: 28px; color: var(--cyan); }
.drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.meter { height: 8px; overflow: hidden; border-radius: 999px; background: var(--line-dim); }
.meter > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ok); transition: width 0.25s var(--ease), background-color 0.2s; }
.meter.warn > i { background: var(--warn); }
.meter.bad > i { background: var(--hot); }
.related { display: flex; flex-wrap: wrap; gap: 10px; }
.related__link { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 16px; font-size: 14px; font-weight: 800; color: var(--star); border: 2px solid var(--line-mid); border-radius: 999px; background: var(--field); text-decoration: none; transition: transform 0.25s var(--spring), border-color 0.2s; }
.related__link:hover { transform: translateY(-2px); border-color: var(--cyan); text-decoration: none; }
.related__link .bi { color: var(--cyan); }
.tool-container kbd { padding: 1px 7px; font-family: var(--f-mono); font-size: 12px; border: 2px solid var(--line-mid); border-radius: 8px; background: var(--field); }

/* ==========================================================================
   Вебмастеру: общие элементы форм и раскладки (robots, sitemap, favicon, SSL, адаптивность, домен)
   ========================================================================== */
.tool-textarea--sm { min-height: 0; }
.field-grid { align-items: end; }
.field-grid > div { min-width: 0; }
.field-check { display: flex; align-items: center; min-height: 46px; }
.field-check .checkbox-group { padding: 0; align-items: center; }
.field-check .checkbox-group input { margin-top: 0; }
.card label.drop, .tool-container label.drop { margin: 0; font-size: inherit; letter-spacing: 0; }
.drop strong { color: var(--star); font-size: 15px; }
.drop .hint { max-width: 520px; margin: 0; }
.drop.is-over { border-style: solid; }

/* Сегменты не ломаются на вторую строку — при нехватке места прокручиваются */
.seg { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.seg--block { display: flex; width: 100%; }
.seg--block button { flex: 1 1 auto; min-width: 0; padding: 0 10px; }
.seg button:focus-visible, .tool-chip:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* Чипы-переключатели (устройства и т. п.) */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-chip[aria-pressed="true"] { color: var(--on-pastel); background: linear-gradient(135deg, var(--p-lav), var(--p-pink)); border-color: rgba(255,255,255,0.85); box-shadow: 0 3px 0 rgba(150,100,200,0.4); }
.tool-chip small { font-weight: 600; opacity: 0.75; }
button.pill { cursor: pointer; font-family: inherit; }
button.pill:hover { border-color: var(--cyan); color: var(--cyan); }

/* Поле цвета: квадрат-образец и hex рядом */
.color-field { display: flex; align-items: center; gap: 10px; }
.card .color-field input[type="color"] { flex: none; width: 46px; height: 46px; padding: 3px; border-radius: 14px; }
.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 9px; }
.color-field input[type="color"]::-moz-color-swatch { border: 0; border-radius: 9px; }
.color-field .tool-input { flex: 1 1 auto; width: auto; min-width: 0; }

/* Ползунок со значением */
.range-field { display: flex; align-items: center; gap: 14px; min-height: 46px; }
.card .range-field input[type="range"] { flex: 1 1 auto; width: auto; min-width: 0; height: 26px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.range-field input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--line-mid); }
.range-field input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--line-mid); }
.range-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(135deg, var(--p-lav), var(--p-pink)); box-shadow: 0 2px 0 rgba(150,100,200,0.45), 0 3px 10px rgba(120,80,180,0.3); }
.range-field input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(135deg, var(--p-lav), var(--p-pink)); box-shadow: 0 2px 0 rgba(150,100,200,0.45), 0 3px 10px rgba(120,80,180,0.3); }
.range-field input[type="range"]:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; border-radius: 999px; }
.range-field output { flex: none; min-width: 58px; padding: 6px 10px; text-align: center; font: 800 13px var(--f-mono); color: var(--star); border-radius: 999px; border: 2px solid var(--line-mid); background: var(--field); }
@media (max-width: 480px) { .seg button { padding: 0 11px; font-size: 12.5px; } .field-grid { grid-template-columns: 1fr; } }