/* JDVF AutoLink web app. Component styles are copied from the approved design prototype (design/prototype/index.html, phone section); the overrides at the end make the phone frame fill the real screen. */
:root{--a-navy:#0b1f44;--a-navy2:#163063;--a-bg:#f3f5f9;--a-card:#ffffff;--a-line:#e3e7ef;--a-ink:#14203a;--a-ink2:#5a6680;--a-ink3:#94a0b6;--a-royal:#2251d1;--a-green:#1e9e5a;--a-orange:#e8890c;--a-red:#d93a3a;--a-purple:#6b4bd6;--a-teal:#0e9aa7;--a-gray:#8a94a6;--f-app:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box}
.phone{width:320px;max-width:100%;height:660px;border-radius:34px;background:#0a0f1c;padding:10px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 18px 40px -18px rgba(10,20,50,.45);flex:none}
.phone.sm{width:252px;height:520px;border-radius:28px;padding:8px}
.scr{position:relative;height:100%;border-radius:26px;overflow:hidden;background:var(--a-bg);display:flex;flex-direction:column;font-family:var(--f-app);color:var(--a-ink);font-size:12.5px;line-height:1.35}
.phone.sm .scr{border-radius:21px;font-size:11px}
.phone.sm .scr *{font-size:inherit}
.sbar{height:22px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 16px;font-size:10.5px;color:#fff;background:var(--a-navy)}
.sbar.light{background:var(--a-bg);color:var(--a-ink)}
.ah{flex:none;background:var(--a-navy);color:#fff;display:flex;align-items:center;gap:6px;padding:8px 8px 10px;min-height:46px}
.ah .ttl{flex:1;min-width:0;text-align:center;font-weight:500;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah .ttl small{display:block;font-size:9.5px;font-weight:400;opacity:.65;letter-spacing:.04em}
.ab{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;border:0;background:none;color:inherit;cursor:pointer;position:relative;flex:none}
.ab:hover{background:rgba(255,255,255,.12)}
.ab .dot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--a-orange);border:1.5px solid var(--a-navy)}
.ab svg{width:18px;height:18px}
.ah.sheet{background:var(--a-card);color:var(--a-ink);border-bottom:1px solid var(--a-line);flex-direction:column;align-items:stretch;padding-top:6px}
.ah.sheet .grab{width:36px;height:4px;border-radius:2px;background:var(--a-line);margin:0 auto 6px}
.ah.sheet .row{display:flex;align-items:center;gap:6px}
.ah.sheet .ttl{text-align:left;padding-left:6px}
.body{flex:1;overflow:auto;padding:12px 12px 14px;display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
.body::-webkit-scrollbar{display:none}
.body>*{flex-shrink:0}
.ribbon{flex:none;background:#fff4e2;color:#8a4b00;font-size:9.5px;text-align:center;padding:2px;letter-spacing:.05em;font-weight:500}
.ribbon.demo{background:var(--a-purple);color:#fff}
.ribbon.off{background:#3a4458;color:#fff}
.ribbon.err{background:#fde7e7;color:#9e1f1f}
.greet b{display:block;font-size:16px;font-weight:700}
.greet span{color:var(--a-ink2);font-size:11.5px}
.alert{display:flex;align-items:center;gap:8px;border-radius:10px;padding:8px 10px;font-size:11.5px;border:1px solid}
.alert.warn{background:#fff6e8;border-color:#f6d6a5;color:#7a4300}
.alert.bad{background:#fdeeee;border-color:#f3c3c3;color:#8f1f1f}
.alert.ok{background:#e9f7ef;border-color:#bfe6cf;color:#145c36}
.alert.pri{background:#eef3fd;border-color:#c7d3f3;color:#1b3a8f}
.alert .grow{flex:1;min-width:0}
.alert svg{width:16px;height:16px;flex:none}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;padding:8px 9px;display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;border-left:3px solid var(--c,var(--a-royal))}
.stat .top2{display:flex;justify-content:space-between;align-items:center;color:var(--c)}
.stat .top2 svg{width:15px;height:15px}
.stat b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--a-ink);line-height:1.1}
.stat span{font-size:10.5px;color:var(--a-ink2)}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acts.c1{grid-template-columns:1fr}
.btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border-radius:10px;border:0;padding:8px 10px;font-weight:500;font-size:12px;cursor:pointer;text-align:center;color:#fff;background:var(--a-royal);line-height:1.2}
.btn svg{width:16px;height:16px;flex:none}
.btn.wide{grid-column:1/-1}
.btn.ok{background:var(--a-green)} .btn.warn{background:var(--a-orange)} .btn.bad{background:var(--a-red)} .btn.wf{background:var(--a-purple)} .btn.teal{background:var(--a-teal)} .btn.navy{background:var(--a-navy)}
.btn.sec{background:var(--a-card);color:var(--a-royal);border:1.5px solid #c7d3f3}
.btn.ghost{background:none;color:var(--a-ink2)}
.btn.bad-ghost{background:var(--a-card);color:var(--a-red);border:1.5px solid #f0c4c4}
.btn.tile,.btn.tile-wf{background:var(--a-card);color:var(--a-ink);border:1px solid var(--a-line);flex-direction:column;min-height:64px;gap:4px;font-size:11.5px}
.btn.tile svg{color:var(--a-navy2);width:19px;height:19px}
.btn.tile-wf svg{color:var(--a-purple);width:19px;height:19px}
.btn.big{min-height:58px;font-size:14px;border-radius:14px}
.btn.big svg{width:22px;height:22px}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.quick.q2{grid-template-columns:repeat(2,1fr)}
.qb{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;cursor:pointer;font-size:10px;color:var(--a-ink2);text-align:center;padding:2px;line-height:1.15}
.qb i,.qb .ic{width:38px;height:38px;border-radius:12px;background:var(--a-card);border:1px solid var(--a-line);display:grid;place-items:center;color:var(--a-royal)}
.qb svg{width:17px;height:17px}
.secttl{font-size:11px;font-weight:700;color:var(--a-ink2);letter-spacing:.04em;text-transform:uppercase;display:flex;justify-content:space-between}
.list{display:flex;flex-direction:column;gap:7px}
.card{background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;padding:8px 10px;display:flex;gap:8px;align-items:center}
.card .grow{flex:1;min-width:0}
.card .t{font-weight:700;font-size:12.5px;font-family:var(--f-app);letter-spacing:.02em}
.card .s{color:var(--a-ink2);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .m{font-size:10px;color:var(--a-ink3)}
.chip{display:inline-block;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:99px;letter-spacing:.02em;white-space:nowrap}
.chip.ok{background:#e3f5ea;color:#157244} .chip.warn{background:#fff0d9;color:#8d4d00} .chip.bad{background:#fde3e3;color:#a12323}
.chip.wf{background:#efeafd;color:#5232b8} .chip.pri{background:#e6edfc;color:#1d46b6} .chip.mute{background:#eceef2;color:#5f6879}
.cb{width:30px;height:30px;border-radius:8px;border:1px solid var(--a-line);background:var(--a-card);display:grid;place-items:center;color:var(--a-royal);cursor:pointer;flex:none}
.cb svg{width:15px;height:15px}
.search{display:flex;gap:6px}
.search .in{flex:1;display:flex;align-items:center;gap:6px;background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;padding:0 10px;height:36px;color:var(--a-ink3);font-size:11.5px;min-width:0}
.search .in svg{width:15px;height:15px;flex:none}
.atabs{display:flex;gap:4px;background:#e7ebf2;border-radius:10px;padding:3px;overflow-x:auto;scrollbar-width:none}
.atabs span{flex:1;text-align:center;font-size:10.5px;padding:5px 6px;border-radius:7px;color:var(--a-ink2);white-space:nowrap;cursor:default}
.atabs span.on{background:var(--a-card);color:var(--a-ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.form{display:flex;flex-direction:column;gap:8px}
.fld label{display:block;font-size:10.5px;color:var(--a-ink2);margin-bottom:3px;font-weight:500}
.fld label .req{color:var(--a-red)}
.fld .box{background:var(--a-card);border:1px solid var(--a-line);border-radius:8px;min-height:34px;padding:7px 9px;color:var(--a-ink3);font-size:11.5px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.fld .box.ta{min-height:52px;align-items:flex-start}
.fld .box svg{width:14px;height:14px;flex:none}
.fld .note{font-size:9.5px;color:var(--a-ink3);margin-top:2px}
.fld .box.plate{font-family:var(--f-mono);letter-spacing:.08em;color:var(--a-ink)}
.tgl{width:32px;height:18px;border-radius:99px;background:var(--a-green);position:relative;flex:none}
.tgl::after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips span{border:1px solid var(--a-line);background:var(--a-card);border-radius:99px;padding:3px 8px;font-size:10.5px;color:var(--a-ink2)}
.chips span:first-child{border-color:var(--a-royal);color:var(--a-royal);background:#eef2fd}
.sum{background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;padding:4px 10px}
.sum div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #f0f2f6;font-size:11.5px}
.sum div:last-child{border-bottom:0}
.sum dt{color:var(--a-ink2)} .sum dd{margin:0;text-align:right;font-weight:500;min-width:0}
.chk{background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;padding:2px 10px}
.chk div{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #f0f2f6;font-size:11.5px}
.chk div:last-child{border-bottom:0}
.chk .ci{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:none;border:1.5px solid var(--a-line);color:#fff}
.chk .ci svg{width:12px;height:12px}
.chk .done .ci{background:var(--a-green);border-color:var(--a-green)}
.chk .fail .ci{background:var(--a-red);border-color:var(--a-red)}
.chk .sq{border-radius:4px}
.chk .sel .ci{background:var(--a-royal);border-color:var(--a-royal)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ph{aspect-ratio:1;border-radius:8px;background:repeating-linear-gradient(45deg,#e9edf4 0 6px,#f3f5f9 6px 12px);border:1px dashed #c6cedd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9.5px;color:var(--a-ink2);text-align:center;max-width:100%}
.ph.has{background:linear-gradient(135deg,#9fb0cf,#5f7299);border:0;color:#fff}
.ph svg{width:15px;height:15px}
.pstrip{display:flex;gap:6px}
.pstrip .ph{width:56px;flex:none}
.prog{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--a-ink2)}
.prog .bar{height:6px;border-radius:3px;background:#e1e6ef;overflow:hidden}
.prog .bar i{display:block;height:100%;width:75%;background:var(--a-green)}
.bottom{flex:none;padding:8px 12px 10px;background:var(--a-card);border-top:1px solid var(--a-line);display:flex;gap:8px}
.bottom .btn{flex:1}
.bnav{flex:none;display:grid;grid-template-columns:repeat(5,1fr);background:var(--a-card);border-top:1px solid var(--a-line);padding:4px 2px 8px}
.bnav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9.5px;color:var(--a-ink3);cursor:pointer;padding:3px 0;position:relative}
.bnav button svg{width:19px;height:19px}
.bnav button.on{color:var(--a-royal);font-weight:700}
.bnav .plus{width:40px;height:40px;border-radius:14px;background:var(--a-royal);color:#fff;display:grid;place-items:center;margin-top:-16px;box-shadow:0 6px 14px -6px rgba(34,81,209,.7)}
.bnav .badge{position:absolute;top:0;left:calc(50% + 4px);background:var(--a-red);color:#fff;font-size:8.5px;border-radius:99px;padding:0 4px;font-weight:700}
.splash{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--a-navy);color:#fff;text-align:center}
.logo{width:64px;height:64px;border-radius:18px;background:#fff;color:var(--a-navy);display:grid;place-items:center;font-weight:700;font-size:20px;letter-spacing:.02em;position:relative}
.logo.sm{width:44px;height:44px;border-radius:12px;font-size:14px}
.logo::after{content:"";position:absolute;inset:auto 10px 9px;height:3px;border-radius:2px;background:var(--a-orange)}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff}
.brandb{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0 4px;text-align:center}
.brandb b{font-size:17px}
.brandb span{font-size:11px;color:var(--a-ink2)}
.bigcard{display:flex;gap:12px;align-items:center;text-align:left;border-radius:14px;padding:16px 14px;border:0;color:#fff;cursor:pointer;background:var(--a-royal);width:100%}
.bigcard.navy{background:var(--a-navy)}
.bigcard i,.bigcard .ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.15);display:grid;place-items:center;flex:none}
.bigcard b{display:block;font-size:14.5px}
.bigcard span{font-size:11px;opacity:.8}
.links{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center}
.lnk{border:0;background:none;color:var(--a-royal);font-size:11.5px;font-weight:500;display:inline-flex;align-items:center;gap:4px;cursor:pointer;padding:3px 0}
.lnk svg{width:14px;height:14px}
.note-a{font-size:10.5px;color:var(--a-ink2);background:#eef2f8;border-radius:8px;padding:7px 9px}
.result{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:18px 6px 6px}
.result .ri{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--a-green)}
.result .ri.bad{background:var(--a-red)}
.result .ri svg{width:26px;height:26px}
.result b{font-size:16px}
.result span{color:var(--a-ink2);font-size:11.5px}
.cam{flex:1;background:#151a22;position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.cam .frame{position:absolute;left:12%;right:12%;top:38%;height:16%;border:2px solid #fff;border-radius:10px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.cam .hint{position:absolute;top:57%;width:100%;text-align:center;font-size:11px;opacity:.8}
.cam .topc,.cam .botc{position:relative;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;z-index:1}
.cam .botc{padding-bottom:22px}
.cam .shut{width:62px;height:62px;border-radius:50%;border:4px solid #fff;background:rgba(255,255,255,.25);cursor:pointer}
.cam .cbtn{border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:99px;padding:7px 10px;display:flex;align-items:center;gap:5px;font-size:10.5px;cursor:pointer}
.cam .cbtn svg{width:15px;height:15px}
.plate{background:#fff;border:2.5px solid #1b1f29;border-radius:8px;padding:10px;text-align:center;font-family:var(--f-mono);font-size:22px;font-weight:500;letter-spacing:.12em}
.plate em{font-style:normal;background:#fff0d9;border-radius:3px}
.conf{text-align:center;font-size:11px;color:var(--a-ink2)}
.flowrow{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}
.flowrow span{background:var(--a-card);border:1px solid var(--a-line);border-radius:8px;padding:6px 8px;font-size:11px;font-weight:500}
.flowrow svg{width:14px;height:14px;color:var(--a-ink3)}
.stepsm{display:flex;gap:3px}
.stepsm span{flex:1;height:4px;border-radius:2px;background:#dfe4ec}
.stepsm span.d{background:var(--a-green)} .stepsm span.c{background:var(--a-royal)}
.stepsmL{display:flex;justify-content:space-between;font-size:9px;color:var(--a-ink3);margin-top:3px}
.timer{font-family:var(--f-mono);font-size:30px;text-align:center;padding:8px;background:var(--a-navy);color:#fff;border-radius:12px;letter-spacing:.05em}
.rating{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rating span{aspect-ratio:1;border-radius:10px;border:1.5px solid var(--a-line);background:var(--a-card);display:grid;place-items:center;font-weight:700;font-size:14px}
.rating span.on{background:var(--a-royal);color:#fff;border-color:var(--a-royal)}
.rq{font-weight:700;font-size:14px;text-align:center}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cgrid span{background:var(--a-card);border:1.5px solid var(--a-line);border-radius:10px;padding:10px 8px;font-size:11px;text-align:center;font-weight:500}
.cgrid span.on{border-color:var(--a-royal);color:var(--a-royal);background:#eef2fd}
.tl{display:flex;flex-direction:column;gap:0;background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;padding:8px 10px}
.tl div{display:flex;gap:9px;padding:4px 0;position:relative}
.tl i{width:10px;height:10px;border-radius:50%;margin-top:3px;flex:none;background:var(--c)}
.tl b{display:block;font-size:11.5px}
.tl span{font-size:10.5px;color:var(--a-ink2)}
.sop div{display:flex;align-items:center;gap:8px;background:var(--a-card);border:1px solid var(--a-line);border-radius:9px;padding:6px 9px;margin-bottom:5px;font-size:11.5px}
.sop div .grow{flex:1}
.sop .collapsed{background:#e9f7ef;border-color:#bfe6cf;color:#145c36;font-weight:500}
.vhead{background:var(--a-navy);color:#fff;border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center}
.vhead .vi{width:54px;height:40px;border-radius:8px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
.vhead b{font-family:var(--f-mono);font-size:15px;letter-spacing:.06em;display:block}
.vhead span{font-size:10.5px;opacity:.8}
.preview{background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;height:120px;display:grid;place-items:center;color:var(--a-ink3);font-size:11px;text-align:center;padding:10px}
.video{background:#151a22;border-radius:10px;height:130px;display:flex;flex-direction:column;justify-content:flex-end;padding:8px;color:#fff;gap:6px;font-size:10px}
.video .vbar{height:3px;background:rgba(255,255,255,.3);border-radius:2px}
.video .vbar i{display:block;width:35%;height:100%;background:#fff}
.menu{background:var(--a-card);border:1px solid var(--a-line);border-radius:10px}
.menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px 10px;font-size:11.5px;text-align:left;border-bottom:1px solid #f0f2f6;cursor:pointer;color:var(--a-ink)}
.menu button:last-child{border-bottom:0}
.menu button svg{width:16px;height:16px;color:var(--a-navy2)}
.menu button .grow{flex:1}
.menu .chev{color:var(--a-ink3)}
.permg{background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;font-size:10px;overflow:hidden}
.permg div{display:grid;grid-template-columns:1.6fr repeat(5,1fr);border-bottom:1px solid #f0f2f6;align-items:center}
.permg div>*{padding:5px 3px;text-align:center}
.permg div>*:first-child{text-align:left;padding-left:8px}
.permg .h{font-weight:700;color:var(--a-ink2);background:#f6f8fb}
.permg .y{color:var(--a-green);font-weight:700}
.permg .n{color:var(--a-ink3)}
.sk{background:linear-gradient(90deg,#e6eaf1,#f2f4f8,#e6eaf1);border-radius:8px}
.empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:16px 8px;color:var(--a-ink2);font-size:11.5px;background:var(--a-card);border:1px dashed var(--a-line);border-radius:12px}
.empty svg{width:28px;height:28px;color:var(--a-ink3)}
.empty b{color:var(--a-ink);font-size:13px}
.expander{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--a-royal);font-weight:500;padding:0 2px}
.rowlink{display:flex;align-items:center;gap:10px;background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;padding:9px 10px;cursor:pointer;width:100%;text-align:left}
.rowlink svg{width:17px;height:17px;color:var(--a-navy2);flex:none}
.rowlink .grow{flex:1;min-width:0}
.rowlink b{font-size:12px;display:block}
.rowlink span{font-size:10.5px;color:var(--a-ink2)}
.sheetlist{display:flex;flex-direction:column;gap:8px}
.ann{font-size:10px;color:var(--a-ink3);text-align:center}

/* ===== v2 design corrections (premium redesign plan) ===== */
:root{--a-ink2:#4d5872;--a-ink3:#66728a}
/* readable minimum sizes (mock 1px ≈ 1.2dp) */
.chip{font-size:10.5px;padding:2px 7px}
.bnav button{font-size:10.5px;color:var(--a-ink2);min-height:44px;justify-content:center}
.stat span,.card .m,.fld .note,.note-a,.greet span,.qb,.atabs span,.fld label,.tl span{font-size:11px}
.ribbon{font-size:10px}
.card .s{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* flat Add tab: never floats over content */
.bnav .plus{width:34px;height:26px;border-radius:9px;margin-top:0;box-shadow:none}
/* bottom inset so the last item never sits under the action bar or nav */
.body{padding-bottom:22px;scroll-padding-bottom:22px}
.morebelow{position:absolute;left:50%;transform:translateX(-50%);bottom:6px;background:var(--a-navy);color:#fff;font-size:10px;border-radius:99px;padding:2px 9px;pointer-events:none;opacity:.88}
.bwrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.bwrap>.body{flex:1}
/* touch targets: text links and icon buttons ≥ 40dp in the mock */
.lnk{min-height:34px;padding:6px 4px}
.cb{width:34px;height:34px}
.qb i,.qb .ic{width:40px;height:40px}
/* media grid never wider than the screen */
.pstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}
.pstrip .ph{width:auto}
/* universal interaction states */
.scr button,.scr [data-go]{transition:transform .08s ease,filter .12s ease,background-color .12s ease}
.scr .btn:active,.scr .stat:active,.scr .rowlink:active,.scr .qb:active,.scr .cb:active,.scr .lnk:active,.scr .bnav button:active,.scr .vcard .btn:active{transform:scale(.97);filter:brightness(.93)}
@media (hover:hover) and (pointer:fine){.scr .btn:hover,.scr .stat:hover,.scr .rowlink:hover,.scr .cb:hover{filter:brightness(1.05)}.scr .lnk:hover{text-decoration:underline}.scr .menu button:hover,.scr .acc button:hover{background:rgba(34,81,209,.05)}}
.scr button:focus-visible,.scr [data-go]:focus-visible{outline:3px solid #f5b83d;outline-offset:2px}
.scr .btn.busy{pointer-events:none;opacity:.85}
.scr .btn.busy svg{animation:jspin .7s linear infinite}
@keyframes jspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.scr *{transition:none!important;animation:none!important}}
/* compact bottom sheets: content height, dimmed screen behind */
.scr.sheetmode{background:rgba(9,18,40,.55)}
.scr.sheetmode .dim{flex:1;min-height:40px}
.scr.sheetmode .sheetbox{flex:0 1 auto;max-height:86%;display:flex;flex-direction:column;background:var(--a-bg);border-radius:18px 18px 0 0;overflow:hidden;min-height:0}
.scr.sheetmode .sheetbox .bwrap{flex:0 1 auto}
.scr.sheetmode .sheetbox .body{flex:0 1 auto}
.scr.sheetmode .ah.sheet{border-radius:18px 18px 0 0}
.scr.sheetmode .ah.sheet .ab{width:34px;height:34px;border-radius:50%;background:var(--a-bg)}
/* contextual vehicle card */
.vcard{background:var(--a-card);border:1px solid var(--a-line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:7px}
.vcard.hero{border:1.5px solid var(--a-royal);box-shadow:0 6px 16px -10px rgba(34,81,209,.6)}
.vcard .r1{display:flex;justify-content:space-between;gap:8px;align-items:center}
.vcard .r1 b{font-family:var(--f-mono);letter-spacing:.05em;font-size:13px}
.vcard .r2{font-size:11px;color:var(--a-ink2)}
.vcard .stg{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px}
.vcard .stg i{height:5px;border-radius:3px;background:var(--a-line)}
.vcard .stg i.d{background:var(--a-green)} .vcard .stg i.c{background:var(--a-orange)}
.vcard .r3{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px}
.vcard .r3 .btn{min-height:34px;padding:6px 12px;flex:none}
.vcard .pend{color:var(--a-ink);font-weight:600}
/* accordion */
.acc{background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;overflow:hidden}
.acc button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:10px;font-size:12px;text-align:left;border-bottom:1px solid var(--a-line);cursor:pointer;color:var(--a-ink);min-height:44px}
.acc button:last-child{border-bottom:0}
.acc button svg{width:16px;height:16px;color:var(--a-navy2);flex:none}
.acc .grow{flex:1;min-width:0}
.acc .cnt{font-size:10.5px;color:var(--a-ink2);background:var(--a-bg);border-radius:99px;padding:1px 7px}
/* estimate, advisor cards, queue */
.est{background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;padding:4px 10px;font-variant-numeric:tabular-nums}
.est div{display:flex;justify-content:space-between;padding:5px 0;font-size:12px;border-bottom:1px solid var(--a-line)}
.est div:last-child{border-bottom:0;font-weight:700;font-size:13px}
.adv{background:var(--a-card);border:1px solid var(--a-line);border-radius:12px;padding:9px 10px;display:flex;flex-direction:column;gap:6px}
.adv .h{display:flex;justify-content:space-between;align-items:center;gap:6px}
.adv .h b{font-size:12.5px}
.adv .sub{font-size:11px;color:var(--a-ink2)}
.adv .nums{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;text-align:center}
.adv .nums span{background:var(--a-bg);border-radius:8px;padding:4px 0;font-size:10.5px;color:var(--a-ink2)}
.adv .nums b{display:block;font-size:14px;color:var(--a-ink)}
.q{display:flex;flex-direction:column;gap:6px}
.qi{background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;padding:8px 10px;display:flex;gap:9px;align-items:center}
.qi .n{width:22px;height:22px;border-radius:50%;background:var(--a-bg);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;color:var(--a-ink2)}
.qi .grow{flex:1;min-width:0}.qi b{font-size:12px;display:block}.qi span{font-size:11px;color:var(--a-ink2)}
.qi .btn{min-height:32px;padding:5px 10px;flex:none}
.media{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.media button{aspect-ratio:1;border:0;border-radius:10px;background:linear-gradient(135deg,#9fb0cf,#5f7299);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;cursor:pointer;min-width:0}
.media button svg{width:18px;height:18px}
.toast{position:absolute;left:12px;right:12px;bottom:70px;background:#14203a;color:#fff;border-radius:10px;padding:8px 10px;font-size:11px;z-index:5;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
/* landscape phone */
.phone.land{width:660px;height:320px}
.phone.land .cam .frame{left:20%;right:20%;top:30%;height:28%}
.phone.land .cam .hint{top:62%}
.phone.land .cam .botc{position:absolute;right:0;top:0;bottom:0;flex-direction:column;justify-content:center;gap:16px;padding:10px 16px}
.phone.land .cam .topc{padding-right:110px}
.phone.land .body{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:10px}
.phone.land .body>.links,.phone.land .body>.note-a{grid-column:2}
/* tablet with navigation rail */
.tablet{width:860px;max-width:100%;height:520px;border-radius:26px;background:#0a0f1c;padding:12px;flex:none}
.tablet .scr{flex-direction:row}
.rail{width:76px;background:var(--a-card);border-right:1px solid var(--a-line);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0}
.rail button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--a-ink2);padding:6px 0;width:64px;border-radius:12px;cursor:pointer}
.rail button.on{background:#e6edfc;color:var(--a-royal);font-weight:700}
.rail svg{width:19px;height:19px}
.pane{flex:1;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--a-line)}
.pane:last-child{flex:1.4;border-right:0}
/* Dark Premium theme for the app */
.phone.dk .scr,.tablet.dk .scr{--a-navy:#08142b;--a-navy2:#9fb7ff;--a-bg:#0b1220;--a-card:#131c2f;--a-line:#26334d;--a-ink:#e9eef8;--a-ink2:#b3bed3;--a-ink3:#93a0b8;--a-royal:#5b84ff;--a-green:#34c27c;--a-orange:#f5a23a;--a-red:#f26464;--a-purple:#9a80f5;--a-teal:#2fbcc8;--a-gray:#93a0b8;color-scheme:dark}
.phone.dk .chip.ok{background:#12351f;color:#7fe0a9}.phone.dk .chip.warn{background:#3a2a0e;color:#ffc67a}.phone.dk .chip.bad{background:#3d1717;color:#ff9c9c}
.phone.dk .chip.wf{background:#251c45;color:#c2b1ff}.phone.dk .chip.pri{background:#16264d;color:#a9c0ff}.phone.dk .chip.mute{background:#1f2738;color:#b3bed3}
.phone.dk .alert.warn{background:#2c2010;border-color:#5a3f12;color:#ffd08f}.phone.dk .alert.bad{background:#2e1416;border-color:#5c2326;color:#ffb0b0}.phone.dk .alert.ok{background:#10281b;border-color:#1d4d33;color:#9de6bd}.phone.dk .alert.pri{background:#131d38;border-color:#2a3b6b;color:#b3c7ff}
.phone.dk .atabs{background:#0f1729}.phone.dk .note-a{background:#16203a}.phone.dk .sum div,.phone.dk .chk div,.phone.dk .menu button{border-bottom-color:#1e2a42}
.phone.dk .chips span:first-child{background:#16264d}.phone.dk .btn.sec{border-color:#34508f}.phone.dk .btn.bad-ghost{border-color:#6b2a2d}
.phone.dk .ribbon{background:#3a2a0e;color:#ffd08f}.phone.dk .rail button.on,.tablet.dk .rail button.on{background:#16264d}
.phone.dk .ph{background:repeating-linear-gradient(45deg,#1a2438 0 6px,#141d30 6px 12px);border-color:#2c3a58}
.phone.dk .ah.sheet .grab{background:#33415f}
/* component state board */
.stateboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.stateboard figure{margin:0;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.stateboard figcaption{font-size:12px;color:var(--ink2)}
.stateboard .scr{height:auto;border-radius:12px;padding:10px;border:1px solid var(--line)}
.result .ri.wf{background:var(--a-purple,#7c4dff)}
.phone:not(.dk) .scr,.tablet:not(.dk) .scr{--a-ink3:#5b6780}
.fld label .req{color:#c02a2a}
.cam .cbtn{min-height:44px;padding:8px 12px}
.ah .lnk,.ah button{min-height:36px;min-width:36px}
.phone:not(.dk) .btn.ok,.tablet:not(.dk) .btn.ok{background:#16784a}.phone:not(.dk) .btn.warn,.tablet:not(.dk) .btn.warn{background:#a85b00}
.qi .btn span{color:inherit;font-size:inherit}
.phone:not(.dk) span.y{color:#16784a}
.phone:not(.dk) .btn.teal,.tablet:not(.dk) .btn.teal{background:#0b7680}
.stateboard .btn.f-hover{filter:brightness(1.06)}.stateboard .btn.f-press{transform:scale(.97);filter:brightness(.88)}.stateboard .btn.f-focus{outline:3px solid #f5a23a;outline-offset:2px}.stateboard .btn.f-dis,.stateboard .btn[disabled]{background:#c9cfda;color:#4d5872;cursor:not-allowed}.phone.dk .stateboard .btn[disabled],.stateboard .dk .btn[disabled]{background:#2a3550;color:#93a0b8}
.phone.dk .plate,.tablet.dk .plate{background:#f4f6fa;color:#0b1220;border-color:#93a0b8}
.phone.dk .plate em{background:#f5d48a;color:#0b1220}
.qi{flex-wrap:wrap}.qi .grow{min-width:58%}
.gcam .topc{gap:6px;align-items:center}.gcam .gstage{flex:1;text-align:center;font-size:11px;font-weight:700;background:rgba(255,255,255,.16);border-radius:99px;padding:6px 8px}
.gpart{position:relative;z-index:1;margin:2px 12px 0;display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.5);border-radius:12px;padding:8px 10px}
.gpart .gsvg{width:30px;height:54px;flex:none}.gpart b{display:block;font-size:15px}.gpart span{font-size:11px;color:#e6ebf5}.gpart .gcount{font-size:12px;font-weight:700;background:#fff;color:#0b1220;border-radius:99px;padding:3px 8px;flex:none}
.gprog{position:relative;z-index:1;margin:8px 12px 0;height:5px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}.gprog i{display:block;height:100%;background:#34c27c}
.gproglbl{position:relative;z-index:1;margin:3px 12px 0;font-size:10.5px;color:#e6ebf5}
.gframe{position:absolute;left:8%;right:8%;top:36%;bottom:30%;border:2px dashed #fff;border-radius:14px}
.ghint{position:absolute;bottom:25%;width:100%;text-align:center;font-size:11.5px;font-weight:600;text-shadow:0 1px 3px #000}
.gtoast{position:absolute;left:10%;right:10%;top:40%;z-index:2;display:flex;gap:6px;align-items:center;background:rgba(10,90,50,.92);border-radius:10px;padding:8px 10px;font-size:11.5px}.gtoast svg{width:16px;height:16px;flex:none}
.gchips{position:absolute;left:0;right:0;top:56%;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;padding:0 10px}.gchips span{font-size:11px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.6);border-radius:99px;padding:4px 8px}.gchips span.on{background:#fff;color:#0b1220}
.gcam .botc{padding-bottom:10px}.gfin{position:relative;z-index:1;padding:0 12px 14px}.gfin .btn{width:100%}
.phone.land .gcam .gpart{margin-right:150px}.phone.land .gcam .gprog,.phone.land .gcam .gproglbl{margin-right:150px}.phone.land .gcam .gframe{left:6%;right:30%;top:42%;bottom:12%}.phone.land .gcam .ghint{bottom:3%;width:70%}.phone.land .gcam .botc{width:130px}.phone.land .gcam .gfin{position:absolute;right:8px;bottom:6px;width:136px;padding:0}.phone.land .gcam .gtoast{right:32%}
.pair{border:1px solid var(--a-line);border-radius:12px;background:var(--a-card);overflow:hidden}
.pseg{display:flex;gap:4px;padding:6px;align-items:center}.pseg button{flex:1;min-height:36px;border-radius:8px;border:1px solid var(--a-line);background:var(--a-card);color:var(--a-ink2);font-size:12px;font-weight:600;cursor:pointer}
.pair:not(.mk) .po,.pair.mk .pm{background:var(--a-royal);border-color:var(--a-royal);color:#fff}.pnone{flex:1;font-size:11px;color:var(--a-ink2);text-align:center}
.pimg{position:relative;height:150px;background:linear-gradient(160deg,#9aa8bd,#5e6b82 60%,#3a4558)}.pimg .car{position:absolute;left:10%;right:10%;top:30%;bottom:18%;border-radius:40% 40% 14% 14%;background:linear-gradient(180deg,#d9dee7,#aeb7c6)}
.pimg .mark{position:absolute;border:2.5px solid #ff3b30;border-radius:50%;display:none}.pimg .mark em{position:absolute;left:100%;top:-6px;margin-left:4px;white-space:nowrap;font-style:normal;font-size:10.5px;font-weight:700;background:#c81e1e;color:#fff;border-radius:6px;padding:2px 5px}
.pair.mk .pimg .mark{display:block}.plbl{position:absolute;left:8px;bottom:6px;font-size:11px;background:rgba(0,0,0,.6);color:#fff;border-radius:6px;padding:2px 6px}.pair.mk .plbl.o,.pair:not(.mk) .plbl.m{display:none}
.pcap{font-size:11.5px;color:var(--a-ink2);padding:6px 10px 8px}
.urlbar{display:flex;align-items:center;gap:6px;background:var(--a-card);border:1px solid var(--a-line);border-radius:99px;padding:6px 10px;font-size:11px;color:var(--a-ink2)}.urlbar svg{width:13px;height:13px;color:#16784a}
.cam.gcam{justify-content:flex-start}.gcam .botc{margin-top:auto}.gpart small{display:block;font-size:10.5px;color:#9fe3bf;font-weight:700;letter-spacing:.02em}
.pimg .mark{background:transparent}.pimg .mark em{left:auto;right:0;top:100%;margin:3px 0 0}
.gcam .gframe{position:relative;left:auto;right:auto;top:auto;bottom:auto;flex:1;min-height:50px;margin:10px 9% 4px}
.gcam .ghint{position:relative;bottom:auto;width:auto;padding:0 10px 4px}
.gcam .gchips{position:relative;top:auto;margin-top:auto;padding-top:10px;padding:0 10px 8px}
.gcam .gtoast{top:auto;bottom:46%}
.phone.land .gcam .gframe{margin:8px 34% 4px 6%}.phone.land .gcam .ghint{width:auto;bottom:auto;margin-right:150px}
.seg-gallery{flex-wrap:wrap;overflow:visible}
.seg-gallery figure{max-width:100%;overflow-x:auto}
.phone.land .gcam .gframe{left:auto;right:auto;top:auto;bottom:auto}
.gcam .gframe.gv{border:0;display:flex;align-items:center;justify-content:center}
.gframe .cn{position:absolute;width:18px;height:18px;border:3px solid #fff}.cn.k1{left:0;top:0;border-right:0;border-bottom:0;border-radius:6px 0 0 0}.cn.k2{right:0;top:0;border-left:0;border-bottom:0;border-radius:0 6px 0 0}.cn.k3{left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 6px}.cn.k4{right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 6px 0}
.gveh{width:94%;max-height:100%}.gveh path,.gveh rect,.gveh circle{fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}.gveh .gl{stroke-width:1.2;opacity:.75}
.gveh .ga{fill:rgba(245,162,58,.45);stroke:#f5a23a;stroke-width:2.2;stroke-dasharray:5 3}.gveh .gt{fill:#fff;font-size:7px;font-weight:700;letter-spacing:.06em}
.gtag{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:700;color:#0b1220;background:#f5a23a;border-radius:99px;padding:2px 8px;white-space:nowrap}
.glib{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:10px}.glib figure{margin:0;background:#151a22;border-radius:10px;padding:8px;color:#fff}.glib figcaption{font-size:11.5px;margin-top:4px}.glib figcaption b{display:block;font-size:12.5px}
.gna{position:relative;z-index:1;display:flex;justify-content:center;padding:0 0 6px}.gna .cbtn{background:#a85b00}
.gcam .gtoast{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:6px 12px 0;padding:5px 9px;font-size:11px;animation:gtfade 2.2s ease forwards}
@keyframes gtfade{0%,70%{opacity:1}100%{opacity:.0}}
@media (prefers-reduced-motion:reduce){.gcam .gtoast{animation:none}}
.fld .box.filled{color:var(--a-ink);font-weight:600}.fld .box .auto{font-style:normal;font-size:10.5px;font-weight:600;color:var(--a-ink2);background:var(--a-bg);border-radius:6px;padding:1px 6px}
.psrch{display:flex;flex-direction:column;gap:6px}.psrch .pin{display:flex;align-items:center;gap:6px;background:var(--a-card);border:1.5px solid var(--a-royal);border-radius:10px;padding:0 10px;min-height:42px}
.psrch input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--a-ink);font:inherit;font-size:14px}.psrch .pin button{border:0;background:none;color:var(--a-ink2);font-size:16px;min-width:32px;min-height:32px;cursor:pointer}
.psrch .plist{background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;overflow:hidden}.psrch .po{display:flex;align-items:center;gap:8px;width:100%;border:0;border-bottom:1px solid var(--a-line);background:none;color:var(--a-ink);text-align:left;padding:8px 10px;min-height:44px;cursor:pointer;font:inherit}
.psrch .po:last-child{border-bottom:0}.psrch .po b{font-size:13px;display:block}.psrch .po small{font-size:11px;color:var(--a-ink2)}.psrch .po .pr{margin-left:auto;font-size:12px;font-weight:700;white-space:nowrap}.psrch .po .tagx{font-size:10.5px;font-weight:700;color:var(--a-royal)}
.psrch .po:hover{background:var(--a-bg)}.psrch .sel{font-size:12px;background:var(--a-bg);border-radius:8px;padding:6px 9px;color:var(--a-ink)}.psrch .recent{display:flex;flex-wrap:wrap;gap:5px}.psrch .recent button{border:1px solid var(--a-line);background:var(--a-card);color:var(--a-ink2);border-radius:99px;font-size:11.5px;padding:5px 10px;min-height:32px;cursor:pointer}
.awi{display:flex;flex-direction:column;gap:8px}.awc{background:var(--a-card);border:1px solid var(--a-line);border-radius:12px;padding:10px}.awc .h{display:flex;justify-content:space-between;gap:8px}.awc .h b{font-size:13.5px}.awc .h span{font-weight:700;font-size:13px;white-space:nowrap}
.awc .r{font-size:11.5px;color:var(--a-ink2);margin-top:2px}.awc .seg3{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}.awc .seg3 button{min-height:40px;border-radius:8px;border:1px solid var(--a-line);background:var(--a-card);color:var(--a-ink2);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.awc.sa .seg3 .a{background:#16784a;border-color:#16784a;color:#fff}.awc.sr .seg3 .r2{background:#c02a2a;border-color:#c02a2a;color:#fff}.awc.sc .seg3 .c{background:#a85b00;border-color:#a85b00;color:#fff}
.awc .cl{display:none;margin-top:6px}.awc.sc .cl{display:block}.awc .cl div{border:1px solid var(--a-line);border-radius:8px;padding:7px 9px;font-size:12px;color:var(--a-ink2)}.awall{display:flex;gap:6px}.awall button{flex:1;min-height:38px;border-radius:8px;border:1px dashed var(--a-line);background:none;color:var(--a-ink2);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.awtot{font-size:12.5px;font-weight:700;text-align:right;color:var(--a-ink)}

/* ===== Web app overrides: the design's phone screen becomes the real screen ===== */
html,body{margin:0;height:100%;background:#dfe4ee}
body{font-family:var(--f-app);-webkit-text-size-adjust:100%}
@media (prefers-color-scheme:dark){html,body{background:#060b16}}
.phone.app{width:100%;height:100%;max-width:none;border-radius:0;padding:0;background:transparent;box-shadow:none;display:flex;justify-content:center}
/* The mock is drawn at about 1px = 1.2dp; scale it up so text and touch targets have real-phone sizes. */
.phone.app .scr{--z:1.18;zoom:var(--z);width:100%;max-width:calc(560px / var(--z));height:calc(100dvh / var(--z));border-radius:0;box-shadow:0 0 0 1px rgba(10,20,50,.06)}
@supports not (zoom:1){.phone.app .scr{--z:1}}
.phone.app .sbar{height:env(safe-area-inset-top,0px);min-height:0;padding:0}
.phone.app .bnav{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
.phone.app .bottom{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.scr .spin{animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes jspin{to{transform:rotate(360deg)}}
.scr .btn.busy svg{animation:jspin .7s linear infinite}
.scr .sk{animation:skp 1.2s ease-in-out infinite}
@keyframes skp{50%{opacity:.55}}
button{font-family:inherit}
.btn[disabled]{opacity:.5;pointer-events:none}
/* real inputs, drawn like the design's field boxes */
.fld input,.fld select,.fld textarea{width:100%;background:var(--a-card);border:1px solid var(--a-line);border-radius:8px;min-height:38px;padding:8px 9px;color:var(--a-ink);font:inherit;font-size:12.5px}
.fld textarea{min-height:64px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--a-royal);outline-offset:0;border-color:var(--a-royal)}
.fld input.plate{font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.fld input.pin{letter-spacing:.6em;text-align:center;font-size:16px}
.fld .err{font-size:10.5px;color:var(--a-red);margin-top:2px}
.fld.check label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--a-ink);margin:0}
.fld.check input{width:18px;height:18px;min-height:0}
.form{display:flex;flex-direction:column;gap:10px}
.search .in input{flex:1;border:0;background:none;font:inherit;font-size:12px;color:var(--a-ink);outline:none;min-width:0;height:100%}
.atabs button{flex:1;text-align:center;font-size:11px;padding:6px;border-radius:7px;color:var(--a-ink2);white-space:nowrap;border:0;background:none;cursor:pointer;font-family:inherit}
.atabs button.on{background:var(--a-card);color:var(--a-ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.card{width:100%;text-align:left;color:inherit;font:inherit}
button.card{cursor:pointer}
.rating button{aspect-ratio:1;border-radius:10px;border:1.5px solid var(--a-line);background:var(--a-card);display:grid;place-items:center;font-weight:700;font-size:14px;cursor:pointer;color:var(--a-ink)}
.rating button.on{background:var(--a-royal);color:#fff;border-color:var(--a-royal)}
.media img,.media video{width:100%;height:100%;object-fit:cover;border-radius:10px}
.media button{padding:0;overflow:hidden}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#14203a;color:#fff;border-radius:10px;padding:10px 14px;font-size:13px;z-index:50;max-width:min(92vw,480px);box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.toast.bad{background:#a12323}
.toast.ok{background:#157244}
.overlay{position:fixed;inset:0;z-index:40;display:flex;justify-content:center}
.overlay .scr{background:rgba(9,18,40,.55)!important}
.pick{display:flex;flex-direction:column;gap:6px}
.pick button{display:flex;align-items:center;gap:8px;text-align:left;border:1.5px solid var(--a-line);background:var(--a-card);border-radius:10px;padding:9px 10px;cursor:pointer;font:inherit;font-size:12px;color:var(--a-ink)}
.pick button.on{border-color:var(--a-royal);background:#eef2fd}
.pick button .grow{flex:1;min-width:0}
.mono{font-family:var(--f-mono);letter-spacing:.05em}
.muted{color:var(--a-ink2)}
.small{font-size:10.5px}
.row{display:flex;gap:8px;align-items:center}
.grow{flex:1;min-width:0}
.perm{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;padding:6px 10px;font-size:11.5px}
.perm label{display:contents}
.permhead{font-size:10.5px;font-weight:700;color:var(--a-ink2);text-transform:uppercase;margin-top:6px}
.tablewrap{overflow-x:auto;background:var(--a-card);border:1px solid var(--a-line);border-radius:10px}
.tablewrap table{border-collapse:collapse;width:100%}
.tablewrap th,.tablewrap td{text-align:left;padding:5px 7px;border-bottom:1px solid var(--a-line);font-size:11px;white-space:nowrap}
.tablewrap th{font-size:10px;color:var(--a-ink2)}
.phone.dk .tablewrap{background:var(--a-card)}
.phone.dk .pick button.on{background:#16264d}
.phone.dk .note-a{color:var(--a-ink2)}
.phone.dk .fld input,.phone.dk .fld select,.phone.dk .fld textarea{color-scheme:dark}
.sum a,.card a{color:var(--a-royal);text-decoration:none;font-weight:600}
.stepsm span{height:5px}
.mviewer{position:fixed;inset:0;z-index:60;background:rgba(5,10,20,.92);display:flex;align-items:center;justify-content:center;padding:16px}
.mviewer img,.mviewer video{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.mviewer .ab{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;color:#fff;background:rgba(255,255,255,.12)}
.cardbtns{display:flex;gap:6px;flex-wrap:wrap;width:100%;margin-top:6px}
.cardbtns .btn{flex:1 1 auto;min-height:36px;padding:6px 10px;font-size:12px}
.card:has(.cardbtns){flex-wrap:wrap}
.media.pick label{position:relative;aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,#9fb0cf,#5f7299);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;overflow:hidden;cursor:pointer}
.media.pick label .th{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.media.pick label>span:last-child{position:relative;background:rgba(0,0,0,.45);padding:1px 5px;border-radius:6px;margin-top:auto;margin-bottom:4px}
.media.pick input{position:absolute;top:6px;left:6px;z-index:2;width:18px;height:18px;accent-color:var(--a-green)}
.media.pick label:has(input:checked){outline:3px solid var(--a-green);outline-offset:-3px}
.mono-wrap{white-space:pre-wrap;word-break:break-word}
.bad-t{color:var(--a-red)}
[hidden]{display:none!important}
/* MAS-01 "More statistics" expander */
.more-stats summary{list-style:none;cursor:pointer;padding:2px}
.more-stats summary::-webkit-details-marker{display:none}
.more-stats[open] summary svg{transform:rotate(180deg)}
.more-stats .sum{margin-top:6px}

/* Additional work (TEC-06 / ADV-08): small icon buttons on item cards and the add tile in the evidence grid */
.btn.icon{flex:none;min-height:34px;min-width:34px;width:34px;padding:0;border-radius:9px;background:var(--a-card);border:1px solid var(--a-line);color:var(--a-ink2);justify-content:center}
.btn.icon span:empty{display:none}
.media .addm{aspect-ratio:1;border:1.5px dashed var(--a-line);border-radius:10px;color:var(--a-royal);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;cursor:pointer}
.media .addm svg{width:18px;height:18px}
.awc .q{width:100%;box-sizing:border-box;margin-top:6px;border:1px solid var(--a-line);border-radius:8px;padding:7px 9px;font:inherit;font-size:12.5px;background:var(--a-card);color:var(--a-ink);min-height:60px}
.awc.done{opacity:.85}
/* Accounts report and import preview tables, printable receipt */
.tbl{overflow-x:auto;border:1px solid var(--a-line);border-radius:12px}
.tbl table{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--a-line);vertical-align:top}
.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--a-ink2)}
.tbl td:nth-child(2),.tbl td:nth-child(3){white-space:nowrap}
.tbl tr.tot td{font-weight:700;border-bottom:0}
@media print{body *{visibility:hidden}.printable,.printable *,.tbl,.tbl *{visibility:visible}.printable,.tbl{position:absolute;left:0;top:0;width:100%}}
/* Yellow Form: signature pad and signed images, root-cause checkboxes in two columns */
.sigpad{width:100%;aspect-ratio:5/2;background:#fff;border:1px dashed var(--a-ink3);border-radius:12px;touch-action:none;display:block}
.card.sig{display:block}
.sigimg{display:block;max-width:100%;height:64px;object-fit:contain;background:#fff;border-radius:8px;margin:6px 0}
.chk2 .form{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
/* VF-08 section picker */
.secs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.secs label{display:flex;gap:8px;align-items:center;font-size:12px;background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;padding:8px 10px;min-height:44px;cursor:pointer}
.secs input{width:18px;height:18px;accent-color:var(--a-royal);flex:none}
/* Smart Eye (ADV-05/20-28, CUS-09-16, VF-13) */
.sephoto{position:relative;border-radius:10px;overflow:hidden;background:#0f1726;aspect-ratio:4/3;width:100%}
.sephoto img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain}
.sephoto .ph0,.sephoto.na{display:grid;place-items:center;align-content:center;gap:4px;color:#8a97ad;font-size:11px;height:100%}
.sephoto.na{background:var(--a-bg2,#eef1f6);color:var(--a-ink2)}
.sephoto .ph0 svg,.sephoto.na svg{width:26px;height:26px}
i.mk{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border:2.5px solid #ff3b30;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none;min-width:14px}
i.mk.no{border-style:dashed;border-color:#ffb020;opacity:.75}
i.mk span{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:3px;white-space:nowrap;font-style:normal;font-size:10px;font-weight:700;background:rgba(0,0,0,.72);color:#fff;border-radius:5px;padding:1px 5px}
.thumb{flex:0 0 56px;width:56px;height:42px;border-radius:7px;overflow:hidden;background:#0f1726;display:grid;place-items:center;color:#8a97ad}
.thumb img{width:100%;height:100%;object-fit:cover}.thumb svg{width:18px;height:18px}
.segrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.segrid figure{margin:0;display:flex;flex-direction:column;gap:3px;min-width:0}.segrid figcaption{font-size:11px;color:var(--a-ink2)}.segrid figcaption b{display:block;color:var(--a-ink)}
.segrid.orig i.mk{display:none}
.prog i{display:block;height:6px;border-radius:3px;background:var(--a-green);min-width:2px}
.prog:has(> i){background:#e1e6ef;border-radius:3px;display:block;height:6px;overflow:hidden}
div.gcam{display:flex;flex-direction:column;gap:10px}
.gpanel{display:flex;flex-direction:column;gap:4px;background:var(--a-card);border:1px solid var(--a-line);border-radius:12px;padding:10px}
.gpanel b{font-size:16px}.gpanel [data-guide]{font-size:12px;color:var(--a-ink2)}
.gview{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#0b1220}
.gview video{width:100%;height:100%;object-fit:cover;display:block}
.gph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;color:#b9c3d6;font-size:12px;text-align:center;padding:16px}
.gph svg{width:34px;height:34px}
.gsaved{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(18,140,80,.92);color:#fff;border-radius:8px;padding:6px 8px;font-size:12px;font-weight:600}
.chipb{border:1px solid var(--a-line);background:var(--a-card);border-radius:99px;padding:5px 10px;font-size:11.5px;color:var(--a-ink2);font:inherit;cursor:pointer}
.chipb.on{border-color:var(--a-royal);background:var(--a-royal);color:#fff}
.acts.c3{grid-template-columns:1fr 1fr 1fr}
.mkacts{display:flex;gap:6px;flex-wrap:wrap}.mkacts .btn{flex:1;min-width:0;padding:6px 8px;font-size:12px}
.result.ok .ri{background:var(--a-green)}.result.bad .ri{background:var(--a-red)}
/* Number plate reader (SEC-02 / SEC-03) */
.pscan{display:flex;flex-direction:column;gap:10px}
.pview{position:relative;aspect-ratio:3/4;max-height:56vh;border-radius:12px;overflow:hidden;background:#0b1220;width:100%}
.pview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pbox{position:absolute;left:8%;right:8%;top:50%;aspect-ratio:4.5/1;transform:translateY(-50%);box-shadow:0 0 0 999px rgba(0,0,0,.45);border-radius:6px;z-index:1}
.pbox i{position:absolute;width:18px;height:18px;border:3px solid #39d98a}
.pbox i:nth-child(1){left:-2px;top:-2px;border-right:0;border-bottom:0}.pbox i:nth-child(2){right:-2px;top:-2px;border-left:0;border-bottom:0}
.pbox i:nth-child(3){left:-2px;bottom:-2px;border-right:0;border-top:0}.pbox i:nth-child(4){right:-2px;bottom:-2px;border-left:0;border-top:0}
.pview .gph{z-index:2}
.btn.on{border-color:var(--a-royal);color:var(--a-royal)}
.plate.big{font-size:30px;padding:16px 10px}
@media (orientation:landscape){.pview{aspect-ratio:16/9}.pbox{left:20%;right:20%}}
/* Calling lists (MAS-20 to MAS-27) */
.maptbl{display:flex;flex-direction:column;gap:6px}
.maptbl label{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;padding:8px 10px}
.maptbl label .mono{font-weight:700;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.maptbl label .small{grid-column:1;grid-row:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.maptbl select{grid-column:2;grid-row:1/3;min-width:0;width:100%;height:40px;border:1px solid var(--a-line);border-radius:8px;background:var(--a-card);color:var(--a-ink);font:inherit;font-size:12.5px;padding:0 8px}
table.cmp{width:100%;border-collapse:collapse;font-size:12px;background:var(--a-card);border:1px solid var(--a-line);border-radius:10px;overflow:hidden}
table.cmp th,table.cmp td{padding:7px 8px;border-bottom:1px solid var(--a-line);text-align:left;vertical-align:top}
table.cmp thead th{font-size:11px;color:var(--a-ink2);background:var(--a-bg2,#f3f5f9)}
table.cmp td.diff{background:#fff4e0;font-weight:600}
table.cmp input{width:100%;min-width:0;height:34px;border:1px solid var(--a-line);border-radius:7px;padding:0 6px;font:inherit;background:var(--a-card);color:var(--a-ink)}
.card.rule{display:block}
.apick{display:flex;align-items:center;padding-right:8px}.apick input{width:20px;height:20px}
.wachat{display:inline-flex;align-items:center;gap:4px;margin-left:8px;color:var(--a-green);font-weight:600;text-decoration:none}.wachat svg{width:14px;height:14px}