/* ─────────────────────────────────────────────────────────────────────────
   Avito likvidnost — визуальный язык «прибор оценщика» (assay instrument).

   Бриф: рабочий инструмент риелтора Уфы. Одна работа экрана — сказать, недооценён
   ли лот и как быстро он продастся. Сознательно НЕ шаблонный «крем + сериф +
   терракот»: холодная грифельная подложка прибора с тонкой измерительной сеткой,
   ровно одна тёплая «золотая» линия (= золотая цена) и калиброванная шкала
   ликвидности red→amber→green (она кодирует данные — поэтому остаётся). Все ЧИСЛА
   набраны табличным моноширинным шрифтом: это прибор измерения, цифры — материал.

   Апгрейд (плотность приборной панели): текстура грифеля с насечками, диал со
   стрелкой и делениями, «золотая» панель измерения с допуском, спек-стрип метрик,
   дисциплинированные тени и фокус. Смелость — в одном месте (диал + золотая линия),
   всё вокруг тихо. Доступно: видимый фокус, mobile, prefers-reduced-motion.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* подложка и поверхности */
  --ground:#0E1219;          /* грифель: шапка/футер/герой */
  --ground-2:#161C27;        /* грифель светлее: карточки на тёмном */
  --paper:#F2F0EA;           /* рабочая поверхность (бумага оценщика) */
  --panel:#FFFFFF;
  --panel-2:#FBFAF7;

  /* чернила */
  --ink:#161A23;
  --ink-2:#3A4150;
  --soft:#6B7280;
  --line:#E1DCD2;
  --line-2:#EDEAE1;

  /* акцент: «золотая цена» — единственное тёплое пятно */
  --gold:#B8862B;
  --gold-bright:#D8A53E;
  --gold-soft:#F5ECD7;
  --gold-line:#E4D3A6;

  /* холодный служебный акцент (ссылки, фокус, насечки прибора) */
  --steel:#2B5673;
  --steel-soft:#E7EEF3;

  /* калиброванная шкала ликвидности (кодирует данные) */
  --low:#C0392B;
  --mid:#D89A2A;
  --high:#1F8A5B;

  --shadow:0 1px 1px rgba(14,18,25,.04), 0 12px 34px rgba(14,18,25,.08);
  --shadow-lg:0 2px 4px rgba(14,18,25,.06), 0 28px 70px rgba(14,18,25,.16);
  --radius:14px;

  --display:'Space Grotesk', system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--steel)}
.wrap{max-width:1200px; margin:0 auto; padding:30px 22px 96px}

/* числовой материал — везде моноширинно и табличными цифрами */
.num-mono, .score, .big-price, .block .bval, .dscore, .slider-row .sval,
.section .num, .ppm, table.tbl td.n, .spec .v, .gp-row .v{
  font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}

/* ── ГРИФЕЛЬ С НАСЕЧКАМИ: общая текстура приборных тёмных плашек ── */
.slate{
  position:relative; background:var(--ground); color:#EDEAE2; overflow:hidden;
}
.slate::before{ /* измерительная сетка-насечки */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:34px 100%, 100% 34px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25));
          mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25));
}
.slate > *{position:relative}

/* ── шапка: грифельная плашка с тонкой золотой линией снизу ── */
.nav{
  display:flex; align-items:center; gap:20px;
  background:var(--ground); color:#EDEAE2;
  padding:14px 22px; border-bottom:2px solid var(--gold);
}
.nav .inner{display:flex; align-items:center; gap:20px; max-width:1200px; width:100%; margin:0 auto}
.brand{font-family:var(--display); font-weight:700; font-size:18px;
  letter-spacing:-.01em; color:#fff; text-decoration:none; display:flex; flex-direction:column}
.brand small{font-weight:500; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-bright); margin-top:2px}
.nav .tabs{display:flex; gap:4px; margin-left:10px}
.nav .tabs button{font:inherit; font-size:13px; font-weight:500; color:#AEB4C0;
  background:none; border:none; padding:8px 13px; border-radius:8px; cursor:pointer;
  font-family:var(--display)}
.nav .tabs button:hover{color:#fff}
.nav .tabs button.active{background:rgba(255,255,255,.08); color:#fff; font-weight:600}
.nav .right{margin-left:auto; display:flex; align-items:center; gap:12px}
@media(max-width:560px){
  .nav .inner{flex-wrap:wrap; gap:10px}
  .nav .tabs{margin-left:0}
  .nav .right{margin-left:auto}
  .brand small{display:none}
}
.userchip{display:flex; align-items:center; gap:8px; font-size:13px; color:#EDEAE2}
.userchip img{width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid var(--gold)}

/* ── ГЕРОЙ простого режима: грифельная панель прибора ── */
.hero{
  border-radius:18px; padding:34px 32px 30px; margin-bottom:28px;
  box-shadow:var(--shadow-lg); border:1px solid #20283500;
}
.hero .eyebrow{color:var(--gold-bright)}
.hero h1{color:#fff; max-width:20ch}
.hero .lede{color:#C3C9D4; max-width:64ch}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:22px;
  padding-top:20px; border-top:1px solid rgba(255,255,255,.1)}
.hero-stat{display:flex; flex-direction:column; gap:3px}
.hero-stat .v{font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:23px; font-weight:600; color:#fff; line-height:1}
.hero-stat .v small{font-size:13px; color:var(--gold-bright); font-weight:500}
.hero-stat .k{font-size:11.5px; color:#9098A6; letter-spacing:.02em}

/* ── заголовки секции страницы ── */
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); font-weight:600; display:inline-block}
h1{font-family:var(--display); font-weight:700; font-size:33px;
  margin:9px 0 11px; letter-spacing:-.02em; line-height:1.08; max-width:18ch}
.lede{color:var(--ink-2); max-width:62ch; font-size:14.5px}

.grid{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:start}
@media(max-width:920px){ .grid{grid-template-columns:1fr} }

.card{background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow)}

/* строка-ярлык над формой: «это карточка лота» */
.card-label{display:flex; align-items:center; gap:9px; padding:13px 20px;
  border-bottom:1px solid var(--line-2); background:var(--panel-2);
  border-radius:var(--radius) var(--radius) 0 0}
.card-label .tick{width:9px; height:9px; border-radius:2px; background:var(--gold)}
.card-label b{font-family:var(--display); font-size:13px; font-weight:600}
.card-label span{margin-left:auto; font-family:var(--mono); font-size:11px;
  color:var(--soft); letter-spacing:.04em}

/* нумерация секций формы — РЕАЛЬНАЯ последовательность ввода (01..06),
   рядом доля веса блока: число несёт смысл, а не украшает */
.section{border-bottom:1px solid var(--line-2); padding:18px 20px}
.section:last-child{border-bottom:none}
.section > .head{display:flex; align-items:baseline; gap:11px; margin-bottom:14px}
.section .num{font-weight:600; font-size:12px; color:var(--gold);
  letter-spacing:.04em; padding-top:1px}
.section h2{font-family:var(--display); font-size:15px; font-weight:600; margin:0}
.section .wt{margin-left:auto; font-size:11px; color:var(--soft); font-family:var(--mono);
  border:1px solid var(--line); padding:2px 8px; border-radius:6px; letter-spacing:.02em}

.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:520px){ .row{grid-template-columns:1fr} }
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
@media(max-width:520px){ .row3{grid-template-columns:1fr} }
.field{margin-bottom:12px}
.field:last-child{margin-bottom:0}
label.lbl{display:block; font-size:12px; color:var(--soft); margin-bottom:5px; font-weight:500;
  letter-spacing:.01em}
select,input[type=number],input[type=text],textarea{
  width:100%; padding:9px 11px; font:inherit; font-size:14px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:9px; appearance:none;
  transition:border-color .15s, box-shadow .15s;
}
input[type=number],input[type=text]{font-family:var(--mono); font-variant-numeric:tabular-nums}
textarea{font-family:var(--body); min-height:74px; resize:vertical; line-height:1.45}
select:hover,input:hover,textarea:hover{border-color:#CFC8BB}
select:focus,input:focus,textarea:focus{outline:2px solid var(--steel); outline-offset:-1px;
  border-color:var(--steel); box-shadow:0 0 0 4px var(--steel-soft)}
select{font-family:var(--body);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:30px}
.hint{font-size:11.5px; color:var(--soft); margin-top:7px; line-height:1.45}

.btn{font:inherit; font-size:14px; font-weight:600; cursor:pointer; border-radius:9px;
  padding:10px 17px; border:1px solid var(--ink); background:var(--ink); color:#fff;
  font-family:var(--display); letter-spacing:.01em; transition:transform .08s, background .15s, border-color .15s}
.btn:hover{background:#000; border-color:#000}
.btn:active{transform:translateY(1px)}
.btn.gold{background:var(--gold); border-color:var(--gold); color:#1a1206}
.btn.gold:hover{background:var(--gold-bright); border-color:var(--gold-bright)}
.btn.ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--panel-2); border-color:var(--ink-2)}
.btn.sm{padding:6px 12px; font-size:13px}
.btn:disabled{opacity:.45; cursor:default}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:16px 20px;
  border-top:1px solid var(--line-2)}

/* ── ДИАЛ ЛИКВИДНОСТИ: прибор с делениями и стрелкой (signature) ── */
.result{position:sticky; top:22px}
@media(max-width:920px){ .result{position:static} }
.gaugewrap{padding:26px 22px 10px; text-align:center; position:relative}
.gauge{position:relative; width:252px; max-width:100%; margin:0 auto}
.gauge .ticks line{stroke:var(--line); stroke-width:1.4}
.gauge .ticks line.major{stroke:var(--ink-2); stroke-width:1.8}
.gauge #needle{transition:transform .55s cubic-bezier(.34,1.4,.5,1); transform-origin:100px 110px}
.gauge .hub{fill:var(--ink)}
.score{font-weight:700; line-height:1; font-size:60px; margin-top:-54px; color:var(--ink)}
.score small{font-size:20px; color:var(--soft); font-weight:500; font-family:var(--body)}
.verdict{font-family:var(--display); font-weight:600; font-size:17px; margin-top:8px}
.verdict-sub{color:var(--soft); font-size:13px; margin-top:3px; padding:0 10px}

/* шкала ликвидности — подпись делений (что значит цифра) */
.scale-legend{display:flex; justify-content:space-between; max-width:252px; margin:8px auto 0;
  font-family:var(--mono); font-size:10px; color:var(--soft); letter-spacing:.04em}

.blocks{padding:8px 22px 18px}
.blocks-cap{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--soft); padding:2px 0 2px}
.block{display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--line-2)}
.block .bname{width:132px; flex:none; font-size:13px; color:var(--ink-2)}
.bar{flex:1; height:8px; background:var(--line-2); border-radius:6px; overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(14,18,25,.05)}
.bar > i{display:block; height:100%; border-radius:6px; transition:width .55s ease, background .55s}
.block .bval{width:34px; text-align:right; font-weight:600; font-size:13px}

/* ── золотая цена: «измерение с допуском» — единственное тёплое пятно ── */
.panel-gold{margin:0; padding:18px 22px 20px; background:var(--gold-soft);
  border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); position:relative}
.panel-gold::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold)}
.panel-gold h3{font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); margin:0 0 8px}
.big-price{font-weight:700; font-size:30px; line-height:1.05; color:var(--ink)}
.big-price small{font-size:13px; color:var(--gold); font-weight:500}
.tolerance{margin-top:12px}
.tolerance .track{position:relative; height:7px; background:#E8DCBE; border-radius:6px}
.tolerance .band{position:absolute; height:100%; background:var(--gold); opacity:.4; border-radius:6px}
.tolerance .mark{position:absolute; top:-5px; width:2px; height:17px; background:var(--ink);
  transition:left .5s ease}
.tolerance .mark::after{content:"лот"; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:9px; color:var(--ink)}
.tolerance .labels{display:flex; justify-content:space-between; margin-top:9px;
  font-family:var(--mono); font-size:10.5px; color:var(--soft)}

.panel-x{padding:16px 22px; border-top:1px solid var(--line)}
.panel-x h3{font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel); margin:0 0 9px}
.pverdict{font-size:14px; line-height:1.55}
.pverdict b{font-family:var(--display)}
.tip{display:flex; gap:9px; font-size:13.5px; line-height:1.45; padding:8px 0; border-top:1px solid var(--line-2)}
.tip:first-of-type{border-top:none}
.tip .dot{flex:none; width:6px; height:6px; border-radius:50%; background:var(--gold); margin-top:7px}

.foot{margin-top:24px; font-size:12px; color:var(--soft); line-height:1.6;
  border-top:1px dashed var(--line); padding-top:16px}
.foot b{color:var(--ink-2); font-weight:600}

/* ── «как считаем»: три приборных тезиса под простым режимом ── */
.how{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px}
@media(max-width:760px){ .how{grid-template-columns:1fr} }
.how-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 20px 22px; box-shadow:var(--shadow)}
.how-card .tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); display:block; margin-bottom:9px}
.how-card h4{font-family:var(--display); font-size:16px; margin:0 0 7px}
.how-card p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.55}

/* ── кабинет ── */
.slider-row{display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--line-2)}
.slider-row:first-child{border-top:none}
.slider-row .sname{width:140px; flex:none; font-size:13.5px; color:var(--ink-2)}
.slider-row input[type=range]{flex:1; accent-color:var(--steel)}
.slider-row .sval{width:46px; text-align:right; font-weight:600; font-size:13px}
.deal-item{display:grid; grid-template-columns:1fr auto; gap:8px; padding:13px 0; border-top:1px solid var(--line-2)}
.deal-item:first-child{border-top:none}
.deal-item .dscore{font-weight:700; color:var(--high); font-size:19px; align-self:center}
.locked{text-align:center; padding:44px 22px; color:var(--soft)}
.muted{color:var(--soft); font-size:13px}
.hidden{display:none !important}
.notice{background:var(--gold-soft); color:#7a5410; border:1px solid var(--gold-line); border-radius:10px;
  padding:11px 13px; font-size:13.5px; line-height:1.45; margin:14px 0}
.pager{display:flex; align-items:center; gap:12px; padding:12px 0 0; font-size:13px; color:var(--soft)}
.pager .grow{flex:1}
table.tbl{width:100%; border-collapse:collapse; font-size:13px}
table.tbl th,table.tbl td{text-align:left; padding:7px 8px; border-bottom:1px solid var(--line-2)}
table.tbl td.n{text-align:right}
table.tbl th{font-family:var(--mono); color:var(--soft); font-weight:600; font-size:11px;
  letter-spacing:.04em; text-transform:uppercase}

/* демо-баннер: когда движок работает на витрине без ключей и БД */
.demo-banner{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--ground-2); color:#D7DCE4; border:1px solid #28303E; border-left:3px solid var(--gold);
  border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:18px}
.demo-banner b{color:#fff; font-family:var(--display)}
.demo-banner .pill{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold-bright); border:1px solid #3a4456; border-radius:20px; padding:2px 9px}
.demo-banner button{margin-left:auto; background:none; border:1px solid #3a4456; color:#D7DCE4;
  font:inherit; font-size:12px; padding:5px 11px; border-radius:8px; cursor:pointer; font-family:var(--display)}
.demo-banner button:hover{border-color:var(--gold); color:#fff}

/* доступность: видимый фокус и уважение к reduce-motion */
:focus-visible{outline:2px solid var(--steel); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}