/* MoveDefense desktop glass. One liquid-glass material for the desktop workspace:
   floating chrome, light that catches the edges, droplets that mark the selected
   and hovered item, and an iridescent bubble on the primary action.
   Loaded last, after desktop-workspace.css and documents.css, with the same
   min-width:760px media, so the phone layout never sees it. Report pages keep
   their white paper palette.
   Rules inside the workspace start with `body.desktop-app-active #app` so they
   outrank the class-only desktop rules they replace without !important.
   Every color is a token. Dark is the default; desktop-glass.js sets
   html[data-md-theme="light"] for Light, or for System when the computer is light. */
@property --g-film{syntax:'<angle>';inherits:true;initial-value:0deg}

/* ---------- Theme tokens ---------- */
body.desktop-app-active,
body:has(#screen-auth.is-active){
  color-scheme:dark;
  --void:#04060C;
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.075);
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.17);
  --text:#F2F5FB;
  --text-2:#B4BED2;
  --text-3:#8592A9;
  --cyan:#6CEBDF;
  --cyan-deep:#19B8C9;
  --amber:#FFB862;
  --f-display:'Hanken Grotesk',system-ui,sans-serif;
  --f-body:'Hanken Grotesk',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --desktop-gutter:4px;

  --g-ink:#F4F7FC;
  --g-text:#DCE3EF;
  --g-text-2:#AAB5C9;
  --g-text-3:#8592A9;
  --g-accent:#6CEBDF;
  --g-accent-strong:#B4FBF4;
  --g-accent-tint:rgba(108,235,223,.12);
  --g-accent-ring:rgba(108,235,223,.24);
  --g-brand:#5CEBDD;
  --g-brand-glow:rgba(63,224,206,.35);
  --g-ok:#5FE0A0;
  --g-warn:#FFC36B;
  --g-bad:#FF8F86;
  --g-bad-line:rgba(255,143,134,.3);
  --g-bad-fill:rgba(255,143,134,.08);
  --g-note-ink:#FFE2B8;
  --g-note-line:rgba(255,195,107,.22);
  --g-note-fill:rgba(255,195,107,.08);
  --g-ok-line:rgba(95,224,160,.22);
  --g-ok-fill:rgba(95,224,160,.06);
  --g-backdrop:
    radial-gradient(1100px 760px at -6% -14%,rgba(63,224,206,.19),transparent 62%),
    radial-gradient(900px 760px at 106% -10%,rgba(126,96,255,.17),transparent 60%),
    radial-gradient(1200px 820px at 78% 114%,rgba(255,96,170,.11),transparent 62%),
    radial-gradient(800px 620px at 14% 112%,rgba(255,170,80,.07),transparent 60%),
    #04060C;
  --g-fill:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  --g-thick:linear-gradient(180deg,rgba(26,32,46,.8),rgba(12,16,25,.84));
  --g-thick-line:rgba(255,255,255,.14);
  --g-thick-edge:inset 0 1px 0 rgba(255,255,255,.16);
  --g-well:rgba(1,3,8,.34);
  --g-line:rgba(255,255,255,.075);
  --g-sep:rgba(255,255,255,.12);
  --g-rim:rgba(255,255,255,.11);
  --g-blur:blur(24px) saturate(165%);
  --g-shadow:0 34px 80px -36px rgba(0,0,0,.85),0 12px 28px -16px rgba(0,0,0,.6);
  --g-edge:inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 0 1px rgba(255,255,255,.035);
  --g-drop:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  --g-drop-edge:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.07),0 10px 26px -14px rgba(0,0,0,.95);
  --g-selected:var(--g-drop-edge),0 0 0 1px rgba(108,235,223,.22),0 0 24px -10px rgba(108,235,223,.4);
  --g-hover:rgba(255,255,255,.05);
  --g-quiet-hover:rgba(255,255,255,.08);
  --g-chip-line:rgba(255,255,255,.1);
  --g-chip-fill:rgba(255,255,255,.055);
  --g-chip-edge:inset 0 1px 0 rgba(255,255,255,.08);
  --g-tile-line:rgba(255,255,255,.08);
  --g-tile-fill:rgba(255,255,255,.045);
  --g-tile-edge:inset 0 1px 0 rgba(255,255,255,.08);
  --g-cap-line:rgba(255,255,255,.12);
  --g-cap-line-hover:rgba(255,255,255,.22);
  --g-cap-glint:rgba(255,255,255,.17);
  --g-cap-fill:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  --g-cap-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px -12px rgba(0,0,0,.85);
  --g-cap-shadow-hover:inset 0 1px 0 rgba(255,255,255,.2),0 14px 26px -14px rgba(0,0,0,.95);
  --g-bubble-glint:rgba(255,255,255,.2);
  --g-bubble-fill:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 52%,rgba(255,255,255,.08)),rgba(12,18,30,.6);
  --g-bubble-ink:#fff;
  --g-bubble-text-shadow:0 1px 2px rgba(0,0,0,.4);
  --g-bubble-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -10px 18px -12px rgba(150,210,255,.35),0 0 18px -6px rgba(92,240,222,.5),7px 2px 20px -8px rgba(255,122,192,.42),-7px 2px 20px -8px rgba(111,140,255,.42),0 14px 30px -16px rgba(0,0,0,.95);
  --g-bubble-shadow-hover:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -10px 18px -12px rgba(150,210,255,.45),0 0 26px -6px rgba(92,240,222,.62),9px 3px 26px -8px rgba(255,122,192,.55),-9px 3px 26px -8px rgba(111,140,255,.55),0 18px 34px -16px rgba(0,0,0,.95);
  --g-bubble-shadow-off:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px -16px rgba(0,0,0,.9);
  --g-film-stops:#5CF0DE,#6F8CFF 16%,#B98BFF 30%,#FF7AC0 46%,#FFC56B 60%,#7AF0B5 76%,#5CF0DE;
  --g-field-line:rgba(255,255,255,.1);
  --g-field-line-hover:rgba(255,255,255,.18);
  --g-field-shadow:inset 0 1px 3px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.05);
  --g-field-focus:rgba(1,3,8,.46);
  --g-focus-line:rgba(108,235,223,.55);
  --g-focus-ring:rgba(108,235,223,.13);
  --g-track-line:rgba(255,255,255,.08);
  --g-track-fill:rgba(1,3,8,.3);
  --g-track-shadow:inset 0 1px 2px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.04);
  --g-doc-well:rgba(1,3,8,.34);
  --g-doc-line:rgba(255,255,255,.06);
  --g-doc-shadow:inset 0 2px 10px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.04);
  --g-page-shadow:0 0 0 1px rgba(255,255,255,.08),0 34px 80px -34px rgba(0,0,0,.95),0 12px 30px -18px rgba(0,0,0,.8);
  --g-float-shadow:0 14px 30px -18px rgba(0,0,0,.9);
  --g-overlay-shadow:0 40px 120px -30px rgba(0,0,0,.95);
  --g-badge-ring:0 0 0 1px rgba(255,255,255,.12),0 6px 14px -8px rgba(0,0,0,.9);
  --g-scrim:rgba(2,4,9,.42);
  --g-photo-backdrop:rgba(2,4,9,.6);
  --g-sheet-shadow:-30px 0 90px -40px rgba(0,0,0,.95);
  --g-dialog-shadow:0 50px 120px -40px rgba(0,0,0,.95);
  --g-toast-shadow:0 30px 70px -26px rgba(0,0,0,.95);
  --g-lens-glint:rgba(255,255,255,.1);
  --g-lens-fill:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  --g-lens-edge:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.06);
  --g-lens-hover-fill:rgba(255,255,255,.03);
  --g-lens-hover-edge:inset 0 1px 0 rgba(255,255,255,.08);
  --g-lens-select-edge:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 1px rgba(108,235,223,.18),0 0 22px -6px rgba(108,235,223,.35);
  --g-lens-filter:brightness(1.14) saturate(1.25);
  --g-lens-hover-filter:brightness(1.1) saturate(1.15);
  --g-menu-fill:linear-gradient(180deg,rgba(28,34,48,.84),rgba(12,16,25,.88));
  --g-menu-line:rgba(255,255,255,.14);
  --g-menu-shadow:0 34px 80px -28px rgba(0,0,0,.95),0 10px 24px -14px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.16);
  --g-menu-drop:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  --g-menu-drop-edge:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.06),0 8px 18px -12px rgba(0,0,0,.9);
  --g-orb-ring:.72;
  --g-orb-glint:rgba(255,255,255,.55);
  --g-orb-sphere:none;
  --g-hl-fill:linear-gradient(100deg,#7CF4E6,#9FB2FF 45%,#E3A6FF 75%,#FFB8D8);
  --g-hl-shadow:0 2px 30px rgba(0,0,0,.5);
  --g-spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.9%,1.065 23.4%,1.079 25.9%,1.074 29.3%,1.016 39.5%,.997 46%,.993 52.7%,1.001 68.6%,1);
  --g-ease:cubic-bezier(.2,.8,.2,1);
  background:var(--g-backdrop);
  background-attachment:fixed;
  color:var(--g-text);
  font-family:var(--f-body);
}
html[data-md-theme="light"] body.desktop-app-active,
html[data-md-theme="light"] body:has(#screen-auth.is-active){
  color-scheme:light;
  --void:#EEF1F6;
  --panel:rgba(255,255,255,.62);
  --panel-2:rgba(255,255,255,.86);
  --hair:rgba(15,23,42,.1);
  --hair-2:rgba(15,23,42,.17);
  --text:#0B1220;
  --text-2:#3B4658;
  --text-3:#5E6A7D;
  --cyan:#087A72;
  --cyan-deep:#066660;
  --amber:#A45306;

  --g-ink:#0B1220;
  --g-text:#1E2836;
  --g-text-2:#475467;
  --g-text-3:#5F6B7E;
  --g-accent:#087A72;
  --g-accent-strong:#04524D;
  --g-accent-tint:rgba(8,122,114,.1);
  --g-accent-ring:rgba(8,122,114,.26);
  --g-brand:#0A8B82;
  --g-brand-glow:rgba(10,139,130,.22);
  --g-ok:#11804F;
  --g-warn:#9A5200;
  --g-bad:#C2362F;
  --g-bad-line:rgba(194,54,47,.28);
  --g-bad-fill:rgba(194,54,47,.07);
  --g-note-ink:#7A4300;
  --g-note-line:rgba(163,90,0,.22);
  --g-note-fill:rgba(255,183,77,.16);
  --g-ok-line:rgba(17,128,79,.24);
  --g-ok-fill:rgba(17,128,79,.07);
  --g-backdrop:
    radial-gradient(1100px 760px at -6% -14%,rgba(92,240,222,.32),transparent 62%),
    radial-gradient(900px 760px at 106% -10%,rgba(168,150,255,.28),transparent 60%),
    radial-gradient(1200px 820px at 78% 114%,rgba(255,160,205,.24),transparent 62%),
    radial-gradient(800px 620px at 14% 112%,rgba(255,206,150,.24),transparent 60%),
    #EDF0F5;
  --g-fill:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.5));
  --g-thick:linear-gradient(180deg,rgba(255,255,255,.9),rgba(247,249,252,.84));
  --g-thick-line:rgba(255,255,255,.95);
  --g-thick-edge:inset 0 1px 0 #fff,0 0 0 1px rgba(15,23,42,.06);
  --g-well:rgba(248,250,252,.78);
  --g-line:rgba(15,23,42,.08);
  --g-sep:rgba(15,23,42,.12);
  --g-rim:rgba(255,255,255,.85);
  --g-blur:blur(24px) saturate(180%);
  --g-shadow:0 30px 70px -36px rgba(30,41,82,.38),0 10px 24px -16px rgba(30,41,82,.18),0 0 0 1px rgba(15,23,42,.05);
  --g-edge:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.4);
  --g-drop:linear-gradient(180deg,#fff,rgba(255,255,255,.78));
  --g-drop-edge:inset 0 1px 0 #fff,0 0 0 1px rgba(15,23,42,.06),0 8px 20px -12px rgba(30,41,82,.42);
  --g-selected:var(--g-drop-edge),0 0 0 1px rgba(8,122,114,.28),0 0 22px -10px rgba(8,122,114,.32);
  --g-hover:rgba(15,23,42,.045);
  --g-quiet-hover:rgba(15,23,42,.06);
  --g-chip-line:rgba(15,23,42,.09);
  --g-chip-fill:rgba(255,255,255,.72);
  --g-chip-edge:inset 0 1px 0 #fff;
  --g-tile-line:rgba(15,23,42,.07);
  --g-tile-fill:rgba(255,255,255,.66);
  --g-tile-edge:inset 0 1px 0 #fff;
  --g-cap-line:rgba(15,23,42,.1);
  --g-cap-line-hover:rgba(15,23,42,.2);
  --g-cap-glint:rgba(255,255,255,.95);
  --g-cap-fill:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.66));
  --g-cap-shadow:inset 0 1px 0 #fff,0 6px 16px -10px rgba(30,41,82,.35);
  --g-cap-shadow-hover:inset 0 1px 0 #fff,0 12px 24px -12px rgba(30,41,82,.42);
  --g-bubble-glint:rgba(255,255,255,.95);
  --g-bubble-fill:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.72) 52%,rgba(255,255,255,.86)),rgba(255,255,255,.6);
  --g-bubble-ink:#0B1220;
  --g-bubble-text-shadow:none;
  --g-bubble-shadow:inset 0 1px 0 #fff,inset 0 -10px 18px -12px rgba(111,140,255,.28),0 0 16px -6px rgba(10,170,160,.45),7px 2px 18px -8px rgba(230,80,160,.36),-7px 2px 18px -8px rgba(90,110,255,.36),0 10px 24px -14px rgba(30,41,82,.45);
  --g-bubble-shadow-hover:inset 0 1px 0 #fff,inset 0 -10px 18px -12px rgba(111,140,255,.36),0 0 22px -6px rgba(10,170,160,.55),9px 3px 22px -8px rgba(230,80,160,.46),-9px 3px 22px -8px rgba(90,110,255,.46),0 14px 28px -14px rgba(30,41,82,.5);
  --g-bubble-shadow-off:inset 0 1px 0 #fff,0 8px 18px -14px rgba(30,41,82,.4);
  --g-film-stops:#14B8AA,#5B6CFF 16%,#9B5CFF 30%,#EE4F98 46%,#F0A23C 60%,#2EC98A 76%,#14B8AA;
  --g-field-line:rgba(15,23,42,.13);
  --g-field-line-hover:rgba(15,23,42,.24);
  --g-field-shadow:inset 0 1px 2px rgba(15,23,42,.08),inset 0 -1px 0 rgba(255,255,255,.8);
  --g-field-focus:#fff;
  --g-focus-line:rgba(8,122,114,.55);
  --g-focus-ring:rgba(8,122,114,.15);
  --g-track-line:rgba(15,23,42,.08);
  --g-track-fill:rgba(15,23,42,.05);
  --g-track-shadow:inset 0 1px 2px rgba(15,23,42,.08),inset 0 -1px 0 rgba(255,255,255,.7);
  --g-doc-well:rgba(15,23,42,.055);
  --g-doc-line:rgba(15,23,42,.06);
  --g-doc-shadow:inset 0 2px 8px rgba(15,23,42,.08),inset 0 -1px 0 rgba(255,255,255,.7);
  --g-page-shadow:0 0 0 1px rgba(15,23,42,.08),0 30px 60px -30px rgba(30,41,82,.35),0 10px 24px -16px rgba(30,41,82,.25);
  --g-float-shadow:0 12px 26px -16px rgba(30,41,82,.35);
  --g-overlay-shadow:0 40px 100px -30px rgba(30,41,82,.4);
  --g-badge-ring:0 0 0 1px rgba(15,23,42,.08),0 4px 10px -6px rgba(30,41,82,.3);
  --g-scrim:rgba(222,228,238,.42);
  --g-photo-backdrop:rgba(236,240,246,.74);
  --g-sheet-shadow:-24px 0 70px -36px rgba(30,41,82,.42);
  --g-dialog-shadow:0 40px 100px -36px rgba(30,41,82,.45);
  --g-toast-shadow:0 24px 56px -24px rgba(30,41,82,.45);
  --g-lens-glint:transparent;
  --g-lens-fill:transparent;
  --g-lens-edge:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(15,23,42,.07),0 6px 16px -10px rgba(30,41,82,.38);
  --g-lens-hover-fill:rgba(15,23,42,.04);
  --g-lens-hover-edge:inset 0 0 0 1px rgba(15,23,42,.04);
  --g-lens-select-edge:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(15,23,42,.05),0 0 0 1px rgba(8,122,114,.24),0 6px 18px -8px rgba(8,122,114,.32);
  --g-lens-filter:contrast(1.06) saturate(1.1);
  --g-lens-hover-filter:none;
  --g-menu-fill:linear-gradient(180deg,rgba(255,255,255,.94),rgba(246,248,252,.92));
  --g-menu-line:rgba(15,23,42,.08);
  --g-menu-shadow:0 30px 70px -28px rgba(30,41,82,.4),0 8px 20px -12px rgba(30,41,82,.25),inset 0 1px 0 #fff;
  --g-menu-drop:linear-gradient(180deg,#fff,rgba(255,255,255,.85));
  --g-menu-drop-edge:inset 0 1px 0 #fff,0 0 0 1px rgba(15,23,42,.06),0 6px 14px -8px rgba(30,41,82,.35);
  --g-orb-ring:.9;
  --g-orb-glint:rgba(255,255,255,.95);
  --g-orb-sphere:inset 0 0 70px rgba(60,80,140,.08),inset 0 0 0 1px rgba(255,255,255,.7);
  --g-hl-fill:linear-gradient(100deg,#0A8B82,#4F5BD5 45%,#9B3FD1 75%,#D2427F);
  --g-hl-shadow:none;
}
body.desktop-app-active ::selection{background:rgba(108,235,223,.3);color:#fff}
html[data-md-theme="light"] body.desktop-app-active ::selection{background:rgba(8,122,114,.2);color:#0B1220}

/* ---------- Floating shell ---------- */
body.desktop-app-active #app{
  grid-template-columns:240px minmax(0,1fr);
  grid-template-rows:58px minmax(0,1fr);
  gap:12px;padding:12px;height:100dvh;background:transparent;
}
body.desktop-app-active #app>.screen.is-active{width:auto;max-width:none;height:auto;min-height:0;margin:0;background:transparent;overflow:hidden;animation:gFade .32s ease}
body.desktop-app-active #app>.desktop-workspace-header,
body.desktop-app-active #app>.desktop-nav,
body.desktop-app-active #app #screen-home .home-col-evidence,
body.desktop-app-active #app #screen-home .home-col-ledger,
body.desktop-app-active #app #screen-home.desktop-route-open .home-col-cockpit,
body.desktop-app-active #app #screen-export .record-audit-toolbar,
body.desktop-app-active #app .trip-stop-index:not([hidden]),
body.desktop-app-active #app #screen-fuel .fuel-workspace>.fuel-wrap,
body.desktop-app-active #app #screen-inspections .inspection-audit-sidebar,
body.desktop-app-active #app #screen-dispute .dispute-pad,
body.desktop-app-active #app #screen-plan .plan-current-card,
body.desktop-app-active #app #screen-plan .plan-tier,
body.desktop-app-active #app #screen-feedback .feedback-form,
body.desktop-app-active #app .desktop-account-section,
body:has(#screen-auth.is-active) #screen-auth .auth-shell .auth-card{
  border:1px solid var(--g-rim);
  border-radius:24px;
  background:var(--g-fill);
  -webkit-backdrop-filter:var(--g-blur);
  backdrop-filter:var(--g-blur);
  box-shadow:var(--g-shadow),var(--g-edge);
}
body.desktop-app-active #app>.desktop-workspace-header{gap:18px;padding:0 10px 0 16px;border-radius:20px}
body.desktop-app-active #app .desktop-header-brand{border-radius:14px;transition:opacity .2s ease}
body.desktop-app-active #app .desktop-header-brand:hover{opacity:.82}
body.desktop-app-active #app .desktop-header-brand .logo,
body:has(#screen-auth.is-active) #screen-auth .auth-head .logo{width:30px;height:30px;--car:var(--g-brand);--glass:#04060C;--pin:#36D98A;--pinhole:#04060C;--wheel:#06111D;filter:drop-shadow(0 2px 12px var(--g-brand-glow))}
body.desktop-app-active #app .desktop-header-brand .wordmark,
body:has(#screen-auth.is-active) #screen-auth .auth-head .wordmark{font:700 21px/1 'Saira',sans-serif;letter-spacing:.4px;color:var(--g-ink)}
body.desktop-app-active #app .desktop-header-brand .wordmark b,
body:has(#screen-auth.is-active) #screen-auth .auth-head .wordmark b{color:var(--g-brand)}
body.desktop-app-active #app .desktop-header-brand .wordmark .df,
body:has(#screen-auth.is-active) #screen-auth .auth-head .wordmark .df{font-weight:600;color:var(--g-ink)}
body.desktop-app-active #app .desktop-header-brand .payg-badge{border-color:var(--g-accent-ring);background:var(--g-accent-tint);color:var(--g-accent)}
body.desktop-app-active #app .desktop-header-brand .payg-badge b{color:var(--g-ink)}
body.desktop-app-active #app .desktop-header-title{padding-left:18px;border-left:1px solid var(--g-sep);font:600 15px/1.2 var(--f-body);color:var(--g-text-2)}
body.desktop-app-active #app .desktop-header-driver{max-width:34%;padding:7px 14px;border:1px solid var(--g-chip-line);border-radius:999px;background:var(--g-chip-fill);box-shadow:var(--g-chip-edge);font:500 13.5px/1.2 var(--f-body);color:var(--g-text)}
body.desktop-app-active #app .desktop-header-driver:empty{visibility:hidden}

/* Appearance switch (desktop-glass.js adds it to the header). */
body.desktop-app-active #app .md-theme-switch{display:inline-flex;flex:0 0 auto;align-items:center;gap:2px;padding:3px;border:1px solid var(--g-track-line);border-radius:999px;background:var(--g-track-fill);box-shadow:var(--g-track-shadow)}
body.desktop-app-active #app .md-theme-switch button{position:relative;display:grid;place-items:center;width:32px;height:30px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--g-text-3);transition:color .2s ease,background-color .2s ease}
body.desktop-app-active #app .md-theme-switch button:hover,
body.desktop-app-active #app .md-theme-switch button[aria-pressed="true"]{color:var(--g-ink)}
body.desktop-app-active:not(.md-glass-live) #app .md-theme-switch button[aria-pressed="true"]{background:var(--g-drop);box-shadow:var(--g-drop-edge)}
body.desktop-app-active #app .md-theme-switch svg{width:16px;height:16px}

body.desktop-app-active #app>.desktop-nav{height:auto;padding:16px 10px 10px;gap:14px}
body.desktop-app-active #app .desktop-nav-context{margin:2px 8px 0;padding:0 0 14px;border-bottom:1px solid var(--g-line)}
body.desktop-app-active #app .desktop-nav-context span{font:500 12px/1.3 var(--f-body);letter-spacing:.01em;text-transform:none;color:var(--g-text-3)}
body.desktop-app-active #app .desktop-nav-context strong{margin-top:2px;font:650 17px/1.2 var(--f-body);color:var(--g-ink)}
body.desktop-app-active #app .desktop-nav-context small{font:400 11.5px/1.4 var(--f-mono);letter-spacing:0;color:var(--g-text-3)}
body.desktop-app-active #app .desktop-nav-links{gap:3px}
body.desktop-app-active #app .desktop-nav-links button,
body.desktop-app-active #app .desktop-nav-account,
body.desktop-app-active #app .desktop-nav-session{
  position:relative;min-height:42px;padding:9px 12px;border:0;border-radius:14px;background:transparent;box-shadow:none;color:var(--g-text-2);
  transition:color .2s ease,background-color .2s ease,box-shadow .25s ease;
}
body.desktop-app-active #app .desktop-nav-links button>span,
body.desktop-app-active #app .desktop-nav-account>span,
body.desktop-app-active #app .desktop-nav-session>span{font:550 14.5px/1.2 var(--f-body)}
body.desktop-app-active #app :is(.desktop-nav-links button,.desktop-nav-account,.desktop-nav-session):hover,
body.desktop-app-active #app :is(.desktop-nav-links button,.desktop-nav-account).is-current{color:var(--g-ink)}
/* Without the droplet script, rows and tabs paint their own hover and selection. */
body.desktop-app-active:not(.md-glass-live) #app :is(.desktop-nav-links button,.desktop-nav-account,.desktop-nav-session):hover{background:var(--g-hover)}
body.desktop-app-active:not(.md-glass-live) #app :is(.desktop-nav-links button,.desktop-nav-account).is-current{background:var(--g-drop);box-shadow:var(--g-drop-edge)}
body.desktop-app-active #app .desktop-nav-footer{gap:2px;padding-top:10px;border-top:1px solid var(--g-line)}
body.desktop-app-active #app .desktop-nav-session{min-height:56px}
body.desktop-app-active #app .desktop-nav-session small{font:400 10.5px/1.35 var(--f-mono);color:var(--g-text-3)}

/* ---------- Focus ---------- */
body.desktop-app-active button:focus:not(:focus-visible){outline:none}
body.desktop-app-active :is(#app,#sheet,#photoViewer,dialog) :is(button,a,summary,[tabindex]):focus-visible,
body:has(#screen-auth.is-active) #screen-auth :is(button,a):focus-visible{outline:2px solid var(--g-accent);outline-offset:3px}

/* ---------- Glass capsules: secondary actions ---------- */
body.desktop-app-active #app .export-bar>.print-btn:not(#disputeSignButton),
body.desktop-app-active #app .export-bar .report-heading>.print-btn,
body.desktop-app-active #app .export-bar>.mini-btn,
body.desktop-app-active #app .export-bar>.icon-btn,
body.desktop-app-active #app .desktop-day-actions button,
body.desktop-app-active #app .desktop-account-section:not(:first-child)>button,
body.desktop-app-active #app .desktop-stop-detail-toolbar button,
body.desktop-app-active #app .desktop-stop-detail .btn-ghost,
body.desktop-app-active #app :not(.date-actions)>.mini-btn:not(.primary),
body.desktop-app-active #app #screen-plan .plan-btn:not(.primary),
body.desktop-app-active #app #screen-feedback .owner-btn:not(.primary),
body.desktop-app-active #app .home-plan-notice button,
body.desktop-app-active #sheet .btn-ghost,
body.desktop-app-active #sheet :not(.date-actions)>.mini-btn:not(.primary),
body.desktop-app-active #photoViewer .photo-viewer-btn,
body.desktop-app-active dialog.document-dialog button:not([data-document-confirm]),
body:has(#screen-auth.is-active) #screen-auth .auth-guest{
  align-items:center;justify-content:center;gap:7px;
  min-height:38px;height:auto;padding:0 16px;
  border:1px solid var(--g-cap-line);border-radius:999px;
  background:radial-gradient(150px 70px at var(--mx,50%) var(--my,-40px),var(--g-cap-glint),transparent 70%),var(--g-cap-fill);
  box-shadow:var(--g-cap-shadow);
  color:var(--g-ink);font:600 13.5px/1.1 var(--f-body);letter-spacing:.005em;text-decoration:none;white-space:nowrap;
  transition:transform .55s var(--g-spring),border-color .2s ease,box-shadow .25s ease,opacity .2s ease;
}
:is(body.desktop-app-active #app .export-bar>.print-btn:not(#disputeSignButton),body.desktop-app-active #app .export-bar .report-heading>.print-btn,body.desktop-app-active #app .export-bar>.mini-btn,body.desktop-app-active #app .export-bar>.icon-btn,body.desktop-app-active #app .desktop-day-actions button,body.desktop-app-active #app .desktop-account-section:not(:first-child)>button,body.desktop-app-active #app .desktop-stop-detail-toolbar button,body.desktop-app-active #app .desktop-stop-detail .btn-ghost,body.desktop-app-active #app :not(.date-actions)>.mini-btn:not(.primary),body.desktop-app-active #app #screen-plan .plan-btn:not(.primary),body.desktop-app-active #app #screen-feedback .owner-btn:not(.primary),body.desktop-app-active #app .home-plan-notice button,body.desktop-app-active #sheet .btn-ghost,body.desktop-app-active #sheet :not(.date-actions)>.mini-btn:not(.primary),body.desktop-app-active #photoViewer .photo-viewer-btn,body.desktop-app-active dialog.document-dialog button:not([data-document-confirm]),body:has(#screen-auth.is-active) #screen-auth .auth-guest):hover:not(:disabled){
  border-color:var(--g-cap-line-hover);color:var(--g-ink);text-decoration:none;transform:translateY(-1px);
  box-shadow:var(--g-cap-shadow-hover);
}
:is(body.desktop-app-active #app .export-bar>.print-btn:not(#disputeSignButton),body.desktop-app-active #app .export-bar .report-heading>.print-btn,body.desktop-app-active #app .export-bar>.mini-btn,body.desktop-app-active #app .export-bar>.icon-btn,body.desktop-app-active #app .desktop-day-actions button,body.desktop-app-active #app .desktop-account-section:not(:first-child)>button,body.desktop-app-active #app .desktop-stop-detail-toolbar button,body.desktop-app-active #app .desktop-stop-detail .btn-ghost,body.desktop-app-active #app :not(.date-actions)>.mini-btn:not(.primary),body.desktop-app-active #app #screen-plan .plan-btn:not(.primary),body.desktop-app-active #app #screen-feedback .owner-btn:not(.primary),body.desktop-app-active #app .home-plan-notice button,body.desktop-app-active #sheet .btn-ghost,body.desktop-app-active #sheet :not(.date-actions)>.mini-btn:not(.primary),body.desktop-app-active #photoViewer .photo-viewer-btn,body.desktop-app-active dialog.document-dialog button:not([data-document-confirm]),body:has(#screen-auth.is-active) #screen-auth .auth-guest):active:not(:disabled){transform:scale(.965);transition-duration:.12s}
:is(body.desktop-app-active #app .export-bar>.print-btn:not(#disputeSignButton),body.desktop-app-active #app .export-bar>.mini-btn,body.desktop-app-active #app .desktop-day-actions button,body.desktop-app-active #app :not(.date-actions)>.mini-btn:not(.primary),body.desktop-app-active #app #screen-plan .plan-btn:not(.primary),body.desktop-app-active #app #screen-feedback .owner-btn:not(.primary),body.desktop-app-active #sheet :not(.date-actions)>.mini-btn:not(.primary),body.desktop-app-active dialog.document-dialog button:not([data-document-confirm]),body:has(#screen-auth.is-active) #screen-auth .auth-guest):disabled{opacity:.42;box-shadow:none;cursor:not-allowed}
body.desktop-app-active #app .export-bar .print-btn svg{opacity:.8}
body.desktop-app-active #app .export-bar>.icon-btn{width:38px;padding:0}
body.desktop-app-active #app .desktop-stop-detail .btn-danger,
body.desktop-app-active #sheet .btn-danger,
body.desktop-app-active #app .mini-btn.danger,
body.desktop-app-active #sheet .mini-btn.danger{min-height:38px;height:auto;padding:0 16px;border:1px solid var(--g-bad-line);border-radius:999px;background:var(--g-bad-fill);box-shadow:none;color:var(--g-bad);font:600 13.5px/1.1 var(--f-body)}

/* ---------- Quiet actions: text that gains a capsule on hover ---------- */
body.desktop-app-active #app .date-actions>button,
body.desktop-app-active #app .document-viewer-tools button,
body.desktop-app-active #app .trip-stop-index-actions button,
body.desktop-app-active #app .audit-open-records,
body.desktop-app-active #app #screen-fuel .desktop-fuel-record-more summary,
body.desktop-app-active #app #screen-fuel .fuel-more>summary,
body.desktop-app-active #app .dispute-packet-status button,
body:has(#screen-auth.is-active) #screen-auth .auth-link{
  position:relative;width:auto;min-width:0;min-height:32px;height:auto;padding:6px 12px;border:0;border-radius:999px;background:transparent;box-shadow:none;
  color:var(--g-accent);font:600 13px/1.2 var(--f-body);text-decoration:none;
  transition:background-color .2s ease,color .2s ease,transform .5s var(--g-spring);
}
:is(body.desktop-app-active #app .date-actions>button,body.desktop-app-active #app .document-viewer-tools button,body.desktop-app-active #app .trip-stop-index-actions button,body.desktop-app-active #app .audit-open-records,body.desktop-app-active #app #screen-fuel .desktop-fuel-record-more summary,body.desktop-app-active #app #screen-fuel .fuel-more>summary,body.desktop-app-active #app .dispute-packet-status button,body:has(#screen-auth.is-active) #screen-auth .auth-link):hover:not(:disabled){color:var(--g-accent-strong);text-decoration:none}
:is(body.desktop-app-active #app .trip-stop-index-actions button,body.desktop-app-active #app .audit-open-records,body.desktop-app-active #app #screen-fuel .desktop-fuel-record-more summary,body.desktop-app-active #app #screen-fuel .fuel-more>summary,body.desktop-app-active #app .dispute-packet-status button,body:has(#screen-auth.is-active) #screen-auth .auth-link,body.desktop-app-active:not(.md-glass-live) #app .date-actions>button,body.desktop-app-active:not(.md-glass-live) #app .document-viewer-tools button):hover:not(:disabled){background:var(--g-quiet-hover)}
:is(body.desktop-app-active #app .date-actions>button,body.desktop-app-active #app .document-viewer-tools button,body.desktop-app-active #app .trip-stop-index-actions button,body.desktop-app-active #app .audit-open-records,body:has(#screen-auth.is-active) #screen-auth .auth-link):active:not(:disabled){transform:scale(.95);transition-duration:.12s}
body.desktop-app-active #app :is(.date-actions>button,.document-viewer-tools button):disabled{background:transparent;color:var(--g-text-3);opacity:.5}
body.desktop-app-active #app .date-actions>button{height:32px;padding:0 13px;color:var(--g-text)}
body.desktop-app-active #app .trip-stop-index-actions .is-danger{color:var(--g-bad)}
body:has(#screen-auth.is-active) #screen-auth .auth-switch{color:var(--g-ink)}

/* ---------- The bubble: the primary action ---------- */
body.desktop-app-active #app .mini-btn.primary,
body.desktop-app-active #app #screen-fuel .fuel-head-actions .mini-btn.primary,
body.desktop-app-active #app #screen-inspections .inspection-head .mini-btn.primary,
body.desktop-app-active #app .desktop-stop-detail .btn-primary,
body.desktop-app-active #app #screen-plan .plan-btn.primary,
body.desktop-app-active #app #screen-feedback .owner-btn.primary,
body.desktop-app-active #app #screen-export .report-delivery>.report-download,
body.desktop-app-active #app #screen-dispute #disputeSignButton,
body.desktop-app-active #app .desktop-account-section:first-child>button,
body.desktop-app-active #sheet .btn-primary,
body.desktop-app-active #sheet .mini-btn.primary,
body.desktop-app-active dialog.document-dialog button[data-document-confirm],
body:has(#screen-auth.is-active) #screen-auth .auth-shell .auth-primary{
  position:relative;isolation:isolate;
  align-items:center;justify-content:center;gap:8px;
  min-height:42px;height:auto;padding:0 22px;border:0;border-radius:999px;
  background:radial-gradient(110px 60px at var(--mx,30%) var(--my,-10px),var(--g-bubble-glint),transparent 70%),var(--g-bubble-fill);
  box-shadow:var(--g-bubble-shadow);
  color:var(--g-bubble-ink);font:650 14px/1.1 var(--f-body);letter-spacing:.01em;text-shadow:var(--g-bubble-text-shadow);white-space:nowrap;
  transition:transform .6s var(--g-spring),box-shadow .35s ease,--g-film 1.6s var(--g-ease),opacity .2s ease;
}
:is(body.desktop-app-active #app .mini-btn.primary,body.desktop-app-active #app .desktop-stop-detail .btn-primary,body.desktop-app-active #app #screen-plan .plan-btn.primary,body.desktop-app-active #app #screen-feedback .owner-btn.primary,body.desktop-app-active #app #screen-export .report-delivery>.report-download,body.desktop-app-active #app #screen-dispute #disputeSignButton,body.desktop-app-active #app .desktop-account-section:first-child>button,body.desktop-app-active #sheet .btn-primary,body.desktop-app-active #sheet .mini-btn.primary,body.desktop-app-active dialog.document-dialog button[data-document-confirm],body:has(#screen-auth.is-active) #screen-auth .auth-shell .auth-primary)::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.6px;pointer-events:none;
  background:conic-gradient(from var(--g-film),var(--g-film-stops));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
:is(body.desktop-app-active #app .mini-btn.primary,body.desktop-app-active #app .desktop-stop-detail .btn-primary,body.desktop-app-active #app #screen-plan .plan-btn.primary,body.desktop-app-active #app #screen-feedback .owner-btn.primary,body.desktop-app-active #app #screen-export .report-delivery>.report-download,body.desktop-app-active #app #screen-dispute #disputeSignButton,body.desktop-app-active #app .desktop-account-section:first-child>button,body.desktop-app-active #sheet .btn-primary,body.desktop-app-active #sheet .mini-btn.primary,body.desktop-app-active dialog.document-dialog button[data-document-confirm],body:has(#screen-auth.is-active) #screen-auth .auth-shell .auth-primary):hover:not(:disabled){
  --g-film:150deg;transform:translateY(-1px);text-decoration:none;box-shadow:var(--g-bubble-shadow-hover);
}
:is(body.desktop-app-active #app .mini-btn.primary,body.desktop-app-active #app .desktop-stop-detail .btn-primary,body.desktop-app-active #app #screen-plan .plan-btn.primary,body.desktop-app-active #app #screen-feedback .owner-btn.primary,body.desktop-app-active #app #screen-export .report-delivery>.report-download,body.desktop-app-active #app #screen-dispute #disputeSignButton,body.desktop-app-active #app .desktop-account-section:first-child>button,body.desktop-app-active #sheet .btn-primary,body.desktop-app-active #sheet .mini-btn.primary,body.desktop-app-active dialog.document-dialog button[data-document-confirm],body:has(#screen-auth.is-active) #screen-auth .auth-shell .auth-primary):active:not(:disabled){transform:scale(.965);transition-duration:.14s}
:is(body.desktop-app-active #app .mini-btn.primary,body.desktop-app-active #app .desktop-stop-detail .btn-primary,body.desktop-app-active #app #screen-plan .plan-btn.primary,body.desktop-app-active #app #screen-feedback .owner-btn.primary,body.desktop-app-active #app #screen-export .report-delivery>.report-download,body.desktop-app-active #app #screen-dispute #disputeSignButton,body.desktop-app-active #app .desktop-account-section:first-child>button,body.desktop-app-active #sheet .btn-primary,body.desktop-app-active #sheet .mini-btn.primary,body.desktop-app-active dialog.document-dialog button[data-document-confirm],body:has(#screen-auth.is-active) #screen-auth .auth-shell .auth-primary):disabled:not([aria-busy="true"]){
  opacity:.5;cursor:not-allowed;filter:saturate(.4);box-shadow:var(--g-bubble-shadow-off);
}
/* Working: the film flows until the result returns. */
:is(body.desktop-app-active #app,body.desktop-app-active #sheet,body:has(#screen-auth.is-active) #screen-auth) [aria-busy="true"]:is(.mini-btn.primary,.btn-primary,.plan-btn.primary,.owner-btn.primary,.auth-primary){cursor:progress;animation:gFilmFlow 2.4s linear infinite}
body:has(#screen-auth.is-active) #screen-auth .auth-primary .mini-spinner{display:none}
@keyframes gFilmFlow{to{--g-film:360deg}}

/* ---------- Fields: sunken glass ---------- */
body.desktop-app-active #app .date-input,
body.desktop-app-active #app .input,
body.desktop-app-active #app .select,
body.desktop-app-active #app #screen-dispute :is(.dispute-field>.input,.dispute-field>.select,.dispute-extra>.input,.dispute-pad .date-input),
body.desktop-app-active #app #screen-feedback .owner-field :is(select,textarea),
body.desktop-app-active #sheet :is(.input,.select,.date-input),
body:has(#screen-auth.is-active) #screen-auth .auth-field input{
  border:1px solid var(--g-field-line);border-radius:14px;
  background:var(--g-well);
  box-shadow:var(--g-field-shadow);
  color:var(--g-ink);font:400 14.5px/1.3 var(--f-body);
  transition:border-color .2s ease,box-shadow .25s ease,background-color .2s ease;
}
body.desktop-app-active #app .date-input{height:40px;padding:0 14px;border-radius:999px;font-variant-numeric:tabular-nums}
body.desktop-app-active #app :is(.date-input,.input,.select,.owner-field select,.owner-field textarea):hover,
body.desktop-app-active #sheet :is(.input,.select,.date-input):hover,
body:has(#screen-auth.is-active) #screen-auth .auth-field input:hover{border-color:var(--g-field-line-hover)}
body.desktop-app-active #app :is(.date-input,.input,.select,.owner-field select,.owner-field textarea):focus,
body.desktop-app-active #sheet :is(.input,.select,.date-input):focus,
body:has(#screen-auth.is-active) #screen-auth .auth-field input:focus{
  outline:none;border-color:var(--g-focus-line);background:var(--g-field-focus);
  box-shadow:0 0 0 4px var(--g-focus-ring),var(--g-field-shadow);
}
body.desktop-app-active :is(.input,textarea)::placeholder,
body:has(#screen-auth.is-active) #screen-auth .auth-field input::placeholder{color:var(--g-text-3)}
body.desktop-app-active .date-input::-webkit-calendar-picker-indicator{filter:none;opacity:.65;cursor:pointer}
body.desktop-app-active input[type=checkbox]{accent-color:var(--g-accent)}

/* Labels: sentence case, quiet. */
body.desktop-app-active #app :is(#screen-export .range-field span,#screen-export .range-preview-field span,#screen-dispute .dispute-field>span,.desktop-account-section label,.desktop-stop-detail .field-label,.desktop-stop-detail .detail-metric .mk,#screen-fuel .fuel-card .fk,#screen-fuel .fuel-kicker,.desktop-stop-detail-toolbar span,.date-kicker,#screen-feedback .owner-field>span),
body.desktop-app-active #sheet :is(.field-label,.detail-metric .mk),
body:has(#screen-auth.is-active) #screen-auth .auth-field label{
  font:500 12px/1.3 var(--f-body);letter-spacing:.01em;text-transform:none;color:var(--g-text-3);
}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .input-label{font:500 12.5px/1.3 var(--f-body);color:var(--g-text-2)}

/* ---------- Segmented controls: a track with one droplet ---------- */
body.desktop-app-active #app #screen-export .scope,
body.desktop-app-active #app .fuel-range-tabs,
body.desktop-app-active #app .date-actions,
body.desktop-app-active #app #screen-export .report-delivery{
  align-items:center;gap:2px;padding:3px;
  border:1px solid var(--g-track-line);border-radius:999px;
  background:var(--g-track-fill);box-shadow:var(--g-track-shadow);
}
body.desktop-app-active #app #screen-export .scope button,
body.desktop-app-active #app .fuel-range-tabs button{
  position:relative;width:auto;min-height:32px;height:auto;padding:0 14px;border:0;border-radius:999px;background:transparent;box-shadow:none;
  color:var(--g-text-2);font:600 13px/1 var(--f-body);transition:color .2s ease,background-color .2s ease;
}
body.desktop-app-active #app :is(#screen-export .scope button,.fuel-range-tabs button):hover{color:var(--g-ink)}
body.desktop-app-active #app :is(#screen-export .scope button.on,.fuel-range-tabs button.is-active){background:transparent;box-shadow:none;color:var(--g-ink)}
body.desktop-app-active:not(.md-glass-live) #app :is(#screen-export .scope button,.fuel-range-tabs button):hover{background:var(--g-hover)}
body.desktop-app-active:not(.md-glass-live) #app :is(#screen-export .scope button.on,.fuel-range-tabs button.is-active){background:var(--g-drop);box-shadow:var(--g-drop-edge)}
body.desktop-app-active #app #screen-export .report-delivery>.print-btn:not(.report-download){min-height:34px;height:auto;padding:0 14px;border:0;border-radius:999px;background:transparent;box-shadow:none;color:var(--g-ink);font:600 13.5px/1.1 var(--f-body);text-decoration:none;transition:background-color .2s ease}
body.desktop-app-active #app #screen-export .report-delivery>.print-btn:not(.report-download):hover{text-decoration:none}
body.desktop-app-active:not(.md-glass-live) #app #screen-export .report-delivery>.print-btn:not(.report-download):hover{background:var(--g-quiet-hover)}
body.desktop-app-active #app #screen-export .report-delivery>.report-download{min-height:34px}

/* ---------- Lists: rows on glass ---------- */
body.desktop-app-active #app #screen-home :is(.audit-day-row,.desktop-stop-row),
body.desktop-app-active #app .trip-range-day,
body.desktop-app-active #app #screen-fuel .desktop-fuel-row,
body.desktop-app-active #app .trip-stop-index-card{
  position:relative;border:0;border-radius:14px;background:transparent;box-shadow:none;
  transition:background-color .2s ease,box-shadow .25s ease;
}
body.desktop-app-active:not(.md-glass-live) #app :is(#screen-home .audit-day-row,#screen-home .desktop-stop-row,.trip-range-day,.trip-stop-index-card,#screen-fuel .desktop-fuel-row):hover{background:var(--g-hover)}
body.desktop-app-active #app :is(#screen-home .audit-day-row.is-selected,#screen-home .desktop-stop-row.is-selected,.trip-range-day.is-current,.trip-stop-index-card.is-current){background:var(--g-drop);box-shadow:var(--g-selected)}
body.desktop-app-active #app #screen-home .audit-day-list{display:grid;gap:3px;padding:0}
body.desktop-app-active #app #screen-home .audit-day-row{min-height:62px;padding:11px 14px}
body.desktop-app-active #app #screen-home .audit-day-date{font:600 14.5px/1.25 var(--f-body);color:var(--g-ink)}
body.desktop-app-active #app #screen-home .audit-day-details{font:400 12px/1.35 var(--f-body);color:var(--g-text-3);font-variant-numeric:tabular-nums}
body.desktop-app-active #app #screen-home .audit-day-row.is-selected .audit-day-details{color:var(--g-text-2)}

/* ---------- Days ---------- */
body.desktop-app-active #app .date-strip{padding:2px 4px 12px;background:transparent}
body.desktop-app-active #app .date-kicker{margin-bottom:3px}
body.desktop-app-active #app .date-label{font:600 15px/1.25 var(--f-body);color:var(--g-ink)}
body.desktop-app-active #app .home-plan-notice{border:1px solid var(--g-note-line);border-radius:18px;background:var(--g-note-fill);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
body.desktop-app-active #app .home-plan-notice b{color:var(--g-ink)}
body.desktop-app-active #app .home-plan-notice small{color:var(--g-text-2)}
body.desktop-app-active #app #screen-home .home-pad{gap:12px;padding:0 4px 4px}
body.desktop-app-active #app #screen-home .home-col-evidence{padding:16px 10px 10px}
body.desktop-app-active #app #screen-home .home-col-ledger{padding:16px 22px 28px}
body.desktop-app-active #app #screen-home .ledger-head{min-height:40px;padding:0 6px 10px;border-bottom:1px solid var(--g-line)}
body.desktop-app-active #app #screen-home .home-col-evidence .ledger-head{margin:0 4px 8px}
body.desktop-app-active #app #screen-home .ledger-head h2{font:650 19px/1.1 var(--f-body);letter-spacing:-.01em;text-transform:none;color:var(--g-ink)}
body.desktop-app-active #app #screen-home .ledger-head .count{color:var(--g-accent);font:600 13px/1.2 var(--f-body)}
body.desktop-app-active #app .desktop-day-overview{padding:20px 6px 22px;border-bottom:1px solid var(--g-line)}
body.desktop-app-active #app .desktop-day-state strong{font:650 28px/1.05 var(--f-body);letter-spacing:-.02em;color:var(--g-ink)}
body.desktop-app-active #app .desktop-day-state span{font:500 14px/1.2 var(--f-body);color:var(--g-text-2)}
body.desktop-app-active #app .desktop-day-numbers{gap:10px 34px;margin:18px 0;color:var(--g-text-3);font:500 13px/1.2 var(--f-body)}
body.desktop-app-active #app .desktop-day-numbers b{margin-right:5px;font:300 34px/1 var(--f-body);letter-spacing:-.03em;color:var(--g-ink);font-variant-numeric:tabular-nums}
body.desktop-app-active #app .desktop-day-actions{gap:8px}
body.desktop-app-active #app .desktop-day-actions button{min-height:36px;padding:0 15px}
body.desktop-app-active #app .desktop-stop-list-head{height:42px;padding:0 10px;border-bottom:1px solid var(--g-line);color:var(--g-text-3);font:500 12px/1 var(--f-body);letter-spacing:.01em;text-transform:none}
body.desktop-app-active #app .desktop-stop-list{display:grid;gap:2px;padding-top:6px}
body.desktop-app-active #app #screen-home .desktop-stop-row{min-height:62px;padding:9px 10px;color:var(--g-text-2);font:400 13px/1.35 var(--f-body);font-variant-numeric:tabular-nums}
body.desktop-app-active #app #screen-home .desktop-stop-row.is-selected{color:var(--g-text)}
body.desktop-app-active #app .desktop-stop-place b{font:600 14.5px/1.2 var(--f-body);color:var(--g-ink)}
body.desktop-app-active #app .desktop-stop-place small{font:400 12px/1.3 var(--f-body);color:var(--g-text-3)}
body.desktop-app-active #app .desktop-day-empty{color:var(--g-text-2);font:400 15px/1.5 var(--f-body)}
body.desktop-app-active #app #screen-home.desktop-route-open .home-col-cockpit{padding:18px 20px 24px}
html[data-md-theme="light"] body.desktop-app-active #app .gauge.g-stop .gv{color:var(--g-accent)}
html[data-md-theme="light"] body.desktop-app-active #app .gauge.g-mile .gv{color:#3F55C9}
html[data-md-theme="light"] body.desktop-app-active #app .gauge.g-fuel .gv{color:var(--g-warn)}

/* A stop opens beside the list as a thicker sheet of glass. */
body.desktop-app-active #app #screen-home .desktop-stop-detail:not([hidden]){
  padding:18px 22px 32px;border:1px solid var(--g-thick-line);border-radius:24px;
  background:var(--g-thick);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);
  box-shadow:var(--g-shadow),var(--g-thick-edge);
  animation:gRise .5s var(--g-ease);
}
body.desktop-app-active #app #screen-home.desktop-stop-open .home-pad{grid-template-columns:minmax(200px,250px) minmax(340px,1fr) minmax(330px,440px)}
body.desktop-app-active #app #screen-home.desktop-stop-open :is(.desktop-stop-list-head,.desktop-stop-row){grid-template-columns:minmax(0,1fr) 136px 40px;gap:10px}
body.desktop-app-active #app #screen-home.desktop-stop-open :is(.desktop-stop-list-head,.desktop-stop-row)>span:last-child{display:none}
body.desktop-app-active #app .desktop-stop-detail-toolbar{border-bottom-color:var(--g-line)}
body.desktop-app-active #app .desktop-stop-detail-toolbar button{min-height:34px;padding:0 14px}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .stop-detail-head .name{font:650 24px/1.12 var(--f-body);letter-spacing:-.015em;color:var(--g-ink)}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .stop-detail-head .addr{font:400 12.5px/1.45 var(--f-body);color:var(--g-text-3)}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .detail-pill{border:1px solid var(--g-chip-line);border-radius:999px;background:var(--g-chip-fill);color:var(--g-text);font:500 12px/1 var(--f-body)}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .detail-metric{padding:12px 14px;border:1px solid var(--g-tile-line);border-radius:16px;background:var(--g-tile-fill);box-shadow:var(--g-tile-edge)}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .detail-metric .mv{margin-top:4px;font:350 24px/1.1 var(--f-body);letter-spacing:-.02em;color:var(--g-ink);font-variant-numeric:tabular-nums}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .field-label{color:var(--g-text-2)}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) :is(.input,.select){height:44px;padding:0 14px}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) textarea.input{height:auto;padding:11px 14px}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .gps-address-btn{border:1px solid var(--g-cap-line);border-radius:14px;background:var(--g-cap-fill);box-shadow:var(--g-cap-shadow);color:var(--g-accent)}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .empty-detail{color:var(--g-text-3);border-color:var(--g-field-line)}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .sheet-actions{gap:10px}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .place-results{border:1px solid var(--g-menu-line);border-radius:16px;background:var(--g-menu-fill);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);box-shadow:var(--g-menu-shadow)}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .place-suggestion{border-radius:12px;color:var(--g-ink)}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .place-suggestion:hover{background:var(--g-quiet-hover)}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .place-suggestion .pa{color:var(--g-text-3)}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .detail-alert{border-color:var(--g-bad-line);background:var(--g-bad-fill);color:var(--g-bad)}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .detail-alert b{color:var(--g-ink)}
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .segc.sel .sl{color:var(--g-ink)}

/* ---------- Report screens ---------- */
body.desktop-app-active #app .export-bar{gap:10px 14px;min-height:56px;padding:0 4px 12px;border:0;background:transparent}
body.desktop-app-active #app .export-bar h2{margin-right:6px;font:650 26px/1.05 var(--f-body);letter-spacing:-.02em;color:var(--g-ink)}
body.desktop-app-active #app .export-bar .report-format{width:auto;height:38px;padding:0 36px 0 14px}
body.desktop-app-active #app .pdf-price-note{padding:0 8px 10px;color:var(--g-text-3);font:400 12.5px/1.4 var(--f-body)}

body.desktop-app-active #app #screen-export .record-audit-shell{gap:12px;padding:0 4px 4px}
body.desktop-app-active #app #screen-export .record-audit-toolbar{gap:10px 18px;padding:8px 10px;border-radius:20px}
body.desktop-app-active #app #screen-export .record-page-status strong{font:600 13px/1.3 var(--f-body);color:var(--g-text-2)}
body.desktop-app-active #app #screen-export .record-range-empty{color:var(--g-text-2)}
body.desktop-app-active #app #screen-export .range-batch-note{color:var(--g-text-3)}
body.desktop-app-active #app #screen-export .record-page-canvas{gap:12px;padding-top:0}
/* On a narrow bar the date controls take their own row instead of squeezing past the edge. */
body.desktop-app-active #app #screen-export .scope-extra{min-width:min-content}
body.desktop-app-active #app #screen-export .record-audit-toolbar .date-picker{grid-template-columns:minmax(8.5rem,1fr) auto}
body.desktop-app-active #app .trip-stop-index:not([hidden]){border-radius:22px;overflow:hidden}
body.desktop-app-active #app .trip-stop-index-head{padding:14px 14px 12px;border-bottom:1px solid var(--g-line);background:transparent}
body.desktop-app-active #app .trip-stop-index-head b{font:650 17px/1.15 var(--f-body);color:var(--g-ink)}
body.desktop-app-active #app .trip-stop-index-head :is(small,time){font:400 11.5px/1.4 var(--f-body);color:var(--g-text-3)}
body.desktop-app-active #app .trip-stop-index-list{gap:3px;padding:6px 6px 8px}
body.desktop-app-active #app .trip-stop-index-sequence{width:24px;height:24px;border-radius:999px;background:var(--g-accent-tint);box-shadow:inset 0 0 0 1px var(--g-accent-ring);color:var(--g-accent);font:600 11px/1 var(--f-mono)}
body.desktop-app-active #app .trip-stop-index-name-row b{font:600 14px/1.2 var(--f-body);color:var(--g-ink)}
body.desktop-app-active #app .trip-stop-index-location{font:400 11.5px/1.3 var(--f-body);color:var(--g-text-3)}
body.desktop-app-active #app .trip-stop-index-meta{font:400 10.5px/1.3 var(--f-mono);color:var(--g-text-3)}
body.desktop-app-active #app .trip-stop-index-actions button{min-height:30px;padding:4px 10px;font-size:12px}
body.desktop-app-active #app .trip-range-day b{font:600 14px/1.2 var(--f-body);color:var(--g-ink)}
body.desktop-app-active #app .trip-range-day small{font:400 11.5px/1.3 var(--f-body);color:var(--g-text-3)}

/* Document viewers: a sunken well where the white pages float. */
body.desktop-app-active #app .document-viewer{border:1px solid var(--g-doc-line);border-radius:22px;background:var(--g-doc-well);box-shadow:var(--g-doc-shadow)}
body.desktop-app-active #app .document-viewer-tools{
  position:relative;z-index:1;align-self:center;max-width:calc(100% - 16px);min-height:44px;margin:8px 8px 0;padding:0 8px;gap:4px 12px;
  border:1px solid var(--g-rim);border-radius:999px;
  background:var(--g-fill);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--g-float-shadow),var(--g-edge);color:var(--g-text-2);
}
body.desktop-app-active #app .viewer-page-actions,
body.desktop-app-active #app .viewer-zoom-actions{gap:2px}
body.desktop-app-active #app .document-viewer-tools button{min-height:32px;padding:0 11px}
body.desktop-app-active #app .document-viewer-tools span{font:500 11.5px/1.2 var(--f-mono);color:var(--g-text-3)}
body.desktop-app-active #app .document-viewer>.page-preview-scroll{padding:18px 12px 30px}
body.desktop-app-active #app :is(.doc.is-page-grid>.doc-batch-section,#fuelDoc.is-page-grid>.fuel-preview-page,#inspectionDoc.is-page-grid>.inspection-form-page,#disputeDoc.is-page-grid>.dispute-preview-page){border:0;border-radius:6px;box-shadow:var(--g-page-shadow)}
body.desktop-app-active #app .document-viewer.is-expanded{inset:12px;padding:10px;border-radius:26px;background:var(--g-thick);-webkit-backdrop-filter:blur(34px) saturate(170%);backdrop-filter:blur(34px) saturate(170%);box-shadow:var(--g-overlay-shadow),var(--g-thick-edge)}

/* Fuel */
body.desktop-app-active #app #fuelDateStrip{gap:10px 14px}
body.desktop-app-active #app #fuelDateStrip .date-label{font-size:18px;letter-spacing:-.01em}
body.desktop-app-active #app #fuelDateStrip .fuel-range-tabs{margin:0;padding:3px;gap:2px}
body.desktop-app-active #app #fuelDateStrip .fuel-range-tabs button{min-height:32px;padding:0 14px}
body.desktop-app-active #app #fuelDateStrip .date-actions>button{min-width:0;padding:0 13px}
body.desktop-app-active #app #screen-fuel .fuel-workspace{padding:0 4px 4px}
body.desktop-app-active #app #screen-fuel .fuel-workspace>.fuel-wrap{padding:22px 26px 18px}
body.desktop-app-active #app #screen-fuel .fuel-head{padding:0 0 18px;border:0;border-bottom:1px solid var(--g-line);border-radius:0;background:none;box-shadow:none}
body.desktop-app-active #app #screen-fuel .fuel-title{font:650 26px/1.12 var(--f-body);letter-spacing:-.02em;color:var(--g-ink)}
body.desktop-app-active #app #screen-fuel .fuel-sub{color:var(--g-text-2)}
body.desktop-app-active #app #screen-fuel .fuel-head-actions .mini-btn.primary{min-width:180px;padding:0 20px}
body.desktop-app-active #app #screen-fuel .fuel-card{border-right-color:var(--g-line)}
body.desktop-app-active #app #screen-fuel :is(.fuel-card .fv,.fuel-card.warn .fv){margin-top:6px;font:300 32px/1 var(--f-body);letter-spacing:-.03em;color:var(--g-ink);font-variant-numeric:tabular-nums}
body.desktop-app-active #app #screen-fuel .fuel-card.warn .fv{color:var(--g-warn)}
body.desktop-app-active #app #screen-fuel .fuel-card .fu{color:var(--g-text-3)}
body.desktop-app-active #app #screen-fuel .fuel-section-head h3{font:650 18px/1.2 var(--f-body);letter-spacing:-.01em;text-transform:none;color:var(--g-ink)}
body.desktop-app-active #app #screen-fuel .fuel-section-head span{color:var(--g-text-3)}
body.desktop-app-active #app #screen-fuel .desktop-fuel-row{margin:0;padding:14px 12px}
body.desktop-app-active #app #screen-fuel .desktop-fuel-row .fuel-name{font:600 15px/1.25 var(--f-body);color:var(--g-ink)}
body.desktop-app-active #app #screen-fuel :is(.desktop-fuel-row .fuel-meta,.desktop-fuel-meta){font:400 12.5px/1.4 var(--f-body);color:var(--g-text-3)}
body.desktop-app-active #app #screen-fuel .desktop-fuel-row .fuel-total{font:400 20px/1.2 var(--f-body);letter-spacing:-.02em;color:var(--g-ink);font-variant-numeric:tabular-nums}
body.desktop-app-active #app #screen-fuel .desktop-fuel-record-more{color:var(--g-text-2)}
body.desktop-app-active #app #screen-fuel :is(.desktop-fuel-record-more summary,.fuel-more>summary){width:max-content;margin-left:-12px}
body.desktop-app-active #app #screen-fuel .fuel-more{border-top-color:var(--g-line)}
body.desktop-app-active #app #screen-fuel.fuel-preview-open .fuel-preview{padding:0;border:0;background:none;box-shadow:none}
/* Beside the preview the column scrolls; its sections keep their height instead of shrinking into each other. */
body.desktop-app-active #app #screen-fuel .fuel-workspace>.fuel-wrap>*{flex-shrink:0}
body.desktop-app-active #app #screen-fuel .fuel-head{overflow:visible}
body.desktop-app-active #app #screen-fuel .fuel-grid{row-gap:16px}
body.desktop-app-active #app :is(#screen-fuel .fuel-preview-head,#screen-inspections .inspection-preview-head){padding:2px 10px 10px}
body.desktop-app-active #app #screen-fuel .fuel-preview-head h3{font:650 17px/1.2 var(--f-body);color:var(--g-ink)}
body.desktop-app-active #app .brand-badge{border-radius:10px;box-shadow:var(--g-badge-ring)}

/* Vehicle checks */
body.desktop-app-active #app #screen-inspections .inspection-audit-shell:has(.inspection-preview.is-visible){gap:12px;padding:0 4px 4px}
body.desktop-app-active #app #screen-inspections .inspection-audit-sidebar{padding:12px}
body.desktop-app-active #app #screen-inspections .inspection-audit-shell.is-setup .inspection-audit-sidebar{padding:22px}
body.desktop-app-active #app #screen-inspections :is(.inspection-head,.inspection-card){border:1px solid var(--g-tile-line);border-radius:18px;background:var(--g-tile-fill);box-shadow:var(--g-tile-edge)}
body.desktop-app-active #app #screen-inspections .inspection-card.is-complete{border-color:var(--g-ok-line);background:var(--g-ok-fill)}
body.desktop-app-active #app #screen-inspections :is(.inspection-head h2,.inspection-card h3){font-family:var(--f-body);font-weight:650;letter-spacing:-.01em;color:var(--g-ink)}
body.desktop-app-active #app #screen-inspections .inspection-pills span{border-color:var(--g-chip-line);border-radius:999px;background:var(--g-chip-fill);color:var(--g-text-2)}
body.desktop-app-active #app #screen-inspections :is(.inspection-head-kicker,.inspection-card-kicker){font:500 12px/1.3 var(--f-body);letter-spacing:.01em;text-transform:none;color:var(--g-text-3)}
body.desktop-app-active #app #screen-inspections .inspection-preview{padding:0;border:0;background:none;box-shadow:none}
body.desktop-app-active #app #screen-inspections .inspection-preview-head span{font:500 12px/1.3 var(--f-body);text-transform:none;letter-spacing:0;color:var(--g-text-3)}
body.desktop-app-active #app #screen-inspections .inspection-preview-head b{font:650 17px/1.2 var(--f-body);color:var(--g-ink)}
/* The record column is narrow: card actions wrap inside the card instead of pushing past it. */
body.desktop-app-active #app #screen-inspections .inspection-card-actions{flex-wrap:wrap}
body.desktop-app-active #app #screen-inspections .inspection-card-actions>.mini-btn{flex:1 1 auto;min-width:0;white-space:normal}
body.desktop-app-active #app #screen-inspections .inspection-vehicle-change-btn{white-space:normal}

/* Dispute packet */
body.desktop-app-active #app #screen-dispute .dispute-packet-status{padding:0 8px 12px;border:0;color:var(--g-text-2);font:500 13px/1.4 var(--f-body)}
body.desktop-app-active #app #screen-dispute :is(.dispute-workspace,.dispute-workspace.controls-open){gap:12px;padding:0 4px 4px}
body.desktop-app-active #app #screen-dispute :is(.dispute-pad,.dispute-workspace.controls-open .dispute-pad){gap:14px;padding:20px 18px}
body.desktop-app-active #app #screen-dispute :is(.dispute-field>.input,.dispute-field>.select,.dispute-extra>.input){min-height:46px;height:auto;padding:10px 14px}
body.desktop-app-active #app #screen-dispute .dispute-field>textarea.input{min-height:92px}
body.desktop-app-active #app #screen-dispute .dispute-pad .date-input{height:44px}
body.desktop-app-active #app #screen-dispute .dispute-pad .date-actions{justify-self:start}
body.desktop-app-active #app #screen-dispute .dispute-pad .date-actions>.mini-btn{min-height:32px;height:32px;padding:0 13px;font:600 13px/1.2 var(--f-body)}

/* Plan & billing, help, account */
body.desktop-app-active #app #screen-plan .plan-pad{padding:4px 4px 40px}
body.desktop-app-active #app #screen-plan .plan-screen-head h1{font:650 30px/1.1 var(--f-body);letter-spacing:-.02em;color:var(--g-ink)}
body.desktop-app-active #app #screen-plan :is(.plan-screen-note,.plan-current-card p,.plan-tier p,.plan-includes){color:var(--g-text-2)}
body.desktop-app-active #app #screen-plan :is(.plan-current-card,.plan-tier){padding:24px}
body.desktop-app-active #app #screen-plan .plan-current-mark{border-radius:999px;background:var(--g-accent-tint);box-shadow:inset 0 0 0 1px var(--g-accent-ring)}
body.desktop-app-active #app #screen-plan .plan-current-mark:after{border-color:var(--g-accent)}
body.desktop-app-active #app #screen-plan :is(.plan-current-kicker,.plan-fit){color:var(--g-accent);font:600 12px/1.3 var(--f-body);letter-spacing:.01em;text-transform:none}
body.desktop-app-active #app #screen-plan :is(.plan-current-card h1,.plan-tier h2){font-family:var(--f-body);font-weight:650;letter-spacing:-.015em;color:var(--g-ink)}
body.desktop-app-active #app #screen-plan :is(.plan-status-item,.plan-included-panel){border:1px solid var(--g-tile-line);border-radius:16px;background:var(--g-tile-fill);box-shadow:var(--g-tile-edge)}
body.desktop-app-active #app #screen-plan :is(.plan-status-item small,.plan-included-head span,.plan-price-alt){color:var(--g-text-3)}
body.desktop-app-active #app #screen-plan :is(.plan-status-item strong,.plan-included-head b){color:var(--g-ink)}
body.desktop-app-active #app #screen-plan .plan-price{border:1px solid var(--g-chip-line);border-radius:999px;background:var(--g-chip-fill);color:var(--g-ink)}
body.desktop-app-active #app #screen-plan .plan-note{border:1px solid var(--g-note-line);border-radius:14px;background:var(--g-note-fill);color:var(--g-note-ink)}
body.desktop-app-active #app #screen-plan .plan-check:after{border-color:var(--g-accent)}
body.desktop-app-active #app #screen-plan .plan-btn{min-height:44px}
body.desktop-app-active #app #screen-plan .plan-btn.plan-btn-annual{border-color:var(--g-accent-ring);color:var(--g-accent-strong)}
body.desktop-app-active #app #screen-plan a{color:var(--g-accent)}
body.desktop-app-active #app #screen-feedback .feedback-pad{padding:4px 4px 40px}
body.desktop-app-active #app #screen-feedback .feedback-head h1{font:650 26px/1.1 var(--f-body);letter-spacing:-.02em;color:var(--g-ink)}
body.desktop-app-active #app #screen-feedback .feedback-head p{color:var(--g-text-2)}
body.desktop-app-active #app #screen-feedback .feedback-form{padding:22px}
body.desktop-app-active #app #screen-feedback .owner-field select{height:46px;padding:0 14px}
body.desktop-app-active #app #screen-feedback .owner-field textarea{padding:13px 14px}
body.desktop-app-active #app #screen-feedback .owner-btn{min-width:150px;min-height:44px}
body.desktop-app-active #app #screen-feedback .owner-grant-result{color:var(--g-text-3)}
body.desktop-app-active #app #screen-feedback .owner-grant-result.warn{color:var(--g-bad)}
body.desktop-app-active #app #screen-feedback .owner-grant-result.ok{color:var(--g-ok)}
body.desktop-app-active #app .desktop-account-page{height:auto;flex:1;min-height:0;padding:4px 4px 40px}
body.desktop-app-active #app .desktop-account-section{gap:12px;padding:24px}
body.desktop-app-active #app .desktop-account-section h3{font:650 22px/1.15 var(--f-body);letter-spacing:-.015em;color:var(--g-ink)}
body.desktop-app-active #app .desktop-account-section p{color:var(--g-text-2)}
body.desktop-app-active #app .desktop-account-section small{color:var(--g-text-3)}
body.desktop-app-active #app .desktop-account-section .input{height:46px;padding:0 14px}

/* ---------- Windows ---------- */
body.desktop-app-active #scrim.on{background:var(--g-scrim);-webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%)}
body.desktop-app-active #sheet{
  top:12px;right:12px;bottom:12px;width:min(500px,calc(100vw - 288px));max-height:none;
  padding:18px 24px 30px;border:1px solid var(--g-thick-line);border-radius:26px;
  background:var(--g-thick);-webkit-backdrop-filter:blur(34px) saturate(170%);backdrop-filter:blur(34px) saturate(170%);
  box-shadow:var(--g-sheet-shadow),var(--g-thick-edge);
  color:var(--g-text);transform:translateX(calc(100% + 28px));transition:transform .6s var(--g-spring);
}
body.desktop-app-active #sheet.on{transform:none}
body.desktop-app-active #sheet h3{font:650 24px/1.12 var(--f-body);letter-spacing:-.015em;color:var(--g-ink)}
body.desktop-app-active #sheet :is(.lede,.micro-hint){color:var(--g-text-2)}
body.desktop-app-active #sheet :is(.detail-alert,.fuel-alert){color:var(--g-bad)}

body.desktop-app-active dialog.document-dialog{
  padding:26px;border:1px solid var(--g-thick-line);border-radius:28px;
  background:var(--g-thick);
  -webkit-backdrop-filter:blur(36px) saturate(170%);backdrop-filter:blur(36px) saturate(170%);
  box-shadow:var(--g-dialog-shadow),var(--g-thick-edge);
  color:var(--g-text);color-scheme:inherit;font-family:var(--f-body);
}
body.desktop-app-active dialog.document-dialog[open]{animation:gBloom .52s var(--g-spring) both}
body.desktop-app-active dialog.document-dialog::backdrop{background:var(--g-scrim);-webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%)}
body.desktop-app-active dialog.document-dialog h2{color:var(--g-ink);font:650 23px/1.15 var(--f-body);letter-spacing:-.015em}
body.desktop-app-active dialog.document-dialog p{color:var(--g-text-2)}
body.desktop-app-active dialog.document-dialog label{color:var(--g-text)}
body.desktop-app-active dialog.document-dialog .document-dialog-actions{gap:10px}
body.desktop-app-active dialog.document-dialog :is([data-close-library],[data-close-saved]){float:right;margin:-6px -6px 0 12px}
body.desktop-app-active dialog.document-dialog .saved-pdf-row{border-color:var(--g-line)}
body.desktop-app-active dialog.document-dialog .saved-pdf-row small{color:var(--g-text-3)}
body.desktop-app-active dialog.document-dialog a{color:var(--g-accent)}
body.desktop-app-active dialog.document-dialog.saved-pdf-preview{padding:12px;border-radius:24px}

body.desktop-app-active #photoViewer{padding:18px 22px 16px;background:var(--g-photo-backdrop);-webkit-backdrop-filter:blur(26px) saturate(140%);backdrop-filter:blur(26px) saturate(140%);color:var(--g-text)}
body.desktop-app-active #photoViewer .photo-viewer-head{padding:8px 8px 8px 18px;border:1px solid var(--g-rim);border-radius:999px;background:var(--g-fill);box-shadow:var(--g-edge)}
body.desktop-app-active #photoViewer .photo-viewer-kicker{color:var(--g-accent)}
body.desktop-app-active #photoViewer .photo-viewer-title{font:650 17px/1.2 var(--f-body);color:var(--g-ink)}
body.desktop-app-active #photoViewer .photo-viewer-stage{border:1px solid var(--g-doc-line);border-radius:22px;background:var(--g-doc-well);box-shadow:var(--g-doc-shadow)}
body.desktop-app-active #photoViewer .photo-viewer-meta{color:var(--g-text-3)}

body.desktop-app-active #toast{
  gap:12px;padding:10px 18px 10px 10px;border:1px solid var(--g-thick-line);border-radius:999px;
  background:var(--g-thick);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);
  box-shadow:var(--g-toast-shadow),var(--g-thick-edge);
  color:var(--g-ink);font:600 14px/1.25 var(--f-body);
  transition:transform .6s var(--g-spring),opacity .25s ease,visibility .25s;
}
body.desktop-app-active #toast .ti{width:34px;height:34px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--g-chip-line)}
body.desktop-app-active #toast .tt small{font:400 12px/1.35 var(--f-body);color:var(--g-text-2)}
body.desktop-app-active #toast.warn{border-color:var(--g-bad-line)}

/* ---------- Droplets and glass menus (desktop-glass.js) ---------- */
.md-glass-layer{position:fixed;inset:0;z-index:6;pointer-events:none}
.md-glass-clip{position:absolute;overflow:hidden;pointer-events:none}
.md-glass-drop{
  position:absolute;left:0;top:0;border-radius:14px;opacity:0;pointer-events:none;will-change:transform,width,height;
  background:radial-gradient(160px 90px at var(--mx,30%) var(--my,0%),var(--g-lens-glint),transparent 70%),var(--g-lens-fill);
  box-shadow:var(--g-lens-edge);
  -webkit-backdrop-filter:var(--g-lens-filter);backdrop-filter:var(--g-lens-filter);
  transition:opacity .22s ease;
}
.md-glass-drop.is-on{opacity:1}
.md-glass-drop.is-hover{background:radial-gradient(160px 90px at var(--mx,30%) var(--my,0%),var(--g-lens-glint),transparent 70%),var(--g-lens-hover-fill);box-shadow:var(--g-lens-hover-edge);-webkit-backdrop-filter:var(--g-lens-hover-filter);backdrop-filter:var(--g-lens-hover-filter)}
.md-glass-drop.is-pill{border-radius:999px}
.md-glass-drop.is-select{box-shadow:var(--g-lens-select-edge)}
body.document-preview-expanded .md-glass-layer{display:none}

.md-glass-native{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip-path:inset(50%)!important}
body.desktop-app-active .md-glass-select{
  position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;max-width:100%;
  min-height:40px;padding:0 12px 0 14px;text-align:left;cursor:pointer;
  border:1px solid var(--g-field-line);border-radius:14px;background:var(--g-well);
  box-shadow:var(--g-field-shadow);
  color:var(--g-ink);font:400 14px/1.25 var(--f-body);transition:border-color .2s ease,box-shadow .25s ease;
}
body.desktop-app-active .md-glass-select:hover:not(:disabled){border-color:var(--g-field-line-hover)}
body.desktop-app-active .md-glass-select[aria-expanded="true"]{border-color:var(--g-focus-line);box-shadow:0 0 0 4px var(--g-focus-ring),var(--g-field-shadow)}
body.desktop-app-active .md-glass-select:disabled{opacity:.5;cursor:not-allowed}
body.desktop-app-active #app :is(.export-bar,.range-preview-field) .md-glass-select{height:38px;min-height:38px;border-radius:999px}
body.desktop-app-active #app :is(#screen-dispute .dispute-field,#screen-feedback .owner-field) .md-glass-select,
body.desktop-app-active :is(#app .desktop-stop-detail,#sheet) .md-glass-select{width:100%;min-height:46px}
.md-glass-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-glass-select-chev{flex:0 0 auto;width:16px;height:16px;opacity:.7;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.md-glass-select[aria-expanded="true"] .md-glass-select-chev{transform:rotate(180deg)}
.md-glass-menu{
  position:fixed;z-index:90;min-width:180px;max-height:min(360px,60vh);margin:0;padding:6px;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--g-menu-line,rgba(255,255,255,.14));border-radius:20px;
  background:var(--g-menu-fill,linear-gradient(180deg,rgba(28,34,48,.84),rgba(12,16,25,.88)));
  -webkit-backdrop-filter:blur(30px) saturate(175%);backdrop-filter:blur(30px) saturate(175%);
  box-shadow:var(--g-menu-shadow,0 34px 80px -28px rgba(0,0,0,.95));
  color:var(--g-text,#DCE3EF);font:400 14px/1.25 'Hanken Grotesk',system-ui,sans-serif;outline:none;
  opacity:0;transform:translateY(-6px) scale(.94,.86);transform-origin:50% 0;filter:blur(6px);
  transition:opacity .18s ease,transform .5s linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.9%,1.065 23.4%,1.079 25.9%,1.074 29.3%,1.016 39.5%,.997 46%,.993 52.7%,1.001 68.6%,1),filter .3s ease;
}
.md-glass-menu.is-up{transform:translateY(6px) scale(.94,.86);transform-origin:50% 100%}
.md-glass-menu.is-open{opacity:1;transform:none;filter:none}
.md-glass-menu-drop{
  position:absolute;left:6px;right:6px;top:0;height:38px;border-radius:13px;opacity:0;pointer-events:none;
  background:var(--g-menu-drop);box-shadow:var(--g-menu-drop-edge);
  transition:transform .42s linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.9%,1.065 23.4%,1.079 25.9%,1.074 29.3%,1.016 39.5%,.997 46%,.993 52.7%,1.001 68.6%,1),height .3s ease,opacity .2s ease;
}
.md-glass-option{position:relative;z-index:1;display:flex;align-items:center;min-height:38px;padding:8px 12px 8px 34px;border-radius:13px;cursor:pointer;user-select:none;transition:color .15s ease}
.md-glass-option.is-active{color:var(--g-ink,#F4F7FC)}
.md-glass-option[aria-selected="true"]{color:var(--g-ink,#F4F7FC);font-weight:600}
.md-glass-option[aria-selected="true"]::before{content:"";position:absolute;left:14px;top:50%;width:9px;height:5px;border-left:2px solid var(--g-accent,#6CEBDF);border-bottom:2px solid var(--g-accent,#6CEBDF);transform:translateY(-70%) rotate(-45deg)}
.md-glass-option[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.md-glass-group{padding:10px 12px 4px;color:var(--g-text-3,#8592A9);font:600 11.5px/1.2 'Hanken Grotesk',system-ui,sans-serif}

/* ---------- Sign in: the bubble ---------- */
body:has(#screen-auth.is-active) #screen-auth{position:relative;isolation:isolate;overflow:hidden}
body:has(#screen-auth.is-active) #screen-auth::before,
body:has(#screen-auth.is-active) #screen-auth::after{
  content:"";position:absolute;z-index:-1;left:max(3vw,calc(50% - 660px));top:calc(50% + 30px);width:min(40vw,560px);aspect-ratio:1;
  border-radius:48% 52% 55% 45%/52% 46% 54% 48%;pointer-events:none;translate:0 -50%;
}
body:has(#screen-auth.is-active) #screen-auth::before{
  background:conic-gradient(from calc(var(--g-film) + var(--g-tilt,0deg)),rgba(92,240,222,.95),rgba(111,140,255,.25) 12%,rgba(185,139,255,.9) 24%,rgba(255,122,192,.95) 38%,rgba(255,197,107,.3) 52%,rgba(122,240,181,.85) 66%,rgba(111,140,255,.2) 80%,rgba(92,240,222,.95));
  -webkit-mask:radial-gradient(closest-side,transparent 64%,rgba(0,0,0,.35) 80%,#000 94%,transparent 100%);
  mask:radial-gradient(closest-side,transparent 64%,rgba(0,0,0,.35) 80%,#000 94%,transparent 100%);
  filter:blur(1.5px) saturate(1.15);opacity:var(--g-orb-ring);
  animation:gWobble 14s ease-in-out infinite alternate;
}
body:has(#screen-auth.is-active) #screen-auth::after{
  background:
    radial-gradient(18% 12% at calc(30% + var(--g-lx,0%)) calc(22% + var(--g-ly,0%)),var(--g-orb-glint),transparent 70%),
    radial-gradient(10% 7% at calc(74% - var(--g-lx,0%)) calc(80% - var(--g-ly,0%)),rgba(255,255,255,.22),transparent 70%),
    radial-gradient(40% 30% at 68% 72%,rgba(255,122,192,.16),transparent 70%),
    radial-gradient(42% 34% at 28% 64%,rgba(92,240,222,.14),transparent 70%),
    radial-gradient(closest-side,transparent 70%,rgba(160,190,255,.07) 96%,transparent 100%);
  box-shadow:var(--g-orb-sphere);
  animation:gWobble 14s ease-in-out infinite alternate;
}
@keyframes gWobble{
  0%{border-radius:48% 52% 55% 45%/52% 46% 54% 48%;rotate:0deg;--g-film:0deg}
  50%{border-radius:55% 45% 47% 53%/46% 55% 45% 54%;rotate:8deg;--g-film:120deg}
  100%{border-radius:45% 55% 52% 48%/55% 48% 52% 45%;rotate:-6deg;--g-film:240deg}
}
body:has(#screen-auth.is-active) #screen-auth .auth-shell .auth-card{padding:30px;border-radius:28px;background:var(--g-thick);-webkit-backdrop-filter:blur(32px) saturate(170%);backdrop-filter:blur(32px) saturate(170%)}
body:has(#screen-auth.is-active) #screen-auth .auth-head .brand{border-radius:14px}
body:has(#screen-auth.is-active) #screen-auth .auth-hl{font:650 clamp(40px,4.4vw,60px)/1.02 var(--f-body);letter-spacing:-.035em;color:var(--g-ink);text-shadow:var(--g-hl-shadow)}
body:has(#screen-auth.is-active) #screen-auth .auth-hl em{background:var(--g-hl-fill);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
body:has(#screen-auth.is-active) #screen-auth .auth-lede{color:var(--g-text-2);font:400 16.5px/1.55 var(--f-body)}
body:has(#screen-auth.is-active) #screen-auth .auth-title{font:650 28px/1.1 var(--f-body);letter-spacing:-.02em;color:var(--g-ink)}
body:has(#screen-auth.is-active) #screen-auth .auth-copy{color:var(--g-text-2)}
body:has(#screen-auth.is-active) #screen-auth .auth-field input{height:48px;padding:0 16px}
body:has(#screen-auth.is-active) #screen-auth .auth-shell .auth-primary{width:100%;min-height:50px;font-size:15px}
body:has(#screen-auth.is-active) #screen-auth .auth-guest{width:100%;min-height:44px;padding:0 16px}
body:has(#screen-auth.is-active) #screen-auth .auth-guest-note{text-align:center;color:var(--g-text-3)}
body:has(#screen-auth.is-active) #screen-auth .auth-row{color:var(--g-text-3)}

/* ---------- Narrow desktops keep the compact rail ---------- */
@media (max-width:1280px){
  body.desktop-app-active #app{grid-template-columns:136px minmax(0,1fr)}
  body.desktop-app-active #app>.desktop-nav{padding:14px 8px 8px}
  body.desktop-app-active #app :is(.desktop-nav-links button,.desktop-nav-account,.desktop-nav-session){padding:9px 10px}
  body.desktop-app-active #app :is(.desktop-nav-links button,.desktop-nav-account,.desktop-nav-session)>span{font-size:13.5px;white-space:normal}
  body.desktop-app-active #app #screen-dispute .dispute-workspace.controls-open .dispute-pad{padding:16px 18px;border-bottom:1px solid var(--g-rim)}
}

/* ---------- Motion ---------- */
@keyframes gFade{from{opacity:0}to{opacity:1}}
@keyframes gRise{from{opacity:0;transform:translateY(10px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes gBloom{from{opacity:0;transform:scale(.9);filter:blur(10px)}60%{opacity:1;filter:none}to{opacity:1;transform:none;filter:none}}
/* A theme change spreads from the switch (desktop-glass.js animates the reveal). */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){
  body.desktop-app-active,body:has(#screen-auth.is-active){--g-spring:ease}
  body:has(#screen-auth.is-active) #screen-auth::before,
  body:has(#screen-auth.is-active) #screen-auth::after,
  .md-glass-drop,.md-glass-menu,.md-glass-menu-drop{animation:none!important;transition:none!important}
}
@media (prefers-reduced-transparency:reduce){
  body.desktop-app-active,body:has(#screen-auth.is-active){--g-fill:#121722;--g-thick:#141A26;--g-well:#080B12;--g-menu-fill:#141A26}
  html[data-md-theme="light"] body.desktop-app-active,html[data-md-theme="light"] body:has(#screen-auth.is-active){--g-fill:#FFFFFF;--g-thick:#FFFFFF;--g-well:#F3F5F9;--g-menu-fill:#FFFFFF}
  body.desktop-app-active *,body:has(#screen-auth.is-active) *,.md-glass-menu{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-contrast:more){
  body.desktop-app-active,body:has(#screen-auth.is-active){--g-rim:rgba(255,255,255,.34);--g-line:rgba(255,255,255,.2);--g-text-2:#D2DAE7;--g-text-3:#B4BED0}
  html[data-md-theme="light"] body.desktop-app-active,html[data-md-theme="light"] body:has(#screen-auth.is-active){--g-rim:rgba(15,23,42,.3);--g-line:rgba(15,23,42,.2);--g-text-2:#334155;--g-text-3:#475569}
}