:root{
    /* Пастельные семантические цвета */
  --mineral-accent: 138,180,255;   /* пастельно-голубой */
  --specimen-accent: 210,185,150;  /* песочно-кофейный */
  
  /* Light-ish neutral (still dark, but благороднее и светлее) */
  --bg:#0f1115;
  --bg2:#121622;

  --card:#171a22;
  --card2:#1b2030;
  --line:rgba(255,255,255,.10);

  --txt:#f4f6fb;
  --muted:rgba(244,246,251,.70);

  --accent:#8ab4ff;     /* холодный благородный акцент */
  --accent2:#7ee0ff;

  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --shadow2: 0 10px 22px rgba(0,0,0,.28);

  --r:18px;
  --pad:14px;

  color-scheme: dark;
  --sitebar-h: 61px;
  --pagebar-h: 0px;      /* высота липкого подзаголовка (если есть) */
  --crumb-step: 36px;    /* шаг лесенки */
  --pagebar-h: 52px;
}

/* Формульный стиль (для заголовка и вообще где угодно) */
.formula{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  letter-spacing: .2px;
  color: rgba(244,246,251,.92);

  /* очень мягкое отделение, без "плашки" */
  border-radius: 8px;
  border: 0;
}

/* чтобы sub/sup в формуле были чуть аккуратнее */
.formula sub, .formula sup{
  font-size: 0.8em;
  line-height: 0;
}

/* ===== Theme switch (html[data-theme]) ===== */
html[data-theme="light"]{
  --bg:#f6f8fb;
  --bg2:#eef2f7;

  --card:#ffffff;
  --card2:#f8fafc;

  --line:rgba(17,24,39,.14);

  --txt:#0f172a;
  --muted:rgba(15,23,42,.68);

  --accent:#2563eb;
  --accent2:#0891b2;

  --shadow: 0 14px 40px rgba(2,6,23,.10);
  --shadow2: 0 10px 22px rgba(2,6,23,.08);

  color-scheme: light;
}

/* Подправим фон страницы под светлую тему */
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(37,99,235,.10), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(8,145,178,.08), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(138,180,255,.18), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(126,224,255,.10), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--txt);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
}

/* --- Top bar (full width, blends with bg) --- */
.topbar{
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;              /* выше шапки сайта */
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;

  /* не чёрный, а “стекло” поверх градиента */
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(255,255,255,.12);
}

.card{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.02)
    );
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);
  padding:var(--pad);
  box-shadow:var(--shadow);
}

/* На странице образца — минералы голубые */
.page-specimen a[href^="/p/m/"]{
  color: rgb(var(--mineral-accent));
  font-weight: 600 !important;
}

/* На странице минерала — образцы кофейные */
.page-mineral a[href^="/p/s/"]{
  color: rgb(var(--specimen-accent));
  font-weight: 600 !important;
}


/* ===========================
   Шапка секционных карточек
   (только для .section-card)
   =========================== */

.card.section-card{
  position:relative;
  overflow:hidden; /* чтобы подложка шапки соблюдала скругления */
}

/* лёгкая подложка в верхней зоне карточки */
.card.section-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:44px;  /* чуть ниже */
  background: linear-gradient(90deg,
    rgba(138,180,255,.12),
    rgba(126,224,255,.045),
    rgba(255,255,255,0)
  );
  pointer-events:none;
}


/* заголовок секции */
.card.section-card .sub{
  position:relative;
  z-index:1;

  /* железобетонно убираем влияние прошлых стилей */
  margin:0 !important;
  box-sizing:border-box;

  height:44px;
  align-items:center;

  padding:0 3px;
  line-height:1;              /* убирает “псевдо-низ” от line-height */

  font-size:15px;
  font-weight:750;
  letter-spacing:.12px;
  color:rgba(244,246,251,.94);
}

/* чтобы не было “двойной линии” — убираем hr в секционных карточках */
.card.section-card .hr{ display:none; }



.h1{
  font-size:22px;
  font-weight:850;
  letter-spacing:-0.2px;
  margin:0 0 6px 0;
  line-height:1.15
}

.sub{color:var(--muted);font-size:13px}

/* ===== Collapsible cards ===== */

.card.collapsible .kv{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:
    max-height .35s ease,
    opacity .25s ease;
}

/* Открытое состояние */
.card.collapsible.is-open .kv{
  max-height:2000px; /* достаточно большое */
  opacity:1;
}

/* Курсор и hint */
.card.collapsible .sub{
  cursor:pointer;
}

/* Стрелка-индикатор */
.card.collapsible .sub::before{
  content:"▸";
  display:inline-block;
  margin-right:8px;
  font-size:13px;
  transform:translateY(-1px);
  transition:transform .25s ease;
  opacity:.75;
}

/* Поворот стрелки при открытии */
.card.collapsible.is-open .sub::before{
  transform:rotate(90deg) translateY(-1px);
}



*{box-sizing:border-box}
a{color:var(--accent);text-decoration:none}
a:active{opacity:.8}
.app{min-height:100vh;display:flex;flex-direction:column}
.brand{font-weight:700;color:var(--txt)}
.top-actions{display:flex;gap:8px}
.main{flex:1;padding:14px;max-width:900px;width:100%;margin:0 auto}
.footer{padding:16px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.footer-left{text-align:left;}
.footer-right{text-align:right;white-space:nowrap;}

.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 10px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px;
  white-space:nowrap;
  flex-shrink:0;
}
.kv{display:grid;grid-template-columns: 1fr;gap:8px}
.kv .item{
  border-top:1px dashed rgba(255,255,255,.10);
  padding-top:10px;
}
.block .kv .item{ border-top:0; padding-top: 0;}
.k{color:var(--muted);font-size:12px;margin-bottom:4px}
.v{font-size:14px;line-height:1.35}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 12px;border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--txt);
  font-weight:650;
}
.btn.primary{border-color:rgba(125,211,252,.35);background:rgba(125,211,252,.12)}
.btn.ghost{background:transparent}
.btn.danger{border-color:rgba(251,113,133,.4);background:rgba(251,113,133,.10)}
.btn:active{transform:translateY(1px)}

.input{
  width:100%;
  padding:12px 12px;border-radius:14px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  color:var(--txt); outline:none;
}
.hr{height:1px;background:var(--line);margin:10px 0}
.list{display:flex;flex-direction:column;gap:8px}
.li{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:10px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.03)
}

.li .meta{color:var(--muted);font-size:12px}
.toast{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background:rgba(20,20,22,.92); border:1px solid var(--line);
  padding:10px 12px;border-radius:999px; box-shadow:var(--shadow);
  color:var(--txt); font-size:13px; z-index:1000;
  max-width:min(92vw, 640px);
}
.hidden{display:none !important}

/* Богатый список: миниатюра-контейнер */
/* Железобетонный thumbnail + заглушка */
.li .thumb{
  width:80px;
  height:80px;
  border-radius:14px;
  overflow:hidden;

  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);

  flex:0 0 80px;
  position:relative;          /* якорь для слоёв */
}

/* Заглушка — отдельным слоем */
.li .thumb::after{
  content:"Нет фото";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding:0 6px;
  font-size:10.5px;
  line-height:1.1;
  font-weight:600;
  letter-spacing:.3px;
  text-transform:uppercase;
  color: rgba(244,246,251,.55);
  pointer-events:none;
}

/* Картинка — всегда полностью покрывает thumb (как cover) */
.li .thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Если картинка точно загрузилась — скрываем заглушку */
.li .thumb.has-img::after{
  display:none;
}




.li .body{
  min-width:0;           /* важно для корректного переноса текста */
  flex:1 1 auto;
}

.li .title{
  font-size: 14px;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.li .meta{
  white-space: normal;
  overflow: visible;
  display: block;
}
.li:active .thumb{ transform: scale(.98); }


.gallery{
  display:flex; gap:10px; overflow:auto; padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.gallery::-webkit-scrollbar{height:8px}
.gallery::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}
.ph{
  flex:0 0 auto;
  width:72vw; max-width:520px;
  aspect-ratio: 4/3;
  border-radius:16px; border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  overflow:hidden;
  scroll-snap-align:start;
}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.pill{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:12px;color:var(--muted)}
.small{font-size:12px;color:var(--muted)}

/* Более “табличные” chips */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

.chip{
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  font-size:12px;
  font-weight:600;
  letter-spacing:.1px;
  color: rgba(244,246,251,.88);
}

/* Цвет — мягкий, без ощущения кнопок */
.chip.special{
  border-color: rgba(255,110,110,.32);
  background: rgba(255,110,110,.07);
  color: rgba(255,230,230,.92);
}
.chip.structure{
  border-color: rgba(130,190,255,.30);
  background: rgba(130,190,255,.07);
  color: rgba(225,245,255,.92);
}
.chip.optics{
  border-color: rgba(255,210,120,.34);
  background: rgba(255,210,120,.07);
  color: rgba(255,248,225,.92);
}
.chip.proc{
  border-color: rgba(175,185,195,.28);
  background: rgba(175,185,195,.08);
  color: rgba(245,247,250,.92);
}
.chip.has-help{
  cursor: pointer;
}
.chip.has-help:hover{
  filter: brightness(1.08);
}

.section{
  margin-top: 10px;
}

.section-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg,
    rgba(138,180,255,.20),
    rgba(126,224,255,.06),
    rgba(255,255,255,0)
  );
  margin-bottom:10px;
}

.section-title{
  font-size:14px;
  font-weight:850;
  letter-spacing:.2px;
  color: rgba(244,246,251,.92);
}

.section-note{
  font-size:12px;
  color: rgba(244,246,251,.65);
}

.section-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Компактные “строки” характеристик */
.prop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.prop .k{margin:0;color: rgba(244,246,251,.65);font-size:12px}
.prop .v{margin:0;color: rgba(244,246,251,.92);font-size:13px;text-align:right}

/* Текстовые блоки */
.richbox{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(244,246,251,.92);
  font-size:13px;
  line-height:1.45;
}
.richbox p{margin:0 0 10px 0}
.richbox p:last-child{margin-bottom:0}

/* ===== Lightbox carousel ===== */
.lb{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
}
.lb.on{ display:block; }

.lb .back{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
}

.lb .pane{
  position:absolute;
  inset:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lb .imgwrap{
  position:relative;
  width:100%;
  height:100%;
  max-width: 980px;
  max-height: 100%;
  border-radius:18px;
  overflow:hidden;
  background: rgba(10,12,16,.55);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overscroll-behavior: contain;
}
.lb .imgwrap{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#0b0b0d;
}

.lb .imgbg{
  position:absolute;
  inset:0;
  z-index:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  filter: blur(22px);
  transform: scale(1.08);
  opacity:.42;
}
.lb img{
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
  object-fit:contain;            /* важно: максимум площади без обрезки */
  display:block;
}
.lb .nav,
.lb .close,
.lb .page,
.lb .title,
.lb .bbar{
  position:absolute;
  z-index:2;
}

/* Кнопки поверх картинки */
.lb .nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:28px;
  line-height:1;

  border:1px solid rgba(255,255,255,.18);
  background: rgba(20,22,28,.35);
  color: rgba(244,246,251,.92);
  user-select:none;
}
.lb .nav:active{ transform: translateY(-50%) scale(.98); }

.lb .prev{ left:10px; }
.lb .next{ right:10px; }

/* Закрыть */
.lb .close{
  position:absolute;
  top:12px;
  right:12px;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(20,22,28,.45);
  color: rgba(244,246,251,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

/* Подпись/счётчик (по желанию) */
.lb .cap{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(20,22,28,.35);
  color: rgba(244,246,251,.85);
  font-size:12px;
  letter-spacing:.2px;
}

/* левый кружок-счётчик */
.lb .page{
  position:absolute;
  top:10px;
  left:10px;
  width:42px;
  height:42px;
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(20,22,28,.35);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);

  color: rgba(244,246,251,.92);
  font-size:12px;
  line-height:1;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);

  user-select:none;
  pointer-events:none; /* чтобы не мешал кликам */
}

/* центральная плашка с названием */
.lb .title{
  position:absolute;
  top:10px;
  left:60px;
  right:60px;
  height:42px;

  /* отступаем от кружков: 42 + 10(левый отступ) + gap */
  padding: 6px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(20,22,28,.35);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  backdrop-filter: blur(6px);

  color: rgba(244,246,251,.92);
  font-size:16px;
  line-height:1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);

  /* без обрезания текста */
  white-space:normal;
  text-align:center;

  pointer-events:none;
}

.lb .bbar{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;

  padding:10px 12px;
  border-radius:14px;

  border:1px solid rgba(255,255,255,.14);
  background: rgba(20,22,28,.35);
  backdrop-filter: blur(6px);

  color: rgba(244,246,251,.92);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);

  font-size:14px;
  line-height:1.25;
  text-align:center;

  white-space:normal;
  user-select:none;
  pointer-events:none;
}
/* На очень узких экранах уменьшим кнопки */
@media (max-width: 420px){
  .lb .nav{ width:42px; height:42px; font-size:20px; }
}

/* Иконка-миниатюра в поиске */
.sicon{
  width:56px;
  height:56px;
  border-radius:12px;
  overflow:hidden;
  flex:0 0 56px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  position:relative;
}

.sicon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Заглушка, если нет */
.sicon::after{
  content:"Нет";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(244,246,251,.55);
  font-size:10px;
  font-weight:700;
  letter-spacing:.2px;
  text-transform:uppercase;
  pointer-events:none;
}
.sicon.has-img::after{ display:none; }

.k.amb{
  color: rgba(255, 200, 120, .92); /* янтарный */
}

.geomap{
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: 10px;
}
.geomap .leaflet-control-attribution{
  display:none;
}

/* Стили для справочной системы */

.help-lite{ position:fixed; inset:0; display:none; z-index:9999; }
.help-lite.open{ display:block; }
.help-lite__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.help-lite__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(1100px, 96vw);
  height:min(90vh, 900px);
  max-height:min(90vh, 900px);
  display:flex;
  gap:0;
  overflow:visible;              /* важно: чтобы стрелка выглядывала */
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(16,18,22,.96);
  box-shadow:0 20px 70px rgba(0,0,0,.6);
}
.help-lite__sash{
  position:absolute;
  top:50%;
  left:283px;                    /* у границы колонок */
  transform:translate(-50%, -50%);
  width:18px;
  height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;           /* кликается кнопка внутри */
  z-index:5;
  transition:left .18s ease;
}

.help-lite__sashbtn{
  pointer-events:auto;
  width:18px;
  height:110px;
  border:1px solid #e6d4a8;
  border-radius:12px;
  background:#f3ead3;
  color:#7a5a1f;
  font:inherit;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.help-lite__left{
  width:290px;
  flex:0 0 290px;
  min-width:0;
  overflow:auto;
  padding:12px 10px 12px 12px;
  border-right:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  overscroll-behavior: contain;
  transition:
    width .18s ease,
    flex-basis .18s ease,
    padding .18s ease,
    border-color .18s ease;
}
.help-lite__panel.left-collapsed .help-lite__left{
  width:0;
  flex-basis:0;
  padding:0;
  border-right-color:transparent;
  overflow:hidden;
}
.help-lite__panel.left-collapsed .help-lite__sashbtn{
  transform:rotate(180deg);
}
.help-lite__panel.left-collapsed .help-lite__sash{
  left:0;                        /* наполовину выглядывает слева */
}
.help-lite__right{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:18px;
  background:transparent;
}
.help-lite__body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling:touch;
}
.help-lite__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.help-lite__title{ font-weight:800; }
.help-lite__close{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(245,247,251,.9);
  border-radius:12px;
  padding:6px 10px;
}
.help-lite__strip{
  flex: 0 0 auto;       /* НЕ сжимать по высоте */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 12px;
  gap: 8px;
  display: none;
  -webkit-overflow-scrolling: touch;
}
.help-lite__strip img{
  flex: 0 0 auto;
  height: 201px;
  width: 268px;
  object-fit: cover;
  border-radius: 12px;
}
.help-lite__text{
  padding:12px 14px;
  overflow:visible;
  font-size:15px;                /* одинаково с контентом */
  line-height:1.45;
}
.help-lite__text{
  font-size: 14px;        /* или 13px если хочешь ещё компактнее */
  line-height: 1.45;
}
.help-lite__nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.help-lite__hdr--group{
  text-transform:uppercase;
}
.help-lite__hdr{
  margin:10px 0 2px;
  padding:0 0 6px 0;
  font-size:13.5px;                /* как у контента */
  line-height:1.35;
  font-weight:800;
  color:inherit;
  border-bottom:1px solid rgba(255,255,255,.14);
}


.help-lite__sub > .help-lite__hdr{
  text-transform:none;
}

.help-lite__node{
  display:block;
  width:100%;
  margin:0;
  text-align:left;
  font:inherit;
  font-size:13px;
  line-height:1.35;
  font-weight:500;
  color:inherit;
  border:1px solid #CCC;
  background:rgba(255,255,255,.05);
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  appearance:none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-appearance:none;
  box-sizing:border-box;
}
.help-lite__node:hover{
  background:rgba(255,255,255,.07);
}
.help-lite__node.is-active{
  background:#f3ead3;
  border-color:#e6d4a8;
}
.help-lite__node.lvl1{ margin-left:20px; width:calc(100% - 20px); }
.help-lite__node.lvl2{ margin-left:40px; width:calc(100% - 40px); }
.help-lite__node.lvl3{ margin-left:60px; width:calc(100% - 60px); }
.help-lite__node.lvl4{ margin-left:80px; width:calc(100% - 80px); }
.help-lite__group,
.help-lite__sub{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.help-lite__hdr.lvl1{ margin-left:20px; }
.help-lite__hdr.lvl2{ margin-left:40px; }
.help-lite__hdr.lvl3{ margin-left:60px; }
.help-lite__hdr.lvl4{ margin-left:80px; }
.help-lite__text h1{ font-size: 18px; margin: 10px 0 8px; }
.help-lite__text h2{ font-size: 16px; margin: 10px 0 8px; }
.help-lite__text h3{ font-size: 15px; margin: 10px 0 6px; }
.help-lite__text p, .help-lite__text ul, .help-lite__text ol{ margin: 8px 0; }
.help-lite__text img{ max-width: 100%; height: auto; }

.help-lite__strip .himg{
  border:0;
  padding:0;
  background:transparent;
  flex:0 0 auto;
}
.help-lite__strip .himg img{ display:block; }
.help-lite__node.is-implied{
  opacity:.58;
  cursor:default;
  background:rgba(243,234,211,.08);
  color:#e6d4a8;
  border:1px solid rgba(230,212,168,.28);
}

/* Стили для Штрунца */
.strunz2-grid{
  display:grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap:10px;
  row-gap:6px;
  width:100%;
}
.strunz2-h{
  font-size:11px;
  font-weight:700;
  color: var(--muted);
  padding-bottom:4px;
  border-bottom:1px dashed rgba(255,255,255,0.12);
}
.strunz2-row{ display:contents; }
.strunz2-code{
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  white-space:nowrap;
  opacity:.95;
}
.strunz2-ru{
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
}
/* --- Tree (accordion) --- */
.tree{ display:flex; flex-direction:column; gap:10px; }

.node{
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow: var(--shadow2);
}

.node-head{
  width:100%;
  border:0;
  background: transparent;
  color: var(--txt);
  padding: 12px 12px;
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  text-align:left;
}

.node-text{ min-width:0; }
.node-taxon{ font-size:12px; color: var(--muted); }
.node-title{ font-size:14px; font-weight:600; margin-top:2px; }

.node-right{ display:flex; align-items:center; gap:10px; }
.node-count{
  font-size:12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: rgba(244,246,251,.85);
}
.chev{ opacity:.75; transition: transform .2s ease; }

.node-body{ display:none; border-top:1px solid var(--line); }
.node.open > .node-body{ display:block; }
.node.open > .node-head .chev{ transform: rotate(90deg); }
.chev{ display:inline-block; transition: transform .2s ease; opacity:.75; }

.node-children{
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.leaf-list{ padding: 10px; display: flex; flex-direction: column; gap: 10px; }

/* --- Search overlay --- */
.iconbtn{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--txt);
  border-radius: 12px;
  padding: 8px 10px;
}
.topbar .iconbtn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}

.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;          /* было 40 */
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: 14px;
}
.ov-card{
  width: min(980px, 100%);
  margin-top: 8px;
  background: rgba(23,26,34,.98);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 12px;
  position: relative;
  z-index: 1001;
  max-height: calc(100vh - 28px);
  display: flex;
  flex-direction: column;
}
#popupBody{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}
.h2{ font-size: 18px; font-weight: 700; }
.leaf-list .li .title{
  font-size: 14px;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}
.leaf-list .li .meta{
  white-space: normal;
  overflow: visible;
  display: block;
}
.tree-group{ margin-top: 10px; }
.tree-group-title{
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .2px;
  color: rgba(244,246,251,.92);
  margin: 2px 2px 8px;
  opacity: .95;
}
/* --- Group headers (Тип объекта) --- */
.tree-group{ margin-top: 14px; }
.tree-group:first-child{ margin-top: 6px; }

.tree-group-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 30px 2px 10px;
}

.tree-group-chip{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  color: rgba(244,246,251,.92);
  white-space: nowrap;
}

.tree-group-line{
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  opacity: .9;
}

/* контейнер дерева без card */
.tree-root{
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding: 12px;
}
.app{ padding: 0; }
/* верхняя шапка сайта /p */
header.topbar{
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  min-height: var(--sitebar-h);
  box-sizing: border-box;

  display:flex;
  align-items:center;

  padding: 10px 16px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* бренд */
header.topbar .brand{
  display: inline-flex;      /* или flex */
  align-items: center;
  gap: 0px;
  white-space: nowrap;
}

.pagebar{
  position: sticky;
  top: var(--sitebar-h);
  z-index: 150;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  /* растягиваем "липкую" панель на ширину main, компенсируем padding main */
  margin: 0 -14px 12px;   /* -14px = padding main */
  padding: 10px 14px;

  background: rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.pagebar-title{
  font-size: 18px;
  font-weight: 850;
  letter-spacing: .2px;
}

.pagebar-btn{
  padding: 8px 10px;
}
.brand{
  display:flex;
  align-items:center;
  gap:0px;
}

.brand-ico{
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display:block;
}

header.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.menubtn{
  padding: 8px 10px;
}

/* выпадающее меню */
.menubtn{ padding: 8px 10px; }

.menu{
  position: absolute;
  top: 100%;
  right: 12px;
  margin-top: 8px;
  width: min(320px, calc(100vw - 24px));
  background: rgba(23,26,34,.98);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 900;
}

.menu-item{
  display:block;
  padding: 12px 30px;
  color: rgba(244,246,251,.92);
  text-decoration:none;
  font-size: 18px;
}
.menu-item:last-child{ border-bottom:none; }
.menu-item:hover{ background: rgba(255,255,255,.06); }

/* ===== Menu: theme control ===== */
.menu-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px 12px;
}

.menu-label{
  font-size: 14.5px;           /* чуть крупнее */
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: .2px;
  margin: 0;                   /* убираем “прижатость” */
  padding: 0;
  opacity: .92;
}
html[data-theme="light"] .menu-label{
  color: rgba(15,23,42,.80);
}

.seg{
  display:inline-flex;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  overflow:hidden;
}
html[data-theme="light"] .seg{
  border-color: rgba(15,23,42,.14);
  background: rgba(15,23,42,.04);
}

.seg-btn{
  border:0;
  background: transparent;
  color: rgba(244,246,251,.90);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
html[data-theme="light"] .seg-btn{
  color: rgba(15,23,42,.82);
}

.seg-btn.is-active{
  background: rgba(138,180,255,.18);
}
html[data-theme="light"] .seg-btn.is-active{
  background: rgba(37,99,235,.14);
}

/* overlay поиска должен быть выше меню */
.overlay{ z-index: 2000; }
.ov-card{ z-index: 2001; }

/* --- Mindat full tree (accordion) --- */
.mtree{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.mnode{
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
}

.twisty{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--txt);
  border-radius: 12px;
  padding: 6px 8px;
  flex: 0 0 auto;
}
.twisty svg{ width:18px; height:18px; display:block; }
.twisty svg path{ fill:none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mchildren{
  list-style:none;
  padding: 10px;
  margin: 0;
  display:flex;              /* было none */
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--line);
}

/* =========================
   TreeUI (isolated styles)
   ========================= */

.treeui{
  --crumb-step: 36px; /* шаг лесенки */
}

/* ты говорил, что анимацию убрал: делаем без ограничений */
.treeui .node-body{ display:none; }
.treeui .node.open > .node-body{ display:block; }

/* sticky только для открытого пути */
.treeui .node.open{
  overflow: visible;           /* ТОЛЬКО в деревьях и только в open */
}
.treeui .node.open > .node-body{
  overflow: visible;
}

/* заголовок узла липнет “лесенкой” */
.treeui .node.open > .node-head{
  position: sticky;
  top: var(--sticky-top, 0px);
  z-index: calc(120 - (var(--depth, 0) * 1));

  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* маленькая косметика стрелки */
.treeui .chev{
  display:inline-block;
  transition: transform .2s ease;
  opacity:.75;
}
.treeui .node.open > .node-head .chev{ transform: rotate(90deg); }

/* ===== Mindat UI only ===== */

/* делаем блоки менее "круглыми" и одинаковыми в закрытом/открытом виде */
.mindat-ui .node{
  border-radius: 10px;
}
.mindat-ui .node-head{
  border-radius: 10px;
}
.mindat-ui .node.open > .node-head{
  border-radius: 10px 10px 0 0;
}
.mindat-ui .node.open > .node-body{
  border-radius: 0 0 10px 10px;
}

/* лесенка: слева отступ по depth, справа — в край (компенсируем padding .main=14px) */
.mindat-ui .node{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
.mindat-ui .node-head-static{
  cursor: default;
}
.mindat-ui{
  padding: 0px;   /* как у .node-children */
}
.node-count-btn{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(122, 188, 255, .16);
  color: rgba(244,246,251,.95);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}


.node-count-btn:hover{
  background: rgba(122, 188, 255, .22);
}
/* Mindat: заголовок узла — 2 колонки: текст слева, кнопки справа */
.mindat-ui .node-head{
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}

.mindat-ui .node-text{
  min-width: 0;          /* важно для обрезки/переноса текста */
}

.mindat-ui .node-right{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  white-space: nowrap;   /* НЕ переносить на новую строку */
}
/* Mindat: кнопка справки компактная */
.mindat-ui .node-help{
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(244,246,251,.92);
}
#popupBody .title {font-size: 14px;}

.gpopup{ display:flex; flex-direction:column; gap:10px; }
.ghead{ display:flex; flex-direction:column; gap:8px; }
.gtitle{ font-size:16px; font-weight:850; }
.gsub{ display:flex; flex-wrap:wrap; gap:8px; }
.gbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  text-decoration:none;
  color: rgba(244,246,251,.92);
  font-size: 16px;
}

.gsec{
  border:1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
.gsec-h{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:0;
  background: transparent;
  color: inherit;
  cursor:pointer;
}
.gsec-chev{ display:inline-block; transition: transform .2s ease; opacity:.75; }
.gsec.open .gsec-chev{ transform: rotate(90deg); }

.gsec-b{
  display:none;
  padding: 10px 12px 12px;
  border-top:1px solid var(--line);
}
.gsec.open .gsec-b{ display:block; }

.grow{ display:flex; gap:10px; padding:6px 0; }
.gk{ width: 42%; color: rgba(244,246,251,.72); font-size: 12px; }
.gv{ flex: 1; font-size: 13px; min-width:0; }
.ghtml{ overflow-wrap:anywhere; display: block !important; }

.gbtn-mindat{
  background: rgba(122,188,255,.14);
  border-color: rgba(122,188,255,.28);
}
.gbtn-mindat:hover{ background: rgba(122,188,255,.20); }
.gbtn-ico{ width:16px; height:16px; margin-right:8px; vertical-align:-3px; }
/* chips layout inside geomaterial popup */
.gpopup .gv{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;           /* вертик/гориз отступы между чипсами */
  align-items: center;
}

.gpopup .chip{
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  line-height: 1.2;
  white-space: nowrap;
  margin: 0;              /* на всякий случай, если где-то задано иначе */
}
.pagebar{
  min-height: var(--pagebar-h);
  height: var(--pagebar-h);     /* фикс */
  display: flex;
  align-items: center;
}

.menu-sec{
  padding: 10px 12px 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
}

.menu-sep{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 6px 0;
}

.menu-item{
  padding: 12px 30px; /* чуть компактнее под секции */
}

/* Help TOC */
.hacc{
  border:1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  overflow:hidden;
  margin: 10px 0;
}
.hacc-h{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 12px;
  border:0;
  background: transparent;
  color: inherit;
  cursor:pointer;
}
.hacc-t{ font-weight: 850; font-size: 14px; }
.hacc-b{
  display:none;
  padding: 10px 12px 12px;
  border-top:1px solid var(--line);
}
.hacc.open .hacc-b{ display:block; }

.hchev{
  display:inline-block;
  transition: transform .2s ease;
  opacity:.75;
}
.hacc.open .hchev{ transform: rotate(90deg); } /* ▸ -> вниз */

.hgroup{ margin: 8px 0 14px; }
.hgroup-title{
  font-size: 12px;
  font-weight: 800;
  opacity: .75;
  margin: 6px 2px 8px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.hlist{ display:flex; flex-direction:column; gap:10px; }

.hlititle{ font-size: 13px; line-height: 1.25; }
.hlimeta{ font-size: 12px; opacity:.7; margin-top: 2px; }

/* Секция-аккордеон только для словарей */
.hdict{ margin: 10px 0; }
.hdict .hacc-h{ padding: 12px 12px; }
.hdict .hchev{
  display:inline-block;
  transition: transform .2s ease;
  opacity:.75;
}
.hdict.open .hchev{ transform: rotate(90deg); } /* ▸ -> вниз */

.hli{
  width:100%;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius:16px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:10px;
}

.hli-main{
  flex:1 1 auto;
  min-width:0;
  text-align:left;
  border:0;
  background:transparent;
  padding:2px 0;
  color:inherit;
  cursor:pointer;
}

.hlibody{
  min-width:0;
  width:100%;
}

.hlititle{
  font-size:13px;
  line-height:1.25;
}

.hlimeta{
  font-size:12px;
  opacity:.7;
  margin-top:2px;
}

.hlicount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #35506e;
  background:#182434;
  color:#cfe3ff;
  text-decoration:none;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
}

.hlicount:hover{
  background:#1d2c40;
}

.hlicount:active{
  transform:translateY(1px);
}

.specpop-backdrop{
  position:fixed;
  inset:0;
  z-index:10020;
  background:rgba(4,10,18,.68);
  backdrop-filter: blur(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 12px calc(18px + env(safe-area-inset-bottom, 0px));
}

.specpop{
  width:min(760px, 100%);
  max-height:min(82vh, 760px);
  border:1px solid #2a2f36;
  border-radius:18px;
  background:#14181f;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.specpop-head{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid #2a2f36;
  background:#171c24;
}

.specpop-title{
  font-size:18px;
  font-weight:700;
  color:#e5e7eb;
  overflow-wrap:anywhere;
}

.specpop-subtitle{
  font-size:12px;
  font-weight:700;
  color:#9ca3af;
  margin-bottom:2px;
}

html[data-theme="light"] .specpop-subtitle{
  color:#7f8790;
}

.specpop-close{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid #2a2f36;
  background:#14181f;
  color:#e5e7eb;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

.specpop-body{
  padding:12px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.specpop-empty{
  border:1px dashed rgba(255,255,255,.16);
  border-radius:14px;
  padding:14px;
  color:#9ca3af;
  font-size:13px;
  text-align:center;
}

.specpop-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.specpop-list .li{
  display:grid;
  grid-template-columns:60px minmax(0,1fr);
  gap:12px;
  align-items:center;
  text-decoration:none;
  border:1px solid #2a2f36;
  border-radius:14px;
  padding:10px;
  background:#171c24;
}

.specpop-list .li:hover{
  background:#1a2030;
}

.specpop-list .sicon{
  width:60px;
  height:60px;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  flex:0 0 auto;
  background:linear-gradient(180deg, #1c2330 0%, #121722 100%);
  border:1px solid rgba(255,255,255,.06);
}

.specpop-list .sicon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.specpop-list .sicon::after{
  content:"Нет";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(244,246,251,.55);
  font-size:10px;
  font-weight:700;
  letter-spacing:.2px;
  text-transform:uppercase;
  pointer-events:none;
}

.specpop-list .sicon.has-img::after{
  display:none;
}

.specpop-list .body{
  min-width:0;
}

.specpop-list .title{
  font-size:14px;
  color:#e5e7eb;
  overflow-wrap:anywhere;
}

.specpop-list .meta{
  margin-top:4px;
  font-size:12px;
  color:#9ca3af;
  overflow-wrap:anywhere;
}

html[data-theme="light"] .hlicount{
  border:1px solid rgba(15,23,42,.14);
  background:#d8e3ef;
  color:rgba(15,23,42,.78);
}

html[data-theme="light"] .hlicount:hover{
  filter:brightness(0.97);
}

html[data-theme="light"] .specpop-backdrop{
  background:rgba(15,23,42,.24);
}

html[data-theme="light"] .specpop{
  border:1px solid #e9e9e9;
  background:#ffffff;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}

html[data-theme="light"] .specpop-head{
  border-bottom:1px solid #e9e9e9;
  background:#fbfbfb;
}

html[data-theme="light"] .specpop-title{
  color:#111827;
}

html[data-theme="light"] .specpop-close{
  border:1px solid #e9e9e9;
  background:#ffffff;
  color:#111827;
}

html[data-theme="light"] .specpop-empty{
  border:1px dashed #d8dee7;
  color:#7f8790;
}

html[data-theme="light"] .specpop-list .li:hover{
  background:#f7f7f7;
}

html[data-theme="light"] .specpop-list .sicon{
  background:linear-gradient(180deg, #f3f6fb 0%, #e9eef6 100%);
  border:1px solid #e5ebf3;
}

html[data-theme="light"] .specpop-list .sicon::after{
  color:rgba(17,24,39,.42);
}

html[data-theme="light"] .specpop-list .title{
  color:#111827;
}

html[data-theme="light"] .specpop-list .meta{
  color:#7f8790;
}

/* Leaflet should stay behind app overlays */
#map{ position: relative; z-index: 1; }

/* на всякий — у Leaflet свои z-index, но оставим как есть */
.leaflet-container{ z-index: 1; }

.topbar{ position: sticky; z-index: 3000; }   /* шапка */
.menu{ position: absolute; z-index: 3200; }   /* выпадающее меню */
.overlay{ z-index: 4000; }                    /* твой универсальный popupOverlay */
.help-lite{ z-index: 4100; }                  /* helpLite поверх всего */

/* header in popup */
.popup-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.popup-head #popupTitle{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup-head #popupClose{
  flex: 0 0 auto;
}

.brand-text{ font-size: 21px; }
.is-clickable{ cursor: pointer; }

/* ===========================
   LIGHT THEME PATCH (fixes)
   =========================== */

html[data-theme="light"]{
  /* если где-то забыли использовать переменные */
  color-scheme: light;
}

/* Топбар/меню — делаем светлым “стеклом” */
html[data-theme="light"] .topbar{
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(15,23,42,.12);
}
html[data-theme="light"] .topbar .iconbtn{
  border: 1px solid rgba(15,23,42,.16);
  background: rgba(15,23,42,.04);
  color: var(--txt);
}
html[data-theme="light"] .brand{ color: var(--txt); }

/* Карточки и основные поверхности */
html[data-theme="light"] .card,
html[data-theme="light"] .node{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border-color: rgba(15,23,42,.12);
  box-shadow: 0 14px 40px rgba(2,6,23,.10);
}

/* Общие “плашки” */
html[data-theme="light"] .badge,
html[data-theme="light"] .btn,
html[data-theme="light"] .input,
html[data-theme="light"] .li,
html[data-theme="light"] .pill,
html[data-theme="light"] .ph,
html[data-theme="light"] .prop,
html[data-theme="light"] .richbox,
html[data-theme="light"] .iconbtn{
  border-color: rgba(15,23,42,.14);
  background: rgba(2,6,23,.03);
  color: var(--txt);
}

/* Тексты/подписи */
html[data-theme="light"] .sub,
html[data-theme="light"] .k,
html[data-theme="light"] .li .meta,
html[data-theme="light"] .section-note,
html[data-theme="light"] .node-taxon,
html[data-theme="light"] .formula{
  color: rgba(15,23,42,.68);
}
html[data-theme="light"] .v,
html[data-theme="light"] .section-title,
html[data-theme="light"] .prop .v,
html[data-theme="light"] .richbox{
  color: rgba(15,23,42,.92);
}

/* Разделы/шапки секций */
html[data-theme="light"] .section-head{
  border-color: rgba(15,23,42,.12);
  background: linear-gradient(90deg,
    rgba(37,99,235,.14),
    rgba(8,145,178,.06),
    rgba(255,255,255,0)
  );
}

/* Чипсы: базовые + ваши цветные */
html[data-theme="light"] .chip{
  border-color: rgba(15,23,42,.14);
  background: rgba(2,6,23,.03);
  color: rgba(15,23,42,.86);
}
html[data-theme="light"] .chip.special{
  border-color: rgba(220,38,38,.22);
  background: rgba(220,38,38,.08);
  color: rgba(127,29,29,.92);
}
html[data-theme="light"] .chip.structure{
  border-color: rgba(37,99,235,.22);
  background: rgba(37,99,235,.08);
  color: rgba(30,64,175,.92);
}
html[data-theme="light"] .chip.optics{
  border-color: rgba(217,119,6,.22);
  background: rgba(217,119,6,.08);
  color: rgba(124,45,18,.92);
}
html[data-theme="light"] .chip.proc{
  border-color: rgba(100,116,139,.22);
  background: rgba(100,116,139,.08);
  color: rgba(15,23,42,.90);
}

/* Заглушки “Нет фото/Нет” — чтобы не были белыми */
html[data-theme="light"] .li .thumb{
  background: rgba(2,6,23,.03);
  border-color: rgba(15,23,42,.14);
}
html[data-theme="light"] .li .thumb::after,
html[data-theme="light"] .sicon::after{
  color: rgba(15,23,42,.55);
}

/* Счётчики в дереве */
html[data-theme="light"] .node-count{
  color: rgba(15,23,42,.78);
  border-color: rgba(15,23,42,.14);
}

/* Overlay / popup */
html[data-theme="light"] .overlay{
  background: rgba(2,6,23,.35);
}
html[data-theme="light"] .ov-card{
  background: rgba(255,255,255,.92);
  border-color: rgba(15,23,42,.14);
  color: var(--txt);
}

/* Help-lite */
html[data-theme="light"] .help-lite__panel{
  background: rgba(255,255,255,.94);
  border-color: rgba(15,23,42,.14);
  box-shadow: 0 20px 70px rgba(2,6,23,.18);
}
html[data-theme="light"] .help-lite__head{
  border-bottom: 1px solid rgba(15,23,42,.10);
}
html[data-theme="light"] .help-lite__close{
  border-color: rgba(15,23,42,.16);
  background: rgba(2,6,23,.03);
  color: rgba(15,23,42,.92);
}

/* Горизонтальные линии */
html[data-theme="light"] .hr,
html[data-theme="light"] .footer{
  border-top-color: rgba(15,23,42,.12);
}
/* ===== Light theme: targeted fixes ===== */

html[data-theme="light"] .card.section-card .sub{
  color: rgba(15,23,42,.68) !important;
}

html[data-theme="light"] .tree-group-chip{
  color: rgba(15,23,42,.82) !important;
  background: rgba(2,6,23,.04) !important;
  border-color: rgba(15,23,42,.14) !important;
}

/* menu осталось "чёрным" — перебиваем фон/бордер/текст */
html[data-theme="light"] .menu{
  background: rgba(255,255,255) !important;
  border-color: rgba(15,23,42,.14) !important;
  color: rgba(15,23,42,.92) !important;
}
html[data-theme="light"] .menu .menu-sec{
  color: rgba(15,23,42,.72) !important;
}
html[data-theme="light"] .menu .menu-item{
  color: rgba(15,23,42,.90) !important;
}
html[data-theme="light"] .menu .menu-item:hover{
  background: rgba(2,6,23,.04) !important;
}
html[data-theme="light"] .menu .menu-sep{
  background: rgba(15,23,42,.10) !important;
}

/* мелкие “серые/светлые” подписи */
html[data-theme="light"] .gk{
  color: rgba(15,23,42,.68) !important;
}

/* кнопки/иконки “gbtn” */
html[data-theme="light"] .gbtn{
  color: rgba(15,23,42,.92) !important;
  background: rgba(2,6,23,.03) !important;
  border-color: rgba(15,23,42,.14) !important;
}
html[data-theme="light"] .gbtn:hover{
  background: rgba(2,6,23,.05) !important;
}

/* thumbnail-заглушки без картинок */
html[data-theme="light"] .sicon{
  background: rgba(2,6,23,.03) !important;
  border-color: rgba(15,23,42,.14) !important;
}
html[data-theme="light"] .sicon::after{
  color: rgba(15,23,42,.55) !important;
}
/* pagebar: light theme */
html[data-theme="light"] .pagebar{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
  backdrop-filter: blur(10px);
}
html[data-theme="light"] .tree-group-line{
  background: rgba(15,23,42,.14) !important;
}
/* lightbox (photo carousel): keep overlay dark, but make chrome light */
html[data-theme="light"] .lb .back{
  background: rgba(2,6,23,.72) !important;  /* тёмная подложка остаётся */
}

html[data-theme="light"] .lb .imgwrap{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  box-shadow: 0 18px 60px rgba(2,6,23,.22) !important;
}
/* light: dotted separators in kv blocks */
html[data-theme="light"] .kv .item{
  border-top: 1px dashed rgba(15,23,42,.18) !important;
}
/* light: make .hli blocks more expressive */
html[data-theme="light"] .hli{
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.70)) !important;
  border-color: rgba(15,23,42,.14) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.08) !important;
}
/* light: accordion header */
html[data-theme="light"] .hacc-h{
  background:
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.68)) !important;
  border-color: rgba(15,23,42,.14) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.07) !important;
  color: rgba(15,23,42,.92) !important;
}

html[data-theme="light"] a.li .title{
  color: #8b6b3d !important;   /* песочно-кофейный */
}
html[data-theme="light"] .toast{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  color: rgba(15,23,42,.92) !important;
  box-shadow: 0 16px 44px rgba(2,6,23,.18) !important;
}

html[data-theme="light"] .pbdb-rank{
  color:#7b7b7b;
}
html[data-theme="light"] .pbdb-name{
  color:#111;
}

/* =========================
   Mindat: TREE VIEW (minimal)
   включается классом .treeui-rows на корне .mindat-host
   ========================= */

/* 1) Вложенность ступеньками: отступ даём UL, а не узлам */
.mindat-host.treeui-rows ul.mchildren{
  margin: 0;
  padding: 0 0 0 18px;   /* шаг дерева */
  list-style: none;
}
.mindat-host.treeui-rows ul.mtree{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 2) Никаких “карточек” и sticky */
.mindat-host.treeui-rows .node,
.mindat-host.treeui-rows .mnode{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.mindat-host.treeui-rows .node-head{
  position: static !important;
  top: auto !important;
  z-index: auto !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  padding: 8px 10px !important;
}

/* 3) Стрелка — как была (никаких кружков/подмен) */
.mindat-host.treeui-rows .chev{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Mindat treeui-rows: fixes */

/* 1) убираем лишние линии/бордеры */
.mindat-host.treeui-rows .node-body{
  border-top: 0 !important;
}
.mindat-host.treeui-rows .node-head{
  border-bottom: 0 !important;   /* на всякий случай, если где-то задаётся */
}

/* 2) таксон + имя в одну строку подряд */
.mindat-host.treeui-rows .node-text{
  display: inline !important;    /* убираем флекс/колонки */
}
.mindat-host.treeui-rows .node-taxon{
  display: inline !important;
  margin-right: 8px !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
}
.mindat-host.treeui-rows .node-title{
  display: inline !important;
  white-space: nowrap !important;
}

/* если название длинное — пусть переносится, но без разъезда колонок */
.mindat-host.treeui-rows .node-head{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.mindat-host.treeui-rows .node-text{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.mindat-host.treeui-rows .node-title{
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 3) help-иконка: без рамки, меньше */
.mindat-host.treeui-rows .node-help{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* 4) “строчка за строчкой”: компактнее вертикальные отступы */
.mindat-host.treeui-rows .node-head{
  padding: 6px 10px !important;
}
.mindat-host.treeui-rows .node-right{
  gap: 8px !important;
}
/* Mindat treeui-rows: remove line that appears on open header */
.mindat-host.treeui-rows .node.open > .node-head{
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.mindat-host.treeui-rows .node.open > .node-head::before,
.mindat-host.treeui-rows .node.open > .node-head::after{
  content: none !important;
}
.mindat-host.treeui-rows .node.open > .node-body{
  border-top: 0 !important;
}
/* Mindat treeui-rows: more cleanup */
.mindat-host.treeui-rows .mchildren{
  border-top: 0 !important;
  gap: 0 !important;
}

.mindat-host.treeui-rows .mtree{
  gap: 0 !important;
}

.mindat-host.treeui-rows .node-head{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Mindat treeui-rows: controls inline after text, allow wrapping */

/* весь заголовок как обычная строка */
.mindat-host.treeui-rows .node-head{
  display: block !important;
}

/* текст + контролы идут подряд */
.mindat-host.treeui-rows .node-text{
  display: inline !important;
}
.mindat-host.treeui-rows .node-right{
  display: inline !important;
  white-space: normal !important;
  margin-left: 10px !important;
}

/* разрешаем переносы названия */
.mindat-host.treeui-rows .node-title{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* чтобы кнопки не “расползались” */
.mindat-host.treeui-rows .node-count,
.mindat-host.treeui-rows .node-help,
.mindat-host.treeui-rows .chev{
  display: inline-block !important;
  vertical-align: baseline !important;
}
.pagebar-seg{ height: 34px; }
.pagebar-seg .seg-btn{ width: 38px; height: 34px; padding: 0; font-size: 18px; }

@media (hover: hover) and (pointer: fine){
  .gallery{
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
  }
  .gallery::-webkit-scrollbar{ height: 10px; }
  .gallery::-webkit-scrollbar-thumb{ background:#d9d9d9; border-radius: 10px; }
  .gallery::-webkit-scrollbar-track{ background: transparent; }
}

.pbdb-grid{
  display:grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 6px;
}
.pbdb-rank{
  color:#9ca3af;
  font-size:13px;
  white-space:nowrap;
}
.pbdb-name{
  color:#e5e7eb;
  overflow-wrap:anywhere;
  word-break:break-word;
  font-size:14px;
}
.ccolor{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}

.cc-swatch{
  width:20px;
  height:20px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  flex:0 0 20px;
  margin-top:2px;
}

.cc-swatch-empty{
  background:
    linear-gradient(135deg,#f6f6f6 25%,#e9e9e9 25%,#e9e9e9 50%,#f6f6f6 50%,#f6f6f6 75%,#e9e9e9 75%,#e9e9e9 100%);
  background-size:10px 10px;
}

.ccolor-body{
  min-width:0;
}

.ccolor-name{
  font-weight:600;
  line-height:1.25;
}

.ccolor-meta{
  margin-top:3px;
  font-size:12px;
  line-height:1.35;
  color:#6f7782;
}

.submeta{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:6px;
  margin-bottom:6px;
}

.split-chip{
  display:inline-flex;
  align-items:center;
  border:1px solid #3b4652;
  border-radius:999px;
  overflow:hidden;
  background:#222a33;
  color:#d4dbe3;
  font-size:12px;
  line-height:1.25;
}

.split-chip-key{
  padding:2px 8px;
  background:#2b3540;
  color:#9fb0c2;
  font-weight:600;
  border-right:1px solid #3f4b58;
  white-space:nowrap;
}

.split-chip-val{
  padding:2px 9px;
  white-space:nowrap;
}

html[data-theme="light"] .split-chip { border:1px solid #dde3e8; background:#f7f8fa; color:#4f5b66;}
html[data-theme="light"] .split-chip-key { background:#f1f3f5; color:#607080; border-right:1px solid #d7dee7;}

/* Стили для мини-справки */
.help-section {
  margin: 0 0 14px 0;
  border: 1px solid #CCC;
  border-radius: 12px;
  overflow: hidden;
}

.help-h3-collapsible {
  margin: 0;
  padding: 10px 14px 10px 15px;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  background: transparent;
  cursor: pointer;
  position: relative;
  user-select: none;
}

.help-section-body {
  display: none;
  padding: 12px 14px 2px 14px;
  background: #fcfdff;
  border-top: 1px solid #d8e4f2;
}

.help-section.is-open .help-section-body {
  display: block;
}

.help-section-body p {
  margin: 0 0 10px 0;
  line-height: 1.6;
  color: #222;
}

.help-section-body ul {
  margin: 0 0 10px 18px;
  padding: 0;
}

.help-section-body li {
  margin: 0 0 6px 0;
  line-height: 1.55;
}
.help-h3-collapsible { margin: 0px !important; }

.ima-discredited{ color:#c62828 !important; }
.ima-unknown{ color:#b58900 !important; }