:root { font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; color: #172033; background: #f3f6fb; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { border: 0; border-radius: 9px; padding: 11px 18px; background: #1769e0; color: #fff; font-weight: 700; cursor: pointer; }
button.secondary { color: #344054; background: #fff; border: 1px solid #d0d5dd; }
button.danger { background: #fff; border: 1px solid #f1b8b8; color: #b42318; margin-left: 8px; }
input { width: 100%; border: 1px solid #d0d5dd; border-radius: 9px; padding: 10px 12px; background: #fff; }
label { display: grid; gap: 6px; }
label span { font-size: 13px; color: #475467; }
.eyebrow { color: #1769e0; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(440px, 100%); background: #fff; padding: 34px; border-radius: 18px; box-shadow: 0 16px 45px #1d293920; }
.login-card h1 { margin: 8px 0; }
.login-card p { color: #667085; }
.login-card form { display: grid; gap: 16px; margin-top: 24px; }
.message { min-height: 24px; color: #1769e0; margin-top: 12px; }
.message.error { color: #b42318; }
.topbar { height: 88px; padding: 0 max(24px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #e4e7ec; }
.topbar h1 { margin: 4px 0 0; font-size: 25px; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 28px auto; display: grid; gap: 20px; }
.panel { background: #fff; border: 1px solid #e4e7ec; border-radius: 16px; padding: 22px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.panel-heading h2 { margin: 0 0 6px; }
.panel-heading p { margin: 0; color: #667085; }
.create-grid { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 12px; margin-top: 20px; }
.table-shell { overflow-x: auto; margin-top: 20px; }
table { width: 100%; border-collapse: collapse; min-width: 850px; }
th, td { text-align: left; padding: 13px 10px; border-bottom: 1px solid #eaecf0; vertical-align: middle; }
th { color: #475467; font-size: 13px; }
td strong, td small { display: block; }
td small { margin-top: 4px; color: #98a2b3; font-size: 11px; }
.toggle { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.toggle input { width: auto; }
.empty { padding: 30px; text-align: center; color: #98a2b3; }
.hidden { display: none; }
@media (max-width: 850px) { .create-grid { grid-template-columns: 1fr; } .topbar { padding: 0 20px; } }