/* Storefront wallet: semantic colors follow every visitor palette. */
.webshop-wallet{padding:20px;margin:0 0 22px;border:1px solid var(--gb-line);border-radius:14px;background:var(--gb-panel);color:var(--gb-text)}
.webshop-wallet-heading{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.webshop-wallet-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--gb-line);border-radius:12px;background:var(--gb-panel-2);color:var(--gb-cyan);flex-shrink:0}
.webshop-wallet-heading h3{margin:0 0 4px;color:var(--gb-text);font-size:16px;font-weight:700}
.webshop-wallet-heading p{margin:0;color:var(--gb-muted);font-size:12px}
.webshop-wallet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin:0}
.webshop-wallet-currency{min-width:0;padding:14px 16px;border:1px solid var(--gb-line);border-radius:10px;background:var(--gb-panel-2)}
.webshop-wallet-currency dt{font-size:11px;font-weight:600;color:var(--gb-muted);overflow-wrap:anywhere}
.webshop-wallet-currency dd{margin:6px 0 0;font-size:24px;line-height:1.3;font-weight:800;font-variant-numeric:tabular-nums;color:var(--gb-cyan);overflow-wrap:anywhere}
@media(max-width:480px){.webshop-wallet{padding:15px}.webshop-wallet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.webshop-wallet-currency{padding:12px}.webshop-wallet-currency dd{font-size:20px}}
/* Universal MU Online Item Market - Theme & Grid Stylesheet */

.mu-market-wrapper {
    --market-accent: var(--gb-cyan, var(--theme-color-38bdf8ff,#38bdf8));
    --market-blue: var(--gb-blue, var(--theme-color-168cffff,#168cff));
    --market-panel: var(--gb-panel, var(--theme-color-0e172aff,#0e172a));
    --market-panel-2: var(--gb-panel-2, var(--theme-color-1e293bff,#1e293b));
    --market-line: var(--gb-line, var(--theme-color-334155ff,#334155));
    --market-text: var(--gb-text, var(--theme-color-f8fafcff,#f8fafc));
    --market-muted: var(--gb-muted, var(--theme-color-94a3b8ff,#94a3b8));
    --market-bg: var(--gb-bg, var(--theme-color-080d1aff,#080d1a));
    margin-bottom: 30px;
    color: var(--market-text);
}

/* Hero Section */
.mu-market-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--market-panel) 0%, var(--market-panel-2) 100%);
    border: 1px solid var(--market-line);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px var(--theme-color-00000066,rgba(0, 0, 0, 0.4));
    gap: 20px;
    flex-wrap: wrap;
}

.mu-market-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 9999px;
    background: var(--market-bg, var(--gb-bg, var(--theme-color-080d1aff,#080d1a)));
    color: var(--market-accent, var(--gb-cyan, var(--theme-color-38bdf8ff,#38bdf8)));
    border: 1px solid var(--market-line, var(--gb-line, var(--theme-color-334155ff,#334155)));
    box-shadow: 0 2px 6px var(--theme-color-00000059,rgba(0, 0, 0, 0.35));
    margin-bottom: 8px;
}

.mu-market-hero-content h2 {
    margin: 0 0 6px 0;
    font-size: 1.6rem;
    color: var(--market-text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.mu-market-hero-content p {
    margin: 0;
    color: var(--market-muted);
    font-size: 0.95rem;
    max-width: 650px;
}

.mu-status-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
}

.mu-status-ready {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #4ade80;
}
.mu-status-ready i { font-size: 1.4rem; color: #22c55e; }

.mu-status-warning {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.35);
    color: #fde047;
}
.mu-status-warning i { font-size: 1.4rem; color: #eab308; }

.mu-status-box strong { display: block; font-size: 0.95rem; line-height: 1.2; }
.mu-status-box small { opacity: 0.85; }

/* Navigation Tabs */
.mu-market-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid var(--market-line);
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.mu-market-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    color: var(--market-muted);
    background: var(--market-bg);
    border: 1px solid var(--market-line);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.mu-market-tab:hover {
    color: var(--market-text);
    background: var(--market-panel-2);
    text-decoration: none;
}

.mu-market-tab.active {
    color: var(--market-accent);
    background: var(--market-panel-2);
    border-color: var(--market-accent);
    border-bottom: 2px solid var(--market-panel-2);
    margin-bottom: -2px;
}

/* Filter Bar */
/* Search Engine Form Container */
.mu-market-search-engine {
    background: var(--market-panel);
    border: 1px solid var(--market-line);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 28px;
    box-shadow: 0 4px 18px var(--theme-color-00000066,rgba(0, 0, 0, 0.4));
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Primary Search Row: Name, Category, Currency, Sort */
.mu-search-primary-row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr 1.2fr;
    gap: 16px;
    align-items: flex-end;
}

@media (max-width: 991px) {
    .mu-search-primary-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .mu-search-primary-row {
        grid-template-columns: 1fr;
    }
}

/* Secondary Search Row: Level Min, Level Max, Luck, Skill, Ancient, Quality */
.mu-search-secondary-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    align-items: flex-end;
    padding-top: 14px;
    border-top: 1px solid var(--theme-color-1e293bff,#1e293b);
}

@media (max-width: 1199px) {
    .mu-search-secondary-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .mu-search-secondary-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .mu-search-secondary-row {
        grid-template-columns: 1fr;
    }
}

.mu-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mu-filter-group label {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--theme-color-94a3b8ff,#94a3b8);
    letter-spacing: 0.05em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mu-input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.mu-input-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--theme-color-94a3b8ff,#94a3b8);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s ease;
}

.mu-input-clear:hover {
    color: #f87171;
}

/* Excellent Options Accordion Panel */
.mu-exc-panel {
    background: var(--theme-color-0b1220ff,#0b1220);
    border: 1px solid var(--theme-color-1e293bff,#1e293b);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.mu-exc-panel.open {
    border-color: #22c55e;
}

.mu-exc-panel-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: var(--theme-color-111a2dff,#111a2d);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.mu-exc-panel-toggle:hover {
    background: var(--theme-color-16223aff,#16223a);
}

.mu-exc-toggle-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.92rem;
    color: #22c55e;
}

.mu-badge-counter {
    background: #22c55e;
    color: var(--theme-color-0b1220ff,#0b1220);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
}

.mu-toggle-arrow {
    color: var(--theme-color-94a3b8ff,#94a3b8);
    font-size: 0.9rem;
}

.mu-exc-panel-body {
    padding: 16px 20px;
    border-top: 1px solid var(--theme-color-1e293bff,#1e293b);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mu-exc-controls-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--theme-color-1e293bff,#1e293b);
}

.mu-exc-ctrl-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 200px;
}

.mu-exc-ctrl-group label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--theme-color-94a3b8ff,#94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.mu-exc-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 991px) {
    .mu-exc-categories-grid {
        grid-template-columns: 1fr;
    }
}

.mu-exc-cat-card {
    background: var(--theme-color-080d1aff,#080d1a);
    border: 1px solid var(--theme-color-1e293bff,#1e293b);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mu-exc-cat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-color-38bdf8ff,#38bdf8);
    border-bottom: 1px solid var(--theme-color-1e293bff,#1e293b);
    padding-bottom: 8px;
}

.mu-exc-cat-header h6 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--theme-color-e2e8f0ff,#e2e8f0);
}

.mu-exc-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mu-exc-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    background: var(--theme-color-0e1626ff,#0e1626);
    border: 1px solid var(--theme-color-1e293bff,#1e293b);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 0;
    user-select: none;
}

.mu-exc-checkbox-label:hover {
    border-color: var(--theme-color-38bdf8ff,#38bdf8);
    background: var(--theme-color-142035ff,#142035);
}

.mu-exc-checkbox-label.checked {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

.mu-exc-checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    cursor: pointer;
    accent-color: #22c55e;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.mu-exc-checkbox-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.mu-exc-checkbox-text strong {
    font-size: 0.82rem;
    color: #22c55e;
}

.mu-exc-checkbox-text small {
    font-size: 0.72rem;
    color: var(--theme-color-94a3b8ff,#94a3b8);
}

/* Action Buttons & Indicator Row */
.mu-search-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--theme-color-1e293bff,#1e293b);
}

.mu-active-filters-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mu-filter-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 14px;
    background: var(--theme-frame-control-start, var(--theme-color-38bdf826,rgba(56, 189, 248, 0.15)));
    color: var(--market-accent);
    border: 1px solid var(--theme-frame-control-line, var(--theme-color-38bdf859,rgba(56, 189, 248, 0.35)));
    border-radius: 999px;
}

.mu-search-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
}

/* Item Card Grid */
.mu-market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.mu-item-card {
    background: var(--market-panel);
    border: 1px solid var(--market-line);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mu-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px var(--theme-frame-card-glow, var(--theme-color-00000080,rgba(0, 0, 0, 0.5)));
    border-color: var(--market-accent);
}

/* Quality Modifiers */
.mu-item-card.quality-excellent {
    border-color: rgba(34, 197, 94, 0.35);
}
.mu-item-card.quality-excellent:hover {
    border-color: #22c55e;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2);
}

.mu-item-card.quality-ancient {
    border-color: var(--theme-color-38bdf859,rgba(56, 189, 248, 0.35));
}
.mu-item-card.quality-ancient:hover {
    border-color: var(--theme-color-38bdf8ff,#38bdf8);
    box-shadow: 0 8px 24px var(--theme-color-38bdf833,rgba(56, 189, 248, 0.2));
}

.mu-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mu-card-quality {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--theme-color-1e293bff,#1e293b);
    color: var(--theme-color-94a3b8ff,#94a3b8);
}

.quality-excellent .mu-card-quality {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.quality-ancient .mu-card-quality {
    background: var(--theme-color-38bdf826,rgba(56, 189, 248, 0.15));
    color: var(--theme-color-38bdf8ff,#38bdf8);
    border: 1px solid var(--theme-color-38bdf84d,rgba(56, 189, 248, 0.3));
}

.mu-card-private {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(234, 179, 8, 0.15);
    color: #facc15;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

/* Visual Box & Tooltip */
.mu-card-visual {
    background: var(--theme-color-080d1aff,#080d1a);
    border: 1px solid var(--theme-color-1e293bff,#1e293b);
    border-radius: 8px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    margin-bottom: 12px;
}

.mu-item-icon-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mu-item-fallback-icon {
    font-size: 2.8rem;
    color: var(--theme-color-334155ff,#334155);
    transition: color 0.2s ease;
}

.mu-item-img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px var(--theme-color-000000a6,rgba(0, 0, 0, 0.65)));
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Any picture inside a card visual is bounded, so a high definition upload can
   never overflow the card, whichever module rendered the markup. */
.mu-card-visual > img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
}

.mu-card-visual:hover .mu-item-img {
    transform: scale(1.08);
    filter: drop-shadow(0 6px 14px var(--theme-color-38bdf866,rgba(56, 189, 248, 0.4)));
}

.quality-excellent .mu-card-visual:hover .mu-item-img {
    filter: drop-shadow(0 6px 14px rgba(34, 197, 94, 0.4));
}

.quality-ancient .mu-card-visual:hover .mu-item-img {
    filter: drop-shadow(0 6px 14px var(--theme-color-38bdf880,rgba(56, 189, 248, 0.5)));
}

.mu-item-lvl {
    position: absolute;
    bottom: -8px;
    right: -10px;
    background: #eab308;
    color: var(--theme-color-0f172aff,#0f172a);
    font-weight: 800;
    font-size: 0.75rem;
    padding: 1px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 6px var(--theme-color-00000080,rgba(0, 0, 0, 0.5));
}

/* Authentic MU Online Floating Tooltip */
.mu-item-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--theme-color-080c14f5,rgba(8, 12, 20, 0.96));
    border: 1px solid var(--market-accent);
    box-shadow: 0 8px 24px var(--theme-color-000000cc,rgba(0, 0, 0, 0.8)), 0 0 12px var(--theme-frame-glow, var(--theme-color-38bdf84d,rgba(56, 189, 248, 0.3)));
    border-radius: 6px;
    padding: 12px 16px;
    width: max-content;
    max-width: 290px;
    z-index: 9999;
    text-align: center;
    pointer-events: none;
}

.mu-card-visual:hover .mu-item-tooltip,
.mu-card-visual:focus .mu-item-tooltip,
.mu-grid-item:hover .mu-item-tooltip,
.mu-grid-item:focus .mu-item-tooltip {
    display: block;
}

.mu-tt-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.3;
}

.mu-tt-img {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 8px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px var(--theme-color-000000a6,rgba(0, 0, 0, 0.65)));
}

.mu-tt-title.normal { color: var(--theme-color-f8fafcff,#f8fafc); }
.mu-tt-title.excellent { color: #00ff88; text-shadow: 0 0 8px rgba(0, 255, 136, 0.6); }
.mu-tt-title.ancient { color: var(--theme-color-38bdf8ff,#38bdf8); text-shadow: 0 0 8px var(--theme-color-38bdf899,rgba(56, 189, 248, 0.6)); }

.mu-tt-durability { font-size: 0.8rem; color: var(--theme-color-94a3b8ff,#94a3b8); margin-bottom: 4px; }
.mu-tt-option { font-size: 0.8rem; color: var(--theme-color-8fe1ffff,#8fe1ff); margin-bottom: 2px; }
.mu-tt-excellent { font-size: 0.8rem; color: #00ff88; margin-bottom: 2px; font-weight: 600; }
.mu-tt-380 { font-size: 0.8rem; color: #d946ef; margin-bottom: 2px; font-weight: 600; }
.mu-tt-harmony { font-size: 0.8rem; color: #facc15; margin-bottom: 2px; font-weight: 600; }
.mu-tt-sockets { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--theme-color-94a3b840,rgba(148, 163, 184, 0.25)); text-align: left; }
.mu-tt-socket { font-size: 0.8rem; margin-bottom: 2px; display: flex; align-items: center; gap: 4px; }
.mu-socket-icon { font-size: 0.85rem; flex: none; }
.mu-socket-text { font-size: 0.78rem; }
.mu-tt-serial { font-size: 0.75rem; color: #ffbb33; margin-top: 6px; border-top: 1px solid var(--theme-color-1e293bff,#1e293b); padding-top: 4px; }

/* Item Card Body */
.mu-card-info {
    flex: 1 1 auto;
    margin-bottom: 12px;
}

.mu-item-name {
    margin: 0 0 6px 0;
    font-size: 1rem;
    color: var(--theme-color-f1f5f9ff,#f1f5f9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mu-item-submeta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--theme-color-64748bff,#64748b);
}

/* Card Footer & Price */
.mu-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--theme-color-1e293bff,#1e293b);
    padding-top: 12px;
}

.mu-card-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.mu-price-amount {
    font-size: 1.15rem;
    font-weight: 800;
    color: #facc15;
}

.mu-price-curr {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--theme-color-94a3b8ff,#94a3b8);
}

.mu-btn-own {
    font-size: 0.8rem;
    color: var(--theme-color-94a3b8ff,#94a3b8);
    background: var(--theme-color-1e293bff,#1e293b);
    padding: 4px 10px;
    border-radius: 4px;
}

/* Empty State */
.mu-market-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--theme-color-0f172aff,#0f172a);
    border: 1px solid var(--theme-color-1e293bff,#1e293b);
    border-radius: 10px;
    color: var(--theme-color-94a3b8ff,#94a3b8);
}

.mu-empty-icon {
    font-size: 3.5rem;
    color: var(--theme-color-334155ff,#334155);
    margin-bottom: 16px;
}

.mu-market-empty h4 {
    color: var(--theme-color-f8fafcff,#f8fafc);
    margin-bottom: 8px;
}

/* Pagination */
.mu-page-info-bar {
    text-align: center;
    margin-top: 20px;
    font-size: 0.875rem;
    color: var(--gb-muted, var(--theme-color-94a3b8ff,#94a3b8));
}

.mu-page-info-bar strong {
    color: var(--gb-text, var(--theme-color-f8fafcff,#f8fafc));
}

.mu-market-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    margin-bottom: 24px;
}

.mu-page-info {
    font-size: 0.9rem;
    color: var(--theme-color-94a3b8ff,#94a3b8);
}

.mu-pagination-numbers {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.mu-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gb-text, var(--theme-color-f8fafcff,#f8fafc));
    background: var(--gb-panel-2, var(--theme-color-ffffffd,rgba(255, 255, 255, 0.05)));
    border: 1px solid var(--gb-line, var(--theme-color-ffffff1f,rgba(255, 255, 255, 0.12)));
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: none;
}

.mu-page-btn:hover {
    color: var(--theme-color-ffffffff,#fff);
    background: var(--gb-line, var(--theme-color-ffffff2e,rgba(255, 255, 255, 0.18)));
    border-color: var(--gb-cyan, #00ffff);
    text-decoration: none;
}

.mu-page-btn.active {
    color: var(--theme-color-000000ff,#000);
    background: var(--gb-cyan, #00ffff);
    border-color: var(--gb-cyan, #00ffff);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.35);
    font-weight: 700;
    pointer-events: none;
}

.mu-page-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    color: var(--gb-muted, var(--theme-color-94a3b8ff,#94a3b8));
    font-size: 1rem;
    font-weight: 700;
    user-select: none;
}

/* TAB 2: SELL LAYOUT (WAREHOUSE GRID) */
.mu-sell-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 991px) {
    .mu-sell-layout {
        grid-template-columns: 1fr;
    }
}

.mu-warehouse-container {
    background: var(--market-panel);
    border: 1px solid var(--market-line);
    border-radius: 10px;
    padding: 20px;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

.mu-warehouse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mu-warehouse-header h4 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--theme-color-f8fafcff,#f8fafc);
}

.mu-warehouse-hint {
    font-size: 0.8rem;
    color: var(--market-accent);
}

/* Authentic MU 8x15 Warehouse Grid */
.mu-warehouse-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 8), 44px);
    grid-template-rows: repeat(var(--grid-rows, 15), 44px);
    gap: 2px;
    background: var(--market-bg);
    padding: 6px;
    border: 2px solid var(--market-line);
    border-radius: 8px;
    box-shadow: inset 0 0 12px var(--theme-color-000000cc,rgba(0, 0, 0, 0.8));
    position: relative;
    user-select: none;
    overflow: visible;
    box-sizing: border-box;
    width: fit-content;
    margin: 0 auto;
}

.mu-grid-cell {
    background: var(--theme-color-111827ff,#111827);
    border: 1px solid var(--theme-color-1f2937ff,#1f2937);
    border-radius: 3px;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.mu-grid-item {
    position: relative;
    z-index: 5;
    background: linear-gradient(135deg, var(--theme-color-1e293bff,#1e293b) 0%, var(--theme-color-0f172aff,#0f172a) 100%);
    border: 2px solid var(--theme-color-475569ff,#475569);
    border-radius: 4px;
    padding: 2px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

.mu-grid-item:hover {
    border-color: var(--market-accent);
    z-index: 10;
    box-shadow: 0 0 8px var(--theme-frame-glow, var(--theme-color-38bdf880,rgba(56, 189, 248, 0.5)));
}

.mu-grid-item.quality-excellent {
    border-color: #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, var(--theme-color-0f172aff,#0f172a) 100%);
}

.mu-grid-item.quality-ancient {
    border-color: var(--theme-color-38bdf8ff,#38bdf8);
    background: linear-gradient(135deg, var(--theme-color-38bdf826,rgba(56, 189, 248, 0.15)) 0%, var(--theme-color-0f172aff,#0f172a) 100%);
}

.mu-grid-item.selected {
    border-color: #facc15 !important;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.8) !important;
    z-index: 15;
}

.mu-grid-item.mu-ineligible {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: var(--theme-color-64748bff,#64748b);
}

.mu-grid-item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 2px;
}

.mu-grid-item-thumb {
    max-width: 75%;
    max-height: 52%;
    object-fit: contain;
    margin-bottom: 2px;
    filter: drop-shadow(0 2px 4px var(--theme-color-000000b3,rgba(0, 0, 0, 0.7)));
}

.mu-item-label {
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--theme-color-e2e8f0ff,#e2e8f0);
    max-height: 2.2em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mu-warehouse-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    font-size: 0.75rem;
    color: var(--theme-color-94a3b8ff,#94a3b8);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
}

.legend-color.quality-normal { background: var(--theme-color-475569ff,#475569); }
.legend-color.quality-excellent { background: #22c55e; }
.legend-color.quality-ancient { background: var(--theme-color-38bdf8ff,#38bdf8); }
.legend-color.mu-ineligible-sample { background: var(--theme-color-64748bff,#64748b); opacity: 0.5; }

/* Right Column: Listing Configuration Panel */
.mu-listing-panel {
    background: var(--theme-color-0f172aff,#0f172a);
    border: 1px solid var(--theme-color-1e293bff,#1e293b);
    border-radius: 10px;
    padding: 24px;
}

.mu-listing-panel h4 {
    margin: 0 0 20px 0;
    font-size: 1.2rem;
    color: var(--theme-color-f8fafcff,#f8fafc);
    border-bottom: 1px solid var(--theme-color-1e293bff,#1e293b);
    padding-bottom: 12px;
}

/* Form Controls & Selectors */
.mu-listing-panel .form-group {
    margin-bottom: 18px;
}

.mu-listing-panel label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--theme-color-94a3b8ff,#94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.mu-listing-panel .form-control,
.mu-market-wrapper select.form-control,
.mu-market-wrapper input.form-control {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 8px 14px !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    background-color: var(--market-bg) !important;
    border: 1px solid var(--market-line);
    border-radius: 6px !important;
    color: var(--market-text) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.mu-market-wrapper select.form-control {
    min-height: 44px !important;
    height: 44px !important;
    line-height: 1.4 !important;
    padding: 8px 38px 8px 14px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--market-bg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px 18px !important;
}

.mu-market-wrapper select.form-control option {
    background-color: var(--market-panel) !important;
    color: var(--market-text) !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
}

.mu-listing-panel .form-control:focus,
.mu-market-wrapper .form-control:focus {
    border-color: var(--market-accent) !important;
    box-shadow: 0 0 0 3px var(--theme-frame-glow, var(--theme-color-38bdf826,rgba(56, 189, 248, 0.15))) !important;
    background-color: var(--market-panel-2) !important;
}

.mu-listing-panel .form-text {
    font-size: 0.75rem;
    color: var(--theme-color-64748bff,#64748b);
    margin-top: 6px;
    display: block;
}

.mu-no-selection {
    text-align: center;
    padding: 40px 20px;
    color: var(--theme-color-64748bff,#64748b);
}

.mu-no-selection i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    display: block;
}

.mu-ineligible-warning {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
    padding: 14px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.mu-selected-item-preview {
    background: var(--theme-color-080d1aff,#080d1a);
    border: 1px solid var(--theme-color-1e293bff,#1e293b);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.mu-selected-item-imgbox {
    width: 48px;
    height: 48px;
    background: var(--theme-color-0f172aff,#0f172a);
    border: 1px solid var(--theme-color-334155ff,#334155);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mu-selected-item-imgbox img {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}

.mu-selected-item-text {
    flex: 1;
    min-width: 0;
}

.mu-selected-item-preview strong {
    display: block;
    font-size: 1.05rem;
    color: var(--theme-color-f8fafcff,#f8fafc);
    margin-bottom: 4px;
}

.mu-selected-item-preview small {
    color: var(--theme-color-94a3b8ff,#94a3b8);
    font-family: monospace;
}

.mu-payout-box {
    background: var(--theme-color-1e293bff,#1e293b);
    border: 1px solid var(--theme-color-334155ff,#334155);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 20px 0;
}

.mu-payout-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--theme-color-94a3b8ff,#94a3b8);
    margin-bottom: 6px;
}

.mu-payout-total {
    border-top: 1px solid var(--theme-color-334155ff,#334155);
    padding-top: 8px;
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 1rem;
    color: var(--theme-color-f8fafcff,#f8fafc);
}

.mu-price-highlight {
    color: #facc15;
    font-weight: 700;
}

.mu-submit-disabled-notice {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #fde047;
    font-size: 0.85rem;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 12px;
}

/* TAB 3: MY LISTINGS & TABLES */
.mu-history-card {
    background: var(--market-panel);
    border: 1px solid var(--market-line);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
}

.mu-history-card h3 {
    margin: 0 0 16px 0;
    font-size: 1.15rem;
    color: var(--market-text);
}

.mu-card-expired {
    border-color: rgba(239, 68, 68, 0.35);
}

.mu-history-empty {
    color: var(--market-muted);
    font-style: italic;
    margin: 0;
}

.mu-market-table {
    margin-bottom: 0;
    color: var(--theme-color-cbd5e1ff,#cbd5e1);
}

.mu-market-table th {
    border-top: none;
    border-bottom: 2px solid var(--market-line);
    color: var(--market-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 14px;
}

.mu-market-table td {
    border-top: 1px solid var(--market-line);
    padding: 12px 14px;
    vertical-align: middle;
}

.mu-table-item-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mu-table-thumb {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    background: var(--theme-color-080d1aff,#080d1a);
    border: 1px solid var(--theme-color-1e293bff,#1e293b);
    padding: 2px;
    flex-shrink: 0;
}

.mu-table-item {
    font-weight: 600;
}
.mu-table-item.quality-excellent { color: #00ff88; }
.mu-table-item.quality-ancient { color: var(--theme-color-38bdf8ff,#38bdf8); }

/* Modal Dialog */
.mu-market-modal {
    border: none;
    border-radius: 12px;
    padding: 0;
    background: transparent;
    max-width: 500px;
    width: 90%;
}

.mu-market-modal::backdrop {
    background: var(--theme-color-000000bf,rgba(0, 0, 0, 0.75));
    backdrop-filter: blur(3px);
}

.mu-modal-content {
    background: var(--theme-color-0f172aff,#0f172a);
    border: 1px solid var(--theme-color-334155ff,#334155);
    border-radius: 12px;
    box-shadow: 0 20px 40px var(--theme-color-000000b3,rgba(0, 0, 0, 0.7));
    color: var(--theme-color-f8fafcff,#f8fafc);
    overflow: hidden;
}

.mu-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--theme-color-1e293bff,#1e293b);
    border-bottom: 1px solid var(--theme-color-334155ff,#334155);
}

.mu-modal-header h3 {
    margin: 0;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mu-modal-close {
    background: none;
    border: none;
    color: var(--theme-color-94a3b8ff,#94a3b8);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}
.mu-modal-close:hover { color: var(--theme-color-f8fafcff,#f8fafc); }

.mu-modal-body {
    padding: 20px;
}

.mu-purchase-summary {
    background: var(--theme-color-080d1aff,#080d1a);
    border: 1px solid var(--theme-color-1e293bff,#1e293b);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.mu-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--theme-color-94a3b8ff,#94a3b8);
    margin-bottom: 8px;
}
.mu-summary-row:last-child { margin-bottom: 0; }
.mu-summary-row strong, .mu-summary-row span:last-child { color: var(--theme-color-f8fafcff,#f8fafc); }

.mu-modal-notice {
    display: flex;
    gap: 10px;
    background: var(--theme-frame-control-start, var(--theme-color-38bdf81a,rgba(56, 189, 248, 0.1)));
    border: 1px solid var(--theme-frame-control-line, var(--theme-color-38bdf840,rgba(56, 189, 248, 0.25)));
    border-radius: 6px;
    padding: 12px;
    font-size: 0.85rem;
    color: var(--market-text);
}
.mu-modal-notice i { font-size: 1.2rem; color: var(--market-accent); }

.mu-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    background: var(--market-panel-2);
    border-top: 1px solid var(--market-line);
}

/* Dynamic Global Floating Tooltip (Appended to <body>) */
.mu-floating-tooltip {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--theme-color-080c14f5,rgba(8, 12, 20, 0.96));
    border: 1px solid var(--market-accent);
    box-shadow: 0 8px 24px var(--theme-color-000000cc,rgba(0, 0, 0, 0.8)), 0 0 12px var(--theme-frame-glow, var(--theme-color-38bdf84d,rgba(56, 189, 248, 0.3)));
    border-radius: 6px;
    padding: 12px 16px;
    width: max-content;
    max-width: 300px;
    z-index: 999999;
    text-align: center;
    pointer-events: none;
    line-height: 1.4;
    transition: opacity 0.08s ease;
    opacity: 0;
}

.mu-floating-tooltip.visible {
    display: block;
    opacity: 1;
}

.mu-floating-tooltips-enabled .mu-item-tooltip {
    display: none !important;
}

/* Inline MU Tooltip Previews (Webshop modal, custom maker & admin simulator) */
.mu-floating-tooltips-enabled #wsModalTooltipContainer .mu-item-tooltip,
.mu-floating-tooltips-enabled #wsLiveTooltipContainer .mu-item-tooltip,
.mu-floating-tooltips-enabled .ws-inline-tooltip .mu-item-tooltip,
#wsModalTooltipContainer .mu-item-tooltip,
#wsLiveTooltipContainer .mu-item-tooltip,
.ws-inline-tooltip .mu-item-tooltip {
    display: block !important;
    position: static !important;
    transform: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 320px !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.mu-table-item-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* Compact package modules: a single item preview per independently navigable set. */
.mu-market-grid.ws-package-modules {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 14px;
}
.ws-package-module.ws-package-card { padding: 12px; min-width: 0; }
.ws-package-module .mu-card-header { gap: 8px; flex-wrap: wrap; }
.ws-package-module .mu-card-title { overflow-wrap: anywhere; }
.ws-package-module .mu-card-body > .text-muted {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ws-package-viewer { margin-top: 10px; }
.ws-package-slides .ws-bundle-item-tile {
    min-height: 100px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 12px;
    padding: 10px;
    text-align: left;
    transform: none;
}
.ws-package-slides .ws-bundle-item-tile[hidden] { display: none !important; }
.ws-package-slides .ws-bundle-item-meta { grid-column: 2; gap: 6px; justify-content: flex-start; }
.ws-package-slides .ws-bundle-item-thumb-box {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 72px;
    height: 72px;
    margin: 0;
}
.ws-package-slides .ws-bundle-item-thumb { max-width: 64px; max-height: 64px; }
.ws-package-slides .ws-bundle-item-name {
    grid-column: 2;
    align-self: center;
    font-size: 12px;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 3;
}
.ws-package-navigation { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ws-package-navigation [data-ws-package-counter] { color: var(--theme-color-94a3b8ff,#94a3b8); font-size: 12px; font-variant-numeric: tabular-nums; }
.ws-package-step {
    width: 36px;
    height: 32px;
    border: 1px solid var(--market-line);
    border-radius: 6px;
    background: var(--market-panel);
    color: var(--market-text);
    cursor: pointer;
}
.ws-package-step:hover:not(:disabled) { border-color: var(--market-accent); background: var(--market-panel-2); }
.ws-package-step:focus-visible { outline: 2px solid var(--market-accent); outline-offset: 3px; }
.ws-package-step:disabled { opacity: .35; cursor: default; }

/* Equipment Set & Bundle Card Layouts */
.ws-package-module .ws-package-footer {
    display: block;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--theme-color-1e293bff,#1e293b);
}
.ws-package-checkout {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
.ws-package-price { flex: 1 1 80px; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.ws-package-price .mu-price-highlight { display: block; font-size: 12px; }
.ws-package-old-price { display: block; color: var(--theme-color-94a3b8ff,#94a3b8); font-size: 10px; text-decoration: line-through; }
.ws-package-delivery { flex: 0 1 100px; min-width: 82px; }
.ws-package-delivery .ws-select-control {
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding: 4px 20px 4px 6px;
    font-size: 11px;
    margin: 0;
}
.ws-package-checkout .ws-package-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    min-height: 32px;
    padding: 5px 8px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.ws-package-card {
    background: linear-gradient(180deg, var(--theme-color-0b1120ff,#0b1120) 0%, var(--theme-color-0f172aff,#0f172a) 100%);
    border: 1px solid var(--theme-color-1e293bff,#1e293b);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px var(--theme-color-00000066,rgba(0, 0, 0, 0.4));
    position: relative;
}

.ws-package-card:hover {
    border-color: var(--theme-color-38bdf8ff,#38bdf8);
    box-shadow: 0 8px 24px var(--theme-color-38bdf826,rgba(56, 189, 248, 0.15));
}

.ws-bundle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.ws-bundle-item-tile {
    position: relative;
    background: var(--theme-color-0f172ad9,rgba(15, 23, 42, 0.85));
    border: 1px solid var(--theme-color-334155ff,#334155);
    border-radius: 8px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 115px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ws-bundle-item-tile:hover {
    border-color: var(--market-accent);
    background: var(--market-panel-2);
    box-shadow: 0 0 12px var(--theme-frame-glow, var(--theme-color-38bdf859,rgba(56, 189, 248, 0.35)));
    transform: translateY(-2px);
}

.ws-bundle-item-tile.quality-border-excellent {
    border-color: rgba(34, 197, 94, 0.5);
}
.ws-bundle-item-tile.quality-border-excellent:hover {
    border-color: #22c55e;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.4);
}

.ws-bundle-item-tile.quality-border-ancient {
    border-color: var(--theme-color-38bdf880,rgba(56, 189, 248, 0.5));
}
.ws-bundle-item-tile.quality-border-ancient:hover {
    border-color: var(--theme-color-38bdf8ff,#38bdf8);
    box-shadow: 0 0 14px var(--theme-color-38bdf866,rgba(56, 189, 248, 0.4));
}

.ws-bundle-item-thumb-box {
    width: 48px;
    height: 48px;
    background: var(--theme-color-020617b3,rgba(2, 6, 23, 0.7));
    border: 1px solid var(--theme-color-ffffff14,rgba(255, 255, 255, 0.08));
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px auto;
}

.ws-bundle-item-thumb {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px var(--theme-color-000000cc,rgba(0,0,0,0.8)));
}

.ws-bundle-item-name {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ws-bundle-item-meta {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 10px;
    color: var(--theme-color-94a3b8ff,#94a3b8);
    margin-bottom: 2px;
}

.ws-bundle-dim-badge {
    background: var(--theme-color-1e293bff,#1e293b);
    color: var(--theme-color-94a3b8ff,#94a3b8);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 9.5px;
}

.ws-bundle-level-badge {
    background: var(--theme-color-38bdf833,rgba(56, 189, 248, 0.2));
    color: var(--theme-color-38bdf8ff,#38bdf8);
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 9.5px;
}

/* Fallback hover tooltip for bundle items when floating tooltips script is absent */
body:not(.mu-floating-tooltips-enabled) .ws-bundle-item-tile:hover .mu-item-tooltip,
body:not(.mu-floating-tooltips-enabled) .ws-bundle-item-tile:focus .mu-item-tooltip {
    display: block !important;
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 99999 !important;
    pointer-events: none !important;
}

/* Webshop Custom Form Selectors & Controls */
.ws-form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-color-94a3b8ff,#94a3b8);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ws-select-control,
.ws-form-control {
    width: 100% !important;
    background-color: var(--theme-color-1e293bff,#1e293b) !important;
    border: 1px solid var(--theme-color-334155ff,#334155);
    border-radius: 6px !important;
    color: var(--theme-color-f8fafcff,#f8fafc) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-sizing: border-box !important;

}

.ws-select-control option {
    background-color: var(--theme-color-0f172aff,#0f172a);
    color: var(--theme-color-f8fafcff,#f8fafc);
    padding: 6px 10px;
}

/* Toggle Pills (Skill, Luck, 380) */
.ws-toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--theme-color-1e293bff,#1e293b);
    border: 1px solid var(--theme-color-334155ff,#334155);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12.5px;
    color: var(--theme-color-cbd5e1ff,#cbd5e1);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    margin: 0;
}

.ws-toggle-pill:hover {
    border-color: var(--theme-color-64748bff,#64748b);
    background: var(--theme-color-243247ff,#243247);
}

.ws-toggle-pill input[type="checkbox"] {
    accent-color: var(--market-accent);
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
}

/* Excellent Option Cards */
.ws-exc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    background: var(--theme-color-1e293b80,rgba(30, 41, 59, 0.5));
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--theme-color-1e293bff,#1e293b);
}

.ws-exc-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--theme-color-0f172acc,rgba(15, 23, 42, 0.8));
    border: 1px solid var(--theme-color-334155ff,#334155);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11.5px;
    color: var(--theme-color-cbd5e1ff,#cbd5e1);
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 0;
}

.ws-exc-card:hover {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.ws-exc-card input[type="checkbox"] {
    accent-color: #22c55e;
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

/* Webshop Catalog Card Price Container & Footer */
.ws-catalog-card-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    border-top: 1px solid var(--theme-color-1e293bff,#1e293b) !important;
    padding-top: 12px !important;
}

.ws-catalog-price-container {
    background: linear-gradient(180deg, var(--theme-color-1e293bb3,rgba(30, 41, 59, 0.7)) 0%, var(--theme-color-0f172af2,rgba(15, 23, 42, 0.95)) 100%);
    border: 1px solid var(--theme-color-334155ff,#334155);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ws-catalog-price-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ws-price-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-color-94a3b8ff,#94a3b8);
    display: flex;
    align-items: center;
    gap: 5px;
}

.ws-price-badge i {
    color: #fbbf24;
}

.ws-base-price-tag {
    font-size: 0.7rem;
    color: var(--theme-color-64748bff,#64748b);
    text-decoration: line-through;
}

.ws-catalog-price-val {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.ws-catalog-price-val .ws-price-amount {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.ws-catalog-price-val .ws-price-currency {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--theme-color-cbd5e1ff,#cbd5e1);
}

/* Webshop Catalog Card: the icon of the category next to the name of the item,
   the artwork of the item, and the price with the checkout button. */
.mu-market-card {
    background: var(--market-panel);
    border: 1px solid var(--market-line);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mu-market-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px var(--theme-frame-card-glow, var(--theme-color-00000080,rgba(0, 0, 0, 0.5)));
    border-color: var(--market-accent);
}

.mu-market-card.quality-border-excellent {
    border-color: rgba(34, 197, 94, 0.35);
}

.mu-market-card.quality-border-excellent:hover {
    border-color: #22c55e;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2);
}

.mu-market-card.quality-border-ancient {
    border-color: var(--theme-color-38bdf859,rgba(56, 189, 248, 0.35));
}

.mu-market-card.quality-border-ancient:hover {
    border-color: var(--theme-color-38bdf8ff,#38bdf8);
    box-shadow: 0 8px 24px var(--theme-color-38bdf833,rgba(56, 189, 248, 0.2));
}

/* The header of a catalog card shows the icon of the category beside the name of the item. */
.ws-catalog-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.mu-card-category-icon {
    flex: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--theme-color-1e293be6,rgba(30, 41, 59, 0.9)) 0%, var(--theme-color-0f172af2,rgba(15, 23, 42, 0.95)) 100%);
    border: 1px solid var(--market-line);
    color: var(--market-accent);
    font-size: 15px;
}

.mu-card-category-icon i {
    color: inherit;
    line-height: 1;
}

.quality-border-excellent .mu-card-category-icon {
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.35);
}

.quality-border-ancient .mu-card-category-icon {
    color: var(--theme-color-7dd3fcff,#7dd3fc);
    border-color: var(--theme-color-38bdf859,rgba(56, 189, 248, 0.35));
}

.ws-catalog-card-header .mu-card-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--theme-color-f1f5f9ff,#f1f5f9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-catalog-card-header .mu-card-title.quality-excellent {
    color: #4ade80;
}

.ws-catalog-card-header .mu-card-title.quality-ancient {
    color: var(--theme-color-7dd3fcff,#7dd3fc);
}

.ws-catalog-card-header .mu-card-dims {
    flex: none;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--theme-color-94a3b8ff,#94a3b8);
    background: var(--theme-color-1e293bff,#1e293b);
    border: 1px solid var(--theme-color-334155ff,#334155);
    border-radius: 4px;
    padding: 2px 6px;
}

/* The artwork of the item fills the card, its name already sits in the header. */
.mu-market-card .mu-card-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mu-market-card .mu-card-visual {
    width: 100%;
    height: 150px;
    margin-bottom: 0;
}

.ws-checkout-btn i {
    font-size: 0.95em;
}

/* The price and the checkout button share one row. */
.ws-catalog-card-footer {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 10px !important;
}

.ws-catalog-card-footer .ws-catalog-price-container {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}

/* The badge and the base price share the first line, the price the second. */
.ws-catalog-card-footer .ws-catalog-price-header {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    width: 100%;
}

.ws-catalog-card-footer .ws-price-badge {
    white-space: nowrap;
}

.ws-catalog-card-footer .ws-catalog-price-val {
    white-space: nowrap;
}

/* The checkout button carries the cart icon only. */
.ws-catalog-card-footer .ws-checkout-btn {
    flex: none;
    width: 46px;
    min-width: 46px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    border-radius: 6px;
}

/* Warehouse Inspector & Vault Details */
.mu-inspector-panel {
    margin-bottom: 20px;
}

.mu-inspector-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--market-bg);
    padding: 12px;
    border: 1px solid var(--market-line);
    border-radius: 8px;
    margin-bottom: 14px;
}

.mu-inspector-img-box {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--market-panel);
    border: 2px solid var(--market-accent);
    border-radius: 6px;
    flex-shrink: 0;
}

.mu-inspector-img {
    max-width: 54px;
    max-height: 54px;
    object-fit: contain;
}

.mu-inspector-title {
    margin: 0 0 4px;
    font-size: 1.1rem;
    color: var(--market-text);
    word-break: break-word;
}

.mu-inspector-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mu-inspector-badge {
    background: var(--market-panel);
    color: var(--market-text);
    border: 1px solid var(--market-line);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
}

.mu-inspector-badge-mono {
    font-family: monospace;
    letter-spacing: 0.5px;
}

.mu-inspector-tooltip-box {
    margin-bottom: 16px;
}

.mu-inspector-actions {
    display: grid;
    gap: 8px;
}

.mu-badge-in-game {
    background: var(--market-status-success, #22c55e);
    color: var(--theme-color-ffffffff,#ffffff);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

.mu-badge-secondary {
    color: var(--market-muted);
}

.mu-vault-divider {
    border: none;
    border-top: 1px solid var(--market-line);
    margin: 12px 0;
}

.mu-vault-actions {
    display: grid;
    gap: 8px;
}