.rs-layouts-dir { max-width: 1100px; margin: 0 auto; }
.rs-layouts-dir-header { margin-bottom: 1rem; }
.rs-layouts-dir-lead { margin: 0.25rem 0 0.75rem; max-width: 40rem; }
.rs-layouts-dir-links { font-size: 0.95rem; margin: 0.5rem 0 1rem; }
.rs-layouts-search { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.rs-layouts-search input[type="search"] { flex: 1 1 200px; min-width: 0; max-width: 100%; }
.rs-layouts-cats { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin: 0.75rem 0 1rem; font-size: 0.9rem; }
.rs-layouts-sort { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; align-items: center; }
.rs-layouts-sort a.rs-active { font-weight: bold; text-decoration: underline; }
.rs-layouts-section { margin: 1.5rem 0; }
.rs-layouts-hint, .rs-layouts-empty { opacity: 0.85; }
.rs-layouts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
}
.rs-layout-card {
    border: 1px solid var(--rs-border, #b8c4d4);
    background: var(--rs-box-bg, #fff);
    padding: 0.5rem;
    min-width: 0;
}
.rs-layout-card-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: #c9d6e8; }
.rs-layout-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-layout-card-placeholder {
    aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #9eb6d4, #dfeaf7); font-size: 2rem; color: #334;
}
.rs-layout-card-title { font-size: 1.05rem; margin: 0.4rem 0 0.2rem; word-break: break-word; }
.rs-layout-card-meta, .rs-layout-card-cat, .rs-layout-card-stats { font-size: 0.85rem; margin: 0.15rem 0; }
.rs-layout-card-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.rs-layout-badge {
    display: inline-block; font-size: 0.75rem; padding: 0.1rem 0.35rem;
    border: 1px solid #888; background: #f3f0e8;
}
.rs-layout-badge-official { background: #e8f0ff; border-color: #456; }
.rs-layouts-pager { display: flex; gap: 1rem; margin: 1rem 0; align-items: center; }
.rs-layout-detail-grid {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem;
}
.rs-layout-detail-preview img { width: 100%; height: auto; display: block; border: 1px solid #ccc; }
.rs-layout-detail-ph { min-height: 200px; }
.rs-layout-meta-list { padding-left: 1.1rem; }
.rs-layout-detail-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }
.rs-layout-stars { display: flex; gap: 0.2rem; }
.rs-star-btn { background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: #bbb; padding: 0; }
.rs-star-btn.rs-active, .rs-star-btn:hover { color: #c90; }
.rs-layout-modal {
    border: 2px solid #445; padding: 0; max-width: min(420px, 94vw);
}
.rs-layout-modal-inner { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.rs-layout-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.5rem; }
.rs-layouts-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.rs-layouts-table th, .rs-layouts-table td { border-bottom: 1px solid #ccc; padding: 0.4rem; text-align: left; vertical-align: top; }
.rs-layouts-table-actions { white-space: normal; }
.rs-layouts-ack { display: block; margin: 0.75rem 0; }
.rs-layouts-code-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 360px; }
.rs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.rs-layout-update { background: #fff6d5; border: 1px solid #c9a227; padding: 0.5rem 0.75rem; }
@media (max-width: 800px) {
    .rs-layout-detail-grid { grid-template-columns: 1fr; }
    .rs-layouts-table { display: block; overflow-x: auto; }
}