:root {
        --xanda-50: #EEEDFE;
        --xanda-100: #CECBF6;
        --xanda-200: #AFA9EC;
        --xanda-400: #7F77DD;
        --xanda-500: #6C64D4;
        --xanda-600: #534AB7;
        --xanda-700: #4A42A3;
        --xanda-800: #3C3489;
        --xanda-900: #26215C;
        --bg: #F8F7FF;
        --surface: #FFFFFF;
        --surface-2: #F2F0FD;
        --border: #E2DFFC;
        --border-strong: #C5C0F0;
        --text-primary: #1A1740;
        --text-secondary: #5B5690;
        --text-muted: #9490C0;
        --success: #1D9E75;
        --success-bg: #E1F5EE;
        --danger: #D85A30;
        --danger-bg: #FAECE7;
        --warning: #BA7517;
        --warning-bg: #FAEEDA;
        --radius: 10px;
        --radius-lg: 16px;
        --shadow: 0 2px 12px rgba(83,74,183,0.10);
        --shadow-lg: 0 8px 32px rgba(83,74,183,0.15);

        --muted:#6B6E82;
        --muted-2:#9C9FB2;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
        font-family: 'Inter', sans-serif;
        background: var(--bg);
        color: var(--text-primary);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

  .brand{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .brand .brand-icon{
    width:26px; height:26px;
    border-radius:7px;
    flex-shrink:0;
    object-fit:cover;
    box-shadow:0 0 0 1px var(--line);
  }
  .brand .dot{
    width:10px; height:10px; border-radius:50%;
    background:linear-gradient(135deg, var(--purple), var(--purple-deep));
    box-shadow:0 0 10px 2px var(--purple-dim), 0 0 0 4px rgba(91,75,245,0.07);
    flex-shrink:0;
  }
  .brand h1{
    font-family:'Space Grotesk', sans-serif;
    font-size:17px;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  .brand p{
    font-size:10.5px;
    color:var(--muted-2);
    font-family:'JetBrains Mono', monospace;
    letter-spacing:0.03em;
    margin-top:1px;
    font-weight: 400;
  }
    /* ── NAVBAR ── */
    nav {
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 0 2rem;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 1px 8px rgba(83,74,183,0.07);
    }

    .logo {
        display: flex;
        align-items: center;
        align-content: center;
        gap: 10px;
        font-size: 20px;
        font-weight: 700;
        color: var(--xanda-900);
    }

    .logo-icon {
        width: 32px;
        height: 32px;
        background: var(--xanda-500);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 16px;
        font-weight: 800;
    }

    .logo-bracket { color: var(--xanda-500); }

    .nav-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 16px;
        border-radius: var(--radius);
        font-family: 'Inter', sans-serif;
        font-size: 13.5px;
        font-weight: 500;
        cursor: pointer;
        border: 1.5px solid transparent;
        transition: all 0.18s ease;
        white-space: nowrap;
    }

    .btn-ghost {
        background: transparent;
        border-color: var(--border-strong);
        color: var(--text-secondary);
    }
    .btn-ghost:hover { background: var(--xanda-50); border-color: var(--xanda-400); color: var(--xanda-700); }

    .btn-primary {
        background: var(--xanda-500);
        border-color: var(--xanda-500);
        color: white;
    }
    .btn-primary:hover { background: var(--xanda-600); border-color: var(--xanda-600); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(83,74,183,0.3); }

    .btn-danger {
        background: transparent;
        border-color: #F0997B;
        color: var(--danger);
    }
    .btn-danger:hover { background: var(--danger-bg); }

    .btn-success {
        background: transparent;
        border-color: #5DCAA5;
        color: var(--success);
    }
    .btn-success:hover { background: var(--success-bg); }

    .btn svg { width: 15px; height: 15px; flex-shrink: 0; }

    /* ── LAYOUT ── */
    .app-body {
        display: flex;
        flex: 1;
        overflow: hidden;
        height: calc(100vh - 60px);
    }

    /* ── SIDEBAR ── */
    .sidebar {
        width: 280px;
        min-width: 280px;
        background: var(--surface);
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .sidebar-header {
        padding: 16px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .sidebar-title {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
    }

    .tree-container {
        flex: 1;
        overflow-y: auto;
        padding: 8px;
    }

    .tree-container::-webkit-scrollbar { width: 4px; }
    .tree-container::-webkit-scrollbar-track { background: transparent; }
    .tree-container::-webkit-scrollbar-thumb { background: var(--xanda-200); border-radius: 4px; }

    .tree-empty {
        padding: 24px 16px;
        text-align: center;
        color: var(--text-muted);
        font-size: 13px;
        line-height: 1.6;
    }

    .tree-node {
        user-select: none;
    }

    .tree-node-header {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 5px 8px;
        border-radius: 7px;
        cursor: pointer;
        font-size: 13px;
        transition: background 0.13s;
        min-height: 30px;
    }

    .tree-node-header:hover { background: var(--xanda-50); }
    .tree-node-header.selected { background: var(--xanda-50); color: var(--xanda-700); }

    .tree-expand-btn {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        border: none;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        transition: transform 0.15s;
        flex-shrink: 0;
    }

    .tree-expand-btn.open { transform: rotate(90deg); }
    .tree-expand-btn svg { width: 10px; height: 10px; }

    .tree-key {
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        font-weight: 500;
        color: var(--xanda-700);
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tree-type-badge {
        font-size: 10px;
        padding: 2px 5px;
        border-radius: 4px;
        font-family: 'JetBrains Mono', monospace;
        flex-shrink: 0;
    }

    .type-string { background: #EEF9F5; color: #0F6E56; }
    .type-number { background: var(--warning-bg); color: var(--warning); }
    .type-boolean { background: var(--xanda-50); color: var(--xanda-600); }
    .type-null { background: #F1EFE8; color: #5F5E5A; }
    .type-object { background: var(--xanda-50); color: var(--xanda-600); }
    .type-array { background: #FBEAF0; color: #993556; }

    .tree-children {
        padding-left: 20px;
        border-left: 1.5px solid var(--border);
        margin-left: 12px;
    }

    /* ── MAIN AREA ── */
    .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-width: 0;
    }

    .main-toolbar {
        padding: 10px 20px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--surface);
        flex-wrap: wrap;
    }

    .toolbar-sep {
        width: 1px;
        height: 20px;
        background: var(--border-strong);
        margin: 0 4px;
    }

    .path-bar {
        flex: 1;
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        color: var(--text-muted);
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 7px;
        padding: 5px 10px;
        min-width: 120px;
    }

    /* ── TABS ── */
    .view-tabs {
        display: flex;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
        padding: 0 20px;
        gap: 0;
    }

    .view-tab {
        padding: 10px 18px;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-muted);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: all 0.15s;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .view-tab:hover { color: var(--xanda-600); }
    .view-tab.active { color: var(--xanda-600); border-bottom-color: var(--xanda-500); }
    .view-tab svg { width: 14px; height: 14px; }

    /* ── EDITOR PANELS ── */
    .editor-area {
        flex: 1;
        overflow: hidden;
        display: flex;
        position: relative;
    }

    .panel {
        display: none;
        flex: 1;
        overflow: hidden;
    }

    .panel.active { display: flex; flex-direction: column; }

    /* ── VISUAL EDITOR ── */
    .visual-editor {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
    }

    .visual-editor::-webkit-scrollbar { width: 5px; }
    .visual-editor::-webkit-scrollbar-thumb { background: var(--xanda-200); border-radius: 4px; }

    .node-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        margin-bottom: 12px;
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: box-shadow 0.2s;
    }

    .node-card:hover { box-shadow: var(--shadow-lg); }

    .node-card-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background: linear-gradient(to right, var(--surface-2), var(--surface));
        border-bottom: 1px solid var(--border);
    }

    .node-card-key {
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px;
        font-weight: 600;
        color: var(--xanda-700);
        flex: 1;
    }

    .node-card-body {
        padding: 14px 16px;
    }

    .field-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .field-row:last-child { margin-bottom: 0; }

    .field-label {
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        font-weight: 500;
        color: var(--xanda-600);
        min-width: 120px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .field-input {
        flex: 1;
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px;
        padding: 7px 12px;
        border: 1.5px solid var(--border-strong);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text-primary);
        transition: border-color 0.15s, box-shadow 0.15s;
        outline: none;
    }

    .field-input:focus {
        border-color: var(--xanda-400);
        box-shadow: 0 0 0 3px rgba(127,119,221,0.15);
    }

    .field-input.type-string { color: #0F6E56; }
    .field-input.type-number { color: var(--warning); }
    .field-input.type-boolean { color: var(--xanda-600); }
    .field-input.type-null { color: var(--text-muted); font-style: italic; }

    .field-type-select {
        font-size: 11px;
        padding: 5px 8px;
        border: 1.5px solid var(--border-strong);
        border-radius: 7px;
        background: var(--surface);
        color: var(--text-secondary);
        cursor: pointer;
        font-family: 'Inter', sans-serif;
        outline: none;
    }

    .field-type-select:focus { border-color: var(--xanda-400); }

    .field-action-btn {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        border: 1.5px solid var(--border-strong);
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        transition: all 0.15s;
        flex-shrink: 0;
    }

    .field-action-btn:hover { background: var(--danger-bg); border-color: #F0997B; color: var(--danger); }
    .field-action-btn svg { width: 14px; height: 14px; }

    .add-field-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        border-radius: 8px;
        border: 1.5px dashed var(--border-strong);
        background: transparent;
        cursor: pointer;
        font-size: 12.5px;
        color: var(--text-muted);
        font-family: 'Inter', sans-serif;
        width: 100%;
        transition: all 0.15s;
        margin-top: 8px;
    }

    .add-field-btn:hover { background: var(--xanda-50); border-color: var(--xanda-400); color: var(--xanda-600); }
    .add-field-btn svg { width: 14px; height: 14px; }

    /* ── RAW EDITOR ── */
    .raw-editor-wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 16px 20px;
        gap: 12px;
    }

    .raw-textarea {
        flex: 1;
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px;
        line-height: 1.7;
        padding: 16px;
        border: 1.5px solid var(--border-strong);
        border-radius: var(--radius-lg);
        background: #FAFAFA;
        color: var(--text-primary);
        resize: none;
        outline: none;
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .raw-textarea:focus {
        border-color: var(--xanda-400);
        box-shadow: 0 0 0 3px rgba(127,119,221,0.15);
        background: var(--surface);
    }

    .raw-textarea.error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(216,90,48,0.12); }

    .raw-error-msg {
        display: none;
        color: var(--danger);
        font-size: 12.5px;
        padding: 8px 12px;
        background: var(--danger-bg);
        border-radius: 8px;
        border-left: 3px solid var(--danger);
    }

    .raw-error-msg.visible { display: block; }

    /* ── WELCOME / DROP ZONE ── */
    .welcome-screen {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px;
        gap: 32px;
    }

    .drop-zone {
        width: 100%;
        max-width: 480px;
        border: 2.5px dashed var(--border-strong);
        border-radius: var(--radius-lg);
        padding: 48px 32px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        background: var(--surface);
    }

    .drop-zone:hover, .drop-zone.drag-over {
        border-color: var(--xanda-400);
        background: var(--xanda-50);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .drop-icon {
        width: 64px;
        height: 64px;
        background: var(--xanda-50);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        color: var(--xanda-500);
    }

    .drop-icon svg { width: 32px; height: 32px; }

    .drop-title {
        font-size: 20px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 8px;
    }

    .drop-subtitle {
        font-size: 14px;
        color: var(--text-muted);
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .divider-row {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 12px;
        color: var(--text-muted);
        width: 100%;
        max-width: 480px;
    }

    .divider-line { flex: 1; height: 1px; background: var(--border); }

    .quick-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 480px;
    }

    /* ── STATUS BAR ── */
    .status-bar {
        padding: 6px 20px;
        background: var(--surface);
        border-top: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 11.5px;
        color: var(--text-muted);
    }

    .status-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--text-muted);
    }

    .status-dot.ok { background: var(--success); }
    .status-dot.error { background: var(--danger); }

    /* ── TOAST ── */
    #toast {
        position: fixed;
        bottom: 24px;
        right: 24px;
        padding: 12px 20px;
        background: var(--xanda-900);
        color: white;
        border-radius: var(--radius);
        font-size: 13.5px;
        font-weight: 500;
        display: none;
        z-index: 9999;
        animation: slideUp 0.25s ease;
        max-width: 320px;
        box-shadow: var(--shadow-lg);
    }

    @keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

    /* ── MODAL ── */
    .modal-bg {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(26,23,64,0.45);
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }

    .modal-bg.open { display: flex; }

    .modal {
        background: var(--surface);
        border-radius: var(--radius-lg);
        padding: 28px;
        width: 90%;
        max-width: 460px;
        box-shadow: var(--shadow-lg);
    }

    .modal h2 {
        font-size: 17px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 6px;
    }

    .modal p {
        font-size: 13.5px;
        color: var(--text-secondary);
        margin-bottom: 20px;
        line-height: 1.5;
    }

    .modal-input {
        width: 100%;
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px;
        padding: 9px 12px;
        border: 1.5px solid var(--border-strong);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text-primary);
        outline: none;
        margin-bottom: 8px;
        display: block;
    }

    .modal-input:focus { border-color: var(--xanda-400); box-shadow: 0 0 0 3px rgba(127,119,221,0.15); }

    .modal-label {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 5px;
        display: block;
    }

    .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

    .stats-row { display: flex; gap: 16px; flex-wrap: wrap; }
    .stat-pill {
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 11.5px;
        font-weight: 500;
        background: var(--xanda-50);
        color: var(--xanda-700);
    }

    input[type="file"] { display: none; }

    .expand-collapse-all {
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 5px;
        border: 1px solid var(--border-strong);
        background: transparent;
        cursor: pointer;
        color: var(--text-muted);
        font-family: 'Inter', sans-serif;
        transition: all 0.13s;
    }
    .expand-collapse-all:hover { background: var(--xanda-50); color: var(--xanda-600); border-color: var(--xanda-400); }

    /* ── DISABLED BUTTONS (undo/redo) ── */
    .btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

    /* ── TREE SEARCH ── */
    .tree-search-wrap {
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
    }

    .tree-search {
        width: 100%;
        font-family: 'Inter', sans-serif;
        font-size: 12.5px;
        padding: 7px 10px;
        border: 1.5px solid var(--border-strong);
        border-radius: 8px;
        background: var(--surface-2);
        color: var(--text-primary);
        outline: none;
        transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    }

    .tree-search:focus {
        border-color: var(--xanda-400);
        background: var(--surface);
        box-shadow: 0 0 0 3px rgba(127,119,221,0.15);
    }

    .tree-key.search-hit {
        background: #FFEE9C;
        border-radius: 3px;
        padding: 0 3px;
        color: var(--xanda-900);
    }

    /* ── EDITABLE KEYS ── */
    .field-key-input {
        border: 1.5px solid transparent;
        background: transparent;
        border-radius: 6px;
        padding: 4px 6px;
        cursor: text;
        transition: all 0.15s;
    }

    .field-key-input:hover { background: var(--xanda-50); }

    .field-key-input:focus {
        border-color: var(--xanda-400);
        background: var(--surface);
        box-shadow: 0 0 0 3px rgba(127,119,221,0.15);
        outline: none;
        max-width: 220px;
    }

    .node-card-key-input {
        border: 1.5px solid transparent;
        background: transparent;
        border-radius: 6px;
        padding: 4px 8px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px;
        font-weight: 600;
        color: var(--xanda-700);
        flex: 1;
        cursor: text;
        transition: all 0.15s;
        min-width: 0;
    }

    .node-card-key-input:hover { background: var(--surface); }

    .node-card-key-input:focus {
        border-color: var(--xanda-400);
        background: var(--surface);
        box-shadow: 0 0 0 3px rgba(127,119,221,0.15);
        outline: none;
    }

    /* ── ARRAY ITEM ACTIONS (move/duplicate) ── */
    .field-action-btn.move-btn svg { width: 12px; height: 12px; }
    .field-action-btn:hover.move-btn { background: var(--xanda-50); border-color: var(--xanda-400); color: var(--xanda-600); }
    .field-action-btn.duplicate-btn:hover { background: var(--xanda-50); border-color: var(--xanda-400); color: var(--xanda-600); }

    /* ── IMAGE PREVIEW THUMBNAIL ── */
    .field-preview {
        width: 32px;
        height: 32px;
        border-radius: 7px;
        object-fit: cover;
        border: 1.5px solid var(--border-strong);
        cursor: pointer;
        flex-shrink: 0;
        background: var(--surface-2);
        transition: transform 0.15s, border-color 0.15s;
        display: none;
    }

    .field-preview:hover { transform: scale(1.18); border-color: var(--xanda-400); box-shadow: var(--shadow); }

    .image-preview-modal { max-width: 640px; text-align: center; }
    .image-preview-modal img {
        max-width: 100%;
        max-height: 60vh;
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        background: var(--surface-2);
    }

    /* ── AUTOSAVE INDICATOR ── */
    .autosave-badge {
        opacity: 0.5;
        transition: opacity 0.3s, color 0.3s;
    }

    .autosave-badge.flash {
        opacity: 1;
        color: var(--success);
        font-weight: 600;
    }