/* ============================================================
   Оформление «Библиотека УчХаб» — перенос дизайн-системы chtptiu_ui на веб.
   Токены один в один из chtptiu_ui/tokens.py: сетка 4px, скругления,
   шкала Segoe UI Variable, темы «Светлая»/«Тёмная», акцент #2c69df.
   Правило то же: в страницах нет цветов и отступов руками — всё отсюда.
   ============================================================ */

:root {
  /* шаг сетки 4px */
  --xs:4px; --sm:8px; --md:12px; --lg:16px; --xl:20px; --xxl:24px; --xxxl:32px;
  /* скругления */
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:26px; --r-btn:18px; --r-pill:999px;
  /* шрифт */
  --ff:"Segoe UI Variable Text","Segoe UI",system-ui,Arial,sans-serif;
  --ff-display:"Segoe UI Variable Display","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
  --f-caption:12px; --f-small:13px; --f-body:14px; --f-emph:15px;
  --f-h2:17px; --f-h1:26px; --f-display:34px;
  /* тень под карточкой: размытие 28, сдвиг 6, ~22% цвета «тень» */
  --shadow:0 6px 28px rgba(22,32,44,.12), 0 1px 2px rgba(22,32,44,.06);

  /* ТЕМА «Светлая» */
  --bg:#f4f6f9; --side:#eceff5; --card:#ffffff; --card2:#f7f9fc;
  --text:#16202c; --text2:#46556a; --muted:#626f81;
  --line:#e4e9f0; --line2:#ccd5e2;
  --accent:#2c69df; --accent2:#2456c7; --accenttext:#ffffff; --accentsoft:#f1f6fe;
  --sel:#d1def8;
  --green:#11804b; --greensoft:#eff8f3;
  --red:#c8332e; --redsoft:#fbeceb;
  --amber:#a75c04; --ambersoft:#fdf2e3;
  --island:#16202c; --island-text:#f4f6f9; --island-muted:#aab4c2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow:0 6px 28px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4);
    --bg:#10141a; --side:#0c1015; --card:#171d26; --card2:#1d242f;
    --text:#e8edf4; --text2:#b3bfcf; --muted:#8593a5;
    --line:#262f3b; --line2:#36414f;
    --accent:#5b93ff; --accent2:#7aa8ff; --accenttext:#0b1220; --accentsoft:#1c2b44;
    --sel:#243450;
    --green:#46d18b; --greensoft:#16301f;
    --red:#ff7b74; --redsoft:#33191a;
    --amber:#f0b040; --ambersoft:#33260f;
    --island:#070a0e; --island-text:#e8edf4; --island-muted:#9aa6b6;
  }
}
:root[data-theme="dark"] {
  --shadow:0 6px 28px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4);
  --bg:#10141a; --side:#0c1015; --card:#171d26; --card2:#1d242f;
  --text:#e8edf4; --text2:#b3bfcf; --muted:#8593a5;
  --line:#262f3b; --line2:#36414f;
  --accent:#5b93ff; --accent2:#7aa8ff; --accenttext:#0b1220; --accentsoft:#1c2b44;
  --sel:#243450;
  --green:#46d18b; --greensoft:#16301f;
  --red:#ff7b74; --redsoft:#33191a;
  --amber:#f0b040; --ambersoft:#33260f;
  --island:#070a0e; --island-text:#e8edf4; --island-muted:#9aa6b6;
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--ff); font-size:var(--f-body); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:var(--ff-display); margin:0; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---- шапка ---- */
.шапка {
  display:flex; align-items:center; gap:var(--md);
  padding:var(--md) var(--xl); background:var(--card);
  border-bottom:1px solid var(--line);
}
.шапка .лого { display:flex; align-items:center; gap:var(--sm); font-family:var(--ff-display);
  font-size:var(--f-h2); font-weight:600; }
.шапка .значок { width:30px; height:30px; border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;
  display:grid; place-items:center; font-size:16px; }
.шапка .тихо { color:var(--muted); font-size:var(--f-small); }
.раздвинуть { flex:1; }

/* статус-точка связи */
.точка { width:9px; height:9px; border-radius:50%; background:var(--muted); transition:.3s; }
.точка.жив { background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 22%,transparent); }

/* ---- карточка / панель ---- */
.карта {
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--lg); box-shadow:var(--shadow);
}
.карта > h2 { font-size:var(--f-h2); display:flex; align-items:center; gap:var(--sm);
  margin-bottom:var(--md); }
.подзаголовок { color:var(--muted); font-size:var(--f-small); }

/* ---- поля ---- */
label { display:block; font-size:var(--f-caption); color:var(--muted); margin:var(--md) 0 var(--xs); }
input,select,textarea {
  width:100%; padding:10px var(--md); font:inherit; color:var(--text);
  background:var(--card2); border:1px solid var(--line2); border-radius:var(--r-md);
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); }
input::placeholder { color:var(--muted); }

/* ---- кнопки: одно синее главное действие ---- */
.кнопка {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sm);
  width:100%; padding:11px var(--lg); font:inherit; font-weight:600;
  border:1px solid transparent; border-radius:var(--r-btn); cursor:pointer;
  background:var(--accent); color:var(--accenttext); transition:filter .15s, transform .05s;
}
.кнопка:hover { filter:brightness(1.06); }
.кнопка:active { transform:translateY(1px); }
.кнопка.тихая { background:transparent; color:var(--accent); border-color:var(--accent); }
.кнопка.опасная { background:var(--red); color:#fff; }
.кнопка.узкая { width:auto; }

/* ---- бейджи статуса: смысл не только цветом — всегда слово ---- */
.бейдж { display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
  border-radius:var(--r-pill); font-size:var(--f-small); font-weight:600; }
.бейдж.зел { background:var(--greensoft); color:var(--green); }
.бейдж.крас { background:var(--redsoft); color:var(--red); }
.бейдж.янт { background:var(--ambersoft); color:var(--amber); }

/* ---- таблица ---- */
table { width:100%; border-collapse:collapse; font-size:var(--f-small); }
th,td { text-align:left; padding:9px var(--sm); border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:500; font-size:var(--f-caption);
  text-transform:uppercase; letter-spacing:.03em; }
tbody tr:hover { background:var(--card2); }
.пусто { color:var(--muted); padding:var(--md) var(--sm); }

/* ---- «остров» живой ленты (тёмная плашка состояния) ---- */
.остров { background:var(--island); color:var(--island-text);
  border-radius:var(--r-lg); padding:var(--lg); }
.остров h2 { color:var(--island-text); }
.остров .подзаголовок { color:var(--island-muted); }
.лента { display:flex; flex-direction:column; gap:var(--sm); max-height:68vh; overflow:auto; }
.соб { padding:10px var(--md); border-radius:var(--r-md);
  background:color-mix(in srgb,var(--island-text) 7%,transparent);
  border-left:3px solid var(--island-muted); animation:вспых .7s ease; }
.соб .вид { font-weight:600; }
.соб .при { color:var(--island-muted); font-size:var(--f-caption); margin-top:2px; }
.соб.выдана  { border-left-color:var(--red); }
.соб.возврат { border-left-color:var(--green); }
.соб.заявка-возврата { border-left-color:var(--amber); }
.соб.добавлена { border-left-color:var(--accent); }
@keyframes вспых { from { background:color-mix(in srgb,var(--accent) 35%,transparent); }
                   to   { background:color-mix(in srgb,var(--island-text) 7%,transparent); } }

/* ---- строки ответа: что случилось → спокойно ---- */
.ответ { font-size:var(--f-small); margin-top:var(--sm); min-height:18px; }
.ответ.удача { color:var(--green); } .ответ.ошибка { color:var(--red); }
.подсказка { font-size:var(--f-small); color:var(--accent); margin-top:6px; min-height:18px; }

.ряд { display:flex; gap:var(--sm); } .ряд > * { flex:1; }

/* ============================================================
   Мобильная вёрстка — экраны уже 560px (телефоны).
   Правила центральные: страницы наследуют их без правок.
   ============================================================ */
@media (max-width:560px) {
  /* шапка: ссылки переносятся, лишнее прячем, тач-цели крупнее */
  .шапка { flex-wrap:wrap; gap:var(--sm); padding:var(--sm) var(--md);
           position:sticky; top:0; z-index:5; }
  .шапка .раздвинуть, .шапка .тихо { display:none; }
  .шапка .лого { font-size:var(--f-emph); width:100%; }
  .шапка a { font-size:var(--f-small); padding:6px 10px; border-radius:var(--r-md);
             background:var(--card2); border:1px solid var(--line); }
  .шапка a:hover { text-decoration:none; }
  .шапка .точка { margin-left:auto; }

  /* ряды переносятся; ряды С ПОЛЯМИ ввода складываются в столбик,
     а ряды-шапки (заголовок + кнопки) остаются в строку */
  .ряд { flex-wrap:wrap; }
  .ряд:has(input, select, textarea) > * { flex:1 1 100%; min-width:0; }

  /* карточки: меньше полей — больше места под контент */
  .карта { padding:var(--md); border-radius:var(--r-md); }

  /* таблицы: компактнее, длинные колонки переносят текст */
  th, td { padding:7px var(--xs); }
  td { word-break:break-word; }

  /* заголовки чуть мельче, чтобы не наезжали */
  h1 { font-size:22px; }

  /* кнопки — палец попадает (мин. 44px высоты) */
  .кнопка { padding:12px var(--lg); }
}