/* Account Marketplace ---------------------------------------------------- */
/*
 * Every colour goes through these variables. The values below are the default
 * (brown/gold) palette. :where() gives them zero specificity, so a theme that
 * sets the same variables on :root (e.g. css_rodnia/rodnia.css) always wins,
 * whatever order the stylesheets load in.
 */
:where(:root) {
    --mp-bg: #1a1512;
    --mp-panel: #221b16;
    --mp-panel-2: #2a211a;
    --mp-border: #3a2e24;
    --mp-gold: #d9a441;
    --mp-gold-2: #f0c674;
    --mp-text: #e8ddd0;
    --mp-muted: #9a8b7a;
    --mp-faint: #6b5a45;
    --mp-green: #4caf7d;
    --mp-blue: #4a8fd9;
    --mp-red: #d9534f;

    /* Game-style windows, item slots and accent bars */
    --mp-win-top: #2a211a;
    --mp-win-bottom: #17120d;
    --mp-win-frame: #6b5836;
    --mp-slot-top: #0f0b07;
    --mp-slot-bottom: #1b140d;
    --mp-slot-border: #4a3b28;
    --mp-accent-top: #e2b458;
    --mp-accent-bottom: #b5842f;
    --mp-on-accent: #241a0c;
    --mp-primary-top: #4a3a24;
    --mp-primary-bottom: #34281a;
}

.mp-page {
    color: var(--mp-text);
    font-family: 'Nunito', sans-serif;
    padding: 4px 2px 40px;
}

.mp-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--mp-text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.mp-title i { color: var(--mp-gold); }

.mp-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 26px 0 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mp-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mp-section-title.sm { font-size: 1rem; border: none; margin-bottom: 2px; }
.mp-section-title i { color: var(--mp-gold); }

.mp-muted { color: var(--mp-muted); font-size: .85rem; }
.mp-back {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--mp-muted); text-decoration: none; font-size: .85rem;
    margin-bottom: 12px;
}
.mp-back:hover { color: var(--mp-gold); }

/* Header + buttons */
.mp-header {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px; margin-bottom: 18px;
}
.mp-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.mp-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--mp-panel-2); color: var(--mp-text);
    border: 1px solid var(--mp-border); border-radius: 6px;
    padding: 9px 16px; font-size: .85rem; font-weight: 700;
    cursor: pointer; text-decoration: none; transition: .15s;
    position: relative;
}
.mp-btn:hover { border-color: var(--mp-gold); color: var(--mp-gold-2); }
.mp-btn:disabled, .mp-btn:disabled:hover {
    opacity: .45; cursor: not-allowed; filter: grayscale(.7);
    border-color: var(--mp-border); color: var(--mp-muted);
}
.mp-btn.primary { background: linear-gradient(180deg, var(--mp-primary-top), var(--mp-primary-bottom)); border-color: var(--mp-gold); color: var(--mp-gold-2); }
.mp-btn.primary:hover { filter: brightness(1.15); }
.mp-btn.danger { border-color: var(--mp-red); color: #e88; }
.mp-btn.danger:hover { background: color-mix(in srgb, var(--mp-red) 15%, transparent); }
.mp-btn.block { width: 100%; justify-content: center; padding: 13px; font-size: .95rem; margin-top: 8px; }
.mp-btn.sm { padding: 5px 10px; font-size: .78rem; }
.mp-coin-ico { width: 18px; height: 18px; }

.mp-notif-badge {
    background: var(--mp-red); color: #fff; border-radius: 10px;
    font-size: .7rem; padding: 1px 6px; margin-left: 4px;
}

/* Alerts */
.mp-alert {
    display: flex; align-items: flex-start; gap: 8px;
    border-radius: 6px; padding: 10px 14px; margin: 12px 0; font-size: .85rem;
    border: 1px solid;
}
.mp-alert.success { background: color-mix(in srgb, var(--mp-green) 12%, transparent); border-color: var(--mp-green); color: #9fe0be; }
.mp-alert.info { background: color-mix(in srgb, var(--mp-blue) 12%, transparent); border-color: var(--mp-blue); color: #aad0f5; }
.mp-alert.error { background: color-mix(in srgb, var(--mp-red) 12%, transparent); border-color: var(--mp-red); color: #f2b3b1; }
.mp-alert ul { padding-left: 18px; }

/* Filters */
.mp-filters {
    background: var(--mp-panel); border: 1px solid var(--mp-border);
    border-radius: 8px; padding: 16px; margin-bottom: 22px;
}
.mp-filter-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.mp-filter-row.bottom { grid-template-columns: 1fr auto auto; margin-top: 12px; align-items: end; }
.mp-field { display: flex; flex-direction: column; gap: 4px; }
.mp-field.grow { flex: 1; }
.mp-field label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--mp-muted); font-weight: 700; display: flex; align-items: center; gap: 5px;
}
.mp-field input, .mp-field select, .mp-field textarea {
    background: var(--mp-bg); border: 1px solid var(--mp-border);
    border-radius: 6px; color: var(--mp-text); padding: 9px 12px; font-size: .85rem;
    outline: none; width: 100%;
}
.mp-field input:focus, .mp-field select:focus, .mp-field textarea:focus { border-color: var(--mp-gold); }
.mp-field textarea { resize: vertical; }

/* Grid + cards */
.mp-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}
.mp-card {
    display: block; background: var(--mp-panel); border: 1px solid var(--mp-border);
    border-radius: 10px; padding: 14px; text-decoration: none; color: var(--mp-text);
    transition: .15s;
}
.mp-card:hover { border-color: var(--mp-gold); transform: translateY(-2px); }
.mp-card.static:hover { transform: none; border-color: var(--mp-border); }
.mp-card-top { display: flex; align-items: center; gap: 10px; position: relative; }
.mp-card-avatar { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--mp-gold); object-fit: cover; }
.mp-card-headinfo { flex: 1; min-width: 0; }
.mp-card-name { font-weight: 800; color: var(--mp-gold-2); }
.mp-card-lvl { font-size: .8rem; font-weight: 700; }
.mp-card-race { font-size: .75rem; color: var(--mp-muted); }

.mp-badge {
    font-size: .68rem; font-weight: 800; text-transform: uppercase;
    padding: 3px 9px; border-radius: 20px; letter-spacing: .03em;
}
.mp-card-top .mp-badge { position: absolute; top: -4px; right: -4px; }
.mp-badge.active { background: color-mix(in srgb, var(--mp-green) 18%, transparent); color: var(--mp-green); border: 1px solid var(--mp-green); }
.mp-badge.escrow { background: color-mix(in srgb, var(--mp-gold-2) 15%, transparent); color: var(--mp-gold-2); border: 1px solid var(--mp-gold); }
.mp-badge.sold { background: color-mix(in srgb, var(--mp-muted) 18%, transparent); color: var(--mp-muted); border: 1px solid var(--mp-muted); }
.mp-badge.pending { background: color-mix(in srgb, var(--mp-blue) 15%, transparent); color: var(--mp-blue); border: 1px solid var(--mp-blue); }
.mp-badge.accepted { background: color-mix(in srgb, var(--mp-green) 18%, transparent); color: var(--mp-green); border: 1px solid var(--mp-green); }
.mp-badge.declined, .mp-badge.failed { background: color-mix(in srgb, var(--mp-red) 15%, transparent); color: #e88; border: 1px solid var(--mp-red); }
.mp-badge.withdrawn, .mp-badge.expired, .mp-badge.closed { background: color-mix(in srgb, var(--mp-muted) 18%, transparent); color: var(--mp-muted); border: 1px solid var(--mp-muted); }
.mp-badge.cancelled { background: color-mix(in srgb, var(--mp-red) 15%, transparent); color: #e88; border: 1px solid var(--mp-red); }

.mp-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
.mp-chip {
    font-size: .72rem; background: var(--mp-panel-2); border: 1px solid var(--mp-border);
    border-radius: 5px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 4px;
}
.mp-chip.gold { color: var(--mp-gold-2); border-color: var(--mp-gold); font-weight: 800; }

.mp-card-stats { list-style: none; padding: 0; margin: 0 0 10px; }
.mp-card-stats li, .mp-info-list li {
    display: flex; justify-content: space-between; font-size: .82rem;
    padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--mp-border) 50%, transparent);
}
.mp-card-stats li span { color: var(--mp-muted); display: flex; align-items: center; gap: 6px; }
/* Currency icons from the game: Yang (vnum 1) and Ancient Coin (vnum 10350) */
.mp-ac-ico { width: 18px; height: 18px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.mp-card-desc { font-size: .78rem; color: var(--mp-muted); margin: 8px 0; line-height: 1.4; }

.mp-card-price { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mp-price {
    display: inline-flex; align-items: center; gap: 5px; font-weight: 800;
    font-size: .85rem; background: var(--mp-panel-2); border: 1px solid var(--mp-border);
    border-radius: 6px; padding: 5px 10px;
}
.mp-price img { width: 16px; height: 16px; }
.mp-price.sc { color: #d7d7d7; }
.mp-price.rc { color: var(--mp-gold-2); }

.mp-empty { text-align: center; padding: 60px 20px; color: var(--mp-muted); }
.mp-empty i { font-size: 3rem; display: block; margin-bottom: 12px; opacity: .5; }
.mp-pagination { margin-top: 24px; display: flex; justify-content: center; }

/* Character card (tabs) */
.mp-char-list { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.mp-char-card { background: var(--mp-panel); border: 1px solid var(--mp-border); border-radius: 10px; overflow: hidden; }
.mp-char-header { display: flex; align-items: center; gap: 12px; padding: 16px; }
.mp-char-avatar { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--mp-gold); object-fit: cover; }
.mp-char-name { font-weight: 800; font-size: 1.1rem; color: var(--mp-gold-2); }
.mp-char-sub { display: flex; gap: 12px; font-size: .82rem; color: var(--mp-muted); flex-wrap: wrap; }
/* Level colours from the ranking page: .level-text (green) and .hero-level */
.mp-level, .mp-card-lvl { color: rgb(152, 255, 51); }
.mp-char-sub .mp-level { font-weight: 700; }
.mp-level.hero, .mp-card-lvl.hero { color: rgb(167, 225, 222); }

.mp-tabs { border-bottom: 1px solid var(--mp-border); padding: 0 8px; flex-wrap: nowrap; overflow-x: auto; }
.mp-tabs .nav-link {
    background: none; border: none; color: var(--mp-muted); font-weight: 700;
    font-size: .85rem; padding: 12px 16px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.mp-tabs .nav-link { display: inline-flex; align-items: center; gap: 7px; }
.mp-tabs .nav-link:hover { color: var(--mp-text); }
/* Game icons in the tabs: dimmed when inactive, full colour on hover/active. */
.mp-tab-ico {
    width: 22px; height: 22px; object-fit: contain; flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)) grayscale(.45); opacity: .7; transition: .15s;
}
.mp-tab-ico.round { border-radius: 50%; border: 1px solid var(--mp-border); object-fit: cover; }
.mp-tabs .nav-link:hover .mp-tab-ico,
.mp-tabs .nav-link.active .mp-tab-ico { filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); opacity: 1; }
.mp-tabs .nav-link.active .mp-tab-ico.round { border-color: var(--mp-gold); }
.mp-tabs .nav-link.active { color: var(--mp-gold-2); border-bottom-color: var(--mp-gold); }
.mp-tab-content { padding: 18px; }

.mp-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.mp-stat { background: var(--mp-panel-2); border: 1px solid var(--mp-border); border-radius: 6px; text-align: center; padding: 12px 4px; }
.mp-stat-label { display: block; font-size: .7rem; color: var(--mp-muted); text-transform: uppercase; letter-spacing: .05em; }
.mp-stat-val { font-size: 1.3rem; font-weight: 800; color: var(--mp-text); }

.mp-info-list { list-style: none; padding: 0; margin: 0; }
.mp-info-list li b { font-weight: 800; }
.mp-info-list li span { color: var(--mp-muted); display: flex; align-items: center; gap: 8px; }

.mp-inv-empty { text-align: center; color: var(--mp-muted); padding: 30px 0; font-size: .85rem; }

/* Sell page */
.mp-warning {
    background: color-mix(in srgb, var(--mp-red) 8%, transparent); border: 1px solid var(--mp-red);
    border-radius: 8px; padding: 14px 18px; margin: 16px 0;
}
.mp-warning-title { color: #e88; font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.mp-warning p { color: #e0b3b1; font-size: .84rem; margin: 4px 0; }

.mp-sell-form { background: var(--mp-panel); border: 1px solid var(--mp-border); border-radius: 8px; padding: 18px; }
.mp-sell-form .mp-field { margin-bottom: 14px; }
.mp-price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mp-listing-preview { margin-top: 24px; border: 1px dashed var(--mp-border); border-radius: 8px; padding: 16px; }
.mp-lp-title { color: var(--mp-muted); font-size: .85rem; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.mp-listing-preview .mp-card { max-width: 300px; margin: 0 auto; }

/* Detail page */
.mp-detail-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mp-detail-meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--mp-muted); font-size: .84rem; margin: 8px 0 4px; }
.mp-detail-meta i { color: var(--mp-gold); margin-right: 4px; }
.mp-seller-desc { background: var(--mp-panel); border: 1px solid var(--mp-border); border-radius: 8px; padding: 14px 18px; margin: 16px 0; }
.mp-seller-desc p { margin: 0; font-size: .88rem; }
.mp-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }

/* Modals */
.mp-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 2000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.mp-modal[hidden] { display: none; }
.mp-modal-box {
    background: var(--mp-panel); border: 1px solid var(--mp-gold); border-radius: 10px;
    padding: 24px; max-width: 440px; width: 100%;
}
.mp-modal-title { font-weight: 800; font-size: 1.2rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.mp-modal-title.success { color: var(--mp-green); }
.mp-modal-box p { font-size: .88rem; }
.mp-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ------- Game-style equipment / inventory windows ------- */
.mp-game-windows {
    display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 16px; align-items: start;
}
.mp-gwin {
    background:
        radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--mp-gold) 6%, transparent), transparent 60%),
        linear-gradient(180deg, var(--mp-win-top), var(--mp-win-bottom));
    border: 2px solid var(--mp-win-frame); border-radius: 6px; overflow: hidden;
    box-shadow: inset 0 0 24px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4);
}
.mp-gwin-title {
    background: linear-gradient(180deg, var(--mp-accent-top), var(--mp-accent-bottom));
    color: var(--mp-on-accent); font-weight: 800; font-size: .82rem; letter-spacing: .5px;
    text-align: center; padding: 5px 8px; text-shadow: 0 1px 0 rgba(255,255,255,.25);
    border-bottom: 1px solid var(--mp-border);
}
.mp-gwin-body { padding: 12px; }

/* Equipment window: the client's inventory window (160px wide) with its own art, zoomed for readability */
.mp-eqwin { position: relative; width: 160px; height: 247px; zoom: 1.3; margin: 0 auto; }
.mp-eqwin-tab {
    position: absolute; top: 1px; width: 52px; height: 25px; z-index: 2;
    border: 0; padding: 0; cursor: pointer;
    background: var(--norm) center / 100% 100% no-repeat;
}
.mp-eqwin-tab:hover { background-image: var(--hover); }
.mp-eqwin-tab.active { background-image: var(--down); }
.mp-eqwin-panel { position: absolute; left: 0; top: 0; width: 160px; height: 221px; background: no-repeat top left; }
.mp-eqwin-panel[hidden] { display: none; }
.mp-eqwin-ringframe { position: absolute; pointer-events: none; }
.mp-eqwin-slot { position: absolute; display: flex; align-items: center; justify-content: center; }
.mp-eqwin-slot img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.mp-eqwin-slot.filled:hover { box-shadow: inset 0 0 0 1px var(--mp-gold); border-radius: 3px; }
.mp-eqwin-sets { position: absolute; left: 0; top: 221px; width: 160px; height: 26px; background: var(--set1) no-repeat top left; }
.mp-eqwin[data-set="2"] .mp-eqwin-sets { background-image: var(--set2); }
.mp-eqwin[data-set="3"] .mp-eqwin-sets { background-image: var(--set3); }
.mp-eqwin-set { position: absolute; top: 1px; width: 33px; height: 23px; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 4px; }
.mp-eqwin-set:hover { box-shadow: inset 0 0 0 1px rgba(217,164,65,.7); }

/* Generic game slot look (equipment, inventory, skill icons) */
.mp-eq-slot, .mp-islot, .mp-skill-icon {
    position: relative;
    background: linear-gradient(180deg, var(--mp-slot-top), var(--mp-slot-bottom));
    border: 1px solid var(--mp-slot-border);
    border-radius: 3px;
    box-shadow: inset 0 0 6px rgba(0,0,0,.7);
    display: flex; align-items: center; justify-content: center;
}
.mp-eq-slot img, .mp-islot img, .mp-skill-icon img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.mp-eq-slot.filled, .mp-islot.filled { border-color: var(--mp-gold); }
.mp-eq-slot:not(.filled)::after {
    content: attr(data-label);
    font-size: .52rem; color: var(--mp-faint); text-transform: uppercase; letter-spacing: .3px;
    padding: 2px; text-align: center; line-height: 1.1;
}
.mp-socket-dot {
    position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%;
    background: var(--mp-blue); box-shadow: 0 0 4px var(--mp-blue);
}

/* Inventory grid */
.mp-islots {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
}
.mp-islot { aspect-ratio: 1; }
.mp-islot .mp-count {
    position: absolute; bottom: 1px; right: 2px; font-size: .6rem; font-weight: 800;
    color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000;
}

/* Inventory container tabs (game-like) */
.mp-inv-tabs {
    display: flex; flex-wrap: wrap; gap: 4px; border: 0;
    margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--mp-border);
}
.mp-inv-tabs .nav-link {
    color: var(--mp-muted); background: linear-gradient(180deg, var(--mp-win-top), var(--mp-slot-bottom));
    border: 1px solid var(--mp-slot-border); border-radius: 4px; padding: 4px 9px;
    font-size: .72rem; font-weight: 700; display: flex; align-items: center; gap: 6px;
}
.mp-inv-tabs .nav-link.active {
    color: var(--mp-on-accent); background: linear-gradient(180deg, var(--mp-accent-top), var(--mp-accent-bottom)); border-color: var(--mp-gold);
}
.mp-subtab-count { background: rgba(0,0,0,.28); border-radius: 10px; padding: 0 6px; font-size: .66rem; }
.mp-inv-tabs .nav-link.active .mp-subtab-count { background: rgba(0,0,0,.18); }

.mp-safebox-gold {
    margin-top: 10px; font-size: .8rem; color: var(--mp-muted);
    display: flex; align-items: center; gap: 6px;
}
.mp-safebox-gold b { color: var(--mp-gold-2); }

/* ------- Item hover tooltip ------- */
.mp-tip {
    position: fixed; z-index: 3000; pointer-events: none;
    max-width: 300px; padding: 8px 12px; border-radius: 6px;
    background: linear-gradient(180deg, var(--mp-win-top), var(--mp-win-bottom));
    border: 1px solid var(--mp-gold); box-shadow: 0 6px 18px rgba(0,0,0,.6);
    color: var(--mp-text); font-size: .8rem; line-height: 1.35;
}
.mp-tip[hidden] { display: none; }
/* Line colours are the game client's own tooltip colours (uiToolTip.py), so
   tooltips read like in-game regardless of the site theme. */
.mp-tip-line { text-align: center; font-size: .76rem; }
.mp-tip-line.title { color: #F2E7C1; font-weight: 800; font-size: .84rem; margin-bottom: 3px; }
.mp-tip-line.title-special { color: #FFC800; font-weight: 800; font-size: .84rem; margin-bottom: 3px; }
.mp-tip-line.normal { color: #C2C2C2; }
.mp-tip-line.condition, .mp-tip-line.gain { color: #FFB16D; }
.mp-tip-line.evolution { color: #6CC6CD; }
.mp-tip-line.positive { color: #8AB98E; }
.mp-tip-line.levelup { color: #8EC292; }
.mp-tip-line.attr { color: #B0DFB4; }
.mp-tip-line.attr-rare { color: #E1FAE1; }
.mp-tip-line.negative, .mp-tip-line.disabled { color: #E57976; }
.mp-tip-line.hero { color: #9A9CDB; }
.mp-tip-line.stone { color: #8AB98E; text-align: left; margin-top: 2px; }

/* ------- Biolog ------- */
.mp-bio-head { margin-bottom: 14px; }
.mp-bio-progress {
    height: 10px; border-radius: 6px; background: var(--mp-panel-2);
    border: 1px solid var(--mp-border); overflow: hidden;
}
.mp-bio-bar {
    height: 100%; background: linear-gradient(90deg, var(--mp-green), #6fd39c);
    transition: width .3s;
}
.mp-bio-count {
    margin-top: 6px; font-size: .82rem; color: var(--mp-muted);
    display: flex; align-items: center; gap: 10px;
}
.mp-bio-complete { color: var(--mp-green); font-weight: 700; }
.mp-bio-list { display: flex; flex-direction: column; gap: 6px; }
.mp-bio-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px; border-radius: 6px;
    background: var(--mp-panel); border: 1px solid var(--mp-border);
    border-left: 3px solid var(--mp-border);
}
.mp-bio-item.done { border-left-color: var(--mp-green); }
.mp-bio-item.active { border-left-color: var(--mp-gold); background: var(--mp-panel-2); }
.mp-bio-item.locked { border-left-color: var(--mp-red); }
.mp-bio-item.pending { opacity: .6; }
.mp-bio-ico { flex-shrink: 0; font-size: 1.05rem; line-height: 1.3; }
.mp-bio-item.done .mp-bio-ico { color: var(--mp-green); }
.mp-bio-item.active .mp-bio-ico { color: var(--mp-gold-2); }
.mp-bio-item.locked .mp-bio-ico { color: var(--mp-red); }
.mp-bio-item.pending .mp-bio-ico { color: var(--mp-muted); }
.mp-bio-body { flex-grow: 1; min-width: 0; }
.mp-bio-name { font-size: .86rem; font-weight: 700; color: var(--mp-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-bio-lvl { font-size: .72rem; font-weight: 600; color: var(--mp-muted); }
.mp-bio-tag { font-size: .66rem; font-weight: 700; color: #e88; border: 1px solid var(--mp-red); border-radius: 8px; padding: 0 6px; }
.mp-bio-reward { font-size: .78rem; color: var(--mp-gold-2); margin-top: 2px; }
.mp-bio-deliver { font-size: .74rem; color: var(--mp-muted); margin-top: 2px; }

/* ------- Titles ------- */
.mp-title-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-title-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 14px; font-size: .8rem; font-weight: 800;
    color: var(--tc, var(--mp-text));
    border: 1px solid color-mix(in srgb, var(--tc, #999) 55%, transparent);
    background: color-mix(in srgb, var(--tc, #999) 12%, var(--mp-panel-2));
    text-shadow: 0 1px 1px rgba(0,0,0,.9);
}
.mp-title-badge.equipped {
    border-color: var(--tc, var(--mp-gold));
    box-shadow: 0 0 0 1px var(--tc, var(--mp-gold)), 0 0 10px color-mix(in srgb, var(--tc, #999) 40%, transparent);
}
.mp-title-badge .bi { font-size: .72rem; }

/* ------- Skills (game-style icon tiles) ------- */
.mp-skill-section { margin-bottom: 20px; }
.mp-skill-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-skill-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 46px; }
.mp-skill-icon { width: 46px; height: 46px; }
.mp-skill-icon.noicon::after {
    content: "\2605"; /* star, like the doc's fallback */
    color: var(--mp-faint); font-size: 1.4rem;
}
.mp-skill-lvl {
    flex-shrink: 0; min-width: 30px; text-align: center;
    font-weight: 800; font-size: .72rem; line-height: 1;
    padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,.3);
}
.mp-skill-lvl.normal  { color: var(--mp-muted); }
.mp-skill-lvl.master  { color: var(--mp-green); }
.mp-skill-lvl.grand   { color: var(--mp-blue); }
.mp-skill-lvl.perfect { color: var(--mp-gold-2); }

/* ------- Notifications ------- */
.mp-bell { padding: 9px 12px; }
.mp-bell .bi { font-size: 1.05rem; }
.mp-bell .mp-notif-badge {
    position: absolute; top: -6px; right: -6px; margin: 0;
    min-width: 18px; text-align: center; line-height: 1.3;
    box-shadow: 0 0 0 2px var(--mp-bg);
}

.mp-notif-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.mp-notif-item {
    display: flex; align-items: center; gap: 12px;
    background: var(--mp-panel); border: 1px solid var(--mp-border);
    border-radius: 8px; padding: 12px 14px;
}
.mp-notif-item.unread { border-left: 3px solid var(--mp-gold); background: var(--mp-panel-2); }
.mp-notif-ico {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    background: rgba(255,255,255,.05); color: var(--mp-muted);
}
.mp-notif-ico.green { color: var(--mp-green); }
.mp-notif-ico.gold { color: var(--mp-gold-2); }
.mp-notif-ico.blue { color: var(--mp-blue); }
.mp-notif-body { flex-grow: 1; text-align: left; }
.mp-notif-text { font-size: .88rem; color: var(--mp-text); }
.mp-notif-time { font-size: .72rem; color: var(--mp-muted); margin-top: 2px; }

@media (max-width: 900px) {
    .mp-filter-row { grid-template-columns: repeat(2, 1fr); }
    .mp-game-windows { grid-template-columns: 1fr; }
    .mp-price-row { grid-template-columns: 1fr; }
    .mp-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ------- Offers ------- */
.mp-my-offer { align-items: center; gap: 10px; margin: 0; }
.mp-my-offer form { margin-left: auto; }
.mp-offer-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.mp-offer-item {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--mp-panel); border: 1px solid var(--mp-border); border-left: 3px solid var(--mp-gold);
    border-radius: 8px; padding: 10px 14px;
}
.mp-offer-item b { color: var(--mp-gold-2); margin-right: 8px; }
.mp-offer-item.past { border-left-color: var(--mp-border); opacity: .85; }
.mp-offer-actions { display: flex; gap: 8px; }