/* =========================================================================
   Ипотечка · Анализатор PF — палитра «доверие + премиум» как на основном
   сайте: порцелан, глубокий navy, синий акцент, трастовый зелёный.
   ========================================================================= */
:root{
  --bg:        #F4F6F8;
  --bg-2:      #FFFFFF;
  --bg-3:      #EAEEF2;
  --ink:       #15273E;
  --ink-2:     #0F1D30;
  --ink-soft:  #45566C;
  --muted:     #7B8798;
  --acc:       #1456F0;
  --acc-2:     #4D82F8;
  --acc-deep:  #0D3FCC;
  --acc-tint:  #EDF3FE;
  --green:     #1F8B5C;
  --green-tint:#E8F4EE;
  --red:       #B54334;
  --red-tint:  #FBEFEC;
  --amber:     #B7791F;
  --amber-tint:#FBF3E4;
  --line:      rgba(21,39,62,.11);
  --line-soft: rgba(21,39,62,.06);
  --shadow:    0 30px 70px -34px rgba(15,29,48,.32);
  --shadow-sm: 0 12px 34px -18px rgba(15,29,48,.22);
  --radius:    20px;
  --radius-sm: 14px;
  --maxw:      960px;
  --font: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0 }
[hidden]{ display:none !important }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column;
}
main{ flex:1 }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px }
a{ color:var(--acc-deep) }
b{ font-weight:700 }
button{ font-family:inherit }

/* ---------- шапка ---------- */
.top{ background:var(--bg-2); border-bottom:1px solid var(--line-soft) }
.top-in{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px }
.brand{ font-weight:800; font-size:19px; color:var(--ink); text-decoration:none; letter-spacing:-.02em }
.brand span{ color:var(--acc); font-weight:700 }
.top-link{ font-size:14px; color:var(--ink-soft); text-decoration:none }
.top-link:hover{ color:var(--acc-deep) }

/* ---------- герой / форма ---------- */
.hero{ padding:64px 0 40px; text-align:center }
.hero h1{ font-size:clamp(28px, 5vw, 44px); line-height:1.15; font-weight:800; letter-spacing:-.03em }
.hero-sub{ max-width:640px; margin:18px auto 0; color:var(--ink-soft) }
.urlform{
  display:flex; gap:10px; max-width:680px; margin:28px auto 0;
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding:8px; box-shadow:var(--shadow-sm);
}
.urlform input{
  flex:1 1 120px; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:15.5px; padding:10px 12px; color:var(--ink);
}
.urlform input::placeholder{ color:var(--muted) }
.hero-hint{ margin-top:12px; font-size:13.5px; color:var(--muted) }

.btn{
  border:0; cursor:pointer; background:var(--acc); color:#fff; font-weight:700;
  font-size:15.5px; padding:12px 26px; border-radius:12px; transition:background .15s;
  white-space:nowrap;
}
.btn:hover{ background:var(--acc-deep) }
.btn:disabled{ opacity:.55; cursor:default }
.btn-ghost{ background:transparent; color:var(--acc-deep); border:1px solid var(--line) }
.btn-ghost:hover{ background:var(--acc-tint) }

/* ---------- состояния ---------- */
.state{ text-align:center; padding:56px 0 }
.state-txt{ margin:14px auto 18px; max-width:520px; color:var(--ink-soft) }
.state-err .state-ico{ font-size:34px }
.spinner{
  width:38px; height:38px; margin:0 auto; border-radius:50%;
  border:3px solid var(--bg-3); border-top-color:var(--acc);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ---------- карточки ---------- */
.card{
  background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:26px 28px; margin-bottom:18px;
}
.card-cap{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--muted); margin-bottom:16px;
}
.note{ border-left:4px solid var(--amber); background:var(--amber-tint); color:var(--ink) }

/* ---------- объект ---------- */
.obj{ display:grid; grid-template-columns: 42% 1fr; gap:24px; padding:18px; overflow:hidden }
.obj-media img#oPhoto{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-sm);
  background:var(--bg-3); display:block;
}
.obj-nophoto{
  aspect-ratio:4/3; border-radius:var(--radius-sm); background:var(--bg-3);
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px;
}
.obj-thumbs{ display:flex; gap:6px; margin-top:6px; overflow-x:auto; scrollbar-width:none }
.obj-thumbs::-webkit-scrollbar{ display:none }
.obj-thumbs img{
  width:64px; height:48px; object-fit:cover; border-radius:8px; cursor:pointer;
  border:2px solid transparent; flex:0 0 auto;
}
.obj-thumbs img.on{ border-color:var(--acc) }
.obj-body{ padding:8px 8px 8px 0; min-width:0 }
.obj-price{ font-size:26px; font-weight:800; letter-spacing:-.02em }
.obj-price-sub{ display:block; font-size:14px; color:var(--muted); font-weight:500 }
.obj h2{ font-size:17px; font-weight:600; margin-top:10px; line-height:1.4 }
.obj-loc{
  display:block; margin-top:6px; font-size:14px; color:var(--ink-soft);
  text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.obj-loc:hover{ color:var(--acc-deep); text-decoration:underline }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px }
.chip{
  font-size:13px; padding:5px 11px; border-radius:999px; background:var(--bg-3);
  color:var(--ink-soft); white-space:nowrap;
}
.obj-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.badge-dld{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  color:var(--green); background:var(--green-tint); border-radius:999px; padding:6px 12px;
  text-decoration:none;
}
.badge-dld:hover{ text-decoration:underline }
.obj-meta{ margin-top:12px; font-size:13px; color:var(--muted); line-height:1.7 }
.obj-meta a{ color:var(--muted) }

/* ---------- вердикт ---------- */
.verdict-head{ display:flex; align-items:center; gap:18px }
.grade{
  min-width:86px; height:86px; border-radius:18px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-weight:800; color:#fff;
  background:var(--acc-deep); line-height:1.1; padding:0 10px;
}
.grade .g{ font-size:28px }
.grade .s{ font-size:12px; opacity:.85; font-weight:600 }
.grade.gb{ background:var(--amber) }
.grade.gc{ background:var(--red) }
.verdict-title{ font-size:22px; font-weight:800; letter-spacing:-.02em }
.verdict-sub{ font-size:13.5px; color:var(--muted); margin-top:4px }
.reasons{ display:grid; grid-template-columns:1fr 1fr; gap:8px 28px; margin-top:20px }
.reasons ul{ list-style:none }
.reasons li{ position:relative; padding:5px 0 5px 26px; font-size:14.5px; color:var(--ink-soft) }
.reasons li::before{ position:absolute; left:0; top:5px; font-weight:800 }
.reasons .pos li::before{ content:"✓"; color:var(--green) }
.reasons .neg li::before{ content:"—"; color:var(--red) }

/* ---------- вход в сделку ---------- */
.entry-hero{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center;
  background:var(--acc-tint); border-radius:var(--radius-sm); padding:20px 22px; margin-bottom:16px;
}
.entry-lbl{ font-size:14px; color:var(--ink-soft) }
.entry-big{ font-size:clamp(26px, 4.4vw, 36px); font-weight:800; letter-spacing:-.02em; color:var(--acc-deep) }
.entry-rub{ font-size:15px; color:var(--ink-soft); margin-top:2px }
.entry-slider label{ display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--ink-soft); font-weight:600 }
.pctbox{
  display:inline-flex; align-items:center; gap:2px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:10px; padding:4px 10px; font-weight:700; color:var(--ink);
}
.pctbox input{ width:44px; border:0; outline:0; font:inherit; font-weight:700; text-align:right; background:transparent }
.entry-slider input[type=range]{ width:100%; margin-top:12px; accent-color:var(--acc) }
.hint{ font-size:12.5px; color:var(--muted); margin-top:6px; font-weight:400 }

/* ---------- строки-показатели ---------- */
.rows > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:11px 2px; border-bottom:1px solid var(--line-soft); font-size:15px;
}
.rows > div:last-child{ border-bottom:0 }
.rows span{ color:var(--ink-soft) }
.rows b{ white-space:nowrap }
.rows i{ font-style:normal; font-size:14.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap }
.rows .good b{ color:var(--green) }
.rows .bad b{ color:var(--red) }
.rows-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-top:8px; padding:14px 16px; background:var(--bg-3); border-radius:var(--radius-sm);
  font-size:16px; font-weight:700;
}
.rows-total i{ font-style:normal; font-size:15px; color:var(--ink-soft); font-weight:700 }

/* ---------- поля ---------- */
.grid3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:14px }
.fld{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--ink-soft) }
.fld input{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit;
  font-size:15px; color:var(--ink); background:var(--bg-2); outline:0; width:100%;
}
.fld input:focus{ border-color:var(--acc-2) }

/* ---------- прочее ---------- */
.disclaimer{ font-size:12.5px; color:var(--muted); line-height:1.65; margin:6px 4px 26px }
.again{ text-align:center; margin-bottom:48px }
.foot{ background:var(--ink); color:#B9C4D4; font-size:13.5px; padding:26px 0; margin-top:20px }
.foot a{ color:#fff }

/* ---------- новые блоки отчёта ---------- */
.btn-sm{ padding:8px 14px; font-size:13.5px; border-radius:10px }
.obj-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.linklike{ background:none; border:0; padding:0; color:var(--acc-deep); cursor:pointer; font:inherit; text-decoration:underline }

.card.warn{
  border-left:4px solid var(--amber); background:var(--amber-tint);
  font-size:14.5px; padding:16px 20px;
}
.warn-inline{
  margin-top:12px; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--red-tint); color:var(--ink); font-size:14px; line-height:1.55;
}
.warn-inline.ok{ background:var(--bg-3) }
#costsWarn{ margin-top:0; margin-bottom:12px }

.lead-card{ border-left:4px solid var(--acc) }
.lead-main{ font-size:clamp(19px, 3vw, 24px); font-weight:800; letter-spacing:-.02em; line-height:1.3 }
.lead-sub{ margin-top:8px; font-size:13.5px; color:var(--muted) }

.kpi{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:18px }
.kpi-card{
  background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); padding:16px 18px;
}
.kpi-lbl{ font-size:12px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.08em }
.kpi-val{ font-size:clamp(18px, 2.4vw, 24px); font-weight:800; letter-spacing:-.02em; margin-top:8px; white-space:nowrap }
.kpi-val.pos{ color:var(--green) } .kpi-val.neg{ color:var(--red) }
.kpi-sub{ font-size:12px; color:var(--muted); margin-top:4px; line-height:1.45 }

.ltv-note{
  background:var(--acc-tint); border-radius:var(--radius-sm); padding:12px 14px;
  font-size:13.5px; color:var(--ink-soft); margin-bottom:14px; line-height:1.55;
}
.pctrow{ display:flex; align-items:center; gap:10px }
.pctrow input[type=range]{ flex:1; accent-color:var(--acc) }

.acc{ border:1px solid var(--line-soft); border-radius:var(--radius-sm); margin:10px 0; background:var(--bg-2) }
.acc summary{
  cursor:pointer; padding:12px 16px; font-weight:700; font-size:14px; color:var(--ink-soft);
  list-style:none; position:relative; user-select:none;
}
.acc summary::-webkit-details-marker{ display:none }
.acc summary::after{ content:"▾"; position:absolute; right:16px; transition:transform .15s; color:var(--muted) }
.acc[open] summary::after{ transform:rotate(180deg) }
.acc-body{ padding:4px 16px 14px }
.acc-text{ font-size:13.5px; color:var(--ink-soft); line-height:1.65 }

.comps-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px }
.cchip{
  font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px;
  background:var(--acc-tint); color:var(--acc-deep);
}
.cchip.conf-high{ background:var(--green-tint); color:var(--green) }
.cchip.conf-medium{ background:var(--amber-tint); color:var(--amber) }
.cchip.conf-low{ background:var(--red-tint); color:var(--red) }
.comps-list{ display:flex; flex-direction:column; gap:2px }
.comp-item{
  display:flex; align-items:baseline; gap:12px; padding:9px 6px; border-radius:8px;
  text-decoration:none; color:var(--ink); font-size:13.5px;
}
.comp-item:hover{ background:var(--bg-3) }
.comp-item .ci-t{ flex:1 1 40%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft) }
.comp-item .ci-m{ flex:0 1 auto; color:var(--muted); white-space:nowrap }
.comp-item b{ margin-left:auto; white-space:nowrap }

.rows-edit .row-edit{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 2px; border-bottom:1px solid var(--line-soft); font-size:14.5px;
}
.rows-edit .row-edit:last-child{ border-bottom:0 }
.row-edit > span:first-child{ color:var(--ink-soft); display:flex; flex-direction:column; gap:2px; min-width:0 }
.row-note{ font-style:normal; font-size:12px; color:var(--muted) }
.money-mini{ display:inline-flex; align-items:center; gap:6px; font-weight:700; white-space:nowrap }
.money-mini input{
  width:110px; text-align:right; border:1px solid var(--line); border-radius:8px;
  padding:7px 9px; font:inherit; font-weight:700; color:var(--ink); outline:0; background:var(--bg-2);
}
.money-mini input:focus{ border-color:var(--acc-2) }
.edit-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px }
.chip-warn{ background:var(--amber-tint); color:var(--amber); font-weight:600 }
.fld select{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit;
  font-size:15px; color:var(--ink); background:var(--bg-2); outline:0; width:100%;
}
.fld select:focus{ border-color:var(--acc-2) }

/* ---------- лайтбокс фото ---------- */
.lb{
  position:fixed; inset:0; z-index:1000; background:rgba(10,18,30,.93);
  display:flex; align-items:center; justify-content:center;
}
.lb img{
  max-width:92vw; max-height:88vh; border-radius:10px; object-fit:contain;
  box-shadow:0 20px 80px rgba(0,0,0,.5); user-select:none;
}
.lb-x{
  position:absolute; top:14px; right:18px; width:44px; height:44px; border-radius:50%;
  border:0; cursor:pointer; background:rgba(255,255,255,.12); color:#fff; font-size:26px; line-height:1;
}
.lb-x:hover{ background:rgba(255,255,255,.24) }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px;
  border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.12);
  color:#fff; font-size:32px; line-height:1; padding-bottom:4px;
}
.lb-nav:hover{ background:rgba(255,255,255,.24) }
.lb-prev{ left:16px } .lb-next{ right:16px }
.lb-n{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:13.5px; opacity:.8; letter-spacing:.06em;
}
.obj-media img#oPhoto{ cursor:zoom-in }

/* ---------- мобайл ---------- */
@media (max-width: 720px){
  .hero{ padding:40px 0 28px }
  .urlform{ flex-wrap:wrap }
  .urlform input{ flex:1 1 100% }
  .urlform .btn{ flex:1 1 100% }
  .obj{ grid-template-columns:1fr; gap:14px }
  .obj-body{ padding:0 6px 6px }
  .entry-hero{ grid-template-columns:1fr; gap:16px }
  .reasons{ grid-template-columns:1fr }
  .grid3{ grid-template-columns:1fr }
  .card{ padding:20px 18px }
  .rows > div{ flex-wrap:wrap }
  .kpi{ grid-template-columns:1fr 1fr }
  .comp-item{ flex-wrap:wrap }
  .comp-item b{ margin-left:0 }
  .row-edit{ flex-wrap:wrap }
  .obj-actions .btn-sm{ flex:1 1 auto }
  .lb-nav{ width:42px; height:42px; font-size:26px }
  .lb-prev{ left:8px } .lb-next{ right:8px }
  .lb img{ max-width:100vw; max-height:82vh; border-radius:0 }
}