:root { --blue: #0a63ff; --ink:#0b132b; --bg:#f6f8ff; --card:#fff; }
*{ box-sizing: border-box; }
body{ margin:0; font-family: -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--ink); background:var(--bg); }
header{ position:sticky; top:0; background:white; border-bottom:1px solid #e7e9f5; padding:12px; z-index:10; }
h1{ margin:0 0 8px; font-size:22px; color:var(--blue); }
h1 small{ font-weight:600; color:#5a627a; margin-left:6px; font-size:14px; }
nav{ display:flex; gap:8px; flex-wrap:wrap; }
nav button{ padding:8px 12px; border:1px solid #d6daf5; background:#fff; border-radius:10px; font-size:14px; }
nav button.active{ border-color:var(--blue); }
main#view{ padding:16px; }
.card{ background:var(--card); border:1px solid #e7e9f5; border-radius:16px; padding:16px; margin:12px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.card h2{ margin-top:0; }
label{ display:block; margin:8px 0 4px; font-weight:600; }
input, select, textarea{ width:100%; padding:12px; border:1px solid #d6daf5; border-radius:12px; font-size:16px; }
button.primary{ background:var(--blue); color:#fff; border:none; padding:12px 16px; border-radius:12px; font-size:16px; }
.badge{ display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid #d6daf5; font-size:12px; }
.grid{ display:grid; gap:12px; }
@media (min-width: 768px){ .grid.two{ grid-template-columns: 1fr 1fr; } }
hr{ border:0; border-top:1px dashed #e0e4f8; margin:12px 0; }
ul{ padding-left:18px; }
.small{ font-size:13px; color:#5a627a; }
.success{ border-color:#b5e3c9; background:#f1fbf5; }
.warn{ border-color:#ffd59e; background:#fff7ea; }
.danger{ border-color:#ffc4c4; background:#fff1f1; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:36px; }