:root {
      color-scheme: light;
      --ink: #101820;
      --muted: #5f6f84;
      --line: #d8e1ec;
      --panel: #ffffff;
      --page: #f5f7fb;
      --teal: #0c4da2;
      --teal-2: #eaf2ff;
      --amber: #003b7a;
      --amber-2: #eef2f6;
      --red: #ed1b2f;
      --red-2: #fde8eb;
      --green: #0c4da2;
      --green-2: #eaf2ff;
      --blue: #0c4da2;
      --mobil-blue: #0c4da2;
      --mobil-blue-dark: #003b7a;
      --mobil-red: #ed1b2f;
      --mobil-red-dark: #a40f1e;
      --mobil-silver: #eef2f6;
      --app-sidebar-width: 264px;
      --shadow: 0 18px 50px rgba(12, 77, 162, .14);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--page);
      color: var(--ink);
      -webkit-text-size-adjust: 100%;
    }

    button, input, select, textarea {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    .shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      min-width: 0;
      overflow-x: clip;
    }

    .shell > * {
      min-width: 0;
    }

    aside {
      background: var(--mobil-blue-dark);
      color: #ffffff;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      position: sticky;
      top: 0;
      height: 100vh;
      min-width: 0;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: 0;
      font-size: 1.1rem;
      min-width: 0;
    }

    .brand span {
      overflow-wrap: anywhere;
    }

    .brand-logo-card {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      border-radius: 8px;
      border: 1px solid rgba(12, 77, 162, .12);
      background: #fff;
      box-shadow: 0 10px 24px rgba(12, 77, 162, .08);
      overflow: hidden;
    }

    .brand-logo-card img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .login-brand-logo {
      inline-size: min(420px, 100%);
      block-size: 76px;
      padding: 10px 14px;
    }

    .sidebar-brand-logo {
      inline-size: 100%;
      block-size: 76px;
      padding: 10px 12px;
    }

    .mobile-brand-logo {
      inline-size: min(230px, 52vw);
      block-size: 46px;
      padding: 6px 8px;
      box-shadow: none;
    }

    .login-brand-logo.tle-logo-card {
      inline-size: min(150px, 42vw);
      block-size: 150px;
      padding: 8px;
      margin-inline: auto;
    }

    .login-screen .login-brand-logo.tle-logo-card {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      padding: 0;
    }

    .login-screen .login-brand-logo.tle-logo-card img {
      filter: drop-shadow(0 10px 18px rgba(12, 77, 162, .12));
    }

    .login-screen .brand {
      justify-content: center;
    }

    .sidebar-brand-logo.tle-logo-card {
      inline-size: 98px;
      block-size: 98px;
      padding: 6px;
      margin-inline: auto;
    }

    .mobile-brand-logo.tle-logo-card {
      inline-size: 46px;
      block-size: 46px;
      padding: 3px;
    }

    .tle-logo-card img {
      object-fit: contain;
      object-position: center;
    }

    .brand-mark {
      inline-size: 42px;
      block-size: 42px;
      border-radius: 8px;
      background: #f4c064;
      color: var(--mobil-blue-dark);
      display: grid;
      place-items: center;
    }

    .nav {
      display: grid;
      gap: 8px;
    }

    .nav button {
      color: rgba(255, 255, 255, .88);
      background: transparent;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px;
      border-radius: 8px;
      text-align: left;
      min-height: 46px;
    }

    .nav button.active,
    .nav button:hover {
      background: rgba(255,255,255,.11);
      color: #fff;
    }

    .sidebar-note {
      margin-top: auto;
      border-top: 1px solid rgba(255,255,255,.16);
      padding-top: 18px;
      color: rgba(255, 255, 255, .78);
      font-size: .88rem;
      line-height: 1.45;
    }

    main {
      min-width: 0;
      padding: 24px;
      display: grid;
      gap: 18px;
      align-content: start;
    }

    .hero {
      min-height: 250px;
      border-radius: 8px;
      overflow: hidden;
      background-image:
        linear-gradient(90deg, rgba(9, 29, 25, .88), rgba(9, 29, 25, .42) 52%, rgba(9, 29, 25, .08)),
        url("/assets/service-bay.png");
      background-size: cover;
      background-position: center;
      padding: 28px;
      color: #fff;
      display: grid;
      align-items: end;
      box-shadow: var(--shadow);
    }

    .hero h1 {
      margin: 0;
      max-width: 720px;
      font-size: clamp(2rem, 4vw, 4rem);
      line-height: 1;
      letter-spacing: 0;
    }

    .hero p {
      margin: 12px 0 0;
      max-width: 620px;
      color: #e3edea;
      font-size: 1.02rem;
      line-height: 1.5;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
    }

    .stat {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px;
      display: grid;
      gap: 8px;
      min-height: 112px;
      color: var(--ink);
      text-align: left;
    }

    button.stat {
      cursor: pointer;
    }

    button.stat:hover,
    button.stat.active {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(8, 117, 104, .12);
    }

    .stat span {
      color: var(--muted);
      font-size: .86rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .stat strong {
      font-size: 2rem;
      line-height: 1;
    }

    .dashboard-owner-header {
      min-height: 96px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: linear-gradient(90deg, #ffffff, #eef5ff);
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .dashboard-owner-header h2,
    .dashboard-section-title h2,
    .dashboard-card h3,
    .dashboard-table-panel h2 {
      margin: 0;
      letter-spacing: 0;
    }

    .dashboard-owner-header h2 {
      font-size: 1.35rem;
    }

    .dashboard-filter-card,
    .dashboard-section-title,
    .dashboard-card,
    .dashboard-table-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .dashboard-filter-card {
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .dashboard-filter-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(150px, 1fr));
      gap: 10px;
      align-items: end;
    }

    .dashboard-filter-grid label {
      min-width: 0;
    }

    .dashboard-custom-range {
      display: grid;
      grid-template-columns: repeat(2, minmax(160px, 240px));
      gap: 10px;
    }

    .dashboard-kpi-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(150px, 1fr));
      gap: 10px;
    }

    .dashboard-kpi-card {
      min-height: 108px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 12px;
      display: grid;
      gap: 7px;
      align-content: start;
    }

    .dashboard-kpi-card span {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 780;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .dashboard-kpi-card strong {
      color: var(--ink);
      font-size: 1.32rem;
      line-height: 1.05;
      overflow-wrap: anywhere;
    }

    .dashboard-kpi-card small {
      color: #607089;
      font-weight: 750;
    }

    .dashboard-kpi-card small.up { color: #0c6b47; }
    .dashboard-kpi-card small.down { color: #a40f1e; }
    .dashboard-kpi-card small.neutral { color: #607089; }

    /* dashboard-overview-kpi-drilldown-20260813
       Each owner KPI opens the exact filtered source records and calculation. */
    button.dashboard-kpi-card {
      width: 100%;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
      position: relative;
    }

    button.dashboard-kpi-card::after {
      content: "Details  ›";
      align-self: end;
      color: #0758a8;
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .02em;
    }

    button.dashboard-kpi-card:hover,
    button.dashboard-kpi-card.is-active {
      border-color: #3486dd;
      background: #f5faff;
      box-shadow: 0 0 0 2px rgba(25, 111, 201, .08);
    }

    button.dashboard-kpi-card:focus-visible {
      outline: 3px solid rgba(20, 105, 195, .24);
      outline-offset: 2px;
    }

    .dashboard-kpi-drilldown {
      grid-column: 1 / -1;
      border: 1px solid #b9d3ef;
      border-radius: 10px;
      background: #f8fbff;
      overflow: hidden;
    }

    .dashboard-kpi-drilldown-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
      border-bottom: 1px solid #d6e4f2;
      background: #eef6ff;
    }

    .dashboard-kpi-drilldown-head h3,
    .dashboard-kpi-drilldown-head p { margin: 0; }

    .dashboard-kpi-drilldown-head h3 {
      margin-top: 2px;
      font-size: 1rem;
    }

    .dashboard-kpi-drilldown-head p {
      margin-top: 4px;
      color: #52677f;
      font-size: .76rem;
      line-height: 1.4;
    }

    .dashboard-kpi-drilldown-meta {
      display: block;
      color: #0758a8;
      font-size: .66rem;
      font-weight: 900;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .dashboard-kpi-calculation {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      padding: 10px;
      border-bottom: 1px solid #dce7f3;
    }

    .dashboard-kpi-calculation > div {
      min-width: 0;
      border: 1px solid #dce7f3;
      border-radius: 8px;
      padding: 9px;
      background: #fff;
    }

    .dashboard-kpi-calculation span,
    .dashboard-kpi-calculation strong { display: block; }

    .dashboard-kpi-calculation span {
      color: #64758a;
      font-size: .64rem;
      font-weight: 850;
      text-transform: uppercase;
    }

    .dashboard-kpi-calculation strong {
      margin-top: 3px;
      color: #142337;
      font-size: .78rem;
      overflow-wrap: anywhere;
    }

    .dashboard-kpi-source-list {
      display: grid;
      gap: 8px;
      max-height: 520px;
      overflow: auto;
      padding: 10px;
      overscroll-behavior: contain;
    }

    .dashboard-kpi-source-row {
      display: grid;
      grid-template-columns: minmax(145px, 1.1fr) minmax(120px, .8fr) minmax(155px, 1fr) minmax(210px, 1.45fr) minmax(90px, .65fr);
      gap: 8px;
      border: 1px solid #dce7f4;
      border-radius: 8px;
      padding: 9px;
      background: #fff;
    }

    .dashboard-kpi-source-cell { min-width: 0; }
    .dashboard-kpi-source-cell span,
    .dashboard-kpi-source-cell strong { display: block; }
    .dashboard-kpi-source-cell span {
      color: #64758a;
      font-size: .63rem;
      font-weight: 850;
      letter-spacing: .03em;
      text-transform: uppercase;
    }
    .dashboard-kpi-source-cell strong {
      margin-top: 3px;
      color: #142337;
      font-size: .75rem;
      line-height: 1.38;
      overflow-wrap: anywhere;
    }

    @media (max-width: 980px) {
      .dashboard-kpi-source-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 640px) {
      #dashboardKpiGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        scroll-snap-type: none;
      }
      #dashboardKpiGrid > * { min-width: 0; }
      .dashboard-kpi-calculation { grid-template-columns: 1fr; }
      .dashboard-kpi-source-row { grid-template-columns: 1fr; }
      .dashboard-kpi-drilldown-head { align-items: center; }
    }

    .dashboard-charts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .dashboard-card,
    .dashboard-table-panel {
      padding: 14px;
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .dashboard-card h3,
    .dashboard-table-panel h2 {
      font-size: .98rem;
    }

    .dashboard-chart {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .bar-row {
      display: grid;
      grid-template-columns: minmax(74px, 120px) minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      font-size: .78rem;
      min-width: 0;
    }

    .bar-row span,
    .bar-row strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bar-track {
      min-width: 0;
      height: 12px;
      border-radius: 999px;
      background: #eef3f8;
      overflow: hidden;
      position: relative;
    }

    .bar-track i,
    .bar-track b {
      display: block;
      height: 100%;
      border-radius: inherit;
      min-width: 2px;
    }

    .bar-track i { background: var(--mobil-blue); }
    .bar-track b { background: var(--mobil-red); opacity: .78; }

    .dual-track {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2px;
      height: 20px;
      background: transparent;
    }

    .dual-track i,
    .dual-track b {
      height: 9px;
      background: var(--mobil-blue);
    }

    .dual-track b {
      background: #3d7cc4;
    }

    .dashboard-section-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .live-board-settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(180px, 1fr));
      gap: 10px;
    }

    .live-board-slide-list {
      display: grid;
      gap: 8px;
    }

    .live-board-slide-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 52px;
      padding: 9px 11px;
      border: 1px solid #dbe6f2;
      border-radius: 8px;
      background: #f8fbff;
    }

    .live-board-slide-item.is-dragging { opacity: .5; }

    .live-board-slide-handle {
      color: #526b88;
      cursor: grab;
      font-size: 1.16rem;
      line-height: 1;
      user-select: none;
    }

    .live-board-slide-copy { min-width: 0; }
    .live-board-slide-copy strong,
    .live-board-slide-copy small { display: block; }
    .live-board-slide-copy small { margin-top: 2px; color: var(--muted); font-size: .76rem; }

    @media (max-width: 680px) {
      .live-board-settings-grid { grid-template-columns: 1fr; }
    }

    .dashboard-section-title {
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .dashboard-table-wrap {
      overflow-x: auto;
      border: 1px solid #e3ebf5;
      border-radius: 8px;
    }

    .dashboard-table {
      width: 100%;
      min-width: 900px;
      border-collapse: collapse;
      font-size: .82rem;
    }

    .dashboard-table th,
    .dashboard-table td {
      padding: 9px 10px;
      border-bottom: 1px solid #e7eef7;
      text-align: left;
      vertical-align: top;
    }

    .dashboard-table th {
      color: #53677f;
      background: #f8fbff;
      font-weight: 850;
      white-space: nowrap;
    }

    .dashboard-table tr:last-child td {
      border-bottom: 0;
    }

    .dashboard-mini-list {
      display: grid;
      gap: 8px;
    }

    .dashboard-mini-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid #e3ebf5;
      border-radius: 8px;
      padding: 9px 10px;
      background: #fbfdff;
      font-size: .82rem;
    }

    /* dashboard-loyalty-admin-drilldown-20260813:
       compact KPI selectors with a same-page Admin audit trail. */
    .dashboard-loyalty-metric {
      width: 100%;
      min-height: 42px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      border: 1px solid #dce7f4;
      border-radius: 8px;
      padding: 9px 10px;
      background: #fbfdff;
      color: #132238;
      font: inherit;
      text-align: left;
    }

    button.dashboard-loyalty-metric {
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    button.dashboard-loyalty-metric:hover,
    button.dashboard-loyalty-metric:focus-visible,
    button.dashboard-loyalty-metric.is-active {
      border-color: #0f62bd;
      background: #eef6ff;
      box-shadow: 0 0 0 2px rgba(15, 98, 189, .1);
      outline: none;
    }

    .dashboard-loyalty-metric-label,
    .dashboard-loyalty-metric-value {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .dashboard-loyalty-metric-label small {
      color: #64758a;
      font-size: .7rem;
      font-weight: 750;
    }

    .dashboard-loyalty-metric-value {
      justify-content: flex-end;
      white-space: nowrap;
    }

    .dashboard-loyalty-metric-value svg {
      width: 15px;
      height: 15px;
      color: #0f62bd;
    }

    .dashboard-loyalty-drilldown {
      margin-top: 10px;
      border: 1px solid #bfd5ee;
      border-radius: 10px;
      background: #f8fbff;
      overflow: hidden;
    }

    .dashboard-loyalty-drilldown-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
      border-bottom: 1px solid #d7e4f2;
      background: #eef6ff;
    }

    .dashboard-loyalty-drilldown-head h4,
    .dashboard-loyalty-drilldown-head p {
      margin: 0;
    }

    .dashboard-loyalty-drilldown-head h4 {
      font-size: .92rem;
    }

    .dashboard-loyalty-drilldown-head p {
      margin-top: 3px;
      color: #53677f;
      font-size: .76rem;
      line-height: 1.4;
    }

    .dashboard-loyalty-drilldown-kicker {
      display: block;
      margin-bottom: 3px;
      color: #0758a8;
      font-size: .65rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .dashboard-loyalty-audit-list {
      display: grid;
      gap: 8px;
      max-height: 520px;
      overflow: auto;
      padding: 10px;
    }

    .dashboard-loyalty-audit-row {
      display: grid;
      grid-template-columns: minmax(150px, 1.2fr) minmax(105px, .75fr) minmax(125px, .9fr) minmax(190px, 1.45fr) minmax(85px, .55fr);
      gap: 8px;
      border: 1px solid #dce7f4;
      border-radius: 8px;
      padding: 9px;
      background: #fff;
    }

    .dashboard-loyalty-audit-cell {
      min-width: 0;
    }

    .dashboard-loyalty-audit-cell span,
    .dashboard-loyalty-audit-cell strong {
      display: block;
    }

    .dashboard-loyalty-audit-cell span {
      color: #64758a;
      font-size: .65rem;
      font-weight: 850;
      letter-spacing: .03em;
      text-transform: uppercase;
    }

    .dashboard-loyalty-audit-cell strong {
      margin-top: 3px;
      color: #142337;
      font-size: .76rem;
      line-height: 1.38;
      overflow-wrap: anywhere;
    }

    .dashboard-loyalty-drilldown-empty,
    .dashboard-loyalty-drilldown-hint {
      margin-top: 10px;
      border: 1px dashed #bfd0df;
      border-radius: 8px;
      padding: 11px;
      color: #53677f;
      background: #fbfdff;
      font-size: .76rem;
      line-height: 1.4;
      text-align: center;
    }

    @media (max-width: 980px) {
      .dashboard-loyalty-audit-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    /* service-labour-compact-drilldown-20260814:
       service group -> service -> one transparent vehicle/region estimate. */
    .service-labour-workspace {
      display: grid;
      gap: 12px;
      padding: 12px;
      border: 1px solid #cfdeed;
      border-radius: 14px;
      background: #f8fbff;
    }

    .service-labour-workspace[hidden] {
      display: none !important;
    }

    .service-labour-head,
    .service-labour-browser-head,
    .service-labour-detail-head,
    .service-labour-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .service-labour-head h3,
    .service-labour-browser-head h3,
    .service-labour-detail-head h3,
    .service-labour-head p,
    .service-labour-browser-head p,
    .service-labour-detail-head p {
      margin: 0;
    }

    .service-labour-kicker {
      display: block;
      margin-bottom: 3px;
      color: #0758a8;
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .service-labour-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .service-labour-summary > div,
    .service-labour-breakdown > div {
      min-width: 0;
      display: grid;
      gap: 3px;
      border: 1px solid #d8e5f2;
      border-radius: 10px;
      padding: 9px 11px;
      background: #fff;
    }

    .service-labour-summary span,
    .service-labour-breakdown span {
      color: #5d7087;
      font-size: .7rem;
      font-weight: 760;
    }

    .service-labour-summary strong,
    .service-labour-breakdown strong {
      color: #10243c;
      font-size: .94rem;
    }

    .service-labour-group-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .service-labour-group-card,
    .service-labour-row {
      min-width: 0;
      min-height: 72px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      border: 1px solid #d3e0ed;
      border-radius: 12px;
      padding: 11px 12px;
      background: #fff;
      color: #15273d;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .service-labour-group-card:hover,
    .service-labour-group-card:focus-visible,
    .service-labour-row:hover,
    .service-labour-row:focus-visible {
      border-color: #4282c7;
      outline: none;
      background: #edf6ff;
      box-shadow: 0 0 0 2px rgba(12, 77, 162, .08);
    }

    .service-labour-group-card > svg,
    .service-labour-row > svg:first-child {
      width: 23px;
      height: 23px;
      color: #0d62b7;
    }

    .service-labour-group-card span,
    .service-labour-row span {
      min-width: 0;
    }

    .service-labour-group-card strong,
    .service-labour-group-card small,
    .service-labour-row strong,
    .service-labour-row small {
      display: block;
    }

    .service-labour-group-card strong,
    .service-labour-row strong {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .service-labour-group-card small,
    .service-labour-row small {
      margin-top: 3px;
      color: #66798f;
      font-size: .72rem;
    }

    .service-labour-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .service-labour-row-price {
      color: #0758a8;
      font-size: .78rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .service-labour-native-select {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      clip: rect(0 0 0 0) !important;
      white-space: nowrap !important;
    }

    .service-labour-category-rail {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 5px;
      padding: 5px;
      border: 1px solid #c8d8e8;
      border-radius: 13px;
      background: #eaf2fb;
    }

    .service-labour-category-rail::before {
      content: "";
      position: absolute;
      top: 50%;
      right: 8%;
      left: 8%;
      height: 2px;
      background: #aec8e3;
      transform: translateY(-50%);
    }

    .service-labour-category-rail button {
      position: relative;
      z-index: 1;
      min-width: 0;
      min-height: 54px;
      border: 1px solid transparent;
      border-radius: 9px;
      padding: 6px 5px;
      background: rgba(255, 255, 255, .92);
      color: #52667d;
      font: inherit;
      font-size: .7rem;
      font-weight: 820;
      cursor: pointer;
    }

    .service-labour-category-rail button.is-selected {
      border-color: #0b64bd;
      background: #0b5eb4;
      color: #fff;
      box-shadow: 0 4px 12px rgba(12, 77, 162, .18);
    }

    .service-labour-region-control {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .service-labour-region-control button {
      min-height: 46px;
      border: 1px solid #c8d8e8;
      border-radius: 10px;
      background: #fff;
      color: #263d57;
      font: inherit;
      font-weight: 850;
      cursor: pointer;
    }

    .service-labour-region-control button.is-selected {
      border-color: #0b64bd;
      background: #e8f3ff;
      color: #0758a8;
    }

    .service-labour-estimate-card {
      display: grid;
      gap: 12px;
      border: 1px solid #b9d3eb;
      border-radius: 14px;
      padding: 14px;
      background: linear-gradient(135deg, #fff 0%, #eef7ff 100%);
    }

    .service-labour-estimate-amount {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
    }

    .service-labour-estimate-amount strong {
      color: #084f99;
      font-size: clamp(1.45rem, 3vw, 2rem);
    }

    .service-labour-breakdown {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .service-labour-note {
      border-left: 3px solid #f0a232;
      padding: 8px 10px;
      background: #fff9ec;
      color: #6c5228;
      font-size: .76rem;
      line-height: 1.45;
    }

    .service-labour-admin-editor {
      display: grid;
      gap: 10px;
      border: 1px solid #dfc999;
      border-radius: 12px;
      padding: 12px;
      background: #fffaf0;
    }

    .service-labour-admin-editor[hidden] {
      display: none !important;
    }

    .service-labour-admin-fields {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    @media (max-width: 980px) {
      .service-labour-group-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .service-labour-admin-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .service-labour-workspace {
        padding: 10px;
      }

      .service-labour-head,
      .service-labour-browser-head,
      .service-labour-detail-head,
      .service-labour-toolbar {
        align-items: stretch;
        flex-direction: column;
      }

      .service-labour-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .service-labour-group-grid,
      .service-labour-list,
      .service-labour-breakdown,
      .service-labour-admin-fields {
        grid-template-columns: 1fr;
      }

      .service-labour-category-rail {
        gap: 3px;
        padding: 4px;
      }

      .service-labour-category-rail button {
        min-height: 58px;
        padding: 5px 2px;
        font-size: .61rem;
        line-height: 1.15;
      }

      .service-labour-browser-head .btn,
      .service-labour-detail-head .btn,
      .service-labour-toolbar .search-field {
        width: 100%;
      }
    }

    @media (max-width: 560px) {
      .dashboard-loyalty-metric {
        min-height: 46px;
      }

      .dashboard-loyalty-metric-label small {
        display: none;
      }

      .dashboard-loyalty-audit-row {
        grid-template-columns: 1fr;
      }

      .dashboard-loyalty-drilldown-head {
        align-items: center;
      }
    }

    .workspace {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      align-items: start;
    }

    [data-tab-panel] {
      display: none;
    }

    [data-tab-panel].active {
      display: grid;
    }

    .panel[data-tab-panel].active,
    .audit-panel[data-tab-panel].active {
      display: block;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
    }

    .panel-head {
      padding: 16px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .panel-head-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
    }

    .panel-head h2 {
      margin: 0;
      font-size: 1rem;
      letter-spacing: 0;
    }

    form {
      padding: 16px;
      display: grid;
      gap: 14px;
    }

    .promotion-builder {
      padding: 16px;
      display: grid;
      gap: 14px;
    }

    .promotion-builder textarea {
      min-height: 112px;
      resize: vertical;
      line-height: 1.45;
    }

    .promotion-builder textarea.promotion-offer {
      min-height: 84px;
    }

    .section-soft {
      border: 1px solid #d8e2de;
      border-radius: 8px;
      padding: 14px;
      background: #f8fbff;
      display: grid;
      gap: 10px;
    }

    .section-soft h3 {
      margin: 0;
      font-size: 0.95rem;
      letter-spacing: 0;
    }

    .promotion-image-panel {
      border: 1px solid #d8e2de;
      border-radius: 8px;
      background: #fbfcfb;
      padding: 12px;
      display: grid;
      gap: 10px;
    }

    .promotion-image-preview-list {
      display: none;
      grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
      gap: 10px;
      align-items: start;
    }

    .promotion-image-preview-list.show {
      display: grid;
    }

    .promotion-image-preview-list img {
      width: 100%;
      max-height: 180px;
      object-fit: contain;
      border: 1px solid #d8e2de;
      border-radius: 8px;
      background: #fff;
      padding: 8px;
    }

    .promotion-link-preview {
      min-height: 180px;
      border: 1px solid #d8e2de;
      border-radius: 8px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 8px;
      align-content: start;
      overflow-wrap: anywhere;
    }

    .promotion-attachment-card {
      grid-column: 1 / -1;
      grid-template-columns: auto 1fr;
      align-items: center;
    }

    .promotion-attachment-card img {
      width: 140px;
      height: 140px;
      object-fit: contain;
    }

    .promotion-message-editor {
      display: grid;
      gap: 12px;
      border: 1px solid #d8e4f1;
      border-radius: 10px;
      background: linear-gradient(135deg, #f7faff 0%, #ffffff 64%);
      padding: 14px;
    }

    .promotion-message-head,
    .membership-settings-head,
    .membership-benefit-editor-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .promotion-message-head h3,
    .membership-settings-head h3,
    .membership-benefit-editor-head h4 {
      margin: 0;
      color: var(--mobil-blue-dark);
    }

    .promotion-message-head p,
    .membership-settings-head p,
    .membership-benefit-editor-head p {
      margin: 4px 0 0;
    }

    #promotionMessage {
      min-height: 168px;
      background: #fff;
    }

    .promotion-template-help {
      display: grid;
      gap: 7px;
      border-top: 1px solid #dbe6f2;
      padding-top: 10px;
    }

    .promotion-template-help > span {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 750;
    }

    .promotion-template-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .promotion-template-chips code {
      border: 1px solid #cfe0f4;
      border-radius: 999px;
      background: #fff;
      color: var(--mobil-blue-dark);
      padding: 4px 7px;
      font-family: inherit;
      font-size: .74rem;
      font-weight: 800;
    }

    .promotion-message-status {
      display: grid;
      gap: 5px;
      border-left: 3px solid var(--mobil-blue);
      background: rgba(255,255,255,.72);
      padding: 9px 10px;
    }

    .promotion-message-status .sub {
      margin: 0;
    }

    .promotion-recipient-details {
      border: 1px solid #d8e2de;
      border-radius: 8px;
      background: #fbfcfb;
      padding: 12px;
    }

    .promotion-recipient-details summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      color: var(--mobil-blue-dark);
      font-weight: 850;
    }

    .promotion-recipient-details[open] summary {
      margin-bottom: 10px;
    }

    .promotion-recipient-list {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .promotion-recipient-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 12px;
      align-items: start;
      border: 1px solid #e1e9e5;
      border-radius: 8px;
      background: #fff;
      padding: 10px;
    }

    .promotion-recipient-row strong {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .promotion-recipient-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
      color: var(--muted);
      font-size: .8rem;
      text-align: right;
    }

    @media (max-width: 560px) {
      .promotion-recipient-row {
        grid-template-columns: 1fr;
      }

      .promotion-recipient-meta {
        justify-content: flex-start;
        text-align: left;
      }
    }

    .import-panel {
      margin: 16px;
      border: 1px solid #d8e2de;
      border-radius: 8px;
      background: #fbfcfb;
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .import-panel h3 {
      margin: 0;
      font-size: .98rem;
    }

    .import-preview {
      overflow-x: auto;
      border: 1px solid #e3ebe7;
      border-radius: 8px;
      background: #fff;
      display: none;
    }

    .import-preview.show {
      display: block;
    }

    .import-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 820px;
      font-size: .84rem;
    }

    .import-table th,
    .import-table td {
      padding: 9px 10px;
      border-bottom: 1px solid #e3ebe7;
      text-align: left;
      vertical-align: top;
    }

    .import-table th {
      color: var(--muted);
      background: #f8fafc;
      font-weight: 800;
    }

    .import-table tr:last-child td {
      border-bottom: 0;
    }

    .field-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .cctv-branch-context {
      grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
      align-items: end;
      margin-bottom: 14px;
      border: 1px solid #c9dced;
      background: linear-gradient(135deg, #f8fbff, #fff 58%);
    }

    .cctv-branch-context h3,
    .cctv-branch-card h3 {
      margin: 0;
      color: var(--ink);
    }

    .cctv-branch-context p,
    .cctv-branch-card p {
      margin: 4px 0 0;
    }

    .cctv-branch-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      align-items: start;
    }

    .cctv-branch-card {
      min-width: 0;
      border: 1px solid #d9e5e1;
      border-top: 3px solid #0c4da2;
      background: linear-gradient(180deg, #fff, #fbfdfd);
    }

    .cctv-branch-setup-card {
      border-top-color: #1c7a57;
    }

    .cctv-branch-camera-card {
      border-top-color: #b87509;
    }

    .cctv-branch-card .field-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cctv-branch-card details {
      border-top: 1px solid #e4ece9;
      padding-top: 10px;
    }

    .cctv-branch-card details ol {
      margin-bottom: 0;
    }

    .cctv-branch-status {
      min-height: 2.5em;
      line-height: 1.4;
    }

    .cctv-branch-context .cctv-branch-status {
      grid-column: 1 / -1;
    }

    /* cctv-live-compact-drilldown-20260813
       Keep the selected branch visible, then open one focused CCTV task. */
    #cctv-live.cctv-compact-drilldown > .panel-head {
      padding: 12px 14px;
    }

    #cctv-live.cctv-compact-drilldown > .panel-head h2 {
      font-size: 1rem;
    }

    #cctv-live.cctv-compact-drilldown > .panel-head .sub {
      margin-top: 3px;
      font-size: .76rem;
    }

    #cctv-live.cctv-compact-drilldown > .cctv-branch-context {
      margin: 0 14px 12px;
      padding: 12px 14px;
      border-radius: 14px;
    }

    #cctv-live.cctv-compact-drilldown > .cctv-compact-shell {
      margin-bottom: 12px;
    }

    .service-catalogue-compact-selector.cctv-compact-selector {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cctv-compact-detail-status {
      justify-self: end;
      white-space: nowrap;
    }

    #cctv-live.cctv-compact-drilldown > .cctv-compact-panel-grid {
      display: none;
      grid-template-columns: minmax(0, 1fr);
      margin: 0 14px 14px;
    }

    #cctv-live.cctv-compact-drilldown > .cctv-compact-panel-grid > [data-cctv-compact-panel] {
      display: none;
      width: 100%;
    }

    #cctv-live[data-cctv-view="access"] > [data-cctv-compact-grid="primary"],
    #cctv-live[data-cctv-view="gateway"] > [data-cctv-compact-grid="primary"],
    #cctv-live[data-cctv-view="cameras"] > [data-cctv-compact-grid="secondary"],
    #cctv-live[data-cctv-view="mapping"] > [data-cctv-compact-grid="secondary"] {
      display: grid;
    }

    #cctv-live.cctv-compact-drilldown[data-cctv-view="access"] > .cctv-compact-panel-grid > [data-cctv-compact-panel="access"],
    #cctv-live.cctv-compact-drilldown[data-cctv-view="gateway"] > .cctv-compact-panel-grid > [data-cctv-compact-panel="gateway"],
    #cctv-live.cctv-compact-drilldown[data-cctv-view="cameras"] > .cctv-compact-panel-grid > [data-cctv-compact-panel="cameras"],
    #cctv-live.cctv-compact-drilldown[data-cctv-view="mapping"] > .cctv-compact-panel-grid > [data-cctv-compact-panel="mapping"] {
      display: grid;
    }

    @media (max-width: 860px) {
      .cctv-branch-context,
      .cctv-branch-card-grid {
        grid-template-columns: 1fr;
      }

      .service-catalogue-compact-selector.cctv-compact-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 560px) {
      .cctv-branch-card .field-grid {
        grid-template-columns: 1fr;
      }

      #cctv-live.cctv-compact-drilldown > .panel-head {
        padding: 10px;
      }

      #cctv-live.cctv-compact-drilldown > .cctv-branch-context,
      #cctv-live.cctv-compact-drilldown > .cctv-compact-panel-grid {
        margin-inline: 10px;
      }

      .service-catalogue-compact-selector.cctv-compact-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .cctv-compact-selector > button {
        min-height: 84px;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 7px;
      }

      .cctv-compact-selector .service-catalogue-compact-icon {
        width: 32px;
        height: 32px;
      }

      .cctv-compact-selector .service-catalogue-compact-next {
        grid-column: 2;
        justify-self: start;
      }

      .cctv-compact-detail-status {
        grid-column: 1 / -1;
        justify-self: start;
      }
    }

    .service-item-panel {
      border: 1px solid #cfe0dc;
      border-radius: 12px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      padding: 14px;
      display: grid;
      gap: 12px;
      box-shadow: 0 8px 22px rgba(12, 77, 162, .06);
    }

    /* mechanic-visit-details-conditional-oil-20260808 */
    .mechanic-visit-details-panel {
      border: 1px solid #cfe0dc;
      border-radius: 16px;
      background: linear-gradient(180deg, #fff, #f7fbff);
      padding: 14px;
      display: grid;
      gap: 12px;
      min-width: 0;
      box-shadow: 0 8px 22px rgba(12, 77, 162, .06);
    }

    /* mechanic-cctv-hybrid-selector-20260809 */
    .role-mechanic #add-record .mechanic-visit-details-panel {
      display: none !important;
    }

    .mechanic-cctv-card-slot {
      display: none;
      min-width: 0;
    }

    .mechanic-cctv-card-slot[hidden] {
      display: none !important;
    }

    .role-mechanic #add-record .mechanic-cctv-card-slot:not([hidden]) {
      display: block;
    }

    .mechanic-cctv-launch-card {
      display: grid;
    }

    .mechanic-cctv-launch-card:disabled {
      cursor: not-allowed;
      opacity: .62;
    }

    .mechanic-cctv-picker-sheet {
      grid-template-rows: auto auto minmax(0, 1fr) auto;
    }

    .mechanic-cctv-picker-copy {
      display: grid;
      gap: 4px;
      padding: 8px 16px 12px;
      border-bottom: 1px solid #e1eaf4;
    }

    .mechanic-cctv-picker-copy h4,
    .mechanic-cctv-picker-copy p {
      margin: 0;
    }

    .mechanic-cctv-picker-copy h4 {
      color: var(--ink);
      font-size: 1.18rem;
    }

    .mechanic-cctv-picker-copy p {
      color: var(--muted);
      font-size: .8rem;
      line-height: 1.35;
    }

    .mechanic-cctv-picker-list {
      padding-top: 8px;
    }

    .mechanic-cctv-result.selected {
      background: #eaf3ff;
      color: var(--blue);
    }

    body.cctv-picker-open {
      overflow: hidden;
    }

    .mechanic-visit-details-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .mechanic-visit-details-head h3 {
      margin: 0 0 2px;
      color: var(--ink);
      font-size: 1rem;
    }

    .mechanic-visit-details-head p {
      margin: 0;
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.35;
    }

    .mechanic-visit-primary-grid,
    .mechanic-visit-secondary-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
      gap: 10px;
      min-width: 0;
    }

    .mechanic-visit-detail {
      min-width: 0;
      margin: 0;
    }

    .mechanic-visit-detail > span {
      display: block;
      margin-bottom: 5px;
      color: #4c627c;
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .03em;
      text-transform: uppercase;
    }

    .mechanic-visit-detail input,
    .mechanic-visit-detail select {
      width: 100%;
      min-width: 0;
    }

    .mechanic-visit-detail[hidden] {
      display: none !important;
    }

    .mechanic-visit-detail-plate input {
      font-weight: 850;
      letter-spacing: .035em;
      text-transform: uppercase;
    }

    .mechanic-visit-detail-oil {
      border-left: 3px solid #1474c4;
      padding-left: 10px;
    }

    .mechanic-visit-detail-oil small {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: .74rem;
      line-height: 1.25;
    }

    @media (max-width: 520px) {
      .mechanic-visit-details-panel {
        padding: 12px;
        gap: 10px;
      }

      .mechanic-visit-primary-grid {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
      }

      .mechanic-visit-secondary-grid {
        grid-template-columns: 1fr;
      }

      .mechanic-visit-detail input,
      .mechanic-visit-detail select {
        font-size: 1rem;
        min-height: 46px;
      }
    }

    @media (max-width: 350px) {
      .mechanic-visit-primary-grid {
        grid-template-columns: 1fr;
      }
    }

    .service-item-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .service-item-panel-head h3 {
      margin: 0 0 2px;
      color: var(--ink);
      font-size: 1rem;
    }

    .service-item-panel-head p {
      margin: 0;
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.35;
    }

    .service-item-grid {
      grid-template-columns: minmax(180px, .85fr) minmax(160px, .75fr) minmax(220px, 1.25fr);
      align-items: end;
    }

    .service-item-grid .wide {
      grid-column: span 2;
    }

    /* service-items-balanced-layout-20260824
       The first row follows catalogue selection; the second row keeps the oil
       reminder beside a wider product field without an empty third column. */
    .service-item-grid .service-item-oil-used {
      grid-column: span 2;
    }

    .service-item-helper {
      border: 1px dashed #c6d7d3;
      border-radius: 10px;
      background: #fff;
      color: var(--muted);
      padding: 9px 11px;
      font-size: .82rem;
      line-height: 1.35;
    }

    .mechanic-service-hybrid {
      display: none;
      min-width: 0;
    }

    .role-mechanic #add-record .mechanic-service-hybrid {
      display: grid;
      gap: 10px;
    }

    .role-mechanic #add-record .service-item-native,
    .role-mechanic #add-record #serviceItemScopeBadge,
    .role-mechanic #add-record .service-item-panel-head p,
    .role-mechanic #add-record .service-item-helper {
      display: none !important;
    }

    .mechanic-service-launch-card {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) 42px;
      gap: 12px;
      align-items: center;
      width: 100%;
      min-width: 0;
      min-height: 82px;
      padding: 12px;
      border: 1px solid #cfe0f2;
      border-radius: 16px;
      background: linear-gradient(135deg, #f8fbff, #edf5ff);
      color: var(--ink);
      text-align: left;
      box-shadow: 0 8px 20px rgba(12, 77, 162, .08);
    }

    .mechanic-service-launch-icon,
    .mechanic-service-launch-arrow {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: #e5f0ff;
      color: var(--blue);
    }

    .mechanic-service-launch-arrow {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      background: var(--blue);
      color: #fff;
    }

    .mechanic-service-launch-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .mechanic-service-launch-copy strong {
      color: var(--ink);
      font-size: 1rem;
      line-height: 1.2;
    }

    .mechanic-service-launch-copy small {
      overflow: hidden;
      color: var(--muted);
      font-size: .78rem;
      font-weight: 700;
      line-height: 1.3;
      text-overflow: ellipsis;
    }

    .mechanic-service-selection-list {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .mechanic-service-selected-row {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-width: 0;
      padding: 10px;
      border: 1px solid #cfe0dc;
      border-radius: 14px;
      background: #fff;
    }

    .mechanic-service-selected-row > .service-picker-result-icon {
      width: 40px;
      height: 40px;
    }

    .mechanic-service-selected-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .mechanic-service-selected-copy strong,
    .mechanic-service-selected-copy small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mechanic-service-selected-copy strong {
      color: var(--ink);
      font-size: .9rem;
    }

    .mechanic-service-selected-copy small {
      color: var(--muted);
      font-size: .72rem;
      font-weight: 700;
    }

    .mechanic-service-selected-actions {
      display: flex;
      gap: 6px;
    }

    .mechanic-service-selected-actions button {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 1px solid #d7e4f2;
      border-radius: 10px;
      background: #f7faff;
      color: var(--blue);
    }

    .mechanic-service-selected-actions button[data-mechanic-service-action="remove"] {
      color: #c81e35;
    }

    .mechanic-service-add-another {
      width: 100%;
      min-height: 44px;
    }

    .guided-vehicle-sheet.mechanic-service-picker-sheet {
      grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    }

    .mechanic-service-picker-search[hidden],
    .mechanic-service-picker-foot[hidden] {
      display: none !important;
    }

    .mechanic-service-picker-list .guided-vehicle-result {
      grid-template-columns: 44px minmax(0, 1fr) 24px;
      min-height: 64px;
      padding: 9px 6px;
    }

    .service-picker-result-icon {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      overflow: hidden;
      border-radius: 12px;
      background: #eaf3ff;
      color: var(--blue);
    }

    .service-picker-result-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .service-picker-empty {
      margin: 6px 0;
      padding: 18px 12px;
      border: 1px dashed #c8d8e8;
      border-radius: 14px;
      color: var(--muted);
      text-align: center;
    }

    .service-picker-confirm-card {
      display: grid;
      gap: 10px;
      margin-top: 4px;
      padding: 16px;
      border: 1px solid #cfe0dc;
      border-radius: 16px;
      background: linear-gradient(135deg, #f4fbf7, #fff);
    }

    .service-picker-confirm-card strong {
      color: var(--ink);
      font-size: 1.05rem;
    }

    .service-picker-confirm-card span {
      color: var(--muted);
      font-weight: 700;
    }

    .mechanic-service-picker-foot {
      display: grid;
      gap: 6px;
    }

    body.service-picker-open {
      overflow: hidden;
    }

    .mechanic-maintenance-date-panel {
      display: none;
      gap: 10px;
      min-width: 0;
      padding: 13px;
      border: 1px solid #cfe0dc;
      border-radius: 16px;
      background: linear-gradient(135deg, #f7fbff, #fff);
      box-shadow: 0 8px 20px rgba(12, 77, 162, .06);
    }

    .role-mechanic #add-record .mechanic-maintenance-date-panel:not([hidden]) {
      display: grid;
    }

    .role-mechanic #add-record .service-maintenance-date-native,
    .role-mechanic #add-record .mechanic-visit-date-native {
      display: none !important;
    }

    .mechanic-maintenance-date-head {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      justify-content: space-between;
      min-width: 0;
    }

    .mechanic-maintenance-date-head h3,
    .mechanic-maintenance-date-head p {
      margin: 0;
    }

    .mechanic-maintenance-date-head h3 {
      color: var(--ink);
      font-size: 1rem;
    }

    .mechanic-maintenance-date-head p {
      margin-top: 3px;
      color: var(--muted);
      font-size: .76rem;
      font-weight: 700;
      line-height: 1.35;
    }

    .mechanic-maintenance-date-list {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .mechanic-maintenance-date-row {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      width: 100%;
      min-width: 0;
      min-height: 66px;
      padding: 10px;
      border: 1px solid #d7e4f2;
      border-radius: 14px;
      background: #fff;
      color: var(--ink);
      text-align: left;
    }

    .mechanic-maintenance-date-row:hover,
    .mechanic-maintenance-date-row:focus-visible {
      border-color: var(--blue);
      box-shadow: 0 8px 18px rgba(12, 77, 162, .1);
    }

    .mechanic-maintenance-date-icon {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: #eaf3ff;
      color: var(--blue);
    }

    .mechanic-maintenance-date-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .mechanic-maintenance-date-copy strong,
    .mechanic-maintenance-date-copy small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mechanic-maintenance-date-copy strong {
      font-size: .9rem;
    }

    .mechanic-maintenance-date-copy small {
      color: var(--muted);
      font-size: .74rem;
      font-weight: 700;
    }

    .mechanic-maintenance-date-status {
      display: flex;
      gap: 5px;
      align-items: center;
      color: var(--blue);
      font-size: .72rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .mechanic-maintenance-date-status .icon {
      width: 16px;
      height: 16px;
    }

    .mechanic-maintenance-date-options {
      display: grid;
      gap: 12px;
      padding: 4px 2px;
    }

    .mechanic-maintenance-date-today {
      min-height: 58px;
      justify-content: center;
      font-size: .95rem;
    }

    .mechanic-maintenance-date-options label {
      padding: 12px;
      border: 1px solid #d7e4f2;
      border-radius: 14px;
      background: #f8fbff;
    }

    .mechanic-maintenance-date-foot {
      display: grid;
      gap: 6px;
    }

    body.service-date-picker-open {
      overflow: hidden;
    }

    .mechanic-workflow-hybrid {
      display: none;
      min-width: 0;
    }

    .mechanic-workflow-launch-card {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 40px;
      gap: 11px;
      align-items: center;
      width: 100%;
      min-width: 0;
      min-height: 76px;
      padding: 12px;
      border: 1px solid #c9dbee;
      border-radius: 16px;
      background: linear-gradient(135deg, #f4f9ff, #fff);
      color: var(--ink);
      text-align: left;
      box-shadow: 0 9px 22px rgba(12, 77, 162, .08);
    }

    .mechanic-workflow-launch-card:not(:disabled):hover,
    .mechanic-workflow-launch-card:not(:disabled):focus-visible {
      border-color: var(--blue);
      box-shadow: 0 12px 26px rgba(12, 77, 162, .14);
    }

    .mechanic-workflow-launch-card:disabled {
      cursor: not-allowed;
      opacity: .7;
    }

    .mechanic-workflow-card-icon,
    .mechanic-workflow-card-arrow {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: #e4efff;
      color: var(--blue);
    }

    .mechanic-workflow-card-icon svg {
      width: 23px;
      height: 23px;
    }

    .mechanic-workflow-card-arrow {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      background: var(--blue);
      color: #fff;
    }

    .mechanic-workflow-card-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .mechanic-workflow-card-copy small {
      color: var(--blue);
      font-size: .68rem;
      font-weight: 950;
      letter-spacing: .055em;
      text-transform: uppercase;
    }

    .mechanic-workflow-card-copy strong {
      overflow: hidden;
      color: var(--ink);
      font-size: .98rem;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mechanic-workflow-card-copy span {
      overflow: hidden;
      color: var(--muted);
      font-size: .74rem;
      font-weight: 700;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .guided-vehicle-sheet.mechanic-workflow-picker-sheet {
      grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    }

    .mechanic-workflow-picker-copy {
      margin: 0;
      color: var(--muted);
      font-size: .78rem;
      font-weight: 700;
      line-height: 1.35;
    }

    .mechanic-workflow-picker-list .guided-vehicle-result {
      grid-template-columns: 46px minmax(0, 1fr) 24px;
      min-height: 68px;
      padding: 9px 6px;
    }

    .mechanic-workflow-choice-icon {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 13px;
      background: #eaf3ff;
      color: var(--blue);
    }

    .mechanic-workflow-choice-icon svg {
      width: 21px;
      height: 21px;
    }

    .mechanic-workflow-picker-list .guided-vehicle-result.selected {
      border-radius: 13px;
      background: #eaf3ff;
      box-shadow: inset 0 0 0 1px #a9caef;
    }

    .mechanic-workflow-duration-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      padding: 2px 0 12px;
    }

    .mechanic-workflow-duration-choice {
      display: grid;
      gap: 2px;
      min-width: 0;
      min-height: 58px;
      padding: 10px 12px;
      border: 1px solid #d7e4f2;
      border-radius: 13px;
      background: #fff;
      color: var(--ink);
      text-align: left;
    }

    .mechanic-workflow-duration-choice strong {
      font-size: .9rem;
    }

    .mechanic-workflow-duration-choice small {
      color: var(--muted);
      font-size: .68rem;
      font-weight: 700;
    }

    .mechanic-workflow-duration-choice.selected {
      border-color: var(--blue);
      background: #eaf3ff;
      color: var(--blue);
      box-shadow: inset 0 0 0 1px var(--blue);
    }

    .mechanic-workflow-promise-field {
      display: grid;
      gap: 6px;
      padding: 12px;
      border: 1px solid #d7e4f2;
      border-radius: 14px;
      background: #f8fbff;
    }

    .mechanic-workflow-promise-field span {
      color: var(--ink);
      font-size: .78rem;
      font-weight: 950;
    }

    .mechanic-workflow-promise-field input {
      width: 100%;
      min-width: 0;
      min-height: 46px;
      font: inherit;
      font-weight: 800;
    }

    .mechanic-workflow-confirm-card {
      display: grid;
      gap: 10px;
      margin-top: 4px;
      padding: 16px;
      border: 1px solid #cfe0dc;
      border-radius: 16px;
      background: linear-gradient(135deg, #f4fbf7, #fff);
    }

    .mechanic-workflow-confirm-row {
      display: grid;
      grid-template-columns: minmax(108px, .55fr) minmax(0, 1fr);
      gap: 8px;
      padding-bottom: 8px;
      border-bottom: 1px dashed #dbe7e3;
    }

    .mechanic-workflow-confirm-row:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .mechanic-workflow-confirm-row span {
      color: var(--muted);
      font-size: .72rem;
      font-weight: 900;
    }

    .mechanic-workflow-confirm-row strong {
      min-width: 0;
      overflow-wrap: anywhere;
      color: var(--ink);
      font-size: .8rem;
      text-align: right;
    }

    .mechanic-workflow-picker-foot {
      display: grid;
      gap: 6px;
    }

    .mechanic-workflow-picker-foot[hidden] {
      display: none !important;
    }

    body.workflow-picker-open {
      overflow: hidden;
    }

    @keyframes mechanic-workflow-drop-in {
      from {
        opacity: .96;
        transform: translateY(-18px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* top-down-workshop-workflow-20260808 */
    @media (max-width: 759px) {
      .guided-vehicle-modal.mechanic-workflow-picker-modal {
        box-sizing: border-box;
        align-items: start;
        padding-top: max(8px, env(safe-area-inset-top, 0px));
      }

      .guided-vehicle-sheet.mechanic-workflow-picker-sheet {
        width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0 auto;
        border-radius: 0 0 22px 22px;
        box-shadow: 0 22px 54px rgba(7, 35, 74, .24);
        animation: mechanic-workflow-drop-in .18s ease-out;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .guided-vehicle-sheet.mechanic-workflow-picker-sheet {
        animation: none;
      }
    }

    @media (max-width: 480px) {
      .mechanic-workflow-launch-card {
        grid-template-columns: 44px minmax(0, 1fr) 36px;
        gap: 9px;
        min-height: 70px;
        padding: 10px;
      }

      .mechanic-workflow-card-icon {
        width: 42px;
        height: 42px;
      }

      .mechanic-workflow-card-arrow {
        width: 34px;
        height: 34px;
      }

      .mechanic-workflow-picker-list .guided-vehicle-result {
        grid-template-columns: 42px minmax(0, 1fr) 22px;
      }

      .mechanic-workflow-duration-grid {
        gap: 7px;
      }

      .mechanic-workflow-duration-choice {
        min-height: 54px;
        padding: 9px 10px;
      }
    }

    @media (max-width: 480px) {
      .mechanic-service-launch-card {
        grid-template-columns: 46px minmax(0, 1fr) 38px;
        gap: 9px;
        padding: 10px;
      }

      .mechanic-service-selected-row {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 8px;
        padding: 9px;
      }

      .mechanic-service-picker-list .guided-vehicle-result {
        grid-template-columns: 40px minmax(0, 1fr) 22px;
      }
    }

    .mechanic-workflow-panel {
      border: 1px solid #cfe0dc;
      border-radius: 12px;
      background: #f8fbff;
      padding: 8px 10px;
      margin-bottom: 10px;
      box-shadow: none;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .mechanic-workflow-details {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(5, minmax(130px, 1fr));
      gap: 8px;
      padding-top: 8px;
      border-top: 1px dashed #cfe0dc;
    }

    .mechanic-workflow-details label {
      min-width: 0;
      display: grid;
      gap: 4px;
      color: #50647f;
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .035em;
      text-transform: uppercase;
    }

    .mechanic-workflow-details select,
    .mechanic-workflow-details input {
      width: 100%;
      min-width: 0;
      min-height: 34px;
      font: inherit;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: normal;
      text-transform: none;
    }

    .mechanic-workflow-panel[data-workflow-status="deposit_pending"] {
      border-color: #f0d28a;
      background: #fffaf0;
    }

    .mechanic-workflow-panel[data-workflow-status="awaiting_workshop"] {
      border-color: #b9d3f5;
      background: #f4f8ff;
    }

    .mechanic-workflow-panel h3 {
      margin: 0 0 1px;
      color: var(--ink);
      font-size: .82rem;
      line-height: 1.15;
    }

    .mechanic-workflow-panel p {
      margin: 0;
      color: var(--muted);
      font-size: .72rem;
      line-height: 1.25;
      max-width: 520px;
    }

    .mechanic-workflow-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .mechanic-status-btn {
      min-height: 34px;
      border-radius: 999px;
      padding: 0 10px;
      font-size: .78rem;
      font-weight: 900;
      white-space: nowrap;
      background: #f4f8ff;
      color: var(--ink);
      border-color: #cdddf4;
      box-shadow: none;
    }

    .mechanic-workflow-panel[data-workflow-ready="true"][data-workflow-status="in_workshop"] #serviceInWorkshopBtn.active,
    .mechanic-workflow-panel[data-workflow-ready="true"][data-workflow-status="ready_for_pickup"] #serviceDoneBtn.active {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue);
      box-shadow: 0 10px 20px rgba(11, 79, 169, .16);
    }

    .mechanic-workflow-panel[data-workflow-ready="true"][data-workflow-status="deposit_pending"] #serviceDepositPendingBtn.active {
      background: #a76400;
      color: #fff;
      border-color: #a76400;
      box-shadow: 0 10px 20px rgba(167, 100, 0, .16);
    }

    .mechanic-status-btn:not(.active),
    .mechanic-workflow-panel[data-workflow-ready="false"] .mechanic-status-btn,
    .mechanic-workflow-panel[data-workflow-status="pending"] .mechanic-status-btn {
      background: #f4f8ff !important;
      color: var(--ink) !important;
      border-color: #cdddf4 !important;
      box-shadow: none !important;
    }

    .mechanic-status-btn:disabled,
    .mechanic-status-btn:disabled.active,
    .mechanic-status-btn[aria-disabled="true"] {
      background: #f4f7fb !important;
      color: #6b788a !important;
      border-color: #dde7f3 !important;
      box-shadow: none !important;
      cursor: not-allowed;
      opacity: .78;
    }

    .service-workflow-status {
      justify-self: end;
      white-space: nowrap;
    }

    @media (max-width: 980px) {
      .mechanic-workflow-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 560px) {
      .mechanic-workflow-panel { grid-template-columns: 1fr; }
      .mechanic-workflow-actions { justify-content: flex-start; }
      .mechanic-workflow-details { grid-template-columns: 1fr; }
      .service-workflow-status { justify-self: start; }
    }

    .mechanic-workshop-float {
      position: fixed;
      top: calc(env(safe-area-inset-top, 0px) + 12px);
      left: 50%;
      z-index: 140;
      width: min(calc(100vw - 24px), 540px);
      transform: translateX(-50%);
      border: 1px solid #b9d3f5;
      border-radius: 12px;
      background: #063e80;
      color: #fff;
      box-shadow: 0 14px 30px rgba(6, 62, 128, .26);
    }

    .mechanic-workshop-float[hidden] {
      display: none !important;
    }

    .mechanic-workshop-float-main {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
    }

    .mechanic-workshop-float-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, .16);
    }

    .mechanic-workshop-float-icon i,
    .mechanic-workshop-float-icon svg {
      width: 18px;
      height: 18px;
    }

    .mechanic-workshop-float-copy {
      min-width: 0;
      display: grid;
      gap: 1px;
    }

    .mechanic-workshop-float-copy span,
    .mechanic-workshop-float-copy strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mechanic-workshop-float-copy span {
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
      opacity: .8;
    }

    .mechanic-workshop-float-copy strong {
      font-size: .9rem;
      line-height: 1.15;
    }

    .mechanic-workshop-float-ready {
      min-height: 36px;
      border: 1px solid #fff;
      border-radius: 8px;
      padding: 0 10px;
      background: #fff;
      color: #063e80;
      font: inherit;
      font-size: .78rem;
      font-weight: 950;
      white-space: nowrap;
      cursor: pointer;
    }

    .mechanic-workshop-float-ready:disabled {
      opacity: .65;
      cursor: not-allowed;
    }

    .customer-workshop-float {
      position: fixed;
      top: calc(env(safe-area-inset-top, 0px) + 12px);
      left: 50%;
      z-index: 140;
      width: min(calc(100vw - 24px), 620px);
      transform: translateX(-50%);
      border: 1px solid #b9d3f5;
      border-radius: 12px;
      background: #063e80;
      color: #fff;
      box-shadow: 0 14px 30px rgba(6, 62, 128, .26);
    }

    .customer-workshop-float[hidden] {
      display: none !important;
    }

    .customer-workshop-float-main {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 9px;
      padding: 9px 10px;
    }

    .customer-workshop-float-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, .16);
    }

    .customer-workshop-float-icon i,
    .customer-workshop-float-icon svg {
      width: 18px;
      height: 18px;
    }

    .customer-workshop-float-copy {
      min-width: 0;
      display: grid;
      gap: 1px;
    }

    .customer-workshop-float-copy span,
    .customer-workshop-float-copy strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .customer-workshop-float-copy span {
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
      opacity: .8;
    }

    .customer-workshop-float-copy strong {
      font-size: .9rem;
      line-height: 1.15;
    }

    .customer-workshop-float .btn {
      min-height: 36px;
      padding: 0 10px;
      border-color: rgba(255, 255, 255, .7);
      color: #fff;
      background: transparent;
      font-size: .78rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .customer-workshop-float .btn.primary {
      border-color: #fff;
      background: #fff;
      color: #063e80;
    }

    body.customer-app-mode[data-active-tab="customer-home"] .customer-workshop-float {
      display: none !important;
    }

    .customer-workshop-priority {
      display: block;
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--ink);
      box-shadow: none;
    }

    .customer-workshop-priority-launch {
      list-style: none;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 34px;
      gap: 11px;
      align-items: center;
      border: 1px solid #b9d3f5;
      border-radius: 16px;
      padding: 11px 12px;
      background: linear-gradient(135deg, #063e80, #0c5cb9);
      color: #fff;
      box-shadow: 0 10px 22px rgba(6, 62, 128, .16);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .customer-workshop-priority-launch::-webkit-details-marker {
      display: none;
    }

    .customer-workshop-priority.ready .customer-workshop-priority-launch {
      border-color: #86d5a1;
      background: linear-gradient(135deg, #087241, #12955c);
    }

    .customer-workshop-priority-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      background: rgba(255, 255, 255, .16);
    }

    .customer-workshop-priority-icon i,
    .customer-workshop-priority-icon svg {
      width: 25px;
      height: 25px;
    }

    .customer-workshop-priority-copy {
      min-width: 0;
    }

    .customer-workshop-priority-copy .eyebrow {
      display: block;
      margin-bottom: 2px;
      color: rgba(255, 255, 255, .8);
      font-size: .68rem;
      font-weight: 950;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .customer-workshop-priority-copy h2,
    .customer-workshop-priority-copy p {
      margin: 0;
    }

    .customer-workshop-priority-copy h2 {
      color: #fff;
      font-size: clamp(1rem, 2.5vw, 1.22rem);
      line-height: 1.15;
    }

    .customer-workshop-priority-copy p {
      margin-top: 3px;
      color: rgba(255, 255, 255, .88);
      font-size: .78rem;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .customer-workshop-priority-chevron {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(255, 255, 255, .13);
      transition: transform .18s ease;
    }

    .customer-workshop-priority[open] .customer-workshop-priority-chevron {
      transform: rotate(90deg);
    }

    .customer-workshop-priority-detail {
      display: grid;
      gap: 10px;
      margin-top: 8px;
      border: 1px solid #cfdef0;
      border-radius: 16px;
      padding: 12px;
      background: #f8fbff;
      color: var(--ink);
    }

    .customer-workshop-priority-detail p {
      margin: 0;
      color: var(--muted);
      font-size: .84rem;
      line-height: 1.4;
    }

    .customer-workshop-priority-time {
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 9px;
      border-radius: 8px;
      background: #e8f2ff;
      color: #064b9f;
      font-size: .88rem;
      font-weight: 900;
      width: fit-content;
    }

    .customer-workshop-priority-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .customer-workshop-priority-actions .btn {
      justify-content: center;
      min-height: 42px;
      border-color: #a9c5e8;
      color: #064b9f;
      background: #fff;
      font-weight: 900;
    }

    .customer-workshop-priority-actions .btn.primary {
      border-color: #0c57ad;
      background: #0c57ad;
      color: #fff;
    }

    .customer-workshop-priority-actions .sub {
      grid-column: 1 / -1;
      color: var(--muted);
      font-size: .73rem;
      line-height: 1.3;
      text-align: left;
    }

    .staff-operations-float {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 135;
      width: min(332px, calc(100vw - 36px));
      height: auto;
      min-height: 0;
      max-height: calc(100vh - 16px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 0;
      overflow: hidden;
      border: 1px solid #c8d9ec;
      border-radius: 14px;
      padding: 0;
      background: #fff;
      color: #162237;
      box-shadow: 0 16px 34px rgba(14, 44, 85, .22);
    }

    .staff-operations-float[hidden] {
      display: none !important;
    }

    .staff-operations-float-head {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 11px 12px 8px;
      background: linear-gradient(135deg, #063e80, #0c5cb9);
      color: #fff;
      cursor: grab;
      touch-action: none;
    }

    .staff-operations-float.is-moving .staff-operations-float-head,
    .staff-operations-float.is-resizing .staff-operations-float-head {
      cursor: grabbing;
      user-select: none;
    }

    .staff-operations-float-head > i,
    .staff-operations-float-head > svg {
      width: 19px;
      height: 19px;
      flex: 0 0 auto;
    }

    .staff-operations-float-title {
      min-width: 0;
      flex: 1;
      display: grid;
      gap: 1px;
    }

    .staff-operations-float-title strong {
      font-size: .9rem;
      line-height: 1.1;
    }

    .staff-operations-float-title span {
      overflow: hidden;
      color: rgba(255, 255, 255, .78);
      font-size: .7rem;
      font-weight: 750;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .staff-operations-float-head .icon-btn {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .38);
      border-radius: 8px;
      padding: 0;
      background: rgba(255, 255, 255, .08);
      color: #fff;
      cursor: pointer;
      touch-action: manipulation;
    }

    .staff-operations-float-head .icon-btn i,
    .staff-operations-float-head .icon-btn svg {
      width: 16px;
      height: 16px;
    }

    .staff-operations-float-body {
      min-height: 0;
      padding: 9px 10px 10px;
      overflow: auto;
      overscroll-behavior: contain;
    }

    .staff-operations-float-resize {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 2;
      width: 22px;
      height: 22px;
      cursor: nwse-resize;
      touch-action: none;
      background: linear-gradient(135deg, transparent 0 48%, #8ba7c6 49% 54%, transparent 55% 64%, #8ba7c6 65% 70%, transparent 71%);
    }

    .staff-operations-float-summary {
      min-height: 17px;
      margin: 0 1px 8px;
      color: #62738d;
      font-size: .72rem;
      line-height: 1.3;
    }

    .staff-operations-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .staff-operations-metric {
      min-height: 64px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-content: center;
      align-items: center;
      gap: 7px;
      border: 1px solid #dbe5f1;
      border-radius: 10px;
      padding: 8px;
      background: #f8fbff;
      color: #24415e;
      text-align: left;
      cursor: pointer;
    }

    .staff-operations-metric:hover {
      border-color: #a9c9eb;
      background: #eef6ff;
    }

    .staff-operations-metric i,
    .staff-operations-metric svg {
      width: 18px;
      height: 18px;
      color: #0c5cb9;
    }

    .staff-operations-metric span {
      display: block;
      color: #62738d;
      font-size: .66rem;
      font-weight: 850;
      line-height: 1.15;
      text-transform: uppercase;
    }

    .staff-operations-metric strong {
      display: block;
      margin-top: 2px;
      color: #162237;
      font-size: 1.12rem;
      line-height: 1;
    }

    .staff-operations-metric.live {
      grid-column: 1 / -1;
      min-height: 52px;
      border-color: #b8e1cb;
      background: #f0fff7;
    }

    .staff-operations-metric.live i,
    .staff-operations-metric.live svg {
      color: #087241;
    }

    .staff-operations-metric.attention {
      border-color: #f2c98b;
      background: #fff8eb;
    }

    .staff-operations-metric.attention i,
    .staff-operations-metric.attention svg {
      color: #b55b00;
    }

    /* staff-operations-compact-drilldown-20260813 */
    .staff-operations-overview[hidden],
    .staff-operations-detail[hidden] {
      display: none !important;
    }

    .staff-operations-float[data-operations-view="detail"]:not(.is-collapsed) .staff-operations-float-body {
      max-height: none;
    }

    .staff-operations-metric[aria-pressed="true"] {
      border-color: #0c5cb9;
      background: #eaf4ff;
      box-shadow: 0 0 0 1px rgba(12, 92, 185, .08);
    }

    .staff-operations-detail {
      display: grid;
      gap: 8px;
    }

    .staff-operations-detail-head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
    }

    .staff-operations-detail-back {
      width: 34px;
      height: 34px;
      display: inline-grid;
      place-items: center;
      border: 1px solid #cbd9e8;
      border-radius: 9px;
      background: #f4f8fc;
      color: #174a80;
      cursor: pointer;
    }

    .staff-operations-detail-back i,
    .staff-operations-detail-back svg {
      width: 17px;
      height: 17px;
    }

    .staff-operations-detail-title {
      min-width: 0;
    }

    .staff-operations-detail-title span {
      display: block;
      overflow: hidden;
      color: #162237;
      font-size: .82rem;
      font-weight: 850;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .staff-operations-detail-title small {
      display: block;
      margin-top: 2px;
      overflow: hidden;
      color: #62738d;
      font-size: .66rem;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .staff-operations-detail-count {
      min-width: 34px;
      padding: 6px 8px;
      border-radius: 9px;
      background: #eaf3ff;
      color: #0b57a5;
      font-size: 1rem;
      font-weight: 900;
      line-height: 1;
      text-align: center;
    }

    .staff-operations-detail-source {
      margin: 0;
      padding: 7px 8px;
      border: 1px dashed #c9d9ea;
      border-radius: 8px;
      background: #f8fbff;
      color: #62738d;
      font-size: .68rem;
      line-height: 1.3;
    }

    .staff-operations-detail-list {
      display: grid;
      gap: 6px;
    }

    .staff-operations-detail-row {
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      border: 1px solid #dbe5f1;
      border-radius: 9px;
      padding: 8px 9px;
      background: #fff;
      color: #162237;
      text-align: left;
    }

    button.staff-operations-detail-row {
      cursor: pointer;
    }

    button.staff-operations-detail-row:hover {
      border-color: #9fc2e8;
      background: #f7fbff;
    }

    .staff-operations-detail-row strong,
    .staff-operations-detail-row span,
    .staff-operations-detail-row small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .staff-operations-detail-row strong {
      font-size: .75rem;
      line-height: 1.2;
    }

    .staff-operations-detail-row span {
      margin-top: 2px;
      color: #536881;
      font-size: .66rem;
      line-height: 1.2;
    }

    .staff-operations-detail-row small {
      margin-top: 3px;
      color: #0b57a5;
      font-size: .64rem;
      font-weight: 750;
      line-height: 1.2;
    }

    .staff-operations-detail-row > i,
    .staff-operations-detail-row > svg {
      width: 16px;
      height: 16px;
      color: #0c5cb9;
    }

    .staff-operations-detail-empty {
      display: grid;
      place-items: center;
      min-height: 92px;
      border: 1px dashed #c9d9ea;
      border-radius: 9px;
      padding: 14px;
      background: #fbfdff;
      color: #62738d;
      font-size: .72rem;
      line-height: 1.35;
      text-align: center;
    }

    .staff-operations-detail-open {
      width: 100%;
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 0;
      border-radius: 9px;
      padding: 8px 10px;
      background: #0b57a5;
      color: #fff;
      font-size: .74rem;
      font-weight: 850;
      cursor: pointer;
    }

    .staff-operations-detail-open i,
    .staff-operations-detail-open svg {
      width: 16px;
      height: 16px;
    }

    /* compact-live-operations-icon-20260808 */
    .staff-operations-float.is-collapsed {
      display: block;
      left: auto;
      right: 12px;
      top: auto;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
      width: 58px !important;
      height: 58px !important;
      min-width: 58px;
      min-height: 58px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(135deg, #063e80, #0c5cb9);
      box-shadow: 0 12px 26px rgba(14, 60, 115, .3);
      overflow: visible;
    }

    .staff-operations-booking-shortcut {
      display: none;
    }

    .staff-operations-float.is-collapsed .staff-operations-booking-shortcut:not([hidden]) {
      position: absolute;
      top: -7px;
      right: -7px;
      z-index: 5;
      display: grid;
      place-items: center;
      min-width: 27px;
      height: 27px;
      padding: 0 6px;
      border: 2px solid #fff;
      border-radius: 999px;
      background: #c53645;
      color: #fff;
      box-shadow: 0 5px 12px rgba(112, 20, 34, .3);
      font-size: .69rem;
      font-weight: 950;
      line-height: 1;
      cursor: pointer;
      touch-action: manipulation;
    }

    .staff-operations-float.is-collapsed .staff-operations-float-head {
      width: 100%;
      height: 100%;
      justify-content: center;
      padding: 0;
      border-radius: inherit;
      cursor: grab;
      touch-action: none;
    }

    .staff-operations-float.is-collapsed.is-moving .staff-operations-float-head {
      cursor: grabbing;
    }

    .staff-operations-float.is-collapsed .staff-operations-float-head > i,
    .staff-operations-float.is-collapsed .staff-operations-float-head > svg,
    .staff-operations-float.is-collapsed .staff-operations-float-title,
    .staff-operations-float.is-collapsed [data-staff-operations-action="refresh"] {
      display: none !important;
    }

    .staff-operations-float.is-collapsed [data-staff-operations-action="toggle"] {
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      border: 0;
      border-radius: inherit;
      background: transparent;
      cursor: grab;
      touch-action: none;
    }

    .staff-operations-float.is-collapsed.is-moving [data-staff-operations-action="toggle"] {
      cursor: grabbing;
    }

    .staff-operations-float.is-collapsed [data-staff-operations-action="toggle"] i,
    .staff-operations-float.is-collapsed [data-staff-operations-action="toggle"] svg {
      width: 28px;
      height: 28px;
    }

    .staff-operations-float.is-collapsed .staff-operations-float-body {
      display: none;
    }

    .staff-operations-float.is-collapsed .staff-operations-float-resize {
      display: none;
    }

    /* balanced-live-operations-desktop-20260813
       Keep the movable desktop control optically centred without changing mobile placement. */
    @media (min-width: 701px) {
      .staff-operations-float.is-collapsed {
        right: 18px;
        bottom: 18px;
        width: 56px !important;
        height: 56px !important;
        min-width: 56px;
        min-height: 56px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .72);
        background: linear-gradient(145deg, #074485 0%, #0b5eb8 100%);
        box-shadow: 0 9px 22px rgba(14, 60, 115, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
      }

      .staff-operations-float.is-collapsed [data-staff-operations-action="toggle"] {
        position: relative;
        display: grid;
        place-items: center;
        padding: 0 !important;
        line-height: 0;
      }

      .staff-operations-float.is-collapsed [data-staff-operations-action="toggle"] i,
      .staff-operations-float.is-collapsed [data-staff-operations-action="toggle"] svg {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 25px;
        height: 25px;
        margin: 0;
        transform: translate(-50%, -50%) translate(-3px, -2px);
        stroke-width: 2.15;
      }

      .staff-operations-float.is-collapsed [data-staff-operations-action="toggle"]:focus-visible {
        outline: 3px solid rgba(12, 77, 162, .24);
        outline-offset: 4px;
      }
    }

    @media (max-width: 480px) {
      .mechanic-workshop-float {
        top: calc(env(safe-area-inset-top, 0px) + 8px);
        width: calc(100vw - 16px);
      }

      .mechanic-workshop-float-main {
        gap: 8px;
        padding: 8px;
      }

      .mechanic-workshop-float-copy strong {
        font-size: .82rem;
      }

      .mechanic-workshop-float-ready {
        min-height: 34px;
        padding: 0 8px;
        font-size: .72rem;
      }

      .customer-workshop-float {
        top: calc(env(safe-area-inset-top, 0px) + 8px);
        width: calc(100vw - 16px);
      }

      .customer-workshop-float-main {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
        padding: 8px;
      }

      .customer-workshop-float-copy strong {
        font-size: .82rem;
      }

      .customer-workshop-float #customerWorkshopFloatCctvBtn {
        grid-column: 2 / -1;
      }

      .customer-workshop-priority-launch {
        grid-template-columns: 42px minmax(0, 1fr) 32px;
        gap: 9px;
        padding: 10px;
      }

      .customer-workshop-priority-actions {
        grid-template-columns: 1fr;
      }

      .staff-operations-float {
        right: 8px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
        width: min(340px, calc(100vw - 16px));
      }

      .staff-operations-float.is-collapsed {
        right: 10px;
      }
    }

    .role-mechanic #add-record .import-panel {
      display: none !important;
    }

    #add-record.known-vehicle #vehicleSelector {
      display: none !important;
    }

    /* Customer, marketing, payment and historical details stay in the customer/profile workflows.
       Keep their inputs in the DOM so existing records and automated updates remain intact. */
    #add-record .service-record-profile-only,
    #add-record .service-record-profile-row {
      display: none !important;
    }

    .role-mechanic #add-record .advisor-owned-field,
    .role-mechanic #add-record .payment-owned-field,
    .role-mechanic #add-record .product-master-owned-field,
    .role-mechanic #add-record .mechanic-redundant-field,
    .role-mechanic #add-record .record-lookup-helper,
    .role-mechanic #add-record .legacy-oil-field,
    .role-mechanic #add-record .legacy-oil-helper {
      display: none !important;
    }

    /* compact-mechanic-card-spacing-20260808
       Remove empty profile-row grid slots from the mechanic workflow so the
       Vehicle and workshop card flows directly into Service items. */
    .role-mechanic #add-record .mechanic-profile-only-row {
      display: none !important;
    }

    .role-mechanic #add-record .service-item-panel {
      margin-top: 0;
    }

    body.role-mechanic[data-active-tab="service-record"] .page-tools {
      display: none !important;
    }

    body:not(.role-admin) #add-record .admin-owned-field {
      display: none !important;
    }

    .role-mechanic #add-record .mechanic-workflow-panel {
      margin-top: 10px;
    }

    .role-mechanic #add-record {
      position: relative;
    }

    .role-mechanic #add-record #newBtn {
      display: none !important;
    }

    .mechanic-editor-back {
      display: none;
    }

    .role-mechanic #add-record.mechanic-record-active > .panel-head {
      justify-content: flex-start;
    }

    .role-mechanic #add-record.mechanic-record-active .mechanic-editor-back {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }

    @media (max-width: 600px) {
      .role-mechanic #add-record.mechanic-record-active .mechanic-editor-back {
        width: 100%;
        justify-content: flex-start;
      }
    }

    .mechanic-plate-gate-status {
      padding: 10px 12px;
      border: 1px dashed #c8d8eb;
      border-radius: 12px;
      color: var(--muted);
      background: #f8fbff;
      font-size: .88rem;
      font-weight: 800;
    }

    .mechanic-plate-gate-status[hidden] {
      display: none !important;
    }

    .mechanic-plate-gate-status[data-tone="ok"] {
      border-color: #b9dfca;
      color: #0f7a3d;
      background: #f3fbf6;
    }

    .mechanic-plate-gate-status[data-tone="warn"] {
      border-color: #f2d6a0;
      color: #9a6200;
      background: #fff8e8;
    }

    .role-mechanic #add-record:not(.mechanic-record-active) #vehicleForm,
    .role-mechanic #add-record:not(.mechanic-record-active) .import-panel,
    .role-mechanic #add-record.mechanic-plate-first #vehicleForm,
    .role-mechanic #add-record.mechanic-plate-first .import-panel {
      display: none !important;
    }

    .role-mechanic #add-record.mechanic-plate-first > .panel-head {
      display: none !important;
    }

    .mechanic-mobile-snap {
      display: none;
    }

    .mechanic-start-selector {
      display: none;
    }

    .role-mechanic #add-record.mechanic-plate-first .mechanic-start-selector {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      margin: 0 0 10px;
      padding: 6px;
      border: 1px solid #d5e2f1;
      border-radius: 16px;
      background: #f4f8fd;
      box-shadow: 0 8px 22px rgba(12, 77, 162, .05);
    }

    .mechanic-start-selector button {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 6px;
      align-items: center;
      min-width: 0;
      min-height: 46px;
      padding: 8px 9px;
      border: 1px solid transparent;
      border-radius: 12px;
      color: #53657b;
      background: transparent;
      font: inherit;
      font-size: .78rem;
      font-weight: 900;
      line-height: 1.1;
      text-align: left;
      cursor: pointer;
    }

    .mechanic-start-selector button[aria-selected="true"] {
      border-color: #a9c6e7;
      color: #0c4da2;
      background: #fff;
      box-shadow: 0 4px 12px rgba(12, 77, 162, .1);
    }

    .mechanic-start-selector button i,
    .mechanic-start-selector button svg {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
    }

    .mechanic-start-selector-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mechanic-start-selector-count {
      min-width: 22px;
      padding: 3px 6px;
      border-radius: 999px;
      color: #0c4da2;
      background: #e7f0fb;
      font-size: .72rem;
      line-height: 1;
      text-align: center;
    }

    .mechanic-mobile-card {
      min-width: 0;
    }

    .mechanic-lookup-title {
      display: none;
    }

    .role-mechanic #add-record.mechanic-plate-first .mechanic-mobile-snap {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      overflow-x: auto;
      scrollbar-width: none;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding: 2px 0 12px;
      margin-top: 0;
    }

    .role-mechanic #add-record.mechanic-plate-first .mechanic-mobile-snap::-webkit-scrollbar {
      display: none;
    }

    .role-mechanic #add-record.mechanic-plate-first .mechanic-mobile-card {
      flex: 0 0 min(100%, 560px);
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .role-mechanic #add-record.mechanic-record-active .mechanic-mobile-snap {
      display: none !important;
    }

    .role-mechanic #add-record.mechanic-record-active .mechanic-start-selector {
      display: none !important;
    }

    .role-mechanic #add-record.mechanic-plate-first .mechanic-lookup-card {
      border: 1px solid #d7e4f2;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(12, 77, 162, .08);
      overflow: hidden;
    }

    .role-mechanic #add-record.mechanic-plate-first .mechanic-lookup-title {
      display: grid;
      gap: 3px;
      padding: 15px 16px 11px;
      border-bottom: 1px solid #e3ebf5;
      color: var(--ink);
    }

    .role-mechanic #add-record.mechanic-plate-first .mechanic-lookup-title strong {
      font-size: 1.08rem;
      font-weight: 950;
    }

    .role-mechanic #add-record.mechanic-plate-first .mechanic-lookup-title span {
      color: var(--muted);
      font-size: .82rem;
      font-weight: 650;
      line-height: 1.3;
    }

    .role-mechanic #add-record.mechanic-plate-first .mechanic-lookup-card .toolbar {
      display: grid;
      gap: 10px;
      padding: 14px;
      margin: 0;
      border: 0;
      background: transparent;
    }

    .role-mechanic #add-record.mechanic-plate-first .mechanic-lookup-card .toolbar .btn,
    .role-mechanic #add-record.mechanic-plate-first .mechanic-lookup-card .toolbar .search {
      width: 100%;
    }

    .role-mechanic #add-record.mechanic-plate-first .mechanic-plate-search {
      min-height: 54px;
      gap: 10px;
      padding: 0 7px 0 13px;
      border-color: #b9cadc;
      border-radius: 14px;
    }

    .role-mechanic #add-record.mechanic-plate-first .mechanic-plate-search input {
      min-width: 0;
      font-size: 16px;
      font-weight: 850;
      text-transform: uppercase;
    }

    .mechanic-inline-scan {
      display: inline-flex;
      gap: 5px;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      min-height: 40px;
      padding: 0 10px;
      border: 1px solid #c8daed;
      border-radius: 10px;
      color: #0c4da2;
      background: #eef5fd;
      font: inherit;
      font-size: .78rem;
      font-weight: 900;
      cursor: pointer;
    }

    .mechanic-inline-scan i,
    .mechanic-inline-scan svg {
      width: 17px;
      height: 17px;
    }

    .role-mechanic #add-record.mechanic-plate-first #mechanicConfirmPlateBtn {
      min-height: 50px;
      border-radius: 13px;
    }

    .role-mechanic #add-record.mechanic-plate-first #workshopQueuePanel {
      display: block;
      max-height: min(620px, calc(100svh - 220px));
      overflow-y: auto;
      border-radius: 18px;
      box-shadow: 0 12px 28px rgba(12, 77, 162, .08);
      margin: 0;
    }

    .role-mechanic #add-record.mechanic-plate-first #workshopQueuePanel[hidden] {
      display: none !important;
    }

    .mechanic-complete-strip {
      display: none;
    }

    .role-mechanic #add-record .mechanic-complete-strip {
      display: grid;
      gap: 8px;
      margin: 12px 0;
      padding: 12px;
      border: 1px solid #cfe0dc;
      border-radius: 14px;
      background: #f8fbff;
    }

    .role-mechanic #add-record .mechanic-complete-strip h3 {
      margin: 0;
      color: var(--text);
      font-size: 1rem;
      font-weight: 950;
    }

    .role-mechanic #add-record .mechanic-complete-strip p {
      margin: 0;
      color: var(--muted);
      font-size: .8rem;
      line-height: 1.35;
    }

    .mechanic-completion-swipe {
      position: relative;
      width: 100%;
      min-width: 0;
      height: 62px;
      overflow: hidden;
      border: 1px solid #b7c9dc;
      border-radius: 999px;
      background: #edf2f7;
      box-shadow: inset 0 1px 2px rgba(15, 45, 75, .08), 0 4px 12px rgba(15, 67, 124, .08);
      transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
    }

    .mechanic-completion-swipe input[type="range"] {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 62px;
      margin: 0;
      padding: 0 6px;
      appearance: none;
      -webkit-appearance: none;
      background: linear-gradient(90deg, #2476ce 0 var(--swipe-progress, 0%), transparent var(--swipe-progress, 0%) 100%);
      cursor: grab;
      touch-action: pan-y;
      outline: 0;
    }

    .mechanic-completion-swipe input[type="range"]:disabled {
      cursor: not-allowed;
      opacity: .62;
    }

    .mechanic-completion-swipe input[type="range"]::-webkit-slider-runnable-track {
      height: 62px;
      background: transparent;
    }

    .mechanic-completion-swipe input[type="range"]::-webkit-slider-thumb {
      width: 50px;
      height: 50px;
      margin-top: 6px;
      border: 1px solid rgba(12, 77, 162, .18);
      border-radius: 50%;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c4da2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 25px;
      box-shadow: 0 3px 12px rgba(12, 77, 162, .28);
      appearance: none;
      -webkit-appearance: none;
    }

    .mechanic-completion-swipe input[type="range"]::-moz-range-track {
      height: 62px;
      background: transparent;
    }

    .mechanic-completion-swipe input[type="range"]::-moz-range-thumb {
      width: 50px;
      height: 50px;
      border: 1px solid rgba(12, 77, 162, .18);
      border-radius: 50%;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c4da2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 25px;
      box-shadow: 0 3px 12px rgba(12, 77, 162, .28);
    }

    .mechanic-completion-swipe span {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: grid;
      place-items: center;
      padding: 0 64px;
      color: #0b3d74;
      font-size: .84rem;
      font-weight: 900;
      line-height: 1.2;
      text-align: center;
      pointer-events: none;
    }

    .mechanic-completion-swipe.is-ready {
      border-color: #2476ce;
      box-shadow: inset 0 1px 2px rgba(15, 45, 75, .08), 0 5px 16px rgba(36, 118, 206, .16);
    }

    .mechanic-completion-swipe.is-ready span {
      color: #073c78;
    }

    .mechanic-completion-swipe.is-submitting {
      border-color: #0c4da2;
      background: #dfeeff;
    }

    .mechanic-completion-swipe.is-submitting input[type="range"] {
      background: #0c4da2;
      opacity: 1;
    }

    .mechanic-completion-swipe.is-complete {
      border-color: #17814b;
      background: #e5f7ed;
    }

    .mechanic-completion-swipe.is-complete input[type="range"] {
      background: #17814b;
      opacity: 1;
    }

    .mechanic-completion-swipe.is-submitting span,
    .mechanic-completion-swipe.is-complete span {
      color: #fff;
      padding: 0 12px;
    }

    .mechanic-completion-swipe.is-resetting input[type="range"] {
      transition: background .2s ease;
    }

    /* single-mechanic-workflow-card-20260808
       The hybrid launch card is the only visible card; this outer section is
       retained as a layout and state container without a second card shell. */
    .role-mechanic #add-record .mechanic-workflow-panel {
      position: relative;
      z-index: 8;
      display: block;
      padding: 0;
      margin: 8px 0 10px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .role-mechanic #add-record .mechanic-workflow-intro,
    .role-mechanic #add-record .mechanic-workflow-actions,
    .role-mechanic #add-record .mechanic-workflow-details {
      display: none !important;
    }

    .role-mechanic #add-record .mechanic-workflow-hybrid {
      display: block;
    }

    .role-mechanic #add-record .mechanic-workflow-actions {
      display: grid;
      grid-template-columns: minmax(122px, 1fr) minmax(136px, 160px);
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
    }

    .role-mechanic #add-record #serviceDoneBtn {
      display: none !important;
    }

    .role-mechanic #add-record .service-workflow-status {
      display: none;
    }

    .role-mechanic #add-record .mechanic-status-btn {
      flex: 0 0 auto;
      min-height: 44px;
      padding: 0 12px;
      border-radius: 999px;
      font-size: .95rem;
      line-height: 1;
      box-shadow: none;
    }

    .mechanic-estimate-control {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .mechanic-estimate-control span {
      color: var(--muted);
      font-size: .68rem;
      font-weight: 900;
      line-height: 1;
      text-transform: uppercase;
    }

    .mechanic-estimate-control select {
      width: 100%;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      font-size: .86rem;
      font-weight: 900;
      padding: 0 28px 0 12px;
    }

    .role-mechanic #add-record .mechanic-status-btn i,
    .role-mechanic #add-record .mechanic-status-btn svg {
      width: 18px;
      height: 18px;
    }

    @media (max-width: 720px) {
      .role-mechanic #add-record .mechanic-workflow-panel {
        padding: 0;
      }

      .role-mechanic #add-record .mechanic-workflow-actions {
        grid-template-columns: 1fr;
      }

      .role-mechanic #add-record .mechanic-estimate-control {
        grid-column: auto;
      }

      .role-mechanic #add-record .mechanic-status-btn {
        min-height: 42px;
        padding: 0 10px;
        font-size: .88rem;
      }

      .role-mechanic #add-record .mechanic-status-btn i,
      .role-mechanic #add-record .mechanic-status-btn svg {
        width: 17px;
        height: 17px;
      }

      .mechanic-start-selector button {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 8px 7px;
        font-size: .72rem;
      }

      .mechanic-start-selector-count {
        grid-column: 2;
        justify-self: start;
        margin-top: -2px;
      }
    }

    @media (max-width: 380px) {
      .role-mechanic #add-record .mechanic-status-btn i,
      .role-mechanic #add-record .mechanic-status-btn svg {
        display: none;
      }
    }

    .role-mechanic #add-record .mechanic-workflow-panel[data-workflow-ready="false"] .mechanic-status-btn,
    .role-mechanic #add-record .mechanic-workflow-panel[data-workflow-ready="false"] .mechanic-status-btn.active {
      background: #f4f7fb !important;
      color: #6b788a !important;
      border-color: #dde7f3 !important;
      box-shadow: none !important;
      cursor: not-allowed;
      opacity: .78;
    }

    .role-mechanic #mechanicComments {
      min-height: 120px;
    }

    .mechanic-evidence-hybrid {
      display: none;
    }

    .role-mechanic #add-record .mechanic-evidence-native {
      display: none !important;
    }

    .role-mechanic #add-record .mechanic-evidence-hybrid {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid #cfe0dc;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 8px 22px rgba(17, 71, 132, .06);
    }

    .mechanic-evidence-panel-head {
      display: flex;
      gap: 12px;
      align-items: start;
      justify-content: space-between;
    }

    .mechanic-evidence-panel-head h3,
    .mechanic-evidence-panel-head p {
      margin: 0;
    }

    .mechanic-evidence-panel-head h3 {
      color: var(--ink);
      font-size: 1rem;
      font-weight: 950;
    }

    .mechanic-evidence-panel-head p {
      margin-top: 3px;
      color: var(--muted);
      font-size: .76rem;
      font-weight: 700;
      line-height: 1.35;
    }

    .guided-vehicle-card.mechanic-evidence-launch-card {
      display: grid;
      min-height: 76px;
    }

    .guided-vehicle-sheet.mechanic-evidence-sheet {
      grid-template-rows: auto auto minmax(0, 1fr) auto;
    }

    .mechanic-evidence-scroll {
      min-width: 0;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 0 16px 14px;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .mechanic-evidence-step-panel[hidden] {
      display: none !important;
    }

    .mechanic-evidence-step-panel .guided-vehicle-prompt {
      padding-right: 0;
      padding-left: 0;
    }

    .mechanic-evidence-step-panel .guided-vehicle-prompt p {
      margin: 0;
      color: var(--muted);
      font-size: .8rem;
      font-weight: 700;
      line-height: 1.4;
    }

    .mechanic-evidence-choice-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .mechanic-evidence-choice-grid > button {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      min-width: 0;
      min-height: 72px;
      padding: 10px;
      border: 1px solid #d7e4f2;
      border-radius: 14px;
      background: #fff;
      color: var(--ink);
      text-align: left;
    }

    .mechanic-evidence-choice-grid > button > svg {
      width: 22px;
      height: 22px;
      padding: 9px;
      border-radius: 12px;
      box-sizing: content-box;
      background: #eaf3ff;
      color: var(--blue);
    }

    .mechanic-evidence-choice-grid > button > span {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .mechanic-evidence-choice-grid strong {
      font-size: .86rem;
      line-height: 1.15;
    }

    .mechanic-evidence-choice-grid small {
      color: var(--muted);
      font-size: .68rem;
      font-weight: 700;
      line-height: 1.25;
    }

    .mechanic-evidence-choice-grid > button.selected {
      border-color: var(--blue);
      background: #eaf3ff;
      box-shadow: inset 0 0 0 1px var(--blue);
    }

    .mechanic-evidence-photo-button {
      width: 100%;
      min-height: 48px;
    }

    .mechanic-evidence-photo-save {
      width: 100%;
      min-height: 50px;
      margin-top: 10px;
    }

    .mechanic-evidence-photo-status {
      margin-top: 10px;
      padding: 10px 12px;
      border: 1px dashed #c8d8e8;
      border-radius: 12px;
      background: #f8fbff;
      color: var(--muted);
      font-size: .76rem;
      font-weight: 800;
    }

    .mechanic-evidence-preview {
      margin-top: 10px;
    }

    .mechanic-evidence-quick-notes {
      display: flex;
      gap: 7px;
      margin-bottom: 12px;
      overflow-x: auto;
      padding-bottom: 2px;
    }

    .mechanic-evidence-quick-notes button {
      flex: 0 0 auto;
      min-height: 36px;
      padding: 0 11px;
      border: 1px solid #cfe0f2;
      border-radius: 999px;
      background: #f7faff;
      color: var(--blue);
      font-size: .72rem;
      font-weight: 900;
    }

    .mechanic-evidence-note-field textarea {
      width: 100%;
      min-height: 140px;
      resize: vertical;
    }

    .mechanic-evidence-lock-note {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 9px;
      align-items: start;
      margin-top: 12px;
      padding: 12px;
      border-radius: 13px;
      background: #f2f7fd;
      color: #52647a;
      font-size: .74rem;
      font-weight: 750;
      line-height: 1.4;
    }

    .mechanic-evidence-lock-note svg {
      width: 20px;
      height: 20px;
      color: var(--blue);
    }

    .mechanic-evidence-foot {
      display: grid;
      gap: 6px;
    }

    .mechanic-evidence-foot .btn {
      width: 100%;
      min-height: 46px;
    }

    @media (max-width: 480px) {
      .role-mechanic #add-record .mechanic-evidence-hybrid {
        padding: 12px;
      }

      .mechanic-evidence-panel-head .badge {
        display: none;
      }

      .mechanic-evidence-choice-grid {
        grid-template-columns: 1fr;
      }

      .mechanic-evidence-choice-grid > button {
        min-height: 64px;
      }
    }

    .service-item-helper strong {
      color: var(--mobil-blue-dark);
    }

    label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: .84rem;
      font-weight: 650;
    }

    input, select, textarea {
      border: 1px solid #c9d5d1;
      border-radius: 8px;
      padding: 10px 11px;
      color: var(--ink);
      background: #fff;
      min-width: 0;
      outline: none;
      min-height: 42px;
    }

    .system-code-input {
      background: #eef4fb;
      border-color: #b9c8da;
      color: var(--mobil-blue-dark);
      font-weight: 850;
      cursor: default;
      box-shadow: inset 3px 0 0 var(--mobil-blue);
    }

    .system-code-input:disabled {
      opacity: 1;
      color: var(--mobil-blue-dark);
      -webkit-text-fill-color: var(--mobil-blue-dark);
      background: #eef4fb;
      cursor: default;
    }

    .system-code-input:focus {
      border-color: #b9c8da;
      box-shadow: inset 3px 0 0 var(--mobil-blue);
    }

    .system-code-helper {
      color: var(--mobil-blue-dark);
      font-weight: 750;
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(8, 117, 104, .13);
    }

    .vehicle-selector {
      border: 1px solid #dce7e3;
      border-radius: 8px;
      background: #f7faf8;
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .vehicle-selector-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .vehicle-selector-head h3 {
      margin: 0;
      font-size: 1rem;
    }

    .vehicle-selector-head .sub {
      margin-top: 2px;
    }

    /* mechanic-guided-vehicle-selector-20260808 */
    .mechanic-vehicle-card-slot {
      display: none;
      margin-bottom: 12px;
    }

    .role-mechanic #add-record .mechanic-vehicle-card-slot {
      display: block;
    }

    .guided-vehicle-card {
      display: none;
      width: 100%;
      grid-template-columns: 52px minmax(0, 1fr) 42px;
      gap: 12px;
      align-items: center;
      min-width: 0;
      min-height: 88px;
      padding: 14px;
      border: 1px solid #cbdced;
      border-radius: 16px;
      background: linear-gradient(180deg, #ffffff, #f4f8fd);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(12, 77, 162, .07);
    }

    .role-mechanic #add-record:not(.known-vehicle) .guided-vehicle-card-new,
    .role-mechanic #add-record.known-vehicle .guided-vehicle-card-edit {
      display: grid;
    }

    .role-mechanic #add-record #vehicleSelector,
    .role-mechanic #add-record .legacy-vehicle-selector,
    .role-mechanic #add-record .mechanic-native-vehicle-field {
      display: none !important;
    }

    .guided-vehicle-card:hover,
    .guided-vehicle-card:focus-visible {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(19, 87, 175, .12), 0 10px 24px rgba(12, 77, 162, .09);
    }

    .guided-vehicle-card-icon,
    .guided-vehicle-card-arrow {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 14px;
    }

    .guided-vehicle-card-icon {
      background: #e8f1ff;
      color: var(--blue);
    }

    .guided-vehicle-card-arrow {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      background: var(--blue);
      color: #fff;
    }

    .guided-vehicle-card-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .guided-vehicle-card-copy small {
      color: var(--blue);
      font-size: .68rem;
      font-weight: 950;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .guided-vehicle-card-copy strong {
      overflow: hidden;
      color: var(--ink);
      font-size: 1rem;
      font-weight: 950;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .guided-vehicle-card-copy span {
      overflow: hidden;
      color: var(--muted);
      font-size: .78rem;
      font-weight: 700;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .guided-vehicle-modal[hidden] {
      display: none !important;
    }

    .guided-vehicle-modal {
      position: fixed;
      inset: 0;
      z-index: 2200;
      display: grid;
      align-items: end;
      min-width: 0;
    }

    .guided-vehicle-backdrop {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(7, 24, 46, .56);
      cursor: default;
    }

    .guided-vehicle-sheet {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
      width: min(680px, 100%);
      max-width: 100%;
      max-height: min(92svh, 860px);
      min-width: 0;
      margin: 0 auto;
      overflow: hidden;
      border: 1px solid #d7e4f2;
      border-radius: 22px 22px 0 0;
      background: #fff;
      box-shadow: 0 -22px 54px rgba(7, 35, 74, .24);
    }

    @keyframes customer-vehicle-picker-drop-in {
      from {
        opacity: .96;
        transform: translateY(-18px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* customer-top-down-vehicle-picker-20260811 */
    @media (max-width: 759px) {
      #mechanicVehiclePickerModal[data-picker-context="customer"] {
        box-sizing: border-box;
        align-items: start;
        padding-top: max(8px, env(safe-area-inset-top, 0px));
      }

      #mechanicVehiclePickerModal[data-picker-context="customer"] > .guided-vehicle-sheet {
        width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0 auto;
        border-radius: 0 0 22px 22px;
        box-shadow: 0 22px 54px rgba(7, 35, 74, .24);
        animation: customer-vehicle-picker-drop-in .18s ease-out;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #mechanicVehiclePickerModal[data-picker-context="customer"] > .guided-vehicle-sheet {
        animation: none;
      }
    }

    .guided-vehicle-sheet-head {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 44px;
      gap: 8px;
      align-items: center;
      padding: 14px 16px 10px;
      border-bottom: 1px solid #e1eaf4;
    }

    .guided-vehicle-sheet-head h3 {
      margin: 0;
      color: var(--ink);
      font-size: 1.05rem;
      font-weight: 950;
      text-align: center;
    }

    .guided-vehicle-icon-button {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      padding: 0;
      border: 1px solid #d7e4f2;
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      cursor: pointer;
    }

    .guided-vehicle-steps {
      display: flex;
      gap: 7px;
      max-width: 100%;
      padding: 12px 16px 8px;
      overflow-x: auto;
    }

    .guided-vehicle-step {
      flex: 0 0 auto;
      min-height: 34px;
      padding: 0 12px;
      border: 0;
      border-radius: 999px;
      background: #f0f3f6;
      color: #536174;
      font-size: .76rem;
      font-weight: 900;
    }

    .guided-vehicle-step.active {
      background: #e4efff;
      color: var(--blue);
    }

    .guided-vehicle-step.complete {
      background: #e7f6ed;
      color: #08763b;
    }

    .guided-vehicle-step:disabled {
      opacity: .46;
      cursor: not-allowed;
    }

    .guided-vehicle-prompt {
      display: grid;
      gap: 10px;
      padding: 8px 16px 10px;
    }

    .guided-vehicle-prompt h4 {
      margin: 0;
      color: var(--ink);
      font-size: 1.35rem;
      line-height: 1.15;
    }

    .guided-vehicle-search-wrap {
      position: relative;
      min-width: 0;
    }

    .guided-vehicle-search-wrap > svg {
      position: absolute;
      top: 50%;
      left: 13px;
      width: 20px;
      height: 20px;
      color: #607089;
      pointer-events: none;
      transform: translateY(-50%);
    }

    .guided-vehicle-search-wrap input {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding-left: 42px;
      border-radius: 12px;
      background: #f5f7f9;
      font-size: 1rem;
    }

    .guided-vehicle-popular {
      display: flex;
      gap: 8px;
      padding: 0 16px 10px;
      overflow-x: auto;
    }

    .guided-vehicle-popular[hidden] {
      display: none !important;
    }

    .guided-vehicle-popular button {
      flex: 0 0 auto;
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid #cfe0f2;
      border-radius: 999px;
      background: #fff;
      color: var(--blue);
      font-size: .78rem;
      font-weight: 900;
    }

    .guided-vehicle-list {
      min-width: 0;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 0 16px 12px;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .guided-vehicle-list-label {
      margin: 8px 0 6px;
      color: var(--muted);
      font-size: .72rem;
      font-weight: 950;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .guided-vehicle-result {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 26px;
      gap: 10px;
      align-items: center;
      width: 100%;
      min-width: 0;
      min-height: 54px;
      padding: 10px 8px;
      border: 0;
      border-bottom: 1px solid #e6edf5;
      background: #fff;
      color: var(--ink);
      text-align: left;
    }

    .guided-vehicle-result:hover,
    .guided-vehicle-result:focus-visible {
      background: #f3f8ff;
    }

    .guided-vehicle-result-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .guided-vehicle-result-copy strong {
      overflow-wrap: anywhere;
      font-size: .94rem;
      line-height: 1.2;
    }

    .guided-vehicle-result-copy small {
      color: var(--muted);
      font-size: .72rem;
      font-weight: 700;
    }

    .guided-vehicle-manual {
      display: grid;
      gap: 10px;
      margin: 4px 0 10px;
      padding: 12px;
      border: 1px solid #d7e4f2;
      border-radius: 14px;
      background: #f8fbff;
    }

    .guided-vehicle-manual[hidden] {
      display: none !important;
    }

    .guided-vehicle-sheet-foot {
      padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid #e1eaf4;
      background: #fff;
      color: var(--muted);
      font-size: .74rem;
      font-weight: 700;
      line-height: 1.35;
    }

    body.vehicle-picker-open {
      overflow: hidden;
    }

    @media (min-width: 760px) {
      .guided-vehicle-modal {
        align-items: center;
        padding: 24px;
      }

      .guided-vehicle-sheet {
        border-radius: 22px;
      }
    }

    @media (max-width: 480px) {
      .guided-vehicle-sheet {
        width: 100%;
        max-height: calc(100svh - max(8px, env(safe-area-inset-top, 0px)));
      }

      .guided-vehicle-card {
        grid-template-columns: 44px minmax(0, 1fr) 36px;
        gap: 9px;
        min-height: 80px;
        padding: 11px;
      }

      .guided-vehicle-card-icon {
        width: 42px;
        height: 42px;
      }

      .guided-vehicle-card-copy strong {
        font-size: .92rem;
      }
    }

    /* customer-vehicle-hybrid-selector-20260811 */
    .customer-vehicle-selector-launch {
      margin-bottom: 14px;
    }

    .customer-vehicle-selector-launch .guided-vehicle-card {
      display: grid;
    }

    .customer-vehicle-launch-card .guided-vehicle-card-copy span {
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
    }

    .customer-vehicle-picker-sheet .guided-vehicle-prompt {
      gap: 4px;
    }

    .customer-vehicle-picker-sheet .guided-vehicle-prompt .sub {
      margin: 0;
    }

    .customer-vehicle-picker-sheet .vehicle-confirm-card {
      margin: 0 0 12px;
    }

    .customer-vehicle-picker-sheet .vehicle-picker-layout {
      grid-template-columns: minmax(0, 1fr) 26px;
    }

    .toggle-line {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      grid-auto-flow: column;
      gap: 8px;
      font-size: .82rem;
      white-space: nowrap;
    }

    .toggle-line input {
      min-height: 0;
      inline-size: 18px;
      block-size: 18px;
    }

    .vehicle-search-results {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
      max-height: 360px;
      overflow: auto;
    }

    .vehicle-option-card {
      width: 100%;
      min-height: 96px;
      border: 1px solid #dce7e3;
      border-radius: 8px;
      background: #fff;
      padding: 10px;
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 10px;
      text-align: left;
      color: var(--ink);
      cursor: pointer;
    }

    .vehicle-option-card:hover,
    .vehicle-option-card.active {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(8, 117, 104, .1);
    }

    .vehicle-option-card img {
      width: 72px;
      height: 54px;
      object-fit: cover;
      border-radius: 6px;
      background: #eaf2ff;
      align-self: start;
    }

    .vehicle-option-card strong,
    .vehicle-option-card span {
      min-width: 0;
    }

    .vehicle-option-meta {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .vehicle-option-meta small {
      color: var(--muted);
      font-weight: 650;
    }

    .vehicle-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 4px;
    }

    .vehicle-badge {
      border-radius: 999px;
      padding: 3px 7px;
      background: var(--teal-2);
      color: var(--teal);
      font-size: .68rem;
      font-weight: 850;
    }

    .vehicle-badge.warn {
      background: #f9e7e2;
      color: var(--red);
    }

    .vehicle-search-empty {
      border: 1px dashed #cfdcd7;
      border-radius: 8px;
      padding: 14px;
      color: var(--muted);
      background: #fff;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .btn {
      min-height: 40px;
      padding: 0 13px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #eaf2ff;
      color: var(--ink);
      border: 1px solid #d8e1dd;
      text-decoration: none;
      font-weight: 700;
      white-space: nowrap;
    }

    .btn.primary {
      background: var(--teal);
      color: #fff;
      border-color: var(--teal);
    }

    .btn.danger {
      background: var(--red-2);
      color: var(--red);
      border-color: #f3c3bc;
    }

    .btn.icon {
      inline-size: 40px;
      padding: 0;
    }

    .btn:hover {
      filter: brightness(.97);
    }

    .btn:disabled,
    input:disabled,
    select:disabled,
    textarea:disabled {
      cursor: not-allowed;
      opacity: .62;
    }

    .toolbar {
      padding: 12px 16px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      border-bottom: 1px solid var(--line);
      background: #fbfcfb;
    }

    .toolbar label {
      flex: 1 1 220px;
    }

    .search {
      flex: 1 1 240px;
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #c9d5d1;
      border-radius: 8px;
      padding: 0 10px;
      background: #fff;
      min-height: 42px;
    }

    .search input {
      border: 0;
      padding: 0;
      box-shadow: none;
      width: 100%;
    }

    .segmented {
      display: flex;
      border: 1px solid #c9d5d1;
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }

    .segmented button {
      min-height: 40px;
      padding: 0 12px;
      background: transparent;
      color: #42504d;
      border-right: 1px solid #c9d5d1;
      font-weight: 700;
    }

    .segmented button:last-child {
      border-right: 0;
    }

    .segmented button.active {
      background: var(--teal-2);
      color: var(--teal);
    }

    .reminder-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      width: 100%;
    }

    .reminder-tabs button {
      min-height: 38px;
      border-radius: 8px;
      padding: 0 12px;
      background: #fff;
      border: 1px solid #c9d5d1;
      color: #42504d;
      font-weight: 800;
    }

    .reminder-tabs button.active,
    .reminder-tabs button:hover {
      background: var(--teal-2);
      border-color: var(--teal);
      color: var(--teal);
    }

    .reminder-campaign-report {
      padding: 16px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(135deg, #f7fbff, #fff);
    }

    .reminder-report-head,
    .reminder-tracker-head,
    .reminder-workflow-card-head {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .reminder-report-head h3,
    .reminder-tracker-head h3,
    .reminder-workflow-card h3 {
      margin: 0;
      font-size: 1rem;
    }

    .reminder-range-control {
      flex: 0 1 180px;
      min-width: 150px;
    }

    .reminder-range-control select {
      min-height: 38px;
    }

    .reminder-report-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(105px, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .reminder-report-metric {
      display: block;
      width: 100%;
      padding: 12px;
      border: 1px solid #d9e5f2;
      border-radius: 10px;
      background: #fff;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .reminder-report-metric:hover,
    .reminder-report-metric:focus-visible {
      border-color: var(--blue);
      box-shadow: 0 7px 18px rgba(11, 84, 160, .11);
      outline: none;
      transform: translateY(-1px);
    }

    .reminder-report-metric span {
      display: block;
      color: #5c6f87;
      font-size: .76rem;
      font-weight: 800;
      line-height: 1.2;
    }

    .reminder-report-metric strong {
      display: block;
      margin-top: 6px;
      color: var(--ink);
      font-size: 1.15rem;
      line-height: 1.1;
    }

    .reminder-report-metric small {
      display: flex;
      gap: 4px;
      align-items: center;
      justify-content: flex-end;
      margin-top: 8px;
      color: var(--blue);
      font-size: .69rem;
      font-weight: 850;
    }

    .reminder-report-metric small i {
      width: 13px;
      height: 13px;
    }

    .reminder-report-detail {
      margin: 12px 14px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
    }

    .reminder-report-detail-head {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      border-bottom: 1px solid var(--line);
      background: #f7fbff;
    }

    .reminder-report-detail-head > div {
      min-width: 0;
      flex: 1;
    }

    .reminder-report-detail-head h3,
    .reminder-report-detail-head p {
      margin: 0;
    }

    .reminder-report-detail-head p {
      margin-top: 3px;
      color: #60718a;
      font-size: .8rem;
    }

    .reminder-report-detail-total {
      flex: 0 0 auto;
      min-width: 92px;
      padding: 8px 10px;
      border: 1px solid #cfe0f4;
      border-radius: 9px;
      background: #fff;
      text-align: right;
    }

    .reminder-report-detail-total span,
    .reminder-report-detail-total strong {
      display: block;
    }

    .reminder-report-detail-total span {
      color: #60718a;
      font-size: .7rem;
      font-weight: 800;
    }

    .reminder-report-detail-total strong {
      margin-top: 2px;
      font-size: 1rem;
    }

    .reminder-report-detail-list {
      display: grid;
      gap: 8px;
      padding: 10px;
      background: #fbfcfe;
    }

    .reminder-report-detail-row {
      display: grid;
      grid-template-columns: minmax(190px, 1.1fr) minmax(180px, 1fr) minmax(170px, .9fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border: 1px solid #dfe7ef;
      border-radius: 9px;
      background: #fff;
    }

    .reminder-report-detail-row strong,
    .reminder-report-detail-row span {
      display: block;
    }

    .reminder-report-detail-row span {
      margin-top: 3px;
      color: #65768d;
      font-size: .77rem;
      line-height: 1.35;
    }

    .reminder-report-detail-row .badge {
      display: inline-flex;
      margin-top: 0;
    }

    #vehicles[data-reminder-report-view="detail"] > .reminder-campaign-report,
    #vehicles[data-reminder-report-view="detail"] > .reminder-workflow,
    #vehicles[data-reminder-report-view="detail"] > #vehicleList,
    #vehicles[data-reminder-report-view="detail"] > .reminder-followup {
      display: none !important;
    }

    #vehicles:not([data-reminder-report-view="detail"]) > .reminder-report-detail {
      display: none !important;
    }

    .reminder-workflow {
      display: grid;
      grid-template-columns: minmax(0, 1.7fr) minmax(270px, .9fr);
      gap: 12px;
      padding: 16px;
      border-bottom: 1px solid var(--line);
      background: #fbfcfe;
    }

    .reminder-workflow-card,
    .reminder-followup {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
    }

    .reminder-workflow-card {
      padding: 14px;
    }

    .reminder-workflow-card p,
    .reminder-followup-note {
      margin: 5px 0 0;
      color: #60718a;
      font-size: .85rem;
      line-height: 1.45;
    }

    .reminder-filter-grid {
      display: grid;
      grid-template-columns: minmax(220px, 1.3fr) minmax(205px, 1fr) minmax(180px, .75fr);
      gap: 10px;
      margin-top: 14px;
    }

    .reminder-filter-grid > label,
    .reminder-filter-grid .search {
      min-width: 0;
    }

    .reminder-filter-grid #reminderBranchFilter {
      min-height: 108px;
    }

    .reminder-filter-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .reminder-send-actions {
      display: grid;
      gap: 9px;
      margin-top: 14px;
    }

    .reminder-send-actions .btn {
      justify-content: center;
    }

    .reminder-selection-summary {
      padding: 10px;
      border: 1px dashed #b9cadf;
      border-radius: 8px;
      color: #4e617a;
      font-size: .84rem;
      line-height: 1.35;
      background: #f7fbff;
    }

    .reminder-followup {
      margin: 16px;
      overflow: hidden;
    }

    .reminder-tracker-head {
      padding: 14px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .reminder-outcome-filter {
      flex: 0 1 205px;
      min-width: 165px;
    }

    .reminder-followup-list {
      display: grid;
      gap: 10px;
      padding: 12px;
      background: #fbfcfe;
    }

    .reminder-followup-row {
      display: grid;
      grid-template-columns: minmax(190px, 1fr) minmax(150px, .68fr) minmax(165px, .9fr) minmax(105px, .45fr) auto;
      gap: 10px;
      align-items: end;
      padding: 12px;
      border: 1px solid #dfe7ef;
      border-radius: 9px;
      background: #fff;
    }

    .reminder-followup-identity strong,
    .reminder-followup-identity > span {
      display: block;
    }

    .reminder-followup-identity > span {
      margin-top: 3px;
      color: #65768d;
      font-size: .8rem;
    }

    .reminder-followup-row label {
      min-width: 0;
      color: #4e617a;
      font-size: .75rem;
      font-weight: 800;
    }

    .reminder-followup-row input,
    .reminder-followup-row select {
      width: 100%;
      min-height: 38px;
      margin-top: 4px;
    }

    .reminder-followup-row .btn {
      min-height: 38px;
      white-space: nowrap;
    }

    @media (max-width: 900px) {
      .reminder-report-grid {
        grid-template-columns: repeat(4, minmax(120px, 1fr));
      }

      .reminder-workflow,
      .reminder-followup-row,
      .reminder-report-detail-row {
        grid-template-columns: 1fr;
      }

      .reminder-followup-row .btn {
        width: 100%;
      }
    }

    @media (max-width: 600px) {
      .reminder-campaign-report,
      .reminder-workflow {
        padding: 12px;
      }

      .reminder-report-grid,
      .reminder-filter-grid {
        grid-template-columns: 1fr 1fr;
      }

      .reminder-filter-grid .search,
      .reminder-filter-grid > label:first-of-type {
        grid-column: 1 / -1;
      }

      .reminder-range-control,
      .reminder-outcome-filter {
        width: 100%;
        max-width: none;
      }

      .reminder-followup {
        margin: 12px;
      }

      .reminder-report-detail {
        margin: 10px;
      }

      .reminder-report-detail-head {
        align-items: stretch;
        flex-direction: column;
      }

      .reminder-report-detail-total {
        width: 100%;
        text-align: left;
      }
    }

    /* reminders-filter-first-drilldown-20260824
       Staff choose a focused workspace, then apply their scope before a long
       customer queue is placed on screen. */
    #vehicles.reminder-compact-hybrid > .panel-head {
      padding-bottom: 13px;
    }

    .reminder-compact-shell {
      margin: 0 14px 12px;
    }

    #vehicles.reminder-compact-hybrid[data-reminder-compact-view="overview"] > .reminder-campaign-report,
    #vehicles.reminder-compact-hybrid[data-reminder-compact-view="overview"] > .reminder-workflow,
    #vehicles.reminder-compact-hybrid[data-reminder-compact-view="overview"] > #vehicleList,
    #vehicles.reminder-compact-hybrid[data-reminder-compact-view="overview"] > .reminder-followup,
    #vehicles.reminder-compact-hybrid[data-reminder-compact-view="queue"] > .reminder-campaign-report,
    #vehicles.reminder-compact-hybrid[data-reminder-compact-view="queue"] > .reminder-followup,
    #vehicles.reminder-compact-hybrid[data-reminder-compact-view="send"] > .reminder-campaign-report,
    #vehicles.reminder-compact-hybrid[data-reminder-compact-view="send"] > .reminder-followup,
    #vehicles.reminder-compact-hybrid[data-reminder-compact-view="results"] > .reminder-workflow,
    #vehicles.reminder-compact-hybrid[data-reminder-compact-view="results"] > #vehicleList {
      display: none !important;
    }

    #vehicles.reminder-compact-hybrid[data-reminder-compact-view="queue"][data-reminder-queue-ready="false"] > #vehicleList {
      display: none !important;
    }

    #vehicles.reminder-compact-hybrid[data-reminder-compact-view="queue"] .reminder-workflow {
      grid-template-columns: minmax(0, 1fr);
    }

    #vehicles.reminder-compact-hybrid[data-reminder-compact-view="queue"] .reminder-workflow-card:nth-child(2) {
      display: none !important;
    }

    #vehicles.reminder-compact-hybrid[data-reminder-compact-view="queue"] .reminder-advisor-field {
      display: none;
    }

    #vehicles.reminder-compact-hybrid .reminder-workflow {
      padding: 12px 14px;
      gap: 10px;
    }

    #vehicles.reminder-compact-hybrid .reminder-workflow-card {
      padding: 12px;
    }

    #vehicles.reminder-compact-hybrid .reminder-filter-grid {
      grid-template-columns: minmax(220px, 1.3fr) minmax(190px, .85fr) minmax(170px, .7fr);
      margin-top: 10px;
    }

    #vehicles.reminder-compact-hybrid .reminder-filter-grid #reminderBranchFilter {
      min-height: 72px;
    }

    #vehicles.reminder-compact-hybrid .reminder-filter-actions,
    #vehicles.reminder-compact-hybrid .reminder-send-actions {
      margin-top: 8px;
    }

    .reminder-filter-submit {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px dashed #c9d8e8;
    }

    .reminder-filter-submit .btn {
      min-height: 42px;
      white-space: nowrap;
    }

    .reminder-filter-submit .sub {
      margin: 0;
      color: #526b88;
      font-size: .78rem;
      line-height: 1.35;
    }

    #vehicles.reminder-compact-hybrid > #vehicleList {
      padding: 12px 14px;
      gap: 8px;
    }

    #vehicles.reminder-compact-hybrid > .reminder-campaign-report {
      padding: 12px 14px;
    }

    #vehicles.reminder-compact-hybrid .reminder-report-grid {
      margin-top: 10px;
      gap: 8px;
    }

    #vehicles.reminder-compact-hybrid .reminder-report-metric {
      padding: 10px;
    }

    #vehicles.reminder-compact-hybrid > .reminder-followup {
      margin: 12px 14px 14px;
    }

    @media (max-width: 640px) {
      .reminder-compact-shell {
        margin: 0 10px 10px;
      }

      .reminder-compact-shell .service-catalogue-compact-detail-actions {
        grid-template-columns: 1fr;
      }

      #vehicles.reminder-compact-hybrid .reminder-workflow,
      #vehicles.reminder-compact-hybrid > .reminder-campaign-report,
      #vehicles.reminder-compact-hybrid > #vehicleList {
        padding: 9px 10px;
      }

      #vehicles.reminder-compact-hybrid .reminder-filter-grid,
      #vehicles.reminder-compact-hybrid .reminder-report-grid {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
      }

      #vehicles.reminder-compact-hybrid .reminder-filter-grid .search,
      #vehicles.reminder-compact-hybrid .reminder-filter-grid > label {
        grid-column: 1 / -1;
      }

      #vehicles.reminder-compact-hybrid .reminder-filter-grid #reminderBranchFilter {
        min-height: 64px;
      }

      #vehicles.reminder-compact-hybrid .reminder-workflow-card {
        padding: 10px;
      }

      .reminder-filter-submit {
        grid-template-columns: 1fr;
        gap: 7px;
      }

      .reminder-filter-submit .btn {
        width: 100%;
      }

      #vehicles.reminder-compact-hybrid .reminder-filter-actions {
        gap: 7px;
      }

      #vehicles.reminder-compact-hybrid .reminder-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
      }

      #vehicles.reminder-compact-hybrid .reminder-tabs button {
        flex: 0 0 auto;
        min-height: 36px;
      }

      #vehicles.reminder-compact-hybrid > .reminder-followup {
        margin: 9px 10px 10px;
      }
    }

    .list {
      display: grid;
      gap: 10px;
      padding: 16px;
    }

    #vehicleList {
      grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
      align-items: stretch;
    }

    #vehicleList .empty {
      grid-column: 1 / -1;
    }

    .vehicle {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      display: grid;
      gap: 12px;
      background: #fff;
    }

    .vehicle-compact {
      padding: 9px;
      gap: 7px;
      border-color: #d5e2f1;
      box-shadow: 0 6px 16px rgba(12, 77, 162, .05);
      min-height: 198px;
      grid-template-rows: auto 1fr auto;
    }

    .vehicle-compact .vehicle-top {
      align-items: center;
      gap: 10px;
      min-height: 60px;
    }

    .vehicle-compact .vehicle-photo {
      width: 88px;
      height: 58px;
      object-fit: cover;
      border-radius: 6px;
      border: 1px solid #d8e4f2;
      background: #eef4fb;
      flex: 0 0 auto;
    }

    .vehicle-compact .vehicle-identity {
      gap: 10px;
      align-items: center;
      min-width: 0;
    }

    .vehicle-compact .plate {
      font-size: .96rem;
      color: var(--mobil-blue-dark);
    }

    .vehicle-compact .sub {
      font-size: .75rem;
      line-height: 1.18;
      overflow-wrap: anywhere;
    }

    .vehicle-compact-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: minmax(36px, 1fr);
      gap: 5px;
      padding: 0;
    }

    .vehicle-compact-summary div {
      min-width: 0;
      border: 1px solid #e2eaf5;
      border-radius: 6px;
      background: #fbfdff;
      padding: 4px 7px;
      min-height: 36px;
      display: grid;
      align-content: center;
    }

    .vehicle-compact-summary .summary-placeholder {
      visibility: hidden;
    }

    .vehicle-compact-summary span {
      display: block;
      color: #526985;
      font-size: .62rem;
      line-height: 1.1;
      font-weight: 760;
    }

    .vehicle-compact-summary strong {
      display: block;
      margin-top: 1px;
      font-size: .78rem;
      line-height: 1.12;
      color: var(--ink);
      overflow-wrap: anywhere;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .vehicle-status-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
      justify-content: flex-end;
    }

    .vehicle-compact .badge {
      min-height: 22px;
      padding: 2px 6px;
      font-size: .66rem;
    }

    .badge.muted {
      background: #eef2f6;
      color: #5b6878;
    }

    .vehicle-compact-actions {
      display: flex;
      gap: 6px;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #e7edf5;
      padding-top: 5px;
      min-height: 32px;
    }

    .vehicle-compact-actions .actions {
      gap: 8px;
      justify-content: flex-end;
    }

    .vehicle-compact .btn {
      min-height: 28px;
      padding: 0 8px;
      gap: 5px;
      font-size: .78rem;
    }

    .vehicle-detail-drawer {
      min-width: 0;
    }

    .vehicle-detail-toggle,
    .vehicle-detail-drawer > summary {
      min-height: 28px;
      border-radius: 6px;
      border: 1px solid #cfddef;
      background: #fff;
      color: var(--mobil-blue-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 0 8px;
      font-weight: 800;
      font-size: .78rem;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    .vehicle-detail-toggle[aria-expanded="true"] {
      background: var(--mobil-blue);
      border-color: var(--mobil-blue);
      color: #fff;
    }

    .vehicle-detail-drawer > summary::-webkit-details-marker {
      display: none;
    }

    .vehicle-detail-drawer[open] > summary {
      background: var(--mobil-blue);
      border-color: var(--mobil-blue);
      color: #fff;
    }

    .vehicle-detail-panel {
      margin-top: 6px;
      border-top: 1px solid #e7edf5;
      padding-top: 6px;
      display: grid;
      gap: 6px;
    }

    .vehicle-detail-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 4px;
    }

    .vehicle-detail-grid .mini {
      min-height: 34px;
      padding: 5px 7px;
      background: #fbfdff;
      border-color: #dbe5f1;
      border-radius: 6px;
    }

    .vehicle-detail-grid .mini span {
      margin-bottom: 1px;
      font-size: .61rem;
      line-height: 1.1;
    }

    .vehicle-detail-grid .mini strong {
      font-size: .74rem;
      line-height: 1.12;
    }

    .empty-field-notice {
      border: 1px dashed #ccd8e7;
      border-radius: 8px;
      padding: 9px 10px;
      background: #f8fbff;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
      color: #526985;
      font-size: .86rem;
      font-weight: 700;
    }

    .vehicle-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
    }

    .vehicle-identity {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .vehicle-photo {
      width: 84px;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f3f6f4;
      flex: 0 0 auto;
    }

    .plate {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 1.12rem;
      font-weight: 850;
    }

    .sub {
      color: var(--muted);
      font-size: .9rem;
      margin-top: 2px;
    }

    .sub.success { color: var(--green); }
    .sub.warning { color: var(--amber); }
    .sub.error { color: var(--red); }

    .mini-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .mini {
      background: #f7f9f7;
      border: 1px solid #e3ebe7;
      border-radius: 8px;
      padding: 10px;
      min-height: 70px;
    }

    .mini span {
      display: block;
      color: var(--muted);
      font-size: .76rem;
      margin-bottom: 4px;
    }

    .mini strong {
      display: block;
      font-size: .92rem;
      overflow-wrap: anywhere;
    }

    .customer-vehicle-detail {
      padding: 10px 14px 12px;
      gap: 10px;
      border-color: #d9e5f3;
      box-shadow: 0 6px 18px rgba(12, 77, 162, .06);
    }

    .customer-vehicle-detail .vehicle-top {
      align-items: center;
      padding-bottom: 8px;
      border-bottom: 1px solid #e8eef6;
    }

    .customer-vehicle-detail .vehicle-photo {
      width: 74px;
      border-radius: 7px;
    }

    .customer-vehicle-detail .vehicle-identity {
      gap: 10px;
    }

    .customer-vehicle-detail .plate {
      font-size: 1rem;
      color: var(--mobil-blue-dark);
    }

    .customer-vehicle-detail .sub {
      font-size: .82rem;
      line-height: 1.25;
    }

    .customer-vehicle-detail .actions {
      gap: 8px;
      justify-content: flex-end;
    }

    .customer-vehicle-detail .btn {
      min-height: 34px;
      padding: 0 10px;
      gap: 6px;
      font-size: .9rem;
    }

    .customer-vehicle-detail .badge {
      min-height: 30px;
      padding: 4px 9px;
      font-size: .74rem;
    }

    .customer-vehicle-detail .vehicle-compact-summary {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .customer-vehicle-detail .vehicle-status-chips .badge.pending,
    .customer-vehicle-detail .vehicle-status-chips .badge.warn,
    .customer-vehicle-detail .vehicle-status-chips .badge.muted {
      background: #eef5ff;
      color: var(--mobil-blue-dark);
    }

    .customer-detail-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 6px;
    }

    .customer-detail-grid .mini {
      min-height: 46px;
      padding: 7px 9px;
      border-color: #dbe5f1;
      background: #fbfdff;
      display: grid;
      align-content: center;
      gap: 2px;
    }

    .customer-detail-grid .mini:nth-child(-n+4) {
      background: #f6f9ff;
      border-color: #cfddef;
    }

    .customer-detail-grid .mini span {
      margin: 0;
      color: #526985;
      font-size: .68rem;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .customer-detail-grid .mini strong {
      font-size: .84rem;
      line-height: 1.15;
      color: #071321;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 6px 9px;
      font-size: .78rem;
      font-weight: 800;
    }

    .badge.ok { background: var(--green-2); color: var(--green); }
    .badge.warn,
    .badge.pending,
    .badge.customer-warn { background: var(--amber-2); color: #825517; }
    .badge.due { background: var(--red-2); color: var(--red); }
    .badge.info { background: #e4edf8; color: var(--blue); }

    .customer-payment-note {
      margin: 0;
      padding: 8px 10px;
      border: 1px solid #f3d49b;
      border-radius: 8px;
      background: #fff8eb;
      color: #7a5413;
      font-weight: 750;
    }

    .customer-payment-note.danger {
      border-color: #f3b3b3;
      background: #fff1f1;
      color: #9b1c1c;
    }

    .payment-verification-note {
      display: grid;
      gap: 4px;
      padding: 8px 10px;
      border: 1px dashed #cad8e8;
      border-radius: 8px;
      background: #f8fbff;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .payment-verification-note.warn {
      border-color: #f1c879;
      background: #fff8eb;
      color: #7a5413;
    }

    .payment-verification-note.due {
      border-color: #f0b3b3;
      background: #fff4f4;
      color: #971b1b;
    }

    .reminders {
      display: grid;
      gap: 8px;
    }

    .reminder {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #e1e8e5;
      background: #fbfcfb;
    }

    .reminder.pending {
      border-color: #f2b4ae;
      background: #fff4f2;
    }

    .reminder.pending p strong {
      color: var(--red);
    }

    .reminder.sent {
      border-color: #b8d8ce;
      background: #f4f8ff;
    }

    .btn.sent {
      border-color: var(--green);
      background: var(--green);
      color: #fff;
    }

    .btn.pending-send {
      border-color: var(--red);
      background: var(--red);
      color: #fff;
    }

    .reminder p {
      margin: 0;
      font-size: .9rem;
      line-height: 1.35;
    }

    .bulk-check {
      inline-size: 18px;
      block-size: 18px;
      accent-color: var(--teal);
    }

    .reminder-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .audit-panel {
      margin-top: 0;
    }

    .audit-list {
      padding: 16px;
      display: grid;
      gap: 10px;
    }

    .audit-row {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
      gap: 12px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: #fff;
    }

    .audit-row strong,
    .audit-row span {
      overflow-wrap: anywhere;
    }

    .empty {
      border: 1px dashed #b9c7c2;
      border-radius: 8px;
      color: var(--muted);
      padding: 26px;
      text-align: center;
      background: #fbfcfb;
    }

    .bulk-launcher {
      margin: 12px 16px 0;
      border: 1px solid #c9d5d1;
      border-radius: 8px;
      background: #fbfcfb;
      padding: 14px;
      display: none;
      gap: 12px;
    }

    .bulk-launcher.show {
      display: grid;
    }

    .bulk-launcher-list {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .bulk-launcher-list li {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 1px solid #e3ebe7;
      border-radius: 8px;
      background: #fff;
      padding: 10px;
    }

    .record-summary-panel {
      margin: 10px 16px 0;
      border: 1px solid #cfddef;
      border-radius: 8px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 10px;
      box-shadow: 0 8px 18px rgba(12, 77, 162, .06);
    }

    .record-summary-panel[hidden] {
      display: none;
    }

    .record-summary-head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .record-summary-photo {
      width: 96px;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f3f6f4;
    }

    .record-summary-title {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .record-summary-title strong {
      font-size: 1.04rem;
      overflow-wrap: anywhere;
    }

    .record-summary-meta {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
    }

    .record-summary-meta .mini {
      min-height: 48px;
      padding: 7px 8px;
      border-radius: 7px;
    }

    .record-summary-meta .mini span {
      margin-bottom: 2px;
      font-size: .68rem;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .record-summary-meta .mini strong {
      font-size: .82rem;
      line-height: 1.18;
    }

    .record-summary-history {
      display: grid;
      gap: 6px;
    }

    .record-history-row {
      border: 1px solid #e3ebe7;
      border-radius: 7px;
      background: #fbfdff;
      padding: 8px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .record-history-row strong,
    .record-history-row span {
      overflow-wrap: anywhere;
    }

    .mechanic-history-picker {
      gap: 9px;
    }

    .mechanic-history-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .mechanic-history-dates {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 2px 0 4px;
      scrollbar-width: thin;
    }

    .mechanic-history-date {
      border: 1px solid #cfddef;
      border-radius: 999px;
      background: #f7fbff;
      color: #06416f;
      padding: 8px 11px;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
      cursor: pointer;
    }

    .mechanic-history-date.active {
      background: #064da2;
      border-color: #064da2;
      color: #fff;
      box-shadow: 0 8px 16px rgba(6, 77, 162, .16);
    }

    .mechanic-history-detail {
      border: 1px solid #d9e4f3;
      border-radius: 8px;
      padding: 10px;
      background: #fbfdff;
      display: grid;
      gap: 8px;
    }

    .mechanic-history-detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .mechanic-history-detail-head h4 {
      margin: 0;
      font-size: 15px;
      line-height: 1.2;
      color: #101828;
    }

    .mechanic-history-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .mechanic-history-notes {
      border: 1px dashed #cfddef;
      border-radius: 8px;
      background: #fff;
      color: #506179;
      font-size: 13px;
      line-height: 1.4;
      padding: 8px;
      white-space: pre-wrap;
    }

    .mechanic-history-section {
      display: grid;
      gap: 5px;
    }

    .mechanic-history-section > strong {
      color: #344054;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .mechanic-history-photo-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
    }

    .mechanic-history-photo-grid a {
      display: block;
      min-width: 0;
      aspect-ratio: 4 / 3;
      border: 1px solid #d9e4f3;
      border-radius: 7px;
      overflow: hidden;
      background: #eef3f8;
    }

    .mechanic-history-photo-grid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .mechanic-history-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }

    .mechanic-history-lock {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #d8e5dd;
      border-radius: 7px;
      background: #f4fbf6;
      color: #27613b;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 800;
    }

    @media (max-width: 720px) {
      .mechanic-history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .mechanic-history-photo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 420px) {
      .mechanic-history-head {
        display: grid;
      }

      .mechanic-history-grid {
        grid-template-columns: 1fr;
      }

      .mechanic-history-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .record-work-hint {
      border: 1px dashed #cfddef;
      border-radius: 8px;
      background: #f8fbff;
      color: var(--muted);
      padding: 8px 10px;
      font-size: .82rem;
      font-weight: 750;
    }

    .workshop-queue-panel {
      margin: 10px 16px 0;
      border: 1px solid #cfddef;
      border-radius: 10px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      padding: 12px;
      display: grid;
      gap: 10px;
      box-shadow: 0 8px 18px rgba(12, 77, 162, .05);
    }

    .workshop-queue-panel[hidden] {
      display: none !important;
    }

    .workshop-queue-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      border-bottom: 1px solid #e3ebe7;
      padding-bottom: 10px;
    }

    .workshop-queue-head h3 {
      margin: 0 0 2px;
      font-size: 1rem;
      color: var(--ink);
    }

    .workshop-queue-head p {
      margin: 0;
      color: var(--muted);
      font-size: .8rem;
      line-height: 1.3;
    }

    .workshop-queue-summary {
      display: flex;
      gap: 6px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .queue-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1px solid #d8e6f7;
      border-radius: 999px;
      background: #f0f6ff;
      color: var(--blue);
      padding: 5px 8px;
      font-size: .72rem;
      font-weight: 900;
      white-space: nowrap;
      min-height: 34px;
      cursor: pointer;
      font-family: inherit;
      transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    }

    button.queue-chip:hover,
    button.queue-chip:focus-visible,
    button.queue-chip[aria-pressed="true"] {
      border-color: var(--blue);
      background: var(--blue);
      color: #fff;
      box-shadow: 0 5px 12px rgba(12, 77, 162, .16);
      outline: none;
    }

    .queue-chip.warn {
      color: #8a5a00;
      background: #fff7df;
      border-color: #f1d589;
    }

    .queue-chip.due {
      color: #a52835;
      background: #fff0f2;
      border-color: #f1b9c1;
    }

    .queue-chip.ok {
      color: #0b6b46;
      background: #eaf8ef;
      border-color: #b9dfc6;
    }

    .workshop-queue-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .workshop-queue-card {
      border: 1px solid #dce7f5;
      border-radius: 9px;
      background: #fff;
      padding: 0;
      min-width: 0;
      overflow: hidden;
    }

    .workshop-queue-card.in-workshop {
      border-color: #9dc3f4;
      box-shadow: inset 3px 0 0 var(--blue);
    }

    .workshop-queue-card.ready {
      border-color: #b9dfc6;
      box-shadow: inset 3px 0 0 #0b8f5a;
    }

    .workshop-queue-title {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
    }

    .workshop-queue-title strong {
      font-size: 1rem;
      color: var(--ink);
      overflow-wrap: anywhere;
    }

    .workshop-queue-open {
      width: 100%;
      border: 0;
      background: transparent;
      color: inherit;
      padding: 11px 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 7px 12px;
      text-align: left;
      cursor: pointer;
      font: inherit;
      touch-action: manipulation;
    }

    .workshop-queue-open:hover,
    .workshop-queue-open:focus-visible {
      background: #f4f8ff;
      outline: 2px solid rgba(12, 77, 162, .2);
      outline-offset: -2px;
    }

    .workshop-queue-open-main {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .workshop-queue-open-main strong {
      font-size: 1rem;
      line-height: 1.2;
      color: var(--ink);
      overflow-wrap: anywhere;
    }

    .workshop-queue-progress-line,
    .workshop-queue-time-line {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      color: var(--muted);
      font-size: .77rem;
      line-height: 1.3;
    }

    .workshop-queue-progress-line svg,
    .workshop-queue-time-line svg {
      width: 15px;
      height: 15px;
      flex: 0 0 auto;
      color: var(--blue);
    }

    .workshop-queue-time-line.due {
      color: #a52835;
      font-weight: 850;
    }

    .workshop-queue-open-side {
      display: grid;
      justify-items: end;
      align-content: space-between;
      gap: 8px;
    }

    .workshop-queue-chevron {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #eaf2ff;
      color: var(--blue);
    }

    .workshop-queue-chevron svg {
      width: 18px;
      height: 18px;
    }

    .workshop-queue-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .workshop-queue-meta .mini {
      min-height: 42px;
      border-radius: 7px;
      padding: 6px 7px;
    }

    .workshop-queue-meta .mini span {
      font-size: .64rem;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .workshop-queue-meta .mini strong {
      font-size: .78rem;
      line-height: 1.18;
    }

    .workshop-queue-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .workshop-queue-actions .btn {
      min-height: 32px;
      padding: 0 9px;
      font-size: .76rem;
      border-radius: 8px;
    }

    .workshop-queue-panel.is-quick-finish {
      border-color: #9dc3f4;
      background: linear-gradient(180deg, #f8fbff, #fff);
    }

    .workshop-queue-card.quick-finish {
      border-color: #9dc3f4;
      box-shadow: inset 4px 0 0 var(--blue), 0 7px 18px rgba(12, 77, 162, .08);
    }

    .workshop-queue-card.quick-finish .workshop-queue-title strong {
      font-size: 1.18rem;
    }

    .workshop-queue-card.quick-finish .workshop-queue-actions {
      padding-top: 2px;
    }

    .workshop-queue-actions .queue-work-done {
      min-height: 48px;
      flex: 1 1 150px;
      justify-content: center;
      font-size: .92rem;
      font-weight: 950;
    }

    .queue-show-all-btn {
      min-height: 32px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: .74rem;
    }

    .workshop-queue-empty {
      border: 1px dashed #cddbea;
      border-radius: 9px;
      padding: 18px 12px;
      text-align: center;
      color: var(--muted);
      background: #fbfdff;
      font-size: .84rem;
    }

    .workshop-queue-history {
      border-top: 1px dashed #d7e3ef;
      padding-top: 6px;
    }

    .workshop-queue-history summary {
      cursor: pointer;
      color: var(--blue);
      font-weight: 900;
      font-size: .78rem;
    }

    .workshop-queue-history-list {
      display: grid;
      gap: 6px;
      margin-top: 6px;
    }

    .workshop-queue-history-row {
      border: 1px solid #e5edf7;
      border-radius: 7px;
      background: #fbfdff;
      padding: 7px;
      display: grid;
      gap: 2px;
      font-size: .76rem;
      color: var(--muted);
    }

    .workshop-queue-history-row strong {
      color: var(--ink);
      overflow-wrap: anywhere;
    }

    .branch-booking-panel {
      align-content: start;
      padding: 14px;
    }

    .branch-booking-panel .branch-booking-picker-intro {
      padding: 0;
    }

    .branch-booking-panel .branch-booking-picker-intro h3 {
      margin: 0;
      color: var(--ink);
      font-size: 1rem;
    }

    .branch-booking-panel .branch-booking-filter-bar {
      padding: 8px 0 2px;
      scrollbar-width: none;
    }

    .branch-booking-panel .branch-booking-filter-bar::-webkit-scrollbar {
      display: none;
    }

    .branch-booking-panel .branch-booking-list {
      padding: 0;
      overflow: visible;
    }

    .branch-booking-launch-card {
      width: 100%;
      min-width: 0;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 40px;
      gap: 11px;
      align-items: center;
      min-height: 78px;
      padding: 12px;
      border: 1px solid #bfd5ee;
      border-radius: 15px;
      background: linear-gradient(145deg, #fff, #f4f9ff);
      color: var(--ink);
      text-align: left;
      box-shadow: 0 8px 20px rgba(18, 67, 119, .08);
      cursor: pointer;
    }

    .branch-booking-launch-card:hover {
      border-color: #7eb0e2;
      background: #f3f8ff;
    }

    .branch-booking-launch-icon,
    .branch-booking-launch-arrow {
      display: grid;
      place-items: center;
      border-radius: 999px;
    }

    .branch-booking-launch-icon {
      width: 46px;
      height: 46px;
      background: #e8f2ff;
      color: #0754aa;
    }

    .branch-booking-launch-arrow {
      width: 38px;
      height: 38px;
      background: #0754aa;
      color: #fff;
    }

    .branch-booking-launch-icon svg,
    .branch-booking-launch-arrow svg {
      width: 21px;
      height: 21px;
    }

    .branch-booking-launch-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .branch-booking-launch-copy small {
      color: #0754aa;
      font-size: .68rem;
      font-weight: 950;
      letter-spacing: .055em;
      text-transform: uppercase;
    }

    .branch-booking-launch-copy strong {
      overflow: hidden;
      font-size: .96rem;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .branch-booking-launch-copy span {
      overflow: hidden;
      color: var(--muted);
      font-size: .74rem;
      font-weight: 700;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .guided-vehicle-sheet.branch-booking-picker-sheet {
      grid-template-rows: auto auto auto minmax(0, 1fr);
    }

    .branch-booking-picker-intro {
      display: grid;
      gap: 3px;
      padding: 11px 16px 4px;
    }

    .branch-booking-picker-intro strong {
      color: var(--ink);
      font-size: .96rem;
    }

    .branch-booking-picker-intro p {
      margin: 0;
      color: var(--muted);
      font-size: .76rem;
      line-height: 1.35;
    }

    .branch-booking-filter-bar {
      display: flex;
      gap: 7px;
      max-width: 100%;
      padding: 9px 16px 10px;
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .branch-booking-filter-bar .queue-chip {
      flex: 0 0 auto;
      min-height: 36px;
      cursor: pointer;
    }

    .branch-booking-filter-bar .queue-chip[aria-pressed="true"] {
      border-color: #0754aa;
      background: #0754aa;
      color: #fff;
    }

    .branch-booking-list {
      display: grid;
      grid-template-columns: 1fr;
      align-content: start;
      gap: 10px;
      min-height: 0;
      padding: 0 16px max(18px, env(safe-area-inset-bottom, 0px));
      overflow-y: auto;
    }

    body.booking-picker-open {
      overflow: hidden;
    }

    @media (max-width: 759px) {
      .guided-vehicle-modal.branch-booking-picker-modal {
        box-sizing: border-box;
        align-items: start;
        padding-top: max(8px, env(safe-area-inset-top, 0px));
      }

      .guided-vehicle-sheet.branch-booking-picker-sheet {
        width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0 auto;
        border-radius: 0 0 22px 22px;
        box-shadow: 0 22px 54px rgba(7, 35, 74, .24);
        animation: mechanic-workflow-drop-in .18s ease-out;
      }
    }

    .branch-booking-card {
      border: 1px solid #dce7f5;
      border-radius: 9px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .branch-booking-card.confirmed {
      border-color: #b9dfc6;
      box-shadow: inset 3px 0 0 #0b8f5a;
    }

    .branch-booking-card.proposed {
      border-color: #f1d589;
      box-shadow: inset 3px 0 0 #b77900;
    }

    .branch-booking-card.overdue {
      border-color: #f1b9c1;
      box-shadow: inset 3px 0 0 #c22c3b;
    }

    .booking-followup-alert {
      border: 1px solid #f1b9c1;
      border-radius: 8px;
      background: #fff0f2;
      color: #8f2330;
      padding: 8px;
      font-size: .78rem;
      font-weight: 800;
    }

    .booking-slot-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .booking-slot-grid label,
    .booking-staff-note {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: .72rem;
      font-weight: 850;
    }

    .booking-slot-grid input,
    .booking-staff-note input {
      min-height: 34px;
      padding: 6px 7px;
      font-size: .82rem;
    }

    .booking-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .booking-card-actions .btn {
      min-height: 32px;
      padding: 0 9px;
      font-size: .76rem;
      border-radius: 8px;
    }

    .customer-booking-tracker {
      display: grid;
      gap: 7px;
      margin-top: 2px;
    }

    .customer-booking-tracker-row {
      border: 1px solid #dce7f5;
      border-radius: 8px;
      background: #fbfdff;
      padding: 8px;
      display: grid;
      gap: 5px;
    }

    .customer-booking-tracker-row.confirmed {
      border-color: #b9dfc6;
      background: #f1fff7;
    }

    .customer-booking-tracker-row.proposed {
      border-color: #f1d589;
      background: #fffaf0;
    }

    @media (max-width: 720px) {
      .workshop-queue-panel {
        margin: 10px 10px 0;
        padding: 10px;
      }

      .workshop-queue-panel.branch-booking-panel {
        padding: 12px;
      }

      .workshop-queue-head {
        display: grid;
      }

      .workshop-queue-summary {
        justify-content: flex-start;
      }

      .workshop-queue-list {
        grid-template-columns: 1fr;
      }

      .workshop-queue-card {
        padding: 9px;
      }

      .workshop-queue-actions .btn {
        flex: 1 1 calc(50% - 6px);
      }

      .branch-booking-list,
      .booking-slot-grid {
        grid-template-columns: 1fr;
      }
    }

    .qr-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
    }

    .qr-card {
      display: grid;
      gap: 10px;
      align-content: start;
      border: 1px solid #e3ebe7;
      border-radius: 8px;
      background: #fff;
      padding: 12px;
    }

    .qr-card img {
      width: 180px;
      height: 180px;
      justify-self: center;
      border: 1px solid #d8e2de;
      border-radius: 8px;
      padding: 8px;
      background: #fff;
    }

    .toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      padding: 12px 14px;
      border-radius: 8px;
      background: var(--mobil-blue-dark);
      color: #fff;
      box-shadow: var(--shadow);
      transform: translateY(120px);
      opacity: 0;
      transition: .2s ease;
      z-index: 10;
      max-width: min(360px, calc(100vw - 32px));
    }

    .toast.show {
      transform: translateY(0);
      opacity: 1;
    }

    .login-screen {
      min-height: 100vh;
      min-height: 100svh;
      display: grid;
      place-items: center;
      padding: 24px;
      /* Keep every role login on the current Mobil Car Care workshop artwork. */
      background:
        linear-gradient(112deg, rgba(3, 24, 38, .84), rgba(6, 37, 50, .64) 52%, rgba(8, 33, 43, .42)),
        url("/login-workshop-background-20261015.webp?v=customer-login-speed-20261015-1");
      background-color: #0b2531;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }

    /* The photo is introduced as a separate mobile hero below.  Keeping it
       hidden at larger sizes preserves the focused desktop and staff-login layout. */
    .login-mobile-hero,
    .login-mobile-welcome {
      display: none;
    }

    .login-card {
      width: min(520px, 100%);
      background: rgba(255, 255, 255, .96);
      border: 1px solid rgba(255, 255, 255, .64);
      border-radius: 8px;
      box-shadow: var(--shadow);
      padding: 22px;
      display: grid;
      gap: 14px;
    }

    .login-card h1 {
      margin: 0;
      font-size: 1.55rem;
      line-height: 1.15;
    }

    .login-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
    }

    .login-card form {
      padding: 0;
    }

    /* Shared desktop, tablet and phone field treatment.  These controls used
       to be styled only inside the phone breakpoint, leaving tablet/desktop
       SVG icons at their browser default size. */
    .login-field-control {
      position: relative;
      display: grid;
      align-items: center;
    }

    .login-field-control > .login-field-icon {
      position: absolute;
      left: 14px;
      z-index: 1;
      width: 20px;
      height: 20px;
      color: #0c5dc5;
      pointer-events: none;
    }

    .login-card .login-field-control input,
    .login-card .login-field-control select {
      width: 100%;
      min-height: 52px;
      padding: 12px 14px 12px 48px;
      border-color: #d3ddeb;
      border-radius: 13px;
      background: #fff;
      color: #15263e;
      font-size: 16px;
      font-weight: 650;
    }

    .login-card .login-field-control select {
      padding-right: 36px;
    }

    .login-card .login-field-control input::placeholder {
      color: #9caabd;
      font-weight: 560;
    }

    .login-card .login-field-control input:focus,
    .login-card .login-field-control select:focus {
      border-color: #1264ca;
      box-shadow: 0 0 0 3px rgba(18, 100, 202, .13);
    }

    .login-progress {
      border: 1px solid #c7d9f2;
      border-radius: 10px;
      padding: 11px 12px;
      background: linear-gradient(135deg, #f7fbff, #eef6ff);
      display: grid;
      gap: 7px;
    }

    .login-progress[hidden] {
      display: none;
    }

    .login-progress-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--mobil-blue-dark);
      font-size: .88rem;
    }

    .login-progress-head strong {
      min-width: 0;
    }

    .login-progress-elapsed {
      flex: 0 0 auto;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
      font-size: .8rem;
    }

    .login-progress-track {
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: #dce8f7;
      box-shadow: inset 0 1px 1px rgba(10, 56, 109, .08);
    }

    .login-progress-bar {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--mobil-blue), #2779d7, #4ba0ff);
      box-shadow: 0 0 12px rgba(21, 91, 178, .32);
      transition: width .35s ease;
    }

    .login-progress-detail {
      color: #496788;
      font-size: .82rem;
      line-height: 1.35;
    }

    .login-card.is-submitting .login-role-links,
    .login-card.is-submitting #resetCustomerPinToggleBtn,
    .login-card.is-submitting .login-register-launcher {
      pointer-events: none;
      opacity: .62;
    }

    .login-role-links {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .login-role-links .btn {
      min-height: 40px;
      justify-content: center;
      font-size: .88rem;
    }

    .login-role-locked {
      display: none;
    }

    .customer-register-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: #f8faf8;
      display: grid;
      gap: 10px;
    }

    .customer-register-panel[hidden] {
      display: none;
    }

    .login-screen.is-registration-open {
      place-items: start center;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .login-card.is-registration-open {
      width: min(760px, 100%);
      max-height: calc(100dvh - 48px);
      overflow-y: auto;
      padding: 20px;
      gap: 0;
      animation: customer-registration-screen-in .24s cubic-bezier(.2, .8, .2, 1) both;
    }

    .login-card.is-registration-open > :not(#customerRegisterPanel) {
      display: none !important;
    }

    .login-card.is-registration-open .customer-register-panel {
      border: 0;
      border-radius: 0;
      padding: 0;
      background: transparent;
      gap: 16px;
    }

    .customer-register-screen-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid #dbe6f2;
    }

    .customer-register-title-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .customer-register-title-copy > span {
      color: var(--mobil-blue);
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .1em;
    }

    .customer-register-title-copy strong {
      color: #102846;
      font-size: clamp(1.25rem, 2.2vw, 1.65rem);
      line-height: 1.18;
    }

    .customer-register-title-copy p {
      color: #587190;
      font-size: .92rem;
    }

    .customer-register-screen-heading .btn {
      flex: 0 0 auto;
      min-height: 40px;
      padding: 8px 12px;
      font-size: .84rem;
    }

    .customer-registration-steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      padding: 2px 0;
    }

    .customer-registration-steps > button {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 42px;
      padding: 7px 9px;
      border: 1px solid #d7e1ed;
      border-radius: 12px;
      background: #f7f9fc;
      color: #5a6b7f;
      font-size: .77rem;
      font-weight: 700;
      line-height: 1.15;
      text-align: left;
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    }

    .customer-registration-steps > button:hover,
    .customer-registration-steps > button:focus-visible {
      border-color: #9abce4;
      box-shadow: 0 4px 12px rgba(21, 91, 178, .1);
      outline: none;
    }

    .customer-registration-steps > button.is-active {
      border-color: #a8c8ef;
      background: #eaf3ff;
      color: #104a91;
    }

    .customer-registration-steps > button.is-complete {
      border-color: #b9dfc8;
      background: #f2fbf5;
      color: #18713f;
    }

    .customer-registration-steps b {
      flex: 0 0 21px;
      width: 21px;
      height: 21px;
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      background: #dbe7f7;
      color: #2f5c94;
      font-size: .73rem;
    }

    .customer-registration-steps .is-active b {
      background: var(--mobil-blue);
      color: #fff;
    }

    .customer-registration-steps .is-complete b {
      background: #198754;
      color: #fff;
    }

    .customer-registration-step {
      display: grid;
      gap: 14px;
      padding: 16px;
      border: 1px solid #dbe6f2;
      border-radius: 16px;
      background: linear-gradient(135deg, #ffffff, #f7fbff);
    }

    .customer-registration-step[hidden] {
      display: none;
    }

    .customer-registration-step-heading {
      display: grid;
      gap: 4px;
    }

    .customer-registration-step-heading > span {
      color: var(--mobil-blue);
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .1em;
    }

    .customer-registration-step-heading strong {
      color: #102846;
      font-size: 1.1rem;
      line-height: 1.18;
    }

    .customer-registration-step-heading p {
      color: #587190;
      font-size: .88rem;
      line-height: 1.4;
    }

    .customer-registration-step-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding-top: 2px;
    }

    .customer-registration-step-actions .btn {
      min-height: 46px;
    }

    .customer-registration-step-actions .btn.primary {
      min-width: min(100%, 246px);
    }

    .customer-registration-workshop {
      display: grid;
      gap: 10px;
      padding: 13px;
      border: 1px solid #cfe0f5;
      border-radius: 13px;
      background: #f4f9ff;
    }

    .customer-registration-workshop-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .customer-registration-workshop-head strong {
      display: block;
      color: #123c72;
      font-size: .94rem;
    }

    .customer-registration-workshop-head p,
    .customer-registration-workshop-status {
      margin: 3px 0 0;
      color: #587190;
      font-size: .81rem;
      line-height: 1.38;
    }

    .customer-registration-workshop-locate {
      flex: 0 0 auto;
      min-height: 44px;
      white-space: nowrap;
    }

    .customer-registration-workshop-status[data-state="success"] {
      color: #18713f;
    }

    .customer-registration-workshop-status[data-state="error"] {
      color: #a63d32;
    }

    .customer-registration-review {
      display: grid;
      gap: 10px;
      padding: 14px;
      border: 1px solid #cfe0f5;
      border-radius: 14px;
      background: #f4f9ff;
    }

    .customer-registration-review strong {
      color: #123c72;
      font-size: .94rem;
    }

    .customer-registration-review-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .customer-registration-review-item {
      min-width: 0;
      display: grid;
      gap: 2px;
      padding: 10px;
      border: 1px solid #d8e5f2;
      border-radius: 10px;
      background: #fff;
    }

    .customer-registration-review-item span {
      color: #61758f;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .customer-registration-review-item b {
      overflow: hidden;
      color: #152a45;
      font-size: .88rem;
      line-height: 1.28;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .customer-registration-review-note {
      color: #587190;
      font-size: .82rem;
      line-height: 1.4;
    }

    @keyframes customer-registration-screen-in {
      from {
        opacity: 0;
        transform: translateY(-22px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .login-register-launcher {
      width: 100%;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid #c8d9ef;
      border-radius: 12px;
      background: linear-gradient(135deg, #f9fcff, #eaf3ff);
      color: #153f78;
      text-align: left;
      cursor: pointer;
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .login-register-launcher:hover,
    .login-register-launcher:focus-visible {
      border-color: #7fa8dc;
      box-shadow: 0 7px 18px rgba(21, 91, 178, .13);
      outline: none;
    }

    .login-register-launcher:active {
      transform: translateY(1px);
    }

    .login-register-launcher-icon {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: #dcecff;
      color: var(--mobil-blue);
    }

    .login-register-launcher-copy {
      min-width: 0;
      display: grid;
      gap: 1px;
    }

    .login-register-launcher-copy strong {
      color: #112e57;
      font-size: .9rem;
    }

    .login-register-launcher-copy small {
      color: #587190;
      font-size: .76rem;
      line-height: 1.25;
    }

    .login-register-launcher > i:last-child {
      color: var(--mobil-blue);
    }

    .customer-register-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .customer-register-panel-head .btn {
      flex: 0 0 auto;
      min-height: 34px;
      padding: 7px 9px;
      font-size: .78rem;
    }

    .customer-register-otp-panel {
      border: 1px solid #cfe0f4;
      border-radius: 8px;
      padding: 10px;
      background: #f8fbff;
      display: grid;
      gap: 8px;
    }

    .customer-register-otp-panel[hidden] {
      display: none;
    }

    .login-customer-otp-panel {
      margin-top: 12px;
    }

    .customer-register-otp-panel.is-verified {
      border-color: #b7dfc2;
      background: #f6fff8;
    }

    .customer-register-otp-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .customer-register-otp-actions {
      display: flex;
      gap: 8px;
      align-items: flex-end;
      flex-wrap: wrap;
    }

    .customer-register-otp-actions .btn {
      flex: 1 1 150px;
      justify-content: center;
    }

    .user-strip {
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 8px;
      padding: 10px;
      display: grid;
      gap: 6px;
      color: rgba(255, 255, 255, .88);
      background: rgba(255,255,255,.06);
    }

    .user-strip strong,
    .user-strip span {
      overflow-wrap: anywhere;
    }

    .access-list,
    .customer-profile-card {
      padding: 16px;
      display: grid;
      gap: 10px;
    }

    .access-login-note {
      border: 1px solid #cfe0f4;
      border-radius: 14px;
      background: #f7fbff;
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .access-login-note strong {
      color: var(--mobil-blue-dark);
      font-size: .9rem;
    }

    .access-login-routes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 10px;
      font-size: .8rem;
    }

    .access-route-card {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-height: 70px;
      padding: 12px;
      border: 1px solid #d3e1f0;
      border-radius: 12px;
      background: #fff;
      color: var(--ink);
      overflow-wrap: anywhere;
      text-decoration: none;
      transition: border-color .15s ease, background .15s ease, transform .15s ease;
    }

    .access-route-card:hover,
    .access-route-card:focus-visible {
      border-color: #8eb5e2;
      background: #eef6ff;
      transform: translateY(-1px);
    }

    .access-route-card > svg {
      width: 24px;
      height: 24px;
      color: var(--mobil-blue);
    }

    .access-route-card > span {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .access-route-card strong {
      color: var(--ink);
      font-size: .9rem;
    }

    .access-route-card small {
      color: var(--mobil-blue-dark);
      font-size: .74rem;
      font-weight: 780;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }

    .access-route-card > .access-route-arrow {
      width: 18px;
      height: 18px;
      color: var(--mobil-blue);
    }

    .access-section-selector {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin: 14px 16px;
      padding: 8px;
      border: 1px solid #cbdcec;
      border-radius: 16px;
      background: #f4f8fd;
      box-shadow: 0 10px 24px rgba(12, 77, 162, .07);
    }

    .access-section-tab {
      position: relative;
      min-width: 0;
      min-height: 76px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 12px;
      border: 1px solid transparent;
      border-radius: 12px;
      background: transparent;
      color: var(--muted);
      text-align: left;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .access-section-tab:hover,
    .access-section-tab:focus-visible {
      background: #fff;
      border-color: #c7daef;
    }

    .access-section-tab.selected {
      border-color: #91b6e0;
      background: #fff;
      color: var(--mobil-blue-dark);
      box-shadow: 0 6px 16px rgba(12, 77, 162, .1);
    }

    .access-section-tab > svg {
      width: 25px;
      height: 25px;
      color: var(--mobil-blue);
    }

    .access-section-tab-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .access-section-tab-copy strong {
      color: inherit;
      font-size: .92rem;
      line-height: 1.15;
    }

    .access-section-tab-copy small {
      overflow: hidden;
      color: var(--muted);
      font-size: .73rem;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .access-section-tab-badge {
      min-width: 38px;
      padding: 5px 7px;
      border-radius: 999px;
      background: #e4effd;
      color: var(--mobil-blue-dark);
      font-size: .7rem;
      font-weight: 900;
      text-align: center;
      white-space: nowrap;
    }

    .access-section-panel {
      margin: 0 16px 16px;
    }

    .access-section-panel[hidden] {
      display: none !important;
    }

    .access-section-panel > form {
      display: block;
    }

    .access-section-panel .access-wizard-shell,
    .access-section-panel .access-filter-panel {
      margin-top: 0;
    }

    .access-section-panel .access-list {
      padding: 14px 0 0;
    }

    .advisor-standard-access-shell {
      display: grid;
      gap: 16px;
      padding: 18px;
      border: 1px solid #cbdcec;
      border-radius: 16px;
      background: linear-gradient(135deg, #f8fbff, #edf5ff);
      box-shadow: 0 10px 24px rgba(12, 77, 162, .06);
    }

    .advisor-standard-access-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .advisor-standard-access-head h3,
    .advisor-standard-access-head p {
      margin: 0;
    }

    .advisor-standard-access-head p {
      margin-top: 5px;
      max-width: 720px;
    }

    .advisor-standard-access-directory {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
    }

    .advisor-standard-access-card {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
      padding: 12px;
      border: 1px solid #c7daef;
      border-radius: 12px;
      background: #fff;
      color: var(--ink);
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

    .advisor-standard-access-card:hover,
    .advisor-standard-access-card:focus-visible {
      border-color: #75a7df;
      box-shadow: 0 7px 18px rgba(12, 77, 162, .12);
      outline: none;
      transform: translateY(-1px);
    }

    .advisor-standard-access-card > svg:first-child {
      width: 22px;
      height: 22px;
      color: var(--mobil-blue);
    }

    .advisor-standard-access-card span {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .advisor-standard-access-card strong {
      font-size: .88rem;
      line-height: 1.15;
    }

    .advisor-standard-access-card small {
      overflow: hidden;
      color: var(--muted);
      font-size: .72rem;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .advisor-standard-access-card > svg:last-child {
      width: 17px;
      height: 17px;
      color: var(--mobil-blue);
    }

    .advisor-standard-access-note {
      margin: 0;
      color: #52627a;
      font-size: .82rem;
      line-height: 1.45;
    }

    .access-advisor-standard-setup {
      display: grid;
      gap: 12px;
      padding: 15px;
      border: 1px solid #bcd5f0;
      border-radius: 14px;
      background: #f4f9ff;
    }

    .access-advisor-standard-setup[hidden] {
      display: none !important;
    }

    .access-advisor-standard-setup strong {
      color: var(--ink);
    }

    .access-advisor-standard-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .access-advisor-standard-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 9px;
      border-radius: 999px;
      background: #fff;
      color: var(--mobil-blue-dark);
      font-size: .78rem;
      font-weight: 850;
    }

    .access-advisor-standard-chip svg {
      width: 15px;
      height: 15px;
    }

    @media (max-width: 560px) {
      .access-section-selector {
        gap: 6px;
        margin: 12px;
        padding: 6px;
      }

      .access-section-tab {
        min-height: 78px;
        grid-template-columns: 1fr;
        gap: 5px;
        justify-items: center;
        padding: 9px 5px;
        text-align: center;
      }

      .access-section-tab-copy {
        justify-items: center;
      }

      .access-section-tab-copy strong {
        font-size: .78rem;
      }

      .access-section-tab-copy small {
        display: none;
      }

      .access-section-tab-badge {
        position: absolute;
        top: 6px;
        right: 6px;
        min-width: 24px;
        padding: 3px 5px;
        font-size: .62rem;
      }

      .access-section-panel {
        margin: 0 12px 12px;
      }

      .access-login-routes {
        grid-template-columns: 1fr;
      }

      .advisor-standard-access-shell {
        gap: 13px;
        padding: 14px;
      }

      .advisor-standard-access-head {
        display: grid;
      }

      .advisor-standard-access-directory {
        grid-template-columns: 1fr;
      }

      .advisor-standard-access-card {
        min-height: 58px;
      }
    }

    .access-admin-tools {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px 12px;
      padding-top: 6px;
      border-top: 1px solid #d8e8fb;
      font-size: .82rem;
      color: var(--muted);
    }

    .access-admin-tools .btn {
      padding: 8px 12px;
      min-height: 36px;
    }

    .whatsapp-setup-intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
      padding: 14px 16px;
      border: 1px solid #d8e1ec;
      border-radius: 8px;
      background: #f8fbff;
    }

    .whatsapp-setup-intro h3 {
      margin: 0 0 4px;
      color: var(--mobil-blue-dark);
    }

    .whatsapp-setup-intro p {
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
    }

    .whatsapp-setup-compact-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .whatsapp-setup-reference {
      border: 1px solid #d8e1ec;
      border-radius: 8px;
      background: #fff;
      padding: 10px 12px;
    }

    .whatsapp-setup-reference summary {
      cursor: pointer;
      font-weight: 800;
      color: var(--mobil-blue-dark);
    }

    .access-workshop-field {
      border: 1px solid #d8e1ec;
      border-radius: 8px;
      background: #fbfdff;
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .access-workshop-field-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .access-workshop-field-head label {
      min-width: 0;
    }

    .access-workshop-field-head .btn {
      flex: 0 0 auto;
    }

    @media (max-width: 560px) {
      .access-workshop-field-head {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    .access-workshop-field select {
      min-height: 132px;
    }

    .customer-home-panel {
      background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
      overflow: visible;
    }

    .customer-home-page {
      padding: 18px;
      display: grid;
      gap: 16px;
    }

    .customer-dashboard-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(292px, 340px);
      gap: 16px;
      align-items: start;
    }

    .customer-dashboard-layout.customer-dashboard-layout-single {
      grid-template-columns: minmax(0, 1fr);
    }

    .customer-dashboard-main,
    .customer-dashboard-side {
      display: grid;
      align-content: start;
      gap: 16px;
      min-width: 0;
    }

    .customer-dashboard-side {
      align-self: start;
      position: sticky;
      top: 86px;
      z-index: 20;
    }

    .customer-home-hero {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      align-items: stretch;
      border: 1px solid rgba(12, 77, 162, .16);
      border-radius: 8px;
      padding: 18px;
      background:
        linear-gradient(135deg, rgba(12, 77, 162, .96), rgba(0, 59, 122, .96)),
        #0c4da2;
      color: #fff;
      box-shadow: 0 18px 42px rgba(12, 77, 162, .18);
      overflow: hidden;
    }

    .customer-home-main-card {
      min-height: 210px;
    }

    .customer-home-welcome {
      display: grid;
      align-content: center;
      gap: 10px;
      min-width: 0;
    }

    .customer-home-kicker {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      padding: 7px 10px;
      background: rgba(255, 255, 255, .16);
      color: #fff;
      font-weight: 800;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .customer-home-welcome h2 {
      margin: 0;
      font-size: clamp(1.65rem, 4vw, 2.9rem);
      line-height: 1;
      color: #fff;
    }

    .customer-home-welcome p {
      margin: 0;
      max-width: 58ch;
      color: rgba(255, 255, 255, .86);
      font-size: 1rem;
      line-height: 1.45;
    }

    .loyalty-points-panel {
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 8px;
      min-height: 206px;
      border-radius: 8px;
      padding: 18px;
      color: var(--mobil-red-dark);
      background: #fff;
      box-shadow: 0 18px 38px rgba(0, 22, 54, .22);
      text-align: center;
    }

    .loyalty-sticky-card {
      position: sticky;
      top: 0;
      align-self: start;
      z-index: 1;
    }

    .loyalty-sticky-card .loyalty-points-panel {
      border: 1px solid rgba(237, 27, 47, .12);
      box-shadow: 0 16px 34px rgba(24, 33, 31, .12);
    }

    .loyalty-points-panel svg {
      color: var(--mobil-red);
      width: 42px;
      height: 42px;
    }

    .loyalty-points-panel strong {
      font-size: clamp(2.15rem, 7vw, 3.6rem);
      line-height: .95;
      letter-spacing: 0;
      color: var(--mobil-red);
    }

    .loyalty-points-panel span {
      font-size: 1.05rem;
      font-weight: 850;
      color: var(--mobil-red-dark);
    }

    .loyalty-points-panel small {
      color: var(--muted);
      font-weight: 700;
    }

    .loyalty-points-panel .btn {
      margin-top: 6px;
      min-height: 34px;
      padding: 0 10px;
      font-size: .86rem;
    }

    .mobile-sticky-loyalty-bar {
      display: none;
      position: sticky;
      top: 76px;
      z-index: 18;
      width: max-content;
      max-width: min(100%, 230px);
      margin-left: auto;
      justify-self: end;
      min-height: 38px;
      border: 1px solid rgba(237, 27, 47, .18);
      border-radius: 999px;
      padding: 6px 10px;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      color: var(--mobil-red-dark);
      background: rgba(255, 255, 255, .97);
      box-shadow: 0 10px 24px rgba(24, 33, 31, .12);
      backdrop-filter: blur(10px);
    }

    .mobile-sticky-loyalty-bar > span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      font-weight: 850;
      white-space: nowrap;
    }

    .mobile-sticky-loyalty-bar strong {
      color: var(--mobil-red);
      font-size: 1rem;
      line-height: 1;
      white-space: nowrap;
    }

    .mobile-sticky-loyalty-bar small {
      color: var(--muted);
      font-weight: 750;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mobile-sticky-loyalty-bar svg {
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      color: var(--mobil-red);
    }

    .customer-home-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
      gap: 16px;
      align-items: start;
    }

    .customer-home-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 16px;
      display: grid;
      gap: 12px;
      min-width: 0;
      box-shadow: 0 8px 22px rgba(24, 33, 31, .05);
    }

    .customer-home-card h3 {
      margin: 0;
      font-size: 1.12rem;
      color: var(--mobil-blue-dark);
    }

    .customer-app-section {
      display: grid;
      gap: 12px;
    }

    .customer-section-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-end;
    }

    .customer-section-head p {
      margin: 4px 0 0;
    }

    .service-recommendation-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .customer-service-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .customer-service-card {
      position: relative;
      display: grid;
      grid-template-rows: auto auto 1fr auto auto;
      gap: 10px;
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(24, 33, 31, .04);
    }

    .customer-service-card.recommended {
      border-color: rgba(12, 77, 162, .42);
      box-shadow: 0 0 0 3px rgba(12, 77, 162, .08), 0 8px 20px rgba(24, 33, 31, .05);
    }

    .customer-service-icon {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: var(--mobil-blue);
      background: #eef5ff;
    }

    .customer-service-icon svg {
      width: 22px;
      height: 22px;
    }

    .customer-service-card h4 {
      margin: 0;
      color: var(--ink);
      font-size: .98rem;
      line-height: 1.2;
    }

    .customer-service-card p {
      margin: 0;
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.35;
    }

    .customer-service-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .customer-service-meta .mini {
      border-radius: 8px;
      padding: 8px;
      background: #f8fafc;
      min-width: 0;
    }

    .customer-service-meta span {
      display: block;
      color: var(--muted);
      font-size: .68rem;
      font-weight: 850;
      text-transform: uppercase;
    }

    .customer-service-meta strong {
      display: block;
      color: var(--ink);
      font-size: .84rem;
      overflow-wrap: anywhere;
    }

    .customer-booking-panel {
      border-color: rgba(12, 77, 162, .22);
    }

    .customer-service-builder-backdrop {
      position: fixed;
      inset: 0;
      z-index: 92;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(5, 24, 47, .62);
      backdrop-filter: blur(3px);
    }

    .customer-service-builder-backdrop[hidden] {
      display: none;
    }

    .customer-service-builder-modal {
      width: min(760px, 100%);
      max-height: calc(100dvh - 36px);
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(12, 77, 162, .24);
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 24px 70px rgba(0, 20, 45, .28);
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
    }

    .customer-service-builder-head {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 44px;
      gap: 10px;
      align-items: center;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
    }

    .customer-service-builder-head h2 {
      margin: 0;
      font-size: 1.15rem;
      text-align: center;
    }

    .customer-service-builder-head button {
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 999px;
      display: grid;
      place-items: center;
    }

    .customer-service-builder-steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--line);
      background: #f8fafc;
    }

    .customer-service-builder-step {
      min-width: 0;
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 7px 8px;
      color: var(--muted);
      background: #eef2f6;
      font-size: .76rem;
      font-weight: 850;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .customer-service-builder-step.active {
      color: var(--mobil-blue-dark);
      border-color: rgba(12, 77, 162, .22);
      background: #e6f0ff;
    }

    .customer-service-builder-step.complete {
      color: #087a43;
      background: #e9f8f0;
    }

    .customer-service-builder-body {
      min-width: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 16px;
      display: grid;
      align-content: start;
      gap: 14px;
    }

    .customer-service-builder-title {
      display: grid;
      gap: 4px;
    }

    .customer-service-builder-title h3,
    .customer-service-builder-title p {
      margin: 0;
    }

    .customer-service-builder-title h3 {
      font-size: 1.2rem;
    }

    .customer-service-choice-list,
    .customer-product-choice-list,
    .customer-service-builder-cart {
      display: grid;
      gap: 9px;
    }

    .customer-service-choice,
    .customer-product-choice {
      width: 100%;
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      background: #fff;
      color: var(--ink);
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      gap: 11px;
      align-items: center;
      text-align: left;
    }

    .customer-service-choice:hover,
    .customer-service-choice:focus-visible,
    .customer-product-choice:hover,
    .customer-product-choice:focus-visible {
      border-color: var(--mobil-blue);
      background: #f6faff;
    }

    .customer-service-choice-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      color: var(--mobil-blue);
      background: #eaf3ff;
    }

    .customer-product-choice-image {
      width: 48px;
      height: 48px;
      min-width: 0;
      border: 1px solid #d8e2ee;
      border-radius: 10px;
      overflow: hidden;
      display: grid;
      place-items: center;
      background: #fff;
    }

    .customer-product-choice-image img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }

    .customer-product-choice-image .customer-service-choice-icon {
      width: 100%;
      height: 100%;
      border-radius: 0;
    }

    .customer-service-choice-copy,
    .customer-product-choice-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .customer-service-choice-copy strong,
    .customer-product-choice-copy strong {
      line-height: 1.2;
    }

    .customer-service-choice-copy span,
    .customer-product-choice-copy span {
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.3;
    }

    .customer-product-choice-price {
      color: var(--mobil-blue-dark);
      font-size: .84rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .customer-service-builder-search {
      position: sticky;
      top: -16px;
      z-index: 2;
      padding: 4px 0 8px;
      background: #fff;
    }

    .customer-service-builder-search input {
      width: 100%;
    }

    .customer-service-builder-cart-row {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      display: grid;
      gap: 9px;
      background: #fff;
    }

    .customer-service-builder-cart-head,
    .customer-service-builder-price-row,
    .customer-service-builder-total {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
    }

    .customer-service-builder-cart-head strong,
    .customer-service-builder-price-row span:first-child {
      min-width: 0;
    }

    .customer-service-builder-price-lines {
      display: grid;
      gap: 5px;
      padding-top: 8px;
      border-top: 1px dashed var(--line);
    }

    .customer-service-builder-price-row {
      color: var(--muted);
      font-size: .84rem;
    }

    .customer-service-builder-price-row strong,
    .customer-service-builder-total strong {
      color: var(--ink);
      white-space: nowrap;
    }

    .customer-service-builder-total {
      border: 1px solid rgba(12, 77, 162, .18);
      border-radius: 12px;
      padding: 12px;
      background: #eef5ff;
    }

    .customer-service-builder-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .customer-service-builder-actions .btn {
      width: 100%;
    }

    .customer-service-builder-booking-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .customer-service-builder-booking-grid .wide {
      grid-column: 1 / -1;
    }

    .customer-service-builder-branch {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 11px;
      display: grid;
      gap: 3px;
      background: #f8fafc;
    }

    body.customer-service-builder-open {
      overflow: hidden;
    }

    .booking-steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .booking-step {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 9px;
      color: var(--ink);
      background: #fbfcfd;
      font-size: .86rem;
      font-weight: 800;
    }

    .booking-step span {
      flex: 0 0 auto;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--mobil-blue);
      font-size: .8rem;
      line-height: 1;
    }

    .booking-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .booking-branch-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      display: grid;
      gap: 8px;
      background: #f8fafc;
    }

    .booking-branch-card strong {
      color: var(--mobil-blue-dark);
    }

    .booking-branch-card .actions {
      margin-top: 0;
    }

    .booking-status {
      min-height: 22px;
      font-weight: 750;
    }

    .customer-selected-vehicle-strip {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      border: 1px solid rgba(12, 77, 162, .18);
      border-radius: 8px;
      padding: 12px;
      background: #fff;
      box-shadow: 0 8px 22px rgba(24, 33, 31, .05);
    }

    .customer-selected-vehicle-strip img {
      width: 76px;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--mobil-silver);
    }

    .customer-selected-vehicle-strip h3,
    .vehicle-guided-registration h3,
    .oil-package-card h3 {
      margin: 0;
      color: var(--mobil-blue-dark);
    }

    .customer-service-category-grid {
      display: grid;
      grid-template-columns: repeat(var(--customer-service-desktop-columns, 5), minmax(0, 1fr));
      gap: 10px;
    }

    .customer-service-category {
      min-height: 82px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 8px;
      padding: 10px 8px;
      text-align: center;
      font-weight: 820;
      box-shadow: 0 6px 16px rgba(24, 33, 31, .04);
    }

    .customer-service-category svg {
      width: 24px;
      height: 24px;
      color: var(--mobil-blue);
    }

    body.customer-app-mode .customer-home-card.customer-app-section {
      --customer-service-mobile-columns: 3;
      --customer-service-desktop-columns: 5;
      --customer-service-icon-size: 78px;
      --customer-service-icon-label-width: 88px;
      padding: 14px 12px 16px;
      border-color: rgba(12, 77, 162, .12);
      box-shadow: 0 6px 18px rgba(24, 33, 31, .04);
    }

    .customer-ios-install-reminder,
    .customer-android-install-reminder {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
      margin: 0 0 10px;
      padding: 10px;
      border: 1px solid #b9d6f5;
      border-radius: 12px;
      background: #f3f8ff;
      color: #173552;
    }

    .customer-ios-install-reminder-icon,
    .customer-android-install-reminder-icon {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 10px;
      background: #dcecff;
      color: var(--mobil-blue);
    }

    .customer-ios-install-reminder-copy,
    .customer-android-install-reminder-copy {
      min-width: 0;
    }

    .customer-ios-install-reminder-copy strong,
    .customer-ios-install-reminder-copy span,
    .customer-android-install-reminder-copy strong,
    .customer-android-install-reminder-copy span {
      display: block;
    }

    .customer-ios-install-reminder-copy strong,
    .customer-android-install-reminder-copy strong {
      font-size: .8rem;
      line-height: 1.2;
    }

    .customer-ios-install-reminder-copy span,
    .customer-android-install-reminder-copy span {
      margin-top: 2px;
      color: #58718c;
      font-size: .7rem;
      line-height: 1.3;
    }

    .customer-ios-install-reminder .btn,
    .customer-android-install-reminder .btn {
      min-height: 34px;
      padding: 6px 8px;
      font-size: .72rem;
    }

    .customer-android-install-reminder {
      grid-template-columns: 34px minmax(0, 1fr) auto auto;
    }

    .customer-android-install-reminder .btn {
      white-space: nowrap;
    }

    @media (max-width: 560px) {
      .customer-android-install-reminder {
        grid-template-columns: 34px minmax(0, 1fr);
      }

      .customer-android-install-reminder .btn {
        grid-column: 1 / -1;
        width: 100%;
      }
    }

    @media (max-width: 420px) {
      .customer-ios-install-reminder,
      .customer-android-install-reminder {
        grid-template-columns: 34px minmax(0, 1fr);
      }

      .customer-ios-install-reminder .btn,
      .customer-android-install-reminder .btn {
        grid-column: 1 / -1;
        width: 100%;
      }
    }

    body.customer-app-mode .customer-service-category-grid {
      gap: 14px 8px;
    }

    body.customer-app-mode .customer-service-featured-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px 6px;
    }

    body.customer-app-mode .customer-service-category {
      min-height: 94px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      padding: 4px 2px;
      gap: 7px;
      align-content: start;
      font-size: .78rem;
      line-height: 1.12;
    }

    body.customer-app-mode .customer-service-category:active {
      transform: translateY(1px);
      opacity: .82;
    }

    body.customer-app-mode .customer-service-category > i,
    body.customer-app-mode .customer-service-category > .service-catalogue-icon {
      width: var(--customer-service-icon-size, 78px);
      height: var(--customer-service-icon-size, 78px);
      border-radius: calc(var(--customer-service-icon-size, 78px) * .24);
      display: grid;
      place-items: center;
      background: #eef5ff;
      box-shadow: 0 8px 18px rgba(12, 77, 162, .08);
      overflow: hidden;
    }

    body.customer-app-mode .customer-service-category > i {
      padding: 15px;
      color: var(--mobil-blue);
    }

    body.customer-app-mode .customer-service-category .service-catalogue-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      padding: 0;
      border-radius: inherit;
      mix-blend-mode: multiply;
    }

    body.customer-app-mode .service-catalogue-icon img.is-brand-logo {
      object-fit: contain;
      padding: 9px;
      background: #fff;
      mix-blend-mode: normal;
    }

    body.customer-app-mode .customer-service-category .service-catalogue-icon svg {
      width: calc(var(--customer-service-icon-size, 78px) * .5);
      height: calc(var(--customer-service-icon-size, 78px) * .5);
    }

    body.customer-app-mode .customer-service-category span:last-child {
      display: block;
      width: min(var(--customer-service-icon-label-width, 88px), 100%);
      margin: 0 auto;
      font-weight: 900;
      color: var(--ink);
      overflow-wrap: anywhere;
    }

    body.customer-app-mode .customer-service-featured-grid .customer-service-category > i,
    body.customer-app-mode .customer-service-featured-grid .customer-service-category > .service-catalogue-icon {
      width: min(var(--customer-service-icon-size, 78px), 68px);
      height: min(var(--customer-service-icon-size, 78px), 68px);
    }

    .customer-service-all-launcher {
      width: 100%;
      min-height: 58px;
      margin-top: 14px;
      border: 1px solid rgba(12, 77, 162, .18);
      border-radius: 14px;
      padding: 10px 12px;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) 34px;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      background: linear-gradient(135deg, #f7fbff, #edf5ff);
      text-align: left;
      box-shadow: 0 7px 18px rgba(12, 77, 162, .06);
    }

    .customer-service-all-launcher > i:first-child {
      width: 42px;
      height: 42px;
      padding: 10px;
      border-radius: 12px;
      color: var(--mobil-blue);
      background: #fff;
    }

    .customer-service-all-launcher strong,
    .customer-service-all-launcher small {
      display: block;
    }

    .customer-service-all-launcher strong {
      font-size: .95rem;
    }

    .customer-service-all-launcher small {
      margin-top: 2px;
      color: var(--muted);
      font-weight: 720;
    }

    .customer-service-all-launcher > i:last-child {
      width: 34px;
      height: 34px;
      padding: 8px;
      border-radius: 999px;
      color: #fff;
      background: var(--mobil-blue);
    }

    .vehicle-guided-registration {
      display: grid;
      gap: 14px;
      border: 1px solid rgba(12, 77, 162, .18);
      border-radius: 8px;
      padding: 14px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
    }

    .vehicle-stepper {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .vehicle-step {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px;
      background: #fff;
      color: var(--muted);
      font-weight: 830;
      font-size: .82rem;
    }

    .vehicle-step svg {
      width: 18px;
      height: 18px;
      color: #8a98a8;
    }

    .vehicle-step.active {
      border-color: rgba(12, 77, 162, .48);
      color: var(--mobil-blue-dark);
      box-shadow: 0 0 0 3px rgba(12, 77, 162, .08);
    }

    .vehicle-step.done svg {
      color: #0a7a55;
    }

    .vehicle-picker-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 28px;
      gap: 10px;
    }

    .vehicle-popular-grid,
    .vehicle-option-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .vehicle-pick-button {
      min-height: 54px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 9px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      color: var(--ink);
      text-align: left;
      font-weight: 820;
    }

    .vehicle-pick-button.active {
      border-color: var(--mobil-blue);
      background: #eef5ff;
      color: var(--mobil-blue-dark);
    }

    .vehicle-brand-logo {
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: #f3f6f8;
      color: var(--mobil-blue-dark);
      font-weight: 900;
      font-size: .76rem;
      border: 1px solid var(--line);
    }

    .vehicle-alpha-index {
      position: sticky;
      top: 116px;
      display: grid;
      gap: 2px;
      align-self: start;
    }

    .vehicle-alpha-index button {
      width: 26px;
      min-height: 22px;
      padding: 0;
      border-radius: 6px;
      border: 0;
      color: var(--mobil-blue);
      background: transparent;
      font-size: .72rem;
      font-weight: 850;
    }

    .vehicle-alpha-index button:hover {
      background: #eef5ff;
    }

    .vehicle-option-section {
      display: grid;
      gap: 8px;
    }

    .vehicle-option-section h4 {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: .78rem;
      text-transform: uppercase;
    }

    .vehicle-confirm-card,
    .scan-capture-row {
      border: 1px dashed rgba(12, 77, 162, .28);
      border-radius: 8px;
      padding: 12px;
      background: #fbfcfd;
      display: grid;
      gap: 10px;
    }

    .scan-capture-row {
      grid-template-columns: minmax(0, 1fr) minmax(220px, .6fr);
      align-items: end;
    }

    .scan-capture-note {
      color: var(--muted);
      font-size: .88rem;
      font-weight: 720;
    }

    .oil-package-section {
      display: grid;
      gap: 12px;
      margin-bottom: 16px;
    }

    .oil-package-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .oil-package-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      display: grid;
      overflow: hidden;
      box-shadow: 0 8px 22px rgba(24, 33, 31, .05);
    }

    .oil-package-card img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: contain;
      background: #f8fafc;
      border-bottom: 1px solid var(--line);
      padding: 10px;
    }

    .oil-package-body {
      display: grid;
      gap: 10px;
      padding: 12px;
    }

    .package-price-line {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
    }

    .package-price-line strong {
      color: var(--mobil-red);
      font-size: 1.35rem;
      line-height: 1;
    }

    .package-price-line del {
      color: var(--muted);
      font-weight: 750;
    }

    .service-package-modal {
      width: min(680px, 94vw);
      max-height: min(760px, 90vh);
      overflow: auto;
      padding-bottom: 78px;
    }

    .customer-product-detail-modal {
      width: min(680px, 100%);
      max-height: calc(100dvh - 20px);
      overflow: hidden;
      padding: 0;
      display: flex;
      flex-direction: column;
    }

    .customer-product-detail-modal .history-card-head {
      padding: 10px 14px;
      border-bottom: 1px solid var(--line);
      background: #fff;
      align-items: center;
    }

    .customer-product-detail-modal .history-card-head h2 {
      margin: 0;
      font-size: 1.18rem;
      line-height: 1.16;
      overflow-wrap: anywhere;
    }

    .customer-product-detail-modal .history-card-head .sub {
      margin-top: 3px;
      font-size: .84rem;
    }

    #customerProductDetailMeta {
      display: flex;
      align-items: baseline;
      gap: 6px;
      flex-wrap: wrap;
    }

    .customer-product-detail-header-package {
      color: var(--muted);
      font-weight: 850;
    }

    .customer-product-detail-header-separator {
      color: #aab6c4;
      font-weight: 850;
    }

    .customer-product-detail-header-price {
      color: var(--mobil-red);
      font-size: 1.24rem;
      font-weight: 950;
      line-height: 1;
    }

    .customer-product-detail-scroll {
      overflow: auto;
      padding: 10px 12px;
      display: grid;
      gap: 9px;
    }

    .customer-product-detail-hero {
      width: 100%;
      height: min(220px, 34dvh);
      object-fit: contain;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      padding: 8px;
    }

    .customer-product-detail-title {
      display: grid;
      gap: 6px;
    }

    .customer-product-detail-summary {
      margin: 0;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.35;
      font-weight: 750;
    }

    .customer-product-detail-price {
      color: var(--mobil-red);
      font-size: 1.08rem;
      font-weight: 950;
      line-height: 1;
    }

    .customer-product-detail-specs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .customer-product-detail-spec {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfdff;
      padding: 7px 8px;
      min-width: 0;
    }

    .customer-product-detail-spec span {
      display: block;
      color: var(--muted);
      font-size: .68rem;
      font-weight: 850;
      text-transform: uppercase;
    }

    .customer-product-detail-spec strong {
      display: block;
      margin-top: 2px;
      color: var(--ink);
      font-size: .86rem;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .customer-product-detail-note {
      border: 1px solid #dbe7f5;
      border-radius: 8px;
      background: #f8fbff;
      padding: 9px;
      color: var(--muted);
      font-weight: 750;
      font-size: .88rem;
      line-height: 1.35;
    }

    .customer-product-detail-actions {
      display: grid;
      grid-template-columns: minmax(0, .78fr) minmax(0, 1.08fr);
      gap: 8px;
      padding: 8px 12px 10px;
      border-top: 1px solid var(--line);
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 -8px 22px rgba(24, 33, 31, .08);
    }

    .customer-product-detail-actions .btn {
      min-height: 38px;
      padding: 0 10px;
      font-size: .9rem;
      border-radius: 8px;
    }

    .customer-product-detail-actions .btn svg {
      width: 18px;
      height: 18px;
    }

    .service-package-detail {
      display: grid;
      gap: 12px;
    }

    .service-package-hero-image {
      width: 100%;
      max-height: 280px;
      object-fit: contain;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      padding: 10px;
    }

    .service-package-sticky-bar {
      position: sticky;
      bottom: -1px;
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
      gap: 8px;
      margin: 8px -18px -18px;
      padding: 10px 18px;
      border-top: 1px solid var(--line);
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 -8px 22px rgba(24, 33, 31, .08);
    }

    .customer-floating-whatsapp {
      position: fixed;
      right: 18px;
      bottom: 88px;
      z-index: 80;
      border: 0;
      border-radius: 999px;
      width: 48px;
      height: 48px;
      min-height: 46px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: #0a7a55;
      box-shadow: 0 14px 28px rgba(0, 88, 56, .22);
      font-weight: 900;
    }

    .customer-floating-whatsapp svg {
      width: 20px;
      height: 20px;
    }

    .customer-floating-whatsapp span {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    body.customer-app-mode .bottom-nav button[data-tab="product-catalogue"],
    body.customer-app-mode .bottom-nav button[data-tab="service-catalogue"],
    body.customer-app-mode .bottom-nav button[data-tab="customer-service-history"],
    body.customer-app-mode .bottom-nav button[data-tab="customer-service-summary"],
    body.customer-app-mode .bottom-nav button[data-tab="vehicles"] {
      display: none;
    }

    body.customer-app-mode .app-sidebar .nav button[data-tab="service-catalogue"] {
      display: none;
    }

    body.customer-app-mode .bottom-nav {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    body.customer-app-mode .bottom-nav button[data-tab="customer-home"] {
      order: 1;
    }

    body.customer-app-mode .bottom-nav button[data-tab="workshop-locations"] {
      order: 2;
    }

    body.customer-app-mode .bottom-nav button[data-tab="customer-offers"] {
      order: 3;
    }

    body.customer-app-mode .bottom-nav button[data-tab="loyalty-program"] {
      order: 4;
    }

    body.customer-app-mode .bottom-nav button[data-tab="customer-profile"] {
      order: 5;
    }

    .customer-actions-mobile {
      display: none;
    }

    .customer-dashboard-side .customer-home-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-vehicle-showcase {
      display: grid;
      grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
      gap: 16px;
      align-items: center;
    }

    .customer-vehicle-showcase img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--mobil-silver);
    }

    .customer-vehicle-showcase h2 {
      margin: 0;
      font-size: clamp(1.5rem, 4vw, 2.35rem);
      line-height: 1;
      color: var(--ink);
    }

    .customer-vehicle-carousel-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-end;
    }

    .customer-vehicle-carousel-head p {
      margin: 4px 0 0;
    }

    .swipe-hint {
      color: var(--muted);
      font-size: .88rem;
      font-weight: 750;
      white-space: nowrap;
    }

    .customer-vehicle-carousel {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(290px, 390px);
      gap: 12px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      padding: 2px 2px 10px;
      scrollbar-width: thin;
      scrollbar-color: rgba(12, 77, 162, .36) transparent;
    }

    .customer-vehicle-carousel::-webkit-scrollbar {
      height: 8px;
    }

    .customer-vehicle-carousel::-webkit-scrollbar-thumb {
      background: rgba(12, 77, 162, .36);
      border-radius: 999px;
    }

    .customer-vehicle-swipe-card {
      scroll-snap-align: start;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      display: grid;
      gap: 10px;
      padding: 10px;
      min-width: 0;
    }

    .customer-vehicle-swipe-card.active {
      border-color: var(--mobil-blue);
      box-shadow: 0 0 0 3px rgba(12, 77, 162, .12);
    }

    .customer-vehicle-swipe-card img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--mobil-silver);
    }

    .customer-vehicle-card-body {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .customer-vehicle-card-body .badges {
      gap: 6px;
    }

    .customer-vehicle-card-body .badge {
      padding: 6px 10px;
      font-size: .78rem;
      line-height: 1;
    }

    .customer-vehicle-card-body h2 {
      margin: 0;
      color: var(--ink);
      font-size: 1.55rem;
      line-height: 1;
    }

    .customer-vehicle-card-body .sub {
      font-size: .9rem;
      line-height: 1.25;
    }

    .customer-vehicle-card-mini {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .customer-vehicle-card-mini .mini {
      min-height: 0;
      padding: 9px 10px;
      border-radius: 8px;
      background: #f8fafc;
    }

    .customer-vehicle-card-mini .mini.wide {
      grid-column: 1 / -1;
    }

    .customer-vehicle-card-mini .mini span {
      display: block;
      font-size: .68rem;
      line-height: 1.15;
      letter-spacing: .04em;
      text-transform: uppercase;
      font-weight: 850;
      color: #687684;
    }

    .customer-vehicle-card-mini .mini strong {
      display: block;
      margin-top: 3px;
      font-size: .92rem;
      line-height: 1.16;
      color: var(--ink);
    }

    .customer-vehicle-card-mini .mini.wide strong {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .customer-home-rewards-strip {
      width: 100%;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) 34px;
      gap: 11px;
      align-items: center;
      border: 1px solid #c5d8ef;
      border-radius: 16px;
      padding: 11px 12px;
      background: #fff;
      color: var(--ink);
      box-shadow: 0 8px 20px rgba(12, 77, 162, .08);
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .customer-home-rewards-strip:hover,
    .customer-home-rewards-strip:focus-visible {
      border-color: #75a8e3;
      background: #f7fbff;
    }

    .customer-home-rewards-icon,
    .customer-home-rewards-arrow {
      display: grid;
      place-items: center;
      color: #0b56ac;
      background: #eaf3ff;
    }

    .customer-home-rewards-icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
    }

    .customer-home-rewards-arrow {
      width: 34px;
      height: 34px;
      border-radius: 999px;
    }

    .customer-home-rewards-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .customer-home-rewards-copy small {
      color: #0b56ac;
      font-size: .66rem;
      font-weight: 950;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .customer-home-rewards-copy strong {
      color: var(--ink);
      font-size: 1rem;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .customer-home-rewards-copy span {
      color: var(--muted);
      font-size: .78rem;
      line-height: 1.25;
    }

    .customer-workshop-status {
      border: 1px solid #cfe0dc;
      border-radius: 8px;
      background: #f8fbff;
      padding: 8px 10px;
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
      min-width: 0;
    }

    .customer-workshop-status strong {
      color: var(--ink);
      font-size: .84rem;
      line-height: 1.2;
      text-align: right;
      min-width: 0;
    }

    .customer-workshop-status.compact {
      padding: 7px 9px;
      margin-top: 6px;
    }

    .customer-workshop-status-ok {
      background: #f0fdf4;
      border-color: #bbf7d0;
    }

    .customer-vehicle-card-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .customer-vehicle-card-actions .btn {
      min-height: 42px;
      padding: 9px 10px;
      font-size: .94rem;
    }

    .customer-home-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .customer-action-button {
      min-height: 94px;
      border: 1px solid #dce4ec;
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 8px;
      text-align: center;
      font-weight: 800;
      padding: 10px;
    }

    .customer-action-button svg {
      width: 28px;
      height: 28px;
      color: var(--mobil-blue);
    }

    .customer-action-button:hover,
    .customer-action-button.active {
      border-color: rgba(237, 27, 47, .35);
      background: #fff7f8;
      color: var(--mobil-red-dark);
    }

    .customer-home-mini-list {
      display: grid;
      gap: 10px;
    }

    .customer-home-mini-row {
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px;
      display: grid;
      gap: 4px;
      background: #fbfcfd;
    }

    .customer-home-mini-row strong {
      color: var(--ink);
      overflow-wrap: anywhere;
    }

    .compact-head {
      padding: 0;
      border: 0;
      margin-bottom: 4px;
    }

    .compact-head h3 {
      font-size: 1rem;
    }

    .customer-vehicle-list {
      display: grid;
      gap: 8px;
    }

    .customer-garage-card {
      gap: 12px;
    }

    .customer-account-settings {
      gap: 12px;
      background: #fbfdff;
    }

    .customer-account-settings > summary {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      cursor: pointer;
      color: var(--ink);
    }

    .customer-account-settings > summary::-webkit-details-marker {
      display: none;
    }

    .customer-account-settings > summary span {
      display: grid;
      gap: 2px;
    }

    .customer-account-settings > summary strong {
      font-size: .98rem;
    }

    .customer-account-settings > summary small {
      color: var(--muted);
      font-weight: 650;
      line-height: 1.25;
    }

    .customer-account-settings > summary svg {
      color: var(--mobil-blue);
      transition: transform .18s ease;
    }

    .customer-account-settings[open] > summary svg {
      transform: rotate(180deg);
    }

    .vehicle-form-section {
      border: 1px solid #dfe8f4;
      border-radius: 8px;
      background: #fbfdff;
      padding: 12px;
      display: grid;
      gap: 10px;
    }

    .vehicle-form-section h3,
    .vehicle-form-section p {
      margin: 0;
    }

    .customer-vehicle-profile-list {
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 12px;
    }

    .customer-vehicle-profile-card {
      border: 1px solid #d7e2ef;
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
      display: grid;
      min-width: 0;
      box-shadow: 0 8px 18px rgba(15, 39, 74, .04);
    }

    .customer-vehicle-profile-card.selected {
      border-color: var(--mobil-blue);
      box-shadow: 0 0 0 3px rgba(12, 77, 162, .1), 0 8px 18px rgba(15, 39, 74, .04);
    }

    .customer-vehicle-profile-image {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      background: var(--mobil-silver);
      border-bottom: 1px solid #dfe8f4;
    }

    .customer-vehicle-profile-body {
      padding: 12px;
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .customer-vehicle-profile-head {
      display: grid;
      gap: 6px;
    }

    .customer-vehicle-profile-title {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: start;
    }

    .customer-vehicle-profile-title h3 {
      margin: 0;
      color: var(--ink);
      font-size: 1.22rem;
      line-height: 1.05;
      overflow-wrap: anywhere;
    }

    .customer-vehicle-profile-title .badge {
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .customer-vehicle-profile-model {
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .customer-vehicle-profile-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .customer-vehicle-profile-grid.compact {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .customer-vehicle-profile-mini {
      border: 1px solid #e2eaf5;
      border-radius: 8px;
      background: #fbfdff;
      padding: 8px 9px;
      min-height: 54px;
      display: grid;
      align-content: start;
      gap: 3px;
    }

    .customer-vehicle-profile-mini span {
      color: #65758b;
      font-size: .62rem;
      font-weight: 850;
      line-height: 1.1;
      text-transform: uppercase;
    }

    .customer-vehicle-profile-mini strong {
      color: var(--ink);
      font-size: .82rem;
      line-height: 1.14;
      overflow-wrap: anywhere;
    }

    .customer-vehicle-profile-mini.pending strong {
      color: #6b7280;
      font-weight: 750;
    }

    .customer-vehicle-profile-section-title {
      margin: 2px 0 -2px;
      color: var(--mobil-blue-dark);
      font-size: .78rem;
      font-weight: 850;
      text-transform: uppercase;
    }

    .customer-vehicle-profile-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .customer-vehicle-profile-actions .btn {
      justify-content: center;
      min-height: 38px;
      padding: 8px 10px;
    }

    .customer-vehicle-profile-empty {
      display: grid;
      gap: 10px;
      text-align: center;
    }

    .customer-vehicle-row {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: #fff;
    }

    .customer-vehicle-row img,
    .vehicle-photo-editor img {
      width: 96px;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #f3f6f4;
    }

    .customer-vehicle-row-meta {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .customer-vehicle-row-title {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 8px;
      align-items: baseline;
    }

    .customer-vehicle-row-title strong {
      font-size: .98rem;
      line-height: 1.15;
    }

    .customer-vehicle-row-title span {
      color: var(--muted);
      font-size: .78rem;
      line-height: 1.15;
    }

    .customer-vehicle-row-facts {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
    }

    .customer-vehicle-row-facts div {
      border: 1px solid #e4ecf7;
      border-radius: 7px;
      background: #fbfdff;
      padding: 5px 6px;
      min-height: 40px;
    }

    .customer-vehicle-row-facts span {
      display: block;
      color: #526985;
      font-size: .6rem;
      font-weight: 760;
      line-height: 1.05;
    }

    .customer-vehicle-row-facts strong {
      display: block;
      margin-top: 2px;
      font-size: .74rem;
      line-height: 1.1;
      overflow-wrap: anywhere;
    }

    .customer-vehicle-row-actions {
      display: grid;
      gap: 6px;
      justify-items: end;
    }

    .vehicle-photo-editor {
      display: grid;
      grid-template-columns: 160px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }

    .vehicle-photo-editor img {
      width: 160px;
    }

    .pending-photo-review {
      border: 1px solid rgba(176, 45, 28, .28);
      border-radius: 8px;
      padding: 12px;
      display: grid;
      gap: 10px;
      background: #fff7f5;
      margin-top: 12px;
    }

    .pending-photo-review h4,
    .pending-photo-review p {
      margin: 0;
    }

    .pending-photo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
    }

    .pending-photo-grid figure {
      margin: 0;
      display: grid;
      gap: 6px;
    }

    .pending-photo-grid img {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #eaf2ff;
    }

    .service-photo-preview {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 170px));
      gap: 10px;
    }

    .service-photo-preview figure {
      margin: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 8px;
      display: grid;
      gap: 6px;
    }

    .service-photo-preview img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 6px;
      background: #eaf2ff;
    }

    .service-photo-preview figcaption {
      color: var(--muted);
      font-size: .75rem;
      overflow-wrap: anywhere;
    }

    .payment-workspace {
      padding: 16px;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
      gap: 16px;
      align-items: start;
    }

    .payment-record-list {
      display: grid;
      gap: 10px;
      margin-top: 10px;
    }

    .payment-record-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: stretch;
    }

    .payment-record-card {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      padding: 12px;
      display: grid;
      gap: 8px;
      text-align: left;
    }

    .payment-record-card.active,
    .payment-record-card:hover {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(8, 117, 104, .1);
    }

    .payment-record-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
    }

    .payment-record-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .payment-record-actions {
      min-width: 180px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fbff;
      padding: 10px;
      display: grid;
      gap: 8px;
      align-content: center;
    }

    .payment-record-actions .btn {
      min-height: 38px;
      padding: 8px 10px;
      justify-content: center;
      white-space: nowrap;
    }

    .receipt-form {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfcfb;
      padding: 14px;
      position: sticky;
      top: 84px;
    }

    .receipt-form h3 {
      margin: 0;
      font-size: 1rem;
    }

    progress {
      width: 100%;
      height: 10px;
      accent-color: var(--teal);
    }

    .receipt-preview {
      min-height: 86px;
      border: 1px dashed #c9d5d1;
      border-radius: 8px;
      background: #fff;
      padding: 10px;
      display: grid;
      place-items: center;
      color: var(--muted);
      overflow-wrap: anywhere;
    }

    .receipt-preview img {
      width: min(100%, 280px);
      max-height: 260px;
      object-fit: contain;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
    }

    /* customer-history-progressive-selector-20260809 */
    .customer-history-list {
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .customer-history-group,
    .customer-history-visit {
      min-width: 0;
    }

    .customer-history-group > summary,
    .customer-history-visit > summary {
      list-style: none;
    }

    .customer-history-group > summary::-webkit-details-marker,
    .customer-history-visit > summary::-webkit-details-marker {
      display: none;
    }

    .customer-history-vehicle-card {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 38px;
      gap: 11px;
      align-items: center;
      min-height: 82px;
      padding: 12px;
      border: 1px solid #ccdded;
      border-radius: 16px;
      background: linear-gradient(135deg, #f5f9ff, #fff);
      box-shadow: 0 8px 20px rgba(12, 77, 162, .07);
      cursor: pointer;
    }

    .customer-history-group[open] > .customer-history-vehicle-card {
      border-color: #8eb6e7;
      box-shadow: 0 0 0 3px rgba(12, 77, 162, .08);
    }

    .customer-history-selector-icon,
    .customer-history-selector-arrow,
    .customer-history-visit-icon,
    .customer-history-visit-arrow {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: var(--mobil-blue);
      background: #e8f1ff;
    }

    .customer-history-selector-icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
    }

    .customer-history-selector-arrow {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--mobil-blue);
      color: #fff;
      transition: transform .18s ease;
    }

    .customer-history-group[open] > summary .customer-history-selector-arrow,
    .customer-history-visit[open] > summary .customer-history-visit-arrow {
      transform: rotate(90deg);
    }

    .customer-history-selector-copy,
    .customer-history-visit-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .customer-history-selector-copy small {
      color: var(--mobil-blue);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .customer-history-selector-copy strong,
    .customer-history-visit-copy strong {
      min-width: 0;
      color: var(--ink);
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .customer-history-selector-copy span,
    .customer-history-visit-copy span {
      min-width: 0;
      color: var(--muted);
      font-size: .78rem;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .customer-history-visit-list {
      margin: 10px 0 4px;
      padding: 10px;
      border: 1px solid #d7e4f1;
      border-radius: 16px;
      background: #f8fbff;
      display: grid;
      gap: 9px;
    }

    .customer-history-progress {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .customer-history-progress::-webkit-scrollbar {
      display: none;
    }

    .customer-history-progress span {
      flex: 0 0 auto;
      padding: 5px 9px;
      border-radius: 999px;
      background: #eaf0f7;
      color: #64748b;
      font-size: .7rem;
      font-weight: 850;
    }

    .customer-history-progress span.complete {
      background: #e7f6ed;
      color: #147548;
    }

    .customer-history-progress span.active {
      background: #e7f0ff;
      color: var(--mobil-blue);
    }

    .customer-history-progress i,
    .customer-history-progress svg {
      flex: 0 0 auto;
      width: 14px;
      height: 14px;
      color: #9aa8b8;
    }

    .customer-history-visit-prompt {
      margin: 2px 0 0;
      color: var(--ink);
      font-size: .9rem;
    }

    .customer-history-visit-card {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto 28px;
      gap: 9px;
      align-items: center;
      min-height: 68px;
      padding: 9px 10px;
      border: 1px solid #d5e0ec;
      border-radius: 13px;
      background: #fff;
      cursor: pointer;
    }

    .customer-history-visit[open] > .customer-history-visit-card {
      border-color: #97b9e0;
      background: #f4f8ff;
    }

    .customer-history-visit-icon {
      width: 36px;
      height: 36px;
      border-radius: 11px;
    }

    .customer-history-visit-arrow {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: transparent;
      transition: transform .18s ease;
    }

    .customer-history-visit-card .badge {
      max-width: 108px;
      text-align: center;
    }

    .customer-history-card {
      margin-top: 8px;
      border: 1px solid #cbdced;
      border-radius: 14px;
      background: #fff;
      padding: 12px;
      display: grid;
      gap: 10px;
      box-shadow: 0 8px 18px rgba(12, 77, 162, .06);
    }

    .customer-history-detail-heading {
      display: grid;
      gap: 3px;
    }

    .customer-history-detail-heading small {
      color: var(--mobil-blue);
      font-weight: 900;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .customer-history-detail-heading strong {
      color: var(--ink);
      font-size: 1rem;
      line-height: 1.25;
    }

    .customer-history-card .history-detail-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-detail-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .mechanic-lookup {
      padding: 16px;
      display: grid;
      gap: 14px;
    }

    .mechanic-search-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfcfb;
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .mechanic-search {
      width: 100%;
      min-height: 50px;
    }

    .mechanic-results {
      display: grid;
      gap: 12px;
    }

    .mechanic-result {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .mechanic-result-head {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      justify-content: space-between;
    }

    .mechanic-history {
      display: grid;
      gap: 10px;
      border-left: 3px solid #d8e4df;
      padding-left: 12px;
    }

    .history-card {
      position: relative;
      border: 1px solid #e2e9e6;
      border-radius: 8px;
      padding: 12px;
      background: #f9fbfa;
      display: grid;
      gap: 10px;
    }

    .history-card::before {
      content: "";
      position: absolute;
      left: -20px;
      top: 18px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--teal);
      border: 2px solid #fff;
      box-shadow: 0 0 0 2px #d8e4df;
    }

    .history-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .history-card p {
      margin: 0;
      color: var(--ink);
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .history-photo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(94px, 130px));
      gap: 8px;
    }

    .history-photo-grid img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #eaf2ff;
    }

    .customer-offers-list,
    .workshop-locations-list,
    .offer-admin-list,
    .ratings-list,
    .summary-page {
      padding: 16px;
      display: grid;
      gap: 16px;
    }

    .workshop-intro {
      border: 1px solid rgba(12, 77, 162, .18);
      border-radius: 8px;
      padding: 18px;
      display: grid;
      gap: 8px;
      background: linear-gradient(135deg, #f4f8ff, #fff);
    }

    .workshop-intro-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .workshop-intro-actions {
      margin-left: auto;
    }

    .workshop-intro-actions .btn {
      min-height: 38px;
    }

    .workshop-intro h2,
    .workshop-intro p {
      margin: 0;
    }

    .workshop-intro h2 {
      font-size: 1.6rem;
      color: var(--ink);
    }

    .workshop-admin-sync-note {
      display: grid;
      gap: 4px;
      border: 1px dashed rgba(12, 77, 162, .28);
      border-radius: 8px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, .72);
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.35;
    }

    .workshop-admin-sync-note[hidden] {
      display: none;
    }

    .workshop-admin-sync-note strong {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--brand-blue);
      font-size: .9rem;
    }

    .workshop-admin-sync-note svg {
      width: 16px;
      height: 16px;
    }

    .workshop-location-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
    }

    .workshop-location-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
      min-width: 0;
    }

    .workshop-location-summary {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 12px;
      padding: 12px;
      align-items: start;
    }

    .workshop-location-summary .workshop-image-link,
    .workshop-location-summary .workshop-image-static {
      width: 88px;
      height: 88px;
      border-radius: 12px;
      overflow: hidden;
    }

    .workshop-location-summary .workshop-image-link img,
    .workshop-location-summary .workshop-image-static img {
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
      object-fit: cover;
    }

    .workshop-location-summary-main {
      min-width: 0;
      display: grid;
      gap: 8px;
    }

    .workshop-location-summary-main h3 {
      margin: 0;
      font-size: 1.03rem;
      line-height: 1.25;
    }

    .workshop-location-summary-main .sub {
      margin: 0;
    }

    .workshop-location-quick-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .workshop-location-quick-actions .btn {
      flex: 1 1 132px;
      min-height: 38px;
      justify-content: center;
    }

    .workshop-location-details {
      border-top: 1px solid var(--line);
      background: #fbfcff;
    }

    .workshop-location-details summary {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 11px 12px;
      cursor: pointer;
      color: var(--mobil-blue);
      font-weight: 900;
      list-style: none;
    }

    .workshop-location-details summary::-webkit-details-marker {
      display: none;
    }

    .workshop-location-details summary::after {
      content: "+";
      margin-left: auto;
      font-size: 1.25rem;
      line-height: 1;
    }

    .workshop-location-details[open] summary::after {
      content: "−";
    }

    .workshop-location-detail-content {
      display: grid;
      gap: 11px;
      padding: 0 12px 12px;
    }

    .workshop-google-review-list {
      display: grid;
      gap: 8px;
    }

    .workshop-google-review-item {
      border-left: 3px solid #e2b13c;
      padding: 7px 0 7px 9px;
      color: var(--muted);
      font-size: .86rem;
      line-height: 1.35;
    }

    .workshop-google-review-item strong {
      color: var(--ink);
    }

    .workshop-details-booking {
      display: flex;
    }

    .workshop-details-booking .btn {
      width: 100%;
      justify-content: center;
    }

    .workshop-image-link,
    .workshop-image-static {
      position: relative;
      display: block;
      width: 100%;
      background: #e7efea;
      text-decoration: none;
      color: inherit;
    }

    .workshop-image-link img,
    .workshop-image-static img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      background: #e7efea;
      display: block;
    }

    .workshop-image-map-badge {
      position: absolute;
      right: 10px;
      bottom: 10px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      padding: 6px 9px;
      background: rgba(7, 43, 84, .86);
      color: #fff;
      font-size: .75rem;
      font-weight: 900;
      box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
    }

    .workshop-google-trust {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      border: 1px solid #d9e4f2;
      border-radius: 8px;
      padding: 8px 10px;
      background: #f8fbff;
    }

    .workshop-google-score {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #9a6700;
      font-weight: 950;
      white-space: nowrap;
    }

    .workshop-google-score svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }

    .workshop-google-trust small {
      display: block;
      color: #607086;
      font-size: .76rem;
      line-height: 1.25;
    }

    .workshop-google-link {
      color: var(--mobil-blue);
      font-weight: 900;
      text-decoration: none;
    }

    .workshop-location-body {
      padding: 14px;
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .workshop-location-body h3 {
      margin: 0;
      font-size: 1.08rem;
      line-height: 1.25;
    }

    .workshop-location-body p {
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
    }

    .workshop-location-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .workshop-map-box {
      border: 1px dashed #bdd4ca;
      border-radius: 8px;
      padding: 12px;
      display: flex;
      gap: 8px;
      align-items: center;
      color: var(--muted);
      background: #f6faf8;
      min-height: 58px;
    }

    .workshop-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .workshop-card-actions .btn {
      flex: 1 1 150px;
      justify-content: center;
    }

    @media (max-width: 640px) {
      .workshop-location-summary {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
      }

      .workshop-location-summary .workshop-image-link,
      .workshop-location-summary .workshop-image-static {
        width: 76px;
        height: 76px;
        border-radius: 10px;
      }

      .workshop-location-quick-actions .btn {
        flex-basis: 118px;
      }

      .workshop-google-trust {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 7px 9px;
      }

      .workshop-image-map-badge {
        font-size: .68rem;
        padding: 5px 8px;
      }
    }

    .workshop-image-admin {
      border: 1px solid rgba(12, 77, 162, .18);
      border-radius: 8px;
      padding: 10px;
      display: grid;
      gap: 8px;
      background: #f8fafc;
    }

    .workshop-image-admin .actions {
      gap: 8px;
    }

    .workshop-image-admin .btn {
      min-height: 44px;
    }

    .workshop-admin-editor {
      border: 1px solid rgba(12, 77, 162, .18);
      border-radius: 8px;
      padding: 16px;
      display: grid;
      gap: 14px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(9, 40, 32, .06);
    }

    .workshop-admin-editor[hidden] {
      display: none;
    }

    .workshop-admin-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .workshop-admin-header h3,
    .workshop-admin-header p {
      margin: 0;
    }

    .workshop-admin-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .workshop-admin-grid label,
    .workshop-admin-editor label {
      display: grid;
      gap: 6px;
      font-weight: 700;
      color: var(--ink);
    }

    .workshop-admin-editor input,
    .workshop-admin-editor textarea,
    .workshop-admin-editor select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      min-height: 44px;
      padding: 10px 12px;
      font: inherit;
      color: var(--ink);
      background: #fff;
    }

    .workshop-admin-editor textarea {
      resize: vertical;
      min-height: 92px;
    }

    .workshop-google-linking-note {
      border: 1px solid #d9e4f2;
      border-radius: 8px;
      background: #f8fbff;
      padding: 12px;
      display: grid;
      gap: 8px;
    }

    .workshop-google-linking-note h4,
    .workshop-google-linking-note p {
      margin: 0;
    }

    .workshop-google-linking-note h4 {
      color: var(--mobil-blue-dark);
      font-size: .98rem;
    }

    .workshop-google-linking-note .actions {
      gap: 8px;
    }

    .workshop-admin-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    .workshop-admin-actions .btn {
      min-height: 46px;
    }

    .workshop-contact-list {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: .92rem;
    }

    .workshop-contact-list span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    /* workshops-customer-compact-hybrid-20260814
       Customer and public visitors open overview -> branch list -> one focused branch. */
    #workshop-locations.customer-workshop-hybrid {
      overflow: hidden;
      background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
    }

    #workshop-locations.customer-workshop-hybrid .workshop-locations-list {
      padding: 14px;
      gap: 12px;
    }

    #workshop-locations.customer-workshop-hybrid .workshop-intro,
    #workshop-locations.customer-workshop-hybrid #workshopAdminForm {
      display: none !important;
    }

    .customer-workshop-overview,
    .customer-workshop-list-shell,
    .customer-workshop-detail-shell {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .customer-workshop-overview {
      border: 1px solid rgba(12, 77, 162, .18);
      border-radius: 12px;
      padding: 14px;
      background: linear-gradient(135deg, #f3f8ff 0%, #fff 72%);
    }

    .customer-workshop-stage-head,
    .customer-workshop-list-head,
    .customer-workshop-detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .customer-workshop-stage-head > div,
    .customer-workshop-list-head > div,
    .customer-workshop-detail-head > div {
      min-width: 0;
    }

    .customer-workshop-stage-head h2,
    .customer-workshop-stage-head p,
    .customer-workshop-list-head h3,
    .customer-workshop-list-head p,
    .customer-workshop-detail-head h3,
    .customer-workshop-detail-head p {
      margin: 0;
    }

    .customer-workshop-stage-head h2 {
      color: var(--mobil-blue-dark);
      font-size: 1.25rem;
    }

    .customer-workshop-list-head h3,
    .customer-workshop-detail-head h3 {
      color: var(--mobil-blue-dark);
      font-size: 1.05rem;
    }

    .customer-workshop-kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .customer-workshop-kpi {
      width: 100%;
      min-width: 0;
      min-height: 96px;
      border: 1px solid #cbd9ea;
      border-radius: 11px;
      padding: 11px;
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) 18px;
      gap: 9px;
      align-items: center;
      text-align: left;
      background: #fff;
      color: #0f172a;
      cursor: pointer;
      box-shadow: 0 5px 14px rgba(12, 77, 162, .05);
    }

    .customer-workshop-kpi:hover,
    .customer-workshop-kpi:focus-visible {
      border-color: var(--mobil-blue);
      background: #f7faff;
      box-shadow: 0 7px 18px rgba(12, 77, 162, .1);
    }

    .customer-workshop-kpi.is-contact {
      border-color: #aedbc3;
      background: #f5fcf8;
    }

    .customer-workshop-kpi.is-rated {
      border-color: #ead09a;
      background: #fffaf0;
    }

    .customer-workshop-kpi-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: #eaf2ff;
      color: var(--mobil-blue);
    }

    .customer-workshop-kpi-icon svg {
      width: 21px;
      height: 21px;
    }

    .customer-workshop-kpi-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .customer-workshop-kpi-copy span {
      color: #596a82;
      font-size: .75rem;
      font-weight: 900;
      line-height: 1.1;
    }

    .customer-workshop-kpi-copy strong {
      color: #0f172a;
      font-size: 1.28rem;
      line-height: 1.05;
    }

    .customer-workshop-kpi-copy small {
      color: #64748b;
      font-size: .7rem;
      line-height: 1.15;
    }

    .customer-workshop-kpi > svg {
      width: 18px;
      height: 18px;
      color: var(--mobil-blue);
    }

    .customer-workshop-overview-note {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #52617a;
      font-size: .8rem;
      line-height: 1.3;
    }

    .customer-workshop-overview-note svg {
      width: 17px;
      height: 17px;
      color: var(--mobil-blue);
      flex: 0 0 auto;
    }

    .customer-workshop-list-head,
    .customer-workshop-detail-head,
    .customer-workshop-filter-bar {
      border: 1px solid #cfdaea;
      border-radius: 10px;
      background: #fff;
      padding: 10px 12px;
    }

    .customer-workshop-list-head .btn,
    .customer-workshop-detail-head .btn {
      min-height: 44px;
    }

    .customer-workshop-filter-bar {
      display: grid;
      grid-template-columns: minmax(190px, 1.3fr) repeat(4, minmax(128px, .72fr)) minmax(140px, .72fr);
      gap: 9px;
      align-items: end;
      background: #f8fbff;
    }

    .customer-workshop-filter-bar label {
      display: grid;
      gap: 5px;
      color: #52617a;
      font-size: .74rem;
      font-weight: 900;
      min-width: 0;
    }

    .customer-workshop-more-filters,
    .customer-workshop-more-filter-grid {
      display: contents;
    }

    .customer-workshop-more-filters > summary {
      display: none;
    }

    .customer-workshop-filter-bar input,
    .customer-workshop-filter-bar select {
      width: 100%;
      min-width: 0;
      min-height: 44px;
      border: 1px solid #c8d5e5;
      border-radius: 8px;
      padding: 8px 9px;
      background: #fff;
      color: #0f172a;
      font: inherit;
      font-weight: 800;
    }

    .customer-workshop-compact-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .customer-workshop-locator-layout {
      --customer-workshop-locator-height: clamp(520px, calc(100vh - 83px), 637px);
      display: grid;
      grid-template-columns: minmax(340px, .88fr) minmax(440px, 1.12fr);
      gap: 12px;
      align-items: stretch;
      min-width: 0;
    }

    .customer-workshop-directory-panel,
    .customer-workshop-map-panel {
      height: var(--customer-workshop-locator-height);
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      border: 1px solid #cfdaea;
      border-radius: 12px;
      background: #fff;
      overflow: hidden;
    }

    .customer-workshop-directory-head,
    .customer-workshop-map-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 11px 12px;
      border-bottom: 1px solid #dbe4ef;
      background: #f8fbff;
    }

    .customer-workshop-directory-head strong,
    .customer-workshop-map-head strong {
      color: var(--mobil-blue-dark);
      font-size: .94rem;
    }

    .customer-workshop-directory-scroll {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      padding: 10px;
      overflow: auto;
      scrollbar-gutter: stable;
    }

    .customer-workshop-map-panel {
      position: sticky;
      top: 82px;
    }

    .customer-workshop-map-frame {
      flex: 1 1 auto;
      min-height: 0;
      position: relative;
      background: #e9f1f8;
    }

    .customer-workshop-map-canvas {
      width: 100%;
      height: 100%;
      min-height: 0;
      display: block;
      background: #e9f1f8;
      z-index: 1;
    }

    .customer-workshop-map-frame .leaflet-control-attribution {
      font-size: 10px;
    }

    .customer-workshop-map-pin-wrap {
      background: transparent;
      border: 0;
    }

    .customer-workshop-map-pin {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 3px solid #fff;
      border-radius: 50% 50% 50% 12%;
      background: var(--mobil-blue);
      color: #fff;
      font-size: .67rem;
      font-weight: 1000;
      line-height: 1;
      box-shadow: 0 4px 12px rgba(15, 23, 42, .3);
      transform: rotate(-45deg);
    }

    .customer-workshop-map-pin span {
      transform: rotate(45deg);
    }

    .customer-workshop-map-pin.is-selected {
      background: var(--mobil-red, #ed1b2f);
      box-shadow: 0 0 0 5px rgba(237, 27, 47, .16), 0 5px 14px rgba(15, 23, 42, .34);
    }

    .customer-workshop-map-head .btn {
      min-height: 36px;
      padding: 6px 9px;
    }

    .customer-workshop-map-summary {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #52617a;
      font-size: .78rem;
      font-weight: 800;
    }

    .customer-workshop-map-empty {
      min-height: 430px;
      display: grid;
      place-items: center;
      padding: 28px;
      color: #607086;
      text-align: center;
    }

    .customer-workshop-map-empty svg {
      width: 42px;
      height: 42px;
      color: var(--mobil-blue);
      margin-bottom: 8px;
    }

    .customer-workshop-map-caption {
      flex: 0 0 auto;
      display: grid;
      gap: 9px;
      padding: 12px;
      border-top: 1px solid #dbe4ef;
    }

    .customer-workshop-map-caption h3,
    .customer-workshop-map-caption p {
      margin: 0;
    }

    .customer-workshop-map-caption h3 {
      color: #0f172a;
      font-size: 1rem;
      line-height: 1.25;
    }

    .customer-workshop-map-caption p {
      color: #607086;
      font-size: .82rem;
      line-height: 1.35;
    }

    .customer-workshop-map-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .customer-workshop-map-actions .btn {
      min-height: 44px;
      justify-content: center;
    }

    .customer-workshop-compact-card {
      min-width: 0;
      min-height: 158px;
      display: grid;
      grid-template-columns: 126px minmax(0, 1fr);
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #fff;
      overflow: hidden;
      cursor: pointer;
    }

    .customer-workshop-compact-card:hover,
    .customer-workshop-compact-card:focus-visible {
      border-color: var(--mobil-blue);
      box-shadow: 0 6px 16px rgba(12, 77, 162, .09);
      outline: none;
    }

    .customer-workshop-compact-card.is-map-selected {
      border-color: var(--mobil-blue);
      box-shadow: 0 0 0 2px rgba(12, 77, 162, .11), 0 8px 18px rgba(12, 77, 162, .1);
      background: #f8fbff;
    }

    .customer-workshop-card-image {
      width: 100%;
      height: 100%;
      min-height: 158px;
      object-fit: cover;
      background: #e7efea;
    }

    .customer-workshop-card-body {
      min-width: 0;
      padding: 10px;
      display: grid;
      align-content: start;
      gap: 7px;
    }

    .customer-workshop-card-body h3,
    .customer-workshop-card-body p {
      margin: 0;
    }

    .customer-workshop-card-body h3 {
      color: #0f172a;
      font-size: .98rem;
      line-height: 1.2;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .customer-workshop-card-body p {
      color: #64748b;
      font-size: .79rem;
      line-height: 1.25;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .customer-workshop-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: auto;
    }

    .customer-workshop-card-actions .btn {
      min-height: 44px;
      flex: 1 1 104px;
      justify-content: center;
      padding: 7px 8px;
    }

    .customer-workshop-detail-grid {
      display: grid;
      grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
      gap: 12px;
      align-items: start;
    }

    .customer-workshop-detail-visual,
    .customer-workshop-detail-content {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #fff;
      overflow: hidden;
    }

    .customer-workshop-detail-visual {
      position: sticky;
      top: 84px;
    }

    .customer-workshop-detail-visual img {
      width: 100%;
      max-height: 430px;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      background: #e7efea;
      display: block;
    }

    .customer-workshop-detail-visual-copy,
    .customer-workshop-detail-content {
      padding: 12px;
      display: grid;
      gap: 11px;
    }

    .customer-workshop-detail-visual-copy h3,
    .customer-workshop-detail-visual-copy p,
    .customer-workshop-detail-content h4,
    .customer-workshop-detail-content p {
      margin: 0;
    }

    .customer-workshop-detail-facts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .customer-workshop-detail-fact {
      min-width: 0;
      border: 1px solid #d8e2ef;
      border-radius: 8px;
      padding: 9px;
      background: #f8fafc;
    }

    .customer-workshop-detail-fact span {
      display: block;
      color: #64748b;
      font-size: .7rem;
      font-weight: 900;
      margin-bottom: 3px;
    }

    .customer-workshop-detail-fact strong {
      display: block;
      color: #0f172a;
      font-size: .86rem;
      overflow-wrap: anywhere;
    }

    .customer-workshop-service-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .customer-workshop-detail-actions {
      position: sticky;
      bottom: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      padding-top: 9px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .78), #fff 32%);
    }

    .customer-workshop-detail-actions .btn {
      min-height: 46px;
      justify-content: center;
    }

    @media (max-width: 900px) {
      .customer-workshop-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .customer-workshop-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .customer-workshop-filter-bar label:first-child {
        grid-column: 1 / -1;
      }

      .customer-workshop-locator-layout {
        grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
      }
    }

    @media (max-width: 640px) {
      #workshop-locations.customer-workshop-hybrid .workshop-locations-list {
        padding: 10px;
      }

      .customer-workshop-overview {
        padding: 10px;
        gap: 10px;
      }

      .customer-workshop-stage-head p,
      .customer-workshop-list-head p,
      .customer-workshop-detail-head p,
      .customer-workshop-kpi-copy small {
        display: none;
      }

      .customer-workshop-kpi {
        min-height: 82px;
        grid-template-columns: 34px minmax(0, 1fr) 15px;
        gap: 7px;
        padding: 8px;
      }

      .customer-workshop-kpi-icon {
        width: 34px;
        height: 34px;
      }

      .customer-workshop-kpi-icon svg {
        width: 18px;
        height: 18px;
      }

      .customer-workshop-kpi-copy span {
        font-size: .68rem;
      }

      .customer-workshop-kpi-copy strong {
        font-size: 1.08rem;
      }

      .customer-workshop-list-head,
      .customer-workshop-detail-head {
        align-items: flex-start;
        padding: 8px;
      }

      .customer-workshop-filter-bar {
        padding: 8px;
        gap: 7px;
      }

      .customer-workshop-more-filters {
        display: block;
        grid-column: 1 / -1;
        border: 1px solid #c8d5e5;
        border-radius: 9px;
        background: #fff;
        overflow: hidden;
      }

      .customer-workshop-more-filters > summary {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
        color: var(--mobil-blue-dark);
        font-size: .78rem;
        font-weight: 900;
        cursor: pointer;
        list-style: none;
      }

      .customer-workshop-more-filters > summary::-webkit-details-marker {
        display: none;
      }

      .customer-workshop-more-filter-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 0 8px 8px;
      }

      .customer-workshop-locator-layout {
        --customer-workshop-locator-height: auto;
        grid-template-columns: 1fr;
        align-items: start;
      }

      .customer-workshop-directory-panel,
      .customer-workshop-map-panel {
        height: auto;
        position: static;
      }

      .customer-workshop-map-panel {
        grid-row: 1;
      }

      .customer-workshop-directory-panel {
        grid-row: 2;
      }

      .customer-workshop-map-frame,
      .customer-workshop-map-empty {
        flex: none;
        min-height: 245px;
      }

      .customer-workshop-map-canvas {
        height: 245px;
        min-height: 245px;
      }

      .customer-workshop-directory-scroll {
        max-height: none;
        overflow: visible;
        padding: 8px;
      }

      .customer-workshop-map-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .customer-workshop-map-actions .btn:last-child {
        grid-column: 1 / -1;
      }

      .customer-workshop-compact-card {
        grid-template-columns: 96px minmax(0, 1fr);
        min-height: 150px;
      }

      .customer-workshop-card-image {
        min-height: 150px;
      }

      .customer-workshop-card-body {
        padding: 8px;
        gap: 6px;
      }

      .customer-workshop-card-actions .btn {
        flex-basis: 92px;
      }

      .customer-workshop-detail-grid {
        grid-template-columns: 1fr;
      }

      .customer-workshop-detail-visual {
        position: static;
      }

      .customer-workshop-detail-visual img {
        max-height: 300px;
        aspect-ratio: 16 / 9;
      }

      .customer-workshop-detail-actions {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 390px) {
      .customer-workshop-filter-bar {
        grid-template-columns: 1fr;
      }

      .customer-workshop-filter-bar label:first-child {
        grid-column: auto;
      }

      .customer-workshop-compact-card {
        grid-template-columns: 88px minmax(0, 1fr);
      }

      .customer-workshop-card-image {
        min-height: 154px;
      }
    }

    /* workshops-compact-hybrid-20260812
       Admin opens one focused workshop task at a time; public and customer finder views stay unchanged. */
    #workshop-locations.workshop-compact-hybrid .workshop-locations-list {
      padding: 14px;
      gap: 12px;
    }

    .workshop-compact-shell {
      margin: 0;
    }

    /* workshops-admin-directory-first-20260904
       Admin lands on every registered branch, with secondary tools kept in one predictable toolbar. */
    .workshop-directory-control-centre {
      padding: 0;
      overflow: hidden;
      border: 1px solid #cbd9ea;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(20, 63, 111, .06);
    }

    .workshop-directory-overview {
      display: grid;
      gap: 15px;
      padding: 18px 18px 0;
      background: linear-gradient(180deg, #f8fbff 0%, #fff 78%);
    }

    .workshop-directory-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }

    .workshop-directory-heading > div {
      min-width: 0;
      max-width: 760px;
    }

    .workshop-directory-eyebrow {
      display: block;
      margin-bottom: 5px;
      color: var(--mobil-blue);
      font-size: .69rem;
      font-weight: 950;
      letter-spacing: .11em;
    }

    .workshop-directory-heading h2,
    .workshop-directory-heading p {
      margin: 0;
    }

    .workshop-directory-heading h2 {
      color: #102038;
      font-size: clamp(1.18rem, 1.8vw, 1.55rem);
      line-height: 1.15;
    }

    .workshop-directory-heading p {
      margin-top: 6px;
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.5;
    }

    .workshop-directory-add {
      flex: 0 0 auto;
      min-height: 42px;
      padding-inline: 17px;
      white-space: nowrap;
    }

    .workshop-directory-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .workshop-directory-stat {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 12px;
      border: 1px solid #d8e3ef;
      border-radius: 13px;
      background: #fff;
    }

    .workshop-directory-stat-icon {
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      background: #edf4ff;
      color: var(--mobil-blue);
    }

    .workshop-directory-stat-icon svg {
      width: 19px;
      height: 19px;
    }

    .workshop-directory-stat.is-active .workshop-directory-stat-icon {
      background: #eaf8f0;
      color: #087742;
    }

    .workshop-directory-stat.is-inactive .workshop-directory-stat-icon {
      background: #f2f4f7;
      color: #667085;
    }

    .workshop-directory-stat.is-linked .workshop-directory-stat-icon {
      background: #fff6dc;
      color: #956500;
    }

    .workshop-directory-stat > span:last-child {
      min-width: 0;
      display: grid;
      gap: 1px;
    }

    .workshop-directory-stat small {
      color: #66758a;
      font-size: .62rem;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .workshop-directory-stat strong {
      color: #102038;
      font-size: 1.08rem;
      line-height: 1.05;
    }

    .workshop-directory-stat em {
      overflow: hidden;
      color: var(--muted);
      font-size: .68rem;
      font-style: normal;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .workshop-directory-tabs {
      display: flex;
      gap: 5px;
      margin: 0 -18px;
      padding: 8px 18px;
      overflow-x: auto;
      border-top: 1px solid #dce6f1;
      background: #fff;
      scrollbar-width: thin;
    }

    .workshop-directory-tabs button {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 8px 13px;
      border: 1px solid transparent;
      border-radius: 10px;
      background: transparent;
      color: #45566d;
      font: inherit;
      font-size: .76rem;
      font-weight: 850;
      white-space: nowrap;
      cursor: pointer;
    }

    .workshop-directory-tabs button:hover,
    .workshop-directory-tabs button:focus-visible {
      border-color: #c8d8ea;
      background: #f3f7fc;
      color: var(--mobil-blue);
      outline: none;
    }

    .workshop-directory-tabs button.active {
      border-color: #b8d0ec;
      background: #eaf3ff;
      color: var(--mobil-blue);
      box-shadow: inset 0 0 0 1px rgba(15, 85, 170, .05);
    }

    .workshop-directory-tabs svg {
      width: 16px;
      height: 16px;
    }

    #workshop-locations.workshop-compact-hybrid[data-workshop-view="directory"] .workshop-intro,
    #workshop-locations.workshop-compact-hybrid[data-workshop-view="directory"] #workshopAdminForm,
    #workshop-locations.workshop-compact-hybrid[data-workshop-view="editor"] .workshop-intro,
    #workshop-locations.workshop-compact-hybrid[data-workshop-view="editor"] #workshopLocationsList,
    #workshop-locations.workshop-compact-hybrid[data-workshop-view="ratings"] #workshopAdminForm {
      display: none !important;
    }

    #workshop-locations.workshop-compact-hybrid[data-workshop-view="ratings"] .workshop-intro {
      padding: 12px;
      gap: 6px;
      box-shadow: none;
    }

    #workshop-locations.workshop-compact-hybrid[data-workshop-view="ratings"] .workshop-intro h2 {
      font-size: 1rem;
    }

    #workshop-locations.workshop-compact-hybrid[data-workshop-view="ratings"] .workshop-intro > p {
      font-size: .8rem;
    }

    .workshop-directory-results-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 3px 2px 0;
    }

    .workshop-directory-results-head[hidden] {
      display: none !important;
    }

    .workshop-directory-results-head h3,
    .workshop-directory-results-head p {
      margin: 0;
    }

    .workshop-directory-results-head h3 {
      color: #102038;
      font-size: .98rem;
    }

    .workshop-directory-results-head p {
      margin-top: 3px;
      color: var(--muted);
      font-size: .74rem;
    }

    .workshop-directory-results-head > span {
      flex: 0 0 auto;
      padding: 7px 10px;
      border-radius: 999px;
      background: #eaf3ff;
      color: var(--mobil-blue);
      font-size: .7rem;
      font-weight: 900;
      white-space: nowrap;
    }

    #workshop-locations.workshop-compact-hybrid[data-workshop-view="directory"] .workshop-location-grid {
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: 10px;
    }

    #workshop-locations.workshop-compact-hybrid .workshop-location-card {
      border-color: #d4dfec;
      box-shadow: 0 5px 16px rgba(24, 62, 105, .05);
    }

    #workshop-locations.workshop-compact-hybrid .workshop-location-summary {
      padding: 10px;
    }

    #workshop-locations.workshop-compact-hybrid .workshop-location-quick-actions .btn {
      flex-basis: 112px;
    }

    .workshop-rating-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
      gap: 10px;
    }

    .workshop-rating-card {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 11px;
      background: #fff;
    }

    .workshop-rating-card > .workshop-rating-score {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      align-content: center;
      border-radius: 12px;
      background: #fff8df;
      color: #8a5b00;
      font-weight: 950;
    }

    .workshop-rating-score svg {
      width: 17px;
      height: 17px;
      fill: currentColor;
    }

    .workshop-rating-score small {
      font-size: .65rem;
      color: #8a5b00;
    }

    .workshop-rating-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .workshop-rating-copy strong,
    .workshop-rating-copy span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .workshop-rating-copy span {
      color: var(--muted);
      font-size: .74rem;
    }

    .workshop-rating-card .btn {
      min-height: 38px;
      white-space: nowrap;
    }

    @media (max-width: 1000px) {
      .workshop-directory-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 720px) {
      .workshop-directory-overview {
        gap: 12px;
        padding: 14px 14px 0;
      }

      .workshop-directory-heading {
        display: grid;
        gap: 12px;
      }

      .workshop-directory-add {
        width: 100%;
      }

      .workshop-directory-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .workshop-directory-stat {
        align-items: flex-start;
        padding: 10px;
      }

      .workshop-directory-stat-icon {
        width: 34px;
        height: 34px;
      }

      .workshop-directory-stat em {
        white-space: normal;
      }

      .workshop-directory-tabs {
        margin-inline: -14px;
        padding-inline: 14px;
      }

      .workshop-directory-results-head {
        align-items: flex-start;
      }

      .workshop-directory-results-head p {
        display: none;
      }

      .workshop-admin-grid {
        grid-template-columns: 1fr;
      }
      .workshop-intro-top {
        align-items: stretch;
      }
      .workshop-intro-actions {
        width: 100%;
        margin-left: 0;
      }
      .workshop-intro-actions .btn {
        width: 100%;
      }

      #workshop-locations.workshop-compact-hybrid .workshop-locations-list {
        padding: 10px;
        gap: 9px;
      }

      #workshop-locations.workshop-compact-hybrid[data-workshop-view="directory"] .workshop-location-grid,
      .workshop-rating-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      #workshop-locations.workshop-compact-hybrid #workshopAdminForm {
        padding: 11px;
        gap: 11px;
      }

      .workshop-rating-card {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        padding: 9px;
        gap: 8px;
      }

      .workshop-rating-card > .workshop-rating-score {
        width: 46px;
        height: 46px;
      }

      .workshop-rating-card .btn {
        width: 40px;
        min-width: 40px;
        padding: 8px;
      }

      .workshop-rating-card .btn span {
        display: none;
      }
    }

    .offer-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
      min-height: 220px;
    }

    .customer-offers-list {
      max-width: 100%;
      overflow-x: hidden;
    }

    .customer-offer-card {
      grid-template-columns: minmax(260px, 42%) minmax(0, 1fr);
      min-width: 0;
      max-width: 100%;
      align-items: start;
    }

    .customer-offer-card .offer-image-container {
      grid-column: 1;
      grid-row: 1;
      z-index: 1;
    }

    .customer-offer-card .offer-card-body {
      grid-column: 2;
      grid-row: 1;
      position: relative;
      z-index: 2;
      align-self: stretch;
      min-width: 0;
      background: #fff;
      border-left: 1px solid var(--line);
    }

    .offer-image-container {
      position: relative;
      width: 100%;
      max-width: 100%;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      background: #f3f6f4;
      display: grid;
      place-items: center;
    }

    .offer-image {
      width: 100%;
      height: 100%;
      min-height: 0;
      object-fit: contain;
      display: block;
      background: #f3f6f4;
    }

    .offer-title-overlay {
      display: none;
    }

    .offer-title-overlay h2 {
      margin: 0;
      font-size: 1.08rem;
      font-weight: 900;
      line-height: 1.24;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .offer-card > img,
    .offer-preview img {
      width: 100%;
      height: 100%;
      min-height: 220px;
      object-fit: contain;
      background: #f3f6f4;
    }

    .offer-card-body,
    .offer-admin-body {
      padding: 16px;
      display: grid;
      gap: 10px;
      align-content: start;
      background: #fff;
    }

    .offer-card h3,
    .offer-admin-body h3 {
      margin: 0;
      font-size: 1.25rem;
    }

    .offer-card p,
    .offer-admin-body p {
      margin: 0;
      color: #3d4a46;
      line-height: 1.45;
    }

    .offer-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .offer-terms {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fbf9;
      padding: 10px 12px;
    }

    .offer-terms summary {
      cursor: pointer;
      font-weight: 900;
      color: var(--teal);
    }

    .offer-terms p {
      margin-top: 8px;
      color: #52605c;
    }

    .offer-bottom-cta {
      width: 100%;
      justify-content: center;
      margin-top: 4px;
    }

    .customer-offer-browser {
      display: grid;
      gap: 12px;
      padding: 0 16px 16px;
    }

    .customer-offer-hybrid-panel {
      overflow: hidden;
      background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
    }

    .customer-offer-hybrid-panel > .panel-head {
      padding-top: 14px;
      padding-bottom: 14px;
    }

    .customer-offer-overview {
      display: grid;
      gap: 12px;
      border: 1px solid rgba(12, 77, 162, .18);
      border-radius: 10px;
      background: linear-gradient(135deg, #f4f8ff 0%, #fff 72%);
      padding: 14px;
    }

    .customer-offer-overview-head,
    .customer-offer-list-navigation,
    .customer-offer-detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .customer-offer-overview-head h3,
    .customer-offer-overview-head p,
    .customer-offer-list-navigation h3,
    .customer-offer-list-navigation p,
    .customer-offer-detail-head h3,
    .customer-offer-detail-head p {
      margin: 0;
    }

    .customer-offer-overview-head h3,
    .customer-offer-list-navigation h3,
    .customer-offer-detail-head h3 {
      color: var(--mobil-blue-dark);
      font-size: 1.05rem;
    }

    .customer-offer-overview-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .customer-offer-overview-card {
      width: 100%;
      min-width: 0;
      min-height: 94px;
      border: 1px solid #cbd9ea;
      border-radius: 10px;
      background: #fff;
      color: #0f172a;
      padding: 11px;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) 18px;
      gap: 9px;
      align-items: center;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 5px 14px rgba(12, 77, 162, .05);
    }

    .customer-offer-overview-card:hover,
    .customer-offer-overview-card:focus-visible {
      border-color: var(--mobil-blue);
      background: #f7faff;
      box-shadow: 0 7px 18px rgba(12, 77, 162, .1);
    }

    .customer-offer-overview-card.is-ending {
      border-color: #edc983;
      background: #fffaf0;
    }

    .customer-offer-overview-card.is-member {
      border-color: #badfca;
      background: #f5fcf8;
    }

    .customer-offer-overview-icon {
      width: 38px;
      height: 38px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      background: #eaf2ff;
      color: var(--mobil-blue);
    }

    .customer-offer-overview-icon svg {
      width: 20px;
      height: 20px;
    }

    .customer-offer-overview-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .customer-offer-overview-copy span {
      color: #596a82;
      font-size: .75rem;
      font-weight: 900;
      line-height: 1.1;
    }

    .customer-offer-overview-copy strong {
      color: #0f172a;
      font-size: 1.25rem;
      line-height: 1.05;
    }

    .customer-offer-overview-copy small {
      color: #64748b;
      font-size: .7rem;
      line-height: 1.15;
    }

    .customer-offer-overview-card > svg {
      width: 18px;
      height: 18px;
      color: var(--mobil-blue);
    }

    .customer-offer-overview-note {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #52617a;
      font-size: .78rem;
      line-height: 1.25;
    }

    .customer-offer-overview-note svg {
      width: 16px;
      height: 16px;
      color: var(--mobil-blue);
      flex: 0 0 auto;
    }

    .customer-offer-tools {
      display: grid;
      gap: 10px;
      border: 1px solid rgba(12, 77, 162, .16);
      border-radius: 8px;
      background: linear-gradient(135deg, #f6f9ff, #fff);
      padding: 12px;
    }

    .customer-offer-list-navigation > div,
    .customer-offer-detail-head > div {
      min-width: 0;
    }

    .customer-offer-list-navigation .actions {
      flex: 0 0 auto;
    }

    .customer-offer-list-navigation .btn,
    .customer-offer-detail-head .btn {
      min-height: 44px;
      padding: 7px 10px;
    }

    .customer-offer-topline {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .customer-offer-topline h3,
    .customer-offer-section-head h3 {
      margin: 0;
      color: var(--mobil-blue-dark);
      font-size: 1.05rem;
    }

    .customer-offer-filter-grid {
      display: grid;
      grid-template-columns: minmax(170px, 1fr) minmax(150px, .82fr) minmax(140px, .72fr) minmax(190px, 1.08fr);
      gap: 10px;
      align-items: end;
    }

    .customer-offer-filter-grid label {
      display: grid;
      gap: 5px;
      color: #52617a;
      font-size: .78rem;
      font-weight: 900;
    }

    .customer-offer-filter-grid select,
    .customer-offer-filter-grid input {
      width: 100%;
      min-height: 44px;
      border: 1px solid #cbd7e6;
      border-radius: 8px;
      padding: 9px 10px;
      font: inherit;
      font-weight: 800;
      background: #fff;
    }

    .customer-offer-chips {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: thin;
    }

    .customer-offer-chip {
      flex: 0 0 auto;
      border: 1px solid #cbd7e6;
      border-radius: 8px;
      background: #fff;
      color: var(--mobil-blue-dark);
      padding: 8px 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 900;
      white-space: nowrap;
      min-height: 38px;
    }

    .customer-offer-chip.active {
      border-color: var(--mobil-blue);
      background: #eaf2ff;
      color: var(--mobil-blue);
      box-shadow: inset 0 0 0 1px rgba(12, 77, 162, .08);
    }

    .customer-offer-chip .count {
      color: #61718b;
      font-size: .78rem;
      font-weight: 900;
    }

    .customer-offer-section-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      padding: 0 16px 10px;
    }

    .customer-offer-results {
      display: grid;
      gap: 12px;
      padding: 0 16px 16px;
    }

    .customer-offer-compact-card {
      display: grid;
      grid-template-columns: 168px minmax(0, 1fr);
      gap: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
      min-width: 0;
      cursor: pointer;
    }

    .customer-offer-compact-card:focus-visible {
      outline: 3px solid rgba(12, 77, 162, .28);
      outline-offset: 2px;
      border-color: var(--mobil-blue);
    }

    .customer-offer-compact-image {
      width: 100%;
      height: 100%;
      min-height: 166px;
      background: #f3f6f4;
      display: grid;
      place-items: center;
      padding: 4px;
    }

    .customer-offer-image-button {
      width: 100%;
      height: 100%;
      min-height: inherit;
      border: 0;
      padding: 0;
      background: transparent;
      display: grid;
      place-items: center;
      cursor: pointer;
    }

    .customer-offer-compact-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
      border-radius: 6px;
    }

    .customer-offer-compact-body {
      min-width: 0;
      padding: 12px;
      display: grid;
      gap: 8px;
      align-content: start;
      border-left: 1px solid var(--line);
    }

    .customer-offer-compact-body h3 {
      margin: 0;
      color: #0f172a;
      font-size: 1.06rem;
      line-height: 1.22;
      overflow-wrap: anywhere;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .customer-offer-compact-body > strong {
      color: #0f172a;
      line-height: 1.25;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .customer-offer-title-button {
      border: 0;
      padding: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
      font: inherit;
      font-weight: 900;
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    .customer-offer-compact-body p {
      margin: 0;
      color: #475569;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .customer-offer-compact-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .customer-offer-mini-stat {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      padding: 8px;
      min-width: 0;
    }

    .customer-offer-mini-stat span {
      display: block;
      color: #64748b;
      font-size: .73rem;
      font-weight: 900;
    }

    .customer-offer-mini-stat strong {
      display: block;
      color: #0f172a;
      font-size: .86rem;
      overflow-wrap: anywhere;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .customer-offer-load-more {
      padding: 0 16px 16px;
      display: flex;
      justify-content: center;
    }

    #customer-offers .customer-offers-list {
      padding: 0;
      gap: 0;
    }

    .customer-offer-empty-stage {
      margin: 0 16px 16px;
    }

    .customer-offer-focused-stage {
      display: grid;
      gap: 12px;
      margin: 0 16px 16px;
      min-width: 0;
    }

    .customer-offer-detail-head {
      border: 1px solid #cfdaea;
      border-radius: 8px;
      background: #fff;
      padding: 10px 12px;
    }

    .customer-offer-focused-stage .offer-detail-content {
      grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
      align-items: start;
    }

    .customer-offer-focused-stage .offer-detail-flyer {
      position: sticky;
      top: 84px;
    }

    .customer-offer-focused-stage .offer-detail-actions {
      bottom: 0;
    }

    @media (min-width: 1100px) {
      #customer-offers .customer-offer-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #customer-offers .customer-offer-compact-card {
        grid-template-columns: 144px minmax(0, 1fr);
      }
    }

    .offer-detail-modal {
      width: min(860px, 100%);
      padding: 16px;
    }

    .offer-detail-content {
      display: grid;
      gap: 12px;
    }

    .offer-detail-flyer {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f6f8fa;
      overflow: hidden;
      display: grid;
      place-items: center;
      min-height: 240px;
    }

    .offer-detail-flyer img {
      width: 100%;
      max-height: min(66dvh, 620px);
      object-fit: contain;
      display: block;
      background: #f6f8fa;
    }

    .offer-detail-summary {
      display: grid;
      gap: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 12px;
    }

    .offer-detail-summary h3 {
      margin: 0;
      color: #0f172a;
      font-size: 1.25rem;
      line-height: 1.2;
    }

    .offer-detail-summary p {
      margin: 0;
      color: #475569;
      line-height: 1.45;
    }

    .offer-detail-facts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .offer-detail-fact,
    .offer-detail-terms {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      padding: 10px;
      min-width: 0;
    }

    .offer-detail-fact span,
    .offer-detail-terms span {
      display: block;
      color: #64748b;
      font-size: .74rem;
      font-weight: 900;
      margin-bottom: 3px;
    }

    .offer-detail-fact strong,
    .offer-detail-terms p {
      color: #0f172a;
      font-size: .9rem;
      margin: 0;
      overflow-wrap: anywhere;
    }

    .offer-detail-workshops {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .offer-detail-actions {
      position: sticky;
      bottom: -16px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      padding: 10px 0 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, .78), #fff 32%);
    }

    @media (max-width: 820px) {
      .customer-offer-hybrid-panel > .panel-head {
        padding: 10px 12px 8px;
      }

      .customer-offer-hybrid-panel > .panel-head .sub {
        display: none;
      }

      .customer-offer-browser {
        padding: 0 12px 12px;
      }

      .customer-offer-overview {
        padding: 10px;
        gap: 10px;
      }

      .customer-offer-overview-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .customer-offer-overview-card {
        min-height: 84px;
        grid-template-columns: 34px minmax(0, 1fr) 15px;
        gap: 7px;
        padding: 9px;
      }

      .customer-offer-overview-icon {
        width: 34px;
        height: 34px;
      }

      .customer-offer-overview-copy strong {
        font-size: 1.08rem;
      }

      .customer-offer-overview-copy small {
        display: none;
      }

      .customer-offer-tools {
        padding: 8px;
      }

      .customer-offer-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .customer-offer-filter-grid label:last-child {
        grid-column: 1 / -1;
      }

      .customer-offer-filter-grid select,
      .customer-offer-filter-grid input {
        min-height: 44px;
        padding: 7px 8px;
      }

      .customer-offer-topline {
        gap: 6px;
      }

      .customer-offer-list-navigation,
      .customer-offer-detail-head {
        align-items: flex-start;
      }

      .customer-offer-list-navigation p,
      .customer-offer-detail-head p {
        display: none;
      }

      .customer-offer-list-navigation .actions .btn span {
        display: none;
      }

      .customer-offer-topline .sub {
        display: none;
      }

      .customer-offer-chips {
        gap: 6px;
      }

      .customer-offer-chip {
        min-height: 34px;
        padding: 7px 9px;
      }

      .customer-offer-section-head,
      .customer-offer-results,
      .customer-offer-load-more {
        padding-left: 12px;
        padding-right: 12px;
      }

      .customer-offer-results {
        gap: 10px;
      }

      .customer-offer-compact-card {
        grid-template-columns: 112px minmax(0, 1fr);
      }

      .customer-offer-compact-image {
        min-height: 142px;
        padding: 5px;
      }

      .customer-offer-compact-body {
        padding: 9px;
        gap: 6px;
      }

      .customer-offer-compact-body .offer-meta {
        gap: 5px;
      }

      .customer-offer-compact-body .badge {
        padding: 4px 7px;
        font-size: .72rem;
      }

      .customer-offer-compact-body h3 {
        font-size: .9rem;
        line-height: 1.18;
      }

      .customer-offer-compact-body > strong {
        font-size: .84rem;
        line-height: 1.2;
      }

      .customer-offer-compact-body p {
        display: none;
      }

      .customer-offer-compact-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }

      .customer-offer-mini-stat {
        padding: 5px 6px;
      }

      .customer-offer-mini-stat span {
        font-size: .66rem;
      }

      .customer-offer-mini-stat strong {
        font-size: .74rem;
        line-height: 1.15;
      }

      .customer-offer-compact-body .offer-bottom-cta {
        min-height: 44px;
        padding: 0 9px;
        gap: 6px;
        font-size: .84rem;
        margin-top: 1px;
      }

      .customer-offer-compact-body .offer-bottom-cta svg {
        width: 17px;
        height: 17px;
      }

      .customer-offer-empty-stage,
      .customer-offer-focused-stage {
        margin-left: 12px;
        margin-right: 12px;
        margin-bottom: 12px;
      }

      .customer-offer-focused-stage .offer-detail-content {
        grid-template-columns: 1fr;
      }

      .customer-offer-focused-stage .offer-detail-flyer {
        position: static;
      }

      .offer-detail-modal {
        padding: 12px;
      }

      .offer-detail-flyer {
        min-height: 180px;
      }

      .offer-detail-summary {
        padding: 10px;
        gap: 8px;
      }

      .offer-detail-summary h3 {
        font-size: 1.02rem;
      }

      .offer-detail-summary p {
        font-size: .9rem;
      }

      .offer-detail-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .offer-detail-terms {
        grid-column: 1 / -1;
      }

      .offer-detail-actions {
        bottom: -12px;
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 390px) {
      .customer-offer-overview-card {
        grid-template-columns: 30px minmax(0, 1fr) 14px;
        min-height: 80px;
        padding: 8px;
      }

      .customer-offer-overview-icon {
        width: 30px;
        height: 30px;
      }

      .customer-offer-overview-icon svg {
        width: 17px;
        height: 17px;
      }

      .customer-offer-overview-copy span {
        font-size: .68rem;
      }

      .customer-offer-compact-card {
        grid-template-columns: 106px minmax(0, 1fr);
      }

      .customer-offer-compact-image {
        min-height: 138px;
      }

      .customer-offer-compact-body .offer-meta {
        gap: 5px;
      }
    }

    .service-catalogue-toolbar {
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 14px 16px 0;
      flex-wrap: wrap;
    }

    .service-catalogue-breadcrumb {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      color: var(--muted);
      font-weight: 850;
    }

    .service-catalogue-breadcrumb button {
      border: 0;
      background: #eef5ff;
      color: var(--mobil-blue-dark);
      border-radius: 999px;
      padding: 6px 10px;
      font: inherit;
      cursor: pointer;
    }

    .service-catalogue-mode-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-weight: 850;
    }

    .service-catalogue-mode-toggle select {
      min-height: 38px;
      width: auto;
    }

    .service-catalogue-builder-panel {
      margin: 14px 16px 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .service-catalogue-builder-panel[hidden] {
      display: none;
    }

    .service-catalogue-switches {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      align-items: center;
      color: var(--muted);
      font-weight: 850;
    }

    /* Service Catalogue compact hybrid: choose one focused workspace at a time. */
    #service-catalogue.service-catalogue-compact-hybrid > .panel-head .actions {
      display: none;
    }

    #service-catalogue.service-catalogue-compact-hybrid > .panel-head {
      padding-bottom: 13px;
    }

    .service-catalogue-compact-shell {
      margin: 0 14px 12px;
      overflow: hidden;
      border: 1px solid #cfdeed;
      border-radius: 15px;
      background: #f8fbff;
    }

    .service-catalogue-compact-shell[hidden],
    .service-catalogue-compact-detail-head[hidden] {
      display: none !important;
    }

    .service-catalogue-compact-overview {
      display: grid;
      grid-template-columns: minmax(210px, .72fr) minmax(0, 2.28fr);
      gap: 14px;
      align-items: center;
      padding: 13px;
    }

    .service-catalogue-compact-intro {
      display: grid;
      gap: 3px;
      padding: 0 8px;
    }

    .service-catalogue-compact-intro > span {
      color: var(--mobil-blue);
      font-size: .68rem;
      font-weight: 950;
      letter-spacing: .08em;
    }

    .service-catalogue-compact-intro h3,
    .service-catalogue-compact-intro p,
    .service-catalogue-compact-detail-copy h3,
    .service-catalogue-compact-detail-copy p {
      margin: 0;
    }

    .service-catalogue-compact-intro h3,
    .service-catalogue-compact-detail-copy h3 {
      font-size: .96rem;
    }

    .service-catalogue-compact-intro p {
      color: var(--muted);
      font-size: .77rem;
      line-height: 1.4;
    }

    .service-catalogue-compact-selector {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .service-catalogue-compact-selector > button {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
      min-height: 72px;
      padding: 10px 11px;
      border: 1px solid #d5e1ee;
      border-radius: 12px;
      background: #fff;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .service-catalogue-compact-selector > button:hover,
    .service-catalogue-compact-selector > button.active {
      border-color: var(--mobil-blue);
      background: #eef5ff;
      box-shadow: 0 0 0 2px rgba(12, 77, 162, .07);
    }

    .service-catalogue-compact-selector > button > span:nth-child(2) {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .service-catalogue-compact-selector strong,
    .service-catalogue-compact-selector small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .service-catalogue-compact-selector strong {
      font-size: .82rem;
    }

    .service-catalogue-compact-selector small {
      color: var(--muted);
      font-size: .7rem;
    }

    .service-catalogue-compact-icon {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 10px;
      background: #edf5ff;
      color: var(--mobil-blue);
    }

    .service-catalogue-compact-icon svg {
      width: 18px;
      height: 18px;
    }

    .service-catalogue-compact-next {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      color: var(--mobil-blue);
      font-size: .69rem;
      font-weight: 900;
    }

    .service-catalogue-compact-next svg {
      width: 15px;
      height: 15px;
    }

    .service-catalogue-compact-detail-head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 11px 12px;
    }

    .service-catalogue-compact-detail-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .service-catalogue-compact-detail-copy p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .service-catalogue-compact-home {
      white-space: nowrap;
    }

    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="overview"] > .service-catalogue-toolbar,
    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="overview"] > .service-catalogue-selection,
    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="overview"] > .service-catalogue-builder-panel,
    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="overview"] > #serviceCatalogueStatus,
    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="overview"] > .service-catalogue-grid,
    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="layout"] > .service-catalogue-toolbar,
    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="layout"] > .service-catalogue-selection,
    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="layout"] > #serviceCatalogueStatus,
    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="layout"] > .service-catalogue-grid,
    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="editor"] > .service-catalogue-toolbar,
    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="editor"] > .service-catalogue-selection,
    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="editor"] > #serviceCatalogueStatus,
    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="editor"] > .service-catalogue-grid {
      display: none !important;
    }

    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="catalogue"] > .service-catalogue-builder-panel,
    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="manage"] > .service-catalogue-builder-panel {
      display: none !important;
    }

    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="layout"] [data-service-catalogue-builder-section="editor"],
    #service-catalogue.service-catalogue-compact-hybrid[data-catalogue-compact-view="editor"] [data-service-catalogue-builder-section="layout"] {
      display: none !important;
    }

    #service-catalogue.service-catalogue-compact-hybrid .service-catalogue-toolbar {
      padding: 2px 16px 0;
    }

    #service-catalogue.service-catalogue-compact-hybrid .service-catalogue-builder-panel {
      margin-top: 0;
    }

    .service-catalogue-editor-panel {
      display: grid;
      gap: 10px;
    }

    .service-catalogue-card-menu {
      position: relative;
    }

    .service-catalogue-card-menu > summary {
      list-style: none;
    }

    .service-catalogue-card-menu > summary::-webkit-details-marker {
      display: none;
    }

    .service-catalogue-card-menu-panel {
      position: absolute;
      right: 0;
      z-index: 12;
      display: grid;
      width: min(230px, 74vw);
      gap: 6px;
      margin-top: 6px;
      padding: 8px;
      border: 1px solid #ccdcec;
      border-radius: 11px;
      background: #fff;
      box-shadow: 0 14px 30px rgba(20, 42, 67, .16);
    }

    .service-catalogue-card-menu-panel .btn {
      width: 100%;
      justify-content: flex-start;
    }

    /* Unified Catalogue compact hybrid: overview, grouped tools, list, and one focused editor. */
    #product-catalogue.product-compact-hybrid > .panel-head .actions,
    #product-catalogue.product-compact-hybrid > #productPageTabs {
      display: none !important;
    }

    #product-catalogue.product-compact-hybrid > .panel-head {
      padding-bottom: 13px;
    }

    .product-compact-overview {
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 15px;
      padding: 18px;
    }

    .product-compact-overview .service-catalogue-compact-intro {
      max-width: none;
      padding: 0 4px 2px;
    }

    .product-compact-overview .service-catalogue-compact-intro h3 {
      font-size: 1.06rem;
    }

    .product-compact-overview .service-catalogue-compact-intro p {
      max-width: 980px;
      font-size: .8rem;
    }

    .product-catalogue-directory {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .product-catalogue-group {
      min-width: 0;
      display: grid;
      grid-template-rows: auto 1fr;
      overflow: hidden;
      border: 1px solid #ccdaea;
      border-radius: 15px;
      background: #fff;
      box-shadow: 0 8px 22px rgba(23, 62, 103, .06);
    }

    .product-catalogue-group[hidden] {
      display: none !important;
    }

    .product-catalogue-group-head {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      min-height: 92px;
      padding: 15px;
      border-bottom: 1px solid #dbe5ef;
      background: linear-gradient(135deg, #f4f8fd 0%, #eef5ff 100%);
    }

    .product-catalogue-group-number {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 999px;
      color: #fff;
      background: var(--mobil-blue);
      font-size: .88rem;
      font-weight: 900;
      box-shadow: 0 5px 12px rgba(0, 82, 170, .2);
    }

    .product-catalogue-group-head h4 {
      margin: 1px 0 4px;
      color: var(--mobil-blue-dark);
      font-size: .92rem;
    }

    .product-catalogue-group-head p {
      margin: 0;
      color: var(--muted);
      font-size: .74rem;
      line-height: 1.38;
    }

    .product-catalogue-group-actions {
      display: grid;
      align-content: start;
      gap: 8px;
      padding: 10px;
    }

    .product-catalogue-group-actions > button {
      min-width: 0;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) 18px;
      gap: 10px;
      align-items: center;
      min-height: 64px;
      padding: 9px 10px;
      border: 1px solid #d7e2ee;
      border-radius: 11px;
      color: var(--ink);
      background: #fff;
      text-align: left;
      cursor: pointer;
    }

    .product-catalogue-group-actions > button[hidden] {
      display: none !important;
    }

    .product-catalogue-group-actions > button:hover,
    .product-catalogue-group-actions > button.active {
      border-color: var(--mobil-blue);
      background: #eef5ff;
      box-shadow: 0 0 0 2px rgba(12, 77, 162, .06);
    }

    .product-catalogue-group-actions > button > span:nth-child(2) {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .product-catalogue-group-actions strong,
    .product-catalogue-group-actions small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-catalogue-group-actions strong {
      font-size: .82rem;
    }

    .product-catalogue-group-actions small {
      color: var(--muted);
      font-size: .7rem;
    }

    .product-catalogue-group-actions > button > svg:last-child {
      width: 17px;
      height: 17px;
      color: var(--mobil-blue);
    }

    .product-compact-detail-head .service-catalogue-compact-detail-actions {
      min-width: 0;
    }

    #product-catalogue.product-compact-hybrid[data-product-compact-view="overview"] > #productAdminPanel,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="overview"] > #customerOilPackageSection,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="overview"] > #productCatalogueWorkspace,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="items"] > #productAdminPanel,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="items"] > #customerOilPackageSection,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="editor"] > #customerOilPackageSection,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="editor"] > #productCatalogueWorkspace,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="setup"] > #customerOilPackageSection,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="setup"] > #productCatalogueWorkspace,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="brands"] > #customerOilPackageSection,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="brands"] > #productCatalogueWorkspace,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="import"] > #customerOilPackageSection,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="import"] > #productCatalogueWorkspace,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="labour"] > #customerOilPackageSection,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="labour"] > #productCatalogueWorkspace,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="catalogue-link"] > #customerOilPackageSection,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="catalogue-link"] > #productCatalogueWorkspace {
      display: none !important;
    }

    #product-catalogue.product-compact-hybrid #productAdminList,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="items"] #productForm,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="setup"] #productForm,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="brands"] #productForm,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="import"] #productForm,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="labour"] #productForm,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="catalogue-link"] #productForm {
      display: none !important;
    }

    #product-catalogue.product-compact-hybrid[data-product-compact-view="editor"] #productForm {
      display: block !important;
    }

    #product-catalogue.product-compact-hybrid[data-product-compact-view="editor"] #productAdminPanel,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="setup"] #productAdminPanel,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="brands"] #productAdminPanel,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="import"] #productAdminPanel,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="labour"] #productAdminPanel,
    #product-catalogue.product-compact-hybrid[data-product-compact-view="catalogue-link"] #productAdminPanel {
      display: block !important;
    }

    #product-catalogue.product-compact-hybrid #productAdminPanel {
      padding-top: 2px;
    }

    #product-catalogue.product-compact-hybrid #productAdminPanel > .product-admin-toolbar {
      display: none;
    }

    #product-catalogue.product-compact-hybrid #productCatalogueWorkspace {
      padding-top: 2px;
    }

    .product-card-compact-menu {
      position: relative;
    }

    .product-card-compact-menu > summary {
      list-style: none;
    }

    .product-card-compact-menu > summary::-webkit-details-marker {
      display: none;
    }

    .product-card-compact-menu-panel {
      position: absolute;
      right: 0;
      z-index: 12;
      display: grid;
      width: min(210px, 72vw);
      gap: 6px;
      margin-top: 6px;
      padding: 8px;
      border: 1px solid #ccdcec;
      border-radius: 11px;
      background: #fff;
      box-shadow: 0 14px 30px rgba(20, 42, 67, .16);
    }

    .product-card-compact-menu-panel .btn {
      width: 100% !important;
      justify-content: flex-start !important;
    }

    .item-master-placement {
      grid-column: 1;
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      color: #31536f;
      font-size: .75rem;
      line-height: 1.25;
    }

    .item-master-placement svg {
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
    }

    .item-master-placement.is-published {
      color: #17643d;
    }

    .item-master-placement.is-attention {
      color: #965c08;
    }

    @media (max-width: 1180px) {
      .product-catalogue-directory {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      #product-catalogue.product-compact-hybrid > .panel-head {
        padding: 12px 12px 10px;
      }

      .product-compact-overview {
        padding: 12px;
      }

      .product-catalogue-directory {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .product-catalogue-group-head {
        min-height: 0;
        padding: 12px;
      }

      #product-catalogue.product-compact-hybrid #productAdminPanel,
      #product-catalogue.product-compact-hybrid #productCatalogueWorkspace {
        padding: 10px;
      }

      #product-catalogue.product-compact-hybrid #productForm {
        padding: 0;
      }

      .product-card-compact-menu-panel {
        position: fixed;
        right: 12px;
        bottom: calc(72px + env(safe-area-inset-bottom));
        left: 12px;
        width: auto;
      }
    }

    .access-permission-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      padding: 12px;
      margin: 4px 0 10px;
    }

    .access-permission-grid[hidden] {
      display: none !important;
    }

    .access-wizard-shell {
      overflow: hidden;
      margin-top: 14px;
      border: 1px solid #cddcec;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(12, 77, 162, .08);
    }

    .access-wizard-intro {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: flex-start;
      padding: 18px 18px 14px;
      background: linear-gradient(135deg, #f7fbff 0%, #edf5ff 100%);
      border-bottom: 1px solid #d7e4f2;
    }

    .access-wizard-intro h3,
    .access-wizard-intro p,
    .access-wizard-prompt h3,
    .access-wizard-prompt p {
      margin: 0;
    }

    .access-wizard-intro h3,
    .access-wizard-prompt h3 {
      color: var(--ink);
    }

    .access-wizard-intro p,
    .access-wizard-prompt p {
      margin-top: 4px;
      color: var(--muted);
      line-height: 1.45;
    }

    .access-wizard-steps {
      padding: 12px 18px;
      border-bottom: 1px solid #e0e8f1;
      background: #fff;
    }

    .access-wizard-panel {
      display: grid;
      gap: 16px;
      padding: 20px;
    }

    .access-wizard-panel[hidden] {
      display: none !important;
    }

    .access-wizard-prompt {
      display: grid;
      gap: 2px;
    }

    .access-role-card-grid,
    .access-workshop-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }

    .access-role-card,
    .access-workshop-card {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 76px;
      padding: 13px 14px;
      border: 1px solid #d7e3f0;
      border-radius: 13px;
      background: #fff;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    }

    .access-role-card:hover,
    .access-workshop-card:hover {
      border-color: #96b9e3;
      background: #f8fbff;
    }

    .access-role-card.selected,
    .access-workshop-card.selected {
      border-color: var(--mobil-blue);
      background: #eaf3ff;
      box-shadow: 0 0 0 2px rgba(12, 77, 162, .09);
    }

    .access-role-card > svg,
    .access-workshop-card > svg {
      width: 25px;
      height: 25px;
      color: var(--mobil-blue);
    }

    .access-role-card span,
    .access-workshop-card span {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .access-role-card strong,
    .access-workshop-card strong {
      font-size: .94rem;
      line-height: 1.2;
    }

    .access-role-card small,
    .access-workshop-card small {
      color: var(--muted);
      font-size: .77rem;
      line-height: 1.3;
    }

    .access-role-card::after,
    .access-workshop-card::after {
      content: "";
      width: 18px;
      height: 18px;
      border: 2px solid #b7c7d8;
      border-radius: 999px;
      background: #fff;
    }

    .access-role-card.selected::after,
    .access-workshop-card.selected::after {
      border-color: var(--mobil-blue);
      background: var(--mobil-blue);
      box-shadow: inset 0 0 0 4px #fff;
    }

    .access-role-native-label {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .access-workshop-native-select {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .access-permission-empty {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      padding: 16px;
      border: 1px solid #cce2d5;
      border-radius: 13px;
      background: #f0fbf5;
      color: #0a6d3a;
    }

    .access-permission-empty[hidden] {
      display: none !important;
    }

    .access-permission-empty > svg {
      width: 28px;
      height: 28px;
    }

    .access-permission-empty div {
      display: grid;
      gap: 3px;
    }

    .access-permission-empty span {
      color: #3f6f57;
      font-size: .82rem;
    }

    .access-wizard-footer {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      padding-top: 4px;
    }

    .access-wizard-review {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .access-wizard-review-card {
      min-width: 0;
      display: grid;
      gap: 5px;
      padding: 14px;
      border: 1px solid #d9e4ef;
      border-radius: 12px;
      background: #f8fbff;
    }

    .access-wizard-review-card span {
      color: var(--muted);
      font-size: .74rem;
      font-weight: 850;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .access-wizard-review-card strong {
      color: var(--ink);
      overflow-wrap: anywhere;
    }

    .access-wizard-review-card.wide {
      grid-column: 1 / -1;
    }

    .access-wizard-save {
      min-width: 190px;
    }

    .access-permission-heading {
      grid-column: 1 / -1;
      display: grid;
      gap: 3px;
    }

    .access-permission-heading strong {
      color: var(--ink);
    }

    .access-permission-toggle {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      align-items: start;
      padding: 8px;
      border: 1px solid #dde6ef;
      border-radius: 7px;
      background: #fff;
      color: var(--ink);
      cursor: pointer;
    }

    .access-permission-toggle input {
      width: 18px;
      height: 18px;
      margin: 1px 0 0;
      accent-color: var(--mobil-blue);
    }

    .access-permission-toggle-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .access-permission-toggle-copy strong {
      color: var(--ink);
      font-size: .86rem;
      line-height: 1.2;
    }

    .access-permission-toggle-copy .sub {
      font-size: .76rem;
      line-height: 1.3;
    }

    .access-customer-loyalty-panel .field-grid,
    .access-customer-loyalty-panel > .sub {
      grid-column: 1 / -1;
      margin: 0;
    }

    .access-customer-loyalty-balance {
      color: var(--mobil-blue-dark);
      font-weight: 800;
    }

    .membership-tier-media-grid,
    .membership-customer-grid,
    .loyalty-campaign-admin-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 12px;
    }

    .membership-settings-head {
      padding-bottom: 2px;
    }

    .membership-benefit-editor {
      display: grid;
      gap: 12px;
      border: 1px solid #d8e4f1;
      border-radius: 10px;
      background: #ffffff;
      padding: 13px;
    }

    .membership-benefit-editor-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 10px;
    }

    .membership-benefit-editor-card {
      min-width: 0;
      display: grid;
      gap: 8px;
      border: 1px solid #dce6f0;
      border-radius: 8px;
      background: #fbfdff;
      padding: 10px;
    }

    .membership-benefit-editor-card > span {
      color: var(--mobil-blue-dark);
      font-size: .8rem;
      font-weight: 900;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .membership-benefit-editor-card textarea {
      min-height: 104px;
      background: #fff;
      line-height: 1.4;
    }

    @media (max-width: 560px) {
      .promotion-message-head,
      .membership-settings-head,
      .membership-benefit-editor-head {
        flex-direction: column;
      }

      .membership-benefit-editor-grid {
        grid-template-columns: 1fr;
      }
    }

    .membership-tier-media-card,
    .membership-benefit-card,
    .loyalty-campaign-admin-card {
      min-width: 0;
      border: 1px solid #d8e4f1;
      border-radius: 10px;
      background: #fff;
      padding: 12px;
    }

    .membership-tier-media-card {
      display: grid;
      gap: 9px;
    }

    .membership-tier-media-card h4,
    .membership-benefit-card h3,
    .loyalty-campaign-admin-card h4 {
      margin: 0;
      color: var(--mobil-blue-dark);
    }

    .membership-tier-media-card label,
    .membership-benefit-card,
    .loyalty-campaign-admin-card {
      min-width: 0;
    }

    .membership-customer-grid {
      margin: 12px 0;
    }

    .membership-benefit-card {
      display: grid;
      gap: 8px;
    }

    .membership-benefit-card.current {
      border-color: rgba(8, 89, 181, .55);
      background: #f5f9ff;
      box-shadow: 0 5px 14px rgba(8, 89, 181, .1);
    }

    .membership-benefit-card img,
    .loyalty-campaign-card img {
      width: 100%;
      max-height: 150px;
      object-fit: cover;
      border-radius: 7px;
      background: #edf3fa;
    }

    .membership-benefit-card p,
    .loyalty-campaign-card p,
    .loyalty-campaign-admin-card p {
      margin: 0;
      color: var(--muted);
      white-space: pre-line;
    }

    .membership-benefit-card .actions,
    .loyalty-campaign-admin-card .actions {
      margin: 0;
    }

    .loyalty-campaign-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(140px, 230px);
      gap: 12px;
      margin: 12px 0;
      border: 1px solid #e7b64b;
      border-radius: 10px;
      background: #fff8e8;
      padding: 12px;
    }

    .loyalty-campaign-card strong {
      color: #8a5600;
    }

    .membership-program-save-status {
      align-self: center;
    }

    @media (max-width: 560px) {
      .loyalty-campaign-card {
        grid-template-columns: 1fr;
      }
    }

    .access-filter-panel {
      display: grid;
      margin: 14px 0;
      overflow: hidden;
      border: 1px solid #ccdaea;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(12, 77, 162, .07);
    }

    .access-filter-launcher {
      width: 100%;
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 15px 16px;
      border: 0;
      background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
      color: var(--ink);
      text-align: left;
      cursor: default;
    }

    .access-filter-launcher > .access-filter-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: #dcecff;
      color: var(--mobil-blue);
    }

    .access-filter-launcher > .access-filter-icon svg {
      width: 22px;
      height: 22px;
    }

    .access-filter-launcher-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .access-filter-launcher-copy strong {
      color: var(--ink);
      font-size: 1rem;
    }

    .access-filter-launcher-copy span {
      overflow: hidden;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 750;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .access-filter-count {
      min-width: 70px;
      padding: 7px 10px;
      border: 1px solid #bdd4ee;
      border-radius: 999px;
      background: #fff;
      color: var(--mobil-blue-dark);
      font-size: .78rem;
      font-weight: 900;
      text-align: center;
      white-space: nowrap;
    }

    .access-filter-body {
      display: grid;
      gap: 16px;
      padding: 17px 16px 16px;
      border-top: 1px solid #dbe6f1;
      background: #fff;
    }

    .access-filter-body[hidden],
    .access-filter-progressive[hidden] {
      display: none !important;
    }

    .access-filter-heading,
    .access-filter-progressive {
      display: grid;
      gap: 8px;
    }

    .access-filter-heading strong,
    .access-filter-progressive strong {
      color: var(--ink);
      font-size: .95rem;
    }

    .access-filter-choice-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 9px;
    }

    .access-filter-choice {
      min-width: 0;
      min-height: 64px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 11px 12px;
      border: 1px solid #d5e1ee;
      border-radius: 12px;
      background: #fff;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .access-filter-choice:hover {
      border-color: #91b6df;
      background: #f7fbff;
    }

    .access-filter-choice.selected {
      border-color: var(--mobil-blue);
      background: #eaf3ff;
      box-shadow: 0 0 0 2px rgba(12, 77, 162, .08);
    }

    .access-filter-choice > svg {
      width: 22px;
      height: 22px;
      color: var(--mobil-blue);
    }

    .access-filter-choice span {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .access-filter-choice strong {
      font-size: .88rem;
      line-height: 1.2;
    }

    .access-filter-choice small {
      color: var(--muted);
      font-size: .73rem;
      line-height: 1.25;
    }

    .access-filter-choice::after {
      content: "";
      width: 16px;
      height: 16px;
      border: 2px solid #b7c7d8;
      border-radius: 999px;
      background: #fff;
    }

    .access-filter-choice.selected::after {
      border-color: var(--mobil-blue);
      background: var(--mobil-blue);
      box-shadow: inset 0 0 0 3px #fff;
    }

    .access-filter-native-controls {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      margin: -1px !important;
      padding: 0 !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .access-filter-customer-search {
      display: grid;
      gap: 5px;
      max-width: 660px;
    }

    .access-filter-customer-search input {
      text-transform: none;
    }

    .access-filter-panel .actions {
      margin: 0;
      align-items: center;
    }

    #accessFilterSummary {
      min-width: 0;
      flex: 1 1 280px;
      align-self: center;
    }

    @media (max-width: 640px) {
      .access-wizard-intro {
        padding: 15px;
      }
      .access-wizard-intro .badge {
        flex: 0 0 auto;
      }
      .access-wizard-steps {
        padding: 10px 14px;
      }
      .access-wizard-panel {
        gap: 14px;
        padding: 16px 14px;
      }
      .access-role-card-grid,
      .access-workshop-card-grid,
      .access-wizard-review {
        grid-template-columns: 1fr;
      }
      .access-role-card,
      .access-workshop-card {
        min-height: 70px;
      }
      .access-wizard-review-card.wide {
        grid-column: auto;
      }
      .access-wizard-footer {
        display: grid;
        grid-template-columns: 1fr;
      }
      .access-wizard-footer .sub {
        order: 3;
      }
      .access-wizard-footer .btn,
      .access-wizard-save {
        width: 100%;
      }
      .access-workshop-field-head {
        align-items: stretch;
      }
      .access-filter-launcher {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
        padding: 13px;
      }
      .access-filter-count {
        grid-column: 2;
        justify-self: start;
        min-width: 0;
        padding: 5px 9px;
      }
      .access-filter-choice-grid {
        grid-template-columns: 1fr;
      }
      .access-filter-body .actions {
        display: grid;
        grid-template-columns: 1fr;
      }
      .access-filter-body .actions .btn {
        width: 100%;
      }
    }

    .service-catalogue-selection {
      margin: 12px 16px 0;
    }

    .service-catalogue-selection-card {
      border: 1px solid rgba(12, 77, 162, .25);
      border-radius: 8px;
      background: #eef5ff;
      padding: 12px;
      display: flex;
      gap: 10px;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }

    .service-catalogue-grid {
      padding: 16px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 12px;
    }

    .service-catalogue-card {
      position: relative;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 12px;
      min-width: 0;
      display: grid;
      gap: 10px;
      box-shadow: 0 6px 16px rgba(24, 33, 31, .04);
    }

    .service-catalogue-card[draggable="true"] {
      cursor: grab;
    }

    .service-catalogue-card.is-hidden-node,
    .service-catalogue-card.is-inactive-node {
      opacity: .72;
      background: #f8fafc;
      border-style: dashed;
    }

    .service-catalogue-card-head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
    }

    .service-catalogue-icon {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: #eef5ff;
      color: var(--mobil-blue);
      overflow: hidden;
    }

    .service-catalogue-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      padding: 0;
      background: transparent;
      border-radius: inherit;
      mix-blend-mode: multiply;
    }

    .service-catalogue-icon svg {
      width: 22px;
      height: 22px;
    }

    .service-catalogue-card h3 {
      margin: 0;
      color: var(--ink);
      font-size: 1rem;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .service-catalogue-card p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: .86rem;
      line-height: 1.35;
    }

    .service-catalogue-card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .service-catalogue-card-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .service-catalogue-card-actions .btn {
      min-height: 36px;
      padding: 0 10px;
    }

    .service-catalogue-icon-editor {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fbff;
      padding: 12px;
      display: grid;
      gap: 12px;
    }

    .service-catalogue-icon-editor-head {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .service-catalogue-icon-preview {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 180px;
    }

    .service-catalogue-icon-preview .service-catalogue-icon {
      width: 54px;
      height: 54px;
      flex: 0 0 auto;
    }

    .service-catalogue-icon-preview .service-catalogue-icon svg {
      width: 30px;
      height: 30px;
    }

    .service-catalogue-icon-picker {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
      gap: 8px;
    }

    .service-catalogue-icon-option {
      min-height: 72px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      display: grid;
      place-items: center;
      gap: 4px;
      padding: 8px 6px;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
    }

    .service-catalogue-icon-option svg {
      width: 25px;
      height: 25px;
      color: var(--mobil-blue);
    }

    .service-catalogue-icon-option span {
      font-size: .74rem;
      line-height: 1.1;
      color: var(--muted);
      text-align: center;
    }

    .service-catalogue-icon-option.is-selected {
      border-color: var(--mobil-blue);
      box-shadow: 0 0 0 3px rgba(12, 77, 162, .12);
      background: #eef5ff;
    }

    .catalogue-drag-handle {
      color: var(--muted);
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: #f1f5f9;
    }

    .service-catalogue-layout-panel {
      display: grid;
      gap: 10px;
      margin: 12px 12px 14px;
      padding: 12px;
      border: 1px solid rgba(12, 77, 162, .16);
      border-radius: 8px;
      background: #f8fbff;
    }

    .service-catalogue-layout-panel h3 {
      margin: 0 0 3px;
      color: var(--mobil-blue-dark);
      font-size: 1rem;
    }

    .form-inline-note {
      align-self: end;
      margin: 0 0 8px;
    }

    #serviceCatalogueStatus {
      display: block;
      padding: 10px 16px 0;
    }

    #service-catalogue.customer-service-browser {
      --customer-service-mobile-columns: 3;
      --customer-service-desktop-columns: 5;
      --customer-service-icon-size: 78px;
      --customer-service-icon-label-width: 88px;
      background: #f8fbff;
    }

    #service-catalogue.customer-service-browser #serviceCataloguePanelHead,
    #service-catalogue.customer-service-browser #serviceCatalogueStatus,
    #service-catalogue.customer-service-browser .service-catalogue-selection {
      display: none;
    }

    #service-catalogue.customer-service-browser .service-catalogue-toolbar {
      padding: 10px 14px 4px;
      gap: 8px;
    }

    #service-catalogue.customer-service-browser #serviceCatalogueBackBtn {
      min-height: 38px;
      padding: 0 12px;
      font-size: .9rem;
      border-radius: 8px;
    }

    #service-catalogue.customer-service-browser #serviceCatalogueBackBtn[hidden] {
      display: none;
    }

    #service-catalogue.customer-service-browser .service-catalogue-breadcrumb {
      font-size: .84rem;
      gap: 5px;
    }

    #service-catalogue.customer-service-browser .service-catalogue-breadcrumb button {
      padding: 5px 9px;
      background: #eef5ff;
      box-shadow: none;
    }

    #service-catalogue.customer-service-browser .service-catalogue-grid {
      padding: 10px 12px 96px;
      grid-template-columns: repeat(var(--customer-service-desktop-columns, 5), minmax(92px, 1fr));
      gap: 14px 8px;
      align-items: start;
    }

    #service-catalogue.customer-service-browser .service-catalogue-card {
      cursor: pointer;
      padding: 4px 2px;
      gap: 6px;
      min-height: 92px;
      border-color: transparent;
      background: transparent;
      box-shadow: none;
      justify-items: center;
      align-content: start;
      transition: transform .15s ease, opacity .15s ease;
    }

    #service-catalogue.customer-service-browser .service-catalogue-card:active {
      transform: translateY(1px);
      opacity: .82;
    }

    #service-catalogue.customer-service-browser .service-catalogue-card-head {
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      align-items: center;
      gap: 7px;
      text-align: center;
      width: 100%;
    }

    #service-catalogue.customer-service-browser .service-catalogue-icon {
      width: var(--customer-service-icon-size, 78px);
      height: var(--customer-service-icon-size, 78px);
      border-radius: calc(var(--customer-service-icon-size, 78px) * .24);
      box-shadow: 0 8px 18px rgba(12, 77, 162, .08);
    }

    #service-catalogue.customer-service-browser .service-catalogue-icon img {
      object-fit: cover;
      padding: 0;
      border-radius: inherit;
      mix-blend-mode: multiply;
    }

    #service-catalogue.customer-service-browser .service-catalogue-icon img.is-brand-logo {
      object-fit: contain;
      padding: 9px;
      background: #fff;
      mix-blend-mode: normal;
    }

    #service-catalogue.customer-service-browser .service-catalogue-icon svg {
      width: calc(var(--customer-service-icon-size, 78px) * .5);
      height: calc(var(--customer-service-icon-size, 78px) * .5);
    }

    #service-catalogue.customer-service-browser .service-catalogue-card h3 {
      width: min(var(--customer-service-icon-label-width, 88px), 100%);
      margin: 0 auto;
      font-size: .76rem;
      line-height: 1.18;
      font-weight: 900;
      text-align: center;
    }

    #service-catalogue.customer-service-browser .service-catalogue-card p,
    #service-catalogue.customer-service-browser .service-catalogue-card-meta,
    #service-catalogue.customer-service-browser .service-catalogue-card-actions {
      display: none;
    }

    .customer-service-card-hint {
      color: var(--muted);
      font-size: .76rem;
      font-weight: 850;
      display: none;
      align-items: center;
      gap: 4px;
    }

    .customer-service-card-hint svg {
      width: 14px;
      height: 14px;
    }

    @media (max-width: 640px) {
      #service-catalogue.service-catalogue-compact-hybrid > .panel-head {
        padding: 12px 12px 10px;
      }

      .service-catalogue-compact-shell {
        margin: 0 10px 10px;
        border-radius: 13px;
      }

      .service-catalogue-compact-overview {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 10px;
      }

      .service-catalogue-compact-intro {
        padding: 2px 3px 5px;
      }

      .service-catalogue-compact-selector {
        grid-template-columns: 1fr;
        gap: 7px;
      }

      .service-catalogue-compact-selector > button {
        min-height: 62px;
        padding: 8px 9px;
      }

      .service-catalogue-compact-detail-head {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 9px;
        padding: 9px;
      }

      .service-catalogue-compact-home {
        width: 42px !important;
        min-width: 42px;
        padding: 8px !important;
      }

      .service-catalogue-compact-home span {
        display: none;
      }

      .service-catalogue-compact-detail-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
      }

      .service-catalogue-compact-detail-actions .btn {
        width: 100%;
        min-width: 0;
      }

      #service-catalogue.service-catalogue-compact-hybrid .service-catalogue-toolbar {
        padding: 1px 10px 0;
      }

      #service-catalogue.service-catalogue-compact-hybrid .service-catalogue-builder-panel {
        margin: 0 10px 10px;
        padding: 10px;
      }

      #service-catalogue.service-catalogue-compact-hybrid .service-catalogue-layout-panel {
        margin: 0;
      }

      .service-catalogue-card-menu-panel {
        position: fixed;
        right: 12px;
        bottom: calc(72px + env(safe-area-inset-bottom));
        left: 12px;
        width: auto;
      }

      .service-catalogue-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px;
      }

      .service-catalogue-card {
        padding: 10px;
      }

      .service-catalogue-card-head {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .catalogue-drag-handle {
        display: none;
      }

      .service-catalogue-card h3 {
        font-size: .9rem;
      }

      .service-catalogue-card p {
        display: none;
      }

      #service-catalogue.customer-service-browser .service-catalogue-grid {
        grid-template-columns: repeat(var(--customer-service-mobile-columns, 3), minmax(0, 1fr));
        padding: 8px 10px 104px;
        gap: 14px 6px;
      }

      #service-catalogue.customer-service-browser .service-catalogue-card {
        min-height: 106px;
      }

      #service-catalogue.customer-service-browser .service-catalogue-icon {
        width: var(--customer-service-icon-size, 78px);
        height: var(--customer-service-icon-size, 78px);
        border-radius: calc(var(--customer-service-icon-size, 78px) * .24);
      }

      #service-catalogue.customer-service-browser .service-catalogue-icon svg {
        width: calc(var(--customer-service-icon-size, 78px) * .5);
        height: calc(var(--customer-service-icon-size, 78px) * .5);
      }

      #service-catalogue.customer-service-browser .service-catalogue-card h3 {
        width: min(var(--customer-service-icon-label-width, 88px), 100%);
        font-size: .72rem;
      }
    }

    @media (max-width: 640px) {
      .customer-product-detail-backdrop {
        padding: 0;
        place-items: stretch;
      }

      .customer-product-detail-modal {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: 0;
      }

      .customer-product-detail-scroll {
        padding: 10px;
      }

      .customer-product-detail-modal .history-card-head h2 {
        font-size: 1.12rem;
      }

      .customer-product-detail-modal .history-card-head .sub,
      .customer-product-detail-summary {
        font-size: .8rem;
      }

      .customer-product-detail-header-price {
        font-size: 1.16rem;
      }

      .customer-product-detail-hero {
        height: min(190px, 30dvh);
      }

      .customer-product-detail-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
      }

      .customer-product-detail-actions {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
      }
    }

    .product-admin-panel,
    .product-catalogue-list {
      padding: 16px;
      display: grid;
      gap: 16px;
    }

    .product-admin-panel[hidden] {
      display: none;
    }

    .product-admin-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
    }

    .product-page-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
      background: #fbfdff;
    }

    .product-page-tabs button {
      min-height: 38px;
      border: 1px solid #d7e2ef;
      border-radius: 8px;
      padding: 0 12px;
      background: #fff;
      color: var(--mobil-blue-dark);
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-weight: 850;
    }

    .product-page-tabs button.active {
      background: var(--mobil-blue);
      border-color: var(--mobil-blue);
      color: #fff;
      box-shadow: 0 6px 16px rgba(12, 77, 162, .16);
    }

    .product-setup-panel {
      margin: 0;
      padding: 16px;
      display: grid;
      gap: 14px;
      border: 1px solid #d8e1ec;
      border-radius: 8px;
      background: #fff;
    }

    .product-setup-panel[hidden],
    [data-product-tab-content][hidden] {
      display: none;
    }

    .product-setup-grid {
      display: grid;
      grid-template-columns: minmax(280px, .86fr) minmax(0, 1.14fr);
      gap: 14px;
    }

    .product-setup-card {
      border: 1px solid #dfe8f4;
      border-radius: 8px;
      background: #fbfdff;
      padding: 14px;
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .product-setup-card h3 {
      margin: 0;
      font-size: 1rem;
    }

    /* product-setup-compact-drilldown-20260813:
       selector-first setup browser with one focused editor at a time. */
    .product-setup-panel.product-setup-compact {
      gap: 12px;
      padding: 12px;
      border-color: #cfdeed;
      background: #f8fbff;
    }

    .product-setup-compact .product-setup-browser {
      display: grid;
      gap: 12px;
    }

    .product-setup-overview-head,
    .product-setup-drilldown-head,
    .product-setup-focus-head,
    .product-setup-value-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .product-setup-overview-head h3,
    .product-setup-drilldown-head h3,
    .product-setup-focus-head h3 {
      margin: 0;
      color: #132238;
      font-size: 1rem;
    }

    .product-setup-overview-head p,
    .product-setup-drilldown-head p,
    .product-setup-focus-head p {
      margin: 3px 0 0;
    }

    .product-setup-kicker {
      display: block;
      margin-bottom: 3px;
      color: #0758a8;
      font-size: .66rem;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .product-setup-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .product-setup-summary > div {
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 1px solid #d8e5f2;
      border-radius: 9px;
      padding: 9px 11px;
      background: #fff;
    }

    .product-setup-summary span {
      color: #53677f;
      font-size: .75rem;
      font-weight: 750;
    }

    .product-setup-summary strong {
      color: #0b315b;
      font-size: 1.2rem;
    }

    .product-setup-native-select {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      clip: rect(0 0 0 0) !important;
      white-space: nowrap !important;
    }

    .product-setup-type-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .product-setup-type-card {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: stretch;
      border: 1px solid #d7e3ef;
      border-radius: 10px;
      background: #fff;
      overflow: hidden;
    }

    .product-setup-type-card.is-selected {
      border-color: #0d66c2;
      background: #eef6ff;
      box-shadow: 0 0 0 2px rgba(13, 102, 194, .1);
    }

    .product-setup-type-card.is-inactive {
      opacity: .68;
      background: #f4f6f8;
    }

    .product-setup-type-open {
      min-width: 0;
      min-height: 70px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      border: 0;
      padding: 9px 10px;
      background: transparent;
      color: #132238;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .product-setup-type-open > svg {
      width: 20px;
      height: 20px;
      color: #0f62bd;
    }

    .product-setup-type-open span,
    .product-setup-type-open strong,
    .product-setup-type-open small {
      display: block;
      min-width: 0;
    }

    .product-setup-type-open strong {
      overflow: hidden;
      font-size: .82rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-setup-type-open small {
      margin-top: 2px;
      color: #64758a;
      font-size: .69rem;
    }

    .product-setup-type-open > span:last-child {
      color: #0758a8;
      font-size: .7rem;
      font-weight: 850;
      white-space: nowrap;
    }

    .product-setup-type-toggle {
      width: 35px;
      min-height: 70px;
      border: 0;
      border-left: 1px solid #e1e9f2;
      background: rgba(238, 246, 255, .58);
      color: #53677f;
      cursor: pointer;
    }

    .product-setup-type-toggle:hover,
    .product-setup-type-toggle:focus-visible {
      background: #e5f1ff;
      color: #0758a8;
      outline: none;
    }

    .product-setup-drilldown,
    .product-setup-focus-editor {
      border: 1px solid #cbdced;
      border-radius: 11px;
      padding: 12px;
      background: #fff;
    }

    .product-setup-drilldown {
      display: grid;
      gap: 10px;
    }

    .product-setup-selected-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .product-setup-selected-stats span {
      border-radius: 999px;
      padding: 5px 9px;
      background: #eef5fc;
      color: #465b72;
      font-size: .72rem;
      font-weight: 750;
    }

    .product-setup-selected-stats strong {
      color: #0758a8;
    }

    .product-setup-value-toolbar {
      align-items: flex-end;
    }

    .product-setup-value-toolbar .search-field {
      width: min(520px, 100%);
      margin: 0;
    }

    .product-setup-value-toolbar small {
      color: #64758a;
      font-size: .7rem;
    }

    .product-setup-compact .product-setup-value-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-height: min(50vh, 520px);
      overflow: auto;
      padding-right: 3px;
    }

    .product-setup-compact .product-master-data-row {
      min-height: 58px;
      background: #fbfdff;
    }

    .product-setup-value-open {
      min-width: 0;
      border: 0;
      padding: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .product-setup-value-open:hover strong,
    .product-setup-value-open:focus-visible strong {
      color: #0758a8;
    }

    .product-setup-value-open:focus-visible {
      outline: 2px solid rgba(13, 102, 194, .2);
      outline-offset: 3px;
    }

    .product-setup-focus-editor {
      display: grid;
      gap: 12px;
      max-width: 980px;
      margin: 0 auto;
    }

    .product-setup-focus-editor[hidden],
    .product-setup-compact[data-product-setup-editor]:not([data-product-setup-editor="none"]) .product-setup-browser {
      display: none !important;
    }

    .product-setup-focus-head {
      justify-content: flex-start;
      align-items: flex-start;
      padding-bottom: 10px;
      border-bottom: 1px solid #dfe8f2;
    }

    .product-setup-focus-head > .btn {
      flex: 0 0 auto;
    }

    .product-setup-editor-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .product-setup-editor-fields > label:only-child,
    .product-setup-editor-fields > .field-grid {
      grid-column: 1 / -1;
    }

    @media (max-width: 1100px) {
      .product-setup-type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      .product-setup-overview-head,
      .product-setup-drilldown-head,
      .product-setup-value-toolbar {
        align-items: stretch;
        flex-direction: column;
      }

      .product-setup-overview-head > .btn,
      .product-setup-drilldown-head .actions,
      .product-setup-drilldown-head .btn {
        width: 100%;
      }

      .product-setup-summary,
      .product-setup-type-grid,
      .product-setup-compact .product-setup-value-list,
      .product-setup-editor-fields {
        grid-template-columns: 1fr;
      }

      .product-setup-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .product-setup-summary > div {
        min-height: 62px;
        align-items: flex-start;
        flex-direction: column;
      }

      .product-setup-focus-head {
        flex-direction: column;
      }

      .product-setup-focus-head > .btn {
        width: 100%;
      }
    }

    /* product-brand-compact-drilldown-20260813:
       browse first, then show one brand detail or editor at a time. */
    .product-setup-panel.product-brand-compact {
      gap: 12px;
      padding: 12px;
      border-color: #cfdeed;
      background: #f8fbff;
    }

    .product-brand-browser,
    .product-brand-focus {
      display: grid;
      gap: 12px;
    }

    .product-brand-head,
    .product-brand-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .product-brand-head h3,
    .product-brand-focus h3 {
      margin: 0;
      color: #132238;
      font-size: 1rem;
    }

    .product-brand-head p,
    .product-brand-focus p {
      margin: 3px 0 0;
    }

    .product-brand-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .product-brand-summary > div {
      min-height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 1px solid #d8e5f2;
      border-radius: 9px;
      padding: 8px 10px;
      background: #fff;
    }

    .product-brand-summary span {
      color: #53677f;
      font-size: .72rem;
      font-weight: 750;
    }

    .product-brand-summary strong {
      color: #0b315b;
      font-size: 1.12rem;
    }

    .product-brand-toolbar {
      align-items: flex-end;
    }

    .product-brand-toolbar .search-field {
      width: min(560px, 100%);
      margin: 0;
    }

    .product-brand-toolbar small {
      color: #64758a;
      font-size: .72rem;
    }

    .product-brand-card-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      max-height: min(56vh, 600px);
      overflow: auto;
      padding-right: 3px;
    }

    .product-brand-card {
      min-width: 0;
      overflow: hidden;
      border: 1px solid #d7e3ef;
      border-radius: 11px;
      background: #fff;
    }

    .product-brand-card.is-inactive {
      opacity: .68;
      background: #f4f6f8;
    }

    .product-brand-card-open {
      width: 100%;
      min-width: 0;
      min-height: 78px;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
      border: 0;
      padding: 9px 10px;
      background: transparent;
      color: #132238;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .product-brand-card-open:hover,
    .product-brand-card-open:focus-visible {
      background: #eef6ff;
      outline: none;
    }

    .product-brand-card-logo,
    .product-brand-logo-preview {
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid #d9e4ef;
      border-radius: 10px;
      background: #f5f8fc;
      color: #0c5ba9;
    }

    .product-brand-card-logo {
      width: 46px;
      height: 46px;
    }

    .product-brand-card-logo img,
    .product-brand-logo-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #fff;
    }

    .product-brand-card-copy,
    .product-brand-card-copy strong,
    .product-brand-card-copy small {
      display: block;
      min-width: 0;
    }

    .product-brand-card-copy strong {
      overflow: hidden;
      font-size: .84rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-brand-card-copy small {
      margin-top: 3px;
      overflow: hidden;
      color: #64758a;
      font-size: .69rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-brand-card-status {
      display: grid;
      justify-items: end;
      gap: 6px;
      color: #0758a8;
      font-size: .68rem;
      font-weight: 850;
    }

    .product-brand-focus {
      max-width: 900px;
      margin: 0 auto;
      border: 1px solid #cbdced;
      border-radius: 11px;
      padding: 12px;
      background: #fff;
    }

    .product-brand-focus[hidden] {
      display: none !important;
    }

    .product-brand-detail-card {
      display: grid;
      grid-template-columns: 116px minmax(0, 1fr);
      gap: 12px;
      align-items: stretch;
    }

    .product-brand-logo-preview {
      width: 116px;
      min-height: 116px;
    }

    .product-brand-logo-preview > svg {
      width: 38px;
      height: 38px;
    }

    .product-brand-detail-facts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .product-brand-detail-facts > div {
      min-width: 0;
      display: grid;
      align-content: center;
      gap: 4px;
      border: 1px solid #dce7f2;
      border-radius: 9px;
      padding: 9px 10px;
      background: #f8fbff;
    }

    .product-brand-detail-facts span {
      color: #64758a;
      font-size: .69rem;
      font-weight: 750;
    }

    .product-brand-detail-facts strong {
      overflow: hidden;
      color: #132238;
      font-size: .82rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-brand-url-fact {
      grid-column: 1 / -1;
    }

    .product-brand-editor-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .product-brand-editor-logo-card {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 148px minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      min-height: 148px;
      border: 1px solid #c9dced;
      border-radius: 12px;
      padding: 12px;
      background: #f7fbff;
    }

    .product-brand-editor-logo-image {
      width: 148px;
      height: 116px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid #d9e4ef;
      border-radius: 10px;
      background: #fff;
    }

    .product-brand-editor-logo-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #fff;
    }

    .product-brand-editor-logo-image svg {
      width: 38px;
      height: 38px;
      color: #7a8ca2;
    }

    .product-brand-editor-logo-copy { min-width: 0; }
    .product-brand-editor-logo-copy strong,
    .product-brand-editor-logo-copy p { display: block; margin: 0; }
    .product-brand-editor-logo-copy strong { margin-top: 3px; color: #15263b; }
    .product-brand-editor-logo-copy p { margin-top: 5px; color: #61758c; font-size: .78rem; line-height: 1.45; }
    .product-brand-editor-logo-copy .btn { margin-top: 9px; }

    @media (max-width: 1100px) {
      .product-brand-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 700px) {
      .product-brand-head,
      .product-brand-toolbar {
        align-items: stretch;
        flex-direction: column;
      }

      .product-brand-head > .btn,
      .product-brand-detail-actions,
      .product-brand-detail-actions .btn {
        width: 100%;
      }

      .product-brand-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .product-brand-card-grid,
      .product-brand-editor-fields,
      .product-brand-detail-card,
      .product-brand-detail-facts {
        grid-template-columns: 1fr;
      }

      .product-brand-logo-preview {
        width: 100%;
        min-height: 108px;
      }

      .product-brand-editor-logo-card {
        grid-template-columns: 1fr;
      }

      .product-brand-editor-logo-image {
        width: 100%;
        height: 140px;
      }

      .product-brand-url-fact {
        grid-column: auto;
      }
    }

    /* product-catalogue-link-compact-drilldown-20260813:
       scan the link map first, then manage one selected catalogue card. */
    .product-setup-panel.product-catalogue-link-compact {
      gap: 12px;
      padding: 12px;
      border-color: #cfdeed;
      background: #f8fbff;
    }

    .product-catalogue-link-head,
    .product-catalogue-link-toolbar,
    .product-catalogue-link-detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .product-catalogue-link-head h3,
    .product-catalogue-link-detail-head h3 {
      margin: 0;
      color: #132238;
      font-size: 1rem;
    }

    .product-catalogue-link-head p,
    .product-catalogue-link-detail-head p {
      margin: 3px 0 0;
    }

    .product-catalogue-link-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .product-catalogue-link-summary button {
      min-width: 0;
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 1px solid #d8e5f2;
      border-radius: 9px;
      padding: 8px 10px;
      background: #fff;
      color: #53677f;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .product-catalogue-link-summary button:hover,
    .product-catalogue-link-summary button:focus-visible,
    .product-catalogue-link-summary button.is-active {
      border-color: #0d66c2;
      background: #eef6ff;
      outline: none;
    }

    .product-catalogue-link-summary span {
      min-width: 0;
      font-size: .72rem;
      font-weight: 750;
    }

    .product-catalogue-link-summary strong {
      flex: 0 0 auto;
      color: #0b315b;
      font-size: 1.12rem;
    }

    .product-catalogue-link-workspace {
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
      gap: 10px;
      align-items: start;
    }

    .product-catalogue-link-browser,
    .product-catalogue-link-detail {
      min-width: 0;
      display: grid;
      gap: 10px;
      border: 1px solid #cbdced;
      border-radius: 11px;
      padding: 11px;
      background: #fff;
    }

    .product-catalogue-link-toolbar {
      align-items: end;
    }

    .product-catalogue-link-toolbar .search-field {
      width: min(520px, 100%);
      margin: 0;
    }

    .product-catalogue-link-filter {
      min-width: 146px;
    }

    .product-catalogue-link-result-count {
      margin: -2px 0 0;
      color: #64758a;
      font-size: .7rem;
    }

    .product-catalogue-link-list {
      display: grid;
      gap: 7px;
      max-height: min(56vh, 590px);
      overflow: auto;
      padding-right: 3px;
    }

    .product-catalogue-link-card {
      width: 100%;
      min-width: 0;
      min-height: 72px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
      border: 1px solid #d9e4ef;
      border-radius: 10px;
      padding: 9px 10px;
      background: #fbfdff;
      color: #132238;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .product-catalogue-link-card:hover,
    .product-catalogue-link-card:focus-visible,
    .product-catalogue-link-card.is-selected {
      border-color: #0d66c2;
      background: #eef6ff;
      outline: none;
    }

    .product-catalogue-link-card-copy,
    .product-catalogue-link-card-copy strong,
    .product-catalogue-link-card-copy small {
      display: block;
      min-width: 0;
    }

    .product-catalogue-link-card-copy strong {
      display: -webkit-box;
      overflow: hidden;
      font-size: .8rem;
      line-height: 1.28;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .product-catalogue-link-card-copy small {
      margin-top: 4px;
      overflow: hidden;
      color: #64758a;
      font-size: .69rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-catalogue-link-card-side {
      display: grid;
      justify-items: end;
      gap: 7px;
      color: #0758a8;
    }

    .product-catalogue-link-badge {
      border-radius: 999px;
      padding: 4px 7px;
      background: #e8f3ff;
      color: #0758a8;
      font-size: .64rem;
      font-weight: 850;
      white-space: nowrap;
    }

    .product-catalogue-link-badge.is-unlinked {
      background: #f0f3f6;
      color: #5d6b7a;
    }

    .product-catalogue-link-badge.is-broken {
      background: #fff0d8;
      color: #8a5600;
    }

    .product-catalogue-link-mobile-back {
      display: none;
    }

    .product-catalogue-link-current {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      border: 1px solid #d8e5f2;
      border-radius: 10px;
      padding: 10px;
      background: #f8fbff;
    }

    .product-catalogue-link-current-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: #e8f3ff;
      color: #0758a8;
    }

    .product-catalogue-link-current-icon > svg {
      width: 21px;
      height: 21px;
    }

    .product-catalogue-link-current-copy,
    .product-catalogue-link-current-copy strong,
    .product-catalogue-link-current-copy small {
      display: block;
      min-width: 0;
    }

    .product-catalogue-link-current-copy strong {
      overflow: hidden;
      color: #132238;
      font-size: .86rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-catalogue-link-current-copy small {
      margin-top: 3px;
      color: #64758a;
      font-size: .7rem;
      line-height: 1.35;
    }

    .product-catalogue-link-facts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .product-catalogue-link-facts > div {
      min-width: 0;
      display: grid;
      gap: 3px;
      border: 1px solid #dce7f2;
      border-radius: 9px;
      padding: 8px 9px;
      background: #fff;
    }

    .product-catalogue-link-facts span {
      color: #64758a;
      font-size: .66rem;
      font-weight: 750;
    }

    .product-catalogue-link-facts strong {
      overflow: hidden;
      color: #132238;
      font-size: .78rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-catalogue-link-editor {
      display: grid;
      gap: 8px;
      padding-top: 2px;
    }

    .product-catalogue-link-editor label {
      margin: 0;
    }

    .product-catalogue-link-editor .actions {
      margin-top: 1px;
    }

    .product-catalogue-link-native-node {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      clip: rect(0 0 0 0) !important;
      white-space: nowrap !important;
    }

    @media (max-width: 1080px) {
      .product-catalogue-link-workspace {
        grid-template-columns: minmax(0, .82fr) minmax(390px, 1.18fr);
      }
    }

    @media (max-width: 760px) {
      .product-catalogue-link-head,
      .product-catalogue-link-toolbar,
      .product-catalogue-link-detail-head {
        align-items: stretch;
        flex-direction: column;
      }

      .product-catalogue-link-head > .btn,
      .product-catalogue-link-filter,
      .product-catalogue-link-editor .actions,
      .product-catalogue-link-editor .btn {
        width: 100%;
      }

      .product-catalogue-link-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .product-catalogue-link-workspace,
      .product-catalogue-link-facts {
        grid-template-columns: 1fr;
      }

      .product-catalogue-link-mobile-back {
        display: inline-flex;
        width: 100%;
      }

      .product-catalogue-link-compact[data-product-catalogue-link-view="browse"] .product-catalogue-link-detail,
      .product-catalogue-link-compact[data-product-catalogue-link-view="detail"] .product-catalogue-link-browser {
        display: none;
      }
    }

    .product-import-drop {
      justify-self: start;
      min-height: 48px;
    }

    .product-form-section,
    .product-master-data-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 10px 12px;
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .product-form-section summary,
    .product-master-data-panel summary {
      cursor: pointer;
      color: var(--mobil-blue-dark);
      font-weight: 900;
      font-size: .98rem;
    }

    .product-form-section[open] summary,
    .product-master-data-panel[open] summary {
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 2px;
    }

    .product-inventory-notice {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      margin-bottom: 12px;
      padding: 11px 12px;
      border: 1px solid #b8d4f6;
      border-radius: 9px;
      background: #f4f9ff;
      color: #0c4077;
    }

    .product-inventory-notice > i,
    .product-inventory-notice > svg {
      width: 21px;
      height: 21px;
      margin-top: 1px;
      color: var(--mobil-blue);
    }

    .product-inventory-notice strong {
      display: block;
      font-size: .9rem;
    }

    .product-inventory-notice p {
      margin: 3px 0 0;
      color: #355779;
      font-size: .82rem;
      line-height: 1.42;
    }

    .product-inventory-link-status {
      min-height: 42px;
      display: grid;
      align-content: center;
      gap: 2px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafb;
    }

    .product-inventory-link-status span {
      color: var(--muted);
      font-size: .72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .03em;
    }

    .product-inventory-link-status strong {
      color: #1f4d7a;
      font-size: .84rem;
    }

    .product-master-data-list {
      display: grid;
      gap: 8px;
    }

    .product-master-data-row {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      padding: 8px 10px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .product-master-data-row strong {
      display: block;
    }

    .product-master-data-row .sub {
      display: block;
      line-height: 1.35;
    }

    .product-master-data-row .row-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
    }

    .product-master-data-row.is-inactive {
      opacity: .66;
      background: #f3f6fa;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
      min-width: 0;
    }

    .product-catalogue-filter-panel {
      border: 1px solid #d8e4f1;
      border-radius: 8px;
      background: #fbfdff;
      overflow: hidden;
    }

    .product-catalogue-filter-panel summary {
      min-height: 48px;
      padding: 10px 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--mobil-blue-dark);
      font-weight: 900;
      list-style: none;
    }

    .product-catalogue-filter-panel summary::-webkit-details-marker {
      display: none;
    }

    .product-catalogue-filter-panel summary > span:first-child {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .product-catalogue-filter-panel[open] summary {
      border-bottom: 1px solid #d8e4f1;
      background: #fff;
    }

    .product-catalogue-filter-panel .product-filter-bar {
      padding: 12px;
    }

    .product-grid.compact-product-grid {
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 10px;
    }

    .product-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
      min-width: 0;
    }

    .product-image-wrap {
      width: 100%;
      aspect-ratio: 4 / 3;
      background: #f3f6f4;
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .product-image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .product-card-body {
      padding: 14px;
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .product-card.product-catalogue-card {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      gap: 9px;
      padding: 10px;
      overflow: hidden;
      box-shadow: 0 5px 14px rgba(24, 33, 31, .035);
    }

    .product-catalogue-card-head {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
      min-width: 0;
    }

    .product-card.product-catalogue-card .product-image-wrap {
      width: 76px;
      height: 76px;
      aspect-ratio: 1;
      border: 1px solid #e1e8ef;
      border-radius: 7px;
      background: #fff;
      overflow: hidden;
    }

    .product-card.product-catalogue-card .product-image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 4px;
      background: #fff;
    }

    .product-image-fallback {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      color: #6c8297;
      background: #f7fafc;
    }

    .product-image-fallback i,
    .product-image-fallback svg {
      width: 26px;
      height: 26px;
    }

    .product-catalogue-card-identity {
      min-width: 0;
      display: grid;
      gap: 3px;
      align-content: start;
    }

    .product-catalogue-card-identity h3 {
      margin: 0;
      font-size: .98rem;
      line-height: 1.22;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .product-catalogue-card-code {
      color: var(--muted);
      font-size: .76rem;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-catalogue-card-price {
      min-width: 80px;
      padding-left: 8px;
      border-left: 1px solid #e3eaf1;
      display: grid;
      gap: 2px;
      text-align: right;
      align-content: start;
    }

    .product-catalogue-card-price span {
      color: var(--muted);
      font-size: .68rem;
      font-weight: 800;
    }

    .product-catalogue-card-price strong {
      color: var(--ink);
      font-size: .9rem;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .product-catalogue-card .offer-meta {
      gap: 5px;
    }

    .product-catalogue-card .offer-meta .badge {
      padding: 4px 7px;
      font-size: .68rem;
    }

    .product-catalogue-card-description {
      margin: 0;
      color: #52605c;
      font-size: .83rem;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .product-catalogue-card-footer {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-top: 8px;
      border-top: 1px solid #edf1f5;
    }

    .product-catalogue-card-suitability {
      min-width: 0;
      color: var(--muted);
      font-size: .75rem;
      line-height: 1.25;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .product-catalogue-card .product-card-actions {
      flex: 0 0 auto;
    }

    .product-catalogue-card .product-card-actions .btn {
      width: auto;
      min-height: 32px;
      padding: 0 9px;
      font-size: .76rem;
      white-space: nowrap;
    }

    @media (max-width: 440px) {
      .product-grid.compact-product-grid {
        grid-template-columns: 1fr;
      }

      .product-catalogue-card-head {
        grid-template-columns: 68px minmax(0, 1fr);
      }

      .product-card.product-catalogue-card .product-image-wrap {
        width: 68px;
        height: 68px;
      }

      .product-catalogue-card-price {
        grid-column: 2;
        padding-left: 0;
        border-left: 0;
        text-align: left;
        display: flex;
        align-items: baseline;
        gap: 5px;
      }

      .product-catalogue-card-footer {
        align-items: stretch;
        flex-direction: column;
      }

      .product-catalogue-card .product-card-actions .btn {
        width: 100%;
      }
    }

    .product-card-body h3,
    .product-admin-row h3 {
      margin: 0;
      font-size: 1.08rem;
      line-height: 1.25;
    }

    .product-card-body p,
    .product-admin-row p {
      margin: 0;
      color: #52605c;
      line-height: 1.45;
    }

    .vehicle-image-admin-panel {
      padding: 16px;
      display: grid;
      gap: 16px;
    }

    .vehicle-model-image-picker {
      display: grid;
      gap: 8px;
    }

    .vehicle-model-image-dropzone {
      min-height: 132px;
      padding: 18px;
      border: 2px dashed #9eb8d9;
      border-radius: 10px;
      background: #f7fbff;
      color: #1c4f8e;
      cursor: pointer;
      display: grid;
      place-items: center;
      text-align: center;
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .vehicle-model-image-dropzone:hover,
    .vehicle-model-image-dropzone:focus-visible,
    .vehicle-model-image-dropzone.is-dragging {
      outline: none;
      border-color: var(--blue);
      background: #edf6ff;
      box-shadow: 0 0 0 3px rgba(23, 91, 170, .13);
    }

    .vehicle-model-image-dropzone.is-ready {
      border-color: #2f8a57;
      background: #f1fbf5;
      color: #17663b;
    }

    .vehicle-model-image-dropzone.is-processing {
      cursor: progress;
      opacity: .72;
    }

    .vehicle-model-image-dropzone input {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .vehicle-model-image-dropzone-content {
      display: grid;
      justify-items: center;
      gap: 6px;
      pointer-events: none;
    }

    .vehicle-model-image-dropzone-content i {
      width: 28px;
      height: 28px;
    }

    .vehicle-model-image-preview {
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
    }

    .vehicle-model-image-preview[hidden] {
      display: none;
    }

    .vehicle-model-image-preview img {
      width: 132px;
      height: 88px;
      object-fit: cover;
      border-radius: 6px;
      background: #edf2f7;
    }

    .vehicle-model-image-preview-copy {
      min-width: 0;
      display: grid;
      gap: 5px;
    }

    .vehicle-model-image-preview-copy strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .vehicle-model-image-preview-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .vehicle-model-current-image {
      display: grid;
      grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
      gap: 14px;
      align-items: stretch;
      margin: 10px 0 14px;
      padding: 12px;
      border: 1px solid #a9c5e6;
      border-radius: 12px;
      background: linear-gradient(135deg, #f7fbff, #edf5ff);
    }

    .vehicle-model-current-image[hidden] {
      display: none;
    }

    .vehicle-model-current-image img {
      width: 100%;
      height: 156px;
      object-fit: contain;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #fff;
    }

    .vehicle-model-current-image-copy {
      min-width: 0;
      display: grid;
      align-content: center;
      gap: 7px;
    }

    .vehicle-model-current-image-head,
    .vehicle-model-current-image-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }

    .vehicle-model-current-image-head {
      justify-content: space-between;
    }

    .vehicle-model-current-image-copy h3,
    .vehicle-model-current-image-copy p {
      margin: 0;
    }

    @media (max-width: 560px) {
      .vehicle-model-image-preview {
        grid-template-columns: 1fr;
      }

      .vehicle-model-image-preview img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
      }

      .vehicle-model-current-image {
        grid-template-columns: 1fr;
      }

      .vehicle-model-current-image img {
        height: auto;
        aspect-ratio: 16 / 10;
      }
    }

    .vehicle-image-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 14px;
      min-width: 0;
    }

    .vehicle-image-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
      min-width: 0;
    }

    .vehicle-image-card img {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      background: #eaf2ff;
      border-bottom: 1px solid var(--line);
    }

    .vehicle-image-card-body {
      padding: 14px;
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .vehicle-image-card-body h3,
    .vehicle-image-card-body p {
      margin: 0;
    }

    .vehicle-image-card-body p {
      color: #52605c;
      line-height: 1.45;
    }

    .vehicle-image-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    /* Vehicle Images compact hybrid: coverage, upload, and library stay separate. */
    #vehicle-images.vehicle-image-compact-hybrid > .panel-head > .btn {
      display: none;
    }

    #vehicle-images.vehicle-image-compact-hybrid > .panel-head {
      padding-bottom: 13px;
    }

    .vehicle-image-compact-selector {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #vehicle-images.vehicle-image-compact-hybrid[data-vehicle-image-view="overview"] > .vehicle-image-admin-panel {
      display: none !important;
    }

    #vehicle-images.vehicle-image-compact-hybrid[data-vehicle-image-view="coverage"] [data-vehicle-image-section="upload"],
    #vehicle-images.vehicle-image-compact-hybrid[data-vehicle-image-view="coverage"] [data-vehicle-image-section="library"],
    #vehicle-images.vehicle-image-compact-hybrid[data-vehicle-image-view="upload"] [data-vehicle-image-section="coverage"],
    #vehicle-images.vehicle-image-compact-hybrid[data-vehicle-image-view="upload"] [data-vehicle-image-section="library"],
    #vehicle-images.vehicle-image-compact-hybrid[data-vehicle-image-view="library"] [data-vehicle-image-section="coverage"],
    #vehicle-images.vehicle-image-compact-hybrid[data-vehicle-image-view="library"] [data-vehicle-image-section="upload"] {
      display: none !important;
    }

    #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-admin-panel {
      padding-top: 2px;
      gap: 12px;
    }

    #vehicle-images.vehicle-image-compact-hybrid #vehicleImageSummary {
      padding: 0;
    }

    #vehicle-images.vehicle-image-compact-hybrid #vehicleImageSummary .summary-card {
      appearance: none;
      min-height: 92px;
      color: var(--ink);
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    #vehicle-images.vehicle-image-compact-hybrid #vehicleImageSummary .summary-card:hover,
    #vehicle-images.vehicle-image-compact-hybrid #vehicleImageSummary .summary-card:focus-visible {
      border-color: var(--mobil-blue);
      background: #eef5ff;
      outline: none;
      box-shadow: 0 0 0 2px rgba(12, 77, 162, .08);
    }

    .vehicle-image-library-toolbar {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border: 1px solid #d4e0ec;
      border-radius: 12px;
      background: #f8fbff;
    }

    .vehicle-image-library-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .vehicle-image-library-filters button {
      min-height: 34px;
      padding: 0 11px;
      border: 1px solid #cbd9e8;
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      font: inherit;
      font-size: .76rem;
      font-weight: 850;
      cursor: pointer;
    }

    .vehicle-image-library-filters button:hover,
    .vehicle-image-library-filters button.active {
      border-color: var(--mobil-blue);
      background: #eaf3ff;
      color: var(--mobil-blue-dark);
    }

    #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-list {
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 10px;
    }

    #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-card-body {
      gap: 7px;
      padding: 10px;
    }

    #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-card-body h3 {
      font-size: .94rem;
    }

    #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-card-body p {
      display: -webkit-box;
      overflow: hidden;
      font-size: .76rem;
      line-height: 1.3;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }

    #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-card img {
      aspect-ratio: 16 / 9;
    }

    #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-actions > .btn,
    #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-actions > details > summary {
      width: 100%;
      justify-content: center;
    }

    #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-actions > .btn:only-child {
      grid-column: 1 / -1;
    }

    @media (max-width: 640px) {
      #vehicle-images.vehicle-image-compact-hybrid > .panel-head {
        padding: 12px 12px 10px;
      }

      .vehicle-image-compact-selector {
        grid-template-columns: 1fr;
      }

      #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-admin-panel {
        padding: 10px;
      }

      #vehicle-images.vehicle-image-compact-hybrid #vehicleImageSummary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      #vehicle-images.vehicle-image-compact-hybrid #vehicleImageSummary .summary-card {
        min-height: 78px;
        padding: 9px;
      }

      .vehicle-image-library-toolbar {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .vehicle-image-library-filters {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }

      .vehicle-image-library-filters button {
        min-width: 0;
        padding: 0 6px;
      }

      #vehicleImageLibraryMoreBtn {
        width: 100%;
      }

      #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-card-body {
        padding: 8px;
      }

      #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-card-body p {
        display: none;
      }

      #vehicle-images.vehicle-image-compact-hybrid .vehicle-image-card .offer-meta .badge:nth-child(n+3) {
        display: none;
      }
    }

    .product-price-line {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .product-price-box {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fbf9;
      padding: 10px;
    }

    .product-price-box span {
      display: block;
      color: var(--muted);
      font-size: .8rem;
      font-weight: 800;
    }

    .product-price-box strong {
      display: block;
      margin-top: 3px;
      color: var(--ink);
      font-size: 1.05rem;
    }

    .product-card-actions .btn {
      width: 100%;
      justify-content: center;
    }

    .product-admin-row {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 12px;
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
    }

    .product-admin-row .product-image-wrap {
      width: 92px;
      aspect-ratio: 1;
      background: #f3f6f4;
      border: 1px solid var(--line);
      border-radius: 8px;
    }

    .product-admin-row .product-image-wrap img {
      object-fit: contain;
    }

    .product-grid.item-master-grid {
      grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
      gap: 10px;
    }

    .product-card.item-master-card {
      grid-template-columns: 78px minmax(0, 1fr);
      grid-template-rows: none;
      align-items: center;
      gap: 10px;
      padding: 9px;
      overflow: visible;
      box-shadow: 0 6px 14px rgba(24, 33, 31, .04);
    }

    .product-card.item-master-card .product-image-wrap {
      width: 78px;
      aspect-ratio: 1;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fbf9;
    }

    .product-card.item-master-card .product-image-wrap img {
      object-fit: contain;
      padding: 4px;
    }

    .product-card.item-master-card .product-card-body {
      padding: 0;
      gap: 5px 8px;
      min-width: 0;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }

    .product-card.item-master-card .offer-meta,
    .product-card.item-master-card h3,
    .product-card.item-master-card .item-master-muted,
    .product-card.item-master-card .item-master-placement,
    .product-card.item-master-card .product-price-line,
    .product-card.item-master-card .item-master-price-line {
      grid-column: 1;
    }

    .product-card.item-master-card .offer-meta {
      gap: 4px;
    }

    .product-card.item-master-card h3 {
      font-size: .95rem;
      line-height: 1.18;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .item-master-muted {
      color: var(--muted);
      font-size: .78rem;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }

    .product-card.item-master-card .item-master-muted {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .item-master-price-line {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      color: var(--muted);
      font-size: .8rem;
      line-height: 1.25;
    }

    .item-master-price-line strong {
      color: var(--ink);
      font-size: .94rem;
    }

    .product-card.item-master-card .product-price-line {
      grid-template-columns: repeat(2, minmax(0, 150px));
      gap: 5px;
    }

    .product-card.item-master-card .product-price-box {
      padding: 5px 7px;
      min-width: 0;
    }

    .product-card.item-master-card .product-price-box span {
      font-size: .66rem;
      line-height: 1.15;
    }

    .product-card.item-master-card .product-price-box strong {
      font-size: .86rem;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .product-card.item-master-card .product-card-actions {
      grid-column: 2;
      grid-row: 1 / span 6;
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items: center;
      justify-content: center;
    }

    .product-card.item-master-card .product-card-actions .btn {
      width: 82px;
      min-height: 32px;
      padding: 0 9px;
      font-size: .78rem;
    }

    .product-admin-saved-list {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      margin: 0 16px 12px;
      overflow: hidden;
    }

    .product-admin-saved-list summary {
      cursor: pointer;
      padding: 12px 14px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-weight: 900;
      color: var(--mobil-blue-dark);
      list-style: none;
    }

    .product-admin-saved-list summary::-webkit-details-marker {
      display: none;
    }

    .product-admin-saved-list summary::after {
      content: "Show";
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #eef5ff;
      padding: 4px 10px;
      color: var(--mobil-blue-dark);
      font-size: .72rem;
    }

    .product-admin-saved-list[open] summary::after {
      content: "Hide";
    }

    .product-admin-saved-list-note {
      padding: 0 14px 10px;
      color: var(--muted);
      font-size: .85rem;
      line-height: 1.35;
    }

    .product-admin-saved-list-body {
      display: grid;
      gap: 8px;
      padding: 0 12px 12px;
    }

    .product-admin-saved-list .product-admin-row {
      grid-template-columns: 64px minmax(0, 1fr) auto;
      padding: 8px;
      gap: 8px;
    }

    .product-admin-saved-list .product-admin-row .product-image-wrap {
      width: 64px;
    }

    .product-admin-saved-list .product-admin-row .actions .btn {
      min-height: 32px;
      padding: 0 9px;
      font-size: .78rem;
    }

    .loyalty-reward-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
      min-width: 0;
    }

    .loyalty-reward-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
      display: grid;
      min-width: 0;
      box-shadow: 0 8px 22px rgba(24, 33, 31, .05);
    }

    body.customer-app-mode #loyalty-program .panel-head {
      padding: 12px;
    }

    body.customer-app-mode #loyalty-program > .panel-head {
      align-items: center;
      border-bottom: 0;
      padding: 10px 12px 4px;
    }

    body.customer-app-mode #loyalty-program .panel-head h2 {
      font-size: 1.05rem;
    }

    body.customer-app-mode #loyalty-program .panel-head p.sub {
      margin-top: 3px;
      font-size: .78rem;
      line-height: 1.3;
    }

    body.customer-app-mode #loyaltySummaryCards,
    body.customer-app-mode #loyaltyCustomerBalance {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      padding: 10px 12px 0;
    }

    body.customer-app-mode #loyaltySummaryCards .summary-card,
    body.customer-app-mode #loyaltyCustomerBalance .summary-card {
      min-height: 70px;
      padding: 9px 10px;
      gap: 5px;
      align-content: center;
      background: #fbfdff;
    }

    body.customer-app-mode #loyaltySummaryCards .summary-card span,
    body.customer-app-mode #loyaltyCustomerBalance .summary-card span {
      font-size: .7rem;
      font-weight: 750;
      line-height: 1.2;
    }

    body.customer-app-mode #loyaltySummaryCards .summary-card strong,
    body.customer-app-mode #loyaltyCustomerBalance .summary-card strong {
      font-size: 1.05rem;
      line-height: 1.05;
      overflow-wrap: anywhere;
    }

    body.customer-app-mode #loyaltyCustomerBalanceCard {
      margin: 10px 12px 0;
    }

    body.customer-app-mode #loyaltyCustomerBalanceCard .compact-head {
      padding: 10px;
    }

    body.customer-app-mode #loyaltyCustomerBalanceCard .compact-head h3 {
      font-size: .92rem;
    }

    body.customer-app-mode #loyaltyCustomerBalanceCard .compact-head p {
      display: none;
    }

    .loyalty-cart-panel {
      display: grid;
      gap: 10px;
    }

    .loyalty-cart-panel[hidden] {
      display: none;
    }

    .loyalty-cart-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .loyalty-cart-head h3,
    .loyalty-cart-row h4 {
      margin: 0;
    }

    .loyalty-cart-head p,
    .loyalty-cart-row p {
      margin: 3px 0 0;
    }

    .loyalty-cart-list {
      display: grid;
      gap: 8px;
    }

    .loyalty-cart-row {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfdff;
      padding: 10px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .loyalty-cart-checkout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
    }

    body.customer-app-mode #loyaltyCartPanel {
      margin: 10px 12px 0;
      padding: 12px;
    }

    body.customer-app-mode #loyaltyCustomerBalanceCard {
      display: none;
    }

    .loyalty-reward-card img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      background: #f3f6f4;
      border-bottom: 1px solid var(--line);
    }

    .loyalty-reward-body {
      padding: 14px;
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .loyalty-reward-body h3,
    .loyalty-redemption-row h3 {
      margin: 0;
      font-size: 1.08rem;
      line-height: 1.25;
    }

    .loyalty-reward-body p,
    .loyalty-redemption-row p {
      margin: 0;
      color: #52605c;
      line-height: 1.45;
    }

    .loyalty-reward-meta,
    .loyalty-redemption-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .loyalty-stock-line {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .loyalty-checkout-row {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      gap: 8px;
      align-items: end;
    }

    .loyalty-checkout-row .btn {
      min-height: 44px;
      justify-content: center;
    }

    .loyalty-unavailable-note {
      border: 1px dashed #cbd8e6;
      border-radius: 8px;
      background: #f7faff;
      color: #52657c;
      padding: 8px 10px;
      font-size: .78rem;
      font-weight: 750;
      line-height: 1.35;
    }

    .loyalty-cart-note {
      border: 1px dashed #cbd8e6;
      border-radius: 8px;
      background: #f7faff;
      color: #52657c;
      padding: 8px 10px;
      font-size: .78rem;
      font-weight: 750;
      line-height: 1.35;
    }

    .loyalty-rules-note {
      border: 1px solid rgba(12, 77, 162, .14);
      border-radius: 8px;
      background: linear-gradient(135deg, #f7faff 0%, #ffffff 100%);
      color: #425166;
      padding: 10px 12px;
      display: grid;
      gap: 6px;
      line-height: 1.35;
    }

    .loyalty-rules-note strong {
      color: #102033;
      font-size: .9rem;
      font-weight: 900;
    }

    .loyalty-rules-note p {
      margin: 0;
      font-size: .78rem;
      font-weight: 700;
    }

    .loyalty-rules-note .warning {
      color: #8a5a00;
    }

    .loyalty-rules-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 2px;
    }

    .loyalty-rules-actions .btn {
      min-height: 32px;
      padding: 6px 10px;
      font-size: .76rem;
    }

    .loyalty-terms-content {
      display: grid;
      gap: 12px;
    }

    .loyalty-terms-hero {
      border: 1px solid rgba(12, 77, 162, .14);
      border-radius: 8px;
      background: linear-gradient(135deg, #f7faff 0%, #ffffff 100%);
      padding: 14px;
      display: grid;
      gap: 6px;
    }

    .loyalty-terms-hero h3 {
      margin: 0;
      color: #0b2f63;
      font-size: 1.05rem;
    }

    .loyalty-terms-hero p {
      margin: 0;
      color: #52657c;
      line-height: 1.45;
      font-weight: 650;
    }

    .loyalty-terms-list {
      display: grid;
      gap: 9px;
    }

    .loyalty-terms-row {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 12px;
      display: grid;
      gap: 5px;
    }

    .loyalty-terms-row strong {
      color: #102033;
      font-size: .92rem;
      font-weight: 900;
    }

    .loyalty-terms-row p {
      margin: 0;
      color: #52657c;
      font-size: .82rem;
      line-height: 1.45;
      font-weight: 650;
    }

    .loyalty-redemption-list {
      display: grid;
      gap: 10px;
    }

    .loyalty-redemption-row {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
    }

    .loyalty-limit-editor {
      border: 1px solid #d8e4f2;
      border-radius: 8px;
      background: #f8fbff;
      padding: 12px;
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .loyalty-service-discount-editor {
      border: 1px solid #b9d6ef;
      border-radius: 8px;
      background: #eef7ff;
      padding: 12px;
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .loyalty-service-discount-editor[hidden] {
      display: none;
    }

    .loyalty-service-discount-editor h4,
    .loyalty-service-discount-editor p {
      margin: 0;
    }

    .loyalty-service-discount-editor h4 {
      color: #0b2f63;
      font-size: .92rem;
    }

    .mccc-gift-recipient { margin: 10px 0; overflow-wrap: anywhere; }
    .mccc-gift-recipient code { display: block; white-space: normal; overflow-wrap: anywhere; margin-top: 4px; }
    .mccc-gift-redemption { min-width: 0; }
    .mccc-gift-redemption .loyalty-service-reference { flex-wrap: wrap; }
    .mccc-gift-redemption .loyalty-service-reference > div { min-width: 0; }
    .mccc-gift-redemption .loyalty-service-reference .actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .mccc-gift-redemption .loyalty-service-reference button { min-height: 44px; }
    .mccc-gift-redemption .loyalty-delivery-grid label, .mccc-gift-redemption .loyalty-delivery-grid input { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; }
    .loyalty-service-reference {
      border: 1px solid #8bbbe8;
      border-radius: 8px;
      background: #fff;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .loyalty-service-reference code {
      color: #0b3d74;
      font-size: .9rem;
      font-weight: 900;
      overflow-wrap: anywhere;
    }

    .loyalty-limit-editor h4,
    .loyalty-limit-editor p {
      margin: 0;
    }

    .loyalty-limit-editor h4 {
      color: #0b2f63;
      font-size: .92rem;
    }

    .loyalty-redemption-row.has-fulfillment {
      align-items: start;
    }

    .loyalty-redemption-fulfillment {
      grid-column: 1 / -1;
      border: 1px solid #cbdceb;
      border-radius: 8px;
      background: #f8fbff;
      padding: 12px;
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .loyalty-redemption-fulfillment h4,
    .loyalty-redemption-fulfillment p {
      margin: 0;
    }

    .loyalty-delivery-grid {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.35fr);
      gap: 10px;
      align-items: end;
      min-width: 0;
    }

    .loyalty-delivery-evidence-status {
      border: 1px dashed #bdd0e3;
      border-radius: 8px;
      background: #fff;
      color: #53677e;
      padding: 9px 10px;
      font-size: .78rem;
      font-weight: 750;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .loyalty-delivery-evidence-status.ok {
      border-color: #96d3b0;
      background: #effbf4;
      color: #146c3a;
    }

    .loyalty-delivery-swipe {
      position: relative;
      min-width: 0;
      height: 58px;
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid #9ebfe1;
      background: #eaf3fc;
    }

    .loyalty-delivery-swipe input[type="range"] {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 58px;
      margin: 0;
      padding: 0 5px;
      appearance: none;
      -webkit-appearance: none;
      background: linear-gradient(90deg, #1c9b59 0 var(--swipe-progress, 0%), #eaf3fc var(--swipe-progress, 0%) 100%);
      cursor: grab;
    }

    .loyalty-delivery-swipe input[type="range"]:disabled {
      cursor: not-allowed;
      opacity: .62;
    }

    .loyalty-delivery-swipe input[type="range"]::-webkit-slider-runnable-track {
      height: 58px;
      background: transparent;
    }

    .loyalty-delivery-swipe input[type="range"]::-webkit-slider-thumb {
      width: 48px;
      height: 48px;
      margin-top: 5px;
      border: 2px solid #fff;
      border-radius: 50%;
      background: #0c4da2;
      box-shadow: 0 3px 10px rgba(12, 77, 162, .3);
      appearance: none;
      -webkit-appearance: none;
    }

    .loyalty-delivery-swipe input[type="range"]::-moz-range-track {
      height: 58px;
      background: transparent;
    }

    .loyalty-delivery-swipe input[type="range"]::-moz-range-thumb {
      width: 48px;
      height: 48px;
      border: 2px solid #fff;
      border-radius: 50%;
      background: #0c4da2;
      box-shadow: 0 3px 10px rgba(12, 77, 162, .3);
    }

    .loyalty-delivery-swipe span {
      position: absolute;
      inset: 0 12px 0 62px;
      z-index: 3;
      display: grid;
      place-items: center;
      color: #0b3d74;
      font-size: .84rem;
      font-weight: 900;
      text-align: center;
      pointer-events: none;
    }

    .loyalty-delivery-complete {
      grid-column: 1 / -1;
      border: 1px solid #a9d9bc;
      border-radius: 8px;
      background: #effbf4;
      color: #155f37;
      padding: 10px 12px;
      display: grid;
      gap: 4px;
      line-height: 1.35;
    }

    .loyalty-delivery-complete a {
      color: #0c4da2;
      font-weight: 850;
    }

    .loyalty-filter-bar {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stock-dashboard-panel {
      padding: 16px;
      display: grid;
      gap: 14px;
    }

    .product-filter-bar.stock-item-toolbar {
      grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr));
    }

    .redeemable-stock-list {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .redeemable-stock-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 12px;
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-width: 0;
      box-shadow: 0 6px 18px rgba(24, 33, 31, .04);
    }

    .redeemable-stock-card:hover,
    .redeemable-stock-card.active {
      border-color: rgba(12, 77, 162, .38);
      box-shadow: 0 10px 24px rgba(12, 77, 162, .08);
    }

    .stock-item-thumb {
      width: 76px;
      aspect-ratio: 1;
      object-fit: contain;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f3f6f4;
    }

    .stock-card-main {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .stock-card-main h3,
    .stock-item-detail-drawer h3,
    .stock-selected-copy h4 {
      margin: 0;
      line-height: 1.25;
    }

    .stock-card-main p,
    .stock-item-detail-drawer p,
    .stock-selected-copy p {
      margin: 0;
      color: #52605c;
      line-height: 1.4;
      overflow-wrap: anywhere;
    }

    .stock-card-meta,
    .stock-branch-chips,
    .stock-card-actions,
    .stock-detail-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .stock-metric-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(92px, 1fr));
      gap: 8px;
      max-width: 560px;
    }

    .stock-metric {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      padding: 8px 10px;
      display: grid;
      gap: 3px;
    }

    .stock-metric span {
      color: var(--muted);
      font-size: .76rem;
      font-weight: 800;
    }

    .stock-metric strong {
      font-size: 1.06rem;
      color: var(--ink);
      line-height: 1;
    }

    .stock-branch-chip {
      border: 1px solid #d7e2dc;
      border-radius: 999px;
      padding: 5px 8px;
      background: #f8fbf9;
      color: #3d4a46;
      font-size: .8rem;
      font-weight: 800;
      line-height: 1.2;
    }

    .stock-card-actions {
      justify-content: flex-end;
      min-width: 230px;
    }

    .stock-card-actions .btn,
    .stock-detail-actions .btn {
      min-height: 40px;
      padding: 8px 10px;
      white-space: nowrap;
    }

    .stock-item-detail-drawer {
      border: 1px solid rgba(12, 77, 162, .22);
      border-radius: 8px;
      background: #fff;
      padding: 14px;
      display: grid;
      gap: 14px;
      box-shadow: 0 10px 26px rgba(12, 77, 162, .08);
    }

    .stock-item-detail-drawer[hidden],
    .stock-selected-item-preview:empty {
      display: none;
    }

    .stock-item-detail-head {
      display: grid;
      grid-template-columns: 90px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
    }

    .stock-item-detail-head img {
      width: 90px;
      aspect-ratio: 1;
      object-fit: contain;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f3f6f4;
    }

    .stock-detail-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .stock-detail-section {
      display: grid;
      gap: 8px;
      align-content: start;
    }

    .stock-detail-section h4 {
      margin: 0;
      font-size: .95rem;
    }

    .stock-branch-row,
    .stock-mini-row {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      padding: 9px 10px;
      display: grid;
      gap: 4px;
    }

    .stock-branch-row {
      grid-template-columns: minmax(0, 1fr) repeat(3, minmax(62px, auto));
      align-items: center;
    }

    .stock-branch-row strong,
    .stock-mini-row strong {
      color: var(--ink);
      overflow-wrap: anywhere;
    }

    .stock-selected-item-preview {
      border: 1px solid rgba(12, 77, 162, .18);
      border-radius: 8px;
      background: #f8fafc;
      padding: 10px;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .stock-selected-item-preview img {
      width: 58px;
      aspect-ratio: 1;
      object-fit: contain;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f3f6f4;
    }

    /* service-record-compact-hybrid-20260812
       Admin and advisor desktop workflows expose one service-record stage at
       a time while preserving the mechanic-specific plate-first experience. */
    .service-record-compact-hybrid {
      display: none;
    }

    #add-record[data-service-record-compact="staff"] > .service-record-compact-hybrid {
      display: grid;
      gap: 10px;
      margin: 12px 14px;
      padding: 12px;
      border: 1px solid #d7e3ef;
      border-radius: 14px;
      background: linear-gradient(135deg, #f7fbff, #fff);
    }

    .service-record-compact-head {
      display: flex;
      align-items: baseline;
      gap: 8px;
      min-width: 0;
    }

    .service-record-compact-head > span {
      color: #0d57a6;
      font-size: .66rem;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .service-record-compact-head > strong {
      font-size: .9rem;
    }

    .service-record-compact-head > small {
      color: #66788e;
      font-size: .72rem;
    }

    .service-record-compact-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
    }

    .service-record-compact-grid button {
      min-width: 0;
      min-height: 62px;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) 14px;
      gap: 7px;
      align-items: center;
      padding: 8px;
      border: 1px solid #d4e0ee;
      border-radius: 11px;
      background: #fff;
      color: #263f57;
      text-align: left;
      font: inherit;
      cursor: pointer;
    }

    .service-record-compact-grid button:hover,
    .service-record-compact-grid button:focus-visible,
    .service-record-compact-grid button.is-selected {
      border-color: #0d57a6;
      background: #edf5ff;
      color: #0d4d94;
      outline: none;
    }

    .service-record-compact-grid button:disabled {
      border-color: #dfe5eb;
      background: #f6f8fa;
      color: #83909d;
      cursor: not-allowed;
      opacity: .78;
    }

    .service-record-compact-grid button > i:first-child {
      width: 30px;
      height: 30px;
      padding: 6px;
      border-radius: 9px;
      background: #e8f2ff;
      color: #0d57a6;
    }

    .service-record-compact-grid button:disabled > i:first-child {
      background: #e9edf1;
      color: #83909d;
    }

    .service-record-compact-grid button > i:last-child {
      width: 14px;
      height: 14px;
    }

    .service-record-compact-grid button strong,
    .service-record-compact-grid button small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .service-record-compact-grid button strong {
      font-size: .75rem;
    }

    .service-record-compact-grid button small {
      margin-top: 2px;
      color: #687b8f;
      font-size: .62rem;
      font-weight: 700;
    }

    .service-record-catalogue-draft {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid #9fc7f0;
      border-radius: 11px;
      background: #eaf4ff;
      color: #153f68;
    }

    .service-record-catalogue-draft[hidden] {
      display: none !important;
    }

    .service-record-catalogue-draft > svg {
      width: 34px;
      height: 34px;
      padding: 7px;
      border-radius: 10px;
      background: #0d57a6;
      color: #fff;
    }

    .service-record-catalogue-draft-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .service-record-catalogue-draft-copy span {
      color: #0d57a6;
      font-size: .64rem;
      font-weight: 900;
      letter-spacing: .05em;
    }

    .service-record-catalogue-draft-copy strong,
    .service-record-catalogue-draft-copy small {
      overflow-wrap: anywhere;
    }

    .service-record-catalogue-draft-copy small {
      color: #506c87;
      font-size: .72rem;
    }

    .service-record-revision-proof {
      margin: 12px 0;
      padding: 12px;
      border: 1px solid #9fc2ef;
      border-radius: 12px;
      background: #f7fbff;
    }

    .service-record-revision-proof[hidden] {
      display: none !important;
    }

    .service-record-revision-proof-head,
    .service-record-revision-proof-title {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .service-record-revision-proof-head h3,
    .service-record-revision-proof-title strong {
      margin: 0;
    }

    .service-record-revision-proof-title strong,
    .service-record-revision-proof-title span {
      display: block;
    }

    .service-record-revision-proof-head p,
    .service-record-revision-proof-title span {
      margin: 3px 0 0;
      color: #60748a;
      font-size: .72rem;
    }

    .service-record-revision-proof-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }

    .service-record-revision-proof-card {
      min-width: 0;
      padding: 10px;
      border: 1px solid #d6e2ef;
      border-radius: 10px;
      background: #fff;
    }

    .service-record-revision-proof-list {
      display: grid;
      gap: 5px;
      margin-top: 8px;
    }

    .service-record-revision-proof-row {
      display: grid;
      grid-template-columns: minmax(84px, .7fr) minmax(0, 1.3fr);
      gap: 8px;
      padding-top: 5px;
      border-top: 1px solid #edf2f7;
      font-size: .7rem;
    }

    .service-record-revision-proof-row span {
      color: #60748a;
    }

    .service-record-revision-proof-row strong {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .service-record-revision-proof-row.is-changed {
      border-color: #f0bd5e;
      background: #fff9ec;
    }

    .service-record-revision-reason {
      display: block;
      margin-top: 10px;
      font-weight: 800;
    }

    .service-record-revision-reason textarea {
      display: block;
      width: min(720px, 100%);
      min-height: 72px;
      margin-top: 5px;
      resize: vertical;
    }

    .service-job-status-correction-gate {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #efc36d;
      border-radius: 10px;
      background: #fff9ec;
    }

    .service-job-status-correction-gate[hidden] {
      display: none !important;
    }

    .service-job-status-correction-gate[data-unlocked="true"] {
      border-color: #8bb8ef;
      background: #eef6ff;
    }

    .service-job-status-correction-gate-icon {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 9px;
      background: #fff;
      color: #9b5d00;
      box-shadow: inset 0 0 0 1px #efd69c;
    }

    .service-job-status-correction-gate[data-unlocked="true"] .service-job-status-correction-gate-icon {
      color: var(--blue);
      box-shadow: inset 0 0 0 1px #b8d3f3;
    }

    .service-job-status-correction-gate-copy strong,
    .service-job-status-correction-gate-copy span {
      display: block;
    }

    .service-job-status-correction-gate-copy span {
      margin-top: 2px;
      color: #60748a;
      font-size: .72rem;
    }

    .mechanic-workflow-panel[data-correction-locked="true"] {
      border-color: #efc36d;
      background: #fffdf7;
    }

    @media (max-width: 760px) {
      .service-record-revision-proof-grid {
        grid-template-columns: 1fr;
      }

      .service-record-revision-proof-head {
        align-items: stretch;
        flex-direction: column;
      }

      .service-job-status-correction-gate {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .service-job-status-correction-gate .btn {
        grid-column: 1 / -1;
        width: 100%;
      }
    }

    #add-record[data-service-record-compact="staff"] > [data-service-record-stage-shell],
    #add-record[data-service-record-compact="staff"] > #vehicleForm,
    #add-record[data-service-record-compact="staff"] #vehicleForm > .service-record-stage-content {
      display: none;
    }

    #add-record[data-service-record-compact="staff"][data-service-record-view="start"] > [data-service-record-stage-shell="start"] {
      display: block;
    }

    #add-record[data-service-record-compact="staff"][data-service-record-view="import"] > [data-service-record-stage-shell="import"] {
      display: grid;
    }

    #add-record[data-service-record-compact="staff"]:not([data-service-record-view="start"]):not([data-service-record-view="import"]) > #vehicleForm {
      display: grid;
      gap: 12px;
    }

    #add-record[data-service-record-compact="staff"][data-service-record-view="vehicle"] #vehicleForm > [data-service-record-stage="vehicle"],
    #add-record[data-service-record-compact="staff"][data-service-record-view="status"] #vehicleForm > [data-service-record-stage="status"],
    #add-record[data-service-record-compact="staff"][data-service-record-view="service"] #vehicleForm > [data-service-record-stage="service"],
    #add-record[data-service-record-compact="staff"][data-service-record-view="evidence"] #vehicleForm > [data-service-record-stage="evidence"] {
      display: grid;
      gap: 12px;
    }

    #add-record[data-service-record-compact="staff"] > .panel-head {
      padding: 11px 14px;
    }

    #add-record[data-service-record-compact="staff"] > .panel-head h2 {
      font-size: 1rem;
    }

    #add-record[data-service-record-compact="staff"] > .panel-head .mechanic-editor-back {
      display: none;
    }

    #add-record[data-service-record-compact="staff"] > [data-service-record-stage-shell="start"],
    #add-record[data-service-record-compact="staff"] > [data-service-record-stage-shell="import"],
    #add-record[data-service-record-compact="staff"] > #vehicleForm {
      margin: 0 14px 14px;
    }

    /* service-record-trace-20260812
       Staff land on a branch-aware record register instead of an empty search
       helper. Admin can trace all branches; scoped staff keep assigned-branch
       access through visibleVehicles() and userCanAccessWorkshopRecord(). */
    .service-record-trace {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid #d7e3ef;
      border-radius: 13px;
      background: #fff;
    }

    .service-record-trace[hidden] {
      display: none !important;
    }

    .service-record-trace-head,
    .service-record-trace-list-head,
    .service-record-trace-row,
    .service-record-trace-row-main,
    .service-record-trace-row-side {
      min-width: 0;
    }

    .service-record-trace-head,
    .service-record-trace-list-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .service-record-trace-head h3 {
      margin: 0;
      font-size: .98rem;
    }

    .service-record-trace-head p,
    .service-record-trace-list-head p {
      margin: 3px 0 0;
      color: #64788e;
      font-size: .72rem;
    }

    /* service-record-trace-kpi-hybrid-20260812
       KPI cards are compact selectors that open the matching trace register. */
    .service-record-trace-summary {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
    }

    .service-record-trace-summary .mini {
      position: relative;
      width: 100%;
      min-height: 58px;
      display: grid;
      align-content: center;
      gap: 3px;
      padding: 8px 10px;
      border: 1px solid #d9e4ef;
      border-radius: 10px;
      background: #f8fbff;
      color: var(--ink);
      text-align: left;
      font: inherit;
      cursor: pointer;
      transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .service-record-trace-summary .mini:hover,
    .service-record-trace-summary .mini:focus-visible {
      border-color: #80addd;
      background: #f0f7ff;
      box-shadow: 0 4px 12px rgba(13, 87, 166, .08);
      outline: none;
      transform: translateY(-1px);
    }

    .service-record-trace-summary .mini.is-selected {
      border-color: #0d57a6;
      background: #eaf4ff;
      box-shadow: inset 3px 0 0 #0d57a6;
    }

    .service-record-trace-summary .mini span {
      color: #63758a;
      font-size: .64rem;
      font-weight: 800;
    }

    .service-record-trace-summary .mini strong {
      font-size: 1.05rem;
    }

    .service-record-trace-summary .mini small {
      position: absolute;
      right: 9px;
      bottom: 8px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      color: #0d57a6;
      font-size: .58rem;
      font-weight: 850;
    }

    .service-record-trace-summary .mini small i {
      width: 12px;
      height: 12px;
    }

    .service-record-trace-filters {
      display: grid;
      grid-template-columns: minmax(230px, 1.5fr) repeat(3, minmax(145px, .7fr)) auto;
      gap: 8px;
      align-items: end;
    }

    .service-record-trace-filters label {
      min-width: 0;
      color: #485f78;
      font-size: .67rem;
      font-weight: 800;
    }

    .service-record-trace-filters input,
    .service-record-trace-filters select {
      width: 100%;
      min-height: 38px;
      margin-top: 4px;
    }

    .service-record-trace-list {
      display: grid;
      gap: 7px;
    }

    .service-record-trace-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 10px;
      border: 1px solid #d9e4ef;
      border-radius: 11px;
      background: #fff;
    }

    .service-record-trace-row:hover {
      border-color: #a9c7e8;
      background: #fbfdff;
    }

    .service-record-trace-row-main,
    .service-record-trace-row-title,
    .service-record-trace-row-meta,
    .service-record-trace-row-side {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .service-record-trace-row-main {
      display: grid;
      gap: 4px;
    }

    .service-record-trace-row-title strong {
      font-size: .82rem;
    }

    .service-record-trace-row-title span,
    .service-record-trace-row-meta span {
      color: #61758b;
      font-size: .68rem;
    }

    .service-record-trace-row-meta {
      flex-wrap: wrap;
    }

    .service-record-trace-row-meta .service-record-whatsapp-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: #128c7e;
      font-weight: 850;
    }

    .service-record-trace-row-meta .service-record-whatsapp-link.is-alert {
      color: #c92a3c;
    }

    .service-record-whatsapp-link i {
      width: 14px;
      height: 14px;
    }

    .service-record-trace-record-id {
      max-width: 260px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .service-record-trace-row-side {
      justify-content: flex-end;
    }

    .service-record-trace-empty {
      padding: 18px;
      border: 1px dashed #bfd0df;
      border-radius: 11px;
      background: #f9fbfd;
      color: #526b83;
      text-align: center;
    }

    #serviceRecordTrace[data-trace-mode="detail"] .service-record-trace-body {
      display: none;
    }

    #add-record[data-service-record-compact="staff"] > [data-service-record-stage-shell="start"] > #recordLookupPanel {
      display: none;
    }

    #add-record[data-service-record-compact="staff"] > [data-service-record-stage-shell="start"] > #recordSummaryPanel:not([hidden]) {
      display: block;
      margin-top: 10px;
    }

    @media (max-width: 1180px) {
      .service-record-compact-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 620px) {
      #add-record[data-service-record-compact="staff"] > .service-record-compact-hybrid {
        margin: 10px;
        padding: 10px;
      }

      .service-record-compact-head {
        display: grid;
        gap: 2px;
      }

      .service-record-compact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .service-record-compact-grid button {
        grid-template-columns: 28px minmax(0, 1fr);
      }

      .service-record-compact-grid button > i:last-child {
        display: none;
      }

      .service-record-catalogue-draft {
        grid-template-columns: 30px minmax(0, 1fr);
      }

      .service-record-catalogue-draft > svg {
        width: 30px;
        height: 30px;
      }

      .service-record-catalogue-draft > .btn {
        grid-column: 1 / -1;
        justify-content: center;
      }

      #add-record[data-service-record-compact="staff"] > [data-service-record-stage-shell="start"],
      #add-record[data-service-record-compact="staff"] > [data-service-record-stage-shell="import"],
      #add-record[data-service-record-compact="staff"] > #vehicleForm {
        margin-inline: 10px;
      }

      .service-record-trace {
        padding: 10px;
      }

      .service-record-trace-head,
      .service-record-trace-list-head {
        align-items: flex-start;
      }

      .service-record-trace-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .service-record-trace-summary .mini {
        min-height: 68px;
        padding-right: 8px;
      }

      .service-record-trace-summary .mini small {
        position: static;
        justify-content: space-between;
        margin-top: 2px;
      }

      .service-record-trace-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .service-record-trace-filters label:first-child {
        grid-column: 1 / -1;
      }

      .service-record-trace-clear {
        width: 100%;
      }

      .service-record-trace-row {
        grid-template-columns: minmax(0, 1fr);
      }

      .service-record-trace-row-title,
      .service-record-trace-row-side {
        justify-content: space-between;
      }

      .service-record-trace-row-side .btn {
        flex: 1;
      }
    }

    /* service-record-operations-control-centre-20260904
       The default staff view is an operational queue. The guided record
       workflow appears only after staff open or start a record. */
    #add-record[data-service-record-compact="staff"][data-service-record-view="start"] > .panel-head,
    #add-record[data-service-record-compact="staff"][data-service-record-view="start"] > .service-record-compact-hybrid {
      display: none;
    }

    #add-record[data-service-record-compact="staff"] > .service-record-compact-hybrid {
      margin: 12px 14px 10px;
      padding: 11px 12px;
    }

    #add-record[data-service-record-compact="staff"] .service-record-compact-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    #add-record[data-service-record-compact="staff"] .service-record-compact-import-step {
      display: none;
    }

    #add-record[data-service-record-compact="staff"] > [data-service-record-stage-shell="start"] {
      margin: 12px 14px 14px;
    }

    .service-record-trace {
      gap: 0;
      padding: 0;
      overflow: hidden;
      border-color: #cadbea;
      border-radius: 15px;
      background: #f5f8fc;
    }

    .service-record-trace-head {
      align-items: flex-start;
      padding: 15px 16px;
      border-bottom: 1px solid #d8e4ef;
      background: linear-gradient(135deg, #f7fbff 0%, #ffffff 72%);
    }

    .service-record-trace-eyebrow,
    .service-record-section-heading span {
      display: block;
      color: #0d57a6;
      font-size: .64rem;
      font-weight: 900;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .service-record-trace-head h3 {
      margin-top: 3px;
      font-size: 1.05rem;
    }

    .service-record-trace-head p {
      max-width: 820px;
    }

    .service-record-trace-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex: 0 0 auto;
    }

    .service-record-trace-body {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr);
      gap: 12px;
      padding: 12px;
    }

    .service-record-operations-summary,
    .service-record-work-queue {
      min-width: 0;
      padding: 12px;
      border: 1px solid #d8e4ef;
      border-radius: 12px;
      background: #fff;
    }

    .service-record-section-heading {
      display: grid;
      gap: 3px;
      margin-bottom: 10px;
    }

    .service-record-section-heading strong {
      font-size: .9rem;
    }

    .service-record-trace-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-record-trace-summary .mini {
      min-height: 72px;
      padding: 10px 11px;
      background: #f7faff;
    }

    .service-record-trace-summary .mini span {
      font-size: .68rem;
    }

    .service-record-trace-summary .mini strong {
      font-size: 1.22rem;
    }

    .service-record-trace-summary .mini small {
      position: static;
      justify-content: space-between;
      margin-top: 2px;
    }

    .service-record-trace-attention {
      display: grid;
      gap: 7px;
      margin-top: 9px;
      padding-top: 9px;
      border-top: 1px solid #e2eaf2;
    }

    .service-record-trace-attention button {
      width: 100%;
      min-width: 0;
      min-height: 42px;
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 7px 9px;
      border: 1px solid #d8e4ef;
      border-radius: 10px;
      background: #fff;
      color: #28445f;
      text-align: left;
      font: inherit;
      cursor: pointer;
    }

    .service-record-trace-attention button:hover,
    .service-record-trace-attention button:focus-visible,
    .service-record-trace-attention button.is-selected {
      border-color: #0d57a6;
      background: #edf5ff;
      outline: none;
    }

    .service-record-trace-attention button > i {
      width: 28px;
      height: 28px;
      padding: 6px;
      border-radius: 8px;
      background: #eef4fb;
      color: #0d57a6;
    }

    .service-record-trace-attention button strong,
    .service-record-trace-attention button small {
      display: block;
    }

    .service-record-trace-attention button strong {
      font-size: .72rem;
    }

    .service-record-trace-attention button small {
      margin-top: 1px;
      color: #687b8f;
      font-size: .62rem;
    }

    .service-record-trace-attention button > span:last-child {
      min-width: 28px;
      padding: 4px 7px;
      border-radius: 999px;
      background: #eaf3ff;
      color: #0d57a6;
      font-size: .72rem;
      font-weight: 900;
      text-align: center;
    }

    .service-record-work-queue-heading {
      margin-bottom: 8px;
    }

    .service-record-work-queue .service-record-trace-filters {
      grid-template-columns: minmax(220px, 1.45fr) repeat(3, minmax(125px, .72fr)) auto;
    }

    .service-record-work-queue .service-record-trace-list-head {
      margin: 10px 0 7px;
      padding-top: 9px;
      border-top: 1px solid #e2eaf2;
    }

    #serviceRecordTrace[data-trace-mode="detail"] .service-record-trace-head {
      border-bottom: 0;
    }

    #serviceRecordTrace[data-trace-mode="detail"] #serviceRecordTraceNewBtn,
    #serviceRecordTrace[data-trace-mode="detail"] #serviceRecordTraceImportBtn {
      display: none;
    }

    @media (max-width: 1180px) {
      .service-record-trace-body {
        grid-template-columns: minmax(0, 1fr);
      }

      .service-record-trace-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .service-record-trace-attention {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      #add-record[data-service-record-compact="staff"] > [data-service-record-stage-shell="start"] {
        margin: 10px;
      }

      #add-record[data-service-record-compact="staff"] .service-record-compact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .service-record-trace-head {
        display: grid;
        gap: 10px;
        padding: 13px;
      }

      .service-record-trace-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
      }

      .service-record-trace-actions .btn {
        justify-content: center;
        width: 100%;
      }

      .service-record-trace-back:not([hidden]) {
        grid-column: 1 / -1;
      }

      .service-record-trace-body {
        padding: 9px;
      }

      .service-record-operations-summary,
      .service-record-work-queue {
        padding: 10px;
      }

      .service-record-trace-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .service-record-trace-attention {
        grid-template-columns: minmax(0, 1fr);
      }

      .service-record-work-queue .service-record-trace-filters {
        grid-template-columns: minmax(0, 1fr);
      }

      .service-record-trace-filters label:first-child {
        grid-column: auto;
      }

      .service-record-trace-row-side {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        justify-content: stretch;
      }

      .service-record-trace-row-side .btn {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
      }
    }

    /* stock-control-compact-hybrid-20260812
       Stock Control starts with one compact overview and opens only the
       selected item, receiving, inventory, or history workspace. */
    .stock-compact-hybrid,
    .stock-control-back,
    .stock-item-editor-panel {
      display: none;
    }

    #stock-control[data-stock-workspace="compact"] > .panel-head {
      padding: 12px 14px;
    }

    #stock-control[data-stock-workspace="compact"] > .panel-head h2 {
      font-size: 1rem;
    }

    #stock-control[data-stock-workspace="compact"] > .panel-head .sub {
      margin-top: 3px;
      font-size: .76rem;
    }

    /* AutoCount is the gift stock source; CRM receiving records are historical. */
    #stock-control .stock-autocount-notice { display:flex; align-items:center; gap:16px; justify-content:space-between; padding:14px 16px; margin:12px 14px 0; border:1px solid #bfd5eb; border-radius:12px; background:#eef6ff; }
    #stock-control .stock-autocount-notice strong { color:#123f70; }
    #stock-control .stock-autocount-notice p { margin:5px 0 0; font-size:.82rem; line-height:1.5; color:#425d79; }
    #stock-control .stock-autocount-notice > div { flex:1; min-width:0; }
    #stock-control .stock-autocount-notice .btn { flex:0 0 auto; width:auto; min-height:44px; }
    #stock-control .stock-read-filters { margin:12px 14px 0; }
    #stock-control .stock-read-filters input, #stock-control .stock-read-filters select { min-height:44px; }
    #stock-control[data-stock-view="item-editor"] .stock-read-filters { display:none; }
    #stock-control:not([data-stock-view="items"]) #stockItemStatusFilterLabel,
    #stock-control:not([data-stock-view="history"]) #stockHistoryStatusFilterLabel { display:none; }
    #stock-control .stock-source-meta { margin-top:7px; line-height:1.5; font-size:.76rem; color:#526c86; overflow-wrap:anywhere; }
    #stock-control .stock-source-meta .badge { margin-right:6px; }
    #stock-control .stock-compact-hybrid-grid a { text-decoration:none; }
    #stock-control .stock-history-note { padding:14px; border:1px solid #d8e3ef; border-radius:12px; background:#fff; }
    #stock-control .stock-history-note summary { min-height:44px; cursor:pointer; font-weight:700; line-height:1.6; overflow-wrap:anywhere; }
    #stock-control .stock-history-note dl { display:grid; grid-template-columns:minmax(120px,.7fr) minmax(0,2fr); gap:8px 14px; margin:16px 0; font-size:.84rem; }
    #stock-control .stock-history-note dt { color:#526c86; }
    #stock-control .stock-history-note dd { margin:0; overflow-wrap:anywhere; }
    #stock-control .stock-history-note .stock-history-line { padding:10px 0; border-top:1px solid #e2ebf4; font-size:.84rem; line-height:1.7; overflow-wrap:anywhere; }
    #stock-control .stock-card-actions .btn, #stock-control .stock-detail-actions .btn, #stock-control .stock-control-back button { min-height:44px; }
    #stock-control #branchInventoryList .product-admin-row { grid-template-columns:minmax(0,1fr) auto; }
    #stock-control #branchInventoryList .product-admin-row > .badge { width:fit-content; }
    #stock-control .stock-item-thumb { width:76px; height:76px; max-height:76px; object-fit:contain; }
    @media(max-width:620px) {
      #stock-control .stock-autocount-notice { flex-direction:column; align-items:stretch; margin-inline:10px; }
      #stock-control .stock-read-filters { margin-inline:10px; }
      #stock-control .stock-read-filters label { display:grid; grid-template-columns:1fr; gap:5px; }
      #stock-control .stock-read-filters input, #stock-control .stock-read-filters select { width:100%; min-width:0; }
      #stock-control #branchInventoryList .product-admin-row { grid-template-columns:1fr; }
      #stock-control .stock-history-note dl { grid-template-columns:1fr; gap:4px; }
      #stock-control .stock-history-note dd { margin-bottom:8px; }
      #stock-control .stock-compact-hybrid-grid { grid-template-columns:1fr; }
      #stock-control .stock-compact-hybrid-grid :is(button,a) strong, #stock-control .stock-compact-hybrid-grid :is(button,a) small { white-space:normal; }
      #stock-control .stock-card-actions { flex-wrap:wrap; }
    }

    #stock-control[data-stock-workspace="compact"] > #stockControlSummary {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
      padding: 12px 14px 0;
    }

    #stock-control[data-stock-workspace="compact"] > #stockControlSummary .summary-card {
      position: relative;
      min-height: 68px;
      align-content: center;
      gap: 4px;
      padding: 9px 11px;
      border-radius: 11px;
      background: #fbfdff;
    }

    #stock-control[data-stock-workspace="compact"] > #stockControlSummary button.summary-card {
      width: 100%;
      color: var(--ink);
      text-align: left;
      font: inherit;
      cursor: pointer;
    }

    #stock-control[data-stock-workspace="compact"] > #stockControlSummary button.summary-card:hover,
    #stock-control[data-stock-workspace="compact"] > #stockControlSummary button.summary-card:focus-visible {
      border-color: #0d57a6;
      background: #edf5ff;
      outline: none;
    }

    #stock-control[data-stock-workspace="compact"] > #stockControlSummary .summary-card span {
      font-size: .7rem;
      font-weight: 750;
    }

    #stock-control[data-stock-workspace="compact"] > #stockControlSummary .summary-card strong {
      font-size: 1.12rem;
    }

    #stock-control[data-stock-workspace="compact"][data-stock-view="overview"] > .stock-compact-hybrid {
      display: grid;
      grid-template-columns: minmax(190px, .68fr) minmax(0, 3.32fr);
      gap: 14px;
      align-items: center;
      margin: 12px 14px 14px;
      padding: 14px;
      border: 1px solid #d8e3ef;
      border-radius: 14px;
      background: linear-gradient(135deg, #f7fbff, #fff);
    }

    .stock-compact-hybrid-head {
      display: grid;
      gap: 3px;
    }

    .stock-compact-hybrid-head > span {
      color: #0d57a6;
      font-size: .66rem;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .stock-compact-hybrid-head > strong {
      font-size: .92rem;
    }

    .stock-compact-hybrid-head > small {
      color: #66788e;
      font-size: .72rem;
    }

    .stock-compact-hybrid-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 9px;
    }

    .stock-compact-hybrid-grid :is(button,a) {
      min-width: 0;
      min-height: 74px;
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
      padding: 10px;
      border: 1px solid #d4e0ee;
      border-radius: 12px;
      background: #fff;
      color: #21394f;
      text-align: left;
      font: inherit;
      cursor: pointer;
    }

    .stock-compact-hybrid-grid :is(button,a):hover,
    .stock-compact-hybrid-grid :is(button,a):focus-visible {
      border-color: #1a5ca9;
      background: #edf5ff;
      color: #0d4d94;
      outline: none;
    }

    .stock-compact-hybrid-grid :is(button,a) > i:first-child {
      width: 36px;
      height: 36px;
      padding: 8px;
      border-radius: 11px;
      background: #e8f2ff;
      color: #0d57a6;
    }

    .stock-compact-hybrid-grid :is(button,a) strong,
    .stock-compact-hybrid-grid :is(button,a) small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .stock-compact-hybrid-grid :is(button,a) strong {
      font-size: .82rem;
    }

    .stock-compact-hybrid-grid :is(button,a) small {
      margin-top: 3px;
      color: #657992;
      font-size: .68rem;
      font-weight: 700;
    }

    .stock-selector-next {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      color: #0d57a6;
      font-size: .66rem;
      font-weight: 900;
    }

    .stock-selector-next i {
      width: 15px;
      height: 15px;
    }

    /* Keep long Stock Control views content-sized inside the staff scroll grid. */
    #stock-control[data-stock-workspace="compact"]:not([data-stock-view="overview"]) {
      align-self: start;
    }

    #stock-control[data-stock-workspace="compact"] > .stock-dashboard-panel,
    #stock-control[data-stock-workspace="compact"] > #stockItemEditorPanel,
    #stock-control[data-stock-workspace="compact"] > #stockReceivedNotePanel,
    #stock-control[data-stock-workspace="compact"] > #stockInventoryPanel,
    #stock-control[data-stock-workspace="compact"] > #stockHistoryPanel {
      display: none;
    }

    #stock-control[data-stock-workspace="compact"][data-stock-view="items"] > .stock-dashboard-panel {
      display: grid;
    }

    #stock-control[data-stock-workspace="compact"][data-stock-view="item-editor"] > #stockItemEditorPanel,
    #stock-control[data-stock-workspace="compact"][data-stock-view="stock-in"] > #stockReceivedNotePanel,
    #stock-control[data-stock-workspace="compact"][data-stock-view="inventory"] > #stockInventoryPanel,
    #stock-control[data-stock-workspace="compact"][data-stock-view="history"] > #stockHistoryPanel {
      display: block;
    }

    #stock-control[data-stock-workspace="compact"]:not([data-stock-view="overview"]) > #stockControlSummary,
    #stock-control[data-stock-workspace="compact"]:not([data-stock-view="overview"]) > .stock-compact-hybrid,
    #stock-control[data-stock-workspace="compact"]:not([data-stock-view="overview"]) > .panel-head .actions {
      display: none;
    }

    #stock-control[data-stock-workspace="compact"]:not([data-stock-view="overview"]) > .stock-control-back {
      display: flex;
      padding: 10px 14px 0;
    }

    .stock-control-back button {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 36px;
      padding: 7px 10px;
      border: 1px solid #cfe0f2;
      border-radius: 10px;
      background: #edf5ff;
      color: #154f91;
      font: inherit;
      font-size: .76rem;
      font-weight: 850;
      cursor: pointer;
    }

    .stock-control-back button i {
      width: 16px;
      height: 16px;
    }

    #stock-control[data-stock-workspace="compact"] > .stock-dashboard-panel,
    #stock-control[data-stock-workspace="compact"] > #stockItemEditorPanel,
    #stock-control[data-stock-workspace="compact"] > #stockReceivedNotePanel,
    #stock-control[data-stock-workspace="compact"] > #stockInventoryPanel,
    #stock-control[data-stock-workspace="compact"] > #stockHistoryPanel {
      margin: 10px 14px 14px;
    }

    #stock-control[data-stock-view="item-editor"] #loyaltyRewardForm {
      display: grid;
      gap: 12px;
      padding-top: 4px;
    }

    #stock-control[data-stock-view="item-editor"] #loyaltyRewardForm .loyalty-desktop-editor-head {
      display: none;
    }

    @media (max-width: 900px) {
      #stock-control[data-stock-workspace="compact"] > #stockControlSummary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      #stock-control[data-stock-workspace="compact"][data-stock-view="overview"] > .stock-compact-hybrid {
        grid-template-columns: 1fr;
      }

      .stock-compact-hybrid-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 620px) {
      #stock-control[data-stock-workspace="compact"] > .panel-head {
        align-items: flex-start;
      }

      #stock-control[data-stock-workspace="compact"] > .panel-head .actions {
        width: 100%;
      }

      #stock-control[data-stock-workspace="compact"] > .panel-head .actions .btn {
        flex: 1 1 150px;
        justify-content: center;
      }

      #stock-control[data-stock-workspace="compact"] > #stockControlSummary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-inline: 10px;
      }

      #stock-control[data-stock-workspace="compact"][data-stock-view="overview"] > .stock-compact-hybrid,
      #stock-control[data-stock-workspace="compact"] > .stock-dashboard-panel,
      #stock-control[data-stock-workspace="compact"] > #stockItemEditorPanel,
      #stock-control[data-stock-workspace="compact"] > #stockReceivedNotePanel,
      #stock-control[data-stock-workspace="compact"] > #stockInventoryPanel,
      #stock-control[data-stock-workspace="compact"] > #stockHistoryPanel {
        margin-inline: 10px;
      }

      .stock-compact-hybrid-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .product-filter-bar {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
    }

    .offer-preview {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr);
      min-height: 160px;
      margin-top: 12px;
    }

    .offer-preview img {
      min-height: 160px;
    }

    .offer-preview .offer-admin-body {
      border-left: 1px solid var(--line);
      background: #fff;
    }

    .offer-save-status {
      display: flex;
      align-items: flex-start;
      flex-basis: 100%;
      width: 100%;
      min-height: 0;
      margin-top: 4px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      font-weight: 800;
      color: var(--muted);
      line-height: 1.35;
    }

    .offer-save-status:empty {
      display: none;
    }

    .offer-save-status.ok {
      color: var(--green);
      border-color: rgba(12, 77, 162, .24);
      background: #edf8f1;
    }

    .offer-save-status.error {
      color: var(--red);
      border-color: rgba(174, 53, 39, .28);
      background: #fff3f1;
    }

    .offer-section {
      display: grid;
      gap: 12px;
    }

    .offer-section + .offer-section {
      border-top: 1px solid var(--line);
      padding-top: 16px;
    }

    .offer-section-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .offer-section-head h3 {
      margin: 0;
      font-size: 1rem;
    }

    .offer-image-preview {
      display: grid;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: #fbfcfb;
    }

    .offer-image-preview img {
      width: min(280px, 100%);
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #eaf2ff;
    }

    .offer-crop-panel {
      border: 1px solid rgba(12, 77, 162, .18);
      border-radius: 8px;
      background: #f8fafc;
      padding: 12px;
      display: grid;
      gap: 12px;
      grid-column: 1 / -1;
    }

    .offer-crop-panel[hidden] {
      display: none;
    }

    .offer-crop-canvas-wrap {
      width: 100%;
      max-width: 460px;
      margin: 0 auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      background:
        linear-gradient(45deg, #edf3ef 25%, transparent 25%),
        linear-gradient(-45deg, #edf3ef 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #edf3ef 75%),
        linear-gradient(-45deg, transparent 75%, #edf3ef 75%);
      background-size: 20px 20px;
      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
      overflow: hidden;
    }

    #offerCropCanvas {
      width: 100%;
      height: auto;
      display: block;
      background: #fff;
    }

    .offer-crop-controls {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .offer-crop-controls label {
      gap: 6px;
    }

    .summary-filter-bar {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
    }

    .summary-cards {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .summary-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      background: #fff;
      display: grid;
      gap: 8px;
      min-height: 116px;
    }

    .summary-card span {
      color: var(--muted);
      font-size: .84rem;
    }

    .summary-card strong {
      font-size: 1.65rem;
      line-height: 1;
    }

    .chart-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
      gap: 14px;
    }

    .chart-panel,
    .timeline-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .bar-row {
      display: grid;
      grid-template-columns: minmax(110px, 190px) minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      font-size: .9rem;
    }

    .bar-track {
      height: 12px;
      border-radius: 999px;
      background: #edf3f0;
      overflow: hidden;
    }

    .bar-fill {
      height: 100%;
      border-radius: inherit;
      background: var(--teal);
    }

    .year-compare {
      display: grid;
      gap: 10px;
    }

    .year-compare-row {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: #fbfcfb;
      display: grid;
      gap: 4px;
    }

    .timeline-list {
      display: grid;
      gap: 10px;
      border-left: 3px solid #dce8e3;
      margin-left: 8px;
      padding-left: 14px;
    }

    .timeline-item {
      position: relative;
      display: grid;
      gap: 4px;
    }

    .timeline-item::before {
      content: "";
      position: absolute;
      left: -21px;
      top: 7px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 0 3px #fff;
    }

    .rating-stars,
    .rating-display {
      display: inline-flex;
      gap: 4px;
      align-items: center;
      color: #b7791f;
      font-weight: 850;
    }

    .star-button {
      width: 44px;
      min-width: 44px;
      height: 44px;
      border-radius: 8px;
      background: #fff7df;
      color: #9a5f00;
      border: 1px solid #f1d39a;
      font-size: 1.35rem;
      line-height: 1;
    }

    .star-button.active {
      background: #b7791f;
      color: #fff;
      border-color: #b7791f;
    }

    .rating-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 80;
      background: rgba(0, 59, 122, .58);
      display: grid;
      place-items: center;
      padding: 18px;
    }

    .rating-modal-backdrop[hidden] {
      display: none;
    }

    .rating-modal {
      width: min(620px, 100%);
      max-height: calc(100dvh - 36px);
      overflow: auto;
      border-radius: 8px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      padding: 18px;
      display: grid;
      gap: 14px;
    }

    .vin-scan-modal {
      width: min(760px, 100%);
    }

    .vin-scan-body {
      display: grid;
      gap: 12px;
    }

    .vin-scan-preview-grid {
      display: grid;
      grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
      gap: 12px;
      align-items: start;
    }

    .vin-scan-preview {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: contain;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f7fafc;
    }

    .vin-scan-result-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .vin-scan-status {
      border: 1px dashed var(--line);
      border-radius: 8px;
      padding: 10px;
      background: #f8fbff;
      color: var(--muted);
      font-weight: 750;
    }

    .vin-scan-status.warn {
      background: #fff8e8;
      border-color: #f1d39a;
      color: #8a5a00;
    }

    .vin-scan-status.danger {
      background: #fff1f2;
      border-color: #fecdd3;
      color: #9f1239;
    }

    .vin-scan-duplicate {
      border: 1px solid #f1d39a;
      border-radius: 8px;
      padding: 10px;
      background: #fff8e8;
      display: grid;
      gap: 8px;
    }

    .vin-scan-card-button {
      white-space: nowrap;
    }

    .plate-scan-modal {
      width: min(820px, 100%);
    }

    .plate-scan-match-list {
      display: grid;
      gap: 10px;
    }

    .plate-scan-match {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 10px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .plate-scan-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .scan-crop-panel {
      display: grid;
      gap: 12px;
    }

    .scan-crop-stage-wrap {
      width: 100%;
      display: grid;
      justify-items: center;
      overflow: auto;
      border-radius: 8px;
      background: #0b1220;
      padding: 8px;
    }

    .scan-crop-stage {
      position: relative;
      display: inline-block;
      max-width: 100%;
      touch-action: none;
      overflow: hidden;
      border-radius: 8px;
      background: #111827;
      user-select: none;
    }

    .scan-crop-stage img {
      display: block;
      max-width: 100%;
      max-height: 58dvh;
      width: auto;
      height: auto;
      object-fit: contain;
    }

    .scan-crop-box {
      position: absolute;
      border: 3px solid #ffffff;
      box-shadow: 0 0 0 9999px rgba(2, 6, 23, .55), 0 0 0 2px rgba(12, 77, 162, .9);
      border-radius: 6px;
      cursor: move;
      touch-action: none;
    }

    .scan-crop-box::after {
      content: "";
      position: absolute;
      inset: 50% 0 auto;
      border-top: 1px dashed rgba(255,255,255,.8);
    }

    .scan-crop-handle {
      position: absolute;
      width: 24px;
      height: 24px;
      border: 2px solid #fff;
      background: var(--mobil-blue);
      border-radius: 999px;
      box-shadow: 0 2px 8px rgba(0,0,0,.28);
      touch-action: none;
    }

    .scan-crop-handle[data-handle="nw"] { left: -13px; top: -13px; cursor: nwse-resize; }
    .scan-crop-handle[data-handle="ne"] { right: -13px; top: -13px; cursor: nesw-resize; }
    .scan-crop-handle[data-handle="sw"] { left: -13px; bottom: -13px; cursor: nesw-resize; }
    .scan-crop-handle[data-handle="se"] { right: -13px; bottom: -13px; cursor: nwse-resize; }

    .scan-crop-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    @media (max-width: 640px) {
      .vin-scan-preview-grid,
      .vin-scan-result-grid {
        grid-template-columns: 1fr;
      }

      .plate-scan-match {
        grid-template-columns: 1fr;
      }

      .vin-scan-preview {
        max-height: 260px;
      }

      .record-summary-panel {
        margin: 8px 10px 0;
        padding: 9px;
      }

      .record-summary-head {
        grid-template-columns: 78px minmax(0, 1fr);
        align-items: start;
      }

      .record-summary-photo {
        width: 78px;
      }

      .record-summary-head .actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .record-summary-head .actions .btn {
        min-height: 38px;
        padding: 8px;
      }

      .record-summary-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .record-history-row {
        grid-template-columns: 1fr;
      }

      .scan-crop-stage img {
        max-height: 54dvh;
      }

      .scan-crop-actions {
        display: grid;
        grid-template-columns: 1fr;
      }
    }

    .rating-row {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
    }

    .access-row {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: #fff;
    }

    .access-directory {
      display: grid;
      gap: 8px;
    }

    .access-directory-head,
    .access-directory-row {
      display: grid;
      grid-template-columns: minmax(210px, 1.15fr) minmax(170px, .8fr) minmax(210px, 1fr) minmax(165px, .72fr) 38px;
      gap: 14px;
      align-items: center;
    }

    .access-directory-head {
      padding: 0 14px 2px;
      color: var(--muted);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .055em;
      text-transform: uppercase;
    }

    .access-directory-row {
      width: 100%;
      min-width: 0;
      padding: 13px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--ink);
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

    .access-directory-row:hover,
    .access-directory-row:focus-visible {
      border-color: #8eb5e2;
      box-shadow: 0 7px 18px rgba(12, 77, 162, .1);
      outline: none;
      transform: translateY(-1px);
    }

    .access-directory-identity,
    .access-directory-account,
    .access-directory-branch,
    .access-directory-activity {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .access-directory-identity strong {
      overflow: hidden;
      font-size: .94rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .access-directory-row .sub {
      overflow: hidden;
      font-size: .76rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .access-directory-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      align-items: center;
    }

    .access-directory-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      width: fit-content;
      color: #146333;
      font-size: .74rem;
      font-weight: 850;
    }

    .access-directory-status.inactive {
      color: var(--mobil-red);
    }

    .access-directory-arrow {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #edf5ff;
      color: var(--mobil-blue);
    }

    .access-directory-arrow svg {
      width: 19px;
      height: 19px;
    }

    .access-directory-mobile-summary {
      display: none;
    }

    body.access-user-drawer-open {
      overflow: hidden;
    }

    .access-user-drawer-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1190;
      background: rgba(8, 28, 52, .42);
      backdrop-filter: blur(2px);
    }

    .access-user-drawer-backdrop[hidden],
    .access-user-detail-drawer[hidden] {
      display: none !important;
    }

    .access-user-detail-drawer {
      position: fixed;
      z-index: 1200;
      top: 50%;
      left: 50%;
      width: min(760px, calc(100vw - 48px));
      max-height: min(780px, calc(100dvh - 56px));
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      overflow: hidden;
      border: 1px solid #cbd9e8;
      border-radius: 20px;
      background: #f7faff;
      color: #111827;
      box-shadow: 0 24px 66px rgba(8, 34, 68, .3);
      transform: translate(-50%, -50%);
      animation: access-user-detail-modal-in .18s ease-out both;
    }

    @keyframes access-user-detail-modal-in {
      from { opacity: 0; transform: translate(-50%, -47%); }
      to { opacity: 1; transform: translate(-50%, -50%); }
    }

    .access-user-drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .access-user-drawer-head h3 {
      margin: 0;
      font-size: 1.08rem;
    }

    .access-user-drawer-close {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid #cbd9e8;
      border-radius: 50%;
      background: #fff;
      color: var(--ink);
      cursor: pointer;
    }

    .access-user-drawer-content {
      min-height: 0;
      overflow-y: auto;
      padding: 18px;
      display: grid;
      gap: 14px;
      align-content: start;
    }

    .access-user-detail-hero,
    .access-user-detail-card {
      display: grid;
      gap: 10px;
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }

    .access-user-detail-hero h4,
    .access-user-detail-card h4 {
      margin: 0;
      color: var(--ink);
    }

    .access-user-detail-hero h4 {
      font-size: 1.2rem;
    }

    .access-user-detail-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .access-user-detail-fact {
      min-width: 0;
      padding: 10px;
      border: 1px solid #dce6f0;
      border-radius: 10px;
      background: #f8fbff;
      color: #111827;
    }

    .access-user-detail-fact span {
      display: block;
      margin-bottom: 3px;
      color: #52627a;
      font-size: .68rem;
      font-weight: 850;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .access-user-detail-fact strong {
      display: block;
      color: #111827;
      overflow-wrap: anywhere;
      font-size: .83rem;
    }

    .access-user-detail-list {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .access-user-detail-list li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      color: var(--muted);
      font-size: .82rem;
    }

    .access-user-detail-list svg {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
      color: var(--mobil-blue);
    }

    .access-user-drawer-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
      background: #fff;
    }

    .access-user-drawer-actions .btn {
      justify-content: center;
    }

    @media (max-width: 760px) {
      .access-directory-head {
        display: none;
      }

      .access-directory-row {
        grid-template-columns: minmax(0, 1fr) 36px;
        gap: 10px;
        padding: 13px;
      }

      .access-directory-account,
      .access-directory-branch,
      .access-directory-activity {
        display: none;
      }

      .access-directory-identity strong {
        font-size: 1rem;
      }

      .access-directory-mobile-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 5px 8px;
        color: var(--muted);
        font-size: .74rem;
        font-weight: 750;
      }

      .access-user-detail-drawer {
        top: 50%;
        left: 50%;
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 28px);
        border-radius: 18px;
      }

      .access-user-detail-grid {
        grid-template-columns: 1fr;
      }
    }

    .role-pill {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      border-radius: 999px;
      padding: 5px 8px;
      background: var(--teal-2);
      color: var(--teal);
      font-size: .76rem;
      font-weight: 850;
    }

    body.locked .shell {
      display: none;
    }

    body:not(.locked) .login-screen {
      display: none;
    }

    /* Mobil corporate colour system: blue, red, white, and silver neutrals. */
    aside {
      background: linear-gradient(180deg, var(--mobil-blue-dark) 0%, var(--mobil-blue) 100%);
      color: #fff;
    }

    .brand-logo-card {
      border-color: rgba(12, 77, 162, .16);
      box-shadow: 0 10px 24px rgba(12, 77, 162, .08);
    }

    .brand-mark {
      background: #fff;
      color: var(--mobil-blue);
    }

    .nav button {
      color: rgba(255, 255, 255, .88);
    }

    .nav button.active,
    .nav button:hover {
      background: var(--mobil-red);
      color: #fff;
    }

    .sidebar-note {
      border-top-color: rgba(255, 255, 255, .22);
      color: rgba(255, 255, 255, .78);
    }

    .user-strip {
      border-color: rgba(255, 255, 255, .22);
      background: rgba(255, 255, 255, .1);
      color: #fff;
    }

    .user-strip span {
      color: rgba(255, 255, 255, .82);
    }

    .mobile-header,
    .page-header {
      background: rgba(255, 255, 255, .96);
      border-bottom-color: var(--line);
    }

    .page-kicker {
      color: var(--mobil-red);
    }

    .hero {
      background-image:
        linear-gradient(90deg, rgba(0, 59, 122, .92), rgba(12, 77, 162, .58) 52%, rgba(237, 27, 47, .18)),
        url("/assets/service-bay.png");
    }

    .hero p {
      color: rgba(255, 255, 255, .9);
    }

    .stat.active,
    .segmented button.active,
    .reminder-tabs button.active,
    .summary-card:hover {
      border-color: var(--mobil-blue);
      box-shadow: 0 0 0 3px rgba(12, 77, 162, .12);
    }

    .stat span,
    .mini span,
    .summary-card span,
    .sub {
      color: var(--muted);
    }

    input:focus,
    select:focus,
    textarea:focus,
    .search:focus-within,
    .page-search:focus-within {
      border-color: var(--mobil-blue);
      box-shadow: 0 0 0 3px rgba(12, 77, 162, .12);
      outline: none;
    }

    .btn.primary,
    .offer-bottom-cta {
      background: var(--mobil-blue);
      color: #fff;
      border-color: var(--mobil-blue);
    }

    .btn.primary:hover,
    .offer-bottom-cta:hover {
      background: var(--mobil-blue-dark);
      border-color: var(--mobil-blue-dark);
    }

    .btn.danger,
    .btn.pending-send,
    .reminder.pending .btn,
    .reminder-actions .pending-send {
      background: var(--mobil-red);
      color: #fff;
      border-color: var(--mobil-red);
    }

    .btn.sent,
    .reminder.sent .btn {
      background: var(--mobil-blue);
      color: #fff;
      border-color: var(--mobil-blue);
    }

    .badge.ok,
    .badge.info,
    .role-pill {
      background: var(--teal-2);
      color: var(--mobil-blue);
    }

    .role-pill.role-digital_operations_manager {
      background: #eef2ff;
      color: #3347a4;
      border: 1px solid #c7d2fe;
    }

    .badge.due,
    .badge.warn {
      background: var(--red-2);
      color: var(--mobil-red);
    }

    .badge.pending,
    .badge.customer-warn {
      background: #fff4db;
      color: #825517;
    }

    .sub.success {
      color: var(--mobil-blue);
    }

    .sub.error,
    .sub.warning {
      color: var(--mobil-red);
    }

    .vehicle,
    .panel,
    .customer-profile-card,
    .customer-history-card,
    .workshop-location-card,
    .product-card,
    .offer-card,
    .summary-card,
    .payment-record-card,
    .customer-home-card {
      border-color: var(--line);
      background: #fff;
    }

    .vehicle:hover,
    .payment-record-card:hover,
    .customer-vehicle-row.selected {
      border-color: rgba(12, 77, 162, .42);
      box-shadow: 0 10px 26px rgba(12, 77, 162, .08);
    }

    .mini,
    .customer-register-panel,
    .import-panel,
    .bulk-launcher,
    .toolbar,
    .customer-home-mini-row {
      background: #f8fafc;
      border-color: #e1e8f2;
    }

    .workshop-intro,
    .product-admin-panel,
    .offer-preview {
      border-color: rgba(12, 77, 162, .18);
      background: linear-gradient(135deg, #f4f8ff, #fff);
    }

    .workshop-location-meta .badge,
    .offer-meta .badge,
    .product-meta .badge {
      border: 1px solid rgba(12, 77, 162, .12);
    }

    .bar-fill,
    .rating-stars .star-button.active,
    .rating-display {
      color: var(--mobil-red);
    }

    .bar-fill {
      background: var(--mobil-blue);
    }

    .toast {
      background: var(--mobil-blue-dark);
      color: #fff;
      border-color: rgba(255, 255, 255, .16);
    }

    .bottom-nav {
      border-top-color: var(--line);
      background: rgba(255, 255, 255, .98);
    }

    .bottom-nav button {
      color: #5f6f84;
    }

    .bottom-nav button.active {
      color: var(--mobil-blue);
      background: #eaf2ff;
    }

    .bottom-nav button.active svg {
      color: var(--mobil-red);
    }

    @media (max-width: 1120px) {
      .shell { grid-template-columns: 1fr; }
      aside {
        position: sticky;
        top: 0;
        z-index: 20;
        height: auto;
        padding: 14px 18px;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        box-shadow: 0 10px 28px rgba(12, 77, 162, .16);
      }
      .brand { flex: 1 1 260px; }
      .nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        padding-bottom: 2px;
        scrollbar-width: thin;
      }
      .nav button {
        flex: 0 0 auto;
        white-space: nowrap;
      }
      .sidebar-note { display: none; }
      .workspace { grid-template-columns: 1fr; }
      .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .dashboard-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .dashboard-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .dashboard-charts,
      .dashboard-section-grid {
        grid-template-columns: 1fr;
      }
      .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .payment-workspace { grid-template-columns: 1fr; }
      .receipt-form { position: static; }
      .history-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .product-setup-grid {
        grid-template-columns: 1fr;
      }
      .offer-card,
      .offer-preview,
      .chart-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
      }
      .offer-card > img {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        align-self: start;
      }
      .offer-card-body {
        position: relative;
        z-index: 2;
        border-top: 1px solid var(--line);
      }
      .offer-preview .offer-admin-body {
        border-left: 0;
        border-top: 1px solid var(--line);
      }
      .customer-offer-card {
        width: 100%;
        max-width: 100%;
      }
      .customer-offer-card .offer-image-container,
      .customer-offer-card .offer-card-body {
        grid-column: 1;
      }
      .customer-offer-card .offer-image-container {
        grid-row: 1;
      }
      .customer-offer-card .offer-card-body {
        grid-row: 2;
        border-left: 0;
        border-top: 1px solid var(--line);
      }
      .offer-image-container {
        max-width: 100vw;
        border-radius: 0;
      }
      .offer-crop-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .summary-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .product-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .product-filter-bar.stock-item-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .summary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .customer-dashboard-layout {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
      }
      .customer-home-hero,
      .customer-home-grid {
        grid-template-columns: 1fr;
      }
      .customer-service-grid,
      .booking-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .customer-service-category-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .oil-package-grid,
      .vehicle-popular-grid,
      .vehicle-option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .customer-dashboard-side {
        top: 78px;
      }
      .customer-home-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      #vehicleList {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      }
      .vehicle-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .customer-detail-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 900px) {
      .customer-dashboard-layout {
        grid-template-columns: 1fr;
      }
      .customer-dashboard-side {
        display: contents;
        position: static;
        top: auto;
        z-index: auto;
      }
      .loyalty-sticky-card,
      .customer-actions-desktop {
        display: none;
      }
      .mobile-sticky-loyalty-bar {
        display: flex;
      }
      .customer-actions-mobile {
        display: grid;
      }
    }

    @media (max-width: 760px) {
      aside {
        padding: 10px 12px;
        gap: 10px;
      }
      .brand {
        flex-basis: 100%;
        font-size: .98rem;
      }
      .brand-mark {
        inline-size: 36px;
        block-size: 36px;
      }
      .nav {
        margin-inline: -4px;
        padding-inline: 4px;
      }
      .nav button {
        min-height: 44px;
        padding: 10px 11px;
        font-size: .94rem;
      }
      main { padding: 12px; gap: 12px; }
      .hero {
        min-height: 170px;
        padding: 18px;
      }
      .hero h1 {
        font-size: 2rem;
        line-height: 1.05;
      }
      .hero p {
        font-size: .94rem;
      }
      .stats { grid-template-columns: 1fr 1fr; }
      .dashboard-owner-header,
      .dashboard-section-title {
        align-items: stretch;
        flex-direction: column;
      }
      .dashboard-filter-grid,
      .dashboard-kpi-grid,
      .dashboard-custom-range {
        grid-template-columns: 1fr;
      }
      .dashboard-table {
        min-width: 760px;
      }
      .bar-row {
        grid-template-columns: minmax(68px, 92px) minmax(0, 1fr);
      }
      .bar-row strong {
        grid-column: 2;
      }
      .mechanic-workflow-panel {
        grid-template-columns: 1fr;
      }
      .mechanic-workflow-actions {
        justify-content: stretch;
      }
      .mechanic-status-btn {
        flex: 1 1 140px;
      }
      .field-grid, .mini-grid { grid-template-columns: 1fr; }
      .service-item-grid .service-item-oil-used { grid-column: auto; }
      .payment-record-row { grid-template-columns: 1fr; }
      .payment-record-actions { min-width: 0; }
      .payment-record-meta,
      .history-detail-grid { grid-template-columns: 1fr; }
      .summary-filter-bar,
      .summary-cards,
      .rating-row {
        grid-template-columns: 1fr;
      }
      .customer-home-page {
        padding: 12px;
        gap: 12px;
      }
      .customer-home-hero {
        padding: 12px;
        box-shadow: 0 10px 24px rgba(12, 77, 162, .14);
      }
      .customer-home-main-card {
        min-height: 136px;
      }
      .customer-home-welcome {
        gap: 8px;
      }
      .customer-home-kicker {
        padding: 5px 8px;
        font-size: .66rem;
        letter-spacing: 0;
      }
      .customer-home-welcome h2 {
        font-size: 1.45rem;
        line-height: 1.08;
      }
      .customer-home-welcome p {
        font-size: .86rem;
        line-height: 1.3;
        max-width: 34ch;
      }
      .customer-home-welcome .badges {
        gap: 6px;
      }
      .customer-home-welcome .badge {
        padding: 5px 8px;
        font-size: .72rem;
      }
      .loyalty-points-panel {
        min-height: 154px;
      }
      .mobile-sticky-loyalty-bar {
        top: 70px;
        min-height: 34px;
        padding: 5px 9px;
        box-shadow: 0 8px 18px rgba(24, 33, 31, .1);
      }
      .mobile-sticky-loyalty-bar strong {
        font-size: .95rem;
      }
      .mobile-sticky-loyalty-bar small {
        display: none;
      }
      .customer-vehicle-showcase,
      .customer-home-actions {
        grid-template-columns: 1fr;
      }
      .customer-section-head {
        align-items: stretch;
        flex-direction: column;
      }
      .customer-service-grid,
      .customer-service-meta,
      .booking-grid,
      .booking-steps {
        grid-template-columns: 1fr;
      }
      .customer-service-builder-backdrop {
        place-items: start center;
        padding: 0;
      }
      .customer-service-builder-modal {
        width: 100%;
        max-height: 100dvh;
        border-radius: 0 0 16px 16px;
        border-top: 0;
      }
      .customer-service-builder-head {
        padding: 10px 12px;
      }
      .customer-service-builder-steps {
        overflow-x: auto;
        grid-template-columns: repeat(4, minmax(88px, 1fr));
        padding: 9px 12px;
      }
      .customer-service-builder-body {
        padding: 13px;
      }
      .customer-service-builder-booking-grid,
      .customer-service-builder-actions {
        grid-template-columns: 1fr;
      }
      .customer-service-builder-booking-grid .wide {
        grid-column: auto;
      }
      .customer-service-choice,
      .customer-product-choice {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        padding: 11px;
      }
      .customer-selected-vehicle-strip {
        grid-template-columns: 64px minmax(0, 1fr);
      }
      .customer-selected-vehicle-strip .actions {
        grid-column: 1 / -1;
      }
      .customer-service-category-grid {
        grid-template-columns: repeat(var(--customer-service-mobile-columns, 3), minmax(0, 1fr));
        gap: 12px 8px;
      }
      .customer-service-category {
        min-height: 72px;
        font-size: .76rem;
        border-color: rgba(12, 77, 162, .12);
        box-shadow: 0 6px 14px rgba(24, 33, 31, .035);
      }
      body.customer-app-mode .customer-service-category-grid {
        gap: 16px 6px;
      }
      body.customer-app-mode .customer-service-featured-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 6px;
      }
      body.customer-app-mode .customer-service-category {
        min-height: 92px;
        padding: 2px 0;
      }
      body.customer-app-mode .customer-service-category > i,
      body.customer-app-mode .customer-service-category > .service-catalogue-icon {
        width: var(--customer-service-icon-size, 78px);
        height: var(--customer-service-icon-size, 78px);
        border-radius: calc(var(--customer-service-icon-size, 78px) * .24);
      }
      body.customer-app-mode .customer-service-category span:last-child {
        width: min(var(--customer-service-icon-label-width, 88px), 100%);
        font-size: .75rem;
      }
      .vehicle-stepper,
      .scan-capture-row,
      .oil-package-grid {
        grid-template-columns: 1fr;
      }
      .vehicle-picker-layout {
        grid-template-columns: minmax(0, 1fr) 24px;
      }
      .vehicle-popular-grid,
      .vehicle-option-grid {
        grid-template-columns: 1fr;
      }
      .vehicle-step {
        min-height: 38px;
      }
      .customer-floating-whatsapp {
        right: 12px;
        bottom: 76px;
        width: 46px;
        height: 46px;
      }
      .customer-vehicle-carousel-head {
        align-items: flex-start;
        flex-direction: column;
      }
      .customer-vehicle-carousel {
        display: flex;
        grid-auto-columns: none;
        grid-auto-flow: unset;
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        padding: 2px 0 10px;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
      }
      .customer-vehicle-swipe-card,
      .customer-vehicle-card-body,
      .customer-vehicle-card-mini,
      .customer-vehicle-card-actions {
        min-width: 0;
        max-width: 100%;
      }
      .customer-vehicle-swipe-card {
        flex: 0 0 100%;
        width: 100%;
        box-sizing: border-box;
      }
      .customer-vehicle-swipe-card img {
        max-width: 100%;
      }
      .customer-vehicle-card-mini {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .customer-vehicle-card-mini .mini {
        min-height: 74px;
        padding: 8px 9px;
      }
      .customer-vehicle-card-mini .mini span {
        font-size: .64rem;
        letter-spacing: .02em;
      }
      .customer-vehicle-card-mini .mini strong {
        font-size: .9rem;
        line-height: 1.12;
      }
      .customer-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #vehicleList {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
      }
      .customer-vehicle-detail .vehicle-top {
        align-items: start;
        gap: 7px;
        padding-bottom: 4px;
        border-bottom: 0;
      }
      .customer-vehicle-detail .vehicle-identity {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr);
        align-items: start;
        gap: 9px;
      }
      .customer-vehicle-detail .vehicle-photo {
        width: 108px;
        height: 72px;
        border-radius: 6px;
      }
      .customer-vehicle-detail {
        padding: 8px;
        gap: 7px;
      }
      .customer-vehicle-detail .plate {
        font-size: .98rem;
        line-height: 1.05;
      }
      .customer-vehicle-detail .sub {
        font-size: .76rem;
        line-height: 1.18;
      }
      .customer-vehicle-detail .vehicle-status-chips {
        gap: 4px;
      }
      .customer-vehicle-detail .badge {
        min-height: 24px;
        padding: 3px 7px;
        font-size: .66rem;
      }
      .customer-vehicle-detail .vehicle-compact-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        padding: 0;
      }
      .customer-vehicle-detail .vehicle-compact-summary div {
        border: 1px solid #e4ecf7;
        border-radius: 7px;
        background: #fbfdff;
        padding: 6px 7px;
        min-height: 42px;
      }
      .customer-vehicle-detail .vehicle-compact-summary span {
        font-size: .62rem;
      }
      .customer-vehicle-detail .vehicle-compact-summary strong {
        font-size: .78rem;
        line-height: 1.1;
      }
      .customer-vehicle-detail .vehicle-compact-actions {
        padding-top: 6px;
        gap: 6px;
      }
      .customer-vehicle-detail .vehicle-detail-drawer > summary {
        min-height: 32px;
        font-size: .78rem;
        padding: 0 9px;
      }
      .customer-vehicle-detail .btn {
        min-height: 32px;
        font-size: .78rem;
        padding: 0 9px;
      }
      .customer-vehicle-detail .vehicle-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
      }
      .customer-vehicle-detail .vehicle-detail-grid .mini {
        min-height: 40px;
        padding: 6px 7px;
      }
      .customer-vehicle-detail .vehicle-detail-grid .mini span {
        font-size: .6rem;
      }
      .customer-vehicle-detail .vehicle-detail-grid .mini strong {
        font-size: .76rem;
      }
      .customer-action-button {
        min-height: 56px;
        grid-template-columns: 32px minmax(0, 1fr);
        justify-items: start;
        text-align: left;
      }
      .customer-profile-card {
        padding: 12px;
      }
      .customer-vehicle-profile-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
      }
      .customer-vehicle-profile-body {
        padding: 10px;
        gap: 9px;
      }
      .customer-vehicle-profile-title h3 {
        font-size: 1.12rem;
      }
      .customer-vehicle-profile-grid,
      .customer-vehicle-profile-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }
      .customer-vehicle-profile-mini {
        min-height: 50px;
        padding: 7px 8px;
      }
      .customer-vehicle-profile-mini span {
        font-size: .58rem;
      }
      .customer-vehicle-profile-mini strong {
        font-size: .78rem;
      }
      .customer-vehicle-profile-actions {
        grid-template-columns: 1fr;
      }
      .vehicle-form-section {
        padding: 10px;
      }
      .product-filter-bar,
      .product-price-line,
      .product-admin-row,
      .redeemable-stock-card,
      .stock-item-detail-head,
      .stock-detail-grid,
      .stock-branch-row,
      .stock-selected-item-preview,
      .loyalty-filter-bar,
      .loyalty-redemption-row {
        grid-template-columns: 1fr;
      }
      .loyalty-delivery-grid {
        grid-template-columns: 1fr;
      }
      .loyalty-redemption-fulfillment {
        padding: 10px;
      }
      .product-filter-bar.stock-item-toolbar,
      .stock-metric-row {
        grid-template-columns: 1fr;
      }
      body.customer-app-mode #loyaltySummaryCards,
      body.customer-app-mode #loyaltyCustomerBalance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 8px 10px 0;
      }
      body.customer-app-mode #loyaltySummaryCards .summary-card,
      body.customer-app-mode #loyaltyCustomerBalance .summary-card {
        min-height: 58px;
        padding: 7px 8px;
        gap: 3px;
      }
      body.customer-app-mode #loyaltySummaryCards .summary-card strong,
      body.customer-app-mode #loyaltyCustomerBalance .summary-card strong {
        font-size: .98rem;
      }
      body.customer-app-mode #loyalty-program .product-catalogue-list,
      body.customer-app-mode #loyaltyRedemptionPanel {
        padding: 10px;
        gap: 9px;
      }
      body.customer-app-mode #loyaltyCustomerBalanceCard {
        margin: 8px 10px 0;
        padding: 0;
        gap: 0;
      }
      body.customer-app-mode #loyalty-program .loyalty-filter-bar {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
      }
      body.customer-app-mode #loyalty-program .loyalty-filter-bar label {
        font-size: .68rem;
      }
      body.customer-app-mode #loyalty-program .loyalty-filter-bar select {
        min-height: 34px;
        padding: 7px 8px;
        font-size: .76rem;
      }
      body.customer-app-mode #loyaltyCartPanel {
        margin: 8px 10px 0;
        padding: 10px;
      }
      body.customer-app-mode .loyalty-cart-head,
      body.customer-app-mode .loyalty-cart-row,
      body.customer-app-mode .loyalty-cart-checkout {
        grid-template-columns: 1fr;
      }
      body.customer-app-mode .loyalty-cart-head {
        display: grid;
      }
      body.customer-app-mode #loyaltyCustomerSummary {
        font-size: .72rem;
        line-height: 1.3;
      }
      body.customer-app-mode .loyalty-rules-note {
        padding: 8px 9px;
        gap: 4px;
      }
      body.customer-app-mode .loyalty-rules-note strong {
        font-size: .82rem;
      }
      body.customer-app-mode .loyalty-rules-note p {
        font-size: .68rem;
      }
      body.customer-app-mode .loyalty-rules-actions .btn {
        min-height: 30px;
        padding: 5px 8px;
        font-size: .68rem;
      }
      body.customer-app-mode .loyalty-terms-content {
        gap: 9px;
      }
      body.customer-app-mode .loyalty-terms-hero {
        padding: 11px;
      }
      body.customer-app-mode .loyalty-terms-hero h3 {
        font-size: .95rem;
      }
      body.customer-app-mode .loyalty-terms-hero p,
      body.customer-app-mode .loyalty-terms-row p {
        font-size: .72rem;
      }
      body.customer-app-mode .loyalty-terms-row {
        padding: 10px;
      }
      body.customer-app-mode .loyalty-terms-row strong {
        font-size: .82rem;
      }
      body.customer-app-mode #loyalty-program .loyalty-reward-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      body.customer-app-mode #loyalty-program .loyalty-reward-card {
        grid-template-columns: 100px minmax(0, 1fr);
        min-height: 128px;
      }
      body.customer-app-mode #loyalty-program .loyalty-reward-card img {
        display: block;
        width: 100px;
        height: 100%;
        min-height: 128px;
        aspect-ratio: auto;
        object-fit: contain;
        object-position: center;
        padding: 7px;
        box-sizing: border-box;
        background: #fff;
        border-bottom: 0;
        border-right: 1px solid var(--line);
      }
      body.customer-app-mode #loyalty-program .loyalty-reward-body {
        padding: 8px;
        gap: 6px;
      }
      body.customer-app-mode #loyalty-program .loyalty-reward-body h3 {
        font-size: .9rem;
        line-height: 1.12;
      }
      body.customer-app-mode #loyalty-program .loyalty-reward-body p,
      body.customer-app-mode #loyalty-program .loyalty-unavailable-note {
        font-size: .7rem;
        line-height: 1.25;
      }
      body.customer-app-mode #loyalty-program .loyalty-reward-meta {
        gap: 4px;
      }
      body.customer-app-mode #loyalty-program .loyalty-reward-meta .badge {
        min-height: 21px;
        padding: 2px 6px;
        font-size: .6rem;
      }
      body.customer-app-mode #loyalty-program .loyalty-stock-line {
        gap: 5px;
      }
      body.customer-app-mode #loyalty-program .product-price-box {
        min-height: 42px;
        padding: 6px 7px;
      }
      body.customer-app-mode #loyalty-program .product-price-box span {
        font-size: .6rem;
      }
      body.customer-app-mode #loyalty-program .product-price-box strong {
        font-size: .72rem;
        line-height: 1.1;
      }
      @media (max-width: 380px) {
        body.customer-app-mode #loyalty-program .loyalty-reward-card {
          grid-template-columns: 88px minmax(0, 1fr);
        }
        body.customer-app-mode #loyalty-program .loyalty-reward-card img {
          width: 88px;
          padding: 6px;
        }
      }
      .stock-card-actions {
        justify-content: stretch;
        min-width: 0;
      }
      .stock-card-actions .btn,
      .stock-detail-actions .btn {
        flex: 1 1 140px;
        justify-content: center;
      }
      .loyalty-stock-line,
      .loyalty-checkout-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .product-admin-row img {
        width: 100%;
        max-width: 160px;
      }
      .product-grid.item-master-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .product-card.item-master-card {
        grid-template-columns: 74px minmax(0, 1fr);
        padding: 8px;
      }
      .product-card.item-master-card .product-image-wrap {
        width: 74px;
      }
      .product-card.item-master-card .product-card-body {
        grid-template-columns: 1fr;
      }
      .product-card.item-master-card .offer-meta,
      .product-card.item-master-card h3,
      .product-card.item-master-card .item-master-muted,
      .product-card.item-master-card .item-master-placement,
      .product-card.item-master-card .product-price-line,
      .product-card.item-master-card .item-master-price-line {
        grid-column: 1;
      }
      .product-card.item-master-card .product-price-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .product-card.item-master-card .product-card-actions {
        grid-column: 1 / -1;
        grid-row: auto;
        flex-direction: row;
        align-items: stretch;
      }
      .product-card.item-master-card .product-card-actions .btn {
        width: auto;
        flex: 1 1 84px;
        justify-content: center;
      }
      .product-admin-saved-list {
        margin: 0 12px 10px;
      }
      .product-admin-saved-list .product-admin-row {
        grid-template-columns: 54px minmax(0, 1fr);
      }
      .product-admin-saved-list .product-admin-row .product-image-wrap {
        width: 54px;
      }
      .product-admin-saved-list .product-admin-row .actions {
        grid-column: 1 / -1;
        justify-content: stretch;
      }
      .product-admin-saved-list .product-admin-row .actions .btn {
        flex: 1 1 96px;
        justify-content: center;
      }
      .offer-crop-controls {
        grid-template-columns: 1fr;
      }
      .bar-row {
        grid-template-columns: 1fr;
      }
      form,
      .promotion-builder,
      .list,
      .audit-list,
      .customer-history-list,
      .customer-offers-list,
      .workshop-locations-list,
      .offer-admin-list,
      .product-admin-panel,
      .product-catalogue-list,
      .ratings-list,
      .summary-page,
      .payment-workspace {
        padding: 12px;
      }

      .customer-history-vehicle-card {
        grid-template-columns: 44px minmax(0, 1fr) 36px;
        gap: 9px;
        padding: 10px;
      }

      .customer-history-selector-icon {
        width: 42px;
        height: 42px;
      }

      .customer-history-visit-list {
        padding: 8px;
      }

      .customer-history-visit-card {
        grid-template-columns: 36px minmax(0, 1fr) 26px;
      }

      .customer-history-visit-card .badge {
        grid-column: 2 / 3;
        justify-self: start;
        max-width: 100%;
      }

      .customer-history-visit-arrow {
        grid-column: 3;
        grid-row: 1 / span 2;
      }

      .customer-history-card .history-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .customer-history-card .actions {
        display: grid;
        grid-template-columns: 1fr;
      }
      .import-panel {
        margin: 12px;
        padding: 12px;
      }
      .toolbar {
        padding: 10px 12px;
      }
      .toolbar label,
      .search {
        flex-basis: 100%;
      }
      input, select, textarea {
        font-size: 16px;
        min-height: 48px;
        padding: 12px;
      }
      .btn {
        min-height: 48px;
      }
      textarea {
        line-height: 1.4;
      }
      .search {
        min-height: 48px;
      }
      .search input {
        min-height: 44px;
      }
      .vehicle-top, .panel-head { align-items: stretch; flex-direction: column; }
      #vehicleList {
        grid-template-columns: 1fr;
      }
      .vehicle-compact .vehicle-top {
        align-items: stretch;
      }
      .vehicle-compact .vehicle-photo {
        width: 96px;
        height: 64px;
      }
      .vehicle-compact-summary,
      .vehicle-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .vehicle-compact-actions {
        align-items: stretch;
        flex-direction: column;
      }
      .vehicle-detail-drawer > summary,
      .vehicle-detail-toggle,
      .vehicle-compact .btn {
        width: 100%;
        min-height: 42px;
      }
      .vehicle-identity {
        align-items: flex-start;
      }
      .vehicle-photo {
        width: min(180px, 100%);
      }
      .vehicle-photo-editor {
        grid-template-columns: 1fr;
      }
      .customer-vehicle-row {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
      }
      .customer-vehicle-row img {
        width: 88px;
        border-radius: 6px;
      }
      .customer-vehicle-row-title strong {
        font-size: .9rem;
      }
      .customer-vehicle-row-title span {
        font-size: .7rem;
      }
      .customer-vehicle-row-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .customer-vehicle-row-actions {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-items: stretch;
      }
      .customer-vehicle-row-actions .btn {
        min-height: 32px;
        justify-content: center;
        font-size: .78rem;
      }
      .mechanic-result-head,
      .history-card-head {
        flex-direction: column;
      }
      .vehicle-photo-editor img {
        width: min(220px, 100%);
      }
      .reminder, .audit-row { grid-template-columns: 1fr; }
      .access-row { grid-template-columns: 1fr; }
      .access-login-routes { grid-template-columns: 1fr; }
      .reminder-actions { justify-content: stretch; }
      .vehicle {
        padding: 12px;
      }
      .plate {
        font-size: 1.02rem;
      }
      .stat {
        min-height: 96px;
        padding: 12px;
      }
      .stat strong {
        font-size: 1.55rem;
      }
      .btn { width: 100%; }
      .btn.icon {
        width: 48px;
        min-width: 48px;
      }
      .segmented { width: 100%; }
      .segmented button { flex: 1; }
      .reminder-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .reminder-tabs button {
        min-height: 44px;
      }
      .bulk-check {
        inline-size: 24px;
        block-size: 24px;
      }
      .qr-grid {
        grid-template-columns: 1fr;
      }
      .qr-card img {
        width: min(230px, 100%);
        height: auto;
        aspect-ratio: 1;
      }
      .promotion-attachment-card {
        grid-template-columns: 1fr;
      }
      .promotion-attachment-card img {
        width: min(220px, 100%);
        height: auto;
        justify-self: center;
      }
      .toast {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
      }
    }

    @media (max-width: 460px) {
      .stats { grid-template-columns: 1fr; }
      .reminder-tabs { grid-template-columns: 1fr; }
      .actions {
        align-items: stretch;
      }
      .actions input {
        width: 100%;
      }
    }

    /* AppShell layout refresh */
    html,
    body {
      width: 100%;
      min-height: 100%;
    }

    body:not(.locked) {
      min-height: 100dvh;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .app-shell {
      width: 100%;
      min-height: 100dvh;
      display: flex;
      align-items: stretch;
      overflow: visible;
      background: var(--page);
    }

    .app-sidebar {
      width: var(--app-sidebar-width);
      flex: 0 0 var(--app-sidebar-width);
      height: 100dvh;
      position: sticky;
      top: 0;
      align-self: flex-start;
      padding: 18px 14px;
      gap: 16px;
      overflow: hidden;
      border-right: 1px solid #dbe3ec;
      box-shadow: 12px 0 30px rgba(16, 24, 32, .045);
      background: #ffffff;
      color: var(--ink);
    }

    .app-sidebar::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: linear-gradient(90deg, var(--mobil-blue-dark) 0 68%, var(--mobil-red) 68% 100%);
      pointer-events: none;
    }

    .sidebar-top {
      position: relative;
      display: block;
      gap: 10px;
      min-width: 0;
    }

    .app-sidebar .brand {
      flex: 1 1 auto;
      min-width: 0;
      font-size: .98rem;
      line-height: 1.2;
      display: block;
    }

    .app-sidebar .brand span {
      white-space: normal;
      overflow-wrap: normal;
    }

    .sidebar-toggle {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 42px;
      min-width: 42px;
      height: 42px;
      align-self: start;
      background: #f6f8fb;
      color: var(--mobil-blue-dark);
      border-color: #cdd9e7;
      box-shadow: 0 8px 18px rgba(16,24,32,.08);
    }

    .mobile-nav-close {
      display: none;
    }

    .user-strip {
      display: grid;
      gap: 4px;
      padding: 12px;
      border: 1px solid #dce4ed;
      border-radius: 8px;
      background: #f7f9fc;
      color: var(--ink);
      min-width: 0;
    }

    .user-strip strong,
    .user-strip span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .user-strip span {
      color: var(--muted);
      font-size: .78rem;
    }

    .user-strip .btn {
      margin-top: 4px;
      width: 100%;
      justify-content: center;
      min-height: 38px;
      background: #fff;
      border-color: #cdd9e7;
      color: var(--mobil-blue-dark);
    }

    .sidebar-order-toolbar {
      display: grid;
      gap: 6px;
      padding: 0 2px 2px;
    }

    .sidebar-order-toolbar[hidden],
    .sidebar-order-actions[hidden],
    .sidebar-order-status[hidden] {
      display: none !important;
    }

    .sidebar-order-main,
    .sidebar-order-actions {
      display: flex;
      gap: 5px;
      align-items: center;
    }

    .sidebar-order-main > .btn:first-child {
      flex: 1 1 auto;
      justify-content: center;
      min-width: 0;
    }

    .sidebar-order-actions {
      flex: 0 0 auto;
    }

    .sidebar-order-actions .btn {
      width: 32px;
      min-height: 32px;
      padding: 0;
      justify-content: center;
    }

    .sidebar-order-status {
      color: #5c7187;
      font-size: .66rem;
      line-height: 1.3;
      text-align: center;
    }

    .app-sidebar .nav {
      display: grid;
      gap: 5px;
      overflow-y: auto;
      padding-right: 2px;
      min-height: 0;
    }

    .app-sidebar .nav button,
    .bottom-nav button {
      position: relative;
      min-height: 48px;
    }

    .app-sidebar .nav button {
      width: 100%;
      padding: 0 11px;
      gap: 11px;
      overflow: visible;
      border: 1px solid transparent;
      white-space: nowrap;
      border-radius: 8px;
      color: #334155;
    }

    .app-sidebar .nav button svg,
    .bottom-nav button svg,
    .mobile-header button svg,
    .page-header svg {
      flex: 0 0 auto;
    }

    .nav-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .app-sidebar .nav button:hover {
      background: #f2f5f9;
      border-color: #e1e7ef;
      color: var(--mobil-blue-dark);
    }

    .app-sidebar .nav button.active {
      background: #eaf2ff;
      border-color: #bfd5ef;
      color: var(--mobil-blue-dark);
      box-shadow: none;
    }

    .app-sidebar .nav button.active::before {
      content: "";
      position: absolute;
      inset-block: 9px;
      left: 0;
      width: 3px;
      border-radius: 999px;
      background: var(--mobil-red);
    }

    .app-sidebar .nav.is-reordering button:not([hidden]) {
      padding-right: 34px;
      border-color: #c8d9e9;
      border-style: dashed;
      background: #f8fbff;
      cursor: grab;
      user-select: none;
    }

    .app-sidebar .nav.is-reordering button:not([hidden])::after {
      content: "⠿";
      position: absolute;
      right: 10px;
      color: #66809a;
      font-size: 1.05rem;
      line-height: 1;
    }

    .app-sidebar .nav.is-reordering button.is-order-selected {
      border-color: var(--mobil-blue);
      border-style: solid;
      background: #e8f2ff;
      box-shadow: 0 0 0 2px rgba(12, 77, 162, .1);
    }

    .app-sidebar .nav.is-reordering button.is-dragging {
      opacity: .52;
    }

    .app-sidebar .sidebar-note {
      margin-top: auto;
      font-size: .8rem;
      border-top-color: #dce4ed;
      color: var(--muted);
    }

    .sidebar-resizer {
      position: fixed;
      z-index: 60;
      top: 0;
      bottom: 0;
      left: calc(var(--app-sidebar-width) - 6px);
      width: 12px;
      cursor: col-resize;
      touch-action: none;
    }

    .sidebar-resizer::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 5px;
      width: 2px;
      height: 72px;
      border-radius: 999px;
      background: #b8c5d4;
      box-shadow: 0 0 0 4px rgba(255,255,255,.92);
      transform: translateY(-50%);
      transition: background .16s ease, box-shadow .16s ease;
    }

    .sidebar-resizer:hover::before,
    body.sidebar-resizing .sidebar-resizer::before {
      background: var(--mobil-blue);
      box-shadow: 0 0 0 4px #eaf2ff;
    }

    body.sidebar-resizing,
    body.sidebar-resizing * {
      cursor: col-resize !important;
      user-select: none !important;
    }
    }

    .main-area {
      flex: 1 1 auto;
      min-width: 0;
      min-height: 100dvh;
      padding: 0;
      display: flex;
      flex-direction: column;
      overflow: visible;
      background: var(--page);
    }

    .mobile-header {
      display: none;
    }

    .page-header {
      flex: 0 0 auto;
      position: sticky;
      top: 0;
      z-index: 12;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 20px;
      border-bottom: 1px solid var(--line);
      background: rgba(245,247,243,.96);
      backdrop-filter: blur(10px);
    }

    .page-header.has-customer-loyalty-badge {
      padding-right: clamp(190px, 22vw, 240px);
    }

    body.customer-app-mode .page-header {
      min-height: 58px;
      padding-block: 10px;
    }

    body.customer-app-mode .page-header .page-kicker {
      display: none;
    }

    body.customer-app-mode .page-header:not(.has-page-tools) .page-tools {
      display: none;
    }

    body.customer-app-mode .page-title {
      font-size: 1.2rem;
    }

    body.customer-app-mode .customer-header-loyalty-badge {
      box-shadow: none;
    }

    .customer-header-loyalty-badge {
      display: none;
      position: absolute;
      top: 50%;
      right: 18px;
      transform: translateY(-50%);
      min-height: 36px;
      max-width: 210px;
      border: 1px solid rgba(237, 27, 47, .18);
      border-radius: 999px;
      padding: 6px 12px;
      align-items: center;
      gap: 8px;
      color: var(--mobil-red-dark);
      background: rgba(255, 255, 255, .97);
      box-shadow: 0 10px 22px rgba(24, 33, 31, .12);
      font-weight: 850;
      white-space: nowrap;
      cursor: pointer;
    }

    .page-header.has-customer-loyalty-badge .customer-header-loyalty-badge {
      display: inline-flex;
    }

    .customer-header-loyalty-badge svg {
      width: 18px;
      height: 18px;
      color: var(--mobil-red);
      flex: 0 0 auto;
    }

    .customer-header-loyalty-copy {
      min-width: 0;
      display: grid;
      gap: 1px;
      line-height: 1.05;
      text-align: left;
    }

    .customer-header-loyalty-tier {
      color: var(--muted);
      font-size: .64rem;
      font-style: normal;
      font-weight: 900;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .customer-header-loyalty-points {
      color: var(--mobil-red);
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      font-size: .92rem;
      font-weight: 950;
      line-height: 1;
    }

    .customer-header-loyalty-points span {
      color: var(--muted);
      font-size: .58rem;
      font-weight: 900;
      letter-spacing: .01em;
      text-transform: uppercase;
    }

    .page-kicker {
      margin: 0 0 3px;
      color: var(--teal);
      font-size: .75rem;
      font-weight: 850;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .page-title {
      margin: 0;
      font-size: 1.35rem;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .page-tools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      min-width: min(560px, 55%);
    }

    .page-search {
      flex: 1 1 280px;
      min-width: 180px;
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #c9d5d1;
      border-radius: 8px;
      padding: 0 10px;
      background: #fff;
      min-height: 44px;
      color: var(--muted);
    }

    .page-search input {
      border: 0;
      min-height: 40px;
      padding: 0;
      box-shadow: none;
      background: transparent;
      width: 100%;
    }

    .page-search[hidden],
    #pagePrimaryAction[hidden] {
      display: none;
    }

    .main-content {
      flex: 1 1 auto;
      min-height: auto;
      min-width: 0;
      overflow: visible;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: auto;
      padding: 20px;
      display: grid;
      gap: 18px;
      align-content: start;
      scrollbar-gutter: stable;
    }

    .main-content .hero {
      min-height: clamp(210px, 26dvh, 340px);
    }

    .main-content .stats {
      grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    }

    .mobile-overlay {
      display: none;
    }

    .bottom-nav {
      display: none;
    }

    [hidden],
    .app-sidebar .nav button[hidden],
    .bottom-nav button[hidden] {
      display: none !important;
    }

    body.sidebar-collapsed .app-sidebar {
      width: 78px;
      flex-basis: 78px;
      padding-inline: 12px;
    }

    body.sidebar-collapsed .app-sidebar .brand span,
    body.sidebar-collapsed .user-strip span,
    body.sidebar-collapsed .user-strip strong,
    body.sidebar-collapsed .user-strip .btn span,
    body.sidebar-collapsed .nav-label,
    body.sidebar-collapsed .sidebar-note {
      display: none;
    }

    body.sidebar-collapsed .sidebar-order-toolbar {
      display: none !important;
    }

    body.sidebar-collapsed .app-sidebar .brand,
    body.sidebar-collapsed .sidebar-top,
    body.sidebar-collapsed .app-sidebar .nav button {
      justify-content: center;
    }

    body.sidebar-collapsed .sidebar-top {
      display: block;
    }

    body.sidebar-collapsed .sidebar-brand-logo {
      inline-size: 48px;
      block-size: 48px;
      padding: 4px;
    }

    body.sidebar-collapsed .sidebar-brand-logo img {
      width: 170px;
      max-width: none;
      object-fit: cover;
      object-position: left center;
    }

    body.sidebar-collapsed .sidebar-brand-logo.tle-logo-card img {
      width: 100%;
      max-width: 100%;
      object-fit: contain;
      object-position: center;
    }

    body.sidebar-collapsed .sidebar-toggle {
      display: none;
    }

    body.sidebar-collapsed .sidebar-resizer {
      display: none;
    }

    body.sidebar-collapsed .user-strip {
      padding: 8px;
    }

    body.sidebar-collapsed .user-strip .btn {
      width: 44px;
      padding: 0;
      justify-self: center;
    }

    @media (max-width: 1120px) {
      .app-shell {
        grid-template-columns: none;
      }

      .app-sidebar {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        height: 100dvh;
        padding: 18px 14px;
      }

      .app-sidebar .brand {
        flex: 1 1 auto;
      }

      .app-sidebar .nav {
        display: grid;
        width: auto;
        max-width: none;
        overflow-x: hidden;
        overflow-y: auto;
      }

      .app-sidebar .nav button {
        flex: initial;
      }
    }

    @media (max-width: 900px) {
      body:not(.locked) {
        height: auto;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
      }

      .app-shell {
        display: block;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
      }

      .app-sidebar {
        position: fixed;
        inset: 0 auto 0 auto;
        left: -340px;
        z-index: 80;
        width: min(86vw, 320px);
        flex-basis: auto;
        transform: none;
        transition: left .2s ease;
        box-shadow: 18px 0 42px rgba(12, 77, 162, .24);
      }

      .sidebar-resizer {
        display: none;
      }

      .sidebar-top {
        display: block;
      }

      .sidebar-brand-logo {
        block-size: 76px;
      }

      body.mobile-nav-open .app-sidebar {
        left: 0;
        transform: none;
      }

      .mobile-nav-close {
        display: inline-flex;
      }

      .sidebar-toggle {
        display: none;
      }

      body.sidebar-collapsed .app-sidebar {
        width: min(86vw, 320px);
      }

      body.sidebar-collapsed .app-sidebar .brand span,
      body.sidebar-collapsed .user-strip span,
      body.sidebar-collapsed .user-strip strong,
      body.sidebar-collapsed .user-strip .btn span,
      body.sidebar-collapsed .nav-label,
      body.sidebar-collapsed .sidebar-note {
        display: initial;
      }

      body.sidebar-collapsed .app-sidebar .nav button,
      body.sidebar-collapsed .sidebar-top {
        justify-content: flex-start;
      }

      body.sidebar-collapsed .sidebar-top {
        display: block;
      }

      body.sidebar-collapsed .sidebar-brand-logo {
        inline-size: 100%;
        block-size: 76px;
        padding: 10px 12px;
      }

      body.sidebar-collapsed .sidebar-brand-logo img {
        width: 100%;
        max-width: 100%;
        object-fit: contain;
      }

      body.sidebar-collapsed .sidebar-brand-logo.tle-logo-card {
        inline-size: 98px;
        block-size: 98px;
        padding: 6px;
      }

      .mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(0, 59, 122, .42);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
      }

      body.mobile-nav-open .mobile-overlay {
        opacity: 1;
        pointer-events: auto;
      }

      .main-area {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
      }

      .mobile-header {
        min-height: 64px;
        padding: 8px 10px;
        border-bottom: 1px solid var(--line);
        background: #fff;
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto;
      }

      body.customer-app-mode .mobile-header {
        min-height: 52px;
        padding: 5px 10px;
        gap: 8px;
      }

      body.customer-app-mode .mobile-header .btn.icon {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
      }

      body.customer-app-mode .mobile-brand-logo.tle-logo-card {
        inline-size: 40px;
        block-size: 40px;
        padding: 2px;
      }

      body.customer-app-mode .mobile-title {
        gap: 0;
      }

      body.customer-app-mode .mobile-title strong {
        font-size: .98rem;
        line-height: 1.12;
      }

      body.customer-app-mode .mobile-title span {
        font-size: .68rem;
        line-height: 1.2;
      }

      .mobile-title {
        display: grid;
        gap: 2px;
        min-width: 0;
        flex: 1;
      }

      .mobile-title strong,
      .mobile-title span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mobile-title span {
        color: var(--muted);
        font-size: .74rem;
      }

      .page-header {
        padding: 10px 12px;
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
      }

      body:not(.customer-app-mode) .page-header > div:first-child {
        display: none;
      }

      body:not(.customer-app-mode) .page-header:not(.has-page-tools) {
        display: none;
      }

      body:not(.customer-app-mode) .page-header.has-page-tools {
        padding: 8px 12px;
        gap: 0;
      }

      .page-header.has-customer-loyalty-badge {
        min-height: 68px;
        padding-right: 12px;
        max-width: 100%;
        overflow: hidden;
      }

      body.customer-app-mode .page-header,
      body.customer-app-mode .page-header.has-customer-loyalty-badge {
        min-height: 50px;
        max-width: 100%;
        padding: 7px 10px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        overflow: visible;
      }

      body.customer-app-mode .page-header.has-page-tools .page-tools {
        grid-column: 1 / -1;
        grid-row: 2;
      }

      body.customer-app-mode .page-header > div:first-child {
        grid-column: 1;
        grid-row: 1;
      }

      .customer-header-loyalty-badge {
        top: 12px;
        right: 12px;
        transform: none;
        min-height: 42px;
        width: 142px;
        max-width: calc(100vw - 220px);
        padding: 5px 8px;
        gap: 6px;
      }

      .page-header.has-customer-loyalty-badge > div:first-child {
        padding-right: 150px;
        min-width: 0;
      }

      body.customer-app-mode .page-header.has-customer-loyalty-badge > div:first-child {
        padding-right: 0;
      }

      body.customer-app-mode .customer-header-loyalty-badge {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        width: auto;
        max-width: 164px;
        min-height: 36px;
        padding: 5px 9px;
        gap: 6px;
        grid-column: 2;
        grid-row: 1;
      }

      body.customer-app-mode .customer-header-loyalty-badge svg {
        display: none;
      }

      body.customer-app-mode .customer-header-loyalty-tier {
        font-size: .58rem;
      }

      body.customer-app-mode .customer-header-loyalty-points {
        font-size: .82rem;
      }

      .customer-header-loyalty-badge svg {
        width: 16px;
        height: 16px;
      }

      .customer-header-loyalty-tier {
        font-size: .55rem;
      }

      .customer-header-loyalty-points {
        font-size: .78rem;
        gap: 3px;
      }

      .customer-header-loyalty-points span {
        max-width: 58px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .5rem;
      }

      .page-title {
        font-size: 1.15rem;
      }

      body.customer-app-mode .page-title {
        font-size: 1.1rem;
      }

      .page-tools {
        min-width: 0;
        width: 100%;
        justify-content: stretch;
        flex-wrap: wrap;
      }

      .page-search {
        flex: 1 1 100%;
        min-width: 0;
      }

      #pagePrimaryAction {
        width: 100%;
      }

      .main-content {
        padding: 12px 12px 72px;
        gap: 12px;
        min-height: auto;
        overflow: visible;
        overscroll-behavior: auto;
      }

      .bottom-nav {
        position: fixed;
        inset: auto 0 0;
        z-index: 60;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 2px;
        min-height: 58px;
        padding: 4px 6px max(4px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(10px);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .bottom-nav::-webkit-scrollbar {
        display: none;
      }

      .bottom-nav button {
        display: grid;
        place-items: center;
        gap: 2px;
        flex: 0 0 62px;
        min-width: 62px;
        min-height: 48px;
        border-radius: 8px;
        background: transparent;
        color: #52605c;
        font-size: .64rem;
        line-height: 1.05;
        font-weight: 800;
        padding: 3px 2px;
        white-space: nowrap;
      }

      .bottom-nav button svg {
        width: 22px;
        height: 22px;
      }

      .bottom-nav button.active {
        background: var(--teal-2);
        color: var(--teal);
      }

      body.customer-app-mode .bottom-nav,
      body.role-advisor .bottom-nav,
      body.role-service_advisor .bottom-nav {
        left: 12px;
        right: 12px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
        width: auto;
        min-height: 62px;
        padding: 6px;
        border: 1px solid rgba(15, 67, 123, .15);
        border-radius: 24px;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 12px 32px rgba(15, 48, 85, .2);
        transition: transform .22s ease, opacity .18s ease, box-shadow .18s ease;
        overflow-x: hidden;
      }

      body.customer-app-mode .bottom-nav button,
      body.role-advisor .bottom-nav button,
      body.role-service_advisor .bottom-nav button {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        min-height: 50px;
        border-radius: 18px;
      }

      body.customer-app-mode .main-content,
      body.role-advisor .main-content,
      body.role-service_advisor .main-content {
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
      }

      body.customer-app-mode.customer-bottom-nav-hidden .bottom-nav {
        transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px) + 30px));
        opacity: 0;
        pointer-events: none;
      }

      @media (prefers-reduced-motion: reduce) {
        body.customer-app-mode .bottom-nav {
          transition: none;
        }
      }
    }

    body.role-mechanic .bottom-nav {
      display: none !important;
    }

    @media (max-width: 1120px) {
      body.role-mechanic .main-content {
        padding-bottom: 14px;
      }
    }

    /* Phone-only compact controls.  A short desktop or iPad viewport must keep
       the normal desktop/tablet login layout. */
    @media (max-width: 480px) {
      .login-screen {
        display: flex;
        align-items: stretch;
        justify-content: center;
        min-height: 100vh;
        min-height: 100svh;
        padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      .login-card {
        width: min(100%, 390px);
        margin: auto;
        padding: 16px;
        gap: 11px;
        border-radius: 14px;
      }

      .login-card .brand {
        min-height: clamp(142px, 26svh, 224px);
        margin-bottom: 2px;
        align-items: center;
      }

      .login-card .login-brand-logo.tle-logo-card {
        inline-size: clamp(142px, 52vw, 224px);
        block-size: clamp(142px, 26svh, 224px);
      }

      .login-card h1 {
        font-size: 1.38rem;
      }

      .login-card p {
        font-size: .95rem;
        line-height: 1.34;
      }

      .login-card label {
        gap: 4px;
        font-size: .78rem;
      }

      .login-card input,
      .login-card select {
        min-height: 46px;
        padding: 9px 10px;
        font-size: 16px;
      }

      .login-card form {
        gap: 10px;
      }

      .login-card .btn {
        min-height: 48px;
        padding: 9px 12px;
      }

      .login-role-links {
        grid-template-columns: 1fr;
      }

      .customer-register-panel,
      .customer-register-otp-panel {
        padding: 10px;
        gap: 8px;
      }

      .login-screen.is-registration-open {
        align-items: flex-start;
        padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
      }

      .login-card.is-registration-open {
        width: 100%;
        min-height: calc(100svh - 20px);
        max-height: none;
        margin: 0;
        padding: 16px;
        border-radius: 18px;
      }

      .login-card.is-registration-open .customer-register-panel {
        gap: 14px;
      }

      .login-card.is-registration-open .field-grid {
        grid-template-columns: 1fr;
      }

      .customer-register-screen-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding-bottom: 12px;
      }

      .customer-register-title-copy {
        width: 100%;
      }

      .customer-register-title-copy strong {
        font-size: 1.45rem;
        text-wrap: balance;
      }

      .customer-register-screen-heading .btn {
        order: -1;
        width: 100%;
        justify-content: center;
      }

      .customer-register-screen-heading .btn {
        min-height: 36px;
        padding: 7px 9px;
        font-size: .75rem;
      }

      .customer-registration-steps {
        gap: 6px;
      }

      .customer-registration-steps > button {
        justify-content: center;
        min-height: 46px;
        padding: 6px 4px;
        text-align: center;
        font-size: .68rem;
      }

      .customer-registration-steps b {
        flex-basis: 19px;
        width: 19px;
        height: 19px;
        font-size: .68rem;
      }

      .customer-registration-workshop-head {
        display: grid;
        grid-template-columns: 1fr;
      }

      .customer-registration-workshop-locate {
        width: 100%;
        justify-content: center;
      }

      .customer-registration-step {
        gap: 12px;
        padding: 13px;
        border-radius: 14px;
      }

      .customer-registration-step-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .customer-registration-step-actions .btn,
      .customer-registration-step-actions .btn.primary {
        width: 100%;
        min-width: 0;
      }

      .customer-registration-review-grid {
        grid-template-columns: 1fr;
        gap: 7px;
      }
    }

    @media (max-width: 640px) and (max-height: 700px) {
      .login-card {
        padding: 14px;
        gap: 8px;
      }

      .login-card .brand {
        min-height: clamp(136px, 26svh, 166px);
        margin-bottom: 0;
      }

      .login-card .login-brand-logo.tle-logo-card {
        inline-size: clamp(136px, 46vw, 166px);
        block-size: clamp(136px, 26svh, 166px);
      }

      .login-card h1 {
        font-size: 1.24rem;
      }

      .login-card p {
        font-size: .88rem;
      }

      .login-card input,
      .login-card select,
      .login-card .btn {
        min-height: 44px;
      }
    }

    /* mobile-login-poster-20260901
       The customer-supplied Mobil Car Care reception artwork remains the
       phone-only visual, while the essential sign-in journey fits compactly
       on one screen. OTP, PIN reset, registration and device login ids remain
       unchanged. */
    @media (max-width: 640px) {
      .login-screen {
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100svh;
        padding: 0;
        overflow-x: clip;
        overflow-y: auto;
        background: #fff;
      }

      .login-mobile-hero {
        display: block;
        height: auto;
        min-height: 0;
        padding: 0;
        overflow: visible;
        background: #fff;
      }

      .login-mobile-hero-art {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
      }

      .login-card {
        position: relative;
        z-index: 1;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 16px 22px max(18px, env(safe-area-inset-bottom));
        gap: 11px;
        border: 0;
        border-top: 1px solid rgba(203, 217, 236, .95);
        border-radius: 0;
        background: rgba(255, 255, 255, .985);
        box-shadow: none;
      }

      .login-card .brand {
        display: none;
      }

      .login-mobile-welcome {
        display: grid;
        gap: 1px;
        margin: 0;
      }

      .login-mobile-welcome > span {
        display: none;
      }

      .login-mobile-welcome strong {
        color: #0b54b7;
        font-size: clamp(1.42rem, 6.6vw, 1.72rem);
        letter-spacing: -.045em;
        line-height: 1.05;
      }

      .login-mobile-welcome small {
        color: #68778f;
        font-size: .76rem;
        line-height: 1.25;
      }

      .login-card h1 {
        margin: 0;
        color: #132238;
        font-size: 1.12rem;
        line-height: 1.2;
      }

      .login-card p {
        margin-top: 2px;
        color: #67758b;
        font-size: .82rem;
        line-height: 1.34;
      }

      .login-card form {
        gap: 9px;
        padding: 0;
      }

      .login-card .login-field {
        gap: 4px;
        color: #53657c;
        font-size: .78rem;
        font-weight: 780;
      }

      .login-field-control {
        position: relative;
        display: grid;
        align-items: center;
      }

      .login-field-control > .login-field-icon {
        position: absolute;
        left: 14px;
        z-index: 1;
        width: 20px;
        height: 20px;
        color: #0c5dc5;
        pointer-events: none;
      }

      .login-card .login-field-control input,
      .login-card .login-field-control select {
        width: 100%;
        min-height: 50px;
        padding: 11px 14px 11px 48px;
        border-color: #d3ddeb;
        border-radius: 15px;
        box-shadow: none;
        color: #15263e;
        font-size: 16px;
        font-weight: 650;
      }

      .login-card .login-field-control select {
        padding-right: 36px;
      }

      .login-card .login-field-control input::placeholder {
        color: #9caabd;
        font-weight: 560;
      }

      .login-card .login-field-control input:focus,
      .login-card .login-field-control select:focus {
        border-color: #1264ca;
        box-shadow: 0 0 0 3px rgba(18, 100, 202, .13);
      }

      .login-card #loginSubmitBtn {
        min-height: 52px;
        margin-top: 1px;
        border-radius: 14px;
        background: linear-gradient(135deg, #075dcc, #165de7);
        box-shadow: 0 11px 21px rgba(9, 88, 198, .22);
        font-size: 1rem;
      }

      .login-card #resetCustomerPinToggleBtn {
        width: fit-content;
        min-height: auto;
        justify-self: center;
        margin: 0 auto;
        padding: 4px 0;
        border: 0;
        background: transparent;
        color: #075dcc;
        box-shadow: none;
        text-align: center;
        font-size: .82rem;
        font-weight: 780;
      }

      .login-card #resetCustomerPinToggleBtn i {
        display: none;
      }

      .login-passkey-optional {
        width: fit-content;
        justify-self: center;
        margin: 0 auto;
      }

      .login-passkey-optional > summary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 28px;
        color: #52647d;
        cursor: pointer;
        font-size: .76rem;
        font-weight: 760;
        list-style: none;
      }

      .login-passkey-optional > summary::-webkit-details-marker {
        display: none;
      }

      .login-passkey-optional > summary i {
        width: 17px;
        height: 17px;
        color: #0c5dc5;
      }

      .login-passkey-optional .passkey-login-actions {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 7px;
      }

      .login-passkey-optional .passkey-login-actions .btn {
        min-height: 44px;
        border-radius: 13px;
        font-size: .82rem;
      }

      .login-passkey-optional #passkeySetupBtn,
      .login-passkey-optional .passkey-login-hint {
        display: none !important;
      }

      .login-register-launcher {
        width: fit-content;
        justify-self: center;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px;
        padding: 4px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: #67758b;
        text-align: center;
      }

      .login-register-launcher-icon,
      .login-register-launcher-copy small {
        display: none;
      }

      .login-register-launcher-copy strong {
        color: #67758b;
        font-size: .8rem;
        font-weight: 650;
      }

      .login-register-launcher-copy strong {
        font-size: 0;
      }

      .login-register-launcher-copy strong::before {
        content: "Don’t have an account?";
        color: #67758b;
        font-size: .8rem;
        font-weight: 650;
      }

      .login-register-launcher-copy strong::after {
        content: " Sign up";
        color: #075dcc;
        font-size: .8rem;
        font-weight: 850;
      }

      .login-register-launcher > i:last-child {
        display: none;
      }

      .login-screen.is-registration-open {
        display: block;
        padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
      }

      .login-screen.is-registration-open .login-mobile-hero {
        display: none;
      }

      .login-card.is-registration-open {
        width: 100%;
        min-height: calc(100svh - 20px);
        margin: 0;
        border-radius: 18px;
      }
    }

    @media (max-width: 640px) and (max-height: 700px) {
      .login-card {
        padding-top: 17px;
        gap: 11px;
      }

      .login-mobile-welcome {
        display: none;
      }

      .login-mobile-welcome strong {
        font-size: 1.45rem;
      }

      .login-mobile-welcome small,
      .login-card #loginIntro {
        font-size: .78rem;
      }

      .login-card .login-field-control input,
      .login-card .login-field-control select,
      .login-card #loginSubmitBtn {
        min-height: 48px;
      }
    }

    /* Every mobile login uses the same complete reception poster and role-form
       hierarchy. This keeps customer, Admin, advisor and mechanic entry points
       visually identical and prevents a missing route class from cropping the
       approved artwork. Tablet and desktop login cards are unchanged. */
    @media (max-width: 640px) {
      .login-screen.is-mobile-poster-login:not(.is-registration-open) {
        padding: 0;
        background: #fff;
      }

      .login-screen.is-mobile-poster-login:not(.is-registration-open) .login-mobile-hero {
        height: auto;
        min-height: 0;
        overflow: visible;
        background: #fff;
      }

      .login-screen.is-mobile-poster-login:not(.is-registration-open) .login-mobile-hero-art {
        height: auto;
        object-fit: contain;
        object-position: center;
      }

      .login-screen.is-mobile-poster-login:not(.is-registration-open) .login-card {
        padding: 14px clamp(28px, 10.7vw, 42px) max(28px, env(safe-area-inset-bottom));
        gap: 11px;
        border: 0;
        background: #fff;
        box-shadow: none;
      }

      .login-screen.is-mobile-poster-login:not(.is-registration-open) .login-card .brand,
      .login-screen.is-mobile-poster-login:not(.is-registration-open) .login-mobile-welcome {
        display: none;
      }

      .login-screen.is-mobile-poster-login:not(.is-registration-open) .login-intro-copy {
        display: grid;
        gap: 2px;
        margin: 0;
      }

      .login-screen.is-mobile-poster-login:not(.is-registration-open) .login-card h1 {
        margin: 0;
        font-size: 1.16rem;
      }

      .login-screen.is-mobile-poster-login:not(.is-registration-open) .login-card p {
        margin: 0;
        font-size: .82rem;
        line-height: 1.36;
      }

      .login-screen.is-mobile-poster-login:not(.is-registration-open) .login-passkey-optional {
        display: none !important;
      }
    }

    /* Cross-device usability baseline: one clear flow on desktop, tablet, and phone. */
    img,
    video,
    canvas {
      max-width: 100%;
    }

    .main-area,
    .main-content,
    .page-header,
    .page-tools,
    .panel-head,
    .panel-head-actions,
    .actions {
      min-width: 0;
    }

    @media (min-width: 901px) and (max-width: 1280px) {
      .main-content {
        padding: 16px;
        gap: 14px;
      }

      .page-header {
        padding: 12px 16px;
      }

      .page-tools {
        flex-wrap: wrap;
      }

      .page-search {
        flex: 1 1 260px;
        min-width: 0;
      }

      .dashboard-filter-grid,
      .dashboard-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (pointer: coarse) {
      .app-sidebar .nav button,
      .page-header .btn,
      .panel-head .btn,
      .panel-head-actions .btn,
      .actions .btn,
      .workshop-queue-actions .btn,
      .booking-card-actions .btn,
      .mechanic-workflow-actions .btn,
      .bottom-nav button,
      .staff-operations-metric {
        min-height: 44px;
        touch-action: manipulation;
      }

      .btn.icon,
      .staff-operations-float-head .icon-btn {
        min-width: 40px;
        min-height: 40px;
      }

      input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
      select,
      textarea {
        min-height: 44px;
      }
    }

    @media (max-width: 600px) {
      html {
        scroll-padding-top: 78px;
        scroll-padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
      }

      .panel-head-actions,
      .actions {
        width: 100%;
        justify-content: stretch;
      }

      .panel-head-actions .btn,
      .actions > .btn:not(.icon) {
        flex: 1 1 100%;
      }

      .workshop-queue-card.quick-finish .queue-work-done {
        min-height: 52px;
      }
    }

    /* Mechanic progress flow: keep desktop information-rich and phone actions thumb-friendly. */
    @media (min-width: 981px) {
      .role-mechanic #add-record .mechanic-workflow-panel {
        grid-template-columns: minmax(0, 1fr) minmax(312px, 380px);
      }

      .role-mechanic #add-record .mechanic-workflow-details {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .workshop-queue-list {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      }

      .mechanic-workshop-float {
        left: auto;
        right: 18px;
        width: min(440px, calc(100vw - 36px));
        transform: none;
      }
    }

    @media (min-width: 561px) and (max-width: 980px) {
      .workshop-queue-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 720px) {
      .role-mechanic #add-record .mechanic-workflow-actions .btn,
      .role-mechanic #add-record .mechanic-work-done-btn {
        width: 100%;
        min-height: 48px;
      }

      .workshop-queue-head {
        align-items: stretch;
      }

      .workshop-queue-summary {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
      }

      .workshop-queue-summary::-webkit-scrollbar {
        display: none;
      }

      .workshop-queue-list {
        grid-template-columns: 1fr;
      }

      .role-mechanic #add-record.mechanic-plate-first #workshopQueuePanel {
        max-height: none;
        overflow: visible;
      }
    }

    @media (max-width: 480px) {
      .mechanic-workshop-float-main {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .mechanic-workshop-float-ready {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
      }

      .workshop-queue-title {
        grid-template-columns: 1fr;
      }

      .workshop-queue-title .badge {
        justify-self: start;
      }
    }

    /* mechanic-progress-layout-20260809
       Empty legacy evidence wrappers must not create blank rows between the
       guided service and evidence cards. Saving remains available for an
       unfinished job, but it is intentionally a compact secondary action. */
    .role-mechanic #add-record .mechanic-legacy-evidence-row {
      display: none !important;
    }

    .role-mechanic #add-record .mechanic-progress-save-actions {
      display: grid;
      width: 100%;
      margin: 0;
    }

    .role-mechanic #add-record .mechanic-progress-save-btn {
      width: 100%;
      min-height: 52px;
    }

    /* mechanic-progress-alert-alignment-20260824
       Keep unfinished-visit messages below the save control. The old negative
       margin allowed a two-line warning to overlap the button on mobile. */
    .role-mechanic #add-record #serviceRecordFormStatus {
      display: block;
      margin: 10px 0 14px;
      font-size: .8rem;
      line-height: 1.42;
    }

    .role-mechanic #add-record #serviceRecordFormStatus.warning,
    .role-mechanic #add-record #serviceRecordFormStatus.error {
      padding: 10px 12px;
      border: 1px solid #f3c5cd;
      border-left: 4px solid var(--mobil-red);
      border-radius: 10px;
      background: #fff7f8;
      color: var(--mobil-red);
      font-weight: 700;
    }

    /* desktop-content-canvas-20260811 staff-desktop-content-rail-20260812
       Admin and staff pages use the complete area beside the resizable
       sidebar with a compact 16px rail. Do not cap this canvas: browser zoom
       and wide displays made the previous ceiling leave unused space. */
    @media (min-width: 1121px) {
      body:not(.customer-app-mode) {
        --desktop-content-gutter: 16px;
      }

      /* The browser must size the app shell itself to the viewport.  Some
         desktop sessions inherited a narrower containing block, leaving an
         unused white strip to the right even though the content was 100%. */
      html,
      body:not(.customer-app-mode):not(.locked) {
        inline-size: 100%;
        min-inline-size: 100vw;
        max-inline-size: none;
      }

      body:not(.customer-app-mode) .app-shell {
        inline-size: 100vw;
        min-inline-size: 100vw;
        max-inline-size: none;
      }

      body:not(.customer-app-mode) .main-area {
        flex: 1 1 0;
        min-inline-size: 0;
        max-inline-size: none;
        padding-inline: 0;
      }

      body:not(.customer-app-mode) .main-content {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding: var(--desktop-content-gutter);
        padding-bottom: clamp(40px, 4vw, 72px);
      }

      body:not(.customer-app-mode) .page-header {
        padding-inline: var(--desktop-content-gutter);
      }
    }

    /* advisor-loyalty-responsive-workspace-20260812
       Advisors get the same compact Requests / Rewards flow on phone, tablet,
       and desktop. Keep the richer admin builder and customer experience unchanged. */
    .loyalty-mobile-selector,
    .loyalty-mobile-back {
      display: none;
    }

    #loyalty-program[data-mobile-loyalty-role="advisor"] > .panel-head {
      display: none !important;
    }

    #loyalty-program[data-mobile-loyalty-role="advisor"][data-mobile-loyalty-view="overview"] > .product-catalogue-list,
    #loyalty-program[data-mobile-loyalty-role="advisor"][data-mobile-loyalty-view="overview"] > #loyaltyRedemptionPanel,
    #loyalty-program[data-mobile-loyalty-role="advisor"][data-mobile-loyalty-view="requests"] > .product-catalogue-list,
    #loyalty-program[data-mobile-loyalty-role="advisor"][data-mobile-loyalty-view="rewards"] > #loyaltyRedemptionPanel {
      display: none;
    }

    #loyalty-program[data-mobile-loyalty-role="advisor"][data-mobile-loyalty-view="requests"] > #loyaltySummaryCards,
    #loyalty-program[data-mobile-loyalty-role="advisor"][data-mobile-loyalty-view="rewards"] > #loyaltySummaryCards,
    #loyalty-program[data-mobile-loyalty-role="advisor"][data-mobile-loyalty-view="requests"] > .loyalty-mobile-selector,
    #loyalty-program[data-mobile-loyalty-role="advisor"][data-mobile-loyalty-view="rewards"] > .loyalty-mobile-selector {
      display: none;
    }

    #loyalty-program[data-mobile-loyalty-role="advisor"][data-mobile-loyalty-view="requests"] > .loyalty-mobile-back,
    #loyalty-program[data-mobile-loyalty-role="advisor"][data-mobile-loyalty-view="rewards"] > .loyalty-mobile-back {
      display: block;
    }

    .loyalty-selector-next {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      color: #0d57a6;
      font-size: .74rem;
      font-weight: 850;
      white-space: nowrap;
    }

    .loyalty-selector-next i {
      width: 18px;
      height: 18px;
    }

    @media (min-width: 701px) {
      #loyalty-program[data-mobile-loyalty-role="advisor"] #loyaltySummaryCards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding: 16px 16px 4px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] #loyaltySummaryCards .summary-card {
        min-height: 78px;
        padding: 12px 14px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector {
        display: grid;
        grid-template-columns: minmax(220px, .85fr) repeat(2, minmax(220px, 1fr));
        gap: 12px;
        padding: 16px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head {
        align-self: center;
        padding: 6px 8px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head span,
      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head strong,
      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head small {
        display: block;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head span {
        color: #1559a3;
        font-size: .7rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head strong {
        margin-top: 4px;
        color: #152435;
        font-size: 1rem;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head small {
        margin-top: 3px;
        color: #66788e;
        font-size: .76rem;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector button {
        min-width: 0;
        min-height: 82px;
        border: 1px solid #d6e1ef;
        border-radius: 16px;
        background: #f8fbff;
        color: #344860;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        padding: 14px;
        text-align: left;
        font: inherit;
        cursor: pointer;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector button:hover,
      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector button:focus-visible,
      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector button.is-selected {
        border-color: #1a5ca9;
        background: #edf5ff;
        box-shadow: inset 0 0 0 1px rgba(26, 92, 169, .12);
        color: #0d4d94;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector button > i:first-child {
        width: 42px;
        height: 42px;
        padding: 9px;
        border-radius: 12px;
        background: #e8f2ff;
        color: #0d57a6;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector button strong,
      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector button small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector button strong {
        font-size: .94rem;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector button small {
        margin-top: 4px;
        color: #657992;
        font-size: .74rem;
        font-weight: 700;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-back {
        padding: 16px 16px 2px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-back button {
        min-height: 46px;
        border: 1px solid #cddbeb;
        border-radius: 13px;
        background: #edf5ff;
        color: #154f91;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 16px;
        font: inherit;
        font-size: .84rem;
        font-weight: 850;
        cursor: pointer;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-back button i {
        width: 18px;
        height: 18px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .product-catalogue-list,
      #loyalty-program[data-mobile-loyalty-role="advisor"] #loyaltyRedemptionPanel {
        margin: 10px 16px 0;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] #loyaltyCustomerSummary {
        display: none;
      }
    }

    @media (min-width: 701px) and (max-width: 1050px) {
      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 700px) {
      #loyalty-program[data-mobile-loyalty-role="advisor"] #loyaltySummaryCards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 12px 12px 2px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] #loyaltySummaryCards .summary-card {
        min-height: 66px;
        padding: 9px 8px;
        gap: 4px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] #loyaltySummaryCards .summary-card span {
        font-size: .7rem;
        line-height: 1.15;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] #loyaltySummaryCards .summary-card strong {
        font-size: 1.08rem;
        line-height: 1.05;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] #loyaltySummaryCards .summary-card:nth-child(n + 4) {
        display: none;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head {
        padding: 2px 2px 4px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head span,
      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head strong,
      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head small {
        display: block;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head span {
        color: #1559a3;
        font-size: .68rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head strong {
        margin-top: 3px;
        color: #152435;
        font-size: 1rem;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector-head small {
        margin-top: 2px;
        color: #66788e;
        font-size: .74rem;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector button {
        min-width: 0;
        min-height: 70px;
        border: 1px solid #d6e1ef;
        border-radius: 14px;
        background: #f8fbff;
        color: #344860;
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        padding: 11px 12px;
        text-align: left;
        font: inherit;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector button.is-selected {
        border-color: #1a5ca9;
        background: #edf5ff;
        box-shadow: inset 0 0 0 1px rgba(26, 92, 169, .12);
        color: #0d4d94;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector i {
        width: 22px;
        height: 22px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector button > i:first-child {
        width: 38px;
        height: 38px;
        padding: 8px;
        border-radius: 11px;
        background: #e8f2ff;
        color: #0d57a6;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector strong,
      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector strong {
        font-size: .88rem;
        line-height: 1.1;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-selector small {
        margin-top: 3px;
        color: #657992;
        font-size: .7rem;
        font-weight: 700;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-back {
        padding: 12px 12px 2px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-back button {
        width: 100%;
        min-height: 48px;
        border: 1px solid #cddbeb;
        border-radius: 13px;
        background: #edf5ff;
        color: #154f91;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 12px;
        font: inherit;
        font-size: .84rem;
        font-weight: 850;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-mobile-back button i {
        width: 18px;
        height: 18px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .product-catalogue-list,
      #loyalty-program[data-mobile-loyalty-role="advisor"] #loyaltyRedemptionPanel {
        margin: 8px 12px 0;
        padding: 10px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] #loyaltyCustomerSummary {
        display: none;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-filter-bar {
        grid-template-columns: 1fr;
        margin-bottom: 8px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-filter-bar label {
        font-size: .72rem;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-reward-grid,
      #loyalty-program[data-mobile-loyalty-role="advisor"] .loyalty-redemption-list {
        gap: 8px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] #loyaltyRedemptionPanel .panel-head {
        padding: 0 0 8px;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] #loyaltyRedemptionPanel .panel-head h3 {
        font-size: 1rem;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"] #loyaltyRedemptionPanel .panel-head p {
        display: none;
      }

      #loyalty-program[data-mobile-loyalty-role="advisor"][data-mobile-loyalty-view="rewards"] .loyalty-filter-bar label:nth-child(2) {
        display: none;
      }
    }

    /* loyalty-admin-control-centre-groups-20260904
       Admin desktop starts with four priority indicators and three grouped
       workflows, while the complete metric set remains available on demand. */
    .loyalty-desktop-hybrid,
    .loyalty-desktop-back,
    .loyalty-desktop-source-note,
    .loyalty-desktop-editor-head {
      display: none;
    }

    .loyalty-expanded-metrics-head {
      display: none;
    }

    .loyalty-summary-drilldown-hint {
      display: none;
    }

    @media (min-width: 1121px) {
      #loyalty-program[data-desktop-loyalty-role="admin"] > .panel-head {
        padding: 12px 14px;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] > .panel-head h2 {
        font-size: 1rem;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] > .panel-head .sub {
        margin-top: 3px;
        font-size: .76rem;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] > .panel-head #exportLoyaltyReportBtn {
        display: none;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] > #loyaltySummaryCards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding: 12px 14px 0;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] > #loyaltySummaryCards .summary-card {
        position: relative;
        min-height: 68px;
        align-content: center;
        gap: 4px;
        padding: 9px 11px;
        border-radius: 11px;
        background: #fbfdff;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] > #loyaltySummaryCards button.summary-card {
        width: 100%;
        color: var(--ink);
        text-align: left;
        font: inherit;
        cursor: pointer;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] > #loyaltySummaryCards button.summary-card:hover,
      #loyalty-program[data-desktop-loyalty-role="admin"] > #loyaltySummaryCards button.summary-card:focus-visible {
        border-color: #0d57a6;
        background: #edf5ff;
        box-shadow: inset 0 0 0 1px rgba(13, 87, 166, .08);
        outline: none;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] > #loyaltySummaryCards .summary-card span {
        font-size: .72rem;
        font-weight: 750;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] > #loyaltySummaryCards .summary-card strong {
        font-size: 1.15rem;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-summary-drilldown-hint {
        position: absolute;
        right: 10px;
        bottom: 9px;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        color: #0d57a6;
        font-size: .64rem;
        font-weight: 850;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-summary-drilldown-hint i {
        width: 14px;
        height: 14px;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="overview"] > .loyalty-desktop-hybrid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        align-items: stretch;
        margin: 12px 14px 14px;
        padding: 18px;
        border: 1px solid #d8e3ef;
        border-radius: 14px;
        background: #f8fbff;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-head {
        padding: 0 4px 2px;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-head span,
      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-head strong,
      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-head small {
        display: block;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-head span {
        color: #1559a3;
        font-size: .68rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-head strong {
        margin-top: 4px;
        font-size: .98rem;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-head small {
        margin-top: 3px;
        color: #66788e;
        max-width: 980px;
        font-size: .8rem;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-control-summary {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 9px;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-control-summary-item {
        min-width: 0;
        display: grid;
        gap: 3px;
        padding: 11px 13px;
        border: 1px solid #d6e2ef;
        border-radius: 11px;
        background: #fff;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-control-summary-item span {
        overflow: hidden;
        color: var(--muted);
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .02em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-control-summary-item strong {
        overflow: hidden;
        color: var(--mobil-blue-dark);
        font-size: 1.04rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-control-summary-item.is-attention strong {
        color: #965c08;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-control-directory .product-catalogue-group-actions > button[data-loyalty-control-action="metrics"] {
        border-color: #b9d1ed;
        background: #f4f8fe;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-control-directory [data-loyalty-control-action="metrics"] > svg:last-child {
        transition: transform .18s ease;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-control-directory [data-loyalty-control-action="metrics"][aria-pressed="true"] > svg:last-child {
        transform: rotate(180deg);
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="overview"][data-desktop-loyalty-metrics="collapsed"] > #loyaltySummaryCards {
        display: none !important;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="overview"][data-desktop-loyalty-metrics="expanded"] > .loyalty-expanded-metrics-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 14px;
        padding: 11px 13px;
        border: 1px solid #cfe0f2;
        border-radius: 12px 12px 0 0;
        background: #f4f9ff;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-expanded-metrics-head strong,
      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-expanded-metrics-head small {
        display: block;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-expanded-metrics-head small {
        margin-top: 2px;
        color: var(--muted);
        font-size: .72rem;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="overview"][data-desktop-loyalty-metrics="expanded"] > #loyaltySummaryCards {
        padding-top: 8px;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 9px;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-grid button {
        min-width: 0;
        min-height: 74px;
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 9px;
        align-items: center;
        padding: 10px 11px;
        border: 1px solid #d6e1ef;
        border-radius: 12px;
        background: #fff;
        color: #344860;
        text-align: left;
        font: inherit;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-grid button:hover,
      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-grid button:focus-visible {
        border-color: #1a5ca9;
        background: #edf5ff;
        color: #0d4d94;
        outline: none;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-grid button > i:first-child {
        width: 38px;
        height: 38px;
        padding: 8px;
        border-radius: 11px;
        background: #e8f2ff;
        color: #0d57a6;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-grid button strong,
      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-grid button small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-grid button strong {
        font-size: .86rem;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-hybrid-grid button small {
        margin-top: 3px;
        color: #657992;
        font-size: .7rem;
        font-weight: 700;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="rewards"] > .loyalty-desktop-back,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="requests"] > .loyalty-desktop-back,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="review"] > .loyalty-desktop-back {
        display: block;
        padding: 12px 14px 0;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-back button {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 8px 12px;
        border: 1px solid #cddbeb;
        border-radius: 10px;
        background: #edf5ff;
        color: #154f91;
        font: inherit;
        font-size: .78rem;
        font-weight: 850;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-back button i {
        width: 17px;
        height: 17px;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] > .loyalty-desktop-source-note {
        display: grid;
        gap: 3px;
        margin: 10px 14px 0;
        padding: 11px 13px;
        border: 1px solid #cfe0f2;
        border-radius: 12px;
        background: #f4f9ff;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] > .loyalty-desktop-source-note > span {
        color: #0d57a6;
        font-size: .66rem;
        font-weight: 900;
        letter-spacing: .06em;
        text-transform: uppercase;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] > .loyalty-desktop-source-note > strong {
        font-size: .88rem;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] > .loyalty-desktop-source-note > p {
        margin: 0;
        color: #52677d;
        font-size: .74rem;
        line-height: 1.4;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="overview"] > #loyaltyAdminPanel,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="overview"] > .product-catalogue-list,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="overview"] > #loyaltyRedemptionPanel,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="rewards"] > #loyaltySummaryCards,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="rewards"] > .product-catalogue-list,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="rewards"] > #loyaltyRedemptionPanel,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="requests"] > #loyaltySummaryCards,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="requests"] > #loyaltyAdminPanel,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="review"] > #loyaltySummaryCards,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="review"] > .product-catalogue-list,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="review"] > #loyaltyRedemptionPanel {
        display: none !important;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="rewards"] > #loyaltyAdminPanel,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="review"] > #loyaltyAdminPanel {
        display: grid;
        gap: 12px;
        padding: 12px 14px 14px;
        background: transparent;
        border: 0;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="rewards"] #reviewRewardAdminPanel,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="rewards"] #loyaltyRewardForm {
        display: none;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="rewards"][data-desktop-loyalty-editor="open"] .product-admin-toolbar,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="rewards"][data-desktop-loyalty-editor="open"] #loyaltyAdminRewardList {
        display: none;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="rewards"][data-desktop-loyalty-editor="open"] #loyaltyRewardForm {
        display: grid;
        gap: 12px;
        padding: 14px;
        border: 1px solid #d8e3ef;
        border-radius: 14px;
        background: #fff;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-editor-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e2e9f1;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-editor-head span,
      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-editor-head strong {
        display: block;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-editor-head span {
        color: #66788e;
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .06em;
        text-transform: uppercase;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-desktop-editor-head strong {
        margin-top: 3px;
        font-size: 1rem;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="review"] #loyaltyAdminPanel > :not(#reviewRewardAdminPanel):not(#serviceLoyaltyRateAdminPanel) {
        display: none !important;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="review"] #reviewRewardAdminPanel,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="review"] #serviceLoyaltyRateAdminPanel {
        margin: 0;
        padding: 14px;
        border-radius: 14px;
        background: #fff;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="requests"] > .product-catalogue-list {
        display: grid;
        gap: 0;
        padding: 12px 14px 0;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="requests"] .loyalty-filter-bar {
        grid-template-columns: minmax(260px, 420px);
        margin: 0;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="requests"] .loyalty-filter-bar label:first-child,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="requests"] #loyaltyCustomerSummary,
      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="requests"] #loyaltyRewardList {
        display: none;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="requests"] > #loyaltyRedemptionPanel {
        display: grid;
        gap: 10px;
        margin: 10px 14px 14px;
        padding: 14px;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="requests"] > #loyaltyRedemptionPanel .panel-head {
        padding: 0 0 10px;
      }
    }

    /* loyalty-points-issued-ledger-rates-20260813
       One auditable source for service-payment points and future rate rules. */
    #loyalty-program[data-desktop-loyalty-role="admin"] > #loyaltySummaryCards button.summary-card {
      position: relative;
      width: 100%;
      color: var(--ink);
      text-align: left;
      font: inherit;
      cursor: pointer;
    }

    #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-summary-drilldown-hint {
      position: absolute;
      right: 9px;
      bottom: 8px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      color: #0d57a6;
      font-size: .64rem;
      font-weight: 850;
    }

    #loyalty-program[data-desktop-loyalty-role="admin"] .loyalty-summary-drilldown-hint i {
      width: 14px;
      height: 14px;
    }

    .loyalty-points-ledger-panel,
    .loyalty-rate-rule-list,
    .loyalty-points-ledger-list {
      display: grid;
      gap: 10px;
    }

    .loyalty-points-ledger-panel {
      margin: 12px 14px 14px;
      padding: 14px;
      border: 1px solid #d7e3f0;
      border-radius: 14px;
      background: #fff;
    }

    .loyalty-points-ledger-toolbar {
      display: grid;
      grid-template-columns: minmax(240px, 1fr) minmax(170px, .35fr) minmax(210px, .45fr);
      gap: 8px;
    }

    .loyalty-points-ledger-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .loyalty-points-ledger-summary span,
    .loyalty-rate-source-badge {
      padding: 6px 9px;
      border: 1px solid #cfe0f2;
      border-radius: 999px;
      background: #f2f8ff;
      color: #154f91;
      font-size: .72rem;
      font-weight: 800;
    }

    .loyalty-points-ledger-row {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.35fr) auto;
      gap: 10px;
      align-items: start;
      padding: 12px;
      border: 1px solid #d8e4f0;
      border-radius: 12px;
      background: #fbfdff;
    }

    .loyalty-points-ledger-row strong,
    .loyalty-points-ledger-row span,
    .loyalty-points-ledger-row small {
      display: block;
      overflow-wrap: anywhere;
    }

    .loyalty-points-ledger-row small {
      margin-top: 3px;
      color: var(--muted);
    }

    .loyalty-points-ledger-formula {
      padding: 8px 10px;
      border: 1px dashed #bdd2e8;
      border-radius: 9px;
      background: #fff;
      color: #304b67;
      font-size: .73rem;
      line-height: 1.45;
    }

    .loyalty-points-ledger-total {
      min-width: 88px;
      color: #0755a3;
      font-size: 1rem;
      text-align: right;
    }

    .loyalty-rate-rule-row {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) 150px auto auto;
      gap: 8px;
      align-items: end;
      padding: 10px;
      border: 1px solid #d8e4f0;
      border-radius: 11px;
      background: #f8fbff;
    }

    .loyalty-rate-rule-row.is-fixed-group {
      grid-template-columns: minmax(260px, 1fr) 150px;
    }

    .loyalty-rate-rule-row .checkbox-inline {
      min-height: 40px;
      align-items: center;
    }

    #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="points"] > :not(.panel-head):not(#loyaltyDesktopBack):not(#loyaltyDesktopSourceNote):not(#loyaltyPointsLedgerPanel) {
      display: none !important;
    }

    #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="points"] > #loyaltyDesktopBack,
    #loyalty-program[data-desktop-loyalty-role="admin"][data-desktop-loyalty-view="points"] > #loyaltyPointsLedgerPanel {
      display: block;
    }

    @media (max-width: 820px) {
      #loyalty-program[data-desktop-loyalty-role="admin"] > #loyaltySummaryCards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      #loyalty-program[data-desktop-loyalty-role="admin"] > #loyaltySummaryCards .summary-card {
        min-height: 82px;
        padding: 10px;
      }

      .loyalty-points-ledger-toolbar,
      .loyalty-points-ledger-row,
      .loyalty-rate-rule-row {
        grid-template-columns: 1fr;
      }

      .loyalty-points-ledger-total {
        text-align: left;
      }
    }

    /* loyalty-member-redemption-catalogue-20260812
       BonusLink-inspired discovery and focused reward detail for customer
       desktop, adapted to Mobil Car Care points, branch stock, and collection. */
    .loyalty-member-discovery-head,
    .loyalty-member-filters,
    .loyalty-member-detail,
    .loyalty-member-card-open {
      display: none;
    }

    @media (min-width: 1121px) {
      body.customer-app-mode #loyalty-program[data-member-loyalty-view] > .product-catalogue-list {
        display: grid;
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
        background: #f7f9fc;
      }

      body.customer-app-mode #loyalty-program[data-member-loyalty-view] .loyalty-member-discovery-head {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
        gap: 12px 20px;
        align-items: center;
        padding: 4px 0 2px;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-discovery-head > div:first-child > span {
        display: block;
        color: #0d57a6;
        font-size: .7rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-discovery-head h3 {
        margin: 3px 0 0;
        color: #10263d;
        font-size: 1.55rem;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-discovery-head p {
        margin: 4px 0 0;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-search {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 12px;
        border: 1px solid #d4deea;
        border-radius: 12px;
        background: #fff;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-search i {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        color: #6c7d90;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-search input {
        min-height: 40px;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-category-chips {
        grid-column: 1 / -1;
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding: 2px 0 4px;
        scrollbar-width: thin;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-category-chips button {
        min-height: 34px;
        flex: 0 0 auto;
        padding: 7px 11px;
        border: 1px solid #d8e2ed;
        border-radius: 9px;
        background: #fff;
        color: #415267;
        font: inherit;
        font-size: .74rem;
        font-weight: 800;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-category-chips button.active,
      body.customer-app-mode #loyalty-program .loyalty-member-category-chips button:hover,
      body.customer-app-mode #loyalty-program .loyalty-member-category-chips button:focus-visible {
        border-color: #0d57a6;
        background: #0d57a6;
        color: #fff;
        outline: none;
      }

      body.customer-app-mode #loyalty-program[data-member-loyalty-view="catalogue"] .loyalty-member-filters {
        display: grid;
        align-content: start;
        gap: 12px;
        padding: 14px;
        border: 1px solid #dbe4ee;
        border-radius: 14px;
        background: #fff;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-filter-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5ebf2;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-filter-head button {
        padding: 0;
        background: transparent;
        color: #0d57a6;
        font: inherit;
        font-size: .72rem;
        font-weight: 850;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-filters label {
        display: grid;
        gap: 6px;
        color: #52657a;
        font-size: .72rem;
        font-weight: 800;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-filters select {
        min-height: 40px;
        padding: 8px 10px;
        border-radius: 10px;
        background: #fff;
        font-size: .76rem;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-results-count {
        padding: 10px;
        border-radius: 10px;
        background: #edf5ff;
        color: #174f8d;
        font-size: .74rem;
        font-weight: 850;
        text-align: center;
      }

      body.customer-app-mode #loyalty-program[data-member-loyalty-view] > .product-catalogue-list > .loyalty-filter-bar,
      body.customer-app-mode #loyalty-program[data-member-loyalty-view] > .product-catalogue-list > #loyaltyCustomerSummary {
        display: none;
      }

      body.customer-app-mode #loyalty-program[data-member-loyalty-view="catalogue"] #loyaltyRewardList {
        grid-column: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        align-content: start;
      }

      body.customer-app-mode #loyalty-program[data-member-loyalty-view="detail"] .loyalty-member-discovery-head,
      body.customer-app-mode #loyalty-program[data-member-loyalty-view="detail"] .loyalty-member-filters,
      body.customer-app-mode #loyalty-program[data-member-loyalty-view="detail"] #loyaltyRewardList {
        display: none !important;
      }

      body.customer-app-mode #loyalty-program[data-member-loyalty-view="catalogue"] .loyalty-member-detail {
        display: none;
      }

      body.customer-app-mode #loyalty-program[data-member-loyalty-view="detail"] .loyalty-member-detail {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
        gap: 20px;
        padding: 4px 0;
      }

      body.customer-app-mode #loyalty-program .loyalty-reward-card {
        min-width: 0;
        align-content: start;
        border-radius: 15px;
        border-color: #dce5ef;
        box-shadow: 0 7px 18px rgba(34, 57, 84, .05);
      }

      body.customer-app-mode #loyalty-program .loyalty-reward-card > img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        padding: 12px;
        object-fit: contain;
        background: #fff;
      }

      body.customer-app-mode #loyalty-program .loyalty-reward-body {
        min-width: 0;
        gap: 8px;
        padding: 12px;
      }

      body.customer-app-mode #loyalty-program .loyalty-reward-body h3 {
        min-height: 2.45em;
        display: -webkit-box;
        overflow: hidden;
        font-size: .9rem;
        line-height: 1.22;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      body.customer-app-mode #loyalty-program .loyalty-reward-body > p,
      body.customer-app-mode #loyalty-program .loyalty-branch-summary,
      body.customer-app-mode #loyalty-program .loyalty-reward-body > details,
      body.customer-app-mode #loyalty-program .loyalty-reward-body > .loyalty-unavailable-note,
      body.customer-app-mode #loyalty-program .loyalty-reward-body > .loyalty-checkout-row {
        display: none;
      }

      body.customer-app-mode #loyalty-program .loyalty-reward-body > .loyalty-reward-meta:first-child {
        flex-wrap: nowrap;
        overflow: hidden;
      }

      body.customer-app-mode #loyalty-program .loyalty-reward-body > .loyalty-reward-meta:first-child .badge {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      body.customer-app-mode #loyalty-program .loyalty-stock-line {
        display: block;
      }

      body.customer-app-mode #loyalty-program .loyalty-stock-line .product-price-box {
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
      }

      body.customer-app-mode #loyalty-program .loyalty-stock-line .product-price-box span,
      body.customer-app-mode #loyalty-program .loyalty-stock-line .product-price-box:nth-child(n + 2) {
        display: none;
      }

      body.customer-app-mode #loyalty-program .loyalty-stock-line .product-price-box strong {
        color: #0d57a6;
        font-size: 1rem;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-card-open {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 10px;
        border: 1px solid #0d57a6;
        border-radius: 10px;
        background: #0d57a6;
        color: #fff;
        font: inherit;
        font-size: .76rem;
        font-weight: 850;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-card-open i {
        width: 16px;
        height: 16px;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-detail-back {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 7px;
        width: fit-content;
        padding: 8px 11px;
        border: 1px solid #ccd9e8;
        border-radius: 10px;
        background: #fff;
        color: #164f8f;
        font: inherit;
        font-size: .76rem;
        font-weight: 850;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-detail-image {
        width: 100%;
        aspect-ratio: 1;
        padding: 22px;
        border: 1px solid #dce5ef;
        border-radius: 16px;
        object-fit: contain;
        background: #fff;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-detail-copy {
        display: grid;
        align-content: start;
        gap: 12px;
        padding: 4px 0;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-detail-copy h3 {
        margin: 0;
        color: #132b43;
        font-size: 1.35rem;
        line-height: 1.18;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-detail-points {
        color: #0d57a6;
        font-size: 1.35rem;
        font-weight: 950;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-detail-copy > p {
        margin: 0;
        color: #52657a;
        line-height: 1.5;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-detail-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-detail-note {
        padding: 10px 12px;
        border-radius: 11px;
        background: #edf5ff;
        color: #274d76;
        font-size: .76rem;
        line-height: 1.4;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-detail-info {
        border: 1px solid #dce5ef;
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-detail-info summary {
        padding: 11px 12px;
        cursor: pointer;
        font-size: .78rem;
        font-weight: 850;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-detail-info > div {
        display: grid;
        gap: 7px;
        padding: 0 12px 12px;
        color: #52657a;
        font-size: .75rem;
        line-height: 1.45;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-related {
        grid-column: 1 / -1;
        display: grid;
        gap: 9px;
        padding-top: 4px;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-related h4 {
        margin: 0;
        font-size: .95rem;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-related-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-related button {
        min-width: 0;
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 9px;
        align-items: center;
        padding: 8px;
        border: 1px solid #dce5ef;
        border-radius: 11px;
        background: #fff;
        color: #2c4057;
        text-align: left;
        font: inherit;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-related img {
        width: 56px;
        height: 56px;
        padding: 4px;
        border-radius: 9px;
        object-fit: contain;
        background: #f8fafc;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-related strong,
      body.customer-app-mode #loyalty-program .loyalty-member-related small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-related strong {
        font-size: .76rem;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-related small {
        margin-top: 3px;
        color: #0d57a6;
        font-size: .7rem;
        font-weight: 800;
      }
    }

    /* loyalty-reward-photo-drilldown-20260826:
       Keep the customer catalogue visual and short. The reward photos and
       redemption information open only after the customer chooses an item. */
    .loyalty-member-card-media {
      position: relative;
      display: block;
      width: 100%;
      padding: 0;
      border: 0;
      background: #fff;
      cursor: pointer;
    }

    .loyalty-member-card-media img {
      display: block;
      width: 100%;
    }

    .loyalty-member-photo-count {
      position: absolute;
      right: 9px;
      bottom: 9px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 7px;
      border-radius: 999px;
      background: rgba(11, 39, 69, .82);
      color: #fff;
      font-size: .68rem;
      font-weight: 850;
    }

    .loyalty-member-photo-count i {
      width: 13px;
      height: 13px;
    }

    .loyalty-member-detail-gallery {
      display: grid;
      gap: 9px;
      min-width: 0;
    }

    .loyalty-member-detail-image-wrap {
      position: relative;
      overflow: hidden;
      border: 1px solid #dce5ef;
      border-radius: 16px;
      background: #fff;
    }

    .loyalty-member-detail-image-wrap .loyalty-member-detail-image {
      display: block;
      width: 100%;
      border: 0;
    }

    .loyalty-member-detail-photo-position {
      position: absolute;
      right: 10px;
      bottom: 10px;
      padding: 5px 8px;
      border-radius: 999px;
      background: rgba(11, 39, 69, .82);
      color: #fff;
      font-size: .7rem;
      font-weight: 850;
    }

    .loyalty-member-detail-thumbs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 2px;
      scrollbar-width: thin;
    }

    .loyalty-member-detail-thumbs button {
      flex: 0 0 58px;
      width: 58px;
      height: 58px;
      padding: 0;
      overflow: hidden;
      border: 2px solid transparent;
      border-radius: 10px;
      background: #f5f8fc;
      cursor: pointer;
    }

    .loyalty-member-detail-thumbs button.is-selected {
      border-color: #0d57a6;
      box-shadow: 0 0 0 2px rgba(13, 87, 166, .12);
    }

    .loyalty-member-detail-thumbs img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #stockItemEditorHost, #loyaltyRewardForm, #loyaltyRewardForm > *, #loyaltyRewardForm .field-grid > label { min-width:0; }
    #stock-control #loyaltyRewardForm { width:100%; box-sizing:border-box; }
    #loyaltyRewardForm .gift-photo-field { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; min-width:0; }
    #loyaltyRewardForm .gift-photo-field input { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
    #loyaltyRewardForm .loyalty-reward-gallery-editor-head > div { min-width:0; }
    #loyaltyRewardForm #loyaltyRewardGalleryCount { flex:0 0 auto; white-space:nowrap; }
    #loyaltyRewardForm .gift-photo-standard { border:1px solid #bcd2ee; border-radius:10px; background:#eef5ff; color:#193b63; padding:14px; min-width:0; }
    #loyaltyRewardForm .gift-photo-standard > strong { display:block; font-size:.94rem; line-height:1.4; }
    #loyaltyRewardForm .gift-photo-standard dl { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:12px 0; }
    #loyaltyRewardForm .gift-photo-standard dl > div { background:#fff; border:1px solid #dbe6f5; border-radius:8px; padding:10px; min-width:0; }
    #loyaltyRewardForm .gift-photo-standard dt { font-size:.75rem; color:#506680; margin-bottom:4px; }
    #loyaltyRewardForm .gift-photo-standard dd { margin:0; font-size:.9rem; font-weight:700; overflow-wrap:anywhere; }
    #loyaltyRewardForm .gift-photo-standard p { margin:8px 0 0; font-size:.8rem; line-height:1.55; }
    #loyaltyRewardForm #loyaltyRewardImagePreview { width:200px; height:200px; max-width:100%; max-height:none; aspect-ratio:1; object-fit:contain; background:#fff; }
    @media(max-width:760px) { #loyaltyRewardForm .gift-photo-standard dl { grid-template-columns:repeat(2,minmax(0,1fr)); } }

    .loyalty-reward-gallery-editor {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid #d8e4f0;
      border-radius: 12px;
      background: #fbfdff;
    }

    .loyalty-reward-gallery-editor-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .loyalty-reward-gallery-editor-head strong,
    .loyalty-reward-gallery-editor-head small {
      display: block;
    }

    .loyalty-reward-gallery-editor-head small {
      margin-top: 3px;
      color: var(--muted);
      font-size: .76rem;
      line-height: 1.35;
    }

    .loyalty-reward-gallery-preview {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 9px;
    }

    .loyalty-reward-gallery-preview:empty {
      display: none;
    }

    .loyalty-reward-gallery-photo {
      display: grid;
      gap: 7px;
      padding: 8px;
      border: 1px solid #d8e4f0;
      border-radius: 10px;
      background: #fff;
    }

    .loyalty-reward-gallery-photo img {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 7px;
      object-fit: contain;
      background: #f4f7fb;
    }

    .loyalty-reward-gallery-photo figcaption {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5px;
      color: #53677f;
      font-size: .7rem;
      font-weight: 800;
    }

    .loyalty-reward-gallery-photo .actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 4px;
    }

    .loyalty-reward-gallery-photo .btn {
      min-height: 28px;
      padding: 0 7px;
      font-size: .68rem;
    }

    @media (max-width: 1120px) {
      body.customer-app-mode #loyalty-program[data-member-loyalty-view="catalogue"] > .product-catalogue-list {
        display: block;
        padding: 10px 12px 0;
      }

      body.customer-app-mode #loyalty-program[data-member-loyalty-view="catalogue"] .loyalty-member-discovery-head,
      body.customer-app-mode #loyalty-program[data-member-loyalty-view="catalogue"] .loyalty-member-filters,
      body.customer-app-mode #loyalty-program[data-member-loyalty-view="catalogue"] > .product-catalogue-list > .loyalty-filter-bar,
      body.customer-app-mode #loyalty-program[data-member-loyalty-view="catalogue"] > .product-catalogue-list > #loyaltyCustomerSummary {
        display: none !important;
      }

      body.customer-app-mode #loyalty-program[data-member-loyalty-view="catalogue"] #loyaltyRewardList {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      body.customer-app-mode #loyalty-program[data-member-loyalty-view="detail"] > .product-catalogue-list {
        display: block;
        padding: 10px 12px 18px;
      }

      body.customer-app-mode #loyalty-program[data-member-loyalty-view="detail"] #loyaltyRewardList,
      body.customer-app-mode #loyalty-program[data-member-loyalty-view="detail"] .loyalty-member-discovery-head,
      body.customer-app-mode #loyalty-program[data-member-loyalty-view="detail"] .loyalty-member-filters,
      body.customer-app-mode #loyalty-program[data-member-loyalty-view="detail"] > .product-catalogue-list > .loyalty-filter-bar,
      body.customer-app-mode #loyalty-program[data-member-loyalty-view="detail"] > .product-catalogue-list > #loyaltyCustomerSummary {
        display: none !important;
      }

      body.customer-app-mode #loyalty-program[data-member-loyalty-view="detail"] .loyalty-member-detail {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0;
      }

      body.customer-app-mode #loyalty-program .loyalty-reward-card {
        border-radius: 14px;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-card-media > img,
      body.customer-app-mode #loyalty-program .loyalty-reward-card > img,
      body.customer-app-mode #loyalty-program .loyalty-member-card-media > img {
        aspect-ratio: 1;
        padding: 9px;
        object-fit: contain;
        background: #fff;
      }

      body.customer-app-mode #loyalty-program .loyalty-reward-body {
        gap: 7px;
        padding: 10px;
      }

      body.customer-app-mode #loyalty-program .loyalty-reward-body h3 {
        min-height: 2.45em;
        font-size: .84rem;
      }

      body.customer-app-mode #loyalty-program .loyalty-reward-body > p,
      body.customer-app-mode #loyalty-program .loyalty-branch-summary,
      body.customer-app-mode #loyalty-program .loyalty-reward-body > details,
      body.customer-app-mode #loyalty-program .loyalty-reward-body > .loyalty-unavailable-note,
      body.customer-app-mode #loyalty-program .loyalty-reward-body > .loyalty-checkout-row {
        display: none;
      }

      body.customer-app-mode #loyalty-program .loyalty-reward-body > .loyalty-reward-meta:first-child {
        flex-wrap: nowrap;
        overflow: hidden;
      }

      body.customer-app-mode #loyalty-program .loyalty-reward-body > .loyalty-reward-meta:first-child .badge:nth-child(n + 2) {
        display: none;
      }

      body.customer-app-mode #loyalty-program .loyalty-stock-line {
        display: block;
      }

      body.customer-app-mode #loyalty-program .loyalty-stock-line .product-price-box {
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
      }

      body.customer-app-mode #loyalty-program .loyalty-stock-line .product-price-box span,
      body.customer-app-mode #loyalty-program .loyalty-stock-line .product-price-box:nth-child(n + 2) {
        display: none;
      }

      body.customer-app-mode #loyalty-program .loyalty-stock-line .product-price-box strong {
        color: #0d57a6;
        font-size: .96rem;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-card-open {
        width: 100%;
        min-height: 36px;
        font-size: .72rem;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-detail-image {
        aspect-ratio: 1;
        padding: 16px;
        object-fit: contain;
      }

      body.customer-app-mode #loyalty-program .loyalty-member-related-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Compact hybrid dashboard navigation */
    .dashboard-hybrid-nav {
      display: none;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 10px 30px rgba(15, 58, 104, .07);
    }

    .dashboard-hybrid-nav.active {
      display: grid;
    }

    .dashboard-hybrid-summary,
    .dashboard-filter-drawer-head,
    .dashboard-filter-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .dashboard-hybrid-summary strong {
      display: block;
      margin-top: 3px;
      color: var(--ink);
      font-size: 1rem;
    }

    .dashboard-hybrid-eyebrow {
      color: var(--blue);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .dashboard-hybrid-intro h3,
    .dashboard-detail-title h2 {
      margin: 0;
      color: var(--ink);
    }

    .dashboard-hybrid-intro h3 {
      font-size: 1.05rem;
    }

    .dashboard-hybrid-intro p,
    .dashboard-detail-title p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.45;
    }

    .dashboard-report-selector {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .dashboard-report-card {
      display: grid;
      min-width: 0;
      min-height: 158px;
      grid-template-columns: 44px minmax(0, 1fr);
      grid-template-rows: auto 1fr auto;
      gap: 8px 11px;
      padding: 14px;
      border: 1px solid #d7e2ef;
      border-radius: 16px;
      background: #f8fbff;
      color: var(--ink);
      text-align: left;
      font: inherit;
      cursor: pointer;
      transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .dashboard-report-card:hover,
    .dashboard-report-card:focus-visible {
      border-color: #8eb8e8;
      box-shadow: 0 10px 26px rgba(15, 75, 136, .1);
      transform: translateY(-1px);
      outline: none;
    }

    .dashboard-report-card[hidden] {
      display: none !important;
    }

    .dashboard-report-icon {
      display: grid;
      width: 44px;
      height: 44px;
      grid-row: 1 / span 2;
      place-items: center;
      border-radius: 13px;
      background: #e8f2ff;
      color: var(--blue);
    }

    .dashboard-report-icon svg {
      width: 21px;
      height: 21px;
    }

    .dashboard-report-copy strong {
      display: block;
      color: var(--ink);
      font-size: .95rem;
    }

    .dashboard-report-copy small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: .76rem;
      line-height: 1.35;
    }

    .dashboard-report-metrics {
      display: flex;
      grid-column: 1 / -1;
      flex-wrap: wrap;
      gap: 6px;
    }

    .dashboard-report-metric {
      display: inline-flex;
      min-width: 0;
      align-items: baseline;
      gap: 5px;
      padding: 6px 8px;
      border: 1px solid #dce7f3;
      border-radius: 999px;
      background: #fff;
      color: #62758c;
      font-size: .7rem;
      font-weight: 750;
    }

    .dashboard-report-metric strong {
      overflow: hidden;
      color: var(--ink);
      font-size: .75rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dashboard-report-next {
      display: inline-flex;
      grid-column: 1 / -1;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      color: var(--blue);
      font-size: .76rem;
      font-weight: 850;
    }

    .dashboard-report-next svg {
      width: 15px;
      height: 15px;
    }

    .dashboard-detail-toolbar {
      display: none;
      align-items: center;
      gap: 12px;
      padding-top: 2px;
      border-top: 1px solid #e2eaf4;
    }

    .dashboard-hybrid-nav[data-dashboard-mode="detail"] .dashboard-hybrid-intro,
    .dashboard-hybrid-nav[data-dashboard-mode="detail"] .dashboard-report-selector {
      display: none;
    }

    .dashboard-hybrid-nav[data-dashboard-mode="detail"] .dashboard-detail-toolbar {
      display: flex;
    }

    .dashboard-detail-back {
      flex: 0 0 auto;
      width: auto;
      min-width: 44px;
    }

    .dashboard-detail-title {
      min-width: 0;
      flex: 1 1 auto;
    }

    .dashboard-detail-title h2 {
      font-size: 1.05rem;
    }

    .dashboard-report-block:not(.dashboard-report-visible),
    .dashboard-report-container.dashboard-report-container-hidden {
      display: none !important;
    }

    .dashboard-filter-backdrop,
    .dashboard-filter-drawer {
      display: none !important;
    }

    body.dashboard-filter-open {
      overflow: hidden;
    }

    body.dashboard-filter-open .dashboard-filter-backdrop {
      display: block !important;
      position: fixed;
      inset: 0;
      z-index: 1190;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      background: rgba(9, 30, 55, .48);
      backdrop-filter: blur(2px);
    }

    body.dashboard-filter-open .dashboard-filter-drawer {
      display: grid !important;
      position: fixed;
      z-index: 1200;
      top: max(14px, env(safe-area-inset-top));
      left: 50%;
      width: min(920px, calc(100vw - 28px));
      max-height: calc(100dvh - 28px - env(safe-area-inset-top));
      overflow: auto;
      transform: translateX(-50%);
      gap: 14px;
      padding: 18px;
      border-radius: 20px;
      box-shadow: 0 24px 70px rgba(4, 28, 58, .28);
      animation: dashboardFilterDrop .18s ease-out;
    }

    @keyframes dashboardFilterDrop {
      from { opacity: 0; transform: translate(-50%, -18px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }

    .dashboard-filter-drawer-head h2 {
      margin: 3px 0 0;
      font-size: 1.25rem;
    }

    .dashboard-filter-actions {
      justify-content: flex-end;
      padding-top: 2px;
    }

    @media (max-width: 760px) {
      body.dashboard-page-active #pagePrimaryAction {
        width: auto;
        min-height: 38px;
        padding: 8px 12px;
        font-size: .78rem;
      }

      body.dashboard-page-active #pagePrimaryAction svg {
        width: 16px;
        height: 16px;
      }

      .dashboard-owner-header {
        padding: 14px 16px;
      }

      .dashboard-owner-header h2 {
        font-size: 1.12rem;
        line-height: 1.25;
      }

      .dashboard-owner-header .sub {
        display: none;
      }

      .dashboard-hybrid-nav {
        gap: 10px;
        padding: 11px;
        border-radius: 16px;
      }

      .dashboard-hybrid-summary strong {
        max-width: 66vw;
        overflow: hidden;
        font-size: .88rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .dashboard-filter-trigger {
        min-width: 44px;
        padding: 9px 10px;
      }

      .dashboard-filter-trigger span {
        display: none;
      }

      .dashboard-hybrid-intro p {
        font-size: .78rem;
      }

      .dashboard-report-selector {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .dashboard-report-card {
        min-height: 0;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 7px 10px;
        padding: 12px;
        border-radius: 14px;
      }

      .dashboard-report-icon {
        width: 40px;
        height: 40px;
        grid-row: 1 / span 2;
      }

      .dashboard-report-copy {
        align-self: center;
      }

      .dashboard-report-metrics {
        grid-column: 2 / 3;
      }

      .dashboard-report-next {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
      }

      .dashboard-report-next span {
        display: none;
      }

      .dashboard-detail-toolbar {
        align-items: flex-start;
      }

      .dashboard-detail-back span {
        display: none;
      }

      .dashboard-detail-back {
        width: 44px !important;
        padding: 9px !important;
      }

      .dashboard-detail-title h2 {
        font-size: .95rem;
      }

      .dashboard-kpi-grid {
        display: flex;
        overflow-x: auto;
        gap: 9px;
        padding-bottom: 3px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }

      .dashboard-kpi-grid::-webkit-scrollbar {
        display: none;
      }

      .dashboard-kpi-grid > * {
        min-width: min(72vw, 260px);
        scroll-snap-align: start;
      }

      body.dashboard-filter-open .dashboard-filter-drawer {
        top: max(8px, env(safe-area-inset-top));
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px - env(safe-area-inset-top));
        padding: 14px;
        border-radius: 18px;
      }

      .dashboard-filter-grid {
        gap: 10px;
      }

      .dashboard-filter-actions {
        position: sticky;
        bottom: -14px;
        margin: 0 -14px -14px;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(10px);
      }

      .dashboard-filter-actions .btn {
        flex: 1;
      }

      .dashboard-charts,
      .dashboard-section-grid {
        gap: 10px;
      }
    }

    /* Compact hybrid Payments flow */
    body.payment-page-active #pageSearchWrap,
    body.payment-page-active #pagePrimaryAction {
      display: none !important;
    }

    #advisor-payments {
      overflow: hidden;
    }

    .payment-summary-selector {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      padding: 12px 14px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: #f8fbff;
    }

    .payment-summary-card {
      display: flex;
      min-width: 0;
      min-height: 64px;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid #d9e4f0;
      border-radius: 14px;
      background: #fff;
      color: var(--ink);
      text-align: left;
      font: inherit;
      cursor: pointer;
    }

    .payment-summary-card:hover,
    .payment-summary-card.active,
    .payment-summary-card:focus-visible {
      border-color: #84b5e9;
      background: #eaf3ff;
      box-shadow: inset 0 0 0 1px rgba(11, 86, 166, .06);
      outline: none;
    }

    .payment-summary-icon {
      display: grid;
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      place-items: center;
      border-radius: 11px;
      background: #edf5ff;
      color: var(--blue);
    }

    .payment-summary-icon svg {
      width: 18px;
      height: 18px;
    }

    .payment-summary-copy {
      min-width: 0;
    }

    .payment-summary-copy span,
    .payment-summary-copy strong {
      display: block;
    }

    .payment-summary-copy span {
      overflow: hidden;
      color: #60728a;
      font-size: .7rem;
      font-weight: 780;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .payment-summary-copy strong {
      margin-top: 2px;
      color: var(--ink);
      font-size: 1.05rem;
    }

    .payment-queue-tools {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
    }

    .payment-queue-tools .search {
      min-width: 0;
    }

    .payment-date-selector {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 9px;
      padding: 8px 14px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .payment-date-selector-label {
      display: inline-flex;
      min-width: 92px;
      flex: 0 0 auto;
      align-items: center;
      gap: 6px;
      color: #3f5671;
      font-size: .74rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .payment-date-selector-label svg {
      width: 16px;
      height: 16px;
      color: var(--blue);
    }

    .payment-date-preset-list {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .payment-date-preset-list::-webkit-scrollbar {
      display: none;
    }

    .payment-date-preset-list button {
      display: inline-flex;
      min-height: 32px;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 5px 10px;
      border: 1px solid #d4e0ed;
      border-radius: 999px;
      background: #f8fbff;
      color: #41566d;
      font: inherit;
      font-size: .73rem;
      font-weight: 780;
      cursor: pointer;
    }

    .payment-date-preset-list button:hover,
    .payment-date-preset-list button:focus-visible,
    .payment-date-preset-list button[aria-current="true"] {
      border-color: #7fb1e8;
      background: #eaf3ff;
      color: #0755a5;
      outline: none;
    }

    .payment-date-preset-list button svg {
      width: 14px;
      height: 14px;
    }

    .payment-filter-trigger {
      min-width: 112px;
      justify-content: center;
    }

    .payment-filter-trigger.has-active-filters {
      border-color: #7fb1e8;
      background: #eaf3ff;
      color: #0755a5;
    }

    .payment-filter-panel {
      display: grid;
      gap: 12px;
      padding: 14px;
      border-bottom: 1px solid var(--line);
      background: #f8fbff;
    }

    .payment-filter-panel[hidden] {
      display: none !important;
    }

    .payment-filter-head,
    .payment-filter-actions,
    .payment-detail-head,
    .payment-selected-workflow-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .payment-filter-head strong {
      font-size: .9rem;
    }

    .payment-filter-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .payment-filter-actions {
      justify-content: flex-end;
    }

    .payment-workspace {
      display: block;
      padding: 0;
    }

    /* payments-balanced-detail-20260824
       Queue controls belong to the queue. Once a payment is selected, keep one
       centred task workspace and use the available desktop width evenly. */
    #advisor-payments[data-payment-view="detail"] > .panel-head,
    #advisor-payments[data-payment-view="detail"] > .payment-summary-selector,
    #advisor-payments[data-payment-view="detail"] > .payment-queue-tools,
    #advisor-payments[data-payment-view="detail"] > .payment-date-selector,
    #advisor-payments[data-payment-view="detail"] > .payment-filter-panel {
      display: none !important;
    }

    #advisor-payments[data-payment-view="detail"] .payment-workspace {
      padding: clamp(14px, 2vw, 24px);
      background: linear-gradient(180deg, #f7faff 0%, #fff 72%);
    }

    .payment-queue-view {
      padding: 12px 14px 16px;
    }

    .payment-queue-view[hidden],
    #receiptForm[hidden] {
      display: none !important;
    }

    .payment-record-row {
      display: block;
    }

    .payment-record-card {
      position: relative;
      gap: 7px;
      padding: 12px 46px 12px 12px;
      border-radius: 14px;
    }

    .payment-record-head {
      gap: 8px;
    }

    .payment-record-head > span:first-child {
      min-width: 0;
    }

    .payment-record-head > span:first-child > strong,
    .payment-record-head > span:first-child > .sub {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .payment-record-head .badges {
      flex: 0 0 auto;
    }

    .payment-record-compact-meta {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(90px, .75fr) minmax(90px, .75fr);
      gap: 6px;
    }

    .payment-record-compact-meta .mini {
      min-width: 0;
      padding: 7px 8px;
    }

    .payment-record-compact-meta .mini strong {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .payment-record-next {
      position: absolute;
      right: 14px;
      top: 50%;
      color: var(--blue);
      transform: translateY(-50%);
    }

    .payment-record-next svg {
      width: 18px;
      height: 18px;
    }

    .receipt-form {
      position: static;
      width: min(1120px, 100%);
      margin: 0 auto;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .payment-detail-head {
      justify-content: flex-start;
      margin-bottom: 12px;
      padding: 13px 14px;
      border: 1px solid #d8e4f0;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(18, 64, 110, .06);
    }

    .payment-detail-copy {
      min-width: 0;
    }

    .payment-detail-copy h3 {
      margin: 0;
      font-size: 1.08rem;
    }

    .payment-detail-eyebrow {
      display: block;
      margin-bottom: 2px;
      color: var(--blue);
      font-size: .64rem;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .payment-detail-copy .sub {
      margin-top: 2px;
      overflow-wrap: anywhere;
      font-size: .78rem;
    }

    .payment-selected-workflow-actions {
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-bottom: 12px;
      padding: 11px 14px;
      border: 1px solid #dbe6f1;
      border-radius: 14px;
      background: #fff;
    }

    .payment-selected-workflow-actions:empty {
      display: none;
    }

    /* Mechanic-completed payment gate: compact proof plus compulsory evidence checklist. */
    .payment-job-done-proof {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 9px;
    }

    .payment-job-done-proof-copy {
      display: grid;
      min-width: 0;
      gap: 1px;
    }

    .payment-job-done-proof-copy strong,
    .payment-job-done-proof-copy span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .payment-job-done-proof-copy strong {
      font-size: .82rem;
    }

    .payment-job-done-proof-copy span {
      color: var(--muted);
      font-size: .74rem;
    }

    .payment-required-checklist {
      display: flex;
      margin-left: auto;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
    }

    .payment-required-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 8px;
      border: 1px solid #f0c36a;
      border-radius: 999px;
      background: #fff8e8;
      color: #7a4a00;
      font-size: .72rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .payment-required-item::before {
      content: "!";
      display: grid;
      width: 16px;
      height: 16px;
      place-items: center;
      border-radius: 50%;
      background: #f2b441;
      color: #fff;
      font-size: .66rem;
    }

    .payment-required-item.is-complete {
      border-color: #b8ddc8;
      background: #eefaf3;
      color: #17653a;
    }

    .payment-required-item.is-complete::before {
      content: "✓";
      background: #2b9a5b;
    }

    .payment-required-label {
      display: inline-block;
      margin-left: 4px;
      color: #a23b27;
      font-size: .7rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    #receiptNumber:required:invalid,
    #receiptFileInput:required:invalid {
      border-color: #d69b8f;
      background: #fffafa;
    }

    .receipt-discount-row label {
      grid-column: 1 / -1;
    }

    /* payment-update-hybrid-drilldown-20260812
       One focused payment task at a time, with saved-record role lock and immutable change proof. */
    .payment-record-lock-banner {
      margin-bottom: 12px;
      padding: 10px 12px;
      border: 1px solid #c9d8ea;
      border-radius: 12px;
      background: #f3f7fc;
      color: #284766;
      font-size: .78rem;
      line-height: 1.45;
    }

    .payment-record-lock-banner[hidden] {
      display: none !important;
    }

    .payment-record-lock-banner.is-locked {
      border-color: #f0c36a;
      background: #fff8e8;
      color: #754700;
    }

    .payment-record-lock-banner.is-privileged {
      border-color: #b9d6f7;
      background: #eef6ff;
      color: #0b4f92;
    }

    .payment-record-lock-banner strong,
    .payment-record-lock-banner span {
      display: block;
    }

    .payment-detail-selector {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 14px;
      padding: 9px;
      border: 1px solid #dbe6f1;
      border-radius: 14px;
      background: #f8fbff;
    }

    .payment-detail-selector > button {
      min-width: 0;
      min-height: 64px;
      padding: 9px 10px;
      border: 1px solid #cfdced;
      border-radius: 11px;
      background: #fff;
      color: var(--ink);
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      text-align: left;
      cursor: pointer;
    }

    .payment-detail-selector > button:hover,
    .payment-detail-selector > button:focus-visible,
    .payment-detail-selector > button[aria-current="step"] {
      border-color: var(--blue);
      background: #eef5ff;
      box-shadow: 0 0 0 2px rgba(18, 90, 166, .08);
    }

    .payment-detail-selector-icon {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: #eaf2ff;
      color: var(--blue);
      display: grid;
      place-items: center;
    }

    .payment-detail-selector-icon svg,
    .payment-detail-selector > button > svg {
      width: 17px;
      height: 17px;
    }

    .payment-detail-selector > button span:nth-child(2) {
      min-width: 0;
    }

    .payment-detail-selector strong,
    .payment-detail-selector small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .payment-detail-selector strong {
      font-size: .8rem;
    }

    .payment-detail-selector small {
      margin-top: 2px;
      color: var(--muted);
      font-size: .68rem;
    }

    .payment-detail-stage {
      display: grid;
      gap: 14px;
      padding: clamp(15px, 1.8vw, 20px);
      border: 1px solid #dbe6f1;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 10px 28px rgba(18, 64, 110, .05);
    }

    .payment-detail-stage[hidden] {
      display: none !important;
    }

    #receiptForm .field-grid {
      gap: 12px 14px;
    }

    .payment-settlement-grid {
      grid-template-columns: minmax(0, .78fr) minmax(0, 1.12fr) minmax(0, 1fr);
    }

    #receiptForm input,
    #receiptForm select {
      min-height: 43px;
    }

    .payment-detail-stage-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e2eaf3;
    }

    .payment-detail-stage-head > div {
      min-width: 0;
    }

    .payment-detail-stage-head span {
      color: var(--blue);
      font-size: .66rem;
      font-weight: 900;
      letter-spacing: .05em;
    }

    .payment-detail-stage-head h4,
    .payment-detail-stage-head p {
      margin: 0;
    }

    .payment-detail-stage-head h4 {
      margin-top: 2px;
      font-size: .95rem;
    }

    .payment-detail-stage-head p {
      margin-top: 3px;
      color: var(--muted);
      font-size: .75rem;
    }

    #receiptForm .payment-confirmation-summary {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px 24px;
      margin: 0;
      padding: 12px 14px;
      border: 1px solid #dbe6f1;
      border-radius: 10px;
      background: #f8fbff;
    }

    #receiptForm .payment-confirmation-field {
      display: flex;
      align-items: baseline;
      gap: 6px;
      min-width: 0;
      max-width: 100%;
    }

    #receiptForm .payment-confirmation-field dt {
      flex-shrink: 0;
      color: var(--muted);
      font-size: .75rem;
    }

    #receiptForm .payment-confirmation-field dd {
      min-width: 0;
      margin: 0;
      color: #173250;
      font-size: .875rem;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    #receiptForm .payment-confirmation-field.is-missing dd {
      color: #80500d;
      font-weight: 500;
    }

    .payment-change-proof {
      background: #fbfcfe;
    }

    .payment-proof-empty {
      padding: 20px;
      border: 1px dashed #cfdced;
      border-radius: 12px;
      background: #fff;
      color: var(--muted);
      text-align: center;
    }

    .payment-proof-current,
    .payment-proof-revision {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid #dbe6f1;
      border-radius: 12px;
      background: #fff;
    }

    .payment-proof-revision + .payment-proof-revision {
      margin-top: 10px;
    }

    .payment-proof-title {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
    }

    .payment-proof-title span,
    .payment-proof-title strong {
      display: block;
    }

    .payment-proof-title span {
      color: var(--muted);
      font-size: .7rem;
    }

    .payment-proof-compare {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .payment-proof-snapshot {
      min-width: 0;
      padding: 10px;
      border: 1px solid #dbe6f1;
      border-radius: 10px;
      background: #f8fbff;
    }

    .payment-proof-snapshot.after {
      border-color: #b8ddc8;
      background: #f1fbf5;
    }

    .payment-proof-snapshot h5 {
      margin: 0 0 8px;
      font-size: .78rem;
    }

    .payment-proof-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .payment-proof-field {
      min-width: 0;
      padding: 6px 7px;
      border-radius: 7px;
      background: rgba(255,255,255,.85);
    }

    .payment-proof-field span,
    .payment-proof-field strong {
      display: block;
      overflow-wrap: anywhere;
    }

    .payment-proof-field span {
      color: var(--muted);
      font-size: .64rem;
    }

    .payment-proof-field strong {
      margin-top: 1px;
      font-size: .73rem;
    }

    .payment-proof-photo {
      display: block;
      margin-top: 8px;
    }

    .payment-proof-photo img {
      width: min(100%, 220px);
      max-height: 180px;
      object-fit: contain;
      border: 1px solid #cfdced;
      border-radius: 8px;
      background: #fff;
    }

    #receiptForm[data-payment-record-state="locked"] .payment-detail-stage input,
    #receiptForm[data-payment-record-state="locked"] .payment-detail-stage select,
    #receiptForm[data-payment-record-state="locked"] .payment-detail-stage textarea {
      color: #42566d;
      background: #f3f6f9;
      cursor: not-allowed;
    }

    @media (max-width: 760px) {
      body.payment-page-active .page-header {
        padding-bottom: 10px;
      }

      #advisor-payments .panel-head {
        padding: 13px 14px;
      }

      #advisor-payments .panel-head h2 {
        font-size: 1rem;
      }

      .payment-summary-selector {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
        padding: 7px 9px;
        scroll-snap-type: none;
      }

      .payment-summary-selector::-webkit-scrollbar {
        display: none;
      }

      .payment-summary-card {
        min-height: 48px;
        width: 100%;
        min-width: 0;
        flex: none;
        gap: 6px;
        padding: 6px 7px;
        border-radius: 11px;
        scroll-snap-align: none;
      }

      .payment-summary-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        border-radius: 8px;
      }

      .payment-summary-copy strong {
        font-size: .86rem;
      }

      .payment-summary-copy span {
        overflow: visible;
        font-size: .66rem;
        line-height: 1.15;
        text-overflow: clip;
        white-space: normal;
      }

      .payment-queue-tools {
        padding: 7px 9px;
      }

      .payment-filter-trigger {
        width: 44px !important;
        min-width: 44px;
        padding: 9px !important;
      }

      .payment-filter-trigger span {
        display: none;
      }

      .payment-filter-panel {
        margin: 0 8px 6px;
        padding: 9px;
        border: 1px solid #d7e2ee;
        border-radius: 12px;
      }

      .payment-filter-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .payment-filter-actions .btn {
        flex: 1 1 0;
      }

      .payment-date-selector {
        gap: 6px;
        padding: 6px 9px;
      }

      .payment-date-selector-label {
        min-width: 0;
        max-width: 92px;
        font-size: .68rem;
      }

      .payment-date-selector-label span {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .payment-date-preset-list {
        gap: 5px;
      }

      .payment-date-preset-list button {
        min-height: 29px;
        padding: 4px 9px;
        font-size: .68rem;
      }

      .payment-queue-view {
        padding: 7px 9px 12px;
      }

      #advisorPaymentSummary {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: .76rem;
        line-height: 1.4;
      }

      .payment-record-list {
        gap: 6px;
        margin-top: 6px;
      }

      .payment-record-card {
        min-height: 0;
        gap: 4px;
        padding: 8px 30px 8px 9px;
        border-radius: 12px;
      }

      .payment-record-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .payment-record-head .badges {
        max-width: 106px;
      }

      .payment-record-head > span:first-child > strong {
        font-size: .86rem;
      }

      .payment-record-head > span:first-child > .sub {
        margin-top: 1px;
        font-size: .69rem;
      }

      .payment-record-head .badge {
        padding: 4px 7px;
        font-size: .64rem;
      }

      .payment-record-head .badges .badge:not(:first-child) {
        display: none;
      }

      .payment-record-compact-meta {
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 0;
        align-items: center;
      }

      .payment-record-compact-meta .mini {
        min-height: 0;
        margin-right: 7px;
        padding: 0 7px 0 0;
        border: 0;
        border-right: 1px solid #dbe4ee;
        border-radius: 0;
        background: transparent;
      }

      .payment-record-compact-meta .mini span {
        display: none;
      }

      .payment-record-compact-meta .mini strong {
        font-size: .71rem;
      }

      .payment-record-compact-meta .mini:last-child {
        margin-right: 0;
        padding-right: 0;
        border-right: 0;
      }

      .payment-record-compact-meta .mini:last-child strong {
        text-align: right;
      }

      .payment-record-next {
        right: 8px;
      }

      .payment-record-next svg {
        width: 16px;
        height: 16px;
      }

      .payment-record-description,
      .payment-record-card > .customer-payment-request-note,
      .payment-record-card > .payment-verification-note {
        display: none;
      }

      .receipt-form {
        padding: 0 0 calc(8px + env(safe-area-inset-bottom));
      }

      #advisor-payments[data-payment-view="detail"] .payment-workspace {
        padding: 9px;
        background: #f7faff;
      }

      .payment-detail-selector {
        display: flex;
        gap: 5px;
        margin-bottom: 8px;
        overflow-x: auto;
        padding: 5px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
      }

      .payment-detail-selector::-webkit-scrollbar {
        display: none;
      }

      .payment-detail-selector > button {
        min-height: 40px;
        flex: 0 0 auto;
        grid-template-columns: auto auto;
        gap: 5px;
        padding: 5px 8px;
        scroll-snap-align: start;
      }

      .payment-detail-selector > button > svg {
        display: none;
      }

      .payment-detail-selector-icon {
        width: 24px;
        height: 24px;
        border-radius: 7px;
      }

      .payment-detail-selector strong {
        font-size: .7rem;
      }

      .payment-detail-selector small {
        display: none;
      }

      .payment-detail-stage {
        gap: 10px;
        padding: 10px;
      }

      .payment-detail-stage-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }

      .payment-detail-stage-head .btn {
        width: 100%;
      }

      .payment-proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .payment-proof-compare {
        grid-template-columns: minmax(0, 1fr);
      }

      .payment-detail-head {
        align-items: flex-start;
        margin-bottom: 10px;
        padding-bottom: 10px;
      }

      .payment-back-btn {
        width: 44px !important;
        min-width: 44px;
        padding: 9px !important;
      }

      .payment-back-btn span {
        display: none;
      }

      .payment-selected-workflow-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        padding: 8px;
      }

      .payment-selected-workflow-actions:empty {
        display: none;
      }

      .payment-job-done-proof {
        align-items: flex-start;
      }

      .payment-required-checklist {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
      }

      .payment-required-item {
        flex: 1 1 130px;
        justify-content: center;
      }

      #receiptForm .field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      #receiptForm .payment-settlement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #receiptForm .payment-settlement-grid > label:last-child {
        grid-column: 1 / -1;
      }

      #receiptForm label {
        min-width: 0;
      }

      #receiptForm input,
      #receiptForm select,
      #receiptForm textarea {
        min-width: 0;
      }

      .receipt-preview {
        min-height: 54px;
      }

      #receiptForm .actions .btn {
        flex: 1 1 140px;
      }
    }

    @media (max-width: 520px) {
      #receiptForm .field-grid,
      #receiptForm .payment-settlement-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      #receiptForm .payment-settlement-grid > label:last-child {
        grid-column: auto;
      }

      .payment-detail-head {
        padding: 10px;
      }

      .payment-detail-selector {
        margin-bottom: 9px;
      }
    }

    /* offer-management-control-centre-groups-20260904
       Staff follows a clear prepare, build, publish flow; customer offer rendering is unchanged. */
    #offer-management.offer-compact-hybrid > .panel-head .panel-head-actions {
      display: none;
    }

    #offer-management.offer-compact-hybrid > .panel-head {
      padding-bottom: 13px;
    }

    .offer-compact-shell {
      margin: 0 14px 12px;
    }

    .offer-control-overview {
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 15px;
      padding: 18px;
    }

    .offer-control-overview .service-catalogue-compact-intro {
      max-width: none;
      padding: 0 4px 2px;
    }

    .offer-control-overview .service-catalogue-compact-intro p {
      max-width: 980px;
    }

    .offer-control-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 9px;
    }

    .offer-control-summary-item {
      min-width: 0;
      display: grid;
      gap: 3px;
      padding: 11px 13px;
      border: 1px solid #d6e2ef;
      border-radius: 11px;
      background: #fff;
    }

    .offer-control-summary-item span {
      overflow: hidden;
      color: var(--muted);
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .02em;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .offer-control-summary-item strong {
      color: var(--mobil-blue-dark);
      font-size: 1.04rem;
    }

    .offer-control-summary-item.is-visible strong {
      color: #17643d;
    }

    .offer-control-summary-item.is-expired strong {
      color: #7b5260;
    }

    .offer-control-directory .product-catalogue-group-actions > button[data-offer-compact-action="new"] {
      border-color: #b9d1ed;
      background: #f4f8fe;
    }

    #offer-management.offer-compact-hybrid[data-offer-view="overview"] > #offerForm,
    #offer-management.offer-compact-hybrid[data-offer-view="overview"] > #offerList,
    #offer-management.offer-compact-hybrid[data-offer-view="library"] > #offerForm,
    #offer-management.offer-compact-hybrid[data-offer-view="content"] > #offerList,
    #offer-management.offer-compact-hybrid[data-offer-view="publish"] > #offerList,
    #offer-management.offer-compact-hybrid[data-offer-view="content"] [data-offer-editor-section="publish"],
    #offer-management.offer-compact-hybrid[data-offer-view="publish"] [data-offer-editor-section="content"] {
      display: none !important;
    }

    #offer-management.offer-compact-hybrid > #offerForm {
      padding: 0 14px 14px;
    }

    .offer-editor-section {
      display: grid;
      gap: 12px;
      border: 1px solid #d8e2ee;
      border-radius: 13px;
      padding: 13px;
      background: #fff;
    }

    .offer-editor-section-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .offer-editor-section-head h3,
    .offer-editor-section-head p {
      margin: 0;
    }

    .offer-editor-section-head h3 {
      font-size: 1rem;
    }

    .offer-editor-step-actions {
      justify-content: flex-end;
    }

    #offer-management.offer-compact-hybrid > #offerList {
      padding: 0 14px 14px;
      gap: 12px;
    }

    .offer-management-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(410px, 1fr));
      gap: 10px;
    }

    #offer-management .offer-operator-card {
      min-height: 0;
      display: grid;
      grid-template-columns: 126px minmax(0, 1fr);
      align-items: stretch;
    }

    #offer-management .offer-operator-card > img {
      width: 126px;
      height: 100%;
      min-height: 172px;
      max-height: 210px;
      object-fit: cover;
      align-self: stretch;
    }

    #offer-management .offer-operator-card .offer-card-body {
      min-width: 0;
      padding: 11px;
      gap: 7px;
      border-top: 0;
      border-left: 1px solid var(--line);
    }

    #offer-management .offer-operator-card .offer-card-body h3 {
      font-size: 1rem;
      line-height: 1.25;
    }

    #offer-management .offer-operator-card .offer-card-body > p {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size: .8rem;
    }

    #offer-management .offer-operator-card .actions {
      gap: 6px;
    }

    #offer-management .offer-operator-card .actions .btn {
      min-height: 36px;
      padding: 7px 9px;
      font-size: .78rem;
    }

    @media (max-width: 640px) {
      #offer-management.offer-compact-hybrid > .panel-head {
        padding: 12px 12px 10px;
      }

      .offer-compact-shell {
        margin: 0 10px 10px;
      }

      .offer-control-overview {
        padding: 12px;
      }

      .offer-control-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #offer-management.offer-compact-hybrid > #offerForm,
      #offer-management.offer-compact-hybrid > #offerList {
        padding: 0 10px 10px;
      }

      .offer-editor-section {
        padding: 10px;
        gap: 10px;
      }

      .offer-editor-section .field-grid {
        grid-template-columns: 1fr;
        gap: 9px;
      }

      .offer-management-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      #offer-management .offer-operator-card {
        grid-template-columns: 88px minmax(0, 1fr);
      }

      #offer-management .offer-operator-card > img {
        width: 88px;
        min-height: 144px;
        max-height: none;
      }

      #offer-management .offer-operator-card .offer-card-body {
        padding: 9px;
        gap: 6px;
        border-left: 1px solid var(--line);
        border-top: 0;
      }

      #offer-management .offer-operator-card .offer-card-body > strong,
      #offer-management .offer-operator-card .offer-card-body > p,
      #offer-management .offer-operator-card .offer-card-body > .sub:nth-of-type(n+2) {
        display: none;
      }

      #offer-management .offer-operator-card .actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #offer-management .offer-operator-card .actions .btn {
        min-width: 0;
        padding-inline: 6px;
      }

      #offer-management .offer-preview {
        grid-template-columns: 96px minmax(0, 1fr);
        min-height: 132px;
        max-height: 190px;
        overflow: hidden;
      }

      #offer-management .offer-preview > img {
        width: 96px;
        height: 100%;
        min-height: 132px;
        object-fit: cover;
      }

      #offer-management .offer-preview .offer-admin-body {
        padding: 9px;
        border-left: 1px solid var(--line);
        border-top: 0;
        align-content: start;
      }

      #offer-management .offer-preview .offer-admin-body > strong,
      #offer-management .offer-preview .offer-admin-body > p {
        display: none;
      }

      #offer-management .offer-preview .offer-admin-body > .sub {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .offer-editor-step-actions .btn {
        flex: 1 1 145px;
      }
    }

    @media (max-width: 640px) {
      #vehicles.reminder-compact-hybrid .reminder-filter-grid #reminderBranchFilter {
        height: 64px;
        min-height: 64px;
        max-height: 64px;
      }

      #vehicles.reminder-compact-hybrid .reminder-tabs {
        display: flex;
        grid-template-columns: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 7px;
        padding-bottom: 2px;
      }

      #vehicles.reminder-compact-hybrid .reminder-tabs button {
        flex: 0 0 auto;
        width: auto;
        min-height: 36px;
        padding-inline: 11px;
      }
    }

    /* membership-programme-control-centre-groups-20260904
       Campaign staff follow a grouped prepare, deliver, and programme-rules workflow. */
    #seasonal-promotion.membership-compact-hybrid > .panel-head {
      padding-bottom: 13px;
    }

    #seasonal-promotion.membership-compact-hybrid > .panel-head #sendPromotionApiBtn {
      display: none !important;
    }

    .membership-compact-shell {
      margin: 0 14px 12px;
    }

    .membership-control-overview {
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 15px;
      padding: 18px;
    }

    .membership-control-overview .service-catalogue-compact-intro {
      max-width: none;
      padding: 0 4px 2px;
    }

    .membership-control-overview .service-catalogue-compact-intro p {
      max-width: 980px;
    }

    .membership-control-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 9px;
    }

    .membership-control-summary-item {
      min-width: 0;
      display: grid;
      gap: 3px;
      padding: 11px 13px;
      border: 1px solid #d6e2ef;
      border-radius: 11px;
      background: #fff;
    }

    .membership-control-summary-item span {
      overflow: hidden;
      color: var(--muted);
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .02em;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .membership-control-summary-item strong {
      overflow: hidden;
      color: var(--mobil-blue-dark);
      font-size: 1.04rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .membership-control-summary-item.is-ready strong {
      color: #17643d;
    }

    .membership-control-summary-item.is-attention strong {
      color: #965c08;
    }

    #seasonal-promotion[data-membership-control-groups="2"] .membership-control-directory {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #seasonal-promotion[data-membership-compact-context="reports"] [data-membership-admin-target] {
      display: none !important;
    }

    .membership-compact-shell [data-membership-admin-target][hidden] {
      display: none !important;
    }

    .membership-compact-stage {
      display: grid;
      gap: 12px;
      border: 1px solid #d5e1ee;
      border-radius: 13px;
      background: #fff;
      padding: 13px;
    }

    .membership-compact-stage > .membership-compact-stage-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .membership-compact-stage-head h3,
    .membership-compact-stage-head p {
      margin: 0;
    }

    .membership-compact-stage-head p {
      margin-top: 3px;
    }

    .membership-compact-review-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .membership-compact-review-metric {
      min-width: 0;
      display: grid;
      gap: 4px;
      padding: 10px;
      border: 1px solid #dce6f1;
      border-radius: 10px;
      background: #f8fbff;
    }

    .membership-compact-review-metric span {
      color: var(--muted);
      font-size: .72rem;
      font-weight: 800;
    }

    .membership-compact-review-metric strong {
      overflow: hidden;
      color: var(--ink);
      font-size: .88rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .membership-compact-readiness {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid #d7e4f2;
      border-left: 3px solid var(--mobil-blue);
      border-radius: 10px;
      background: #f8fbff;
    }

    .membership-compact-readiness strong,
    .membership-compact-readiness span {
      display: block;
    }

    .membership-compact-readiness span {
      margin-top: 3px;
      color: var(--muted);
      font-size: .78rem;
    }

    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="overview"] > .promotion-builder,
    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="overview"] > #membershipProgrammeAdminPanel,
    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="overview"] > #loyaltyCampaignAdminPanel,
    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="audience"] > #membershipProgrammeAdminPanel,
    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="audience"] > #loyaltyCampaignAdminPanel,
    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="flyer"] > #membershipProgrammeAdminPanel,
    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="flyer"] > #loyaltyCampaignAdminPanel,
    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="review"] > #membershipProgrammeAdminPanel,
    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="review"] > #loyaltyCampaignAdminPanel,
    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="tiers"] > .promotion-builder,
    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="tiers"] > #loyaltyCampaignAdminPanel,
    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="points"] > .promotion-builder,
    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="points"] > #membershipProgrammeAdminPanel {
      display: none !important;
    }

    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="audience"] .promotion-builder > [data-membership-compact-section]:not([data-membership-compact-section="audience"]),
    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="flyer"] .promotion-builder > [data-membership-compact-section]:not([data-membership-compact-section="flyer"]),
    #seasonal-promotion.membership-compact-hybrid[data-membership-compact-view="review"] .promotion-builder > [data-membership-compact-section]:not([data-membership-compact-section="review"]) {
      display: none !important;
    }

    #seasonal-promotion.membership-compact-hybrid > .promotion-builder,
    #seasonal-promotion.membership-compact-hybrid > #membershipProgrammeAdminPanel,
    #seasonal-promotion.membership-compact-hybrid > #loyaltyCampaignAdminPanel {
      margin: 0 14px 14px;
      padding: 0;
      border: 0;
      background: transparent;
    }

    #seasonal-promotion.membership-compact-hybrid > #membershipProgrammeAdminPanel,
    #seasonal-promotion.membership-compact-hybrid > #loyaltyCampaignAdminPanel {
      display: grid;
      gap: 12px;
      padding: 13px;
      border: 1px solid #d5e1ee;
      border-radius: 13px;
      background: #fff;
    }

    @media (max-width: 1180px) {
      .membership-control-directory,
      #seasonal-promotion[data-membership-control-groups="2"] .membership-control-directory {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #seasonal-promotion[data-membership-control-groups="2"] .membership-control-directory {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .membership-compact-shell {
        margin: 0 10px 10px;
      }

      .membership-control-overview {
        padding: 12px;
      }

      .membership-control-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .membership-control-summary-item span {
        min-height: 2.35em;
        line-height: 1.18;
        white-space: normal;
      }

      .membership-control-directory,
      #seasonal-promotion[data-membership-control-groups="2"] .membership-control-directory {
        grid-template-columns: 1fr;
      }

      .membership-compact-shell .service-catalogue-compact-detail-actions {
        grid-template-columns: 1fr;
      }

      #seasonal-promotion.membership-compact-hybrid > .promotion-builder,
      #seasonal-promotion.membership-compact-hybrid > #membershipProgrammeAdminPanel,
      #seasonal-promotion.membership-compact-hybrid > #loyaltyCampaignAdminPanel {
        margin: 0 10px 10px;
      }

      .membership-compact-stage,
      #seasonal-promotion.membership-compact-hybrid > #membershipProgrammeAdminPanel,
      #seasonal-promotion.membership-compact-hybrid > #loyaltyCampaignAdminPanel {
        padding: 10px;
      }

      .membership-compact-review-grid {
        grid-template-columns: 1fr 1fr;
      }

      .membership-compact-readiness,
      .membership-compact-stage > .membership-compact-stage-head {
        grid-template-columns: 1fr;
      }

      #seasonal-promotion.membership-compact-hybrid #promotionBranchFilter {
        height: 68px;
        min-height: 68px;
        max-height: 68px;
      }
    }

    /* backups-compact-hybrid-20260812
       Routine browsing, protected creation, and high-risk restore stay in separate workspaces. */
    #backups.backup-compact-hybrid > .panel-head {
      padding-bottom: 13px;
    }

    #backups.backup-compact-hybrid > .panel-head #createBackupNowBtn,
    #backups.backup-compact-hybrid > .backup-legacy-actions {
      display: none !important;
    }

    .backup-compact-shell {
      margin: 0 14px 12px;
    }

    .backup-compact-shell .service-catalogue-compact-overview {
      grid-template-columns: minmax(210px, .72fr) minmax(0, 2.28fr);
    }

    .backup-compact-shell .service-catalogue-compact-selector {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .backup-create-stage {
      display: none;
    }

    #backups.backup-compact-hybrid[data-backup-compact-view="overview"] > .backup-status-panel,
    #backups.backup-compact-hybrid[data-backup-compact-view="overview"] > .backup-create-stage,
    #backups.backup-compact-hybrid[data-backup-compact-view="overview"] > #backupList,
    #backups.backup-compact-hybrid[data-backup-compact-view="library"] > .backup-create-stage,
    #backups.backup-compact-hybrid[data-backup-compact-view="create"] > #backupList,
    #backups.backup-compact-hybrid[data-backup-compact-view="restore"] > .backup-create-stage {
      display: none !important;
    }

    #backups.backup-compact-hybrid[data-backup-compact-view="create"] > .backup-create-stage {
      display: grid;
    }

    #backups.backup-compact-hybrid[data-backup-compact-view="library"] #backupRestoreWarning,
    #backups.backup-compact-hybrid[data-backup-compact-view="create"] #backupRestoreWarning,
    #backups.backup-compact-hybrid[data-backup-compact-view="library"] .backup-restore-action,
    #backups.backup-compact-hybrid[data-backup-compact-view="restore"] .backup-download-action {
      display: none !important;
    }

    #backups.backup-compact-hybrid > .backup-status-panel,
    #backups.backup-compact-hybrid > .backup-create-stage,
    #backups.backup-compact-hybrid > #backupList {
      margin: 0 14px 12px;
    }

    #backups.backup-compact-hybrid > .backup-status-panel {
      padding: 10px 12px;
      border: 1px solid #d8e4f0;
      border-radius: 11px;
      background: #f8fbff;
    }

    #backups.backup-compact-hybrid > .backup-status-panel #backupRestoreWarning {
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid #f3c7c7;
      font-weight: 800;
    }

    #backups.backup-compact-hybrid > .backup-create-stage {
      grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
      gap: 12px;
      align-items: stretch;
      padding: 13px;
      border: 1px solid #d5e1ee;
      border-radius: 13px;
      background: #fff;
    }

    .backup-create-copy,
    .backup-create-protection {
      display: grid;
      gap: 8px;
      align-content: start;
    }

    .backup-create-copy h3,
    .backup-create-copy p,
    .backup-create-protection strong,
    .backup-create-protection span {
      margin: 0;
    }

    .backup-create-facts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .backup-create-fact {
      display: grid;
      gap: 3px;
      padding: 10px;
      border: 1px solid #dce6f1;
      border-radius: 10px;
      background: #f8fbff;
    }

    .backup-create-fact span,
    .backup-create-protection span {
      color: var(--muted);
      font-size: .74rem;
      line-height: 1.4;
    }

    .backup-create-fact strong {
      color: var(--ink);
      font-size: .84rem;
    }

    .backup-create-protection {
      padding: 12px;
      border: 1px solid #cfe0f3;
      border-left: 3px solid var(--mobil-blue);
      border-radius: 11px;
      background: #f1f7ff;
    }

    #backups.backup-compact-hybrid > #backupList {
      display: grid;
      gap: 8px;
    }

    #backups.backup-compact-hybrid .backup-record-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      margin: 0;
      padding: 11px 12px;
      border-radius: 11px;
      background: #fff;
    }

    #backups.backup-compact-hybrid .backup-record-card > div:first-child {
      min-width: 0;
    }

    #backups.backup-compact-hybrid .backup-record-card > div:first-child > strong,
    #backups.backup-compact-hybrid .backup-record-card > div:first-child > .sub {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #backups.backup-compact-hybrid .backup-record-card .actions {
      flex-wrap: nowrap;
    }

    @media (max-width: 900px) {
      .backup-compact-shell .service-catalogue-compact-overview,
      #backups.backup-compact-hybrid > .backup-create-stage {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .backup-compact-shell,
      #backups.backup-compact-hybrid > .backup-status-panel,
      #backups.backup-compact-hybrid > .backup-create-stage,
      #backups.backup-compact-hybrid > #backupList {
        margin: 0 10px 10px;
      }

      .backup-compact-shell .service-catalogue-compact-selector {
        grid-template-columns: 1fr;
      }

      .backup-compact-shell .service-catalogue-compact-detail-head {
        grid-template-columns: 1fr;
      }

      .backup-compact-shell .service-catalogue-compact-detail-actions,
      .backup-compact-shell .service-catalogue-compact-detail-actions .btn {
        width: 100%;
      }

      #backups.backup-compact-hybrid > .backup-create-stage {
        padding: 10px;
      }

      .backup-create-facts {
        grid-template-columns: 1fr;
      }

      #backups.backup-compact-hybrid .backup-record-card {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
      }

      #backups.backup-compact-hybrid .backup-record-card .actions,
      #backups.backup-compact-hybrid .backup-record-card .actions .btn {
        width: 100%;
      }

      #backups.backup-compact-hybrid .backup-record-card > div:first-child > .sub:nth-of-type(n+4) {
        display: none;
      }
    }

    /* audit-trail-compact-hybrid-20260813
       Overview, filtered activity, and immutable before/after evidence stay in focused views. */
    #audit-trail.audit-trail-compact-hybrid > .panel-head {
      padding-bottom: 13px;
    }

    #audit-trail.audit-trail-compact-hybrid > .panel-head #exportAuditTrailBtn {
      display: none !important;
    }

    .audit-compact-shell {
      margin: 0 14px 12px;
    }

    .audit-compact-shell .service-catalogue-compact-overview {
      grid-template-columns: minmax(220px, .7fr) minmax(0, 2.3fr);
    }

    .audit-compact-shell .service-catalogue-compact-selector {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .audit-compact-selector > button {
      min-height: 78px;
    }

    .audit-compact-selector strong,
    .audit-compact-selector small {
      white-space: normal;
    }

    .audit-compact-filter-panel,
    .audit-compact-records-toolbar,
    .audit-compact-record-list,
    .audit-compact-load-more,
    .audit-compact-record-detail {
      margin: 0 14px 12px;
    }

    .audit-compact-filter-panel {
      padding: 12px;
      border: 1px solid #d5e1ee;
      border-radius: 13px;
      background: #f8fbff;
    }

    .audit-compact-filter-head,
    .audit-compact-records-toolbar {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
    }

    .audit-compact-filter-head {
      margin-bottom: 10px;
    }

    .audit-compact-filter-head h3,
    .audit-compact-filter-head p,
    .audit-compact-records-toolbar p {
      margin: 0;
    }

    .audit-compact-filter-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      padding: 0;
      border: 0;
      background: transparent;
    }

    .audit-compact-filter-grid .audit-compact-search-field {
      grid-column: span 3;
    }

    .audit-compact-records-toolbar {
      padding: 10px 12px;
      border: 1px solid #d8e4f0;
      border-radius: 11px;
      background: #fff;
    }

    .audit-compact-records-toolbar > div {
      min-width: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 5px 10px;
      align-items: baseline;
    }

    .audit-compact-records-toolbar .eyebrow {
      flex-basis: 100%;
      color: var(--mobil-blue);
      font-size: .68rem;
      font-weight: 950;
      letter-spacing: .08em;
    }

    .audit-compact-record-list {
      display: grid;
      gap: 7px;
      padding: 0;
    }

    .audit-compact-record-card {
      width: 100%;
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1.4fr) minmax(190px, .7fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px 11px;
      border: 1px solid #d5e1ee;
      border-radius: 11px;
      background: #fff;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .audit-compact-record-card:hover,
    .audit-compact-record-card:focus-visible {
      border-color: var(--mobil-blue);
      background: #f5f9ff;
      box-shadow: 0 0 0 2px rgba(12, 77, 162, .08);
      outline: none;
    }

    .audit-compact-record-icon {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 10px;
      background: #edf5ff;
      color: var(--mobil-blue);
    }

    .audit-compact-record-icon svg,
    .audit-compact-record-chevron svg {
      width: 17px;
      height: 17px;
    }

    .audit-compact-record-main,
    .audit-compact-record-meta {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .audit-compact-record-main strong,
    .audit-compact-record-main span,
    .audit-compact-record-meta span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .audit-compact-record-main strong {
      font-size: .84rem;
    }

    .audit-compact-record-main span,
    .audit-compact-record-meta span {
      color: var(--muted);
      font-size: .72rem;
    }

    .audit-compact-record-chevron {
      color: var(--mobil-blue);
    }

    .audit-compact-load-more {
      display: flex;
      justify-content: center;
    }

    .audit-compact-record-detail {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid #d5e1ee;
      border-radius: 13px;
      background: #fff;
    }

    .audit-record-detail-title {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      justify-content: space-between;
    }

    .audit-record-detail-title h3,
    .audit-record-detail-title p,
    .audit-record-summary p {
      margin: 0;
    }

    .audit-record-detail-title > div {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .audit-record-facts {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .audit-record-fact,
    .audit-record-summary {
      min-width: 0;
      display: grid;
      gap: 3px;
      padding: 10px;
      border: 1px solid #dce6f1;
      border-radius: 10px;
      background: #f8fbff;
    }

    .audit-record-fact span,
    .audit-evidence-panel span {
      color: var(--muted);
      font-size: .69rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .audit-record-fact strong {
      overflow-wrap: anywhere;
      font-size: .79rem;
    }

    .audit-record-evidence {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .audit-evidence-panel {
      min-width: 0;
      display: grid;
      gap: 7px;
      padding: 11px;
      border: 1px solid #d8e4f0;
      border-radius: 11px;
      background: #fbfdff;
    }

    .audit-evidence-panel.after {
      border-color: #bcd8c9;
      background: #f5fcf8;
    }

    .audit-evidence-panel pre,
    .audit-record-technical pre {
      max-height: 360px;
      margin: 0;
      padding: 9px;
      overflow: auto;
      border-radius: 8px;
      background: #eef3f8;
      color: #26384d;
      font: 500 .72rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .audit-record-technical {
      padding: 9px 10px;
      border: 1px solid #dce6f1;
      border-radius: 10px;
      background: #f8fbff;
    }

    .audit-record-technical summary {
      cursor: pointer;
      font-weight: 850;
    }

    #audit-trail[data-audit-compact-view="overview"] > .audit-compact-filter-panel,
    #audit-trail[data-audit-compact-view="overview"] > .audit-compact-records-toolbar,
    #audit-trail[data-audit-compact-view="overview"] > .audit-compact-record-list,
    #audit-trail[data-audit-compact-view="overview"] > .audit-compact-load-more,
    #audit-trail[data-audit-compact-view="overview"] > .audit-compact-record-detail,
    #audit-trail[data-audit-compact-view="records"] > .audit-compact-record-detail,
    #audit-trail[data-audit-compact-view="detail"] > .audit-compact-filter-panel,
    #audit-trail[data-audit-compact-view="detail"] > .audit-compact-records-toolbar,
    #audit-trail[data-audit-compact-view="detail"] > .audit-compact-record-list,
    #audit-trail[data-audit-compact-view="detail"] > .audit-compact-load-more {
      display: none !important;
    }

    @media (max-width: 1180px) {
      .audit-compact-shell .service-catalogue-compact-overview {
        grid-template-columns: 1fr;
      }

      .audit-compact-shell .service-catalogue-compact-selector {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .audit-compact-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .audit-record-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .audit-compact-shell,
      .audit-compact-filter-panel,
      .audit-compact-records-toolbar,
      .audit-compact-record-list,
      .audit-compact-load-more,
      .audit-compact-record-detail {
        margin: 0 10px 10px;
      }

      .audit-compact-shell .service-catalogue-compact-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .audit-compact-selector > button {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 74px;
      }

      .audit-compact-selector .service-catalogue-compact-next {
        grid-column: 2;
        justify-self: start;
      }

      .audit-compact-filter-head,
      .audit-compact-records-toolbar,
      .audit-record-detail-title {
        align-items: stretch;
        flex-direction: column;
      }

      .audit-compact-filter-grid,
      .audit-record-facts,
      .audit-record-evidence {
        grid-template-columns: 1fr;
      }

      .audit-compact-filter-grid .audit-compact-search-field {
        grid-column: auto;
      }

      .audit-compact-record-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
      }

      .audit-compact-record-meta {
        grid-column: 2 / 3;
      }

      .audit-compact-record-chevron {
        grid-column: 3;
        grid-row: 1 / span 2;
      }

      .audit-record-detail-title .badge,
      .audit-compact-filter-head .btn,
      .audit-compact-records-toolbar .btn {
        width: 100%;
      }
    }

    /* recycle-bin-compact-hybrid-20260813
       Recovery categories, deleted records, and one focused record detail stay in separate views. */
    #recycle-bin.recycle-bin-compact-hybrid > .panel-head #refreshRecycleBinBtn {
      display: none !important;
    }

    .recycle-compact-shell {
      margin: 0 14px 12px;
    }

    .recycle-compact-shell .service-catalogue-compact-overview {
      grid-template-columns: minmax(220px, .65fr) minmax(0, 2.35fr);
    }

    .recycle-compact-shell .service-catalogue-compact-selector {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .recycle-compact-selector > button {
      min-height: 80px;
    }

    .recycle-compact-selector strong,
    .recycle-compact-selector small {
      white-space: normal;
    }

    .recycle-compact-filter-panel,
    .recycle-compact-records-toolbar,
    .recycle-compact-record-list,
    .recycle-compact-load-more,
    .recycle-compact-record-detail {
      margin: 0 14px 12px;
    }

    .recycle-record-reason {
      min-width: 0;
      display: grid;
      gap: 4px;
      padding: 11px;
      border: 1px solid #f0d7a5;
      border-radius: 11px;
      background: #fffaf0;
    }

    .recycle-record-reason span,
    .recycle-record-preview > span {
      color: var(--muted);
      font-size: .69rem;
      font-weight: 850;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .recycle-record-reason p {
      margin: 0;
      overflow-wrap: anywhere;
    }

    .recycle-record-preview {
      display: grid;
      gap: 8px;
    }

    .recycle-record-preview-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .recycle-record-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
      padding-top: 2px;
    }

    .recycle-record-actions .btn {
      min-height: 42px;
    }

    #recycle-bin[data-recycle-compact-view="overview"] > .recycle-compact-filter-panel,
    #recycle-bin[data-recycle-compact-view="overview"] > .recycle-compact-records-toolbar,
    #recycle-bin[data-recycle-compact-view="overview"] > .recycle-compact-record-list,
    #recycle-bin[data-recycle-compact-view="overview"] > .recycle-compact-load-more,
    #recycle-bin[data-recycle-compact-view="overview"] > .recycle-compact-record-detail,
    #recycle-bin[data-recycle-compact-view="records"] > .recycle-compact-record-detail,
    #recycle-bin[data-recycle-compact-view="detail"] > .recycle-compact-filter-panel,
    #recycle-bin[data-recycle-compact-view="detail"] > .recycle-compact-records-toolbar,
    #recycle-bin[data-recycle-compact-view="detail"] > .recycle-compact-record-list,
    #recycle-bin[data-recycle-compact-view="detail"] > .recycle-compact-load-more {
      display: none !important;
    }

    @media (max-width: 1280px) {
      .recycle-compact-shell .service-catalogue-compact-overview {
        grid-template-columns: 1fr;
      }

      .recycle-compact-shell .service-catalogue-compact-selector {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .recycle-record-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .recycle-compact-shell,
      .recycle-compact-filter-panel,
      .recycle-compact-records-toolbar,
      .recycle-compact-record-list,
      .recycle-compact-load-more,
      .recycle-compact-record-detail {
        margin: 0 10px 10px;
      }

      .recycle-compact-shell .service-catalogue-compact-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .recycle-record-preview-grid {
        grid-template-columns: 1fr;
      }

      .recycle-compact-selector > button {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 76px;
      }

      .recycle-compact-selector .service-catalogue-compact-next {
        grid-column: 2;
        justify-self: start;
      }

      .recycle-record-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .recycle-record-actions .btn {
        width: 100%;
        min-height: 44px;
      }
    }

    /* service-record-history-compact-hybrid-20260812
       A selected visit opens one focused overview, work, update, or photo section at a time. */
    .record-summary-panel.record-summary-compact-hybrid {
      padding: 0;
      gap: 0;
      overflow: hidden;
      border-radius: 13px;
      background: #f8fbff;
    }

    .record-summary-compact-hybrid > .record-summary-head {
      padding: 10px 12px 8px;
      background: #fff;
    }

    .record-summary-compact-hybrid > .record-summary-meta {
      padding: 0 12px 9px;
      background: #fff;
    }

    .record-summary-compact-hybrid > .record-work-hint {
      margin: 0 12px 10px;
      padding: 7px 9px;
    }

    .record-summary-compact-hybrid > .record-summary-history {
      padding: 11px 12px 12px;
      border-top: 1px solid #dce6f1;
      background: #f8fbff;
    }

    .record-summary-compact-hybrid .mechanic-history-head strong {
      color: #102033;
      font-size: .9rem;
    }

    .record-summary-compact-hybrid .mechanic-history-head .sub {
      margin-top: 2px;
      font-size: .73rem;
    }

    .record-summary-compact-hybrid .mechanic-history-dates {
      padding-bottom: 1px;
    }

    .record-summary-compact-hybrid .mechanic-history-date {
      min-height: 32px;
      padding: 6px 10px;
    }

    .record-summary-compact-hybrid .mechanic-history-detail {
      gap: 0;
      padding: 0;
      overflow: hidden;
      border-radius: 12px;
      background: #fff;
    }

    .record-summary-compact-hybrid .mechanic-history-detail-head {
      padding: 9px 11px;
      border-bottom: 1px solid #e1e9f2;
      background: #fbfdff;
    }

    .record-history-compact-selector {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
      padding: 9px 10px;
      border-bottom: 1px solid #e1e9f2;
      background: #f8fbff;
    }

    .record-history-compact-selector button {
      min-width: 0;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      min-height: 52px;
      padding: 7px 8px;
      border: 1px solid #d5e1ee;
      border-radius: 10px;
      background: #fff;
      color: #17314f;
      text-align: left;
      cursor: pointer;
    }

    .record-history-compact-selector button:hover,
    .record-history-compact-selector button[aria-selected="true"] {
      border-color: var(--mobil-blue);
      background: #eef5ff;
      box-shadow: 0 0 0 2px rgba(12, 77, 162, .06);
    }

    .record-history-compact-selector button > i:first-child {
      width: 30px;
      height: 30px;
      padding: 7px;
      border-radius: 9px;
      background: #edf5ff;
      color: var(--mobil-blue);
    }

    .record-history-compact-selector button > span {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .record-history-compact-selector strong,
    .record-history-compact-selector small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .record-history-compact-selector strong {
      font-size: .78rem;
    }

    .record-history-compact-selector small {
      color: var(--muted);
      font-size: .66rem;
    }

    .record-history-compact-selector button > i:last-child {
      width: 15px;
      height: 15px;
      color: var(--mobil-blue);
    }

    .record-history-compact-section {
      display: grid;
      gap: 9px;
      padding: 10px;
    }

    .record-history-compact-section[hidden] {
      display: none !important;
    }

    .record-history-compact-section .mechanic-history-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .record-history-empty {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      min-height: 54px;
      padding: 10px;
      border: 1px dashed #cbd9e7;
      border-radius: 9px;
      background: #fbfdff;
      color: #587087;
      font-size: .78rem;
      font-weight: 750;
    }

    .record-history-empty svg {
      color: var(--mobil-blue);
    }

    .record-history-update-list {
      display: grid;
      gap: 6px;
    }

    .record-history-update-row {
      display: grid;
      grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
      gap: 10px;
      padding: 7px 8px;
      border: 1px solid #e1e9f2;
      border-radius: 8px;
      background: #fbfdff;
      color: #506179;
      font-size: .76rem;
      line-height: 1.35;
    }

    .record-history-update-row time {
      color: #1f4f82;
      font-weight: 850;
      white-space: nowrap;
    }

    .record-summary-compact-hybrid .mechanic-history-actions {
      padding: 0 10px 10px;
    }

    @media (max-width: 820px) {
      .record-history-compact-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .record-history-compact-section .mechanic-history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .record-summary-panel.record-summary-compact-hybrid {
        margin-top: 8px;
      }

      .record-summary-compact-hybrid > .record-summary-head {
        padding: 9px 10px 7px;
      }

      .record-summary-compact-hybrid > .record-summary-meta {
        padding: 0 10px 8px;
      }

      .record-summary-compact-hybrid > .record-work-hint {
        margin: 0 10px 9px;
      }

      .record-summary-compact-hybrid > .record-summary-history {
        padding: 9px 10px 10px;
      }

      .record-history-compact-selector {
        gap: 6px;
        padding: 8px;
      }

      .record-history-compact-selector button {
        grid-template-columns: 28px minmax(0, 1fr);
        min-height: 48px;
        padding: 6px 7px;
      }

      .record-history-compact-selector button > i:last-child {
        display: none;
      }

      .record-history-compact-selector button > i:first-child {
        width: 28px;
        height: 28px;
        padding: 6px;
      }

      .record-history-compact-section {
        padding: 8px;
      }

      .record-history-update-row {
        grid-template-columns: 1fr;
        gap: 3px;
      }

      .record-summary-compact-hybrid .mechanic-history-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    /* global-data-loader-visible-elapsed-20260813:
       keep required-data progress and elapsed time visible until the basic dataset is usable. */
    .crm-page-loader {
      position: fixed;
      left: 50%;
      bottom: max(18px, env(safe-area-inset-bottom, 0px));
      z-index: 2147483000;
      width: min(344px, calc(100vw - 32px));
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px 10px;
      padding: 9px 11px 8px;
      border: 1px solid #b8d1ee;
      border-radius: 12px;
      background: rgba(255, 255, 255, .97);
      color: #132238;
      box-shadow: 0 12px 32px rgba(20, 54, 91, .2);
      pointer-events: none;
      transform: translateX(-50%);
      transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
      backdrop-filter: blur(10px);
    }

    /* startup-login-gate-20260826:
       Do not reveal the login form, then cover it with a second loading message.
       The session check owns the first paint; the login form appears only after it
       has confirmed there is no valid signed-in workspace. */
    body.crm-startup-pending {
      overflow: hidden;
    }
    .mccc-customer-boot-brand { display: none; }

    body.crm-startup-pending::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 2147482999;
      background:
        linear-gradient(112deg, rgba(3, 24, 38, .94), rgba(6, 37, 50, .84) 52%, rgba(8, 33, 43, .72)),
        url("/login-workshop-background-20261015.webp?v=customer-login-speed-20261015-1") center / cover no-repeat;
    }

    /* Match the approved phone login from the first painted frame. The startup
       gate must not flash the retired cropped/wide workshop treatment before
       the full mobile poster becomes interactive. */
    @media (max-width: 640px) {
      body.crm-startup-pending::before {
        background: #fff url("/login-mobile-background-20261015.webp?v=customer-login-speed-20261015-1") center top / 100% auto no-repeat;
      }
      /* Customer routes use the current road and brand during secure startup. */
      html.mccc-customer-boot:not(.mccc-customer-login-entry):not(.mccc-customer-welcome-entry) body.crm-startup-pending::before {
        background:
          url("/customer-login-city-road-20261015.webp?v=customer-login-speed-20261015-1") center top / 100% auto no-repeat,
          linear-gradient(180deg, #dceefe 0%, #f9fcff 48%, #fff 100%);
      }
      html.mccc-customer-boot:not(.mccc-customer-login-entry):not(.mccc-customer-welcome-entry) body.crm-startup-pending .mccc-customer-boot-brand {
        display: grid;
        position: fixed;
        z-index: 2147483000;
        top: max(20px, env(safe-area-inset-top, 0px));
        left: 20px;
        gap: 2px;
        color: #123e91;
        pointer-events: none;
      }
      .mccc-customer-boot-brand strong { font-size: clamp(25px, 7vw, 30px); line-height: 1; letter-spacing: -.055em; white-space: nowrap; }
      .mccc-customer-boot-brand .mccc-boot-red { color: #ed1b2f; }
      .mccc-customer-boot-brand small { color: #425778; font-size: 12px; line-height: 1.25; }
    }

    /* Public welcome and focused login use the approved wordmark, not a poster,
       while the independent secure-session startup gate remains in control. */
    html.mccc-customer-login-entry body.crm-startup-pending::before,
    html.mccc-customer-welcome-entry body.crm-startup-pending::before {
      background: #fff url("/assets/mobil-car-care-official-wordmark.png") center max(22px, env(safe-area-inset-top, 0px)) / min(240px, calc(100vw - 48px)) auto no-repeat;
    }
    html.mccc-customer-login-entry body.crm-startup-pending .mccc-customer-boot-brand,
    html.mccc-customer-welcome-entry body.crm-startup-pending .mccc-customer-boot-brand {
      display: none;
    }

    body.crm-startup-pending .crm-page-loader {
      bottom: 50%;
      z-index: 2147483000;
      transform: translate(-50%, 50%);
    }

    body.crm-startup-pending .crm-page-loader.is-leaving {
      transform: translate(-50%, calc(50% + 10px)) scale(.97);
    }

    .crm-page-loader[hidden] {
      display: none !important;
    }

    .crm-page-loader.is-leaving {
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, 10px) scale(.97);
    }

    .crm-page-loader-icon {
      position: relative;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 10px;
      background: #e8f2ff;
      color: #0754a6;
    }

    .crm-page-loader-icon svg {
      width: 18px;
      height: 18px;
      animation: crm-page-loader-float 1.1s ease-in-out infinite;
    }

    .crm-page-loader-icon::after {
      content: "";
      position: absolute;
      left: 4px;
      bottom: 3px;
      width: 6px;
      height: 3px;
      border-radius: 999px;
      background: #e21b2d;
      box-shadow: 0 0 0 2px rgba(226, 27, 45, .12);
      animation: crm-page-loader-move 1.2s ease-in-out infinite;
    }

    .crm-page-loader-copy {
      min-width: 0;
      display: grid;
      gap: 1px;
    }

    .crm-page-loader-copy strong,
    .crm-page-loader-copy small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .crm-page-loader-copy strong {
      font-size: .78rem;
      line-height: 1.15;
    }

    .crm-page-loader-copy small {
      color: #57708c;
      font-size: .66rem;
      line-height: 1.2;
    }

    .crm-page-loader-percent {
      min-width: 36px;
      color: #0754a6;
      font-size: .8rem;
      font-variant-numeric: tabular-nums;
      text-align: right;
    }

    .crm-page-loader-status {
      min-width: 68px;
      display: grid;
      justify-items: end;
      gap: 2px;
    }

    .crm-page-loader-elapsed {
      color: #526a84;
      font-size: .63rem;
      font-variant-numeric: tabular-nums;
      font-weight: 750;
      line-height: 1.1;
      white-space: nowrap;
    }

    .crm-page-loader-track {
      grid-column: 1 / -1;
      height: 3px;
      overflow: hidden;
      border-radius: 999px;
      background: #e3ebf4;
    }

    .crm-page-loader-bar {
      display: block;
      width: 7%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #0754a6, #1477dc);
      transition: width .28s ease;
    }

    .crm-page-loader[data-state="ready"] .crm-page-loader-icon {
      background: #e5f6eb;
      color: #14753b;
    }

    .crm-page-loader[data-state="warning"] {
      border-color: #efd19a;
    }

    .crm-page-loader[data-state="warning"] .crm-page-loader-icon {
      background: #fff3da;
      color: #8b5a00;
    }

    @keyframes crm-page-loader-float {
      0%, 100% { transform: translateY(1px) rotate(-4deg); }
      50% { transform: translateY(-2px) rotate(4deg); }
    }

    @keyframes crm-page-loader-move {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(20px); }
    }

    @media (max-width: 900px) {
      .crm-page-loader {
        bottom: calc(82px + env(safe-area-inset-bottom, 0px));
      }

      body.locked .crm-page-loader {
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
      }
    }

    @media (max-width: 720px) {
      .crm-page-loader {
        width: min(330px, calc(100vw - 20px));
        padding: 8px 10px 7px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .crm-page-loader-icon svg,
      .crm-page-loader-icon::after {
        animation: none;
      }
    }

    /* customer-loyalty-compact-hybrid-20260813
       Four always-visible KPI selectors with one focused loyalty section. */
    .loyalty-customer-focus-strip {
      display: none;
    }

    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > .panel-head {
      display: none;
    }

    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > #loyaltySummaryCards {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 9px;
      padding: 12px;
      border-bottom: 1px solid #dbe5ef;
      background: #fff;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-kpi {
      position: relative;
      min-width: 0;
      min-height: 74px;
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr) 16px;
      gap: 8px;
      align-items: center;
      padding: 10px;
      border: 1px solid #d5e0ec;
      border-radius: 13px;
      background: #fff;
      color: #223a54;
      text-align: left;
      font: inherit;
      box-shadow: none;
      cursor: pointer;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-kpi:hover,
    body.customer-app-mode #loyalty-program .loyalty-customer-kpi:focus-visible {
      border-color: #69a8ea;
      background: #f7fbff;
      outline: 2px solid rgba(13, 87, 166, .12);
      outline-offset: 1px;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-kpi.is-selected {
      border-color: #0d63b8;
      background: #eaf4ff;
      box-shadow: inset 0 0 0 1px rgba(13, 99, 184, .12);
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-kpi-icon {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: #eef5ff;
      color: #0d57a6;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-kpi.is-selected .loyalty-customer-kpi-icon {
      background: #0d57a6;
      color: #fff;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-kpi-icon svg,
    body.customer-app-mode #loyalty-program .loyalty-customer-kpi-open svg {
      width: 17px;
      height: 17px;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-kpi-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-kpi-copy > span {
      overflow: hidden;
      color: #61758a;
      font-size: .69rem;
      font-weight: 800;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-kpi-copy > strong {
      overflow: hidden;
      color: #0b2239;
      font-size: 1rem;
      line-height: 1.08;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-kpi-open {
      display: inline-flex;
      color: #0d57a6;
    }

    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > .loyalty-customer-focus-strip {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 10px 12px 0;
      padding: 9px 11px;
      border: 1px solid #d5e2ef;
      border-radius: 12px;
      background: #f7fbff;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-focus-strip > div {
      min-width: 0;
      display: flex;
      align-items: baseline;
      gap: 7px;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-focus-strip span {
      color: #0d57a6;
      font-size: .62rem;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-focus-strip strong {
      overflow: hidden;
      color: #173552;
      font-size: .84rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-focus-strip small {
      overflow: hidden;
      color: #66798e;
      font-size: .68rem;
      text-align: right;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > #loyaltyCustomerBalanceCard,
    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > #loyaltyCartPanel,
    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > .product-catalogue-list,
    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > #loyaltyRedemptionPanel {
      display: none;
    }

    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-customer-loyalty-view="points"] > #loyaltyCustomerBalanceCard,
    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-customer-loyalty-view="cart"] > #loyaltyCartPanel,
    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-customer-loyalty-view="rewards"] > .product-catalogue-list,
    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-customer-loyalty-view="claims"] > #loyaltyRedemptionPanel {
      display: grid;
    }

    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > #loyaltyCustomerBalanceCard,
    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > #loyaltyCartPanel,
    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > #loyaltyRedemptionPanel {
      gap: 10px;
      margin: 10px 12px 12px;
      padding: 12px;
    }

    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > .product-catalogue-list {
      gap: 10px;
      padding: 10px 12px 12px;
    }

    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] .loyalty-filter-bar,
    body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] #loyaltyCustomerSummary {
      display: none;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-points-source {
      grid-column: 1 / -1;
      display: grid;
      gap: 3px;
      padding: 9px 10px;
      border: 1px solid #d7e4f1;
      border-radius: 10px;
      background: #eef6ff;
      color: #496985;
      font-size: .69rem;
      line-height: 1.35;
    }

    body.customer-app-mode #loyalty-program .loyalty-customer-points-source strong {
      color: #174f8d;
      font-size: .74rem;
    }

    @media (max-width: 720px) {
      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > #loyaltySummaryCards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 9px 10px;
        border: 1px solid #d9e3ed;
        border-radius: 14px;
      }

      body.customer-app-mode #loyalty-program .loyalty-customer-kpi {
        min-height: 66px;
        grid-template-columns: 29px minmax(0, 1fr) 14px;
        gap: 7px;
        padding: 8px;
        border-radius: 11px;
      }

      body.customer-app-mode #loyalty-program .loyalty-customer-kpi-icon {
        width: 29px;
        height: 29px;
        border-radius: 9px;
      }

      body.customer-app-mode #loyalty-program .loyalty-customer-kpi-copy > span {
        font-size: .64rem;
        white-space: normal;
      }

      body.customer-app-mode #loyalty-program .loyalty-customer-kpi-copy > strong {
        font-size: .92rem;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > .loyalty-customer-focus-strip {
        align-items: flex-start;
        margin: 8px 0 0;
        padding: 8px 9px;
        border-radius: 10px;
      }

      body.customer-app-mode #loyalty-program .loyalty-customer-focus-strip > div {
        display: grid;
        gap: 1px;
      }

      body.customer-app-mode #loyalty-program .loyalty-customer-focus-strip small {
        max-width: 46%;
        line-height: 1.25;
        white-space: normal;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > #loyaltyCustomerBalanceCard,
      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > #loyaltyCartPanel,
      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > #loyaltyRedemptionPanel {
        margin: 8px 0 0;
        padding: 10px;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > .product-catalogue-list {
        padding: 8px 0 0;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-view="points"] #loyaltyCustomerBalance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 0;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-view="points"] #loyaltyCustomerBalance .summary-card {
        min-height: 55px;
        padding: 7px 8px;
      }

      body.customer-app-mode #loyalty-program .loyalty-cart-row {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 9px;
      }

      body.customer-app-mode #loyalty-program .loyalty-cart-row .btn {
        width: auto;
        min-height: 34px;
        padding: 6px 9px;
      }

      body.customer-app-mode #loyalty-program .loyalty-cart-checkout {
        grid-template-columns: 1fr;
      }

      body.customer-app-mode #loyalty-program .loyalty-cart-checkout .btn {
        width: 100%;
      }
    }

    /* vehicles-compact-hybrid-drilldown-20260813
       Vehicle KPIs stay visible; one selected KPI and one expanded record at a time. */
    #vehicles.vehicle-compact-hybrid > .reminder-compact-shell,
    #vehicles.vehicle-compact-hybrid > .reminder-campaign-report,
    #vehicles.vehicle-compact-hybrid > .reminder-report-detail,
    #vehicles.vehicle-compact-hybrid > .reminder-workflow,
    #vehicles.vehicle-compact-hybrid > .reminder-followup {
      display: none !important;
    }

    #vehicles.vehicle-compact-hybrid > .panel-head {
      padding: 12px 16px 9px;
    }

    .vehicle-compact-workspace {
      margin: 0 14px;
      padding: 12px;
      border: 1px solid #d5e2f1;
      border-radius: 14px;
      background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
      box-shadow: 0 8px 22px rgba(12, 77, 162, .05);
    }

    .vehicle-kpi-selector {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
    }

    .vehicle-kpi-card {
      min-width: 0;
      min-height: 76px;
      padding: 9px;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) 14px;
      gap: 7px;
      align-items: center;
      border: 1px solid #d5e2f1;
      border-radius: 12px;
      background: #fff;
      color: #18334f;
      text-align: left;
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .vehicle-kpi-card:hover {
      border-color: #75a9ea;
      transform: translateY(-1px);
    }

    .vehicle-kpi-card.active {
      border-color: var(--mobil-blue);
      background: #eaf3ff;
      box-shadow: 0 0 0 1px rgba(12, 77, 162, .12), 0 7px 16px rgba(12, 77, 162, .08);
    }

    .vehicle-kpi-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: #edf4fe;
      color: var(--mobil-blue);
    }

    .vehicle-kpi-icon svg {
      width: 18px;
      height: 18px;
    }

    .vehicle-kpi-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .vehicle-kpi-copy > span {
      min-height: 2.15em;
      color: #526985;
      font-size: .68rem;
      font-weight: 760;
      line-height: 1.08;
    }

    .vehicle-kpi-copy > strong {
      color: var(--ink);
      font-size: 1.02rem;
      line-height: 1;
    }

    .vehicle-kpi-open {
      width: 14px;
      color: #7890aa;
    }

    .vehicle-kpi-card.active .vehicle-kpi-open {
      color: var(--mobil-blue);
    }

    .vehicle-focus-strip {
      margin-top: 9px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid #dce6f2;
      border-radius: 10px;
      background: #fff;
    }

    .vehicle-focus-strip > div {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    .vehicle-focus-strip span {
      color: var(--mobil-blue);
      font-size: .62rem;
      font-weight: 850;
      letter-spacing: .08em;
    }

    .vehicle-focus-strip strong {
      font-size: .88rem;
    }

    .vehicle-focus-strip small {
      max-width: 52%;
      color: #5d7189;
      font-size: .72rem;
      text-align: right;
    }

    .vehicle-compact-toolbar {
      margin-top: 9px;
      display: grid;
      grid-template-columns: minmax(240px, 1.5fr) minmax(190px, .7fr) minmax(150px, .5fr) auto;
      gap: 8px;
      align-items: end;
    }

    .vehicle-compact-toolbar label {
      min-width: 0;
      display: grid;
      gap: 4px;
      color: #526985;
      font-size: .68rem;
      font-weight: 760;
    }

    .vehicle-compact-toolbar .search,
    .vehicle-compact-toolbar input,
    .vehicle-compact-toolbar select,
    .vehicle-compact-toolbar .btn {
      min-height: 38px;
    }

    .vehicle-compact-toolbar input,
    .vehicle-compact-toolbar select {
      padding: 7px 9px;
      font-size: .78rem;
    }

    .vehicle-compact-toolbar .search input {
      padding-left: 36px;
    }

    .vehicle-compact-toolbar .btn {
      width: auto;
      padding: 7px 11px;
    }

    .vehicle-compact-list-summary {
      margin-top: 8px;
      color: #647790;
      font-size: .72rem;
    }

    .vehicle-compact-list-summary strong {
      color: var(--ink);
    }

    #vehicles.vehicle-compact-hybrid > #vehicleList {
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 8px;
      padding: 8px 14px 14px;
    }

    #vehicles.vehicle-compact-hybrid .vehicle-compact {
      min-height: 174px;
      padding: 8px;
      border-radius: 11px;
      box-shadow: none;
    }

    #vehicles.vehicle-compact-hybrid .vehicle-compact:hover {
      border-color: #91b8e9;
      box-shadow: 0 7px 17px rgba(12, 77, 162, .07);
    }

    #vehicles.vehicle-compact-hybrid .vehicle-compact.expanded {
      grid-column: 1 / -1;
      border-color: var(--mobil-blue);
      box-shadow: 0 0 0 1px rgba(12, 77, 162, .1), 0 10px 24px rgba(12, 77, 162, .08);
    }

    #vehicles.vehicle-compact-hybrid .vehicle-compact:not(.expanded) .vehicle-compact-actions .actions {
      display: none;
    }

    #vehicles.vehicle-compact-hybrid .vehicle-compact.expanded .vehicle-detail-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #vehicles.vehicle-compact-hybrid .vehicle-detail-toggle {
      color: var(--mobil-blue-dark);
      font-weight: 780;
    }

    @media (max-width: 1180px) {
      .vehicle-kpi-selector {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .vehicle-compact-toolbar {
        grid-template-columns: minmax(220px, 1fr) minmax(180px, .7fr) minmax(150px, .55fr) auto;
      }
    }

    @media (max-width: 700px) {
      #vehicles.vehicle-compact-hybrid > .panel-head {
        display: none;
      }

      .vehicle-compact-workspace {
        margin: 8px 8px 0;
        padding: 8px;
        border-radius: 12px;
      }

      .vehicle-kpi-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }

      .vehicle-kpi-card {
        min-height: 68px;
        grid-template-columns: 29px minmax(0, 1fr) 12px;
        gap: 6px;
        padding: 7px;
        border-radius: 10px;
      }

      .vehicle-kpi-icon {
        width: 29px;
        height: 29px;
        border-radius: 8px;
      }

      .vehicle-kpi-icon svg {
        width: 16px;
        height: 16px;
      }

      .vehicle-kpi-copy > span {
        min-height: 2.1em;
        font-size: .62rem;
      }

      .vehicle-kpi-copy > strong {
        font-size: .9rem;
      }

      .vehicle-focus-strip {
        align-items: flex-start;
        margin-top: 7px;
        padding: 7px 8px;
      }

      .vehicle-focus-strip > div {
        display: grid;
        gap: 1px;
      }

      .vehicle-focus-strip small {
        max-width: 48%;
        font-size: .65rem;
        line-height: 1.22;
      }

      .vehicle-compact-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }

      .vehicle-compact-toolbar .search {
        grid-column: 1 / -1;
      }

      .vehicle-compact-toolbar .btn {
        width: 100%;
      }

      .vehicle-compact-list-summary {
        line-height: 1.25;
      }

      #vehicles.vehicle-compact-hybrid > #vehicleList {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 7px 8px calc(90px + env(safe-area-inset-bottom));
      }

      #vehicles.vehicle-compact-hybrid .vehicle-compact {
        min-height: 0;
      }

      #vehicles.vehicle-compact-hybrid .vehicle-compact .vehicle-top {
        align-items: center;
        flex-direction: row;
      }

      #vehicles.vehicle-compact-hybrid .vehicle-compact .vehicle-photo {
        width: 72px;
        height: 48px;
      }

      #vehicles.vehicle-compact-hybrid .vehicle-compact-actions {
        align-items: center;
        flex-direction: row;
      }

      #vehicles.vehicle-compact-hybrid .vehicle-compact:not(.expanded) .vehicle-detail-toggle {
        min-height: 36px;
      }

      #vehicles.vehicle-compact-hybrid .vehicle-compact.expanded .vehicle-compact-actions {
        align-items: stretch;
        flex-direction: column;
      }

      #vehicles.vehicle-compact-hybrid .vehicle-compact.expanded .vehicle-compact-actions .actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #vehicles.vehicle-compact-hybrid .vehicle-compact.expanded .vehicle-compact-actions .btn,
      #vehicles.vehicle-compact-hybrid .vehicle-compact.expanded .vehicle-compact-actions .badge {
        width: 100%;
        min-height: 38px;
      }

      #vehicles.vehicle-compact-hybrid .vehicle-compact.expanded .vehicle-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    /* loyalty-mobile-list-20260826
       Keep the customer reward catalogue easy to scan on a phone: one
       full-width reward per row, with the photo and short facts visible.
       The detailed gallery, availability and checkout remain in the selected
       reward view rather than competing with the catalogue. */
    @media (max-width: 720px) {
      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > #loyaltySummaryCards {
        gap: 6px;
        padding: 8px;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] .loyalty-customer-kpi {
        min-height: 56px;
        grid-template-columns: 25px minmax(0, 1fr) 12px;
        gap: 6px;
        padding: 7px;
        border-radius: 10px;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] .loyalty-customer-kpi-icon {
        width: 25px;
        height: 25px;
        border-radius: 8px;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] .loyalty-customer-kpi-icon svg,
      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] .loyalty-customer-kpi-open svg {
        width: 15px;
        height: 15px;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] .loyalty-customer-kpi-copy {
        gap: 1px;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] .loyalty-customer-kpi-copy > span {
        font-size: .6rem;
        line-height: 1.05;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] .loyalty-customer-kpi-copy > strong {
        font-size: .88rem;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] > .loyalty-customer-focus-strip {
        margin-top: 7px;
        padding: 7px 9px;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"] .loyalty-customer-focus-strip span {
        display: none;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] > .product-catalogue-list {
        padding: 8px 0 0;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] #loyaltyRewardList {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] .loyalty-reward-card {
        position: relative;
        grid-template-columns: 108px minmax(0, 1fr);
        min-height: 124px;
        overflow: hidden;
        border-radius: 14px;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] .loyalty-member-card-media {
        grid-column: 1;
        grid-row: 1;
        align-self: stretch;
        width: 108px;
        display: grid;
        place-items: center;
        border-right: 1px solid #e0e8f0;
        background: #fff;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] .loyalty-member-card-media > img {
        width: 100%;
        height: 108px;
        min-height: 0;
        aspect-ratio: 1;
        padding: 9px;
        object-fit: contain;
        background: #fff;
        border: 0;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] .loyalty-reward-body {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        align-content: center;
        gap: 5px;
        padding: 10px 40px 10px 12px;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] .loyalty-reward-body h3 {
        min-height: 0;
        margin: 0;
        font-size: .96rem;
        line-height: 1.2;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] .loyalty-reward-body > .loyalty-reward-meta:first-child .badge {
        min-height: 20px;
        padding: 2px 6px;
        font-size: .6rem;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] .loyalty-stock-line .product-price-box strong {
        font-size: .9rem;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] .loyalty-member-card-open {
        position: absolute;
        top: 50%;
        right: 7px;
        z-index: 1;
        width: 29px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transform: translateY(-50%);
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #0d57a6;
        font-size: 0;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] .loyalty-member-card-open i {
        width: 20px;
        height: 20px;
      }

      /* compact-reward-detail-back-20260826
         The detail view needs a clear return path, but not a full-width
         secondary button competing with the selected reward. */
      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="detail"] .loyalty-member-detail-back {
        grid-column: 1 / -1;
        display: inline-grid !important;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        justify-self: start;
        gap: 9px;
        width: auto !important;
        min-height: 48px;
        margin: 0;
        padding: 5px 14px 5px 5px;
        border: 1px solid #c9dced !important;
        border-radius: 14px;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(26, 66, 111, .08);
        color: #163f6f !important;
        font: inherit;
        text-align: left;
        cursor: pointer;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="detail"] .loyalty-member-detail-back-icon {
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        border-radius: 10px;
        background: #eaf3ff;
        color: #0d5daf;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="detail"] .loyalty-member-detail-back-icon svg {
        width: 18px;
        height: 18px;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="detail"] .loyalty-member-detail-back-copy {
        display: grid;
        gap: 1px;
        min-width: 0;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="detail"] .loyalty-member-detail-back-copy small {
        color: #6b7d92;
        font-size: .61rem;
        font-weight: 800;
        letter-spacing: .04em;
        line-height: 1;
        text-transform: uppercase;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="detail"] .loyalty-member-detail-back-copy strong {
        color: #173e6c;
        font-size: .84rem;
        line-height: 1.15;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="detail"] .loyalty-member-detail-back:hover {
        border-color: #74a8df !important;
        background: #f8fbff !important;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="detail"] .loyalty-member-detail-back:focus-visible {
        outline: 3px solid rgba(13, 93, 175, .22);
        outline-offset: 2px;
      }
    }

    @media (max-width: 380px) {
      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] .loyalty-reward-card {
        grid-template-columns: 92px minmax(0, 1fr);
        min-height: 112px;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] .loyalty-member-card-media {
        width: 92px;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] .loyalty-member-card-media > img {
        height: 92px;
        padding: 7px;
      }

      body.customer-app-mode #loyalty-program[data-customer-loyalty-role="customer"][data-member-loyalty-view="catalogue"] .loyalty-reward-body {
        padding-left: 10px;
      }
    }
    /* desktop-login-card-20260902
       Keep the existing workshop image as the desktop backdrop, but give every
       role the same clear, compact sign-in hierarchy used on the mobile card.
       The passkey actions remain available as an intentional secondary step. */
    @media (min-width: 641px) {
      .login-screen {
        padding: clamp(28px, 4vw, 56px);
      }

      .login-card:not(.is-registration-open) {
        width: min(468px, 100%);
        gap: 12px;
        padding: 28px 30px 26px;
        border: 1px solid rgba(218, 231, 246, .96);
        border-radius: 20px;
        background: rgba(255, 255, 255, .975);
        box-shadow: 0 28px 70px rgba(1, 24, 43, .34);
      }

      .login-card:not(.is-registration-open) .brand {
        min-height: 0;
        margin: 0;
        justify-content: center;
      }

      .login-card:not(.is-registration-open) .login-brand-logo.tle-logo-card {
        /* Deliberately portrait: the large S emblem is the login brand mark. */
        display: flex;
        inline-size: min(clamp(154px, 18vw, 166px), 100%);
        block-size: clamp(112px, calc(100svh - 608px), 248px);
        margin: 0 auto;
        padding: 0;
      }

      .login-card:not(.is-registration-open) .login-intro-copy {
        display: grid;
        gap: 4px;
        text-align: center;
      }

      .login-card:not(.is-registration-open) h1 {
        font-size: 1.35rem;
        line-height: 1.2;
      }

      .login-card:not(.is-registration-open) #loginIntro {
        max-width: 370px;
        margin-inline: auto;
        font-size: .88rem;
        line-height: 1.42;
      }

      .login-card:not(.is-registration-open) #loginForm {
        gap: 10px;
      }

      .login-card:not(.is-registration-open) .login-field {
        gap: 5px;
        color: #50617a;
        font-size: .8rem;
      }

      .login-card:not(.is-registration-open) .login-field-control input,
      .login-card:not(.is-registration-open) .login-field-control select {
        min-height: 48px;
        border-radius: 12px;
      }

      .login-card:not(.is-registration-open) #loginSubmitBtn {
        min-height: 50px;
        margin-top: 2px;
        border-radius: 12px;
      }

      .login-card:not(.is-registration-open) #resetCustomerPinToggleBtn {
        width: fit-content;
        min-height: auto;
        justify-self: center;
        margin: 0 auto;
        padding: 3px 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: #075dcc;
        font-size: .84rem;
        font-weight: 780;
      }

      .login-card:not(.is-registration-open) #resetCustomerPinToggleBtn i {
        display: none;
      }

      .login-passkey-optional {
        width: fit-content;
        justify-self: center;
        margin: 0 auto;
      }

      .login-passkey-optional > summary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 30px;
        padding: 2px 0;
        color: #60718a;
        cursor: pointer;
        font-size: .8rem;
        font-weight: 740;
        list-style: none;
      }

      .login-passkey-optional > summary::-webkit-details-marker {
        display: none;
      }

      .login-passkey-optional > summary i {
        width: 17px;
        height: 17px;
        color: #0c5dc5;
      }

      .login-passkey-optional[open] > summary {
        color: #075dcc;
      }

      .login-passkey-optional .passkey-login-actions {
        width: min(360px, calc(100vw - 96px));
        margin: 8px auto 0;
      }

      .login-passkey-optional .passkey-login-actions .btn {
        min-height: 42px;
        border-radius: 12px;
        font-size: .84rem;
      }

      .login-passkey-optional .passkey-login-hint {
        max-width: 360px;
        margin: 7px auto 0;
        text-align: center;
      }

      .login-card:not(.is-registration-open) .login-register-launcher {
        width: fit-content;
        justify-self: center;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        padding: 4px 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: #67758b;
        text-align: center;
      }

      .login-card:not(.is-registration-open) .login-register-launcher-icon,
      .login-card:not(.is-registration-open) .login-register-launcher-copy small,
      .login-card:not(.is-registration-open) .login-register-launcher > i:last-child {
        display: none;
      }

      .login-card:not(.is-registration-open) .login-register-launcher-copy strong {
        font-size: 0;
      }

      .login-card:not(.is-registration-open) .login-register-launcher-copy strong::before {
        content: "Don't have an account?";
        color: #67758b;
        font-size: .8rem;
        font-weight: 650;
      }

      .login-card:not(.is-registration-open) .login-register-launcher-copy strong::after {
        content: " Sign up";
        color: #075dcc;
        font-size: .8rem;
        font-weight: 850;
      }
    }

    .passkey-login-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-top: 10px;
    }

    .passkey-login-actions .btn {
      min-height: 44px;
      justify-content: center;
      text-align: center;
    }

    .passkey-login-hint {
      margin: 8px 2px 0;
      font-size: .78rem;
      line-height: 1.4;
    }

    .passkey-modal {
      width: min(560px, calc(100vw - 28px));
      display: grid;
      gap: 14px;
    }

    .passkey-modal-summary {
      border: 1px solid #cbdcf4;
      background: #f2f7ff;
      color: #24466f;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: .88rem;
      line-height: 1.45;
    }

    .passkey-device-list {
      display: grid;
      gap: 8px;
      max-height: min(42vh, 360px);
      overflow: auto;
    }

    .passkey-device {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid #d6e1ef;
      border-radius: 10px;
      background: #fff;
      padding: 10px;
    }

    .passkey-device > i {
      color: var(--mobil-blue);
      flex: 0 0 auto;
    }

    .passkey-device-copy {
      min-width: 0;
      flex: 1;
      display: grid;
      gap: 2px;
    }

    .passkey-device-copy strong,
    .passkey-device-copy small {
      overflow-wrap: anywhere;
    }

    .passkey-device-copy small {
      color: var(--muted);
    }

    .passkey-device-remove {
      flex: 0 0 auto;
    }

    @media (max-width: 560px) {
      .passkey-login-actions {
        grid-template-columns: 1fr;
      }

      .passkey-device {
        align-items: flex-start;
      }
    }

    /* Customer maintenance planner: educational intervals stay separate from
       live catalogue prices, so a product-price update never requires a new guide image. */
    .customer-maintenance-planner-card {
      border-color: rgba(12, 77, 162, .3);
      background: linear-gradient(145deg, #ffffff 0%, #f3f8ff 100%);
    }

    .customer-maintenance-planner-launcher {
      width: 100%;
      min-width: 0;
      border: 1px solid rgba(12, 77, 162, .24);
      border-radius: 14px;
      padding: 14px;
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr) 44px;
      gap: 12px;
      align-items: center;
      background: #fff;
      color: var(--ink);
      text-align: left;
      box-shadow: 0 8px 20px rgba(12, 77, 162, .07);
    }

    .customer-maintenance-planner-launcher:hover,
    .customer-maintenance-planner-launcher:focus-visible {
      border-color: var(--mobil-blue);
      box-shadow: 0 0 0 3px rgba(12, 77, 162, .1), 0 10px 24px rgba(12, 77, 162, .1);
    }

    .customer-maintenance-planner-icon,
    .customer-maintenance-planner-arrow {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      color: var(--mobil-blue);
      background: #eaf3ff;
    }

    .customer-maintenance-planner-arrow {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      color: #fff;
      background: var(--mobil-blue);
    }

    .customer-maintenance-planner-icon svg,
    .customer-maintenance-planner-arrow svg {
      width: 23px;
      height: 23px;
    }

    .customer-maintenance-planner-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .customer-maintenance-planner-copy small {
      color: var(--mobil-blue-dark);
      font-size: .7rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .customer-maintenance-planner-copy strong {
      font-size: 1.05rem;
      line-height: 1.2;
    }

    .customer-maintenance-planner-copy span {
      color: var(--muted);
      font-size: .86rem;
      line-height: 1.35;
    }

    .customer-maintenance-quick-recap {
      display: grid;
      gap: 10px;
      margin: 0 0 12px;
      padding: 13px;
      border: 1px solid rgba(12, 77, 162, .22);
      border-radius: 14px;
      background: linear-gradient(135deg, #f8fbff 0%, #edf5ff 100%);
    }

    .customer-maintenance-quick-recap-head {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }

    .customer-maintenance-quick-recap-icon {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: #fff;
      background: var(--mobil-blue);
    }

    .customer-maintenance-quick-recap-head small,
    .customer-maintenance-quick-recap-head h3,
    .customer-maintenance-quick-recap-head p {
      margin: 0;
    }

    .customer-maintenance-quick-recap-head small {
      color: var(--mobil-blue-dark);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .customer-maintenance-quick-recap-head h3 {
      margin-top: 2px;
      color: var(--ink);
      font-size: .98rem;
    }

    .customer-maintenance-quick-recap-head p {
      margin-top: 3px;
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.35;
    }

    .customer-maintenance-quick-recap-facts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .customer-maintenance-quick-recap-facts div {
      min-width: 0;
      padding: 10px;
      border-radius: 10px;
      background: #fff;
      box-shadow: inset 0 0 0 1px rgba(12, 77, 162, .12);
    }

    .customer-maintenance-quick-recap-facts small,
    .customer-maintenance-quick-recap-facts strong,
    .customer-maintenance-quick-recap-facts span {
      display: block;
    }

    .customer-maintenance-quick-recap-facts small {
      color: var(--muted);
      font-size: .72rem;
      font-weight: 750;
    }

    .customer-maintenance-quick-recap-facts strong {
      margin-top: 2px;
      color: var(--mobil-blue-dark);
      font-size: .9rem;
      line-height: 1.22;
    }

    .customer-maintenance-quick-recap-facts span {
      margin-top: 3px;
      color: var(--muted);
      font-size: .75rem;
      line-height: 1.3;
    }

    .customer-maintenance-planner-backdrop {
      position: fixed;
      inset: 0;
      z-index: 96;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(5, 24, 47, .62);
      backdrop-filter: blur(3px);
    }

    .customer-maintenance-planner-backdrop[hidden] {
      display: none;
    }

    .customer-maintenance-planner-modal {
      width: min(860px, 100%);
      max-height: calc(100dvh - 36px);
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(12, 77, 162, .24);
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 24px 70px rgba(0, 20, 45, .28);
      display: grid;
      grid-template-rows: auto auto auto auto minmax(0, 1fr);
    }

    .customer-maintenance-planner-head {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 44px;
      gap: 10px;
      align-items: center;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
    }

    .customer-maintenance-planner-head h2 {
      margin: 0;
      font-size: 1.15rem;
      text-align: center;
    }

    .customer-maintenance-planner-head button {
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 999px;
      display: grid;
      place-items: center;
    }

    .customer-maintenance-planner-context {
      display: grid;
      grid-template-columns: minmax(210px, .8fr) minmax(0, 1.2fr);
      gap: 18px;
      align-items: center;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      background: #f7faff;
    }

    .customer-maintenance-planner-context-intro {
      min-width: 0;
    }

    .customer-maintenance-planner-context-kicker,
    .customer-maintenance-planner-filter-label,
    .customer-maintenance-planner-note strong {
      display: block;
      color: var(--mobil-blue-dark);
      font-size: .7rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .customer-maintenance-planner-context-intro h3 {
      margin: 3px 0 4px;
      color: var(--ink);
      font-size: 1rem;
    }

    .customer-maintenance-planner-context-intro p {
      margin: 0;
      color: var(--muted);
      font-size: .78rem;
      line-height: 1.4;
    }

    .customer-maintenance-planner-context-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      min-width: 0;
    }

    .customer-maintenance-planner-context label {
      display: grid;
      gap: 5px;
      min-width: 0;
      color: var(--ink);
      font-size: .75rem;
      font-weight: 850;
    }

    .customer-maintenance-planner-context-label {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }

    .customer-maintenance-planner-context-label small {
      color: var(--muted);
      font-size: .68rem;
      font-weight: 750;
    }

    .customer-maintenance-planner-context select {
      min-width: 0;
      min-height: 42px;
      overflow: hidden;
      border: 1px solid #cbdcf4;
      border-radius: 10px;
      padding: 0 38px 0 11px;
      color: var(--ink);
      background: #fff;
      font: inherit;
      font-size: .86rem;
      font-weight: 750;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .customer-maintenance-planner-note {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      margin: 0;
      padding: 10px 16px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      background: #fff;
      font-size: .76rem;
      line-height: 1.35;
    }

    .customer-maintenance-planner-note > i {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      margin-top: 1px;
      color: var(--mobil-blue);
    }

    .customer-maintenance-planner-note strong {
      margin-bottom: 2px;
    }

    .customer-maintenance-planner-note p {
      margin: 0;
    }

    .customer-maintenance-planner-filters {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      padding: 10px 16px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .customer-maintenance-planner-filter-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
      min-width: 0;
    }

    .customer-maintenance-planner-filters button {
      min-width: 0;
      border: 1px solid #cbdcf4;
      border-radius: 10px;
      padding: 9px 11px;
      color: var(--mobil-blue-dark);
      background: #f7faff;
      font-size: .8rem;
      font-weight: 850;
    }

    .customer-maintenance-planner-filters button.active {
      border-color: var(--mobil-blue);
      color: #fff;
      background: var(--mobil-blue);
      box-shadow: 0 5px 12px rgba(0, 82, 170, .16);
    }

    .customer-maintenance-planner-body {
      min-height: 0;
      overflow: auto;
      padding: 14px 16px max(18px, env(safe-area-inset-bottom));
      background: #f8fafc;
    }

    .customer-maintenance-planner-summary {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: start;
      margin-bottom: 12px;
    }

    .customer-maintenance-planner-summary h3,
    .customer-maintenance-planner-summary p {
      margin: 0;
    }

    .customer-maintenance-planner-summary h3 {
      color: var(--mobil-blue-dark);
      font-size: 1rem;
    }

    .customer-maintenance-planner-summary p {
      margin-top: 3px;
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.35;
    }

    .customer-maintenance-planner-list {
      display: grid;
      gap: 10px;
    }

    .customer-maintenance-item {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      gap: 11px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(24, 33, 31, .035);
    }

    .customer-maintenance-item.is-due {
      border-color: rgba(198, 33, 33, .45);
      box-shadow: 0 0 0 2px rgba(198, 33, 33, .06);
    }

    .customer-maintenance-item.is-upcoming {
      border-color: rgba(191, 125, 0, .42);
    }

    .customer-maintenance-item-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: var(--mobil-blue);
      background: #eaf3ff;
    }

    .customer-maintenance-item-icon svg {
      width: 23px;
      height: 23px;
    }

    .customer-maintenance-item-main {
      min-width: 0;
      display: grid;
      gap: 8px;
    }

    .customer-maintenance-item-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: start;
    }

    .customer-maintenance-item h4,
    .customer-maintenance-item p {
      margin: 0;
    }

    .customer-maintenance-item h4 {
      color: var(--ink);
      font-size: .98rem;
      line-height: 1.22;
    }

    .customer-maintenance-item p {
      color: var(--muted);
      font-size: .8rem;
      line-height: 1.38;
    }

    .customer-maintenance-item-facts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .customer-maintenance-item-fact {
      min-width: 0;
      border-radius: 9px;
      padding: 8px;
      background: #f6f9fd;
    }

    .customer-maintenance-item-fact span,
    .customer-maintenance-item-fact strong {
      display: block;
      overflow-wrap: anywhere;
    }

    .customer-maintenance-item-fact span {
      color: var(--muted);
      font-size: .63rem;
      font-weight: 850;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .customer-maintenance-item-fact strong {
      margin-top: 3px;
      color: var(--ink);
      font-size: .8rem;
      line-height: 1.25;
    }

    .customer-maintenance-item-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .customer-maintenance-item-actions .btn {
      justify-content: center;
      min-width: 0;
      padding-inline: 8px;
      font-size: .78rem;
    }

    .service-catalogue-maintenance-guide-panel {
      margin-top: 14px;
      border: 1px solid rgba(12, 77, 162, .22);
      border-radius: 12px;
      padding: 14px;
      background: linear-gradient(145deg, #fff 0%, #f4f8ff 100%);
    }

    .maintenance-guide-price-overrides {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }

    .maintenance-guide-price-override {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 9px 10px;
      background: #fff;
    }

    .maintenance-guide-price-override strong,
    .maintenance-guide-price-override small {
      display: block;
    }

    .maintenance-guide-price-override small {
      margin-top: 2px;
      color: var(--muted);
      line-height: 1.35;
    }

    @media (max-width: 760px) {
      .customer-maintenance-planner-card {
        padding: 13px;
      }

      .customer-maintenance-planner-launcher {
        grid-template-columns: 44px minmax(0, 1fr) 40px;
        padding: 12px;
      }

      .customer-maintenance-planner-icon {
        width: 44px;
        height: 44px;
      }

      .customer-maintenance-quick-recap {
        padding: 12px;
      }

      .customer-maintenance-planner-backdrop {
        place-items: start center;
        padding: 0;
      }

      .customer-maintenance-planner-modal {
        display: block;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 0 0 16px 16px;
        border-top: 0;
      }

      .customer-maintenance-planner-head {
        padding: 10px 12px;
      }

      .customer-maintenance-planner-context {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
      }

      .customer-maintenance-planner-context-fields {
        grid-template-columns: 1fr;
        gap: 9px;
      }

      .customer-maintenance-planner-note {
        padding: 10px 12px;
      }

      .customer-maintenance-planner-filters {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 10px 12px;
      }

      .customer-maintenance-planner-filter-options {
        gap: 8px;
      }

      .customer-maintenance-planner-body {
        min-height: auto;
        overflow: visible;
        padding-inline: 12px;
        padding-bottom: max(108px, calc(92px + env(safe-area-inset-bottom)));
      }

      .customer-maintenance-item {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 9px;
        padding: 11px;
      }

      .customer-maintenance-item-icon {
        width: 42px;
        height: 42px;
      }

      .customer-maintenance-item-facts {
        grid-template-columns: 1fr;
      }

      .customer-maintenance-item-actions .btn {
        min-height: 40px;
      }

      .maintenance-guide-price-override {
        grid-template-columns: 1fr;
      }
    }

/* A customer workspace restores its secure session before showing Home. Its
   temporary canvas does not need to download the signed-out login artwork. */
html.mccc-customer-boot:not(.mccc-customer-login-entry):not(.mccc-customer-welcome-entry) body.crm-startup-pending::before {
  background: #f4f8fc;
}

/* Paid cash bill: selected service-visit evidence only. */
@media (min-width: 1100px) {
  .record-history-compact-selector.has-cash-bill { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.record-history-cash-bill .mini strong { overflow-wrap: anywhere; }
.record-history-receipt-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.record-history-receipt-file { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid #d5e1ee; border-radius: 10px; background: #f8fbff; min-width: 0; }
.record-history-receipt-file > div { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.record-history-receipt-file .btn { min-height: 44px; flex-shrink: 0; white-space: normal; text-align: center; }
.record-history-cash-bill a:focus-visible { outline: 3px solid var(--mobil-blue); outline-offset: 3px; }
@media (max-width: 640px) {
  .record-history-receipt-file { flex-direction: column; align-items: stretch; }
}