/* Цвета по брендбуку DGhostMarket (раздел 03 Color palette):
   Deep Black #08070D — фон, Dark Violet #171022 — поверхности,
   Ghost Purple #7B2CFF — основной акцент, Neon Purple #A855F7 —
   свечение, Neon Pink #FF2BD6 — второй акцент, Soft Gray #A8A4B3 —
   второстепенный текст. Имена переменных оставлены прежними
   (--red и т.д.), чтобы не переписывать весь файл. */
:root{
--bg:#08070D;
--surface:#171022;
--accent:#7B2CFF;
--accent-2:#FF2BD6;
--cta-gradient:linear-gradient(135deg, #7B2CFF, #FF2BD6);
--red:#A855F7;
--red-glow:#c081fa;
--red-dim:#2a1140;
--text:#F2F0F5;
--muted:#A8A4B3;
--silver:#FFFFFF;
}

body.theme-light{
--bg:#f6f3fa;
--surface:#ffffff;
--accent:#7B2CFF;
--accent-2:#FF2BD6;
--cta-gradient:linear-gradient(135deg, #7B2CFF, #FF2BD6);
--red:#7B2CFF;
--red-glow:#7c22c9;
--red-dim:#ece1fb;
--text:#241f2b;
--muted:#6b5d78;
--silver:#241f2b;
}

/* ---------- цветовые темы (переключатель в профиле) ----------
   «Полночь» — значения :root выше, без изменений. Остальные темы
   переопределяют только ключевые переменные. Включаются атрибутом
   data-theme на <html>. Светлая схема Telegram (body.theme-light)
   по-прежнему главнее. --bg-hue крутит оттенок app-bg.jpg. */
html[data-theme="neon"]{ --bg:#0A0418; --surface:#1A0B33; --accent:#7A1FE0; --accent-2:#C21FA8; --cta-gradient:linear-gradient(135deg,#7A1FE0,#C21FA8); --red:#C77DFF; --red-glow:#DDA5FF; --red-dim:#3a1466; --text:#F5F0FF; --muted:#B3A8CC; --bg-hue:12deg; }
html[data-theme="emerald"]{ --bg:#04100B; --surface:#0D2218; --accent:#047857; --accent-2:#0B7A5E; --cta-gradient:linear-gradient(135deg,#047857,#0B7A5E); --red:#34D399; --red-glow:#6EE7B7; --red-dim:#14402d; --text:#EEF8F2; --muted:#9DB8A9; --bg-hue:150deg; }
html[data-theme="sunset"]{ --bg:#140805; --surface:#2A140E; --accent:#C2410C; --accent-2:#BE123C; --cta-gradient:linear-gradient(135deg,#C2410C,#BE123C); --red:#FB923C; --red-glow:#FDBA74; --red-dim:#552516; --text:#FBF1EC; --muted:#C4A89C; --bg-hue:200deg; }
html[data-theme="ice"]{ --bg:#050E18; --surface:#0E2033; --accent:#0369A1; --accent-2:#0E7490; --cta-gradient:linear-gradient(135deg,#0369A1,#0E7490); --red:#7DD3FC; --red-glow:#BAE6FD; --red-dim:#17405f; --text:#EEF6FC; --muted:#9CB4C8; --bg-hue:100deg; }
html[data-theme="gold"]{ --bg:#110C03; --surface:#241A0A; --accent:#B45309; --accent-2:#A16207; --cta-gradient:linear-gradient(135deg,#B45309,#A16207); --red:#FBBF24; --red-glow:#FDE68A; --red-dim:#4d3a10; --text:#FBF5E6; --muted:#C2B08A; --bg-hue:190deg; }
html[data-theme="rose"]{ --bg:#14040A; --surface:#2A0D18; --accent:#BE185D; --accent-2:#9F1239; --cta-gradient:linear-gradient(135deg,#BE185D,#9F1239); --red:#F472B6; --red-glow:#F9A8D4; --red-dim:#55142f; --text:#FDEFF4; --muted:#C9A3B2; --bg-hue:330deg; }
html[data-theme="lime"]{ --bg:#070E03; --surface:#14230A; --accent:#4D7C0F; --accent-2:#15803D; --cta-gradient:linear-gradient(135deg,#4D7C0F,#15803D); --red:#A3E635; --red-glow:#BEF264; --red-dim:#2b4510; --text:#F3FAE8; --muted:#A9BC91; --bg-hue:110deg; }
html[data-theme="graphite"]{ --bg:#0C0C0E; --surface:#1B1C20; --accent:#52525B; --accent-2:#4B5563; --cta-gradient:linear-gradient(135deg,#52525B,#4B5563); --red:#D4D4D8; --red-glow:#E4E4E7; --red-dim:#34353b; --text:#F1F1F3; --muted:#A5A7AE; }
html[data-theme]:not([data-theme="midnight"]):not([data-theme="graphite"]) .princess-bg{ filter:hue-rotate(var(--bg-hue,0deg)); }
html[data-theme="graphite"] .princess-bg{ filter:grayscale(1); }

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
margin:0;
padding:0;
min-height:100%;
background:var(--bg);
color:var(--text);
font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

canvas#rain{
position:absolute;
inset:0;
z-index:0;
opacity:0.28;
width:100%;
height:100%;
}

.rain-card-wrap{
position:relative;
overflow:hidden;
}

.rain-card-wrap > *:not(canvas){
position:relative;
z-index:1;
}

/* ---------- corner brand marks ---------- */
.princess-bg{
position:absolute;
top:0;
left:0;
width:100vw;
height:100vh;
background-image:url('app-bg.jpg');
background-size:cover;
background-position:center center;
opacity:0.35;
z-index:0;
pointer-events:none;
}

/* ---------- welcome (princess greeting) screen ---------- */
.welcome-overlay{
position:absolute;
top:0;
left:0;
width:100%;
z-index:60;
background:var(--bg);
display:none;
flex-direction:column;
align-items:center;
justify-content:flex-end;
overflow:hidden;
}

.welcome-overlay.show{ display:flex; }

.onboarding-dot{
width:7px;
height:7px;
border-radius:50%;
background:rgba(255,255,255,0.2);
transition:background 0.2s;
}

.onboarding-dot.active{
background:var(--red);
}

#categoryPickerScreen{
justify-content:flex-start;
align-items:stretch;
}

.welcome-content{
position:relative;
z-index:1;
width:100%;
max-width:420px;
padding:24px 22px calc(env(safe-area-inset-bottom, 0px) + 28px);
text-align:center;
}

.welcome-greeting{
font-family:'Inter', sans-serif;
font-size:19px;
font-weight:700;
color:var(--silver);
line-height:1.4;
margin-bottom:22px;
text-shadow:0 2px 12px rgba(0,0,0,0.8);
}

.welcome-actions{
display:flex;
gap:12px;
}

/* Тактильная отдача при нажатии — единое правило для всех основных
   кнопок приложения (раньше было только у 5 отдельных элементов из
   более чем сотни кнопок). transition делает эффект плавным, а не
   резким скачком. */
.save,
.welcome-btn,
.steam-link-btn,
.deal-action,
.money-btn{
transition:transform 0.1s ease, opacity 0.1s ease;
}

.save:active,
.welcome-btn:active,
.steam-link-btn:active,
.deal-action:active,
.money-btn:active{
transform:scale(0.96);
opacity:0.85;
}

.welcome-btn{
flex:1;
min-height:56px;
border-radius:12px;
border:1px solid var(--red);
background:linear-gradient(180deg, rgba(123,44,255,0.28), rgba(123,44,255,0.06));
color:var(--silver);
font-family:'JetBrains Mono', monospace;
font-size:14px;
font-weight:700;
text-transform:uppercase;
cursor:pointer;
}

.welcome-btn.primary{
background:var(--cta-gradient);
color:#fff;
}

/* ---------- category chips (buy flow) ---------- */
.back-btn{
width:38px;
height:38px;
border-radius:50%;
border:1px solid var(--red-dim);
background:rgba(0,0,0,0.4);
color:var(--silver);
font-size:18px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
flex:0 0 auto;
}

.category-chips{
display:flex;
gap:8px;
overflow-x:auto;
padding-bottom:4px;
margin-bottom:12px;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}

.category-chips::-webkit-scrollbar{ display:none; }

.category-chip{
flex:0 0 auto;
padding:9px 14px;
border-radius:20px;
border:1px solid var(--red-dim);
background:transparent;
color:var(--muted);
font-family:'JetBrains Mono', monospace;
font-size:11px;
font-weight:600;
white-space:nowrap;
cursor:pointer;
}

.category-chip.active{
border-color:var(--red);
background:rgba(123,44,255,0.12);
color:var(--silver);
}

.brand-tl, .brand-tr{
position:absolute;
top:18px;
z-index:50;
font-family:'JetBrains Mono', monospace;
font-size:10px;
letter-spacing:0.14em;
color:var(--muted);
display:flex;
align-items:center;
gap:8px;
}

.brand-tl{ left:18px; }
.brand-tr{ right:18px; }

.brand-tl b, .brand-tr b{
color:var(--red);
font-weight:600;
}

.brand-logo{
width:40px;
height:40px;
border-radius:50%;
border:1px solid var(--red-dim);
object-fit:cover;
display:block;
}

.tag{
border:1px solid var(--red-dim);
padding:4px 9px;
border-radius:3px;
display:inline-block;
}

/* ---------- layout ---------- */
.wrap{
position:relative;
z-index:2;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:50px 20px 100px;
text-align:center;
}

/* glitch title */
h1{
position:relative;
font-family:'Orbitron','Inter',sans-serif;
font-size:clamp(28px, 9vw, 40px);
font-weight:900;
letter-spacing:0.01em;
margin:0 0 6px;
color:var(--silver);
text-shadow:0 0 22px rgba(123,44,255,0.45);
}

h1::before, h1::after{
content:attr(data-text);
position:absolute;
left:0; right:0; top:0;
opacity:0.7;
}

h1::before{
color:#a855f7;
animation:glitchA 3.4s infinite steps(1);
clip-path:inset(0 0 60% 0);
}

h1::after{
color:#4ad4ff;
animation:glitchB 3.4s infinite steps(1);
clip-path:inset(60% 0 0 0);
}

@keyframes glitchA{
0%,92%,100%{ transform:translate(0,0); opacity:0; }
93%{ transform:translate(-2px,-1px); opacity:0.8; }
95%{ transform:translate(2px,1px); opacity:0.6; }
97%{ transform:translate(-1px,0); opacity:0.8; }
}

@keyframes glitchB{
0%,91%,100%{ transform:translate(0,0); opacity:0; }
92%{ transform:translate(2px,1px); opacity:0.7; }
94%{ transform:translate(-2px,-1px); opacity:0.5; }
96%{ transform:translate(1px,0); opacity:0.7; }
}

@keyframes pulse{
0%,100%{ opacity:1; transform:scale(1); }
50%{ opacity:0.7; transform:scale(1.05); }
}

/* ---------- cta ---------- */
.cta{
width:100%;
padding:15px 20px;
border-radius:2px;
border:1px solid var(--red-dim);
background:linear-gradient(180deg, rgba(123,44,255,0.12), rgba(123,44,255,0.02));
color:var(--silver);
font-family:'JetBrains Mono', monospace;
font-size:13px;
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
cursor:pointer;
transition:transform .15s ease, background .2s ease;
}

.cta:active{ transform:scale(0.97); }

.cta.live{
border-color:var(--red);
background:var(--cta-gradient);
}

.edit-overlay{
position:fixed;
inset:0;
z-index:10;
background:rgba(0,0,0,0.75);
backdrop-filter:blur(3px);
display:none;
align-items:flex-end;
justify-content:center;
}

.edit-overlay.show{ display:flex; }

.edit-sheet{
width:100%;
max-width:420px;
background:var(--surface);
border:1px solid var(--red-dim);
border-bottom:none;
border-radius:14px 14px 0 0;
padding:20px 18px 28px;
}

.header-menu-item{
display:block;
width:100%;
text-align:left;
background:none;
border:none;
color:var(--silver);
font-family:'Inter', sans-serif;
font-size:13px;
padding:10px 10px;
border-radius:8px;
cursor:pointer;
}

.header-menu-item:active{
background:var(--red-dim);
}

.edit-sheet h2{
margin:0 0 16px;
font-family:'JetBrains Mono', monospace;
font-size:13px;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--red);
}

.edit-field{
margin-bottom:12px;
text-align:left;
}

.edit-field label{
display:block;
font-family:'JetBrains Mono', monospace;
font-size:10px;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:5px;
}

.edit-field input{
width:100%;
padding:10px 12px;
border-radius:4px;
border:1px solid var(--red-dim);
background:rgba(255,255,255,0.03);
color:var(--silver);
font-family:'Inter', sans-serif;
font-size:14px;
}

.edit-field input:focus{
outline:none;
border-color:var(--red);
}

.edit-actions{
display:flex;
gap:10px;
margin-top:16px;
}

.edit-actions button{
flex:1;
padding:12px;
border-radius:4px;
font-family:'JetBrains Mono', monospace;
font-size:12px;
letter-spacing:0.05em;
text-transform:uppercase;
cursor:pointer;
border:1px solid var(--red-dim);
background:transparent;
color:var(--muted);
}

.edit-actions .save{
border-color:var(--red);
background:var(--cta-gradient);
color:#fff;
}

.edit-status{
margin-top:10px;
font-family:'JetBrains Mono', monospace;
font-size:11px;
color:var(--muted);
min-height:14px;
}

/* ---------- bottom nav ---------- */
.bottom-nav{
position:fixed;
bottom:0;
left:0;
right:0;
z-index:5;
display:flex;
border-top:1px solid var(--red-dim);
background:rgba(8,7,13,0.94);
backdrop-filter:blur(10px);
padding-bottom:env(safe-area-inset-bottom, 0px);
}

.nav-btn{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
gap:2px;
padding:9px 4px 8px;
border:none;
background:transparent;
color:var(--muted);
cursor:pointer;
}

.nav-icon{
font-size:19px;
line-height:1;
filter:grayscale(1) opacity(0.7);
}

.nav-icon img{
width:22px;
height:22px;
border-radius:50%;
object-fit:cover;
display:block;
}

.nav-label{
font-family:'JetBrains Mono', monospace;
font-size:9px;
letter-spacing:0.04em;
text-transform:uppercase;
}

.nav-btn.active{ color:var(--red); }

.nav-btn.active .nav-icon{ filter:none; }

.nav-btn.active .nav-icon img{
box-shadow:0 0 0 2px var(--red);
}

/* ---------- profile screen ---------- */
.screen-profile{
display:none;
position:relative;
z-index:2;
min-height:100vh;
padding:50px 16px 100px;
}

.profile-card{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:22px 16px;
margin-bottom:14px;
border-radius:12px;
border:1px solid var(--red-dim);
background:rgba(123,44,255,0.04);
}

.profile-avatar{
width:64px;
height:64px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
background:rgba(123,44,255,0.12);
border:1px solid var(--red-dim);
margin-bottom:10px;
overflow:hidden;
}

.profile-avatar img{
width:100%;
height:100%;
object-fit:cover;
}

.profile-name{
font-family:'Inter', sans-serif;
font-size:15px;
font-weight:600;
color:var(--silver);
margin-bottom:6px;
}

.trust-badge{
display:inline-flex;
align-items:center;
gap:4px;
font-family:'Inter', sans-serif;
font-size:11px;
font-weight:600;
padding:3px 10px;
border-radius:20px;
background:var(--red-dim);
color:var(--red-glow);
border:1px solid rgba(168,85,247,0.35);
margin-bottom:8px;
}

.trust-progress{
font-family:'Inter', sans-serif;
font-size:10px;
color:var(--muted);
margin-bottom:8px;
margin-top:-4px;
}

.profile-held{
font-family:'JetBrains Mono', monospace;
font-size:10px;
color:var(--muted);
margin-top:2px;
}

.profile-stats{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:8px;
margin-bottom:14px;
}

.stat-box{
padding:12px 6px;
border-radius:10px;
border:1px solid var(--red-dim);
background:rgba(10,7,8,0.94);
text-align:center;
}

.stat-value{
font-family:'JetBrains Mono', monospace;
font-size:15px;
font-weight:700;
color:var(--silver);
}

.stat-label{
font-family:'JetBrains Mono', monospace;
font-size:8px;
letter-spacing:0.04em;
text-transform:uppercase;
color:var(--muted);
margin-top:3px;
}

.profile-section{
padding:14px;
border-radius:10px;
border:1px solid var(--red-dim);
background:rgba(10,7,8,0.94);
text-align:left;
}

.profile-section-title{
font-family:'JetBrains Mono', monospace;
font-size:11px;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--red);
margin-bottom:10px;
}

.admin-skin-picker{
max-height:220px;
overflow-y:auto;
border:1px solid var(--red-dim);
border-radius:10px;
margin-bottom:12px;
}

.admin-skin-picker-item{
display:flex;
align-items:center;
gap:10px;
padding:8px 10px;
border-bottom:1px solid var(--red-dim);
cursor:pointer;
}

.admin-skin-picker-item:last-child{ border-bottom:none; }

.admin-skin-picker-item.selected{ background:rgba(123,44,255,0.14); }

.admin-skin-picker-item img{
width:36px;
height:36px;
border-radius:6px;
object-fit:contain;
background:rgba(255,255,255,0.03);
}

.admin-skin-picker-name{
font-size:12px;
color:var(--silver);
flex:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.admin-skin-picker-price{
font-family:'JetBrains Mono', monospace;
font-size:12px;
color:var(--red);
white-space:nowrap;
}

.admin-selected-skin{
display:flex;
align-items:center;
gap:10px;
padding:10px;
border:1px solid var(--red);
border-radius:10px;
background:rgba(123,44,255,0.08);
margin-bottom:12px;
}

.admin-selected-skin img{
width:40px;
height:40px;
border-radius:8px;
object-fit:contain;
background:rgba(255,255,255,0.03);
}

.money-btn-row{
display:flex;
gap:10px;
}

.money-btn-row-wrap{
flex-wrap:wrap;
}

.money-btn-row-wrap .money-btn{
flex:0 0 calc(50% - 5px);
}

.filters-count{
background:var(--red);
color:#0a0708;
border-radius:10px;
padding:1px 7px;
font-size:11px;
font-weight:700;
}

.range-row{
display:flex;
gap:8px;
}

.range-row input{
flex:1;
min-width:0;
}

.admin-bids-list{
margin-top:8px;
padding-top:8px;
border-top:1px solid var(--red-dim);
}

.admin-bid-row{
display:flex;
justify-content:space-between;
font-family:'JetBrains Mono', monospace;
font-size:11px;
color:var(--muted);
padding:3px 0;
}

.admin-bid-row.leader{
color:var(--red);
font-weight:700;
}

.admin-live-dot{
width:8px;
height:8px;
border-radius:50%;
background:#4caf6d;
animation:admin-live-pulse 1.5s ease-in-out infinite;
}

@keyframes admin-live-pulse{
0%, 100%{ opacity:1; }
50%{ opacity:0.3; }
}

.admin-status-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}

.admin-status-box{
padding:12px;
border-radius:10px;
border:1px solid var(--red-dim);
text-align:center;
}

.admin-status-box.attention{
border-color:var(--red);
background:rgba(123,44,255,0.08);
}

.admin-status-value{
font-family:'JetBrains Mono', monospace;
font-size:20px;
font-weight:700;
color:var(--red);
}

.admin-status-label{
font-size:11px;
color:var(--muted);
margin-top:4px;
}

.history-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
padding:10px 4px;
border-bottom:1px solid var(--red-dim);
}

.history-row-photo{
width:36px;
height:36px;
border-radius:6px;
object-fit:contain;
background:rgba(0,0,0,0.3);
flex:0 0 auto;
}

.history-row-info{ min-width:0; flex:1; }

.history-row-note{
font-size:12px;
color:var(--silver);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.history-row-date{
font-family:'JetBrains Mono', monospace;
font-size:10px;
color:var(--muted);
margin-top:2px;
}

.history-row-amount{
font-family:'JetBrains Mono', monospace;
font-size:13px;
font-weight:700;
flex:0 0 auto;
white-space:nowrap;
}

.history-row-amount.positive{ color:#4caf6d; }
.history-row-amount.negative{ color:var(--red); }

.quick-amount-row{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:8px;
}

.quick-amount-btn{
flex:1 1 calc(50% - 6px);
min-width:80px;
padding:9px 6px;
border-radius:8px;
border:1px solid var(--red-dim);
background:transparent;
color:var(--silver);
font-family:'JetBrains Mono', monospace;
font-size:12px;
font-weight:600;
cursor:pointer;
}

.quick-amount-btn:active{
border-color:var(--red);
background:rgba(123,44,255,0.12);
}

.admin-template-textarea{
width:100%;
margin-top:8px;
padding:10px;
border-radius:8px;
border:1px solid var(--red-dim);
background:rgba(0,0,0,0.3);
color:var(--silver);
font-family:'JetBrains Mono', monospace;
font-size:11px;
line-height:1.5;
resize:vertical;
}

.admin-emoji-insert-row{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:8px;
}

.admin-emoji-insert-btn{
width:32px;
height:32px;
border-radius:8px;
border:1px solid var(--red-dim);
background:rgba(0,0,0,0.3);
font-size:16px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

.admin-emoji-insert-btn:active{
border-color:var(--red);
background:rgba(123,44,255,0.12);
}

.admin-post-preview{
margin-bottom:10px;
padding:12px;
border-radius:12px;
background:rgba(0,0,0,0.35);
border:1px solid var(--red-dim);
white-space:pre-wrap;
word-break:break-word;
font-size:13px;
line-height:1.5;
color:var(--silver);
}

.market-price-box{
margin-top:10px;
padding:10px 12px;
border-radius:12px;
background:rgba(0,0,0,0.25);
border:1px solid rgba(255,255,255,0.08);
font-size:12px;
line-height:1.6;
}

.set-card{
background:rgba(0,0,0,0.3);
border:1px solid var(--red-dim);
border-radius:14px;
padding:12px;
margin-bottom:12px;
}

.set-card-title{
font-weight:700;
font-size:15px;
margin-bottom:6px;
}

.set-card-items{
font-size:12px;
color:var(--silver);
line-height:1.6;
margin-bottom:8px;
}

.set-card-price-row{
display:flex;
align-items:baseline;
gap:8px;
margin-bottom:10px;
}

.set-card-old-price{
text-decoration:line-through;
color:#888;
font-size:13px;
}

.set-card-new-price{
font-size:18px;
font-weight:700;
color:#4ad880;
}

.set-card-discount{
font-size:11px;
color:#a855f7;
background:rgba(168,85,247,0.15);
border-radius:6px;
padding:2px 6px;
}

.admin-perm-chips{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
}

.admin-perm-chip{
display:flex;
align-items:center;
gap:4px;
font-size:11px;
color:var(--muted);
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
border-radius:8px;
padding:4px 8px;
}

.admin-perm-chip input{
margin:0;
}

.btn-row{
display:flex;
gap:8px;
}

.set-discount-type-btn{
opacity:0.5;
}

.set-discount-type-btn.active{
opacity:1;
border-color:var(--red);
}

.market-price-box .mp-row{
display:flex;
justify-content:space-between;
color:var(--silver);
}

.market-price-box .mp-diff{
margin-top:2px;
font-weight:600;
}

.market-price-box .mp-diff.cheaper{
color:#4ad880;
}

.market-price-box .mp-diff.pricier{
color:#e0555a;
}

.admin-commission-box{
flex:1;
padding:12px;
border-radius:10px;
border:1px solid var(--red-dim);
text-align:center;
}

.admin-commission-label{
font-family:'JetBrains Mono', monospace;
font-size:10px;
text-transform:uppercase;
color:var(--muted);
margin-bottom:6px;
}

.admin-commission-value{
font-family:'JetBrains Mono', monospace;
font-size:16px;
font-weight:700;
color:var(--red);
}

.money-btn{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
min-height:64px;
padding:12px 10px;
border-radius:10px;
border:1px solid var(--red);
background:linear-gradient(135deg, rgba(123,44,255,0.35), rgba(255,43,214,0.2));
color:var(--silver);
font-family:'JetBrains Mono', monospace;
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.02em;
cursor:pointer;
}

.money-btn svg{ color:var(--red); }

.lang-switch{
display:flex;
gap:10px;
}

.lang-btn{
flex:1;
padding:10px;
border-radius:8px;
border:1px solid var(--red-dim);
background:transparent;
color:var(--muted);
font-family:'Inter', sans-serif;
font-size:13px;
font-weight:600;
cursor:pointer;
}

.lang-btn.active{
border-color:var(--red);
background:rgba(123,44,255,0.08);
color:var(--silver);
}

.profile-steam-status{
font-family:'Inter', sans-serif;
font-size:12px;
color:var(--silver);
margin-bottom:8px;
}

.steam-link-btn.secondary{
background:transparent;
color:var(--muted);
border-color:var(--muted);
}

.steam-link-btn.secondary.active{
background:rgba(168,85,247,0.15);
color:var(--silver);
border-color:var(--red);
}

/* ---------- topup details ---------- */
.topup-details-box{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:14px;
border-radius:10px;
border:1.5px solid var(--red);
background:rgba(123,44,255,0.08);
margin-bottom:10px;
cursor:pointer;
}

.topup-details-text{
font-family:'JetBrains Mono', monospace;
font-size:16px;
font-weight:700;
color:var(--silver);
letter-spacing:0.02em;
line-height:1.4;
word-break:break-word;
}

.topup-copy-btn{
flex-shrink:0;
display:flex;
align-items:center;
gap:5px;
padding:8px 12px;
border-radius:7px;
border:1px solid var(--red);
background:linear-gradient(180deg, rgba(123,44,255,0.22), rgba(123,44,255,0.04));
color:var(--silver);
font-family:'JetBrains Mono', monospace;
font-size:10px;
font-weight:600;
text-transform:uppercase;
cursor:pointer;
white-space:nowrap;
}

.topup-copy-btn.copied{
border-color:#4caf50;
color:#4caf50;
}

.topup-warning{
font-family:'Inter', sans-serif;
font-size:12px;
font-weight:600;
color:var(--red);
margin-bottom:12px;
line-height:1.4;
}

/* ---------- deal cards ---------- */
.trade-party-line{
flex:1;
height:2px;
background:var(--red-dim);
position:relative;
}

.trade-party-line.done{
background:var(--red);
}

.deal-card{
display:flex;
gap:10px;
padding:10px;
border-radius:10px;
border:1px solid var(--red-dim);
background:rgba(10,7,8,0.94);
margin-bottom:8px;
align-items:center;
}

.deal-photo{
width:44px;
height:44px;
border-radius:8px;
object-fit:cover;
background:rgba(123,44,255,0.08);
flex-shrink:0;
}

.deal-info{
flex:1;
min-width:0;
text-align:left;
}

.deal-title{
font-family:'Inter', sans-serif;
font-size:12px;
font-weight:600;
color:var(--silver);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.deal-meta{
font-family:'JetBrains Mono', monospace;
font-size:9px;
color:var(--muted);
margin-top:2px;
}

.deal-status{
font-family:'JetBrains Mono', monospace;
font-size:9px;
margin-top:3px;
letter-spacing:0.03em;
text-transform:uppercase;
}

.deal-status.pending{ color:#dbb84f; }
.deal-status.sent{ color:#5f93c7; }
.deal-status.done{ color:#6ba87e; }

.deal-action{
flex-shrink:0;
padding:7px 10px;
border-radius:7px;
border:1px solid var(--red);
background:linear-gradient(180deg, rgba(123,44,255,0.22), rgba(123,44,255,0.04));
color:var(--silver);
font-family:'JetBrains Mono', monospace;
font-size:10px;
font-weight:600;
cursor:pointer;
white-space:nowrap;
display:inline-block;
text-align:center;
text-decoration:none;
}

.deal-actions{
display:flex;
flex-direction:column;
gap:6px;
flex-shrink:0;
}

.deal-action.secondary{
border-color:var(--muted);
background:transparent;
color:var(--muted);
}

/* ---------- shop screen ---------- */
.screen-shop{
display:none;
position:relative;
z-index:2;
min-height:100vh;
/* сверху — место под логотип и иконки в шапке, снизу — под навигацию */
padding:72px 16px calc(env(safe-area-inset-bottom, 0px) + 92px);
}

.auction-card{
padding:14px;
border-radius:14px;
border:1px solid var(--red);
background:linear-gradient(135deg, rgba(123,44,255,0.16), rgba(123,44,255,0.03));
margin-bottom:14px;
}

.auction-card-photo{
width:100%;
max-height:160px;
object-fit:contain;
border-radius:10px;
background:rgba(0,0,0,0.3);
margin-bottom:10px;
}

.auction-card-title{
font-size:15px;
font-weight:700;
color:var(--silver);
margin-bottom:6px;
}

.auction-card-details{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:10px;
}

.auction-card-details span{
font-family:'JetBrains Mono', monospace;
font-size:11px;
color:var(--muted);
border:1px solid var(--red-dim);
border-radius:6px;
padding:3px 8px;
}

.auction-card-price{
font-size:13px;
color:var(--muted);
margin-bottom:4px;
}

.auction-card-price-value{
color:var(--red);
font-weight:700;
font-family:'JetBrains Mono', monospace;
}

.auction-card-time{
font-family:'JetBrains Mono', monospace;
font-size:20px;
font-weight:700;
color:var(--silver);
margin-bottom:12px;
}

.auction-card-time.ending{ color:var(--red); }

.auction-card-bid-btn{
width:100%;
min-height:48px;
border-radius:10px;
border:none;
background:var(--red);
color:#0a0708;
font-family:'JetBrains Mono', monospace;
font-size:13px;
font-weight:700;
text-transform:uppercase;
cursor:pointer;
}

.auction-bid-photo{
width:100%;
max-height:180px;
object-fit:contain;
border-radius:10px;
background:rgba(255,255,255,0.03);
margin-bottom:12px;
}

.balance-pill{
padding:8px 14px;
border-radius:20px;
border:1px solid var(--red-dim);
background:rgba(123,44,255,0.06);
color:var(--silver);
font-family:'JetBrains Mono', monospace;
font-size:12px;
font-weight:600;
}

.add-skin-btn{
padding:8px 14px;
border-radius:20px;
border:1px solid var(--red);
background:var(--cta-gradient);
color:#fff;
font-family:'JetBrains Mono', monospace;
font-size:12px;
font-weight:600;
cursor:pointer;
}

.shop-hint{
font-family:'Inter', sans-serif;
font-size:11px;
color:var(--muted);
line-height:1.4;
margin-bottom:14px;
}

.skins-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.skins-empty-seek{
display:block;
margin:14px auto 0;
max-width:300px;
padding:11px 16px;
border:none;
border-radius:12px;
background:var(--cta-gradient);
color:#fff;
font-family:'Inter', sans-serif;
font-size:13px;
font-weight:700;
line-height:1.35;
cursor:pointer;
}
.skins-empty{
grid-column:1 / -1;
text-align:center;
padding:40px 10px;
font-family:'JetBrains Mono', monospace;
font-size:12px;
color:var(--muted);
}

.skin-card{
display:flex;
flex-direction:column;
padding:9px;
border-radius:10px;
border:1px solid var(--red-dim);
border-top-width:3px;
background:var(--surface);
text-align:left;
}

.skin-card.rarity-consumer, .inv-item.rarity-consumer{ border-top-color:#aec2d1; }
.skin-card.rarity-industrial, .inv-item.rarity-industrial{ border-top-color:#5f93c7; }
.skin-card.rarity-milspec, .inv-item.rarity-milspec{ border-top-color:#5a6fd6; }
.skin-card.rarity-restricted, .inv-item.rarity-restricted{ border-top-color:#8c5fd6; }
.skin-card.rarity-classified, .inv-item.rarity-classified{ border-top-color:#c15bc9; }
.skin-card.rarity-covert, .inv-item.rarity-covert{ border-top-color:#d85454; }
.skin-card.rarity-contraband, .inv-item.rarity-contraband{ border-top-color:#dbb84f; }
.skin-card.rarity-extraordinary, .inv-item.rarity-extraordinary{ border-top-color:#dbb84f; }

.skin-photo-wrap{
position:relative;
width:100%;
aspect-ratio:1/1;
border-radius:8px;
overflow:hidden;
background-color:rgba(123,44,255,0.08);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
margin-bottom:8px;
}

.skin-photo{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.skin-photo.placeholder{
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
height:100%;
}

.skin-badge{
position:absolute;
top:5px;
font-family:'JetBrains Mono', monospace;
font-size:9px;
font-weight:700;
padding:2px 6px;
border-radius:4px;
letter-spacing:0.03em;
}

.skin-badge.wear{
right:5px;
background:rgba(0,0,0,0.75);
color:var(--silver);
border:1px solid var(--red-dim);
}

.skin-badge.stattrak{
left:5px;
background:rgba(255,140,0,0.9);
color:#1a0d00;
}

.skin-weapon-type{
font-family:'JetBrains Mono', monospace;
font-size:9px;
letter-spacing:0.05em;
text-transform:uppercase;
color:var(--muted);
}

.skin-title{
font-family:'Inter', sans-serif;
font-size:12px;
font-weight:600;
color:var(--silver);
line-height:1.25;
margin-top:2px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:30px;
}

.skin-price{
font-family:'JetBrains Mono', monospace;
font-size:15px;
font-weight:700;
color:var(--silver);
margin-top:6px;
letter-spacing:-0.01em;
}

.skin-action{
margin-top:7px;
width:100%;
padding:12px 7px;
border-radius:7px;
border:none;
background:var(--cta-gradient);
color:#fff;
font-family:'JetBrains Mono', monospace;
font-size:11px;
font-weight:600;
letter-spacing:0.03em;
text-transform:uppercase;
cursor:pointer;
}

.skin-action.own{
border-color:var(--muted);
background:transparent;
color:var(--muted);
}

.skin-action-row{
display:flex;
gap:6px;
margin-top:7px;
}

.skin-action-row .skin-action{
margin-top:0;
flex:1;
}

.skin-cart-btn{
flex:0 0 auto;
width:40px;
border-radius:7px;
border:1px solid var(--red-dim);
background:transparent;
color:var(--silver);
font-size:15px;
cursor:pointer;
}

.skin-cart-btn.in-cart{
border-color:var(--red);
background:var(--red);
color:#0a0708;
}

.cart-item{
display:flex;
align-items:center;
gap:10px;
padding:10px;
border-radius:10px;
border:1px solid var(--red-dim);
margin-bottom:8px;
}

.cart-item-photo{
width:44px;
height:44px;
border-radius:6px;
object-fit:contain;
background:rgba(0,0,0,0.3);
flex:0 0 auto;
}

.cart-item-info{ flex:1; min-width:0; }

.cart-item-title{
font-size:12px;
color:var(--silver);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.cart-item-price{
font-family:'JetBrains Mono', monospace;
font-size:12px;
color:var(--red);
font-weight:700;
}

.cart-item-remove{
flex:0 0 auto;
width:28px;
height:28px;
border-radius:50%;
border:1px solid var(--red-dim);
background:transparent;
color:var(--muted);
cursor:pointer;
}

.cart-total-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 4px;
margin-top:6px;
border-top:1px solid var(--red-dim);
font-family:'JetBrains Mono', monospace;
font-size:14px;
font-weight:700;
color:var(--silver);
}
.cart-balance-hint{
font-size:12px;
color:var(--muted);
margin:6px 2px 0;
line-height:1.4;
}
.cart-balance-hint.cart-short{
color:#f87171;
}

/* ---------- add-skin form extras ---------- */
.edit-sheet{
max-height:85vh;
overflow-y:auto;
}

.edit-row{
display:flex;
gap:10px;
}

.edit-row .edit-field{
flex:1;
min-width:0;
}

.edit-checkbox-field{
margin-bottom:14px;
}

.checkbox-label{
display:flex !important;
align-items:center;
gap:8px;
font-family:'Inter', sans-serif !important;
font-size:13px !important;
color:var(--silver) !important;
text-transform:none !important;
letter-spacing:0 !important;
cursor:pointer;
}

.checkbox-label input{
width:16px;
height:16px;
accent-color:var(--red);
}

/* ---------- steam link / inventory ---------- */
.steam-block{
margin-bottom:14px;
padding-bottom:14px;
border-bottom:1px dashed var(--red-dim);
}

.steam-link-btn, .steam-inv-btn{
width:100%;
min-height:48px;
padding:14px 10px;
border-radius:8px;
border:1px solid var(--red);
background:linear-gradient(180deg, rgba(123,44,255,0.2), rgba(123,44,255,0.04));
color:var(--silver);
font-family:'JetBrains Mono', monospace;
font-size:13px;
font-weight:600;
cursor:pointer;
box-sizing:border-box;
}

.inventory-sheet{
max-height:80vh;
}

.inventory-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
max-height:50vh;
overflow-y:auto;
margin:10px 0;
}

.inv-item{
display:flex;
flex-direction:column;
align-items:center;
padding:6px;
border-radius:8px;
border:1px solid var(--red-dim);
border-top-width:3px;
background:rgba(10,7,8,0.94);
cursor:pointer;
text-align:center;
position:relative;
}

/* Фото предмета в пикере инвентаря — тот же фон по редкости, что
   и в карточках уже выставленных лотов (RARITY_BG), просто здесь
   применяется классом ".inv-item", а не ".skin-card". */
.inv-item-photo{
position:relative;
width:100%;
aspect-ratio:1/1;
border-radius:6px;
overflow:hidden;
background-color:rgba(123,44,255,0.08);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
margin-bottom:4px;
}

.inv-item-banned{
opacity:0.4;
cursor:not-allowed;
filter:grayscale(0.6);
}

.inv-item-photo img{
width:100%;
height:100%;
object-fit:contain;
}

.inv-item-name.stattrak{ color:#cf6a32; }

/* Полоска износа с меткой точного float — воспроизводит вид
   CSFloat: градиент FN→BS слева направо, точка на месте float. */
.inv-item-wearbar{
position:relative;
width:100%;
height:4px;
border-radius:2px;
margin:3px 0 2px;
background:linear-gradient(90deg,
#5cd65c 0%, #5cd65c 7%,
#b8d65c 7%, #b8d65c 15%,
#d6c15c 15%, #d6c15c 38%,
#d6935c 38%, #d6935c 45%,
#d65c5c 45%, #d65c5c 100%);
}
.inv-item-wearbar-mark{
position:absolute;
top:50%;
width:6px;
height:6px;
border-radius:50%;
background:#fff;
border:1px solid rgba(0,0,0,0.5);
transform:translate(-50%,-50%);
}
.inv-item-floatrow{
display:flex;
width:100%;
justify-content:space-between;
font-size:11px;
color:var(--muted, #a8a4b3);
line-height:1.4;
}

/* Компактное окно "Выставить лот" — фото/название/износ/полоска
   переиспользуют те же стили, что и карточка в пикере инвентаря,
   только крупнее: это одна карточка на весь экран, а не сетка. */
.qs-photo{
width:150px;
height:150px;
margin:4px auto 10px;
border-radius:12px;
overflow:hidden;
background-color:rgba(123,44,255,0.08);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.qs-photo img{
width:100%;
height:100%;
object-fit:contain;
}
.qs-name{
text-align:center;
font-weight:600;
font-size:15px;
color:var(--text, #ece7e6);
}
.qs-name.stattrak{ color:#cf6a32; }
.qs-sub{
text-align:center;
color:var(--muted, #a8a4b3);
font-size:12px;
margin-bottom:8px;
}
#quickSellOverlay .inv-item-wearbar{ max-width:260px; margin:0 auto 2px; }
#quickSellOverlay .inv-item-floatrow{ max-width:260px; margin:0 auto 10px; font-size:12px; }
.qs-price-chips{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:8px 0 2px; }
.qs-price-chips[hidden]{ display:none; }
.qs-chip{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border-radius:10px; border:1px solid var(--red-dim); background:rgba(255,255,255,.03); color:var(--silver); cursor:pointer; min-width:0; }
.qs-chip b{ font-size:13px; }
.qs-chip span{ font-size:11px; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.qs-chip.on{ border-color:var(--accent); background:rgba(168,85,247,.18); }

.qs-advanced-link{
display:block;
width:100%;
background:none;
border:none;
color:var(--red, #a855f7);
font-size:13px;
padding:8px;
text-align:center;
}

.inv-item-name{
font-family:'Inter', sans-serif;
font-size:12px;
color:var(--silver);
line-height:1.2;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

/* ---------- buy confirmation sheet ---------- */
.buy-overlay{
position:fixed;
inset:0;
z-index:10;
background:rgba(0,0,0,0.75);
backdrop-filter:blur(3px);
display:none;
flex-direction:column;
align-items:center;
justify-content:flex-end;
}

.buy-overlay.show{ display:flex; }

.buy-sheet{
width:100%;
max-width:420px;
max-height:82vh;
overflow-y:auto;
background:var(--surface);
border:1px solid var(--red-dim);
border-bottom:none;
border-radius:14px 14px 0 0;
padding-bottom:16px;
position:relative;
}

.buy-close-btn{
position:absolute;
top:12px;
right:12px;
z-index:2;
width:30px;
height:30px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.25);
background:rgba(0,0,0,0.4);
color:var(--silver);
font-size:14px;
line-height:1;
cursor:pointer;
}

.buy-hero{
padding:34px 20px 20px;
text-align:center;
border-radius:14px 14px 0 0;
background:
radial-gradient(ellipse at 50% 0%, var(--rarity-glow-strong, rgba(235,75,75,0.55)) 0%, rgba(10,10,12,0) 75%),
linear-gradient(180deg, var(--rarity-glow, rgba(235,75,75,0.35)) 0%, rgba(10,10,12,0.45) 100%),
var(--rarity-bg, none) center/cover no-repeat;
position:relative;
}

.buy-badges-row{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:14px;
}

.buy-badge{
font-family:'JetBrains Mono', monospace;
font-size:10px;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
padding:4px 10px;
border-radius:6px;
background:rgba(255,255,255,0.12);
color:var(--silver);
}

.buy-badge-stattrak{
background:#e07b1a;
color:#fff;
margin-left:auto;
}

.buy-photo{
width:200px;
height:200px;
border-radius:10px;
object-fit:cover;
margin:0 auto 14px;
display:block;
background:rgba(255,255,255,0.04);
filter:drop-shadow(0 8px 22px rgba(0,0,0,0.5));
}

.buy-hero h2{
margin:0 0 4px;
font-family:'Inter', sans-serif;
font-size:17px;
font-weight:700;
color:var(--silver);
}

.buy-subtitle{
font-family:'JetBrains Mono', monospace;
font-size:11px;
color:var(--muted);
text-transform:uppercase;
letter-spacing:0.04em;
}

.buy-actions-row{
display:flex;
justify-content:center;
padding:0 20px 14px;
}

.buy-action-btn{
display:flex;
flex-direction:column;
align-items:center;
gap:5px;
background:transparent;
border:none;
color:var(--muted);
font-family:'JetBrains Mono', monospace;
font-size:10px;
text-transform:uppercase;
cursor:pointer;
padding:6px 10px;
}

.buy-action-btn svg{ color:var(--red); }

.buy-details-table{
margin:0 20px;
border:1px solid var(--red-dim);
border-radius:10px;
overflow:hidden;
}

.buy-detail-row{
display:flex;
justify-content:space-between;
padding:11px 14px;
font-family:'Inter', sans-serif;
font-size:13px;
border-bottom:1px solid rgba(255,255,255,0.05);
}

.buy-detail-row:last-child{ border-bottom:none; }

.buy-detail-label{ color:var(--muted); }
.buy-detail-value{ color:var(--silver); font-weight:600; text-align:right; }

.buy-sticky-bar{
width:100%;
max-width:420px;
display:flex;
flex-wrap:wrap;
gap:10px;
padding:12px 18px calc(env(safe-area-inset-bottom, 0px) + 12px);
background:var(--bg);
border:1px solid var(--red-dim);
border-top:1px solid var(--red-dim);
}

.buy-sticky-bar #buyMakeOfferBtn,
.buy-sticky-bar #buySendOfferBtn{
flex:1 1 100%;
order:3;
margin:0;
}

.buy-sticky-bar #buySendOfferBtn{
min-height:48px;
padding:0 18px;
border-radius:10px;
border:none;
background:var(--red);
color:#0a0708;
font-family:'JetBrains Mono', monospace;
font-size:14px;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

.buy-sticky-bar #buyCancel{
flex:0 0 auto;
min-height:48px;
padding:0 20px;
border-radius:10px;
border:1px solid var(--muted);
background:transparent;
color:var(--muted);
font-family:'JetBrains Mono', monospace;
font-size:13px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

.pay-methods .save,
.buy-sticky-bar .buy-main-btn{
flex:1;
min-height:48px;
padding:0 18px;
border-radius:10px;
border:none;
background:var(--red);
color:#0a0708;
font-family:'JetBrains Mono', monospace;
font-size:14px;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

/* ---------- скелетоны загрузки ----------
   Серые заглушки той же формы, что и настоящие карточки, с мягким
   бегущим бликом — вместо текста "Загрузка...". */
.skel-block{
position:relative;
overflow:hidden;
border-radius:6px;
background:rgba(255,255,255,0.06);
}
.skel-block::after{
content:'';
position:absolute;
inset:0;
transform:translateX(-100%);
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
animation:skel-shimmer 1.3s ease-in-out infinite;
}
body.theme-light .skel-block{ background:rgba(0,0,0,0.07); }
body.theme-light .skel-block::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); }
@keyframes skel-shimmer{ 100%{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){ .skel-block::after{ animation:none; } }

.skel-card{
display:flex;
flex-direction:column;
gap:7px;
padding:9px;
border-radius:10px;
border:1px solid var(--red-dim);
border-top-width:3px;
background:var(--surface);
}
body.theme-light .skel-card{ background:transparent; }
.skel-photo{ width:100%; aspect-ratio:1/1; border-radius:8px; }
.skel-line{ height:10px; }
.skel-line.w80{ width:80%; }
.skel-line.w50{ width:50%; }
.skel-line.w35{ width:35%; }
.skel-line.tall{ height:28px; border-radius:8px; margin-top:2px; }

.skel-row{
display:flex;
align-items:center;
gap:10px;
padding:10px 4px;
border-bottom:1px solid var(--red-dim);
}
.skel-row .skel-dot{ width:32px; height:32px; border-radius:50%; flex:none; }
.skel-row .skel-col{ flex:1; display:flex; flex-direction:column; gap:6px; }

/* ---------- тосты и экраны ошибок ---------- */
.toast-stack{
position:fixed;
left:12px;
right:12px;
bottom:calc(16px + env(safe-area-inset-bottom, 0px));
z-index:20000;
display:flex;
flex-direction:column;
gap:8px;
pointer-events:none;
}
.toast{
display:flex;
align-items:center;
gap:10px;
padding:11px 12px 11px 14px;
border-radius:12px;
border:1px solid var(--red-dim);
background:rgba(18,12,26,0.96);
backdrop-filter:blur(10px);
color:var(--text, #ece7e6);
font-family:'Inter', sans-serif;
font-size:13px;
line-height:1.35;
box-shadow:0 8px 24px rgba(0,0,0,0.45);
pointer-events:auto;
opacity:0;
transform:translateY(12px);
transition:opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:none; }
.toast-error{ border-color:rgba(214,92,92,0.55); }
.toast-success{ border-color:rgba(92,214,120,0.5); }
.toast-icon{ flex:none; font-size:15px; }
.toast-text{ flex:1; }
.toast-action{
flex:none;
background:none;
border:1px solid rgba(168,85,247,0.5);
border-radius:8px;
color:#c89bff;
font-size:12px;
font-weight:600;
padding:6px 10px;
}
body.theme-light .toast{ background:rgba(255,255,255,0.97); color:#1a1320; }

.error-state{
grid-column:1 / -1;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
padding:24px 12px;
text-align:center;
color:var(--muted);
font-size:13px;
}
.error-state-icon{ font-size:26px; opacity:.8; }
.retry-btn{
background:none;
border:1px solid rgba(168,85,247,0.55);
border-radius:10px;
color:#c89bff;
font-size:13px;
font-weight:600;
padding:9px 18px;
}

/* ---------- прогресс сделки ---------- */
.deal-progress{
display:flex;
gap:4px;
margin:10px 0 6px;
}
.deal-progress-seg{
flex:1;
height:4px;
border-radius:2px;
background:rgba(255,255,255,0.08);
}
.deal-progress-seg.done{ background:var(--red); }
.deal-progress-seg.current{ background:linear-gradient(90deg, var(--red), rgba(168,85,247,0.25)); animation:dstep-pulse 1.6s ease-in-out infinite; }
.deal-progress-seg.failed{ background:#d65c5c; }
.deal-step-summary{
display:flex;
justify-content:space-between;
gap:8px;
font-family:'Inter', sans-serif;
font-size:12px;
font-weight:600;
color:var(--silver);
}
.deal-step-summary .deal-step-count{ color:var(--muted); font-weight:500; font-size:11px; white-space:nowrap; }
.deal-step-summary.failed{ color:#e07a7a; }
.deal-hint{
font-family:'Inter', sans-serif;
font-size:11px;
line-height:1.4;
color:var(--muted);
margin-top:4px;
}
body.theme-light .deal-progress-seg{ background:rgba(0,0,0,0.08); }

.dstep-list{ position:relative; padding:4px 0; }
.dstep{
position:relative;
display:flex;
gap:12px;
padding-bottom:16px;
}
.dstep:last-child{ padding-bottom:0; }
.dstep::before{
content:'';
position:absolute;
left:9px;
top:22px;
bottom:2px;
width:2px;
background:rgba(255,255,255,0.08);
}
.dstep:last-child::before{ display:none; }
.dstep.done::before{ background:var(--red); }
.dstep-dot{
flex:none;
width:20px;
height:20px;
border-radius:50%;
border:2px solid rgba(255,255,255,0.15);
background:transparent;
display:flex;
align-items:center;
justify-content:center;
font-size:10px;
color:#fff;
}
.dstep.done .dstep-dot{ background:var(--red); border-color:var(--red); }
.dstep.current .dstep-dot{ border-color:var(--red); box-shadow:0 0 0 4px rgba(168,85,247,0.18); animation:dstep-pulse 1.6s ease-in-out infinite; }
.dstep.current .dstep-dot::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--red); }
.dstep.failed .dstep-dot{ background:#d65c5c; border-color:#d65c5c; }
.dstep-body{ flex:1; min-width:0; }
.dstep-title{ font-family:'Inter', sans-serif; font-size:13px; color:var(--muted); }
.dstep.done .dstep-title, .dstep.current .dstep-title{ color:var(--silver); font-weight:600; }
.dstep.failed .dstep-title{ color:#e07a7a; font-weight:600; }
.dstep-time{ font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); margin-top:2px; }
.dstep-hint{ font-family:'Inter', sans-serif; font-size:11px; line-height:1.4; color:var(--muted); margin-top:4px; }
@keyframes dstep-pulse{ 50%{ opacity:.55; } }
@media (prefers-reduced-motion: reduce){ .deal-progress-seg.current, .dstep.current .dstep-dot{ animation:none; } }

/* ---------- центр уведомлений ---------- */
.notif-bell{
position:relative;
background:var(--red-dim);
padding:0;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
color:var(--silver);
overflow:visible;
}
.notif-badge{
position:absolute;
top:-3px;
right:-3px;
min-width:18px;
height:18px;
padding:0 5px;
border-radius:9px;
background:#e0555a;
color:#fff;
font-family:'Inter', sans-serif;
font-size:10px;
font-weight:700;
line-height:18px;
text-align:center;
box-shadow:0 0 0 2px #0a0708;
}
.notif-item{
display:flex;
gap:10px;
padding:11px 4px;
border-bottom:1px solid var(--red-dim);
}
.notif-item:last-child{ border-bottom:none; }
.notif-item.clickable{ cursor:pointer; }
.notif-item.unread{ background:rgba(168,85,247,0.07); border-radius:8px; }
.notif-icon{
flex:none;
width:32px;
height:32px;
border-radius:50%;
background:rgba(255,255,255,0.05);
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
}
.notif-body{ flex:1; min-width:0; }
.notif-text{
font-family:'Inter', sans-serif;
font-size:13px;
line-height:1.4;
color:var(--silver);
white-space:pre-line;
word-break:break-word;
}
.notif-meta{
display:flex;
justify-content:space-between;
gap:8px;
margin-top:4px;
font-family:'JetBrains Mono', monospace;
font-size:10px;
color:var(--muted);
}
.notif-open{ color:#c89bff; font-family:'Inter', sans-serif; font-weight:600; }
.notif-dot{ width:7px; height:7px; border-radius:50%; background:var(--red); flex:none; margin-top:6px; }

/* поле описания в форме спора — в стиле обычных полей ввода */
.edit-field textarea{
width:100%;
box-sizing:border-box;
padding:10px 12px;
border-radius:4px;
border:1px solid var(--red-dim);
background:rgba(255,255,255,0.03);
color:var(--silver);
font-family:'Inter', sans-serif;
font-size:14px;
line-height:1.4;
resize:vertical;
}
.edit-field textarea:focus{ outline:none; border-color:var(--red); }

/* ---------- рыночная цена (CSFloat) и похожие лоты ---------- */
.market-price-box .mp-usd{ color:var(--muted); font-size:11px; margin-left:4px; }
.mp-spark{ margin-top:10px; }
.mp-spark-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px; }
.mp-spark-title{ font-size:11px; color:var(--muted); }
.mp-spark-change{ font-size:12px; font-weight:700; color:var(--muted); }
.mp-spark-change.up{ color:#f5b860; }
.mp-spark-change.down{ color:#6fe0a0; }
.mp-spark svg{ width:100%; height:70px; display:block; }
.mp-spark-dates{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:3px; }
.mp-spark-legend{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:10px; color:var(--muted); margin-top:4px; opacity:.85; }
.mp-spark-lot{ color:var(--silver); }

.similar-box{ margin:14px 20px 0; }
.similar-title{
font-family:'JetBrains Mono', monospace;
font-size:11px;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:8px;
}
.similar-row{
display:flex;
gap:8px;
overflow-x:auto;
padding-bottom:4px;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
}
.similar-card{
flex:0 0 116px;
scroll-snap-align:start;
display:flex;
flex-direction:column;
gap:4px;
padding:7px;
border-radius:10px;
border:1px solid var(--red-dim);
background:rgba(255,255,255,0.03);
color:inherit;
text-align:left;
cursor:pointer;
}
.similar-photo{
width:100%;
aspect-ratio:4/3;
border-radius:6px;
background:rgba(123,44,255,0.08);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.similar-photo img{ width:100%; height:100%; object-fit:contain; }
.similar-name{
font-family:'Inter', sans-serif;
font-size:11px;
line-height:1.3;
color:var(--silver);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.similar-price{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--red); font-weight:600; }

/* ---------- профиль продавца и отзывы ---------- */
.seller-line{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
padding:9px 12px;
border-radius:10px;
border:1px solid var(--red-dim);
background:rgba(255,255,255,0.03);
color:var(--silver);
font-family:'Inter', sans-serif;
font-size:12px;
text-align:left;
cursor:pointer;
}
.seller-line-open{ color:#c89bff; font-weight:600; white-space:nowrap; }
.sp-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.sp-avatar{
width:46px; height:46px; border-radius:50%; flex:none;
display:flex; align-items:center; justify-content:center; font-size:22px;
background:rgba(168,85,247,0.12); border:1px solid var(--red-dim);
}
.sp-name{ font-family:'Inter', sans-serif; font-size:16px; font-weight:700; color:var(--silver); }
.sp-sub{ font-family:'Inter', sans-serif; font-size:11px; color:var(--muted); }
.sp-follow{
width:100%;
margin:12px 0 0;
padding:11px 14px;
border-radius:11px;
border:none;
background:var(--cta-gradient);
color:#fff;
font-size:13px;
font-weight:700;
cursor:pointer;
}
.sp-follow.on{ background:rgba(123,44,255,0.14); border:1px solid var(--red-dim); color:var(--silver); }
.sp-follow:disabled{ opacity:0.7; }
.sp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sp-cell{ padding:10px; border-radius:10px; background:rgba(255,255,255,0.03); border:1px solid var(--red-dim); }
.sp-val{ font-family:'JetBrains Mono', monospace; font-size:16px; font-weight:700; color:var(--silver); margin-bottom:2px; }
.sp-review{ padding:10px 0; border-bottom:1px solid var(--red-dim); }
.sp-review:last-child{ border-bottom:none; }
.sp-review-head{ display:flex; justify-content:space-between; align-items:center; }
.sp-stars{ color:#f5c542; letter-spacing:1px; font-size:13px; }
.sp-review-item{ font-family:'Inter', sans-serif; font-size:11px; color:var(--muted); margin-top:2px; }
.sp-review-text{ font-family:'Inter', sans-serif; font-size:13px; line-height:1.4; color:var(--silver); margin-top:4px; word-break:break-word; }
.rv-stars{ display:flex; justify-content:center; gap:6px; margin:4px 0 14px; }
.rv-stars button{
background:none; border:none; padding:2px 4px; cursor:pointer;
font-size:34px; line-height:1; color:rgba(255,255,255,0.15); transition:color .12s, transform .12s;
}
.rv-stars button.on{ color:#f5c542; transform:scale(1.08); }
body.theme-light .rv-stars button{ color:rgba(0,0,0,0.15); }
body.theme-light .rv-stars button.on{ color:#f5a623; }
.deal-my-review{ font-family:'Inter', sans-serif; font-size:12px; color:#f5c542; padding:6px 2px; }

/* ---------- фильтры истории операций ---------- */
.h-chips{ display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
.h-chip, .h-period{
flex:none;
padding:6px 11px;
border-radius:14px;
border:1px solid var(--red-dim);
background:transparent;
color:var(--muted);
font-family:'Inter', sans-serif;
font-size:12px;
cursor:pointer;
white-space:nowrap;
}
.h-chip.on{ background:var(--red); border-color:var(--red); color:#fff; }
.h-periods{ display:flex; gap:6px; margin:4px 0 10px; }
.h-period{ flex:1; border-radius:8px; padding:6px 4px; }
.h-period.on{ border-color:var(--red); color:var(--silver); background:rgba(168,85,247,0.12); }
.h-summary{ display:flex; gap:8px; margin-bottom:6px; }
.h-summary > div{
flex:1; padding:8px 10px; border-radius:10px;
border:1px solid var(--red-dim); background:rgba(255,255,255,0.03);
display:flex; flex-direction:column; gap:2px;
font-family:'Inter', sans-serif; font-size:11px; color:var(--muted);
}
.h-summary b{ font-family:'JetBrains Mono', monospace; font-size:13px; }
.h-summary b.positive{ color:#4ad880; }
.h-summary b.negative{ color:#e0555a; }
.h-day{
margin:12px 0 2px;
font-family:'JetBrains Mono', monospace;
font-size:10px;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--muted);
}
.h-status{
display:inline-block; margin-top:3px; padding:2px 7px; border-radius:8px;
font-family:'Inter', sans-serif; font-size:10px; font-weight:600;
background:rgba(255,255,255,0.06); color:var(--muted);
}
.h-status.pending{ background:rgba(245,197,66,0.15); color:#f5c542; }
.h-status.approved{ background:rgba(74,216,128,0.15); color:#4ad880; }
.h-status.rejected{ background:rgba(224,85,90,0.15); color:#e0555a; }

/* ---------- живые аукционы ---------- */
.au-badge{
display:inline-block; margin:2px 0 6px; padding:3px 9px; border-radius:10px;
font-family:'Inter', sans-serif; font-size:11px; font-weight:600;
}
.au-badge.lead{ background:rgba(245,197,66,0.15); color:#f5c542; }
.au-badge.outbid{ background:rgba(224,85,90,0.15); color:#e0555a; }
.au-bids{ margin-left:6px; font-size:11px; color:var(--muted); }
.auction-card.au-flash{ animation:au-flash 1s ease-out; }
@keyframes au-flash{
0%{ box-shadow:0 0 0 2px rgba(168,85,247,0.9), 0 0 24px rgba(168,85,247,0.5); }
100%{ box-shadow:0 0 0 0 rgba(168,85,247,0), 0 0 0 rgba(168,85,247,0); }
}
@media (prefers-reduced-motion: reduce){ .auction-card.au-flash{ animation:none; } }
.au-quick{ display:flex; gap:6px; margin-top:8px; }
.au-quick-btn{
flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
padding:7px 4px; border-radius:8px; border:1px solid var(--red-dim);
background:rgba(255,255,255,0.03); color:var(--muted); cursor:pointer;
font-family:'Inter', sans-serif; font-size:10px;
}
.au-quick-btn b{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--silver); }

/* ---------- «Следить» и уточнения каталога желаний ---------- */
.watch-skin{
padding:10px 12px; margin-bottom:10px; border-radius:10px;
border:1px solid var(--red-dim); background:rgba(255,255,255,0.03);
font-family:'Inter', sans-serif; font-size:14px; font-weight:600; color:var(--silver);
}
.watch-check{
display:flex; align-items:center; gap:10px; padding:8px 2px;
font-family:'Inter', sans-serif; font-size:13px; color:var(--silver); cursor:pointer;
}
.watch-check input{ width:18px; height:18px; accent-color:var(--red); }
.wl-row{ display:flex; gap:8px; }
.wl-row .edit-field{ flex:1; min-width:0; }
.wl-select{
width:100%; padding:10px 8px; border-radius:4px;
border:1px solid var(--red-dim); background:rgba(255,255,255,0.03);
color:var(--silver); font-family:'Inter', sans-serif; font-size:13px;
}
.wl-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; }
.wl-chips span{
padding:1px 7px; border-radius:8px; background:rgba(255,255,255,0.06);
font-family:'Inter', sans-serif; font-size:10px; color:var(--muted);
}

/* антиснайпинг — метка «Продлён» и вспышка таймера */
.au-extended{
display:inline-block; margin:-6px 0 10px; padding:2px 8px; border-radius:8px;
background:rgba(168,85,247,0.15); color:#c89bff;
font-family:'Inter', sans-serif; font-size:11px; font-weight:600;
}
.auction-card-time.au-time-flash{ animation:au-time-flash 1.2s ease-out; }
@keyframes au-time-flash{ 0%{ color:#c89bff; transform:scale(1.08); } 100%{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .auction-card-time.au-time-flash{ animation:none; } }
.au-snipe-hint{ margin-top:8px; font-size:11px; line-height:1.4; }

/* ---------- дашборд рефералов ---------- */
.rd-money{ font-size:13px; }
.rd-up{ color:#4ad880; }
.rd-conv{ margin-top:10px; }
.rd-conv-bar{ height:6px; border-radius:3px; background:rgba(255,255,255,0.08); overflow:hidden; margin-bottom:4px; }
.rd-conv-bar > div{ height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:3px; }
.rd-friend{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--red-dim); }
.rd-friend:last-of-type{ border-bottom:none; }
.rd-friend-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.15); flex:none; }
.rd-friend-dot.on{ background:#4ad880; }
.rd-friend-info{ flex:1; min-width:0; }
.rd-friend-name{ font-family:'Inter', sans-serif; font-size:13px; color:var(--silver); }
.rd-friend-earned{ font-family:'JetBrains Mono', monospace; font-size:12px; color:#4ad880; font-weight:600; }
.rd-more{
width:100%; margin-top:6px; padding:8px; border-radius:8px;
border:1px solid var(--red-dim); background:transparent; color:#c89bff;
font-family:'Inter', sans-serif; font-size:12px; cursor:pointer;
}

.gw-block{ max-width:420px; margin:18px auto 0; padding:0 4px; text-align:left; }
/* ---------- прозрачность розыгрыша ---------- */
.gw-block-title{
font-family:'JetBrains Mono', monospace;
font-size:11px;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:8px;
}
.gw-winner{
display:flex; align-items:center; gap:10px;
padding:9px 0; border-bottom:1px solid var(--red-dim);
}
.gw-winner:last-child{ border-bottom:none; }
.gw-winner.me .gw-winner-name{ color:#f5c542; }
.gw-winner-icon{ font-size:17px; flex:none; }
.gw-winner-info{ flex:1; min-width:0; }
.gw-winner-name{ font-family:'Inter', sans-serif; font-size:13px; color:var(--silver); }
.gw-winner-sub{ font-family:'Inter', sans-serif; font-size:11px; color:var(--muted); margin-top:2px; }
.gw-you{ color:#f5c542; font-size:11px; }

/* ---------- наклейки ---------- */
.st-strip{ display:flex; gap:3px; margin:4px 0 2px; }
.st-mini{
width:22px; height:22px; object-fit:contain;
border-radius:4px; background:rgba(255,255,255,0.05); padding:1px;
}
.buy-stickers{ margin:12px 20px 0; }
.st-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
.st-item{ flex:0 0 74px; text-align:center; }
.st-img{
width:74px; height:56px; border-radius:8px;
border:1px solid var(--red-dim); background:rgba(255,255,255,0.03);
display:flex; align-items:center; justify-content:center; padding:4px;
}
.st-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.st-name{
font-family:'Inter', sans-serif; font-size:10px; line-height:1.25; color:var(--silver);
margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.st-wear{ font-family:'JetBrains Mono', monospace; font-size:9px; color:var(--muted); margin-top:1px; }

/* ---------- фирменные CTA (брендбук, раздел 07 Mini App UI) ----------
   Главное действие на экране — градиент Ghost Purple → Neon Pink.
   Второстепенные кнопки остаются контурными, чтобы градиент не
   терял силу от повторения. */
.skin-action.own{
background:transparent;
border:1px solid var(--red-dim);
color:var(--silver);
}
.cta, .save{
background:var(--cta-gradient) !important;
border:none !important;
color:#fff !important;
}
.cta{ border-radius:8px; box-shadow:0 6px 20px rgba(123,44,255,0.28); }
.cta.registered, .cta.live{ background:rgba(255,255,255,0.06) !important; color:var(--silver) !important; box-shadow:none; }
.skin-action:active, .cta:active, .save:active{ transform:scale(0.985); }

/* ---------- тест 3D-рендера (админ) ---------- */
.d3-canvas-wrap{
width:100%;
height:180px;
border-radius:12px;
border:1px solid var(--red-dim);
background:radial-gradient(ellipse at 50% 40%, rgba(123,44,255,0.18), rgba(8,7,13,0) 70%), var(--surface);
overflow:hidden;
margin-bottom:10px;
}
.d3-canvas-wrap canvas{ width:100%; height:100%; display:block; }
.d3-table{ display:flex; flex-direction:column; gap:4px; }
.d3-row{
display:flex; justify-content:space-between; gap:10px;
padding:6px 0; border-bottom:1px solid var(--red-dim);
font-family:'Inter', sans-serif; font-size:12px; color:var(--muted);
}
.d3-row:last-child{ border-bottom:none; }
.d3-row b{ font-family:'JetBrains Mono', monospace; color:var(--silver); font-weight:600; text-align:right; word-break:break-word; }

/* ---------- просмотрщик 3D ---------- */
.viewer3d-sheet{ padding:14px 16px 18px; display:flex; flex-direction:column; }
.viewer3d-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.viewer3d-titles{ flex:1; min-width:0; }
.viewer3d-title{ font-family:'Inter', sans-serif; font-size:15px; font-weight:700; color:var(--silver);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.viewer3d-mode{ font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); margin-top:2px; }
.viewer3d-icon{ flex:0 0 auto; width:36px; height:36px; padding:0; border-radius:10px; border:1px solid var(--red-dim);
  background:var(--surface); color:var(--silver); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.viewer3d-icon svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.viewer3d-icon:active{ background:rgba(123,44,255,0.25); }
.viewer3d-icon.active{ background:rgba(123,44,255,0.45); border-color:var(--red); }
.viewer3d-icon[hidden]{ display:none; }
.viewer3d-icon .v3-ico-exit{ display:none; }
.viewer3d-sheet.full .viewer3d-icon .v3-ico-enter{ display:none; }
.viewer3d-sheet.full .viewer3d-icon .v3-ico-exit{ display:block; }
.viewer3d-stage{
position:relative;
width:100%;
height:52vh;
border-radius:12px;
border:1px solid var(--red-dim);
background:radial-gradient(ellipse at 50% 45%, rgba(123,44,255,0.22), rgba(8,7,13,0) 70%), var(--surface);
overflow:hidden;
touch-action:none;
}
.viewer3d-stage canvas{ width:100%; height:100%; display:block; }
/* Фото лота поверх сцены, пока грузится 3D; гаснет, когда легла раскраска. */
.viewer3d-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8%; z-index:1;
  pointer-events:none; transition:opacity .5s; filter:drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.viewer3d-poster.gone{ opacity:0; }
/* Ползунок износа: зоны FN…BS как в CS2, метка — float этого лота. */
.viewer3d-wear{ margin-top:10px; }
.viewer3d-wear[hidden]{ display:none; }
.v3w-head{ display:flex; align-items:center; gap:8px; font-family:'Inter', sans-serif; font-size:12px; margin-bottom:6px; }
.v3w-label{ color:var(--muted); }
.v3w-value{ flex:1; min-width:0; color:var(--silver); font-family:'JetBrains Mono', monospace; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v3w-reset{ flex:0 0 auto; height:24px; padding:0 10px; border-radius:12px; border:1px solid var(--red-dim); background:var(--surface); color:var(--silver); font-size:11px; cursor:pointer; }
.v3w-reset[hidden]{ display:none; }
.v3w-track{ position:relative; height:30px; }
.v3w-zones{ position:absolute; left:0; right:0; top:9px; height:12px; display:flex; border-radius:6px; overflow:hidden; }
.v3w-zones span{ display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono', monospace; font-size:8px; color:rgba(255,255,255,.85); overflow:hidden; }
.v3w-zones span:nth-child(1){ background:#2e7d4f; }
.v3w-zones span:nth-child(2){ background:#5c8a3a; }
.v3w-zones span:nth-child(3){ background:#9a7b2e; }
.v3w-zones span:nth-child(4){ background:#a2552c; }
.v3w-zones span:nth-child(5){ background:#7f2f2f; }
.v3w-lot{ position:absolute; top:3px; width:2px; height:24px; margin-left:-1px; background:#fff; border-radius:1px; box-shadow:0 0 0 1px rgba(0,0,0,.5); pointer-events:none; }
#v3wRange{ position:absolute; left:0; right:0; top:0; width:100%; height:30px; margin:0; background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer; }
#v3wRange::-webkit-slider-runnable-track{ height:30px; background:transparent; }
#v3wRange::-moz-range-track{ height:30px; background:transparent; }
#v3wRange::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:26px; margin-top:2px; border-radius:6px; background:var(--red); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.5); }
#v3wRange::-moz-range-thumb{ width:14px; height:22px; border-radius:6px; background:var(--red); border:2px solid #fff; }
#v3wRange:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
/* Фон 3D: студия или фоны как в CS2 (картинки карт — с CDN 3D). */
.viewer3d-stage[data-bg="inspect"]{ background:radial-gradient(ellipse at 50% 40%, #5a5f66 0%, #2b2e33 55%, #16181b 100%); }
.viewer3d-stage[data-bg-image]{ background-size:cover; background-position:center; }
/* Фоны — один ряд под сценой; край затухает, чтобы было видно, что
   ряд прокручивается, а не обрезан. */
.viewer3d-bgs{ display:flex; gap:6px; overflow-x:auto; margin-top:10px; padding:0 18px 2px 0; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.viewer3d-bgs::-webkit-scrollbar{ display:none; }
.viewer3d-bg{ flex:0 0 auto; height:32px; padding:0 14px; border-radius:16px; border:1px solid var(--red-dim);
  background:var(--surface); color:var(--silver); font-family:'Inter', sans-serif; font-size:13px; white-space:nowrap; cursor:pointer; }
.viewer3d-bg[aria-checked="true"]{ border-color:var(--red); color:#fff; background:rgba(123,44,255,0.25); }
/* Вид («3D» / «В руках N») — сегменты поверх сцены сверху. */
.viewer3d-views{ position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:2px;
  padding:3px; border-radius:18px; background:rgba(8,7,13,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  max-width:calc(100% - 20px); overflow-x:auto; scrollbar-width:none; }
.viewer3d-views[hidden]{ display:none; }
.viewer3d-views::-webkit-scrollbar{ display:none; }
.viewer3d-views .viewer3d-bg{ height:28px; padding:0 12px; border:none; border-radius:14px; background:transparent; font-size:12px; }
.viewer3d-views .viewer3d-bg[aria-checked="true"]{ background:rgba(123,44,255,0.55); }
.viewer3d-hint{ position:absolute; left:10px; right:10px; bottom:12px; z-index:3; text-align:center; pointer-events:none;
  font-family:'Inter', sans-serif; font-size:12px; color:rgba(255,255,255,0.75); text-shadow:0 1px 3px rgba(0,0,0,0.6);
  transition:opacity .6s; }
.viewer3d-hint.gone{ opacity:0; }
/* Во весь экран: лист на всё окно, сцена забирает всё свободное место.
   Отступы — под вырез экрана и кнопки Telegram в полноэкранном режиме. */
.edit-overlay.v3-full{ align-items:stretch; z-index:1000 !important; }
.viewer3d-sheet.full{ max-width:none; max-height:none; height:100%; height:100dvh; border-radius:0; border:none; overflow:hidden;
  padding:calc(10px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)) 12px
          calc(12px + var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
.viewer3d-sheet.full .viewer3d-stage{ flex:1 1 auto; height:auto; min-height:0; }
.viewer3d-status{
position:absolute; left:0; right:0; bottom:34px; z-index:2; text-align:center;
font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
pointer-events:none;
}

/* подробности ошибки 3D — длинный текст от three.js должен быть виден целиком */
.viewer3d-status{ white-space:normal; padding:0 10px; }
.v3-detail{ display:block; margin-top:4px; opacity:.85; font-size:10px; line-height:1.35; word-break:break-word; }

/* ============================================================
   ИНВЕНТАРЬ — КАРТОЧКИ В СТИЛЕ STEAM
   Крупная картинка на градиенте по редкости, метки поверх неё,
   название в две строки: оружие мелко, раскраска крупно.
   ============================================================ */

.inv-item{
position:relative;
display:flex;
flex-direction:column;
border-radius:14px;
border:1px solid var(--red-dim);
border-top-width:3px;
background:var(--surface);
overflow:hidden;
padding:0;
cursor:pointer;
transition:transform .12s ease;
}
.inv-item:active{ transform:scale(0.98); }
.inv-item.selected{ box-shadow:0 0 0 2px var(--accent); }

.inv-item .inv-item-photo{
position:relative;
width:100%;
aspect-ratio:4/3;
display:flex;
align-items:center;
justify-content:center;
padding:10px 8px 4px;
/* Градиент по редкости — именно он даёт узнаваемый вид Steam. */
background:
radial-gradient(ellipse at 50% 120%, var(--rar-strong, rgba(140,95,214,0.55)) 0%, rgba(0,0,0,0) 72%),
linear-gradient(180deg, var(--rar-soft, rgba(140,95,214,0.22)) 0%, rgba(8,7,13,0.9) 100%);
}
/* Только само изображение предмета — прямой потомок блока.
   Без этого правило растягивало и картинки наклеек, лежащие
   в том же контейнере, и они закрывали собой весь предмет. */
.inv-item .inv-item-photo > img{
width:100%;
height:100%;
object-fit:contain;
filter:drop-shadow(0 6px 12px rgba(0,0,0,0.45));
}

.inv-badges{
position:absolute;
top:6px;
left:7px;
right:7px;
display:flex;
gap:4px;
flex-wrap:wrap;
z-index:2;
}
.inv-badge{
padding:2px 6px;
border-radius:6px;
background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px);
font-family:'JetBrains Mono', monospace;
font-size:9px;
font-weight:600;
color:rgba(255,255,255,0.92);
letter-spacing:0.04em;
}
.inv-badge.st{ color:#f5c542; }
.inv-badge.ban{ background:rgba(224,85,90,0.5); }

/* float и паттерн — ближе друг к другу, иначе на широкой карточке
   они разъезжаются по краям и читаются как два разных поля */
.inv-item .inv-item-floatrow{
justify-content:center;
gap:10px;
}

.inv-item-body{ padding:8px 9px 10px; }

.inv-item-weapon{
font-family:'Inter', sans-serif;
font-size:11px;
color:var(--muted);
line-height:1.2;
}
.inv-item-skin{
font-family:'Inter', sans-serif;
font-size:14px;
font-weight:700;
color:var(--silver);
line-height:1.25;
margin-top:1px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.inv-item .inv-item-wearbar{ margin-top:7px; }
.inv-item .inv-item-floatrow{ margin-top:3px; }

.inv-item-banned{ opacity:0.65; }

/* Цвет градиента задаётся редкостью — те же цвета, что у рамок. */
.inv-item.rarity-consumer{ --rar-soft:rgba(174,194,209,0.20); --rar-strong:rgba(174,194,209,0.45); }
.inv-item.rarity-industrial{ --rar-soft:rgba(95,147,199,0.22); --rar-strong:rgba(95,147,199,0.50); }
.inv-item.rarity-milspec{ --rar-soft:rgba(90,111,214,0.24); --rar-strong:rgba(90,111,214,0.52); }
.inv-item.rarity-restricted{ --rar-soft:rgba(140,95,214,0.26); --rar-strong:rgba(140,95,214,0.55); }
.inv-item.rarity-classified{ --rar-soft:rgba(193,91,201,0.26); --rar-strong:rgba(193,91,201,0.58); }
.inv-item.rarity-covert{ --rar-soft:rgba(216,84,84,0.26); --rar-strong:rgba(216,84,84,0.58); }
.inv-item.rarity-contraband,
.inv-item.rarity-extraordinary{ --rar-soft:rgba(219,184,79,0.26); --rar-strong:rgba(219,184,79,0.58); }

body.theme-light .inv-item .inv-item-photo{
background:
radial-gradient(ellipse at 50% 120%, var(--rar-strong) 0%, rgba(255,255,255,0) 72%),
linear-gradient(180deg, var(--rar-soft) 0%, rgba(255,255,255,0.9) 100%);
}

/* ---------- окно лота: одна кнопка «Купить» ---------- */
.buy-sticky-bar .buy-status-line{
flex:1 1 100%;
margin:0;
min-height:0;
text-align:center;
}
.buy-sticky-bar .buy-status-line:empty{ display:none; }
.buy-sticky-bar .buy-main-btn{ flex:1 1 100%; order:1; gap:6px; }
/* «Предложить цену» и «Обмен» — компактно в одну строку под «Купить». */
.buy-sticky-bar #buyMakeOfferBtn,
.buy-sticky-bar #buyMakeTradeBtn{
flex:1 1 0;
order:2;
margin:0;
min-height:40px;
font-size:12px;
}
.buy-sticky-bar #buySendOfferBtn{ order:3; }

/* Крестик прилипает к верху окна и не уезжает при прокрутке. */
.buy-sheet > .buy-close-btn{
position:sticky;
top:10px;
display:block;
margin:10px 10px -40px auto;
}

/* Пока открыто окно, кнопки шапки (уведомления, профиль) прячем:
   они висят поверх всех слоёв, и крестик окна оказывался прямо под
   аватаркой, а сама аватарка оставалась нажимаемой. */
body.modal-open .brand-tr{
visibility:hidden;
pointer-events:none;
}

/* ---------- окно выбора способа оплаты ---------- */
.pay-overlay{ z-index:25; }
.pay-sheet{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 16px); }
.pay-head{ padding:14px 56px 12px 20px; }
.pay-title{
font-family:'JetBrains Mono', monospace;
font-size:15px;
font-weight:700;
color:var(--silver);
}
.pay-sub{ margin-top:4px; font-size:12px; color:var(--muted); }
.pay-methods{
display:flex;
flex-direction:column;
gap:10px;
padding:0 18px;
}

/* ---------- карточка каталога целиком кликабельна ---------- */
.skin-card[data-card]{ cursor:pointer; }
.skin-card[data-card]:active{ transform:scale(0.985); }

/* ---------- розыгрыш: прогресс приглашений ---------- */
.gw-invite-bar{
height:6px;
margin:10px 0 8px;
border-radius:3px;
background:rgba(255,255,255,0.08);
overflow:hidden;
}
.gw-invite-bar > div{
height:100%;
width:0;
background:linear-gradient(90deg, var(--red), #FF2BD6);
transition:width .4s ease;
}

/* ---------- розыгрыш: приз из инвентаря ---------- */
.gw-prize-skin{
display:flex;
align-items:center;
gap:12px;
width:100%;
max-width:300px;
margin:12px auto 0;
padding:10px 12px;
border:1px solid var(--red-dim);
border-radius:12px;
background:rgba(255,255,255,0.04);
text-align:left;
}
.gw-prize-skin img{ width:84px; height:63px; object-fit:contain; flex:none; }
.gw-prize-skin .gps-body{ flex:1; min-width:0; }
.gw-prize-skin .gps-title{ font-size:13px; font-weight:700; color:var(--silver); overflow:hidden; text-overflow:ellipsis; }
.gw-prize-skin .gps-meta{ margin-top:3px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); }
.gw-prize-skin button{
flex:none;
padding:8px 12px;
border-radius:8px;
border:1px solid var(--red);
background:transparent;
color:var(--silver);
font-family:'JetBrains Mono', monospace;
font-size:12px;
cursor:pointer;
}
.gw-prize-skin.admin{ margin:8px 0 0; max-width:none; }

/* ---------- розыгрыш: ссылка-приглашение ---------- */
.gw-invite-link{
display:flex;
align-items:center;
gap:8px;
margin-top:10px;
padding:8px 10px;
border-radius:8px;
background:rgba(0,0,0,0.25);
}
.gw-invite-link span{
display:block;
flex:1 1 0;
width:0;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-family:'JetBrains Mono', monospace;
font-size:11px;
color:var(--muted);
}
.gw-invite-link button{
flex:none;
padding:6px 10px;
border:none;
border-radius:6px;
background:var(--red);
color:#fff;
font-size:12px;
cursor:pointer;
}

.admin-history-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-top:16px;
}
.admin-history-head .profile-section-title{ margin:0 !important; }
.admin-history-clear{
flex:none;
padding:5px 10px;
border-radius:8px;
border:1px solid var(--red-dim);
background:transparent;
color:var(--muted);
font-size:11px;
cursor:pointer;
}

/* ---------- правила и оферты ---------- */
/* Выше обязательного окна соглашения (10000) — оттуда тоже открывают. */
.legal-overlay{ z-index:10050; }
.legal-sheet{
display:flex;
flex-direction:column;
max-height:88vh;
padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);
}
.legal-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:12px;
}
.legal-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.legal-tabs button{
padding:6px 10px;
border-radius:999px;
border:1px solid rgba(255,255,255,0.12);
background:transparent;
color:var(--muted);
font-size:12px;
}
.legal-tabs button.active{
border-color:var(--red-dim);
background:var(--red-dim);
color:var(--silver);
}
.legal-text{
flex:1 1 auto;
min-height:120px;
overflow-y:auto;
white-space:pre-wrap;
word-wrap:break-word;
font-size:13px;
line-height:1.55;
color:var(--muted);
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
border-radius:12px;
padding:14px;
}
.legal-accept{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.legal-check{
display:flex;
align-items:flex-start;
gap:8px;
font-size:13px;
line-height:1.4;
color:var(--silver);
}
.legal-check input{ margin-top:2px; flex:none; width:18px; height:18px; }
.legal-note,
.legal-links{
margin:12px 18px 0;
font-size:11px;
line-height:1.45;
color:var(--muted);
text-align:center;
}
.legal-links{ margin:10px 0 0; font-size:12px; }
.legal-note a,
.legal-links a{ color:var(--silver); text-decoration:underline; }
.legal-accept button:disabled{ opacity:0.45; }

/* ---------- розыгрыш ---------- */
.raffle-screen{
justify-content:flex-start;
/* сверху — место под колокольчик и аватар в углу */
padding:72px 16px 110px;
}
.raffle-screen > *{ width:100%; max-width:420px; }
.raffle-screen > .raffle-back{
position:absolute;
top:18px;
left:16px;
width:38px;
max-width:38px;
}
.raffle-eyebrow{
font-family:'JetBrains Mono', monospace;
font-size:11px;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--red);
}
.raffle-title{
margin:6px 0 14px;
font-family:'Inter', sans-serif;
font-size:22px;
line-height:1.25;
font-weight:800;
color:var(--silver);
word-wrap:break-word;
}
.raffle-empty{
padding:40px 12px;
color:var(--muted);
font-size:14px;
line-height:1.5;
}
.raffle-hero{
position:relative;
border-radius:16px;
overflow:hidden;
border:1px solid var(--red-dim);
background:radial-gradient(circle at 50% 40%, rgba(123,44,255,0.35), rgba(8,7,13,0) 70%), var(--surface);
aspect-ratio:16 / 10;
display:flex;
align-items:center;
justify-content:center;
}
.raffle-hero img{ width:100%; height:100%; object-fit:contain; }
.raffle-hero-empty{ font-size:64px; }
.raffle-3d-btn{
position:absolute;
right:10px;
bottom:10px;
padding:7px 12px;
border-radius:999px;
border:1px solid rgba(255,255,255,0.25);
background:rgba(8,7,13,0.7);
color:#fff;
font-size:12px;
font-weight:600;
cursor:pointer;
}
.raffle-meta{ margin-top:8px; font-size:12px; color:var(--muted); }
.raffle-stats{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:8px;
margin:14px 0;
}
.raffle-stat{
display:flex;
flex-direction:column;
gap:4px;
padding:10px 6px;
border-radius:12px;
background:var(--surface);
border:1px solid var(--red-dim);
min-width:0;
}
.raffle-stat span{ font-size:11px; color:var(--muted); }
.raffle-stat b{
font-family:'JetBrains Mono', monospace;
font-size:14px;
color:var(--silver);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.raffle-card{
text-align:left;
padding:14px;
border-radius:14px;
background:var(--surface);
border:1px solid var(--red-dim);
margin-bottom:12px;
display:flex;
flex-direction:column;
gap:10px;
}
.raffle-card.done{ border-color:rgba(74,222,128,0.5); }
.raffle-card.done .gw-invite-bar > div{ background:#4ade80; }
.raffle-cond{ font-size:14px; font-weight:600; color:var(--silver); }
.raffle-progress-head{ display:flex; justify-content:space-between; font-size:13px; color:var(--muted); }
.raffle-progress-head b{ color:var(--silver); font-family:'JetBrains Mono', monospace; }
.raffle-in{ font-size:15px; font-weight:700; color:#4ade80; }
.raffle-ticket{ font-size:14px; color:var(--silver); margin-top:4px; }
.raffle-hint{ font-size:12px; line-height:1.45; color:var(--muted); }
.raffle-pending{ font-size:12px; color:#f5c542; }
.raffle-sub{ display:flex; flex-direction:column; gap:8px; }
.raffle-sub-actions{ display:flex; gap:8px; }
.raffle-sub-actions .steam-link-btn{ flex:1; margin:0; }
.raffle-cta{
border-color:var(--red);
background:var(--cta-gradient);
color:#fff;
}
.raffle-rules summary,
.raffle-proof summary{ cursor:pointer; font-size:13px; color:var(--silver); }
.raffle-rules p{ margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--muted); }
.raffle-result-title{ font-size:17px; font-weight:800; color:var(--silver); }
.raffle-result-row{ font-size:14px; color:var(--silver); }
.raffle-lost{ font-size:13px; color:var(--muted); }
.raffle-proof-row{
display:flex;
justify-content:space-between;
gap:10px;
padding:6px 0;
border-bottom:1px solid rgba(255,255,255,0.06);
font-size:12px;
color:var(--muted);
}
.raffle-proof-row b{ color:var(--silver); font-weight:600; text-align:right; min-width:0; word-break:break-all; }
.raffle-proof-row code{ font-size:11px; }
.raffle-proof-row.win b{ color:#f5c542; }
.raffle-proof #rfProofBody{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.raffle-history{ padding:0; }
.raffle-history .gw-winner-icon img{ width:44px; height:32px; object-fit:contain; }

/* ============================================================
   ГЛАВНЫЙ ЭКРАН МАГАЗИНА
   ============================================================ */

/* баланс в шапке */
.brand-tr .balance-pill{
display:flex;
align-items:center;
gap:2px;
padding:0 4px 0 12px;
height:40px;
border-radius:20px;
border:1px solid var(--red-dim);
background:rgba(23,16,34,0.9);
}
.balance-pill-main{
display:flex;
align-items:center;
gap:6px;
border:none;
background:none;
color:var(--silver);
font-family:'JetBrains Mono', monospace;
font-size:12px;
font-weight:600;
padding:0;
cursor:pointer;
white-space:nowrap;
}
.balance-pill-main img{ width:18px; height:18px; object-fit:contain; }
.balance-pill-info{
width:30px;
height:30px;
border:none;
border-radius:50%;
background:none;
color:var(--muted);
font-size:15px;
cursor:pointer;
}

/* промо-баннер */
.promo{ margin-bottom:14px; }
.promo-track{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
scrollbar-width:none;
border-radius:18px;
}
.promo-track::-webkit-scrollbar{ display:none; }
.promo-slide{
position:relative;
flex:0 0 100%;
scroll-snap-align:start;
min-height:168px;
padding:18px 16px;
border-radius:18px;
border:1px solid rgba(168,85,247,0.45);
background:
radial-gradient(circle at 85% 40%, rgba(255,43,214,0.35), transparent 55%),
radial-gradient(circle at 70% 90%, rgba(123,44,255,0.45), transparent 60%),
linear-gradient(135deg, #1b0f2e, #0d0918);
overflow:hidden;
cursor:pointer;
}
.promo-body{ position:relative; z-index:2; max-width:62%; }
.promo-kicker{
font-family:'JetBrains Mono', monospace;
font-size:10px;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--red-glow);
margin-bottom:4px;
}
.promo-title{
font-family:'Orbitron', 'Inter', sans-serif;
font-size:20px;
font-weight:900;
line-height:1.1;
color:#fff;
text-transform:uppercase;
word-wrap:break-word;
}
.promo-text{ margin-top:6px; font-size:12px; line-height:1.4; color:var(--muted); }
.promo-btn{
margin-top:12px;
padding:9px 14px;
border:none;
border-radius:10px;
background:var(--cta-gradient);
color:#fff;
font-size:12px;
font-weight:700;
cursor:pointer;
}
.promo-img{
position:absolute;
right:-8px;
top:50%;
transform:translateY(-50%) rotate(-12deg);
width:52%;
max-height:88%;
object-fit:contain;
filter:drop-shadow(0 10px 24px rgba(255,43,214,0.35));
z-index:1;
}
.promo-dots{ display:flex; justify-content:center; gap:6px; margin-top:8px; }
.promo-dots span{ width:6px; height:6px; border-radius:50%; background:var(--red-dim); transition:all .2s; }
.promo-dots span.on{ width:16px; border-radius:3px; background:var(--red); }

/* поиск + фильтр */
.shop-search-row{ display:flex; gap:8px; margin-bottom:12px; scroll-margin-top:72px; }
.shop-search{
flex:1;
min-width:0;
display:flex;
align-items:center;
gap:8px;
padding:0 12px;
height:46px;
border-radius:12px;
border:1px solid var(--red-dim);
background:var(--surface);
color:var(--muted);
}
.shop-search:focus-within{ border-color:var(--red); }
.shop-search input{
flex:1;
min-width:0;
border:none;
background:none;
color:var(--silver);
font-family:'Inter', sans-serif;
font-size:14px;
outline:none;
}
.shop-filter-btn{
position:relative;
flex:0 0 46px;
height:46px;
border-radius:12px;
border:1px solid var(--red-dim);
background:var(--surface);
color:var(--silver);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.shop-filter-btn .filters-count{ position:absolute; top:-6px; right:-6px; }

/* категории с иконками */
.shop-cats{ gap:8px; margin-bottom:12px; }
.shop-cats .category-chip{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
min-width:64px;
padding:10px 8px 8px;
border-radius:12px;
background:var(--surface);
font-family:'Inter', sans-serif;
font-size:11px;
font-weight:500;
text-transform:none;
}
.shop-cats .category-chip svg{ width:24px; height:24px; }
.shop-cats .category-chip.active{
border-color:var(--red);
background:rgba(123,44,255,0.18);
box-shadow:0 0 0 1px var(--red) inset;
}
.shop-cats .category-chip.tool{ border-style:dashed; color:var(--silver); }

/* вкладки над товарами */
.shop-tabs{
display:flex;
gap:4px;
padding:4px;
margin-bottom:12px;
border-radius:14px;
border:1px solid var(--red-dim);
background:var(--surface);
overflow-x:auto;
scrollbar-width:none;
}
.shop-tabs::-webkit-scrollbar{ display:none; }
.shop-tabs button{
flex:1 0 auto;
padding:9px 10px;
border:none;
border-radius:10px;
background:none;
color:var(--muted);
font-size:12px;
font-weight:600;
white-space:nowrap;
cursor:pointer;
}
.shop-tabs button.active{ background:var(--cta-gradient); color:#fff; }
/* на узком экране — без значков, чтобы все четыре вкладки влезли */
@media (max-width:420px){
.shop-tabs button{ padding:9px 6px; }
.shop-tabs button > span:first-child{ display:none; }
}

/* карточка: ❤️, корзина, компактнее */
.skin-card{ padding:8px; border-radius:12px; cursor:pointer; }
.skin-photo-wrap{ aspect-ratio:4 / 3; margin-bottom:6px; }
.skin-photo{ object-fit:contain; }
.skin-badge.wear{ right:auto; left:5px; }
.skin-badge.wear ~ .skin-badge.stattrak{ top:26px; }
.skin-fav{
position:absolute;
top:4px;
right:4px;
width:30px;
height:30px;
border:none;
border-radius:50%;
background:rgba(8,7,13,0.55);
color:var(--silver);
fill:none;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.skin-fav svg{ fill:none; }
.skin-fav.on{ color:#ff2bd6; }
.skin-fav.on svg{ fill:#ff2bd6; }
.skin-title{ min-height:0; font-size:13px; }
.skin-price{ font-size:14px; margin-top:4px; }
.skin-action-row{ margin-top:8px; }
.skin-action-row .skin-action{ padding:10px 6px; border-radius:9px; }
.skin-cart-btn{
width:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:9px;
}
.skin-cart-btn.in-cart{ color:#fff; }

/* нижняя навигация */
.nav-icon{ position:relative; filter:none; }
.nav-icon svg{ display:block; }
.nav-label{ font-family:'Inter', sans-serif; font-size:10px; text-transform:none; letter-spacing:0; }
.nav-btn.active .nav-icon{ color:var(--red); }
.nav-badge{
position:absolute;
top:-6px;
right:-10px;
min-width:16px;
height:16px;
padding:0 4px;
border-radius:8px;
background:#ff2bd6;
color:#fff;
font-family:'Inter', sans-serif;
font-size:10px;
font-weight:700;
line-height:16px;
text-align:center;
}

/* мои лоты */
.lots-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }

/* ============================================================
   ИНВЕНТАРЬ STEAM — окно выбора скинов
   ============================================================ */
.inventory-sheet{
display:flex;
flex-direction:column;
max-height:92vh;
padding:16px 14px calc(env(safe-area-inset-bottom, 0px) + 12px);
}
.inv-head{
display:flex;
align-items:center;
gap:12px;
padding:4px 0 12px;
}
.inv-head-icon{
flex:0 0 48px;
height:48px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
background:linear-gradient(145deg, #1b2838, #2a475e);
box-shadow:0 0 0 2px rgba(123,44,255,0.35);
}
.inv-head-text{ flex:1; min-width:0; }
.inv-head-text h2{ margin:0; font-family:'Inter', sans-serif; font-size:19px; font-weight:800; text-transform:none; letter-spacing:0; color:var(--silver); }
.inv-head-sub{ margin-top:2px; font-size:12px; color:var(--muted); line-height:1.35; }
.inv-refresh-btn{
flex:0 0 auto;
display:flex;
align-items:center;
gap:6px;
padding:9px 12px;
border-radius:10px;
border:1px solid var(--red);
background:rgba(123,44,255,0.12);
color:var(--silver);
font-size:12px;
font-weight:600;
cursor:pointer;
}
.inv-search-row{ margin-bottom:10px; scroll-margin-top:0; }
.shop-filter-btn.active{ border-color:var(--red); background:rgba(123,44,255,0.25); color:#fff; }
.inv-filters{ display:grid; grid-template-columns:1fr 0.9fr 1.2fr; gap:6px; margin-bottom:6px; }
.inv-select{
position:relative;
display:flex;
align-items:center;
gap:5px;
min-width:0;
height:40px;
padding:0 7px;
border-radius:10px;
border:1px solid var(--red-dim);
background:var(--surface);
color:var(--red-glow);
}
.inv-select svg{ flex:none; }
.inv-select select{
flex:1;
min-width:0;
height:100%;
border:none;
background:none;
color:var(--silver);
font-family:'Inter', sans-serif;
font-size:11.5px;
outline:none;
appearance:none;
-webkit-appearance:none;
padding-right:12px;
background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position:right 5px center, right 1px center;
background-size:4px 4px, 4px 4px;
background-repeat:no-repeat;
text-overflow:ellipsis;
}
.inv-select select option{ color:#000; }

.inventory-sheet .inventory-grid{
flex:1 1 auto;
max-height:none;
min-height:200px;
margin:6px 0 8px;
/* Строки — по высоте карточки. Без этого сетка, зажатая по высоте
   окна, сплющивала карточки (у них overflow:hidden) в полоски. */
grid-auto-rows:max-content;
align-content:start;
}
.inv-item .inv-item-photo{ padding-top:26px; }
.inv-fav{ z-index:3; top:5px; right:5px; width:28px; height:28px; }
.inv-float-line{ margin-top:4px; font-size:11px; color:var(--muted); }
.inv-float-line b{ color:var(--silver); font-weight:600; font-family:'JetBrains Mono', monospace; }
/* Float показываем целиком (до 17 знаков) — отдельной строкой, чтобы
   во всех карточках сетки он стоял одинаково, а не переносился местами. */
.inv-float-line b{ display:block; font-size:10.5px; letter-spacing:-0.2px; overflow-wrap:anywhere; }
.inv-float-line span{ margin-left:6px; }
.inv-item-actions{ display:flex; gap:6px; margin-top:9px; }
.inv-item-actions button{
flex:1;
min-width:0;
padding:9px 4px;
border-radius:9px;
font-size:11px;
font-weight:600;
white-space:nowrap;
cursor:pointer;
}
.inv-more{ border:1px solid var(--red-dim); background:transparent; color:var(--silver); }
.inv-pick{ border:none; background:var(--cta-gradient); color:#fff; }
.inv-pick.on{ background:#4ade80; color:#0a1a10; }
.inv-pick:disabled{ opacity:0.5; }
.inv-item.selected{ box-shadow:0 0 0 2px var(--red); border-color:var(--red); }

/* панель выбранных */
.inv-picked{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
padding:10px;
margin-bottom:8px;
border-radius:14px;
border:1px solid var(--red-dim);
background:rgba(23,16,34,0.96);
}
.inv-picked-thumbs{ display:flex; gap:6px; overflow-x:auto; flex:1 1 0; min-width:0; scrollbar-width:none; }
.inv-picked-thumbs::-webkit-scrollbar{ display:none; }
.inv-thumb{
position:relative;
flex:0 0 44px;
height:44px;
border-radius:9px;
border:1px solid var(--red-dim);
background:rgba(123,44,255,0.12);
}
.inv-thumb img{ width:100%; height:100%; object-fit:contain; }
.inv-thumb button{
position:absolute;
top:-5px;
right:-5px;
width:17px;
height:17px;
border-radius:50%;
border:none;
background:var(--red);
color:#fff;
font-size:9px;
line-height:17px;
padding:0;
cursor:pointer;
}
.inv-thumb.add{ border-style:dashed; color:var(--muted); font-size:20px; cursor:pointer; }
.inv-picked-count{ display:flex; flex-direction:column; flex:none; font-size:11px; color:var(--muted); text-align:right; }
.inv-picked-count b{ font-size:14px; color:var(--silver); }
.inv-continue{
flex:none;
padding:12px 14px;
border:none;
border-radius:11px;
background:var(--cta-gradient);
color:#fff;
font-size:13px;
font-weight:700;
white-space:nowrap;
cursor:pointer;
}
.inv-sell-all{
flex:1 1 100%;
padding:11px 14px;
border:1px solid var(--red-dim);
border-radius:11px;
background:rgba(123,44,255,0.14);
color:var(--silver);
font-size:13px;
font-weight:700;
cursor:pointer;
}
.inv-sell-all:disabled{ opacity:0.7; cursor:default; }
.inv-close{
width:100%;
padding:13px;
border-radius:12px;
border:1px solid var(--red-dim);
background:transparent;
color:var(--muted);
font-family:'JetBrains Mono', monospace;
font-size:13px;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
cursor:pointer;
}

/* подробнее */
.inv-detail-body{ margin-top:12px; }
.inv-detail-photo{ cursor:default; }
.inv-detail-photo .inv-item-photo{ aspect-ratio:16 / 10; }
.qs-queue{ margin-top:2px; font-size:12px; color:var(--red-glow); }

/* ============================================================
   ПРОФИЛЬ
   Пользователь → баланс → активность → Steam → безопасность →
   избранное → рефералы → настройки.
   ============================================================ */
#screenProfile{ padding:72px 14px calc(env(safe-area-inset-bottom, 0px) + 92px); }

/* баланс в шапке только на главной — в профиле он свой */
body:not([data-tab="shop"]) .brand-tr .balance-pill{ display:none !important; }

.pf-hero{
align-items:stretch;
text-align:left;
padding:18px 16px;
border-radius:18px;
border:1px solid rgba(168,85,247,0.45);
background:
radial-gradient(circle at 90% 20%, rgba(255,43,214,0.28), transparent 55%),
linear-gradient(135deg, #24123d, #0f0a1c);
}
.pf-hero-row{ display:flex; align-items:center; gap:14px; }
.pf-hero .profile-avatar{
flex:0 0 72px;
width:72px;
height:72px;
margin:0;
border:2px solid var(--red);
box-shadow:0 0 18px rgba(168,85,247,0.45);
}
.pf-hero-info{ flex:1; min-width:0; }
.pf-name-row{ display:flex; align-items:center; gap:6px; min-width:0; }
.pf-hero .profile-name{ margin:0; font-size:19px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-verified{ flex:none; color:#a855f7; display:flex; }
.pf-hero .trust-badge{
margin:6px 0 4px;
background:rgba(74,222,128,0.12);
border-color:rgba(74,222,128,0.45);
color:#4ade80;
font-size:12px;
padding:4px 10px;
}
.pf-hero .trust-progress{ margin:0; font-size:11px; }

.pf-card{
position:relative;
margin-bottom:12px;
padding:14px;
border-radius:16px;
border:1px solid var(--red-dim);
background:var(--surface);
text-align:left;
}
.pf-card-head{ display:flex; align-items:center; gap:12px; }
.pf-card-title{ flex:1; min-width:0; }
.pf-title{ font-size:16px; font-weight:700; color:var(--silver); }
.pf-sub{ margin-top:3px; font-size:12px; line-height:1.4; color:var(--muted); }
.pf-label{ font-size:12px; color:var(--muted); }
.pf-ico{
flex:0 0 44px;
height:44px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
}
.pf-ico.violet{ background:rgba(123,44,255,0.18); color:#b98bff; }
.pf-ico.green{ background:rgba(74,222,128,0.14); color:#4ade80; }
.pf-ico.blue{ background:rgba(59,130,246,0.18); color:#6ea8ff; }
.pf-ico.orange{ background:rgba(249,115,22,0.16); color:#fb923c; }
.pf-ico.teal{ background:rgba(20,184,166,0.16); color:#2dd4bf; }
.pf-ico.gold{ background:rgba(245,197,66,0.16); color:#f5c542; }
.pf-ico.steam{ border-radius:50%; background:linear-gradient(145deg, #1b2838, #2a475e); color:#fff; }

.pf-status{ display:flex; align-items:center; gap:6px; margin-top:3px; font-size:12px; color:var(--muted); }
.pf-dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); }
.pf-status.ok{ color:#4ade80; }
.pf-status.ok .pf-dot{ background:#4ade80; }
.pf-card .profile-steam-status{ margin-top:4px; font-size:12px; color:var(--muted); }
.pf-card .profile-steam-status svg{ color:#4ade80; vertical-align:-2px; }

/* баланс */
.pf-balance{ border-color:rgba(168,85,247,0.45); background:linear-gradient(135deg, rgba(123,44,255,0.16), rgba(23,16,34,0.95)); }
.pf-balance-top{ display:flex; gap:12px; align-items:flex-start; }
.pf-balance-info{ flex:1; min-width:0; }
.pf-balance-amount{
margin-top:2px;
font-family:'JetBrains Mono', monospace;
font-size:26px;
font-weight:700;
color:var(--silver);
line-height:1.15;
}
.pf-held-row{ display:flex; align-items:center; gap:4px; margin-top:4px; }
.pf-held-row .profile-held{ margin:0; font-size:12px; }
.pf-info-btn{ border:none; background:none; color:var(--muted); font-size:15px; padding:0 4px; cursor:pointer; }
.pf-money-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.pf-money-btn{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:46px;
padding:0 12px;
border-radius:12px;
border:1px solid var(--red-dim);
background:rgba(8,7,13,0.6);
color:var(--silver);
font-size:14px;
font-weight:700;
cursor:pointer;
}
.pf-money-btn.primary{ border:none; background:var(--cta-gradient); color:#fff; }

/* активность */
.pf-stats{ gap:8px; margin-bottom:12px; }
.pf-stats .stat-box{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
padding:12px 10px;
border-radius:14px;
background:var(--surface);
text-align:left;
cursor:pointer;
color:inherit;
font:inherit;
}
.pf-stats .pf-ico{ flex-basis:auto; width:36px; height:36px; border-radius:10px; }
.pf-stats .stat-value{ font-size:22px; }
.pf-stats .stat-label{ font-family:'Inter', sans-serif; font-size:11px; letter-spacing:0; text-transform:none; margin-top:0; }

/* кнопки внутри карточек */
.pf-btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.pf-btn{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
min-height:40px;
padding:0 8px;
border-radius:10px;
border:1px solid var(--red-dim);
background:transparent;
color:var(--silver);
font-size:12px;
font-weight:600;
cursor:pointer;
}
.pf-btn:first-child{ border-color:var(--red); color:var(--red-glow); }
.pf-add-btn{
flex:none;
align-self:flex-start;
padding:8px 12px;
border-radius:10px;
border:1px solid var(--red);
background:transparent;
color:var(--red-glow);
font-size:12px;
font-weight:700;
cursor:pointer;
}

/* сворачиваемая безопасность */
.pf-collapse summary{ list-style:none; cursor:pointer; }
.pf-collapse summary::-webkit-details-marker{ display:none; }
.pf-chevron{ font-size:22px; color:var(--muted); transition:transform .2s; }
.pf-collapse[open] .pf-chevron{ transform:rotate(90deg); }
.pf-toggles{ display:grid; gap:8px; margin-top:12px; }
.pf-toggle{
display:flex;
align-items:center;
gap:8px;
padding:10px 12px;
border-radius:10px;
border:1px solid var(--red-dim);
font-size:13px;
color:var(--silver);
}
.pf-toggle span{ flex:1; }
.pf-toggle input{ width:20px; height:20px; accent-color:#4ade80; }

/* избранное */
.pf-wishlist{ margin-top:10px; }
.pf-wishlist:empty{ display:none; }

/* рефералы */
.pf-ref-link{ margin-top:12px; }
.pf-ref-link .topup-details-text{ font-size:12px; word-break:break-all; }
.pf-wallet-row{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
/* цифры рефералов в одну строку: пришли, купили, заработано */
#referralDashboard .sp-grid{ grid-template-columns:repeat(3, 1fr); }
#referralDashboard .sp-cell:nth-child(4){ display:none; }
.rd-details{ margin-top:10px; }
.rd-details summary{ cursor:pointer; font-size:13px; color:var(--red-glow); }
.pf-wallet{
flex:1;
min-width:0;
padding:10px 12px;
border-radius:12px;
border:1px solid var(--red-dim);
}
.pf-wallet-head{ display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--muted); }
.pf-wallet-head b{ font-family:'JetBrains Mono', monospace; color:var(--silver); font-weight:600; white-space:nowrap; }
.pf-wallet-bar{ height:6px; margin-top:8px; border-radius:3px; background:rgba(255,255,255,0.08); overflow:hidden; }
.pf-wallet-bar div{ height:100%; width:0; background:var(--cta-gradient); }
.pf-wallet-row .pf-money-btn{ width:100%; }

/* настройки */
.pf-lang .lang-switch{ margin-top:10px; gap:8px; }
.pf-lang .lang-btn{ padding:10px 4px; font-size:12px; border-radius:10px; }
.pf-lang-head{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--silver); }
.pf-lang-head svg{ color:var(--red-glow); }
.pf-settings{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pf-set-btn{
display:flex;
align-items:center;
gap:10px;
min-height:50px;
padding:0 12px;
border-radius:14px;
border:1px solid var(--red-dim);
background:var(--surface);
color:var(--silver);
font-size:13px;
text-align:left;
cursor:pointer;
}
.pf-set-btn svg{ flex:none; color:var(--muted); }
.pf-set-btn.danger{ color:#f87171; border-color:rgba(248,113,113,0.35); }
.pf-set-btn.danger svg{ color:#f87171; }

/* ============================================================
   БИЛДЕР ПОД БЮДЖЕТ
   ============================================================ */
.bld-sheet{
position:relative;
max-height:92vh;
overflow-y:auto;
padding:18px 14px calc(env(safe-area-inset-bottom, 0px) + 16px);
background:
radial-gradient(circle at 90% 0%, rgba(168,85,247,0.28), transparent 45%),
var(--surface);
}
.bld-close{ position:absolute; top:14px; right:14px; z-index:3; }
.bld-head{ display:flex; align-items:center; gap:12px; padding-right:44px; margin-bottom:14px; }
.bld-head-ico{
flex:0 0 52px;
height:52px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
background:rgba(123,44,255,0.18);
box-shadow:0 0 0 1px rgba(168,85,247,0.4), 0 0 18px rgba(168,85,247,0.35);
}
.bld-title{
margin:0;
font-family:'JetBrains Mono', monospace;
font-size:17px;
font-weight:800;
letter-spacing:0.04em;
text-transform:uppercase;
background:linear-gradient(90deg, #c084fc, #ff2bd6);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.bld-sub{ margin-top:4px; font-size:12px; line-height:1.4; color:var(--muted); }
.bld-step{ margin:16px 0 8px; font-size:14px; font-weight:700; color:var(--silver); }
.bld-step > span:first-child{ color:var(--red-glow); }
.bld-step em{ font-style:normal; font-weight:400; font-size:12px; color:var(--muted); }

.bld-modes{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.bld-mode{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
padding:12px 6px 10px;
border-radius:14px;
border:1px solid var(--red-dim);
background:rgba(8,7,13,0.5);
color:var(--silver);
text-align:center;
cursor:pointer;
}
.bld-mode-ico{ display:flex; gap:2px; color:var(--red-glow); height:30px; align-items:center; }
.bld-mode-ico svg{ width:28px; height:28px; }
.bld-mode b{ font-size:12px; }
.bld-mode small{ font-size:10px; line-height:1.3; color:var(--muted); }
.bld-mode.active{
border-color:var(--red);
background:rgba(123,44,255,0.18);
box-shadow:0 0 0 1px var(--red) inset, 0 0 16px rgba(168,85,247,0.25);
}

.bld-budget{
display:flex;
align-items:center;
gap:10px;
height:54px;
padding:0 14px;
border-radius:14px;
border:1px solid var(--red-dim);
background:rgba(8,7,13,0.55);
color:var(--muted);
}
.bld-budget:focus-within{ border-color:var(--red); }
.bld-budget input{
flex:1;
min-width:0;
border:none;
background:none;
outline:none;
color:var(--silver);
font-family:'JetBrains Mono', monospace;
font-size:20px;
font-weight:600;
}
.bld-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.bld-chips button{
flex:1 0 auto;
padding:9px 10px;
border-radius:10px;
border:1px solid var(--red-dim);
background:transparent;
color:var(--silver);
font-size:12px;
cursor:pointer;
}
.bld-chips button.active{ border-color:var(--red); background:rgba(123,44,255,0.2); }
.bld-prefs{ margin-top:0; display:grid; grid-template-columns:1fr 1fr; }
.bld-sheet .bld-title{ font-size:17px; line-height:1.25; }
.bld-alt-title.empty{ font-size:12px; font-weight:400; color:var(--muted); }

.bld-colors{ display:grid; grid-template-columns:repeat(6, 1fr); gap:4px; }
.bld-colors button{
display:flex;
flex-direction:column;
align-items:center;
gap:5px;
padding:6px 0;
border-radius:12px;
border:1px solid transparent;
background:none;
color:var(--muted);
font-size:10px;
cursor:pointer;
}
.bld-colors i{ width:34px; height:34px; border-radius:50%; box-shadow:inset 0 -6px 10px rgba(0,0,0,0.35); }
.bld-colors button.active{ border-color:var(--red); background:rgba(123,44,255,0.15); color:var(--silver); }

.bld-go{
width:100%;
margin-top:18px;
padding:15px;
border:none;
border-radius:14px;
background:var(--cta-gradient);
color:#fff;
font-family:'JetBrains Mono', monospace;
font-size:14px;
font-weight:800;
letter-spacing:0.06em;
text-transform:uppercase;
cursor:pointer;
box-shadow:0 8px 24px rgba(255,43,214,0.25);
}
.bld-go:disabled{ opacity:0.6; }

/* результат */
.bld-summary{
display:grid;
grid-template-columns:repeat(3, 1fr);
border-radius:14px;
border:1px solid var(--red-dim);
background:rgba(8,7,13,0.55);
}
.bld-summary div{ display:flex; flex-direction:column; gap:4px; padding:10px 8px; text-align:center; }
.bld-summary div + div{ border-left:1px solid var(--red-dim); }
.bld-summary span{ font-size:10px; color:var(--muted); }
.bld-summary b{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--silver); white-space:nowrap; }
.bld-summary b.green{ color:#4ade80; }
.bld-summary b.gold{ color:#f5c542; }

.bld-items{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.bld-item{
position:relative;
display:flex;
flex-direction:column;
padding:8px;
border-radius:14px;
border:1px solid var(--red-dim);
background:rgba(8,7,13,0.55);
cursor:pointer;
}
.bld-item.active{ border-color:var(--red); box-shadow:0 0 0 1px var(--red) inset; }
.bld-item-photo{ position:relative; aspect-ratio:4 / 3; display:flex; align-items:center; justify-content:center; }
.bld-item-photo img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 12px rgba(0,0,0,0.45)); }
.bld-item-photo .inv-badge svg{ width:11px; height:11px; vertical-align:-1px; }
.bld-item-photo .skin-fav{ z-index:3; }
.bld-item-title{ margin-top:6px; font-size:13px; font-weight:700; color:var(--silver); line-height:1.25; }
.bld-item-float{ margin-top:3px; font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted); }
.bld-item-price{ margin-top:6px; font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:700; color:#f5c542; }
.bld-more{
margin-top:8px;
padding:8px;
border-radius:9px;
border:1px solid var(--red-dim);
background:transparent;
color:var(--silver);
font-size:11px;
cursor:pointer;
}

.bld-alt-title{ margin:16px 0 8px; font-size:14px; font-weight:600; color:var(--silver); }
.bld-alts{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.bld-alts:empty{ display:none; }
.bld-alt{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:3px;
padding:6px;
border-radius:12px;
border:1px solid var(--red-dim);
background:rgba(8,7,13,0.55);
color:var(--silver);
text-align:left;
cursor:pointer;
min-width:0;
}
.bld-alt img{ width:100%; aspect-ratio:4 / 3; object-fit:contain; }
.bld-alt-name{ font-size:10px; line-height:1.2; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bld-alt-diff{ font-family:'JetBrains Mono', monospace; font-size:10px; }
.bld-alt-diff.up{ color:#c084fc; }
.bld-alt-diff.down{ color:#f87171; }

.bld-actions{ display:grid; grid-template-columns:1fr 1.4fr; gap:10px; margin-top:16px; }
.bld-actions .bld-go{ margin-top:0; font-size:12px; padding:14px 8px; }
.bld-again{
padding:14px 8px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.3);
background:transparent;
color:var(--silver);
font-size:13px;
font-weight:600;
cursor:pointer;
}

/* ---------- KYC: номер через Telegram и фото документов ---------- */
.kyc-phone-ok{
margin-top:6px;
padding:10px 12px;
border-radius:4px;
border:1px solid rgba(34,197,94,0.45);
background:rgba(34,197,94,0.08);
color:var(--text);
font-size:14px;
}
.kyc-photos{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.kyc-photo{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
aspect-ratio:4 / 3;
border:1px dashed var(--red);
border-radius:8px;
background:rgba(255,255,255,0.03);
overflow:hidden;
cursor:pointer;
text-align:center;
padding:8px;
}
.kyc-photo img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.kyc-photo.has-photo{ border-style:solid; }
.kyc-photo.has-photo .kyc-photo-icon,
.kyc-photo.has-photo .kyc-photo-text{ display:none; }
.kyc-photo-icon{ font-size:26px; }
.kyc-photo-text{ font-size:12px; color:var(--muted); line-height:1.3; }

/* ---------- Админка: заявки продавцов ---------- */
.kyc-card{ flex-direction:column; align-items:stretch; gap:8px; }
.kyc-fields{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 10px; font-size:13px; }
.kyc-fields dt{ color:var(--muted); }
.kyc-fields dd{ margin:0; word-break:break-word; }
.kyc-checks{ white-space:pre-line; font-size:12px; color:var(--muted); background:rgba(255,255,255,0.03); border-radius:6px; padding:8px; }
.kyc-shots{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.kyc-shots figure{ margin:0; }
.kyc-shots img{ width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:6px; border:1px solid var(--red-dim); background:rgba(255,255,255,0.03); cursor:zoom-in; display:block; }
.kyc-shots figcaption{ font-size:11px; color:var(--muted); margin-top:3px; }
.kyc-recent{ font-size:12px; color:var(--muted); margin-top:10px; line-height:1.7; }
.kyc-lightbox{ position:fixed; inset:0; z-index:20000; background:rgba(0,0,0,0.92); display:flex; align-items:center; justify-content:center; padding:12px; }
.kyc-lightbox[hidden]{ display:none; }
.kyc-lightbox img{ max-width:100%; max-height:100%; object-fit:contain; }

/* ---------- Вход через Steam ---------- */
.steam-verify{ margin:12px 0 4px; }
.steam-verified{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.35); }
.steam-verified img{ width:36px; height:36px; border-radius:8px; }
.steam-verified-name{ font-weight:700; font-size:14px; }
.steam-verified-note{ font-size:12px; color:var(--muted); }
.deal-partner-steam{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin-top:4px; }
.deal-partner-steam img{ width:18px; height:18px; border-radius:4px; }

/* ---------- Подтверждение покупателя ---------- */
.bv-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.bv-row .bv-label{ flex:1; font-size:14px; }
.bv-row .steam-link-btn{ width:auto; padding:8px 12px; font-size:13px; }

/* ---------- Отчёт за период ---------- */
.report-period{ margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.06); }
.report-period input[type="date"]{ color-scheme:dark; min-height:42px; }
.report-presets{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 10px; }

/* Подсказка про Steam Trade Protection в инвентаре. */
.inv-protect-hint{
margin:0 0 10px;
padding:10px 12px;
border:1px solid var(--border, rgba(255,255,255,.08));
border-radius:12px;
background:rgba(255,255,255,.03);
}
.inv-protect-hint summary{ cursor:pointer; font-size:13px; color:var(--silver); }
.inv-protect-hint summary::before{ content:"ℹ️ "; }
.inv-protect-hint p{ margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--muted); }

/* Кнопка «Закрыть»/«Отмена» внизу листа видна всегда: длинный список
   (уведомления, история) прокручивается под ней, а не уводит её вниз. */
.edit-sheet > .edit-actions:last-child,
.edit-sheet > button[id$="CloseBtn"]:last-child,
.edit-sheet > button[id$="CancelBtn"]:last-child{
position:sticky;
bottom:-28px;
z-index:2;
background:var(--surface);
box-shadow:0 28px 0 var(--surface), 0 -14px 14px -2px var(--surface);
}

/* Счётчик «ждёт решения» на кнопке раздела админки */
.admin-chip-badge{
display:inline-block;
min-width:18px;
margin-left:6px;
padding:0 5px;
border-radius:9px;
background:var(--red);
color:#fff;
font-size:11px;
line-height:18px;
text-align:center;
font-weight:700;
}
.admin-chip-badge[hidden]{ display:none; }

/* «С баланса · 40 000 сум (доступно 50 000)» — остаток мельче */
#buyConfirmBalance{ flex-wrap:wrap; column-gap:6px; row-gap:2px; }
.pay-balance-left{ flex-basis:100%; text-align:center; font-weight:400; opacity:0.75; font-size:0.85em; }

/* Страница лота: продавец под названием и строка гарантии над кнопкой */
.seller-stats-top{ margin:8px 20px 0; font-size:12px; color:var(--muted); }
.seller-line.verified{ color:var(--silver); }
.buy-guarantee{ font-size:12px; line-height:1.35; color:var(--muted); text-align:center; margin:0 4px 8px; }

/* Сравнение с рынком у названия лота и пометка в «Моих лотах» */
.buy-market-badge{ display:inline-block; margin-top:8px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.buy-market-badge[hidden]{ display:none; }
.buy-market-badge.cheaper{ background:rgba(46,204,113,0.16); color:#4ade80; border:1px solid rgba(74,222,128,0.35); }
.buy-market-badge.pricier{ background:rgba(239,68,68,0.14); color:#f87171; border:1px solid rgba(248,113,113,0.35); font-weight:600; }
.lot-overpriced{ margin:6px 8px 8px; font-size:11px; line-height:1.3; color:#f87171; }

/* 3D: подпись «этот предмет: float, паттерн, наклейки» */
.viewer3d-exact{ font-size:11px; color:#4ade80; margin-top:2px; }
.viewer3d-exact[hidden]{ display:none; }

/* ---------- веб-версия (app-web.js) ---------- */
.dgw-guest-only, .dgw-in-only{ display:none !important; }
html.dg-web-guest .dgw-guest-only, html.dg-web-in .dgw-in-only{ display:flex !important; }
.dgw-gate, .dgw-modal{
position:fixed; inset:0; z-index:100000;
display:flex; align-items:center; justify-content:center;
padding:16px; background:rgba(0,0,0,.78); backdrop-filter:blur(6px);
}
.dgw-gate-box, .dgw-modal-box{
width:100%; max-width:380px; padding:24px 20px;
border-radius:20px; border:1px solid rgba(168,85,247,.35);
background:linear-gradient(180deg, #17101f, #0b0910);
color:#f2eefa; text-align:center; box-shadow:0 20px 60px rgba(123,44,255,.25);
}
.dgw-gate-logo{ width:72px; height:72px; border-radius:18px; object-fit:cover; margin-bottom:12px; }
.dgw-gate-title{ font-size:20px; font-weight:800; margin-bottom:8px; }
.dgw-gate-text{ font-size:14px; line-height:1.45; opacity:.85; margin-bottom:18px; }
.dgw-gate-widget{ min-height:48px; display:flex; justify-content:center; }
.dgw-gate-status{ min-height:18px; margin:8px 0; font-size:13px; color:#ff6b8a; }
.dgw-gate-note{ margin-top:12px; font-size:11px; opacity:.55; line-height:1.4; }
.dgw-modal-box{ text-align:left; }
.dgw-modal-title{ font-size:16px; font-weight:800; margin-bottom:8px; }
.dgw-modal-text{ font-size:14px; line-height:1.45; white-space:pre-line; margin-bottom:18px; }
.dgw-modal-btns{ display:flex; flex-direction:column; gap:8px; }
.dgw-btn{
width:100%; min-height:44px; border:0; border-radius:12px; cursor:pointer;
background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#fff;
font-size:14px; font-weight:700;
}
.dgw-btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,.18); color:#e6def5; font-weight:600; }
.dgw-btn-danger{ background:#c0264a; }

/* ---------- переключатель тем и вида карточек (профиль) ---------- */
.pf-theme .pf-lang-head + .theme-switch + .pf-lang-head{ margin-top:16px; }
.theme-switch{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.theme-btn{
display:flex; align-items:center; gap:6px; justify-content:center;
padding:9px 4px; border-radius:10px; border:1px solid var(--red-dim);
background:transparent; color:var(--muted);
font-family:'Inter',sans-serif; font-size:12px; font-weight:600; cursor:pointer;
}
.theme-btn.active{ border-color:var(--red); color:var(--silver); background:rgba(123,44,255,0.08); }
.theme-dot{ width:12px; height:12px; border-radius:50%; flex:none; border:1px solid rgba(255,255,255,0.35); }
.view-switch{ display:flex; gap:8px; margin-top:10px; }
.view-btn{
flex:1; padding:10px 4px; border-radius:10px; border:1px solid var(--red-dim);
background:transparent; color:var(--muted);
font-family:'Inter',sans-serif; font-size:12px; font-weight:600; cursor:pointer;
}
.view-btn.active{ border-color:var(--red); color:var(--silver); background:rgba(123,44,255,0.08); }

/* ---------- карточка «Витрина»: рамка и свечение по редкости ---------- */
.skin-card{ --rar-c:var(--red-dim); }
.skin-card.rarity-consumer{ --rar-c:#aec2d1; }
.skin-card.rarity-industrial{ --rar-c:#5f93c7; }
.skin-card.rarity-milspec{ --rar-c:#5a6fd6; }
.skin-card.rarity-restricted{ --rar-c:#8c5fd6; }
.skin-card.rarity-classified{ --rar-c:#c15bc9; }
.skin-card.rarity-covert{ --rar-c:#d85454; }
.skin-card.rarity-contraband, .skin-card.rarity-extraordinary{ --rar-c:#dbb84f; }
body.card-showcase .skin-card{
border-color:var(--rar-c);
border-top-width:1px;
background:linear-gradient(180deg, color-mix(in srgb, var(--rar-c) 24%, var(--surface)) 0%, var(--surface) 62%);
box-shadow:0 0 14px color-mix(in srgb, var(--rar-c) 45%, transparent), inset 0 0 18px color-mix(in srgb, var(--rar-c) 14%, transparent);
}
body.card-showcase .skin-card .skin-photo-wrap{
background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rar-c) 38%, transparent) 0%, transparent 70%);
}

/* ---------- шаблоны карточки лота: «Компакт» и «Крупная» ----------
   Класс layout-compact / layout-large ставится на body из app-catalog.js;
   без него каталог выглядит как раньше. Только переменные темы. */
.layout-bar{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:0 0 8px; }
.layout-label{ font-family:'Inter',sans-serif; font-size:11px; color:var(--muted); }
.layout-switch{ display:inline-flex; border:1px solid var(--red-dim); border-radius:10px; overflow:hidden; background:var(--surface); }
.layout-btn{
padding:6px 12px; border:0; background:transparent; color:var(--muted);
font-family:'Inter',sans-serif; font-size:12px; font-weight:600; cursor:pointer;
}
.layout-btn + .layout-btn{ border-left:1px solid var(--red-dim); }
.layout-btn.active{ background:var(--cta-gradient); color:#fff; }
.skin-float, .skin-stickers{ display:none; }
.skin-float{
font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted);
margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Компакт: плотная сетка, мелкое превью, название + износ/float + цена */
body.layout-compact #skinsList{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
body.layout-compact #skinsList .skin-card{ padding:5px; border-radius:9px; }
body.layout-compact #skinsList .skin-photo-wrap{ aspect-ratio:1 / 1; margin-bottom:4px; border-radius:6px; }
body.layout-compact #skinsList .skin-weapon-type,
body.layout-compact #skinsList .trader-badge,
body.layout-compact #skinsList .skin-cart-btn,
body.layout-compact #skinsList .skin-badge.stattrak{ display:none; }
body.layout-compact #skinsList .skin-badge{ font-size:8px; padding:1px 4px; top:3px; }
body.layout-compact #skinsList .skin-badge.wear{ left:3px; }
body.layout-compact #skinsList .skin-fav{ width:22px; height:22px; top:2px; right:2px; }
body.layout-compact #skinsList .skin-fav svg{ width:13px; height:13px; }
body.layout-compact #skinsList .skin-title{ font-size:11px; line-height:1.2; -webkit-line-clamp:1; }
body.layout-compact #skinsList .skin-float{ display:block; }
body.layout-compact #skinsList .skin-price{ font-size:11px; margin-top:3px; }
body.layout-compact #skinsList .skin-price span{ display:none; }
body.layout-compact #skinsList .skin-action-row{ margin-top:5px; }
body.layout-compact #skinsList .skin-action,
body.layout-compact #skinsList .skin-action-row .skin-action{ padding:8px 2px; min-height:32px; font-size:12px; line-height:1.2; margin-top:0; border-radius:7px; white-space:nowrap; }
body.layout-compact #skinsList .skin-action.own{ margin-top:5px; }

/* Крупная: одна колонка, большое превью, float и наклейки */
body.layout-large #skinsList{ grid-template-columns:1fr; gap:14px; }
body.layout-large #skinsList .skin-card{ padding:12px; border-radius:16px; }
body.layout-large #skinsList .skin-photo-wrap{ aspect-ratio:16 / 10; margin-bottom:10px; border-radius:12px; }
body.layout-large #skinsList .skin-badge{ font-size:11px; padding:3px 8px; top:8px; }
body.layout-large #skinsList .skin-badge.wear{ left:8px; }
body.layout-large #skinsList .skin-badge.wear ~ .skin-badge.stattrak{ top:36px; }
body.layout-large #skinsList .skin-fav{ width:38px; height:38px; top:8px; right:8px; }
body.layout-large #skinsList .skin-weapon-type{ font-size:11px; }
body.layout-large #skinsList .skin-title{ font-size:17px; margin-top:3px; }
body.layout-large #skinsList .skin-float{ display:block; font-size:12px; margin-top:4px; }
body.layout-large #skinsList .skin-stickers{ display:block; }
body.layout-large #skinsList .st-mini{ width:32px; height:24px; object-fit:contain; }
body.layout-large #skinsList .skin-price{ font-size:20px; margin-top:8px; }
body.layout-large #skinsList .skin-action-row .skin-action{ padding:13px 8px; font-size:13px; }

/* ---------- бейдж «Трейдер»: цена лота относительно рынка ---------- */
.trader-badge{
display:inline-block; align-self:flex-start; margin:2px 0 0;
padding:2px 7px; border-radius:6px; font-size:11px; font-weight:700; line-height:1.4;
}
.trader-badge.below{ background:rgba(34,160,90,0.18); color:#6fe0a0; border:1px solid rgba(34,160,90,0.45); }
.trader-badge.above{ background:rgba(230,150,40,0.16); color:#f5b860; border:1px solid rgba(230,150,40,0.4); }

/* ---------- подписка PRO (app-pro.js) ---------- */
.pro-card{ border:1px solid rgba(168,85,247,.45); background:linear-gradient(135deg, rgba(123,44,255,.18), rgba(255,43,214,.08)); }
.pro-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.pro-title{ font-weight:800; font-size:15px; }
.pro-badge{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:#16a34a; color:#fff; }
.pro-badge:empty{ display:none; }
.pro-features{ white-space:pre-line; font-size:13px; line-height:1.5; opacity:.9; margin-bottom:8px; }
.pro-status{ font-size:12px; opacity:.75; margin-bottom:10px; }
.pro-buy{ width:100%; justify-content:center; background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#fff; border:0; }
.save.pro-locked::after{ content:" 🔒 PRO"; font-size:11px; opacity:.85; }
.pro-channels{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(168,85,247,.3); }
.pro-channels-title{ font-weight:700; font-size:14px; margin-bottom:4px; }
.pro-channels-hint{ white-space:pre-line; font-size:12px; opacity:.75; line-height:1.45; margin-bottom:8px; }
.pro-channel-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; font-size:13px; border-bottom:1px solid rgba(255,255,255,.06); overflow-wrap:anywhere; }
.pro-channel-row button{ background:none; border:0; color:var(--muted); font-size:16px; padding:4px 8px; cursor:pointer; }
.pro-channels-empty{ font-size:12px; opacity:.6; padding:4px 0; }
.pro-channels-add{ display:flex; gap:8px; margin-top:8px; }
.pro-channels-add input{ flex:1; min-width:0; padding:10px 12px; border-radius:4px; border:1px solid var(--red-dim); background:rgba(255,255,255,0.03); color:var(--silver); font-size:14px; }
.pro-channels-add input:focus{ outline:none; border-color:var(--red); }
.pro-channels-add .pf-btn{ flex:none; }
/* «Гарант»: окно запуска аукциона/розыгрыша и список своих событий */
#proEventOverlay .edit-field select{ width:100%; padding:10px 12px; border-radius:4px; border:1px solid var(--red-dim); background:rgba(255,255,255,0.03); color:var(--silver); font-size:14px; }
#proEventOverlay .edit-field select:focus{ outline:none; border-color:var(--red); }
#proEventOverlay #proEventSubmit{ width:100%; margin-top:10px; }
.pro-events{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(168,85,247,.3); }
.pro-events .pro-channel-row small{ opacity:.7; font-size:12px; }
.pro-events .pro-channel-row button{ font-size:12px; border:1px solid var(--red-dim); border-radius:4px; color:var(--silver); flex:none; }
.pro-channels-status{ font-size:12px; margin-top:6px; min-height:1.2em; }
.share-own-channels{ display:contents; }
/* Тарифы PRO: карточки 2×2 и таблица сравнения */
.pro-plans-sheet{ max-height:92vh; overflow-y:auto; }
.pro-plans{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 16px; }
.pro-plan{ position:relative; display:flex; flex-direction:column; gap:2px; padding:14px 10px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); min-width:0; }
.pro-plan.popular{ border-color:rgba(168,85,247,.7); background:linear-gradient(160deg, rgba(123,44,255,.22), rgba(255,43,214,.08)); }
.pro-plan.current{ border-color:#16a34a; }
.pro-plan-flag{ position:absolute; top:-9px; left:10px; font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#fff; white-space:nowrap; }
.pro-plan-flag.current{ background:#16a34a; }
.pro-plan-name{ font-weight:800; font-size:15px; }
.pro-plan-price{ font-weight:800; font-size:17px; color:var(--silver); }
.pro-plan-per{ font-size:11px; opacity:.65; }
.pro-plan-tag{ font-size:12px; opacity:.85; line-height:1.35; margin:4px 0 8px; flex:1; }
.pro-plan-btn{ width:100%; justify-content:center; padding:8px 6px; font-size:13px; }
.pro-plan.popular .pro-plan-btn{ background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#fff; border:0; }
.pro-compare-title{ font-weight:700; font-size:14px; margin:4px 0 8px; }
.pro-compare-wrap{ overflow-x:auto; border:1px solid rgba(255,255,255,.08); border-radius:10px; }
.pro-compare{ width:100%; border-collapse:collapse; font-size:12px; }
.pro-compare th, .pro-compare td{ padding:8px 4px; text-align:center; border-bottom:1px solid rgba(255,255,255,.06); }
.pro-compare th{ font-size:11px; font-weight:700; }
.pro-compare td:first-child, .pro-compare th:first-child{ text-align:left; padding-left:10px; width:38%; }
.pro-compare .current{ background:rgba(22,163,74,.12); }
.pro-compare tr:last-child td{ border-bottom:0; }
.pro-compare tr.pro-cmp-total td{ font-weight:700; }
.pro-yes{ color:#22c55e; font-weight:800; }
.pro-compare-hint{ font-size:11px; opacity:.6; margin:-4px 0 6px; }
.pro-cmp-label{ background:none; border:0; padding:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.pro-cmp-i{ color:var(--accent); font-size:12px; margin-left:2px; }
.pro-cmp-label[aria-expanded="true"] .pro-cmp-i{ opacity:.5; }
.pro-compare tr.pro-cmp-help td{ text-align:left; padding:8px 10px 10px; font-size:12px; line-height:1.45; background:rgba(168,85,247,.08); color:var(--silver); }
.pro-how{ margin-top:14px; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px 12px; }
.pro-how summary{ font-weight:700; font-size:14px; cursor:pointer; }
.pro-how-text{ white-space:pre-line; font-size:12.5px; line-height:1.5; margin-top:8px; opacity:.9; }
.pro-no{ opacity:.4; }

.save.pro-cta{ background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#fff; }