:root {
  /* ── Тёплая, дружелюбная палитра ─────────────────────────────
     Уходим от холодного сине-серого. Фон — тёплый off-white с
     лёгким лиловым подтоном (сознательно НЕ cream). Основной цвет —
     виноградно-фиолетовый, коралл — только для «новый лид». */
  --bg: #F3F6FC;
  --panel: #ffffff;
  --panel-2: #F4F7FC;
  --border: #E6EBF3;
  --border-strong: #D5DDEA;
  --text: #1A2233;
  --muted: #727A8B;
  --muted-2: #A0A8B7;

  --accent: #3B6FF6;
  --accent-hi: #2C58E0;
  --accent-weak: #E6EEFF;
  --accent-shadow: 0 6px 18px rgba(59,111,246,.30);

  --coral: #F5613F;
  --coral-weak: #FFEAE3;
  --green: #0FA968;
  --green-weak: #E3F6ED;
  --amber: #C2740A;
  --amber-weak: #FBEFDD;
  --red: #E5484D;
  --red-weak: #FCECEC;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 9px;
  --shadow: 0 1px 2px rgba(20,34,66,.04), 0 3px 10px rgba(20,34,66,.05);
  --shadow-lg: 0 10px 30px rgba(20,34,66,.12);
  --shadow-hover: 0 12px 28px rgba(59,111,246,.16);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Baloo 2", "Inter", var(--font);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Кривые и тайминги (emil-design-eng: сильные кастомные ease-out) */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: light;
}
/* Интерфейс всегда светлый — тёмную тему не используем. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Topbar ── */
.topbar {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.topbar-inner {
  max-width: 960px; margin: 0 auto; padding: 0 24px;
  height: 64px; display: flex; align-items: center; gap: 20px;
}
.brand { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--text); display: flex; align-items: center; gap: 9px; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(150deg, var(--accent), var(--coral)); box-shadow: 0 3px 8px rgba(59,111,246,.35); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.brand .mark svg { width: 19px; height: 19px; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a { color: var(--muted); padding: 7px 12px; border-radius: 999px; font-size: 14px; font-weight: 550; transition: background .16s var(--ease), color .16s var(--ease); }
.nav a:hover { background: var(--accent-weak); color: var(--accent); text-decoration: none; }
.nav a.active { background: var(--accent); color: #fff; }
.nav a.active:hover { background: var(--accent-hi); }
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 700; vertical-align: middle; }
.nav a.active .nav-badge { background: #fff; color: var(--accent); }
.topbar .spacer { flex: 1; }
.userchip { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }

/* ── Layout ── */
.wrap { max-width: 960px; margin: 0 auto; padding: 44px 24px 110px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 34px; flex-wrap: wrap; }
h1 { font-family: var(--display); font-size: 27px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 3px; }
.sub { color: var(--muted); font-size: 14.5px; margin: 0; }
h2 { font-family: var(--display); font-size: 17px; font-weight: 600; margin: 0 0 14px; letter-spacing: -.01em; }
.crumb { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent); }

/* Тёплое приветствие на дашборде */
.hello { font-family: var(--display); }
.wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.4s var(--ease) 0.4s 2; }
@keyframes wave { 0%,60%,100%{transform:rotate(0)} 15%{transform:rotate(16deg)} 30%{transform:rotate(-8deg)} 45%{transform:rotate(12deg)} }

/* ── Card ── */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card + .card { margin-top: 24px; }
.card-p { padding: 26px 28px; }
.card-head { padding: 20px 28px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ── Grid of projects ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.proj {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); display: block;
  transition: border-color .18s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.proj:active { transform: scale(0.99); }
.proj .name { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--text); margin-bottom: 14px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.proj .name .pico { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-weak); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.proj .name .pico svg { width: 17px; height: 17px; }
.proj .stats { display: flex; gap: 22px; align-items: baseline; }
.proj .num { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.proj .num.new { color: var(--coral); display: inline-flex; align-items: center; gap: 7px; }
.proj .num.new .liveDot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(245,97,63,.5); animation: pulse 2s var(--ease) infinite; }
.proj .lbl { font-size: 12px; color: var(--muted); margin-top: 5px; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(245,97,63,.45)} 70%{box-shadow:0 0 0 7px rgba(245,97,63,0)} 100%{box-shadow:0 0 0 0 rgba(245,97,63,0)} }

/* ── Avatar (signature) ── */
.av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .01em; user-select: none; }
.av.sm { width: 30px; height: 30px; font-size: 12px; }
.av--0 { background: #E6EEFF; color: #2C58E0; }
.av--1 { background: #FFE9E3; color: #E0552F; }
.av--2 { background: #E1F6ED; color: #0E9A5F; }
.av--3 { background: #FCEBD6; color: #C2740A; }
.av--4 { background: #E4F0FE; color: #2E72D2; }
.av--5 { background: #FCE7F1; color: #D23F86; }
.av--6 { background: #E6F5F4; color: #12938C; }
.av--7 { background: #EFEAE1; color: #8A6D3B; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 999px; }
.badge.new { background: var(--coral-weak); color: var(--coral); }
.badge.read { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.badge.archived { background: var(--amber-weak); color: var(--amber); }
.badge.off { background: var(--red-weak); color: var(--red); }
.badge.on { background: var(--green-weak); color: var(--green); }
.badge.role { background: var(--accent-weak); color: var(--accent); }
.proj-tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 650; padding: 3px 11px; border-radius: 999px; background: var(--accent-weak); color: var(--accent); transition: filter .14s var(--ease); }
.proj-tag:hover { text-decoration: none; filter: brightness(.97); }
.filter-select { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text); background: var(--panel); border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 30px 7px 14px; cursor: pointer; transition: border-color .14s var(--ease); }
.filter-select:hover { border-color: var(--accent); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 9px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--panel); color: var(--text);
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover { background: var(--panel-2); border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--accent-shadow); }
.btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); padding: 7px 11px; }
.btn.ghost:hover { background: var(--accent-weak); color: var(--accent); }
.btn.danger { color: var(--red); border-color: var(--border); }
.btn.danger:hover { background: var(--red-weak); border-color: var(--red); color: var(--red); }
.btn.sm { padding: 6px 11px; font-size: 13px; border-radius: var(--radius-xs); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:disabled:active { transform: none; }

/* ── Forms ── */
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
label.field small { color: var(--muted); font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel], textarea, select {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 10px 13px; outline: none; transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 4px var(--accent-weak); }
textarea { resize: vertical; min-height: 76px; font-family: inherit; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 160px; }
.check { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ── Tables / lead rows ── */
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.data td { padding: 18px; border-bottom: 1px solid var(--border); vertical-align: top; transition: background .16s var(--ease); }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .16s var(--ease); }
table.data tbody tr:hover td { background: #FBFAFE; }
table.data tr.unread td:first-child { box-shadow: inset 3px 0 0 var(--coral); }

/* «Шапка» заявки: аватар + имя */
.lead-id { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lead-id .who { min-width: 0; }
.lead-id .nm { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -.01em; line-height: 1.2; }
.lead-id .tag-line { margin-top: 3px; }

/* ── Submission fields ── */
.kv { display: grid; grid-template-columns: minmax(78px, max-content) 1fr; gap: 7px 14px; align-items: start; }
.kv dt { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.kv dt svg { width: 14px; height: 14px; color: var(--muted-2); flex: none; }
.kv dd { margin: 0; font-weight: 550; word-break: break-word; }
.kv dd a { font-weight: 550; }
.meta-line { color: var(--muted-2); font-size: 12px; margin-top: 12px; font-family: var(--mono); }
.rowactions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ── Code / key ── */
.code {
  font-family: var(--mono); font-size: 13px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px;
  white-space: pre-wrap; word-break: break-all; color: var(--text); position: relative;
}
.keyrow { display: flex; gap: 8px; align-items: center; }
.keyrow .code { flex: 1; padding: 10px 13px; white-space: nowrap; overflow: auto; }

/* ── Tabs / filters ── */
.filters { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.filters a { font-size: 13px; font-weight: 600; color: var(--muted); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); transition: border-color .14s var(--ease), color .14s var(--ease), background .14s var(--ease); }
.filters a:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.filters a.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Misc ── */
.empty { text-align: center; padding: 58px 20px; color: var(--muted); }
.empty .emo { font-size: 42px; line-height: 1; margin-bottom: 14px; display: block; animation: floaty 3.4s var(--ease-inout) infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.empty .big { font-family: var(--display); font-size: 17px; color: var(--text); font-weight: 600; margin-bottom: 6px; }
.empty p { margin: 0 auto; max-width: 380px; }
.notice { padding: 12px 15px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 18px; border: 1px solid transparent; font-weight: 500; }
.notice.ok { background: var(--green-weak); color: var(--green); }
.notice.err { background: var(--red-weak); color: var(--red); }
.divider { height: 1px; background: var(--border); margin: 20px 0; border: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.muted { color: var(--muted); }
.pager { display: flex; gap: 10px; justify-content: center; margin-top: 20px; align-items: center; padding: 16px; }
.copybtn { position: absolute; top: 8px; right: 8px; }
.cols-2 { display: flex; flex-direction: column; gap: 24px; }

/* Мини-строка в админке (проекты/пользователи) */
.row-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.row-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.row-item .idcol { display: flex; align-items: center; gap: 11px; min-width: 0; }

@media (max-width: 720px) { .nav a { padding: 7px 9px; } .brand span:last-child { position: absolute; left: -9999px; } }

/* ── Каскадное появление (emil-design-eng: stagger 45ms) ── */
@media (prefers-reduced-motion: no-preference) {
  .stagger > * { opacity: 0; animation: rise .5s var(--ease) forwards; }
  .stagger > *:nth-child(1){animation-delay:.02s}
  .stagger > *:nth-child(2){animation-delay:.07s}
  .stagger > *:nth-child(3){animation-delay:.12s}
  .stagger > *:nth-child(4){animation-delay:.17s}
  .stagger > *:nth-child(5){animation-delay:.22s}
  .stagger > *:nth-child(6){animation-delay:.27s}
  .stagger > *:nth-child(7){animation-delay:.32s}
  .stagger > *:nth-child(8){animation-delay:.37s}
  @keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
}

/* Подъём карточек при наведении — только для мыши */
@media (hover: hover) and (pointer: fine) {
  .proj:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-hover); }
}

/* Уважаем reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .wave, .empty .emo, .proj .num.new .liveDot { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ══ Страница входа (сплит-экран) ══════════════════════════════ */
body.auth {
  font-family: var(--font);
  background: #ffffff;
  color: var(--text);
}
.auth-split { display: flex; min-height: 100vh; }

.auth-left {
  flex: 0 0 46%;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 48px;
  background: #ffffff;
}
.auth-inner { width: 100%; max-width: 384px; }

.auth-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--text); letter-spacing: -.01em; margin-bottom: 60px; }
.auth-brand:hover { text-decoration: none; }
.auth-brand .mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(150deg, var(--accent), var(--coral)); box-shadow: 0 4px 10px rgba(59,111,246,.38); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.auth-brand .mark svg { width: 22px; height: 22px; }

.auth-head { text-align: center; margin-bottom: 26px; }
.auth-head h1 { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 8px; color: var(--text); }
.auth-head p { font-size: 14px; color: var(--muted); margin: 0; }

.seg { display: flex; gap: 4px; background: var(--panel-2); border-radius: 12px; padding: 5px; margin-bottom: 22px; }
.seg-btn {
  flex: 1; font-family: inherit; font-size: 14px; font-weight: 550; cursor: pointer;
  border: 0; background: transparent; color: var(--muted); padding: 9px 0; border-radius: 8px;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.seg-btn.active { background: #ffffff; color: var(--accent); font-weight: 650; box-shadow: 0 1px 4px rgba(20,34,66,.12); }

.lb-field {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border-strong); border-radius: 14px; padding: 9px 12px; margin-bottom: 14px;
  background: #fff; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.lb-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-weak); }
.lb-ic { flex: none; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.lb-ic svg { width: 20px; height: 20px; }
.lb-sep { flex: none; width: 1px; height: 30px; background: var(--border); }
.lb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lb-label { font-size: 11px; font-weight: 500; color: var(--muted-2); }
.lb-body input { border: 0; background: transparent; padding: 0; font-family: inherit; font-size: 15px; font-weight: 500; color: var(--text); width: 100%; }
.lb-body input:focus { outline: none; box-shadow: none; border: 0; }
.lb-body input::placeholder { color: #C3BFD0; font-weight: 400; }
.lb-check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green); display: none; align-items: center; justify-content: center; transform: scale(.6); transition: transform .22s var(--spring); }
.lb-check svg { width: 13px; height: 13px; color: #fff; }
.lb-field.valid .lb-check { display: flex; transform: scale(1); }
.lb-eye { flex: none; border: 0; background: transparent; color: var(--muted-2); cursor: pointer; padding: 4px; display: flex; transition: color .14s var(--ease); }
.lb-eye:hover { color: var(--accent); }
.lb-eye svg { width: 20px; height: 20px; }

.auth-btn {
  width: 100%; font-family: var(--display); font-size: 16px; font-weight: 600; cursor: pointer;
  color: #fff; background: var(--accent); border: 0; border-radius: 14px; padding: 15px; margin-top: 6px;
  transition: background .16s var(--ease), transform .1s var(--ease), box-shadow .16s var(--ease);
  box-shadow: var(--accent-shadow);
}
.auth-btn:hover { background: var(--accent-hi); }
.auth-btn:active { transform: scale(0.985); }

.auth-error { background: var(--red-weak); color: var(--red); font-size: 13px; padding: 10px 13px; border-radius: 10px; margin-bottom: 14px; }
.auth-note { background: var(--accent-weak); color: var(--accent-hi); font-size: 13px; line-height: 1.45; padding: 12px 14px; border-radius: 12px; margin-top: 4px; }
.auth-foot { margin-top: 38px; font-size: 12.5px; line-height: 1.6; color: var(--muted-2); text-align: center; }

.auth-right { flex: 1; position: relative; overflow: hidden; background: linear-gradient(155deg, #E6EEFF 0%, #CFE0FF 48%, #E8F0FF 100%); }
.auth-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: .96; }

@media (max-width: 900px) {
  .auth-right { display: none; }
  .auth-left { flex: 1; padding: 32px 20px; }
  .auth-brand { margin-bottom: 40px; }
}

/* ══════════════════════════════════════════════════════════════════
   App-shell: иконочный рельс слева + прокручиваемая область
   ══════════════════════════════════════════════════════════════════ */
:root { --grey: #EDF1F7; --rail-w: 76px; }

body.app { height: 100vh; overflow: hidden; display: flex; background: var(--panel); }

.rail {
  width: var(--rail-w); flex: none; height: 100vh;
  background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 0 16px; gap: 6px; z-index: 10;
}
.rail .rlogo { display: block; margin-bottom: 18px; }
.rail .rlogo img { width: 38px; height: 38px; display: block; }
.rail-nav { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.rail a.ri, .rail button.ri {
  position: relative; width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-2); background: transparent; border: 0; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), transform .12s var(--ease);
}
.rail a.ri svg, .rail button.ri svg { width: 23px; height: 23px; }
.rail a.ri:hover, .rail button.ri:hover { background: var(--accent-weak); color: var(--accent); text-decoration: none; }
.rail a.ri:active, .rail button.ri:active { transform: scale(0.92); }
.rail a.ri.active { background: var(--accent); color: #fff; }
.rail a.ri.active:hover { background: var(--accent-hi); color: #fff; }
.rail .ri .rdot { position: absolute; top: 8px; right: 8px; min-width: 8px; height: 8px; padding: 0 4px; border-radius: 999px; background: var(--coral); box-shadow: 0 0 0 2px var(--panel); font-size: 10px; font-weight: 700; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.rail a.ri.active .rdot { box-shadow: 0 0 0 2px var(--accent); }
.rail .rspace { flex: 1; }
.rail .ruser { margin-top: 6px; }

/* Область контента (скролл-контейнер) */
.content { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; background: var(--bg); }
.content > .wrap { max-width: 960px; }
/* Лента заявок — на сером фоне */
.content.feed { background: var(--grey); }

/* Компактный тултип у иконок рельса */
.rail .ri[data-tip]::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) scale(.96); transform-origin: left center;
  background: var(--text); color: #fff; font-size: 12px; font-weight: 550; white-space: nowrap;
  padding: 5px 9px; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .14s var(--ease), transform .14s var(--ease); z-index: 30;
}
@media (hover: hover) and (pointer: fine) {
  .rail .ri[data-tip]:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* ── Лента: заголовок ── */
.feed-col { max-width: 700px; margin: 0 auto; padding: 40px 24px 90px; }
.feed-head { margin-bottom: 22px; }
.feed-head h1 { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
.feed-head .sub { font-size: 15px; }
.feed-filters { display: flex; gap: 7px; margin-top: 20px; flex-wrap: wrap; }
.feed-filters a {
  font-size: 14px; font-weight: 600; color: var(--muted); padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.6); border: 1px solid transparent;
  transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.feed-filters a:hover { text-decoration: none; background: #fff; color: var(--text); box-shadow: var(--shadow); }
.feed-filters a.active { background: var(--accent); color: #fff; box-shadow: var(--accent-shadow); }

/* ── Карточка заявки («листочек») ── */
.feed-list { display: flex; flex-direction: column; gap: 16px; }
.lcard {
  background: #fff; border-radius: 22px; padding: 26px 28px;
  box-shadow: 0 1px 2px rgba(20,34,66,.04), 0 8px 22px rgba(20,34,66,.07);
  border: 1px solid rgba(255,255,255,.9);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
  will-change: transform, opacity;
}
@media (hover: hover) and (pointer: fine) {
  .lcard:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,34,66,.05), 0 16px 34px rgba(20,34,66,.12); }
}
/* Новая — яркая, с коралловым «носиком» слева */
.lcard.is-new { position: relative; overflow: hidden; }
.lcard.is-new::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0; background: var(--coral); }
/* Обработанные — приглушённые, сливаются с фоном */
.lcard.is-done { background: #F4F5F8; box-shadow: none; border-color: transparent; opacity: .82; }
.lcard.is-done .lc-name { color: var(--muted); }
.lcard.is-done .lc-val { color: var(--muted); font-weight: 550; }
.lcard.is-done:hover { opacity: 1; }

/* Шапка карточки */
.lc-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.lc-top .av { width: 52px; height: 52px; font-size: 19px; }
.lc-id { min-width: 0; flex: 1; }
.lc-name { font-family: var(--display); font-size: 23px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.lc-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.lc-time { color: var(--muted-2); font-size: 13.5px; }
.lc-right { display: flex; align-items: center; gap: 10px; flex: none; }

/* Тело — крупные поля */
.lc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 26px; }
.lc-field { min-width: 0; }
.lc-lbl { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted-2); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.lc-lbl svg { width: 14px; height: 14px; }
.lc-val { font-size: 18px; font-weight: 600; letter-spacing: -.01em; word-break: break-word; }
.lc-val a { font-weight: 600; }
.lc-msg { grid-column: 1 / -1; }
.lc-msg .lc-val { font-weight: 500; font-size: 16.5px; line-height: 1.5; }

/* Низ карточки — источник + действия */
.lc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.lc-src { color: var(--muted-2); font-size: 12.5px; font-family: var(--mono); }
.lc-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.lc-actions form { margin: 0; }

/* Пустая лента */
.feed-empty { text-align: center; padding: 80px 20px; }
.feed-empty .emo { font-size: 52px; display: block; margin-bottom: 16px; animation: floaty 3.4s var(--ease-inout) infinite; }
.feed-empty .big { font-family: var(--display); font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.feed-empty p { color: var(--muted); max-width: 380px; margin: 0 auto; font-size: 15px; }

/* ── Прилёт «листочков» ── */
@media (prefers-reduced-motion: no-preference) {
  .fly .lcard { opacity: 0; animation: paper-in .6s var(--ease) forwards; }
  .fly .lcard:nth-child(even) { animation-name: paper-in-alt; }
  @keyframes paper-in { from { opacity: 0; transform: translateX(80px) rotate(2.5deg); } to { opacity: 1; transform: none; } }
  @keyframes paper-in-alt { from { opacity: 0; transform: translateX(80px) rotate(-2.5deg); } to { opacity: 1; transform: none; } }
}

/* Уход карточки при действии */
.lcard.leaving { opacity: 0 !important; transform: translateX(60px) rotate(2deg) !important; }

@media (max-width: 560px) {
  .feed-col { padding: 28px 14px 70px; }
  .rail { --rail-w: 62px; }
  .lcard { padding: 22px 20px; border-radius: 18px; }
  .lc-fields { grid-template-columns: 1fr; }
}

/* ══ Уведомления: каналы и переключатели ═══════════════════════════ */
.chan { display: flex; align-items: center; gap: 16px; }
.chan-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.chan-ic svg { width: 23px; height: 23px; }
.chan-ic.mail { background: var(--accent-weak); color: var(--accent); }
.chan-ic.tg { background: #e3f2fd; color: #229ED9; }
.chan-body { flex: 1; min-width: 0; }
.chan-title { font-weight: 650; font-size: 16px; letter-spacing: -.01em; }
.chan-sub { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.chan-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

.hint { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); background: var(--panel-2); border-radius: 12px; padding: 12px 14px; }
.hint.warn { background: var(--amber-weak); color: var(--amber); }
.hint code { font-family: var(--mono); font-size: 12.5px; }

/* Переключатель */
.switch { flex: none; position: relative; display: inline-flex; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 50px; height: 30px; border-radius: 999px; background: #d7dbe0;
  display: block; transition: background .18s ease; position: relative;
}
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.25); transition: transform .18s cubic-bezier(.4,.9,.3,1.2);
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track .knob { transform: translateX(20px); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 4px var(--accent-weak); }