/* Swisslog brand: Petrol #004654, Grey80 #52595D, Grey50 #8B8B8B, Grey10 #ECECEC. Red only for the logo and errors. */
:root{ --petrol:#004654; --g80:#52595D; --g50:#8B8B8B; --g10:#ECECEC; --red:#D10007; --ctl:32px; }
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
body{ margin:0; font-family:Calibri, "Segoe UI", Arial, sans-serif; font-size:15px; color:#000; background:#fff; }
header{ display:flex; align-items:center; gap:16px; padding:0 16px; height:52px; border-bottom:1px solid var(--g10); }
header .brand{ font-weight:700; color:var(--petrol); font-size:18px; }
header .who{ margin-left:auto; color:var(--g80); font-size:14px; }
main{ padding:16px; max-width:1400px; margin:0 auto; }
h1{ font-size:22px; color:var(--petrol); margin:8px 0 16px; }
h2{ font-size:17px; color:var(--petrol); margin:20px 0 8px; }
button, .btn{ height:var(--ctl); padding:0 14px; border:1px solid var(--petrol); background:#fff; color:var(--petrol); border-radius:4px; font:inherit; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; }
button.cta{ background:var(--petrol); color:#fff; }
button:disabled{ opacity:.5; cursor:default; }
input, select{ height:var(--ctl); padding:0 8px; border:1px solid var(--g50); border-radius:4px; font:inherit; }
label{ display:block; color:var(--g80); font-size:14px; margin:10px 0 4px; }
.card{ border:1px solid var(--g10); border-radius:6px; padding:16px; }
.login{ max-width:360px; margin:60px auto; }
.login input{ width:100%; }
.login button{ width:100%; margin-top:16px; justify-content:center; }
.err{ color:var(--red); min-height:20px; margin-top:8px; }
.note{ color:var(--g80); }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--g10); margin-bottom:12px; }
.tabs button{ border:none; border-bottom:3px solid transparent; border-radius:0; }
.tabs button.on{ border-bottom-color:var(--petrol); font-weight:700; }
.bar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
table{ border-collapse:collapse; width:100%; font-size:14px; }
th, td{ text-align:left; padding:6px 8px; border-bottom:1px solid var(--g10); vertical-align:top; }
th{ color:var(--g80); font-weight:700; background:#fafafa; position:sticky; top:0; }
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; }
tr.sel td{ background:#e8f0f1; }
.kind{ display:inline-block; padding:1px 8px; border-radius:10px; background:var(--g10); color:var(--g80); font-size:12px; }
.kind.build, .kind.call{ background:var(--petrol); color:#fff; }
pre{ background:#fafafa; border:1px solid var(--g10); padding:12px; overflow:auto; max-height:60vh; font-size:12px; }
.split{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:16px; }
.tableWrap{ max-height:70vh; overflow:auto; border:1px solid var(--g10); border-radius:6px; }
.pw{ font-family:Consolas, monospace; background:#fafafa; border:1px solid var(--petrol); padding:8px; display:inline-block; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }