/* DriveForma staff workspace preview. Additive presentation layer only. */
@font-face {
  font-family: "Manrope UI";
  src: url("assets/Manrope-variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

body.app-shell {
  --df-paper: #f5f4ee;
  --df-navy: #162832;
  --df-violet: #4b46c8;
  --df-lime: #e4f48b;
  --brand: #4b46c8 !important;
  --brand-dark: #3c37ad;
  --brand-tint: #efedf9;
  --brand-track: #d7d3f0;
  --ink: #162832;
  --ink-2: #455761;
  --ink-3: #65716f;
  --ink-4: #65716f;
  --bg: #f5f4ee;
  --card: #fff;
  --surface: #fff;
  --surface-2: #f7f7f1;
  --surface-3: #eceee5;
  --line: #dde1d6;
  --line-2: #bec8c0;
  --placeholder: #69756f;
  --blue: #4b46c8;
  --sidebar: #162832;
  --canvas: #162832;
  --canvas-2: #223a45;
  --canvas-3: #3a525c;
  --ink-on-dark: #e1e8e4;
  --ink-on-dark-2: #b2c2c3;
  --radius: 10px;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;
  --fs-body: 14px;
  --fs-h1: 30px;
  --fs-display: 34px;
  --shadow-1: 0 1px 2px #16283208;
  --shadow-2: 0 10px 28px #1628320f;
  --ring: 0 0 0 3px #4b46c822;
  background: var(--df-paper);
  color: var(--ink);
  font-family: "Manrope UI", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 450;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

body.app-shell :is(button, input, select, textarea) { font-family: inherit; }
body.app-shell :is(h1, h2, h3, h4) { color: var(--ink); }
body.app-shell :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--df-violet);
  outline-offset: 3px;
}
body.app-shell ::selection { background: #e4f48b; color: #162832; }
body.app-shell .ico { stroke-width: 1.65; }

/* Desktop shell: a clear work rail and a generous, quiet canvas. */
body.app-shell .sidebar {
  width: 232px;
  background: var(--df-navy);
  border-right: 1px solid #13232c;
  color: var(--ink-on-dark);
  scrollbar-width: thin;
  scrollbar-color: #48616a transparent;
}
body.app-shell .sidebar .brand {
  display: flex;
  flex-direction: column;
  padding: 25px 24px 21px;
  border-bottom-color: #ffffff18;
}
body.app-shell .brand .brand-logo {
  order: 0;
  margin: 0;
  font-size: 39px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: 1.05;
  text-transform: lowercase;
  color: #fff;
}
body.app-shell .brand .brand-logo::after { color: #a8a2ff; }
body.app-shell .brand .brand-sub { order: 1; margin: 6px 0 0; font-size: 11.5px; color: #c2cfca; }
body.app-shell .brand .brand-dealer {
  order: 2;
  margin: 17px 0 0;
  padding-top: 14px;
  border-top: 1px solid #ffffff18;
  font-size: 12px;
  color: #dce7df;
  font-weight: 550;
  letter-spacing: 0;
}
body.app-shell .brand .brand-dealer img { max-height: 30px; width: auto; max-width: 100%; }
/* Configured dealer/manufacturer artwork keeps its original primary hierarchy. */
body.app-shell .sidebar .brand:has(.brand-dealer img) .brand-dealer {
  order: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
body.app-shell .sidebar .brand:has(.brand-dealer img) .brand-dealer img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 32px;
  object-fit: contain;
  object-position: left center;
}
body.app-shell .sidebar .brand:has(.brand-dealer img) .brand-dealer.wide img {
  width: 100%;
  max-height: 52px;
}
body.app-shell .sidebar .brand:has(.brand-dealer img) .brand-logo {
  order: 1;
  margin-top: 14px;
  font-size: 24px;
  letter-spacing: -.075em;
}
body.app-shell .sidebar .brand:has(.brand-dealer img) .brand-sub { order: 2; margin-top: 5px; }
body.app-shell .sidebar nav { padding: 15px 12px; }
body.app-shell .sidebar .nav-h {
  padding: 10px 12px 8px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 650;
  letter-spacing: .13em;
  color: #a7bbb8;
}
body.app-shell .sidebar :is(nav a, .sidebar-foot a, .acct-s) {
  border-radius: 6px;
  min-height: 42px;
  padding: 10px 12px;
  gap: 11px;
  margin: 3px 0;
  font-size: 12.5px;
  font-weight: 550;
  color: #d5e1dc;
}
body.app-shell .sidebar :is(nav a, .sidebar-foot a):hover { background: #ffffff0c; color: #fff; }
body.app-shell .sidebar :is(nav a.active, .sidebar-foot a.active) {
  color: #172932;
  background: var(--df-lime);
  box-shadow: none;
  font-weight: 750;
}
body.app-shell .sidebar :is(nav a.active, .sidebar-foot a.active) .ico { color: #172932; opacity: 1; }
body.app-shell .sidebar .ico { width: 19px; height: 19px; }
body.app-shell .sidebar .sidebar-foot { border-top-color: #ffffff18; padding: 10px 12px 15px; }
body.app-shell .sidebar .side-score {
  background: #ffffff08;
  border: 1px solid #ffffff22;
  box-shadow: none;
  padding: 10px 11px;
  margin-bottom: 7px;
}
body.app-shell .sidebar .side-score.active .ss-n { color: #162832; }
body.app-shell .sidebar .side-score.active :is(.ss-t i, .ss-n i) { color: #425145; }
body.app-shell .sidebar :is(a, button, summary):focus-visible { outline-color: #e4f48b; }
body.app-shell .sidebar :is(nav, .sidebar-foot) .badge:not(.warn) { background: #465962; }
body.app-shell .sidebar .user-row { padding: 12px 5px 6px; gap: 8px; }
body.app-shell .sidebar .user-chip { font-size: 12px; gap: 9px; }
body.app-shell .sidebar .user-dot { width: 26px; height: 26px; box-shadow: 0 0 0 2px #ffffff14; }
body.app-shell .sidebar .user-row .user-ico { width: 32px; height: 36px; min-height: 36px; padding: 0; margin: 0; }
body.app-shell .sidebar .user-row .user-ico .badge { background: var(--red); }
body.app-shell .sidebar .side-score .ss-n.warn::after { background: var(--warn); }
body.app-shell .sidebar .side-tog { padding: 9px 5px 0; }
body.app-shell .sidebar .vtog { border: 1px solid #ffffff20; background: #0f222c; border-radius: 6px; padding: 3px; }
body.app-shell .sidebar .vtog button { min-height: 32px; font-size: 11.5px; border-radius: 4px; font-weight: 600; }
body.app-shell .sidebar .vtog button.on { background: #e9eee8; color: #162832; }
body.app-shell .sidebar .logout-link:hover { background: #ffffff0c; }

body.app-shell .main { padding: 34px clamp(24px, 3vw, 52px) 72px; }
body.app-shell .page-head {
  gap: 12px 18px;
  align-items: center;
  padding-bottom: 24px;
  margin-bottom: 26px;
  border-bottom: 1px solid #d7ddd1;
}
body.app-shell .page-head h1 {
  font-size: clamp(27px, 2.35vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.055em;
}
body.app-shell .page-head h1 .h1-sub { color: var(--ink-3); font-size: 15px; font-weight: 500; letter-spacing: -.02em; }
body.app-shell .page-head:has(+ .page-sub) { margin-bottom: 12px; }
body.app-shell .page-sub { font-size: 13px; margin-bottom: 24px; max-width: 84ch; }
body.app-shell .toolbar-row { margin-bottom: 18px; gap: 9px; }
body.app-shell .page-actions { gap: 8px; }

/* Reusable surfaces and measured information hierarchy. */
body.app-shell .card {
  border-color: #dbe0d5;
  border-radius: 10px;
  background-color: #fff;
  padding: 21px 23px;
  margin-bottom: 18px;
  box-shadow: 0 2px 5px #16283203;
}
body.app-shell .card h2 { font-size: 16px; letter-spacing: -.025em; font-weight: 700; margin-bottom: 15px; }
body.app-shell .card h3 { font-size: 13px; letter-spacing: -.015em; }
body.app-shell .card .card-head h2 { margin: 0; }
body.app-shell .card-head { gap: 9px 13px; margin-bottom: 16px; }
body.app-shell details.card > summary { min-height: 44px; }
body.app-shell details.card > summary h2 { margin: 0; }
body.app-shell details.card[open] > summary { padding-bottom: 14px; margin-bottom: 17px; border-bottom: 1px solid var(--line); }
body.app-shell .card.alert-red { background: #fff3f2; border-color: #efc7c2; }
body.app-shell .card.alert-amber { background: #fff8eb; border-color: #e9d8b7; }
body.app-shell .card.callout-red { box-shadow: inset 3px 0 0 var(--bad); }
body.app-shell .card.callout-amber { box-shadow: inset 3px 0 0 var(--warn); }
body.app-shell .grid { gap: 18px; }
body.app-shell .card.stat { min-height: 116px; padding: 19px 18px; }
body.app-shell .stat .n { font-size: 34px; line-height: 1.05; font-weight: 550; letter-spacing: -.055em; }
body.app-shell .stat .l { font-size: 12px; margin-top: 8px; font-weight: 600; }
body.app-shell .stat .l + .l { font-size: 11.5px; font-weight: 500; padding-top: 9px; }
body.app-shell .stat.red .n { color: var(--bad); }
body.app-shell .kpi { background: #f7f8f2; border-color: #dce1d5; border-radius: 7px; padding: 15px; }
body.app-shell .kpi.lead { background: #efedf9; border-color: #dad6ee; }
body.app-shell .kpi .v { font-weight: 600; letter-spacing: -.04em; }
body.app-shell .empty { color: #65716f; padding-block: 30px; }

/* Buttons and inputs share one restrained geometry across every workflow. */
body.app-shell .btn {
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 5px;
  border-color: #bdc8c0;
  color: #20343d;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  box-shadow: none;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
body.app-shell .btn:hover { border-color: #95a79a; background: #f4f6ee; }
body.app-shell .btn.primary { background: #4b46c8; border-color: #4b46c8; color: #fff; box-shadow: 0 2px 3px #362d7910; }
body.app-shell .btn.primary:hover { background: #3c37ad; border-color: #3c37ad; }
body.app-shell .btn.ghost { border-color: transparent; color: #52636a; background: transparent; }
body.app-shell .btn.ghost:hover { color: #293b42; background: #ecefe5; }
body.app-shell .btn.danger { background: #fff; border-color: #edc6c3; color: var(--bad); }
body.app-shell .btn.danger:hover { background: #fff1ef; border-color: #dfa49f; }
body.app-shell .btn.small { min-height: 35px; padding: 7px 11px; font-size: 12px; border-radius: 5px; }
body.app-shell .btn.icon { width: 40px; padding: 0; }
body.app-shell .btn.small.icon { width: 35px; }
body.app-shell .btn :is(.ico) { width: 17px; height: 17px; }
body.app-shell .btn:focus-visible { box-shadow: 0 0 0 4px #4b46c81c; }
body.app-shell :is(input:not([type]),input[type=text],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=date],input[type=datetime-local],input[type=time],input[type=number],select,textarea) {
  background-color: #fdfefb;
  border-color: #bdc8c0;
  border-radius: 6px;
  min-height: 42px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 450;
  color: var(--ink);
  box-shadow: 0 1px 2px #16283203;
}
body.app-shell :is(input,select,textarea):focus {
  background-color: #fff;
  border-color: #746ed9;
  box-shadow: 0 0 0 3px #4b46c819;
}
body.app-shell .fld.is-invalid :is(input,select,textarea) { border-color: var(--bad); box-shadow: var(--ring-bad); }
body.app-shell :is(input,textarea):is(:disabled,[readonly]) { background: #f0f2e9; color: #566860; box-shadow: none; }
body.app-shell .lbl, body.app-shell label.fld .lbl { font-size: 12px; font-weight: 650; color: #41554e; margin-bottom: 7px; }
body.app-shell :is(.hint,.fld-help) { font-size: 12px; line-height: 1.55; }
body.app-shell input:is([type=checkbox],[type=radio]) { accent-color: #4b46c8; }
body.app-shell :is(input.sm,select.sm) { min-height: 35px; font-size: 12.5px; padding-block: 6px; }
body.app-shell .filebtn { border-radius: 6px; background: #f8f9f3; border-color: #c7d0c4; }
body.app-shell .filebtn .fb-face { color: #4b46c8; background: #efedf9; font-weight: 650; }

/* Tables remain dense and scrollable. Status colors retain their meanings. */
body.app-shell .tbl { font-size: 12.5px; }
body.app-shell .tbl th {
  background: #f4f6ee;
  color: #52635a;
  border-color: #d9dfd3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .015em;
  padding: 12px;
}
body.app-shell .tbl td { padding: 12px; border-color: #edf0e7; line-height: 1.55; }
body.app-shell .tbl.dense td { padding: 9px 10px; }
body.app-shell .tbl tbody tr:hover td { background-color: #f8f9f2; }
body.app-shell .tbl.zebra tbody tr:nth-child(even) td { background: #fafbf7; }
body.app-shell .tbl a.rowlink { font-weight: 650; letter-spacing: -.015em; }
body.app-shell .tbl :is(.thumb,.vthumb) { border-radius: 5px; border-color: #dce2d6; }
body.app-shell .pill { font-size: 10.5px; font-weight: 650; border-radius: 4px; height: 22px; padding-inline: 8px; }
body.app-shell .pill.gray { background: #eef1e7; color: #4c5f54; }
body.app-shell .pill.blue { background: #efedf9; color: #4940ac; }
body.app-shell .pill.dark { background: #263e48; color: #fff; }
body.app-shell .flash { border-radius: 7px; padding: 14px 16px; font-size: 13px; }
body.app-shell .flash.info { background: #efedf9; border-color: #dbd6f1; color: #4940ac; }

/* Search, mode controls and filters read as part of one workspace. */
body.app-shell :is(.seg,.mseg) { background: #e9ecdf; border: 1px solid #dce2d4; border-radius: 7px; padding: 4px; gap: 3px; }
body.app-shell .seg :is(a,button), body.app-shell .mseg a { border-radius: 4px; font-size: 12.5px; font-weight: 650; min-height: 36px; padding-inline: 14px; }
body.app-shell .seg :is(a.active,button.active,.on), body.app-shell .mseg a.on { color: #3f36a6; background: #fff; box-shadow: 0 1px 4px #1628320d; }
body.app-shell .mseg .cnt { background: #edf0e5; }
body.app-shell .mseg a.on .cnt:not(.hot) { background: #efedf9; color: #4940ac; }
body.app-shell .chip { border-radius: 5px; border-color: #d0d8c8; font-size: 12px; background: #fafbf7; }
body.app-shell .chip.active { background: #263e48; border-color: #263e48; color: #fff; }
body.app-shell .chip.active:hover { background: #1b3039; }
body.app-shell .chip.on { border-color: #746ed9; background: #efedf9; color: #433ba6; }
body.app-shell .seg-count { border-radius: 6px; }
body.app-shell .seg-btn.on { background: #263e48; }
body.app-shell :is(.filters,.cust-search) { gap: 9px; margin-bottom: 17px; }
body.app-shell .filters :is(input[type=search],input[type=text]) { min-width: 150px; }
body.app-shell .inv-bar { background-color: transparent; }
body.app-shell details.menu > .menu-list { border-radius: 8px; padding: 7px; box-shadow: 0 12px 36px #1628321c; }

/* Dashboard: a calmer briefing, useful metrics, and a distinct schedule rail. */
body.app-shell .dash-zh { color: #617063; font-size: 10.5px; letter-spacing: .12em; font-weight: 700; margin: 22px 0 12px; }
body.app-shell .brief-card { border-top: 3px solid #4b46c8; padding: 23px; background: #fcfcf8; }
body.app-shell .brief-ul { gap: 13px; }
body.app-shell .brief-ul li { font-size: 13px; font-weight: 550; line-height: 1.6; }
body.app-shell .brief-ul .bic { color: #4b46c8; margin-top: 3px; }
body.app-shell .dash-quiet { border-style: dashed; background: transparent; box-shadow: none; padding: 17px 19px; }
body.app-shell .dash-quiet .dq-h { font-size: 11px; letter-spacing: .025em; }
body.app-shell .z-shift .shift-card { background: #203943; border-color: #203943; color: #ecf2e9; padding: 23px; }
body.app-shell .z-shift .shift-card :is(.shift-v,.shift-week li span,.shift-week li b) { color: #fff; }
body.app-shell .z-shift .shift-card :is(.shift-l,.shift-s,.shift-season,.shift-wknote,.shift-wk>summary) { color: #c8d8d0; }
body.app-shell .z-shift .shift-card :is(.shift-ico,.shift-edit) { color: #e4f48b; }
body.app-shell .z-shift .shift-card .shift-v { font-size: 31px; font-weight: 550; letter-spacing: -.05em; }
body.app-shell .z-shift .shift-card .shift-tag { background: #ffffff12; color: #dae7db; }
body.app-shell .z-shift .shift-card .shift-week li { background: #ffffff05; border-color: #ffffff1c; border-radius: 5px; }
body.app-shell .z-shift .shift-card .shift-week li.wk2 { background: #ffffff0b; }
body.app-shell .z-shift .shift-card .shift-week li.off span { color: #b4c8c0; }
body.app-shell .z-shift .shift-card .shift-week li.today { background: #e4f48b; border-color: #e4f48b; }
body.app-shell .z-shift .shift-card .shift-week li.today :is(b,span) { color: #1b3238; }
body.app-shell .z-numbers .card.stat { min-height: 116px; }
body.app-shell .z-numbers .grid { gap: 12px; }
body.app-shell .one80-quiet { background: #f7f8f2; }

/* Inventory, CRM and publishing keep their current controls and row behavior. */
body.app-shell :is(.veh-wrap,.cust-wrap) .card-head { padding-bottom: 13px; border-bottom: 1px solid #e7ecdf; }
body.app-shell .vrow { padding-block: 15px; border-color: #e6ebdf; }
body.app-shell .vrow-thumb { border-color: #dfe5d7; border-radius: 6px; }
body.app-shell .vrow-title { font-weight: 650; letter-spacing: -.025em; }
body.app-shell .vrow-sub { color: #64736a; }
body.app-shell .vrow-price { font-weight: 650; letter-spacing: -.035em; }
body.app-shell .crow { padding-block: 15px; border-color: #e6ebdf; }
body.app-shell .crow-name { font-weight: 650; letter-spacing: -.02em; }
body.app-shell .crow-sub { color: #64736a; }
body.app-shell .timeline li { border-left-color: #d6decf; padding-block: 12px; }
body.app-shell .timeline li::before { background: #4b46c8; box-shadow: 0 0 0 3px #efedf9; }
body.app-shell .timeline li.red::before { background: var(--bad); box-shadow: 0 0 0 3px #fff0ee; }
body.app-shell .kv { gap: 11px 18px; }
body.app-shell pre.caption { background: #f7f8f1; border-color: #dbe2d3; border-radius: 7px; line-height: 1.7; }
body.app-shell :is(.dupnote,.fbhelp) { background-color: #f5f7ef; border-color: #dce3d3; border-radius: 7px; }
body.app-shell :is(.byrow,.postrow) { border-top-color: #e5eadc; padding-block: 12px; }
body.app-shell :is(.att-item,.att-doc,.att-item img) { border-radius: 6px; }
body.app-shell .att-item.on { border-color: #6b63cf; box-shadow: 0 0 0 1px #6b63cf inset; }
body.app-shell :is(.att-doc,.att-item img) { background-color: #f2f5ea; }
body.app-shell .ms-form { gap: 12px; padding: 15px; margin-top: 16px; background: #f6f8ef; border: 1px solid #e0e6d6; border-radius: 7px; }
body.app-shell .ms-form .ms-hours { gap: 8px; align-items: center; }
body.app-shell .ms-form :is(input[type=date],input[type=time]) { width: auto; padding: 9px 11px; }
body.app-shell .ms-chip:not(.off) { background: #efedf9; color: #4b46c8; border-radius: 5px; }
body.app-shell .main .drive-view-switch { border-radius: 7px; }

@media (min-width: 1100px) {
  body.app-shell .dash-cols { grid-template-columns: minmax(0,1fr) minmax(280px,340px); column-gap: 24px; }
}
@media (min-width: 841px) and (max-width: 1180px) {
  body.app-shell .sidebar { width: 212px; }
  body.app-shell .sidebar .brand { padding-inline: 19px; }
  body.app-shell .main { padding-inline: 24px; }
  body.app-shell .card { padding: 18px; }
  body.app-shell .page-head h1 { font-size: 29px; }
}
@media (min-width: 841px) and (max-height: 960px) {
  body.app-shell .sidebar .brand { padding: 15px 20px 13px; }
  body.app-shell .brand .brand-logo { font-size: 33px; }
  body.app-shell .brand .brand-dealer { margin-top: 12px; padding-top: 11px; }
  body.app-shell .brand .brand-dealer img { max-height: 25px; }
  body.app-shell .sidebar .brand:has(.brand-dealer img) .brand-dealer.wide img { max-height: 44px; }
  body.app-shell .sidebar .brand:has(.brand-dealer img) .brand-logo { font-size: 24px; margin-top: 12px; }
  body.app-shell .sidebar nav { padding: 9px 12px; }
  body.app-shell .sidebar :is(nav a,.sidebar-foot a,.acct-s) { min-height: 38px; padding-block: 8px; margin-block: 2px; }
  body.app-shell .sidebar .sidebar-foot { padding-block: 8px; }
  body.app-shell .sidebar .nav-h { padding-block: 7px 5px; }
}

/* Mobile keeps the existing app bar, safe-area spacing, table/card switches and sheet. */
@media (max-width: 840px) {
  body.app-shell { font-size: 14px; }
  body.app-shell .main { padding: 23px var(--side-r) calc(var(--tabbar-h) + var(--tab-safe) + 28px) var(--side-l); }
  body.app-shell .m-appbar { background: #f5f4eef5; border-color: #d6ddcf; box-shadow: none; }
  body.app-shell .m-brand { text-transform: lowercase; letter-spacing: -.06em; font-size: 24px; }
  body.app-shell .m-brand .brand-dealer.txt { text-transform: none; font-size: 13px; letter-spacing: -.02em; }
  body.app-shell .m-brand:has(.brand-dealer img) {
    flex: 0 1 108px;
    min-width: 0;
    max-width: 32vw;
    padding: 6px 8px;
    margin-right: 3px;
    border-radius: 5px;
    background: #162832;
  }
  body.app-shell .m-brand:has(.brand-dealer img) .brand-dealer {
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }
  body.app-shell .m-brand:has(.brand-dealer img) img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 26px;
    object-fit: contain;
  }
  body.app-shell .m-title { font-size: 13px; font-weight: 650; letter-spacing: -.02em; }
  body.app-shell[data-nav="dashboard"] .m-appbar .m-title {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: unset;
  }
  body.app-shell .m-score { background: #fff; border-color: #d7dfcd; }
  body.app-shell .m-score.active { background: #4b46c8; border-color: #4b46c8; }
  body.app-shell .m-tabbar { background: #f9faf4f7; border-top-color: #d8dfd0; box-shadow: 0 -4px 18px #16283205; }
  body.app-shell .m-tab { color: #64746a; font-size: 10px; font-weight: 550; }
  body.app-shell .m-tab.active { color: #293d35; font-weight: 750; }
  body.app-shell .m-tab.active::before {
    inset: 3px 1px;
    width: auto;
    height: auto;
    transform: none;
    border-radius: 999px;
    background: #e4f48b;
  }
  body.app-shell .m-tab.active .nav-t { position: relative; }
  body.app-shell .m-tab.active .ico { color: #263e35; }
  body.app-shell .m-tab :is(.badge,.badge.warn), body.app-shell .m-bell .badge { box-shadow: 0 0 0 2px #fafbf5; }
  body.app-shell .m-tab .badge.warn, body.app-shell .m-bell .badge, body.app-shell .m-row .badge.warn { background: var(--red); }
  body.app-shell .m-score.warn .n { color: var(--warn); }
  body.app-shell .m-score.active.warn .n { color: #fff; }
  body.app-shell .m-sheet { background: #f9faf4; border-radius: 14px 14px 0 0; }
  body.app-shell .m-sheet-grab { background: #f9faf4; }
  body.app-shell .m-sheet-grab::before { background: #b5c3ad; }
  body.app-shell .m-sheet-top .brand-dealer:has(img) {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(52vw, 230px);
    padding: 10px 12px;
    border-radius: 6px;
    background: #162832;
  }
  body.app-shell .m-sheet-top .brand-dealer:has(img) img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 38px;
    object-fit: contain;
  }
  body.app-shell .m-sheet-h { color: #61725e; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
  body.app-shell .m-row { border-radius: 6px; font-size: 14px; font-weight: 550; }
  body.app-shell .m-row.active { background: #efedf9; color: #4b46c8; }
  body.app-shell .m-row.active .ico { color: #4b46c8; }
  body.app-shell .m-sheet .lang-btn { border-radius: 5px; background: #e8ecdf; }
  body.app-shell .m-sheet .lang-btn.on { background: #263e48; color: #fff; }
  body.app-shell .page-head { padding-bottom: 18px; margin-bottom: 20px; gap: 12px; }
  body.app-shell .page-head h1 { font-size: 25px; line-height: 1.2; }
  body.app-shell .page-head h1 .h1-sub { font-size: 13px; }
  body.app-shell .page-sub { margin-bottom: 18px; font-size: 12.5px; }
  body.app-shell .card { padding: 17px; margin-bottom: 14px; border-radius: 8px; }
  body.app-shell .card h2 { font-size: 15px; }
  body.app-shell .card.stat { min-height: 108px; padding: 16px; }
  body.app-shell .stat .n { font-size: 30px; }
  body.app-shell .stat .l { font-size: 11.5px; }
  body.app-shell .grid { gap: 12px; }
  body.app-shell .btn, body.app-shell .btn.small { min-height: 44px; padding: 10px 13px; font-size: 13px; }
  body.app-shell .btn.icon, body.app-shell .btn.small.icon { width: 44px; padding: 0; }
  body.app-shell :is(input:not([type]),input[type=text],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=date],input[type=datetime-local],input[type=time],input[type=number],select,textarea) { min-height: 44px; font-size: 16px; }
  body.app-shell .seg :is(a,button), body.app-shell .mseg a { min-height: 42px; padding-inline: 12px; font-size: 12.5px; }
  body.app-shell .chip { min-height: 42px; font-size: 12px; padding: 9px 12px; }
  body.app-shell .tbl :is(th,td) { padding: 10px 8px; }
  body.app-shell .vrow { padding: 15px 14px; }
  body.app-shell .crow { padding-block: 15px; }
  body.app-shell .vrow-price { font-size: 16px; }
  body.app-shell .inv-bar { background: #f5f4eef7; border-bottom-color: #d7dfcc; }
  body.app-shell .z-shift .shift-card { padding: 20px; }
  body.app-shell .dash-zh { margin-top: 17px; }
  body.app-shell .z-numbers .card.stat { min-height: 108px; }
  body.app-shell .ms-form { padding: 12px; gap: 10px; }
}
@media (max-width: 400px) {
  body.app-shell .card { padding: 14px; }
  body.app-shell .page-head h1 { font-size: 23px; }
  body.app-shell .m-title { font-size: 12.5px; }
  body.app-shell .m-appbar { gap: 5px; }
}
@media (hover:hover) and (pointer:fine) {
  body.app-shell a.card:hover { border-color: #bccbb1; box-shadow: 0 5px 18px #16283209; }
  body.app-shell .vrow:hover, body.app-shell .crow:hover { background-color: #f8faf2; }
}
@media (prefers-reduced-motion: reduce) {
  body.app-shell :is(.btn,.card,.chip,.seg a,.m-row) { transition: none; }
}
@media (forced-colors: active) {
  body.app-shell :is(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid Highlight; }
  body.app-shell .sidebar :is(nav a.active,.sidebar-foot a.active), body.app-shell .btn.primary { border: 1px solid ButtonText; }
}
@media print {
  body.app-shell { background: #fff; }
  body.app-shell .main { padding: 0; }
  body.app-shell .card { box-shadow: none; break-inside: avoid; }
  body.app-shell .z-shift .shift-card { background: #fff; color: #162832; border-color: #bec8c0; }
  body.app-shell .z-shift .shift-card :is(.shift-v,.shift-week li span,.shift-week li b,.shift-l,.shift-s,.shift-season,.shift-wknote,.shift-wk>summary,.shift-ico,.shift-edit) { color: #162832; }
}

/* Preview readability refinement: typography only; existing geometry is retained. */
@media screen {
  body.app-shell {
    --fs-body: 15px;
    --fs-small: 13px;
    --fs-caption: 12.5px;
    --ink-3: #56666a;
    --ink-4: #647174;
    --placeholder: #647174;
    font-size: 15px;
    font-weight: 500;
  }

  body.app-shell .page-head h1 { font-weight: 650; }
  body.app-shell .card h2 { font-size: 17px; }
  body.app-shell .card h3 { font-size: 15px; font-weight: 650; }
  body.app-shell .page-sub,
  body.app-shell .page-head h1 .h1-sub { font-size: 14px; font-weight: 500; }

  body.app-shell .tbl,
  body.app-shell .tbl :is(th,td) { font-size: 14px; }
  body.app-shell .tbl td { font-weight: 500; }
  body.app-shell .tbl th { font-weight: 650; }

  body.app-shell button { font-size: 14px; font-weight: 650; }
  body.app-shell :is(.btn,.btn.small,.chip,.seg a,.seg button,.mseg a,.lang-btn,.filebtn .fb-face) {
    font-size: 14px;
    font-weight: 650;
  }
  body.app-shell .sidebar :is(nav a,.sidebar-foot a,.acct-s),
  body.app-shell .sidebar .vtog button {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
  }
  body.app-shell .sidebar .nav-h { font-size: 11.5px; font-weight: 700; }

  body.app-shell :is(input:not([type]),input[type=text],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=date],input[type=datetime-local],input[type=time],input[type=number],select,textarea) {
    font-size: 15px;
    font-weight: 500;
  }
  body.app-shell :is(input.sm,select.sm) { font-size: 14px; }
  body.app-shell .lbl,
  body.app-shell label.fld .lbl { font-size: 14px; font-weight: 650; color: var(--ink-2); }
  body.app-shell :is(.hint,.fld-help) { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
  body.app-shell :is(.vrow-sub,.crow-sub) { font-size: 13.5px; color: var(--ink-3); }
  body.app-shell .stat .l { font-size: 13px; }
  body.app-shell .stat .l + .l { font-size: 13px; font-weight: 500; }

  @media (max-width: 840px) {
    body.app-shell { font-size: 15px; }
    body.app-shell .m-title { font-size: 14px; }
    body.app-shell .m-row { font-size: 15px; font-weight: 600; }
    body.app-shell .m-tab { font-size: 12px; font-weight: 600; }
    body.app-shell .m-tab.active { font-weight: 750; }
    body.app-shell .m-sheet-h { font-size: 11.5px; }
    body.app-shell :is(input:not([type]),input[type=text],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=date],input[type=datetime-local],input[type=time],input[type=number],select,textarea) { font-size: 16px; }
  }
  @media (max-width: 359px) {
    body.app-shell .m-tab { font-size: 10.5px; }
  }
}