/* =========================================================
   SELLER DASHBOARD — MERCHANT TERMINAL THEME
   A professional, data-first workspace for store owners,
   in Kurios purple: a deep slate-violet sidebar grouped into
   sections, a cool light canvas, white cards with a coloured
   accent edge, and IBM Plex Mono for figures, labels, codes and
   table headers so numbers line up and read like a ledger.

   On phones: a slim top bar with the section's name, full-width
   cards and a bottom tab bar (Home, Orders, Products, KWallet,
   More).

   Scoped to #sellerApprovedState so no other page changes.
   Loaded after style.css and modern.css (which use !important
   in places, so a few overrides here need it too).
   ========================================================= */

#sellerApprovedState {
    /* sidebar */
    --st-side: #17122a;
    --st-side-panel: #221b38;
    --st-side-border: #30274b;
    --st-side-text: #c9c2dc;
    --st-side-muted: #7f76a0;
    /* canvas + cards */
    --st-canvas: #f4f3f8;
    --st-card: #ffffff;
    --st-sunk: #f8f7fb;
    --st-head: #f3f2f7;
    --st-border: #e4e2ec;
    --st-border-soft: #efedf4;
    --st-ink: #16131f;
    --st-ink-2: #3b3650;
    --st-muted: #6b6582;
    --st-faint: #9993ad;
    /* brand + signals */
    --st-purple: #6d28d9;
    --st-purple-hover: #5b21b6;
    --st-purple-deep: #4c1d95;
    --st-purple-soft: #f3edff;
    --st-purple-line: #ddd0fb;
    --st-lilac: #c4b5fd;
    --st-emerald: #059669;
    --st-emerald-soft: #ecfdf5;
    --st-amber: #d97706;
    --st-amber-soft: #fffbeb;
    --st-blue: #2563eb;
    --st-rose: #e11d48;
    --st-rose-soft: #fff1f2;
    --st-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --st-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --st-radius: 8px;
    --st-radius-sm: 5px;
    --st-shadow: 0 1px 2px rgba(22, 19, 31, 0.05);
    --st-bottomnav-h: 64px;
}

/* ---------------------------------------------------------
   FRAME
   --------------------------------------------------------- */

#sellerPage.seller-dashboard-active:has(#sellerApprovedState[style*="block"]) {
    background: var(--st-canvas, #f4f3f8) !important;
}

/* The dashboard fills the screen, edge to edge. */
#sellerPage.seller-dashboard-active #sellerPanelBody:has(> #sellerApprovedState[style*="block"]) {
    padding: 0 !important;
}

#sellerApprovedState .ks-seller-app {
    --ks-base: var(--st-canvas);
    --ks-surface: var(--st-card);
    --ks-ink: var(--st-ink);
    --ks-muted: var(--st-muted);
    --ks-muted-soft: var(--st-faint);
    --ks-hairline: var(--st-border);
    --ks-hairline-soft: var(--st-border-soft);
    --ks-purple: var(--st-purple);
    --ks-purple-dark: var(--st-purple-deep);
    --ks-purple-soft: var(--st-purple-soft);
    --ks-gold: var(--st-purple);
    --ks-gold-soft: var(--st-purple-soft);
    --ks-green: var(--st-emerald);
    --ks-green-soft: var(--st-emerald-soft);
    --ks-red: var(--st-rose);
    --ks-red-soft: var(--st-rose-soft);

    background: var(--st-canvas);
    color: var(--st-ink);
    font-family: var(--st-sans);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
    grid-template-columns: 256px minmax(0, 1fr);
    -webkit-font-smoothing: antialiased;
}

#sellerApprovedState .ks-seller-app h1,
#sellerApprovedState .ks-seller-app h2,
#sellerApprovedState .ks-seller-app h3,
#sellerApprovedState .ks-seller-app .seller-dashboard-header h3,
#sellerApprovedState .ks-seller-app .ks-seller-page-head h2 {
    font-family: var(--st-sans);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--st-ink);
}

/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

#sellerApprovedState .ks-seller-sidebar {
    background: var(--st-side) !important;
    color: var(--st-side-text);
    padding: 0 12px 12px;
    border-right: 1px solid var(--st-side-border);
    user-select: none;
}

#sellerApprovedState .ks-seller-sidebar::before,
#sellerApprovedState .ks-seller-sidebar::after {
    display: none;
}

#sellerApprovedState .ks-seller-brand {
    margin: 0 -12px 12px;
    padding: 16px 16px;
    border-bottom: 1px solid var(--st-side-border);
    gap: 12px;
}

#sellerApprovedState .ks-seller-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8b5cf6, #5b21b6);
    color: #fff;
    font-size: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#sellerApprovedState .ks-seller-brand strong {
    font-family: var(--st-sans);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
}

#sellerApprovedState .ks-seller-brand span {
    font-family: var(--st-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--st-lilac);
}

#sellerApprovedState .ks-seller-exit-btn {
    color: var(--st-side-muted);
}

/* Store pill: which store this is, and that it's approved. */
#sellerApprovedState .ks-seller-profile {
    background: var(--st-side-panel);
    border: 1px solid var(--st-side-border);
    border-radius: var(--st-radius-sm);
    padding: 10px 12px;
    margin: 0 0 10px;
    gap: 10px;
}

#sellerApprovedState .ks-seller-avatar {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background: #2c2447;
    color: var(--st-lilac);
    border: 1px solid var(--st-side-border);
}

#sellerApprovedState .ks-seller-profile-copy strong {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

#sellerApprovedState .ks-seller-profile-copy span {
    font-family: var(--st-mono);
    font-size: 10.5px;
    color: #6ee7b7;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#sellerApprovedState .ks-seller-profile-copy span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

#sellerApprovedState .ks-seller-profile-copy span i {
    display: none;
}

#sellerApprovedState .ks-seller-nav {
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

#sellerApprovedState .ks-grow-card,
#sellerApprovedState .ks-help-card {
    flex-shrink: 0;
}

#sellerApprovedState .ks-nav-group-label {
    padding: 14px 12px 5px;
    font-family: var(--st-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--st-side-muted);
}

#sellerApprovedState .ks-seller-nav-item,
#sellerApprovedState .ks-seller-home-icon-btn {
    border-radius: var(--st-radius-sm);
    border: 1px solid transparent;
    color: var(--st-side-text);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    gap: 11px;
    background: transparent;
    box-shadow: none;
    transition: background 0.15s ease, color 0.15s ease;
}

#sellerApprovedState .ks-seller-nav-item i,
#sellerApprovedState .ks-seller-home-icon-btn i {
    color: var(--st-side-muted);
    width: 16px;
    text-align: center;
    font-size: 13px;
}

#sellerApprovedState .ks-seller-nav-item:hover,
#sellerApprovedState .ks-seller-home-icon-btn:hover {
    background: var(--st-side-panel);
    color: #fff;
}

#sellerApprovedState .ks-seller-nav-item.active,
#sellerApprovedState .ks-seller-home-icon-btn.active {
    background: rgba(139, 92, 246, 0.14);
    border-color: rgba(139, 92, 246, 0.32);
    color: #ddd6fe;
    box-shadow: none;
}

#sellerApprovedState .ks-seller-nav-item.active i,
#sellerApprovedState .ks-seller-home-icon-btn.active i {
    color: var(--st-lilac);
}

#sellerApprovedState .ks-seller-nav-item.active::before,
#sellerApprovedState .ks-seller-nav-item.active::after {
    display: none;
}

#sellerApprovedState .ks-seller-nav-item[data-seller-action="store"] {
    margin-top: 10px;
}

#sellerApprovedState .ks-seller-signout,
#sellerApprovedState .ks-seller-signout i {
    color: #fda4af;
}

/* Counters (pending cook / print orders, unread messages) */
#sellerApprovedState .ks-cook-orders-badge {
    background: var(--st-purple);
    color: #fff;
    font-family: var(--st-mono);
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    padding: 1px 6px;
    min-width: 0;
    height: auto;
    line-height: 1.5;
}

#sellerApprovedState .ks-grow-card {
    background: var(--st-side-panel) !important;
    border: 1px solid var(--st-side-border);
    border-radius: var(--st-radius-sm);
    color: var(--st-side-text);
    box-shadow: none;
    padding: 14px;
}

#sellerApprovedState .ks-grow-card strong {
    color: #fff;
    font-size: 13px;
}

#sellerApprovedState .ks-grow-card p {
    color: var(--st-side-muted);
    font-size: 12px;
}

#sellerApprovedState .ks-grow-card button {
    background: var(--st-purple);
    color: #fff;
    border-radius: var(--st-radius-sm);
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
}

#sellerApprovedState .ks-grow-icon {
    display: none;
}

#sellerApprovedState .ks-help-card {
    background: transparent;
    border: 1px solid var(--st-side-border);
    border-radius: var(--st-radius-sm);
    color: var(--st-side-text);
    font-size: 12px;
}

#sellerApprovedState .ks-help-card span {
    font-family: var(--st-mono);
    font-size: 10.5px;
    color: var(--st-side-muted);
}

/* ---------------------------------------------------------
   TOP BAR
   --------------------------------------------------------- */

#sellerApprovedState .ks-seller-content {
    background: var(--st-canvas) !important;
}

#sellerApprovedState .ks-seller-content::before,
#sellerApprovedState .ks-seller-content::after,
#sellerApprovedState .ks-seller-topbar::before,
#sellerApprovedState .ks-seller-topbar::after {
    display: none;
}

#sellerApprovedState .ks-seller-topbar {
    background: var(--st-card) !important;
    border-bottom: 1px solid var(--st-border) !important;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    height: 64px;
    min-height: 64px;
    padding: 0 24px;
}

#sellerApprovedState .ks-topbar-title {
    display: none;
    font-size: 16px;
    font-weight: 700;
    color: var(--st-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

#sellerApprovedState .ks-seller-search {
    background: var(--st-sunk);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    box-shadow: none;
    height: 36px;
    max-width: 520px;
}

#sellerApprovedState .ks-seller-search:focus-within {
    background: #fff;
    border-color: var(--st-purple);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.12);
}

#sellerApprovedState .ks-seller-search input {
    background: transparent;
    font-family: var(--st-mono);
    font-size: 12px;
    color: var(--st-ink);
}

#sellerApprovedState .ks-seller-search i {
    color: var(--st-faint);
    font-size: 12px;
}

#sellerApprovedState .ks-icon-btn,
#sellerApprovedState .ks-sidebar-toggle {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--st-radius-sm);
    color: var(--st-muted);
    box-shadow: none;
    width: 36px;
    height: 36px;
}

#sellerApprovedState .ks-icon-btn:hover,
#sellerApprovedState .ks-sidebar-toggle:hover {
    background: var(--st-head);
    color: var(--st-ink);
}

#sellerApprovedState .ks-notification-dot {
    background: var(--st-purple);
    box-shadow: 0 0 0 2px #fff;
}

#sellerApprovedState .ks-user-menu {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--st-border);
    border-radius: 0;
    padding-left: 12px;
    box-shadow: none;
    color: var(--st-ink);
    font-size: 12.5px;
    font-weight: 700;
}

#sellerApprovedState .ks-user-avatar {
    border-radius: var(--st-radius-sm);
    background: var(--st-purple-soft);
    border: 1px solid var(--st-purple-line);
    color: var(--st-purple);
    font-family: var(--st-mono);
    font-weight: 600;
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

#sellerApprovedState .ks-add-product-top,
#sellerApprovedState .seller-dashboard-add-button:not(.seller-dashboard-secondary-button),
#sellerApprovedState .auth-button,
#sellerApprovedState .sp-btn:not(.ghost):not(.success):not(.danger),
#sellerApprovedState .profile-save-button,
#sellerApprovedState .ks-co-cta:not(.ghost) {
    background: var(--st-purple) !important;
    background-image: none !important;
    color: #fff;
    border: 1px solid var(--st-purple);
    border-radius: var(--st-radius-sm);
    box-shadow: 0 1px 2px rgba(76, 29, 149, 0.25);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
}

#sellerApprovedState .ks-add-product-top:hover,
#sellerApprovedState .seller-dashboard-add-button:not(.seller-dashboard-secondary-button):hover,
#sellerApprovedState .auth-button:hover,
#sellerApprovedState .sp-btn:not(.ghost):not(.success):not(.danger):hover,
#sellerApprovedState .ks-co-cta:not(.ghost):hover {
    background: var(--st-purple-hover) !important;
    border-color: var(--st-purple-hover);
}

#sellerApprovedState .seller-dashboard-secondary-button,
#sellerApprovedState .sp-btn.ghost,
#sellerApprovedState .profile-cancel-button,
#sellerApprovedState .kcharge-action-btn,
#sellerApprovedState .ks-co-cta.ghost,
#sellerApprovedState .ks-head-actions button:not(.primary) {
    background: var(--st-card) !important;
    color: var(--st-ink-2);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    box-shadow: none;
    font-weight: 600;
}

#sellerApprovedState .seller-dashboard-secondary-button:hover,
#sellerApprovedState .sp-btn.ghost:hover,
#sellerApprovedState .kcharge-action-btn:hover,
#sellerApprovedState .ks-head-actions button:not(.primary):hover {
    background: var(--st-sunk) !important;
    border-color: #d4d0e0;
}

#sellerApprovedState .sp-btn.success {
    background: var(--st-emerald);
    border-color: var(--st-emerald);
    border-radius: var(--st-radius-sm);
    box-shadow: none;
}

/* ---------------------------------------------------------
   PAGE HEAD — a control card on the dashboard
   --------------------------------------------------------- */

#sellerApprovedState .ks-seller-page-head {
    background: var(--st-card) !important;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    box-shadow: var(--st-shadow);
    margin: 24px 24px 20px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-direction: row;
}

#sellerApprovedState .ks-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-family: var(--st-mono);
    font-size: 11px;
    color: var(--st-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

#sellerApprovedState .ks-head-meta b {
    color: var(--st-emerald);
    font-weight: 600;
}

#sellerApprovedState .ks-head-meta .sep {
    color: var(--st-border);
}

#sellerApprovedState .ks-seller-page-head h2 {
    font-size: 20px;
    line-height: 1.25;
}

#sellerApprovedState .ks-seller-page-head p {
    color: var(--st-muted);
    font-size: 13px;
    margin-top: 2px;
}

#sellerApprovedState .ks-wave {
    display: none;
}

#sellerApprovedState .ks-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#sellerApprovedState .ks-head-actions button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    font: 600 12px/1 var(--st-sans);
    cursor: pointer;
}

#sellerApprovedState .ks-head-actions button.primary {
    background: var(--st-side);
    color: #fff;
    border: 1px solid var(--st-side);
    border-radius: var(--st-radius-sm);
}

#sellerApprovedState .ks-head-actions button.primary:hover {
    background: #000;
}

/* Only the dashboard opens on the greeting card. */
#sellerApprovedState .ks-seller-app[data-seller-view]:not([data-seller-view="overview"]) .ks-seller-page-head {
    display: none;
}

#sellerApprovedState .ks-seller-app .seller-dash-tab {
    padding: 0 24px 32px;
}

#sellerApprovedState .ks-seller-app[data-seller-view]:not([data-seller-view="overview"]) .seller-dash-tab {
    padding-top: 24px;
}

#sellerApprovedState .seller-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    box-shadow: var(--st-shadow);
    padding: 14px 18px;
    margin-bottom: 18px;
}

#sellerApprovedState .seller-dashboard-header h3 {
    font-size: 16px;
    margin: 0;
}

/* ---------------------------------------------------------
   CARDS
   --------------------------------------------------------- */

#sellerApprovedState .ks-panel,
#sellerApprovedState .ks-metric-card,
#sellerApprovedState .sp-card,
#sellerApprovedState .ks-co-card,
#sellerApprovedState .ks-co-status,
#sellerApprovedState .kcharge-panel,
#sellerApprovedState .kcharge-summary-card,
#sellerApprovedState .kitchen-status-card,
#sellerApprovedState .seller-product-card,
#sellerApprovedState .seller-sale-card,
#sellerApprovedState .coming-soon-panel,
#sellerApprovedState .ks-seller-conversations-pane,
#sellerApprovedState .ks-seller-thread-pane {
    background: var(--st-card) !important;
    border: 1px solid var(--st-border) !important;
    border-radius: var(--st-radius) !important;
    box-shadow: var(--st-shadow) !important;
    transition: none !important;
}

#sellerApprovedState .ks-panel {
    padding: 0;
    overflow: hidden;
}

/* Panel header: title + mono subtitle on a tinted strip. */
#sellerApprovedState .ks-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    margin: 0;
    background: #fbfafd;
    border-bottom: 1px solid var(--st-border-soft);
}

#sellerApprovedState .ks-panel-head h3 {
    font-size: 13.5px;
    margin: 0;
}

#sellerApprovedState .ks-panel-head p {
    font-family: var(--st-mono);
    font-size: 11px;
    color: var(--st-muted);
    margin: 2px 0 0;
}

#sellerApprovedState .ks-panel-head button,
#sellerApprovedState .ks-panel-head a {
    background: transparent;
    border: 0;
    color: var(--st-purple);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

#sellerApprovedState .ks-panel-head button::after {
    content: " →";
}

#sellerApprovedState .ks-panel > :not(.ks-panel-head) {
    margin-left: 18px;
    margin-right: 18px;
}

#sellerApprovedState .ks-panel > :last-child {
    margin-bottom: 18px;
}

#sellerApprovedState .ks-panel > .ks-panel-head + * {
    margin-top: 16px;
}

/* Key figures: accent edge, mono label and number. */
#sellerApprovedState .ks-metric-grid {
    grid-template-columns: 1.45fr 1fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

#sellerApprovedState .ks-metric-card {
    position: relative;
    overflow: hidden;
    padding: 16px 16px 16px 20px;
    min-height: 0;
    align-items: flex-start;
    gap: 12px;
}

#sellerApprovedState .ks-metric-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--st-accent, var(--st-purple));
}

#sellerApprovedState .ks-metric-card:nth-child(1) { --st-accent: var(--st-purple); }
#sellerApprovedState .ks-metric-card:nth-child(2) { --st-accent: var(--st-blue); }
#sellerApprovedState .ks-metric-card:nth-child(3) { --st-accent: var(--st-emerald); }
#sellerApprovedState .ks-metric-card:nth-child(4) { --st-accent: #a78bfa; }
#sellerApprovedState .ks-metric-card:nth-child(5) { --st-accent: var(--st-amber); }

#sellerApprovedState .ks-metric-icon {
    display: none;
}

#sellerApprovedState .ks-metric-card span {
    display: block;
    font-family: var(--st-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--st-muted);
    line-height: 1.4;
}

#sellerApprovedState .ks-metric-card strong {
    display: block;
    font-family: var(--st-mono);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--st-ink);
    margin-top: 6px;
    line-height: 1.15;
}

#sellerApprovedState .ks-metric-card small {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--st-muted);
    line-height: 1.35;
}

#sellerApprovedState .ks-metric-card:first-child {
    background: linear-gradient(180deg, #faf7ff, #fff) !important;
}

#sellerApprovedState .ks-metric-card:first-child strong {
    color: var(--st-purple-deep);
}

#sellerApprovedState .ks-dashboard-grid {
    gap: 18px;
    margin-bottom: 18px;
}

/* Sales chart */
#sellerApprovedState .ks-line-chart svg path[fill]:not([fill="none"]),
#sellerApprovedState .ks-line-chart svg polygon {
    fill: rgba(109, 40, 217, 0.08);
}

#sellerApprovedState .ks-line-chart svg polyline,
#sellerApprovedState .ks-line-chart svg path[stroke]:not([stroke="none"]) {
    stroke: var(--st-purple);
}

#sellerApprovedState .ks-line-chart svg circle {
    fill: var(--st-side);
    stroke: var(--st-lilac);
}

#sellerApprovedState .ks-line-chart svg line {
    stroke: var(--st-border-soft);
}

#sellerApprovedState .ks-line-chart svg text {
    fill: var(--st-faint);
    font-family: var(--st-mono);
    font-size: 10px;
}

#sellerApprovedState .ks-donut strong {
    font-family: var(--st-mono);
    font-weight: 600;
}

#sellerApprovedState .ks-donut span {
    font-family: var(--st-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#sellerApprovedState .ks-donut-legend {
    font-size: 12px;
    gap: 10px;
}

#sellerApprovedState .seller-status-row {
    white-space: nowrap;
}

#sellerApprovedState .ks-donut-legend strong,
#sellerApprovedState .ks-donut-legend b {
    font-family: var(--st-mono);
    font-weight: 600;
}

/* Store summary: a ledger. */
#sellerApprovedState .ks-performance-list > div {
    border-color: var(--st-border-soft);
    padding: 11px 0;
    font-size: 12.5px;
}

#sellerApprovedState .ks-performance-list i {
    color: var(--st-faint);
    background: transparent;
}

#sellerApprovedState .ks-performance-list span {
    color: var(--st-muted);
}

#sellerApprovedState .ks-performance-list strong {
    font-family: var(--st-mono);
    font-weight: 600;
    color: var(--st-ink);
}

#sellerApprovedState .ks-performance-list > div:first-child strong {
    color: var(--st-emerald);
}

#sellerApprovedState .ks-performance-list strong em {
    font-style: normal;
    font-weight: 500;
    margin-left: 6px;
    color: var(--st-muted);
}

#sellerApprovedState .ks-quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (min-width: 901px) {
    #sellerApprovedState .ks-dashboard-grid-bottom > .ks-panel:only-child {
        grid-column: 1 / -1;
    }

    #sellerApprovedState .ks-dashboard-grid-bottom .ks-quick-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

#sellerApprovedState .ks-insight-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

#sellerApprovedState .ks-insight {
    background: #fff;
    border: 1px solid var(--st-border-soft);
    border-radius: 12px;
    padding: 10px 12px;
}

#sellerApprovedState .ks-insight b {
    display: block;
    font-family: var(--st-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--st-muted);
}

#sellerApprovedState .ks-insight strong {
    display: block;
    margin-top: 4px;
    font-family: var(--st-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--st-ink);
}

#sellerApprovedState .ks-insight em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 11px;
    color: var(--st-muted);
}

#sellerApprovedState .ks-insight.up strong { color: var(--st-emerald); }
#sellerApprovedState .ks-insight.down strong { color: #b91c1c; }

#sellerApprovedState .ks-mix-row { margin-bottom: 14px; }
#sellerApprovedState .ks-mix-row:last-child { margin-bottom: 0; }

#sellerApprovedState .ks-mix-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
}

#sellerApprovedState .ks-mix-top i { color: var(--st-purple); width: 16px; }

#sellerApprovedState .ks-mix-top span {
    flex: 1;
    color: var(--st-muted);
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    font-size: 12.5px;
}

#sellerApprovedState .ks-mix-top strong {
    font-family: var(--st-mono);
    font-weight: 600;
    color: var(--st-ink);
}

#sellerApprovedState .ks-mix-top em {
    font-style: normal;
    min-width: 38px;
    text-align: right;
    color: var(--st-muted);
    font-size: 11px;
}

#sellerApprovedState .ks-mix-track {
    height: 7px;
    margin-top: 6px;
    border-radius: 99px;
    background: #f3f0f8;
    overflow: hidden;
}

#sellerApprovedState .ks-mix-track span {
    display: block;
    height: 100%;
    border-radius: 99px;
}

#sellerApprovedState .ks-mix-count {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 11px;
    color: var(--st-muted);
}

#sellerApprovedState #sellerSalesGraph {
    height: 220px;
}

#sellerApprovedState #sellerSalesGraph svg circle {
    fill: #fff;
    stroke: #c4b5fd;
    stroke-width: 2;
}

#sellerApprovedState #sellerSalesGraph svg circle.ks-peak {
    fill: var(--st-purple);
    stroke: #fff;
}

#sellerApprovedState #sellerSalesGraph svg text.ks-peak-label {
    fill: var(--st-purple-deep);
    font-size: 11px;
    font-weight: 700;
}

#sellerApprovedState #sellerSalesGraph svg polygon {
    fill: url(#sellerTrendFill);
}

#sellerApprovedState #sellerSalesGraph svg line.ks-avg {
    stroke: #c4b5fd;
}

#sellerApprovedState #sellerSalesGraph svg polyline.ks-glow {
    stroke-opacity: 0.16;
}

#sellerApprovedState .ks-service-layout {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

#sellerApprovedState .ks-service-donut svg {
    width: 108px;
    height: 108px;
    display: block;
}

#sellerApprovedState .ks-service-donut text:first-of-type {
    fill: var(--st-ink);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--st-mono);
}

#sellerApprovedState .ks-service-donut text:last-of-type {
    fill: var(--st-muted);
    font-size: 7px;
}

#sellerApprovedState .ks-chart-legend b {
    margin-left: 4px;
    font-family: var(--st-mono);
    font-weight: 600;
    color: var(--st-ink);
}

#sellerApprovedState .ks-product-insight {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 4px;
}

#sellerApprovedState .ks-product-list {
    max-height: 440px;
    overflow: auto;
}

#sellerApprovedState .ks-product-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--st-border-soft);
}

#sellerApprovedState .ks-product-row:last-child { border-bottom: 0; }

#sellerApprovedState .ks-product-rank {
    font-family: var(--st-mono);
    font-size: 12px;
    color: var(--st-faint);
}

#sellerApprovedState .ks-product-row strong {
    display: block;
    font-size: 13px;
    color: var(--st-ink);
}

#sellerApprovedState .ks-product-row span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--st-muted);
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
}

#sellerApprovedState .ks-product-flag {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 7px;
    border-radius: 99px;
    background: #f3e8ff;
    color: var(--st-purple-deep);
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
}

#sellerApprovedState .ks-product-row .ks-mix-track span {
    background: var(--st-purple);
}

#sellerApprovedState .ks-product-rate {
    text-align: right;
    font-family: var(--st-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--st-ink);
}

#sellerApprovedState .ks-product-rate em {
    display: block;
    font-style: normal;
    font-weight: 500;
    color: var(--st-muted);
    font-size: 10px;
}

#sellerApprovedState .ks-product-row > b {
    font-family: var(--st-mono);
    font-size: 13px;
    font-weight: 600;
}

#sellerApprovedState .ks-review {
    padding: 10px 0;
    border-bottom: 1px solid var(--st-border-soft);
}

#sellerApprovedState .ks-review:last-child { border-bottom: 0; }

#sellerApprovedState .ks-review b {
    font-family: var(--st-mono);
    font-size: 12px;
    color: var(--st-purple-deep);
}

#sellerApprovedState .ks-review p {
    margin: 4px 0 2px;
    font-size: 13px;
    color: var(--st-ink);
}

#sellerApprovedState .ks-review em {
    font-style: normal;
    font-size: 11px;
    color: var(--st-muted);
}

#sellerApprovedState .ks-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 11px;
    color: var(--st-muted);
}

#sellerApprovedState .ks-chart-legend i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 99px;
    vertical-align: middle;
}

#sellerApprovedState .ks-quick-grid button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--st-border-soft);
    background: #faf7ff;
    color: var(--st-ink);
    cursor: pointer;
    text-align: left;
}

#sellerApprovedState .ks-quick-grid button i {
    color: var(--st-purple);
    margin-bottom: 4px;
}

#sellerApprovedState .ks-quick-grid button b {
    font-size: 13px;
    font-weight: 700;
}

#sellerApprovedState .ks-quick-grid button span {
    font-size: 11px;
    color: var(--st-muted);
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
}

/* Top products */
#sellerApprovedState .seller-top-product-row {
    border-color: var(--st-border-soft);
    font-size: 12.5px;
}

#sellerApprovedState .seller-top-product-row strong,
#sellerApprovedState .seller-top-product-row b {
    font-family: var(--st-mono);
}

#sellerApprovedState .seller-top-product-qty {
    font-family: var(--st-mono);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--st-purple);
    background: var(--st-purple-soft);
    border: 1px solid var(--st-purple-line);
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
}

#sellerApprovedState .seller-top-product-thumb {
    border-radius: var(--st-radius-sm);
    background: var(--st-purple-soft);
    border: 1px solid var(--st-purple-line);
    color: var(--st-purple);
}

/* ---------------------------------------------------------
   TABLES + LISTS
   --------------------------------------------------------- */

#sellerApprovedState .seller-orders-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12.5px;
}

#sellerApprovedState .seller-orders-table th {
    background: var(--st-head);
    color: var(--st-muted);
    font-family: var(--st-mono);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--st-border);
}

#sellerApprovedState .seller-orders-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--st-border-soft);
    color: var(--st-ink-2);
}

#sellerApprovedState .seller-orders-table tr:hover td {
    background: var(--st-sunk);
}

#sellerApprovedState .seller-orders-table td:first-child {
    font-family: var(--st-mono);
    font-weight: 600;
    color: var(--st-ink);
}

/* Status chips: mono, bordered, colour by meaning. */
#sellerApprovedState .seller-order-status-pill,
#sellerApprovedState .seller-product-inactive-tag,
#sellerApprovedState .discount-status-tag,
#sellerApprovedState .cook-chip {
    display: inline-block;
    font-family: var(--st-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 2px 7px;
    border: 1px solid currentColor;
    background: transparent;
}

#sellerApprovedState .seller-order-status-pill.paid,
#sellerApprovedState .seller-order-status-pill.delivered,
#sellerApprovedState .seller-order-status-pill.completed {
    color: #047857;
    background: var(--st-emerald-soft);
    border-color: #a7f3d0;
}

#sellerApprovedState .seller-order-status-pill.pending,
#sellerApprovedState .seller-order-status-pill.processing {
    color: #b45309;
    background: var(--st-amber-soft);
    border-color: #fde68a;
}

#sellerApprovedState .seller-order-status-pill.failed,
#sellerApprovedState .seller-order-status-pill.cancelled,
#sellerApprovedState .seller-product-inactive-tag {
    color: #be123c;
    background: var(--st-rose-soft);
    border-color: #fecdd3;
}

#sellerApprovedState .seller-product-card {
    padding: 12px 14px;
}

#sellerApprovedState .seller-product-card + .seller-product-card,
#sellerApprovedState .seller-sale-card + .seller-sale-card {
    margin-top: 8px;
}

#sellerApprovedState .seller-product-thumb {
    border-radius: var(--st-radius-sm);
    background: var(--st-sunk);
    border: 1px solid var(--st-border-soft);
}

#sellerApprovedState .seller-product-info strong,
#sellerApprovedState .seller-product-info h4 {
    font-size: 14px;
    font-weight: 700;
}

#sellerApprovedState .seller-product-info p,
#sellerApprovedState .seller-product-info span:not(.seller-product-inactive-tag) {
    font-family: var(--st-mono);
    font-size: 12px;
    color: var(--st-muted);
}

#sellerApprovedState .seller-product-actions button {
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    background: var(--st-card);
    color: var(--st-muted);
    box-shadow: none;
}

#sellerApprovedState .seller-product-actions button:hover {
    color: var(--st-purple);
    border-color: var(--st-purple-line);
    background: var(--st-purple-soft);
}

#sellerApprovedState .seller-product-actions .delete-product-btn:hover {
    color: var(--st-rose);
    border-color: #fecdd3;
    background: var(--st-rose-soft);
}

#sellerApprovedState .seller-sale-amount,
#sellerApprovedState .seller-sale-card-top strong {
    font-family: var(--st-mono);
    color: var(--st-ink);
}

/* ---------------------------------------------------------
   KWALLET
   --------------------------------------------------------- */

#sellerApprovedState .ks-wallet-balance-card {
    background: var(--st-side) !important;
    background-image: radial-gradient(420px 200px at 100% 0%, rgba(139, 92, 246, 0.28), transparent 70%) !important;
    border: 1px solid var(--st-side-border);
    border-radius: var(--st-radius);
    box-shadow: none;
    color: var(--st-side-text);
}

#sellerApprovedState .ks-wallet-balance-card span,
#sellerApprovedState .ks-wallet-balance-card p {
    font-family: var(--st-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--st-lilac);
}

#sellerApprovedState .ks-wallet-balance-card strong,
#sellerApprovedState .ks-wallet-balance-card h2 {
    font-family: var(--st-mono);
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
}

#sellerApprovedState .ks-co-eyebrow,
#sellerApprovedState .form-section-label {
    font-family: var(--st-mono);
    color: var(--st-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#sellerApprovedState .ks-co-step {
    border-radius: var(--st-radius-sm);
    background: var(--st-purple-soft);
    border: 1px solid var(--st-purple-line);
    color: var(--st-purple);
    font-family: var(--st-mono);
    font-weight: 600;
}

#sellerApprovedState .wallet-section-divider {
    background: var(--st-border);
    height: 1px;
}

/* ---------------------------------------------------------
   FORMS
   --------------------------------------------------------- */

#sellerApprovedState .form-group input,
#sellerApprovedState .form-group textarea,
#sellerApprovedState .form-group select,
#sellerApprovedState .print-field input,
#sellerApprovedState .print-field select,
#sellerApprovedState .sp-price-input,
#sellerApprovedState .ks-select-trigger,
#sellerApprovedState .kp-trigger,
#sellerApprovedState .ks-datetime-trigger,
#sellerApprovedState .ks-co-input {
    background: var(--st-card);
    border: 1px solid #d9d6e3;
    border-radius: var(--st-radius-sm);
    box-shadow: none;
    color: var(--st-ink);
}

#sellerApprovedState .form-group input:focus,
#sellerApprovedState .form-group textarea:focus,
#sellerApprovedState .form-group select:focus,
#sellerApprovedState .print-field input:focus,
#sellerApprovedState .print-field select:focus,
#sellerApprovedState .sp-price-input:focus,
#sellerApprovedState .ks-co-input:focus {
    border-color: var(--st-purple);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.12);
    outline: none;
}

#sellerApprovedState .form-group label,
#sellerApprovedState .ks-co-label {
    font-family: var(--st-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--st-muted);
}

#sellerApprovedState .sp-price-input,
#sellerApprovedState input[type="number"] {
    font-family: var(--st-mono);
}

#sellerApprovedState .reset-passcode-intro {
    color: var(--st-muted);
}

#sellerApprovedState .sp-card h3,
#sellerApprovedState .sp-card h4 {
    font-size: 14px;
}

/* ---------------------------------------------------------
   PHONES: app shell with a bottom tab bar
   --------------------------------------------------------- */

#sellerApprovedState .ks-seller-bottomnav {
    display: none;
}

@media (max-width: 1180px) {

    #sellerApprovedState .ks-seller-app {
        grid-template-columns: 228px minmax(0, 1fr);
    }

    #sellerApprovedState .ks-head-actions button span {
        display: none;
    }

    #sellerApprovedState .ks-metric-grid {
        grid-template-columns: 1fr 1fr;
    }

    #sellerApprovedState .ks-metric-grid .ks-metric-card:first-child,
    #sellerApprovedState .ks-metric-grid .ks-metric-card:last-child {
        grid-column: 1 / -1;
    }

    #sellerApprovedState .ks-insight-row {
        grid-template-columns: 1fr 1fr 1fr;
    }

}

@media (max-width: 900px) {

    /* One scroller: the page frame stays the size of the visible
       screen (including while the keyboard is open) and the
       workspace inside it scrolls. A second overflow box on the
       panel was swallowing the upward swipe, so long forms such as
       walk-in print orders could not be scrolled back up. */
    #sellerPage.seller-dashboard-active {
        top: var(--ks-vv-top, 0px);
        bottom: auto;
        height: var(--ks-vv-height, 100dvh);
        overflow: hidden;
        -webkit-overflow-scrolling: auto;
    }

    #sellerPage.seller-dashboard-active .full-page-panel,
    #sellerPage.seller-dashboard-active #sellerPanelBody,
    #sellerPage.seller-dashboard-active #sellerApprovedState,
    #sellerPage.seller-dashboard-active .ks-seller-app {
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }

    #sellerPage.seller-dashboard-active .ks-seller-app {
        grid-template-rows: minmax(0, 1fr);
    }

    #sellerPage.seller-dashboard-active .ks-seller-content {
        min-height: 0;
        height: 100%;
        overflow-x: clip;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scroll-padding-top: 12px;
        scroll-padding-bottom: calc(var(--st-bottomnav-h) + 28px + env(safe-area-inset-bottom, 0px));
    }

    html.ks-keyboard-open #sellerApprovedState .ks-seller-bottomnav {
        display: none;
    }

    html.ks-keyboard-open #sellerPage.seller-dashboard-active .seller-dash-tab {
        padding-bottom: 32px;
    }

    #sellerApprovedState .ks-seller-app {
        grid-template-columns: 1fr;
    }

    /* "More" opens the full menu as a drawer above the tab bar. */
    #sellerApprovedState .ks-seller-sidebar {
        width: min(300px, 86vw);
        top: 0 !important;
        bottom: calc(var(--st-bottomnav-h) + env(safe-area-inset-bottom, 0px)) !important;
        height: auto !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: none;
    }

    #sellerApprovedState .ks-seller-app.sidebar-open .ks-seller-sidebar {
        box-shadow: 16px 0 36px rgba(12, 8, 24, 0.35);
    }

    #sellerApprovedState .ks-sidebar-backdrop {
        background: rgba(12, 8, 24, 0.5);
        bottom: calc(var(--st-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    }

    #sellerApprovedState .ks-seller-nav {
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
    }

    #sellerApprovedState .ks-seller-nav-item {
        padding: 11px 12px;
        font-size: 14px;
    }

    #sellerApprovedState .ks-seller-topbar {
        position: sticky;
        top: 0;
        z-index: 50;
        height: 56px;
        min-height: 56px;
        padding: 0 14px;
        padding-top: env(safe-area-inset-top, 0px);
        gap: 8px;
    }

    #sellerApprovedState .ks-sidebar-toggle,
    #sellerApprovedState .ks-seller-search,
    #sellerApprovedState .ks-icon-btn[data-seller-action="messages"],
    #sellerApprovedState .ks-user-menu {
        display: none;
    }

    #sellerApprovedState .ks-topbar-title {
        display: block;
        flex: 1;
    }

    #sellerApprovedState .ks-topbar-actions {
        gap: 6px;
        margin-left: auto;
    }

    #sellerApprovedState .ks-icon-btn {
        width: 38px;
        height: 38px;
        border-color: var(--st-border);
    }

    #sellerApprovedState .ks-add-product-top {
        width: 38px;
        height: 38px;
        padding: 0;
        font-size: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #sellerApprovedState .ks-add-product-top i {
        font-size: 14px;
        margin: 0;
    }

    #sellerApprovedState .ks-seller-page-head {
        margin: 14px 14px 14px;
        padding: 14px;
        flex-direction: column;
        align-items: stretch;
    }

    #sellerApprovedState .ks-seller-page-head h2 {
        font-size: 18px;
    }

    #sellerApprovedState .ks-head-actions {
        width: 100%;
    }

    #sellerApprovedState .ks-head-actions button {
        flex: 1;
        justify-content: center;
        height: 40px;
    }

    #sellerApprovedState .ks-head-actions button span {
        display: inline;
    }

    #sellerApprovedState .ks-seller-app .seller-dash-tab {
        padding: 0 14px calc(var(--st-bottomnav-h) + 24px + env(safe-area-inset-bottom, 0px));
    }

    #sellerApprovedState .ks-seller-app[data-seller-view]:not([data-seller-view="overview"]) .seller-dash-tab {
        padding-top: 14px;
    }

    #sellerApprovedState .seller-dashboard-header {
        padding: 12px 14px;
    }

    #sellerApprovedState .seller-dashboard-header > div {
        width: 100%;
    }

    #sellerApprovedState .seller-dashboard-header > div button {
        flex: 1;
    }

    /* Figures: Total Sales across, then a 2 × 2 grid. */
    #sellerApprovedState .ks-insight-row {
        grid-template-columns: 1fr 1fr;
    }

    #sellerApprovedState .ks-product-insight {
        grid-template-columns: 1fr 1fr;
    }

    #sellerApprovedState .ks-service-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    #sellerApprovedState .ks-product-row {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 8px;
    }

    #sellerApprovedState .ks-product-rate,
    #sellerApprovedState .ks-product-row > b {
        grid-column: 2;
        text-align: left;
    }

    #sellerApprovedState .ks-product-rate em {
        display: inline;
        margin-left: 6px;
    }

    #sellerApprovedState .ks-metric-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }

    #sellerApprovedState .ks-metric-grid .ks-metric-card:first-child {
        grid-column: 1 / -1;
    }

    #sellerApprovedState .ks-metric-card {
        padding: 12px 12px 12px 16px;
    }

    #sellerApprovedState .ks-metric-card strong {
        font-size: 19px;
    }

    #sellerApprovedState .ks-metric-card:first-child strong {
        font-size: 26px;
    }

    #sellerApprovedState .ks-dashboard-grid {
        gap: 12px;
        margin-bottom: 12px;
    }

    #sellerApprovedState .ks-panel-head {
        padding: 12px 14px;
    }

    #sellerApprovedState .ks-panel > :not(.ks-panel-head) {
        margin-left: 14px;
        margin-right: 14px;
    }

    #sellerApprovedState .ks-line-chart {
        height: 170px;
    }

    #sellerApprovedState #sellerSalesGraph {
        height: 190px;
    }

    #sellerApprovedState .ks-recent-orders #sellerRecentOrdersTable {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #sellerApprovedState .seller-product-card {
        padding: 12px;
        gap: 12px;
        flex-wrap: wrap;
    }

    #sellerApprovedState .seller-product-actions {
        width: 100%;
        justify-content: flex-end;
        border-top: 1px solid var(--st-border-soft);
        padding-top: 10px;
    }

    #sellerApprovedState .seller-product-actions button {
        min-width: 40px;
        min-height: 40px;
    }

    #sellerApprovedState .form-group input,
    #sellerApprovedState .form-group textarea,
    #sellerApprovedState .form-group select,
    #sellerApprovedState .print-field input,
    #sellerApprovedState .print-field select,
    #sellerApprovedState .ks-co-input {
        font-size: 16px; /* stops iOS zooming into fields */
        min-height: 44px;
    }

    #sellerApprovedState .sp-btn,
    #sellerApprovedState .seller-dashboard-add-button,
    #sellerApprovedState .auth-button {
        min-height: 44px;
    }

    /* While a popup is open (KCharge forms, print orders…) the tab
       bar steps aside: it otherwise sits on top of the popup's last
       part, hiding its Save / Confirm and Cancel buttons. */
    #sellerPage:has(.modal-overlay.open) #sellerApprovedState .ks-seller-bottomnav,
    #sellerPage:has(.modal-overlay.active) #sellerApprovedState .ks-seller-bottomnav,
    html.kp-sheet-open #sellerApprovedState .ks-seller-bottomnav {
        display: none;
    }

    /* The option sheet is the thing being scrolled. The form behind
       it stays put, otherwise a swipe moves the walk-in page instead
       of the choices. */
    html.kp-sheet-open #sellerPage.seller-dashboard-active .ks-seller-content {
        overflow: hidden;
    }

    /* Bottom tab bar */
    #sellerApprovedState .ks-seller-bottomnav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3100;
        height: calc(var(--st-bottomnav-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--st-side);
        border-top: 1px solid var(--st-side-border);
    }

    #sellerApprovedState .ks-seller-bottomnav button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 0;
        background: transparent;
        color: var(--st-side-muted);
        font: 500 10px/1 var(--st-mono);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        position: relative;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #sellerApprovedState .ks-seller-bottomnav button i {
        font-size: 17px;
    }

    #sellerApprovedState .ks-seller-bottomnav button.active,
    #sellerApprovedState .ks-seller-app.sidebar-open .ks-seller-bottomnav [data-seller-more] {
        color: #ddd6fe;
    }

    #sellerApprovedState .ks-seller-bottomnav button.active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 26%;
        right: 26%;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: #8b5cf6;
    }

}

@media (max-width: 380px) {

    #sellerApprovedState .ks-metric-card strong {
        font-size: 17px;
    }

}

/* =========================================================
   Phones: tighter, calmer seller dashboard
   ========================================================= */
@media (max-width: 900px) {

    /* The top bar already names the tab, so a header card holding
       only that same title is dropped. Headers with buttons stay. */
    #sellerApprovedState .seller-dashboard-header:not(:has(button)):not(:has(input)):not(:has(select)) {
        display: none;
    }

    #sellerApprovedState .ks-seller-app[data-seller-view]:not([data-seller-view="overview"]) .seller-dash-tab {
        padding-top: 12px;
    }

    #sellerApprovedState .seller-dash-tab > .seller-dashboard-header:first-child {
        margin-top: 0;
    }

    /* KCharge: title/tagline repeat the top bar; keep Refresh small. */
    #sellerApprovedState #sellerTabKcharge .seller-dashboard-header {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        margin: 0 0 10px;
        justify-content: flex-end;
    }

    #sellerApprovedState #sellerTabKcharge .seller-dashboard-header > div {
        display: none;
    }

    #sellerApprovedState #sellerTabKcharge .seller-dashboard-header > button {
        flex: 0 0 auto;
        width: auto;
        height: 36px;
        min-height: 36px;
        padding: 0 14px;
        font-size: 13px;
        background: var(--st-card) !important;
        color: var(--st-ink-2);
        border: 1px solid var(--st-border);
        box-shadow: none;
    }

    /* Figures: three across, compact. */
    #sellerApprovedState .kcharge-summary-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }

    #sellerApprovedState .kcharge-summary-card {
        padding: 10px;
        min-height: 0;
        border-radius: 12px;
    }

    #sellerApprovedState .kcharge-summary-card span {
        display: block;
        font-size: 11px;
        line-height: 1.25;
        min-height: 28px;
    }

    /* Five figures: three, then customers + revenue (wider). */
    #sellerApprovedState .kcharge-summary-card:nth-child(5) {
        grid-column: span 2;
    }

    #sellerApprovedState .kcharge-summary-card strong {
        display: block;
        font-size: 19px;
        margin-top: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Actions: the everyday ones two across, the list views as
       four small chips. */
    #sellerApprovedState .kcharge-main-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 14px;
    }

    #sellerApprovedState .kcharge-main-actions .kcharge-action-btn {
        grid-column: span 2;
        width: 100%;
        min-width: 0;
        height: 46px;
        margin: 0;
        padding: 0 10px;
        justify-content: center;
        font-size: 13.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #sellerApprovedState #kchargeRegisterBtn,
    #sellerApprovedState #kchargeAcceptBookingBtn {
        background: var(--st-purple, #6d28d9) !important;
        border-color: var(--st-purple, #6d28d9);
        color: #fff;
    }

    #sellerApprovedState #kchargeRegisterBtn { order: 1; }
    #sellerApprovedState #kchargeAcceptBookingBtn { order: 2; }
    #sellerApprovedState #kchargeVerifyPickupBtn { order: 3; }
    #sellerApprovedState #kchargeFindCodeBtn { order: 4; }
    #sellerApprovedState #kchargeFindCustomerBtn { order: 5; }
    #sellerApprovedState #kchargePricesBtn { order: 6; }
    #sellerApprovedState #kchargeStreakBtn { order: 6; }

    #sellerApprovedState #kchargeReceivedViewBtn,
    #sellerApprovedState #kchargeChargingViewBtn,
    #sellerApprovedState #kchargeReadyViewBtn,
    #sellerApprovedState #kchargeHistoryViewBtn,
    #sellerApprovedState #kchargeUnclaimedViewBtn {
        order: 7;
        grid-column: span 1;
        height: 56px;
        flex-direction: column;
        gap: 3px;
        font-size: 11.5px;
        padding: 0 4px;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
    }

    /* Request list: one card deep, not two. */
    #sellerApprovedState .kcharge-panel {
        padding: 0;
    }

    #sellerApprovedState .kcharge-panel .ks-panel-head {
        padding: 12px;
        gap: 10px;
    }

    #sellerApprovedState .kcharge-panel .ks-panel-head input {
        width: 100%;
        font-size: 15px;
        height: 42px;
    }

    #sellerApprovedState .kcharge-panel > .kcharge-requests {
        padding: 10px !important;
        margin: 0 !important;
        gap: 10px;
        min-height: 0;
    }

    #sellerApprovedState .kcharge-request {
        padding: 12px 14px;
    }

    /* Everything tappable is at least finger-sized, and inputs don't
       make iPhones zoom in. */
    #sellerApprovedState .ks-seller-app input:not([type="checkbox"]):not([type="radio"]),
    #sellerApprovedState .ks-seller-app select,
    #sellerApprovedState .ks-seller-app textarea {
        font-size: 16px;
    }

    #sellerApprovedState .ks-seller-bottomnav button,
    #sellerApprovedState .ks-seller-bottomnav a {
        min-height: 48px;
        -webkit-tap-highlight-color: transparent;
    }

    /* The "More" drawer scrolls on its own and ends clear of the tab bar. */
    #sellerApprovedState .ks-seller-sidebar {
        overscroll-behavior: contain;
        padding-bottom: 24px;
    }

    #sellerApprovedState .ks-seller-app.sidebar-open ~ *,
    #sellerPage:has(.ks-seller-app.sidebar-open) {
        overflow: hidden;
    }
}

@media (max-width: 360px) {
    #sellerApprovedState .kcharge-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Scan Customer Code leads the KCharge actions. */
#sellerApprovedState #kchargeScanBtn {
    background: var(--st-ink, #17122b) !important;
    border-color: var(--st-ink, #17122b);
    color: #fff;
}

@media (max-width: 900px) {
    #sellerApprovedState #kchargeScanBtn {
        order: 0;
        grid-column: 1 / -1;
        height: 50px;
        font-size: 15px;
    }
}

#sellerApprovedState .sp-scan-btn { margin-left: auto; height: 36px; }

/* ---------------------------------------------------------
   DISCOUNTS — streak hero and product rows
   --------------------------------------------------------- */

#sellerApprovedState .ks-discount-page {
    font-family: "Plus Jakarta Sans", var(--st-sans);
}

#sellerApprovedState .ks-discount-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: var(--st-muted);
    font-size: 12px;
    font-weight: 700;
}

#sellerApprovedState .ks-discount-crumb i {
    font-size: 10px;
}

#sellerApprovedState .ks-discount-crumb span:last-child {
    color: var(--st-purple);
}

#sellerApprovedState .ks-discount-title {
    margin: 0 0 18px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--st-ink);
}

#sellerApprovedState .ks-discount-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    padding: 24px;
    overflow: hidden;
    color: #fff;
    border-radius: 24px;
    background: linear-gradient(100deg, #4c1d95 0%, #6d28d9 48%, #4338ca 100%);
    box-shadow: 0 18px 40px rgba(76, 29, 149, 0.16);
}

#sellerApprovedState .ks-discount-hero::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #ec4899;
    filter: blur(36px);
    opacity: 0.35;
    pointer-events: none;
}

#sellerApprovedState .ks-discount-hero-copy {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 14px;
    max-width: 640px;
}

#sellerApprovedState .ks-discount-hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    font-size: 24px;
    color: #fbbf24;
}

#sellerApprovedState .ks-discount-hero h4 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

#sellerApprovedState .ks-discount-hero p {
    margin: 0;
    color: rgba(237, 233, 254, 0.92);
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 500;
}

#sellerApprovedState .ks-discount-setup {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 14px 18px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: #4c1d95;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

#sellerApprovedState .ks-discount-setup:hover {
    background: #f5f3ff;
}

#sellerApprovedState .ks-discount-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

#sellerApprovedState .ks-discount-list-head h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}

#sellerApprovedState .ks-discount-list-head h4 span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 12px;
}

#sellerApprovedState .ks-discount-search {
    position: relative;
    display: block;
    margin: 0;
}

#sellerApprovedState .ks-discount-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
}

#sellerApprovedState .ks-discount-search input {
    width: min(240px, 70vw);
    padding: 9px 12px 9px 34px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 13px;
}

#sellerApprovedState .ks-discount-search input:focus {
    outline: 2px solid #8b5cf6;
    border-color: transparent;
}

#sellerApprovedState .ks-discount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#sellerApprovedState .ks-discount-row:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

#sellerApprovedState .ks-discount-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

#sellerApprovedState .ks-discount-thumb {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c3aed;
}

#sellerApprovedState .ks-discount-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#sellerApprovedState .ks-discount-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

#sellerApprovedState .ks-discount-badge {
    padding: 3px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#sellerApprovedState .ks-discount-badge.active {
    background: #ede9fe;
    border-color: #ddd6fe;
    color: #6d28d9;
}

#sellerApprovedState .ks-discount-badge.scheduled {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

#sellerApprovedState .ks-discount-badge.ended {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #be123c;
}

#sellerApprovedState .ks-discount-price {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--st-sans);
}

#sellerApprovedState .ks-discount-tag {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

#sellerApprovedState .ks-discount-tag:hover {
    background: #f5f3ff;
    color: #7c3aed;
}

/* Streak setup, shared by phone charging and every product. */
#streakPromoOverlay {
    background: rgba(15, 23, 42, 0.62);
}

#streakPromoOverlay .ks-streak-modal {
    width: min(520px, calc(100% - 28px));
    max-height: min(90vh, 860px);
    max-height: min(90dvh, 860px);
    padding: 28px 24px 22px;
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(76, 29, 149, 0.2);
    font-family: "Plus Jakarta Sans", var(--st-sans, Inter, sans-serif);
}

#streakPromoOverlay .ks-streak-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, #7c3aed, #4f46e5, #ec4899);
}

#streakPromoOverlay .ks-streak-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
}

#streakPromoOverlay .ks-streak-flame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 8px auto 16px;
    border-radius: 18px;
    color: #fff;
    font-size: 28px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5 55%, #ec4899);
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.35);
}

#streakPromoOverlay .ks-streak-head {
    text-align: center;
    margin-bottom: 18px;
}

#streakPromoOverlay .ks-streak-head h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
}

#streakPromoOverlay .ks-streak-head p,
#streakPromoOverlay .ks-streak-note p {
    margin: 8px 0 0;
    color: #475569;
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 500;
}

#streakPromoOverlay .ks-streak-toggle-card,
#streakPromoOverlay .ks-streak-reward {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 16px;
}

#streakPromoOverlay .ks-streak-toggle-card {
    background: rgba(245, 243, 255, 0.85);
    border: 1px solid #ede9fe;
}

#streakPromoOverlay .ks-streak-toggle-copy,
#streakPromoOverlay .ks-streak-reward header,
#streakPromoOverlay .ks-streak-note {
    display: flex;
    align-items: center;
    gap: 10px;
}

#streakPromoOverlay .ks-streak-toggle-copy strong,
#streakPromoOverlay .ks-streak-toggle-copy span {
    display: block;
}

#streakPromoOverlay .ks-streak-toggle-copy strong {
    color: #0f172a;
    font-size: 15px;
}

#streakPromoOverlay .ks-streak-toggle-copy span,
#streakPromoOverlay .ks-streak-reward header span {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

#streakPromoOverlay .ks-streak-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    background: #ede9fe;
    color: #6d28d9;
}

#streakPromoOverlay .ks-streak-reward {
    display: block;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

#streakPromoOverlay .ks-streak-reward header {
    justify-content: space-between;
    margin-bottom: 8px;
}

#streakPromoOverlay .ks-streak-reward header span:nth-child(2) {
    flex: 1;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#streakPromoOverlay .ks-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #7c3aed;
}

#streakPromoOverlay .ks-dot-pink {
    background: #ec4899;
}

#streakPromoOverlay .ks-streak-reward p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}

#streakPromoOverlay .ks-streak-reward input {
    width: 58px;
    padding: 8px 4px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    font: inherit;
    font-weight: 800;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#streakPromoOverlay .ks-streak-reward input:focus {
    outline: 2px solid #8b5cf6;
    border-color: transparent;
}

#streakPromoOverlay .ks-streak-note {
    align-items: flex-start;
    margin-bottom: 8px;
    padding: 14px;
    border: 1px solid #ddd6fe;
    border-radius: 16px;
    background: #f5f3ff;
}

#streakPromoOverlay .ks-streak-note .ks-streak-ico {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}

#streakPromoOverlay .ks-streak-status {
    min-height: 22px;
    margin: 8px 0;
    text-align: center;
    color: #059669;
    font-size: 13px;
    font-weight: 800;
}

#streakPromoOverlay .ks-streak-status.is-error {
    color: #be123c;
}

#streakPromoOverlay .ks-streak-save {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 15px 16px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(90deg, #7c3aed, #4f46e5);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.28);
}

#streakPromoOverlay .ks-streak-save:disabled {
    opacity: 0.7;
    cursor: progress;
}

#streakPromoOverlay .ks-streak-cancel {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#streakPromoOverlay .ks-streak-cancel:hover {
    background: #f8fafc;
    color: #0f172a;
}

#streakPromoOverlay .ks-switch {
    position: relative;
    display: inline-flex;
    width: 48px;
    height: 24px;
    flex: 0 0 48px;
    margin: 0;
}

#streakPromoOverlay .ks-switch-sm {
    width: 40px;
    height: 20px;
    flex-basis: 40px;
    transform: scale(0.95);
}

#streakPromoOverlay .ks-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

#streakPromoOverlay .ks-switch span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.2s ease;
}

#streakPromoOverlay .ks-switch span::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
    transition: transform 0.2s ease;
}

#streakPromoOverlay .ks-switch-sm span::after {
    width: 16px;
    height: 16px;
}

#streakPromoOverlay .ks-switch input:checked + span {
    background: #7c3aed;
}

#streakPromoOverlay .ks-switch input:checked + span::after {
    transform: translateX(24px);
}

#streakPromoOverlay .ks-switch-sm input:checked + span::after {
    transform: translateX(20px);
}

#streakPromoOverlay .ks-streak-reward input[type="number"]::-webkit-outer-spin-button,
#streakPromoOverlay .ks-streak-reward input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}