.preview-form{max-width:800px;margin:0 auto}.device-section{margin-bottom:var(--spacing-2xl)}.device-tabs{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);flex-wrap:wrap;justify-content:center}.device-tab{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md) var(--spacing-lg);font-family:var(--font-display);font-size:.9375rem;font-weight:500;color:var(--color-text-secondary);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-base);min-width:120px}.device-tab:hover{color:var(--color-text-primary);border-color:var(--color-border-hover);transform:translateY(-2px)}.device-tab.active{color:#fff;background:var(--color-solid-primary);border-color:transparent}.device-icon{font-size:1.5rem}.device-name{font-size:.875rem;font-weight:600}.device-size{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text-muted)}.device-tab.active .device-size{color:#fffc}.custom-size-panel{background:var(--color-solid-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-top:var(--spacing-md)}.custom-size-panel.hidden{display:none}.custom-size-inputs{display:flex;gap:var(--spacing-md);align-items:flex-end;flex-wrap:wrap}.size-input-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.size-input-group label{font-size:.875rem;color:var(--color-text-secondary);font-family:var(--font-display)}.size-input{padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-mono);font-size:.9375rem;color:var(--color-text-primary);background:var(--color-bg-secondary);border:2px solid var(--color-border);border-radius:var(--radius-md);outline:none;transition:var(--transition-base);width:120px}.size-input:focus{border-color:#1a1a1a;box-shadow:none}.apply-btn{padding:var(--spacing-sm) var(--spacing-lg);font-family:var(--font-display);font-size:.9375rem;font-weight:500;color:#fff;background:var(--color-solid-primary);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-base);height:-moz-fit-content;height:fit-content}.apply-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);flex-wrap:wrap;gap:var(--spacing-md)}.preview-actions{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.device-frame{display:flex;justify-content:center;align-items:center;margin-bottom:var(--spacing-lg)}.device-screen{position:relative;background:#000;border-radius:var(--radius-lg);box-shadow:0 8px 32px #00000080;overflow:hidden;transition:var(--transition-base)}.device-screen:before{content:"";position:absolute;top:0;left:0;right:0;height:30px;background:#0000004d;z-index:1;pointer-events:none}#previewFrame{width:100%;height:100%;border:none;display:block;background:#fff}.preview-info{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);background:var(--color-bg-secondary);border-radius:var(--radius-md);flex-wrap:wrap;gap:var(--spacing-sm)}.current-url{font-family:var(--font-mono);font-size:.875rem;color:var(--color-text-secondary);word-break:break-all;flex:1;min-width:200px}.current-size{font-family:var(--font-mono);font-size:.875rem;color:var(--color-text-secondary);font-weight:500;white-space:nowrap}.comparison-section{margin-bottom:var(--spacing-2xl)}.comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg)}.comparison-item{background:var(--color-solid-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-md);transition:var(--transition-base)}.comparison-item:hover{border-color:var(--color-border-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.comparison-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border);flex-wrap:wrap;gap:var(--spacing-xs)}.comparison-device-name{font-family:var(--font-display);font-size:.9375rem;font-weight:600;color:var(--color-text-primary)}.comparison-device-size{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text-muted)}.comparison-frame{position:relative;background:#000;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:9/16;margin-bottom:var(--spacing-sm)}.comparison-frame.desktop{aspect-ratio:16/9}.comparison-frame.tablet{aspect-ratio:4/3}.comparison-iframe{width:100%;height:100%;border:none;display:block;background:#fff}@media(max-width:768px){.input-wrapper{flex-direction:column}.preview-btn{width:100%}.device-tabs{grid-template-columns:repeat(2,1fr)}.device-tab{min-width:auto;flex:1}.preview-header{flex-direction:column;align-items:flex-start}.preview-actions{width:100%}.action-btn{flex:1;justify-content:center}.comparison-grid{grid-template-columns:1fr}}@media(max-width:480px){.custom-size-inputs{flex-direction:column}.size-input,.apply-btn{width:100%}}