@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{--navy:#12365f;--navy-deep:#0b2747;--blue:#1764b0;--yellow:#f5c518;--paper:#f1f5fa;--ink:#172b45;--muted:#64758b;--line:#dfe7f0;--shadow:0 4px 18px rgba(20,50,84,.07);--sidebar:232px}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:13px/1.55 'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif}
body::before{content:'';position:fixed;inset:0 0 auto;height:4px;z-index:100;background:linear-gradient(90deg,#f6ce16 0 50%,#1764b0 50% 75%,#ce2738 75%)}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.65}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #d8ab0c;outline-offset:3px}
[hidden]{display:none!important}
.skip-link{position:fixed;top:-80px;left:250px;z-index:110;background:var(--yellow);color:var(--navy-deep);padding:10px 16px;border-radius:7px}
.skip-link:focus{top:10px}
.sidebar{position:fixed;inset:4px auto 0 0;width:var(--sidebar);padding:22px 12px 18px;display:flex;flex-direction:column;gap:4px;background:linear-gradient(180deg,var(--navy-deep),var(--navy));color:#fff;overflow-y:auto;z-index:30;scrollbar-width:thin;scrollbar-color:#5f82a9 transparent}
.sidebar-brand{margin:0 3px 22px;padding:10px 5px 16px;border-bottom:2px solid var(--yellow)}
.sidebar-brand img{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 9px #0010233d)}
.sidebar-brand>span{display:block;margin-top:11px;font-size:9px;font-weight:700;letter-spacing:.13em;text-align:center;color:#dce9f6}
.nav-caption{padding:0 13px 10px;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9eb9d5}
.sidebar nav{display:grid;gap:6px}
.tabBtn{display:flex;align-items:center;gap:10px;width:100%;min-height:53px;padding:12px 11px;border:1px solid transparent;border-radius:9px;background:transparent;color:#e1ebf6;text-align:left;font-size:11px;font-weight:500;line-height:1.5}
.nav-number{font-size:9px;color:#99b9da;font-variant-numeric:tabular-nums}
.nav-arrow{margin-left:auto;font-size:19px;color:#91b4d9}
.tabBtn:hover{background:#ffffff0f;color:#fff}
.tabBtn.active{border-color:#ffffff20;background:#ffffff14;color:#fff;box-shadow:inset 3px 0 var(--yellow)}
.tabBtn.active .nav-number,.tabBtn.active .nav-arrow{color:var(--yellow)}
.sidebar-foot{margin-top:auto;padding:30px 13px 0;font-size:10px;line-height:1.7;color:#a2bad3}
.sidebar-foot>span{display:block;color:#dce9f6;font-size:9px;letter-spacing:.12em;font-weight:600;margin-bottom:6px}
.main-content{margin-left:var(--sidebar);padding:24px 28px;min-width:0;outline:none}
.page-hero{position:relative;isolation:isolate;overflow:hidden;padding:25px 34px 22px;border-radius:18px;color:white;background:radial-gradient(circle at 84% 28%,#f5c51866 0 3px,transparent 4px),radial-gradient(circle at 77% 68%,#ffffff30 0 4px,transparent 5px),linear-gradient(120deg,#0b2949 0%,#143f6e 55%,#1764b0 100%);box-shadow:0 12px 28px #14325417}
.page-hero::before{content:'';position:absolute;z-index:-1;right:-110px;top:-180px;width:410px;height:410px;border:1px solid #ffffff1c;border-radius:50%;box-shadow:0 0 0 45px #ffffff05,0 0 0 90px #ffffff04,0 0 0 135px #ffffff03;pointer-events:none}
.page-hero::after{content:'';position:absolute;inset:0 0 0 55%;z-index:-1;opacity:.11;background-image:linear-gradient(#ffffff1c 1px,transparent 1px),linear-gradient(90deg,#ffffff1c 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.hero-kicker{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--yellow)}
.page-hero h1{max-width:900px;font-size:clamp(25px,2.45vw,36px);font-weight:800;line-height:1.15;letter-spacing:-.035em;margin:8px 0 10px;outline:none}
.page-hero p{font-size:12px;line-height:1.65;color:#e0edfa;margin:0;max-width:800px}
.hero-meta{display:flex;align-items:center;gap:10px;margin-top:14px;color:#d7e7f7;font-size:9px;font-weight:600}
.hero-meta span:first-child{padding:5px 10px;background:#ffffff12;border:1px solid #ffffff30;border-radius:20px}
.hero-meta span:last-child{margin-left:auto;color:#b0cbe4;letter-spacing:.12em}
.data-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:16px 0 18px}
.update-meta{display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--muted);font-size:10px}
.meta-label{color:var(--navy);font-size:9px;font-weight:700;letter-spacing:.08em}
.data-actions{display:flex;gap:8px;flex-shrink:0;align-items:center}
.btn,.source-toggle{border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:11px;font-weight:600;min-height:38px;white-space:nowrap}
.btn{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn:hover{background:var(--navy)}
.source-toggle{background:transparent;color:var(--navy)}
.source-toggle:hover{background:white}
.source-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:-4px 0 18px}
.source-panel label{display:block;font-size:11px;font-weight:600;margin-bottom:7px}
.source-panel input{width:100%;min-width:0}
.source-panel p{font-size:10px;color:var(--muted);margin:8px 0 0}
.update-status:empty{display:none}
.update-status:not(:empty){margin-bottom:16px}
.tab-content{min-width:0}
.card,.kpi{background:white;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);min-width:0}
.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:18px}
.kpi{position:relative;overflow:hidden;padding:15px 16px 18px;border-bottom:3px solid var(--kpi-accent,var(--blue))}
.kpiVal{font-size:29px;line-height:1.15;font-weight:800;letter-spacing:-.035em;color:var(--navy)}
.kpiLabel{color:var(--muted);font-size:9px;font-weight:500;line-height:1.6;margin-top:7px}
.charts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:22px}
.barTrack{height:8px;overflow:hidden;background:#e7eef6;border-radius:5px}
.barTrack>div{border-radius:5px}
.trace-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 18px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
select,input[type=text]{border:1px solid #d5e1ee;border-radius:8px;padding:9px 11px;font-size:11px;background:#fff;color:var(--ink);max-width:100%;min-height:38px}
.filters input{flex:1 1 230px;min-width:0}
.filters select{min-width:0;max-width:100%;flex:0 1 auto}
.filters>span{font-size:10px!important}
.table-card{overflow-x:auto;max-width:100%;scrollbar-width:thin;scrollbar-color:#b5c8da #f3f7fb}
table{border-collapse:collapse;width:100%;font-size:12px}
th,td{text-align:left;padding:12px;vertical-align:top;font-size:11px;line-height:1.65}
thead th{background:#eaf1f8;color:#285079;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;position:sticky;top:0;z-index:1;border-bottom:1px solid #d7e3ef}
tbody td{border-bottom:1px solid #edf1f6}
tbody tr:nth-child(even){background:#f8fafd}
tbody tr:hover{background:#f0f6fc}
.rowToggle{cursor:pointer}
.badge{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:10px!important;padding:4px 9px!important;border-radius:20px;white-space:nowrap}
.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.record-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:10px 6px 16px;font-size:12px}
.page-footer{border-top:1px solid var(--line);margin-top:25px;padding:16px 0 0;color:var(--muted);font-size:9px}
.spin{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mobile-bar,.menu-close,.menu-backdrop{display:none}
@media(min-width:851px) and (max-width:1180px){.main-content{padding:22px}.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.data-toolbar{align-items:flex-start}.update-meta{display:block}.meta-label{display:block}}
@media(max-width:850px){
  .mobile-bar{display:flex;position:sticky;top:4px;z-index:20;align-items:center;justify-content:space-between;gap:10px;background:var(--navy-deep);color:white;padding:12px 16px;font-size:12px;font-weight:600}
  .menu-toggle{background:#ffffff12;color:white;border:1px solid #ffffff35;border-radius:7px;padding:7px 10px;font-size:11px}
  .sidebar{display:none;width:min(290px,85vw);box-shadow:10px 0 40px #061f3f50;z-index:50}
  .sidebar.is-open{display:flex}
  .menu-close{display:block;border:1px solid #ffffff30;background:transparent;color:#fff;border-radius:7px;padding:8px 12px;align-self:flex-end;font-size:11px;margin:-8px 3px 16px}
  .menu-backdrop.is-open{display:block;position:fixed;inset:4px 0 0;background:#071c37a6;border:0;z-index:40}
  body:has(.sidebar.is-open){overflow:hidden}
  .main-content{margin-left:0;padding:16px}
  .page-hero{padding:22px;border-radius:15px}
  .page-hero h1{font-size:28px;line-height:1.15}
  .page-hero p{font-size:11px}
  .hero-kicker{font-size:8px}
  .data-toolbar{align-items:flex-start;flex-direction:column;gap:10px}
  .data-actions{width:100%;justify-content:space-between}
  .update-meta{font-size:10px}
  .charts-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .skip-link{left:12px}
  .record-detail{grid-template-columns:1fr}
}
@media(max-width:520px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:13px 12px 15px}.kpiVal{font-size:27px}
  .trace-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters{display:grid;grid-template-columns:minmax(0,1fr)}
  .filters input,.filters select{width:100%!important}
  .page-hero h1{font-size:26px}
}
@media(prefers-reduced-motion:reduce){.spin{animation:none}}