:root {
      --navy:#0F1C2E; --navy2:#16263D; --jem:#17B8C6; --jem2:#0E9DAA; --jemSoft:#E6F8FA;
      --pos:#059669; --posSoft:#DCFCE7; --neg:#DC2626; --negSoft:#FEE2E2;
      --warn:#D97706; --warnSoft:#FEF3C7; --blue:#2563EB; --blueSoft:#EFF6FF;
      --ink1:#0F172A; --ink2:#334155; --ink3:#64748B; --ink4:#94A3B8;
      --surf:#FFFFFF; --surf2:#F8FAFC; --surf3:#F1F5F9; --line:#E2E8F0; --line2:#CBD5E1;
      --r6:6px; --r10:10px; --r14:14px; --r18:18px; --r24:24px;
      --shadow:0 6px 22px rgba(15,23,42,.07); --shadow2:0 14px 40px rgba(15,23,42,.16);
      --side:248px;
      --font:'Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
      --accent-rgb:23,184,198; --accent2-rgb:14,157,170; --accent-soft-text:#9FE7EE; --accent-muted:#7FB7C0; --mark-ink:#06222a; --hero-stop:#1d3556;
    }
    * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
    html,body { height:100%; }
    body {
      margin:0; font-family:var(--font); color:var(--ink1); background:var(--surf2);
      font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
    }
    h1,h2,h3,h4 { margin:0; font-weight:800; letter-spacing:-.01em; }
    p { margin:0; }
    button,input,select,textarea { font:inherit; color:inherit; }
    button { border:0; border-radius:var(--r10); cursor:pointer; font-weight:700; min-height:44px; }
    button:disabled { cursor:not-allowed; opacity:.5; }
    input,select,textarea {
      width:100%; min-height:46px; border:1.5px solid var(--line); border-radius:var(--r10);
      padding:11px 13px; background:var(--surf); color:var(--ink1); transition:border-color .15s, box-shadow .15s;
    }
    input:focus,select:focus,textarea:focus { outline:0; border-color:var(--jem); box-shadow:0 0 0 4px var(--jemSoft); }
    textarea { min-height:90px; resize:vertical; line-height:1.5; }
    label { font-weight:700; font-size:13.5px; color:var(--ink2); }
    .ico { display:inline-flex; align-items:center; justify-content:center; }
    .ico svg { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

    /* ---------- App shell ---------- */
    .shell { display:flex; min-height:100vh; }
    .sidebar {
      width:var(--side); flex:0 0 var(--side); background:var(--navy);
      color:#CBD5E1; position:fixed; inset:0 auto 0 0; padding:18px 14px; display:none;
      flex-direction:column; gap:4px; z-index:30; overflow-y:auto;
    }
    .brand { display:flex; align-items:center; gap:11px; padding:6px 8px 16px; }
    .brand .mark { width:40px; height:40px; border-radius:11px; background:linear-gradient(135deg,var(--jem),var(--jem2)); display:grid; place-items:center; color:var(--mark-ink); font-size:20px; flex:0 0 auto; box-shadow:0 6px 16px rgba(var(--accent-rgb),.35); }
    .brand b { color:#fff; font-size:15px; display:block; line-height:1.15; }
    .brand span { font-size:11px; color:var(--accent-muted); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
    .nav-group-label { font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:#5B7186; font-weight:800; padding:14px 10px 6px; }
    .navlink { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:transparent; color:#AEC0D2; padding:11px 12px; border-radius:11px; font-weight:700; font-size:14px; min-height:46px; transition:background .15s,color .15s; }
    .navlink .ico { font-size:19px; flex:0 0 auto; color:var(--accent-muted); }
    .navlink:hover { background:#1B2C45; color:#fff; }
    .navlink.active { background:linear-gradient(90deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.05)); color:#fff; box-shadow:inset 3px 0 0 var(--jem); }
    .navlink.active .ico { color:var(--jem); }
    .side-foot { margin-top:auto; padding:14px 10px 4px; font-size:11px; color:#5B7186; }
    .side-foot b { color:var(--accent-soft-text); font-weight:800; }

    .content { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
    .mobiletop { background:var(--navy); color:#fff; padding:14px 16px calc(14px + env(safe-area-inset-bottom,0)); position:sticky; top:0; z-index:20; }
    .mobiletop .row1 { display:flex; align-items:center; gap:11px; }
    .mobiletop .mark { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--jem),var(--jem2)); display:grid; place-items:center; color:var(--mark-ink); font-size:18px; flex:0 0 auto; }
    .mobiletop b { font-size:15px; line-height:1.1; }
    .mobiletop .sub { color:var(--accent-soft-text); font-size:11px; font-weight:700; }
    main { flex:1 1 auto; padding:16px; padding-bottom:96px; max-width:1180px; width:100%; margin:0 auto; }

    /* ---------- Bottom nav (mobile) ---------- */
    .bottomnav {
      position:fixed; left:0; right:0; bottom:0; z-index:40; background:rgba(255,255,255,.94);
      backdrop-filter:saturate(160%) blur(10px); border-top:1px solid var(--line);
      display:grid; grid-template-columns:repeat(5,1fr); padding-bottom:env(safe-area-inset-bottom,0);
    }
    .bnav { background:transparent; border-radius:0; min-height:60px; display:grid; place-items:center; gap:2px; color:var(--ink3); font-size:10.5px; font-weight:700; padding:7px 2px; }
    .bnav .ico { font-size:21px; }
    .bnav.active { color:var(--jem2); }
    .bnav.active .ico { transform:translateY(-1px); }
    .bnav.newbtn { color:#fff; }
    .bnav.newbtn .ico { width:42px; height:42px; border-radius:13px; background:linear-gradient(135deg,var(--jem),var(--jem2)); color:#fff; font-size:22px; box-shadow:0 6px 16px rgba(var(--accent-rgb),.4); margin-top:-10px; }
    .bnav.newbtn span { color:var(--ink3); }

    /* ---------- Hero ---------- */
    .hero { position:relative; overflow:hidden; border-radius:var(--r18); padding:22px; color:#fff;
      background:radial-gradient(120% 140% at 100% 0%, var(--hero-stop) 0%, var(--navy) 55%); box-shadow:var(--shadow); margin-bottom:16px; }
    .hero::after { content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.35),transparent 65%); pointer-events:none; }
    .hero .eyebrow { display:inline-flex; align-items:center; gap:7px; background:rgba(var(--accent-rgb),.18); color:var(--accent-soft-text); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
    .hero h1 { font-size:23px; margin:11px 0 4px; }
    .hero .lede { color:#C6D6E6; font-size:13.5px; max-width:560px; }
    .hero-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px; position:relative; z-index:1; }
    .hero-loc { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:11px; padding:4px 6px 4px 12px; }
    .hero-loc .ico { color:var(--jem); font-size:17px; }
    .hero-loc select { min-height:36px; background:transparent; border:0; color:#fff; font-weight:800; width:auto; padding:6px 8px; }
    .hero-loc select:focus { box-shadow:none; }
    .hero-loc option { color:var(--ink1); }
    .hero-date { display:inline-flex; align-items:center; gap:8px; color:#C6D6E6; font-size:13px; font-weight:700; }
    .hero-date .ico { color:var(--jem); font-size:16px; }

    /* ---------- Cards / sections ---------- */
    .card { background:var(--surf); border:1px solid var(--line); border-radius:var(--r14); padding:16px; box-shadow:var(--shadow); }
    .card + .card { margin-top:14px; }
    .sec { margin-bottom:18px; }
    .sec-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
    .sec-head h2 { font-size:16.5px; display:flex; align-items:center; gap:9px; }
    .sec-head h2 .ico { color:var(--jem2); font-size:19px; }
    .sec-head .link { background:transparent; color:var(--jem2); font-weight:800; font-size:13px; padding:8px 10px; display:inline-flex; align-items:center; gap:5px; }
    .muted { color:var(--ink3); font-size:13px; }
    .tiny { font-size:11.5px; color:var(--ink4); }
    hr { border:0; border-top:1px solid var(--line); margin:16px 0; }

    /* ---------- Quick action cards ---------- */
    .quickgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .qcard { text-align:left; background:var(--surf); border:1px solid var(--line); border-radius:var(--r14); padding:15px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:9px; min-height:0; position:relative; overflow:hidden; transition:transform .12s, box-shadow .12s, border-color .12s; }
    .qcard:hover { transform:translateY(-2px); box-shadow:var(--shadow2); border-color:var(--line2); }
    .qcard:active { transform:translateY(0); }
    .qcard .qicon { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:23px; color:#fff; flex:0 0 auto; }
    .qcard h3 { font-size:15.5px; }
    .qcard p { font-size:12.5px; color:var(--ink3); line-height:1.4; }
    .qcard .cta { margin-top:auto; color:var(--jem2); font-weight:800; font-size:12.5px; display:inline-flex; align-items:center; gap:5px; }
    .qcard .cta .ico { font-size:15px; }

    /* ---------- Metric cards ---------- */
    .metricgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
    .metric { background:var(--surf); border:1px solid var(--line); border-radius:var(--r14); padding:13px; box-shadow:var(--shadow); display:flex; align-items:center; gap:12px; }
    .metric .mi { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:21px; flex:0 0 auto; }
    .metric b { font-size:25px; line-height:1; color:var(--navy); display:block; }
    .metric span { font-size:11.5px; color:var(--ink3); font-weight:800; text-transform:uppercase; letter-spacing:.03em; }

    /* ---------- Badges ---------- */
    .badge { display:inline-flex; align-items:center; gap:6px; min-height:26px; border-radius:999px; padding:4px 11px; font-size:12px; font-weight:800; background:var(--surf3); color:var(--ink2); border:1px solid var(--line); }
    .badge .ico { font-size:14px; }
    .badge.accept,.badge.pos { background:var(--posSoft); color:#047857; border-color:#A7F3D0; }
    .badge.accept_with_notes,.badge.warn { background:var(--warnSoft); color:#B45309; border-color:#FDE68A; }
    .badge.route_to_rl,.badge.info { background:var(--blueSoft); color:#1D4ED8; border-color:#BFDBFE; }
    .badge.reject,.badge.neg { background:var(--negSoft); color:#B91C1C; border-color:#FECACA; }
    .badge.draft { background:var(--surf3); color:var(--ink3); }
    .badge.jem { background:var(--jemSoft); color:var(--jem2); border-color:#A7E8EF; }
    .tagrow { display:flex; flex-wrap:wrap; gap:6px; }
    .tag { font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--surf3); color:var(--ink2); border:1px solid var(--line); }
    .tag.red { background:var(--negSoft); color:#B91C1C; border-color:#FECACA; }
    .tag.amber { background:var(--warnSoft); color:#B45309; border-color:#FDE68A; }
    .tag.blue { background:var(--blueSoft); color:#1D4ED8; border-color:#BFDBFE; }

    /* ---------- Alerts ---------- */
    .alert { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-left:4px solid var(--ink3); background:var(--surf3); padding:11px 13px; border-radius:var(--r10); margin:10px 0; font-size:13px; }
    .alert .ico { font-size:18px; flex:0 0 auto; margin-top:1px; }
    .alert b { display:block; margin-bottom:1px; }
    .alert.critical { border-left-color:var(--neg); background:var(--negSoft); color:#7F1D1D; } .alert.critical .ico { color:var(--neg); }
    .alert.warning { border-left-color:var(--warn); background:var(--warnSoft); color:#78350F; } .alert.warning .ico { color:var(--warn); }
    .alert.info { border-left-color:var(--blue); background:var(--blueSoft); color:#1E3A8A; } .alert.info .ico { color:var(--blue); }
    .alert.success { border-left-color:var(--pos); background:var(--posSoft); color:#065F46; } .alert.success .ico { color:var(--pos); }
    .alert.netsuite { border-left-color:var(--jem2); background:var(--jemSoft); color:#0B5560; } .alert.netsuite .ico { color:var(--jem2); }

    /* ---------- Buttons ---------- */
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; min-height:46px; border-radius:var(--r10); font-weight:800; font-size:14px; }
    .btn .ico { font-size:17px; }
    .btn.primary { background:linear-gradient(135deg,var(--jem),var(--jem2)); color:#fff; box-shadow:0 6px 16px rgba(var(--accent2-rgb),.28); }
    .btn.primary:hover:not(:disabled) { filter:brightness(1.04); }
    .btn.dark { background:var(--navy); color:#fff; }
    .btn.ghost { background:var(--surf); color:var(--navy); border:1.5px solid var(--line); }
    .btn.ghost:hover { border-color:var(--line2); }
    .btn.soft { background:var(--jemSoft); color:var(--jem2); }
    .btn.danger { background:var(--negSoft); color:var(--neg); }
    .btn.block { width:100%; }
    .btnrow { display:flex; gap:9px; flex-wrap:wrap; }

    .field { margin-bottom:13px; }
    .field label { display:block; margin-bottom:6px; }
    .req { color:var(--neg); }
    .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
    .subcard { border:1px solid var(--line); border-radius:var(--r10); padding:13px; background:var(--surf2); }
    .subcard + .subcard { margin-top:11px; }
    .subcard > .lbl { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); display:flex; align-items:center; gap:7px; margin-bottom:10px; }
    .subcard > .lbl .ico { color:var(--jem2); font-size:15px; }

    /* ---------- Stepper ---------- */
    .stepper { display:flex; align-items:center; gap:0; margin:4px 0 2px; }
    .stepdot { flex:1 1 0; text-align:center; position:relative; }
    .stepdot .num { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; margin:0 auto; background:var(--surf3); color:var(--ink3); font-weight:800; font-size:13px; border:2px solid var(--line); position:relative; z-index:1; }
    .stepdot .lbl2 { font-size:11px; font-weight:800; color:var(--ink3); margin-top:5px; }
    .stepdot::before { content:""; position:absolute; top:15px; left:-50%; right:50%; height:2px; background:var(--line); }
    .stepdot:first-child::before { display:none; }
    .stepdot.done .num { background:var(--pos); color:#fff; border-color:var(--pos); }
    .stepdot.done::before { background:var(--pos); }
    .stepdot.active .num { background:var(--jem2); color:#fff; border-color:var(--jem2); box-shadow:0 0 0 4px var(--jemSoft); }
    .stepdot.active .lbl2 { color:var(--jem2); }
    .stepdot.active::before { background:var(--jem2); }

    /* selectable tiles */
    .tiles { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
    .tile { text-align:left; background:var(--surf); border:1.5px solid var(--line); border-radius:var(--r10); padding:13px; display:flex; align-items:center; gap:10px; font-weight:800; font-size:13.5px; color:var(--ink2); min-height:56px; }
    .tile .ico { font-size:19px; color:var(--ink3); }
    .tile:hover { border-color:var(--line2); }
    .tile.active { border-color:var(--jem2); background:var(--jemSoft); color:var(--navy); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); }
    .tile.active .ico { color:var(--jem2); }

    /* ---------- Item summary card ---------- */
    .itemcard { border:1px solid var(--line); border-radius:var(--r10); padding:13px; background:linear-gradient(180deg,#fff,var(--surf2)); }
    .itemcard .top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
    .itemcard .sku { font-size:17px; font-weight:900; color:var(--navy); }
    .itemcard .desc { font-size:13px; color:var(--ink2); margin-top:2px; }
    .itemcard .meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
    .chip-stat { font-size:11.5px; font-weight:800; color:var(--ink2); background:var(--surf3); border:1px solid var(--line); border-radius:8px; padding:5px 9px; }
    .chip-stat b { color:var(--navy); }

    /* ---------- Checklist ---------- */
    .checkcompletion { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
    .check-item { padding:12px 0; border-top:1px dashed var(--line); }
    .check-item:first-child { border-top:0; }
    .check-item > .q { display:block; font-weight:700; font-size:14px; margin-bottom:9px; color:var(--ink1); }
    .seg { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
    .seg button { background:var(--surf); color:var(--ink2); border:1.5px solid var(--line); font-size:13px; font-weight:800; min-height:42px; }
    .seg button:hover { border-color:var(--line2); }
    .seg button.active.pass { background:var(--posSoft); color:#047857; border-color:#6EE7B7; }
    .seg button.active.fail { background:var(--negSoft); color:#B91C1C; border-color:#FCA5A5; }
    .seg button.active.na { background:var(--surf3); color:var(--ink2); border-color:var(--line2); }
    .notewrap { margin-top:9px; }
    .notewrap input { background:#FFFDF5; border-color:#FDE68A; }

    /* ---------- Photo center ---------- */
    .chips { display:flex; flex-wrap:wrap; gap:7px; }
    .pchip { background:var(--surf); border:1.5px solid var(--line); border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:800; color:var(--ink2); min-height:38px; display:inline-flex; align-items:center; gap:6px; }
    .pchip:hover { border-color:var(--jem); }
    .pchip.active { background:var(--jem2); color:#fff; border-color:var(--jem2); }
    .photos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
    .photo { border:1px solid var(--line); border-radius:var(--r10); overflow:hidden; background:#fff; box-shadow:var(--shadow); }
    .photo .thumb { position:relative; cursor:pointer; }
    .photo img { display:block; width:100%; aspect-ratio:1.25; object-fit:cover; background:var(--surf3); }
    .photo .pbadges { position:absolute; left:7px; top:7px; display:flex; gap:5px; flex-wrap:wrap; }
    .photo .pbadges .b { font-size:10px; font-weight:800; padding:3px 7px; border-radius:7px; background:rgba(15,28,46,.82); color:#fff; backdrop-filter:blur(4px); }
    .photo .pbadges .b.dmg { background:rgba(220,38,38,.92); }
    .photo .pbadges .b.ser { background:rgba(37,99,235,.92); }
    .photo .pbody { padding:10px; display:grid; gap:7px; }
    .photo .pbody input { min-height:38px; padding:8px 10px; font-size:13px; }
    .photo .evrow { display:flex; gap:6px; }
    .photo .evrow button { flex:1; min-height:36px; font-size:11.5px; background:var(--surf2); color:var(--ink2); border:1px solid var(--line); }
    .photo .evrow button.on.dmg { background:var(--negSoft); color:var(--neg); border-color:#FCA5A5; }
    .photo .evrow button.on.ser { background:var(--blueSoft); color:var(--blue); border-color:#BFDBFE; }
    .photo .pfoot { display:flex; gap:6px; align-items:center; }
    .photo .pfoot .ts { font-size:10.5px; color:var(--ink4); margin-right:auto; }
    .photo .pfoot button { min-height:34px; padding:0 10px; font-size:11.5px; }
    .refstrip { display:flex; gap:9px; overflow-x:auto; padding:4px 0 2px; }
    .refstrip .rphoto { flex:0 0 96px; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; }
    .refstrip .rphoto img { width:100%; height:78px; object-fit:cover; background:var(--surf3); }
    .refstrip .rphoto div { padding:5px 6px; font-size:10px; color:var(--ink3); font-weight:700; }

    /* ---------- AI assistant ---------- */
    .ai-card { border:1px solid var(--line); border-radius:var(--r10); padding:13px; background:#FBFEFF; }
    .ai-card h4 { font-size:14px; color:var(--navy); margin-bottom:7px; }
    .confidence { height:9px; border-radius:999px; background:var(--surf3); overflow:hidden; margin:6px 0; }
    .confidence span { display:block; height:100%; background:linear-gradient(90deg,var(--warn),var(--jem),var(--pos)); }
    .ai-grid { display:grid; gap:9px; margin-top:10px; }
    .ai-grid > div { border:1px solid var(--line); border-radius:9px; padding:10px; background:#fff; }
    .ai-grid strong { font-size:12.5px; color:var(--navy); }
    .ai-grid p { margin-top:3px; }

    /* ---------- Review summary ---------- */
    .resultbanner { border-radius:var(--r14); padding:16px; display:flex; gap:13px; align-items:center; color:#fff; }
    .resultbanner .ri { width:48px; height:48px; border-radius:13px; background:rgba(255,255,255,.2); display:grid; place-items:center; font-size:26px; flex:0 0 auto; }
    .resultbanner h3 { font-size:18px; }
    .resultbanner p { font-size:12.5px; opacity:.92; margin-top:2px; }
    .summary-list { display:grid; gap:0; }
    .summary-list .li { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
    .summary-list .li:last-child { border-bottom:0; }
    .summary-list .li .k { color:var(--ink3); font-weight:700; }
    .summary-list .li .v { font-weight:800; text-align:right; color:var(--ink1); }
    .decision-options { display:grid; gap:8px; }
    .decision-options button { text-align:left; padding:13px; border:1.5px solid var(--line); background:var(--surf); color:var(--ink1); display:flex; align-items:center; gap:10px; font-weight:800; font-size:13.5px; }
    .decision-options button .ico { font-size:18px; color:var(--ink3); }
    .decision-options button.active { border-color:var(--jem2); background:var(--jemSoft); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); }

    /* ---------- Sticky step bar ---------- */
    .stepbar { position:sticky; bottom:0; z-index:15; display:flex; gap:10px; background:linear-gradient(180deg,transparent,var(--surf2) 30%); padding:12px 0 4px; margin-top:16px; }
    .stepbar .btn { flex:1; }
    .stepbar .btn.primary { flex:2; }

    /* ---------- History / activity ---------- */
    .actrow { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--r10); background:#fff; margin-bottom:9px; box-shadow:var(--shadow); }
    .actrow:hover { border-color:var(--line2); }
    .actrow .ai2 { width:40px; height:40px; border-radius:11px; background:var(--surf3); display:grid; place-items:center; color:var(--jem2); font-size:18px; flex:0 0 auto; }
    .actrow .body { flex:1; min-width:0; }
    .actrow .body .t1 { font-weight:800; font-size:14px; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .actrow .body .t2 { font-size:12px; color:var(--ink3); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .actrow .end { text-align:right; flex:0 0 auto; }
    .insp-card { border:1px solid var(--line); border-radius:var(--r14); padding:14px; background:#fff; box-shadow:var(--shadow); margin-bottom:11px; }
    .insp-card .ic-top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
    .insp-card h3 { font-size:15px; color:var(--navy); }
    .insp-card .ic-meta { font-size:12.5px; color:var(--ink3); margin:5px 0 9px; }
    .filterbar { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:11px 0; }

    /* ---------- Search field ---------- */
    .searchbox { position:relative; }
    .searchbox .ico { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink4); font-size:19px; pointer-events:none; }
    .searchbox input { padding-left:44px; min-height:52px; font-size:15px; border-radius:var(--r14); }

    /* suggestions */
    .suggestions { position:relative; }
    .suggestions ul { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 5px); margin:0; padding:6px; list-style:none; background:#fff; border:1px solid var(--line); border-radius:var(--r10); box-shadow:var(--shadow2); max-height:320px; overflow-y:auto; }
    .suggestions li + li { margin-top:3px; }
    .suggestions button { width:100%; text-align:left; background:#fff; border-radius:8px; padding:10px; color:var(--ink1); font-weight:700; }
    .suggestions button:hover { background:var(--surf2); }
    .suggestions .s2 { font-weight:600; font-size:12px; color:var(--ink3); display:block; margin-top:2px; }

    /* ---------- Empty states ---------- */
    .empty { text-align:center; padding:34px 18px; color:var(--ink3); }
    .empty .ei { width:60px; height:60px; border-radius:16px; background:var(--surf3); display:grid; place-items:center; margin:0 auto 13px; font-size:28px; color:var(--ink4); }
    .empty h3 { font-size:15px; color:var(--ink2); margin-bottom:5px; }
    .empty p { font-size:13px; max-width:360px; margin:0 auto 14px; }

    /* ---------- Guide ---------- */
    .guidegrid { display:grid; grid-template-columns:1fr; gap:12px; }
    .guide { border:1px solid var(--line); border-radius:var(--r14); background:#fff; box-shadow:var(--shadow); overflow:hidden; }
    .guide .gh { display:flex; align-items:center; gap:11px; padding:14px; border-bottom:1px solid var(--line); }
    .guide .gh .gi { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:21px; flex:0 0 auto; }
    .guide .gh h3 { font-size:15px; color:var(--navy); }
    .guide .gh .cat { font-size:11px; font-weight:800; color:var(--ink3); text-transform:uppercase; letter-spacing:.04em; }
    .guide .gb { padding:14px; display:grid; gap:11px; }
    .guide .blk .bl-h { font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink3); display:flex; align-items:center; gap:6px; margin-bottom:5px; }
    .guide .blk ul { margin:0; padding-left:18px; font-size:13px; color:var(--ink2); }
    .guide .blk li { margin:2px 0; }
    .guide .rec { background:var(--jemSoft); border-radius:9px; padding:10px; font-size:13px; color:#0B5560; font-weight:700; }

    /* ---------- Reference library ---------- */
    .reflib-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
    .reflib-item { border:1px solid var(--line); border-radius:var(--r14); background:#fff; box-shadow:var(--shadow); overflow:hidden; text-align:left; }
    .reflib-item .cover { height:120px; background:var(--surf3); position:relative; }
    .reflib-item .cover img { width:100%; height:100%; object-fit:cover; }
    .reflib-item .cover .cnt { position:absolute; right:8px; bottom:8px; background:rgba(15,28,46,.85); color:#fff; font-size:11px; font-weight:800; padding:4px 9px; border-radius:8px; }
    .reflib-item .rb { padding:11px; }
    .reflib-item .rb .sku { font-weight:900; color:var(--navy); font-size:14px; }
    .reflib-item .rb .br { font-size:12px; color:var(--ink3); }
    .gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
    .gphoto { border:1px solid var(--line); border-radius:var(--r10); overflow:hidden; background:#fff; box-shadow:var(--shadow); }
    .gphoto img { width:100%; aspect-ratio:1.2; object-fit:cover; background:var(--surf3); cursor:pointer; }
    .gphoto .gp { padding:9px; }
    .gphoto .gp .gl { font-weight:800; font-size:12.5px; color:var(--navy); }
    .gphoto .gp .gm { font-size:11px; color:var(--ink3); margin-top:2px; }

    /* ---------- Detail drawer ---------- */
    .drawer { position:fixed; inset:0; z-index:60; }
    .drawer .backdrop { position:absolute; inset:0; background:rgba(15,23,42,.5); backdrop-filter:blur(2px); animation:fade .2s ease; }
    .drawer .panel { position:absolute; inset:0; background:var(--surf2); overflow-y:auto; animation:slideup .25s ease; }
    .drawer .dh { position:sticky; top:0; z-index:2; background:var(--navy); color:#fff; padding:15px 16px; display:flex; align-items:center; gap:11px; }
    .drawer .dh .ico { font-size:20px; }
    .drawer .dh h2 { font-size:16px; flex:1; }
    .drawer .dh .close { background:rgba(255,255,255,.14); color:#fff; width:38px; height:38px; min-height:38px; border-radius:10px; display:grid; place-items:center; }
    .drawer .dbody { padding:16px; padding-bottom:40px; max-width:760px; margin:0 auto; }
    @keyframes slideup { from { transform:translateY(18px); opacity:.4; } to { transform:translateY(0); opacity:1; } }
    @keyframes fade { from { opacity:0; } to { opacity:1; } }
    .detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
    .detail-grid .d { background:#fff; border:1px solid var(--line); border-radius:9px; padding:9px 11px; }
    .detail-grid .d strong { font-size:10.5px; color:var(--ink3); text-transform:uppercase; letter-spacing:.04em; display:block; }
    .detail-grid .d span { font-weight:700; color:var(--ink1); overflow-wrap:anywhere; font-size:13px; }

    /* ---------- Modal / lightbox ---------- */
    .modal { position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:18px; }
    .modal .backdrop { position:absolute; inset:0; background:rgba(15,23,42,.72); animation:fade .15s ease; }
    .modal .box { position:relative; background:#fff; border-radius:var(--r14); max-width:560px; width:100%; box-shadow:var(--shadow2); animation:slideup .2s ease; overflow:hidden; }
    .modal .box .mh { padding:15px 16px; border-bottom:1px solid var(--line); font-weight:900; font-size:16px; color:var(--navy); }
    .modal .box .mb { padding:16px; }
    .modal .box .mf { padding:13px 16px; border-top:1px solid var(--line); display:flex; gap:9px; justify-content:flex-end; background:var(--surf2); }
    .lightbox { position:fixed; inset:0; z-index:75; display:grid; place-items:center; padding:20px; }
    .lightbox .backdrop { position:absolute; inset:0; background:rgba(8,12,20,.92); }
    .lightbox .lb { position:relative; max-width:100%; max-height:100%; text-align:center; }
    .lightbox img { max-width:100%; max-height:82vh; border-radius:12px; box-shadow:var(--shadow2); }
    .lightbox .cap { color:#fff; margin-top:12px; font-weight:700; }
    .lightbox .x { position:absolute; right:-6px; top:-44px; background:rgba(255,255,255,.16); color:#fff; width:40px; height:40px; min-height:40px; border-radius:11px; display:grid; place-items:center; }
    .cmp { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .cmp .col h4 { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink3); margin-bottom:7px; }
    .cmp img { width:100%; border-radius:10px; aspect-ratio:1; object-fit:cover; background:var(--surf3); }
    .cmp .sel { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
    .cmp .sel button { min-height:34px; padding:0 10px; font-size:11px; background:var(--surf2); border:1px solid var(--line); color:var(--ink2); }
    .cmp .sel button.on { background:var(--jem2); color:#fff; border-color:var(--jem2); }

    /* ---------- Toasts ---------- */
    .toasts { position:fixed; left:0; right:0; bottom:78px; z-index:90; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 16px; }
    .toast { pointer-events:auto; background:var(--navy); color:#fff; padding:12px 16px; border-radius:12px; box-shadow:var(--shadow2); font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:10px; max-width:440px; animation:slideup .2s ease; }
    .toast .ico { font-size:18px; }
    .toast.success { background:#065F46; } .toast.success .ico { color:#6EE7B7; }
    .toast.error { background:#7F1D1D; } .toast.error .ico { color:#FCA5A5; }
    .toast.info .ico { color:var(--jem); }

    .more-list { display:grid; gap:11px; }

    /* ---------- Desktop ---------- */
    @media (min-width:900px) {
      .sidebar { display:flex; }
      .content { margin-left:var(--side); }
      .mobiletop { display:none; }
      .bottomnav { display:none; }
      main { padding:26px 30px 40px; }
      .quickgrid { grid-template-columns:repeat(3,1fr); }
      .metricgrid { grid-template-columns:repeat(3,1fr); }
      .photos { grid-template-columns:repeat(3,minmax(0,1fr)); }
      .ai-grid { grid-template-columns:repeat(2,1fr); }
      .guidegrid { grid-template-columns:repeat(2,1fr); }
      .reflib-grid { grid-template-columns:repeat(4,1fr); }
      .gallery { grid-template-columns:repeat(4,1fr); }
      .filterbar { grid-template-columns:repeat(4,1fr); }
      .hero h1 { font-size:27px; }
      .toasts { bottom:24px; }
      .drawer .panel { inset:0 0 0 auto; width:560px; box-shadow:var(--shadow2); animation:slidein .25s ease; }
      @keyframes slidein { from { transform:translateX(40px); opacity:.5; } to { transform:translateX(0); opacity:1; } }
      .split { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:start; }
    }
    @media (min-width:1280px) {
      .reflib-grid { grid-template-columns:repeat(5,1fr); }
    }

    /* ---------- Print ---------- */
    .print-report { display:none; }
    @media print {
      @page { margin:14mm; }
      .shell, .bottomnav, .toasts, .drawer, .modal, .lightbox { display:none !important; }
      html, body { background:#fff !important; margin:0 !important; height:auto !important; }
      .print-report { display:block; font-family:Arial,Helvetica,sans-serif; color:#111827; font-size:11px; line-height:1.42; }
      .print-report * { box-sizing:border-box; }
      .pr-head { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:3px solid #0F1C2E; padding-bottom:10px; margin-bottom:14px; }
      .pr-head img { height:46px; width:auto; max-width:240px; object-fit:contain; }
      .pr-head .pr-title { text-align:right; }
      .pr-head .pr-title h1 { font-size:17px; margin:0; color:#0F1C2E; letter-spacing:.3px; }
      .pr-head .pr-title .sub { font-size:9.5px; color:#6B7280; margin-top:2px; }
      .pr-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 22px; margin-bottom:12px; }
      .pr-grid .cell { font-size:11px; }
      .pr-grid .cell b { color:#6B7280; }
      .pr-section { margin-bottom:12px; page-break-inside:avoid; }
      .pr-section h2 { font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:#0F1C2E; border-bottom:1px solid #D1D5DB; padding-bottom:3px; margin:0 0 6px; }
      .pr-action { border-left:4px solid #0E9DAA; background:#F1FAFB; padding:8px 11px; }
      .pr-action .lbl { font-size:13px; font-weight:bold; color:#0F1C2E; }
      .pr-action div { margin-top:2px; }
      table.pr-check { width:100%; border-collapse:collapse; font-size:10px; }
      table.pr-check td { border:1px solid #E5E7EB; padding:3px 7px; vertical-align:top; }
      table.pr-check td.s { width:52px; font-weight:bold; text-align:center; }
      .s-ok { color:#047857; } .s-issue { color:#B91C1C; } .s-na { color:#6B7280; }
      .pr-photos { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
      .pr-photos figure { margin:0; page-break-inside:avoid; }
      .pr-photos img { width:100%; height:92px; object-fit:cover; border:1px solid #CBD5E1; display:block; }
      .pr-noimg { width:100%; height:92px; border:1px dashed #CBD5E1; display:flex; align-items:center; justify-content:center; font-size:8px; color:#9CA3AF; background:#F9FAFB; }
      .pr-photos figcaption { font-size:8px; color:#374151; margin-top:2px; line-height:1.25; }
      .pr-sign { margin-top:20px; display:flex; justify-content:space-between; gap:24px; font-size:10px; }
      .pr-sign .line { border-top:1px solid #111827; flex:1; padding-top:3px; }
      .pr-foot { margin-top:14px; padding-top:8px; border-top:1px solid #D1D5DB; font-size:9px; color:#6B7280; }
    }
  
    /* ---------- Hub themes ---------- */
    body[data-theme="uk"] {
      --navy:#23264F; --navy2:#2D326E; --jem:#3A3F86; --jem2:#2D326E; --jemSoft:#E9EAF6;
      --accent-rgb:58,63,134; --accent2-rgb:45,50,110; --accent-soft-text:#C2C5EC; --accent-muted:#8A8FC4;
      --mark-ink:#FFFFFF; --hero-stop:#34386F;
    }
    body[data-theme="fast"] {
      --navy:#1C2C5E; --navy2:#253C7B; --jem:#E8A11E; --jem2:#C8881A; --jemSoft:#FBF1DA;
      --accent-rgb:232,161,30; --accent2-rgb:200,136,26; --accent-soft-text:#F6CF8A; --accent-muted:#C9A765;
      --mark-ink:#16203F; --hero-stop:#2A3E72;
    }
    /* keep text readable on the gold FAST accent */
    body[data-theme="fast"] .btn.primary { color:#16203F; }
    body[data-theme="fast"] .btn.primary .ico { color:#16203F; }
    body[data-theme="fast"] .bnav.newbtn .ico { color:#16203F; }
    body[data-theme="fast"] .stepdot.active .num { color:#16203F; }
    body[data-theme="fast"] .hero .eyebrow { color:#5A4410; }
    /* smooth recolor when hub changes */
    .sidebar, .mobiletop, .hero, .btn.primary, .bnav.newbtn .ico, .brand .mark, .navlink.active { transition:background .25s ease, color .25s ease, box-shadow .25s ease; }

/* ============================================================
   Supplemental: auth shell (login screen + real topbar/hub/who)
   These coexist with the richer design system above; scoped to
   avoid clobbering .brand/.sidebar/.content used by the app shell.
   ============================================================ */
.login{min-height:100vh;display:grid;place-items:center;padding:18px;background:radial-gradient(120% 120% at 100% 0,#1d3556,var(--navy))}
.login-card{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:400px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.login-card .brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:0}
.login-card .brand .mark{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--jem),var(--jem2));color:#06222a;display:grid;place-items:center;font-weight:900;font-size:13px}
.login-card .brand b{display:block;font-size:14px;color:var(--ink1)}
.login-card .brand span{font-size:11px;color:var(--ink3);font-weight:700}

#appView{display:flex;min-height:100vh}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:10}
.tb-title{font-weight:800;font-size:16px}
.tb-right{display:flex;align-items:center;gap:8px}
.hub{min-height:36px;width:auto;padding:6px 10px;font-weight:700}
.who{font-size:12px;color:var(--ink3);font-weight:700}

.toast.pos{background:#065f46}
.toast.neg{background:#7f1d1d}

/* Utility used throughout index.html/app.js to toggle visibility (login/app view, error boxes, etc.) — must come after everything else so it always wins. */
.hidden{display:none!important}

/* Missing pieces used by app.js but not present in the original single-page prototype's CSS. */
.btn.sm{min-height:34px;padding:0 12px;font-size:12.5px}
.list-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:none}
.list-row .b{flex:1;min-width:0}
.suggestions{position:relative}
#itemSuggest{position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;border:1px solid var(--line);border-radius:var(--r10);box-shadow:0 12px 28px rgba(0,0,0,.12);max-height:260px;overflow:auto;margin-top:4px}
.sugg{display:block;width:100%;text-align:left;padding:9px 12px;font-size:13px;border:none;background:none;border-bottom:1px solid var(--line)}
.sugg:last-child{border-bottom:none}
.sugg:hover{background:var(--surf)}

/* reference stylesheet already handles .sidebar/.content/.bottomnav breakpoints and print via .shell — add #appView to those exclusions since this app uses #appView instead of .shell as the outer wrapper. */
@media print{ #appView{display:none!important} }