/* ==========================================================================
KisGo Components · v1.0 (draft) · 2026-10-04
Единственный источник стилей компонентов. Использует только токены --kg-*
из tokens.css. Подключение любой страницы:
Классы: kg-<компонент>, kg-<компонент>__<часть>, kg-<компонент>--<вариант>.
========================================================================== */
/* ---------- База ---------- */
.kg-root, .kg-app {
font-family: var(--kg-font-ui);
font-size: var(--kg-fs-body);
line-height: var(--kg-lh-body);
color: var(--kg-ink);
-webkit-font-smoothing: antialiased;
}
.kg-root *, .kg-root *::before, .kg-root *::after, .kg-app *, .kg-app *::before, .kg-app *::after { box-sizing: border-box; }
:where(.kg-root, .kg-app) :where(p, h1, h2, h3, h4, figure) { margin: 0; }
.kg-root :focus-visible, .kg-app :focus-visible, dialog.kg-sheet :focus-visible, dialog.kg-dialog :focus-visible, .kg-toast-region :focus-visible {
outline: var(--kg-focus-ring) solid var(--kg-focus); outline-offset: 2px;
}
.kg-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kg-icon { width: 24px; height: 24px; flex: none; display: block; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kg-icon--16 { width: 16px; height: 16px; }
.kg-icon--20 { width: 20px; height: 20px; }
.kg-icon--28 { width: 28px; height: 28px; }
/* Типографические роли */
.kg-t-display { font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); font-size: var(--kg-fs-title-1); line-height: var(--kg-lh-display); letter-spacing: -.01em; }
.kg-t-title { font-family: var(--kg-font-display); font-weight: var(--kg-fw-bold); font-size: var(--kg-fs-title-2); line-height: var(--kg-lh-display); }
.kg-t-heading { font-weight: var(--kg-fw-semi); font-size: var(--kg-fs-title-3); line-height: var(--kg-lh-tight); }
.kg-t-body { font-size: var(--kg-fs-body); line-height: var(--kg-lh-body); }
.kg-t-label { font-size: var(--kg-fs-label); font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight); }
.kg-t-caption { font-size: var(--kg-fs-caption); line-height: var(--kg-lh-body); color: var(--kg-ink-2); }
.kg-name { font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); color: var(--kg-name); line-height: var(--kg-lh-display); overflow-wrap: anywhere; }
/* ==========================================================================
1. Кнопки
========================================================================== */
.kg-btn {
--b-bg: var(--kg-surface); --b-fg: var(--kg-ink); --b-edge: var(--kg-outline); --b-lift: 0 2px 0 var(--kg-outline);
font: inherit; font-weight: var(--kg-fw-semi); font-size: var(--kg-fs-body); line-height: var(--kg-lh-tight);
display: inline-flex; align-items: center; justify-content: center; gap: var(--kg-space-2);
min-height: var(--kg-touch-min); padding: 10px 20px;
border-radius: var(--kg-radius-pill); border: var(--kg-stroke) solid var(--b-edge);
background: var(--b-bg); color: var(--b-fg); box-shadow: var(--b-lift);
cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap;
transition: transform var(--kg-dur-fast) var(--kg-ease-out), box-shadow var(--kg-dur-fast) var(--kg-ease-out), background-color var(--kg-dur-fast) var(--kg-ease-out);
}
.kg-btn--primary {
--b-bg: var(--kg-brand); --b-fg: var(--kg-brand-ink); --b-lift: 0 3px 0 var(--kg-outline);
min-height: var(--kg-cta-height-min); padding: 14px 28px; font-size: var(--kg-fs-body-lg); font-weight: var(--kg-fw-bold);
}
.kg-btn--secondary { }
.kg-btn--ghost { --b-bg: transparent; --b-edge: transparent; --b-fg: var(--kg-brand-text); --b-lift: none; padding-inline: 12px; }
.kg-btn--report { --b-bg: transparent; --b-edge: var(--kg-line-strong); --b-fg: var(--kg-ink-2); --b-lift: none; font-size: var(--kg-fs-label); }
.kg-btn--danger { --b-bg: var(--kg-surface); --b-fg: var(--kg-error); --b-edge: var(--kg-error); --b-lift: none; }
.kg-btn--block { display: flex; width: 100%; }
.kg-btn--icon { padding: 0; width: var(--kg-touch-min); min-width: var(--kg-touch-min); --b-lift: none; --b-edge: transparent; --b-bg: transparent; }
.kg-btn--icon-outline { padding: 0; width: var(--kg-touch-min); min-width: var(--kg-touch-min); --b-lift: none; --b-edge: var(--kg-line-strong); }
@media (hover: hover) {
.kg-btn--primary:hover:not([disabled]):not([aria-busy="true"]) { --b-bg: var(--kg-brand-hover); }
.kg-btn--secondary:hover:not([disabled]) { --b-bg: var(--kg-surface-muted); }
.kg-btn--ghost:hover:not([disabled]) { --b-bg: var(--kg-brand-soft); }
.kg-btn--report:hover { --b-fg: var(--kg-ink); --b-edge: var(--kg-outline); }
.kg-btn--danger:hover { --b-bg: var(--kg-error-soft); }
.kg-btn--icon:hover, .kg-btn--icon-outline:hover { --b-bg: var(--kg-surface-muted); }
}
.kg-btn--primary:active:not([disabled]), .kg-btn--secondary:active:not([disabled]) { transform: translateY(2px); box-shadow: 0 1px 0 var(--kg-outline); }
.kg-btn[disabled] { cursor: not-allowed; --b-bg: var(--kg-surface-muted); --b-fg: var(--kg-ink-2); --b-edge: var(--kg-line-strong); --b-lift: none; }
.kg-btn[aria-busy="true"] { cursor: progress; }
.kg-spinner { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: kg-spin .8s linear infinite; }
@keyframes kg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kg-spinner { animation-duration: 2.4s; } }
/* ==========================================================================
2. Чипы, плашки, сегменты, вкладки
========================================================================== */
.kg-chip {
font: inherit; font-size: var(--kg-fs-label); font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight);
display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; margin-block: 4px; /* 40 + 4/4 = зона 48 */
border-radius: var(--kg-radius-pill); border: var(--kg-stroke) solid var(--kg-line-strong);
background: var(--kg-surface); color: var(--kg-ink); cursor: pointer; white-space: nowrap;
transition: background-color var(--kg-dur-base) var(--kg-ease-out), border-color var(--kg-dur-base) var(--kg-ease-out);
}
.kg-chip .kg-chip__check { display: none; }
.kg-chip[aria-pressed="true"] { background: var(--kg-ink); color: var(--kg-ink-inverse); border-color: var(--kg-ink); }
.kg-chip[aria-pressed="true"] .kg-chip__check { display: block; }
@media (hover: hover) { .kg-chip:hover:not([aria-pressed="true"]) { border-color: var(--kg-outline); } }
.kg-chips { --od-gap: var(--kg-space-2); --od-rail-pad: var(--kg-space-4); }
.kg-pill {
display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; justify-self: start;
font-size: var(--kg-fs-caption); font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight);
padding: 5px 12px 5px 10px; border-radius: var(--kg-radius-md); /* однострочная — капсула, перенос — скруглённый блок */
background: var(--p-bg, var(--kg-surface-muted)); color: var(--p-fg, var(--kg-ink));
}
.kg-pill .kg-icon { width: 16px; height: 16px; margin-top: .1em; flex: none; }
.kg-pill > span { min-width: 0; overflow-wrap: anywhere; }
.kg-pill--exact { --p-bg: var(--kg-info-soft); --p-fg: var(--kg-info); }
.kg-pill--approx { --p-bg: var(--kg-surface-muted); --p-fg: var(--kg-ink-2); }
.kg-pill--dup { --p-bg: var(--kg-neutral-note-soft); --p-fg: var(--kg-neutral-note); }
.kg-pill--new { --p-bg: var(--kg-success-soft); --p-fg: var(--kg-success); }
.kg-pill--warn { --p-bg: var(--kg-warning-soft); --p-fg: var(--kg-warning); }
.kg-pill--day { --p-bg: var(--kg-surface); --p-fg: var(--kg-ink); box-shadow: inset 0 0 0 var(--kg-stroke) var(--kg-outline); }
.kg-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--c, var(--kg-brand)); box-shadow: inset 0 0 0 1.5px var(--kg-outline); }
[data-respect="on"] .kg-promo { display: none !important; }
.kg-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--kg-radius-pill); background: var(--kg-surface-muted); border: var(--kg-stroke-hair) solid var(--kg-line); max-width: 100%; }
.kg-seg button {
font: inherit; font-size: var(--kg-fs-label); font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight);
flex: 1 1 auto; color: var(--kg-ink-2); background: transparent; border: 0; cursor: pointer;
padding: 8px 14px; min-height: 40px; border-radius: var(--kg-radius-pill); white-space: nowrap;
transition: background-color var(--kg-dur-fast) var(--kg-ease-out), color var(--kg-dur-fast) var(--kg-ease-out);
}
.kg-seg button[aria-pressed="true"] { background: var(--kg-surface); color: var(--kg-ink); box-shadow: var(--kg-shadow-1); }
@media (hover: hover) { .kg-seg button:hover:not([aria-pressed="true"]) { color: var(--kg-ink); } }
.kg-tabs { display: flex; gap: var(--kg-space-1); border-bottom: var(--kg-stroke-hair) solid var(--kg-line); overflow-x: auto; scrollbar-width: none; }
.kg-tabs::-webkit-scrollbar { display: none; }
.kg-tab {
font: inherit; font-size: var(--kg-fs-label); font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight);
flex: none; padding: 12px 14px; min-height: var(--kg-touch-min); background: none; border: 0; color: var(--kg-ink-2); cursor: pointer;
box-shadow: inset 0 -3px 0 transparent; white-space: nowrap;
transition: box-shadow var(--kg-dur-base) var(--kg-ease-out), color var(--kg-dur-base) var(--kg-ease-out);
}
.kg-tab[aria-selected="true"] { color: var(--kg-ink); box-shadow: inset 0 -3px 0 var(--kg-brand); }
@media (hover: hover) { .kg-tab:hover { color: var(--kg-ink); } }
.kg-tabpanel { padding-top: var(--kg-space-4); }
.kg-tabpanel[hidden] { display: none; }
/* ==========================================================================
3. Бейдж редкости: kg-rb kg-rb--{s|m|l} kg-rb--r{1..4}
========================================================================== */
.kg-rb { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; flex: none; }
.kg-rb svg { display: block; flex: none; overflow: visible; }
.kg-rb--s svg { width: 20px; height: 20px; }
.kg-rb--m svg { width: 24px; height: 24px; }
.kg-rb--l { flex-direction: column; gap: var(--kg-space-2); }
.kg-rb--l svg { width: 64px; height: 64px; }
.kg-rb__label {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--kg-font-ui); font-size: var(--kg-fs-caption); font-weight: var(--kg-fw-bold); line-height: var(--kg-lh-tight);
padding: 4px 12px 4px 4px; border-radius: var(--kg-radius-pill); border: var(--kg-stroke) solid var(--edge);
background: var(--fill); color: var(--ink); white-space: nowrap;
}
.kg-rb--l .kg-rb__label { font-size: var(--kg-fs-label); padding: 6px 14px; }
.kg-rb--r1 { --fill: var(--kg-r1-fill); --ink: var(--kg-r1-ink); --edge: var(--kg-r1-edge); }
.kg-rb--r2 { --fill: var(--kg-r2-fill); --ink: var(--kg-r2-ink); --edge: var(--kg-r2-edge); }
.kg-rb--r3 { --fill: var(--kg-r3-fill); --ink: var(--kg-r3-ink); --edge: var(--kg-r3-edge); }
.kg-rb--r4 { --fill: var(--kg-r4-fill); --ink: var(--kg-r4-ink); --edge: var(--kg-r4-edge); }
.kg-rb--r4 .kg-rb__label { background: linear-gradient(135deg, var(--kg-r4-fill), var(--kg-r4-fill-2)) padding-box, var(--kg-holo) border-box; border-color: transparent; }
.kg-holo-spin { animation: kg-holo-spin 4.8s linear infinite; transform-origin: 24px 24px; transform-box: view-box; }
@keyframes kg-holo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kg-holo-spin { animation: none; } }
[data-respect="on"] .kg-holo-spin { animation: none; }
/* ==========================================================================
4. Поля, переключатель, выбор, прогресс, счётчик, скелетон
========================================================================== */
.kg-field { display: grid; gap: 6px; }
.kg-field__label { font-weight: var(--kg-fw-semi); font-size: var(--kg-fs-label); line-height: var(--kg-lh-tight); }
.kg-field__req { color: var(--kg-ink-2); font-weight: var(--kg-fw-regular); }
.kg-input, .kg-textarea {
font: inherit; font-size: var(--kg-fs-body); line-height: var(--kg-lh-body); color: var(--kg-ink);
width: 100%; padding: 10px 14px; min-height: var(--kg-touch-min);
border-radius: var(--kg-radius-md); border: var(--kg-stroke) solid var(--kg-line-strong); background: var(--kg-surface);
transition: border-color var(--kg-dur-fast) var(--kg-ease-out), box-shadow var(--kg-dur-fast) var(--kg-ease-out);
}
.kg-textarea { min-height: 96px; resize: vertical; }
.kg-input--name { font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); font-size: var(--kg-fs-body-lg); color: var(--kg-name); line-height: var(--kg-lh-display); padding-block: 12px; }
.kg-input:focus, .kg-textarea:focus { outline: none; border-color: var(--kg-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kg-focus) 30%, transparent); }
.kg-field__meta { display: flex; gap: var(--kg-space-3); justify-content: space-between; font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-body); }
.kg-field__count { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kg-field__error { display: none; gap: 6px; align-items: flex-start; color: var(--kg-error); font-size: var(--kg-fs-caption); font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-body); }
.kg-field[data-invalid] .kg-input, .kg-field[data-invalid] .kg-textarea { border-color: var(--kg-error); }
.kg-field[data-invalid] .kg-input--name { color: var(--kg-name); } /* имя не краснеет даже при ошибке */
.kg-field[data-invalid] .kg-field__error { display: flex; }
.kg-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--kg-space-3); min-height: var(--kg-touch-min); cursor: pointer; }
.kg-switch__text { display: grid; gap: 2px; min-width: 0; }
.kg-switch__text > * { display: block; }
.kg-switch__label { font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight); }
.kg-switch__help { font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-body); }
.kg-switch input { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 48px; height: 28px; border-radius: 999px; background: var(--kg-surface-muted); border: var(--kg-stroke) solid var(--kg-line-strong); position: relative; cursor: pointer; transition: background-color var(--kg-dur-base) var(--kg-ease-out); }
.kg-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--kg-ink-2); transition: transform var(--kg-dur-base) var(--kg-ease-out); }
.kg-switch input:checked { background: var(--kg-brand); border-color: var(--kg-brand); }
.kg-switch input:checked::after { transform: translateX(20px); background: var(--kg-brand-ink); }
.kg-choice { border: 0; padding: 0; margin: 0; display: grid; gap: var(--kg-space-2); min-width: 0; }
.kg-choice__legend { font-weight: var(--kg-fw-semi); font-size: var(--kg-fs-body); line-height: var(--kg-lh-tight); margin-bottom: var(--kg-space-2); padding: 0; }
.kg-choice__opt { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--kg-space-3); align-items: start; padding: var(--kg-space-3) var(--kg-space-4); min-height: var(--kg-touch-min); border: var(--kg-stroke) solid var(--kg-line-strong); border-radius: var(--kg-radius-md); background: var(--kg-surface); cursor: pointer; transition: border-color var(--kg-dur-fast) var(--kg-ease-out); }
.kg-choice__opt:has(input:checked) { border-color: var(--kg-outline); box-shadow: 0 2px 0 var(--kg-outline); }
.kg-choice__opt input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--kg-brand); }
.kg-choice__body { display: grid; gap: 2px; min-width: 0; }
.kg-choice__body > * { display: block; }
.kg-choice__title { font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight); }
.kg-choice__desc { color: var(--kg-ink-2); font-size: var(--kg-fs-caption); line-height: var(--kg-lh-body); }
.kg-progress { display: grid; gap: 6px; }
.kg-progress__row { display: flex; justify-content: space-between; gap: var(--kg-space-3); font-size: var(--kg-fs-caption); line-height: var(--kg-lh-tight); }
.kg-progress__row > :last-child { white-space: nowrap; font-weight: var(--kg-fw-semi); font-variant-numeric: tabular-nums; }
.kg-progress__track { height: 12px; border-radius: 999px; background: var(--kg-surface-muted); box-shadow: inset 0 0 0 var(--kg-stroke-hair) var(--kg-line-strong); overflow: hidden; }
.kg-progress__bar { height: 100%; width: 100%; border-radius: 999px; background: var(--bar, var(--kg-brand)); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform var(--kg-dur-slow) var(--kg-ease-out); }
.kg-counter { display: grid; gap: 0; }
.kg-counter > * { display: block; }
.kg-counter__value { font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); font-size: clamp(28px, 8vw, 40px); line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kg-counter__value small { font-size: .55em; color: var(--kg-ink-2); font-weight: var(--kg-fw-bold); }
.kg-counter__caption { font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-body); }
.kg-skeleton { display: block; border-radius: var(--kg-radius-sm); background: linear-gradient(90deg, var(--kg-surface-muted) 0%, var(--kg-surface-sunk) 50%, var(--kg-surface-muted) 100%); background-size: 200% 100%; animation: kg-shimmer 1.4s linear infinite; }
.kg-skeleton--text { height: 1em; margin-block: .3em; }
@keyframes kg-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .kg-skeleton { animation: none; } }
/* ==========================================================================
5. Каркас приложения: верхняя панель, нижняя навигация, шторка, диалог, тост
========================================================================== */
.kg-appbar { display: grid; grid-template-columns: var(--kg-touch-min) minmax(0, 1fr) var(--kg-touch-min); align-items: center; gap: var(--kg-space-1); padding: var(--kg-space-1) var(--kg-space-2); min-height: 56px; background: var(--kg-bg); border-bottom: var(--kg-stroke-hair) solid var(--kg-line); }
.kg-appbar__title { text-align: center; font-weight: var(--kg-fw-bold); font-size: var(--kg-fs-body-lg); line-height: var(--kg-lh-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kg-appbar--large { grid-template-columns: minmax(0, 1fr) auto; padding: var(--kg-space-3) var(--kg-space-4); border-bottom: 0; }
.kg-appbar--large .kg-appbar__title { text-align: left; font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); font-size: var(--kg-fs-title-1); line-height: var(--kg-lh-display); white-space: normal; }
.kg-appbar__spacer { width: var(--kg-touch-min); height: var(--kg-touch-min); visibility: hidden; }
.kg-tabbar { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); background: var(--kg-surface); border-top: var(--kg-stroke-hair) solid var(--kg-line); padding: var(--kg-space-1) var(--kg-space-2) calc(var(--kg-space-1) + var(--phone-safe-bottom, env(safe-area-inset-bottom, 0px))); }
.kg-tabbar__item {
font: inherit; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 56px; padding: 6px 4px;
background: none; border: 0; color: var(--kg-ink-2); cursor: pointer; text-decoration: none; border-radius: var(--kg-radius-md);
}
.kg-tabbar__item > * { display: block; }
.kg-tabbar__icon { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background-color var(--kg-dur-base) var(--kg-ease-out); }
.kg-tabbar__label { font-size: var(--kg-fs-micro); font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight); text-align: center; max-width: 100%; overflow-wrap: anywhere; }
.kg-tabbar__item[aria-current="page"] { color: var(--kg-ink); }
.kg-tabbar__item[aria-current="page"] .kg-tabbar__icon { background: var(--kg-brand-soft); color: var(--kg-brand-text); }
@media (hover: hover) { .kg-tabbar__item:hover { color: var(--kg-ink); } }
dialog.kg-sheet, dialog.kg-dialog {
font-family: var(--kg-font-ui); font-size: var(--kg-fs-body); line-height: var(--kg-lh-body); color: var(--kg-ink);
border: 0; padding: 0; background: var(--kg-surface); box-shadow: var(--kg-shadow-3);
}
dialog.kg-sheet *, dialog.kg-dialog * { box-sizing: border-box; }
dialog.kg-sheet::backdrop, dialog.kg-dialog::backdrop { background: var(--kg-scrim); }
dialog.kg-sheet {
margin: auto auto 0; width: 100%; max-width: 480px; max-height: 88dvh; overflow: auto;
border-radius: var(--kg-radius-lg) var(--kg-radius-lg) 0 0; padding: var(--kg-space-2) var(--kg-space-5) calc(var(--kg-space-6) + var(--phone-safe-bottom, env(safe-area-inset-bottom, 0px)));
}
dialog.kg-sheet[open] { animation: kg-sheet-in var(--kg-dur-move) var(--kg-ease-out); }
@keyframes kg-sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.kg-sheet__grabber { width: 40px; height: 5px; border-radius: 999px; background: var(--kg-line-strong); margin: var(--kg-space-1) auto var(--kg-space-3); }
.kg-sheet__head { display: grid; grid-template-columns: minmax(0, 1fr) var(--kg-touch-min); align-items: start; gap: var(--kg-space-2); margin-bottom: var(--kg-space-3); }
.kg-sheet__title { font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); font-size: var(--kg-fs-title-2); line-height: var(--kg-lh-display); padding-top: var(--kg-space-2); }
dialog.kg-dialog { width: calc(100% - 32px); max-width: 400px; border-radius: var(--kg-radius-lg); padding: var(--kg-space-6); }
dialog.kg-dialog[open] { animation: kg-dialog-in var(--kg-dur-slow) var(--kg-ease-out); }
@keyframes kg-dialog-in { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.kg-dialog__title { font-weight: var(--kg-fw-bold); font-size: var(--kg-fs-title-3); line-height: var(--kg-lh-tight); margin: 0 0 var(--kg-space-2); }
.kg-dialog__text { color: var(--kg-ink-2); margin: 0 0 var(--kg-space-6); }
.kg-dialog__actions { display: flex; flex-wrap: wrap-reverse; gap: var(--kg-space-2); justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) { dialog.kg-sheet[open], dialog.kg-dialog[open] { animation: none; } }
.kg-toast-region { position: fixed; z-index: var(--kg-z-toast); left: 50%; bottom: calc(var(--kg-space-6) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: var(--kg-space-2); width: min(440px, calc(100% - 32px)); pointer-events: none; }
.kg-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--kg-space-3); padding: var(--kg-space-3) var(--kg-space-4); border-radius: var(--kg-radius-md); background: var(--kg-cocoa-900); color: #FFFDF8; box-shadow: var(--kg-shadow-3); font-family: var(--kg-font-ui); font-size: var(--kg-fs-label); line-height: var(--kg-lh-body); animation: kg-toast-in var(--kg-dur-slow) var(--kg-ease-out); }
.kg-toast .kg-icon { margin-top: 1px; }
.kg-toast--success .kg-icon { color: #8EE0A6; }
.kg-toast--warn .kg-icon { color: #FFD27A; }
.kg-toast.is-leaving { animation: kg-toast-out calc(var(--kg-dur-slow) * var(--kg-exit-ratio)) var(--kg-ease-in) forwards; }
@keyframes kg-toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kg-toast-out { to { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kg-toast, .kg-toast.is-leaving { animation-duration: 1ms; } }
/* Строка списка / настройки */
.kg-list { list-style: none; margin: 0; padding: 0; display: grid; }
.kg-list > li + li { border-top: var(--kg-stroke-hair) solid var(--kg-line); }
/* ==========================================================================
6. Стикер (кот без фона) и карточки кота
========================================================================== */
.kg-sticker { display: block; width: 100%; height: auto; object-fit: contain; filter: url(#kg-diecut-8) var(--kg-shadow-sticker); }
.kg-sticker--sm { filter: url(#kg-diecut-6); }
.kg-sticker--lg { filter: url(#kg-diecut-10) var(--kg-shadow-sticker); }
.kg-paper { background-color: var(--kg-surface-sunk); background-image: var(--kg-grain); }
/* 6.1 Полная карточка */
.kg-catcard { display: grid; background: var(--kg-surface); border: var(--kg-stroke) solid var(--kg-outline); border-radius: var(--kg-radius-card); overflow: hidden; box-shadow: var(--kg-shadow-2); }
.kg-catcard__stage { position: relative; display: grid; place-items: center; padding: var(--kg-space-6) var(--kg-space-6) var(--kg-space-4); border-bottom: var(--kg-stroke-hair) solid var(--kg-line); }
.kg-catcard__stage .kg-sticker { width: auto; max-width: 70%; max-height: 260px; }
.kg-catcard__corner { position: absolute; top: var(--kg-space-3); left: var(--kg-space-3); }
.kg-catcard__report { position: absolute; top: var(--kg-space-1); right: var(--kg-space-1); }
.kg-catcard__body { display: grid; gap: var(--kg-space-3); padding: var(--kg-space-4) var(--kg-space-5) var(--kg-space-5); }
.kg-catcard__name { font-size: var(--kg-fs-title-1); }
.kg-catcard__meta { display: grid; gap: var(--kg-space-1); font-size: var(--kg-fs-label); color: var(--kg-ink-2); line-height: var(--kg-lh-body); }
.kg-catcard__meta > * { display: flex; align-items: flex-start; gap: var(--kg-space-2); }
.kg-catcard__meta .kg-icon { width: 20px; height: 20px; margin-top: 1px; }
.kg-catcard__pills { --od-gap: var(--kg-space-2); }
.kg-catcard__actions { display: flex; flex-wrap: wrap; gap: var(--kg-space-2); padding-top: var(--kg-space-1); }
.kg-catcard__actions > .kg-btn--secondary { flex: 1 1 auto; }
.kg-catcard__by { font-size: var(--kg-fs-caption); color: var(--kg-ink-2); }
.kg-catcard__by b { color: var(--kg-name); font-weight: var(--kg-fw-semi); }
.kg-district { display: grid; gap: 0; }
.kg-district > * { display: block; }
.kg-district__th { color: var(--kg-ink); line-height: var(--kg-lh-thai-body); }
.kg-district__latn { font-size: var(--kg-fs-caption); }
/* 6.2 Миниатюра в сетке */
.kg-catgrid { display: grid; gap: var(--kg-space-3); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.kg-catthumb { display: grid; gap: var(--kg-space-1); color: inherit; text-decoration: none; min-width: 0; border-radius: var(--kg-radius-thumb); }
.kg-catthumb > * { display: block; }
.kg-catthumb__img { position: relative; border-radius: var(--kg-radius-thumb); border: var(--kg-stroke-hair) solid var(--kg-line); padding: var(--kg-space-2); }
.kg-catthumb__img .kg-sticker { aspect-ratio: 1; filter: url(#kg-diecut-6); }
.kg-catthumb__badge { position: absolute; top: 4px; right: 4px; }
.kg-catthumb__name { font-size: var(--kg-fs-caption); font-weight: var(--kg-fw-semi); color: var(--kg-name); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kg-catthumb--empty .kg-catthumb__img { border-style: dashed; border-width: var(--kg-stroke); border-color: var(--kg-line-strong); background: transparent; display: grid; place-items: center; aspect-ratio: 1; color: var(--kg-ink-3); }
.kg-catthumb--empty .kg-catthumb__name { color: var(--kg-ink-2); font-weight: var(--kg-fw-regular); }
@media (hover: hover) { a.kg-catthumb:hover .kg-catthumb__img { border-color: var(--kg-outline); } }
/* 6.3 Запись в списке */
.kg-catrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--kg-space-3); padding: var(--kg-space-3) var(--kg-space-4); min-height: 72px; color: inherit; text-decoration: none; background: var(--kg-surface); }
.kg-catrow__img { width: 56px; height: 56px; border-radius: var(--kg-radius-thumb); padding: 4px; }
.kg-catrow__img .kg-sticker { width: 100%; height: 100%; filter: url(#kg-diecut-6); }
.kg-catrow__text { display: grid; gap: 2px; min-width: 0; }
.kg-catrow__text > * { display: block; }
.kg-catrow__name { font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); color: var(--kg-name); font-size: var(--kg-fs-body-lg); line-height: var(--kg-lh-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kg-catrow__sub { font-size: var(--kg-fs-caption); color: var(--kg-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--kg-lh-body); }
.kg-catrow__end { display: flex; align-items: center; gap: var(--kg-space-2); color: var(--kg-ink-3); }
@media (hover: hover) { a.kg-catrow:hover { background: var(--kg-surface-sunk); } }
/* 6.4 Превью на карте */
.kg-catpeek { display: grid; grid-template-columns: 72px minmax(0, 1fr) var(--kg-touch-min); gap: var(--kg-space-3); align-items: start; padding: var(--kg-space-3); background: var(--kg-surface); border: var(--kg-stroke) solid var(--kg-outline); border-radius: var(--kg-radius-card); box-shadow: var(--kg-shadow-3); }
.kg-catpeek__img { width: 72px; height: 72px; border-radius: var(--kg-radius-thumb); padding: 4px; }
.kg-catpeek__img .kg-sticker { width: 100%; height: 100%; filter: url(#kg-diecut-6); }
.kg-catpeek__body { display: grid; gap: var(--kg-space-1); min-width: 0; }
.kg-catpeek__body > * { display: block; }
.kg-catpeek__body > .kg-pill { display: inline-flex; } /* плашка остаётся строкой: иконка слева от текста */
.kg-catpeek__top { display: flex; align-items: center; gap: var(--kg-space-2); min-width: 0; }
.kg-catpeek__name { font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); color: var(--kg-name); font-size: var(--kg-fs-body-lg); line-height: var(--kg-lh-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kg-catpeek__open { grid-column: 1 / -1; }
/* ==========================================================================
7. Шаблоны share-картинок (масштабируются через cqw от 1080)
========================================================================== */
.kg-share { container-type: inline-size; position: relative; overflow: hidden; border-radius: var(--kg-radius-md); box-shadow: var(--kg-shadow-2);
background-color: var(--kg-paper-50); background-image: var(--kg-grain), radial-gradient(circle at 50% 38%, var(--glow, #F4EBDC) 0%, transparent 62%);
color: var(--kg-cocoa-800); font-family: var(--kg-font-ui); }
.kg-share--story { aspect-ratio: 9 / 16; --safe-top: 14%; --safe-bottom: 20%; --safe-x: 6%; }
.kg-share--feed { aspect-ratio: 4 / 5; --safe-top: 5%; --safe-bottom: 5%; --safe-x: 5%; }
.kg-share--square { aspect-ratio: 1 / 1; --safe-top: 5%; --safe-bottom: 5%; --safe-x: 5%; }
.kg-share--r1 { --glow: #EDE4D6; }
.kg-share--r2 { --glow: #BFE6DA; }
.kg-share--r3 { --glow: #CEC9FF; }
.kg-share--r4 { --glow: #F7DD94; background-image: var(--kg-grain), linear-gradient(160deg, rgba(255,179,209,.55), rgba(255,226,154,.55) 30%, rgba(184,242,201,.5) 55%, rgba(167,216,255,.55) 78%, rgba(211,184,255,.55)); }
.kg-share__safe { position: absolute; inset: var(--safe-top) var(--safe-x) var(--safe-bottom); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2cqw; text-align: center; }
.kg-share__top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 2cqw; }
.kg-share__mark { font-family: "Nunito", sans-serif; font-weight: 800; font-size: 5.2cqw; line-height: 1; letter-spacing: -.02em; }
.kg-share__mark b { color: var(--kg-berry-600); }
.kg-share__badge { display: inline-flex; align-items: center; gap: 1.2cqw; padding: .9cqw 2.4cqw .9cqw 1cqw; border-radius: 999px; border: .5cqw solid var(--edge); background: var(--fill); color: var(--ink); font-weight: 700; font-size: 4.4cqw; line-height: 1.2; white-space: nowrap; }
.kg-share__badge svg { width: 6.4cqw; height: 6.4cqw; flex: none; overflow: visible; }
.kg-share__cat { flex: 1 1 auto; min-height: 0; width: 100%; display: grid; place-items: center; }
.kg-share__cat img { max-width: 72%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: url(#kg-diecut-10) drop-shadow(0 1.4cqw 2cqw rgba(58,42,32,.25)); }
.kg-share__text { display: grid; gap: .8cqw; width: 100%; }
.kg-share__text > * { display: block; }
.kg-share__name { font-family: var(--kg-font-display); font-weight: 800; font-size: 8cqw; line-height: 1.15; color: var(--kg-cocoa-800); overflow-wrap: anywhere; }
.kg-share__district { font-size: 4.6cqw; line-height: 1.5; color: var(--kg-cocoa-600); }
.kg-share__foot { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; width: 100%; }
.kg-share__cta { font-size: 3.8cqw; font-weight: 600; line-height: 1.3; text-align: left; }
.kg-share__qr { flex: none; width: 15cqw; height: 15cqw; border-radius: 1.4cqw; border: .5cqw dashed var(--kg-cocoa-600); display: grid; place-items: center; font-size: 3cqw; font-weight: 700; color: var(--kg-cocoa-600); background: rgba(255,253,248,.7); }
.kg-share--square .kg-share__name { font-size: 7cqw; }
.kg-share--square .kg-share__qr { width: 12cqw; height: 12cqw; }
.kg-share__safeguide { display: none; position: absolute; inset: var(--safe-top) var(--safe-x) var(--safe-bottom); border: 2px dashed var(--kg-berry-600); border-radius: 4px; pointer-events: none; }
.kg-share__safeguide::before, .kg-share__safeguide::after { content: ""; position: absolute; left: calc(var(--safe-x) * -1 - 2px); right: calc(var(--safe-x) * -1 - 2px); background: repeating-linear-gradient(135deg, rgba(194,37,92,.14) 0 6px, transparent 6px 12px); }
.kg-share__safeguide::before { bottom: 100%; height: 100vh; }
.kg-share__safeguide::after { top: 100%; height: 100vh; }
.kg-share.is-safe-visible .kg-share__safeguide { display: block; }
/* ==========================================================================
8. Недельное задание
========================================================================== */
.kg-quest { display: grid; gap: var(--kg-space-4); padding: var(--kg-space-5); background: var(--kg-surface); border: var(--kg-stroke) solid var(--kg-outline); border-radius: var(--kg-radius-card); box-shadow: var(--kg-shadow-2); }
.kg-quest__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kg-space-2); }
.kg-quest__kicker { font-size: var(--kg-fs-caption); font-weight: var(--kg-fw-bold); color: var(--kg-ink-2); letter-spacing: .04em; text-transform: uppercase; line-height: var(--kg-lh-tight); }
.kg-quest__title { font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); font-size: var(--kg-fs-title-2); line-height: var(--kg-lh-display); }
.kg-quest__slots { display: flex; gap: var(--kg-space-3); list-style: none; margin: 0; padding: 0; }
.kg-quest__slot { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; border: var(--kg-stroke) dashed var(--kg-line-strong); color: var(--kg-ink-3); }
.kg-quest__slot.is-done { border-style: solid; border-color: var(--kg-outline); background: var(--day, var(--kg-brand)); color: var(--kg-cocoa-800); box-shadow: 0 2px 0 var(--kg-outline); }
.kg-quest__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kg-space-3); }
.kg-quest__due { font-size: var(--kg-fs-caption); color: var(--kg-ink-2); white-space: nowrap; }
.kg-quest.is-complete .kg-quest__title::after { content: ""; }
/* ==========================================================================
9. Камера
========================================================================== */
.kg-camera { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: var(--kg-space-3); padding: var(--kg-space-3) var(--kg-space-4) calc(var(--kg-space-5) + var(--phone-safe-bottom, env(safe-area-inset-bottom, 0px))); min-height: 640px; background: #2E261E; color: var(--kg-cam-ink); font-family: var(--kg-font-ui); }
.kg-camera__feed { position: absolute; inset: 0; z-index: -1; object-fit: cover; width: 100%; height: 100%; filter: blur(2px) saturate(1.05); opacity: .9; }
.kg-camera__top { display: flex; justify-content: space-between; align-items: center; }
.kg-cam-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--kg-cam-ink); background: var(--kg-cam-scrim); border: 2px solid rgba(255,255,255,.5); cursor: pointer; }
.kg-camera__hint { justify-self: center; display: flex; gap: var(--kg-space-2); align-items: flex-start; max-width: 100%; padding: 10px 16px; border-radius: var(--kg-radius-md); background: var(--kg-cam-scrim); color: var(--kg-cam-ink); font-weight: var(--kg-fw-semi); font-size: var(--kg-fs-label); line-height: var(--kg-lh-body); }
.kg-camera__frame { position: relative; align-self: center; justify-self: center; width: 78%; aspect-ratio: 3 / 4; max-height: 100%; }
.kg-camera__frame svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kg-camera__frame [data-shape] { display: none; }
.kg-camera[data-state="none"] [data-shape="none"],
.kg-camera[data-state="many"] [data-shape="many"],
.kg-camera[data-state="found"] [data-shape="found"],
.kg-camera[data-state="poor"] [data-shape="poor"] { display: inline; }
.kg-camera__status { justify-self: center; display: flex; gap: var(--kg-space-2); align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--kg-cam-scrim); font-weight: var(--kg-fw-semi); font-size: var(--kg-fs-label); line-height: var(--kg-lh-tight); }
.kg-camera__status [data-msg] { display: none; }
.kg-camera[data-state="none"] [data-msg="none"], .kg-camera[data-state="many"] [data-msg="many"], .kg-camera[data-state="found"] [data-msg="found"], .kg-camera[data-state="poor"] [data-msg="poor"] { display: flex; gap: var(--kg-space-2); align-items: center; }
.kg-camera__bottom { display: grid; gap: var(--kg-space-3); }
.kg-camera__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--kg-space-4); background: var(--kg-cam-scrim); border-radius: var(--kg-radius-lg); padding: var(--kg-space-3) var(--kg-space-5); }
.kg-shutter { width: 76px; height: 76px; flex: none; border-radius: 50%; border: 0; cursor: pointer; background: var(--kg-cam-shutter); box-shadow: 0 0 0 4px var(--kg-cam-scrim), 0 0 0 7px var(--kg-cam-shutter-ring); transition: transform var(--kg-dur-fast) var(--kg-ease-out); }
.kg-shutter:active { transform: scale(.92); }
.kg-shutter[disabled] { opacity: .45; cursor: not-allowed; box-shadow: 0 0 0 4px var(--kg-cam-scrim), 0 0 0 7px rgba(255,255,255,.4); }
/* ==========================================================================
10. Карта: одна нейтральная метка
========================================================================== */
.kg-map { position: relative; overflow: hidden; isolation: isolate; min-height: 520px; background-color: #EAE3D6;
background-image:
linear-gradient(90deg, transparent 47%, #FFFDF8 47%, #FFFDF8 53%, transparent 53%),
linear-gradient(0deg, transparent 30%, #FFFDF8 30%, #FFFDF8 34%, transparent 34%),
linear-gradient(0deg, transparent 72%, #FFFDF8 72%, #FFFDF8 75%, transparent 75%),
linear-gradient(25deg, transparent 58%, #CFE3E8 58%, #CFE3E8 66%, transparent 66%),
linear-gradient(90deg, transparent 18%, #F6F1E7 18%, #F6F1E7 20%, transparent 20%);
}
:root[data-theme="dark"] .kg-map { filter: brightness(.55) saturate(.8); }
.kg-map__pin { position: absolute; transform: translate(-50%, -100%); background: none; border: 0; padding: 0; cursor: pointer; width: 48px; height: 56px; display: grid; justify-items: center; }
.kg-pin { display: block; width: 40px; height: 48px; filter: drop-shadow(0 3px 4px rgba(58,42,32,.3)); }
.kg-pin__body { fill: var(--kg-cocoa-800); stroke: #FFFFFF; stroke-width: 3; }
.kg-pin__glyph { fill: #FFFDF8; }
.kg-map__pin[aria-pressed="true"] .kg-pin { transform: scale(1.15); transform-origin: 50% 100%; }
.kg-map__peek { position: absolute; left: var(--kg-space-3); right: var(--kg-space-3); bottom: var(--kg-space-3); }
.kg-map__attr { position: absolute; right: 8px; top: 8px; font-size: var(--kg-fs-micro); background: rgba(255,253,248,.85); color: var(--kg-cocoa-600); padding: 2px 6px; border-radius: 4px; }
/* ==========================================================================
11. Пустые состояния и ошибки
========================================================================== */
.kg-empty { display: grid; justify-items: center; text-align: center; gap: var(--kg-space-3); padding: var(--kg-space-8) var(--kg-space-5); }
.kg-empty__art { width: 120px; display: grid; place-items: center; position: relative; }
.kg-empty__art .kg-sticker { width: 100%; }
.kg-empty__art--muted .kg-sticker { opacity: .55; filter: url(#kg-diecut-8) grayscale(.6); }
.kg-empty__icon { position: absolute; right: -8px; bottom: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--kg-surface); border: var(--kg-stroke) solid var(--kg-outline); color: var(--ic, var(--kg-ink)); }
.kg-empty__title { font-weight: var(--kg-fw-bold); font-size: var(--kg-fs-title-3); line-height: var(--kg-lh-tight); max-width: 28ch; }
.kg-empty__text { color: var(--kg-ink-2); max-width: 36ch; }
.kg-empty__actions { display: grid; gap: var(--kg-space-2); width: 100%; max-width: 320px; padding-top: var(--kg-space-2); }
/* Встроенное сообщение (баннер) */
.kg-notice { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--kg-space-3); padding: var(--kg-space-3) var(--kg-space-4); border-radius: var(--kg-radius-md); background: var(--n-bg, var(--kg-info-soft)); color: var(--kg-ink); font-size: var(--kg-fs-label); line-height: var(--kg-lh-body); }
.kg-notice .kg-icon { color: var(--n-fg, var(--kg-info)); margin-top: 1px; }
.kg-notice--warn { --n-bg: var(--kg-warning-soft); --n-fg: var(--kg-warning); }
.kg-notice--error { --n-bg: var(--kg-error-soft); --n-fg: var(--kg-error); }
.kg-notice--success { --n-bg: var(--kg-success-soft); --n-fg: var(--kg-success); }
/* ==========================================================================
12. Reveal
========================================================================== */
.kg-reveal { position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: var(--kg-radius-lg); background: var(--kg-cocoa-900); }
.kg-reveal__glow { position: absolute; inset: -20%; z-index: 0; opacity: 0; background: radial-gradient(closest-side, var(--glow, #fff) 0%, color-mix(in srgb, var(--glow, #fff) 40%, transparent) 45%, transparent 75%); }
.kg-reveal__holo { position: absolute; inset: -40%; z-index: 0; opacity: 0; background: var(--kg-holo); filter: blur(28px); }
.kg-reveal__cat { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--kg-space-3); opacity: 0; padding-inline: var(--kg-space-4); text-align: center; }
.kg-reveal__cat .kg-sticker { width: 150px; }
.kg-reveal__name { font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); font-size: var(--kg-fs-title-2); color: #FFFDF8; line-height: var(--kg-lh-display); }
.kg-reveal__skip { position: absolute; z-index: 4; right: 12px; top: 12px; --b-bg: rgba(22,17,13,.72); --b-fg: #FFFFFF; --b-edge: rgba(255,255,255,.5); --b-lift: none; min-height: 44px; padding: 8px 14px; font-size: var(--kg-fs-caption); }
.kg-reveal__particle { position: absolute; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: #FFE29A; opacity: 0; pointer-events: none; }
/* ==========================================================================
13. Хосты HTML-элементов (kg-elements.js)
========================================================================== */
:where(kg-icon, kg-button, kg-icon-button, kg-chip, kg-pill, kg-rarity-badge, kg-segmented, kg-sticker) { display: inline-block; vertical-align: middle; max-width: 100%; }
:where(kg-chip-group, kg-tabs, kg-text-field, kg-switch, kg-choice-group, kg-progress, kg-counter, kg-skeleton, kg-notice,
kg-app-bar, kg-tab-bar, kg-cat-card, kg-cat-row, kg-cat-peek, kg-share-card, kg-quest-card, kg-reveal, kg-camera, kg-map, kg-empty-state) { display: block; min-width: 0; }
:where(kg-cat-thumb) { display: block; min-width: 0; }
:where(kg-sheet, kg-dialog, kg-report-sheet, kg-map-pin) { display: contents; }
kg-chip-group > .kg-chips > kg-chip { flex: none; }
kg-button[block] { display: block; }
kg-sticker .kg-sticker { width: 100%; }
.kg-sheet__body { display: grid; gap: var(--kg-space-4); }
/* ==========================================================================
14. Loader, Logo, шторка внутри экрана
========================================================================== */
:where(kg-loader, kg-logo) { display: block; }
.kg-loader { display: grid; justify-items: center; gap: var(--kg-space-3); text-align: center; }
.kg-loader__paws { display: flex; gap: var(--kg-space-2); }
.kg-loader__paws i { width: 10px; height: 10px; border-radius: 50%; background: var(--kg-brand); animation: kg-paw 1.2s var(--kg-ease-inout) infinite; }
.kg-loader__paws i:nth-child(2) { animation-delay: .15s; }
.kg-loader__paws i:nth-child(3) { animation-delay: .3s; }
.kg-loader--lg .kg-loader__paws i { width: 14px; height: 14px; }
.kg-loader__label { font-size: var(--kg-fs-label); color: var(--kg-ink-2); line-height: var(--kg-lh-body); }
@keyframes kg-paw { 0%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .kg-loader__paws i { animation: none; opacity: 1; } }
.kg-logo { display: grid; justify-items: center; gap: var(--kg-space-1); text-align: center; }
.kg-logo__mark { font-family: "Nunito", var(--kg-font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--kg-ink); font-size: 28px; }
.kg-logo__mark b { color: var(--kg-brand-text); font-weight: 800; }
.kg-logo--sm .kg-logo__mark { font-size: 20px; }
.kg-logo--lg .kg-logo__mark { font-size: 48px; }
.kg-logo__tagline { font-size: var(--kg-fs-body); color: var(--kg-ink-2); line-height: var(--kg-lh-body); max-width: 28ch; }
.kg-sheet-scrim { position: absolute; inset: 0; z-index: var(--kg-z-overlay); background: var(--kg-scrim); }
.kg-sheet-scrim[hidden] { display: none; }
dialog.kg-sheet.is-contained { position: absolute; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 88%; z-index: var(--kg-z-sheet); }
/* ==========================================================================
15. Checkbox, Rule
========================================================================== */
:where(kg-checkbox, kg-rule) { display: block; }
.kg-check { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--kg-space-3); align-items: start; padding: var(--kg-space-3) 0; min-height: var(--kg-touch-min); cursor: pointer; }
.kg-check__input { position: absolute; inset: var(--kg-space-3) auto auto 0; width: 28px; height: 28px; margin: 0; opacity: 0; cursor: inherit; }
.kg-check__box { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--kg-radius-sm); border: var(--kg-stroke) solid var(--kg-line-strong); background: var(--kg-surface); color: transparent; transition: background-color var(--kg-dur-fast) var(--kg-ease-out), border-color var(--kg-dur-fast) var(--kg-ease-out); }
.kg-check__input:checked + .kg-check__box { background: var(--kg-brand); border-color: var(--kg-brand); color: var(--kg-brand-ink); }
.kg-check__input:focus-visible + .kg-check__box { outline: var(--kg-focus-ring) solid var(--kg-focus); outline-offset: 2px; }
@media (hover: hover) { .kg-check:not(.is-disabled):hover .kg-check__box { border-color: var(--kg-outline); } }
.kg-check__text { display: grid; gap: 2px; min-width: 0; padding-top: 2px; }
.kg-check__text > * { display: block; }
.kg-check__label { font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight); }
.kg-check__req { font-weight: var(--kg-fw-regular); font-size: var(--kg-fs-caption); color: var(--kg-ink-2); white-space: nowrap; }
.kg-check__help { font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-body); }
.kg-check.is-disabled { cursor: not-allowed; }
.kg-check.is-disabled .kg-check__box { background: var(--kg-surface-muted); border-style: dashed; }
.kg-check.is-disabled .kg-check__label { color: var(--kg-ink-2); }
.kg-check.is-invalid .kg-check__box { border-color: var(--kg-error); }
.kg-rule { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--kg-space-3); align-items: start; padding: var(--kg-space-2) 0; }
.kg-rule__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--kg-surface-muted); color: var(--kg-ink); }
.kg-rule__body { display: grid; gap: 2px; min-width: 0; }
.kg-rule__body > * { display: block; }
.kg-rule__title { font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight); }
.kg-rule__text { font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-body); }
/* ==========================================================================
16. Крупная CTA, расширенное задание, статистика коллекции (A2)
========================================================================== */
.kg-btn--xl { min-height: 64px; padding: 16px 28px; font-size: var(--kg-fs-title-3); gap: var(--kg-space-3); }
.kg-btn--xl .kg-icon { width: 28px; height: 28px; }
.kg-pill--done { --p-bg: var(--kg-success-soft); --p-fg: var(--kg-success); }
.kg-pill--stale { --p-bg: var(--kg-warning-soft); --p-fg: var(--kg-warning); }
.kg-quest__period, .kg-quest__counts { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--kg-space-2); align-items: start; margin: 0; font-size: var(--kg-fs-caption); line-height: var(--kg-lh-body); color: var(--kg-ink-2); }
.kg-quest__period .kg-icon, .kg-quest__counts .kg-icon { margin-top: 1px; }
.kg-quest__period b, .kg-quest__counts b { color: var(--kg-ink); font-weight: var(--kg-fw-semi); }
.kg-quest__counts { padding: var(--kg-space-3); border-radius: var(--kg-radius-md); background: var(--kg-surface-muted); color: var(--kg-ink); }
.kg-quest__bars { display: grid; gap: var(--kg-space-3); }
.kg-quest__bar .kg-progress__row { font-size: var(--kg-fs-label); }
.kg-quest__barlabel { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--kg-fw-semi); }
.kg-quest__note { margin: 0; font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-body); }
.kg-quest.is-complete { border-color: var(--kg-success); }
.kg-quest__msg { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--kg-space-3); align-items: start; }
.kg-quest__msgicon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--kg-surface-muted); color: var(--ic, var(--kg-ink)); }
.kg-quest__msgbody { display: grid; gap: var(--kg-space-1); min-width: 0; }
.kg-quest__msgbody > * { display: block; }
.kg-quest__msgtitle { font-weight: var(--kg-fw-bold); font-size: var(--kg-fs-body-lg); line-height: var(--kg-lh-tight); }
.kg-quest__when { font-size: var(--kg-fs-label); line-height: var(--kg-lh-body); }
.kg-quest__msgtext { font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-body); }
.kg-quest--error, .kg-quest--upcoming { box-shadow: var(--kg-shadow-1); }
:where(kg-collection-stats) { display: block; min-width: 0; }
.kg-stats { display: grid; gap: var(--kg-space-3); padding: var(--kg-space-5); background: var(--kg-surface); border: var(--kg-stroke-hair) solid var(--kg-line-strong); border-radius: var(--kg-radius-card); }
.kg-stats__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kg-space-2); }
.kg-stats__title { margin: 0; font-size: var(--kg-fs-title-3); font-weight: var(--kg-fw-bold); line-height: var(--kg-lh-tight); }
.kg-stats__all { display: inline-flex; align-items: center; gap: 2px; min-height: var(--kg-touch-min); padding-inline: var(--kg-space-2); margin-right: calc(var(--kg-space-2) * -1); color: var(--kg-brand-text); font-weight: var(--kg-fw-semi); font-size: var(--kg-fs-label); text-decoration: none; border-radius: var(--kg-radius-md); }
.kg-stats__all:focus-visible { outline: var(--kg-focus-ring) solid var(--kg-focus); outline-offset: 2px; }
@media (hover: hover) { .kg-stats__all:hover { text-decoration: underline; } }
.kg-stats__tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kg-space-2); }
.kg-stats__tier { display: grid; justify-items: center; gap: 2px; padding: var(--kg-space-3) var(--kg-space-1); border-radius: var(--kg-radius-md); background: var(--kg-surface-muted); text-align: center; min-width: 0; }
.kg-stats__tier > * { display: block; }
.kg-stats__tier .kg-rb { margin-bottom: var(--kg-space-1); }
.kg-stats__num { font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); font-size: var(--kg-fs-title-3); line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kg-stats__name { font-size: var(--kg-fs-micro); font-weight: var(--kg-fw-semi); color: var(--kg-ink-2); line-height: var(--kg-lh-tight); max-width: 100%; overflow-wrap: anywhere; }
.kg-stats__empty { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--kg-space-4); align-items: center; }
.kg-stats__emptyart { display: grid; place-items: center; padding: var(--kg-space-2); border-radius: var(--kg-radius-thumb); }
.kg-stats__emptyart img { width: 100%; height: auto; opacity: .7; filter: url(#kg-diecut-6); }
.kg-stats__emptybody { display: grid; gap: var(--kg-space-1); min-width: 0; }
.kg-stats__emptybody > * { display: block; }
.kg-stats__emptytitle { font-weight: var(--kg-fw-bold); font-size: var(--kg-fs-body-lg); line-height: var(--kg-lh-tight); }
.kg-stats__emptytext { font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-body); }
/* ==========================================================================
17. Живая камера: кадр, рамки вокруг кота, запуск, снимок, напоминание (A3)
========================================================================== */
.kg-camera--live { background: #000; }
.kg-camera__stage { position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; }
.kg-camera__live { display: block; width: 100%; height: 100%; transition: filter var(--kg-dur-base) var(--kg-ease-out); }
.kg-camera--dark .kg-camera__live { filter: brightness(.32) saturate(.6); }
.kg-camera--blur .kg-camera__live { filter: blur(7px); }
.kg-camera__box { position: absolute; display: block; }
.kg-camera__box svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kg-camera[data-state="found"] .kg-camera__box svg, .kg-camera[data-state="captured"] .kg-camera__box svg { filter: drop-shadow(0 0 6px rgba(0,0,0,.55)); }
.kg-camera__init { display: grid; place-items: center; }
.kg-camera__init .kg-loader__paws i { background: var(--kg-cam-ink); }
.kg-camera[data-state="init"] { background: #000; }
.kg-camera__flash { position: absolute; inset: 0; z-index: 0; background: #fff; opacity: 0; pointer-events: none; animation: kg-cam-flash 320ms var(--kg-ease-out); }
@keyframes kg-cam-flash { 0% { opacity: .85; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kg-camera__flash { animation: none; } }
.kg-camera[data-state="captured"] .kg-camera__live { filter: saturate(.9); }
.kg-camera__safety { justify-self: stretch; display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; gap: var(--kg-space-2); align-items: center; margin: 0; padding: 4px 4px 4px 14px; border-radius: var(--kg-radius-md); background: var(--kg-cam-scrim); color: var(--kg-cam-ink); font-size: var(--kg-fs-caption); font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-body); }
.kg-camera__safety-x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--kg-cam-ink); cursor: pointer; }
.kg-camera__safety-x:focus-visible, .kg-cam-btn:focus-visible, .kg-shutter:focus-visible { outline: var(--kg-focus-ring) solid var(--kg-cam-accent); outline-offset: 3px; }
.kg-cam-btn[disabled] { opacity: .45; cursor: not-allowed; }
.kg-cam-btn--spacer { visibility: hidden; }
.kg-camera__status { max-width: 100%; text-align: left; }
.kg-camera__status .kg-icon { flex: none; }
/* ==========================================================================
18. Плашка «без места», шторка без закрытия (A4)
========================================================================== */
.kg-pill--nogeo { --p-bg: var(--kg-neutral-note-soft); --p-fg: var(--kg-neutral-note); }
/* ==========================================================================
19. Этапы обработки, диалог внутри экрана (A5)
========================================================================== */
:where(kg-steps) { display: block; min-width: 0; }
:where(kg-dialog) { display: contents; }
.kg-steps { display: grid; gap: var(--kg-space-3); }
.kg-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kg-space-1); }
.kg-steps__item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--kg-space-3); align-items: center; min-height: 40px; color: var(--kg-ink-2); }
.kg-steps__mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.kg-steps__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kg-line-strong); }
.kg-steps__label { font-size: var(--kg-fs-body); line-height: var(--kg-lh-tight); }
.kg-steps__state { font-size: var(--kg-fs-caption); line-height: var(--kg-lh-tight); white-space: nowrap; }
.kg-steps__item.is-done { color: var(--kg-ink); }
.kg-steps__item.is-done .kg-steps__mark { background: var(--kg-success-soft); color: var(--kg-success); }
.kg-steps__item.is-active { color: var(--kg-ink); }
.kg-steps__item.is-active .kg-steps__label { font-weight: var(--kg-fw-bold); }
.kg-steps__item.is-active .kg-steps__mark { color: var(--kg-brand-text); }
.kg-steps__item.is-active .kg-spinner { width: 18px; height: 18px; border-width: 2.5px; }
.kg-steps__item.is-failed { color: var(--kg-ink); }
.kg-steps__item.is-failed .kg-steps__mark { background: var(--kg-warning-soft); color: var(--kg-warning); }
.kg-steps__item.is-failed .kg-steps__state { color: var(--kg-warning); font-weight: var(--kg-fw-semi); }
.kg-steps__item.is-skipped .kg-steps__mark { background: var(--kg-surface-muted); color: var(--kg-ink-2); }
.kg-steps__item.is-skipped .kg-steps__label { text-decoration: line-through; text-decoration-thickness: 1px; }
.kg-steps__slow { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--kg-space-2); align-items: start; margin: 0; padding: var(--kg-space-2) var(--kg-space-3); border-radius: var(--kg-radius-md); background: var(--kg-surface-muted); font-size: var(--kg-fs-label); line-height: var(--kg-lh-body); }
dialog.kg-dialog.is-contained { position: absolute; inset: 0; margin: auto; height: fit-content; z-index: var(--kg-z-sheet); }
/* ==========================================================================
20. Сравнение с коллекцией (A6)
========================================================================== */
:where(kg-dup-compare) { display: block; min-width: 0; }
.kg-dup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kg-space-3); }
.kg-dup.is-single { grid-template-columns: minmax(0, 1fr); max-width: 260px; margin-inline: auto; width: 100%; }
.kg-dup__card { margin: 0; display: grid; grid-template-rows: auto 1fr; background: var(--kg-surface); border: var(--kg-stroke) solid var(--kg-outline); border-radius: var(--kg-radius-card); overflow: hidden; box-shadow: var(--kg-shadow-2); min-width: 0; }
.kg-dup__card.is-new { border-style: dashed; border-color: var(--kg-line-strong); box-shadow: none; }
.kg-dup__photo { position: relative; display: block; aspect-ratio: 1; background: var(--kg-surface-muted); }
.kg-dup__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kg-dup__badge { position: absolute; top: var(--kg-space-2); right: var(--kg-space-2); }
.kg-dup__body { display: grid; gap: var(--kg-space-1); align-content: start; padding: var(--kg-space-3); min-width: 0; }
.kg-dup__body > * { display: block; min-width: 0; }
.kg-dup__label { font-size: var(--kg-fs-micro); font-weight: var(--kg-fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--kg-ink-2); line-height: var(--kg-lh-tight); }
.kg-dup__name { font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); font-size: var(--kg-fs-body-lg); line-height: var(--kg-lh-display); color: var(--kg-name, var(--kg-ink)); overflow-wrap: anywhere; }
.kg-dup__rarity { font-size: var(--kg-fs-caption); font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight); }
.kg-dup__meta { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); gap: 6px; align-items: start; font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-body); }
.kg-dup__meta .kg-icon { margin-top: 1px; }
/* ==========================================================================
21. Состояния доработки A0–A6: фонарик, предупреждения камеры, последний день, удалённая карточка
========================================================================== */
.kg-cam-btn.is-on { background: var(--kg-cam-accent); color: #2E261E; border-color: var(--kg-cam-accent); }
.kg-camera__alert { justify-self: stretch; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--kg-space-2); align-items: start; margin: 0; padding: 10px 14px; border-radius: var(--kg-radius-md); background: var(--kg-cam-scrim); color: var(--kg-cam-warn); font-size: var(--kg-fs-caption); font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-body); }
.kg-camera[data-state="interrupted"] .kg-camera__live { filter: brightness(.35) blur(4px); }
.kg-camera__init .kg-loader__label { color: var(--kg-cam-ink); }
.kg-pill--lastday { --p-bg: var(--kg-warning-soft); --p-fg: var(--kg-warning); }
.kg-quest.is-last-day .kg-quest__period b { color: var(--kg-warning); }
.kg-dup__gone { display: grid; place-items: center; color: var(--kg-ink-2); }
.kg-dup__name--muted { color: var(--kg-ink-2); font-family: inherit; font-size: var(--kg-fs-label); font-weight: var(--kg-fw-semi); }
.kg-dup__view { justify-self: start; min-height: var(--kg-touch-min); padding-inline: 0; }
.kg-dup__more { justify-self: center; margin-top: var(--kg-space-2); }
kg-dup-compare { display: grid !important; }
/* ==========================================================================
22. Карточка, коллекция и статусы (A7–A10)
========================================================================== */
.kg-pill--public { --p-bg: var(--kg-info-soft); --p-fg: var(--kg-info); }
.kg-pill--private { --p-bg: var(--kg-surface-muted); --p-fg: var(--kg-ink-2); }
.kg-pill--hidden { --p-bg: var(--kg-warning-soft); --p-fg: var(--kg-warning); }
.kg-pill--counted { --p-bg: var(--kg-success-soft); --p-fg: var(--kg-success); }
.kg-pill--notcounted { --p-bg: var(--kg-neutral-note-soft); --p-fg: var(--kg-neutral-note); }
.kg-pill--outside { --p-bg: var(--kg-neutral-note-soft); --p-fg: var(--kg-neutral-note); }
/* Строка статуса */
:where(kg-status-row) { display: block; min-width: 0; }
.kg-srow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--kg-space-3); align-items: center; padding: var(--kg-space-3); border-radius: var(--kg-radius-md); background: var(--kg-surface); border: var(--kg-stroke-hair) solid var(--kg-line); color: inherit; text-decoration: none; min-height: var(--kg-touch-min); }
.kg-srow__icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--s-bg, var(--kg-surface-muted)); color: var(--s-fg, var(--kg-ink-2)); }
.kg-srow__icon .kg-icon { width: 20px; height: 20px; }
.kg-srow__icon .kg-spinner { width: 18px; height: 18px; border-width: 2.5px; }
.kg-srow__body { display: grid; gap: 2px; min-width: 0; }
.kg-srow__body > * { display: block; }
.kg-srow__title { font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight); font-size: var(--kg-fs-label); }
.kg-srow__text { font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-body); }
.kg-srow__end { color: var(--kg-ink-3); display: grid; place-items: center; }
.kg-srow__btn { min-height: var(--kg-touch-min); padding-inline: var(--kg-space-3); }
.kg-srow:not(:has(.kg-srow__btn, .kg-srow__end)) { grid-template-columns: 36px minmax(0, 1fr); }
.kg-srow--ok { --s-bg: var(--kg-success-soft); --s-fg: var(--kg-success); }
.kg-srow--info { --s-bg: var(--kg-info-soft); --s-fg: var(--kg-info); }
.kg-srow--warn { --s-bg: var(--kg-warning-soft); --s-fg: var(--kg-warning); }
.kg-srow--muted { --s-bg: var(--kg-surface-muted); --s-fg: var(--kg-ink-2); }
@media (hover: hover) { a.kg-srow:hover { background: var(--kg-surface-sunk); } }
/* Карточка: имя с карандашом, рамка уровня, компактный вид */
.kg-catcard__namerow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--kg-space-2); }
.kg-catcard__name { margin: 0; overflow-wrap: anywhere; }
.kg-catcard__name.is-placeholder { color: var(--kg-ink-2); }
.kg-catcard__edit { margin-top: -4px; margin-right: -8px; }
.kg-catcard.is-framed { border-width: 3px; }
.kg-catcard--r1.is-framed { border-color: var(--kg-r1-edge); }
.kg-catcard--r2.is-framed { border-color: var(--kg-r2-fill); }
.kg-catcard--r3.is-framed { border-color: var(--kg-r3-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kg-r3-edge) 25%, transparent), var(--kg-shadow-2); }
.kg-catcard--r4.is-framed { border-color: var(--kg-r4-fill-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kg-r4-fill) 55%, transparent), var(--kg-shadow-2); }
.kg-catcard--r4.is-framed .kg-catcard__stage { background-image: var(--kg-grain), linear-gradient(160deg, color-mix(in srgb, var(--kg-r4-fill) 30%, transparent), transparent 60%); }
.kg-catcard.is-compact { grid-template-columns: 116px minmax(0, 1fr); }
.kg-catcard.is-compact .kg-catcard__stage { padding: var(--kg-space-3); border-bottom: 0; border-right: var(--kg-stroke-hair) solid var(--kg-line); }
.kg-catcard.is-compact .kg-catcard__stage .kg-sticker { max-width: 100%; max-height: 120px; }
.kg-catcard.is-compact .kg-catcard__body { padding: var(--kg-space-3); gap: var(--kg-space-2); align-content: start; }
.kg-catcard.is-compact .kg-catcard__name { font-size: var(--kg-fs-title-3); }
.kg-catcard.is-compact .kg-catcard__meta { font-size: var(--kg-fs-caption); }
.kg-catcard.is-compact .kg-catcard__pills { display: none; }
/* Миниатюра: фото-кадр, теги, скрытая модератором */
.kg-catthumb.is-photo .kg-catthumb__img { padding: 0; overflow: hidden; aspect-ratio: 1; }
.kg-catthumb__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.kg-catthumb__rarity { font-size: var(--kg-fs-micro); color: var(--kg-ink-2); line-height: var(--kg-lh-tight); }
.kg-catthumb__tags { display: flex !important; flex-wrap: wrap; gap: 4px; }
.kg-catthumb__tag { display: inline-flex; align-items: flex-start; gap: 3px; max-width: 100%; padding: 2px 6px; border-radius: var(--kg-radius-pill); font-size: var(--kg-fs-micro); font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight); background: var(--kg-neutral-note-soft); color: var(--kg-neutral-note); }
.kg-catthumb__tag .kg-icon { width: 14px; height: 14px; flex: none; margin-top: .15em; }
.kg-catthumb__tag > span { min-width: 0; overflow-wrap: anywhere; }
.kg-catthumb__tag--public { background: var(--kg-info-soft); color: var(--kg-info); }
.kg-catthumb__tag--hidden { background: var(--kg-warning-soft); color: var(--kg-warning); }
.kg-catthumb.is-hidden .kg-catthumb__img > :is(img) { opacity: .45; filter: grayscale(.6); }
/* Задание: приращение */
.kg-quest__delta { color: var(--kg-success); font-weight: var(--kg-fw-bold); white-space: nowrap; }
/* Тост внутри экрана */
.kg-toast-region.is-contained { position: absolute; bottom: calc(var(--phone-safe-bottom, 0px) + var(--kg-space-16)); }
/* Имена могут быть на тайском при любом языке интерфейса: межстрочный интервал с запасом для надстрочных знаков */
.kg-field__count.is-over { color: var(--kg-error); font-weight: var(--kg-fw-bold); }
.kg-input--name { line-height: var(--kg-lh-thai-tight); }
.kg-catcard__name, .kg-catthumb__name, .kg-catrow__name { line-height: var(--kg-lh-thai-display); }
/* ==========================================================================
23. Шеринг, задание, профиль (A11–A13)
========================================================================== */
.kg-share.is-generating { background: var(--kg-surface-muted); }
.kg-share__shimmer { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,253,248,.55) 50%, transparent 70%); background-size: 200% 100%; animation: kg-shimmer 1.4s linear infinite; }
.kg-share__gen { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--kg-space-4); }
@keyframes kg-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .kg-share__shimmer { animation: none; } }
:where(kg-menu-row) { display: block; min-width: 0; }
.kg-mrow { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: var(--kg-space-3); align-items: center; min-height: 56px; padding: var(--kg-space-2) var(--kg-space-4); border: 0; background: var(--kg-surface); color: inherit; text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.kg-mrow__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--kg-surface-muted); }
.kg-mrow__body { display: grid; gap: 2px; min-width: 0; }
.kg-mrow__body > * { display: block; }
.kg-mrow__label { font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight); }
.kg-mrow__value { font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-body); overflow-wrap: anywhere; }
.kg-mrow__end { color: var(--kg-ink-3); display: grid; place-items: center; }
.kg-mrow:disabled { cursor: not-allowed; }
.kg-mrow:disabled .kg-mrow__label, .kg-mrow.is-muted .kg-mrow__label { color: var(--kg-ink-2); }
.kg-mrow:disabled .kg-mrow__end { visibility: hidden; }
@media (hover: hover) { .kg-mrow:not(:disabled):hover { background: var(--kg-surface-sunk); } }
.kg-menu { display: grid; border: var(--kg-stroke-hair) solid var(--kg-line); border-radius: var(--kg-radius-md); overflow: hidden; background: var(--kg-surface); }
.kg-menu > * + * { border-top: var(--kg-stroke-hair) solid var(--kg-line); }
/* ==========================================================================
24. Правки по ревью: центровка значков в плашке, шапка без «полосы»
========================================================================== */
/* Значок по центру первой строки текста — и в однострочной плашке, и при переносе */
.kg-pill .kg-icon { margin-top: calc((1em * var(--kg-lh-tight) - 16px) / 2); }
.kg-pill .kg-dot { margin-top: calc((1em * var(--kg-lh-tight) - 12px) / 2); }
/* Шапка экрана лежит на фоне экрана, как логотип на главной и заголовок на согласии — без отдельной светлой полосы и линии */
.kg-appbar { background: transparent; border-bottom: 0; }
/* ==========================================================================
25. Публикация коллекции (A14)
========================================================================== */
:where(kg-publish-row) { display: block; min-width: 0; }
.kg-prow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--kg-space-3); align-items: start; padding: var(--kg-space-3) var(--kg-space-4); background: var(--kg-surface); }
.kg-prow.is-attn { background: var(--kg-warning-soft); box-shadow: inset 0 0 0 2px var(--kg-warning); }
.kg-prow.is-focus { box-shadow: inset 0 0 0 2px var(--kg-brand); }
.kg-prow.is-locked .kg-prow__img { opacity: .5; filter: grayscale(.6); }
.kg-prow__img { width: 56px; height: 56px; border-radius: var(--kg-radius-thumb); padding: 4px; display: block; overflow: hidden; }
.kg-prow__img.is-photo { padding: 0; }
.kg-prow__img .kg-sticker { width: 100%; height: 100%; filter: url(#kg-diecut-6); }
.kg-prow__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.kg-prow__body { display: grid; gap: var(--kg-space-1); min-width: 0; }
.kg-prow__body > * { min-width: 0; }
.kg-prow__name { display: block; font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); font-size: var(--kg-fs-body-lg); line-height: var(--kg-lh-thai-display); color: var(--kg-name); overflow-wrap: anywhere; cursor: pointer; }
.kg-prow__sub { display: flex; align-items: center; gap: var(--kg-space-1); font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-tight); }
.kg-prow__note, .kg-prow__err { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--kg-space-1) var(--kg-space-2); align-items: start; font-size: var(--kg-fs-caption); line-height: var(--kg-lh-body); color: var(--kg-ink-2); }
.kg-prow__err { color: var(--kg-error); font-weight: var(--kg-fw-semi); }
.kg-prow__err .kg-prow__rename { grid-column: 2; justify-self: start; min-height: var(--kg-touch-min); padding-inline: 0; }
.kg-prow__chip { justify-self: start; display: inline-grid; grid-template-columns: 20px minmax(0, auto) 20px; gap: var(--kg-space-1); align-items: center; min-height: var(--kg-touch-min); max-width: 100%; padding: var(--kg-space-1) var(--kg-space-2) var(--kg-space-1) var(--kg-space-3); border-radius: var(--kg-radius-pill); border: var(--kg-stroke) solid var(--kg-line-strong); background: var(--kg-surface); color: var(--kg-ink); font: inherit; font-size: var(--kg-fs-caption); font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight); text-align: left; cursor: pointer; }
.kg-prow__chip.is-empty { border-style: dashed; color: var(--kg-ink-2); }
.kg-prow__chip.is-attn { border-color: var(--kg-warning); color: var(--kg-warning); border-style: solid; }
.kg-prow__chip:disabled { cursor: not-allowed; opacity: .6; }
@media (hover: hover) { .kg-prow__chip:not(:disabled):hover { border-color: var(--kg-outline); } }
.kg-prow__switch { min-height: var(--kg-touch-min); }
.kg-prow__switch input:disabled { opacity: .45; cursor: not-allowed; }
/* ==========================================================================
26. Точность места (A15) и сводка публикации (A16)
========================================================================== */
:where(kg-precision-option, kg-publish-summary) { display: block; min-width: 0; }
.kg-popt { display: grid; grid-template-columns: 24px minmax(0, 1fr) 80px; gap: var(--kg-space-3); align-items: start; padding: var(--kg-space-3) var(--kg-space-4); min-height: var(--kg-touch-min); border: var(--kg-stroke) solid var(--kg-line-strong); border-radius: var(--kg-radius-md); background: var(--kg-surface); cursor: pointer; transition: border-color var(--kg-dur-fast) var(--kg-ease-out); }
.kg-popt.is-selected { border-color: var(--kg-outline); box-shadow: 0 2px 0 var(--kg-outline); }
.kg-popt.is-off { cursor: not-allowed; background: var(--kg-surface-muted); }
.kg-popt.is-off .kg-popt__title, .kg-popt.is-off .kg-popt__map { opacity: .55; }
.kg-popt:has(.kg-popt__radio:focus-visible) { outline: var(--kg-focus-ring) solid var(--kg-brand); outline-offset: 2px; }
.kg-popt__radio { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--kg-brand); }
.kg-popt__body { display: grid; gap: var(--kg-space-1); min-width: 0; }
.kg-popt__body > * { display: block; min-width: 0; }
.kg-popt__title { font-weight: var(--kg-fw-semi); font-size: var(--kg-fs-body); line-height: var(--kg-lh-tight); }
.kg-popt__desc { color: var(--kg-ink-2); font-size: var(--kg-fs-caption); line-height: var(--kg-lh-body); }
.kg-popt__tag, .kg-popt__reason { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); gap: var(--kg-space-1); align-items: start; font-size: var(--kg-fs-caption); line-height: var(--kg-lh-body); font-weight: var(--kg-fw-semi); }
.kg-popt__tag { color: var(--kg-success); }
.kg-popt__reason { color: var(--kg-ink); }
.kg-popt__map { position: relative; display: block; width: 80px; height: 64px; border-radius: var(--kg-radius-sm); overflow: hidden; background-color: #EAE3D6;
background-image: linear-gradient(90deg, transparent 44%, #FFFDF8 44%, #FFFDF8 54%, transparent 54%), linear-gradient(0deg, transparent 26%, #FFFDF8 26%, #FFFDF8 34%, transparent 34%), linear-gradient(25deg, transparent 62%, #CFE3E8 62%, #CFE3E8 74%, transparent 74%);
box-shadow: inset 0 0 0 var(--kg-stroke-hair) var(--kg-line); }
.kg-popt__mark { position: absolute; inset: 0; width: 100%; height: 100%; }
.kg-popt__area { fill: color-mix(in srgb, var(--kg-brand) 22%, transparent); stroke: var(--kg-brand); stroke-width: 1.5; stroke-dasharray: 4 3; }
.kg-popt__dot { fill: var(--kg-brand); stroke: #FFFDF8; stroke-width: 3; }
:root[data-theme="dark"] .kg-popt__map { filter: brightness(.6) saturate(.8); }
.kg-psum { display: grid; gap: var(--kg-space-3); padding: var(--kg-space-4); border-radius: var(--kg-radius-md); background: var(--kg-surface); box-shadow: inset 0 0 0 var(--kg-stroke-hair) var(--kg-line); }
.kg-psum__head { display: grid; gap: 2px; }
.kg-psum__head > * { display: block; }
.kg-psum__cap { font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-tight); }
.kg-psum__total { font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); font-size: clamp(32px, 9vw, 40px); line-height: 1.1; white-space: nowrap; }
.kg-psum__list { list-style: none; margin: 0; padding: 0; display: grid; }
.kg-psum__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--kg-space-2); align-items: center; min-height: 40px; border-top: var(--kg-stroke-hair) solid var(--kg-line); line-height: var(--kg-lh-body); }
.kg-psum__row.is-zero { color: var(--kg-ink-2); }
.kg-psum__num { font-weight: var(--kg-fw-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* ==========================================================================
27. Карта котиков (A17) и шторка метки (A18)
========================================================================== */
.kg-map.has-scheme { background-color: #DED7C8; background-image: none; }
.kg-map.is-notiles { background-color: var(--kg-surface-muted); background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(58,42,32,.05) 14px 15px); }
.kg-map__world { position: absolute; inset: 0; width: 100%; height: 100%; }
.kg-map__city { fill: #EAE3D6; }
.kg-map__road { fill: none; stroke: #FFFDF8; stroke-linecap: round; }
.kg-map__canal { fill: none; stroke: #CFE3E8; stroke-linecap: round; }
.kg-map__river { fill: none; stroke: #B9D7DF; stroke-linecap: round; stroke-linejoin: round; }
.kg-map__label { position: absolute; transform: translate(-50%, -50%); font-size: var(--kg-fs-micro); font-weight: var(--kg-fw-semi); color: var(--kg-cocoa-600); letter-spacing: .02em; white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px #FFFDF8, 0 0 3px #FFFDF8; }
.kg-map__area { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: color-mix(in srgb, var(--kg-brand) 18%, transparent); border: 2px dashed var(--kg-brand); pointer-events: none; min-width: 24px; }
.kg-map__pin.is-cluster { position: absolute; }
.kg-map__count { position: absolute; top: 9px; left: 0; right: 0; text-align: center; font-weight: var(--kg-fw-bold); font-size: var(--kg-fs-caption); line-height: 20px; color: #FFFDF8; font-variant-numeric: tabular-nums; }
.kg-map__pin:focus-visible { outline: var(--kg-focus-ring) solid var(--kg-brand); outline-offset: 2px; border-radius: var(--kg-radius-sm); }
.kg-peek { position: relative; display: grid; gap: var(--kg-space-3); padding: var(--kg-space-2) var(--kg-space-4) var(--kg-space-4); background: var(--kg-surface); border-radius: var(--kg-radius-lg, 24px) var(--kg-radius-lg, 24px) 0 0; box-shadow: 0 -8px 24px -12px rgba(58,42,32,.35); }
.kg-peek__grab { justify-self: center; width: 32px; height: 4px; border-radius: 2px; background: var(--kg-line-strong); }
.kg-peek__x { position: absolute; top: var(--kg-space-1); right: var(--kg-space-2); }
.kg-peek__main { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--kg-space-3); align-items: start; padding-right: var(--kg-space-8, 40px); }
.kg-peek__img { width: 88px; height: 88px; border-radius: var(--kg-radius-thumb); padding: 4px; display: block; overflow: hidden; }
.kg-peek__img.is-photo { padding: 0; }
.kg-peek__img .kg-sticker { width: 100%; height: 100%; filter: url(#kg-diecut-6); }
.kg-peek__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.kg-peek__body { display: grid; gap: var(--kg-space-1); min-width: 0; }
.kg-peek__body > * { display: block; min-width: 0; }
.kg-peek__name { font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); font-size: var(--kg-fs-title-3, 20px); line-height: var(--kg-lh-thai-display); color: var(--kg-name); overflow-wrap: anywhere; }
.kg-peek__sub, .kg-peek__meta { display: flex !important; align-items: center; gap: var(--kg-space-1); font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-body); }
.kg-peek > .kg-pill { justify-self: start; }
.kg-peek__acts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--kg-space-2); }
.kg-peek__own { margin: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--kg-space-2); font-size: var(--kg-fs-caption); line-height: var(--kg-lh-body); color: var(--kg-ink); }
.kg-peek__note { margin: 0; font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-body); }
.kg-peek__h { font-weight: var(--kg-fw-bold); line-height: var(--kg-lh-tight); }
.kg-peek__gone { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--kg-space-3); align-items: start; padding-right: var(--kg-space-8, 40px); }
.kg-peek__goneic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--kg-surface-muted); color: var(--kg-ink-2); }
.kg-peek__sk { height: 14px; border-radius: 7px; }
/* ==========================================================================
28. Жалоба (A20) и строка разрешения (A21)
========================================================================== */
.kg-rep { display: grid; gap: var(--kg-space-4); }
.kg-rep__target { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--kg-space-3); align-items: center; padding: var(--kg-space-2); border-radius: var(--kg-radius-md); background: var(--kg-surface-muted); }
.kg-rep__thumb { width: 56px; height: 56px; border-radius: var(--kg-radius-thumb); overflow: hidden; display: grid; place-items: center; background: var(--kg-surface); }
.kg-rep__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kg-rep__thumb.is-sticker { padding: 4px; }
.kg-rep__thumb.is-sticker img { object-fit: contain; filter: url(#kg-diecut-6); }
.kg-rep__thumb--icon { color: var(--kg-ink-2); }
.kg-rep__tbody { display: grid; gap: 2px; min-width: 0; }
.kg-rep__tbody > * { display: block; min-width: 0; }
.kg-rep__type { font-size: var(--kg-fs-caption); color: var(--kg-ink-2); line-height: var(--kg-lh-tight); }
.kg-rep__name { font-family: var(--kg-font-display); font-weight: var(--kg-fw-display); color: var(--kg-name); line-height: var(--kg-lh-thai-display); overflow-wrap: anywhere; }
.kg-rep__err { margin: 0 0 var(--kg-space-1); display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--kg-space-1); color: var(--kg-error); font-size: var(--kg-fs-caption); font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-body); }
.kg-rep .kg-choice[aria-invalid="true"] .kg-choice__opt { border-color: var(--kg-error); }
:where(kg-perm-row) { display: block; min-width: 0; }
.kg-perm { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: var(--kg-space-3); align-items: center; min-height: 72px; padding: var(--kg-space-3) var(--kg-space-4); border: 0; background: var(--kg-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--kg-dur-base, 240ms) var(--kg-ease-out); }
.kg-perm.is-updated { background: var(--kg-brand-soft); }
.kg-perm:focus-visible { outline: var(--kg-focus-ring) solid var(--kg-brand); outline-offset: -3px; }
@media (hover: hover) { .kg-perm:not(:disabled):hover { background: var(--kg-surface-muted); } }
.kg-perm__body { display: grid; gap: 2px; min-width: 0; }
.kg-perm__body > * { display: block; min-width: 0; }
.kg-perm__label { font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-tight); }
.kg-perm__status { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); gap: var(--kg-space-1); align-items: center; font-size: var(--kg-fs-caption); font-weight: var(--kg-fw-semi); line-height: var(--kg-lh-body); }
.kg-perm__status--ok { color: var(--kg-success); }
.kg-perm__status--warn { color: var(--kg-warning); }
.kg-perm__status--bad { color: var(--kg-error); }
.kg-perm__status--muted { color: var(--kg-ink-2); }
.kg-perm__open { font-size: var(--kg-fs-caption); color: var(--kg-brand-text); line-height: var(--kg-lh-body); }
/* Тихая текстовая ссылка: второстепенный выход рядом с главной кнопкой (не конкурирует с акцентом) */
.kg-textlink { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--kg-touch-min); padding: var(--kg-space-1) var(--kg-space-2); border: 0; background: none; font: inherit; font-size: var(--kg-fs-label); font-weight: var(--kg-fw-medium, 500); line-height: var(--kg-lh-tight); color: var(--kg-ink-2); text-align: center; text-decoration: underline; text-decoration-color: var(--kg-line); text-underline-offset: 3px; cursor: pointer; border-radius: var(--kg-radius-sm, 8px); }
.kg-textlink:focus-visible { outline: 2px solid var(--kg-focus, currentColor); outline-offset: 2px; }
@media (hover: hover) { .kg-textlink:hover { color: var(--kg-ink); text-decoration-color: currentColor; } }