:root {
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --text: #162131;
    --text-muted: #5a6a80;
    --primary: #3155d5;
    --primary-hover: #2949ba;
    --danger: #c0392b;
    --success: #1f8b4c;
    --border: #dbe3ec;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 3px 12px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 26px rgba(15, 23, 42, 0.11);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --container: 1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--site-font-family, Inter, "Segoe UI", system-ui, -apple-system, sans-serif);
    background: var(--site-body-bg, var(--bg));
    color: var(--site-body-text, var(--text));
    line-height: 1.55;
}

a { color: var(--primary); text-decoration: none; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
a:hover { color: var(--primary-hover); }

.container { width: min(var(--container), calc(100% - 2rem)); margin: 0 auto; }
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .65rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.button:hover { background: var(--primary-hover); color: #fff; }
.button--secondary { background: #e9eefb; color: #1a3ca9; border-color: #d5def9; }
.button--secondary:hover { background: #dbe6ff; }
.button--ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.button--danger { background: #fbe9e7; color: var(--danger); border-color: #f2d0cc; }

input, textarea, select {
    width: 100%;
    border: 1px solid #cad5e2;
    border-radius: var(--radius-sm);
    padding: .65rem .75rem;
    background: #fff;
    color: var(--text);
    font: inherit;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #7f9af4;
    box-shadow: 0 0 0 3px rgba(49, 85, 213, .16);
}

.form-grid { display: grid; gap: var(--space-4); }
.form-field label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .94rem; }
.form-help { color: var(--text-muted); font-size: .86rem; margin-top: .3rem; }
.form-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

.table-wrap { overflow-x: auto; }
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.table th, .table td { padding: .85rem .8rem; text-align: left; border-bottom: 1px solid #e8edf3; }
.table th { background: var(--surface-muted); font-size: .86rem; text-transform: uppercase; letter-spacing: .03em; color: #4f6076; }
.table tbody tr:hover { background: #f9fbff; }

.page-header { padding: var(--space-5); margin-bottom: var(--space-5); }
.page-header__meta { margin: 0 0 .2rem 0; color: var(--text-muted); font-size: .92rem; }
.page-header__title { margin: 0; line-height: 1.25; }
.empty-state { padding: var(--space-6); text-align: center; color: var(--text-muted); }
.badge { display: inline-block; padding: .25rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #edf2ff; color: #324ea8; }

.flash { padding: .9rem 1rem; border-radius: var(--radius-sm); border: 1px solid; margin-bottom: var(--space-4); }
.flash--info { background: #eef3ff; border-color: #cad8ff; color: #2442a7; }
.flash--success { background: #ecf9f0; border-color: #c7ebd2; color: #196f3e; }
.flash--danger { background: #ffefee; border-color: #f8d2ce; color: #96372f; }

@media (max-width: 900px) {
    .container { width: calc(100% - 1.25rem); }
}