/* ============================================
   SNEAKER.CSS – The Drop / Sneaker Lab / Hype Exchange
   ============================================ */

/* === RARITY SYSTEM === */
:root {
    --rarity-common: #8A9BA8;
    --rarity-rare:   #2F80ED;
    --rarity-epic:   #9B59B6;
    --rarity-grail:  #D4AF37;
    --rarity-cringe: #ff2d78;
    --rarity-common-bg: rgba(138,155,168,0.12);
    --rarity-rare-bg:   rgba(47,128,237,0.14);
    --rarity-epic-bg:   rgba(155,89,182,0.14);
    --rarity-grail-bg:  rgba(212,175,55,0.16);
    --rarity-cringe-bg: rgba(255,45,120,0.14);
}

/* === GAME CARDS (new) === */
.game-card-drop  { --card-accent: var(--rarity-grail); }
.game-card-lab   { --card-accent: #34C759; }
.game-card-exch  { --card-accent: var(--rarity-rare); }

/* ============================================
   THE DROP MODULE
   ============================================ */
.drop-modal { max-height: 92vh; overflow-y: auto; }
.drop-modal::-webkit-scrollbar { display: none; }

.drop-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin: 18px 0;
}

.drop-box-card {
    position: relative;
    border-radius: var(--rad-lg);
    padding: 14px 8px 12px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    border: 1.5px solid transparent;
    background: var(--bg-glass);
    backdrop-filter: blur(var(--glass-blur));
}
.drop-box-card:active { transform: scale(0.94); }
.drop-box-card.selected {
    transform: scale(1.04);
    border-color: var(--box-color, var(--chrome));
    box-shadow: 0 0 18px var(--box-glow, rgba(192,198,208,0.3));
}
.drop-box-card.gr-box     { --box-color: var(--rarity-common); --box-glow: rgba(138,155,168,0.3); }
.drop-box-card.limited-box{ --box-color: var(--rarity-rare);   --box-glow: rgba(47,128,237,0.35); }
.drop-box-card.ff-box     { --box-color: var(--rarity-grail);  --box-glow: rgba(212,175,55,0.45); }

.drop-box-icon {
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    color: var(--box-color, var(--chrome));
    filter: drop-shadow(0 2px 6px var(--box-glow, transparent));
}
.drop-box-icon svg { display: block; }
.drop-box-name {
    font-size: 10px;
    font-weight: 900;
    font-family: var(--font-head);
    color: var(--box-color, var(--text-main));
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
.drop-box-price {
    font-size: 12px;
    font-weight: 800;
    font-family: var(--font-num);
    color: var(--text-main);
}
.drop-box-badge {
    position: absolute;
    top: -6px;
    right: -4px;
    background: var(--box-color, var(--chrome));
    color: #000;
    font-size: 8px;
    font-weight: 900;
    font-family: var(--font-head);
    padding: 2px 5px;
    border-radius: 20px;
}

.drop-loot-preview {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    border: var(--border-glass);
    border-radius: var(--rad-lg);
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-head);
}
.drop-loot-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}
.drop-loot-row span:first-child { color: var(--text-main); }

.drop-pity-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 11px;
    font-family: var(--font-head);
    color: var(--text-muted);
}
.drop-pity-track {
    flex: 1;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}
.drop-pity-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rarity-rare), var(--rarity-epic));
    border-radius: 2px;
    transition: width 0.4s;
}

/* === OPENING ANIMATION === */
.drop-opening-overlay {
    position: absolute;
    inset: 0;
    background: var(--bg-main);
    border-radius: var(--rad-modal, 24px);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px 20px;
    animation: fadeIn 0.2s ease;
    pointer-events: all;
    touch-action: none;
    overflow: hidden;
}

.drop-queue-text {
    font-size: 18px;
    font-weight: 900;
    font-family: var(--font-head);
    color: var(--chrome-light);
    letter-spacing: 2px;
    animation: pulseText 1s ease-in-out infinite;
    margin-bottom: 20px;
}
@keyframes pulseText {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.drop-queue-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.drop-queue-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--chrome);
    animation: dotBounce 1.2s ease-in-out infinite;
}
.drop-queue-dot:nth-child(2) { animation-delay: 0.2s; }
.drop-queue-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
    40%           { transform: scale(1.3); opacity: 1; }
}

.drop-falling-box {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: boxFall 0.7s cubic-bezier(0.36,1.4,0.64,1) forwards;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
}
@keyframes boxFall {
    0%   { transform: translateY(-180px) scale(0.5); opacity: 0; }
    70%  { transform: translateY(10px) scale(1.08); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.drop-box-shake {
    animation: boxShakeCommon 0.5s ease;
}
.drop-box-shake-rare {
    animation: boxShakeRare 0.7s ease;
}
.drop-box-shake-epic {
    animation: boxShakeEpic 0.9s ease;
    filter: drop-shadow(0 0 12px rgba(155,89,182,0.9));
}
.drop-box-shake-grail {
    animation: boxShakeGrail 1.1s ease;
    filter: drop-shadow(0 0 20px rgba(212,175,55,1));
}
@keyframes boxShakeCommon {
    0%,100% { transform: rotate(0deg) scale(1); }
    15%     { transform: rotate(-8deg) scale(1.05); }
    35%     { transform: rotate(8deg)  scale(1.05); }
    55%     { transform: rotate(-5deg) scale(1.02); }
    75%     { transform: rotate(5deg)  scale(1.02); }
}
@keyframes boxShakeRare {
    0%,100% { transform: rotate(0deg) scale(1); }
    10%     { transform: rotate(-12deg) scale(1.08); }
    25%     { transform: rotate(12deg)  scale(1.1); }
    40%     { transform: rotate(-10deg) scale(1.08); }
    55%     { transform: rotate(10deg)  scale(1.1); }
    70%     { transform: rotate(-6deg)  scale(1.05); }
    85%     { transform: rotate(6deg)   scale(1.05); }
}
@keyframes boxShakeEpic {
    0%,100% { transform: rotate(0deg) scale(1); }
    8%      { transform: rotate(-15deg) scale(1.12); }
    20%     { transform: rotate(15deg)  scale(1.15); }
    32%     { transform: rotate(-13deg) scale(1.12); }
    44%     { transform: rotate(13deg)  scale(1.15); }
    56%     { transform: rotate(-10deg) scale(1.1); }
    68%     { transform: rotate(10deg)  scale(1.1); }
    80%     { transform: rotate(-6deg)  scale(1.05); }
    90%     { transform: rotate(6deg)   scale(1.05); }
}
@keyframes boxShakeGrail {
    0%,100% { transform: rotate(0deg) scale(1); }
    7%      { transform: rotate(-20deg) scale(1.2); }
    15%     { transform: rotate(20deg)  scale(1.25); }
    23%     { transform: rotate(-18deg) scale(1.2); }
    31%     { transform: rotate(18deg)  scale(1.25); }
    39%     { transform: rotate(-15deg) scale(1.2); }
    47%     { transform: rotate(15deg)  scale(1.22); }
    55%     { transform: rotate(-12deg) scale(1.18); }
    63%     { transform: rotate(12deg)  scale(1.18); }
    71%     { transform: rotate(-8deg)  scale(1.12); }
    79%     { transform: rotate(8deg)   scale(1.12); }
    87%     { transform: rotate(-4deg)  scale(1.06); }
    93%     { transform: rotate(4deg)   scale(1.06); }
}

/* === REVEAL CARD === */
.drop-reveal-card {
    width: 100%;
    max-width: 260px;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border: 1.5px solid var(--rarity-color, var(--chrome));
    border-radius: var(--rad-xl);
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 0 40px var(--rarity-glow, rgba(192,198,208,0.2));
    animation: revealPop 0.5s cubic-bezier(0.36,1.4,0.64,1);
}
@keyframes revealPop {
    0%   { transform: scale(0.3) rotate(-10deg); opacity: 0; }
    70%  { transform: scale(1.06) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.drop-reveal-card.grail-reveal {
    animation: revealPop 0.5s cubic-bezier(0.36,1.4,0.64,1), grailGlow 2s ease-in-out infinite;
}
@keyframes grailGlow {
    0%,100% { box-shadow: 0 0 30px rgba(212,175,55,0.4); }
    50%     { box-shadow: 0 0 60px rgba(212,175,55,0.8), 0 0 100px rgba(212,175,55,0.3); }
}

.drop-reveal-shoe-art {
    width: 180px;
    height: 130px;
    margin: 0 auto 14px;
    position: relative;
}

.drop-reveal-rarity {
    font-size: 10px;
    font-weight: 900;
    font-family: var(--font-head);
    letter-spacing: 2px;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 10px;
}
.rarity-common  { color: var(--rarity-common); background: var(--rarity-common-bg); }
.rarity-rare    { color: var(--rarity-rare);   background: var(--rarity-rare-bg);   }
.rarity-epic    { color: var(--rarity-epic);   background: var(--rarity-epic-bg);   }
.rarity-grail   { color: var(--rarity-grail);  background: var(--rarity-grail-bg);  }

.drop-reveal-name {
    font-size: 16px;
    font-weight: 900;
    font-family: var(--font-head);
    color: var(--text-main);
    margin-bottom: 2px;
}
.drop-reveal-brand {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.drop-reveal-condition {
    font-size: 13px;
    font-weight: 800;
    font-family: var(--font-head);
    color: var(--chrome-light);
    margin-bottom: 6px;
}
.drop-reveal-colorway {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.drop-reveal-actions {
    display: flex;
    gap: 8px;
}
.drop-reveal-actions .act-btn {
    flex: 1;
    font-size: 12px;
    font-weight: 800;
    padding: 13px 6px;
    margin: 0;
    letter-spacing: 0.5px;
    min-height: 44px;
}

/* Screen shake for Grail */
@keyframes screenShake {
    0%,100% { transform: translate(0,0) rotate(0deg); }
    10%     { transform: translate(-5px,3px) rotate(-1deg); }
    20%     { transform: translate(5px,-3px) rotate(1deg); }
    30%     { transform: translate(-5px,3px) rotate(-0.5deg); }
    40%     { transform: translate(5px,-2px) rotate(0.5deg); }
    50%     { transform: translate(-3px,2px) rotate(-0.5deg); }
    60%     { transform: translate(3px,-1px) rotate(0.3deg); }
    70%     { transform: translate(-2px,1px) rotate(-0.2deg); }
    80%     { transform: translate(2px,-1px) rotate(0.2deg); }
    90%     { transform: translate(-1px,0) rotate(0deg); }
}
.screen-shake {
    animation: screenShake 0.6s ease;
}

/* ============================================
   SNEAKER LAB MODULE
   ============================================ */
.lab-modal { overflow: visible; }

.lab-sneaker-select {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    max-height: 200px;
    overflow-y: auto;
}
.lab-sneaker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: var(--rad-lg);
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.lab-sneaker-row.selected { border-color: var(--rarity-rare); }
.lab-sneaker-icon { font-size: 26px; background: transparent !important; }
.lab-sneaker-icon img { border-radius: 6px; }
[data-theme="light"] .lab-sneaker-icon img { mix-blend-mode: multiply; }
[data-theme="dark"]  .lab-sneaker-icon img { mix-blend-mode: normal; }
.lab-sneaker-info { flex: 1; }
.lab-sneaker-info-name { font-size: 13px; font-weight: 800; font-family: var(--font-head); color: var(--text-main); }
.lab-sneaker-info-cond { font-size: 11px; color: var(--text-muted); }
.lab-sneaker-dirty { font-size: 10px; color: #FF9500; background: rgba(255,149,0,0.12); padding: 2px 7px; border-radius: 10px; font-weight: 800; font-family: var(--font-head); }

.lab-stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.lab-stage-label {
    font-size: 11px;
    font-weight: 900;
    font-family: var(--font-head);
    color: var(--text-muted);
    letter-spacing: 1px;
}
.lab-cond-badge {
    font-size: 13px;
    font-weight: 900;
    font-family: var(--font-num);
    color: var(--chrome-light);
    background: var(--bg-glass);
    border: var(--border-glass);
    padding: 4px 10px;
    border-radius: 10px;
}

.lab-canvas-wrap {
    position: relative;
    width: 100%;
    border-radius: var(--rad-lg);
    overflow: hidden;
    background: #0f1637;
    margin-bottom: 14px;
    touch-action: none;
    cursor: crosshair;
}
#lab-canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--rad-lg);
}

.lab-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.lab-progress-label {
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-head);
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 50px;
}
.lab-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}
.lab-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.2s;
    background: linear-gradient(90deg, #34C759, #30D158);
}
.lab-progress-pct {
    font-size: 11px;
    font-weight: 900;
    font-family: var(--font-num);
    color: var(--text-main);
    min-width: 34px;
    text-align: right;
}

.lab-tools {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.lab-tool-btn {
    flex: 1;
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    border: var(--border-glass);
    border-radius: var(--rad-lg);
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    font-family: var(--font-head);
}
.lab-tool-btn:active { transform: scale(0.95); }
.lab-tool-btn.active {
    border-color: var(--rarity-rare);
    background: rgba(47,128,237,0.1);
}
.lab-tool-btn.active.uv-mode {
    border-color: #BF5FFF;
    background: rgba(191,95,255,0.1);
}
.lab-tool-icon { font-size: 24px; margin-bottom: 4px; }
.lab-tool-name { font-size: 10px; font-weight: 800; color: var(--text-muted); letter-spacing: 0.5px; }

.lab-uv-hold-btn {
    width: 100%;
    height: 70px;
    background: linear-gradient(135deg, #4A1A7A, #7A2AB0);
    border-radius: var(--rad-lg);
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    font-family: var(--font-head);
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s;
    margin-bottom: 14px;
    touch-action: none;
}
.lab-uv-hold-btn.holding { transform: scale(0.97); background: linear-gradient(135deg, #6B2A9E, #9B40D0); }
.lab-uv-hold-fill {
    position: absolute;
    left: 0; top: 0; height: 100%;
    background: rgba(255,255,255,0.12);
    transition: width 0.1s linear;
    border-radius: var(--rad-lg);
}

/* Sole color animation */
.lab-sole-yellow { color: #FFD60A !important; }
.lab-sole-icy    { color: #A0CFFF !important; }

/* Lab result */
.lab-result-card {
    background: linear-gradient(135deg, rgba(52,199,89,0.1), rgba(48,209,88,0.05));
    border: 1px solid rgba(52,199,89,0.3);
    border-radius: var(--rad-lg);
    padding: 20px;
    text-align: center;
    margin-bottom: 14px;
}
.lab-result-score {
    font-size: 48px;
    font-weight: 900;
    font-family: var(--font-num);
    color: #34C759;
    line-height: 1;
    margin-bottom: 6px;
}
.lab-result-label {
    font-size: 12px;
    font-weight: 800;
    font-family: var(--font-head);
    color: var(--text-muted);
    letter-spacing: 1px;
}
.lab-result-gain {
    font-size: 14px;
    font-weight: 800;
    font-family: var(--font-head);
    color: #34C759;
    margin-top: 6px;
}

/* ============================================
   HYPE EXCHANGE MODULE
   ============================================ */
.exchange-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-main);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.34,1.3,0.64,1);
    overflow: hidden;
}
.exchange-overlay.active {
    transform: translateY(0);
}

.exchange-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: var(--border-glass);
    position: sticky;
    top: 0;
    background: var(--bg-main);
    z-index: 2;
    flex-shrink: 0;
}
.exchange-title {
    font-size: 18px;
    font-weight: 900;
    font-family: var(--font-head);
    letter-spacing: 1px;
    color: var(--chrome-light);
}
.exchange-close-btn {
    background: var(--bg-glass);
    border: var(--border-glass);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
    font-family: var(--font-head);
    padding: 7px 14px;
    border-radius: var(--rad-full);
    cursor: pointer;
}
.exchange-close-btn:active { transform: scale(0.95); }

/* News ticker */
.exchange-news-ticker {
    background: rgba(212,175,55,0.08);
    border-bottom: 1px solid rgba(212,175,55,0.2);
    padding: 6px 0;
    overflow: hidden;
    flex-shrink: 0;
    pointer-events: none;
    user-select: none;
}
.exchange-news-inner {
    display: inline-flex;
    gap: 40px;
    white-space: nowrap;
    animation: tickerScroll 30s linear infinite;
    padding-left: 100%;
}
/* ticker hover-pause removed — on mobile touch triggers pause */
@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.exchange-news-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-head);
    color: var(--rarity-grail);
}
.exchange-news-dot { color: var(--text-muted); }
.exchange-news-mult {
    font-size: 10px;
    background: var(--rarity-grail-bg);
    color: var(--rarity-grail);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 900;
}

/* Portfolio value */
.exchange-portfolio {
    padding: 16px 20px 12px;
    border-bottom: var(--border-glass);
    flex-shrink: 0;
}
.exchange-portfolio-label {
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-head);
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.exchange-portfolio-value {
    font-size: 30px;
    font-weight: 900;
    font-family: var(--font-num);
    color: var(--text-main);
}
.exchange-portfolio-krs { font-size: 16px; color: var(--text-muted); }
.exchange-portfolio-delta {
    font-size: 12px;
    font-weight: 800;
    font-family: var(--font-head);
    margin-top: 2px;
}
.delta-up   { color: #34C759; }
.delta-down { color: #FF3B30; }

/* Inventory list */
.exchange-inventory {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 100px;
}
.exchange-inventory::-webkit-scrollbar { display: none; }

.exchange-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: var(--text-muted);
    font-family: var(--font-head);
    font-size: 14px;
    text-align: center;
}
.exchange-empty-icon { font-size: 48px; opacity: 0.4; }

/* Sneaker card */
.snkr-card {
    background: var(--bg-glass);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: var(--border-glass);
    border-radius: var(--rad-xl);
    padding: 14px 14px 12px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s;
}
.snkr-card:active { transform: scale(0.99); }
.snkr-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--rarity-color, var(--chrome));
    border-radius: 3px 0 0 3px;
}

.snkr-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.snkr-card-art {
    width: 80px;
    height: 60px;
    border-radius: 12px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    flex-shrink: 0;
    overflow: hidden;
}
.snkr-card-info { flex: 1; min-width: 0; }
.snkr-card-name {
    font-size: 14px;
    font-weight: 900;
    font-family: var(--font-head);
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.snkr-card-brand {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.snkr-card-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.snkr-tag {
    font-size: 9px;
    font-weight: 900;
    font-family: var(--font-head);
    padding: 2px 6px;
    border-radius: 8px;
    letter-spacing: 0.3px;
}
.snkr-dirty-tag {
    color: #FF9500;
    background: rgba(255,149,0,0.12);
}
.snkr-clean-tag {
    color: #34C759;
    background: rgba(52,199,89,0.12);
}

.snkr-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.snkr-card-price {
    font-size: 16px;
    font-weight: 900;
    font-family: var(--font-num);
    color: var(--text-main);
    text-align: right;
}
.snkr-card-price-krs { font-size: 11px; color: var(--text-muted); }

/* Mini sparkline */
.snkr-sparkline-wrap { position: relative; }
.snkr-sparkline {
    display: block;
    width: 70px;
    height: 28px;
}

.snkr-card-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}
.snkr-cond-bar-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}
.snkr-cond-label {
    font-size: 10px;
    font-weight: 800;
    font-family: var(--font-head);
    color: var(--text-muted);
    white-space: nowrap;
}
.snkr-cond-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}
.snkr-cond-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #FF9500, #34C759);
}
.snkr-cond-val {
    font-size: 11px;
    font-weight: 900;
    font-family: var(--font-num);
    color: var(--text-main);
    white-space: nowrap;
    min-width: 26px;
    text-align: right;
}

.snkr-sell-btn {
    background: linear-gradient(135deg, #1B4F1B, #2A6E2A);
    color: #34C759;
    border: 1px solid rgba(52,199,89,0.3);
    border-radius: var(--rad-sm);
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 900;
    font-family: var(--font-head);
    cursor: pointer;
    transition: transform 0.1s;
    white-space: nowrap;
}
.snkr-sell-btn:active { transform: scale(0.94); }

.snkr-clean-btn {
    background: linear-gradient(135deg, #1C3A5E, #274E78);
    color: var(--rarity-rare);
    border: 1px solid rgba(47,128,237,0.3);
    border-radius: var(--rad-sm);
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 900;
    font-family: var(--font-head);
    cursor: pointer;
    transition: transform 0.1s;
    white-space: nowrap;
}
.snkr-clean-btn:active { transform: scale(0.94); }

/* ============================================
   GOD MODE ADMIN TAB
   ============================================ */
.hype-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.hype-stat-card {
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: var(--rad-lg);
    padding: 14px;
    text-align: center;
}
.hype-stat-val {
    font-size: 22px;
    font-weight: 900;
    font-family: var(--font-num);
    color: var(--chrome-light);
    margin-bottom: 4px;
}
.hype-stat-label {
    font-size: 10px;
    font-weight: 800;
    font-family: var(--font-head);
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.hype-action-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
.hype-pump-btn {
    background: linear-gradient(135deg, #1B4A1B, #226822);
    border: 1px solid rgba(52,199,89,0.4);
    color: #34C759;
    border-radius: var(--rad-lg);
    padding: 16px 8px;
    font-size: 13px;
    font-weight: 900;
    font-family: var(--font-head);
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s;
}
.hype-pump-btn:active { transform: scale(0.95); }
.hype-crash-btn {
    background: linear-gradient(135deg, #4A1B1B, #6E2222);
    border: 1px solid rgba(255,59,48,0.4);
    color: #FF3B30;
    border-radius: var(--rad-lg);
    padding: 16px 8px;
    font-size: 13px;
    font-weight: 900;
    font-family: var(--font-head);
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s;
}
.hype-crash-btn:active { transform: scale(0.95); }

.hype-btn-icon { font-size: 22px; display: block; margin-bottom: 4px; }

.drop-rate-row {
    margin-bottom: 16px;
}
.drop-rate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.drop-rate-name {
    font-size: 12px;
    font-weight: 800;
    font-family: var(--font-head);
    color: var(--text-main);
}
.drop-rate-val {
    font-size: 12px;
    font-weight: 900;
    font-family: var(--font-num);
    color: var(--chrome-light);
}
.drop-rate-slider {
    width: 100%;
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-elevated);
    outline: none;
}
.drop-rate-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--chrome-light);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Sneaker art SVG helper */
.snkr-art-svg {
    width: 100%;
    height: 100%;
}

/* Game card SVG icons for new games */
.gc-drop-icon { font-size: 38px; margin: 4px 0 8px; display: block; text-align: center; }

/* Exchange fab button */
.exchange-fab {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rarity-rare), #1A5FBD);
    border: none;
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(47,128,237,0.4);
    cursor: pointer;
    z-index: 500;
    transition: transform 0.2s, opacity 0.2s;
    display: none;
}
.exchange-fab.visible { display: flex; }
.exchange-fab:active { transform: scale(0.9); }

/* ===================================
   LAB TABS + CATALOG (added)
   =================================== */
.lab-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.lab-tab-btn {
    flex: 1;
    padding: 10px 8px;
    border-radius: var(--rad-full);
    border: var(--border-glass);
    background: var(--bg-glass);
    color: var(--text-muted);
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--btn-transition);
}
.lab-tab-btn.active {
    background: rgba(192,198,208,0.15);
    color: var(--chrome-light);
    border-color: var(--chrome);
}
.lab-empty-msg {
    text-align: center;
    color: var(--text-muted);
    padding: 24px 16px;
    font-size: 13px;
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.6;
}
.lab-empty-msg span { font-size: 11px; opacity: 0.6; }

.lab-catalog-card {
    display: flex;
    gap: 12px;
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: var(--rad-lg);
    padding: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: var(--btn-transition);
}
.lab-catalog-card:active { transform: scale(0.98); }
.lab-catalog-card.selected { border-color: var(--chrome); background: rgba(192,198,208,0.08); }
.lab-catalog-card.done { opacity: 0.55; }

.lab-catalog-photo {
    position: relative;
    width: 80px;
    min-width: 80px;
    height: 80px;
    border-radius: var(--rad-md);
    overflow: hidden;
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lab-catalog-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lab-catalog-photo-fallback {
    font-size: 32px;
}
.lab-catalog-done-badge {
    position: absolute;
    inset: 0;
    background: rgba(52,199,89,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    font-family: var(--font-head);
}
.lab-catalog-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lab-catalog-name {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.lab-catalog-brand {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.lab-catalog-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    font-family: var(--font-head);
}
.lab-catalog-reward {
    color: var(--rarity-rare);
    font-weight: 800;
}

/* Admin catalog items in God Mode */
.godmode-catalog-list { margin-top: 10px; }
.godmode-catalog-item {
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border: var(--border-glass);
    border-radius: var(--rad-md);
    padding: 8px;
    margin-bottom: 6px;
}
.godmode-catalog-item img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
}
.godmode-catalog-item-info { flex: 1; }
.godmode-catalog-item-name { font-family: var(--font-head); font-weight: 700; font-size: 12px; }
.godmode-catalog-item-meta { font-size: 11px; color: var(--text-muted); }
.godmode-catalog-del {
    background: rgba(255,59,48,0.12);
    border: 1px solid rgba(255,59,48,0.25);
    color: var(--red, #FF3B30);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-family: var(--font-head);
    cursor: pointer;
}

/* Text centering fixes for modals */
.modal .game-modal-header { text-align: center; }
.drop-reveal-card { text-align: center; }
.lab-result-card  { text-align: center; }
.exchange-portfolio { text-align: center; }

/* Screen-shake for Grail */
@keyframes screen-shake {
    0%,100% { transform: translate(0,0) rotate(0deg); }
    20%      { transform: translate(-4px,2px) rotate(-0.5deg); }
    40%      { transform: translate(4px,-2px) rotate(0.5deg); }
    60%      { transform: translate(-3px,3px) rotate(-0.3deg); }
    80%      { transform: translate(3px,-1px) rotate(0.3deg); }
}
.screen-shake { animation: screen-shake 0.7s ease; }

/* ===================================
   LAB TREATMENTS
   =================================== */
.lab-treatments-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.lab-treat-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 6px;
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: var(--rad-md);
    cursor: pointer;
    transition: var(--btn-transition);
    position: relative;
    overflow: hidden;
}
.lab-treat-btn:active { transform: scale(0.96); }
.lab-treat-btn:disabled { opacity: 0.4; }
.lab-treat-icon { font-size: 22px; }
.lab-treat-name { font-family: var(--font-head); font-weight: 800; font-size: 11px; color: var(--text-primary); }
.lab-treat-boost {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 12px;
    color: var(--rarity-common, #34C759);
}
.lab-treat-premium {
    border-color: rgba(212,175,55,0.4);
    background: rgba(212,175,55,0.07);
}
.lab-treat-premium .lab-treat-boost { color: var(--rarity-grail, #D4AF37); }

/* ===================================
   EXCHANGE FLASH DEAL
   =================================== */
.flash-deal-banner {
    background: linear-gradient(135deg, #1a0a00, #3a1500);
    border: 1px solid rgba(255,149,0,0.35);
    border-radius: var(--rad-lg);
    padding: 12px 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.flash-deal-badge {
    background: #FF9F0A;
    color: #000;
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 99px;
    white-space: nowrap;
}
.flash-deal-info { flex: 1; }
.flash-deal-name { font-family: var(--font-head); font-weight: 800; font-size: 13px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.flash-deal-price {
    font-family: var(--font-head);
    font-size: 12px;
    color: #FF9F0A;
    margin-top: 2px;
}
.flash-deal-price s { color: var(--text-muted); margin-right: 5px; font-weight: 400; }
.flash-deal-timer { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

.exchange-trends {
    margin-bottom: 14px;
}
.exchange-trends-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.trends-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.trend-chip {
    flex: 0 0 auto;
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: 99px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
}
.trend-chip-up { border-color: rgba(52,199,89,0.3); }
.trend-chip-down { border-color: rgba(255,59,48,0.3); }
.trend-chip-arrow { font-size: 12px; }

/* ===================================
   МАРКЕТ P2P — Оверлей
   =================================== */
.market-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--bg-main);
    z-index: 1100;
    flex-direction: column;
    overflow: hidden;
    display: none;
}
.market-overlay[style*="flex"] { display: flex !important; }

.market-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    background: var(--bg-glass);
    border-bottom: var(--border-glass);
    backdrop-filter: blur(16px);
    flex-shrink: 0;
}
.market-title-text {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 22px;
    color: var(--chrome-light);
    letter-spacing: 2px;
}
.market-subtitle-text {
    font-family: var(--font-head);
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.market-close-btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--chrome-light);
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 99px;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.market-stats-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background: rgba(192,198,208,0.04);
    border-bottom: 1px solid rgba(192,198,208,0.08);
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.market-stats-bar b { color: var(--chrome-light); }

.market-tabs {
    display: flex;
    gap: 0;
    padding: 10px 16px 0;
    background: var(--bg-main);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.market-tab-btn {
    flex: 1;
    padding: 10px 0;
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 1px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: 0.2s;
}
.market-tab-btn.active {
    color: var(--chrome-light);
    border-bottom-color: var(--chrome);
}

#market-buy-panel, #market-sell-panel {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 120px;
}

.market-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.market-filter-sel {
    flex: 1;
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: var(--rad-md);
    color: var(--text-primary);
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    padding: 10px 10px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.market-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.market-card {
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: var(--rad-lg);
    overflow: hidden;
    transition: transform 0.15s;
}
.market-card:active { transform: scale(0.97); }
.market-card-art {
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.market-card-body { padding: 10px; }
.market-card-rarity {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.market-card-name {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 2px;
}
.market-card-meta {
    font-family: var(--font-head);
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.market-card-seller {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.market-card-price {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 15px;
    color: var(--chrome-light);
    margin-bottom: 8px;
}
.market-buy-btn {
    width: 100%;
    padding: 9px 0;
    font-size: 11px;
    margin: 0;
}

.rarity-border-common { border-color: rgba(140,150,160,0.3) !important; }
.rarity-border-rare   { border-color: rgba(90,160,240,0.35) !important; }
.rarity-border-epic   { border-color: rgba(191,95,255,0.35) !important; }
.rarity-border-grail  { border-color: rgba(212,175,55,0.4) !important; }

/* Мои лоты */
.market-my-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: var(--rad-lg);
    padding: 12px 14px;
    margin-bottom: 8px;
}
.market-my-art { font-size: 28px; flex-shrink: 0; }
.market-my-info { flex: 1; }
.market-my-name {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 13px;
    color: var(--text-primary);
}
.market-my-price {
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--chrome-light);
    margin-top: 2px;
}
.market-cancel-btn {
    background: rgba(255,59,48,0.08);
    border: 1px solid rgba(255,59,48,0.2);
    color: #FF3B30;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 10px;
    padding: 5px 10px;
    border-radius: 99px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: 0.3px;
}

/* Форма продажи */
.market-sell-section {
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: var(--rad-lg);
    padding: 14px;
    margin-top: 12px;
}
.market-sell-title {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 12px;
    color: var(--chrome-light);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}
.market-sell-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--rad-md);
    margin-bottom: 6px;
    cursor: pointer;
    transition: 0.15s;
}
.market-sell-row.selected {
    border-color: rgba(192,198,208,0.4);
    background: rgba(192,198,208,0.06);
}
.market-sell-emoji { font-size: 24px; flex-shrink: 0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:6px; overflow:hidden; }

.market-empty {
    text-align: center;
    padding: 32px 0;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
}
.market-loading {
    text-align: center;
    padding: 32px 0;
    font-family: var(--font-head);
    font-size: 13px;
    color: var(--text-muted);
}

.market-glass-bal {
    position: fixed;
    bottom: 80px;
    right: 16px;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    border: var(--border-glass);
    border-radius: 99px;
    padding: 8px 14px;
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 13px;
    color: var(--chrome-light);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 1101;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* ===================================
   КАРТОЧКА МАРКЕТ в grids
   =================================== */
.game-card-market {
    background: linear-gradient(135deg, #0f1524, #192030);
    border-color: rgba(192,198,208,0.2);
}
.game-card-market:hover, .game-card-market:active {
    border-color: rgba(192,198,208,0.4);
}

/* ===================================
   ЛОСЬОН ТАП-ТОЧКИ (Лаборатория)
   =================================== */
.lab-lotion-dot {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(52,199,89,0.18);
    border: 2.5px solid #34C759;
    color: #34C759;
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 13px;
    cursor: pointer;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s, border-color 0.15s;
    z-index: 5;
    box-shadow: 0 0 10px rgba(52,199,89,0.3);
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
.lab-lotion-dot:active { transform: translate(-50%,-50%) scale(0.9); }
.lab-lotion-dot.tapped {
    background: rgba(52,199,89,0.5);
    border-color: transparent;
    color: #000;
    transform: translate(-50%,-50%) scale(0.7);
    pointer-events: none;
    box-shadow: 0 0 16px rgba(52,199,89,0.6);
}

/* ===================================
   УВЕДОМЛЕНИЯ
   =================================== */
.notif-bell {
    position: relative;
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: 0.15s;
}
.notif-bell:active { transform: scale(0.92); }
.notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #FF3B30;
    color: #fff;
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-main);
    line-height: 1;
}

.notif-panel {
    background: var(--bg-glass);
    border: var(--border-glass);
    backdrop-filter: blur(16px);
    border-radius: var(--rad-lg);
    margin-bottom: 12px;
    overflow: hidden;
    animation: slideDown 0.2s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.notif-item {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: rgba(192,198,208,0.04); }
.notif-item.unread::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chrome);
    margin-right: 8px;
    vertical-align: middle;
}
.notif-text {
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.4;
}
.notif-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
    font-family: var(--font-head);
}
.notif-empty {
    padding: 20px;
    text-align: center;
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--text-muted);
}

/* ===================================
   ШИРОКАЯ КНОПКА МАРКЕТ (под сеткой)
   =================================== */
.market-wide-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(192,198,208,0.07), rgba(192,198,208,0.04));
    border: 1px solid rgba(192,198,208,0.2);
    border-radius: var(--rad-xl);
    margin-top: 12px;
    cursor: pointer;
    gap: 12px;
    transition: transform 0.15s, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.market-wide-btn:active { transform: scale(0.98); opacity: 0.85; }
.market-wide-badge {
    background: var(--chrome, #c0c6d0);
    color: #000;
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 3px 9px;
    border-radius: 99px;
    flex-shrink: 0;
}
.market-wide-label {
    flex: 1;
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 14px;
    color: var(--chrome-light, #e0e8f0);
    text-align: left;
    letter-spacing: 0.5px;
}
.market-wide-arrow {
    color: var(--chrome, #c0c6d0);
    font-size: 26px;
    font-weight: 300;
    flex-shrink: 0;
    line-height: 1;
}

/* ===================================
   ГОРЯЩАЯ СДЕЛКА — кнопка КУПИТЬ
   =================================== */
.flash-deal-banner {
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
}
.flash-deal-buy-btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, #FF9F0A, #FF6B00);
    border: none;
    border-radius: var(--rad-md, 12px);
    color: #000;
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 10px 14px;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(255,149,0,0.35);
}
.flash-deal-buy-btn:active { transform: scale(0.95); }
.flash-deal-buy-btn:disabled { opacity: 0.6; pointer-events: none; }

/* ===================================
   МАРКЕТ МОИ ЛОТЫ — исправление layout
   =================================== */
.market-my-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: var(--rad-lg);
    padding: 12px 14px;
    margin-bottom: 8px;
    overflow: hidden;
}
.market-my-art {
    font-size: 26px;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}
.market-my-info {
    flex: 1;
    min-width: 0;
}
.market-my-name {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 13px;
    color: var(--text-primary, #e8eaf0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.market-my-price {
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--chrome-light, #e0e8f0);
    margin-top: 2px;
    white-space: nowrap;
}
.market-cancel-btn {
    background: rgba(255,59,48,0.08);
    border: 1px solid rgba(255,59,48,0.2);
    color: #FF3B30;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 10px;
    padding: 5px 10px;
    border-radius: 99px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
    transition: background 0.15s;
    letter-spacing: 0.3px;
}
.market-cancel-btn:active { background: rgba(255,59,48,0.18); }

/* ===================================
   СВЕТЛАЯ ТЕМА — адаптация sneaker-модулей
   =================================== */

/* — Маркет (вторичный рынок) — */
[data-theme="light"] .market-overlay {
    background: var(--bg-main) !important;
}
[data-theme="light"] .market-header {
    background: rgba(255,255,255,0.75) !important;
    border-bottom-color: rgba(0,20,80,0.08) !important;
    backdrop-filter: blur(16px) !important;
}
[data-theme="light"] .market-title-text { color: var(--chrome-light) !important; }
[data-theme="light"] .market-subtitle-text { color: var(--text-muted) !important; }
[data-theme="light"] .market-close-btn {
    background: rgba(0,20,80,0.06) !important;
    border-color: rgba(0,20,80,0.12) !important;
    color: var(--text-main) !important;
}
[data-theme="light"] .market-stats-bar {
    background: rgba(0,20,80,0.04) !important;
    border-color: rgba(0,20,80,0.06) !important;
}
[data-theme="light"] .market-stats-bar b { color: var(--chrome-light) !important; }
[data-theme="light"] .market-tabs {
    background: rgba(0,20,80,0.04) !important;
    border-color: rgba(0,20,80,0.08) !important;
}
[data-theme="light"] .market-tab-btn { color: var(--text-muted) !important; }
[data-theme="light"] .market-tab-btn.active {
    background: rgba(255,255,255,0.9) !important;
    color: var(--chrome-light) !important;
    border-color: rgba(0,20,80,0.08) !important;
}
[data-theme="light"] .market-filter-sel {
    background: rgba(255,255,255,0.6) !important;
    border-color: rgba(0,20,80,0.1) !important;
    color: var(--text-main) !important;
}
[data-theme="light"] .market-card {
    background: rgba(255,255,255,0.6) !important;
    border-color: rgba(0,20,80,0.08) !important;
}
[data-theme="light"] .market-card:hover,
[data-theme="light"] .market-card:active {
    border-color: rgba(0,20,80,0.18) !important;
    background: rgba(255,255,255,0.85) !important;
}
[data-theme="light"] .market-my-card {
    background: rgba(255,255,255,0.6) !important;
    border-color: rgba(0,20,80,0.08) !important;
}
[data-theme="light"] .market-wide-btn {
    background: rgba(255,255,255,0.6) !important;
    border-color: rgba(0,20,80,0.1) !important;
}
[data-theme="light"] .market-wide-label { color: #1a1e36; }

/* — Маркет карточки на главном экране — */
[data-theme="light"] .game-card-market {
    background: linear-gradient(135deg, #e8edf8, #f0f4fc) !important;
    border-color: rgba(0,20,80,0.1) !important;
}
[data-theme="light"] .game-card-market .game-title { color: var(--chrome-light) !important; }

/* — Кнопки в карточках кроссовок (инвентарь/биржа) — */
[data-theme="light"] .snkr-sell-btn {
    background: linear-gradient(135deg, #1d8a35, #27b548) !important;
    color: #fff !important;
}
[data-theme="light"] .snkr-clean-btn {
    background: linear-gradient(135deg, #2a5fa0, #3a7acc) !important;
    color: #fff !important;
}

/* — Панель уведомлений — */
[data-theme="light"] .notif-panel {
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-color: rgba(0,20,80,0.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,40,0.12) !important;
}
[data-theme="light"] .notif-panel .notif-text { color: var(--text-main) !important; }
[data-theme="light"] .notif-panel .notif-time { color: var(--text-muted) !important; }
[data-theme="light"] .notif-panel-header {
    border-bottom-color: rgba(0,20,80,0.08) !important;
    color: var(--text-main) !important;
}
[data-theme="light"] .notif-item {
    border-bottom-color: rgba(0,20,80,0.05) !important;
}
[data-theme="light"] .notif-bell {
    background: rgba(0,20,80,0.06) !important;
    border-color: rgba(0,20,80,0.12) !important;
    color: var(--chrome-light) !important;
}

/* — Лаборатория — */
[data-theme="light"] #m-lab .modal.lab-modal {
    background: var(--bg-surface-solid) !important;
    border-color: rgba(0,20,80,0.1) !important;
}
[data-theme="light"] #m-lab .lab-empty-msg { color: var(--text-muted) !important; }
[data-theme="light"] #m-lab .lab-stage-label { color: var(--text-muted) !important; }
[data-theme="light"] #m-lab .lab-stage-title { color: var(--text-main) !important; }
[data-theme="light"] #m-lab .lab-stage-desc  { color: var(--text-muted) !important; }
/* Канвас лаборатории — фон совпадает с модалкой */
[data-theme="light"] .lab-canvas-wrap { background: #ffffff !important; }

/* — Выбор в select элементах — */
[data-theme="light"] select,
[data-theme="light"] .inp[type="select"],
[data-theme="light"] select.inp,
[data-theme="light"] select.adm-sel {
    background: rgba(255,255,255,0.8) !important;
    color: var(--text-main) !important;
    border-color: rgba(0,20,80,0.15) !important;
}

/* МАРКЕТ широкая кнопка — иконка и двухстрочный текст */
.market-wide-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}
.market-wide-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
.market-wide-title {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 15px;
    color: var(--chrome-light, #e0e8f0);
    letter-spacing: 0.8px;
    line-height: 1.1;
}
.market-wide-sub {
    font-family: var(--font-head);
    font-size: 11px;
    color: var(--chrome, #c0c6d0);
    letter-spacing: 0.3px;
    opacity: 0.7;
}
[data-theme="light"] .market-wide-title { color: #1a1e36; }
[data-theme="light"] .market-wide-sub { color: #3a4060; }
[data-theme="light"] .market-sell-title { color: #1a1e36; }
[data-theme="light"] .market-sell-row {
    background: rgba(0,20,80,0.03);
    border-color: rgba(0,20,80,0.08);
}
[data-theme="light"] .market-sell-row.selected {
    border-color: rgba(78,94,130,0.4);
    background: rgba(78,94,130,0.06);
}

/* ======================================================
   АДАПТИВ: Sneaker-модули на маленьких экранах
   ====================================================== */
@media screen and (max-width: 375px) {
    /* Маркет оверлей */
    .market-header { padding: 12px 14px !important; }
    .market-title-text { font-size: 16px !important; }
    .market-tab { font-size: 11px !important; padding: 8px 10px !important; }
    .market-tabs { gap: 4px !important; }

    /* Карточки кроссовок */
    .snkr-card { padding: 10px 12px !important; gap: 10px !important; }
    .snkr-card-emoji { font-size: 24px !important; width: 40px !important; }
    .snkr-card-name { font-size: 13px !important; }
    .snkr-card-model { font-size: 10px !important; }
    .snkr-cond-val { font-size: 13px !important; }

    /* Мои лоты в маркете */
    .market-my-card { padding: 10px 12px !important; }
    .market-my-art { font-size: 22px !important; width: 30px !important; }
    .market-my-name { font-size: 12px !important; }
    .market-my-price { font-size: 11px !important; }
    .market-cancel-btn { font-size: 10px !important; padding: 6px 10px !important; }

    /* Лаб этапы */
    .lab-stage { padding: 14px !important; }
    .lab-stage-emoji { font-size: 24px !important; }
    .lab-stage-title { font-size: 13px !important; }

    /* Биржа */
    .exchange-portfolio { padding: 14px !important; }
    .portfolio-val { font-size: 26px; }
    .exchange-trends .trends-grid { gap: 8px !important; }

    /* Горящая сделка */
    .flash-deal-banner { padding: 10px 12px !important; }
    .flash-deal-name { font-size: 12px !important; }
    .flash-deal-buy-btn { font-size: 11px !important; padding: 8px 11px !important; }
}

@media screen and (max-width: 320px) {
    .market-title-text { font-size: 14px !important; }
    .snkr-card-emoji { font-size: 20px !important; }
    .market-tab { font-size: 10px !important; padding: 7px 8px !important; }
    .flash-deal-banner { flex-wrap: wrap; }
    .flash-deal-buy-btn { width: 100%; text-align: center; }
}

/* ======================================================
   ИНВЕНТАРЬ — двухвкладочный (Кроссовки / Плюшки)
   ====================================================== */
.inv-modal { padding: 20px; }
.inv-tabs {
    display: flex; gap: 6px; margin-bottom: 14px;
}
.inv-tab {
    flex: 1; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(192,198,208,0.2);
    background: rgba(255,255,255,0.04); color: var(--text-muted); font-size: 12px; font-weight: 700;
    cursor: pointer; letter-spacing: 0.3px; transition: all 0.2s;
}
.inv-tab.active {
    background: rgba(192,198,208,0.15); color: var(--chrome); border-color: var(--chrome);
}
.inv-section { max-height: 60vh; overflow-y: auto; padding-right: 2px; }
.inv-empty { text-align: center; color: var(--text-muted); padding: 30px 16px; font-size: 14px; line-height: 1.6; }

/* Карточка кроссовка в инвентаре */
.inv-snk-card {
    display: flex; align-items: center; gap: 12px; padding: 11px 13px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(192,198,208,0.1);
    border-radius: 12px; margin-bottom: 8px; cursor: pointer; transition: background 0.15s;
}
.inv-snk-card:active { background: rgba(255,255,255,0.08); }
.inv-snk-emoji { font-size: 28px; width: 36px; text-align: center; flex-shrink: 0; }
.inv-snk-info { flex: 1; min-width: 0; }
.inv-snk-name { font-weight: 800; font-size: 13px; color: var(--chrome-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-snk-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; flex-wrap: wrap; }
.inv-snk-price { font-size: 12px; font-weight: 700; color: var(--green); text-align: right; flex-shrink: 0; line-height: 1.3; }
.inv-snk-bar-mini {
    height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 4px;
}
.inv-snk-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s; }

/* Бейджи состояния */
.snk-state-badge {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap;
}
.snk-state-badge.dirty { background: rgba(255,159,10,0.15); color: #ff9f0a; }
.snk-state-badge.clean { background: rgba(52,199,89,0.15); color: var(--green); }
.snk-state-badge.market { background: rgba(33,150,243,0.15); color: #2196f3; }

/* Тег редкости */
.snk-rarity-tag {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; border-width: 1px; border-style: solid;
}

/* Кнопка крафт-намёк */
.craft-hint-btn {
    background: rgba(156,39,176,0.12) !important; border: 1px solid rgba(156,39,176,0.4) !important;
    color: #e040fb !important; font-size: 12px !important; margin-bottom: 14px !important; padding: 10px !important;
}

/* ======================================================
   ДЕТАЛИ КРОССОВКА
   ====================================================== */
.snk-detail-modal { padding: 20px; position: relative; padding-top: 50px; }
.snk-stats-block { display: flex; flex-direction: column; gap: 8px; }
.snk-stat-row { display: flex; align-items: center; gap: 8px; }
.snk-stat-ico { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.snk-stat-lbl { font-size: 12px; color: var(--text-muted); width: 62px; flex-shrink: 0; }
.snk-stat-bar {
    flex: 1; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden;
}
.snk-stat-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.snk-stat-num { font-size: 12px; font-weight: 700; color: var(--chrome); width: 26px; text-align: right; flex-shrink: 0; }

/* ======================================================
   УХОД — кнопки в деталях кроссовка
   ====================================================== */
.care-btns-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.care-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(192,198,208,0.15);
    border-radius: 10px; cursor: pointer; transition: background 0.15s; text-align: center;
}
.care-btn:active { background: rgba(192,198,208,0.12); }
.care-btn-em { font-size: 20px; }
.care-btn-nm { font-size: 10px; font-weight: 700; color: var(--chrome-light); line-height: 1.2; }
.care-btn-pr { font-size: 10px; color: var(--green); font-weight: 700; }

/* Карточки ухода в магазине */
.care-product-card { margin-bottom: 12px; padding: 14px 16px; }

/* ======================================================
   КРАФТИНГ
   ====================================================== */
.craft-modal { padding: 20px; }
.craft-slots {
    display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0;
}
.craft-slot {
    width: 110px; height: 110px; border-radius: 14px; border: 2px dashed rgba(192,198,208,0.3);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: rgba(255,255,255,0.03); transition: all 0.2s;
}
.craft-slot.selected { border-style: solid; }
.craft-slot:active { transform: scale(0.96); }
.craft-slot-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.craft-arrow { font-size: 22px; color: var(--chrome); flex-shrink: 0; }

/* ======================================================
   АДАПТИВ для новых компонентов
   ====================================================== */
@media (max-width: 375px) {
    .care-btns-grid { grid-template-columns: 1fr 1fr; gap: 5px; }
    .care-btn { padding: 8px 4px; }
    .care-btn-em { font-size: 18px; }
    .care-btn-nm { font-size: 9px; }
    .craft-slot { width: 95px; height: 95px; }
    .snk-stat-lbl { width: 52px; font-size: 11px; }
    .inv-snk-card { padding: 9px 10px; gap: 9px; }
}

/* --- LAB BUBBLE PARTICLES --- */
@keyframes labBubblePop {
    0%   { transform: scale(1) translateY(0);   opacity: 0.9; }
    60%  { transform: scale(1.3) translateY(-14px); opacity: 0.5; }
    100% { transform: scale(0.5) translateY(-26px); opacity: 0; }
}
#lab-canvas.uv-active {
    filter: drop-shadow(0 0 10px #a855f7) drop-shadow(0 0 22px #7c3aed);
    transition: filter 0.15s;
}

/* ── UV-СЦЕНА: частицы и лучи ── */
.uv-ptcl {
    position: absolute;
    left: var(--x);
    bottom: -8px;
    width: var(--sz);
    height: var(--sz);
    border-radius: 50%;
    background: rgba(210, 130, 255, 0.95);
    box-shadow: 0 0 5px 2px rgba(185,80,255,0.75), 0 0 12px 4px rgba(145,40,255,0.45);
    animation: uvFloat var(--dur) var(--delay, 0s) ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}
@keyframes uvFloat {
    0%   { transform: translateY(0) translateX(0);          opacity: 0; }
    8%   { opacity: 1; }
    45%  { transform: translateY(-55px) translateX(8px);    opacity: 0.85; }
    75%  { transform: translateY(-100px) translateX(-6px);  opacity: 0.5; }
    100% { transform: translateY(-148px) translateX(4px);   opacity: 0; }
}
.uv-ray {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(175,65,255,0.55) 0%, rgba(140,30,240,0.15) 55%, transparent 100%);
    transform-origin: top center;
    transform: translateX(-50%) rotate(var(--a));
    opacity: var(--op);
    pointer-events: none;
    animation: uvRayPulse 3.5s ease-in-out infinite alternate;
}
@keyframes uvRayPulse {
    from { opacity: var(--op); }
    to   { opacity: calc(var(--op) * 1.8); }
}

/* ── SWIPE CONFIRM — светлая тема ── */
[data-theme="light"] #swipe-overlay { background: rgba(0,0,0,0.45); }
[data-theme="light"] .swipe-modal {
    background: #ffffff;
    border-top: 1px solid rgba(0,20,80,0.08);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.1);
}
[data-theme="light"] .swipe-title  { color: #1a1e36; }
[data-theme="light"] .swipe-subtitle { color: #6b7280; }
[data-theme="light"] .swipe-track  { background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.1); }
[data-theme="light"] .swipe-text   { color: rgba(0,0,0,0.35); }
[data-theme="light"] .swipe-fill   { background: linear-gradient(90deg, rgba(0,80,200,0.08), rgba(0,80,200,0.22)); }
[data-theme="light"] .swipe-close  { color: #9ca3af; }
[data-theme="light"] .swipe-close:active { color: #374151; }

/* --- CRAFT REVEAL ANIMATIONS --- */
@keyframes craftReveal {
    0% { opacity: 0; transform: scale(0.3) rotate(-10deg); }
    70% { transform: scale(1.1) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes craftBounce {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.3); opacity: 1; }
    80% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* ── BULK SELL — Массовая продажа ── */
.exch-select-bar {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.exch-select-bar.active { display: flex; }
.exch-sel-info { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: #e8eaf6; }
.exch-sel-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: #e8eaf6;
    border-radius: 10px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    cursor: pointer;
}
.exch-sel-btn.exch-sel-cancel { color: #FF3B30; border-color: rgba(255,59,48,0.3); }

/* Select mode button in header */
.exch-select-toggle {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #b0b8d0;
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    cursor: pointer;
    margin-left: 8px;
}
.exch-select-toggle.active-sel {
    background: rgba(52,199,89,0.15);
    border-color: rgba(52,199,89,0.4);
    color: #34C759;
}

/* Card selection state */
.snkr-card.selected-card {
    outline: 2px solid #34C759;
    outline-offset: -2px;
    background: rgba(52,199,89,0.07) !important;
}
.snkr-card .snkr-sel-check {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.3);
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all .15s;
}
.exchange-inventory.select-mode .snkr-card { cursor: pointer; position: relative; }
.exchange-inventory.select-mode .snkr-card .snkr-sel-check { display: flex; }
.exchange-inventory.select-mode .snkr-card.selected-card .snkr-sel-check {
    background: #34C759;
    border-color: #34C759;
}
.exchange-inventory.select-mode .snkr-sell-btn { display: none; }
.exchange-inventory.select-mode .snkr-clean-btn { display: none; }

/* Floating bulk sell bar */
.exch-bulk-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1300;
    background: linear-gradient(180deg, rgba(13,21,48,0.96) 0%, #0d1530 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(52,199,89,0.35);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    align-items: center;
    gap: 12px;
    box-shadow: 0 -12px 40px rgba(0,0,0,0.6);
}
.exch-bulk-bar.visible { display: flex; }
.exch-bulk-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.exch-bulk-count { font-size: 11px; font-weight: 700; color: #8899bb; letter-spacing: .5px; text-transform: uppercase; }
.exch-bulk-total { font-size: 20px; font-weight: 900; color: #34C759; letter-spacing: -.3px; }
.exch-bulk-sell-btn {
    background: linear-gradient(135deg, #34C759, #2da84a);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .8px;
    cursor: pointer;
    min-width: 110px;
    box-shadow: 0 4px 16px rgba(52,199,89,0.35);
}
.exch-bulk-sell-btn:active { transform: scale(.97); }

/* ── ТРЁХУРОВНЕВЫЕ ДОСТИЖЕНИЯ ── */
.ach-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 10px;
}
.ach-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.ach-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chrome-light);
    flex-shrink: 0;
}
.ach-card-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--chrome-light);
    font-family: var(--font-head);
    letter-spacing: .3px;
}

/* Тиры */
.ach-tiers-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.ach-tier-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.ach-tier-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    transition: all .2s;
}
.ach-tier-badge.locked {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}
.ach-tier-badge.claimed {
    background: rgba(0,0,0,.25);
    border-color: var(--tier-c, #ccc);
}
.ach-tier-badge.claimable {
    background: rgba(255,255,255,.1);
    border-color: var(--tier-c, #ccc);
    box-shadow: 0 0 10px 2px rgba(255,215,0,0.4);
    animation: achPulse 1.6s ease-in-out infinite;
}
@keyframes achPulse {
    0%, 100% { box-shadow: 0 0 8px 1px rgba(255,215,0,0.3); }
    50% { box-shadow: 0 0 16px 4px rgba(255,215,0,0.6); }
}
.ach-tier-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    color: rgba(255,255,255,.35);
    text-transform: uppercase;
}
.ach-tier-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--chrome-light);
    line-height: 1.2;
}
.ach-tier-reward {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255,255,255,.4);
    font-family: var(--font-head);
}
.ach-claim-btn {
    background: linear-gradient(135deg, #34C759, #2da84a);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .5px;
    cursor: pointer;
    margin-top: 2px;
    box-shadow: 0 2px 8px rgba(52,199,89,.3);
}
.ach-claim-btn:active { transform: scale(.95); }
.ach-claimed-mark {
    font-size: 9px;
    color: rgba(255,255,255,.3);
    margin-top: 2px;
}

/* Прогресс-бар */
.ach-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.ach-progress-bar {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,.08);
    border-radius: 3px;
    overflow: hidden;
}
.ach-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4f6ef7, #7a5af8);
    border-radius: 3px;
    transition: width .4s ease;
}
.ach-progress-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    white-space: nowrap;
    font-family: var(--font-head);
}

/* Mass sell trigger button in portfolio header */
.exch-mass-sell-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(52,199,89,0.12);
    border: 1.5px solid rgba(52,199,89,0.35);
    color: #34C759;
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .5px;
    cursor: pointer;
    font-family: var(--font-head);
    white-space: nowrap;
    flex-shrink: 0;
    transition: all .15s;
}
.exch-mass-sell-trigger:active {
    background: rgba(52,199,89,0.22);
    transform: scale(0.96);
}
.exch-mass-sell-trigger.active-sel {
    background: rgba(255,59,48,0.12);
    border-color: rgba(255,59,48,0.35);
    color: #FF3B30;
}

/* ── Light theme: mass sell select bar & bulk bar ── */
[data-theme="light"] .exch-select-bar {
    background: rgba(0, 20, 80, 0.05);
    border-bottom-color: rgba(0, 20, 80, 0.1);
}
[data-theme="light"] .exch-sel-info {
    color: #1a1e36;
}
[data-theme="light"] .exch-sel-btn {
    background: rgba(0, 20, 80, 0.08);
    border-color: rgba(0, 20, 80, 0.2);
    color: #1a1e36;
}
[data-theme="light"] .exch-sel-btn.exch-sel-cancel {
    color: #e0341e;
    border-color: rgba(220, 50, 30, 0.35);
    background: rgba(220, 50, 30, 0.07);
}
[data-theme="light"] .exch-bulk-count {
    color: #4a5280;
}
[data-theme="light"] .snkr-card .snkr-sel-check {
    border-color: rgba(0, 20, 80, 0.35);
    background: rgba(0, 20, 80, 0.1);
}