* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--ls-text); background: var(--ls-bg); font-size: 14px; letter-spacing: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 2px; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: 24px; line-height: 32px; }
h2 { margin-bottom: 6px; font-size: 18px; line-height: 26px; }
h3 { margin-bottom: 5px; font-size: 15px; line-height: 22px; }
p { line-height: 1.55; }

.app-shell { display: grid; grid-template-columns: var(--ls-sidebar-current) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .18s ease; }
.app-shell.sidebar-collapsed { --ls-sidebar-current: 64px; }
.app-shell.sidebar-collapsed.sidebar-hovered { --ls-sidebar-current: var(--ls-sidebar-width); }
.sidebar { position: sticky; top: 0; z-index: 30; display: flex; flex-direction: column; min-width: 0; width: var(--ls-sidebar-current); height: 100vh; overflow: hidden; color: #f3f8f6; background: var(--ls-nav); border-right: 1px solid rgba(255,255,255,.08); transition: width .18s ease; }
.sidebar-resizer { position: absolute; top: 0; right: -3px; z-index: 31; width: 6px; height: 100vh; cursor: col-resize; background: transparent; }
.sidebar-resizer:hover, body.resizing-sidebar .sidebar-resizer { background: #8fc8ba; }
.app-shell.sidebar-collapsed:not(.sidebar-hovered) .sidebar-resizer { pointer-events: none; opacity: 0; }
.brand { display: grid; grid-template-columns: 42px minmax(0,1fr) 32px; gap: 10px; align-items: center; min-height: 74px; padding: 14px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; color: var(--ls-nav); background: #d9ece6; border-radius: 8px; font-size: 22px; font-weight: 800; }
.brand-copy strong, .brand-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy strong { font-size: 16px; }
.brand-copy small { margin-top: 3px; color: #b8d1cb; font-size: 11px; font-weight: 700; }
.sidebar .icon-button { color: #d7e5e1; background: transparent; border-color: rgba(255,255,255,.16); }
.sidebar .icon-button:hover { background: rgba(255,255,255,.08); }
.task-context { margin: 12px 12px 6px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(255,255,255,.055); }
.task-context small, .task-context span { display: block; color: #b9cec8; }
.task-context strong { display: block; margin: 4px 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-context span { font-size: 12px; }
.nav { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 14px; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-entry { margin: 2px 0; }
.nav-button { display: grid; grid-template-columns: 34px minmax(0,1fr) 22px; align-items: center; width: 100%; min-height: 42px; padding: 5px 8px; color: #e6f0ed; text-align: left; background: transparent; border: 0; border-radius: 7px; }
.nav-button:hover, .nav-button.active { color: #fff; background: var(--ls-nav-hover); }
.nav-button.active { box-shadow: inset 3px 0 #8ed0c0; }
.nav-icon { display: grid; width: 30px; height: 30px; place-items: center; color: #b6cec8; font-size: 14px; font-weight: 700; }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-caret { color: #9fbab3; text-align: center; transition: transform .16s ease; }
.nav-entry.open > .nav-button .nav-caret { transform: rotate(90deg); }
.nav-children { display: none; margin: 2px 0 5px 34px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.13); }
.nav-entry.open > .nav-children { display: grid; }
.nav-child { min-height: 36px; padding: 6px 9px; color: #bdd1cc; text-align: left; background: transparent; border: 0; border-radius: 6px; }
.nav-child:hover, .nav-child.active { color: #fff; background: rgba(255,255,255,.09); }
.nav-child.active { font-weight: 700; }
.profile { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: center; min-height: 68px; padding: 11px 16px; border-top: 1px solid rgba(255,255,255,.1); }
.avatar { display: grid; width: 38px; height: 38px; place-items: center; color: var(--ls-nav); background: #d9ece6; border-radius: 50%; font-weight: 800; }
.profile strong, .profile small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile small { color: #a9c5be; font-size: 11px; }
.app-shell.sidebar-collapsed:not(.sidebar-hovered) .brand { grid-template-columns: 42px; justify-content: center; padding-inline: 11px; }
.app-shell.sidebar-collapsed:not(.sidebar-hovered) .brand-copy,
.app-shell.sidebar-collapsed:not(.sidebar-hovered) .sidebar-pin,
.app-shell.sidebar-collapsed:not(.sidebar-hovered) .task-context,
.app-shell.sidebar-collapsed:not(.sidebar-hovered) .nav-label,
.app-shell.sidebar-collapsed:not(.sidebar-hovered) .nav-caret,
.app-shell.sidebar-collapsed:not(.sidebar-hovered) .nav-children,
.app-shell.sidebar-collapsed:not(.sidebar-hovered) .profile span:not(.avatar) { display: none; }
.app-shell.sidebar-collapsed:not(.sidebar-hovered) .nav { padding-inline: 9px; }
.app-shell.sidebar-collapsed:not(.sidebar-hovered) .nav-button { grid-template-columns: 1fr; padding-inline: 7px; }
.app-shell.sidebar-collapsed:not(.sidebar-hovered) .profile { grid-template-columns: 38px; justify-content: center; padding-inline: 13px; }

.main-area { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 24; display: flex; min-height: var(--ls-topbar-height); align-items: center; justify-content: space-between; gap: 14px; padding: 9px 20px; background: rgba(255,255,255,.98); border-bottom: 1px solid var(--ls-border); }
.mobile-nav-button { display: none; }
.breadcrumb { min-width: 0; color: var(--ls-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions, .page-actions, .toolbar-actions, .inline-actions, .filter-fields, .bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.compact-field { display: flex; gap: 7px; align-items: center; }
.compact-field span { color: var(--ls-muted); font-size: 12px; }
.compact-field select { min-width: 150px; height: 34px; padding: 0 28px 0 9px; background: #fff; border: 1px solid var(--ls-border); border-radius: 6px; }
.notification-button { position: relative; }
.notification-count { position: absolute; top: -5px; right: -5px; display: grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; color: #fff; background: var(--ls-danger); border: 2px solid #fff; border-radius: 999px; font-size: 10px; }
.notification-count:empty, .notification-count[data-count="0"] { display: none; }

.workspace-tabs { position: sticky; top: var(--ls-topbar-height); z-index: 22; display: flex; height: var(--ls-tabs-height); gap: 2px; align-items: end; overflow-x: auto; padding: 6px 14px 0; background: #edf2f0; border-bottom: 1px solid var(--ls-border); scrollbar-width: thin; }
.workspace-tab { display: flex; flex: 0 0 auto; align-items: center; min-width: 112px; max-width: 210px; height: 36px; background: #e5ebe8; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; }
.workspace-tab.active { color: var(--ls-primary); background: #fff; border-color: var(--ls-border); }
.workspace-tab-label { min-width: 0; flex: 1; overflow: hidden; padding: 0 10px; color: inherit; text-overflow: ellipsis; white-space: nowrap; background: transparent; border: 0; text-align: left; }
.workspace-tab-close { width: 28px; height: 28px; color: var(--ls-muted); background: transparent; border: 0; border-radius: 4px; }
.workspace-tab-close:hover { color: var(--ls-danger); background: var(--ls-danger-soft); }

.workspace { min-width: 0; padding: 18px 20px 30px; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.page-header h1 { margin-bottom: 0; }
.page-actions { justify-content: flex-end; }
.page-path { margin-bottom: 4px; color: var(--ls-primary); font-size: 12px; font-weight: 700; }
.button, .icon-button, .filter-chip, .tab-button { min-height: 34px; border: 1px solid var(--ls-border); border-radius: 6px; background: #fff; }
.button { padding: 6px 12px; color: var(--ls-text); white-space: nowrap; }
.button:hover, .icon-button:hover { color: var(--ls-primary); border-color: var(--ls-primary); }
.button.primary { color: #fff; background: var(--ls-primary); border-color: var(--ls-primary); }
.button.primary:hover { background: var(--ls-primary-hover); }
.button.danger { color: var(--ls-danger); border-color: #efbcbc; }
.button.small { min-height: 28px; padding: 3px 8px; font-size: 12px; }
.icon-button { display: inline-grid; width: 34px; padding: 0; place-items: center; color: var(--ls-muted); }
.record-link { min-height: auto; padding: 0; color: var(--ls-accent); text-align: left; background: transparent; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.record-link:hover { color: #204788; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(150px,1fr)); gap: 10px; margin-bottom: 12px; }
.metric { min-height: 82px; padding: 12px 14px; background: var(--ls-surface); border: 1px solid var(--ls-border); border-radius: 7px; }
.metric span { color: var(--ls-muted); font-size: 12px; }
.metric strong { display: block; margin-top: 6px; font-size: 22px; line-height: 28px; }
.metric small { display: block; margin-top: 3px; color: var(--ls-primary); }
.panel { min-width: 0; max-width: 100%; background: var(--ls-surface); border: 1px solid var(--ls-border); border-radius: 7px; box-shadow: var(--ls-shadow); }
.panel + .panel { margin-top: 12px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 14px; border-bottom: 1px solid var(--ls-border-soft); }
.panel-header h2, .panel-header p { margin-bottom: 0; }
.panel-header p { margin-top: 2px; color: var(--ls-muted); font-size: 12px; }
.panel-body { padding: 13px 14px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--ls-surface-soft); border-bottom: 1px solid var(--ls-border-soft); }
.query-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--ls-border); border-radius: 7px; }
.query-field { display: grid; gap: 4px; min-width: 130px; }
.query-field label, .form-field label { color: #485651; font-size: 12px; font-weight: 700; }
.input, .select, .textarea { min-height: 34px; padding: 6px 9px; color: var(--ls-text); background: #fff; border: 1px solid var(--ls-border); border-radius: 6px; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ls-accent); box-shadow: 0 0 0 3px rgba(49,95,181,.12); }
.input { width: min(250px, 100%); }
.select { min-width: 120px; }
.textarea { width: 100%; min-height: 82px; resize: vertical; }
.filter-chip, .tab-button { padding: 5px 10px; color: var(--ls-muted); }
.filter-chip.active, .tab-button.active { color: var(--ls-primary); background: var(--ls-primary-soft); border-color: #b7d5cc; }
.segmented { display: inline-flex; gap: 2px; padding: 3px; background: #edf2f0; border-radius: 7px; }
.segmented .tab-button { border: 0; background: transparent; }
.segmented .tab-button.active { background: #fff; box-shadow: 0 1px 3px rgba(22,45,39,.08); }

.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 0; }
th, td { padding: 9px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ls-border-soft); overflow-wrap: anywhere; }
th { position: sticky; top: 0; z-index: 1; color: #34433f; background: #edf3f0; font-size: 12px; font-weight: 700; white-space: nowrap; }
tbody tr:nth-child(even) { background: #fbfcfc; }
tbody tr:hover { background: #f2f7f5; }
tbody tr.selected { background: #eaf3ef; }
tbody tr:last-child td { border-bottom: 0; }
td.number, th.number { text-align: right; font-variant-numeric: tabular-nums; }
.cell-actions { display: flex; gap: 8px; white-space: nowrap; }
.table-empty { padding: 36px 16px; color: var(--ls-muted); text-align: center; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--ls-border-soft); }
.pagination span { color: var(--ls-muted); font-size: 12px; }
.pagination input { width: 48px; min-height: 30px; text-align: center; }
.status { display: inline-flex; min-height: 23px; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.status.success { color: var(--ls-success); background: var(--ls-success-soft); }
.status.warning { color: var(--ls-warning); background: var(--ls-warning-soft); }
.status.danger { color: var(--ls-danger); background: var(--ls-danger-soft); }
.status.info { color: var(--ls-accent); background: var(--ls-accent-soft); }
.status.neutral { color: var(--ls-muted); background: #eef1f0; }

.flow-strip { display: flex; gap: 8px; overflow-x: auto; padding: 12px 14px 14px; }
.flow-step { flex: 0 0 150px; min-height: 72px; padding: 9px 10px; text-align: left; background: #fff; border: 1px solid var(--ls-border); border-radius: 6px; }
.flow-step strong, .flow-step span { display: block; }
.flow-step strong { margin-bottom: 5px; font-size: 13px; }
.flow-step span { color: var(--ls-muted); font-size: 12px; }
.flow-step.done { background: var(--ls-primary-soft); border-color: #bdd8d0; }
.flow-step.active { box-shadow: inset 0 0 0 2px var(--ls-accent); }
.grid-two { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 12px; align-items: start; }
.grid-three { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.summary-list { display: grid; gap: 0; margin: 0; }
.summary-row { display: grid; grid-template-columns: 155px minmax(0,1fr); gap: 12px; min-height: 40px; padding: 9px 0; border-bottom: 1px solid var(--ls-border-soft); }
.summary-row:last-child { border-bottom: 0; }
.summary-row dt { color: var(--ls-muted); }
.summary-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.field-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.field-item { min-height: 46px; padding: 9px 10px; background: var(--ls-surface-soft); border: 1px solid var(--ls-border-soft); border-radius: 5px; }
.field-item small, .field-item strong { display: block; }
.field-item small { margin-bottom: 4px; color: var(--ls-muted); }
.detail-sections { display: grid; gap: 10px; }
.detail-section { padding: 12px 14px; background: #fff; border: 1px solid var(--ls-border); border-radius: 7px; }
.detail-section h3 { margin-bottom: 10px; }
.detail-toolbar { position: sticky; top: calc(var(--ls-topbar-height) + var(--ls-tabs-height)); z-index: 12; display: flex; justify-content: space-between; gap: 10px; margin: -18px -20px 12px; padding: 10px 20px; background: rgba(243,246,245,.98); border-bottom: 1px solid var(--ls-border); }

.config-workbench { --config-sidebar-width: var(--ls-config-width); display: grid; grid-template-columns: var(--config-sidebar-width) 6px minmax(0,1fr); min-height: 520px; align-items: stretch; }
.config-workbench.collapsed { grid-template-columns: 14px 0 minmax(0,1fr); }
.config-sidebar { position: relative; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--ls-border); border-radius: 7px 0 0 7px; }
.config-sidebar-header { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 8px 10px; border-bottom: 1px solid var(--ls-border-soft); }
.config-sidebar-header h2 { margin: 0; font-size: 15px; }
.config-sidebar-tools { display: grid; gap: 7px; padding: 9px; border-bottom: 1px solid var(--ls-border-soft); }
.config-category-list { display: grid; }
.config-category { display: flex; justify-content: space-between; gap: 8px; min-height: 42px; padding: 8px 11px; color: var(--ls-text); text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--ls-border-soft); }
.config-category.active { color: var(--ls-primary); background: var(--ls-primary-soft); font-weight: 700; }
.config-category small { color: var(--ls-muted); }
.config-collapse { position: absolute; top: 10px; right: 8px; z-index: 2; }
.config-workbench.collapsed .config-sidebar { overflow: visible; background: var(--ls-border-soft); border-radius: 7px 0 0 7px; }
.config-workbench.collapsed .config-sidebar > :not(.config-sidebar-header) { display: none; }
.config-workbench.collapsed .config-sidebar-header { min-height: 100%; padding: 6px 0; justify-content: center; border: 0; }
.config-workbench.collapsed .config-sidebar-header > :not(.config-collapse) { display: none; }
.config-workbench.collapsed .config-collapse { position: static; right: auto; width: 28px; height: 28px; border-radius: 6px; background: #fff; box-shadow: var(--ls-shadow); }
.config-resizer { width: 6px; cursor: col-resize; background: transparent; }
.config-resizer:hover, body.resizing-config .config-resizer { background: #8fc8ba; }
.config-workbench.collapsed .config-resizer { display: block; width: 0; visibility: hidden; pointer-events: none; }
.config-content { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--ls-border); border-left: 0; border-radius: 0 7px 7px 0; }
.config-content .query-bar { margin: 10px 10px 0; }
.config-content .toolbar { margin-top: 10px; border-top: 1px solid var(--ls-border-soft); }
.config-detail-page { min-width: 0; }

.rule-tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 2px; border-bottom: 1px solid var(--ls-border); }
.rule-tab { min-height: 36px; padding: 6px 12px; color: var(--ls-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.rule-tab.active { color: var(--ls-primary); border-bottom-color: var(--ls-primary); font-weight: 700; }
.condition-list, .formula-list, .action-list { display: grid; gap: 8px; }
.condition-editor-shell { overflow-x: auto; padding-bottom: 3px; }
.condition-row { display: grid; min-width: 900px; grid-template-columns: 72px 64px minmax(180px,1.2fr) 112px minmax(170px,1fr) 64px 72px 34px; gap: 6px; align-items: center; }
.condition-header, .condition-row.v5-condition-row { grid-template-columns: 72px 132px minmax(190px,1.2fr) 112px minmax(170px,1fr) 132px 34px; }
.condition-header { padding: 0 8px 6px; color: var(--ls-muted); font-size: 13px; font-weight: 700; }
.condition-row { padding: 8px; background: var(--ls-surface-soft); border: 1px solid var(--ls-border-soft); border-radius: 6px; }
.condition-structure-preview { margin-top: 10px; padding: 10px 12px; background: var(--ls-primary-soft); border: 1px solid var(--ls-border); border-left: 3px solid var(--ls-primary); border-radius: 6px; }
.condition-structure-preview.invalid { background: #fff6f4; border-color: #e6aaa0; border-left-color: var(--ls-danger); }
.condition-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.condition-preview-head span { color: var(--ls-muted); font-size: 13px; }
.condition-structure-preview.invalid .condition-preview-head span { color: var(--ls-danger); font-weight: 700; }
.condition-preview-row { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.condition-preview-joiner { flex: 0 0 44px; color: var(--ls-primary); font-weight: 700; }
.condition-preview-expression { min-width: 0; overflow-wrap: anywhere; }
.condition-preview-expression strong { margin-right: 7px; }
.condition-preview-expression em { margin-right: 7px; color: var(--ls-accent); font-style: normal; }
.condition-preview-expression b { font-weight: 600; }
.formula-card { display: grid; grid-template-columns: 42px minmax(150px,.8fr) minmax(190px,1fr) minmax(220px,1.5fr) 82px 34px; gap: 8px; align-items: center; padding: 9px; background: var(--ls-surface-soft); border: 1px solid var(--ls-border); border-radius: 6px; }
.step-index { display: grid; width: 32px; height: 32px; place-items: center; color: #fff; background: var(--ls-primary); border-radius: 50%; font-weight: 700; }
.formula-preview { padding: 11px 12px; color: #25433c; background: var(--ls-primary-soft); border-left: 3px solid var(--ls-primary); }
.action-row { display: grid; grid-template-columns: 180px minmax(220px,1fr) 34px; gap: 8px; padding: 9px; background: var(--ls-surface-soft); border: 1px solid var(--ls-border-soft); border-radius: 6px; }
.readable-rule { display: grid; grid-template-columns: 56px 30px minmax(180px,1fr) 110px minmax(160px,1fr) 30px; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--ls-border-soft); }
.readable-rule:last-child { border-bottom: 0; }
.rule-source { color: var(--ls-accent); font-weight: 700; }
.trial-result { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.trial-item { padding: 10px; background: var(--ls-surface-soft); border: 1px solid var(--ls-border-soft); border-radius: 6px; }

.guide-canvas { overflow: auto; padding: 14px; background: #fff; border: 1px solid var(--ls-border); border-radius: 7px; }
.guide-controls { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 8px; }
.guide-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-gutter: stable; }
.guide-scroll:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: -2px; }
.guide-flow { display: flex; width: max-content; min-width: 100%; gap: 26px; transform-origin: top left; }
.guide-flow > .guide-node { flex: 0 0 156px; width: 156px; margin-bottom: 0; }
.guide-flow > .guide-node:last-child::after { display: none; }
.guide-group { display: grid; align-content: start; min-width: 180px; padding: 9px; border: 1px dashed #b8cbc5; border-radius: 7px; }
.guide-group > strong { margin-bottom: 8px; }
.guide-node { position: relative; min-height: 64px; margin-bottom: 7px; padding: 9px 10px; text-align: left; background: #fff; border: 1px solid #bdd2cb; border-radius: 6px; }
.guide-node::after { content: "→"; position: absolute; right: -23px; top: 20px; color: var(--ls-muted); }
.guide-group:last-child .guide-node::after { display: none; }
.guide-node small, .guide-node span { display: block; color: var(--ls-muted); font-size: 11px; }

.notice { padding: 10px 11px; border: 1px solid #d6e5e0; border-radius: 6px; background: var(--ls-primary-soft); }
.notice.warning { color: #714803; border-color: #edcf91; background: var(--ls-warning-soft); }
.notice.danger { color: #852727; border-color: #efbaba; background: var(--ls-danger-soft); }
.empty-state, .loading-state { display: grid; min-height: 220px; place-items: center; color: var(--ls-muted); }
.empty-state > div { text-align: center; }
.validation-message { color: var(--ls-muted); font-size: 12px; }
.validation-message.error { color: var(--ls-danger); }
.validation-message.success { color: var(--ls-success); }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.form-field { display: grid; gap: 5px; }
.form-field.full { grid-column: 1 / -1; }
.form-field input, .form-field select, .form-field textarea { width: 100%; }
.check-field { display: flex; gap: 7px; align-items: center; min-height: 34px; }

.scrim { position: fixed; inset: 0; z-index: 45; background: rgba(14,27,24,.42); }
.drawer, .modal { position: fixed; z-index: 52; display: flex; flex-direction: column; background: #fff; box-shadow: -14px 0 40px rgba(17,37,32,.18); visibility: hidden; opacity: 0; transition: transform .18s ease, opacity .18s ease; }
.drawer { top: 0; right: 0; width: min(720px, 92vw); height: 100vh; transform: translateX(100%); }
.drawer.open { visibility: visible; opacity: 1; transform: translateX(0); }
.modal { left: 50%; top: 50%; width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 44px); border-radius: 7px; transform: translate(-50%,-46%); }
.modal.open { visibility: visible; opacity: 1; transform: translate(-50%,-50%); }
.drawer header, .modal header { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 12px 16px; border-bottom: 1px solid var(--ls-border); }
.drawer header h2, .modal header h2 { margin: 2px 0 0; }
.drawer header small, .modal header small { color: var(--ls-primary); font-weight: 700; }
.drawer-body, .modal-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px; }
.drawer-footer, .modal-footer { display: flex; justify-content: flex-end; gap: 8px; min-height: 56px; padding: 10px 16px; border-top: 1px solid var(--ls-border); }
.notification-panel { position: fixed; top: 54px; right: 18px; z-index: 42; width: min(420px, calc(100vw - 28px)); max-height: min(620px, calc(100vh - 78px)); overflow: auto; background: #fff; border: 1px solid var(--ls-border); border-radius: 7px; box-shadow: 0 14px 38px rgba(17,37,32,.18); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: .16s ease; }
.notification-panel.open { visibility: visible; opacity: 1; transform: translateY(0); }
.notification-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-bottom: 1px solid var(--ls-border); }
.notification-list { display: grid; }
.notification-item { padding: 10px 12px; border-bottom: 1px solid var(--ls-border-soft); }
.notification-item strong, .notification-item span { display: block; }
.notification-item span { margin-top: 3px; color: var(--ls-muted); font-size: 12px; }
.toast { position: fixed; left: 50%; top: 14px; z-index: 70; max-width: min(520px, calc(100vw - 32px)); padding: 10px 14px; color: #fff; background: #1f302c; border-radius: 6px; box-shadow: var(--ls-shadow); visibility: hidden; opacity: 0; transform: translate(-50%,-8px); transition: .16s ease; }
.toast.show { visibility: visible; opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2,minmax(140px,1fr)); }
  .grid-two, .grid-three, .field-grid { grid-template-columns: 1fr; }
  .condition-row { min-width: 820px; grid-template-columns: 66px 56px minmax(150px,1fr) 100px minmax(140px,1fr) 56px 64px 34px; }
  .condition-header, .condition-row.v5-condition-row { grid-template-columns: 66px 120px minmax(170px,1fr) 104px minmax(150px,1fr) 120px 34px; }
  .formula-card { grid-template-columns: 40px minmax(150px,1fr) minmax(180px,1fr); }
  .formula-card > :nth-child(n+4) { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; width: min(300px,86vw); transform: translateX(-100%); }
  .app-shell.mobile-nav-open .sidebar { transform: translateX(0); }
  .sidebar-resizer { display: none; }
  .topbar { padding: 8px 10px; }
  .mobile-nav-button { display: inline-grid; }
  .breadcrumb { display: none; }
  .topbar-actions { flex: 1; justify-content: flex-end; }
  .compact-field span { display: none; }
  .compact-field select { min-width: 108px; max-width: 142px; }
  .workspace-tabs { padding-inline: 8px; }
  .workspace { padding: 14px 10px 24px; }
  .page-header { display: grid; gap: 10px; }
  .page-actions { justify-content: flex-start; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .config-workbench, .config-workbench.collapsed { display: block; min-height: 0; }
  .config-sidebar { display: flex; overflow-x: auto; border-radius: 7px 7px 0 0; }
  .config-sidebar-header, .config-sidebar-tools { min-width: 170px; border-right: 1px solid var(--ls-border-soft); border-bottom: 0; }
  .config-category-list { display: flex; }
  .config-category { min-width: 112px; border-right: 1px solid var(--ls-border-soft); border-bottom: 0; }
  .config-collapse, .config-resizer { display: none; }
  .config-content { border-left: 1px solid var(--ls-border); border-radius: 0 0 7px 7px; }
  .condition-row { grid-template-columns: 70px 54px minmax(160px,1fr); }
  .condition-row > :nth-child(n+4) { grid-column: 3; }
  .formula-card { grid-template-columns: 36px 1fr; }
  .formula-card > :nth-child(n+3) { grid-column: 2; }
  .action-row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .detail-toolbar { top: calc(var(--ls-topbar-height) + var(--ls-tabs-height)); margin: -14px -10px 10px; padding: 9px 10px; }
  table.mobile-cards { min-width: 0; }
  table.mobile-cards thead { display: none; }
  table.mobile-cards, table.mobile-cards tbody, table.mobile-cards tr, table.mobile-cards td { display: block; width: 100%; }
  table.mobile-cards tr { margin: 8px; width: calc(100% - 16px); padding: 8px 10px; background: #fff; border: 1px solid var(--ls-border); border-radius: 6px; }
  table.mobile-cards td { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 8px; padding: 6px 0; border: 0; }
  table.mobile-cards td::before { content: attr(data-label); color: var(--ls-muted); font-size: 12px; }
  .trial-result { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .metric-grid, .trial-result { grid-template-columns: 1fr; }
  .compact-field:first-child { display: none; }
  h1 { font-size: 22px; line-height: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* V3 component alignment */
.workspace-tab > button:first-child { min-width: 0; flex: 1; overflow: hidden; padding: 0 10px; color: inherit; text-overflow: ellipsis; white-space: nowrap; text-align: left; background: transparent; border: 0; }
.workspace-tab .tab-close { width: 28px; height: 28px; color: var(--ls-muted); background: transparent; border: 0; border-radius: 4px; }
.workspace-tab .tab-close:hover { color: var(--ls-danger); background: var(--ls-danger-soft); }
.config-main { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--ls-border); border-left: 0; border-radius: 0 7px 7px 0; }
.config-main .toolbar { border-bottom: 1px solid var(--ls-border-soft); }
.config-table-wrap { border: 0; border-radius: 0; }
.bulk-bar { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 7px 11px; background: var(--ls-surface-soft); border-bottom: 1px solid var(--ls-border-soft); }
.bulk-bar span { margin-right: auto; color: var(--ls-muted); }
.pagination { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 9px 11px; border-top: 1px solid var(--ls-border-soft); }
.pagination span { margin-right: auto; color: var(--ls-muted); }
.detail-tabs, .editor-tabs { display: flex; gap: 3px; overflow-x: auto; margin: -2px 0 14px; border-bottom: 1px solid var(--ls-border); }
.detail-tabs button, .editor-tabs button { min-height: 38px; padding: 7px 12px; color: var(--ls-muted); white-space: nowrap; background: transparent; border: 0; border-bottom: 2px solid transparent; }
.detail-tabs button.active, .editor-tabs button.active { color: var(--ls-primary); border-bottom-color: var(--ls-primary); font-weight: 700; }
.detail-tab-content { min-height: 300px; }
.editor-pane { display: none; min-height: 350px; }
.editor-pane.active { display: block; }
.editor-pane > .inline-actions { margin-top: 10px; }
.rule-condition-list { display: grid; gap: 8px; }
.rule-condition-view { display: grid; grid-template-columns: 54px minmax(180px,1fr) 120px minmax(150px,1fr); gap: 8px; align-items: center; padding: 10px 12px; background: var(--ls-surface-soft); border: 1px solid var(--ls-border-soft); border-radius: 6px; }
.rule-condition-view span { color: var(--ls-primary); font-weight: 700; }
.rule-condition-view em { color: var(--ls-accent); font-style: normal; }
.formula-timeline { display: grid; gap: 0; }
.formula-timeline article { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; padding: 10px 0 18px; }
.formula-timeline article:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 42px; bottom: 0; width: 2px; background: var(--ls-border); }
.formula-timeline strong, .formula-timeline small, .formula-timeline p { display: block; }
.formula-timeline small { margin: 3px 0 7px; color: var(--ls-primary); font-weight: 700; }
.formula-timeline p { margin: 7px 0 0; color: var(--ls-muted); font-size: 12px; }
.token-list { display: flex; flex-wrap: wrap; gap: 5px; }
.token { padding: 4px 7px; color: #244e45; background: var(--ls-primary-soft); border: 1px solid #c5dbd3; border-radius: 4px; }
.action-list article { display: grid; grid-template-columns: 130px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--ls-surface-soft); border: 1px solid var(--ls-border-soft); border-radius: 6px; }
.version-list article, .trial-pane { display: grid; gap: 10px; padding: 12px; background: var(--ls-surface-soft); border: 1px solid var(--ls-border); border-radius: 6px; }
.formula-step { display: grid; grid-template-columns: 38px minmax(180px,.8fr) minmax(320px,1.4fr) 120px; gap: 10px; align-items: start; margin-bottom: 9px; padding: 10px; background: var(--ls-surface-soft); border: 1px solid var(--ls-border); border-radius: 6px; }
.formula-step > .form-field:nth-child(2) { min-width: 0; }
.aggregate-config { grid-column: 2 / -1; padding: 10px; border: 1px solid var(--ls-border); background: var(--ls-surface); border-radius: 6px; }
.aggregate-config[hidden] { display: none; }
.aggregate-config > strong { display: block; margin-bottom: 8px; }
.aggregate-fields { display: grid; grid-template-columns: repeat(5,minmax(130px,1fr)); gap: 8px; }
.notification-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--ls-border); }
.notification-list button { display: grid; gap: 3px; width: 100%; padding: 10px 12px; color: var(--ls-text); text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--ls-border-soft); }
.notification-list button:hover { background: var(--ls-surface-soft); }
.notification-list button span, .notification-list button small { color: var(--ls-muted); }
.empty-inline { padding: 22px 12px; color: var(--ls-muted); text-align: center; }
@media (max-width: 760px) { .formula-step { grid-template-columns: 36px minmax(0,1fr); } .aggregate-config { grid-column: 2; } .aggregate-fields { grid-template-columns: 1fr; } .formula-step > .form-field { grid-column: 2; } .rule-condition-view { grid-template-columns: 48px minmax(0,1fr); } .rule-condition-view em, .rule-condition-view b { grid-column: 2; } }
/* Navigation and focus corrections */
.nav-button.nav-child { display: block; width: 100%; padding: 7px 9px; }
.nav-button.nav-child .nav-label { display: block; width: 100%; }
.workspace:focus { outline: 0; }
.parameter-input-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; margin-top: 6px; }
.formula-parameter-picker { grid-template-columns: minmax(220px,1fr) 120px auto; gap: 6px; margin-top: 6px; padding: 8px; background: #eef4f1; border: 1px solid var(--ls-border); border-radius: 6px; }
.formula-parameter-picker:not([hidden]) { display: grid; }
@media (max-width: 760px) { .parameter-input-row, .formula-parameter-picker:not([hidden]) { grid-template-columns: 1fr; } }
/* V5 executable configuration editors */
.v5-query-bar { display: grid; grid-template-columns: minmax(260px,1fr) 150px auto auto; gap: 8px; margin: 10px; }
.top-gap { margin-top: 10px; }
.condition-prefix { display: grid; min-height: var(--ls-control-height); place-items: center; color: var(--ls-primary); font-weight: 700; }
.action-list-v5, .formula-builder-v5 { display: grid; gap: 9px; }
.action-edit-row { display: grid; grid-template-columns: 150px minmax(180px,1fr) minmax(160px,1fr) minmax(180px,1fr) 34px; gap: 7px; align-items: end; padding: 9px; background: var(--ls-surface-soft); border: 1px solid var(--ls-border-soft); border-radius: var(--ls-radius-control); }
.formula-step-v5 { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; padding: 11px; background: var(--ls-surface-soft); border: 1px solid var(--ls-border); border-radius: var(--ls-radius-control); }
.formula-step-main { display: grid; gap: 10px; min-width: 0; }
.formula-step-head { display: grid; grid-template-columns: minmax(180px,1fr) 180px 112px 34px; gap: 8px; align-items: end; }
.compact-number { max-width: 112px; }
.formula-arguments { display: grid; gap: 7px; }
.formula-argument-row { display: grid; grid-template-columns: 150px minmax(230px,1fr) minmax(160px,.65fr) 34px; gap: 7px; align-items: end; padding: 8px; background: var(--ls-surface); border: 1px solid var(--ls-border-soft); border-radius: 5px; }
.aggregate-config-v5 { display: grid; grid-template-columns: repeat(4,minmax(160px,1fr)); gap: 8px; padding: 10px; background: var(--ls-accent-soft); border: 1px solid #b9e3dc; border-radius: var(--ls-radius-control); }
.aggregate-config-v5[hidden] { display: none; }
.check-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; min-height: var(--ls-control-height); }
.check-row label { display: inline-flex; gap: 6px; align-items: center; }
.config-main > .table-wrap { border-radius: 0; }
.config-category.active { box-shadow: inset 3px 0 0 var(--ls-primary); }
.brand-mark { background: #e8f8f5; color: #087d73; }
.button.primary { background: var(--ls-primary); border-color: var(--ls-primary); }
.button.primary:hover { background: var(--ls-primary-hover); border-color: var(--ls-primary-hover); }
.record-link { color: #1f5fbd; }
@media (max-width: 1100px) {
  .action-edit-row { grid-template-columns: 140px minmax(170px,1fr) minmax(150px,1fr); }
  .action-edit-row > :nth-child(n+4) { grid-column: 2 / -1; }
  .formula-argument-row { grid-template-columns: 140px minmax(190px,1fr) 34px; }
  .formula-argument-row > :nth-child(3) { grid-column: 2; }
  .aggregate-config-v5 { grid-template-columns: repeat(2,minmax(160px,1fr)); }
}
@media (max-width: 760px) {
  .v5-query-bar, .formula-step-head, .action-edit-row, .formula-argument-row, .aggregate-config-v5 { grid-template-columns: 1fr; }
  .action-edit-row > *, .formula-argument-row > * { grid-column: auto !important; }
  .formula-step-v5 { grid-template-columns: 34px minmax(0,1fr); }
}

.list-query-bar-v6:not(.v5-query-bar) { justify-content: flex-start; align-items: center; margin: 10px 12px; }
.list-query-bar-v6:not(.v5-query-bar) .input { width: min(320px, 100%); }
.list-query-bar-v6:not(.v5-query-bar) .select { min-width: 140px; }
.list-query-bar-v6 [data-v6-result] { margin-left: auto; white-space: nowrap; }
.row-actions-cell { min-width: 132px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Task context registry */
.context-view-tabs { margin: 0 0 12px; }
.context-view-tabs .tab-button { min-width: 112px; }
.import-view-tabs { margin-bottom: 14px; }