/* ═══ Раздел «Подписка»: редактор страницы подписки (my.azmov.ru) + живой предпросмотр ═══
   Все цвета — через var(--…), чтобы тема (тёмная/мятная) подхватывалась автоматически:
   ни одного захардкоженного цвета интерфейса (белый фон рамки телефона — не в счёт,
   это имитация корпуса устройства, а не элемент чужой панели). */

.sp-wrap { display: flex; flex-direction: column; gap: 16px; }

/* верхняя панель: статус несохранённых правок + действия */
.sp-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px;
  position: sticky; top: 74px; z-index: 5;
}
.sp-status { display: flex; align-items: center; gap: 9px; font-size: 13px; flex-wrap: wrap; }
.sp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); opacity: .5; flex: 0 0 auto; }
.sp-dot.on { background: var(--amber); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent); }
.sp-actions { display: flex; gap: 8px; }
.sp-actions .btn:disabled { opacity: .4; cursor: default; }

/* бренд/общие тексты */
.sp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 10px; }
.sp-form-grid-3 { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
.sp-brand-panel label, .sp-app-form label {
  display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600;
}
.sp-brand-panel input, .sp-app-form input, .sp-app-form textarea {
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text); padding: 8px 10px;
  border-radius: 9px; outline: none; font-size: 13px; font-weight: 400; font-family: inherit; width: 100%;
}
.sp-brand-panel input:focus, .sp-app-form input:focus, .sp-app-form textarea:focus { border-color: var(--primary); }
.sp-block { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.sp-app-form textarea { resize: vertical; min-height: 56px; line-height: 1.4; font-weight: 400; }

/* редактор слева / предпросмотр справа */
.sp-body { display: grid; grid-template-columns: 1fr 440px; gap: 16px; align-items: start; }
.sp-body.wide { grid-template-columns: 1fr; }
.sp-editor { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.sp-tabs { flex-wrap: wrap; }
.sp-tab-n { opacity: .7; font-size: 11px; }

.sp-applist { display: flex; flex-direction: column; gap: 8px; }
.sp-app-row-wrap { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color .12s; }
.sp-app-row-wrap.drag-over { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.sp-app-row-wrap.dragging { opacity: .5; }
.sp-app-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; flex-wrap: wrap; }
.sp-drag { cursor: grab; color: var(--muted); letter-spacing: -2px; font-size: 14px; user-select: none; padding: 0 2px; }
.sp-drag:active { cursor: grabbing; }
.sp-app-icon { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; flex: 0 0 auto; background: var(--panel-2); display: flex; align-items: center; justify-content: center; }
.sp-app-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-app-icon-fb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.sp-app-info { min-width: 120px; flex: 1 1 160px; }
.sp-app-name { font-weight: 600; font-size: 13.5px; }
.sp-app-id { font-family: ui-monospace, monospace; font-size: 11px; }
.sp-app-row .chk { font-size: 11.5px; white-space: nowrap; }
.sp-app-row .btn { padding: 6px 10px; font-size: 12px; }

.sp-app-form { border-top: 1px solid var(--border-soft); padding: 14px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 2px; }
.sp-sub-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 8px; }
.sp-buttons-editor { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.sp-btn-row { display: flex; gap: 8px; align-items: center; }
.sp-btn-row .sp-bf:first-child { flex: 0 0 200px; }
.sp-btn-row .sp-bf:last-child { flex: 1; }
.sp-btn-del { flex: 0 0 auto; background: transparent; color: var(--red); border-color: var(--red); padding: 6px 10px; }
.sp-app-form .hint { margin-bottom: 12px; }
.sp-app-form .hint code { font-family: ui-monospace, monospace; background: var(--panel-2); padding: 1px 4px; border-radius: 4px; }

/* предпросмотр */
.sp-preview { position: sticky; top: 130px; }
.sp-preview-panel { display: flex; flex-direction: column; gap: 10px; }
.sp-frame-wrap { display: flex; justify-content: center; overflow-x: auto; padding: 4px; }
.sp-frame-shell { border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: var(--shadow); flex: 0 0 auto; transition: width .2s ease; }
.sp-frame-shell.phone { width: 390px; height: 760px; }
.sp-frame-shell.desktop { width: 100%; min-width: 640px; height: 760px; }
.sp-frame-shell iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.sp-preview-hint { font-size: 11.5px; }

/* история версий */
.sp-hist-list { display: flex; flex-direction: column; gap: 2px; }
.sp-hist-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border-soft); font-size: 13px; flex-wrap: wrap; }
.sp-hist-row:last-child { border-bottom: none; }

@media (max-width: 1180px) {
  .sp-body { grid-template-columns: 1fr; }
  .sp-preview { position: static; }
  .sp-frame-shell.phone { width: 100%; max-width: 390px; }
}
@media (max-width: 1000px) {
  .sp-topbar { top: 0; }
}
@media (max-width: 640px) {
  .sp-app-row { gap: 7px; }
  .sp-app-info { flex-basis: 100%; order: 5; }
  .sp-btn-row { flex-wrap: wrap; }
  .sp-btn-row .sp-bf:first-child { flex: 1 1 100%; }
  .sp-form-grid-3 { grid-template-columns: 1fr; }
}

/* ══════════════ Предпросмотр в рамке устройства ══════════════
   Раньше это был просто прямоугольник с рамкой. Теперь видно, на чём смотрим:
   телефон — с корпусом, «островом» и боковыми кнопками, десктоп — монитор
   с подставкой. Масштаб задаётся --sp-scale, окно можно открепить и таскать. */
.sp-frame-wrap{
  position:relative; display:block; min-width:0; overflow:hidden;
  padding:6px 0 2px;
}
/* ★ Устройство выведено из потока. transform уменьшает картинку, но НЕ место
   в разметке: корпус монитора занимал 1304px в колонке 440px и вылезал за
   панель. Абсолютное позиционирование — ширину задаёт окно, высоту ставит JS. */
.sp-device{
  position:absolute; top:6px; left:50%;
  transform:translateX(-50%) scale(var(--sp-scale,1));
  transform-origin:top center;
  transition:transform .18s ease;
}
.sp-dev-shell{position:relative; overflow:hidden; background:#000}
.sp-device iframe{width:100%; height:100%; border:0; display:block; background:#fff}

/* ── телефон ── */
.sp-device.phone .sp-dev-shell{
  width:416px; height:786px; border-radius:54px; padding:13px;
  background:linear-gradient(158deg,#3a3f47,#191c21 42%,#22262c);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.16),
    inset 0 0 0 13px #0b0d10,
    0 18px 44px rgba(0,0,0,.34);
}
.sp-device.phone iframe{border-radius:42px}
/* «остров» камеры поверх экрана */
.sp-device.phone .sp-dev-island{
  position:absolute; left:50%; top:24px; transform:translateX(-50%);
  width:118px; height:33px; border-radius:20px; background:#000; z-index:2;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
.sp-device.phone .sp-dev-island::after{
  content:""; position:absolute; right:13px; top:50%; transform:translateY(-50%);
  width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #2d3f52, #0a0e14 70%);
}
/* боковые кнопки */
.sp-device.phone .sp-dev-keys::before,
.sp-device.phone .sp-dev-keys::after,
.sp-device.phone .sp-dev-keys > i{
  content:""; position:absolute; background:linear-gradient(90deg,#31363d,#1b1f24);
  border-radius:3px; width:3px;
}
.sp-device.phone .sp-dev-keys::before{left:-3px; top:150px; height:30px}   /* без звука */
.sp-device.phone .sp-dev-keys::after{left:-3px; top:200px; height:56px}    /* громкость + */
.sp-device.phone .sp-dev-keys > i:nth-child(1){left:-3px; top:268px; height:56px} /* громкость − */
.sp-device.phone .sp-dev-keys > i:nth-child(2){right:-3px; top:226px; height:86px} /* питание */
.sp-device.monitor .sp-dev-keys{display:none}

/* ── монитор ── */
.sp-device.monitor .sp-dev-shell{
  width:1304px; height:824px; border-radius:16px; padding:12px 12px 30px;
  background:linear-gradient(160deg,#3c4149,#1c2025 46%,#262a30);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.14),
    0 20px 50px rgba(0,0,0,.32);
}
.sp-device.monitor iframe{border-radius:8px}
.sp-device.monitor .sp-dev-island{
  position:absolute; left:50%; bottom:9px; transform:translateX(-50%);
  width:52px; height:4px; border-radius:3px; background:rgba(255,255,255,.22);
}
.sp-device.monitor .sp-dev-stand{display:block}
.sp-dev-stand{display:none}
.sp-device.monitor .sp-dev-stand::before{
  content:""; display:block; width:92px; height:34px; margin:0 auto;
  background:linear-gradient(180deg,#31363d,#22262b);
  clip-path:polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}
.sp-device.monitor .sp-dev-stand::after{
  content:""; display:block; width:230px; height:11px; margin:0 auto;
  border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#2b2f35,#1a1d21);
  box-shadow:0 8px 18px rgba(0,0,0,.26);
}

/* ── инструменты над предпросмотром ── */
.sp-prev-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.sp-zoom-val{
  min-width:44px; text-align:center; font-size:12px; font-weight:700;
  color:var(--text-soft); font-variant-numeric:tabular-nums;
}

/* ── плавающее окно ── */
.sp-preview.floating{
  position:fixed; z-index:70; margin:0;
  width:auto; max-width:96vw; max-height:94vh;
}
.sp-preview.floating .sp-preview-panel{
  box-shadow:0 24px 70px rgba(0,0,0,.42); max-height:94vh; overflow:auto;
}
.sp-preview.floating .sp-drag-handle{cursor:grab; user-select:none}
.sp-preview.floating .sp-drag-handle:active{cursor:grabbing}
.sp-preview.floating.dragging .sp-preview-panel{transition:none}
.sp-preview.floating.dragging iframe{pointer-events:none}
.sp-drag-handle{align-items:center}



/* ── полоса статуса внутри телефона ──────────────────────────────────────
   Без неё «остров» камеры ложился прямо на шапку страницы. На настоящем
   устройстве содержимое начинается ниже — воспроизводим это. */
.sp-dev-screen{position:relative; width:100%; height:100%; overflow:hidden; background:#EDEADB}
.sp-device.phone .sp-dev-screen{border-radius:42px; padding-top:38px}
.sp-device.phone .sp-dev-screen iframe{height:calc(100% - 38px)}
.sp-device.phone .sp-dev-island{top:11px}
.sp-device.monitor .sp-dev-screen{border-radius:8px}
/* у монитора «острова» нет — вместо него светлая метка на подбородке корпуса */
.sp-device.monitor .sp-dev-island{
  left:50%; top:auto; bottom:-21px; transform:translateX(-50%);
  width:52px; height:4px; border-radius:3px; background:rgba(255,255,255,.22);
  box-shadow:none;
}
.sp-device.monitor .sp-dev-island::after{display:none}

/* монитор: настоящий рабочий стол 1280×800 внутри корпуса — предпросмотр
   показывает ту же ширину, что у обычного ноутбука. Вписывается масштабом. */
.sp-device.monitor iframe{width:1280px; height:800px}
.sp-device.monitor .sp-dev-screen{width:1280px; height:800px}

/* плавающее окно под монитор — шире, чтобы он влезал без ужатия и не мылился */
.sp-preview.floating.wide-float{width:min(94vw, 1380px)}