/* ——— каркас: белые панели на подложке #F2F6FC, зазор 12px (как у НейроАгента) ——— */
.app { display: flex; height: 100vh; padding: 12px; gap: 12px; }
.side {
  width: 256px; flex: none; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--r-panel);
  transition: width .2s var(--ease); overflow: hidden;
}
.side.mini { width: 64px; }
.side-top { display: flex; align-items: center; gap: 8px; padding: 18px 12px 16px 16px; min-height: 68px; }
.side-logo { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.side-logo .mark { width: 30px; height: 30px; flex: none; }
.side-logo .wm { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.side-logo .wm b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.side-logo .wm span { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.side.mini .side-logo .wm, .side.mini .nav-l, .side.mini .nav-b, .side.mini .side-group, .side.mini .user-meta, .side.mini .user-act, .side.mini .side-foot .demo-mark { display: none; }
.side.mini .side-top { padding: 16px 0 12px; justify-content: center; flex-direction: column; }
.side-nav { padding: 0 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.nav-i {
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px; border-radius: var(--r-btn);
  font-weight: 500; font-size: 14px; color: var(--ink); text-align: left; width: 100%;
  transition: background .15s; position: relative; flex: none;
}
.nav-i svg { width: 20px; height: 20px; flex: none; stroke-width: 1.7; }
.nav-i:hover { background: var(--fill-2); }
.nav-i.on { background: var(--fill-2); font-weight: 600; }
.nav-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-b { flex: none; }
.nav-b .badge { background: transparent; color: var(--ink-3); font-size: 12.5px; padding: 0; min-width: 0; }
.side.mini .nav-i { justify-content: center; padding: 0; }
.nav-i .mini-badge { display: none; }
.side.mini .nav-i .mini-badge { display: block; position: absolute; top: 8px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.side-group { margin: 16px 10px 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.nav-i.soon { color: var(--ink-3); height: 36px; font-size: 13.5px; }
.nav-i.soon svg { width: 18px; height: 18px; color: var(--icon-2); }
.nav-i.soon:hover { color: var(--ink-2); }
.nav-i.soon.on { color: var(--ink); font-weight: 500; }
.side-foot { padding: 8px 8px 12px; }
.user { display: flex; align-items: center; gap: 10px; padding: 8px 6px 4px; }
.user-meta { flex: 1; min-width: 0; }
.user-meta b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta span { display: block; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side.mini .user { justify-content: center; }
.side-foot .demo-mark { margin: 6px 8px 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 4px 32px; }
.page::-webkit-scrollbar { width: 10px; }
.page::-webkit-scrollbar-thumb { background: #D6DDE7; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }

/* ——— верхняя строка раздела ——— */
.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 8px 16px; min-height: 58px; }
.topbar .tb-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.topbar h1 { font-size: 22px; white-space: nowrap; }
.sub-tabs { display: inline-flex; padding: 4px; gap: 2px; background: var(--fill); border-radius: 14px; }
.sub-tabs button {
  height: 32px; padding: 0 12px; border-radius: 10px; font-weight: 600; font-size: 13.5px; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s;
}
.sub-tabs button svg { display: none; }
.sub-tabs button:hover { color: var(--ink); }
.sub-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 18, 34, .06); }
.sub-tabs button .badge { height: 18px; min-width: 18px; background: transparent; padding: 0 2px; }

/* ——— страница «Скоро» ——— */
.soon-page { max-width: 1000px; margin: 24px auto 0; }
.soon-card { display: grid; grid-template-columns: 380px 1fr; gap: 8px; padding: 12px; align-items: stretch; }
.soon-art { background: var(--fill-2); border-radius: 16px; display: grid; place-items: center; min-height: 340px; }
.soon-art img { width: 240px; height: 240px; object-fit: contain; }
.soon-txt { padding: 28px 28px 20px; display: flex; flex-direction: column; }
.soon-txt h1 { font-size: 26px; margin: 14px 0 10px; letter-spacing: -.02em; }
.soon-txt p { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 520px; }
.soon-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.soon-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.soon-list svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 1px; }
.soon-foot { margin-top: auto; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.soon-txt .chip { align-self: flex-start; }