/* KupiSell — фиолетовая тема, компактная сетка маркетплейса */
:root{
  --bg:#0a0713;
  --panel:#150f26;
  --panel-2:#1c1433;
  --line:#282043;
  --line-2:#3a2e60;
  --text:#f2eeff;
  --muted:#9d92c2;
  --dim:#7568a6;

  --violet:#8b5cff;
  --violet-2:#b14bff;
  --violet-soft:rgba(139,92,255,.14);
  --violet-line:rgba(139,92,255,.34);

  --star:#c9a6ff;
  --sale:#ff4d6d;
  --shadow:0 14px 36px rgba(6,2,20,.5);
  --shadow-sm:0 6px 18px rgba(6,2,20,.38);

  --r-lg:16px;
  --r:12px;
  --r-sm:9px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 560px at 8% -14%, rgba(139,92,255,.22), transparent 60%),
    radial-gradient(900px 480px at 96% -10%, rgba(177,75,255,.16), transparent 58%),
    var(--bg);
  color:var(--text);
  font:15.5px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1560px;margin:0 auto;padding:0 28px}
.muted{color:var(--muted)}
.small{font-size:12px}
.nowrap{white-space:nowrap}
.neg{color:var(--sale)}
.h1{font-size:26px;margin:10px 0 6px;letter-spacing:-.5px;font-weight:700}
.h3{font-size:15px;margin:14px 0 10px;font-weight:700}
.grad{background:linear-gradient(92deg,#a98bff,#c86bff 60%,#e0a3ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.05em}
code{background:#0f0a1d;border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:12px}

/* ---------- шапка ---------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(10,7,19,.9);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:14px;height:62px}
.logo{display:flex;align-items:center;gap:9px}
.logo__mark{width:32px;height:32px;filter:drop-shadow(0 4px 12px rgba(139,92,255,.5))}
.logo__text{font-size:20px;font-weight:800;letter-spacing:-.7px;line-height:1.4;padding-bottom:2px}
.logo__text span{background:linear-gradient(100deg,#a98bff,#d46bff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.logo--sm .logo__text{font-size:18px}

.search{position:relative;flex:1;display:flex;max-width:560px}
.search__input{flex:1;height:38px;border-radius:var(--r) 0 0 var(--r);border:1px solid var(--line);border-right:0;
  background:rgba(255,255,255,.04);color:var(--text);padding:0 14px;font-size:13.5px;outline:none}
.search__input::placeholder{color:var(--dim)}
.search__input:focus{border-color:var(--violet)}
.search__btn{height:38px;padding:0 18px;border:0;border-radius:0 var(--r) var(--r) 0;cursor:pointer;
  font-weight:600;font-size:13.5px;background:linear-gradient(120deg,var(--violet),var(--violet-2));color:#fff;transition:none}
.search__btn:active{transform:translateY(1px)}
.search__drop{position:absolute;top:44px;left:0;right:0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;z-index:60}
.sg{display:flex;gap:10px;align-items:center;padding:9px 13px;border-bottom:1px solid var(--line);font-size:13px}
.sg:last-child{border-bottom:0}
.sg:hover{background:var(--panel-2)}
.sg img{width:32px;height:24px;border-radius:6px;object-fit:cover;flex:none}
.sg__ph{width:32px;height:24px;border-radius:6px;background:var(--panel-2);flex:none}
.sg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg i{margin-left:auto;font-style:normal;color:var(--muted);font-size:11.5px}
.sg b{margin-left:auto;color:var(--star);white-space:nowrap}
.sg--empty{color:var(--muted);justify-content:center}

.hdr__right{display:flex;align-items:center;gap:8px;margin-left:auto}
.online{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 13px;
  background:var(--violet-soft);border:1px solid var(--violet-line);color:#d9c9ff;border-radius:999px;
  font-size:12.5px;line-height:1;white-space:nowrap}
.online b{font-weight:700;line-height:1}
.online__lbl{line-height:1}
.online__dot{width:7px;height:7px;border-radius:50%;background:#a98bff;flex:none;
  box-shadow:0 0 0 0 rgba(169,139,255,.5);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(169,139,255,0)}100%{box-shadow:0 0 0 0 rgba(169,139,255,0)}}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;
  border-radius:var(--r);border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text);
  cursor:pointer;font-size:13.5px;font-weight:600;transition:none;white-space:nowrap}
.btn:hover{border-color:var(--line-2);color:var(--text);background:rgba(255,255,255,.04)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.btn--primary,.btn--primary:hover{background:linear-gradient(120deg,var(--violet),var(--violet-2));
  border-color:transparent;color:#fff}
.btn--ghost,.btn--ghost:hover{background:transparent}
.btn--google,.btn--google:hover{background:#fff;color:#241a3d;border-color:#fff}
.btn--danger,.btn--danger:hover{border-color:rgba(255,77,109,.45);color:#ff9fb0;background:rgba(255,77,109,.08)}
.btn--lg{height:46px;padding:0 24px;font-size:14.5px;border-radius:var(--r-lg)}
.btn--sm{height:28px;padding:0 10px;font-size:12px;border-radius:var(--r-sm)}
.btn--full{width:100%}
.ava{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--violet),var(--violet-2));color:#fff;font-weight:700;font-size:14px;flex:none}
.ava--xs{width:20px;height:20px;border-radius:6px;font-size:10.5px}
.ava--lg{width:70px;height:70px;border-radius:20px;font-size:28px}

/* ---------- переключатель темы ----------
   Иконка показывает, куда переключишься:
   в тёмной теме — солнце на белом кружке, в светлой — луна на чёрном. */
.themebtn{width:62px;height:32px;padding:0;border:1px solid var(--line-2);border-radius:999px;cursor:pointer;
  background:transparent;position:relative;flex:none;transition:none}
.themebtn:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.themebtn__track{position:absolute;inset:2px;border-radius:999px;overflow:hidden;display:block;
  background:linear-gradient(120deg,#0d0819,#1a1130)}
.themebtn__thumb{position:absolute;top:50%;left:3px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#fff;
  transform:translateY(-50%);
  transition:transform .4s cubic-bezier(.4,1.35,.5,1), background .3s ease}
.themebtn__ico{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  transition:transform .4s cubic-bezier(.4,1.35,.5,1), opacity .22s ease}
.themebtn__sun{fill:none;stroke:#f7a10a;stroke-width:2.1;stroke-linecap:round;opacity:1;transform:rotate(0) scale(1)}
.themebtn__sun circle{fill:#f7a10a;stroke:none}
.themebtn__rays{stroke:#f7a10a}
.themebtn__moon{fill:#ffd54a;stroke:none;opacity:0;transform:rotate(60deg) scale(.4)}

/* ---------- навигация по играм ---------- */
.gnav{border-top:1px solid var(--line);background:rgba(8,5,16,.7)}
.gnav__in{display:flex;gap:7px;padding:9px 20px;overflow-x:auto;scrollbar-width:thin}
.gnav__in::-webkit-scrollbar{height:5px}
.gnav__in::-webkit-scrollbar-thumb{background:#2c2350;border-radius:5px}
.chip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:12.5px;color:#c8bce8;transition:none}
.chip:hover{border-color:var(--line);color:#c8bce8}
.chip:active{transform:translateY(1px)}
.chip--on,.chip--on:hover{background:linear-gradient(120deg,var(--violet),var(--violet-2));
  border-color:transparent;color:#fff}
.chip i{font-style:normal;color:var(--muted);font-size:11.5px}
.chip__ico{width:18px;height:18px;border-radius:5px;object-fit:cover}

.page{padding:20px 20px 56px;min-height:60vh}
.crumbs{color:var(--muted);font-size:12.5px;margin-bottom:8px}
.crumbs a:hover{color:var(--text)}

/* ---------- герой ---------- */
.hero{margin:8px 0 26px}
.hero__main{position:relative;overflow:hidden;border-radius:20px;padding:38px 40px;
  background:linear-gradient(115deg,rgba(139,92,255,.28),rgba(177,75,255,.16) 55%,rgba(139,92,255,.06));
  border:1px solid var(--line-2)}
.hero__main:before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-230px;border-radius:50%;
  background:radial-gradient(circle,rgba(177,75,255,.38),transparent 65%);pointer-events:none}
.hero h1{font-size:38px;line-height:1.08;margin:0 0 14px;letter-spacing:-1.3px;max-width:900px;position:relative}
.hero p{color:#c6bce6;max-width:720px;font-size:14.5px;position:relative;margin:0}
.hero__note{margin:14px 0 0;position:relative;font-size:13.5px;line-height:1.45;color:#d8cef2;
  max-width:760px}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 22px;position:relative}
.hero__stats{display:flex;gap:44px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);
  padding-top:18px;position:relative}
.hero__stats b{display:block;font-size:22px;letter-spacing:-.6px}
.hero__stats span{color:var(--muted);font-size:12px}

/* ---------- секции ---------- */
.sec{margin:28px 0}
.sec__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sec__head h2{font-size:18px;margin:0;letter-spacing:-.4px}
.link{color:var(--star);font-size:12.5px}
.link:hover{color:#e2ccff}

/* иконки игр и приложений */
.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:18px 10px}
.icons--big{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:22px 12px}
.icon{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;padding:2px}
.icon__img{width:92px;height:92px;border-radius:24px;overflow:hidden;background:var(--panel-2);
  border:1px solid var(--line);display:block;transition:none}
.icons--big .icon__img{width:108px;height:108px;border-radius:28px}
.icon__img img{width:100%;height:100%;object-fit:cover}
.icon__img--fit{background:radial-gradient(circle at 50% 45%,#241a44,#120c22)}
.icon__img--fit img{object-fit:contain;padding:16px}
.icon:hover .icon__img{border-color:var(--violet-line)}
.icon b{font-size:13px;font-weight:600;line-height:1.25;max-width:124px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.icon small{font-size:11.5px;color:var(--muted)}

/* карточки товаров */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:none}
.card:hover{border-color:var(--violet-line)}
.card__cover{position:relative;aspect-ratio:16/9;overflow:hidden;display:flex;align-items:center;
  justify-content:center;background:#100a1e}
.card__img{width:100%;height:100%;object-fit:cover}
.card__img--game{object-fit:cover;opacity:.92}
.card__emoji{font-size:38px}
.badge{position:absolute;top:8px;left:8px;font-size:10.5px;padding:3px 7px;border-radius:999px;
  background:linear-gradient(120deg,var(--violet),var(--violet-2));color:#fff;font-weight:600}
.badge--sale{left:auto;right:8px;background:var(--sale)}
.card__body{padding:10px 11px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.card__price{font-size:15.5px;font-weight:800;display:flex;gap:7px;align-items:baseline;letter-spacing:-.3px}
.card__price s{font-size:11.5px;color:var(--dim);font-weight:500}
.card__title{font-size:12.5px;color:#cdc4e8;line-height:1.32;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__meta{font-size:11px;color:var(--muted)}
.card__seller{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#ab9fd0;
  border-top:1px solid var(--line);padding-top:8px}
.rate{margin-left:auto;color:var(--star)}
.rate i{color:var(--dim);font-style:normal}
.empty{padding:32px;text-align:center;color:var(--muted);background:rgba(255,255,255,.02);
  border:1px dashed var(--line-2);border-radius:var(--r-lg);font-size:13px}

/* ---------- страница игры ---------- */
.gamehead{display:flex;align-items:center;gap:16px;border-radius:var(--r-lg);padding:16px 18px;margin:8px 0 16px;
  background:linear-gradient(115deg,rgba(139,92,255,.16),rgba(21,15,38,.9));border:1px solid var(--line-2)}
.gamehead__img{width:96px;height:64px;border-radius:var(--r);overflow:hidden;flex:none;background:#100a1e}
.gamehead__img img{width:100%;height:100%;object-fit:cover}
.gamehead .h1{font-size:22px;margin:0 0 4px}
.gamehead p{margin:0;font-size:13px}
.gamehead .btn{margin-left:auto}
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.sortbar{display:flex;gap:12px;align-items:center;font-size:12.5px;margin-bottom:12px;flex-wrap:wrap}
.sort{color:var(--muted);border-bottom:1px dashed transparent;padding-bottom:2px}
.sort--on{color:var(--text);border-color:var(--violet)}

/* ---------- лот ---------- */
.lot{display:grid;grid-template-columns:1.75fr .85fr;gap:20px;align-items:start}
.lot__cover{aspect-ratio:16/9;max-height:300px;border-radius:var(--r-lg);overflow:hidden;display:flex;
  align-items:center;justify-content:center;position:relative;border:1px solid var(--line);font-size:56px;background:#100a1e}
.lot__cover img{width:100%;height:100%;object-fit:cover}
.lot__tags{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 14px}
.tag{font-size:11.5px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:#bfb3e0}
.tag--warn{border-color:var(--violet-line);color:#d9c9ff}
.prose{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;
  color:#c5bbe4;white-space:pre-wrap;font-size:13.5px}
.buybox,.sellerbox,.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;margin-bottom:14px}
.buybox{border-color:var(--line-2)}
.buybox__price{font-size:26px;font-weight:800;display:flex;gap:9px;align-items:baseline;margin-bottom:6px;letter-spacing:-.7px}
.buybox__price s{font-size:13px;color:var(--dim);font-weight:500}
.buybox .btn{margin:12px 0 6px}
.ticks{list-style:none;padding:0;margin:10px 0 0;color:#bfb3e0;font-size:12.5px}
.ticks li{padding-left:20px;position:relative;margin-bottom:7px}
.ticks li:before{content:"✓";position:absolute;left:0;color:#a98bff}
.sellerbox__top{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.strong{font-weight:700}
.sellerbox__stats,.profhead__stats{display:flex;gap:18px;margin-bottom:12px;flex-wrap:wrap}
.sellerbox__stats b,.profhead__stats b{display:block;font-size:17px}
.sellerbox__stats span,.profhead__stats span{font-size:11px;color:var(--muted)}

/* ---------- отзывы ---------- */
.reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.review{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.review__top{display:flex;gap:8px;align-items:center;margin-bottom:7px;font-size:12.5px;flex-wrap:wrap}
.stars{color:var(--star);letter-spacing:1px}
.review p{margin:0 0 6px;color:#c5bbe4;font-size:13px}

/* ---------- профиль и админка ---------- */
.profhead{display:flex;gap:18px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px;margin:8px 0}
.profhead__info{flex:1;min-width:200px}
.profhead .h1{font-size:22px}
.adminhead{display:flex;align-items:center;gap:14px;margin:8px 0;flex-wrap:wrap}
.live{display:flex;align-items:center;gap:8px;color:#d9c9ff;background:var(--violet-soft);
  border:1px solid var(--violet-line);border-radius:999px;padding:7px 13px;font-size:12.5px}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px;margin:14px 0}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.kpi span{color:var(--muted);font-size:12px}
.kpi b{display:block;font-size:24px;margin:4px 0 2px;letter-spacing:-.6px}
.kpi i{font-style:normal;color:var(--dim);font-size:11px}
.bigmoney{font-size:32px;font-weight:800;margin:4px 0 14px;letter-spacing:-1px}

.tbl{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl th{text-align:left;padding:10px;background:var(--panel-2);color:var(--muted);font-weight:600;font-size:11.5px}
.tbl td{padding:9px 10px;border-top:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:rgba(255,255,255,.025)}
.tcell{display:flex;gap:9px;align-items:center}
.thumb{width:40px;height:40px;border-radius:9px;object-fit:cover;background:var(--panel-2);flex:none;
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--line)}
.row--off{opacity:.45}
.secret{max-width:230px;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.status{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:#c3b7e4}
.status--active{color:#e2d4ff;border-color:var(--violet-line);background:var(--violet-soft)}
.status--banned,.status--deleted{color:#ff9fb0;border-color:rgba(255,77,109,.35);background:rgba(255,77,109,.08)}
.tbl select{background:#120c22;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:4px 6px;font-size:12px}

/* графики */
.chart{display:flex;align-items:flex-end;gap:5px;height:170px;padding-top:8px}
.chart--sm{gap:2px}
.chart__col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:5px}
.chart__bar{width:100%;border-radius:5px 5px 0 0;min-height:2px;
  background:linear-gradient(180deg,var(--violet),rgba(139,92,255,.2))}
.chart__bar--alt{background:linear-gradient(180deg,var(--violet-2),rgba(177,75,255,.18))}
.chart__col span{font-size:9px;color:var(--dim)}

/* ---------- формы ---------- */
.fld{display:block;margin-bottom:11px}
.auth .fld{margin-bottom:14px}
.auth .fld input{height:44px;font-size:14px}
.hint{margin:-6px 0 12px;line-height:1.4}
.hint code{font-size:11.5px}
.fld span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.fld input,.fld select,.fld textarea,.searchbar input{width:100%;background:#120c22;border:1px solid var(--line);
  border-radius:var(--r);color:var(--text);padding:10px 12px;font:inherit;font-size:13.5px;outline:none}
.fld input[type=file]{padding:8px 10px;color:var(--muted);font-size:12.5px}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--violet)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:#c5bbe4;margin:8px 0 14px;
  line-height:1.35;cursor:pointer}
.check a{color:var(--star)}
.check input[type=checkbox]{appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line-2);background:transparent;
  cursor:pointer;position:relative;top:1px;transition:background .15s ease, border-color .15s ease}
.check input[type=checkbox]:checked{background:linear-gradient(135deg,var(--violet),var(--violet-2));
  border-color:transparent}
.check input[type=checkbox]:checked:after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:9px;
  border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.check input[type=checkbox]:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.formerr{margin-top:9px;color:#ff9fb0;font-size:12.5px}
.searchbar{display:flex;gap:9px;margin:14px 0;max-width:500px}
.uppreview{display:flex;gap:10px;align-items:center;margin-bottom:11px}
.uppreview img{width:86px;height:60px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}

/* ---------- авторизация ---------- */
.authwrap{display:flex;justify-content:center;align-items:center;padding:12px 0}
body.auth-page{height:100vh;overflow:hidden}
body.auth-page .gnav,body.auth-page .ftr{display:none}
body.auth-page .page{padding:0 20px;min-height:0;display:flex;align-items:center;justify-content:center;
  height:calc(100vh - 63px);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
body.auth-page .page::-webkit-scrollbar{display:none}
body.auth-page .authwrap{width:100%;padding:0}
.auth{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);border-radius:22px;
  padding:30px 30px 28px;box-shadow:var(--shadow);margin:auto}
.auth__head{margin-bottom:18px}
.auth__head h1{font-size:26px;margin:0 0 6px;letter-spacing:-.6px}
.auth__head p{margin:0;font-size:13px}
.auth--admin{max-width:440px;margin:0 auto}
.auth__badge{display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-2);border-radius:999px;padding:4px 10px;margin-bottom:10px}
.authfoot{margin:12px 0 0;text-align:center;font-size:12.5px}
.or{display:flex;align-items:center;gap:11px;color:var(--dim);font-size:12px;margin:13px 0}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}
.alert{background:var(--violet-soft);border:1px solid var(--violet-line);border-radius:var(--r);
  padding:11px 13px;font-size:12.5px;margin:10px 0}
.alert--err{background:rgba(255,77,109,.1);border-color:rgba(255,77,109,.38);color:#ffc6d0}

/* ---------- документы ---------- */
.doc{max-width:860px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:28px}
.doc h1{font-size:25px;margin-top:0;letter-spacing:-.6px}
.doc h2{font-size:17px;margin:24px 0 8px}
.doc h3{font-size:15px;margin:16px 0 6px}
.doc p,.doc ol,.doc ul{color:#c2b7e2;font-size:13.5px}
.doc a{color:var(--star)}

.center404{text-align:center;padding:64px 0}
.big404{font-size:70px;font-weight:800;letter-spacing:-2px;
  background:linear-gradient(100deg,var(--violet),var(--violet-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- преимущества ---------- */
.why{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.why__item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.why__item b{display:block;margin:0 0 6px;font-size:14px}
.why__item p{color:var(--muted);font-size:12.5px;margin:0}

/* ---------- подвал ---------- */
.ftr{border-top:1px solid var(--line);background:rgba(8,5,16,.8);margin-top:36px}
.ftr__in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;padding:30px 20px}
.ftr__col h4{margin:0 0 10px;font-size:13px}
.ftr__col p{font-size:12.5px;margin:0 0 8px}
.ftr__col a{display:block;color:var(--muted);font-size:12.5px;margin-bottom:7px}
.ftr__col a:hover{color:var(--text)}

/* ---------- тосты и модалки ---------- */
.toast{position:fixed;right:18px;bottom:18px;z-index:90;background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:var(--r);padding:13px 16px;box-shadow:var(--shadow);max-width:340px;font-size:13px}
.toast--err{border-color:rgba(255,77,109,.5)}
.toast--ok{border-color:var(--violet-line)}
.modal{position:fixed;inset:0;background:rgba(5,2,14,.76);display:flex;align-items:center;justify-content:center;
  z-index:95;padding:18px;backdrop-filter:blur(4px)}
.modal__box{background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:22px;width:100%;
  max-width:420px;box-shadow:var(--shadow)}
.rating{display:flex;gap:6px;font-size:28px;color:#3d3163;cursor:pointer;margin:4px 0 12px}
.rating span.on{color:var(--star)}

/* ================= СВЕТЛАЯ ТЕМА ================= */
[data-theme="light"]{
  --bg:#f7f5fd;
  --panel:#ffffff;
  --panel-2:#f3effc;
  --line:#e7e0f7;
  --line-2:#d6cbf1;
  --text:#1c1235;
  --muted:#6b6090;
  --dim:#8c81ad;
  --violet:#7b3fff;
  --violet-2:#a533ff;
  --violet-soft:rgba(123,63,255,.1);
  --violet-line:rgba(123,63,255,.28);
  --star:#7b3fff;
  --shadow:0 12px 30px rgba(60,35,120,.12);
  --shadow-sm:0 6px 16px rgba(60,35,120,.1);
}
[data-theme="light"] body{
  background:
    radial-gradient(1000px 520px at 8% -14%, rgba(123,63,255,.14), transparent 60%),
    radial-gradient(820px 460px at 96% -10%, rgba(165,51,255,.1), transparent 58%),
    var(--bg);
}
[data-theme="light"] .hdr{background:rgba(255,255,255,.92)}
[data-theme="light"] .gnav{background:rgba(255,255,255,.7)}
[data-theme="light"] .ftr{background:rgba(255,255,255,.8)}
[data-theme="light"] .chip,[data-theme="light"] .chip:hover{background:#fff;color:#463a70}
[data-theme="light"] .chip--on,[data-theme="light"] .chip--on:hover{
  background:linear-gradient(120deg,var(--violet),var(--violet-2));border-color:transparent;color:#fff}
[data-theme="light"] .btn,[data-theme="light"] .btn:hover{background:#fff;color:var(--text);border-color:var(--line-2)}
[data-theme="light"] .btn--primary,[data-theme="light"] .btn--primary:hover{
  background:linear-gradient(120deg,var(--violet),var(--violet-2));border-color:transparent;color:#fff}
[data-theme="light"] .btn--ghost,[data-theme="light"] .btn--ghost:hover{background:#fff}
[data-theme="light"] .btn--google,[data-theme="light"] .btn--google:hover{background:#fff;color:#241a3d;border-color:var(--line-2)}
[data-theme="light"] .btn--danger,[data-theme="light"] .btn--danger:hover{
  background:#fff;color:#d61f45;border-color:rgba(214,31,69,.35)}
[data-theme="light"] .search__input{background:#fff;color:var(--text)}
[data-theme="light"] .fld input,[data-theme="light"] .fld select,[data-theme="light"] .fld textarea,
[data-theme="light"] .searchbar input,[data-theme="light"] .tbl select{background:#fff;color:var(--text)}
[data-theme="light"] .card__cover,[data-theme="light"] .gcard__img,
[data-theme="light"] .lot__cover,[data-theme="light"] .gamehead__img{background:#f0eafb}
[data-theme="light"] .gcard__img--fit{background:radial-gradient(circle at 50% 45%,#f8f5ff,#ece4fb)}
[data-theme="light"] .hero__main{
  background:linear-gradient(115deg,rgba(123,63,255,.18),rgba(165,51,255,.12) 55%,rgba(255,255,255,.55));
  border-color:var(--line-2)}
[data-theme="light"] .hero__main:before{background:radial-gradient(circle,rgba(165,51,255,.2),transparent 65%)}
[data-theme="light"] .hero p{color:#4a3f70}
[data-theme="light"] .hero__note{color:#463a70}
[data-theme="light"] .hero__stats{border-top-color:var(--line-2)}
[data-theme="light"] .card__title,[data-theme="light"] .review p,[data-theme="light"] .prose,
[data-theme="light"] .doc p,[data-theme="light"] .doc ol,[data-theme="light"] .doc ul,
[data-theme="light"] .ticks,[data-theme="light"] .tag,[data-theme="light"] .check{color:#463a70}
[data-theme="light"] .card__seller{color:#5c5085}
[data-theme="light"] .online{color:#5c2fb8}
[data-theme="light"] .online__dot{background:var(--violet)}
[data-theme="light"] .live{color:#5c2fb8}
[data-theme="light"] .link,[data-theme="light"] .doc a,[data-theme="light"] .check a,
[data-theme="light"] .sg b{color:#6d2fe0}
[data-theme="light"] .authside{background:linear-gradient(150deg,rgba(123,63,255,.14),rgba(165,51,255,.08))}
[data-theme="light"] .authside__foot{border-top-color:var(--line-2)}
[data-theme="light"] .modal{background:rgba(30,18,60,.5)}
[data-theme="light"] .empty{background:rgba(123,63,255,.04)}
[data-theme="light"] code{background:#f3effc;color:#463a70}
[data-theme="light"] .rating{color:#d8cef2}
[data-theme="light"] .toast{background:#fff}
[data-theme="light"] .grad{background:linear-gradient(92deg,#7b3fff,#a533ff 60%,#c46bff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="light"] .logo__text span{background:linear-gradient(100deg,#7b3fff,#a533ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="light"] .tbl tr:hover td{background:rgba(123,63,255,.04)}
[data-theme="light"] .status{color:#5c5085}
/* светлая тема: кружок уезжает вправо, он чёрный, на нём жёлтая луна */
[data-theme="light"] .themebtn{border-color:var(--line-2)}
[data-theme="light"] .themebtn__track{background:linear-gradient(120deg,#efe9fd,#e2d7fb)}
[data-theme="light"] .themebtn__thumb{transform:translateY(-50%) translateX(28px);background:#14101f}
[data-theme="light"] .themebtn__sun{opacity:0;transform:rotate(-60deg) scale(.4)}
[data-theme="light"] .themebtn__moon{opacity:1;transform:rotate(0) scale(1)}

@media (max-width:1000px){
  .lot,.cards2,.ftr__in{grid-template-columns:1fr}
  .hide-sm{display:none}
  .hero__main{padding:26px 20px}
  .hero h1{font-size:27px;letter-spacing:-.8px}
  .hero__stats{gap:24px}
}
@media (max-width:640px){
  .hdr__in{height:auto;padding-block:10px;flex-wrap:wrap;gap:10px}
  .search{order:3;max-width:none;flex-basis:100%}
  .h1{font-size:21px}
  .hero h1{font-size:23px}
  .tbl{display:block;overflow-x:auto}
  .gamehead{flex-wrap:wrap}
  .gamehead .btn{margin-left:0;width:100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}


/* ================= кабинет, чат, коды ================= */
.btn--tg,.btn--tg:hover{background:#229ed9;border-color:#229ed9;color:#fff}
.badge--count{position:static;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;font-size:10.5px;font-style:normal;background:var(--sale);border-radius:999px;color:#fff}
.codeinput{letter-spacing:6px;font-size:18px !important;text-align:center;font-weight:700}
.codehint{margin:0 0 12px;font-size:13px}
.rowgap{margin-top:10px}
.doclist{margin:0 0 16px;padding-left:20px;color:#c2b7e2;font-size:13px;line-height:1.6}

.cab{background:linear-gradient(150deg,rgba(139,92,255,.14),var(--panel));border:1px solid var(--line-2);
  border-radius:20px;padding:16px;margin:8px 0 4px}
.cab__wallet{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;margin-bottom:14px}
.cab__wallet-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--violet),var(--violet-2));color:#fff;font-weight:800}
.cab__wallet b{font-size:19px}
.cab__wallet small{color:var(--muted);font-size:12px}
.cab__arrow{margin-left:auto;color:var(--muted);font-size:20px}
.cab__head{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cab__info{flex:1;min-width:200px}
.cab__info h1{margin:0 0 4px;font-size:22px;letter-spacing:-.4px}
.cab__rating{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:3px}
.cab__counts{display:flex;gap:20px}
.cab__counts b{display:block;font-size:19px}
.cab__counts span{font-size:11.5px;color:var(--muted)}

.blank{padding:34px 20px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-lg);
  background:rgba(255,255,255,.02)}
.blank__emoji{font-size:38px;display:block;margin-bottom:10px}
.blank b{display:block;font-size:16px;margin-bottom:4px}
.blank p{margin:0 0 14px;font-size:13px}

.pays{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pay{font-size:11.5px;padding:6px 11px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line);
  color:#c2b7e2}
.loginways{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.loginway{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;border-radius:var(--r);
  background:var(--panel-2);border:1px solid var(--line);font-size:13px}
.okmark{color:#8ce0b0}

.chatwrap{display:flex;justify-content:center}
.chatlayout{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}
.chatlist{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  max-height:70vh;overflow-y:auto}
.chatrow{display:flex;gap:10px;align-items:center;padding:11px 12px;border-bottom:1px solid var(--line)}
.chatrow:last-child{border-bottom:0}
.chatrow:hover{background:var(--panel-2)}
.chatrow--on{background:var(--violet-soft)}
.chatrow__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chatrow__body b{font-size:13.5px}
.chatrow__body span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatrow__side{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.chat{flex:1;width:100%;max-width:760px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);display:flex;flex-direction:column;overflow:hidden;min-height:60vh}
.chat__head{display:flex;gap:11px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line)}
.chat__online{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12px;color:#c9b9f5}
.ava--sm{width:36px;height:36px;border-radius:11px;font-size:13px}
.chat__body{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:56vh}
.msg{max-width:74%;align-self:flex-start}
.msg__body{background:var(--panel-2);border:1px solid var(--line);padding:10px 13px;border-radius:14px 14px 14px 4px;
  font-size:13.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.msg__meta{font-size:11px;color:var(--dim);margin-top:4px}
.msg--mine{align-self:flex-end}
.msg--mine .msg__body{background:linear-gradient(120deg,var(--violet),var(--violet-2));border-color:transparent;
  color:#fff;border-radius:14px 14px 4px 14px}
.msg--mine .msg__meta{text-align:right}
.chat__form{display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--line)}
.chat__form input{flex:1;background:#120c22;border:1px solid var(--line);border-radius:var(--r);
  color:var(--text);padding:11px 13px;font:inherit;font-size:13.5px;outline:none}
.chat__form input:focus{border-color:var(--violet)}

[data-theme="light"] .cab{background:linear-gradient(150deg,rgba(123,63,255,.1),#fff)}
[data-theme="light"] .cab__wallet,[data-theme="light"] .pay,[data-theme="light"] .loginway,
[data-theme="light"] .msg__body{background:#f6f2ff}
[data-theme="light"] .chat__form input{background:#fff}
[data-theme="light"] .msg--mine .msg__body{background:linear-gradient(120deg,var(--violet),var(--violet-2))}
[data-theme="light"] .blank{background:rgba(123,63,255,.04)}

@media (max-width:900px){
  .chatlayout{grid-template-columns:1fr}
  .chatlist{max-height:none}
}


/* ---------- карточка товара в стиле маркетплейса ---------- */
.card__row{display:flex;align-items:center;gap:8px;justify-content:space-between}
.card__game{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#c2b7e2;min-width:0}
.card__game img{width:16px;height:16px;border-radius:5px;object-fit:cover;flex:none}
.card__cat{font-size:10.5px;padding:3px 8px;border-radius:999px;background:var(--violet-soft);
  border:1px solid var(--violet-line);color:#d9c9ff;white-space:nowrap}
.card__rate{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.card__rate b{color:var(--text);font-size:12px}
.card__rate i{font-style:normal}
.card__rate .stars{font-size:11px;letter-spacing:0}
.stars--off{color:var(--dim)}
.pricecut{font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px;background:var(--sale);color:#fff}
[data-theme="light"] .card__game,[data-theme="light"] .card__rate b{color:#463a70}
[data-theme="light"] .card__cat{color:#5c2fb8}


/* ---------- правки шапки, иконок и поиска ---------- */
.logo{align-items:center}
.logo__text{display:inline-flex;align-items:baseline;gap:1px;line-height:1.2;padding-bottom:0}
.logo__dom{font-style:normal;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:-.2px}
.hdr__in{align-items:center}

.search__btn:disabled{opacity:.5;cursor:not-allowed}
.search__btn:disabled:active{transform:none}
.search__btn{transition:none}
.search__btn:active{transform:none}

/* иконка игры в шапке раздела — тот же квадрат, что на главной */
.gamehead__ico{width:92px;height:92px;border-radius:24px;flex:none;overflow:hidden;
  background:var(--panel-2);border:1px solid var(--line);display:block}
.gamehead__ico img{width:100%;height:100%;object-fit:cover}
.gamehead{align-items:center;gap:18px}
.gamehead__img{display:none}

/* иконки в подсказках поиска — как в каталоге */
.sg img{width:34px;height:34px;border-radius:11px;object-fit:cover}
.sg__ph{width:34px;height:34px;border-radius:11px}


/* активная вкладка в светлой теме: заливка не должна теряться под общим правилом .chip */
[data-theme="light"] .chip--on,[data-theme="light"] .chip--on:hover{
  background:linear-gradient(120deg,var(--violet),var(--violet-2)) !important;
  border-color:transparent;color:#fff}
[data-theme="light"] .chip--on .chip__ico{filter:none}


/* ---------- аватары, кабинет, чаты, скроллбар ---------- */
.ava--img{overflow:hidden;padding:0;background:var(--panel-2)}
.ava--img img{width:100%;height:100%;object-fit:cover;display:block}
.ava--support{background:linear-gradient(135deg,var(--violet),var(--violet-2));font-size:12px}
.cab__ava{position:relative;cursor:pointer}
.cab__ava-edit{position:absolute;left:0;right:0;bottom:0;padding:3px 0;font-size:10px;text-align:center;
  background:rgba(10,7,19,.72);color:#fff;opacity:0;transition:opacity .15s ease}
.cab__ava:hover .cab__ava-edit{opacity:1}
.cab__stats{display:flex;gap:16px;margin-top:6px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.cab__stats b{color:var(--text);font-size:13.5px}

.pin{font-style:normal;font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:6px;
  padding:1px 5px;margin-left:6px;vertical-align:middle}
.chatrow--pin{background:var(--violet-soft)}
.chatrow--pin.chatrow--on{background:linear-gradient(120deg,rgba(139,92,255,.28),rgba(177,75,255,.16))}
.chatlist{max-height:none}
.chat{min-height:64vh;max-width:none}
.chat__body{max-height:60vh}
.authnote{margin:12px 0 0;text-align:center;line-height:1.45}
.hint{margin:-4px 0 12px}

/* поле и кнопка получают одинаковую подсветку фокуса */
.btn:focus-visible,.search__btn:focus-visible,.fld input:focus,.fld textarea:focus,.fld select:focus,
.chat__form input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,255,.25)}
.btn--primary:focus-visible{box-shadow:0 0 0 3px rgba(139,92,255,.45)}

/* аккуратная полоса прокрутки вместо системной */
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--violet),var(--violet-2));
  border-radius:999px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#a37bff,#c76bff)}
::-webkit-scrollbar-corner{background:transparent}

/* подвал: логотип и реквизиты аккуратнее */
.ftr__col .logo{margin-bottom:10px}
.ftr__col .logo__text{font-size:19px}
.ftr__col p{max-width:420px;line-height:1.55}
.ftr__col p+p{margin-top:6px}

[data-theme="light"] ::-webkit-scrollbar-thumb{border-color:#f7f5fd}
[data-theme="light"] .cab__ava-edit{background:rgba(28,18,53,.72)}


/* ---------- крупные карточки: по 4 в ряд ---------- */
.card{border-radius:18px}
.card__body{padding:12px 13px 14px;gap:7px}
.card__title{font-size:14px;line-height:1.35}
.card__price{font-size:19px}
.card__price s{font-size:12.5px}
.card__game{font-size:12.5px}
.card__game img{width:20px;height:20px;border-radius:6px}
.card__cat{font-size:11px;padding:4px 9px}
.card__rate{font-size:12px}
.card__rate .stars{font-size:12px}

.serverbar{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.fld--inline{display:flex;align-items:center;gap:9px;margin:0}
.fld--inline span{margin:0;white-space:nowrap}
.fld--inline select{min-width:230px;max-width:320px}

@media (max-width:1080px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .grid{grid-template-columns:1fr} }


/* ================= масштаб интерфейса ================= */
.page{padding:26px 28px 70px}
.h1{font-size:30px}
.h3{font-size:17px}
.hdr__in{height:70px;gap:18px}
.logo__text{font-size:23px}
.logo__mark{width:36px;height:36px}
.search{max-width:640px}
.search__input{height:44px;font-size:15px;padding:0 18px}
.search__btn{height:44px;font-size:15px;padding:0 22px}
.btn{height:42px;font-size:14.5px;padding:0 18px}
.btn--lg{height:50px;font-size:16px;padding:0 28px}
.btn--sm{height:32px;font-size:13px;padding:0 12px}
.chip{font-size:14px;padding:8px 15px}
.chip__ico{width:22px;height:22px;border-radius:7px}
.hero__main{padding:48px 52px;border-radius:24px}
.hero h1{font-size:46px}
.hero p{font-size:16px;max-width:900px}
.hero__note{font-size:15px;max-width:900px}
.hero__stats b{font-size:26px}
.hero__stats span{font-size:13px}
.sec__head h2{font-size:21px}
.icons{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:22px 12px}
.icon__img{width:104px;height:104px;border-radius:28px}
.icons--big .icon__img{width:120px;height:120px;border-radius:32px}
.icon b{font-size:14px;max-width:140px}
.grid{gap:20px}
.card__cover{aspect-ratio:16/10}
.card__body{padding:14px 15px 16px}
.card__title{font-size:14.5px}
.card__price{font-size:20px}
.card__server{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gamehead{padding:20px 24px}
.gamehead .h1{font-size:26px}
.gamehead p{font-size:14px}
.tbl{font-size:13.5px}
.tbl th{font-size:12.5px;padding:12px}
.tbl td{padding:11px 12px}
.panel,.buybox,.sellerbox{padding:20px;border-radius:18px}
.cab{padding:20px}
.cab__info h1{font-size:26px}
.cab__wallet b{font-size:21px}
.fld input,.fld select,.fld textarea{padding:12px 14px;font-size:14.5px}
.blank{padding:44px 24px}
.blank__emoji{font-size:44px}
.reviews{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

/* ---------- поиск: поле и кнопка подсвечиваются вместе ---------- */


/* ---------- панель выбора сервера ---------- */
.serverbar{align-items:center}
.fld--inline span{font-size:13px;color:var(--muted)}
.fld--inline select{min-width:240px;max-width:280px;height:40px;padding:0 12px;font-size:14px}
select{max-height:240px}

/* ---------- загрузка фото ---------- */
.uploader{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.uploader__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:96px;height:96px;border:1px dashed var(--line-2);border-radius:14px;cursor:pointer;
  color:var(--muted);font-size:11.5px;text-align:center;background:rgba(255,255,255,.02)}
.uploader__btn:hover{border-color:var(--violet);color:var(--text)}
.uploader__plus{font-size:24px;line-height:1;color:var(--violet)}
.uploader__list{display:flex;flex-wrap:wrap;gap:10px}
.uploader__item{position:relative;width:96px;height:96px;border-radius:14px;overflow:hidden;
  border:1px solid var(--line)}
.uploader__item img{width:100%;height:100%;object-fit:cover}
.uploader__del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;
  background:rgba(10,7,19,.78);color:#fff;font-size:15px;line-height:1;cursor:pointer}
.uploader__del:hover{background:var(--sale)}

/* ---------- галерея товара ---------- */
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs__item{width:76px;height:56px;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  padding:0;background:none;cursor:pointer}
.thumbs__item--on{border-color:var(--violet)}
.thumbs__item img{width:100%;height:100%;object-fit:cover}
.tag--srv{border-color:var(--violet-line);color:#d9c9ff}

.counter{font-style:normal;float:right;color:var(--dim);font-size:11.5px}
.sg__srv{font-style:normal;color:var(--muted);font-size:11.5px;margin-left:6px}

@media (max-width:1200px){ .hero__main{padding:34px 26px} .hero h1{font-size:34px} }


/* ================= галочка, общий чат, доводка ================= */
.vcheck{width:15px;height:15px;vertical-align:-2px;margin-left:5px;fill:#3ea6ff;flex:none}
.card__seller .vcheck{width:13px;height:13px;margin-left:3px}
.h1 .vcheck,.cab__info h1 .vcheck{width:20px;height:20px;vertical-align:-3px}

/* документы во всю ширину */
.doc{max-width:none}
.doc p,.doc ol,.doc ul{max-width:1100px}

/* цена в таблице не переносится */
.tbl td.nowrap,.tbl .nowrap{white-space:nowrap}

/* окно входа по размеру регистрации */
.auth{min-height:auto}
.authwrap .auth{width:440px;max-width:100%}

/* кнопка отправки в чате поддержки — одной высоты с полем */
.chat__form{align-items:center}
.chat__form input{height:44px}
.chat__form .btn{height:44px}




/* ---------- свой выпадающий список ---------- */
.dd{position:relative;display:inline-block;min-width:260px}
.dd__native{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.dd__btn{display:flex;align-items:center;gap:10px;width:100%;height:44px;padding:0 14px;cursor:pointer;
  background:#120c22;border:1px solid var(--line);border-radius:var(--r);color:var(--text);
  font:inherit;font-size:14.5px;text-align:left}
.dd__btn span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd__btn:hover{border-color:var(--line-2)}
.dd__arrow{font-style:normal;color:var(--muted)}
.dd__list{position:absolute;z-index:70;top:48px;left:0;right:0;background:var(--panel);
  border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.dd__search{padding:8px;border-bottom:1px solid var(--line)}
.dd__search input{width:100%;background:#120c22;border:1px solid var(--line);border-radius:9px;
  color:var(--text);padding:8px 10px;font:inherit;font-size:13.5px;outline:none}
.dd__search input:focus{border-color:var(--violet)}
.dd__list{max-height:calc(7 * 38px + 54px);overflow-y:auto}
.dd__item{display:block;width:100%;padding:0 14px;height:38px;line-height:38px;border:0;background:none;
  color:#cdc4e8;font:inherit;font-size:13.5px;text-align:left;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd__item:hover{background:var(--panel-2);color:#fff}
.dd__item--on{background:var(--violet-soft);color:#fff}
.dd__empty{padding:14px;text-align:center;color:var(--muted);font-size:13px}
[data-theme="light"] .dd__btn,[data-theme="light"] .dd__search input{background:#fff}
[data-theme="light"] .dd__item{color:#463a70}

/* ---------- доводка оформления ---------- */
.sec__head{align-items:center}
.sec__head h2{position:relative;padding-left:14px}
.sec__head h2:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:20px;border-radius:4px;background:linear-gradient(180deg,var(--violet),var(--violet-2))}
.panel,.kpi,.card,.gcard,.review,.why__item{box-shadow:0 2px 14px rgba(6,2,20,.22)}
.card:hover{transform:translateY(-2px);transition:transform .15s ease}
.hero__main{box-shadow:0 24px 60px rgba(6,2,20,.45)}
.tbl{box-shadow:0 2px 14px rgba(6,2,20,.2)}
.tbl tr:last-child td{border-bottom:0}
.status--pending{color:#ffd8a8;border-color:rgba(255,182,72,.4);background:rgba(255,182,72,.1)}
[data-theme="light"] .panel,[data-theme="light"] .card,[data-theme="light"] .kpi,
[data-theme="light"] .gcard,[data-theme="light"] .review,[data-theme="light"] .tbl{box-shadow:0 2px 12px rgba(60,35,120,.07)}


/* ---------- поиск: рамка охватывает поле и кнопку ---------- */
.search{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#120c22}
.search__input{border:0;border-radius:0;background:transparent}
.search__input:focus{border:0;box-shadow:none}
.search__btn{border-radius:0}
.search:focus-within,.search--on{border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,255,.22)}
.search--on .search__input,.search--on .search__btn{box-shadow:none}
[data-theme="light"] .search{background:#fff}

/* ---------- подвал ---------- */
.ftr__in{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;padding:34px 28px;align-items:flex-start}
.ftr__brand{max-width:480px;display:flex;flex-direction:column;gap:8px}
.ftr__brand p{margin:0}
.ftr__nav{display:flex;gap:56px;flex-wrap:wrap}
.ftr__col h4{margin:0 0 10px;font-size:13.5px}
.ftr__col a{display:block;margin-bottom:8px;color:var(--muted);font-size:13.5px}
.ftr__col a:hover{color:var(--text)}
@media (max-width:720px){ .ftr__in{gap:26px} .ftr__nav{gap:32px} }


/* ---------- логотип в шапке ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;line-height:1}
.logo__mark{display:block;flex:none}
.logo__text{display:inline-flex;align-items:baseline;gap:1px;font-size:23px;font-weight:800;
  letter-spacing:-.7px;line-height:1.25;padding:2px 0 4px;overflow:visible}
.logo__text span{display:inline;padding:0;line-height:inherit}
.logo__dom{font-style:normal;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:-.2px;line-height:1}
.logo--sm .logo__text{font-size:19px}
.logo--sm .logo__dom{font-size:11.5px}

/* ---------- заголовок героя: «без риска» с новой строки ---------- */
.hero h1 .grad{display:block}

/* ---------- шапка: ровное название проекта ---------- */


/* ---------- поиск: подсветка при наведении ---------- */
.search{transition:border-color .15s ease, box-shadow .15s ease}

.search__btn:not(:disabled):hover{filter:brightness(1.08)}
/* наведение не должно мешать нажатию */
.search:hover,.search:active{pointer-events:auto}
.search__input,.search__btn{position:relative;z-index:1}

/* ---------- поиск: подсветка только при наведении ---------- */
.search:focus-within,.search--on{border-color:var(--line);box-shadow:none}
.search:hover{border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,255,.22)}
[data-theme="light"] .search:focus-within,[data-theme="light"] .search--on{border-color:var(--line)}

/* ---------- кнопка входа через Google ---------- */
.btn--google{background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600}
.btn--google:hover{background:#f5f6f8}
[data-theme="dark"] .btn--google{background:#fff;color:#1f1f1f}

/* ---------- логотип: ровно по центру в шапке и подвале ---------- */


/* ---------- поиск: нажатие не подсвечивает, только наведение ---------- */
.search:focus-within,.search--on{border-color:var(--line);box-shadow:none}
.search--on .search__input,.search--on .search__btn,
.search:focus-within .search__input,.search:focus-within .search__btn{border-color:transparent;box-shadow:none}
.search:hover{border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,255,.22)}

/* ---------- название проекта: одна базовая линия, ничего не режется ---------- */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo__text{display:inline-flex;align-items:baseline;gap:2px;
  line-height:1.35;padding:0;transform:none;overflow:visible;white-space:nowrap}
.logo__text>span{display:inline;line-height:inherit;padding:0 1px 0 0;overflow:visible}
.logo__dom{align-self:baseline;line-height:inherit;transform:none;top:0;position:static}
.ftr__brand .logo{display:inline-flex;justify-content:flex-start;margin:0 0 4px}
.ftr__brand .logo__text{line-height:1.35}

/* ---------- название: без разрывов между Kupi, Sell и .com ---------- */
.logo__text{display:inline-block;gap:0;white-space:nowrap;line-height:1.35;overflow:visible}
.logo__text>span{display:inline;padding:0;margin:0;letter-spacing:inherit}
.logo__dom{display:inline;margin-left:1px;letter-spacing:-.2px;vertical-align:baseline}

/* ---------- отступ между кнопками Google и Telegram ---------- */
.btn--google+.btn--tg{margin-top:10px}

/* ---------- название прижато к букве K логотипа ---------- */
.logo__text{position:relative;top:-1px}
.hdr .logo__text{top:-2px}

/* ---------- никаких сдвигов при нажатии на кнопки ---------- */
.btn:active,.btn--primary:active,.btn--tg:active,.btn--google:active,
.chip:active,.search__btn:active,button:active,a.btn:active{transform:none}
.btn,.chip,.search__btn{transition:background-color .12s ease,border-color .12s ease,color .12s ease}

/* ---------- хвостик буквы «y» не должен срезаться ---------- */
.logo{overflow:visible}
.logo__text{line-height:1.5;padding-bottom:3px;overflow:visible}
.logo__text>span{display:inline-block;padding-bottom:3px;overflow:visible;vertical-align:baseline}
.hdr__in,.hdr,.ftr__brand{overflow:visible}

/* ---------- финал: название на уровне K, хвост «y» не режется ---------- */
.logo__text{line-height:1.35;padding:0;position:relative;top:-2px;overflow:visible}
.logo__text>span{display:inline;padding:0 3px 0 0;margin:0;overflow:visible}
.ftr__brand .logo__text{top:-1px}

/* ---------- подсказка под полем формы ---------- */
.fld__hint{display:block;margin-top:5px;font-style:normal;font-size:12px;color:var(--muted);line-height:1.35}


/* =========================================================
   АДАПТИВ: телефоны, планшеты, ноутбуки, большие экраны и ТВ
   Блок идёт последним, поэтому перекрывает базовые размеры выше.
   ========================================================= */

/* ничто не должно выпирать за край экрана */
/* overflow-x:clip, а не hidden: hidden делает страницу прокручиваемым
   контейнером и ломает прилипающую шапку (position:sticky) — она уезжала
   вверх вместе со страницей. clip обрезает так же, но контейнер не создаёт. */
html,body{max-width:100%;overflow-x:clip}
img,video,svg,canvas{max-width:100%;height:auto}
.wrap,.page,.hero__main,.panel,.card,.tbl{min-width:0}
.hdr__in>*,.gnav__in>*,.hero__main>*{min-width:0}
*{-webkit-tap-highlight-color:transparent}

/* учитываем «чёлку» и скруглённые углы у современных телефонов */
.wrap{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
.ftr{padding-bottom:env(safe-area-inset-bottom)}

/* ---------- ноутбуки ---------- */
@media (max-width:1280px){
  .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .page{padding:22px 0 60px}
  .hero__main{padding:34px 28px}
  .hero h1{font-size:34px}
  .search{max-width:520px}
}

/* ---------- планшеты ---------- */
@media (max-width:1024px){
  .hdr__in{height:auto;min-height:62px;padding-block:10px;gap:12px;flex-wrap:wrap}
  .search{order:3;flex-basis:100%;max-width:none}
  .hdr__right{gap:6px}
  .logo__text{font-size:20px}
  .logo__mark{width:32px;height:32px}
  .page{padding:18px 0 54px}
  .h1{font-size:24px}
  .hero__main{padding:28px 22px;border-radius:18px}
  .hero h1{font-size:29px;letter-spacing:-.9px}
  .hero p{font-size:14.5px}
  .hero__stats{gap:22px}
  .hero__stats b{font-size:20px}
  .lot,.cards2,.chatlayout{grid-template-columns:1fr}
  .icons{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:16px 10px}
  .icon__img{width:84px;height:84px;border-radius:22px}
  .icons--big .icon__img{width:96px;height:96px;border-radius:26px}
  .kpis{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}

/* ---------- телефоны ---------- */
@media (max-width:768px){
  .wrap{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .page{padding:14px 0 48px}
  .hdr__in{gap:10px}
  .logo__text{font-size:19px}
  .logo__mark{width:30px;height:30px}
  .hdr__right{gap:6px;flex-wrap:nowrap}
  .online{height:30px;padding:0 10px;font-size:12px}
  .online__lbl{display:none}                 /* остаётся точка и число */
  .btn{height:40px;font-size:14px;padding:0 14px}
  .btn--lg{height:46px;font-size:15px;padding:0 20px}
  .search__input,.search__btn{height:42px}
  .search__input{font-size:16px}   /* меньше 16px — iOS приближает страницу при фокусе */
  .gnav__in{gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .gnav__in::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .h1{font-size:21px}
  .hero__main{padding:22px 16px;border-radius:16px}
  .hero h1{font-size:24px;letter-spacing:-.6px;line-height:1.15}
  .hero p{font-size:14px}
  .hero__note{font-size:13px}
  .hero__cta{margin:16px 0 18px}
  .hero__cta .btn{width:100%}
  .hero__stats{gap:14px 20px}
  .hero__stats>div{min-width:calc(50% - 20px)}
  .hero__stats b{font-size:18px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .icons{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:14px 8px}
  .icon__img{width:72px;height:72px;border-radius:20px}
  .icons--big .icon__img{width:80px;height:80px;border-radius:22px}
  .icon b{font-size:12.5px;max-width:96px}
  .reviews{grid-template-columns:1fr}
  .sec__head{flex-wrap:wrap;gap:6px}
  .sec__head h2{font-size:18px}
  /* таблицы админки и кабинета листаются по горизонтали внутри себя */
  .tbl,.tblwrap{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi b{font-size:19px}
  .fld input,.fld select,.fld textarea{font-size:16px}  /* iOS не приближает поле при фокусе */
  .authwrap{padding:14px 0}
  .auth{padding:20px 16px;border-radius:16px}
  .ftr__in{flex-direction:column;gap:22px;padding:24px 0}
  .ftr__nav{gap:28px}
  .chat__form input{font-size:16px}
}

/* ---------- маленькие телефоны ---------- */
@media (max-width:420px){
  .logo__text{font-size:18px}
  .hdr__right .btn{padding:0 11px;font-size:13px}
  .hero h1{font-size:21px}
  .grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .icons{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero__stats>div{min-width:100%}
}

/* телефон в альбомной ориентации: экономим высоту */
@media (max-height:520px) and (orientation:landscape){
  .hero__main{padding:18px 16px}
  .hero h1{font-size:22px}
}

/* ---------- большие мониторы ---------- */
@media (min-width:1800px){
  .wrap{max-width:1720px}
  .hero h1{font-size:52px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}

/* ---------- телевизоры и очень большие экраны ---------- */
@media (min-width:2200px){
  html{font-size:18px}
  .wrap{max-width:2000px}
  .hero h1{font-size:60px}
  .btn{height:48px;font-size:16px}
  .chip{font-size:16px}
  .card__title{font-size:16px}
}

/* пульт/клавиатура: фокус всегда виден (нужно на ТВ-браузерах) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--violet);outline-offset:2px}

/* палец должен попадать по элементу: минимальная высота касания */
@media (pointer:coarse){
  .btn,.chip,.search__btn,.ava,.themebtn{min-height:40px}
  .ftr__col a{padding:3px 0}
  .card:hover{transform:none}   /* на тач-экранах ховер залипает */
  .search:hover{border-color:var(--line);box-shadow:none}
}

/* уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* печать страницы */
@media print{
  .hdr,.gnav,.ftr,.tabs,.btn{display:none}
  body{background:#fff;color:#000}
}

/* ---------- способы входа в кабинете ---------- */
.loginbtns{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.loginways{display:flex;flex-direction:column;gap:8px}

/* ---------- галочка «принимаю правила»: ровно по центру ---------- */
.check input[type=checkbox]{width:19px;height:19px;border-radius:6px;top:0;
  display:inline-flex;align-items:center;justify-content:center}
.check input[type=checkbox]:checked:after{content:"";position:absolute;
  left:50%;top:48%;width:5px;height:9px;margin:-6px 0 0 -3px;
  border:2px solid #fff;border-top:0;border-left:0;border-radius:1px;transform:rotate(43deg)}
.check{align-items:center}

/* ---------- кнопки входа: тот же отступ, что на регистрации ---------- */
.loginbtns{gap:8px;margin-top:10px}
.loginways{margin-bottom:10px}

/* ---------- Telegram ещё ближе к Google ---------- */
.loginbtns{gap:6px}
.btn--google+.btn--tg{margin-top:6px}

/* ---------- галочка верификации: ровно напротив ника в любом размере ---------- */
/* размер задан в em, поэтому значок сам подстраивается под шрифт заголовка,
   а смещение вниз рассчитано так, чтобы центр значка совпал с серединой букв */
.vcheck{width:.86em;height:.86em;vertical-align:-.09em;margin-left:.28em;fill:#3ea6ff;flex:none}
.h1 .vcheck,.cab__info h1 .vcheck,.card__seller .vcheck,.profhead .vcheck{
  width:.86em;height:.86em;vertical-align:-.09em;margin-left:.28em}
/* в строках-флексах (карточки, таблицы) выравниваем по центру строки */
.card__seller,.loginway b,.tbl td a{align-items:center}


/* =========================================================
   ДОВОДКА: язык, шапка, иконки, поиск, формы
   ========================================================= */

/* ---------- переключатель RU / EN ---------- */
.langsw{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.04);flex:none}
.langsw__b{border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:12px;font-weight:700;letter-spacing:.3px;padding:4px 9px;border-radius:999px;
  transition:background-color .12s ease,color .12s ease}
.langsw__b:hover{color:var(--text)}
.langsw__b--on{background:linear-gradient(120deg,var(--violet),var(--violet-2));color:#fff}
.langsw__b:active{transform:none}
[data-theme="light"] .langsw{background:rgba(123,63,255,.05)}

/* ---------- шапка без нижней навигации: страница начинается выше ---------- */
.hdr{border-bottom:1px solid var(--line)}
.page{padding-top:18px}

/* ---------- иконки каталога: одинаковый размер, без анимации ---------- */
.icon__img{transition:none;position:relative}
.icon__img img{width:100%;height:100%;object-fit:cover;display:block;transition:none;transform:none}
.icon:hover .icon__img{border-color:var(--line)}   /* обводки при наведении нет */
.icon:hover .icon__img img{transform:none;filter:none}
.icon__img--fit{background:var(--panel-2)}
.icon__img--fit img{object-fit:cover;padding:0}    /* Warframe больше не «утоплен» рамкой */

/* ---------- поиск: при нажатии ничего не подсвечивается ---------- */
.search__input:focus,.search__input:focus-visible,
.search__btn:focus,.search__btn:focus-visible{outline:none;box-shadow:none;border-color:transparent}
.search:focus-within,.search--on{border-color:var(--line);box-shadow:none}
.search:hover{border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,255,.22)}

/* ---------- кнопка добавления фото: только плюс ---------- */
.uploader__btn{width:96px;height:96px;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px dashed var(--line-2);border-radius:var(--r-lg);cursor:pointer;background:transparent;
  transition:border-color .12s ease}
.uploader__btn:hover{border-color:var(--violet)}
.uploader__plus{font-size:30px;line-height:1;color:var(--muted);font-weight:300}

/* ---------- мобильная шапка: всё в один ряд ---------- */
@media (max-width:768px){
  .hdr__in{flex-wrap:wrap;align-items:center;gap:8px;padding-block:8px}
  .logo{flex:0 0 auto}
  .hdr__right{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
  .search{order:3;flex:1 1 100%;max-width:none}
  .langsw{padding:2px}
  .langsw__b{font-size:11px;padding:3px 7px}
  .themebtn{transform:scale(.85);transform-origin:right center}
  .online{padding:0 8px;font-size:11.5px}
  .hdr__right .btn{height:34px;padding:0 10px;font-size:12.5px}
}
@media (max-width:400px){
  .hdr__right{gap:4px}
  .hdr__right .btn{height:32px;padding:0 8px;font-size:12px}
  .langsw__b{padding:3px 6px}
  .online{display:none}   /* на узких экранах уступает место кнопкам входа */
}

/* ---------- страницы входа и регистрации целиком помещаются в экран ---------- */
.authwrap{min-height:auto;display:flex;align-items:flex-start;justify-content:center;padding:24px 0 40px}
.auth{width:100%;max-width:420px}
@media (max-width:768px){
  body.auth-page{overflow-y:auto}
  .authwrap{padding:12px 0 28px;align-items:flex-start;min-height:auto}
  .auth{max-width:none;padding:18px 16px}
  .auth__head h1{font-size:22px;margin-bottom:2px}
  .form{gap:10px}
  .fld input{height:44px}
  .btn--lg{height:46px}
  .check{font-size:12px;margin:4px 0 10px}
  .or{margin:12px 0}
  .authfoot,.authnote{font-size:12px;margin-top:8px}
}

/* ---------- ничего не вылезает за экран телефона ---------- */
@media (max-width:768px){
  .hero__main,.panel,.auth,.card,.blank,.tbl{max-width:100%}
  .hero p,.hero__note,.ftr__brand p{overflow-wrap:anywhere}
  .icons{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
}


/* ---------- двухфакторная защита ---------- */
.twofa{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.twofa__ttl{display:inline-flex;align-items:center;gap:9px}
.twofa__ico{width:20px;height:20px;object-fit:contain;flex:none}
.btn--auth{background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600;margin-top:10px}
.btn--auth:hover{background:#f5f6f8}
.btn--auth .twofa__ico{width:18px;height:18px}
.twofa__setup{margin-top:12px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.twofa__qr{background:#fff;padding:10px;border-radius:var(--r);line-height:0;align-self:center}
.twofa__qr img{width:200px;height:200px;image-rendering:pixelated}
.twofa__key{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--panel-2);padding:3px 7px;border-radius:6px;user-select:all;word-break:break-all}
.twofa__row{display:flex;gap:8px;width:100%;flex-wrap:wrap}
.twofa__row .btn{flex:none}
.twofa__off{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.codeinput{flex:1;min-width:130px;height:42px;border-radius:var(--r);border:1px solid var(--line-2);
  background:var(--panel-2);color:var(--text);padding:0 14px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:19px;letter-spacing:5px;text-align:center}
.codeinput:focus{outline:none;border-color:var(--violet)}
[data-theme="light"] .codeinput{background:#fff}

/* ---------- главный блок ниже: товары видно сразу ---------- */
.hero{margin-bottom:18px}
.hero__main{padding:30px 34px}
.hero h1{font-size:36px;margin-bottom:8px}
.hero p{font-size:15px;margin:0 0 6px}
.hero__note{margin:0}
.hero__cta{margin:16px 0 14px}
.hero__stats{padding-top:14px}
@media (max-width:1280px){ .hero__main{padding:26px 24px} .hero h1{font-size:30px} }

/* ---------- телефон: компактнее и аккуратнее ---------- */
@media (max-width:768px){
  .wrap{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .hdr__in{padding-block:7px;gap:7px;justify-content:flex-start}
  .hdr__right{gap:5px;margin-left:auto}
  .logo__mark{width:28px;height:28px}
  .logo__text{font-size:18px}
  .page{padding:10px 0 36px}

  /* главный блок ниже — каталог виден сразу */
  .hero{margin-bottom:12px}
  .hero__main{padding:16px 14px;border-radius:14px}
  .hero h1{font-size:21px;line-height:1.12;margin-bottom:6px}
  .hero p{font-size:13px;line-height:1.4;margin-bottom:4px}
  .hero__note{font-size:12.5px}
  .hero__cta{margin:12px 0 10px}
  .hero__cta .btn{height:42px}
  .hero__stats{gap:10px 16px;padding-top:10px}
  .hero__stats>div{min-width:calc(50% - 16px)}
  .hero__stats b{font-size:17px}
  .hero__stats span{font-size:11.5px}

  /* каталог: три иконки в ряд, два ряда на шесть разделов */
  .icons{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
  .icon__img{width:100%;height:auto;aspect-ratio:1/1;border-radius:20px}
  .icons--big .icon__img{width:100%;height:auto}
  .icon b{font-size:13px;max-width:none}

  .sec{margin-bottom:16px}
  .sec__head{margin-bottom:10px}
  .blank{padding:22px 14px}
  .blank__emoji{font-size:34px;margin-bottom:6px}

  /* подвал целиком помещается в экран */
  .ftr__in{padding:20px 0;gap:18px}
  .ftr__brand{max-width:100%}
  .ftr__brand p{font-size:13px;line-height:1.45}
  .ftr__nav{gap:24px;width:100%}
  .ftr__col{min-width:0}

  /* вкладки кабинета листаются пальцем */
  .tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:10px 0;padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .tabs::-webkit-scrollbar{display:none}
  .tabs .chip{flex:0 0 auto;scroll-snap-align:start;font-size:13px;padding:7px 12px}

  /* публичный профиль */
  .profhead{flex-wrap:wrap;gap:10px}
  .profhead .ava{width:56px;height:56px}
  .profhead .h1{font-size:19px}
  .cab{grid-template-columns:1fr;gap:12px}
  .cab__info h1{font-size:20px}
  .panel{padding:14px}
}

/* ---------- кнопка добавления фото: по центру и крупнее ---------- */
.uploader{display:flex;flex-direction:column;align-items:center;gap:12px}
.uploader__btn{width:100%;max-width:320px;height:140px;display:flex;align-items:center;justify-content:center;
  border:2px dashed var(--line-2);border-radius:var(--r-lg);margin:0 auto}
.uploader__plus{font-size:54px;font-weight:200;line-height:1;color:var(--muted)}
.uploader__btn:hover .uploader__plus{color:var(--violet)}
.uploader__list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* ---------- светящиеся шары плавно плавают внутри главного блока ---------- */
.hero__main{position:relative;overflow:hidden;isolation:isolate}
.hero__main:before,.hero__main:after{content:"";position:absolute;border-radius:50%;
  pointer-events:none;z-index:0;filter:blur(6px);will-change:transform}
.hero__main:before{width:460px;height:460px;right:-120px;top:-200px;
  background:radial-gradient(circle,rgba(177,75,255,.42),transparent 66%);
  animation:orbA 26s ease-in-out infinite alternate}
.hero__main:after{width:340px;height:340px;left:-110px;bottom:-170px;
  background:radial-gradient(circle,rgba(110,90,255,.34),transparent 68%);
  animation:orbB 34s ease-in-out infinite alternate}
.hero__main>*{position:relative;z-index:1}

@keyframes orbA{
  0%  {transform:translate(0,0) scale(1)}
  33% {transform:translate(-70px,54px) scale(1.09)}
  66% {transform:translate(-26px,104px) scale(.96)}
  100%{transform:translate(-96px,26px) scale(1.05)}
}
@keyframes orbB{
  0%  {transform:translate(0,0) scale(1)}
  40% {transform:translate(84px,-56px) scale(1.12)}
  75% {transform:translate(34px,-104px) scale(.94)}
  100%{transform:translate(104px,-34px) scale(1.06)}
}
[data-theme="light"] .hero__main:before{background:radial-gradient(circle,rgba(165,51,255,.22),transparent 66%)}
[data-theme="light"] .hero__main:after{background:radial-gradient(circle,rgba(110,90,255,.18),transparent 68%)}
@media (max-width:768px){
  .hero__main:before{width:280px;height:280px;right:-90px;top:-130px}
  .hero__main:after{width:220px;height:220px;left:-80px;bottom:-110px}
}
/* при системной настройке «меньше движения» шары стоят на месте */
@media (prefers-reduced-motion:reduce){
  .hero__main:before,.hero__main:after{animation:none}
}


/* =========================================================
   ДОВОДКА: 2FA, чаты, профиль
   ========================================================= */

/* ---------- 2FA: аккуратная плашка и плавное раскрытие ---------- */
.twofa{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.twofa .loginway{padding:13px 14px}          /* плашка чуть выше */
.twofa__ttl{display:inline-flex;align-items:center;gap:9px;min-width:0}
.twofa__ico{width:20px;height:20px;object-fit:contain;flex:none}

/* кнопка не белеет целиком: подсвечивается мягко и только фоном */
.btn--auth{background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600;margin-top:12px}
.btn--auth:hover{background:#f1f3f6;border-color:#c8ccd2;color:#1f1f1f}
.btn--auth:active{background:#e9ecf1;color:#1f1f1f}
.btn--auth:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.btn--auth .twofa__ico{width:18px;height:18px}
[data-theme="dark"] .btn--auth,[data-theme="dark"] .btn--auth:hover{color:#1f1f1f}

/* раскрывающийся блок: высота анимируется, содержимое проявляется */
.twofa__box{height:0;overflow:hidden;transition:height .28s cubic-bezier(.4,0,.2,1)}
.twofa__inner{opacity:0;transform:translateY(-6px);transition:opacity .22s ease .04s,transform .22s ease .04s;
  display:flex;flex-direction:column;gap:12px;align-items:stretch;padding-top:14px}
.twofa__box--open .twofa__inner{opacity:1;transform:none}
.twofa__qr{background:#fff;padding:10px;border-radius:var(--r);line-height:0;align-self:center}
.twofa__qr img{width:200px;height:200px;display:block;image-rendering:pixelated}
.twofa__manual{margin:0}
.twofa__key{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--panel-2);padding:3px 7px;border-radius:6px;user-select:all;word-break:break-all}
.twofa__row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.twofa__row .btn{flex:none}
@media (prefers-reduced-motion:reduce){
  .twofa__box,.twofa__inner{transition:none}
}

/* ---------- список чатов: время внизу справа ---------- */
.chatrow__body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.chatrow__last{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatrow__meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:2px}
.chatrow__time{font-size:11.5px;white-space:nowrap}
.chatrow__side{display:none}

/* ---------- аватар поддержки: буква ровно по центру ---------- */
.ava{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1}
.ava--support{font-size:16px;font-weight:700;letter-spacing:0;padding:0}
.ava--sm.ava--support{font-size:15px}

/* ---------- длинное описание профиля переносится и не рвёт вёрстку ---------- */
.profabout,.cab__about,.profhead p,.seller__about{
  overflow-wrap:anywhere;word-break:break-word;hyphens:auto;line-height:1.5;max-width:100%}
.profhead{align-items:flex-start;flex-wrap:wrap;gap:14px}
.profhead__main{min-width:0;flex:1 1 320px}
.profhead__stats{flex:none;margin-left:auto}

/* подпись-подсказка справа от названия поля */
.fld>span{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.counter{font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap;font-weight:500}

/* ---------- админка: привязанные способы входа ---------- */
.links{white-space:nowrap}
.lnk{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:20px;padding:0 5px;
  margin-right:3px;border-radius:6px;border:1px solid var(--line-2);background:transparent;
  font-size:10.5px;font-weight:700;color:var(--dim);letter-spacing:.2px}
.lnk--on{color:#fff;border-color:transparent;background:linear-gradient(120deg,var(--violet),var(--violet-2))}

/* ---------- шапка публичного профиля: длинный текст не ломает вёрстку ---------- */
.profhead{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px}
.profhead__info{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:6px}
.profhead__info .h1{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.profhead__stats{display:flex;gap:26px;flex:none;margin-left:auto;align-items:flex-start}
.profhead__stats div{text-align:center}
.profabout{margin:4px 0 0;color:var(--muted);font-size:13.5px;line-height:1.55;
  overflow-wrap:anywhere;word-break:break-word;max-width:72ch}
@media (max-width:768px){
  .profhead{padding:14px;gap:12px}
  .profhead .ava--lg{width:56px;height:56px;border-radius:16px}
  .profhead__info{flex:1 1 100%}
  .profhead__stats{margin-left:0;width:100%;gap:0;justify-content:space-between;
    border-top:1px solid var(--line);padding-top:12px}
  .profhead__stats b{font-size:17px}
  .profhead__stats span{font-size:11px}
  .profabout{font-size:13px;max-width:100%}
}

/* ---------- 2FA: серая плашка под цвет логотипа Authenticator ---------- */
.twofa .loginway{background:#676666;border-color:#767575;color:#fff;padding:14px 15px}
.twofa .loginway b{color:#fff}
.twofa .loginway .muted{color:#e2e2e2}
.twofa .loginway .okmark{color:#c8f7c5}
[data-theme="light"] .twofa .loginway{background:#676666;border-color:#5c5b5b}

/* кнопка того же тона: логотип на своём фоне сливается с ней без рамок */
.btn--auth{background:#676666;color:#fff;border:1px solid #767575;font-weight:600;margin-top:12px;
  gap:10px;height:46px}
.btn--auth:hover{background:#727171;border-color:#828181;color:#fff}
.btn--auth:active{background:#5d5c5c;color:#fff}
[data-theme="dark"] .btn--auth,[data-theme="dark"] .btn--auth:hover,
[data-theme="light"] .btn--auth,[data-theme="light"] .btn--auth:hover{color:#fff}
.btn--auth .twofa__ico{width:26px;height:26px;border-radius:6px;object-fit:cover;
  /* картинка приходит с таким же серым фоном — края растворяются в кнопке */
  mix-blend-mode:normal}

/* ---------- 2FA встроена в общий список привязок ---------- */
.twofa{margin:0;padding:0;border:0}                 /* отдельной секции больше нет */
.loginbtns .twofa__box{width:100%}
/* строка состояния 2FA такая же, как у Google и Telegram */
.twofa .loginway,.loginways .loginway{background:var(--panel-2);border:1px solid var(--line);color:var(--text)}
.loginways .loginway b{color:var(--text)}

/* кнопка Authenticator: фон не меняется ни при наведении, ни при нажатии */
.btn--auth,.btn--auth:hover,.btn--auth:active,.btn--auth:focus,
.btn--auth[aria-expanded="true"]{background:#676666;border-color:#767575;color:#fff}
.btn--auth:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

/* ---------- кнопка Authenticator ровно того же размера, что Google и Telegram ---------- */
.loginbtns .btn--auth{height:42px;font-size:14.5px;padding:0 18px;gap:7px;margin-top:0;font-weight:600}
.loginbtns .btn--auth .twofa__ico{width:18px;height:18px;border-radius:4px}
/* блок с QR не должен прижиматься к кнопке */
.loginbtns .twofa__box .twofa__inner{padding-top:10px}

/* ---------- одинаковые промежутки между всеми кнопками привязок ---------- */
/* у пары Google→Telegram был лишний margin поверх flex-gap, отсюда разнобой */
.loginbtns{gap:12px}
.loginbtns .btn--google+.btn--tg{margin-top:0}
.loginbtns .btn+.btn{margin-top:0}
/* блок с QR примыкает к своей кнопке, а не отстоит на общий промежуток */
.loginbtns .twofa__box{margin-top:-12px}
.loginbtns .twofa__box .twofa__inner{padding-top:12px}


/* =========================================================
   Страница подтверждения входа
   ========================================================= */
.auth--2fa{max-width:440px}
.twofa__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin-bottom:20px}
.twofa__badge{width:60px;height:60px;border-radius:18px;background:#676666;border:1px solid #767575;
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;
  box-shadow:0 10px 26px rgba(6,2,20,.35)}
.twofa__badge img{border-radius:8px;display:block}
.twofa__head h1{margin:0;font-size:23px}
.twofa__head p{margin:0;font-size:13.5px;max-width:300px}

/* шесть клеток под цифры */
.otp{display:flex;align-items:center;justify-content:center;gap:9px;margin:6px 0 4px}
.otp__sep{width:10px;height:2px;border-radius:2px;background:var(--line-2);flex:none}
.otp__cell{width:46px;height:58px;text-align:center;font-size:24px;font-weight:700;
  font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--text);
  background:var(--panel-2);border:1.5px solid var(--line-2);border-radius:14px;padding:0;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;caret-color:var(--violet)}
.otp__cell:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,255,.2);transform:translateY(-1px)}
.otp__cell:not(:placeholder-shown){border-color:var(--violet-line)}
[data-theme="light"] .otp__cell{background:#fff}

/* неверный код — клетки коротко вздрагивают и краснеют */
.otp--bad .otp__cell{border-color:#ff6b6b;animation:otpShake .42s cubic-bezier(.36,.07,.19,.97)}
.otp--ok .otp__cell{border-color:#4ade80}
@keyframes otpShake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)}
  40%,60%{transform:translateX(6px)}
}

/* круговой таймер жизни кода */
.otp__timer{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;color:var(--muted);margin:10px 0 14px}
.otp__ring-bg{stroke:var(--line-2)}
.otp__ring{stroke:var(--violet);transition:stroke-dashoffset 1s linear,stroke .3s ease}
.otp__timer--soon{color:#ffb648}
.otp__timer--soon .otp__ring{stroke:#ffb648}

@media (max-width:420px){
  .otp{gap:6px}
  .otp__cell{width:40px;height:52px;font-size:21px;border-radius:12px}
  .otp__sep{width:6px}
}
@media (prefers-reduced-motion:reduce){
  .otp__cell,.otp__ring{transition:none}
  .otp--bad .otp__cell{animation:none}
}


/* =========================================================
   ФИНАЛЬНАЯ ДОВОДКА: шапка, поля страницы, плавность
   ========================================================= */

/* ---------- шапка закреплена сверху на всех экранах ---------- */
.hdr{position:-webkit-sticky;position:sticky;top:0;z-index:60;
  background:rgba(10,7,19,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
[data-theme="light"] .hdr{background:rgba(255,255,255,.92)}
/* прокрутка к якорю не должна прятать содержимое под шапкой */
html{scroll-padding-top:78px}

/* ---------- плавное переключение языка ---------- */
.langsw{position:relative;isolation:isolate}
.langsw__b{position:relative;z-index:1;background:transparent;
  transition:color .18s ease}
.langsw__b--on{background:transparent;color:#fff}
/* подложка едет за выбранной кнопкой, а не мигает */
.langsw:before{content:"";position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);
  border-radius:999px;background:linear-gradient(120deg,var(--violet),var(--violet-2));
  transition:transform .22s cubic-bezier(.4,0,.2,1)}
.langsw[data-lang="en"]:before{transform:translateX(100%)}


/* ---------- поля страницы: ничего не режется по краям ---------- */
@media (max-width:768px){
  .wrap{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}

  /* шапка: логотип у левого края, кнопки не вылезают за экран */
  .hdr__in{gap:6px;padding-block:7px;flex-wrap:wrap;align-items:center}
  .logo{gap:7px;flex:0 1 auto;min-width:0}
  .logo__text{font-size:17px}
  .logo__mark{width:26px;height:26px}
  .hdr__right{flex:0 0 auto;margin-left:auto;gap:5px;min-width:0;overflow:visible}
  .hdr__right .ava{width:30px;height:30px;border-radius:9px;flex:none}
  .hdr__right .btn{height:32px;padding:0 10px;font-size:12.5px}
  .themebtn{transform:scale(.8);transform-origin:center;margin:0 -4px}
  .langsw__b{font-size:10.5px;padding:3px 6px}
  .search{order:3;flex:1 1 100%;margin-top:1px}

  /* карточки и рамки чуть уже — края экрана остаются свободными */
  .blank,.panel,.auth,.hero__main,.tbl,.card,.loginway,.kpi,.review{
    max-width:100%;box-sizing:border-box}
  .blank{padding:20px 12px;margin-inline:2px}
  .sec,.hero{padding-inline:0}

  /* подвал прижат к центру с равными полями */
  .ftr__in{padding:20px 4px;gap:16px;text-align:left}
  .ftr__brand{max-width:100%;padding-inline:2px}
  .ftr__brand p{font-size:12.8px;line-height:1.5;margin:0;overflow-wrap:anywhere}
  .ftr__nav{gap:22px;padding-inline:2px}
}

@media (max-width:400px){
  .wrap{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .hdr__right .btn{height:30px;padding:0 8px;font-size:12px}
  .hdr__right .ava{width:28px;height:28px}
  .logo__text{font-size:16px}
  .blank{padding:18px 10px}
}

/* ---------- общая мягкость переходов в шапке ---------- */
.hdr .btn,.hdr .ava,.themebtn,.langsw{transition:background-color .18s ease,border-color .18s ease,
  color .18s ease,box-shadow .18s ease,transform .18s ease}
@media (prefers-reduced-motion:reduce){
  .langsw:before,.hdr .btn,.hdr .ava,.themebtn{transition:none}
}


/* =========================================================
   ДОВОДКА МОБИЛЬНОЙ ВЁРСТКИ
   ========================================================= */
@media (max-width:768px){
  /* ---------- шапка: правая группа сдвинута левее ---------- */
  .hdr__in{padding-right:2px}
  .hdr__right{margin-left:auto;margin-right:-2px;gap:5px}
  .online{margin-right:1px}

  /* название ровно по букве K на значке */
  .logo{align-items:center;gap:8px}
  .logo__mark{width:28px;height:28px;flex:none;display:block}
  .logo__text{font-size:17.5px;line-height:1;padding:0;position:relative;top:0;
    display:inline-flex;align-items:center}
  .logo__text span{line-height:1;padding:0 2px 0 0}

  /* ---------- заголовок на главной: строки стоят ровно ---------- */
  .hero h1{font-size:22px;line-height:1.18;letter-spacing:-.5px;margin:0 0 8px;
    text-wrap:balance;overflow-wrap:break-word}
  .hero h1 .grad{display:block;margin-top:1px}
  .hero p{font-size:13px;line-height:1.45}

  /* ---------- шапка раздела: значок как на компьютере ---------- */
  .gamehead{flex-wrap:nowrap;align-items:center;gap:12px;padding:12px 14px}
  .gamehead__ico{width:56px !important;height:56px !important;aspect-ratio:auto !important;
    border-radius:16px;flex:0 0 56px;overflow:hidden}
  .gamehead__ico img{width:100%;height:100%;object-fit:cover}
  .gamehead>div{min-width:0;flex:1}
  .gamehead .h1{font-size:19px;margin:0 0 2px}
  .gamehead p{font-size:12.5px}
  .gamehead .btn{flex:1 1 100%;width:100%;margin:8px 0 0}
}
@media (max-width:400px){
  .hdr__right{margin-right:-3px;gap:4px}
  .hero h1{font-size:20px}
  .gamehead__ico{width:50px !important;height:50px !important;flex:0 0 50px;border-radius:14px}
  .gamehead .h1{font-size:18px}
}


/* =========================================================
   ЛЕНТА, ШАПКА, КАРТОЧКИ — доводка
   ========================================================= */

/* ---------- лента: пять товаров в ряд ---------- */
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:1500px){ .grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:1200px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:980px){  .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:768px){  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} }
@media (max-width:360px){  .grid{gap:8px} }
/* карточки в ряду одной высоты */
.grid>.card{height:100%}
.card__body{flex:1;display:flex;flex-direction:column}
.card__title{font-size:13.5px;line-height:1.3}

/* ---------- переключатель языка размером со сменой темы ---------- */
.langsw{height:34px;padding:3px;box-sizing:border-box;align-items:center}
.langsw__b{height:26px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 10px;font-size:11.5px}
.langsw:before{top:3px;bottom:3px;left:3px;width:calc(50% - 3px)}
.themebtn{height:34px}

/* ---------- админка: привязка есть — зелёная, нет — красная ---------- */
.lnk{border:1px solid transparent}
.lnk--yes{color:#0f2c17;background:#4ade80;border-color:#3fce70}
.lnk--no{color:#3a0f14;background:#ff6b6b;border-color:#f05a5a}
[data-theme="light"] .lnk--yes{color:#0d2b16;background:#5fe093}
[data-theme="light"] .lnk--no{color:#3a0f14;background:#ff8080}

/* ---------- парные карточки кабинета одной высоты ---------- */
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.cards2>.panel{display:flex;flex-direction:column;min-width:0}
.cards2 .blank{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:190px}
@media (max-width:1000px){ .cards2{grid-template-columns:1fr} }

/* ---------- шапка: выравнивание ---------- */
.logo{align-items:center}
.logo__mark{margin-left:2px}                      /* значок чуть правее от края */
.logo__text{display:inline-flex;align-items:center;line-height:1;position:relative;top:0}

@media (max-width:768px){
  .hdr__in{padding-right:0}
  .hdr__right{margin-right:-4px;gap:5px}
  .logo{gap:8px}
  .logo__mark{margin-left:1px}
  .logo__text{font-size:17.5px}
  .langsw{height:30px;padding:2px}
  .langsw__b{height:24px;padding:0 8px;font-size:11px}
  .themebtn{height:30px;transform:none;margin:0}
  .hdr__right .ava{width:30px;height:30px}
  .online{height:30px}
}
@media (max-width:400px){
  .hdr__right{margin-right:-5px;gap:4px}
  .langsw__b{padding:0 6px;font-size:10.5px}
}

/* ---------- показатели на главной: ровная сетка ---------- */
.hero__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
  border-top:1px solid rgba(255,255,255,.1);padding-top:18px}
.hero__stats>div{min-width:0}
.hero__stats b{display:block;font-size:22px;letter-spacing:-.6px;line-height:1.1}
.hero__stats span{display:block;color:var(--muted);font-size:12px;line-height:1.3;margin-top:3px}
@media (max-width:900px){ .hero__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px} }
@media (max-width:768px){
  .hero__stats{gap:12px 14px;padding-top:12px}
  .hero__stats b{font-size:18px}
  .hero__stats span{font-size:11.5px}
}

/* ---------- показатели в шапке профиля: одинаковые колонки ---------- */
.profhead__stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(64px,auto);
  gap:0;align-items:start;margin-left:auto;flex:none}
.profhead__stats>div{text-align:center;padding:0 12px;min-width:0}
.profhead__stats b{display:block;font-size:19px;line-height:1.1;letter-spacing:-.4px}
.profhead__stats span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;white-space:nowrap}
@media (max-width:768px){
  .profhead__stats{width:100%;margin-left:0;grid-auto-flow:column;grid-auto-columns:1fr;
    border-top:1px solid var(--line);padding-top:12px}
  .profhead__stats>div{padding:0 4px}
  .profhead__stats b{font-size:17px}
  .profhead__stats span{font-size:10.5px}
}


/* =========================================================
   ФИНАЛ: шапка и показатели — единая раскладка
   Блок последний, поэтому перекрывает все предыдущие правила.
   ========================================================= */

/* ---------- показатели: значение и подпись строго друг под другом ---------- */
.hero__stats{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:flex-start;
  border-top:1px solid rgba(255,255,255,.1);padding-top:16px;margin-top:16px}
.hero__stats>div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:0 0 auto}
.hero__stats b{font-size:21px;line-height:1.05;letter-spacing:-.6px}
.hero__stats span{font-size:12px;line-height:1.25;color:var(--muted);white-space:nowrap}

@media (max-width:1100px){ .hero__stats{gap:12px 22px} }
@media (max-width:768px){
  /* на телефоне две ровные колонки: подписи не рвутся, столбцы одинаковые */
  .hero__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 12px;
    padding-top:12px;margin-top:12px}
  .hero__stats>div{align-items:flex-start}
  .hero__stats b{font-size:18px}
  .hero__stats span{font-size:11px;white-space:normal}
}

/* ---------- шапка: одна раскладка для всех экранов ---------- */
.hdr__in{display:flex;align-items:center;gap:14px;height:62px;flex-wrap:nowrap}
.logo{display:flex;align-items:center;gap:9px;flex:0 0 auto;margin:0}
.logo__mark{margin:0;flex:none}
.logo__text{display:inline-flex;align-items:center;line-height:1;padding:0;top:0;position:relative}
.hdr__right{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
.hdr__right>*{flex:none}
/* всё справа одной высоты и на одной линии */
.langsw,.themebtn,.online,.hdr__right .btn,.hdr__right .ava{height:34px;box-sizing:border-box}
.online{display:inline-flex;align-items:center}
.hdr__right .ava{width:34px}

@media (max-width:768px){
  .hdr__in{flex-wrap:wrap;height:auto;padding-block:8px;gap:8px}
  .logo{order:1;gap:8px}
  .logo__mark{width:28px;height:28px}
  .logo__text{font-size:17.5px}
  .hdr__right{order:2;margin-left:auto;margin-right:0;gap:6px}
  /* поиск строкой ниже, ровно по ширине карточек страницы */
  .search{order:3;flex:1 0 100%;width:100%;max-width:none;margin:0;height:38px}
  .search__input{height:36px;font-size:15px;padding:0 12px}
  .search__btn{height:36px;font-size:14px;padding:0 16px}
  /* правая группа: всё 30px и вплотную к краю */
  .langsw,.themebtn,.online,.hdr__right .btn,.hdr__right .ava{height:30px}
  .hdr__right .ava{width:30px;border-radius:9px}
  .langsw{padding:2px}
  .langsw__b{height:24px;padding:0 8px;font-size:11px}
  .langsw:before{top:2px;bottom:2px;left:2px;width:calc(50% - 2px)}
  .themebtn{width:52px}
  .online{padding:0 9px;font-size:11.5px}
  .hdr__right .btn{padding:0 11px;font-size:12.5px}
}
@media (max-width:400px){
  .hdr__in{gap:6px}
  .logo__text{font-size:16.5px}
  .hdr__right{gap:5px}
  .langsw__b{padding:0 6px;font-size:10.5px}
  .themebtn{width:46px}
  .hdr__right .btn{padding:0 9px;font-size:12px}
}

/* ---------- карточки на телефоне: ровная симметричная сетка ---------- */
@media (max-width:768px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid>.card{min-width:0}
  .card__body{padding:10px 11px 12px;gap:5px}
  .card__title{font-size:13px;line-height:1.28;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card__price{font-size:16px}
  .card__game,.card__server{font-size:11px}
  .card__cover{aspect-ratio:16/10}
  .sec__head h2{font-size:17px}
}

/* ---------- исправление: боковые поля шапки не должны пропадать ---------- */
.hdr__in{padding-top:0;padding-bottom:0}      /* горизонтальные поля берутся у .wrap */

@media (max-width:768px){
  .hdr__in{padding-top:8px;padding-bottom:8px}   /* боковые поля берутся у .wrap */
  /* на телефоне счётчик онлайна уступает место кнопкам — иначе строка не помещается */
  .hdr__right .online{display:none}
  .themebtn{width:46px;height:28px;padding:0;flex:none}
  .themebtn__thumb{width:20px;height:20px}
  .langsw{height:28px}
  .langsw__b{height:22px;padding:0 7px;font-size:10.5px}
  .hdr__right .btn{height:28px;padding:0 10px;font-size:12px}
  .hdr__right .ava{width:28px;height:28px;border-radius:9px}
  .hdr__right{gap:5px}
  .search{height:36px}
  .search__input{height:34px;font-size:15px}
  .search__btn{height:34px;font-size:13.5px;padding:0 14px}
}
@media (max-width:400px){
  .themebtn{width:42px}
  .langsw__b{padding:0 5px;font-size:10px}
  .hdr__right .btn{padding:0 8px;font-size:11.5px}
  .hdr__right{gap:4px}
}

/* правило про крупные цели касания не должно раздувать шапку */
@media (pointer:coarse){
  .hdr__right .btn,.hdr__right .ava,.hdr .themebtn,.hdr .langsw__b,.search__btn{min-height:0}
}

/* ---------- боковые поля шапки совпадают с полями страницы ---------- */
.hdr__in{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
@media (max-width:1280px){
  .hdr__in{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
}
@media (max-width:768px){
  .hdr__in{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
}

/* ---------- узкие телефоны: шапка помещается в одну строку ---------- */
@media (max-width:430px){
  .hdr__in{gap:6px}
  .logo{gap:7px}
  .logo__mark{width:26px;height:26px}
  .logo__text{font-size:16px}
  .hdr__right{gap:4px}
  .langsw{padding:2px}
  .langsw__b{padding:0 5px;font-size:10px}
  .themebtn{width:40px;height:26px}
  .themebtn__thumb{width:18px;height:18px}
  .langsw,.hdr__right .btn,.hdr__right .ava{height:26px}
  .hdr__right .btn{padding:0 7px;font-size:11.5px}
  .hdr__right .ava{width:26px;border-radius:8px}
}


/* =========================================================
   ФИНАЛ 2: карточки, шапка, орбы, форма товара, профиль
   ========================================================= */

/* ---------- карточка товара: только контур, без движения ---------- */
.card{transition:border-color .15s ease}
.card:hover,.card:focus-within{transform:none !important;border-color:var(--violet);box-shadow:none}
.card:hover .card__img{transform:none;filter:none}
.card__img{transition:none}

/* просмотры в левом нижнем углу карточки */
.card__body{position:relative}
.card__views{display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  font-size:11.5px;color:var(--dim);line-height:1}
.card__views svg{opacity:.85;flex:none}

/* ---------- телефон: шапка одной строкой, без поиска ---------- */
@media (max-width:768px){
  .hdr .search{display:none}
  .hdr__in{flex-wrap:nowrap;height:58px;padding-top:0;padding-bottom:0;gap:8px}
  .logo{flex:0 0 auto}
  .logo__mark{width:30px;height:30px}
  .logo__text{font-size:18px;display:inline-flex;align-items:center;line-height:1}
  .hdr__right{flex:0 0 auto;margin-left:auto;gap:6px}
  .langsw,.themebtn,.hdr__right .btn,.hdr__right .ava{height:30px}
  .themebtn{width:48px}
  .themebtn__thumb{width:20px;height:20px}
  .langsw{padding:2px}
  .langsw__b{height:26px;padding:0 8px;font-size:11px}
  .langsw:before{top:2px;bottom:2px;left:2px;width:calc(50% - 2px)}
  .hdr__right .ava{width:30px;border-radius:9px}
  .hdr__right .btn{padding:0 10px;font-size:12px}
}
@media (max-width:430px){
  .hdr__in{height:54px;gap:6px}
  .logo__mark{width:27px;height:27px}
  .logo__text{font-size:16.5px}
  .themebtn{width:42px;height:27px}
  .langsw,.hdr__right .btn,.hdr__right .ava{height:27px}
  .langsw__b{height:23px;padding:0 6px;font-size:10.5px}
  .hdr__right .ava{width:27px}
  .hdr__right .btn{padding:0 8px;font-size:11.5px}
  .hdr__right{gap:4px}
}

/* ---------- название в шапке не должно обрезаться ---------- */
.logo__text{overflow:visible;line-height:1.15;padding:1px 0}
.logo__text span{overflow:visible;padding-right:2px}
.hdr,.hdr__in,.logo{overflow:visible}

/* ---------- орбы: заметнее и живее, но плавно ---------- */
.hero__main:before{width:420px;height:420px;right:-90px;top:-160px;
  background:radial-gradient(circle,rgba(186,88,255,.55),rgba(139,92,255,.18) 45%,transparent 70%);
  filter:blur(10px);animation:orbA 22s ease-in-out infinite alternate}
.hero__main:after{width:320px;height:320px;left:-80px;bottom:-140px;
  background:radial-gradient(circle,rgba(96,120,255,.48),rgba(139,92,255,.16) 45%,transparent 72%);
  filter:blur(12px);animation:orbB 28s ease-in-out infinite alternate}
@keyframes orbA{
  0%  {transform:translate(0,0) scale(1)}
  25% {transform:translate(-130px,70px) scale(1.14)}
  50% {transform:translate(-60px,150px) scale(.92)}
  75% {transform:translate(-180px,40px) scale(1.08)}
  100%{transform:translate(-40px,110px) scale(1.02)}
}
@keyframes orbB{
  0%  {transform:translate(0,0) scale(1)}
  25% {transform:translate(150px,-60px) scale(1.16)}
  50% {transform:translate(70px,-140px) scale(.9)}
  75% {transform:translate(190px,-40px) scale(1.1)}
  100%{transform:translate(60px,-100px) scale(1.04)}
}

/* ---------- шапка раздела на телефоне: кнопка не наезжает ---------- */
@media (max-width:768px){
  .gamehead{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico txt" "btn btn";
    gap:10px 12px;align-items:center;padding:12px 14px}
  .gamehead__ico{grid-area:ico}
  .gamehead>div{grid-area:txt;min-width:0}
  .gamehead .h1{font-size:18px;margin:0 0 2px;overflow-wrap:anywhere}
  .gamehead p{font-size:12px;margin:0}
  .gamehead .btn{grid-area:btn;width:100%;margin:2px 0 0;position:static}
}

/* ---------- форма создания товара ---------- */
.form .fld{margin-bottom:0}
#lotForm{gap:12px}
.fld--note{display:flex;flex-direction:column;gap:5px}
.fld--note .note{margin:0;padding:11px 13px;border-radius:var(--r);border:1px dashed var(--line-2);
  color:var(--muted);font-size:12.5px;background:var(--panel-2)}
/* стрелки у числовых полей не нужны */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* поле выбора сервера выглядит как остальные */
#lotServer{height:44px;border-radius:var(--r)}

/* кнопка добавления фото — крупный плюс по центру */
.uploader{gap:10px}
.uploader__btn{width:100%;max-width:none;height:120px;border-radius:var(--r-lg);
  border:2px dashed var(--line-2);display:flex;align-items:center;justify-content:center}
.uploader__plus{font-size:64px;line-height:1;font-weight:200;color:var(--muted);
  display:block;transform:translateY(-4px)}
.uploader__list{gap:8px}

/* ---------- статус «в сети» ---------- */
.profmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:2px 0 4px}
.seen{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.seen__dot{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none;position:relative}
.seen__dot:before{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--dim);opacity:.35;animation:seenPulse 2.4s ease-out infinite}
.seen--on{color:#4ade80}
.seen--on .seen__dot{background:#4ade80}
.seen--on .seen__dot:before{border-color:#4ade80;opacity:.5;animation-duration:1.7s}
@keyframes seenPulse{
  0%  {transform:scale(.7);opacity:.55}
  70% {transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}

/* ---------- счётчики в кабинете: подпись и число в строку ---------- */
.cab__counts{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.cnt{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.cnt span{font-size:12.5px;color:var(--muted)}
.cnt b{font-size:16px}
@media (max-width:768px){
  .cab__counts{align-items:flex-start;width:100%;margin-top:8px}
  .cnt b{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .seen__dot:before{animation:none}
}

/* просмотры среди меток товара */
.tag--views{display:inline-flex;align-items:center;gap:5px}
.tag--views svg{opacity:.8}

/* ---------- шапка: правый край вровень с полем страницы, текст по центру значка ---------- */
@media (max-width:768px){
  .hdr__right{margin-right:0}
  .logo{align-items:center}
  .logo__mark{display:block}
  /* высота строки текста делается равной значку — центры совпадают точно */
  .logo__text{display:inline-flex;align-items:center;height:30px;line-height:1;padding:0}
}
@media (max-width:430px){
  .hdr__right{margin-right:0}
  .logo__text{height:27px}
}

/* ---------- узкие телефоны: строка шапки должна помещаться целиком ----------
   Блок идёт после общего мобильного, иначе тот перебивает размеры. */
@media (max-width:430px){
  .hdr__in{gap:6px}
  .logo{gap:7px}
  .logo__mark{width:27px;height:27px}
  .logo__text{font-size:16px;height:27px}
  .hdr__right{gap:4px;margin-right:0}
  .langsw{padding:2px}
  .langsw__b{height:23px;padding:0 5px;font-size:10.5px}
  .themebtn{width:40px;height:27px}
  .themebtn__thumb{width:19px;height:19px}
  .langsw,.hdr__right .btn,.hdr__right .ava{height:27px}
  .hdr__right .btn{padding:0 8px;font-size:11.5px}
  .hdr__right .ava{width:27px;border-radius:8px}
}

/* ---------- логотип: центры значка и надписи совпадают, ничего не режется ---------- */
.logo{display:flex;align-items:center}
.logo__text{position:static;top:auto;transform:none;overflow:visible;
  display:inline-flex;align-items:center;line-height:1.2;padding:2px 0}
.logo__text span{overflow:visible;padding-right:2px;line-height:inherit}
.hdr,.hdr__in,.logo,.logo__text{overflow:visible}
@media (max-width:768px){ .logo__text{height:auto;padding:2px 0} }
@media (max-width:430px){ .logo__text{height:auto} }

/* ---------- оптическое выравнивание названия по значку ----------
   Габаритная рамка текста включает выносные элементы (p, y), поэтому её центр
   не совпадает с центром заглавных букв. Сдвиг задан в em и работает
   одинаково при любом размере шрифта. */
.logo__text{--fix:0px;transform:translateY(var(--fix));padding:3px 0 4px}

/* ---------- прикрепление файла к товару ---------- */
.filepick{display:inline-flex;align-items:center;gap:9px;padding:0 15px;height:44px;cursor:pointer;
  border:1.5px dashed var(--line-2);border-radius:var(--r);color:var(--muted);font-size:13.5px;
  transition:border-color .15s ease,color .15s ease,background-color .15s ease;max-width:100%}
.filepick:hover{border-color:var(--violet);color:var(--text)}
.filepick svg{flex:none}
.filepick__txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filepick--on{border-style:solid;border-color:#4ade80;color:#4ade80;background:rgba(74,222,128,.08)}
.filepick--load{opacity:.6;pointer-events:none}
.note--sm{margin:6px 0 0;font-size:11.5px;color:var(--dim);border:0;padding:0;background:transparent}

/* ---------- публичный профиль: то же оформление, что в кабинете ---------- */
.cab__info h1{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.cab__info h1 .vcheck{margin-left:2px}          /* галочка вплотную к нику */
.cab__info h1 .badge{margin-left:2px}
.cab__rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* строка статуса: точка, текст и дата на одной линии */
.profmeta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:4px 0 2px;min-height:18px}
.seen{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;line-height:18px;color:var(--muted)}
.seen__dot{width:8px;height:8px;border-radius:50%;flex:none;position:relative;align-self:center;
  background:var(--dim)}
.seen__txt{line-height:18px}
.profmeta .muted{line-height:18px}

@media (max-width:768px){
  .cab__head{flex-wrap:wrap;gap:12px}
  .cab__info{flex:1 1 100%;min-width:0}
  .cab__counts{width:100%}
  .cab__info h1{font-size:20px}
}

/* ---------- выпадающие списки: плавное раскрытие ---------- */
.dd{position:relative}
.dd__list{max-height:0;overflow:hidden;opacity:0;transform:translateY(-6px);
  transform-origin:top center;box-shadow:0 18px 44px rgba(4,1,14,.5);
  transition:max-height .24s cubic-bezier(.4,0,.2,1),opacity .16s ease,transform .18s ease}
.dd--open .dd__list{opacity:1;transform:none;overflow-y:auto}
.dd--open .dd__btn{border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,255,.18)}
.dd__arrow{color:var(--muted);flex:none;transition:transform .22s cubic-bezier(.4,0,.2,1),color .18s ease}
.dd--open .dd__arrow{transform:rotate(180deg);color:var(--violet)}
.dd__val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd__item{transition:background-color .12s ease}
@media (prefers-reduced-motion:reduce){ .dd__list,.dd__arrow{transition:none} }

/* ---------- просмотры в правом нижнем углу карточки ---------- */
.card__views{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:8px;
  font-size:11.5px;color:var(--dim);line-height:1}

/* ---------- переключатель темы на телефоне: простая круглая кнопка ----------
   Ползунок в узкой пилюле уезжал за границу и обрезался, поэтому на мобильных
   показываем только значок текущей темы — без дорожки и сдвига. */
@media (max-width:768px){
  .themebtn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);
    display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04)}
  .themebtn__track{position:static;inset:auto;width:100%;height:100%;background:transparent;
    display:flex;align-items:center;justify-content:center;overflow:visible}
  .themebtn__thumb{position:static;transform:none;width:auto;height:auto;background:transparent;
    display:flex;align-items:center;justify-content:center}
  .themebtn__ico{position:static;margin:0;width:17px;height:17px;transform:none}
  /* переключаем через display: opacity на <svg> в мобильных движках
     иногда не переопределяется каскадом */
  .themebtn__ico{display:none;opacity:1;transform:none;position:static;margin:0;
    width:17px;height:17px}
  .themebtn__sun{display:block}
  [data-theme="light"] .themebtn__sun{display:none}
  [data-theme="light"] .themebtn__moon{display:block}
  [data-theme="light"] .themebtn{background:rgba(123,63,255,.06)}
  .themebtn:active{transform:scale(.94)}
}
@media (max-width:430px){
  .themebtn{width:27px;height:27px}
  .themebtn__ico{width:15px;height:15px}
}

/* ---------- статус: точка и текст на одной линии ---------- */
.profmeta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;margin:5px 0 3px}
.seen{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);line-height:1}
.seen__dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--dim);
  position:relative;top:0;align-self:center}
.seen__txt{line-height:1;display:inline-block}
.profmeta>.muted{line-height:1;display:inline-flex;align-items:center}


/* =========================================================
   ДОВОДКА: формы, кнопки, вход в админку
   ========================================================= */

/* ---------- выпадающий список не должен налезать на своё поле ---------- */
.dd__list{top:calc(100% + 6px);border-radius:14px}
.dd--open .dd__list{overflow-y:auto}
.dd__item{padding:10px 13px;font-size:13.5px;line-height:1.25}

/* ---------- формы: одинаковые отступы, кнопка не липнет к полю ---------- */
.form{display:flex;flex-direction:column;gap:14px}
.form .fld{display:flex;flex-direction:column;gap:6px;margin:0}
.form h4.h3{margin:6px 0 0}
.form>.btn{margin-top:4px;align-self:stretch}
#settingsForm>.btn{align-self:flex-start;padding:0 26px}
.panel>.form:last-child{padding-bottom:2px}

/* ---------- выход из кабинета — заметная красная кнопка ---------- */
.chip#logoutBtn,a#logoutBtn.chip{background:linear-gradient(120deg,#ff4d4d,#e02424);
  border-color:transparent;color:#fff;font-weight:700}
.chip#logoutBtn:hover,a#logoutBtn.chip:hover{background:linear-gradient(120deg,#ff6161,#f03030);
  border-color:transparent;color:#fff}

/* ---------- вход в админку: кнопка на своём месте ---------- */
#adminLoginForm{gap:14px}
#adminLoginForm .btn{margin-top:6px}
.auth--admin .auth__head{margin-bottom:18px}
.auth--admin .authfoot{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap}

/* ---------- вход и регистрация помещаются в экран телефона ---------- */
@media (max-width:768px){
  .authwrap{padding:10px 0 24px}
  .auth{padding:16px 14px;border-radius:16px}
  .auth__head{margin-bottom:14px}
  .auth__head h1{font-size:21px}
  .auth__head p{font-size:12.5px}
  .form{gap:11px}
  .fld input{height:42px;font-size:16px}
  .btn--lg{height:44px;font-size:15px}
  .or{margin:10px 0}
  .btn--full{height:42px;font-size:13.5px}
  .authfoot,.authnote{font-size:12px;margin-top:8px}
  .check{font-size:12px;margin:2px 0 6px}
}

/* ---------- кнопка выхода из кабинета ---------- */
.chip--exit{background:linear-gradient(120deg,#ff4d4d,#e03131);border-color:transparent;color:#fff;
  font-weight:600}
.chip--exit:hover{background:linear-gradient(120deg,#ff5f5f,#f03e3e);border-color:transparent;color:#fff}
.chip--exit:active{background:linear-gradient(120deg,#ee4343,#d12b2b)}

/* ---------- формы: одинаковые отступы, кнопка не прилипает ---------- */
.form{display:flex;flex-direction:column;gap:16px}
.form .fld{margin:0}
.form .fld>span{margin-bottom:7px}
.form>.btn{margin-top:4px}
#settingsForm>.btn{margin-top:8px;align-self:flex-start;min-width:170px}
#settingsForm .h3{margin:10px 0 0}
.panel>form:last-child{padding-bottom:2px}

/* ---------- шапка: место под оптическую подгонку ---------- */
.hdr__right .btn{--fix:0px;transform:translateY(var(--fix))}
.langsw__b{--fix:0px;transform:translateY(var(--fix))}

/* ---------- «Sell»: хвост буквы не должен срезаться заливкой ----------
   background-clip:text красит только внутри рамки элемента. Добавляем запас
   снизу и тут же гасим его отрицательным margin — рамка растёт, а раскладка
   и положение букв остаются прежними. */
.logo__text span{padding-bottom:3px;margin-bottom:-3px}

/* ---------- счётчики в профиле: строки стоят плотнее ---------- */
.cab__counts{gap:4px}
.cnt{line-height:1.25}
.cnt b{line-height:1.15}

/* ---------- смена темы на телефоне: поворот значка внутри кружка ---------- */
@media (max-width:768px){
  .themebtn{overflow:hidden;transition:background-color .2s ease,border-color .2s ease}
  .themebtn__thumb{transition:none}
  .themebtn--spin .themebtn__ico{animation:themeSpin .45s cubic-bezier(.4,0,.2,1)}
  .themebtn--spin{animation:themePulse .45s ease}
}
@keyframes themeSpin{
  0%  {transform:rotate(-180deg) scale(.55);opacity:.2}
  55% {transform:rotate(-20deg) scale(1.12);opacity:1}
  100%{transform:rotate(0) scale(1);opacity:1}
}
@keyframes themePulse{
  0%  {box-shadow:0 0 0 0 rgba(139,92,255,.45)}
  70% {box-shadow:0 0 0 7px rgba(139,92,255,0)}
  100%{box-shadow:0 0 0 0 rgba(139,92,255,0)}
}
@media (prefers-reduced-motion:reduce){
  .themebtn--spin .themebtn__ico,.themebtn--spin{animation:none}
}

/* ---------- значок темы переключается на всех экранах ----------
   opacity на <svg> в этом движке каскадом не переопределялась, поэтому
   на компьютере луна не появлялась. Переключаем через display. */
.themebtn__ico{display:none}
.themebtn__sun{display:block}
[data-theme="light"] .themebtn__sun{display:none}
[data-theme="light"] .themebtn__moon{display:block}

/* ---------- название KupiSell: одинаково ровное в шапке и подвале ----------
   Трекинг был -.7px под старое «KupiPay»: у «Sell» две «l» при таком сжатии
   сливались в один штрих (просвет 1.3px при толщине штриха 5px). Возвращаем
   родное расстояние шрифта — просвет 2px, буквы читаются раздельно.
   Размеры подвала заданы для каждой ширины экрана — на телефоне подвал
   больше не остаётся крупнее шапки. */
.logo__text{letter-spacing:normal}
.logo__text>span{letter-spacing:inherit;padding:0;margin:0}
.ftr__brand .logo__text{font-size:19px}
@media (max-width:1024px){
  .logo__text{font-size:20px}
  .ftr__brand .logo__text{font-size:18px}
}
@media (max-width:768px){
  .logo__text{font-size:18px}
  .ftr__brand .logo__text{font-size:17px}
}
@media (max-width:430px){
  .logo__text{font-size:16.5px}
  .ftr__brand .logo__text{font-size:16px}
}

/* =========================================================
   ФИНАЛЬНАЯ ДОВОДКА: ширина страницы, шары, шапка, переключатели
   ========================================================= */

/* ---------- 1. Страница занимает всю ширину экрана ----------
   .wrap упирался в 1560px (1720/2000 на больших мониторах), поэтому по краям
   оставались пустые поля. Ширину не ограничиваем, а поля растут вместе с
   экраном: 14px на телефоне → 44px на большом мониторе. env(safe-area-*)
   оставлен для айфонов с вырезом в альбомной ориентации. */
:root{--pad:clamp(14px,1.9vw,44px)}
.wrap{max-width:none;width:100%;margin:0 auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right))}
.hdr__in{padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right))}
/* ---------- 2. Шапка одной высоты на всех страницах ----------
   Высота задаётся min-height, а не height: на страницах без строки поиска
   шапка не съёживалась и не подпрыгивала. */
.hdr__in{height:auto;min-height:64px}
@media (max-width:1024px){ .hdr__in{min-height:60px} }
@media (max-width:768px){ .hdr__in{min-height:56px} }
@media (min-width:1600px){ .hdr__in{min-height:70px} }

/* ---------- 3. Никаких шаров ----------
   Плавающие пятна убраны совсем: и старые псевдоэлементы, и разметка.
   Плашка остаётся чистой — только градиент фона. */
.hero__main:before,.hero__main:after{display:none}
.hero__orbs{display:none}

/* ---------- 4. Подвал: название чуть свободнее ----------
   Кегль в подвале мельче, чем в шапке, и «e-l-l» вставали плотнее. Небольшой
   положительный трекинг разводит их до той же читаемости, что в шапке. */
.ftr__brand .logo__text{letter-spacing:.3px}
.ftr__brand .logo__text>span{letter-spacing:inherit}

/* ---------- 5. Поиск: подсветка наводится мягко ----------
   Было .15s без задержки — рамка вспыхивала рывком. */
.search{transition:border-color .3s cubic-bezier(.33,0,.2,1),box-shadow .3s cubic-bezier(.33,0,.2,1)}
.search:hover{transition-duration:.34s;transition-delay:.05s}

/* ---------- 6. Переключатель темы: одинаково на всех экранах ----------
   Значок показывает текущую тему: ночью луна, днём солнце. Оба значка всегда
   в разметке и всегда display:block — раньше они переключались через display,
   из-за чего перехода не было вовсе, а на телефоне луна иногда не появлялась.
   Теперь это перекрёстное затухание с поворотом. */
.themebtn .themebtn__ico{display:block;position:absolute;top:50%;left:50%;margin:0;
  translate:-50% -50%;
  transition:opacity .26s ease,rotate .44s cubic-bezier(.34,1.3,.5,1),scale .44s cubic-bezier(.34,1.3,.5,1)}
.themebtn .themebtn__moon{opacity:1;rotate:0deg;scale:1;transform:none}
.themebtn .themebtn__sun{opacity:0;rotate:-70deg;scale:.5;transform:none}
[data-theme="light"] .themebtn .themebtn__moon{opacity:0;rotate:70deg;scale:.5}
[data-theme="light"] .themebtn .themebtn__sun{opacity:1;rotate:0deg;scale:1}
/* кружок-ползунок: ночью тёмный с фиолетовым ободком, днём белый */
.themebtn__thumb{background:#2a1f4d;box-shadow:0 0 0 1px rgba(169,139,255,.55),0 2px 8px rgba(0,0,0,.45)}
/* в светлой теме кружок с солнцем — без фиолетового ободка и свечения:
   только нейтральная тень, чтобы он читался на светлой дорожке */
[data-theme="light"] .themebtn__thumb{background:#fff;
  box-shadow:0 0 0 1px rgba(28,20,52,.12),0 1px 3px rgba(28,20,52,.16)}
[data-theme="light"] .themebtn{background:transparent}
@media (max-width:768px){
  [data-theme="light"] .themebtn{background:rgba(28,20,52,.04);border-color:rgba(28,20,52,.14)}
}
.themebtn{transition:background-color .26s ease,border-color .26s ease}
.themebtn__track{transition:background .3s ease}
/* короткий импульс по нажатию — на всех экранах, а не только на телефоне */
.themebtn--spin{animation:themePulse .5s ease}
.themebtn--spin .themebtn__ico{animation:none}
@media (max-width:768px){
  .themebtn__thumb{position:absolute;inset:0;width:auto;height:auto;transform:none;background:transparent;box-shadow:none}
  [data-theme="light"] .themebtn__thumb{background:transparent;box-shadow:none;transform:none}
  .themebtn .themebtn__ico{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){
  .themebtn .themebtn__ico{transition:none}
}

/* ---------- 7. Переключатель языка: подложка едет мягче ---------- */
.langsw:before{transition:transform .34s cubic-bezier(.34,1.2,.5,1)}
.langsw__b{transition:color .24s ease}
.langsw__b:active{scale:.96}
@media (prefers-reduced-motion:reduce){
  .langsw:before{transition:none}
}

/* =========================================================
   МАСШТАБ ИНТЕРФЕЙСА И ПЕРВЫЙ ЭКРАН
   ========================================================= */

/* ---------- 8. Крупнее на компьютере ----------
   Размеры по всему файлу заданы в пикселях, поэтому менять их поштучно —
   это сотни правок и гарантированные расхождения. zoom масштабирует всё
   разом: шрифты, отступы, кнопки, картинки каталога. Переменная --z хранит
   тот же коэффициент для расчёта высоты первого экрана. */
:root{--z:1;--hdr-h:64px;--page-top:20px;--hero-gap:26px}
@media (min-width:1600px){ :root{--hdr-h:70px} }
@media (max-width:1024px){ :root{--hdr-h:60px;--page-top:16px;--hero-gap:20px} }
@media (max-width:768px){  :root{--hdr-h:56px;--page-top:12px;--hero-gap:16px} }
.page{padding-top:var(--page-top)}

@media (min-width:1280px){ :root{--z:1.06} body{zoom:1.06} }
@media (min-width:1500px){ :root{--z:1.12} body{zoom:1.12} }
@media (min-width:1800px){ :root{--z:1.2}  body{zoom:1.2} }
@media (min-width:2300px){ :root{--z:1.3}  body{zoom:1.3} }

/* ---------- 9. Баннер обычной высоты ----------
   Пробовал растянуть его на весь первый экран — получилась огромная пустая
   плашка, каталог уезжал далеко вниз. Возвращаю нормальный баннер: высоту
   задаёт содержимое, каталог начинается сразу под ним, как на площадках
   вроде Playerok. */
.hero{display:block;min-height:0;margin:0 0 var(--hero-gap)}
.hero__main{display:block;padding:52px 42px}
.hero h1{margin:0 0 12px}
.hero__note{margin-top:10px}
.hero__cta{margin:18px 0 20px}
.hero__stats{padding-top:16px}
@media (min-width:1500px){ .hero__main{padding:62px 48px} }
@media (max-width:1024px){ .hero__main{padding:30px 26px} }
@media (max-width:768px){
  .hero__main{padding:24px 18px}
  .hero__cta{margin:16px 0 16px}
}

/* ---------- 10. Переключение языка: одинаково плавно везде ----------
   Подложка едет 340мс, поэтому и перезагрузку ждём столько же, а страницу
   на это время мягко приглушаем — переход перестаёт выглядеть рывком. */
.langsw:before{transition:transform .34s cubic-bezier(.34,1.2,.5,1)}
html.is-switching .page,html.is-switching .ftr{opacity:.45;transition:opacity .3s ease}
html.is-switching .hdr__right .btn,html.is-switching .search{opacity:.6;transition:opacity .3s ease}
@media (prefers-reduced-motion:reduce){
  html.is-switching .page,html.is-switching .ftr,
  html.is-switching .hdr__right .btn,html.is-switching .search{transition:none;opacity:1}
}

/* =========================================================
   ДОВОДКА: поиск, каталог, кнопка темы
   ========================================================= */

/* ---------- 11. Поиск: подсветка приходит и уходит неспешно ----------
   Задержка стоит и на наведение, и на увод, поэтому обводка не дёргается,
   когда курсор случайно чиркнул по краю плашки. */
.search{transition:border-color .5s cubic-bezier(.33,0,.25,1),box-shadow .5s cubic-bezier(.33,0,.25,1);
  transition-delay:.09s}
.search:hover{transition-duration:.55s;transition-delay:.14s}

/* ---------- 12. Каталог крупнее (кроме телефонов) ----------
   На телефоне размеры не трогаем: там сетка и так впритык. */
@media (min-width:769px){
  .icons{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:22px 12px}
  .icons--big{grid-template-columns:repeat(auto-fill,minmax(154px,1fr));gap:24px 14px}
  .icon__img{width:108px;height:108px;border-radius:28px}
  .icons--big .icon__img{width:124px;height:124px;border-radius:32px}
  .icon{gap:11px}
  .icon b{font-size:14.5px}
  .sec__head h2{font-size:22px}
  .sec{margin:32px 0}
}
@media (min-width:1200px){
  .icons{grid-template-columns:repeat(auto-fill,minmax(154px,1fr))}
  .icons--big{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .icon__img{width:122px;height:122px;border-radius:30px}
  .icons--big .icon__img{width:138px;height:138px;border-radius:34px}
  .icon b{font-size:15px}
  .sec__head h2{font-size:24px}
}

/* ---------- 13. Кнопка темы: один блок вместо сорока правил ----------
   Что было сломано и почему:
   * .themebtn--spin запускал themePulse — расходящееся кольцо
     rgba(139,92,255,.45). Это и есть «солнце подсвечивается фиолетовым».
     Убрано совсем.
   * на телефоне .themebtn:active{transform:scale(.94)} перебивал
     .themebtn{transform:scale(.8)} из другого правила — при нажатии кнопка
     не сжималась, а прыгала и увеличивалась. Отсюда «пролагивает».
     Теперь размеры задаются только шириной и высотой, transform не трогаем.
   * overflow:hidden на телефоне обрезал значок при повороте.
   * дорожка и рамка в светлой теме были сиреневыми (#efe9fd/#d6cbf1) —
     сделаны нейтральными, рядом с солнцем ничего фиолетового не осталось. */
.themebtn{transform:none;overflow:visible;
  transition:background-color .24s ease,border-color .24s ease}
.themebtn:active{transform:none;background-color:rgba(255,255,255,.07)}
.themebtn--spin{animation:none}
.themebtn--spin .themebtn__ico{animation:none}
.themebtn__track{transition:background .3s ease}
/* значок текущей темы: ночью луна, днём солнце, перекрёстное затухание */
.themebtn .themebtn__ico{display:block;position:absolute;top:50%;left:50%;margin:0;
  translate:-50% -50%;transform:none;
  transition:opacity .24s ease,rotate .4s cubic-bezier(.34,1.25,.5,1),scale .4s cubic-bezier(.34,1.25,.5,1)}
.themebtn .themebtn__moon{opacity:1;rotate:0deg;scale:1}
.themebtn .themebtn__sun{opacity:0;rotate:-70deg;scale:.5}
[data-theme="light"] .themebtn .themebtn__moon{opacity:0;rotate:70deg;scale:.5}
[data-theme="light"] .themebtn .themebtn__sun{opacity:1;rotate:0deg;scale:1}
/* тёмная тема: тёмный кружок с луной на тёмной дорожке */
.themebtn__thumb{background:#2a1f4d;box-shadow:0 0 0 1px rgba(169,139,255,.45),0 2px 8px rgba(0,0,0,.45)}
/* светлая тема: белый кружок с солнцем, вокруг ничего сиреневого */
[data-theme="light"] .themebtn{background:transparent;border-color:rgba(28,20,52,.16)}
[data-theme="light"] .themebtn__track{background:linear-gradient(120deg,#edecf2,#e3e2ea)}
[data-theme="light"] .themebtn__thumb{background:#fff;
  box-shadow:0 0 0 1px rgba(28,20,52,.12),0 1px 3px rgba(28,20,52,.16)}
[data-theme="light"] .themebtn:active{background-color:rgba(28,20,52,.05)}
/* телефон: круглая кнопка, значок по центру, никаких прыжков */
@media (max-width:768px){
  .themebtn{width:30px;height:30px;border-radius:50%;transform:none;overflow:visible}
  .themebtn__track,.themebtn__thumb{position:absolute;inset:0;width:auto;height:auto;
    transform:none;background:transparent;box-shadow:none;border-radius:50%}
  [data-theme="light"] .themebtn__track,[data-theme="light"] .themebtn__thumb{background:transparent;box-shadow:none}
  .themebtn .themebtn__ico{width:17px;height:17px}
  [data-theme="light"] .themebtn{background:rgba(28,20,52,.04)}
}
@media (max-width:430px){
  .themebtn{width:27px;height:27px}
  .themebtn .themebtn__ico{width:15px;height:15px}
}
@media (prefers-reduced-motion:reduce){
  .themebtn .themebtn__ico{transition:none}
}

/* =========================================================
   ДОВОДКА: значок темы, баннер на телефоне, смена языка
   ========================================================= */

/* ---------- 14. Значок темы не дёргается в конце анимации ----------
   Центрирование через translate:-50% -50% давало дробное смещение: пока идёт
   поворот, значок живёт на отдельном слое видеокарты, а в конце слой убирается
   и картинка прилипает к целому пикселю — со стороны это «дёрнулся вправо и
   выровнялся». Центруем через inset:0 + margin:auto (целые пиксели, никакого
   переноса) и держим слой постоянно через will-change. */
.themebtn .themebtn__ico{position:absolute;inset:0;margin:auto;top:0;right:0;bottom:0;left:0;
  translate:none;transform-origin:50% 50%;will-change:transform,opacity;
  transition:opacity .24s ease,rotate .4s cubic-bezier(.34,1.25,.5,1),scale .4s cubic-bezier(.34,1.25,.5,1)}
.themebtn .themebtn__ico{width:16px;height:16px}
@media (max-width:768px){ .themebtn .themebtn__ico{width:17px;height:17px} }
@media (max-width:430px){ .themebtn .themebtn__ico{width:15px;height:15px} }

/* ---------- 15. Баннер на телефоне чуть ниже ---------- */
@media (max-width:768px){
  .hero__main{padding:18px 18px}
  .hero__cta{margin:14px 0 14px}
  .hero__stats{padding-top:13px}
}

/* ---------- 16. Смена языка: страница гаснет заметно ----------
   Раньше приглушение занимало 300мс и перезагрузка успевала его перебить —
   на компьютере эффекта не было видно вовсе. Гасим быстрее и сильнее,
   а перезагрузку ждём дольше подложки. */
html.is-switching .page,html.is-switching .ftr{opacity:.3;transition:opacity .16s ease}
html.is-switching .hdr__right .btn,html.is-switching .search,
html.is-switching .logo{opacity:.45;transition:opacity .16s ease}
html.is-switching .hdr{transition:background-color .16s ease}
@media (prefers-reduced-motion:reduce){
  html.is-switching .page,html.is-switching .ftr,html.is-switching .logo,
  html.is-switching .hdr__right .btn,html.is-switching .search{transition:none;opacity:1}
}

/* =========================================================
   ДОВОДКА: ход переключателя темы, баннер, затемнение языка
   ========================================================= */

/* ---------- 17. Переключатель темы на компьютере: плавный ход ----------
   Сдвиг был задан числом (28px), подобранным под одну из старых ширин кнопки,
   и к нынешним 62px не подходил — кружок не доезжал до правого края.
   Здесь ширина кнопки, размер кружка и длина хода заданы вместе, поэтому
   он встаёт ровно у края. Считаем от дорожки, а не от кнопки: дорожка уже
   кнопки на рамку и свой отступ, внутри неё 62 − 2 − 4 = 56, значит
   ход = 56 − 3(поле) − 24(кружок) − 3(поле) = 26.
   Переход прописан явно, чтобы его не перебивали правила выше. */
@media (min-width:1025px){
  .themebtn{width:62px;height:32px}
  .themebtn__thumb{width:24px;height:24px;left:3px;
    transition:transform .42s cubic-bezier(.34,1.2,.5,1),
               background-color .3s ease,box-shadow .3s ease}
  [data-theme="light"] .themebtn__thumb{transform:translateY(-50%) translateX(26px)}
}
@media (min-width:769px) and (max-width:1024px){
  .themebtn{width:54px;height:30px}
  .themebtn__thumb{width:22px;height:22px;left:3px;
    transition:transform .42s cubic-bezier(.34,1.2,.5,1),
               background-color .3s ease,box-shadow .3s ease}
  [data-theme="light"] .themebtn__thumb{transform:translateY(-50%) translateX(20px)}
}
/* дорожка меняет цвет вместе с кружком — переход читается как «день-ночь» */
.themebtn__track{transition:background .38s ease}

/* ---------- 18. Баннер на телефоне ещё немного ниже ---------- */
@media (max-width:768px){
  .hero__main{padding:15px 18px}
  .hero__stats{padding-top:11px}
}

/* ---------- 19. Смена языка: затемнение видно и на компьютере ----------
   Прошлый вариант гас до 30% за 160мс, но перезагрузка прилетала слишком
   быстро и на компьютере эффект проскакивал. Гасим сильнее и держим дольше,
   а новая страница проявляется коротким наплывом — переход читается целиком. */
html.is-switching .page,html.is-switching .ftr{opacity:.15;transition:opacity .2s ease}
html.is-switching .hdr__right .btn,html.is-switching .search,
html.is-switching .logo,html.is-switching .online{opacity:.3;transition:opacity .2s ease}
@keyframes pageIn{from{opacity:.25}to{opacity:1}}
.page{animation:pageIn .28s ease}
@media (prefers-reduced-motion:reduce){
  .page{animation:none}
  html.is-switching .page,html.is-switching .ftr,html.is-switching .logo,
  html.is-switching .online,html.is-switching .hdr__right .btn,
  html.is-switching .search{transition:none;opacity:1}
}

/* =========================================================
   ДОВОДКА: шапка ровно по центру, баннер, смена языка
   ========================================================= */

/* ---------- 20. Всё в шапке — строго напротив логотипа ----------
   Раньше название держалось на position:relative + top:-1/-2px (подгонка под
   старое «KupiPay» с хвостом у «y»), а скрипт дополнительно двигал название и
   кнопки по метрикам шрифта. На телефоне шрифт другой, поправки другие — и
   правая часть шапки вставала чуть выше логотипа. Все сдвиги убраны:
   выравнивает flex, одинаково на любом устройстве. */
.hdr__in{align-items:center}
.logo{align-items:center}
.logo__text{position:static;top:auto;transform:none;translate:none}
.langsw__b{transform:none;translate:none;--fix:0px}
.hdr__right{display:flex;align-items:center}
.hdr__right>*{align-self:center}
.hdr .btn,.hdr__right .btn,.hdr__right .ava,.langsw,.themebtn,.online{transform:none;vertical-align:middle}
/* одинаковая высота у всего, что правее логотипа — тогда центры совпадают */
@media (max-width:768px){
  .hdr__right{gap:6px}
  .langsw,.themebtn,.hdr__right .btn,.hdr__right .ava,.online{height:30px}
  .themebtn{width:30px}
  .langsw__b{height:24px}
}
@media (max-width:430px){
  .langsw,.themebtn,.hdr__right .btn,.hdr__right .ava,.online{height:28px}
  .themebtn{width:28px}
  .langsw__b{height:22px}
}

/* ---------- 21. Баннер на телефоне ещё чуть ниже ---------- */
@media (max-width:768px){
  .hero__main{padding:12px 18px}
  .hero__stats{padding-top:10px}
}

/* ---------- 22. Смена языка — без затемнения ----------
   Приглушение страницы убрано по просьбе: подложка языка просто едет,
   страница перезагружается без эффектов. */
html.is-switching .page,html.is-switching .ftr,html.is-switching .logo,
html.is-switching .online,html.is-switching .hdr__right .btn,
html.is-switching .search{opacity:1;transition:none}
.page{animation:none}

/* ---------- 23. Название в шапке: подгонка на целый пиксель ----------
   --fix ставит скрипт: он подводит середину заглавных букв к центру значка.
   На Segoe UI выходит 0, на Roboto — пиксель-полтора. Кнопки справа не
   двигаем, они выравниваются коробками. */
.logo__text{transform:translateY(var(--fix,0px))}

/* ---------- 24. Баннер на телефоне: ещё пара пикселей ---------- */
@media (max-width:768px){
  .hero__main{padding:8px 18px}
  .hero__stats{padding-top:8px}
  .hero__cta{margin:11px 0 11px}
}

/* =========================================================
   ДОВОДКА: прокрутка на телефоне и переключение языка
   ========================================================= */

/* ---------- 25. Прокрутка не уезжает за края ----------
   «Можно листнуть выше шапки и ниже подвала» — это не вёрстка: под подвалом
   пустого места нет (проверено, 0.5px). Это резинка браузера на телефоне.
   overscroll-behavior:none выключает и её, и жест «потянуть для обновления». */
html,body{overscroll-behavior-y:none;overscroll-behavior-x:none}

/* ---------- 26. Шапка не отстаёт при быстрой прокрутке ----------
   Прилипающая шапка на телефоне рисуется в общем слое страницы: при резком
   рывке она успевает уехать на кадр-другой, и сверху проглядывает сайт.
   Отдельный слой на видеокарте убирает этот зазор. */
.hdr{will-change:transform;transform:translateZ(0);backface-visibility:hidden}

/* ---------- 27. Значок темы не пропадает при прокрутке ----------
   will-change на солнце и луне заставлял браузер держать под них отдельные
   слои; при долгой прокрутке он их сбрасывал и перерисовывал — значок на
   пару секунд исчезал. Слои больше не просим: центровка целыми пикселями
   и так не даёт дёрганья в конце анимации. */
.themebtn .themebtn__ico{will-change:auto}

/* ---------- 28. Переключение языка — только едущая подложка ----------
   Ни затемнения, ни сжатия кнопки при нажатии: подложка переезжает под
   выбранный язык, надписи перекрашиваются, больше ничего не происходит. */
.langsw__b{transition:color .18s ease}
.langsw__b:active,.langsw__b:focus{scale:none;transform:none;opacity:1}
.langsw:before{transition:transform .34s cubic-bezier(.34,1.2,.5,1)}
.langsw,.langsw__b{opacity:1}

/* =========================================================
   ПОДСВЕТКА ПОИСКА, ШАПКА НА ТЕЛЕФОНЕ, ПУЗЫРЬКИ
   ========================================================= */

/* ---------- 29. Поиск: подсветка действительно разгорается ----------
   Вот почему прошлые попытки не помогали: в покое у плашки не было тени
   вообще (box-shadow:none), а переход из «нет тени» в «есть тень» браузер
   разыгрывает рывком — плавно расти нечему. Теперь в покое лежит такая же
   тень, но нулевой толщины и полностью прозрачная: при наведении она
   разрастается от 0 до 4px и набирает цвет — это уже настоящая анимация. */
.search{box-shadow:0 0 0 0 rgba(139,92,255,0);
  transition:border-color .85s cubic-bezier(.25,.1,.25,1),box-shadow .85s cubic-bezier(.25,.1,.25,1);
  transition-delay:0s}
.search:hover{border-color:var(--violet);box-shadow:0 0 0 4px rgba(139,92,255,.24);
  transition-duration:.95s;transition-delay:.06s}
.search:focus-within,.search--on{border-color:var(--line);box-shadow:0 0 0 0 rgba(139,92,255,0)}
.search:focus-within:hover,.search--on:hover{border-color:var(--violet);box-shadow:0 0 0 4px rgba(139,92,255,.24)}

/* ---------- 30. Шапка: на телефоне уезжает вверх, на компьютере остаётся ---------- */
@media (max-width:768px){
  .hdr{position:static;will-change:auto;transform:none}
}

/* ---------- 31. Пузырьки в главном баннере ----------
   Поднимаются со дна плашки к верху и слегка качаются в стороны. Подъём и
   качание — разные элементы и разные периоды, поэтому движение не выглядит
   заученным. Обе анимации — чистый transform, целиком на видеокарте.
   Плашка обрезает содержимое, так что пузырьки живут строго в её рамке. */
.hero__bubbles{position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;border-radius:inherit}
.hero__bubbles i{position:absolute;bottom:-70px;display:block;
  animation-name:bubbleRise;animation-timing-function:linear;
  animation-iteration-count:infinite;animation-duration:var(--t);animation-delay:var(--d)}
.hero__bubbles i:before{content:"";display:block;width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 33% 28%,
    rgba(255,255,255,.55),rgba(206,170,255,.14) 42%,rgba(150,100,255,.07) 68%,transparent 78%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset -3px -5px 10px rgba(120,80,220,.28),0 0 14px rgba(160,110,255,.16);
  animation-name:bubbleSway;animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;animation-direction:alternate;
  animation-duration:calc(var(--t) / 3)}
/* Путь подъёма: высота плашки (≈500px) + 70px старта под нижним краем +
   запас на размер пузырька. Появление и угасание — по краям пути, чтобы
   пузырёк не возникал и не пропадал посреди плашки. */
@keyframes bubbleRise{
  0%   {opacity:0;transform:translateY(0)}
  7%   {opacity:1}
  93%  {opacity:1}
  100% {opacity:0;transform:translateY(-575px)}
}
@keyframes bubbleSway{from{transform:translateX(-13px)}to{transform:translateX(13px)}}
.hero__bubbles i:nth-child(1){left:7%; --s:26px;--t:21s;--d:-0.8s}
.hero__bubbles i:nth-child(2){left:17%;--s:14px;--t:16s;--d:-1.7s}
.hero__bubbles i:nth-child(3){left:29%;--s:34px;--t:27s;--d:-4.8s}
.hero__bubbles i:nth-child(4){left:41%;--s:18px;--t:19s;--d:-4.8s}
.hero__bubbles i:nth-child(5){left:53%;--s:11px;--t:14s;--d:-4.5s}
.hero__bubbles i:nth-child(6){left:64%;--s:30px;--t:24s;--d:-9.4s}
.hero__bubbles i:nth-child(7){left:75%;--s:16px;--t:17s;--d:-7.9s}
.hero__bubbles i:nth-child(8){left:86%;--s:23px;--t:22s;--d:-11.8s}
.hero__bubbles i:nth-child(9){left:94%;--s:13px;--t:15s;--d:-9.1s}
[data-theme="light"] .hero__bubbles i:before{
  background:radial-gradient(circle at 33% 28%,
    rgba(255,255,255,.75),rgba(150,90,255,.12) 42%,rgba(120,70,230,.06) 68%,transparent 78%);
  border-color:rgba(120,70,230,.14);
  box-shadow:inset -3px -5px 10px rgba(120,80,220,.14),0 0 12px rgba(150,100,255,.12)}
@media (max-width:768px){
  .hero__bubbles i:nth-child(3),.hero__bubbles i:nth-child(6),
  .hero__bubbles i:nth-child(9){display:none}
  @keyframes bubbleRise{
    0%{opacity:0;transform:translateY(0)} 7%{opacity:1}
    93%{opacity:1} 100%{opacity:0;transform:translateY(-445px)}
  }
}
/* Раньше здесь пузырьки прятались при системной настройке «меньше движения».
   На компьютере с выключенными анимациями Windows это означало, что их не
   видно вовсе. Оставляем их видимыми всегда — это фон, а не мигание. */

/* =========================================================
   СЕТКИ ОБЪЯВЛЕНИЙ И ДОГРУЗКА
   ========================================================= */

/* ---------- 32. Сколько карточек в ряду ---------- */
@media (min-width:1025px){ .grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (min-width:769px) and (max-width:1024px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:768px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} }

/* ---------- 33. «Популярные» — ровно три ряда ----------
   Сервер отдаёт 15 карточек: это три ряда по пять на компьютере. На планшете
   в ряду четыре, на телефоне два, поэтому лишние прячем — рядов всё равно три. */
@media (min-width:769px) and (max-width:1024px){
  .lots--pop .grid>:nth-child(n+13){display:none}
}
@media (max-width:768px){
  .lots--pop .grid>:nth-child(n+7){display:none}
}

/* ---------- 34. «Новые» — первая страница и догрузка ----------
   С сервера приходит 20 карточек (четыре ряда по пять). На телефоне это было
   бы десять рядов сразу, поэтому до первой догрузки показываем семь рядов —
   14 карточек; как только пошла подгрузка, ограничение снимается. */
@media (max-width:768px){
  .lots--new.is-capped .grid>:nth-child(n+15){display:none}
}

/* индикатор догрузки под последним рядом */
.loadmore{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:22px 0 6px;color:var(--muted);font-size:13px}
.loadmore[hidden]{display:none}
.loadmore__dots{display:inline-flex;gap:5px}
.loadmore__dots i{width:7px;height:7px;border-radius:50%;background:var(--violet);
  animation:loadDot 1.1s ease-in-out infinite}
.loadmore__dots i:nth-child(2){animation-delay:.15s}
.loadmore__dots i:nth-child(3){animation-delay:.3s}
@keyframes loadDot{
  0%,80%,100%{transform:scale(.6);opacity:.45}
  40%{transform:scale(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){ .loadmore__dots i{animation:none} }

/* ---------- 35. Пузырьков в баннере стало больше ----------
   На широкой плашке девяти было мало — добавлено ещё пять. На телефоне
   прячем только самые крупные: мелкие читаются и поверх текста не мешают. */
.hero__bubbles i:nth-child(10){left:12%;--s:20px;--t:18s;--d:-12.2s}
.hero__bubbles i:nth-child(11){left:24%;--s:12px;--t:13s;--d:-9.8s}
.hero__bubbles i:nth-child(12){left:47%;--s:28px;--t:25s;--d:-20.5s}
.hero__bubbles i:nth-child(13){left:69%;--s:15px;--t:16s;--d:-14.3s}
.hero__bubbles i:nth-child(14){left:81%;--s:22px;--t:20s;--d:-19.3s}
@media (max-width:768px){
  .hero__bubbles i:nth-child(3){display:none}
  .hero__bubbles i:before{border-color:rgba(255,255,255,.22)}
  .hero__bubbles i:nth-child(1){--s:18px} .hero__bubbles i:nth-child(4){--s:14px}
  .hero__bubbles i:nth-child(8){--s:17px} .hero__bubbles i:nth-child(12){--s:19px}
  .hero__bubbles i:nth-child(14){--s:15px}
}

/* =========================================================
   ФИКС ТРЯСКИ: пузырьки и значок темы
   ========================================================= */

/* ---------- 36. Пузырьки перестают трястись ----------
   Причина тряски: у пузырьков не было своего слоя на видеокарте. Браузер
   перерисовывал каждый из них на каждом кадре и округлял положение до целого
   пикселя — на медленном движении это видно как дрожь. Плюс анимаций было
   две на пузырёк (подъём на обёртке и качание на самом кружке), они считались
   отдельно и складывались с разным округлением.

   Теперь: одна анимация на пузырёк, подъём и качание — в одних ключевых
   кадрах, и постоянный слой через will-change. Слой рисуется один раз,
   дальше видеокарта только сдвигает его, с дробной точностью и без
   перерисовки. */
.hero__bubbles i{will-change:transform;backface-visibility:hidden;
  animation-name:bubbleRise;animation-timing-function:linear;
  animation-iteration-count:infinite;animation-duration:var(--t);animation-delay:var(--d)}
.hero__bubbles i:before{animation:none}          /* качание переехало в подъём */
@keyframes bubbleRise{
  0%   {opacity:0;transform:translate(0,0)}
  7%   {opacity:1}
  25%  {transform:translate(11px,-144px)}
  50%  {transform:translate(-9px,-288px)}
  75%  {transform:translate(10px,-431px)}
  93%  {opacity:1}
  100% {opacity:0;transform:translate(0,-575px)}
}
@media (max-width:768px){
  @keyframes bubbleRise{
    0%   {opacity:0;transform:translate(0,0)}
    7%   {opacity:1}
    25%  {transform:translate(8px,-111px)}
    50%  {transform:translate(-7px,-223px)}
    75%  {transform:translate(7px,-334px)}
    93%  {opacity:1}
    100% {opacity:0;transform:translate(0,-445px)}
  }
}

/* ---------- 37. Значок темы: только перетекание ----------
   Поворот и масштаб шли с пружинной кривой — она проскакивает конечную точку
   и возвращается назад. На маленьком значке это читается как «дёрнулся и
   выровнялся». Убираю движение совсем: солнце и луна просто перетекают друг
   в друга прозрачностью. Дёргаться там больше нечему. */
.themebtn .themebtn__ico{rotate:0deg;scale:1;transform:none;
  transition:opacity .22s ease}
.themebtn .themebtn__moon{opacity:1}
.themebtn .themebtn__sun{opacity:0}
[data-theme="light"] .themebtn .themebtn__moon{opacity:0;rotate:0deg;scale:1}
[data-theme="light"] .themebtn .themebtn__sun{opacity:1;rotate:0deg;scale:1}

/* =========================================================
   ПОДВАЛ И ПУЗЫРЬКИ
   ========================================================= */

/* ---------- 38. Пузырьки — только на телефоне ----------
   На компьютере убраны по просьбе: там они мешали. */
@media (min-width:769px){
  .hero__bubbles{display:none}
}

/* ---------- 39. Подвал на телефоне: ссылки выше описания ----------
   display:contents убирает собственную рамку блока с логотипом, и его части
   становятся обычными пунктами колонки подвала. Тогда порядком можно
   управлять: сначала название, потом колонки ссылок, и только потом
   описание площадки, ИП и год. */
@media (max-width:768px){
  .ftr__in{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
  .ftr__brand{display:contents}
  .ftr__brand .logo{order:1;margin:0}
  .ftr__nav{order:2;display:flex;gap:28px;flex-wrap:wrap;width:100%}
  .ftr__brand p{order:3;margin:0}
  .ftr__brand p+p{margin-top:2px}
  .ftr__col h4{margin:0 0 8px}
  .ftr__col a{margin-bottom:7px}
}

/* ---------- 40. Три колонки в подвале ---------- */
.ftr__nav{display:flex;gap:52px;flex-wrap:wrap}
@media (min-width:769px) and (max-width:1100px){ .ftr__nav{gap:34px} }

/* =========================================================
   ЯЗЫК БЕЗ ЗАТЕМНЕНИЯ, ВХОД И РЕГИСТРАЦИЯ ПО ЦЕНТРУ
   ========================================================= */

/* ---------- 41. RU/EN больше не гаснут ----------
   Невыбранный язык был приглушённого цвета и перекрашивался с переходом —
   при переключении это читалось как затемнение букв. Обе надписи держим
   одинаково яркими, выбранный язык показывает только подложка. */
.langsw__b{color:var(--text);transition:none}
.langsw__b--on{color:#fff}
[data-theme="light"] .langsw__b{color:var(--text)}
[data-theme="light"] .langsw__b--on{color:#fff}

/* ---------- 42. Вход и регистрация ровно по центру ----------
   Было min-height:0 — колонка равнялась высоте карточки, центрировать было
   не в чем, и карточка съезжала вниз, вылезая за нижний край экрана.
   Теперь колонка занимает высоту экрана за вычетом шапки, а карточка
   центрируется через margin:auto — если она выше экрана, верх не срежется. */
/* Высота была прописана как calc(100vh - 63px) — под старую шапку 63px и без
   учёта масштаба интерфейса. Единицы vh масштаб не знают, поэтому при zoom 1.2
   колонка выходила на 200px выше экрана: карточка центрировалась в этой
   завышенной колонке, съезжала вниз и упиралась в нижний край.
   Считаем от реальных величин: делим высоту экрана на масштаб и вычитаем
   фактическую высоту шапки. */
body.auth-page{height:calc(100svh / var(--z));overflow:hidden}
body.auth-page .page{display:flex;align-items:center;justify-content:center;
  height:calc(100svh / var(--z) - var(--hdr-h));min-height:0;
  padding:var(--page-top) 20px;overflow:auto}
body.auth-page .authwrap{width:100%;min-height:0;padding:0;align-items:center}
body.auth-page .auth{margin:auto}
@media (max-width:768px){
  body.auth-page{height:auto;overflow:visible}
  body.auth-page .page{height:auto;min-height:calc(100svh - var(--hdr-h));
    padding:var(--page-top) 14px;align-items:center;overflow:visible}
}

/* ---------- 43. Подвал на телефоне: втрое компактнее ----------
   Было 479px — 57% экрана. Половину съедали колонки: три штуки в ряд не
   помещались, «Документы» уезжали на второй ряд и тянулись на 131px.
   Ставим их сеткой в три равные колонки — переносов больше нет. Длинное
   описание площадки на телефоне убрано: то же самое написано в баннере
   на первом экране, а ИП и год остаются. */
@media (max-width:768px){
  .ftr{margin-top:24px}
  .ftr__in{padding:16px 14px 20px;gap:11px}
  /* колонки по содержимому: «Соцсети» и «Поддержка» короткие, а «Документам»
     достаётся остаток — длинная «Политика конфиденциальности» ложится в две
     строки вместо трёх, и весь подвал становится ниже */
  .ftr__nav{order:2;display:grid;grid-template-columns:minmax(0,max-content) minmax(0,max-content) minmax(0,1fr);
    gap:12px;width:100%}
  .ftr__col h4{font-size:12.5px;margin:0 0 6px}
  .ftr__col a{font-size:12px;margin-bottom:5px;line-height:1.35}
  .ftr__brand .logo--sm .logo__text{font-size:16px}
  .ftr__brand p{order:3;font-size:11.5px;line-height:1.4}
  .ftr__brand p:first-of-type{display:none}
  .ftr__brand p+p{margin-top:0}
}