:root {
  --brand: #742774;
  --brand-hover: #5f1f5f;
  --brand-pressed: #4d194d;
  --brand-tint: #f6eef6;
  --brand-tint2: #ecdcec;
  --accent: var(--brand);
  --accent-hover: var(--brand-hover);
  --accent-tint: var(--brand-tint);
  --text: #242424;
  --text2: #616161;
  --text3: #8a8886;
  --border: #e0e0e0;
  --border2: #d1d1d1;
  --border-strong: #8a8886;
  --bg: #f5f5f5;
  --surface: #ffffff;
  --hover: #f5f5f5;
  --pressed: #e0e0e0;
  --selected: #ebebeb;
  --danger: #c50f1f;
  --danger-tint: #fdf3f4;
  --success: #107c10;
  --success-tint: #f1faf1;
  --warning: #bc4b09;
  --warning-tint: #fff9f5;
  --info-tint: #f0f6fc;
  --link: #0f6cbd;
  --shadow2: 0 1px 2px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --shadow4: 0 2px 4px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --shadow8: 0 4px 8px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --shadow16: 0 8px 16px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --shadow28: 0 14px 28px rgba(0,0,0,.24), 0 0 8px rgba(0,0,0,.20);
  --radius: 4px;
  --radius-l: 8px;
  --font: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --mono: "Cascadia Code", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--font); font-size: 14px; color: var(--text); background: var(--surface); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { flex-shrink: 0; }
.fi { display: inline-block; flex-shrink: 0; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; vertical-align: middle; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------- top bar */
.topbar { height: 48px; background: var(--brand); color: #fff; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 0; position: relative; z-index: 20; }
.topbar-btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: #fff; cursor: pointer; }
.topbar-btn:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.brand { color: #fff; font-weight: 600; font-size: 16px; padding: 0 12px 0 4px; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.topbar-search { position: relative; flex: 0 1 460px; margin: 0 auto; display: flex; align-items: center; }
.topbar-search .ico-search { position: absolute; left: 10px; top: 8px; color: var(--text2); pointer-events: none; }
.topbar-search input { width: 100%; height: 32px; border-radius: var(--radius); border: 0; padding: 0 12px 0 34px; background: #fff; color: var(--text); outline: none; }
.topbar-search input:focus { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.search-results { position: absolute; top: 36px; left: 0; right: 0; background: #fff; color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow16); max-height: 360px; overflow: auto; padding: 4px 0; }
.search-results a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text); }
.search-results a:hover, .search-results a.active { background: var(--hover); text-decoration: none; }
.search-results .muted { padding: 10px 12px; }
.topbar-right { display: flex; align-items: center; gap: 2px; }
.env { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; padding: 4px 12px; font: inherit; font-size: 12px; text-align: right; background: none; border: 0; border-radius: var(--radius); color: inherit; cursor: pointer; max-width: 320px; }
.env:hover { background: rgba(255,255,255,.12); }
.env-label { opacity: .8; }
.env-name { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; max-width: 100%; }
.env-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.env-tag { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 8px; background: #fde7a9; color: #5c3c00; white-space: nowrap; }
.env-tag.admin { background: #fdd8db; color: #8a1c1c; }
body.env-sandbox .topbar { box-shadow: inset 0 -3px 0 #f7b500; }
.env-list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.env-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius); color: var(--text); border: 1px solid transparent; }
.env-item:hover { background: var(--hover); text-decoration: none; }
.env-item.current { border-color: var(--accent); background: var(--accent-tint); }
.env-ico { width: 32px; height: 32px; border-radius: var(--radius); background: #ebf3fc; color: #0f6cbd; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.env-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.env-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.env-check { color: var(--accent); display: inline-flex; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #e8d3e8; color: var(--brand); font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; margin: 0 8px; border: 0; flex-shrink: 0; }
button.avatar { cursor: pointer; }
button.avatar:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.avatar.small { width: 26px; height: 26px; font-size: 11px; margin: 0; }
.avatar.big { width: 64px; height: 64px; font-size: 22px; margin: 0; }

.test-pill { height: 26px; border-radius: 13px; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14); color: #fff; padding: 0 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.test-pill:hover { background: rgba(255,255,255,.24); }
.test-pill.impersonating { background: #fde7a7; color: #4d3800; border-color: #fde7a7; }

/* ---------------------------------------------------------- sign-in & account */
.signin { position: fixed; inset: 0; z-index: 90; background: linear-gradient(135deg, #f6eef6 0%, #eef3fb 100%); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.signin-card { width: 440px; max-width: 100%; background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow16); padding: 36px 40px 32px; }
.signin-card h1 { font-size: 24px; font-weight: 600; margin: 14px 0 4px; }
.signin-card p { margin: 0 0 22px; line-height: 1.45; }
.signin-brand { font-weight: 700; font-size: 15px; color: var(--brand); letter-spacing: .2px; }
.signin-submit { width: 100%; height: 36px; margin-top: 6px; }
.account-card { position: fixed; width: 340px; max-width: calc(100vw - 16px); background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow28); z-index: 75; animation: fade .1s; }
.account-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--border); }
.account-head .org { font-weight: 600; font-size: 13px; }
.account-body { display: flex; gap: 16px; padding: 18px 16px; }
.account-body b { display: block; font-size: 16px; margin-bottom: 2px; }

/* ---------------------------------------------------------- formula editor & business rules */
.fx-badge { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 7px; border-radius: 4px; background: var(--accent-tint); color: var(--accent); font: italic 600 13px var(--mono); }
.fx-editor { min-height: 96px; font-size: 13px; line-height: 1.5; }
.fx-preview { margin: -4px 0 14px; }
.fx-preview .list td { height: 30px; font-size: 13px; }
.designer.right { grid-template-columns: 1fr 340px; }
.designer.right .designer-side { border-right: 0; border-left: 1px solid var(--border); }
.rule-canvas { max-width: 980px; }
.rule-card { border: 1px solid var(--border); border-radius: var(--radius-l); background: #fff; box-shadow: var(--shadow2); padding: 12px 14px; position: relative; }
.rule-card.condition { border-top: 3px solid #0f6cbd; }
.rule-card.yes { border-top: 3px solid var(--success); }
.rule-card.no { border-top: 3px solid var(--danger); }
.rule-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rule-ico { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #f0f0f0; font-size: 12px; font-weight: 700; }
.rule-card.yes .rule-ico { background: var(--success-tint); color: var(--success); }
.rule-card.no .rule-ico { background: var(--danger-tint); color: var(--danger); }
.rule-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; position: relative; }
.rule-branches::before { content: ""; position: absolute; left: 25%; right: 25%; top: -18px; height: 18px; border: 2px solid var(--border2); border-bottom: 0; border-radius: 8px 8px 0 0; }
.rule-action { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: #fafafa; padding: 8px; margin-bottom: 8px; }
.rule-action .rm { position: absolute; right: 4px; top: 6px; }
.ffield .lock { display: inline-flex; margin-left: 6px; color: var(--text3); vertical-align: middle; }
@media (max-width: 900px) { .rule-branches { grid-template-columns: 1fr; } .designer.right { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- role editor */
.role-grid th.lvl-col, .role-grid td.lvl-col { width: 92px; text-align: center; }
.role-grid td { height: 46px; }
.lvl { border: 0; background: transparent; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lvl:hover:not(:disabled) { background: var(--hover); }
.lvl:disabled { cursor: default; }
.lvl:focus-visible { outline: 2px solid var(--accent); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--text2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------- shell */
.shell { display: flex; height: calc(100vh - 48px); }
.leftnav { width: 220px; flex-shrink: 0; background: #fafafa; border-right: 1px solid var(--border); padding: 8px 0; overflow-y: auto; transition: width .15s; }
.leftnav.collapsed { width: 48px; }
.leftnav.collapsed .nav-text, .leftnav.collapsed .nav-section { display: none; }
.nav-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; color: var(--text); position: relative; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; white-space: nowrap; }
.nav-item:hover { background: var(--hover); text-decoration: none; }
.nav-item.active { background: var(--selected); font-weight: 600; }
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--accent); }
.nav-item .fi { color: var(--text2); }
.nav-item.active .fi { color: var(--accent); }
.nav-section { font-size: 12px; color: var(--text2); font-weight: 600; padding: 14px 16px 6px; text-transform: none; }
.nav-sep { height: 1px; background: var(--border); margin: 8px 12px; }
.main { flex: 1; min-width: 0; overflow: auto; background: var(--surface); position: relative; }

/* ---------------------------------------------------------- page chrome */
.page { padding: 0 0 40px; min-height: 100%; }
.page-head { padding: 20px 28px 8px; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text2); margin-bottom: 6px; flex-wrap: wrap; }
.breadcrumb a { color: var(--text2); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { color: var(--text3); display: inline-flex; }
.page-title { font-size: 24px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 12px; }
.page-sub { color: var(--text2); margin: 6px 0 0; }
.page-body { padding: 8px 28px; }

.cmdbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 20px; min-height: 44px; flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 5; }
.cmdbar .spacer { flex: 1; }
.cmd { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 0; background: transparent; border-radius: var(--radius); cursor: pointer; white-space: nowrap; color: var(--text); }
.cmd:hover:not(:disabled) { background: var(--hover); }
.cmd:active:not(:disabled) { background: var(--pressed); }
.cmd:disabled { color: #bdbdbd; cursor: default; }
.cmd:disabled .fi { color: #bdbdbd; }
.cmd .fi { color: var(--accent); }
.cmd.danger .fi { color: var(--danger); }
.cmd-sep { width: 1px; height: 24px; background: var(--border); margin: 0 6px; }

/* ---------------------------------------------------------- buttons & inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--border2); background: #fff; cursor: pointer; font-weight: 600; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--hover); border-color: #c7c7c7; }
.btn:active:not(:disabled) { background: var(--pressed); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover:not(:disabled) { background: #a80d1a; }
.btn.subtle { border-color: transparent; background: transparent; font-weight: 400; padding: 0 8px; }
.btn.subtle:hover:not(:disabled) { background: var(--hover); }
.btn.small { height: 26px; padding: 0 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: var(--radius); cursor: pointer; color: var(--text2); }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.small { width: 26px; height: 26px; }

.field { margin-bottom: 18px; }
.field > label, .label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.field .hint { color: var(--text2); font-size: 12px; margin-top: 4px; }
.field .error-text { color: var(--danger); font-size: 12px; margin-top: 4px; }
.req { color: var(--danger); margin-left: 2px; }
.rec { color: var(--link); margin-left: 2px; }
.input, select.input, textarea.input { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--border2); border-bottom-color: var(--border-strong); border-radius: var(--radius); background: #fff; outline: none; }
textarea.input { height: auto; min-height: 72px; padding: 6px 10px; resize: vertical; line-height: 1.4; }
.input:hover { border-color: #c7c7c7; border-bottom-color: var(--text2); }
.input:focus { border-bottom: 2px solid var(--accent); padding-bottom: 0; }
textarea.input:focus { padding-bottom: 5px; }
.input:disabled, .input[readonly] { background: #fafafa; color: var(--text2); border-color: var(--border); }
.input.invalid { border-color: var(--danger); }
select.input { padding-right: 28px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23616161' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.prefix-input { display: flex; align-items: stretch; }
.prefix-input .prefix { display: flex; align-items: center; padding: 0 10px; background: #f0f0f0; border: 1px solid var(--border2); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); color: var(--text2); white-space: nowrap; }
.prefix-input .input { border-radius: 0 var(--radius) var(--radius) 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; cursor: pointer; }
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.toggle input { display: none; }
.field > label.toggle, .field > label.check { display: inline-flex; font-weight: 400; margin: 0; }
.toggle .track { display: inline-block; flex-shrink: 0; width: 40px; height: 20px; border-radius: 10px; border: 1px solid var(--text2); position: relative; background: #fff; transition: background .1s; }
.toggle .track::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--text2); top: 3px; left: 4px; transition: left .1s; }
.toggle input:checked + .track { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .track::after { left: 22px; background: #fff; }
.toggle input:disabled + .track { opacity: .5; }

/* ---------------------------------------------------------- pivot / tabs */
.pivot { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 0 28px; }
.pivot.inline { padding: 0; }
.pivot button { border: 0; background: none; height: 40px; padding: 0 10px; cursor: pointer; position: relative; color: var(--text2); }
.pivot button:hover { color: var(--text); background: var(--hover); }
.pivot button.active { color: var(--text); font-weight: 600; }
.pivot button.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 2px; background: var(--accent); }

/* ---------------------------------------------------------- list (DetailsList) */
.list-tools { display: flex; align-items: center; gap: 12px; padding: 12px 28px 4px; }
.list-tools .grow { flex: 1; }
.searchbox { position: relative; width: 260px; }
.searchbox .fi { position: absolute; left: 9px; top: 8px; color: var(--text2); pointer-events: none; }
.searchbox input { padding-left: 32px; }
.list { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.list-wrap { padding: 0 20px; overflow-x: auto; }
.list th { text-align: left; font-weight: 600; font-size: 13px; color: var(--text); height: 42px; padding: 0 10px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; top: 0; background: #fff; z-index: 1; user-select: none; }
.list th.sortable { cursor: pointer; }
.list th.sortable:hover { background: var(--hover); }
.list th .sort-ind { color: var(--text2); margin-left: 4px; font-size: 11px; }
.list td { height: 42px; padding: 0 10px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list tbody tr { cursor: default; }
.list tbody tr:hover td { background: var(--hover); }
.list tbody tr.selected td { background: var(--selected); }
.list tbody tr.clickable { cursor: pointer; }
.list .col-check { width: 44px; padding: 0 0 0 12px; }
.list .cell-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.list .cell-main > span, .list .cell-main > a { overflow: hidden; text-overflow: ellipsis; }
.list a.row-link { color: var(--text); font-weight: 600; }
.list a.row-link:hover { color: var(--link); }
.list .num { text-align: right; }
.list .empty td { height: 120px; text-align: center; color: var(--text2); white-space: normal; }
.list .empty td:hover { background: none; }
.muted { color: var(--text2); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12.5px; }

.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 12px; background: #f0f0f0; color: var(--text2); white-space: nowrap; font-weight: 400; }
.badge.brand { background: var(--accent-tint); color: var(--accent); }
.badge.success { background: var(--success-tint); color: var(--success); }
.badge.blue { background: #ebf3fc; color: #0f6cbd; }
.badge.sandbox { background: #fff4ce; color: #835b00; }
.badge.warning { background: #fff4ce; color: #835b00; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 11px; font-size: 12.5px; background: #f0f0f0; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pills { display: inline-flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }

.ticon { width: 32px; height: 32px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; font-weight: 600; font-size: 13px; }
.ticon.small { width: 24px; height: 24px; border-radius: 4px; font-size: 11px; }
.ticon.big { width: 44px; height: 44px; border-radius: 8px; font-size: 18px; }
.type-ico { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 4px; border-radius: 3px; background: #f0f0f0; color: var(--text2); font-size: 11px; font-weight: 600; font-family: var(--mono); }

/* ---------------------------------------------------------- cards (table hub) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); padding: 16px 18px; box-shadow: var(--shadow2); min-width: 0; }
.card h3 { font-size: 16px; font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.card .kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; font-size: 13.5px; }
.card .kv dt { color: var(--text2); }
.card .kv dd { margin: 0; overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
.card-links a { display: flex; align-items: center; gap: 12px; padding: 10px 8px; margin: 0 -8px; border-radius: var(--radius); color: var(--text); }
.card-links a:hover { background: var(--hover); text-decoration: none; }
.card-links .count { margin-left: auto; color: var(--text2); }
.section-title { font-size: 16px; font-weight: 600; margin: 28px 0 10px; display: flex; align-items: center; gap: 10px; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin: 8px 0 24px; }
.stat { border: 1px solid var(--border); border-radius: var(--radius-l); padding: 16px; background: #fff; }
.stat .v { font-size: 28px; font-weight: 600; }
.stat .k { color: var(--text2); margin-top: 2px; }

.hero { background: linear-gradient(120deg, #f6eef6 0%, #eef3fb 100%); border-radius: var(--radius-l); padding: 28px 32px; margin-bottom: 24px; }
.hero h1 { margin: 0 0 6px; font-size: 26px; font-weight: 600; }
.hero p { margin: 0; color: var(--text2); max-width: 760px; line-height: 1.5; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.tile { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-l); color: var(--text); background: #fff; cursor: pointer; text-align: left; }
.tile:hover { box-shadow: var(--shadow8); text-decoration: none; border-color: var(--border2); }
.tile b { display: block; margin-bottom: 4px; }
.tile span { color: var(--text2); font-size: 13px; line-height: 1.4; }

/* ---------------------------------------------------------- panel & dialog */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50; animation: fade .12s; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; background: #fff; box-shadow: var(--shadow28); z-index: 51; display: flex; flex-direction: column; animation: slidein .18s ease-out; }
.panel.wide { width: 640px; }
.panel.xl { width: 920px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 10px; }
.panel-head h2 { margin: 0; font-size: 20px; font-weight: 600; }
.panel-head .sub { color: var(--text2); margin-top: 4px; font-size: 13px; }
.panel-body { flex: 1; overflow-y: auto; padding: 10px 24px 24px; }
.panel-foot { display: flex; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); }
.panel-foot .spacer { flex: 1; }
.dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 480px; max-width: calc(100vw - 32px); background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow28); z-index: 61; padding: 24px; animation: fade .12s; }
.dialog h2 { margin: 0 0 10px; font-size: 20px; font-weight: 600; }
.dialog p { margin: 0 0 8px; color: var(--text2); line-height: 1.5; }
.dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.overlay.top { z-index: 60; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.advanced { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; }
.advanced > summary { cursor: pointer; font-weight: 600; padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 6px; }
.advanced > summary::-webkit-details-marker { display: none; }
.advanced[open] > summary .chev { transform: rotate(90deg); }
.chev { display: inline-flex; transition: transform .1s; }

.msgbar { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--radius); background: var(--info-tint); margin-bottom: 14px; line-height: 1.45; font-size: 13.5px; }
.msgbar.error { background: var(--danger-tint); color: #8a0b16; }
.msgbar.warning { background: var(--warning-tint); }
.msgbar.success { background: var(--success-tint); }
.msgbar .fi { margin-top: 1px; }

.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 80; }
.toast { min-width: 280px; max-width: 440px; background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow16); padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; border-left: 4px solid var(--success); animation: slidein .15s; line-height: 1.4; }
.toast.error { border-left-color: var(--danger); }
.toast.info { border-left-color: var(--link); }

/* ---------------------------------------------------------- menus */
.menu { position: fixed; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow16); padding: 4px 0; z-index: 70; min-width: 200px; animation: fade .08s; }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 0 14px; height: 36px; cursor: pointer; text-align: left; white-space: nowrap; }
.menu button:hover { background: var(--hover); }
.menu button .fi { color: var(--accent); }
.menu .menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ---------------------------------------------------------- options editor */
.opt-row { display: grid; grid-template-columns: 30px 1fr 130px 32px; gap: 8px; align-items: center; margin-bottom: 8px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border2); cursor: pointer; padding: 0; position: relative; overflow: hidden; }
.swatch input { position: absolute; inset: -8px; width: 44px; height: 44px; opacity: 0; cursor: pointer; }
.checklist { border: 1px solid var(--border2); border-radius: var(--radius); max-height: 260px; overflow: auto; padding: 4px 0; }
.checklist label { display: flex; align-items: center; gap: 10px; padding: 6px 12px; cursor: pointer; }
.checklist label:hover { background: var(--hover); }
.checklist label.disabled { color: var(--text3); cursor: default; }

/* ---------------------------------------------------------- designers */
.designer { display: grid; grid-template-columns: 340px 1fr; gap: 0; min-height: calc(100vh - 48px - 44px - 90px); border-top: 1px solid var(--border); }
.designer-side { border-right: 1px solid var(--border); padding: 16px 20px; overflow: auto; background: #fcfcfc; }
.designer-main { padding: 16px 20px; overflow: auto; min-width: 0; }
.designer h4 { margin: 18px 0 8px; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.designer h4:first-child { margin-top: 0; }
.vcol { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; margin-bottom: 6px; }
.vcol .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcol input.w { width: 64px; height: 26px; }
.cond { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; margin-bottom: 8px; position: relative; }
.cond .icon-btn { position: absolute; right: 4px; top: 4px; }
.code { font-family: var(--mono); font-size: 12.5px; background: #f7f7f7; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; white-space: pre-wrap; word-break: break-all; color: #444; }
.form-section-edit { border: 1px solid var(--border); border-radius: var(--radius-l); padding: 12px; margin-bottom: 14px; background: #fff; }
.form-section-edit .head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.form-field-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; background: #fafafa; }
.form-field-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------- model-driven app runtime */
.app-mode { --accent: #0f6cbd; --accent-hover: #115ea3; --accent-tint: #ebf3fc; }
.app-layout { display: flex; height: 100%; }
.sitemap { width: 210px; flex-shrink: 0; border-right: 1px solid var(--border); background: #fafafa; overflow-y: auto; padding: 8px 0; }
.sitemap .nav-item { height: 36px; font-size: 13.5px; }
.app-content { flex: 1; min-width: 0; overflow: auto; display: flex; flex-direction: column; }
.grid-head { display: flex; align-items: center; gap: 12px; padding: 14px 24px 8px; }
.view-picker { border: 0; background: transparent; font-size: 20px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: var(--radius); cursor: pointer; }
.view-picker:hover { background: var(--hover); }
.grid-foot { display: flex; align-items: center; gap: 12px; padding: 10px 24px; border-top: 1px solid var(--border); color: var(--text2); font-size: 13px; margin-top: auto; background: #fff; position: sticky; bottom: 0; }
.grid-foot .spacer { flex: 1; }
.lookup-link { color: var(--link); cursor: pointer; }
.lookup-link:hover { text-decoration: underline; }

.record-head { padding: 16px 24px 0; display: flex; align-items: flex-start; gap: 14px; }
.record-head h1 { font-size: 22px; margin: 0; font-weight: 600; }
.record-head .sub { color: var(--text2); font-size: 13px; margin-top: 2px; }
.record-head .header-fields { margin-left: auto; display: flex; gap: 28px; }
.record-head .header-fields div { text-align: left; font-size: 13px; }
.record-head .header-fields b { display: block; font-weight: 600; }
.record-head .header-fields span { color: var(--text2); font-size: 12px; }
.form-body { padding: 16px 24px 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 16px; align-items: start; }
.form-section { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); padding: 14px 18px 6px; box-shadow: var(--shadow2); }
.form-section h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.ffield { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: start; margin-bottom: 12px; }
.ffield > label { padding-top: 6px; font-size: 13.5px; color: var(--text2); overflow-wrap: anywhere; }
.ffield .ro { padding: 6px 0; min-height: 32px; overflow-wrap: anywhere; }
.ffield .error-text { color: var(--danger); font-size: 12px; margin-top: 4px; }
.lookup { position: relative; }
.lookup-chip { display: flex; align-items: center; gap: 6px; min-height: 32px; border: 1px solid var(--border2); border-bottom-color: var(--border-strong); border-radius: var(--radius); padding: 2px 4px 2px 8px; background: #fff; }
.lookup-chip .chip { display: inline-flex; align-items: center; gap: 6px; background: #ebf3fc; color: var(--link); border-radius: 3px; padding: 2px 8px; cursor: pointer; max-width: calc(100% - 34px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lookup-chip .grow { flex: 1; }
.lookup-results { position: absolute; left: 0; right: 0; top: 34px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow16); z-index: 30; max-height: 280px; overflow: auto; padding: 4px 0; }
.lookup-results button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 12px; cursor: pointer; text-align: left; }
.lookup-results button:hover, .lookup-results button.active { background: var(--hover); }
.lookup-results .muted { padding: 8px 12px; }
.lookup-results .lookup-group { padding: 8px 12px 4px; font-size: 12px; font-weight: 600; color: var(--text2); }
.ticon.tiny { width: 16px; height: 16px; border-radius: 3px; font-size: 9px; }
.share-add { max-width: 420px; margin-bottom: 12px; position: relative; }
.panel .list-wrap { padding: 0; }
.share-grid { min-width: 820px; }
.share-grid th:first-child { width: 220px; }
.share-grid th.lvl-col, .share-grid td.lvl-col { width: 76px; text-align: center; padding: 0 4px; }
.share-grid td.lvl-col .check { justify-content: center; }
.audit-grid { min-width: 860px; }
.audit-grid th:nth-child(1) { width: 160px; }
.audit-grid th:nth-child(2) { width: 150px; }
.audit-grid th:nth-child(3) { width: 110px; }
.audit-grid th:nth-child(4) { width: 150px; }
.audit-grid td { vertical-align: top; white-space: normal; height: auto; padding: 10px; word-break: break-word; }
.audit-grid tr.cont td { border-top: 0; }
.multi { position: relative; }
.multi-box { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 32px; border: 1px solid var(--border2); border-bottom-color: var(--border-strong); border-radius: var(--radius); padding: 3px 28px 3px 6px; background: #fff; cursor: pointer; position: relative; }
.multi-box::after { content: ""; position: absolute; right: 10px; top: 13px; border: 4px solid transparent; border-top-color: var(--text2); }
.multi-pop { position: absolute; left: 0; right: 0; top: 34px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow16); z-index: 30; padding: 4px 0; max-height: 260px; overflow: auto; }
.multi-pop label { display: flex; gap: 8px; align-items: center; padding: 7px 12px; cursor: pointer; }
.multi-pop label:hover { background: var(--hover); }
.subgrid { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow2); margin-bottom: 16px; }
.subgrid-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.subgrid-head h3 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; }
.subgrid .list-wrap { padding: 0 6px; }
.save-state { color: var(--text2); font-size: 13px; }
.save-state.dirty { color: var(--warning); }
.record-foot { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--border); padding: 8px 24px; display: flex; gap: 16px; font-size: 13px; color: var(--text2); margin-top: auto; }

/* ---------------------------------------------------------- API playground */
.api-grid { display: grid; grid-template-columns: 300px 1fr; min-height: calc(100vh - 48px - 90px); border-top: 1px solid var(--border); }
.api-side { border-right: 1px solid var(--border); padding: 12px 0; background: #fcfcfc; overflow: auto; }
.api-side button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 20px; cursor: pointer; line-height: 1.35; }
.api-side button:hover { background: var(--hover); }
.api-side .m { font-family: var(--mono); font-size: 11px; font-weight: 700; display: inline-block; width: 52px; }
.m-GET { color: #107c10; } .m-POST { color: #0f6cbd; } .m-PATCH { color: #8764b8; } .m-DELETE { color: #c50f1f; } .m-PUT { color: #ca5010; }
.api-main { padding: 16px 24px; min-width: 0; }
.api-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.api-bar select { width: 110px; flex-shrink: 0; }
.api-bar .input { font-family: var(--mono); font-size: 13px; }
.api-resp { margin-top: 14px; }
.api-resp pre { margin: 0; max-height: calc(100vh - 380px); overflow: auto; font-family: var(--mono); font-size: 12.5px; background: #1e1e1e; color: #d4d4d4; border-radius: var(--radius-l); padding: 14px 16px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.j-key { color: #9cdcfe; } .j-str { color: #ce9178; } .j-num { color: #b5cea8; } .j-lit { color: #569cd6; }
.status-pill { font-weight: 600; padding: 2px 10px; border-radius: 10px; font-size: 13px; }
.status-ok { background: var(--success-tint); color: var(--success); }
.status-err { background: var(--danger-tint); color: var(--danger); }

.spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 60px; color: var(--text2); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .leftnav { width: 48px; }
  .leftnav .nav-text, .leftnav .nav-section { display: none; }
  .env { display: none; }
  .designer, .api-grid { grid-template-columns: 1fr; }
  .sitemap { display: none; }
  .ffield { grid-template-columns: 1fr; gap: 4px; }
  .form-body { grid-template-columns: 1fr; }
  .page-head, .page-body, .list-tools { padding-left: 16px; padding-right: 16px; }
  .list-wrap { padding: 0 8px; }
  .row2, .row3 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ Power Automate */
.badge.danger { background: var(--danger-tint); color: var(--danger); }
.fl-ico { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.fl-ico.small { width: 24px; height: 24px; border-radius: 4px; }
.fl-designer { display: flex; flex-direction: column; height: 100%; }
.main.flow-mode { overflow: hidden; }
.fl-titlebar { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fl-title-input { border: 1px solid transparent; border-radius: var(--radius); font: inherit; font-size: 15px; font-weight: 600; padding: 4px 8px; width: 320px; max-width: 40vw; background: transparent; }
.fl-title-input:hover, .fl-title-input:focus { border-color: var(--border2); background: #fff; outline: none; }
.fl-workspace { flex: 1; display: flex; min-height: 0; position: relative; }
.fl-canvas { flex: 1; overflow: auto; background-color: #f6f6f6; background-image: radial-gradient(#d6d6d6 1px, transparent 1px); background-size: 18px 18px; padding: 32px 24px 80px; }
.fl-flow { display: flex; flex-direction: column; align-items: center; min-width: min-content; }
.fl-card { width: 280px; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; box-shadow: var(--shadow2); cursor: pointer; position: relative; }
.fl-card:hover { box-shadow: var(--shadow4); }
.fl-card.selected { border-color: #0f6cbd; box-shadow: 0 0 0 1px #0f6cbd, var(--shadow4); }
.fl-card.invalid, .fl-card.failed { border-color: var(--danger); }
.fl-card-title { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-card .fl-more { opacity: 0; }
.fl-card:hover .fl-more, .fl-card.selected .fl-more { opacity: 1; }
.fl-status { display: inline-flex; align-items: center; gap: 6px; }
.fl-link { width: 2px; height: 36px; background: #8a8886; position: relative; display: flex; align-items: center; justify-content: center; }
.fl-plus { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #8a8886; background: #fff; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; opacity: 0; transition: opacity .1s; }
.fl-link:hover .fl-plus, .fl-plus:focus { opacity: 1; }
.fl-flow > .fl-link:last-child .fl-plus, .fl-inner > .fl-link:last-child .fl-plus, .fl-branch > .fl-link:last-child .fl-plus, .fl-inner > .fl-link:only-child .fl-plus, .fl-branch > .fl-link:nth-child(2):last-child .fl-plus { opacity: 1; }
.fl-plus:hover { border-color: #0f6cbd; color: #0f6cbd; }
.fl-container { display: flex; flex-direction: column; align-items: center; border: 1px dashed #c8c6c4; border-radius: 8px; padding: 0 12px 12px; background: rgba(255,255,255,.55); }
.fl-container > .fl-card { margin-top: -1px; }
.fl-inner { display: flex; flex-direction: column; align-items: center; min-width: 300px; }
.fl-branches { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; }
.fl-branch { display: flex; flex-direction: column; align-items: center; min-width: 300px; border-radius: 6px; padding: 0 0 8px; }
.fl-branch.dim { opacity: .45; }
.fl-branch.add { min-width: 0; padding-top: 4px; }
.fl-branch-label { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 10px; background: #edebe9; color: var(--text2); display: inline-flex; align-items: center; gap: 4px; }
.fl-branch-label.true { background: #dff6dd; color: #107c10; }
.fl-branch-label.false { background: #fde7e9; color: #a4262c; }
.fl-iter { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 8px; color: var(--text2); }
.fl-side { display: flex; }
.fl-side:empty { display: none; }
.fl-panel { width: 440px; max-width: 100vw; border-left: 1px solid var(--border); background: #fff; display: flex; flex-direction: column; min-height: 0; }
.fl-panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 8px 16px; }
.fl-panel-head h2 { font-size: 16px; margin: 0; flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-step-name { flex: 1; border: 1px solid transparent; border-radius: var(--radius); font: inherit; font-size: 16px; font-weight: 600; padding: 3px 6px; min-width: 0; }
.fl-step-name:hover:not(:disabled), .fl-step-name:focus { border-color: var(--border2); outline: none; }
.fl-step-name:disabled { background: transparent; color: var(--text); }
.fl-panel-body { flex: 1; overflow: auto; padding: 12px 16px 24px; }
.fl-panel-body .field { margin-bottom: 14px; }
.fl-code { background: #f8f8f8; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; font-size: 12px; overflow: auto; max-height: 420px; white-space: pre-wrap; word-break: break-word; margin: 0; }
.fl-add-group { margin-bottom: 14px; }
.fl-add-head { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.fl-add-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 7px 8px; border-radius: var(--radius); cursor: pointer; text-align: left; font: inherit; }
.fl-add-item:hover { background: var(--hover); }
.fl-add-item .fl-ico { width: 24px; height: 24px; }
.fl-token-wrap { position: relative; display: flex; align-items: flex-start; gap: 4px; }
.fl-token { flex: 1; min-height: 32px; border: 1px solid var(--border2); border-bottom-color: var(--border-strong); border-radius: var(--radius); padding: 4px 8px; background: #fff; line-height: 22px; outline: none; word-break: break-word; white-space: pre-wrap; }
.fl-token.multi { min-height: 72px; }
.fl-token:focus { border-bottom: 2px solid #0f6cbd; }
.fl-token.empty::before { content: attr(data-ph); color: var(--text3); pointer-events: none; }
.fl-token[contenteditable="false"] { background: #fafafa; }
.fl-token-tools { display: flex; flex-direction: column; opacity: .35; }
.fl-token-wrap:focus-within .fl-token-tools, .fl-token-wrap:hover .fl-token-tools { opacity: 1; }
.fl-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid; border-radius: 3px; padding: 0 4px 0 6px; margin: 0 2px; font-size: 12px; line-height: 20px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; user-select: none; }
.fl-chip .x { cursor: pointer; color: var(--text2); padding: 0 2px; }
.fl-chip .x:hover { color: var(--danger); }
.fl-chip.fx b { font-style: italic; }
.fl-picker { position: fixed; z-index: 80; width: 340px; max-height: 420px; display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: var(--shadow16); }
.fl-picker .pivot { padding: 4px 12px 0; }
.fl-picker-list { overflow: auto; padding: 0 4px 8px; }
.fl-picker-group { font-size: 12px; font-weight: 600; color: var(--text2); padding: 8px 8px 4px; }
.fl-picker-item { display: flex; align-items: flex-start; gap: 8px; width: 100%; border: 0; background: none; padding: 6px 8px; border-radius: var(--radius); cursor: pointer; text-align: left; font: inherit; }
.fl-picker-item:hover { background: var(--hover); }
.fl-dot { width: 10px; height: 10px; border-radius: 3px; margin-top: 4px; flex-shrink: 0; }
.fl-expr-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px 0; }
.fl-expr-row textarea { flex: 1; }
.fl-fn-list { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px; }
.fl-fn { border: 1px solid var(--border2); background: #fff; border-radius: 12px; padding: 2px 8px; font-size: 12px; cursor: pointer; font-family: Consolas, monospace; }
.fl-fn:hover { border-color: #0f6cbd; color: #0f6cbd; }
.fl-cond { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.fl-cond-row { display: grid; grid-template-columns: 1fr 150px 1fr auto; gap: 6px; align-items: start; }
.fl-cond-join { width: 90px; }
.fl-map-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 6px; margin-bottom: 6px; align-items: start; }
.fl-input-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.fl-trigger-list { display: flex; flex-direction: column; gap: 6px; }
.fl-trigger-choice { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.fl-trigger-choice:hover { background: var(--hover); }
.fl-details { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.fl-box { border: 1px solid var(--border); border-radius: 8px; padding: 4px 18px 14px; }
.fl-box h3 { font-size: 15px; margin: 12px 0; }
.fl-kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; margin: 0; }
.fl-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .fl-details { grid-template-columns: 1fr; }
  .fl-panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 20; box-shadow: var(--shadow16); width: 100%; }
  .fl-cond-row { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------------ Power Pages */
.pp-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.pp-card-site { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: var(--shadow2); display: flex; flex-direction: column; }
.pp-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.pp-card-title { display: flex; align-items: center; gap: 8px; }
.pp-card-actions { display: flex; gap: 8px; margin-top: 6px; }
.pp-card-actions .btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.pp-thumb { height: 140px; display: flex; flex-direction: column; overflow: hidden; border-bottom: 1px solid var(--border); pointer-events: none; }
.pp-thumb-head { height: 26px; font-size: 11px; font-weight: 600; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-thumb-hero { height: 46px; margin: 8px 10px; border-radius: 4px; opacity: .85; }
.pp-thumb-lines { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px; }
.pp-thumb-lines span { height: 6px; border-radius: 3px; background: rgba(0,0,0,.12); }
.pp-thumb-lines span:nth-child(2) { width: 80%; } .pp-thumb-lines span:nth-child(3) { width: 60%; }
.pp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.pp-tpl { border: 2px solid var(--border); border-radius: 8px; background: #fff; padding: 0 0 10px; display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; overflow: hidden; font: inherit; }
.pp-tpl b, .pp-tpl > span { padding: 0 12px; }
.pp-tpl.selected { border-color: #0f6cbd; box-shadow: 0 0 0 1px #0f6cbd; }
.pp-studio { display: flex; flex-direction: column; height: 100%; }
.pp-studio-top { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--border); min-height: 48px; background: #fff; flex-wrap: wrap; }
.pp-studio-top .btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.pp-studio-main { flex: 1; display: flex; min-height: 0; }
.pp-rail { width: 76px; border-right: 1px solid var(--border); background: #fafafa; display: flex; flex-direction: column; padding: 6px 0; flex-shrink: 0; }
.pp-rail-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; font-size: 11px; color: var(--text2); text-decoration: none; border-left: 3px solid transparent; }
.pp-rail-item:hover { background: var(--hover); }
.pp-rail-item.active { color: #0f6cbd; border-left-color: #0f6cbd; background: #fff; font-weight: 600; }
.pp-studio-body { flex: 1; min-width: 0; display: flex; }
.pp-ws { flex: 1; display: flex; min-width: 0; min-height: 0; }
.pp-ws-pad { padding: 20px 28px; overflow: auto; }
.pp-tree { width: 260px; border-right: 1px solid var(--border); overflow: auto; padding: 8px 0 24px; flex-shrink: 0; background: #fff; }
.pp-tree-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 8px; }
.pp-tree-group { font-size: 12px; font-weight: 600; color: var(--text2); padding: 12px 12px 4px; text-transform: none; }
.pp-tree-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; cursor: pointer; color: var(--text); text-decoration: none; font-size: 13px; border-left: 3px solid transparent; }
.pp-tree-item:hover { background: var(--hover); }
.pp-tree-item.active { background: #ebf3fc; border-left-color: #0f6cbd; font-weight: 600; }
.pp-tree-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-tree-item .icon-btn { opacity: 0; }
.pp-tree-item:hover .icon-btn, .pp-tree-item.active .icon-btn { opacity: 1; }
.pp-canvas-wrap { flex: 1; min-width: 0; overflow: auto; background: #e9e9e9; padding: 16px; }
.pp-canvas-scroll { max-width: 1240px; margin: 0 auto; box-shadow: var(--shadow8, 0 4px 12px rgba(0,0,0,.15)); }
.pp-site.pp-canvas { min-height: 600px; }
.pp-editable { cursor: pointer; position: relative; }
.pp-editable:hover { outline: 2px dashed #0f6cbd; outline-offset: -2px; }
.pp-edit-section { position: relative; outline-offset: -1px; }
.pp-edit-section:hover { outline: 1px dashed #0f6cbd; }
.pp-edit-section > .pp-tools { position: absolute; top: 4px; right: 8px; }
.pp-tools { display: none; align-items: center; gap: 4px; background: #fff; border: 1px solid #c8c6c4; border-radius: 4px; padding: 2px 4px; box-shadow: var(--shadow4); z-index: 3; font-size: 13px; color: #242424; font-family: 'Segoe UI', sans-serif; }
.pp-edit-section:hover > .pp-tools, .pp-edit-comp:hover > .pp-tools, .pp-edit-comp:focus-within > .pp-tools { display: flex; }
.pp-tools .btn { height: 26px; padding: 0 8px; }
.pp-tools .input { font-size: 12px; }
.pp-color { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; padding: 0 4px; }
.pp-color input { width: 22px; height: 22px; border: 0; padding: 0; background: none; cursor: pointer; }
.pp-edit-comp { position: relative; border-radius: 3px; }
.pp-edit-comp:hover, .pp-edit-comp:focus-within { outline: 1px solid #0f6cbd; outline-offset: 4px; }
.pp-edit-comp > .pp-tools { position: absolute; top: -40px; left: 0; white-space: nowrap; }
.pp-texttools { display: inline-flex; align-items: center; gap: 2px; }
.pp-edit-comp .pp-text[contenteditable="true"] { outline: none; cursor: text; min-height: 1.5em; }
.pp-add-row { display: flex; justify-content: center; height: 0; position: relative; z-index: 2; }
.pp-add-section { position: relative; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #0f6cbd; background: #fff; color: #0f6cbd; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .1s; padding: 0; }
.pp-canvas main:hover .pp-add-section, .pp-add-section:focus { opacity: 1; }
.pp-add-comp { border: 1px dashed #8a8886; background: rgba(255,255,255,.6); color: #424242; border-radius: 4px; padding: 6px 10px; font: 13px 'Segoe UI', sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; opacity: 0; }
.pp-edit-section:hover .pp-add-comp, .pp-add-comp:focus, .pp-col:only-child .pp-add-comp:only-child { opacity: 1; }
.pp-col:empty::before { content: ''; min-height: 40px; }
.pp-placeholder { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 120px; border: 1px dashed #a19f9d; border-radius: 4px; color: #605e5c; background: rgba(255,255,255,.5); font: 13px 'Segoe UI', sans-serif; padding: 12px; text-align: center; overflow: hidden; }
.pp-spacer { background: repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 6px, transparent 6px 12px); }
.pp-ph-tag { display: inline-flex; align-items: center; gap: 6px; font: 12px 'Segoe UI', sans-serif; color: #0f548c; background: #ebf3fc; border-radius: 3px; padding: 2px 8px; margin-bottom: 10px; }
.pp-shimmer { display: block; height: 10px; border-radius: 5px; background: rgba(0,0,0,.08); width: 70%; }
.pp-readonly .pp-tools, .pp-readonly .pp-add-row, .pp-readonly .pp-add-comp { display: none !important; }
.pp-readonly .pp-editable { pointer-events: none; }
.pp-layouts { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-layout-pick { width: 132px; border: 2px solid var(--border); border-radius: 6px; background: #fff; padding: 8px; display: flex; flex-direction: column; gap: 6px; align-items: center; cursor: pointer; font: inherit; font-size: 12px; }
.pp-layout-pick.selected { border-color: #0f6cbd; }
.pp-layout-art { width: 100%; height: 54px; display: grid; gap: 4px; }
.pp-layout-art i { background: #e1dfdd; border-radius: 2px; }
.pp-layout-art.blank { grid-template-columns: 1fr; } .pp-layout-art.blank i:nth-child(n+2) { display: none; }
.pp-layout-art.hero { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .pp-layout-art.hero i:first-child { grid-column: span 2; } 
.pp-layout-art.three { grid-template-columns: 1fr 1fr 1fr; }
.pp-style-pane { width: 300px; }
.pp-theme { display: flex; align-items: center; gap: 10px; width: calc(100% - 16px); margin: 2px 8px; padding: 8px; border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; font: inherit; text-align: left; }
.pp-theme:hover { background: var(--hover); }
.pp-theme.selected { border-color: #0f6cbd; background: #ebf3fc; }
.pp-swatches { display: inline-flex; border-radius: 4px; overflow: hidden; border: 1px solid rgba(0,0,0,.1); }
.pp-swatches i { width: 14px; height: 22px; }
.pp-color-row { display: flex; align-items: center; gap: 10px; padding: 4px 12px; }
.pp-color-row input { width: 34px; height: 26px; border: 1px solid var(--border2); border-radius: 4px; padding: 1px; background: #fff; }
.pp-style-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 12px; }
.pp-data-list { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.pp-data-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #f0f0f0; color: var(--text); text-decoration: none; }
.pp-data-row:last-child { border-bottom: 0; }
.pp-data-row:hover { background: var(--hover); }
.pp-data-row .grow { flex: 1; }
.pp-sec-body { flex: 1; min-width: 0; }
.pp-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-sec-head h2 { margin: 0; }
.pp-sec-body .list-wrap { padding: 0; }
.pp-privs { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pp-perm-item { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.pp-perm-item:hover { background: var(--hover); }
.pp-action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pp-action-row .check { min-width: 180px; }
@media (max-width: 760px) {
  .pp-tree { width: 190px; }
  .pp-rail { width: 56px; } .pp-rail-item span { display: none; }
  .pp-ws-pad { padding: 14px; }
}
/* ------------------------------------------------------------------ Power BI */
.bi-home { display: flex; height: 100%; min-height: 0; }
.bi-ws-nav { width: 240px; border-right: 1px solid var(--border); overflow: auto; padding: 8px 0; flex-shrink: 0; }
.bi-home-main { flex: 1; min-width: 0; overflow: auto; }
.bi-access-row { display: grid; grid-template-columns: 1fr 140px auto; gap: 6px; margin-bottom: 6px; }
.bi-model-tables { display: flex; flex-wrap: wrap; gap: 12px; }
.bi-model-table { border: 1px solid var(--border); border-radius: 6px; width: 260px; max-height: 300px; display: flex; flex-direction: column; background: #fff; box-shadow: var(--shadow2); }
.bi-model-table-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: #faf9f8; border-radius: 6px 6px 0 0; }
.bi-model-table-head b { flex: 1; }
.bi-model-fields { overflow: auto; padding: 4px 0; }
.bi-field { display: flex; align-items: center; gap: 6px; padding: 2px 10px; font-size: 13px; }
.bi-field.measure { color: #0f548c; }
.bi-field-ico { width: 14px; text-align: center; color: var(--text2); font-size: 12px; flex-shrink: 0; }
.bi-report { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.bi-report-main { flex: 1; display: flex; min-height: 0; }
.bi-canvas-col { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #eaeaea; }
.bi-canvas-wrap { flex: 1; overflow: auto; padding: 12px; display: flex; justify-content: center; align-items: flex-start; }
.bi-canvas { position: relative; background: #fff; box-shadow: var(--shadow4); flex-shrink: 0; }
.bi-vis { position: absolute; display: flex; flex-direction: column; background: #fff; border: 1px solid transparent; border-radius: 4px; overflow: hidden; }
.bi-vis:hover { border-color: #c8c6c4; }
.bi-vis.selected { border-color: #0f6cbd; box-shadow: 0 0 0 1px #0f6cbd; }
.bi-vis-head { position: absolute; top: 2px; right: 2px; display: none; gap: 2px; z-index: 2; background: rgba(255,255,255,.9); border-radius: 4px; }
.bi-vis:hover .bi-vis-head, .bi-vis.selected .bi-vis-head, .bi-tile:hover .bi-vis-head { display: flex; }
.bi-vis-title { font-size: 14px; font-weight: 600; padding: 8px 10px 2px; color: #252423; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 0; flex-shrink: 0; }
.bi-vis-body { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.bi-vis-msg { display: flex; align-items: center; justify-content: center; gap: 6px; height: 100%; color: var(--text2); font-size: 13px; text-align: center; padding: 10px; }
.bi-vis-msg.err { color: var(--danger); }
.bi-resize { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, #0f6cbd 50%); opacity: 0; }
.bi-vis.selected .bi-resize { opacity: .8; }
.bi-empty-canvas { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text2); text-align: center; }
.bi-focus-bar { position: absolute; top: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; padding: 0 8px; }
.bi-pages { display: flex; gap: 2px; align-items: center; padding: 0 8px; background: #f3f2f1; border-top: 1px solid var(--border); min-height: 34px; overflow-x: auto; flex-shrink: 0; }
.bi-page-tab { border: 0; background: none; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.bi-page-tab.active { border-bottom-color: #f2c811; font-weight: 600; background: #fff; }
.bi-page-tab.hidden-page { color: var(--text2); }
.bi-page-add { border: 0; background: none; cursor: pointer; padding: 6px; border-radius: 4px; }
.bi-page-add:hover { background: #e1dfdd; }
.bi-panes { display: flex; border-left: 1px solid var(--border); background: #fff; flex-shrink: 0; overflow: hidden; }
.bi-pane { width: 220px; border-right: 1px solid var(--border); overflow: auto; display: flex; flex-direction: column; }
.bi-pane:last-child { border-right: 0; }
.bi-pane-title { font-weight: 600; padding: 10px 10px 6px; font-size: 14px; }
.bi-vis-types { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 0 8px 8px; border-bottom: 1px solid var(--border); }
.bi-vis-type { border: 1px solid transparent; background: none; height: 30px; border-radius: 3px; cursor: pointer; color: #605e5c; display: flex; align-items: center; justify-content: center; }
.bi-vis-type:hover { background: var(--hover); }
.bi-vis-type.active { border-color: #0f6cbd; background: #ebf3fc; color: #0f6cbd; }
.bi-panes .pivot { padding: 0 8px; }
.bi-wells, .bi-format { padding: 8px 10px 16px; }
.bi-well { margin-bottom: 12px; }
.bi-well-label { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 4px; }
.bi-well-item { display: flex; align-items: center; gap: 4px; border: 1px solid #e1dfdd; background: #f3f2f1; border-radius: 3px; padding: 2px 2px 2px 8px; font-size: 12px; margin-bottom: 3px; }
.bi-well-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.input.bi-add-field { height: 28px; font-size: 12px; border-style: dashed; color: var(--text2); }
.bi-fmt-card { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.bi-color-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.bi-color-row input { width: 28px; height: 22px; border: 1px solid var(--border2); padding: 0; background: #fff; }
.bi-data-list { padding: 0 6px 16px; }
.bi-data-list details summary { list-style: none; cursor: pointer; display: flex; gap: 6px; align-items: center; font-weight: 600; font-size: 13px; padding: 4px; }
.bi-data-field { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 4px 2px 18px; cursor: pointer; }
.bi-data-field:hover { background: var(--hover); }
.bi-filters { background: #faf9f8; }
.bi-filter-section { padding: 6px 8px 10px; border-bottom: 1px solid var(--border); }
.bi-filter-card { background: #fff; border: 1px solid #e1dfdd; border-radius: 3px; margin-bottom: 6px; font-size: 12px; }
.bi-filter-head { display: flex; align-items: center; gap: 4px; padding: 6px 4px 6px 8px; cursor: pointer; flex-wrap: wrap; }
.bi-filter-head .grow { flex-basis: 100%; order: 3; }
.bi-filter-head b { flex: 1; }
.bi-filter-head.active { background: #eff6fc; }
.bi-filter-body { padding: 6px 8px 10px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #f0f0f0; }
.bi-filter-body .input { height: 28px; font-size: 12px; }
.bi-filter-values { max-height: 200px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.bi-adv-row { display: flex; gap: 4px; flex-wrap: wrap; }
.bi-svg { display: block; overflow: visible; }
.bi-svg .bi-axis { font-size: 11px; fill: #605e5c; }
.bi-svg .bi-grid { stroke: #e9e9e9; stroke-width: 1; }
.bi-svg .bi-label { font-size: 11px; fill: #252423; }
.bi-svg .bi-label-in { font-size: 11px; fill: #fff; font-weight: 600; }
.bi-svg .bi-big { font-size: 26px; font-weight: 600; fill: #252423; }
.bi-mark { cursor: pointer; }
.bi-chart-wrap { display: flex; height: 100%; align-items: center; justify-content: center; gap: 8px; }
.bi-chart-wrap.col { flex-direction: column; align-items: stretch; justify-content: flex-start; }
.bi-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: #605e5c; padding: 0 10px; }
.bi-chart-wrap:not(.col) .bi-legend { flex-direction: column; max-width: 40%; }
.bi-legend span { display: inline-flex; align-items: center; gap: 4px; }
.bi-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.bi-card { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bi-card-value { font-weight: 600; color: #252423; font-size: 34px; line-height: 1.1; }
.bi-card-label { color: #605e5c; font-size: 13px; margin-top: 4px; text-align: center; }
.bi-mcard { display: flex; flex-direction: column; gap: 10px; padding: 8px 12px; overflow: auto; height: 100%; }
.bi-mcard-item { border-left: 3px solid #118dff; padding-left: 10px; }
.bi-mcard-v { font-size: 22px; font-weight: 600; }
.bi-kpi { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 3px; }
.bi-kpi-trend { display: block; }
.bi-table-wrap { height: 100%; overflow: auto; padding: 0 6px 6px; }
.bi-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bi-table th { position: sticky; top: 0; background: #fff; text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #c8c6c4; cursor: pointer; white-space: nowrap; }
.bi-table td { padding: 5px 8px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; }
.bi-table .num { text-align: right; }
.bi-table tr.total td { font-weight: 600; border-top: 1px solid #252423; border-bottom: 0; }
.bi-table tbody tr:hover td { background: #f6f6f6; }
.bi-table tr.sel td { background: #ebf3fc; }
.bi-slicer { height: 100%; display: flex; flex-direction: column; padding: 4px 10px; }
.bi-slicer-head { font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; align-items: center; min-height: 26px; }
.bi-slicer-list { overflow: auto; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.bi-dash-page { display: flex; flex-direction: column; height: 100%; }
.bi-dash { flex: 1; overflow: auto; padding: 16px; background: #eaeaea; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 150px; gap: 12px; align-content: start; }
.bi-dash .bi-empty-canvas { position: static; grid-column: 1 / -1; padding: 40px; }
.bi-tile { position: relative; background: #fff; border-radius: 4px; box-shadow: var(--shadow2); display: flex; flex-direction: column; overflow: hidden; cursor: pointer; }
.bi-quick { position: fixed; inset: 24px; z-index: 60; background: #fff; border-radius: 8px; box-shadow: var(--shadow16); display: flex; flex-direction: column; overflow: hidden; }
.bi-quick-head { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.bi-quick-body { flex: 1; display: flex; min-height: 0; }
.bi-quick-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bi-quick-editor > .bi-report { flex: 1; }
.bi-quick-fields { width: 220px; border-left: 1px solid var(--border); overflow: auto; padding: 0 6px 12px; }
@media (max-width: 900px) { .bi-pane { width: 180px; } .bi-panes .bi-filters { display: none; } }
@media (max-width: 700px) { .bi-ws-nav { width: 170px; } .bi-panes { display: none; } }.bi-pane-collapsed { width: 32px; border: 0; border-right: 1px solid var(--border); background: #faf9f8; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); }
.bi-pane-collapsed span { writing-mode: vertical-rl; }
.bi-pane-collapsed:hover { background: var(--hover); }
/* ---------- Solutions */
.sol-layout { display: flex; align-items: stretch; margin: 8px 20px 0; border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); min-height: 420px; }
.sol-nav { width: 220px; flex-shrink: 0; padding: 8px; border-right: 1px solid var(--border); }
.sol-nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius); color: var(--text); font-size: 13.5px; }
.sol-nav-item:hover { background: var(--hover); text-decoration: none; }
.sol-nav-item.active { background: var(--accent-tint); font-weight: 600; }
.sol-nav-item .count { margin-left: auto; color: var(--text2); font-size: 12px; font-weight: 400; }
.sol-nav-sub .sol-nav-item { padding-left: 36px; }
.sol-main { flex: 1; min-width: 0; padding: 12px 0 16px; }
.sol-main > .msgbar { margin: 0 20px 12px; }
.sol-main .list-tools { padding: 0 20px 4px; }
.sol-managed { display: inline-flex; align-items: center; gap: 4px; color: var(--text2); }
.sol-overview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; padding: 0 20px; }
.sol-kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; margin: 0 0 12px; font-size: 13.5px; }
.sol-kv dt { color: var(--text2); }
.sol-kv dd { margin: 0; word-break: break-word; }
.sol-link-add { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; }
.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.radio input { margin: 3px 0 0; accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.radio .hint { display: block; color: var(--text2); font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
.sol-table-pick { border: 1px solid var(--border); border-radius: var(--radius-l); padding: 12px 14px; margin-bottom: 12px; }
.sol-table-pick-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sol-table-pick-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-left: 26px; }
.sol-missing { margin: 0 0 12px; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
@media (max-width: 760px) {
  .sol-layout { flex-direction: column; margin: 8px 12px 0; }
  .sol-nav { width: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .sol-overview { grid-template-columns: 1fr; }
}

/* ---------- Model-driven apps: shell, charts, dashboards, designers */
body.app-playing .leftnav { display: none; }
body.app-playing .brand { cursor: pointer; }
.app-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background: #0f6cbd; color: #fff; }
.app-sitemap { display: flex; flex-direction: column; }
.app-sitemap .nav-expander { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.app-sitemap .nav-expander .fi:last-child { margin-left: auto; margin-right: 8px; }
.app-sitemap .nav-row { display: flex; align-items: center; padding-right: 6px; }
.app-sitemap .nav-row .nav-item { flex: 1; min-width: 0; padding-left: 40px; }
.app-sitemap .nav-row .icon-btn { opacity: 0; }
.app-sitemap .nav-row:hover .icon-btn, .app-sitemap .nav-row .icon-btn:focus { opacity: 1; }
.app-sitemap .nav-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; cursor: pointer; font: inherit; }
.area-switcher { margin-top: auto; padding: 8px; border-top: 1px solid var(--border); }
.area-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: var(--radius); cursor: pointer; font: inherit; color: var(--text); }
.area-btn:hover { background: var(--hover); }
.area-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background: #0f6cbd; color: #fff; font-size: 12px; font-weight: 600; }
.area-btn .fi:last-child { margin-left: auto; }
.grid-split { display: flex; flex: 1; min-height: 0; }
.grid-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chart-pane { width: 400px; flex-shrink: 0; border-left: 1px solid var(--border); padding: 8px 12px; background: #fff; overflow: auto; }
.ch-widget { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.ch-head { display: flex; align-items: center; gap: 4px; min-height: 32px; }
.ch-head .spacer { flex: 1; }
.ch-picker { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: var(--radius); color: var(--text); max-width: 100%; text-align: left; }
.ch-picker:hover { background: var(--hover); }
.ch-title { padding: 4px 6px; }
.ch-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 12.5px; padding: 0 6px; }
.link-btn { border: 0; background: none; color: var(--link); cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 4px; padding: 2px; }
.link-btn:disabled { color: var(--text3); cursor: default; }
.ch-body { flex: 1; min-height: 120px; position: relative; }
.ch-empty { display: flex; align-items: center; justify-content: center; min-height: 140px; color: var(--text2); text-align: center; padding: 12px; }
.ch-wrap { display: flex; align-items: center; gap: 8px; }
.ch-wrap.col { flex-direction: column; align-items: stretch; }
.ch-svg { display: block; overflow: visible; }
.ch-grid { stroke: #eff2f6; }
.ch-axisline { stroke: #a5acb5; }
.ch-axis { font-size: 10.5px; fill: #3b3b3b; }
.ch-label { font-size: 9.5px; fill: #3b3b3b; }
.ch-label.light { fill: #fff; font-weight: 600; pointer-events: none; }
.ch-point { cursor: pointer; }
.ch-point:hover { opacity: 0.8; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--text2); justify-content: center; max-width: 100%; }
.ch-wrap:not(.col) .ch-legend { flex-direction: column; flex-wrap: nowrap; max-width: 40%; justify-content: flex-start; }
.ch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ch-legend i { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.ch-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 8px; }
.ch-tag { border: 0; background: none; color: #0f6cbd; cursor: pointer; font-family: inherit; }
.ch-tag span { font-size: 11px; color: var(--text2); margin-left: 4px; }
.ch-expand-body { min-height: 480px; }
.dash-page { display: flex; flex-direction: column; min-height: 100%; }
.dash-head { padding: 12px 20px 4px; }
.dash-picker { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; padding: 4px 6px; border-radius: var(--radius); color: var(--text); }
.dash-picker:hover { background: var(--hover); }
.dash-picker h1 { font-size: 20px; font-weight: 600; margin: 0; }
.dash-scroll { padding: 8px 20px 24px; }
.dash-grid { display: grid; gap: 12px; grid-auto-rows: 150px; grid-auto-flow: dense; }
.dash-tile { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow2); padding: 10px 12px; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.dash-tile.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.dash-tile-head { font-size: 14px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-tile-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.dash-tile-body .list-wrap { padding: 0; }
.dash-iframe { width: 100%; height: 100%; border-radius: 4px; }
.dash-list-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 0; font-size: 12.5px; }
.dash-sublist { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 4px; }
.dash-viewpick { margin-bottom: 4px; }
.dash-viewpick .input { height: 28px; font-size: 12.5px; }
.dash-ph { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text2); font-size: 13px; text-align: center; word-break: break-all; }
.dash-empty { border-style: dashed; box-shadow: none; background: #fafafa; cursor: default; }
.dash-add { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.dash-add-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text); }
.dash-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.dash-designer-canvas { max-width: 1200px; }
.app-designer .ad-top .ad-name { font-weight: 600; font-size: 15px; }
.app-designer .pp-studio-main { background: #f5f5f5; }
.ad-left, .ad-right { width: 290px; flex-shrink: 0; background: #fff; overflow: auto; padding: 10px 12px; }
.ad-left { border-right: 1px solid var(--border); }
.ad-right { border-left: 1px solid var(--border); }
.ad-right h3 { font-size: 16px; margin: 4px 0 12px; }
.ad-center { flex: 1; min-width: 0; overflow: auto; padding: 16px; display: flex; }
.ad-sec-head { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px; font-size: 13px; }
.ad-sec-head .spacer { flex: 1; }
.ad-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius); cursor: pointer; font-size: 13.5px; }
.ad-item:hover { background: var(--hover); }
.ad-item.selected { background: var(--accent-tint); }
.ad-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-item .icon-btn { opacity: 0.55; }
.ad-group-head { font-weight: 600; font-size: 12.5px; color: var(--text2); text-transform: none; }
.ad-page { padding-left: 18px; }
.ad-empty { padding: 4px 18px 8px; }
.ad-area { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.ad-frame { flex: 1; min-width: 560px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow8); display: flex; flex-direction: column; overflow: hidden; }
.ad-frame-top { height: 40px; background: #0f6cbd; color: #fff; display: flex; align-items: center; padding: 0 14px; }
.ad-frame-brand { font-weight: 600; }
.ad-frame-body { flex: 1; display: flex; min-height: 420px; }
.ad-frame-body .sitemap { pointer-events: auto; }
.ad-frame-content { flex: 1; min-width: 0; overflow: auto; padding: 0 0 12px; }
.ad-preview-cmd { display: flex; gap: 16px; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text2); }
.ad-preview-title { font-size: 18px; font-weight: 600; padding: 12px 14px 4px; }
.ad-preview-bar { display: flex; align-items: center; gap: 6px; padding: 4px 14px 8px; }
.ad-preview-bar .spacer { flex: 1; }
.ad-preview-grid .list-wrap { padding: 0 8px; pointer-events: none; }
.ad-dash-preview { padding: 12px; pointer-events: none; }
.ad-blank { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text2); padding: 40px; text-align: center; }
.ad-props-empty { padding: 20px 4px; }
.ad-assets { margin-top: 14px; }
.ad-assets-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ad-assets-head .check { font-size: 12.5px; }
.ad-links { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 13px; }
.ad-links a { display: inline-flex; align-items: center; gap: 6px; }
.ad-type-tiles { display: grid; gap: 10px; }
.ad-type-tiles .tile.picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ad-settings-dialog { min-width: min(420px, 80vw); }
.ad-settings { margin-top: 12px; }
.chd { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; padding: 8px 28px 24px; align-items: start; }
.chd-form .chd-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.chd-form .chd-row .input { min-width: 0; flex: 1; }
.chd-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.chd-type { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--text); text-align: center; }
.chd-type:hover { border-color: var(--border2); }
.chd-type.active { border-color: var(--accent); background: var(--accent-tint); }
.chd-preview { position: sticky; top: 52px; }
.chd-preview-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.chd-preview-head .spacer { flex: 1; }
.chd-preview-head .input { width: auto; max-width: 220px; }
@media (max-width: 900px) {
  .chart-pane { display: none; }
  .chd { grid-template-columns: 1fr; padding: 8px 16px 24px; }
  .dash-grid { grid-template-columns: 1fr !important; }
  .dash-tile { grid-column: auto !important; }
  .ad-left, .ad-right { width: 220px; }
}

/* ---------- Products (Power Apps, Automate, BI, Pages) and the app launcher */
body[data-portal="automate"] .topbar { background: #0066ff; }
body[data-portal="bi"] .topbar { background: #f2c811; color: #252423; }
body[data-portal="bi"] .topbar .brand, body[data-portal="bi"] .topbar .topbar-btn, body[data-portal="bi"] .topbar .env, body[data-portal="bi"] .topbar .env-label { color: #252423; }
body[data-portal="bi"] .topbar .topbar-btn:hover { background: rgba(0,0,0,.08); }
body[data-portal="pages"] .topbar { background: #0b6a62; }
body[data-portal="pages"] .leftnav { display: none; }
body[data-portal="admin"] .topbar { background: #0f548c; }
.nav-toggle { color: var(--text2); }
.launcher-shade { position: fixed; inset: 48px 0 0 0; background: rgba(0,0,0,.2); z-index: 40; }
.launcher { position: fixed; top: 48px; left: 0; bottom: 0; width: 320px; max-width: 100vw; background: #fff; box-shadow: var(--shadow16, 0 6px 24px rgba(0,0,0,.2)); z-index: 41; display: flex; flex-direction: column; padding: 12px 8px; overflow: auto; animation: launcher-in .12s ease-out; }
@keyframes launcher-in { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
.launcher-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 8px; font-size: 15px; }
.launcher-title { font-size: 13px; font-weight: 600; color: var(--text2); padding: 8px 10px 6px; }
.launcher-list { display: flex; flex-direction: column; gap: 2px; }
.launcher-app { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius); color: var(--text); }
.launcher-app:hover { background: var(--hover); text-decoration: none; }
.launcher-app.current { background: var(--selected); }
.launcher-app > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.launcher-ico { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.launcher-all { display: inline-flex; align-items: center; gap: 4px; margin: 14px 10px 0; font-size: 13.5px; }
.automate-hero { background: linear-gradient(120deg, #ebf3fc, #fff); }

/* ------------------------------------------------------------------ data management: rollups, duplicates, system jobs */
.badge.danger { background: var(--danger-tint); color: var(--danger); }
a.link-card { color: inherit; text-decoration: none; display: block; }
a.link-card:hover { box-shadow: var(--shadow8); }
.criteria-grid { table-layout: auto; }
.criteria-grid td { overflow: visible; padding: 6px 8px; height: auto; }
.criteria-grid .input { min-width: 140px; }
.rollup-editor .rollup-step { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow2); padding: 14px 18px 6px; margin: 14px 0; }
.rollup-step-head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text2); margin-bottom: 12px; }
.rollup-step-head .step-no { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: 0; }
.rollup-cond { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr 32px; gap: 8px; align-items: center; margin-bottom: 8px; }
.rollup-summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-l); background: var(--brand-tint); color: var(--brand); font-weight: 600; margin-top: 4px; }
.calc-cond { display: grid; grid-template-columns: 1.4fr 1fr 110px 1.2fr 32px; gap: 8px; align-items: center; margin-bottom: 8px; }
.calc-summary { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: var(--radius-l); background: var(--brand-tint); color: var(--brand); margin-top: 4px; font-family: var(--mono); font-size: 13px; line-height: 1.6; }
.calc-summary .fi { margin-top: 3px; flex: none; }
.calc-summary-text { min-width: 0; overflow-wrap: anywhere; }
.calc-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.calc-eq { font: italic 600 15px var(--mono); color: var(--accent); }
.calc-functions td { height: 30px; font-size: 13px; }
.calc-functions td.mono { white-space: nowrap; width: 1%; padding-right: 24px; }
@media (max-width: 760px) { .calc-cond { grid-template-columns: 1fr 1fr; } .calc-tools { flex-wrap: wrap; } }
.rollup-field { display: flex; align-items: flex-start; gap: 6px; }
.rollup-field .ro { padding-bottom: 0; min-height: 0; }
.rollup-field .warn { color: var(--warning); }
.rollup-calc { margin-top: 2px; color: var(--brand); }
.dialog.wide { width: min(860px, calc(100vw - 32px)); max-width: none; }
.dup-current { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 8px; }
.dup-found { display: flex; align-items: center; gap: 12px; }
.dup-grid { border: 1px solid var(--border); border-radius: var(--radius); max-height: 280px; overflow: auto; }
.dup-group { margin-bottom: 12px; padding: 12px 16px; }
.dup-base { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.merge-grid { max-height: 52vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.merge-grid .list { table-layout: auto; }
.merge-grid td, .merge-grid th { height: auto; padding: 6px 10px; white-space: normal; vertical-align: top; }
.merge-grid .ro { padding: 0; min-height: 0; }
.merge-primary { display: flex; flex-direction: column; gap: 2px; font-weight: 400; cursor: pointer; }
.merge-primary input { align-self: flex-start; }
.merge-pick { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.merge-section td { background: var(--bg); font-weight: 600; }
.merge-section a { font-weight: 400; font-size: 12px; }

/* ---------------------------------------------------------------- forms: run time */
.form-body:has(> .fm-tab) { display: block; }
.fm-tab { display: grid; gap: 16px; align-items: start; }
.fm-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fm-grid { display: grid; column-gap: 20px; }
.fm-cell { min-width: 0; }
.fm-spacer { min-height: 32px; }
.ffield.stack { grid-template-columns: 1fr; gap: 4px; }
.ffield.stack > label { padding-top: 0; }
.ffield.no-label { grid-template-columns: 1fr; }
.fm-subgrid { margin-bottom: 12px; box-shadow: none; }
.fm-subgrid .subgrid-head { flex-wrap: wrap; }
.fm-quickview { border-left: 3px solid var(--border2); padding: 2px 0 2px 12px; margin-bottom: 12px; }
.fm-qv-label { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.fm-qv-body .ffield { margin-bottom: 6px; }
.fm-qv-empty { padding: 4px 0 8px; }
.form-picker { border: 0; background: none; padding: 0 2px; font: inherit; color: var(--text2); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius); }
.form-picker:hover { background: var(--hover); color: var(--text); }
.record-head { position: relative; }
.record-head .header-fields { align-items: flex-start; }
.hdr-flyout { position: absolute; right: 24px; top: 100%; z-index: 20; width: min(420px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow16); padding: 14px 16px; }
.qc-body { display: grid; gap: 20px; }
.qc-section h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.fm-cards { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; }
.fm-card { border: 1px solid var(--border); border-radius: var(--radius-l); background: #fff; padding: 10px 12px; cursor: pointer; box-shadow: var(--shadow2); }
.fm-card:hover { border-color: var(--border-strong); }
.fm-card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fm-card-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 1px 0; }
.fm-card-line > span { flex: none; }
.fm-card-line > span:last-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
@media (max-width: 760px) {
  .fm-tab { grid-template-columns: 1fr !important; }
  .fm-grid { grid-template-columns: 1fr !important; }
  .fm-cell { grid-column: auto !important; }
  .qc-body { grid-template-columns: 1fr !important; }
  .record-head { flex-wrap: wrap; }
  .record-head .header-fields { margin-left: 0; width: 100%; gap: 18px; flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- form designer */
.fd-page { display: flex; flex-direction: column; height: 100%; }
.fd-title-bar { padding: 6px 20px; border-bottom: 1px solid var(--border); background: #fff; }
.fd-body { flex: 1; min-height: 0; display: grid; grid-template-columns: auto 1fr 300px; }
.fd-left { display: flex; min-height: 0; border-right: 1px solid var(--border); background: #fff; }
.fd-rail { width: 48px; border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; background: #faf9f8; }
.fd-rail button, .fd-rail-link { width: 36px; height: 36px; border: 0; background: none; border-radius: var(--radius); display: grid; place-items: center; color: var(--text2); cursor: pointer; }
.fd-rail button:hover, .fd-rail-link:hover { background: var(--hover); color: var(--text); }
.fd-rail button.active { background: var(--brand-tint); color: var(--brand); }
.fd-pane { width: 250px; overflow: auto; padding: 12px 14px; }
.fd-pane h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.fd-group { font-size: 12px; font-weight: 600; color: var(--text2); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .02em; }
.fd-comps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fd-comp { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; font: inherit; font-size: 12px; cursor: pointer; text-align: center; color: var(--text); }
.fd-comp:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-tint); }
.fd-collist { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.fd-colitem { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius); cursor: grab; font-size: 13px; }
.fd-colitem:hover { background: var(--hover); }
.fd-colitem .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-colitem.used { color: var(--text3); cursor: default; }
.fd-tree-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--radius); cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-tree-item:hover { background: var(--hover); }
.fd-tree-item.selected { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.fd-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #ececec; }
.fd-canvas-wrap { flex: 1; overflow: auto; padding: 20px; }
.fd-status { display: flex; align-items: center; gap: 14px; padding: 6px 14px; border-top: 1px solid var(--border); background: #fff; }
.fd-devices { display: flex; gap: 2px; }
.fd-devices button { border: 0; background: none; width: 30px; height: 28px; border-radius: var(--radius); cursor: pointer; display: grid; place-items: center; color: var(--text2); }
.fd-devices button.active { background: var(--brand-tint); color: var(--brand); }
.fd-frame { margin: 0 auto; max-width: 1100px; background: #f5f5f5; border-radius: var(--radius-l); box-shadow: var(--shadow8); padding: 0 0 20px; outline: 2px solid transparent; }
.fd-frame.fd-tablet { max-width: 820px; }
.fd-frame.fd-phone { max-width: 400px; }
.fd-frame.fd-phone .fd-tab-body, .fd-frame.fd-phone .fd-grid { grid-template-columns: 1fr !important; }
.fd-frame.fd-phone .fd-cell { grid-column: auto !important; }
.fd-frame.selected { outline-color: var(--brand); }
.fd-header { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px 10px; background: #fff; border-radius: var(--radius-l) var(--radius-l) 0 0; outline: 2px solid transparent; outline-offset: -2px; cursor: pointer; flex-wrap: wrap; }
.fd-header.selected { outline-color: var(--brand); }
.fd-title { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 200px; }
.fd-title-name { font-size: 20px; font-weight: 600; }
.fd-header-fields { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fd-hfield { display: flex; flex-direction: column; padding: 4px 10px; border: 1px dashed transparent; border-radius: var(--radius); font-size: 13px; cursor: pointer; min-width: 90px; }
.fd-hfield span { color: var(--text2); font-size: 12px; }
.fd-hfield:hover { border-color: var(--border2); }
.fd-hfield.selected { border: 2px solid var(--brand); }
.fd-type-tag { padding: 6px 20px 0; font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; background: #fff; }
.fd-tabs { display: flex; gap: 4px; padding: 4px 16px 0; background: #fff; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.fd-tabs button, .fd-tab-fake { border: 0; background: none; font: inherit; font-size: 14px; padding: 8px 10px 10px; cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; gap: 4px; align-items: center; color: var(--text2); }
.fd-tabs button.active { color: var(--text); font-weight: 600; border-bottom-color: var(--brand); }
.fd-tabs button.selected { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--radius); }
.fd-tab-fake { cursor: default; color: var(--text3); }
.fd-tab-body { display: grid; gap: 14px; padding: 16px 20px 0; align-items: start; }
.fd-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 60px; }
.fd-section { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); padding: 12px 14px; cursor: pointer; outline: 2px solid transparent; outline-offset: -1px; }
.fd-section:hover { border-color: var(--border-strong); }
.fd-section.selected { outline-color: var(--brand); }
.fd-section h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.fd-hidden-label { font-size: 12px; color: var(--text3); font-style: italic; margin-bottom: 8px; }
.fd-grid { display: grid; gap: 4px 14px; min-height: 40px; border-radius: var(--radius); }
.fd-cell { padding: 6px 8px; border: 1px dashed transparent; border-radius: var(--radius); cursor: pointer; min-width: 0; background: #fff; }
.fd-cell:hover { border-color: var(--border2); }
.fd-cell.selected { border: 2px solid var(--brand); padding: 5px 7px; background: var(--brand-tint); }
.fd-drop { box-shadow: 0 -3px 0 var(--brand) inset; background: var(--brand-tint) !important; }
.fd-field { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: center; }
.fd-field.stack { grid-template-columns: 1fr; gap: 3px; }
.fd-label { font-size: 13px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; }
.fd-label.hidden-label { text-decoration: line-through; color: var(--text3); }
.fd-label .req { color: var(--danger); margin-left: 2px; }
.fd-label .rec { color: var(--link); margin-left: 2px; }
.fd-input { height: 30px; border: 1px solid var(--border2); border-radius: var(--radius); background: #fff; padding: 0 8px; display: flex; align-items: center; font-size: 12px; overflow: hidden; white-space: nowrap; }
.fd-input.ro { background: #fafafa; border-style: dashed; }
.fd-empty { grid-column: 1 / -1; padding: 14px; border: 1px dashed var(--border2); border-radius: var(--radius); text-align: center; color: var(--text3); font-size: 12.5px; }
.fd-spacer { height: 30px; border: 1px dashed var(--border2); border-radius: var(--radius); display: grid; place-items: center; font-size: 11px; color: var(--text3); }
.fd-subgrid { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.fd-subgrid-head { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.fd-subgrid-head b { flex: 1; font-size: 13px; }
.fd-subgrid-cols { display: flex; background: #fafafa; border-bottom: 1px solid var(--border); }
.fd-subgrid-cols span { flex: 1; font-size: 12px; font-weight: 600; padding: 5px 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-subgrid-rows div { height: 22px; border-bottom: 1px solid #f0f0f0; }
.fd-quickview .fd-label { margin-bottom: 4px; }
.fd-qv-box { border-left: 3px solid var(--border2); padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; background: #fafafa; }
.fd-qv-fields { width: 100%; display: flex; gap: 6px; flex-wrap: wrap; }
.fd-qv-fields span { font-size: 11.5px; color: var(--text2); background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; }
.is-hidden { opacity: .5; }
.fd-right { border-left: 1px solid var(--border); background: #fff; overflow: auto; }
.fd-right-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff; z-index: 1; }
.fd-right-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.fd-props { padding: 12px 16px 24px; }
.fd-props h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .02em; }
.fd-props .check { margin: 6px 0; }
.fd-moves { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.fd-widths { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
@media (max-width: 1100px) {
  .main.flow-mode:has(.fd-page) { overflow: auto; }
  .fd-page { height: auto; min-height: 100%; }
  .fd-body { grid-template-columns: auto 1fr; grid-template-rows: minmax(480px, 75vh) auto; }
  .fd-right { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 760px) { .fd-pane { width: 200px; } .fd-field { grid-template-columns: 1fr; } .fd-canvas-wrap { padding: 10px; } }

/* ---------------------------------------------------------------- views in apps */
.grid-head .btn.subtle.small { display: inline-flex; align-items: center; gap: 6px; }
.lookup-item { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.lookup-sub { font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-head { font-size: 14px; font-weight: 600; margin: 18px 0 8px; }
.mv-head:first-child { margin-top: 0; }
.mv-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.mv-name { min-width: 180px; flex: 1; }
.mv-name .badge { margin-left: 8px; }
.mv-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- functions */
.fn-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; padding: 0 24px 32px; align-items: start; }
.fn-main, .fn-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fn-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); padding: 16px 18px; box-shadow: var(--shadow2); }
.fn-card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.fn-params + .fn-params { margin-top: 18px; }
.fn-params-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fn-params-head h3 { margin: 0; }
.fn-param-grid { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(130px, 1fr) 70px minmax(120px, 1.4fr) 32px; gap: 6px 8px; align-items: center; }
.fn-param-grid.out { grid-template-columns: minmax(120px, 1.1fr) minmax(130px, 1fr) minmax(120px, 1.4fr) 32px; }
.fn-center { display: flex; justify-content: center; }
.fn-formula { width: 100%; min-height: 220px; font-family: var(--mono); font-size: 13px; line-height: 1.5; resize: vertical; white-space: pre; tab-size: 2; }
.fn-helpers { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.fn-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.fn-status { font-size: 13px; }
.fn-ok, .fn-err { display: inline-flex; align-items: center; gap: 6px; }
.fn-ok { color: var(--success); }
.fn-err { color: var(--danger); }
.fn-test-out { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.fn-test-out pre, .fn-card pre.code { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1200px) { .fn-layout { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .fn-param-grid, .fn-param-grid.out { grid-template-columns: 1fr 1fr; } .fn-layout { padding: 0 12px 24px; } }

/* ---------------------------------------------------------------- approvals, BI view as, Pages code */
.ap-detail { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ap-details-text { white-space: pre-wrap; background: var(--bg); border-radius: var(--radius); padding: 10px 12px; }
.ap-options { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-options .btn { display: inline-flex; align-items: center; gap: 6px; }
.ap-responses { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.bi-viewas { display: flex; align-items: center; gap: 10px; padding: 6px 16px; background: var(--warning-tint); color: var(--warning); font-size: 13px; border-bottom: 1px solid var(--border); }
.pp-code-ph { flex-direction: column; align-items: flex-start; }
.pp-code-ph pre { margin: 6px 0 0; font-size: 11.5px; white-space: pre-wrap; max-height: 140px; overflow: hidden; color: var(--text2); }