:root {
      --base-font: 'Plus Jakarta Sans';
      --brand-font: 'Norwester';
      --bg-login-light: linear-gradient(180deg, #fb4aa8 0%, #ED0073 22%, #C4047E 45%, #8d0894 65%, #6C0CA3 85%, #4c1d95 100%);
      --bg-login-dark: linear-gradient(180deg, #9d174d 0%, #831843 30%, #6b21a8 60%, #4c1d95 85%, #2e1065 100%);
      --bg-canvas: #0f172a;
      --bg-canvas-dot: #334155;
    }
    body { font-family: var(--base-font, 'Plus Jakarta Sans'), 'Plus Jakarta Sans', sans-serif; transition: background-color 0.3s ease, color 0.3s ease; }
    .custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
    .custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    .custom-scroll::-webkit-scrollbar-track { background: transparent; }
    .tree-branch { position: relative; }
    .tree-branch::before {
      content: '';
      position: absolute;
      left: -18px;
      top: 22px;
      width: 18px;
      height: 2px;
      background-color: #cbd5e1;
    }
    .tree-branch::after {
      content: '';
      position: absolute;
      left: -18px;
      top: 0;
      width: 2px;
      height: 100%;
      background-color: #cbd5e1;
    }
    .tree-branch:last-child::after {
      height: 22px;
    }
    .node-card-dragover {
      outline: 2px dashed #3b82f6 !important;
      outline-offset: 2px;
      background-color: #eff6ff !important;
    }

    /* --- Dark Mode Styles --- */
    body.dark-mode {
      background-color: #0f172a !important;
      color: #e2e8f0 !important;
    }
    body.dark-mode .bg-white { background-color: #1e293b !important; }
    body.dark-mode .bg-slate-100 { background-color: #0f172a !important; }
    body.dark-mode .bg-slate-50 { background-color: #1e293b !important; }
    body.dark-mode .bg-slate-200 { background-color: #334155 !important; }
    body.dark-mode .border-slate-200 { border-color: #334155 !important; }
    body.dark-mode .border-slate-100 { border-color: #1e293b !important; }
    body.dark-mode .text-slate-900 { color: #f1f5f9 !important; }
    body.dark-mode .text-slate-800 { color: #e2e8f0 !important; }
    body.dark-mode .text-slate-700 { color: #cbd5e1 !important; }
    body.dark-mode .text-slate-600 { color: #94a3b8 !important; }
    body.dark-mode .text-slate-500 { color: #64748b !important; }
    body.dark-mode .text-slate-400 { color: #475569 !important; }
    body.dark-mode .bg-slate-900 { background-color: #0f172a !important; }
    body.dark-mode .bg-slate-900\/50 { background-color: rgba(15, 23, 42, 0.8) !important; }
    body.dark-mode .bg-slate-900\/95 { background-color: #0f172a !important; }
    body.dark-mode .hover\:bg-slate-100:hover { background-color: #334155 !important; }
    body.dark-mode .hover\:bg-slate-200:hover { background-color: #475569 !important; }
    body.dark-mode .hover\:bg-slate-50:hover { background-color: #1e293b !important; }
    body.dark-mode .hover\:border-slate-300:hover { border-color: #475569 !important; }
    body.dark-mode .shadow-xs { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5) !important; }
    body.dark-mode .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6) !important; }
    body.dark-mode .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.7) !important; }
    body.dark-mode .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8) !important; }
    body.dark-mode .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9) !important; }

    body.dark-mode .bg-violet-50\/70 { background-color: #2e1065 !important; }
    body.dark-mode .bg-amber-50\/30 { background-color: #451a03 !important; }
    body.dark-mode .bg-emerald-50 { background-color: #064e3b !important; }
    body.dark-mode .bg-blue-50 { background-color: #172554 !important; }
    body.dark-mode .bg-violet-50 { background-color: #2e1065 !important; }
    body.dark-mode .bg-rose-50 { background-color: #4c0519 !important; }
    body.dark-mode .bg-amber-50 { background-color: #451a03 !important; }
    body.dark-mode .bg-indigo-50 { background-color: #1e1b4b !important; }

    body.dark-mode .bg-slate-50\/80 { background-color: #1e293b !important; }
    body.dark-mode .bg-white\/95 { background-color: #1e293b !important; backdrop-filter: blur(4px); }

    body.dark-mode .ring-amber-400 { --tw-ring-color: #f59e0b; }
    body.dark-mode .border-amber-500 { border-color: #f59e0b; }
    body.dark-mode .text-amber-900 { color: #fbbf24; }
    body.dark-mode .bg-amber-100 { background-color: #78350f; }
    body.dark-mode .text-amber-800 { color: #fcd34d; }
    body.dark-mode .bg-rose-100 { background-color: #4c0519; }
    body.dark-mode .text-rose-800 { color: #fda4af; }

    body.dark-mode #canvas-container {
      background-image: radial-gradient(var(--bg-canvas-dot) 1px, transparent 1px) !important;
      background-color: var(--bg-canvas) !important;
    }

    body.dark-mode .bg-emerald-600 { background-color: #059669 !important; }
    body.dark-mode .hover\:bg-emerald-700:hover { background-color: #047857 !important; }
    body.dark-mode .bg-violet-600 { background-color: #7c3aed !important; }
    body.dark-mode .hover\:bg-violet-700:hover { background-color: #6d28d9 !important; }
    body.dark-mode .bg-slate-800 { background-color: #1e293b !important; }

    body.dark-mode .ring-violet-500 { --tw-ring-color: #8b5cf6; }
    body.dark-mode .border-violet-500 { border-color: #8b5cf6; }
    body.dark-mode .text-violet-300 { color: #c4b5fd; }
    body.dark-mode .bg-violet-500 { background-color: #8b5cf6; }
    body.dark-mode .bg-violet-600 { background-color: #7c3aed; }
    body.dark-mode .hover\:bg-violet-50:hover { background-color: #2e1065; }

    body.dark-mode .text-emerald-700 { color: #34d399; }
    body.dark-mode .hover\:text-emerald-300:hover { color: #6ee7b7; }
    body.dark-mode .hover\:bg-emerald-50:hover { background-color: #064e3b; }
    body.dark-mode .border-emerald-200 { border-color: #065f46; }
    body.dark-mode .border-emerald-300 { border-color: #047857; }
    body.dark-mode .bg-emerald-50\/70 { background-color: #064e3b; }

    body.dark-mode .text-blue-700 { color: #60a5fa; }
    body.dark-mode .hover\:bg-blue-50:hover { background-color: #172554; }
    body.dark-mode .border-blue-200 { border-color: #1e3a8a; }

    body.dark-mode .text-violet-700 { color: #a78bfa; }
    body.dark-mode .border-violet-200 { border-color: #4c1d95; }

    body.dark-mode .hover\:bg-rose-50:hover { background-color: #4c0519; }
    body.dark-mode .text-rose-600 { color: #fb7185; }
    body.dark-mode .hover\:text-rose-700:hover { color: #f43f5e; }
    body.dark-mode .border-rose-200 { border-color: #881337; }

    body.dark-mode .bg-slate-900\/50 { background-color: rgba(15, 23, 42, 0.85); }

    body.dark-mode .modal-field-row input { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; }
    body.dark-mode .modal-field-row input:focus { background-color: #1e293b !important; }
    body.dark-mode select { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; }
    body.dark-mode textarea { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; }
    body.dark-mode input:not(.modal-field-row input) { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; }
    body.dark-mode input:not(.modal-field-row input):focus { background-color: #1e293b !important; }

    /* Dark mode card styles override */
    body.dark-mode .bg-white.rounded-xl.shadow-sm {
      background-color: #1e293b !important;
      border-color: #334155 !important;
      color: #e2e8f0 !important;
    }
    body.dark-mode .bg-slate-50\/80.rounded-b-xl {
      background-color: #0f172a !important;
      border-color: #334155 !important;
    }
    body.dark-mode .bg-white.rounded-xl.border {
      background-color: #1e293b !important;
      border-color: #334155 !important;
    }
    body.dark-mode .bg-white.p-3\.5.rounded-xl.border {
      background-color: #1e293b !important;
    }
    body.dark-mode .bg-white.rounded-2xl.p-6 {
      background-color: #1e293b !important;
      border-color: #334155 !important;
    }
    body.dark-mode .bg-slate-50.p-1\.5.rounded.border {
      background-color: #0f172a !important;
      border-color: #334155 !important;
    }
    body.dark-mode #recent-actions-modal > div {
      background-color: #1e293b !important;
      border-color: #334155 !important;
    }
    body.dark-mode #recent-actions-modal > div > div:first-child {
      background-color: #164e63 !important;
      border-color: #155e75 !important;
    }
    body.dark-mode #recent-actions-modal h3 { color: #f1f5f9 !important; }
    body.dark-mode #recent-actions-modal p { color: #bae6fd !important; }
    body.dark-mode #recent-actions-list > div {
      background-color: #0f172a !important;
      border-color: #334155 !important;
    }
    body.dark-mode #recent-actions-list .text-slate-800 { color: #f1f5f9 !important; }
    body.dark-mode #recent-actions-list .text-slate-500 { color: #cbd5e1 !important; }
    body.dark-mode #recent-actions-list .text-slate-400 { color: #94a3b8 !important; }
    body.dark-mode #recent-actions-list .bg-emerald-50 { background-color: #064e3b !important; color: #6ee7b7 !important; }
    body.dark-mode #recent-actions-list .bg-cyan-50 { background-color: #164e63 !important; color: #67e8f9 !important; }
    body.dark-mode #recent-actions-list .bg-rose-50 { background-color: #4c0519 !important; color: #fda4af !important; }
    body.dark-mode #recent-actions-list button:hover { background-color: #334155 !important; }
    body.dark-mode #notifications-modal > div {
      background-color: #1e293b !important;
      border-color: #334155 !important;
    }
    body.dark-mode #notifications-modal > div > div:first-child {
      background-color: #4c0519 !important;
      border-color: #881337 !important;
    }
    body.dark-mode #notifications-modal h3 { color: #f1f5f9 !important; }
    body.dark-mode #notifications-modal p { color: #fecdd3 !important; }
    body.dark-mode #notifications-list > div {
      background-color: #0f172a !important;
      border-color: #334155 !important;
    }
    body.dark-mode #notifications-list .text-slate-800 { color: #f1f5f9 !important; }
    body.dark-mode #notifications-list .text-slate-500 { color: #cbd5e1 !important; }
    body.dark-mode #notifications-list .text-slate-400 { color: #94a3b8 !important; }
    body.dark-mode #notifications-list button:hover { background-color: #334155 !important; }

    body.auth-locked > header,
    body.auth-locked > main {
      visibility: hidden;
    }

    #login-screen {
      background: var(--bg-login-light);
    }

    body.dark-mode #login-screen {
      background: var(--bg-login-dark);
    }

    #canvas-container {
      touch-action: none;
    }

    /* Cizgiler tuvalin her kosesinde (negatif ve tasan koordinatlarda) kIrpIlmasin */
    #canvas-svg {
      overflow: visible;
    }

    @media (max-width: 768px) {
      header {
        align-items: stretch;
        max-height: 35vh;
        overflow-y: hidden;
        gap: 0.2rem;
      }

      /* Mobilde tuşlar başlıkla beraber tek seferde, scroll'suz ve kompakt görünsün */
      header button,
      header input[type="text"] {
        min-height: 26px;
        font-size: 11px;
      }
      header button {
        padding-top: 3px;
        padding-bottom: 3px;
      }

      header > div,
      header > div > div {
        width: 100%;
        gap: 0.2rem;
      }

      header > div:first-child {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.2rem;
      }
      header > div:nth-child(2),
      header > div:last-child {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.2rem;
      }
      header > div:last-child > div,
      header > div:last-child > button {
        flex: 1 1 calc(50% - 0.2rem);
        justify-content: center;
        width: auto;
        min-width: 0;
      }
      header > div:last-child > div[class*="bg-slate-100"] {
        flex: 1 1 100%;
      }

      #canvas-container > div.absolute.bottom-4 {
        display: none;
      }
    }