/* Cidade Infinita — styles on the Lab shell. Accent: sky-blue #0ea5e9. */

/* Override the Lab's shared --accent (purple) so the "?" help button + modal
   pick up this toy's own color (pattern set by senha/fabrica/showdown). */
:root { --accent: #0ea5e9; }

.ci-intro { text-align: center; margin: 0 auto 1.6rem; max-width: 720px; }
.ci-intro__title { font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin: 0 0 .45rem; }
.ci-intro__lead { color: var(--text-muted, #94a3b8); font-size: 1.02rem; margin: 0; }
.ci-nojs { color: var(--text-muted, #94a3b8); padding: 1rem; }

.ci-plate { position: relative; border: 1px solid rgba(148,163,184,.3); border-radius: 10px; overflow: hidden;
  cursor: crosshair; touch-action: manipulation; line-height: 0; }
.ci-plate svg { display: block; width: 100%; height: auto; }

.ci-status { margin: .55rem 0 0; font: 600 .74rem ui-monospace, Menlo, monospace; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted, #94a3b8); overflow-wrap: anywhere; }

.ci-toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 50;
  font: 700 .8rem ui-monospace, monospace; letter-spacing: .08em;
  background: var(--bg-card, #1e293b); border: 1px solid rgba(148,163,184,.35); border-radius: 999px;
  padding: .45rem 1rem; color: var(--text-main, #f8fafc); box-shadow: 0 10px 30px -12px rgba(2,6,23,.6);
  max-width: min(92vw, 640px); overflow-wrap: anywhere; }

.ci-controls { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.ci-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; cursor: pointer;
  border-radius: 999px; padding: .4rem .85rem; font: 600 .85rem 'Inter', sans-serif;
  border: 1px solid var(--border, rgba(255,255,255,.12)); background: var(--surface-2, #243349);
  color: var(--text-main, #f8fafc); transition: border-color .15s, background .15s; }
.ci-btn:hover { border-color: #0ea5e9; }
.ci-btn.is-on { background: rgba(14,165,233,.22); border-color: #0ea5e9; }
.ci-btn--primary { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }
.ci-btn--primary:hover { background: #0284c7; }