/* Interactive, local-only preview of Setup project displays. */
.setup-playground { margin: 40px 0 48px; scroll-margin-top: 24px; }
.setup-playground [hidden] { display: none !important; }
.setup-invitation { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.setup-invitation p { margin: 0; color: var(--muted); font-size: 14px; }
.setup-demo-badge { color: #1263cc; font-size: 11px; letter-spacing: 1.3px; font-weight: 700; white-space: nowrap; }
.setup-app { overflow: hidden; border: 1px solid #d8dfe8; border-radius: 16px; background: #f7f8fa; box-shadow: 0 18px 60px #14284b0c, 0 3px 9px #14284b06; text-align: left; }
.setup-app-chrome { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; background: #edf0f4; border-bottom: 1px solid #dfe3e9; font-size: 12px; font-weight: 600; color: #515c6d; }
.setup-app-chrome > img { margin-right: 8px; border-radius: 5px; }
.setup-traffic { position: absolute; left: 18px; display: flex; gap: 7px; }
.setup-traffic i { width: 10px; height: 10px; border-radius: 50%; background: #ff6059; border: 1px solid #e84b46; }
.setup-traffic i:nth-child(2) { background: #ffbd2e; border-color: #dfa123; }
.setup-traffic i:nth-child(3) { background: #28c840; border-color: #1cab30; }
.setup-app-body { padding: 26px; }
.setup-app-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.setup-app-toolbar h3 { margin: 0; font-size: clamp(17px, 2vw, 22px); letter-spacing: -.6px; }
.setup-small-button { border: 1px solid #d5dce6; background: #fff; color: #3b4759; border-radius: 7px; padding: 7px 12px; min-height: 34px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px #14284b05; }
.setup-small-button:hover:enabled { background: #edf3fc; border-color: #9ebbe6; }
.setup-small-button:disabled { opacity: .46; cursor: default; }
.setup-project-row { display: flex; align-items: center; gap: 12px; padding: 20px 0 12px; }
.setup-project-row label { font-size: 12px; font-weight: 600; color: #586679; }
.setup-project-row select { min-height: 38px; max-width: 100%; padding: 7px 34px 7px 12px; border: 1px solid #c1d6f2; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: #1259b9; background: #eaf2fd; cursor: pointer; }
.setup-instructions { margin: 0 0 22px; font-size: 13px; color: #586679; line-height: 1.6; }
.setup-columns { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 26px; }
.setup-displays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.setup-column-heading { margin: 0 0 12px; font-size: 13px; font-weight: 650; color: #374151; }
.setup-library-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.setup-counter { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; height: 23px; padding: 0 6px; background: #e7ebf1; border-radius: 6px; color: #596679; font-size: 11px; }
.setup-display { min-height: 344px; min-width: 0; padding: 14px; border: 1.5px solid #cbd7e7; border-radius: 12px; background: linear-gradient(150deg, #fff 30%, #f0f5fc); transition: border-color .15s, background .15s, box-shadow .15s; display: flex; flex-direction: column; }
.setup-display.is-ready { border-color: #a9c9f0; }
.setup-display-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.setup-monitor-icon { width: 32px; height: 30px; fill: none; stroke: #377ccc; stroke-width: 1.6; flex-shrink: 0; }
.setup-display-header strong { display: block; font-size: 14px; font-weight: 650; }
.setup-display-header small { display: block; font-size: 11px; color: #617086; margin-top: 3px; line-height: 1.5; }
.setup-display-windows { display: grid; align-content: start; gap: 9px; flex: 1; }
.setup-empty-display { min-height: 205px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1px dashed #c5d6ed; border-radius: 8px; padding: 18px; color: #556b87; text-align: center; }
.setup-empty-display > span { width: 36px; height: 36px; border-radius: 50%; background: #eaf2ff; color: #2472d1; font-size: 25px; line-height: 34px; font-weight: 300; }
.setup-empty-display strong { font-size: 13px; font-weight: 600; }
.setup-empty-display small { max-width: 225px; font-size: 11px; line-height: 1.6; }
.setup-move { align-self: flex-start; margin-top: 14px; }
.setup-assistant-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 11px; color: #6b7788; }
.setup-assistant-note svg { width: 18px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; flex-shrink: 0; }
.setup-library { min-width: 0; border-radius: 10px; outline: 1.5px solid transparent; outline-offset: 8px; transition: outline-color .15s, background .15s; }
.setup-library-windows { display: grid; gap: 10px; min-height: 344px; align-content: start; }
.setup-window { display: flex; position: relative; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 78px; padding: 10px; border: 1px solid #dce2eb; border-radius: 9px; background: #fff; box-shadow: 0 2px 4px #213c6004; cursor: grab; user-select: none; touch-action: none; text-align: left; font: inherit; transition: border-color .15s, box-shadow .15s; }
.setup-window:hover { border-color: #92b7e9; box-shadow: 0 3px 9px #1b61ad0b; }
.setup-window[aria-pressed="true"] { border-color: #1472e3; box-shadow: 0 0 0 2px #1472e324; }
.setup-window-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.setup-window-info strong { font-size: 12px; font-weight: 650; color: #273448; }
.setup-window-info small { font-size: 11px; color: #69778a; line-height: 1.5; overflow-wrap: anywhere; }
.setup-grip { color: #8593a6; font-size: 17px; letter-spacing: -2px; flex-shrink: 0; }
.setup-mini-window { width: 78px; height: 52px; flex-shrink: 0; position: relative; overflow: hidden; border: 1px solid #d6e0ed; border-radius: 5px; background: #eef4fd; }
.setup-mini-bar { display: block; height: 9px; background: #e0e8f3; border-bottom: 1px solid #cdd9e8; }
.setup-mini-bar::before { content: '•••'; display: block; font-size: 8px; line-height: 7px; letter-spacing: 1px; color: #8c9caf; padding-left: 4px; }
.setup-preview-code { background: #202c3f; border-color: #26364c; }
.setup-preview-code .setup-mini-bar { background: #31425a; border-color: #344a66; }
.setup-mini-lines { position: absolute; top: 18px; left: 11px; width: 48px; height: 3px; border-radius: 2px; background: #83c3ed; box-shadow: 7px 7px 0 -0.4px #ba9bea, 3px 14px 0 -.5px #8bd7c7, 10px 21px 0 -.5px #83c3ed; }
.setup-mini-phone { display: block; margin: 4px auto; width: 20px; height: 35px; background: #fff; border: 2px solid #536177; border-radius: 5px; }
.setup-mini-phone::after { content: ''; display: block; margin: 9px 2px 0; height: 7px; background: #4489eb; border-radius: 2px; box-shadow: 0 10px 0 #dce9fa; }
.setup-mini-page { display: block; margin: 6px; height: 14px; background: #91b797; border-radius: 3px; box-shadow: 0 19px 0 -3px #bacdbd; }
.setup-library-empty { margin: 0; min-height: 220px; display: grid; place-content: center; gap: 9px; text-align: center; padding: 20px; color: #66768a; font-size: 12px; line-height: 1.7; border: 1px dashed #d6deea; border-radius: 10px; }
.setup-return { margin-top: 14px; white-space: normal; }
.setup-status { margin: 22px 0 0; min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 11px 13px; background: #edf1f6; border-radius: 8px; color: #5b6c82; font-size: 12px; line-height: 1.5; }
.setup-status[data-ready="true"] { background: #e9f5ee; color: #216244; }
.setup-app [data-drop-active="true"] { border-color: #1c79ed; outline-color: #1c79ed; background: #e6f1ff; box-shadow: 0 0 0 3px #2985ee18; }
.setup-window.is-drag-source { opacity: .3; }
.setup-drag-ghost { position: fixed; z-index: 100; width: 260px; pointer-events: none; opacity: .96; transform: rotate(-3deg); box-shadow: 0 14px 35px #18396430; border-color: #5296ed; }
.setup-app.is-dragging, .setup-app.is-dragging * { cursor: grabbing; }
.setup-after { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.setup-after p { margin: 0; color: #6b7788; font-size: 12px; line-height: 1.7; }
.setup-after a, .setup-demo-link { color: #0968d4; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.setup-demo-link { display: block; width: fit-content; margin: 14px auto 0; }
.setup-playground :is(button, select, a):focus-visible { outline: 3px solid #087dff; outline-offset: 3px; }
@media (max-width: 1050px) {
  .setup-displays { grid-template-columns: 1fr; }
  .setup-display { min-height: 240px; }
  .setup-empty-display { min-height: 130px; }
}
@media (max-width: 750px) {
  .setup-columns { gap: 18px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .setup-app-body { padding: 20px; }
  .setup-window { gap: 8px; padding: 8px; }
  .setup-mini-window { width: 55px; }
  .setup-grip { display: none; }
  .setup-display { padding: 12px; }
}
@media (max-width: 580px) {
  .setup-invitation { display: block; }
  .setup-invitation p { margin-top: 7px; font-size: 13px; }
  .setup-app-chrome { min-height: 42px; font-size: 10px; padding-left: 40px; }
  .setup-traffic { left: 12px; gap: 5px; }
  .setup-traffic i { width: 8px; height: 8px; }
  .setup-app-body { padding: 16px; }
  .setup-app-toolbar { align-items: flex-start; }
  .setup-app-toolbar h3 { max-width: 180px; font-size: 18px; line-height: 1.3; }
  .setup-small-button { padding: 7px 10px; }
  .setup-project-row { align-items: flex-start; flex-direction: column; gap: 7px; }
  .setup-project-row select { width: 100%; }
  .setup-columns { display: flex; flex-direction: column; gap: 22px; }
  .setup-library-windows { min-height: 0; }
  .setup-display { min-height: 260px; }
  .setup-empty-display { min-height: 138px; }
  .setup-mini-window { width: 78px; }
  .setup-status { align-items: flex-start; }
  .setup-after { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .setup-playground *, .setup-drag-ghost { transition: none !important; }
}