/* ============================================================
   ARGEDA AI · общий стиль сайта
   Эталон — раздел «Изображения» (ai-image.html): его палитра совпадает с
   главной страницей. Здесь собрано то, что должно выглядеть одинаково везде:
   цвета, шапка, заголовки, кнопки, карточки, поля, сетка, подвал, телефон.
   Подключается ПЕРЕД собственным <style> страницы, чтобы страница могла
   при необходимости что-то дописать поверх.
   ============================================================ */

/* ---------- 1. токены ---------- */
:root{
  /* тёмная тема — основная, как на главной */
  --bg:#0f1113; --panel:#17191d; --panel2:#1f2226; --line:#2b2f36;
  --text:#f7f7f8; --muted:#a6adb8;
  --acc:#d6ff3b; --acc2:#b8e62a; --acc-ink:#111400;
  --danger:#ff7b7b; --ok:#4ade80;

  --r-s:9px; --r-m:12px; --r-l:16px; --r-xl:20px; --r-pill:999px;
  --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:20px; --sp-5:28px;
  --shadow-sm:0 2px 10px rgba(0,0,0,.18);
  --shadow:0 14px 40px rgba(0,0,0,.28);
  --head-h:54px;
  /* раскладка по образцу раздела «Музыка»: боковой столбец, поля, скругление */
  --side-w:400px; --gap:14px; --r:18px;
  --wrap:1180px;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Unbounded',var(--font);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f5f6f8; --panel:#fff; --panel2:#eef0f3; --line:#d9dde3;
  --text:#0e1116; --muted:#5b6470;
  --acc:#c7f52b; --acc2:#a9d91f; --acc-ink:#111400;
  --danger:#d64545; --ok:#15803d;
  --shadow-sm:0 2px 10px rgba(30,41,59,.06);
  --shadow:0 14px 40px rgba(30,41,59,.10);
  color-scheme:light;
}

/* ---------- 2. основа ---------- */
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:15px; line-height:1.45; min-height:100dvh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%}
:where(a,button,[tabindex],input,select,textarea):focus-visible{
  outline:2px solid var(--acc); outline-offset:2px;
}
::selection{ background:var(--acc); color:var(--acc-ink) }

/* рабочая область: одна ширина и одни поля на всех страницах */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:clamp(14px,2.5vw,22px) }
.wrap--narrow{ max-width:820px }
.stack{ display:flex; flex-direction:column; gap:var(--sp-3) }

/* фон страницы всегда спокойный: фото-подложка раздела (theme.css ставит её
   при атрибуте data-ag-visual) на рабочих страницах только мешает читать */
:root[data-ag-visual] body,
:root[data-theme="light"][data-ag-visual] body,
:root[data-theme="dark"][data-ag-visual] body{
  background-image:none!important; background-color:var(--bg)!important;
  background-attachment:scroll!important; animation:none!important;
}

/* ---------- 3. шапка ---------- */

/* меню разделов ставит argeda-nav.js; здесь — только общий вид ссылок */


/* ---------- 3б. рабочая раскладка: столбец слева, содержимое справа ----------
   Образец — раздел «Музыка»: столбец закреплён, у краёв одинаковые поля,
   содержимое лежит в карточке с той же рамкой и скруглением. */
.side{
  position:fixed; top:calc(var(--head-h) + var(--gap)); left:var(--gap); bottom:var(--gap);
  /* overscroll-behavior:auto — колесо над колонкой крутит страницу, когда
     внутри колонки прокручивать нечего. С contain страница стояла. */
  width:var(--side-w); z-index:20; overflow:auto; overscroll-behavior:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--gap); display:flex; flex-direction:column; gap:10px;
}
.studio, .with-side{ flex:1; display:block; padding:var(--gap) var(--gap) var(--gap) calc(var(--side-w) + var(--gap) + 6px) }
.studio > main, .with-side > main, main.card-main{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  min-height:calc(100dvh - var(--head-h) - var(--gap) * 2); display:flex; flex-direction:column; overflow:hidden;
}
@media (max-width:900px){
  /* ⚠️ НА ТЕЛЕФОНЕ ПАНЕЛЬ НЕ ДЕРЖИТ ПРОКРУТКУ У СЕБЯ (12 сентября 2026).
     Выше у .side стоят overflow:auto и overscroll-behavior:contain — это
     нужно плавающей панели на компьютере. На узком экране панель встаёт
     в поток и оказывается ВЫШЕ экрана (689 px при окне 640), прокручивать
     внутри нечего, а contain не пускает свайп дальше — палец не двигает
     ничего, и до кнопки «Сделать» не добраться. Возвращаем обычное
     поведение: страница прокручивается, где бы ни начался свайп. */
  .side{ position:static; width:auto; inset:auto; margin:var(--gap) var(--gap) 0;
         overflow:visible; overscroll-behavior:auto; }
  .studio, .with-side{ padding:var(--gap) }
}

/* ---------- 4. заголовки ---------- */
h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.2 }
h1{ font-size:clamp(22px,3vw,30px) }
h2{ font-size:clamp(18px,2.2vw,22px) }
h3{ font-size:16px }
.page-head{ padding:var(--sp-4) 0 var(--sp-2) }
.page-head h1{ margin-bottom:6px }
.sub, .page-head p{ margin:0; color:var(--muted); font-size:13.5px }
.muted{ color:var(--muted) }

/* ---------- 5. кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line); border-radius:var(--r-s); padding:8px 13px;
  font:600 13px/1.2 var(--font); color:var(--text); background:var(--panel);
  cursor:pointer; transition:.15s; white-space:nowrap;
}
.btn:hover{ border-color:var(--muted) }
.btn:active{ transform:translateY(1px) }
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none }
/* главная кнопка страницы */
.btn-main,.go,.gen{
  border:0; border-radius:var(--r-m); padding:11px 20px;
  font:800 15px/1.2 var(--font); color:var(--acc-ink); background:var(--acc); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:.15s;
}
.btn-main:hover,.go:hover,.gen:hover{ background:var(--acc2) }
.btn-main:disabled,.gen:disabled{ opacity:.45; cursor:not-allowed }
/* мелкая кнопка */
.mini{
  border:1px solid var(--line); background:var(--panel2); border-radius:var(--r-s);
  padding:7px 11px; font:600 12.5px/1.2 var(--font); color:var(--text); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:.15s;
}
.mini:hover{ border-color:var(--muted) }
/* значок-кнопка (тема, закрыть и т.п.) */
.icon-btn,.theme{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--panel);
  color:var(--text); cursor:pointer; transition:.15s;
}
.icon-btn:hover,.theme:hover{ border-color:var(--muted) }

/* вкладки */
.tabs{ display:flex; gap:8px; flex-wrap:wrap }
.tab{
  border:1px solid var(--line); background:var(--panel2); border-radius:var(--r-m);
  padding:9px 15px; font:700 14px/1.2 var(--font); color:var(--text); cursor:pointer; transition:.15s;
}
.tab:hover{ border-color:var(--muted) }
.tab.on{ border-color:var(--acc); background:color-mix(in srgb,var(--acc),transparent 88%) }

/* ---------- 6. карточки и сообщения ---------- */
.card,.tool-card,.panel-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-l);
  padding:var(--sp-3); box-shadow:var(--shadow-sm);
}
.pill{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
  border-radius:var(--r-pill); padding:6px 12px; font-size:12.5px; font-weight:600;
  background:var(--panel); white-space:nowrap;
}
.note{
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--panel2);
  padding:12px 14px; color:var(--muted); font-size:13.5px;
}
.bad{ color:var(--danger); font-size:14px }
.ok{ color:var(--ok); font-size:14px }
.sep{ height:1px; background:var(--line); border:0; margin:var(--sp-3) 0 }

/* ряд действий в карточке: кнопки переносятся на вторую строку, а не уезжают
   за край. Раньше в библиотеке третья кнопка обрезалась на узкой карточке. */
.acts{ display:flex; flex-wrap:wrap; gap:8px; min-width:0 }
.acts .mini,.acts .btn{ flex:0 1 auto; max-width:100% }
.mini{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
@media (max-width:600px){ .acts{ width:100%; margin-left:0!important } }

/* ---------- 7. поля ввода ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--panel2); color:var(--text); font:400 14.5px/1.4 var(--font); transition:.15s;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--acc) }
input::placeholder, textarea::placeholder{ color:var(--muted) }
input[type="checkbox"],input[type="radio"]{ accent-color:var(--acc); width:18px; height:18px }
textarea{ resize:vertical; min-height:90px }
label.field{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--muted); font-weight:600 }
label.field > span{ color:var(--muted) }

/* ---------- 8. сетка ---------- */
.grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) }
.grid-2{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }

/* ---------- 9. подвал ---------- */
footer{
  margin-top:auto; padding:22px 0 28px; border-top:1px solid var(--line);
  color:var(--muted); font-size:12.5px; text-align:center;
}
footer a{ color:var(--muted) } footer a:hover{ color:var(--text) }

/* ---------- 10. телефон ---------- */
@media (max-width:760px){

  /* на телефоне ссылки разделов прячет кнопка «Разделы» из argeda-nav.js —
     наши правила выше не должны её перебивать */

  .page-head{ padding-top:var(--sp-3) }
  .btn-main,.go,.gen{ width:100%; justify-content:center }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) }
}
@media (max-width:640px){
  body{ font-size:14.5px }
  /* поле ввода не меньше 16px — иначе браузер приближает страницу */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea{ font-size:16px }
  .card,.tool-card,.panel-card{ padding:12px; border-radius:var(--r-m) }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none!important; animation:none!important }
}


/* ===== БЕЗ ЗНАЧКОВ У НАСТРОЕК (12 сентября 2026) =====
   Значки у настроек в левой колонке студий были случайные: сердечко у
   качества, рамка у формы, шестерёнка у количества, звёздочка у модели.
   Пользы не давали, вид пёстрый. Остаются подпись и значение.
   Страницы рисуют значки двумя способами — ai-video и ai-audio через
   ::before с data-ico, ai-image через span.ico — гасим оба, а место,
   оставленное под значок, забираем обратно. */
.studio .side .chip::before { content: none !important; }
.studio .side .chip .ico,
.studio .side .chip .dot { display: none !important; }
.studio .side .chip select { padding-left: 10px !important; }