:root{
  --bg:#0e0f14;
  --panel:#151823;
  --ink:#0c0e14;
  --border:#232736;
  --text:#e8ebf2;
  --muted:#9aa3b8;
  --ok:#8ae6b1;
  --c-title:#86b7ff;
  --c-sec:#b089f5;
  --c-label:#74d2c8;
  --c-label2:#f5a97f;
  --accent:#2d72ff;
  --accent2:#33d1a0;
  --fh:44px
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px system-ui,Segoe UI,Roboto,Helvetica,Arial}
.container{max-width:860px;margin:0 auto;padding:20px}
.title{font-size:22px;margin:0 0 12px;color:var(--c-title);text-align:center}
.sec{font-size:18px;margin:16px 0 8px;color:var(--c-sec)}
.section{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;margin:14px 0}
label{display:block;margin:10px 0 6px}
.lbl{color:var(--c-label)}
input[type=date],input[type=number],input[type=text]{
  width:100%;height:var(--fh);padding:10px 46px 10px 10px;border-radius:10px;border:1px solid var(--border);
  background:var(--ink);color:var(--text);font:16px system-ui,Segoe UI,Roboto,Helvetica,Arial
}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--border)}
.row:first-child{border-top:none}
.sub{padding-left:24px;border-top:none}
.k{color:var(--muted)}
.v{font-variant-numeric:tabular-nums;text-align:right}
.tot{font-weight:600}
.ok{color:var(--ok)}
.bad{color:#f58b8b}
.small{color:var(--muted);font-size:13px;margin-top:-4px}
.pair-row{display:grid;grid-template-columns:1fr 180px;gap:12px;align-items:end;margin:10px 0}
@media (max-width:480px){.pair-row{grid-template-columns:1fr 150px}}
.readout{text-align:right}
.buttons{display:flex;gap:8px;margin:8px 0}
.btn{height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:#11141a;color:var(--text);cursor:pointer}

/* Hide the Load Test button (keeps shortcut working) */
#loadTest{display:none}

/* Depts */
.dept-grid{display:grid;grid-template-columns:44px 1fr;gap:8px}
.dept-num{display:flex;align-items:center;justify-content:flex-end;color:var(--c-label2);padding-right:4px}
.dept-grid input{width:100%}
.tight{padding-top:4px;margin-top:-6px;border-top:none}

/* Datepicker: hide native indicator and show a big visible button */
input[type=date]::-webkit-calendar-picker-indicator{opacity:0; width:0; height:0; margin:0; pointer-events:none}
.date-wrap{position:relative}
.dp-btn{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:34px; height:34px; border-radius:8px; border:1px solid #3b4a78;
  background:
    linear-gradient(180deg,#1f2a48,#17213a);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset, 0 1px 2px rgba(0,0,0,.35);
}
.dp-btn::before{
  content:"";
  width:18px; height:18px; display:block;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; filter:drop-shadow(0 1px 0 rgba(0,0,0,.4));
}
.dp-btn:hover{border-color:var(--accent); box-shadow:0 0 0 2px rgba(45,114,255,.35)}
.dp-btn:active{transform:translateY(-50%) scale(.98)}