@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Mulish:wght@400;500;600;700;800&display=swap');
:root{--teal:#0d5c63;--teal-dk:#07383d;--amber:#e8853b;--ink:#13262a;--muted:#5d7176;
  --line:#e2ecec;--bg:#f1f6f6;--card:#fff;--good:#1f9d6b;--bad:#cf4848;--win:#0d5c63;--radius:14px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Mulish',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
.hidden{display:none!important}.center{text-align:center}.muted{color:var(--muted)}.err{color:var(--bad);font-size:.85rem;min-height:1em}
.brand{font-family:'Fraunces',serif;font-weight:700;font-size:1.25rem;color:var(--teal-dk)}.brand span{color:var(--amber)}
.btn{background:var(--teal);color:#fff;border:none;border-radius:10px;padding:11px 16px;font:700 .95rem 'Mulish';cursor:pointer;transition:background .15s}
.btn:hover{background:var(--teal-dk)}.btn-sm{padding:8px 13px;font-size:.85rem}
.btn-ghost{background:transparent;color:var(--muted)}.btn-ghost:hover{background:#0000000d;color:var(--ink)}
.btn-amber{background:var(--amber)}.btn-amber:hover{background:#cf7026}
.btn-danger{background:#fff;color:var(--bad);border:1.5px solid #f0c9c9}.btn-danger:hover{background:#fdf0f0}
.btn[disabled]{opacity:.5;cursor:default}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px;width:360px;box-shadow:0 24px 60px -30px rgba(7,56,61,.4)}
.login-card .brand{font-size:1.5rem;margin-bottom:2px}
.login-card .muted{margin-bottom:22px}
.login-card label{display:block;font-size:.82rem;font-weight:700;margin-bottom:14px}
.login-card input{width:100%;margin-top:5px;padding:12px;border:1.5px solid var(--line);border-radius:10px;font:inherit}
.login-card input:focus{outline:none;border-color:var(--teal)}
.login-card .btn{width:100%;margin-top:6px}

/* app */
.topbar{background:var(--teal-dk);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:12px 22px;position:sticky;top:0;z-index:5}
.topbar .brand{color:#fff}.topbar .brand span{color:var(--amber)}
.topbar-right{display:flex;align-items:center;gap:12px}.who{font-size:.85rem;color:#bcd3d3}
.board{max-width:1080px;margin:0 auto;padding:26px 22px 60px}

.client{margin-bottom:34px}
.client-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.client-head h2{font-family:'Fraunces',serif;font-size:1.4rem}
.client-head .slug{font-size:.78rem;color:var(--muted);background:#fff;border:1px solid var(--line);padding:2px 9px;border-radius:99px}

.test{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px}
.test-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.test-head h3{font-size:1.08rem}
.test-head .route{font-size:.82rem;color:var(--muted);font-family:ui-monospace,monospace}
.badge{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:99px}
.badge.running{background:#e3f5ec;color:var(--good)}.badge.draft{background:#eef2f2;color:var(--muted)}
.badge.paused{background:#fdeecf;color:#9a6a12}.badge.completed{background:#e7f0f0;color:var(--teal)}
.test-actions{margin-left:auto;display:flex;gap:6px}

.vtable{width:100%;border-collapse:collapse;margin-top:12px}
.vtable th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:right;padding:6px 10px;font-weight:800}
.vtable th:first-child{text-align:left}
.vtable td{padding:9px 10px;text-align:right;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.vtable td:first-child{text-align:left;font-weight:700}
.vtable .cr{font-weight:800}
.tag{font-size:.66rem;font-weight:800;padding:2px 7px;border-radius:99px;margin-left:7px;text-transform:uppercase}
.tag.lead{background:#e3f5ec;color:var(--good)}.tag.win{background:var(--win);color:#fff}
.tag.ctrl{background:#eef2f2;color:var(--muted)}.tag.up{color:var(--good);background:#e3f5ec}.tag.down{color:var(--bad);background:#fdeaea}
.sig{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px dashed var(--line);font-size:.9rem}
.sig .pill{font-weight:800}.sig .ready{color:var(--good)}.sig .collecting{color:var(--muted)}
.promote{margin-left:auto;display:flex;gap:6px}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(7,30,33,.55);display:grid;place-items:center;z-index:20;padding:20px}
.modal{background:#fff;border-radius:16px;padding:24px;width:560px;max-width:100%;max-height:90vh;overflow:auto}
.modal h3{font-family:'Fraunces',serif;font-size:1.3rem;margin-bottom:14px}
.modal label{display:block;font-size:.8rem;font-weight:700;margin-bottom:12px}
.modal input,.modal select{width:100%;margin-top:5px;padding:10px;border:1.5px solid var(--line);border-radius:9px;font:inherit}
.vrow{display:grid;grid-template-columns:1.4fr 1fr .6fr auto;gap:8px;align-items:end;margin-bottom:8px}
.vrow label{margin:0}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.linkish{background:none;border:none;color:var(--teal);font-weight:700;cursor:pointer;font-size:.85rem;padding:0}
@media(max-width:640px){.vrow{grid-template-columns:1fr 1fr}}