:root {
    --brand: #0050B5;
    --border: #e2e8f0;
    --muted: #64748b;
    --error: #b00020;
    --success: #0a7e3b;
    --radius: 6px;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    padding: 0;
    font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #1a1a1a;
    background: #fff;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 16px; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.muted { color: var(--muted); }
nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
nav a { color: #1a1a1a; }
nav a.active { color: var(--brand); font-weight: 600; }
nav .nav-spacer { flex: 1; }
nav form { display: inline; margin: 0; }
nav .link-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--brand);
    cursor: pointer;
    font: inherit;
}
nav .link-btn:hover { text-decoration: underline; }
.flash {
    padding: 8px 12px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    border-left: 3px solid var(--muted);
    background: #f1f5f9;
}
.flash-success { background: #ecfdf5; border-left-color: var(--success); }
.flash-error { background: #fef2f2; border-left-color: var(--error); }
.flash-info { background: #eff6ff; border-left-color: var(--brand); }
form label {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
}
form input[type=text],
form input[type=email],
form input[type=password],
form input[type=number],
form textarea,
form select {
    display: block;
    width: 100%;
    max-width: 480px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    margin-bottom: 12px;
}
form input:focus,
form textarea:focus,
form select:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}
.btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-secondary { background: #fff; color: var(--brand); border-color: var(--brand); }
.btn-danger { background: var(--error); color: #fff; }
table { width: 100%; border-collapse: collapse; }
thead { background: #f8fafc; }
th { text-align: left; }
th, td { padding: 8px 12px; }
tr { border-bottom: 1px solid var(--border); }
tr:hover td { background: #f8fafc; }
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    background: #fff;
}
.login-card { max-width: 380px; margin: 48px auto; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric { font-size: 28px; font-weight: 600; margin-top: 4px; }
.recent { margin-top: 24px; }
footer { border-top: 1px solid var(--border); margin-top: 32px; font-size: 12px; }
@media (max-width: 640px) {
    .grid-2 { grid-template-columns: 1fr; }
}
.oauth-divider{display:flex;align-items:center;gap:8px;margin:12px 0;color:var(--muted);font-size:12px}
.oauth-divider::before,.oauth-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.oauth-btn{display:block;text-align:center;text-decoration:none;width:100%;max-width:480px}
.field{margin-bottom:12px}
.field input[type=checkbox]{display:inline-block;width:auto;margin:0 6px 0 0;vertical-align:middle}
.field label input[type=checkbox]+*{vertical-align:middle}
.form-actions{display:flex;gap:8px;align-items:center;margin-top:8px}
.confirm-dialog{border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;max-width:480px}
.confirm-dialog::backdrop{background:rgba(13,30,48,0.35)}
.confirm-dialog h3{margin:0 0 8px;font-size:16px}
.confirm-dialog p{margin:0 0 12px;color:var(--muted)}
.confirm-dialog input{display:block;width:100%;margin:8px 0 12px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);font:inherit}
.confirm-dialog .form-actions{justify-content:flex-end}
fieldset.repeater,fieldset.nested-object{border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin:0 0 12px}
fieldset.repeater legend,fieldset.nested-object legend{padding:0 6px;font-weight:600}
fieldset.repeater table{margin-bottom:8px}
fieldset.repeater td .field{margin:0}
fieldset.repeater td input{margin:0}
.btn-icon{background:none;border:0;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:0 4px}
.btn-icon:hover{color:var(--error)}
.stats-row{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.stat-total .metric{font-size:28px;font-weight:600}
.stat-types{display:flex;gap:8px;flex-wrap:wrap}
.type-tag{font-size:12px;padding:4px 8px;border:1px solid var(--border);border-radius:999px}
svg.sparkline{display:block;width:100%;max-width:300px;height:70px}