/* Стенд bitrix2.kiselevlab.ru — оболочка «как Битрикс24» вокруг рамки с окном
 * bitrix.kiselevlab.ru (modules/api/b24-frame.js, shellGate). Это имитация
 * интерфейса Битрикс24 для проверки вёрстки, не наш дизайн: цвета и
 * пропорции — как у облачного портала с темой по умолчанию. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: 'Open Sans', 'Helvetica Neue', Arial, system-ui, sans-serif; font-size: 14px; color: #fff;
  background: linear-gradient(118deg, #2a2b7a 0%, #4a3ca2 42%, #1f6cb6 100%) fixed; }

.b24-top { height: 52px; display: flex; align-items: center; gap: 22px; padding: 0 22px; white-space: nowrap; }
.b24-top .brand { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 12px; }
.b24-top .brand::before { content: ""; width: 18px; height: 12px; border-top: 2px solid #fff; border-bottom: 2px solid #fff;
  box-shadow: inset 0 5px 0 -3px #fff; opacity: .9; }
.b24-top .menu { display: flex; gap: 22px; opacity: .95; }
.b24-top .dev { display: flex; align-items: center; gap: 4px; margin-left: 12px; padding: 3px 4px 3px 10px;
  border-radius: 8px; background: rgba(0,0,0,.22); }
.b24-top .dev .lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-right: 6px; }
.b24-top .dev button { font: inherit; font-size: 12px; font-weight: 600; color: #fff; background: transparent; border: 0;
  border-radius: 6px; padding: 5px 9px; cursor: pointer; opacity: .8; }
.b24-top .dev button:hover { opacity: 1; }
.b24-top .dev button.on { background: #fff; color: #2a2b7a; opacity: 1; }
.b24-top .right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.b24-top .right .chip { border: 1px solid rgba(255,255,255,.45); border-radius: 6px; padding: 3px 9px; }
.b24-top .right .av { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.65); }

.b24-body { display: grid; grid-template-columns: 224px minmax(0,1fr) 46px; min-height: calc(100vh - 52px); }
.b24-menu { padding: 8px 0 24px; }
.b24-menu div { padding: 8.5px 22px; display: flex; align-items: center; gap: 12px; opacity: .92; white-space: nowrap; overflow: hidden; }
.b24-menu div::before { content: ""; flex: none; width: 17px; height: 17px; border: 1.6px solid rgba(255,255,255,.85); border-radius: 4px; }
.b24-menu div.on { background: rgba(255,255,255,.14); }
.b24-work { padding: 8px 22px 34px; min-width: 0; }
.b24-title { font-size: 25px; font-weight: 400; margin: 12px 0 14px; letter-spacing: -.01em; }
.b24-card { background: #fff; border-radius: 12px; overflow: hidden; }
.b24-card iframe { display: block; width: 100%; height: 900px; border: 0; }
.b24-rail { padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.b24-rail i { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.25); border: 1.5px solid rgba(255,255,255,.7); }

/* Ноутбук: меню Битрикса свёрнуто в значки, окну достаётся меньше ширины. */
body.dev-1024 .b24-body { grid-template-columns: 62px minmax(0,1fr) 46px; }
body.dev-1024 .b24-menu div { font-size: 0; }
body.dev-1024 .b24-work { max-width: 960px; }
body.dev-1024 .b24-top .menu span:nth-child(n+3) { display: none; }

/* Телефон: мобильное приложение Битрикс24 — только шапка и окно шириной 390. */
body.dev-390 .b24-menu, body.dev-390 .b24-rail, body.dev-390 .b24-title { display: none; }
body.dev-390 .b24-body { grid-template-columns: 1fr; justify-items: center; }
body.dev-390 .b24-work { width: 414px; padding: 24px 12px; }
body.dev-390 .b24-card { border-radius: 36px; border: 8px solid #111; box-shadow: 0 20px 50px -20px rgba(0,0,0,.45); }
body.dev-390 .b24-card::before { content: "‹  Киселев ЛАБ"; display: flex; align-items: center; height: 48px; padding: 0 16px;
  color: #1f2329; font-weight: 600; font-size: 16px; border-bottom: 1px solid #e6e8eb; }

@media (max-width: 900px) {
  .b24-top .menu, .b24-top .right .chip, .b24-top .dev .lbl { display: none; }
  .b24-body { grid-template-columns: 1fr; }
  .b24-menu, .b24-rail { display: none; }
  .b24-work { padding: 8px 12px 24px; }
  body.dev-390 .b24-work { width: auto; max-width: 414px; }
}