.design-extractor-workspace{display:flex;flex-direction:column;gap:20px;width:100%;margin-top:8px}.extractor-input-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md,12px);padding:24px;display:flex;flex-direction:column;gap:16px}.extractor-form{display:flex;gap:12px;width:100%}@media (max-width:640px){.extractor-form{flex-direction:column}}.extractor-input-wrapper{flex:1 1;position:relative;display:flex;align-items:center}.extractor-url-input{width:100%;height:48px;padding:0 16px;background:var(--bg-body);border:1px solid var(--border);border-radius:var(--radius-sm,8px);color:var(--text-primary);font-size:16px;outline:none;transition:border-color .2s ease}.extractor-url-input:focus{border-color:var(--accent)}.extractor-submit-btn{height:48px;padding:0 24px;background:var(--accent);color:#ffffff;border:none;border-radius:var(--radius-sm,8px);font-size:15px;font-weight:600;cursor:pointer;transition:opacity .2s ease,transform .1s ease;display:flex;align-items:center;justify-content:center;gap:8px}.extractor-submit-btn:hover{opacity:.9}.extractor-submit-btn:active{transform:scale(.98)}.extractor-submit-btn:disabled{background:var(--border);cursor:not-allowed;opacity:.7}.extractor-error{color:#ef4444;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-sm,8px);padding:12px 16px;font-size:14px;display:flex;align-items:center;gap:8px}.extractor-result-tabs{display:flex;gap:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md,12px);padding:6px}.extractor-tab-btn{flex:1 1;height:40px;background:transparent;border:none;border-radius:var(--radius-sm,8px);color:var(--text-secondary);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.extractor-tab-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.extractor-tab-btn.active{background:var(--accent);color:#ffffff}.sandbox-playground{display:flex;flex-direction:column;gap:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md,12px);padding:24px}.sandbox-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:16px}.sandbox-title-block h3{margin:0;font-size:18px;color:var(--text-primary)}.sandbox-title-block p{margin:4px 0 0;font-size:13px;color:var(--text-secondary)}.theme-selector{display:flex;gap:8px;background:var(--bg-body);border:1px solid var(--border);border-radius:var(--radius-sm,8px);padding:4px}.theme-toggle-btn{height:30px;padding:0 12px;font-size:12px;font-weight:600;border:none;background:transparent;color:var(--text-secondary);border-radius:6px;cursor:pointer;transition:all .2s ease}.theme-toggle-btn.active{background:var(--accent);color:#ffffff}.swatches-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-gap:16px;gap:16px}.swatch-card{background:var(--bg-body);border:1px solid var(--border);border-radius:var(--radius-sm,8px);padding:12px;display:flex;flex-direction:column;gap:8px}.swatch-preview{height:64px;border-radius:6px;border:1px solid var(--border)}.swatch-info{display:flex;flex-direction:column}.swatch-name{font-size:13px;font-weight:600;color:var(--text-primary);text-transform:capitalize}.swatch-hex{font-size:12px;color:var(--text-secondary);font-family:monospace}.typography-canvas{background:var(--bg-body);border:1px solid var(--border);border-radius:var(--radius-sm,8px);padding:24px;display:flex;flex-direction:column;gap:16px}.components-sandbox{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px;gap:20px}@media (max-width:768px){.components-sandbox{grid-template-columns:1fr}}.component-box{background:var(--bg-body);border:1px solid var(--border);border-radius:var(--radius-sm,8px);padding:20px;display:flex;flex-direction:column;gap:16px}.component-box h4{margin:0;font-size:14px;color:var(--text-secondary);border-bottom:1px solid var(--border);padding-bottom:8px}.btn-demo-group{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.input-demo-group{display:flex;flex-direction:column;gap:8px}.input-demo-group label{font-size:13px;font-weight:600}.contrast-checker-box{display:flex;flex-direction:column;gap:12px}.contrast-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:10px 14px;background:var(--bg-body);border:1px solid var(--border);border-radius:var(--radius-sm,8px)}.contrast-row-label{flex:1 1;min-width:220px;color:var(--sb-text);font-size:13px;line-height:1.4;word-break:break-word}.contrast-row-value{display:flex;align-items:center;gap:12px;flex-shrink:0}.contrast-badge-pass{background:rgba(16,185,129,.15);color:#10b981}.contrast-badge-fail,.contrast-badge-pass{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase}.contrast-badge-fail{background:rgba(239,68,68,.15);color:#ef4444}.markdown-output-panel{display:flex;flex-direction:column;background:#0f172a;border:1px solid rgba(99,102,241,.3);border-radius:var(--radius-md,12px);overflow:hidden}.markdown-panel-header{display:flex;justify-content:space-between;align-items:center;background:#1e293b;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1)}.markdown-panel-title{color:#818cf8;font-size:13px;font-weight:600;font-family:monospace}.copy-md-btn{height:32px;padding:0 16px;background:var(--accent);color:#ffffff;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:opacity .2s ease}.copy-md-btn:hover{opacity:.9}.markdown-code-area{padding:20px;overflow-x:auto;font-family:Fira Code,Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:#f1f5f9;white-space:pre-wrap;max-height:500px;overflow-y:auto}.spacing-scale-visualizer{display:flex;flex-direction:column;gap:12px}.spacing-item{display:flex;align-items:center;gap:16px}.spacing-label{width:60px;font-size:12px;font-family:monospace;color:var(--text-secondary)}.spacing-bar{height:16px;background:var(--accent);border-radius:4px;opacity:.8}