:root{
  --navy:#1e3a63; --navy-d:#152b49; --navy-l:#2f5288;
  --ink:#1a2433; --mut:#667089; --line:#e2e7ef; --bg:#f4f6fa; --card:#ffffff;
  --ok:#0b6b3f; --ok-bg:#e6f4ec; --warn:#9a5b00; --warn-bg:#fdf1dd;
  --bad:#a3261f; --bad-bg:#fbe9e7; --info:#1d5673; --info-bg:#e6f1f6;
  --amber:#c07800;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:14px}
h1,h2,h3{margin:0}
button,input,select,textarea{font-family:inherit;font-size:14px}
a{color:var(--navy-l)}

/* header */
header{background:linear-gradient(180deg,#24466f,#17304f);color:#fff;padding:14px 22px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
header h1{font-size:21px;font-weight:700;letter-spacing:.2px}
header .sub{font-size:12px;opacity:.75;margin-top:2px}
.hbtn{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);
  padding:7px 14px;border-radius:7px;cursor:pointer}
.hbtn:hover{background:rgba(255,255,255,.12)}
.badge-role{background:#f0d9b5;color:#5a3d13;border-radius:20px;padding:2px 11px;font-size:12px;font-weight:600}

/* tabs */
nav{background:#fff;border-bottom:1px solid var(--line);display:flex;overflow-x:auto}
nav button{background:none;border:0;padding:14px 18px;cursor:pointer;color:var(--mut);
  font-size:14.5px;white-space:nowrap;border-bottom:3px solid transparent}
nav button:hover{color:var(--navy)}
nav button.on{color:var(--navy);font-weight:600;border-bottom-color:var(--navy);background:#fbfcfe}
nav button .pip{background:var(--bad);color:#fff;border-radius:10px;font-size:11px;padding:1px 6px;margin-left:6px}

main{padding:20px;max-width:1500px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:20px;margin-bottom:18px;box-shadow:0 1px 2px rgba(20,40,80,.04)}
.card h2{font-size:17px;color:var(--navy);margin-bottom:4px}
.card .hint{color:var(--mut);font-size:13px;margin:4px 0 16px}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.f{display:flex;flex-direction:column;gap:5px}
.f label{font-size:12.5px;color:var(--mut);font-weight:600}
input,select,textarea{padding:9px 11px;border:1px solid #cfd6e2;border-radius:7px;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid #a9c2e8;outline-offset:-1px;border-color:var(--navy-l)}
input[readonly]{background:#eef1f6;color:var(--mut)}
.btn{background:var(--navy);color:#fff;border:0;padding:10px 17px;border-radius:7px;cursor:pointer;font-weight:600}
.btn:hover{background:var(--navy-l)}
.btn.sec{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.btn.sec:hover{background:#eef3fa}
.btn.dgr{background:#fff;color:var(--bad);border:1.5px solid #e3a8a3;padding:5px 11px;font-weight:500}
.btn.dgr:hover{background:var(--bad-bg)}
.btn.sm{padding:5px 11px;font-size:13px;font-weight:500}
.btn:disabled{opacity:.45;cursor:not-allowed}

table{width:100%;border-collapse:collapse}
th{background:var(--navy);color:#fff;text-align:left;padding:10px;font-size:12.5px;font-weight:600;
  position:sticky;top:0;z-index:1}
td{padding:9px 10px;border-bottom:1px solid #eef1f6;vertical-align:top}
tbody tr:nth-child(even){background:#fafbfd}
tbody tr:hover{background:#f2f6fc}
.tw{max-height:470px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:"Consolas",monospace;font-size:12.5px}

.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.t-ok{background:var(--ok-bg);color:var(--ok)} .t-warn{background:var(--warn-bg);color:var(--warn)}
.t-bad{background:var(--bad-bg);color:var(--bad)} .t-info{background:var(--info-bg);color:var(--info)}
.t-mut{background:#eef1f6;color:var(--mut)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.kpi .v{font-size:27px;font-weight:700;color:var(--navy);line-height:1.15}
.kpi .l{font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;margin-top:5px}
.kpi.alert .v{color:var(--bad)}

/* the signature element: the pipeline rail */
.rail{display:flex;gap:0;margin:6px 0 20px;flex-wrap:wrap}
.rail .st{flex:1;min-width:135px;background:#fff;border:1px solid var(--line);
  border-right:0;padding:13px 15px;position:relative}
.rail .st:last-child{border-right:1px solid var(--line);border-radius:0 8px 8px 0}
.rail .st:first-child{border-radius:8px 0 0 8px}
.rail .st .n{font-size:11px;color:#a8b2c6;font-weight:700}
.rail .st .t{font-size:13px;font-weight:600;margin:3px 0 6px}
.rail .st .c{font-size:22px;font-weight:700;color:var(--navy)}
.rail .st.hot{background:#fffaf0;border-color:#f0d9a8}
.rail .st.hot .c{color:var(--amber)}
.rail .st::after{content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:16px;height:16px;background:#fff;border-top:1px solid var(--line);border-right:1px solid var(--line);z-index:2}
.rail .st:last-child::after{display:none}
.rail .st.hot::after{background:#fffaf0;border-color:#f0d9a8}

.alert{display:flex;gap:12px;padding:12px 14px;border-radius:8px;margin-bottom:9px;align-items:flex-start}
.alert.r{background:var(--bad-bg);border-left:4px solid var(--bad)}
.alert.a{background:var(--warn-bg);border-left:4px solid var(--amber)}
.alert.b{background:var(--info-bg);border-left:4px solid var(--info)}
.alert .m{flex:1}
.alert .m b{display:block;margin-bottom:2px}
.alert .m span{font-size:13px;color:#4a5568}

.lines td{padding:6px}
.lines input,.lines select{padding:6px 8px;width:100%}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.empty{text-align:center;padding:34px;color:var(--mut)}
.empty b{display:block;color:var(--ink);margin-bottom:5px}
.sec-t{font-size:13px;font-weight:700;color:var(--navy);text-transform:uppercase;
  letter-spacing:.6px;margin:22px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.pill-in{background:#eef1f6;padding:2px 8px;border-radius:5px;font-size:12px;margin:0 4px 4px 0;display:inline-block}
dialog{border:0;border-radius:12px;padding:0;max-width:940px;width:94%;box-shadow:0 20px 60px rgba(10,25,55,.3)}
dialog::backdrop{background:rgba(15,28,50,.55)}
.dlg-h{background:var(--navy);color:#fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center}
.dlg-h h3{font-size:16px}
.dlg-b{padding:20px;max-height:72vh;overflow:auto}
.dlg-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;background:#fafbfd}
.x{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;
  padding:12px 22px;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.25);z-index:99;font-weight:500}
.up{color:var(--bad);font-weight:600}.dn{color:var(--ok);font-weight:600}
.chk{display:flex;align-items:center;gap:7px;font-size:13px}
.chk input{width:16px;height:16px}
.hl{background:#fff8e6}
@media print{nav,header .hbtn,.noprint{display:none}}

/* ---- added for the PHP pages ---- */
:root{--navy:#1f5c5c}
body>main{padding:20px;max-width:1500px;margin:0 auto}
.sec-t{font-size:13px;font-weight:700;color:#1e3a63;text-transform:uppercase;
  letter-spacing:.6px;margin:22px 0 10px;padding-bottom:6px;border-bottom:2px solid #e2e7ef}
code{font-family:Consolas,monospace;background:#eef1f6;padding:1px 5px;border-radius:4px;font-size:12.5px}