:root {
    --bg: #0e1117;
    --panel: #0b1220;
    --border: #2a384e;
    --text: #e8edf4;
    --text-dim: #aeb9c8;
    --accent: #6aa9ff;
    --ok: #34d399;
    --warn: #fbbf24;
    --err: #f87171;
    --shadow: 0 8px 24px rgba(0,0,0,.35);
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial
}

.cn-studio {
    display: grid;
    grid-template-columns: clamp(240px,18vw,300px) 1fr clamp(340px,24vw,460px);
    grid-template-rows: auto 1fr auto;
    height: 100vh
}

.cn-header, .cn-footer {
    grid-column: 1/4;
    padding: 10px 14px;
    background: linear-gradient(180deg,rgba(255,255,255,.03),transparent)
}

.cn-header {
    border-bottom: 1px solid #223149;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cn-footer {
    border-top: 1px solid #223149;
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--text-dim)
}

.cn-btn {
    background: linear-gradient(180deg,#121a28,#111724);
    color: var(--text);
    border: 1px solid #2a384e;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer
}

    .cn-btn:hover {
        background: #162036;
        border-color: #3b4c69
    }

    .cn-btn.on {
        outline: 2px solid var(--accent)
    }

.cn-palette {
    border-right: 1px solid #223149;
    background: var(--panel);
    padding: 12px 10px;
    overflow: auto
}

    .cn-palette h3 {
        margin: 2px 6px 8px;
        font-size: 12px;
        letter-spacing: .08em;
        color: var(--text-dim)
    }

.cn-pal-item {
    border: 1px dashed #2a384e;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 8px 6px;
    cursor: grab;
    background: linear-gradient(180deg,#0e1522,#0b121c)
}

    .cn-pal-item:hover {
        background: #111a29;
        border-color: #394a66
    }

.cn-canvas-wrap {
    position: relative;
    overflow: auto;
    background: radial-gradient(1200px 800px at 60% 20%, rgba(120,160,255,.06), transparent 60%), linear-gradient(#10151f,#10151f) padding-box, repeating-linear-gradient(0deg,transparent,transparent 24px,rgba(255,255,255,.04) 25px), repeating-linear-gradient(90deg,transparent,transparent 24px,rgba(255,255,255,.04) 25px);
}

.cn-canvas {
    position: relative;
    min-width: 2400px;
    min-height: 1600px
}

.cn-svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.cn-edge {
    stroke: #86a2d7;
    stroke-width: 2;
    fill: none
}

    .cn-edge:hover {
        stroke: #bcd1ff
    }

.cn-edge-label {
    font-size: 11px;
    fill: #cfe1ff;
    pointer-events: auto
}

.cn-svg marker path {
    fill: #86a2d7
}

.cn-node {
    position: absolute;
    min-width: 150px;
    min-height: 56px;
    border: 1px solid #2a384e;
    border-radius: 12px;
    background: linear-gradient(180deg,#0f1520,#0c1422);
    box-shadow: var(--shadow);
    color: var(--text);
    padding: 10px 12px;
    cursor: move;
    user-select: none
}

    .cn-node .t {
        font-weight: 700;
        font-size: 14px;
        margin-bottom: 2px
    }

    .cn-node .s {
        font-size: 11px;
        color: var(--text-dim)
    }

    .cn-node.selected {
        outline: 2px solid var(--accent);
        box-shadow: 0 0 0 3px rgba(106,169,255,.25),var(--shadow)
    }

.cn-pool {
    position: absolute;
    background: #0b1019;
    border: 2px solid #324058;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.35)
}

.cn-pool-header {
    height: 28px;
    background: #0d1320;
    border-bottom: 1px solid #2b3a54;
    color: #cfe1ff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px
}

.cn-pool-body {
    position: relative
}

.cn-pool .cn-resize {
    position: absolute;
    width: 14px;
    height: 14px;
    right: 6px;
    bottom: 6px;
    border: 1px solid #2b3a54;
    border-radius: 4px;
    background: linear-gradient(135deg,rgba(255,255,255,.2),transparent);
    cursor: nwse-resize
}

.cn-lane {
    position: relative;
    border-bottom: 1px solid #29364d;
    display: grid;
    grid-template-columns: 32px 1fr;
    min-height: 80px
}

    .cn-lane:last-child {
        border-bottom: none
    }

.cn-lane-head {
    background: #0a0f19;
    border-right: 1px solid #233049;
    color: #96a6c2;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: .03em
}

.cn-lane-body {
    position: relative;
    overflow: visible
}

.cn-lane.active .cn-lane-head {
    background: #111a2a;
    color: #dbe7ff
}

.cn-props {
    border-left: 1px solid #223149;
    background: var(--panel);
    padding: 14px 12px 18px
}

    .cn-props h3 {
        margin: 4px 2px 10px;
        font-size: 14px
    }

.cn-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px
}

.cn-group {
    margin-bottom: 8px
}

.cn-label {
    font-size: 12px;
    color: var(--text-dim);
    margin: 0 0 6px;
    display: block
}

.cn-input {
    display: block;
    width: 100%;
    background: #0b111a;
    color: var(--text);
    border: 1px solid #2a384e;
    border-radius: 8px;
    padding: 8px 10px
}

    .cn-input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(106,169,255,.25)
    }

.cn-node[data-type="bpmn.startEvent"] {
    border-color: rgba(52,211,153,.7);
    box-shadow: 0 0 0 2px rgba(52,211,153,.25),var(--shadow)
}

.cn-node[data-type="bpmn.endEvent"] {
    border-color: rgba(248,113,113,.7);
    box-shadow: 0 0 0 2px rgba(248,113,113,.25),var(--shadow)
}

.cn-node.warn {
    outline: 2px solid var(--warn)
}

.cn-node.muted {
    opacity: .85;
    filter: saturate(.85)
}

/* ========== Swimlanes (Pool/Lanes) ===================================== */

.cn-pool {
    position: absolute;
    border: 1px solid #223149;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));
    box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
    overflow: hidden;
}

.cn-lane {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06)), repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.03) 40px);
}

    .cn-lane:first-child {
        border-top: 0;
    }

.cn-lane-header {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 3px 8px;
    font-size: 12px;
    color: #cfe1ff;
    border: 1px solid #223149;
    border-radius: 999px;
    background: #0b1220;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    pointer-events: none;
}

.cn-lane .name {
    opacity: .95
}

/* Lane select feedback if node moved */
.cn-node.lane-changed {
    box-shadow: 0 0 0 3px rgba(88,199,250,.35), 0 10px 20px rgba(0,0,0,.35) !important;
}

/* ========== Nodes (Pro Look) =========================================== */

.cn-node {
    position: absolute;
    min-width: 90px;
    max-width: 280px;
    padding: 8px 10px 10px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.08));
    box-shadow: 0 8px 24px rgba(0,0,0,.26);
    user-select: none;
    cursor: move;
}

    .cn-node .t {
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 2px;
    }

    .cn-node .s {
        font-size: 11px;
        opacity: .6
    }

    /* Decorative shape overlay */
    .cn-node .shape {
        position: absolute;
        inset: 0;
        border-radius: 10px;
        pointer-events: none;
        opacity: .7;
        mix-blend-mode: soft-light;
    }

    /* Tasks */
    .cn-node.is-task {
        border-color: rgba(63,189,245,.4);
        background: linear-gradient(180deg, rgba(63,189,245,.08), rgba(0,0,0,.08));
    }

        .cn-node.is-task .shape {
            box-shadow: inset 0 0 0 2px rgba(63,189,245,.35);
        }

    /* Events (circle feel via inner outline) */
    .cn-node.is-event {
        border-color: rgba(147,197,114,.4);
        background: linear-gradient(180deg, rgba(147,197,114,.08), rgba(0,0,0,.08));
    }

        .cn-node.is-event .shape {
            box-shadow: inset 0 0 0 2px rgba(147,197,114,.35);
            border-radius: 20px;
        }

    /* Gateways */
    .cn-node.is-gateway {
        border-color: rgba(246,189,69,.45);
        background: linear-gradient(180deg, rgba(246,189,69,.10), rgba(0,0,0,.08));
    }

        .cn-node.is-gateway .shape {
            box-shadow: inset 0 0 0 2px rgba(246,189,69,.45);
        }

    /* Subprocess */
    .cn-node.is-subprocess {
        border-color: rgba(170,120,255,.45);
        background: linear-gradient(180deg, rgba(170,120,255,.10), rgba(0,0,0,.08));
    }

        .cn-node.is-subprocess .shape {
            box-shadow: inset 0 0 0 2px rgba(170,120,255,.45);
        }

/* Breadcrumb for dive */
#cn-breadcrumb.cn-breadcrumb {
    position: absolute;
    left: 10px;
    top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
}

#cn-breadcrumb .sep {
    opacity: .5
}
/* === Timer visualization =================================================== */
.cn-node.is-timer,
.cn-node[data-type*="timer"] {
    border-color: rgba(250, 204, 21, .55);
    background: linear-gradient(180deg, rgba(250, 204, 21, .12), rgba(0,0,0,.08));
    box-shadow: 0 0 0 2px rgba(250, 204, 21, .20), var(--shadow);
}

    .cn-node.is-timer .shape {
        box-shadow: inset 0 0 0 2px rgba(250, 204, 21, .45);
        border-radius: 16px;
    }

    .cn-node.is-timer::after {
        content: "⏲";
        position: absolute;
        right: 6px;
        top: 6px;
        font-size: 13px;
        opacity: .8;
        pointer-events: none;
    }
/* different timer kinds */
.cn-node[data-timer-kind="date"] {
    outline: 2px dashed rgba(250, 204, 21, .35);
}

.cn-node[data-timer-kind="cycle"] {
    outline: 2px dotted rgba(250, 204, 21, .35);
}

.cn-node[data-timer-kind="duration"] {
    outline: 2px solid rgba(250, 204, 21, .22);
}
/* === BPMN Shapes korrigieren === */

/* Events: echter Kreis, zentriert */
.cn-node.is-event .shape {
    position: absolute;
    width: 56px;
    height: 56px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    box-shadow: inset 0 0 0 3px rgba(147,197,114,.65);
    background: transparent;
}

/* EndEvent: doppelte/kräftigere Linie */
.cn-node[data-type="bpmn.endEvent"] .shape {
    box-shadow: inset 0 0 0 6px rgba(248,113,113,.85);
}

/* Gateways: Diamant via rotate */
.cn-node.is-gateway .shape {
    position: absolute;
    width: 56px;
    height: 56px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 8px; /* leicht gerundet, optional */
    box-shadow: inset 0 0 0 2px rgba(246,189,69,.60);
    background: transparent;
}
.cn-pool {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.cn-pool-header {
    position: absolute;
    top: -14px;
    left: 12px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    background: rgba(14,18,32,.95);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
}

.cn-lane {
    border-top: 1px dashed rgba(255,255,255,.08);
}

    .cn-lane:first-child {
        border-top: none;
    }

.cn-lane-header {
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 11px;
    opacity: .7;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(20,20,28,.55);
    backdrop-filter: blur(2px);
}
.cn-card {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: .6rem;
    margin: .6rem 0;
    background: rgba(20,24,36,.35)
}

.cn-card-title {
    font-weight: 600;
    margin-bottom: .4rem;
    opacity: .9
}

.cn-field {
    display: block;
    margin: .35rem 0
}

    .cn-field > label {
        display: inline-block;
        min-width: 140px;
        opacity: .8
    }

.gw-row {
    display: flex;
    gap: .4rem;
    align-items: center;
    margin: .35rem 0
}

.btn.btn-mini {
    padding: .1rem .4rem;
    border-radius: 6px
}