* { box-sizing: border-box; }
body { margin: 0; background: #eef1f5; color: #0a2540; font-family: system-ui, sans-serif; }
.preview-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; background: #f8f9fb; border-bottom: 1px solid #dde3ec; }
.preview-toolbar strong { font-size: 14px; }
.preview-toolbar p { font-size: 12px; margin: 4px 0 0; color: #64748b; }
.preview-toolbar a { color: #0a2540; font-size: 13px; padding: 12px 0; }
.device-control { display: flex; gap: 4px; padding: 4px; background: #e6e8ea; border-radius: 10px; flex-wrap: wrap; }
.device-control button { min-height: 40px; border: 0; border-radius: 7px; padding: 8px 12px; background: transparent; color: #43474d; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.device-control button[aria-pressed=true] { background: #fff; color: #0a2540; box-shadow: 0 1px 3px #0a254019; }
.device-control small { font-size: 12px; font-weight: 400; margin-left: 4px; }
.device-control button:focus-visible, a:focus-visible { outline: 2px solid #1351b4; outline-offset: 2px; }
#viewport-status { width: 100%; font-size: 12px; color: #64748b; }
.preview-stage { overflow: auto; height: calc(100dvh - var(--toolbar-height, 140px)); padding: 24px; }
iframe { display: block; margin: auto; width: 100%; height: 100%; min-height: 400px; border: 0; outline: 1px solid #cbd5e1; border-radius: 12px; background: #fff; box-shadow: 0 12px 40px #0a254014; }
body[data-mode=mobile] iframe { border-radius: 20px; }
@media (max-width: 600px) { .preview-toolbar { padding: 12px; gap: 12px; } .preview-stage { padding: 0; } iframe { border: 0; border-radius: 0; } }