* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  padding: 10px 14px;
  color: white;
  background: var(--green-dark);
  border-radius: 8px;
}
.skip-link:focus { transform: translateY(0); }

.button, .tool-button, .icon-button, .zoom-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0 13px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.button:hover:not(:disabled), .tool-button:hover:not(:disabled), .icon-button:hover:not(:disabled) { transform: translateY(-1px); }
.button:focus-visible, .tool-button:focus-visible, .icon-button:focus-visible, .zoom-value:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(30, 106, 85, .22); outline-offset: 1px; }
.button:disabled, .tool-button:disabled, .icon-button:disabled { opacity: .38; cursor: default; transform: none; }
.button svg, .tool-button svg, .icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button-primary { color: white; background: var(--green); border-color: var(--green); box-shadow: 0 8px 20px rgba(30, 106, 85, .16); }
.button-primary:hover:not(:disabled) { background: var(--green-dark); }
.button-secondary { color: var(--green-dark); background: var(--white); border-color: var(--line); }
.button-quiet { color: var(--ink-soft); background: transparent; border-color: var(--line); }

.editor-page { height: 100vh; overflow: hidden; background: var(--editor-bg); }
.editor-header { position: relative; z-index: 20; background: rgba(255, 254, 250, .97); border-bottom: 1px solid var(--line); box-shadow: 0 3px 18px rgba(24, 55, 45, .06); }
.editor-header-main { height: 68px; display: flex; align-items: center; gap: 16px; padding: 0 18px; }
.editor-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 850; letter-spacing: -.03em; }
.editor-brand svg { width: 30px; height: 30px; fill: none; stroke: var(--green); stroke-width: 2; }
.header-separator { align-self: stretch; width: 1px; margin: 14px 0; background: var(--line); }
.project-identity { min-width: 0; flex: 1; }
.project-title-line { display: flex; align-items: center; gap: 9px; }
.project-title-line h1 { margin: 0; overflow: hidden; color: var(--ink); font-size: 16px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.project-meta { display: flex; gap: 12px; align-items: center; margin-top: 4px; color: var(--muted); font-size: 11px; }
.release-status { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--green-dark); }
.view-badge { padding: 3px 7px; color: var(--green-dark); background: var(--green-light); border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.save-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.save-status i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6a1; }
.save-status[data-state="saved"] i { background: var(--green); }
.save-status[data-state="pending"] i, .save-status[data-state="saving"] i { background: var(--amber); }
.save-status[data-state="error"] i, .save-status[data-state="conflict"] i { background: var(--danger); }
.save-status[data-state="saving"] i { animation: pulse 1s infinite alternate; }
@keyframes pulse { to { opacity: .25; } }
.header-actions { display: flex; align-items: center; gap: 8px; }
#validationBtn[data-state="success"] { color: var(--green-dark); background: var(--green-light); border-color: transparent; }
#validationBtn[data-state="warning"] { color: #795015; background: #f8e7c8; border-color: transparent; }
#validationBtn[data-state="error"] { color: #7f3027; background: var(--danger-light); border-color: transparent; }

.editor-toolbar { min-height: 50px; display: flex; align-items: center; gap: 8px; overflow: visible; padding: 6px 18px; border-top: 1px solid rgba(217, 222, 216, .7); }
.toolbar-group { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; padding-right: 10px; border-right: 1px solid var(--line); }
.toolbar-group:last-child { border-right: 0; padding-right: 0; }
.toolbar-spacer { flex: 1; }
.editor-toolbar .tool-button, .editor-toolbar .icon-button, .editor-toolbar .zoom-value { min-height: 34px; border-radius: 7px; }
.icon-button { width: 36px; padding: 0; color: var(--ink-soft); background: transparent; border-color: transparent; }
.icon-button span { font-size: 22px; font-weight: 500; }
.tool-button { color: var(--ink-soft); background: transparent; border-color: transparent; }
.tool-button:hover:not(:disabled) { color: var(--green-dark); background: var(--green-light); }
.tool-button[aria-pressed="true"] { color: white; background: var(--green); }
.tool-danger:hover:not(:disabled) { color: #7f3027; background: var(--danger-light); }
.zoom-value { min-width: 60px; padding: 0 8px; color: var(--muted); background: transparent; }
.history-kind-badge { padding: 4px 7px; color: var(--green-dark); background: var(--green-light); border-radius: 999px; font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.history-kind-badge[data-kind="layout"] { color: var(--amber); background: var(--paper-deep); }
.connect-hint { padding: 7px 11px; color: var(--green-dark); background: var(--green-light); border-radius: 8px; font-size: 12px; font-weight: 700; }
.toolbar-more { position: relative; flex: 0 0 auto; }
.toolbar-more summary { display: grid; place-items: center; list-style: none; font-size: 15px; letter-spacing: 1px; cursor: pointer; }
.toolbar-more summary::-webkit-details-marker { display: none; }
.toolbar-more[open] summary { color: white; background: var(--green); }
.toolbar-menu { position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; width: 240px; max-height: min(620px, calc(100vh - 140px)); overflow-y: auto; padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 45px rgba(18, 42, 34, .18); }
.toolbar-menu p { margin: 8px 9px 4px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.toolbar-menu .tool-button { width: 100%; justify-content: flex-start; padding-inline: 9px; font-weight: 650; }
.toolbar-menu .tool-button[aria-pressed="true"] { color: var(--green-dark); background: var(--green-light); }

.editor-workspace { height: calc(100vh - 119px); display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.canvas-shell { position: relative; min-width: 0; overflow: hidden; background: var(--canvas-bg); }
#canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
#canvas:active { cursor: grabbing; }
#dotGrid circle { fill: var(--canvas-grid); opacity: .72; }
#arrowHead path { fill: var(--route-stroke); stroke: none; }

.state-node { cursor: pointer; }
.state-hit { fill: transparent; stroke: none; }
.state-node .state-shape, .route-vertex { fill: var(--node-fill); stroke: var(--node-stroke); stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.state-node:hover .state-shape { fill: var(--green-light); stroke: var(--green); stroke-width: 2.2; }
.state-node.is-selected .state-shape { fill: var(--green-light); stroke: var(--green); stroke-width: 3; }
.state-unresolved .state-shape { stroke: var(--danger); stroke-dasharray: 3 2; }
.connection-handle { cursor: crosshair; }
.connection-handle-hit { fill: transparent; stroke: none; }
.connection-handle-dot { fill: var(--green); stroke: var(--white); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.connection-handle path { fill: none; stroke: white; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.connection-handle:hover .connection-handle-dot { fill: var(--green-dark); }

.transition-line { fill: none; stroke: var(--route-stroke); stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.connector-line { stroke: var(--route-stroke); stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.transition-line.is-connector { opacity: 0; }
.arc-preview { fill: none; stroke: var(--green); stroke-width: 1.7; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.arc-preview-connector { stroke: var(--green); stroke-width: 1.7; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.merge-target { fill: color-mix(in srgb, var(--green-light) 74%, transparent); stroke: var(--green); stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.transition.is-cycle:not(.is-selected) .transition-line { stroke: var(--cycle-stroke); }
.transition.is-cycle-exit .route-vertex { stroke: var(--amber); }
.route-vertex { pointer-events: none; }
.transition-hit { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; }
.transition:hover .transition-line:not(.is-connector), .transition.is-selected .transition-line:not(.is-connector) { stroke: var(--green); stroke-width: 2.5; }
.transition:hover .route-vertex, .transition.is-selected .route-vertex { stroke: var(--green); }
.transition-labels { pointer-events: none; }
.transition-kind, .transition-label text { fill: var(--ink); font: 600 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; paint-order: stroke; stroke: var(--canvas-bg); stroke-width: 4px; stroke-linejoin: round; }
.transition-condition text { font-style: italic; }
.route-handle { fill: var(--white); stroke: var(--green); stroke-width: 2.5; vector-effect: non-scaling-stroke; cursor: move; }
.alignment-guides { pointer-events: none; }
.alignment-guides line { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }

.properties-panel { min-width: 0; overflow: auto; background: var(--white); border-left: 1px solid var(--line); }
.panel-header { position: sticky; z-index: 2; top: 0; padding: 22px 22px 18px; background: rgba(255, 254, 250, .96); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.panel-header p { margin: 0 0 6px; color: var(--green); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.panel-header h2 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.02em; }
.panel-header span { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.panel-content { padding: 20px 22px 40px; }
.panel-loading, .fatal-error { margin: 28px; color: var(--muted); }
.fatal-error strong { display: block; color: var(--danger); font-size: 18px; }
.fatal-error a { color: var(--green); }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field > span, .field-group-title { margin: 0; color: var(--ink-soft); font-size: 12px; font-weight: 750; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 10px 11px;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid #ccd5cf;
  border-radius: 8px;
  line-height: 1.4;
}
.check-field { display: flex; align-items: center; gap: 9px; margin: -3px 0 17px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.check-field input { width: 17px; height: 17px; accent-color: var(--green); }
.field textarea { resize: vertical; min-height: 72px; }
.field input:disabled, .field textarea:disabled, .field select:disabled { color: var(--ink-soft); background: #f1f3ef; }
.field-separator { height: 1px; margin: 21px 0; background: var(--line); }
.technical-id { margin: 24px 0 0; overflow-wrap: anywhere; color: #96a39e; font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.panel-summary { margin: 22px 0 0; border-top: 1px solid var(--line); }
.panel-summary div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.panel-summary dt { color: var(--muted); }
.panel-summary dd { margin: 0; font-weight: 750; }

.actions-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin: 24px 0 12px; }
.actions-heading p { margin: 0; font-size: 13px; font-weight: 800; }
.actions-heading span { color: var(--muted); font-size: 11px; }
.actions-heading .button { min-height: 32px; padding: 0 9px; font-size: 11px; }
.actions-list { display: grid; gap: 11px; }
.action-card { padding: 13px; background: #f5f7f3; border: 1px solid var(--line); border-radius: 10px; }
.action-card .field { margin-bottom: 10px; }
.action-card .field:last-child { margin-bottom: 0; }
.action-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 11px; }
.action-card-head div { display: flex; gap: 3px; }
.action-card-head button { width: 25px; height: 25px; padding: 0; color: var(--muted); background: var(--white); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.action-card-head button:disabled { opacity: .3; cursor: default; }
.empty-list { margin: 0; padding: 16px; color: var(--muted); background: #f5f7f3; border-radius: 9px; font-size: 12px; text-align: center; }
.geometry-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 12px; }
.geometry-actions .button { min-height: 32px; padding: 0 9px; font-size: 11px; }
.route-points-list { display: grid; gap: 5px; margin-bottom: 14px; }
.route-point-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; color: var(--muted); background: var(--paper-deep); border-radius: 7px; font: 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; }
.route-point-row button { width: 24px; height: 24px; padding: 0; color: var(--danger); background: transparent; border: 0; font-size: 18px; cursor: pointer; }
.offset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 9px; }
.alternatives-heading, .transition-order-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.alternatives-heading p { margin: 0 0 3px; color: var(--ink); font-size: 13px; font-weight: 800; }
.alternatives-heading span, .transition-order-controls span { display: block; color: var(--muted); font-size: 10px; }
.alternatives-heading > strong { display: grid; min-width: 28px; height: 28px; place-items: center; color: var(--green-dark); background: var(--green-light); border-radius: 50%; font-size: 12px; }
.alternatives-list { display: grid; gap: 7px; }
.alternative-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 8px 9px 11px; background: var(--paper-deep); border: 1px solid transparent; border-radius: 8px; }
.alternative-row[draggable="true"] { cursor: grab; }
.alternative-row.is-dragging { opacity: .45; }
.alternative-row.is-fallback { border-color: var(--line); }
.alternative-row strong { display: block; color: var(--ink); font-size: 11px; }
.alternative-row span { display: block; max-width: 150px; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.alternative-actions { display: flex; flex: 0 0 auto; gap: 2px; }
.alternative-actions button, .transition-order-controls button { width: 26px; height: 26px; padding: 0; color: var(--ink-soft); background: var(--white); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.alternative-actions button[data-action="remove"] { color: var(--danger); }
.alternative-actions button:disabled, .transition-order-controls button:disabled { opacity: .28; cursor: default; }
.transition-order-controls { padding: 10px 11px; background: var(--paper-deep); border-radius: 8px; }
.transition-order-controls strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 12px; }
.transition-order-controls > div:last-child { display: flex; gap: 4px; }

:root[data-theme="dark"] .editor-header,
:root[data-theme="dark"] .panel-header { background: rgba(23, 35, 30, .97); }
:root[data-theme="dark"] .toolbar-menu { box-shadow: 0 18px 45px rgba(0, 0, 0, .42); }
@media print {
  .state-shape, .route-vertex, .transition-line, .connector-line { stroke: #000 !important; }
  .state-shape, .route-vertex { fill: #fff !important; }
  .state-unresolved .state-shape { stroke-dasharray: 3 2 !important; }
  .transition-label text, .transition-kind { fill: #000 !important; stroke: #fff !important; }
}

.app-dialog { width: min(680px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); padding: 0; color: var(--ink); background: transparent; border: 0; }
.app-dialog::backdrop { background: rgba(15, 34, 28, .46); backdrop-filter: blur(3px); }
.dialog-card { display: flex; max-height: inherit; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid rgba(255, 255, 255, .5); border-radius: 16px; box-shadow: 0 30px 90px rgba(12, 34, 27, .27); }
.dialog-card > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.dialog-card > header p { margin: 0 0 5px; color: var(--green); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.dialog-card > header h2 { margin: 0; font-size: 21px; }
.dialog-close { width: 34px; height: 34px; padding: 0; color: var(--muted); background: transparent; border: 0; font-size: 26px; cursor: pointer; }
.dialog-body { overflow: auto; padding: 22px 24px; color: var(--ink-soft); line-height: 1.55; }
.dialog-body > p:first-child { margin-top: 0; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 15px 24px; background: #f5f7f3; border-top: 1px solid var(--line); }
.diagnostic-list { display: grid; gap: 9px; margin: 17px 0 0; padding: 0; list-style: none; }
.diagnostic-list li { display: grid; grid-template-columns: auto 1fr; gap: 4px 9px; padding: 11px 12px; background: #f5f7f3; border-left: 3px solid var(--amber); border-radius: 7px; }
.diagnostic-list li[data-severity="error"] { border-left-color: var(--danger); }
.diagnostic-list code { color: var(--ink); font-size: 10px; font-weight: 800; }
.diagnostic-list span { font-size: 12px; }
.diagnostic-list small { grid-column: 2; overflow-wrap: anywhere; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }

.toast-region { position: fixed; z-index: 100; right: 18px; bottom: 18px; display: grid; gap: 8px; width: min(370px, calc(100vw - 36px)); }
.toast { padding: 12px 14px; color: white; background: #344b43; border-radius: 9px; box-shadow: 0 12px 35px rgba(18, 42, 34, .22); font-size: 12px; line-height: 1.4; }
.toast-success { background: var(--green-dark); }
.toast-warning { color: #50350d; background: #f1cc89; }
.toast-danger { background: #8b4137; }

.is-readonly .edit-only { display: none !important; }
.view-only { display: none !important; }
.is-readonly .view-only { display: inline-flex !important; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 15% 15%, #dcebe2, transparent 36%), var(--paper); }
.login-card { width: min(430px, 100%); padding: 36px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.login-card .editor-brand { width: max-content; margin-bottom: 32px; }
.login-kicker { margin: 0 0 8px; color: var(--green); font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.login-card h1 { margin: 0 0 10px; font-size: 30px; letter-spacing: -.04em; }
.login-message { margin: 0 0 25px; color: var(--muted); line-height: 1.55; }
.login-error { margin: 12px 0; color: var(--danger); font-size: 12px; }
.login-submit { width: 100%; margin-top: 6px; }

@media (max-width: 980px) {
  .editor-workspace { grid-template-columns: minmax(0, 1fr) 300px; }
  .tool-button span, .header-actions .button span { display: none; }
  .project-title-line h1 { max-width: 260px; }
}

@media (max-width: 760px) {
  .editor-header-main { gap: 9px; padding: 0 10px; }
  .editor-brand span, .header-separator, #validationBtn { display: none; }
  .editor-toolbar { padding-inline: 10px; }
  .editor-workspace { grid-template-columns: 1fr; }
  .properties-panel { position: absolute; z-index: 15; right: 0; bottom: 0; width: min(340px, 88vw); height: calc(100vh - 119px); box-shadow: -10px 0 35px rgba(20, 48, 39, .12); }
}

@media (max-width: 520px) {
  .editor-toolbar { gap: 4px; padding-inline: 6px; }
  .toolbar-group { padding-right: 4px; }
  #zoomOutBtn, #zoomResetBtn, #zoomInBtn, .history-kind-badge { display: none; }
}