/* Match the heading accent on the owner's My page. */
.title[data-v-57252b80]::before,
.title[data-v-b5173cc6]::before,
.title[data-v-2c28c596]::before,
.section-title[data-v-2c28c596]::before,
.header[data-v-4bcd657e]::before {
  background: #c4f000 !important;
}

.entry-icon[data-v-2c28c596] {
  background: #f4fad9 !important;
}

.note[data-v-2c28c596],
.note-dot[data-v-2c28c596] {
  border-color: #c4f000 !important;
}

/* Larger, horizontally scrollable status track on customer service lists. */
.page[data-v-57252b80] .tabs,
.page[data-v-b5173cc6] .tabs {
  box-sizing: border-box;
  width: calc(100% - 32px) !important;
  height: 48px !important;
  flex: 0 0 auto;
  margin: 10px 16px 0 !important;
  padding: 4px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #f2f3f5 !important;
  white-space: nowrap !important;
}

.page[data-v-57252b80] .tab,
.page[data-v-b5173cc6] .tab {
  box-sizing: border-box;
  position: relative;
  justify-content: center;
  width: 88px !important;
  min-width: 88px !important;
  flex: 0 0 88px;
  height: 38px !important;
  margin: 0 4px 0 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #86909c !important;
  font-size: 14px !important;
  line-height: 38px !important;
  box-shadow: none !important;
  transition: background-color 0.22s ease, color 0.22s ease !important;
}

.page[data-v-57252b80] .tab.active,
.page[data-v-b5173cc6] .tab.active {
  border-color: #18191c !important;
  background: #18191c !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(24, 25, 28, 0.16) !important;
}

.page[data-v-57252b80] .tabs .uni-scroll-view-content,
.page[data-v-b5173cc6] .tabs .uni-scroll-view-content {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-width: 100%;
  height: 38px;
  border-radius: 6px;
  background: #fff;
  vertical-align: top;
  isolation: isolate;
}

.page[data-v-57252b80] .tab:last-child,
.page[data-v-b5173cc6] .tab:last-child {
  margin-right: 0 !important;
}

/* The selected background travels inside the existing uni-app scroll view. */
@supports selector(:has(*)) {
  :is(.page[data-v-57252b80], .page[data-v-b5173cc6]) .tabs .uni-scroll-view-content::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 88px;
    height: 38px;
    border-radius: 6px;
    background: #18191c;
    pointer-events: none;
    transform: translateX(calc(var(--status-index, 0) * 92px));
    transition: transform 0.24s ease;
  }

  :is(.page[data-v-57252b80], .page[data-v-b5173cc6]) .tabs .tab {
    z-index: 2;
    background: transparent !important;
  }

  :is(.page[data-v-57252b80], .page[data-v-b5173cc6]) .tabs .tab.active {
    background: transparent !important;
    box-shadow: none !important;
  }

  :is(.page[data-v-57252b80], .page[data-v-b5173cc6]) .uni-scroll-view-content:has(> .tab:nth-child(1).active) { --status-index: 0; }
  :is(.page[data-v-57252b80], .page[data-v-b5173cc6]) .uni-scroll-view-content:has(> .tab:nth-child(2).active) { --status-index: 1; }
  :is(.page[data-v-57252b80], .page[data-v-b5173cc6]) .uni-scroll-view-content:has(> .tab:nth-child(3).active) { --status-index: 2; }
  :is(.page[data-v-57252b80], .page[data-v-b5173cc6]) .uni-scroll-view-content:has(> .tab:nth-child(4).active) { --status-index: 3; }
  :is(.page[data-v-57252b80], .page[data-v-b5173cc6]) .uni-scroll-view-content:has(> .tab:nth-child(5).active) { --status-index: 4; }
  :is(.page[data-v-57252b80], .page[data-v-b5173cc6]) .uni-scroll-view-content:has(> .tab:nth-child(6).active) { --status-index: 5; }
}

/* Match the owner's floating rounded bottom navigation. */
.service-nav[data-v-21a159e0] {
  left: 10px !important;
  right: 10px !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  height: 53px !important;
  padding: 0 5px !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box !important;
}

.service-nav[data-v-21a159e0] .nav-item {
  gap: 2px !important;
  padding: 5px 0 !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.service-nav[data-v-21a159e0] .nav-item.active {
  color: #e5be13 !important;
  transform: translateY(-1px);
}

.service-nav[data-v-21a159e0] .nav-icon {
  width: 22px !important;
  height: 22px !important;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.service-nav[data-v-21a159e0] .nav-item:not(.active) .nav-icon {
  filter: grayscale(1);
  opacity: 0.48;
}

.service-nav[data-v-21a159e0] .nav-item.active .nav-icon {
  transform: scale(1.15);
}

.page[data-v-57252b80],
.page[data-v-b5173cc6],
.page[data-v-2c28c596],
.page[data-v-4bcd657e] {
  padding-bottom: calc(85px + env(safe-area-inset-bottom)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .page[data-v-57252b80] .tab,
  .page[data-v-b5173cc6] .tab,
  .service-nav[data-v-21a159e0] .nav-item,
  .service-nav[data-v-21a159e0] .nav-icon,
  :is(.page[data-v-57252b80], .page[data-v-b5173cc6]) .tabs .uni-scroll-view-content::before {
    transition: none !important;
  }
}

/* Dedicated customer-service order detail: retain the existing action buttons and sheets. */
.service-order-detail{min-height:100vh;padding:16px 16px calc(100px + env(safe-area-inset-bottom));background:#f6f7f9;color:#20242c;box-sizing:border-box}
.service-detail-headingbar{display:flex;align-items:center;gap:14px;margin-bottom:16px;font-size:19px;font-weight:700}
.service-detail-back{margin:0;padding:0 12px;font-size:14px;line-height:34px;background:#fff;border-radius:10px;color:#444}
.service-detail-back:after{border:0}
.service-detail-card{background:#fff;border-radius:16px;padding:18px;margin-bottom:14px;box-shadow:0 3px 18px rgba(28,35,48,.035)}
.service-detail-heading{display:block;font-size:16px;font-weight:700;margin-bottom:13px}
.service-detail-row{display:flex;justify-content:space-between;gap:20px;padding:9px 0;font-size:14px;line-height:1.6}
.service-detail-label{color:#8a8e97;flex-shrink:0}.service-detail-value{text-align:right;overflow-wrap:anywhere}
.service-detail-product{display:flex;align-items:center;gap:14px;margin-bottom:14px}.service-detail-product-image{width:76px;height:76px;border-radius:12px;flex-shrink:0}
.service-detail-product-name{display:block;font-size:16px;font-weight:600}.service-detail-product-title{display:block;color:#8a8e97;font-size:13px;margin-top:7px}
.service-detail-prize-image{width:96px;height:96px;border-radius:10px;margin:6px}
.service-detail-footer{position:fixed;bottom:0;left:0;right:0;z-index:90;background:rgba(255,255,255,.97);border-top:1px solid #eef0f3;padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:flex-end;box-sizing:border-box}
.service-detail-footer .actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin:0;width:auto}

/* Keep customer-service order controls visible in the list and detail footer. */
.page[data-v-57252b80] .service-order-actions{
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;width:100%;box-sizing:border-box;
}
.page[data-v-57252b80] .service-order-actions>uni-button{
  flex:0 0 auto;margin:0;padding:0 12px;min-width:76px;line-height:34px;font-size:13px;
  border-radius:8px;box-sizing:border-box;white-space:nowrap;
}
.page[data-v-57252b80] .service-order-actions>uni-button.secondary{
  background:#f4f6f9;color:#505b6e;
}
.page[data-v-57252b80] .service-order-actions>uni-button.assign{
  background:#e8f2ff;color:#1677ff;
}
.page[data-v-57252b80] .service-order-actions>uni-button.operation{
  background:#1677ff;color:#fff;
}
.page[data-v-57252b80] .service-order-actions>uni-button:after{border:0}
.service-detail-footer .service-order-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%!important}
.service-detail-footer .service-order-actions>uni-button{width:100%}
.service-order-detail{padding-bottom:calc(132px + env(safe-area-inset-bottom))}