/* Чёрно-белое «жидкое стекло»: подключается после style.css и переопределяет палитру, радиусы и поверхности.
   Структура страниц не меняется. Светлая и тёмная темы выбираются как раньше (Telegram / система). */

/* ----- Светлая тема ----- */
:root {
  --bg: #F4F4F4; --bg2: rgba(255, 255, 255, 0.6); --surface: rgba(250, 250, 250, 0.86);
  --text: #0A0A0A; --text2: rgba(10, 10, 10, 0.6); --hint: rgba(10, 10, 10, 0.45);
  --accent: #0A0A0A; --accent-text: #FFFFFF;
  --line: rgba(0, 0, 0, 0.08); --line-hover: rgba(0, 0, 0, 0.16); --hover: rgba(0, 0, 0, 0.045);
  --glass: rgba(0, 0, 0, 0.05); --glass-soft: rgba(255, 255, 255, 0.6);
  --card-glass: rgba(255, 255, 255, 0.6); --dash: rgba(0, 0, 0, 0.16); --divider: rgba(0, 0, 0, 0.07);
  --glass-bd: rgba(255, 255, 255, 0.9); --hi: #FFFFFF; --sh: 0 10px 34px rgba(0, 0, 0, 0.09);
  --glow: rgba(0, 0, 0, 0.2);
  --blob-a: rgba(255, 255, 255, 1); --blob-b: rgba(0, 0, 0, 0.1); --blob-c: rgba(0, 0, 0, 0.08);
  --danger: #D62B2B;
  --r-card: 24px; --r-field: 16px; --gap-card: 12px;
}
/* ----- Тёмная тема ----- */
html[data-theme="dark"] {
  --bg: #050505; --bg2: rgba(255, 255, 255, 0.06); --surface: rgba(24, 24, 24, 0.88);
  --text: #FAFAFA; --text2: rgba(250, 250, 250, 0.62); --hint: rgba(250, 250, 250, 0.42);
  --accent: #FAFAFA; --accent-text: #0A0A0A;
  --line: rgba(255, 255, 255, 0.1); --line-hover: rgba(255, 255, 255, 0.2); --hover: rgba(255, 255, 255, 0.07);
  --glass: rgba(255, 255, 255, 0.07); --glass-soft: rgba(255, 255, 255, 0.05);
  --card-glass: rgba(255, 255, 255, 0.065); --dash: rgba(255, 255, 255, 0.16); --divider: rgba(255, 255, 255, 0.07);
  --glass-bd: rgba(255, 255, 255, 0.13); --hi: rgba(255, 255, 255, 0.2); --sh: 0 14px 40px rgba(0, 0, 0, 0.5);
  --glow: rgba(255, 255, 255, 0.16);
  --blob-a: rgba(255, 255, 255, 0.2); --blob-b: rgba(255, 255, 255, 0.11); --blob-c: rgba(255, 255, 255, 0.15);
  --danger: #FF6B6B;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: #050505; --bg2: rgba(255, 255, 255, 0.06); --surface: rgba(24, 24, 24, 0.88);
    --text: #FAFAFA; --text2: rgba(250, 250, 250, 0.62); --hint: rgba(250, 250, 250, 0.42);
    --accent: #FAFAFA; --accent-text: #0A0A0A;
    --line: rgba(255, 255, 255, 0.1); --line-hover: rgba(255, 255, 255, 0.2); --hover: rgba(255, 255, 255, 0.07);
    --glass: rgba(255, 255, 255, 0.07); --glass-soft: rgba(255, 255, 255, 0.05);
    --card-glass: rgba(255, 255, 255, 0.065); --dash: rgba(255, 255, 255, 0.16); --divider: rgba(255, 255, 255, 0.07);
    --glass-bd: rgba(255, 255, 255, 0.13); --hi: rgba(255, 255, 255, 0.2); --sh: 0 14px 40px rgba(0, 0, 0, 0.5);
    --glow: rgba(255, 255, 255, 0.16);
    --blob-a: rgba(255, 255, 255, 0.2); --blob-b: rgba(255, 255, 255, 0.11); --blob-c: rgba(255, 255, 255, 0.15);
    --danger: #FF6B6B;
  }
}

/* ----- Живой фон: три мягких светящихся пятна медленно плывут ----- */
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; }
body::before { background: var(--bg); }
body::after { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 18% 14%, var(--blob-a) 0%, transparent 38%),
    radial-gradient(circle at 86% 46%, var(--blob-b) 0%, transparent 40%),
    radial-gradient(circle at 24% 88%, var(--blob-c) 0%, transparent 42%);
  animation: bg-drift 36s ease-in-out infinite alternate; will-change: transform; }
@keyframes bg-drift {
  0% { transform: translate3d(-3%, -2%, 0) scale(1); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.12) rotate(6deg); }
}
body.keyboard-open::after { display: none; }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* ----- Шапка ----- */
.brand { font-size: 20px; letter-spacing: -0.03em; }
.head { border-bottom-color: transparent; }
.account { background: var(--card-glass); border: 1px solid var(--glass-bd); padding: 4px 12px 4px 4px;
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }
.account__name { font-size: 14px; font-weight: 600; }
.avatar { width: 32px; height: 32px; font-size: 14px; }
.avatar--lg { width: 72px; height: 72px; font-size: 28px; box-shadow: 0 8px 30px var(--glow); }
.avatar--sm { width: 36px; height: 36px; font-size: 15px; }
.top.scrolled .head, .top.scrolled .tabs { background: var(--card-glass);
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%); }
html[data-theme="dark"] .top.scrolled .head, html[data-theme="dark"] .top.scrolled .tabs { background: rgba(10, 10, 10, 0.5); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .top.scrolled .head, html:not([data-theme]) .top.scrolled .tabs { background: rgba(10, 10, 10, 0.5); }
}

/* ----- Вкладки, сегменты, чипы ----- */
.tabs button { background: var(--card-glass); border: 1px solid var(--glass-bd); font-size: 14px; font-weight: 500;
  color: var(--text2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.tabs button:hover { background: var(--card-glass); color: var(--text); }
.tabs button.on, .tabs button.on:hover { background: var(--accent); color: var(--accent-text); border-color: transparent;
  box-shadow: 0 6px 20px var(--glow); }
.seg { background: var(--card-glass); border: 1px solid var(--glass-bd); border-radius: 999px; padding: 4px; gap: 2px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.seg__hl { border-radius: 999px; box-shadow: 0 4px 14px var(--glow); }
.seg button { border-radius: 999px; font-weight: 500; }
.chip { background: var(--card-glass); border: 1px solid var(--glass-bd); color: var(--text);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.chip.on { box-shadow: 0 6px 18px var(--glow); }

/* ----- Стеклянные поверхности ----- */
.card, .list, .tile, .stat, .bubble, .thumb, .table-wrap, .banner, .pcard, .ccard, .section-collapsible,
.job__card, .dialog, .upload, .editor__preview, .profile-card {
  background: var(--card-glass); border: 1px solid var(--glass-bd); border-radius: var(--r-card);
  box-shadow: var(--sh), inset 0 1px 0 var(--hi);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); }
.card:hover, .list:hover { border-color: var(--glass-bd); }
.upload--empty { border: 1px dashed var(--dash); }
.pcard { border-radius: 22px; }
.pcard__art { border-radius: 16px; }
.sheet__panel, .cp-panel { background: var(--surface); border: 1px solid var(--glass-bd); border-bottom: 0;
  border-radius: 28px 28px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.25), inset 0 1px 0 var(--hi);
  -webkit-backdrop-filter: blur(34px) saturate(160%); backdrop-filter: blur(34px) saturate(160%); }
.dialog { background: var(--surface); }
.sheet, .cp-overlay { background: rgba(0, 0, 0, 0.38); }

/* ----- Формы ----- */
input[type=text], input[type=search], input[type=password], input[type=datetime-local], textarea, select {
  background: var(--glass-soft); border: 1px solid var(--glass-bd); border-radius: var(--r-field); padding: 13px 14px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06); }
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=datetime-local],
html[data-theme="dark"] textarea, html[data-theme="dark"] select { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
.field > label { font-size: 12.5px; }

/* ----- Кнопки ----- */
.btn { border-radius: 20px; font-weight: 600; box-shadow: 0 10px 26px var(--glow); }
.btn--soft, .btn--danger { background: var(--card-glass); border: 1px solid var(--glass-bd); box-shadow: var(--sh);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }
.btn--ghost { box-shadow: none; }
.btn--pill { border-radius: 999px; }
.actions { background: var(--card-glass); border-top: 1px solid var(--glass-bd); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); }
html[data-theme="dark"] .actions { background: rgba(14, 14, 14, 0.6); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .actions { background: rgba(14, 14, 14, 0.6); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4); }
}
.actions .btn { box-shadow: none; }
.fab { box-shadow: 0 10px 30px var(--glow); }
.toast { background: var(--surface); color: var(--text); border: 1px solid var(--glass-bd); border-radius: 18px;
  box-shadow: var(--sh); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.toast--error { background: var(--danger); color: #fff; border-color: transparent; }

/* ----- Переключатель и ползунок ----- */
.switch__knob { background: var(--glass); border: 1px solid var(--glass-bd); }
html[data-theme="dark"] .switch__input:checked + .switch__knob::after { background: #0A0A0A; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .switch__input:checked + .switch__knob::after { background: #0A0A0A; } }
.switch__input:checked + .switch__knob { border-color: transparent; }
.range { height: 6px; }

/* ----- Прогресс ----- */
.upload__track { background: var(--glass); }
.upload__fill { background: var(--accent); }
.job__card { background: var(--surface); }

/* ----- Заголовки страниц ----- */
.page-title { font-size: 28px; letter-spacing: -0.03em; }
.item__title { font-size: 16px; }
.big__value, .stat__value { letter-spacing: -0.03em; }

/* ----- Без прозрачности (системная настройка): сплошные поверхности ----- */
@media (prefers-reduced-transparency: reduce) {
  .card, .list, .tile, .stat, .bubble, .thumb, .table-wrap, .banner, .pcard, .ccard, .section-collapsible, .job__card,
  .dialog, .upload, .account, .tabs button, .seg, .chip, .actions, .toast, .sheet__panel, .cp-panel, .btn--soft, .btn--danger {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
}