/* shell.css - каркас приложения (сайдбар + шапка + контейнер контента). Использует токены base.css. */

.app{min-height:100vh;display:flex;background:var(--canvas);color:var(--text);font-size:14px;line-height:1.45}
.rail{flex:0 0 252px;width:252px;height:100vh;position:sticky;top:0;z-index:60;background:var(--rail);border-right:1px solid var(--line-soft);display:flex;flex-direction:column;overflow-y:auto}
.rail-head{display:flex;align-items:center;gap:11px;padding:18px 18px 16px}
.mark{width:36px;height:36px;border-radius:10px;background:var(--surface-3);border:1px solid var(--line-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:0 0 36px}
.mark i{display:block;border-radius:1px}
.mark i.a{width:16px;height:3px;background:var(--accent)}
.mark i.b{width:11px;height:3px;background:var(--accent-deep)}
.mark span{font:800 12px var(--f-ui);letter-spacing:-0.5px;color:var(--text);line-height:1;margin-top:2px}
.brand{font:700 17px var(--f-ui);letter-spacing:-0.2px}
.onb-wrap{padding:0 12px 6px}
.onb{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:10px 11px;border-radius:var(--r-input);border:1px dashed var(--accent-line-dashed);background:var(--ok-tint);color:var(--accent-soft);font:600 12.5px var(--f-ui);cursor:pointer}
.onb:hover{background:var(--accent-ghost);border-color:var(--accent-line-hover)}
.onb-step{font:500 11px var(--f-mono);color:var(--accent-dim)}
.group{padding:12px 14px 5px;font:600 10.5px var(--f-ui);letter-spacing:1.1px;color:var(--text-faint);text-transform:uppercase}
.group.tight{padding-top:16px}
.nav{display:flex;flex-direction:column;gap:2px;padding:0 12px}
.nav.last{padding-bottom:18px}
.nav-item{position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:var(--r-btn);background:transparent;color:var(--text-3);font:500 13.5px var(--f-ui);cursor:pointer;text-align:left}
.nav-item:hover{color:var(--text)}
.nav-item svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav-item .lbl{flex:1}
.nav-item.active{color:var(--text)}
.nav-item.active::before{content:"";position:absolute;inset:0;border-radius:var(--r-btn);background:var(--nav-active);border-left:2px solid var(--accent);pointer-events:none}
.nav-badge{font:600 11px var(--f-mono);border-radius:var(--r-chip);padding:1px 6px}
.nav-badge.risk{color:var(--risk-text);background:var(--risk-icon)}
.nav-badge.warn{color:var(--warn-text);background:var(--warn-icon)}
/* Пункт за фичей вне лицензии: приглушён, ведёт на экран-заглушку «недоступна по лицензии» */
.nav-item.gated{opacity:.45}
.nav-item.gated .lbl::after{content:" · нет в лицензии";font:500 10px var(--f-mono);color:var(--text-faint)}
.rail-foot{margin-top:auto;display:flex;align-items:center;gap:var(--s-4);padding:13px 12px;border-top:1px solid var(--line-soft)}
.rail-foot .fdot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:c32pulse 2.4s ease-in-out infinite;flex:0 0 7px}
.rail-foot .ver{font:500 11.5px var(--f-mono);color:var(--text-mono);flex:1}
.rail-foot .nodes{font:500 11.5px var(--f-mono);color:var(--accent)}

.main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--s-5);padding:12px 22px;width:100%;background:var(--scrim);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.burger{display:none;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:var(--r-btn);border:1px solid var(--line-mid);background:var(--surface);color:var(--text-2);cursor:pointer;flex:0 0 36px}
.burger svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.search{display:flex;align-items:center;gap:var(--s-4);flex:1;max-width:420px;min-width:0;padding:8px 12px;border-radius:var(--r-btn);border:1px solid var(--line-mid);background:var(--surface);cursor:pointer;text-align:left}
.search:hover{border-color:var(--line-input)}
.search svg{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--text-faint)}
.search .ph{flex:1;min-width:0;color:var(--text-faint);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search .kbd{font:500 11px var(--f-mono);color:var(--text-mono);border:1px solid var(--line-btn);border-radius:var(--r-key);padding:1px 5px;flex:0 0 auto}
.env-chip{display:flex;align-items:center;gap:var(--s-3);padding:7px 11px;border-radius:var(--r-btn);border:1px solid var(--line-mid);background:var(--surface);margin-left:auto;flex:0 0 auto}
.env-chip .d{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 6px}
.env-chip .env{font:600 12px var(--f-ui);color:var(--text-2);white-space:nowrap}
.env-chip .n{font:500 11.5px var(--f-mono);color:var(--text-mono);white-space:nowrap}
.icon-btn{width:36px;height:36px;border-radius:var(--r-btn);border:1px solid var(--line-mid);background:var(--surface);cursor:pointer;position:relative;flex:0 0 36px}
.icon-btn:hover{border-color:var(--line-input)}
.icon-btn .ic{position:absolute;left:10px;top:10px;color:var(--text-muted);display:block}
.icon-btn .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .ndot{position:absolute;right:7px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--risk);border:2px solid var(--surface)}
.user{display:flex;align-items:center;gap:9px;padding:5px 11px 5px 6px;border-radius:var(--r-input);border:1px solid var(--line-mid);background:var(--surface);cursor:pointer;flex:0 0 auto}
.user .av{width:27px;height:27px;border-radius:var(--r-badge);background:var(--accent);color:var(--on-accent);font:700 12px var(--f-ui);display:flex;align-items:center;justify-content:center;flex:0 0 27px}
.user .who{display:flex;flex-direction:column;line-height:1.15}
.user .who .nm{font:600 12px var(--f-ui);color:var(--text)}
.user .who .rl{font:500 10.5px var(--f-ui);color:var(--text-mono)}
.content{width:100%;max-width:1620px;flex:1;padding:22px}

.scrim-bg{display:none}
@media (max-width:900px){
  .rail{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .22s ease}
  .rail.open{transform:none}
  .burger{display:flex}
  .scrim-bg.open{display:block;position:fixed;inset:0;background:var(--overlay);z-index:55}
}
@media (max-width:1180px){
  .env-chip{display:none}
  .user .who{display:none}
}