/* Биржа подарков (05.10). Основа — стили Тайной комнаты (meet.css): шрифт сайта, тёмная сцена, карточки, окна. */
.mk-app { overflow: visible; padding: 22px 22px 40px; background: radial-gradient(120% 70% at 85% 0%, rgba(140, 30, 90, .35), transparent 60%), var(--mt-bg); }
.mk-app a { color: inherit; }
.mk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.mk-head-txt { min-width: 0; flex: 1 1 380px; }
.mk-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #c4b3c8 !important; text-decoration: none; margin-bottom: 6px; }
.mk-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.mk-head h1 { margin: 0 0 6px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.mk-head p { margin: 0; color: #c4b3c8; font-size: 16px; line-height: 1.5; } .mk-head p b { color: #6ef0a5; }
.mk-wallet { display: flex; gap: 10px; }
.mk-wallet div { padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); min-width: 120px; }
.mk-wallet small { display: block; font-size: 12px; color: #a993ad; } .mk-wallet b { font-size: 17px; color: #fff; white-space: nowrap; }
.mk-wallet div + div b { color: #6ef0a5; }

.mk-how-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mk-how-strip > div { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: rgba(110, 240, 165, .06); border: 1px solid rgba(110, 240, 165, .18); }
.mk-how-strip i { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; background: #6ef0a5; color: #10221a; }
.mk-how-strip span { font-size: 13px; color: #c4b3c8; line-height: 1.4; } .mk-how-strip b { display: block; color: #fff; font-size: 14px; }

.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.mk-stats div { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); }
.mk-stats b { display: block; font-size: 18px; color: #fff; } .mk-stats small { font-size: 12px; color: #a993ad; }

.mk-tabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin-bottom: 14px;
    background: linear-gradient(180deg, var(--mt-bg) 70%, transparent); scrollbar-width: none; }
.mk-tabs::-webkit-scrollbar { display: none; }
.mk-tabs a { flex-shrink: 0; height: 38px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04); color: #f6eef6 !important; font-size: 14px; font-weight: 600; text-decoration: none; }
.mk-tabs a.on { background-image: linear-gradient(180deg, #ff6fae, #d6377f); border-color: transparent; }
.mk-guest { padding: 24px; border-radius: 20px; background: var(--mt-surface); text-align: center; } .mk-guest p { color: #c4b3c8; }

.mk-filters { display: grid; gap: 10px; margin-bottom: 10px; }
.mk-seg .mt-opt { padding: 8px 14px; font-size: 13px; }
.mk-frow { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.1fr; gap: 8px; }
.mk-frow label { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mk-frow label[hidden] { display: none !important; }
.mk-frow small { font-size: 12px; color: #a993ad; }
.mk-frow select, .mk-frow input { height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #f6eef6;
    padding: 0 10px; font: inherit; font-size: 14px; min-width: 0; width: 100%; box-sizing: border-box; }
.mk-frow select option { background: #1d1420; }
.mk-price span { display: flex; gap: 6px; }
.mk-count { font-size: 13px; color: #a993ad; margin: 4px 0 8px; }
.mk-note { font-size: 14px; color: #c4b3c8; margin: 0 0 12px; } .mk-note a { color: #ff8fc0 !important; }

.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.mk-lot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px 12px; border-radius: 18px; cursor: pointer; text-align: center;
    background: linear-gradient(180deg, rgba(60, 26, 50, .55), rgba(25, 16, 28, .85)); border: 1px solid rgba(255, 140, 195, .16); color: #f6eef6; font-family: inherit; }
.mk-lot:hover { border-color: rgba(255, 140, 195, .45); }
.mk-lot-u { border-color: rgba(255, 207, 107, .3); }
.mk-lot > b { font-size: 14px; line-height: 1.25; }
.mk-lot-price { font-size: 17px; font-weight: 800; color: #fff; }
.mk-lot small { font-size: 12px; color: #a993ad; }
.mk-ltd { font-size: 11px; color: #ffcf6b; font-weight: 700; } .mk-ltd-off { color: #8a7a8e; font-weight: 500; }
.mk-good { color: #6ef0a5 !important; font-style: normal; }
.mk-mine { position: absolute; top: 8px; left: 8px; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(110, 240, 165, .18); color: #6ef0a5; }
.mk-sell-hint { font-size: 13px; color: #6ef0a5; font-weight: 600; }
.mk-sellbtn { margin-top: 4px; width: 100%; height: 34px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 700;
    background-image: linear-gradient(180deg, #ff6fae, #d6377f); color: #fff; }
.mk-more { margin: 14px auto 0; display: flex; }
.mk-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px; border-radius: 18px; background: rgba(255, 255, 255, .04); text-align: center; }
.mk-empty b { color: #fff; font-size: 16px; } .mk-empty span { color: #c4b3c8; max-width: 460px; line-height: 1.5; }
.mk-loading { display: flex; gap: 8px; justify-content: center; padding: 40px 0; grid-column: 1 / -1; }
.mk-loading i { width: 9px; height: 9px; border-radius: 50%; background: #ff5fa2; animation: mkDot 1s infinite ease-in-out; }
.mk-loading i:nth-child(2) { animation-delay: .15s; } .mk-loading i:nth-child(3) { animation-delay: .3s; }
@keyframes mkDot { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: none; } }
.mk-dim { color: #8a7a8e; font-size: 14px; }
.mk-up { color: #6ef0a5; } .mk-down { color: #ff8f8f; }

/* цены по видам */
.mk-table { display: grid; gap: 6px; }
.mk-tr { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr .6fr; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 14px; text-decoration: none;
    background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .05); font-size: 14px; color: #f6eef6 !important; }
a.mk-tr:hover { border-color: rgba(255, 140, 195, .35); }
.mk-th { background: none; border: 0; font-size: 12px; color: #a993ad !important; padding-top: 0; padding-bottom: 0; }
.mk-tg { display: flex; align-items: center; gap: 10px; min-width: 0; } .mk-tg > span { display: flex; flex-direction: column; min-width: 0; }
.mk-tg small { font-size: 12px; color: #a993ad; }
.mk-tr small { color: #a993ad; }

/* карточка вида */
.mk-back2 { display: inline-block; margin-bottom: 10px; font-size: 14px; color: #ff8fc0 !important; text-decoration: none; }
.mk-ghead { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .mk-ghead h2 { margin: 0 0 4px; font-size: 24px; color: #fff; }
.mk-ghead small { color: #c4b3c8; font-size: 13px; line-height: 1.4; }
.mk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.mk-kpis div { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); } .mk-kpis small { display: block; font-size: 12px; color: #a993ad; }
.mk-kpis b { font-size: 17px; color: #fff; }
.mk-chart { position: relative; height: 150px; margin-bottom: 14px; border-radius: 16px; background: rgba(255, 255, 255, .03); overflow: hidden; }
.mk-chart svg { width: 100%; height: 100%; display: block; }
.mk-line { fill: none; stroke: #ff5fa2; stroke-width: 2.5; vector-effect: non-scaling-stroke; } .mk-area { fill: rgba(255, 95, 162, .12); }
.mk-chart-hi, .mk-chart-lo { position: absolute; left: 10px; font-size: 11px; color: #a993ad; } .mk-chart-hi { top: 6px; } .mk-chart-lo { bottom: 6px; }
.mk-chart-empty { display: grid; place-items: center; color: #8a7a8e; font-size: 14px; height: 80px; }
.mk-sellbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; margin-bottom: 14px; border-radius: 16px; background: rgba(110, 240, 165, .07); border: 1px solid rgba(110, 240, 165, .25); }
.mk-sellbox > b { color: #fff; } .mk-sellbox > span { flex: 1 1 260px; color: #c4b3c8; font-size: 14px; } .mk-sellbox > span b { color: #6ef0a5; }
.mk-sellbox .mt-cta { min-width: 0; height: 44px; padding: 0 20px; }
.mk-sm { height: 40px !important; padding: 0 16px !important; font-size: 14px !important; width: auto !important; margin: 0 !important; }
.mk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.mk-app h3 { margin: 16px 0 8px; font-size: 16px; color: #fff; } .mk-app h3 small { color: #a993ad; font-weight: 500; }
.mk-list { display: grid; gap: 6px; }
.mk-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06);
    color: #f6eef6; font-family: inherit; text-align: left; cursor: pointer; width: 100%; box-sizing: border-box; }
div.mk-row { cursor: default; }
.mk-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mk-row small { font-size: 12px; color: #a993ad; }
.mk-row em { font-style: normal; font-size: 13px; font-weight: 700; color: #ff8fc0; flex-shrink: 0; }
.mk-book { display: grid; gap: 4px; margin-bottom: 10px; }
.mk-book div { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 10px; background: rgba(110, 240, 165, .06); font-size: 14px; }
.mk-book b { color: #6ef0a5; } .mk-book small { color: #a993ad; }
.mk-bidform { display: flex; gap: 8px; margin-bottom: 6px; } .mk-bidform .mt-addr { flex: 1; min-width: 0; }
.mk-bidform .mt-cta { min-width: 0; height: 46px; padding: 0 18px; flex-shrink: 0; }
.mk-mybids { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px; }
.mk-mybids span { padding: 4px 6px 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.mk-mybids button { border: 0; background: none; color: #ff8fc0; cursor: pointer; font: inherit; font-size: 12px; }
.mk-hist { display: grid; gap: 2px; font-size: 13px; }
.mk-hist div { display: grid; grid-template-columns: 1.3fr 1.6fr auto; gap: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .025); color: #c4b3c8; }
.mk-hist b { color: #fff; }

/* мои подарки и сделки */
.mk-minehead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .04); }
.mk-minehead b { color: #fff; font-size: 16px; display: block; } .mk-minehead small { color: #c4b3c8; font-size: 13px; }
.mt-earn.mk-earn { width: 100%; margin: 0 0 8px; }
.mk-wide-opt { width: 100%; margin-bottom: 4px; }
.mk-item-more { display: grid; gap: 0; margin-top: 10px; } .mk-item-more .mt-ghost { text-decoration: none; }
.mk-sheet-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 12px; font-size: 13px; } .mk-sheet-links a { color: #ff8fc0 !important; }
.mk-how { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mk-how > div { padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .04); } .mk-how h3 { margin-top: 0; }
.mk-how p { color: #c4b3c8; line-height: 1.55; margin: 0; } .mk-how b { color: #fff; }
.mk-how .mt-cta { grid-column: 1 / -1; justify-self: center; text-decoration: none; }

@media (max-width: 900px) {
    .mk-frow { grid-template-columns: 1fr 1fr; }
    .mk-cols { grid-template-columns: 1fr; }
    .mk-tr { grid-template-columns: 1fr 1fr 1fr; row-gap: 4px; }
    .mk-th { display: none; }
    .mk-tr .mk-tg { grid-column: 1 / -1; }
    .mk-tr > span[data-l]::before { content: attr(data-l); display: block; font-size: 11px; color: #8a7a8e; }
}
@media (max-width: 640px) {
    .mk-app { padding: 16px 14px 96px; border-radius: 22px; }
    .mk-how-strip { grid-template-columns: 1fr; gap: 6px; }
    .mk-how-strip > div { padding: 9px 12px; }
    .mk-stats, .mk-kpis { grid-template-columns: repeat(2, 1fr); }
    .mk-wallet { width: 100%; } .mk-wallet div { flex: 1; min-width: 0; }
    .mk-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .mk-lot .mt-u-md { width: 84px; height: 84px; }
    .mk-how { grid-template-columns: 1fr; }
    .mk-hist div { grid-template-columns: 1fr auto; } .mk-hist div span:first-child { grid-column: 1 / -1; font-size: 11px; }
    .mk-bidform { flex-wrap: wrap; } .mk-bidform .mt-cta { width: 100%; }
}

/* 05.10: на телефоне шапка компактная — рынок виден сразу */
@media (max-width: 640px) {
    .mk-head { margin-bottom: 10px; gap: 10px; } .mk-head h1 { font-size: 26px; } .mk-head p { font-size: 14px; }
    .mk-wallet div { padding: 8px 12px; } .mk-wallet b { font-size: 15px; }
    .mk-how-strip { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; margin-bottom: 10px; }
    .mk-how-strip::-webkit-scrollbar { display: none; }
    .mk-how-strip > div { flex: 0 0 72%; padding: 8px 10px; }
    .mk-stats { grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; }
    .mk-stats div { padding: 6px 6px; } .mk-stats b { font-size: 15px; } .mk-stats small { font-size: 10px; line-height: 1.2; display: block; }
}