.mermaid-editor-container{display:flex;flex-direction:column;gap:20px;margin-bottom:20px}.input-section{display:flex;flex-direction:column;gap:15px}.input-group{display:flex;flex-direction:column}.input-group label{margin-bottom:8px;color:var(--color-text);font-weight:500}[data-theme=dark] .input-group label{color:var(--color-text)}.input-group select{padding:8px 12px;border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:14px;background:var(--color-surface);color:var(--color-text)}[data-theme=dark] .input-group select{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.mermaid-input{width:100%;min-height:300px;padding:12px;border:2px solid var(--color-border);border-radius:6px;font-size:14px;font-family:var(--font-mono);resize:vertical;box-sizing:border-box;background:var(--color-surface);color:var(--color-text);line-height:1.5}.mermaid-input::placeholder{color:var(--color-text-muted)}[data-theme=dark] .mermaid-input{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.action-buttons{display:flex;gap:10px;flex-wrap:wrap}.action-btn{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;transition:background-color var(--transition-fast);background:var(--color-theme);color:#fff}.action-btn:hover{background:var(--color-theme-dark)}.action-btn.secondary{background:var(--color-secondary)}.action-btn.secondary:hover{background:var(--color-secondary-dark)}[data-theme=dark] .action-btn{background:var(--color-theme);color:#fff}[data-theme=dark] .action-btn:hover{background:var(--color-theme-dark)}[data-theme=dark] .action-btn.secondary{background:var(--color-secondary);color:#fff}[data-theme=dark] .action-btn.secondary:hover{background:var(--color-secondary-dark)}.output-section{margin-top:10px}.mermaid-output{min-height:300px;border:2px solid var(--color-border);border-radius:6px;padding:20px;background:var(--color-surface);text-align:center;overflow:hidden;cursor:grab;position:relative}.mermaid-output.panning{cursor:grabbing}.mermaid-output svg{transition:transform .1s ease;max-width:100%;height:auto}[data-theme=dark] .mermaid-output{background:var(--color-surface);border-color:var(--color-border)}.error-message{background:var(--color-error-light);color:var(--color-error);padding:12px;border-radius:6px;margin-bottom:15px;border:1px solid var(--color-error-border)}[data-theme=dark] .error-message{background:var(--color-error-light);color:var(--color-error)}.editor-container{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:20px}.editor-panel{background:var(--color-surface);border:2px solid var(--color-border);border-radius:6px;padding:15px}[data-theme=dark] .editor-panel{background:var(--color-surface);border-color:var(--color-border)}.editor-panel h3{margin:0 0 10px;color:var(--color-theme);font-size:16px}.editor-panel textarea{width:100%;height:200px;font-family:var(--font-mono);font-size:14px;border:1px solid var(--color-border);border-radius:4px;padding:10px;resize:vertical;box-sizing:border-box;background:var(--color-surface);color:var(--color-text)}[data-theme=dark] .editor-panel textarea{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.editor-panel select{padding:8px 12px;border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:14px;margin-top:8px;background:var(--color-surface);color:var(--color-text)}[data-theme=dark] .editor-panel select{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.editor-panel .controls{display:flex;gap:10px;margin:10px 0}.editor-panel .btn{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px}.editor-panel .btn-primary,[data-theme=dark] .editor-panel .btn-primary{background:var(--color-theme);color:#fff}.editor-panel .btn-secondary,[data-theme=dark] .editor-panel .btn-secondary{background:var(--color-secondary);color:#fff}#diagram-output{min-height:300px;border:1px solid var(--color-border);border-radius:4px;padding:20px;background:var(--color-surface);text-align:center;overflow:hidden;cursor:grab;position:relative}[data-theme=dark] #diagram-output{background:var(--color-surface);border-color:var(--color-border)}#diagram-output.panning{cursor:grabbing}#diagram-output svg{transition:transform .1s ease}.examples{display:flex;gap:10px;margin:10px 0;flex-wrap:wrap}.example-btn{padding:5px 10px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;cursor:pointer;font-size:12px;color:var(--color-default)}.example-btn:hover{background:var(--color-border-light)}[data-theme=dark] .example-btn{background:var(--color-surface);border-color:var(--color-border);color:var(--color-default)}[data-theme=dark] .example-btn:hover{background:var(--color-border)}