/**
 * HobbyEdge CSS
 * Purpose: Early landing/login/app styling.
 * Usage: Loaded by public and authenticated HobbyEdge pages.
 * Dependencies: None.
 * Key Blocks:
 * - SECTION: Theme
 * - SECTION: Base Layout
 * - SECTION: Cards
 * - SECTION: Typography
 * - SECTION: Buttons
 * - SECTION: Forms
 * - SECTION: Alerts
 * - SECTION: Shared Navigation
 * - SECTION: Action Cards
 * - SECTION: Page Header
 * - SECTION: Tables
 * - SECTION: Empty States
 * - SECTION: Mobile Layout
 */

/* SECTION: Theme */

:root {
    --he-bg: #0f172a;
    --he-card: #111827;
    --he-text: #f8fafc;
    --he-muted: #94a3b8;
    --he-border: #1f2937;
    --he-primary: #7c3aed;
    --he-primary-hover: #6d28d9;
/* ==========================================================================
   HobbyEdge — eBay Orders wrapping action toolbar
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-orders-header.he-orders-header--wrap {
    display: block;
}

.he-orders-header--wrap .he-orders-sync-form {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: 14px;
    align-items: end;
    width: 100%;
    margin-top: 20px;
}

.he-orders-header--wrap .he-orders-sync-form > label {
    min-width: 0;
}

.he-orders-header--wrap .he-orders-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.he-orders-header--wrap .he-orders-header-actions .he-button {
    flex: 0 0 auto;
}

.he-orders-header--wrap .he-orders-match-form {
    margin-top: 10px;
}

@media (max-width: 900px) {
    .he-orders-header--wrap .he-orders-sync-form {
        grid-template-columns: 1fr;
    }
}
    --he-alert: #7f1d1d;
}

/* SECTION: Base Layout */

* {
    box-sizing: border-box;
}

body {
    background: radial-gradient(circle at top, #1e1b4b, var(--he-bg));
    color: var(--he-text);
    font-family: Arial, sans-serif;
    margin: 0;
}

.he-page {
    margin: 0 auto;
    max-width: 1440px;
    min-height: calc(100vh - 72px);
    padding: 32px 28px;
    width: 100%;
}

/* SECTION: Cards */

.he-card {
    background: rgba(17, 24, 39, 0.92);
    border: 1px solid var(--he-border);
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    padding: 42px;
    width: 100%;
}

.he-login-card {
    margin: 10vh auto 0;
    max-width: 440px;
}

/* SECTION: Typography */

.he-logo {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    margin-bottom: 24px;
}

h1 {
    font-size: 42px;
    line-height: 1.05;
    margin: 0 0 18px;
}

p {
    font-size: 18px;
    line-height: 1.5;
}

.he-muted {
    color: var(--he-muted);
    font-size: 14px;
}

.he-eyebrow {
    color: rgba(226, 232, 240, 0.68);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.he-sr-only {
    height: 1px;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

/* SECTION: Buttons */

.he-actions {
    align-items: center;
    display: flex;
    gap: 18px;
    margin-top: 32px;
}

.he-btn {
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    padding: 13px 20px;
    text-decoration: none;
}

.he-btn-primary {
    background: var(--he-primary);
    color: #ffffff;
}

.he-btn-primary:hover {
    background: var(--he-primary-hover);
}

.he-button {
    align-items: center;
    border-radius: 12px;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 750;
    justify-content: center;
    line-height: 1;
    min-height: 42px;
    padding: 0 16px;
    text-decoration: none;
}

.he-button--secondary {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.he-button--secondary:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

/* SECTION: Forms */

.he-form {
    display: grid;
    gap: 18px;
}

.he-form label {
    color: var(--he-muted);
    display: grid;
    font-size: 14px;
    gap: 8px;
}

.he-form input {
    background: #020617;
    border: 1px solid var(--he-border);
    border-radius: 12px;
    color: var(--he-text);
    font-size: 16px;
    padding: 13px 14px;
    width: 100%;
}

.he-inline-form {
    align-items: center;
    display: flex;
    gap: 10px;
}

.he-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    min-height: 42px;
    min-width: 220px;
    outline: none;
    padding: 0 14px;
}

.he-input::placeholder {
    color: rgba(226, 232, 240, 0.55);
}

.he-input:focus {
    border-color: rgba(129, 140, 248, 0.75);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.18);
}

select.he-input option {
    background: #ffffff;
    color: #111827;
}

/* SECTION: Alerts */

.he-alert {
    border-radius: 14px;
    display: grid;
    gap: 6px;
    margin-top: 24px;
    padding: 16px;
}

.he-alert strong {
    color: #ffffff;
}

.he-alert--error {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.30);
    color: #fecaca;
}

.he-alert--success {
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(74, 222, 128, 0.30);
    color: #bbf7d0;
}

/* SECTION: Shared Navigation */

.he-app-nav {
    background: #101827;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 100;
}

.he-app-nav__inner {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1440px;
    padding: 14px 28px;
}

.he-app-nav__brand {
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.he-app-nav__links {
    align-items: center;
    display: flex;
    gap: 8px;
}

.he-app-nav__link,
.he-app-nav__dropdown-button {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    padding: 9px 12px;
    text-decoration: none;
}

.he-app-nav__link:hover,
.he-app-nav__dropdown-button:hover,
.he-app-nav__link.is-active,
.he-app-nav__dropdown.is-active > .he-app-nav__dropdown-button {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}

.he-app-nav__dropdown {
    position: relative;
}

.he-app-nav__dropdown-menu {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    display: none;
    min-width: 210px;
    padding: 8px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 200;
}

.he-app-nav__dropdown.is-open .he-app-nav__dropdown-menu {
    display: block;
}

.he-app-nav__dropdown-link {
    border-radius: 10px;
    color: #172033;
    display: block;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 12px;
    text-decoration: none;
}

.he-app-nav__dropdown-link:hover,
.he-app-nav__dropdown-link.is-active {
    background: #f1f5f9;
    color: #0f172a;
}

/* SECTION: Action Cards */

.he-action-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 28px;
}

.he-action-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    color: #ffffff;
    display: block;
    padding: 24px;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.he-action-card:hover,
.he-action-card:focus {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    transform: translateY(-2px);
}

.he-action-card h2 {
    color: #ffffff;
    font-size: 24px;
    line-height: 1.15;
    margin: 0 0 10px;
}

.he-action-card p {
    color: rgba(226, 232, 240, 0.78);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

/* SECTION: Page Header */

.he-page-header {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.he-page-header__actions {
    flex: 0 0 auto;
    padding-top: 10px;
}

/* SECTION: Tables */

.he-table-wrap {
    margin-top: 28px;
    overflow-x: visible;
}

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

.he-table th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(226, 232, 240, 0.72);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 12px 14px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.he-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(226, 232, 240, 0.88);
    padding: 15px 14px;
    vertical-align: middle;
}

.he-table td strong {
    color: #ffffff;
}

.he-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.045);
}

/* SECTION: Empty States */

.he-empty-state {
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    margin-top: 28px;
    padding: 28px;
}

.he-empty-state h2 {
    color: #ffffff;
    font-size: 22px;
    margin: 0 0 8px;
}

.he-empty-state p {
    color: rgba(226, 232, 240, 0.78);
    line-height: 1.5;
    margin: 0;
}

/* SECTION: Mobile Layout */

@media (max-width: 760px) {
    .he-page {
        min-height: calc(100vh - 120px);
        padding: 20px 14px;
    }

    .he-card {
        border-radius: 18px;
        padding: 22px 16px;
    }

    .he-login-card {
        margin-top: 6vh;
        max-width: 440px;
    }

    h1 {
        font-size: 34px;
    }

    p {
        font-size: 16px;
    }

    .he-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .he-app-nav__inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }

    .he-app-nav__links {
        align-items: stretch;
        flex-wrap: wrap;
        width: 100%;
    }

    .he-app-nav__dropdown-menu {
        left: 0;
        right: auto;
    }

    .he-action-grid {
        grid-template-columns: 1fr;
    }

    .he-action-card {
        padding: 20px;
    }

    .he-action-card h2 {
        font-size: 22px;
    }

    .he-page-header {
        display: block;
    }

    .he-page-header__actions {
        padding-top: 18px;
    }

    .he-button {
        width: 100%;
    }

    .he-inline-form {
        align-items: stretch;
        flex-direction: column;
    }

    .he-input {
        min-width: 0;
        width: 100%;
    }

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

    .he-table {
        min-width: 720px;
    }
}
/* SECTION: Global App Width Overrides
   Purpose: Force authenticated app pages to use full dashboard width on desktop.
   Notes: Keep this at the bottom so it wins over earlier layout rules.
*/

.he-page {
    align-items: stretch !important;
    display: block !important;
    justify-content: flex-start !important;
    margin: 0 auto !important;
    max-width: 1440px !important;
    min-height: calc(100vh - 72px) !important;
    padding: 48px 32px !important;
    width: 100% !important;
}

.he-card {
    margin: 0 auto !important;
    max-width: 1180px !important;
    width: 100% !important;
}

.he-table-wrap {
    overflow-x: visible !important;
    width: 100% !important;
}

.he-table {
    min-width: 0 !important;
    width: 100% !important;
}

@media (max-width: 760px) {
    .he-page {
        padding: 20px 14px !important;
    }

    .he-card {
        max-width: none !important;
        width: 100% !important;
    }

    .he-table-wrap {
        overflow-x: auto !important;
    }

    .he-table {
        min-width: 720px !important;
    }
}
/* SECTION: Table Forms */

.he-table-form {
    align-items: center;
    display: flex;
    gap: 8px;
}

.he-input--compact {
    min-height: 36px;
    min-width: 180px;
    padding: 0 10px;
}

.he-button--mini {
    font-size: 12px;
    min-height: 36px;
    padding: 0 12px;
}

@media (max-width: 760px) {
    .he-table-form {
        align-items: stretch;
        flex-direction: column;
    }

    .he-input--compact {
        min-width: 0;
        width: 100%;
    }
}
/* SECTION: Danger Buttons and Table Actions */

.he-table-actions {
    display: grid;
    gap: 8px;
}

.he-button--danger {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.34);
    color: #fecaca;
}

.he-button--danger:hover {
    background: rgba(239, 68, 68, 0.24);
    color: #ffffff;
}
/* SECTION: Tabs */

.he-tabs {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    gap: 8px;
    margin-top: 28px;
}

.he-tab {
    border-bottom: 2px solid transparent;
    color: rgba(226, 232, 240, 0.70);
    font-size: 14px;
    font-weight: 750;
    padding: 12px 14px;
    text-decoration: none;
}

.he-tab:hover {
    color: #ffffff;
}

.he-tab.is-active {
    border-bottom-color: #a78bfa;
    color: #ffffff;
}

@media (max-width: 760px) {
    .he-tabs {
        overflow-x: auto;
    }

    .he-tab {
        white-space: nowrap;
    }
}
/* SECTION: Nav User */

.he-app-nav__user {
    color: rgba(226, 232, 240, 0.78);
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .he-app-nav__user {
        font-size: 13px;
        width: 100%;
    }
}
/* SECTION: Batch Forms */
/* SECTION: Compact Form Fields */

.he-field-mini {
    color: rgba(226, 232, 240, 0.72);
    display: grid;
    font-size: 12px;
    font-weight: 750;
    gap: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.he-field-mini .he-input {
    letter-spacing: normal;
    text-transform: none;
}

/* SECTION: Compact Inputs */

.he-input--small {
    min-width: 110px;
    width: 110px;
}

.he-input--compact {
    min-height: 36px;
    min-width: 180px;
    padding: 0 10px;
}

/* SECTION: Mini Buttons */

.he-button--mini {
    font-size: 12px;
    min-height: 36px;
    padding: 0 12px;
}

/* SECTION: Create Panels */

.he-create-panel {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    margin-top: 24px;
    padding: 18px;
}

.he-create-panel .he-inline-form {
    align-items: end;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}

.he-create-panel .he-button {
    align-self: end;
}

/* SECTION: Toolbars */

.he-toolbar {
    align-items: end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-top: 24px;
}

.he-toolbar__left {
    flex: 0 1 340px;
}

.he-toolbar__right {
    flex: 0 0 auto;
}

.he-toolbar__left,
.he-toolbar__right {
    align-items: end;
    display: flex;
    gap: 12px;
}

.he-toolbar__left .he-field-mini {
    width: 100%;
}

.he-toolbar__left .he-input {
    width: 320px;
}

.he-toolbar__right .he-inline-form {
    align-items: end;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: flex-end;
}

.he-toolbar__right .he-button {
    align-self: end;
    flex: 0 0 auto;
}

/* SECTION: Table Forms */

.he-table-form {
    align-items: center;
    display: flex;
    gap: 8px;
}

.he-table-actions {
    display: grid;
    gap: 8px;
}

/* SECTION: Danger Buttons */

.he-button--danger {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.34);
    color: #fecaca;
}

.he-button--danger:hover {
    background: rgba(239, 68, 68, 0.24);
    color: #ffffff;
}

/* SECTION: Tabs */

.he-tabs {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    gap: 8px;
    margin-top: 28px;
}

.he-tab {
    border-bottom: 2px solid transparent;
    color: rgba(226, 232, 240, 0.70);
    font-size: 14px;
    font-weight: 750;
    padding: 12px 14px;
    text-decoration: none;
}

.he-tab:hover {
    color: #ffffff;
}

.he-tab.is-active {
    border-bottom-color: #a78bfa;
    color: #ffffff;
}

/* SECTION: Nav User */

.he-app-nav__user {
    color: rgba(226, 232, 240, 0.78);
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
}

/* SECTION: Mobile Overrides for App Controls */

@media (max-width: 760px) {
    .he-field-mini {
        width: 100%;
    }

    .he-input--small,
    .he-input--compact {
        min-width: 0;
        width: 100%;
    }

    .he-create-panel .he-inline-form,
    .he-toolbar,
    .he-toolbar__left,
    .he-toolbar__right,
    .he-toolbar__right .he-inline-form,
    .he-table-form {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .he-create-panel .he-button,
    .he-toolbar__right .he-button {
        align-self: stretch;
    }

    .he-toolbar__left .he-input {
        width: 100%;
    }

    .he-tabs {
        overflow-x: auto;
    }

    .he-tab {
        white-space: nowrap;
    }

    .he-app-nav__user {
        font-size: 13px;
        width: 100%;
    }
}
/* SECTION: Tiny Inputs */

.he-input--tiny {
    min-height: 36px;
    min-width: 76px;
    padding: 0 10px;
    width: 76px;
}

@media (max-width: 760px) {
    .he-input--tiny {
        min-width: 0;
        width: 100%;
    }
}
/* SECTION: Editable Table Rows */

.he-editable-row .he-row-edit,
.he-editable-row .he-save-row-button {
    display: none;
}

.he-editable-row[data-editing="true"] .he-row-view,
.he-editable-row[data-editing="true"] .he-edit-row-button {
    display: none;
}

.he-editable-row[data-editing="true"] .he-row-edit,
.he-editable-row[data-editing="true"] .he-save-row-button {
    display: inline-flex;
}

.he-input--table {
    font-size: 13px;
    min-height: 34px;
    min-width: 0;
    padding: 0 10px;
    width: 100%;
}

.he-table {
    font-size: 14px;
}

.he-table th {
    font-size: 11px;
    padding: 10px 10px;
}

.he-table td {
    padding: 12px 10px;
}

.he-table td:nth-child(1) {
    min-width: 150px;
    width: 180px;
}

.he-table td:nth-child(2),
.he-table td:nth-child(3) {
    width: 110px;
}

.he-table td:nth-child(4),
.he-table td:nth-child(5),
.he-table td:nth-child(6),
.he-table td:nth-child(7) {
    width: 85px;
}

.he-table td:nth-child(8) {
    width: 95px;
}

.he-table td:nth-child(9) {
    width: 130px;
}

.he-table td:nth-child(10) {
    width: 90px;
}
/* SECTION: Alert Actions */

.he-alert__actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
/* SECTION: Logo Navigation */

.he-app-nav__brand--logo {
    align-items: center;
    display: inline-flex;
    padding: 0;
}

.he-app-nav__logo {
    display: block;
    height: 34px;
    max-width: 220px;
    object-fit: contain;
    width: auto;
}

@media (max-width: 760px) {
    .he-app-nav__logo {
        height: 32px;
        max-width: 200px;
    }
}

/* SECTION: Card Identification Review */

.he-staged-card-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 28px;
}

.he-staged-card {
    align-items: start;
    background: rgba(15, 23, 42, 0.52);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    display: grid;
    gap: 18px;
    grid-template-columns: 160px minmax(0, 1fr);
    padding: 16px;
}

.he-staged-images {
    align-items: flex-start;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.he-card-id-thumb {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 9px;
    height: 112px;
    max-width: 74px;
    object-fit: contain;
    width: auto;
}

.he-staged-main {
    min-width: 0;
}

.he-staged-main form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.he-staged-row {
    align-items: end;
    display: grid;
    gap: 12px;
}

.he-staged-identity-row {
    grid-template-columns:
        minmax(72px, 0.55fr)
        minmax(180px, 1.35fr)
        minmax(70px, 0.5fr)
        minmax(190px, 1.4fr)
        minmax(150px, 1fr);
}

.he-staged-status-row {
    grid-template-columns:
        minmax(105px, 0.75fr)
        minmax(165px, 1fr)
        minmax(170px, 1.1fr)
        minmax(105px, 0.7fr)
        auto;
}

.he-staged-field {
    color: rgba(226, 232, 240, 0.72);
    display: grid;
    font-size: 11px;
    font-weight: 800;
    gap: 6px;
    letter-spacing: 0.08em;
    min-width: 0;
    text-transform: uppercase;
}

.he-staged-field .he-input {
    font-size: 13px;
    letter-spacing: normal;
    min-height: 36px;
    min-width: 0;
    padding: 0 11px;
    text-transform: none;
    width: 100%;
}

.he-status-pill {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    min-height: 36px;
    min-width: 0;
}

.he-status-pill span {
    color: rgba(226, 232, 240, 0.72);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.he-status-pill strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
}

.he-staged-actions {
    align-items: end;
    display: flex;
    justify-content: flex-end;
}

.he-staged-actions .he-button {
    min-height: 36px;
    white-space: nowrap;
}

/* SECTION: Card Identification confidence and save states */

.he-button--save {
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.85);
    color: #111827;
    font-weight: 850;
}

.he-button--save:hover {
    background: #ede9fe;
    border-color: #c4b5fd;
    color: #111827;
}

.he-confidence-pill {
    border-radius: 12px;
    padding: 6px 10px;
}

.he-confidence--high {
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(74, 222, 128, 0.26);
}

.he-confidence--high strong {
    color: #bbf7d0;
}

.he-confidence--medium {
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.28);
}

.he-confidence--medium strong {
    color: #fde68a;
}

.he-confidence--low {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.30);
}

.he-confidence--low strong {
    color: #fecaca;
}

.he-confidence--empty {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.he-confidence--empty strong {
    color: rgba(226, 232, 240, 0.70);
}




@media (max-width: 1100px) {
    .he-staged-card {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .he-staged-identity-row {
        grid-template-columns:
            minmax(72px, 0.6fr)
            minmax(180px, 1.4fr)
            minmax(70px, 0.55fr)
            minmax(190px, 1.4fr);
    }

    .he-staged-field--parallel {
        grid-column: 1 / -1;
    }

    .he-staged-status-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-staged-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .he-staged-card {
        grid-template-columns: 1fr;
    }

    .he-staged-images {
        justify-content: flex-start;
    }

    .he-staged-identity-row,
    .he-staged-status-row {
        grid-template-columns: 1fr;
    }

    .he-staged-actions {
        justify-content: stretch;
    }

    .he-staged-actions .he-button {
        width: 100%;
    }

    .he-card-id-thumb {
        height: 92px;
        max-width: 64px;
    }
}

/* SECTION: Select Dropdown Readability */

select.he-input {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

select.he-input option,
select.he-input optgroup {
    background: #ffffff;
    color: #111827;
}

/* SECTION: Item Detail Page */

.he-item-hero {
    align-items: start;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.he-item-title h1 {
    margin-bottom: 4px;
}

.he-item-subtitle {
    color: var(--he-muted, #b8c2d6);
    font-size: 1rem;
    margin-top: 0;
}

.he-item-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 14px;
}

.he-item-meta-row--detail {
    margin: 18px 0;
}

.he-item-meta-row div span {
    color: var(--he-muted, #b8c2d6);
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.he-item-media-strip {
    align-items: flex-start;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    display: flex;
    gap: 16px;
    margin-top: 18px;
    overflow-x: auto;
    padding: 14px;
}

.he-item-image-wrap {
    min-width: 126px;
    text-align: center;
}

.he-item-image-card {
    color: inherit;
    display: block;
    text-align: center;
    text-decoration: none;
}

.he-item-image-card img {
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 10px;
    height: 142px;
    max-width: 124px;
    object-fit: contain;
}

.he-item-image-card span {
    color: var(--he-muted, #b8c2d6);
    display: block;
    font-size: .8rem;
    font-weight: 700;
    margin-top: 6px;
}

.he-item-image-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 8px;
}

.he-item-tabs-wrap {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    margin-top: 22px;
    overflow: hidden;
}

.he-item-tabs-wrap .he-tabs {
    display: block !important;
    margin: 0;
    width: 100%;
}




.he-tab-list {
    background: rgba(0, 0, 0, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    display: flex !important;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
}

.he-tab-button {
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .12);
    border-top: 3px solid transparent;
    color: var(--he-muted, #b8c2d6);
    cursor: pointer;
    font-weight: 750;
    padding: 13px 18px;
}

.he-tab-button:hover {
    color: #ffffff;
}

.he-tab-button--purchase {
    border-top-color: rgba(196, 181, 253, .72);
}

.he-tab-button--listing {
    border-top-color: rgba(147, 197, 253, .72);
}

.he-tab-button--financials {
    border-top-color: rgba(134, 239, 172, .62);
}

.he-tab-button--history {
    border-top-color: rgba(203, 213, 225, .62);
}

.he-tab-button--purchase.is-active {
    background: rgba(124, 58, 237, .20);
    color: #ffffff;
}

.he-tab-button--listing.is-active {
    background: rgba(59, 130, 246, .16);
    color: #ffffff;
}

.he-tab-button--financials.is-active {
    background: rgba(34, 197, 94, .13);
    color: #ffffff;
}

.he-tab-button--history.is-active {
    background: rgba(148, 163, 184, .14);
    color: #ffffff;
}

.he-tab-panel {
    background: rgba(255, 255, 255, .025);
    box-sizing: border-box;
    display: none;
    padding: 18px;
    width: 100%;
}

.he-tab-panel.is-active {
    display: block;
}

.he-tab-panel .he-inline-form {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    width: 100%;
}

.he-tab-panel .he-field-mini,
.he-tab-panel .he-input {
    max-width: 100%;
    min-width: 0;
}

.he-tab-panel textarea.he-input {
    min-height: 96px;
    padding-bottom: 12px;
    padding-top: 12px;
    resize: vertical;
    width: 100%;
}

.he-item-form-note {
    margin: 14px 0 0;
}

.he-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.he-item-alert-spacing {
    margin-top: 16px;
}

@media (max-width: 900px) {
    .he-item-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .he-tab-list {
        overflow-x: auto;
    }

    .he-tab-button {
        white-space: nowrap;
    }

    .he-item-media-strip {
        flex-wrap: nowrap;
    }
}

/* SECTION: Item Detail Media + Notes */

.he-item-media-notes-grid {
    align-items: stretch;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    margin-top: 18px;
}

.he-item-media-notes-grid .he-item-media-strip {
    margin-top: 0;
}

.he-item-notes-panel {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 14px;
}

.he-item-notes-panel textarea.he-input {
    min-height: 178px;
    padding-bottom: 12px;
    padding-top: 12px;
    resize: vertical;
    width: 100%;
}

.he-item-swap-button {
    align-self: center;
    margin-top: 46px;
}

@media (max-width: 900px) {
    .he-item-media-notes-grid {
        grid-template-columns: 1fr;
    }
}

/* SECTION: Item Detail Purchase Form Layout */

.he-item-subtitle--secondary {
    font-size: 0.92rem;
    margin-top: -6px;
}

.he-purchase-form-grid {
    display: grid;
    gap: 18px;
    width: 100%;
}

.he-purchase-form-row {
    display: grid;
    gap: 16px;
    width: 100%;
}

.he-purchase-form-row--top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.he-purchase-form-row--middle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.he-purchase-form-row--bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 85%;
}

.he-purchase-form-row .he-input {
    min-width: 0;
    width: 100%;
}

.he-purchase-save-row {
    display: flex;
    justify-content: center;
    margin-top: 22px;
    width: 100%;
}

.he-button--purchase-save {
    background: rgba(124, 58, 237, 0.92);
    border: 1px solid rgba(196, 181, 253, 0.70);
    box-shadow: 0 10px 24px rgba(76, 29, 149, 0.24);
    color: #ffffff;
    min-width: 210px;
}

.he-button--purchase-save:hover {
    background: rgba(109, 40, 217, 0.98);
    border-color: rgba(221, 214, 254, 0.86);
    color: #ffffff;
}

.he-item-system-meta {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(226, 232, 240, 0.56);
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 14px;
    justify-content: center;
    margin-top: 18px;
    padding-top: 12px;
}

@media (max-width: 900px) {
    .he-purchase-form-row--top,
    .he-purchase-form-row--middle,
    .he-purchase-form-row--bottom {
        grid-template-columns: 1fr;
        max-width: none;
    }
}
/* SECTION: Item Detail Operations + Cost Summary */

.he-item-side-actions {
    align-items: stretch;
    display: grid;
    gap: 12px;
    justify-items: stretch;
    min-width: 210px;
}

.he-item-cost-summary {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    display: grid;
    gap: 4px;
    padding: 12px;
}

.he-item-cost-summary span {
    color: rgba(226, 232, 240, 0.72);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    align-items: center;
    display: grid;
    justify-content: center;
    text-align: center;
}

.he-item-cost-summary span,
.he-item-cost-summary strong,
.he-item-cost-summary small,
.he-item-cost-summary p {
    text-align: center;
}

.he-item-cost-summary strong {
    color: #ffffff;
    font-size: 22px;
    line-height: 1.1;
}

.he-item-cost-summary small {
    color: rgba(226, 232, 240, 0.58);
    font-size: 11px;
    line-height: 1.35;
}

.he-tab-button--operations {
    border-top-color: rgba(251, 191, 36, 0.68);
}

.he-tab-button--operations.is-active {
    background: rgba(245, 158, 11, 0.16);
    color: #ffffff;
}

.he-purchase-form-row--purchase-main {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) minmax(0, 1.25fr) minmax(0, 0.75fr);
}

.he-purchase-form-row--operations-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 85%;
}

.he-purchase-form-row--operations-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 85%;
}

.he-button--operations-save {
    background: rgba(245, 158, 11, 0.86);
    border: 1px solid rgba(251, 191, 36, 0.68);
    box-shadow: 0 10px 24px rgba(120, 53, 15, 0.22);
    color: #111827;
    min-width: 190px;
}

.he-button--operations-save:hover {
    background: rgba(251, 191, 36, 0.95);
    border-color: rgba(253, 230, 138, 0.82);
    color: #111827;
}

@media (max-width: 900px) {
    .he-item-side-actions {
        justify-items: start;
        min-width: 0;
    }

    .he-item-cost-summary {
        align-items: center;
        display: grid;
        justify-content: center;
        text-align: center;
    }
    
    .he-item-cost-summary span,
    .he-item-cost-summary strong {
        text-align: center;
    }
    .he-purchase-form-row--purchase-main,
    .he-purchase-form-row--operations-main,
    .he-purchase-form-row--operations-secondary {
        grid-template-columns: 1fr;
        max-width: none;
    }
}
/* SECTION: Item Detail Compact Vertical Spacing */

.he-page {
    padding-top: 20px !important;
}

.he-card {
    padding-top: 24px !important;
}

.he-item-hero {
    gap: 14px;
}

.he-item-title h1 {
    margin-bottom: 6px;
}

.he-item-subtitle {
    margin-bottom: 8px;
}

.he-item-subtitle--secondary {
    margin-bottom: 10px;
}

.he-item-meta-row {
    margin-top: 8px;
}

.he-item-media-notes-grid {
    margin-top: 14px;
}

.he-item-tabs-wrap {
    margin-top: 18px;
}

.he-tab-panel {
    padding: 14px 18px;
}
/* SECTION: Item Detail Card Details Tab */

.he-tab-button--card {
    border-top-color: rgba(250, 204, 21, 0.72);
}

.he-tab-button--card.is-active {
    background: rgba(234, 179, 8, 0.16);
    color: #ffffff;
}

.he-card-detail-form-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
}

.he-card-detail-form-grid .he-input {
    min-width: 0;
    width: 100%;
}

.he-button--card-save {
    background: rgba(234, 179, 8, 0.92);
    border: 1px solid rgba(253, 224, 71, 0.70);
    box-shadow: 0 10px 24px rgba(113, 63, 18, 0.24);
    color: #111827;
    min-width: 210px;
}

.he-button--card-save:hover {
    background: rgba(250, 204, 21, 0.98);
    border-color: rgba(254, 240, 138, 0.86);
    color: #111827;
}

@media (max-width: 900px) {
    .he-card-detail-form-grid {
        grid-template-columns: 1fr;
    }
}
/* SECTION: Item Detail Operations Sections */

.he-operations-layout {
    display: grid;
    gap: 16px;
    width: 100%;
}

.he-operations-section {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px;
}

.he-operations-section__header {
    align-items: start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.he-operations-section__header h2 {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 4px;
}

.he-operations-section__header p {
    color: rgba(226, 232, 240, 0.68);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}

.he-readonly-metric-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.he-readonly-metric {
    background: rgba(15, 23, 42, 0.52);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    display: grid;
    gap: 6px;
    min-height: 72px;
    padding: 12px 14px;
}

.he-readonly-metric span {
    color: rgba(226, 232, 240, 0.62);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-readonly-metric strong {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.15;
}

.he-readonly-metric--soft strong {
    color: rgba(226, 232, 240, 0.72);
    font-size: 15px;
}

.he-operations-field-grid {
    display: grid;
    gap: 16px;
    width: 100%;
}

.he-operations-field-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.he-operations-section .he-input {
    min-width: 0;
    width: 100%;
}

.he-operations-section textarea.he-input {
    min-height: 104px;
    padding-bottom: 12px;
    padding-top: 12px;
    resize: vertical;
}

@media (max-width: 900px) {
    .he-readonly-metric-grid,
    .he-operations-field-grid--two {
        grid-template-columns: 1fr;
    }
}


/* SECTION: Content Link Readability */

.he-page a:not(.he-button):not(.he-app-nav__brand):not(.he-app-nav__link):not(.he-app-nav__dropdown-link),
.he-page a:not(.he-button):not(.he-app-nav__brand):not(.he-app-nav__link):not(.he-app-nav__dropdown-link):visited {
    color: #93c5fd;
    font-weight: 700;
    text-decoration-color: rgba(147, 197, 253, 0.45);
    text-underline-offset: 3px;
}

.he-page a:not(.he-button):not(.he-app-nav__brand):not(.he-app-nav__link):not(.he-app-nav__dropdown-link):hover,
.he-page a:not(.he-button):not(.he-app-nav__brand):not(.he-app-nav__link):not(.he-app-nav__dropdown-link):focus {
    color: #bfdbfe;
    text-decoration-color: rgba(191, 219, 254, 0.85);
}

/* SECTION: Batch Detail Item Cards */

.he-batch-item-list {
    display: grid;
    gap: 14px;
    margin-top: 24px;
    width: 100%;
}

.he-batch-item-card {
    align-items: stretch;
    background: rgba(15, 23, 42, 0.44);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    display: grid;
    gap: 16px;
    grid-template-columns: 118px minmax(0, 1fr);
    padding: 14px;
}

.he-batch-item-card:hover {
    background: rgba(15, 23, 42, 0.62);
    border-color: rgba(147, 197, 253, 0.28);
}

.he-batch-item-card__image {
    align-items: center;
    background: rgba(2, 6, 23, 0.54);
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 14px;
    color: rgba(226, 232, 240, 0.62);
    display: flex;
    font-size: 13px;
    font-weight: 700;
    justify-content: center;
    min-height: 154px;
    padding: 8px;
    text-align: center;
    text-decoration: none;
}

.he-batch-item-card__image img {
    border-radius: 10px;
    display: block;
    max-height: 138px;
    max-width: 96px;
    object-fit: contain;
    width: auto;
}

.he-batch-item-card__main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.he-batch-item-card__header {
    align-items: start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.he-batch-item-card__title {
    color: #e0f2fe !important;
    display: inline-block;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.25;
    text-decoration-color: rgba(224, 242, 254, 0.32) !important;
}

.he-batch-item-card__subtext {
    color: rgba(226, 232, 240, 0.70);
    font-size: 13px;
    line-height: 1.35;
    margin-top: 4px;
}

.he-batch-item-card__meta {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.he-batch-item-card__meta div {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    min-width: 0;
    padding: 10px;
}

.he-batch-item-card__meta span {
    color: rgba(226, 232, 240, 0.56);
    display: block;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.he-batch-item-card__meta strong {
    color: rgba(248, 250, 252, 0.92);
    display: block;
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.he-batch-item-card__note {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: 12px;
    color: rgba(253, 230, 138, 0.92);
    font-size: 13px;
    line-height: 1.4;
    padding: 10px;
}

.he-batch-item-card__note span {
    color: rgba(253, 230, 138, 0.70);
    display: block;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

@media (max-width: 1000px) {
    .he-batch-item-card__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .he-batch-item-card {
        grid-template-columns: 1fr;
    }

    .he-batch-item-card__image {
        min-height: 120px;
    }

    .he-batch-item-card__image img {
        max-height: 116px;
    }

    .he-batch-item-card__header {
        align-items: stretch;
        flex-direction: column;
    }

    .he-batch-item-card__meta {
        grid-template-columns: 1fr;
    }
}
/* SECTION: Batch Detail Image Size Fix */

.he-batch-item-image,
.he-batch-item-image img {
    max-height: 120px !important;
    max-width: 90px !important;
}

.he-batch-item-image {
    align-items: center;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    display: flex;
    height: 130px;
    justify-content: center;
    overflow: hidden;
    width: 96px;
}

.he-batch-item-image img {
    display: block;
    height: auto !important;
    object-fit: contain !important;
    width: auto !important;
}

.he-batch-item-row {
    align-items: center;
}

/* SECTION: Batch Detail TCO + Compact Card Layout */

.he-batch-item-card__header {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) 150px;
}

.he-batch-item-card__actions {
    align-content: start;
    display: grid;
    gap: 8px;
    justify-items: stretch;
    min-width: 0;
}

.he-batch-item-card__actions .he-button {
    width: 100%;
}

.he-batch-item-card__tco {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    display: grid;
    gap: 4px;
    padding: 9px 10px;
    text-align: center;
}

.he-batch-item-card__tco span {
    color: rgba(226, 232, 240, 0.58);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.he-batch-item-card__tco strong {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.15;
}

.he-batch-item-card__meta {
    gap: 8px;
    grid-template-columns:
        minmax(90px, 0.9fr)
        minmax(80px, 0.8fr)
        minmax(90px, 0.9fr)
        minmax(135px, 1.15fr)
        minmax(100px, 0.95fr);
}

.he-batch-item-card__meta div {
    padding: 8px 9px;
}

.he-batch-item-card__meta span {
    font-size: 9px;
    margin-bottom: 4px;
}

.he-batch-item-card__meta strong {
    font-size: 12px;
}

@media (max-width: 1000px) {
    .he-batch-item-card__header {
        grid-template-columns: 1fr;
    }

    .he-batch-item-card__actions {
        grid-template-columns: minmax(0, 160px) minmax(0, 170px);
        justify-content: start;
    }

    .he-batch-item-card__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .he-batch-item-card__actions {
        grid-template-columns: 1fr;
    }

    .he-batch-item-card__meta {
        grid-template-columns: 1fr;
    }
}


/* SECTION: Batch Detail Title Split */

.he-batch-item-card__title span {
    display: block;
}

.he-batch-item-card__title-detail {
    margin-top: 2px;
}
/* SECTION: Batches Compact Table Fix
   Purpose: Keep the Batches table inside the card after adding TCO.
   Notes: Append this at the very bottom of hobbyedge.css.
*/

.he-table-wrap {
    overflow-x: auto !important;
}

.he-batches-table {
    font-size: 12px !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    width: 100% !important;
}

.he-batches-table th,
.he-batches-table td {
    padding: 9px 7px !important;
    white-space: normal !important;
}

.he-batches-table th {
    font-size: 10px !important;
    line-height: 1.15 !important;
}

.he-batches-table td {
    font-size: 12px !important;
    line-height: 1.25 !important;
}

.he-batches-table td:nth-child(1) {
    min-width: 0 !important;
    width: 17% !important;
}

.he-batches-table td:nth-child(2),
.he-batches-table td:nth-child(3),
.he-batches-table td:nth-child(4),
.he-batches-table td:nth-child(5),
.he-batches-table td:nth-child(6),
.he-batches-table td:nth-child(7) {
    min-width: 0 !important;
    width: 7% !important;
}

.he-batches-table td:nth-child(8) {
    min-width: 0 !important;
    width: 10% !important;
}

.he-batches-table td:nth-child(9) {
    min-width: 0 !important;
    width: 8% !important;
}

.he-batches-table td:nth-child(10) {
    min-width: 0 !important;
    width: 10% !important;
}

.he-batches-table td:nth-child(11) {
    min-width: 0 !important;
    width: 10% !important;
}

.he-batches-table .he-button--mini {
    min-height: 32px !important;
    padding: 0 9px !important;
    width: auto !important;
}

.he-batches-table .he-input--table {
    font-size: 12px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
}

.he-batches-tco-cell {
    display: grid;
    gap: 2px;
}

.he-batches-tco-cell strong {
    color: #ffffff;
    font-size: 12px;
    line-height: 1.1;
}

.he-batches-tco-cell span {
    color: rgba(226, 232, 240, 0.58);
    display: block;
    font-size: 10px;
    line-height: 1.1;
}

@media (max-width: 900px) {
    .he-batches-table {
        min-width: 940px !important;
    }
}
/* SECTION: Batch Detail Summary Metrics */

.he-batch-summary-row {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    width: 100%;
}

.he-batch-summary-row > div {
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    color: rgba(248, 250, 252, 0.94);
    font-size: 14px;
    font-weight: 800;
    min-width: 0;
    padding: 10px;
}

.he-batch-summary-row > div span {
    color: rgba(226, 232, 240, 0.56);
    display: block;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    .he-batch-summary-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .he-batch-summary-row {
        grid-template-columns: 1fr;
    }
}
/* SECTION: Inventory Item Card View */

.he-inventory-item-list {
    margin-top: 28px;
}

.he-inventory-item-card .he-batch-item-card__meta {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.he-inventory-item-card .he-batch-item-card__meta a {
    color: #bfdbfe !important;
    text-decoration-color: rgba(191, 219, 254, 0.42) !important;
}

.he-inventory-item-card .he-batch-item-card__meta a:hover,
.he-inventory-item-card .he-batch-item-card__meta a:focus {
    color: #dbeafe !important;
    text-decoration-color: rgba(219, 234, 254, 0.82) !important;
}

@media (max-width: 1180px) {
    .he-inventory-item-card .he-batch-item-card__meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .he-inventory-item-card .he-batch-item-card__meta {
        grid-template-columns: 1fr;
    }
}
/* SECTION: Item Detail Condition / Self-Grading Tab */

.he-tab-button--condition {
    border-top-color: rgba(45, 212, 191, 0.70);
}

.he-tab-button--condition.is-active {
    background: rgba(20, 184, 166, 0.16);
    color: #ffffff;
}

.he-item-condition-decal,
.he-condition-decal-preview,
.he-condition-summary-card,
.he-condition-score-display {
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(45, 212, 191, 0.22);
    border-radius: 14px;
    display: grid;
    gap: 4px;
    padding: 12px;
    text-align: center;
}

.he-item-condition-decal span,
.he-condition-decal-preview span,
.he-condition-summary-card span,
.he-condition-score-display span,
.he-condition-summary-note span {
    color: rgba(153, 246, 228, 0.82);
    display: block;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-item-condition-decal strong,
.he-condition-decal-preview strong,
.he-condition-summary-card strong,
.he-condition-score-display strong {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.1;
}

.he-item-condition-decal small,
.he-condition-summary-card small {
    color: rgba(226, 232, 240, 0.62);
    font-size: 11px;
    line-height: 1.35;
}

.he-item-condition-summary-panel {
    display: grid;
    gap: 12px;
}

.he-condition-summary-note {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    color: rgba(226, 232, 240, 0.88);
    font-size: 13px;
    line-height: 1.45;
    padding: 12px;
}

.he-condition-layout {
    display: grid;
    gap: 16px;
    width: 100%;
}

.he-condition-grid {
    display: grid;
    gap: 14px;
    width: 100%;
}

.he-condition-grid--summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.he-condition-grid--scores {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.he-condition-grid--notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.he-condition-section .he-input {
    min-width: 0;
    width: 100%;
}

.he-condition-section textarea.he-input {
    min-height: 118px;
    padding-bottom: 12px;
    padding-top: 12px;
    resize: vertical;
}

.he-condition-public-label-row {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1fr);
    margin-top: 16px;
}

.he-condition-checkbox-label {
    align-items: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    display: flex;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
}

.he-condition-checkbox-label input {
    accent-color: #14b8a6;
}

.he-button--condition-save {
    background: rgba(20, 184, 166, 0.90);
    border: 1px solid rgba(94, 234, 212, 0.68);
    box-shadow: 0 10px 24px rgba(19, 78, 74, 0.22);
    color: #062c2a;
    min-width: 240px;
}

.he-button--condition-save:hover {
    background: rgba(45, 212, 191, 0.96);
    border-color: rgba(153, 246, 228, 0.82);
    color: #042f2e;
}

@media (max-width: 1100px) {
    .he-condition-grid--scores {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .he-condition-grid--summary,
    .he-condition-grid--scores,
    .he-condition-grid--notes,
    .he-condition-public-label-row {
        grid-template-columns: 1fr;
    }
}
/* SECTION: Item Detail Condition Tab Color */

.he-tab-button--condition {
    border-top-color: rgba(45, 212, 191, 0.72);
}

.he-tab-button--condition.is-active {
    background: rgba(20, 184, 166, 0.16);
    color: #ffffff;
}
/* SECTION: Condition Tab Compact Layout Fix */

.he-tab-panel[data-he-panel="condition"] > .he-empty-state {
    margin-top: 8px !important;
    margin-bottom: 22px !important;
    padding: 16px 28px !important;
}

.he-tab-panel[data-he-panel="condition"] > .he-empty-state h2 {
    font-size: 22px !important;
    margin: 0 0 8px !important;
}

.he-tab-panel[data-he-panel="condition"] > .he-empty-state p {
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

.he-tab-panel[data-he-panel="condition"] form {
    margin-top: 12px !important;
}

.he-tab-panel[data-he-panel="condition"] .he-purchase-form-grid {
    gap: 18px !important;
}

.he-tab-panel[data-he-panel="condition"] .he-field-mini {
    margin-top: 0 !important;
}
/* SECTION: Shared Item Card Condition Decal */

.he-batch-item-card__condition-decal {
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(45, 212, 191, 0.22);
    border-radius: 12px;
    display: grid;
    gap: 4px;
    padding: 9px 10px;
    text-align: center;
}

.he-batch-item-card__condition-decal span {
    color: rgba(153, 246, 228, 0.82);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.he-batch-item-card__condition-decal strong {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.15;
}
/* SECTION: Item Card Right Rail Condition Placement */

.he-batch-item-card__actions {
    grid-template-columns: minmax(120px, 1fr) minmax(150px, 1fr);
    align-items: stretch;
}

.he-batch-item-card__actions .he-item-card-condition-decal {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: stretch;
    justify-content: center;
}

.he-batch-item-card__actions .he-button {
    grid-column: 2;
}

.he-batch-item-card__actions .he-batch-item-card__tco {
    grid-column: 2;
}

@media (max-width: 1000px) {
    .he-batch-item-card__actions {
        grid-template-columns: minmax(0, 150px) minmax(0, 170px);
    }
}

@media (max-width: 760px) {
    .he-batch-item-card__actions {
        grid-template-columns: 1fr;
    }

    .he-batch-item-card__actions .he-item-card-condition-decal,
    .he-batch-item-card__actions .he-button,
    .he-batch-item-card__actions .he-batch-item-card__tco {
        grid-column: 1;
        grid-row: auto;
    }
}
/* SECTION: Item Card Right Rail Final Layout */

.he-batch-item-card__header {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.he-batch-item-card__actions {
    align-items: stretch !important;
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: 120px 150px !important;
    grid-template-rows: auto auto !important;
    justify-self: end !important;
    min-width: 278px !important;
    width: 278px !important;
}

.he-batch-item-card__actions .he-item-card-condition-decal {
    align-self: stretch !important;
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 0 !important;
}

.he-batch-item-card__actions .he-button {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    width: 100% !important;
}

.he-batch-item-card__actions .he-batch-item-card__tco {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    width: 100% !important;
}

@media (max-width: 1000px) {
    .he-batch-item-card__actions {
        grid-template-columns: 120px 150px !important;
        min-width: 278px !important;
        width: 278px !important;
    }
}

@media (max-width: 760px) {
    .he-batch-item-card__actions {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .he-batch-item-card__actions .he-item-card-condition-decal,
    .he-batch-item-card__actions .he-button,
    .he-batch-item-card__actions .he-batch-item-card__tco {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}
/* SECTION: Item Card Cleanup - Condition / TCO / Action Rail */

.he-batch-item-card__header {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.he-batch-item-card__actions,
.he-batch-item-card__actions--three {
    align-items: stretch !important;
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: 120px 150px 150px !important;
    justify-self: end !important;
    min-width: 436px !important;
    width: 436px !important;
}

.he-batch-item-card__actions .he-batch-item-card__condition-decal {
    align-content: center !important;
    align-self: stretch !important;
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 68px !important;
    width: 100% !important;
}

.he-batch-item-card__actions .he-batch-item-card__condition-decal--empty {
    opacity: 0;
}

.he-batch-item-card__actions .he-batch-item-card__tco {
    align-content: center !important;
    align-self: stretch !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    min-height: 68px !important;
    width: 100% !important;
}

.he-batch-item-card__actions .he-button {
    align-self: stretch !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    min-height: 68px !important;
    width: 100% !important;
}

.he-batch-item-card__subtext {
    margin-top: 6px !important;
}

@media (max-width: 1180px) {
    .he-batch-item-card__actions,
    .he-batch-item-card__actions--three {
        grid-template-columns: 120px 145px 145px !important;
        min-width: 426px !important;
        width: 426px !important;
    }
}

@media (max-width: 1000px) {
    .he-batch-item-card__header {
        grid-template-columns: 1fr !important;
    }

    .he-batch-item-card__actions,
    .he-batch-item-card__actions--three {
        justify-self: start !important;
    }
}

@media (max-width: 760px) {
    .he-batch-item-card__actions,
    .he-batch-item-card__actions--three {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .he-batch-item-card__actions .he-batch-item-card__condition-decal,
    .he-batch-item-card__actions .he-batch-item-card__tco,
    .he-batch-item-card__actions .he-button {
        grid-column: 1 !important;
        grid-row: auto !important;
        min-height: 46px !important;
    }
}
/* SECTION: Dashboard Light Stats */

.he-dashboard-section {
    margin-top: 28px;
}

.he-dashboard-section--split {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.he-dashboard-section-header {
    margin-bottom: 12px;
}

.he-dashboard-section-header h2 {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.2;
    margin: 0 0 4px;
}

.he-dashboard-section-header p {
    color: rgba(226, 232, 240, 0.68);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

.he-dashboard-metric-grid {
    display: grid;
    gap: 12px;
}

.he-dashboard-metric-grid--primary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.he-dashboard-metric-grid--secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.he-dashboard-metric-card,
.he-dashboard-small-card {
    background: rgba(15, 23, 42, 0.46);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 16px;
}

.he-dashboard-metric-card span,
.he-dashboard-small-card span {
    color: rgba(226, 232, 240, 0.58);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.he-dashboard-metric-card strong {
    color: #ffffff;
    font-size: 30px;
    line-height: 1.05;
}

.he-dashboard-small-card strong {
    color: #ffffff;
    font-size: 21px;
    line-height: 1.1;
}

.he-dashboard-metric-card small,
.he-dashboard-small-card small {
    color: rgba(226, 232, 240, 0.62);
    font-size: 11px;
    line-height: 1.35;
}

.he-dashboard-next-actions {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 28px;
}

@media (max-width: 1100px) {
    .he-dashboard-metric-grid--primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-dashboard-section--split,
    .he-dashboard-next-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .he-dashboard-metric-grid--primary,
    .he-dashboard-metric-grid--secondary {
        grid-template-columns: 1fr;
    }
}
/* SECTION: Listing Prep Save Form */

.he-listing-prep-form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(160px, 0.8fr) minmax(180px, 1fr) minmax(140px, 0.75fr);
    margin-top: 14px;
    width: 100%;
}

.he-listing-prep-form-grid .he-input,
.he-listing-title-field .he-input {
    min-width: 0;
    width: 100%;
}

.he-listing-title-field {
    margin-top: 14px;
}

.he-listing-title-field textarea.he-input {
    min-height: 96px;
    padding-bottom: 12px;
    padding-top: 12px;
    resize: vertical;
}

.he-button--listing-save {
    background: rgba(59, 130, 246, 0.92);
    border: 1px solid rgba(147, 197, 253, 0.70);
    box-shadow: 0 10px 24px rgba(30, 64, 175, 0.22);
    color: #ffffff;
    min-width: 190px;
}

.he-button--listing-save:hover {
    background: rgba(37, 99, 235, 0.98);
    border-color: rgba(191, 219, 254, 0.86);
    color: #ffffff;
}

.he-button--listing-save:disabled,
.he-button--listing-save[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
}

.he-listing-field-grid--compact {
    margin-top: 14px;
}

.he-listing-readiness-status--failed {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(248, 113, 113, 0.32);
}

.he-listing-readiness-status--failed strong {
    color: #fecaca;
}

@media (max-width: 900px) {
    .he-listing-prep-form-grid {
        grid-template-columns: 1fr;
    }
}
/* SECTION: Dashboard Listing Prep Stats */

.he-dashboard-hero {
    align-items: start;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    margin-bottom: 28px;
}

.he-dashboard-hero h1 {
    margin-bottom: 10px;
}

.he-dashboard-status-card {
    background: rgba(59, 130, 246, 0.10);
    border: 1px solid rgba(147, 197, 253, 0.22);
    border-radius: 16px;
    display: grid;
    gap: 5px;
    padding: 16px;
    text-align: center;
}

.he-dashboard-status-card span,
.he-dashboard-stat span {
    color: rgba(226, 232, 240, 0.60);
    display: block;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.he-dashboard-status-card strong {
    color: #ffffff;
    font-size: 24px;
    line-height: 1.1;
}

.he-dashboard-status-card small,
.he-dashboard-stat small {
    color: rgba(226, 232, 240, 0.62);
    display: block;
    font-size: 12px;
    line-height: 1.35;
}

.he-dashboard-section {
    margin-top: 26px;
}

.he-dashboard-section__header {
    align-items: end;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.he-dashboard-section__header h2 {
    color: #ffffff;
    font-size: 20px;
    margin: 0;
}

.he-dashboard-section__header p {
    color: rgba(226, 232, 240, 0.62);
    font-size: 13px;
    margin: 0;
    text-align: right;
}

.he-dashboard-stat-grid {
    display: grid;
    gap: 12px;
}

.he-dashboard-stat-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.he-dashboard-stat {
    background: rgba(15, 23, 42, 0.44);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    display: grid;
    gap: 6px;
    min-height: 118px;
    padding: 15px;
}

.he-dashboard-stat strong {
    color: #ffffff;
    font-size: 28px;
    line-height: 1.05;
}

.he-dashboard-stat--ready {
    background: rgba(34, 197, 94, 0.09);
    border-color: rgba(74, 222, 128, 0.22);
}

.he-dashboard-stat--ready span {
    color: rgba(187, 247, 208, 0.78);
}

.he-dashboard-stat--warning {
    background: rgba(245, 158, 11, 0.09);
    border-color: rgba(251, 191, 36, 0.22);
}

.he-dashboard-stat--warning span {
    color: rgba(253, 230, 138, 0.78);
}

@media (max-width: 1100px) {
    .he-dashboard-stat-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .he-dashboard-hero {
        grid-template-columns: 1fr;
    }

    .he-dashboard-section__header {
        align-items: start;
        display: grid;
    }

    .he-dashboard-section__header p {
        text-align: left;
    }

    .he-dashboard-stat-grid--four {
        grid-template-columns: 1fr;
    }
}
/* SECTION: Listings Queue Page */

.he-listings-summary-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 28px;
}

.he-listings-summary-card {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    color: #ffffff !important;
    display: grid;
    gap: 5px;
    padding: 14px;
    text-decoration: none;
}

.he-listings-summary-card:hover,
.he-listings-summary-card.is-active {
    background: rgba(124, 58, 237, 0.16);
    border-color: rgba(196, 181, 253, 0.36);
}

.he-listings-summary-card span {
    color: rgba(226, 232, 240, 0.64);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-listings-summary-card strong {
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
}

.he-listings-summary-card small {
    color: rgba(226, 232, 240, 0.58);
    font-size: 11px;
    line-height: 1.25;
}

.he-listings-section-header {
    align-items: end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-top: 28px;
}

.he-listings-section-header h2 {
    color: #ffffff;
    font-size: 24px;
    line-height: 1.1;
    margin: 0 0 6px;
}

.he-listings-section-header p {
    color: rgba(226, 232, 240, 0.68);
    font-size: 14px;
    line-height: 1.35;
    margin: 0;
}

.he-listings-queue-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.he-listings-queue-card {
    align-items: stretch;
    background: rgba(15, 23, 42, 0.44);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    display: grid;
    gap: 16px;
    grid-template-columns: 118px minmax(0, 1fr);
    padding: 14px;
}

.he-listings-queue-card:hover {
    background: rgba(15, 23, 42, 0.62);
    border-color: rgba(147, 197, 253, 0.28);
}

.he-listings-queue-card__image {
    align-items: center;
    background: rgba(2, 6, 23, 0.54);
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 14px;
    color: rgba(226, 232, 240, 0.62) !important;
    display: flex;
    font-size: 13px;
    font-weight: 700;
    justify-content: center;
    min-height: 154px;
    padding: 8px;
    text-align: center;
    text-decoration: none;
}

.he-listings-queue-card__image img {
    border-radius: 10px;
    display: block;
    max-height: 138px;
    max-width: 96px;
    object-fit: contain;
    width: auto;
}

.he-listings-queue-card__main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.he-listings-queue-card__top {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.he-listings-queue-card__title {
    color: #e0f2fe !important;
    display: inline-block;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.25;
    text-decoration-color: rgba(224, 242, 254, 0.32) !important;
}

.he-listings-queue-card__title span {
    display: block;
    margin-top: 2px;
}

.he-listings-queue-card__subtext {
    color: rgba(226, 232, 240, 0.70);
    font-size: 13px;
    line-height: 1.35;
    margin: 6px 0 0;
}

.he-listings-queue-card__actions {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: 120px 150px 150px;
    min-width: 436px;
    width: 436px;
}

.he-listings-queue-card__actions .he-button {
    min-height: 68px;
    width: 100%;
}

.he-listing-status-pill,
.he-listing-price-card {
    align-content: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    display: grid;
    gap: 4px;
    min-height: 68px;
    padding: 9px 10px;
    text-align: center;
}

.he-listing-status-pill span,
.he-listing-price-card span {
    color: rgba(226, 232, 240, 0.58);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.he-listing-status-pill strong,
.he-listing-price-card strong {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.15;
}

.he-listing-status-pill--ready {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(74, 222, 128, 0.24);
}

.he-listing-status-pill--ready span,
.he-listing-status-pill--ready strong {
    color: #bbf7d0;
}

.he-listing-status-pill--not_ready {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(251, 191, 36, 0.24);
}

.he-listing-status-pill--not_ready span,
.he-listing-status-pill--not_ready strong {
    color: #fde68a;
}

.he-listing-status-pill--failed {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(248, 113, 113, 0.30);
}

.he-listing-status-pill--failed span,
.he-listing-status-pill--failed strong {
    color: #fecaca;
}

.he-listing-status-pill--queued {
    background: rgba(59, 130, 246, 0.11);
    border-color: rgba(147, 197, 253, 0.25);
}

.he-listing-status-pill--queued span,
.he-listing-status-pill--queued strong {
    color: #bfdbfe;
}

.he-listing-status-pill--listed {
    background: rgba(20, 184, 166, 0.10);
    border-color: rgba(45, 212, 191, 0.24);
}

.he-listing-status-pill--listed span,
.he-listing-status-pill--listed strong {
    color: #99f6e4;
}

.he-listings-queue-card__meta {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.he-listings-queue-card__meta div {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    min-width: 0;
    padding: 8px 9px;
}

.he-listings-queue-card__meta span {
    color: rgba(226, 232, 240, 0.56);
    display: block;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.he-listings-queue-card__meta strong {
    color: rgba(248, 250, 252, 0.92);
    display: block;
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.he-listings-queue-card__note {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: 12px;
    color: rgba(253, 230, 138, 0.92);
    font-size: 13px;
    line-height: 1.4;
    padding: 10px;
}

.he-listings-queue-card__note span {
    color: rgba(253, 230, 138, 0.70);
    display: block;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

@media (max-width: 1180px) {
    .he-listings-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .he-listings-queue-card__actions {
        grid-template-columns: 120px 145px 145px;
        min-width: 426px;
        width: 426px;
    }

    .he-listings-queue-card__meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .he-listings-queue-card__top {
        grid-template-columns: 1fr;
    }

    .he-listings-queue-card__actions {
        justify-self: start;
    }
}

@media (max-width: 760px) {
    .he-listings-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-listings-section-header {
        display: block;
    }

    .he-listings-queue-card {
        grid-template-columns: 1fr;
    }

    .he-listings-queue-card__image {
        min-height: 120px;
    }

    .he-listings-queue-card__image img {
        max-height: 116px;
    }

    .he-listings-queue-card__actions {
        grid-template-columns: 1fr;
        min-width: 0;
        width: 100%;
    }

    .he-listings-queue-card__actions .he-button,
    .he-listing-status-pill,
    .he-listing-price-card {
        min-height: 46px;
    }

    .he-listings-queue-card__meta {
        grid-template-columns: 1fr;
    }
}
/* SECTION: Listings Queue Status Update Controls */

.he-listings-status-form {
    align-items: end;
    background: rgba(255, 255, 255, 0.032);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(170px, 1fr) auto;
    margin-top: 10px;
    padding: 10px;
}

.he-listings-status-form .he-field-mini {
    min-width: 0;
}

.he-listings-status-form .he-input {
    min-width: 0;
    width: 100%;
}

.he-listings-status-form .he-button {
    min-height: 36px;
    white-space: nowrap;
}

@media (max-width: 1000px) {
    .he-listings-status-form {
        max-width: 430px;
    }
}

@media (max-width: 760px) {
    .he-listings-status-form {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .he-listings-status-form .he-button {
        width: 100%;
    }
}
/* SECTION: Listings External Sync Foundation */

.he-listings-summary-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.he-listings-summary-card--static:hover {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.10);
}

.he-listings-queue-card__actions {
    grid-template-columns: 120px 140px 140px 150px !important;
    min-width: 574px !important;
    width: 574px !important;
}

.he-listing-sync-card {
    align-content: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    display: grid;
    gap: 4px;
    min-height: 68px;
    padding: 9px 10px;
    text-align: center;
}

.he-listing-sync-card span {
    color: rgba(226, 232, 240, 0.58);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.he-listing-sync-card strong {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.15;
}

.he-listing-sync-card--pending {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.18);
}

.he-listing-sync-card--pending span,
.he-listing-sync-card--pending strong {
    color: rgba(226, 232, 240, 0.82);
}

.he-listing-sync-card--synced {
    background: rgba(20, 184, 166, 0.10);
    border-color: rgba(45, 212, 191, 0.24);
}

.he-listing-sync-card--synced span,
.he-listing-sync-card--synced strong {
    color: #99f6e4;
}

.he-listing-sync-card--error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(248, 113, 113, 0.30);
}

.he-listing-sync-card--error span,
.he-listing-sync-card--error strong {
    color: #fecaca;
}

.he-listings-queue-card__note--sync {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(147, 197, 253, 0.18);
    color: rgba(219, 234, 254, 0.92);
}

.he-listings-queue-card__note--sync span {
    color: rgba(191, 219, 254, 0.74);
}

@media (max-width: 1180px) {
    .he-listings-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .he-listings-queue-card__actions {
        grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
        min-width: 300px !important;
        width: 300px !important;
    }
}

@media (max-width: 1000px) {
    .he-listings-queue-card__actions {
        min-width: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 760px) {
    .he-listings-summary-grid {
        grid-template-columns: 1fr;
    }

    .he-listings-queue-card__actions {
        grid-template-columns: 1fr !important;
    }
}
/* SECTION: Marketplace Settings
   Purpose: Style the Marketplace Settings foundation page.
   Usage: Append this block to the bottom of hobbyedge.css.
   Dependencies: Existing HobbyEdge he-* layout, card, button, input, and alert styles.
   Key Blocks:
   - Marketplace layout
   - Marketplace account card
   - Status indicators
   - Form fields and sync toggle
   - Connection details
   - OAuth placeholder actions
   - Responsive layout
*/

.he-marketplace-settings-layout {
    display: grid;
    gap: 18px;
    margin-top: 24px;
    width: 100%;
}

.he-marketplace-card {
    background: rgba(15, 23, 42, 0.44);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    padding: 18px;
}

.he-marketplace-card__header {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.he-marketplace-card__header h2 {
    color: #ffffff;
    font-size: 21px;
    line-height: 1.2;
    margin: 0 0 4px;
}

.he-marketplace-card__header p {
    color: rgba(226, 232, 240, 0.64);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

.he-marketplace-card code,
.he-marketplace-security-note code,
.he-marketplace-alert--warning code {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 7px;
    color: #ddd6fe;
    font-family: Consolas, Monaco, monospace;
    font-size: 0.9em;
    padding: 2px 6px;
}

.he-marketplace-brand {
    align-items: center;
    display: flex;
    gap: 14px;
}

.he-marketplace-brand__mark {
    align-items: center;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.95), rgba(124, 58, 237, 0.92));
    border: 1px solid rgba(191, 219, 254, 0.52);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(30, 64, 175, 0.24);
    color: #ffffff;
    display: flex;
    flex: 0 0 48px;
    font-size: 28px;
    font-weight: 900;
    height: 48px;
    justify-content: center;
    line-height: 1;
    text-transform: lowercase;
    width: 48px;
}

.he-marketplace-status {
    align-items: center;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.82);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    gap: 8px;
    min-height: 34px;
    padding: 0 13px;
}

.he-marketplace-status__dot {
    background: rgba(148, 163, 184, 0.78);
    border-radius: 50%;
    display: block;
    height: 8px;
    width: 8px;
}

.he-marketplace-status.is-connected {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(74, 222, 128, 0.24);
    color: #bbf7d0;
}

.he-marketplace-status.is-connected .he-marketplace-status__dot {
    background: #4ade80;
}

.he-marketplace-status.is-pending {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(251, 191, 36, 0.24);
    color: #fde68a;
}

.he-marketplace-status.is-pending .he-marketplace-status__dot {
    background: #fbbf24;
}

.he-marketplace-status.is-error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(248, 113, 113, 0.30);
    color: #fecaca;
}

.he-marketplace-status.is-error .he-marketplace-status__dot {
    background: #f87171;
}

.he-marketplace-alert--warning {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.28);
    color: #fde68a;
}

.he-marketplace-field-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
}

.he-marketplace-field-grid .he-input {
    min-width: 0;
    width: 100%;
}

.he-marketplace-field-grid .he-input:disabled {
    background: rgba(255, 255, 255, 0.045);
    color: rgba(226, 232, 240, 0.62);
    cursor: not-allowed;
    opacity: 1;
}

.he-marketplace-field-help {
    color: rgba(226, 232, 240, 0.50);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.35;
    text-transform: none;
}

.he-marketplace-sync-toggle {
    align-items: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    display: flex;
    gap: 12px;
    margin-top: 18px;
    padding: 13px 14px;
}

.he-marketplace-sync-toggle input {
    accent-color: #7c3aed;
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

.he-marketplace-sync-toggle span {
    display: grid;
    gap: 3px;
}

.he-marketplace-sync-toggle strong {
    color: #ffffff;
    font-size: 14px;
}

.he-marketplace-sync-toggle small {
    color: rgba(226, 232, 240, 0.58);
    font-size: 12px;
    line-height: 1.35;
}

.he-marketplace-detail-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.he-marketplace-detail {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    display: grid;
    gap: 6px;
    min-height: 82px;
    padding: 13px;
}

.he-marketplace-detail span {
    color: rgba(226, 232, 240, 0.56);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-marketplace-detail strong {
    color: rgba(248, 250, 252, 0.92);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.he-marketplace-detail--wide {
    grid-column: 1 / -1;
    min-height: 72px;
}

.he-marketplace-error-text {
    color: #fecaca !important;
}

.he-marketplace-future-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.he-marketplace-future-actions .he-button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.he-marketplace-security-note {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(147, 197, 253, 0.18);
    border-radius: 14px;
    color: rgba(219, 234, 254, 0.88);
    font-size: 13px;
    line-height: 1.5;
    margin: 16px 0 0;
    padding: 13px 14px;
}

.he-button--marketplace-save {
    background: rgba(59, 130, 246, 0.92);
    border: 1px solid rgba(147, 197, 253, 0.68);
    box-shadow: 0 10px 24px rgba(30, 64, 175, 0.22);
    color: #ffffff;
}

.he-button--marketplace-save:hover {
    background: rgba(37, 99, 235, 0.98);
    border-color: rgba(191, 219, 254, 0.86);
    color: #ffffff;
}

@media (max-width: 1000px) {
    .he-marketplace-field-grid,
    .he-marketplace-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .he-marketplace-card {
        padding: 14px;
    }

    .he-marketplace-card__header {
        display: grid;
    }

    .he-marketplace-status {
        justify-self: start;
    }

    .he-marketplace-field-grid,
    .he-marketplace-detail-grid {
        grid-template-columns: 1fr;
    }

    .he-marketplace-detail--wide {
        grid-column: auto;
    }

    .he-marketplace-future-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .he-marketplace-future-actions .he-button {
        width: 100%;
    }
}
/* SECTION: Marketplace Settings Account Foundation
   Purpose: Complete styling for the database-backed Marketplace Settings page.
   Usage: Append this block after the existing Marketplace Settings CSS section.
   Dependencies: Existing Marketplace Settings CSS patch and shared HobbyEdge styles.
*/

.he-marketplace-alert--info {
    background: rgba(59, 130, 246, 0.10);
    border: 1px solid rgba(147, 197, 253, 0.24);
    color: #bfdbfe;
}

.he-marketplace-card form {
    margin: 0;
}

.he-marketplace-card .he-form-actions {
    justify-content: flex-start;
    margin-top: 18px;
}

.he-marketplace-card .he-button--marketplace-save {
    min-width: 220px;
}

.he-marketplace-card .he-input:focus {
    border-color: rgba(147, 197, 253, 0.76);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

.he-marketplace-sync-toggle input:not(:disabled) {
    cursor: pointer;
}

.he-marketplace-sync-toggle:has(input:not(:disabled)) {
    cursor: pointer;
}

.he-marketplace-detail strong.he-marketplace-error-text {
    color: #fecaca;
}

@media (max-width: 760px) {
    .he-marketplace-card .he-button--marketplace-save {
        min-width: 0;
        width: 100%;
    }
}
/* SECTION: Marketplace Settings eBay OAuth Contact
   Purpose: style the active environment warning, OAuth connect panel, and capability foundation.
   Usage: append to the bottom of hobbyedge.css after existing Marketplace Settings patches.
*/

.he-marketplace-environment-banner {
    align-items: center;
    border-radius: 16px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-top: 24px;
    padding: 14px 16px;
}

.he-marketplace-environment-banner.is-sandbox {
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.28);
}

.he-marketplace-environment-banner.is-production {
    background: rgba(239, 68, 68, 0.11);
    border: 1px solid rgba(248, 113, 113, 0.30);
}

.he-marketplace-environment-banner div {
    display: grid;
    gap: 3px;
}

.he-marketplace-environment-banner span {
    color: rgba(226, 232, 240, 0.58);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-marketplace-environment-banner strong {
    color: #ffffff;
    font-size: 18px;
}

.he-marketplace-environment-banner small {
    color: rgba(248, 250, 252, 0.78);
    font-size: 12px;
    line-height: 1.35;
    text-align: right;
}

.he-marketplace-connect-panel {
    align-items: center;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(147, 197, 253, 0.20);
    border-radius: 16px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 16px;
}

.he-marketplace-connect-panel > div {
    display: grid;
    gap: 5px;
}

.he-marketplace-connect-panel span {
    color: rgba(191, 219, 254, 0.72);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-marketplace-connect-panel strong {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.3;
}

.he-marketplace-connect-panel small {
    color: rgba(226, 232, 240, 0.62);
    font-size: 12px;
    line-height: 1.4;
}

.he-button--ebay-connect {
    background: rgba(37, 99, 235, 0.96);
    border: 1px solid rgba(147, 197, 253, 0.76);
    box-shadow: 0 10px 26px rgba(30, 64, 175, 0.26);
    color: #ffffff;
    flex: 0 0 auto;
    min-width: 200px;
}

.he-button--ebay-connect:hover {
    background: rgba(29, 78, 216, 1);
    border-color: rgba(219, 234, 254, 0.92);
    color: #ffffff;
}

.he-marketplace-sync-toggle--inline {
    margin-top: 0;
    min-height: 68px;
}

.he-marketplace-capability-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.he-marketplace-capability-grid > div {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    display: grid;
    gap: 7px;
    padding: 14px;
}

.he-marketplace-capability-grid span {
    color: rgba(167, 139, 250, 0.84);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-marketplace-capability-grid strong {
    color: rgba(248, 250, 252, 0.90);
    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .he-marketplace-connect-panel {
        align-items: stretch;
        display: grid;
    }

    .he-button--ebay-connect {
        min-width: 0;
        width: 100%;
    }

    .he-marketplace-capability-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .he-marketplace-environment-banner {
        align-items: flex-start;
        display: grid;
    }

    .he-marketplace-environment-banner small {
        text-align: left;
    }
}
/* SECTION: Marketplace Settings Seller Capabilities
   Purpose: style the seller-capability action and results.
   Usage: append after the existing eBay connection-test CSS.
*/

.he-button--ebay-capability {
    background: rgba(124, 58, 237, 0.92);
    border: 1px solid rgba(196, 181, 253, 0.70);
    box-shadow: 0 10px 24px rgba(76, 29, 149, 0.24);
    color: #ffffff;
    min-width: 220px;
}

.he-button--ebay-capability:hover {
    background: rgba(109, 40, 217, 0.98);
    border-color: rgba(221, 214, 254, 0.86);
    color: #ffffff;
}

@media (max-width: 1050px) {
    .he-button--ebay-capability {
        min-width: 0;
        width: 100%;
    }
}
/* SECTION: Marketplace Settings eBay Business Policies
   Purpose: style the policy-sync action and policy results.
   Usage: append after the Seller Capabilities CSS section.
*/

.he-button--ebay-policy-sync {
    background: rgba(14, 165, 233, 0.92);
    border: 1px solid rgba(125, 211, 252, 0.70);
    box-shadow: 0 10px 24px rgba(7, 89, 133, 0.24);
    color: #ffffff;
    min-width: 210px;
}

.he-button--ebay-policy-sync:hover {
    background: rgba(2, 132, 199, 0.98);
    border-color: rgba(186, 230, 253, 0.88);
    color: #ffffff;
}

.he-marketplace-policy-summary {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.he-marketplace-policy-group {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    min-width: 0;
    padding: 14px;
}

.he-marketplace-policy-group__header {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.he-marketplace-policy-group__header span {
    color: rgba(226, 232, 240, 0.68);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-marketplace-policy-group__header strong {
    align-items: center;
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(147, 197, 253, 0.24);
    border-radius: 999px;
    color: #bfdbfe;
    display: inline-flex;
    font-size: 12px;
    height: 28px;
    justify-content: center;
    min-width: 28px;
    padding: 0 8px;
}

.he-marketplace-policy-list {
    display: grid;
    gap: 8px;
}

.he-marketplace-policy-item {
    background: rgba(15, 23, 42, 0.46);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 12px;
    display: grid;
    gap: 5px;
    padding: 10px;
}

.he-marketplace-policy-item strong {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.3;
}

.he-marketplace-policy-item span {
    color: rgba(226, 232, 240, 0.54);
    font-size: 10px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.he-marketplace-policy-empty {
    background: rgba(245, 158, 11, 0.07);
    border: 1px dashed rgba(251, 191, 36, 0.20);
    border-radius: 12px;
    color: rgba(253, 230, 138, 0.78);
    font-size: 12px;
    line-height: 1.4;
    padding: 12px;
}

.he-marketplace-policy-sync-meta {
    margin-top: 16px;
}

@media (max-width: 1000px) {
    .he-marketplace-policy-summary {
        grid-template-columns: 1fr;
    }

    .he-button--ebay-policy-sync {
        min-width: 0;
        width: 100%;
    }
}
/* SECTION: Marketplace Settings Create Sandbox Policies
   Purpose: style the Sandbox-only business-policy creation action and notice.
   Usage: append after the Enable Business Policies CSS section.
*/

.he-button--ebay-policy-create {
    background: rgba(34, 197, 94, 0.90);
    border: 1px solid rgba(74, 222, 128, 0.68);
    box-shadow: 0 10px 24px rgba(20, 83, 45, 0.22);
    color: #052e16;
    min-width: 210px;
}

.he-button--ebay-policy-create:hover {
    background: rgba(74, 222, 128, 0.98);
    border-color: rgba(187, 247, 208, 0.88);
    color: #052e16;
}

.he-marketplace-policy-template-note {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.20);
    border-radius: 14px;
    display: grid;
    gap: 5px;
    margin-top: 16px;
    padding: 13px 14px;
}

.he-marketplace-policy-template-note strong {
    color: #fde68a;
    font-size: 13px;
}

.he-marketplace-policy-template-note span {
    color: rgba(253, 230, 138, 0.76);
    font-size: 12px;
    line-height: 1.45;
}

.he-marketplace-policy-setup-meta {
    margin-top: 16px;
}

@media (max-width: 1050px) {
    .he-button--ebay-policy-create {
        min-width: 0;
        width: 100%;
    }
}
/* SECTION: Marketplace Settings eBay Inventory Location
   Purpose: style eBay warehouse location setup and saved-location display.
   Usage: append after the existing Marketplace Settings eBay CSS sections.
*/

.he-marketplace-location-form {
    margin: 0;
}

.he-marketplace-location-grid {
    display: grid;
    gap: 16px;
    grid-template-columns:
        minmax(180px, 0.85fr)
        minmax(240px, 1.3fr)
        minmax(140px, 0.7fr)
        minmax(90px, 0.45fr);
}

.he-marketplace-location-grid .he-input {
    min-width: 0;
    width: 100%;
}

.he-button--ebay-location {
    background: rgba(14, 165, 233, 0.92);
    border: 1px solid rgba(125, 211, 252, 0.72);
    box-shadow: 0 10px 24px rgba(7, 89, 133, 0.24);
    color: #ffffff;
    min-width: 250px;
}

.he-button--ebay-location:hover {
    background: rgba(2, 132, 199, 0.98);
    border-color: rgba(186, 230, 253, 0.88);
    color: #ffffff;
}

.he-marketplace-location-list {
    display: grid;
    gap: 12px;
}

.he-marketplace-location-card {
    background: rgba(59, 130, 246, 0.07);
    border: 1px solid rgba(147, 197, 253, 0.20);
    border-radius: 16px;
    display: grid;
    gap: 14px;
    grid-template-columns:
        minmax(220px, 1.3fr)
        minmax(200px, 1fr)
        minmax(110px, 0.5fr);
    padding: 15px;
}

.he-marketplace-location-card > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.he-marketplace-location-card span {
    color: rgba(191, 219, 254, 0.70);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-marketplace-location-card strong {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.he-marketplace-location-card small {
    color: rgba(226, 232, 240, 0.58);
    font-size: 11px;
    line-height: 1.35;
}

.he-marketplace-location-meta {
    margin-top: 16px;
}

@media (max-width: 1000px) {
    .he-marketplace-location-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-marketplace-location-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .he-marketplace-location-grid {
        grid-template-columns: 1fr;
    }

    .he-button--ebay-location {
        min-width: 0;
        width: 100%;
    }
}
/* SECTION: eBay Sandbox Listing Stager
   Purpose: style Inventory Item staging queue and Marketplace Settings launch action.
   Usage: append after the existing Marketplace Settings eBay CSS sections.
*/

.he-marketplace-stager-launch {
    align-items: center;
    background: rgba(124, 58, 237, 0.09);
    border: 1px solid rgba(196, 181, 253, 0.22);
    border-radius: 16px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-top: 16px;
    padding: 15px;
}

.he-marketplace-stager-launch > div {
    display: grid;
    gap: 4px;
}

.he-marketplace-stager-launch span {
    color: rgba(196, 181, 253, 0.76);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-marketplace-stager-launch strong {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.35;
}

.he-button--ebay-stager,
.he-button--stage-inventory {
    background: rgba(124, 58, 237, 0.94);
    border: 1px solid rgba(196, 181, 253, 0.72);
    box-shadow: 0 10px 24px rgba(76, 29, 149, 0.24);
    color: #ffffff;
}

.he-button--ebay-stager:hover,
.he-button--stage-inventory:hover {
    background: rgba(109, 40, 217, 0.98);
    border-color: rgba(221, 214, 254, 0.88);
    color: #ffffff;
}

.he-stage-warning {
    background: rgba(245, 158, 11, 0.09);
    border: 1px solid rgba(251, 191, 36, 0.22);
    border-radius: 16px;
    display: grid;
    gap: 5px;
    margin-top: 24px;
    padding: 14px 16px;
}

.he-stage-warning strong {
    color: #fde68a;
    font-size: 14px;
}

.he-stage-warning span {
    color: rgba(253, 230, 138, 0.74);
    font-size: 12px;
    line-height: 1.45;
}

.he-stage-list {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

.he-stage-card {
    background: rgba(15, 23, 42, 0.46);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    display: grid;
    gap: 16px;
    grid-template-columns: 118px minmax(0, 1fr);
    padding: 14px;
}

.he-stage-card__image {
    align-items: center;
    background: rgba(2, 6, 23, 0.54);
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    min-height: 154px;
    padding: 8px;
}

.he-stage-card__image img {
    border-radius: 10px;
    display: block;
    max-height: 138px;
    max-width: 96px;
    object-fit: contain;
}

.he-stage-card__main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.he-stage-card__header {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.he-stage-card__header h2 {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 5px;
}

.he-stage-card__header p {
    color: rgba(226, 232, 240, 0.64);
    font-size: 13px;
    margin: 0;
}

.he-stage-card__metrics {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.he-stage-card__metrics > div {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: grid;
    gap: 5px;
    padding: 10px;
}

.he-stage-card__metrics span,
.he-stage-card__message span {
    color: rgba(226, 232, 240, 0.56);
    display: block;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-stage-card__metrics strong {
    color: rgba(248, 250, 252, 0.92);
    font-size: 12px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.he-stage-success {
    color: #86efac !important;
}

.he-stage-card__message {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(147, 197, 253, 0.18);
    border-radius: 12px;
    color: rgba(219, 234, 254, 0.88);
    display: grid;
    font-size: 12px;
    gap: 5px;
    line-height: 1.4;
    padding: 10px;
}

@media (max-width: 1000px) {
    .he-marketplace-stager-launch,
    .he-stage-card__header {
        align-items: stretch;
        display: grid;
    }

    .he-stage-card__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .he-stage-card {
        grid-template-columns: 1fr;
    }

    .he-stage-card__metrics {
        grid-template-columns: 1fr;
    }

    .he-button--ebay-stager,
    .he-button--stage-inventory {
        width: 100%;
    }
}
/* SECTION: eBay Unpublished Listing Draft
   Purpose: style the draft-creation action and offer result on the Listing Stager.
   Usage: append after the existing eBay Listing Stager CSS section.
*/

.he-stage-card__header {
    flex-wrap: wrap;
}

.he-stage-card__header form {
    margin: 0;
}

.he-button--create-offer {
    background: rgba(14, 165, 233, 0.92);
    border: 1px solid rgba(125, 211, 252, 0.70);
    box-shadow: 0 10px 24px rgba(7, 89, 133, 0.24);
    color: #ffffff;
    min-width: 235px;
}

.he-button--create-offer:hover {
    background: rgba(2, 132, 199, 0.98);
    border-color: rgba(186, 230, 253, 0.88);
    color: #ffffff;
}

.he-stage-card__metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.he-stage-card__message--offer {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(196, 181, 253, 0.20);
    color: rgba(237, 233, 254, 0.90);
}

.he-stage-card__message--offer small {
    color: rgba(221, 214, 254, 0.64);
    font-size: 10px;
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .he-stage-card__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .he-button--create-offer {
        min-width: 0;
        width: 100%;
    }

    .he-stage-card__metrics {
        grid-template-columns: 1fr;
    }
}
/* SECTION: eBay Sandbox Publish Workflow
   Purpose: style final publish confirmation, publish action, and published state.
   Usage: append after the existing eBay Listing Draft CSS section.
*/

.he-button--publish-sandbox {
    background: rgba(239, 68, 68, 0.92);
    border: 1px solid rgba(252, 165, 165, 0.74);
    box-shadow: 0 10px 24px rgba(127, 29, 29, 0.24);
    color: #ffffff;
    min-width: 225px;
}

.he-button--publish-sandbox:hover {
    background: rgba(220, 38, 38, 0.98);
    border-color: rgba(254, 202, 202, 0.90);
    color: #ffffff;
}

.he-publish-confirmation {
    max-width: 980px;
}

.he-publish-warning {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.26);
    border-radius: 16px;
    display: grid;
    gap: 5px;
    margin-top: 24px;
    padding: 15px 16px;
}

.he-publish-warning strong {
    color: #fecaca;
    font-size: 15px;
}

.he-publish-warning span {
    color: rgba(254, 202, 202, 0.76);
    font-size: 12px;
    line-height: 1.45;
}

.he-publish-review-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
}

.he-publish-review-grid > div {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    display: grid;
    gap: 6px;
    min-height: 78px;
    padding: 13px;
}

.he-publish-review-grid span {
    color: rgba(226, 232, 240, 0.56);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-publish-review-grid strong {
    color: rgba(248, 250, 252, 0.94);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.he-publish-actions {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
}

.he-stage-published-badge {
    align-items: center;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.28);
    border-radius: 999px;
    color: #86efac;
    display: inline-flex;
    font-size: 12px;
    font-weight: 850;
    min-height: 38px;
    padding: 0 15px;
}

.he-stage-card__message--published {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(74, 222, 128, 0.20);
    color: rgba(220, 252, 231, 0.92);
}

.he-stage-card__message--published a {
    color: #86efac;
    font-weight: 800;
    width: fit-content;
}

@media (max-width: 900px) {
    .he-publish-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .he-publish-review-grid {
        grid-template-columns: 1fr;
    }

    .he-publish-actions {
        align-items: stretch;
        display: grid;
    }

    .he-publish-actions .he-button,
    .he-button--publish-sandbox {
        min-width: 0;
        width: 100%;
    }
}
/* SECTION: eBay Publish Button Navigation Fix
   Purpose: ensure the publish confirmation action is clickable and provide a fallback link.
   Usage: append after the existing eBay Sandbox Publish CSS section.
*/

.he-stage-publish-launch {
    align-items: flex-start;
    display: grid;
    gap: 7px;
    position: relative;
    z-index: 10;
}

.he-stage-publish-launch form {
    margin: 0;
    position: relative;
    z-index: 11;
}

.he-stage-publish-launch button,
.he-stage-publish-fallback {
    pointer-events: auto;
    position: relative;
    z-index: 12;
}

.he-stage-publish-fallback {
    color: rgba(254, 202, 202, 0.82);
    font-size: 10px;
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.he-stage-publish-fallback:hover {
    color: #ffffff;
}
/* SECTION: Listings eBay Sync Timestamp and External Link
   Purpose: move sync timing into the eBay status card and place the eBay listing
            link at the far right of the workflow row.
   Usage: append after the existing Listings queue CSS.
*/

.he-listing-status-pill {
    align-content: center;
    display: grid;
    gap: 2px;
}

.he-listing-status-pill small {
    color: rgba(226, 232, 240, 0.56);
    font-size: 9px;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
}

.he-listings-queue-card__workflow-row {
    align-items: end;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    width: 100%;
}

.he-listings-queue-card__workflow-row .he-listings-status-form {
    flex: 0 1 auto;
}

.he-button--ebay-listing {
    background: rgba(37, 99, 235, 0.14);
    border: 1px solid rgba(96, 165, 250, 0.32);
    color: #bfdbfe;
    margin-left: auto;
    min-width: 176px;
}

.he-button--ebay-listing:hover {
    background: rgba(37, 99, 235, 0.24);
    border-color: rgba(147, 197, 253, 0.58);
    color: #ffffff;
}

@media (max-width: 900px) {
    .he-listings-queue-card__workflow-row {
        align-items: stretch;
        display: grid;
    }

    .he-button--ebay-listing {
        margin-left: 0;
        min-width: 0;
        width: 100%;
    }
}
/* SECTION: Listings Sync Placement and eBay Link Size
   Purpose: place the sync timestamp in the eBay Sync card and size the external
            listing action to match the Update eBay Status card.
   Usage: append after the existing Listings eBay Link CSS section.
*/

.he-listing-status-pill small {
    display: none;
}

.he-listing-sync-card {
    align-content: center;
    display: grid;
    gap: 2px;
}

.he-listing-sync-card small {
    color: rgba(226, 232, 240, 0.56);
    font-size: 9px;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
}

.he-listings-queue-card__workflow-row {
    align-items: stretch;
}

.he-listings-queue-card__workflow-row .he-listings-status-form,
.he-button--ebay-listing {
    box-sizing: border-box;
    min-height: 68px;
    width: 267px;
}

.he-button--ebay-listing {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    margin-left: auto;
    min-width: 267px;
    padding: 12px 16px;
    text-align: center;
}

@media (max-width: 900px) {
    .he-listings-queue-card__workflow-row .he-listings-status-form,
    .he-button--ebay-listing {
        min-width: 0;
        width: 100%;
    }
}
/* SECTION: Listings Right-Aligned Workflow Controls
   Purpose: align listing controls over the right-side metadata, reduce the eBay
            listing button height, and center the sync timestamp.
   Usage: append after all previous Listings queue CSS patches.
*/

.he-listing-sync-card {
    justify-items: center;
    text-align: center;
}

.he-listing-sync-card small {
    display: block;
    text-align: center;
    width: 100%;
}

.he-listings-queue-card__workflow-row {
    align-items: stretch;
    justify-content: flex-end;
    margin-left: auto;
}

.he-listings-queue-card__workflow-row .he-listings-status-form {
    flex: 0 0 267px;
    min-height: 0;
    width: 267px;
}

.he-button--ebay-listing {
    align-self: stretch;
    flex: 0 0 267px;
    height: auto;
    margin-left: 0;
    min-height: 0;
    min-width: 267px;
    padding: 10px 16px;
    width: 267px;
}

@media (max-width: 900px) {
    .he-listings-queue-card__workflow-row {
        margin-left: 0;
    }

    .he-listings-queue-card__workflow-row .he-listings-status-form,
    .he-button--ebay-listing {
        flex-basis: auto;
        min-width: 0;
        width: 100%;
    }
}
/* SECTION: Listings Workflow Row Structural Fix
   Purpose: keep listing controls inside the main content column and align them
            to the far right above the right-side metadata cards.
   Usage: append after all previous Listings queue CSS patches.
*/

.he-listings-queue-card__workflow-row {
    align-items: stretch;
    display: grid;
    gap: 12px;
    grid-template-columns: 267px 267px;
    justify-content: end;
    margin: 12px 0;
    width: 100%;
}

.he-listings-queue-card__workflow-row .he-listings-status-form {
    box-sizing: border-box;
    margin: 0;
    min-height: 0;
    width: 267px;
}

.he-button--ebay-listing {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    height: auto;
    justify-content: center;
    margin: 0;
    min-height: 0;
    min-width: 0;
    padding: 10px 16px;
    width: 267px;
}

.he-listing-sync-card {
    justify-items: center;
    text-align: center;
}

.he-listing-sync-card small {
    display: block;
    text-align: center;
    width: 100%;
}

@media (max-width: 900px) {
    .he-listings-queue-card__workflow-row {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .he-listings-queue-card__workflow-row .he-listings-status-form,
    .he-button--ebay-listing {
        width: 100%;
    }
}
/* SECTION: eBay Graded Card Readiness
   Purpose: show grader, grade, certification number, and incomplete-data warnings.
   Usage: append after the existing eBay Listing Stager CSS.
*/

.he-stage-card__metrics small {
    color: rgba(226, 232, 240, 0.56);
    display: block;
    font-size: 9px;
    font-weight: 650;
    line-height: 1.25;
    margin-top: 3px;
}

.he-stage-warning-text {
    color: #fbbf24;
}

.he-stage-card__message--warning {
    background: rgba(245, 158, 11, 0.09);
    border-color: rgba(251, 191, 36, 0.25);
    color: #fde68a;
}

.he-stage-card button:disabled {
    cursor: not-allowed;
    filter: grayscale(0.35);
    opacity: 0.48;
}
/* SECTION: Manual Card Intake
   Purpose: style manual image-first intake that feeds Card Identification staging.
   Usage: append after the existing Card Identification CSS.
*/

.he-manual-intake-note {
    border-color: rgba(124, 58, 237, 0.22);
}

.he-manual-intake-form {
    display: grid;
    gap: 18px;
}

.he-manual-intake-section {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 6px;
    padding-top: 20px;
}

.he-manual-intake-images,
.he-manual-intake-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.he-manual-intake-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.he-manual-intake-flags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.he-manual-intake-flags label {
    align-items: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    color: rgba(241, 245, 249, 0.88);
    display: inline-flex;
    font-size: 12px;
    font-weight: 750;
    gap: 7px;
    padding: 8px 12px;
}

.he-manual-intake-notes {
    display: grid;
    gap: 7px;
}

.he-manual-intake-notes textarea {
    min-height: 96px;
    resize: vertical;
}

.he-manual-intake-actions {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 4px;
}

@media (max-width: 950px) {
    .he-manual-intake-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .he-manual-intake-images,
    .he-manual-intake-grid {
        grid-template-columns: 1fr;
    }

    .he-manual-intake-actions {
        align-items: stretch;
        display: grid;
    }

    .he-manual-intake-actions .he-button {
        width: 100%;
    }
}
/* SECTION: Merged Manual Intake Inventory Fields
   Purpose: support the expanded legacy item fields inside Manual Card Intake.
   Usage: append after the existing Manual Card Intake CSS.
*/

.he-manual-intake-grid .he-field-mini {
    min-width: 0;
}

.he-manual-intake-grid select.he-input,
.he-manual-intake-grid input.he-input {
    width: 100%;
}

@media (min-width: 951px) {
    .he-manual-intake-grid {
        align-items: end;
    }
}
/* SECTION: Listing Description Templates
   Purpose: style template management, Item Detail selection, overrides, and preview.
   Usage: append after the current Listing & Services CSS.
*/

.he-description-placeholder-guide {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.20);
    border-radius: 16px;
    display: grid;
    gap: 10px;
    margin-top: 20px;
    padding: 16px;
}

.he-description-placeholder-guide > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.he-description-placeholder-guide code {
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 999px;
    color: #bfdbfe;
    font-size: 11px;
    padding: 5px 8px;
}

.he-description-template-form {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

.he-description-template-form textarea.he-input {
    min-height: 220px;
    padding-bottom: 12px;
    padding-top: 12px;
    resize: vertical;
    width: 100%;
}

.he-description-template-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.he-description-template-flags label {
    align-items: center;
    display: inline-flex;
    font-size: 13px;
    gap: 7px;
}

.he-description-template-card {
    margin-top: 18px !important;
}

.he-listing-description-grid {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 14px;
}

.he-description-template-manage {
    margin-bottom: 0;
}

.he-listing-description-preview {
    background: rgba(15, 23, 42, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding: 14px;
}

.he-listing-description-preview > span {
    color: rgba(226, 232, 240, 0.62);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-listing-description-preview pre {
    color: rgba(248, 250, 252, 0.90);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.he-listing-description-preview small {
    color: rgba(226, 232, 240, 0.52);
    font-size: 10px;
}

@media (max-width: 760px) {
    .he-listing-description-grid {
        grid-template-columns: 1fr;
    }
}
/* SECTION: HTML Listing Descriptions + eBay Title Limit + Active Revision
   Purpose: formatted description previews, title counters, and active eBay updates.
   Usage: append after the Listing Description Templates CSS.
*/

.he-description-placeholder-guide p {
    color: rgba(226, 232, 240, 0.72);
    font-size: 13px;
    margin: 0;
}

.he-listing-description-preview__body {
    color: rgba(248, 250, 252, 0.90);
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.he-listing-description-preview__body > :first-child {
    margin-top: 0;
}

.he-listing-description-preview__body > :last-child {
    margin-bottom: 0;
}

.he-title-counter {
    color: rgba(226, 232, 240, 0.58);
    font-size: 11px;
    justify-self: end;
}

.he-title-counter.is-over {
    color: #fca5a5;
    font-weight: 850;
}

.he-listing-title-warning {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.26);
    border-radius: 12px;
    color: rgba(254, 202, 202, 0.82);
    display: grid;
    font-size: 12px;
    gap: 4px;
    margin-top: 10px;
    padding: 11px 13px;
}

.he-listing-title-warning strong {
    color: #fecaca;
}

.he-active-listing-update {
    align-items: center;
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(125, 211, 252, 0.20);
    border-radius: 14px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-top: 16px;
    padding: 13px 14px;
}

.he-active-listing-update > div {
    display: grid;
    gap: 3px;
}

.he-active-listing-update span {
    color: rgba(226, 232, 240, 0.60);
    font-size: 11px;
}

.he-button--update-ebay {
    background: rgba(14, 165, 233, 0.92);
    border: 1px solid rgba(125, 211, 252, 0.68);
    color: #ffffff;
}

.he-button--update-ebay:hover {
    background: rgba(2, 132, 199, 0.98);
    color: #ffffff;
}

.he-ebay-update-confirmation {
    max-width: 980px !important;
}

.he-ebay-update-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 20px;
}

.he-ebay-update-grid > div,
.he-ebay-update-title,
.he-ebay-update-description {
    background: rgba(15, 23, 42, 0.46);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    padding: 13px;
}

.he-ebay-update-grid span,
.he-ebay-update-title > span,
.he-ebay-update-description > span {
    color: rgba(226, 232, 240, 0.58);
    display: block;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.he-ebay-update-title,
.he-ebay-update-description {
    margin-top: 14px;
}

.he-ebay-update-description > div {
    font-size: 13px;
    line-height: 1.55;
}

.he-ebay-update-warning {
    background: rgba(245, 158, 11, 0.09);
    border: 1px solid rgba(251, 191, 36, 0.22);
    border-radius: 12px;
    color: #fde68a;
    font-size: 12px;
    margin: 16px 0;
    padding: 12px;
}

@media (max-width: 850px) {
    .he-ebay-update-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .he-active-listing-update {
        align-items: stretch;
        display: grid;
    }

    .he-ebay-update-grid {
        grid-template-columns: 1fr;
    }
}
/* SECTION: Expanded Application Navigation
   Purpose: support Intake, Inventory, Listings, and Settings dropdown groups.
   Usage: append to the bottom of hobbyedge.css.
*/

.he-app-nav__links {
    flex: 1 1 auto;
    justify-content: center;
}

.he-app-nav__dropdown-button {
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.he-app-nav__chevron {
    color: rgba(226, 232, 240, 0.56);
    font-size: 10px;
    line-height: 1;
    transition: transform 0.15s ease;
}

.he-app-nav__dropdown.is-open .he-app-nav__chevron {
    transform: rotate(180deg);
}

.he-app-nav__dropdown-menu {
    left: 0;
    min-width: 245px;
    right: auto;
}

.he-app-nav__dropdown-link {
    border-left: 3px solid transparent;
}

.he-app-nav__dropdown-link:hover {
    border-left-color: rgba(124, 58, 237, 0.42);
}

.he-app-nav__dropdown-link.is-active {
    border-left-color: #7c3aed;
}

@media (max-width: 1180px) {
    .he-app-nav__inner {
        gap: 14px;
    }

    .he-app-nav__links {
        gap: 3px;
    }

    .he-app-nav__link,
    .he-app-nav__dropdown-button {
        font-size: 13px;
        padding-left: 9px;
        padding-right: 9px;
    }

    .he-app-nav__user {
        max-width: 170px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 900px) {
    .he-app-nav__inner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .he-app-nav__links {
        justify-content: flex-start;
        order: 3;
        width: 100%;
    }

    .he-app-nav__user {
        margin-left: auto;
        max-width: none;
    }
}

@media (max-width: 760px) {
    .he-app-nav__links {
        display: grid;
        gap: 6px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-app-nav__link,
    .he-app-nav__dropdown-button {
        justify-content: center;
        width: 100%;
    }

    .he-app-nav__dropdown {
        min-width: 0;
        position: relative;
    }

    .he-app-nav__dropdown-menu {
        left: 0;
        min-width: min(280px, calc(100vw - 28px));
        right: auto;
    }

    .he-app-nav__user {
        margin-left: 0;
        width: auto;
    }
}
/* SECTION: Active eBay Update Saved Price Source */

.he-ebay-update-grid small {
    color: rgba(226, 232, 240, 0.52);
    display: block;
    font-size: 10px;
    margin-top: 4px;
}
/* SECTION: Safe Inventory Removal Workflow */
.he-button--danger { background:#b91c1c; border-color:#dc2626; color:#fff; }
.he-button--danger:hover { background:#991b1b; }
.he-removal-dialog { background:#111827; border:1px solid #475569; border-radius:14px; color:#e2e8f0; max-width:560px; padding:0; width:calc(100% - 32px); }
.he-removal-dialog::backdrop { background:rgba(2,6,23,.78); }
.he-removal-dialog form { display:grid; gap:18px; padding:24px; }
.he-removal-dialog__header { align-items:flex-start; display:flex; justify-content:space-between; }
.he-removal-dialog__header h2 { margin:2px 0 0; }
.he-removal-dialog__close { background:transparent; border:0; color:#94a3b8; cursor:pointer; font-size:28px; line-height:1; padding:0; }
.he-removal-dialog__actions { display:flex; gap:10px; justify-content:flex-end; 
}
/* SECTION: Sold Workflow */

.he-button--sold {
    background: #166534;
    border-color: #15803d;
    color: #ffffff;
}

.he-button--sold:hover {
    background: #14532d;
}

dialog.he-sale-dialog {
    background: #111827;
    border: 1px solid #475569;
    border-radius: 14px;
    color: #e2e8f0;
    max-height: calc(100vh - 48px);
    max-width: 680px;
    overflow-y: auto;
    padding: 0;
    width: calc(100% - 32px);
}

dialog.he-sale-dialog::backdrop {
    background: rgba(2, 6, 23, 0.82);
}

.he-sale-dialog form {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.he-sale-dialog__header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.he-sale-dialog__header h2 {
    margin: 2px 0 0;
}

.he-sale-dialog__close {
    background: transparent;
    border: 0;
    color: #94a3b8;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    padding: 0;
}

.he-sale-form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.he-sale-dialog__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.he-sold-search {
    align-items: center;
    display: flex;
    gap: 10px;
    margin: 20px 0;
}

.he-sold-search .he-input {
    flex: 1 1 auto;
}

.he-sold-summary-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 18px 0 22px;
}

.he-sold-summary-grid > div {
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 14px;
}

.he-sold-summary-grid span {
    color: #94a3b8;
    display: block;
    font-size: 11px;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.he-sold-summary-grid strong {
    font-size: 18px;
}

@media (max-width: 900px) {
    .he-sold-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .he-sale-form-grid {
        grid-template-columns: 1fr;
    }

    .he-sold-search {
        align-items: stretch;
        flex-direction: column;
    }

    .he-sold-summary-grid {
        grid-template-columns: 1fr;
    }
}
/* SECTION: eBay End and Relist */
.he-button--relist { background: #6d28d9; border-color: #7c3aed; color: #fff; }
.he-button--relist:hover { background: #5b21b6; }
.he-lifecycle-card { max-width: 900px; margin-left: auto; margin-right: auto; }
.he-lifecycle-preview, .he-lifecycle-result { display: grid; gap: 12px; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 22px 0; }
.he-lifecycle-preview > div, .he-lifecycle-result > div { background: rgba(15,23,42,.62); border: 1px solid #334155; border-radius: 10px; padding: 14px; }
.he-lifecycle-preview span, .he-lifecycle-result span { color: #94a3b8; display:block; font-size:11px; margin-bottom:5px; text-transform:uppercase; }
.he-lifecycle-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.he-active-listing-update { flex-wrap: wrap; }
@media (max-width:760px){ .he-lifecycle-preview,.he-lifecycle-result{grid-template-columns:1fr 1fr;} }
/* SECTION: Active eBay Listing Access and Lifecycle Controls
   Purpose:
   - Make the live listing easy to open from Item Detail.
   - Add End Listing and End & Relist controls to active Listings rows.
   Usage:
   - Append after the existing eBay lifecycle and Listings workflow CSS.
*/

.he-button--live-ebay {
    background: #e5e7eb;
    border-color: #f8fafc;
    color: #111827 !important;
}

.he-button--live-ebay:hover {
    background: #ffffff;
    border-color: #ffffff;
}

.he-button--end-listing {
    background: rgba(127, 29, 29, 0.22);
    border-color: rgba(248, 113, 113, 0.52);
    color: #fecaca !important;
}

.he-button--end-listing:hover {
    background: rgba(127, 29, 29, 0.42);
    border-color: rgba(248, 113, 113, 0.78);
}

.he-listings-queue-card__workflow-row {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    width: min(100%, 860px);
}

.he-listings-queue-card__workflow-row .he-listings-status-form,
.he-listings-queue-card__workflow-row .he-button--ebay-listing,
.he-listings-queue-card__workflow-row .he-button--end-listing,
.he-listings-queue-card__workflow-row .he-button--relist {
    box-sizing: border-box;
    margin: 0;
    min-height: 54px;
    min-width: 0;
    width: 100%;
}

@media (max-width: 1180px) {
    .he-listings-queue-card__workflow-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
}

@media (max-width: 680px) {
    .he-listings-queue-card__workflow-row {
        grid-template-columns: 1fr;
    }
}
/* SECTION: Listings Lifecycle Control Refinement
   Purpose:
   - Reduce oversized lifecycle buttons.
   - Keep destructive actions visually clear without dominating the card.
   - Improve spacing around the status update controls.
   Usage:
   - Append after prior Listings/eBay lifecycle CSS patches.
*/

.he-listings-queue-card__workflow-row {
    align-items: stretch;
    display: grid;
    gap: 12px;
    grid-template-columns:
        minmax(250px, 1.4fr)
        minmax(160px, 0.9fr)
        minmax(140px, 0.8fr)
        minmax(160px, 0.9fr);
    max-width: 900px;
    width: 100%;
}

.he-listings-queue-card__workflow-row .he-listings-status-form {
    align-items: end;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(150px, 1fr) auto;
    min-height: 0;
    padding: 10px;
}

.he-listings-queue-card__workflow-row .he-listings-status-form label {
    grid-column: 1 / -1;
    margin: 0;
}

.he-listings-queue-card__workflow-row .he-listings-status-form select {
    min-width: 0;
    width: 100%;
}

.he-listings-queue-card__workflow-row .he-listings-status-form .he-button {
    min-height: 42px;
    padding-left: 14px;
    padding-right: 14px;
}

.he-listings-queue-card__workflow-row .he-button--ebay-listing,
.he-listings-queue-card__workflow-row .he-button--end-listing,
.he-listings-queue-card__workflow-row .he-button--relist {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px;
    text-align: center;
    width: 100%;
}

.he-listings-queue-card__workflow-row .he-button--ebay-listing {
    background: rgba(30, 64, 175, 0.24);
    border-color: rgba(96, 165, 250, 0.58);
    color: #dbeafe !important;
}

.he-listings-queue-card__workflow-row .he-button--end-listing {
    background: rgba(127, 29, 29, 0.24);
    border-color: rgba(248, 113, 113, 0.52);
    color: #fecaca !important;
}

.he-listings-queue-card__workflow-row .he-button--relist {
    background: linear-gradient(
        135deg,
        rgba(109, 40, 217, 0.95),
        rgba(124, 58, 237, 0.95)
    );
    border-color: rgba(167, 139, 250, 0.8);
    color: #ffffff !important;
}

@media (max-width: 1100px) {
    .he-listings-queue-card__workflow-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }
}

@media (max-width: 680px) {
    .he-listings-queue-card__workflow-row {
        grid-template-columns: 1fr;
    }

    .he-listings-queue-card__workflow-row .he-listings-status-form {
        grid-template-columns: 1fr;
    }

    .he-listings-queue-card__workflow-row .he-listings-status-form label {
        grid-column: auto;
    }
}
/* SECTION: Compact Stacked Listing Lifecycle Actions
   Purpose:
   - Replace oversized lifecycle tiles with a compact three-button stack.
   - Keep status update controls separate and readable.
   Usage:
   - Append after all prior Listings lifecycle CSS patches.
*/

.he-listings-queue-card__workflow-row {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(250px, 320px) minmax(170px, 220px);
    justify-content: start;
    max-width: 560px;
    width: 100%;
}

.he-listings-queue-card__workflow-row .he-listings-status-form {
    min-height: 0;
    width: 100%;
}

.he-listings-queue-card__workflow-row .he-button--ebay-listing,
.he-listings-queue-card__workflow-row .he-button--end-listing,
.he-listings-queue-card__workflow-row .he-button--relist {
    box-sizing: border-box;
    min-height: 34px;
    padding: 7px 12px;
    width: 100%;
}

.he-listings-queue-card__workflow-row .he-button--ebay-listing {
    grid-column: 2;
    grid-row: 1;
}

.he-listings-queue-card__workflow-row .he-button--end-listing {
    grid-column: 2;
    grid-row: 2;
}

.he-listings-queue-card__workflow-row .he-button--relist {
    grid-column: 2;
    grid-row: 3;
}

.he-listings-queue-card__workflow-row .he-listings-status-form {
    grid-column: 1;
    grid-row: 1 / span 3;
}

@media (max-width: 760px) {
    .he-listings-queue-card__workflow-row {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .he-listings-queue-card__workflow-row .he-listings-status-form,
    .he-listings-queue-card__workflow-row .he-button--ebay-listing,
    .he-listings-queue-card__workflow-row .he-button--end-listing,
    .he-listings-queue-card__workflow-row .he-button--relist {
        grid-column: 1;
        grid-row: auto;
    }
}
/* SECTION: Listing Workflow and Metadata Alignment
   Purpose:
   - Place the six metadata blocks to the right of the compact action stack.
   - Keep status, actions, and operational details aligned in one row.
   Usage:
   - Append after the stacked listing lifecycle actions CSS patch.
*/

.he-listings-queue-card__main {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(500px, 560px) minmax(420px, 1fr);
}

.he-listings-queue-card__top {
    grid-column: 1 / -1;
}

.he-listings-queue-card__workflow-row {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    max-width: none;
}

.he-listings-queue-card__meta {
    align-self: stretch;
    display: grid;
    gap: 10px;
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.he-listings-queue-card__meta > div {
    box-sizing: border-box;
    min-height: 58px;
}

.he-listings-queue-card__note {
    grid-column: 1 / -1;
}

@media (max-width: 1180px) {
    .he-listings-queue-card__main {
        grid-template-columns: 1fr;
    }

    .he-listings-queue-card__top,
    .he-listings-queue-card__workflow-row,
    .he-listings-queue-card__meta,
    .he-listings-queue-card__note {
        grid-column: 1;
        grid-row: auto;
    }

    .he-listings-queue-card__meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .he-listings-queue-card__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
ChatGPT Plus

























Pasted text(16).txt
Document
oh and you might want the css.  Here's that.


Pasted text(17).txt
Document
here's the listings.php we just fixed in the older chat:

Wednesday 2:05 PM
we need to add marketplace-settings to our settings menu (replace ebay config, I think).


Boom!







Just noticed this on the marketplace-settings page.  listing still not showing on the stager.

we don't have an ebay link

doesn't feel like it's doing anything.

LFG.....

Can we move the external sync timestamp next to the ebay status, then on the listing, we should have a link to the ebay listing.  I think that link should finish out that same row to the far right under ebay sync and item detail button.

the sync info is wrong..  Also we need to make the view ebay listing button the same size as the update status card.

now the ebay listing button is too tall.  And the last sync text is not centered on the ebay sync card.

Also, can we slide the listing button and ebay status drop down over to the far right above updated?

wrong way....

Ok, it's better, but will require some css refinement down the road.  But it worked.  I don't want it to halt our progress.  I'm feeling like I may actually have an opportunity to have HobbyEdge listed items tonight.


Pasted text(18).txt
Document
do you want to see the old item new, before we dump it?

Also from the new add item workflow, we didn't bring condition/graded information over to the condition tab on item-detail.



Pasted text(19).txt
Document

Pasted text (2)(5).txt
Document

Pasted text (3).txt
Document

Pasted text (4).txt
Document

sold-items.php and users.php are the only items not in the app folder screenshot.  he_nav.php below.

<?php
declare(strict_types=1);

/*
 * HobbyEdge shared navigation component
 *
 * Purpose:
 * - Provides the main authenticated app navigation for HobbyEdge.
 * - Keeps top-level navigation consistent across dashboard and future pages.
 *
 * Usage:
 * - Include this file inside app pages after authentication and before page content.
 *
 * Dependencies:
 * - PHP session/auth should already be handled by the parent page.
 * - No database tables required.
 *
 * DB Tables:
 * - None.
 *
 * Key Blocks:
 * - SECTION: Helpers
 * - SECTION: Navigation Config
 * - SECTION: Render Navigation
 */

/* SECTION: Helpers */
if (!function_exists('he_html')) {
    function he_html(?string $value): string
    {
        return htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8');
    }
}
if (!function_exists('he_current_user_display_name')) {
    function he_current_user_display_name(): string
    {
        if (function_exists('hobbyedge_current_user')) {
            $user = hobbyedge_current_user();

            if (is_array($user)) {
                if (!empty($user['display_name'])) {
                    return (string)$user['display_name'];
                }

                if (!empty($user['username'])) {
                    return (string)$user['username'];
                }

                if (!empty($user['email'])) {
                    return (string)$user['email'];
                }
            }
        }

        return 'User';
    }
}

if (!function_exists('he_is_active_nav')) {
    function he_is_active_nav(string $targetFile): bool
    {
        $currentFile = basename($_SERVER['SCRIPT_NAME'] ?? '');
        return $currentFile === $targetFile;
    }
}

/* SECTION: Navigation Config */

$heMainNav = [
    [
        'label' => 'Dashboard',
        'href' => '/app/dashboard.php',
        'file' => 'dashboard.php',
    ],
    [
        'label' => 'Card Identification',
        'href' => '/app/card-identification.php',
        'file' => 'card-identification.php',
    ],
    [
        'label' => 'Listings',
        'href' => '/app/listings.php',
        'file' => 'listings.php',
    ],
];

$heInventoryNav = [
    [
        'label' => 'Current Active',
        'href' => '/app/inventory.php',
        'file' => 'inventory.php',
    ],
    [
        'label' => 'Sold Items',
        'href' => '/app/sold-items.php',
        'file' => 'sold-items.php',
    ],
    [
        'label' => 'Batches',
        'href' => '/app/batches.php',
        'file' => 'batches.php',
    ],
    [
        'label' => 'Lots & Performance',
        'href' => '/app/lots.php',
        'file' => 'lots.php',
    ],
];

$heSettingsNav = [
    [
        'label' => 'Account Info',
        'href' => '/app/account.php',
        'file' => 'account.php',
    ],
    [
        'label' => 'Marketplace Settings',
        'href' => '/app/marketplace-settings.php',
        'file' => 'marketplace-settings.php',
    ],
    [
        'label' => 'Users / Team',
        'href' => '/app/users.php',
        'file' => 'users.php',
    ],
];

$inventoryActive = array_filter($heInventoryNav, static function (array $item): bool {
    return he_is_active_nav($item['file']);
});

$settingsActive = array_filter($heSettingsNav, static function (array $item): bool {
    return he_is_active_nav($item['file']);
});

/* SECTION: Render Navigation */
?>

<nav class="he-app-nav" aria-label="HobbyEdge main navigation">
    <div class="he-app-nav__inner">

<!--Future Logo Area-->
<a class="he-app-nav__brand" href="/app/dashboard.php">
    HobbyEdge
</a>

        <div class="he-app-nav__links">

            <?php foreach ($heMainNav as $item): ?>
                <a
                    class="he-app-nav__link <?php echo he_is_active_nav($item['file']) ? 'is-active' : ''; ?>"
                    href="<?php echo he_html($item['href']); ?>"
                >
                    <?php echo he_html($item['label']); ?>
                </a>
            <?php endforeach; ?>

            <div class="he-app-nav__dropdown <?php echo !empty($inventoryActive) ? 'is-active' : ''; ?>">
                <button class="he-app-nav__dropdown-button js-nav-dropdown-toggle" type="button">
                    Inventory
                </button>

                <div class="he-app-nav__dropdown-menu">
                    <?php foreach ($heInventoryNav as $item): ?>
                        <a
                            class="he-app-nav__dropdown-link <?php echo he_is_active_nav($item['file']) ? 'is-active' : ''; ?>"
                            href="<?php echo he_html($item['href']); ?>"
                        >
                            <?php echo he_html($item['label']); ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

            <div class="he-app-nav__dropdown <?php echo !empty($settingsActive) ? 'is-active' : ''; ?>">
                <button class="he-app-nav__dropdown-button js-nav-dropdown-toggle" type="button">
                    Settings
                </button>

                <div class="he-app-nav__dropdown-menu">
                    <?php foreach ($heSettingsNav as $item): ?>
                        <a
                            class="he-app-nav__dropdown-link <?php echo he_is_active_nav($item['file']) ? 'is-active' : ''; ?>"
                            href="<?php echo he_html($item['href']); ?>"
                        >
                            <?php echo he_html($item['label']); ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

        </div>

        <div class="he-app-nav__user">
            Welcome, <?php echo he_html(he_current_user_display_name()); ?>
        </div>
    </div>
</nav>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var dropdownButtons = document.querySelectorAll('.js-nav-dropdown-toggle');

    dropdownButtons.forEach(function (button) {
        button.addEventListener('click', function (event) {
            event.stopPropagation();

            var dropdown = button.closest('.he-app-nav__dropdown');

            if (!dropdown) {
                return;
            }

            document.querySelectorAll('.he-app-nav__dropdown.is-open').forEach(function (openDropdown) {
                if (openDropdown !== dropdown) {
                    openDropdown.classList.remove('is-open');
                }
            });

            dropdown.classList.toggle('is-open');
        });
    });

    document.addEventListener('click', function () {
        document.querySelectorAll('.he-app-nav__dropdown.is-open').forEach(function (dropdown) {
            dropdown.classList.remove('is-open');
        });
    });

    document.querySelectorAll('.he-app-nav__dropdown-menu').forEach(function (menu) {
        menu.addEventListener('click', function (event) {
            event.stopPropagation();
        });
    });
});
</script>

Wednesday 11:27 PM

Pasted text(20).txt
Document

I can't see the remove this item box


Pasted text(21).txt
Document

Let’s do it—but I need the current live versions of these two files before I generate replacements:

/app/includes/he_ebay_oauth.php
/app/item-detail.php
The versions in File Library predate several fixes we added afterward, including automatic token refresh, schema-aware marketplace syncing, removal, and Mark Sold. Rebuilding from those older copies would risk regressing working features. 

 


The item-level workflow I’ll add is:

End Listing

End & Relist

confirmation page before either action

call eBay withdrawOffer to end the current single-variation listing

preserve the existing SKU, Inventory Item, title, description, price, category, location, and policies

create a new offer and publish it for End & Relist

mark the old local offer/listing ended

store the new offer and listing IDs as the active records

log both operations in Lifecycle / History

leave the item itself active and listed after a successful relist

eBay’s Inventory API specifically uses withdrawOffer to end a single-variation listing tied to an offer; a new offer can then be created and published into a new listing. 

Upload those two current files and I’ll return the complete replacements, new confirmation/action page, matching CSS patch, and any migration required.



Pasted text(22).txt
Document

Pasted text (2)(6).txt
Document

Worked for 3m 31s
I built the item-level End Listing and End & Relist workflow from the current eBay helper you uploaded. 


eBay’s Inventory API keeps the offer after withdrawOffer, so HobbyEdge can end the current listing and publish that same preserved offer again. That retains the SKU, price, description, policies, category, location, and offer settings while generating a fresh listing. 

1. Run the lifecycle-history migration
marketplace-listing-history%20--%20lifecycle%20migration.sql

This preserves:

old listing ID;

replacement listing ID;

offer IDs;

action type;

eBay responses;

user and timestamp.

2. Replace the eBay helper
Replace:

/app/includes/he_ebay_oauth.php
with:

he_ebay_oauth%20--%20end%20and%20relist%20lifecycle.php

Rename it to:

he_ebay_oauth.php
This keeps all existing OAuth, token-refresh, listing-update, staging, draft, and publishing functions, then adds:

withdrawOffer;

local lifecycle synchronization;

listing-history logging;

Item History logging;

republishing the preserved offer;

failed-relist handling.

3. Add the lifecycle page
Upload:

ebay-listing-lifecycle%20--%20end%20and%20relist.php

as:

/app/ebay-listing-lifecycle.php
This provides a confirmation screen for both actions.

4. Replace Item Detail
Replace:

/app/item-detail.php
with:

item-detail%20--%20ebay%20end%20and%20relist%20actions.php

Rename it to:

item-detail.php
The active eBay listing panel now has:

Update Active eBay Listing

End Listing

End & Relist

5. Append the CSS patch
hobbyedge%20--%20ebay%20end%20and%20relist%20css%20patch.css

Workflow behavior
End Listing
Active listing
→ withdraw offer on eBay
→ listing becomes ended
→ offer remains unpublished
→ listing prep becomes Ended
→ inventory item becomes Ready to List
→ old listing ID retained in lifecycle history
End & Relist
Active listing
→ withdraw current offer
→ old listing ends
→ same preserved offer is published again
→ eBay returns a new listing ID
→ local active listing is replaced with the new ID
→ inventory and listing prep remain Listed
→ old and new IDs are recorded in history
If withdrawal succeeds but republishing fails, HobbyEdge records the listing as ended and reports that the replacement failed instead of pretending the refresh completed.

All three PHP files passed syntax checks.


ok, that works! Awesome....it's a little clunky but works.  We should add the live ebay listing link to the item-detail.php page (probably near the top of the listings tab.  Then, on the the listings page, we should add the buttons to end the ebay listing.

74c080de-1027-4b5f-854a-c07026d9bbd0.png

67eefaf2-63c8-43cf-87f7-51a25ebb2b89.png
Ok, better, but ugly....those buttons are huge.  Can we get those buttons smaller...maybe in a small stack of 3 within the same row?

Worked for 27s
Append this CSS after the stacked lifecycle-actions patch:

hobbyedge%20--%20listing%20metadata%20beside%20lifecycle%20actions.css

It moves the six bottom blocks into a 3×2 grid to the right of the action stack, aligned on the same row.

At narrower widths, the layout drops back below cleanly rather than squeezing everything. 


on that tab, can we remove the seconds from the ebay sync timestamp?  we should probably do that anywhere else it lives too.

Worked for 29s
Replace:

/app/listings.php
with:

listings%20--%20ebay%20sync%20time%20without%20seconds.php

Rename it to:

listings.php
The eBay sync timestamp now displays as:

2026-07-20 03:48
instead of:

2026-07-20 03:48:33
This was applied anywhere that sync timestamp is rendered on the Listings page. The stored database value is unchanged.

No CSS or SQL changes are needed. PHP lint passed. 


So I can't end a listing....and then relist with this current workflow.

Upload the current live:

/app/batch-detail.php
The File Library copy is from July 15 and predates several later Item Detail, listing-lifecycle, and inventory changes. 


The batch-level workflow I’ll add will be:

End All Active eBay Listings

End & Relist All Active eBay Listings

preview showing eligible, skipped, and blocked items before confirmation;

process each card independently;

preserve per-item success/failure results;

never stop the entire batch because one listing fails;

reuse the exact item-level lifecycle functions already proven;

show new listing IDs for successful relists;

allow retrying only failed items;

log each item’s lifecycle event plus a batch-level summary.

The button belongs on Batch Detail near Add Cards to Batch, with a dedicated batch confirmation/results page.



Pasted text(23).txt
Document

This upload is the current item-detail.php, not batch-detail.php. 


Please upload:

/app/batch-detail.php
Once I have that, I’ll build the batch-level controls against the actual live page without risking the working batch layout.



Pasted text(24).txt
Document
my bad...lol 

Worked for 18s
Built against your current live batch-detail.php. 


1. Replace Batch Detail
Replace:

/app/batch-detail.php
with:

batch-detail%20--%20batch%20ebay%20lifecycle%20controls.php

Rename it to:

batch-detail.php
This adds:

End Active eBay Listings

End & Relist Batch

Active eBay count

Ended eBay count

The buttons only appear when the batch has eligible active eBay listings.

2. Add the batch lifecycle page
Upload:

ebay-batch-lifecycle%20--%20batch%20end%20and%20relist.php

as:

/app/ebay-batch-lifecycle.php
This page provides:

eligible versus skipped item counts;

selectable listings before confirmation;

per-card listing ID, SKU, and saved price;

batch End or End & Relist;

independent processing for every card;

successful cards preserved even when another fails;

old and new listing IDs;

links to replacement listings;

Retry Failed Items for only the unsuccessful cards.

It reuses the same item-level lifecycle service you already tested successfully.

3. Append the CSS patch
hobbyedge%20--%20batch%20ebay%20lifecycle%20css%20patch.css

No SQL migration is required. Each item continues to write its normal marketplace lifecycle and Inventory Item History records.

Both PHP files passed syntax checks. 


Library
/
HobbyEdge - Database Project
/
hobbyedge%20--%20batch%20ebay%20lifecycle%20css%20patch.css


/* SECTION: Batch eBay Lifecycle */

.he-button--batch-end {
    background: rgba(127, 29, 29, 0.24);
    border-color: rgba(248, 113, 113, 0.55);
    color: #fecaca !important;
}

.he-button--batch-relist {
    background: linear-gradient(
        135deg,
        rgba(109, 40, 217, 0.96),
        rgba(124, 58, 237, 0.96)
    );
    border-color: rgba(167, 139, 250, 0.78);
    color: #ffffff !important;
}

.he-batch-lifecycle {
    display: grid;
    gap: 20px;
}

.he-batch-lifecycle-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.he-batch-lifecycle-summary > div {
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 14px;
}

.he-batch-lifecycle-summary span {
    color: #94a3b8;
    display: block;
    font-size: 11px;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.he-batch-lifecycle-summary strong {
    font-size: 20px;
}

.he-batch-lifecycle-select-all {
    border-bottom: 1px solid #334155;
    margin-bottom: 10px;
    padding-bottom: 12px;
}

.he-batch-lifecycle-select-all label,
.he-batch-lifecycle-item {
    align-items: center;
    display: flex;
    gap: 12px;
}

.he-batch-lifecycle-items,
.he-batch-lifecycle-results {
    display: grid;
    gap: 10px;
}

.he-batch-lifecycle-item,
.he-batch-lifecycle-result {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 13px;
}

.he-batch-lifecycle-item strong,
.he-batch-lifecycle-result strong {
    display: block;
}

.he-batch-lifecycle-item span,
.he-batch-lifecycle-result span,
.he-batch-lifecycle-result p {
    color: #94a3b8;
    display: block;
    margin: 4px 0 0;
}

.he-batch-lifecycle-result {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.he-batch-lifecycle-result.is-success {
    border-color: rgba(34, 197, 94, 0.52);
}

.he-batch-lifecycle-result.is-error {
    border-color: rgba(248, 113, 113, 0.6);
}

.he-batch-lifecycle-result__actions {
    display: flex;
    gap: 8px;
}

.he-batch-lifecycle-skipped {
    border-top: 1px solid #334155;
    display: grid;
    gap: 8px;
    padding-top: 18px;
}

.he-batch-lifecycle-skipped h2 {
    margin: 0 0 6px;
}

.he-batch-lifecycle-skipped > div {
    background: rgba(15, 23, 42, 0.35);
    border-radius: 8px;
    display: grid;
    gap: 3px;
    padding: 10px 12px;
}

.he-batch-lifecycle-skipped span {
    color: #94a3b8;
}

.he-batch-lifecycle-retry {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 760px) {
    .he-batch-lifecycle-summary {
        grid-template-columns: 1fr;
    }

    .he-batch-lifecycle-result {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .he-batch-lifecycle-result__actions {
        flex-direction: column;
    }
}
/* SECTION: Direct New eBay Listing Workflow */

.he-new-listing-action {
    align-items: center;
    background: rgba(22, 101, 52, 0.18);
    border: 1px solid rgba(74, 222, 128, 0.45);
    border-radius: 12px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-top: 18px;
    padding: 16px;
}

.he-new-listing-action strong,
.he-listing-start__preview strong {
    display: block;
}

.he-new-listing-action span {
    color: #bbf7d0;
    display: block;
    margin-top: 4px;
}

.he-new-listing-action--not-ready {
    background: rgba(120, 53, 15, 0.16);
    border-color: rgba(251, 191, 36, 0.42);
}

.he-new-listing-action--not-ready span {
    color: #fde68a;
}

.he-button--create-draft {
    background: rgba(22, 101, 52, 0.88);
    border-color: rgba(74, 222, 128, 0.72);
    color: #ffffff !important;
}

.he-button--create-draft:hover {
    background: rgba(21, 128, 61, 0.96);
}

.he-listing-start {
    display: grid;
    gap: 20px;
}

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

.he-listing-start__preview > div {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 14px;
}

.he-listing-start__preview span {
    color: #94a3b8;
    display: block;
    font-size: 11px;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

@media (max-width: 680px) {
    .he-new-listing-action {
        align-items: stretch;
        flex-direction: column;
    }

    .he-listing-start__preview {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   HobbyEdge UI Cleanup — Dashboard + Notification Center
   Append once to /assets/css/hobbyedge.css
   Build: 2026-07-21-dashboard-notifications-v1
   ========================================================================== */

.he-dashboard-shell {
    overflow: visible;
}

.he-dashboard-hero {
    align-items: stretch;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.he-dashboard-listings-entry {
    align-self: stretch;
    background:
        linear-gradient(
            145deg,
            rgba(115, 78, 255, 0.22),
            rgba(24, 31, 57, 0.72)
        );
    border: 1px solid rgba(151, 124, 255, 0.42);
    border-radius: 16px;
    display: flex;
    flex: 0 0 270px;
    flex-direction: column;
    justify-content: center;
    min-height: 142px;
    padding: 20px 22px;
    text-decoration: none;
    transition:
        border-color 160ms ease,
        transform 160ms ease;
}

.he-dashboard-listings-entry:hover {
    border-color: rgba(185, 167, 255, 0.9);
    transform: translateY(-2px);
}

.he-dashboard-listings-entry span,
.he-dashboard-listings-entry small {
    color: var(--he-muted, #aeb7ca);
}

.he-dashboard-listings-entry strong {
    color: var(--he-text, #ffffff);
    font-size: 1.75rem;
    line-height: 1.1;
    margin: 5px 0;
}

.he-dashboard-listings-entry b {
    color: #c6b7ff;
    font-size: 0.82rem;
    margin-top: 12px;
}

.he-dashboard-section {
    margin-top: 28px;
    padding-top: 4px;
}

.he-dashboard-section--divided {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding-bottom: 30px;
}

.he-dashboard-section__header {
    align-items: end;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.he-dashboard-section__header h2 {
    margin: 2px 0 0;
}

.he-dashboard-section__header > p {
    color: var(--he-muted, #aeb7ca);
    margin: 0;
    max-width: 520px;
    text-align: right;
}

.he-dashboard-metric-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.he-dashboard-operations-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
}

.he-dashboard-metric-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    min-height: 150px;
    padding: 18px;
    position: relative;
    text-decoration: none;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.he-dashboard-metric-card:hover {
    background: rgba(255, 255, 255, 0.065);
    border-color: rgba(162, 139, 255, 0.68);
    transform: translateY(-2px);
}

.he-dashboard-metric-card > span,
.he-dashboard-metric-card > small {
    color: var(--he-muted, #aeb7ca);
}

.he-dashboard-metric-card > strong {
    color: var(--he-text, #ffffff);
    font-size: clamp(1.65rem, 2.3vw, 2.35rem);
    line-height: 1.05;
    margin: 12px 0 8px;
}

.he-dashboard-metric-card > b {
    color: #bba8ff;
    font-size: 0.76rem;
    margin-top: auto;
    padding-top: 12px;
}

.he-dashboard-metric-card--accent {
    background:
        linear-gradient(
            145deg,
            rgba(111, 75, 255, 0.22),
            rgba(255, 255, 255, 0.035)
        );
    border-color: rgba(151, 124, 255, 0.46);
}

.he-dashboard-metric-card--warning {
    background: rgba(255, 177, 65, 0.08);
    border-color: rgba(255, 177, 65, 0.52);
}

.he-dashboard-section__header--performance {
    align-items: flex-end;
}

.he-dashboard-chart-controls {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.he-dashboard-chart-controls label {
    display: grid;
    gap: 5px;
}

.he-dashboard-chart-controls label > span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.he-dashboard-chart-card {
    background:
        linear-gradient(
            180deg,
            rgba(115, 78, 255, 0.09),
            rgba(255, 255, 255, 0.02)
        );
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
    padding: 18px;
}

.he-dashboard-chart {
    height: 300px;
    overflow: visible;
    width: 100%;
}

.he-dashboard-chart line {
    stroke: rgba(255, 255, 255, 0.11);
    stroke-width: 0.35;
}

.he-dashboard-chart polyline {
    fill: none;
    stroke: #9e86ff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}

.he-dashboard-chart-summary {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 8px;
    padding-top: 16px;
}

.he-dashboard-chart-summary div {
    display: grid;
    gap: 5px;
}

.he-dashboard-chart-summary span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.he-dashboard-chart-summary strong {
    color: var(--he-text, #ffffff);
    font-size: 1.1rem;
}

.he-dashboard-chart-summary strong.is-positive {
    color: #62d89b;
}

.he-dashboard-chart-summary strong.is-negative {
    color: #ff7d8d;
}

.he-app-nav__user-area {
    align-items: center;
    display: flex;
    gap: 14px;
    margin-left: auto;
}

.he-notification-center {
    position: relative;
}

.he-notification-bell {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 40px;
}

.he-notification-bell__icon {
    display: block;
    filter:
        saturate(1.25)
        drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
    font-size: 1.3rem;
    line-height: 1;
}

.he-notification-badge {
    align-items: center;
    background: #d81b60;
    border: 2px solid #17152e;
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.66rem;
    font-weight: 800;
    height: 20px;
    justify-content: center;
    min-width: 20px;
    padding: 0 4px;
    position: absolute;
    right: -1px;
    top: 1px;
    z-index: 2;
}

.he-notification-badge.is-critical {
    background: #df2638;
}

.he-notification-menu {
    background: #211d3c;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
    display: none;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(390px, calc(100vw - 24px));
    z-index: 1000;
}

.he-notification-center.is-open .he-notification-menu {
    display: block;
}

.he-notification-menu__header {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
}

.he-notification-menu__header > div {
    display: grid;
    gap: 2px;
}

.he-notification-menu__header span,
.he-notification-menu__header a {
    color: #b8afda;
    font-size: 0.76rem;
}

.he-notification-list {
    max-height: 430px;
    overflow-y: auto;
}

.he-notification-item {
    border-left: 4px solid transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 4px;
    padding: 13px 15px;
    text-decoration: none;
}

.he-notification-item:hover,
.he-notification-item.is-unread {
    background: rgba(255, 255, 255, 0.05);
}

.he-notification-item--success {
    border-left-color: #57ce91;
}

.he-notification-item--warning {
    border-left-color: #ffb141;
}

.he-notification-item--critical {
    border-left-color: #df2638;
}

.he-notification-item--info {
    border-left-color: #d81b60;
}

.he-notification-item strong {
    color: #ffffff;
}

.he-notification-item span,
.he-notification-item small {
    color: #b9b2d2;
}

.he-notification-empty {
    display: grid;
    gap: 5px;
    padding: 24px 18px;
    text-align: center;
}

.he-notification-empty span {
    color: #b9b2d2;
}

.he-notifications-page-list {
    display: grid;
    gap: 12px;
}

.he-notifications-page-item {
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 5px solid #8f7be8;
    border-radius: 13px;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 16px 18px;
}

.he-notifications-page-item.is-unread {
    background: rgba(216, 27, 96, 0.07);
}

.he-notifications-page-item--success {
    border-left-color: #57ce91;
}

.he-notifications-page-item--warning {
    border-left-color: #ffb141;
}

.he-notifications-page-item--critical {
    border-left-color: #df2638;
}

.he-notifications-page-item__heading {
    align-items: center;
    display: flex;
    gap: 10px;
}

.he-notifications-page-item__heading > span {
    background: #d81b60;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 8px;
    text-transform: uppercase;
}

.he-notifications-page-item p {
    color: var(--he-muted, #aeb7ca);
    margin: 7px 0;
}

.he-notifications-page-item small {
    color: var(--he-muted, #aeb7ca);
}

.he-notifications-page-item__actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

@media (max-width: 980px) {
    .he-dashboard-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-dashboard-chart-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-dashboard-hero {
        flex-direction: column;
    }

    .he-dashboard-listings-entry {
        flex-basis: auto;
    }
}

@media (max-width: 720px) {
    .he-dashboard-metric-grid,
    .he-dashboard-operations-grid,
    .he-dashboard-chart-summary {
        grid-template-columns: 1fr;
    }

    .he-dashboard-section__header,
    .he-dashboard-section__header--performance {
        align-items: stretch;
        flex-direction: column;
    }

    .he-dashboard-section__header > p {
        text-align: left;
    }

    .he-dashboard-chart-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .he-dashboard-chart {
        height: 220px;
    }

    .he-app-nav__user {
        display: none;
    }

    .he-notifications-page-item {
        align-items: stretch;
        flex-direction: column;
    }
}
/* ==========================================================================
   HobbyEdge UI Cleanup — Compact Business Summary Cards
   Append once to /assets/css/hobbyedge.css
   Build: 2026-07-21-dashboard-summary-cards-v1
   ========================================================================== */

.he-dashboard-overview-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1.7fr) minmax(190px, 0.75fr) minmax(0, 1.15fr);
}

.he-dashboard-summary-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    min-height: 116px;
    padding: 14px 15px;
    text-decoration: none;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.he-dashboard-summary-card:hover {
    background: rgba(255, 255, 255, 0.065);
    border-color: rgba(162, 139, 255, 0.68);
    transform: translateY(-2px);
}

.he-dashboard-summary-card--inventory {
    background:
        linear-gradient(
            145deg,
            rgba(77, 105, 170, 0.11),
            rgba(255, 255, 255, 0.035)
        );
}

.he-dashboard-summary-card--sales {
    background:
        linear-gradient(
            145deg,
            rgba(111, 75, 255, 0.18),
            rgba(255, 255, 255, 0.035)
        );
    border-color: rgba(151, 124, 255, 0.42);
}

.he-dashboard-summary-card__header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.he-dashboard-summary-card__header > div {
    display: grid;
    gap: 2px;
}

.he-dashboard-summary-card__header span {
    color: var(--he-text, #ffffff);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.he-dashboard-summary-card__header small {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.7rem;
}

.he-dashboard-summary-card__header b {
    color: #bba8ff;
    flex: 0 0 auto;
    font-size: 0.68rem;
    padding-top: 2px;
}

.he-dashboard-summary-card__metrics {
    align-items: end;
    display: grid;
    flex: 1;
    gap: 10px;
    margin-top: 12px;
}

.he-dashboard-summary-card__metrics--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.he-dashboard-summary-card__metrics--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.he-dashboard-summary-card__metrics > div {
    min-width: 0;
}

.he-dashboard-summary-card__metrics > div + div {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 12px;
}

.he-dashboard-summary-card__metrics span {
    color: var(--he-muted, #aeb7ca);
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.he-dashboard-summary-card__metrics strong {
    color: var(--he-text, #ffffff);
    display: block;
    font-size: clamp(1.15rem, 1.7vw, 1.65rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    .he-dashboard-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-dashboard-summary-card--inventory {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .he-dashboard-overview-grid {
        grid-template-columns: 1fr;
    }

    .he-dashboard-summary-card--inventory {
        grid-column: auto;
    }

    .he-dashboard-summary-card__metrics--three {
        grid-template-columns: 1fr;
    }

    .he-dashboard-summary-card__metrics--three > div + div {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-left: 0;
        padding-top: 9px;
    }
}
/* ==========================================================================
   HobbyEdge UI Cleanup — Dashboard Hero Action Items
   Append once to /assets/css/hobbyedge.css
   Build: 2026-07-21-dashboard-hero-action-items-v1
   ========================================================================== */

.he-dashboard-attention-panel {
    align-self: stretch;
    background:
        linear-gradient(
            145deg,
            rgba(255, 177, 65, 0.11),
            rgba(255, 255, 255, 0.03)
        );
    border: 1px solid rgba(255, 177, 65, 0.34);
    border-radius: 16px;
    flex: 0 0 360px;
    min-height: 118px;
    padding: 14px 16px;
}

.he-dashboard-attention-panel__header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.he-dashboard-attention-panel__header > div {
    display: grid;
    gap: 2px;
}

.he-dashboard-attention-panel__header span {
    color: var(--he-text, #ffffff);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.he-dashboard-attention-panel__header small {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.68rem;
}

.he-dashboard-attention-panel__items {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.he-dashboard-attention-panel__items a {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 9px 10px;
    text-decoration: none;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.he-dashboard-attention-panel__items a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 177, 65, 0.62);
    transform: translateY(-1px);
}

.he-dashboard-attention-panel__items span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.he-dashboard-attention-panel__items strong {
    color: var(--he-text, #ffffff);
    font-size: 1.35rem;
    line-height: 1;
}

@media (max-width: 980px) {
    .he-dashboard-attention-panel {
        flex-basis: auto;
    }
}

@media (max-width: 640px) {
    .he-dashboard-attention-panel__items {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   HobbyEdge UI Cleanup — Dynamic Attention Panel
   Append once to /assets/css/hobbyedge.css
   Build: 2026-07-21-dashboard-dynamic-attention-v1
   ========================================================================== */

.he-dashboard-attention-panel__items {
    grid-template-columns: repeat(
        var(--he-attention-columns, 3),
        minmax(0, 1fr)
    );
}

.he-dashboard-attention-panel__clear {
    align-items: center;
    background: rgba(87, 206, 145, 0.08);
    border: 1px solid rgba(87, 206, 145, 0.28);
    border-radius: 10px;
    display: flex;
    gap: 10px;
    min-height: 54px;
    padding: 10px 12px;
}

.he-dashboard-attention-panel__clear strong {
    color: #74dfa8;
    flex: 0 0 auto;
    font-size: 0.88rem;
}

.he-dashboard-attention-panel__clear span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.72rem;
    line-height: 1.3;
}

@media (max-width: 640px) {
    .he-dashboard-attention-panel__items {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   HobbyEdge UI Cleanup — Four Guided Intake Modes
   Append once to /assets/css/hobbyedge.css
   Build: 2026-07-22-card-identification-four-modes-v1
   ========================================================================== */

.he-card-id-intake-header {
    margin-bottom: 12px;
}

.he-card-id-intake-modes {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 12px;
}

.he-card-id-intake-mode {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: 3px;
    min-height: 92px;
    padding: 13px 15px;
    text-align: left;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.he-card-id-intake-mode:hover {
    background: rgba(255, 255, 255, 0.065);
    border-color: rgba(162, 139, 255, 0.62);
    transform: translateY(-2px);
}

.he-card-id-intake-mode.is-active {
    background:
        linear-gradient(
            145deg,
            rgba(111, 75, 255, 0.24),
            rgba(255, 255, 255, 0.045)
        );
    border-color: rgba(168, 145, 255, 0.82);
    box-shadow: inset 0 -3px 0 rgba(169, 144, 255, 0.75);
}

.he-card-id-intake-mode > span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.he-card-id-intake-mode > strong {
    color: var(--he-text, #ffffff);
    font-size: 0.95rem;
    line-height: 1.15;
}

.he-card-id-intake-mode > small {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.69rem;
    line-height: 1.25;
}

.he-card-id-mode-panel {
    margin-top: 0;
}

.he-card-id-mode-panel[hidden] {
    display: none !important;
}

.he-card-id-create-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.he-card-id-create-section {
    background: rgba(255, 255, 255, 0.022);
    border-color: rgba(255, 255, 255, 0.09);
    padding: 14px;
}

.he-card-id-create-section .he-inline-form {
    gap: 10px;
}

.he-card-id-create-section .he-field-mini > span {
    font-size: 0.68rem;
}

@media (max-width: 900px) {
    .he-card-id-intake-modes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .he-card-id-intake-modes {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   HobbyEdge — Card Intake / Card Staging Split
   Append once to /assets/css/hobbyedge.css
   Build: 2026-07-23-card-intake-staging-split-v1
   ========================================================================== */

.he-card-intake-dropzone {
    align-items: center;
    background: rgba(255, 255, 255, 0.025);
    border: 2px dashed rgba(168, 145, 255, 0.42);
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    min-height: 180px;
    padding: 24px;
    text-align: center;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.he-card-intake-dropzone:hover,
.he-card-intake-dropzone:focus,
.he-card-intake-dropzone.is-dragging {
    background: rgba(111, 75, 255, 0.1);
    border-color: rgba(181, 160, 255, 0.9);
    outline: none;
}

.he-card-intake-dropzone.is-dragging {
    transform: scale(1.008);
}

.he-card-intake-dropzone input[type="file"] {
    height: 1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.he-card-intake-dropzone__icon {
    align-items: center;
    background: rgba(142, 115, 255, 0.16);
    border: 1px solid rgba(168, 145, 255, 0.45);
    border-radius: 50%;
    color: #c6b7ff;
    display: flex;
    font-size: 1.35rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.he-card-intake-dropzone strong {
    font-size: 1rem;
}

.he-card-intake-dropzone span,
.he-card-intake-dropzone small {
    color: var(--he-muted, #aeb7ca);
}

.he-card-intake-dropzone small {
    font-size: 0.72rem;
}

.he-staging-group-selector {
    max-width: 620px;
    margin-top: 14px;
}

.he-staging-group-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: 2fr repeat(3, minmax(0, 1fr));
}

.he-staging-group-summary > div {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    display: grid;
    gap: 4px;
    padding: 10px 12px;
}

.he-staging-group-summary span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.he-staging-group-summary strong {
    overflow-wrap: anywhere;
}

.he-staging-bulk-toolbar {
    align-items: center;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 12px;
}

.he-staging-select-all {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 7px;
}

.he-staging-bulk-toolbar .he-button {
    margin-left: auto;
}

.he-staged-card {
    position: relative;
}

.he-staging-card-select {
    align-items: center;
    background: rgba(15, 18, 28, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    height: 30px;
    justify-content: center;
    left: 8px;
    position: absolute;
    top: 8px;
    width: 30px;
    z-index: 3;
}

.he-staging-card-select input {
    cursor: pointer;
    height: 16px;
    margin: 0;
    width: 16px;
}

@media (max-width: 820px) {
    .he-staging-group-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .he-staging-group-summary {
        grid-template-columns: 1fr;
    }

    .he-staging-bulk-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .he-staging-bulk-toolbar .he-button {
        margin-left: 0;
        width: 100%;
    }
}
/* ==========================================================================
   HobbyEdge — Card Staging Action Layout Repair
   Append once to /assets/css/hobbyedge.css
   Build: 2026-07-23-card-staging-actions-v1
   ========================================================================== */

.he-staged-status-row {
    align-items: end;
    column-gap: 10px;
    row-gap: 8px;
}

.he-staged-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 7px;
    justify-content: flex-end;
    margin-left: auto;
    min-width: max-content;
}

.he-staged-actions .he-button {
    flex: 0 0 auto;
    margin: 0;
    position: static;
    white-space: nowrap;
}

.he-staged-field--parallel-status {
    min-width: 190px;
}

@media (max-width: 1050px) {
    .he-staged-status-row {
        align-items: stretch;
    }

    .he-staged-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 0;
        min-width: 0;
        width: 100%;
    }
}
/* ==========================================================================
   HobbyEdge — Card Staging Action Overflow Correction
   Append once to /assets/css/hobbyedge.css
   Build: 2026-07-23-card-staging-action-overflow-v2
   ========================================================================== */

.he-staged-status-row {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns:
        minmax(140px, 0.75fr)
        minmax(180px, 1fr)
        minmax(190px, 1.15fr)
        minmax(250px, auto);
}

.he-staged-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    margin-left: 0;
    min-width: 0;
    width: 100%;
}

.he-staged-actions .he-button {
    flex: 0 0 auto;
    font-size: 0.7rem;
    margin: 0;
    min-width: 0;
    padding: 8px 10px;
    position: static;
    white-space: nowrap;
}

.he-staged-field--parallel-status {
    min-width: 0;
    width: 100%;
}

@media (max-width: 1150px) {
    .he-staged-status-row {
        grid-template-columns:
            minmax(130px, 0.8fr)
            minmax(170px, 1fr)
            minmax(180px, 1fr);
    }

    .he-staged-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

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

    .he-staged-actions {
        grid-column: auto;
        justify-content: flex-start;
    }
}
/* ==========================================================================
   HobbyEdge — Staged Card Image Hover Preview
   Append once to /assets/css/hobbyedge.css
   Build: 2026-07-23-staging-image-hover-preview-v1
   ========================================================================== */

.he-staged-card,
.he-staged-images {
    overflow: visible;
}

.he-staged-images {
    align-items: center;
    display: flex;
    gap: 8px;
    isolation: isolate;
    position: relative;
    z-index: 2;
}

.he-card-id-thumb {
    cursor: zoom-in;
    position: relative;
    transform-origin: left center;
    transition:
        box-shadow 140ms ease,
        transform 140ms ease;
    z-index: 1;
}

.he-card-id-thumb:hover,
.he-card-id-thumb:focus {
    background: #0d1424;
    border-radius: 8px;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.58),
        0 0 0 2px rgba(173, 151, 255, 0.75);
    outline: none;
    transform: scale(4);
    z-index: 100;
}

.he-staged-card:has(.he-card-id-thumb:hover),
.he-staged-card:has(.he-card-id-thumb:focus) {
    z-index: 50;
}

.he-staged-card-list {
    overflow: visible;
}

@media (max-width: 900px) {
    .he-card-id-thumb:hover,
    .he-card-id-thumb:focus {
        transform: scale(3);
    }
}

@media (hover: none) {
    .he-card-id-thumb:hover {
        transform: none;
    }
}
/* ==========================================================================
   HobbyEdge — Floating Staged Image Preview
   Append once to /assets/css/hobbyedge.css
   Build: 2026-07-23-staging-floating-preview-v2
   ========================================================================== */

/* Disable the earlier thumbnail-scaling behavior. */
.he-card-id-thumb:hover,
.he-card-id-thumb:focus {
    box-shadow: 0 0 0 2px rgba(173, 151, 255, 0.7);
    outline: none;
    transform: none !important;
}

.he-staged-card:has(.he-card-id-thumb:hover),
.he-staged-card:has(.he-card-id-thumb:focus) {
    z-index: auto;
}

.he-staging-image-preview {
    background: #0d1424;
    border: 1px solid rgba(173, 151, 255, 0.72);
    border-radius: 12px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.62);
    max-height: calc(100vh - 24px);
    max-width: min(360px, calc(100vw - 24px));
    padding: 9px;
    pointer-events: none;
    position: fixed;
    width: 320px;
    z-index: 10000;
}

.he-staging-image-preview[hidden] {
    display: none !important;
}

.he-staging-image-preview__label {
    color: #c7bddf;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.he-staging-image-preview img {
    border-radius: 8px;
    display: block;
    height: auto;
    max-height: calc(100vh - 70px);
    object-fit: contain;
    width: 100%;
}

@media (max-width: 700px) {
    .he-staging-image-preview {
        width: min(280px, calc(100vw - 24px));
    }
}

@media (hover: none) {
    .he-staging-image-preview {
        display: none !important;
    }
}
/* ==========================================================================
   HobbyEdge — Numeric Upload Group References
   Append once to /assets/css/hobbyedge.css
   Build: 2026-07-29-upload-groups-numeric-v1
   ========================================================================== */

.he-staging-group-summary small,
.he-item-meta-row--detail small {
    color: var(--he-muted, #aeb7ca);
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 3px;
}

.he-staging-group-summary > div:first-child strong {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}
.he-field-mini[hidden] {
    display: none !important;
}
/* ==========================================================================
   HobbyEdge — Per-Card Staging Operations
   Append once to /assets/css/hobbyedge.css
   Build: 2026-07-30-staging-per-card-ops-v1
   ========================================================================== */

.he-staged-operations-row {
    display: grid;
    gap: 10px;
    grid-template-columns:
        minmax(180px, 1.1fr)
        minmax(190px, 1.2fr)
        minmax(150px, 0.9fr)
        minmax(100px, 0.55fr);
    margin-top: 10px;
}

.he-staged-field--batch,
.he-staged-field--location,
.he-staged-field--sku,
.he-staged-field--price {
    min-width: 0;
}

@media (max-width: 1100px) {
    .he-staged-operations-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .he-staged-operations-row {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   HobbyEdge — Staging Bulk Inventory Actions
   Append once to /assets/css/hobbyedge.css
   Build: 2026-07-30-staging-bulk-add-v1
   ========================================================================== */

.he-staging-bulk-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

@media (max-width: 700px) {
    .he-staging-bulk-actions {
        margin-left: 0;
        width: 100%;
    }
}
/* ==========================================================================
   HobbyEdge — Staged Card Attribute Toggles
   Append once to /assets/css/hobbyedge.css
   Build: 2026-07-31-staging-attribute-toggles-v1
   ========================================================================== */

.he-staged-attributes-row {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns:
        minmax(150px, 0.8fr)
        minmax(180px, 1fr)
        minmax(260px, auto)
        minmax(120px, 0.65fr);
    margin-top: 10px;
}

.he-staged-field--sport,
.he-staged-field--team,
.he-staged-field--serial-number {
    min-width: 0;
}

.he-staged-flag-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 38px;
}

.he-staged-flag-toggle {
    cursor: pointer;
    display: inline-flex;
    margin: 0;
}

.he-staged-flag-toggle input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.he-staged-flag-toggle span {
    align-items: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(174, 183, 202, 0.28);
    border-radius: 999px;
    color: var(--he-muted, #aeb7ca);
    display: inline-flex;
    font-size: 0.66rem;
    font-weight: 900;
    justify-content: center;
    letter-spacing: 0.055em;
    min-height: 34px;
    min-width: 48px;
    padding: 7px 10px;
    text-transform: uppercase;
    transition:
        background 120ms ease,
        border-color 120ms ease,
        color 120ms ease,
        box-shadow 120ms ease;
}

.he-staged-flag-toggle input:checked + span {
    background: rgba(150, 119, 255, 0.18);
    border-color: rgba(173, 151, 255, 0.82);
    box-shadow: 0 0 0 1px rgba(173, 151, 255, 0.14);
    color: #f4f0ff;
}

.he-staged-flag-toggle input:focus-visible + span {
    outline: 2px solid rgba(173, 151, 255, 0.82);
    outline-offset: 2px;
}

.he-staged-flag-toggle input:disabled + span {
    cursor: default;
    opacity: 0.58;
}

@media (max-width: 1180px) {
    .he-staged-attributes-row {
        grid-template-columns:
            minmax(150px, 1fr)
            minmax(170px, 1fr);
    }

    .he-staged-flag-group {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .he-staged-attributes-row {
        grid-template-columns: 1fr;
    }

    .he-staged-flag-group {
        grid-column: auto;
    }
}
/* ==========================================================================
   HobbyEdge — Upload Group History
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-upload-history-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 20px 0;
}

.he-upload-history-summary > div {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(174,183,202,.16);
    border-radius: 12px;
    padding: 14px 16px;
}

.he-upload-history-summary strong,
.he-upload-history-summary span {
    display: block;
}

.he-upload-history-summary strong {
    font-size: 1.35rem;
}

.he-upload-history-summary span {
    color: var(--he-muted, #aeb7ca);
    font-size: .76rem;
    margin-top: 3px;
}

.he-upload-history-filters {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(150px, .5fr) minmax(240px, 1fr) auto auto;
    margin-bottom: 18px;
}

.he-upload-history-filters label > span {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.he-upload-history-table small {
    color: var(--he-muted, #aeb7ca);
    display: block;
    margin-top: 3px;
    max-width: 230px;
}

.he-status-pill {
    border: 1px solid rgba(174,183,202,.25);
    border-radius: 999px;
    display: inline-flex;
    font-size: .68rem;
    font-weight: 800;
    padding: 4px 8px;
    text-transform: uppercase;
}

.he-status-pill--completed {
    background: rgba(66, 185, 131, .14);
    border-color: rgba(66, 185, 131, .38);
}

.he-status-pill--active {
    background: rgba(109, 143, 255, .14);
    border-color: rgba(109, 143, 255, .38);
}

.he-status-pill--archived {
    background: rgba(174,183,202,.08);
}

.he-upload-group-detail {
    margin-top: 18px;
}

.he-upload-group-card-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.he-upload-group-card {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(174,183,202,.15);
    border-radius: 12px;
    padding: 14px;
}

.he-upload-group-card > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.he-upload-group-card > div:first-child span {
    color: var(--he-muted, #aeb7ca);
    font-size: .72rem;
}

.he-upload-group-card dl {
    display: grid;
    gap: 7px;
    grid-template-columns: 1fr 1fr;
    margin: 12px 0;
}

.he-upload-group-card dl div {
    min-width: 0;
}

.he-upload-group-card dt {
    color: var(--he-muted, #aeb7ca);
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.he-upload-group-card dd {
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .he-upload-history-summary {
        grid-template-columns: 1fr 1fr;
    }

    .he-upload-history-filters {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .he-upload-history-summary,
    .he-upload-history-filters {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   HobbyEdge — Item Detail Card Identity Attribute Toggles
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-card-identity-flags {
    min-width: 0;
}

.he-card-identity-flags__label {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.he-card-identity-flags__controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 38px;
}

.he-card-identity-flag {
    cursor: pointer;
    display: inline-flex;
    margin: 0;
}

.he-card-identity-flag input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.he-card-identity-flag span {
    align-items: center;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(174,183,202,.28);
    border-radius: 999px;
    color: var(--he-muted, #aeb7ca);
    display: inline-flex;
    font-size: .66rem;
    font-weight: 900;
    justify-content: center;
    letter-spacing: .055em;
    min-height: 34px;
    min-width: 48px;
    padding: 7px 10px;
    text-transform: uppercase;
}

.he-card-identity-flag input:checked + span {
    background: rgba(150,119,255,.18);
    border-color: rgba(173,151,255,.82);
    color: #f4f0ff;
}

.he-card-identity-flag input:focus-visible + span {
    outline: 2px solid rgba(173,151,255,.82);
    outline-offset: 2px;
}

.he-card-identity-flag input:disabled + span {
    cursor: default;
    opacity: .7;
}
/* ==========================================================================
   HobbyEdge — Universal Player Notes
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-item-notes-stack {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.he-player-note-panel {
    background: rgba(124, 58, 237, 0.09);
    border-color: rgba(196, 181, 253, 0.25);
    display: grid;
    gap: 10px;
}

.he-player-note-panel__header {
    align-items: start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.he-player-note-panel__header span {
    color: rgba(216, 180, 254, 0.82);
    display: block;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.he-player-note-panel__header strong {
    color: #ffffff;
    display: block;
    font-size: 15px;
    margin-top: 3px;
}

.he-player-note-panel__header small {
    color: rgba(226, 232, 240, 0.56);
    font-size: 10px;
    line-height: 1.3;
    text-align: right;
}

.he-player-note-panel textarea.he-input {
    min-height: 112px;
}

.he-player-note-panel__footer {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.he-player-note-panel__footer > span {
    color: rgba(226, 232, 240, 0.58);
    font-size: 11px;
    line-height: 1.35;
}

.he-button--player-note {
    background: rgba(124, 58, 237, 0.92);
    border: 1px solid rgba(196, 181, 253, 0.58);
    color: #ffffff;
    flex: 0 0 auto;
}

.he-button--player-note:hover {
    background: rgba(109, 40, 217, 0.98);
    color: #ffffff;
}

.he-button--player-note:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

@media (max-width: 760px) {
    .he-player-note-panel__header,
    .he-player-note-panel__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .he-player-note-panel__header small {
        text-align: left;
    }
}
/* ==========================================================================
   HobbyEdge — Larger Item Detail Images
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-item-media-strip {
    align-items: flex-start;
    gap: 24px;
    justify-content: flex-start;
    min-height: 320px;
    padding: 18px 22px;
}

.he-item-image-wrap {
    min-width: 180px;
}

.he-item-image-card img {
    height: 240px;
    max-width: 170px;
    width: auto;
}

.he-item-image-card span {
    font-size: 0.86rem;
    margin-top: 8px;
}

.he-item-image-actions {
    gap: 8px;
    margin-top: 10px;
}

.he-item-media-strip > .he-button {
    align-self: flex-start;
    margin-top: 2px;
}

.he-item-swap-button {
    align-self: flex-start;
    margin-top: 216px;
}

@media (max-width: 1100px) {
    .he-item-image-wrap {
        min-width: 160px;
    }

    .he-item-image-card img {
        height: 215px;
        max-width: 155px;
    }

    .he-item-swap-button {
        margin-top: 192px;
    }
}

@media (max-width: 760px) {
    .he-item-media-strip {
        min-height: 0;
        padding: 14px;
    }

    .he-item-image-wrap {
        min-width: 140px;
    }

    .he-item-image-card img {
        height: 190px;
        max-width: 140px;
    }

    .he-item-swap-button {
        align-self: center;
        margin-top: 172px;
    }
}
/* ==========================================================================
   HobbyEdge — Item Detail Larger Images + Controls Below
   Append once to /assets/css/hobbyedge.css
   Replaces the previous larger-image positioning rules.
   ========================================================================== */

.he-item-media-strip {
    align-content: start;
    display: grid !important;
    gap: 16px;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 20px 22px !important;
}

.he-item-media-images {
    align-items: flex-start;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    width: 100%;
}

.he-item-image-wrap {
    min-width: 0 !important;
    width: 100%;
}

.he-item-image-card img {
    height: 285px !important;
    max-width: 205px !important;
    width: auto !important;
}

.he-item-image-card span {
    font-size: 0.88rem !important;
    margin-top: 8px !important;
}

.he-item-image-actions {
    gap: 8px !important;
    margin-top: 10px !important;
}

.he-item-media-controls {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    gap: 10px;
    justify-content: center;
    padding-top: 14px;
    width: 100%;
}

.he-item-swap-button {
    margin-top: 0 !important;
}

@media (max-width: 1100px) {
    .he-item-image-card img {
        height: 255px !important;
        max-width: 185px !important;
    }
}

@media (max-width: 760px) {
    .he-item-media-images {
        grid-template-columns: 1fr;
    }

    .he-item-image-card img {
        height: 235px !important;
        max-width: 170px !important;
    }

    .he-item-media-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .he-item-media-controls .he-button {
        width: 100%;
    }
}
/* ==========================================================================
   HobbyEdge — Center Item Detail Media Content
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-item-media-strip {
    align-items: center !important;
    justify-items: center !important;
}

.he-item-media-images {
    align-items: flex-start !important;
    justify-content: center !important;
    justify-items: center !important;
    margin: 0 auto !important;
    max-width: 520px !important;
}

.he-item-image-wrap {
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
}

.he-item-image-card {
    margin: 0 auto !important;
    text-align: center !important;
}

.he-item-image-actions {
    justify-content: center !important;
}

.he-item-media-controls {
    justify-content: center !important;
    margin: 0 auto !important;
    max-width: 328px !important;
}

@media (max-width: 760px) {
    .he-item-media-images,
    .he-item-media-controls {
        max-width: 100% !important;
    }
}
/* ==========================================================================
   HobbyEdge — True Centering for Item Detail Media
   Append once to /assets/css/hobbyedge.css
   Overrides the previous media-centering patch.
   ========================================================================== */

.he-item-media-strip {
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    width: 100% !important;
}

.he-item-media-images {
    align-items: flex-start !important;
    display: flex !important;
    gap: 34px !important;
    grid-template-columns: none !important;
    justify-content: center !important;
    margin: 0 auto !important;
    max-width: none !important;
    width: 100% !important;
}

.he-item-media-images .he-item-image-wrap {
    display: grid !important;
    flex: 0 0 205px !important;
    justify-items: center !important;
    min-width: 205px !important;
    text-align: center !important;
    width: 205px !important;
}

.he-item-media-images .he-item-image-card {
    display: grid !important;
    justify-items: center !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

.he-item-media-images .he-item-image-card img {
    display: block !important;
    margin: 0 auto !important;
}

.he-item-media-images .he-item-image-actions {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.he-item-media-controls {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
    max-width: none !important;
    width: 100% !important;
}

@media (max-width: 1100px) {
    .he-item-media-images {
        gap: 24px !important;
    }

    .he-item-media-images .he-item-image-wrap {
        flex-basis: 185px !important;
        min-width: 185px !important;
        width: 185px !important;
    }
}

@media (max-width: 760px) {
    .he-item-media-images {
        align-items: center !important;
        flex-direction: column !important;
    }

    .he-item-media-images .he-item-image-wrap {
        flex-basis: auto !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}
/* ==========================================================================
   HobbyEdge — Edit Card Attribute Toggles
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-card-attribute-field {
    color: rgba(226, 232, 240, 0.72);
    display: grid;
    font-size: 12px;
    font-weight: 750;
    gap: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.he-card-attribute-toggles {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 42px;
}

.he-card-attribute-toggle {
    cursor: pointer;
    display: inline-flex;
    margin: 0;
}

.he-card-attribute-toggle input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.he-card-attribute-toggle span,
.he-card-attribute-indicator {
    align-items: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(174, 183, 202, 0.28);
    border-radius: 999px;
    color: var(--he-muted, #aeb7ca);
    display: inline-flex;
    font-size: 0.66rem;
    font-weight: 900;
    justify-content: center;
    letter-spacing: 0.055em;
    min-height: 34px;
    min-width: 48px;
    padding: 7px 10px;
    text-transform: uppercase;
}

.he-card-attribute-toggle input:checked + span,
.he-card-attribute-indicator.is-active {
    background: rgba(150, 119, 255, 0.18);
    border-color: rgba(173, 151, 255, 0.82);
    color: #f4f0ff;
}

.he-card-attribute-toggle input:focus-visible + span {
    outline: 2px solid rgba(173, 151, 255, 0.82);
    outline-offset: 2px;
}

.he-card-attribute-indicator {
    cursor: help;
    opacity: 0.72;
}

.he-card-attribute-indicator.is-active {
    opacity: 1;
}
/* ==========================================================================
   HobbyEdge — eBay Orders MVP
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-orders-header {
    align-items: end;
    display: flex;
    gap: 28px;
    justify-content: space-between;
}

.he-orders-header h1,
.he-orders-header p {
    margin-bottom: 0;
}

.he-orders-sync-form {
    align-items: end;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.he-orders-sync-form label {
    display: grid;
    gap: 6px;
}

.he-orders-sync-form label > span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.he-orders-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.he-orders-summary > div {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(174, 183, 202, 0.15);
    border-radius: 12px;
    display: grid;
    gap: 7px;
    min-height: 82px;
    padding: 14px;
}

.he-orders-summary span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.he-orders-summary strong {
    font-size: 1rem;
}

.he-orders-table {
    min-width: 1120px;
}

.he-orders-table td {
    vertical-align: top;
}

.he-orders-subline {
    color: var(--he-muted, #aeb7ca);
    display: block;
    font-size: 0.76rem;
    line-height: 1.4;
    margin-top: 5px;
    max-width: 270px;
}

.he-orders-status {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(174, 183, 202, 0.22);
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.03em;
    padding: 6px 9px;
    text-transform: uppercase;
    white-space: nowrap;
}

.he-orders-status.is-success {
    background: rgba(48, 194, 137, 0.12);
    border-color: rgba(48, 194, 137, 0.4);
}

.he-orders-status.is-warning {
    background: rgba(239, 183, 64, 0.12);
    border-color: rgba(239, 183, 64, 0.42);
}

.he-orders-status.is-danger {
    background: rgba(236, 91, 111, 0.12);
    border-color: rgba(236, 91, 111, 0.42);
}

@media (max-width: 900px) {
    .he-orders-header {
        align-items: stretch;
        flex-direction: column;
    }

    .he-orders-sync-form {
        align-items: stretch;
        flex-direction: column;
    }

    .he-orders-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .he-orders-summary {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   HobbyEdge — eBay Order Detail + Sync History
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-orders-header-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.he-orders-order-link {
    color: inherit;
    font-weight: 850;
    text-decoration: none;
}

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

.he-order-detail-header {
    align-items: end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.he-order-detail-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

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

.he-detail-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.he-detail-list > div {
    align-items: start;
    border-bottom: 1px solid rgba(174, 183, 202, 0.13);
    display: grid;
    gap: 16px;
    grid-template-columns: 140px minmax(0, 1fr);
    padding: 11px 0;
}

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

.he-detail-list dt {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.he-detail-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.he-order-lines {
    display: grid;
    gap: 12px;
}

.he-order-line-card {
    align-items: center;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(174, 183, 202, 0.16);
    border-radius: 12px;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 15px;
}

.he-order-line-card h3 {
    font-size: 0.98rem;
    margin: 0;
}

.he-order-line-meta {
    color: var(--he-muted, #aeb7ca);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.76rem;
    gap: 8px 16px;
    margin-top: 8px;
}

.he-order-line-values {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(85px, auto));
}

.he-order-line-values > div {
    display: grid;
    gap: 4px;
}

.he-order-line-values span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.he-sync-history-table {
    min-width: 1180px;
}

.he-sync-history-error {
    max-width: 330px;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .he-orders-header-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .he-order-detail-header {
        align-items: stretch;
        flex-direction: column;
    }

    .he-order-detail-statuses {
        justify-content: flex-start;
    }

    .he-order-detail-grid {
        grid-template-columns: 1fr;
    }

    .he-order-line-card {
        grid-template-columns: 1fr;
    }

    .he-order-line-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .he-detail-list > div {
        gap: 5px;
        grid-template-columns: 1fr;
    }

    .he-order-line-values {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   HobbyEdge — eBay Order Matching
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-orders-match-form {
    align-items: end;
    display: flex;
    flex: 0 0 auto;
}

.he-order-line-values small {
    color: var(--he-muted, #aeb7ca);
    display: block;
    font-size: 0.68rem;
    margin-top: 3px;
}

.he-order-line-values .he-order-line-attention {
    color: #f0b65f;
    line-height: 1.35;
    max-width: 220px;
}

@media (max-width: 900px) {
    .he-orders-match-form {
        align-items: stretch;
    }
}
/* ==========================================================================
   HobbyEdge — eBay Sold Processing Queue
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-sold-queue-header h1,
.he-sold-queue-header p {
    margin-bottom: 0;
}

.he-sold-queue-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.he-sold-queue-summary > div {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(174, 183, 202, 0.15);
    border-radius: 12px;
    display: grid;
    gap: 7px;
    padding: 14px;
}

.he-sold-queue-summary span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.he-sold-queue-summary strong {
    font-size: 1.25rem;
}

.he-sold-queue-toolbar {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.he-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.he-filter-pills a {
    border: 1px solid rgba(174, 183, 202, 0.22);
    border-radius: 999px;
    color: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    padding: 7px 11px;
    text-decoration: none;
}

.he-filter-pills a.is-active {
    background: rgba(150, 119, 255, 0.17);
    border-color: rgba(173, 151, 255, 0.65);
}

.he-sold-queue-list {
    display: grid;
    gap: 12px;
}

.he-sold-queue-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid rgba(174, 183, 202, 0.16);
    border-left-width: 4px;
    border-radius: 12px;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 15px;
}

.he-sold-queue-row.is-ready {
    border-left-color: rgba(48, 194, 137, 0.75);
}

.he-sold-queue-row.is-blocked {
    border-left-color: rgba(239, 183, 64, 0.78);
}

.he-sold-queue-title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.he-sold-queue-title-row h2 {
    font-size: 1rem;
    margin: 0;
}

.he-sold-queue-meta {
    color: var(--he-muted, #aeb7ca);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.77rem;
    gap: 8px 16px;
    margin-top: 9px;
}

.he-sold-queue-meta a {
    color: inherit;
    font-weight: 800;
}

.he-sold-queue-blockers {
    display: grid;
    gap: 5px;
    margin-top: 10px;
}

.he-sold-queue-blockers span {
    color: #f0b65f;
    font-size: 0.76rem;
}

.he-sold-queue-blockers span::before {
    content: "•";
    margin-right: 7px;
}

.he-sold-queue-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .he-sold-queue-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-sold-queue-row {
        grid-template-columns: 1fr;
    }

    .he-sold-queue-links {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .he-sold-queue-summary {
        grid-template-columns: 1fr;
    }

    .he-sold-queue-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
}
/* ==========================================================================
   HobbyEdge — eBay Sandbox Diagnostics
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-ebay-diagnostics-account-grid,
.he-ebay-diagnostics-response-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.he-ebay-diagnostics-account-grid > div,
.he-ebay-diagnostics-response-summary > div {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(174, 183, 202, 0.15);
    border-radius: 12px;
    display: grid;
    gap: 6px;
    padding: 13px;
}

.he-ebay-diagnostics-account-grid span,
.he-ebay-diagnostics-response-summary span,
.he-ebay-diagnostics-request-url > span,
.he-ebay-diagnostics-actions label > span,
.he-ebay-diagnostics-order-form label > span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.he-ebay-diagnostics-inline-form {
    margin-top: 14px;
}

.he-ebay-diagnostics-actions {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.he-ebay-diagnostics-actions > form {
    align-content: end;
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid rgba(174, 183, 202, 0.15);
    border-radius: 12px;
    display: grid;
    gap: 10px;
    padding: 14px;
}

.he-ebay-diagnostics-actions label,
.he-ebay-diagnostics-order-form label {
    display: grid;
    gap: 6px;
}

.he-ebay-diagnostics-order-form {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.he-ebay-diagnostics-request-url {
    display: grid;
    gap: 6px;
    margin-top: 16px;
}

.he-ebay-diagnostics-request-url code {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(174, 183, 202, 0.15);
    border-radius: 9px;
    display: block;
    font-size: 0.72rem;
    overflow-wrap: anywhere;
    padding: 10px;
}

.he-ebay-diagnostics-result details {
    border-top: 1px solid rgba(174, 183, 202, 0.14);
    margin-top: 14px;
    padding-top: 12px;
}

.he-ebay-diagnostics-result summary {
    cursor: pointer;
    font-weight: 800;
}

.he-ebay-diagnostics-result pre {
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(174, 183, 202, 0.13);
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.45;
    margin-bottom: 0;
    max-height: 520px;
    overflow: auto;
    padding: 12px;
    white-space: pre-wrap;
}

@media (max-width: 900px) {
    .he-ebay-diagnostics-account-grid,
    .he-ebay-diagnostics-response-summary,
    .he-ebay-diagnostics-actions {
        grid-template-columns: 1fr;
    }

    .he-ebay-diagnostics-order-form {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   HobbyEdge — Sandbox Trading API Order-Test Listing
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-trading-test-explainer {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.he-trading-test-explainer > div {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(174, 183, 202, 0.15);
    border-radius: 12px;
    display: grid;
    gap: 7px;
    padding: 14px;
}

.he-trading-test-explainer > div > span {
    align-items: center;
    background: rgba(150, 119, 255, 0.18);
    border: 1px solid rgba(173, 151, 255, 0.48);
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 900;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.he-trading-test-explainer p {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.78rem;
    line-height: 1.45;
    margin: 0;
}

.he-trading-test-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.he-trading-test-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.he-trading-test-summary > div {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(174, 183, 202, 0.15);
    border-radius: 12px;
    display: grid;
    gap: 5px;
    padding: 12px;
}

.he-trading-test-summary span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.he-trading-test-summary strong {
    overflow-wrap: anywhere;
}

.he-trading-test-errors {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

.he-trading-test-errors > div {
    background: rgba(236, 91, 111, 0.09);
    border: 1px solid rgba(236, 91, 111, 0.32);
    border-radius: 9px;
    padding: 10px;
}

.he-trading-test-next {
    align-items: center;
    background: rgba(48, 194, 137, 0.08);
    border: 1px solid rgba(48, 194, 137, 0.32);
    border-radius: 10px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 14px;
    padding: 12px;
}

.he-trading-test-result details {
    border-top: 1px solid rgba(174, 183, 202, 0.14);
    margin-top: 14px;
    padding-top: 12px;
}

.he-trading-test-result pre {
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(174, 183, 202, 0.13);
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.45;
    max-height: 520px;
    overflow: auto;
    padding: 12px;
    white-space: pre-wrap;
}

@media (max-width: 900px) {
    .he-trading-test-explainer,
    .he-trading-test-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .he-trading-test-explainer,
    .he-trading-test-summary {
        grid-template-columns: 1fr;
    }

    .he-trading-test-next {
        align-items: stretch;
        flex-direction: column;
    }
}
/* ==========================================================================
   HobbyEdge — Sandbox Order Test shipping service discovery
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-trading-test-summary {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* ==========================================================================
   HobbyEdge — Trading API GetOrders Diagnostics
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-ebay-diagnostics-trading-form {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
    margin-top: 14px;
}

.he-ebay-diagnostics-trading-form label {
    display: grid;
    gap: 6px;
}

.he-ebay-diagnostics-trading-form label > span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .he-ebay-diagnostics-trading-form {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   HobbyEdge — Sandbox Trading Order Import
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-ebay-trading-import-box {
    align-items: center;
    background: rgba(150, 119, 255, 0.07);
    border: 1px solid rgba(173, 151, 255, 0.28);
    border-radius: 12px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-top: 16px;
    padding: 14px;
}

.he-ebay-trading-import-box p {
    margin-bottom: 0;
    margin-top: 5px;
    max-width: 720px;
}

.he-ebay-trading-import-box form {
    flex: 0 0 auto;
}

@media (max-width: 760px) {
    .he-ebay-trading-import-box {
        align-items: stretch;
        flex-direction: column;
    }
}
/* ==========================================================================
   HobbyEdge — Manual eBay Order-Line Matching
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-order-line-manual-match {
    border-top: 1px solid rgba(174, 183, 202, 0.14);
    grid-column: 1 / -1;
    margin-top: 12px;
    padding-top: 12px;
}

.he-order-line-manual-match form {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.he-order-line-manual-match label {
    display: grid;
    flex: 1 1 320px;
    gap: 6px;
}

.he-order-line-manual-match label > span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 620px) {
    .he-order-line-manual-match form {
        align-items: stretch;
        flex-direction: column;
    }
}
/* ==========================================================================
   HobbyEdge — eBay Process as Sold
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-sold-queue-links form {
    display: inline-flex;
    margin: 0;
}

.he-sold-queue-row.is-ready .he-button--primary {
    font-weight: 850;
}
/* ==========================================================================
   HobbyEdge — Sandbox payment simulator
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-sandbox-payment-simulator .he-alert {
    margin-bottom: 14px;
}

.he-alert--warning {
    background: rgba(239, 183, 64, 0.10);
    border: 1px solid rgba(239, 183, 64, 0.36);
    border-radius: 10px;
    padding: 11px 13px;
}
/* ==========================================================================
   HobbyEdge — Sandbox Simulate Paid in Sold Queue
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-sold-queue-links form {
    display: inline-flex;
    margin: 0;
}
/* ==========================================================================
   HobbyEdge — Item Detail Sold Status
   ========================================================================== */

.he-item-status {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
}

.he-item-status--sold {
    padding: 4px 10px;
    border: 1px solid rgba(52, 211, 153, 0.45);
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.14);
    color: #6ee7b7;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.04);
}
/* ==========================================================================
   HobbyEdge — Sold Item Status + Sale Performance
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-item-status {
    align-items: center;
    display: inline-flex;
    font-weight: 700;
}

.he-item-status--sold {
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(52, 211, 153, 0.45);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.04);
    color: #6ee7b7;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 4px 10px;
    text-transform: uppercase;
}

.he-item-sale-performance {
    min-width: 390px;
}

.he-item-sale-equation {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin: 6px 0 5px;
}

.he-item-sale-equation > div {
    display: grid;
    gap: 2px;
    text-align: center;
}

.he-item-sale-equation small {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.he-item-sale-equation b {
    color: var(--he-muted, #aeb7ca);
    font-size: 1.05rem;
}

.he-item-sale-equation strong {
    font-size: 1rem;
    white-space: nowrap;
}

.he-item-sale-profit {
    border-radius: 8px;
    padding: 5px 8px;
}

.he-item-sale-profit em {
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.he-item-sale-profit.is-positive {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
}

.he-item-sale-profit.is-negative {
    background: rgba(239, 68, 68, 0.11);
    color: #fca5a5;
}

.he-item-sale-profit.is-neutral {
    background: rgba(148, 163, 184, 0.10);
}

@media (max-width: 760px) {
    .he-item-sale-performance {
        min-width: 0;
        width: 100%;
    }

    .he-item-sale-equation {
        align-items: stretch;
        flex-direction: column;
    }

    .he-item-sale-equation > b {
        display: none;
    }
}
/* ==========================================================================
   HobbyEdge — eBay Order Reconciliation
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-button--reconcile {
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(52, 211, 153, 0.45);
    color: #6ee7b7;
    font-weight: 850;
}

.he-button--reconcile:hover {
    background: rgba(16, 185, 129, 0.22);
}
/* ==========================================================================
   HobbyEdge — Sandbox Item Selector + eBay Orders Toolbar Wrap
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-sandbox-order-test-item-field {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    min-width: 220px;
}

.he-sandbox-order-test-item-field small {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.68rem;
    line-height: 1.35;
}

.he-trading-test-actions form {
    align-content: start;
}

.he-ebay-orders-actions--wrap {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    max-width: 100%;
}

.he-ebay-orders-actions--wrap > * {
    flex: 0 0 auto;
}

@media (max-width: 760px) {
    .he-ebay-orders-actions--wrap > * {
        flex: 1 1 100%;
    }
}
/* SECTION: Stack Sales Seller Dashboard
   Purpose: style the Stack Sales seller control center.
   Usage: append to the bottom of hobbyedge.css.
*/

.he-stack-sales-shell {
    max-width: 1240px !important;
}

.he-stack-sales-header {
    align-items: center;
}

.he-button--stack-primary {
    background: rgba(124, 58, 237, 0.94);
    border: 1px solid rgba(196, 181, 253, 0.72);
    color: #ffffff;
}

.he-button--stack-primary:hover {
    background: rgba(109, 40, 217, 0.98);
    border-color: rgba(221, 214, 254, 0.88);
    color: #ffffff;
}

.he-button--stack-public {
    background: rgba(14, 165, 233, 0.14);
    border: 1px solid rgba(125, 211, 252, 0.32);
    color: #bae6fd;
}

.he-button--stack-public:hover {
    background: rgba(14, 165, 233, 0.24);
    color: #ffffff;
}

.he-stack-sales-metrics {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 26px;
}

.he-stack-sales-metric {
    background: rgba(15, 23, 42, 0.46);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    display: grid;
    gap: 6px;
    min-height: 118px;
    padding: 15px;
}

.he-stack-sales-metric span {
    color: rgba(226, 232, 240, 0.58);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.he-stack-sales-metric strong {
    color: #ffffff;
    font-size: 28px;
    line-height: 1.05;
}

.he-stack-sales-metric small {
    color: rgba(226, 232, 240, 0.58);
    font-size: 11px;
    line-height: 1.35;
}

.he-stack-sales-metric.is-claimed {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(251, 191, 36, 0.22);
}

.he-stack-sales-metric.is-paid {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(74, 222, 128, 0.22);
}

.he-stack-sales-section {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 28px;
    padding-top: 24px;
}

.he-stack-sales-section__header {
    align-items: end;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.he-stack-sales-section__header h2 {
    color: #ffffff;
    font-size: 22px;
    margin: 0;
}

.he-stack-sales-section__header p {
    color: rgba(226, 232, 240, 0.60);
    font-size: 13px;
    margin: 0;
    text-align: right;
}

.he-stack-sales-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.he-stack-sale-card {
    background: rgba(15, 23, 42, 0.44);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    display: grid;
    gap: 14px;
    padding: 16px;
}

.he-stack-sale-card:hover {
    background: rgba(15, 23, 42, 0.58);
    border-color: rgba(167, 139, 250, 0.28);
}

.he-stack-sale-card__top {
    align-items: start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.he-stack-sale-card__title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.he-stack-sale-card__title-row h3 {
    color: #ffffff;
    font-size: 19px;
    line-height: 1.2;
    margin: 0;
}

.he-stack-sale-card__top p {
    color: rgba(226, 232, 240, 0.56);
    font-size: 12px;
    margin: 5px 0 0;
}

.he-stack-sale-card__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.he-stack-sale-card__actions .he-button {
    min-height: 38px;
}

.he-stack-sale-status {
    border-radius: 999px;
    display: inline-flex;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.06em;
    padding: 7px 10px;
    text-transform: uppercase;
}

.he-stack-sale-status--live {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.26);
    color: #bbf7d0;
}

.he-stack-sale-status--payment_window {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.26);
    color: #fde68a;
}

.he-stack-sale-status--complete {
    background: rgba(59, 130, 246, 0.11);
    border: 1px solid rgba(147, 197, 253, 0.24);
    color: #bfdbfe;
}

.he-stack-sale-status--cancelled {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.28);
    color: #fecaca;
}

.he-stack-sale-status--scheduled {
    background: rgba(14, 165, 233, 0.11);
    border: 1px solid rgba(125, 211, 252, 0.24);
    color: #bae6fd;
}

.he-stack-sale-status--draft {
    background: rgba(148, 163, 184, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.20);
    color: rgba(226, 232, 240, 0.82);
}

.he-stack-sale-card__metrics {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.he-stack-sale-card__metrics > div {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: grid;
    gap: 5px;
    min-height: 66px;
    padding: 10px;
}

.he-stack-sale-card__metrics span {
    color: rgba(226, 232, 240, 0.54);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-stack-sale-card__metrics strong {
    color: #ffffff;
    font-size: 15px;
}

.he-stack-sale-card__footer {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(226, 232, 240, 0.50);
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    gap: 14px;
    padding-top: 10px;
}

@media (max-width: 1180px) {
    .he-stack-sales-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .he-stack-sale-card__metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .he-stack-sales-section__header,
    .he-stack-sale-card__top {
        align-items: stretch;
        display: grid;
    }

    .he-stack-sales-section__header p {
        text-align: left;
    }

    .he-stack-sale-card__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .he-stack-sales-metrics,
    .he-stack-sale-card__metrics {
        grid-template-columns: 1fr;
    }

    .he-stack-sale-card__actions {
        display: grid;
    }

    .he-stack-sale-card__actions .he-button {
        width: 100%;
    }
}
/* SECTION: Stack Sales Create Sale
   Purpose: style the first Stack Sale creation checkpoint.
   Usage: append to the bottom of hobbyedge.css after the Stack Sales dashboard section.
*/

.he-stack-create-shell {
    max-width: 980px !important;
}

.he-stack-create-form {
    display: grid;
    gap: 18px;
    margin-top: 24px;
}

.he-stack-create-section {
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    padding: 18px;
}

.he-stack-create-section__header {
    align-items: start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.he-stack-create-section__header h2 {
    color: #ffffff;
    font-size: 20px;
    margin: 0;
}

.he-stack-create-section__header > span {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.64);
    font-size: 11px;
    padding: 7px 10px;
}

.he-stack-create-grid {
    display: grid;
    gap: 16px;
}

.he-stack-create-grid--main {
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.6fr);
}

.he-stack-create-grid--rules {
    align-items: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.he-stack-create-form .he-input {
    min-width: 0;
    width: 100%;
}

.he-stack-create-description {
    margin-top: 16px;
}

.he-stack-create-description textarea {
    min-height: 112px;
    padding-bottom: 12px;
    padding-top: 12px;
    resize: vertical;
}

.he-stack-create-help {
    color: rgba(226, 232, 240, 0.50);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.4;
    text-transform: none;
}

.he-stack-create-toggle {
    align-items: center;
    background: rgba(124, 58, 237, 0.07);
    border: 1px solid rgba(196, 181, 253, 0.17);
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    min-height: 88px;
    padding: 13px 14px;
}

.he-stack-create-toggle input {
    accent-color: #7c3aed;
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

.he-stack-create-toggle span {
    display: grid;
    gap: 4px;
}

.he-stack-create-toggle strong {
    color: #ffffff;
    font-size: 14px;
}

.he-stack-create-toggle small {
    color: rgba(226, 232, 240, 0.58);
    font-size: 11px;
    line-height: 1.4;
}

.he-stack-create-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.he-stack-create-success {
    margin-bottom: 4px;
}

@media (max-width: 760px) {
    .he-stack-create-section__header {
        display: grid;
    }

    .he-stack-create-section__header > span {
        justify-self: start;
    }

    .he-stack-create-grid--main,
    .he-stack-create-grid--rules {
        grid-template-columns: 1fr;
    }

    .he-stack-create-actions {
        align-items: stretch;
        display: grid;
    }

    .he-stack-create-actions .he-button {
        width: 100%;
    }
}
/* SECTION: Stack Sale Builder - Inventory Selection
   Purpose:
   - Style draft Stack Sale inventory search and selection.
   Usage:
   - Append to the bottom of hobbyedge.css.
*/

.he-stack-builder-shell {
    max-width: 1320px !important;
}

.he-stack-builder-hero {
    align-items: start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.he-stack-builder-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.he-stack-builder-progress {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 24px;
}

.he-stack-builder-progress > div {
    align-items: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    display: flex;
    gap: 9px;
    padding: 11px 12px;
}

.he-stack-builder-progress > div > span {
    align-items: center;
    background: rgba(148, 163, 184, 0.12);
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.72);
    display: inline-flex;
    flex: 0 0 28px;
    font-size: 11px;
    font-weight: 850;
    height: 28px;
    justify-content: center;
}

.he-stack-builder-progress strong {
    color: rgba(226, 232, 240, 0.70);
    font-size: 12px;
}

.he-stack-builder-progress .is-active {
    background: rgba(124, 58, 237, 0.11);
    border-color: rgba(196, 181, 253, 0.26);
}

.he-stack-builder-progress .is-active > span {
    background: rgba(124, 58, 237, 0.92);
    color: #ffffff;
}

.he-stack-builder-progress .is-active strong {
    color: #ffffff;
}

.he-stack-builder-selected-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 16px;
}

.he-stack-builder-selected-summary > div {
    background: rgba(15, 23, 42, 0.46);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    display: grid;
    gap: 4px;
    padding: 13px;
}

.he-stack-builder-selected-summary span {
    color: rgba(226, 232, 240, 0.56);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-stack-builder-selected-summary strong {
    color: #ffffff;
    font-size: 22px;
}

.he-stack-builder-selected-summary small {
    color: #fde68a;
    font-size: 10px;
}

.he-stack-builder-existing {
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(147, 197, 253, 0.15);
    border-radius: 14px;
    margin-top: 16px;
    padding: 12px 14px;
}

.he-stack-builder-existing summary {
    color: #bfdbfe;
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
}

.he-stack-builder-existing__list {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.he-stack-builder-existing__list > div {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding-top: 7px;
}

.he-stack-builder-existing__list span {
    color: rgba(226, 232, 240, 0.76);
    font-size: 12px;
}

.he-stack-builder-existing__list strong {
    color: #ffffff;
    font-size: 12px;
}

.he-stack-builder-search-panel {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    margin-top: 18px;
    padding: 14px;
}

.he-stack-builder-search-panel form {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(280px, 1.4fr) minmax(180px, 0.7fr) minmax(180px, 0.7fr) auto;
}

.he-stack-builder-search-panel .he-input {
    min-width: 0;
    width: 100%;
}

.he-stack-builder-selection-bar {
    align-items: center;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(196, 181, 253, 0.22);
    border-radius: 14px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-top: 18px;
    padding: 12px 14px;
    position: sticky;
    top: 72px;
    z-index: 50;
}

.he-stack-builder-selection-bar > div {
    display: grid;
    gap: 2px;
}

.he-stack-builder-selection-bar span {
    color: rgba(226, 232, 240, 0.56);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-stack-builder-selection-bar strong {
    color: #ffffff;
    font-size: 15px;
}

.he-stack-builder-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 16px;
}

.he-stack-builder-card {
    background: rgba(15, 23, 42, 0.44);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    display: grid;
    grid-template-rows: auto 220px 1fr;
    min-width: 0;
    overflow: hidden;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.he-stack-builder-card:hover {
    border-color: rgba(147, 197, 253, 0.30);
    transform: translateY(-1px);
}

.he-stack-builder-card.is-selected {
    border-color: rgba(167, 139, 250, 0.78);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.16);
}

.he-stack-builder-card.is-added {
    opacity: 0.58;
}

.he-stack-builder-card__select {
    align-items: center;
    background: rgba(255, 255, 255, 0.035);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    display: flex;
    font-size: 11px;
    font-weight: 800;
    gap: 7px;
    min-height: 38px;
    padding: 8px 10px;
}

.he-stack-builder-card__select input {
    accent-color: #7c3aed;
}

.he-stack-builder-card__image {
    align-items: center;
    background: rgba(2, 6, 23, 0.64);
    display: flex;
    justify-content: center;
    min-height: 220px;
    padding: 10px;
}

.he-stack-builder-card__image img {
    display: block;
    max-height: 200px;
    max-width: 150px;
    object-fit: contain;
}

.he-stack-builder-card__image > span {
    color: rgba(226, 232, 240, 0.48);
    font-size: 12px;
}

.he-stack-builder-card__body {
    display: grid;
    gap: 9px;
    padding: 12px;
}

.he-stack-builder-card__body h3 {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.25;
    margin: 0;
}

.he-stack-builder-card__body > p {
    color: rgba(226, 232, 240, 0.70);
    font-size: 12px;
    line-height: 1.35;
    margin: -4px 0 0;
}

.he-stack-builder-card__meta,
.he-stack-builder-card__ops {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.he-stack-builder-card__meta span,
.he-stack-builder-card__ops span {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.66);
    font-size: 9px;
    line-height: 1;
    padding: 5px 7px;
}

.he-stack-builder-card__ops span {
    border-radius: 8px;
}

.he-stack-builder-price {
    margin-top: auto;
}

.he-stack-builder-price > div {
    align-items: center;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
}

.he-stack-builder-price > div > span {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    color: rgba(226, 232, 240, 0.74);
    display: flex;
    height: 42px;
    align-items: center;
    padding: 0 9px;
}

.he-stack-builder-price .he-input {
    border-radius: 0 12px 12px 0;
    min-width: 0;
    width: 100%;
}

@media (max-width: 1180px) {
    .he-stack-builder-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .he-stack-builder-search-panel form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .he-stack-builder-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-stack-builder-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .he-stack-builder-hero,
    .he-stack-builder-selection-bar {
        align-items: stretch;
        display: grid;
    }

    .he-stack-builder-hero__actions {
        display: grid;
    }

    .he-stack-builder-search-panel form,
    .he-stack-builder-selected-summary,
    .he-stack-builder-grid,
    .he-stack-builder-progress {
        grid-template-columns: 1fr;
    }

    .he-stack-builder-selection-bar {
        top: 120px;
    }

    .he-stack-builder-selection-bar .he-button {
        width: 100%;
    }
}
/* SECTION: Stack Sale Arrange + Sections
   Purpose:
   - Style drag/reorder, section management, and layout selection.
   Usage:
   - Append to the bottom of hobbyedge.css.
*/

.he-stack-arrange-shell {
    max-width: 1320px !important;
}

.he-stack-arrange-hero {
    align-items: start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.he-stack-arrange-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.he-stack-arrange-create-section {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    margin-top: 18px;
    padding: 14px;
}

.he-stack-arrange-create-section form {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(260px, 1fr) auto;
}

.he-stack-arrange-create-section .he-input {
    min-width: 0;
    width: 100%;
}

.he-stack-arrange-create-section > p {
    margin: 10px 0 0;
}

.he-stack-arrange-toolbar {
    align-items: center;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(196, 181, 253, 0.22);
    border-radius: 14px;
    display: grid;
    gap: 16px;
    grid-template-columns: auto auto 1fr;
    margin-top: 18px;
    padding: 12px 14px;
    position: sticky;
    top: 72px;
    z-index: 50;
}

.he-stack-arrange-toolbar > div {
    display: grid;
    gap: 2px;
}

.he-stack-arrange-toolbar span {
    color: rgba(226, 232, 240, 0.54);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-stack-arrange-toolbar strong {
    color: #ffffff;
    font-size: 16px;
}

.he-stack-arrange-toolbar .he-button {
    justify-self: end;
}

.he-stack-arrange-bucket {
    background: rgba(15, 23, 42, 0.40);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    margin-top: 16px;
    padding: 15px;
}

.he-stack-arrange-bucket__header {
    align-items: end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.he-stack-arrange-bucket__header h2 {
    color: #ffffff;
    font-size: 18px;
    margin: 0;
}

.he-stack-arrange-bucket__header > div > span {
    color: rgba(226, 232, 240, 0.56);
    display: block;
    font-size: 11px;
    margin-top: 4px;
}

.he-stack-arrange-section-fields {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(240px, 1fr) minmax(180px, 0.5fr);
    width: min(720px, 100%);
}

.he-stack-arrange-section-fields .he-input {
    min-width: 0;
    width: 100%;
}

.he-stack-arrange-card-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 120px;
    padding: 5px;
}

.he-stack-arrange-card-grid:empty {
    border: 1px dashed rgba(148, 163, 184, 0.22);
    border-radius: 14px;
}

.he-stack-arrange-card-grid:empty::after {
    align-items: center;
    color: rgba(226, 232, 240, 0.42);
    content: "Drag cards here";
    display: flex;
    font-size: 11px;
    justify-content: center;
    min-height: 110px;
}

.he-stack-arrange-card {
    background: rgba(2, 6, 23, 0.56);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    cursor: grab;
    display: grid;
    grid-template-columns: 24px 78px minmax(0, 1fr);
    min-height: 108px;
    overflow: hidden;
    user-select: none;
}

.he-stack-arrange-card:active {
    cursor: grabbing;
}

.he-stack-arrange-card.is-dragging {
    opacity: 0.46;
}

.he-stack-arrange-card__handle {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(226, 232, 240, 0.42);
    display: flex;
    font-size: 14px;
    justify-content: center;
}

.he-stack-arrange-card__image {
    align-items: center;
    background: rgba(0, 0, 0, 0.20);
    display: flex;
    justify-content: center;
    padding: 7px;
}

.he-stack-arrange-card__image img {
    display: block;
    max-height: 94px;
    max-width: 66px;
    object-fit: contain;
}

.he-stack-arrange-card__image span {
    color: rgba(226, 232, 240, 0.40);
    font-size: 9px;
}

.he-stack-arrange-card__body {
    align-content: center;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 8px;
}

.he-stack-arrange-card__body strong {
    color: #ffffff;
    font-size: 11px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.he-stack-arrange-card__body span {
    color: rgba(226, 232, 240, 0.58);
    font-size: 9px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.he-stack-arrange-card__body b {
    color: #bbf7d0;
    font-size: 11px;
}

.he-stack-arrange-footer-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

@media (max-width: 1180px) {
    .he-stack-arrange-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .he-stack-arrange-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .he-stack-arrange-hero,
    .he-stack-arrange-bucket__header {
        align-items: stretch;
        display: grid;
    }

    .he-stack-arrange-hero__actions,
    .he-stack-arrange-footer-actions {
        display: grid;
    }

    .he-stack-arrange-create-section form,
    .he-stack-arrange-toolbar,
    .he-stack-arrange-section-fields,
    .he-stack-arrange-card-grid {
        grid-template-columns: 1fr;
    }

    .he-stack-arrange-toolbar {
        top: 120px;
    }

    .he-stack-arrange-toolbar .he-button {
        justify-self: stretch;
        width: 100%;
    }

    .he-stack-arrange-card {
        grid-template-columns: 24px 90px minmax(0, 1fr);
    }
}
/* SECTION: Stack Sale Arrange - Section Visibility Fix
   Purpose:
   - Keep created sections visually prominent.
   - Reduce empty unsectioned vertical space.
   - Show section card counts clearly.
*/

.he-stack-arrange-bucket__count {
    color: rgba(226, 232, 240, 0.62);
    font-size: 11px;
    font-weight: 800;
    margin-left: auto;
    white-space: nowrap;
}

.he-stack-arrange-card-grid {
    min-height: 72px;
}

.he-stack-arrange-card-grid:empty::after {
    min-height: 62px;
}

@media (max-width: 760px) {
    .he-stack-arrange-bucket__count {
        margin-left: 0;
    }
}
/* SECTION: Stack Sale Preview
   Purpose:
   - Style seller-only buyer-facing Stack Sale preview.
   Usage:
   - Append to the bottom of hobbyedge.css.
*/

.he-stack-preview-admin-shell {
    max-width: 1320px !important;
}

.he-stack-preview-admin-header {
    align-items: start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.he-stack-preview-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.he-stack-preview-browser {
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 18px;
    margin-top: 18px;
    overflow: hidden;
}

.he-stack-preview-browser__bar {
    align-items: center;
    background: #0a1020;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 48px;
    padding: 8px 12px;
}

.he-stack-preview-browser__dots {
    display: flex;
    gap: 6px;
}

.he-stack-preview-browser__dots span {
    background: rgba(226, 232, 240, 0.28);
    border-radius: 999px;
    height: 8px;
    width: 8px;
}

.he-stack-preview-browser__address {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.60);
    font-size: 10px;
    overflow: hidden;
    padding: 7px 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.he-stack-preview-browser__badge {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.30);
    border-radius: 999px;
    color: #fde68a;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 6px 8px;
}

.he-stack-preview-public-page {
    background:
        radial-gradient(circle at 15% 0%, rgba(124, 58, 237, 0.15), transparent 32%),
        radial-gradient(circle at 85% 10%, rgba(37, 99, 235, 0.10), transparent 28%),
        #090f1c;
    min-height: 600px;
    padding: clamp(18px, 3vw, 34px);
}

.he-stack-preview-sale-header {
    align-items: end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.he-stack-preview-brand {
    color: #a78bfa !important;
    font-size: 10px !important;
    font-weight: 900;
    letter-spacing: 0.12em;
    margin: 0 0 6px !important;
    text-transform: uppercase;
}

.he-stack-preview-sale-header h2 {
    color: #ffffff;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1;
    margin: 0;
}

.he-stack-preview-sale-header > div:first-child > p:last-child {
    color: rgba(226, 232, 240, 0.68);
    font-size: 12px;
    line-height: 1.55;
    margin: 10px 0 0;
    max-width: 720px;
}

.he-stack-preview-sale-stats {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.he-stack-preview-sale-stats > div {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    display: grid;
    min-width: 84px;
    padding: 9px 11px;
}

.he-stack-preview-sale-stats span {
    color: rgba(226, 232, 240, 0.48);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-stack-preview-sale-stats strong {
    color: #ffffff;
    font-size: 16px;
}

.he-stack-preview-section-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 22px;
}

.he-stack-preview-section-links a {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    color: #c4b5fd;
    font-size: 10px;
    font-weight: 800;
    padding: 7px 10px;
    text-decoration: none;
}

.he-stack-preview-section-links a:hover {
    background: rgba(124, 58, 237, 0.16);
}

.he-stack-preview-section {
    scroll-margin-top: 90px;
    margin-top: 28px;
}

.he-stack-preview-section__heading {
    align-items: end;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 9px;
}

.he-stack-preview-section__heading p {
    color: rgba(167, 139, 250, 0.72);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.10em;
    margin: 0 0 3px;
    text-transform: uppercase;
}

.he-stack-preview-section__heading h2 {
    color: #ffffff;
    font-size: 20px;
    margin: 0;
}

.he-stack-preview-section__heading > span {
    color: rgba(226, 232, 240, 0.48);
    font-size: 10px;
    font-weight: 800;
}

.he-stack-preview-card-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.he-stack-preview-card {
    background: rgba(15, 23, 42, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    min-width: 0;
    overflow: hidden;
}

.he-stack-preview-card__image {
    align-items: center;
    background: rgba(2, 6, 23, 0.72);
    display: flex;
    height: 230px;
    justify-content: center;
    padding: 10px;
    position: relative;
}

.he-stack-preview-card__image img {
    display: block;
    max-height: 208px;
    max-width: 156px;
    object-fit: contain;
}

.he-stack-preview-card__image > span {
    color: rgba(226, 232, 240, 0.38);
    font-size: 11px;
}

.he-stack-preview-card__price {
    background: rgba(22, 163, 74, 0.94);
    border: 1px solid rgba(187, 247, 208, 0.34);
    border-radius: 999px;
    bottom: 9px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.30);
    color: #ffffff;
    font-size: 16px;
    font-weight: 950;
    left: 9px;
    padding: 5px 9px;
    position: absolute;
}

.he-stack-preview-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    position: absolute;
    right: 8px;
    top: 8px;
}

.he-stack-preview-card__badges span {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(196, 181, 253, 0.34);
    border-radius: 999px;
    color: #ddd6fe;
    font-size: 8px;
    font-weight: 900;
    padding: 4px 6px;
}

.he-stack-preview-card__body {
    display: grid;
    gap: 7px;
    padding: 10px;
}

.he-stack-preview-card__body h3 {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.2;
    margin: 0;
}

.he-stack-preview-card__body p {
    color: rgba(226, 232, 240, 0.58);
    font-size: 9px;
    line-height: 1.35;
    margin: 0;
}

.he-stack-preview-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.he-stack-preview-card__meta span {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.54);
    font-size: 8px;
    padding: 4px 6px;
}

.he-stack-preview-card__claim {
    background: rgba(124, 58, 237, 0.18);
    border: 1px solid rgba(167, 139, 250, 0.26);
    border-radius: 9px;
    color: #ddd6fe;
    font-size: 9px;
    font-weight: 900;
    min-height: 30px;
    opacity: 1;
    text-transform: uppercase;
}

.he-stack-preview-public-footer {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(226, 232, 240, 0.46);
    display: flex;
    font-size: 9px;
    gap: 12px;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 14px;
}

.he-stack-preview-public-footer strong {
    color: rgba(226, 232, 240, 0.70);
}

.he-stack-preview-bottom-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

@media (max-width: 1180px) {
    .he-stack-preview-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .he-stack-preview-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .he-stack-preview-admin-header,
    .he-stack-preview-sale-header,
    .he-stack-preview-public-footer {
        align-items: stretch;
        display: grid;
    }

    .he-stack-preview-admin-actions,
    .he-stack-preview-bottom-actions {
        display: grid;
    }

    .he-stack-preview-browser__bar {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .he-stack-preview-browser__badge {
        display: none;
    }

    .he-stack-preview-sale-stats {
        justify-content: start;
    }

    .he-stack-preview-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-stack-preview-card__image {
        height: 200px;
    }

    .he-stack-preview-card__image img {
        max-height: 178px;
        max-width: 132px;
    }
}

@media (max-width: 480px) {
    .he-stack-preview-card-grid {
        grid-template-columns: 1fr;
    }
}
/* SECTION: Stack Sale Preview - Image Modal + Categories
   Purpose:
   - Clarify section jump links as sale Categories.
   - Expand card images into front/back modal with zoom controls.
*/

.he-stack-preview-categories-label {
    align-items: baseline;
    display: flex;
    gap: 8px;
    margin-top: 22px;
}

.he-stack-preview-categories-label > span {
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.he-stack-preview-categories-label > small {
    color: rgba(226, 232, 240, 0.46);
    font-size: 9px;
}

.he-stack-preview-section-links {
    margin-top: 8px;
}

.he-stack-preview-card__image--button {
    border: 0;
    cursor: zoom-in;
    padding: 10px;
    width: 100%;
}

.he-stack-preview-card__image--button:focus-visible {
    outline: 2px solid rgba(167, 139, 250, 0.86);
    outline-offset: -2px;
}

.he-stack-preview-card__expand-hint {
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(226, 232, 240, 0.18);
    border-radius: 999px;
    bottom: 9px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 8px;
    font-weight: 800;
    padding: 4px 7px;
    position: absolute;
    right: 9px;
    text-transform: uppercase;
}

.he-stack-preview-modal-open {
    overflow: hidden;
}

.he-stack-preview-image-modal[hidden] {
    display: none;
}

.he-stack-preview-image-modal {
    inset: 0;
    position: fixed;
    z-index: 9999;
}

.he-stack-preview-image-modal__backdrop {
    background: rgba(2, 6, 23, 0.88);
    inset: 0;
    position: absolute;
}

.he-stack-preview-image-modal__dialog {
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.50);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    inset: 4vh 4vw;
    overflow: hidden;
    position: absolute;
}

.he-stack-preview-image-modal__header {
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 14px 16px;
}

.he-stack-preview-image-modal__header h2 {
    color: #ffffff;
    font-size: 18px;
    margin: 0;
}

.he-stack-preview-image-modal__toolbar {
    align-items: center;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 10px 16px;
}

.he-stack-preview-image-modal__sides,
.he-stack-preview-image-modal__zoom {
    display: flex;
    gap: 7px;
}

.he-stack-preview-image-modal__toolbar .is-active {
    background: rgba(124, 58, 237, 0.86);
    border-color: rgba(196, 181, 253, 0.42);
    color: #ffffff;
}

.he-stack-preview-image-modal__stage {
    align-items: center;
    background:
        radial-gradient(circle at center, rgba(51, 65, 85, 0.34), transparent 55%),
        #050914;
    display: flex;
    justify-content: center;
    min-height: 0;
    overflow: auto;
    padding: 28px;
}

.he-stack-preview-image-modal__stage img {
    display: block;
    max-height: 88%;
    max-width: 88%;
    object-fit: contain;
    transform-origin: center;
    transition: transform 0.14s ease;
}

.he-stack-preview-image-modal__empty {
    color: rgba(226, 232, 240, 0.55);
    font-size: 13px;
    text-align: center;
}

@media (max-width: 760px) {
    .he-stack-preview-image-modal__dialog {
        border-radius: 0;
        inset: 0;
    }

    .he-stack-preview-image-modal__toolbar {
        align-items: stretch;
        display: grid;
    }

    .he-stack-preview-image-modal__sides,
    .he-stack-preview-image-modal__zoom {
        justify-content: center;
    }

    .he-stack-preview-image-modal__stage {
        padding: 16px;
    }
}
/* SECTION: Public Stack Sale
   Purpose:
   - Buyer-facing live Stack Sale page.
   - Shared stylesheet; public page intentionally does not load HobbyEdge admin navigation.
*/

.he-stack-public-body {
    background:
        radial-gradient(circle at 15% 0%, rgba(124, 58, 237, 0.15), transparent 30%),
        radial-gradient(circle at 85% 10%, rgba(37, 99, 235, 0.10), transparent 26%),
        #090f1c;
    margin: 0;
    min-height: 100vh;
}

.he-stack-public-page {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1480px;
    min-height: 100vh;
    padding: clamp(18px, 3vw, 38px);
}

.he-stack-public-published-banner {
    background: rgba(22, 163, 74, 0.12);
    border: 1px solid rgba(134, 239, 172, 0.24);
    border-radius: 12px;
    color: #bbf7d0;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 16px;
    padding: 10px 12px;
}

.he-stack-public-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    padding-bottom: 20px;
}

.he-stack-public-header__brand-row {
    align-items: start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.he-stack-public-brand {
    color: #a78bfa;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    margin: 0 0 7px;
    text-transform: uppercase;
}

.he-stack-public-header h1 {
    color: #ffffff;
    font-size: clamp(30px, 5vw, 58px);
    line-height: 0.98;
    margin: 0;
}

.he-stack-public-live-status {
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.10em;
    padding: 8px 11px;
}

.he-stack-public-live-status.is-live {
    background: rgba(220, 38, 38, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.30);
    color: #fecaca;
}

.he-stack-public-live-status.is-closed {
    background: rgba(100, 116, 139, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #cbd5e1;
}

.he-stack-public-description {
    color: rgba(226, 232, 240, 0.68);
    font-size: 13px;
    line-height: 1.55;
    margin: 12px 0 0;
    max-width: 780px;
}

.he-stack-public-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.he-stack-public-summary > div {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    display: grid;
    min-width: 84px;
    padding: 8px 10px;
}

.he-stack-public-summary span {
    color: rgba(226, 232, 240, 0.46);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-stack-public-summary strong {
    color: #ffffff;
    font-size: 15px;
}

.he-stack-public-categories-label {
    align-items: baseline;
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.he-stack-public-categories-label > span {
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.he-stack-public-categories-label > small {
    color: rgba(226, 232, 240, 0.46);
    font-size: 9px;
}

.he-stack-public-category-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}

.he-stack-public-category-links a {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    color: #c4b5fd;
    font-size: 10px;
    font-weight: 800;
    padding: 7px 10px;
    text-decoration: none;
}

.he-stack-public-category-links a:hover {
    background: rgba(124, 58, 237, 0.16);
}

.he-stack-public-section {
    margin-top: 30px;
    scroll-margin-top: 20px;
}

.he-stack-public-section__heading {
    align-items: end;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 9px;
}

.he-stack-public-section__heading p {
    color: rgba(167, 139, 250, 0.72);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.10em;
    margin: 0 0 3px;
    text-transform: uppercase;
}

.he-stack-public-section__heading h2 {
    color: #ffffff;
    font-size: 22px;
    margin: 0;
}

.he-stack-public-section__heading > span {
    color: rgba(226, 232, 240, 0.48);
    font-size: 10px;
    font-weight: 800;
}

.he-stack-public-card-grid {
    display: grid;
    gap: 11px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.he-stack-public-card {
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    min-width: 0;
    overflow: hidden;
}

.he-stack-public-card__image {
    align-items: center;
    background: rgba(2, 6, 23, 0.74);
    border: 0;
    display: flex;
    height: 250px;
    justify-content: center;
    padding: 10px;
    position: relative;
    width: 100%;
}

.he-stack-public-card__image--button {
    cursor: zoom-in;
}

.he-stack-public-card__image img {
    display: block;
    max-height: 228px;
    max-width: 170px;
    object-fit: contain;
}

.he-stack-public-card__image > span {
    color: rgba(226, 232, 240, 0.38);
    font-size: 11px;
}

.he-stack-public-card__price {
    background: rgba(22, 163, 74, 0.94);
    border: 1px solid rgba(187, 247, 208, 0.34);
    border-radius: 999px;
    bottom: 9px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.30);
    color: #ffffff;
    font-size: 17px;
    font-weight: 950;
    left: 9px;
    padding: 5px 9px;
    position: absolute;
}

.he-stack-public-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    position: absolute;
    right: 8px;
    top: 8px;
}

.he-stack-public-card__badges span {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(196, 181, 253, 0.34);
    border-radius: 999px;
    color: #ddd6fe;
    font-size: 8px;
    font-weight: 900;
    padding: 4px 6px;
}

.he-stack-public-card__expand-hint {
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(226, 232, 240, 0.18);
    border-radius: 999px;
    bottom: 9px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 8px;
    font-weight: 800;
    padding: 4px 7px;
    position: absolute;
    right: 9px;
    text-transform: uppercase;
}

.he-stack-public-card__body {
    display: grid;
    gap: 7px;
    padding: 10px;
}

.he-stack-public-card__body h3 {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.2;
    margin: 0;
}

.he-stack-public-card__body p {
    color: rgba(226, 232, 240, 0.58);
    font-size: 9px;
    line-height: 1.35;
    margin: 0;
}

.he-stack-public-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.he-stack-public-card__meta span {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.54);
    font-size: 8px;
    padding: 4px 6px;
}

.he-stack-public-card__claim {
    background: rgba(124, 58, 237, 0.18);
    border: 1px solid rgba(167, 139, 250, 0.26);
    border-radius: 9px;
    color: #ddd6fe;
    font-size: 9px;
    font-weight: 900;
    min-height: 32px;
    opacity: 1;
    text-transform: uppercase;
}

.he-stack-public-card__closed {
    background: rgba(100, 116, 139, 0.11);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 9px;
    color: #cbd5e1;
    font-size: 9px;
    font-weight: 900;
    padding: 9px;
    text-align: center;
    text-transform: uppercase;
}

.he-stack-public-footer {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(226, 232, 240, 0.46);
    display: flex;
    font-size: 9px;
    gap: 12px;
    justify-content: space-between;
    margin-top: 34px;
    padding: 16px 0 10px;
}

.he-stack-public-footer strong {
    color: rgba(226, 232, 240, 0.70);
}

.he-stack-public-error,
.he-stack-public-empty {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    color: #ffffff;
    margin: 10vh auto;
    max-width: 720px;
    padding: 28px;
}

.he-stack-public-modal-open {
    overflow: hidden;
}

.he-stack-public-image-modal[hidden] {
    display: none;
}

.he-stack-public-image-modal {
    inset: 0;
    position: fixed;
    z-index: 9999;
}

.he-stack-public-image-modal__backdrop {
    background: rgba(2, 6, 23, 0.90);
    inset: 0;
    position: absolute;
}

.he-stack-public-image-modal__dialog {
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.50);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    inset: 4vh 4vw;
    overflow: hidden;
    position: absolute;
}

.he-stack-public-image-modal__header {
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 14px 16px;
}

.he-stack-public-image-modal__header h2 {
    color: #ffffff;
    font-size: 18px;
    margin: 0;
}

.he-stack-public-image-modal__toolbar {
    align-items: center;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 10px 16px;
}

.he-stack-public-image-modal__toolbar > div {
    display: flex;
    gap: 7px;
}

.he-stack-public-modal-button {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    color: #e2e8f0;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    min-height: 30px;
    padding: 5px 9px;
}

.he-stack-public-modal-button.is-active {
    background: rgba(124, 58, 237, 0.86);
    border-color: rgba(196, 181, 253, 0.42);
    color: #ffffff;
}

.he-stack-public-image-modal__stage {
    align-items: center;
    background:
        radial-gradient(circle at center, rgba(51, 65, 85, 0.34), transparent 55%),
        #050914;
    display: flex;
    justify-content: center;
    min-height: 0;
    overflow: auto;
    padding: 28px;
}

.he-stack-public-image-modal__stage img {
    display: block;
    max-height: 88%;
    max-width: 88%;
    object-fit: contain;
    transform-origin: center;
    transition: transform 0.14s ease;
}

.he-stack-public-image-modal__empty {
    color: rgba(226, 232, 240, 0.55);
    font-size: 13px;
    text-align: center;
}

.he-stack-preview-publish-form {
    margin: 0;
}

@media (max-width: 1180px) {
    .he-stack-public-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .he-stack-public-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .he-stack-public-header__brand-row,
    .he-stack-public-footer,
    .he-stack-public-image-modal__toolbar {
        align-items: stretch;
        display: grid;
    }

    .he-stack-public-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-stack-public-card__image {
        height: 210px;
    }

    .he-stack-public-card__image img {
        max-height: 188px;
        max-width: 140px;
    }

    .he-stack-public-image-modal__dialog {
        border-radius: 0;
        inset: 0;
    }

    .he-stack-public-image-modal__toolbar > div {
        justify-content: center;
    }

    .he-stack-public-image-modal__stage {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .he-stack-public-card-grid {
        grid-template-columns: 1fr;
    }
}
/* SECTION: Public Stack Sale - Buyer Identity + Claims
   Purpose:
   - Guest buyer identification.
   - First real claim / release controls.
*/

.he-stack-public-buyer-status {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    display: grid;
    gap: 2px;
    margin-top: 14px;
    max-width: 520px;
    padding: 9px 11px;
}

.he-stack-public-buyer-status span {
    color: #c4b5fd;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-stack-public-buyer-status strong {
    color: rgba(226, 232, 240, 0.66);
    font-size: 10px;
    font-weight: 700;
}

.he-stack-public-card__claim {
    cursor: pointer;
}

.he-stack-public-card__claim:disabled {
    cursor: default;
}

.he-stack-public-card__claim.is-mine {
    background: rgba(22, 163, 74, 0.17);
    border-color: rgba(134, 239, 172, 0.30);
    color: #bbf7d0;
}

.he-stack-public-card__claim.is-claimed {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(248, 113, 113, 0.22);
    color: #fecaca;
}

.he-stack-public-buyer-modal[hidden] {
    display: none;
}

.he-stack-public-buyer-modal {
    inset: 0;
    position: fixed;
    z-index: 10000;
}

.he-stack-public-buyer-modal__backdrop {
    background: rgba(2, 6, 23, 0.90);
    inset: 0;
    position: absolute;
}

.he-stack-public-buyer-modal__dialog {
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
    left: 50%;
    max-width: 480px;
    padding: 18px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
}

.he-stack-public-buyer-modal__header {
    align-items: start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.he-stack-public-buyer-modal__header h2 {
    color: #ffffff;
    font-size: 22px;
    line-height: 1.15;
    margin: 0;
}

.he-stack-public-buyer-modal form {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.he-stack-public-buyer-modal label {
    color: rgba(226, 232, 240, 0.70);
    display: grid;
    font-size: 10px;
    font-weight: 850;
    gap: 6px;
    letter-spacing: 0.03em;
}

.he-stack-public-buyer-modal label span {
    color: rgba(226, 232, 240, 0.38);
    font-weight: 700;
}

.he-stack-public-buyer-modal input {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    box-sizing: border-box;
    color: #ffffff;
    font: inherit;
    min-height: 42px;
    outline: none;
    padding: 9px 10px;
    width: 100%;
}

.he-stack-public-buyer-modal input:focus {
    border-color: rgba(167, 139, 250, 0.60);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.he-stack-public-buyer-modal form > p {
    color: rgba(226, 232, 240, 0.52);
    font-size: 9px;
    line-height: 1.45;
    margin: 0;
}

.he-stack-public-buyer-modal__message {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.20);
    border-radius: 9px;
    color: #fecaca;
    font-size: 10px;
    padding: 8px 9px;
}

.he-stack-public-buyer-submit {
    background: #7c3aed;
    border: 1px solid rgba(196, 181, 253, 0.30);
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
    min-height: 42px;
    padding: 9px 12px;
}

.he-stack-public-buyer-submit:disabled {
    cursor: wait;
    opacity: 0.68;
}
/* SECTION: Public Stack Sale - Live Activity Banner
   Purpose:
   - Surface recent buyer claim/release activity.
   - Uses the existing 3-second Stack Sale polling cycle.
*/

.he-stack-public-activity[hidden] {
    display: none;
}

.he-stack-public-activity {
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(124, 58, 237, 0.15),
            rgba(37, 99, 235, 0.09)
        );
    border: 1px solid rgba(167, 139, 250, 0.20);
    border-radius: 12px;
    display: flex;
    gap: 10px;
    margin-top: 14px;
    max-width: 680px;
    padding: 9px 11px;
}

.he-stack-public-activity__pulse {
    background: #ef4444;
    border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
    flex: 0 0 8px;
    height: 8px;
    width: 8px;
    animation: he-stack-activity-pulse 1.7s infinite;
}

.he-stack-public-activity > div {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.he-stack-public-activity small {
    color: rgba(196, 181, 253, 0.72);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.he-stack-public-activity strong {
    color: rgba(255, 255, 255, 0.90);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
}

.he-stack-public-activity.is-new {
    animation: he-stack-activity-flash 0.65s ease;
}

@keyframes he-stack-activity-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.40);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

@keyframes he-stack-activity-flash {
    0% {
        border-color: rgba(167, 139, 250, 0.20);
        transform: translateY(0);
    }

    45% {
        border-color: rgba(196, 181, 253, 0.72);
        transform: translateY(-1px);
    }

    100% {
        border-color: rgba(167, 139, 250, 0.20);
        transform: translateY(0);
    }
}
/* SECTION: Public Stack Sale - Bottom Right Live Activity Toast
   Purpose:
   - Show new live activity anywhere on the page.
   - Auto-hide after 8 seconds.
*/

.he-stack-public-activity-toast[hidden] {
    display: none;
}

.he-stack-public-activity-toast {
    align-items: center;
    background: rgba(15, 23, 42, 0.97);
    border: 1px solid rgba(167, 139, 250, 0.30);
    border-radius: 14px;
    bottom: 18px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    display: flex;
    gap: 10px;
    max-width: min(380px, calc(100vw - 32px));
    opacity: 0;
    padding: 11px 13px;
    pointer-events: none;
    position: fixed;
    right: 18px;
    transform: translateY(16px);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
    z-index: 9500;
}

.he-stack-public-activity-toast.is-showing {
    opacity: 1;
    transform: translateY(0);
}

.he-stack-public-activity-toast.is-leaving {
    opacity: 0;
    transform: translateY(10px);
}

.he-stack-public-activity-toast__pulse {
    animation: he-stack-activity-toast-pulse 1.7s infinite;
    background: #ef4444;
    border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.42);
    flex: 0 0 9px;
    height: 9px;
    width: 9px;
}

.he-stack-public-activity-toast > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.he-stack-public-activity-toast small {
    color: #c4b5fd;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.he-stack-public-activity-toast strong {
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

@keyframes he-stack-activity-toast-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.42);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

@media (max-width: 640px) {
    .he-stack-public-activity-toast {
        bottom: 12px;
        left: 12px;
        max-width: none;
        right: 12px;
    }
}
/* SECTION: Stack Sale - End Sale Modal
   Purpose:
   - Guard live -> payment_window lifecycle transition.
   - Show impact summary and explicit claim disposition choice.
*/

.he-stack-end-modal-open {
    overflow: hidden;
}

.he-stack-end-modal[hidden] {
    display: none;
}

.he-stack-end-modal {
    inset: 0;
    position: fixed;
    z-index: 10000;
}

.he-stack-end-modal__backdrop {
    background: rgba(2, 6, 23, 0.90);
    inset: 0;
    position: absolute;
}

.he-stack-end-modal__dialog {
    background: #0f172a;
    border: 1px solid rgba(248, 113, 113, 0.22);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.56);
    left: 50%;
    max-height: calc(100vh - 40px);
    max-width: 720px;
    overflow: auto;
    padding: 18px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
}

.he-stack-end-modal__header {
    align-items: start;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding-bottom: 13px;
}

.he-stack-end-modal__header h2 {
    color: #ffffff;
    font-size: 22px;
    margin: 0;
}

.he-stack-end-modal__summary {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 14px;
}

.he-stack-end-modal__summary > div {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 11px;
    display: grid;
    gap: 3px;
    padding: 10px;
}

.he-stack-end-modal__summary span {
    color: rgba(226, 232, 240, 0.46);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.he-stack-end-modal__summary strong {
    color: #ffffff;
    font-size: 17px;
}

.he-stack-end-modal__choices {
    border: 0;
    display: grid;
    gap: 9px;
    margin: 16px 0 0;
    padding: 0;
}

.he-stack-end-modal__choices legend {
    color: rgba(226, 232, 240, 0.72);
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 8px;
}

.he-stack-end-modal__choices label {
    align-items: start;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 12px;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 11px;
}

.he-stack-end-modal__choices input {
    margin-top: 3px;
}

.he-stack-end-modal__choices label > span {
    display: grid;
    gap: 2px;
}

.he-stack-end-modal__choices strong {
    color: #ffffff;
    font-size: 11px;
}

.he-stack-end-modal__choices small {
    color: rgba(226, 232, 240, 0.50);
    font-size: 9px;
    line-height: 1.4;
}

.he-stack-end-modal__warning {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: 10px;
    color: #fde68a;
    font-size: 9px;
    line-height: 1.45;
    margin-top: 13px;
    padding: 9px 10px;
}

.he-stack-end-modal__confirm {
    margin-top: 13px;
    width: 100%;
}

@media (max-width: 640px) {
    .he-stack-end-modal__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* SECTION: Public Stack Sale - Buyer Payment Window
   Purpose:
   - Show the current buyer's locked claims after a sale ends.
   - Surface subtotal, deadline, and checkout handoff.
*/

.he-stack-public-payment-window {
    background:
        linear-gradient(
            145deg,
            rgba(124, 58, 237, 0.13),
            rgba(15, 23, 42, 0.72)
        );
    border: 1px solid rgba(167, 139, 250, 0.24);
    border-radius: 16px;
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
}

.he-stack-public-payment-window__heading {
    align-items: end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.he-stack-public-payment-window__heading > div {
    display: grid;
    gap: 2px;
}

.he-stack-public-payment-window__heading span {
    color: #c4b5fd;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.he-stack-public-payment-window__heading h2 {
    color: #ffffff;
    font-size: 20px;
    margin: 0;
}

.he-stack-public-payment-window__heading > strong {
    color: #ffffff;
    font-size: 24px;
}

.he-stack-public-payment-window__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.he-stack-public-payment-window__meta span {
    color: rgba(226, 232, 240, 0.58);
    font-size: 9px;
}

.he-stack-public-payment-window__meta strong {
    color: #fde68a;
}

.he-stack-public-payment-window__items {
    display: grid;
    gap: 6px;
}

.he-stack-public-payment-window__item {
    align-items: center;
    background: rgba(2, 6, 23, 0.36);
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 9px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 8px 10px;
}

.he-stack-public-payment-window__item > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.he-stack-public-payment-window__item strong {
    color: #ffffff;
    font-size: 10px;
}

.he-stack-public-payment-window__item small {
    color: rgba(226, 232, 240, 0.46);
    font-size: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.he-stack-public-payment-window__item b {
    color: #ddd6fe;
    font-size: 10px;
}

.he-stack-public-payment-window__total {
    align-items: center;
    border-top: 1px solid rgba(167, 139, 250, 0.16);
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.he-stack-public-payment-window__total span {
    color: rgba(226, 232, 240, 0.62);
    font-size: 9px;
    font-weight: 800;
}

.he-stack-public-payment-window__total strong {
    color: #ffffff;
    font-size: 15px;
}

.he-stack-public-payment-window__checkout {
    background: #7c3aed;
    border: 1px solid rgba(196, 181, 253, 0.30);
    border-radius: 10px;
    color: #ffffff;
    display: block;
    font-size: 11px;
    font-weight: 900;
    padding: 11px 14px;
    text-align: center;
    text-decoration: none;
}

.he-stack-public-payment-window__checkout:hover {
    filter: brightness(1.08);
}

.he-stack-public-payment-window__note {
    color: rgba(226, 232, 240, 0.42);
    font-size: 8px;
    line-height: 1.45;
    text-align: center;
}

.he-stack-public-payment-window-empty {
    background: rgba(15, 23, 42, 0.60);
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 12px;
    color: rgba(226, 232, 240, 0.60);
    font-size: 10px;
    margin-top: 14px;
    padding: 11px;
}
/* SECTION: Public Stack Sale - Payment Window Identity Recovery
   Purpose:
   - Let buyers recover locked claims after the live sale ends.
   - Make payment_window visually distinct from a completed sale.
*/

.he-stack-public-buyer-status__action {
    background: rgba(124, 58, 237, 0.16);
    border: 1px solid rgba(167, 139, 250, 0.28);
    border-radius: 9px;
    color: #ddd6fe;
    cursor: pointer;
    font-size: 9px;
    font-weight: 900;
    margin-left: auto;
    padding: 7px 10px;
}

.he-stack-public-buyer-status__action:hover {
    background: rgba(124, 58, 237, 0.24);
}

.he-stack-public-live-status.is-closed {
    white-space: nowrap;
}
/* SECTION: Public Stack Sale - Focused Your Stack + Live Checkout
   Purpose:
   - Show claimed-card images in Your Stack.
   - Allow checkout while the Stack Sale is still live.
   - Hide the full catalog once the sale enters payment_window.
*/

.he-stack-public-payment-window__cards {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
}

.he-stack-public-payment-card {
    background: rgba(2, 6, 23, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 11px;
    overflow: hidden;
}

.he-stack-public-payment-card__image {
    align-items: center;
    aspect-ratio: 3 / 4;
    background: rgba(2, 6, 23, 0.72);
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.he-stack-public-payment-card__image img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.he-stack-public-payment-card__image span {
    color: rgba(226, 232, 240, 0.36);
    font-size: 8px;
}

.he-stack-public-payment-card__body {
    display: grid;
    gap: 3px;
    padding: 8px;
}

.he-stack-public-payment-card__body strong {
    color: #ffffff;
    font-size: 10px;
    line-height: 1.25;
}

.he-stack-public-payment-card__body small {
    color: rgba(226, 232, 240, 0.46);
    font-size: 8px;
    line-height: 1.3;
}

.he-stack-public-payment-card__body b {
    color: #ddd6fe;
    font-size: 11px;
    margin-top: 2px;
}

.he-stack-public-payment-window.is-live-stack {
    border-color: rgba(34, 197, 94, 0.20);
    background:
        linear-gradient(
            145deg,
            rgba(22, 163, 74, 0.08),
            rgba(15, 23, 42, 0.72)
        );
}

.he-stack-public-buyer-status__action {
    background: rgba(124, 58, 237, 0.16);
    border: 1px solid rgba(167, 139, 250, 0.28);
    border-radius: 9px;
    color: #ddd6fe;
    cursor: pointer;
    font-size: 9px;
    font-weight: 900;
    margin-left: auto;
    padding: 7px 10px;
}

.he-stack-public-buyer-status__action:hover {
    background: rgba(124, 58, 237, 0.24);
}

@media (max-width: 640px) {
    .he-stack-public-payment-window__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* SECTION: Public Stack Sale Checkout
   Purpose:
   - Buyer checkout review before payment-provider initialization.
*/

.he-stack-checkout-body {
    background: #0f172a;
    color: #f8fafc;
    margin: 0;
    min-height: 100vh;
}

.he-stack-checkout-page {
    margin: 0 auto;
    max-width: 1180px;
    padding: 24px 18px 48px;
}

.he-stack-checkout-header {
    align-items: end;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.he-stack-checkout-header h1 {
    color: #ffffff;
    font-size: clamp(26px, 5vw, 38px);
    margin: 2px 0;
}

.he-stack-checkout-header span {
    color: #94a3b8;
    font-size: 11px;
}

.he-stack-checkout-header > a {
    color: #c4b5fd;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.he-stack-checkout-layout {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.65fr);
}

.he-stack-checkout-main,
.he-stack-checkout-form {
    display: grid;
    gap: 14px;
}

.he-stack-checkout-panel,
.he-stack-checkout-summary {
    background: #111827;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 16px;
    padding: 14px;
}

.he-stack-checkout-panel__heading {
    align-items: end;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 11px;
}

.he-stack-checkout-panel__heading > div {
    display: grid;
    gap: 2px;
}

.he-stack-checkout-panel__heading span,
.he-stack-checkout-summary__header span {
    color: #a78bfa;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-stack-checkout-panel__heading h2,
.he-stack-checkout-summary__header h2 {
    color: #ffffff;
    font-size: 17px;
    margin: 0;
}

.he-stack-checkout-panel__heading > strong {
    color: #ffffff;
    font-size: 20px;
}

.he-stack-checkout-panel__heading > small {
    color: rgba(226, 232, 240, 0.50);
    font-size: 8px;
}

.he-stack-checkout-cards {
    display: grid;
    gap: 7px;
}

.he-stack-checkout-card {
    align-items: center;
    background: rgba(2, 6, 23, 0.40);
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 10px;
    display: grid;
    gap: 10px;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    padding: 7px;
}

.he-stack-checkout-card__image {
    align-items: center;
    aspect-ratio: 3 / 4;
    background: rgba(2, 6, 23, 0.72);
    border-radius: 7px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.he-stack-checkout-card__image img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.he-stack-checkout-card__image span {
    color: rgba(226, 232, 240, 0.34);
    font-size: 7px;
}

.he-stack-checkout-card__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.he-stack-checkout-card__body strong {
    color: #ffffff;
    font-size: 10px;
}

.he-stack-checkout-card__body small {
    color: rgba(226, 232, 240, 0.46);
    font-size: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.he-stack-checkout-card__body em {
    color: #c4b5fd;
    font-size: 7px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.he-stack-checkout-card > b {
    color: #ffffff;
    font-size: 10px;
}

.he-stack-checkout-shipping-options {
    display: grid;
    gap: 8px;
}

.he-stack-checkout-shipping-option {
    align-items: start;
    background: rgba(2, 6, 23, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 11px;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 10px;
}

.he-stack-checkout-shipping-option input {
    margin-top: 3px;
}

.he-stack-checkout-shipping-option > span {
    display: grid;
    gap: 2px;
}

.he-stack-checkout-shipping-option strong {
    color: #ffffff;
    font-size: 10px;
}

.he-stack-checkout-shipping-option small {
    color: rgba(226, 232, 240, 0.48);
    font-size: 8px;
}

.he-stack-checkout-shipping-option > b {
    color: #ddd6fe;
    font-size: 10px;
}

.he-stack-checkout-address-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.he-stack-checkout-address-grid label {
    color: rgba(226, 232, 240, 0.68);
    display: grid;
    font-size: 8px;
    font-weight: 800;
    gap: 5px;
}

.he-stack-checkout-address-grid label.is-full {
    grid-column: 1 / -1;
}

.he-stack-checkout-address-grid label span {
    color: rgba(226, 232, 240, 0.35);
    font-weight: 600;
}

.he-stack-checkout-address-grid input {
    background: rgba(2, 6, 23, 0.64);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    color: #ffffff;
    font: inherit;
    padding: 9px 10px;
}

.he-stack-checkout-continue {
    background: #7c3aed;
    border: 1px solid rgba(196, 181, 253, 0.28);
    border-radius: 11px;
    color: #ffffff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
    padding: 12px 14px;
}

.he-stack-checkout-summary {
    position: sticky;
    top: 16px;
}

.he-stack-checkout-summary__header {
    display: grid;
    gap: 2px;
    margin-bottom: 12px;
}

.he-stack-checkout-summary dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.he-stack-checkout-summary dl > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.he-stack-checkout-summary dt {
    color: rgba(226, 232, 240, 0.58);
    font-size: 9px;
}

.he-stack-checkout-summary dd {
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    margin: 0;
}

.he-stack-checkout-summary dl > div.is-total {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    margin-top: 4px;
    padding-top: 10px;
}

.he-stack-checkout-summary .is-total dt,
.he-stack-checkout-summary .is-total dd {
    font-size: 14px;
    font-weight: 900;
}

.he-stack-checkout-summary > p {
    color: rgba(226, 232, 240, 0.40);
    font-size: 8px;
    line-height: 1.45;
    margin: 12px 0 0;
}

.he-stack-checkout-safety {
    background: rgba(22, 163, 74, 0.07);
    border: 1px solid rgba(134, 239, 172, 0.14);
    border-radius: 10px;
    display: grid;
    gap: 2px;
    margin-top: 12px;
    padding: 9px;
}

.he-stack-checkout-safety strong {
    color: #bbf7d0;
    font-size: 8px;
}

.he-stack-checkout-safety span {
    color: rgba(187, 247, 208, 0.55);
    font-size: 8px;
    line-height: 1.4;
}

.he-stack-checkout-errors,
.he-stack-checkout-ready,
.he-stack-checkout-error {
    border-radius: 14px;
    margin-bottom: 14px;
    padding: 13px;
}

.he-stack-checkout-errors {
    background: rgba(127, 29, 29, 0.20);
    border: 1px solid rgba(248, 113, 113, 0.22);
}

.he-stack-checkout-errors strong {
    color: #fecaca;
    font-size: 10px;
}

.he-stack-checkout-errors ul {
    color: rgba(254, 202, 202, 0.75);
    font-size: 9px;
    margin: 7px 0 0;
    padding-left: 18px;
}

.he-stack-checkout-ready {
    background: rgba(22, 163, 74, 0.10);
    border: 1px solid rgba(134, 239, 172, 0.18);
    display: grid;
    gap: 4px;
}

.he-stack-checkout-ready span {
    color: #86efac;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-stack-checkout-ready h2 {
    color: #ffffff;
    font-size: 18px;
    margin: 0;
}

.he-stack-checkout-ready p {
    color: rgba(226, 232, 240, 0.52);
    font-size: 9px;
    margin: 0;
}

.he-stack-checkout-ready strong {
    color: #ffffff;
    font-size: 20px;
    margin-top: 4px;
}

.he-stack-checkout-error {
    background: #111827;
    border: 1px solid rgba(148, 163, 184, 0.14);
    margin: 40px auto;
    max-width: 620px;
}

.he-stack-checkout-error h1 {
    color: #ffffff;
    margin: 4px 0;
}

.he-stack-checkout-error p {
    color: #94a3b8;
}

.he-stack-checkout-error a {
    color: #c4b5fd;
    font-weight: 800;
}

@media (max-width: 860px) {
    .he-stack-checkout-layout {
        grid-template-columns: 1fr;
    }

    .he-stack-checkout-summary {
        position: static;
    }
}

@media (max-width: 640px) {
    .he-stack-checkout-page {
        padding: 16px 12px 36px;
    }

    .he-stack-checkout-header {
        align-items: start;
        display: grid;
    }

    .he-stack-checkout-address-grid {
        grid-template-columns: 1fr;
    }

    .he-stack-checkout-address-grid label.is-full {
        grid-column: auto;
    }
}
/* ============================================================
   SECTION: Stack Sale Orders & Fulfillment
   ============================================================ */

.he-stack-orders-shell {
    display: grid;
    gap: 1.25rem;
}

.he-stack-orders-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.he-stack-orders-metrics > div {
    border: 1px solid var(--he-border, #d9dee8);
    border-radius: 14px;
    padding: 1rem;
    display: grid;
    gap: 0.2rem;
    background: var(--he-surface, #fff);
}

.he-stack-orders-metrics span,
.he-stack-orders-metrics small {
    color: var(--he-muted, #667085);
}

.he-stack-orders-metrics strong {
    font-size: 1.5rem;
}

.he-stack-orders-batch-form {
    display: grid;
    gap: 0.8rem;
}

.he-stack-orders-batch-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--he-border, #d9dee8);
    border-radius: 14px;
    padding: 0.9rem 1rem;
}

.he-stack-orders-batch-bar > div {
    display: grid;
    gap: 0.15rem;
}

.he-stack-orders-batch-bar span {
    color: var(--he-muted, #667085);
    font-size: 0.9rem;
}

.he-stack-orders-list {
    display: grid;
    gap: 0.8rem;
}

.he-stack-order-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0.5rem;
    border: 1px solid var(--he-border, #d9dee8);
    border-radius: 16px;
    padding: 1rem;
}

.he-stack-order-card__select {
    padding-top: 0.2rem;
}

.he-stack-order-card__select input {
    width: 18px;
    height: 18px;
}

.he-stack-order-card__body {
    min-width: 0;
    display: grid;
    gap: 0.9rem;
}

.he-stack-order-card__top,
.he-stack-order-card__title-row,
.he-stack-order-card__actions,
.he-stack-order-card__footer {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.he-stack-order-card__top {
    justify-content: space-between;
    align-items: flex-start;
}

.he-stack-order-card__title-row h2,
.he-stack-order-card__top p {
    margin: 0;
}

.he-stack-order-card__top small,
.he-stack-order-card__footer {
    color: var(--he-muted, #667085);
}

.he-stack-order-card__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

.he-stack-order-card__metrics > div {
    background: var(--he-surface-soft, #f7f8fb);
    border-radius: 12px;
    padding: 0.7rem;
    display: grid;
    gap: 0.15rem;
}

.he-stack-order-card__metrics span {
    color: var(--he-muted, #667085);
    font-size: 0.8rem;
}

.he-stack-order-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    background: #eef2f7;
}

.he-stack-order-status--fulfillment_pending,
.he-stack-order-status--paid {
    background: #e9f8ef;
    color: #176b3a;
}

.he-stack-order-status--shipped,
.he-stack-order-status--delivered {
    background: #edf4ff;
    color: #2459a8;
}


/* ============================================================
   SECTION: Stack Sale Printable Receipt / Pick List
   ============================================================ */

.he-stack-print-page {
    margin: 0;
    background: #eef1f5;
    color: #111827;
    font-family: Arial, Helvetica, sans-serif;
}

.he-stack-print-sheet {
    width: min(100% - 2rem, 900px);
    margin: 1rem auto;
    padding: 1.25rem;
    background: #fff;
    border-radius: 16px;
    box-sizing: border-box;
}

.he-stack-print-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.he-stack-receipt-header,
.he-stack-pick-header {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #111827;
}

.he-stack-receipt-header h1,
.he-stack-pick-header h1 {
    margin: 0.1rem 0 0.4rem;
}

.he-stack-receipt-header__meta {
    text-align: right;
    display: grid;
    align-content: start;
}

.he-stack-receipt-header__meta strong {
    font-size: 1.75rem;
}

.he-stack-receipt-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 1rem;
    margin: 1.25rem 0;
}

.he-stack-receipt-grid > div {
    border: 1px solid #d7dce5;
    border-radius: 12px;
    padding: 0.85rem;
    display: grid;
    align-content: start;
    gap: 0.25rem;
}

.he-stack-receipt-grid h2 {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #667085;
}

.he-stack-receipt-items,
.he-stack-pick-table {
    border: 1px solid #d7dce5;
    border-radius: 12px;
    overflow: hidden;
}

.he-stack-receipt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 90px;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    align-items: center;
}

.he-stack-receipt-row:last-child {
    border-bottom: 0;
}

.he-stack-receipt-row--head,
.he-stack-pick-row--head {
    font-weight: 700;
    background: #f3f4f6;
}

.he-stack-receipt-row small,
.he-stack-pick-row small {
    display: block;
    color: #667085;
    margin-top: 0.15rem;
}

.he-stack-receipt-totals {
    width: min(100%, 360px);
    margin: 1rem 0 0 auto;
    display: grid;
    gap: 0.45rem;
}

.he-stack-receipt-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.he-stack-receipt-totals__grand {
    border-top: 2px solid #111827;
    padding-top: 0.6rem;
    font-size: 1.15rem;
}

.he-stack-receipt-footer,
.he-stack-pick-footer {
    margin-top: 1rem;
    color: #667085;
    font-size: 0.8rem;
}

.he-stack-pick-header__counts {
    display: flex;
    gap: 0.6rem;
}

.he-stack-pick-header__counts > div {
    min-width: 90px;
    border: 1px solid #d7dce5;
    border-radius: 10px;
    padding: 0.65rem;
    text-align: center;
    display: grid;
}

.he-stack-pick-header__counts span {
    color: #667085;
    font-size: 0.78rem;
}

.he-stack-pick-header__counts strong {
    font-size: 1.4rem;
}

.he-stack-pick-table {
    margin-top: 1rem;
}

.he-stack-pick-row {
    display: grid;
    grid-template-columns: 34px 130px 115px minmax(240px, 1fr) minmax(170px, 0.8fr);
    gap: 0.7rem;
    padding: 0.65rem 0.75rem;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
}

.he-stack-pick-row:last-child {
    border-bottom: 0;
}

.he-stack-pick-checkbox {
    font-size: 1.3rem;
}

@media (max-width: 800px) {
    .he-stack-orders-metrics,
    .he-stack-order-card__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-stack-receipt-grid {
        grid-template-columns: 1fr;
    }

    .he-stack-pick-row {
        grid-template-columns: 30px 100px minmax(0, 1fr);
    }

    .he-stack-pick-row > :nth-child(3) {
        display: none;
    }

    .he-stack-pick-row > :nth-child(5) {
        grid-column: 2 / -1;
    }
}

@media print {
    .he-stack-print-page {
        background: #fff;
    }

    .he-stack-print-sheet {
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 0;
    }

    .he-stack-print-toolbar {
        display: none !important;
    }

    .he-stack-receipt-row,
    .he-stack-pick-row,
    .he-stack-receipt-grid > div {
        break-inside: avoid;
    }

    .he-stack-pick-row {
        font-size: 10pt;
    }

    @page {
        margin: 0.45in;
    }
}
/* ============================================================
   SECTION: Stack Sale Fulfillment
   ============================================================ */

.he-stack-fulfillment-shell {
    display: grid;
    gap: 1rem;
}

.he-stack-fulfillment-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 0.9rem;
}

.he-stack-fulfillment-panel {
    border: 1px solid var(--he-border, #d9dee8);
    border-radius: 14px;
    padding: 1rem;
    display: grid;
    align-content: start;
    gap: 0.25rem;
}

.he-stack-fulfillment-panel h2 {
    margin: 0 0 0.45rem;
    font-size: 1rem;
}

.he-stack-fulfillment-totals {
    display: grid;
    gap: 0.45rem;
}

.he-stack-fulfillment-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.he-stack-fulfillment-items {
    border: 1px solid var(--he-border, #d9dee8);
    border-radius: 14px;
    overflow: hidden;
}

.he-stack-fulfillment-item {
    display: grid;
    grid-template-columns: 140px 125px minmax(0, 1fr) 150px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--he-border, #e5e7eb);
}

.he-stack-fulfillment-item:last-child {
    border-bottom: 0;
}

.he-stack-fulfillment-item--head {
    background: var(--he-surface-soft, #f7f8fb);
    font-weight: 700;
    font-size: 0.82rem;
}

.he-stack-fulfillment-item small {
    display: block;
    margin-top: 0.15rem;
    color: var(--he-muted, #667085);
}

.he-stack-fulfillment-form {
    border: 1px solid var(--he-border, #d9dee8);
    border-radius: 14px;
    padding: 1rem;
    display: grid;
    gap: 1rem;
}

.he-stack-fulfillment-form-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.he-stack-fulfillment-form-grid label {
    display: grid;
    gap: 0.35rem;
}

.he-stack-fulfillment-form-grid label > span {
    font-size: 0.82rem;
    font-weight: 700;
}

.he-stack-fulfillment-form-grid input,
.he-stack-fulfillment-form-grid select {
    width: 100%;
    box-sizing: border-box;
}

.he-stack-fulfillment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .he-stack-fulfillment-grid {
        grid-template-columns: 1fr;
    }

    .he-stack-fulfillment-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-stack-fulfillment-item {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .he-stack-fulfillment-item > :nth-child(2),
    .he-stack-fulfillment-item > :nth-child(4) {
        grid-column: 2;
    }
}
/* ============================================================
   SECTION: Stack Sale Transactional Email Queue
   ============================================================ */

.he-stack-email-worker {
    display: grid;
    gap: 1rem;
}

.he-stack-email-worker__summary {
    display: grid;
    grid-template-columns: minmax(150px, 0.7fr) minmax(150px, 0.7fr) minmax(220px, 1fr);
    gap: 0.75rem;
    align-items: stretch;
}

.he-stack-email-worker__summary > div,
.he-stack-email-worker__summary > form {
    border: 1px solid var(--he-border, #d9dee8);
    border-radius: 14px;
    padding: 0.9rem;
    display: grid;
    align-content: center;
    gap: 0.15rem;
}

.he-stack-email-worker__summary span {
    color: var(--he-muted, #667085);
    font-size: 0.8rem;
}

.he-stack-email-worker__summary strong {
    font-size: 1.35rem;
}

.he-stack-email-worker__summary > form {
    justify-items: end;
}

.he-stack-email-queue {
    display: grid;
    gap: 0.7rem;
}

.he-stack-email-queue__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--he-border, #d9dee8);
    border-radius: 14px;
    padding: 0.9rem 1rem;
}

.he-stack-email-queue__item p {
    margin: 0.3rem 0 0;
}

.he-stack-email-queue__item small {
    color: var(--he-muted, #667085);
}

.he-stack-email-queue__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.he-stack-email-queue__title span {
    background: var(--he-surface-soft, #f4f6f8);
    border-radius: 999px;
    color: var(--he-muted, #667085);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.45rem;
}

@media (max-width: 760px) {
    .he-stack-email-worker__summary {
        grid-template-columns: 1fr;
    }

    .he-stack-email-worker__summary > form {
        justify-items: stretch;
    }

    .he-stack-email-queue__item {
        align-items: stretch;
        flex-direction: column;
    }
}
/* ==========================================================================
   HobbyEdge — eBay Shipment Lifecycle Audit
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-shipment-audit-link,
.he-shipment-audit-link:visited {
    color: #93c5fd;
    font-weight: 700;
}

.he-shipment-audit-link:hover,
.he-shipment-audit-link:focus {
    color: #ffffff;
}
/* ==========================================================================
   HobbyEdge — eBay Orders organized action toolbar
   Replace the previous eBay Orders wrapping-toolbar patch with this block.
   ========================================================================== */

.he-orders-header.he-orders-header--toolbar {
    display: block;
}

.he-orders-header--toolbar .he-orders-toolbar {
    width: 100%;
    margin-top: 22px;
}

.he-orders-header--toolbar .he-orders-sync-form {
    display: block;
    width: 100%;
    margin: 0;
}

.he-orders-header--toolbar .he-orders-toolbar-row {
    display: flex;
    align-items: end;
    gap: 16px;
    width: 100%;
}

.he-orders-header--toolbar .he-orders-toolbar-row--primary {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.he-orders-header--toolbar .he-orders-import-control {
    width: 210px;
    flex: 0 0 210px;
}

.he-orders-header--toolbar .he-orders-import-control span,
.he-orders-header--toolbar .he-orders-toolbar-label {
    display: block;
    margin-bottom: 7px;
    color: #9fb3d9;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-orders-header--toolbar .he-orders-primary-actions,
.he-orders-header--toolbar .he-orders-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.he-orders-header--toolbar .he-orders-toolbar-row--secondary {
    align-items: center;
    padding-top: 16px;
}

.he-orders-header--toolbar .he-orders-toolbar-label {
    width: 52px;
    flex: 0 0 52px;
    margin: 0;
}

.he-orders-header--toolbar .he-orders-match-form {
    margin-top: 12px;
}

.he-orders-header--toolbar .he-orders-primary-actions .he-button,
.he-orders-header--toolbar .he-orders-secondary-actions .he-button {
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .he-orders-header--toolbar .he-orders-toolbar-row {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .he-orders-header--toolbar .he-orders-import-control,
    .he-orders-header--toolbar .he-orders-toolbar-label {
        width: 100%;
        flex: 0 0 auto;
    }

    .he-orders-header--toolbar .he-orders-toolbar-label {
        margin-bottom: -2px;
    }
}
/* ==========================================================================
   HobbyEdge — eBay Orders toolbar final override
   Append at the VERY BOTTOM of /assets/css/hobbyedge.css
   This intentionally overrides earlier eBay Orders toolbar rules.
   ========================================================================== */

.he-orders-header.he-orders-header--toolbar {
    display: block !important;
}

.he-orders-header.he-orders-header--toolbar .he-orders-toolbar {
    display: block !important;
    width: 100% !important;
    margin-top: 22px !important;
}

.he-orders-header.he-orders-header--toolbar .he-orders-sync-form {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

.he-orders-header.he-orders-header--toolbar .he-orders-toolbar-row {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
}

.he-orders-header.he-orders-header--toolbar .he-orders-toolbar-row--primary {
    align-items: end !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
}

.he-orders-header.he-orders-header--toolbar .he-orders-import-control {
    display: block !important;
    width: 210px !important;
    flex: 0 0 210px !important;
    min-width: 210px !important;
    margin: 0 !important;
}

.he-orders-header.he-orders-header--toolbar .he-orders-import-control .he-input {
    width: 100% !important;
}

.he-orders-header.he-orders-header--toolbar .he-orders-primary-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.he-orders-header.he-orders-header--toolbar .he-orders-toolbar-row--secondary {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding-top: 16px !important;
}

.he-orders-header.he-orders-header--toolbar .he-orders-toolbar-label {
    display: block !important;
    width: 52px !important;
    margin: 0 !important;
    color: #9fb3d9 !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.he-orders-header.he-orders-header--toolbar .he-orders-secondary-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.he-orders-header.he-orders-header--toolbar .he-orders-primary-actions .he-button,
.he-orders-header.he-orders-header--toolbar .he-orders-secondary-actions .he-button {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.he-orders-header.he-orders-header--toolbar .he-orders-match-form {
    display: block !important;
    width: 100% !important;
    margin-top: 12px !important;
}

@media (max-width: 900px) {
    .he-orders-header.he-orders-header--toolbar .he-orders-toolbar-row--primary {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .he-orders-header.he-orders-header--toolbar .he-orders-import-control {
        width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }

    .he-orders-header.he-orders-header--toolbar .he-orders-toolbar-row--secondary {
        grid-template-columns: 1fr !important;
    }

    .he-orders-header.he-orders-header--toolbar .he-orders-toolbar-label {
        width: auto !important;
    }
}
/* ==========================================================================
   HobbyEdge — Card Intake loaded-state + upload processing overlay
   Append once to /assets/css/hobbyedge.css
   ========================================================================== */

.he-card-intake-dropzone.is-loaded {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(52, 211, 153, 0.72);
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.12);
}

.he-card-intake-dropzone.is-loaded .he-card-intake-dropzone__icon {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(52, 211, 153, 0.62);
    color: #a7f3d0;
}

.he-card-intake-dropzone.is-loaded strong {
    color: #d1fae5;
}

.he-card-intake-dropzone.is-loaded small {
    color: #a7f3d0;
}

.he-card-upload-processing {
    align-items: center;
    background: rgba(5, 10, 24, 0.78);
    display: none;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 20000;
}

.he-card-upload-processing.is-visible {
    display: flex;
}

.he-card-upload-processing__panel {
    align-items: center;
    background: #111827;
    border: 1px solid rgba(167, 139, 250, 0.46);
    border-radius: 16px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.44);
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
    padding: 28px 32px;
    text-align: center;
    width: min(100%, 420px);
}

.he-card-upload-processing__panel strong {
    color: #ffffff;
    font-size: 1.05rem;
}

.he-card-upload-processing__panel span {
    color: var(--he-muted, #aeb7ca);
    font-size: 0.82rem;
    line-height: 1.45;
}

.he-card-upload-processing__spinner {
    animation: he-card-upload-spin 0.85s linear infinite;
    border: 3px solid rgba(167, 139, 250, 0.2);
    border-radius: 50%;
    border-top-color: #a78bfa;
    height: 42px;
    width: 42px;
}

@keyframes he-card-upload-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .he-card-upload-processing__spinner {
        animation-duration: 1.8s;
    }
}