:root { --primary: #4e73df; --secondary: #858796; --dark: #2c3e50; --light: #f8f9fc; --danger: #e74a3b; }
body { font-family: 'Segoe UI', sans-serif; margin: 0; background: var(--light); color: #333; }

header { background: var(--dark); padding: 1rem 0; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.header-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
header h1 { color: white; margin: 0; font-size: 1.5rem; }
.admin-link { color: rgba(255,255,255,0.8); text-decoration: none; font-weight: bold; }

.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; padding: 40px 20px; max-width: 1200px; margin: 0 auto; }
.card { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #e3e6f0; display:flex; flex-direction:column; }
.card img { width: 100%; height: 200px; object-fit: cover; }
.card-body { padding: 20px; flex-grow: 1; display:flex; flex-direction:column; }
.card-body h2 { font-size: 1.25rem; color: var(--dark); margin-top: 0; }
.read-more-btn { margin-top:auto; background: var(--primary); color: white; border: none; padding: 8px 16px; border-radius: 5px; cursor: pointer; text-decoration:none; text-align:center; }

.load-more-container { text-align: center; padding: 30px; width: 100%; grid-column: 1 / -1; }
.btn-load-more { background: white; border: 2px solid var(--primary); color: var(--primary); padding: 10px 25px; cursor: pointer; font-weight: bold; border-radius: 50px; transition:0.2s; display: inline-flex; align-items: center; gap: 10px; }
.btn-load-more:hover { background: var(--primary); color: white; }
.htmx-indicator { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.75s linear infinite; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-request.btn-load-more { opacity: 0.7; pointer-events: none; }
@keyframes spin { 100% { transform: rotate(360deg); } }

.modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); z-index: 9999; display: flex; justify-content: center; overflow-y: auto; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.modal-container:not(:empty) { opacity: 1; pointer-events: auto; }
.modal-content { background: white; width: 100%; max-width: 800px; margin: auto; border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.3); animation: slideUp 0.3s; display:flex; flex-direction:column; }
@keyframes slideUp { from { transform: translateY(50px); } to { transform: translateY(0); } }
.close-btn { position: absolute; top: 15px; right: 20px; font-size: 2rem; color: white; cursor: pointer; z-index: 10; text-shadow: 0 0 5px black; }
.hero-img { width: 100%; height: 350px; object-fit: cover; flex-shrink: 0; }
.content-body { padding: 30px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-top: 20px; }
.gallery-thumb { width: 100%; height: 100px; object-fit: cover; border-radius: 5px; cursor: pointer; }
.close-bottom-btn { display: block; width: 100%; margin-top: 40px; padding: 15px; background: #eee; color: #333; border: none; font-weight: bold; cursor: pointer; text-align: center; border-radius: 8px; transition: 0.2s; }
.close-bottom-btn:hover { background: #ddd; }

.dashboard-container { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.admin-card { background: white; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.1); padding: 25px; margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom: 1px solid #eee; text-align: left; }
.form-control { width: 100%; padding: 10px; margin: 5px 0 15px 0; border: 1px solid #ddd; border-radius: 4px; box-sizing:border-box; }
.btn-primary { background: var(--primary); color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
.btn-danger { background: var(--danger); color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
.btn-edit { background: #1cc88a; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; margin-right:5px; }

/* Gallery Management */
.existing-gallery-wrap { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }
.img-edit-wrapper { position: relative; width: 100px; height: 100px; border-radius: 4px; overflow: hidden; border: 1px solid #ccc; display:flex; flex-direction:column; }
.img-edit-wrapper img { width: 100%; height: 70px; object-fit: cover; }
.img-controls { display: flex; height: 30px; background: #eee; }
.btn-img-ctrl { flex: 1; border: none; cursor: pointer; font-weight: bold; transition:0.2s; font-size: 14px; padding:0; display:flex; align-items:center; justify-content:center; }
.btn-img-ctrl:hover { background: #ddd; }
.btn-remove-img { background: var(--danger); color: white; }
.btn-move { background: var(--dark); color: white; border-right:1px solid #555; }
.cover-preview-wrap { position:relative; width:150px; height:100px; margin-bottom:10px; }
.cover-preview-wrap img { width:100%; height:100%; object-fit:cover; border-radius:4px; }
.btn-remove-cover { position:absolute; top:-5px; right:-5px; background:red; color:white; border-radius:50%; width:20px; height:20px; border:none; cursor:pointer; font-weight:bold; }