/* «Сигнал» — демо двух приложений */
@import url("colors_and_type.css");
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); }

/* ====== ЛАУНЧЕР ====== */
.launcher { min-height: 100vh; display: flex; flex-direction: column; }
.lx-top { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--header-bg); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 20; }
.lx-brand { display: flex; align-items: center; gap: 11px; }
.lx-mk { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(140deg, var(--cyan), var(--blue)); color: #fff; display: flex; align-items: center; justify-content: center; }
.lx-brand b { font-size: 16px; font-weight: 800; display: block; line-height: 1.1; }
.lx-brand small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.lx-seg { margin-left: 16px; display: flex; gap: 4px; background: var(--soft-fill); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.lx-seg button { font-family: var(--font-body); font-size: 13px; font-weight: 650; color: var(--text-2); padding: 8px 16px; border-radius: 9px; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.lx-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.lx-seg button.on svg { color: var(--cyan); }
.lx-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lx-reset { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--soft-fill); border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 13px; cursor: pointer; }
.lx-reset:hover { color: var(--text); border-color: var(--cyan); }
.lx-hint { font-size: 12px; color: var(--text-3); }

.lx-stage { flex: 1; padding: 24px; display: flex; gap: 24px; align-items: flex-start; justify-content: center; }
.lx-stage.both { align-items: stretch; }
.lx-web-wrap { flex: 1; min-width: 0; max-width: 1080px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); height: calc(100vh - 74px - 48px); background: var(--bg); }
.lx-phone-wrap { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.lx-stage.web .lx-phone-wrap, .lx-stage.phone .lx-web-wrap { display: none; }
.lx-stage.phone { align-items: center; }

/* device frame */
.device { width: 390px; border-radius: 46px; border: 1px solid var(--line-2); background: #05080f; padding: 12px; box-shadow: 0 50px 100px -50px rgba(0,0,0,.85); position: relative; }
.device-screen { border-radius: 36px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); height: 800px; display: flex; flex-direction: column; position: relative; }
.device-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 120px; height: 26px; background: #05080f; border-radius: 999px; z-index: 60; }

@media (max-width: 1180px) {
  .lx-stage.both { flex-direction: column; align-items: center; }
  .lx-stage.both .lx-web-wrap { width: 100%; height: 70vh; }
}
@media (max-width: 720px) {
  .lx-seg button span { display: none; }
  .device { width: 100%; max-width: 390px; }
}

/* назад в демо (лаунчер «Оба вместе») */
.lx-back { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--soft-fill); color: var(--text-2); text-decoration: none; margin-right: 4px; }
.lx-back svg { transform: rotate(180deg); }
.lx-back:hover { color: var(--cyan); border-color: var(--cyan); }

/* анимированный логотип «Сигнал» (живой пульс) — в прототипах */
@keyframes sigRun { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.brand-mark .sig-run { opacity: 0; }
.brand-mark.is-pulse .sig-base { opacity: .38; }
.brand-mark.is-pulse .sig-run { opacity: 1; stroke-dasharray: 20 80; stroke-dashoffset: 100; animation: sigRun 2.4s linear infinite; filter: drop-shadow(0 0 2px currentColor); }
@media (prefers-reduced-motion: reduce) {
  .brand-mark.is-pulse .sig-base { opacity: 1; }
  .brand-mark.is-pulse .sig-run { animation: none; opacity: 0; }
}