.theme-preview{margin:1.5rem 0}.theme-preview__dual{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.theme-preview__pane{border:1px solid var(--color-border);border-radius:var(--sol-radius,12px);flex-direction:column;display:flex;overflow:hidden}.theme-preview__pane-header{border-bottom:1px solid var(--color-border);background:var(--sio-surface-raised,var(--sol-surface-raised,#fff));color:var(--sio-foreground,var(--sol-foreground,#111827));align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:.8125rem;font-weight:600;display:flex}.theme-preview__pane--dark .theme-preview__pane-header{background:var(--sio-surface-raised,#1e293b);color:var(--sio-foreground,#f1f5f9)}.theme-preview__dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.theme-preview__dot--light{background:#fbbf24}.theme-preview__dot--dark{background:#6366f1}.theme-preview__scroll{background:var(--sio-surface,var(--sol-surface-base,#f8fafc));max-height:42rem;color:var(--sio-foreground,var(--sol-foreground,#111827));flex:1;padding:1rem;overflow-y:auto}.theme-preview__section{margin-bottom:1.25rem}.theme-preview__section:last-child{margin-bottom:0}.theme-preview__scroll .theme-preview__section-title{text-transform:uppercase!important;letter-spacing:.06em!important;color:var(--sio-foreground-subtle,var(--sol-foreground-subtle,#64748b))!important;border-top:none!important;margin:0 0 .75rem!important;padding-top:0!important;font-family:inherit!important;font-size:.6875rem!important;font-weight:600!important;line-height:1.25!important}.theme-preview__swatch-group{margin-bottom:.75rem}.theme-preview__swatch-group:last-child{margin-bottom:0}.theme-preview__scroll .theme-preview__swatch-group-label{color:var(--sio-foreground-muted,var(--sol-foreground-muted,#334155))!important;text-transform:capitalize!important;border-top:none!important;margin:0 0 .375rem!important;padding-top:0!important;font-family:inherit!important;font-size:.75rem!important;font-weight:600!important;line-height:1.25!important}.theme-preview__swatches{flex-wrap:wrap;gap:.5rem;display:flex}.theme-preview__swatch{border:1px solid var(--sio-border,var(--sol-border,#cbd5e1));border-radius:var(--sio-radius-sm,8px);background:var(--sio-surface-raised,var(--sol-surface-raised,#fff));flex-direction:column;align-items:center;gap:.25rem;min-width:5.5rem;padding:.375rem .5rem;display:flex}.theme-preview__swatch-color{border:1px solid color-mix(in srgb, var(--sio-border,#cbd5e1) 50%, transparent);border-radius:4px;width:1.5rem;height:1.5rem;display:block}.theme-preview__swatch-id{font-size:.625rem;font-family:var(--font-mono,"IBM Plex Mono", monospace);color:var(--sio-foreground-muted,var(--sol-foreground-muted,#334155));text-align:center;word-break:break-all;max-width:5.5rem;line-height:1.2}.theme-preview__swatch-val{font-size:.625rem;font-family:var(--font-mono,"IBM Plex Mono", monospace);color:var(--sio-foreground,var(--sol-foreground,#111827));text-align:center}.theme-preview__row{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.theme-preview__btn{appearance:none;border-radius:var(--sio-radius-sm,8px);cursor:default;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;padding:.375rem .75rem;font-family:inherit;font-size:.75rem;font-weight:600;transition:none;display:inline-flex}.theme-preview__btn--primary{background:var(--sio-primary,#5750d6);color:var(--sio-primary-foreground,#fff)}.theme-preview__btn--secondary{background:var(--sio-surface,var(--sol-surface-base,#f8fafc));color:var(--sio-foreground,var(--sol-foreground,#111827));border-color:var(--sio-border,var(--sol-border,#cbd5e1))}.theme-preview__btn--destructive{background:var(--sio-destructive,#e5484d);color:#fff}.theme-preview__btn--ghost{color:var(--sio-foreground-muted,var(--sol-foreground-muted,#334155));background:0 0}.theme-preview__badge{border-radius:var(--sio-radius-full,999px);white-space:nowrap;align-items:center;padding:.125rem .5rem;font-size:.625rem;font-weight:600;display:inline-flex}.theme-preview__badge--default{background:color-mix(in srgb, var(--sio-primary,#5750d6) 10%, transparent);color:var(--sio-primary,#5750d6)}.theme-preview__badge--success{background:color-mix(in srgb, var(--sio-success,#22c55e) 10%, transparent);color:var(--sio-success,#22c55e)}.theme-preview__badge--warning{background:color-mix(in srgb, var(--sio-warning,#f59e0b) 10%, transparent);color:var(--sio-warning,#f59e0b)}.theme-preview__badge--destructive{background:color-mix(in srgb, var(--sio-destructive,#e5484d) 10%, transparent);color:var(--sio-destructive,#e5484d)}.theme-preview__card{border:1px solid var(--sio-border,var(--sol-border,#cbd5e1));border-radius:var(--sio-radius,var(--sol-radius,12px));background:var(--sio-surface-raised,var(--sol-surface-raised,#fff));box-shadow:var(--sio-shadow-sm,var(--sol-shadow-sm,none));margin-bottom:.75rem;overflow:hidden}.theme-preview__card-header{padding:.75rem .75rem .25rem}.theme-preview__scroll .theme-preview__card-title{color:var(--sio-foreground,var(--sol-foreground,#111827))!important;border-top:none!important;margin:0!important;padding-top:0!important;font-family:inherit!important;font-size:.8125rem!important;font-weight:600!important;line-height:1.25!important}.theme-preview__scroll .theme-preview__card-desc{color:var(--sio-foreground-muted,var(--sol-foreground-muted,#334155))!important;margin:.125rem 0 0!important;font-size:.6875rem!important;line-height:1.4!important}.theme-preview__card-body{color:var(--sio-foreground-muted,var(--sol-foreground-muted,#334155));padding:.5rem .75rem;font-size:.75rem;line-height:1.5}.theme-preview__card-footer{border-top:1px solid var(--sio-border-muted,var(--sol-border-muted,#e2e8f0));gap:.5rem;padding:.5rem .75rem;display:flex}.theme-preview__alerts{flex-direction:column;gap:.375rem;margin-bottom:.75rem;display:flex}.theme-preview__alert{border-radius:var(--sio-radius-sm,8px);align-items:flex-start;gap:.5rem;padding:.5rem .75rem;font-size:.75rem;line-height:1.4;display:flex}.theme-preview__alert-icon{flex-shrink:0;font-size:.875rem;line-height:1}.theme-preview__alert--info{background:color-mix(in srgb, var(--sio-primary,#5750d6) 6%, var(--sio-surface-raised,#fff));border:1px solid color-mix(in srgb, var(--sio-primary,#5750d6) 20%, transparent);color:var(--sio-foreground,var(--sol-foreground,#111827))}.theme-preview__alert--success{background:color-mix(in srgb, var(--sio-success,#22c55e) 6%, var(--sio-surface-raised,#fff));border:1px solid color-mix(in srgb, var(--sio-success,#22c55e) 20%, transparent);color:var(--sio-foreground,var(--sol-foreground,#111827))}.theme-preview__alert--warning{background:color-mix(in srgb, var(--sio-warning,#f59e0b) 6%, var(--sio-surface-raised,#fff));border:1px solid color-mix(in srgb, var(--sio-warning,#f59e0b) 20%, transparent);color:var(--sio-foreground,var(--sol-foreground,#111827))}.theme-preview__alert--error{background:color-mix(in srgb, var(--sio-destructive,#e5484d) 6%, var(--sio-surface-raised,#fff));border:1px solid color-mix(in srgb, var(--sio-destructive,#e5484d) 20%, transparent);color:var(--sio-foreground,var(--sol-foreground,#111827))}.theme-preview__progress-wrap{flex-direction:column;gap:.375rem;display:flex}.theme-preview__progress-track{border-radius:var(--sio-radius-full,999px);background:var(--sio-border-muted,var(--sol-border-muted,#e2e8f0));height:.375rem;overflow:hidden}.theme-preview__progress-fill{border-radius:var(--sio-radius-full,999px);background:var(--sio-primary,#5750d6);height:100%}.theme-preview__progress-label{color:var(--sio-foreground-subtle,var(--sol-foreground-subtle,#64748b));font-size:.625rem}@media (width<=960px){.theme-preview__dual{grid-template-columns:1fr}}.template-preview{margin:1.5rem 0}.template-preview__frame{border:1px solid var(--color-border);border-radius:var(--sol-radius,12px);flex-direction:column;display:flex;overflow:hidden}.template-preview__header{border-bottom:1px solid var(--color-border);background:var(--sol-surface-raised,#fff);color:var(--sol-foreground,#111827);justify-content:space-between;align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:.8125rem;font-weight:600;display:flex}.template-preview__status{background:var(--sol-badge-success-bg,#dcfce7);color:var(--sol-badge-success-fg,#166534);border-radius:999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:500}.template-preview__iframe{background:var(--sol-surface-raised,#fff);border:none;width:100%;height:500px}.template-preview__fallback{text-align:center;color:var(--sol-foreground-muted,#6b7280);background:var(--sol-surface-lowered,#f9fafb);padding:2rem 1rem;font-size:.875rem}