/* --- сетка категорий --- */

.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.bento__tile {
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 0;
 min-height: 44px;
 padding: 5px 10px;
 border: 1px solid var(--line);
 border-radius: var(--radius-l);
 background: var(--surface);
 text-align: left;
 transition: border-color var(--dur-fast) var(--ease-out),
 transform var(--dur-fast) var(--ease-out);
}
.bento__tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.bento__name { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.bento__count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
@media (min-width: 1200px) { .bento { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .bento { grid-template-columns: 1fr; } }

/* --- методика проверки --- */

.stand__head {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: var(--space-4);
}
.stand__status {
 margin-top: var(--space-2);
 font-family: var(--font-mono);
 font-size: 13px;
 color: var(--fg-2);
}
.stand__status b { color: var(--fg); }

.steps {
 display: grid;
 gap: 8px;
 margin-top: var(--space-4);
 grid-template-columns: 1fr;
}
@media (min-width: 700px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step {
 display: flex;
 flex-direction: column;
 gap: 4px;
 padding: 10px 12px;
 border: 1px solid var(--line);
 border-radius: var(--radius-m);
 background: var(--surface);
}
.step__head { display: flex; align-items: baseline; gap: 6px; }
.step__num { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.step__title { font-size: 14px; font-weight: 600; line-height: 1.2; }
.step__text { font-size: 12px; color: var(--fg-2); line-height: 1.4; }

.stand__latest {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 justify-content: space-between;
 gap: var(--space-2) var(--space-4);
 margin-top: var(--space-6);
 padding-top: var(--space-4);
 border-top: 1px solid var(--line);
}
.stand__latest-label {
 font-size: 11.5px;
 text-transform: uppercase;
 letter-spacing: .06em;
 color: var(--fg-3);
}
.stand__link {
 font-size: 13px;
 color: var(--fg-3);
 border-bottom: 1px dashed var(--line-strong);
}
.stand__link:hover { color: var(--fg); border-color: var(--accent); }
.stand__all-btn {
 font-family: var(--font-mono);
 font-size: 12px;
 color: var(--accent);
 border-bottom: 1px dashed var(--accent);
 padding-bottom: 1px;
}
.stand__all-btn:hover { color: var(--accent-hover); }
.stand__cards { margin-top: var(--space-4); }

/* --- липкая панель категорий --- */

.catbar {
 position: sticky;
 top: 56px;
 z-index: 35;
 overflow-x: auto;
 background: var(--bg);
 border-bottom: 1px solid var(--line-strong);
 box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
 scrollbar-width: none;
 padding: 6px max(var(--space-4), calc((100vw - var(--container)) / 2 + var(--space-4)));
}
.catbar::-webkit-scrollbar { display: none; }
.catbar[hidden] { display: none; }
@media (min-width: 768px) {
 .catbar {
 top: 64px;
 padding-inline: max(var(--space-6), calc((100vw - var(--container)) / 2 + var(--space-6)));
 }
}
@media (min-width: 1024px) {
 .catbar {
 padding-inline: max(var(--space-7), calc((100vw - var(--container)) / 2 + var(--space-7)));
 }
}

.catbar:has(.catbar__inner) { padding-inline: 0; }
.catbar__inner {
 display: flex;
 gap: 6px;
 max-width: var(--container);
 margin-inline: auto;
 padding-inline: var(--space-4);
}
@media (min-width: 768px) { .catbar__inner { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .catbar__inner { padding-inline: var(--space-7); } }

.catbar__chip {
 flex: none;
 max-width: 110px;
 overflow: hidden;
 text-overflow: ellipsis;
 padding: 3px 8px;
 border: 1px solid var(--line);
 border-radius: 999px;
 background: var(--surface);
 font-size: 11.5px;
 line-height: 1.45;
 color: var(--fg-2);
 white-space: nowrap;
}
.catbar__chip span {
 font-family: var(--font-mono);
 color: var(--fg-3);
 font-size: 10px;
 margin-left: 4px;
}
.catbar__chip:hover { border-color: var(--accent); color: var(--fg); }
.catbar__chip--accent {
 border-color: var(--accent);
 color: var(--accent);
 background: var(--accent-soft);
 font-weight: 600;
}

/* --- блок подбора: раскрывающаяся плашка --- */

.fold {
 border: 1px solid var(--line-strong);
 border-left: 3px solid var(--accent);
 border-radius: var(--radius-l);
 background: var(--surface);
 overflow: hidden;
}
.fold__head {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: flex-start;
 gap: 10px;
 padding: 14px 18px;
 cursor: pointer;
 list-style: none;
 transition: background var(--dur-fast) var(--ease-out);
}
.fold__head::-webkit-details-marker { display: none; }
.fold__head:hover { background: var(--surface-2); }
.fold__head::after {
 content: "+";
 margin-left: 2px;
 font-family: var(--font-mono);
 font-size: 18px;
 line-height: 1;
 color: var(--accent);
}
.fold__title {
 font-size: clamp(24px, 3vw, 32px);
 font-weight: 600;
 letter-spacing: -.015em;
 line-height: 1.15;
}
.fold__hint { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.fold__cta {
 font-family: var(--font-mono);
 font-size: 10.5px;
 letter-spacing: .04em;
 color: var(--accent);
 border: 1px solid var(--accent);
 border-radius: 999px;
 padding: 2px 8px;
}
.fold__cta::before { content: "развернуть"; }
.fold[open] .fold__cta::before { content: "свернуть"; }
.fold[open] .fold__head { border-bottom: 1px solid var(--line); }
.fold[open] .fold__head::after { content: "−"; }
.fold__body { padding: 14px 18px 18px; }

/* --- фильтр категорий в подборе --- */

.quiz__cats {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
 padding-bottom: var(--space-3);
 margin-bottom: var(--space-4);
 border-bottom: 1px solid var(--line);
}
.quiz__cat {
 padding: 4px 9px;
 border: 1px solid var(--line);
 border-radius: 999px;
 background: var(--surface);
 font-size: 12px;
 color: var(--fg-2);
 white-space: nowrap;
}
.quiz__cat span { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); margin-left: 4px; }
.quiz__cat:hover { border-color: var(--line-strong); color: var(--fg); }
.quiz__cat[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.quiz__cat[aria-pressed="true"] span { color: var(--accent); }

/* --- сетка подбора --- */

.quiz { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 900px) {
 .quiz {
 grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
 gap: var(--space-6);
 align-items: stretch;
 }
}

.quiz__left { align-self: start; }
.quiz__top {
 display: grid;
 grid-template-columns: auto 1fr auto;
 align-items: center;
 gap: var(--space-3);
 padding-bottom: var(--space-3);
 margin-bottom: var(--space-4);
 border-bottom: 1px solid var(--line);
 font-family: var(--font-mono);
 font-size: 12px;
 color: var(--fg-3);
}
.quiz__hintline { text-align: center; font-family: var(--font-sans); font-size: 12px; color: var(--fg-3); }
.quiz__reset { font-size: 12px; color: var(--fg-3); border-bottom: 1px dashed var(--line-strong); }
.quiz__reset:hover:not([disabled]) { color: var(--fg); border-color: var(--accent); }
.quiz__reset[disabled] { opacity: .4; cursor: default; }

.quiz__group + .quiz__group {
 margin-top: var(--space-4);
 padding-top: var(--space-4);
 border-top: 1px solid var(--line);
}
.quiz__q {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 gap: 6px;
 font-size: 15px;
 font-weight: 600;
 margin-bottom: 8px;
}
.quiz__hint { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--fg-3); }
.quiz__tags { display: flex; flex-wrap: wrap; gap: 6px; }

.qbtn {
 padding: 6px 10px;
 border: 1px solid var(--line);
 border-radius: 999px;
 background: var(--surface);
 font-size: 12.5px;
 color: var(--fg-2);
 transition: border-color var(--dur-fast) var(--ease-out),
 background var(--dur-fast) var(--ease-out),
 color var(--dur-fast) var(--ease-out);
}
.qbtn:hover { border-color: var(--line-strong); color: var(--fg); }
.qbtn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }

.quiz__right { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 900px) { .quiz__right { height: 0; min-height: 100%; } }

.quiz__results { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 900px) {
 .quiz__results {
 flex: 1 1 auto;
 min-height: 0;
 overflow-y: auto;
 padding-right: 6px;
 scrollbar-width: thin;
 }
 .quiz__results::-webkit-scrollbar { width: 8px; }
 .quiz__results::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
}
.quiz__title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.quiz__title--soft { font-weight: 500; color: var(--fg-2); }
.quiz__empty {
 padding: var(--space-4);
 border: 1px dashed var(--line);
 border-radius: var(--radius-m);
 font-size: 13px;
 color: var(--fg-3);
 text-align: center;
}
.quiz__order {
 flex: none;
 align-self: flex-start;
 min-height: 0;
 padding: 0;
 border: 0;
 background: none;
 color: var(--fg-3);
 font-size: 12px;
 font-weight: 400;
 text-decoration: underline;
 text-underline-offset: 3px;
}
.quiz__order:hover { background: none; border: 0; color: var(--fg); }

/* Карточки в результатах подбора: светлее фона блока, ярче рамка */

.quiz__results .card--mini {
 background: var(--surface-2);
 border-color: var(--line-strong);
 padding: 7px 9px;
 gap: 3px;
}
.quiz__results .card--mini:hover { border-color: var(--accent); }
.quiz__results .card__desc { display: none; }
.quiz__results .card__name { font-size: 13px; line-height: 1.2; }
.quiz__results .card__author { font-size: 11px; line-height: 1.2; }
.quiz__results .card__metrics { font-size: 9.5px; line-height: 1.2; }
.quiz__results .card__actions { gap: 4px; margin-top: 2px; }
.quiz__results .card__actions .btn { min-height: 26px; font-size: 11px; padding: 0 9px; }
.quiz__results .card__actions .btn--accent {
 background: transparent;
 border-color: var(--accent);
 color: var(--accent);
}
.quiz__results .card__actions .btn--accent:hover {
 background: var(--accent-soft);
 border-color: var(--accent);
 color: var(--accent);
}

/* --- секции категорий --- */

.section:has(#bento) { padding-bottom: var(--space-4); }

.cat { padding-top: var(--space-6); scroll-margin-top: 132px; }
.cat + .cat { border-top: 1px solid var(--line); }
#sections > .cat:first-child { padding-top: var(--space-3); }
.cat__head {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 justify-content: space-between;
 gap: var(--space-2) var(--space-4);
 margin-bottom: var(--space-5);
 padding-bottom: var(--space-3);
 border-bottom: 1px solid var(--line);
}
.cat__title { font-size: 20px; font-weight: 600; }
.cat__meta { font-family: var(--font-mono); font-size: 13px; color: var(--fg-3); }
.cat--flash { animation: flash 1.5s var(--ease-out); }
@keyframes flash { 0% { background: var(--accent-soft); } 100% { background: transparent; } }

.shelf + .shelf { margin-top: var(--space-6); }
.shelf__label {
 display: flex;
 align-items: baseline;
 gap: var(--space-2);
 margin-bottom: var(--space-3);
 font-size: 13px;
 font-weight: 600;
 letter-spacing: .02em;
 text-transform: uppercase;
 color: var(--fg-2);
}
.shelf__label .count { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--fg-3); font-weight: 400; }
.shelf__more {
 margin-top: var(--space-3);
 padding-bottom: 1px;
 font-size: 13px;
 color: var(--fg-2);
 border-bottom: 1px dashed var(--line-strong);
}
.shelf__more:hover { color: var(--fg); border-color: var(--accent); }

/* --- разделители блоков --- */

.section { scroll-margin-top: 128px; }
.section--tight { padding-block: var(--space-5); }
.ticker + .section,
.section + .section,
#sections + .section { border-top: 1px solid var(--line); }

/* --- карточка --- */

.cards { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 560px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.card--mini {
 display: flex;
 flex-direction: column;
 gap: 6px;
 padding: 10px;
 border: 1px solid var(--line);
 border-radius: var(--radius-m);
 background: var(--surface);
 text-align: left;
 cursor: pointer;
 transition: border-color var(--dur-fast) var(--ease-out),
 transform var(--dur-fast) var(--ease-out);
}
.card--mini:hover { border-color: var(--accent); transform: translateY(-2px); }

.card--mini .card__top {
 display: grid;
 grid-template-columns: 40px minmax(0, 1fr) auto;
 gap: var(--space-2);
 align-items: start;
}
.card--mini .avatar { width: 40px; height: 40px; border-radius: var(--radius-s); }
.card--mini .card__ident { min-width: 0; }
.card--mini .card__name { font-size: 13.5px; }
.card--mini .card__author {
 font-size: 11.5px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.card--mini .card__metrics {
 font-family: var(--font-mono);
 font-size: 10px;
 color: var(--fg-3);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.card--mini .card__desc {
 font-size: 12px;
 line-height: 1.4;
 color: var(--fg-2);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.card--mini .card__actions { gap: 6px; margin-top: auto; }
.card--mini .card__actions .btn { min-height: 30px; font-size: 12px; padding: 0 8px; }

.card__side {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 2px;
 max-width: 120px;
 flex: none;
}

.card--mini .stamp {
 position: static;
 font-size: 10px;
 padding: 2px 5px;
 text-align: center;
 white-space: nowrap;
 border: 1px dashed var(--line-strong);
 border-radius: var(--radius-s);
 color: var(--fg-3);
 background: var(--surface);
}
.card--mini .stamp--scored {
 border: 1px solid var(--accent);
 color: #fff;
 background: var(--accent);
 box-shadow: 0 0 0 3px var(--accent-soft);
}
.card--mini .stamp__score { font-size: 14px; line-height: 1; font-weight: 700; }

.card__matchline {
 font-family: var(--font-mono);
 font-size: 9px;
 line-height: 1.15;
 color: var(--fg-3);
 text-align: right;
}
.card__matchline b { font-weight: 700; color: var(--accent); }
.card__matchline span { display: block; color: var(--fg-3); }

.card--tested { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }
.card--tested:hover { border-color: var(--accent); }

.btn--accent-soft {
 background: var(--accent-soft);
 border-color: var(--accent);
 color: var(--accent);
}
.btn--accent-soft:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.card__why {
 font-family: var(--font-mono);
 font-size: 10.5px;
 color: var(--fg-3);
 line-height: 1.35;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.card__why b { color: var(--accent); font-size: 12px; }

.card__hook {
 margin-top: 2px;
 padding: 4px 8px 4px 9px;
 border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
 border-left: 3px solid var(--accent);
 border-radius: 0 var(--radius-s) var(--radius-s) 0;
 background: var(--accent-soft);
 font-size: 12.5px;
 font-weight: 600;
 line-height: 1.35;
 color: var(--fg);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

/* --- очередь тестов --- */

.qlist { border-top: 1px solid var(--line); }
.qlist__row {
 display: grid;
 grid-template-columns: 32px 1fr auto;
 align-items: baseline;
 gap: var(--space-2) var(--space-3);
 padding: var(--space-3) 0;
 border-bottom: 1px solid var(--line);
}
.qlist__num { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.qlist__name { text-align: left; font-size: 14px; font-weight: 600; }
.qlist__name:hover { color: var(--accent); }
.qlist__cat { font-size: 12px; color: var(--fg-3); grid-column: 2; }
.qlist__chats { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); grid-row: 1; grid-column: 3; }

/* --- выбор автора --- */

.picks { display: grid; gap: 6px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pick {
 display: grid;
 grid-template-columns: 32px minmax(0, 1fr);
 gap: var(--space-2);
 align-items: center;
 padding: 8px 10px;
 border: 1px solid var(--line);
 border-radius: var(--radius-m);
 background: var(--surface);
 text-align: left;
}
.pick:hover { border-color: var(--accent); }
.pick__ava {
 width: 32px;
 height: 32px;
 border-radius: var(--radius-s);
 object-fit: cover;
 background: var(--surface-2);
 display: grid;
 place-items: center;
 font-family: var(--font-mono);
 font-size: 13px;
 color: var(--fg-2);
}
.pick__name { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick__meta { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- поиск и подсказки --- */

.hero__suggest { position: relative; }
.suggest {
 position: absolute;
 top: calc(100% + 6px);
 left: 0;
 right: 0;
 z-index: 30;
 max-height: 236px;
 overflow-y: auto;
 overscroll-behavior: contain;
 scrollbar-width: thin;
 border: 1px solid var(--line);
 border-radius: var(--radius-m);
 background: var(--surface);
 box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.suggest[hidden] { display: none; }
.suggest::-webkit-scrollbar { width: 8px; }
.suggest::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.suggest__item {
 display: flex;
 align-items: baseline;
 gap: var(--space-2);
 width: 100%;
 padding: 8px 12px;
 text-align: left;
 border-bottom: 1px solid var(--line);
}
.suggest__item:last-child { border-bottom: 0; }
.suggest__item:hover, .suggest__item[aria-selected="true"] { background: var(--surface-2); }
.suggest__name {
 font-family: var(--font-sans);
 font-size: 14.5px;
 font-weight: 600;
 color: var(--fg);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 58%;
}
.suggest__author { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.suggest__meta { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); white-space: nowrap; }
.suggest__empty { padding: var(--space-3); font-size: 13px; color: var(--fg-3); }

/* --- палитра --- */

.palette {
 position: fixed;
 inset: 0;
 z-index: 90;
 display: grid;
 place-items: start center;
 padding-top: 12vh;
 background: rgba(0, 0, 0, .6);
 backdrop-filter: blur(3px);
}
.palette[hidden] { display: none; }
.palette__box {
 width: min(620px, calc(100vw - 32px));
 border: 1px solid var(--line-strong);
 border-radius: var(--radius-l);
 background: var(--surface);
 overflow: hidden;
 box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
.palette__input {
 width: 100%;
 height: 52px;
 padding: 0 var(--space-4);
 border: 0;
 border-bottom: 1px solid var(--line);
 background: none;
 color: var(--fg);
 font-size: 16px;
}
.palette__input:focus { outline: none; }
.palette__list { max-height: 52vh; overflow-y: auto; }
.palette__item {
 display: flex;
 align-items: baseline;
 gap: var(--space-2);
 width: 100%;
 padding: 10px var(--space-4);
 text-align: left;
 border-bottom: 1px solid var(--line);
}
.palette__item:last-child { border-bottom: 0; }
.palette__item[aria-selected="true"], .palette__item:hover { background: var(--accent-soft); }
.palette__name { font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; color: var(--fg); }
.palette__author { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.palette__cat { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); }
.palette__foot {
 display: flex;
 gap: var(--space-3);
 padding: var(--space-2) var(--space-4);
 border-top: 1px solid var(--line);
 font-size: 11px;
 color: var(--fg-3);
 font-family: var(--font-mono);
}

/* --- FAQ --- */

.faq { border-top: 1px solid var(--line); scroll-margin-top: 132px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
 display: grid;
 grid-template-columns: minmax(0, 560px) 22px;
 column-gap: 16px;
 align-items: center;
 padding: var(--space-4) 0;
 font-size: 16px;
 font-weight: 600;
 line-height: 1.4;
 cursor: pointer;
 list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
 content: "+";
 grid-column: 2;
 justify-self: start;
 font-family: var(--font-mono);
 font-size: 16px;
 line-height: 1;
 color: var(--fg-3);
}
.faq__item[open] .faq__q::after { content: "−"; color: var(--accent); }
.faq__a { padding: 0 0 var(--space-4); font-size: 14px; color: var(--fg-2); max-width: 70ch; }
@media (max-width: 700px) { .faq__q { grid-template-columns: minmax(0, 1fr) 22px; column-gap: 8px; } }

/* --- страница проверенных --- */

.toolbar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-3);
 margin-bottom: var(--space-5);
 padding-bottom: var(--space-3);
 border-bottom: 1px solid var(--line);
}
.toolbar__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tfbtn {
 padding: 4px 10px;
 border: 1px solid var(--line);
 border-radius: 999px;
 background: var(--surface);
 font-size: 12.5px;
 color: var(--fg-2);
 white-space: nowrap;
}
.tfbtn span { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); margin-left: 4px; }
.tfbtn:hover { border-color: var(--line-strong); color: var(--fg); }
.tfbtn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.tfbtn[aria-pressed="true"] span { color: var(--accent); }

.toolbar__sort { display: flex; align-items: center; gap: 4px; }
.tsort {
 padding: 4px 9px;
 border: 1px solid transparent;
 border-radius: 999px;
 font-family: var(--font-mono);
 font-size: 11.5px;
 color: var(--fg-3);
}
.tsort:hover { color: var(--fg); border-color: var(--line); }
.tsort[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.tested-note {
 margin-top: var(--space-6);
 padding-top: var(--space-4);
 border-top: 1px solid var(--line);
 font-size: 12px;
 color: var(--fg-3);
 max-width: 70ch;
}

/* --- модалка карточки --- */

.modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: var(--space-4); }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px); }
.modal__box {
 position: relative;
 width: min(720px, 100%);
 max-height: min(88vh, 900px);
 display: flex;
 flex-direction: column;
 border: 1px solid var(--line-strong);
 border-radius: var(--radius-l);
 background: var(--surface);
 box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
 overflow: hidden;
}
.modal__close {
 position: absolute;
 top: var(--space-3);
 right: var(--space-3);
 z-index: 2;
 width: 36px;
 height: 36px;
 border-radius: 999px;
 background: rgba(0, 0, 0, .55);
 color: #fff;
 font-size: 20px;
 line-height: 1;
}
.modal__close:hover { background: var(--accent); }
.modal__scroll { overflow-y: auto; overscroll-behavior: contain; }

/* Шапка-вьюер: фон без второй аватарки, слабое размытие */

.modal__hero {
 position: relative;
 display: block;
 width: 100%;
 height: 150px;
 padding: 0;
 border: 0;
 border-bottom: 1px solid var(--line);
 background: var(--surface-2);
 overflow: hidden;
 cursor: zoom-in;
}
.modal__hero::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 55%, rgba(0, 0, 0, .35));
 pointer-events: none;
}
.modal__hero-bg {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: blur(2px);
 transform: scale(1.04);
 opacity: .8;
}
.modal__hero:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.modal__hero:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.modal__hero-tip {
 position: absolute;
 left: 50%;
 bottom: 10px;
 z-index: 2;
 transform: translateX(-50%);
 padding: 3px 10px;
 border-radius: 999px;
 background: rgba(0, 0, 0, .68);
 color: #fff;
 font-size: 11px;
 font-family: var(--font-mono);
 white-space: nowrap;
 opacity: 0;
 transition: opacity var(--dur-fast) var(--ease-out);
 pointer-events: none;
}
.modal__hero:hover .modal__hero-tip,
.modal__hero:focus-visible .modal__hero-tip { opacity: 1; }

.modal__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.modal__top { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-3); align-items: start; }
.modal__top h2 { font-size: 20px; line-height: 1.2; }
.modal__author { font-size: 12.5px; color: var(--fg-3); }
.modal__metrics { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.modal__tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Описание: свёрнуто до пяти строк, кнопка раскрывает целиком */

.modal__desc-wrap { position: relative; }
.modal__desc { font-size: 14px; color: var(--fg-2); line-height: 1.55; white-space: pre-line; }
.modal__desc-wrap.is-clamped .modal__desc {
 display: -webkit-box;
 -webkit-line-clamp: 5;
 line-clamp: 5;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.modal__desc-toggle {
 align-self: flex-start;
 min-height: 0;
 margin-top: calc(var(--space-2) * -1);
 padding: 0;
 border: 0;
 background: none;
 color: var(--fg-2);
 font-size: 12px;
 font-weight: 600;
 border-bottom: 1px dashed var(--line-strong);
}
.modal__desc-toggle:hover { color: var(--fg); border-color: var(--accent); }
.modal__desc-toggle[hidden] { display: none; }

/* Хук в модалке: крупный акцентный блок */

.modal__hook {
 padding-left: 12px;
 border-left: 4px solid var(--accent);
 font-size: 21px;
 font-weight: 700;
 line-height: 1.25;
 letter-spacing: -.01em;
 color: var(--fg);
}

/* Ядро ответа: как сообщение в чате */

.modal__quote {
 position: relative;
 margin-top: 2px;
 padding: 14px 16px 14px 30px;
 border: 1px solid var(--line-strong);
 border-radius: 14px 14px 14px 4px;
 background: var(--surface-2);
 font-size: 13.5px;
 line-height: 1.6;
 color: var(--fg);
}
.modal__quote::before {
 content: "";
 position: absolute;
 left: 30px;
 top: 9px;
 width: 76px;
 height: 3px;
 border-radius: 999px;
 background: var(--line-strong);
 opacity: .5;
}
.modal__quote::after {
 content: "";
 position: absolute;
 left: 14px;
 top: 24px;
 bottom: 14px;
 width: 3px;
 border-radius: 999px;
 background: var(--accent);
}

.modal__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.modal__block { border-top: 1px solid var(--line); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.modal__label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }
.modal__list { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--fg-2); }
.modal__list li::before { content: "· "; color: var(--accent); }
.modal__note { font-size: 13px; color: var(--fg-3); }
.modal__disclaimer { font-size: 11.5px; color: var(--fg-3); border-top: 1px solid var(--line); padding-top: var(--space-3); }
.stamp--big { position: static; align-self: start; }

/* --- критерии, промпты, экономия --- */

.crit-list { display: flex; flex-direction: column; gap: 4px; }
.crit { display: grid; grid-template-columns: 1fr 90px 34px; gap: var(--space-2); align-items: center; font-size: 12.5px; }
.crit__label { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crit__bar { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.crit__bar i { display: block; height: 100%; background: var(--accent); }
.crit__val { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); text-align: right; }

.prompt { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 6px 10px; font-size: 12.5px; }
.prompt summary { cursor: pointer; color: var(--fg-2); }
.prompt pre { margin: var(--space-2) 0 0; white-space: pre-wrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); }

.saving { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.saving > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.saving dt { color: var(--fg-3); }
.saving dd { margin: 0; color: var(--fg-2); text-align: right; }
.saving__total { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--accent); }

/* --- полноразмерная картинка --- */

.lightbox {
 position: fixed;
 inset: 0;
 z-index: 120;
 display: grid;
 place-items: center;
 padding: var(--space-6);
 background: rgba(0, 0, 0, .88);
 backdrop-filter: blur(6px);
}
.lightbox img {
 max-width: min(92vw, 1200px);
 max-height: 88vh;
 border-radius: var(--radius-m);
 object-fit: contain;
 cursor: zoom-out;
}
.lightbox__close {
 position: absolute;
 top: var(--space-4);
 right: var(--space-4);
 width: 40px;
 height: 40px;
 border-radius: 999px;
 background: rgba(255, 255, 255, .14);
 color: #fff;
 font-size: 22px;
 line-height: 1;
}
.lightbox__close:hover { background: var(--accent); }

/* --- финал и подвал --- */

.final { padding: var(--space-7) 0; border-top: 1px solid var(--line); }
.final__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.footer { padding: var(--space-7) 0 var(--space-6); border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-2); }
.footer__grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer__title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); margin-bottom: var(--space-3); }
.footer__list { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__list a:hover { color: var(--fg); }
.footer__bottom {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-3);
 margin-top: var(--space-6);
 padding-top: var(--space-4);
 border-top: 1px solid var(--line);
 font-size: 12px;
 color: var(--fg-3);
}

/* --- служебное --- */

.loading { padding: var(--space-6); text-align: center; color: var(--fg-3); font-size: 14px; }

/* --- пасхалки: белый текст на обороте штампа --- */

.stamp__back {
 display: block;
 max-width: 140px;
 margin-top: 4px;
 font-family: var(--font-mono);
 font-size: 9.5px;
 line-height: 1.25;
 color: #fff;
}

/* --- мобильные --- */

@media (max-width: 559px) {
 .modal { padding: 0; align-items: end; }
 .modal__box { max-height: 92vh; border-radius: var(--radius-l) var(--radius-l) 0 0; }
 .modal__hook { font-size: 19px; }
}