/* ksky27.ru. Оформление "жидкое стекло", кнопки в стиле macOS.
   Поверх фоновой картинки лежат полупрозрачные панели с размытием.

   Кромки у стекла не нарисованы сплошной линией. Рамка сделана градиентом:
   сверху света больше, снизу меньше, как у настоящего стекла на просвет.
   Это переменная --edge. Она одинаковая у всех панелей и кнопок.

   ┌───────────────────────────────────────────────────────────────────┐
   │  ГДЕ ПОМЕНЯТЬ ФОН                                                 │
   │                                                                   │
   │  Положите свою картинку в папку assets, рядом с этим файлом,      │
   │  назовите её background.jpg и перезапишите мою. Тогда в коде      │
   │  менять не нужно ничего.                                          │
   │                                                                   │
   │  Если файл называется иначе, поправьте строку --bg-image ниже.    │
   │  Путь пишется от папки assets, то есть просто имя файла.          │
   │                                                                   │
   │  Рядом две настройки:                                             │
   │  --scrim  насколько затемнить картинку (0.3 светлее, 0.7 темнее)  │
   │  --glass  плотность стекла в панелях                              │
   └───────────────────────────────────────────────────────────────────┘ */

:root {
  /* Чтобы браузер рисовал полосы прокрутки и поля в тёмном виде */
  color-scheme: dark;

  /* Фон */
  --bg-image: url("background.jpg");
  --base: #0a0d14;
  /* Плотная подложка для того, что висит поверх страницы: выпадающее
     меню и мелкие круглые кнопки. Стекло тут не годится, иначе текст
     поверх картинки не читается. */
  --panel-2: rgba(13, 17, 25, 0.94);
  --scrim: rgba(8, 11, 18, 0.68);
  --vignette: radial-gradient(125% 105% at 50% 0%, transparent 38%, rgba(0, 0, 0, 0.42) 100%);

  /* Стекло */
  --glass-blur: 26px;
  --glass-hi: rgba(255, 255, 255, 0.14);
  --glass-lo: rgba(255, 255, 255, 0.05);
  --glass-inner: rgba(255, 255, 255, 0.05);
  --glass-line: rgba(255, 255, 255, 0.20);
  --glass-top: rgba(255, 255, 255, 0.38);
  --glass-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);

  /* Кромка стекла: сверху светлая, по бокам почти прозрачная, снизу снова светлая */
  --edge:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.10) 34%,
      rgba(255, 255, 255, 0.09) 64%,
      rgba(255, 255, 255, 0.38) 100%);
  /* Та же кромка для синей кнопки */
  --edge-blue:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(255, 255, 255, 0.16) 46%,
      rgba(0, 0, 0, 0.22) 100%);

  /* Кнопки в стиле macOS */
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
        "Segoe UI", system-ui, sans-serif;
  --mac-blue: #0a84ff;
  --mac-blue-deep: #0060df;
  --btn-face-hi: rgba(255, 255, 255, 0.28);
  --btn-face-lo: rgba(255, 255, 255, 0.13);
  --btn-text: #f3f7fc;
  --btn-gloss: rgba(255, 255, 255, 0.55);
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.22);
  --seg-track: rgba(255, 255, 255, 0.09);

  /* Текст */
  --ink: #f7faff;
  --muted: #d5dfec;
  --accent: #8bf3bd;
  --link: #a6d0ff;
  --warn: #ffd79b;
  /* Тот же цвет с нулевой плотностью, чтобы полоса плавно сходила на нет */
  --warn-fade: rgba(255, 215, 155, 0);
  --bar-text: rgba(255, 255, 255, 0.78);

  /* Углубление: тёмная вставка для блоков "заполнить" и цитат.
     Светлый текст на светлом стекле не читается, поэтому внутри панели
     делаем затемнение, а не ещё один светлый слой. */
  --well: rgba(0, 0, 0, 0.26);
  --well-2: rgba(0, 0, 0, 0.10);
  --well-text: #e6edf7;

  /* Точки в заголовке окна */
  --dot-r: #ff6b62;
  --dot-y: #ffc44d;
  --dot-g: #4ad964;

  /* Форма */
  --radius: 22px;
  --radius-sm: 14px;
  --wrap: 1120px;

  /* ┌─────────────────────────────────────────────────────────────────┐
     │  ГДЕ МЕНЯТЬ ШРИФТ САЙТА                                         │
     │                                                                 │
     │  Сейчас стоит моноширинный, как в терминале. Список читается    │
     │  слева направо: берётся первый шрифт, который есть в системе.   │
     │                                                                 │
     │  Обычный шрифт без засечек, поменяйте строку --font на:         │
     │    --font: -apple-system, BlinkMacSystemFont, "Segoe UI",       │
     │            Roboto, system-ui, sans-serif;                       │
     │                                                                 │
     │  Свой файл шрифта: положите его в папку assets, добавьте в      │
     │  начало этого файла правило @font-face с путём к файлу и        │
     │  напишите здесь имя шрифта первым в списке.                     │
     │                                                                 │
     │  Начертания в тексте (жирный, курсив) уже расставлены,          │
     │  менять разметку не нужно.                                      │
     └─────────────────────────────────────────────────────────────────┘ */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Шрифт для кусков кода в записях. Моноширинный всегда, даже если
     основной шрифт сайта вы поменяете на обычный. */
  --code: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo,
          "DejaVu Sans Mono", monospace;

  --text-sm: 0.875rem;
  --text: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-hero: clamp(2rem, 5vw, 3.25rem);
}

/* --- Основа --- */

*, *::before, *::after { box-sizing: border-box; }

html { background-color: var(--base); }

body {
  margin: 0;
  color: var(--ink);
  font: var(--text) / 1.75 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Слой с картинкой. Через position: fixed, а не background-attachment,
   иначе на телефонах картинка растягивается по высоте всего документа. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Пелена поверх картинки: затемнение, мягкое затемнение по краям и мелкое
   зерно, чтобы стекло выглядело живым, а не пластиковым. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--scrim);
  background-image:
    var(--vignette),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

h1, h2, h3 { font-weight: 700; line-height: 1.25; margin: 0; }
h1 { font-size: var(--text-hero); letter-spacing: -0.01em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: currentColor; }
img { max-width: 100%; display: block; }

/* Синее кольцо вокруг элемента под клавиатурой, как в macOS */
:focus-visible { outline: 3px solid rgba(10, 132, 255, 0.65); outline-offset: 2px; }
::selection { background: var(--mac-blue); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }

/* Кромка стекла вместо сплошной рамки.
   Слой заливки обрезан по внутреннему краю, слой кромки по внешнему,
   поэтому градиент виден только в полоске рамки и повторяет скругление. */
.glass-edge {
  border: 1px solid transparent;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  color: var(--ink); padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
  background-color: rgba(10, 13, 20, 0.9);
  background-image: var(--edge);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
}
.skip:focus { left: 0; }

/* --- Заголовки разделов --- */

.win__body h1 { margin: 0 0 16px; }
.win__body h2 { margin: 46px 0 16px; }
/* У первого заголовка в панели отступа сверху нет */
.win__body > h1:first-child, .win__body > h2:first-child { margin-top: 0; }

/* --- Окно: главная стеклянная панель --- */

.win {
  position: relative;
  border-radius: var(--radius);
  background-image: linear-gradient(155deg, var(--glass-hi), var(--glass-lo)), var(--edge);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
  /* Раньше здесь была ещё одна тень снизу, светлая: она рисовала тонкую
     белую линию по нижнему краю панели. Убрана. */
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-top);
  backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  overflow: hidden;
}

/* Блик по стеклу: два мягких пятна света */
.win::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 8% -20%, rgba(255, 255, 255, 0.20), transparent 58%),
    radial-gradient(80% 60% at 102% -10%, rgba(255, 255, 255, 0.09), transparent 55%);
}

main.wrap { padding-top: 26px; padding-bottom: 40px; }

.win__bar {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03));
  border-bottom: 1px solid var(--glass-line);
}
.dots { display: flex; gap: 7px; flex: 0 0 auto; }
.dots i {
  width: 11px; height: 11px; border-radius: 50%; display: block;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.dots i:nth-child(1) { background: var(--dot-r); }
.dots i:nth-child(2) { background: var(--dot-y); }
.dots i:nth-child(3) { background: var(--dot-g); }
.win__title { color: var(--bar-text); font-size: var(--text-sm); margin-left: 4px; }
.win__body { padding: 34px 34px 40px; position: relative; }

/* --- Шапка --- */

.top {
  position: sticky; top: 0; z-index: 50;
  background-image: linear-gradient(180deg, var(--glass-hi), var(--glass-lo));
  border-bottom: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-top), 0 12px 40px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
}
.top .wrap { display: flex; align-items: center; gap: 14px; min-height: 58px; }
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 700; white-space: nowrap;
}
/* Подчёркивание при наведении под логотипом не нужно */
.brand:hover { border-bottom-color: transparent; }

/* Логотип в шапке. Светлая надпись: тема на сайте одна, тёмная. */
.brand__logo { display: block; height: 28px; width: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav a {
  display: inline-flex; align-items: center; min-height: 38px;
  padding: 0 14px; color: var(--muted); border-radius: 999px;
  border: 1px solid transparent;
  font: 500 0.9rem / 1 var(--ui);
}
.nav a:hover {
  color: var(--btn-text);
  background-image: linear-gradient(180deg, var(--btn-face-hi), var(--btn-face-lo)), var(--edge);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border-color: transparent;
}
.nav a[aria-current="page"] { color: var(--accent); }

/* --- Кнопки: форма и материал как у элементов macOS --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; cursor: pointer;
  color: var(--btn-text); text-decoration: none;
  /* У кнопки браузера есть свой фон. Его гасим, иначе стекло не видно */
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  background-image: linear-gradient(180deg, var(--btn-face-hi), var(--btn-face-lo)), var(--edge);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--btn-shadow), inset 0 1px 0 var(--btn-gloss);
  font: 500 0.95rem / 1 var(--ui);
  transition: filter 0.12s ease, transform 0.08s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn:active {
  transform: translateY(0.5px);
  filter: brightness(0.94);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.28);
}

/* Основная кнопка, синяя, как кнопка по умолчанию в macOS */
.btn--primary {
  color: #fff;
  background-image: linear-gradient(180deg, var(--mac-blue), var(--mac-blue-deep)), var(--edge-blue);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 8px 22px rgba(10, 132, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
.btn--primary:hover { filter: brightness(1.08); }
.btn--primary:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* --- Блок "заполнить" --- */

.todo {
  position: relative;
  display: block; margin: 0 0 1em;
  padding: 15px 18px 15px 22px;
  border-radius: var(--radius-sm);
  /* Кромка стекла и мягкая жёлтая полоса слева.
     Сплошной рамки и толстой полосы по краю нет: на скруглении они
     выглядят криво. Полоса нарисована отдельным слоем и сходит на нет. */
  background-image: linear-gradient(155deg, var(--well), var(--well-2)), var(--edge);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: var(--well-text);
  overflow: hidden;
}
.todo::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background-image: linear-gradient(180deg, var(--warn), var(--warn-fade));
  pointer-events: none;
}
.todo:last-child { margin-bottom: 0; }
.todo b { color: var(--warn); font-weight: 700; }

/* --- Списки --- */

.rows { list-style: none; margin: 0; padding: 0; }
.rows li { border-bottom: 1px solid var(--glass-line); }
.rows li:last-child { border-bottom: 0; }
.row {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 18px 14px; min-height: 48px; color: var(--ink);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}
.row:hover { background-color: var(--glass-inner); }
.row__date { color: var(--muted); font-size: var(--text-sm); flex: 0 0 96px; }
.row__tag {
  color: var(--accent); font-size: var(--text-sm); flex: 0 0 auto;
  padding: 3px 11px; border-radius: 999px;
  border: 1px solid transparent;
  background-image: linear-gradient(180deg, var(--btn-face-hi), var(--btn-face-lo)), var(--edge);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
.row__title { font-weight: 700; }
/* Порядок задан намеренно: стрелка держится первой строки, описание уходит
   на вторую, иначе в строке появляется пустая полоса. */
.row__go { order: 1; margin-left: auto; color: var(--muted); }
.row__desc { order: 2; color: var(--muted); font-size: var(--text-sm); flex-basis: 100%; padding-left: 110px; }

/* Разделы: переключатель-сегменты, как в macOS */
.tags {
  display: inline-flex; gap: 2px; padding: 3px; margin: 20px 0 28px;
  border-radius: 14px;
  border: 1px solid transparent;
  background-color: var(--seg-track);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.02)), var(--edge);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.20);
}
.tags button {
  min-height: 34px; padding: 0 15px; cursor: pointer;
  border: 1px solid transparent; border-radius: 11px;
  background-color: transparent; color: var(--muted);
  font: 500 0.9rem / 1 var(--ui);
}
.tags button:hover { color: var(--btn-text); }
.tags button[aria-pressed="true"] {
  color: var(--btn-text);
  background-image: linear-gradient(180deg, var(--btn-face-hi), var(--btn-face-lo)), var(--edge);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), inset 0 1px 0 var(--btn-gloss);
}

.kv { list-style: none; margin: 0; padding: 0; }
.kv li {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 13px 14px; border-bottom: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
}
.kv li:last-child { border-bottom: 0; }
.kv li:hover { background-color: var(--glass-inner); }
.kv__key { flex: 0 0 150px; color: var(--muted); }
.kv__val { color: var(--ink); }

/* --- Статья --- */

.article { max-width: 82ch; }
.article h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 14px; }
.article h2 { font-size: var(--text-xl); margin: 40px 0 12px; }
.article h3 { font-size: var(--text-lg); margin: 28px 0 10px; }
.article__meta { color: var(--muted); font-size: var(--text-sm); display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.article ul, .article ol { padding-left: 24px; }
.article li { margin-bottom: 8px; }

.article blockquote {
  margin: 26px 0; padding: 15px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(139, 243, 189, 0.26);
  background-color: rgba(139, 243, 189, 0.08);
  background-color: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--well-text);
}
.article code { color: var(--accent); font-family: var(--code); }
.article pre {
  background-color: rgba(0, 0, 0, 0.24);
  background-image: var(--edge);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--code);
  padding: 16px 18px; overflow-x: auto; margin: 20px 0;
}
.article pre code { color: var(--ink); }
.article hr { border: 0; border-top: 1px solid var(--glass-line); margin: 36px 0; }
.article__foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }

/* --- Подвал --- */

.foot { margin-top: 40px; padding: 20px 0 40px; color: var(--muted); font-size: var(--text-sm); }
.foot .wrap { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: baseline; }

/* --- Экраны поуже --- */

@media (max-width: 900px) {
  .win__body { padding: 26px 22px 30px; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 14px; }
  .win__body { padding: 22px 16px 26px; }
  /* Шапка в две строки: название и переключатель темы сверху, меню под ними */
  .top .wrap { flex-wrap: wrap; gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .nav { order: 3; flex-basis: 100%; margin-left: 0; gap: 4px; }
  .nav a { padding: 0 10px; }
  .row__date, .row__tag { flex: 0 0 auto; }
  .row__desc { padding-left: 0; }
  /* На телефоне заголовок занимает строку целиком, и стрелка остаётся
     висеть одна. Прячем её, список от этого только читается лучше. */
  .row__go { display: none; }
  .kv__key { flex: 0 0 110px; }
}

/* --- Тексты записи и вводный абзац --- */

.lead { font-size: var(--text-lg); color: var(--muted); max-width: 78ch; margin: 0 0 1em; }
.lead.todo { font-size: var(--text); }

.prose { max-width: 82ch; }
.prose p { margin: 0 0 1em; }
.prose h2 { font-size: var(--text-xl); margin: 40px 0 12px; }
.prose h3 { font-size: var(--text-lg); margin: 28px 0 10px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--link); }
/* Картинки в записях. Оригиналы бывают по 900 точек, и во всю ширину
   страницы это выглядит огромным. Ограничиваем размер. */
.prose img, .attachments img {
  display: block; max-width: min(100%, 440px); height: auto;
  border-radius: var(--radius-sm); margin: 18px 0;
}
.attachments { display: grid; gap: 14px; margin: 24px 0; }
.attachments video { max-width: min(100%, 560px); border-radius: var(--radius-sm); }
.prose blockquote {
  margin: 26px 0; padding: 14px 18px;
  border: 1px solid rgba(139, 243, 189, 0.26);
  border-radius: var(--radius-sm);
  background-color: rgba(139, 243, 189, 0.08);
  background-color: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--muted);
}
.prose code { color: var(--accent); font-family: var(--code); }
.prose pre {
  background-color: rgba(0, 0, 0, 0.24);
  border: 1px solid var(--glass-line); border-radius: var(--radius-sm);
  font-family: var(--code);
  padding: 16px 18px; overflow-x: auto; margin: 20px 0;
}
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.prose th, .prose td { border: 1px solid var(--glass-line); padding: 8px 12px; text-align: left; }

/* Приложенные к записи файлы */
.attachments { display: grid; gap: 14px; margin: 28px 0; }
.attachments img, .attachments video {
  max-width: 100%; border-radius: var(--radius-sm);
  border: 1px solid var(--glass-line);
}

/* Разделы в блоге и постраничный переход */
.tag-link {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 15px;
  border: 1px solid transparent; border-radius: 11px;
  color: var(--muted); font: 500 0.9rem / 1 var(--ui);
}
.tag-link--on {
  color: var(--btn-text); border-color: var(--btn-line);
  background-image: linear-gradient(180deg, var(--btn-face-hi), var(--btn-face-lo));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), inset 0 1px 0 var(--btn-gloss);
}
.pager { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 26px; }

/* --- Режим правки текстов --- */

.editbar {
  position: sticky; top: 58px; z-index: 40;
  padding: 10px 0;
  background-image: linear-gradient(180deg, rgba(139, 243, 189, 0.16), rgba(139, 243, 189, 0.06));
  border-bottom: 1px solid var(--glass-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.editbar .wrap { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.editbar__hint { color: var(--muted); font-size: var(--text-sm); }
.editbar__state { margin-left: auto; color: var(--accent); font-size: var(--text-sm); }
.editbar .btn { min-height: 38px; padding: 0 16px; font-size: var(--text-sm); }

/* Что можно править, подсвечивается, пока режим включён */
[data-edit="on"] [data-text] {
  outline: 1px dashed var(--accent); outline-offset: 3px;
  border-radius: 4px; cursor: text;
}
[data-edit="on"] [data-text]:focus {
  outline: 2px solid var(--accent);
  background-color: rgba(139, 243, 189, 0.12);
}

/* --- Админка: список записей --- */

.admin { width: 100%; border-collapse: collapse; margin-top: 26px; }
.admin th {
  text-align: left; font-size: var(--text-sm); color: var(--muted);
  font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--glass-line);
}
.admin td { padding: 14px 12px; border-bottom: 1px solid var(--glass-line); vertical-align: middle; }
.admin tr:hover td { background-color: var(--glass-inner); }
.admin__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin__actions form { margin: 0; }
.admin a { color: var(--link); }

.badge {
  display: inline-block; font-size: var(--text-sm);
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--glass-line); color: var(--muted);
}
.badge--on { color: var(--accent); border-color: var(--accent); }

/* --- Админка: редактор записи --- */

.editor { display: grid; gap: 18px; margin-top: 26px; }
.field { display: grid; gap: 6px; }
.field__name { font-size: var(--text-sm); font-weight: 600; }
.field__hint { font-size: var(--text-sm); color: var(--muted); }
.field__hint code { color: var(--accent); font-family: var(--code); }

.editor input[type="text"], .editor textarea {
  width: 100%; color: var(--ink);
  font: var(--text) / 1.6 var(--font);
  background-color: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--glass-line); border-radius: var(--radius-sm);
  padding: 12px 14px; min-height: 48px;
}
.editor textarea {
  min-height: 340px; resize: vertical;
  font-family: var(--code); line-height: 1.7;
}
.editor input:focus, .editor textarea:focus { border-color: var(--accent); outline: none; }
/* Подсказки внутри полей: по умолчанию браузер делает их слишком бледными */
.editor input::placeholder, .editor textarea::placeholder {
  color: var(--muted); opacity: 0.8;
}

.toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.toolbar .btn { min-height: 36px; padding: 0 14px; font-size: var(--text-sm); }

.dropzone {
  border: 2px dashed var(--glass-line); border-radius: var(--radius-sm);
  padding: 26px 20px; text-align: center; color: var(--muted); cursor: pointer;
}
.dropzone--over {
  border-color: var(--accent); color: var(--accent);
  background-color: rgba(139, 243, 189, 0.08);
}

.upload-list { display: grid; gap: 8px; }
.upload-row { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--muted); }
.upload-row img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.upload-row--bad { color: #ff9b8a; }

.check { display: flex; align-items: center; gap: 10px; font-size: var(--text); cursor: pointer; }
.check input { width: 20px; height: 20px; }

.btn--danger { color: #ff9b8a; border-color: rgba(255, 155, 138, 0.5); }
.btn--danger:hover { background-color: rgba(255, 155, 138, 0.15); }

/* --- Вход --- */

.login-widget { margin: 26px 0; min-height: 48px; }
.login-widget iframe { border-radius: 10px; }
.nav a[href="/logout"] { color: var(--accent); }

/* Поле для кода из письма: крупные цифры, чтобы не вглядываться */
.code-input {
  font: 700 26px / 1.2 var(--code);
  letter-spacing: 7px;
  text-align: center;
  max-width: 210px;
}
.resend { display: flex; align-items: center; gap: 10px; margin-top: 16px; }

/* Галочка с пояснением */
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--mac-blue); }
.check span { color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }

/* --- Меню человека в шапке --- */

.usermenu { position: relative; }
.usermenu__button {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; padding: 4px 10px 4px 4px;
  border: 1px solid var(--glass-line); border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.05);
}
.usermenu__button::-webkit-details-marker { display: none; }
.usermenu__button:hover { border-color: var(--accent); }
.usermenu__avatar {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; flex: 0 0 auto;
  font: 700 13px / 1 var(--ui); color: var(--ink);
  background-image: linear-gradient(180deg, var(--btn-face-hi), var(--btn-face-lo));
}
.usermenu__avatar img { width: 100%; height: 100%; object-fit: cover; }
.usermenu__name { font-size: var(--text-sm); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.usermenu__list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  min-width: 230px; display: grid; padding: 8px;
  border-radius: var(--radius-sm);
  /* То же стекло, что у окон и карточек. Тёмная основа снизу нужна,
     чтобы текст читался поверх фотографии фона, но просвечивает. */
  background-color: rgba(10, 14, 22, 0.52);
  border: 1px solid transparent;
  background-image: linear-gradient(155deg, var(--glass-hi), var(--glass-lo)), var(--edge);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-top);
  backdrop-filter: blur(18px) saturate(140%);
}
.usermenu__list a {
  padding: 10px 12px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: var(--text-sm);
}
.usermenu__list a:hover { background-color: rgba(139, 243, 189, 0.12); color: var(--ink); }
.usermenu__out { color: #ff9b8a !important; }

/* --- Профиль: обложка, аватар поверх неё, имя и кнопки --- */

/* Обложка во всю ширину панели: выходим за боковые отступы содержимого.
   Верхние углы обрезает сама панель, у неё есть скругление и скрытие. */
.phead { margin: -34px -34px 30px; }

@media (max-width: 900px) { .phead { margin: -26px -22px 24px; } }
@media (max-width: 640px) { .phead { margin: -22px -16px 20px; } }

.phead__cover {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 1; border: 0;
  background-image: linear-gradient(155deg, var(--glass-inner), rgba(255, 255, 255, 0.01));
}
.phead__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phead__cover--empty { display: grid; place-items: center; }
.phead__hint { color: var(--muted); font-size: var(--text-sm); }

/* Кнопка поверх обложки: та же mac-осовская, но поменьше */
.phead__change {
  position: absolute; right: 14px; top: 14px;
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
  border-radius: 999px; text-decoration: none;
  color: var(--btn-text); font: 500 0.9rem / 1 var(--ui);
  border: 1px solid transparent;
  background-image: linear-gradient(180deg, var(--btn-face-hi), var(--btn-face-lo)), var(--edge);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--btn-shadow), inset 0 1px 0 var(--btn-gloss);
}
.phead__change:hover { filter: brightness(1.07); color: var(--btn-text); }

/* Аватар заходит на обложку снизу, а имя и кнопки идут уже под ней */
.phead__bar {
  display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap;
  padding: 0 10px; position: relative;
}
.phead__avatar {
  flex: 0 0 auto; width: 132px; height: 132px; border-radius: 50%;
  margin-top: -66px;
  overflow: hidden; display: grid; place-items: center;
  font: 700 46px / 1 var(--ui); color: var(--ink);
  border: 5px solid rgba(10, 14, 22, 0.75);
  background-image: linear-gradient(180deg, var(--btn-face-hi), var(--btn-face-lo));
}
.phead__avatar img { width: 100%; height: 100%; object-fit: cover; }
.phead__info { flex: 1 1 260px; min-width: 0; padding-top: 22px; }
.phead__info h1 { margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2rem); }
.phead__seen { margin: 0 0 6px; color: var(--muted); font-size: var(--text-sm); }
.phead__info p:last-child { margin: 0; }
.phead__actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 22px; }

@media (max-width: 720px) {
  .phead__cover { aspect-ratio: 2 / 1; }
  .phead__bar { gap: 16px; }
  .phead__avatar { width: 96px; height: 96px; border-width: 4px; font-size: 34px; margin-top: -48px; }
  .phead__info { padding-top: 12px; }
  .phead__actions { width: 100%; padding-top: 0; }
}

/* --- Выбор обложки в правке профиля --- */

.coverpick { display: grid; gap: 14px; }
.coverpick__frame {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 1; border-radius: var(--radius-sm);
  border: 1px solid var(--glass-line);
  background-color: rgba(0, 0, 0, 0.22);
  cursor: grab;
  /* Иначе на телефоне вместе с картинкой поедет вся страница */
  touch-action: none;
}
.coverpick__frame.is-dragging { cursor: grabbing; }
.coverpick__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coverpick:not(.is-filled) .coverpick__frame img { display: none; }
.coverpick__empty {
  position: absolute; inset: 0; padding: 0 20px;
  display: grid; place-items: center; text-align: center;
  color: var(--muted); font-size: var(--text-sm);
}
.coverpick.is-filled .coverpick__empty { display: none; }
.coverpick__tools { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.coverpick__input { display: none; }
.coverpick__zoom { display: grid; gap: 4px; min-width: 210px; }
.coverpick__zoom input[type="range"] { width: 100%; accent-color: var(--mac-blue); }
.coverpick__zoom output { color: var(--ink); font-weight: 600; }

/* --- Профиль --- */

.profile { display: flex; gap: 26px; align-items: flex-start; margin: 26px 0 36px; }
.profile--view { align-items: center; }
.profile__avatar {
  flex: 0 0 auto; width: 132px; height: 132px; border-radius: 50%;
  overflow: hidden; display: grid; place-items: center;
  font: 700 48px / 1 var(--ui); color: var(--ink);
  border: 1px solid var(--glass-line);
  background-image: linear-gradient(180deg, var(--btn-face-hi), var(--btn-face-lo));
}
.profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile__main { flex: 1 1 auto; min-width: 0; }
.profile__main h1 { margin-top: 0; }

/* --- Записи человека --- */

.postcards { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.postcard {
  border: 1px solid var(--glass-line); border-radius: var(--radius-sm);
  padding: 16px 18px;
  background-image: linear-gradient(155deg, var(--glass-inner), rgba(255, 255, 255, 0.01));
}
.postcard__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.postcard__title { font-size: 1.15rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.postcard__title:hover { color: var(--accent); }
.postcard__text { margin: 8px 0 0; color: var(--muted); }
.postcard__meta {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; color: var(--muted); font-size: var(--text-sm);
}
.postcard__meta form { margin: 0; }
.postcard__meta a { color: var(--link); }

@media (max-width: 720px) {
  .profile { flex-direction: column; align-items: center; text-align: center; }
  .profile__main { width: 100%; }
}

/* --- Запись как пост: шапка с автором и панель действий --- */

.post__head { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.post__avatar {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  overflow: hidden; display: grid; place-items: center; text-decoration: none;
  font: 700 20px / 1 var(--ui); color: var(--ink);
  border: 1px solid var(--glass-line);
  background-image: linear-gradient(180deg, var(--btn-face-hi), var(--btn-face-lo));
}
.post__avatar img { width: 100%; height: 100%; object-fit: cover; }
.post__who { display: grid; gap: 2px; min-width: 0; }
.post__name { color: var(--ink); font-weight: 700; text-decoration: none; }
.post__name:hover { color: var(--accent); }
.post__when { color: var(--muted); font-size: var(--text-sm); }

.post__actions {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--glass-line);
}
.post__actions form { margin: 0; }
.post__actions .btn { min-height: 40px; padding: 0 16px; font-size: var(--text-sm); }

/* --- Комментарии --- */

.comments { margin-top: 46px; }
.comments h2 { margin-bottom: 18px; }

.comment-form { margin-bottom: 28px; display: grid; gap: 12px; }
.comment-form textarea,
.comment__reply textarea {
  width: 100%; color: var(--ink);
  font: var(--text) / 1.6 var(--font);
  background-color: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--glass-line); border-radius: var(--radius-sm);
  padding: 12px 14px; min-height: 92px; resize: vertical;
}
.comment-form textarea:focus,
.comment__reply textarea:focus { border-color: var(--accent); outline: none; }
.comment-form textarea::placeholder,
.comment__reply textarea::placeholder { color: var(--muted); opacity: 0.8; }
.comment-form__files { display: grid; gap: 8px; }

.file-row { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--muted); }
.file-row img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.file-row__drop {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #ff9b8a; text-decoration: underline; font: inherit;
}

.comments__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.comment {
  display: flex; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--glass-line); border-radius: var(--radius-sm);
  background-image: linear-gradient(155deg, var(--glass-inner), rgba(255, 255, 255, 0.01));
}
.comment--gone { opacity: 0.6; }
/* Ответ сдвинут вправо, чтобы разговор читался с одного взгляда */
.comment--reply { margin-left: 44px; }

.comment__face {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; display: grid; place-items: center;
  font-weight: 700;
  border: 1px solid var(--glass-line);
  background-image: linear-gradient(180deg, var(--btn-face-hi), var(--btn-face-lo));
}
.comment__face img { width: 100%; height: 100%; object-fit: cover; }
.comment__main { flex: 1 1 auto; min-width: 0; }
.comment__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.comment__head time { color: var(--muted); font-size: var(--text-sm); }
.comment__text { white-space: pre-line; margin: 8px 0 0; overflow-wrap: anywhere; }
.comment__media { display: grid; gap: 10px; margin-top: 12px; max-width: 520px; }
.comment__media img, .comment__media video {
  max-width: 100%; border-radius: var(--radius-sm);
  border: 1px solid var(--glass-line);
}
.comment__file { color: var(--link); }
.comment__tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.comment__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); text-decoration: underline;
  font: var(--text-sm) / 1 var(--font);
}
.comment__link:hover { color: #ff9b8a; }
.comment__reply summary { cursor: pointer; color: var(--link); font-size: var(--text-sm); }
.comment__reply form { margin-top: 10px; display: grid; gap: 8px; max-width: 560px; }
.comment__reply textarea { min-height: 68px; }

.like-form { margin: 0; }
.like-count { color: var(--muted); margin-left: 6px; }

/* --- Модерация комментариев в админке --- */

.moderation { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.moderation__item {
  border: 1px solid var(--glass-line); border-radius: var(--radius-sm);
  padding: 16px 18px;
  background-image: linear-gradient(155deg, var(--glass-inner), rgba(255, 255, 255, 0.01));
}
.moderation__item--hidden { opacity: 0.6; }
.moderation__head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.moderation__text { white-space: pre-line; margin: 10px 0; overflow-wrap: anywhere; }
.moderation__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.moderation__actions form { margin: 0; }
.moderation__actions .btn { min-height: 38px; padding: 0 14px; font-size: var(--text-sm); }
.badge--bad { color: #ff9b8a; border-color: rgba(255, 155, 138, 0.5); }

/* --- Стикеры --- */

.comment__stickers {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  margin-top: 10px;
}
.comment__stickers img,
.comment__stickers video {
  width: 108px; height: 108px; object-fit: contain;
  border: 0; background: none;
}

/* Окно выбора стикеров под формой комментария */
.sticker-pick {
  border: 1px solid var(--glass-line); border-radius: var(--radius-sm);
  background-image: linear-gradient(155deg, var(--glass-inner), rgba(255, 255, 255, 0.01));
  padding: 14px 16px; max-height: 330px; overflow-y: auto;
}
.sticker-pick__title {
  font-size: var(--text-sm); color: var(--muted);
  margin: 12px 0 6px; font-weight: 600;
}
.sticker-pick__title:first-child { margin-top: 0; }
.sticker-pick__grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
.sticker-pick__item {
  border: 1px solid transparent; border-radius: 14px; padding: 4px;
  background: none; cursor: pointer; line-height: 0;
}
.sticker-pick__item:hover, .sticker-pick__item:focus-visible {
  border-color: var(--accent);
  background-color: rgba(139, 243, 189, 0.10);
}
.sticker-pick__item img, .sticker-pick__item video {
  width: 100%; height: 60px; object-fit: contain;
}

/* Уже выбранные стикеры, которые уйдут с комментарием */
.comment-form__chosen { display: flex; flex-wrap: wrap; gap: 8px; }
.sticker-chip { position: relative; display: inline-block; }
.sticker-chip__face { width: 64px; height: 64px; object-fit: contain; display: block; }
.sticker-chip__drop {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--glass-line); cursor: pointer;
  background-color: var(--panel-2); color: var(--ink);
  font: 700 14px / 1 var(--ui); display: grid; place-items: center;
}
.sticker-chip__drop:hover { color: #ff9b8a; border-color: #ff9b8a; }

/* Наборы в админке */
.sticker-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.sticker-row__item { position: relative; display: inline-block; }
.sticker-row__item img, .sticker-row__item video {
  width: 56px; height: 56px; object-fit: contain; display: block;
}
.sticker-row__drop {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--glass-line);
  background-color: var(--panel-2); color: var(--ink);
  font: 700 13px / 1 var(--ui); display: grid; place-items: center;
}
.sticker-row__drop:hover { color: #ff9b8a; border-color: #ff9b8a; }

.editor--tight { margin-top: 12px; gap: 10px; }
.editor--tight input[type="file"] { color: var(--muted); font-size: var(--text-sm); }

/* Сообщение о том, что что-то получилось или не вышло.
   Подсвечиваем цветом всё окно целиком, боковой полосы нет. */
.notice {
  border: 1px solid rgba(139, 243, 189, 0.32);
  border-radius: var(--radius-sm); padding: 12px 16px; margin: 18px 0;
  background-color: rgba(139, 243, 189, 0.13);
  background-color: color-mix(in srgb, var(--accent) 13%, transparent);
}
.notice--bad {
  border-color: rgba(255, 155, 138, 0.35);
  background-color: rgba(255, 155, 138, 0.13);
  background-color: color-mix(in srgb, #ff9b8a 14%, transparent);
}