/* Новая панель на сайте: то, чего нет в прототипе, — пункты меню ссылками, служебные разделы, вход/тема внизу меню,
   и сброс прежних стилей app.css внутри экранов (.v4s). Стили самих экранов — v4.css (из прототипа). */
.v4app main { padding: 0; max-width: none; width: auto; min-width: 0; outline: none }
.v4app .side .brand { color: var(--text); text-decoration: none }
.v4app .side .brand .brand-logo { width: 30px; height: 30px; border-radius: 9px; object-fit: cover }
.v4app .side .nav { display: contents }
.v4app .side a.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid transparent; background: none; color: var(--text); font: 500 14px var(--font); padding: 9px 12px; border-radius: 12px; cursor: pointer; text-decoration: none; transition: background .2s, color .2s; box-sizing: border-box }
.v4app .side a.nav-item:hover { background: var(--surface-solid); border-color: var(--btn-line) }
.v4app .side a.nav-item.on { background: var(--dark); color: var(--on-dark); font-weight: 600 }
.v4app .side a.nav-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bar); flex: none }
.v4app .side a.nav-item.on .dot { background: var(--lime) }
.v4app .side a.nav-item svg { width: 15px; height: 15px; flex: none; color: var(--muted) }
.v4app .side a.nav-item.on svg { color: var(--on-dark) }
.v4app .side .nav-sec a.nav-item, .v4app .side .nav-sec .feedback-btn { font-size: 13px; padding: 7px 12px }
.v4app .side .nav-sec .l-short { display: none }
.v4app .side .feedback-btn { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid transparent; background: none; color: var(--muted); font: 500 13px var(--font); padding: 7px 12px; border-radius: 12px; cursor: pointer }
.v4app .side .feedback-btn svg { width: 15px; height: 15px }
.v4app .side .feedback-btn:hover { background: var(--surface-solid); border-color: var(--btn-line); color: var(--text) }
.v4app .side .sidebar-foot { display: grid; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line) }
.v4app .side .user-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; padding: 0 6px }
.v4app .side .user-box .user-name { color: var(--text); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; max-width: 100% }
.v4app .side .user-box .chip { border: 0; background: var(--bar-bg); color: var(--muted); font-size: 11px; padding: 2px 8px; border-radius: 999px; animation: none }
.v4app .side .user-box .btn { border: 1px solid var(--btn-line); background: var(--surface-solid); color: var(--text); font: 600 12px var(--font); padding: 4px 12px; border-radius: 999px; min-height: 0 }
.v4app .side .theme-btn { display: flex; align-items: center; gap: 8px; border: 1px solid transparent; background: none; color: var(--muted); font: 500 12.5px var(--font); padding: 6px 10px; border-radius: 12px; cursor: pointer; text-align: left }
.v4app .side .theme-btn:hover { background: var(--surface-solid); border-color: var(--btn-line); color: var(--text) }
.v4app .side .theme-btn svg { width: 15px; height: 15px }
.v4app .side .tasks-ind { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 0 6px; text-decoration: none }
.v4app .side .tasks-ind[hidden] { display: none }
.v4app .project-link, .nav-more, .more-sheet { display: none !important }
.v4app .guest-banner { margin-bottom: 20px !important; border-radius: 18px !important; color: #2a2926 }
.v4app .guest-banner .btn { border: 1px solid rgba(42,41,38,.2); background: #fff; color: #2a2926; font: 600 12.5px var(--font); padding: 7px 14px; border-radius: 999px }
/* прежние экраны (служебные) внутри нового каркаса — на поверхности карточки */
.v4app main > div:not(.v4s) { min-width: 0 }

/* сброс правил app.css, которые иначе просачиваются в экраны прототипа (:where — чтобы правила прототипа были сильнее) */
:where(.v4s) .num { text-align: start; white-space: normal }
.v4s .card { margin-bottom: 0 }
.v4s h1 { font-weight: 600; letter-spacing: -.01em; line-height: normal }
.v4s h2 { line-height: normal }
.v4s a { color: inherit }
.v4s .btn { display: inline-block; min-height: 0; gap: 0; line-height: normal; text-decoration: none; box-shadow: none }
.v4s .btn:hover { background: var(--surface-solid); text-decoration: none }
.v4s .btn.dark:hover { background: var(--dark) }
.v4s input, .v4s select, .v4s textarea { font: inherit }
.v4s table { font-size: inherit }
.v4s .loading { color: var(--muted); padding: 30px 0 }

@media (max-width: 900px) {
  .v4app .side a.nav-item, .v4app .side .feedback-btn, .v4app .side .theme-btn { width: auto; white-space: nowrap; flex: 0 0 auto }
  .v4app .side a.nav-item { flex-direction: row; gap: 10px; font-size: 14px; letter-spacing: 0; padding: 9px 12px; min-width: 0; justify-content: flex-start }
  .v4app .side a.nav-item span { overflow: visible; max-width: none }
  .v4app .side a.nav-item.on { background: var(--dark); color: var(--on-dark) }
  .v4app .side .nav-sec .l-full { display: inline }
  .v4app .side .sidebar-foot { display: flex; margin: 0 0 0 8px; padding: 0 0 0 8px; border-top: 0; border-left: 1px solid var(--line) }
  .v4app .side .user-box { flex-wrap: nowrap; white-space: nowrap }
}