/* ============================================================
   STANDALONE MODE — Remove prototype chrome
   ============================================================ */
.studio-shell.standalone {
  padding: 0 !important;
  background: var(--bg-page) !important;
  min-height: 100vh !important;
}

.studio-shell.standalone .prototype-frame.standalone {
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

/* Hide toolbar in standalone mode */
.studio-shell.standalone > .studio-toolbar {
  display: none !important;
}

/* App shell fills viewport in standalone — allow natural growth */
.studio-shell.standalone .app-shell {
  min-height: 100vh !important;
}

/* Mobile standalone — mobile uses fixed viewport with internal scroll */
.studio-shell.standalone .prototype-frame.mobile-preview.standalone {
  max-width: none !important;
  width: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.studio-shell.standalone .prototype-frame.mobile-preview.standalone .app-shell.mobile-shell {
  border-radius: 0 !important;
  max-height: 100vh !important;
  height: 100vh !important;
  overflow-y: auto !important;
}

/* ============================================================
   Desktop wide-viewport centering
   Caps the frame at 1580px (aligned with .studio-shell max-width)
   and centers it symmetrically on any common desktop window
   (1440/1536/1756/1920+). Narrower windows render normally with
   body padding.
   v23: 由 1440 → 1580，整体外边距再向两侧拉伸 140px，让大屏下
        信息密度更高；仍保留与 studio-shell 一致的视觉上限。
   ============================================================ */
body[data-forced-device="desktop"] > #app {
  max-width: 1580px;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ============================================================
   2026-05-18 QA 修复：字段校验失败时的视觉反馈（B-04 / S-03 / S-01）
   - .field-error-flash 短时高亮 + shake，让用户立刻感知"哪个字段没填"
   - 支持 input / select / textarea / .field 容器三层级选择器
   ============================================================ */
@keyframes qaFieldErrorShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.field-error-flash,
input.field-error-flash,
select.field-error-flash,
textarea.field-error-flash {
  border-color: #dc2626 !important;
  outline: 2px solid rgba(220, 38, 38, 0.18) !important;
  outline-offset: 1px !important;
  background: color-mix(in srgb, #fee2e2 70%, transparent) !important;
  animation: qaFieldErrorShake 0.4s ease-in-out 1;
  transition: border-color 0.2s ease, background 0.2s ease;
}

html[data-theme="dark"] .field-error-flash,
html[data-theme="dark"] input.field-error-flash,
html[data-theme="dark"] select.field-error-flash,
html[data-theme="dark"] textarea.field-error-flash {
  border-color: #f87171 !important;
  outline: 2px solid rgba(248, 113, 113, 0.22) !important;
  background: rgba(127, 29, 29, 0.28) !important;
}


/* ============================================================
   2026-05-18 QA 修复：toast tone 区分（错误 / 成功）
   - .toast.is-error 红色警示色，强调"请先填写"等校验失败信息
   - .toast.is-success 绿色，强调"已保存 / 已同步"
   - 默认（中性）保留原有 .toast 样式
   ============================================================ */
.toast.is-error {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-left: 3px solid #ef4444 !important;
}
.toast.is-success {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border-left: 3px solid #22c55e !important;
}
html[data-theme="dark"] .toast.is-error {
  background: rgba(127, 29, 29, 0.42) !important;
  color: #fecaca !important;
  border-left-color: #f87171 !important;
}
html[data-theme="dark"] .toast.is-success {
  background: rgba(20, 83, 45, 0.42) !important;
  color: #bbf7d0 !important;
  border-left-color: #4ade80 !important;
}