/* Демо-слой стенда «Ретена»: панель, лист ролей, гид и подсказки.
   Цвета берутся из тем продукта — стенд выглядит одинаково живым в день, ночь и apex. */
.demobar{position:fixed;top:0;left:0;right:0;z-index:9080;display:flex;align-items:center;gap:8px;
  padding:6px 10px;background:var(--card);border-bottom:1px solid var(--line);
  box-shadow:0 1px 6px rgba(0,0,0,.08);font-size:13px}
body.has-demobar #app{padding-top:42px}
body.has-demobar .panel{top:42px}
body.has-demobar .bottomnav{z-index:9070}
.demobar-tag{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--accent-dark,var(--accent));
  background:var(--accent-soft);padding:4px 7px;border-radius:6px;flex:0 0 auto}
.demobar-role{flex:1 1 auto;min-width:0;text-align:left;background:transparent;border:0;
  color:var(--text);font:600 13.5px/1.2 inherit;padding:4px 2px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demobar-hint{font-weight:500;font-size:11.5px;color:var(--accent-dark,var(--accent));margin-left:6px;
  border-bottom:1px dashed currentColor}
.demobar-help{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-weight:700;cursor:pointer}
.demobar-help:hover{color:var(--accent);border-color:var(--accent)}

.demo-sheet-wrap{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.45);
  display:flex;align-items:flex-end;justify-content:center;animation:demofade .18s ease}
@keyframes demofade{from{opacity:0}to{opacity:1}}
.demo-sheet{width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;
  background:var(--bg);border-radius:18px 18px 0 0;overflow:hidden;animation:demoup .22s ease}
@keyframes demoup{from{transform:translateY(22px)}to{transform:none}}
.demo-sheet-h{display:flex;align-items:center;justify-content:space-between;padding:15px 16px 12px;
  font:700 17px/1.2 inherit;color:var(--text);border-bottom:1px solid var(--line);background:var(--card)}
.demo-x{background:transparent;border:0;font-size:17px;color:var(--muted);cursor:pointer;padding:2px 4px}
.demo-sheet-b{padding:14px 14px 22px;overflow:auto}
.demo-lead{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.demo-note{margin:10px 2px 0;font-size:12px;line-height:1.5;color:var(--muted)}

.demo-role-card{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 13px;
  margin-bottom:9px;cursor:pointer;position:relative;transition:.15s}
.demo-role-card:hover{border-color:var(--accent)}
.demo-role-card.on{border-color:var(--accent);background:var(--accent-soft)}
.demo-role-card.busy{opacity:.5;pointer-events:none}
.demo-role-i{font-size:20px;line-height:1.1;flex:0 0 auto}
.demo-role-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.demo-role-t b{font-size:14.5px;color:var(--text)}
.demo-role-t span{font-size:12.5px;line-height:1.45;color:var(--muted)}
.demo-role-now{position:absolute;top:10px;right:11px;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-dark,var(--accent))}
.demo-reset{width:100%;margin-top:6px;padding:12px;border-radius:12px;border:1px solid var(--line);
  background:transparent;color:var(--text);font:600 13.5px/1 inherit;cursor:pointer}
.demo-reset:hover{border-color:var(--accent);color:var(--accent)}

.demo-guide-i{display:flex;flex-direction:column;gap:4px;padding:11px 0;border-bottom:1px solid var(--line)}
.demo-guide-i:last-child{border-bottom:0}
.demo-guide-i b{font-size:14px;color:var(--text)}
.demo-guide-i span{font-size:12.8px;line-height:1.5;color:var(--muted)}
.demo-guide-cta b{color:var(--accent-dark,var(--accent))}

.demo-tip{position:fixed;left:10px;right:10px;bottom:150px;z-index:9075;display:flex;flex-direction:column;gap:4px;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:11px 13px;box-shadow:0 6px 22px rgba(0,0,0,.18);cursor:pointer;
  opacity:0;transform:translateY(10px);transition:.28s}
.demo-tip.on{opacity:1;transform:none}
.demo-tip b{font-size:13.5px;color:var(--text)}
.demo-tip span{font-size:12.5px;line-height:1.45;color:var(--muted)}
@media (min-width:620px){.demo-tip{right:auto;left:16px;width:380px;bottom:92px}}

/* первое касание */
.demo-hello{position:fixed;inset:0;z-index:9600;background:rgba(10,20,24,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;transition:.25s}
.demo-hello.on{opacity:1}
.demo-hello-card{width:100%;max-width:430px;max-height:92vh;overflow:auto;background:var(--card);
  border-radius:20px;padding:26px 22px 20px;box-shadow:0 24px 60px rgba(0,0,0,.28);
  transform:translateY(14px);transition:.25s}
.demo-hello.on .demo-hello-card{transform:none}
.demo-hello-mark{width:52px;height:27px;margin:0 auto 16px;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M3.5 20.5a16.5 16.5 0 0 1 33 0' fill='none' stroke='%23000' stroke-width='6.2' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M3.5 20.5a16.5 16.5 0 0 1 33 0' fill='none' stroke='%23000' stroke-width='6.2' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat}
.demo-hello-card h2{margin:0 0 10px;text-align:center;font-size:21px;color:var(--text)}
.demo-hello-lead{margin:0 0 18px;text-align:center;font-size:13.5px;line-height:1.55;color:var(--muted)}
.demo-hello-rows{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.demo-hello-rows>div{display:flex;flex-direction:column;gap:3px;padding-left:13px;border-left:2px solid var(--accent)}
.demo-hello-rows b{font-size:14px;color:var(--text)}
.demo-hello-rows span{font-size:12.6px;line-height:1.45;color:var(--muted)}
.demo-hello-go{width:100%;padding:14px;border:0;border-radius:13px;background:var(--accent);color:#fff;
  font:700 15px/1 inherit;cursor:pointer}
.demo-hello-roles{width:100%;margin-top:9px;padding:12px;border:1px solid var(--line);border-radius:13px;
  background:transparent;color:var(--text);font:600 13.5px/1 inherit;cursor:pointer}

/* справочник-аккордеон */
.demo-acc{border-bottom:1px solid var(--line)}
.demo-acc:last-child{border-bottom:0}
.demo-acc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:transparent;border:0;padding:13px 2px;text-align:left;cursor:pointer;
  font:600 14.5px/1.3 inherit;color:var(--text)}
.demo-acc-h span{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-dark,var(--accent));font:700 14px/22px inherit;text-align:center}
.demo-acc-b{display:none;padding:0 2px 14px}
.demo-acc.open .demo-acc-b{display:block}
.demo-acc-b p{margin:0 0 9px;font-size:13px;line-height:1.55;color:var(--muted)}
.demo-acc-b p:last-child{margin-bottom:0}
.demo-acc-b b{color:var(--text);font-weight:600}

/* ─────────── веб-раскладка стенда ───────────
   Продукт рисовался под телефон в Telegram; в браузере на широком экране
   контент нужно собрать в колонку, а нижнему меню — дать не наезжать на карточки. */
.demo-web{--demo-col:1060px;--demo-navgap:104px}

/* Зазор под нижним меню. В теме APEX панели становятся position:relative и скроллятся
   вместе со страницей, поэтому отступ нужен и панелям, и экранам, и последним кнопкам форм. */
body.demo-web .screen,
body.demo-web .panel .panel-body,
body.demo-web .panel-body.form{padding-bottom:calc(var(--demo-navgap) + env(safe-area-inset-bottom,0px))}
body.demo-web .panel-body>.primary:last-child,
body.demo-web .panel-body>button:last-child{margin-bottom:14px}
.demo-web .list,.demo-web .board{padding-bottom:12px}

@media (min-width:900px){
  /* содержимое — в колонку по центру, а не во всю ширину монитора */
  .demo-web .screen>*,
  .demo-web .panel-head,
  .demo-web .panel-body>*{max-width:var(--demo-col);margin-left:auto;margin-right:auto}
  .demo-web .topbar{max-width:var(--demo-col);margin:0 auto}
  /* нижнее меню: сами кнопки держим в той же колонке */
  .demo-web .bottomnav{justify-content:center}
  .demo-web .navbtn{flex:0 1 176px}
  /* круглая кнопка — у края колонки, а не у края экрана */
  .demo-web .fab{right:max(18px,calc((100vw - var(--demo-col))/2 + 8px))}
  /* поля ввода и заголовки не растягиваем на всю ширину */
  .demo-web .searchrow,.demo-web .execrow,.demo-web .chips{max-width:var(--demo-col)}
}
@media (min-width:1500px){.demo-web{--demo-col:1180px}}

/* мелочи телефонной ширины: шапка тесная из-за пяти иконок */
@media (max-width:430px){
  .demo-web .topbar .icon-btn{width:34px;height:34px;font-size:15px}
  .demo-web .me-block h1{font-size:19px}
  .demo-web .fab{width:50px;height:50px;font-size:24px;
    bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

/* узкий экран: шесть кнопок меню и ряды чипов не должны обрезаться */
@media (max-width:430px){
  .demo-web .bottomnav .nl{font-size:9.5px;letter-spacing:0}
  .demo-web .bottomnav .ni{font-size:19px}
  .demo-web .navbtn{padding:7px 0 6px}
  .demo-web .chips{padding-right:14px}
  .demo-web .chips-types{padding-right:20px}
}

/* пометка режима витрины в панели стенда */
.demobar-ro{flex:0 0 auto;font:600 10px/1 var(--mono,inherit);letter-spacing:.06em;
  color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 7px;white-space:nowrap}
@media (max-width:430px){.demobar-ro{display:none}}