/* v1.1.6.300 (REV46): акцентний текст на власному м'якому тлі переведено на
   --n-accent-ink. Патерн узятий із канону, але я перевірив його на всіх десяти
   акцентах: у світлій схемі 9 із 10 не дотягують до WCAG AA (2.24-4.01 при
   порозі 4.5). Чорнило — той самий акцент, затемнений рівно до 4.5 і ні на крок
   далі; у темній схемі воно дорівнює акценту, бо там патерн і так проходить.
   Обґрунтування з числами — у tokens.css над оголошенням токена. */
/* v1.1.6.294 (REV46, CANON-STEP-11): після переходу палітри на канон у .293
   тут лишались кольори, зашиті повз токени: 2 × білий текст на
   акцентному тлі (тепер var(--n-text-on-accent) — канон дає ТЕМНИЙ текст на
   теплих акцентах, білий давав контраст ~1.8:1) і 0 × значення старої
   палітри, які після .293 відстали від решти інтерфейсу. */
/* v1.1.6.291 (REV46, CANON-STEP-8): значення, які ВЖЕ дорівнювали кроку
   канонної шкали, отримали її ім'я: радіус 1, pill 0,
   відступи 19, вага 5. Жодне число не змінено — це
   перейменування, не редизайн. Значення поза шкалою лишились літералами
   свідомо: прев'ю канону саме вживає 10/14/6px для падінгів компонентів,
   тож стягувати їх до шкали означало б відійти ВІД прев'ю, а не до нього. */
/* v1.1.6.290 (REV46, CANON-STEP-7): 28 значень font-size переведено на
   канонну шкалу (--kp-text-xs/sm/md/lg/xl/2xl). Правило: найближчий крок,
   і лише коли зміна ≤12%%. Все, що далі (герой-цифри 3-5rem, мікропідписи
   <0.6rem), лишилось літералом — це не текстова шкала. Перелік: _meta/. */
/* v1.1.6.288 (REV46, CANON-STEP-5): прибрано 0 правил цілком і мертві
   частини селектора ще в 1 (аліас-імена, яких немає в розмітці — напр.
   `.admin-sub, .adm-header__sub` → лишається лише живе). Перевірено проти 37,9 МБ
   php/js/html усього деплою; динамічно зібрані імена виключені окремо.
   Перелік: _meta/REV46_dead_selectors.json. */
.hero { padding: 36px 0 28px; text-align: center; }
.hero__eyebrow {
font-family: var(--mono);
font-size: var(--kp-text-xs);
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: var(--kp-space-2);
}
.hero__eyebrow::before, .hero__eyebrow::after {
content: '';
width: 28px;
height: 1px;
background: var(--accent);
opacity: .4;
}
.hero__title {
font-family: var(--mono);
font-size: var(--kp-text-2xl);
font-weight: 800;
letter-spacing: -.01em;
line-height: 1.1;
margin-bottom: 10px;
color: var(--text);
}
.hero__title span { color: var(--accent); }
.hero__sub {
font-size: var(--kp-text-sm);
color: var(--text-2);
max-width: 480px;
margin: 0 auto;
line-height: 1.5;
}
@media (max-width: 540px) {
.hero { padding: var(--kp-space-2) 0 14px; }
.hero__eyebrow {
font-size: .6rem;
margin-bottom: 6px;
}
.hero__eyebrow::before, .hero__eyebrow::after { width: 16px; }
.hero__title {
font-size: var(--kp-text-xl);
line-height: 1.15;
margin-bottom: 6px;
}
.hero__sub {
font-size: var(--kp-text-xs);
line-height: 1.4;
}
}
.card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 20px;
transition: all .25s var(--ease);
}
.card--accent { position: relative; overflow: hidden; }
.card--accent::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: .5;
}
.card__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
gap: 10px;
}
.card__title {
font-family: var(--mono);
font-size: var(--kp-text-sm);
font-weight: 800;
letter-spacing: .04em;
display: flex;
align-items: center;
gap: var(--kp-space-2);
color: var(--text);
}
.card__sub {
font-size: var(--kp-text-xs);
color: var(--text-2);
margin-top: 3px;
line-height: 1.4;
}
.card__body { margin-top: 6px; }
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
gap: 10px;
}
.section-title {
font-family: var(--mono);
font-size: var(--kp-text-sm);
font-weight: 800;
letter-spacing: .05em;
display: flex;
align-items: center;
gap: var(--kp-space-2);
color: var(--text);
}
.cat-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.cat-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: var(--kp-space-2) var(--kp-space-4);
border-radius: var(--kp-radius-lg);
border: 1px solid var(--border);
background: var(--cell);
font-family: var(--font);
font-size: var(--kp-text-xs);
font-weight: 600;
color: var(--text-2);
cursor: pointer;
transition: all .2s var(--ease);
text-decoration: none;
}
.cat-tab:hover {
border-color: var(--border-h);
background: var(--cell-h);
color: var(--text);
}
.cat-tab.is-active {
background: var(--accent-dim);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
color: var(--accent);
}
.cat-tab__count {
font-family: var(--mono);
font-size: .62rem;
font-weight: 800;
padding: 1px 6px;
border-radius: 6px;
background: rgba(255, 255, 255, .08);
color: var(--text-3);
}
:root[data-theme="light"] .cat-tab__count { background: rgba(0, 0, 0, .06); }
.cat-tab.is-active .cat-tab__count {
background: color-mix(in srgb, var(--accent) 22%, transparent);
color: var(--n-accent-ink);
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--cell);
border: 1px solid var(--border);
display: grid;
place-items: center;
font-family: var(--mono);
font-weight: 800;
color: var(--accent);
font-size: var(--kp-text-md);
flex-shrink: 0;
overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width:  96px; height:  96px; font-size: var(--kp-text-2xl);   border: 2px solid var(--accent-dim); }
.badge {
padding: 3px 9px;
border-radius: 7px;
font-family: var(--mono);
font-size: .6rem;
font-weight: 800;
letter-spacing: .04em;
display: inline-flex;
align-items: center;
gap: var(--kp-space-1);
}

/* v1.1.6.301 (REV46): геометрію цих трьох кнопок прибрано — вона тепер приходить
   із css/canon-primitives.css, де ті самі імена приєднані до канонного .kp-btn.
   Доти тут жила ДРУГА глобальна кнопка, що розходилась із канонною у висоті,
   радіусі й падінгу, а .btn-ghost ще й брав рамку кольору роздільника (контраст
   1.16:1 — див. .298). Лишається тільки те, чого канон не описує: світіння
   первинної кнопки й семантичні варіанти нижче. */
.btn-primary { box-shadow: 0 4px 16px var(--accent-g); }

.btn-primary:hover {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: 0 6px 22px var(--accent-g);
}
.btn-primary:active { transform: scale(.97); }

.btn-ghost:hover {
border-color: var(--border-h);
background: var(--cell);
color: var(--text);
}

.btn-icon:hover {
border-color: var(--border-h);
background: var(--cell-h);
color: var(--text);
}
.btn-icon.is-active {
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
background: var(--accent-dim);
color: var(--accent);
}
.form-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 22px;
padding: 28px;
margin-bottom: var(--kp-space-4);
position: relative;
overflow: hidden;
}
.form-card::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 160px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: .4;
}
.form-group { margin-bottom: 18px; }
.form-label {
display: block;
font-size: var(--kp-text-xs);
font-weight: var(--kp-weight-bold);
color: var(--text-2);
letter-spacing: .04em;
margin-bottom: 7px;
}
.form-label span { color: var(--accent); margin-left: 3px; }
.form-input, .form-textarea, .form-select {
width: 100%;
padding: 11px 14px;
border-radius: 13px;
border: 1px solid var(--border);
background: var(--cell);
color: var(--text);
font-family: var(--font);
font-size: var(--kp-text-sm);
outline: none;
transition: all .2s var(--ease);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-3); }
.form-input:focus, .form-textarea:focus, .form-select:focus {
border-color: color-mix(in srgb, var(--accent) 30%, transparent);
background: var(--cell-h);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.form-textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
@media (max-width: 540px) { }
.post-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 18px;
transition: all .25s var(--ease);
}
.post-card:hover { border-color: var(--border-h); }
.kp-link { color: var(--accent); text-decoration: none; }
.kp-link:hover { text-decoration: underline; }
.btn-primary--danger {
background: var(--red);
box-shadow: 0 4px 16px var(--red-dim);
}
.btn-primary--danger:hover { background: var(--red); filter: brightness(1.08); }
.btn-primary--success {
background: var(--hp);
box-shadow: 0 4px 16px var(--hp-dim);
}
.btn-primary--warning {
background: var(--gold);
color: #1a1208;
box-shadow: 0 4px 16px var(--gold-dim);
}
.btn-glass {
padding: 9px var(--kp-space-4);
border-radius: 11px;
border: 1px solid var(--border);
background: var(--cell);
color: var(--text);
font-family: var(--font);
font-size: var(--kp-text-xs);
font-weight: 600;
cursor: pointer;
transition: all .2s var(--ease);
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.btn-glass:hover {
border-color: var(--accent);
background: var(--accent-dim);
color: var(--accent);
}
.form-input--min180 { min-width: 180px; width: auto; }
.avatar--circle { border-radius: 50%; }
.badge--success { background: color-mix(in srgb, var(--hp)   85%, transparent); color: #fff; }
.badge--warning { background: color-mix(in srgb, var(--gold) 85%, transparent); color: #1a1208; }
.badge--warn    { background: color-mix(in srgb, var(--gold) 85%, transparent); color: #1a1208; }
.badge--danger  { background: color-mix(in srgb, var(--red)  85%, transparent); color: #fff; }
.badge--info    { background: color-mix(in srgb, var(--cyan) 85%, transparent); color: #0a1820; }
.badge--muted {
background: var(--cell-h);
color: var(--text-3);
border: 1px solid var(--border);
}
.badge--soft {
background: var(--accent-dim);
color: var(--accent);
border: 1px solid var(--n-accent-border, color-mix(in srgb, var(--accent) 35%, transparent));
}
.cat-tab--accent {
background: var(--accent);
color: var(--n-text-on-accent);
border-color: transparent;
}
.cat-tab--gold {
background: var(--gold-dim);
color: var(--gold);
border-color: color-mix(in srgb, var(--gold) 35%, transparent);
}
.cat-tab--success {
background: var(--hp-dim);
color: var(--hp);
border-color: color-mix(in srgb, var(--hp) 35%, transparent);
}
.cat-tab--danger {
background: var(--red-dim);
color: var(--red);
border-color: color-mix(in srgb, var(--red) 35%, transparent);
}
.cat-tab--soft {
background: var(--cell);
border-color: var(--border);
} .btn-ghost--sm { padding: 6px var(--kp-space-3); font-size: var(--kp-text-xs); }
.kp-listings-hero {
position: relative;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r);
padding: var(--kp-space-5) var(--kp-space-5) 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--kp-space-4);
flex-wrap: wrap;
}
.kp-listings-hero__corner {
position: absolute;
width: 14px;
height: 14px;
border-color: var(--accent);
pointer-events: none;
}
.kp-listings-hero__corner--tl {
top: -1px; left: -1px;
border-top: 2px solid; border-left: 2px solid;
}
.kp-listings-hero__corner--tr {
top: -1px; right: -1px;
border-top: 2px solid; border-right: 2px solid;
}
.kp-listings-hero__corner--bl {
bottom: -1px; left: -1px;
border-bottom: 2px solid; border-left: 2px solid;
}
.kp-listings-hero__corner--br {
bottom: -1px; right: -1px;
border-bottom: 2px solid; border-right: 2px solid;
}
.kp-listings-hero__main {
flex: 1;
min-width: 280px;
}
.kp-listings-hero__eyebrow {
font-family: var(--mono);
font-size: var(--kp-text-xs);
font-weight: var(--kp-weight-bold);
text-transform: uppercase;
letter-spacing: .12em;
color: var(--accent);
margin-bottom: 6px;
}
.kp-listings-hero__title {
font-family: var(--mono);
font-size: var(--kp-text-xl);
font-weight: 800;
color: var(--text);
margin: 0 0 6px;
letter-spacing: .02em;
}
.kp-listings-hero__sub {
font-size: var(--kp-text-sm);
color: var(--text-2);
margin: 0;
line-height: 1.5;
max-width: 580px;
}
.kp-listings-hero__cta {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
@media (max-width: 540px) {
.kp-listings-hero {
padding: 18px var(--kp-space-4) var(--kp-space-4);
flex-direction: column;
align-items: stretch;
}
.kp-listings-hero__title {
font-size: 1.3rem;
}
.kp-listings-hero__cta {
flex-direction: row;
flex-wrap: wrap;
}
.kp-listings-hero__cta > * {
flex: 1 1 calc(50% - 4px);
}
}
.kp-comm-view-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-md, 12px);
padding: var(--kp-space-4);
}
.kp-comm-view-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--kp-space-2);
margin-bottom: var(--kp-space-3);
}
.kp-comm-view-card__title {
font-family: var(--mono);
font-size: var(--kp-text-sm);
font-weight: var(--kp-weight-bold);
color: var(--text);
margin: 0;
letter-spacing: .02em;
}
.kp-comm-view-card__link {
font-family: var(--mono);
font-size: var(--kp-text-xs);
color: var(--text-3);
text-decoration: none;
white-space: nowrap;
}
.kp-comm-view-card__link:hover { color: var(--accent); }
.kp-comm-view-card__text {
font-size: var(--kp-text-sm);
color: var(--text-2);
line-height: 1.55;
margin: 0;
}
.kp-comm-view-card__cta {
width: 100%;
margin-top: 10px;
font-family: var(--mono) !important;
font-size: var(--kp-text-xs) !important;
}
.kp-comm-empty {
grid-column: 1 / -1;
text-align: center;
padding: 40px 20px;
color: var(--text-3);
background: var(--panel);
border: 1px dashed var(--border);
border-radius: var(--r);
}
.kp-comm-empty__icon {
font-size: 3rem;
margin-bottom: 10px;
opacity: .6;
}
.kp-comm-empty__title {
font-family: var(--mono);
font-size: var(--kp-text-md);
font-weight: var(--kp-weight-bold);
color: var(--text-2);
margin-bottom: 6px;
}
.kp-comm-empty__sub {
font-size: var(--kp-text-sm);
line-height: 1.5;
max-width: 400px;
margin: 0 auto;
}
.kp-comm-create-input {
width: 100%;
padding: var(--n-s-3, 12px) var(--n-s-4, 16px);
border-radius: var(--r-md, 12px);
border: 1px solid var(--border);
background: var(--cell);
color: var(--text);
font-family: var(--font);
font-size: var(--kp-text-md);
outline: none;
transition: all .2s var(--ease);
}
.kp-comm-create-input::placeholder {
color: var(--text-3);
}
.kp-comm-create-input:focus {
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
background: var(--cell-h);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}
.kp-comm-create-input--area {
resize: vertical;
min-height: 100px;
font-family: var(--font);
line-height: 1.55;
}