:root{
  --wood:#b98a5e; --wood-dark:#8a6440; --wood-light:#d8b48c;
  --sage:#9fb8a2; --sage-soft:#cfdccb; --green:#2f6b3c; --green-deep:#1f4d2b; --green-light:#5f9a68;
  --milk:#faf7f0; --beige:#efe4d2; --sand:#e2d3ba;
  --ink:#2a2a24; --muted:#6f7266; --line:#e3dccd; --card:#fffdf8;
  --danger:#b5463c; --warn:#c98a2f; --ok:#3f8449;
  --r-lg:22px; --r-md:16px; --r-sm:11px;
  --shadow:0 10px 30px rgba(74,58,38,.10);
  --shadow-sm:0 4px 14px rgba(74,58,38,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--milk);
  color:var(--ink);
  font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-text-size-adjust:100%;
  background-image:radial-gradient(circle at 12% 8%, rgba(159,184,162,.20), transparent 42%),
                   radial-gradient(circle at 88% 4%, rgba(217,180,140,.18), transparent 38%);
  background-attachment:fixed;
  padding-bottom:86px;
}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.2;margin:0}
h1{font-size:26px}
h2{font-size:22px}
h3{font-size:18px}
p{margin:0 0 10px}
a{color:var(--green)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted);font-size:15px}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Шапка */
.topbar{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(250,247,240,.97),rgba(250,247,240,.88));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:10px 0;
}
.topbar-in{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,var(--wood-light),var(--wood-dark));display:grid;place-items:center;box-shadow:var(--shadow-sm);flex:0 0 auto}
.brand-mark svg{width:24px;height:24px}
.brand-txt{min-width:0}
.brand-name{font-family:Georgia,serif;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{
  position:relative;width:42px;height:42px;border-radius:13px;border:1px solid var(--line);
  background:var(--card);display:grid;place-items:center;font-size:19px;box-shadow:var(--shadow-sm)
}
.icon-btn:active{transform:translateY(1px)}
.badge-dot{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;border-radius:10px;background:var(--danger);color:#fff;font-size:12px;line-height:20px;padding:0 5px;font-weight:700}

/* Навигация */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,253,248,.97);border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(74,58,38,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav button{
  border:0;background:none;padding:8px 2px 10px;display:grid;justify-items:center;gap:3px;
  font-size:11px;color:var(--muted);min-height:56px;white-space:nowrap;min-width:0;
}
.nav button .ic{font-size:20px;line-height:1}
.nav button.on{color:var(--green-deep);font-weight:600}
.nav button.on .ic{transform:translateY(-1px)}
/* На телефоне нижняя навигация — только пять кнопок; сводка внизу прячется,
   чтобы не занимать лишнюю строку сетки и не перекрывать экран */
.nav .nav-foot{display:none}

/* Секции */
.page{padding:20px 0 30px;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.page-head .lead{font-size:15px;color:var(--muted);max-width:52ch}
.spacer{margin-left:auto}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
@media(min-width:900px){
  body{padding-bottom:0;padding-left:250px}
  .nav .nav-foot{display:block}
  .nav{position:fixed;left:0;top:0;bottom:0;right:auto;width:250px;grid-template-columns:1fr;align-content:start;gap:4px;padding:18px 12px;border-top:0;border-right:1px solid var(--line)}
  .nav button{grid-template-columns:28px 1fr;justify-items:start;align-items:center;gap:10px;padding:12px 14px;font-size:15px;border-radius:14px;min-height:48px}
  .nav .nav-foot{margin-top:auto;padding:12px 14px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
  .topbar{left:250px}
  .wrap{max-width:960px}
}


/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important
  }
  .page{animation:none}
  .nav button.on .ic{transform:none}
  .btn:active{transform:none}
}

/* Узкие телефоны (320px): подписи нижней навигации и сетки не разъезжаются */
@media (max-width:360px){
  .wrap{padding:0 12px}
  .nav button{font-size:10px;padding:8px 1px 10px;letter-spacing:-.01em}
  .nav button .ic{font-size:18px}
  .hero{padding:16px}
  .hero h1{font-size:25px}
  .hero-stat{min-width:76px;padding:7px 10px}
  .hero-stat b{font-size:20px}
  .g2{grid-template-columns:1fr}
  .g3{grid-template-columns:repeat(2,1fr)}
  .section-title h2{font-size:18px}
  h1{font-size:23px}
}