:root {
--brand: #123c69;
--brand-light: #1c5a9e;
--bg: #f4f6f9;
--card-bg: #ffffff;
--text: #1f2937;
--muted: #6b7280;
--border: #e2e5ea;
--danger: #b3261e;
--danger-bg: #fdecea;
--success: #1e7e34;
--success-bg: #eaf7ec;
}

* { box-sizing: border-box; }

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--bg);
color: var(--text);
}

.page-center {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}

.card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 36px;
width: 100%;
max-width: 400px;
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.card.wide {
max-width: 960px;
}

.brand {
text-align: center;
margin-bottom: 24px;
}

.brand h1 {
font-size: 20px;
margin: 0;
color: var(--brand);
}

.brand p {
margin: 4px 0 0;
color: var(--muted);
font-size: 13px;
}

label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
color: var(--text);
}

input[type=text], input[type=email], input[type=password], textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 14px;
margin-bottom: 16px;
font-family: inherit;
}

textarea { resize: vertical; }

button, .btn {
display: inline-block;
background: var(--brand);
color: #fff;
border: none;
padding: 10px 18px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
}

button:hover, .btn:hover { background: var(--brand-light); }

.btn.secondary {
background: transparent;
color: var(--brand);
border: 1px solid var(--brand);
}

.btn.danger { background: var(--danger); }
.btn.small { padding: 6px 12px; font-size: 12px; }

.alert {
padding: 10px 14px;
border-radius: 6px;
font-size: 13px;
margin-bottom: 16px;
}

.alert.error { background: var(--danger-bg); color: var(--danger); }
.alert.success { background: var(--success-bg); color: var(--success); }

.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 960px;
margin: 0 auto 20px;
padding: 0 4px;
}

.top-bar h1 { font-size: 18px; color: var(--brand); margin: 0; }

table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
margin-top: 12px;
}

th, td {
text-align: left;
padding: 10px 8px;
border-bottom: 1px solid var(--border);
}

th { color: var(--muted); font-weight: 600; }

.status-pill {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
}

.status-pill.active { background: var(--success-bg); color: var(--success); }
.status-pill.inactive { background: #f0f0f0; color: var(--muted); }

.section {
margin-bottom: 32px;
}

.grid-tools {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-top: 12px;
}

.tool-card {
border: 1px solid var(--border);
border-radius: 8px;
padding: 18px;
background: #fafbfc;
}

.tool-card h3 { margin: 0 0 6px; font-size: 15px; color: var(--brand); }
.tool-card p { margin: 0 0 12px; font-size: 13px; color: var(--muted); }

.muted { color: var(--muted); font-size: 13px; }
.footer-note { text-align: center; margin-top: 20px; font-size: 12px; color: var(--muted); }
a { color: var(--brand-light); }