.xcockpit-prefabs-container{margin:1.5rem 0;clear:both}.xcockpit-prefabs-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.xcockpit-prefabs-grid.xcockpit-prefabs-columns-2{grid-template-columns:repeat(2,1fr)}.xcockpit-prefabs-grid.xcockpit-prefabs-columns-3{grid-template-columns:repeat(3,1fr)}.xcockpit-prefabs-grid.xcockpit-prefabs-columns-4{grid-template-columns:repeat(4,1fr)}.xcockpit-prefabs-list{display:flex;flex-direction:column;gap:1rem}.xcockpit-prefab-item{background:#fff;border:1px solid #e0e0e0;border-radius:6px;overflow:hidden;transition:box-shadow .2s ease , transform .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.08)}.xcockpit-prefab-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.12);transform:translateY(-1px)}.xcockpit-prefabs-list .xcockpit-prefab-item{display:flex;flex-direction:row}.xcockpit-prefabs-list .xcockpit-prefab-thumbnail{flex:0 0 180px;height:120px}.xcockpit-prefabs-list .xcockpit-prefab-content{flex:1;display:flex;flex-direction:column;justify-content:center}.xcockpit-prefab-thumbnail{position:relative;width:100%;height:160px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;overflow:hidden}.xcockpit-prefab-thumbnail img{width:100%;height:100%;object-fit:cover}.xcockpit-prefab-no-thumbnail{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.xcockpit-prefab-placeholder{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8)}.xcockpit-prefab-placeholder svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.xcockpit-prefab-content{padding:.75rem 1rem}.xcockpit-prefab-title{margin:0 0 .25rem 0;font-size:1.1rem;font-weight:600;line-height:1.3;color:#333}.xcockpit-prefab-description{margin:0 0 .5rem 0;font-size:.9rem;line-height:1.5;color:#666}.xcockpit-prefab-meta{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.8rem;color:#888;margin-top:.25rem}.xcockpit-prefab-author,.xcockpit-prefab-date{display:flex;align-items:center;gap:.25rem}.xcockpit-prefab-meta svg{flex-shrink:0;opacity:.7;width:14px;height:14px}.xcockpit-prefabs-empty{padding:2rem;text-align:center;background:#f9f9f9;border:1px dashed #ddd;border-radius:6px}.xcockpit-prefabs-empty p{margin:0;color:#666;font-size:.95rem}@media (max-width:992px){.xcockpit-prefabs-grid.xcockpit-prefabs-columns-4{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.xcockpit-prefabs-grid,.xcockpit-prefabs-grid.xcockpit-prefabs-columns-2,.xcockpit-prefabs-grid.xcockpit-prefabs-columns-3,.xcockpit-prefabs-grid.xcockpit-prefabs-columns-4{grid-template-columns:repeat(2,1fr);gap:1rem}.xcockpit-prefabs-list .xcockpit-prefab-item{flex-direction:column}.xcockpit-prefabs-list .xcockpit-prefab-thumbnail{flex:none;width:100%;height:160px}.xcockpit-prefab-content{padding:.6rem .8rem}.xcockpit-prefab-title{font-size:1rem}}@media (max-width:480px){.xcockpit-prefabs-container{margin:1rem 0}.xcockpit-prefabs-grid,.xcockpit-prefabs-grid.xcockpit-prefabs-columns-2,.xcockpit-prefabs-grid.xcockpit-prefabs-columns-3,.xcockpit-prefabs-grid.xcockpit-prefabs-columns-4{grid-template-columns:1fr}.xcockpit-prefab-thumbnail{height:140px}.xcockpit-prefab-title{font-size:.95rem}.xcockpit-prefab-description{font-size:.85rem}.xcockpit-prefab-meta{font-size:.75rem}}.xcockpit-prefab-item{cursor:pointer}.xcockpit-prefab-item:focus{outline:2px solid #667eea;outline-offset:2px}.xcockpit-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s ease , visibility .3s ease}.xcockpit-modal.xcockpit-modal-open{opacity:1;visibility:visible}.xcockpit-modal-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.75)}.xcockpit-modal-container{position:relative;background:#fff;border-radius:12px;max-width:900px;max-height:90vh;width:90%;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3);transform:scale(.95);transition:transform .3s ease}.xcockpit-modal.xcockpit-modal-open .xcockpit-modal-container{transform:scale(1)}.xcockpit-modal-close{position:absolute;top:12px;right:12px;z-index:10;background:rgba(255,255,255,.9);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease , transform .2s ease;box-shadow:0 2px 8px rgba(0,0,0,.15)}.xcockpit-modal-close:hover{background:#fff;transform:scale(1.1)}.xcockpit-modal-close svg{color:#333}.xcockpit-modal-content{display:flex;flex-direction:row;max-height:90vh}.xcockpit-modal-preview{flex:0 0 55%;background:#1a1a1a;display:flex;align-items:center;justify-content:center;min-height:400px;max-height:90vh;overflow:hidden}.xcockpit-modal-preview img{max-width:100%;max-height:90vh;object-fit:contain}.xcockpit-modal-no-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:rgba(255,255,255,.5);padding:2rem;text-align:center}.xcockpit-modal-details{flex:1;padding:1.5rem;overflow-y:auto;max-height:90vh}.xcockpit-modal-title{margin:0 0 1rem 0;font-size:1.5rem;font-weight:700;color:#222;line-height:1.3;padding-right:2rem}.xcockpit-modal-meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid #eee}.xcockpit-modal-meta-item{display:flex;flex-direction:column;gap:.2rem}.xcockpit-modal-meta-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:#888;font-weight:500}.xcockpit-modal-meta-value{font-size:.95rem;color:#333;font-weight:500}.xcockpit-modal-description-wrapper{margin-top:.5rem}.xcockpit-modal-description-title{margin:0 0 .5rem 0;font-size:.9rem;font-weight:600;color:#444}.xcockpit-modal-description{font-size:.95rem;line-height:1.7;color:#555;white-space:pre-wrap}@media (max-width:768px){.xcockpit-modal-content{flex-direction:column}.xcockpit-modal-preview{flex:none;min-height:200px;max-height:40vh}.xcockpit-modal-preview img{max-height:40vh}.xcockpit-modal-details{max-height:50vh;padding:1rem}.xcockpit-modal-title{font-size:1.25rem;padding-right:0}.xcockpit-modal-meta-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}.xcockpit-modal-close{top:8px;right:8px;width:36px;height:36px}}@media (max-width:480px){.xcockpit-modal-container{width:95%;border-radius:8px}.xcockpit-modal-preview{min-height:150px}.xcockpit-modal-title{font-size:1.1rem}.xcockpit-modal-meta-label{font-size:.7rem}.xcockpit-modal-meta-value{font-size:.85rem}.xcockpit-modal-description{font-size:.9rem}}