@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope-var.woff2") format("woff2");font-weight:200 800;font-display:swap}
:root{--ink:#121418;--char:#1a1d22;--char2:#20242b;--navy:#0d1a33;--navy2:#13254a;--line:#2c3542;--text:#E8ECF2;--muted:#A9B3C1;--link:#86ADFF;--btn:#2563EB;--btnh:#1D4FD8;--amber:#FFC266;--green:#7BE0A6;--red:#FF9A90;--r:14px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.5 "Manrope",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--link)}:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:6px}
.pv{background:#3a2a00;color:var(--amber);text-align:center;font-weight:700;font-size:13px;padding:6px 10px;letter-spacing:.02em}
header.top{background:linear-gradient(180deg,var(--navy),var(--char));border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
header.top .in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px}
header.top img{height:34px;width:auto}header.top .sp{flex:1}
header.top .who{color:var(--muted);font-size:14px}
main{max-width:1100px;margin:0 auto;padding:16px}
h1{font-size:1.5rem;margin:.2em 0 .6em;font-weight:800;letter-spacing:-.01em}h2{font-size:1.15rem;margin:1.2em 0 .5em;font-weight:750}h3{font-size:1rem;margin:.8em 0 .4em}
.card{background:var(--char);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 12px}
.card.navy{background:linear-gradient(160deg,var(--navy2),var(--char))}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row>*{flex:0 0 auto}.grow{flex:1 1 auto!important}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:700px){.grid2{grid-template-columns:1fr}}
label{display:block;font-weight:650;font-size:14px;margin:10px 0 4px}
input,select,textarea{width:100%;font:inherit;color:var(--text);background:#0f1217;border:1px solid var(--line);border-radius:10px;padding:11px 12px;min-height:46px}
textarea{min-height:90px}input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:0;accent-color:var(--btn);vertical-align:middle;margin:0 8px 0 0}
.check{display:flex;align-items:flex-start;gap:4px;font-weight:500;margin:10px 0}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:700;border:0;border-radius:10px;padding:11px 16px;min-height:46px;cursor:pointer;background:var(--btn);color:#fff;text-decoration:none}
button:hover,.btn:hover{background:var(--btnh)}button:disabled{opacity:.5;cursor:not-allowed}
button.sec,.btn.sec{background:#2a3240;color:var(--text)}button.sec:hover{background:#343e4f}
button.warn{background:#7a2d27}button.ok{background:#1d6b45}button.big{width:100%;font-size:1.05rem;min-height:54px}
.muted{color:var(--muted)}.small{font-size:13px}.err{color:var(--red);font-weight:650}.okt{color:var(--green);font-weight:650}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:#2a3240;color:var(--text);margin:2px 4px 2px 0}
.badge.red{background:#5a1f1a;color:#ffd0ca}.badge.amber{background:#4a3500;color:var(--amber)}.badge.green{background:#173d2a;color:var(--green)}.badge.blue{background:#16264a;color:#bcd0ff}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px;scrollbar-width:none}
.tabs button{background:#20242b;color:var(--muted);border:1px solid var(--line);white-space:nowrap;min-height:40px;padding:8px 12px;font-size:14px}
.tabs button.on{background:var(--navy2);color:#fff;border-color:#3b5998}
.jobrow{display:block;color:inherit;text-decoration:none}.jobrow:hover .card{border-color:#3b5998}
.jobrow .card{display:grid;grid-template-columns:1fr auto;gap:6px}
.ref{font-weight:800;color:#fff}.price{font-weight:800;font-size:1.05rem}
.pipe{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0 12px}.pipe span{font-size:12px;padding:4px 8px;border-radius:8px;background:#20242b;color:var(--muted)}.pipe span.on{background:var(--btn);color:#fff}.pipe span.done{background:#173d2a;color:var(--green)}
.photos{display:flex;gap:8px;flex-wrap:wrap}.photos figure{margin:0;width:120px}.photos img{width:120px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#0f1217}.photos figcaption{font-size:11px;color:var(--muted)}
.sig{width:100%;height:170px;background:#fff;border-radius:10px;touch-action:none;display:block}
.list{list-style:none;margin:0;padding:0}.list li{padding:8px 0;border-bottom:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#0f1217;border:1px solid var(--line);padding:10px 16px;border-radius:10px;z-index:20;max-width:90vw}
.hidden{display:none!important}
pre.copy{white-space:pre-wrap;background:#0f1217;border:1px solid var(--line);border-radius:10px;padding:10px;font:14px/1.45 inherit;margin:6px 0}
.audit li{font-size:13px}.kv{display:grid;grid-template-columns:140px 1fr;gap:4px 10px;font-size:15px}@media(max-width:500px){.kv{grid-template-columns:1fr}}
.items{display:grid;gap:8px}.items label{margin:0;display:flex;justify-content:space-between;gap:10px;align-items:center;background:#0f1217;border:1px solid var(--line);border-radius:10px;padding:12px;font-weight:600;cursor:pointer}
.items input{width:auto}.items label:has(input:checked){border-color:var(--btn);background:#122040}
.seg{display:flex;gap:8px}.seg label{flex:1;margin:0;text-align:center;background:#0f1217;border:1px solid var(--line);border-radius:10px;padding:12px 6px;cursor:pointer}
.seg input{position:absolute;opacity:0}.seg label:has(input:checked){border-color:var(--btn);background:#122040}
.foot{color:var(--muted);font-size:12px;text-align:center;padding:24px 10px}
@media (max-width: 600px) { .top .hide-sm { display: none; } .top nav.row { gap: 6px; flex-wrap: nowrap; } .top nav .btn, .top nav button { padding: 8px 10px; } }
.roleswitch { display: inline-flex; border: 1px solid #2a3650; border-radius: 999px; padding: 3px; background: #0a1326; margin-right: 8px; }
.roleswitch a { padding: 7px 14px; border-radius: 999px; color: #c9d3e6; text-decoration: none; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.roleswitch a.on { background: #2563EB; color: #fff; }
.roleswitch a:focus-visible { outline: 3px solid #f5b301; outline-offset: 2px; }
@media (max-width: 600px) { .roleswitch a { padding: 6px 10px; font-size: .85rem; } .top .who { display: none; } }
.foot .footlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 6px; }
.foot .footlinks a { color: #c9d3e6; text-decoration: none; font-weight: 600; }
.foot .footlinks a:hover, .foot .footlinks a:focus-visible { text-decoration: underline; }
.foot p { margin: 0; }
/* Owner / My jobs switch: on phones it gets its own row under the logo so nothing is pushed off-screen */
@media (max-width: 600px) {
  header.top .in { flex-wrap: wrap; row-gap: 8px; }
  header.top #sw:not(:empty) { order: 9; flex-basis: 100%; display: flex; justify-content: center; }
  header.top #sw .roleswitch { margin-right: 0; width: 100%; max-width: 360px; }
  header.top #sw .roleswitch a { flex: 1; text-align: center; padding: 8px 10px; }
}
/* Phones: cards and nested button rows wrap instead of pushing the page sideways */
.row > .row { flex: 1 1 auto; min-width: 0; }
@media (max-width: 600px) { .card { flex-wrap: wrap; } .card > * { min-width: 0; max-width: 100%; } }
@media (max-width: 600px) { .row > h1, .row > div:not([class]) { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; } }

/* installable app: help panel */
.install-help{position:fixed;left:12px;right:12px;bottom:12px;max-width:440px;margin:0 auto;z-index:60;background:#1c222c;color:#E8ECF2;border:1px solid #2c3542;border-radius:12px;padding:16px 18px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.install-help h2{font-size:1.05rem;margin:0 0 .4em}.install-help ol{margin:.3em 0 .8em 1.2em;padding:0}
.install-line{text-align:center;margin:24px 0}