body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; margin: 0; background:#f6f7fb; }
header { background:#111827; color:#fff; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; gap:12px;}
main { padding: 18px; max-width: 1100px; margin: 0 auto; }
.card { background:#fff; border-radius:12px; padding:16px; box-shadow: 0 2px 10px rgba(0,0,0,.06); margin-bottom:12px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn { padding:10px 12px; border-radius:10px; border:1px solid #ddd; background:#fff; cursor:pointer; text-decoration:none; display:inline-block;}
.btn.primary { background:#111827; color:#fff; border-color:#111827; }
.small { color:#6b7280; font-size: 12px; }
.input { padding:10px 12px; border-radius:10px; border:1px solid #ddd; width: 320px; max-width: 100%; }
.table { width:100%; border-collapse: collapse; }
.table th,.table td { padding:10px; border-bottom:1px solid #eee; text-align:left; vertical-align:top; }
.badge { display:inline-block; padding:3px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; }
pre { background:#0b1020; color:#e5e7eb; padding:12px; border-radius:10px; overflow:auto; }

/* Branding */
.brand{display:flex;align-items:center;gap:12px;}
.logo{height:32px;width:auto;display:block;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-title{font-weight:700;}
.brand-sub{font-size:12px;opacity:.8;}
header{background:linear-gradient(90deg,#0b1220,#111827);}