/* =====================================================
   ADMIN LAYOUT
===================================================== */

.admin-body {
    background: #f2f2f4;
}

.admin-layout {
    display: flex;
    min-height: 100vh;
}

/* =====================================================
   TOAST
   Every admin/seller/sorting-center/courier page renders
   a plain <div class="toast" id="toast"> and calls
   showToast() to fill + reveal it — this file is the one
   shared stylesheet all of them load (admin.css), so the
   rule belongs here rather than duplicated per page.
===================================================== */

.toast {
    position: fixed;
    right: 25px;
    bottom: 25px;
    background: #111;
    color: white;
    padding: 14px 20px;
    border-radius: 7px;
    z-index: 10000;
    transform: translateY(100px);
    opacity: 0;
    transition: .3s;
    font-size: 13px;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* =====================================================
   SIDEBAR
===================================================== */

.admin-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #0a0a0a, #170003 120%);
    color: #eee;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 20;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.admin-brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #d9a441;
    flex-shrink: 0;
}

.admin-brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-brand-text {
    color: #e00020;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .3px;
}

.admin-brand-sub {
    display: block;
    color: #d9a441;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: -3px;
}

.admin-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    color: #bbb;
    cursor: pointer;
    transition: .18s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.admin-nav-link i {
    width: 18px;
    text-align: center;
    color: #d9a441;
}

.admin-nav-link:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}

.admin-nav-link.active {
    background: linear-gradient(135deg, #e00020, #a80016);
    color: #fff;
}

.admin-nav-link.active i {
    color: #fff;
}

.admin-nav-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 10px 4px;
}

.admin-sidebar-foot {
    padding: 10px 12px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.admin-logout-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid rgba(224,0,32,0.35);
    background: rgba(224,0,32,0.08);
    color: #ff8a97;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: .18s;
}

.admin-logout-btn:hover {
    background: rgba(224,0,32,0.2);
    color: #fff;
}

/* =====================================================
   MAIN AREA
===================================================== */

.admin-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: 250px;
    height: 100vh;
}

.admin-topbar {
    height: 66px;
    background: #fff;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    flex-shrink: 0;
}

.admin-page-title {
    font-size: 18px;
    font-weight: 800;
    color: #111;
}

.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 22px;
}

.admin-bell {
    position: relative;
    font-size: 17px;
    color: #444;
    cursor: pointer;
}

.admin-bell .badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #d0001b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 5px;
}

.admin-nav-badge {
    margin-left: auto;
    background: #d0001b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    line-height: 1.5;
}

.admin-who {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-who-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fdeaea;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    overflow: hidden;
}

.admin-who-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-who-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.admin-who-role {
    font-size: 11px;
    color: #888;
}

.admin-content {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
}

.admin-section {
    display: none;
}

.admin-section.active {
    display: block;
    animation: adminFadeIn .25s ease;
}

@keyframes adminFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.admin-section-head {
    margin-bottom: 20px;
}

.admin-section-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #111827;
}

.admin-section-head p {
    max-width: 820px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6b7280;
    margin-top: 4px;
}

/* =====================================================
   STAT CARDS
===================================================== */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.seller-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.chart-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.chart-row .admin-card-body {
    position: relative;
}

.folder-assign-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: #fdf1de;
    border: 1px solid #f0dcb0;
    border-radius: 10px;
    padding: 14px 18px;
    margin: 16px 20px 0;
    font-size: 13px;
    color: #7a5218;
}

.folder-assign-banner i {
    color: #d9a441;
    margin-right: 6px;
}

.stat-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #fdeaea;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.stat-value {
    font-size: 21px;
    font-weight: 800;
    color: #111;
}

.stat-label {
    font-size: 12px;
    color: #888;
}

.stat-value-sub {
    font-size: 13px;
    font-weight: 600;
    color: #999;
}

/* =====================================================
   DIVISION TABS (Logistics, Sellers) — a segmented bar that swaps
   between the panels of one admin section.
===================================================== */

.division-tabs {
    display: flex;
    gap: 4px;
    padding: 5px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow-x: auto;
}

.division-tab {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #666;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: .15s;
}

.division-tab:hover {
    background: #fdeaea;
    color: #d0001b;
}

.division-tab.active {
    background: #d0001b;
    color: #fff;
}

.division-badge {
    background: #d0001b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    line-height: 1.5;
}

.division-tab.active .division-badge {
    background: #fff;
    color: #d0001b;
}

.division-panel {
    display: none;
}

.division-panel.active {
    display: block;
}

/* Product approval queue and its review actions. */
.approval-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.approval-actions .btn-sm { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.approval-thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid #eee;
    background: #f7f7f7;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.approval-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.approval-seller-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
}

.approval-seller-info span {
    display: block;
    font-size: 11px;
    color: #888;
}

.approval-seller-info strong {
    font-size: 13px;
    color: #111;
}

.approval-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.approval-thumb-lg {
    flex-basis: 96px;
    width: 96px;
    height: 96px;
}

/* =====================================================
   CARD / PANEL
===================================================== */

.admin-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 22px;
}

.admin-card-head {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-card-head h3 {
    font-size: 15px;
    color: #111;
}

.admin-card-body {
    padding: 20px;
}

/* =====================================================
   FILTER CHIPS
===================================================== */

.chip-row {
    display: flex;
    gap: 8px;
    padding: 16px 20px 0;
    flex-wrap: wrap;
}

.chip {
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid #ddd;
    font-size: 12.5px;
    color: #555;
    cursor: pointer;
    background: #fff;
    font-family: inherit;
    transition: .15s;
}

.chip.active,
.chip:hover {
    background: #d0001b;
    border-color: #d0001b;
    color: #fff;
}

/* =====================================================
   TABLE
===================================================== */

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-table th {
    text-align: left;
    padding: 12px 20px;
    background: #fafafa;
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
}

.admin-table td {
    padding: 14px 20px;
    border-bottom: 1px solid #f2f2f2;
    color: #333;
    vertical-align: middle;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.cell-name {
    font-weight: 700;
    color: #111;
}

.cell-sub {
    font-size: 11.5px;
    color: #888;
    margin-top: 2px;
}

.product-row-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f7f7f7;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
}

.product-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.flash-deal-select-cell { min-width: 145px; }
.flash-deal-select-tools { display: grid; justify-items: start; gap: 5px; }
.flash-deal-select-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid #d8a83e;
    border-radius: 8px;
    background: #fffaf0;
    color: #694600;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.flash-deal-select-all:hover { border-color: #b77b00; background: #fff2d2; }
.flash-deal-select-all:focus-visible { outline: 3px solid rgba(208, 0, 27, .22); outline-offset: 2px; }
.flash-deal-select-all[aria-pressed="true"] { border-color: #b30019; background: #fff1f2; color: #a00017; }
.flash-deal-selected-count { color: #667085; font-size: 11px; font-weight: 600; white-space: nowrap; }

/* =====================================================
   BADGES
===================================================== */

.badge-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.badge-pending { background: #fff4e0; color: #b8790a; }
.badge-approved,
.badge-active,
.badge-resolved { background: #e6f7ec; color: #1f9254; }
.badge-rejected,
.badge-suspended,
.badge-open { background: #fdeaea; color: #d0001b; }
.badge-deactivated,
.badge-progress { background: #eee; color: #666; }

.variation-stock-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.variation-stock-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    background: #f2f2f2;
    color: #555;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.variation-stock-chip-low {
    background: #fdeaea;
    color: #d0001b;
}

/* =====================================================
   VARIATION GROUPS / COMBINATIONS (Shopee-style)
===================================================== */

.variation-group-row {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.combination-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.combination-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #777;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 8px 8px;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
}

.combination-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f4f4f4;
    vertical-align: middle;
}

.combination-table td:first-child {
    font-weight: 700;
    color: #222;
    white-space: nowrap;
}

.combination-table input[type="number"],
.combination-table input[type="text"] {
    width: 100%;
    min-width: 70px;
    padding: 7px 9px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12.5px;
    font-family: inherit;
}

.combination-table input[type="file"] {
    font-size: 11px;
    max-width: 150px;
}

/* =====================================================
   BUTTONS
===================================================== */

.btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-sm {
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: .15s;
    white-space: nowrap;
}

.btn-approve { background: #1f9254; color: #fff; }
.btn-approve:hover { background: #187a44; }

.btn-reject { background: #fff; color: #d0001b; border-color: #d0001b; }
.btn-reject:hover { background: #fdeaea; }

.btn-warn { background: #fff; color: #b8790a; border-color: #d9a441; }
.btn-warn:hover { background: #fff4e0; }

.btn-suspend { background: #d0001b; color: #fff; }
.btn-suspend:hover { background: #a80016; }

.btn-neutral { background: #fff; color: #444; border-color: #ddd; }
.btn-neutral:hover { background: #f5f5f5; }

.btn-primary {
    background: #d0001b;
    color: #fff;
    border: none;
    padding: 11px 22px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: .15s;
}

.btn-primary:hover { background: #a80016; }

.btn-primary:disabled,
.btn-neutral:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* =====================================================
   FORMS (settings / reports)
===================================================== */

.admin-form-group {
    margin-bottom: 16px;
}

.admin-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #444;
    margin-bottom: 6px;
}

.admin-form-group input,
.admin-form-group select,
.admin-form-group textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #ddd;
    border-radius: 7px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: .15s;
}

.admin-form-group input:focus,
.admin-form-group select:focus,
.admin-form-group textarea:focus {
    border-color: #d0001b;
    box-shadow: 0 0 0 3px rgba(208,0,27,0.08);
}

.admin-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.admin-form-static {
    padding: 11px 13px;
    border: 1px solid #eee;
    border-radius: 7px;
    font-size: 13px;
    background: #f7f7f7;
    color: #555;
}

.admin-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* =====================================================
   COMPLAINT CARDS
===================================================== */

.complaint-card {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 14px;
}

.complaint-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.complaint-id {
    font-size: 11.5px;
    color: #999;
    font-weight: 700;
}

.complaint-parties {
    font-size: 13.5px;
    color: #111;
    font-weight: 700;
    margin: 4px 0 6px;
}

.complaint-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 10px;
}

.complaint-evidence {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.evidence-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 11.5px;
    color: #555;
}

/* =====================================================
   ANNOUNCEMENT LIST / POLICY LIST
===================================================== */

.policy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f2f2f2;
}

.policy-row:last-child { border-bottom: none; }

.policy-row-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #111;
}

.policy-row-sub {
    font-size: 11.5px;
    color: #888;
    margin-top: 2px;
}

/* =====================================================
   DASHBOARD LINE CHARTS
===================================================== */

.line-chart {
    width: 100%;
    height: 220px;
    display: block;
}

.chart-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 11.5px;
    color: #666;
}

.legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

.legend-buyer { background: #2563eb; }
.legend-seller { background: #d9a441; }
.legend-courier { background: #1f9254; }

.chart-note {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}

/* =====================================================
   ACTIVITY FEED
===================================================== */

.activity-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f2f2f2;
}

.activity-row:last-child { border-bottom: none; }

.activity-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fdeaea;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.activity-text {
    font-size: 13px;
    color: #333;
}

.activity-time {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

/* =====================================================
   STOCK BAR CHART (seller dashboard)
===================================================== */

.stock-bar-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
}

.stock-bar-label {
    width: 200px;
    flex-shrink: 0;
    font-size: 12.5px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-bar-track {
    flex: 1;
    height: 10px;
    background: #f2f2f2;
    border-radius: 6px;
    overflow: hidden;
}

.stock-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #d9a441, #d0001b);
    border-radius: 6px;
}

.stock-bar-fill.stock-bar-low {
    background: #d0001b;
}

.stock-bar-fill.stock-bar-soldout {
    background: #3a3a3a;
}

.stock-bar-value {
    width: 34px;
    text-align: right;
    font-size: 12.5px;
    font-weight: 700;
    color: #111;
    flex-shrink: 0;
}

/* =====================================================
   ORDER PIPELINE (seller order management)
===================================================== */

.order-pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.order-stage {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 18px;
}

.order-stage-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.order-stage-head i {
    color: #d0001b;
}

.order-stage-desc {
    font-size: 12px;
    color: #888;
    margin-top: 6px;
    line-height: 1.6;
}

.seller-order-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.seller-order-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fafafa;
}

.seller-order-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.seller-order-card-id {
    font-size: 12px;
    font-weight: 700;
    color: #111;
}

.seller-order-card-total {
    font-size: 12px;
    font-weight: 700;
    color: #b8790a;
}

.seller-order-card-name {
    font-size: 12px;
    color: #444;
    margin-bottom: 3px;
}

.seller-order-card-buyer {
    font-size: 11px;
    color: #999;
    margin-bottom: 10px;
}

.seller-order-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid #d0001b;
    background: #fff;
    color: #d0001b;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: .15s;
}

.seller-order-card-btn:hover {
    background: #d0001b;
    color: #fff;
}

.seller-chat-list {
    display: flex;
    flex-direction: column;
}

.seller-chat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    transition: background .15s;
}

.seller-chat-row:last-child {
    border-bottom: none;
}

.seller-chat-row:hover {
    background: #fafafa;
}

.seller-chat-row.unread .seller-chat-name,
.seller-chat-row.unread .seller-chat-preview {
    font-weight: 700;
    color: #111;
}

.seller-chat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    overflow: hidden;
}

.seller-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.seller-chat-body {
    flex: 1;
    min-width: 0;
}

.seller-chat-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.seller-chat-preview {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}

.seller-chat-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.seller-chat-time {
    font-size: 11px;
    color: #aaa;
}

/* =====================================================
   INLINE EDIT ROW (seller inventory table)
===================================================== */

.edit-row td {
    background: #f7f8fa;
    padding: 20px 22px !important;
}

/* =====================================================
   DETAILS PANEL — what a "See Details" / "See Information"
   row opens: titled sections of label + value pairs, a row
   of key figures, and document links. One look for every
   such panel.
===================================================== */

/* The opened row reads as one inset sheet under its table row. */
.edit-row > td {
    border-top: 2px solid #d0001b;
    box-shadow: inset 0 6px 10px -8px rgba(16,24,40,.18);
}

.edit-row > td > p {
    font-size: 13px;
    line-height: 1.65;
    color: #344054;
}

.edit-row > td > p strong {
    color: #101828;
}

.edit-row .admin-table {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    overflow: hidden;
}

.detail-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    align-items: start;
}

.detail-section {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.detail-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #475467;
}

.detail-title i {
    color: #d0001b;
    font-size: 12.5px;
}

/* Outside a section card (straight in the row), a title gets room above. */
.edit-row > td > .detail-title:not(:first-child) {
    margin-top: 18px;
}

.detail-list {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.detail-list > div {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f2f4f7;
}

.detail-list > div:first-child {
    padding-top: 0;
}

.detail-list > div:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.detail-list dt {
    font-size: 12.5px;
    color: #667085;
}

.detail-list dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #101828;
    overflow-wrap: anywhere;
}

.detail-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: #344054;
    white-space: pre-line;
}

.detail-empty {
    margin: 0;
    font-size: 12.5px;
    color: #98a2b3;
}

/* Key figures */
.detail-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.detail-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.detail-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fef3f2;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.detail-stat strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #101828;
    line-height: 1.25;
}

.detail-stat div span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #667085;
}

.edit-row .detail-stat-grid {
    margin-bottom: 18px;
}

/* Documents */
.detail-docs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.detail-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    background: #fcfcfd;
    color: #101828;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.detail-doc:hover {
    border-color: #d0001b;
    background: #fef3f2;
}

.detail-doc-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fef3f2;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.detail-doc-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-doc > i {
    font-size: 11px;
    color: #98a2b3;
}

/* A rejection reason, at the top of its panel. */
.detail-alert {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #f7c5ca;
    border-radius: 12px;
    background: #fef3f2;
    color: #7a271a;
    font-size: 13px;
    line-height: 1.55;
}

.detail-alert i {
    margin-top: 2px;
    color: #d0001b;
}

.detail-alert strong {
    display: block;
    color: #b42318;
}

.voucher-row-panel td {
    background: #fafafa;
    padding: 18px 20px !important;
}

.product-voucher-panel h4 {
    font-size: 13px;
    color: #111;
    margin: 0 0 12px;
}

.product-voucher-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.product-voucher-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px 14px;
}

.product-voucher-item.inactive {
    opacity: .6;
}

.product-voucher-item-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.product-voucher-code {
    font-family: monospace;
    font-weight: 700;
    font-size: 13px;
    color: #111;
    background: #fdf1de;
    border: 1px dashed #d9a441;
    border-radius: 5px;
    padding: 2px 8px;
}

.product-voucher-discount {
    font-weight: 700;
    font-size: 12.5px;
    color: #d0001b;
}

.product-voucher-meta {
    font-size: 11.5px;
    color: #999;
}

.product-voucher-form {
    border-top: 1px dashed #ddd;
    padding-top: 14px;
}

/* =====================================================
   USER INFO PANEL (admin user accounts table)
===================================================== */

.user-info-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 24px;
}

.user-id-preview-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #999;
    margin-bottom: 10px;
}

.user-id-thumb {
    width: 100%;
    max-width: 160px;
    border-radius: 10px;
    border: 1px solid #eaecf0;
    background: #fff;
    padding: 4px;
    display: block;
    transition: border-color .15s;
}

a:hover > .user-id-thumb {
    border-color: #d0001b;
}

.user-info-form {
    flex: 1;
    min-width: 0;
}

.user-info-panel {
    flex: 1;
    min-width: 0;
}

.info-view-grid {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    align-content: start;
}

.info-view-item {
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 10px;
}

.info-view-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #667085;
    margin-bottom: 4px;
}

.info-view-value {
    font-size: 13.5px;
    color: #101828;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.info-view-grid .btn-row {
    grid-column: 1 / -1;
    margin-top: 4px;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px) {
    .admin-sidebar {
        width: 76px;
    }

    .admin-main {
        margin-left: 76px;
    }

    .admin-brand-text,
    .admin-brand-sub,
    .admin-nav-link span,
    .admin-logout-btn span {
        display: none;
    }

    .admin-brand {
        justify-content: center;
    }

    .admin-nav-link,
    .admin-logout-btn {
        justify-content: center;
    }

    .admin-form-row {
        grid-template-columns: 1fr;
    }

    .user-info-grid {
        grid-template-columns: 1fr;
    }

    .info-view-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .admin-content {
        padding: 16px;
    }

    .admin-topbar {
        padding: 0 16px;
    }

    .admin-who-name,
    .admin-who-role {
        display: none;
    }
}

/* =====================================================
   FINANCIAL REPORT
===================================================== */

.stat-icon-profit {
    background: #e7f4e8;
    color: #2e7d32;
}

.stat-icon-loss {
    background: #fdeaea;
    color: #d0001b;
}

/* =====================================================
   COURIER / SELLER HELP CENTER
===================================================== */

.courier-help-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 26px;
}

.courier-help-search i {
    color: #d9a441;
    font-size: 16px;
}

.courier-help-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13.5px;
    font-family: inherit;
    color: #111;
    background: none;
}

.courier-help-search input::placeholder {
    color: #aaa;
}

.help-topic-heading {
    font-size: 15px;
    color: #111;
    margin-bottom: 14px;
}

.profile-card-head-icon-gold {
    background: #fdf1de;
    color: #d9a441;
}

.report-print-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 2px solid #111;
}

.report-print-logo {
    font-size: 20px;
    font-weight: 800;
    color: #d0001b;
}

.report-print-shop {
    font-size: 13px;
    color: #555;
    margin-top: 2px;
}

.report-print-meta {
    font-size: 12px;
    color: #555;
    text-align: right;
}

.report-print-meta div {
    margin-bottom: 2px;
}

.report-scope-select {
    min-width: 240px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #333;
    font-family: inherit;
    font-size: 12.5px;
}

.report-chart-box {
    height: 260px;
}

/* =====================================================
   FLASH DEALS — scheduled batches
===================================================== */

.flash-deal-upcoming-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 12px 14px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.flash-deal-upcoming-info {
    min-width: 200px;
}

.flash-deal-edit-row {
    border: 1px solid #f0d9a4;
    border-radius: 8px;
    padding: 16px;
    margin: -4px 0 14px;
    background: #fffdf7;
}

/* =====================================================
   PRINT / SAVE AS PDF
   Only #printableReport is shown when printing, isolated
   from the rest of the dashboard chrome (sidebar, topbar,
   the date-range form) and laid out to fit an A4 page.
===================================================== */

@media print {
    @page {
        size: A4;
        margin: 14mm;
    }

    body * {
        visibility: hidden;
    }

    #printableReport,
    #printableReport * {
        visibility: visible;
    }

    #printableReport {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0;
    }

    .no-print {
        display: none !important;
    }

    /* Side by side, same as on screen — stacking them full-width was what
       pushed the second chart onto its own near-empty page. */
    .chart-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        break-inside: avoid;
    }

    .chart-row .admin-card {
        border: 1px solid #ccc;
        box-shadow: none;
        break-inside: avoid;
        margin-bottom: 0;
    }

    .chart-row .admin-card-body {
        padding: 10px;
    }

    .report-chart-box {
        height: 190px;
    }

    .stat-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        margin-bottom: 16px;
    }

    .stat-card {
        border: 1px solid #ccc;
        break-inside: avoid;
        padding: 10px;
        gap: 8px;
    }

    .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .stat-value {
        font-size: 15px;
    }

    .stat-label {
        font-size: 10px;
    }
}

/* =====================================================
   SIDEBAR GROUPS — a small gold label above each set of
   related tabs (admin.blade.php's $navGroups)
===================================================== */

.admin-nav-label {
    padding: 14px 14px 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(217, 164, 65, .75);
}

.admin-nav-label:first-child {
    padding-top: 4px;
}

/* =====================================================
   ADMIN DASHBOARD OVERVIEW — KPI tiles, the paired chart
   rows, the labelled bar lists and the "Needs Attention"
   shortcuts
===================================================== */

.dash-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dash-kpi-grid .stat-card {
    align-items: flex-start;
    border-radius: 12px;
    transition: box-shadow .15s, transform .15s;
}

.dash-kpi-grid .stat-card:hover {
    box-shadow: 0 8px 20px -10px rgba(16, 24, 40, .18);
    transform: translateY(-1px);
}

.dash-kpi-grid .stat-value {
    line-height: 1.2;
    word-break: break-word;
}

.stat-foot {
    margin-top: 6px;
    font-size: 11px;
    color: #aaa;
}

.dash-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dash-row .admin-card {
    min-width: 0;
}

/* Chart.js sizes itself to this box (maintainAspectRatio is off). */
.dash-chart {
    position: relative;
    height: 250px;
}

.dash-head-note {
    font-size: 11.5px;
    color: #999;
}

/* One labelled horizontal bar: name, bar, value — the value is always
   printed, so nothing has to be read off the bar's colour or length. */
.dash-bar-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
}

.dash-bar-row-wide {
    grid-template-columns: 170px minmax(0, 1fr) auto;
}

.dash-bar-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12.5px;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-bar-track {
    height: 10px;
    border-radius: 4px;
    background: #f3f4f6;
    overflow: hidden;
}

.dash-bar-fill {
    height: 100%;
    min-width: 3px;
    border-radius: 0 4px 4px 0;
    background: #d0001b;
}

.dash-bar-value {
    min-width: 34px;
    text-align: right;
    font-size: 12.5px;
    font-weight: 700;
    color: #111;
    font-variant-numeric: tabular-nums;
}

.dash-bar-value small {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: #999;
}

.dash-rank {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #fdeaea;
    color: #d0001b;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dash-attention-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    color: #444;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s;
}

.dash-attention-row:hover {
    background: #faf7f7;
}

.dash-attention-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #999;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-attention-label {
    flex: 1;
    min-width: 0;
}

.dash-attention-count {
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #999;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}

.dash-attention-arrow {
    font-size: 10px;
    color: #ccc;
}

.dash-attention-row.has-items .dash-attention-icon {
    background: #fdeaea;
    color: #d0001b;
}

.dash-attention-row.has-items .dash-attention-label {
    font-weight: 600;
    color: #111;
}

.dash-attention-row.has-items .dash-attention-count {
    background: #d0001b;
    color: #fff;
}

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

@media (max-width: 900px) {
    .dash-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .dash-kpi-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash-bar-row,
    .dash-bar-row-wide {
        grid-template-columns: 110px minmax(0, 1fr) auto;
    }
}

/* Users by Role — the pie with its count-and-share legend beside it. */
.dash-pie {
    display: flex;
    align-items: center;
    gap: 28px;
}

.dash-pie-chart {
    position: relative;
    flex: 0 0 210px;
    height: 210px;
}

.dash-pie-legend {
    flex: 1;
    min-width: 0;
}

.dash-pie-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 12.5px;
    color: #444;
}

.dash-pie-legend-row:last-child {
    border-bottom: none;
}

.dash-pie-legend-row .legend-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-right: 0;
    border-radius: 3px;
}

.dash-pie-legend-label {
    flex: 1;
    min-width: 0;
}

.dash-pie-legend-value {
    font-weight: 700;
    color: #111;
    font-variant-numeric: tabular-nums;
}

.dash-pie-legend-share {
    min-width: 38px;
    text-align: right;
    font-size: 11.5px;
    color: #999;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
    .dash-pie {
        flex-direction: column;
        align-items: stretch;
    }

    .dash-pie-chart {
        flex-basis: auto;
    }
}

/* =====================================================
   SORTING CENTER ARCHIVE (admin, Logistics > Sorting Centers)
===================================================== */

.sc-archive-btn {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid #eaecf0;
    background: #fff;
    color: #475467;
    font-size: 15px;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.sc-archive-btn:hover {
    border-color: #d0001b;
    background: #fef3f2;
    color: #d0001b;
}

.sc-archive-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #d0001b;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.sc-archive-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 56vh;
    overflow-y: auto;
    margin-top: 6px;
    text-align: left;
}

.sc-archive-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    background: #fcfcfd;
}

.sc-archive-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fef3f2;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sc-archive-item-body {
    flex: 1;
    min-width: 0;
}

.sc-archive-item-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #101828;
}

.sc-archive-item-meta {
    margin-top: 2px;
    font-size: 12px;
    color: #667085;
}

.sc-archive-empty {
    padding: 28px 12px;
    text-align: center;
    color: #98a2b3;
}

.sc-archive-empty i {
    font-size: 26px;
    margin-bottom: 8px;
}

.sc-archive-empty p {
    margin: 0;
    font-size: 13px;
}

.sc-archive-item-reason {
    margin-top: 4px;
    font-size: 12px;
    color: #475467;
    overflow-wrap: anywhere;
}

/* =====================================================
   ACCOUNT MANAGEMENT (admin, seller and courier "account" tab)
   partials/account-hero + partials/account-overview, plus a
   consistent look for the cards below them.
===================================================== */

.acct-page {
    --acct-brand: #d0001b;
    --acct-ink: #101828;
    --acct-muted: #667085;
    --acct-line: #eaecf0;
}

/* --- Header --- */
.acct-hero {
    position: relative;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--acct-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

.acct-hero-cover {
    height: 96px;
    background:
        radial-gradient(circle at 85% -20%, rgba(255, 255, 255, .25) 0, transparent 45%),
        linear-gradient(120deg, #a30016 0%, #d0001b 55%, #ff4d5e 100%);
}

/* Only the avatar overlaps the cover — the name and details sit below it
   on white, where they stay readable. */
/* The seller's own shop cover, when they have one. */
.acct-hero-cover {
    position: relative;
}

.acct-hero-cover.has-image {
    height: 150px;
    background-size: cover;
    background-position: center;
}

/* A soft fade at the bottom so the avatar edge reads against any photo. */
.acct-hero-cover.has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .25) 100%);
}

.acct-cover-form {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 1;
    margin: 0;
}

.acct-cover-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(16, 24, 40, .55);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .15s;
}

.acct-cover-btn:hover {
    background: rgba(16, 24, 40, .75);
}

.acct-hero-body {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 14px 24px 20px;
}

.acct-avatar {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: #fdecee;
    color: var(--acct-brand);
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -62px;
    /* Above the cover — a shop cover photo is positioned, so without this
       it would paint over the logo. */
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .12);
}

.acct-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acct-hero-info {
    flex: 1;
    min-width: 0;
    padding-bottom: 2px;
}

.acct-hero-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 21px;
    font-weight: 800;
    color: var(--acct-ink);
    letter-spacing: -.01em;
}

.acct-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fdecee;
    color: var(--acct-brand);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

.acct-hero-email {
    margin-top: 3px;
    font-size: 13.5px;
    color: var(--acct-muted);
}

.acct-hero-email i { margin-right: 4px; }

.acct-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.acct-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
}

.acct-chip i { color: #98a2b3; }
.acct-chip-good { background: #ecfdf3; color: #067647; }
.acct-chip-good i { color: #12b76a; }

.acct-edit-btn {
    flex-shrink: 0;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    background: var(--acct-brand);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(208, 0, 27, .25);
    transition: background .15s, transform .15s;
}

.acct-edit-btn:hover {
    background: #a30016;
    transform: translateY(-1px);
}

/* --- Overview panels --- */
.acct-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.acct-panel {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--acct-line);
    border-radius: 14px;
}

.acct-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.acct-panel-head h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--acct-ink);
}

.acct-panel-icon,
.acct-row-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fdecee;
    color: var(--acct-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.acct-dl {
    margin: 0;
}

.acct-dl-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 9px 0;
    border-top: 1px dashed var(--acct-line);
}

.acct-dl-row:first-child { border-top: none; }

.acct-dl dt {
    flex-shrink: 0;
    font-size: 12.5px;
    color: var(--acct-muted);
}

.acct-dl dd {
    margin: 0;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--acct-ink);
    text-align: right;
    overflow-wrap: anywhere;
}

.acct-dl dd.is-empty {
    font-weight: 500;
    font-style: italic;
    color: #98a2b3;
}

/* --- Edit Profile modal --- */
.acct-edit-box {
    width: 680px;
    padding: 26px 28px 24px;
    border-radius: 16px;
}

/* --- Vacation Mode (seller) --- */
.acct-vacation {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--acct-line);
    border-radius: 14px;
    transition: background .2s, border-color .2s;
}

.acct-vacation.is-on {
    background: linear-gradient(120deg, #fff8e6 0%, #fff 70%);
    border-color: #f5d48a;
}

.acct-vacation-icon {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff4e0;
    color: #dc6803;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.acct-vacation-text {
    flex: 1;
    min-width: 0;
}

.acct-vacation-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--acct-ink);
}

.acct-vacation-state {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}

.acct-vacation.is-on .acct-vacation-state {
    background: #dc6803;
    color: #fff;
}

.acct-vacation-text p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--acct-muted);
}

.acct-switch {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 30px;
    border: none;
    border-radius: 999px;
    background: #d0d5dd;
    cursor: pointer;
    transition: background .2s;
}

.acct-switch.on { background: #dc6803; }

.acct-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
    transition: transform .2s;
}

.acct-switch.on .acct-switch-knob { transform: translateX(22px); }

.acct-edit-head {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--acct-line);
}

.acct-edit-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--acct-ink);
}

.acct-edit-head h3 i { color: var(--acct-brand); margin-right: 6px; }

.acct-edit-head p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--acct-muted);
}

/* --- Cards below (Documents, Security, Appearance, Agreement...) --- */
.acct-page .admin-card {
    border-color: var(--acct-line);
    border-radius: 14px;
    overflow: hidden;
}

.acct-page .admin-card-head {
    padding: 15px 20px;
    background: #fcfcfd;
}

.acct-page .admin-card-head h3 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--acct-ink);
}

.acct-page .policy-row {
    gap: 14px;
    padding: 14px 0;
}

.acct-page .acct-row-text {
    flex: 1;
    min-width: 0;
}

.acct-page .policy-row .btn-sm {
    flex-shrink: 0;
}

/* Submitted documents as framed tiles. */
.acct-page .profile-id-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.acct-page .profile-id-col {
    padding: 12px;
    border: 1px solid var(--acct-line);
    border-radius: 12px;
    background: #fcfcfd;
}

.acct-page .profile-id-label {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #344054;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.acct-page .profile-id-thumb {
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--acct-line);
    transition: transform .15s;
}

.acct-page .profile-id-thumb:hover { transform: scale(1.02); }

.acct-page .profile-id-empty {
    margin: 0;
    font-size: 12.5px;
    color: #98a2b3;
}

@media (max-width: 640px) {
    .acct-hero-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 18px 18px;
    }

    .acct-edit-btn { width: 100%; justify-content: center; }
    .acct-hero-name { font-size: 19px; }
}

/* =====================================================
   MANAGE INVENTORY — status filter chips
===================================================== */

/* Search · Sort · Stock Level on one line. */
.inventory-filter-row {
    grid-template-columns: 2fr 1fr 1fr;
}

@media (max-width: 760px) {
    .inventory-filter-row {
        grid-template-columns: 1fr;
    }
}

.inventory-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 20px 14px;
}

.inventory-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.inventory-status-chip span {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}

.inventory-status-chip:hover {
    border-color: #d0d5dd;
    background: #f9fafb;
}

.inventory-status-chip.active {
    border-color: #d0001b;
    background: #d0001b;
    color: #fff;
}

.inventory-status-chip.active span {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* =====================================================
   PRODUCT DRAFTS (Manage Inventory → Drafts)
   partials/seller-drafts-modal + the autosave status line.
===================================================== */

.draft-open-btn {
    position: relative;
}

.draft-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #d0001b;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.draft-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 12.5px;
    font-weight: 600;
}

.draft-status[hidden] {
    display: none;
}

.draft-modal-box {
    width: 600px;
    padding: 26px 26px 22px;
    border-radius: 16px;
}

.draft-modal-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.draft-modal-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.draft-modal-head p {
    margin: 3px 0 0;
    font-size: 13px;
    color: #667085;
}

.draft-modal-icon {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 12px;
    background: #fdecee;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.draft-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 55vh;
    overflow-y: auto;
}

.draft-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s;
}

.draft-item:hover {
    border-color: #f3c5cb;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .06);
}

.draft-item-icon {
    flex: 0 0 42px;
    height: 42px;
    border-radius: 10px;
    background: #f2f4f7;
    color: #98a2b3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.draft-item-info {
    flex: 1;
    min-width: 0;
}

.draft-item-title {
    font-size: 14px;
    font-weight: 700;
    color: #101828;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draft-item-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: #475467;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draft-item-time {
    margin-top: 4px;
    font-size: 11.5px;
    color: #98a2b3;
}

.draft-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.draft-item-actions form {
    margin: 0;
}

.draft-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 30px 16px;
    text-align: center;
    color: #667085;
    font-size: 13px;
}

.draft-empty i {
    font-size: 30px;
    color: #d0d5dd;
}

.draft-empty strong {
    font-size: 15px;
    color: #344054;
}

.draft-note {
    margin: 14px 0 0;
    font-size: 12px;
    color: #667085;
}

.draft-note i {
    color: #98a2b3;
    margin-right: 4px;
}

@media (max-width: 520px) {
    .draft-item { flex-wrap: wrap; }
    .draft-item-actions { width: 100%; justify-content: flex-end; }
}

/* =====================================================
   ORDER MANAGEMENT BOARD (seller "orders" tab)
   partials/seller-order-card — one column per stage.
===================================================== */

.order-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.order-col {
    --col: #d0001b;
    --col-soft: #fdecee;
    display: flex;
    flex-direction: column;
    background: #f9fafb;
    border: 1px solid #eaecf0;
    border-top: 3px solid var(--col);
    border-radius: 14px;
    overflow: hidden;
}

.order-col-packing { --col: #dc6803; --col-soft: #fff4e0; }
.order-col-transit { --col: #1570ef; --col-soft: #eaf2ff; }
.order-col-done { --col: #12b76a; --col-soft: #e8f8ef; }

.order-col-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 12px;
    background: #fff;
    border-bottom: 1px solid #eaecf0;
}

.order-col-icon {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--col-soft);
    color: var(--col);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.order-col-title {
    flex: 1;
    min-width: 0;
}

.order-col-title h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #101828;
}

.order-col-title p {
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: #667085;
}

.order-col-count {
    min-width: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--col);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.order-col-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    max-height: 680px;
    overflow-y: auto;
}

.order-col-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 34px 16px;
    color: #98a2b3;
    font-size: 12.5px;
    text-align: center;
}

.order-col-empty i {
    font-size: 24px;
    color: #d0d5dd;
}

/* --- One order --- */
.soc {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .15s, border-color .15s;
}

.soc:hover {
    border-color: #d0d5dd;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .08);
}

.soc-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.soc-id {
    font-size: 12.5px;
    font-weight: 800;
    color: #101828;
    letter-spacing: .01em;
}

.soc-time {
    font-size: 11.5px;
    color: #98a2b3;
    white-space: nowrap;
}

.soc-main {
    display: flex;
    gap: 10px;
}

.soc-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #f2f4f7;
    color: #98a2b3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.soc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.soc-info {
    flex: 1;
    min-width: 0;
}

.soc-product {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #101828;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.soc-more {
    font-size: 11.5px;
    color: #667085;
}

.soc-buyer {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: 11.5px;
    color: #667085;
    min-width: 0;
}

.soc-avatar {
    flex: 0 0 18px;
    height: 18px;
    border-radius: 50%;
    background: #f2f4f7;
    color: #475467;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.soc-buyer-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.soc-dot { color: #d0d5dd; }

.soc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #eaecf0;
}

.soc-total {
    font-size: 15px;
    font-weight: 800;
    color: #d0001b;
    font-variant-numeric: tabular-nums;
}

.soc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.soc-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.soc-pill-green { background: #ecfdf3; color: #067647; }
.soc-pill-amber { background: #fff4e0; color: #b54708; }

.soc-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.soc-actions form {
    flex: 1;
    margin: 0;
}

.soc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.soc-btn-ghost {
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
}

.soc-actions > .soc-btn-ghost:only-child,
.soc-actions > .soc-btn-ghost:first-child:last-child {
    flex: 1;
}

.soc-btn-ghost:hover { background: #f9fafb; }

.soc-btn-primary {
    width: 100%;
    border: none;
    background: #d0001b;
    color: #fff;
}

.soc-btn-primary:hover { background: #a30016; }

.soc-btn-proof {
    flex: 1;
    gap: 7px;
    border: none;
    background: #12b76a;
    color: #fff;
}

.soc-btn-proof:hover { background: #079455; }

.soc-waiting {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    border-radius: 8px;
    background: #fff4e0;
    color: #b54708;
    font-size: 11.5px;
    font-weight: 700;
}

@media (max-width: 1200px) {
    .order-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .order-board { grid-template-columns: 1fr; }
    .order-col-list { max-height: none; }
}

/* Order Management: the cancellation heads-up above the board, and the
   cancellations/refunds/returns cards that follow it. */
.order-action-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid #fecdca;
    border-radius: 12px;
    background: #fef3f2;
    color: #912018;
    font-size: 13.5px;
}

.order-action-banner > i {
    color: #d0001b;
}

.order-action-banner span {
    flex: 1;
    min-width: 0;
}

.order-action-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: #d0001b;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.order-action-banner-btn:hover {
    background: #a30016;
}

.order-after-board {
    margin-top: 22px;
}

.order-after-board > .admin-card:last-child {
    margin-bottom: 0;
}

#sellerCancellationRequests {
    scroll-margin-top: 90px;
}

/* Proof of delivery modal (partials/proof-of-delivery-modal) on the seller's
   Delivered column — same look as on the buyer's order page (cart.css). */
.pod-check-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e6f7ec;
    color: #1f9254;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 4px auto 14px;
}

.pod-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 12.5px;
    color: #777;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.pod-detail-row:last-child {
    border-bottom: none;
}

.pod-detail-row strong {
    color: #111;
    font-weight: 600;
    text-align: right;
}

/* =====================================================
   CUSTOMER FEEDBACK (seller) — partials/seller-feedback
===================================================== */

.fb-summary {
    display: grid;
    grid-template-columns: 200px 1fr 260px;
    gap: 24px;
    align-items: center;
    margin-bottom: 18px;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 16px;
}

.fb-score {
    text-align: center;
    padding-right: 24px;
    border-right: 1px solid #eaecf0;
}

.fb-score-value {
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    color: #101828;
    letter-spacing: -.02em;
}

.fb-stars {
    color: #f5a524;
    font-size: 12px;
    letter-spacing: 1px;
}

.fb-stars .fa-regular { color: #d0d5dd; }
.fb-stars-lg { margin: 8px 0 4px; font-size: 17px; letter-spacing: 3px; }

.fb-score-sub {
    font-size: 12.5px;
    color: #667085;
}

.fb-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fb-bar-row {
    display: grid;
    grid-template-columns: 38px 1fr 32px;
    align-items: center;
    gap: 10px;
    padding: 3px 8px;
    border-radius: 8px;
    color: #344054;
    text-decoration: none;
    font-size: 12.5px;
    transition: background .15s;
}

.fb-bar-row:hover { background: #f9fafb; }
.fb-bar-row.active { background: #fff7e6; }

.fb-bar-label {
    font-weight: 700;
    white-space: nowrap;
}

.fb-bar-label i { color: #f5a524; font-size: 11px; }

.fb-bar-track {
    height: 8px;
    border-radius: 999px;
    background: #f2f4f7;
    overflow: hidden;
}

.fb-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f5a524, #fbbf24);
}

.fb-bar-count {
    text-align: right;
    color: #667085;
    font-variant-numeric: tabular-nums;
}

.fb-quick {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 24px;
    border-left: 1px solid #eaecf0;
}

.fb-quick-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fb-quick-item strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #101828;
    line-height: 1.1;
}

.fb-quick-item span:not(.fb-quick-icon) {
    font-size: 12px;
    color: #667085;
}

.fb-quick-icon {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.fb-quick-green { background: #ecfdf3; color: #12b76a; }
.fb-quick-blue { background: #eaf2ff; color: #1570ef; }
.fb-quick-amber { background: #fff4e0; color: #dc6803; }

/* --- Filters --- */
.fb-filters-card {
    padding: 16px 18px;
    margin-bottom: 14px;
}

.fb-filter-row {
    display: grid;
    grid-template-columns: 1fr 220px 170px;
    gap: 10px;
}

.fb-search {
    position: relative;
}

.fb-search i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 13px;
}

.fb-search input,
.fb-filter-row select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 13.5px;
    color: #101828;
    outline: none;
}

.fb-search input { padding-left: 36px; }

.fb-search input:focus,
.fb-filter-row select:focus {
    border-color: #d0001b;
    box-shadow: 0 0 0 3px rgba(208, 0, 27, .1);
}

.fb-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.fb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.fb-chip .fa-star { color: #f5a524; font-size: 11px; }

.fb-chip span {
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.fb-chip:hover { border-color: #d0d5dd; background: #f9fafb; }

.fb-chip.active {
    border-color: #d0001b;
    background: #d0001b;
    color: #fff;
}

.fb-chip.active .fa-star { color: #fff; }
.fb-chip.active span { background: rgba(255, 255, 255, .22); color: #fff; }

.fb-chip-divider {
    width: 1px;
    height: 20px;
    background: #e4e7ec;
    margin: 0 2px;
}

.fb-results-head {
    margin: 4px 2px 10px;
    font-size: 12.5px;
    color: #667085;
}

.fb-results-head a { color: #d0001b; font-weight: 600; }

.fb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 16px;
    color: #667085;
    font-size: 13px;
}

.fb-empty i { font-size: 28px; color: #d0d5dd; }
.fb-empty strong { color: #344054; font-size: 14.5px; }
.fb-empty a { color: #d0001b; font-weight: 600; }

/* --- Reviews --- */
.fb-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fb-review {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    transition: box-shadow .15s, border-color .15s;
}

.fb-review:hover {
    border-color: #d0d5dd;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .06);
}

.fb-review-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fb-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecee;
    color: #d0001b;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fb-review-who {
    flex: 1;
    min-width: 0;
}

.fb-review-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #101828;
}

.fb-review-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.fb-rating-word {
    font-size: 12px;
    font-weight: 600;
    color: #667085;
}

.fb-review-date {
    text-align: right;
    font-size: 12.5px;
    font-weight: 600;
    color: #475467;
    white-space: nowrap;
}

.fb-review-date span {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: #98a2b3;
}

.fb-review-product {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0 52px;
}

.fb-product-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
}

.fb-product-pill i { color: #98a2b3; font-size: 11px; }

.fb-order-link {
    font-size: 12px;
    font-weight: 600;
    color: #1570ef;
    text-decoration: none;
}

.fb-order-link:hover { text-decoration: underline; }

.fb-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #667085;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

.fb-review-comment {
    margin: 10px 0 0 52px;
    font-size: 14px;
    line-height: 1.6;
    color: #344054;
    white-space: pre-line;
}

.fb-review-comment-none {
    font-size: 13px;
    font-style: italic;
    color: #98a2b3;
}

.fb-review .media-preview-list {
    margin: 10px 0 0 52px;
}

.fb-subratings {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0 52px;
}

.fb-subrating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid #eaecf0;
    border-radius: 999px;
    font-size: 12px;
    color: #667085;
}

.fb-subrating strong {
    color: #101828;
}

.fb-subrating strong i {
    margin-left: 2px;
    color: #f5a524;
    font-size: 10px;
}

@media (max-width: 1100px) {
    .fb-summary { grid-template-columns: 170px 1fr; }
    .fb-quick {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 16px 0 0;
        border-left: none;
        border-top: 1px solid #eaecf0;
    }
    .fb-quick-item { flex: 1 1 160px; }
}

@media (max-width: 640px) {
    .fb-summary { grid-template-columns: 1fr; }
    .fb-score { padding: 0 0 16px; border-right: none; border-bottom: 1px solid #eaecf0; }
    .fb-filter-row { grid-template-columns: 1fr; }
    .fb-review-product, .fb-review-comment, .fb-review .media-preview-list, .fb-subratings { margin-left: 0; }
}

/* =====================================================
   WISHLIST (seller) — partials/seller-wishlist
===================================================== */

.wl-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.wl-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
}

.wl-stat-alert {
    border-color: #fedf89;
    background: linear-gradient(120deg, #fffaeb 0%, #fff 70%);
}

.wl-stat > div {
    min-width: 0;
}

.wl-stat strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    color: #101828;
}

.wl-stat span:not(.wl-stat-icon) {
    font-size: 12.5px;
    color: #667085;
}

.wl-stat-top strong {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-stat-icon {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.wl-red { background: #fdecee; color: #d0001b; }
.wl-pink { background: #fff0f3; color: #e11d48; }
.wl-amber { background: #fff7e0; color: #d99a00; }
.wl-orange { background: #fff4e0; color: #dc6803; }

.wl-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid #fedf89;
    border-radius: 12px;
    background: #fffaeb;
    color: #93370d;
    font-size: 13.5px;
}

.wl-callout i { color: #dc6803; }

.wl-card {
    overflow: hidden;
}

.wl-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #eaecf0;
}

.wl-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #101828;
}

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

.wl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.wl-chip span {
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 11px;
    font-weight: 700;
}

.wl-chip:hover { background: #f9fafb; }

.wl-chip.active {
    border-color: #d0001b;
    background: #d0001b;
    color: #fff;
}

.wl-chip.active span { background: rgba(255, 255, 255, .22); color: #fff; }

.wl-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 20px;
    border-bottom: 1px solid #f2f4f7;
    transition: background .15s;
}

.wl-row:hover { background: #fcfcfd; }
.wl-row[hidden] { display: none; }

.wl-rank {
    font-size: 13px;
    font-weight: 800;
    color: #98a2b3;
    text-align: center;
}

.wl-rank-top {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff7e0;
    color: #b54708;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
}

.wl-product {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.wl-thumb {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #eaecf0;
    background: #f9fafb;
    color: #d0d5dd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wl-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wl-product-info { min-width: 0; }

.wl-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #101828;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-name:hover { color: #d0001b; }

.wl-sub {
    margin-top: 3px;
    font-size: 12.5px;
    color: #667085;
}

.wl-price {
    font-weight: 700;
    color: #101828;
}

.wl-sub s {
    margin-left: 4px;
    color: #98a2b3;
}

.wl-pill {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.wl-pill-green { background: #ecfdf3; color: #067647; }
.wl-pill-amber { background: #fff4e0; color: #b54708; }
.wl-pill-red { background: #fef3f2; color: #b42318; }

.wl-saves-count {
    font-size: 13px;
    font-weight: 700;
    color: #101828;
}

.wl-saves-count i { color: #e11d48; margin-right: 3px; }

.wl-bar {
    height: 6px;
    margin-top: 6px;
    border-radius: 999px;
    background: #f2f4f7;
    overflow: hidden;
}

.wl-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #fb7185, #e11d48);
}

.wl-actions {
    display: flex;
    gap: 8px;
}

.wl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.wl-btn-ghost {
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
}

.wl-btn-ghost:hover { background: #f9fafb; }

.wl-btn-primary {
    border: 1px solid #dc6803;
    background: #dc6803;
    color: #fff;
}

.wl-btn-primary:hover { background: #b54708; }

.wl-none {
    padding: 30px;
    text-align: center;
    font-size: 13px;
    color: #98a2b3;
}

@media (max-width: 1100px) {
    .wl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wl-row {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        row-gap: 10px;
    }
    .wl-stock { grid-column: 2; }
    .wl-saves { grid-column: 2 / -1; }
    .wl-actions { grid-column: 3; grid-row: 1; }
}

@media (max-width: 560px) {
    .wl-stats { grid-template-columns: 1fr; }
    .wl-row { grid-template-columns: 30px minmax(0, 1fr); }
    .wl-actions { grid-column: 2; grid-row: auto; }
}

/* =====================================================
   WALLET (seller) — partials/seller-wallet
===================================================== */

.wal-top {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 14px;
}

.wal-balance {
    position: relative;
    padding: 26px 28px;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 90% -10%, rgba(255, 255, 255, .18) 0, transparent 45%),
        linear-gradient(135deg, #7a0010 0%, #b30019 55%, #d0001b 100%);
    box-shadow: 0 14px 30px rgba(160, 0, 20, .25);
    overflow: hidden;
}

.wal-balance-label {
    font-size: 13px;
    font-weight: 600;
    opacity: .85;
}

.wal-balance-label i { margin-right: 6px; }

.wal-balance-value {
    margin: 8px 0 4px;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.wal-balance-sub {
    font-size: 12.5px;
    opacity: .8;
}

.wal-withdraw-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    height: 42px;
    padding: 0 20px;
    border: none;
    border-radius: 10px;
    background: #fff;
    color: #b30019;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}

.wal-withdraw-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.wal-withdraw-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.wal-balance-note {
    margin-top: 10px;
    font-size: 12px;
    opacity: .8;
}

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

.wal-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
}

.wal-metric > div { min-width: 0; }

.wal-metric strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #101828;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wal-metric span:not(.wal-metric-icon) {
    font-size: 12px;
    color: #667085;
}

.wal-metric-icon {
    flex: 0 0 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.wal-amber { background: #fff4e0; color: #dc6803; }
.wal-blue { background: #eaf2ff; color: #1570ef; }
.wal-green { background: #ecfdf3; color: #12b76a; }
.wal-red { background: #fdecee; color: #d0001b; }

.wal-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 11px 16px;
    border-radius: 12px;
    background: #f2f4f7;
    color: #475467;
    font-size: 13px;
}

.wal-note i { color: #98a2b3; }

.wal-card {
    overflow: hidden;
    margin-bottom: 16px;
}

.wal-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #eaecf0;
}

.wal-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #101828;
}

.wal-card-head p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: #667085;
}

.wal-chips {
    display: flex;
    gap: 6px;
}

.wal-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.wal-chip i { font-size: 10px; }
.wal-chip:hover { background: #f9fafb; }

.wal-chip.active {
    border-color: #101828;
    background: #101828;
    color: #fff;
}

.wal-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 120px 130px 100px;
    align-items: center;
    gap: 16px;
    padding: 13px 20px;
    border-bottom: 1px solid #f2f4f7;
    transition: background .15s;
}

.wal-row:hover { background: #fcfcfd; }
.wal-row[hidden] { display: none; }

.wal-row-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.wal-row-icon.is-in { background: #ecfdf3; color: #12b76a; }
.wal-row-icon.is-out { background: #fef3f2; color: #d92d20; }
.wal-row-icon.is-gcash { background: #eaf2ff; color: #1570ef; }

.wal-row-main { min-width: 0; }

.wal-row-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #101828;
}

.wal-row-desc {
    margin-top: 2px;
    font-size: 12.5px;
    color: #667085;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wal-row-date {
    font-size: 12.5px;
    font-weight: 600;
    color: #475467;
}

.wal-row-date span {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: #98a2b3;
}

.wal-row-amount {
    text-align: right;
    font-size: 14.5px;
    font-weight: 800;
    color: #101828;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wal-row-amount.is-in { color: #067647; }
.wal-row-amount.is-out { color: #b42318; }

.wal-status {
    justify-self: end;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.wal-status-completed { background: #ecfdf3; color: #067647; }
.wal-status-pending { background: #fff4e0; color: #b54708; }
.wal-status-reversed,
.wal-status-rejected,
.wal-status-failed { background: #fef3f2; color: #b42318; }
.wal-status-credit { background: #fff1f3; color: #c01048; }

/* Top up via GCash (on the red balance card) */
.wal-topup-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0 8px;
    height: 42px;
    padding: 0 18px;
    border: 1.5px solid rgba(255, 255, 255, .7);
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.wal-topup-btn:hover { background: rgba(255, 255, 255, .12); }

/* Credit owed to GoCart — charges the wallet couldn't cover */
.wal-credit {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 18px 20px;
    border: 1px solid #fecdd6;
    border-radius: 16px;
    background: #fff5f6;
}
.wal-credit-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #ffe4e8;
    color: #c01048;
    font-size: 19px;
}
.wal-credit-main { flex: 1; min-width: 0; }
.wal-credit-label { font-size: 12.5px; font-weight: 700; color: #c01048; text-transform: uppercase; letter-spacing: .04em; }
.wal-credit-value { margin: 2px 0 4px; font-size: 26px; font-weight: 800; color: #101828; }
.wal-credit-main p { margin: 0; font-size: 13px; line-height: 1.5; color: #475467; }
.wal-credit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    background: #c01048;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.wal-credit-btn:hover { background: #a11043; }

.wal-topup-steps { margin: 4px 0 14px; padding-left: 20px; font-size: 13px; line-height: 1.7; color: #475467; }
.wal-topup-pay {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    background: #f9fafb;
}
.wal-topup-pay img { width: 110px; height: 110px; object-fit: contain; border-radius: 8px; background: #fff; }
.wal-topup-pay div { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: #344054; }
.wal-topup-pay strong { font-size: 15px; color: #101828; }

@media (max-width: 640px) {
    .wal-credit { flex-wrap: wrap; }
    .wal-credit-btn { width: 100%; justify-content: center; }
    .wal-topup-btn { margin-left: 0; }
}

.wal-empty,
.wal-none {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 36px 16px;
    font-size: 13px;
    color: #98a2b3;
    text-align: center;
}

.wal-none[hidden] { display: none; }
.wal-empty i { font-size: 26px; color: #d0d5dd; }
.wal-empty strong { font-size: 14.5px; color: #344054; }

/* --- Withdraw modal --- */
.wal-modal {
    width: 440px;
    padding: 26px 26px 22px;
    border-radius: 16px;
}

.wal-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.wal-modal-head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
}

.wal-modal-head p {
    margin: 2px 0 0;
    font-size: 13px;
    color: #667085;
}

.wal-modal-head p strong { color: #067647; }

.wal-modal-icon {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 12px;
    background: #fdecee;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.wal-form {
    display: flex;
    flex-direction: column;
}

.wal-label {
    margin: 12px 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #344054;
}

.wal-label:first-of-type { margin-top: 0; }

.wal-form > input,
.wal-amount input {
    height: 44px;
    padding: 0 14px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    outline: none;
}

.wal-form > input:focus,
.wal-amount:focus-within {
    border-color: #d0001b;
    box-shadow: 0 0 0 3px rgba(208, 0, 27, .1);
}

.wal-amount {
    display: flex;
    align-items: center;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    overflow: hidden;
}

.wal-amount span {
    padding: 0 4px 0 14px;
    font-size: 20px;
    font-weight: 800;
    color: #98a2b3;
}

.wal-amount input {
    flex: 1;
    min-width: 0;
    height: 52px;
    border: none;
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.wal-quick {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.wal-quick button {
    flex: 1;
    height: 32px;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    background: #fff;
    color: #344054;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.wal-quick button:hover { background: #f9fafb; border-color: #d0d5dd; }

.wal-submit {
    margin-top: 20px;
    height: 46px;
    border: none;
    border-radius: 10px;
    background: #d0001b;
    color: #fff;
    font: inherit;
    font-size: 14.5px;
    font-weight: 800;
    cursor: pointer;
}

.wal-submit i { margin-right: 6px; }
.wal-submit:hover { background: #a30016; }

.wal-form-note {
    margin: 10px 0 0;
    text-align: center;
    font-size: 12px;
    color: #667085;
}

.wal-form-note i { color: #12b76a; margin-right: 4px; }

@media (max-width: 1100px) {
    .wal-top { grid-template-columns: 1fr; }
    .wal-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .wal-row-date { display: none; }
    .wal-status { grid-column: 3; justify-self: end; }
}

@media (max-width: 560px) {
    .wal-metrics { grid-template-columns: 1fr; }
    .wal-balance-value { font-size: 32px; }
    .wal-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; }
    .wal-status { display: none; }
}

/* =====================================================
   ANALYTICS (seller) — partials/seller-analytics
===================================================== */

.an-head {
    margin-bottom: 14px;
}

.an-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #101828;
}

.an-head p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #667085;
}

.an-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.an-kpi {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
}

.an-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.an-kpi-label {
    font-size: 13px;
    font-weight: 600;
    color: #475467;
}

.an-kpi-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #fdecee;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.an-kpi-value {
    margin: 10px 0 8px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #101828;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.an-delta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
}

.an-delta span {
    font-weight: 500;
    color: #98a2b3;
}

.an-delta-up { color: #067647; }
.an-delta-down { color: #b42318; }
.an-delta-flat { color: #98a2b3; font-weight: 500; }

.an-chart-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.an-chart-card,
.an-totals,
.an-list-card {
    margin: 0;
    padding: 0 0 6px;
    overflow: hidden;
}

.an-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 12px;
}

.an-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #101828;
}

.an-card-head p {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: #667085;
}

.an-chart-wrap {
    position: relative;
    height: 280px;
    padding: 4px 16px 8px;
}

.an-table-toggle {
    margin: 0 20px 10px;
    font-size: 12.5px;
}

.an-table-toggle summary {
    cursor: pointer;
    color: #475467;
    font-weight: 600;
}

.an-table-scroll {
    max-height: 220px;
    overflow-y: auto;
    margin-top: 8px;
    border: 1px solid #eaecf0;
    border-radius: 8px;
}

.an-table-scroll table {
    width: 100%;
    border-collapse: collapse;
}

.an-table-scroll th,
.an-table-scroll td {
    padding: 6px 12px;
    text-align: left;
    border-bottom: 1px solid #f2f4f7;
}

.an-table-scroll td:last-child,
.an-table-scroll th:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.an-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0 20px;
    padding: 13px 0;
    border-top: 1px solid #f2f4f7;
    font-size: 13px;
    color: #475467;
}

.an-total-row strong {
    font-size: 15px;
    font-weight: 800;
    color: #101828;
    font-variant-numeric: tabular-nums;
}

.an-total-muted strong { font-size: 14px; color: #475467; }

.an-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.an-best {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid #f2f4f7;
}

.an-rank {
    flex: 0 0 24px;
    height: 24px;
    border-radius: 50%;
    background: #f2f4f7;
    color: #475467;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.an-rank-gold { background: #fff7e0; color: #b54708; }

.an-thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid #eaecf0;
    background: #f9fafb;
    color: #d0d5dd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.an-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.an-best-info {
    flex: 1;
    min-width: 0;
}

.an-best-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.an-best-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #101828;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.an-best-name:hover { color: #d0001b; }

.an-best-top strong {
    font-size: 13.5px;
    font-weight: 800;
    color: #101828;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.an-best-bar {
    height: 6px;
    margin: 6px 0 5px;
    border-radius: 999px;
    background: #f2f4f7;
    overflow: hidden;
}

.an-best-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #d0001b;
}

.an-best-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #667085;
}

.an-pill {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.an-pill-amber { background: #fff4e0; color: #b54708; }
.an-pill-red { background: #fef3f2; color: #b42318; }

.an-link {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #d0001b;
    text-decoration: none;
    white-space: nowrap;
}

.an-link i { font-size: 10px; margin-left: 2px; }

.an-health {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0 20px 6px;
}

.an-health > div {
    padding: 10px 12px;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px solid #f2f4f7;
}

.an-health strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: #101828;
}

.an-health span {
    font-size: 11.5px;
    color: #667085;
}

.an-health .is-warn { background: #fffaeb; border-color: #fedf89; }
.an-health .is-warn strong { color: #b54708; }
.an-health .is-bad { background: #fef3f2; border-color: #fecdca; }
.an-health .is-bad strong { color: #b42318; }

.an-sub-head {
    margin: 12px 20px 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #98a2b3;
}

.an-attn {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 20px;
    padding: 9px 0;
    border-bottom: 1px solid #f2f4f7;
    font-size: 13px;
}

.an-attn-icon {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 8px;
    background: #f2f4f7;
    color: #667085;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.an-attn-icon.is-warn { background: #fff4e0; color: #dc6803; }
.an-attn-icon.is-bad { background: #fef3f2; color: #d92d20; }

.an-attn-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: #101828;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.an-attn-meta {
    font-size: 12px;
    color: #98a2b3;
    white-space: nowrap;
}

.an-ok {
    margin: 4px 20px 8px;
    font-size: 12.5px;
    color: #067647;
}

.an-ok i { margin-right: 5px; }

.an-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 16px;
    font-size: 13px;
    color: #98a2b3;
    text-align: center;
}

.an-empty i { font-size: 26px; color: #d0d5dd; }
.an-empty strong { font-size: 14.5px; color: #344054; }

@media (max-width: 1200px) {
    .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .an-chart-row,
    .an-split { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .an-kpis { grid-template-columns: 1fr; }
    .an-attn-meta { display: none; }
}

/* =====================================================
   CHANGE EMAIL (seller / courier / admin) — partials/email-change-modals
===================================================== */

.ecm-field {
    position: relative;
}

.ecm-field input {
    padding-right: 74px;
}

.ecm-change-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    padding: 6px;
    border: none;
    background: none;
    color: #d0001b;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.ecm-box {
    width: 440px;
    padding: 26px 26px 22px;
    border-radius: 16px;
}

.ecm-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.ecm-head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
}

.ecm-head p {
    margin: 3px 0 0;
    font-size: 13px;
    color: #667085;
}

.ecm-icon {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 12px;
    background: #fdecee;
    color: #d0001b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ecm-label {
    display: block;
    margin: 12px 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #344054;
}

.ecm-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    outline: none;
}

.ecm-input:disabled { background: #f9fafb; color: #667085; }

.ecm-input:focus,
.ecm-code:focus {
    border-color: #d0001b;
    box-shadow: 0 0 0 3px rgba(208, 0, 27, .1);
}

.ecm-code {
    display: block;
    width: 100%;
    height: 58px;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    text-align: center;
    font: inherit;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .5em;
    font-variant-numeric: tabular-nums;
    outline: none;
}

.ecm-submit {
    width: 100%;
    margin-top: 18px;
    height: 46px;
    border: none;
    border-radius: 10px;
    background: #d0001b;
    color: #fff;
    font: inherit;
    font-size: 14.5px;
    font-weight: 800;
    cursor: pointer;
}

.ecm-submit i { margin-right: 6px; }
.ecm-submit:hover { background: #a30016; }

.ecm-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12.5px;
    color: #667085;
}

.ecm-footer form { margin: 0; }

.ecm-link {
    padding: 0;
    border: none;
    background: none;
    color: #d0001b;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ecm-link-muted {
    color: #667085;
    font-weight: 500;
}

/* Seller inventory — Product ID tag */
.product-id-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #374151;
    font: 600 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: nowrap;
}
[data-theme="dark"] .product-id-tag { background: #1f2937; border-color: #374151; color: #e5e7eb; }

/* =====================================================
   SELLER → GENERATE REPORT
===================================================== */

.rpt-toolbar {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    margin-bottom: 18px;
}

.rpt-toolbar-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.rpt-toolbar-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #b30019, #d0001b);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 6px 14px rgba(208, 0, 27, .25);
}

.rpt-toolbar-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: #111827; }
.rpt-toolbar-head p { margin: 3px 0 0; font-size: 13px; color: #6b7280; }

.rpt-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.rpt-preset {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.rpt-preset:hover { border-color: #d0001b; color: #d0001b; }
.rpt-preset.active { background: #111827; border-color: #111827; color: #fff; }

.rpt-range {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px dashed #e5e7eb;
}

.rpt-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; max-width: 260px; }
.rpt-field span { font-size: 11.5px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }

.rpt-field input {
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    color: #111827;
    background: #f9fafb;
}

.rpt-field input:focus { outline: none; border-color: #d0001b; background: #fff; box-shadow: 0 0 0 3px rgba(208, 0, 27, .12); }
.rpt-date-control { position: relative; display: flex; }
.rpt-date-control .rpt-date-display { width: 100%; padding-right: 42px; }
.rpt-date-native { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; opacity: 0; pointer-events: none; }
.rpt-date-picker { position: absolute; top: 0; right: 0; width: 42px; height: 42px; border: 0; border-radius: 0 10px 10px 0; background: transparent; color: #6b7280; cursor: pointer; }
.rpt-date-picker:hover { color: #d0001b; }
.rpt-range-arrow { color: #9ca3af; margin-bottom: 14px; }

.rpt-generate {
    height: 42px;
    padding: 0 20px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 10px;
    background: #d0001b;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(208, 0, 27, .22);
    transition: background .15s, transform .15s;
}

.rpt-generate:hover { background: #b30019; transform: translateY(-1px); }
.rpt-generate:disabled { opacity: .7; cursor: wait; transform: none; }

/* Loading placeholder */
.rpt-placeholder { text-align: center; color: #6b7280; font-size: 13px; }
.rpt-skeleton-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }

.rpt-skeleton {
    height: 104px;
    border-radius: 14px;
    background: linear-gradient(90deg, #f3f4f6 0%, #e9eaee 50%, #f3f4f6 100%);
    background-size: 200% 100%;
    animation: rptShimmer 1.2s ease-in-out infinite;
}

@keyframes rptShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

#reportResults { transition: opacity .2s; }
#reportResults.rpt-loading { opacity: .45; pointer-events: none; }

/* Period + actions */
.rpt-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.rpt-period strong { display: block; font-size: 16px; color: #111827; }
.rpt-period > span { font-size: 12.5px; color: #6b7280; }
.rpt-action-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.rpt-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.rpt-btn:hover { background: #f9fafb; }
.rpt-btn-dark { background: #111827; border-color: #111827; color: #fff; }
.rpt-btn-dark:hover { background: #1f2937; }

.rpt-print-only { display: none; }

.rpt-nodata {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px;
    margin-bottom: 14px;
    border: 1px dashed #d1d5db;
    border-radius: 14px;
    background: #fafafa;
    text-align: center;
}

.rpt-nodata[hidden] { display: none; }

.rpt-nodata-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff1f2;
    color: #d0001b;
    margin-bottom: 4px;
}

.rpt-nodata strong { color: #111827; font-size: 14.5px; }
.rpt-nodata p { margin: 0; font-size: 13px; color: #6b7280; }

/* KPI cards */
.rpt-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.rpt-kpi {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    min-width: 0;
}

.rpt-kpi-hero {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    border: none;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 255, 255, .16) 0, transparent 50%),
        linear-gradient(135deg, #111827 0%, #1f2937 100%);
}

.rpt-kpi-label { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: #6b7280; }
.rpt-kpi-label i { font-size: 12px; color: #9ca3af; }
.rpt-kpi-label small { font-weight: 500; color: #9ca3af; }
.rpt-kpi-hero .rpt-kpi-label, .rpt-kpi-hero .rpt-kpi-label i { color: rgba(255, 255, 255, .75); }

.rpt-kpi-value {
    margin: 8px 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.rpt-kpi-hero .rpt-kpi-value { color: #fff; font-size: 32px; }
.rpt-kpi-foot { font-size: 12px; color: #9ca3af; }

.rpt-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.rpt-delta span { font-weight: 500; opacity: .8; }
.rpt-delta-good { background: #ecfdf3; color: #15803d; }
.rpt-delta-bad { background: #fef2f2; color: #b91c1c; }
.rpt-delta-flat { background: #f3f4f6; color: #6b7280; }
.rpt-kpi-hero .rpt-delta-good { background: rgba(34, 197, 94, .18); color: #86efac; }
.rpt-kpi-hero .rpt-delta-bad { background: rgba(239, 68, 68, .2); color: #fca5a5; }
.rpt-kpi-hero .rpt-delta-flat { background: rgba(255, 255, 255, .12); color: #e5e7eb; }

/* Cards */
.rpt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.rpt-card {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    min-width: 0;
}

.rpt-card-wide { grid-column: 1 / -1; }

.rpt-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.rpt-card-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }
.rpt-card-head p { margin: 2px 0 0; font-size: 12.5px; color: #6b7280; }

.rpt-legend { display: flex; gap: 14px; font-size: 12.5px; color: #374151; }
.rpt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rpt-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.rpt-chart { height: 290px; }
.rpt-muted { margin: 0; font-size: 13px; color: #9ca3af; }

/* Status bars */
.rpt-status-list { display: flex; flex-direction: column; gap: 12px; }
.rpt-status-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #374151; margin-bottom: 6px; }
.rpt-status-top span { display: inline-flex; align-items: center; gap: 8px; }
.rpt-status-top span i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.rpt-status-top strong { color: #111827; font-variant-numeric: tabular-nums; }
.rpt-status-top small { font-weight: 500; color: #9ca3af; margin-left: 4px; }
.rpt-status-bar { height: 6px; border-radius: 999px; background: #f3f4f6; overflow: hidden; }
.rpt-status-bar span { display: block; height: 100%; border-radius: 999px; }

/* Top products */
.rpt-top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rpt-top-list li { display: flex; align-items: center; gap: 12px; }

.rpt-rank {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    font-weight: 800;
}

.rpt-top-list li:first-child .rpt-rank { background: #fef3c7; color: #b45309; }
.rpt-top-main { flex: 1; min-width: 0; }
.rpt-top-name { font-size: 13.5px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.rpt-top-bar { height: 5px; border-radius: 999px; background: #f3f4f6; overflow: hidden; }
.rpt-top-bar span { display: block; height: 100%; border-radius: 999px; background: #d0001b; }
.rpt-top-figures { text-align: right; flex-shrink: 0; }
.rpt-top-figures strong { display: block; font-size: 13.5px; color: #111827; font-variant-numeric: tabular-nums; }
.rpt-top-figures span { font-size: 12px; color: #6b7280; }

/* Daily table */
.rpt-table-wrap { overflow-x: auto; max-height: 360px; overflow-y: auto; border: 1px solid #f1f2f4; border-radius: 10px; }
.rpt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpt-table th { position: sticky; top: 0; background: #f9fafb; text-align: left; padding: 10px 14px; font-size: 11.5px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #eceef1; }
.rpt-table td { padding: 10px 14px; border-bottom: 1px solid #f3f4f6; color: #374151; }
.rpt-table tbody tr:hover td { background: #fafafa; }
.rpt-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt-table .neg { color: #b91c1c; }
.rpt-table tfoot td { position: sticky; bottom: 0; background: #f9fafb; font-weight: 800; color: #111827; border-top: 1px solid #e5e7eb; border-bottom: none; }
.rpt-table-empty { text-align: center; color: #9ca3af; padding: 22px !important; }

@media (max-width: 1100px) {
    .rpt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rpt-kpi-hero { grid-row: auto; grid-column: 1 / -1; }
    .rpt-skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .rpt-grid { grid-template-columns: minmax(0, 1fr); }
    .rpt-range-arrow { display: none; }
    .rpt-field { max-width: none; }
    .rpt-generate { margin-left: 0; width: 100%; justify-content: center; }
    .rpt-toolbar { padding: 18px 16px; }
}

@media (max-width: 480px) {
    .rpt-kpis { grid-template-columns: minmax(0, 1fr); }
}

@media print {
    .rpt-print-only { display: flex; }
    .rpt-doc { color: #111; }
    .rpt-nodata { display: none !important; }
    .rpt-kpis { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
    .rpt-kpi-hero { grid-row: auto; background: #fff !important; color: #111 !important; border: 1px solid #ccc; }
    .rpt-kpi-hero .rpt-kpi-value, .rpt-kpi-hero .rpt-kpi-label, .rpt-kpi-hero .rpt-kpi-label i { color: #111 !important; }
    .rpt-kpi, .rpt-card { box-shadow: none; border: 1px solid #ccc; padding: 10px 12px; break-inside: avoid; }
    .rpt-kpi-value, .rpt-kpi-hero .rpt-kpi-value { font-size: 16px; margin: 4px 0; }
    .rpt-delta { padding: 0; background: none !important; }
    .rpt-grid { gap: 10px; }
    .rpt-chart { height: 200px; }
    .rpt-table-wrap { max-height: none; overflow: visible; border: none; }
    .rpt-table th, .rpt-table tfoot td { position: static; }
    .rpt-status-bar, .rpt-top-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =====================================================
   ADMIN FINANCE — Commission, Platform Wallet, Reports
   (shares the .rpt-* report styles above)
===================================================== */

.rpt-toolbar [hidden], .fin-tabbed [hidden] { display: none !important; }

.fin-intro {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    margin-bottom: 18px;
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(circle at 95% -20%, rgba(255, 255, 255, .16) 0, transparent 45%),
        linear-gradient(135deg, #7a0010 0%, #b30019 55%, #d0001b 100%);
    box-shadow: 0 12px 26px rgba(160, 0, 20, .22);
}

.fin-intro-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .16);
    font-size: 18px;
}

.fin-intro h3 { margin: 0; font-size: 16.5px; font-weight: 800; }
.fin-intro p { margin: 4px 0 0; font-size: 13px; opacity: .85; line-height: 1.5; }

/* Two-up panels */
.fin-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }

.fin-panel, .fin-card {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    min-width: 0;
}

.fin-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fin-panel-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }
.fin-panel-head p { margin: 2px 0 0; font-size: 12.5px; color: #6b7280; }

.fin-panel-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 16px;
}

.fin-tone-red { background: #fff1f2; color: #d0001b; }
.fin-tone-blue { background: #eff6ff; color: #2563eb; }

.fin-panel-hero span { display: block; font-size: 12.5px; font-weight: 600; color: #6b7280; }
.fin-panel-hero strong { display: block; margin-top: 4px; font-size: 28px; font-weight: 800; color: #111827; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

.fin-progress { height: 8px; margin: 14px 0; border-radius: 999px; background: #fde68a; overflow: hidden; }
.fin-progress-good { display: block; height: 100%; border-radius: 999px; background: #16a34a; }

.fin-panel-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fin-panel-stats > div { padding: 10px 12px; border-radius: 10px; background: #f9fafb; min-width: 0; }
.fin-panel-stats span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6b7280; }
.fin-panel-stats strong { display: block; margin-top: 4px; font-size: 14px; color: #111827; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.fin-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #9ca3af; flex-shrink: 0; }
.fin-dot-good { background: #16a34a; }
.fin-dot-warn { background: #f59e0b; }

.fin-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12.5px;
}

/* Tabbed tables */
.fin-card { padding: 0; overflow: hidden; }

.fin-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid #eceef1;
}

.fin-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #f3f4f6; flex-wrap: wrap; }

.fin-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #4b5563;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.fin-tab span { padding: 1px 7px; border-radius: 999px; background: #e5e7eb; font-size: 11px; color: #374151; }
.fin-tab.active { background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.fin-tab.active i { color: #d0001b; }
.fin-tab.active span { background: #fee2e2; color: #b30019; }

.fin-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fin-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.fin-chip {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.fin-chip:hover { border-color: #d0001b; color: #d0001b; }
.fin-chip.active { background: #111827; border-color: #111827; color: #fff; }

.fin-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    color: #9ca3af;
}

.fin-search:focus-within { border-color: #d0001b; background: #fff; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.fin-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: #111827; width: 190px; }

.fin-tab-panel { display: none; }
.fin-tab-panel.active { display: block; }

.fin-panel-note {
    display: flex;
    gap: 8px;
    margin: 14px 18px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f9fafb;
    color: #4b5563;
    font-size: 12.5px;
    line-height: 1.5;
}

.fin-panel-note i { color: #9ca3af; margin-top: 2px; }

.fin-table-wrap { overflow-x: auto; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.fin-table th {
    text-align: left;
    padding: 11px 18px;
    background: #f9fafb;
    border-bottom: 1px solid #eceef1;
    color: #6b7280;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.fin-table td { padding: 12px 18px; border-bottom: 1px solid #f3f4f6; color: #374151; vertical-align: middle; white-space: nowrap; }
.fin-table tbody tr:last-child td { border-bottom: none; }
.fin-table tbody tr:hover td { background: #fafafa; }
.fin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-strong { font-weight: 700; color: #111827 !important; }

.fin-person { display: flex; align-items: center; gap: 9px; }

.fin-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fee2e2;
    color: #b30019;
    font-size: 12px;
    font-weight: 800;
}

.fin-avatar-blue { background: #dbeafe; color: #1d4ed8; }

.fin-method { padding: 3px 8px; border-radius: 6px; background: #f3f4f6; color: #374151; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.fin-method-gcash { background: #e0f2fe; color: #0369a1; }

.fin-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.fin-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fin-badge-good { background: #ecfdf3; color: #15803d; }
.fin-badge-warn { background: #fffbeb; color: #b45309; }
.fin-badge-bad { background: #fef2f2; color: #b91c1c; }
.fin-badge-muted { background: #f3f4f6; color: #4b5563; }

.fin-date { color: #111827; }
.fin-date span { display: block; font-size: 11.5px; color: #9ca3af; }

.fin-type { display: inline-flex; align-items: center; gap: 7px; }
.fin-type i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; }
.fin-type.is-in i { background: #ecfdf3; color: #15803d; }
.fin-type.is-out i { background: #fef2f2; color: #b91c1c; }
.fin-amount { font-weight: 700; }
.fin-amount.is-in { color: #15803d !important; }
.fin-amount.is-out { color: #b91c1c !important; }
.fin-amount.is-zero { color: #9ca3af !important; font-weight: 600; }
.fin-type.is-zero i { background: #f3f4f6; color: #9ca3af; }

.fin-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 20px; text-align: center; color: #6b7280; font-size: 13px; }
.fin-empty i { width: 46px; height: 46px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; background: #fff1f2; color: #d0001b; font-size: 18px; }
.fin-empty strong { color: #111827; font-size: 14.5px; }
.fin-none { padding: 22px; text-align: center; color: #9ca3af; font-size: 13px; }
.fin-neg { color: #b91c1c !important; }

/* Platform Wallet hero */
.fin-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-bottom: 18px; }

.fin-balance {
    position: relative;
    padding: 26px 28px;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 92% -10%, rgba(255, 255, 255, .16) 0, transparent 45%),
        linear-gradient(135deg, #111827 0%, #1f2937 60%, #7a0010 140%);
    box-shadow: 0 14px 30px rgba(17, 24, 39, .22);
    overflow: hidden;
}

.fin-balance-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; opacity: .8; }
.fin-balance-value { margin: 10px 0 4px; font-size: 38px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fin-balance-sub { font-size: 12.5px; opacity: .7; }
.fin-balance-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }

.fin-btn-light, .fin-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, background .15s;
}

.fin-btn-light { border: none; background: #fff; color: #111827; }
.fin-btn-light:hover { transform: translateY(-1px); }
.fin-btn-ghost { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); color: #fff; }
.fin-btn-ghost:hover { background: rgba(255, 255, 255, .14); }
.fin-btn-ghost:disabled { opacity: .45; cursor: not-allowed; }

.fin-balance-foot {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.fin-balance-foot span { display: block; font-size: 11.5px; opacity: .65; }
.fin-balance-foot strong { display: block; margin-top: 3px; font-size: 14.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.fin-profit {
    padding: 22px 24px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #eceef1;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    display: flex;
    flex-direction: column;
}

.fin-profit-head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: #374151; }
.fin-profit-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.fin-profit.is-up .fin-profit-icon { background: #ecfdf3; color: #15803d; }
.fin-profit.is-down .fin-profit-icon { background: #fef2f2; color: #b91c1c; }
.fin-profit-value { margin: 10px 0 14px; font-size: 32px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fin-profit.is-up .fin-profit-value { color: #15803d; }
.fin-profit.is-down .fin-profit-value { color: #b91c1c; }

.fin-equation { border: 1px solid #f1f2f4; border-radius: 12px; overflow: hidden; }
.fin-equation > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; font-size: 13px; color: #4b5563; border-bottom: 1px solid #f3f4f6; }
.fin-equation strong { color: #111827; font-variant-numeric: tabular-nums; }
.fin-equation-total { background: #f9fafb; border-bottom: none !important; font-weight: 700; }
.fin-profit-note { display: flex; gap: 8px; margin: 12px 0 0; font-size: 12px; color: #6b7280; line-height: 1.5; }
.fin-profit-note i { color: #9ca3af; margin-top: 2px; }

.fin-bars { display: flex; flex-direction: column; gap: 13px; }
.fin-bar-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 13px; color: #374151; }
.fin-bar-top span { display: inline-flex; align-items: center; gap: 8px; }
.fin-bar-top i { width: 16px; text-align: center; }
.fin-bar-top strong { color: #111827; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-bar-top small { margin-left: 4px; font-weight: 500; color: #9ca3af; }
.fin-bar { height: 7px; border-radius: 999px; background: #f3f4f6; overflow: hidden; }
.fin-bar span { display: block; height: 100%; border-radius: 999px; }

.fin-modal-icon-green { background: #ecfdf3 !important; color: #15803d !important; }

/* Reports builder */
.fin-report-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }

.fin-report-type {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.fin-report-type:hover { border-color: #fca5a5; }
.fin-report-type.active { border-color: #d0001b; background: #fff8f8; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }

.fin-report-type-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 16px;
}

.fin-report-type.active .fin-report-type-icon { background: #d0001b; color: #fff; }
.fin-report-type strong { display: block; font-size: 14px; color: #111827; }
.fin-report-type small { display: block; margin-top: 2px; font-size: 12px; color: #6b7280; }

.fin-report-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.fin-report-row .rpt-presets { margin-bottom: 0; }
.fin-report-row-label { width: 92px; white-space: nowrap; font-size: 11.5px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.fin-report-row .report-scope-select { height: 34px; border-radius: 999px; }
.fin-range-fields { display: flex; align-items: flex-end; gap: 12px; flex: 1 1 auto; flex-wrap: wrap; }
.fin-kpis-5 { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); }
.fin-kpis-auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fin-kpis-auto .fin-kpi-hero-auto { grid-row: auto; }
.fin-hero-foot { color: rgba(255, 255, 255, .6) !important; }

@media (max-width: 1100px) {
    .fin-kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fin-hero, .fin-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .fin-kpis-5 { grid-template-columns: minmax(0, 1fr); }
    .fin-report-types { grid-template-columns: minmax(0, 1fr); }
    .fin-panel-stats, .fin-balance-foot { grid-template-columns: minmax(0, 1fr); }
    .fin-search input { width: 100%; }
    .fin-search { flex: 1; }
    .fin-balance-value { font-size: 30px; }
}

/* Change phone number modal (sellers / couriers) — +63 prefix field */
.pcm-phone {
    display: flex;
    align-items: stretch;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.pcm-phone:focus-within { border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .12); }
.pcm-phone span { display: flex; align-items: center; padding: 0 12px; background: #f3f4f6; color: #374151; font-weight: 700; font-size: 14px; border-right: 1px solid #e5e7eb; }
.pcm-phone input { flex: 1; min-width: 0; border: none; outline: none; padding: 11px 12px; font-family: inherit; font-size: 14px; }

/* Seller order card — the buyer's note */
.soc-note {
    display: flex;
    gap: 8px;
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
    font-size: 12.5px;
    line-height: 1.45;
}
.soc-note i { margin-top: 2px; color: #d97706; }
.soc-note span { overflow-wrap: anywhere; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Seller order details — why it was cancelled */
.seller-cancel-reason { display: flex; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; }
.seller-cancel-reason > i { margin-top: 3px; color: #dc2626; }
.seller-cancel-reason strong { display: block; margin-bottom: 4px; }
.seller-cancel-reason span { display: block; font-size: 13.5px; }
.seller-cancel-reason-note { margin-top: 4px; font-size: 12.5px !important; color: #991b1b; }

/* Chat 1,000-character limit counter (resources/js/lib/chat-limit.js) */
.chat-limit-counter { align-self: center; margin: 0 6px; font-size: 11.5px; font-weight: 700; color: #b45309; white-space: nowrap; }
.chat-limit-counter[hidden] { display: none; }
.chat-limit-counter.is-over { color: #dc2626; }
.chat-limit-over { outline: 2px solid #fca5a5 !important; border-radius: 8px; }

/* Seller — return requests to decide */
.srr-card .admin-card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.srr-list { display: grid; gap: 14px; }
.srr { border: 1px solid #eceef1; border-radius: 14px; padding: 16px 18px; background: #fff; }
.srr.is-escalated { border-color: #fde68a; background: #fffdf5; }
.srr-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.srr-head strong { font-size: 15px; color: #111827; margin-right: 8px; }
.srr-head span { font-size: 12.5px; color: #6b7280; }
.srr-badge { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.srr-badge-info { background: #eff6ff; color: #1d4ed8; }
.srr-badge-warn { background: #fffbeb; color: #b45309; }
.srr-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 18px; margin-top: 14px; align-items: start; }
.srr-items { display: grid; gap: 8px; }
.srr-item { display: flex; gap: 10px; align-items: center; }
.srr-item img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #f3f4f6; }
.srr-item strong { display: block; font-size: 13px; color: #111827; }
.srr-item span { font-size: 12px; color: #6b7280; }
.srr-label { display: inline-block; padding: 3px 9px; border-radius: 6px; background: #fef2f2; color: #b91c1c; font-size: 12px; font-weight: 700; }
.srr-claim p { margin: 8px 0 0; font-size: 13.5px; color: #111827; line-height: 1.5; white-space: pre-line; }
.srr-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.srr-photos img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid #e5e7eb; }
.srr-money { display: grid; gap: 8px; min-width: 140px; }
.srr-money div { padding: 8px 12px; border-radius: 10px; background: #f9fafb; }
.srr-money span { display: block; font-size: 11.5px; color: #6b7280; }
.srr-money strong { font-size: 14px; color: #111827; }
.srr-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f1f2f4; }
.srr-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.srr-btn-approve { background: #16a34a; color: #fff; }
.srr-btn-reject { background: #fff; color: #b91c1c; border-color: #fecaca; }
.srr-btn-reject-confirm { background: #dc2626; color: #fff; }
.srr-reject { margin-top: 12px; padding: 14px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; }
.srr-reject[hidden] { display: none; }
.srr-reject label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: #7f1d1d; }
.srr-reject textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #fca5a5; border-radius: 10px; font-family: inherit; font-size: 13.5px; background: #fff; }
.srr-reject-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: #991b1b; }
.srr-escalated { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.srr-escalated > div { padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #fde68a; font-size: 13px; color: #111827; }
.srr-escalated span { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #92400e; }
@media (max-width: 900px) { .srr-body, .srr-escalated { grid-template-columns: minmax(0, 1fr); } }
.srr-btn[hidden] { display: none; }
/* Edit product — a variation's price + stock */
.variation-price-input { display: inline-flex; align-items: center; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff; }
.variation-price-input > span { padding: 0 8px; color: #6b7280; font-weight: 700; background: #f9fafb; align-self: stretch; display: flex; align-items: center; }
.variation-price-input input { width: 96px; border: none !important; outline: none; }

/* =====================================================
   COURIER — Delivery Queue (courier.blade.php, partials/courier-order-card)
===================================================== */
.cq-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cq-head h2 { margin: 0; font-size: 20px; font-weight: 800; color: #111827; }
.cq-head p { margin: 4px 0 0; font-size: 13px; color: #6b7280; }
.cq-summary { display: flex; gap: 12px; flex-wrap: wrap; }
.cq-summary-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid #eceef1; border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.cq-summary-item strong { display: block; font-size: 18px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.cq-summary-item span { font-size: 12px; color: #6b7280; }
.cq-summary-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; }
.cq-tone-red { background: #fff1f2; color: #d0001b; }
.cq-tone-green { background: #ecfdf3; color: #15803d; }

.cq-alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 13px; }
.cq-alert a { margin-left: auto; font-weight: 700; color: #b45309; text-decoration: none; white-space: nowrap; }

.cq-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cq-col { background: #fff; border: 1px solid #eceef1; border-radius: 16px; padding: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); border-top: 4px solid var(--cq-accent, #d0001b); min-width: 0; }
.cq-col-assigned { --cq-accent: #d0001b; --cq-soft: #fff1f2; }
.cq-col-pickup { --cq-accent: #f59e0b; --cq-soft: #fffbeb; }
.cq-col-picked { --cq-accent: #2563eb; --cq-soft: #eff6ff; }
.cq-col-out { --cq-accent: #16a34a; --cq-soft: #ecfdf3; }

.cq-col-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.cq-step { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--cq-accent); color: #fff; font-size: 12.5px; font-weight: 800; }
.cq-col-title { flex: 1; min-width: 0; }
.cq-col-title h3 { margin: 0; font-size: 14.5px; font-weight: 800; color: #111827; display: flex; align-items: center; gap: 7px; }
.cq-col-title h3 i { color: var(--cq-accent); font-size: 13px; }
.cq-col-title p { margin: 4px 0 0; font-size: 12px; color: #6b7280; line-height: 1.45; }
.cq-count { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: var(--cq-soft); color: var(--cq-accent); font-size: 12.5px; font-weight: 800; }

.cq-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 12px; border: 1px dashed #e5e7eb; border-radius: 12px; background: #fafafa; text-align: center; }
.cq-empty i { width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; background: var(--cq-soft); color: var(--cq-accent); font-size: 17px; }
.cq-empty strong { font-size: 13.5px; color: #374151; }
.cq-empty span { font-size: 12px; color: #9ca3af; }

.cq-list { display: grid; gap: 12px; }
.cq-card { border: 1px solid #eceef1; border-radius: 12px; padding: 12px; background: #fff; transition: box-shadow .15s, border-color .15s; }
.cq-card:hover { border-color: var(--cq-accent); box-shadow: 0 6px 16px rgba(16, 24, 40, .08); }
.cq-card-top { display: flex; align-items: center; gap: 8px; }
.cq-card-id { font-size: 13px; font-weight: 800; color: #111827; }
.cq-pay { padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; }
.cq-pay.is-cod { background: #fffbeb; color: #b45309; }
.cq-pay.is-paid { background: #ecfdf3; color: #15803d; }
.cq-fee { margin-left: auto; font-size: 12.5px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }

.cq-card-item { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.cq-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: #f3f4f6; color: #9ca3af; }
.cq-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cq-card-item strong { display: block; font-size: 13px; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-card-item span { font-size: 11.5px; color: #6b7280; }
.cq-card-item > div { min-width: 0; }

.cq-route { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; position: relative; }
.cq-route::before { content: ""; position: absolute; left: 11px; top: 22px; bottom: 22px; border-left: 2px dashed #e5e7eb; }
.cq-route li { position: relative; display: flex; gap: 10px; }
.cq-route li > i { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #f3f4f6; color: #4b5563; position: relative; z-index: 1; }
.cq-route li:last-child > i { background: var(--cq-soft); color: var(--cq-accent); }
.cq-route span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; }
.cq-route strong { display: block; font-size: 12.5px; color: #111827; overflow-wrap: anywhere; }
.cq-route strong a { color: #2563eb; text-decoration: none; font-weight: 600; }
.cq-route em { display: block; font-style: normal; font-size: 12px; color: #6b7280; line-height: 1.4; overflow-wrap: anywhere; }

.cq-tracking { margin-top: 10px; padding: 6px 10px; border-radius: 8px; background: #f9fafb; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; color: #374151; }
.cq-collect { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #f0fdf4; border: 1px solid #bbf7d0; font-size: 12px; color: #166534; }
.cq-collect strong { color: #14532d; }

.cq-btn { width: 100%; margin-top: 12px; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; border-radius: 10px; background: var(--cq-accent, #d0001b); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: filter .15s, transform .15s; }
.cq-btn:hover { filter: brightness(.95); transform: translateY(-1px); }
.cq-btn-green { background: #16a34a; }
.cq-deliver { margin-top: 10px; padding: 10px; border-radius: 10px; background: #f9fafb; }
.cq-blocked { display: flex; gap: 8px; margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 12px; line-height: 1.45; }

@media (max-width: 1280px) { .cq-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cq-board { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================
   SORTING CENTER — Dashboard (sorting-center.blade.php)
===================================================== */
.scd-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px 26px; margin-bottom: 22px; border-radius: 18px; color: #fff;
    background: radial-gradient(circle at 95% -20%, rgba(255, 255, 255, .14) 0, transparent 45%), linear-gradient(135deg, #111827 0%, #1f2937 55%, #7a0010 130%);
    box-shadow: 0 14px 30px rgba(17, 24, 39, .2); }
.scd-hero-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.scd-hero-icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, #b30019, #d0001b); box-shadow: 0 8px 18px rgba(208, 0, 27, .35); }
.scd-hero-code { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; }
.scd-hero h2 { margin: 6px 0 2px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.scd-hero p { margin: 0; font-size: 13px; opacity: .75; }
.scd-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.scd-hero-stats > div { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }
.scd-hero-stats > div.is-hot { background: rgba(208, 0, 27, .35); border-color: rgba(255, 120, 120, .4); }
.scd-hero-stats strong { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.scd-hero-stats span { font-size: 11.5px; opacity: .75; }

.scd-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.scd-section-title h3 { margin: 0; font-size: 16px; font-weight: 800; color: #111827; display: flex; align-items: center; gap: 8px; }
.scd-section-title h3 i { color: #d0001b; }
.scd-section-title span { font-size: 12.5px; color: #6b7280; }

.scd-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.scd-action { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #eceef1; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: transform .15s, box-shadow .15s, border-color .15s; min-width: 0; }
.scd-action:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(16, 24, 40, .08); border-color: var(--scd-c); }
.scd-action.has-work { border-left: 4px solid var(--scd-c); }
.scd-action-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 16px; background: var(--scd-soft); color: var(--scd-c); }
.scd-action-body { flex: 1; min-width: 0; }
.scd-action-body strong { display: block; font-size: 14px; color: #111827; }
.scd-action-body span { display: block; font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scd-action-count { min-width: 34px; height: 30px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center; font-size: 15px; font-weight: 800; background: #f3f4f6; color: #9ca3af; font-variant-numeric: tabular-nums; }
.scd-action.has-work .scd-action-count { background: var(--scd-c); color: #fff; }
.scd-action-go { color: #d1d5db; font-size: 12px; }
.scd-tone-red { --scd-c: #d0001b; --scd-soft: #fff1f2; }
.scd-tone-amber { --scd-c: #d97706; --scd-soft: #fffbeb; }
.scd-tone-blue { --scd-c: #2563eb; --scd-soft: #eff6ff; }
.scd-tone-violet { --scd-c: #7c3aed; --scd-soft: #f5f3ff; }
.scd-tone-teal { --scd-c: #0d9488; --scd-soft: #f0fdfa; }
.scd-tone-green { --scd-c: #16a34a; --scd-soft: #ecfdf3; }

.scd-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 22px; }
.scd-card { background: #fff; border: 1px solid #eceef1; border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); min-width: 0; }
.scd-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.scd-card-head-sub { margin-top: 18px; padding-top: 16px; border-top: 1px solid #f1f2f4; }
.scd-card-head h4 { margin: 0; font-size: 15px; font-weight: 800; color: #111827; }
.scd-card-head p { margin: 2px 0 0; font-size: 12.5px; color: #6b7280; }
.scd-link { font-size: 12.5px; font-weight: 700; color: #d0001b; text-decoration: none; white-space: nowrap; }
.scd-pipeline { display: grid; gap: 14px; }
.scd-pipe-top { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; color: #374151; }
.scd-pipe-top span { display: inline-flex; align-items: center; gap: 8px; }
.scd-pipe-top strong { color: #111827; font-variant-numeric: tabular-nums; }
.scd-bar { height: 8px; border-radius: 999px; background: #f3f4f6; overflow: hidden; }
.scd-bar span { display: block; height: 100%; border-radius: 999px; min-width: 2px; }
.scd-floor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.scd-floor > div { padding: 12px; border-radius: 12px; background: #f9fafb; }
.scd-floor span { display: block; font-size: 11.5px; color: #6b7280; }
.scd-floor strong { display: block; margin-top: 4px; font-size: 20px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.scd-riders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.scd-rider { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 12px; text-align: center; }
.scd-rider i { font-size: 15px; }
.scd-rider strong { font-size: 20px; font-weight: 800; color: #111827; }
.scd-rider span { font-size: 11.5px; color: #6b7280; }
.scd-rider-green { background: #ecfdf3; } .scd-rider-green i { color: #16a34a; }
.scd-rider-amber { background: #fffbeb; } .scd-rider-amber i { color: #d97706; }
.scd-rider-red { background: #fef2f2; } .scd-rider-red i { color: #dc2626; }
.scd-chart-card { border-radius: 16px; }

@media (max-width: 1200px) {
    .scd-hero, .scd-grid { grid-template-columns: minmax(0, 1fr); }
    .scd-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .scd-actions, .scd-hero-stats, .scd-floor { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   LOGISTICS OPERATIONS (Sorting Center): shared ops-* kit,
   Dispatch, Riders, Hub scanner, Shipments, Zones & Rates
========================================================= */
.scd-actions { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.ops-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ops-page-head h2 { margin: 0; font-size: 22px; font-weight: 800; color: #111827; letter-spacing: -.01em; }
.ops-page-head p { margin: 4px 0 0; max-width: 760px; font-size: 13.5px; line-height: 1.5; color: #6b7280; }
.ops-mini-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.ops-mini-stats > div { min-width: 104px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid #eceef1; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.ops-mini-stats > div.is-hot { border-color: #fecaca; background: #fff5f5; }
.ops-mini-stats strong { display: block; font-size: 20px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.ops-mini-stats > div.is-hot strong { color: #d0001b; }
.ops-mini-stats span { font-size: 11.5px; color: #6b7280; }

.ops-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: #6b7280; text-decoration: none; }
.ops-back:hover { color: #d0001b; }
.ops-link { color: #d0001b; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ops-link:hover { text-decoration: underline; }
.ops-link strong { color: inherit; }

.ops-panel { background: #fff; border: 1px solid #eceef1; border-radius: 16px; padding: 18px 20px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); min-width: 0; }
.ops-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.ops-panel-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: #111827; }
.ops-panel-head h3 > i { color: #d0001b; }
.ops-panel-head p { margin: 3px 0 0; font-size: 12.5px; color: #6b7280; line-height: 1.45; }
.ops-pill { min-width: 24px; height: 22px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; background: #f3f4f6; color: #374151; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ops-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ops-dot-amber { background: #f59e0b; } .ops-dot-blue { background: #2563eb; } .ops-dot-red { background: #dc2626; }

/* Buttons */
.ops-btn { height: 36px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #d0001b; border-radius: 10px; background: #d0001b; color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; transition: filter .15s, transform .15s, background .15s; }
.ops-btn:hover { filter: brightness(.94); transform: translateY(-1px); }
.ops-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ops-btn-dark { background: #111827; border-color: #111827; }
.ops-btn-green { background: #16a34a; border-color: #16a34a; }
.ops-btn-red { background: #dc2626; border-color: #dc2626; }
.ops-btn-ghost { background: #fff; color: #374151; border-color: #e5e7eb; }
.ops-btn-ghost:hover { border-color: #d0001b; color: #d0001b; filter: none; }
.ops-btn-sm { height: 30px; padding: 0 12px; font-size: 12px; background: #fff; color: #374151; border-color: #e5e7eb; }
.ops-btn-sm:hover { border-color: #d0001b; color: #d0001b; filter: none; }
.ops-clear { font-size: 12.5px; font-weight: 700; color: #6b7280; text-decoration: none; }
.ops-clear:hover { color: #d0001b; }

/* Tags & status */
.ops-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #f3f4f6; color: #4b5563; }
.ops-tag-green { background: #ecfdf3; color: #15803d; }
.ops-tag-amber { background: #fffbeb; color: #b45309; }
.ops-tag-red { background: #fef2f2; color: #b91c1c; }
.ops-tag-blue { background: #eff6ff; color: #1d4ed8; }
.ops-tag-gray { background: #f3f4f6; color: #4b5563; }
.ops-online { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #9ca3af; border: 2px solid #fff; }
.ops-online.is-on { background: #22c55e; }
.ops-avail { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #6b7280; }
.ops-avail::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.ops-avail.is-on { color: #15803d; }
.ops-avail.is-on::before { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }

/* Notes, flashes, empty states */
.ops-flash, .ops-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 16px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.ops-flash i, .ops-note i { margin-top: 2px; }
.ops-flash-ok { background: #ecfdf3; border: 1px solid #bbf7d0; color: #166534; }
.ops-flash-bad, .ops-note-red { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.ops-note-gray { background: #f9fafb; border: 1px solid #e5e7eb; color: #374151; }
.ops-empty { display: grid; justify-items: center; gap: 4px; padding: 28px 16px; text-align: center; border: 1px dashed #e5e7eb; border-radius: 12px; background: #fcfcfd; }
.ops-empty i { font-size: 22px; color: #d1d5db; margin-bottom: 4px; }
.ops-empty strong { font-size: 14px; color: #374151; }
.ops-empty span { font-size: 12.5px; color: #9ca3af; }

/* Toolbars, tabs, dates, search */
.ops-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ops-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ops-tab { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; color: #374151; font-size: 12.5px; font-weight: 700; text-decoration: none; transition: border-color .15s, background .15s; }
.ops-tab:hover { border-color: #d0001b; }
.ops-tab span { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: #f3f4f6; font-size: 11px; font-variant-numeric: tabular-nums; }
.ops-tab.active { background: #111827; border-color: #111827; color: #fff; }
.ops-tab.active span { background: rgba(255, 255, 255, .18); color: #fff; }
.ops-dates { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.ops-dates label { display: grid; gap: 3px; }
.ops-dates label span { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.ops-dates input { height: 36px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 10px; font-family: inherit; font-size: 13px; color: #111827; }
.ops-dates .ops-clear { align-self: center; }
.ops-chip { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 10px; border: 1px solid #e5e7eb; background: #fff; color: #374151; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.ops-chip.active, .ops-chip:hover { border-color: #d0001b; color: #d0001b; }
.ops-search { display: flex; align-items: center; gap: 8px; position: relative; margin-bottom: 16px; }
.ops-toolbar .ops-search { margin-bottom: 0; }
.ops-search > i { position: absolute; left: 13px; color: #9ca3af; font-size: 13px; pointer-events: none; }
.ops-search input { flex: 1; min-width: 220px; height: 40px; padding: 0 12px 0 36px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font-family: inherit; font-size: 13.5px; color: #111827; }
.ops-search input:focus, .ops-dates input:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.ops-search .ops-btn { height: 40px; }

/* Tables */
.ops-table-wrap { overflow-x: auto; border: 1px solid #f1f2f4; border-radius: 12px; }
.ops-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ops-table th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; background: #f9fafb; border-bottom: 1px solid #eceef1; white-space: nowrap; }
.ops-table td { padding: 12px 14px; border-bottom: 1px solid #f3f4f6; color: #374151; vertical-align: middle; }
.ops-table tr:last-child td { border-bottom: none; }
.ops-table tbody tr:hover { background: #fcfcfd; }
.ops-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ops-sub { display: block; margin-top: 2px; font-size: 11.5px; color: #9ca3af; }
.ops-pager { margin-top: 14px; }
.ops-person { display: flex; align-items: center; gap: 10px; }
.ops-person strong { display: block; color: #111827; }
.ops-person span { font-size: 12px; color: #6b7280; }

/* Dashboard: Operations counts */
.ops-card { background: #fff; border: 1px solid #eceef1; border-radius: 16px; padding: 18px 20px; margin-bottom: 22px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.ops-card-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ops-card-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: #111827; }
.ops-card-head h3 i { color: #d0001b; }
.ops-card-head p { margin: 3px 0 0; font-size: 12.5px; color: #6b7280; }
.ops-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ops-count { --c: #6b7280; --soft: #f3f4f6; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid #eceef1; background: #fff; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; min-width: 0; }
.ops-count:hover { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 10px 20px rgba(16, 24, 40, .07); }
.ops-count-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--soft); color: var(--c); font-size: 16px; }
.ops-count-body { flex: 1; min-width: 0; }
.ops-count-body strong { display: block; font-size: 24px; font-weight: 800; color: #111827; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ops-count-body span { display: block; font-size: 13px; font-weight: 700; color: #374151; }
.ops-count-body em { display: block; font-style: normal; font-size: 11.5px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-count-go { color: #d1d5db; font-size: 12px; }
.ops-count:hover .ops-count-go { color: var(--c); }
.ops-tone-amber { --c: #d97706; --soft: #fffbeb; }
.ops-tone-blue { --c: #2563eb; --soft: #eff6ff; }
.ops-tone-green { --c: #16a34a; --soft: #ecfdf3; }
.ops-tone-red { --c: #dc2626; --soft: #fef2f2; }

/* Dispatch */
.dsp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.dsp-main { min-width: 0; }
.dsp-zones { margin-bottom: 14px; }
.dsp-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; background: #f9fafb; border: 1px solid #f1f2f4; }
.dsp-check-all { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #374151; cursor: pointer; }
.dsp-bulk-count { font-size: 12.5px; color: #6b7280; margin-right: auto; }
.dsp-bulk select, .dsp-assign select, .hub-form select { height: 36px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font-family: inherit; font-size: 13px; color: #111827; max-width: 240px; }
.dsp-list { display: grid; gap: 10px; }
.dsp-job { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid #eceef1; border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.dsp-job:hover { border-color: #d1d5db; box-shadow: 0 4px 12px rgba(16, 24, 40, .05); }
.dsp-job.is-failed { border-left: 4px solid #dc2626; }
.dsp-pick { margin-top: 3px; width: 16px; height: 16px; accent-color: #d0001b; flex-shrink: 0; }
.dsp-job-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.dsp-job-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dsp-job-top strong { font-size: 14px; color: #111827; margin-right: 2px; }
.dsp-tracking { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: #6b7280; background: #f9fafb; padding: 2px 7px; border-radius: 6px; }
.dsp-job-item { font-size: 13px; color: #374151; }
.dsp-job-route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #6b7280; }
.dsp-job-route > i { color: #d1d5db; font-size: 10px; }
.dsp-job-route span i { color: #9ca3af; margin-right: 3px; }
.dsp-job-note { font-size: 12px; color: #b91c1c; }
.dsp-job-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dsp-assign { display: flex; align-items: center; gap: 6px; }
.dsp-attempts { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.dsp-attempts li { font-size: 12.5px; color: #374151; padding: 6px 10px; border-radius: 8px; background: #fef2f2; }
.dsp-attempts li span { font-weight: 800; color: #b91c1c; margin-right: 6px; }
.dsp-riders { position: sticky; top: 16px; }
.dsp-rider { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 0 -10px; border-radius: 10px; text-decoration: none; color: inherit; }
.dsp-rider:hover { background: #f9fafb; }
.dsp-avatar { position: relative; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #111827; color: #fff; font-size: 14px; font-weight: 800; }
.dsp-rider-body { flex: 1; min-width: 0; }
.dsp-rider-body strong { display: block; font-size: 13.5px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsp-jobs { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: #6b7280; }
.dsp-jobs i { width: 14px; height: 6px; border-radius: 3px; background: #e5e7eb; }
.dsp-jobs i.is-used { background: #d0001b; }
.dsp-jobs b { margin-left: 4px; color: #111827; }

/* Rider detail */
.rdr-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; margin-bottom: 18px; border-radius: 18px; background: linear-gradient(135deg, #111827, #1f2937); color: #fff; }
.rdr-avatar { position: relative; width: 60px; height: 60px; flex-shrink: 0; border-radius: 18px; display: grid; place-items: center; font-size: 24px; font-weight: 800; background: linear-gradient(135deg, #b30019, #d0001b); box-shadow: 0 8px 18px rgba(208, 0, 27, .35); }
.rdr-avatar .ops-online { border-color: #111827; width: 14px; height: 14px; }
.rdr-hero-body { flex: 1; min-width: 200px; }
.rdr-hero-body h2 { margin: 0; font-size: 22px; font-weight: 800; color: #fff; }
.rdr-hero-body p { margin: 3px 0 8px; font-size: 13px; opacity: .75; }
.rdr-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.rdr-hero .ops-avail { color: #d1d5db; }
.rdr-hero .ops-avail.is-on { color: #86efac; }
.rdr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rdr-stats > div { min-width: 100px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }
.rdr-stats strong { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rdr-stats small { font-size: 13px; opacity: .6; }
.rdr-stats span { font-size: 11.5px; opacity: .75; }
.rdr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.rdr-col { min-width: 0; }
.rdr-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rdr-reason { display: grid; gap: 8px; }
.rdr-reason + .rdr-reason { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f1f2f4; }
.rdr-reason label { font-size: 13px; font-weight: 700; color: #111827; }
.rdr-reason label span { font-weight: 500; color: #9ca3af; }
.rdr-reason textarea, .rdr-reason input[type="file"] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; font-family: inherit; font-size: 13px; resize: vertical; }
.rdr-reason textarea:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.rdr-reason .ops-btn { justify-self: start; }
.rdr-help { margin: 0; font-size: 12px; color: #6b7280; line-height: 1.45; }
.rdr-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.rdr-doc { display: grid; gap: 6px; text-decoration: none; color: #374151; font-size: 12.5px; font-weight: 700; }
.rdr-doc img, .rdr-doc-file { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid #eceef1; background: #f9fafb; }
.rdr-doc-file { display: grid; place-items: center; font-size: 28px; color: #d0001b; }
.rdr-doc:hover span { color: #d0001b; }
.rdr-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rdr-facts > div { padding: 10px 12px; border-radius: 10px; background: #f9fafb; }
.rdr-facts dt { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; }
.rdr-facts dd { margin: 3px 0 0; font-size: 13px; color: #111827; }
.rdr-job { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.rdr-job:last-child { border-bottom: none; }
.rdr-job strong { color: #111827; }
.rdr-job > span:nth-child(2) { color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdr-log { --c: #2563eb; --soft: #eff6ff; display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.rdr-log:last-child { border-bottom: none; }
.rdr-log-good { --c: #16a34a; --soft: #ecfdf3; }
.rdr-log-warn { --c: #d97706; --soft: #fffbeb; }
.rdr-log-bad { --c: #dc2626; --soft: #fef2f2; }
.rdr-log-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--soft); color: var(--c); font-size: 13px; }
.rdr-log > div { display: grid; gap: 2px; min-width: 0; }
.rdr-log strong { font-size: 13px; color: #111827; }
.rdr-log-reason { font-size: 12.5px; color: #374151; font-style: italic; }
.rdr-log-meta { font-size: 11.5px; color: #9ca3af; }

/* Hub scanner */
.hub-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.hub-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.hub-mode { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 2px solid #eceef1; text-decoration: none; color: #374151; transition: border-color .15s, background .15s; }
.hub-mode > i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #f3f4f6; font-size: 16px; }
.hub-mode strong { display: block; font-size: 14px; color: #111827; }
.hub-mode small { font-size: 12px; color: #6b7280; }
.hub-mode:hover { border-color: #fca5a5; }
.hub-mode.active { border-color: #d0001b; background: #fff5f5; }
.hub-mode.active > i { background: #d0001b; color: #fff; }
.hub-result { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 16px; border-radius: 12px; font-size: 13px; }
.hub-result > i { font-size: 20px; margin-top: 1px; }
.hub-result strong { display: block; font-size: 14px; }
.hub-result-ok { background: #ecfdf3; border: 1px solid #bbf7d0; color: #166534; }
.hub-result-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.hub-result-bad { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.hub-form { display: grid; gap: 8px; }
.hub-form label { font-size: 12px; font-weight: 800; color: #374151; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.hub-form select { max-width: none; height: 44px; }
.hub-input { position: relative; }
.hub-input i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #9ca3af; }
.hub-input input { width: 100%; box-sizing: border-box; height: 54px; padding: 0 14px 0 44px; border: 2px solid #e5e7eb; border-radius: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; letter-spacing: .04em; color: #111827; }
.hub-input input:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 4px rgba(208, 0, 27, .1); }
.hub-submit { height: 46px; font-size: 14px; margin-top: 6px; }
.hub-hint { margin: 2px 0 0; font-size: 12px; color: #6b7280; }
.hub-scan { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.hub-scan:last-child { border-bottom: none; }
.hub-scan-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; font-size: 13px; }
.hub-scan-icon.is-in { background: #eff6ff; color: #2563eb; }
.hub-scan-icon.is-out { background: #ecfdf3; color: #16a34a; }
.hub-scan > div { flex: 1; min-width: 0; display: grid; }
.hub-scan strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #111827; }
.hub-scan span { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-scan time { font-size: 12px; color: #9ca3af; font-variant-numeric: tabular-nums; }

/* Shipment detail */
.shp-hero { align-items: flex-start; }
.shp-hero .rdr-avatar { font-size: 22px; }
.shp-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 8px; }
.shp-facts > div { padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); }
.shp-facts dt { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .6; }
.shp-facts dd { margin: 2px 0 0; font-size: 13px; font-weight: 700; }
.shp-facts dd small { display: block; font-weight: 400; opacity: .7; font-size: 11.5px; }
/* Shipment detail — proof of delivery, items, action buttons */
.shp-pod-photo { position: relative; display: block; overflow: hidden; border: 1px solid #eceef1; border-radius: 12px; background: #f3f4f6; }
.shp-pod-photo img { display: block; width: 100%; max-height: 340px; object-fit: contain; background: #111827; }
.shp-pod-photo span { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(17, 24, 39, .8); color: #fff; font-size: 11.5px; font-weight: 700; }
.shp-pod-photo:hover span { background: #d0001b; }
.shp-pod-none { display: flex; align-items: center; gap: 8px; padding: 14px; border: 1px dashed #e5e7eb; border-radius: 12px; background: #f9fafb; color: #6b7280; font-size: 13px; }
.shp-pod-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 14px 0 0; }
.shp-pod-facts dt { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #9ca3af; }
.shp-pod-facts dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: #111827; }

.shp-items { margin: 0; padding: 0; list-style: none; }
.shp-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid #f1f2f4; font-size: 13px; }
.shp-items li:last-child { border-bottom: 0; padding-bottom: 0; }
.shp-item-name { min-width: 0; font-weight: 600; color: #111827; }
.shp-item-name small { display: block; font-weight: 400; color: #6b7280; font-size: 12px; }
.shp-item-qty { color: #6b7280; }
.shp-item-price { font-weight: 700; color: #111827; }

.shp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.shp-action { display: contents; }
.shp-action > summary { list-style: none; }
.shp-action > summary::-webkit-details-marker { display: none; }
.shp-action[open] > summary { box-shadow: 0 0 0 3px rgba(17, 24, 39, .12); }
.shp-action-danger { color: #dc2626 !important; }
.shp-action-danger:hover { border-color: #dc2626 !important; }
.shp-action-body { order: 99; flex-basis: 100%; margin-top: 6px; padding: 14px; border: 1px solid #eceef1; border-radius: 12px; background: #f9fafb; }
.shp-action-body > p { margin: 0 0 10px; font-size: 12.5px; color: #6b7280; }

.shp-timeline { margin: 0; padding: 0; list-style: none; }
.shp-timeline li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.shp-timeline li:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: #f1f2f4; }
.shp-dot { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #f3f4f6; color: #6b7280; font-size: 12px; }
.shp-timeline li:first-child .shp-dot { background: #d0001b; color: #fff; }
.shp-timeline li > div { display: grid; gap: 2px; min-width: 0; }
.shp-timeline strong { font-size: 13px; color: #111827; }
.shp-timeline span { font-size: 12.5px; color: #6b7280; }
.shp-timeline time { font-size: 11.5px; color: #9ca3af; }
.shp-change { font-size: 12px; font-weight: 700; color: #374151; }
.shp-photo img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid #eceef1; margin-top: 4px; }
.shp-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shp-kinds label { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.shp-kinds label:has(input:checked) { border-color: #dc2626; background: #fef2f2; color: #b91c1c; }
.shp-kinds input { accent-color: #dc2626; }

/* Zones & rates */
.zn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 18px; }
.zn-grid .ops-panel { margin-bottom: 0; }
.zn-new { border-style: dashed; background: #fcfcfd; }
.zn-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 10px; }
.zn-form label { display: grid; gap: 4px; }
.zn-form label > span:first-child { font-size: 11px; font-weight: 800; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.zn-form-new { grid-template-columns: 1fr 1fr; }
.zn-form-new .zn-wide { grid-column: 1 / -1; }
.zn-form-new .ops-btn { grid-column: 1 / -1; justify-self: start; }
.zn-form input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 10px; font-family: inherit; font-size: 13.5px; color: #111827; }
.zn-form input:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.zn-money { position: relative; display: block; }
.zn-money b { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #9ca3af; }
.zn-money input { padding-left: 24px; font-variant-numeric: tabular-nums; }
.zn-example { margin: 10px 0 0; font-size: 12px; color: #9ca3af; }

@media (max-width: 1100px) {
    .dsp-layout, .rdr-grid, .hub-layout { grid-template-columns: minmax(0, 1fr); }
    .dsp-riders { position: static; }
    .ops-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .ops-counts, .rdr-stats, .rdr-docs, .rdr-facts, .shp-facts, .zn-form, .zn-form-new { grid-template-columns: minmax(0, 1fr); }
    .dsp-job { flex-wrap: wrap; }
    .dsp-job-actions { width: 100%; justify-content: flex-start; }
    .hub-modes { grid-template-columns: minmax(0, 1fr); }
}

/* Courier: online toggle, failed delivery, delivery code, returns */
.cq-online { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; background: #fff; border: 1px solid #eceef1; border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.cq-online-dot { width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; flex-shrink: 0; }
.cq-online.is-on { border-color: #bbf7d0; background: #f0fdf4; }
.cq-online.is-on .cq-online-dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
.cq-online strong { display: block; font-size: 14px; font-weight: 800; color: #111827; }
.cq-online span { font-size: 12px; color: #6b7280; }
.cq-online button { margin-left: 4px; height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid #111827; background: #111827; color: #fff; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.cq-online.is-on button { background: #fff; color: #374151; border-color: #e5e7eb; }
.cq-online button:disabled { opacity: .45; cursor: not-allowed; }
.cq-alert-red { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.cq-otp input { letter-spacing: .4em; font-size: 18px; font-weight: 800; text-align: center; }
.cq-otp small { display: block; margin-top: 4px; font-size: 11.5px; color: #6b7280; }
.cq-fail { margin-top: 8px; border-top: 1px dashed #eceef1; padding-top: 8px; }
.cq-fail summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: #b91c1c; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.cq-fail summary::-webkit-details-marker { display: none; }
.cq-fail form { display: grid; gap: 6px; margin-top: 8px; }
.cq-fail label { font-size: 12px; font-weight: 700; color: #374151; }
.cq-fail textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 9px; font-family: inherit; font-size: 13px; resize: vertical; }
.cq-fail small { font-size: 11.5px; color: #6b7280; }
.cq-btn-ghost-red { background: #fff; color: #b91c1c; border: 1px solid #fecaca; margin-top: 4px; }
.cq-returns { margin-top: 18px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #fde68a; }
.cq-returns .cq-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cq-pay.is-rts { background: #fef2f2; color: #b91c1c; }

/* Seller: Pickup Info (who collects a packed parcel, and when) */
.soc-pickup { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: #fffbeb; border: 1px dashed #fcd34d; font-size: 12px; color: #92400e; }
.soc-pickup.is-booked { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.soc-pickup i { margin-top: 2px; }
.soc-pickup span { display: grid; gap: 1px; }
.soc-pickup strong { font-size: 12.5px; }
.soc-btn-pickup { gap: 6px; flex: 1; background: #111827; color: #fff; border: 1px solid #111827; }
.soc-btn-pickup:hover { background: #1f2937; }
.pkup-modal { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 32px); overflow-y: auto; width: min(480px, calc(100vw - 32px)); padding: 0; border: none; border-radius: 18px; box-shadow: 0 24px 60px rgba(16, 24, 40, .25); }
.pkup-modal::backdrop { background: rgba(17, 24, 39, .45); }
.pkup-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #f1f2f4; }
.pkup-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: #fff1f2; color: #d0001b; font-size: 17px; }
.pkup-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: #111827; }
.pkup-head p { margin: 2px 0 0; font-size: 12.5px; color: #6b7280; }
.pkup-close { margin-left: auto; width: 34px; height: 34px; border: none; border-radius: 10px; background: #f3f4f6; color: #6b7280; cursor: pointer; }
.pkup-close:hover { background: #fee2e2; color: #d0001b; }
.pkup-error { margin: 14px 20px 0; padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 13px; }
.pkup-body { display: grid; gap: 8px; padding: 16px 20px; }
.pkup-label { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 800; color: #111827; }
.pkup-label > span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #d0001b; color: #fff; font-size: 11px; }
.pkup-label em { font-style: normal; font-weight: 500; color: #9ca3af; }
.pkup-body select, .pkup-body input[type="date"], .pkup-body input[type="text"] { width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font-family: inherit; font-size: 13.5px; color: #111827; }
.pkup-body select:focus, .pkup-body input:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.pkup-body small, .pkup-empty { font-size: 12px; color: #6b7280; margin: 0; }
.pkup-windows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pkup-window { position: relative; cursor: pointer; }
.pkup-window input { position: absolute; opacity: 0; }
.pkup-window span { display: grid; gap: 2px; padding: 10px; border: 1.5px solid #e5e7eb; border-radius: 12px; font-size: 11.5px; color: #6b7280; text-align: center; transition: border-color .15s, background .15s; }
.pkup-window strong { font-size: 13px; color: #111827; }
.pkup-window input:checked + span { border-color: #d0001b; background: #fff5f5; }
.pkup-window input:focus-visible + span { box-shadow: 0 0 0 3px rgba(208, 0, 27, .15); }
.pkup-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid #f1f2f4; background: #fcfcfd; border-radius: 0 0 18px 18px; }
.pkup-foot .soc-btn { flex: 0 0 auto; width: auto; min-width: 110px; gap: 7px; height: 40px; }
@media (max-width: 480px) { .pkup-windows { grid-template-columns: minmax(0, 1fr); } }

/* Logistics: COD Reconciliation */
.ops-btn-xs { height: 28px; padding: 0 10px; font-size: 11.5px; }
.cod-exports { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cod-exports > span { font-size: 12px; color: #6b7280; }
.cod-export-group { display: inline-flex; align-items: center; gap: 4px; padding: 3px 3px 3px 10px; border: 1px solid #eceef1; border-radius: 10px; background: #f9fafb; }
.cod-export-group b { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #374151; margin-right: 4px; }
.cod-list { display: grid; gap: 10px; }
.cod-rider { border: 1px solid #eceef1; border-radius: 14px; background: #fff; overflow: hidden; }
.cod-rider.cod-short { border-color: #fecaca; box-shadow: inset 4px 0 0 #dc2626; }
.cod-rider summary { display: grid; grid-template-columns: auto minmax(140px, 1.4fr) repeat(3, minmax(90px, 1fr)) auto auto; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
.cod-rider summary::-webkit-details-marker { display: none; }
.cod-name strong { display: block; font-size: 14px; color: #111827; }
.cod-name small, .cod-figure small { display: block; font-size: 11.5px; color: #9ca3af; }
.cod-figure b { font-size: 15px; color: #111827; font-variant-numeric: tabular-nums; }
.cod-short .cod-diff b { color: #dc2626; }
.cod-short .cod-diff { padding: 4px 10px; margin: -4px -10px; border-radius: 10px; background: #fef2f2; }
.cod-caret { color: #9ca3af; transition: transform .15s; }
.cod-rider[open] .cod-caret { transform: rotate(180deg); }
.cod-body { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 4px 16px 16px; border-top: 1px solid #f3f4f6; }
.cod-body h4 { margin: 12px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; }
.cod-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #f1f2f4; font-size: 13px; }
.cod-line > span:first-child { flex: 1; min-width: 0; color: #111827; font-weight: 700; }
.cod-line small { display: block; font-weight: 400; font-size: 11.5px; color: #9ca3af; }
.cod-line b { min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.cod-none { font-size: 12.5px; color: #9ca3af; margin: 6px 0; }
.cod-total { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: #111827; color: #d1d5db; font-size: 12.5px; }
.cod-total span:first-child { margin-right: auto; color: #fff; font-weight: 700; }
.cod-total b { color: #fff; margin-left: 4px; font-variant-numeric: tabular-nums; }
.cod-total .is-short b { color: #fca5a5; }
@media (max-width: 900px) {
    .cod-rider summary { grid-template-columns: auto minmax(0, 1fr) auto; }
    .cod-figure { grid-column: span 1; }
    .cod-body { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   COURIER CENTER (cx-*): dashboard, pickups, COD, earnings, history
========================================================= */
.cx-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px 26px; margin-bottom: 20px; border-radius: 18px; color: #fff; background: radial-gradient(circle at 85% 15%, rgba(208, 0, 27, .35), transparent 45%), linear-gradient(135deg, #111827, #1f2937); box-shadow: 0 12px 28px rgba(17, 24, 39, .18); }
.cx-hero-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cx-hero-icon { width: 58px; height: 58px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(135deg, #b30019, #d0001b); box-shadow: 0 8px 18px rgba(208, 0, 27, .35); }
.cx-hero-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.cx-hero h2 { margin: 6px 0 4px; font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.cx-hero p { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: .85; }
.cx-dot { width: 9px; height: 9px; border-radius: 50%; background: #9ca3af; flex-shrink: 0; }
.cx-dot.is-on { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); }
.cx-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cx-hero-stats > div { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }
.cx-hero-stats strong { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cx-hero-stats span { font-size: 11.5px; opacity: .75; }

.cx-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cx-section-title h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: #111827; }
.cx-section-title h3 i { color: #d0001b; }
.cx-section-title span { font-size: 12.5px; color: #6b7280; }

.cx-tone-red { --cx-c: #d0001b; --cx-soft: #fff1f2; }
.cx-tone-amber { --cx-c: #d97706; --cx-soft: #fffbeb; }
.cx-tone-blue { --cx-c: #2563eb; --cx-soft: #eff6ff; }
.cx-tone-violet { --cx-c: #7c3aed; --cx-soft: #f5f3ff; }
.cx-tone-green { --cx-c: #16a34a; --cx-soft: #ecfdf3; }
.cx-todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin-bottom: 20px; }
.cx-todo-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #eceef1; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: transform .15s, box-shadow .15s, border-color .15s; min-width: 0; }
.cx-todo-item:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(16, 24, 40, .08); border-color: var(--cx-c); }
.cx-todo-item.has-work { border-left: 4px solid var(--cx-c); }
.cx-todo-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 15px; background: var(--cx-soft); color: var(--cx-c); }
.cx-todo-body { flex: 1; min-width: 0; }
.cx-todo-body strong { display: block; font-size: 13.5px; color: #111827; white-space: nowrap; }
.cx-todo-body span { display: block; font-size: 11.5px; line-height: 1.35; color: #6b7280; }
.cx-todo-count { min-width: 30px; height: 28px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: #f3f4f6; color: #9ca3af; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-todo-item.has-work .cx-todo-count { background: var(--cx-c); color: #fff; }

.cx-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cx-panel { background: #fff; border: 1px solid #eceef1; border-radius: 16px; padding: 18px 20px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); min-width: 0; }
.cx-grid > .cx-panel { margin-bottom: 0; }
.cx-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cx-panel-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: #111827; }
.cx-panel-head p { margin: 3px 0 0; font-size: 12.5px; color: #6b7280; }
.cx-link { font-size: 12.5px; font-weight: 700; color: #d0001b; text-decoration: none; white-space: nowrap; }
.cx-link:hover { text-decoration: underline; }
.cx-more { display: block; margin-top: 10px; text-align: center; font-size: 12.5px; font-weight: 700; color: #d0001b; text-decoration: none; }
.cx-assign-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cx-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.cx-kpis > div { padding: 12px; border-radius: 12px; background: #f9fafb; }
.cx-kpis > div.is-warn { background: #fffbeb; }
.cx-kpis span { display: block; font-size: 11.5px; color: #6b7280; }
.cx-kpis strong { display: block; margin-top: 4px; font-size: 18px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.cx-kpis > div.is-warn strong { color: #b45309; }
.cx-subhead { margin: 16px 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #9ca3af; }
.cx-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.cx-row:last-child { border-bottom: none; }
.cx-row-icon { --cx-c: #16a34a; --cx-soft: #ecfdf3; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; font-size: 13px; background: var(--cx-soft); color: var(--cx-c); }
.cx-row-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cx-row-body strong { font-size: 13.5px; color: #111827; }
.cx-row-body strong em { font-style: normal; font-weight: 500; color: #6b7280; }
.cx-row-body small { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-row-body small.cx-short { color: #b91c1c; font-weight: 700; white-space: normal; }
.cx-row > b { font-size: 13.5px; color: #15803d; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-none { font-size: 12.5px; color: #9ca3af; margin: 8px 0 0; }
.cx-empty { display: grid; justify-items: center; gap: 4px; padding: 32px 16px; text-align: center; border: 1px dashed #e5e7eb; border-radius: 12px; background: #fcfcfd; }
.cx-empty i { font-size: 24px; color: #d1d5db; margin-bottom: 4px; }
.cx-empty strong { font-size: 14px; color: #374151; }
.cx-empty span { font-size: 12.5px; color: #9ca3af; }
.cx-empty-sm { padding: 20px 14px; }

.cx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cx-head h2 { margin: 0; font-size: 22px; font-weight: 800; color: #111827; letter-spacing: -.01em; }
.cx-head p { margin: 4px 0 0; max-width: 680px; font-size: 13.5px; line-height: 1.5; color: #6b7280; }
.cx-head-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.cx-head-stats > div { min-width: 92px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid #eceef1; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.cx-head-stats strong { display: block; font-size: 20px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.cx-head-stats span { font-size: 11.5px; color: #6b7280; }

.cx-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #f3f4f6; color: #4b5563; }
.cx-pill-amber { background: #fffbeb; color: #b45309; }
.cx-pill-blue { background: #eff6ff; color: #1d4ed8; }
.cx-pill-green { background: #ecfdf3; color: #15803d; }
.cx-pill-red { background: #fef2f2; color: #b91c1c; }

.cx-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cx-job { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #eceef1; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: box-shadow .15s, border-color .15s; }
.cx-job:hover { border-color: #d1d5db; box-shadow: 0 8px 18px rgba(16, 24, 40, .07); }
.cx-job[data-job-status="rider_assigned"] { border-top: 3px solid #f59e0b; }
.cx-job[data-job-status="accepted"] { border-top: 3px solid #2563eb; }
.cx-job-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cx-job-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 700; color: #111827; }
.cx-job-code i { color: #9ca3af; margin-right: 4px; }
.cx-job-when { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #ecfdf3; color: #166534; font-size: 12.5px; font-weight: 700; }
.cx-job-route { margin: 0; }
.cx-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-chips span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; background: #f9fafb; border: 1px solid #f1f2f4; font-size: 11.5px; color: #4b5563; }
.cx-job-note { padding: 8px 10px; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: 12.5px; }
.cx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cx-steps span { position: relative; padding-top: 10px; font-size: 11px; font-weight: 700; color: #9ca3af; text-align: center; }
.cx-steps span::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 999px; background: #e5e7eb; }
.cx-steps span.is-done { color: #15803d; }
.cx-steps span.is-done::before { background: #22c55e; }
.cx-job form .cq-btn { margin-top: 2px; }

.cx-table-wrap { overflow-x: auto; border: 1px solid #f1f2f4; border-radius: 12px; }
.cx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cx-table th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; background: #f9fafb; border-bottom: 1px solid #eceef1; white-space: nowrap; }
.cx-table td { padding: 12px 14px; border-bottom: 1px solid #f3f4f6; color: #374151; vertical-align: middle; }
.cx-table tr:last-child td { border-bottom: none; }
.cx-table tbody tr:hover { background: #fcfcfd; }
.cx-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cx-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: #111827; }
.cx-muted { color: #6b7280; white-space: nowrap; }
.cx-search { position: relative; margin-bottom: 12px; }
.cx-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 13px; }
.cx-search input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px 0 36px; border: 1px solid #e5e7eb; border-radius: 10px; font-family: inherit; font-size: 13.5px; }
.cx-search input:focus, .cx-field input:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }

.cx-money { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; margin-bottom: 18px; }
.cx-money-main { padding: 22px; border-radius: 16px; color: #fff; display: grid; gap: 4px; align-content: start; }
.cx-money-main.is-due { background: linear-gradient(135deg, #b30019, #d0001b); box-shadow: 0 12px 24px rgba(208, 0, 27, .25); }
.cx-money-main.is-clear { background: linear-gradient(135deg, #111827, #1f2937); }
.cx-money-main > span { font-size: 12.5px; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .05em; }
.cx-money-main strong { font-size: 34px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cx-money-main small { font-size: 12.5px; opacity: .9; }
.cx-money-bar { height: 6px; margin-top: 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.cx-money-bar span { display: block; height: 100%; border-radius: 999px; background: #fff; }
.cx-money-main small.cx-money-limit { font-size: 11.5px; opacity: .75; }
.cx-money-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cx-money-side-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-money-side > div { padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #eceef1; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); display: grid; align-content: center; gap: 4px; }
.cx-money-side span { font-size: 12px; color: #6b7280; }
.cx-money-side strong { font-size: 20px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }

.cx-form { display: grid; gap: 14px; }
.cx-field { display: grid; gap: 6px; }
.cx-field > span { font-size: 12px; font-weight: 800; color: #374151; text-transform: uppercase; letter-spacing: .04em; }
.cx-field > span em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: #9ca3af; }
.cx-field small { font-size: 12px; color: #6b7280; }
.cx-field input[type="text"] { height: 42px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; font-family: inherit; font-size: 13.5px; }
.cx-money-input { position: relative; display: block; }
.cx-money-input b { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #9ca3af; }
.cx-money-input input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px 0 32px; border: 1px solid #e5e7eb; border-radius: 12px; font-family: inherit; font-size: 20px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.cx-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cx-choice label { position: relative; cursor: pointer; }
.cx-choice input { position: absolute; opacity: 0; }
.cx-choice span { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 13px; font-weight: 700; color: #374151; transition: border-color .15s, background .15s; }
.cx-choice input:checked + span { border-color: #d0001b; background: #fff5f5; color: #d0001b; }
.cx-upload { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed #d1d5db; border-radius: 12px; background: #fcfcfd; cursor: pointer; transition: border-color .15s, background .15s; }
.cx-upload:hover { border-color: #d0001b; background: #fff5f5; }
.cx-upload > i { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #fff1f2; color: #d0001b; font-size: 16px; }
.cx-upload span { display: grid; font-size: 12px; color: #6b7280; }
.cx-upload strong { font-size: 13.5px; color: #111827; }
.cx-upload input { display: none; }

.cx-day { margin-bottom: 8px; }
.cx-day-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; margin-top: 8px; border-radius: 10px; background: #f9fafb; font-size: 12.5px; color: #6b7280; }
.cx-day-head strong { color: #111827; font-size: 13px; }
.cx-day-head b { color: #15803d; }
.cx-day .cx-row { padding-left: 4px; padding-right: 4px; }

@media (max-width: 1100px) {
    .cx-hero, .cx-grid, .cx-money { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .cx-hero-stats, .cx-money-side, .cx-money-side-4, .cx-kpis { grid-template-columns: minmax(0, 1fr); }
    .cx-jobs { grid-template-columns: minmax(0, 1fr); }
}
/* Dashboard to-do tiles: icon + count on top, label below — fits five across */
.cx-todo-item { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon count" "body body"; align-items: center; gap: 12px 10px; padding: 14px; }
.cx-todo-icon { grid-area: icon; }
.cx-todo-count { grid-area: count; justify-self: end; }
.cx-todo-body { grid-area: body; }
.cx-todo-body strong { white-space: normal; }

/* =========================================================
   ADMIN polish: dashboard hero/tiles, user table actions
========================================================= */
.adm-hero { margin-bottom: 20px; }
.adm-actions { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.scd-tone-teal { --scd-c: #0d9488; --scd-soft: #f0fdfa; }

.adm-person { display: flex; align-items: center; gap: 10px; }
.adm-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: #6b7280; }
.adm-avatar-buyer { background: #2563eb; }
.adm-avatar-seller { background: #d97706; }
.adm-avatar-courier { background: #16a34a; }
.adm-avatar-sorting_center, .adm-avatar-sorting_center_branch { background: #7c3aed; }
.adm-avatar-admin { background: #111827; }
.adm-role { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #f3f4f6; color: #4b5563; }
.adm-role-buyer { background: #eff6ff; color: #1d4ed8; }
.adm-role-seller { background: #fffbeb; color: #b45309; }
.adm-role-courier { background: #ecfdf3; color: #15803d; }
.adm-role-sorting_center, .adm-role-sorting_center_branch { background: #f5f3ff; color: #6d28d9; }

.adm-actions-cell { display: flex; align-items: center; gap: 6px; }
.adm-actions-cell .btn-sm { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.adm-menu { position: relative; }
.adm-menu > summary { list-style: none; cursor: pointer; }
.adm-menu > summary::-webkit-details-marker { display: none; }
.adm-menu > summary i { font-size: 10px; transition: transform .15s; }
.adm-menu[open] > summary { border-color: #d0001b; color: #d0001b; }
.adm-menu[open] > summary i { transform: rotate(180deg); }
.adm-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 250px; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid #eceef1; box-shadow: 0 16px 36px rgba(16, 24, 40, .16); display: grid; gap: 2px; }
.adm-menu-panel form { margin: 0; }
.adm-menu-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: none; border-radius: 8px; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: #374151; text-align: left; cursor: pointer; }
.adm-menu-item i { width: 16px; text-align: center; color: #9ca3af; }
.adm-menu-item:hover { background: #f9fafb; }
.adm-menu-item.is-danger { color: #b91c1c; }
.adm-menu-item.is-danger i { color: #dc2626; }
.adm-menu-item.is-danger:hover { background: #fef2f2; }
.adm-menu-item.is-good { color: #15803d; }
.adm-menu-item.is-good i { color: #16a34a; }
.adm-menu-item.is-good:hover { background: #ecfdf3; }
.adm-menu-sep { height: 1px; margin: 4px 6px; background: #f1f2f4; }
.adm-menu-suspend { display: grid; gap: 6px; padding: 8px 10px 10px; border-radius: 8px; background: #fffbeb; }
.adm-menu-label { font-size: 12.5px; font-weight: 700; color: #92400e; display: flex; align-items: center; gap: 8px; }
.adm-menu-suspend > div { display: flex; gap: 6px; }
.adm-menu-suspend input { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid #fde68a; border-radius: 7px; font-family: inherit; font-size: 12.5px; background: #fff; }
.adm-menu-suspend small { font-size: 11px; color: #92400e; opacity: .8; }

/* Tables: dates and short values don't wrap mid-value */
.admin-table td { vertical-align: middle; }
.admin-table .cell-date, .admin-table td.nowrap { white-space: nowrap; }
.admin-table .cell-sub.nowrap { white-space: nowrap; }
/* Admin "Needs your attention" tiles: icon + count on top, label below */
.adm-actions { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.adm-actions .scd-action { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon count" "body body"; gap: 12px 10px; }
.adm-actions .scd-action-icon { grid-area: icon; }
.adm-actions .scd-action-count { grid-area: count; justify-self: end; }
.adm-actions .scd-action-body { grid-area: body; }
.adm-actions .scd-action-body span { white-space: normal; }
#logsTable th, #logsTable td { padding-left: 12px; padding-right: 12px; }
/* The Manage menu must not be clipped by the table's scroll box. */
.admin-table-wrap:has(#usersTable) { overflow: visible; }
.ops-note-amber { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; align-items: center; }
.ops-note form { margin-left: auto; }
.pk-offer { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 5px 10px; border-radius: 8px; background: #eff6ff; color: #1d4ed8; font-size: 12px; }
.pk-offer.is-bad { background: #fef2f2; color: #b91c1c; }

/* =========================================================
   COURIER: job offers, pickup scan, attempts, vehicle, pay
========================================================= */
.cx-offers { margin-bottom: 20px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #fff7ed, #fff); border: 1.5px solid #fdba74; box-shadow: 0 10px 24px rgba(234, 88, 12, .12); }
.cx-offers-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cx-offers-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: #111827; }
.cx-offers-head p { margin: 2px 0 0; font-size: 12.5px; color: #9a3412; }
.cx-offers-pulse { width: 12px; height: 12px; border-radius: 50%; background: #f97316; box-shadow: 0 0 0 0 rgba(249, 115, 22, .6); animation: cxPulse 1.4s infinite; flex-shrink: 0; }
@keyframes cxPulse { 70% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); } 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } }
.cx-offer-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.cx-offer { position: relative; display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid #fed7aa; overflow: hidden; }
.cx-offer.is-expired { opacity: .55; }
.cx-offer-bar { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #ffedd5; }
.cx-offer-bar span { display: block; height: 100%; background: #f97316; transition: width 1s linear; }
.cx-offer header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.cx-offer-clock { font-size: 12.5px; color: #9a3412; font-variant-numeric: tabular-nums; }
.cx-offer-clock b { font-size: 15px; }
.cx-offer .cq-route { margin: 0; }
.cx-offer-money { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cx-offer-money > div { padding: 8px 10px; border-radius: 10px; background: #f9fafb; }
.cx-offer-money span { display: block; font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.cx-offer-money strong { font-size: 16px; color: #111827; font-variant-numeric: tabular-nums; }
.cx-offer-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.cx-offer-actions form { margin: 0; }
.cx-offer-actions .cq-btn, .cx-offer-actions .cx-btn-ghost { width: 100%; margin-top: 0; height: 40px; }
.cx-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #374151; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cx-btn-ghost:hover { border-color: #d0001b; color: #d0001b; }
.cq-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.cx-scan { display: grid; gap: 6px; }
.cx-scan label { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #374151; }
.cx-scan-row { display: flex; gap: 6px; }
.cx-scan-input { position: relative; flex: 1; }
.cx-scan-input i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.cx-scan-input input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px 0 32px; border: 1px solid #e5e7eb; border-radius: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.cx-scan-input input:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.cx-scan .cq-btn { margin-top: 2px; }

.cq-attempt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 12px; font-weight: 700; }
.cq-attempt span { font-weight: 500; color: #7f1d1d; }
.cq-collect.is-paid { background: #f0fdf4; color: #166534; }
.cq-otp-locked { display: block; margin-top: 4px; color: #b91c1c !important; font-weight: 700; }
.cq-fail select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 9px; font-family: inherit; font-size: 13px; background: #fff; }

.cx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.cx-facts > div { padding: 10px 12px; border-radius: 10px; background: #f9fafb; }
.cx-facts > div.is-bad { background: #fef2f2; }
.cx-facts span { display: block; font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; }
.cx-facts strong { display: block; margin-top: 3px; font-size: 13.5px; color: #111827; }
.cx-facts > div.is-bad strong { color: #b91c1c; }
.cx-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.cx-doc { display: grid; gap: 6px; text-decoration: none; color: #374151; font-size: 12.5px; font-weight: 700; }
.cx-doc img, .cx-doc-file { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid #eceef1; background: #f9fafb; }
.cx-doc-file { display: grid; place-items: center; font-size: 26px; color: #d0001b; }
.cx-doc.is-missing { color: #9ca3af; }
.cx-doc.is-missing .cx-doc-file { color: #d1d5db; border-style: dashed; }
a.cx-doc:hover span { color: #d0001b; }
.cx-edit { border-top: 1px solid #f1f2f4; padding-top: 12px; }
.cx-edit > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #d0001b; }
.cx-edit > summary::-webkit-details-marker { display: none; }
.cx-edit[open] > summary { margin-bottom: 12px; }
.cx-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cx-field select, .cx-field input[type="date"], .cx-field input[type="file"] { width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font-family: inherit; font-size: 13px; }
.cx-field input[type="file"] { padding: 9px 10px; }
.cx-hint { display: block; font-size: 12px; color: #6b7280; }

.cx-rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.cx-rates > div { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #eceef1; }
.cx-rates i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff1f2; color: #d0001b; }
.cx-rates span { flex: 1; font-size: 13px; color: #374151; font-weight: 600; }
.cx-rates strong { font-size: 15px; color: #111827; }
.cx-filter { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cx-filter label { display: grid; gap: 3px; }
.cx-filter label span { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.cx-filter input { height: 38px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 10px; font-family: inherit; font-size: 13px; }
.cx-filter .cq-btn { width: auto; margin: 0; padding: 0 18px; }
.cx-filter .cx-link { align-self: center; }
.cx-table tfoot td { padding: 12px 14px; background: #f9fafb; border-top: 1px solid #eceef1; }
.cx-row-icon.cx-tone-blue, .cx-row-icon.cx-tone-red, .cx-row-icon.cx-tone-amber, .cx-row-icon.cx-tone-green { background: var(--cx-soft); color: var(--cx-c); }
@media (max-width: 640px) {
    .cx-facts, .cx-docs, .cx-form-grid, .cx-rates { grid-template-columns: minmax(0, 1fr); }
}
.cx-doc img, .cx-doc-file { aspect-ratio: auto; height: 120px; }

/* =========================================================
   SELLER: Store Settings
========================================================= */
.ss-preview { margin-bottom: 18px; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #eceef1; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.ss-banner { height: 130px; background: linear-gradient(135deg, #111827, #b30019) center / cover no-repeat; }
.ss-preview-body { display: flex; align-items: flex-end; gap: 14px; padding: 0 20px 16px; margin-top: -34px; }
.ss-logo { width: 76px; height: 76px; flex-shrink: 0; border-radius: 18px; border: 4px solid #fff; background: #fff1f2; color: #d0001b; display: grid; place-items: center; font-size: 28px; overflow: hidden; box-shadow: 0 6px 16px rgba(16, 24, 40, .12); }
.ss-logo img { width: 100%; height: 100%; object-fit: cover; }
.ss-preview-body h3 { margin: 0; font-size: 18px; font-weight: 800; color: #111827; }
.ss-preview-body p { margin: 2px 0 0; font-size: 12.5px; color: #6b7280; max-width: 640px; white-space: pre-line; }
.ss-view { margin-left: auto; white-space: nowrap; }
.ss-error { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 13px; }
.ss-form { display: grid; gap: 16px; }
.ss-card { padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid #eceef1; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.ss-card-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.ss-card-head > span { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #d0001b; color: #fff; font-size: 12px; font-weight: 800; }
.ss-card-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: #111827; }
.ss-card-head p { margin: 2px 0 0; font-size: 12.5px; color: #6b7280; }
.ss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ss-wide { grid-column: 1 / -1; }
.ss-field { display: grid; gap: 6px; position: relative; }
.ss-field > span { font-size: 12px; font-weight: 800; color: #374151; text-transform: uppercase; letter-spacing: .04em; }
.ss-field > span em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: #9ca3af; margin-left: 4px; }
.ss-field input, .ss-field textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid #e5e7eb; border-radius: 10px; font-family: inherit; font-size: 13.5px; color: #111827; resize: vertical; }
.ss-field input:focus, .ss-field textarea:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.ss-field.has-error input, .ss-field.has-error textarea { border-color: #dc2626; background: #fffafa; }
.ss-count { justify-self: end; font-size: 11.5px; color: #9ca3af; }
.ss-field-error { font-size: 12px; color: #b91c1c; font-weight: 600; }
.ss-card .psgc-address { margin-bottom: 4px; }
.ss-upload { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 14px; border: 1.5px dashed #d1d5db; border-radius: 12px; background: #fcfcfd; cursor: pointer; }
.ss-upload:hover { border-color: #d0001b; background: #fff5f5; }
.ss-upload.has-error { border-color: #dc2626; }
.ss-upload > i { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #fff1f2; color: #d0001b; font-size: 16px; }
.ss-upload > span { display: grid; font-size: 12px; color: #6b7280; }
.ss-upload > span strong { font-size: 13.5px; color: #111827; }
.ss-upload input { grid-column: 1 / -1; font-size: 12.5px; }
.ss-upload .ss-field-error { grid-column: 1 / -1; }
.ss-actions { display: flex; justify-content: flex-end; }
@media (max-width: 720px) { .ss-grid { grid-template-columns: minmax(0, 1fr); } .ss-preview-body { flex-wrap: wrap; } }

/* SELLER: Store Categories */
.sc-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.sc-add { display: grid; gap: 12px; }
.sc-select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font-family: inherit; font-size: 13.5px; }
.sc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.sc-stats > div { padding: 10px 12px; border-radius: 10px; background: #f9fafb; }
.sc-stats strong { display: block; font-size: 20px; font-weight: 800; color: #111827; }
.sc-stats span { font-size: 11.5px; color: #6b7280; }
.sc-tree, .sc-children { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sc-children { margin: -2px 0 4px 34px; padding-left: 14px; border-left: 2px dashed #e5e7eb; }
.sc-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #eceef1; border-radius: 12px; background: #fff; }
.sc-row:hover { border-color: #d1d5db; }
.sc-row.is-hidden { background: #f9fafb; }
.sc-row.is-hidden .sc-main strong { color: #9ca3af; }
.sc-move { display: grid; gap: 2px; }
.sc-move form { margin: 0; }
.sc-move button { width: 26px; height: 20px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #6b7280; font-size: 10px; cursor: pointer; }
.sc-move button:hover:not(:disabled) { border-color: #d0001b; color: #d0001b; }
.sc-move button:disabled { opacity: .35; cursor: default; }
.sc-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sc-main strong { font-size: 14px; color: #111827; }
.sc-main > span { font-size: 12px; color: #6b7280; }
.sc-hidden { font-style: normal; margin-left: 6px; color: #b45309; font-weight: 700; }
.sc-rename summary { cursor: pointer; font-size: 12px; font-weight: 700; color: #d0001b; list-style: none; width: max-content; }
.sc-rename summary::-webkit-details-marker { display: none; }
.sc-rename form { display: flex; gap: 6px; margin-top: 6px; }
.sc-rename input { flex: 1; height: 32px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-family: inherit; font-size: 13px; }
.sc-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sc-actions form { margin: 0; }
.sc-actions .btn-sm { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 900px) { .sc-layout { grid-template-columns: minmax(0, 1fr); } .sc-row { flex-wrap: wrap; } }

/* SELLER: Add Product form */
.ap-locked, .ap-errors { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13px; }
.ap-locked { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.ap-errors { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; margin: 6px 0 12px; }
.ap-err { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: #b91c1c; }
.ap-hint { display: block; margin-top: 4px; font-size: 12px; color: #6b7280; }
.ap-hint.is-bad, .ap-count.is-bad { color: #b91c1c; font-weight: 700; }
.ap-count { display: block; margin-top: 4px; text-align: right; font-size: 11.5px; color: #9ca3af; }
.ap-submit { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid #f1f2f4; }
.ap-submit .btn-primary { display: inline-flex; align-items: center; gap: 8px; }
.ap-submit .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.inv-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 20px 10px; padding: 10px 12px; border-radius: 12px; background: #f9fafb; border: 1px solid #f1f2f4; }
.inv-bulk-all { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #374151; cursor: pointer; }
.inv-bulk-count { font-size: 12.5px; color: #6b7280; margin-right: auto; }
.inv-bulk select { height: 32px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-family: inherit; font-size: 13px; }
.inv-bulk .btn-sm:disabled { opacity: .5; cursor: not-allowed; }
.inv-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 20px 10px; padding: 10px 12px; border-radius: 12px; background: #f9fafb; border: 1px solid #f1f2f4; }
.inv-bulk-all { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #374151; cursor: pointer; }
.inv-bulk-count { font-size: 12.5px; color: #6b7280; margin-right: auto; }
.inv-bulk select { height: 32px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-family: inherit; font-size: 13px; }
.inv-bulk .btn-sm:disabled { opacity: .5; cursor: not-allowed; }

/* SELLER: Sales & Discounts */
.sale-type { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sale-type label { position: relative; cursor: pointer; }
.sale-type input { position: absolute; opacity: 0; }
.sale-type span { display: flex; align-items: center; justify-content: center; height: 40px; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 13px; font-weight: 700; color: #374151; }
.sale-type input:checked + span { border-color: #d0001b; background: #fff5f5; color: #d0001b; }
.sale-preview { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #f9fafb; font-size: 13px; }
.sale-preview:empty { display: none; }
.sale-preview s, .sale-prices s { color: #9ca3af; }
.sale-preview b, .sale-prices b { color: #d0001b; }
.sale-group { margin: 10px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; }
.sale-group span { margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #f3f4f6; }
.sale-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; margin-bottom: 8px; border: 1px solid #eceef1; border-radius: 12px; background: #fff; }
.sale-row.is-ongoing { border-left: 4px solid #16a34a; }
.sale-row.is-upcoming { border-left: 4px solid #2563eb; }
.sale-row.is-ended { opacity: .7; }
.sale-main { flex: 1; min-width: 0; display: grid; gap: 4px; font-size: 12.5px; color: #6b7280; }
.sale-main strong { font-size: 14px; color: #111827; }
.sale-actions { display: grid; gap: 6px; justify-items: end; }
.sale-actions form { margin: 0; }
.sale-edit { display: grid; gap: 6px; margin-top: 6px; font-size: 12px; }
.sale-edit input { height: 30px; padding: 0 8px; border: 1px solid #e5e7eb; border-radius: 8px; font-family: inherit; font-size: 12.5px; }
/* The hidden attribute always wins over a component's display rule. */
.admin-body [hidden] { display: none !important; }
#saleForm .ss-grid { grid-template-columns: minmax(0, 1fr); }
#saleForm input[type="datetime-local"] { min-width: 0; }

/* =====================================================
   WAYBILL PRINTING + REFUND PICKUPS (sorting center)
===================================================== */
.wp-title-sub { margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: #fef2f2; color: #b91c1c; font-size: 11.5px; font-weight: 700; vertical-align: middle; }
.wp-alert { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 11px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.wp-alert.is-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.wp-alert.is-ok { background: #ecfdf3; border: 1px solid #bbf7d0; color: #166534; }
.wp-alert i { margin-top: 2px; }
.wp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.wp-kpis > a, .wp-kpis > div { display: block; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #eef0f3; color: inherit; text-decoration: none; transition: border-color .15s; }
.wp-kpis > a:hover { border-color: #d0001b; }
.wp-kpis span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; }
.wp-kpis strong { display: block; margin-top: 6px; font-size: 22px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.wp-kpis .is-warn { background: #fffbeb; border-color: #fde68a; }
.wp-kpis .is-warn strong { color: #b45309; }
.wp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.wp-seg { display: inline-flex; padding: 3px; border-radius: 11px; background: #f3f4f6; }
.wp-seg a { padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: #6b7280; text-decoration: none; white-space: nowrap; }
.wp-seg a.is-active { background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }
.wp-search { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 220px; height: 38px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #9ca3af; }
.wp-search input { flex: 1; min-width: 0; border: none; outline: none; font-family: inherit; font-size: 13px; background: transparent; }
.wp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wp-filters a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; font-size: 12.5px; font-weight: 700; color: #4b5563; text-decoration: none; }
.wp-filters a b { min-width: 18px; padding: 0 6px; border-radius: 999px; background: #f3f4f6; font-size: 11px; text-align: center; }
.wp-filters a.is-active { border-color: #d0001b; background: #fff5f5; color: #d0001b; }
.wp-filters a.is-active b { background: #d0001b; color: #fff; }
.wp-table td { vertical-align: top; }
.wp-sub { display: block; margin-top: 2px; font-size: 12px; color: #6b7280; text-decoration: none; }
a.wp-sub:hover { color: #d0001b; }
.wp-wrap { max-width: 240px; white-space: normal; line-height: 1.4; }
.wp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .3px; }
.wp-party { display: block; font-size: 13px; color: #111827; font-weight: 600; }
.wp-party em { display: inline-block; width: 34px; font-style: normal; font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; }
.wp-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 0; border: none; background: none; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #d0001b; text-decoration: none; cursor: pointer; }
.wp-link:hover { text-decoration: underline; }
.wp-actions { display: grid; justify-items: start; gap: 4px; }
.wp-table td:first-child .cell-name, .wp-table td:first-child .wp-mono { white-space: nowrap; }
.wp-table form .wp-link { white-space: nowrap; text-align: left; }
.wp-hub { margin-top: 6px; color: #374151; font-weight: 600; }
.wp-divider { display: block; height: 1px; margin: 8px 0 6px; background: #f1f2f4; }
.wp-table .cx-pill { margin-top: 4px; }
.wp-hub i { color: #9ca3af; margin-right: 2px; }
.wp-actions .btn-sm { white-space: nowrap; }
.wp-assign { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wp-assign select { padding: 6px 8px; border-radius: 8px; border: 1px solid #ddd; font-size: 12.5px; max-width: 170px; }
.wp-focus { background: #fffbeb; box-shadow: inset 3px 0 0 #f59e0b; }
.wp-print-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.wp-print-side .admin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wp-facts { display: grid; gap: 8px; margin: 0 0 14px; }
.wp-facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.wp-facts dt { color: #6b7280; }
.wp-facts dd { margin: 0; color: #111827; font-weight: 600; word-break: break-word; }
.wp-check-title { margin: 4px 0 8px; font-size: 13px; font-weight: 800; color: #111827; }
.wp-check { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.wp-check li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6b7280; }
.wp-check li i { color: #d1d5db; }
.wp-check li.is-done { color: #111827; }
.wp-check li.is-done i { color: #16a34a; }
.wp-scan { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #f9fafb; border: 1px solid #eef0f3; }
.wp-scan label { font-size: 12.5px; font-weight: 700; color: #374151; }
.wp-scan-input { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #9ca3af; }
.wp-scan-input input { flex: 1; min-width: 0; border: none; outline: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; background: transparent; }
.wp-scan-input:focus-within { border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.wp-scan-row { display: flex; gap: 8px; }
.wp-scan-row .wp-scan-input { flex: 1; min-width: 0; }
.wp-cam-btn { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #d0001b; font-size: 15px; cursor: pointer; transition: border-color .15s, background .15s; }
.wp-cam-btn:hover, .wp-cam-btn.is-on { border-color: #d0001b; background: #fff8f8; }
.wp-cam { margin-top: 0; }
.wp-cam .hub-cam-view { min-height: 180px; }
.wp-cam .hub-cam-bar { justify-content: flex-end; }
@media (max-width: 1100px) { .wp-print-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
    .wp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wp-search { margin-left: 0; width: 100%; }
    .wp-seg { overflow-x: auto; max-width: 100%; }
}

/* Seller pickup materials — staff chips, seller summary, rider card */
.pkm-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.pkm { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #f3f4f6; color: #6b7280; white-space: nowrap; }
.pkm-wait { background: #fffbeb; color: #b45309; }
.pkm-ok { background: #ecfdf3; color: #15803d; }
.pkup-yesno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pkup-yesno label { position: relative; cursor: pointer; }
.pkup-yesno input { position: absolute; opacity: 0; }
.pkup-yesno span { display: grid; gap: 2px; height: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid #e5e7eb; border-radius: 12px; font-size: 11.5px; color: #6b7280; transition: border-color .15s, background .15s; }
.pkup-yesno span i { color: #9ca3af; }
.pkup-yesno strong { font-size: 13px; color: #111827; }
.pkup-yesno input:checked + span { border-color: #d0001b; background: #fff5f5; }
.pkup-yesno input:checked + span i { color: #d0001b; }
.pkup-yesno input:focus-visible + span { box-shadow: 0 0 0 3px rgba(208, 0, 27, .15); }
.soc-pickup.is-booked { flex-wrap: wrap; }
.soc-pickup .soc-pickup-materials { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; margin: 2px 0 0 21px; }
.soc-pickup-materials em { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: #f3f4f6; font-style: normal; font-size: 11.5px; color: #4b5563; }
.soc-pickup-materials em.is-hub { background: #eff6ff; color: #1d4ed8; }
.cx-job-materials { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #f9fafb; border: 1px dashed #e5e7eb; }
.cx-job-materials-title { font-size: 11.5px; font-weight: 800; color: #374151; text-transform: uppercase; letter-spacing: .3px; }
.cx-job-material { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #374151; }
.cx-job-material b { margin-left: auto; padding: 1px 8px; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.cx-job-material.is-ready b { background: #ecfdf3; color: #15803d; }
.cx-job-material.is-waiting b { background: #fffbeb; color: #b45309; }
.cx-job-blocked { display: flex; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: 12.5px; line-height: 1.4; }
.cx-job-blocked + .cq-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Seller Store & Account: Store Profile / Account & Security switch */
.acct-switch { display: inline-flex; gap: 4px; margin-bottom: 18px; padding: 4px; border-radius: 12px; background: #f3f4f6; }
.acct-switch button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: none; border-radius: 9px; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700; color: #6b7280; cursor: pointer; }
.acct-switch button.is-active { background: #fff; color: #d0001b; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.acct-pane-intro { margin: 0 0 14px; font-size: 13.5px; color: #6b7280; }
@media (max-width: 520px) { .acct-switch { display: flex; } .acct-switch button { flex: 1; justify-content: center; padding: 9px 8px; } }
.acct-page .acct-switch button { width: auto; min-width: 0; flex: 0 0 auto; white-space: nowrap; line-height: 1.2; height: auto; }
.acct-page .acct-switch button i { flex-shrink: 0; }
@media (max-width: 520px) { .acct-page .acct-switch button { flex: 1 1 0; } }

/* =====================================================
   ADMIN: Returns & Refunds to Pay + Seller Payouts
===================================================== */
.rt-card .admin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rt-card .admin-card-head h3 i { color: #d0001b; margin-right: 6px; }
.rt-head-note { font-size: 12.5px; color: #6b7280; }
.rt-intro { margin: -4px 0 14px; font-size: 13px; color: #6b7280; }
.rt-alert { display: flex; gap: 8px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 13px; }
.rt-row { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 16px; align-items: center; padding: 14px 16px; margin-bottom: 10px; border: 1px solid #eef0f3; border-radius: 14px; background: #fff; }
.rt-row.is-ready { border-color: #bbf7d0; background: #f6fef9; box-shadow: inset 3px 0 0 #16a34a; }
.rt-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.rt-who strong { font-size: 14px; color: #111827; }
.rt-who > span { font-size: 13px; color: #374151; }
.rt-meta { font-size: 12px; color: #6b7280; }
.rt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rt-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.rt-steps li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #f3f4f6; font-size: 12px; color: #6b7280; }
.rt-steps li i { font-size: 11px; color: #d1d5db; }
.rt-steps li em { font-style: normal; font-size: 11px; color: #9ca3af; }
.rt-steps li.is-done { background: #ecfdf3; color: #166534; }
.rt-steps li.is-done i { color: #16a34a; }
.rt-pay { display: grid; justify-items: end; gap: 4px; text-align: right; }
.rt-amount { font-size: 18px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.rt-pay form { margin-top: 6px; }
.rt-empty { padding: 26px; text-align: center; font-size: 13px; color: #9ca3af; border: 1px dashed #e5e7eb; border-radius: 12px; }
.rt-empty i { margin-right: 6px; }
.po-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.po-kpis > div { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #eef0f3; }
.po-kpis span { display: block; font-size: 12px; color: #6b7280; }
.po-kpis strong { display: block; margin-top: 6px; font-size: 22px; font-weight: 800; color: #111827; }
.po-kpis em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: #9ca3af; }
.po-kpis .is-good { background: #f6fef9; border-color: #bbf7d0; }
.po-kpis .is-good strong { color: #15803d; }
.po-kpis .is-warn { background: #fffbeb; border-color: #fde68a; }
.po-kpis .is-warn strong { color: #b45309; }
.po-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.po-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.po-filters a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; font-size: 12.5px; font-weight: 700; color: #4b5563; text-decoration: none; }
.po-filters a b { min-width: 18px; padding: 0 6px; border-radius: 999px; background: #f3f4f6; font-size: 11px; text-align: center; }
.po-filters a.is-active { border-color: #d0001b; background: #fff5f5; color: #d0001b; }
.po-filters a.is-active b { background: #d0001b; color: #fff; }
#tab-payouts button[disabled] { opacity: .55; cursor: not-allowed; }
.po-wallet-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 2px 0 16px; padding: 18px 20px; border: 1px solid #e9edf3; border-radius: 16px; background: linear-gradient(115deg, #fff 0%, #fff8f8 100%); }
.po-wallet-heading h3, .po-wallet-toolbar h3 { margin: 0; color: #111827; font-size: 16px; font-weight: 750; }
.po-wallet-heading p, .po-wallet-toolbar p { margin: 4px 0 0; color: #6b7280; font-size: 12.5px; line-height: 1.55; }
.po-wallet-heading > div { max-width: 820px; }
.po-wallet-heading-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 13px; background: #feecee; color: #c9001b; font-size: 18px; }
.po-wallet-kpis > div { min-width: 0; }
.po-wallet-kpis strong { font-size: clamp(17px, 1.8vw, 22px); overflow-wrap: anywhere; }
.po-wallet-card { overflow: hidden; }
.po-wallet-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; }
.po-wallet-search { display: flex; align-items: center; gap: 9px; width: min(100%, 320px); min-height: 40px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #9ca3af; }
.po-wallet-search:focus-within { border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .08); }
.po-wallet-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #111827; font: inherit; font-size: 12.5px; }
.po-wallet-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.po-wallet-filters .chip { display: inline-flex; align-items: center; gap: 7px; }
.po-wallet-filters .chip span { min-width: 18px; padding: 1px 6px; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-size: 11px; text-align: center; }
.po-wallet-filters .chip.active span { background: #fff; color: #c9001b; }
.po-wallet-table { min-width: 850px; }
.po-wallet-table th { white-space: nowrap; }
.po-wallet-seller { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.po-wallet-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; background: #fff0f1; color: #c9001b; font-size: 13px; font-weight: 800; }
.po-wallet-seller strong, .po-wallet-seller small { display: block; }
.po-wallet-seller strong { max-width: 220px; overflow: hidden; color: #111827; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.po-wallet-seller small { margin-top: 2px; color: #8b929e; font-size: 11.5px; }
.po-wallet-amount { color: #137547; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-wallet-table tbody td:not(:first-child) { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 860px) {
    .rt-row { grid-template-columns: minmax(0, 1fr); }
    .rt-pay { justify-items: start; text-align: left; }
    .po-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .seller-overview-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
    .po-wallet-heading { align-items: flex-start; }
    .po-wallet-toolbar { align-items: stretch; flex-direction: column; }
    .po-wallet-search { width: 100%; }
}

.rd-handover { display: grid; gap: 6px; min-width: 190px; }
.rd-handover .wp-scan-input { height: 34px; }

/* Incoming Returns: the 3 steps back to the seller */
.ir-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.ir-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #eef0f3; }
.ir-steps li > span { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #d0001b; color: #fff; font-size: 12px; font-weight: 800; }
.ir-steps strong { display: block; font-size: 13px; color: #111827; }
.ir-steps em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: #6b7280; }
.ir-steps a { color: #d0001b; font-weight: 700; }
@media (max-width: 760px) { .ir-steps { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================
   SELLER INVENTORY MODALS — Add Product, Edit, Vouchers
===================================================== */
body.pm-open { overflow: hidden; }
tr.pm-row, tr.pm-row > td { padding: 0 !important; border: 0 !important; height: 0; background: none !important; }
.pm-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(17, 24, 39, .55); backdrop-filter: blur(2px); animation: pmFade .15s ease-out; }
.admin-body .pm-overlay[hidden] { display: none !important; }
@keyframes pmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmRise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.pm-dialog { display: flex; flex-direction: column; width: min(640px, 100%); max-height: calc(100vh - 48px); border-radius: 18px; background: #fff; box-shadow: 0 30px 70px rgba(16, 24, 40, .3); overflow: hidden; animation: pmRise .18s ease-out; text-align: left; }
.pm-dialog.pm-lg { width: min(760px, 100%); }
.pm-dialog.pm-xl { width: min(920px, 100%); }
.pm-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid #f1f2f4; background: #fff; }
.pm-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: #111827; }
.pm-head p { margin: 2px 0 0; font-size: 12.5px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.pm-icon, .pm-thumb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff1f2; color: #d0001b; font-size: 18px; overflow: hidden; }
.pm-thumb { background: #f9fafb; border: 1px solid #eef0f3; color: #9ca3af; }
.pm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pm-close { margin-left: auto; flex: 0 0 36px; width: 36px; height: 36px; border: none; border-radius: 10px; background: #f3f4f6; color: #6b7280; font-size: 15px; cursor: pointer; transition: background .15s, color .15s; }
.pm-close:hover { background: #fee2e2; color: #d0001b; }
.pm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px 0; }
.pm-body > form, .pm-body form:last-child { margin-bottom: 0; }
/* Keep the Save / Publish row in view while the form scrolls. */
.pm-foot, .pm-body .ap-submit { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 18px -22px 0; padding: 14px 22px; border-top: 1px solid #f1f2f4; background: #fcfcfd; }
.pm-body .ap-submit { justify-content: space-between; }
.pm-body .admin-form-group label { font-weight: 700; }
.pm-body input[type="text"], .pm-body input[type="number"], .pm-body input[type="date"], .pm-body select, .pm-body textarea { border-radius: 10px; }
@media (max-width: 640px) {
    .pm-overlay { padding: 0; align-items: flex-end; }
    .pm-dialog, .pm-dialog.pm-lg, .pm-dialog.pm-xl { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
    .pm-head { padding: 14px 16px; }
    .pm-body { padding: 16px 16px 0; }
    .pm-foot, .pm-body .ap-submit { margin: 16px -16px 0; padding: 12px 16px; }
}

/* Vouchers modal */
.vm-body { padding-bottom: 0; }
.vm-section + .vm-section { margin-top: 22px; padding-top: 18px; border-top: 1px dashed #eef0f3; }
.vm-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 800; color: #111827; text-transform: uppercase; letter-spacing: .4px; }
.vm-title span { padding: 0 8px; border-radius: 999px; background: #f3f4f6; color: #6b7280; font-size: 11px; }
.vm-ticket { display: flex; align-items: stretch; min-height: 72px; margin-bottom: 8px; border: 1px solid #eef0f3; border-radius: 12px; background: #fff; overflow: hidden; }
.vm-ticket.is-on { border-color: #fde2e4; }
.vm-ticket.is-off { opacity: .7; }
.vm-stub { position: relative; flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(160deg, #d0001b, #ff4d2e); color: #fff; }
.vm-ticket.is-off .vm-stub { background: #9ca3af; }
.vm-stub strong { font-size: 18px; font-weight: 900; line-height: 1; white-space: nowrap; }
.vm-stub span { margin-top: 2px; font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; }
.vm-stub::after { content: ""; position: absolute; top: 4px; bottom: 4px; right: -4px; width: 8px; background: radial-gradient(circle at 4px 4px, #fff 2.6px, transparent 3px) 0 0 / 8px 9px repeat-y; }
.vm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 12px 8px 16px; }
.vm-line { display: flex; align-items: center; gap: 8px; }
.vm-code { padding: 1px 8px; border: 1px dashed #f3a6ad; border-radius: 6px; color: #d0001b; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 800; letter-spacing: .5px; }
.vm-state { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.vm-state.is-on { background: #ecfdf3; color: #15803d; }
.vm-state.is-off { background: #f3f4f6; color: #6b7280; }
.vm-terms { font-size: 12px; color: #6b7280; }
.vm-usage { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #9ca3af; }
.vm-bar { flex: 0 0 90px; height: 4px; border-radius: 99px; background: #f3f4f6; overflow: hidden; }
.vm-bar span { display: block; height: 100%; background: #d0001b; }
.vm-actions { display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.vm-actions form { margin: 0; }
.vm-btn { height: 32px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #374151; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.vm-btn:hover { border-color: #d0001b; color: #d0001b; }
.vm-btn-danger { width: 32px; padding: 0; color: #b91c1c; }
.vm-empty { display: grid; justify-items: center; gap: 4px; padding: 24px 16px; border: 1px dashed #e5e7eb; border-radius: 12px; text-align: center; color: #9ca3af; font-size: 12.5px; }
.vm-empty i { font-size: 22px; color: #f3a6ad; }
.vm-empty strong { color: #374151; font-size: 13.5px; }
.vm-error { display: flex; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 13px; }
.vm-type { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.vm-type label { position: relative; cursor: pointer; }
.vm-type input { position: absolute; opacity: 0; }
.vm-type span { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 13px; font-weight: 700; color: #6b7280; transition: border-color .15s, background .15s; }
.vm-type input:checked + span { border-color: #d0001b; background: #fff5f5; color: #d0001b; }
.vm-type input:focus-visible + span { box-shadow: 0 0 0 3px rgba(208, 0, 27, .15); }
.vm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vm-field { display: grid; gap: 6px; }
.vm-field[hidden] { display: none; }
.vm-field > span { font-size: 12.5px; font-weight: 700; color: #374151; }
.vm-field em { font-style: normal; font-weight: 500; color: #9ca3af; }
.vm-field input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; font-family: inherit; font-size: 13.5px; }
.vm-field input:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.vm-preview { margin-top: 16px; padding: 12px; border-radius: 12px; background: #f9fafb; }
.vm-preview-label { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .4px; }
.vm-ticket-preview { max-width: 340px; margin: 0; }
@media (max-width: 640px) { .vm-grid { grid-template-columns: 1fr 1fr; } .vm-actions { flex-direction: column; justify-content: center; padding: 6px 10px; } }

/* Edit product modal — media and variant rows */
.pm-body .admin-form-group > label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; color: #374151; text-transform: uppercase; letter-spacing: .4px; }
.pm-body .media-preview-list { display: flex; flex-wrap: wrap; gap: 10px; }
.pm-body .media-chip { position: relative; width: 76px; height: 76px; max-width: none; padding: 0; border-radius: 12px; border: 1px solid #eef0f3; background: #f9fafb; overflow: hidden; justify-content: center; }
.pm-body .media-chip img, .pm-body .media-chip video { width: 100%; height: 100%; object-fit: cover; }
.pm-body .media-chip form { position: absolute; top: 4px; right: 4px; margin: 0; }
.pm-body .media-chip-remove { width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(17, 24, 39, .7); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.pm-body .media-chip-remove:hover { background: #d0001b; }

.pm-body .variation-manage-list { display: grid; gap: 8px; }
.pm-body .variation-manage-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid #eef0f3; border-radius: 12px; background: #fff; flex-wrap: nowrap; }
.pm-body .variation-manage-row:hover { border-color: #fecdd3; }
.pm-body .variation-manage-thumb { width: 48px; height: 48px; border-radius: 10px; background: #f9fafb; border: 1px solid #f1f2f4; }
.pm-body .variation-manage-name { font-size: 14px; font-weight: 800; color: #111827; }
.pm-body .variation-manage-price { margin-top: 2px; font-size: 12px; color: #6b7280; }
.pm-body .variation-restock-form { display: grid; grid-template-columns: auto 140px auto 96px auto; align-items: center; gap: 8px; margin: 0; }
.pm-body .variation-restock-form label { margin: 0; font-size: 11px; font-weight: 800; color: #6b7280; text-transform: uppercase; letter-spacing: .3px; }
.pm-body .variation-price-input { display: flex; width: 100%; height: 38px; border: 1px solid #e5e7eb; border-radius: 10px; }
.pm-body .variation-price-input > span { padding: 0 10px; font-size: 13px; }
.pm-body .variation-price-input input,
.pm-body .variation-restock-form input[type="number"] { width: 100% !important; min-width: 0; height: 38px; box-sizing: border-box; padding: 0 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pm-body .variation-restock-form > input[type="number"] { border: 1px solid #e5e7eb !important; border-radius: 10px; }
.pm-body .variation-price-input:focus-within, .pm-body .variation-restock-form > input:focus { border-color: #d0001b !important; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); outline: none; }
.pm-body .variation-restock-form .btn-sm { height: 38px; padding: 0 16px; border-radius: 10px; }
.pm-body .variation-manage-row > form:last-child .btn-sm { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 10px; color: #b91c1c; }
.pm-body .variation-manage-row > form:last-child { margin: 0; }
@media (max-width: 760px) {
    .pm-body .variation-manage-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .pm-body .variation-restock-form { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto 80px auto; }
}
.pm-body .admin-form-group > label .optional { text-transform: none; letter-spacing: 0; font-weight: 500; color: #9ca3af; margin-left: 4px; }
.pm-body .admin-form-group > label.category-filter-checkbox { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px; }

/* Store & Account: one header for both tabs */
.sa-hero { margin-bottom: 18px; border-radius: 18px; background: #fff; border: 1px solid #eef0f3; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); overflow: hidden; }
.sa-cover { position: relative; height: 150px; background: linear-gradient(120deg, #1f0a0d, #7a0010 55%, #d0001b); background-size: cover; background-position: center; }
.sa-cover-form { position: absolute; right: 14px; bottom: 12px; margin: 0; }
.sa-cover-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; background: rgba(17, 24, 39, .55); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; backdrop-filter: blur(3px); }
.sa-cover-btn:hover { background: rgba(17, 24, 39, .75); }
.sa-hero-body { display: flex; align-items: flex-end; gap: 18px; padding: 0 24px 18px; }
.sa-avatar { flex: 0 0 104px; width: 104px; height: 104px; margin-top: -52px; border-radius: 50%; border: 4px solid #fff; background: #fff1f2; box-shadow: 0 6px 18px rgba(16, 24, 40, .15); display: grid; place-items: center; overflow: hidden; color: #d0001b; font-size: 36px; }
.sa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sa-hero-info { flex: 1; min-width: 0; padding-top: 12px; }
.sa-hero-info h2 { margin: 0; font-size: 22px; font-weight: 800; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-hero-info p { margin: 2px 0 8px; font-size: 13px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-size: 12px; font-weight: 600; }
.sa-chips span.is-good { background: #ecfdf3; color: #15803d; }
.sa-view { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid #e5e7eb; border-radius: 10px; color: #111827; font-size: 13px; font-weight: 700; text-decoration: none; }
.sa-view:hover { border-color: #d0001b; color: #d0001b; }
.sa-account-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding: 16px 20px; border-radius: 14px; background: #fff; border: 1px solid #eef0f3; }
.sa-account-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: #111827; }
.sa-account-head p { margin: 2px 0 0; font-size: 12.5px; color: #6b7280; }
@media (max-width: 760px) {
    .sa-cover { height: 110px; }
    .sa-hero-body { flex-wrap: wrap; align-items: flex-start; padding: 0 16px 16px; }
    .sa-avatar { flex-basis: 84px; width: 84px; height: 84px; margin-top: -42px; }
    .sa-hero-info { flex-basis: 100%; padding-top: 0; }
    .sa-hero-info h2, .sa-hero-info p { white-space: normal; }
    .sa-account-head { flex-direction: column; align-items: flex-start; }
}
[data-theme="dark"] .sa-hero, [data-theme="dark"] .sa-account-head { background: #111827; border-color: #1f2937; }
[data-theme="dark"] .sa-hero-info h2, [data-theme="dark"] .sa-account-head h3 { color: #f9fafb; }

/* Admin → Refunds Overview: KPIs, stage tabs, search, history */
.rf-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.rf-kpi { display: block; padding: 14px 16px; border: 1px solid #eef0f3; border-radius: 14px; background: #fff; text-align: left; font-family: inherit; cursor: pointer; transition: border-color .15s, transform .1s; }
.rf-kpi:hover { border-color: #d0001b; }
.rf-kpi span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; }
.rf-kpi strong { display: block; margin-top: 6px; font-size: 22px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.rf-kpi em { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; color: #9ca3af; }
.rf-kpi.is-alert { background: #fef2f2; border-color: #fecaca; } .rf-kpi.is-alert strong { color: #b91c1c; }
.rf-kpi.is-good { background: #f6fef9; border-color: #bbf7d0; } .rf-kpi.is-good strong { color: #15803d; }
.rf-kpi.is-warn { background: #fffbeb; border-color: #fde68a; } .rf-kpi.is-warn strong { color: #b45309; }
.rf-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.rf-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: #f3f4f6; }
.rf-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: none; border-radius: 9px; background: none; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #6b7280; cursor: pointer; }
.rf-tabs button b { padding: 0 6px; border-radius: 999px; background: #e5e7eb; font-size: 11px; color: #4b5563; }
.rf-tabs button.is-active { background: #fff; color: #d0001b; box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }
.rf-tabs button.is-active b { background: #d0001b; color: #fff; }
.rf-search { display: flex; align-items: center; gap: 8px; min-width: 260px; height: 38px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #9ca3af; }
.rf-search input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; }
.rf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rf-card-head h3 i { color: #d0001b; margin-right: 6px; }
.admin-body [data-rf-pane][hidden], .admin-body [data-rf-row][hidden] { display: none !important; }
.rf-history td { vertical-align: top; }
.rf-why { max-width: 240px; margin-top: 4px; white-space: normal; }
.rf-pending { color: #b45309; }
@media (max-width: 1200px) { .rf-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .rf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rf-search { min-width: 0; width: 100%; } }

/* Admin → Refunds: request details + evidence */
.rfd { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; padding: 6px 2px 10px; }
.rfd-card { padding: 16px 18px; border: 1px solid #eef0f3; border-radius: 14px; background: #fff; }
.rfd-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 800; color: #111827; text-transform: uppercase; letter-spacing: .4px; }
.rfd-title i { color: #d0001b; }
.rfd-title span { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: #f3f4f6; color: #6b7280; font-size: 11.5px; letter-spacing: 0; text-transform: none; }
.rfd-items { display: grid; gap: 8px; margin-bottom: 12px; }
.rfd-item { display: flex; align-items: center; gap: 10px; }
.rfd-item-img { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background: #f9fafb; border: 1px solid #f1f2f4; display: grid; place-items: center; overflow: hidden; color: #9ca3af; }
.rfd-item-img img { width: 100%; height: 100%; object-fit: cover; }
.rfd-item strong { display: block; font-size: 13px; color: #111827; }
.rfd-item em { display: block; font-style: normal; font-size: 12px; color: #6b7280; }
.rfd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0 0 12px; padding: 12px 0; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; }
.rfd-facts dt { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .3px; }
.rfd-facts dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: #111827; }
.rfd-quote { margin-bottom: 8px; padding: 10px 12px; border-left: 3px solid #d0001b; border-radius: 0 10px 10px 0; background: #fff5f5; font-size: 13px; color: #374151; line-height: 1.45; }
.rfd-quote span { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; color: #d0001b; text-transform: uppercase; letter-spacing: .3px; }
.rfd-quote.is-seller { border-left-color: #2563eb; background: #eff6ff; } .rfd-quote.is-seller span { color: #2563eb; }
.rfd-quote.is-escalation { border-left-color: #d97706; background: #fffbeb; } .rfd-quote.is-escalation span { color: #b45309; }
.rfd-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.rfd-money div { padding: 10px 12px; border-radius: 10px; background: #f9fafb; }
.rfd-money span { display: block; font-size: 11.5px; color: #6b7280; }
.rfd-money b { display: block; margin-top: 2px; font-size: 15px; color: #111827; font-variant-numeric: tabular-nums; }
.rfd-money .is-total { background: #ecfdf3; } .rfd-money .is-total b { color: #15803d; }
.rfd-evidence { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.rfd-thumb { position: relative; aspect-ratio: 1 / 1; padding: 0; border: 1px solid #eef0f3; border-radius: 10px; background: #f9fafb; overflow: hidden; cursor: zoom-in; }
.rfd-thumb img, .rfd-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.rfd-thumb:hover img, .rfd-thumb:hover video { transform: scale(1.05); }
.rfd-play { position: absolute; inset: 0; margin: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(17, 24, 39, .6); color: #fff; font-size: 12px; }
.rfd-hint, .rfd-empty { margin: 8px 0 0; font-size: 12px; color: #9ca3af; }
.rfd-lightbox { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(17, 24, 39, .85); }
.admin-body .rfd-lightbox[hidden] { display: none !important; }
.rfd-lightbox-body img, .rfd-lightbox-body video { max-width: min(92vw, 1100px); max-height: 86vh; border-radius: 12px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.rfd-lightbox-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 18px; cursor: pointer; }
.rfd-lightbox-close:hover { background: #d0001b; }
.rfd-reject { display: grid; gap: 8px; max-width: 640px; padding: 14px 16px; border: 1px solid #fecaca; border-radius: 14px; background: #fff; }
.rfd-reject label { font-size: 12.5px; font-weight: 800; color: #991b1b; }
.rfd-reject textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; font-family: inherit; font-size: 13px; resize: vertical; }
.rfd-reject textarea:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.rfd-reject-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 900px) { .rfd { grid-template-columns: minmax(0, 1fr); } .rfd-facts, .rfd-money { grid-template-columns: 1fr 1fr; } }
.rf-with-seller { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* Refunds: who was at fault (who pays the return shipping) */
.rt-fault { display: grid; gap: 6px; width: 250px; margin-top: 8px; padding: 10px; border: 1px solid #eef0f3; border-radius: 10px; background: #fcfcfd; text-align: left; }
.rt-fault-title { font-size: 11.5px; font-weight: 800; color: #374151; text-transform: uppercase; letter-spacing: .3px; }
.rt-fault label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; font-size: 12px; color: #374151; cursor: pointer; }
.rt-fault label.is-suggested { border-color: #fecdd3; }
.rt-fault label:has(input:checked) { border-color: #d0001b; background: #fff5f5; }
.rt-fault-hint { font-size: 11px; color: #9ca3af; line-height: 1.35; }
.rt-fault input[type=text] { height: 32px; padding: 0 8px; border: 1px solid #e5e7eb; border-radius: 8px; font-family: inherit; font-size: 12px; }
.rt-fault .btn-sm { justify-content: center; }
.rt-row:has(.rt-fault) { grid-template-columns: minmax(0, 1fr) 270px; align-items: start; }
.rt-fault { width: 100%; box-sizing: border-box; }

/* Admin → Refunds: open requests as cards */
.orq-list { display: grid; gap: 12px; }
.orq { display: grid; grid-template-columns: minmax(0, 1fr) 210px 170px; gap: 20px; align-items: center; padding: 16px 18px; border: 1px solid #eef0f3; border-left: 4px solid #93c5fd; border-radius: 14px; background: #fff; transition: box-shadow .15s; }
.orq:hover { box-shadow: 0 6px 18px rgba(16, 24, 40, .07); }
.orq.is-escalated { border-left-color: #f59e0b; background: linear-gradient(90deg, #fffbeb, #fff 40%); }
.orq-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.orq-order { font-size: 15px; font-weight: 800; color: #111827; }
.orq-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.orq-pill.is-seller { background: #eff6ff; color: #1d4ed8; }
.orq-pill.is-escalated { background: #fef3c7; color: #b45309; }
.orq-date { font-size: 12px; color: #9ca3af; }
.orq-parties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.orq-person { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.orq-person b { display: block; font-size: 13.5px; color: #111827; }
.orq-person em { display: block; font-style: normal; font-size: 12px; color: #6b7280; }
.orq-avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f3f4f6; color: #374151; font-size: 13px; font-weight: 800; }
.orq-avatar.is-shop { background: #fff1f2; color: #d0001b; }
.orq-arrow { color: #d1d5db; font-size: 12px; }
.orq-reason { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.orq-reason-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: #fff1f2; color: #b91c1c; font-size: 12.5px; font-weight: 700; }
.orq-quote { font-size: 13px; color: #4b5563; font-style: italic; }
.orq-dispute { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.orq-dispute div { padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #f3f4f6; font-size: 12.5px; color: #374151; }
.orq-dispute span { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 800; color: #9ca3af; text-transform: uppercase; letter-spacing: .3px; }
.orq-money { display: grid; gap: 8px; }
.orq-money div { padding: 8px 12px; border-radius: 10px; background: #f9fafb; }
.orq-money span { display: block; font-size: 11.5px; color: #6b7280; }
.orq-money b { display: block; font-size: 15px; color: #111827; font-variant-numeric: tabular-nums; }
.orq-money em { display: block; font-style: normal; font-size: 10.5px; color: #9ca3af; }
.orq-money .is-total { background: #ecfdf3; } .orq-money .is-total b { color: #15803d; }
.orq-actions { display: grid; gap: 8px; }
.orq-actions form { margin: 0; }
.orq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 36px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #374151; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.orq-btn:hover { border-color: #d0001b; color: #d0001b; }
.orq-btn.is-approve { border-color: #16a34a; background: #16a34a; color: #fff; }
.orq-btn.is-approve:hover { background: #15803d; color: #fff; }
.orq-btn.is-reject { border-color: #fecaca; color: #b91c1c; }
.orq-wait { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 10px; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 700; text-align: center; }
.orq-panel { margin: -4px 0 4px; }
@media (max-width: 1100px) { .orq { grid-template-columns: minmax(0, 1fr) 200px; } .orq-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .orq { grid-template-columns: minmax(0, 1fr); } .orq-dispute { grid-template-columns: 1fr; } .orq-actions { grid-template-columns: 1fr; } }
.orq-wait { flex-direction: column; height: auto; padding: 7px 10px; gap: 1px; }
.orq-wait small { font-size: 11px; font-weight: 600; color: #60a5fa; }

/* Who pays a refund's return shipping */
.rs-note { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #e5e7eb; background: #f9fafb; font-size: 12.5px; color: #4b5563; line-height: 1.45; text-align: left; }
.rs-note > i { margin-top: 2px; color: #6b7280; }
.rs-note strong { display: block; font-size: 13px; color: #111827; }
.rs-note em { font-style: normal; font-weight: 700; }
.rs-note.is-seller { border-color: #fde68a; background: #fffbeb; }
.rs-note.is-seller > i { color: #b45309; }
.rs-note.is-logistics { border-color: #bfdbfe; background: #eff6ff; }
.rs-note.is-logistics > i { color: #1d4ed8; }
td .rs-note { max-width: 360px; margin: 8px 0 0; }

/* Card Payments tab (partials/admin-card-tab) */
.card-settle-current { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; background: #f9fafb; border: 1px solid #eaecf0; }
.card-settle-current b { display: block; font-size: 14px; color: #101828; }
.card-settle-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fdeaea; color: #d0001b; font-size: 17px; }

/* Refunds to Send (card and GCash tabs): who it's sent from, and from → to per row. */
.refund-sender { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 14px; border-radius: 10px; background: #f9fafb; border: 1px solid #eaecf0; }
.refund-sender b { display: block; font-size: 14px; color: #101828; }
.refund-sender-label { padding: 3px 9px; border-radius: 99px; background: #101828; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.refund-sender-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: #fdeaea; color: #d0001b; }
.refund-sender-icon.is-gcash { background: #e8f1ff; color: #0a6cff; }
.refund-route { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.refund-route > i { color: #98a2b3; font-size: 11px; }

/* The admin bell: every sidebar item waiting on the admin, in one dropdown. */
.admin-bell-menu { position: relative; }
.admin-bell-menu > summary { list-style: none; display: inline-flex; }
.admin-bell-menu > summary::-webkit-details-marker { display: none; }
.admin-bell-menu[open] > summary { color: #d0001b; }
.admin-bell-panel { position: absolute; right: -10px; top: calc(100% + 12px); z-index: 60; width: 300px; max-height: 70vh; overflow-y: auto; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid #eaecf0; box-shadow: 0 16px 40px rgba(16,24,40,.16); }
.admin-bell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px 8px; border-bottom: 1px solid #f2f4f7; margin-bottom: 4px; }
.admin-bell-head b { font-size: 14px; color: #101828; }
.admin-bell-head span { font-size: 12px; color: #667085; }
.admin-bell-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: #344054; text-decoration: none; font-size: 13px; }
.admin-bell-item:hover { background: #fdf3f4; }
.admin-bell-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #fdeaea; color: #d0001b; font-size: 13px; flex-shrink: 0; }
.admin-bell-label { flex: 1; font-weight: 600; }
.admin-bell-empty { padding: 18px 12px; text-align: center; color: #667085; font-size: 13px; }
.admin-bell-empty i { color: #12b76a; margin-right: 4px; }

/* =====================================================
   COMBINED SALES & EARNINGS REPORT — numbered parts on
   screen; letterhead, executive summary, sign-off and an
   A4 layout (Part 2 on its own page) when printed.
===================================================== */

.rpt-section + .rpt-section { margin-top: 28px; }

.rpt-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eceef1;
}
.rpt-section-num {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #d0001b;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}
.rpt-section-title h3 { margin: 0; font-size: 16px; font-weight: 800; color: #111827; letter-spacing: -.01em; }
.rpt-section-title p { margin: 2px 0 0; font-size: 12.5px; color: #6b7280; }

/* Print-only pieces */
.rpt-letterhead { justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 3px solid #d0001b; }
.rpt-lh-brand { display: flex; align-items: center; gap: 10px; }
.rpt-lh-brand img { width: 42px; height: 42px; object-fit: contain; }
.rpt-lh-name { font-size: 20px; font-weight: 800; color: #d0001b; line-height: 1.1; }
.rpt-lh-tag { font-size: 10px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .12em; }
.rpt-lh-doc { text-align: right; }
.rpt-lh-title { font-size: 18px; font-weight: 800; color: #111827; text-transform: uppercase; letter-spacing: .04em; }
.rpt-lh-ref { margin-top: 2px; font-size: 10.5px; color: #6b7280; }
.rpt-lh-ref strong { color: #111827; font-variant-numeric: tabular-nums; }

.rpt-meta-table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 11px; }
.rpt-meta-table th, .rpt-meta-table td { padding: 6px 10px; border: 1px solid #d9dce1; text-align: left; }
.rpt-meta-table th { width: 13%; background: #f5f6f8; color: #4b5563; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 9.5px; white-space: nowrap; }
.rpt-meta-table td { color: #111827; font-weight: 600; }

.rpt-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rpt-summary-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.rpt-summary-table th { padding: 7px 10px; background: #111827; color: #fff; text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.rpt-summary-table td { padding: 6px 10px; border-bottom: 1px solid #e5e7eb; color: #374151; }
.rpt-summary-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: #111827; font-weight: 600; }
.rpt-summary-table .rpt-summary-key td { background: #fff5f5; border-top: 1.5px solid #111827; border-bottom: 2px solid #111827; font-weight: 800; color: #111827; }
.rpt-summary-table .rpt-summary-key td.num { color: #b30019; font-size: 12.5px; }

.rpt-signoff { margin-top: 24px; }
.rpt-notes { margin: 0 0 30px; padding: 10px 12px; border-left: 3px solid #d0001b; background: #f9fafb; font-size: 10.5px; line-height: 1.5; color: #4b5563; }
.rpt-sign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 0 20px; }
.rpt-sign { display: flex; flex-direction: column; align-items: center; }
.rpt-sign span { width: 100%; padding-bottom: 4px; border-bottom: 1px solid #111827; text-align: center; font-size: 12px; font-weight: 700; color: #111827; }
.rpt-sign small { margin-top: 4px; font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: .08em; }
.rpt-confidential { margin-top: 22px; padding-top: 8px; border-top: 1px solid #e5e7eb; text-align: center; font-size: 9.5px; color: #9ca3af; letter-spacing: .04em; }

@media (max-width: 640px) {
    .rpt-summary { grid-template-columns: minmax(0, 1fr); }
}

@media print {
    @page {
        @bottom-left { content: "GoCart · Sales & Earnings Report"; font-size: 8pt; color: #9ca3af; }
        @bottom-right { content: "Page " counter(page) " of " counter(pages); font-size: 8pt; color: #9ca3af; }
    }

    #printableReport, #printableReport * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #printableReport { font-size: 11px; }

    header.rpt-print-only { display: flex; }
    table.rpt-print-only { display: table; }
    section.rpt-print-only, footer.rpt-print-only { display: block; }

    .rpt-section + .rpt-section { margin-top: 16px; }
    .rpt-section-break { break-before: page; }
    .rpt-section-title { margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1.5px solid #111827; break-after: avoid; }
    .rpt-section-num { width: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
    .rpt-section-title h3 { font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em; }
    .rpt-section-title p { font-size: 10px; }

    .rpt-kpis.fin-kpis-5 { grid-template-columns: repeat(5, 1fr); }
    .rpt-kpis.fin-kpis-auto { grid-template-columns: repeat(4, 1fr); }
    .rpt-kpi { border-radius: 6px; border-color: #d9dce1; }
    .rpt-kpi-hero { border-left: 4px solid #d0001b !important; background: #fff5f5 !important; }
    .rpt-kpi-hero .rpt-kpi-value { color: #b30019 !important; }
    .rpt-kpi-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; }
    .rpt-kpi-label i { display: none; }
    .rpt-kpi-foot, .fin-hero-foot { font-size: 9px; color: #6b7280 !important; }
    .rpt-card { border-radius: 6px; border-color: #d9dce1; }
    .rpt-card-head h4 { font-size: 12px; }
    .rpt-card-head p { font-size: 10px; }

    .rpt-table { font-size: 10.5px; }
    .rpt-table th { background: #f1f2f4 !important; color: #374151; font-size: 9.5px; padding: 6px 8px; border-bottom: 1.5px solid #111827; }
    .rpt-table td { padding: 5px 8px; border-bottom: 1px solid #e5e7eb; }
    .rpt-table tbody tr:nth-child(even) td { background: #fafafb; }
    .rpt-table tr { break-inside: avoid; }
    .rpt-table thead { display: table-header-group; }

    .rpt-signoff { break-inside: avoid; }
}

/* Combined KPI grid: Net revenue hero + sales tiles + GoCart earnings tiles */
.rpt-kpis.rpt-kpis-combined { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
.rpt-kpi-contents { display: contents; }
.rpt-kpi-accent { border-color: #fcd9a8; background: #fffaf0; }
.rpt-kpi-accent .rpt-kpi-label, .rpt-kpi-accent .rpt-kpi-label i { color: #b45309; }
.rpt-kpi-accent .rpt-kpi-value { color: #b45309; }

@media (max-width: 1100px) {
    .rpt-kpis.rpt-kpis-combined { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rpt-kpis-combined .rpt-kpi-hero { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .rpt-kpis.rpt-kpis-combined { grid-template-columns: minmax(0, 1fr); }
}

@media print {
    .rpt-kpis.rpt-kpis-combined { grid-template-columns: minmax(0, 1.2fr) repeat(4, 1fr); }
    .rpt-kpis-combined .rpt-kpi-hero { grid-row: span 2; grid-column: auto; justify-content: center; }
    .rpt-kpis-combined .rpt-kpi-hero .rpt-kpi-value { font-size: 20px; }
    .rpt-kpi-accent { background: #fffaf0 !important; border-color: #f5c98a !important; }
    .rpt-grid + #earningsTables .rpt-card { break-inside: auto; }
}

/* Financial statement (gross → net → GoCart earnings) */
.rpt-statement-card { margin-bottom: 16px; }
.rpt-statement { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rpt-statement td { padding: 8px 12px; border-bottom: 1px solid #f1f2f4; color: #374151; }
.rpt-statement td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: #111827; font-weight: 600; width: 160px; }
.rpt-statement .st-note { color: #9ca3af; font-size: 12.5px; width: 140px; }
.rpt-statement .st-head td { padding: 14px 12px 6px; border-bottom: 1.5px solid #111827; font-size: 11.5px; font-weight: 800; color: #111827; text-transform: uppercase; letter-spacing: .08em; }
.rpt-statement .st-head:first-child td { padding-top: 4px; }
.rpt-statement .st-less td:first-child { padding-left: 28px; }
.rpt-statement .st-less td.num { color: #b91c1c; }
.rpt-statement .st-sub td { color: #6b7280; font-size: 12.5px; }
.rpt-statement .st-sub td:first-child { padding-left: 28px; }
.rpt-statement .st-sub td.num { color: #4b5563; font-weight: 500; }
.rpt-statement .st-total td, .rpt-statement .st-sub-total td { font-weight: 700; color: #111827; border-top: 1px solid #9ca3af; }
.rpt-statement .st-grand td { padding-top: 11px; padding-bottom: 11px; font-size: 14.5px; font-weight: 800; color: #111827; background: #fffaf0; border-top: 1.5px solid #111827; border-bottom: 3px double #111827; }
.rpt-statement .st-grand td.num { color: #b45309; }

@media (max-width: 640px) {
    .rpt-statement .st-note { display: none; }
    .rpt-statement td.num { width: auto; }
}

@media print {
    .rpt-statement { font-size: 10.5px; }
    .rpt-statement td { padding: 4px 8px; }
    .rpt-statement .st-head td { padding: 8px 8px 3px; font-size: 9.5px; }
    .rpt-statement .st-note { font-size: 9.5px; }
    .rpt-statement .st-grand td { font-size: 11.5px; padding: 6px 8px; }
    .rpt-statement-card { break-inside: avoid; margin-bottom: 10px; }
}

/* =====================================================
   PRODUCT APPROVAL — stat tiles, toolbar and seller table
===================================================== */
.pa-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.pa-stat { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid #eceef1; border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.pa-stat-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fdeaea; color: #d0001b; font-size: 17px; }
.pa-stat-icon-green { background: #e8f7ee; color: #15803d; }
.pa-stat-label { font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; }
.pa-stat-value { margin-top: 4px; font-size: 24px; font-weight: 800; color: #111827; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pa-stat-value small { font-size: 13px; font-weight: 600; color: #9ca3af; letter-spacing: 0; }
.pa-stat-alert { border-color: #fcd9a8; background: #fffaf0; }
.pa-stat-alert .pa-stat-icon { background: #fef3c7; color: #b45309; }

.pa-card { overflow: hidden; }
.pa-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid #eceef1; }
.pa-seg { display: inline-flex; gap: 4px; padding: 4px; background: #f3f4f6; border-radius: 10px; }
.pa-seg .chip { margin: 0; padding: 7px 14px; border: 0; border-radius: 7px; background: transparent; color: #4b5563; font-size: 13px; font-weight: 600; box-shadow: none; }
.pa-seg .chip:hover { background: rgba(255, 255, 255, .6); color: #111827; }
.pa-seg .chip.active { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.pa-seg .chip span { display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #e5e7eb; color: #374151; font-size: 11px; text-align: center; }
.pa-seg .chip.active span { background: #d0001b; color: #fff; }
.pa-search { position: relative; display: flex; align-items: center; flex: 0 1 320px; min-width: 220px; }
.pa-search i { position: absolute; left: 12px; color: #9ca3af; font-size: 13px; pointer-events: none; }
.pa-search input { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb; font: inherit; font-size: 13px; color: #111827; }
.pa-search input:focus { outline: none; border-color: #d0001b; background: #fff; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }

.pa-table { margin: 0; }
.pa-table > thead th { padding: 11px 20px; background: #f9fafb; border-bottom: 1px solid #eceef1; font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; }
.pa-table > tbody > tr[data-filter-row] > td { padding: 14px 20px; border-bottom: 1px solid #f1f2f4; vertical-align: middle; }
.pa-table > tbody > tr[data-filter-row]:hover > td { background: #fafbfc; }
.pa-table .pa-num { text-align: center; }
.pa-table .pa-actions-col { text-align: right; }
.pa-table .pa-actions-col .approval-actions { justify-content: flex-end; flex-wrap: nowrap; }
.pa-shop { display: flex; align-items: center; gap: 12px; }
.pa-avatar { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, #d0001b, #8f0013); color: #fff; font-weight: 800; font-size: 14px; }
.pa-shop-name { font-size: 14px; font-weight: 700; color: #111827; }
.pa-owner { font-size: 13.5px; font-weight: 600; color: #374151; }
.pa-muted { margin-top: 2px; font-size: 12px; color: #9ca3af; }
.pa-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #f3f4f6; color: #374151; font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.pa-count { display: inline-block; min-width: 32px; padding: 3px 8px; border-radius: 8px; background: #f3f4f6; color: #111827; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pa-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pa-status-pending { background: #fef3c7; color: #b45309; }
.pa-status-pending i { font-size: 7px; }
.pa-status-clear { background: #ecfdf3; color: #15803d; }

@media (max-width: 900px) {
    .pa-stats { grid-template-columns: minmax(0, 1fr); }
    .pa-search { flex: 1 1 100%; }
}

/* =====================================================
   LOGISTICS — shares the Product Approval (.pa-*) look
===================================================== */
.pa-stats.pa-stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pa-stats-5 .pa-stat { padding: 16px; gap: 12px; }
.pa-stats-5 .pa-stat-icon { width: 40px; height: 40px; font-size: 15px; }
.pa-stats-5 .pa-stat-label { font-size: 11px; }
.pa-stats-5 .pa-stat-value { font-size: 21px; }

.logi-tabs { margin-bottom: 16px; }

.logi-hint { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 20px; background: #f9fafb; border-bottom: 1px solid #eceef1; font-size: 12.5px; line-height: 1.5; color: #6b7280; }
.logi-hint i { margin-top: 3px; color: #9ca3af; font-size: 12px; }

.logi-tools { display: flex; align-items: center; gap: 8px; flex: 0 1 380px; min-width: 220px; }
.logi-tools .pa-search { flex: 1 1 auto; min-width: 0; }
.logi-archive-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; width: auto; height: 38px; padding: 0 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #374151; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.logi-archive-btn:hover { border-color: #d0001b; color: #d0001b; }

@media (max-width: 1200px) {
    .pa-stats.pa-stats-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .pa-stats.pa-stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .logi-tools { flex: 1 1 100%; }
    .logi-archive-btn span:not(.sc-archive-count) { display: none; }
}

/* =====================================================
   COMPLAINTS — shares the Product Approval (.pa-*) look
===================================================== */
.cp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eceef1; }
.cp-card-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; color: #111827; }
.cp-card-head p { margin: 3px 0 0; font-size: 12.5px; color: #6b7280; }
.cp-count { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #d0001b; color: #fff; font-size: 11.5px; font-weight: 700; text-align: center; }
.cp-count-muted { background: #e5e7eb; color: #374151; }

.cp-empty { display: flex; align-items: center; gap: 14px; padding: 28px 20px; }
.cp-empty-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #ecfdf3; color: #15803d; font-size: 18px; }
.cp-empty strong { font-size: 14px; color: #111827; }
.cp-empty p { margin: 2px 0 0; font-size: 13px; color: #6b7280; }

.cp-avatar-neutral { background: #e5e7eb; color: #374151; }
.cp-role { display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 4px; background: #f3f4f6; color: #4b5563; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cp-product { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; color: #d0001b; text-decoration: none; }
.cp-product:hover { text-decoration: underline; }
.cp-reason { max-width: 320px; font-size: 13px; color: #374151; line-height: 1.45; }
.cp-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-table .pa-muted { white-space: nowrap; }

.cp-status-info { background: #eff6ff; color: #1d4ed8; }
.cp-status-info i { font-size: 7px; }
.cp-status-valid { background: #ecfdf3; color: #15803d; }
.cp-status-muted { background: #f3f4f6; color: #4b5563; }

/* =====================================================
   REFUNDS OVERVIEW — polish to match the other admin tabs
   (stat tiles, one toolbar bar, card heads, return stepper)
===================================================== */
#tab-complaints .rf-kpis { gap: 14px; margin-bottom: 18px; }
#tab-complaints .rf-kpi { position: relative; min-height: 112px; padding: 16px 64px 16px 18px; border-color: #eceef1; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: border-color .15s, box-shadow .15s, transform .15s; }
#tab-complaints .rf-kpi:hover { border-color: #f3b8bf; box-shadow: 0 6px 16px rgba(16, 24, 40, .07); transform: translateY(-1px); }
#tab-complaints .rf-kpi span { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; }
#tab-complaints .rf-kpi span i { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: #fdeaea; color: #d0001b; font-size: 15px; }
#tab-complaints .rf-kpi strong { margin-top: 10px; font-size: 24px; letter-spacing: -.02em; line-height: 1.1; }
#tab-complaints .rf-kpi em { margin-top: 6px; font-size: 12px; }
#tab-complaints .rf-kpi.is-alert { background: #fffaf0; border-color: #fcd9a8; }
#tab-complaints .rf-kpi.is-alert strong { color: #b45309; }
#tab-complaints .rf-kpi.is-alert span i { background: #fef3c7; color: #b45309; }
#tab-complaints .rf-kpi.is-good span i { background: #dcfce7; color: #15803d; }
#tab-complaints .rf-kpi.is-warn span i { background: #fef3c7; color: #b45309; }

#tab-complaints .rf-toolbar { margin-bottom: 18px; padding: 10px; border: 1px solid #eceef1; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
#tab-complaints .rf-tabs button { padding: 8px 14px; font-size: 13px; font-weight: 600; color: #4b5563; }
#tab-complaints .rf-tabs button:hover { color: #111827; }
#tab-complaints .rf-tabs button.is-active { color: #111827; }
#tab-complaints .rf-search { flex: 0 1 320px; min-width: 240px; background: #f9fafb; }
#tab-complaints .rf-search:focus-within { border-color: #d0001b; background: #fff; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }

#tab-complaints > .admin-card { overflow: hidden; border-color: #eceef1; }
#tab-complaints > .admin-card > .admin-card-head { padding: 16px 20px; border-bottom: 1px solid #eceef1; background: #fff; }
#tab-complaints > .admin-card > .admin-card-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 800; color: #111827; }
#tab-complaints > .admin-card > .admin-card-head h3 i { width: 30px; height: 30px; margin: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: #fdeaea; color: #d0001b; font-size: 13px; }
#tab-complaints .rt-head-note { padding: 4px 10px; border-radius: 999px; background: #f3f4f6; font-size: 12px; color: #4b5563; }
#tab-complaints .admin-card-body { padding: 16px 20px; }
#tab-complaints .rt-empty { margin: 16px 20px !important; padding: 22px; border: 1px dashed #e5e7eb; border-radius: 12px; background: #fafbfc; color: #6b7280; }
#tab-complaints .rt-empty i { color: #16a34a; }

/* Return card + stepper */
#tab-complaints .rt-row { padding: 18px 20px; border-color: #eceef1; gap: 24px; transition: box-shadow .15s; }
#tab-complaints .rt-row:hover { box-shadow: 0 6px 18px rgba(16, 24, 40, .07); }
#tab-complaints .rt-row:last-child { margin-bottom: 0; }
#tab-complaints .rt-who { margin-bottom: 16px; }
#tab-complaints .rt-who strong { font-size: 15px; font-weight: 800; }
#tab-complaints .rt-mono { padding: 1px 6px; border-radius: 5px; background: #f3f4f6; color: #374151; font-size: 11.5px; }

#tab-complaints .rt-steps { flex-wrap: nowrap; gap: 0; margin: 0 0 14px; overflow-x: auto; padding-bottom: 2px; }
#tab-complaints .rt-steps li { position: relative; flex: 1 1 0; min-width: 92px; flex-direction: column; align-items: center; gap: 6px; padding: 0 4px; border-radius: 0; background: none; text-align: center; font-size: 11.5px; font-weight: 600; color: #9ca3af; line-height: 1.3; }
#tab-complaints .rt-steps li::before { content: ""; position: absolute; top: 9px; left: calc(-50% + 12px); right: calc(50% + 12px); height: 2px; background: #e5e7eb; }
#tab-complaints .rt-steps li:first-child::before { display: none; }
#tab-complaints .rt-steps li i { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #d1d5db; font-size: 20px; }
#tab-complaints .rt-steps li em { display: block; font-size: 10.5px; font-weight: 500; color: #9ca3af; }
#tab-complaints .rt-steps li.is-done { background: none; color: #166534; }
#tab-complaints .rt-steps li.is-done::before { background: #16a34a; }
#tab-complaints .rt-steps li.is-done i { color: #16a34a; }

#tab-complaints .rt-main > .rt-meta { display: block; padding: 8px 12px; border-radius: 10px; background: #f9fafb; border: 1px solid #f1f2f4; color: #4b5563; }
#tab-complaints .rt-main > .rt-meta strong { color: #111827; }

#tab-complaints .rt-pay { align-self: stretch; align-content: center; padding-left: 20px; border-left: 1px solid #f1f2f4; }
#tab-complaints .rt-amount { font-size: 22px; letter-spacing: -.02em; }
#tab-complaints .rt-pay .badge-pill { margin-top: 6px; }

/* History table */
#tab-complaints .admin-table-wrap .admin-table > thead th { padding: 11px 20px; background: #f9fafb; border-bottom: 1px solid #eceef1; font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; }
#tab-complaints .admin-table-wrap .admin-table > tbody > tr > td { padding: 14px 20px; border-bottom: 1px solid #f1f2f4; }
#tab-complaints .admin-table-wrap .admin-table > tbody > tr:hover > td { background: #fafbfc; }
#tab-complaints .admin-table-wrap.admin-card-body { padding: 0; }

@media (max-width: 1200px) {
    #tab-complaints .rf-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    #tab-complaints .rf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #tab-complaints .rf-search { flex: 1 1 100%; }
    #tab-complaints .rt-pay { padding-left: 0; border-left: 0; justify-items: start; text-align: left; }
}

/* Admin Edit Profile — section labels inside the modal */
.acct-edit-subhead { margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid #f1f2f4; font-size: 11.5px; font-weight: 800; color: #6b7280; text-transform: uppercase; letter-spacing: .08em; }
#adminProfilePanel .acct-edit-box { max-height: 92vh; overflow-y: auto; }
#adminProfilePanel .avatar-upload-row { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
#adminProfilePanel .avatar-upload-preview { width: 64px; height: 64px; border-radius: 50%; background: #fdeaea; color: #d0001b; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; overflow: hidden; border: 1px solid #eee; }
#adminProfilePanel .avatar-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
#adminProfilePanel .avatar-upload-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #d0001b; border: 1px solid #d0001b; padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: .15s; }
#adminProfilePanel .avatar-upload-btn:hover { background: #d0001b; color: #fff; }
#adminProfilePanel .avatar-upload-hint { font-size: 11px; color: #999; margin: 6px 0 0; }

/* =====================================================
   SELLER PAYOUTS — shares the .pa-* look
===================================================== */
.pa-stats.pa-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pa-stats-4 .pa-stat-label { font-size: 11px; }
.pa-stats-4 .pa-stat-value { font-size: 22px; }
.po-stat-good { border-color: #bbf7d0; background: #f6fef9; }
.po-stat-good .pa-stat-value { color: #15803d; }
.po-hint { margin: 0 0 16px; border: 1px solid #eceef1; border-radius: 12px; }
#tab-payouts .division-tabs { margin-bottom: 16px; }

#tab-payouts .po-toolbar { margin-bottom: 16px; padding: 10px; border: 1px solid #eceef1; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
#tab-payouts .po-filters { gap: 4px; padding: 4px; border-radius: 10px; background: #f3f4f6; }
#tab-payouts .po-filters a { padding: 7px 12px; border: 0; border-radius: 7px; background: transparent; font-size: 12.5px; font-weight: 600; color: #4b5563; }
#tab-payouts .po-filters a:hover { color: #111827; background: rgba(255, 255, 255, .6); }
#tab-payouts .po-filters a b { background: #e5e7eb; color: #374151; }
#tab-payouts .po-filters a.is-active { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
#tab-payouts .po-filters a.is-active b { background: #d0001b; color: #fff; }

.po-table > tbody > tr > td { padding: 14px 20px; border-bottom: 1px solid #f1f2f4; vertical-align: middle; }
.po-table > tbody > tr:hover > td { background: #fafbfc; }
.po-table .cell-name { font-weight: 800; color: #111827; }
.po-table td strong { font-variant-numeric: tabular-nums; }
.po-table .pa-actions-col { text-align: right; white-space: nowrap; }
.po-table .pa-actions-col form { display: inline-block; }
.po-table button[disabled] { opacity: .55; cursor: not-allowed; }

@media (max-width: 1100px) {
    .pa-stats.pa-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .pa-stats.pa-stats-4 { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================
   VOUCHERS — create form + list (shares the .pa-* look)
===================================================== */
.vc-body { padding: 20px; }
.vc-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 4px; }
.vc-type { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.vc-type:hover { border-color: #f3b8bf; }
.vc-type input { position: absolute; opacity: 0; pointer-events: none; }
.vc-type-icon { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #f3f4f6; color: #6b7280; font-size: 16px; transition: .15s; }
.vc-type strong { display: block; font-size: 14px; color: #111827; }
.vc-type small { display: block; margin-top: 2px; font-size: 12px; color: #6b7280; }
.vc-type:has(input:checked) { border-color: #d0001b; background: #fff8f8; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.vc-type:has(input:checked) .vc-type-icon { background: #d0001b; color: #fff; }
.vc-type:has(input:focus-visible) { outline: 2px solid #d0001b; outline-offset: 2px; }

.vc-subhead { margin: 20px 0 10px; font-size: 11.5px; font-weight: 800; color: #6b7280; text-transform: uppercase; letter-spacing: .08em; }
.vc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.vc-grid .admin-form-group { margin: 0; min-width: 0; }
.vc-grid .vc-span-2 { grid-column: span 2; }
.vc-grid label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vc-grid label .optional { font-size: 11px; font-weight: 500; color: #9ca3af; }
.vc-code-input { text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; }
.vc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #f1f2f4; }
.vc-actions .btn-sm { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; font-size: 13px; }

.vc-code { display: inline-block; padding: 5px 10px; border: 1px dashed #d0001b; border-radius: 8px; background: #fff8f8; color: #b30019; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.vc-row-icon { width: 36px; height: 36px; font-size: 14px; background: #fdeaea; color: #d0001b; }
.vc-row-icon-ship { background: #eff6ff; color: #1d4ed8; }
.vc-usage { width: 110px; height: 6px; margin-top: 6px; border-radius: 999px; background: #f3f4f6; overflow: hidden; }
.vc-usage span { display: block; height: 100%; border-radius: 999px; background: #d0001b; }

@media (max-width: 900px) {
    .vc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .vc-types, .vc-grid { grid-template-columns: minmax(0, 1fr); }
    .vc-grid .vc-span-2 { grid-column: auto; }
}

/* GoCoins Vouchers card (admin Vouchers tab) */
.gc-coin { width: 20px; height: 20px; object-fit: contain; }
.gc-form-wrap { border-bottom: 1px solid #eceef1; background: #fafbfc; }
.gc-form { display: grid; grid-template-columns: 1.1fr 1.6fr .9fr .9fr .9fr .8fr auto; gap: 12px; align-items: end; }
.gc-form .admin-form-group { margin: 0; min-width: 0; }
.gc-form label { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; white-space: nowrap; }
.gc-form label .optional { font-size: 11px; font-weight: 500; color: #9ca3af; }
.gc-add { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; white-space: nowrap; }
.gc-cost { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gc-cost img { width: 16px; height: 16px; object-fit: contain; }

@media (max-width: 1200px) {
    .gc-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gc-form .gc-title { grid-column: span 2; }
}
@media (max-width: 560px) {
    .gc-form { grid-template-columns: minmax(0, 1fr); }
    .gc-form .gc-title { grid-column: auto; }
}

/* Vouchers tab — Sitewide / GoCoins switch, GoCoins catalog + modal */
.vc-view-tabs { margin-bottom: 16px; }
.vc-tab-count { display: inline-block; min-width: 20px; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, .08); font-size: 11px; font-weight: 700; text-align: center; }
.division-tab.active .vc-tab-count { background: rgba(255, 255, 255, .25); }
.vc-head-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; font-size: 13px; white-space: nowrap; }

.gc-stat-gold { background: #fef3c7; }
.gc-stat-gold img { width: 22px; height: 22px; object-fit: contain; }
.gc-stat-text { font-size: 16px !important; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

.gc-table .gc-row-off td { opacity: .55; }
.gc-table .gc-row-off td:last-child { opacity: 1; }
.gc-toggle { min-width: 78px; justify-content: center; }
.gc-icon-btn { width: 34px; height: 32px; border: 1px solid #f3c5cb; border-radius: 8px; background: #fff; color: #d0001b; cursor: pointer; transition: .15s; }
.gc-icon-btn:hover { background: #d0001b; border-color: #d0001b; color: #fff; }

.gc-modal { width: 620px; max-width: 94vw; max-height: 92vh; overflow-y: auto; }
.gc-modal-badge { background: #fef3c7; }
.gc-modal-badge img { width: 26px; height: 26px; object-fit: contain; }
.gc-types { margin: 18px 0 16px; }
.gc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gc-tip { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 9px 12px; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: 12.5px; }
@media (max-width: 560px) {
    .gc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* GoCoins voucher modal — Edit mode */
.gc-edit-btn { display: inline-flex; align-items: center; gap: 6px; }
.gc-preview { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 12px 14px; border: 1px solid #fde68a; border-radius: 12px; background: linear-gradient(115deg, #fffbeb 0%, #fff 100%); }
.gc-preview-icon { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fdeaea; color: #d0001b; font-size: 16px; }
.gc-preview-icon.is-ship { background: #eff6ff; color: #1d4ed8; }
.gc-preview-body { flex: 1; min-width: 0; }
.gc-preview-body strong { display: block; font-size: 14px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-preview-body span { display: block; margin-top: 2px; font-size: 12px; color: #6b7280; }
.gc-edit-note { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: #eff6ff; color: #1e40af; font-size: 12.5px; line-height: 1.45; }
.gc-edit-note[hidden] { display: none; }
.gc-edit-note i { margin-top: 2px; }
.gc-modal .profile-update-error { margin-top: 12px; }
.vc-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vc-head-actions a.vc-head-btn { text-decoration: none; }

/* GoCoins badges in the admin (same colours as public/css/gocoins.css) */
.gc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #d0001b; color: #fff; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.gc-badge-value { background: linear-gradient(135deg, #f4d99a, #d9a441 45%, #b8873a 100%); color: #4a2e05; }
.gc-badge-mega { background: #f4d99a; color: #4a2e05; }
.gc-badge-new { background: #2563eb; color: #fff; }
.gc-badge-hot { background: linear-gradient(135deg, #f97316, #dc2626); color: #fff; }
.gc-badge-limited { background: #111827; color: #f4d99a; }
.gc-badge-none { background: #f3f4f6; color: #6b7280; }

.gc-badge-group { margin-top: 16px; }
.gc-badge-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.gc-badge-opt { cursor: pointer; }
.gc-badge-opt input { position: absolute; opacity: 0; pointer-events: none; }
.gc-badge-opt .gc-badge { padding: 7px 12px; font-size: 11px; opacity: .5; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .15s, outline-color .15s; }
.gc-badge-opt:hover .gc-badge { opacity: .85; }
.gc-badge-opt input:checked + .gc-badge { opacity: 1; outline-color: #111827; }
.gc-badge-opt input:focus-visible + .gc-badge { outline-color: #d0001b; }
.gc-badge-hint { display: block; margin-top: 8px; font-size: 11.5px; color: #9ca3af; }

.gc-preview { position: relative; }
.gc-preview-badge { position: absolute; top: -10px; left: 12px; padding: 3px 9px; font-size: 9.5px; }
.gc-preview-badge[hidden] { display: none; }
.gc-preview.is-popular { border-color: #d0001b; box-shadow: 0 0 0 1px #d0001b; }
.gc-preview.is-mega { border-color: transparent; background: linear-gradient(135deg, #1c0707 0%, #300b0b 55%, #120404 100%); }
.gc-preview.is-mega .gc-preview-body strong { color: #f4d99a; }
.gc-preview.is-mega .gc-preview-body span { color: #d6c3a1; }

/* =====================================================
   LOGIN LOGS — shares the .pa-* look
===================================================== */
.lg-head-icon { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: #fdeaea; color: #d0001b; font-size: 13px; }
.lg-print-card .cp-card-head { flex-wrap: wrap; border-bottom: 0; }
.lg-print-form { display: flex; align-items: center; gap: 8px; flex: 0 1 560px; min-width: 260px; }
.lg-select { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb; font: inherit; font-size: 13px; color: #111827; }
.lg-select:focus { outline: none; border-color: #d0001b; background: #fff; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.lg-print-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; white-space: nowrap; font-size: 13px; }
.lg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lg-device { display: flex; align-items: center; gap: 10px; }
.lg-device > i { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #f3f4f6; color: #4b5563; font-size: 13px; }
.lg-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; }
.lg-table .pa-status i { font-size: 7px; }
.lg-online i { animation: lg-pulse 1.6s ease-in-out infinite; }
@keyframes lg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .lg-online i { animation: none; } }
@media (max-width: 760px) {
    .lg-print-form { flex: 1 1 100%; flex-wrap: wrap; }
    .lg-print-btn { width: 100%; justify-content: center; }
}

/* Seller Store & Account — one page: store profile, then account & security */
#tab-account .acct-pane + .acct-pane { margin-top: 30px; padding-top: 26px; border-top: 1px solid #e5e7eb; }
.sa-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sa-section-head > div { flex: 1; min-width: 0; }
.sa-section-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: #111827; letter-spacing: -.01em; }
.sa-section-head p { margin: 3px 0 0; font-size: 13px; color: #6b7280; }
.sa-section-icon { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fdeaea; color: #d0001b; font-size: 15px; }
html[data-theme="dark"] .sa-section-head h3 { color: #f3f4f6; }
html[data-theme="dark"] #tab-account .acct-pane + .acct-pane { border-top-color: #2a2f3a; }
@media (max-width: 640px) {
    .sa-section-head { flex-wrap: wrap; }
    .sa-section-head .acct-edit-btn { width: 100%; justify-content: center; }
}

/* =====================================================
   SELLER FLASH DEALS tab
===================================================== */
.sfd-pill { background: #fff1f2; color: #b30019; }
.sfd-manage-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.sfd-layout { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); }
.sfd-durations { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.sfd-duration { padding: 5px 11px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; color: #4b5563; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.sfd-duration:hover, .sfd-duration.is-active { border-color: #d0001b; color: #d0001b; background: #fff8f8; }
.sfd-picker-field { display: flex; flex-direction: column; gap: 8px; }
.sfd-search { flex: none; min-width: 0; }
.sfd-picker { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.sfd-pick { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #eceef1; border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.sfd-pick[hidden] { display: none; }
.sfd-pick:hover { border-color: #f3b8bf; }
.sfd-pick.is-picked { border-color: #d0001b; background: #fff8f8; }
.sfd-pick.is-busy { opacity: .6; }
.sfd-pick input { width: 16px; height: 16px; accent-color: #d0001b; flex-shrink: 0; }
.sfd-pick-thumb { width: 38px; height: 38px; border-radius: 8px; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #f3f4f6; color: #9ca3af; }
.sfd-pick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sfd-pick-body { min-width: 0; }
.sfd-pick-body strong { display: block; font-size: 13px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfd-pick-body small { font-size: 12px; color: #6b7280; }
.sfd-pick-now { color: #b30019; font-weight: 700; }
.sfd-pick-busy { color: #b45309; font-weight: 600; }
.sfd-pick-tools { display: flex; gap: 14px; }
.sfd-link { padding: 0; border: 0; background: none; color: #d0001b; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.sfd-submit { width: 100%; justify-content: center; margin-top: 4px; }

.sfd-deal { padding: 14px; margin-bottom: 10px; border: 1px solid #eceef1; border-radius: 12px; background: #fff; }
.sfd-deal.is-ongoing { border-color: #fecdd3; background: linear-gradient(115deg, #fff5f5 0%, #fff 60%); box-shadow: inset 3px 0 0 #d0001b; }
.sfd-deal.is-ended { opacity: .7; }
.sfd-deal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sfd-deal-title strong { display: block; font-size: 14.5px; color: #111827; }
.sfd-deal-title strong i { color: #d0001b; }
.sfd-deal-title > span { display: block; margin-top: 4px; font-size: 12.5px; color: #6b7280; }
.sfd-off { color: #b30019; }
.sfd-timer { text-align: right; flex-shrink: 0; }
.sfd-timer small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; }
.sfd-timer b { font-size: 18px; color: #111827; font-variant-numeric: tabular-nums; }
.sfd-deal.is-ongoing .sfd-timer b { color: #b30019; }
.sfd-deal-products { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sfd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #f3f4f6; font-size: 12px; color: #374151; }
.sfd-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.sfd-chip s { color: #9ca3af; }
.sfd-chip b { color: #b30019; }
.sfd-deal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.sfd-deal-actions a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
@media (max-width: 900px) { .sfd-layout { grid-template-columns: minmax(0, 1fr); } }

/* Flash deal form — window fields stacked so the date-time pickers fit the card */
.sfd-layout { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); }
#flashDealForm .ss-field { min-width: 0; }
#flashDealForm input, #flashDealForm select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
#flashDealForm .sfd-pick input { width: 16px; }
.sfd-window { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 14px; padding: 12px; border: 1px solid #eceef1; border-radius: 12px; background: #fafbfc; }
.sfd-window .ss-field { margin: 0; }
.sfd-length { display: flex; flex-direction: column; gap: 6px; }
.sfd-durations { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 4px; border-radius: 10px; background: #eef0f3; }
.sfd-duration { padding: 7px 0; border: 0; border-radius: 7px; background: transparent; color: #4b5563; font-size: 12.5px; font-weight: 700; text-align: center; }
.sfd-duration:hover { background: rgba(255, 255, 255, .7); color: #111827; border: 0; }
.sfd-duration.is-active { background: #fff; color: #d0001b; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); border: 0; }
.po-cover { color: #b45309 !important; font-weight: 600; }
.po-cover i { margin-right: 3px; }
.cp-center { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: #eff6ff; color: #1e40af; font-size: 11.5px; font-weight: 600; }
.cp-status-fwd { background: #eef2ff; color: #4338ca; }
.cr-outstanding { border-color: #fde68a; background: linear-gradient(115deg, #fffbeb 0%, #fff 55%); }
.cr-outstanding .ops-chip { text-decoration: none; white-space: nowrap; }
.cr-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* =====================================================
   RIDER DELIVERY QUEUE — nothing in a job card may spill
   into the next column (forms, codes, long addresses)
===================================================== */
@media (max-width: 1500px) { .cq-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cq-board { grid-template-columns: minmax(0, 1fr); } }
.cq-col, .cq-list, .cq-card { min-width: 0; }
.cq-card { overflow: hidden; overflow-wrap: anywhere; }
.cq-card *, .cq-card *::before, .cq-card *::after { box-sizing: border-box; }
.cq-card input, .cq-card select, .cq-card textarea, .cq-card .rate-upload-box { width: 100%; max-width: 100%; min-width: 0; }
.cq-card select { height: 38px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; font: inherit; font-size: 13px; color: #111827; text-overflow: ellipsis; }
.cq-card .admin-form-group { margin-bottom: 10px; }
.cq-card .admin-form-group label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: #374151; }
.cq-card .admin-form-group input { height: 38px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 9px; font: inherit; font-size: 13px; }
.cq-card .admin-form-group small { display: block; margin-top: 4px; font-size: 11.5px; color: #6b7280; line-height: 1.4; }
.cq-otp input { letter-spacing: .25em; font-size: 16px; }
.cq-card .rate-upload-box { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px; text-align: center; font-size: 12.5px; }
.cq-card .media-preview-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cq-card .media-preview-list img, .cq-card .media-preview-list video { max-width: 100%; height: auto; max-height: 120px; border-radius: 8px; }
.cq-card-top { flex-wrap: wrap; row-gap: 6px; }
.cq-card-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-fail small { font-size: 11.5px; color: #6b7280; line-height: 1.4; }
.cq-head > div:first-child { min-width: 0; flex: 1 1 260px; }
.cq-summary { flex: 0 1 auto; }
@media (max-width: 640px) {
    .cq-summary { width: 100%; }
    .cq-summary > * { flex: 1 1 100%; }
    .cq-online button { margin-left: auto; }
}
.cr-outstanding button.ops-chip { cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; gap: 7px; flex-shrink: 0; }
.cr-outstanding button.ops-chip i { font-size: 13px; color: #d0001b; }
.cr-modal { width: 560px; max-width: 94vw; max-height: 88vh; overflow-y: auto; }
.cr-modal h2 { display: flex; align-items: center; gap: 8px; }
.cr-modal h2 i { color: #d0001b; }
.cr-modal-days { display: grid; gap: 12px; margin: 14px 0; }
.cr-modal-day { border: 1px solid #eceef1; border-radius: 12px; overflow: hidden; }
.cr-modal-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: #fffbeb; border-bottom: 1px solid #fde68a; }
.cr-modal-day-head strong { font-size: 13.5px; color: #111827; }
.cr-modal-day-head span { font-size: 12px; color: #92400e; font-weight: 600; }
.cr-modal-day ul { list-style: none; margin: 0; padding: 0; }
.cr-modal-day li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid #f3f4f6; font-size: 13px; }
.cr-modal-day li:first-child { border-top: 0; }
.cr-modal-order { font-weight: 800; color: #111827; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; }
.cr-modal-meta { min-width: 0; color: #6b7280; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-modal-day li strong { color: #b45309; font-variant-numeric: tabular-nums; }
.cr-modal-filter { display: inline-flex; align-items: center; gap: 7px; width: 100%; justify-content: center; text-decoration: none; }
.cp-evidence-in, .cp-evidence-wait { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.cp-evidence-in { background: #ecfdf3; color: #15803d; }
.cp-evidence-wait { background: #fffbeb; color: #b45309; }
.cp-decided { margin-bottom: 20px; border-color: #c7d2fe; }
.cp-decided .cp-card-head h3 i { color: #4338ca; }
.cp-why { white-space: normal !important; max-width: 280px; }

/* Transfer recommendation under each parcel (Products to Transfer) */
.tr-rec { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; font-size: 12px; color: #78350f; line-height: 1.45; max-width: 520px; }
.tr-rec > i { margin-top: 2px; color: #d97706; }
.tr-rec strong { display: block; color: #111827; font-size: 12.5px; }
.tr-rec-use { margin-left: auto; flex-shrink: 0; padding: 4px 10px; border: 1px solid #d97706; border-radius: 7px; background: #fff; color: #b45309; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.tr-rec-use:hover { background: #d97706; color: #fff; }
.tr-rec.is-none { background: #f9fafb; border-color: #eceef1; color: #6b7280; }
.tr-rec.is-none > i { color: #9ca3af; }

/* Products / Returns to Transfer — compact rows, one-line send form */
.tx-card .admin-table-wrap { overflow-x: auto; }
.tx-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid #f0f1f3; }
.tx-head-icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: #fdecee; color: #d0001b; font-size: 17px; }
.tx-head-icon.is-return { background: #eef2ff; color: #4f46e5; }
.tx-head-text h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15.5px; font-weight: 700; color: #111827; }
.tx-head-text p { margin: 2px 0 0; font-size: 12.5px; color: #6b7280; }
.tx-count { min-width: 22px; padding: 1px 8px; border-radius: 999px; background: #f3f4f6; color: #374151; font-size: 11.5px; font-weight: 700; text-align: center; }

.tx-table { width: 100%; }
.tx-table > thead th { padding: 11px 16px; background: #f9fafb; border-bottom: 1px solid #eceef1; font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; text-align: left; white-space: nowrap; }
.tx-table > tbody > tr > td { padding: 14px 16px; border-bottom: 1px solid #f1f2f4; vertical-align: middle; }
.tx-table > tbody > tr:last-child > td { border-bottom: 0; }
.tx-table > tbody > tr:hover > td { background: #fcfcfd; }
.tx-col-send { width: 42%; min-width: 300px; }

.tx-track { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; color: #111827; white-space: nowrap; }
.tx-primary { font-size: 13px; font-weight: 600; color: #111827; }
.tx-meta { margin-top: 3px; font-size: 12px; color: #6b7280; white-space: nowrap; }
.tx-meta i { margin-right: 3px; font-size: 11px; color: #9ca3af; }
.tx-hub { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: #f3f4f6; color: #374151; font-size: 12px; font-weight: 600; line-height: 1.35; }
.tx-hub i { flex-shrink: 0; font-size: 11px; color: #9ca3af; }
.tx-hub.is-none { background: #fff7ed; color: #9a3412; }

.tx-send-row { display: flex; gap: 8px; align-items: stretch; }
.tx-select { position: relative; flex: 1; min-width: 0; }
.tx-select select { width: 100%; height: 38px; padding: 0 34px 0 12px; border: 1px solid #d9dce1; border-radius: 9px; background: #fff; color: #111827; font: inherit; font-size: 13px; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; transition: border-color .15s, box-shadow .15s; }
.tx-select select:hover { border-color: #b8bdc6; }
.tx-select select:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .12); }
.tx-select > i { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 11px; color: #6b7280; pointer-events: none; }
.tx-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: #1f9254; color: #fff; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .15s; }
.tx-btn:hover { background: #187a44; }
.tx-btn i { font-size: 11px; }

.tx-rec { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 12px; color: #6b7280; line-height: 1.4; }
.tx-rec > i { flex-shrink: 0; font-size: 11px; color: #d97706; }
.tx-rec-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-rec-text strong { color: #b45309; font-weight: 700; }
.tx-rec-picked { display: none; color: #1f9254; font-weight: 600; }
.tx-rec-name { color: #374151; font-weight: 600; }
.tx-rec-name::before, .tx-rec-why::before { content: " · "; color: #c4c8cf; }
.tx-rec-use { margin-left: auto; flex-shrink: 0; padding: 0; border: 0; background: none; color: #b45309; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.tx-rec-use:hover { text-decoration: underline; }
/* Already chosen in the dropdown: no need to repeat the name or offer "Use". */
.tx-rec.is-picked .tx-rec-picked { display: inline; }
.tx-rec.is-picked .tx-rec-name, .tx-rec.is-picked .tx-rec-use { display: none; }
.tx-rec.is-none > i { color: #9ca3af; }
.tx-rec.is-none .tx-rec-why::before { content: none; }

/* Transfers — filter buttons and section stack */
.tx-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tx-tab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #374151; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, background .15s, box-shadow .15s; }
.tx-tab i { font-size: 13px; color: #9ca3af; }
.tx-tab:hover { border-color: #c9ccd2; color: #111827; }
.tx-tab.is-active { border-color: #111827; background: #111827; color: #fff; box-shadow: 0 2px 6px rgba(17, 24, 39, .18); }
.tx-tab.is-active i { color: #fff; }
.tx-tab-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #f3f4f6; color: #374151; font-size: 11.5px; font-weight: 700; text-align: center; }
.tx-tab.is-active .tx-tab-count { background: rgba(255, 255, 255, .18); color: #fff; }
.tx-tab-count.is-alert { background: #d0001b; color: #fff; }
.tx-sections { display: flex; flex-direction: column; gap: 18px; }
.tx-sections > .admin-card { margin: 0 !important; }
.tx-sections > [hidden] { display: none; }
.tx-batches[hidden] { display: none; }
.tx-empty { display: flex; align-items: center; gap: 10px; margin: 16px 22px 20px; padding: 14px 16px; border: 1px dashed #e5e7eb; border-radius: 12px; background: #fafafb; color: #6b7280; font-size: 13px; }
.tx-empty i { color: #9ca3af; }

/* My Batches — compact rows; a batch not sent yet stands out */
.tx-head-icon.is-batch { background: #ecfdf3; color: #1f9254; }
.tx-head-text p strong { color: #111827; }
.tx-batches { display: flex; flex-direction: column; gap: 10px; padding: 16px 22px 20px; }
.tx-batch { padding: 14px 16px; border: 1px solid #e8eaee; border-radius: 12px; background: #fff; }
.tx-batch.is-open { border-color: #fcd9a8; background: #fffaf2; box-shadow: inset 4px 0 0 #f59e0b; }
.tx-batch-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tx-batch-id { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.tx-batch-route { font-size: 13.5px; font-weight: 600; color: #111827; }
.tx-batch-route i { margin-right: 4px; font-size: 12px; color: #9ca3af; }
.tx-batch-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tx-batch-meta .tx-meta { margin-top: 0; }
.tx-batch-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tx-batch-actions form { margin: 0; }

.tx-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #f3f4f6; color: #374151; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.tx-status.is-open { background: #fef3c7; color: #92400e; }
.tx-status.is-requested { background: #e0e7ff; color: #3730a3; }
.tx-status.is-rider_assigned, .tx-status.is-accepted { background: #e0f2fe; color: #075985; }
.tx-status.is-dispatched { background: #dcfce7; color: #166534; }

.tx-btn.is-send { background: #d0001b; }
.tx-btn.is-send:hover { background: #a80016; }
.tx-btn:disabled { background: #d1d5db; cursor: not-allowed; }
.tx-btn-ghost { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; color: #9ca3af; font-size: 14px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.tx-btn-ghost:hover { border-color: #fecaca; background: #fef2f2; color: #d0001b; }

.tx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; color: #374151; }
.tx-chip:not(:has(form)) { padding-right: 10px; }
.tx-chip.is-return > i { font-size: 10px; color: #4f46e5; }
.tx-chip form { display: contents; }
.tx-chip button { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #9ca3af; font-size: 11px; cursor: pointer; }
.tx-chip button:hover { background: #fee2e2; color: #d0001b; }

@media (max-width: 900px) {
    .tx-batch-actions { margin-left: 0; }
    .tx-col-send { width: auto; min-width: 300px; }
    .tx-send-row { flex-wrap: wrap; }
    .tx-btn { justify-content: center; }
}

/* Hub & Warehouse — camera barcode / QR scanner */
.hub-input-row { display: flex; gap: 10px; align-items: stretch; }
.hub-input-row .hub-input { flex: 1; min-width: 0; }
.hub-cam-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 2px solid #e5e7eb; border-radius: 12px; background: #fff; color: #111827; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.hub-cam-btn i { font-size: 16px; color: #d0001b; }
.hub-cam-btn:hover, .hub-cam-btn.is-on { border-color: #d0001b; color: #d0001b; background: #fff8f8; }
.hub-cam { margin-top: 4px; border: 1px solid #eceef1; border-radius: 14px; overflow: hidden; background: #0b0f19; }
.hub-cam[hidden] { display: none; }
.hub-cam-view { position: relative; min-height: 220px; }
.hub-cam-view #hubCamReader, .hub-cam-view #wpCamReader { width: 100%; }
.hub-cam-view #hubCamReader video, .hub-cam-view #wpCamReader video { width: 100% !important; height: auto !important; display: block; object-fit: cover; }
.hub-cam-view #hubCamReader img[alt="Info icon"], .hub-cam-view #hubCamReader > div:first-child[style*="position: absolute"],
.hub-cam-view #wpCamReader img[alt="Info icon"], .hub-cam-view #wpCamReader > div:first-child[style*="position: absolute"] { display: none !important; }
.hub-cam-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 7px 12px; border-radius: 999px; background: rgba(17, 24, 39, .82); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-cam-hint[hidden] { display: none; }
.hub-cam-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: #fff; border-top: 1px solid #eceef1; }
.hub-cam-keep { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; font-size: 12.5px !important; font-weight: 600 !important; color: #374151 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; }
.hub-cam-keep input { accent-color: #d0001b; }
.hub-cam-actions { display: flex; gap: 8px; }
.hub-cam-switch, .hub-cam-stop { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; color: #374151; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.hub-cam-stop:hover { border-color: #d0001b; color: #d0001b; }
.hub-cam-switch[hidden] { display: none; }
.hub-cam-error { margin: 0; padding: 10px 12px; background: #fef2f2; color: #991b1b; font-size: 12.5px; line-height: 1.45; }
.hub-cam-error[hidden] { display: none; }
@media (max-width: 560px) {
    .hub-input-row { flex-direction: column; }
    .hub-cam-btn { height: 46px; justify-content: center; }
}
.cx-upload[hidden], .cx-field [hidden] { display: none !important; }
button.cx-upload-cam { width: 100%; font: inherit; text-align: left; cursor: pointer; }

/* =====================================================
   SC PICKUP REQUESTS — board on the .pa-* look
===================================================== */
.pkr-icon-blue { background: #eff6ff; color: #1d4ed8; }
.pkr-alert { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 16px; border: 1px solid #fecaca; border-radius: 12px; background: #fef2f2; color: #991b1b; font-size: 13.5px; }
.pkr-alert i { color: #dc2626; }
.pkr-table > tbody > tr[data-filter-row] > td { vertical-align: top; }
.pkr-table > tbody > tr[hidden] { display: none; }
.pkr-track { font-size: 14px; font-weight: 800; color: #111827; white-space: nowrap; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.pkr-avatar { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
.pkr-when { font-size: 13px; font-weight: 700; color: #111827; line-height: 1.4; }
.pkr-when i { margin-right: 4px; color: #6b7280; }
.pkr-table .pa-muted i { width: 12px; margin-right: 3px; text-align: center; }
.pkr-note { margin-top: 4px; font-size: 12px; font-style: italic; color: #6b7280; }
.pkr-note i { margin-right: 3px; font-style: normal; }
.pkr-table .pkm-list { flex-direction: column; align-items: flex-start; margin: 0; }
.pkr-rider-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #eff6ff; color: #1d4ed8; font-size: 12px; }
.pkr-unassigned { display: inline-block; padding: 3px 10px; border: 1px dashed #d1d5db; border-radius: 999px; color: #9ca3af; font-size: 12px; font-weight: 600; line-height: 1.35; }
.pkr-status-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pa-status i.fa-circle { font-size: 7px; }
.pkr-status-blue { background: #eff6ff; color: #1d4ed8; }
.pkr-status-purple { background: #f5f3ff; color: #6d28d9; }
.pkr-status-red { background: #fef2f2; color: #b91c1c; }
.pkr-status-red i { font-size: 11px; }
.pkr-table .pkr-action { min-width: 230px; }
.pkr-action form { margin: 0 0 8px; }
.pkr-action form:last-child { margin-bottom: 0; }
.pkr-action .pk-offer { display: flex; margin-bottom: 8px; }
.pkr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; color: #374151; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.pkr-btn:hover { border-color: #d0001b; color: #d0001b; }
.pkr-btn-primary { width: 100%; border-color: #d0001b; background: #d0001b; color: #fff; }
.pkr-btn-primary:hover { background: #b00017; color: #fff; }
.pkr-assign { display: flex; gap: 6px; }
.pkr-assign select { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid #e5e7eb; border-radius: 9px; background: #f9fafb; font: inherit; font-size: 12.5px; color: #111827; }
.pkr-assign select:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.pkr-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; color: #9ca3af; font-size: 13.5px; }
.pkr-empty[hidden] { display: none; }
.pkr-empty i { font-size: 26px; }
@media (max-width: 1200px) { .pa-stats.pa-stats-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pa-stats.pa-stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================
   STORE & ACCOUNT — header, store profile, branding
   ========================================================= */
#tab-account.acct-page { max-width: 1200px; margin-left: auto; margin-right: auto; }

.sa-hero { margin-bottom: 26px; border-radius: 20px; border-color: #eceef1; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05); overflow: visible; }
.sa-cover { height: 220px; border-radius: 20px 20px 0 0; overflow: hidden; background-color: #2a0a10; background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .08), transparent 40%), linear-gradient(120deg, #1f0a0d, #7a0010 55%, #d0001b); background-size: cover; background-position: center; }
.sa-cover::after { content: ""; position: absolute; inset: auto 0 0 0; height: 70px; background: linear-gradient(to top, rgba(0, 0, 0, .28), transparent); pointer-events: none; }
.sa-cover-form { z-index: 2; display: flex; gap: 8px; right: 16px; bottom: 14px; }
.sa-cover-btn { height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; background: rgba(17, 24, 39, .6); font: inherit; font-size: 13px; font-weight: 700; color: #fff; transition: background .15s; }
.sa-cover-btn:hover { background: rgba(17, 24, 39, .85); }
.sa-cover-btn[hidden] { display: none; }
.sa-cover-remove { width: 36px; padding: 0; justify-content: center; }
.sa-cover-remove:hover { background: #d0001b; }
.sa-cover-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: rgba(255, 255, 255, .75); font-size: 13.5px; font-weight: 600; }
.sa-cover-empty[hidden] { display: none; }
.sa-busy { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(17, 24, 39, .45); color: #fff; font-size: 14px; font-weight: 700; }
.sa-busy[hidden] { display: none; }

.sa-hero-body { position: relative; align-items: flex-end; gap: 22px; padding: 0 28px 22px; }
.sa-avatar-wrap { position: relative; z-index: 2; flex: 0 0 132px; width: 132px; height: 132px; margin-top: -66px; }
.sa-avatar { position: relative; flex: none; width: 132px; height: 132px; margin: 0; border: 5px solid #fff; background: #fff; box-shadow: 0 10px 28px rgba(16, 24, 40, .18); font-size: 42px; box-sizing: border-box; }
.sa-avatar > i { color: #d0001b; }
.sa-avatar .sa-busy { border-radius: 50%; }
.sa-avatar-btn { position: absolute; right: 4px; bottom: 6px; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; background: #d0001b; color: #fff; display: grid; place-items: center; font-size: 13px; cursor: pointer; box-shadow: 0 4px 10px rgba(208, 0, 27, .35); transition: transform .15s, background .15s; box-sizing: border-box; }
.sa-avatar-btn:hover { transform: scale(1.08); background: #b30019; }
.sa-hero-info { padding-top: 16px; }
.sa-hero-info h2 { font-size: 26px; letter-spacing: -.02em; }
.sa-hero-info p { margin: 4px 0 12px; font-size: 13.5px; }
.sa-chips span { padding: 5px 11px; background: #f5f6f8; border: 1px solid #eceef1; font-size: 12px; }
.sa-chips span.is-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.sa-chips span.is-good { border-color: #bbf7d0; }
.sa-view { height: 40px; padding: 0 16px; border-radius: 11px; background: #fff; transition: border-color .15s, color .15s; }

/* Store profile: form on the left, branding on the right. */
.ss-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.ss-side { display: grid; gap: 16px; }
.ss-card { padding: 22px 24px; border-color: #eceef1; border-radius: 16px; }
.ss-card-head { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #f1f2f4; }
.ss-card-head > span { width: 34px; height: 34px; border-radius: 10px; background: #fff1f2; color: #d0001b; font-size: 14px; }
.ss-card-head h3 { font-size: 15.5px; }
.ss-field > span { font-size: 12.5px; font-weight: 700; text-transform: none; letter-spacing: 0; color: #374151; }
.ss-field input, .ss-field textarea { padding: 11px 14px; border-radius: 11px; font-size: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.ss-field input:hover, .ss-field textarea:hover { border-color: #d1d5db; }

.ss-savebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 20px; border-radius: 14px; border: 1px solid #eceef1; background: #fff; transition: border-color .2s, background .2s; }
.ss-savebar.is-dirty { border-color: #fecdd3; background: #fffafa; }
.ss-savebar-state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #15803d; }
.ss-savebar.is-dirty .ss-savebar-state { color: #b45309; }
.ss-savebar-actions { display: flex; gap: 8px; }
.ss-savebar .btn-primary { display: inline-flex; align-items: center; gap: 8px; }
.ss-savebar .btn-primary:disabled { opacity: .7; cursor: progress; }

.ss-btn-outline, .ss-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; box-sizing: border-box; transition: border-color .15s, color .15s, background .15s; }
.ss-btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #111827; }
.ss-btn-outline:hover { border-color: #d0001b; color: #d0001b; }
.ss-btn-ghost { border: 1px solid transparent; background: transparent; color: #6b7280; }
.ss-btn-ghost:hover { background: #fef2f2; color: #b91c1c; }
.ss-btn-ghost[hidden] { display: none; }
.ss-btn-block { width: 100%; }

.ss-brand-row { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.ss-brand-logo { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #fff1f2; color: #d0001b; font-size: 26px; border: 1px solid #eceef1; }
.ss-brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.ss-brand-text { display: grid; gap: 4px; justify-items: start; }
.ss-brand-text strong { font-size: 13.5px; color: #111827; }
.ss-brand-text small { font-size: 12px; line-height: 1.45; color: #6b7280; }
.ss-brand-text .ss-btn-outline, .ss-brand-actions { margin-top: 6px; }
.ss-brand-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ss-brand-actions .ss-btn-outline { margin-top: 0; }
.ss-brand-cover { position: relative; height: 96px; margin-bottom: 12px; border-radius: 12px; background-color: #2a0a10; background-image: linear-gradient(120deg, #1f0a0d, #7a0010 55%, #d0001b); background-size: cover; background-position: center; overflow: hidden; }
.ss-brand-cover-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .8); }
.ss-brand-cover.has-image .ss-brand-cover-empty { display: none; }
.ss-tips h4 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #111827; }
.ss-tips h4 i { color: #f59e0b; }
.ss-tips ul { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 6px; font-size: 12.5px; color: #4b5563; line-height: 1.45; }

@media (max-width: 1080px) {
    .ss-layout { grid-template-columns: minmax(0, 1fr); }
    .ss-side { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width: 720px) {
    .sa-cover { height: 150px; }
    .sa-hero-body { padding: 0 18px 18px; gap: 12px; }
    .sa-avatar-wrap { flex-basis: 100px; width: 100px; height: 100px; margin-top: -50px; }
    .sa-avatar { width: 100px; height: 100px; font-size: 32px; }
    .sa-avatar-btn { width: 32px; height: 32px; right: 0; bottom: 2px; }
    .sa-hero-info h2 { font-size: 21px; }
    .sa-view { width: 100%; justify-content: center; }
    .ss-card { padding: 18px; }
    .ss-savebar { flex-wrap: wrap; }
    .ss-savebar-actions { width: 100%; }
    .ss-savebar-actions .btn-primary { flex: 1; justify-content: center; }
}

html[data-theme="dark"] .sa-avatar, html[data-theme="dark"] .sa-avatar-btn { border-color: #111827; }
html[data-theme="dark"] .sa-avatar { background: #1f2937; }
html[data-theme="dark"] .sa-chips span { background: #1f2937; border-color: #2a2f3a; color: #d1d5db; }
html[data-theme="dark"] .sa-view, html[data-theme="dark"] .ss-btn-outline { background: #111827; border-color: #2a2f3a; color: #e5e7eb; }
html[data-theme="dark"] .ss-card, html[data-theme="dark"] .ss-savebar { background: #111827; border-color: #1f2937; }
html[data-theme="dark"] .ss-card-head { border-bottom-color: #1f2937; }
html[data-theme="dark"] .ss-card-head h3, html[data-theme="dark"] .ss-brand-text strong, html[data-theme="dark"] .ss-tips h4 { color: #f3f4f6; }
html[data-theme="dark"] .ss-field > span { color: #d1d5db; }
html[data-theme="dark"] .ss-field input, html[data-theme="dark"] .ss-field textarea { background: #0b1220; border-color: #2a2f3a; color: #f3f4f6; }
html[data-theme="dark"] .ss-tips ul { color: #9ca3af; }

/* =========================================================
   ADD PRODUCT — sections, photo & video uploader
   ========================================================= */
.ap-section { margin: 0 0 16px; padding: 20px 20px 6px; border: 1px solid #eceef1; border-radius: 16px; background: #fff; }
.ap-section-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.ap-section-head > span { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #d0001b; color: #fff; font-size: 12.5px; font-weight: 800; }
.ap-section-head h4 { margin: 2px 0 0; font-size: 15px; font-weight: 800; color: #111827; }
.ap-section-head p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: #6b7280; }
.ap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.ap-grid.ap-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.ap-grid > .admin-form-group { min-width: 0; }
.ap-spec { display: grid; gap: 5px; margin-bottom: 12px; }
.ap-spec small { font-size: 12px; font-weight: 600; color: #6b7280; }
.ap-note { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1px dashed #e5e7eb; background: #fafafb; font-size: 12.5px; color: #6b7280; box-sizing: border-box; }
.ap-variation-actions { margin-top: 4px; }
.ap-toggle { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; padding: 12px 14px; border: 1px solid #eceef1; border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.ap-toggle:hover { border-color: #fecdd3; }
.ap-toggle:has(input:checked) { border-color: #d0001b; background: #fff5f5; }
.ap-toggle input { width: 18px; height: 18px; margin: 0; accent-color: #d0001b; flex-shrink: 0; }
.ap-toggle-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #fff1f2; color: #d0001b; flex-shrink: 0; }
.ap-toggle > span:last-child { display: grid; gap: 2px; }
.ap-toggle strong { font-size: 13.5px; color: #111827; }
.ap-toggle small { font-size: 12px; color: #6b7280; }
.pm-body .draft-status { margin-bottom: 14px; }

.apm { transition: border-color .15s, background .15s; }
.apm.is-dropping { border-color: #d0001b; background: #fff8f8; }
.apm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.apm-head strong { font-size: 13.5px; color: #111827; }
.apm-head small { font-size: 12px; color: #6b7280; }
.apm-head-video { margin-top: 20px; }
.apm-counter { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-size: 11.5px; font-weight: 700; }
.apm-optional { margin-left: 6px; font-size: 11.5px; font-weight: 600; color: #9ca3af; }
.apm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.apm-add { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 10px; border: 1.5px dashed #d1d5db; border-radius: 14px; background: #fcfcfd; color: #6b7280; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, color .15s; box-sizing: border-box; }
.apm-add:hover, .apm-add:focus-visible { border-color: #d0001b; background: #fff5f5; color: #d0001b; outline: none; }
.apm-add[hidden] { display: none; }
.apm-add > i { font-size: 22px; color: #d0001b; margin-bottom: 2px; }
.apm-add strong { font-size: 13px; color: #111827; }
.apm-add small { font-size: 11.5px; font-weight: 500; }
.apm-tile { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #f3f4f6; border: 1px solid #eceef1; cursor: grab; box-sizing: border-box; transition: box-shadow .15s, opacity .15s; }
.apm-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.apm-tile.is-cover { border: 2px solid #d0001b; }
.apm-tile.is-dragging { opacity: .4; }
.apm-tile.is-drop-target { box-shadow: 0 0 0 3px rgba(208, 0, 27, .45); }
.apm-tile.is-uploading img, .apm-video-tile.is-uploading video { opacity: .55; }
.apm-tile.is-removing, .apm-video-tile.is-removing { opacity: .4; pointer-events: none; }
.apm-badge, .apm-num { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.apm-badge { background: #d0001b; color: #fff; }
.apm-num { background: rgba(17, 24, 39, .65); color: #fff; }
.apm-tile-actions { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.apm-tile:hover .apm-tile-actions, .apm-tile:focus-within .apm-tile-actions { opacity: 1; }
.apm-tile-actions button { width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: rgba(17, 24, 39, .72); color: #fff; font-size: 12px; cursor: pointer; display: grid; place-items: center; }
.apm-tile-actions button:hover { background: #d0001b; }
.apm-progress { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .7); overflow: hidden; }
.apm-progress span { display: block; height: 100%; background: #d0001b; transition: width .2s; }
.apm-video { display: grid; margin-bottom: 14px; }
.apm-add.apm-add-video { aspect-ratio: auto; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 16px 18px; text-align: left; }
.apm-add-video > i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff1f2; margin: 0; font-size: 18px; flex-shrink: 0; }
.apm-add-video > div { display: grid; gap: 2px; }
.apm-video-tile { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid #eceef1; background: #0b0b0f; }
.apm-video-tile video { display: block; width: 100%; max-height: 300px; background: #000; }
.apm-video-tile .apm-progress { bottom: 58px; }
.apm-video-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 6px 10px 6px 14px; background: #fff; border-top: 1px solid #eceef1; font-size: 13px; font-weight: 600; color: #374151; box-sizing: border-box; }
.apm-video-meta i { color: #d0001b; margin-right: 4px; }

.draft-item-thumb { padding: 0; overflow: hidden; }
.draft-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (hover: none) { .apm-tile-actions { opacity: 1; } }
@media (max-width: 640px) {
    .ap-grid, .ap-grid.ap-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .ap-section { padding: 16px 14px 4px; }
    .apm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

html[data-theme="dark"] .ap-section, html[data-theme="dark"] .ap-toggle, html[data-theme="dark"] .apm-video-meta { background: #111827; border-color: #1f2937; }
html[data-theme="dark"] .ap-section-head h4, html[data-theme="dark"] .apm-head strong, html[data-theme="dark"] .apm-add strong, html[data-theme="dark"] .ap-toggle strong, html[data-theme="dark"] .apm-video-meta { color: #f3f4f6; }
html[data-theme="dark"] .apm-add, html[data-theme="dark"] .ap-note { background: #0b1220; border-color: #374151; }
html[data-theme="dark"] .apm-counter { background: #1f2937; color: #d1d5db; }
html[data-theme="dark"] .ap-toggle:has(input:checked), html[data-theme="dark"] .apm.is-dropping { background: #1f1115; }
.pm-body .ap-section .admin-form-group > label { font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; color: #1f2937; }
html[data-theme="dark"] .pm-body .ap-section .admin-form-group > label { color: #e5e7eb; }

/* =========================================================
   ORDER MANAGEMENT — archive delivered orders
   ========================================================= */
.soc-actions form.soc-archive-form { flex: 0 0 auto; }
.soc-btn-icon { width: 34px; padding: 0; border: 1px solid #d0d5dd; background: #fff; color: #667085; }
.soc-btn-icon:hover { border-color: #d0001b; color: #d0001b; background: #fff5f5; }

.soa { margin: 18px 0; border: 1px solid #eceef1; border-radius: 16px; background: #fff; overflow: hidden; }
.soa-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; user-select: none; }
.soa-head::-webkit-details-marker { display: none; }
.soa-head:hover { background: #fafafb; }
.soa-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: #f3f4f6; color: #4b5563; }
.soa-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.soa-title strong { font-size: 14.5px; color: #111827; }
.soa-title small { font-size: 12.5px; color: #6b7280; }
.soa-count { min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: #f3f4f6; color: #374151; font-size: 12px; font-weight: 800; box-sizing: border-box; }
.soa-chevron { color: #9ca3af; transition: transform .2s; }
.soa[open] .soa-chevron { transform: rotate(180deg); }
.soa-list { border-top: 1px solid #f1f2f4; max-height: 420px; overflow-y: auto; }
.soa-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #f5f6f8; }
.soa-row:last-child { border-bottom: none; }
.soa-thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #f3f4f6; color: #9ca3af; }
.soa-thumb img { width: 100%; height: 100%; object-fit: cover; }
.soa-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.soa-info strong { font-size: 13.5px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soa-info strong em { font-style: normal; font-weight: 600; color: #6b7280; }
.soa-info small { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soa-total { font-size: 14px; font-weight: 800; color: #d0001b; white-space: nowrap; }
.soa-actions { display: flex; gap: 6px; flex-shrink: 0; }
.soa-actions form { margin: 0; }
.soa-actions .soc-btn { gap: 6px; }
@media (max-width: 640px) {
    .soa-row { flex-wrap: wrap; }
    .soa-actions { width: 100%; }
    .soa-actions > * { flex: 1; }
    .soa-actions .soc-btn { width: 100%; }
}
html[data-theme="dark"] .soa, html[data-theme="dark"] .soc-btn-icon { background: #111827; border-color: #1f2937; }
html[data-theme="dark"] .soa-head:hover { background: #0b1220; }
html[data-theme="dark"] .soa-title strong, html[data-theme="dark"] .soa-info strong { color: #f3f4f6; }
html[data-theme="dark"] .soa-row, html[data-theme="dark"] .soa-list { border-color: #1f2937; }
html[data-theme="dark"] .soa-icon, html[data-theme="dark"] .soa-count, html[data-theme="dark"] .soa-thumb { background: #1f2937; color: #d1d5db; }

/* Archived orders: header icon + modal. */
.soa-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.soa-open { position: relative; flex-shrink: 0; width: 42px; height: 42px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; color: #4b5563; font-size: 16px; cursor: pointer; display: grid; place-items: center; transition: border-color .15s, color .15s, background .15s; }
.soa-open:hover { border-color: #d0001b; color: #d0001b; background: #fff5f5; }
.soa-open-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #d0001b; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-sizing: border-box; border: 2px solid #fff; }
.rate-modal-box.soa-modal { width: min(720px, calc(100vw - 32px)); max-width: none; padding: 22px 0 0; text-align: left; }
.soa-modal-head { display: flex; gap: 12px; align-items: flex-start; padding: 0 56px 16px 22px; border-bottom: 1px solid #f1f2f4; }
.soa-modal-head h2 { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: #111827; }
.soa-modal-head p { margin: 4px 0 0; font-size: 12.5px; color: #6b7280; }
.soa-modal .soa-list { border-top: none; max-height: min(60vh, 520px); }
.soa-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 22px 44px; text-align: center; color: #6b7280; font-size: 13px; }
.soa-empty > i { font-size: 30px; color: #d1d5db; margin-bottom: 4px; }
.soa-empty strong { font-size: 15px; color: #111827; }
html[data-theme="dark"] .soa-open { background: #111827; border-color: #2a2f3a; color: #d1d5db; }
html[data-theme="dark"] .soa-open-badge { border-color: #111827; }
html[data-theme="dark"] .soa-modal-head { border-bottom-color: #1f2937; }
html[data-theme="dark"] .soa-modal-head h2, html[data-theme="dark"] .soa-empty strong { color: #f3f4f6; }

/* =========================================================
   SELLER PROGRAMS — Seller Center → Shop Growth (sg-*)
   ========================================================= */
/* Full content width on every tab (a shrink-to-fit max-width made the
   Performance / Opportunities tabs narrower than Seller Programs). */
.sg-page { width: 100%; max-width: none; margin: 0; min-width: 0; box-sizing: border-box; }
.sg-flash { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.sg-flash.is-good { background: #ecfdf3; border: 1px solid #bbf7d0; color: #166534; }
.sg-flash.is-bad { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.sg-flash i { margin-top: 3px; }

.sg-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 30px; margin-bottom: 18px; border-radius: 20px; color: #fff; background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .12), transparent 45%), linear-gradient(120deg, #1f0a0d, #7a0010 55%, #d0001b); box-shadow: 0 10px 30px rgba(122, 0, 16, .18); }
.sg-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.sg-hero h1 { margin: 12px 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sg-hero p { margin: 0; max-width: 620px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.sg-current { flex-shrink: 0; display: grid; gap: 6px; justify-items: start; min-width: 230px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(4px); }
.sg-current small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .7); font-weight: 700; }
.sg-current strong { font-size: 17px; }
.sg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: rgba(255, 255, 255, .16); font-size: 12px; font-weight: 700; }
.sg-current .gc-badge-preferred { background: #fff4e5; }

.sg-tabs { display: flex; gap: 6px; margin-bottom: 18px; padding: 5px; border-radius: 14px; background: #fff; border: 1px solid #eceef1; overflow-x: auto; }
.sg-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: none; border-radius: 10px; background: transparent; color: #4b5563; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.sg-tab:hover { background: #f5f6f8; color: #111827; }
.sg-tab.is-active { background: #d0001b; color: #fff; }
.sg-panel[hidden] { display: none; }

.sg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.sg-card { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #eceef1; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.sg-card-preferred { border-top: 4px solid #ea580c; }
.sg-card-mall { border-top: 4px solid #b30019; }
.sg-card-top { display: flex; gap: 14px; align-items: flex-start; }
.sg-card-top > div { flex: 1; min-width: 0; }
.sg-card-top h2 { margin: 0; font-size: 19px; font-weight: 800; color: #111827; }
.sg-card-top p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #6b7280; }
.sg-card-badge { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; }
.sg-card-badge-preferred { background: #fff4e5; color: #ea580c; }
.sg-card-badge-mall { background: linear-gradient(135deg, #b30019, #d0001b); color: #fff; }
.sg-pill, .sg-status { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.sg-pill { flex-shrink: 0; }
.is-good.sg-pill, .is-good.sg-status { background: #ecfdf3; color: #15803d; }
.is-bad.sg-pill, .is-bad.sg-status { background: #fef2f2; color: #b91c1c; }
.is-warn.sg-pill, .is-warn.sg-status { background: #fffbeb; color: #b45309; }
.is-wait.sg-pill, .is-wait.sg-status { background: #eff6ff; color: #1d4ed8; }
.is-muted.sg-pill { background: #f3f4f6; color: #4b5563; }
.sg-benefits { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.sg-benefits li { display: flex; gap: 8px; font-size: 13px; color: #374151; }
.sg-benefits i { margin-top: 3px; color: #16a34a; font-size: 11px; }
.sg-progress-block { display: grid; gap: 8px; }
.sg-progress-label { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #6b7280; }
.sg-progress-label strong { color: #111827; }
.sg-progress { height: 8px; border-radius: 999px; background: #f1f2f4; overflow: hidden; }
.sg-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f97316, #ea580c); transition: width .4s; }
.sg-progress-mall span { background: linear-gradient(90deg, #d0001b, #7a0010); }
.sg-progress-sm { height: 6px; }
.sg-missing { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px dashed #e2e8f0; font-size: 12.5px; color: #475569; line-height: 1.5; }
.sg-missing i { margin-top: 2px; color: #64748b; }
.sg-card-actions { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 11px; font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s, opacity .15s; box-sizing: border-box; }
.sg-btn-primary { border: none; background: #d0001b; color: #fff; }
.sg-btn-primary:hover { background: #b30019; }
.sg-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.sg-btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #111827; }
.sg-btn-outline:hover { border-color: #d0001b; color: #d0001b; }

.sg-section { margin-bottom: 18px; padding: 22px 24px; border-radius: 18px; background: #fff; border: 1px solid #eceef1; scroll-margin-top: 20px; }
.sg-section.is-focus { box-shadow: 0 0 0 3px rgba(208, 0, 27, .14); }
.sg-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sg-section-head > div { flex: 1; min-width: 0; }
.sg-section-head h3 { margin: 0; font-size: 16.5px; font-weight: 800; color: #111827; }
.sg-section-head p { margin: 3px 0 0; font-size: 12.5px; color: #6b7280; }
.sg-section-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: #f3f4f6; color: #4b5563; font-size: 16px; }
.sg-icon-preferred { background: #fff4e5; color: #ea580c; }
.sg-icon-mall { background: #fff1f2; color: #d0001b; }
.sg-overall { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: #f3f4f6; color: #374151; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.sg-overall.is-good { background: #ecfdf3; color: #15803d; }

.sg-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sg-metric { display: grid; gap: 8px; padding: 16px; border-radius: 14px; border: 1px solid #eceef1; background: #fcfcfd; }
.sg-metric.is-good { border-color: #d1fadf; }
.sg-metric.is-bad { border-color: #fecdd3; background: #fffafa; }
.sg-metric-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sg-metric-label { font-size: 12.5px; font-weight: 700; color: #4b5563; }
.sg-metric-value { font-size: 22px; font-weight: 800; color: #111827; letter-spacing: -.01em; }
.sg-metric-target { font-size: 12px; font-weight: 600; color: #6b7280; }
.sg-metric-note { margin: 0; font-size: 12px; line-height: 1.5; color: #6b7280; }
.sg-metric.is-good .sg-progress span { background: linear-gradient(90deg, #22c55e, #16a34a); }
.sg-metric.is-bad .sg-progress span { background: linear-gradient(90deg, #f87171, #dc2626); }
.sg-metric.is-wait .sg-progress span { background: #94a3b8; }

.sg-checklist { display: grid; border: 1px solid #eceef1; border-radius: 14px; overflow: hidden; }
.sg-check-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #f1f2f4; }
.sg-check-row:last-child { border-bottom: none; }
.sg-check-icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 12px; }
.sg-check-icon.is-good { background: #dcfce7; color: #15803d; }
.sg-check-icon.is-bad { background: #fee2e2; color: #b91c1c; }
.sg-check-icon.is-warn { background: #fef3c7; color: #b45309; }
.sg-check-icon.is-wait { background: #dbeafe; color: #1d4ed8; }
.sg-check-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sg-check-text strong { font-size: 13.5px; color: #111827; }
.sg-check-text em, .sg-doc-text em { font-style: normal; font-size: 11px; font-weight: 600; color: #9ca3af; margin-left: 4px; }
.sg-check-text small { font-size: 12px; color: #6b7280; line-height: 1.5; }
.sg-check-text a { color: #d0001b; font-weight: 600; text-decoration: none; }
.sg-remark { color: #b45309; }

.sg-req-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sg-req-card { padding: 16px; border-radius: 14px; border: 1px solid #eceef1; background: #fcfcfd; }
.sg-req-card h4 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #111827; }
.sg-req-card h4 i { color: #d0001b; }
.sg-req-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sg-req-card li { display: grid; gap: 2px; font-size: 12.5px; color: #374151; }
.sg-req-card li em { font-style: normal; font-size: 11px; color: #9ca3af; margin-left: 4px; }
.sg-req-card li small { font-size: 11.5px; color: #9ca3af; }
.sg-note { display: flex; gap: 8px; margin: 12px 0 0; font-size: 12.5px; color: #475569; }

.sg-app { margin-top: 16px; padding: 16px 18px; border-radius: 14px; border: 1px solid #eceef1; background: #fcfcfd; scroll-margin-top: 20px; }
.sg-app.is-warn { border-color: #fde68a; background: #fffdf5; }
.sg-app.is-bad { border-color: #fecdd3; background: #fffafa; }
.sg-app.is-good { border-color: #bbf7d0; background: #f8fffa; }
.sg-app-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sg-app-head small { display: block; font-size: 11.5px; color: #6b7280; }
.sg-app-head strong { font-size: 15px; color: #111827; }
.sg-app-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0; }
.sg-app-meta div { display: grid; }
.sg-app-meta dt { font-size: 11px; color: #9ca3af; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sg-app-meta dd { margin: 0; font-size: 13px; color: #111827; font-weight: 600; }
.sg-app-note, .sg-request > p { display: flex; gap: 8px; margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: #374151; }
.sg-app-note i, .sg-request > p i { margin-top: 3px; }
.sg-request .sg-form { margin-top: 12px; }

.sg-renew { margin-top: 16px; padding: 16px; border-radius: 14px; border: 1px dashed #e5e7eb; }
.sg-renew h4 { margin: 0; font-size: 13.5px; color: #111827; }
.sg-renew p { margin: 4px 0 10px; font-size: 12.5px; color: #6b7280; }
.sg-renew-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sg-renew-row select, .sg-renew-row input { height: 40px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 10px; font: inherit; font-size: 13px; background: #fff; }
.sg-renew-row input[type=file] { padding: 8px 10px; }

.sg-timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.sg-timeline li { position: relative; display: flex; gap: 12px; padding: 0 0 14px 2px; }
.sg-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 16px; bottom: 0; width: 2px; background: #eceef1; }
.sg-timeline-dot { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 4px; flex-shrink: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px #cbd5e1; background: #cbd5e1; }
.sg-timeline-dot.is-good { background: #16a34a; box-shadow: 0 0 0 2px #bbf7d0; }
.sg-timeline-dot.is-bad { background: #dc2626; box-shadow: 0 0 0 2px #fecaca; }
.sg-timeline-dot.is-wait { background: #2563eb; box-shadow: 0 0 0 2px #bfdbfe; }
.sg-timeline strong { font-size: 13px; color: #111827; }
.sg-timeline p { margin: 2px 0; font-size: 12.5px; color: #4b5563; line-height: 1.5; }
.sg-timeline small { font-size: 11.5px; color: #9ca3af; }

.sg-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sg-kpi { display: grid; gap: 6px; justify-items: start; padding: 16px; border-radius: 14px; border: 1px solid #eceef1; background: #fcfcfd; }
.sg-kpi small { font-size: 12px; font-weight: 700; color: #6b7280; }
.sg-kpi strong { font-size: 24px; font-weight: 800; color: #111827; }
.sg-kpi em { font-style: normal; font-size: 11.5px; color: #9ca3af; }
.sg-promo { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: #fff7ed; border: 1px solid #fed7aa; }
.sg-promo > i { font-size: 22px; color: #ea580c; }
.sg-promo > div { flex: 1; display: grid; gap: 2px; }
.sg-promo strong { font-size: 14px; color: #9a3412; }
.sg-promo span { font-size: 12.5px; color: #9a3412; }

.sg-tips { display: grid; gap: 12px; }
.sg-tip { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid #eceef1; }
.sg-tip > div { flex: 1; min-width: 0; }
.sg-tip strong { font-size: 14px; color: #111827; }
.sg-tip p { margin: 2px 0 0; font-size: 12.5px; color: #6b7280; }
.sg-tip-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: #fff1f2; color: #d0001b; font-size: 16px; }

.rate-modal-box.sg-modal { width: min(620px, calc(100vw - 32px)); max-width: none; padding: 24px; text-align: left; }
.rate-modal-box.sg-modal-lg { width: min(780px, calc(100vw - 32px)); }
.sg-modal-head { display: flex; gap: 14px; align-items: flex-start; margin: 0 30px 18px 0; }
.sg-modal-head h2 { margin: 0; font-size: 19px; font-weight: 800; color: #111827; }
.sg-modal-head p { margin: 4px 0 0; font-size: 12.5px; color: #6b7280; }
.sg-form { display: grid; gap: 14px; }
.sg-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sg-review > div { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; font-size: 12.5px; }
.sg-review span { flex: 1; color: #6b7280; }
.sg-review strong { color: #111827; }
.sg-review i { color: #16a34a; }
.sg-field { display: grid; gap: 6px; }
.sg-field > span { font-size: 12.5px; font-weight: 700; color: #374151; }
.sg-field em { font-style: normal; font-weight: 500; color: #9ca3af; }
.sg-field input, .sg-field textarea, .sg-field select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; font: inherit; font-size: 13.5px; background: #fff; color: #111827; }
.sg-field input:focus, .sg-field textarea:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.sg-confirm { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: #f8fafc; font-size: 12.5px; color: #374151; line-height: 1.5; cursor: pointer; }
.sg-confirm input { margin-top: 2px; accent-color: #d0001b; width: 16px; height: 16px; flex-shrink: 0; }
.sg-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.sg-step { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 14px; color: #111827; }
.sg-step span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #d0001b; color: #fff; font-size: 12px; }
.sg-step small { font-size: 11.5px; font-weight: 500; color: #9ca3af; }
.sg-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sg-type { display: flex; gap: 10px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.sg-type:has(input:checked) { border-color: #d0001b; background: #fff5f5; }
.sg-type input { accent-color: #d0001b; margin-top: 2px; }
.sg-type span { display: grid; gap: 2px; }
.sg-type strong { font-size: 13px; color: #111827; }
.sg-type small { font-size: 11.5px; color: #6b7280; }
.sg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sg-wide { grid-column: 1 / -1; }
.sg-docs { display: grid; gap: 8px; }
.sg-doc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px) 150px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #eceef1; border-radius: 12px; background: #fcfcfd; }
.sg-doc[hidden] { display: none; }
.sg-doc.is-flagged { border-color: #fde68a; background: #fffdf5; }
.sg-doc-text { display: grid; gap: 2px; min-width: 0; }
.sg-doc-text strong { font-size: 13px; color: #111827; }
.sg-doc-text small { font-size: 11.5px; color: #6b7280; }
.sg-doc input { min-width: 0; font: inherit; font-size: 12px; }
.sg-doc input[type=date] { height: 36px; padding: 0 8px; border: 1px solid #e5e7eb; border-radius: 9px; }

/* Dashboard / Analytics promos (sgp-*) */
.sgp-announce { position: relative; display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; padding: 18px 20px; border-radius: 16px; color: #fff; background: radial-gradient(circle at 90% 0%, rgba(255, 255, 255, .14), transparent 45%), linear-gradient(120deg, #7a0010, #d0001b); box-shadow: 0 8px 24px rgba(208, 0, 27, .18); }
.sgp-announce-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); font-size: 20px; }
.sgp-announce-text { flex: 1; min-width: 0; }
.sgp-announce-text strong { font-size: 16px; }
.sgp-announce-text p { margin: 4px 0 12px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .88); max-width: 680px; }
.sgp-announce-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sgp-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; }
.sgp-btn-primary { background: #fff; color: #b30019; }
.sgp-btn-primary:hover { background: #fff1f2; }
.sgp-btn-ghost { border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
.sgp-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.sgp-dismiss { margin: 0; }
.sgp-dismiss button { width: 32px; height: 32px; border: none; border-radius: 9px; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.sgp-dismiss button:hover { background: rgba(255, 255, 255, .25); }
.sgp-strip { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 14px; border-radius: 12px; border: 1px solid #fed7aa; background: #fff7ed; color: #9a3412; font-size: 13px; text-decoration: none; }
.sgp-strip > i { color: #ea580c; }
.sgp-strip > span:first-of-type { flex: 1; }
.sgp-strip-go { font-weight: 700; white-space: nowrap; }
.sgp-strip:hover { border-color: #fdba74; }

/* =========================================================
   SELLER PROGRAMS — Admin tab (spa-*) and detail page (spd-*)
   ========================================================= */
.spa-flash { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13px; }
.spa-flash.is-good { background: #ecfdf3; border: 1px solid #bbf7d0; color: #166534; }
.spa-flash.is-bad { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.spa-tabs { display: flex; gap: 4px; margin-bottom: 16px; padding: 4px; border-radius: 12px; background: #fff; border: 1px solid #eceef1; overflow-x: auto; }
.spa-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: none; border-radius: 9px; background: transparent; color: #4b5563; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.spa-tab:hover { background: #f5f6f8; }
.spa-tab.is-active { background: #d0001b; color: #fff; }
.spa-tab .admin-nav-badge { margin-left: 2px; }
.spa-tab.is-active .admin-nav-badge { background: #fff; color: #d0001b; }
.spa-panel[hidden] { display: none; }
.spa-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.spa-stat { border: none; font: inherit; text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.spa-stat:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16, 24, 40, .08); }
.spa-charts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.spa-chart { position: relative; height: 260px; }
.spa-chart-sm { height: 200px; }
.spa-rates { display: grid; gap: 4px; margin-top: 12px; font-size: 12.5px; color: #4b5563; }
.spa-rates b.is-good { color: #15803d; }
.spa-rates b.is-bad { color: #b91c1c; }
.spa-muted { font-size: 12px; color: #6b7280; }
.spa-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 36px 16px; font-size: 13px; color: #9ca3af; }
.spa-table td { vertical-align: middle; }
.spa-table .spa-miss { color: #b91c1c; font-weight: 700; }
.spa-ref { font-weight: 700; color: #d0001b; text-decoration: none; white-space: nowrap; }
.spa-ref:hover { text-decoration: underline; }
.spa-status { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.spa-status.is-good { background: #ecfdf3; color: #15803d; }
.spa-status.is-bad { background: #fef2f2; color: #b91c1c; }
.spa-status.is-warn { background: #fffbeb; color: #b45309; }
.spa-status.is-wait { background: #eff6ff; color: #1d4ed8; }
.spa-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.spa-actions form { margin: 0; }
.spa-reason { max-width: 340px; font-size: 12.5px; line-height: 1.5; }
.spa-reason .spa-ref { display: block; margin-top: 2px; font-size: 12px; }
.spa-nowrap { white-space: nowrap; }
.spa-search { position: relative; margin: 0; }
.spa-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 12px; }
.spa-search input { width: 240px; padding: 8px 10px 8px 30px; border: 1px solid #e5e7eb; border-radius: 9px; font: inherit; font-size: 12.5px; }
.spa-settings { display: grid; gap: 16px; }
.spa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.spa-field { display: grid; gap: 6px; margin-bottom: 14px; }
.spa-grid .spa-field { margin-bottom: 0; }
.spa-field > span { font-size: 12.5px; font-weight: 700; color: #374151; }
.spa-field > span em { font-style: normal; font-weight: 500; color: #9ca3af; }
.spa-field textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #e5e7eb; border-radius: 9px; font: inherit; font-size: 13px; }
.spa-input-unit { display: flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 9px; overflow: hidden; background: #fff; }
.spa-input-unit input { flex: 1; min-width: 0; padding: 9px 11px; border: none; font: inherit; font-size: 13px; }
.spa-input-unit em { padding: 0 11px; font-style: normal; font-size: 12px; color: #6b7280; background: #f8fafc; align-self: stretch; display: flex; align-items: center; border-left: 1px solid #eceef1; }
.spa-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: #374151; }
.spa-checks label { display: inline-flex; align-items: center; gap: 6px; }
.spa-checks input, .spa-req input, .spa-benefit-row input[type=checkbox] { accent-color: #d0001b; }
.spa-checks-sm { font-size: 12px; gap: 4px 10px; }
.spa-docs { display: grid; gap: 8px; margin-bottom: 8px; }
.spa-doc-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) 110px minmax(0, 1.6fr) auto 32px; gap: 8px; align-items: center; padding: 10px; border: 1px solid #eceef1; border-radius: 10px; background: #fcfcfd; }
.spa-doc-row input[type=text], .spa-doc-row select, .spa-benefit-row input[type=text] { min-width: 0; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font: inherit; font-size: 12.5px; }
.spa-key { font-family: ui-monospace, monospace !important; }
.spa-req { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.spa-remove { width: 30px; height: 30px; border: none; border-radius: 8px; background: #f3f4f6; color: #6b7280; cursor: pointer; }
.spa-remove:hover { background: #fee2e2; color: #b91c1c; }
.spa-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.spa-benefits h4 { margin: 0 0 10px; font-size: 13.5px; color: #111827; }
.spa-benefit-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.spa-benefit-row input[type=text] { flex: 1; }
.spa-save { display: flex; justify-content: flex-end; }
.spa-save .btn-primary { display: inline-flex; align-items: center; gap: 8px; }
.rate-modal-box.spa-modal { width: min(520px, calc(100vw - 32px)); max-width: none; padding: 24px; text-align: left; }
.spa-modal h3 { margin: 0 30px 6px 0; display: flex; align-items: center; gap: 8px; font-size: 17px; color: #111827; }
.spa-modal p { margin: 0 0 14px; font-size: 13px; color: #6b7280; }
.spa-modal form { display: grid; gap: 10px; }
.spa-modal textarea, .spa-modal select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; font: inherit; font-size: 13px; }
.spa-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

.spd-body { display: block; min-height: 100vh; background: #f4f5f7; }
.spd-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 14px 28px; background: #fff; border-bottom: 1px solid #eceef1; }
.spd-back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px; border: 1px solid #e5e7eb; color: #111827; font-size: 13px; font-weight: 700; text-decoration: none; }
.spd-back:hover { border-color: #d0001b; color: #d0001b; }
.spd-title { flex: 1; min-width: 0; }
.spd-title h1 { margin: 0; font-size: 19px; font-weight: 800; color: #111827; }
.spd-title h1 span { margin-left: 8px; font-size: 13px; font-weight: 600; color: #6b7280; }
.spd-status { font-size: 12.5px; padding: 5px 12px; }
.spd-main { max-width: 1240px; margin: 0 auto; padding: 22px 24px 40px; }
.spd-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.spd-col { display: grid; gap: 16px; }
.spd-col .admin-card { margin: 0; }
.spd-seller { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.spd-seller > div { display: grid; gap: 3px; }
.spd-seller strong { font-size: 16px; color: #111827; }
.spd-seller small { font-size: 12px; color: #6b7280; }
.spd-avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #fff1f2; color: #d0001b; font-size: 20px; }
.spd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.spd-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; }
.spd-dl dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; }
.spd-dl dd { margin: 2px 0 0; font-size: 13px; color: #111827; word-break: break-word; }
.spd-note { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; font-size: 13px; line-height: 1.5; color: #374151; }
.spd-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; font-size: 12.5px; color: #92400e; line-height: 1.5; }
.spd-docs { display: grid; gap: 10px; }
.spd-doc { padding: 12px 14px; border: 1px solid #eceef1; border-radius: 12px; }
.spd-doc.is-missing { border-style: dashed; background: #fffafa; }
.spd-doc-head { display: flex; align-items: center; gap: 8px; }
.spd-doc-head strong { flex: 1; font-size: 13.5px; color: #111827; }
.spd-doc-head em { font-style: normal; font-size: 11px; color: #b91c1c; font-weight: 700; }
.spd-doc-meta { margin: 6px 0; font-size: 12px; color: #6b7280; }
.spd-doc-meta a { color: #d0001b; font-weight: 600; text-decoration: none; }
.spd-doc-thumb { display: inline-block; margin-bottom: 8px; }
.spd-doc-thumb img { max-width: 220px; max-height: 150px; border-radius: 8px; border: 1px solid #eceef1; object-fit: contain; background: #f8fafc; }
.spd-doc-form { display: grid; grid-template-columns: 170px 140px minmax(0, 1fr) auto; gap: 8px; margin: 0; }
.spd-doc-form select, .spd-doc-form input { min-width: 0; padding: 7px 9px; border: 1px solid #e5e7eb; border-radius: 8px; font: inherit; font-size: 12.5px; }
.spd-decide textarea { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 9px 11px; border: 1px solid #e5e7eb; border-radius: 9px; font: inherit; font-size: 13px; }
.spd-full { width: 100%; justify-content: center; height: 38px; }
.spd-full:disabled { opacity: .45; cursor: not-allowed; }
.spd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.spd-split .btn-sm { justify-content: center; height: 36px; }
.spd-metrics { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.spd-metrics th { text-align: left; padding: 6px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; border-bottom: 1px solid #eceef1; }
.spd-metrics td { padding: 8px 4px; border-bottom: 1px solid #f5f6f8; vertical-align: top; }
.spd-metrics td small { display: block; margin-top: 2px; font-size: 11px; color: #9ca3af; line-height: 1.4; }
.spd-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; text-align: center; }
.spd-stats b { display: block; font-size: 18px; color: #111827; }
.spd-stats small { font-size: 11px; color: #6b7280; }
.spd-violation { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 6px 0; font-size: 12.5px; border-bottom: 1px solid #f5f6f8; }
.spd-app-link { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f5f6f8; font-size: 13px; color: #111827; text-decoration: none; }
.spd-app-link span:first-child { flex: 1; font-weight: 600; }
.spd-app-link small { color: #9ca3af; }

@media (max-width: 1100px) {
    .sg-metrics, .sg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spd-grid, .spa-charts { grid-template-columns: minmax(0, 1fr); }
    .spa-doc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 860px) {
    .sg-hero { flex-direction: column; align-items: flex-start; padding: 22px; }
    .sg-hero h1 { font-size: 23px; }
    .sg-current { width: 100%; box-sizing: border-box; }
    .sg-cards, .sg-req-grid, .spa-benefits { grid-template-columns: minmax(0, 1fr); }
    .sg-types { grid-template-columns: minmax(0, 1fr); }
    .spa-stats, .spa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sg-doc { grid-template-columns: minmax(0, 1fr); }
    .spd-doc-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .sg-metrics, .sg-kpis, .sg-grid, .sg-review, .spa-stats, .spa-grid, .spd-dl { grid-template-columns: minmax(0, 1fr); }
    .sg-section { padding: 18px 16px; }
    .sg-section-head { flex-wrap: wrap; }
    .sg-tip { flex-wrap: wrap; }
    .sgp-announce { flex-wrap: wrap; }
    .spd-top { flex-wrap: wrap; padding: 12px 16px; }
    .spd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .spa-search input { width: 100%; }
}

html[data-theme="dark"] .sg-tabs, html[data-theme="dark"] .sg-card, html[data-theme="dark"] .sg-section, html[data-theme="dark"] .sg-tip,
html[data-theme="dark"] .spa-tabs, html[data-theme="dark"] .spd-top { background: #111827; border-color: #1f2937; }
html[data-theme="dark"] .sg-metric, html[data-theme="dark"] .sg-kpi, html[data-theme="dark"] .sg-req-card, html[data-theme="dark"] .sg-app,
html[data-theme="dark"] .sg-doc, html[data-theme="dark"] .sg-checklist, html[data-theme="dark"] .spa-doc-row, html[data-theme="dark"] .spd-doc { background: #0b1220; border-color: #1f2937; }
html[data-theme="dark"] .sg-card-top h2, html[data-theme="dark"] .sg-section-head h3, html[data-theme="dark"] .sg-metric-value, html[data-theme="dark"] .sg-kpi strong,
html[data-theme="dark"] .sg-check-text strong, html[data-theme="dark"] .sg-tip strong, html[data-theme="dark"] .sg-app-head strong, html[data-theme="dark"] .sg-timeline strong,
html[data-theme="dark"] .spd-title h1, html[data-theme="dark"] .spd-seller strong, html[data-theme="dark"] .spd-dl dd, html[data-theme="dark"] .sg-modal-head h2, html[data-theme="dark"] .sg-doc-text strong { color: #f3f4f6; }
html[data-theme="dark"] .sg-check-row { border-color: #1f2937; }
html[data-theme="dark"] .sg-tab { color: #cbd5e1; }
html[data-theme="dark"] .sg-tab:hover, html[data-theme="dark"] .spa-tab:hover { background: #1f2937; }
html[data-theme="dark"] .sg-btn-outline, html[data-theme="dark"] .spd-back { background: #111827; border-color: #374151; color: #e5e7eb; }
html[data-theme="dark"] .spd-body { background: #0b1220; }
html[data-theme="dark"] .spd-note, html[data-theme="dark"] .sg-missing, html[data-theme="dark"] .sg-confirm, html[data-theme="dark"] .sg-review > div { background: #1f2937; border-color: #374151; color: #d1d5db; }

.spa-meter { width: 120px; height: 6px; margin-bottom: 4px; border-radius: 999px; background: #f1f2f4; overflow: hidden; }
.spa-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f97316, #ea580c); }
.sg-doc.is-onfile { border-color: #bbf7d0; background: #f8fffa; }
.sg-onfile { color: #15803d !important; font-weight: 600; }

/* Seller program profile — header, KPIs, requirement list (spx-*) */
.spd-crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6b7280; }
.spd-crumbs i { font-size: 9px; color: #cbd5e1; }
.spd-crumbs strong { color: #111827; }
.spd-main { max-width: 1280px; }
.spd-grid { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); }

.spx-hero { margin-bottom: 16px; border-radius: 18px; background: #fff; border: 1px solid #eceef1; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); overflow: hidden; }
.spx-identity { display: flex; align-items: center; gap: 18px; padding: 22px 24px; background: linear-gradient(120deg, #1f0a0d, #7a0010 60%, #d0001b); color: #fff; }
.spx-avatar { width: 76px; height: 76px; flex-shrink: 0; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); overflow: hidden; display: grid; place-items: center; background: #fff; color: #d0001b; font-size: 28px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.spx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.spx-name { flex: 1; min-width: 0; }
.spx-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.spx-name h1 { margin: 3px 0 2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.spx-name p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .8); }
.spx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.spx-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 600; }
.spx-chips span i { font-size: 10px; opacity: .85; }
.spx-chips span.is-good i { color: #4ade80; opacity: 1; font-size: 7px; }
.spx-chips span.is-bad i { color: #fca5a5; opacity: 1; font-size: 7px; }
.spx-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px; background: #fff; color: #b30019; font-size: 13px; font-weight: 700; text-decoration: none; }
.spx-btn:hover { background: #fff1f2; }

.spx-status-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spx-status { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-right: 1px solid #f1f2f4; }
.spx-status:last-child { border-right: none; }
.spx-status > div { display: grid; gap: 1px; min-width: 0; }
.spx-status small { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; }
.spx-status strong { font-size: 15px; color: #111827; }
.spx-status strong.is-good { color: #15803d; }
.spx-status strong.is-wait { color: #1d4ed8; }
.spx-status strong.is-muted { color: #4b5563; }
.spx-status em { font-style: normal; font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spx-status-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 18px; }
.spx-status-icon.is-preferred { background: #fff4e5; color: #ea580c; }
.spx-status-icon.is-mall { background: linear-gradient(135deg, #b30019, #d0001b); color: #fff; }
.spx-ring { --p: 0; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#ea580c calc(var(--p) * 1%), #f1f2f4 0); }
.spx-ring b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 12px; color: #111827; }

.spx-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.spx-kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #eceef1; }
.spx-kpi > i { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: #fff1f2; color: #d0001b; font-size: 15px; }
.spx-kpi b { display: block; font-size: 20px; font-weight: 800; color: #111827; line-height: 1.2; }
.spx-kpi span { font-size: 12px; color: #6b7280; }

.spx-req-list { display: grid; gap: 0; padding-top: 4px; padding-bottom: 4px; }
.spx-req { display: grid; grid-template-columns: 30px minmax(0, 1fr) 150px; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid #f3f4f6; }
.spx-req:last-child { border-bottom: none; }
.spx-req-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: #e2e8f0; color: #475569; }
.spx-req.is-good .spx-req-icon { background: #dcfce7; color: #15803d; }
.spx-req.is-bad .spx-req-icon { background: #fee2e2; color: #b91c1c; }
.spx-req-text { display: grid; gap: 3px; min-width: 0; }
.spx-req-text strong { font-size: 13.5px; color: #111827; }
.spx-req-text small { font-size: 12px; line-height: 1.45; color: #6b7280; }
.spx-req-bar { height: 5px; margin-top: 4px; border-radius: 999px; background: #f1f2f4; overflow: hidden; }
.spx-req-bar span { display: block; height: 100%; border-radius: inherit; background: #94a3b8; }
.spx-req.is-good .spx-req-bar span { background: #22c55e; }
.spx-req.is-bad .spx-req-bar span { background: #ef4444; }
.spx-req-values { display: grid; gap: 2px; justify-items: end; text-align: right; }
.spx-req-values b { font-size: 14.5px; color: #111827; }
.spx-req.is-good .spx-req-values b { color: #15803d; }
.spx-req.is-bad .spx-req-values b { color: #b91c1c; }
.spx-req-values small { font-size: 11.5px; color: #9ca3af; }

.spx-empty { display: grid; justify-items: center; gap: 4px; padding: 26px 12px; text-align: center; color: #6b7280; font-size: 12.5px; }
.spx-empty > i { font-size: 24px; color: #cbd5e1; margin-bottom: 4px; }
.spx-empty strong { font-size: 14px; color: #111827; }
.spx-dl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spx-span-2 { grid-column: span 2; }
.spx-mb { margin: 0 0 10px; }

@media (max-width: 1100px) { .spx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
    .spx-identity { flex-wrap: wrap; }
    .spx-status-row { grid-template-columns: minmax(0, 1fr); }
    .spx-status { border-right: none; border-bottom: 1px solid #f1f2f4; }
    .spx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spx-req { grid-template-columns: 30px minmax(0, 1fr); }
    .spx-req-values { grid-column: 2; justify-items: start; text-align: left; }
    .spx-dl-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spd-crumbs span, .spd-crumbs i { display: none; }
}
html[data-theme="dark"] .spx-hero, html[data-theme="dark"] .spx-kpi { background: #111827; border-color: #1f2937; }
html[data-theme="dark"] .spx-status { border-color: #1f2937; }
html[data-theme="dark"] .spx-status strong, html[data-theme="dark"] .spx-kpi b, html[data-theme="dark"] .spx-req-text strong, html[data-theme="dark"] .spx-req-values b, html[data-theme="dark"] .spd-crumbs strong { color: #f3f4f6; }
html[data-theme="dark"] .spx-ring b { background: #111827; color: #f3f4f6; }
html[data-theme="dark"] .spx-req { border-color: #1f2937; }

/* Product Approval — a seller's submissions in a modal */
.rate-modal-box.pa-modal { width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); padding: 0; display: flex; flex-direction: column; overflow: hidden; text-align: left; }
.pa-modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #f1f2f4; background: #fff; }
.pa-modal-head > div { flex: 1; min-width: 0; }
.pa-modal-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: #111827; }
.pa-modal-head p { margin: 2px 0 0; font-size: 12.5px; color: #6b7280; }
.pa-modal-close { width: 36px; height: 36px; border: none; border-radius: 10px; background: #f3f4f6; color: #6b7280; font-size: 15px; cursor: pointer; }
.pa-modal-close:hover { background: #fee2e2; color: #d0001b; }
.pa-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 22px; }
.pa-modal-body .approval-seller-info { margin-bottom: 16px; }
html[data-theme="dark"] .pa-modal-head { background: #111827; border-color: #1f2937; }
html[data-theme="dark"] .pa-modal-head h3 { color: #f3f4f6; }

/* Order Management — Archive (Delivered / Cancelled) and Cancel order */
.soa-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 22px; border-bottom: 1px solid #f1f2f4; }
.soa-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 11px; background: #f3f4f6; }
.soa-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: none; border-radius: 8px; background: transparent; color: #4b5563; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.soa-tab span { min-width: 20px; padding: 0 6px; border-radius: 999px; background: #e5e7eb; font-size: 11px; line-height: 18px; }
.soa-tab.is-active { background: #fff; color: #d0001b; box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }
.soa-tab.is-active span { background: #fff1f2; color: #d0001b; }
.soa-search { position: relative; flex: 1; max-width: 300px; }
.soa-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 12px; }
.soa-search input { width: 100%; box-sizing: border-box; height: 36px; padding: 0 12px 0 32px; border: 1px solid #e5e7eb; border-radius: 10px; font: inherit; font-size: 13px; }
.soa-panel[hidden], .soa-row[hidden], .soa-none[hidden] { display: none; }
.soa-filter { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 22px 0; }
.soa-chip { padding: 5px 12px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; color: #4b5563; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.soa-chip.is-active { border-color: #d0001b; background: #fff5f5; color: #d0001b; }
.soa-modal .soa-list { padding: 4px 0; }
.soa-row-cancelled .soa-info { gap: 3px; }
.soa-reason { white-space: normal !important; color: #4b5563 !important; }
.soa-reason i { color: #9ca3af; margin-right: 3px; }
.soa-pill { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.soa-pill.is-good { background: #ecfdf3; color: #15803d; }
.soa-pill.is-shop { background: #fef2f2; color: #b91c1c; }
.soa-pill.is-buyer { background: #eff6ff; color: #1d4ed8; }
.soa-pill.is-system { background: #f3f4f6; color: #4b5563; }
.soa-empty > span i { font-size: 12px; margin: 0; color: inherit; }
.soa-none { padding: 30px 22px; text-align: center; font-size: 13px; color: #9ca3af; }
.rate-modal-box.soa-modal { width: min(820px, calc(100vw - 32px)); }

.soc-btn-cancel:hover { border-color: #dc2626; color: #dc2626; background: #fef2f2; }
.soc-btn-danger { border: none; background: #dc2626; color: #fff; gap: 7px; }
.soc-btn-danger:hover { background: #b91c1c; }
.rate-modal-box.soc-cancel-modal { width: min(520px, calc(100vw - 32px)); max-width: none; padding: 22px 0 0; text-align: left; }
.soc-cancel-icon { background: #fef2f2; color: #dc2626; }
.soc-cancel-form { display: grid; gap: 12px; padding: 18px 22px 22px; }
.soc-reasons { display: grid; gap: 8px; }
.soc-reason { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #e5e7eb; border-radius: 11px; font-size: 13.5px; color: #111827; cursor: pointer; }
.soc-reason:has(input:checked) { border-color: #dc2626; background: #fef2f2; }
.soc-reason input { accent-color: #dc2626; }
.soc-note { display: grid; gap: 6px; }
.soc-note > span { font-size: 12.5px; font-weight: 700; color: #374151; }
.soc-note em { font-style: normal; font-weight: 500; color: #9ca3af; }
.soc-note textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; font: inherit; font-size: 13px; }
.soc-cancel-error { margin: -4px 0 0; font-size: 12px; font-weight: 600; color: #b91c1c; }
.soc-cancel-actions { display: flex; justify-content: flex-end; gap: 8px; }
.soc-cancel-actions .soc-btn { height: 38px; padding: 0 16px; }
@media (max-width: 640px) { .soa-search { max-width: none; } .soa-row { flex-wrap: wrap; } }
html[data-theme="dark"] .soa-toolbar { border-color: #1f2937; }
html[data-theme="dark"] .soa-tabs { background: #1f2937; }
html[data-theme="dark"] .soa-tab.is-active { background: #111827; }
html[data-theme="dark"] .soc-reason { border-color: #374151; color: #e5e7eb; }

/* Shop Growth — one scale for all three tabs (matches Performance / Opportunities) */
.sg-hero { padding: 22px 26px; margin-bottom: 16px; border-radius: 16px; }
.sg-eyebrow { font-size: 11.5px; padding: 3px 9px; }
.sg-hero h1 { margin: 10px 0 6px; font-size: 22px; }
.sg-hero p { font-size: 13px; max-width: 580px; }
.sg-current { min-width: 210px; padding: 12px 16px; border-radius: 14px; }
.sg-current small { font-size: 10.5px; }
.sg-current strong { font-size: 15px; }
.sg-tabs { margin-bottom: 16px; padding: 4px; border-radius: 12px; }
.sg-tab { padding: 8px 14px; font-size: 13px; }
.sg-cards { gap: 16px; margin-bottom: 16px; }
.sg-card { gap: 14px; padding: 20px 22px; border-radius: 16px; }
.sg-card-top h2 { font-size: 16.5px; }
.sg-card-top p { font-size: 12.5px; }
.sg-card-badge { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
.sg-pill { padding: 3px 9px; font-size: 11px; }
.sg-benefits { gap: 6px; }
.sg-benefits li { font-size: 12.5px; }
.sg-progress-label { font-size: 12px; }
.sg-missing { font-size: 12px; padding: 9px 11px; }
.sg-btn { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.sg-section { padding: 20px 22px; border-radius: 16px; margin-bottom: 16px; }
.sg-section-head h3 { font-size: 15.5px; }
.sg-section-icon { width: 36px; height: 36px; font-size: 15px; }
.sg-metric-value { font-size: 19px; }
.sg-kpi strong { font-size: 20px; }

/* Apply forms — field errors and the summary at the top */
.sg-form-errors { padding: 12px 14px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 12.5px; scroll-margin-top: 10px; }
.sg-form-errors[hidden] { display: none; }
.sg-form-errors strong { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.sg-form-errors ul { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 3px; }
.sg-form-errors small { display: block; margin-top: 8px; color: #7f1d1d; }
.sg-field-error { display: block; font-size: 11.5px; font-weight: 600; color: #b91c1c; }
.sg-field-error:empty { display: none; }
.sg-field-error-block { margin: -4px 0 4px; }
.sg-field.has-error input, .sg-field.has-error textarea { border-color: #dc2626; background: #fffafa; box-shadow: 0 0 0 3px rgba(220, 38, 38, .08); }
.sg-doc.has-error { border-color: #fca5a5; background: #fffafa; }
.sg-confirm.has-error { background: #fef2f2; outline: 1px solid #fecaca; }
.sg-types.has-error .sg-type { border-color: #fca5a5; }
.sg-types.has-error::after { content: attr(data-required-group); grid-column: 1 / -1; font-size: 11.5px; font-weight: 600; color: #b91c1c; }
.sg-field input::placeholder, .sg-field textarea::placeholder { color: #9ca3af; }
.sg-btn-primary[disabled] { opacity: .7; cursor: progress; }
.soc-cancel-link { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 7px 0 0; border: none; border-top: 1px dashed #eceef1; background: none; color: #b91c1c; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.soc-cancel-link:hover { color: #7f1d1d; text-decoration: underline; }

/* Admin Vouchers: new-user vouchers */
.vc-newuser-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #4338ca; font-size: 11px; font-weight: 800; vertical-align: middle; white-space: nowrap; }
.vc-newuser-toggle { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; padding: 12px 14px; border: 1px solid #e0e7ff; border-radius: 12px; background: #f8faff; cursor: pointer; }
.vc-newuser-toggle input { margin-top: 3px; width: 16px; height: 16px; accent-color: #4338ca; }
.vc-newuser-toggle span { display: grid; gap: 2px; }
.vc-newuser-toggle strong { font-size: 13px; color: #312e81; }
.vc-newuser-toggle small { font-size: 12px; color: #6b7280; }

/* Pickup Requests — one seller = one stop (header row above their parcels) */
.pkr-stop + .pkr-stop .pkr-stop-head td { border-top: 10px solid #f6f7f9; }
.pkr-stop-head td { background: #fafbfc; padding: 12px 14px; }
.pkr-stop-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pkr-stop-who { display: flex; align-items: center; gap: 10px; min-width: 200px; flex: 1 1 240px; }
.pkr-stop-name { font-weight: 800; color: #111827; font-size: 14px; }
.pkr-stop-count { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #fee2e2; color: #b00017; font-size: 11.5px; font-weight: 800; }
.pkr-stop-rider { display: flex; flex-wrap: wrap; gap: 6px; }
.pkr-stop-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 12px; }
.pkr-stop-tag.on { background: #ecfdf3; color: #067647; font-weight: 700; }
.pkr-stop-tag.warn { background: #fffaeb; color: #b54708; }
.pkr-stop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.pkr-stop-actions .pkr-btn-primary { width: auto; }
@media (max-width: 720px) { .pkr-stop-actions { margin-left: 0; width: 100%; } }

/* Pickup Requests — seller row opens a modal of their parcels */
.pkr-seller-btn { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.pkr-seller-btn > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.pkr-seller-btn:hover .pkr-stop-name { color: #d0001b; text-decoration: underline; }
.pkr-count-btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 12px; border: 1px solid #fecdd3; border-radius: 10px; background: #fff1f2; color: #9f1239; font: inherit; font-size: 12.5px; cursor: pointer; }
.pkr-count-btn strong { font-size: 18px; line-height: 1; }
.pkr-count-btn span { font-size: 11px; font-weight: 700; }
.pkr-count-btn:hover { border-color: #d0001b; }
.pkr-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pkr-sum-card { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #eef0f3; border-radius: 12px; background: #fafbfc; }
.pkr-sum-card > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #fff1f2; color: #d0001b; }
.pkr-sum-card strong { display: block; font-size: 17px; color: #111827; overflow-wrap: anywhere; }
.pkr-sum-card span { font-size: 11.5px; color: #6b7280; }
.pkr-sum-card.warn { border-color: #fedf89; background: #fffaeb; }
.pkr-sum-card.warn > i { background: #fef0c7; color: #b54708; }
.pkr-modal-actions { margin-top: 16px; display: flex; justify-content: flex-end; }
@media (max-width: 820px) { .pkr-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html[data-theme="dark"] .pkr-sum-card { background: #111827; border-color: #1f2937; }
html[data-theme="dark"] .pkr-sum-card strong { color: #f3f4f6; }

/* Pickup Requests — one rider picker per seller (select + Assign all) */
.pkr-pick { display: flex; flex-direction: column; gap: 6px; min-width: 210px; max-width: 260px; margin: 0; }
.pkr-pick select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 9px; background: #f9fafb; font: inherit; font-size: 12.5px; color: #111827; text-overflow: ellipsis; }
.pkr-pick select:focus { outline: none; border-color: #d0001b; box-shadow: 0 0 0 3px rgba(208, 0, 27, .1); }
.pkr-pick .pkr-btn { width: 100%; }
.pkr-modal-actions .pkr-pick { flex-direction: row; max-width: 460px; }
.pkr-modal-actions .pkr-pick .pkr-btn { width: auto; }
.pkr-stop-tag { white-space: nowrap; }
.pkr-stop-tag.done { background: #f2f4f7; color: #344054; }
.pkr-table .pkr-seller-btn { min-width: 190px; }
.pkr-table .pkr-seller-btn .pa-muted { white-space: normal; line-height: 1.35; }
.pkr-count-btn { white-space: nowrap; }
.pkr-table .pkr-pick { min-width: 150px; max-width: 180px; }
.pkr-table th.pkr-action, .pkr-table td.pkr-action { width: 180px; }
.pkr-table .pkr-seller-btn { min-width: 160px; }
.pkr-table td { padding-left: 12px; padding-right: 12px; }
.pkr-table.pa-table > thead th, .pkr-table.pa-table > tbody > tr[data-filter-row] > td { padding-left: 12px; padding-right: 12px; }
.pkr-table.pa-table > thead th:first-child, .pkr-table.pa-table > tbody > tr[data-filter-row] > td:first-child { padding-left: 20px; }
.pkr-table.pa-table > thead th:last-child, .pkr-table.pa-table > tbody > tr[data-filter-row] > td:last-child { padding-right: 20px; }
.hub-count { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #fff1f2; color: #d0001b; font-size: 11.5px; line-height: 20px; text-align: center; vertical-align: 2px; }