:root{

  --bg: #f6f7fb;

  --card: #ffffff;

  --ink: #1f2937;

  --muted: #6b7280;

  --border: #e7e9f2;



  --p1: #dbeafe; /* pastel blue */

  --p2: #dcfce7; /* pastel green */

  --p3: #fae8ff; /* pastel purple */

  --p4: #ffe4e6; /* pastel pink */

  --p5: #fef3c7; /* pastel amber */



  --btn: #111827;

  --btnText: #ffffff;

}



*{box-sizing:border-box}

body{

  margin:0;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  background: var(--bg);

  color: var(--ink);

}

a{color:#2563eb;text-decoration:none}

a:hover{text-decoration:underline}



.container{max-width:1200px;margin:0 auto;padding:22px}



.header{

  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;

  margin-bottom:14px;

}

.brand{

  display:flex;flex-direction:column;gap:2px;

}

.brand h1{margin:0;font-size:18px}

.brand .sub{color:var(--muted);font-size:13px}



.nav{

  display:flex;gap:10px;flex-wrap:wrap;

}

.chip{

  padding:8px 12px;border:1px solid var(--border);background:#fff;border-radius:999px;

  font-size:13px;

}



.grid{

  display:grid;grid-template-columns:repeat(12,1fr);gap:14px;

}

.card{

  background:var(--card);

  border:1px solid var(--border);

  border-radius:16px;

  box-shadow: 0 6px 18px rgba(17,24,39,.05);

  padding:16px;

}

.kpi{display:flex;gap:12px;align-items:center}

.dot{width:12px;height:12px;border-radius:999px;background:var(--p1);border:1px solid var(--border)}

.kpi .label{color:var(--muted);font-size:12px}

.kpi .value{font-size:20px;font-weight:800;margin-top:2px}



.badge{

  display:inline-flex;align-items:center;gap:8px;

  padding:8px 12px;border-radius:12px;border:1px solid var(--border);

  background: linear-gradient(180deg,#fff, #f9fafb);

  font-size:13px;color:var(--muted);

}



.controls{

  display:flex;gap:10px;flex-wrap:wrap;align-items:end;

}

.controls label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:6px}

select,input{

  padding:10px 10px;border-radius:12px;border:1px solid var(--border);

  background:#fff;min-width:160px;

}

.btn{

  padding:10px 14px;border-radius:12px;border:1px solid #111827;

  background:var(--btn);color:var(--btnText);cursor:pointer;font-weight:700;

}

.btn.secondary{

  background:#fff;color:#111827;border:1px solid var(--border);font-weight:600;

}

.btn:hover{filter:brightness(.98)}

.tableWrap{overflow:auto;border-radius:14px;border:1px solid var(--border)}

table{border-collapse:collapse;width:100%;min-width:900px;background:#fff}

th,td{border-bottom:1px solid var(--border);padding:10px 12px;font-size:13px;vertical-align:top}

th{background:#fafbff;color:#374151;text-align:left;position:sticky;top:0;z-index:1}

tr:hover td{background:#fbfdff}

.pill{

  display:inline-flex;align-items:center;justify-content:center;

  padding:4px 10px;border-radius:999px;border:1px solid var(--border);

  font-size:12px;

}

.pill.ok{background:var(--p2)}

.pill.warn{background:var(--p4)}

.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#334155}



.footerNote{color:var(--muted);font-size:12px;margin-top:10px}