:root {
    --navy: #0b1739;
    --navy-2: #111f46;
    --blue: #2e62ff;
    --blue-dark: #1e49d7;
    --blue-soft: #eef3ff;
    --green: #16a36a;
    --red: #d63b4a;
    --amber: #d97706;
    --ink: #17213d;
    --muted: #6e7892;
    --line: #dfe4ee;
    --soft-line: #edf0f5;
    --surface: #ffffff;
    --page: #f4f6fa;
    --shadow: 0 12px 35px rgba(27, 39, 74, .08);
    --sidebar: 238px;
}

* { box-sizing: border-box; }

html { min-width: 1180px; background: var(--page); }

body {
    margin: 0;
    color: var(--ink);
    background: var(--page);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.app-shell { min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    display: flex;
    flex-direction: column;
    padding: 28px 18px 22px;
    color: #dce5ff;
    background: linear-gradient(180deg, #0b1739 0%, #0a1430 100%);
    z-index: 30;
}

.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 30px; }
.brand > span:last-child { display: flex; flex-direction: column; }
.brand strong { color: #fff; letter-spacing: .09em; font-size: 15px; }
.brand small { color: #8fa0c8; font-size: 11px; }

.brand-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #2f67ff, #14a570);
    box-shadow: 0 7px 20px rgba(33, 101, 255, .32);
    font-weight: 800;
    font-size: 17px;
}
.brand-mark.large { width: 48px; height: 48px; border-radius: 13px; font-size: 22px; }

.nav-links { display: grid; gap: 7px; }
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border-radius: 9px;
    color: #aab7d7;
    font-weight: 650;
    transition: .18s ease;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-link.active { color: #fff; background: #2858e7; box-shadow: 0 8px 20px rgba(22,65,191,.35); }
.nav-icon { width: 20px; text-align: center; font-size: 18px; }

.sidebar-bottom { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid rgba(255,255,255,.09); }
.admin-chip { display: flex; align-items: center; gap: 8px; color: #99a9ce; font-size: 12px; margin-bottom: 10px; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #29ca87; box-shadow: 0 0 0 3px rgba(41,202,135,.12); }
.logout-btn { border: 0; padding: 0; color: #dce5ff; background: none; cursor: pointer; font-weight: 650; }
.logout-btn:hover { color: #fff; }

.main-content { min-height: 100vh; margin-left: var(--sidebar); padding: 34px 38px 55px; }

.page-header, .workflow-heading, .workflow-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.page-header { margin-bottom: 28px; }
.page-header h1, .workflow-heading h1 { margin: 4px 0 5px; color: var(--navy); font-size: 30px; line-height: 1.2; letter-spacing: -.025em; }
.page-header p, .workflow-heading p { margin: 0; color: var(--muted); max-width: 720px; }
.eyebrow { display: inline-block; color: var(--blue); font-size: 10px; letter-spacing: .15em; font-weight: 800; }
.eyebrow.light { color: #91abff; }

.primary-btn, .secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    transition: .18s ease;
}
.primary-btn { color: #fff; background: var(--blue); box-shadow: 0 6px 15px rgba(46,98,255,.2); }
.primary-btn:hover { background: var(--blue-dark); transform: translateY(-1px); }
.secondary-btn { color: var(--ink); border-color: var(--line); background: #fff; }
.secondary-btn:hover { border-color: #b7c1d5; background: #fafbfc; }
.primary-btn.small, .secondary-btn.small { min-height: 35px; padding: 0 12px; font-size: 12px; }
.full { width: 100%; }
button:disabled { opacity: .48; cursor: not-allowed; transform: none !important; }

.text-btn { padding: 5px; border: 0; background: none; cursor: pointer; color: var(--muted); font-weight: 650; }
.danger { color: var(--red) !important; }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); cursor: pointer; font-size: 20px; line-height: 1; }

.toast { position: fixed; right: 32px; top: 24px; z-index: 100; max-width: 430px; padding: 13px 18px; border-radius: 9px; color: #fff; box-shadow: 0 15px 40px rgba(19,29,56,.2); font-weight: 650; animation: toastIn .25s ease both, toastOut .25s ease 4.8s both; }
.toast.success { background: #14895c; }
.toast.error { background: #c93445; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } }
@keyframes toastOut { to { opacity: 0; visibility: hidden; } }

.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-bottom: 34px; }
.stat-card { position: relative; min-height: 132px; padding: 21px 23px; border: 1px solid var(--soft-line); border-radius: 12px; background: var(--surface); box-shadow: 0 6px 24px rgba(28,43,80,.04); overflow: hidden; }
.stat-card::after { content: ""; position: absolute; width: 80px; height: 80px; right: -25px; top: -22px; border-radius: 50%; background: var(--blue-soft); }
.stat-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 650; }
.stat-card strong { display: block; margin-top: 6px; color: var(--navy); font-size: 31px; line-height: 1; }
.stat-card small { display: block; margin-top: 10px; color: #9aa3b8; }

.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 16px; }
.section-heading h2 { margin: 0; color: var(--navy); font-size: 18px; }
.section-heading p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }

.workflow-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; }
.workflow-card { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 7px 25px rgba(27,39,74,.04); }
.workflow-card-top, .workflow-actions, .workflow-numbers { display: flex; align-items: center; }
.workflow-card-top { justify-content: space-between; }
.workflow-symbol { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; color: var(--blue); background: var(--blue-soft); font-size: 22px; font-weight: 800; }
.status-pill { display: inline-flex; align-items: center; height: 23px; padding: 0 9px; border-radius: 20px; color: #11845a; background: #eaf8f2; font-size: 9px; letter-spacing: .1em; font-weight: 800; }
.workflow-card h3 { margin: 18px 0 6px; color: var(--navy); font-size: 18px; }
.workflow-card > p { min-height: 43px; margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.workflow-numbers { gap: 24px; padding: 13px 0; border-block: 1px solid var(--soft-line); color: var(--muted); font-size: 11px; }
.workflow-numbers b { color: var(--ink); font-size: 14px; margin-right: 3px; }
.workflow-actions { justify-content: space-between; gap: 15px; padding-top: 17px; }

.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 90; }
.modal.open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(5,13,34,.58); backdrop-filter: blur(2px); }
.modal-panel { position: relative; width: 500px; padding: 25px; border-radius: 13px; background: #fff; box-shadow: 0 30px 80px rgba(4,12,33,.3); }
.modal-head { display: flex; align-items: start; justify-content: space-between; margin-bottom: 20px; }
.modal-head h2 { margin: 3px 0 0; font-size: 22px; color: var(--navy); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 5px; }

.form-stack { display: grid; gap: 15px; }
.form-stack.compact { gap: 12px; }
label { display: grid; gap: 6px; color: #4f5a74; font-size: 11px; font-weight: 750; }
input, select, textarea {
    width: 100%;
    min-height: 41px;
    padding: 9px 11px;
    border: 1px solid #d7ddea;
    border-radius: 7px;
    color: var(--ink);
    background: #fff;
    outline: 0;
    font-size: 13px;
    font-weight: 500;
}
textarea { min-height: 78px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #7293ff; box-shadow: 0 0 0 3px rgba(46,98,255,.09); }
.form-row { display: grid; gap: 12px; }
.form-row.two { grid-template-columns: 1fr 1fr; }
.color-input { padding: 4px; height: 41px; }

/* Login */
.login-page { min-width: 1000px; min-height: 100vh; background: #eef2f8; }
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 46% 54%; }
.login-card { width: 410px; margin: auto; padding: 42px; border: 1px solid #e3e7ef; border-radius: 16px; background: #fff; box-shadow: 0 22px 65px rgba(31,46,83,.1); }
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 48px; }
.login-brand > div { display: flex; flex-direction: column; }
.login-brand strong { color: var(--navy); letter-spacing: .12em; }
.login-brand span { color: var(--muted); font-size: 11px; }
.login-copy h1 { margin: 4px 0 7px; color: var(--navy); font-size: 31px; line-height: 1.15; }
.login-copy p { margin: 0 0 24px; color: var(--muted); }
.login-form { display: grid; gap: 14px; }
.login-form input { min-height: 47px; }
.login-form .primary-btn { min-height: 47px; margin-top: 2px; }
.login-foot { margin: 29px 0 0; color: #a0a8b8; text-align: center; font-size: 10px; }
.form-alert { padding: 10px 12px; margin-bottom: 14px; border-radius: 7px; font-size: 12px; font-weight: 650; }
.form-alert.error { color: #a72031; background: #fff0f2; border: 1px solid #ffd9df; }
.login-visual { position: relative; display: flex; align-items: center; padding: 10%; color: #fff; background: radial-gradient(circle at 80% 15%, #2d60d9 0%, transparent 34%), linear-gradient(135deg, #0b1739, #14295f 70%, #0b1739); overflow: hidden; }
.login-visual::after { content: ""; position: absolute; width: 440px; height: 440px; right: -170px; bottom: -200px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018); }
.visual-copy { position: relative; z-index: 1; max-width: 520px; }
.visual-copy h2 { margin: 10px 0 18px; font-size: 47px; line-height: 1.08; letter-spacing: -.035em; }
.visual-copy p { max-width: 480px; color: #aebce0; font-size: 15px; }
.mini-flow { position: absolute; left: 10%; bottom: 12%; display: flex; align-items: center; gap: 8px; }
.mini-flow span { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 9px; background: rgba(255,255,255,.08); font-weight: 800; }
.mini-flow i { width: 38px; height: 1px; background: #688cff; position: relative; }
.mini-flow i::after { content: ""; position: absolute; right: -1px; top: -3px; border-left: 6px solid #688cff; border-block: 3px solid transparent; }

/* Teams */
.teams-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; color: var(--muted); font-size: 12px; }
.teams-summary strong { color: var(--navy); font-size: 16px; }
.team-list { display: grid; gap: 10px; }
.team-row { border: 1px solid var(--line); border-radius: 11px; background: #fff; overflow: hidden; }
.team-row[open] { box-shadow: var(--shadow); }
.team-row summary { display: grid; grid-template-columns: 52px minmax(360px, 1fr) 105px 105px 25px; align-items: center; gap: 15px; min-height: 82px; padding: 13px 18px; cursor: pointer; list-style: none; }
.team-row summary::-webkit-details-marker { display: none; }
.team-row summary:hover { background: #fbfcfe; }
.team-code { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: var(--team-color); background: color-mix(in srgb, var(--team-color) 11%, white); font-size: 17px; font-weight: 850; }
.team-main { display: flex; flex-direction: column; min-width: 0; }
.team-main strong { color: var(--navy); font-size: 14px; }
.team-main small { overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.team-count { color: var(--muted); font-size: 11px; }
.team-count b { display: block; color: var(--ink); font-size: 14px; }
.chevron { color: #9ca6b9; font-size: 18px; transition: transform .18s; }
.team-row[open] .chevron { transform: rotate(180deg); }
.team-expanded { display: grid; grid-template-columns: minmax(340px,.85fr) minmax(480px,1.15fr); border-top: 1px solid var(--soft-line); background: #fafbfc; }
.team-edit-panel, .members-panel { padding: 23px; }
.members-panel { border-left: 1px solid var(--soft-line); }
.panel-title { margin-bottom: 15px; }
.panel-title h3 { margin: 0; color: var(--navy); font-size: 15px; }
.panel-title p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.inline-actions { display: flex; }
.delete-team-form { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--soft-line); }
.member-list { display: grid; gap: 7px; margin-bottom: 17px; }
.member-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--soft-line); border-radius: 8px; background: #fff; }
.member-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #2457dc; background: var(--blue-soft); font-weight: 800; }
.member-info { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.member-info strong { font-size: 12px; }
.member-info small { color: var(--muted); font-size: 10px; }
.member-item .icon-btn { width: 27px; height: 27px; font-size: 17px; }
.empty-members { padding: 14px; margin-bottom: 16px; border: 1px dashed #ccd3df; border-radius: 8px; color: var(--muted); text-align: center; font-size: 11px; }
.add-member-form { padding-top: 15px; border-top: 1px solid var(--line); }
.add-member-form h4 { margin: 0 0 10px; font-size: 12px; }
.add-member-form .form-row { margin-bottom: 10px; }

/* Workflow builder */
.workflow-page-header { margin-bottom: 19px; }
.workflow-title-row { justify-content: flex-start; margin-bottom: 13px; }
.back-link { color: var(--blue); font-size: 12px; font-weight: 700; }
.workflow-heading { align-items: end; }
.workflow-heading h1 { font-size: 26px; }
.canvas-help { display: grid; grid-template-columns: 30px auto; align-items: center; min-width: 210px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.canvas-help > span { grid-row: 1/3; color: var(--blue); font-size: 21px; }
.canvas-help strong { font-size: 10px; }
.canvas-help small { color: var(--muted); font-size: 9px; }

.workflow-editor { display: grid; grid-template-columns: minmax(720px, 1fr) 300px; gap: 16px; align-items: start; }
.canvas-section { min-width: 0; border: 1px solid var(--line); border-radius: 11px; background: #fff; overflow: hidden; box-shadow: 0 8px 26px rgba(25,41,78,.045); }
.canvas-toolbar { min-height: 53px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 16px; border-bottom: 1px solid var(--soft-line); }
.toolbar-left, .legend { display: flex; align-items: center; gap: 13px; }
.canvas-label { color: var(--navy); font-size: 10px; letter-spacing: .11em; font-weight: 850; }
.toolbar-stat { padding-left: 12px; border-left: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.legend { color: var(--muted); font-size: 9px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.line { width: 25px; height: 0; display: inline-block; border-top: 2px solid #61708c; position: relative; }
.line::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 5px solid #61708c; border-block: 3px solid transparent; }
.line.dashed { border-top-style: dashed; }
.workflow-scroll { width: 100%; overflow: auto; background: #f8f9fc; }
.workflow-board { position: relative; width: 1900px; height: 900px; background-color: #f8f9fc; background-image: radial-gradient(#cfd5e2 1px, transparent 1px); background-size: 20px 20px; user-select: none; }
.connection-layer { position: absolute; inset: 0; overflow: visible; color: #7a879f; pointer-events: none; z-index: 1; }
.edge-path { fill: none; stroke: #77849c; stroke-width: 1.8; marker-end: url(#arrowHead); }
.edge-path.dashed { stroke-dasharray: 7 6; }
.edge-label-bg { fill: #fff; stroke: #dfe4ee; stroke-width: 1; }
.edge-label { fill: #48546d; font-size: 10px; font-family: Inter, ui-sans-serif, sans-serif; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.workflow-node { position: absolute; z-index: 5; width: 230px; min-height: 180px; border: 1px solid #d9dfeb; border-top: 3px solid var(--team-color); border-radius: 10px; background: #fff; box-shadow: 0 9px 23px rgba(31,43,72,.1); transition: box-shadow .15s, transform .15s, border-color .15s; }
.workflow-node:hover { box-shadow: 0 13px 32px rgba(31,43,72,.16); transform: translateY(-1px); }
.workflow-node.selected { border-color: var(--team-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-color) 14%, transparent), 0 13px 32px rgba(31,43,72,.14); }
.workflow-node.dragging { z-index: 10; transform: none; box-shadow: 0 20px 45px rgba(31,43,72,.22); cursor: grabbing; }
.node-drag-handle { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border-bottom: 1px solid var(--soft-line); cursor: grab; }
.node-code { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; color: var(--team-color); background: color-mix(in srgb, var(--team-color) 11%, white); font-size: 11px; font-weight: 850; }
.drag-dots { color: #a4adbd; font-size: 17px; }
.node-body { padding: 12px 13px 10px; }
.node-kicker { color: var(--team-color); font-size: 8px; letter-spacing: .12em; font-weight: 850; }
.node-body h3 { margin: 4px 0 6px; color: var(--navy); font-size: 14px; line-height: 1.25; }
.node-body p { height: 46px; display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.node-footer { min-height: 35px; display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-top: 1px solid var(--soft-line); color: var(--muted); font-size: 9px; }
.inspect-node { padding: 0; border: 0; color: var(--blue); background: none; cursor: pointer; font-size: 9px; font-weight: 800; }
.canvas-empty { position: absolute; z-index: 2; left: 75px; top: 75px; width: 310px; padding: 25px; border: 1px dashed #bec7d7; border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.7); }
.canvas-empty strong, .canvas-empty span { display: block; }
.canvas-empty strong { color: var(--navy); margin-bottom: 4px; }
.save-status { min-height: 33px; margin: 0; padding: 8px 14px; border-top: 1px solid var(--soft-line); color: #8a94aa; font-size: 9px; }
.save-status.saving { color: var(--amber); }
.save-status.saved { color: var(--green); }
.save-status.error { color: var(--red); }

.builder-sidebar { display: grid; gap: 10px; }
.builder-block { border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 6px 20px rgba(28,42,75,.035); overflow: hidden; }
.builder-block > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; cursor: pointer; list-style: none; color: var(--navy); font-size: 11px; font-weight: 750; }
.builder-block > summary::-webkit-details-marker { display: none; }
.builder-block > summary span { display: flex; align-items: center; gap: 8px; }
.builder-block > summary b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: var(--blue); background: var(--blue-soft); font-size: 12px; }
.builder-block > summary i { color: #9da7ba; font-style: normal; transition: transform .18s; }
.builder-block[open] > summary i { transform: rotate(180deg); }
.builder-form, .remove-list { display: grid; gap: 11px; padding: 13px 14px 15px; border-top: 1px solid var(--soft-line); }
.builder-form input, .builder-form select, .builder-form textarea { min-height: 36px; padding: 7px 9px; font-size: 11px; }
.builder-form textarea { min-height: 65px; }
.subtle-link { color: var(--blue); text-align: center; font-size: 9px; font-weight: 700; }
.node-inspector { min-height: 132px; padding: 15px; border-top: 3px solid var(--blue); }
.builder-kicker { color: var(--blue); font-size: 8px; letter-spacing: .12em; font-weight: 850; }
#inspectorEmpty h3 { margin: 8px 0 3px; color: var(--navy); font-size: 13px; }
#inspectorEmpty p, #inspectorContent > p { margin: 0; color: var(--muted); font-size: 10px; }
#inspectorContent { position: relative; padding-left: 41px; }
.inspector-code { position: absolute; left: 0; top: 3px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--blue); font-size: 12px; font-weight: 850; }
#inspectorContent h3 { margin: 5px 0 3px; color: var(--navy); font-size: 13px; }
.inspector-members { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--soft-line); font-size: 9px; }
.inspector-members strong { color: var(--ink); }
#inspectorMembers { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
#inspectorMembers span { padding: 3px 6px; border-radius: 12px; color: #55617a; background: #f0f3f8; }
.remove-list h4 { margin: 2px 0 0; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.remove-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--soft-line); }
.remove-item > span { display: flex; flex-direction: column; min-width: 0; }
.remove-item strong { font-size: 10px; }
.remove-item small { overflow: hidden; max-width: 205px; color: var(--muted); font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.remove-item .icon-btn { width: 25px; height: 25px; font-size: 16px; }
.empty-small { margin: 0; color: var(--muted); font-size: 9px; }

@media (max-width: 1350px) {
    :root { --sidebar: 215px; }
    .main-content { padding-inline: 25px; }
    .workflow-editor { grid-template-columns: minmax(690px, 1fr) 280px; }
    .legend { display: none; }
}

/* Advanced free-form workflow builder */
.advanced-builder {
    margin: -12px -15px 0;
}

.builder-topbar {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 11px 11px 0 0;
    background: #fff;
}

.builder-title {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.builder-title .back-link {
    flex: 0 0 auto;
    padding-right: 16px;
    border-right: 1px solid var(--line);
}

.builder-title h1 {
    overflow: hidden;
    max-width: 520px;
    margin: 0;
    color: var(--navy);
    font-size: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.builder-title p {
    overflow: hidden;
    max-width: 560px;
    margin: 1px 0 0;
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.builder-top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.builder-top-actions .secondary-btn {
    min-height: 33px;
    padding-inline: 10px;
    font-size: 10px;
}

.advanced-workspace {
    display: grid;
    grid-template-columns: 225px minmax(690px, 1fr) 310px;
    min-height: 735px;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 11px 11px;
    background: #fff;
    overflow: hidden;
}

.tool-palette,
.property-panel {
    min-width: 0;
    background: #fff;
}

.tool-palette {
    padding: 15px 12px;
    border-right: 1px solid var(--line);
}

.palette-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 2px 9px;
}

.palette-heading span {
    color: var(--navy);
    font-size: 9px;
    letter-spacing: .09em;
    font-weight: 850;
}

.palette-heading small {
    color: #9aa4b7;
    font-size: 8px;
}

.node-tool-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}

.node-tool {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 50px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--ink);
    background: #f7f9fc;
    cursor: pointer;
    text-align: left;
    transition: .16s ease;
}

.node-tool:hover {
    border-color: #cdd6e7;
    background: #fff;
    box-shadow: 0 5px 16px rgba(31, 45, 78, .07);
    transform: translateX(2px);
}

.node-tool > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.node-tool strong {
    color: var(--navy);
    font-size: 10px;
}

.node-tool small {
    overflow: hidden;
    color: var(--muted);
    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tool-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
}

.tool-icon.type-start { color: #0f766e; background: #e7f7f3; }
.tool-icon.type-team { color: #2563eb; background: #eaf0ff; }
.tool-icon.type-task { color: #475569; background: #edf1f5; }
.tool-icon.type-decision { color: #d97706; background: #fff4df; }
.tool-icon.type-idea { color: #7c3aed; background: #f2eaff; }
.tool-icon.type-status { color: #0891b2; background: #e5f8fc; }
.tool-icon.type-end { color: #dc2626; background: #ffebec; }

.blueprint-title {
    margin-top: 18px;
}

.blueprint-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    margin-bottom: 7px;
    border: 1px solid #dce2ee;
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.blueprint-btn:hover {
    border-color: #8da7ff;
    background: #f8faff;
}

.blueprint-btn b {
    color: var(--blue);
    font-size: 10px;
}

.blueprint-btn span {
    color: var(--muted);
    font-size: 8px;
}

.palette-tip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    margin-top: 15px;
    border-left: 3px solid var(--blue);
    color: var(--muted);
    background: var(--blue-soft);
    font-size: 8px;
}

.palette-tip strong {
    color: var(--navy);
    font-size: 9px;
}

.canvas-column {
    min-width: 0;
    background: #f6f8fb;
}

.advanced-canvas-toolbar {
    min-height: 49px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.canvas-search {
    width: min(340px, 45%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: #8c96aa;
    background: #f9fafc;
}

.canvas-search input {
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 10px;
}

.zoom-controls {
    display: flex;
    align-items: center;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    overflow: hidden;
}

.zoom-controls button,
.zoom-controls span {
    height: 100%;
    display: grid;
    place-items: center;
    min-width: 30px;
    padding: 0 7px;
    border: 0;
    border-right: 1px solid var(--line);
    color: var(--ink);
    background: #fff;
    font-size: 9px;
}

.zoom-controls button {
    cursor: pointer;
    font-size: 13px;
}

.zoom-controls button:last-child {
    border-right: 0;
    color: var(--blue);
    font-size: 8px;
    font-weight: 750;
}

.canvas-counts {
    display: flex;
    gap: 9px;
    color: var(--muted);
    font-size: 8px;
}

.canvas-counts span {
    padding-left: 9px;
    border-left: 1px solid var(--line);
}

.connection-mode {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    color: #fff;
    background: #244fc9;
    font-size: 9px;
}

.connection-mode[hidden] { display: none; }
.connection-mode strong { font-size: 10px; }
.connection-mode span { opacity: .75; }
.connection-mode button { margin-left: auto; padding: 4px 9px; border: 1px solid rgba(255,255,255,.38); border-radius: 5px; color: #fff; background: transparent; cursor: pointer; font-size: 8px; }

.advanced-canvas-scroll {
    width: 100%;
    height: 650px;
    overflow: auto;
    background: #f7f8fb;
}

.canvas-sizer {
    position: relative;
    width: 1800px;
    height: 1050px;
}

.workflow-board.advanced {
    width: 2400px;
    height: 1400px;
    transform-origin: 0 0;
    background-color: #f7f8fb;
    background-image:
        linear-gradient(rgba(207, 214, 226, .3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(207, 214, 226, .3) 1px, transparent 1px),
        radial-gradient(#bfc8d8 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px;
}

.advanced-node {
    position: absolute;
    z-index: 5;
    width: 240px;
    min-height: 145px;
    border: 1px solid #d7deea;
    border-top: 3px solid var(--node-color);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(28, 42, 72, .11);
    transition: border-color .15s, box-shadow .15s, opacity .15s;
}

.advanced-node:hover {
    box-shadow: 0 14px 32px rgba(28, 42, 72, .16);
}

.advanced-node.selected {
    border-color: var(--node-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--node-color) 15%, transparent), 0 14px 32px rgba(28,42,72,.16);
}

.advanced-node.dragging {
    z-index: 20;
    box-shadow: 0 22px 48px rgba(28,42,72,.22);
}

.advanced-node.search-dim {
    opacity: .18;
}

.workflow-board.connecting .advanced-node:not(.selected) {
    cursor: crosshair;
}

.workflow-board.connecting .advanced-node:not(.selected):hover {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(46,98,255,.13), 0 14px 32px rgba(28,42,72,.16);
}

.node-connect {
    position: absolute;
    z-index: 8;
    right: -14px;
    top: 55px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: var(--blue);
    box-shadow: 0 3px 9px rgba(38,79,199,.28);
    cursor: pointer;
    font-size: 16px;
}

.node-connect:hover {
    transform: scale(1.08);
    background: var(--blue-dark);
}

.advanced-node-head {
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border-bottom: 1px solid var(--soft-line);
    cursor: grab;
}

.advanced-type-icon {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: var(--node-color);
    background: color-mix(in srgb, var(--node-color) 11%, white);
    font-size: 9px;
    font-weight: 850;
}

.advanced-type-name {
    flex: 1;
    color: var(--node-color);
    font-size: 8px;
    letter-spacing: .07em;
    font-weight: 850;
    text-transform: uppercase;
}

.advanced-node-body {
    width: 100%;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 11px 12px;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.advanced-node-body strong {
    overflow: hidden;
    color: var(--navy);
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.advanced-node-body span {
    height: 31px;
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.advanced-node-foot {
    min-height: 31px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 11px;
    border-top: 1px solid var(--soft-line);
    color: #8b95a8;
    font-size: 8px;
}

.node-id { color: #b1b8c5; }

.advanced-edge {
    fill: none;
    stroke-width: 2;
}

.advanced-edge.dashed { stroke-dasharray: 8 7; }
.advanced-edge.edge-next { stroke: #748198; }
.advanced-edge.edge-positive { stroke: #16a36a; }
.advanced-edge.edge-negative { stroke: #d63b4a; }
.advanced-edge.edge-pending { stroke: #d97706; }
.advanced-edge.edge-custom { stroke: #7c3aed; }
#arrow-next path { fill: #748198; }
#arrow-positive path { fill: #16a36a; }
#arrow-negative path { fill: #d63b4a; }
#arrow-pending path { fill: #d97706; }
#arrow-custom path { fill: #7c3aed; }

.advanced-edge-label rect {
    fill: #fff;
    stroke-width: 1;
}

.advanced-edge-label text {
    font-family: Inter, ui-sans-serif, sans-serif;
    font-size: 9px;
    font-weight: 750;
    text-anchor: middle;
    dominant-baseline: middle;
}

.advanced-edge-label.edge-label-next rect { stroke: #cbd2de; }
.advanced-edge-label.edge-label-next text { fill: #566177; }
.advanced-edge-label.edge-label-positive rect { stroke: #9edbc3; }
.advanced-edge-label.edge-label-positive text { fill: #118052; }
.advanced-edge-label.edge-label-negative rect { stroke: #f1b2ba; }
.advanced-edge-label.edge-label-negative text { fill: #bb2f3f; }
.advanced-edge-label.edge-label-pending rect { stroke: #f1cb8f; }
.advanced-edge-label.edge-label-pending text { fill: #b26305; }
.advanced-edge-label.edge-label-custom rect { stroke: #d2b9f5; }
.advanced-edge-label.edge-label-custom text { fill: #6b2fc2; }

.advanced-empty {
    position: absolute;
    left: 120px;
    top: 100px;
    width: 370px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 25px;
    border: 2px dashed #c8d0de;
    border-radius: 12px;
    color: var(--muted);
    background: rgba(255,255,255,.78);
}

.advanced-empty strong { color: var(--navy); font-size: 16px; }

.advanced-save-status {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    background: #fff;
    font-size: 8px;
}

.advanced-save-status.saving,
.advanced-save-status.connecting { color: var(--amber); }
.advanced-save-status.saved { color: var(--green); }
.advanced-save-status.error { color: var(--red); }

.property-panel {
    border-left: 1px solid var(--line);
}

.property-tabs {
    height: 49px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--line);
}

.property-tabs button {
    position: relative;
    padding: 0 6px;
    border: 0;
    color: var(--muted);
    background: #fff;
    cursor: pointer;
    font-size: 8px;
    font-weight: 750;
}

.property-tabs button::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    background: transparent;
}

.property-tabs button.active { color: var(--blue); }
.property-tabs button.active::after { background: var(--blue); }
.property-tabs span { padding: 1px 5px; border-radius: 9px; background: #edf1f8; font-size: 7px; }

.property-content {
    display: none;
    max-height: 686px;
    padding: 16px;
    overflow: auto;
}

.property-content.active { display: block; }

.nothing-selected {
    padding: 50px 18px;
    color: var(--muted);
    text-align: center;
}

.select-illustration {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin: 0 auto 13px;
    border-radius: 50%;
    color: var(--blue);
    background: var(--blue-soft);
    font-size: 25px;
}

.nothing-selected h3 { margin: 0 0 5px; color: var(--navy); font-size: 14px; }
.nothing-selected p { margin: 0; font-size: 9px; }

.property-form {
    display: grid;
    gap: 12px;
}

.property-form[hidden] { display: none; }
.property-form.visible { display: grid; }
.property-form input,
.property-form select,
.property-form textarea { min-height: 37px; padding: 7px 9px; font-size: 10px; }
.property-form textarea { min-height: 80px; }

.selected-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--soft-line);
}

.selected-heading > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--blue);
    background: var(--blue-soft);
}

.selected-heading > div { display: flex; flex-direction: column; min-width: 0; }
.selected-heading small { color: var(--muted); font-size: 7px; letter-spacing: .08em; }
.selected-heading strong { overflow: hidden; color: var(--navy); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }

.selected-actions {
    display: grid;
    gap: 7px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--line);
}

.selected-actions[hidden] { display: none; }
.selected-actions form { margin: 0; }

.arrow-panel-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
}

.arrow-panel-head h3 { margin: 0; color: var(--navy); font-size: 13px; }
.arrow-panel-head p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }

.arrow-manager-list { display: grid; gap: 7px; }

.arrow-manager-item {
    padding: 10px;
    border: 1px solid var(--line);
    border-left: 3px solid #748198;
    border-radius: 7px;
    background: #fff;
}

.arrow-manager-item.outcome-success,
.arrow-manager-item.outcome-yes,
.arrow-manager-item.outcome-enroll { border-left-color: #16a36a; }
.arrow-manager-item.outcome-failure,
.arrow-manager-item.outcome-no,
.arrow-manager-item.outcome-drop { border-left-color: #d63b4a; }
.arrow-manager-item.outcome-pending { border-left-color: #d97706; }
.arrow-manager-item.outcome-custom { border-left-color: #7c3aed; }

.arrow-route {
    display: grid;
    grid-template-columns: minmax(0,1fr) 15px minmax(0,1fr);
    align-items: center;
    gap: 3px;
}

.arrow-route strong { overflow: hidden; color: var(--navy); font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.arrow-route i { color: #9aa4b6; text-align: center; font-style: normal; }
.arrow-outcome { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; }
.arrow-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin-top: 4px; }
.arrow-actions form { margin: 0; }
.arrow-actions .text-btn { font-size: 8px; }
.empty-arrow-list { padding: 20px; border: 1px dashed #cbd3e0; border-radius: 8px; color: var(--muted); text-align: center; font-size: 9px; }

.modal-note {
    margin: 0;
    padding: 10px;
    border-left: 3px solid var(--blue);
    color: var(--muted);
    background: var(--blue-soft);
    font-size: 10px;
}

.advanced-builder.focus-mode .tool-palette,
.advanced-builder.focus-mode .property-panel { display: none; }
.advanced-builder.focus-mode .advanced-workspace { grid-template-columns: minmax(0, 1fr); }
.advanced-builder.focus-mode .advanced-canvas-scroll { height: 740px; }

@media (max-width: 1450px) {
    .advanced-workspace { grid-template-columns: 205px minmax(650px, 1fr) 285px; }
    .builder-top-actions .secondary-btn:nth-child(2) { display: none; }
    .builder-title h1 { max-width: 360px; }
}

@media print {
    html, body { min-width: 0; background: #fff; }
    .sidebar,
    .builder-topbar,
    .tool-palette,
    .property-panel,
    .advanced-canvas-toolbar,
    .advanced-save-status,
    .connection-mode,
    .toast { display: none !important; }
    .main-content { margin: 0; padding: 0; }
    .advanced-builder { margin: 0; }
    .advanced-workspace { display: block; min-height: 0; border: 0; }
    .advanced-canvas-scroll { height: auto; overflow: visible; }
    .canvas-sizer { width: 100% !important; height: auto !important; }
    .workflow-board.advanced { transform: scale(.47) !important; transform-origin: 0 0; }
}