html,body,#root{height:100%;margin:0;padding:0;font-family:sans-serif;background-color:#f4f4f4}.app-container{display:flex;flex-direction:column;align-items:center;height:100%;box-sizing:border-box;padding:10px 0}.btn{padding:8px 16px;border:1px solid transparent;border-radius:6px;cursor:pointer;font-weight:500;font-size:14px;transition:background-color .2s,box-shadow .2s,transform .1s;box-shadow:0 1px 3px #0000001a}.btn:hover{box-shadow:0 2px 8px #00000026;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover{background-color:#0069d9}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover{background-color:#5a6268}.btn-success{background-color:#28a745;color:#fff}.btn-success:hover{background-color:#218838}h1{margin:30px 0 10px}.controls,.viewer-controls{width:100%;margin-bottom:10px;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}.viewer-controls{margin-top:15px}.container{display:flex;width:98%;max-width:1800px;flex-grow:1;gap:20px;background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px #0000001a;overflow:hidden}.editor-pane,.viewer-pane{flex:1;display:flex;flex-direction:column}textarea{width:100%;box-sizing:border-box;padding:10px;border:1px solid #ccc;border-radius:4px;font-family:monospace;font-size:14px;resize:vertical}.mermaid-output{width:100%;flex-grow:1;border:1px solid #ccc;border-radius:4px;padding:10px;background:#fff;display:flex;overflow:auto;position:relative;min-height:0}.mermaid-output>svg{margin:auto}.mermaid-output.error{color:red;border-color:red}.mermaid-output svg{will-change:transform}.zoom-controls-floating{position:absolute;right:18px;bottom:18px;z-index:100;background:#fffffffa;box-shadow:0 2px 12px #0003;border-radius:10px;padding:8px 16px;display:flex;align-items:center;gap:8px;pointer-events:auto}@media (max-width: 900px){.zoom-controls-floating{right:6px;bottom:6px;padding:6px 8px;font-size:13px}}.zoom-controls button{padding:5px 10px;background:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;transition:background-color .3s}.zoom-controls button:hover{background:#5a6268}.zoom-controls span{font-weight:700;min-width:50px;text-align:center}#mermaidOutput:fullscreen{background-color:#fff;overflow:hidden}#mermaidOutput:fullscreen svg{max-width:none;max-height:none}.fullscreen-zoom-controls{position:fixed;bottom:30px;left:30px;background-color:#000000b3;padding:12px;border-radius:8px;box-shadow:0 0 15px #00000080;z-index:2147483647;display:flex;gap:15px;align-items:center}.fullscreen-nav-controls{position:fixed;top:30px;right:30px;background-color:#000000b3;padding:12px;border-radius:8px;box-shadow:0 0 15px #00000080;z-index:2147483647;display:flex;gap:15px;align-items:center}.fullscreen-zoom-controls button,.fullscreen-nav-controls button{padding:8px 15px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;font-size:16px;transition:background-color .3s,transform .2s}.fullscreen-nav-controls button{background-color:#28a745}.fullscreen-zoom-controls button:hover,.fullscreen-nav-controls button:hover{transform:scale(1.05)}.fullscreen-zoom-controls span{font-weight:700;color:#fff;font-size:16px;min-width:60px;text-align:center}@media (max-width: 900px){.container{flex-direction:column}textarea,.mermaid-output{height:50vh;min-height:400px}}body.dark,body.dark .app-container{background:#1a1a1a;color:#e0e0e0}body.dark .container{background:#242424;box-shadow:0 0 15px #0006}body.dark h1{color:#f9f9f9}body.dark textarea{background-color:#333;color:#f1f1f1;border-color:#555}body.dark .mermaid-output{background:#242424;border-color:#555}body.dark .mermaid-output.error{color:#ff8a8a;border-color:#dc3545}body.dark .mermaid-output svg{background-color:transparent!important}body.dark .btn{box-shadow:0 1px 3px #0006}body.dark .btn-primary{background-color:#0d6efd}body.dark .btn-primary:hover{background-color:#0b5ed7}body.dark .btn-secondary{background-color:#5c636a}body.dark .btn-secondary:hover{background-color:#4c5157}body.dark .btn-success{background-color:#198754}body.dark .btn-success:hover{background-color:#146c43}body.dark .zoom-controls-floating{background:#323232f2;box-shadow:0 2px 12px #00000080}body.dark .zoom-controls button{background:#4f4f4f}body.dark .zoom-controls button:hover{background:#606060}body.dark .zoom-controls span{color:#f1f1f1}