body { font-family: 'Inter', sans-serif; background-color: #f1f5f9; overflow: hidden; margin: 0; padding: 0; }
        .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
        
        #viewport {
            width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; overflow: hidden; cursor: grab; background-color: #f8f9ff;
        }
        #viewport:active { cursor: grabbing; }

        #canvas-layer {
            position: absolute; transform-origin: 0 0; width: 10000px; height: 10000px;
            background-image: radial-gradient(#bdc8ce 2px, transparent 2px); background-size: 30px 30px;
        }

        .node-card {
            position: absolute; resize: both; overflow: hidden;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            min-width: 280px; min-height: 180px; display: flex; flex-direction: column; z-index: 10;
            background-color: #ffffff; border-radius: 0.5rem;
        }

        .node-card.selected-node {
            box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.35), 0 18px 25px -5px rgb(0 0 0 / 0.12), 0 8px 10px -6px rgb(0 0 0 / 0.12) !important;
            border-color: #2563eb !important;
        }
        
        .drag-handle { cursor: grab; }
        .drag-handle:active { cursor: grabbing; }

        input[type="color"] { -webkit-appearance: none; border: none; width: 20px; height: 20px; border-radius: 50%; padding: 0; cursor: pointer; }
        input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
        input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(0,0,0,0.1); border-radius: 50%; }

        #edges-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
        
        .edge-path { pointer-events: stroke; cursor: pointer; fill: none; transition: stroke-width 0.2s; }
        .edge-path:hover { stroke-width: 8; stroke-dasharray: 8,8; }
        .connecting-mode { cursor: crosshair !important; }

        .markdown-body h1 { font-size: 1.5em; font-weight: bold; margin-bottom: 0.5em; }
        .markdown-body h2 { font-size: 1.25em; font-weight: bold; margin-bottom: 0.5em; }
        .markdown-body p { margin-bottom: 0.5em; line-height: 1.5; }
        .markdown-body ul { list-style-type: disc; padding-left: 1.5em; margin-bottom: 0.5em; }
        .markdown-body a { color: #007f9d; text-decoration: underline; }
        .markdown-body strong { font-weight: bold; color: #0f172a; }
        
        textarea::-webkit-scrollbar, .markdown-body::-webkit-scrollbar { width: 6px; }
        textarea::-webkit-scrollbar-thumb, .markdown-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        
        #minimap-container { background-color: white; border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden; position: relative; }
        #minimap-viewport { position: absolute; border: 2px solid #007f9d; background-color: rgba(0, 127, 157, 0.1); pointer-events: none; }
    

.node-card.is-dragging {
    user-select: none;
}

.node-card.selected-node .drag-handle::after {
    content: "Selecionada";
    font-size: 10px;
    font-weight: 700;
    color: #1d4ed8;
    background: rgba(219, 234, 254, 0.95);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 999px;
    padding: 2px 7px;
    margin-left: 8px;
}