:root {
    --frm-bg: #ecf0f5;
    --frm-surface: #ffffff;
    --frm-surface-2: #f9fafc;
    --frm-line: #d2d6de;
    --frm-line-strong: #b8c7ce;
    --frm-text: #263238;
    --frm-muted: #6f7f8f;
    --frm-primary: #3c8dbc;
    --frm-nav: #3c8dbc;
    --frm-grid: #605ca8;
    --frm-embed: #00a65a;
    --frm-summary: #f39c12;
    --frm-category-principal: #dd4b39;
    --frm-category-secondary: #f39c12;
    --frm-category-global: #00c0ef;
    --frm-danger: #dd4b39;
    --frm-topbar: #3c8dbc;
    --frm-topbar-hover: #367fa9;
    --frm-soft: rgba(60, 141, 188, .1);
}

body.frm-page.skin-blue,
body.frm-page.skin-blue-light {
    --frm-primary: #3c8dbc;
    --frm-topbar: #3c8dbc;
    --frm-topbar-hover: #367fa9;
    --frm-soft: rgba(60, 141, 188, .1);
}

body.frm-page.skin-green,
body.frm-page.skin-green-light {
    --frm-primary: #00a65a;
    --frm-topbar: #00a65a;
    --frm-topbar-hover: #008d4c;
    --frm-soft: rgba(0, 166, 90, .1);
}

body.frm-page.skin-purple,
body.frm-page.skin-purple-light {
    --frm-primary: #605ca8;
    --frm-topbar: #605ca8;
    --frm-topbar-hover: #555299;
    --frm-soft: rgba(96, 92, 168, .12);
}

body.frm-page.skin-red,
body.frm-page.skin-red-light {
    --frm-primary: #dd4b39;
    --frm-topbar: #dd4b39;
    --frm-topbar-hover: #d73925;
    --frm-soft: rgba(221, 75, 57, .1);
}

body.frm-page.skin-yellow,
body.frm-page.skin-yellow-light {
    --frm-primary: #f39c12;
    --frm-topbar: #f39c12;
    --frm-topbar-hover: #e08e0b;
    --frm-soft: rgba(243, 156, 18, .14);
}

body.frm-page.skin-black,
body.frm-page.skin-black-light {
    --frm-primary: #111111;
    --frm-topbar: #ffffff;
    --frm-topbar-hover: #f9fafc;
    --frm-soft: rgba(0, 0, 0, .06);
}

body.frm-page.skin-sysimple-soft {
    --frm-bg: #f2f6fb;
    --frm-surface: #ffffff;
    --frm-surface-2: #f8fbff;
    --frm-line: rgba(34, 48, 66, .16);
    --frm-line-strong: rgba(34, 48, 66, .28);
    --frm-text: #223042;
    --frm-muted: #5b6f86;
    --frm-primary: #1aa3ff;
    --frm-topbar: #2f5f96;
    --frm-topbar-hover: #254c7a;
    --frm-soft: rgba(26, 163, 255, .12);
}

body.frm-page.skin-sysimple-midnight {
    --frm-bg: #070c14;
    --frm-surface: #10192a;
    --frm-surface-2: #0a1120;
    --frm-line: rgba(255,255,255,.12);
    --frm-line-strong: rgba(255,255,255,.22);
    --frm-text: #eef6ff;
    --frm-muted: #9fb0c4;
    --frm-primary: #00b3ff;
    --frm-topbar: #071c33;
    --frm-topbar-hover: #041225;
    --frm-soft: rgba(0, 179, 255, .14);
}

body.frm-page.skin-sysimple-vs {
    --frm-bg: #1e1e1e;
    --frm-surface: #252526;
    --frm-surface-2: #2d2d30;
    --frm-line: #3c3c3c;
    --frm-line-strong: #4a4a4a;
    --frm-text: #d4d4d4;
    --frm-muted: #a8b0ba;
    --frm-primary: #569cd6;
    --frm-topbar: #252526;
    --frm-topbar-hover: #2d2d30;
    --frm-soft: rgba(86, 156, 214, .16);
}

body.frm-page.skin-blue,
body.frm-page.skin-green,
body.frm-page.skin-purple,
body.frm-page.skin-red,
body.frm-page.skin-yellow {
    --frm-bg: #ecf0f5;
    --frm-surface: #ffffff;
    --frm-surface-2: #f9fafc;
    --frm-line: #d2d6de;
    --frm-line-strong: #b8c7ce;
    --frm-text: #263238;
    --frm-muted: #6f7f8f;
}

* { box-sizing: border-box; }

body.frm-page {
    margin: 0;
    min-height: 100vh;
    background: var(--frm-bg) !important;
    color: var(--frm-text) !important;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}

.frm-shell {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 10px;
    height: 100vh;
    padding: 12px;
}

.frm-topbar,
.frm-toolbar,
.frm-summary article,
.frm-sidebar,
.frm-map-panel,
.frm-detail,
.frm-status {
    border: 1px solid var(--frm-line);
    background: var(--frm-surface);
    border-radius: 3px;
}

.frm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 54px;
    padding: 8px 10px;
    border-top: 0;
    background: linear-gradient(180deg, var(--frm-topbar) 0%, var(--frm-topbar-hover) 100%);
    color: #fff;
}

body.frm-page.skin-black .frm-topbar,
body.frm-page.skin-black-light .frm-topbar {
    background: #ffffff;
    color: #333333;
}

.frm-brand {
    display: inline-grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.frm-brand img { width: 38px; height: 38px; object-fit: contain; }
.frm-brand span { display: grid; gap: 2px; min-width: 0; }
.frm-brand strong { font-size: 17px; line-height: 1.1; }
.frm-brand small { color: currentColor; opacity: .82; font-size: 12px; }

.frm-actions { display: flex; gap: 8px; }
.frm-theme-picker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.45);
    background: rgba(255,255,255,.14);
    color: inherit;
    border-radius: 3px;
    padding: 0 8px;
}
.frm-theme-picker select {
    width: 118px;
    height: 26px;
    border: 0;
    background: transparent;
    color: inherit;
    outline: none;
}
.frm-theme-picker option { color: #333333; }
.frm-actions button,
.frm-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.45);
    background: rgba(255,255,255,.14) !important;
    color: inherit !important;
    border-radius: 3px;
    text-decoration: none;
}
.frm-actions button:hover,
.frm-actions a:hover { background: rgba(0,0,0,.1); color: inherit; }

body.frm-page.skin-black .frm-theme-picker,
body.frm-page.skin-black .frm-actions button,
body.frm-page.skin-black .frm-actions a,
body.frm-page.skin-black-light .frm-theme-picker,
body.frm-page.skin-black-light .frm-actions button,
body.frm-page.skin-black-light .frm-actions a {
    border-color: #eeeeee;
    background: #ffffff;
}

.frm-toolbar {
    display: grid;
    grid-template-columns: 170px 210px 210px minmax(220px, 1fr) 210px;
    gap: 10px;
    padding: 8px;
}

.frm-toolbar label { display: grid; gap: 5px; min-width: 0; }
.frm-toolbar .frm-option {
    align-items: end;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
}
.frm-toolbar .frm-option span { grid-column: 1 / -1; }
.frm-toolbar .frm-option input {
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
}
.frm-toolbar .frm-option b {
    color: var(--frm-text);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}
.frm-toolbar span {
    color: var(--frm-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.frm-toolbar select,
.frm-toolbar input {
    width: 100%;
    min-width: 0;
    height: 34px;
    border: 1px solid var(--frm-line);
    background: var(--frm-surface-2) !important;
    color: var(--frm-text) !important;
    border-radius: 3px;
    padding: 0 10px;
    outline: none;
}
.frm-toolbar .frm-option input {
    min-width: 16px;
    padding: 0;
}

body.frm-page .frm-theme-picker select {
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
}
.frm-toolbar select:focus,
.frm-toolbar input:focus { border-color: var(--frm-primary); }

.frm-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}
.frm-summary article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px;
    border-top: 3px solid var(--frm-primary);
}
.frm-summary i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid color-mix(in srgb, var(--frm-primary) 26%, transparent);
    background: var(--frm-soft);
    color: var(--frm-primary);
    border-radius: 3px;
    font-size: 18px;
}
.frm-summary span { display: grid; gap: 2px; }
.frm-summary strong { font-size: 21px; line-height: 1; }
.frm-summary small { color: var(--frm-muted); font-size: 11px; font-weight: 700; }

.frm-workspace {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 360px;
    gap: 12px;
    min-height: 0;
}

.frm-sidebar,
.frm-map-panel,
.frm-detail {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.frm-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    border-bottom: 1px solid var(--frm-line);
    padding: 9px 11px;
}
.frm-panel-head strong { font-size: 13px; }
.frm-panel-head small { color: var(--frm-muted); font-size: 11px; font-weight: 800; }
.frm-map-tools {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.frm-map-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border: 1px solid var(--frm-line);
    background: var(--frm-surface-2) !important;
    color: var(--frm-text) !important;
    border-radius: 3px;
    padding: 0;
}
.frm-map-tools .frm-move-mode-btn {
    width: auto;
    gap: 6px;
    padding: 0 10px;
    font-weight: 800;
}
.frm-map-tools .frm-move-mode-btn span {
    min-width: 0;
    color: inherit;
}
.frm-map-tools button:hover,
.frm-map-tools button.is-active {
    border-color: var(--frm-primary);
    color: var(--frm-primary) !important;
}
.frm-map-tools span {
    min-width: 44px;
    text-align: center;
    color: var(--frm-muted);
    font-size: 11px;
    font-weight: 800;
}

.frm-group-list,
.frm-link-list {
    display: grid;
    align-content: start;
    gap: 6px;
    overflow: auto;
    padding: 9px;
}

.frm-group {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--frm-line);
    border-left: 3px solid transparent;
    background: var(--frm-surface-2);
    color: var(--frm-text);
    border-radius: 3px;
    padding: 7px 8px;
    text-align: left;
    overflow: hidden;
}
.frm-group.is-active,
.frm-group:hover {
    border-color: color-mix(in srgb, var(--frm-primary) 62%, var(--frm-line));
    border-left-color: var(--frm-primary);
    background: var(--frm-soft);
}
.frm-group.is-status-online {
    border-left-color: var(--frm-embed);
}
.frm-group.is-status-offline {
    border-left-color: var(--frm-danger);
}
.frm-group.is-status-mixed {
    border-left-color: var(--frm-category-secondary);
}
.frm-group.is-status-empty {
    border-left-color: var(--frm-muted);
}
.frm-group.is-status-online > i {
    background: color-mix(in srgb, var(--frm-embed) 14%, transparent);
    color: var(--frm-embed);
}
.frm-group.is-status-offline > i {
    background: color-mix(in srgb, var(--frm-danger) 13%, transparent);
    color: var(--frm-danger);
}
.frm-group.is-status-mixed > i {
    background: color-mix(in srgb, var(--frm-category-secondary) 15%, transparent);
    color: #b76505;
}
.frm-group > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--frm-primary) 12%, transparent);
    color: var(--frm-primary);
    font-size: 14px;
}
.frm-group > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.frm-group strong,
.frm-group small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frm-group strong {
    display: block;
    min-width: 0;
    font-size: 12px;
    line-height: 1.2;
}
.frm-group small {
    display: block;
    min-width: 0;
    color: var(--frm-muted);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
}
.frm-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    border-radius: 12px;
    background: var(--frm-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 0 7px;
    justify-self: end;
}

.frm-map {
    position: relative;
    min-height: 0;
    overflow: auto;
    background:
        linear-gradient(90deg, rgba(24,37,54,.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(24,37,54,.055) 1px, transparent 1px),
        var(--frm-surface-2);
    background-size: 36px 36px;
}

body.frm-page.skin-sysimple-midnight .frm-map,
body.frm-page.skin-sysimple-vs .frm-map {
    background:
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.05) 1px, transparent 1px),
        var(--frm-surface-2);
    background-size: 36px 36px;
}

.frm-map svg {
    display: block;
    min-width: 420px;
    min-height: 320px;
}
.frm-map.is-pan-mode {
    cursor: grab;
}
.frm-map.is-panning {
    cursor: grabbing;
    user-select: none;
}
.frm-map.is-panning svg {
    pointer-events: none;
}

.frm-form-shell {
    fill: var(--frm-surface);
    stroke: var(--frm-line-strong);
    stroke-width: 1.2;
    rx: 4;
}
.frm-form-box.is-category-principal .frm-form-shell {
    stroke: var(--frm-category-principal);
    stroke-width: 2;
    fill: color-mix(in srgb, var(--frm-surface) 93%, var(--frm-category-principal) 7%);
}
.frm-form-box.is-category-secondary .frm-form-shell {
    stroke: var(--frm-category-secondary);
    stroke-width: 2;
    fill: color-mix(in srgb, var(--frm-surface) 92%, var(--frm-category-secondary) 8%);
}
.frm-form-box.is-category-global .frm-form-shell {
    stroke: var(--frm-category-global);
    stroke-width: 2;
    fill: color-mix(in srgb, var(--frm-surface) 93%, var(--frm-category-global) 7%);
}
.frm-form-box.is-offline .frm-form-shell {
    stroke: var(--frm-danger);
    stroke-dasharray: 6 4;
}
.frm-form-box.is-not-started .frm-form-shell,
.frm-form-box.is-expired .frm-form-shell {
    stroke-dasharray: 8 4;
}
.frm-form-box.is-not-started .frm-form-shell {
    fill: color-mix(in srgb, var(--frm-surface) 90%, var(--frm-category-secondary) 10%);
}
.frm-form-box.is-expired .frm-form-shell {
    fill: color-mix(in srgb, var(--frm-surface) 90%, var(--frm-danger) 10%);
}
.frm-form-title {
    fill: var(--frm-text);
    font-size: 14px;
    font-weight: 900;
}
.frm-form-box.is-category-principal .frm-form-title { fill: var(--frm-category-principal); }
.frm-form-box.is-category-secondary .frm-form-title { fill: #b76505; }
.frm-form-box.is-category-global .frm-form-title { fill: #007fa3; }
.frm-form-meta,
.frm-form-empty {
    fill: var(--frm-muted);
    font-size: 10px;
    font-weight: 700;
}
.frm-view-section rect {
    fill: color-mix(in srgb, var(--frm-surface-2) 86%, var(--frm-primary) 14%);
    stroke: color-mix(in srgb, var(--frm-line-strong) 70%, transparent);
    stroke-width: 1;
    rx: 3;
}
.frm-form-box.is-category-principal .frm-view-section rect {
    fill: color-mix(in srgb, var(--frm-surface-2) 90%, var(--frm-category-principal) 10%);
}
.frm-form-box.is-category-secondary .frm-view-section rect {
    fill: color-mix(in srgb, var(--frm-surface-2) 88%, var(--frm-category-secondary) 12%);
}
.frm-form-box.is-category-global .frm-view-section rect {
    fill: color-mix(in srgb, var(--frm-surface-2) 88%, var(--frm-category-global) 12%);
}
.frm-view-section.is-hidden rect {
    fill: color-mix(in srgb, var(--frm-surface-2) 72%, var(--frm-danger) 28%);
    stroke: var(--frm-danger);
    stroke-dasharray: 5 3;
}
.frm-view-section.is-disabled rect {
    fill: color-mix(in srgb, var(--frm-surface-2) 75%, var(--frm-category-secondary) 25%);
    stroke: var(--frm-category-secondary);
    stroke-dasharray: 5 3;
}
.frm-view-section.is-hidden .frm-view-title,
.frm-view-section.is-hidden .frm-view-status {
    fill: var(--frm-danger);
}
.frm-view-section.is-disabled .frm-view-title,
.frm-view-section.is-disabled .frm-view-status {
    fill: #b76505;
}
.frm-view-title {
    fill: var(--frm-text);
    font-size: 10px;
    font-weight: 900;
}
.frm-view-status {
    fill: var(--frm-muted);
    font-size: 9px;
    font-weight: 800;
    text-anchor: end;
}
.frm-view-action {
    cursor: pointer;
}
.frm-view-action rect {
    fill: color-mix(in srgb, var(--frm-surface) 88%, var(--frm-primary) 12%);
    stroke: color-mix(in srgb, var(--frm-line-strong) 70%, transparent);
    rx: 3;
}
.frm-view-action path {
    fill: none;
    stroke: var(--frm-muted);
    stroke-width: 1.2;
    stroke-linecap: round;
}
.frm-view-action:hover rect,
.frm-view-action.is-active rect {
    stroke: var(--frm-primary);
    fill: var(--frm-soft);
}
.frm-view-action:hover path,
.frm-view-action.is-active path {
    stroke: var(--frm-primary);
}
.frm-card-action {
    cursor: pointer;
    opacity: .88;
}
.frm-drag-handle {
    cursor: move;
}
.frm-card-action rect {
    fill: color-mix(in srgb, var(--frm-surface-2) 92%, var(--frm-primary) 8%);
    stroke: color-mix(in srgb, var(--frm-line-strong) 72%, transparent);
    stroke-width: 1;
    rx: 5;
}
.frm-card-action path {
    fill: none;
    stroke: color-mix(in srgb, var(--frm-muted) 76%, var(--frm-primary) 24%);
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.frm-card-action:hover rect,
.frm-card-action.is-active rect,
.frm-form-box.is-dragging .frm-drag-handle rect { stroke: var(--frm-primary); }
.frm-card-action:hover path,
.frm-card-action.is-active path { stroke: var(--frm-primary); }
.frm-drag-handle circle {
    fill: color-mix(in srgb, var(--frm-muted) 62%, var(--frm-primary) 38%);
}
.frm-card-action:hover circle,
.frm-form-box.is-dragging .frm-drag-handle circle { fill: var(--frm-primary); }
.frm-filter-toggle.is-active rect { fill: var(--frm-soft); }
.frm-form-box.is-dragging { opacity: .86; }
.frm-control-item rect {
    fill: var(--frm-surface-2);
    stroke: var(--frm-line);
    stroke-width: 1;
    rx: 3;
}
.frm-control-item {
    cursor: pointer;
}
.frm-control-item.is-plain-field {
    cursor: default;
    opacity: .78;
}
.frm-control-item.is-plain-field rect {
    stroke: var(--frm-line);
    stroke-dasharray: none;
}
.frm-control-item.is-button rect { stroke: var(--frm-nav); }
.frm-control-item.is-dynamic-view rect { stroke: var(--frm-grid); }
.frm-control-item.is-embedded-form rect { stroke: var(--frm-embed); }
.frm-control-item.is-summary-field rect { stroke: var(--frm-summary); }
.frm-control-item.is-field rect { stroke: color-mix(in srgb, var(--frm-line-strong) 76%, transparent); }
.frm-control-item.is-config-danger rect {
    stroke: var(--frm-danger);
    stroke-width: 1.4;
}
.frm-control-item.is-config-warning rect {
    stroke: var(--frm-category-secondary);
    stroke-width: 1.4;
}
.frm-control-item.is-issue rect { stroke: var(--frm-danger); stroke-dasharray: 5 4; }
.frm-control-item.is-draft rect { fill: rgba(217, 119, 6, .08); }
.frm-control-item.is-selected rect {
    stroke-width: 2.2;
    filter: drop-shadow(0 2px 5px rgba(22, 126, 203, .25));
}
.frm-control-item.is-dimmed {
    opacity: .32;
}
.frm-control-anchor {
    fill: var(--frm-surface);
    stroke: var(--frm-primary);
    stroke-width: 2;
}
.frm-control-item.is-button .frm-control-anchor { stroke: var(--frm-nav); }
.frm-control-item.is-dynamic-view .frm-control-anchor { stroke: var(--frm-grid); }
.frm-control-item.is-embedded-form .frm-control-anchor { stroke: var(--frm-embed); }
.frm-control-item.is-summary-field .frm-control-anchor { stroke: var(--frm-summary); }
.frm-control-item.is-issue .frm-control-anchor { stroke: var(--frm-danger); }
.frm-control-item.is-draft .frm-control-anchor { stroke: #d97706; }
.frm-control-icon path,
.frm-control-icon rect {
    fill: none;
    stroke: var(--frm-primary);
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.frm-control-icon.is-button path,
.frm-control-icon.is-button rect { stroke: var(--frm-nav); }
.frm-control-icon.is-dynamic-view path,
.frm-control-icon.is-dynamic-view rect { stroke: var(--frm-grid); }
.frm-control-icon.is-embedded-form path,
.frm-control-icon.is-embedded-form rect { stroke: var(--frm-embed); }
.frm-control-icon.is-summary-field path,
.frm-control-icon.is-summary-field rect { stroke: var(--frm-summary); }
.frm-control-icon.is-field path,
.frm-control-icon.is-field rect { stroke: var(--frm-muted); }
.frm-field-alert path {
    fill: none;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.frm-field-alert circle {
    stroke-width: 0;
}
.frm-field-alert.is-danger path { stroke: var(--frm-danger); }
.frm-field-alert.is-danger circle { fill: var(--frm-danger); }
.frm-field-alert.is-warning path { stroke: var(--frm-category-secondary); }
.frm-field-alert.is-warning circle { fill: var(--frm-category-secondary); }
.frm-control-name {
    fill: var(--frm-text);
    font-size: 11px;
    font-weight: 900;
}
.frm-control-meta {
    fill: var(--frm-muted);
    font-size: 9px;
    font-weight: 700;
}
.frm-control-target {
    fill: var(--frm-embed);
    font-size: 9px;
    font-weight: 900;
}
.frm-embedded-mini rect {
    fill: color-mix(in srgb, var(--frm-surface) 88%, var(--frm-embed) 12%);
    stroke: color-mix(in srgb, var(--frm-embed) 70%, var(--frm-line));
    stroke-width: 1;
    rx: 3;
}
.frm-embedded-title {
    fill: var(--frm-text);
    font-size: 9px;
    font-weight: 900;
}
.frm-embedded-meta {
    fill: var(--frm-embed);
    font-size: 8px;
    font-weight: 800;
}
.frm-embedded-toggle {
    cursor: pointer;
}
.frm-embedded-toggle rect {
    fill: var(--frm-surface);
    stroke: color-mix(in srgb, var(--frm-embed) 58%, var(--frm-line));
    stroke-width: 1;
    rx: 3;
}
.frm-embedded-toggle path {
    fill: none;
    stroke: var(--frm-embed);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.frm-embedded-toggle.is-active rect,
.frm-embedded-toggle:hover rect {
    fill: var(--frm-embed);
}
.frm-embedded-toggle.is-active path,
.frm-embedded-toggle:hover path {
    stroke: #fff;
}

.frm-node rect {
    fill: var(--frm-surface);
    stroke: var(--frm-line-strong);
    stroke-width: 1;
    rx: 3;
}
.frm-node.is-offline rect { stroke: var(--frm-danger); stroke-dasharray: 5 4; }
.frm-node text { fill: var(--frm-text); font-size: 12px; font-weight: 800; }
.frm-node .frm-node-meta { fill: var(--frm-muted); font-size: 10px; font-weight: 600; }
.frm-node circle { fill: var(--frm-primary); }

.frm-edge { fill: none; stroke-width: 2.4; opacity: .78; pointer-events: stroke; cursor: pointer; }
.frm-edge-wrap { pointer-events: auto; }
.frm-edge-wrap .frm-edge,
.frm-edge-wrap .frm-edge-start,
.frm-edge-wrap .frm-edge-end,
.frm-edge-wrap .frm-edge-type {
    pointer-events: auto;
    cursor: pointer;
}
.frm-edge-wrap:hover .frm-edge {
    opacity: 1;
    stroke-width: 3;
}
.frm-edge.is-selected {
    opacity: 1;
    stroke-width: 4.8;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--frm-primary) 48%, transparent));
}
.frm-edge.is-dimmed,
.frm-edge-start.is-dimmed,
.frm-edge-end.is-dimmed,
.frm-edge-type.is-dimmed {
    opacity: .18;
}
.frm-edge.is-button { stroke: var(--frm-nav); }
.frm-edge.is-dynamic-view { stroke: var(--frm-grid); }
.frm-edge.is-embedded-form { stroke: var(--frm-embed); }
.frm-edge.is-summary-field { stroke: var(--frm-summary); }
.frm-edge.is-issue { stroke: var(--frm-danger); stroke-dasharray: 5 5; }
.frm-edge.is-draft { stroke: #d97706; stroke-dasharray: 7 4; }
.frm-edge-start,
.frm-edge-end {
    fill: var(--frm-surface);
    stroke: var(--frm-primary);
    stroke-width: 2.2;
}
.frm-edge-end {
    fill: color-mix(in srgb, var(--frm-surface) 78%, var(--frm-primary) 22%);
    stroke-width: 1.8;
}
.frm-edge-start.is-button,
.frm-edge-end.is-button { stroke: var(--frm-nav); }
.frm-edge-start.is-dynamic-view,
.frm-edge-end.is-dynamic-view { stroke: var(--frm-grid); }
.frm-edge-start.is-embedded-form,
.frm-edge-end.is-embedded-form { stroke: var(--frm-embed); }
.frm-edge-start.is-summary-field,
.frm-edge-end.is-summary-field { stroke: var(--frm-summary); }
.frm-edge-start.is-issue,
.frm-edge-end.is-issue { stroke: var(--frm-danger); }
.frm-edge-start.is-draft,
.frm-edge-end.is-draft { stroke: #d97706; }
.frm-edge-wrap:hover .frm-edge-start,
.frm-edge-wrap:hover .frm-edge-end { transform-box: fill-box; transform-origin: center; transform: scale(1.16); }
.frm-edge-type circle {
    fill: var(--frm-surface);
    stroke: var(--frm-primary);
    stroke-width: 1.4;
}
.frm-edge-type.is-button circle { stroke: var(--frm-nav); }
.frm-edge-type.is-dynamic-view circle { stroke: var(--frm-grid); }
.frm-edge-type.is-embedded-form circle { stroke: var(--frm-embed); }
.frm-edge-type.is-issue circle { stroke: var(--frm-danger); }
.frm-edge-type.is-draft circle { stroke: #d97706; }
.frm-edge-type text {
    fill: var(--frm-text);
    font-size: 10px;
    font-weight: 900;
    text-anchor: middle;
}

.frm-link-card {
    display: grid;
    gap: 6px;
    border: 1px solid var(--frm-line);
    border-left: 4px solid var(--frm-primary);
    background: var(--frm-surface-2);
    border-radius: 3px;
    padding: 9px;
}
.frm-link-card.is-dynamic-view { border-left-color: var(--frm-grid); }
.frm-link-card.is-embedded-form { border-left-color: var(--frm-embed); }
.frm-link-card.is-summary-field { border-left-color: var(--frm-summary); }
.frm-link-card.is-issue { border-left-color: var(--frm-danger); }
.frm-link-card.is-selected {
    border-color: color-mix(in srgb, var(--frm-primary) 60%, var(--frm-line));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--frm-primary) 16%, transparent);
}
.frm-link-card.is-dimmed {
    opacity: .42;
}
.frm-link-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.frm-link-head strong {
    flex: 1 1 170px;
    min-width: 0;
}
.frm-link-type,
.frm-link-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 3px;
    border: 1px solid var(--frm-line);
    background: var(--frm-surface);
    color: var(--frm-text);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}
.frm-link-type i,
.frm-link-state i { font-size: 12px; }
.frm-link-type.is-button { border-color: var(--frm-nav); color: var(--frm-nav); }
.frm-link-type.is-dynamic-view { border-color: var(--frm-grid); color: var(--frm-grid); }
.frm-link-type.is-embedded-form { border-color: var(--frm-embed); color: var(--frm-embed); }
.frm-link-type.is-summary-field { border-color: var(--frm-summary); color: var(--frm-summary); }
.frm-link-state.is-draft {
    border-color: rgba(217, 119, 6, .42);
    background: rgba(217, 119, 6, .08);
    color: #b45309;
}
.frm-link-card strong { color: var(--frm-text); font-size: 12px; line-height: 1.25; }
.frm-link-card span,
.frm-link-card small { color: var(--frm-muted); font-size: 11px; line-height: 1.35; }
.frm-link-card .frm-link-debug {
    color: var(--frm-danger);
    font-family: Consolas, "Courier New", monospace;
    font-size: 10px;
}
.frm-link-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    padding-top: 2px;
}
.frm-link-actions button,
.frm-modal button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--frm-line-strong);
    background: var(--frm-surface);
    color: var(--frm-text);
    border-radius: 4px;
    min-height: 28px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.frm-link-actions button:hover,
.frm-modal button:hover {
    border-color: var(--frm-primary);
    color: var(--frm-primary);
}
.frm-link-actions button:disabled,
.frm-modal button:disabled {
    cursor: not-allowed;
    opacity: .45;
}
.frm-link-actions button:disabled:hover,
.frm-modal button:disabled:hover {
    border-color: var(--frm-line-strong);
    color: var(--frm-text);
}
.frm-link-actions button.is-danger,
.frm-modal button.is-danger {
    border-color: color-mix(in srgb, var(--frm-danger) 55%, var(--frm-line));
    color: var(--frm-danger);
}
.frm-modal button.is-primary {
    border-color: var(--frm-primary);
    background: var(--frm-primary);
    color: #fff;
}

.frm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, .38);
    backdrop-filter: blur(2px);
}
.frm-modal {
    position: fixed;
    z-index: 41;
    top: 50%;
    left: 50%;
    width: min(560px, calc(100vw - 32px));
    transform: translate(-50%, -50%);
    border: 1px solid var(--frm-line-strong);
    border-top: 3px solid var(--frm-primary);
    background: var(--frm-surface);
    color: var(--frm-text);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.frm-modal header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--frm-line);
}
.frm-modal header > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--frm-primary) 35%, var(--frm-line));
    background: var(--frm-soft);
    color: var(--frm-primary);
}
.frm-modal header strong {
    display: block;
    font-size: 18px;
    line-height: 1.1;
}
.frm-modal header small {
    color: var(--frm-muted);
    font-size: 12px;
}
.frm-modal header button {
    width: 30px;
    min-height: 30px;
    padding: 0;
}
.frm-modal-body {
    display: grid;
    gap: 12px;
    padding: 16px;
}
.frm-modal label {
    display: grid;
    gap: 5px;
}
.frm-modal label span,
.frm-editor-config strong {
    color: var(--frm-muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
.frm-modal select {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--frm-line);
    background: var(--frm-surface-2);
    color: var(--frm-text);
    border-radius: 3px;
    padding: 6px 8px;
}
.frm-modal input[type="text"] {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--frm-line);
    background: var(--frm-surface-2);
    color: var(--frm-text);
    border-radius: 3px;
    padding: 6px 8px;
}
.frm-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.frm-editor-switches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.frm-editor-switches label,
.frm-editor-relation-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    border: 1px solid var(--frm-line);
    background: var(--frm-surface-2);
    border-radius: 3px;
    padding: 7px 9px;
    color: var(--frm-text);
    font-size: 12px;
    font-weight: 800;
}
.frm-editor-switches label span {
    color: var(--frm-text);
    font-size: 12px;
    text-transform: none;
}
.frm-editor-relation-toggle b {
    font-size: 12px;
}
.frm-editor-relation {
    display: grid;
    gap: 10px;
    border: 1px solid var(--frm-line);
    border-left: 3px solid var(--frm-primary);
    background: color-mix(in srgb, var(--frm-surface-2) 94%, var(--frm-primary) 6%);
    padding: 10px;
}
.frm-editor-relation.is-disabled {
    opacity: .58;
}
.frm-editor-source {
    display: grid;
    gap: 3px;
    border-left: 3px solid var(--frm-primary);
    background: var(--frm-surface-2);
    padding: 9px 10px;
}
.frm-editor-source b {
    font-size: 13px;
}
.frm-editor-source span {
    color: var(--frm-muted);
    font-size: 12px;
}
.frm-editor-config {
    display: grid;
    gap: 5px;
}
.frm-editor-config code {
    display: block;
    overflow: auto;
    border: 1px solid var(--frm-line);
    background: var(--frm-surface-2);
    color: var(--frm-text);
    border-radius: 3px;
    padding: 8px;
    font-size: 11px;
}
.frm-editor-error {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    border: 1px solid color-mix(in srgb, var(--frm-danger) 45%, var(--frm-line));
    background: color-mix(in srgb, var(--frm-surface) 90%, var(--frm-danger) 10%);
    color: var(--frm-danger);
    padding: 8px 9px;
    font-size: 12px;
    font-weight: 700;
}
.frm-modal footer {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--frm-line);
    background: var(--frm-surface-2);
}

.frm-empty {
    display: grid;
    place-items: center;
    min-height: 260px;
    color: var(--frm-muted);
    text-align: center;
    padding: 20px;
}
.frm-empty i { color: var(--frm-primary); font-size: 28px; margin-bottom: 8px; }
.frm-status {
    display: none;
    padding: 9px 11px;
    color: var(--frm-muted);
    font-size: 12px;
}
.frm-status.is-visible { display: block; }
.frm-status.is-error { border-color: rgba(194,65,12,.35); background: rgba(194,65,12,.08); color: var(--frm-danger); }

.frm-workspace { grid-template-columns: 230px minmax(0, 1fr) 330px; }
.frm-map-panel { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.frm-map-panel > .frm-panel-head { flex-wrap: wrap; }
.frm-map-tools { flex-wrap: wrap; }
.frm-map-tools .frm-segment { display: inline-flex; margin-right: 8px; }
.frm-map-tools .frm-segment button { width: auto; gap: 6px; padding: 0 9px; border-radius: 0; min-height: 32px; font-size: 12px; }
.frm-segment button[aria-pressed="true"] { background: var(--frm-soft) !important; border-color: var(--frm-primary); color: var(--frm-primary) !important; }
.frm-context-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--frm-line); background: var(--frm-surface); }
.frm-context-bar label { display: flex; flex: 1 1 180px; min-width: 0; align-items: center; gap: 8px; margin: 0; }
.frm-context-bar label i { color: var(--frm-primary); }
.frm-context-bar select { min-width: 0; max-width: 100%; height: 32px; background: var(--frm-surface-2); color: var(--frm-text); border: 1px solid var(--frm-line); padding: 0 8px; font-size: 12px; }
.frm-context-bar label select { width: 100%; }
.frm-context-bar button { width: 32px; height: 32px; background: var(--frm-surface-2); color: var(--frm-text); border: 1px solid var(--frm-line); }
.frm-context-bar button[hidden] { display: none; }
.frm-context-bar select:disabled { opacity: .55; }
.frm-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 12px; border-top: 1px solid var(--frm-line); background: var(--frm-surface); font-size: 12px; }
.frm-legend span { display: inline-flex; gap: 6px; align-items: center; }
.frm-legend .is-button { color: var(--frm-nav); }
.frm-legend .is-dynamic-view { color: var(--frm-grid); }
.frm-legend .is-embedded-form { color: var(--frm-embed); }
.frm-legend .is-summary-field { color: var(--frm-summary); }
body[data-theme="dark"] { --frm-nav: #68b9ed; --frm-grid: #b1a6ee; --frm-embed: #43ce8c; --frm-summary: #ffbd55; }
.frm-overview-counts { font-size: 13px; fill: var(--frm-text); font-weight: 600; }
.frm-overview-role { font-size: 10px; fill: var(--frm-primary); font-weight: 800; }
body.frm-page .frm-map-tools button[aria-pressed="true"] { background: var(--frm-soft) !important; border-color: var(--frm-primary) !important; color: var(--frm-primary) !important; }
body[data-theme="dark"] .frm-form-box.is-category-global .frm-form-title { fill: var(--frm-category-global); }
body[data-theme="dark"] .frm-form-box.is-category-secondary .frm-form-title { fill: var(--frm-category-secondary); }
.frm-view-section.is-path-target > rect { stroke: var(--frm-primary); stroke-width: 3; }
.frm-form-box.is-path-muted { opacity: .25; }
.frm-form-box.is-path-source .frm-form-shell,
.frm-form-box.is-path-target .frm-form-shell { stroke-width: 3.5; }
.frm-control-action { font-size: 11px; fill: var(--frm-text); }
.frm-edge-hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: pointer; }
.frm-edge { stroke-width: 2; opacity: .9; }
.frm-edge-type rect { fill: var(--frm-surface); stroke: var(--frm-line-strong); stroke-width: 1.2; }
.frm-edge-type.is-button rect { stroke: var(--frm-nav); }
.frm-edge-type.is-dynamic-view rect { stroke: var(--frm-grid); }
.frm-edge-type.is-embedded-form rect { stroke: var(--frm-embed); }
.frm-edge-type.is-summary-field rect { stroke: var(--frm-summary); }
.frm-edge-type.is-issue rect { stroke: var(--frm-danger); }
.frm-edge-type text { font-size: 11px; font-weight: 700; }
.frm-link-card { cursor: pointer; gap: 8px; }
.frm-link-card:focus-visible, .frm-page button:focus-visible, .frm-page select:focus-visible { outline: 2px solid var(--frm-primary); outline-offset: 2px; }
.frm-journey-stop { display: grid; gap: 3px; border-left: 2px solid var(--frm-line-strong); padding-left: 10px; min-width: 0; }
.frm-journey-stop > small { font-size: 10px; text-transform: uppercase; }
.frm-journey-stop > strong { font-size: 13px; }
.frm-journey-action { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 5px 0; }
.frm-journey-action > i { color: var(--frm-primary); align-self: center; font-size: 18px; }
.frm-journey-action > div { display: grid; gap: 3px; }
.frm-journey-action code { font-family: inherit; font-size: 12px; background: var(--frm-soft); color: var(--frm-text); padding: 3px 5px; }
.frm-link-card strong, .frm-link-card span, .frm-link-card code, .frm-link-card small { overflow-wrap: anywhere; }
.frm-link-actions button { width: 32px; min-height: 32px; padding: 0; font-size: 14px; }
.frm-group-list, .frm-link-list { align-content: start; }

@media (max-width: 1120px) {
    .frm-shell { height: auto; min-height: 100vh; }
    .frm-workspace { grid-template-columns: 240px minmax(0, 1fr); }
    .frm-sidebar, .frm-map-panel { height: 680px; }
    .frm-detail { grid-column: 1 / -1; height: 400px; }
    .frm-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .frm-shell { height: auto; min-height: 100vh; }
    .frm-toolbar,
    .frm-summary,
    .frm-workspace { grid-template-columns: 1fr; }
    .frm-sidebar { height: 190px; }
    .frm-map-panel { height: 680px; }
    .frm-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .frm-map svg { min-width: 0; min-height: 0; }
    .frm-map-tools { margin-left: 0; }
    .frm-map-tools .frm-segment { width: 100%; margin: 0 0 4px; }
    .frm-topbar { flex-wrap: wrap; }
    .frm-summary article { grid-template-columns: 1fr; gap: 6px; }
    .frm-summary i { display: none; }
    .frm-editor-grid,
    .frm-editor-switches { grid-template-columns: 1fr; }
    .frm-modal footer { grid-template-columns: 1fr; }
}