/* app.css — маркетплейс si-pro.ru (этап 1 «Скелет»).
   Палитра и кнопки — от лендинга «Инсталлер Гермес» (landing.css), тёмная тема.
   Мобильная вёрстка первична (база 360px, расширения в @media). Без внешних CDN. */

:root{
  color-scheme:dark;
  --bg:#141312; --surface:#1D1B19; --surface-2:#232120;
  --ink:#F1ECE4; --ink-2:#A39A8E; --ink-3:#8F897F;
  --line:rgba(241,236,228,.12);
  --accent:#D97757; --accent-hover:#E68C6C; --accent-ink:#17130F; --accent-tint:#2E211C;
  --ok:#8FBF7B; --err:#E06C5F;
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:24px; --r-pill:999px;
  --shadow-soft:0 10px 24px rgba(0,0,0,.38);
  --inset-line:inset 0 0 0 1px var(--line);
  --font:"Onest","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --fs-h1:clamp(30px,5vw,52px); --fs-h2:clamp(22px,2.6vw,32px);
  --fs-h3:18px; --fs-body:16px; --fs-small:13.5px;
  --lh-body:1.6;
  --sp-1:6px; --sp-2:12px; --sp-3:20px; --sp-4:32px; --sp-5:48px;
  --head-h:56px;
  --max:1100px;
  --t-fast:140ms; --ease:cubic-bezier(.2,.7,.3,1);
}
@media (min-width:980px){ :root{--head-h:64px} }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:var(--fs-body)/var(--lh-body) var(--font);
  overflow-x:clip;min-height:100vh;display:flex;flex-direction:column}
h1{font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.02em;font-weight:600;margin:0 0 var(--sp-3)}
h2{font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.015em;font-weight:600;margin:0 0 var(--sp-2)}
h3{font-size:var(--fs-h3);line-height:1.3;font-weight:600;margin:0 0 var(--sp-1)}
p{margin:0 0 var(--sp-2)}
ul{margin:0;padding:0}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
img{vertical-align:middle}
h1 .accent{color:var(--accent)}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--sp-3)}
.section{padding:var(--sp-5) var(--sp-3)}
.page{flex:1 0 auto}
.muted{color:var(--ink-2)}
.small{font-size:var(--fs-small)}
.num{font-family:var(--mono);font-feature-settings:"tnum" 1}
.lead{font-size:17px;color:var(--ink-2);max-width:46em}
.crumbs{font-size:var(--fs-small);color:var(--ink-2)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--ink)}

/* — шапка — */
.site-head{position:sticky;top:0;z-index:20;height:var(--head-h);
  background:rgba(20,19,18,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.site-head-in{height:var(--head-h);display:flex;align-items:center;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);
  text-decoration:none;font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.brand__dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.brand small{display:block;font-size:11px;color:var(--ink-2);font-weight:500;letter-spacing:.02em;
  margin-top:-3px}
.head-nav{display:none;margin:0 auto;gap:24px}
.head-nav a{font-size:15px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.head-nav a:hover{color:var(--ink)}
@media (min-width:980px){ .head-nav{display:flex} }
.head-actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
@media (max-width:639.98px){ .head-actions .btn--head{display:none} }

/* — кнопки — */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;
  padding:0 var(--sp-4);border:0;border-radius:var(--r-pill);text-decoration:none;
  font:600 var(--fs-body)/1 var(--font);cursor:pointer;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn--primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-soft)}
.btn--primary:hover{background:var(--accent-hover)}
.btn--primary:active{transform:translateY(1px)}
.btn--cream{background:#F6F2E9;color:#17130F}
.btn--cream:hover{background:#fff}
.btn--cream:disabled{background:#4A453F;color:#ABA199;cursor:not-allowed;box-shadow:none}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:var(--inset-line)}
.btn--ghost:hover{background:var(--surface-2)}
.btn--block{width:100%}
.btn--head{min-height:40px;padding:0 var(--sp-3);font-size:15px;box-shadow:none}

.link-quiet{display:inline-flex;align-items:center;font-size:15px;color:var(--ink);
  text-decoration:none;padding:6px 2px}
.link-quiet:hover{text-decoration:underline}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin:var(--sp-3) 0}
.fact{font-size:var(--fs-small);color:var(--ink-2);max-width:26em}

/* — первый экран — */
.hero{padding:clamp(40px,7vw,88px) var(--sp-3);position:relative}
.hero--narrow{padding:clamp(36px,6vw,72px) var(--sp-3)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(620px 380px at 14% -10%, rgba(217,119,87,.20), transparent 70%),
             radial-gradient(480px 320px at 88% 4%, rgba(185,88,58,.14), transparent 70%)}
.tag{display:inline-block;font-family:var(--mono);font-size:13px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px;margin:0 0 var(--sp-3)}
.start-actions{display:grid;grid-template-columns:1fr;gap:var(--sp-2);max-width:26em}
@media (min-width:720px){ .start-actions{grid-template-columns:1fr 1fr;max-width:none} }

/* — карточки каталога — */
.grid{display:grid;gap:var(--sp-2)}
.cards{grid-template-columns:1fr}
@media (min-width:640px){ .cards{grid-template-columns:repeat(2,1fr);gap:var(--sp-3)} }
@media (min-width:980px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{display:flex;flex-direction:column;gap:var(--sp-1);
  background:var(--surface);border-radius:var(--r-m);box-shadow:var(--inset-line);
  padding:var(--sp-3);text-decoration:none;color:var(--ink);min-height:0}
a.card:hover{background:var(--surface-2)}
.card h3{margin:0}
.card__desc{font-size:var(--fs-small);min-height:3em}
.card__meta{display:flex;align-items:baseline;gap:var(--sp-2);margin:var(--sp-1) 0 0}
.price{font-family:var(--mono);font-size:16px}
.card--static{color:inherit}
.card--static:hover{background:var(--surface)}
.ok{color:var(--ok);font-size:var(--fs-small)}

.chip{display:inline-block;align-self:flex-start;font-family:var(--mono);font-size:12px;
  color:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:4px 10px;margin-bottom:var(--sp-1)}

/* — плита продукта — */
.plate{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--inset-line);
  padding:var(--sp-4)}
.product-plate{margin:var(--sp-3) 0}
.md{max-width:46em}
.md h2{margin-top:var(--sp-4)}
.md ul,.md ol{margin:0 0 var(--sp-2);padding-left:1.2em}
.md li{margin-bottom:4px}
.md code{font-family:var(--mono);font-size:.92em;background:var(--surface-2);
  border-radius:6px;padding:1px 6px}

/* — формы — */
.form{max-width:26em;display:flex;flex-direction:column;gap:var(--sp-2)}
.field span{display:block;font-size:var(--fs-small);color:var(--ink-2);margin-bottom:6px}
.field input,.field select{width:100%;min-height:50px;box-sizing:border-box;
  background:var(--surface-2);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-s);padding:0 var(--sp-2);font:var(--fs-body)/1 var(--font)}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);color:var(--ink-2)}
.check input{margin-top:2px}
.notice{background:var(--accent-tint);border-radius:var(--r-s);padding:var(--sp-2) var(--sp-3);
  margin:var(--sp-3) 0;max-width:32em}
.notice--err{background:#2E1D19}
.notice p{color:var(--ink)}
.auth-page{max-width:640px}
.tabs{display:flex;gap:var(--sp-2);margin:var(--sp-3) 0 var(--sp-2)}
.tabs__tab{padding:9px 16px;border-radius:var(--r-s);text-decoration:none;color:var(--ink-2);
  font-size:15px;box-shadow:var(--inset-line)}
.tabs__tab:hover{color:var(--ink);background:var(--surface-2)}
.tabs__tab--on{color:var(--accent-ink);background:var(--accent)}
.auth-panel{padding:var(--sp-3);margin-top:var(--sp-2)}

/* — OAuth-кнопки — */
.oauth{margin:var(--sp-4) 0}
.oauth__btns{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* — ЛК — */
.lk{display:grid;grid-template-columns:1fr;gap:var(--sp-3);align-items:start;
  padding-top:var(--sp-4)}
@media (min-width:860px){ .lk{grid-template-columns:200px 1fr;gap:var(--sp-4)} }
.lk-nav{display:flex;flex-wrap:wrap;gap:4px;position:sticky}
@media (min-width:860px){ .lk-nav{flex-direction:column;position:sticky;top:calc(var(--head-h) + 12px)} }
.lk-nav a{display:block;padding:9px 12px;border-radius:var(--r-s);color:var(--ink-2);
  text-decoration:none;font-size:15px}
.lk-nav a:hover{color:var(--ink);background:var(--surface)}
.lk-nav a.is-active{color:var(--ink);background:var(--surface-2);box-shadow:var(--inset-line)}
.lk-cards{grid-template-columns:1fr;gap:var(--sp-3)}
@media (min-width:720px){ .lk-cards{grid-template-columns:repeat(2,1fr)} }
.lk-card{display:flex;flex-direction:column;gap:var(--sp-1)}
.lk-card__num{font-family:var(--mono);font-size:clamp(24px,4vw,38px);margin:0}
.lk-card--balance{max-width:22em}
.mini-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin:var(--sp-1) 0}
.mini-list li{font-size:15px}
.topup-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-2) 0}

/* — таблицы — */
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th{text-align:left;color:var(--ink-2);font-weight:500;font-size:var(--fs-small);
  padding:8px 10px;border-bottom:1px solid var(--line)}
.table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.table tr:last-child td{border-bottom:0}
@media (max-width:719.98px){
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* — бриф — */
.brief-plate{margin-bottom:var(--sp-3)}
.qa{margin:0;display:grid;grid-template-columns:1fr;gap:6px}
@media (min-width:640px){ .qa{grid-template-columns:minmax(12em,22em) 1fr} }
.qa dt{color:var(--ink-2);font-size:var(--fs-small);padding-top:2px}
.qa dd{margin:0}
.identity-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:var(--sp-2) 0}

/* — подвал — */
.site-foot{border-top:1px solid var(--line);margin-top:var(--sp-5);
  padding:var(--sp-4) var(--sp-3);flex-shrink:0}
.site-foot p{margin-bottom:6px;font-size:15px;max-width:none}
.site-foot a{color:var(--ink-2);text-decoration:underline}
.site-foot a:hover{color:var(--ink)}

/* ============================================================
   Каталог (миссия каталог-20261022): market-top, market-body,
   cat-nav, market-sort, tiles/tile, empty.
   Классы только с префиксами market-/cat-/tile и нейтральный .empty.
   Палитра и --accent не меняются.
   ============================================================ */
.market{padding-top:var(--sp-4)}
.market-top{max-width:760px;margin-bottom:var(--sp-3)}
.market-top h1{font-size:clamp(24px,3.4vw,34px);margin:0 0 var(--sp-1)}
.market-top__sub{font-size:15px;color:var(--ink-2);margin:0 0 var(--sp-2)}
.market-search{display:flex;align-items:center;gap:8px;max-width:30em;margin:0 0 8px}
.market-search input{flex:1 1 auto;width:100%;min-width:0;min-height:44px;box-sizing:border-box;
  background:var(--surface-2);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:0 16px;font:15px/1 var(--font)}
.market-search input:focus{outline:2px solid var(--accent);outline-offset:1px}
.market-search .btn{min-height:44px;padding:0 var(--sp-3);font-size:15px;flex:0 0 auto}
.market-top__facts{font-size:var(--fs-small);color:var(--ink-3);margin:2px 0 0}
.market-body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);
  align-items:start;padding:var(--sp-2) 0 var(--sp-4)}

/* — сайдбар категорий: до 980px горизонтальная лента чипов, от 980px липкая колонка — */
.cat-nav{min-width:0}
.cat-nav__title{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);margin:0 0 var(--sp-1)}
.cat-nav__list{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:2px}
.cat-nav__list::-webkit-scrollbar{display:none}
.cat-nav__item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:0 0 auto;
  padding:7px 12px;border-radius:var(--r-pill);color:var(--ink-2);text-decoration:none;
  font-size:14px;background:var(--surface);box-shadow:var(--inset-line)}
.cat-nav__item:hover{color:var(--ink)}
.cat-nav__item.is-active{color:var(--ink);background:var(--accent-tint);
  box-shadow:inset 0 0 0 1px var(--line)}
.cat-nav__count{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.cat-nav__item.is-active .cat-nav__count{color:var(--accent)}
@media (min-width:980px){
  .market-body{grid-template-columns:220px minmax(0,1fr);gap:var(--sp-4)}
  .cat-nav{position:sticky;top:calc(var(--head-h) + 16px)}
  .cat-nav__list{flex-direction:column;overflow:visible;gap:3px;align-items:stretch;padding:0}
  .cat-nav__item{width:100%;flex:none}
  .cat-nav__count{margin-left:auto}
}

/* — контент категории: заголовок, описание, сортировка — */
.market-content{min-width:0}
.market-content h2{font-size:clamp(19px,2.2vw,24px);margin:0 0 var(--sp-1)}
.market-content__desc{font-size:14px;color:var(--ink-2);margin:0 0 var(--sp-2)}
.market-sort{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:var(--fs-small);margin:0 0 var(--sp-2)}
.market-sort__label{color:var(--ink-3)}
.market-sort a{color:var(--ink-2);text-decoration:none;padding:4px 10px;
  border-radius:var(--r-pill);box-shadow:var(--inset-line)}
.market-sort a:hover{color:var(--ink)}
.market-sort a.is-active{color:var(--ink);background:var(--surface-2)}

/* — сетка плиток: 1 колонка до 719px, 2 — 720–1099px, 3 — от 1100px — */
.tiles{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch}
@media (min-width:720px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{display:flex;flex-direction:column;min-height:190px;
  background:var(--surface);border-radius:var(--r-m);box-shadow:var(--inset-line);
  padding:var(--sp-3);text-decoration:none;color:var(--ink);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.tile:hover{transform:translateY(-2px);
  box-shadow:var(--inset-line),0 12px 26px rgba(0,0,0,.45)}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile__head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:var(--sp-2)}
.tile__icon{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;border-radius:var(--r-s);
  background:var(--accent-tint);color:var(--accent)}
.tile__icon svg{width:24px;height:24px;display:block}
.tile__cat{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.tile__title{font-size:var(--fs-h3);margin:0 0 var(--sp-1)}
.tile__desc{font-size:var(--fs-small);color:var(--ink-2);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tile__foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-top:auto;padding-top:var(--sp-2)}
.tile__price{font-family:var(--mono);font-size:15px;white-space:nowrap}
.tile__ver{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap}

/* — пустой результат — */
.empty{background:var(--surface);border-radius:var(--r-m);box-shadow:var(--inset-line);
  padding:var(--sp-4);text-align:center;margin-top:var(--sp-2)}
.empty p{margin:0 0 var(--sp-2);color:var(--ink-2)}
.lk-nav__warn{font-size:var(--fs-small);color:var(--accent)}
.lk-nav__warn:hover{color:var(--accent-hover)}