/**
 * ============================================================
 * MARKETPLACE — Styling
 * ============================================================
 * Inherits :root CSS variables from main style.css
 */

/* ═══ PAGE LAYOUT ═══ */
.marketplace-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 80px;
}

/* ═══ COMING SOON ═══ */
.marketplace-coming-soon {
    text-align: center;
    padding: 80px 20px;
    max-width: 500px;
    margin: 0 auto;
}
.coming-soon-icon {
    font-size: 4rem;
    margin-bottom: 16px;
}
.marketplace-coming-soon h2 {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-bottom: 8px;
}
.marketplace-coming-soon p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ═══ HEADER ═══ */
.marketplace-header {
    text-align: center;
    margin-bottom: 24px;
}
.marketplace-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.marketplace-header h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}
.marketplace-launch-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(245,158,11,0.15) 0%, rgba(251,191,36,0.1) 100%);
    border: 1px solid rgba(251,191,36,0.3);
    color: #fbbf24;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.marketplace-subtitle {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 6px 0 0;
}

/* ═══ ADMIN BAR ═══ */
.marketplace-admin-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    padding: 10px 18px;
    background: rgba(124,58,237,0.08);
    border: 1px solid rgba(124,58,237,0.2);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
}
.admin-bar-label {
    color: var(--text-secondary);
    font-weight: 500;
}
.admin-bar-sep {
    color: var(--border-primary);
}
.admin-bar-info {
    color: var(--text-secondary);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 24px;
    transition: all 0.25s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: all 0.25s;
}
.toggle-switch input:checked + .toggle-slider {
    background: rgba(34,197,94,0.2);
    border-color: rgba(34,197,94,0.4);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
    background: #22c55e;
}
.toggle-status {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 80px;
}

/* ═══ TABS ═══ */
.marketplace-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: 0;
    overflow-x: auto;
}
.mp-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
}
.mp-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}
.mp-tab.active {
    color: #fbbf24;
    border-bottom-color: #fbbf24;
}
.mp-tab-icon {
    font-size: 1.1rem;
}
.mp-tab-count {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 10px;
}
.mp-tab.active .mp-tab-count {
    background: rgba(251,191,36,0.15);
    color: #fbbf24;
}
.mp-tab-badge {
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-left: 4px;
    box-shadow: 0 0 6px rgba(239,68,68,0.4);
    animation: badgePulse 3s ease-in-out infinite;
}

/* ═══ TAB CONTENT PANELS ═══ */
.mp-tab-content {
    display: none;
}
.mp-tab-content.mp-tab-active {
    display: block;
    animation: mpTabFadeIn 0.3s ease forwards;
}
@keyframes mpTabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Override GSAP inline styles inside tab content */
.mp-tab-content .section-animate {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* ═══ SUB-TABS (Orders & Offers) ═══ */
.mp-sub-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: 0;
    overflow-x: auto;
}
.mp-sub-tab {
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mp-sub-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}
.mp-sub-tab.active {
    color: #fbbf24;
    border-bottom-color: #fbbf24;
}
.mp-sub-count {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 10px;
}
.mp-sub-tab.active .mp-sub-count {
    background: rgba(251,191,36,0.15);
    color: #fbbf24;
}
.mp-sub-panel {
    display: none;
}
.mp-sub-panel.mp-sub-active {
    display: block;
    animation: mpTabFadeIn 0.2s ease forwards;
}
.mp-empty-sub {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.mp-empty-sub span {
    display: block;
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.5;
}
.mp-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(99,102,241,0.15);
    color: #818cf8;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}

/* ═══ CARD-GRID CHECKBOXES ═══ */
.mp-order-card {
    position: relative;
}
.mp-card-check {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent, #f59e0b);
    z-index: 2;
    opacity: 0.5;
    transition: opacity .2s;
}
.mp-card-check:hover,
.mp-card-check:checked {
    opacity: 1;
}
.mp-card-select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    user-select: none;
}
.mp-card-select-all-label input {
    accent-color: var(--accent, #f59e0b);
}

/* ═══ FILTERS ═══ */
.mp-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.mp-filter-group {
    flex: 1;
    min-width: 150px;
}
.mp-search {
    width: 100%;
    padding: 9px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-sans);
    transition: border-color 0.15s;
}
.mp-search:focus {
    outline: none;
    border-color: #fbbf24;
}
.mp-select {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-sans);
    cursor: pointer;
}
.mp-select:focus {
    outline: none;
    border-color: #fbbf24;
}

/* ═══ EMPTY STATE ═══ */
.mp-empty {
    text-align: center;
    padding: 60px 20px;
}
.mp-empty-icon {
    font-size: 3.5rem;
    margin-bottom: 12px;
    opacity: 0.6;
}
.mp-empty h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 6px;
}
.mp-empty p {
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-bottom: 18px;
}

/* ═══ CARD GRID (Singles) ═══ */
.mp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.mp-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
}
.mp-card:hover {
    border-color: rgba(251,191,36,0.3);
    transform: translateY(-2px);
}
.mp-card-img {
    width: 100%;
    aspect-ratio: 5/7;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.mp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mp-card-img-placeholder {
    font-size: 3rem;
    color: var(--text-muted);
    opacity: 0.4;
}
.mp-card-body {
    padding: 12px 14px;
    flex: 1;
}
.mp-card-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}
.mp-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.mp-rarity {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.rarity-enchanted { background: rgba(192,132,252,0.15); color: #c084fc; }
.rarity-iconic { background: rgba(251,191,36,0.15); color: #fbbf24; }
.rarity-legendary { background: rgba(245,158,11,0.15); color: #f59e0b; }
.rarity-super-rare { background: rgba(59,130,246,0.15); color: #3b82f6; }
.rarity-rare { background: rgba(34,197,94,0.15); color: #22c55e; }
.rarity-uncommon { background: rgba(139,158,176,0.12); color: #8b9eb0; }
.rarity-common { background: rgba(110,118,129,0.12); color: #6e7681; }
.mp-chapter {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.mp-card-condition {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.mp-card-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
}
.mp-price-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fbbf24;
}
.mp-price-currency {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}
.mp-card-seller {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.mp-seller-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
}
.mp-seller-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mp-seller-rating {
    font-size: 0.72rem;
    color: #fbbf24;
}
.mp-seller-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    transition: color 0.15s;
}
.mp-seller-link:hover {
    color: var(--accent-primary);
}
.mp-seller-link:hover .mp-seller-name {
    text-decoration: underline;
}
.mp-card-views {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: auto;
}
.mp-card-status-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.mp-card-actions {
    display: flex;
    gap: 6px;
    padding: 0 14px 12px;
}
.mp-card-actions .btn {
    flex: 1;
    font-size: 0.8rem;
    padding: 7px 12px;
    text-align: center;
}

/* ═══ PRODUCT GRID (Sealed) ═══ */
.mp-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}
.mp-product {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, transform 0.15s;
}
.mp-product:hover {
    border-color: rgba(245,158,11,0.3);
    transform: translateY(-2px);
}
.mp-product-img {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mp-product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}
.mp-product-img-placeholder {
    font-size: 3.5rem;
    color: var(--text-muted);
    opacity: 0.4;
}
.mp-product-body {
    padding: 14px 16px;
    flex: 1;
}
.mp-product-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.mp-product-chapter {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.mp-product-category {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.mp-product-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 10px;
}
.mp-product-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 6px;
}
.mp-product-price .mp-price-value {
    font-size: 1.3rem;
}
.mp-product-stock {
    font-size: 0.78rem;
    margin-bottom: 4px;
}
.stock-available {
    color: #22c55e;
    font-weight: 500;
}
.stock-out {
    color: #ef4444;
    font-weight: 500;
}
.mp-product-actions {
    padding: 0 16px 14px;
}
.mp-product-actions .btn {
    width: 100%;
    text-align: center;
    padding: 10px;
    font-size: 0.88rem;
}

/* ═══ SELL TAB — Become Seller ═══ */
.mp-become-seller {
    max-width: 560px;
    margin: 0 auto;
}
.mp-seller-hero {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    text-align: center;
}
.mp-seller-hero-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}
.mp-seller-hero h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.mp-seller-hero p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 14px;
}
.mp-seller-promo {
    background: linear-gradient(135deg, rgba(34,197,94,0.1) 0%, rgba(34,197,94,0.05) 100%);
    border: 1px solid rgba(34,197,94,0.25);
    color: #22c55e;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    margin-bottom: 20px;
}
.mp-seller-commission {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 20px;
}

/* ═══ FORMS ═══ */
.mp-seller-form,
.mp-listing-form {
    text-align: left;
}
.mp-form-row {
    margin-bottom: 14px;
}
.mp-form-row label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}
.mp-optional {
    font-weight: 400;
    color: var(--text-muted);
}
.mp-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-sans);
}
.mp-input:focus {
    outline: none;
    border-color: #fbbf24;
}
.mp-textarea {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-sans);
    resize: vertical;
}
.mp-textarea:focus {
    outline: none;
    border-color: #fbbf24;
}
.mp-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.mp-price-input {
    display: flex;
    gap: 8px;
}
.mp-price-input .mp-input {
    flex: 1;
}
.mp-currency-select {
    width: 100px !important;
    flex: none !important;
}
.mp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
.mp-form-full {
    grid-column: 1 / -1;
}
.mp-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

/* ═══ SELLER DASHBOARD ═══ */
.mp-seller-dashboard {
    margin-bottom: 20px;
}
.mp-seller-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.mp-stat {
    flex: 1;
    min-width: 120px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
}
.mp-stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fbbf24;
}
.mp-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ═══ NEW LISTING ═══ */
.mp-new-listing {
    position: relative;
    z-index: 20;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin-bottom: 20px;
}
.mp-new-listing h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* ═══ CARD SEARCH (sell form) ═══ */
.mp-card-search-wrap {
    position: relative;
    margin-bottom: 16px;
    z-index: 10;
}
.mp-card-search-wrap label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.mp-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 340px;
    overflow-y: auto;
    background: var(--bg-card, #1a1a2e);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 1000;
}
.mp-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ── Hover Zoom Preview ── */
.mp-hover-preview {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.mp-hover-preview.visible {
    opacity: 1;
}
.mp-hover-preview img {
    width: 280px;
    height: auto;
    border-radius: 12px;
    filter: drop-shadow(0 8px 30px rgba(0,0,0,0.8));
}
@media (max-width: 600px) {
    .mp-hover-preview { display: none; }
}

/* ── Zoomable card image (click to enlarge) ── */
.mp-zoomable {
    cursor: zoom-in;
}
.mp-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.88);
    cursor: zoom-out;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.mp-zoom-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
.mp-zoom-overlay img {
    max-width: 90vw;
    max-height: 88vh;
    border-radius: 14px;
    box-shadow: 0 0 60px rgba(251,191,36,0.15);
}
.mp-search-item:hover {
    background: rgba(251,191,36,0.08);
}
.mp-search-thumb {
    width: 40px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.mp-search-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mp-search-info strong {
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-search-info small {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.mp-search-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Selected card preview */
.mp-selected-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.2);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}
.mp-selected-img {
    width: 70px;
    height: 98px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    flex-shrink: 0;
}
.mp-selected-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mp-selected-info strong {
    font-size: 0.95rem;
    color: var(--text-primary);
}
.mp-selected-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.mp-selected-meta .mp-rarity {
    font-weight: 600;
}

/* ═══ ACTION TABS (Sell / Buy toggle) ═══ */
.mp-action-tabs {
    display: flex;
    gap: 8px;
    margin: 16px 0;
}
.mp-action-tab {
    flex: 1;
    padding: 11px 16px;
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.mp-action-tab:hover {
    border-color: rgba(251,191,36,0.4);
    color: var(--text-primary);
}
.mp-action-tab.active[data-action-tab="sell"] {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.5);
    color: #f87171;
}
.mp-action-tab.active[data-action-tab="buy"] {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.5);
    color: #4ade80;
}

/* ═══ PENDING ORDERS ═══ */
.mp-pending-orders {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin-bottom: 20px;
}
.mp-pending-orders h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 14px;
}
.mp-orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mp-order-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}
.mp-order-img {
    width: 70px;
    height: auto;
    border-radius: 6px;
    flex-shrink: 0;
}
.mp-order-info {
    flex: 1;
    min-width: 0;
}
.mp-order-info strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.mp-order-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.mp-order-price {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent-primary);
    margin-bottom: 4px;
}
.mp-order-buyer {
    font-size: 0.82rem;
    color: var(--text-dim);
    margin-bottom: 2px;
}
.mp-order-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* ─── Order status progress ─── */
.mp-order-progress {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.mp-step {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
    position: relative;
}
.mp-step + .mp-step::before {
    content: '→';
    position: absolute;
    left: -11px;
    color: var(--text-muted);
    font-size: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
}
.mp-step-done {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
}

/* ─── Centered address block ─── */
.mp-order-address-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 0 0 auto;
    min-width: 160px;
    max-width: 240px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    gap: 6px;
}
.mp-order-address-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-dim);
}
.mp-order-address-text {
    font-size: 0.75rem;
    color: var(--text-primary);
    white-space: pre-line;
    line-height: 1.4;
}
.mp-order-address-block .mp-copy-info-btn {
    margin-top: 2px;
}

.mp-order-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    align-self: center;
}
.status-confirmed { background: rgba(59,130,246,0.12); color: #3b82f6; }
.status-shipped { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.status-pending { background: rgba(245,158,11,0.12); color: #f59e0b; }

@media (max-width: 600px) {
    .mp-order-card { flex-wrap: wrap; }
    .mp-order-actions { flex-direction: row; width: 100%; }
    .mp-order-address-block { max-width: 100%; min-width: 0; width: 100%; }
}

/* ═══ MY LISTINGS TABLE ═══ */
.mp-my-listings {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
}
.mp-my-listings h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 14px;
}
.mp-listings-table {
    overflow-x: auto;
}
.mp-listings-table table {
    width: 100%;
    border-collapse: collapse;
}
.mp-listings-table th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-primary);
}
.mp-listings-table td {
    font-size: 0.84rem;
    color: var(--text-primary);
    padding: 10px 10px;
    border-bottom: 1px solid var(--border-secondary);
}
.mp-cell-name {
    font-weight: 600;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-status {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}
.status-active { background: rgba(34,197,94,0.12); color: #22c55e; }
.status-sold { background: rgba(59,130,246,0.12); color: #3b82f6; }
.status-reserved { background: rgba(245,158,11,0.12); color: #f59e0b; }
.status-cancelled { background: rgba(239,68,68,0.12); color: #ef4444; }
.status-expired { background: rgba(110,118,129,0.12); color: #6e7681; }

.mp-status-pending { background: rgba(245,158,11,0.15); color: #f59e0b; }
.mp-status-confirmed { background: rgba(59,130,246,0.15); color: #3b82f6; }
.mp-status-shipped { background: rgba(168,85,247,0.15); color: #a855f7; }
.mp-status-completed { background: rgba(34,197,94,0.15); color: #22c55e; }
.mp-status-cancelled { background: rgba(239,68,68,0.12); color: #ef4444; }
.mp-status-payment-pending { background: rgba(245,158,11,0.15); color: #f59e0b; }
.mp-status-payment-held { background: rgba(59,130,246,0.15); color: #3b82f6; }
.mp-status-disputed { background: rgba(239,68,68,0.18); color: #ef4444; font-weight: 600; }
.mp-status-awaiting { background: rgba(251,191,36,0.15); color: #fbbf24; font-weight: 600; }

.mp-escrow-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 2px;
    background: rgba(59,130,246,0.1);
    color: var(--text-dim);
}

/* ═══ PAYMENT RETURN BANNERS ═══ */
.mp-banner {
    padding: 12px 18px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 0.92rem;
    font-weight: 500;
}
.mp-banner-success {
    background: rgba(34,197,94,0.12);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.25);
}
.mp-banner-warning {
    background: rgba(245,158,11,0.12);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.25);
}

/* ═══ BIN BUTTON (double-click to cancel) ═══ */
.mp-bin-btn {
    background: none;
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: all .2s;
    color: var(--text-dim, #94a3b8);
    text-decoration: none;
    vertical-align: middle;
}
.mp-bin-btn:hover { border-color: var(--accent, #f59e0b); color: var(--text); }
.mp-bin-btn.mp-bin-armed {
    background: rgba(239,68,68,0.15);
    border-color: #ef4444;
    color: #ef4444;
    animation: mp-bin-pulse .4s ease;
}
@keyframes mp-bin-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ═══ ROW CHECKBOXES ═══ */
.mp-select-all,
.mp-row-check {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent, #f59e0b);
}

/* ═══ MY ORDERS TAB ═══ */
.mp-section-title {
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
}
.mp-orders-section {
    margin-bottom: 2rem;
}
.mp-orders-section h4 {
    font-size: 1rem;
    margin-bottom: 0.8rem;
    color: var(--text-secondary, #9ca3af);
}
.mp-orders-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
}
.mp-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.mp-orders-table th {
    text-align: left;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary, #9ca3af);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.mp-orders-table td {
    padding: 10px 12px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.06));
    vertical-align: middle;
}
.mp-orders-table tbody tr:hover {
    background: rgba(255,255,255,0.03);
}

/* ─── My Purchases: white frame ─── */
.mp-purchases-section .mp-orders-table-wrap {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.mp-purchases-section .mp-orders-table th {
    background: rgba(255, 255, 255, 0.15);
    color: #444;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.mp-purchases-section .mp-orders-table td {
    color: #e2e8f0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mp-purchases-section .mp-orders-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
}
.mp-purchases-section .mp-user-link {
    color: #2563eb;
}
.mp-purchases-section h4 {
    color: #e2e8f0;
}
.mp-purchases-section .mp-order-card {
    background: transparent;
    border-color: transparent;
    padding: 0;
}
.mp-purchases-section .mp-user-link {
    color: #93c5fd;
}
/* Pay All button */
.mp-pay-all-btn {
    margin-left: 12px;
    font-size: 0.8rem;
    padding: 4px 14px;
    border-radius: 6px;
    background: var(--accent, #6366f1);
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: opacity .2s;
}
.mp-pay-all-btn:hover { opacity: 0.85; }
.mp-pay-all-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mp-order-card {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mp-order-thumb {
    width: 36px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}
.mp-user-link {
    color: var(--accent, #60a5fa);
    text-decoration: none;
}
.mp-user-link:hover {
    text-decoration: underline;
}
@media (max-width: 640px) {
    .mp-orders-table { font-size: 0.78rem; }
    .mp-orders-table th, .mp-orders-table td { padding: 8px 6px; }
    .mp-order-thumb { width: 28px; height: 38px; }
}

.mp-listing-row.status-cancelled td,
.mp-listing-row.status-expired td,
.mp-listing-row.status-sold td {
    opacity: 0.6;
}

/* ═══ MODALS ═══ */
.mp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
/* Stacked modals need higher z-index */
#priceLevelModal { z-index: 1010; }
#sellModal { z-index: 1020; }
#offerModal { z-index: 1020; }
.mp-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
}
.mp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.mp-modal-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.mp-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.mp-modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.mp-order-summary {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 12px;
    margin: 12px 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ═══ BUTTONS (shared) ═══ */
.btn-accent {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-accent:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}
.btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s;
    text-decoration: none;
}
.btn-outline:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.btn-sm {
    padding: 5px 10px;
    font-size: 0.78rem;
}

/* ═══ ADMIN CSS ADDITIONS ═══ */
.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}
.admin-form-row {
    margin-bottom: 10px;
}
.admin-form-row label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.admin-input,
.admin-select,
.admin-textarea {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-sans);
}
.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.admin-input-sm,
.admin-select-sm {
    padding: 4px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: var(--font-sans);
}
.admin-btn-sm {
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s;
}
.admin-btn-sm:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.admin-btn-sm.admin-btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.admin-btn-sm.admin-btn-danger {
    border-color: rgba(239,68,68,0.3);
    color: #ef4444;
}
.admin-btn-sm.admin-btn-danger:hover {
    background: rgba(239,68,68,0.15);
}
.admin-details {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 12px 16px;
}
.admin-details[open] {
    border-color: var(--accent);
}

/* Admin order inline edit form */
.admin-order-actions {
    position: relative;
}
.admin-order-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
}

/* Admin stats row (payments page) */
.admin-stats-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.admin-stat-card {
    flex: 1;
    min-width: 120px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
}
.admin-stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
}
.admin-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.stat-pending .admin-stat-value { color: #f59e0b; }
.stat-confirmed .admin-stat-value { color: #3b82f6; }
.stat-delivered .admin-stat-value { color: #22c55e; }
.stat-revenue .admin-stat-value { color: #fbbf24; }

/* Admin filter buttons */
.admin-filter-btn {
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}
.admin-filter-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.admin-filter-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* Admin status badges */
.admin-status-active { color: #22c55e; }
.admin-status-pending { color: #f59e0b; }
.admin-status-suspended { color: #ef4444; }
.admin-status-confirmed { color: #3b82f6; }
.admin-status-shipped { color: #8b5cf6; }
.admin-status-delivered { color: #22c55e; }
.admin-status-cancelled { color: #6e7681; }
.admin-status-refunded { color: #ef4444; }
.row-dim { opacity: 0.5; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .marketplace-page { padding: 16px 12px 100px; }
    .mp-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .ob-grid { grid-template-columns: 1fr; }
    .mp-products-grid { grid-template-columns: 1fr; }
    .mp-form-grid { grid-template-columns: 1fr; }
    .mp-filters { flex-direction: column; }
    .mp-filter-group { min-width: 100%; }
    .admin-form-grid { grid-template-columns: 1fr; }
    .admin-stats-row { gap: 8px; }
    .admin-stat-card { min-width: 80px; padding: 10px; }
    .admin-stat-value { font-size: 1.05rem; }
    .ob-card { flex-direction: column; gap: 12px; }
    .ob-card-left { width: 100%; max-width: 120px; margin: 0 auto; }
    .ob-card-book { flex-direction: row; width: 100%; }
    .ob-card-actions { width: 100%; text-align: center; }
    .ob-book { flex-direction: column; }
    .ob-book-side { min-width: 100%; }
    .pl-entry { flex-direction: column; gap: 8px; }
    .pl-actions { justify-content: flex-start; }
}

/* ═══ ORDER BOOK — Grid of cards with sell/buy summary ═══ */
.ob-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ob-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ob-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.ob-card-left {
    flex-shrink: 0;
    width: 60px;
}
.ob-card-img {
    width: 60px;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--surface);
}
.ob-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border);
}
.ob-card-center {
    flex: 1;
    min-width: 0;
}
.ob-card-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ob-card-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.ob-chapter { color: var(--text-dim); }
.ob-ink { color: var(--text-dim); }

.ob-card-book {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.ob-sell-side, .ob-buy-side {
    text-align: center;
    padding: 8px 16px;
    border-radius: 8px;
    min-width: 100px;
}
.ob-sell-side {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.ob-buy-side {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
}
.ob-side-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.ob-sell-side .ob-side-label { color: #ef4444; }
.ob-buy-side .ob-side-label { color: #22c55e; }
.ob-price {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
}
.ob-price small {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-dim);
}
.ob-price.ob-none {
    color: var(--text-dim);
    font-weight: 400;
}
.ob-qty {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 2px;
}
.ob-card-actions {
    flex-shrink: 0;
}

/* ═══ ORDER BOOK MODAL ═══ */
.mp-modal-wide {
    max-width: 700px;
    width: 95%;
}
.ob-loading, .ob-error {
    text-align: center;
    padding: 24px;
    color: var(--text-secondary);
}
.ob-error { color: #ef4444; }

.ob-book {
    display: flex;
    gap: 16px;
}
.ob-book-side {
    flex: 1;
    min-width: 0;
}
.ob-book-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px 8px 0 0;
    font-size: 0.85rem;
    font-weight: 700;
}
.ob-book-sell .ob-book-header {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}
.ob-book-buy .ob-book-header {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}
.ob-header-count {
    font-weight: 400;
    font-size: 0.75rem;
    opacity: 0.8;
}
.ob-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.ob-table thead th {
    padding: 6px 10px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}
.ob-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.ob-table tbody tr:hover {
    background: rgba(255,255,255,0.03);
}
.ob-cell-price {
    font-weight: 700;
    color: var(--text-primary);
    padding: 8px 10px;
}
.ob-cell-price small {
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--text-dim);
}
.ob-cell-qty {
    padding: 8px 10px;
    color: var(--text-secondary);
    text-align: center;
}
.ob-row-sell .ob-cell-price { color: #ef4444; }
.ob-row-buy .ob-cell-price { color: #22c55e; }
.ob-no-entries {
    text-align: center;
    padding: 20px;
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* ═══ PRICE LEVEL DETAIL MODAL ═══ */
#priceLevelModal .mp-modal {
    max-width: 640px;
    width: 95%;
}
#priceLevelModal .mp-modal-header h3 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pl-title-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
}
.pl-title-sub {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Card preview in price-level modal */
.pl-layout {
    display: flex;
    gap: 20px;
}
.pl-card-preview {
    flex-shrink: 0;
    width: 120px;
}
.pl-card-img {
    width: 120px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    transition: transform 0.2s;
}
.pl-card-img:hover {
    transform: scale(1.05);
}
.pl-layout .pl-list {
    flex: 1;
    min-width: 0;
}

.pl-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pl-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.2s, transform 0.15s;
    animation: plEntryIn 0.25s ease both;
}
@keyframes plEntryIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pl-entry:hover {
    border-color: var(--accent);
    transform: translateX(2px);
}
.pl-user {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 120px;
}
.pl-user-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.pl-user-meta {
    display: flex;
    gap: 6px;
    align-items: center;
}
.pl-username {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pl-username:hover { text-decoration: underline; }
.pl-rating {
    font-size: 0.68rem;
    color: #fbbf24;
    font-weight: 600;
}
.pl-sales {
    font-size: 0.65rem;
    color: var(--text-dim);
}
.pl-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-width: 0;
}
.pl-desc {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pl-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Condition Grade Badges ─────────────────────────── */
.pl-cond-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1.4;
}
.pl-cond-mint {
    background: rgba(34,197,94,0.12);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.25);
}
.pl-cond-near-mint {
    background: rgba(74,222,128,0.1);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.2);
}
.pl-cond-lightly-played {
    background: rgba(251,191,36,0.1);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.2);
}
.pl-cond-moderately-played {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.2);
}
.pl-cond-heavily-played {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.2);
}
.pl-cond-damaged {
    background: rgba(220,38,38,0.1);
    color: #dc2626;
    border: 1px solid rgba(220,38,38,0.2);
}

/* ── Price-level modal responsive ─────────────────── */
@media (max-width: 600px) {
    .pl-layout { flex-direction: column; gap: 12px; }
    .pl-card-preview { width: 80px; align-self: center; }
    .pl-card-img { width: 80px; }
    .pl-entry { flex-wrap: wrap; gap: 8px; }
    .pl-user { min-width: 100px; }
    .pl-actions { width: 100%; justify-content: flex-end; }
}

/* ═══ BUY ORDER FORM HINT ═══ */
.mp-form-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 16px;
}

/* ═══ COPY INFO BUTTON (seller pending orders) ═══ */
.mp-copy-info-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    padding: 3px 5px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    opacity: 0.6;
    color: var(--text-dim);
    transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.mp-copy-info-btn svg { display: block; }
.mp-copy-info-btn:hover { opacity: 1; background: var(--bg-card); color: var(--text); }
.mp-copy-info-btn.copied { opacity: 1; color: #22c55e; }

/* ═══ CARD HOVER PREVIEW — "Card in hand" effect ═══ */
.mp-card-preview {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 240px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(var(--accent-rgb, 100,180,255), 0.3);
    transform: rotate(-3deg) scale(0);
    transform-origin: top left;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
    opacity: 0;
}
.mp-card-preview.visible {
    transform: rotate(-3deg) scale(1);
    opacity: 1;
}
.mp-card-preview img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
}
@media (max-width: 768px) {
    .mp-card-preview { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HISTORY TAB
   ═══════════════════════════════════════════════════════════════ */

/* ─── Filter pills ─── */
.mp-history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.mp-history-filter {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-secondary);
    background: var(--bg-secondary);
    color: var(--text-dim);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.mp-history-filter:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.mp-history-filter.active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

/* ─── History list ─── */
.mp-history-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mp-history-row {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    overflow: hidden;
    transition: border-color 0.2s;
}
.mp-history-row:hover { border-color: var(--accent-primary, #fbbf24); }

/* Status accent left border */
.mp-history-row.mp-h-completed { border-left: 3px solid #22c55e; }
.mp-history-row.mp-h-cancelled { border-left: 3px solid #ef4444; }
.mp-history-row.mp-h-disputed { border-left: 3px solid #f59e0b; }
.mp-history-row.mp-h-shipped { border-left: 3px solid #8b5cf6; }
.mp-history-row.mp-h-active { border-left: 3px solid #3b82f6; }
.mp-history-row.mp-h-pending { border-left: 3px solid #6b7280; }

/* ─── Summary row (clickable) ─── */
.mp-history-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.mp-history-summary:hover { background: rgba(255,255,255,0.03); }

.mp-history-thumb {
    width: 40px;
    height: 56px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
}
.mp-history-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    font-size: 1.4rem;
}
.mp-history-main { flex: 1; min-width: 0; }
.mp-history-card-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-history-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.mp-history-role-badge {
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.68rem;
}
.mp-role-buyer { background: rgba(59,130,246,0.15); color: #60a5fa; }
.mp-role-seller { background: rgba(34,197,94,0.15); color: #22c55e; }

.mp-history-price {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent-primary);
    flex-shrink: 0;
    min-width: 70px;
    text-align: right;
}
.mp-history-progress {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.mp-history-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 70px;
    text-align: right;
}
.mp-history-chevron {
    font-size: 1rem;
    color: var(--text-muted);
    transition: transform 0.25s;
    flex-shrink: 0;
}
.mp-history-row.mp-expanded .mp-history-chevron { transform: rotate(180deg); }

/* ─── Detail panel ─── */
.mp-history-detail {
    border-top: 1px solid var(--border-secondary);
    background: rgba(0,0,0,0.15);
}
.mp-history-detail-inner {
    display: flex;
    gap: 24px;
    padding: 20px;
    max-width: 800px;
}
.mp-history-detail-card {
    flex-shrink: 0;
    position: relative;
}
.mp-history-card-img {
    width: 180px;
    height: auto;
    border-radius: 10px;
    cursor: zoom-in;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.mp-history-card-img:hover {
    transform: scale(4);
    transform-origin: top left;
    z-index: 100;
    position: relative;
    box-shadow: 0 20px 80px rgba(0,0,0,0.8);
}
.mp-history-detail-info { flex: 1; min-width: 0; }
.mp-history-detail-info h4 {
    margin: 0 0 12px;
    font-size: 1.1rem;
    color: var(--text-primary);
}
.mp-history-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.mp-history-detail-table td {
    padding: 5px 10px 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: var(--text-primary);
}
.mp-history-detail-table td:first-child {
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
    width: 90px;
}
.mp-history-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

/* ─── History responsive ─── */
@media (max-width: 768px) {
    .mp-history-summary {
        flex-wrap: wrap;
        gap: 8px;
    }
    .mp-history-progress { order: 10; width: 100%; }
    .mp-history-price { order: 3; }
    .mp-history-date { order: 4; }
    .mp-history-chevron { order: 5; }
    .mp-history-detail-inner {
        flex-direction: column;
        align-items: center;
    }
    .mp-history-card-img {
        width: 140px;
    }
    .mp-history-card-img:hover {
        transform: scale(2.5);
        transform-origin: center top;
    }
}

/* ── See More / Limit ── */
.mp-limited > *:nth-child(n+11) { display: none; }
.mp-see-more-btn {
    display: block;
    margin: 12px auto 0;
    padding: 6px 20px;
    background: var(--surface-2, #2a2a3e);
    color: var(--text-dim, #aaa);
    border: 1px solid var(--border, #3a3a50);
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.mp-see-more-btn:hover {
    background: var(--accent, #6366f1);
    color: #fff;
}