:root {
  --blue-950: #022b6e;
  --blue-800: #005fcf;
  --blue-600: #0183ea;
  --blue-400: #14b9fe;
  --ink: #162235;
  --muted: #607087;
  --line: #d7dee8;
  --surface: #ffffff;
  --canvas: #eef2f6;
  --success: #15803d;
  --warning: #c46708;
  --danger: #c02b32;
  --shadow: 0 12px 30px rgba(2, 43, 110, .09);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--blue-800); }
.hidden { display: none !important; }
.app-shell { min-height: 100vh; padding-bottom: 42px; }
.topbar { height: 68px; padding: 0 28px; display: flex; align-items: center; gap: 24px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar img { width: 148px; height: 44px; object-fit: contain; object-position: left center; }
.topbar-title { border-left: 1px solid var(--line); padding-left: 22px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.topbar-spacer { flex: 1; }
.topbar-meta { text-align: right; font-size: 13px; color: var(--muted); }
.page { width: min(1480px, calc(100% - 48px)); margin: 26px auto; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.page-heading h1 { font-size: 27px; line-height: 1.1; margin: 0 0 6px; }
.page-heading p { margin: 0; color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.card-header { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-header h2, .card-header h3 { margin: 0; font-size: 16px; }
.card-body { padding: 20px; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field { display: grid; gap: 7px; }
.field label { font-size: 12px; font-weight: 700; color: #405068; text-transform: uppercase; letter-spacing: .045em; }
.field input, .field select, .field textarea { width: 100%; min-height: 42px; padding: 9px 11px; color: var(--ink); background: #fff; border: 1px solid #b7c2d0; border-radius: 4px; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(1, 131, 234, .14); }
.field small { color: var(--muted); }
.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn { min-height: 40px; padding: 9px 16px; border: 1px solid transparent; border-radius: 4px; background: #e7edf4; color: var(--ink); font-weight: 700; transition: .15s ease; }
.btn:hover { filter: brightness(.97); transform: translateY(-1px); }
.btn-primary { color: #fff; background: var(--blue-800); border-color: var(--blue-800); }
.btn-danger { color: #fff; background: var(--danger); }
.btn-ghost { background: #fff; border-color: var(--line); }
.btn-small { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border-radius: 20px; background: #e6edf5; color: #405068; font-size: 12px; font-weight: 800; }
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.success { background: #dcfce7; color: var(--success); }
.badge.warning { background: #fff0d5; color: var(--warning); }
.badge.danger { background: #fee2e2; color: var(--danger); }
.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { padding: 11px 13px; color: #52627a; background: #f5f7fa; border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .055em; white-space: nowrap; }
td { padding: 13px; border-bottom: 1px solid #e7ebf0; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f7fbff; }
.empty { padding: 34px 20px; text-align: center; color: var(--muted); }
.metric { padding: 18px 20px; border-left: 4px solid var(--blue-600); }
.metric-label { font-size: 12px; color: var(--muted); text-transform: uppercase; font-weight: 700; letter-spacing: .05em; }
.metric-value { margin-top: 6px; font-size: 28px; font-weight: 750; color: var(--blue-950); }
.tabs { display: flex; gap: 1px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tab { padding: 13px 18px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; font-weight: 700; white-space: nowrap; }
.tab.active { color: var(--blue-800); border-bottom-color: var(--blue-600); }
.version { position: fixed; right: 10px; bottom: 7px; z-index: 50; padding: 3px 7px; color: #6a7789; background: rgba(255,255,255,.86); border: 1px solid rgba(183,194,208,.75); border-radius: 3px; font: 10px/1.2 Consolas, monospace; }
.toast-stack { position: fixed; top: 82px; right: 20px; z-index: 100; display: grid; gap: 10px; width: min(370px, calc(100vw - 40px)); }
.toast { padding: 13px 16px; color: #fff; background: var(--blue-950); border-radius: 5px; box-shadow: 0 10px 30px rgba(0,0,0,.2); animation: enter .2s ease; }
.toast.error { background: var(--danger); }
.modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(6, 20, 40, .56); }
.modal { width: min(720px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #fff; border-radius: 7px; box-shadow: 0 28px 70px rgba(0,0,0,.28); }
.modal-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; font-size: 19px; }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 80% 20%, rgba(20,185,254,.2), transparent 28%), linear-gradient(145deg, #eef5fc 0%, #e9edf2 60%); }
.login-card { width: min(430px, 100%); overflow: hidden; background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--blue-600); border-radius: 7px; box-shadow: 0 24px 70px rgba(2,43,110,.15); }
.login-brand { padding: 26px 28px 18px; }
.login-brand img { width: 210px; max-width: 75%; }
.login-brand h1 { margin: 24px 0 8px; font-size: 23px; }
.login-brand p { margin: 0; color: var(--muted); }
.login-form { display: grid; gap: 16px; padding: 18px 28px 30px; }
.login-form .btn { min-height: 46px; }
.credential-box { padding: 16px; background: #eef7ff; border: 1px solid #b8dcfa; border-radius: 5px; line-height: 1.75; }
.credential-box code { user-select: all; }
.checkbox-row { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.checkbox-row label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
@keyframes enter { from { transform: translateY(-8px); opacity: 0; } }
@media (max-width: 900px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-2 { grid-template-columns: 1fr; } .page { width: min(100% - 24px, 1480px); } .topbar { padding: 0 14px; } }
@media (max-width: 580px) { .grid-4, .grid-3 { grid-template-columns: 1fr; } .topbar-title { display: none; } .topbar img { width: 125px; } .page-heading { align-items: start; flex-direction: column; } .card-body { padding: 15px; } }
@media print { .topbar, .tabs, .no-print, .version, .toast-stack { display: none !important; } body, :root { background: #fff; } .page { width: 100%; margin: 0; } .card { box-shadow: none; border: 0; } }