:root{--primary: #164c7e;--petroleum: #0e2d4e;--secondary: #4cbf8a;--bg: #f3f6f9;--card: #ffffff;--text: #122033;--muted: #5b6b7c;--border: #d7e0ea;--danger: #c62828;--shadow: 0 10px 30px rgba(14, 45, 78, .08);font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}button,input{font:inherit}h1,h2,p{margin:0}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}.login-panel{background:linear-gradient(160deg,var(--primary),var(--petroleum));color:#fff;display:flex;align-items:center;padding:64px}.login-brand{display:flex;flex-direction:column;align-items:flex-start;gap:28px;max-width:460px}.login-brand h1{font-size:36px;line-height:1.15;margin:0 0 12px}.login-logo{height:72px;width:auto;display:block;object-fit:contain}.login-card-logo,.topbar-logo{height:44px;width:auto;display:block;object-fit:contain}.login-copy,.topbar-brand span,.sub,.muted,.metric-card small,.topbar-user small{color:var(--muted)}.login-copy{color:#ffffffc7;line-height:1.5}.login-card,.modal,.panel{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}.login-card,.modal{margin:auto;width:min(420px,calc(100% - 48px));padding:32px;border-radius:20px;display:grid;gap:14px}.login-card h2,.modal h2{font-size:24px}label{display:grid;gap:6px;font-size:13px;font-weight:600}input,.search{width:100%;border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:#fff}button,.btn{border:0;border-radius:12px;padding:12px 16px;background:var(--primary);color:#fff;font-weight:700;cursor:pointer}button:disabled,.btn:disabled{opacity:.55;cursor:not-allowed}.btn.ghost{background:#eef3f8;color:var(--petroleum)}.form-error{color:var(--danger);font-size:13px}.app-shell{min-height:100vh}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 28px;background:#fff;border-bottom:1px solid var(--border)}.topbar-brand,.topbar-actions,.pager,.panel-head,.modal-actions{display:flex;align-items:center;gap:12px}.topbar-brand strong,.metric-card strong{display:block}.topbar-brand span,.topbar-user small,.metric-card small,.sub{display:block;font-size:12px;font-weight:500}.topbar-user{text-align:right;font-weight:600}.content{padding:28px;display:grid;gap:20px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.metric-card{text-align:left;background:#fff;color:inherit;border:1px solid var(--border);box-shadow:var(--shadow);display:grid;gap:8px}.metric-card span{color:var(--muted);font-size:13px;font-weight:600}.metric-card strong{font-size:36px;color:var(--petroleum)}.metric-card.active{border-color:var(--primary);box-shadow:0 0 0 3px #164c7e1f}.panel{border-radius:20px;padding:8px 8px 0;overflow:hidden}.panel-head{justify-content:space-between;padding:12px 12px 8px}.tabs{display:flex;gap:6px}.tabs button{background:transparent;color:var(--muted);padding:10px 14px}.tabs button.active{background:#e8f1fa;color:var(--primary)}.search{max-width:320px}.table-wrap{overflow-x:auto;min-height:240px;padding:0 8px 8px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--border);vertical-align:top;font-size:14px}th{color:var(--muted);font-size:12px;letter-spacing:.02em;text-transform:uppercase}.pill{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}.pill.ok{background:#e5f7ee;color:#1b7a4e}.pill.warn{background:#fdecea;color:#b42318}.pill.neutral{background:#eef3f8;color:var(--primary)}.pager{justify-content:space-between;padding:12px 16px 16px;color:var(--muted);font-size:13px}.pager-actions{display:flex;align-items:center;gap:10px}.modal-backdrop{position:fixed;inset:0;background:#0e2d4e73;display:grid;place-items:center;padding:24px}.modal-actions{justify-content:flex-end;margin-top:8px}@media(max-width:900px){.login-shell,.metrics{grid-template-columns:1fr}.login-panel{padding:32px 24px 24px}.topbar,.content,.panel-head,.pager,.topbar-actions{flex-direction:column;align-items:stretch}.search{max-width:none}}
