/* --- Base Theme Variables --- */ 
        :root{ 
            --bg: #ffffff; 
            --surface: #f8f9fb; 
            --card: #ffffff; 
            --muted: #5f6368; 
            --text: #202124; 
            --primary: #1a73e8; /* google blue */ 
            --accent: #1e88e5; 
            --success: #0f9d58; 
            --border: rgba(60,64,67,0.12); 
            --shadow: 0 6px 18px rgba(60,64,67,0.08); 
            --radius: 10px; 
        } 
        [data-theme="dark"]{ 
            --bg: #0f1720; 
            --surface: #0b1220; 
            --card: #0f1726; 
            --muted: #9aa0a6; 
            --text: #e6eef8; 
            --primary: #8ab4ff; 
            --accent: #9cc4ff; 
            --success: #7bd389; 
            --border: rgba(255,255,255,0.06); 
            --shadow: 0 8px 30px rgba(2,6,23,0.6); 
        } 
 
        /* Reset & base */ 
        *{box-sizing:border-box} 
        html{height:auto; min-height: 100%;} 
        body{ 
            margin:0; 
            font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
            background: linear-gradient(180deg,var(--surface),var(--bg)); 
            color:var(--text); 
            -webkit-font-smoothing:antialiased; 
            -moz-osx-font-smoothing:grayscale; 
            display:flex; 
            flex-direction:column; 
            overflow-x:hidden;  
            min-height: 100vh; 
        } 
 
        h1, h2, h3, strong { color: var(--text); } 
        .small, .muted, p.lead { color: var(--muted); } 
 
        /* --- UI Components (Badges, Buttons, Toggle) --- */ 
        .badge { 
            background:transparent; 
            border:1px dashed var(--border); 
            padding:6px 10px; 
            border-radius:999px; 
            font-size:0.85rem; 
            display:inline-flex; 
            gap:8px; 
            align-items:center; 
            color: var(--muted); 
        } 
 
        .primary-btn { 
            background:var(--primary); 
            color:white; 
            padding:8px 12px; 
            border-radius:8px; 
            border:none; 
            cursor:pointer; 
            font-weight:500; 
            box-shadow: 0 6px 18px rgba(26,115,232,0.12); 
            font-family: inherit; 
        } 
        .primary-btn:hover { opacity: 0.9; } 
 
        .ghost-btn { 
            background:transparent;border:1px solid var(--border); 
            padding:8px 12px;border-radius:8px;color:var(--text);cursor:pointer; 
        } 
 
        /* Toggle Switch */ 
        .mode { display:flex; align-items:center; gap:10px; position: relative; } 
        .theme-switch { display:inline-block; position:relative; width:46px; height:26px; vertical-align:middle; } 
        .theme-switch input { opacity:0; width:0; height:0; position:absolute; left:0; top:0; } 
        .toggle-circle { 
            position:absolute; inset:0; background:var(--surface); 
            border-radius:999px; border:1px solid var(--border); 
            transition: background .25s ease, box-shadow .25s ease; 
        } 
        .toggle-circle::before { 
            content: ""; position:absolute; left:4px; top:4px; width:18px; height:18px; 
            border-radius:50%; background:var(--card); 
            box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: transform .25s ease; 
        } 
        .theme-switch input:checked + .toggle-circle { 
            background: linear-gradient(90deg, var(--primary), var(--accent)); 
            border-color: rgba(0,0,0,0.06); 
        } 
        .theme-switch input:checked + .toggle-circle::before { 
            transform: translateX(20px); background: white; 
        } 
 
        /* --- Header Styles --- */ 
        header.top { 
            display:flex; 
            gap:16px; 
            align-items:center; 
            justify-content:space-between; 
            padding:16px 24px; 
            background:linear-gradient(90deg, rgba(26,115,232,0.06), transparent); 
            border-bottom:1px solid var(--border); 
            flex-shrink: 0; 
        } 
        .title { display:flex; gap:14px; align-items:center; } 
        .logo { 
            width:48px;height:38px;border-radius:10px; 
            background:linear-gradient(135deg,var(--primary),var(--accent)); 
            display:flex;align-items:center;justify-content:center;color:white;font-weight:700; 
            box-shadow: 0 6px 18px rgba(26,115,232,0.12); 
            font-size: 1.2rem; 
        } 
        h1{font-size:1.15rem;margin:0;padding:0} 
        p.lead{margin:0;font-size:0.9rem} 
 
        .header-actions { display:flex; align-items:center; gap:10px; } 
 
        /* --- Main Content Layout --- */ 
        main { 
            flex-grow:1; 
            display:flex; 
            flex-direction: column;  
            padding:16px; 
            gap:16px; 
        } 
         
        /* Footer */ 
        footer { 
            padding:14px 20px;border-top:1px solid var(--border); 
            display:flex;justify-content:space-between;align-items:center; 
            flex-shrink: 0; 
            background: var(--bg); 
        } 
 
        /* --- Mindmap Specific Functionality Styles --- */ 
        .pad-section { 
            background: var(--card); 
            border-radius: var(--radius); 
            box-shadow: var(--shadow); 
            display:flex; 
            flex-direction:column; 
            border:1px solid var(--border); 
            overflow:hidden; 
            min-width: 0;  
            min-height: 500px;  
            transition: min-height 0.3s ease, opacity 0.3s ease;  
            position: relative;  
        } 
         
        .resizer { 
            height: 16px; 
            background: var(--surface); 
            border-radius: 4px; 
            cursor: ns-resize;  
            border-top: 1px solid var(--border); 
            border-bottom: 1px solid var(--border); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: var(--muted); 
            font-size: 0.8rem; 
            flex-shrink: 0; 
            transition: background 0.2s ease; 
        } 
        .resizer:hover { 
            background: linear-gradient(90deg, var(--primary), var(--accent)); 
            color: white; 
        } 
 
        /* Maximized state */ 
        .pad-section.maximized { 
            position: fixed; 
            top: 73px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9999; 
            height: calc(100vh - 73px) !important; 
            min-height: calc(100vh - 73px) !important;
            border-radius: 0; 
            margin: 0 !important; 
            box-shadow: none; 
        } 
        .pad-section.hidden, .resizer.hidden, footer.hidden { display: none !important; } 
 
        /* Markdown Styles */ 
        .markdown-editor-pane > div:nth-child(2) { display: flex; flex-grow: 1; overflow: hidden; } 
        #markdown-input { 
            flex: 1 1 50%; padding:15px; border:none; resize:none; font-size:1rem; line-height:1.6; 
            background:transparent; color:var(--text); outline:none; overflow:auto; 
            border-right: 1px solid var(--border); font-family: "Roboto", sans-serif; 
        } 
        #markdown-preview { 
            flex: 1 1 50%; padding:15px; overflow:auto; background: var(--surface); color:var(--text); 
        } 
        #markdown-preview p {margin-top:0; color: var(--text);} 
        #markdown-preview h1, #markdown-preview h2, #markdown-preview h3 {border-bottom: 1px solid var(--border); padding-bottom: 5px;} 
        #markdown-preview a {color: var(--primary);} 
        #markdown-preview ul, #markdown-preview ol { padding-left: 20px; color: var(--muted); } 
        #markdown-preview li { color: var(--text); margin-bottom: 5px; } 
        #markdown-preview code { background: rgba(128, 128, 128, 0.1); padding: 2px 4px; border-radius: 4px; font-family: monospace; } 
        #markdown-preview pre { background: var(--bg); border: 1px solid var(--border); padding: 10px; border-radius: 6px; overflow-x: auto; } 
 
        /* Drawing Pad Styles */ 
        .section-header { 
            padding:10px 15px; border-bottom:1px solid var(--border); display:flex;  
            justify-content:space-between; align-items:center; background: var(--surface); flex-shrink: 0;  
        } 
        .drawing-controls { 
            display:flex; gap:8px; padding:8px 15px; border-bottom:1px solid var(--border); 
            background: var(--surface); flex-wrap: wrap; flex-shrink: 0;  
        } 
        .tool-button { 
            background: var(--card); border:1px solid var(--border); border-radius:6px; 
            padding:6px 12px; cursor:pointer; color:var(--muted); transition: all 0.2s ease; 
        } 
        .tool-button:hover { background: var(--surface); border-color: var(--primary); } 
        .tool-button.active { 
            background: var(--primary); color: white; border-color: var(--primary); 
            box-shadow: 0 2px 8px rgba(26,115,232,0.3); 
        } 
         
        #canvas-scroll-container { 
            flex-grow: 1; overflow: auto; position: relative; touch-action: pan-x pan-y;  
        } 
        #drawing-canvas { 
            display: block; width: 100%; height: 4000px; background: var(--card);  
            touch-action: none; margin: 0;  
            /* CHANGED: cursor set to default to remove crosshair (+) sign */ 
            cursor: default; 
        } 
        .color-picker { 
            width: 32px; height: 32px; border: 2px solid var(--border); border-radius: 50%; 
            cursor: pointer; padding: 0; background: var(--text); box-shadow: 0 0 0 2px var(--card);  
        } 
        .thickness-control-group { 
            display: flex; align-items: center; gap: 4px; margin-left: 8px; 
            padding: 4px; border-radius: 4px; transition: background 0.1s; 
        } 
        .thickness-control-group:hover { background: var(--border); } 
        .stroke-slider { 
            width: 100px; -webkit-appearance: none; height: 8px; background: var(--border);  
            outline: none; opacity: 0.9; border-radius: 4px; cursor: pointer; 
        } 
        .stroke-slider::-webkit-slider-thumb { 
            -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; 
            background: var(--primary); cursor: pointer; border: 2px solid var(--card); 
            box-shadow: 0 0 0 4px var(--primary);  
        } 
         
        .temp-text-input { 
            position: absolute; padding: 5px 8px; border: 2px solid var(--primary); 
            border-radius: 5px; background: var(--card); color: var(--text); 
            outline: none; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
            font-family: "Roboto", sans-serif; min-width: 150px; 
        } 
 
        /* Responsive */ 
        @media (max-width: 900px) { 
            main { padding: 12px; gap: 12px; } 
            header.top { padding: 12px; flex-wrap: wrap; } 
            .title h1 { font-size: 1rem; } 
            .title p.lead { display: none; } 
            .header-actions { margin-top: 10px; width: 100%; justify-content: flex-end; } 
            .drawing-controls { flex-wrap: wrap; } 
            .resizer { display: none; }  
            footer { flex-direction: column; gap: 10px; text-align: center; } 
        }