/* --------------------------
   Базовые переменные по умолчанию (тёмная тема)
   -------------------------- */
:root{
  --logo-dark: 13,55,63;
  --logo-teal: 17,195,176;
  --logo-cyan: 78,224,208;
  --logo-muted: 160,180,190;

  --page-bg: radial-gradient(1200px 900px at 18% 18%, rgba(var(--logo-dark),0.20), transparent 70%),
             radial-gradient(1000px 800px at 82% 82%, rgba(var(--logo-teal),0.09), transparent 70%),
             rgb(8,14,18);

  --card-bg: rgba(18,22,28,0.92);
  --card-bg-2: rgba(14,18,22,0.96);
  --toc-bg: rgba(255,255,255,0.02);

  --text-base: rgba(236,245,246,0.96);
  --text-muted: rgba(190,200,205,0.70);
  --lead-color: rgba(210,225,225,0.72);

  --accent: rgba(var(--logo-teal),0.98);
  --accent-2: rgba(var(--logo-cyan),0.95);

  --btn-border: rgba(255,255,255,0.06);
  --btn-bg: linear-gradient(90deg, rgba(var(--logo-teal),0.12), rgba(var(--logo-cyan),0.10));

  --radius: 14px;
  --site-max-width: 1100px;
  --page-padding: 20px;
  --gap: 24px;
}

html[data-theme='light']{
  --page-bg: linear-gradient(135deg, rgba(236,245,246,1), rgba(245,250,251,1));
  --card-bg: rgba(255,255,255,0.98);
  --card-bg-2: rgba(250,251,252,0.98);
  --toc-bg: rgba(6,6,8,0.02);

  --text-base: rgba(20,26,30,0.95);
  --text-muted: rgba(70,80,90,0.70);
  --lead-color: rgba(70,85,90,0.60);

  --accent: rgba(17,195,176,0.98);
  --accent-2: rgba(78,224,208,0.95);

  --btn-border: rgba(20,20,30,0.08);
  --btn-bg: linear-gradient(90deg, rgba(var(--logo-teal),0.08), rgba(var(--logo-cyan),0.06));
}

/* --------------------------
   СБРОС И БАЗОВЫЙ ФОН
   -------------------------- */
*{box-sizing:border-box}
html, body { height: 100%; }
body{
  margin: 0;
  font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial;
  color: var(--text-base);
  background: var(--page-bg);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------
   ВЕРХНЯЯ ПАНЕЛЬ
   -------------------------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
}
.brand{font-weight:700;font-size:18px;text-decoration:none;color:var(--text-base)}
.brand .dot{color:var(--accent);margin-left:6px}

.controls{display:flex;gap:10px;align-items:center}
.btn{
  background:transparent;
  border:1px solid var(--btn-border);
  padding:8px 12px;border-radius:10px;
  color:var(--text-base);
  text-decoration:none;
  font-size:14px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px var(--shadow-teal-strong);
}
#theme-toggle{background:var(--btn-bg);border:0;padding:8px;border-radius:10px;font-size:18px;cursor:pointer}

/* --------------------------
   Сетка: оглавление + контент
   -------------------------- */
.container{
  display:grid; grid-template-columns:260px 1fr; gap:var(--gap);
  max-width:var(--site-max-width); margin:28px auto; padding:0 var(--page-padding);
}

.toc{
  position:sticky; top:28px;
  background: var(--toc-bg);
  padding:14px; border-radius:12px; min-height:120px; color:var(--text-muted);
  box-shadow:0 6px 20px rgba(10,10,12,0.15);
}
.toc strong{display:block;margin-bottom:8px;color:var(--text-base)}
.toc a{display:block;text-decoration:none;color:var(--text-muted);padding:8px;border-radius:8px;margin:6px 0;font-size:14px}
.toc a:hover{background:rgba(0,0,0,0.02); color:var(--accent)}

.content{
  padding:20px;border-radius:16px;
  background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2));
  backdrop-filter: blur(6px);
  box-shadow:0 10px 40px rgba(8,12,20,0.45);
}

.doc-title{margin:0 0 6px 0;font-size:26px;color:var(--accent)}
.lead{color:var(--lead-color); margin-top:6px; font-size:15px}

/* --------------------------
   Блоки соглашения: карточки с hover-анимацией
   -------------------------- */
.agr-block{
  position:relative;
  background: linear-gradient(180deg, var(--shadow-teal-strong), var(--shadow-cyan-glow));
  padding:18px;border-radius:12px;margin:14px 0;
  overflow:visible;box-shadow: 0 6px 18px var(--shadow-teal-medium-light);
  transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s ease, filter .28s ease;
  will-change: transform;
}

/* украшение слева */
.agr-block::before{
  content:""; position:absolute; left:12px; top:12px; width:6px; height:36px; border-radius:6px;
  background: linear-gradient(180deg, var(--shadow-cyan-glow), var(--primary-blue));
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
}

.agr-block h2{margin:0 0 8px 20px;font-size:18px;color:var(--accent)}
.agr-block p, .agr-block li{margin:0 0 10px 0; line-height:1.56; color:var(--text-base); padding-left:8px}
.agr-block ul{margin:6px 0 12px 0; padding-left:28px}

.muted{color:rgba(200,200,210,0.55); font-size:13px}

.footer{ max-width:var(--site-max-width); margin:26px auto; padding:18px; color:rgba(200,200,210,0.56); text-align:center }

/* --------------------------
   Адаптив
   -------------------------- */
@media (max-width:920px){ .container{ grid-template-columns:1fr } .toc{ display:none } }
@media (max-width:520px){ .brand{ font-size:16px } .agr-block{ padding:14px } .agr-block::before{ display:none } }

@media (prefers-reduced-motion: reduce){
  .agr-block, .agr-block:hover, .agr-block:focus-within { transition:none !important; transform:none !important; box-shadow:none !important }
}