/* «Мозг Creativo»: общие цвета (светлая и тёмная тема) и боковое меню. Подключают все страницы CRM. */
:root {
  --bg:#f5f4ef; --paper:#ffffff; --ink:#1f1e1d; --muted:#6f6d66; --line:#e6e3da; --accent:#2f9e6e; --accent-dark:#22784f;
  --mint:#e9f2ea; --mint-line:#d6e6da; --red:#b4483c; --red-bg:#f8e9e5; --amber:#93641f; --amber-bg:#f8f0df; --radius:14px;
  --field:#fbfaf7; --hover:#f0efe9; --side:#efeee8; --overlay:rgba(31,30,29,.45); --shadow:rgba(31,30,29,.07);
  --chat-bg:#efeee8; --bubble-in:#ffffff; --bubble-out:#dcefe2; --chip:rgba(255,255,255,.75);
  --tg-bg:#e7e5dc; --tg-bubble:#fff; --tg-btn:#f3f2ec; --tg-link:#168acd; --on-accent:#fff; --side-line:var(--line); --s-out-bg:#e3f3e8; --s-out:#1d6b43; --s-work-bg:#fbeed6; --s-work:#8a5a10; --s-idea-bg:#e8edf6; --s-idea:#3b5585; --ch-24ai:#7c5cf0;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#181818; --paper:#222324; --ink:#e7e7e8; --muted:#9c9ea1; --line:#333536; --accent:#4cc38a; --accent-dark:#7dd8ac;
    --mint:#1f3329; --mint-line:#28463a; --red:#ee9a8d; --red-bg:#3a2523; --amber:#e6b872; --amber-bg:#372e20;
    --field:#1d1e1f; --hover:#2c2e30; --side:#252728; --side-line:#3a3c3d; --overlay:rgba(0,0,0,.6); --shadow:rgba(0,0,0,.45);
    --chat-bg:#141414; --bubble-in:#2a2b2d; --bubble-out:#1f3a2c; --chip:rgba(0,0,0,.35);
    --tg-bg:#141414; --tg-bubble:#2a2b2d; --tg-btn:#323436; --tg-link:#6cb8ee; --on-accent:#10130f; --s-out-bg:#1f3329; --s-out:#7dd8ac; --s-work-bg:#3a2f1c; --s-work:#e6b872; --s-idea-bg:#24303f; --s-idea:#9db7e3; --ch-24ai:#9b85ff;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#181818; --paper:#222324; --ink:#e7e7e8; --muted:#9c9ea1; --line:#333536; --accent:#4cc38a; --accent-dark:#7dd8ac;
    --mint:#1f3329; --mint-line:#28463a; --red:#ee9a8d; --red-bg:#3a2523; --amber:#e6b872; --amber-bg:#372e20;
    --field:#1d1e1f; --hover:#2c2e30; --side:#252728; --side-line:#3a3c3d; --overlay:rgba(0,0,0,.6); --shadow:rgba(0,0,0,.45);
    --chat-bg:#141414; --bubble-in:#2a2b2d; --bubble-out:#1f3a2c; --chip:rgba(0,0,0,.35);
    --tg-bg:#141414; --tg-bubble:#2a2b2d; --tg-btn:#323436; --tg-link:#6cb8ee; --on-accent:#10130f; --s-out-bg:#1f3329; --s-out:#7dd8ac; --s-work-bg:#3a2f1c; --s-work:#e6b872; --s-idea-bg:#24303f; --s-idea:#9db7e3; --ch-24ai:#9b85ff;
    color-scheme:dark;
  }
}

body.brain { display:grid; grid-template-columns:236px minmax(0, 1fr); grid-auto-rows:max-content; min-height:100vh; }
body.brain > main { width:100%; min-width:0; grid-column:-2; }
.side { position:sticky; top:0; height:100vh; overflow-y:auto; background:var(--side); border-right:1px solid var(--side-line);
  padding:16px 12px; display:flex; flex-direction:column; gap:2px; z-index:15; }
.side .logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; padding:4px 10px 14px; color:var(--ink); text-decoration:none; }
.side .logo i { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--mint); }
.side .grp { display:flex; align-items:center; width:100%; font:inherit; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:10px 0 2px; padding:6px 10px; background:none; border:0; border-radius:8px; cursor:pointer; text-align:left; }
.side .grp:hover { background:var(--hover); color:var(--ink); }
.side .grp i { margin-left:auto; font-style:normal; font-size:12px; transition:transform .15s; }
.side .sec.folded .grp i { transform:rotate(-90deg); }
.side .sec.folded nav { display:none; }
.side nav { display:flex; flex-direction:column; gap:2px; }
.side nav a, .side .soon { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; color:var(--muted);
  text-decoration:none; font-weight:500; font-size:14px; }
.side nav a:hover { background:var(--hover); color:var(--ink); }
.side nav a.on { background:var(--mint); color:var(--accent-dark); }
.side .ic { width:20px; text-align:center; }
.side .soon { opacity:.55; cursor:default; }
.side .soon em { margin-left:auto; font-style:normal; font-size:11px; padding:1px 7px; border-radius:99px; background:var(--bg); }
.side .foot { margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.side .me { display:flex; align-items:center; gap:8px; padding:0 6px; font-size:13px; color:var(--muted); }
.side .me .u { color:var(--ink); font-weight:600; }
.side .row { display:flex; gap:6px; flex-wrap:wrap; }
.side .row .b { flex:1; }
.side .role { font-size:12px; padding:3px 8px; border-radius:99px; background:var(--mint); color:var(--accent-dark); }
.side .role.viewer { background:var(--amber-bg); color:var(--amber); }
.side .badge-n { display:inline-block; min-width:18px; padding:0 6px; margin-left:auto; border-radius:99px; background:var(--red); color:#fff;
  font-size:12px; line-height:18px; text-align:center; }
.theme { display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.theme button { flex:1; font:inherit; font-size:13px; padding:6px 0; border:0; background:transparent; color:var(--muted); cursor:pointer; }
.theme button.on { background:var(--mint); color:var(--accent-dark); }
.topbar { display:none; }
.side-shade { display:none; }

@media (max-width: 900px) {
  body.brain { grid-template-columns:minmax(0, 1fr); }
  .side { position:fixed; left:0; top:0; bottom:0; width:260px; transform:translateX(-100%); transition:transform .2s; box-shadow:4px 0 20px var(--shadow); }
  body.side-open .side { transform:none; }
  body.side-open .side-shade { display:block; position:fixed; inset:0; background:var(--overlay); z-index:14; }
  .topbar { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--paper); border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:12; }
  .topbar button { font:inherit; font-size:20px; background:none; border:0; color:var(--ink); cursor:pointer; padding:2px 6px; }
  .topbar b { font-size:16px; }
}