:root {
  --bg: #F4F7F4;
  --card: #FFFFFF;
  --card-2: #F9FBF8;
  --ink: #1F2A24;
  --muted: #5C6B63;
  --plant: #3F6B55;
  --sage: #6F8F78;
  --berry: #A85B63;
  --line: #D7DFD8;
  --r: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Golos Text", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
}
a { color: var(--sage); text-decoration: none; }
a:hover { color: var(--plant); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
header {
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 8;
  backdrop-filter: blur(8px);
}
.nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 14px 0;
}
.brand {
  color: var(--plant); font-weight: 650; letter-spacing: -.02em;
  margin-right: auto; font-size: 17px;
}
.nav-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.nav-links a { color: var(--muted); font-size: 15px; }
.nav-links a.active { color: var(--plant); }
.hero { padding: 56px 0 28px; display: grid; gap: 28px; }
@media (min-width: 860px) {
  .hero-split { grid-template-columns: 1.15fr .85fr; align-items: center; }
}
h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.12; letter-spacing: -.03em; margin: 0 0 12px; font-weight: 650; }
h2 { font-size: 26px; letter-spacing: -.02em; margin: 0 0 10px; font-weight: 650; }
h3 { font-size: 20px; margin: 0 0 8px; font-weight: 650; }
.lead { color: var(--muted); font-size: 19px; margin: 0 0 22px; max-width: 38em; }
.row { display: grid; gap: 16px; }
@media (min-width: 720px) {
  .row-2 { grid-template-columns: 1fr 1fr; }
  .row-3 { grid-template-columns: repeat(3, 1fr); }
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
}
.card.post { padding:14px 16px 12px; margin:0 0 12px; }
.feed { display:flex; flex-direction:column; gap:0; }
.card.soft { background: var(--card-2); }
.plant {
  min-height: 280px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background:
    radial-gradient(80% 70% at 70% 40%, #e7efe8 0%, #f4f7f4 70%),
    linear-gradient(#f9fbf8, #eef3ee);
  display: grid; place-items: center;
  color: var(--plant);
}
.plant svg { width: 160px; height: 160px; opacity: .85; }
.btn {
  display: inline-block;
  background: var(--sage);
  color: #fff;
  border: 1px solid var(--sage);
  padding: 11px 16px;
  border-radius: 14px;
  font: inherit;
  cursor: pointer;
}
.btn:hover { background: var(--plant); border-color: var(--plant); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--plant);
  border: 1px solid var(--line);
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
label { display: block; font-size: 14px; color: var(--muted); margin: 12px 0 6px; }
select, input, textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); font: inherit;
}
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pill {
  font-size: 12px; color: var(--muted);
  background: var(--card-2);
  border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 999px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--berry); }
.dot.white { background: #d9c98a; }
.dot.black { background: #3a3533; }
.dot.rose { background: var(--berry); }
.dot.green { background: var(--plant); }
.month {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--r);
  padding: 16px;
}
.month.now { background: #eef3ef; border-color: #c5d4c8; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { border-bottom: 1px solid var(--line); text-align: left; padding: 10px 6px; vertical-align: top; }
.small { font-size: 14px; color: var(--muted); }
footer { padding: 40px 0 48px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); margin-top: 48px; }
.ask {
  position: fixed; right: 18px; bottom: 18px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; color: var(--plant);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 12px; text-align: center; line-height: 1.15;
}
section.block { padding: 12px 0 28px; }
.pass dt { color: var(--muted); font-size: 13px; }
.pass dd { margin: 0 0 10px; }
@media (max-width: 640px) {
  .brand { width: 100%; margin-bottom: 4px; }
}
.cab { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .cab { grid-template-columns: 1.4fr .7fr; align-items: start; }
}
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.cal-dow { font-size: 12px; color: var(--muted); text-align: center; }
.cal-day {
  min-height: 56px; height: 56px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; padding: 4px; text-align: left; cursor: pointer; font: inherit;
  overflow: hidden;
}
.cal-day.treat-day { background: #F4EEDC; border-color: #E2D4A8; }
.cal-day:hover { border-color: var(--sage); }
.cal-day.empty { background: transparent; border-color: transparent; cursor: default; }
.cal-day.today { border-color: var(--plant); }
.cal-day.plan { background: #eef3ef; }
.cal-day .n { font-size: 13px; color: var(--muted); }
.cal-day .mark { font-size: 11px; color: var(--plant); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disease-btn {
  display: block; width: 100%; text-align: left; margin: 0 0 8px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; font: inherit; cursor: pointer; color: var(--ink);
}
.disease-btn:hover, .disease-btn.on { border-color: var(--sage); background: #fff; }
.modal-bg {
  position: fixed; inset: 0; background: rgba(31,42,36,.28);
  display: none; place-items: center; z-index: 20; padding: 16px;
}
.modal-bg.open { display: grid; }
.modal { max-width: 440px; width: 100%; }
.slogan { color: var(--muted); font-size: 14px; margin-top: 8px; }
.sort-thumb, .sort-hero, .media { width:100%; border-radius:14px; object-fit:cover; display:block; }
.sort-thumb { height:160px; margin-bottom:10px; }
.sort-hero { max-height:420px; }
.sort-card { color:inherit; display:block; }
.status { font-size:12px; margin-left:8px; }
.status.on { color: var(--plant); }
.status.off { color: var(--muted); }
.ava { position:relative; width:96px; }
.ava img, .ava-empty { width:96px; height:96px; border-radius:50%; object-fit:cover; background:#eef3ef; display:grid; place-items:center; font-size:28px; color:var(--plant); }
.profile { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.feed { display:grid; gap:16px; margin-top:16px; }
.post .media { margin:10px 0; max-height:420px; }
.comm-form { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.comm-form input { flex:1; min-width:140px; }
.scheme { background:var(--card-2); border:1px solid var(--line); border-radius:14px; padding:8px; margin:10px 0 14px; }

/* сезон в герое, 18 сек цикл */
.plant.season { overflow:hidden; }
.cycle .stem {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: stem 18s ease-in-out infinite;
}
.cycle .leaf { transform-origin: 100px 140px; opacity:0; animation: leaf 18s ease-in-out infinite; }
.cycle .l2 { transform-origin: 100px 118px; animation-delay: .4s; }
.cycle .l3 { transform-origin: 100px 96px; animation-delay: .8s; }
.cycle .bunch { fill:#7aa56a; opacity:0; transform-origin: 124px 128px; animation: bunch 18s ease-in-out infinite; }
.cycle .fallen { fill:#8a3d46; opacity:0; animation: fallberry 18s ease-in-out infinite; }
.cycle .snow { opacity:0; animation: winter 18s ease-in-out infinite; }
.cycle .ground { animation: ground 18s ease-in-out infinite; }
@keyframes stem {
  0% { stroke-dashoffset:140; }
  18% { stroke-dashoffset:0; }
  78% { stroke-dashoffset:0; }
  90%,100% { stroke-dashoffset:140; }
}
@keyframes leaf {
  0%,16% { opacity:0; transform:scale(.2); fill:#6F8F78; }
  28%,58% { opacity:1; transform:scale(1); fill:#3F6B55; }
  68% { opacity:1; fill:#A85B63; }
  78% { opacity:0; transform:translateY(40px) scale(.6); fill:#A85B63; }
  100% { opacity:0; }
}
@keyframes bunch {
  0%,28% { opacity:0; transform:scale(.2); fill:#8fbf7a; }
  40% { opacity:1; transform:scale(.7); fill:#8fbf7a; }
  52% { opacity:1; transform:scale(1); fill:#A85B63; }
  62% { opacity:0; transform:translateY(50px) scale(.5); fill:#6b3038; }
  100% { opacity:0; }
}
@keyframes fallberry {
  0%,58% { opacity:0; }
  64%,72% { opacity:1; }
  80%,100% { opacity:0; }
}
@keyframes winter {
  0%,76% { opacity:0; }
  84%,90% { opacity:.55; fill:#f4f7f4; }
  100% { opacity:0; }
}
@keyframes ground {
  0%,78% { fill:#e4ebe4; }
  84%,90% { fill:#eef3f6; }
  100% { fill:#e4ebe4; }
}
.cabinet-grid { display:grid; gap:20px; padding-bottom:40px; }
@media (min-width:800px){ .cabinet-grid { grid-template-columns: 180px 1fr; } }
.side { padding-top:36px; }
.side-link { display:block; padding:8px 10px; border-radius:12px; color:var(--muted); }
.side-link.on, .side-link:hover { background:#fff; color:var(--plant); border:1px solid var(--line); }
.ava.sm, .ava.sm img, .ava.sm .ava-empty { width:56px; height:56px; font-size:20px; }
.profile.vk { align-items:center; }
.meta-line { color:var(--muted); margin:0 0 8px; }
.lvl { text-transform:lowercase; }
.onair { color:#3F6B55; font-size:14px; font-weight:500; }
.onair .tick { display:inline-block; width:16px; height:16px; line-height:16px; text-align:center; border-radius:50%; background:#3F6B55; color:#fff; font-size:11px; margin-right:4px; }
.media-row { display:grid; gap:12px; align-items:start; }
@media (min-width:720px){ .media-row { grid-template-columns: 1fr 140px; } }
.rate-box { border:1px solid var(--line); border-radius:14px; padding:10px; background:var(--card-2); }
.rate-box .avg { font-size:28px; margin:0; font-weight:650; color:var(--plant); }
.stars { color:#A85B63; letter-spacing:1px; margin:0; }
.star-form { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.star-btn { border:1px solid var(--line); background:#fff; border-radius:8px; padding:2px 6px; font:inherit; cursor:pointer; color:var(--ink); }
.comm-line { background:var(--card-2); border-radius:12px; padding:8px 10px; margin:6px 0; }
.vk-card { background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-top:24px; }
.vk-cover { height:180px; background:linear-gradient(180deg,#9bb7a4 0%, #6F8F78 55%, #3F6B55 100%); }
.vk-head { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; padding:0 20px 16px; margin-top:-56px; }
.ava.lg, .ava.lg img, .ava.lg .ava-empty {
  width:128px; height:128px; border-radius:50%; object-fit:cover;
  border:4px solid #fff; background:#eef3ef; font-size:42px;
  display:grid; place-items:center; color:var(--plant);
}
.vk-info { flex:1; min-width:180px; }
.vk-info h1 { font-size:28px; margin:0 0 4px; }
.vk-actions { display:flex; gap:8px; flex-wrap:wrap; padding-bottom:8px; }
.vk-tabs { display:flex; gap:8px 18px; flex-wrap:wrap; border-top:1px solid var(--line); padding:12px 20px; }
.vk-tabs a { color:var(--muted); }
.vk-tabs a:hover { color:var(--plant); }
.onair { color:#2f8a4e !important; font-weight:650; }
.onair .tick { background:#2f8a4e !important; color:#fff !important; }
.star-btn { border:none !important; background:transparent !important; color:#E0B000 !important; font-size:20px; padding:0 2px; box-shadow:none; }
.stars { color:#E0B000 !important; }
.msg-grid { display:grid; gap:16px; }
@media (min-width:800px){ .msg-grid { grid-template-columns: 220px 1fr; } }
.vk-head.compact { margin-top:-28px; align-items:center; }
.vk-head.compact .ava.sm, .vk-head.compact .ava.sm img, .vk-head.compact .ava.sm .ava-empty {
  width:64px; height:64px; border:3px solid #fff; font-size:22px;
}
.vk-side { display:flex; flex-direction:column; gap:6px; min-width:160px; }
.vk-side a { color:var(--muted); font-size:15px; }
.vk-side a:hover { color:var(--plant); }
.onair { color:#22a34a !important; }
.onair .tick { background:#22a34a !important; color:#fff !important; }
img, video, svg { max-width:100%; height:auto; }
input, select, textarea, button { max-width:100%; min-width:0; box-sizing:border-box; }
.card, .post, .feed { max-width:100%; overflow:hidden; }
.media { max-width:100%; height:auto; max-height:360px; object-fit:cover; }
.nav { max-width:100%; }
.nav-links { max-width:100%; }
.disc-rail {
  display:flex; gap:12px; overflow-x:auto; overflow-y:hidden;
  padding:4px 0 12px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.disc-tile {
  flex:0 0 220px; width:220px; height:150px;
  padding:14px; overflow:hidden;
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  color:#1F2A24;
}
.disc-tile b {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.disc-tile p { margin-top:auto; }
.auth-box { max-width:420px; }
body { display:block; }
.rail {
  position:fixed !important;
  left: max(0px, calc((100vw - 216px - 1080px) / 2 - 8px));
  top:72px; bottom:auto; width:200px;
  max-height:calc(100vh - 88px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  z-index:20; overflow:auto;
}
.rail-in { padding:16px 10px 32px; display:block !important; }
.rail-a {
  display:block !important; color:#1F2A24; padding:10px 12px;
  border-radius:10px; margin:0 0 4px; white-space:normal;
}
.rail-a.on, .rail-a:hover { background:#eef3ef; color:var(--plant); }
.stage { margin-left: max(216px, calc((100vw - 216px - 1080px) / 2 + 204px)); min-height:70vh; }
.auth-box { max-width:420px; margin:0 auto 40px; padding:24px; }
.drop {
  display:block; margin-top:12px; padding:22px 14px; text-align:center;
  border:1px dashed var(--line); border-radius:14px; background:var(--card-2); cursor:pointer; color:var(--muted);
}
.drop strong { display:block; color:var(--ink); }
.post .media, .media-row img, img.media, video.media {
  max-width:100%; width:100%; height:auto; max-height:420px; object-fit:cover; border-radius:12px;
}
.media-row { grid-template-columns: 1fr 120px; }

.nav-links{display:none!important}
@media (min-width:821px){
  header .brand{
    position:fixed;
    left:max(8px,calc((100vw - 216px - 1080px) / 2 + 8px));
    top:44px;
    margin-left:0!important;
    z-index:31;
    color:#3F6B55;
  }
}
.stage{margin-left: max(216px, calc((100vw - 216px - 1080px) / 2 + 204px));}

.burger{display:none;border:1px solid #D7DFD8;background:#fff;border-radius:10px;width:40px;height:36px;margin-right:8px;font-size:18px;cursor:pointer}
.rail-mask{display:none}
@media (max-width:820px){
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .rail{position:fixed!important;left:0!important;transform:translateX(-110%);transition:transform .2s ease;width:78vw!important;max-width:280px;top:0!important;bottom:0;z-index:60!important;background:#fff;border-right:1px solid #D7DFD8}
  body.rail-open .rail{transform:translateX(0)}
  body.rail-open .rail-mask{display:block;position:fixed;inset:0;background:rgba(31,42,36,.25);z-index:50}
  .stage{margin-left:0!important}
  .wrap{width:auto;padding-left:14px;padding-right:14px}
  .msg-grid{display:block!important}
  #thread{max-height:50vh}
  .bubble{word-break:break-word}
  header .wrap.nav{display:flex;align-items:center}
}

.msg-dot{display:none;width:9px;height:9px;margin-left:8px;border-radius:50%;background:#22a34a;vertical-align:middle}
.msg-dot.on{display:inline-block}
.sort-card{cursor:pointer}
.sort-full .sort-hero{width:100%;max-height:320px;object-fit:cover;border-radius:14px}
.shop-row{padding:10px 0;border-bottom:1px solid var(--line)}
.shop-row.near{background:#eef3ef;margin:0 -12px;padding:10px 12px;border-radius:12px}

.home-shop { max-width:280px; }
.home-shop img.sort-thumb,
img.sort-thumb {
  width:100%;
  height:140px !important;
  object-fit:contain !important;
  background:#fff;
  border-radius:12px;
}
.post { overflow:hidden; }
.post .media,
.media-row img,
img.media,
video.media {
  max-width:100% !important;
  width:100% !important;
  height:auto !important;
  max-height:280px !important;
  object-fit:contain !important;
  background:#fff;
  border-radius:12px;
}
.album{position:relative;margin:10px 0 14px;border-radius:14px;overflow:hidden;background:#eef3ef;touch-action:pan-y}
.album-track{display:flex;transition:transform .28s ease;will-change:transform}
.album-slide{min-width:100%;flex:0 0 100%}
.album-slide img,.album-slide video{width:100%!important;height:auto!important;max-height:480px!important;object-fit:cover!important;display:block;background:#eef3ef}
.album-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#1F2A24;font-size:22px;line-height:36px;cursor:pointer;z-index:2}
.album-prev{left:8px}
.album-next{right:8px}
.album-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:6px;justify-content:center;z-index:2}
.album-dot{width:7px;height:7px;border-radius:50%;border:0;background:rgba(255,255,255,.55);padding:0;cursor:pointer}
.album-dot.on{background:#fff}
.album-count{position:absolute;top:10px;right:10px;background:rgba(31,42,36,.55);color:#fff;font-size:12px;padding:3px 8px;border-radius:999px;z-index:2}
.art-body p{margin:0 0 14px}
.art-fig{margin:8px -4px 18px;border-radius:14px;overflow:hidden;background:#fff}
.art-fig img,.art-fig video{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;display:block}
.art-h{font-size:22px;font-weight:650;margin:18px 0 10px}
.art-big{font-size:20px}
.art-file a{color:#3F6B55}
.ed-wrap{border:1px solid #D7DFD8;border-radius:14px;background:#fff;overflow:hidden}
.ed-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0!important;padding:8px;background:#F4F7F4;border-bottom:1px solid #D7DFD8}
.ed-bar .ed-btn,.ed-bar .ed-sz,.ed-bar .ed-photo{
  display:inline-flex!important;align-items:center;justify-content:center;
  width:auto!important;max-width:none!important;margin:0!important;
  border:1px solid #D7DFD8;background:#fff;color:#1F2A24;
  border-radius:8px;padding:6px 10px;font-size:13px;line-height:1;cursor:pointer
}
.ed-bar .ed-btn{min-width:36px;font-weight:650}
.ed-sizes{display:inline-flex;gap:3px;padding:2px;border:1px solid #D7DFD8;border-radius:8px;background:#fff}
.ed-bar .ed-sz{padding:5px 7px;min-width:28px;border:0;background:transparent;color:#5C6B63}
.ed-bar .ed-sz:hover{background:#E8EEE9;border-radius:6px}
.ed-bar .ed-photo{background:#3F6B55!important;border-color:#3F6B55!important;color:#fff!important;font-weight:650;margin-left:auto!important}
.ed-box{min-height:280px;padding:14px 16px;outline:none;font-size:16px;line-height:1.55}
.ed-box:empty:before{content:attr(data-placeholder);color:#9AA89F}
.ed-box img{max-width:100%;border-radius:12px}
.ed-box h2{font-size:22px;margin:12px 0 8px}

.art-table,.art-body table{width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:15px}
.art-table th,.art-table td,.art-body th,.art-body td{border:1px solid #D7DFD8;padding:8px 10px;text-align:left;vertical-align:top}
.art-table th,.art-body th{background:#F4F7F4;font-weight:650}
.art-body{overflow-x:auto}