:root {
        --pri: #667eea; --pri2: #764ba2;
        --gold: #f59e0b;
    }
    body { background: #f4f6fb; font-family: 'Segoe UI', system-ui, sans-serif; }
    a { text-decoration: none; }

    /* ── Market status pill ── */
    .mstatus-pill { display:inline-flex; align-items:center; gap:.45rem;
                    padding:.3rem .9rem; border-radius:50px; font-size:.78rem; font-weight:700; }
    .mstatus-pill .dot { width:8px; height:8px; border-radius:50%; }
    .mstatus-pill.open   { background:#d4edda; color:#155724; }
    .mstatus-pill.open .dot   { background:#28a745; animation:blink 1.2s infinite; }
    .mstatus-pill.closed { background:#f8d7da; color:#721c24; }
    .mstatus-pill.closed .dot { background:#dc3545; }
    .mstatus-pill.pre, .mstatus-pill.break { background:#fff3cd; color:#856404; }
    .mstatus-pill.pre .dot, .mstatus-pill.break .dot { background:#fd7e14; animation:blink 2s infinite; }
    @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.3; } }

    /* ── Hero banner ── */
    .mp-hero { background: linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%);
               padding: 3.5rem 0 4rem; position: relative; overflow: hidden; }
    .mp-hero::before { content:''; position:absolute; inset:0;
                        background: radial-gradient(ellipse at 70% 50%, rgba(102,126,234,.25) 0%, transparent 60%); }
    .mp-hero h1 { font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 800; color: #fff; }
    .mp-hero p  { color: rgba(255,255,255,.75); font-size: 1.05rem; max-width: 560px; }
    .mp-hero .stat-pill { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
                           border-radius: 50px; padding: .35rem 1rem; font-size: .82rem; color: rgba(255,255,255,.8); }

    /* ── Sidebar filter ── */
    .mp-sidebar { position: sticky; top: 80px; }
    .mp-filter-card { background: #fff; border-radius: 16px; border: 1px solid #e9ecef;
                       box-shadow: 0 2px 12px rgba(0,0,0,.06); overflow: hidden; }
    .mp-filter-card .card-head { background: linear-gradient(135deg,var(--pri),var(--pri2));
                                  color: #fff; padding: .75rem 1rem; font-size: .85rem; font-weight: 700; }
    .mp-cat-btn { display: flex; align-items: center; gap: .6rem; width: 100%;
                  background: none; border: none; padding: .65rem 1rem; text-align: left;
                  font-size: .875rem; color: #495057; cursor: pointer; transition: all .15s;
                  border-bottom: 1px solid #f3f4f6; }
    .mp-cat-btn:last-child { border-bottom: none; }
    .mp-cat-btn:hover { background: #f8f9fa; color: var(--pri); }
    .mp-cat-btn.active { background: #eff3ff; color: var(--pri); font-weight: 700; }
    .mp-cat-btn .cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .mp-cat-btn .cat-count { margin-left: auto; font-size: .75rem; background: #e9ecef;
                              border-radius: 50px; padding: .1rem .5rem; }
    .mp-cat-btn.active .cat-count { background: var(--pri); color: #fff; }

    /* ── Sort / search bar ── */
    .mp-toolbar { background: #fff; border-radius: 14px; padding: .85rem 1.25rem;
                  border: 1px solid #e9ecef; box-shadow: 0 2px 8px rgba(0,0,0,.04);
                  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
    .mp-toolbar .result-count { font-size: .88rem; color: #6c757d; margin-right: auto; }
    .mp-search { border-radius: 50px; border: 1.5px solid #dee2e6; padding: .45rem 1rem .45rem 2.5rem;
                 font-size: .875rem; background: #f8f9fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.243 1.656a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E") no-repeat .8rem center;
                 min-width: 200px; transition: border-color .2s; }
    .mp-search:focus { outline: none; border-color: var(--pri); background-color: #fff; box-shadow: 0 0 0 3px rgba(102,126,234,.12); }

    /* ── Product cards ── */
    .mp-card { background: #fff; border-radius: 18px; border: 1px solid #e9ecef;
               box-shadow: 0 2px 12px rgba(0,0,0,.06); overflow: hidden;
               transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; height: 100%; }
    .mp-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); }
    .mp-card-cover { position: relative; background: linear-gradient(135deg,#1a1a2e,#16213e); height: 160px;
                      display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .mp-card-cover img { width: 100%; height: 100%; object-fit: cover; }
    .mp-card-cover .cover-icon { font-size: 3.5rem; opacity: .25; color: #fff; }
    .mp-card-cover .cat-badge { position: absolute; top: .75rem; left: .75rem;
                                  display: flex; align-items: center; gap: .35rem;
                                  padding: .25rem .7rem; border-radius: 50px; font-size: .72rem; font-weight: 700;
                                  background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(4px); }
    .mp-card-cover .feat-badge { position: absolute; top: .75rem; right: .75rem;
                                   background: linear-gradient(135deg,#f59e0b,#ef4444);
                                   color: #fff; font-size: .68rem; font-weight: 700; padding: .2rem .6rem;
                                   border-radius: 50px; }
    .mp-card-cover .disc-badge { position: absolute; bottom: .75rem; right: .75rem;
                                   background: #ef4444; color: #fff; font-size: .72rem; font-weight: 800;
                                   padding: .2rem .55rem; border-radius: 6px; }
    .mp-card-body { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; }
    .mp-card-title { font-size: .95rem; font-weight: 700; color: #212529; margin-bottom: .4rem;
                      display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .mp-card-desc  { font-size: .8rem; color: #6c757d; flex: 1; line-height: 1.5;
                      display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .mp-card-footer { padding: .9rem 1.1rem; border-top: 1px solid #f3f4f6;
                       display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
    .mp-price { font-size: 1.1rem; font-weight: 800; color: #212529; }
    .mp-price-orig { font-size: .78rem; color: #adb5bd; text-decoration: line-through; }
    .mp-free-badge { background: linear-gradient(135deg,#43e97b,#38f9d7); color: #fff;
                      font-size: .75rem; font-weight: 800; padding: .2rem .65rem; border-radius: 50px; }
    .btn-mp-buy { background: linear-gradient(135deg,var(--pri),var(--pri2)); color: #fff;
                   border: none; border-radius: 10px; padding: .45rem 1.1rem; font-size: .82rem;
                   font-weight: 700; cursor: pointer; transition: all .2s; white-space: nowrap; }
    .btn-mp-buy:hover { opacity: .88; transform: translateY(-1px); }
    .btn-mp-buy.owned { background: linear-gradient(135deg,#43e97b,#38f9d7); }
    .mp-rating { font-size: .75rem; color: #f59e0b; }
    .mp-dl-count { font-size: .72rem; color: #adb5bd; }

    /* ── Empty state ── */
    .mp-empty { text-align: center; padding: 4rem 2rem; color: #adb5bd; }
    .mp-empty i { font-size: 3.5rem; margin-bottom: 1rem; display: block; opacity: .35; }

    /* ── Responsive ── */
    @media (max-width: 767px) {
        .mp-hero { padding: 2rem 0 2.5rem; }
        .mp-sidebar { position: static; margin-bottom: 1.25rem; }
    }