:root {
    --bg:        var(--tg-theme-bg-color, #1c1c1e);
    --card-bg:   var(--tg-theme-secondary-bg-color, #2c2c2e);
    --text:      var(--tg-theme-text-color, #ffffff);
    --hint:      var(--tg-theme-hint-color, #8e8e93);
    --accent:    var(--tg-theme-button-color, #007aff);
    --radius:    12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { background: var(--bg); color: var(--text); font-family: -apple-system, sans-serif;
       -webkit-text-size-adjust: 100%; }

/* ── Tabs ── */
.tabs { display: flex; overflow-x: auto; gap: 8px; padding: 12px 16px;
        border-bottom: 1px solid #333; scrollbar-width: none;
        -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tab { background: var(--card-bg); border: none; color: var(--hint);
       padding: 8px 14px; border-radius: 20px; cursor: pointer; white-space: nowrap;
       font-size: 14px; min-height: 36px; }
.tab.active { background: var(--accent); color: #fff; }

/* ── Filters — 2×2 grid on mobile ── */
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 16px; }
.filters select {
    background: var(--card-bg); color: var(--text); border: none;
    border-radius: 8px; padding: 8px 28px 8px 10px; font-size: 16px;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238e8e93' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    min-height: 44px; width: 100%; }
/* "Предстоящие" select spans both columns */
.filters select:last-child { grid-column: 1 / -1; }

/* ── Lot cards ── */
#lots { padding: 8px 16px 100px; }
.lot-card { background: var(--card-bg); border-radius: var(--radius);
            padding: 14px; margin-bottom: 10px; cursor: pointer;
            transition: opacity .15s; }
.lot-card:active { opacity: 0.7; }
.lot-header { display: flex; justify-content: space-between; align-items: flex-start;
              margin-bottom: 6px; gap: 8px; }
.lot-title { font-size: 15px; font-weight: 600; flex: 1;
             overflow: hidden; display: -webkit-box;
             -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.score-badge { font-size: 13px; font-weight: 700; padding: 3px 8px;
               border-radius: 10px; flex-shrink: 0; white-space: nowrap; }
.score-green  { background: #1a4731; color: #34c759; }
.score-yellow { background: #3d3200; color: #ffd60a; }
.score-red    { background: #3d1a1a; color: #ff453a; }
.lot-meta { font-size: 13px; color: var(--hint); margin-bottom: 4px; }
.lot-price { font-size: 14px; }
.lot-date { font-size: 13px; color: var(--hint); margin-bottom: 4px; }
.lot-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.tag-chip { background: #333; color: var(--hint); font-size: 11px;
            padding: 3px 8px; border-radius: 10px; }
.lot-updated { font-size: 11px; color: var(--hint); margin-left: auto; opacity: 0.6; }

.loading { text-align: center; padding: 40px; color: var(--hint); }
.empty   { text-align: center; padding: 40px; color: var(--hint); }

/* ── Bottom bar — respects iPhone home indicator ── */
.bottom-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--card-bg);
    padding: 12px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    display: flex; gap: 8px; border-top: 1px solid #333; }
.btn { background: var(--accent); color: #fff; border: none; border-radius: 10px;
       padding: 14px; font-size: 15px; font-weight: 600; cursor: pointer; flex: 1;
       min-height: 48px; }
.btn-secondary { background: var(--card-bg); color: var(--accent);
                 border: 1px solid var(--accent); }