/* Base helpers and admin UX improvements */
:root{
	--bg:#ffffff;
	--muted:#7f8aa3;
	--primary:#10162a;
	--success:#388e3c;
	--danger:#d32f2f;
	--card:#f8fbff;
}
html,body{height:100%}
body{background:var(--bg);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;color:#0b0f1a;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:20px}

/* Buttons */
.btn{display:inline-block;padding:8px 14px;border-radius:10px;border:0;cursor:pointer;background:var(--primary);color:#fff}
.btn.small{padding:6px 10px;font-size:12px}
.btn.ghost{background:transparent;color:var(--primary);border:1px solid #e6eaf2}
.btn.danger{background:var(--danger)}
.btn.success{background:var(--success)}

/* Form helpers */
.form-row{display:flex;gap:10px;align-items:center}
.form-row > *{flex:1}
label{font-weight:600;display:block;margin:10px 0 6px}
input[type=text], input[type=file], select, textarea{width:100%;padding:10px;border:1px solid #ccd2e0;border-radius:10px;box-sizing:border-box}

/* Card */
.card{border:1px solid #eef0f4;border-radius:14px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.04);padding:16px}

/* Toast notifications */
#toast-container{position:fixed;right:18px;top:18px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;padding:10px 14px;border-radius:8px;color:#fff;min-width:160px;box-shadow:0 6px 18px rgba(12,18,34,.12);font-size:13px}
.toast.info{background:#2f3b6e}
.toast.success{background:var(--success)}
.toast.error{background:var(--danger)}

/* Image preview */
.img-preview{display:block;margin-top:8px;border-radius:8px;max-width:220px;max-height:140px;object-fit:cover;border:1px solid #e8edf7;padding:4px;background:#fafbfd}

/* Small helpers */
.muted{color:var(--muted)}
.pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#f1f3f8;font-size:12px}

/* Table */
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid #eef0f4;padding:10px;text-align:left}

/* Content table used in posts (clear borders and header styling) */
.content-table{border-collapse:collapse;border:1px solid #e6eef8}
.content-table th, .content-table td{border:1px solid #e8eef7;padding:10px;text-align:left}
.content-table th{background:#f6f8fc;font-weight:600}
.content-table tr:nth-child(even) td{background:#fbfdff}

/* Image item styling for gallery */
.img-item{display:inline-block;margin:6px;text-align:center;cursor:pointer}
.img-item img{border-radius:6px;border:2px solid #eef0f4;padding:2px}

/* Responsive tweaks */
@media (max-width:900px){
	.grid{grid-template-columns:1fr}
}