:root {
    --bg: #f4f6f9;
    --surface: #ffffff;
    --text: #172033;
    --muted: #697386;
    --line: #e3e8ef;
    --primary: #3157d5;
    --primary-dark: #2446b8;
    --nav: #101827;
    --success: #198754;
    --danger: #c63b46;
    --warning: #976500;
    --radius: 14px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--primary); text-decoration: none; }
.topbar { height: 68px; background: var(--nav); color: white; display: flex; align-items: center; padding: 0 32px; gap: 40px; }
.brand { color: white; display: flex; align-items: center; gap: 11px; font-weight: 750; white-space: nowrap; }
.brand-mark, .auth-logo { display: grid; place-items: center; background: linear-gradient(145deg, #6c8aff, #3157d5); color: white; font-weight: 800; border-radius: 10px; }
.brand-mark { width: 34px; height: 34px; }
.topbar nav { display: flex; gap: 26px; flex: 1; }
.topbar nav a, .account a { color: #ced5e2; font-size: 14px; }
.topbar nav a:hover, .account a:hover { color: white; }
.account { display: flex; align-items: center; gap: 16px; }
.account form { margin: 0; }
.container { max-width: 1280px; margin: 0 auto; padding: 42px 32px 70px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-heading h1, .narrow-card h1, .editor-card h1 { margin: 3px 0 8px; font-size: 30px; letter-spacing: -0.7px; }
.eyebrow { margin: 0; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: 1.4px; }
.muted { color: var(--muted); }
.small { font-size: 13px; margin-top: 4px; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9px; padding: 10px 17px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.button-primary { background: var(--primary); color: white; }
.button-primary:hover { background: var(--primary-dark); }
.button-secondary { background: white; color: var(--text); border-color: var(--line); }
.button-wide { width: 100%; padding: 12px; }
.link-button { border: 0; background: none; color: var(--primary); padding: 0; font: inherit; cursor: pointer; }
.topbar .link-button { color: #ced5e2; font-size: 14px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.report-card { min-height: 136px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; grid-template-columns: 42px 1fr auto; gap: 16px; color: var(--text); transition: .15s ease; }
.report-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(23,32,51,.08); border-color: #cbd5e8; }
.report-card.inactive { opacity: .65; }
.report-icon, .empty-icon { background: #edf1ff; color: var(--primary); border-radius: 10px; display: grid; place-items: center; font-weight: 800; }
.report-icon { width: 42px; height: 42px; }
.report-title { font-weight: 760; margin: 2px 0 7px; }
.report-card p { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.5; }
.arrow { color: #9aa5b5; font-size: 20px; }
.empty-state { background: var(--surface); border: 1px dashed #cbd4e0; border-radius: var(--radius); text-align: center; padding: 70px 25px; }
.empty-state.compact { padding: 45px 25px; }
.empty-icon { width: 50px; height: 50px; margin: 0 auto 12px; font-size: 22px; }
.empty-state h2 { margin: 0 0 7px; }
.empty-state p { color: var(--muted); }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at 20% 10%, #e6ebff, transparent 32%), var(--bg); }
.auth-card { width: 100%; max-width: 430px; background: white; padding: 38px; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 60px rgba(21,33,60,.1); }
.auth-logo { width: 48px; height: 48px; margin-bottom: 24px; }
.auth-card h1 { margin: 0 0 6px; }
.stack-form { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 650; }
input, select, textarea { width: 100%; border: 1px solid #ccd4e0; border-radius: 9px; padding: 10px 12px; background: white; color: var(--text); font: inherit; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(49,87,213,.12); }
.narrow-card, .editor-card { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; margin: 0 auto; }
.narrow-card { max-width: 660px; }
.editor-card { max-width: 960px; }
.back-link { display: inline-block; margin-bottom: 14px; font-size: 14px; }
.form-actions { border-top: 1px solid var(--line); padding-top: 20px; display: flex; justify-content: flex-end; }
.form-row { display: grid; grid-template-columns: 1fr 180px; gap: 22px; align-items: end; }
.checkbox-label { flex-direction: row; align-items: center; padding-bottom: 10px; }
.checkbox-label input, .check-item input { width: 17px; height: 17px; accent-color: var(--primary); }
.code-input { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; line-height: 1.55; background: #f8fafc; }
.hint { color: var(--muted); font-size: 12px; font-weight: 400; }
.hint code { background: #eef1f6; padding: 2px 5px; border-radius: 4px; }
.table-card { background: white; border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; background: #fafbfd; }
th, td { padding: 15px 17px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.actions-cell { text-align: right; white-space: nowrap; }
.actions-cell a, .actions-cell form { display: inline-block; margin-left: 13px; }
.badge { display: inline-block; margin: 2px 3px 2px 0; padding: 4px 8px; background: #edf1ff; color: #324fba; border-radius: 20px; font-size: 12px; }
.badge-muted { background: #edf0f4; color: var(--muted); }
.self-label { margin-left: 7px; color: var(--muted); font-size: 12px; font-weight: normal; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px; }
.status-dot.on { background: #27a56a; }.status-dot.off { background: #aeb5c0; }
.empty-cell { text-align: center; padding: 40px; color: var(--muted); }
.check-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.check-item { flex-direction: row; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.check-item:last-child { border-bottom: 0; }.check-item small { display: block; color: var(--muted); margin-top: 4px; font-weight: normal; }.check-item span:nth-child(2) { flex: 1; }
.permission-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.permission-head, .permission-item { display: grid; grid-template-columns: minmax(220px, 1fr) 115px 150px; align-items: center; gap: 10px; padding: 13px 16px; }
.permission-head { background: #fafbfd; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.permission-head span:not(:first-child) { text-align: center; }
.permission-item { border-top: 1px solid var(--line); }
.permission-item small { display: block; color: var(--muted); margin-top: 4px; font-weight: normal; }
.permission-check { flex-direction: row; justify-content: center; align-items: center; }
.permission-check input { width: 18px; height: 18px; accent-color: var(--primary); }
.mobile-label { display: none; }
.filter-card { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.filter-card label { min-width: 190px; flex: 1; }.filter-card .button { margin-bottom: 1px; }
.result-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 10px; }
.result-table { max-height: 65vh; }
.result-table th { position: sticky; top: 0; z-index: 1; background: #3d4fb3; color: white; text-transform: none; font-size: 12px; line-height: 1.25; white-space: normal; min-width: 105px; }
.result-table td { white-space: nowrap; }
.result-table tbody tr:nth-child(even) { background: #f4f7fa; }
.result-table .total-row { background: #edf0ff; font-weight: 800; border-top: 2px solid #3d4fb3; }
.alert { max-width: 1280px; margin: 0 auto 18px; padding: 12px 15px; border-radius: 9px; border: 1px solid; }
.alert-success { background: #eaf8f0; border-color: #bfe3cd; color: #17623e; }
.alert-error { background: #fff0f1; border-color: #f2c6ca; color: #9d2933; }
.alert-warning { background: #fff8e6; border-color: #ebd69c; color: var(--warning); }
@media (max-width: 780px) {
    .topbar { height: auto; padding: 14px 18px; flex-wrap: wrap; gap: 12px; }.topbar nav { order: 3; width: 100%; gap: 18px; overflow-x: auto; }.account { margin-left: auto; }.account a { display: none; }
    .container { padding: 28px 16px 50px; }.page-heading { flex-direction: column; }.card-grid { grid-template-columns: 1fr; }.form-row { grid-template-columns: 1fr; }.table-card { border-radius: 9px; }
    .permission-head { display: none; }.permission-item { grid-template-columns: 1fr auto auto; padding: 14px 12px; }.permission-check { flex-direction: column; font-size: 11px; color: var(--muted); }.mobile-label { display: inline; }
}