/**
 * @file styles.css
 * @description Main stylesheet for mermaid-renderer with dark/light theme support
 * @author vintagedon
 * @license MIT
 * @see https://github.com/radioastronomyio/ops-toolbox
 *//**
 * @file tokens.css
 * @description Shared design tokens for ops-toolbox applications
 * @author vintagedon
 * @license MIT
 * @see https://github.com/radioastronomyio/ops-toolbox
 */:root{--bg-primary: #0f172a;--bg-secondary: #1e293b;--accent-primary: #38bdf8;--accent-hover: #0ea5e9;--text-primary: #f8fafc;--text-secondary: #94a3b8;--border-color: #334155;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace}:root.light{--bg-primary: #f8fafc;--bg-secondary: #f1f5f9;--accent-primary: #0284c7;--accent-hover: #0369a1;--text-primary: #0f172a;--text-secondary: #475569;--border-color: #e2e8f0}:root{--header-height: 60px;--sidebar-width: 450px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);overflow:hidden;height:100vh;transition:background-color .3s ease,color .3s ease}button{cursor:pointer;font-family:inherit;transition:all .2s ease}.app-container{display:flex;flex-direction:column;height:100vh}.header{height:var(--header-height);padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary);z-index:10}.logo{font-weight:600;font-size:1.25rem;letter-spacing:-.025em;display:flex;align-items:center;gap:.5rem}.logo span{color:var(--accent-primary)}.controls{display:flex;gap:.75rem}.btn{padding:.5rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500;display:flex;align-items:center;gap:.5rem;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary)}.btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.btn-primary{background:var(--accent-primary);color:#000;border:none}.btn-primary:hover{background:var(--accent-hover);color:#000}.main-content{display:flex;flex:1;overflow:hidden}.editor-pane{width:var(--sidebar-width);border-right:1px solid var(--border-color);background-color:var(--bg-secondary);display:flex;flex-direction:column}.editor-header{padding:.75rem 1rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.editor-container{flex:1;position:relative}.editor-textarea{width:100%;height:100%;padding:1.5rem;background:transparent;border:none;color:var(--text-primary);font-family:var(--font-mono);font-size:.875rem;line-height:1.6;resize:none;outline:none}.preview-pane{flex:1;background-color:var(--bg-primary);overflow:auto;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative}.mermaid-output{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.mermaid-output svg{max-width:100%;height:auto!important}.status-bar{padding:.5rem 1rem;font-size:.75rem;color:var(--text-secondary);background-color:var(--bg-secondary);border-top:1px solid var(--border-color);display:flex;justify-content:space-between}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}