@media (max-width: 760px) {
  body:has(.orders-overview-page) {
    --op-ink: #14161b;
    --op-muted: #7a7f89;
    --op-soft: rgba(255, 255, 255, 0.72);
    --op-line: rgba(18, 22, 30, 0.06);
    --op-yellow: #ffd93d;
    --op-yellow-strong: #ffcf26;
    --op-blue: #0a84ff;
    --op-deep: #0e3447;
    --op-shadow: 0 20px 54px rgba(31, 45, 70, 0.12);
    background:
      radial-gradient(circle at 18% -8%, rgba(255, 217, 61, 0.22), transparent 30%),
      radial-gradient(circle at 88% 12%, rgba(10, 132, 255, 0.12), transparent 34%),
      linear-gradient(180deg, #fbfcff 0%, #eef5fc 48%, #f8f9fb 100%) !important;
  }

  body:has(.orders-overview-page)::before {
    opacity: 0.52;
    background:
      linear-gradient(110deg, rgba(255, 217, 61, 0.13), transparent 42%),
      linear-gradient(245deg, rgba(10, 132, 255, 0.11), transparent 44%) !important;
  }

  body:has(.orders-overview-page) .workspace {
    padding-top: 92px !important;
  }

  body:has(.orders-overview-page) .topbar {
    top: max(8px, env(safe-area-inset-top)) !important;
    width: min(calc(100vw - 14px), 466px) !important;
    border-color: rgba(255, 255, 255, 0.84) !important;
    border-radius: 32px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.91), rgba(250, 252, 255, 0.68)),
      rgba(255, 255, 255, 0.74) !important;
    box-shadow:
      0 18px 44px rgba(31, 45, 70, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  }

  body:has(.orders-overview-page) .page.orders-overview-page {
    width: min(calc(100vw - 18px), 466px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 0 calc(108px + env(safe-area-inset-bottom)) !important;
    display: grid;
    gap: 13px;
    background: transparent !important;
    color: var(--op-ink);
  }

  body:has(.orders-overview-page) .orders-source-head,
  body:has(.orders-overview-page) .delivery-workbench,
  body:has(.orders-overview-page) .orders-action-grid,
  body:has(.orders-overview-page) .orders-filter-strip,
  body:has(.orders-overview-page) .order-source-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 249, 252, 0.64)),
      rgba(255, 255, 255, 0.72) !important;
    box-shadow:
      var(--op-shadow),
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(18, 22, 30, 0.035) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
  }

  body:has(.orders-overview-page) .orders-source-head::before,
  body:has(.orders-overview-page) .delivery-workbench::before,
  body:has(.orders-overview-page) .orders-action-grid::before,
  body:has(.orders-overview-page) .orders-filter-strip::before,
  body:has(.orders-overview-page) .order-source-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background:
      linear-gradient(124deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.12) 40%, rgba(255, 255, 255, 0) 68%),
      radial-gradient(circle at 82% 12%, rgba(255, 217, 61, 0.14), transparent 30%);
    opacity: 0.72;
  }

  body:has(.orders-overview-page) .orders-source-head {
    min-height: 104px !important;
    margin: 0 !important;
    padding: 22px 18px !important;
    border-radius: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body:has(.orders-overview-page) .orders-source-head h1 {
    margin: 0 !important;
    color: var(--op-ink) !important;
    font-size: 27px !important;
    line-height: 1.05 !important;
    font-weight: 860 !important;
    letter-spacing: 0 !important;
  }

  body:has(.orders-overview-page) .orders-source-head p {
    margin: 8px 0 0 !important;
    color: var(--op-muted) !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 650 !important;
  }

  body:has(.orders-overview-page) .orders-source-head button {
    width: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 253, 0.52)),
      rgba(255, 255, 255, 0.64) !important;
    color: #9aa4b2 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  }

  body:has(.orders-overview-page) .delivery-workbench {
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 32px !important;
  }

  body:has(.orders-overview-page) .delivery-workbench-head {
    display: grid !important;
    gap: 10px !important;
  }

  body:has(.orders-overview-page) .delivery-workbench-head > div:first-child {
    display: grid !important;
    gap: 8px !important;
  }

  body:has(.orders-overview-page) .delivery-workbench-head span {
    width: fit-content;
    min-height: 26px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    background: rgba(255, 217, 61, 0.23) !important;
    color: #7a5b00 !important;
    font-size: 12px !important;
    font-weight: 820 !important;
  }

  body:has(.orders-overview-page) .delivery-workbench-head h2 {
    margin: 0 !important;
    color: var(--op-ink) !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    font-weight: 860 !important;
  }

  body:has(.orders-overview-page) .delivery-workbench-head p {
    margin: 0 !important;
    color: #707782 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
  }

  body:has(.orders-overview-page) .delivery-module-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin-top: 2px !important;
  }

  body:has(.orders-overview-page) .delivery-module-links button {
    min-height: 44px !important;
    border: 1px solid rgba(18, 22, 30, 0.065) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 251, 253, 0.62)),
      rgba(255, 255, 255, 0.68) !important;
    color: #222832 !important;
    font-size: 14px !important;
    font-weight: 780 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 8px 16px rgba(31, 45, 70, 0.045) !important;
  }

  body:has(.orders-overview-page) .delivery-module-links button.active {
    border-color: rgba(255, 204, 0, 0.48) !important;
    background:
      linear-gradient(180deg, rgba(255, 226, 86, 0.94), rgba(255, 210, 35, 0.82)),
      var(--op-yellow) !important;
    color: #121212 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.64),
      0 10px 20px rgba(255, 204, 41, 0.16) !important;
  }

  body:has(.orders-overview-page) .delivery-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  body:has(.orders-overview-page) .delivery-metrics article {
    min-height: 104px !important;
    padding: 13px 12px !important;
    border: 1px solid rgba(18, 22, 30, 0.045) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 250, 252, 0.62)),
      rgba(255, 255, 255, 0.72) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 10px 20px rgba(31, 45, 70, 0.055) !important;
  }

  body:has(.orders-overview-page) .delivery-metrics span {
    color: #687181 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 760 !important;
  }

  body:has(.orders-overview-page) .delivery-metrics strong {
    color: #111722 !important;
    font-size: 28px !important;
    line-height: 1.08 !important;
    font-weight: 860 !important;
  }

  body:has(.orders-overview-page) .delivery-metrics small {
    width: fit-content;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 217, 61, 0.2) !important;
    color: #705400 !important;
    font-size: 12px !important;
    font-weight: 760 !important;
  }

  body:has(.orders-overview-page) .delivery-metrics .danger small {
    background: rgba(255, 99, 99, 0.12) !important;
    color: #b4493f !important;
  }

  body:has(.orders-overview-page) .delivery-metrics .warning small,
  body:has(.orders-overview-page) .delivery-metrics .info small {
    background: rgba(10, 132, 255, 0.1) !important;
    color: #1467c8 !important;
  }

  body:has(.orders-overview-page) .orders-action-grid {
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 30px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  body:has(.orders-overview-page) .orders-action-grid button {
    min-height: 52px !important;
    border: 1px solid rgba(18, 22, 30, 0.055) !important;
    border-radius: 20px !important;
    justify-content: center !important;
    gap: 0 !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 253, 0.62)),
      rgba(255, 255, 255, 0.68) !important;
    color: #18202b !important;
    font-size: 14px !important;
    font-weight: 820 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 8px 18px rgba(31, 45, 70, 0.055) !important;
  }

  body:has(.orders-overview-page) .orders-action-grid button svg {
    display: none !important;
  }

  body:has(.orders-overview-page) .orders-action-grid button.gallery {
    border-color: rgba(255, 204, 0, 0.5) !important;
    background:
      linear-gradient(180deg, rgba(255, 226, 86, 0.95), rgba(255, 210, 35, 0.82)),
      var(--op-yellow) !important;
    color: #111 !important;
  }

  body:has(.orders-overview-page) .orders-action-grid button:not(.gallery):nth-child(2) {
    border-color: rgba(14, 52, 71, 0.18) !important;
    background:
      linear-gradient(180deg, rgba(22, 68, 88, 0.95), rgba(11, 48, 67, 0.94)),
      var(--op-deep) !important;
    color: #fff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 12px 22px rgba(14, 52, 71, 0.15) !important;
  }

  body:has(.orders-overview-page) .orders-action-grid button:disabled {
    opacity: 0.52 !important;
  }

  body:has(.orders-overview-page) .orders-filter-strip.order-export-filter-strip,
  body:has(.orders-overview-page) .orders-filter-strip {
    margin: 0 !important;
    padding: 13px !important;
    border-radius: 30px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body:has(.orders-overview-page) .orders-filter-strip.order-export-filter-strip > input:first-child {
    grid-column: 1 / -1 !important;
  }

  body:has(.orders-overview-page) .orders-filter-strip input,
  body:has(.orders-overview-page) .orders-filter-strip select,
  body:has(.orders-overview-page) .orders-filter-strip button,
  body:has(.orders-overview-page) .orders-filter-strip label {
    min-width: 0 !important;
    min-height: 52px !important;
    border: 1px solid rgba(18, 22, 30, 0.055) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 251, 253, 0.66)),
      rgba(255, 255, 255, 0.72) !important;
    color: #1d2430 !important;
    font-size: 14px !important;
    font-weight: 720 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 7px 16px rgba(31, 45, 70, 0.04) !important;
  }

  body:has(.orders-overview-page) .orders-filter-strip input::placeholder {
    color: rgba(104, 113, 129, 0.68) !important;
    font-weight: 620 !important;
  }

  body:has(.orders-overview-page) .orders-filter-strip button {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 248, 252, 0.58)),
      rgba(255, 255, 255, 0.62) !important;
  }

  body:has(.orders-overview-page) .orders-filter-strip button:nth-of-type(-n + 2) {
    background:
      linear-gradient(135deg, rgba(255, 217, 61, 0.2), rgba(10, 132, 255, 0.08)),
      rgba(255, 255, 255, 0.68) !important;
    color: #31506f !important;
  }

  body:has(.orders-overview-page) .orders-filter-strip button:last-child {
    grid-column: 1 / -1 !important;
    color: #18202b !important;
    font-weight: 820 !important;
  }

  body:has(.orders-overview-page) .order-source-section {
    margin: 0 !important;
    border-radius: 24px !important;
  }

  body:has(.orders-overview-page) .order-source-section.received {
    opacity: 1 !important;
  }

  body:has(.orders-overview-page) .order-section-title {
    min-height: 54px !important;
    padding: 0 18px !important;
    border-radius: 23px !important;
    color: #687181 !important;
    font-size: 19px !important;
    font-weight: 840 !important;
  }

  body:has(.orders-overview-page) .order-section-title span:last-child {
    color: #7e8b9c !important;
  }

  body:has(.orders-overview-page) .source-order-summary,
  body:has(.orders-overview-page) .source-order-row,
  body:has(.orders-overview-page) .source-order-card {
    border-color: rgba(18, 22, 30, 0.055) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 251, 253, 0.66)),
      rgba(255, 255, 255, 0.72) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 10px 20px rgba(31, 45, 70, 0.055) !important;
  }
}

@media (max-width: 430px) {
  body:has(.orders-overview-page) .orders-source-head {
    min-height: 96px !important;
    padding: 19px 16px !important;
  }

  body:has(.orders-overview-page) .orders-source-head h1 {
    font-size: 25px !important;
  }

  body:has(.orders-overview-page) .delivery-workbench {
    padding: 14px !important;
  }

  body:has(.orders-overview-page) .delivery-workbench-head h2 {
    font-size: 26px !important;
  }

  body:has(.orders-overview-page) .delivery-module-links button,
  body:has(.orders-overview-page) .orders-action-grid button {
    font-size: 13px !important;
  }
}

:root[data-theme="dark"] body:has(.orders-overview-page) {
  --op-ink: #f7f9fc;
  --op-muted: rgba(225, 231, 240, 0.68);
  background:
    radial-gradient(circle at 22% -8%, rgba(255, 217, 61, 0.12), transparent 32%),
    radial-gradient(circle at 88% 14%, rgba(10, 132, 255, 0.16), transparent 35%),
    linear-gradient(180deg, #0c121b 0%, #101821 100%) !important;
}

@media (max-width: 760px) {
  :root[data-theme="dark"] body:has(.orders-overview-page) .topbar,
  :root[data-theme="dark"] body:has(.orders-overview-page) .orders-source-head,
  :root[data-theme="dark"] body:has(.orders-overview-page) .delivery-workbench,
  :root[data-theme="dark"] body:has(.orders-overview-page) .orders-action-grid,
  :root[data-theme="dark"] body:has(.orders-overview-page) .orders-filter-strip,
  :root[data-theme="dark"] body:has(.orders-overview-page) .order-source-section {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background:
      linear-gradient(180deg, rgba(24, 31, 42, 0.86), rgba(15, 22, 32, 0.66)),
      rgba(16, 23, 34, 0.74) !important;
    box-shadow:
      0 20px 54px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }

  :root[data-theme="dark"] body:has(.orders-overview-page) .orders-source-head h1,
  :root[data-theme="dark"] body:has(.orders-overview-page) .delivery-workbench-head h2,
  :root[data-theme="dark"] body:has(.orders-overview-page) .delivery-metrics strong {
    color: #f7f9fc !important;
  }

  :root[data-theme="dark"] body:has(.orders-overview-page) .orders-source-head p,
  :root[data-theme="dark"] body:has(.orders-overview-page) .delivery-workbench-head p,
  :root[data-theme="dark"] body:has(.orders-overview-page) .delivery-metrics span,
  :root[data-theme="dark"] body:has(.orders-overview-page) .order-section-title {
    color: rgba(225, 231, 240, 0.68) !important;
  }

  :root[data-theme="dark"] body:has(.orders-overview-page) .delivery-module-links button,
  :root[data-theme="dark"] body:has(.orders-overview-page) .delivery-metrics article,
  :root[data-theme="dark"] body:has(.orders-overview-page) .orders-action-grid button,
  :root[data-theme="dark"] body:has(.orders-overview-page) .orders-filter-strip input,
  :root[data-theme="dark"] body:has(.orders-overview-page) .orders-filter-strip select,
  :root[data-theme="dark"] body:has(.orders-overview-page) .orders-filter-strip button,
  :root[data-theme="dark"] body:has(.orders-overview-page) .orders-filter-strip label {
    border-color: rgba(255, 255, 255, 0.11) !important;
    background:
      linear-gradient(180deg, rgba(31, 39, 52, 0.9), rgba(18, 25, 36, 0.7)),
      rgba(18, 25, 36, 0.72) !important;
    color: #f7f9fc !important;
  }
}