* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Tahoma, sans-serif; background: #f5f7fa; color: #18232e; }
a { color: inherit; text-decoration: none; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 10px; border-bottom: 1px solid #dce4ea; text-align: left; font-size: 14px; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #64707b; }
.portal-shell { min-height: 100vh; }
.portal-top { background: #143149; color: #fff; padding: 18px 24px; display: flex; justify-content: space-between; gap: 16px; }
.portal-top span { color: #9eb7c9; margin-left: 6px; }
.portal-nav { display: flex; gap: 10px; padding: 14px 24px; background: #fff; border-bottom: 1px solid #dce4ea; }
.portal-nav a { padding: 10px 12px; border-radius: 999px; color: #34536a; }
.portal-nav a.active, .portal-nav a:hover { background: #e7eff5; }
.portal-main { padding: 24px; display: grid; gap: 18px; }
.portal-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-kpi, .portal-panel { background: #fff; border: 1px solid #dce4ea; border-radius: 18px; box-shadow: 0 8px 22px rgba(24, 35, 46, .05); }
.portal-kpi { padding: 20px; }
.portal-kpi span { display: block; color: #66727d; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.portal-kpi strong { display: block; margin-top: 10px; font-size: 28px; }
.portal-panel { padding: 20px; }
.portal-panel h1 { margin: 0 0 14px; font-size: 22px; }
.portal-help { margin-top: 14px; color: #6d7780; font-size: 14px; }
.portal-alert.ok { background: #eefbf1; border-color: #bfe6ca; }
.portal-alert.danger { background: #fff2f3; border-color: #f1c5c8; }
.portal-form { display: grid; gap: 14px; }
.portal-form-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-form label { display: grid; gap: 7px; font-size: 14px; font-weight: 600; }
.portal-form input, .portal-form select, .portal-form button { border-radius: 12px; border: 1px solid #cbd6de; padding: 12px 14px; font-size: 15px; }
.portal-form button { width: fit-content; background: #16344c; color: #fff; border: 0; cursor: pointer; font-weight: 700; }
.portal-file input { padding: 10px; }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.badge.ok { background: #d7f2df; color: #1f6a35; }
.badge.warn { background: #fff0c7; color: #8a5a00; }
.badge.danger { background: #ffd7d8; color: #97252c; }
.badge.neutral { background: #e9eef2; color: #4d5b66; }
.portal-login-body { display: grid; place-items: center; min-height: 100vh; background: linear-gradient(135deg, #16344c 0%, #355d76 100%); }
.portal-login-card { width: min(420px, calc(100vw - 32px)); display: grid; gap: 14px; background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 18px 48px rgba(0,0,0,.25); }
.portal-login-card label { display: grid; gap: 7px; font-size: 14px; font-weight: 600; }
.portal-login-card input, .portal-login-card button { width: 100%; border-radius: 12px; border: 1px solid #cbd6de; padding: 12px 14px; font-size: 15px; }
.portal-login-card button { background: #16344c; color: #fff; border: 0; font-weight: 700; cursor: pointer; }
.form-error { background: #fff0f1; color: #922730; border: 1px solid #f4c7cb; padding: 10px 12px; border-radius: 12px; font-size: 14px; }
@media (max-width: 900px) {
  .portal-grid { grid-template-columns: 1fr; }
  .portal-form-grid { grid-template-columns: 1fr; }
  .portal-nav { flex-wrap: wrap; }
}