:root{
        --bg:#0f1220;
        --panel:#171b2e;
        --panel2:#1e2440;
        --line:#2d3763;
        --text:#eef3ff;
        --muted:#a8b3d9;
        --accent:#6ea8ff;
        --good:#7ee787;
    }

    *{ box-sizing:border-box; }

    body{
        margin:0;
        height:100vh;
        display:grid;
        grid-template-columns: 1fr 340px;
        background:var(--bg);
        color:var(--text);
        font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
        overflow:hidden;
    }

    #workspace{
        position:relative;
        overflow:hidden;
        background:
            radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0) 0 0/24px 24px,
            var(--bg);
    }

    .toolbar{
        position:absolute;
        top:14px;
        left:14px;
        z-index:10;
        display:flex;
        gap:10px;
    }

    button{
        border:none;
        border-radius:10px;
        padding:10px 14px;
        background:var(--panel2);
        color:var(--text);
        cursor:pointer;
        font-weight:600;
    }

    button:hover{ filter:brightness(1.08); }

    .box{
        position:absolute;
        width:280px;
        min-height:120px;
        background:var(--panel);
        border:2px solid var(--line);
        border-radius:16px;
        box-shadow:0 10px 30px rgba(0,0,0,.35);
        user-select:none;
    }

    .box.selected{
        border-color:var(--accent);
    }

    .box-header{
        padding:12px 14px;
        border-bottom:1px solid var(--line);
        display:flex;
        justify-content:space-between;
        align-items:center;
        cursor:grab;
    }

    .box-title{
        font-weight:700;
    }

    .node-list{
        padding:12px;
        display:flex;
        flex-direction:column;
        gap:10px;
    }

    .node{
        background:var(--panel2);
        border:1px solid var(--line);
        border-radius:12px;
        padding:10px;
        cursor:pointer;
    }

    .node.selected{
        border-color:var(--accent);
        box-shadow:0 0 0 2px rgba(110,168,255,.15);
    }

    .node .name{
        font-weight:600;
    }

    .node .meta{
        color:var(--muted);
        font-size:12px;
        margin-top:4px;
        display:flex;
        gap:10px;
        flex-wrap:wrap;
    }

    .add-node{
        width:100%;
        margin-top:4px;
        background:#223055;
    }

    aside{
        border-left:1px solid var(--line);
        background:linear-gradient(180deg,var(--panel),#12172a);
        display:flex;
        flex-direction:column;
        overflow:auto;
    }

    .side-section{
        padding:18px;
        border-bottom:1px solid var(--line);
    }

    h2{
        margin:0 0 12px;
        font-size:18px;
    }

    .field{
        margin-bottom:14px;
    }

    .field label{
        display:block;
        margin-bottom:6px;
        font-size:13px;
        color:var(--muted);
    }

    input, textarea{
        width:100%;
        background:#0f1430;
        color:var(--text);
        border:1px solid var(--line);
        border-radius:10px;
        padding:10px 12px;
        font:inherit;
    }

    textarea{
        min-height:180px;
        resize:vertical;
    }

    .empty{
        color:var(--muted);
        font-size:14px;
        padding:8px 0;
    }

    .pill{
        display:inline-block;
        padding:4px 8px;
        border-radius:999px;
        background:rgba(126,231,135,.12);
        color:var(--good);
        font-size:12px;
        margin-top:8px;
    }