/* ============================================================
 * MarketV2 — Aggregated marketplace UI (rebuilt for clarity).
 * Mobile-first; tested in a 480px Telegram WebView.
 * ============================================================ */

#market-v2-root { display: flex; flex-direction: column; height: 100%; min-height: 400px; color: #ddd; font-family: inherit; }

/* ── Header (tabs + balance) ─────────────────────────────────── */
.mv2-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-bottom: 1px solid #2a2a35; background: #18181f; flex-shrink: 0; gap: 8px; }
.mv2-tabs { display: flex; gap: 4px; flex-shrink: 0; }
.mv2-tab { padding: 5px 10px; border-radius: 6px; cursor: pointer; user-select: none; background: #25252e; color: #aaa; font-size: 12px; transition: background 0.15s; white-space: nowrap; }
.mv2-tab:hover { background: #2e2e3a; color: #ddd; }
.mv2-tab.active { background: #4a3aa8; color: #fff; }
.mv2-balance { font-size: 12px; color: #ccc; display: flex; gap: 4px; align-items: baseline; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.mv2-bal-lbl { color: #777; }
.mv2-bal-val { font-weight: bold; color: #f5d76e; font-size: 14px; }
.mv2-bal-escrow { color: #888; font-size: 10px; width: 100%; text-align: right; }

.mv2-pane { flex: 1; overflow: auto; padding: 8px; }

/* ── Filters (browse pane) ──────────────────────────────────── */
.mv2-filters { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; align-items: stretch; }
.mv2-search { flex: 1 1 100%; padding: 7px 10px; background: #1f1f28; border: 1px solid #2f2f3a; border-radius: 6px; color: #ddd; font-size: 13px; }
.mv2-search:focus { border-color: #4a3aa8; outline: none; }
.mv2-select { padding: 6px 10px; background: #1f1f28; border: 1px solid #2f2f3a; border-radius: 6px; color: #ddd; font-size: 12px; cursor: pointer; flex: 1 1 0; min-width: 0; }
.mv2-refresh { padding: 6px 12px; background: #25252e; border: 1px solid #2f2f3a; border-radius: 6px; color: #ddd; cursor: pointer; font-size: 14px; flex-shrink: 0; }
.mv2-refresh:hover { background: #2e2e3a; }

/* ── Item grid (browse) ─────────────────────────────────────────────
   ONE row per card, full-width on phone. Same layout as the original
   design (icon left, name + supply meta + price + Δ%) but every metric
   shrunk so the card height drops from ~80px to ~48px:
     icon 56→36, name 13→11, meta 11→9, price 15→12, pct 11→9. */
.mv2-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}
.mv2-item-card {
    background: linear-gradient(180deg, #1f1f28, #1a1a22);
    border: 1px solid #2a2a35;
    border-radius: 7px;
    padding: 6px 8px;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}
.mv2-item-card:hover { border-color: #4a3aa8; transform: translateY(-1px); }

/* Fixed 36x36 icon, never grows with the card width. */
.mv2-item-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 5px;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.mv2-item-icon img { width: 100%; height: 100%; object-fit: contain; }
.mv2-item-noicon { font-size: 20px; opacity: .55; }

/* Body — name + supply meta + price-row stacked vertically. */
.mv2-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.mv2-item-name {
    font-weight: 700;
    color: #fff;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
}

/* Supply / on_sale meta — kept, just smaller. */
.mv2-item-meta {
    display: flex;
    gap: 5px;
    font-size: 9px;
    color: #888;
    align-items: center;
    line-height: 1.1;
}
.mv2-meta-pair b { color: #ccc; font-weight: 600; }
.mv2-meta-dot { width: 2px; height: 2px; border-radius: 50%; background: #555; flex-shrink: 0; }

/* Price + Δ% on the same row. */
.mv2-item-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}
.mv2-item-minprice {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}
.mv2-item-minprice .mv2-price-lbl {
    font-size: 7.5px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1;
}
.mv2-item-minprice .mv2-price-val {
    font-size: 12px;
    color: #5dd66b;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.1;
}
.mv2-item-pct { white-space: nowrap; flex-shrink: 0; }
.mv2-pct {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
}
.mv2-pct-up { color: #5dd66b; background: rgba(93,214,107,0.12); }
.mv2-pct-down { color: #ff7766; background: rgba(255,68,68,0.12); }
.mv2-pct-zero { color: #888; }

.mv2-empty { padding: 28px; text-align: center; color: #666; font-size: 13px; }
.mv2-empty-tiny { padding: 6px 8px; text-align: center; color: #666; font-size: 11px; opacity: 0.85; }

/* ── Detail modal ──────────────────────────────────────────── */
.mv2-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 12px; }
.mv2-modal { background: #14141a; border: 1px solid #2a2a35; border-radius: 12px; max-width: 520px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 12px 30px rgba(0,0,0,0.6); overflow: hidden; }
.mv2-modal-sm { max-width: 380px; }
.mv2-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid #2a2a35; background: #18181f; flex-shrink: 0; }
.mv2-modal-title { font-weight: 700; color: #fff; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv2-modal-close { cursor: pointer; color: #888; font-size: 18px; padding: 2px 10px; border-radius: 5px; user-select: none; }
.mv2-modal-close:hover { color: #fff; background: #2a2a35; }
.mv2-modal-body { padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }

/* Hero */
.mv2-hero { display: flex; gap: 14px; align-items: stretch; padding: 12px; background: linear-gradient(135deg, #1f1f2a, #16161e); border: 1px solid #2a2a35; border-radius: 10px; }
.mv2-hero-icon { width: 80px; height: 80px; min-width: 80px; background: rgba(255,255,255,0.04); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mv2-hero-icon img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.mv2-hero-icon .mv2-item-noicon { font-size: 38px; }
.mv2-hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.mv2-hero-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; }
.mv2-hero-lbl { color: #888; text-transform: lowercase; }
.mv2-hero-val { font-weight: 700; color: #ddd; font-size: 14px; white-space: nowrap; }
.mv2-hero-val-ask { color: #ff7766; }
.mv2-hero-val-bid { color: #5dd66b; }

/* Chips strip */
.mv2-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mv2-chip { background: #1c1c24; border: 1px solid #2a2a35; border-radius: 8px; padding: 6px 8px; min-width: 0; text-align: center; }
.mv2-chip-lbl { display: block; font-size: 9.5px; color: #777; text-transform: uppercase; letter-spacing: 0.4px; }
.mv2-chip-val { display: block; font-size: 13px; font-weight: 700; color: #ddd; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv2-chip.mv2-pct-up .mv2-chip-val { color: #5dd66b; }
.mv2-chip.mv2-pct-down .mv2-chip-val { color: #ff7766; }

/* Chart */
.mv2-chart-wrap { background: #1a1a22; border: 1px solid #2a2a35; border-radius: 8px; padding: 6px; }
.mv2-chart-tabs { display: flex; gap: 4px; margin-bottom: 4px; }
.mv2-chart-tab { padding: 3px 12px; border-radius: 4px; cursor: pointer; background: #25252e; color: #aaa; font-size: 11px; user-select: none; }
.mv2-chart-tab.active { background: #4a3aa8; color: #fff; }
.mv2-chart { width: 100%; height: 180px; transition: height 0.2s; }
.mv2-chart-wrap.mv2-chart-empty .mv2-chart { height: 32px; display: flex; align-items: center; justify-content: center; }
.mv2-chart-svg { width: 100%; height: 180px; display: block; }
.mv2-chart-line { fill: none; stroke: #6ba3f5; stroke-width: 1.5; }
.mv2-chart-area { fill: rgba(107,163,245,0.12); }
.mv2-chart-grid { stroke: #2a2a35; stroke-width: 0.5; stroke-dasharray: 2,2; }
.mv2-chart-lbl { fill: #666; font-size: 9px; }
.mv2-chart-dot { fill: #6ba3f5; }

/* Section header (orderbook + my orders sections) */
.mv2-section-hdr { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.6px; padding: 6px 2px 2px; border-top: 1px solid #2a2a35; margin-top: 4px; display: flex; justify-content: space-between; align-items: center; }
.mv2-section-hdr:first-child { border-top: none; margin-top: 0; }
.mv2-section-name { font-weight: 700; }
.mv2-section-count { background: #25252e; color: #ccc; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.mv2-section-hdr-sell .mv2-section-name::before { content: '🟢 '; }
.mv2-section-hdr-buy  .mv2-section-name::before { content: '🔵 '; }
.mv2-section-hdr-trades .mv2-section-name::before { content: '📜 '; }

/* Orderbook (in detail modal) */
.mv2-book { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mv2-book-col { background: #1a1a22; border: 1px solid #2a2a35; border-radius: 8px; padding: 6px 8px; min-width: 0; }
.mv2-book-title { font-size: 10px; color: #888; margin-bottom: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.mv2-book-title-ask::before { content: '● '; color: #ff7766; }
.mv2-book-title-bid::before { content: '● '; color: #5dd66b; }
.mv2-book-rows { display: flex; flex-direction: column; gap: 2px; max-height: 130px; overflow-y: auto; }
.mv2-book-row { display: flex; justify-content: space-between; padding: 3px 6px; border-radius: 3px; font-size: 12px; min-width: 0; }
.mv2-book-row-ask { background: rgba(255,68,68,0.06); }
.mv2-book-row-bid { background: rgba(93,214,107,0.06); }
.mv2-book-row-ask .mv2-book-price { color: #ff7766; font-weight: 600; }
.mv2-book-row-bid .mv2-book-price { color: #5dd66b; font-weight: 600; }
.mv2-book-qty { color: #888; }

/* ── Action panel (instant + limit forms) ──────────────────── */
.mv2-actions { display: flex; flex-direction: column; gap: 8px; }

/* Instant cards row (side-by-side) */
.mv2-instant-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mv2-instant-row.mv2-instant-row-single { grid-template-columns: 1fr; }
.mv2-instant { background: #1a1a22; border: 2px solid #2a2a35; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 96px; }
.mv2-instant-buy  { border-color: rgba(44,107,255,0.55); background: linear-gradient(180deg, rgba(44,107,255,0.10), #1a1a22); box-shadow: inset 0 0 0 1px rgba(44,107,255,0.10); }
.mv2-instant-sell { border-color: rgba(43,191,61,0.55); background: linear-gradient(180deg, rgba(43,191,61,0.10), #1a1a22); box-shadow: inset 0 0 0 1px rgba(43,191,61,0.10); }
.mv2-instant-title { font-size: 11px; color: #ccc; font-weight: 600; line-height: 1.3; min-height: 28px; }
.mv2-instant-controls { display: flex; gap: 6px; align-items: stretch; min-height: 36px; }
.mv2-instant .mv2-empty-tiny { padding: 8px 10px; opacity: 0.7; font-style: italic; flex: 1; text-align: center; }

/* Limit-form tabs + panes */
.mv2-limit-tabs { display: flex; gap: 4px; border-bottom: 1px solid #2a2a35; padding-bottom: 0; }
.mv2-limit-tab { padding: 7px 12px; cursor: pointer; user-select: none; font-size: 12px; color: #888; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; }
.mv2-limit-tab:hover { color: #ccc; }
.mv2-limit-tab.active { color: #fff; border-bottom-color: #4a3aa8; }

.mv2-limit-pane { display: none; padding: 8px 0 4px; flex-direction: column; gap: 8px; }
.mv2-limit-pane.mv2-limit-pane-active { display: flex; }
.mv2-limit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mv2-limit-fields:has(label:only-child) { grid-template-columns: 1fr; }
.mv2-limit-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mv2-limit-flbl { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.4px; }

/* Inputs */
.mv2-input { padding: 7px 10px; background: #14141a; border: 1px solid #2a2a35; border-radius: 6px; color: #fff; font-size: 13px; min-width: 0; width: 100%; box-sizing: border-box; transition: border-color 0.15s; }
.mv2-input:focus { border-color: #4a3aa8; outline: none; }
.mv2-input-qty { max-width: 80px; flex-shrink: 0; }

/* Buttons */
.mv2-btn { padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer; font-weight: 700; font-size: 13px; transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s; user-select: none; }
.mv2-btn:hover:not(:disabled) { transform: translateY(-1px); }
.mv2-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mv2-btn-buy { background: linear-gradient(135deg, #2c6bff, #1e4dba); color: #fff; }
.mv2-btn-sell { background: linear-gradient(135deg, #2bbf3d, #1a8c2a); color: #fff; }
.mv2-btn-instant { flex: 1; min-width: 0; padding: 9px 14px; }
.mv2-btn-wide { width: 100%; padding: 10px; }
.mv2-btn-cancel { background: #5a3030; color: #fcc; padding: 7px 14px; }
.mv2-btn-cancel:hover { background: #6b3a3a; }
.mv2-btn-primary { background: #4a3aa8; color: #fff; }
.mv2-btn-confirm { width: 100%; padding: 11px; margin-top: 8px; font-size: 13px; }
.mv2-btn-ready { animation: mv2pulse 1.2s infinite; }
@keyframes mv2pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(74,58,168,0.6); } 50% { box-shadow: 0 0 0 6px rgba(74,58,168,0); } }

/* Confirm modal body */
.mv2-confirm-msg { font-size: 13px; color: #ddd; line-height: 1.5; }
.mv2-cm-line, .mv2-cm-total { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.mv2-cm-line { color: #aaa; font-size: 12px; }
.mv2-cm-line b { color: #ddd; }
.mv2-cm-total { border-top: 1px solid #2a2a35; padding-top: 8px; margin-top: 4px; font-size: 14px; }
.mv2-cm-total b { color: #f5d76e; font-size: 15px; }
.mv2-cm-hint { font-size: 11px; color: #777; margin-top: 6px; line-height: 1.4; }

/* ── My orders pane ─────────────────────────────────────────── */
.mv2-order-card { background: #1a1a22; border: 1px solid #2a2a35; border-radius: 10px; padding: 10px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s; }
.mv2-order-card:hover { border-color: #3a3a4a; }
.mv2-order-sell { border-left: 3px solid #2bbf3d; }
.mv2-order-buy  { border-left: 3px solid #2c6bff; }
.mv2-order-head { display: flex; gap: 10px; align-items: stretch; }
.mv2-order-icon { width: 42px; height: 42px; min-width: 42px; background: #0e0e14; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mv2-order-icon img { width: 100%; height: 100%; object-fit: contain; }
.mv2-order-icon .mv2-item-noicon { font-size: 22px; }
.mv2-order-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mv2-order-name { font-weight: 700; color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv2-order-meta { font-size: 11px; color: #999; }
.mv2-order-verb { font-weight: 700; }
.mv2-order-sell .mv2-order-verb { color: #5dd66b; }
.mv2-order-buy  .mv2-order-verb { color: #6ba3f5; }
.mv2-order-total { font-size: 12px; color: #f5d76e; font-weight: 700; }
.mv2-order-progress { margin-top: 8px; }
.mv2-order-progress-bar { height: 5px; background: #14141a; border-radius: 3px; overflow: hidden; }
.mv2-order-progress-fill { height: 100%; background: linear-gradient(90deg, #4a3aa8, #6ba3f5); transition: width 0.3s; }
.mv2-order-progress-lbl { font-size: 10px; color: #888; margin-top: 3px; }
.mv2-order-foot { margin-top: 8px; }

/* Trades */
.mv2-trade-card { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: #1a1a22; border: 1px solid #2a2a35; border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: border-color 0.15s; }
.mv2-trade-card:hover { border-color: #3a3a4a; }
.mv2-trade-icon { width: 36px; height: 36px; min-width: 36px; background: #0e0e14; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mv2-trade-icon img { width: 100%; height: 100%; object-fit: contain; }
.mv2-trade-icon .mv2-item-noicon { font-size: 20px; }
.mv2-trade-info { flex: 1; min-width: 0; }
.mv2-trade-name { font-weight: 700; color: #ddd; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv2-trade-meta { font-size: 11px; color: #888; }
.mv2-trade-amount-block { text-align: right; flex-shrink: 0; }
.mv2-trade-amount { font-weight: 700; font-size: 13px; white-space: nowrap; }
.mv2-trade-sell .mv2-trade-amount { color: #5dd66b; }
.mv2-trade-buy  .mv2-trade-amount { color: #ff7766; }
.mv2-trade-time { font-size: 10px; color: #666; margin-top: 2px; }

/* ── Toast ──────────────────────────────────────────────────── */
.mv2-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: #2a2a35; color: #fff; padding: 8px 16px; border-radius: 6px; font-size: 13px; z-index: 10000; opacity: 0; transition: opacity 0.2s, transform 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.4); max-width: 90vw; text-align: center; }
.mv2-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mv2-toast-ok  { background: #1d6b2c; }
.mv2-toast-err { background: #6b1d1d; }

/* ── Mobile tweaks ──────────────────────────────────────────── */
@media (max-width: 520px) {
    /* Grid is already 1-up by default; keep it as-is on phones. */
    .mv2-chips { grid-template-columns: repeat(2, 1fr); }
    .mv2-instant-row { grid-template-columns: 1fr; }
    .mv2-book { grid-template-columns: 1fr; }
    .mv2-book-rows { max-height: 90px; }
    .mv2-hero-icon { width: 64px; height: 64px; min-width: 64px; }
}

/* ── Inventory resource icon (img instead of emoji) ────────── */
.inv-slot .item-icon-img { width: 80%; height: 80%; object-fit: contain; image-rendering: -webkit-optimize-contrast; }
.inv-slot-resource { box-shadow: inset 0 0 0 1px rgba(245,176,66,0.35); }

/* ── Resource detail modal (Use / Sell) ────────────────────── */
.resource-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.resource-modal { background: #14141a; border: 1px solid #2a2a35; border-radius: 12px; width: 100%; max-width: 340px; box-shadow: 0 12px 30px rgba(0,0,0,0.6); color: #ddd; font-family: inherit; }
.resource-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid #2a2a35; }
.resource-modal-title { font-weight: 700; color: #f5d76e; font-size: 14px; }
.resource-modal-close { cursor: pointer; color: #888; font-size: 16px; padding: 2px 8px; border-radius: 4px; }
.resource-modal-close:hover { color: #fff; background: #2a2a35; }
.resource-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.resource-modal-icon-wrap { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: #0e0e14; border-radius: 10px; }
.resource-modal-icon { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.resource-modal-icon-emoji { font-size: 38px; }
.resource-modal-desc { font-size: 12px; color: #aaa; text-align: center; line-height: 1.4; }
.resource-modal-stats { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid #2a2a35; border-bottom: 1px solid #2a2a35; }
.resource-stat-row { display: flex; justify-content: space-between; font-size: 12px; color: #999; }
.resource-stat-row b { color: #f5d76e; font-weight: 700; }
.resource-modal-actions { display: flex; gap: 8px; width: 100%; }
.resource-modal-btn { flex: 1; padding: 10px 14px; border: none; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 13px; color: #fff; transition: opacity 0.15s, transform 0.1s; }
.resource-modal-btn:hover:not(:disabled) { transform: translateY(-1px); }
.resource-modal-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.resource-modal-btn-use { background: linear-gradient(135deg, #2bbf3d, #1a8c2a); }
.resource-modal-btn-sell { background: linear-gradient(135deg, #2c6bff, #1e4dba); }
.resource-modal-status { font-size: 11px; min-height: 14px; text-align: center; color: #888; }