/* iFixit service centre — near-black menu and iFixit orange (#e76124, from the logo), white cards on a light grey page.
   Settings → Colours can change them: /svc/theme.css then changes only the variables below. */
:root{
  --bg:#f4f5fa;--cd:#fff;--tx:#151a2d;--mu:#69708a;--ln:#e6e8f1;--ln2:#eef0f6;
  --pr:#e76124;--pr2:#ec8150;--prs:#fdefe9;--side:#1d1c1a;--side2:#131311;--sidetx:#d2d2d1;
  --ok:#16a34a;--oks:#e8f8ee;--wn:#ea8a0c;--wns:#fff3e0;--am:#c88a04;--ams:#fff8dc;--ex:#e03b3b;--exs:#fdecec;--bl:#2f7cf6;--bls:#e8f1ff;--vi:#7c4ff0;--vis:#f1ebff;--gy:#8b93ab;--gys:#f0f2f7;
  --cd2:#f7f8fc;--cd3:#eef1f6;--top:#fff;
  /* shades of the main and menu colours (theme.css works them out for a centre's own colours) */
  --pr-h:#c7531f;--pr-ln:#f8d0bd;--pr-ln2:#f9d9ca;--pr-ln3:#f5c0a7;--pr-bg:#fef9f6;--pr-mk:#fadccf;--pr-dln:#6a362a;--pr-dbg:#33242d;--prg-rgb:231,97,36;--pr2-rgb:236,129,80;
  --side-mu:#b0b0af;--side-mu2:#a0a09f;--side-mu3:#838281;
  color-scheme:light;
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--pr)}
input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--ln);border-radius:10px;background:var(--cd);min-height:42px}
textarea{min-height:76px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--pr) 35%,transparent);border-color:var(--pr)}
label{display:block;font-size:13px;color:var(--mu);margin-bottom:12px;font-weight:500}label>input,label>select,label>textarea{margin-top:5px;color:var(--tx);font-weight:400}
:focus-visible{outline:2px solid var(--pr);outline-offset:2px}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;background:var(--pr);color:#fff;padding:9px 16px;font-weight:600;cursor:pointer;min-height:40px;text-decoration:none;white-space:nowrap}
.bt:hover{background:var(--pr-h)}.bt.gh{background:var(--cd);color:var(--tx);border:1px solid var(--ln)}.bt.gh:hover{border-color:#c9cde0;background:var(--cd2)}
.bt.x{background:var(--ex)}.bt.ok{background:var(--ok)}.bt.sm{padding:6px 12px;min-height:34px;font-size:13px;border-radius:8px}.bt:disabled{opacity:.5;cursor:default}
/* Settings > Invoice: a small picture of the printed invoice's top (the paper stays white in dark mode too) */
.invp{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;margin-bottom:12px;border:1px solid var(--ln);border-radius:10px;background:#fff;color:#212121;font:400 11px/1.5 InterIfx,system-ui,sans-serif}
.invp img{width:74px;height:auto;flex:none}.invp div{text-align:right;overflow-wrap:anywhere;min-width:0}.invp b{font-weight:700}
.cpk{display:flex;align-items:center;gap:10px;margin-top:6px}.cpk input[type=color]{width:56px;height:40px;min-height:40px;padding:3px;cursor:pointer;flex:none}.cpk code{font-size:13px;color:var(--tx)}
.mu{color:var(--mu)}.r{text-align:right}.nw{white-space:nowrap}.red{color:var(--ex)}
h1,h2,h3{margin:0;letter-spacing:-.01em}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,var(--side),var(--side2));color:var(--sidetx);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto;padding:22px 14px 14px}
.brand{display:flex;align-items:center;gap:11px;padding:0 8px}
.brand .mk{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#fff,var(--pr-mk));color:var(--side);display:grid;place-items:center;font-weight:800;font-size:18px;letter-spacing:-.04em;flex:none;overflow:hidden}
.brand .mk img{width:100%;height:100%;object-fit:contain;background:var(--cd)}
.brand b{display:block;color:#fff;font-size:24px;line-height:1;letter-spacing:-.03em}.brand small{display:block;font-size:11px;color:var(--side-mu);margin-top:4px}
.pw{margin:14px 8px 18px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:var(--side-mu2)}.pw b{color:#fff;font-size:15px;display:block;letter-spacing:-.01em}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--sidetx);text-decoration:none;font-size:14.5px}
.nav a svg{flex:none;opacity:.85}.nav a .ext{margin-left:auto;opacity:.6}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.on{background:linear-gradient(135deg,var(--pr),var(--pr2));color:#fff;box-shadow:0 6px 18px rgba(var(--prg-rgb),.35)}
.nav .sep{height:1px;background:rgba(255,255,255,.08);margin:10px 6px}
.sync{margin-top:auto;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.03);font-size:12px;color:var(--side-mu)}
.sync b{color:#fff;font-size:13.5px;display:flex;align-items:center;gap:7px}.sync b::before{content:'';width:8px;height:8px;border-radius:50%;background:#2fd47a;box-shadow:0 0 0 3px rgba(47,212,122,.18)}
.sync-mini{margin-top:auto;display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:11px;color:var(--side-mu3);cursor:default}
.sync-mini svg{flex:none}.sync-mini span{opacity:.7}
.main{min-width:0}
.top{display:flex;align-items:center;gap:16px;padding:12px 28px;background:var(--cd);border-bottom:1px solid var(--ln);position:sticky;top:0;z-index:20}
.top .hi b{font-size:17px;display:block}.top .hi small{color:var(--mu);font-size:13px}
.burger{display:none;border:0;background:none;padding:6px;cursor:pointer}
.srch{flex:1;max-width:440px;margin-left:auto;position:relative}
.srch input{padding-left:38px;padding-right:62px;border-radius:12px;background:var(--cd2)}
.srch>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mu)}
.srch kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:600 11px system-ui;border:1px solid var(--ln);border-radius:6px;padding:2px 6px;color:var(--mu);background:var(--cd)}
.sres{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--cd);border:1px solid var(--ln);border-radius:12px;box-shadow:0 18px 40px rgba(20,25,60,.14);max-height:70vh;overflow:auto;padding:6px;display:none}
.sres.on{display:block}.sres h4{margin:8px 10px 4px;font-size:11px;color:var(--mu);font-weight:600}
.sres a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--tx)}.sres a:hover,.sres a.hl{background:var(--prs)}.sres a small{color:var(--mu)}
.bell{position:relative;border:0;background:none;cursor:pointer;padding:6px;color:var(--tx)}.bell i{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:var(--ex);border:2px solid var(--cd)}
.me{display:flex;align-items:center;gap:10px;border-left:1px solid var(--ln);padding-left:16px;position:relative}
.av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--pr),var(--pr2));color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.me button{border:0;background:none;cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:600}
.menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--cd);border:1px solid var(--ln);border-radius:12px;box-shadow:0 18px 40px rgba(20,25,60,.14);padding:6px;min-width:200px;display:none;z-index:30}
.menu.on{display:block}.menu a,.menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;color:var(--tx);text-decoration:none;font-weight:500}.menu a:hover,.menu button:hover{background:var(--gys)}
.pg{padding:26px 28px 40px;max-width:1500px}
.ph{display:flex;align-items:flex-end;gap:14px;margin-bottom:20px;flex-wrap:wrap}.ph h1{font-size:30px;letter-spacing:-.02em}.ph p{margin:4px 0 0;color:var(--mu)}.ph .sp{flex:1}
.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mu);text-decoration:none;margin-bottom:8px}.back:hover{color:var(--pr)}

/* ---------- cards ---------- */
.cd{background:var(--cd);border:1px solid var(--ln);border-radius:16px;padding:20px;box-shadow:0 1px 2px rgba(20,25,60,.04)}
.cd h2{font-size:18px;margin-bottom:14px;display:flex;align-items:center;gap:10px}.cd h2 .sp{flex:1}.cd h2 a{font-size:13px;font-weight:500;text-decoration:none}
.g{display:grid;gap:18px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:18px}
.kpi{display:block;background:var(--cd);border:1px solid var(--ln);border-radius:14px;padding:16px;text-decoration:none;color:var(--tx);transition:border-color .15s,transform .15s}
.kpi:hover{border-color:var(--pr-ln);transform:translateY(-1px)}
.kpi .k{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500}.kpi .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.kpi .v{font-size:32px;font-weight:700;margin-top:10px;letter-spacing:-.02em;display:flex;align-items:baseline;gap:10px;line-height:1.1}
.kpi .v small{font-size:12px;font-weight:500;color:var(--mu);line-height:1.3}.kpi .v small b{color:var(--ok)}.kpi .v small b.dn{color:var(--ex)}
.t-vi{background:var(--vis);color:var(--vi)}.t-bl{background:var(--bls);color:var(--bl)}.t-wn{background:var(--wns);color:var(--wn)}.t-ex{background:var(--exs);color:var(--ex)}.t-ok{background:var(--oks);color:var(--ok)}.t-am{background:var(--ams);color:var(--am)}.t-gy{background:var(--gys);color:var(--gy)}
.dashrow{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px;margin-bottom:18px}
.dashrow2{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}
.donut{display:flex;align-items:center;gap:22px}.donut svg{flex:none}
.leg{flex:1;display:flex;flex-direction:column;gap:10px;font-size:13.5px}.leg a{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;color:var(--tx);text-decoration:none}.leg a:hover span{color:var(--pr)}
.leg i{width:10px;height:10px;border-radius:50%}.leg em{font-style:normal;color:var(--mu);font-variant-numeric:tabular-nums}
.bars{display:flex;flex-direction:column;gap:12px}.bar{display:grid;grid-template-columns:26px 120px 1fr 34px;gap:12px;align-items:center;font-size:14px;color:var(--tx);text-decoration:none}
.bar .tr{height:10px;border-radius:6px;background:var(--gys);overflow:hidden}.bar .tr i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--pr),var(--pr2))}.bar b{text-align:right;font-variant-numeric:tabular-nums}
.qa{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qa a{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;text-decoration:none;color:var(--tx);font-weight:600;font-size:14px;border:1px solid transparent}
.qa a:hover{border-color:currentColor}.qa a span{color:var(--tx)}
.qa .ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--cd);flex:none}
.wl{display:flex;flex-direction:column;gap:14px}.wl a{display:grid;grid-template-columns:38px 1fr 1.1fr 42px;gap:12px;align-items:center;text-decoration:none;color:var(--tx)}
.wl small{display:block;color:var(--mu);font-size:12px}.wl .tr{height:9px;border-radius:6px;background:var(--gys);overflow:hidden}.wl .tr i{display:block;height:100%;background:linear-gradient(90deg,var(--pr),var(--pr2));border-radius:6px}
.wl .tr i.hot{background:linear-gradient(90deg,#f59e0b,var(--ex))}.wl b{text-align:right;font-variant-numeric:tabular-nums}
.al{display:flex;flex-direction:column}.al a{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--ln2);text-decoration:none;color:var(--tx);font-size:14px}.al a:last-child{border:0}
.al .ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none}
.empty{color:var(--mu);font-size:14px;padding:14px 0}

/* ---------- tables ---------- */
.tw{overflow-x:auto;margin:0 -20px;padding:0 20px}
table.tb{width:100%;border-collapse:collapse;font-size:13.5px}
.tb th{text-align:left;font-size:12px;color:var(--mu);font-weight:600;padding:9px 10px;background:var(--cd2);border-bottom:1px solid var(--ln);white-space:nowrap}
.tb td{padding:11px 10px;border-bottom:1px solid var(--ln2);vertical-align:top}.tb tr:last-child td{border-bottom:0}
.tb tr.ck{cursor:pointer}.tb tr.ck:hover td{background:var(--cd2)}
.tb a.jn{font-weight:600;text-decoration:none}.tb small{color:var(--mu)}
.dv{display:flex;align-items:center;gap:8px}.dv svg{flex:none;color:#4b5270}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.s-received{background:var(--gys);color:#4b5270}.s-triage{background:#e8ecff;color:#4355b8}.s-diagnosis{background:var(--vis);color:var(--vi)}.s-pending_approval{background:var(--ams);color:#a66f00}.s-waiting_parts{background:var(--wns);color:#c96f00}
.s-in_repair{background:var(--bls);color:var(--bl)}.s-quality_check{background:#e0f5f0;color:#0e7a62}.s-ready{background:var(--oks);color:var(--ok)}.s-delivered{background:var(--cd3);color:#56607a}.s-cancelled{background:var(--exs);color:var(--ex)}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:600;background:var(--gys);color:#4b5270}.tag.ex{background:var(--exs);color:var(--ex)}.tag.wn{background:var(--wns);color:#c96f00}.tag.vi{background:var(--vis);color:var(--vi)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs a{padding:7px 13px;border-radius:999px;border:1px solid var(--ln);background:var(--cd);text-decoration:none;color:var(--tx);font-size:13px;font-weight:500}
.tabs a.on{background:var(--side);border-color:var(--side);color:#fff}.tabs a em{font-style:normal;color:var(--mu);margin-left:4px}.tabs a.on em{color:#c9cde0}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.filters input{max-width:320px}.filters select{max-width:220px}

/* ---------- job page ---------- */
.jhead{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.jhead h1{font-size:26px}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;font-size:14px}.kv dt{color:var(--mu)}.kv dd{margin:0}
.chk{display:flex;flex-wrap:wrap;gap:6px}.chk span{padding:4px 10px;border-radius:8px;background:var(--gys);font-size:13px}.chk span.y{background:var(--oks);color:#11733a}.chk span.n{background:var(--exs);color:#b02a2a}
.tl{position:relative;padding-left:22px}.tl::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--ln)}
.tl div{position:relative;padding:0 0 16px}.tl div::before{content:'';position:absolute;left:-21px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--cd);border:3px solid var(--pr)}
.tl div.nt::before{border-color:var(--gy)}.tl small{color:var(--mu)}.tl p{margin:3px 0 0;white-space:pre-wrap}
.pre{white-space:pre-wrap}

/* ---------- forms ---------- */
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.fg3{grid-template-columns:repeat(3,minmax(0,1fr))}.fg .full{grid-column:1/-1}
.step{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;margin-bottom:14px}.step i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--prs);color:var(--pr);display:grid;place-items:center;font-size:13px}
.cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:14px}
.cats label{margin:0;cursor:pointer}.cats input{position:absolute;opacity:0;width:1px;height:1px}
.cats span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 6px;min-height:92px;border:1px solid var(--ln);border-radius:12px;font-size:12.5px;color:var(--tx);text-align:center;background:var(--cd)}
.cats input:checked+span{border-color:var(--pr);background:var(--prs);color:var(--pr);font-weight:600}.cats input:focus-visible+span{outline:2px solid var(--pr)}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}.opts label{margin:0;display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--ln);border-radius:10px;color:var(--tx);font-weight:500;cursor:pointer;background:var(--cd)}
.opts input{width:auto;min-height:0;margin:0;accent-color:var(--pr)}.opts label:has(input:checked){border-color:var(--pr);background:var(--prs)}
.pick{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.pick button{display:flex;justify-content:space-between;gap:10px;text-align:left;padding:10px 12px;border:1px solid var(--ln);border-radius:10px;background:var(--cd);cursor:pointer}
.pick button:hover,.pick button.on{border-color:var(--pr);background:var(--prs)}.pick small{color:var(--mu)}
.chosen{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--pr-ln2);background:var(--prs);border-radius:12px;margin-bottom:12px}.chosen .sp{flex:1}
.ck1{display:flex;align-items:center;gap:8px;color:var(--tx);font-weight:500}.ck1 input{width:auto;min-height:0;margin:0;accent-color:var(--pr)}
.hint{font-size:12.5px;color:var(--mu);margin:-6px 0 12px}
.cats span svg{color:#3d4463}.cats input:checked+span svg{color:var(--pr)}
/* common issue chips */
.iss{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.iss button{border:1px solid var(--ln);background:var(--cd);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;color:var(--tx)}
.iss button:hover{border-color:#c9cde0}.iss button.on{border-color:var(--pr);background:var(--prs);color:var(--pr);font-weight:600}
/* function test: one row per check, three-way choice */
.fnh{display:flex;align-items:center;gap:8px;margin:4px 0 8px;font-size:13px;color:var(--mu);font-weight:500}.fnh span{flex:1}
.fnt{border:1px solid var(--ln);border-radius:12px;margin-bottom:14px;overflow:hidden}
.fnr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px 7px 14px;font-size:14px;border-bottom:1px solid var(--ln2)}.fnr:last-child{border-bottom:0}
.tri{display:flex;gap:4px 14px;flex-wrap:wrap;flex:none}
.tri label{margin:0;cursor:pointer;background:none}.tri input{position:absolute;opacity:0;width:1px;height:1px}
.tri span{display:inline-flex;align-items:center;gap:7px;padding:5px 2px;font-size:13px;font-weight:500;color:var(--tx);white-space:nowrap}
.tri span::before{content:'';flex:none;width:18px;height:18px;border:1.5px solid #b6bcd0;border-radius:5px;background:var(--cd) center/13px no-repeat;box-sizing:border-box}
.tri input:focus-visible+span::before{outline:2px solid var(--pr);outline-offset:2px}
.tri input:checked+span{font-weight:600}
.tri .t-ok input:checked+span::before{background-color:#16a34a;border-color:#16a34a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.tri .t-fault input:checked+span::before{background-color:#dc2626;border-color:#dc2626;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.tri .t-na input:checked+span::before{background-color:#7a8199;border-color:#7a8199;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.tri .t-ok input:checked+span{color:#11733a}.tri .t-fault input:checked+span{color:#b02a2a}
@media(max-width:620px){.fnr{flex-direction:column;align-items:stretch}.tri{align-self:flex-start}}
/* bill and payments */
.bsum{margin-top:14px;border-top:1px solid var(--ln2);padding-top:10px;display:grid;gap:6px;font-size:14px}
.bs{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--mu)}.bs b{color:var(--tx);font-weight:600;font-variant-numeric:tabular-nums}
.bs.tot{color:var(--tx);font-weight:600;padding-top:6px;border-top:1px dashed var(--ln)}.bs.tot b{font-size:17px}
.bs.due b{color:var(--ex);font-size:16px}.bs.clear b{color:var(--ok)}
.lk{border:0;background:none;padding:0 0 0 6px;color:var(--pr);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}.lk:hover{text-decoration:underline}
.bx{border:0;background:none;color:var(--mu);cursor:pointer;width:28px;height:28px;border-radius:7px;font-size:13px;line-height:1}.bx:hover{background:var(--exs);color:var(--ex)}
.pays{margin-top:10px;display:grid;gap:2px;font-size:13px}.pays div{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--ln2)}.pays div:last-child{border:0}
.pays span{flex:1;color:var(--mu)}.pays b{font-variant-numeric:tabular-nums;color:var(--ok)}
.tb td.r,.tb th.r{text-align:right}
@media print{#rc table.bl th{border:1px solid #999;padding:5px 7px;background:#f2f2f2;text-align:left}#rc .r,#rc table.bl th.r{text-align:right}#rc table.bl td:first-child{width:6%}}

/* ---------- board ---------- */
.board{display:grid;grid-template-columns:repeat(8,minmax(200px,1fr));gap:14px;overflow-x:auto;padding-bottom:8px}
.col{background:var(--cd3);border-radius:14px;padding:10px;min-height:200px}.col h3{font-size:13.5px;padding:4px 6px 10px;display:flex;gap:6px}.col h3 em{font-style:normal;color:var(--mu)}
.jc{display:block;background:var(--cd);border:1px solid var(--ln);border-radius:12px;padding:11px 12px;margin-bottom:8px;text-decoration:none;color:var(--tx);font-size:13px}
.jc:hover{border-color:var(--pr-ln)}.jc b{display:block;font-size:12.5px;color:var(--pr)}.jc small{color:var(--mu);display:block;margin-top:3px}.jc.od{border-left:3px solid var(--ex)}

/* ---------- dialogs, toast, sign-in ---------- */
.dlg{position:fixed;inset:0;background:rgba(14,18,40,.45);display:flex;align-items:center;justify-content:center;z-index:60;padding:14px}
.dlg .cd{width:100%;max-width:520px;max-height:94vh;overflow:auto}.dlg .cd.w{max-width:760px}.dlg h3{font-size:19px;margin-bottom:14px}
.row2{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);padding:12px 18px;border-radius:12px;background:#11733a;color:#fff;font-weight:600;opacity:0;pointer-events:none;transition:.2s;z-index:90;max-width:92vw}
.toast.on{opacity:1;transform:translate(-50%,0)}.toast.er{background:var(--ex)}
.blk{max-width:520px;margin:12vh auto;text-align:center}

/* ---------- print: job card ---------- */
#rc{display:none}
@media print{
  @page{size:A4;margin:12mm}
  body{background:var(--cd)}body>*:not(#rc){display:none!important}
  #rc{display:block;font-size:11.5pt;color:#000}
  #rc .hd{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:10px}
  #rc .hd img{max-height:52px;max-width:160px}#rc h1{font-size:20pt}#rc h2{font-size:13pt;margin:12px 0 6px}
  #rc table{width:100%;border-collapse:collapse}#rc td{border:1px solid #999;padding:5px 7px;vertical-align:top}#rc td.k{width:26%;background:#f2f2f2;font-weight:600}
  #rc .terms{font-size:9pt;margin-top:10px}#rc .sig{display:flex;justify-content:space-between;margin-top:34px}#rc .sig div{border-top:1px solid #000;width:42%;padding-top:4px;font-size:10pt}
  #rc .cut{border-top:1px dashed #000;margin:18px 0 10px;text-align:center;font-size:9pt}
}

/* ---------- print: the invoice in iFixit's own layout (svc.js printBill) ---------- */
@font-face{font-family:InterIfx;src:url(/fonts/inter-latin-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:block}
@media print{
  #rc.ifx{font:400 9pt/1.5 InterIfx,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variation-settings:'opsz' 14;color:#212121;padding:0 2.6pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #rc.ifx b,#rc.ifx em{font-style:normal}
  #rc.ifx .ih{display:flex;justify-content:space-between;align-items:center;gap:14pt}
  #rc.ifx .ih img{width:90pt;height:auto;flex:none;margin-bottom:3.6pt}
  #rc.ifx .tr{text-align:right;overflow-wrap:anywhere}#rc.ifx .tr b{font-weight:700}
  #rc.ifx .ic{display:flex;justify-content:center;gap:19pt;margin:14pt 0 12.9pt}
  #rc.ifx .ic span{display:inline-flex;align-items:center;gap:5.8pt}#rc.ifx .ic svg{width:10.5pt;height:10.5pt;flex:none}
  #rc.ifx .bar{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);gap:16pt;align-items:start;white-space:nowrap;background:#ddd;border:.75pt solid #c5c5c5;padding:3.5pt 3.5pt 4.2pt;font-size:10.5pt;line-height:1.21;color:#1c1c1c}
  #rc.ifx .bar h1{font-size:12pt;font-weight:500;font-variation-settings:'opsz' 16;line-height:1.21;margin:0;padding-top:.6pt}#rc.ifx .bar span+h1+span{text-align:right}
  #rc.ifx .cols{display:grid;grid-template-columns:1fr 1fr;margin-top:6pt}
  #rc.ifx .cl{padding:6pt 6pt 0 0;border-right:.5pt solid #ddd;min-width:0}
  #rc.ifx .cr{padding:3.2pt 0 0 6pt;display:flex;flex-direction:column;min-width:0}
  #rc.ifx .fr{display:grid;grid-template-columns:87pt 1fr;align-items:start;margin-bottom:6pt;break-inside:avoid}
  #rc.ifx .fr b{font-weight:400;color:#1c1c1c;background:#ddd;border-radius:3pt;padding:2.7pt 3pt 3.2pt;min-height:19.4pt;overflow-wrap:anywhere}
  #rc.ifx h1,#rc.ifx h2{letter-spacing:normal}#rc.ifx h2{font-size:10.5pt;font-weight:400;line-height:1.5;margin:0 0 7.4pt}
  #rc.ifx .ck{display:grid;grid-template-columns:130.2pt 1fr;row-gap:9.1pt;font-size:7.5pt;line-height:10.4pt;font-weight:500;color:#666}
  #rc.ifx .ck span{display:flex;align-items:center;gap:7.6pt}
  #rc.ifx .b{display:block;width:10.4pt;height:10.4pt;box-sizing:border-box;border:1.2pt solid #999;border-radius:1.8pt;flex:none}
  #rc.ifx .b svg{display:block;width:100%;height:100%;fill:none;stroke-width:1.7;stroke-linecap:square}
  #rc.ifx .b.x{border-color:#d92d20}#rc.ifx .b.x svg{stroke:#d92d20}#rc.ifx .b.k svg{stroke:#212121;stroke-linecap:round;stroke-linejoin:round}
  #rc.ifx .bh{color:#666;font-weight:500;margin-top:7.3pt}#rc.ifx .bh b{font-weight:700;color:#212121;margin-left:9pt}
  #rc.ifx .ls{flex:1 0 auto;padding-bottom:10pt}
  #rc.ifx .ln{display:flex;justify-content:space-between;align-items:center;gap:8pt;font-weight:500;color:#111827;margin-bottom:6pt;break-inside:avoid}
  #rc.ifx .ln b{flex:none;width:102.3pt;box-sizing:border-box;text-align:right;font-weight:500;background:#ddd;border-radius:3pt;padding:2.6pt 5.9pt 2.6pt 3pt}
  #rc.ifx .cmp .ln{margin-bottom:2.5pt}#rc.ifx .cmp .ln b{padding-top:1.6pt;padding-bottom:1.6pt}
  #rc.ifx .sf{margin:0 0 8pt}#rc.ifx .sf b{font-weight:500}
  #rc.ifx .ix{display:grid;grid-template-columns:max-content 1fr;column-gap:8pt;row-gap:3pt;margin:10pt 0 0}#rc.ifx .ix dt{color:#666;font-weight:500}#rc.ifx .ix dd{margin:0;overflow-wrap:anywhere}
  #rc.ifx .tt{border:.75pt solid #ddd;font-weight:500;color:#111827;break-inside:avoid}
  #rc.ifx .tt div{display:flex;justify-content:space-between;gap:8pt;padding:5.6pt 9pt}#rc.ifx .tt div+div{border-top:.75pt solid #e0e0e0}#rc.ifx .tt .g{background:#eee}
  #rc.ifx .tm{border:.75pt solid #ddd;padding:5.4pt 6pt 6pt;margin-top:6pt;font-weight:500;break-inside:avoid}
  #rc.ifx .tm p{margin:0 0 6pt}#rc.ifx .tm p:last-child{margin:0}#rc.ifx .tm em{color:#f00}
  #rc.ifx .rd{color:#f00;font-weight:700;margin:6.6pt 0 0}
  #rc.ifx .sg{display:flex;justify-content:space-between;margin-top:36.5pt;font-size:10.5pt;font-weight:500;line-height:1;break-inside:avoid}#rc.ifx .sg div{white-space:nowrap}
}

/* ---------- small screens ---------- */
@media(max-width:1280px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.dashrow{grid-template-columns:1fr 1fr}.dashrow>.cd:last-child{grid-column:1/-1}.cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* three-wide report cards get too tight for a 150px label: drop to two before they collapse to one */
@media(max-width:1160px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:960px){
  .shell{grid-template-columns:minmax(0,1fr)}.side{position:fixed;left:0;top:0;bottom:0;width:270px;z-index:50;transform:translateX(-100%);transition:transform .2s}.side.on{transform:none;box-shadow:0 0 0 100vmax rgba(14,18,40,.4)}
  .burger{display:block}.dashrow,.dashrow2,.g2,.g3{grid-template-columns:minmax(0,1fr)}.top{padding:10px 16px;gap:10px}.top .hi{display:none}.me .nm{display:none}.pg{padding:18px 16px 32px}
  
}
@media(max-width:620px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.fg,.fg3{grid-template-columns:1fr}.cats{grid-template-columns:repeat(3,minmax(0,1fr))}.kv{grid-template-columns:1fr}.kv dt{margin-top:6px}.srch kbd{display:none}.bar{grid-template-columns:22px 90px 1fr 28px}}
/* on a phone the search box is squeezed thin between the icons: open its results across the screen so job numbers are readable */
@media(max-width:620px){.srch .sres{position:fixed;left:10px;right:10px;top:60px;width:auto}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.pwbox{position:relative;display:block;margin-top:5px}.pwbox input{padding-right:46px!important;margin-top:0}.pweye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--mu);cursor:pointer;border-radius:8px;padding:0}.pweye:hover{color:var(--tx);background:var(--gys)}
.shell{background:linear-gradient(90deg,var(--side2) 256px,transparent 256px)}@media(max-width:960px){.shell{background:none}}
.tb a.jn{white-space:nowrap}
@media(max-width:620px){.donut{flex-direction:column;align-items:stretch}.donut svg{align-self:center}.ph label{width:100%}}
.msel{position:relative;margin-top:5px}.msb{width:100%;text-align:left;min-height:42px;padding:9px 36px 9px 12px;border:1px solid var(--ln);border-radius:10px;background:var(--cd) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369708a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center/16px no-repeat;cursor:pointer;color:var(--tx);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msb.ph{color:var(--mu)}.msp{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--cd);border:1px solid var(--ln);border-radius:12px;box-shadow:0 18px 40px rgba(20,25,60,.16);max-height:280px;overflow:auto;padding:6px;z-index:5}
.msp.on{display:block}.msp label{display:flex;align-items:center;gap:10px;margin:0;padding:8px 10px;border-radius:8px;color:var(--tx);font-weight:400;cursor:pointer}.msp label:hover{background:var(--prs)}.msp input[type=checkbox]{width:auto;min-height:0;margin:0;accent-color:var(--pr)}
.msadd{display:flex;gap:6px;padding:6px;border-top:1px solid var(--ln2);margin-top:4px}.msadd input{min-height:34px;padding:6px 10px}
.lbl{display:block;font-size:13px;color:var(--mu);margin-bottom:12px;font-weight:500}
.msp{position:static;margin-top:6px;box-shadow:none;max-height:240px}
.pmod{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--tx);font-size:14px}.pmod:hover{background:var(--gys)}.pmod.on{background:var(--prs);color:var(--pr);font-weight:600}.pmod em{font-style:normal;color:var(--mu);font-size:12px}
.cd h2 svg{color:#4b5270}
/* photo grid */
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.phi{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:1;background:var(--gys)}
.phi img{width:100%;height:100%;object-fit:cover;cursor:pointer;display:block}
.pho{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:4px 6px;background:linear-gradient(transparent,rgba(0,0,0,.45))}
.pho small{color:#fff;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pho .phd{background:rgba(0,0,0,.35);color:#fff;border:0;padding:2px 6px;border-radius:4px;font-size:13px;cursor:pointer;min-height:0;line-height:1}
.phov{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:999;cursor:zoom-out}
.phov img{max-width:94vw;max-height:92vh;border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
/* sidebar count, notices, today's money, profit and loss */
.nav a .nb{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:700;background:#ff6b6b;color:#fff;border-radius:999px;padding:1px 7px}
.banner{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;margin-bottom:16px;font-size:14px;border:1px solid}
.banner svg{flex:none;margin-top:1px}.banner.ok{background:var(--oks);border-color:#bfe8cd;color:#11733a}.banner.ex{background:var(--exs);border-color:#f6c4c4;color:#a52a2a}
.banner span{color:var(--tx)}
.mstrip{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;background:var(--cd);border:1px solid var(--ln);border-radius:14px;padding:12px 16px;margin:-4px 0 18px;font-size:14px}
.mstrip>span{display:flex;align-items:center;gap:8px;font-weight:600;margin-right:6px;align-self:center}.mstrip b{font-size:18px;font-variant-numeric:tabular-nums}.mstrip small{color:var(--mu);margin-right:12px}
.mstrip a{margin-left:auto;font-size:13px;text-decoration:none;font-weight:600}.mstrip a+a{margin-left:12px}
.pl{margin-bottom:14px}.pl h3{font-size:14px;color:var(--mu);font-weight:600;margin:0 0 6px}
.plg{padding:6px 0;border-bottom:1px solid var(--ln2)}.plg b{display:block;font-size:13.5px;margin-bottom:2px}
.plg div,.plt{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:2px 0 2px 12px;font-variant-numeric:tabular-nums}
.plt{padding:8px 0 0;font-weight:700}.plt.net{border-top:2px solid var(--tx);margin-top:4px;font-size:16px}
@media(max-width:620px){.mstrip a{margin-left:0}}
/* money tiles: an amount is never broken across lines; it shrinks with the tile (two to a row on a phone) and the small
   label drops under it when there is no room beside it */
.kpis.mny .kpi{container-type:inline-size}
.kpis.mny .v{font-size:23px;font-size:clamp(14px,11.5cqi,23px);flex-wrap:wrap;gap:2px 10px;white-space:nowrap}
.kpis.mny .v small{white-space:normal}
/* ---------- create job card: job on the left, contact / model / issues on the right ---------- */
.jcard-h{display:flex;align-items:center;gap:14px;margin-bottom:18px}.jcard-h h1{font-size:28px;letter-spacing:-.02em;flex:1}
.jcard{display:grid;grid-template-columns:350px minmax(0,1fr);background:var(--cd);border:1px solid var(--ln);border-radius:18px;box-shadow:0 1px 2px rgba(20,25,60,.04);height:calc(100vh - 170px);min-height:620px;overflow:hidden}
.jl{padding:20px 22px;border-right:1px solid var(--ln);overflow:auto}
.jr{display:flex;flex-direction:column;min-width:0}
.jr-h{display:flex;align-items:center;gap:10px;padding:18px 22px 12px;flex-wrap:wrap}.jr-h h2{font-size:19px;margin:0}.jr-h .sp{flex:1}
.jr-h .bt.on{border-color:var(--pr);color:var(--pr);background:var(--prs)}
.jr-b{flex:1;overflow:auto;padding:4px 22px 18px}
.jr-f{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--ln);background:var(--cd2)}
.bt.big{min-height:48px;padding:10px 34px;font-size:16px}.bt.wide{width:100%}
.srchf{position:relative;margin-bottom:14px}.srchf>svg{position:absolute;left:12px;top:12px;color:var(--mu)}.srchf input{padding-left:40px}.srchf .sres{top:calc(100% + 4px);z-index:5}
.ib{display:flex;margin-top:5px}.ib input{margin-top:0;border-top-right-radius:0;border-bottom-right-radius:0}
.ib button{border:1px solid var(--ln);border-left:0;background:var(--cd);border-radius:0 10px 10px 0;padding:0 12px;cursor:pointer;color:var(--mu)}.ib button:hover{color:var(--pr)}
.lrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 10px;font-size:13px;color:var(--mu);font-weight:500}
.lines{border:1px solid var(--ln);border-radius:12px;margin-bottom:14px;font-size:13.5px}
.lines>div{display:flex;align-items:center;gap:8px;padding:8px 6px 8px 12px;border-bottom:1px solid var(--ln2)}.lines>div>span{flex:1;min-width:0}.lines b{font-variant-numeric:tabular-nums}
.lines .tot{border:0;background:var(--cd2);border-radius:0 0 12px 12px;padding-right:44px}.lines .tot span{font-weight:600}
.mydev{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px;font-size:13px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ln);background:var(--cd);border-radius:999px;padding:5px 11px;font-size:12.5px;cursor:pointer}.chip.on{border-color:var(--pr);background:var(--prs);color:var(--pr)}
.cattabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--ln);margin-bottom:14px;scrollbar-width:thin}
.cattabs button{display:flex;align-items:center;gap:8px;border:0;background:none;padding:10px 12px 12px;font-size:14.5px;cursor:pointer;color:var(--tx);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.cattabs button svg{flex:none;color:#4b5270}.cattabs button.on{color:var(--pr);border-bottom-color:var(--pr);font-weight:600}.cattabs button:hover{color:var(--pr)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.mcard{position:relative;display:flex;align-items:center;gap:14px;text-align:left;padding:14px;border:1px solid var(--ln2);background:var(--cd2);border-radius:14px;cursor:pointer;font-size:14.5px;color:var(--tx);min-height:92px}
.mcard:hover{border-color:var(--pr-ln);background:var(--cd)}.mcard.on{border:2px solid var(--pr);background:var(--cd);padding:13px}.mcard svg,.mcard .dart{flex:none}
.mcard .tick{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:6px;background:var(--pr);color:#fff;display:grid;place-items:center}
.dart{display:grid;place-items:center;border-radius:14px}
.mdet{display:flex;gap:22px;align-items:flex-start;padding:16px 18px;border:1px solid var(--pr-ln2);background:linear-gradient(180deg,var(--pr-bg),#fff);border-radius:16px;margin-bottom:16px}
.mdet h3{font-size:22px;letter-spacing:-.02em;margin:2px 0 4px}.mdet p{margin:0 0 10px}.mdet>div{min-width:0;flex:1}.mdet .lbl{margin:8px 0 6px}
.sw{display:flex;flex-wrap:wrap;gap:6px}.sw button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ln);background:var(--cd);border-radius:999px;padding:5px 11px;font-size:12.5px;cursor:pointer}
.sw button i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}.sw button.on{border-color:var(--pr);background:var(--prs);color:var(--pr);font-weight:600}
.itabs{display:flex;gap:6px;border-bottom:1px solid var(--ln);margin-bottom:14px}
.itabs button{display:flex;align-items:center;gap:8px;border:0;background:none;padding:10px 14px 12px;font-size:15px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--tx)}.itabs button.on{color:var(--pr);border-bottom-color:var(--pr);font-weight:600}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.icard{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px;border:1px solid var(--ln);background:var(--cd);border-radius:14px;cursor:pointer;box-shadow:0 1px 2px rgba(20,25,60,.04)}
.icard b{font-size:15px;font-weight:600}.icard span{color:var(--pr);font-weight:600;font-variant-numeric:tabular-nums}.icard small{color:var(--mu);font-weight:400}
.icard:hover{border-color:var(--pr-ln)}.icard.on{border:2px solid var(--pr);background:var(--prs);padding:15px}
.ckg{display:grid;grid-template-columns:1fr 1fr}.ckg .fnr{border-bottom:1px solid var(--ln2)}.ckg .fnr:nth-child(odd){border-right:1px solid var(--ln2)}.ckg .tri span{padding:4px 1px}
.rate{display:flex;align-items:center;gap:8px;margin-top:5px}.rate select{margin-top:0}.rate i{width:12px;height:12px;border-radius:50%;flex:none}
.r-good{background:#16a34a}.r-neutral{background:#5fd3b0}.r-bad{background:#e03b3b}
.hist{margin-top:18px;padding:16px}.hist h2{font-size:17px}
.cfacts{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 18px}.cfacts>span{display:flex;align-items:center;gap:7px;background:var(--cd);border:1px solid var(--ln);border-radius:10px;padding:6px 11px;font-size:13.5px}
.cfacts small{color:var(--mu)}.cfacts .rate{margin:0}
@media(max-width:1100px){.jcard{grid-template-columns:1fr;height:auto}.jl{border-right:0;border-bottom:1px solid var(--ln)}.jr-b{max-height:none;overflow:visible}}
@media(max-width:620px){.ckg{grid-template-columns:1fr}.ckg .fnr:nth-child(odd){border-right:0}.mdet{flex-direction:column;gap:12px}.mgrid{grid-template-columns:1fr 1fr}.mcard{flex-direction:column;text-align:center;gap:8px}.jcard-h h1{font-size:22px}}
/* the job card panels scroll inside the card (grid and flex children need min-height:0 to allow it) */
.jcard{grid-template-rows:minmax(0,1fr)}.jl,.jr{min-height:0}.jr-b{min-height:0;overscroll-behavior:contain}
@media(max-width:1100px){.jcard{grid-template-rows:auto}}
/* spare parts for one model, as cards with the model's drawing */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pcard{position:relative;display:flex;gap:14px;align-items:center;text-align:left;padding:14px;border:1px solid var(--ln2,var(--ln));background:var(--cd2);border-radius:14px;cursor:pointer;color:var(--tx);font:inherit}
.pcard:hover{border-color:var(--pr-ln);background:var(--cd)}
.pcard.on{border:2px solid var(--pr);background:var(--cd);padding:13px}
.pcard .pa{position:relative;flex:none;display:grid;place-items:center;width:64px}
.pcard .pa i{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);font-style:normal;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;background:var(--prs);color:var(--pr);white-space:nowrap}
.pcard .pt{min-width:0;display:flex;flex-direction:column;gap:2px}
.pcard .pt b{font-size:14.5px;font-weight:600;line-height:1.3}
.pcard .pt small{color:var(--mu);font-size:12.5px}.pcard .pt small.ok{color:#0a8a58}.pcard .pt small.red{color:#d92d20}
.pcard .pp{color:var(--pr);font-weight:700;font-variant-numeric:tabular-nums}
.pcard .tick{position:absolute;top:8px;right:8px;color:var(--pr)}
.phd{display:flex;gap:14px;align-items:center;margin-bottom:14px}.phd h3{margin:0 0 2px}.phd p{margin:0}
#pl{max-height:52vh;overflow:auto;margin:0 -4px 12px;padding:2px 4px}
@media(max-width:620px){.pgrid{grid-template-columns:1fr}}
/* parts: VAT / Tax paid on top of the purchase price (on a phone it sits right under the purchase price) */
.vtx{border:1px solid var(--ln);border-radius:12px;padding:12px 14px 4px;margin:2px 0 14px;background:var(--cd2);transition:background .15s,border-color .15s}
.vtx.on{background:var(--prs);border-color:var(--pr-ln2)}
.vtx>.ck1{align-items:flex-start;margin-bottom:8px;cursor:pointer;line-height:1.35}.vtx>.ck1 input{width:18px;height:18px;flex:none;margin-top:1px}
.vtx .hint{margin:0 0 10px 26px}
.vtx #vtf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-items:end}.vtx #vtf[hidden]{display:none}.vtx #vtf>label{margin-bottom:10px}
.vtc{display:grid;grid-template-columns:1fr auto;gap:0 10px;align-items:baseline;padding:7px 12px;margin:0 0 10px;border-radius:10px;background:var(--cd);border:1px dashed var(--pr-ln);font-size:13px;line-height:1.35}
.vtc:empty{display:none}.vtc span{color:var(--mu)}.vtc b{font-size:15.5px;font-variant-numeric:tabular-nums}.vtc small{grid-column:1/-1;color:var(--mu);font-size:12px;font-variant-numeric:tabular-nums}
@media(max-width:620px){.pfg .psl{order:2}.pfg .pal{order:3}.vtx #vtf{grid-template-columns:1fr}}
/* ---------- the six steps: Received → Diagnosis → Invoice → Repair → Ready → Delivered ---------- */
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));list-style:none;padding:14px 8px;margin:0 0 18px;background:var(--cd);border:1px solid var(--ln);border-radius:16px}
.steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--mu);text-align:center;min-width:0}
.steps li::before{content:'';position:absolute;top:14px;left:calc(-50% + 20px);right:calc(50% + 20px);height:2px;border-radius:2px;background:var(--ln)}
.steps li:first-child::before{display:none}
.steps li i{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--cd);border:1.5px solid var(--ln);color:var(--mu);position:relative}
.steps li span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steps li.done{color:var(--tx)}.steps li.done i{background:var(--pr);border-color:var(--pr);color:#fff}.steps li.done::before,.steps li.now::before{background:var(--pr)}
.steps li.now{color:var(--pr);font-weight:700}.steps li.now i{border:2px solid var(--pr);color:var(--pr);background:var(--prs);box-shadow:0 0 0 4px rgba(var(--prg-rgb),.12)}
.steps.off{background:var(--cd2);border-color:#f6d4d4}.steps.off li{opacity:.55}
@media(max-width:620px){.steps{padding:12px 2px}.steps li{font-size:10.5px;gap:5px}.steps li i{width:24px;height:24px;font-size:11px}.steps li::before{top:11px;left:calc(-50% + 15px);right:calc(50% + 15px)}}
/* the card for the step a job is in: one main button, small links under it */
.nx{border:1.5px solid var(--pr-ln2);background:linear-gradient(180deg,var(--pr-bg),#fff)}.nx h2 svg{color:var(--pr)}
.bt.big.wide{width:100%;min-height:54px;font-size:16.5px;margin-top:4px}.bt.big.wide svg{flex:none}
.nx2{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 18px;margin-top:10px}
.lk2{border:0;background:none;color:var(--pr);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:8px 4px;min-height:36px}.lk2:hover{text-decoration:underline}.lk2.red{color:var(--ex)}a.lk2{display:inline-flex;align-items:center;text-decoration:none}
.failc{border-color:#f6c4c4;background:linear-gradient(180deg,#fff6f6,#fff)}.failc h2 svg{color:var(--ex)}
.jgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.jgrid>.g{min-width:0}
.tabs.sub{margin-top:-4px}.tabs.sub a{padding:5px 11px;font-size:12.5px}
/* home: the three steps a device waits in, and money due */
.stgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
/* the big number never breaks the tile: a long money amount (the "Due" tile) shrinks with the tile, counts stay large */
.stgs .stg{container-type:inline-size}
.stg{padding:18px}.stg .v{font-size:36px;font-size:clamp(20px,16cqi,36px);white-space:nowrap}.stg>small{display:block;color:var(--mu);font-size:12.5px;margin-top:4px}
.ph .bt.big{padding:10px 22px}
/* new job: one column, numbered sections, a bar with the save button that stays in view */
.rcv{max-width:920px;display:grid;gap:16px}
.sec h2 i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--prs);color:var(--pr);display:grid;place-items:center;font-size:13.5px;font-weight:700;flex:none}
.dtypes{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin-bottom:14px;scrollbar-width:thin}
.dtypes button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:88px;min-height:84px;padding:10px 8px;border:1px solid var(--ln);border-radius:12px;background:var(--cd);cursor:pointer;font-size:12.5px;color:var(--tx);flex:none}
.dtypes button:hover{border-color:var(--pr-ln)}.dtypes button.on{border:2px solid var(--pr);background:var(--prs);color:var(--pr);font-weight:600;padding:9px 7px}
.dtypes button svg{flex:none}
.msrch{max-width:420px}.rcv .mgrid{max-height:420px;overflow:auto;padding:2px}
.sbar{position:sticky;bottom:12px;display:flex;justify-content:flex-end;gap:10px;padding:12px 14px;background:rgba(255,255,255,.96);border:1px solid var(--ln);border-radius:16px;box-shadow:0 8px 28px rgba(20,25,60,.14);z-index:15}
.cres{position:relative}.cres .sres{top:calc(100% + 4px);z-index:6}
details.more{margin:2px 0 6px}details.more>summary{cursor:pointer;color:var(--pr);font-weight:600;font-size:13.5px;padding:8px 0;list-style:none;width:max-content}details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:'+';display:inline-block;width:16px;font-weight:700}details.more[open]>summary::before{content:'–'}
details.more[open]>summary{margin-bottom:8px}
/* the invoice: pickers on the left, the invoice and payment on the right */
.inv{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,1fr);gap:18px;align-items:start}
.isg{display:flex;flex-direction:column;gap:18px;align-self:start;min-width:0}.isum{position:static}
.svcg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.scard{display:flex;flex-direction:column;border:1px solid var(--ln);border-radius:12px;background:var(--cd);overflow:hidden}
.scard>button{border:0;background:none;text-align:left;padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:3px;font:inherit;color:var(--tx)}
.scard>button b{font-weight:600;font-size:14.5px;line-height:1.3}.scard>button span{color:var(--pr);font-weight:700;font-variant-numeric:tabular-nums}.scard>button small{color:var(--mu);font-size:12px}
.scard>button.alt{border-top:1px solid var(--ln2);font-size:12.5px;padding:8px 14px;color:var(--mu);flex-direction:row}
.scard:hover{border-color:var(--pr-ln)}.scard.on{border:2px solid var(--pr);background:var(--prs)}.scard>button.alt.on{color:var(--pr);font-weight:600;background:var(--cd)}
.cs{display:grid;grid-template-columns:1fr 130px auto;gap:8px;margin-top:14px}
.ilines{margin-bottom:4px}
.il{display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--ln2);font-size:13.5px}
.iln{min-width:0;line-height:1.35}.ilc{display:flex;align-items:center;gap:6px}
.ilp{width:104px;min-height:36px;padding:5px 8px;text-align:right;font-variant-numeric:tabular-nums}
#disc{width:110px;min-height:36px;padding:5px 8px;text-align:right}
.qty{display:inline-flex;align-items:center;border:1px solid var(--ln);border-radius:9px;overflow:hidden;background:var(--cd)}.qty button{border:0;background:var(--cd);width:30px;height:34px;cursor:pointer;font-size:16px;color:var(--tx)}.qty button:hover{background:var(--prs)}.qty span{min-width:22px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ln);border-radius:12px;overflow:hidden;margin:6px 0 12px}
.seg button{border:0;border-left:1px solid var(--ln);background:var(--cd);padding:12px 6px;font:inherit;font-weight:600;cursor:pointer;color:var(--tx);min-height:46px}.seg button:first-child{border-left:0}
.seg button.on{background:var(--pr);color:#fff}
.lowk{margin:0;align-self:center;font-size:13.5px}
.board{grid-template-columns:repeat(3,minmax(240px,1fr))}
@media(max-width:960px){.jgrid,.inv{grid-template-columns:1fr}.isum,.isg{position:static}.stgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.stg{padding:14px}.stg .v{font-size:clamp(18px,15cqi,28px)}.cs{grid-template-columns:1fr 1fr}.cs .bt{grid-column:1/-1}.sbar{bottom:8px;padding:10px}.sbar .bt.big{flex:1;padding:10px 12px;font-size:15px}.ph .bt.big{width:100%}.dtypes button{min-width:76px;min-height:76px}}
@media(max-width:620px){.il{grid-template-columns:minmax(0,1fr) 28px}.il .iln{grid-column:1}.il .bx{grid-column:2;grid-row:1}.il .ilc{grid-column:1/-1;justify-content:flex-end}}

/* inventory by device */
.filters .sp{flex:1}.seg.vsw{grid-template-columns:repeat(2,auto);margin:0}.vsw button{padding:8px 18px;min-height:42px}
.inv-dt button small{font-size:11.5px;color:var(--mu);font-weight:500}.inv-dt button.on small{color:var(--pr)}
.mct{display:flex;flex-direction:column;gap:4px;min-width:0}.mct small{font-size:12.5px;color:var(--mu)}.mct small b{color:var(--tx);font-weight:600}.mct small b.red{color:var(--ex)}
.ivhd{display:flex;align-items:center;gap:14px;margin:0 0 16px}.ivhd div{display:flex;flex-direction:column;gap:2px}.ivhd b{font-size:18px}.ivhd small{color:var(--mu)}
@media(max-width:620px){.filters .sp{display:none}.vsw{width:100%}.vsw button{flex:1}}

/* invoice lines with the device picture */
.lit{display:flex;align-items:center;gap:12px;min-width:0}
.lit .la{position:relative;flex:none;display:grid;place-items:center;width:48px;min-height:46px;padding-bottom:6px}
.lit .la i{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);font-style:normal;font-size:10px;font-weight:700;color:var(--pr);background:var(--prs);border-radius:999px;padding:1px 6px;white-space:nowrap}
.lit .la.sv{width:40px;height:40px;min-height:0;padding:0;margin:0 4px;border-radius:10px;background:var(--cd3);color:var(--mu)}
.lit .lt{display:flex;flex-direction:column;gap:2px;min-width:0}.lit .lt b{font-weight:600;line-height:1.3}.lit .lt small{font-size:12px;color:var(--mu)}

/* + Add on the tap lists */
.xmk{display:contents}
.addb{display:inline-flex;align-items:center;gap:5px;border:1px dashed var(--pr-ln3);background:var(--cd);color:var(--pr);border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;min-height:34px}
.opts .addb{border-radius:10px;padding:7px 13px}.addb:hover{background:var(--prs)}
.addc.on{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-basis:100%;padding:8px;border:1px solid var(--ln);border-radius:12px;background:var(--cd2)}
.addc.on > input{flex:1 1 200px;width:auto;min-height:38px;margin:0}
.addc .kp{display:flex;align-items:center;gap:6px;margin:0;padding:0;border:0;background:none;font-size:12.5px;color:var(--mu);font-weight:500;white-space:nowrap}
.opts .addc .kp:has(input:checked){background:none;border:0}
.addc .kp input{width:auto;min-height:0;margin:0;accent-color:var(--pr)}
.rmx{font-style:normal;margin-left:6px;color:var(--mu);font-weight:700;padding:0 3px;border-radius:5px}.rmx:hover{background:var(--exs);color:var(--ex)}
/* Problem and condition on the job card: the tap lists five to a row, each bordered in the centre's own colour
   (three, then two to a row when the form is narrow). Add and Edit close the list. */
#nj .sec{container-type:inline-size}
.iss.g5,.opts.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.g5 > button,.g5 > label,.g5 > .addc > .addb,.g5 > .edb{width:100%;height:100%;min-height:46px;margin:0;padding:8px 10px;border:1px solid var(--pr-ln3);border-color:color-mix(in srgb,var(--pr) 45%,var(--ln));border-radius:10px;background:var(--cd);color:var(--tx);font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.g5 > button{display:flex;align-items:center;justify-content:center;text-align:center}.g5 > label{justify-content:flex-start;text-align:left}
.g5 > button:hover,.g5 > label:hover{border-color:var(--pr)}
.g5 > button.on,.g5 > label:has(input:checked){border-color:var(--pr);background:var(--prs)}.g5 > button.on{color:var(--pr);font-weight:600}
.g5 > .addc{display:block;min-width:0}.g5 > .addc > .addb,.g5 > .edb{justify-content:center;border-style:dashed;border-color:var(--pr);color:var(--pr);font-weight:600}
.g5 > .addc.on{grid-column:1/-1;display:flex}
@container (max-width:600px){.iss.g5,.opts.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:380px){.iss.g5,.opts.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the Supreme account's list editor */
.ted{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;max-height:52vh;overflow:auto}
.ter{display:flex;gap:6px;align-items:center}.ter input{flex:1;min-width:0;margin:0}.ter .bt{flex:none;min-width:38px;padding:0 10px}
.dtypes{max-width:100%;min-width:0}#nj,#nj .sec,#nj .sec > *{min-width:0}

/* ================= sign in: a phone on a dark stage, devices taken apart around it ================= */
.lg{--lgv:#ec8150;--lgb:#e9713a;--lgv-rgb:236,129,80;--lgb-rgb:233,113,58;--lgp-rgb:238,144,102;--lgq-rgb:237,137,91;--lgw-rgb:242,168,135;--lgc1-rgb:247,200,178;--lgc2-rgb:242,168,135;--lgc3-rgb:244,184,156;--lgc4-rgb:241,160,124;--lgc5-rgb:250,223,211;--lgc6-rgb:245,192,167;--lgc7-rgb:241,160,124;--lgs1:#230f05;--lgs2:#120803;--lgs3:#1e0d05;--lgm:#f9d8c8;--lgmt:#a24419;--lgaf:#2a1106;--lgfo:#f4b89c;--lgk1:#f4b89c;--lgk2:#f7c8b2;--lgk3:#f5c0a7;--lgk4:#e76124;--lgk5:#682c10;--lgk6:#331508;--lgl1:#ef9871;--lgl2:#f4b89c;--lgl3:#fbe7de;--lgl4:#f5c0a7;position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;display:grid;place-items:center;padding:20px 16px;box-sizing:border-box;color:#f2f3f8;
  background:radial-gradient(900px 520px at 50% 115%,rgba(var(--lgp-rgb),.22),transparent 60%),radial-gradient(700px 600px at 12% 30%,rgba(var(--lgv-rgb),.16),transparent 60%),radial-gradient(700px 600px at 88% 25%,rgba(var(--lgb-rgb),.13),transparent 60%),linear-gradient(180deg,#07080d,#0c0e16 55%,#06070b);font-family:system-ui,-apple-system,"SF Pro Display","Segoe UI",Roboto,sans-serif}
.lg .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lg-online{position:absolute;top:18px;right:20px;z-index:5;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:13px;color:#e6e8f2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lg-online i{width:8px;height:8px;border-radius:50%;background:#2fd36b;box-shadow:0 0 0 3px rgba(47,211,107,.2),0 0 10px #2fd36b}
/* scene (login.js) */
.lgs{position:absolute;inset:0;pointer-events:none;z-index:0;perspective:1400px}
.lgs-dust{position:absolute;inset:0;width:100%;height:100%}
.lgs-light{position:absolute;filter:blur(2px);opacity:.55}
.lgs-light.l1{top:-6%;left:14%;width:46%;height:3px;background:linear-gradient(90deg,transparent,rgba(var(--lgc1-rgb),.9),transparent);transform:rotate(-14deg);animation:lgStreak 9s ease-in-out infinite}
.lgs-light.l2{top:4%;right:6%;width:38%;height:2px;background:linear-gradient(90deg,transparent,rgba(var(--lgw-rgb),.8),transparent);transform:rotate(12deg);animation:lgStreak 11s ease-in-out -4s infinite}
.lgs-light.l3{bottom:22%;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(var(--lgc2-rgb),.55) 30%,transparent 48%,transparent 52%,rgba(var(--lgc2-rgb),.55) 70%,transparent 95%);opacity:.6}
@keyframes lgStreak{0%,100%{opacity:.15}50%{opacity:.7}}
.lgs-floor{position:absolute;left:50%;bottom:4%;width:min(820px,80vw);height:150px;transform:translateX(-50%)}
.lgs-floor i{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(var(--lgc3-rgb),.35)}
.lgs-floor i:nth-child(1){width:100%;height:100%;background:radial-gradient(closest-side,rgba(var(--lgp-rgb),.25),transparent);border-color:rgba(var(--lgc3-rgb),.16)}
.lgs-floor i:nth-child(2){width:66%;height:62%;box-shadow:0 0 24px rgba(var(--lgc4-rgb),.4),inset 0 0 18px rgba(var(--lgc4-rgb),.3)}
.lgs-floor i:nth-child(3){width:48%;height:42%;border-color:rgba(var(--lgc5-rgb),.55);box-shadow:0 0 30px rgba(var(--lgc3-rgb),.5)}
/* exploded stacks: every layer moves by --t (0 together, 1 apart) */
@property --t{syntax:'<number>';inherits:true;initial-value:1}
.lgx{position:absolute;width:var(--w);height:var(--h);transform-style:preserve-3d;--t:1;animation:lgApart 16s cubic-bezier(.65,0,.35,1) infinite}
.lgx-r{position:absolute;inset:0;transform-style:preserve-3d}
.lgx-l{position:absolute;inset:0;transform:translate3d(calc(var(--x) * var(--t)),calc(var(--y) * var(--t)),calc(var(--z) * var(--t)));filter:drop-shadow(0 18px 24px rgba(0,0,0,.55))}
.lgx-l svg{display:block}
@keyframes lgApart{0%,8%{--t:.05}38%,70%{--t:1}92%,100%{--t:.05}}
.lgs-left{position:absolute;left:clamp(0px,3vw,70px);top:50%;width:560px;height:520px;transform:translateY(-52%);transform-style:preserve-3d}
.lgx-phone{left:110px;top:40px;transform:rotateY(-24deg) rotateX(6deg) rotateZ(-3deg);animation:lgApart 16s cubic-bezier(.65,0,.35,1) infinite,lgSway 18s ease-in-out infinite}
.lgx-phone .lgx-r{transform:scale(.92)}
@keyframes lgSway{0%,100%{transform:rotateY(-24deg) rotateX(6deg) rotateZ(-3deg)}50%{transform:rotateY(-14deg) rotateX(3deg) rotateZ(-1deg)}}
.lgx-phone .l-glass{opacity:.7}
.lgb-box{position:absolute;inset:0}
.lgb{position:absolute;left:var(--bx);top:var(--by);width:var(--bs);height:var(--bs);border-radius:50%;background:radial-gradient(circle at 35% 35%,#f2f4f8,#7d838d);box-shadow:0 0 6px rgba(var(--lgc6-rgb),.35);animation:lgBit var(--bd) ease-in-out infinite alternate;transform:rotate(var(--br))}
.lgb:nth-child(3n){border-radius:2px;width:calc(var(--bs) * 3);height:var(--bs)}
@keyframes lgBit{from{transform:translate(0,0) rotate(var(--br))}to{transform:translate(10px,-16px) rotate(calc(var(--br) + 90deg))}}
.lgs-right{position:absolute;right:clamp(10px,3vw,70px);top:50%;width:520px;height:600px;transform:translateY(-50%);transform-style:preserve-3d}
.lgx-laptop{right:20px;top:0;transform:rotateX(58deg) rotateZ(-26deg) scale(.82);animation:lgApart 16s cubic-bezier(.65,0,.35,1) -5s infinite}
.lgx-laptop .l-lid{transform-origin:50% 0;transform:translate3d(0,calc(var(--y) * var(--t)),calc(var(--z) * var(--t))) rotateX(calc(-18deg - 40deg * (1 - var(--t))))}
.lgs-small{position:absolute;left:30px;right:0;bottom:30px;height:240px;transform-style:preserve-3d}
.lgx-watch{left:20px;top:40px;transform:rotateY(28deg) rotateX(6deg);animation:lgApart 16s cubic-bezier(.65,0,.35,1) -9s infinite}
.lgx-band{position:absolute;left:28px;width:64px;height:70px;background:linear-gradient(90deg,#1b1e26,#2e3340 50%,#1b1e26);border-radius:14px;transform:translateZ(-50px)}
.lgx-band.t{top:-52px}.lgx-band.b{bottom:-52px}
.lgx-buds{right:30px;top:50px;transform:rotateY(-20deg) rotateX(10deg);animation:lgApart 16s cubic-bezier(.65,0,.35,1) -12s infinite}
.lgx-buds .l-buds{height:110px}.lgx-buds .l-bcore{top:40px;height:60px}
.lgs.paused *,.lgs.still *{animation-play-state:paused!important}
.lgs.still .lgx{--t:.7}
/* the phone */
.lg-stage{position:relative;z-index:2;width:calc(400px * var(--s,1));height:calc(860px * var(--s,1))}
.lg-phone{position:absolute;left:0;top:0;width:400px;height:860px;transform:scale(var(--s,1));transform-origin:0 0;border-radius:68px;padding:13px;box-sizing:border-box;
  background:linear-gradient(135deg,#d9dce3,#7c818b 22%,#eef0f4 42%,#5d626b 62%,#c3c7cf 82%,#8a8f98);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 40px 80px rgba(0,0,0,.6),0 0 60px rgba(var(--lgv-rgb),.25),0 0 0 1px #2a2d33}
.lg-phone::before{content:'';position:absolute;inset:4px;border-radius:64px;background:#0b0c10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.lg-k{position:absolute;width:5px;border-radius:3px;background:linear-gradient(90deg,#6d727c,#d8dbe2);z-index:-1}
.lg-k.k1{left:-4px;top:150px;height:34px}.lg-k.k2{left:-4px;top:205px;height:64px}.lg-k.k3{left:-4px;top:285px;height:64px}.lg-k.k4{right:-4px;top:230px;height:100px;background:linear-gradient(270deg,#6d727c,#d8dbe2)}
.lg-screen{position:relative;height:100%;border-radius:55px;overflow:hidden;background:radial-gradient(520px 420px at 0% 18%,rgba(var(--lgv-rgb),.55),transparent 60%),radial-gradient(420px 360px at 110% 100%,rgba(var(--lgq-rgb),.45),transparent 60%),linear-gradient(180deg,var(--lgs1),var(--lgs2) 45%,var(--lgs3))}
.lg-glow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lg-status{position:relative;display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 32px 0 38px;font-size:16px;font-weight:600}
.lg-island{position:absolute;left:50%;top:12px;width:122px;height:36px;margin-left:-61px;border-radius:20px;background:#000}
.lg-island i{position:absolute;right:16px;top:12px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3c4a7a,#06070c)}
.lg-sig{display:flex;color:#fff}
#lf{position:relative;display:flex;flex-direction:column;padding:26px 34px 22px;height:calc(100% - 54px);box-sizing:border-box}
.lg-brand{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px}
.lg-brand b{font-size:46px;font-weight:600;letter-spacing:-.02em}
.lg-mk{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:linear-gradient(145deg,#ffffff,var(--lgm));color:var(--lgmt);font-weight:800;font-size:22px;letter-spacing:-.04em;box-shadow:0 6px 20px rgba(var(--lgv-rgb),.45)}
.lg-mk.img{background:#fff;overflow:hidden}.lg-mk img{width:100%;height:100%;object-fit:contain}
.lg-bar{width:1.5px;height:42px;background:rgba(255,255,255,.5)}
.lg-tag{text-align:center;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:#dfe1ee;margin:12px 0 30px}
#lf h1{margin:0;text-align:center;font-size:31px;font-weight:700;letter-spacing:-.02em;color:#fff}
.lg-sub{margin:8px 0 26px;text-align:center;color:#c9cbe0;font-size:14px}
.lg-err{margin:-12px 0 14px;padding:10px 14px;border-radius:12px;background:rgba(255,80,90,.14);border:1px solid rgba(255,110,120,.45);color:#ffd5d8;font-size:13.5px;line-height:1.4}
.lg-f{position:relative;display:flex;align-items:center;gap:12px;height:54px;margin:0 0 14px;padding:0 16px;border-radius:15px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#c9cbe0;transition:border-color .2s,box-shadow .2s,background .2s}
.lg-f:focus-within{border-color:rgba(var(--lgw-rgb),.9);box-shadow:0 0 0 3px rgba(var(--lgv-rgb),.25);background:rgba(255,255,255,.09)}
.lg-f.bad{border-color:#ff6b78;box-shadow:0 0 0 3px rgba(255,90,100,.2)}
.lg-f svg{flex:none}
.lg-f input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:none;color:#fff;font:inherit;font-size:16px;outline:none;box-shadow:none}
.lg-f input::placeholder{color:#a6a9c2}
.lg-f input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px var(--lgaf) inset;caret-color:#fff}
.lg-eye{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-right:-8px;border:0;border-radius:10px;background:none;color:#c9cbe0;cursor:pointer}
.lg-eye:hover{background:rgba(255,255,255,.08);color:#fff}
.lg button:focus-visible,.lg a:focus-visible,.lg-rem input:focus-visible+span::before{outline:2px solid var(--lgfo);outline-offset:2px}
.lg-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 20px}
.lg-rem{display:flex;align-items:center;margin:0;cursor:pointer;font-size:14.5px;color:#e6e7f2}
.lg-rem input{position:absolute;opacity:0;width:1px;height:1px}
.lg-rem span{display:inline-flex;align-items:center;gap:10px}
.lg-rem span::before{content:'';width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(255,255,255,.55);box-sizing:border-box;background:transparent center/14px no-repeat}
.lg-rem input:checked+span::before{background-color:var(--lgv);border-color:var(--lgv);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.lg-fp{border:0;background:none;padding:6px 0;color:var(--lgl1);font:inherit;font-size:14.5px;cursor:pointer}.lg-fp:hover{color:var(--lgl2);text-decoration:underline}
.lg-help{margin:-8px 0 18px;padding:12px 14px;border-radius:12px;background:rgba(var(--lgc7-rgb),.1);border:1px solid rgba(var(--lgc7-rgb),.3);font-size:13px;line-height:1.5;color:var(--lgl3)}
.lg-go{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border:0;border-radius:16px;cursor:pointer;font:inherit;font-size:18px;font-weight:600;color:#14151c;background:linear-gradient(180deg,#ffffff,#d9dbe6);box-shadow:0 10px 30px rgba(var(--lgv-rgb),.35),inset 0 -2px 0 rgba(0,0,0,.08);transition:transform .15s,box-shadow .2s}
.lg-go:hover{box-shadow:0 12px 36px rgba(var(--lgv-rgb),.5),inset 0 -2px 0 rgba(0,0,0,.08)}.lg-go:active{transform:scale(.985)}
.lg-go:disabled{cursor:progress;opacity:.9}
.lg-spin{display:none;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(20,21,28,.2);border-top-color:#14151c;animation:lgSpin .8s linear infinite}
.lg-go.busy .lg-spin{display:block}.lg-go.busy svg{display:none}
@keyframes lgSpin{to{transform:rotate(360deg)}}
.lg-devs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:auto 0 0;padding-top:24px}
.lg-devs span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:72px;border-radius:16px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);font-size:11.5px;color:#e6e7f2}
.lg-foot{display:flex;align-items:center;gap:12px;margin:22px 0 10px;font-size:14px;color:#dfe1ee}
.lg-foot::before,.lg-foot::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.25)}
.lg-pw{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;letter-spacing:.08em;color:#c9cbe0}.lg-pw b{color:#fff;font-weight:700}
.lg-cust{margin-top:10px;text-align:center;font-size:12.5px;color:var(--lgl4);text-decoration:none}.lg-cust:hover{color:#fff;text-decoration:underline}
/* tablet: fewer things around the phone */
@media(max-width:1180px){.lgs-left{left:-90px;opacity:.6;transform:translateY(-52%) scale(.75)}.lgs-right{right:-130px;opacity:.6;transform:translateY(-50%) scale(.72)}.lgs-small{display:none}}
@media(max-width:900px){.lgs-left,.lgs-right{display:none}}
/* phones: no phone drawing, the screen itself is the page */
@media(max-width:719px){
  .lg{display:block;padding:0}
  .lg-online{top:12px;right:12px;padding:5px 11px;font-size:12px}
  .lg-stage{width:auto;height:auto}
  .lg-phone{position:relative;width:auto;height:auto;transform:none;border-radius:0;padding:0;background:none;box-shadow:none}
  .lg-phone::before,.lg-k,.lg-status{display:none}
  .lg-screen{min-height:100vh;min-height:100dvh;border-radius:0}
  #lf{height:auto;min-height:100vh;min-height:100dvh;padding:64px 20px 24px;max-width:440px;margin:0 auto}
  .lg-brand{margin-top:0}.lg-brand b{font-size:40px}.lg-tag{margin-bottom:24px;font-size:11.5px}
  #lf h1{font-size:28px}.lg-sub{margin-bottom:22px}
  .lg-devs{gap:6px}.lg-devs span{height:64px;font-size:10.5px;border-radius:13px}
}
@media(prefers-reduced-motion:reduce){.lgs-light{animation:none}.lg-go,.lg-f{transition:none}}

/* bell count, notifications */
.bell .bn{position:absolute;top:0;right:-2px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:var(--ex);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;border:2px solid var(--cd)}
.ntl{display:flex;flex-direction:column}
.ntr{display:flex;align-items:flex-start;gap:12px;padding:12px 8px;border-bottom:1px solid var(--ln2);color:var(--tx);text-decoration:none;border-radius:10px}.ntr:last-child{border-bottom:0}.ntr:hover{background:var(--cd2)}
.ntr.new{background:var(--cd3)}.ntr .ic{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center}
.ntr .ic.vi{background:var(--vis);color:var(--vi)}.ntr .ic.ok{background:var(--oks);color:var(--ok)}.ntr .ic.ex{background:var(--exs);color:var(--ex)}
.nb2{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.nb2 small{color:var(--mu)}.nb2 span{font-size:13.5px;color:#3b4160;white-space:pre-line}
.ntr .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--pr);margin-top:6px}
.trep{align-items:center;flex-wrap:wrap}.trep .sp{flex:1}
/* technician: my jobs */
.tjl{display:flex;flex-direction:column;gap:10px}
.tjc{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--ln);border-radius:14px;background:var(--cd);color:var(--tx);text-decoration:none}.tjc:hover{border-color:var(--pr-ln);background:var(--cd2)}
.tja{flex:none;width:52px;display:grid;place-items:center}
.tjb{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.tjb small{color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tjs{flex:none;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600}
.twk{list-style:none;padding:0;margin:4px 0 14px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.phs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.phs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--ln)}
@media(max-width:620px){.tjc{flex-wrap:wrap}.tjs{margin-left:66px}}

/* wide tables scroll inside their card instead of widening the page on phones */
.g>*,.dashrow>*,.dashrow2>*,.jgrid>*{min-width:0}.g{min-width:0}

/* ================= dark mode (the switch at the top right) ================= */
/* dark mode in iFixit's neutral charcoal (iLab uses navy) */
:root[data-theme=dark]{
  --bg:#0e0e0f;--cd:#19191b;--cd2:#1f1f22;--cd3:#262629;--top:#141416;--tx:#ececec;--mu:#a3a3a6;--ln:#313134;--ln2:#2a2a2d;
  --pr:#ec8150;--pr2:#ef9871;--prs:#442a2c;--side:#100f0e;--side2:#0b0b0a;--sidetx:#d2d2d1;
  --ok:#34c76a;--oks:#15301f;--wn:#f3a13a;--wns:#33260f;--am:#e0a52a;--ams:#33290d;--ex:#ff6b6b;--exs:#3a1a1f;--bl:#5b9bff;--bls:#15264a;--vi:#a184ff;--vis:#272150;--gy:#a3a3a6;--gys:#2a2a2d;
  color-scheme:dark;
}
:root[data-theme=dark] body{background:var(--bg);color:var(--tx)}
:root[data-theme=dark] .top{background:var(--top);border-color:var(--ln)}
:root[data-theme=dark] input,:root[data-theme=dark] select,:root[data-theme=dark] textarea{background:var(--cd2);color:var(--tx);border-color:var(--ln)}
:root[data-theme=dark] input::placeholder,:root[data-theme=dark] textarea::placeholder{color:#85858a}
:root[data-theme=dark] .tb th{background:var(--cd2);color:var(--mu)}
:root[data-theme=dark] .tb tr.ck:hover td,:root[data-theme=dark] .ntr:hover,:root[data-theme=dark] .tjc:hover{background:var(--cd3)}
:root[data-theme=dark] .dlg,:root[data-theme=dark] .menu,:root[data-theme=dark] .sres,:root[data-theme=dark] .msp{background:var(--cd);color:var(--tx);border-color:var(--ln)}
:root[data-theme=dark] .bt.gh{background:var(--cd);color:var(--tx);border-color:var(--ln)}
:root[data-theme=dark] .bt.gh:hover{background:var(--cd3)}
:root[data-theme=dark] .banner span,:root[data-theme=dark] .nb2 span{color:var(--tx)}
:root[data-theme=dark] .banner.ok{border-color:#245c37;color:#7fe0a2}:root[data-theme=dark] .banner.ex{border-color:#6b2a33;color:#ff9b9b}
:root[data-theme=dark] .t-ok input:checked+span{color:#7fe0a2}:root[data-theme=dark] .tri .t-fault input:checked+span{color:#ff9b9b}
:root[data-theme=dark] .chk span.y{color:#7fe0a2}:root[data-theme=dark] .chk span.n{color:#ff9b9b}
:root[data-theme=dark] .mcard,:root[data-theme=dark] .pcard{background:var(--cd2);border-color:var(--ln)}
:root[data-theme=dark] .mcard:hover,:root[data-theme=dark] .pcard:hover,:root[data-theme=dark] .mcard.on,:root[data-theme=dark] .pcard.on{background:var(--cd3)}
:root[data-theme=dark] .toast{background:#ececec;color:#1a1a1a}
/* the chosen tab: a light pill (the black one of the light look cannot be told from the dark page) */
:root[data-theme=dark] .tabs a.on{background:#ececec;border-color:#ececec;color:#161616}:root[data-theme=dark] .tabs a.on em{color:#5c5c61}
:root[data-theme=dark] img[src*="/logo"]{background:#fff;border-radius:8px}
/* the switch */
.thm{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--ln);border-radius:12px;background:var(--cd);color:var(--tx);cursor:pointer;flex:none}
.thm:hover{border-color:var(--pr);color:var(--pr)}
.thm .sun{display:none}:root[data-theme=dark] .thm .sun{display:block}:root[data-theme=dark] .thm .moon{display:none}
@media print{:root[data-theme=dark]{--bg:#fff;--cd:#fff;--tx:#151a2d}}
:root[data-theme=dark] .nx{border-color:var(--pr-dln);background:linear-gradient(180deg,var(--pr-dbg),var(--cd))}
:root[data-theme=dark] .failc{border-color:#5a2a33;background:linear-gradient(180deg,#2a1820,var(--cd))}
:root[data-theme=dark] .sbar{background:rgba(25,25,27,.96);box-shadow:0 8px 28px rgba(0,0,0,.5)}
:root[data-theme=dark] .sbar .bt.gh,:root[data-theme=dark] .bt.dk{background:var(--cd3);color:var(--tx)}
:root[data-theme=dark] .mdet{border-color:var(--pr-dln);background:linear-gradient(180deg,var(--pr-dbg),var(--cd))}
/* price list: device tiles and model cards are links */
.dtypes a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:88px;min-height:84px;padding:10px 8px;border:1px solid var(--ln);border-radius:12px;background:var(--cd);font-size:12.5px;color:var(--tx);flex:none;text-decoration:none}
.dtypes a:hover{border-color:var(--pr-ln)}.dtypes a.on{border:2px solid var(--pr);background:var(--prs);color:var(--pr);font-weight:600;padding:9px 7px}
.inv-dt a small{font-size:11.5px;color:var(--mu);font-weight:500}.inv-dt a.on small{color:var(--pr)}
a.mcard{text-decoration:none}
@media(max-width:620px){.dtypes a{min-width:76px;min-height:76px}}
.rsg{margin:14px 0 4px;padding:14px;border:1px solid var(--ln);border-radius:12px;background:var(--cd2)}
.rsu{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--ln2);font-size:14px}.rsu small{color:var(--mu)}
.rsg .bt{margin-top:10px}
/* technician: counters, part picker; front desk: part requests */
.tst{grid-template-columns:repeat(5,minmax(0,1fr))}@media(max-width:900px){.tst{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:620px){.tst{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tpl{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow:auto;margin-bottom:12px}
.tpl button:not(.pcard){display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:9px 12px;border:1px solid var(--ln);border-radius:10px;background:var(--cd);color:var(--tx);cursor:pointer;font:inherit;font-size:14px}
.tpl button:not(.pcard).on{border:2px solid var(--pr);background:var(--prs);padding:8px 11px}.tpl small.ok{color:var(--ok)}.tpl small.red{color:var(--ex)}
.banner.preq{background:var(--bls);border-color:#c6dafc;flex-wrap:wrap;align-items:center}
.prq{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-basis:100%;padding:6px 0 0 28px}.prq>span{flex:1;min-width:160px}
.tag.ok{background:var(--oks);color:var(--ok)}.tag.wn{background:var(--wns);color:var(--wn)}
.tst .stg{background:var(--cd);border:1px solid var(--ln);border-radius:16px;padding:16px}
.tst .stg .sh{display:flex;align-items:center;gap:8px}.tst .stg .ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px}
.tst .stg .v{font-size:30px;font-weight:700;margin:8px 0 2px}.tst .stg small{color:var(--mu)}
@media(max-width:620px){.tjb{flex:1 1 calc(100% - 70px)}.tjc .tjs{margin-left:66px}.tjb b{font-size:15px}}
.tpl{display:block;max-height:420px}.tpl .pgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
/* technician's function test as a grid of tiles */
.tgrid .fnt{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;border:0;border-radius:0;overflow:visible}
.tgrid .fnr{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px;border:1px solid var(--ln);border-radius:12px;background:var(--cd)}
.tgrid .fnr:last-child{border-bottom:1px solid var(--ln)}
.tgrid .fnr>span{font-weight:600}
.tgrid .fnr:has(.t-ok input:checked){border-color:#9fdcb5;background:var(--oks)}
.tgrid .fnr:has(.t-fault input:checked){border-color:#f2b0b0;background:var(--exs)}
.tgrid .tri{gap:4px 12px}
@media(max-width:620px){.tgrid .fnt{grid-template-columns:repeat(2,minmax(0,1fr))}.tgrid .fnr{padding:10px}.tgrid .tri{flex-direction:column;gap:2px}}
/* the same pre-check list on the job card form: five to a row (three, then two when the form is narrow), bordered in
   the centre's own colour like the lists above it; Add and Edit close the list */
#nj .pck .fnt{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
#nj .pck .fnr{gap:6px;min-width:0;padding:10px 12px;border-color:color-mix(in srgb,var(--pr) 45%,var(--ln));border-radius:10px}
#nj .pck .fnr>span{font-size:13.5px;line-height:1.3;overflow-wrap:anywhere}
#nj .pck .fnr:has(.t-ok input:checked){border-color:#9fdcb5}#nj .pck .fnr:has(.t-fault input:checked){border-color:#f2b0b0}
#nj .pck .fnh{margin-top:0;flex-wrap:wrap}#nj .pck .fnh span{flex:1 1 260px;font-weight:400}
.tgrid .fnt > .addc{display:block;min-width:0}.tgrid .fnt > .addc.on{grid-column:1/-1;display:flex}
.tgrid .fnt > .addc > .addb,.tgrid .fnt > .edb{width:100%;height:100%;min-height:58px;margin:0;justify-content:center;border:1px dashed var(--pr);border-radius:10px;background:var(--cd);color:var(--pr);font-weight:600}
@container (max-width:760px){#nj .pck .fnt{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (max-width:600px){#nj .pck .fnt{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:380px){#nj .pck .fnt{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* coupons */
.cpcode,.upc{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase}
.cpn{align-items:center}.cpin{display:flex;gap:6px;align-items:center}.cpin input{width:120px;min-height:38px;margin:0;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.cpok{display:flex;align-items:center;gap:6px;color:var(--ok);font-size:13.5px}.cpok b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
/* diagnosis condition box */
.dgt{width:100%;border-collapse:collapse;font-size:14px}
.dgt td{padding:8px 10px;border:1px solid var(--ln)}.dgt td:first-child{width:52%;color:var(--tx);font-weight:500;background:var(--cd2)}
.dgt td:last-child{text-align:center}.dgt td.ok{color:var(--ok)}.dgt td.red{color:var(--ex)}
.dgt input[data-dr]{width:100%;min-height:34px;margin:0;text-align:center;padding:4px 8px}
.dgt .tri{justify-content:center}

.tfound h2 svg{color:var(--pr)}

.s-waiting{background:var(--wns);color:var(--wn)}
.twt{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;background:var(--wns);color:var(--tx);margin-bottom:14px}.twt .ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--cd);color:var(--wn)}.twt b{display:block;margin-bottom:2px}
.tfd{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}.tfd span{padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--exs);color:var(--ex)}.tfd span.ok{background:var(--oks);color:var(--ok)}
@media(max-width:620px){.tst .stg:last-child:nth-child(odd){grid-column:span 2}}
label[hidden]{display:none!important}

/* ---------- Service Analytics: device types → models → customers → one customer's repair history ---------- */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--mu);margin-bottom:10px}
.crumbs a{color:var(--mu);text-decoration:none}.crumbs a:hover{color:var(--pr);text-decoration:underline}.crumbs span{opacity:.55}.crumbs b{color:var(--tx);font-weight:600}
.ord{display:inline-flex;border:1px solid var(--ln);border-radius:10px;overflow:hidden;background:var(--cd);flex:none}
.ord button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:8px 12px;font:inherit;font-size:13px;font-weight:500;color:var(--mu);cursor:pointer;min-height:38px;white-space:nowrap}
.ord button+button{border-left:1px solid var(--ln)}.ord button:hover{color:var(--tx)}.ord button.on{background:var(--prs);color:var(--pr);font-weight:600}
.ana-grid{display:grid;gap:12px}
.ana-types{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}.ana-models{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.ana-cust{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.ana-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:14px 12px 16px;border:1px solid var(--ln);border-radius:16px;background:var(--cd);color:var(--tx);text-decoration:none;text-align:center;transition:border-color .15s,box-shadow .15s,transform .15s}
a.ana-card:hover{border-color:var(--pr-ln);box-shadow:0 8px 22px rgba(16,24,40,.08);transform:translateY(-1px)}a.ana-card:focus-visible,a.ana-cc:focus-visible{outline:2px solid var(--pr);outline-offset:2px}
.ana-card .ana-art{display:grid;place-items:center;width:100%;height:112px;margin-bottom:8px;border-radius:12px;background:var(--cd2)}
.ana-models .ana-card .ana-art{height:84px}
.ana-card b{font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}.ana-models .ana-card b{font-size:14px}
.ana-n{font-size:12.5px;color:var(--mu)}.ana-n strong{margin-right:3px;font-size:20px;font-weight:700;color:var(--pr);font-variant-numeric:tabular-nums}.ana-models .ana-n strong{font-size:17px}
.ana-card.zero .ana-n strong,.ana-card.zero b{color:var(--mu)}.ana-card.zero .ana-art>*{opacity:.5;filter:grayscale(.5)}
.ana-sn{position:absolute;top:8px;left:10px;font-style:normal;font-size:11px;font-weight:600;color:var(--mu);font-variant-numeric:tabular-nums}
.ph.ana-ph{align-items:center}.ana-ph .ana-art{display:grid;place-items:center;width:76px;height:76px;flex:none;border:1px solid var(--ln);border-radius:16px;background:var(--cd2)}
.ana-cc{display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px 14px;border:1px solid var(--ln);border-radius:14px;background:var(--cd);color:var(--tx);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.ana-cc:hover{border-color:var(--pr-ln);box-shadow:0 8px 22px rgba(16,24,40,.08)}
.cc-h{display:flex;align-items:center;gap:10px;min-width:0}.cc-h .av{width:36px;height:36px;font-size:13px}
.cc-t{display:flex;flex-direction:column;gap:1px;min-width:0}.cc-t b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}.cc-t small{font-size:12px;color:var(--mu)}
.cc-p{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;background:var(--prs)}.cc-p small{font-size:11.5px;color:var(--mu)}.cc-p strong{font-size:16px;color:var(--pr);font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-n{font-size:11.5px;color:var(--mu)}
.ana-prof{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}.ana-prof .av{width:56px;height:56px;font-size:19px}.ana-dcd+.ana-dcd{margin-top:16px}
.ana-ph>div:not(.ord){flex:1 1 220px;min-width:0}
.ap-t{flex:1 1 220px;min-width:0}.ap-t h1{margin:0;font-size:24px;letter-spacing:-.01em}.ap-t p{margin:4px 0 0;color:var(--mu);font-size:13.5px;overflow-wrap:anywhere}
.ap-s{display:flex;gap:10px;flex-wrap:wrap}.ap-s span{display:flex;flex-direction:column;gap:2px;min-width:100px;padding:8px 14px;border:1px solid var(--ln);border-radius:12px;background:var(--cd2)}
.ap-s small{font-size:11.5px;color:var(--mu)}.ap-s b{font-size:18px;font-variant-numeric:tabular-nums}.ap-s span:last-child b{color:var(--pr)}
.ana-dev{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.ana-dev>div{display:flex;flex:1 1 200px;flex-direction:column;gap:3px;min-width:0}.ana-dev b{font-size:16px}.ana-dev small{font-size:12.5px;color:var(--mu)}.ana-dev .sp{flex:1}
.ana-dev .lk2{display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.ana-hist{list-style:none;margin:8px 0 0 7px;padding:0;border-left:2px solid var(--ln)}
.ana-hist li{position:relative;padding:12px 0 14px 22px}.ana-hist li+li{border-top:1px dashed var(--ln)}
.ana-hist li::before{content:'';position:absolute;left:-8px;top:16px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:3px solid var(--pr);background:var(--cd)}
.ah-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ah-h .jn{font-weight:600;text-decoration:none}.ah-h small{color:var(--mu)}.ah-h .sp{flex:1}
.ah-d{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0 8px;font-size:13.5px}.ah-d dt{color:var(--mu)}.ah-d dd{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.ah-m{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mu)}.ah-m b{color:var(--tx);font-variant-numeric:tabular-nums}.ah-m .red b{color:var(--ex)}
@media(max-width:620px){.ana-types,.ana-models,.ana-cust{grid-template-columns:repeat(2,minmax(0,1fr))}.ana-card .ana-art{height:96px}.ana-models .ana-card .ana-art{height:76px}.ord button{padding:7px 10px;font-size:12.5px}.ap-s{width:100%}.ap-s span{flex:1}
  .cc-p{flex-direction:column;align-items:flex-start;gap:1px}.ana-ph .ana-art{width:56px;height:56px;border-radius:12px}.ana-ph .ana-art svg{max-height:44px}}
@media(max-width:380px){.ana-cust{grid-template-columns:minmax(0,1fr)}}

/* ---------- the report period: Today | Last Day | Monthly | Custom, and the custom date or period box ---------- */
.prd{display:flex;margin-bottom:16px}.prw{position:relative;max-width:100%}
.prs{display:inline-flex;flex-wrap:wrap;max-width:100%;border:1px solid var(--ln);border-radius:12px;overflow:hidden;background:var(--cd)}
.prs button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 16px;border:0;background:none;font:inherit;font-size:13.5px;font-weight:500;color:var(--mu);cursor:pointer;white-space:nowrap}
.prs button+button{border-left:1px solid var(--ln)}.prs button:hover{color:var(--tx)}.prs button:focus-visible{outline:2px solid var(--pr);outline-offset:-2px}
.prs button.on{background:var(--prs);color:var(--pr);font-weight:600}
.prc{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:340px;max-width:calc(100vw - 32px);padding:14px;border:1px solid var(--ln);border-radius:14px;background:var(--cd);box-shadow:0 18px 40px rgba(20,25,60,.16)}
.prc[hidden]{display:none}
.prm{display:grid;grid-template-columns:1fr 1fr;margin-bottom:12px;border:1px solid var(--ln);border-radius:10px;overflow:hidden}
.prm button{min-height:36px;padding:7px;border:0;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--mu);cursor:pointer}.prm button+button{border-left:1px solid var(--ln)}.prm button.on{background:var(--pr);color:#fff;font-weight:600}
.prf{display:grid;grid-template-columns:1fr 1fr;gap:10px}.prf.one{grid-template-columns:1fr}.prf label{margin:0}.prf label[hidden]{display:none}.prf input{width:100%;min-width:0}
.prc .row2{margin-top:12px}
@media(max-width:620px){.prd,.prw,.prs{width:100%}.prs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.prs button{padding:9px 6px;font-size:13px;gap:5px}.prc{left:0;right:auto;width:100%;max-width:none}}