* { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Malgun Gothic", "Apple SD Gothic Neo", Arial, sans-serif;
      color: #161a20;
      background: #17212b;
    }
    html[dir="rtl"] body { direction: rtl; }
    html[dir="rtl"] input,
    html[dir="rtl"] textarea,
    html[dir="rtl"] select { text-align: right; }
    html[dir="rtl"] input[type="tel"],
    html[dir="rtl"] input[type="email"],
    html[dir="rtl"] input[type="number"],
    html[dir="rtl"] input[type="date"],
    html[dir="rtl"] input[type="time"] { direction: ltr; text-align: left; }
    html[dir="rtl"] .topbar,
    html[dir="rtl"] .panel-head,
    html[dir="rtl"] .actions,
    html[dir="rtl"] .remember-login-row { direction: rtl; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    .auth-screen {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      background: #17212b;
    }
    .auth-card {
      width: min(420px, 100%);
      background: #fff;
      border: 1px solid #dde8f7;
      border-radius: 18px;
      padding: 26px;
      box-shadow: 0 12px 34px rgba(33, 83, 158, .12);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 22px;
      font-weight: 900;
      margin-bottom: 22px;
    }
    .brand-mark {
      width: 100px;
      height: 34px;
      object-fit: contain;
      display: block;
    }
    .auth-title {
      margin: 0 0 8px;
      font-size: 24px;
      letter-spacing: 0;
    }
    .auth-copy {
      margin: 0 0 22px;
      color: #5f6b7a;
      line-height: 1.55;
      font-size: 14px;
    }
    .tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      padding: 4px;
      border-radius: 12px;
      background: #edf3ff;
      margin-bottom: 18px;
    }
    .tab {
      border: 0;
      border-radius: 9px;
      min-height: 42px;
      background: transparent;
      color: #5f6b7a;
      font-weight: 800;
    }
    .tab.active {
      background: #fff;
      color: #0b63ff;
      box-shadow: 0 4px 12px rgba(23, 74, 155, .1);
    }
    .auth-form {
      display: none;
      gap: 12px;
    }
    .auth-form.active { display: grid; }
    .remember-login-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 16px;
      font-size: 13px;
      font-weight: 800;
      color: #475569;
    }
    .remember-login-row label {
      display: inline-flex;
      grid-template-columns: none;
      align-items: center;
      gap: 7px;
      min-height: 28px;
      cursor: pointer;
    }
    .remember-login-row input {
      width: 16px;
      min-height: 16px;
      height: 16px;
      margin: 0;
      padding: 0;
      accent-color: #0b63ff;
    }
    label {
      display: grid;
      gap: 7px;
      font-size: 13px;
      font-weight: 800;
      color: #313946;
    }
    input, select, textarea {
      width: 100%;
      border: 1px solid #d7e0ec;
      border-radius: 12px;
      min-height: 46px;
      padding: 11px 13px;
      background: #fff;
      color: #161a20;
    }
    textarea { resize: vertical; }
    .primary {
      border: 0;
      border-radius: 13px;
      min-height: 48px;
      padding: 12px 16px;
      color: #fff;
      background: #0b63ff;
      font-weight: 900;
      box-shadow: 0 9px 18px rgba(11, 99, 255, .23);
    }
    .secondary {
      border: 1px solid #dce5f0;
      border-radius: 13px;
      min-height: 42px;
      padding: 10px 12px;
      background: #fff;
      color: #3d4654;
      font-weight: 800;
    }
    .danger {
      border: 1px solid #ef4444;
      border-radius: 13px;
      min-height: 42px;
      padding: 10px 12px;
      background: #ef4444;
      color: #fff;
      font-weight: 900;
    }
    .app-screen {
      display: none;
      min-height: 100vh;
      padding: 88px 18px 28px;
      background: #f7f9fc;
    }
    .app-screen.active { display: block; }
    .app-shell {
      width: min(720px, 100%);
      margin: 0 auto;
    }
    .topbar {
      height: 48px;
      display: grid;
      grid-template-columns: 137px 1fr 44px;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }
    .icon-button {
      border: 0;
      background: transparent;
      min-height: 42px;
      font-size: 26px;
      font-weight: 900;
    }
    .menu-toggle {
      display: none;
      justify-self: end;
      border: 1px solid #dce5f0;
      border-radius: 12px;
      min-width: 42px;
      min-height: 42px;
      color: #334155;
      background: #fff;
      font-size: 22px;
      font-weight: 900;
      box-shadow: 0 5px 13px rgba(31, 45, 68, .06);
    }
    .topbar-logo {
      width: 137px;
      height: 44px;
      object-fit: contain;
      display: block;
    }
    .topbar h1 {
      margin: 0;
      text-align: center;
      font-size: 20px;
      letter-spacing: 0;
    }
    .hero {
      position: relative;
      overflow: hidden;
      border: 1px solid #dbe8ff;
      border-radius: 18px;
      padding: 24px 22px 20px;
      background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
      box-shadow: 0 8px 18px rgba(35, 68, 116, .08);
      margin-bottom: 14px;
    }
    .hero::after {
      content: "";
      position: absolute;
      right: 18px;
      top: 36px;
      width: 176px;
      height: 118px;
      background:
        linear-gradient(90deg, transparent 0 20%, rgba(185, 213, 247, .7) 20% 32%, transparent 32% 45%, rgba(185, 213, 247, .5) 45% 56%, transparent 56%),
        linear-gradient(180deg, transparent 0 58%, rgba(68, 137, 232, .14) 58% 100%);
      border-radius: 12px;
      opacity: .75;
    }
    .truck-art {
      position: absolute;
      right: 42px;
      top: 72px;
      width: 88px;
      height: 42px;
      border-radius: 8px 12px 8px 8px;
      background: #1674ff;
      box-shadow: -30px 10px 0 #dbeaff;
      z-index: 1;
    }
    .truck-art::before {
      content: "";
      position: absolute;
      left: -36px;
      bottom: 0;
      width: 38px;
      height: 28px;
      border-radius: 8px 0 0 8px;
      background: #0b63ff;
    }
    .truck-art::after {
      content: "";
      position: absolute;
      left: -26px;
      bottom: -8px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #263241;
      box-shadow: 62px 0 0 #263241;
    }
    .pin {
      position: absolute;
      right: 138px;
      top: 52px;
      width: 22px;
      height: 22px;
      border-radius: 50% 50% 50% 0;
      background: #0b63ff;
      transform: rotate(-45deg);
      z-index: 2;
    }
    .pin::after {
      content: "";
      position: absolute;
      inset: 7px;
      border-radius: 50%;
      background: #fff;
    }
    .hero h2 {
      position: relative;
      z-index: 2;
      margin: 0 0 8px;
      font-size: 18px;
      letter-spacing: 0;
    }
    .hero h2 strong { color: #0b63ff; font-size: 24px; }
    .hero p {
      position: relative;
      z-index: 2;
      margin: 0 0 22px;
      color: #2f3b4b;
      font-size: 14px;
    }
    .stats {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
    }
    .stat {
      min-height: 88px;
      border: 1px solid #e4ebf4;
      border-radius: 12px;
      padding: 13px;
      background: rgba(255,255,255,.93);
      box-shadow: 0 5px 12px rgba(35, 58, 91, .07);
      cursor: pointer;
    }
    .stat-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      margin-bottom: 4px;
      color: #0b63ff;
      background: #eaf2ff;
      font-weight: 900;
    }
    .stat.orange .stat-icon { color: #f49a14; background: #fff3e2; }
    .stat.green .stat-icon { color: #159b5f; background: #e8f8ef; }
    .stat.blue .stat-icon { color: #0b63ff; background: #eaf2ff; }
    .stat span {
      display: block;
      color: #3d4654;
      font-size: 12px;
      font-weight: 800;
    }
    .stat strong {
      display: block;
      margin-top: 3px;
      color: #0b63ff;
      font-size: 28px;
      line-height: 1;
    }
    .stat.orange strong { color: #f49a14; }
    .stat.green strong { color: #159b5f; }
    .stat.blue strong { color: #0b63ff; }
    .cta-grid {
      display: grid;
      grid-template-columns: 1.15fr .95fr .95fr;
      gap: 12px;
      margin-bottom: 18px;
    }
    .main-cta, .receipt-cta {
      min-height: 108px;
      border-radius: 15px;
      padding: 18px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 13px;
      text-align: left;
    }
    .main-cta {
      border: 0;
      color: #fff;
      background: #075cff;
      box-shadow: 0 8px 18px rgba(7, 92, 255, .28);
    }
    .receipt-cta {
      border: 1px solid #e2e8f0;
      color: #151b25;
      background: #fff;
      box-shadow: 0 6px 14px rgba(34, 50, 77, .07);
    }
    .bulk-cta {
      border: 1px solid #bfdbfe;
      color: #0b3f91;
      background: #eaf3ff;
      box-shadow: 0 6px 14px rgba(34, 50, 77, .07);
    }
    .cta-icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      font-size: 28px;
      font-weight: 900;
      background: rgba(255,255,255,.18);
    }
    .receipt-cta .cta-icon,
    .bulk-cta .cta-icon {
      color: #0b63ff;
      background: #eff5ff;
    }
    .cta-title {
      display: block;
      font-size: 18px;
      font-weight: 900;
      margin-bottom: 4px;
    }
    .cta-sub {
      display: block;
      font-size: 12px;
      opacity: .82;
    }
    .chevron {
      font-size: 28px;
      line-height: 1;
      color: inherit;
    }
    .panel {
      border: 1px solid #e3e9f1;
      border-radius: 16px;
      background: #fff;
      padding: 14px;
      box-shadow: 0 5px 13px rgba(31, 45, 68, .06);
      margin-bottom: 14px;
    }
    .panel-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }
    .panel-head-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }
    .panel-head h3 {
      margin: 0;
      font-size: 18px;
      letter-spacing: 0;
    }
    .text-link {
      border: 0;
      background: transparent;
      color: #586474;
      font-size: 13px;
      font-weight: 800;
    }
    .bulk-order-body {
      display: grid;
      gap: 12px;
    }
    .bulk-order-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .bulk-order-file {
      display: grid;
      gap: 8px;
      border: 1px solid #d7e0ec;
      border-radius: 12px;
      padding: 12px;
      background: #f8fafc;
      color: #17212b;
      font-size: 13px;
      font-weight: 900;
    }
    .bulk-order-help {
      margin: 0;
      color: #475569;
      font-size: 13px;
      line-height: 1.5;
    }
    .bulk-order-status {
      min-height: 22px;
      color: #0b63ff;
      font-size: 13px;
      font-weight: 900;
    }
    .search-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      margin-bottom: 12px;
    }
    .search-row input {
      min-height: 44px;
      border-radius: 12px;
      background: #fff;
    }
    .filter-button {
      border: 1px solid #dce5f0;
      border-radius: 12px;
      min-width: 98px;
      background: #fff;
      color: #293241;
      font-weight: 900;
    }
    .chips {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 6px;
      margin-bottom: 8px;
    }
    .chip {
      border: 1px solid #e1e8f2;
      border-radius: 11px;
      min-height: 38px;
      padding: 0 16px;
      color: #4f5969;
      background: #fff;
      font-weight: 800;
      white-space: nowrap;
    }
    .chip.active {
      border-color: #159b5f;
      color: #fff;
      background: #159b5f;
    }
    .orders-list {
      display: grid;
      gap: 10px;
    }
    .order-card {
      display: grid;
      grid-template-columns: 82px 1fr auto;
      gap: 12px;
      align-items: center;
      border: 1px solid #edf1f5;
      border-radius: 14px;
      padding: 13px 10px;
      background: #fff;
    }
    .car-box {
      min-height: 76px;
      display: grid;
      place-items: center;
      gap: 4px;
      border-radius: 13px;
      background: #f8fafc;
      font-size: 12px;
      font-weight: 900;
      color: #1b2430;
    }
    .car-icon {
      width: 34px;
      height: 22px;
      border: 3px solid #111827;
      border-radius: 8px 8px 5px 5px;
      position: relative;
    }
    .car-icon::after {
      content: "";
      position: absolute;
      left: 3px;
      right: 3px;
      bottom: -9px;
      height: 8px;
      border-radius: 8px;
      background: radial-gradient(circle at 5px 3px, #111827 0 3px, transparent 4px), radial-gradient(circle at calc(100% - 5px) 3px, #111827 0 3px, transparent 4px);
    }
    .order-main strong {
      display: block;
      font-size: 13px;
      line-height: 1.45;
      margin-bottom: 7px;
    }
    .order-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      color: #596475;
      font-size: 12px;
      margin-bottom: 9px;
    }
    .progress {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      align-items: start;
      font-size: 10px;
      color: #6b7280;
    }
    .progress span {
      position: relative;
      text-align: center;
      padding-top: 17px;
      white-space: nowrap;
    }
    .progress span::before {
      content: "";
      position: absolute;
      top: 0;
      left: calc(50% - 5px);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #d1d7df;
      z-index: 2;
    }
    .progress span::after {
      content: "";
      position: absolute;
      top: 4px;
      left: 50%;
      width: 100%;
      height: 2px;
      background: #d1d7df;
      z-index: 1;
    }
    .progress span:last-child::after { display: none; }
    .progress span.done::before, .progress span.done::after { background: #0b63ff; }
    .progress.green span.done::before, .progress.green span.done::after { background: #159b5f; }
    .progress.orange span.done::before, .progress.orange span.done::after { background: #f49a14; }
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      border: 1px solid #a7c3ff;
      border-radius: 10px;
      padding: 0 9px;
      color: #0b63ff;
      background: #f4f8ff;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }
    .badge.blue { color: #0b63ff; border-color: #a7c3ff; background: #f4f8ff; }
    .badge.green { color: #159b5f; border-color: #abdcc5; background: #f0fbf5; }
    .badge.orange { color: #f49a14; border-color: #ffd3a0; background: #fff8ec; }
    .badge.gray { color: #667085; border-color: #d7dde6; background: #f7f8fa; }
    .order-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .order-actions .receipt-button,
    .order-actions .voice-call-button {
      min-height: 30px;
      border-radius: 999px;
      padding: 6px 11px;
      line-height: 1.2;
      font-weight: 900;
      letter-spacing: -.1px;
      cursor: pointer;
      box-shadow: 0 3px 8px rgba(15, 23, 42, .08);
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .order-actions .receipt-button:hover,
    .order-actions .voice-call-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 5px 12px rgba(15, 23, 42, .13);
    }
    .order-actions .voice-call-button {
      border: 1px solid #1269e8;
      color: #fff;
      background: linear-gradient(135deg, #0878f9, #1259d5);
      font-size: 12px;
    }
    .order-actions .receipt-button[data-receipt-type="departure"] {
      border: 1px solid #a7c3ff;
      color: #0b63ff;
      background: #f4f8ff;
      font-size: 12px;
    }
    .order-actions .receipt-button {
      font-size: 8px;
    }
    .order-actions .receipt-button[data-receipt-type="arrival"] {
      border: 1px solid #f5bf79;
      color: #a84f08;
      background: #fff7e9;
    }
    .order-actions .receipt-button[data-action="driver-location"] {
      border: 1px solid #92d5b5;
      color: #087747;
      background: #effbf5;
      font-size: 12px;
    }
    .quick-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 14px;
    }
    .quick {
      border: 1px solid #e5ebf2;
      border-radius: 13px;
      min-height: 76px;
      padding: 10px;
      background: #fff;
      color: #18202c;
      text-align: left;
      box-shadow: 0 5px 12px rgba(31, 45, 68, .05);
    }
    .quick strong {
      display: block;
      margin-top: 4px;
      font-size: 13px;
      line-height: 1.2;
    }
    .quick span {
      display: block;
      margin-top: 3px;
      color: #697384;
      font-size: 11px;
    }
    .quick-icon {
      color: #0b63ff;
      font-size: 22px;
      font-weight: 900;
    }
    .quick.receipt-departure strong,
    .quick.receipt-departure .receipt-count { color: #0b63ff; }
    .quick.receipt-arrival strong,
    .quick.receipt-arrival .receipt-count,
    .quick.receipt-arrival .quick-icon { color: #ef4444; }
    .form-panel {
      display: none;
      margin-bottom: 14px;
    }
    #newOrderPanel {
      background: #d0d6d3;
    }
    .form-panel.active { display: block; }
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 11px;
    }
    .full { grid-column: 1 / -1; }
    .map-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .map-button-row {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      margin-left: auto;
    }
    .mini-map-button {
      min-height: 24px;
      border-radius: 3px;
      padding: 3px 6px;
      color: #93c5fd;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }
    #newOrderPanel .mini-map-button {
      border-color: #2563eb;
      color: #93c5fd;
      background: #0f172a;
    }
    #newOrderPanel .mini-map-button:hover,
    #newOrderPanel .mini-map-button:focus {
      border-color: #38bdf8;
      color: #bfdbfe;
      background: #111827;
    }
    .place-suggestions {
      display: none;
      list-style: none;
      margin: -2px 0 0;
      padding: 6px;
      border: 1px solid #d7e0ec;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
      z-index: 20;
    }
    .place-suggestions.active {
      display: grid;
      gap: 3px;
    }
    .place-suggestions button {
      width: 100%;
      border: 0;
      border-radius: 9px;
      padding: 9px 10px;
      color: #17212b;
      background: #fff;
      font-size: 13px;
      font-weight: 800;
      text-align: left;
    }
    .place-suggestions button:hover,
    .place-suggestions button:focus {
      background: #edf5ff;
      outline: none;
    }
    .address-search-control {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px;
      align-items: start;
      width: 100%;
    }
    .address-search-control > input {
      min-width: 0;
    }
    .address-search-button {
      min-width: 62px;
      min-height: 34px;
      border-radius: 10px;
      padding: 6px 10px;
      white-space: nowrap;
      align-self: stretch;
    }
    .address-search-control .place-suggestions {
      grid-column: 1 / -1;
      margin: 0;
    }
    .address-map-wrap {
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid #dbe7f5;
      border-radius: 14px;
      background: #f8fbff;
    }
    .route-distance {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      border-radius: 10px;
      color: #0f2f68;
      background: #eaf3ff;
      font-size: 13px;
      font-weight: 900;
      text-align: center;
    }
    .route-map {
      width: 100%;
      height: 260px;
      overflow: hidden;
      border: 1px solid #d7e4f2;
      border-radius: 12px;
      background: #eef4fb;
    }
    .route-actions {
      display: flex;
      justify-content: flex-end;
    }
    .route-link {
      display: none;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      border: 1px solid #0b63ff;
      border-radius: 10px;
      padding: 7px 12px;
      color: #0b63ff;
      background: #fff;
      font-size: 13px;
      font-weight: 900;
      text-decoration: none;
    }
    .route-link.active { display: inline-flex; }
    .coordinate-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .coordinate-grid-hidden {
      display: none !important;
    }
    .coordinate-grid label {
      color: #5f6b7a;
      font-size: 12px;
    }
    .coordinate-grid input {
      min-height: 38px;
      border-radius: 10px;
      color: #334155;
      background: #f8fafc;
      font-size: 12px;
      font-weight: 800;
    }
    .form-section {
      grid-column: 1 / -1;
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid #e7edf5;
      border-radius: 14px;
      background: #fbfdff;
    }
    .form-section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      color: #1e293b;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0;
    }
    .form-section-title .section-icon {
      display: inline-grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 7px;
      color: #0b63ff;
      background: #eef5ff;
      font-size: 14px;
    }
    .segmented-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .segmented-group {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 14px;
    }
    .segmented-group.three {
      display: inline-flex;
    }
    .segmented-label {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 13px;
      font-weight: 900;
      color: #313946;
    }
    .waypoint-row {
      display: none;
      grid-column: 1 / -1;
      grid-template-columns: 1fr 1fr auto;
      gap: 10px;
      align-items: end;
      padding: 10px;
      border: 1px dashed #cfd9e8;
      border-radius: 12px;
      background: #fff;
    }
    .waypoint-row.active {
      display: grid;
    }
    .waypoint-row .secondary {
      min-height: 42px;
      white-space: nowrap;
    }
    .waypoint-actions {
      display: flex;
      justify-content: flex-start;
    }
    #addWaypointButton {
      border-color: #bfdbfe;
      color: #0b63ff;
      background: #eaf3ff;
    }
    .inline-option-row {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 10px;
      align-items: center;
    }
    .inline-option-row .segmented-label {
      margin: 0;
    }
    .inline-option-row .segmented-group {
      display: inline-flex;
    }
    .inline-option-row .segmented-group.two {
      display: inline-flex;
    }
    .checkbox-segment input[type="checkbox"] {
      width: 17px;
      min-height: 17px;
      accent-color: #0b63ff;
    }
    .photo-preview {
      display: none;
      align-items: center;
      gap: 10px;
      min-height: 76px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px;
      background: #f8fafc;
    }
    .photo-preview.active { display: flex; }
    .photo-preview img {
      width: 82px;
      height: 62px;
      object-fit: cover;
      border-radius: 9px;
      border: 1px solid #dbe4ef;
      background: #fff;
    }
    .photo-preview span {
      min-width: 0;
      color: #475569;
      font-size: 12px;
      font-weight: 800;
      overflow-wrap: anywhere;
    }
    .namecard-tools {
      display: grid;
      gap: 8px;
      border: 1px solid #dfe8f3;
      border-radius: 14px;
      padding: 12px;
      background: #f8fbff;
    }
    .namecard-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .namecard-status {
      min-height: 20px;
      color: #64748b;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.4;
      white-space: pre-line;
    }
    .namecard-status.error { color: #dc2626; }
    .namecard-status.success { color: #047857; }
    .segment {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 5px;
      min-height: 24px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #334155;
      font-size: 13px;
      font-weight: 900;
    }
    .segment input {
      width: auto;
      min-width: 15px;
      height: 15px;
      min-height: auto;
      margin: 0;
      accent-color: #0b63ff;
    }
    .segment:has(input:checked) {
      color: #0b63ff;
      background: transparent;
      box-shadow: none;
    }
    .toggle-row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 10px;
      min-height: 46px;
    }
    .fuel-input-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px;
      align-items: center;
    }
    .quick-amounts {
      display: grid;
      grid-template-columns: repeat(4, minmax(44px, auto));
      gap: 4px;
    }
    .quick-amounts button {
      min-height: 34px;
      border-radius: 6px;
      padding: 5px 7px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .tax-invoice-fields {
      display: none;
      grid-column: 1 / -1;
      grid-template-columns: 1fr 1fr;
      gap: 11px;
    }
    .tax-invoice-fields.active { display: grid; }
    .profile-divider {
      grid-column: 1 / -1;
      margin: 4px 0 0;
      color: #0f172a;
      font-size: 14px;
      font-weight: 900;
    }
    .switch {
      position: relative;
      width: 48px;
      height: 28px;
      border-radius: 999px;
      background: #c7ced8;
    }
    .switch input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .switch span {
      position: absolute;
      top: 4px;
      left: 4px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      transition: transform .18s ease;
      box-shadow: 0 2px 5px rgba(15, 23, 42, .18);
    }
    .switch input:checked + span {
      transform: translateX(20px);
      background: #fff;
    }
    .switch:has(input:checked) { background: #0b63ff; }
    .fare {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin: 13px 0;
    }
    .fare div {
      border: 1px solid #e5ebf2;
      border-radius: 12px;
      padding: 10px;
      background: #f8fafc;
      color: #667085;
      font-size: 12px;
    }
    .fare strong {
      display: block;
      color: #111827;
      font-size: 15px;
      margin-top: 4px;
    }
    .bottom-nav {
      position: fixed;
      left: 50%;
      top: 14px;
      transform: translateX(-50%);
      width: min(780px, calc(100% - 32px));
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      padding: 8px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 9px 24px rgba(24, 39, 75, .13);
      z-index: 20;
    }
    .nav-item {
      border: 0;
      border-radius: 13px;
      min-height: 58px;
      background: transparent;
      color: #3c4654;
      font-size: 14px;
      font-weight: 800;
    }
    .nav-item strong {
      display: block;
      color: inherit;
      font-size: 22px;
      line-height: 1;
      margin-bottom: 4px;
    }
    .nav-item.active { color: #0b63ff; background: #f3f7ff; }
    .support-layout {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 12px;
    }
    .support-form,
    .support-list {
      border: 1px solid #dfe8f4;
      border-radius: 14px;
      padding: 16px;
      background: #fff;
    }
    .support-form textarea {
      width: 100%;
      min-height: 132px;
      border: 1px solid #d8e2ee;
      border-radius: 12px;
      padding: 12px;
      resize: vertical;
    }
    .support-ticket {
      border: 1px solid #dfe8f4;
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 10px;
      background: #f8fbff;
    }
    .support-ticket-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
      font-size: 13px;
      color: #64748b;
      font-weight: 900;
    }
    .support-ticket p {
      margin: 0 0 8px;
      color: #111827;
      line-height: 1.55;
      font-weight: 700;
    }
    .admin-message-list {
      grid-column: 1 / -1;
    }
    .admin-message-list h4 {
      margin: 0 0 10px;
      color: #111827;
      font-size: 15px;
    }
    .admin-message-card {
      border: 1px solid #dfe8f4;
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 10px;
      background: #fff;
    }
    .admin-message-card p {
      margin: 8px 0;
      color: #111827;
      line-height: 1.55;
      white-space: pre-wrap;
      font-weight: 700;
    }
    .support-table-wrap {
      overflow-x: auto;
    }
    .support-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 680px;
      font-size: 13px;
    }
    .support-table th,
    .support-table td {
      border-bottom: 1px solid #e5edf6;
      padding: 10px 8px;
      color: #111827;
      text-align: left;
      vertical-align: middle;
    }
    .support-table th {
      color: #526173;
      background: #f4f7fb;
      font-weight: 900;
    }
    .support-table .actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .support-reply {
      margin-top: 10px;
      border-left: 3px solid #0b63ff;
      padding: 10px 12px;
      background: #eef5ff;
      color: #1f2937;
      line-height: 1.55;
      font-weight: 700;
    }
    .new-badge {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      border-radius: 999px;
      padding: 0 8px;
      color: #fff;
      background: #ef4444;
      font-size: 11px;
      font-weight: 900;
    }
    .modal-backdrop {
      position: fixed;
      inset: 0;
      display: none;
      place-items: center;
      padding: 18px;
      background: rgba(15, 23, 42, .48);
      z-index: 60;
    }
    .modal-backdrop.active { display: grid; }
    /* Main navigation destinations render in the page flow, not as overlays. */
    .modal-backdrop.inline-page {
      position: static;
      inset: auto;
      display: none;
      place-items: initial;
      width: 100%;
      padding: 0;
      margin-top: 18px;
      background: transparent;
      z-index: auto;
    }
    .modal-backdrop.inline-page.active { display: block; }
    .modal-backdrop.inline-page > .modal {
      width: 100%;
      max-height: none;
      overflow: visible;
      border: 1px solid #d8e0ea;
      box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
    }
    .modal {
      width: min(760px, 100%);
      max-height: min(760px, calc(100vh - 36px));
      overflow: auto;
      border-radius: 18px;
      background: #fff;
      padding: 18px;
      box-shadow: 0 22px 60px rgba(15, 23, 42, .28);
    }
    .driver-location-map {
      width: 100%;
      height: min(62vh, 520px);
      min-height: 360px;
      border: 1px solid #d7e0ec;
      border-radius: 16px;
      overflow: hidden;
      background: #eef4f9;
    }
    .driver-location-meta {
      margin: 0 0 10px;
      color: #334155;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.55;
    }
    .modal-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .modal-head h3 { margin: 0; font-size: 18px; }
    .map-picker-modal { width: min(900px, 100%); }
    .map-picker-help {
      margin: -4px 0 10px;
      color: #475569;
      font-size: 13px;
      line-height: 1.45;
      font-weight: 700;
    }
    .map-picker-view {
      width: 100%;
      height: min(540px, 62vh);
      border: 1px solid #d7e4f2;
      border-radius: 14px;
      overflow: hidden;
      background: #eef4fb;
    }
    .map-picker-address {
      margin-top: 10px;
      min-height: 46px;
      border: 1px solid #e0e8f2;
      border-radius: 12px;
      padding: 11px 13px;
      color: #172033;
      background: #f8fafc;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.45;
    }
    .map-picker-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 12px;
    }
    .message-body {
      margin: 0 0 16px;
      color: #111827;
      font-size: 16px;
      line-height: 1.55;
      white-space: pre-line;
    }
    .receipt-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .receipt-grid .full { grid-column: 1 / -1; }
    .receipt-field {
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px;
      background: #f8fafc;
    }
    .receipt-field span {
      display: block;
      color: #64748b;
      font-size: 12px;
      margin-bottom: 5px;
    }
    .order-detail-section {
      position: relative;
      margin-top: 18px;
      border: 1px solid #ef4444;
      border-radius: 4px;
      padding: 20px 10px 10px;
      background: #fff;
    }
    .order-detail-section:first-child {
      margin-top: 10px;
    }
    .order-detail-section h4 {
      position: absolute;
      left: 12px;
      top: -11px;
      margin: 0;
      padding: 0 6px;
      color: #991b1b;
      background: #fff;
      font-size: 15px;
      font-weight: 900;
    }
    .order-detail-section:nth-of-type(2) { border-color: #2563eb; }
    .order-detail-section:nth-of-type(2) h4 { color: #1d4ed8; }
    .order-detail-section:nth-of-type(3) { border-color: #059669; }
    .order-detail-section:nth-of-type(3) h4 { color: #047857; }
    .order-detail-section .receipt-field {
      min-height: 62px;
      padding: 10px 12px;
    }
    .condition-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 14px;
    }
    .condition-chip {
      border-radius: 12px;
      padding: 11px;
      color: #fff;
      font-weight: 800;
      text-align: center;
      background: #0b63ff;
    }
    .condition-chip.bad { background: #ef4444; }
    .receipt-photos {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
      gap: 8px;
      margin-top: 10px;
    }
    .receipt-photos img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      cursor: zoom-in;
    }
    .history-list {
      display: grid;
      gap: 10px;
    }
    .history-card {
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 13px;
      background: #fff;
      text-align: left;
      cursor: pointer;
    }
    .history-card strong {
      display: block;
      margin-bottom: 6px;
      color: #111827;
    }
    .history-card p {
      margin: 4px 0;
      color: #526170;
      font-size: 13px;
    }
    .receipt-doc {
      display: grid;
      gap: 12px;
      color: #1f2937;
    }
    .receipt-doc-card {
      border: 1px solid #e6edf5;
      border-radius: 14px;
      padding: 16px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
    }
    .receipt-doc-card h4 { margin: 0 0 12px; font-size: 16px; }
    .driver-summary {
      display: grid;
      grid-template-columns: 72px 1fr auto;
      gap: 16px;
      align-items: center;
    }
    .driver-avatar {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #0b63ff;
      background: #eef5ff;
      font-size: 34px;
    }
    .doc-info-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 28px;
    }
    .doc-info-item {
      display: grid;
      grid-template-columns: 28px 96px 1fr;
      gap: 8px;
      align-items: center;
      min-height: 34px;
      border-bottom: 1px solid #edf2f7;
      padding-bottom: 8px;
    }
    .doc-info-item.full { grid-column: 1 / -1; }
    .doc-info-item i { color: #1f2937; font-style: normal; font-size: 19px; }
    .doc-info-item span { color: #49628a; font-size: 12px; font-weight: 900; }
    .doc-info-item strong { color: #1f2937; font-size: 13px; }
    #receiptViewBody .receipt-doc {
      padding: 12px;
      color: #111827;
      background: #ffffff;
    }
    #receiptViewBody .receipt-doc-card,
    #receiptViewBody .condition-pill,
    #receiptViewBody .doc-call {
      color: #111827;
      background: #ffffff;
    }
    #receiptViewBody .receipt-doc-card h4,
    #receiptViewBody .doc-info-item i,
    #receiptViewBody .doc-info-item strong {
      color: #111827;
    }
    #receiptViewBody .doc-info-item span,
    #receiptViewBody .car-state,
    #receiptViewBody .condition-legend {
      color: #334155;
    }
    .receipt-pdf-actions {
      display: flex;
      justify-content: flex-end;
      padding: 4px 0 0;
    }
    .receipt-print-doc { display: none; }
    .doc-call {
      border-radius: 999px;
      border: 1px solid #0b63ff;
      padding: 10px 16px;
      color: #0b63ff;
      background: #fff;
      font-weight: 900;
      text-decoration: none;
    }
    .receipt-condition-layout {
      display: grid;
      grid-template-columns: 1fr 150px 1fr;
      gap: 20px;
      align-items: center;
    }
    .condition-stack { display: grid; gap: 10px; }
    .condition-pill {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #dfe7f1;
      border-radius: 9px;
      padding: 9px 12px;
      color: #334155;
      background: #fff;
      font-size: 12px;
      font-weight: 800;
    }
    .condition-pill.ok em { color: #0b63ff; }
    .condition-pill.bad em { color: #f59e0b; }
    .condition-pill em { font-style: normal; }
    .car-state {
      display: grid;
      justify-items: center;
      gap: 8px;
      color: #475569;
      font-size: 12px;
      font-weight: 900;
    }
    .car-state img { width: 118px; max-width: 100%; }
    .condition-legend {
      display: flex;
      justify-content: center;
      gap: 22px;
      margin-top: 10px;
      color: #475569;
      font-size: 12px;
      font-weight: 900;
    }
    .receipt-photo-section {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) minmax(260px, 2fr);
      gap: 18px;
    }
    .main-photo img,
    .vehicle-strip img {
      width: 100%;
      object-fit: cover;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      cursor: zoom-in;
    }
    .main-photo img { aspect-ratio: 4 / 3; }
    .vehicle-strip {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
      gap: 8px;
    }
    .vehicle-shot { position: relative; }
    .vehicle-shot b {
      position: absolute;
      top: 6px;
      left: 6px;
      min-width: 18px;
      height: 18px;
      border-radius: 5px;
      display: grid;
      place-items: center;
      color: #fff;
      background: #0b63ff;
      font-size: 11px;
    }
    .vehicle-slot-strip {
      grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    }
    .vehicle-shot {
      overflow: hidden;
      border: 1px dashed #cbd5e1;
      border-radius: 12px;
      background: #f8fafc;
    }
    .vehicle-shot img,
    .vehicle-shot .empty-shot {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border: 0;
      border-radius: 0;
      display: grid;
      place-items: center;
      color: #94a3b8;
      background: #f1f5f9;
      font-size: 12px;
      font-weight: 800;
    }
    .vehicle-shot strong {
      display: block;
      padding: 8px 6px;
      color: #111827;
      background: #fff;
      font-size: 12px;
      text-align: center;
    }
    .arrival-fuel-summary {
      display: grid;
      grid-template-columns: auto minmax(120px, 1fr) auto;
      gap: 10px;
      align-items: center;
      margin-top: 12px;
      border: 1px solid #fee2e2;
      border-radius: 10px;
      padding: 10px 12px;
      color: #991b1b;
      background: #fff7f7;
      font-size: 13px;
      font-weight: 900;
    }
    .arrival-fuel-summary span { color: #111827; }
    .arrival-fuel-summary em {
      color: #ef4444;
      font-style: normal;
      font-size: 12px;
    }
    #receiptViewBody .receipt-expense-proof-card {
      border-left-color: #f59e0b;
      background: #fffdf8;
    }
    #receiptViewBody .receipt-expense-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 9px;
      margin-bottom: 12px;
    }
    #receiptViewBody .receipt-expense-grid > div {
      display: grid;
      gap: 6px;
      padding: 12px;
      border: 1px solid #dbe4ef;
      border-radius: 12px;
      background: #fff;
    }
    #receiptViewBody .receipt-expense-grid span { color: #52657c; font-size: 12px; font-weight: 900; }
    #receiptViewBody .receipt-expense-grid strong { color: #111827; font-size: 17px; text-align: right; }
    #receiptViewBody .receipt-expense-grid em { color: #087747; font-size: 11px; font-style: normal; font-weight: 900; }
    #receiptViewBody .receipt-proof-grid {
      padding: 10px;
      border-radius: 10px;
      background: #f4faf7;
    }
    #receiptViewBody .receipt-numbered-summary::before,
    #receiptViewBody .receipt-numbered-route::before {
      grid-column: 1 / -1;
      display: block;
      padding: 10px 14px;
      color: #1f4f82;
      background: #f4f8fc;
      font-size: 14px;
      font-weight: 900;
      content: attr(data-section-label);
    }
    @media (max-width: 760px) {
      #receiptViewBody .receipt-expense-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 430px) {
      #receiptViewBody .receipt-expense-grid { grid-template-columns: 1fr; }
    }
    .receipt-doc {
      overflow: hidden;
      border: 1px solid #dfe7f1;
      border-radius: 8px;
      background: #fff;
    }
    .receipt-doc::before {
      content: none;
      display: block;
      padding: 16px 20px;
      color: #fff;
      background: linear-gradient(135deg, #006b3f, #004a2c);
      font-size: 22px;
      font-weight: 900;
    }
    .receipt-view-hero {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 18px 22px;
      color: #fff;
      background: linear-gradient(135deg, #006b3f, #004322);
    }
    .receipt-view-hero h3 {
      margin: 0;
      color: #fff;
      font-size: 28px;
      font-weight: 900;
    }
    .receipt-view-hero p {
      margin: 4px 0 0;
      color: rgba(255,255,255,.9);
      font-size: 14px;
      font-weight: 800;
    }
    .receipt-view-no {
      min-width: 170px;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 8px;
      padding: 10px 14px;
      background: rgba(255,255,255,.08);
    }
    .receipt-view-no span {
      display: block;
      margin-bottom: 4px;
      font-size: 13px;
      font-weight: 800;
    }
    .receipt-view-summary,
    .receipt-view-route {
      border-bottom: 1px solid #e5e7eb;
      padding: 12px 18px;
      background: #fff;
    }
    .receipt-view-summary {
      display: grid;
      grid-template-columns: 110px 1fr 80px 1fr;
      gap: 12px;
      align-items: center;
    }
    .receipt-view-summary span {
      color: #111827;
      font-size: 14px;
      font-weight: 900;
    }
    .receipt-view-summary strong {
      color: #111827;
      font-size: 21px;
      font-weight: 900;
    }
    .receipt-view-route {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }
    .receipt-view-route section:first-child {
      border-right: 1px solid #e5e7eb;
      padding-right: 18px;
    }
    .receipt-view-route h4 {
      margin: 0 0 10px;
      color: #006b3f;
      font-size: 19px;
      font-weight: 900;
    }
    .receipt-view-route p {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 10px;
      margin: 7px 0;
      color: #111827;
      font-size: 14px;
    }
    .receipt-doc-card {
      border: 0;
      border-bottom: 1px solid #e5e7eb;
      border-radius: 0;
      box-shadow: none;
    }
    .receipt-doc-card h4 {
      color: #006b3f;
      font-size: 18px;
      font-weight: 900;
    }
    .doc-info-item {
      border-bottom-color: #eef2f7;
      grid-template-columns: 24px 108px 1fr;
    }
    .doc-info-item span {
      color: #111827;
      font-size: 13px;
    }
    .doc-info-item strong {
      color: #111827;
      font-size: 15px;
      word-break: break-word;
    }
    .condition-pill.ok {
      border-color: #0b63ff;
      background: #eff6ff;
    }
    .condition-pill.bad {
      border-color: #ef4444;
      background: #fff7f7;
    }
    .receipt-signature-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      padding: 0;
    }
    .receipt-signature-box {
      min-height: 112px;
      border-right: 1px solid #e5e7eb;
      padding: 14px 18px;
    }
    .receipt-signature-box:last-child { border-right: 0; }
    .receipt-signature-box strong {
      display: block;
      margin-bottom: 10px;
      color: #111827;
      font-size: 14px;
    }
    .receipt-signature-box img {
      width: 100%;
      height: 68px;
      object-fit: contain;
      border-radius: 8px;
      background: #f8fafc;
    }
    #receiptViewBody .receipt-doc-card {
      border: 0;
      border-bottom: 1px solid #e5e7eb;
      border-radius: 0;
      box-shadow: none;
    }
    #receiptViewModal .modal {
      background: #dddddd;
    }
    #receiptViewBody .receipt-doc {
      padding: 0;
    }
    #receiptViewBody .receipt-doc-card h4 {
      color: #006b3f;
      font-size: 18px;
    }
    #receiptViewBody .condition-pill.ok {
      border-color: #0b63ff;
      background: #eff6ff;
    }
    #receiptViewBody .condition-pill.bad {
      border-color: #ef4444;
      background: #fff7f7;
    }
    #receiptViewBody .receipt-signature-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      padding: 0;
    }
    @media (max-width: 560px) {
      .receipt-view-hero,
      .receipt-view-summary,
      .receipt-view-route,
      #receiptViewBody .receipt-signature-section {
        grid-template-columns: 1fr;
      }
      .receipt-view-no {
        min-width: 0;
      }
      .receipt-view-route section:first-child {
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
        padding-right: 0;
        padding-bottom: 12px;
      }
      .receipt-signature-box {
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
      }
    }
    .image-viewer {
      width: min(100vw, 1100px);
      height: min(100vh, 920px);
      padding: 10px;
      background: #0f172a;
      display: grid;
      grid-template-rows: auto 1fr;
    }
    .image-viewer .modal-head h3 { color: #fff; }
    .image-viewer img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 8px;
      background: #020617;
    }
    .hidden { display: none !important; }
    @media (max-width: 560px) {
      .app-screen { padding: 14px 12px 28px; }
      .topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        border: 1px solid #e5edf6;
        border-radius: 14px;
        padding: 0 8px;
        background: rgba(247,249,252,.96);
        box-shadow: 0 8px 18px rgba(31, 45, 68, .08);
      }
      .menu-toggle { display: inline-grid; place-items: center; }
      .hero {
        padding: 14px 12px 12px;
        margin-bottom: 10px;
        border-radius: 16px;
      }
      .hero::after {
        right: 12px;
        top: 42px;
        width: 96px;
        height: 70px;
        border-radius: 14px;
      }
      .truck-art, .pin { display: none; }
      .hero h2 {
        margin-bottom: 4px;
        font-size: 16px;
      }
      .hero h2 strong { font-size: 22px; }
      .hero p {
        margin-bottom: 10px;
        font-size: 12.5px;
      }
      .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
      .stat {
        min-height: 54px;
        padding: 7px 3px;
        border-radius: 10px;
        text-align: center;
      }
      .stat-icon {
        width: 22px;
        height: 22px;
        margin: 0 auto 3px;
        font-size: 12px;
      }
      .stat span {
        font-size: 10px;
        white-space: nowrap;
      }
      .stat strong {
        margin-top: 3px;
        font-size: 21px;
      }
      .cta-grid { grid-template-columns: 1fr; gap: 10px; }
      .main-cta, .receipt-cta { padding: 12px 12px; min-height: 82px; }
      .cta-icon { width: 38px; height: 38px; font-size: 21px; }
      .cta-title { font-size: 15px; }
      .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
      .quick { padding: 8px 7px; }
      .quick strong { font-size: 12px; }
      .receipt-grid, .condition-grid { grid-template-columns: 1fr; }
      .driver-summary,
      .doc-info-grid,
      .receipt-condition-layout,
      .receipt-photo-section { grid-template-columns: 1fr; }
      .arrival-fuel-summary { grid-template-columns: 1fr; }
      .quick span { font-size: 10px; }
      .order-card { grid-template-columns: 76px 1fr 28px; }
      .form-grid, .fare, .segmented-row, .tax-invoice-fields { grid-template-columns: 1fr; }
      .address-search-control { grid-template-columns: minmax(0, 1fr) auto; }
      .address-search-button { min-width: 58px; padding-inline: 8px; }
      .fuel-input-row { grid-template-columns: 1fr; }
      .quick-amounts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .inline-option-row { grid-template-columns: 1fr; }
      .route-map { height: 220px; }
      .map-picker-view { height: 58vh; }
      .map-picker-actions { display: grid; grid-template-columns: 1fr 1fr; }
      .support-layout { grid-template-columns: 1fr; }
      .bottom-nav {
        display: none;
        left: auto;
        right: 12px;
        top: 72px;
        bottom: auto;
        transform: none;
        width: min(280px, calc(100% - 24px));
        grid-template-columns: 1fr;
        gap: 4px;
        border-radius: 14px;
        padding: 8px;
        z-index: 35;
      }
      .app-screen.menu-open .bottom-nav { display: grid; }
      .nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 8px 10px;
        text-align: left;
        font-size: 13px;
      }
      .nav-item strong {
        width: 24px;
        margin-bottom: 0;
        font-size: 18px;
        text-align: center;
      }
    }
    @media (max-width: 380px) {
      .stats { gap: 4px; }
      .stat {
        min-height: 50px;
        padding: 6px 2px;
      }
      .stat-icon {
        width: 20px;
        height: 20px;
        font-size: 11px;
      }
      .stat span { font-size: 9.5px; }
      .stat strong { font-size: 19px; }
      .main-cta, .receipt-cta { min-height: 76px; }
    }
    @media (min-width: 561px) and (max-width: 759px) {
      .app-screen { padding: 18px 16px 32px; }
      .hero {
        padding: 16px 14px 14px;
        margin-bottom: 10px;
      }
      .hero::after {
        right: 16px;
        top: 42px;
        width: 112px;
        height: 82px;
      }
      .truck-art, .pin { transform: scale(.68); transform-origin: top right; }
      .hero h2 { margin-bottom: 5px; }
      .hero p {
        margin-bottom: 12px;
        font-size: 13px;
      }
      .topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        border: 1px solid #e5edf6;
        border-radius: 14px;
        padding: 0 8px;
        background: rgba(247,249,252,.96);
        box-shadow: 0 8px 18px rgba(31, 45, 68, .08);
      }
      .menu-toggle { display: inline-grid; place-items: center; }
      .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
      .stat {
        min-height: 58px;
        padding: 8px 5px;
        text-align: center;
      }
      .stat-icon {
        width: 24px;
        height: 24px;
        margin: 0 auto 3px;
        font-size: 13px;
      }
      .stat span {
        font-size: 11px;
        white-space: nowrap;
      }
      .stat strong {
        margin-top: 4px;
        font-size: 24px;
      }
      .main-cta, .receipt-cta {
        min-height: 88px;
        padding: 12px 14px;
      }
      .cta-icon {
        width: 40px;
        height: 40px;
        font-size: 22px;
      }
      .bottom-nav {
        display: none;
        left: auto;
        right: 16px;
        top: 76px;
        bottom: auto;
        transform: none;
        width: 280px;
        grid-template-columns: 1fr;
        gap: 4px;
        border-radius: 14px;
        padding: 8px;
        z-index: 35;
      }
      .app-screen.menu-open .bottom-nav { display: grid; }
      .nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 8px 10px;
        text-align: left;
        font-size: 13px;
      }
      .nav-item strong {
        width: 24px;
        margin-bottom: 0;
        font-size: 18px;
        text-align: center;
      }
    }
    @media (min-width: 760px) {
      .auth-card { padding: 32px; }
      .app-screen { padding: 92px 24px 32px; }
      .app-shell { width: min(920px, 100%); }
      .hero { padding: 30px 28px 24px; }
      .hero h2 { font-size: 22px; }
      .hero h2 strong { font-size: 30px; }
      .hero p { font-size: 15px; }
      .hero::after {
        right: 40px;
        top: 28px;
        width: 240px;
        height: 150px;
      }
      .truck-art {
        right: 86px;
        top: 76px;
        transform: scale(1.15);
        transform-origin: center;
      }
      .pin {
        right: 218px;
        top: 48px;
      }
      .stats { max-width: 620px; }
      .stat { min-height: 96px; }
      .cta-grid { grid-template-columns: 1.15fr .95fr .95fr; }
      .main-cta, .receipt-cta { min-height: 118px; }
      .form-grid { grid-template-columns: repeat(2, 1fr); }
      .fare { grid-template-columns: repeat(3, 1fr); }
      .orders-list { grid-template-columns: 1fr; }
      .quick-grid { grid-template-columns: repeat(4, 1fr); }
      .bottom-nav { width: min(760px, calc(100% - 40px)); }
    }
    @media (min-width: 1180px) {
      .app-screen { padding-top: 28px; }
      .app-shell { width: min(1120px, 100%); }
      .hero {
        min-height: 250px;
        padding: 34px 34px 28px;
      }
      .hero::after {
        right: 70px;
        width: 300px;
        height: 172px;
      }
      .truck-art {
        right: 136px;
        top: 86px;
        transform: scale(1.35);
      }
      .pin { right: 300px; }
      .cta-grid {
        grid-template-columns: 1.15fr .95fr .95fr;
        gap: 16px;
      }
      .main-cta, .receipt-cta {
        min-height: 126px;
        padding: 22px;
      }
      .orders-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .order-card { min-height: 128px; }
      .quick-grid { gap: 14px; }
      .quick { min-height: 92px; padding: 14px; }
    }

    #newOrderPanel,
    #receiptViewModal .modal {
      color: #111827;
      background: #f6f8fb;
    }
    #newOrderPanel {
      border: 1px solid #dfe8f3;
      border-radius: 22px;
      padding: 18px;
      box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    }
    #newOrderPanel .panel-head {
      margin: -18px -18px 18px;
      padding: 18px 22px;
      border-bottom: 1px solid #e2e8f0;
      border-radius: 22px 22px 0 0;
      background: rgba(255, 255, 255, .94);
    }
    #newOrderPanel .panel-head h3,
    #receiptViewModal .modal-head h3 {
      color: #0f172a;
      font-size: 20px;
      font-weight: 900;
    }
    #newOrderPanel .form-grid {
      gap: 1px;
    }
    #newOrderPanel label,
    #newOrderPanel .check-row {
      gap: 0px;
      color: #475569;
      font-size: 12px;
      font-weight: 900;
    }
    #newOrderPanel input,
    #newOrderPanel select,
    #newOrderPanel textarea {
      min-height: 0px;
      border: 1px solid #dbe5f0;
      border-radius: 12px;
      padding: 6px 8px;
      color: #111827;
      background: #fff;
      box-shadow: inset 0 1px 0 rgba(15, 23, 42, .03);
    }
    #newOrderPanel textarea {
      min-height: 54px;
    }
    #newOrderPanel input:focus,
    #newOrderPanel select:focus,
    #newOrderPanel textarea:focus {
      outline: 3px solid rgba(37, 99, 235, .16);
      border-color: #2563eb;
    }
    #newOrderPanel .segment input {
      width: auto;
      min-width: 15px;
      height: 15px;
      min-height: auto;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      accent-color: #0b63ff;
    }
    #newOrderPanel .form-section {
      border: 1px solid #dfe8f3;
      border-left: 5px solid #3b82f6;
      border-radius: 16px;
      padding: 18px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    }
    #newOrderPanel .form-section:nth-of-type(2) { border-left-color: #0891b2; }
    #newOrderPanel .form-section:nth-of-type(3) { border-left-color: #16a34a; }
    #newOrderPanel .form-section:nth-of-type(4) { border-left-color: #f59e0b; }
    #receiptViewModal.modal-backdrop {
      padding: 24px;
      background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .16), transparent 32%),
        rgba(15, 23, 42, .58);
    }
    #receiptViewModal .modal {
      width: min(1080px, 100%);
      max-height: calc(100vh - 48px);
      border: 1px solid rgba(226, 232, 240, .95);
      border-radius: 22px;
      padding: 0;
      box-shadow: 0 28px 80px rgba(15, 23, 42, .34);
    }
    #receiptViewModal .modal-head {
      position: sticky;
      top: 0;
      z-index: 3;
      margin: 0;
      padding: 18px 22px;
      border-bottom: 1px solid #e2e8f0;
      background: rgba(255, 255, 255, .94);
      backdrop-filter: blur(12px);
    }
    #receiptViewModal .modal-head .secondary {
      min-width: 42px;
      border-radius: 999px;
      border-color: #dbe3ee;
      color: #475569;
      background: #fff;
    }
    #receiptViewBody {
      padding: 18px;
    }
    #receiptViewBody .receipt-doc {
      padding: 0;
      gap: 18px;
    }
    #receiptViewBody .receipt-doc-card,
    #receiptViewBody .receipt-view-summary,
    #receiptViewBody .receipt-view-route,
    #receiptViewBody .receipt-signature-section {
      border: 1px solid #dfe8f3;
      border-left: 5px solid #3b82f6;
      border-radius: 16px;
      padding: 18px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    }
    #receiptViewBody .receipt-doc-card {
      border-bottom: 1px solid #dfe8f3;
    }
    #receiptViewBody .receipt-doc-card:nth-of-type(2),
    #receiptViewBody .receipt-view-route { border-left-color: #0891b2; }
    #receiptViewBody .receipt-doc-card:nth-of-type(3) { border-left-color: #16a34a; }
    #receiptViewBody .receipt-doc-card:nth-of-type(4) { border-left-color: #f59e0b; }
    #receiptViewBody .receipt-doc-card:nth-of-type(5),
    #receiptViewBody .receipt-signature-section { border-left-color: #7c3aed; }
    #receiptViewBody .receipt-doc-card h4,
    #receiptViewBody .receipt-view-route h4 {
      color: #0f172a;
      font-size: 16px;
      font-weight: 900;
    }
    #receiptViewBody .doc-info-item,
    #receiptViewBody .receipt-field {
      border-color: #e1e8f2;
      border-radius: 14px;
      padding: 12px 14px;
      background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
    }
    @media (max-width: 720px) {
      #newOrderPanel {
        border-radius: 16px;
        padding: 12px;
      }
      #newOrderPanel .panel-head {
        margin: -12px -12px 12px;
        padding: 14px 16px;
        border-radius: 16px 16px 0 0;
      }
      #receiptViewModal.modal-backdrop {
        padding: 10px;
      }
      #receiptViewModal .modal {
        max-height: calc(100vh - 20px);
        border-radius: 16px;
      }
      #receiptViewBody {
        padding: 12px;
      }
      #receiptViewBody .receipt-doc-card,
      #receiptViewBody .receipt-view-summary,
      #receiptViewBody .receipt-view-route,
      #receiptViewBody .receipt-signature-section {
        padding: 14px;
        border-radius: 14px;
      }
    }
    #authScreen.auth-screen {
      position: relative;
      overflow: hidden;
      padding: 18px;
      color: #f8fafc;
      background:
        radial-gradient(circle at 18% 12%, rgba(31, 91, 180, .28), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(35, 105, 207, .24), transparent 28%),
        linear-gradient(155deg, #071327 0%, #101d34 48%, #080f1e 100%);
    }
    #authScreen.auth-screen::before {
      content: "";
      position: absolute;
      top: -34px;
      right: -45px;
      width: 250px;
      height: 230px;
      opacity: .32;
      transform: rotate(-10deg);
      background:
        radial-gradient(circle at 30% 20%, #60a5fa 0 5px, transparent 6px),
        radial-gradient(circle at 70% 50%, #60a5fa 0 6px, transparent 7px),
        linear-gradient(30deg, transparent 47%, #2d6fc3 48% 51%, transparent 52%),
        linear-gradient(105deg, transparent 36%, #24538d 37% 40%, transparent 41%),
        linear-gradient(165deg, transparent 55%, #346ca8 56% 59%, transparent 60%);
      border: 3px solid #1f4f89;
      border-radius: 24px;
    }
    #authScreen .auth-card {
      position: relative;
      z-index: 1;
      width: min(430px, 100%);
      max-height: calc(100vh - 36px);
      overflow-y: auto;
      border: 1px solid rgba(76, 140, 231, .55);
      border-radius: 17px;
      padding: 22px 24px;
      color: #f8fafc;
      background: linear-gradient(155deg, rgba(16, 34, 61, .94), rgba(12, 20, 36, .96));
      box-shadow: inset 0 0 0 5px rgba(5, 14, 29, .46), 0 22px 60px rgba(0, 0, 0, .42);
      scrollbar-width: thin;
    }
    #authScreen .brand {
      display: grid;
      justify-items: center;
      gap: 2px;
      margin: 0 0 6px;
      font-size: 22px;
      line-height: 1.1;
    }
    #authScreen .brand-mark {
      width: 132px;
      height: 54px;
      filter: brightness(0) invert(1) drop-shadow(0 4px 10px rgba(0,0,0,.3));
    }
    #authScreen .brand strong { font-weight: 800; }
    #authScreen .language-picker {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin: 0 0 4px;
      color: #dbe8f8;
      font-size: 12px;
      font-weight: 800;
    }
    #authScreen .language-picker select {
      width: auto;
      min-width: 112px;
      height: 34px;
      padding: 4px 30px 4px 10px;
      border: 1px solid rgba(148,163,184,.55);
      border-radius: 9px;
      color: #fff;
      background: #142742;
    }
    .i18n-native-file {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      opacity: 0 !important;
      pointer-events: none;
    }
    .i18n-file-control { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; }
    .i18n-file-button {
      flex: 0 0 auto; padding: 9px 13px; border: 1px solid #cbd5e1; border-radius: 9px;
      color: #24364f; background: #f8fafc; font-size: 13px; font-weight: 800; cursor: pointer;
    }
    .i18n-file-name { min-width: 0; overflow: hidden; color: #64748b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
    #authScreen .auth-title {
      margin: 5px 0 4px;
      color: #fff;
      text-align: center;
      font-size: clamp(34px, 9vw, 46px);
      font-weight: 900;
      letter-spacing: -2px;
    }
    #authScreen .auth-copy {
      max-width: 330px;
      margin: 0 auto 16px;
      color: #aebbd0;
      text-align: center;
      font-size: 13px;
      line-height: 1.55;
    }
    #authScreen .tabs {
      gap: 3px;
      margin-bottom: 14px;
      padding: 3px;
      border: 1px solid rgba(148, 163, 184, .18);
      border-radius: 10px;
      background: rgba(255, 255, 255, .08);
    }
    #authScreen .tab {
      min-height: 40px;
      border-radius: 8px;
      color: #cbd5e1;
    }
    #authScreen .tab.active {
      color: #fff;
      background: linear-gradient(180deg, rgba(119, 153, 199, .55), rgba(56, 78, 112, .72));
      box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .25), 0 4px 12px rgba(0, 0, 0, .25);
    }
    #authScreen .auth-form { gap: 10px; }
    #authScreen .auth-form > label {
      gap: 6px;
      color: #f1f5f9;
      font-size: 13px;
      font-weight: 900;
    }
    #authScreen .auth-form input,
    #authScreen .auth-form select,
    #authScreen .auth-form textarea {
      min-height: 44px;
      border-color: rgba(148, 163, 184, .55);
      border-radius: 10px;
      color: #fff;
      background: rgba(255, 255, 255, .1);
      box-shadow: inset 0 1px 4px rgba(0, 0, 0, .24);
    }
    #authScreen .auth-form input::placeholder,
    #authScreen .auth-form textarea::placeholder { color: #9aa8bc; }
    #authScreen #loginPhone,
    #authScreen #loginPassword {
      padding-left: 42px;
      background-repeat: no-repeat;
      background-position: 14px center;
      background-size: 16px 16px;
    }
    #authScreen #loginPhone {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aebbd0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.69 2.8a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.56 2.81.69A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    }
    #authScreen #loginPassword {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aebbd0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    }
    #authScreen .auth-form input:focus,
    #authScreen .auth-form select:focus,
    #authScreen .auth-form textarea:focus {
      outline: 2px solid rgba(59, 130, 246, .55);
      border-color: #60a5fa;
    }
    #authScreen .remember-login-row {
      gap: 8px 14px;
      color: #e2e8f0;
      font-size: 12px;
    }
    #authScreen .remember-login-row label { color: #e2e8f0; }
    #authScreen .remember-login-row input { accent-color: #1677ff; }
    #authScreen #loginButton {
      min-height: 48px;
      margin-top: 2px;
      border-radius: 20px;
      font-size: 17px;
      background: linear-gradient(110deg, #1747bd 0%, #087bff 100%);
      box-shadow: 0 10px 24px rgba(0, 91, 255, .35);
    }
    #authScreen .secondary {
      border-color: rgba(148, 163, 184, .4);
      color: #e5edf8;
      background: rgba(255,255,255,.08);
    }
    #authScreen #scanNamecardButton {
      border-color: #7da7df;
      color: #123f7a;
      background: #e8f1ff;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 3px 8px rgba(15, 45, 86, .12);
    }
    #authScreen #scanNamecardButton:hover,
    #authScreen #scanNamecardButton:focus-visible {
      border-color: #3b82f6;
      color: #082f68;
      background: #dbeafe;
    }
    @media (max-width: 480px) {
      #authScreen.auth-screen { padding: 8px; }
      #authScreen .auth-card {
        max-height: calc(100vh - 16px);
        padding: 18px 18px;
      }
      #authScreen .auth-title { font-size: 39px; }
    }
    /* Customer dashboard: light desktop layout. Existing controls and IDs are preserved. */
    #appScreen.app-screen {
      min-height:100vh; padding:102px 30px 44px; color:#172033;
      background:linear-gradient(145deg,#f5f7fa 0%,#ffffff 48%,#f3f5f8 100%);
    }
    #appScreen .app-shell { width:min(1540px,100%); margin:0 auto; }
    #appScreen .topbar {
      position:fixed; z-index:30; top:0; left:0; width:270px; height:78px; margin:0; padding-left:30px;
      display:flex; align-items:center; border-bottom:1px solid #173253; background:rgba(5,24,49,.98); backdrop-filter:blur(12px);
    }
    #appScreen .topbar-logo { width:165px; height:54px; object-fit:contain; filter:brightness(0) invert(1); }
    #appScreen .topbar h1,#appScreen .menu-toggle { display:none; }
    #appScreen .bottom-nav {
      position:fixed; z-index:29; top:0; right:0; bottom:auto; left:270px; width:auto; height:78px; padding:0 28px 0 70px;
      display:flex; align-items:stretch; gap:20px; border:0; border-bottom:1px solid #e1e5eb; border-radius:0;
      max-width:none; transform:none; overflow:visible; justify-content:flex-start;
      background:rgba(5,24,49,.98); border-bottom-color:#173253; box-shadow:none; backdrop-filter:blur(12px);
    }
    #appScreen .nav-item {
      position:relative; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:10px; min-width:112px;
      flex:0 1 125px; border:0; border-radius:0; padding:0 12px; color:#d6e1ef; background:transparent; font-size:14px; font-weight:800;
    }
    #appScreen .nav-item strong { width:auto; margin:0; color:#d6e1ef; font-size:23px; }
    #appScreen .nav-item:hover,#appScreen .nav-item.active { color:#fff; background:linear-gradient(180deg,rgba(31,91,174,.38),rgba(11,48,91,.72)); }
    #appScreen .nav-item.active strong { color:#48a0ff; }
    #appScreen .nav-item.active::after { content:""; position:absolute; right:0; bottom:0; left:0; height:3px; background:#2383ff; box-shadow:0 0 9px rgba(35,131,255,.7); }
    #appScreen #logoutButton { margin-left:auto; }
    #appScreen .hero,#appScreen .panel,#appScreen .quick,#appScreen .receipt-cta {
      border:1px solid #d8dee7; color:#172033; background:rgba(255,255,255,.96);
      box-shadow:0 8px 24px rgba(15,23,42,.045);
    }
    #appScreen .hero {
      min-height:255px; margin:0 0 18px; padding:28px 38px 24px; border-radius:14px; overflow:hidden;
      background:linear-gradient(145deg,#fff,#fbfcfe);
    }
    #appScreen .hero::before {
      content:""; position:absolute; right:18px; top:10px; width:38%; height:225px; opacity:.32;
      background:linear-gradient(30deg,transparent 47%,#b7c0cc 48% 50%,transparent 51%),linear-gradient(105deg,transparent 35%,#c2c9d2 36% 38%,transparent 39%),linear-gradient(160deg,transparent 58%,#bbc4cf 59% 61%,transparent 62%); border-radius:18px;
    }
    #appScreen .hero h2 { position:relative; z-index:2; margin:0 0 8px; color:#172033; font-size:26px; }
    #appScreen .hero h2 strong { color:#0b63ff; font-size:38px; }
    #appScreen .hero > p { position:relative; z-index:2; margin:0 0 24px; color:#7b8797; font-size:14px; }
    #appScreen .truck-art { right:12%; top:90px; width:92px; height:43px; background:#2456a5; box-shadow:-30px 10px 0 #d4dce6; }
    #appScreen .pin { right:24%; top:42px; background:#1685ff; box-shadow:110px 75px 0 #1685ff; }
    #appScreen .stats { position:relative; z-index:2; width:68%; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
    #appScreen .stat {
      min-height:105px; grid-template-columns:58px 1fr; gap:10px; border:1px solid #d8dee7; border-radius:11px; padding:16px;
      background:#fff; box-shadow:none;
    }
    #appScreen .stat-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; color:#1769d7; background:#f0f4fa; font-size:26px; }
    #appScreen .stat span { color:#344054; font-size:13px; }
    #appScreen .stat strong { color:#0b63ff; font-size:30px; }
    #appScreen .stat.orange .stat-icon,#appScreen .stat.orange strong { color:#ff7100; }
    #appScreen .stat.green .stat-icon,#appScreen .stat.green strong { color:#079a60; }
    #appScreen .cta-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0 0 20px; }
    #appScreen .main-cta,#appScreen .receipt-cta { min-height:124px; border-radius:13px; padding:22px 26px; text-align:left; }
    #appScreen .main-cta { border:1px solid #315f99; background:linear-gradient(115deg,#315f99,#163c72); box-shadow:0 12px 28px rgba(25,67,123,.18); }
    #appScreen .cta-icon { display:grid; place-items:center; width:66px; height:66px; border-radius:18px; color:#475569; background:#f0f3f7; font-size:34px; }
    #appScreen .main-cta .cta-icon { color:#fff; background:rgba(190,216,255,.22); }
    #appScreen .cta-title { color:#172033; font-size:21px; }
    #appScreen .main-cta .cta-title { color:#fff; }
    #appScreen .cta-sub { margin-top:6px; color:#7b8797; font-size:13px; }
    #appScreen .main-cta .cta-sub { color:#c0d5f1; }
    #appScreen .chevron { color:#334155; font-size:36px; }
    #appScreen .main-cta .chevron { color:#fff; }
    #appScreen #progressPanel { margin:0 0 20px; border-radius:13px; padding:20px 24px; }
    #appScreen .panel-head { border:0; margin:0 0 14px; padding:0; background:transparent; }
    #appScreen .panel-head h3 { color:#172033; font-size:19px; }
    #appScreen .text-link { color:#64748b; }
    #appScreen .search-row { grid-template-columns:minmax(0,1fr) auto; gap:12px; }
    #appScreen .search-row input { border-color:#d7dde5; color:#172033; background:#fff; box-shadow:none; }
    #appScreen input::placeholder,#appScreen textarea::placeholder { color:#8b96a5; }
    #appScreen .filter-button,#appScreen .chip { border-color:#d7dde5; color:#475569; background:#fff; }
    #appScreen .chip.active { border-color:#0b63ff; color:#fff; background:linear-gradient(110deg,#135ad1,#087bff); }
    #appScreen .orders-list { margin-top:14px; }
    #appScreen .order-card { border-color:#dbe1e9; color:#263241; background:#fff; }
    #appScreen .quick-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
    #appScreen .quick { min-height:100px; border-radius:13px; padding:18px; text-align:left; }
    #appScreen .quick-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:14px; color:#1769d7; background:#f0f4fa; font-size:25px; }
    #appScreen .quick strong { color:#172033; font-size:16px; }
    #appScreen .quick span { color:#7b8797; }
    #appScreen .quick.receipt-arrival strong,#appScreen .quick.receipt-arrival .receipt-count { color:#ff4c22; }
    #appScreen #newOrderPanel { border-radius:14px; color:#172033; background:#fff; }
    #appScreen #supportPanel {
      position:static; width:100%; height:auto; margin:0; padding:0;
      display:block; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none;
    }
    #appScreen #supportPanel.hidden { display:none; }
    #appScreen .support-modal-card {
      width:100%; max-height:none; overflow:visible; border:1px solid #d8dee7; border-radius:18px;
      padding:20px; color:#172033; background:#fff; box-shadow:0 10px 30px rgba(15,23,42,.08);
    }
    #appScreen .support-modal-card .panel-head { position:sticky; top:-20px; z-index:2; padding:14px 0; background:#fff; }
    #appScreen .support-modal-card .panel-head-actions { display:flex; align-items:center; gap:10px; }
    #appScreen .support-modal-card .support-layout { grid-template-columns:minmax(250px,1fr) minmax(0,2fr); }
    #appScreen .support-modal-card .support-form textarea { min-height:180px; }
    #appScreen .support-modal-card .admin-message-list { grid-column:1 / -1; }
    @media (max-width:1100px) {
      #appScreen.app-screen { padding:92px 18px 100px; }
      #appScreen .bottom-nav { gap:4px; padding-left:12px; }
      #appScreen .nav-item { flex:1 1 0; min-width:0; padding-inline:5px; font-size:12px; }
      #appScreen .stats { width:100%; }
      #appScreen .hero::before,#appScreen .truck-art,#appScreen .pin { opacity:.15; }
    }
    @media (max-width:760px) {
      #appScreen.app-screen { padding:74px 12px 92px; }
      #appScreen .topbar { width:100%; height:62px; padding:0 14px; justify-content:space-between; }
      #appScreen .topbar-logo { width:145px; }
      #appScreen .menu-toggle { display:block; border-color:#315278; color:#fff; background:#0a2a50; }
      #appScreen .bottom-nav {
        display:none; top:66px; right:12px; bottom:auto; left:auto; width:min(280px,calc(100% - 24px)); height:auto;
        padding:8px; gap:4px; border:1px solid #d8dee7; border-radius:14px; grid-template-columns:1fr; transform:none;
        background:rgba(5,24,49,.99); border-color:#25476e; box-shadow:0 14px 34px rgba(15,23,42,.28);
      }
      #appScreen.menu-open .bottom-nav { display:grid; }
      #appScreen .nav-item { min-width:0; min-height:44px; padding:8px 10px; flex-direction:row; justify-content:flex-start; gap:10px; font-size:13px; text-align:left; }
      #appScreen .nav-item strong { width:24px; margin:0; font-size:18px; text-align:center; }
      #appScreen #logoutButton { margin-left:0; }
      #appScreen .hero { min-height:0; padding:18px 12px; }
      #appScreen .hero h2 { font-size:20px; }
      #appScreen .hero h2 strong { font-size:29px; }
      #appScreen .stats { width:100%; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
      #appScreen .stat { min-width:0; min-height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px 2px; text-align:center; }
      #appScreen .stat-icon { width:27px; height:27px; margin:0; font-size:13px; }
      #appScreen .stat span { max-width:100%; font-size:9px; line-height:1.15; white-space:nowrap; }
      #appScreen .stat strong { margin:0; font-size:19px; line-height:1; }
      #appScreen .cta-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
      #appScreen .quick-grid { grid-template-columns:1fr; gap:10px; }
      #appScreen .main-cta,#appScreen .receipt-cta {
        min-width:0; min-height:76px; display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:5px; padding:8px 4px; text-align:center;
      }
      #appScreen .main-cta .cta-icon,#appScreen .receipt-cta .cta-icon { width:34px; height:34px; border-radius:10px; font-size:19px; }
      #appScreen .main-cta .cta-title,#appScreen .receipt-cta .cta-title { display:block; font-size:11px; line-height:1.2; word-break:keep-all; }
      #appScreen .main-cta .cta-sub,#appScreen .receipt-cta .cta-sub,#appScreen .main-cta .chevron,#appScreen .receipt-cta .chevron { display:none; }
      #appScreen .quick { min-height:82px; }
      #appScreen #supportPanel { padding:0; }
      #appScreen .support-modal-card { max-height:none; padding:14px; border-radius:14px; }
      #appScreen .support-modal-card .panel-head { top:-14px; }
      #appScreen .support-modal-card .support-layout { grid-template-columns:1fr; }
      #appScreen .support-modal-card .admin-message-list { grid-column:auto; }
    }
.organization-invite-banner{border:1px solid #9ec5fe;border-radius:10px;padding:11px 13px;background:#eef6ff;color:#174b8f;font-size:12px;font-weight:700;line-height:1.55}.organization-invite-banner strong{display:block;color:#102f57;font-size:14px}.organization-invite-banner.error{border-color:#fda29b;background:#fff3f2;color:#b42318}