/* Вид сайта. Цвета и шрифты взяты с imgbali.com — это её сайт и он ей нравится:
   чёрная основа (#000, панели #262626), светлые секции #F7F6F4 с чёрным текстом,
   серый #999 для второстепенного и фирменный зелёный градиентом
   #1F9938 → #2BD24D, которым там покрашен логотип.
   Шрифты оттуда же: Montserrat в тексте, Michroma в логотипе. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Michroma&display=swap');

:root{
  /* Зелёный снят с логотипа IMG ESTATE X: #34B454. Он же середина градиента,
     которым покрашен логотип на imgbali.com (#2BD24D → #1F9938). */
  --brand:#21a038; --brand-light:#2bd24d; --brand-dark:#1b8a2f; --brand-deep:#11702a;
  --brand-logo:#1b9a35;
  --brand-grad:linear-gradient(180deg,#2cb944 0%,#1b8a2f 100%);
  --brand-grad-deep:linear-gradient(180deg,#23a73a 0%,#17852b 100%);
  --brand-grad-soft:linear-gradient(180deg,#eef9f0 0%,#e4f4e8 100%);

  /* Светлая тема: та же светлая секция её сайта, но с зелёной нотой в подложках,
     чтобы бренд читался и днём. Второстепенный текст заметно темнее прежнего:
     серый #999 на белом даёт контраст 2,8 — его почти не видно. */
  /* Светлая тема в духе Сбера: страница — светло-серая, карточки белые
     и без рамок, держатся тенью; текст почти чёрный, зелёный — в кнопках,
     значках и акцентах, а не в заголовках. */
  --bg:#e6eaee; --bg-2:#cbd8d1; --surface:#fff; --surface-2:#eff2f6;
  --line:#d3d8de; --line-2:#b9c1c9;
  --tx:#121417; --tx-2:#3f4955; --tx-3:#566270;
  --accent:#1b8a2f; --accent-soft:#eaf7ec; --accent-line:#bfe6c7;
  --brand-logo:#1b9a35;
  --warn:#8a5a10; --warn-soft:#fbf3e3; --crit:#95292c; --crit-soft:#fbeded;
  --gold:#8a6d2f;
  --r:16px; --r-lg:22px; --r-sm:12px;
  --shadow:0 1px 2px rgba(10,26,15,.06), 0 10px 26px -20px rgba(10,26,15,.5);
  --shadow-lg:0 2px 8px rgba(10,26,15,.08), 0 26px 52px -30px rgba(10,26,15,.5);
  --serif:'Montserrat',-apple-system,Helvetica,Arial,sans-serif;
  --display:'Michroma','Montserrat',-apple-system,Helvetica,Arial,sans-serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
/* Тёмная тема — основной вид её сайта: чёрный фон, панели #262626. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000; --bg-2:#0a0a0a; --surface:#141414; --surface-2:#1c1c1c;
  --line:#262626; --line-2:#333;
  --tx:#fff; --tx-2:#999; --tx-3:#656565;
  --brand-grad-soft:linear-gradient(180deg,#12280f 0%,#0d1f0c 100%);
  --accent:#2bd24d; --accent-soft:#0f2614; --accent-line:#2a5c33; --brand-deep:#2bd24d;
  --warn:#d9a860; --warn-soft:#231c0f; --crit:#e08a8a; --crit-soft:#2b1616;
  --gold:#c9a961;
  --shadow:0 1px 2px rgba(0,0,0,.6); --shadow-lg:0 20px 48px -28px rgba(0,0,0,1);
}}
:root[data-theme="dark"]{
  --bg:#000; --bg-2:#0a0a0a; --surface:#141414; --surface-2:#1c1c1c;
  --line:#262626; --line-2:#333;
  --tx:#fff; --tx-2:#999; --tx-3:#656565;
  --brand-grad-soft:linear-gradient(180deg,#12280f 0%,#0d1f0c 100%);
  --accent:#2bd24d; --accent-soft:#0f2614; --accent-line:#2a5c33; --brand-deep:#2bd24d;
  --warn:#d9a860; --warn-soft:#231c0f; --crit:#e08a8a; --crit-soft:#2b1616;
  --gold:#c9a961;
  --shadow:0 1px 2px rgba(0,0,0,.6); --shadow-lg:0 20px 48px -28px rgba(0,0,0,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font:15.5px/1.6 var(--sans);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-underline-offset:2px}
img{max-width:100%}

.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
section.pad{padding:34px 0}
/* Каждая вторая секция — на подложке во всю ширину колонки: иначе лента
   карточек на одном фоне сливается в простыню. */
section.tint{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;margin:22px 0}
/* Заголовок секции с зелёной чертой — видно, где блок начинается. */
section.tint > h2,section.band > h2{position:relative;padding-left:14px}
section.tint > h2::before,section.band > h2::before{content:'';position:absolute;left:0;top:.18em;
  bottom:.18em;width:4px;border-radius:3px;background:var(--brand-grad)}
/* Блок с другим фоном и рамкой: секции не сливаются в одну простыню. */
.band{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;margin:20px 0}
:root:not([data-theme="dark"]) .band{background:var(--bg-2);border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 12px 30px -22px rgba(18,20,23,.45)}
section.pad.band{padding:28px 26px}
@media (max-width:640px){.band{padding:20px 16px;border-radius:var(--r)}}

header.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(18,20,23,.04), 0 6px 18px -14px rgba(18,20,23,.3)}
header.top .wrap{display:flex;align-items:center;gap:16px;height:60px;overflow:hidden}
/* Прокручиваются только разделы: язык, фон и почта остаются на месте,
   иначе в индонезийском подписи длиннее и правый край уезжает за экран. */
/* Разделы занимают всё свободное место и прокручиваются внутри себя.
   Без min-width их сжимало до нуля — на узком экране пропадали совсем. */
/* Полоса разделов занимает ровно столько, сколько нужно тексту, и ужимается
   только когда места нет: при flex:1 она делила свободное место с распоркой
   и обрезала «Профиль» и «Письма» даже на ноутбуке. */
header.top .hnav{display:flex;gap:16px;align-items:center;flex:0 0 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
header.top .hnav::-webkit-scrollbar{display:none}
header.top a,header.top .logo,header.top .chip,header.top select,header.top button{flex:none;white-space:nowrap}
/* Почта — самое длинное и наименее важное: при нехватке места её режет,
   а на узком экране прячет совсем. */
header.top .who{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header.top[data-tight] .who{display:none}
/* Тесно: сначала уступают почта, чип учебного режима и зазоры между разделами —
   и только если и этого мало, разделы уходят в меню. Очистка тестовых данных
   при этом не теряется: такая же кнопка стоит на главной. */
header.top[data-tight] #wipe{display:none}
header.top[data-tight] .hnav{gap:12px}
/* Предпоследняя уступка: подписи мельче и теснее. На ноутбуке это даёт
   ещё сотню точек и спасает строку от превращения в меню. */
header.top[data-dense] .hnav{gap:9px;font-size:13px}
header.top[data-dense] .hnav a{font-size:13px}
header.top[data-dense] .logo{font-size:15px;letter-spacing:.02em}
@media (max-width:900px){header.top .chip{display:none}}
/* На телефоне из правой группы остаётся самое нужное: язык и фон. */
@media (max-width:560px){header.top .btn.ghost.small{display:none}}

/* Разделы: на широком экране строкой, на узком — кнопкой с выпадающим списком. */
#menu{display:none}
/* display:grid перебивает атрибут hidden, и меню оставалось раскрытым
   на всю ширину под шапкой. Поэтому скрытие задано явно. */
.hmenu{position:absolute;top:58px;left:12px;right:12px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);
  padding:8px;display:grid;gap:2px;z-index:30}
.hmenu[hidden]{display:none}

.hmenu a{display:block;padding:11px 14px;border-radius:10px;text-decoration:none;
  color:var(--tx);font-size:15.5px}
.hmenu a:hover{background:var(--bg-2)}
.hmenu a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
/* Переключение «строка ↔ меню» решает не ширина экрана, а то, помещаются ли
   разделы на самом деле: в индонезийском подписи длиннее, и на той же ширине
   строка уже не влезает. Признак ставит скрипт, увидев обрезку. */
header.top{position:relative}
header.top[data-compact] .hnav{display:none}
header.top[data-compact] #menu{display:inline-flex}
header.top[data-compact] .who{display:none}
header.top:not([data-compact]) .hmenu{display:none}
/* Логотип — надпись IMG ESTATE X, как на её заставке. Шрифт Michroma:
   из доступных он ближе всего к оригиналу по построению букв — квадратный «G»,
   плоские окончания, широкие пропорции. Зелёный градиентом, потому что
   ровный #34B454 на белом даёт контраст 2,6 и надпись выцветает. */
.logo{display:inline-block;text-decoration:none;
  font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.02em;
  word-spacing:.02em;text-transform:uppercase;white-space:nowrap;
  color:var(--brand-logo)}
.logo:hover{filter:brightness(1.1)}
header.top a.small{text-decoration:none;color:var(--tx-2);padding:6px 2px;border-bottom:2px solid transparent}
header.top a.small:hover{color:var(--tx)}
.sp{flex:1}
.muted{color:var(--tx-2)}
.small{font-size:14.5px;line-height:1.55}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:9px;
  color:var(--brand-deep)}
/* Градиентная надпись — как на imgbali.com: заливка обрезается по буквам.
   Цвет задаётся до неё: если заливка не поддержана, текст не исчезнет. */
.grad{color:var(--brand-deep);background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

h1{font-family:var(--sans);font-weight:700;font-size:clamp(26px,4vw,40px);line-height:1.1;
  letter-spacing:-.02em;margin-bottom:12px;color:var(--tx)}
h2{font-family:var(--sans);font-weight:700;font-size:clamp(19px,2.4vw,26px);letter-spacing:-.015em;
  margin:0 0 12px;color:var(--tx)}
h3{font-weight:700;color:var(--tx)}
/* Второстепенный текст не должен быть «еле заметным»: он объясняет главное.
   Поэтому он крупнее обычного мелкого и чуть плотнее по начертанию. */
.muted{color:var(--tx-2)}
.small.muted,p.small{color:var(--tx-2);font-weight:450}
.card p.small{font-size:14.5px;line-height:1.6}
label.fl .hint{color:var(--tx-3);font-size:13.5px;line-height:1.5}
h3{font-size:16px;margin:0 0 8px;letter-spacing:-.01em}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;box-shadow:var(--shadow)}
/* Блоки должны читаться как блоки: видимая рамка, заметная тень и белая
   подложка поверх серой страницы. Без рамки карточки сливались с фоном. */
:root:not([data-theme="dark"]) .card{border-color:var(--line);
  box-shadow:0 2px 4px rgba(18,20,23,.07), 0 16px 34px -14px rgba(18,20,23,.42),
             0 34px 60px -30px rgba(18,20,23,.3)}
:root:not([data-theme="dark"]) a.card:hover,
:root:not([data-theme="dark"]) button.card:hover{border-color:var(--brand);
  box-shadow:0 3px 8px rgba(18,20,23,.09), 0 24px 44px -16px rgba(33,160,56,.4),
             0 40px 70px -32px rgba(18,20,23,.35)}
a.card,button.card{display:block;text-align:left;cursor:pointer;color:inherit;font:inherit;
  transition:transform .16s,border-color .16s,box-shadow .16s}
a.card:hover,button.card:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:var(--shadow-lg)}
/* Браузер красит текст кнопки своим цветом, и в тёмной теме заголовок внутри
   карточки-кнопки оставался чёрным. */
button.card h3,button.card b,a.card h3,a.card b{color:var(--tx)}
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(282px,1fr))}
/* Карточка-утверждение: зелёная черта сверху, чтобы блок читался отдельно. */
.adv .card{position:relative;overflow:hidden;border-left:1px solid var(--line)}
.adv .card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand-grad)}
.card h3{color:var(--tx)}
.card > h2{color:var(--tx)}
.row{display:flex;gap:11px;align-items:center;flex-wrap:wrap}

.btn{appearance:none;border:1px solid var(--line-2);background:var(--surface);color:var(--tx);
  border-radius:11px;padding:10px 17px;font:inherit;font-size:14.5px;font-weight:600;
  cursor:pointer;transition:.15s;line-height:1.2;text-decoration:none;display:inline-flex;
  align-items:center;gap:7px}
.btn:hover{border-color:var(--brand);color:var(--accent)}
.btn.main{background:var(--brand-grad-deep);border-color:var(--brand-dark);color:#fff;font-weight:600;
  box-shadow:0 2px 10px -4px rgba(31,153,56,.7)}
.btn.main:hover{filter:brightness(1.08);color:#fff;box-shadow:0 5px 16px -5px rgba(31,153,56,.85)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--tx-2)}
.btn.ghost:hover{background:var(--bg-2);color:var(--tx)}
.btn.small{padding:7px 12px;font-size:13.5px;border-radius:9px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.iconbtn{width:34px;height:34px;padding:0;justify-content:center;border-radius:10px}

label.fl{display:block;margin-bottom:16px}
label.fl > span{display:block;font-size:13px;font-weight:600;color:var(--tx-2);margin-bottom:6px}
label.fl .hint{display:block;font-size:13.5px;font-weight:400;color:var(--tx-3);margin-top:5px;line-height:1.5}
input,select,textarea{width:100%;font:inherit;font-size:14.5px;color:var(--tx);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;
  transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--accent-soft)}
textarea{min-height:92px;resize:vertical}
.grid2{display:grid;gap:0 18px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:4px 10px;
  border-radius:99px;border:1px solid var(--line);color:var(--tx-2);background:var(--surface-2);
  white-space:nowrap}
.chip.ok{color:var(--accent);border-color:var(--accent-line);background:var(--brand-grad-soft)}
.chip.warn{color:var(--warn);border-color:#e6cfa8;background:var(--warn-soft)}
.chip.crit{color:var(--crit);border-color:#e8c0c0;background:var(--crit-soft)}
.chip.gold{color:var(--gold);border-color:#dcc89a;background:#fbf6ea}

/* Кольца скоринга: объект зелёный градиентом, продавец золотой. Рядом и не сливаются. */
.score{display:flex;align-items:center;gap:9px}
.ring{--v:0;width:46px;height:46px;border-radius:50%;flex:none;
  background:conic-gradient(var(--brand-dark) 0deg,var(--brand) calc(var(--v)*3.6deg),var(--line) 0);
  display:grid;place-items:center;font-size:12.5px;font-weight:650}
.ring i{width:36px;height:36px;border-radius:50%;background:var(--surface);
  display:grid;place-items:center;font-style:normal;color:var(--tx)}
.ring.s2{background:conic-gradient(#6b5420 0deg,var(--gold) calc(var(--v)*3.6deg),var(--line) 0)}
.twoscore{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.twoscore .one{display:flex;align-items:center;gap:9px}
.twoscore em{font-style:normal;font-size:13.5px;font-weight:600;color:var(--tx);display:block;line-height:1.3}
.twoscore small{display:block;font-size:12.5px;color:var(--tx-2)}

.note{border:1px solid var(--line);border-left:3px solid var(--brand);background:var(--surface);
  border-radius:var(--r);padding:16px 19px;color:var(--tx-2);font-size:14.5px;line-height:1.6}
.note b{color:var(--tx)}
.note.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.note.crit{border-left-color:var(--crit);background:var(--crit-soft)}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--tx);
  color:var(--bg);padding:12px 20px;border-radius:12px;font-size:14.5px;z-index:60;
  box-shadow:var(--shadow-lg);max-width:90vw}

.pic{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface-2)}
.pics{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}
.files{display:grid;gap:9px}
.file{display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:var(--surface-2);
  border-radius:10px;padding:9px 12px;font-size:13.5px;min-width:0}
/* Имя файла бывает длинным: обрезаем его, а не ломаем им ряд. */
.file .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Нативная кнопка выбора файла в колонку не влезает — прячем её за своей. */
.pick{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--line-2);
  background:var(--surface);color:var(--tx);border-radius:9px;padding:7px 12px;font-size:13.5px;
  white-space:nowrap;transition:.15s}
.pick:hover{border-color:var(--brand);color:var(--accent)}
.pick input{display:none}
/* Документы идут одной колонкой: так видно имя файла целиком. */
.docgrid{display:grid;gap:0}
.docgrid label.fl{margin-bottom:12px}

.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:20px 0}
.tabs button{appearance:none;border:0;background:transparent;font:inherit;font-size:14.5px;font-weight:500;
  color:var(--tx-2);padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent}
.tabs button:hover{color:var(--tx)}
.tabs button[aria-current="page"]{color:var(--tx);font-weight:600;border-bottom-color:transparent;
  background:var(--brand-grad) bottom/100% 2px no-repeat}

table.data{width:100%;border-collapse:collapse;font-size:14.5px}
/* Широкая таблица на узком экране прокручивается сама, а не тянет страницу. */
@media (max-width:720px){
  table.data{display:block;overflow-x:auto;white-space:nowrap}
  table.data td,table.data th{white-space:normal;min-width:120px}
}
table.data th{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-2);
  font-weight:700;text-align:left;padding:0 10px 9px}
table.data td{padding:11px 10px;border-top:1px solid var(--line);vertical-align:top}
table.data tr:hover td{background:var(--surface-2)}

.empty{text-align:center;color:var(--tx-3);padding:46px 20px;border:1px dashed var(--line-2);
  border-radius:var(--r);background:var(--surface-2)}
.badge{font-size:12px;padding:3px 9px;border-radius:99px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--tx-2)}

/* Метки на карте: цена таблеткой, кластер — градиентом. */
.mpill{display:inline-block;background:var(--surface);color:var(--tx);border:1px solid var(--line-2);
  border-radius:99px;padding:4px 10px;font:650 12.5px/1.2 var(--sans);white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.2);transform:translate(-50%,-50%)}
.mpill.cl{background:var(--brand-grad-deep);color:#fff;border-color:var(--brand-dark)}
/* Вне выбранного круга метка не исчезает, а гаснет: видно, что рядом есть ещё. */
/* display у .chip перебивает атрибут hidden — как было с меню шапки. */
/* Поля по умолчанию во всю ширину — в шапке это растягивало выбор валюты
   на всё свободное место. Здесь селекты по содержимому. */
header.top select{width:auto;min-width:0;padding:5px 8px;font-size:13px}
.chip[hidden]{display:none}
/* Образец описания: свёрнут, пока не нужен, и не спорит с самим полем. */
.sample{margin-top:8px;border:1px dashed var(--line-2);border-radius:10px;padding:10px 12px;
  background:var(--bg-2)}
.sample summary{cursor:pointer;color:var(--accent);font-weight:600}
.sample p{margin:10px 0;color:var(--tx-2)}
/* Образцы кадров над выбором файла: показать, а не описывать словами. */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.shots figure{margin:0}
.shots img{height:120px;object-fit:cover;width:100%}
.shots figcaption{margin-top:6px}
@media (max-width:620px){ .shots{grid-template-columns:1fr 1fr} .shots figure:last-child{display:none} }
.mpill.off{color:var(--tx-3);box-shadow:none;font-weight:500}
/* Полоса цены: два ползунка на одном треке, над ними — сколько объектов стоит
   столько же. Столбики не украшение: по ним видно, где рынок, и человек тянет
   ручку туда, где что-то есть. */
.dual{position:relative;height:40px;margin:0}
.dual .track{position:absolute;left:0;right:0;top:17px;height:6px;border-radius:99px;background:var(--line-2)}
.dual .fill{position:absolute;top:17px;height:6px;border-radius:99px;background:var(--brand-grad-deep)}
.dual input[type="range"]{position:absolute;left:0;width:100%;top:7px;margin:0;height:26px;
  background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.dual input[type="range"]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;
  width:22px;height:22px;border-radius:50%;background:var(--surface);border:2px solid var(--brand-dark);
  box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer}
.dual input[type="range"]::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border-radius:50%;
  background:var(--surface);border:2px solid var(--brand-dark);box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer}
/* Силуэт рынка над ползунком: тонкие штрихи без зазоров и без линии снизу —
   он должен читаться как форма распределения, а не как набор кубиков. */
.hist{display:flex;align-items:flex-end;gap:1px;height:44px;margin:4px 0 0}
.hist i{flex:1;background:var(--line-2);border-radius:2px 2px 0 0;min-height:3px}
.hist i.on{background:var(--brand-dark);opacity:.9}
.areabar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 0}
.areabar input[type="range"]{flex:1;min-width:160px;accent-color:var(--brand-dark)}
/* Сравнение: полоса снизу, пока в ней что-то лежит. */
.cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);
  border-top:1px solid var(--line-2);box-shadow:0 -8px 24px rgba(0,0,0,.18)}
.cmpbar .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px}
.cmpbar[hidden]{display:none}
.cmpslot{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:10px;
  padding:6px 10px;font-size:13px;max-width:240px}
.cmpslot b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmpslot.empty{border-style:dashed;color:var(--tx-3)}
.cmptable{width:100%;border-collapse:collapse;font-size:14px}
.cmptable th,.cmptable td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left;
  vertical-align:top}
.cmptable thead th{position:sticky;top:0;background:var(--surface);z-index:1}
.cmptable tbody th{color:var(--tx-2);font-weight:500;width:34%}
/* Селект прав в таблице обрезался до «обы»: даём ему ширину по содержимому. */
.cmptable select{min-width:132px;width:auto}
/* Зоны ответственности — чипами в строку: так они читаются, а не висят
   столбиком по одному слову. */
.cmptable.people td{vertical-align:top}
.duties{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
/* Галерея найденных снимков: отметить нужные глазами, а не по ссылкам. */
/* Миниатюра загруженного фото: пометка «обложка» лежит на самом снимке,
   иначе она отодвигает кнопку «убрать» на отдельную строку. */
.shot{position:relative}
.shot .cover{position:absolute;top:8px;left:8px;font-size:12px;padding:3px 9px}
.shot .btn{margin-top:6px;width:100%}
.pickpics{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:10px}
.pickpic{position:relative;cursor:pointer;display:block}
.pickpic img{width:100%;height:96px;object-fit:cover;border-radius:10px;border:2px solid var(--line-2);
  display:block}
.pickpic input{position:absolute;top:7px;left:7px;width:auto;z-index:1;transform:scale(1.2)}
.pickpic input:checked + img{border-color:var(--brand-dark)}
.pickpic input:not(:checked) + img{opacity:.45}
.duties .chip{font-size:12px;padding:3px 8px;font-weight:500}
.cmptable td.best{background:var(--accent-soft);font-weight:600}
.cmpwrap{overflow-x:auto}
.leaflet-container{border-radius:var(--r);border:1px solid var(--line)}
.viewsw{display:flex;gap:5px}
.viewsw button[aria-current="page"]{background:var(--brand-grad-deep);border-color:var(--brand-dark);color:#fff}

footer.foot{border-top:1px solid var(--line);margin-top:30px;padding:26px 0 48px;color:var(--tx-3);
  font-size:13px}

/* В тёмной теме заголовки идут фирменным градиентом, а текст под ними — светлым:
   так разделы видно сразу, а читается всё по-прежнему легко. На обложке
   заголовок лежит на фотографии и остаётся белым. */
:root[data-theme="dark"] .logo{color:var(--brand-logo);
  background:linear-gradient(180deg,#48e072 0%,#2bb04c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:root[data-theme="dark"] h3,
:root[data-theme="dark"] summary{color:var(--accent)}
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2{color:var(--accent);
  background:linear-gradient(180deg,#7df09a 0%,#2bd24d 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:root[data-theme="dark"] .cover h1{background:none;-webkit-text-fill-color:#fff;color:#fff}
:root[data-theme="dark"] .cover p{color:rgba(255,255,255,.88)}
:root[data-theme="dark"] .note b,
:root[data-theme="dark"] table.data b,
:root[data-theme="dark"] .twoscore b{color:var(--tx)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .logo{color:var(--brand-logo);background:linear-gradient(180deg,#48e072 0%,#2bb04c 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  h3,summary{color:var(--accent)}
  h1,h2{color:var(--accent);background:linear-gradient(180deg,#7df09a 0%,#2bd24d 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .cover h1{background:none;-webkit-text-fill-color:#fff;color:#fff}
  .cover p{color:rgba(255,255,255,.88)}
  .note b,table.data b,.twoscore b{color:var(--tx)}
}}


/* На телефоне мелкий текст читается хуже: он крупнее, а поля просторнее,
   чтобы в них попадали пальцем, а не ногтем. */
@media (max-width:560px){
  body{font-size:16px}
  .small{font-size:15px}
  .card p.small{font-size:15px}
  .card{padding:18px 16px}
  .cards{gap:14px}
  h1{font-size:26px}
  .btn{padding:12px 18px;font-size:15px}
  input,select,textarea{font-size:16px;padding:12px 13px}
  header.top select{font-size:13px;padding:6px 8px}
  label.fl .hint{font-size:13.5px}
  section.tint,section.pad.band,.band{padding:22px 16px}
  .wrap{padding:0 16px}
}