/* ==========================================================================
   EP7 web2 — дизайн «карточки разделов»
   Шрифт Manrope, тёплый фон, зелёный акцент. Светлая и тёмная темы.
   Тема применяется по data-theme (ставит скрипт) либо по системной
   (prefers-color-scheme), если пользователь не выбирал вручную.
   ========================================================================== */
:root{
  --bg:#F8F6F2; --card:#FFFFFF; --ink:#2B2A27; --ink-dim:#8A857C;
  --line:#E7E2D9; --accent:#5C8368; --accent-soft:#EAF1EC; --accent-line:#BFD3C4;
  --on-accent:#FFFFFF;
  --font:'Manrope','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.16,.8,.24,1);
}

/* тёмная палитра — по системе, если тема не выбрана вручную */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1B1A17; --card:#232220; --ink:#ECE8E0; --ink-dim:#9A948A;
    --line:#35332E; --accent:#7BA588; --accent-soft:#232F28; --accent-line:#3F5548;
    --on-accent:#12180F;
  }
}
/* тёмная палитра — по явному выбору */
:root[data-theme="dark"]{
  --bg:#1B1A17; --card:#232220; --ink:#ECE8E0; --ink-dim:#9A948A;
  --line:#35332E; --accent:#7BA588; --accent-soft:#232F28; --accent-line:#3F5548;
  --on-accent:#12180F;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; min-height:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1.25rem;
  -webkit-font-smoothing:antialiased;
  transition:background-color .4s var(--ease), color .4s var(--ease);
}

/* ---------- кнопка «назад» ---------- */
.back-btn{
  position:fixed; top:1.25rem; left:1.25rem; z-index:10;
  display:inline-flex; align-items:center; gap:.4rem;
  height:42px; padding:0 .85rem 0 .7rem;
  background:var(--card); color:var(--ink-dim);
  border:1px solid var(--line); border-radius:12px;
  font-family:var(--font); font-size:.9rem; font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background-color .3s var(--ease), transform .3s var(--ease);
}
.back-btn:hover{ color:var(--accent); border-color:var(--accent-line); transform:translateY(-1px); }
.back-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.back-btn svg{ width:18px; height:18px; display:block; }

/* ---------- переключатель темы ---------- */
.theme-toggle{
  position:fixed; top:1.25rem; right:1.25rem; z-index:10;
  display:grid; place-items:center;
  width:42px; height:42px;
  background:var(--card); color:var(--ink-dim);
  border:1px solid var(--line); border-radius:12px;
  cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background-color .3s var(--ease), transform .3s var(--ease);
}
.theme-toggle:hover{ color:var(--accent); border-color:var(--accent-line); transform:translateY(-1px); }
.theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.theme-toggle svg{ width:19px; height:19px; display:block; }

/* иконка по эффективной теме (зеркалит логику токенов) */
.theme-toggle .sun{ display:none; }
.theme-toggle .moon{ display:block; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .moon{ display:none; }
  :root:not([data-theme="light"]) .theme-toggle .sun{ display:block; }
}
:root[data-theme="dark"] .theme-toggle .moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .sun{ display:block; }

/* ---------- сцена ---------- */
.stage{ width:100%; max-width:640px; }

.stage__rule{
  width:34px; height:3px; background:var(--accent);
  border-radius:2px; margin-bottom:.9rem;
}
.stage__title{
  font-weight:800; font-size:clamp(2.4rem,7vw,3.6rem);
  line-height:1.02; letter-spacing:-.015em; margin:0 0 .8rem;
}
.stage__label{
  font-size:.9rem; color:var(--ink-dim); font-weight:500; margin:0 0 1.8rem;
}

/* ---------- сетка карточек ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.1rem;
}

.card{
  position:relative;
  background:var(--card); color:var(--ink);
  text-decoration:none;
  padding:1.9rem 1.9rem 2rem;
  min-height:176px;
  display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid var(--line); border-radius:16px;
  overflow:hidden;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:background-color .6s var(--ease), border-color .6s var(--ease),
             box-shadow .6s var(--ease), transform .6s var(--ease);
}
.card:hover, .card:focus-visible{
  background:var(--accent-soft);
  border-color:var(--accent-line);
  transform:translateY(-6px);
  box-shadow:0 14px 24px -16px rgba(0,0,0,.35);
}
.card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.card__icon{
  position:absolute; top:-16px; right:-16px;
  width:88px; height:88px; color:var(--accent); opacity:.85;
}
.card__icon svg{ width:100%; height:100%; }

.card__body{ position:relative; z-index:1; }

.card__title-rule{
  width:22px; height:3px; background:var(--accent);
  border-radius:2px; margin-bottom:.6rem;
}

.card__head{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.card__title{
  font-weight:700; font-size:1.7rem; line-height:1.05;
  letter-spacing:-.01em; margin:0 0 .55rem;
}
.card__head .card__title{ margin-bottom:0; }

/* пометка на карточке (напр. приватный раздел) */
.card__tag{
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent-line); border-radius:999px;
  padding:.15rem .5rem; white-space:nowrap;
}
.card__head + .card__desc{ margin-top:.55rem; }

.card__desc{
  font-size:.9rem; color:var(--ink-dim); line-height:1.5;
  margin:0; font-weight:400; max-width:26ch;
}

/* приватная карточка — чуть выделяем рамкой акцента */
.card--private{ border-color:var(--accent-line); }

/* пустое меню */
.empty{
  padding:2.5rem; text-align:center; color:var(--ink-dim);
  background:var(--card); border:1px dashed var(--accent-line); border-radius:16px;
}
.empty code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.85em; color:var(--ink);
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  .card:hover, .card:focus-visible{ transform:none; }
}