/* ═══════════════════════════════════════════════════════════════
   app-shell.css — единый каркас интерфейса (акцент B, как cloud.html)
   Верхняя панель с бургером + левое выдвижное меню.
   Подключается страницами кабинета и инструментами (промо, планер, ассистент).
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ink:#1c1f24; --ink-soft:#4a5058; --ink-dim:#7c848d;
  --line:#e3e5e8; --paper:#fff; --bg:#f5f6f7;
  --navy:#1d4e79; --navy-dark:#163c5e; --navy-soft:#eaf1f7;
  --gold:#a98b52; --ok:#2f7d5b; --bad:#9c2b2b;
  --shell-h:60px; --drawer-w:288px;
}

/* ── верхняя панель ── */
.as-top{position:sticky;top:0;z-index:1002;height:var(--shell-h);display:flex;align-items:center;gap:12px;
  padding:0 16px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.as-burger{display:none;flex:0 0 auto;width:44px;height:44px;border:1px solid var(--line);background:var(--paper);
  border-radius:12px;align-items:center;justify-content:center;cursor:pointer;padding:0}
.as-burger:active{background:#f1f2f4}
.as-burger:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.as-burger i{position:absolute;left:0;right:0;height:2.2px;border-radius:2px;background:var(--ink);transition:transform .22s ease,opacity .18s ease,top .22s ease}
.as-lines{width:22px;height:16px;position:relative;display:block}
.as-lines i:nth-child(1){top:0}
.as-lines i:nth-child(2){top:7px}
.as-lines i:nth-child(3){top:14px}
body.as-nav-open .as-lines i:nth-child(1){top:7px;transform:rotate(45deg)}
body.as-nav-open .as-lines i:nth-child(2){opacity:0}
body.as-nav-open .as-lines i:nth-child(3){top:7px;transform:rotate(-45deg)}

.as-brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:inherit}
.as-logo{width:34px;height:34px;border-radius:9px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;flex:0 0 auto}
.as-title{font-size:16px;font-weight:640;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-sub{font-size:11.5px;color:var(--ink-dim);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-back{margin-left:auto;font-size:13px;color:var(--navy);text-decoration:none;white-space:nowrap;flex:0 0 auto}

/* ── оверлей и меню ── */
.as-ov{position:fixed;inset:0;background:rgba(11,31,53,.44);opacity:0;visibility:hidden;transition:opacity .26s,visibility .26s;z-index:1000}
body.as-nav-open .as-ov{opacity:1;visibility:visible}
.as-drawer{position:fixed;top:0;left:0;bottom:0;width:var(--drawer-w);max-width:86vw;background:var(--paper);
  border-right:1px solid var(--line);transform:translateX(-102%);transition:transform .28s cubic-bezier(.22,.61,.36,1);
  z-index:1001;display:flex;flex-direction:column;padding:14px 12px;overflow-y:auto}
body.as-nav-open .as-drawer{transform:none}
.as-dhead{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 14px}
.as-dtitle{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);font-weight:700}
.as-close{width:36px;height:36px;border:1px solid var(--line);background:var(--paper);border-radius:10px;cursor:pointer;font-size:18px;line-height:1;color:var(--ink-soft)}
.as-link{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:11px;text-decoration:none;color:var(--ink);
  font-size:14.5px;font-weight:600;border:1px solid transparent}
.as-link:hover{background:var(--bg)}
.as-link.active{background:var(--navy-soft);color:var(--navy);border-color:rgba(29,78,121,.18)}
.as-link .ic{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;opacity:.85}
.as-link .ic svg{width:18px;height:18px;display:block}
.as-group{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.as-group .as-dtitle{margin-bottom:6px}

/* основная область: компенсируем отступ только на десктопе, если меню постоянно */
.as-main{padding-top:0}

@media (max-width:900px){
  :root{--shell-h:56px}
  .as-burger{display:inline-flex}
  .as-back{display:none}
  .as-title{font-size:15px}
  .as-sub{display:none}
}
@media (min-width:901px){
  /* на десктопе меню доступно по бургеру тоже (по клику), но кнопка скрыта */
  .as-drawer{box-shadow:0 20px 60px rgba(28,31,36,.18)}
}