:root {
  --ink: #18231f;
  --ink-2: #273630;
  --muted: #5f6d66;
  --line: #e7e9e4;
  --paper: #f6f6f2;
  --white: #fff;
  --sidebar: #17231f;
  --sidebar-2: #22312b;
  --orange: #f36b37;
  --orange-soft: #fff0e8;
  --green: #198b67;
  --green-soft: #e8f5ef;
  --blue: #3578df;
  --blue-soft: #eaf1fd;
  --violet: #7959cf;
  --violet-soft: #f0ebfb;
  --red: #c84d54;
  --red-soft: #faecec;
  --shadow: 0 18px 45px rgba(29, 42, 36, .08);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #f8f8f7 url('/assets/app-background.png') center / 260px auto repeat fixed; background-blend-mode: multiply; }
body { min-height: 100vh; margin: 0; color: var(--ink); font-family: Inter, "Segoe UI", Arial, sans-serif; background: transparent; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.is-hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { display: block; color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .18em; margin-bottom: 9px; }
.eyebrow.light { color: #ff9a6f; }

.session-restore { display: none; }.restoring-session .session-restore { position: fixed; z-index: 1000; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(145deg, #f3f3f3, #fff); }.restoring-session .session-restore img { width: min(230px, 58vw); height: auto; }.restoring-session .session-restore p { margin: 0; color: #66736d; font-size: 12px; font-weight: 700; }.session-restore-track { position: relative; width: 132px; height: 3px; overflow: hidden; border-radius: 99px; background: #e5e7e5; }.session-restore-track i { position: absolute; inset: 0 auto 0 0; width: 46%; border-radius: inherit; background: linear-gradient(90deg, #ef5a29, #f36b37); animation: restore-session-progress 1s ease-in-out infinite alternate; }.restoring-session #login-screen, .restoring-session #app-shell { visibility: hidden; }@keyframes restore-session-progress { from { transform: translateX(-35%); } to { transform: translateX(155%); } }@media (prefers-reduced-motion: reduce) { .session-restore-track i { animation: none; left: 27%; } }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(500px, 1.17fr) minmax(430px, .83fr); }
.login-art { position: relative; isolation: isolate; overflow: hidden; min-height: 720px; padding: clamp(36px, 5vw, 76px); color: #fff; background: radial-gradient(circle 600px at 72% 42%, rgba(29,78,57,.48), transparent 75%), linear-gradient(135deg, #081711, #05100c); display: flex; flex-direction: column; }
.login-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,15,11,.36), transparent 58%); }
.login-radar { position: absolute; inset: 0; z-index: -1; opacity: .7; pointer-events: none; }
.login-radar svg { width: 100%; height: 100%; min-width: 760px; transform: translateX(5%); }
.login-radar circle { stroke: #23533e; stroke-width: 1; stroke-dasharray: 4 6; opacity: .52; }.login-radar circle:nth-child(3) { stroke-dasharray: none; opacity: .27; }.login-radar circle:nth-child(4) { opacity: .2; }
.login-radar .radar-cross { stroke: #1e4635; stroke-width: .8; stroke-dasharray: 8 7; opacity: .45; }.login-radar .radar-route { stroke: #f15a24; stroke-width: 1.8; stroke-dasharray: 7 8; opacity: .6; }
.radar-node { transform-origin: center; }.radar-node circle:first-child { fill: #f15a24; fill-opacity: .16; stroke: none; animation: radar-pulse 3.3s ease-in-out infinite; }.radar-node circle:nth-child(2) { fill: #f15a24; stroke: none; }.radar-node circle:last-child { fill: #fff; stroke: none; }.node-one { transform: translate(264px, 778px); }.node-two { transform: translate(344px, 621px); }.node-three { transform: translate(520px, 478px); }.node-four { transform: translate(740px, 520px); }.node-two circle:first-child, .node-four circle:first-child { animation-delay: 1.1s; }
@keyframes radar-pulse { 0%,100% { transform: scale(.8); opacity: .4; } 50% { transform: scale(1.35); opacity: .08; } }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 20px; letter-spacing: -.03em; }
.brand-light { color: #fff; }
.brand-logo { object-fit: contain; }
.login-brand-row { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.brand-logo-login { width: min(250px, 39vw); height: 78px; object-position: left center; }
.hub-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 11px; border: 1px solid rgba(55,130,95,.36); border-radius: 999px; color: #9ed8b5; background: rgba(4,24,16,.42); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; backdrop-filter: blur(8px); }.hub-status i { width: 7px; height: 7px; border-radius: 50%; background: #52bd8e; box-shadow: 0 0 0 4px rgba(82,189,142,.12); }
.brand-logo-sidebar { width: 164px; height: 52px; }
.brand-logo-mobile { width: 230px; height: 92px; }
.login-copy { position: relative; z-index: 1; margin: auto 0; max-width: 600px; }.login-copy .eyebrow { margin-bottom: 18px; color: #f15a24; font-size: 11px; letter-spacing: .2em; }.login-copy .eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 1px 0; border-radius: 50%; background: currentColor; }
.login-copy h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(52px, 5.4vw, 76px); line-height: 1.04; letter-spacing: -.04em; margin: 0 0 25px; font-weight: 500; }.login-copy p { max-width: 500px; color: rgba(211,235,222,.74); font-size: 16px; line-height: 1.75; }
.login-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 18px; padding-top: 22px; border-top: 1px solid rgba(44,100,73,.44); color: rgba(169,211,185,.68); font-size: 11px; letter-spacing: .03em; }.login-foot i { color: #f15a24; font-style: normal; }.login-foot b { padding: 0 8px; color: #3f7459; }.login-foot small { color: rgba(111,178,138,.56); font-size: 9px; letter-spacing: .12em; }
.login-panel { position: relative; background: #fff; display: grid; place-items: center; padding: 54px clamp(32px, 6vw, 96px); }.login-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(245,247,245,.65), transparent 34%); pointer-events: none; }
.login-card { position: relative; z-index: 1; width: min(430px, 100%); }.login-card h2 { font-family: Georgia, serif; font-weight: 500; font-size: clamp(34px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 12px; }.login-card > p.muted { line-height: 1.65; margin: 0 0 30px; font-size: 13px; }
.mobile-brand { display: none; margin-bottom: 45px; }
label { display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); font-size: 12px; font-weight: 750; letter-spacing: .02em; }
input, select, textarea { width: 100%; color: var(--ink); border: 1px solid #daddd7; border-radius: 10px; background: #fff; padding: 12px 13px; outline: none; transition: border .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(243,107,55,.12); }
textarea { resize: vertical; }
.field-hint { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 10px 0 20px; }
.login-card label { gap: 8px; color: #47534d; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }.login-card label input { margin-top: 1px; padding: 14px 15px; border-color: #e0e6e1; border-radius: 12px; background: #fbfcfb; color: #26342e; font-size: 13px; font-weight: 500; letter-spacing: normal; text-transform: none; }.login-card label input:focus { background: #fff; }
.login-password { margin-top: 20px; }.password-control { position: relative; margin-bottom: 17px; }.password-control input { padding: 14px 64px 14px 15px; border-color: #e0e6e1; border-radius: 12px; background: #fbfcfb; }.password-control button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #e85c2b; font-size: 10px; font-weight: 800; }
.login-security { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 21px; color: #79847e; font-size: 11px; }.login-security span { display: inline-flex; align-items: center; gap: 7px; }.login-security i { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid #f15a24; border-radius: 4px; color: #f15a24; font-size: 10px; font-style: normal; }.login-security small { color: #5c9473; font-size: 10px; }
.login-card .button-wide { justify-content: center; gap: 10px; width: 100%; padding: 14px 17px; border-radius: 12px; background: linear-gradient(90deg, #ef5a29, #f6781f); box-shadow: 0 14px 24px rgba(241,90,36,.2); }.login-card .button-wide:hover { background: linear-gradient(90deg, #db491b, #eb6610); }.login-card .button-wide b { font-size: 17px; line-height: 1; transition: transform .2s; }.login-card .button-wide:hover b { transform: translateX(4px); }
code { background: #eceeea; border-radius: 5px; padding: 2px 5px; word-break: break-all; }
.form-error { min-height: 18px; margin: 10px 0; color: var(--red); font-size: 12px; }
.login-alert { display: none; margin: 0 0 20px; padding: 11px 13px; border: 1px solid rgba(220,100,42,.25); border-radius: 10px; color: #a74219; background: #fff6ef; font-size: 11px; line-height: 1.45; }.login-alert:not(:empty) { display: block; }
.login-protection { margin: 26px 0 0; color: #a2aaa5; font-size: 10px; text-align: center; }

/* Compact illustrated login workspace */
.login-shell { display: grid; grid-template-columns: 1fr; place-items: center; min-height: 100vh; padding: clamp(16px, 3vw, 42px); background: linear-gradient(145deg, #e7e7e7, #f5f5f5); }
.login-frame { width: min(1080px, 100%); min-height: min(670px, calc(100vh - 32px)); display: grid; grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr); overflow: hidden; border: 1px solid #dedede; border-radius: 30px; background: #fff; box-shadow: 0 24px 65px rgba(40, 45, 42, .14); }
.login-panel { display: grid; place-items: center; min-height: 0; padding: clamp(32px, 6vw, 74px); background: #fff; }
.login-card { width: min(350px, 100%); }.login-product-logo { display: block; width: 230px; height: 72px; margin: 0 0 34px; object-position: left center; }.login-card .eyebrow { margin-bottom: 8px; color: #f15a24; font-size: 9px; }.login-card h2 { font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 27px; font-weight: 800; letter-spacing: -.04em; }.login-card > p.muted { margin-bottom: 26px; color: #7d8782; font-size: 12px; line-height: 1.6; }
.login-card label { color: #56635d; font-size: 9px; letter-spacing: .1em; }.login-card label input { padding: 12px 13px; border: 1px solid #e4e8e5; border-radius: 7px; background: #fbfcfc; font-size: 12px; }.login-password { margin-top: 16px; }.password-control input { padding: 12px 58px 12px 13px; border: 1px solid #e4e8e5; border-radius: 7px; background: #fbfcfc; }.login-security { margin: 14px 0 18px; font-size: 10px; }.login-security i { width: 14px; height: 14px; border-color: #4cc98b; color: #198b67; }.login-security small { display: none; }
.login-card .button-wide { min-height: 44px; border-radius: 7px; padding: 11px 16px; background: linear-gradient(90deg, #ef5a29, #f36b37); box-shadow: 0 10px 18px rgba(241,90,36,.22); }.login-card .button-wide:hover { background: linear-gradient(90deg, #df471d, #ec5f2b); }.login-alert { border-radius: 7px; font-size: 10px; }
.login-submit { position: relative; overflow: hidden; }.login-submit-label { display: inline-flex; align-items: center; gap: 10px; }.login-submit-loader { display: none; align-items: center; justify-content: center; height: 30px; }.login-submit.is-loading .login-submit-label { display: none; }.login-submit.is-loading .login-submit-loader { display: flex; }.login-submit.is-loading { cursor: wait; }.login-truck-wrapper { position: relative; display: block; width: 66px; height: 32px; overflow: hidden; }.login-truck-svg { position: absolute; z-index: 1; bottom: 1px; left: 6px; width: 54px; height: auto; overflow: visible; animation: login-truck-bounce .72s linear infinite; }.login-truck-road { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.95); }.login-truck-road::before, .login-truck-road::after { position: absolute; top: 0; height: 100%; content: ""; border-radius: inherit; background: #f36b37; animation: login-road-move 1.1s linear infinite; }.login-truck-road::before { width: 18px; right: -20px; box-shadow: -29px 0 #fff, -57px 0 #fff; }.login-truck-road::after { width: 8px; right: -52px; animation-delay: -.48s; box-shadow: -25px 0 #fff, -51px 0 #fff; }@keyframes login-truck-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1px); } }@keyframes login-road-move { from { transform: translateX(0); } to { transform: translateX(-74px); } }@media (prefers-reduced-motion: reduce) { .login-truck-svg, .login-truck-road::before, .login-truck-road::after { animation: none; } }
.login-art { position: relative; display: block; min-height: 0; padding: 0; overflow: hidden; color: #173653; background: linear-gradient(145deg, #f8fcff 0%, #ecf8ff 100%); }.login-art::before { display: none; }.login-art::after { content: ""; position: absolute; z-index: 0; top: auto; left: auto; width: 520px; height: 520px; right: -120px; bottom: -180px; border: 0; border-radius: 50%; background: #bce5ff; opacity: .86; }.login-visual-sky { position: absolute; z-index: 0; right: -55px; top: 95px; width: 390px; height: 355px; border-radius: 48% 52% 40% 60%; background: #aee0ff; }.login-visual-hill { position: absolute; z-index: 1; border-radius: 50%; background: #d7efff; }.hill-one { left: -105px; bottom: 85px; width: 410px; height: 220px; }.hill-two { right: -100px; bottom: 66px; width: 380px; height: 180px; background: #c7e9ff; }.login-rider { position: absolute; z-index: 3; right: -55px; bottom: -37px; width: min(620px, 86%); height: auto; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(16,70,110,.17)); }.login-ground { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; height: 56px; background: linear-gradient(90deg, #ffc19d, #ffd0b1); box-shadow: inset 0 8px 0 rgba(204,112,64,.14); }.login-visual-copy { position: absolute; z-index: 5; top: 53px; right: 44px; left: 42px; color: #39749d; }.login-visual-copy span { display: block; font-size: 9px; font-weight: 800; letter-spacing: .15em; }.login-visual-copy strong { display: block; max-width: 230px; margin-top: 8px; color: #1d5d8b; font-family: Georgia, serif; font-size: 27px; font-weight: 500; line-height: 1.04; }

.button { border: 0; border-radius: 10px; padding: 11px 16px; font-size: 12px; font-weight: 800; transition: transform .15s, background .15s; }
.button:active { transform: translateY(1px); }
.button-primary { color: #fff; background: var(--orange); box-shadow: 0 7px 16px rgba(243,107,55,.2); }
.button-primary:hover { background: #dd5d2e; }
.button-secondary { background: #fff; border: 1px solid var(--line); }
.button-danger { color: #fff; background: var(--red); box-shadow: 0 7px 16px rgba(161,52,55,.16); }
.button-danger:hover { background: #892c2f; }
.button-wide { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 14px 17px; }
.text-button { border: 0; background: transparent; color: var(--orange); font-size: 11px; font-weight: 800; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 210px minmax(0, 1fr); transition: grid-template-columns .24s ease; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 18px 18px 18px; color: #d9e1dc; background: var(--sidebar); display: flex; flex-direction: column; z-index: 20; transition: padding .24s ease; }
.sidebar-backdrop { display: none; }
.sidebar .brand { padding: 0 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-logo-sidebar-compact { display: none; }
.sidebar-collapse { position: absolute; top: 32px; right: -17px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #e2e7e3; border-radius: 50%; color: #41534a; background: #fff; box-shadow: 0 5px 14px rgba(22,35,31,.15); z-index: 2; transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.sidebar-collapse svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform .2s ease; }
.sidebar-collapse:hover { color: #fff; background: var(--orange); border-color: var(--orange); box-shadow: 0 7px 18px rgba(255,102,52,.3); transform: scale(1.05); }
.sidebar-label { color: #6f8178; font-size: 9px; letter-spacing: .18em; font-weight: 800; margin: 29px 13px 10px; }
.nav-list { display: flex; flex-direction: column; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 9px 12px; border: 0; border-radius: 10px; color: #c8d9d5; background: transparent; font-size: 13px; font-weight: 650; text-align: left; transition: color .16s ease, background .16s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: #2d443b; box-shadow: none; }
.nav-icon { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; color: #b4d4cc; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; }
.nav-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.active .nav-icon { color: #d8f0e8; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); }
.nav-count { margin-left: auto; min-width: 21px; padding: 3px 6px; border-radius: 10px; background: rgba(255,255,255,.08); color: #c5d0ca; font-size: 9px; text-align: center; }
.sidebar-bottom { margin-top: auto; }
.sidebar-zoom-controls { display: flex; min-height: 32px; margin: 10px 9px 0; align-items: center; justify-content: flex-start; gap: 7px; }
.sidebar-zoom-controls button { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; color: #b4d4cc; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: rgba(255,255,255,.04); font: inherit; font-size: 18px; line-height: 1; }
.sidebar-zoom-controls button:hover, .sidebar-zoom-controls button:focus-visible { color: #fff; border-color: var(--orange); background: rgba(243,107,55,.25); outline: none; }
.sidebar-zoom-controls button:disabled { cursor: not-allowed; opacity: .35; }
.sidebar-zoom-controls span { min-width: 37px; color: #819188; font-size: 10px; font-weight: 750; text-align: center; }
.sidebar-version { margin: 13px 9px 0; color: #819188; font-size: 9px; font-weight: 700; letter-spacing: .03em; text-align: left; }
.user-card { position: relative; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 12px; padding: 20px 9px 5px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #3a5046; font-size: 12px; font-weight: 800; }
.user-card strong, .user-card span { display: block; }.user-card strong { color: #fff; font-size: 11px; }.user-card span { color: #819188; font-size: 9px; margin-top: 3px; text-transform: capitalize; }
.user-card .online-dot { position: absolute; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #52bd8e; }

.app-shell.sidebar-collapsed { grid-template-columns: 80px minmax(0, 1fr); }
.sidebar-collapsed .sidebar { padding: 18px 10px 18px; }
.sidebar-collapsed .sidebar .brand { justify-content: center; padding: 0 0 14px; }
.sidebar-collapsed .brand-logo-sidebar { display: none; }
.sidebar-collapsed .brand-logo-sidebar-compact { display: block; width: 48px; height: 48px; }
.sidebar-collapsed .sidebar-collapse svg { transform: rotate(0deg); }
.sidebar-collapsed .sidebar-label { display: none; }
.sidebar-collapsed .nav-list { margin-top: 29px; }
.sidebar-collapsed .nav-item { justify-content: center; gap: 0; padding: 0; font-size: 0; }
.sidebar-collapsed #logout-button { width: 100%; justify-content: center; align-self: stretch; }
.sidebar-collapsed .sidebar-zoom-controls { margin: 10px 0 0; justify-content: center; gap: 4px; }
.sidebar-collapsed .sidebar-zoom-controls button { width: 27px; height: 27px; }
.sidebar-collapsed .sidebar-zoom-controls span { display: none; }
.sidebar-collapsed .sidebar-version { margin: 13px 0 0; font-size: 9px; text-align: center; }
.sidebar-collapsed .sidebar-version span { display: none; }
.sidebar-collapsed .sidebar-version::before { content: "v"; }
.sidebar-collapsed .nav-icon { flex-basis: 26px; width: 26px; }
.sidebar-collapsed .nav-count { display: none; }
.sidebar-collapsed .user-card { justify-content: center; padding: 20px 0 5px; }
.sidebar-collapsed .user-card > div:not(.avatar), .sidebar-collapsed .user-card .online-dot { display: none; }

.main { min-width: 0; }
.topbar { height: 72px; padding: 0 34px; background: rgba(255,255,255,.91); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); display: none; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
.module-bar { position: sticky; top: 0; z-index: 12; min-height: 64px; display: flex; align-items: stretch; padding: 0 34px; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px rgba(24,38,32,.025); }
.module-bar > strong { display: flex; align-items: center; flex: 0 0 auto; padding-right: 14px; color: #7c8982; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.module-divider { display: flex; align-items: center; flex: 0 0 auto; padding-right: 7px; color: #a8b0ac; font-size: 14px; font-weight: 400; }
.module-tabs { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.module-tab { position: relative; flex: 0 0 auto; min-width: max-content; padding: 0 17px; border: 0; background: transparent; color: #6f7a75; font-size: 11px; font-weight: 750; }
.module-tab::after { content: ""; position: absolute; left: 17px; right: 17px; bottom: 0; height: 2px; background: transparent; }
.module-tab:hover { color: var(--ink); background: #fafaf8; }.module-tab.active { color: var(--orange); background: #fff; }.module-tab.active::after { background: var(--orange); }
.module-menu-button { display: none; align-self: center; margin-right: 12px; }
.merchant-announcements { position: sticky; top: 64px; z-index: 11; padding: 10px 34px; border-bottom: 1px solid #f0c9b8; background: #fff6ef; box-shadow: 0 4px 14px rgba(69,43,30,.06); }
.merchant-announcement { display: flex; align-items: center; gap: 12px; max-width: 1532px; margin: auto; color: #6f331d; }
.merchant-announcement + .merchant-announcement { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0d8cd; }
.merchant-announcement-icon { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #fff; background: var(--orange); font-size: 14px; font-weight: 900; }
.merchant-announcement-copy { min-width: 0; }.merchant-announcement-copy strong { display: block; font-size: 11px; }.merchant-announcement-copy span { display: block; margin-top: 2px; color: #7d4a35; font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.global-search, .filter-search { display: flex; align-items: center; gap: 9px; color: #98a29c; }
.global-search input, .filter-search input { border: 0; background: transparent; box-shadow: none; padding: 8px 0; }
.global-search { width: min(420px, 42vw); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.connection { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; margin-right: 7px; }.connection i { width: 7px; height: 7px; border-radius: 50%; background: #36ad7b; box-shadow: 0 0 0 4px #e7f5ee; }
.mobile-menu { display: none; }
.content { padding: 32px 34px 50px; max-width: 1600px; margin: auto; }
.page { display: none; }.page.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-heading { display: none; }
.page-action-toolbar { justify-content: flex-end; }
.page-action-toolbar > span { flex: 1; }
.page-heading.compact { align-items: center; }
.page-heading h1 { font-family: Georgia, serif; font-weight: 500; font-size: 38px; letter-spacing: -.035em; margin: 0 0 5px; }
.page-heading p { color: var(--muted); font-size: 13px; margin: 0; }
.heading-meta, .heading-actions { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.metric-card { min-height: 116px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 17px 19px; }
.metric-card.accent::after { display: none; }
.metric-top { color: #66746d; font-size: 11px; font-weight: 700; }
.metric-top i { display: none; }
.metric-card > strong { display: block; margin: 12px 0 5px; color: var(--ink); font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 28px; font-weight: 750; }.metric-card > small { color: #87928c; font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(270px, .8fr); gap: 14px; margin-bottom: 14px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; padding: 19px 21px; border-bottom: 1px solid #eef0ec; }
.panel-heading h2 { font-family: Georgia, serif; font-size: 19px; font-weight: 500; margin: 0; }.panel-heading .eyebrow { margin-bottom: 5px; }
.pipeline { min-height: 153px; display: flex; align-items: center; justify-content: space-around; gap: 10px; padding: 22px 18px; }
.pipeline-stage { flex: 1; min-width: 115px; display: flex; align-items: center; gap: 13px; }.pipeline-stage small { display: block; color: #99a39d; font-size: 8px; font-weight: 800; letter-spacing: .09em; }.pipeline-stage strong { display: block; font-family: Georgia, serif; font-size: 28px; font-weight: 500; margin: 3px 0; }.pipeline-stage p { color: #929c96; font-size: 9px; margin: 0; }
.stage-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; font-size: 9px; font-weight: 850; }.stage-icon.orange { color: var(--orange); background: var(--orange-soft); }.stage-icon.blue { color: var(--blue); background: var(--blue-soft); }.stage-icon.violet { color: var(--violet); background: var(--violet-soft); }.stage-icon.green { color: var(--green); background: var(--green-soft); }
.pipeline-arrow { color: #c7cdc9; font-size: 20px; }
.attention-row { width: 100%; min-height: 59px; padding: 10px 18px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid #f0f1ee; background: transparent; text-align: left; }.attention-row:last-child { border-bottom: 0; }.attention-row:hover { background: #fafaf8; }.attention-row strong, .attention-row small { display: block; }.attention-row strong { font-size: 11px; }.attention-row small { color: #96a099; font-size: 9px; margin-top: 3px; }.attention-row b { font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.attention-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 11px; font-weight: 850; }.attention-icon.danger { color: var(--red); background: var(--red-soft); }.attention-icon.warning { color: var(--orange); background: var(--orange-soft); }.attention-icon.info { color: var(--blue); background: var(--blue-soft); }
.table-panel { overflow: hidden; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 11px 20px; color: #919c96; background: #fafaf8; border-bottom: 1px solid var(--line); font-size: 9px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
td { padding: 15px 20px; border-bottom: 1px solid #f0f1ee; color: #46534d; font-size: 11px; }
tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: #fdfdfb; }
td strong { color: var(--ink); font-size: 11px; } td small { display: block; color: #9aa39e; margin-top: 3px; }
.empty-row td { padding: 50px 20px; color: #9aa39e; text-align: center; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 20px; color: #6b756f; background: #eff1ee; font-size: 9px; font-weight: 800; text-transform: capitalize; }.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.status.ready_for_dispatch, .status.packed { color: var(--blue); background: var(--blue-soft); }.status.out_for_delivery, .status.in_transit, .status.manifested, .status.assigned { color: var(--violet); background: var(--violet-soft); }.status.delivered, .status.reconciled, .status.payout_completed { color: var(--green); background: var(--green-soft); }.status.delivery_exception, .status.returned, .status.cancelled { color: var(--red); background: var(--red-soft); }.status.fulfillment_pending, .status.picking, .status.pending_pick, .status.draft, .status.calculated { color: #b86921; background: #fff2df; }
.toolbar { min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 9px 13px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }.toolbar .filter-search { flex: 1; padding: 0 8px; }.toolbar select { width: auto; min-width: 170px; padding: 9px 12px; font-size: 11px; }
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }.kanban-column { background: #efefeb; border-radius: 14px; padding: 11px; min-height: 240px; }.kanban-heading { display: flex; justify-content: space-between; padding: 7px 6px 13px; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }.kanban-heading b { color: var(--muted); }.task-card { margin-bottom: 9px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 6px 16px rgba(30,40,35,.04); }.task-card strong, .task-card small { display: block; }.task-card strong { font-size: 11px; }.task-card small { color: var(--muted); margin-top: 5px; font-size: 9px; }.task-card .button { width: 100%; margin-top: 12px; padding: 8px; }
.stock-ok { color: var(--green); }.stock-low { color: var(--orange); }.stock-out { color: var(--red); }
.finance-banner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: 20px; padding: 24px 28px; margin-bottom: 14px; color: #fff; background: linear-gradient(110deg, #1a2a24, #263a31); border-radius: var(--radius); }.finance-banner span { display: block; color: #8fa096; font-size: 9px; letter-spacing: .1em; font-weight: 800; }.finance-banner strong { display: block; font-family: Georgia, serif; font-size: 23px; font-weight: 500; margin-top: 6px; }.finance-banner small { display: block; min-height: 24px; margin-top: 5px; color: #a9b7af; font-size: 10px; line-height: 1.25; }.finance-banner i { grid-column: 1 / -1; color: #91a198; font-size: 11px; font-style: normal; }
.finance-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }.finance-metrics article { padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }.finance-metrics span, .finance-metrics small { display: block; color: var(--muted); font-size: 9px; }.finance-metrics span { font-weight: 850; letter-spacing: .09em; }.finance-metrics strong { display: block; margin: 7px 0 4px; font-family: Georgia, serif; font-size: 25px; font-weight: 500; }.finance-ledger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }.finance-ledger-grid .panel-heading { padding: 16px 18px; }.finance-ledger-grid th, .finance-ledger-grid td { padding-left: 14px; padding-right: 14px; }.whish-transfer-panel { margin-top: 14px; }.finance-credit { color: var(--green); }.finance-debit { color: var(--red); }
.finance-tab-panel { display: none; }.finance-tab-panel.active { display: block; }.finance-subpanel { margin-top: 14px; }.finance-report-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; }.finance-report-panel h2 { margin: 4px 0 8px; font-family: Georgia, serif; font-size: 24px; font-weight: 500; }.finance-report-panel p { max-width: 620px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.report-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 9px; }.report-actions label { width: 132px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.report-actions input { margin-top: 5px; padding: 9px 10px; font-size: 11px; }.finance-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.report-tab-panel { display: none; }.report-tab-panel.active { display: block; }.report-period { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.report-period strong { color: var(--ink); font-family: Georgia, serif; font-size: 18px; font-weight: 500; }

dialog { width: min(1180px, calc(100vw - 48px)); max-height: calc(100vh - 48px); border: 0; border-radius: 18px; padding: 0; box-shadow: 0 30px 80px rgba(12,20,16,.24); }
dialog::backdrop { background: rgba(15,25,21,.56); backdrop-filter: blur(3px); }
.dialog-form { max-height: calc(100vh - 48px); padding: 26px 32px; overflow-y: auto; }
#order-dialog { width: min(1180px, calc(100vw - 48px)); }
#order-dialog .dialog-form { max-height: calc(100vh - 48px); }
#order-dialog .form-grid { grid-template-columns: repeat(20, minmax(0, 1fr)); }
#order-dialog .dialog-form > .form-grid > label:not(.span-2) { grid-column: span 5; }
#order-dialog .dialog-form > .form-grid > label.order-item-field { grid-column: span 4; }
#order-dialog .dialog-form > .form-grid > .span-2 { grid-column: span 20; }
.order-items-section { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #fafaf8; }
.order-items-section .subsection-heading { align-items: center; }
.order-items-section .subsection-heading > div { display: grid; gap: 4px; }
.order-items-list { display: grid; gap: 12px; padding-top: 14px; }
.order-item-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 14px; border: 1px solid #e1e6e2; border-radius: 11px; background: #fff; }
.order-item-row.is-fulfillment-item { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.order-item-row > label { min-width: 0; }
.order-item-row-heading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-item-row-heading strong { font-size: 12px; }
.order-item-product-field { display: none; }
.order-item-row.is-fulfillment-item .order-item-product-field { display: flex; }
#warehouse-dialog .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#team-dialog .form-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 19px; border-bottom: 1px solid var(--line); }.dialog-heading h2 { font-family: Georgia, serif; font-size: 27px; font-weight: 500; margin: 0; }.dialog-close { border: 0; background: transparent; color: #8b958f; font-size: 25px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 22px 0 8px; }.span-2 { grid-column: span 2; }.form-grid small { color: var(--muted); font-size: 9px; font-weight: 400; }.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; }
.searchable-select-native { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.searchable-select { position: relative; width: 100%; margin-top: 5px; }.searchable-select-input { width: 100%; }.searchable-select-list { position: absolute; z-index: 30; top: calc(100% + 5px); right: 0; left: 0; display: none; max-height: 220px; overflow-y: auto; border: 1px solid #d7dfda; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(22,35,31,.16); }.searchable-select.is-open .searchable-select-list { display: block; }.searchable-select-option { display: block; width: 100%; padding: 11px 13px; border: 0; border-bottom: 1px solid #edf0ed; color: var(--ink); background: #fff; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }.searchable-select-option:hover, .searchable-select-option:focus { color: var(--orange); background: var(--orange-soft); outline: 0; }.searchable-select-empty { margin: 0; padding: 12px 13px; color: var(--muted); font-size: 11px; }
.merchant-location-label, .field-label { display: flex; align-items: baseline; gap: 6px; }.merchant-location-label small, .field-label small { white-space: nowrap; }
.merchant-portal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 14px; }
.single-grid { grid-template-columns: 1fr; }
.pickup-fields { padding: 17px; border: 1px solid #dfddd4; border-radius: 12px; background: #faf9f5; }
#order-pickup-fields .nested-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#merchant-store-fields .nested-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.subsection-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.subsection-heading strong { color: var(--ink); font-size: 12px; }.subsection-heading small { color: var(--muted); font-size: 9px; }
.nested-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 14px; }
.pickup-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.pickup-metrics article { padding: 17px 19px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.pickup-metrics span, .pickup-metrics small { display: block; color: var(--muted); font-size: 9px; }.pickup-metrics span { font-weight: 850; letter-spacing: .09em; }.pickup-metrics strong { display: block; margin: 5px 0 2px; font-family: Georgia, serif; font-size: 27px; font-weight: 500; }
.receive-callout { margin: 20px 0 0; padding: 18px; border: 1px solid #d7e3df; border-radius: 12px; background: #f3f8f6; text-align: center; }
.receive-callout span, .receive-callout small { display: block; color: var(--muted); font-size: 9px; }.receive-callout span { font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.receive-callout strong { display: block; margin: 7px 0 5px; font-family: Consolas, monospace; font-size: 18px; letter-spacing: .08em; }
.status.requested { color: #b86921; background: #fff2df; }.status.collected { color: var(--blue); background: var(--blue-soft); }.status.received { color: var(--green); background: var(--green-soft); }
.check-field { flex-direction: row; align-items: flex-start; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: #fafaf8; cursor: pointer; }
.check-field input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--orange); }
.check-field span, .check-field strong, .check-field small { display: block; }.check-field strong { font-size: 12px; }.check-field small { margin-top: 4px; line-height: 1.5; }
.service-badge { display: inline-flex; padding: 5px 8px; border-radius: 20px; color: var(--green); background: var(--green-soft); font-size: 9px; font-weight: 800; }.service-badge.standard { color: var(--blue); background: var(--blue-soft); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }.row-actions .button { padding: 7px 9px; }
#order-adjustment-dialog { width: min(1280px, calc(100vw - 48px)); }
#order-adjustment-dialog .dialog-form { max-height: calc(100vh - 48px); }
.order-adjustment-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.order-adjustment-fieldset:disabled { opacity: .68; }
.order-adjustment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.order-adjustment-alert { margin-top: 18px; padding: 13px 15px; border: 1px solid #efd2c6; border-radius: 10px; color: #803f26; background: #fff6f1; font-size: 11px; line-height: 1.55; }
.adjustment-items-section { margin: 17px 0 15px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fafaf8; }
.adjustment-items-section .subsection-heading > div { display: flex; align-items: baseline; gap: 8px; }
.order-adjustment-items { display: grid; gap: 10px; padding-top: 14px; }
.order-adjustment-item { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(180px, 1.4fr) minmax(110px, .8fr) minmax(82px, .5fr) minmax(105px, .65fr) auto; align-items: end; gap: 10px; }
.order-adjustment-item label { min-width: 0; }
.order-adjustment-item .button { min-height: 40px; padding: 9px 11px; color: var(--red); }
.order-adjustment-override { margin-bottom: 15px; }
.adjustment-reason { margin-bottom: 18px; }
.adjustment-history-section { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.adjustment-history-table { max-height: 250px; margin-top: 12px; overflow: auto; border: 1px solid var(--line); border-radius: 11px; }
.adjustment-history-table table { white-space: normal; }
.adjustment-history-table th { position: sticky; top: 0; z-index: 1; }
.adjustment-history-table td { min-width: 110px; vertical-align: top; line-height: 1.45; }
.adjustment-history-table td:nth-child(4), .adjustment-history-table td:nth-child(5) { min-width: 160px; max-width: 260px; word-break: break-word; }
.packing-exception-callout { margin: 18px 0; padding: 15px 17px; border: 1px solid #f0d2c5; border-radius: 11px; background: #fff7f2; }
.packing-exception-callout strong, .packing-exception-callout span { display: block; }.packing-exception-callout strong { color: #71351f; font-size: 12px; }.packing-exception-callout span { margin-top: 5px; color: #8b6658; font-size: 10px; line-height: 1.55; }
.resolution-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 17px; }
.resolution-option { display: flex; flex-direction: row; align-items: flex-start; gap: 11px; min-height: 92px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: #fafaf8; cursor: pointer; }
.resolution-option:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); box-shadow: 0 0 0 2px rgba(243,107,55,.08); }
.resolution-option input { flex: 0 0 17px; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--orange); }
.resolution-option strong, .resolution-option small { display: block; }.resolution-option strong { font-size: 11px; }.resolution-option small { margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 400; line-height: 1.5; }
.resolution-option.is-disabled { cursor: not-allowed; opacity: .5; }
.detail-dialog { width: min(1180px, calc(100vw - 48px)); height: min(720px, calc(100vh - 48px)); }
.detail-dialog .dialog-form { display: flex; flex-direction: column; height: 100%; max-height: none; overflow: hidden; }
.detail-heading { align-items: center; }.detail-heading p { color: var(--muted); font-size: 11px; margin: 5px 0 0; }.detail-actions { display: flex; align-items: center; gap: 8px; }
.detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 20px 0; }.detail-stat { padding: 14px 16px; border: 1px solid var(--line); border-radius: 11px; background: #fafaf8; }.detail-stat span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.detail-stat strong { display: block; font-family: Georgia, serif; font-size: 23px; font-weight: 500; margin-top: 5px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }.tab { border: 0; border-bottom: 2px solid transparent; padding: 12px 14px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 800; }.tab.active { color: var(--orange); border-bottom-color: var(--orange); }
.merchant-tab-panel { display: none; min-height: 0; flex: 1; overflow: hidden; }.merchant-tab-panel.active { display: flex; flex-direction: column; }
.merchant-tab-panel .table-wrap { flex: 1; min-height: 0; overflow: auto; }
.merchant-tab-panel thead th { position: sticky; top: 0; z-index: 1; background: #fafaf8; }
.manifest-detail-shell { gap: 0; }
.manifest-driver-row { display: flex; align-items: flex-end; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.manifest-driver-row label { width: min(360px, 100%); }
.manifest-driver-row small { padding-bottom: 13px; color: var(--muted); font-size: 10px; }
.manifest-detail-table { flex: 1; min-height: 0; margin-top: 14px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.manifest-detail-table thead th, .order-picker-table thead th { position: sticky; top: 0; z-index: 1; background: #fafaf8; }
.manifest-detail-table .button { padding: 8px 11px; }
.driver-order-detail-shell { gap: 0; }
.driver-order-detail-dialog .dialog-form { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.driver-order-detail-card { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fafaf8; }
.merchant-parcel-note { display: grid; gap: 5px; padding: 14px 16px; border: 1px solid #d9e7df; border-radius: 12px; background: #f4faf6; color: var(--ink); }
.merchant-parcel-note strong { font-size: 13px; }
.merchant-parcel-note small { color: var(--muted); line-height: 1.45; }
.driver-order-detail-card h3 { margin: 6px 0 4px; font-size: 18px; }
.driver-order-detail-card p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.driver-order-detail-card .table-wrap { margin-top: 12px; overflow-x: auto; }
.manifest-cancellation-note { margin: 0 0 12px; padding: 11px 13px; border: 1px solid #efc9c9; border-radius: 10px; color: #7f2d30; background: var(--red-soft); font-size: 10px; line-height: 1.5; }
.selection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 2px 12px; }
.selection-check { display: flex; align-items: center; gap: 9px; font-size: 11px; }
.selection-check input, .order-select { width: 17px; height: 17px; accent-color: var(--orange); }
.selection-toolbar strong { color: var(--orange); font-size: 11px; }
.order-picker-table { height: min(430px, 48vh); overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.delivery-evidence-summary { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 16px 18px; border: 1px solid #f2d8ce; border-radius: 12px; background: #fff8f5; }
.delivery-evidence-summary span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.delivery-evidence-summary strong { color: var(--orange); font-family: Georgia, serif; font-size: 25px; font-weight: 500; }
.reconciliation-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 18px; }
.reconciliation-summary > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 11px; background: #fafaf8; }
.reconciliation-summary span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.reconciliation-summary strong { display: block; margin-top: 6px; font-size: 18px; }
.delivery-outcome-note { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; transform: translateY(30px); opacity: 0; pointer-events: none; padding: 13px 17px; border-radius: 11px; color: #fff; background: var(--sidebar); box-shadow: var(--shadow); font-size: 11px; font-weight: 700; transition: .25s; }.toast.show { opacity: 1; transform: none; }.toast.error { background: #8d3439; }
.software-update, .software-updated { position: fixed; right: 24px; bottom: 24px; z-index: 101; box-shadow: 0 7px 22px rgba(24,38,32,.16); font-size: 12px; }
.software-update { display: flex; align-items: center; gap: 12px; max-width: min(480px, calc(100vw - 32px)); padding: 12px 13px 12px 15px; border: 1px solid #f3b39a; border-radius: 10px; color: #74341e; background: #fff7f3; }
.software-update span { min-width: 0; line-height: 1.4; }.software-update strong { color: #472416; }
.software-update button { flex: 0 0 auto; padding: 8px 11px; border: 1px solid var(--orange); border-radius: 7px; color: #fff; background: var(--orange); font: inherit; font-size: 11px; font-weight: 800; }
.software-update button:hover { background: #dd5d2e; }
.software-updated { padding: 12px 15px; border: 1px solid #2b8a62; border-radius: 10px; color: #11573c; background: #edf8f3; font-weight: 800; }

@media (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(2, 1fr); }
  .pipeline { overflow-x: auto; justify-content: flex-start; }
  .finance-banner { grid-template-columns: 1fr 1fr; }.finance-banner i { grid-column: span 2; justify-self: start; }.finance-ledger-grid { grid-template-columns: 1fr; }
  .pickup-metrics { grid-template-columns: repeat(2, 1fr); }
  .order-adjustment-item { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px), (max-device-width: 820px) {
  .login-shell { grid-template-columns: 1fr; padding: 0; }.login-frame { grid-template-columns: 1fr; min-height: 100vh; border: 0; border-radius: 0; }.login-art { display: none; }.login-panel { min-height: 100vh; padding: 30px; }.mobile-brand { display: flex; }
  .app-shell { grid-template-columns: 1fr; }.sidebar { position: fixed; left: -250px; width: 230px; transition: left .25s; box-shadow: 15px 0 40px rgba(0,0,0,.18); }.sidebar.open { left: 0; }
  .app-shell.sidebar-collapsed { grid-template-columns: 1fr; }.app-shell.sidebar-collapsed .sidebar { width: 230px; padding: 27px 18px 18px; }.sidebar-collapse { display: none; }.sidebar-collapsed .sidebar .brand { justify-content: flex-start; padding: 0 12px 28px; }.sidebar-collapsed .brand-logo-sidebar { display: block; }.sidebar-collapsed .brand-logo-sidebar-compact { display: none; }.sidebar-collapsed .sidebar-label { display: block; }.sidebar-collapsed .nav-list { margin-top: 0; }.sidebar-collapsed .nav-item { justify-content: flex-start; gap: 12px; padding: 0 12px; font-size: 12px; }.sidebar-collapsed .sidebar-zoom-controls { margin: 10px 9px 0; justify-content: flex-start; gap: 7px; }.sidebar-collapsed .sidebar-zoom-controls button { width: 30px; height: 30px; }.sidebar-collapsed .sidebar-zoom-controls span { display: block; }.sidebar-collapsed .sidebar-version { margin: 13px 9px 0; text-align: left; }.sidebar-collapsed .sidebar-version::before { content: none; }.sidebar-collapsed .sidebar-version span { display: inline; }.sidebar-collapsed .nav-icon { flex-basis: 26px; width: 26px; }.sidebar-collapsed .nav-count { display: block; }.sidebar-collapsed .user-card { justify-content: flex-start; padding: 20px 9px 5px; }.sidebar-collapsed .user-card > div:not(.avatar), .sidebar-collapsed .user-card .online-dot { display: block; }
  .mobile-menu { display: grid; }.topbar { padding: 0 18px; }.global-search { display: none; }.content { padding: 25px 18px 45px; }
  .module-bar { min-height: 58px; padding: 0 14px; }.module-menu-button { display: grid; }.module-bar > strong { display: none; }.module-tab { padding: 0 13px; }.module-tab::after { left: 13px; right: 13px; }
  .merchant-announcements { top: 58px; padding: 9px 18px; }
  .page-heading { align-items: flex-start; flex-direction: column; }.heading-meta, .heading-actions { width: 100%; justify-content: space-between; }
  .detail-heading { align-items: flex-start; }.detail-actions { flex-wrap: wrap; margin-top: 12px; }.detail-stats, .reconciliation-summary { grid-template-columns: repeat(2, 1fr); }.manifest-driver-row { align-items: stretch; flex-direction: column; }
}
@media (max-width: 580px), (max-device-width: 580px) {
  .metric-grid, .kanban { grid-template-columns: 1fr; }.pipeline { display: grid; grid-template-columns: 1fr 1fr; }.pipeline-arrow { display: none; }
  .top-actions .connection, .top-actions > .button { display: none; }.toolbar { align-items: stretch; flex-direction: column; }.toolbar select { width: 100%; }.form-grid, .nested-grid, .merchant-portal-grid { grid-template-columns: 1fr; }.span-2, #order-dialog .dialog-form > .form-grid > .span-2, #order-dialog .dialog-form > .form-grid > label:not(.span-2), #order-dialog .dialog-form > .form-grid > .order-item-field { grid-column: auto; } #order-dialog { width: min(720px, calc(100vw - 30px)); } #order-dialog .form-grid, #warehouse-dialog .form-grid, #team-dialog .form-grid { grid-template-columns: 1fr; } #order-pickup-fields .nested-grid, #merchant-store-fields .nested-grid { grid-template-columns: 1fr; } .pickup-metrics { grid-template-columns: 1fr 1fr; }
  .finance-banner, .finance-metrics { grid-template-columns: 1fr; }.finance-banner i { grid-column: auto; }.page-heading h1 { font-size: 32px; }
  .finance-report-panel { align-items: flex-start; flex-direction: column; }.finance-report-grid { grid-template-columns: 1fr; }
  .software-update { right: 15px; bottom: 15px; align-items: flex-start; flex-wrap: wrap; }.software-update button { margin-left: auto; }.software-updated { right: 15px; bottom: 15px; }
  .order-adjustment-grid, .order-adjustment-item, .resolution-options { grid-template-columns: 1fr; }.order-adjustment-grid .span-2 { grid-column: auto; }
}

/* Login dashboard preview */
.login-card > p.muted { color: #586660; }
.login-art { background: linear-gradient(145deg, #f9fcff 0%, #e8f5fe 100%); }
.login-art::after { inset: auto -20% -36% auto; width: 78%; height: auto; aspect-ratio: 1; background: rgba(131, 203, 245, .24); }
.login-art-orb { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }.orb-one { width: 360px; height: 360px; top: 11%; right: -152px; background: rgba(133, 205, 246, .38); }.orb-two { width: 290px; height: 290px; bottom: -130px; left: -116px; background: rgba(195, 228, 249, .7); }
.login-visual-copy { position: relative; z-index: 2; top: auto; right: auto; left: auto; padding: 53px 42px 0; }.login-visual-copy strong { max-width: 260px; color: #174f79; }
.dashboard-preview { position: absolute; z-index: 2; top: 185px; right: clamp(24px, 4vw, 54px); bottom: -32px; left: clamp(24px, 4vw, 54px); overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 18px 18px 0 0; background: rgba(255,255,255,.7); box-shadow: 0 24px 48px rgba(42,112,154,.22); backdrop-filter: blur(16px); transform: perspective(1000px) rotateX(2deg) rotateY(-3deg); transform-origin: bottom center; }
.preview-topbar { display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 14px; border-bottom: 1px solid rgba(66,122,156,.13); background: rgba(250,253,255,.62); }.preview-mark { display: block; width: 20px; height: 20px; object-fit: contain; }.preview-search { width: 45%; height: 9px; border-radius: 99px; background: rgba(91,149,181,.12); }.preview-user { width: 17px; height: 17px; margin-left: auto; border-radius: 50%; background: #9bd0ef; }
.preview-body { padding: 19px 18px 44px; }.preview-heading { display: flex; justify-content: space-between; gap: 10px; color: #738b9d; font-size: 8px; }.preview-heading > div i { display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0; border-radius: 50%; background: #f36b37; }.preview-heading b { font-size: 7px; letter-spacing: .1em; }.preview-heading strong { display: block; margin-top: 7px; color: #29536d; font-size: 15px; }
.preview-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 17px; }.preview-stat-grid > div, .preview-chart, .preview-activity { border: 1px solid rgba(83,139,172,.12); border-radius: 10px; background: rgba(255,255,255,.62); }.preview-stat-grid > div { padding: 10px; }.preview-stat-grid span { display: block; color: #7791a1; font-size: 6px; font-weight: 800; letter-spacing: .06em; }.preview-stat-grid strong { display: block; margin-top: 6px; color: #285570; font-size: 17px; }.preview-stat-grid small { display: block; margin-top: 3px; color: #238762; font-size: 7px; font-weight: 700; }
.preview-chart, .preview-activity { margin-top: 11px; padding: 11px; }.preview-chart-head { display: flex; justify-content: space-between; color: #7b94a3; font-size: 7px; }.preview-chart-head strong { color: #396176; font-size: 8px; }.preview-bars { display: flex; align-items: end; justify-content: space-between; gap: 7px; height: 88px; margin-top: 10px; padding: 0 2px; border-bottom: 1px solid rgba(87,146,180,.16); }.preview-bars i { width: 10%; border-radius: 4px 4px 0 0; background: linear-gradient(#76c5ee, #438cbd); }.preview-bars i:nth-child(1) { height: 34%; }.preview-bars i:nth-child(2) { height: 56%; }.preview-bars i:nth-child(3) { height: 47%; }.preview-bars i:nth-child(4) { height: 76%; background: linear-gradient(#f9a477, #ef6c3a); }.preview-bars i:nth-child(5) { height: 60%; }.preview-bars i:nth-child(6) { height: 86%; }.preview-bars i:nth-child(7) { height: 68%; }.preview-activity > div:not(.preview-chart-head) { display: flex; align-items: center; gap: 7px; padding-top: 9px; color: #5f7e90; font-size: 7px; }.preview-activity > div i { width: 6px; height: 6px; border-radius: 50%; }.preview-activity > div i.orange { background: #f37844; }.preview-activity > div i.green { background: #45b98a; }.preview-activity b { margin-left: auto; color: #398068; font-size: 7px; }
.remember-control { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px !important; margin: 14px 0 18px; color: #4d5d55 !important; font-size: 11px !important; font-weight: 650 !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; }.remember-control input { position: absolute; width: 1px !important; height: 1px !important; opacity: 0; }.remember-control > span { display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid #8aa198; border-radius: 4px; background: #fff; transition: background .16s, border-color .16s; }.remember-control > span::after { content: ""; width: 7px; height: 4px; border: solid #fff; border-width: 0 0 1.5px 1.5px; opacity: 0; transform: rotate(-45deg) translate(1px, -1px); }.remember-control input:checked + span { border-color: #198b67; background: #198b67; }.remember-control input:checked + span::after { opacity: 1; }.remember-control input:focus-visible + span { outline: 3px solid rgba(25,139,103,.22); outline-offset: 2px; }
.login-panel { align-content: center; }.login-card { transform: translateY(12px); }.login-visual-copy strong { font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 29px; font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }
@media (max-width: 820px), (max-device-width: 820px) { .login-card { transform: none; } }

/* Keep the report-period controls visible and actionable. */
[data-page-panel="reports"] .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }.report-period { justify-content: space-between; gap: 24px; }.report-period .eyebrow { margin-bottom: 4px; }.report-period .report-actions { margin-left: auto; }.report-actions label { display: flex; flex-direction: column; gap: 0; }.report-actions input { min-height: 37px; color: var(--ink); border-color: #cfd8d2; background: #fff; cursor: pointer; }.report-actions input:hover { border-color: var(--orange); }
@media (max-width: 820px), (max-device-width: 820px) { [data-page-panel="reports"] .page-heading, .report-period { align-items: flex-start; flex-direction: column; } .report-period .report-actions { width: 100%; margin-left: 0; justify-content: flex-start; } .report-actions { justify-content: flex-start; } }

/* Reporting controls scale from desktop to tablet and touch-sized mobile layouts. */
@media (max-width: 1100px) { .content { padding: 28px 24px 44px; }.report-period { align-items: flex-start; flex-wrap: wrap; }.report-period .report-actions { flex: 1 1 500px; margin-left: 0; justify-content: flex-start; } }
@media (max-width: 580px), (max-device-width: 580px) { .report-period { gap: 16px; padding: 15px; }.report-period .report-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.report-actions label { width: auto; min-width: 0; }.report-actions input { min-width: 0; width: 100%; min-height: 42px; }.report-actions .button { min-height: 42px; padding: 10px 8px; font-size: 11px; } }

/* iOS desktop-mode fallback: use the physical screen size before page layout. */
html.compact-device .login-shell { grid-template-columns: 1fr; padding: 0; } html.compact-device .login-frame { grid-template-columns: 1fr; min-height: 100vh; border: 0; border-radius: 0; } html.compact-device .login-art { display: none; } html.compact-device .login-panel { min-height: 100vh; padding: 30px; } html.compact-device .login-card { transform: none; }
html.compact-device .app-shell, html.compact-device .app-shell.sidebar-collapsed { grid-template-columns: 1fr; } html.compact-device .sidebar { position: fixed; left: -250px; width: 230px; transition: left .25s; box-shadow: 15px 0 40px rgba(0,0,0,.18); } html.compact-device .sidebar.open { left: 0; } html.compact-device .sidebar-collapse { display: none; } html.compact-device .mobile-menu, html.compact-device .module-menu-button { display: grid; } html.compact-device .topbar { padding: 0 18px; } html.compact-device .global-search { display: none; } html.compact-device .content { padding: 25px 18px 45px; } html.compact-device .module-bar { min-height: 58px; padding: 0 14px; } html.compact-device .module-bar > strong { display: none; } html.compact-device .module-tab { padding: 0 13px; } html.compact-device .merchant-announcements { top: 58px; padding: 9px 18px; }
html.compact-device .page-heading { align-items: flex-start; flex-direction: column; } html.compact-device .heading-meta, html.compact-device .heading-actions { width: 100%; justify-content: space-between; } html.compact-device .detail-stats, html.compact-device .reconciliation-summary { grid-template-columns: repeat(2, 1fr); } html.compact-device .manifest-driver-row { align-items: stretch; flex-direction: column; }
html.compact-device.compact-phone .metric-grid, html.compact-device.compact-phone .kanban { grid-template-columns: 1fr; } html.compact-device.compact-phone .pipeline { display: grid; grid-template-columns: 1fr 1fr; } html.compact-device.compact-phone .pipeline-arrow { display: none; } html.compact-device.compact-phone .top-actions .connection, html.compact-device.compact-phone .top-actions > .button { display: none; } html.compact-device.compact-phone .toolbar { align-items: stretch; flex-direction: column; } html.compact-device.compact-phone .toolbar select { width: 100%; } html.compact-device.compact-phone .form-grid, html.compact-device.compact-phone .nested-grid, html.compact-device.compact-phone .merchant-portal-grid { grid-template-columns: 1fr; } html.compact-device.compact-phone .finance-banner, html.compact-device.compact-phone .finance-metrics { grid-template-columns: 1fr; }

/* Production phone layout: contain every workspace surface and avoid iOS focus zoom. */
html.compact-device { width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
html.compact-device body { width: 100%; overflow-x: hidden; }
html.compact-device .login-shell,
html.compact-device .login-frame,
html.compact-device .login-panel,
html.compact-device .app-shell,
html.compact-device .main,
html.compact-device .content,
html.compact-device .page { min-width: 0; max-width: 100%; width: 100%; }
html.compact-device .login-shell { min-height: 100svh; }
html.compact-device .login-frame { min-height: 100svh; }
html.compact-device .login-panel { min-height: 100svh; padding: max(28px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); }
html.compact-device .login-card { width: min(100%, 390px); }
html.compact-device .login-product-logo { width: min(220px, 70vw); height: auto; aspect-ratio: 230 / 72; margin-bottom: 28px; }
html.compact-device .login-card > p.muted { max-width: 32rem; overflow-wrap: anywhere; }
html.compact-device .sidebar { top: 0; bottom: 0; left: 0; width: min(280px, 84vw); height: 100svh; padding-top: max(22px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); overflow-y: auto; transform: translateX(-110%); transition: transform .25s ease; }
html.compact-device .sidebar.open { left: 0; transform: translateX(0); }
html.compact-device .sidebar-backdrop { position: fixed; z-index: 19; inset: 0; display: block; padding: 0; border: 0; background: rgba(18, 31, 26, .12); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
html.compact-device .sidebar.open + .sidebar-backdrop { opacity: 1; pointer-events: auto; }
html.compact-device .main { zoom: 1 !important; }
html.compact-device .content { max-width: none !important; }
html.compact-device .module-bar { width: 100%; min-width: 0; overflow: hidden; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
html.compact-device .module-tabs { flex: 1 1 auto; min-width: 0; }
html.compact-device .panel,
html.compact-device .toolbar,
html.compact-device .table-panel,
html.compact-device .table-wrap { min-width: 0; max-width: 100%; }
html.compact-device .table-wrap { -webkit-overflow-scrolling: touch; }
html.compact-device .metric-grid,
html.compact-device .dashboard-grid,
html.compact-device .finance-metrics,
html.compact-device .finance-ledger-grid,
html.compact-device .finance-report-grid,
html.compact-device .pickup-metrics,
html.compact-device .kanban { grid-template-columns: minmax(0, 1fr); }
html.compact-device .sidebar-zoom-controls { display: none; }
html.compact-device dialog { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100svh - 24px); margin: auto; }
html.compact-device .dialog-form { max-height: calc(100svh - 24px); padding: 22px 18px; }
html.compact-device dialog.detail-dialog {
  height: calc(100svh - 24px);
  height: calc(100dvh - 24px);
  max-height: calc(100svh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
html.compact-device .detail-dialog .dialog-form {
  display: block;
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
html.compact-device .detail-dialog .manifest-detail-table { max-height: none; overflow: visible; }

html.compact-device.compact-phone .content { padding: 18px max(14px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
html.compact-device.compact-phone input,
html.compact-device.compact-phone select,
html.compact-device.compact-phone textarea { min-width: 0; font-size: 16px; }
html.compact-device.compact-phone .login-card label input,
html.compact-device.compact-phone .password-control input { font-size: 16px; }
html.compact-device.compact-phone .button,
html.compact-device.compact-phone .icon-button,
html.compact-device.compact-phone .module-tab { min-height: 44px; }
html.compact-device.compact-phone .pipeline { grid-template-columns: minmax(0, 1fr); }
html.compact-device.compact-phone .pipeline-stage { min-width: 0; }
html.compact-device.compact-phone .panel-heading { align-items: flex-start; gap: 10px; padding: 16px; }
html.compact-device.compact-phone .attention-row { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 12px; }
html.compact-device.compact-phone .report-period .report-actions { grid-template-columns: minmax(0, 1fr); width: 100%; }
html.compact-device.compact-phone .report-period .report-actions {
  flex: 0 0 auto;
  gap: 10px;
  margin: 0;
}
html.compact-device.compact-phone .report-actions label,
html.compact-device.compact-phone .report-actions .button { width: 100%; }
html.compact-device.compact-phone .dialog-heading { gap: 12px; }
html.compact-device.compact-phone .dialog-heading h2 { font-size: 23px; }
html.compact-device.compact-phone .dialog-actions { align-items: stretch; flex-direction: column-reverse; }
html.compact-device.compact-phone .dialog-actions .button { width: 100%; }
html.compact-device.compact-phone .order-items-section { padding: 14px; }
html.compact-device.compact-phone .order-item-row,
html.compact-device.compact-phone .order-item-row.is-fulfillment-item { grid-template-columns: minmax(0, 1fr); }
html.compact-device.compact-phone .toast,
html.compact-device.compact-phone .software-update,
html.compact-device.compact-phone .software-updated { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; max-width: none; }

/* Phone workspace: compact navigation, card-based records, and touch-sized actions. */
html.compact-device.compact-phone .module-bar {
  position: sticky;
  align-items: flex-start;
  gap: 8px;
  min-height: 60px;
  padding-top: 8px;
  padding-bottom: 8px;
  overflow: visible;
}
html.compact-device.compact-phone .module-menu-button {
  flex: 0 0 44px;
  margin: 0;
}
html.compact-device.compact-phone .module-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  flex: 1 1 auto;
  gap: 6px;
  width: 100%;
  overflow: visible;
}
html.compact-device.compact-phone .module-tab {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #e6e9e5;
  border-radius: 9px;
  line-height: 1.25;
  white-space: normal;
}
html.compact-device.compact-phone .module-tab::after { display: none; }
html.compact-device.compact-phone .module-tab.active {
  border-color: #f3b092;
  background: var(--orange-soft);
}
html.compact-device.compact-phone .merchant-announcements { position: static; padding: 10px 14px; }
html.compact-device .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.compact-device.compact-phone .metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
html.compact-device.compact-phone .metric-card { min-height: 122px; padding: 14px; }
html.compact-device.compact-phone .metric-top { font-size: 10px; line-height: 1.3; }
html.compact-device.compact-phone .metric-card > strong { margin: 10px 0 5px; font-size: clamp(22px, 6.5vw, 27px); }
html.compact-device.compact-phone .metric-card > small { font-size: 9px; line-height: 1.35; }

html.compact-device.compact-phone .toolbar,
html.compact-device.compact-phone .page-action-toolbar,
html.compact-device.compact-phone .heading-actions,
html.compact-device.compact-phone .detail-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  gap: 9px;
}
html.compact-device.compact-phone .toolbar { padding: 11px; }
html.compact-device.compact-phone .toolbar .filter-search { width: 100%; padding: 0 4px; }
html.compact-device.compact-phone .toolbar .button,
html.compact-device.compact-phone .page-action-toolbar .button,
html.compact-device.compact-phone .heading-actions .button,
html.compact-device.compact-phone .detail-actions .button { width: 100%; }
html.compact-device.compact-phone .page-action-toolbar > span { display: none; }

html.compact-device .table-panel,
html.compact-device .manifest-detail-table,
html.compact-device .order-picker-table {
  overflow: visible;
  border: 0;
  background: transparent;
}
html.compact-device .table-wrap,
html.compact-device .merchant-tab-panel .table-wrap {
  width: 100%;
  padding: 10px 0 0;
  overflow: visible;
}
html.compact-device table.mobile-card-table {
  display: block;
  width: 100%;
  white-space: normal;
}
html.compact-device table.mobile-card-table thead { display: none; }
html.compact-device table.mobile-card-table tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 12px;
}
html.compact-device.compact-phone table.mobile-card-table tbody { grid-template-columns: minmax(0, 1fr); }
html.compact-device table.mobile-card-table tbody tr {
  display: block;
  width: 100%;
  padding: 4px 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(24, 35, 31, .045);
}
html.compact-device table.mobile-card-table tbody tr:hover td { background: transparent; }
html.compact-device table.mobile-card-table td {
  display: grid;
  grid-template-columns: minmax(88px, 35%) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid #eef0ec;
  color: #34423c;
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}
html.compact-device table.mobile-card-table td:last-child { border-bottom: 0; }
html.compact-device table.mobile-card-table td::before {
  content: attr(data-label);
  color: #7b8881;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1.45;
  text-align: left;
  text-transform: uppercase;
}
html.compact-device table.mobile-card-table .mobile-cell-value {
  min-width: 0;
  text-align: right;
}
html.compact-device table.mobile-card-table .mobile-cell-value > strong,
html.compact-device table.mobile-card-table .mobile-cell-value > small { overflow-wrap: anywhere; }
html.compact-device table.mobile-card-table .mobile-cell-value > small { margin-top: 4px; }
html.compact-device table.mobile-card-table td.mobile-full-row {
  display: block;
  padding: 24px 10px;
  text-align: center;
}
html.compact-device table.mobile-card-table td.mobile-full-row::before { display: none; }
html.compact-device table.mobile-card-table td.mobile-full-row .mobile-cell-value { text-align: center; }
html.compact-device table.mobile-card-table .status { justify-content: center; }
html.compact-device table.mobile-card-table .row-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  width: 100%;
}
html.compact-device table.mobile-card-table .row-actions .button,
html.compact-device table.mobile-card-table td > .mobile-cell-value > .button {
  width: 100%;
  min-height: 40px;
}

html.compact-device.compact-phone .panel-heading,
html.compact-device.compact-phone .subsection-heading,
html.compact-device.compact-phone .selection-toolbar,
html.compact-device.compact-phone .delivery-evidence-summary,
html.compact-device.compact-phone .manifest-driver-row {
  align-items: stretch;
  flex-direction: column;
}
html.compact-device.compact-phone .panel-heading > .button,
html.compact-device.compact-phone .subsection-heading > .button { width: 100%; }
html.compact-device.compact-phone .finance-banner { gap: 16px; padding: 20px; }
html.compact-device.compact-phone .finance-banner i { grid-column: auto; }
html.compact-device.compact-phone .finance-report-panel { padding: 18px; }
html.compact-device.compact-phone .metric-card { min-height: 0; }
html.compact-device.compact-phone .detail-stats,
html.compact-device.compact-phone .reconciliation-summary { grid-template-columns: minmax(0, 1fr); }
html.compact-device.compact-phone .selection-toolbar { align-items: flex-start; }
html.compact-device.compact-phone .delivery-evidence-summary { gap: 8px; }
html.compact-device.compact-phone .delivery-evidence-summary strong { font-size: 22px; }
html.compact-device.compact-phone .check-field { width: 100%; }