/* Общая оболочка Flow: токены визуального языка, базовые элементы и БОКОВОЕ МЕНЮ.
 *
 * Файл общий для `index.html` и `raw.html` СОЗНАТЕЛЬНО. Меню — это карта всей
 * платформы: пункт, добавленный в одну копию и забытый в другой, превращает навигацию
 * в ложь ровно на той странице, где о нём не знают. Одна копия разметки и один набор
 * токенов — единственный способ, которым две страницы остаются одним приложением.
 *
 * Страничное (таблицы записей, фильтры консоли) живёт в самих страницах: здесь только
 * то, что обязано совпадать. */

:root {
  --bg:#060810; --bg-warm:#0a0b14;
  --glass:rgba(12,14,24,.78); --glass-hover:rgba(18,20,34,.85); --glass-elevated:rgba(16,18,30,.94);
  --surface:#0e1018; --surface-2:#141620; --surface-3:#1a1c28;
  --border:rgba(255,255,255,.06); --border-subtle:rgba(255,255,255,.04); --border-hover:rgba(255,255,255,.12); --hover:rgba(255,255,255,.03);
  --accent:#38bdf8; --accent-hover:#0ea5e9; --accent-subtle:rgba(56,189,248,.1); --accent-glow:rgba(56,189,248,.25);
  --aurora-2:#818cf8; --aurora-3:#a78bfa; --aurora-4:#14b8a6;
  --amber:#f59e0b; --success:#34d399; --success-subtle:rgba(52,211,153,.1); --danger:#f43f5e; --danger-subtle:rgba(244,63,94,.1);
  --text:#e4e8f1; --text-secondary:#8892a8; --text-muted:#4a5168; --text-bright:#f8faff;
  --radius:14px; --radius-sm:8px; --radius-md:10px; --radius-lg:16px; --radius-xs:6px;
  --ease:cubic-bezier(.22,1,.36,1);
  --sidebar-width:250px;
  /* legacy-псевдонимы: существующие inline var() продолжают работать */
  --card:var(--glass); --line:var(--border); --dim:var(--text-secondary); --acc:var(--accent); --err:var(--danger); --ok:var(--success);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'Outfit',-apple-system,'Segoe UI',Roboto,sans-serif; font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh; }
body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 12% -5%, rgba(56,189,248,.10), transparent 70%),
    radial-gradient(52% 46% at 100% 8%, rgba(129,140,248,.10), transparent 70%),
    radial-gradient(42% 42% at 82% 105%, rgba(167,139,250,.08), transparent 70%); }
a { color:var(--accent); text-decoration:none; }
h4 { font-size:11px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.05em; margin:16px 0 8px; }
button { background:var(--accent); color:#04121f; border:1px solid var(--accent); border-radius:var(--radius-sm); padding:8px 15px; font-family:inherit; font-weight:600; font-size:13px; line-height:1; cursor:pointer; transition:background .15s,border-color .15s,box-shadow .15s; }
button:hover:not(:disabled) { background:var(--accent-hover); border-color:var(--accent-hover); box-shadow:0 4px 16px var(--accent-glow); }
button.ghost { background:transparent; color:var(--text-secondary); border:1px solid var(--border); }
button.ghost:hover:not(:disabled) { background:var(--hover); border-color:var(--border-hover); color:var(--text); }
button.danger, button.ghost.danger { background:transparent; color:var(--danger); border-color:transparent; }
button.danger:hover:not(:disabled), button.ghost.danger:hover:not(:disabled) { background:var(--danger-subtle); box-shadow:none; }
button:disabled { opacity:.4; cursor:not-allowed; }
input,textarea,select { width:100%; padding:8px 11px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-xs); color:var(--text); font-family:inherit; font-size:14px; outline:none; transition:border-color .15s,box-shadow .15s; }
input:focus,textarea:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-subtle); }
input::placeholder,textarea::placeholder { color:var(--text-muted); }
textarea { resize:vertical; min-height:60px; }
select { cursor:pointer; }
input[type=checkbox] { width:auto; accent-color:var(--accent); }
.card { background:var(--glass); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; margin-bottom:16px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 8px 30px rgba(0,0,0,.25); }
table { width:100%; border-collapse:collapse; }
tbody tr { transition:background .12s; }
tbody tr:hover { background:var(--hover); }
.dim { color:var(--text-secondary); font-size:12px; }
.muted { color:var(--text-muted); font-size:11.5px; }
.scroll { overflow-x:auto; }
#msg { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--glass-elevated); border:1px solid var(--border-hover); padding:11px 20px; border-radius:var(--radius-sm); display:none; backdrop-filter:blur(12px); box-shadow:0 10px 40px rgba(0,0,0,.4); font-size:13px; z-index:100; max-width:80vw; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:5px; }
::-webkit-scrollbar-track { background:transparent; }

/* ── Оболочка: меню слева, содержимое справа ────────────────────────────────── */
.shell { display:flex; align-items:flex-start; min-height:100vh; }
.sidebar { position:sticky; top:0; flex:none; width:var(--sidebar-width); height:100vh; display:flex; flex-direction:column;
  background:var(--glass); border-right:1px solid var(--border); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:20px 18px 14px; }
.sidebar-brand b { font-size:16px; font-weight:700; letter-spacing:-.02em;
  background:linear-gradient(115deg,var(--text-bright),var(--accent) 55%,var(--aurora-3)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sidebar-nav { flex:1; overflow-y:auto; padding:4px 10px 16px; }
.sidebar-foot { border-top:1px solid var(--border); padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.sidebar-foot .who { color:var(--text-secondary); font-size:12px; overflow-wrap:anywhere; }
.nav-item { display:flex; align-items:center; gap:8px; width:100%; padding:8px 12px; border-radius:var(--radius-sm);
  color:var(--text-secondary); font-size:13.5px; font-weight:500; cursor:pointer; border:none; background:transparent;
  text-align:left; font-family:inherit; line-height:1.4; transition:background .12s,color .12s; }
.nav-item:hover { background:var(--hover); color:var(--text); box-shadow:none; }
.nav-item.active { background:var(--accent-subtle); color:var(--accent); }
.nav-group > .nav-item { justify-content:space-between; text-transform:uppercase; font-size:11px; letter-spacing:.05em; color:var(--text-muted); font-weight:600; }
.nav-group > .nav-item:hover { color:var(--text-secondary); }
.nav-group-children { display:none; margin:2px 0 6px; padding-left:10px; border-left:1px solid var(--border); }
.nav-group.open > .nav-group-children { display:block; }
.nav-group-children .nav-item { padding:6px 10px; font-size:13px; }
.nav-caret { width:12px; height:12px; flex:none; transition:transform .16s var(--ease); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.nav-group.open .nav-caret { transform:rotate(90deg); }
.content { flex:1; min-width:0; padding:26px 26px 72px; }
.content-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.content-head h1 { font-size:20px; font-weight:700; margin:0; letter-spacing:-.02em; color:var(--text-bright); }
.content-head .sub { color:var(--text-muted); font-weight:400; font-size:12px; display:block; margin-top:2px; }
.menu-toggle { display:none; }

@media (max-width:900px) {
  .shell { display:block; }
  .sidebar { position:relative; width:auto; height:auto; border-right:none; border-bottom:1px solid var(--border); }
  .sidebar[data-collapsed="true"] .sidebar-nav, .sidebar[data-collapsed="true"] .sidebar-foot { display:none; }
  .sidebar-brand { justify-content:space-between; }
  .menu-toggle { display:inline-flex; align-items:center; gap:6px; background:transparent; color:var(--text-secondary); border:1px solid var(--border); }
  .content { padding:20px 16px 72px; }
}

/* ── Диалоги: одна реализация на обе страницы ───────────────────────────────── */
.dialog-backdrop { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(2,4,12,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:fade-in .14s ease-out; }
.dialog-backdrop[hidden] { display:none; }
.dialog { width:min(520px,100%); background:var(--glass-elevated); border:1px solid var(--border-hover); border-radius:var(--radius-lg);
  padding:20px; box-shadow:0 24px 80px rgba(0,0,0,.55); animation:dialog-in .18s var(--ease); max-height:86vh; overflow:auto; }
.dialog h2 { margin:0 0 8px; color:var(--text-bright); font-size:18px; line-height:1.3; letter-spacing:-.01em; }
.dialog p { margin:0; color:var(--text-secondary); white-space:pre-line; }
.dialog input, .dialog select { margin-top:16px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.dialog-actions .danger-confirm { color:#fff; background:var(--danger); border-color:var(--danger); }
.dialog-actions .danger-confirm:hover:not(:disabled) { background:#e11d48; border-color:#e11d48; box-shadow:0 4px 16px rgba(244,63,94,.22); }
@keyframes fade-in { from { opacity:0 } to { opacity:1 } }
@keyframes dialog-in { from { opacity:0; transform:translateY(8px) scale(.98) } to { opacity:1; transform:none } }