@charset "UTF-8";

.catalog-empty { color: var(--text-muted); font-size: var(--font-size-lg); }

.catalog-empty-icon { font-size: 64px; color: var(--border-color); margin-bottom: var(--space-md); display: block; }

.org-catalog-list { display: flex; flex-direction: column; gap: var(--space-lg); }

.org-catalog-card { display: flex; gap: var(--space-md); padding: var(--space-lg); text-decoration: none; color: inherit; transition: border-color var(--transition-fast); align-items: center; }

.org-catalog-card:hover { border-color: var(--accent-primary); }

.org-catalog-card-logo { width: 100px; height: 100px; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

.org-catalog-card-logo img { width: 100%; height: 100%; object-fit: contain; }

.org-catalog-card-logo i { font-size: 3rem; color: var(--text-muted); }

.org-catalog-card-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.org-catalog-card-type { font-size: var(--font-size-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-xs); }

.org-catalog-card-title { font-size: var(--font-size-lg); font-weight: 600; margin: 0 0 var(--space-xs) 0; color: var(--text-primary); overflow-wrap: anywhere; }

.org-catalog-card-desc { font-size: var(--font-size-sm); color: var(--text-secondary); margin: 0 0 var(--space-xs) 0; line-height: 1.5; }

.org-catalog-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); font-size: var(--font-size-sm); color: var(--text-muted); }

.org-catalog-card-animals { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }

.org-catalog-card[data-type="nursery"] { border-color: #72B66A33; }

.org-catalog-card[data-type="zooshop"] { border-color: #5B8DEF33; }

.org-catalog-card[data-type="exoterrarium"] { border-color: #9A6FD833; }

.org-catalog-card[data-type="zoopark"] { border-color: #D4A43A33; }

.org-catalog-card[data-type="zoocourier"] { border-color: #E98B3A33; }

[data-theme="dark"] .org-catalog-card[data-type="nursery"] { border-color: #5FCB7566; }

[data-theme="dark"] .org-catalog-card[data-type="zooshop"] { border-color: #6EA8FF66; }

[data-theme="dark"] .org-catalog-card[data-type="exoterrarium"] { border-color: #B089F766; }

[data-theme="dark"] .org-catalog-card[data-type="zoopark"] { border-color: #E7B94E66; }

[data-theme="dark"] .org-catalog-card[data-type="zoocourier"] { border-color: #F4A14B66; }

.top-users-table { display: flex; flex-direction: column; gap: 0; background: var(--border-color); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-color); margin-bottom: var(--space-lg); }

.top-user-row { display: grid; grid-template-columns: 120px minmax(200px, 1fr) 100px 220px 180px; gap: var(--space-md); align-items: center; padding: var(--space-md); background: var(--bg-primary); transition: background var(--transition-fast); }

.top-user-row:hover { background: var(--bg-secondary); }

.top-user-avatar { width: 120px; height: 120px; }

.top-user-avatar-link { display: block; width: 100%; height: 100%; text-decoration: none; }

.top-user-avatar-placeholder { width: 100%; height: 100%; background: var(--bg-tertiary); color: var(--text-muted); font-size: var(--font-size-3xl); font-weight: 700; line-height: 1; }

.top-user-badges { display: flex; gap: var(--space-xs); justify-content: center; margin-top: var(--space-xs); }

.top-user-badge-icon { width: 16px; height: 16px; border-radius: 50%; object-fit: contain; border: 1.5px solid var(--bg-primary); }

.top-user-info { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }

.top-user-name { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); text-decoration: none; }

.top-user-name:hover { color: var(--text-link); }

.top-user-username { font-size: var(--font-size-xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: var(--space-xs); }

.top-user-username i { font-size: var(--font-size-sm); }

.top-user-city { font-size: var(--font-size-xs); color: var(--text-secondary); }

.top-user-org-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }

.top-user-org-links .interest-chip { font-size: var(--font-size-xs); padding: var(--space-xs) var(--space-sm); }

.top-user-org-link { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: var(--accent-primary); font-size: var(--font-size-xs); }

.interest-chip-remove { color: inherit; text-decoration: none; font-size: 1.1rem; line-height: 1; }

.top-user-count { text-align: center; flex-shrink: 0; }

.top-user-count--hidden { visibility: hidden; }

.top-user-count-link { text-decoration: none; color: inherit; display: block; }

.top-user-count-value { display: block; font-size: var(--font-size-xl); font-weight: 700; color: var(--accent-primary); }

.top-user-count-label { display: block; font-size: var(--font-size-xs); color: var(--text-muted); }

.top-user-interests { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-content: flex-start; }

.interest-chip--more { background: var(--bg-tertiary); color: var(--text-muted); }

.top-user-actions { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; flex-shrink: 0; }

@media (max-width: 900px) {
    /* Топ-строки: 5 колонок не влезают уже на ~900px, компактная сетка как на смартфоне */
.top-user-row { grid-template-columns: 80px minmax(0, 1fr) 80px; gap: var(--space-sm); padding: var(--space-sm); }
    .top-user-avatar { width: 80px; height: 80px; }
    .top-user-interests { grid-column: 2 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
    .top-user-count { grid-column: 3; grid-row: 1; }
    .top-user-actions { display: none; }
}

@media (max-width: 768px) {
    .top-user-row { grid-template-columns: 60px 1fr 60px; gap: var(--space-xs); padding: var(--space-sm); }
    .top-user-avatar { width: 60px; height: 60px; }
    .top-user-interests { grid-column: 2 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
    .top-user-count { grid-column: 3; grid-row: 1; }
    .top-user-count-value { font-size: var(--font-size-base); }
    .top-user-count-label { font-size: var(--font-size-xs); }
    .top-user-actions { display: none; }
}

@media (max-width: 600px) {
    .checklists-filters .filter-group-wide,
    .checklists-filters .filter-group { flex: 1 1 100%; min-width: 0; }
    .checklists-filters .filter-actions { flex: 1 1 100%; }
}

.org-page { max-width: 960px; margin: 0 auto; }

.org-page-owner-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }

.org-page-owner { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--text-primary); }

.org-page-owner:hover .org-page-owner-name { color: var(--text-link); }

.org-page-owner-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; align-self: flex-start; }

.org-page-owner-avatar--placeholder { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-tertiary); color: var(--text-muted); font-weight: 700; font-size: var(--font-size-sm); }

.org-page-owner-info { line-height: 1.25; }

.org-page-owner-name { font-size: var(--font-size-sm); font-weight: 500; transition: color var(--transition-fast); display: block; }

.org-page-owner-label { font-size: var(--font-size-xs); color: var(--text-muted); display: block; }

.org-hero { display: flex; gap: var(--space-xl); align-items: flex-start; padding: var(--space-xl); background: var(--bg-secondary); border-radius: var(--radius-xl); margin-bottom: var(--space-xl); }

.org-hero-logo { width: 160px; height: 160px; border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; padding: var(--space-md); box-sizing: border-box; }

.org-hero-logo img { width: 100%; height: 100%; object-fit: contain; }

.org-hero-body { flex: 1; min-width: 0; }

.org-hero-type { display: inline-block; font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent-primary); background: rgba(61, 122, 82, 0.10); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); margin-bottom: var(--space-sm); }

.org-hero-title-row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

.org-hero-title { font-size: var(--font-size-3xl); font-weight: 700; margin: 0; color: var(--text-primary); line-height: 1.2; overflow-wrap: anywhere; }

/* Оптический центр крупного заголовка ниже центра его бокса, поэтому кнопка выглядит задранной — опускаем её на 4px */
.org-hero-title-row .profile-share-wrap { position: relative; top: var(--space-xs); flex-shrink: 0; }

.org-hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--space-xs); }

.org-hero-meta i { color: var(--accent-primary); margin-right: var(--space-hairline); }

.org-hero-desc { font-size: var(--font-size-lg); color: var(--text-primary); line-height: 1.6; margin: 0 0 var(--space-md) 0; }

.org-hero-animals { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.org-animal-tag { display: inline-block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full); font-size: var(--font-size-xs); color: var(--accent-primary); background: rgba(61, 122, 82, 0.10); text-decoration: none; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); }

.org-animal-tag:hover { background: var(--accent-primary); color: var(--text-inverse); }

.org-grid { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-xl); align-items: start; }

.org-section { margin-bottom: var(--space-xl); }

.org-section-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-md) 0; display: flex; align-items: center; gap: var(--space-sm); }

.org-section-title i { color: var(--accent-primary); }

.org-description { font-size: var(--font-size-base); line-height: 1.5; color: var(--text-primary); }

.org-description p { margin: 0 0 var(--space-sm) 0; }

.org-description p:last-child { margin-bottom: 0; }

.org-description ul, .org-description ol { margin: var(--space-xs) 0 var(--space-md) !important; padding: 0 0 0 var(--space-20) !important; font-size: 0; }

.org-description li { margin: 0 !important; padding: 0 !important; font-size: var(--font-size-base); line-height: 1.5; }

.org-description ul br, .org-description ol br { display: none; }

.org-description h3, .org-description h4 { font-size: var(--font-size-lg); margin: var(--space-md) 0 var(--space-xs) !important; color: var(--text-primary); }

.org-addresses { list-style: none; padding: 0; margin: 0; }

.org-addresses li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-color); font-size: var(--font-size-sm); }

.org-addresses li:last-child { border-bottom: none; }

.org-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.org-tag { display: inline-block; padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-full); font-size: var(--font-size-sm); color: var(--text-secondary); background: var(--bg-primary); }

.org-sidebar { position: sticky; top: 100px; }

.org-sidebar-card { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: var(--space-lg); }

.org-sidebar-title { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-md) 0; display: flex; align-items: center; gap: var(--space-sm); }

.org-sidebar-title i { color: var(--accent-primary); }

.org-contacts { display: flex; flex-direction: column; gap: var(--space-xs); }

.org-contact-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); text-decoration: none; color: var(--text-primary); font-size: var(--font-size-sm); font-weight: 600; border-radius: var(--radius-md); transition: background var(--transition-fast); min-height: 44px; }

.org-contact-item:hover { background: var(--bg-primary); }

.org-contact-item i { width: 20px; text-align: center; color: var(--accent-primary); font-size: var(--font-size-lg); flex-shrink: 0; }

.org-gallery-section { clear: both; }

.org-gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 200px; gap: var(--space-sm); }

.org-gallery-item { position: relative; cursor: pointer; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-secondary); }

.org-gallery-item:nth-child(1) { grid-column: span 8; grid-row: span 1; }

.org-gallery-item:nth-child(2) { grid-column: span 2; }

.org-gallery-item:nth-child(3) { grid-column: span 2; }

.org-gallery-item:nth-child(n+4) { grid-column: span 3; }

.org-gallery-item:only-child { grid-column: span 12; }

.org-gallery-item:first-child:nth-last-child(2) { grid-column: span 8; }

.org-gallery-item:first-child:nth-last-child(2) + .org-gallery-item { grid-column: span 4; }

.org-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }

.org-gallery-item:hover img { transform: scale(1.05); }

.org-gallery-item::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.3s ease; pointer-events: none; }

.org-gallery-item:hover::after { background: rgba(0,0,0,0.1); }

@media (max-width: 768px) {
    .org-hero { flex-direction: column; align-items: center; text-align: center; padding: var(--space-lg); }
    .org-hero-logo { width: 120px; height: 120px; }
    .org-hero-title-row { display: block; text-align: center; }
    .org-hero-title { display: inline; font-size: var(--font-size-2xl); }
    .org-hero-title-row .profile-share-wrap { vertical-align: middle; top: 0; margin-left: var(--space-xs); }
    .org-hero-meta { justify-content: center; }
    .org-hero-animals { justify-content: center; }
    .org-grid { grid-template-columns: 1fr; }
    .org-sidebar { position: static; margin-bottom: var(--space-lg); }
    .org-gallery-section { margin-top: var(--space-lg); }
    .org-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: var(--space-xs); }
    .org-gallery-item { border-radius: var(--radius-sm); }
    .org-gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
    .org-gallery-item:nth-child(2) { grid-column: span 1; }
    .org-gallery-item:nth-child(3) { grid-column: span 1; }
    .org-gallery-item:nth-child(n+4) { grid-column: span 1; }
    .org-gallery-item:only-child { grid-column: span 2; }
    .org-gallery-item:first-child:nth-last-child(2) { grid-column: span 2; }
    .org-gallery-item:first-child:nth-last-child(2) + .org-gallery-item { grid-column: span 1; }
}

.checklists-filters { background: var(--bg-secondary); padding: var(--space-lg); border-radius: var(--radius-lg); margin-bottom: var(--space-lg); display: flex; gap: var(--space-md); align-items: end; flex-wrap: wrap; }

.checklists-filters .filter-group-wide { flex: 1; min-width: 200px; }

.checklists-filters .filter-group { min-width: 140px; }

.checklists-filters .filter-actions { display: flex; gap: var(--space-sm); flex-shrink: 0; }

.checklists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }

.checklist-card { display: block; padding: var(--space-lg); text-decoration: none; color: inherit; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }

.checklist-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--accent-primary); }

.checklist-card:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.checklist-card-head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }

.checklist-card-head .checklist-card-icon { margin-bottom: 0; }

.checklist-card-head .checklist-card-category { margin-top: 0; margin-left: auto; white-space: nowrap; flex-shrink: 0; }

.checklist-card-icon { font-size: 70px; color: var(--accent-primary); margin-bottom: var(--space-sm); line-height: 1; }

.checklist-card-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); margin: 0 0 var(--space-xs); }

.checklist-card-subtitle { font-size: var(--font-size-sm); color: var(--text-secondary); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.checklist-card-category { display: inline-block; margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm); background: var(--bg-tertiary); color: var(--text-muted); border-radius: var(--radius-full); font-size: var(--font-size-xs); }

.checklist-card-image { height: 70px; width: auto; max-width: 90px; object-fit: contain; flex-shrink: 0; vertical-align: top; display: block; }

@media (max-width: 768px) {
    .checklists-grid { grid-template-columns: 1fr; }
    .checklist-card-icon { font-size: 75px; }
    .checklist-card-image { height: 75px; max-width: 100px; }
}

.checklist-page { max-width: 100%; }

.checklist-header {
    margin-bottom: var(--space-lg);
}

.checklist-identity { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--space-lg); align-items: start; }

.checklist-header-image { width: 100px; height: 100px; object-fit: contain; flex-shrink: 0; border-radius: var(--radius-md); }

.checklist-header-info { min-width: 0; }

.checklist-header-info h1 { margin: 0; font-size: var(--font-size-3xl); }

.checklist-subtitle { font-size: var(--font-size-base); color: var(--text-secondary); margin: 0 0 var(--space-xs); }

.checklist-desc { color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.5; margin: 0; }

.checklist-desc ul, .checklist-desc ol { margin: var(--space-sm) 0; padding-left: var(--space-lg); color: inherit; font-size: inherit; }

.checklist-desc li { margin-bottom: var(--space-xs); color: inherit; font-size: inherit; }

.checklist-desc p { margin: var(--space-xs) 0; color: inherit; font-size: inherit; }

.checklist-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
}

.checklist-toolbar-title { font-weight: 700; white-space: nowrap; }

.checklist-toolbar-controls { display: flex; align-items: center; gap: var(--space-md); min-width: 0; flex: 1; }

.checklist-progress { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; flex: 1; }

.progress-meta { font-size: var(--font-size-sm); color: var(--text-secondary); white-space: nowrap; }

.progress-track {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
    flex: 1;
    min-width: 90px;
}

.progress-fill { width: 0; height: 100%; background: var(--accent-danger); border-radius: inherit; transition: width 0.3s ease, background-color 0.3s ease; }

.progress-percent { font-weight: 700; white-space: nowrap; }

.progress-status { font-size: var(--font-size-xs); color: var(--text-muted); white-space: nowrap; }

.checklist-section-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: var(--space-lg) 0 var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-color);
}

.checklist-item { display: flex; align-items: center; padding: 0; border-bottom: 1px solid var(--border-color); cursor: pointer; }

.checklist-item:last-child { border-bottom: none; }

.checklist-item-text { flex: 1; min-width: 0; padding: var(--space-sm) var(--space-md); }

.checklist-item-text strong { display: block; font-weight: 500; font-size: var(--font-size-base); }

.checklist-item-text small { display: block; color: var(--text-muted); margin-top: var(--space-xs); font-size: var(--font-size-sm); }

.checklist-item-text small ul, .checklist-item-text small ol { margin: var(--space-xs) 0; padding-left: var(--space-md); color: inherit; font-size: inherit; }

.checklist-item-text small li { margin-bottom: var(--space-xs); color: inherit; font-size: inherit; }

.checklist-item-text small p { margin: var(--space-xs) 0; color: inherit; font-size: inherit; }

.checklist-check-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex-shrink: 0;
}

.checklist-mandatory-icon { color: var(--accent-danger); font-size: var(--font-size-sm); vertical-align: middle; margin-left: var(--space-xs); }

.checklist-mandatory-legend { margin-top: var(--space-lg); font-size: var(--font-size-xs); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-xs); }

.checklist-mandatory-legend .checklist-mandatory-icon { font-size: var(--font-size-sm); }

@media (max-width: 768px) {
    .checklist-identity { grid-template-columns: 1fr; gap: var(--space-md); }
    .checklist-header-image { width: 120px; height: 120px; margin: 0 auto; }
    .checklist-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-sm); padding: var(--space-sm); }
    .checklist-toolbar-controls { flex-wrap: wrap; row-gap: var(--space-sm); }
    .checklist-progress { flex-basis: auto; flex-grow: 1; min-width: 0; order: 0; }
    .checklist-progress .progress-track { min-width: 0; }
    .checklist-header-info h1 { font-size: var(--font-size-2xl); }
}

@media print {
    .checklist-header { background: none; border: none; box-shadow: none; padding: 0; margin-bottom: var(--space-md); }
    .checklist-check-wrap { background: none; border-left: none; }
}

@media (max-width: 768px) {
    .checklist-section-title { margin-top: var(--space-md); }
    .checklist-check-wrap { min-width: 48px; padding: 0; }
}

.checklist-cta {
    margin-top: var(--space-2xl);
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    text-align: center;
}

.test-page {
    --test-danger-dim: rgba(181, 77, 77, 0.08);
    max-width: 760px;
    margin: 0 auto;
}

[data-theme="dark"] .test-page { --test-danger-dim: rgba(242, 122, 122, 0.10); }

.test-header { margin-bottom: var(--space-lg); }

.test-header h1 { margin: 0; font-size: var(--font-size-3xl); line-height: 1.15; }

.doc-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); margin-bottom: var(--space-md); }

.doc-meta-cat,
.doc-meta-interests,
.doc-meta-author,
.doc-meta-date {
    display: inline-flex;
    align-items: center;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    padding: var(--space-xs) 9px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    line-height: 1.2;
}

.doc-meta-cat > i,
.doc-meta-interests > i,
.doc-meta-author > i,
.doc-meta-date > i { color: var(--accent-primary); margin-right: var(--space-xs); flex-shrink: 0; --icon-nudge: 0.08em; }

.doc-meta-author a { color: var(--accent-primary); text-decoration: none; }

.doc-meta-author a:hover { text-decoration: underline; }

.doc-meta-interest { color: var(--accent-primary); text-decoration: none; font-size: var(--font-size-sm); }

.doc-meta-interest:hover { text-decoration: underline; }

/* Запятая живёт в обёртке, но вне ссылки: не подчёркивается и не кликается.
   Пробел после неё даёт gap между обёртками. */
.doc-meta-interest-item {
    display: inline-flex;
    align-items: baseline;
}

.doc-meta-interest-item:not(:last-child)::after {
    content: ',';
    color: var(--text-muted);
}

.test-desc { color: var(--text-secondary); font-size: var(--font-size-base); margin: 0; max-width: 100%; }

.test-desc p:last-child { margin-bottom: 0; }

.test-desc ul, .test-desc ol { margin: var(--space-sm) 0; padding-left: var(--space-lg); font-size: inherit; color: inherit; }

.test-desc li { margin-bottom: var(--space-xs); }

.test-progress {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
}

.test-progress-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: var(--space-md); margin-bottom: var(--space-sm); }

.test-progress-label { font-weight: 700; white-space: nowrap; }

.test-progress-percent { font-weight: 700; color: var(--accent-primary); white-space: nowrap; }

.test-progress-track { height: 8px; background: var(--bg-tertiary); border-radius: var(--radius-full); overflow: hidden; }

.test-progress-fill { height: 100%; width: 0; background: var(--accent-primary); border-radius: inherit; transition: width 0.25s ease; }

.test-question-area { min-height: 250px; }

.test-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-xl);
}

.test-card.enter { animation: test-card-in 0.3s ease; }

.test-question-meta { display: flex; align-items: center; gap: var(--space-sm); color: var(--accent-primary); font-weight: 700; margin-bottom: var(--space-md); }

.test-question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--accent-success-dim);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

.test-question-label { font-size: var(--font-size-sm); }

.test-question-text { font-size: var(--font-size-2xl); line-height: 1.3; margin: 0 0 var(--space-lg); }

.test-answers { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }

.test-answer.selected { border-color: var(--accent-primary); background: var(--accent-success-dim); }

.test-answer.selected .test-answer-key { background: var(--accent-primary); color: var(--text-on-accent); }

.test-answer.correct { border-color: var(--accent-success); background: var(--accent-success-dim); }

.test-answer.correct .test-answer-key { background: var(--accent-success); color: var(--text-on-accent); }

.test-answer.wrong { border-color: var(--accent-danger); background: var(--test-danger-dim); }

.test-answer.wrong .test-answer-key { background: var(--accent-danger); color: var(--text-on-accent); }

.test-answers.is-locked .test-answer { cursor: default; pointer-events: none; }

.test-answers.is-locked .test-answer:hover { border-color: var(--border-color); background: var(--bg-primary); }

.test-answers.is-locked .test-answer.selected:hover,
.test-answers.is-locked .test-answer.correct:hover,
.test-answers.is-locked .test-answer.wrong:hover { border-color: inherit; }

.test-answers.is-locked .test-answer.selected:hover { background: var(--accent-success-dim); }

.test-answers.is-locked .test-answer.correct:hover { background: var(--accent-success-dim); }

.test-answers.is-locked .test-answer.wrong:hover { background: var(--test-danger-dim); }

.test-feedback {
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}

.test-feedback-head { font-weight: 700; margin-bottom: var(--space-xs); }

.test-feedback.correct { background: var(--accent-success-dim); border-color: var(--accent-success); }

.test-feedback.correct .test-feedback-head { color: var(--accent-success); }

.test-feedback.wrong { background: var(--test-danger-dim); border-color: var(--accent-danger); }

.test-feedback.wrong .test-feedback-head { color: var(--accent-danger); }

.test-feedback-text { font-size: var(--font-size-sm); color: var(--text-secondary); }

.test-feedback-text p { margin: 0 0 var(--space-xs); }

.test-feedback-text p:last-child { margin-bottom: 0; }

.test-feedback-text .test-feedback-note { color: var(--text-primary); }

.test-question-actions { display: flex; justify-content: flex-end; }

.test-textarea { width: 100%; padding: var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-lg); font-family: inherit; font-size: var(--font-size-base); background: var(--bg-primary); color: var(--text-primary); resize: vertical; }

.test-textarea:focus { border-color: var(--accent-primary); outline: none; box-shadow: var(--focus-ring); }

.test-range-slider { width: 100%; height: 8px; -webkit-appearance: none; appearance: none; background: var(--bg-tertiary); border-radius: var(--radius-full); outline: none; }

.test-range-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-primary); cursor: pointer; border: 3px solid var(--bg-primary); box-shadow: var(--shadow-sm); }

.test-range-slider::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-primary); cursor: pointer; border: 3px solid var(--bg-primary); box-shadow: var(--shadow-sm); }

.test-result {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}

.test-result-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--accent-success-dim);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.test-result-title { font-size: var(--font-size-2xl); font-weight: 700; margin: 0; }

.test-result-score { font-size: 3.5rem; font-weight: 800; line-height: 1; color: var(--accent-primary); margin: var(--space-md) 0 var(--space-xs); }

.test-result-sub { color: var(--text-muted); }

.test-result-text { max-width: 620px; margin: var(--space-md) auto 0; color: var(--text-secondary); }

.test-result-actions { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); flex-wrap: wrap; }

.test-categories { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }

.test-categories .btn { border-color: transparent; }

.test-category-count { display: inline-flex; align-items: center; gap: var(--space-xs); margin-left: var(--space-xs); font-weight: 500; opacity: 0.65; font-variant-numeric: tabular-nums; }

.test-category-count::before { content: "·"; font-weight: 700; opacity: 0.8; }

.test-card-header { display: flex; align-items: center; gap: var(--space-sm); }

.test-card-header .checklist-card-icon { margin-bottom: 0; }

.test-card-badge { margin-left: auto; font-size: var(--font-size-xs); background: var(--bg-tertiary); color: var(--text-muted); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full); font-weight: 600; white-space: nowrap; }

.test-card-badge .las { color: var(--accent-primary); }

.test-card-category { font-size: var(--font-size-xs); padding-top: var(--space-sm); }

.test-card-image { height: 70px; width: auto; max-width: 90px; object-fit: contain; flex-shrink: 0; vertical-align: top; display: block; }

@media (max-width: 768px) {
    .test-header h1 { font-size: var(--font-size-2xl); }
    .test-progress { padding: var(--space-md); }
    .test-progress-top { gap: var(--space-sm); }
    .test-card { padding: var(--space-lg) var(--space-md); }
    .test-question-text { font-size: var(--font-size-xl); }
    .test-question-actions .btn { width: 100%; }
    .test-result { padding: var(--space-xl) var(--space-md); }
    .test-result-score, .test-range-value { font-size: 3rem; }
    .test-card-image { height: 75px; max-width: 100px; }
}

.test-result-row {display:flex;gap:var(--space-sm);margin-bottom:var(--space-sm);align-items:center}

.test-result-row .form-control {flex:1}

.interest-hero { background: linear-gradient(135deg, #24483a 0%, var(--accent-primary) 100%); border-radius: var(--radius-xl); padding: var(--space-xl) var(--space-lg); margin-bottom: var(--space-xl); }

.interest-hero h1 { color: #fff; margin: 0 0 var(--space-sm); font-size: var(--font-size-2xl); line-height: 1.2; }

.interest-hero p { color: rgba(255,255,255,0.88); margin: 0; max-width: 68ch; }

.interest-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); margin-top: var(--space-lg); }

.interest-stat { background: rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: var(--space-md); text-align: center; }

.interest-stat b { display: block; color: #fff; font-size: var(--font-size-2xl); line-height: 1.1; font-weight: 700; }

.interest-stat span { display: block; color: rgba(255,255,255,0.82); font-size: var(--font-size-xs); margin-top: var(--space-hairline); }

.interest-section { margin-bottom: var(--space-xl); }

.interest-section-head { margin-bottom: var(--space-md); }

.interest-section-head h2 { margin: 0; font-size: var(--font-size-xl); color: var(--text-primary); }

.interest-section-head p { margin: var(--space-xs) 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); }

.interest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }

.interest-card { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); text-decoration: none; color: inherit; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); min-width: 0; }

.interest-card:hover { box-shadow: var(--shadow-sm); border-color: var(--accent-primary); }

.interest-card:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.interest-card-thumb { width: 52px; height: 52px; flex: none; border-radius: var(--radius-md); overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary)); color: var(--text-muted); font-size: 20px; }

.interest-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.interest-card-body { flex: 1; min-width: 0; }

.interest-card-title { margin: 0; font-size: var(--font-size-sm); font-weight: 600; line-height: 1.3; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.interest-card:hover .interest-card-title { color: var(--text-link); }

.interest-card-subtitle { margin: var(--space-hairline) 0 0; font-size: var(--font-size-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.interest-card-count { margin: var(--space-xs) 0 0; font-size: var(--font-size-xs); font-weight: 600; color: var(--accent-primary); }

.interest-card-more { flex: none; font-size: var(--font-size-xs); color: var(--text-muted); }

.interest-card:hover .interest-card-more { color: var(--accent-primary); }

@media (max-width: 900px) {
    .interest-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .interest-stats { grid-template-columns: repeat(2, 1fr); }
    .interest-hero { padding: var(--space-lg) var(--space-md); }
}

@media (max-width: 650px) {
    .interest-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .interest-grid { grid-template-columns: 1fr; }
}

.interests-hero { display: grid; grid-template-columns: 1fr auto; gap: var(--space-xl); align-items: end; padding: var(--space-xl) 0 var(--space-2xl); }

.interests-eyebrow { margin: 0 0 var(--space-sm); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-primary); font-weight: 800; }

.interests-hero h1 { margin: 0 0 var(--space-md); font-size: clamp(34px, 5vw, 46px); line-height: 1.05; letter-spacing: -0.045em; color: var(--text-primary); }

.interests-lead { max-width: 650px; margin: 0; color: var(--text-secondary); font-size: var(--font-size-lg); }

.interests-stats { display: flex; gap: var(--space-xl); }

.interests-stat b { display: block; font-size: var(--font-size-2xl); line-height: 1.1; color: var(--text-primary); }

.interests-stat span { color: var(--text-muted); font-size: var(--font-size-sm); }

.interests-section { margin-bottom: var(--space-2xl); }

.interests-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-md); }

.interests-section-head h2 { margin: 0; font-size: var(--font-size-xl); letter-spacing: -0.02em; color: var(--text-primary); }

.interests-note { font-size: var(--font-size-sm); color: var(--text-muted); }

.interests-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }

.interests-card { display: flex; flex-direction: column; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: var(--space-lg); min-height: 145px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); }

.interests-card:hover { border-color: var(--accent-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.interests-card:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.interests-card small { color: var(--text-muted); font-size: var(--font-size-xs); margin-bottom: auto; }

.interests-card strong { font-size: var(--font-size-xl); letter-spacing: -0.03em; margin: var(--space-sm) 0; color: var(--text-primary); }

.interests-card > span { display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: var(--font-size-sm); }

.interests-card > span b { color: var(--accent-primary); font-size: var(--font-size-lg); font-weight: 700; }

.interests-directory { margin-top: var(--space-2xl); }

.interests-toolbar { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); }

.interests-btn { border: 1px solid var(--border-color); background: var(--bg-primary); border-radius: var(--radius-full); padding: var(--space-sm) var(--space-md); font: inherit; font-size: var(--font-size-sm); color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }

.interests-btn:hover { border-color: var(--border-color-strong); color: var(--text-primary); }

.interests-btn.is-active { background: var(--bg-inverse); border-color: var(--bg-inverse); color: var(--text-inverse); }

.interests-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.interests-list { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-xl); overflow: hidden; }

.interests-listhead,
.interests-row { display: grid; grid-template-columns: 1fr 190px 140px 30px; gap: var(--space-md); align-items: center; padding: var(--space-md) var(--space-lg); }

.interests-listhead { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); color: var(--text-muted); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; }

.interests-row { min-height: 56px; border-bottom: 1px solid var(--border-color); text-decoration: none; color: inherit; transition: background var(--transition-fast); }

.interests-row:last-child { border-bottom: 0; }

.interests-row:hover { background: var(--bg-secondary); }

.interests-row:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }

.interests-row strong { font-weight: 650; color: var(--text-primary); }

.interests-row span { font-size: var(--font-size-sm); color: var(--text-muted); }

.interests-row span + span { color: var(--text-primary); font-weight: 600; }

.interests-row b { text-align: right; color: var(--text-muted); font-size: var(--font-size-lg); }

.interests-empty { padding: var(--space-xl); text-align: center; color: var(--text-muted); }

.interests-foot { margin: var(--space-md) 0 0; font-size: var(--font-size-xs); color: var(--text-muted); }

@media (max-width: 768px) {
    .interests-hero { display: block; padding: var(--space-xl) 0 var(--space-xl); }
    .interests-hero h1 { font-size: 34px; }
    .interests-stats { margin-top: var(--space-lg); }
    .interests-cards { grid-template-columns: repeat(2, 1fr); }
    .interests-listhead { display: none; }
    .interests-row { grid-template-columns: 1fr 80px 24px; }
    .interests-row span:first-of-type { display: none; }
    .interests-row span + span { text-align: right; }
}

@media (max-width: 480px) {
    .interests-cards { grid-template-columns: 1fr; }
}