
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans Lao, sans-serif; background:#f8fafc; margin:0; }
.container { max-width: 980px; margin: 24px auto; background: white; padding: 24px; border-radius: 16px; box-shadow: 0 10px 20px rgba(0,0,0,.06); }
h1 { margin: 0 0 8px; font-size: 28px; }
small.muted { color:#6b7280; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }
label { display:block; font-weight:600; margin-bottom:6px; }
input, select, textarea { width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:12px; outline:none; }
textarea { min-height: 110px; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.checkbox { display:flex; align-items:center; gap:8px; }
.btn { display:inline-block; padding:12px 16px; border-radius:12px; border:0; cursor:pointer; text-decoration:none; }
.btn-primary { background:#2563eb; color:#fff; }
.btn-secondary { background:#e5e7eb; color:#111827; }
.badge { padding:4px 10px; border-radius:999px; background:#eef2ff; display:inline-block; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:10px 12px; border-bottom:1px solid #eee; vertical-align: top; }
.status { font-weight:600; }
.photo-grid { display:grid; grid-template-columns: repeat(6, 1fr); gap:8px; }
.photo-grid img { width:100%; border-radius:8px; border:1px solid #e5e7eb; }