/* Студия с телефона или планшета (mobile.js): пульт в одну колонку, крупные кнопки, вместо перетаскивания —
   тап по панели и стрелки. Подключается к странице студии: <link rel="stylesheet" href="/studio/mobile.css">.
   Пока пульт выключен (широкий экран, мышь), этот файл ничего не меняет. */
html.cxm-on, html.cxm-on body { height: auto; min-height: 100%; overflow: auto; background: var(--bg, #0d0f12); }
html.cxm-on body > :not(#cxm):not(#gate) { display: none !important; }
#cxm { display: none; }
html.cxm-on #cxm {
  display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 96px; max-width: 640px; margin: 0 auto;
  font: 16px/1.4 system-ui, "Segoe UI", sans-serif; color: var(--text, #e6e9ee);
}
#cxm button {
  min-height: 48px; min-width: 48px; padding: 10px 14px; font-size: 16px; border-radius: 10px;
  border: 1px solid var(--line, #2a2f37); background: #1d2128; color: inherit; touch-action: manipulation;
}
#cxm button:active { border-color: var(--hi, #4da3ff); }
#cxm button.main { border-color: var(--hi, #4da3ff); }
#cxm .cxm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#cxm .cxm-head h1 { font-size: 20px; margin: 0; flex: 1; }
#cxm .cxm-state { font-size: 13px; color: var(--dim, #8b93a1); }
#cxm .cxm-state.bad { color: var(--bad, #ff6b6b); }
#cxm .cxm-row { display: flex; gap: 8px; flex-wrap: wrap; }
#cxm .cxm-row > button { flex: 1 1 140px; }
#cxm .cxm-card {
  border: 1px solid var(--line, #2a2f37); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
#cxm .cxm-card.sel { border-color: var(--sel, #ff4fd8); }
#cxm .cxm-title { display: flex; align-items: center; gap: 8px; font-size: 17px; }
#cxm .cxm-title b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cxm .cxm-dim { color: var(--dim, #8b93a1); font-size: 13px; }
#cxm .cxm-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#cxm .cxm-pad button { font-size: 20px; }
#cxm .cxm-toast {
  position: fixed; left: 12px; right: 12px; bottom: 16px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line, #2a2f37); background: var(--panel, #15181d); text-align: center; display: none;
}
#cxm .cxm-toast.on { display: block; }
#cxm .cxm-toast.bad { border-color: var(--bad, #ff6b6b); }
/* Вход по коду (окно страницы студии) — крупнее на телефоне. */
@media (max-width: 760px) {
  #gate .box { width: auto; max-width: none; margin: 12px; font-size: 16px; }
  #gate button, #gate input { min-height: 48px; font-size: 16px; }
}