/* ════════════════════════════════════════════════════════════════════════
 *  Cloud storage modals (cloud-storage.js)
 *  Save to account · My sessions · Request Expert Review
 * ────────────────────────────────────────────────────────────────────────
 *  Token migration (DESIGN.md §3.5 禁品牌彩色 / §10.2 禁硬编码): this file was
 *  authored with a raw Tailwind slate/blue palette (#0f172a / #475569 / #64748b
 *  / #cbd5e1 / #1d4ed8 …). Every hardcoded hex is retired to the neutral design
 *  tokens so the modal is monochrome + theme-aware (light/dark) like the rest of
 *  the shell. Buttons follow DESIGN.md §8.1: primary = --ink-1 fill + --surface
 *  reverse ink (hover --ink-2); ghost/secondary = --surface + --line hairline +
 *  --ink-2 (hover --overlay-1). The blue focus ring / link / #1d4ed8 primary are
 *  gone (§3.5 「任何蓝色 accent → 黑 --ink-1」). Shadows use pure-black alpha (§6.3).
 * ════════════════════════════════════════════════════════════════════════ */
.wq-cloud-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  font: 13px/1.5 var(--font-ui);
}
.wq-cloud-modal__backdrop {
  position: absolute; inset: 0; background: var(--overlay-3);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.wq-cloud-modal__panel {
  position: relative; z-index: 1;
  width: min(560px, 92vw); max-height: 88vh; overflow: hidden;
  background: var(--surface); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex; flex-direction: column;
}
.wq-cloud-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.wq-cloud-modal__head h3 { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--ink-1); }
.wq-cloud-modal__close {
  background: none; border: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--ink-3);
  padding: 4px 10px; border-radius: 6px;
}
.wq-cloud-modal__close:hover { background: var(--overlay-1); color: var(--ink-2); }
.wq-cloud-modal__body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.wq-cloud-modal__lead { margin: 0 0 14px; color: var(--ink-2); }
.wq-cloud-modal__field { display: block; margin: 12px 0; }
.wq-cloud-modal__field > span {
  display: block; font-size: 0.85rem; font-weight: 500; color: var(--ink-2); margin-bottom: 4px;
}
.wq-cloud-modal__field input,
.wq-cloud-modal__field textarea {
  width: 100%; padding: 8px 10px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 6px;
  font: inherit; color: var(--ink-1); background: var(--surface);
}
.wq-cloud-modal__field input:focus,
.wq-cloud-modal__field textarea:focus {
  outline: none;
  border-color: var(--ink-1);
  box-shadow: 0 0 0 3px var(--overlay-2);   /* neutral focus halo (DESIGN.md §8.2), not a blue ring */
}
.wq-cloud-modal__meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--ink-3); padding: 8px 0;
}
.wq-cloud-modal__foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.wq-cloud-modal__btn {
  padding: 8px 16px; border: 1px solid transparent; border-radius: 6px;
  font: inherit; font-weight: 500; cursor: pointer;
  background: var(--surface); color: var(--ink-1);
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.wq-cloud-modal__btn--sm { padding: 5px 11px; font-size: 0.85rem; }
.wq-cloud-modal__btn--ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.wq-cloud-modal__btn--ghost:hover { background: var(--overlay-1); }
.wq-cloud-modal__btn--primary { background: var(--ink-1); color: var(--surface); border-color: var(--ink-1); }
.wq-cloud-modal__btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.wq-cloud-modal__btn:active { transform: translateY(1px); }
.wq-cloud-modal__empty {
  text-align: center; padding: 32px 16px; color: var(--ink-3);
}
.wq-cloud-consent {
  background: var(--surface-3); padding: 12px 16px; border-radius: 8px;
  margin-bottom: 14px;
}
.wq-cloud-consent p { margin: 0 0 6px; color: var(--ink-1); }
.wq-cloud-consent ul { margin: 6px 0 0; padding-left: 22px; color: var(--ink-2); font-size: 0.85rem; }
.wq-cloud-consent ul li { margin: 4px 0; }
.wq-cloud-consent a { color: var(--ink-1); text-decoration: underline; }

.wq-cloud-scene-list { display: flex; flex-direction: column; gap: 10px; }
.wq-cloud-scene-card {
  display: flex; align-items: center; gap: 12px;
  padding: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
}
.wq-cloud-scene-thumb {
  width: 64px; height: 48px; object-fit: cover;
  background: var(--surface-3); border-radius: 4px; flex-shrink: 0;
}
.wq-cloud-scene-thumb--ph {
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.wq-cloud-scene-info { flex: 1; min-width: 0; }
.wq-cloud-scene-name { font-weight: 500; color: var(--ink-1); margin-bottom: 2px; }
.wq-cloud-scene-meta { font-size: 0.8rem; color: var(--ink-3); }
.wq-cloud-scene-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Scene-card action buttons — visually similar to modal__btn--sm but with a
   distinct class so the modal's universal click handler doesn't pick them up. */
.wq-cloud-scene-card-btn {
  padding: 5px 11px; border: 1px solid transparent; border-radius: 6px;
  font: inherit; font-weight: 500; font-size: 0.85rem; cursor: pointer;
  background: var(--surface); color: var(--ink-1);
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.wq-cloud-scene-card-btn--ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.wq-cloud-scene-card-btn--ghost:hover { background: var(--overlay-1); }
.wq-cloud-scene-card-btn--primary { background: var(--ink-1); color: var(--surface); border-color: var(--ink-1); }
.wq-cloud-scene-card-btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.wq-cloud-scene-card-btn:active { transform: translateY(1px); }

/* Error toast — muted signal red (DESIGN.md §3.3), reverse ink on the solid fill
   (§3.3「实心填充上的前景反色」→ --surface, not hardcoded white). */
.db-toast--error { background: var(--sig-error) !important; color: var(--surface) !important; }