/* Шрифты — раздаются со своего сервера, а не с Google Fonts. Раньше каждая
   страница дополнительно ходила на fonts.googleapis.com/fonts.gstatic.com —
   лишний внешний запрос на каждый переход, который может быть медленным
   в зависимости от маршрута до Google. Веса Manrope 400-700 лежат в одном
   файле на подмножество (вариативный шрифт), поэтому файлов немного. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/michroma-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/michroma-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibmplexmono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibmplexmono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibmplexmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Шрифты для plan.html/plan2.html (IBM Plex Sans/Mono 500-600) и
   menu.html (PT Serif/PT Sans/PT Mono) — те же самые семейства, что
   страницы уже использовали через Google Fonts, просто теперь
   раздаются со своего сервера (см. общий комментарий выше про
   fonts.googleapis.com). IBM Plex Sans — вариативный шрифт, поэтому
   400/500/600 в одном файле на подмножество; IBM Plex Mono и все
   PT-шрифты — статические, отдельный файл на каждое начертание. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/ibmplexsans-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/ibmplexsans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/ibmplexsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibmplexmono500-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibmplexmono500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibmplexmono500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibmplexmono600-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibmplexmono600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibmplexmono600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptmono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptmono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptsans-italic-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptsans-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptsans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptsans-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptsans-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptsans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ptsans-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ptsans-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ptsans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptserif-italic-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptserif-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptserif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptserif-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptserif-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ptserif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ptserif-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ptserif-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ptserif-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #120a1c;
  --ink: #f5efe6;
  --ink-dim: #a89c8f;
  --ink-dimmer: #6e6459;
  --accent-cyan: #ff8a4c;
  --accent-violet: #ff4d3a;
  --danger: #ff3b6b;
  --warn: #e2c05a;
  --border: rgba(255, 190, 140, 0.16);
  --border-soft: rgba(255, 190, 140, 0.1);
  --glass: rgba(255, 210, 170, 0.05);
  --glass-strong: rgba(255, 210, 170, 0.09);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  min-height: 100%;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

/* Доступность: для полей с говорящим placeholder вместо видимой подписи —
   подпись присутствует для скринридера, визуально не показывается. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skeleton-заглушки на время загрузки списков (вместо пустого экрана) */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.skeleton-block {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  animation: skeleton-pulse 1.3s ease-in-out infinite;
}
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  margin-bottom: 10px;
}
.skeleton-row .skeleton-block { height: 15px; }
.skeleton-row .skeleton-block.sk-w-main { flex: 1; max-width: 220px; }
.skeleton-row .skeleton-block.sk-w-side { width: 90px; margin-left: auto; }
.skeleton-tile {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.skeleton-tile .skeleton-block.sk-avatar { width: 56px; height: 56px; border-radius: 50%; }
.skeleton-tile .skeleton-block.sk-w-main { height: 13px; width: 70%; }

/* Звёздный фон */
.stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 65%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 50% 15%, #fff, transparent),
    radial-gradient(1px 1px at 70% 80%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 35%, #fff, transparent),
    radial-gradient(1px 1px at 15% 90%, #fff, transparent),
    radial-gradient(1px 1px at 95% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 45%, #fff, transparent),
    radial-gradient(1px 1px at 42% 8%, #fff, transparent),
    radial-gradient(1px 1px at 8% 55%, #fff, transparent),
    radial-gradient(circle at 20% 20%, rgba(255, 138, 76, 0.2), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 77, 58, 0.16), transparent 45%),
    radial-gradient(circle at 50% 95%, rgba(255, 138, 76, 0.12), transparent 40%);
  opacity: 0.9;
}

/* Шапка */
.header {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 12px 16px;
  padding: 24px 48px;
  position: relative;
  z-index: 1;
}

.cta {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 3px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background: var(--glass);
  border: 1px solid var(--accent-cyan);
  color: var(--ink);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cta:active {
  transform: scale(0.96);
  background: linear-gradient(120deg, var(--accent-violet), var(--accent-cyan));
  color: #150f18;
  border-color: transparent;
  box-shadow: 0 0 22px rgba(255, 138, 76, 0.5);
}

.cta:hover {
  border-color: rgba(255, 138, 76, 0.6);
  box-shadow: 0 0 20px rgba(255, 77, 58, 0.25);
  transform: translateY(-1px);
}

/* Боковое меню */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: rgba(11, 10, 31, 0.75);
  backdrop-filter: blur(18px);
  border-right: 1px solid var(--border-soft);
  padding: 32px 20px;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 100;
  overflow-y: auto;
}

.sidebar.open {
  transform: translateX(0);
}

.sidebar-logo {
  display: block;
  font-family: "Michroma", sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 40px;
  padding: 0 14px;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sidebar-logo:hover {
  color: var(--accent-cyan);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-link {
  position: relative;
  display: block;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 12px 14px 12px 18px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  font-size: 15px;
  font-weight: 600;
  background: var(--glass);
  border: 1px solid rgba(255, 138, 76, 0.3);
  border-left: 2px solid transparent;
  box-shadow: 0 0 14px rgba(255, 138, 76, 0.06);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-link:hover {
  background: var(--glass-strong);
  color: var(--ink);
  border-left-color: var(--accent-cyan);
  box-shadow: inset 0 0 24px rgba(255, 138, 76, 0.1);
  transform: translateX(3px);
}

.sidebar-link:active {
  transform: translateX(1px) scale(0.98);
}

.sidebar-link.active {
  background: linear-gradient(120deg, var(--accent-violet), var(--accent-cyan));
  color: #120a1c;
  font-weight: 700;
  border-left-color: transparent;
  box-shadow: 0 0 22px rgba(255, 138, 76, 0.4);
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 5, 20, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 90;
}

.overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.menu-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 44px;
  height: 44px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  z-index: 110;
}

.menu-btn span {
  width: 20px;
  height: 2px;
  background: var(--ink);
}

.page {
  transition: margin-left 0.3s ease;
}

@media (min-width: 900px) {
  /* На широком экране меню больше не "прибито" поверх контента отдельным
     слоем — обычная колонка в общем потоке страницы, но остаётся на
     экране (position: sticky) при прокрутке длинных страниц. Если сама
     высота меню больше экрана - у него своя прокрутка (overflow-y),
     чтобы нижние пункты тоже были доступны. Подтверждено Александром
     16.09.2026: меню должно "бежать" за пользователем, не уезжать вверх. */
  body { display: flex; }
  .sidebar {
    position: sticky;
    top: 0;
    transform: none;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
  }
  .menu-btn { display: none; }
  .overlay { display: none; }
  .page { margin-left: 0; flex: 1; min-width: 0; }
}

/* Конструктор меню: группы/подпункты */
.sidebar-group { display: flex; flex-direction: column; gap: 8px; }
.sidebar-group-label {
  padding: 8px 14px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dimmer);
}
.sidebar-group-children {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border-soft);
  margin-left: 8px;
}

/* Конструктор меню: перетаскивание пунктов (только владелец) */
.sidebar-nav.sortable-enabled .sidebar-link,
.sidebar-nav.sortable-enabled .sidebar-group { cursor: grab; }
.sidebar-nav .sidebar-link.sortable-ghost,
.sidebar-nav .sidebar-group.sortable-ghost { opacity: 0.4; }
.sidebar-nav .sidebar-link.sortable-chosen { border-color: var(--accent-cyan); }

.sidebar-drag-toggle {
  margin-top: 18px;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--ink-dimmer);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: "Manrope", sans-serif;
  font-size: 12.5px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.sidebar-drag-toggle:hover { color: var(--ink); border-color: var(--accent-cyan); }
.sidebar-logout {
  margin-top: 12px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--ink-dim);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.sidebar-logout:hover { color: var(--ink); border-color: rgba(255, 77, 58, 0.6); }
.sidebar-logout:disabled { opacity: 0.6; cursor: default; }
.sidebar-drag-toggle.active {
  color: #120a1c;
  border-style: solid;
  border-color: var(--accent-cyan);
  background: linear-gradient(120deg, var(--accent-violet), var(--accent-cyan));
  font-weight: 700;
}

/* Выпадающие меню */
.dropdown {
  position: relative;
}

.dropdown-menu[hidden] {
  display: none;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 170px;
  background: rgba(16, 14, 40, 0.9);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}

.dropdown-item {
  display: block;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 10px 12px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  font-size: 14px;
  background: var(--glass);
  border: 1px solid rgba(255, 138, 76, 0.22);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.dropdown-item:hover {
  background: var(--glass-strong);
  color: var(--ink);
  border-left-color: var(--accent-cyan);
  transform: translateX(2px);
}

.dropdown-item:active {
  background: linear-gradient(120deg, var(--accent-violet), var(--accent-cyan));
  color: #150f18;
  border-left-color: transparent;
  transform: translateX(2px) scale(0.96);
}

/* Главный экран */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 24px 8px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.hero-planet {
  position: absolute;
  top: 50%;
  right: -120px;
  transform: translateY(-50%);
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffcfa0 0%, #ff8a4c 32%, #ff4d3a 62%, #591a10 100%);
  box-shadow: 0 0 100px rgba(255, 138, 76, 0.35), inset -50px -50px 90px rgba(0, 0, 0, 0.45);
  opacity: 0.9;
  z-index: 0;
}

.hero > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .hero-planet {
    width: 320px;
    height: 320px;
    right: -140px;
    opacity: 0.55;
  }
}

@media (max-width: 600px) {
  .hero-planet {
    width: 220px;
    height: 220px;
    right: -100px;
    top: 30%;
    opacity: 0.4;
  }
}

.hero-title {
  font-family: "Michroma", sans-serif;
  font-size: clamp(40px, 8vw, 100px);
  font-weight: 700;
  line-height: 1.05;
  background: linear-gradient(120deg, #e8e6ff 15%, var(--accent-violet) 55%, var(--accent-cyan) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: wordIn 0.8s ease forwards;
}

.hero-title .word:nth-child(1) { animation-delay: 0.1s; }
.hero-title .word:nth-child(2) { animation-delay: 0.35s; }

@keyframes wordIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Анимация: бокалы с деньгами чокаются */
.toast {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.toast-svg {
  overflow: visible;
  filter: drop-shadow(0 0 14px rgba(255, 77, 58, 0.25));
}

.glass {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.glass-left { animation: tiltLeft 2.4s ease-in-out infinite; }
.glass-right { animation: tiltRight 2.4s ease-in-out infinite; }

@keyframes tiltLeft {
  0%, 45%, 100% { transform: rotate(0deg); }
  55% { transform: rotate(14deg); }
  65% { transform: rotate(0deg); }
}

@keyframes tiltRight {
  0%, 45%, 100% { transform: rotate(0deg); }
  55% { transform: rotate(-14deg); }
  65% { transform: rotate(0deg); }
}

.spark {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: sparkPulse 2.4s ease-in-out infinite;
}

@keyframes sparkPulse {
  0%, 50% { opacity: 0; transform: scale(0.6); }
  58% { opacity: 1; transform: scale(1.2); }
  70%, 100% { opacity: 0; transform: scale(0.6); }
}

/* Раздел ЦУП */
.cup {
  position: relative;
  z-index: 1;
  padding: 60px 24px 100px;
  max-width: 1240px;
  margin: 0 auto;
}

/* Первый блок на главной сразу после .hero - Александр отдельно просил
   поднять "Список дел" ближе к анимации с бокалами, промежуток
   оставался слишком большим даже после первого сокращения .hero. */
#tasks {
  padding-top: 16px;
}

.cup-title {
  font-family: "Michroma", sans-serif;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 600;
  color: var(--accent-cyan);
  text-align: center;
  margin-bottom: 36px;
  letter-spacing: 0.01em;
}

.cup-input {
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
}

.cup-input::placeholder { color: var(--ink-dimmer); }

.cup-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 24px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.cup-block h3 {
  font-family: "Michroma", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}

.cup-prompt {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  white-space: pre-wrap;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 16px;
  max-height: 260px;
  overflow-y: auto;
}

.cup-instructions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.cup-instruction-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  font-size: 14px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.cup-instruction-item:hover {
  background: var(--glass-strong);
  border-color: rgba(255, 138, 76, 0.4);
  transform: translateX(2px);
}

.cup-del-btn {
  background: transparent;
  border: none;
  color: var(--ink-dimmer);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
}

.cup-del-btn:hover {
  color: var(--danger);
  background: rgba(255, 107, 129, 0.1);
}

.cup-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.cup-add-row .cup-input {
  flex: 1;
  min-width: 140px;
}

.cup-add-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 12px;
  border: 1px dashed var(--border-soft);
  background: rgba(255, 255, 255, 0.02);
}

.cup-add-card-title {
  font-size: 12px;
  color: var(--ink-dimmer);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 12px;
}

.cup-add-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 140px;
}

.cup-add-field-label {
  font-size: 11px;
  color: var(--ink-dimmer);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cup-instructions-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 700px) {
  .cup-instructions-columns { grid-template-columns: 1fr; }
}

/* Раздел Отделы */
.departments {
  position: relative;
  z-index: 1;
  padding: 60px 48px 100px;
}

.departments-title {
  font-family: "Michroma", sans-serif;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 600;
  color: var(--accent-violet);
  margin-bottom: 32px;
  text-align: center;
}

.departments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.dept-card {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 600;
  padding: 20px;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dept-card:hover {
  background: var(--glass-strong);
  border-color: rgba(255, 138, 76, 0.5);
  box-shadow: 0 0 24px rgba(255, 77, 58, 0.18);
  transform: translateY(-4px);
}

@media (max-width: 600px) {
  .header {
    padding: 16px 16px 16px 72px;
    justify-content: flex-start;
  }
  .header .cta {
    padding: 9px 16px;
    font-size: 13px;
  }
  .hero-title { font-size: clamp(32px, 12vw, 60px); }
  .toast-svg { width: 180px; height: 114px; }
  .departments { padding: 40px 20px 70px; }
  .departments-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* Список дел: широкие колонки день+неделя / месяц+долгосрочные, "отложенные"
   отдельной строкой во всю ширину внизу. Один явный акцентный цвет на
   категорию (--cat-color/--cat-soft) - глазами сразу видно, где горит,
   а что может подождать. Текст крупный (18px), дел немного - решили не
   экономить место. Своё пространство имён (.tasks-*), не переиспользует
   .cup-block/.cup-instructions - те классы всё ещё нужны agents.html. */
.tasks-carousel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 12px;
}

@media (max-width: 860px) {
  .tasks-carousel { grid-template-columns: 1fr; }
}

/* Мобильный экран - Александр попросил отдельно: не просто узкий
   столбик, а листание по одной категории на весь экран, как карусель.
   Тот же .tasks-carousel, просто другой display на маленьких экранах -
   scroll-snap, без библиотек и JS-перетаскивания. */
@media (max-width: 560px) {
  .tasks-carousel {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    margin: 0 -20px 4px;
    padding: 0 20px;
    scrollbar-width: none;
  }
  .tasks-carousel::-webkit-scrollbar { display: none; }
  .tasks-carousel .tasks-col {
    flex: 0 0 100%;
    scroll-snap-align: start;
    margin-right: 14px;
  }
}

.tasks-carousel-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
@media (max-width: 560px) {
  .tasks-carousel-dots { display: flex; }
}
.tasks-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border);
  cursor: pointer;
}
.tasks-carousel-dot.active { background: var(--accent-cyan); }

.tasks-col {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 28px;
}

.tasks-col-day { --cat-color: #ff8a4c; --cat-soft: rgba(255, 138, 76, 0.12); }
.tasks-col-week { --cat-color: #ffb84c; --cat-soft: rgba(255, 184, 76, 0.12); }
.tasks-col-month { --cat-color: #c98fd6; --cat-soft: rgba(201, 143, 214, 0.12); }
.tasks-col-long { --cat-color: #8993a8; --cat-soft: rgba(137, 147, 168, 0.12); }
.tasks-col-later { --cat-color: #6e6459; --cat-soft: rgba(110, 100, 89, 0.12); }

.tasks-col-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--cat-color);
}

.tasks-col-icon { font-size: 26px; line-height: 1; flex: none; }

.tasks-col-head h3 {
  font-family: "Michroma", sans-serif;
  font-size: 18px;
  color: var(--ink);
  margin: 0;
}

.tasks-col-count {
  margin-left: auto;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--cat-color);
  background: var(--cat-soft);
  border-radius: 999px;
  padding: 3px 11px;
  flex: none;
}

.tasks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.tasks-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--cat-soft);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.tasks-item:hover { border-color: var(--cat-color); transform: translateX(3px); }

.tasks-item.is-urgent {
  background: rgba(255, 59, 107, 0.12);
  border-color: rgba(255, 59, 107, 0.5);
}
.tasks-item.is-urgent:hover { border-color: var(--danger); }
/* Выполненные дела — зелёные с галочкой, остаются в колонке «для истории» (07.10.2026) */
.tasks-item.is-done { background: rgba(52, 211, 153, 0.10); border-color: rgba(52, 211, 153, 0.45); padding: 12px 16px; }
.tasks-item.is-done:hover { border-color: rgba(52, 211, 153, 0.7); }
.tasks-item.is-done .tasks-item-num { color: #34d399; border-color: #34d399; font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 800; width: 28px; height: 28px; }
.tasks-item.is-done .tasks-item-text { color: #cfeedd; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.tasks-item-done-at { display: block; margin-top: 2px; color: #34d399; font-size: 12.5px; font-weight: 600; }
.tasks-done-hide { flex: none; margin-left: 6px; background: transparent; border: 1px solid rgba(52, 211, 153, 0.45); color: #34d399; border-radius: 8px; padding: 6px 10px; font-family: "Manrope", sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tasks-done-hide:hover { background: rgba(52, 211, 153, 0.12); }
/* Архив выполненных — неброско, под зелёным списком */
.tasks-arch-toggle { display: block; margin-top: 10px; background: none; border: 0; padding: 4px; color: var(--ink-dimmer); font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; }
.tasks-arch-toggle:hover { color: var(--ink-dim); }
.tasks-arch-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tasks-item.is-done.is-archived { background: rgba(255, 255, 255, 0.03); border-color: var(--border-soft); padding: 9px 12px; }
.tasks-item.is-done.is-archived .tasks-item-num { color: var(--ink-dimmer); border-color: var(--border); width: 24px; height: 24px; font-size: 13px; }
.tasks-item.is-done.is-archived .tasks-item-text { color: var(--ink-dim); font-size: 14.5px; }
.tasks-item.is-done.is-archived .tasks-item-done-at { color: var(--ink-dimmer); }
.tasks-item.is-done.is-archived .tasks-done-hide { border-color: var(--border); color: var(--ink-dim); }
.tasks-arch-more { color: var(--ink-dim); }
.tasks-done-box.only-archive { border-top-color: var(--border-soft); padding-top: 4px; }
.tasks-pending-link { display: inline-block; margin: 0 0 14px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border-soft); color: var(--ink-dim); font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color .15s, background .15s; }
.tasks-pending-link[hidden] { display: none; }
.tasks-pending-link:hover { border-color: var(--accent-cyan); }
.tasks-pending-link.has { border-color: rgba(226, 192, 90, 0.6); color: var(--warn); background: rgba(226, 192, 90, 0.09); }
.tasks-item-wait { display: block; margin-top: 3px; color: var(--warn); font-size: 12.5px; font-weight: 700; }
/* «Материалы по делу»: скрепка на строке дела и окно со списком (08.10.2026) */
.tasks-item-mat { margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--glass); color: var(--accent-cyan); font-family: "Manrope", sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; vertical-align: middle; }
.tasks-item-mat:hover { border-color: var(--accent-cyan); }
.site-dialog-box.site-dialog-materials { max-height: 88vh; width: 100%; max-width: 560px; display: flex; flex-direction: column; }
.site-dialog-materials .site-dialog-text { font-weight: 700; overflow-wrap: anywhere; }
.mat-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; margin: 2px 0 12px; }
.mat-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--glass); }
.mat-body { flex: 1; min-width: 0; }
.mat-link { color: var(--accent-cyan); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.mat-title { color: var(--ink); font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.mat-text { color: #e9e2d4; font-size: 14.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.mat-file { color: var(--ink-dim); font-size: 14px; overflow-wrap: anywhere; }
.mat-sub, .mat-meta { color: var(--ink-dimmer); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.mat-remove { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-soft); background: transparent; color: var(--ink-dim); cursor: pointer; }
.mat-remove:hover { border-color: var(--danger); color: var(--danger); }
.mat-empty { color: var(--ink-dim); font-size: 14px; line-height: 1.5; padding: 14px; border: 1px dashed var(--border); border-radius: 10px; }
.mat-form { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.mat-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-soft); background: rgba(255, 255, 255, 0.04); color: var(--ink); font-family: "Manrope", sans-serif; font-size: 15px; resize: vertical; }
.mat-input:focus { outline: none; border-color: var(--accent-cyan); }
.mat-form .site-dialog-btn { align-self: flex-start; }
.mat-hint { color: var(--ink-dimmer); font-size: 12.5px; line-height: 1.45; }
.tasks-item-return { display: block; margin-top: 3px; color: var(--accent-cyan); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.tasks-menu-note { padding: 10px 14px; color: var(--warn); font-size: 13px; font-weight: 600; }
.tasks-done-box { list-style: none; margin-top: 6px; padding-top: 12px; border-top: 1px dashed rgba(52, 211, 153, 0.35); }
.tasks-done-head { color: #34d399; font-size: 13.5px; font-weight: 700; margin: 0 0 8px 4px; }
.tasks-done-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tasks-done-more { margin-top: 10px; background: none; border: 0; padding: 4px; color: #34d399; font-family: "Manrope", sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tasks-done-total { margin: 0 0 14px; color: #34d399; font-size: 15px; font-weight: 700; }
.tasks-item.is-urgent .tasks-item-num {
  color: var(--danger);
  border-color: var(--danger);
}

.tasks-item-num {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Michroma", sans-serif;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--cat-color);
  border: 1px solid var(--cat-color);
}

.tasks-item-text {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.tasks-item-employee { color: var(--ink-dim); font-weight: 500; }

.tasks-item-empty { color: var(--ink-dimmer); font-size: 14px; padding: 12px 4px; }
/* Пометка дня у дела из «Планов на день», записанного на будущий день (07.10.2026) */
.tasks-item-date { display: block; margin-top: 3px; color: var(--accent-cyan); font-size: 12.5px; font-weight: 700; }

.tasks-col-full { grid-column: 1 / -1; }

/* меню "три точки" у каждого дела - тот же приём, что на contacts.html/
   customers.html (card-menu), но своё пространство имён, т.к. общего
   правила в style.css для этого не было (было только инлайн у тех
   страниц) */
.tasks-menu-wrap { position: relative; flex: none; margin-left: auto; }

.tasks-menu-btn {
  background: none;
  border: none;
  color: var(--ink-dimmer);
  font-size: 19px;
  cursor: pointer;
  padding: 2px 8px;
  line-height: 1;
  border-radius: 6px;
}

.tasks-menu-btn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }

.tasks-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: rgba(16, 10, 24, 0.97);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tasks-menu[hidden] { display: none; }

.tasks-menu-item {
  background: none;
  border: none;
  color: var(--ink);
  text-align: left;
  font-family: "Manrope", sans-serif;
  font-size: 13.5px;
  padding: 9px 10px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  cursor: pointer;
}

.tasks-menu-item:hover { background: var(--glass-strong); }
.tasks-menu-item:active { background: var(--accent-cyan); color: #150f18; transform: scale(0.97); }

.tasks-menu-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-dimmer);
  padding: 4px 8px 2px;
}

.tasks-menu-back {
  color: var(--ink-dimmer);
  border-bottom: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  margin-bottom: 2px;
}

.tasks-col-clear-btn {
  flex: none;
  background: none;
  border: none;
  color: var(--ink-dimmer);
  font-size: 15px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
  line-height: 1;
}
.tasks-col-clear-btn:hover { color: var(--cat-color); background: rgba(255, 255, 255, 0.06); }

.tasks-detail-box {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.5;
}

.tasks-detail-box[hidden] { display: none; }

.tasks-detail-edit {
  width: 100%;
  min-height: 70px;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  padding: 10px;
  resize: vertical;
  margin-bottom: 8px;
}

.tasks-detail-save {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--cat-color, var(--accent-cyan));
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
.tasks-detail-save:hover { border-color: var(--cat-color, var(--accent-cyan)); }

/* Быстрое добавление дела прямо в колонке (Фаза 2 - раньше было только
   в снесённой доске "Все дела по категориям" на calendar.html, перенесено
   сюда, чтобы не потерять возможность добавить дело без даты). */
.tasks-quickadd { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.tasks-quickadd-toggle {
  background: none;
  border: none;
  color: var(--cat-color, var(--accent-cyan));
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 2px;
}
.tasks-quickadd-toggle:hover { text-decoration: underline; }
.tasks-quickadd-form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tasks-quickadd-input {
  flex: 1;
  min-width: 140px;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  box-sizing: border-box;
}
.tasks-quickadd-submit {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--cat-color, var(--accent-cyan));
  cursor: pointer;
}
.tasks-quickadd-submit:hover { border-color: var(--cat-color, var(--accent-cyan)); }

/* Метки и чек-лист у дела (Фаза 2 - тоже перенесено из снесённой доски,
   чтобы не терять функциональность, просто теперь доступно через ⋮ у
   любого дела на любой странице, а не только в доске календаря). */
.tasks-tags-box, .tasks-checklist-box {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.tasks-tags-box[hidden], .tasks-checklist-box[hidden] { display: none; }

.tasks-tags-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tasks-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  padding: 4px 6px 4px 10px;
  border-radius: 20px;
  background: rgba(255, 138, 76, 0.12);
  border: 1px solid rgba(255, 138, 76, 0.3);
  color: var(--accent-cyan);
}
.tasks-tag-chip-remove {
  background: none;
  border: none;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}
.tasks-tag-add-input {
  font-family: "Manrope", sans-serif;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--ink);
  width: 90px;
}

.tasks-checklist-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tasks-checklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  padding: 6px 2px;
}
.tasks-checklist-item label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.tasks-checklist-empty { color: var(--ink-dimmer); font-size: 13px; }
.tasks-checklist-remove {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.tasks-checklist-remove:hover { color: var(--danger); }
.tasks-checklist-add-row { display: flex; gap: 8px; }
.tasks-checklist-add-input {
  flex: 1;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
}
.tasks-checklist-add-btn {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--cat-color, var(--accent-cyan));
  cursor: pointer;
}
.tasks-checklist-add-btn:hover { border-color: var(--cat-color, var(--accent-cyan)); }

/* Календарь на главной - тот же самый calendar.html во фрейме
   (?embed=1 прячет его собственные меню/шапку - см. calendar.html),
   поэтому данные всегда в реальном времени, без отдельной копии кода
   отрисовки календаря. Высота с запасом под сетку месяца + панель дня
   + доску категорий под ней, у самой страницы внутри есть прокрутка,
   если что-то не поместится. */
.calendar-embed-frame {
  width: 100%;
  height: 1500px;
  border: none;
  border-radius: 16px;
  display: block;
}

/* Диаграмма связей отделов/агентов (mapconnections.js) - общая копия для
   страниц, где раньше не было своего <style> под неё (главная, вторая
   карта на "Карта проекта"). agents.html/plan2.html держат свою копию
   этих же правил инлайн - не трогаю, чтобы не рисковать тем, что уже
   отлажено, здесь просто добавил то же самое как общее. */
.conn-diagram-wrap {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px;
}
.conn-diagram-wrap svg { display: block; width: 100%; max-width: 820px; height: auto; margin: 0 auto; }
@media (max-width: 480px) { .conn-diagram-wrap { padding: 6px; } }
.conn-node-circle { fill: rgba(255,255,255,0.04); stroke: var(--border); stroke-width: 1.5; }
.conn-node-circle.ready { stroke: #34d399; }
.conn-node-circle.wait { stroke: var(--warn); }
.conn-node-circle.off { stroke: var(--ink-dimmer); }
.conn-node-circle.team-window { fill: rgba(34, 211, 238, 0.06); }
.conn-node-circle.team-person { stroke-width: 2.4; }
.conn-win-bar { stroke: var(--ink-dimmer); stroke-width: 1; opacity: 0.6; }
.conn-node-label { font-family: "Manrope", sans-serif; font-size: 11px; fill: var(--ink); }
.conn-node-label.hub { font-family: "Michroma", sans-serif; font-size: 11px; fill: var(--accent-cyan); }
.conn-edge { stroke: var(--ink-dimmer); stroke-width: 1.2; opacity: 0.6; fill: none; }
.conn-edge:hover { opacity: 1; stroke: var(--accent-cyan); stroke-width: 1.8; cursor: pointer; }
.conn-edge-special { stroke: var(--accent-cyan); stroke-width: 1.5; opacity: 0.85; }
.conn-edge-special:hover { stroke: var(--danger); opacity: 1; }
.conn-edge-team { stroke: var(--ink); stroke-width: 1.4; opacity: 0.5; }
.conn-edge-planned { stroke: var(--ink-dimmer); stroke-width: 1.4; opacity: 0.95; stroke-dasharray: 3 4; }
.conn-edge-caption { font-family: "Manrope", sans-serif; fill: var(--ink-dim); }
.conn-arrow-fill { fill: var(--ink-dimmer); }
.conn-empty-msg { color: var(--ink-dim); margin: 0; font-size: 13px; }

.conn-edge.lit {
  stroke: var(--accent-cyan);
  stroke-width: 2.4;
  opacity: 1;
  stroke-dasharray: 6 5;
  animation: connFlow 0.5s linear infinite;
}
@keyframes connFlow {
  to { stroke-dashoffset: -11; }
}
.conn-node-circle.lit {
  stroke: var(--accent-cyan);
  stroke-width: 3.5;
  animation: connGlow 0.8s ease-in-out infinite alternate;
}
@keyframes connGlow {
  from { filter: drop-shadow(0 0 2px var(--accent-cyan)); }
  to { filter: drop-shadow(0 0 9px var(--accent-cyan)); }
}
.conn-node-label.lit { fill: var(--accent-cyan); font-weight: 700; }

/* Заглушки разделов (Бухгалтер, Здоровье, Помощник) */
.stub-text {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.6;
}

/* Модалка вместо confirm()/alert() (site/dialog.js) */
.site-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 5, 20, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 300;
}
.site-dialog-box {
  width: 100%;
  max-width: 360px;
  background: rgba(16, 10, 24, 0.97);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.site-dialog-text {
  margin: 0 0 20px;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-line;
}
.site-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.site-dialog-btn {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--ink);
}
.site-dialog-btn:hover { background: var(--glass-strong); }
.site-dialog-btn-ok {
  border-color: var(--accent-cyan);
  background: linear-gradient(120deg, var(--accent-violet), var(--accent-cyan));
  color: #150f18;
}
.site-dialog-btn-ok.site-dialog-btn-danger {
  border-color: var(--danger);
  background: var(--danger);
  color: #150f18;
}
.site-dialog-btn-cancel { color: var(--ink-dim); }
/* Окно «выберите одного из списка» (sitePick) — например, кому передать дело */
.site-dialog-pick { max-height: 86vh; display: flex; flex-direction: column; }
.site-dialog-options { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; overflow-y: auto; min-height: 0; }
.site-dialog-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--glass);
  color: var(--ink); font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.site-dialog-option:hover, .site-dialog-option:focus-visible { border-color: var(--accent-cyan); background: var(--glass-strong); outline: none; }
.site-dialog-option-label { overflow-wrap: anywhere; }
.site-dialog-option-hint { color: var(--ink-dim); font-size: 12.5px; font-weight: 500; }

/* HUD-уголки на технических панелях, в духе приборной панели корабля */
.cup-block {
  position: relative;
}

.cup-block::before,
.cup-block::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--accent-cyan);
  opacity: 0.55;
  pointer-events: none;
}

.cup-block::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.cup-block::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* Телефон/планшет: кнопка меню не налезает на шапку страницы и на логотип в открытом меню.
   Кнопка фиксирована слева сверху (20px + 44px), поэтому первая шапка страницы и логотип
   в меню начинаются правее неё. На компьютере (от 900px) кнопки нет — правило не действует. */
@media (max-width: 899px) {
  .page > header:first-child { padding-left: 80px; min-height: 84px; }
  .sidebar-logo { padding-left: 60px; }
  /* Кнопка меню висит поверх страницы и при прокрутке под ней проходит текст. С полупрозрачным
     фоном буквы просвечивали сквозь кнопку («кнопка наезжает на название») — делаем фон плотным. */
  .menu-btn { background: rgba(26, 16, 34, 0.94); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
}

/* Цена за дело (13.10.2026): пометка у дела и поле «Цена» — поле видит только главный директор */
.tasks-item-price { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--accent-cyan); color: var(--ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.tasks-quickadd-input.tasks-quickadd-price { flex: 0 0 110px; width: 110px; min-width: 0; }
.tasks-quickadd-price[hidden] { display: none; }
.tasks-price-box { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 6px 0 10px; }
.tasks-price-box[hidden] { display: none; }
.tasks-price-label { display: flex; flex-direction: column; gap: 4px; color: var(--ink-dim); font-size: 12.5px; font-weight: 700; }
.tasks-price-input { width: 150px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--glass-strong); color: var(--ink); font: inherit; font-size: 15px; }
.tasks-price-input:focus { outline: none; border-color: var(--accent-cyan); }
.tasks-price-clear { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--ink-dim); font: inherit; font-size: 13.5px; cursor: pointer; }
.tasks-price-clear:hover { border-color: var(--warn); color: var(--ink); }

/* Дело, к которому пришли по прямой ссылке (страница заказчика, 13.10.2026) */
.tasks-item.is-focus { border-color: var(--accent-cyan); box-shadow: 0 0 0 2px var(--accent-cyan); }

/* Телефон (21.10.2026): колонки дел листаются вбок (карусель с прокруткой), и её рамка обрезала длинное меню
   «три точки» снизу — нижние пункты было не достать. На телефоне меню выезжает панелью снизу экрана, поверх всего;
   закрывается, как и раньше, нажатием мимо. */
@media (max-width: 560px) {
  .tasks-menu {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    min-width: 0;
    max-height: 75vh;
    overflow-y: auto;
    z-index: 1000;
    padding: 8px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.55);
  }
  .tasks-menu-item { padding: 12px 14px; font-size: 16px; }
  /* после касания «наведение» на телефоне залипает — сдвиг строки сбил бы панель меню с места */
  .tasks-item:hover { transform: none; }
}

/* Внутри приложения «Ассистент» (21.10.2026): ходят по нижнему меню приложения, левое меню сайта не нужно.
   Класс .in-app ставит script.js. */
.in-app .menu-btn, .in-app .sidebar, .in-app .overlay { display: none !important; }
.in-app .page { margin-left: 0 !important; }

/* Группы бокового меню — выпадающие списки (21.10.2026): заголовок со стрелкой, раскрываются и сворачиваются
   только нажатием на него. Заголовок выглядит как обычный пункт меню. */
.sidebar-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.sidebar-group-arrow { flex: none; font-size: 13px; transition: transform 0.2s ease; }
.sidebar-group.open > .sidebar-group-toggle .sidebar-group-arrow { transform: rotate(180deg); }
.sidebar-group-children[hidden] { display: none; }