/* ========================================================================
   Токены дизайна — "Полевой журнал натуралиста"
   Палитра: глубокий хвойный тёмно-зелёный + пергамент + приглушённая охра.
   Дисплейный шрифт Fraunces (курсив для латинских названий, как в
   определителях видов), интерфейсный — Inter.
   ======================================================================== */
:root{
  --ink:            #0f1a14;   /* основной тёмный фон */
  --ink-soft:       #1c2b22;   /* карточки/панели на тёмном */
  --ink-line:       #2c3d31;   /* границы на тёмном */
  --parchment:      #f6f1e6;   /* пергамент — светлый текст/карточки */
  --parchment-dim:  #cfc9b8;
  --moss:           #5c7a52;   /* основной акцент — мох */
  --moss-bright:    #8fb579;
  --ochre:          #c98a3d;   /* сигнатурный акцент — охра/латунь (метка, FAB) */
  --ochre-bright:   #e2a75a;
  --sky:            #6f97a3;   /* насекомые/вода, второстепенный акцент */
  --danger:         #c15c4a;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;

  --shadow-card: 0 1px 2px rgba(15,26,20,.06), 0 8px 24px -12px rgba(15,26,20,.35);
  --shadow-pop:  0 20px 60px -20px rgba(15,26,20,.55);

  color-scheme: dark;
}

*{ box-sizing: border-box; }
html,body{ height:100%; overscroll-behavior: none; }
body{
  margin:0;
  background: var(--ink);
  background-image:
    radial-gradient(1200px 600px at 15% -10%, rgba(143,181,121,.10), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(201,138,61,.08), transparent 55%);
  color: var(--parchment);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body::-webkit-scrollbar{ display:none; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; }
input,select,textarea{ font-family: inherit; }
:focus-visible{ outline: 2px solid var(--moss-bright); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Layout shell ---------- */
.app{
  max-width: 1180px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 20px 96px;
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;
  align-items:center;
  gap:20px;
  padding: 22px 0 14px;
  flex-wrap: wrap;
}
.topbar__brand{ display:flex; align-items:center; gap:12px; margin-right:auto; text-decoration:none; color:inherit; }
.topbar__mark{
  width:44px; height:44px; border-radius: 50%;
  display:grid; place-items:center;
  background: linear-gradient(155deg, var(--moss), #35492e);
  color: var(--parchment);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08);
  flex-shrink:0;
}
.topbar h1{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  margin: 0;
  letter-spacing: .2px;
}
.topbar__subtitle{
  margin: 1px 0 0;
  font-size: 12.5px;
  color: var(--parchment-dim);
  letter-spacing: .3px;
}
.topbar__search{
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
  display:flex; align-items:center;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--parchment-dim);
}
.topbar__search input{
  border:0; background:transparent; color: var(--parchment);
  padding: 10px 10px; width:100%; font-size: 14px;
}
.topbar__search input::placeholder{ color: var(--parchment-dim); }
.topbar__search input:focus{ outline:none; }

.topbar__tabs{ display:flex; gap:4px; background: var(--ink-soft); padding:4px; border-radius: 999px; border:1px solid var(--ink-line); }
.tab{
  border:0; background:transparent; color: var(--parchment-dim);
  padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight:600; cursor:pointer;
  transition: background .18s, color .18s;
}
.tab.is-active{ background: var(--moss); color: var(--parchment); }

/* ---------- Category filter chips ---------- */
.filters{
  display:flex; gap:8px; overflow-x:auto; padding: 4px 0 18px;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0;
  display:flex; align-items:center; gap:6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: var(--ink-soft);
  color: var(--parchment-dim);
  font-size: 13px; font-weight: 600;
  cursor:pointer;
  transition: all .16s;
}
.chip svg{ opacity:.85; }
.chip:hover{ border-color: var(--moss); color: var(--parchment); }
.chip.is-active{ background: var(--moss); border-color: var(--moss); color: var(--parchment); }
.chip__dot{ width:8px; height:8px; border-radius:50%; }

/* ---------- Views ---------- */
.view{ display:none; }
.view.is-active{ display:block; animation: fadeIn .25s ease; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }

/* ---------- Grid & specimen cards (signature element) ---------- */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.card{
  position:relative;
  background: var(--parchment);
  color: var(--ink);
  border-radius: var(--radius-m);
  overflow:hidden;
  cursor:pointer;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
  border: 1px solid rgba(15,26,20,.06);
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 24px 40px -20px rgba(0,0,0,.5); }
.card__photo{ position:relative; aspect-ratio: 4/3; background: #ddd6c2; overflow:hidden; }
.card__photo img{ width:100%; height:100%; object-fit:cover; }
.card__tag{
  position:absolute; top:10px; left:10px;
  display:flex; align-items:center; gap:5px;
  background: rgba(15,26,20,.72);
  backdrop-filter: blur(3px);
  color: var(--parchment);
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  font-size: 11px; font-weight:600;
}
.card__status{
  position:absolute; top:10px; right:10px;
  background: rgba(201,138,61,.92);
  color: #241505;
  font-size: 10.5px; font-weight:700;
  padding: 4px 9px; border-radius: 999px;
  display:flex; align-items:center; gap:5px;
}
.card__status.is-spin::before{
  content:''; width:7px; height:7px; border-radius:50%;
  border: 1.5px solid #241505; border-top-color: transparent;
  animation: spin .7s linear infinite;
}
.card__photocount{
  position:absolute; bottom:14px; right:10px;
  background: rgba(15,26,20,.72); backdrop-filter: blur(3px);
  color: var(--parchment); font-size: 10.5px; font-weight:700;
  padding: 4px 8px; border-radius: 999px; display:flex; align-items:center; gap:4px;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.card__body{ padding: 12px 14px 14px; }
.card__name{ font-family: var(--font-display); font-size: 17px; font-weight:600; margin:0 0 1px; line-height:1.25; }
.card__latin{ font-family: var(--font-display); font-style: italic; font-size: 12.5px; color:#5c5442; margin:0 0 8px; }
.card__meta{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:#6b6552; flex-wrap:wrap; }
.card__meta span{ display:flex; align-items:center; gap:4px; }
.card__meta svg{ opacity:.7; }

/* torn-edge / field-tag flourish along the bottom of the photo */
.card__photo::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-1px; height:10px;
  background-image: radial-gradient(circle at 6px 0, transparent 6px, var(--parchment) 6.5px);
  background-size: 12px 12px;
  background-repeat: repeat-x;
}

/* ---------- Empty state ---------- */
.empty{ text-align:center; padding: 70px 20px; color: var(--parchment-dim); }
.empty__icon{ font-size: 40px; display:block; margin-bottom:10px; }
.empty h2{ font-family: var(--font-display); color: var(--parchment); margin:0 0 6px; }

.loadmore{ display:flex; justify-content:center; padding: 26px 0 10px; }

/* ---------- Buttons ---------- */
.btn{
  border:0; cursor:pointer; border-radius: 999px; font-weight:600; font-size:14px;
  padding: 11px 20px; transition: transform .12s, background .15s, opacity .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:active{ transform: scale(.97); }
.btn--primary{ background: var(--moss); color: var(--parchment); }
.btn--primary:hover{ background: var(--moss-bright); color: var(--ink); }
.btn--primary:disabled{ opacity:.55; cursor:default; }
.btn--ghost{ background: var(--ink-soft); color: var(--parchment); border:1px solid var(--ink-line); }
.btn--ghost:hover{ border-color: var(--moss); }
.btn--outline{ background: transparent; color: var(--parchment); border:1.5px solid var(--ink-line); }
.btn--outline:hover{ border-color: var(--ochre); color: var(--ochre-bright); }
.btn--outline.is-done{ border-color: var(--moss-bright); color: var(--moss-bright); }
.btn--full{ width:100%; }
.btn--danger{ background: transparent; color: var(--danger); border: 1.5px solid rgba(193,92,74,.4); }
.btn--danger:hover{ background: rgba(193,92,74,.12); }

/* ---------- FAB ---------- */
.fab{
  position: fixed; right: 28px; bottom: 28px;
  width: 58px; height:58px; border-radius:50%;
  background: radial-gradient(circle at 30% 25%, var(--ochre-bright), var(--ochre));
  color:#241505; border:0; cursor:pointer;
  display:grid; place-items:center;
  box-shadow: 0 10px 30px -8px rgba(201,138,61,.6), inset 0 0 0 1px rgba(255,255,255,.25);
  transition: transform .15s;
  z-index: 40;
}
.fab:hover{ transform: scale(1.06) rotate(90deg); }
@media (max-width: 720px){ .fab{ display:none; } }

/* ---------- Bottom nav (mobile) ---------- */
.bottomnav{ display:none; }
@media (max-width: 720px){
  .bottomnav{
    display:flex; align-items:center; justify-content:space-around;
    position: fixed; left:0; right:0; bottom:0;
    background: rgba(15,26,20,.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--ink-line);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    z-index: 40;
  }
  .bottomnav__btn{
    background:none; border:0; color: var(--parchment-dim);
    display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size: 10.5px; font-weight:600; padding:4px 14px; cursor:pointer;
  }
  .bottomnav__btn.is-active{ color: var(--moss-bright); }
  .bottomnav__btn--add{
    width:52px; height:52px; border-radius:50%; margin-top:0;
    background: radial-gradient(circle at 30% 25%, var(--ochre-bright), var(--ochre));
    color:#241505; box-shadow: 0 8px 20px -6px rgba(201,138,61,.6);
    padding:0; display:flex; align-items:center; justify-content:center;
  }
  .app{ padding-bottom: 90px; }
  .loadmore{ padding-bottom: 34px; }
  .filters{ flex-wrap: wrap; overflow-x: visible; }
}

/* ---------- Map view ---------- */
.map-el{ height: calc(100vh - 200px); min-height:420px; border-radius: var(--radius-m); overflow:hidden; border:1px solid var(--ink-line); }
@media (max-width: 720px){
  .map-el{
    height: calc(100vh - 260px);
    height: calc(100dvh - 260px); /* стабильная высота — не прыгает при скрытии/показе адресной строки */
  }
}
.leaflet-popup-content-wrapper{ background: var(--parchment); color: var(--ink); border-radius: 12px; }
.leaflet-popup-content{ margin: 10px 12px; font-family: var(--font-body); }
.map-popup img{ width:100%; height:90px; object-fit:cover; border-radius:8px; margin-bottom:6px; }
.map-popup__name{ font-family: var(--font-display); font-weight:600; font-size:14px; }

.my-location-marker{ position:relative; }
.my-location-marker__dot{
  position:absolute; top:5px; left:5px; width:8px; height:8px; border-radius:50%;
  background: var(--sky); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.my-location-marker__pulse{
  position:absolute; top:0; left:0; width:18px; height:18px; border-radius:50%;
  background: var(--sky); opacity:.5; animation: locpulse 2s ease-out infinite;
}
@keyframes locpulse{
  0%{ transform: scale(.3); opacity:.55; }
  100%{ transform: scale(1.6); opacity:0; }
}

/* ---------- Modal ---------- */
.modal{ position: fixed; inset:0; z-index: 60; display:none; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(6,10,8,.6); backdrop-filter: blur(2px); animation: fadeIn .2s ease; }

.modal--lightbox{ z-index:70; cursor: zoom-out; }
.modal--lightbox .modal__backdrop{ background: rgba(6,10,8,.94); backdrop-filter:none; }
.lightbox__img{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  max-width:94vw; max-height:94vh; object-fit:contain;
  border-radius: var(--radius-s); box-shadow: var(--shadow-pop);
}
.modal__sheet{
  position:relative;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  max-width: 520px; width: 92%;
  margin: 4vh auto;
  max-height: 92vh; overflow-y:auto;
  border-radius: var(--radius-l);
  padding: 10px 22px 24px;
  box-shadow: var(--shadow-pop);
  animation: pop .22s cubic-bezier(.2,.9,.3,1.2);
}
.modal__sheet--wide{ max-width: 720px; padding-top: 0; }
@keyframes pop{ from{ transform: translateY(16px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }
.modal__handle{ width:38px; height:4px; border-radius:99px; background: var(--ink-line); margin: 10px auto 4px; }
.modal__head{ display:flex; align-items:center; justify-content:space-between; padding: 6px 0 10px; }
.modal__head h2{ font-family: var(--font-display); font-size:20px; margin:0; }
.iconbtn{ background: var(--ink-line); border:0; color: var(--parchment); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:14px; }
.modal__close-abs{ position:absolute; top:14px; right:14px; z-index:2; background: rgba(15,26,20,.75); }
.modal__actions{ display:flex; gap:10px; justify-content:flex-end; margin-top: 18px; }
@media (max-width:520px){
  .modal__sheet{ width:100%; margin: auto 0 0; border-radius: var(--radius-l) var(--radius-l) 0 0; max-height: 94vh; position:absolute; bottom:0; left:0; }
  .modal__actions{ flex-direction: column-reverse; }
  .modal__actions .btn{ width:100%; }
}

/* ---------- Form ---------- */
.form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; flex:1; }
.field-row{ display:flex; gap:12px; }
@media (max-width:480px){ .field-row{ flex-direction:column; } }
.field label{ font-size:12.5px; font-weight:600; color: var(--parchment-dim); }
.field input, .field select, .field textarea{
  background: var(--ink); border: 1px solid var(--ink-line); color: var(--parchment);
  border-radius: var(--radius-s); padding: 10px 12px; font-size:14px; resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--moss-bright); }
.hint{ font-size: 12px; color: var(--parchment-dim); margin: -8px 0 0; line-height:1.4; }

.photo-drop{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio: 16/10; border-radius: var(--radius-m);
  border: 1.5px dashed var(--ink-line);
  background: var(--ink);
  cursor:pointer; overflow:hidden;
  transition: border-color .15s;
}
.photo-drop:hover{ border-color: var(--moss); }
.photo-drop__placeholder{ display:flex; flex-direction:column; align-items:center; gap:8px; color: var(--parchment-dim); font-size:13px; }
.photo-drop img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Multi-photo preview (add form) ---------- */
.photo-preview-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(72px,1fr)); gap:8px; }
.photo-preview-list__item{ position:relative; aspect-ratio:1; border-radius: var(--radius-s); overflow:hidden; background: var(--ink); border:1px solid var(--ink-line); }
.photo-preview-list__item img{ width:100%; height:100%; object-fit:cover; }
.photo-preview-list__remove{
  position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%;
  background: rgba(15,26,20,.78); color:#fff; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1;
}
.photo-preview-list__cover{
  position:absolute; bottom:3px; left:3px; background: rgba(15,26,20,.78); color: var(--parchment);
  font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:999px;
}

/* ---------- Detail view ---------- */
.detail__photo{ width: calc(100% + 44px); margin: 0 -22px 16px; aspect-ratio: 4/3; background:#000; }
.detail__photo img{ width:100%; height:100%; object-fit:cover; }

.detail__gallery{ width: calc(100% + 44px); margin: 0 -22px 16px; }
.detail__photo-main{ aspect-ratio: 4/3; background:#000; }
.detail__photo-main img{ width:100%; height:100%; object-fit:cover; cursor: zoom-in; }
.detail__thumbs{ display:flex; gap:8px; padding: 10px 22px 0; overflow-x:auto; }
.detail__thumb{
  position:relative; flex: 0 0 56px; width:56px; height:56px; border-radius: var(--radius-s);
  overflow:hidden; border:2px solid transparent; cursor:pointer; background: var(--ink-soft);
}
.detail__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.detail__thumb.is-active{ border-color: var(--moss-bright); }
.detail__thumb--add{
  display:flex; align-items:center; justify-content:center; border:1.5px dashed var(--ink-line);
  color: var(--parchment-dim); font-size:22px; font-weight:300;
}
.detail__thumb--add:hover{ border-color: var(--moss); color: var(--parchment); }
.detail__thumb__remove{
  position:absolute; top:1px; right:1px; width:16px; height:16px; border-radius:50%;
  background: rgba(15,26,20,.82); color:#fff; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:10px; line-height:1;
}
.detail__body{ padding: 0 2px 4px; }
.detail__tagrow{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.detail h2{ font-family: var(--font-display); font-size: 26px; margin: 0 0 2px; }
.detail__latin{ font-family: var(--font-display); font-style:italic; color: var(--parchment-dim); margin: 0 0 14px; font-size:15px; }
.detail__desc{ line-height:1.65; color: var(--parchment); font-size:14.5px; margin: 0 0 16px; }
.detail__notes{ background: var(--ink); border:1px solid var(--ink-line); border-radius: var(--radius-s); padding: 12px 14px; font-size:13.5px; line-height:1.6; margin-bottom:16px; white-space: pre-wrap; }
.detail__facts{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom: 18px; }
.detail__fact{ background: var(--ink); border:1px solid var(--ink-line); border-radius: var(--radius-s); padding:10px 12px; }
.detail__fact-label{ font-size:11px; color: var(--parchment-dim); text-transform:uppercase; letter-spacing:.4px; }
.detail__fact-value{ font-size:13.5px; font-weight:600; margin-top:2px; }
.detail__wiki{ color: var(--ochre-bright); font-size: 13px; font-weight:600; text-decoration:none; }
.detail__wiki:hover{ text-decoration: underline; }
.detail__map{ height: 180px; border-radius: var(--radius-s); overflow:hidden; margin-bottom:16px; border:1px solid var(--ink-line); }
.detail__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Toast ---------- */
.toast{
  position: fixed; left:50%; bottom: 24px;
  transform: translateX(-50%) translateY(calc(100% + 110px));
  background: var(--ink-soft); border:1px solid var(--ink-line); color: var(--parchment);
  padding: 12px 18px; border-radius: 999px; font-size: 13.5px; box-shadow: var(--shadow-pop);
  transition: transform .25s ease; z-index: 100; max-width: 90vw;
  pointer-events: none;
}
.toast.is-show{ transform: translateX(-50%) translateY(0); pointer-events: auto; }
@media (max-width:720px){ .toast{ bottom: 84px; } }

/* ---------- Skeleton loading ---------- */
.skeleton{ background: linear-gradient(90deg, var(--ink-soft) 25%, var(--ink-line) 37%, var(--ink-soft) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-m); aspect-ratio: 4/3; }
@keyframes shimmer{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }