/* ====== Font: Manrope ====== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

/* ====== CSS Vars (цвета/размеры) ====== */
:root{
  --bg:#161B22;          /* фон страницы */
  --fg:#BDBED2;          /* базовый текст */
  --muted:#9AA6B2;       /* вторичный текст */
  --border:#273445;      /* разделители/рамки */
  --card:#0F1622;        /* фон карточек/преформата */
  --card-bar:#0B111B;    /* верхняя панель окна кода */
  --code:#E6EDF3;        /* цвет кода */
  --link:#c7d2fe;        /* ссылки */
  --linkh:#e0e7ff;       /* hover ссылок */
  --accent:#10B981;      /* тост/акценты */
  --btn-b:#2B3A55;       /* границы кнопок */
  --btn-b-h:#3E5378;     /* границы кнопок (hover) */
  --shadow:0 6px 20px rgba(0,0,0,.28);
  --radius:10px;
  --collapsed:180px;     /* высота свернутого окна кода */
}

/* ====== База и принудительный тёмный фон ====== */
html,body{height:100%}
html{box-sizing:border-box;scroll-behavior:smooth}
*,*:before,*:after{box-sizing:inherit}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:#233040;color:#fff}

/* Пробиваем инлайновый белый фон в Записях/попапах/магазине */
html, body,
body[style],
#allrecords, .t-records, .t-body,
.t-container, .t-section,
.t-article, .t-blog, .t-blog__post, .post, .t-feed, .t-feed__post,
.t-popup, .t-popup__container,
.t-store__prod-popup__container {
  background-color:var(--bg) !important;
  color:var(--fg) !important;
}

/* ====== Ссылки и базовая типографика ====== */
a{color:var(--link);text-decoration:none}
a:hover{color:var(--linkh);text-decoration:underline}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em 1.25em}
hr{border:0;border-top:1px solid var(--border);margin:24px 0}

/* ====== Типографика (брейкпоинт 960px) ====== */
/* ≥960px */
@media (min-width:960px){
  h1{font-size:64px;line-height:1.15;margin:0 0 .5em}
  h2{font-size:42px;line-height:1.2;margin:0 0 .6em}
  h3{font-size:32px;line-height:1.25;margin:0 0 .6em}
  p{font-size:20px}
}

/* ===== MJ Prompt Windows (component-only) ===== */
/* Базовая карточка */
.mj-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mj-card:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 12px 28px rgba(0,0,0,.33);
}

/* Верхняя панель */
.mj-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 10px;
  background:var(--card-bar);
  border-bottom:1px solid var(--border);
}

/* Кнопки действий */
.mj-actions{display:flex;gap:8px}
.mj-btn{
  cursor:pointer;
  background:transparent;
  border:1px solid var(--btn-b);
  border-radius:8px;
  padding:6px 10px;
  transition:background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.mj-btn:hover{border-color:var(--btn-b-h)}
.mj-btn:active{transform:translateY(1px)}

/* Область кода (высота управляется классами) */
.mj-pre{margin:0;padding:14px;max-height:var(--collapsed);overflow:auto;transition:max-height .2s ease}
.mj-pre.mj-collapsed{max-height:var(--collapsed)}
.mj-pre.mj-expanded{max-height:800px}

/* Тост */
.mj-toast{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  background:var(--accent);
  color:#fff; /* специально: контраст на акцентном фоне */
  padding:8px 12px;border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:2147483647
}
.mj-toast.mj-show{opacity:1}

/* Скроллбар (опционально) */
.mj-pre::-webkit-scrollbar{width:8px;height:8px}
.mj-pre::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
.mj-pre::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

/* ===== Альтернативная тема: Glass (включить на контейнере data-mj-theme="glass") ===== */
[data-mj-theme="glass"] .mj-card{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  backdrop-filter:saturate(115%) blur(8px);
}
@supports not ((backdrop-filter: blur(8px))){
  [data-mj-theme="glass"] .mj-card{background:var(--card)}
}
[data-mj-theme="glass"] .mj-bar{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-bottom-color:rgba(255,255,255,.06);
}
[data-mj-theme="glass"] .mj-btn{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.12);
}
[data-mj-theme="glass"] .mj-btn:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.2);
}

/* ===== Новые UI‑переменные ===== */
:root{
  --ui-surface:#342C69;                 /* низкоконтрастные подложки */
  --ui-surface-08:rgba(52,44,105,.08);
  --ui-surface-12:rgba(52,44,105,.12);
  --ui-surface-16:rgba(52,44,105,.16);

  --ui-accent:#7450FF;                  /* мелкие акценты */
  --ui-accent-16:rgba(116,80,255,.16);  /* фокусы/тени */
  --ui-accent-24:rgba(116,80,255,.24);
}

/* ===== Акцент и курсор для форм ===== */
:where(input[type="checkbox"],input[type="radio"],input[type="range"],progress,meter,select){
  accent-color:var(--ui-accent);
}
:where(input,textarea,select){ caret-color:var(--ui-accent) }

/* ===== Фокус‑индикатор (дружественный к теме) ===== */
:where(button,.mj-btn,input,textarea,select):focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--ui-accent-24);
  border-color:var(--ui-accent);
}

/* ===== Ползунок (range) ===== */
input[type="range"]{
  -webkit-appearance:none; appearance:none;
  background:transparent; height:1.25rem; width:100%;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:4px; border-radius:999px; background:var(--ui-surface-16);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:var(--ui-accent);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 0 0 4px var(--ui-accent-16);
  margin-top:-5px; /* выравнивание по треку */
}
input[type="range"]::-moz-range-track{
  height:4px; border-radius:999px; background:var(--ui-surface-16);
}
input[type="range"]::-moz-range-progress{
  height:4px; border-radius:999px; background:var(--ui-accent);
}
input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:var(--ui-accent); border:1px solid rgba(255,255,255,.22);
  box-shadow:0 0 0 4px var(--ui-accent-16);
}

/* ===== Прогресс/метр ===== */
progress{
  width:100%; height:6px; border:0; border-radius:999px;
  background:var(--ui-surface-16); overflow:hidden;
}
progress::-webkit-progress-bar{ background:var(--ui-surface-16) }
progress::-webkit-progress-value{ background:var(--ui-accent) }
progress::-moz-progress-bar{ background:var(--ui-accent) }

meter{
  width:100%; height:6px; border:0; border-radius:999px;
  background:var(--ui-surface-16);
}
meter::-webkit-meter-bar{ background:var(--ui-surface-16); border:0 }
meter::-webkit-meter-optimum-value{ background:var(--ui-accent) }
meter::-webkit-meter-suboptimum-value{ background:color-mix(in srgb, var(--ui-accent) 65%, #f59e0b) }
meter::-webkit-meter-even-less-good-value{ background:#ef4444 }

/* ===== Тонкие скроллбары (общие и для .mj-pre) ===== */
:root{ scrollbar-color:rgba(255,255,255,.24) transparent; scrollbar-width:thin }
.mj-pre, body{
  scrollbar-color:rgba(255,255,255,.24) transparent;
  scrollbar-width:thin;
}
.mj-pre::-webkit-scrollbar, body::-webkit-scrollbar{width:8px;height:8px}
.mj-pre::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12); border-radius:8px;
  border:2px solid transparent; background-clip:padding-box;
}
.mj-pre::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.2);
}
.mj-pre::-webkit-scrollbar-track, body::-webkit-scrollbar-track{
  background:linear-gradient(transparent, var(--ui-surface-08) 20%, transparent);
}

/* ===== Мелкие акценты/разделители ===== */
.hr-thin{ height:1px; background:var(--ui-surface-12); border:0; margin:16px 0 }
.hairline{ border-top:1px solid var(--ui-surface-12) }
.icon-accent{ color:var(--ui-accent); fill:currentColor; stroke:currentColor }

/* ===== Кнопки компонента (если используете .mj-btn) ===== */
.mj-btn:hover{ border-color:var(--ui-accent) }
.mj-btn:focus-visible{ box-shadow:0 0 0 3px var(--ui-accent-24) }