*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f5f7fb;color:#111827}
header{height:64px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
header strong{font-size:18px;margin-right:12px}
main{max-width:1200px;margin:32px auto;padding:0 18px}
.grid{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:20px;align-items:start}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:22px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.narrow{max-width:420px;margin:80px auto}
h1,h2{margin-top:0}
.muted{color:#6b7280}
label{display:block;font-size:14px;font-weight:600;margin:14px 0}
input{width:100%;margin-top:6px;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font:inherit}
button{border:0;border-radius:8px;padding:10px 14px;background:#111827;color:#fff;font-weight:600;cursor:pointer}
button.secondary{background:#475569}
button.danger{background:#991b1b}
.flash{padding:12px 14px;border-radius:8px;margin-bottom:16px}
.flash.success{background:#ecfdf5;border:1px solid #a7f3d0}
.flash.error{background:#fef2f2;border:1px solid #fecaca}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 10px;border-bottom:1px solid #e5e7eb;vertical-align:top}
.table-wrap{overflow:auto}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#e5e7eb;font-size:12px}
.badge.enabled{background:#dcfce7}
.badge.disabled{background:#fee2e2}
details{margin-bottom:8px}
summary{cursor:pointer;font-weight:600}
.compact{display:grid;gap:7px;margin:8px 0}
.compact input{margin:0}
.inline{display:inline}
code{font-size:12px}
@media(max-width:800px){.grid{grid-template-columns:1fr}}


/* Xelpmoc branding */
header{min-height:72px;height:auto;background:#111827;border-bottom:1px solid #1f2937;color:#fff;padding:10px 24px}
.brand-wrap{display:flex;align-items:center;gap:16px;min-width:0}
.brand-logo{display:block;width:auto;height:34px;max-width:150px;object-fit:contain}
.brand-copy{display:flex;flex-direction:column;min-width:0}
.brand-copy strong{font-size:18px;line-height:1.2;margin:0;color:#fff}
.brand-subtitle{font-size:12px;color:#cbd5e1;margin-top:3px}
header form{margin:0}
header button.secondary{background:#374151;border:1px solid #4b5563}
@media(max-width:600px){header{padding:10px 14px}.brand-logo{height:28px}.brand-copy strong{font-size:15px}.brand-subtitle{font-size:11px}}