:root {
  color-scheme: dark;
  --bg: #07100d;
  --surface: #0d1915;
  --surface-2: #12231d;
  --line: #203b31;
  --text: #f1f7f4;
  --muted: #92aa9f;
  --accent: #55e6a5;
  --accent-ink: #032418;
  --warning: #ffbd66;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; color: var(--text); background: radial-gradient(circle at 80% 0%, #153c2d 0, transparent 32rem), var(--bg); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(440px, 100%); padding: 40px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 80px #0008; }
.login-card h1 { margin: 8px 0; font-size: clamp(1.7rem, 6vw, 2.4rem); }
.login-card p { color: var(--muted); line-height: 1.6; }
.login-card form { display: grid; gap: 10px; margin-top: 28px; }
.login-card label { margin-top: 10px; color: var(--muted); font-size: .9rem; }
.login-card input { min-height: 48px; padding: 0 14px; color: var(--text); background: #08120f; border: 1px solid var(--line); border-radius: 12px; }
.login-card button, .danger-panel button { min-height: 48px; margin-top: 12px; padding: 0 18px; border: 0; border-radius: 12px; color: var(--accent-ink); background: var(--accent); font-weight: 750; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.sidebar { padding: 28px 20px; border-right: 1px solid var(--line); background: #08130fdd; }
.brand { margin: 0 8px 36px; font-weight: 850; letter-spacing: -.02em; }
.brand span, .eyebrow { color: var(--accent); }
.sidebar nav { display: grid; gap: 6px; }
.sidebar a, .sidebar nav span { padding: 12px; color: var(--muted); border-radius: 10px; text-decoration: none; }
.sidebar a { color: var(--text); background: var(--surface-2); }
.content { width: min(1180px, 100%); margin: 0 auto; padding: 42px; }
.page-header, .panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.page-header h1 { margin: 4px 0 24px; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.04em; }
.eyebrow { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.status-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: .85rem; font-weight: 750; }
.status-ok { color: var(--accent); background: #123b2c; border: 1px solid #236b4f; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.metric-grid article, .panel { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.metric-grid span, .metric-grid small, .panel p { display: block; color: var(--muted); }
.metric-grid strong { display: block; margin-top: 12px; font-size: clamp(1.05rem, 2vw, 1.4rem); overflow-wrap: anywhere; }
.metric-grid small { margin-top: 6px; }
.panel { margin-top: 14px; }
.panel h2 { margin: 5px 0; }
.panel p { margin: 6px 0 0; line-height: 1.5; }
.danger-panel { border-color: #5b4527; }
.danger-panel button { color: #211302; background: var(--warning); }
.task-panel[hidden] { display: none; }
.rule-warning { border-color: #6c4c25; background: #1b1710; }
.rule-current { align-items: flex-start; }
.rule-current code { display: block; max-width: 650px; margin-top: 12px; color: var(--accent); overflow-wrap: anywhere; }
.rule-meta { min-width: min(440px, 100%); margin: 0; display: grid; gap: 10px; }
.rule-meta div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; }
.rule-meta dt { color: var(--muted); }
.rule-meta dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rules-layout { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(380px, 1.1fr); gap: 14px; align-items: start; }
.rules-layout .panel { display: block; }
.section-heading, .backup-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rule-compose form { display: grid; gap: 9px; }
.rule-compose label, dialog label { margin-top: 10px; color: var(--muted); font-size: .9rem; }
.rule-compose input, .rule-compose textarea, dialog input { width: 100%; padding: 12px 14px; color: var(--text); background: #08120f; border: 1px solid var(--line); border-radius: 10px; }
.rule-compose textarea { resize: vertical; min-height: 280px; line-height: 1.55; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.rule-compose button, .rule-preview button, .backup-list button { min-height: 44px; padding: 0 16px; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 10px; font-weight: 750; }
.or-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; color: var(--muted); }
.or-divider::before, .or-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.validation-list { padding-left: 20px; color: var(--muted); line-height: 1.6; }
#rule-diff { min-height: 420px; max-height: 620px; margin: 18px 0; padding: 16px; overflow: auto; color: #cce8db; background: #06100c; border: 1px solid var(--line); border-radius: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rule-preview button { width: 100%; }
.rule-preview button:disabled { cursor: not-allowed; opacity: .45; }
.backup-panel { display: block; }
.backup-list { margin-top: 16px; display: grid; gap: 8px; }
.backup-list article { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; background: var(--surface-2); border-radius: 12px; }
.backup-list strong, .backup-list small { display: block; overflow-wrap: anywhere; }
.backup-list small { margin-top: 5px; color: var(--muted); }
.backup-list button { flex: 0 0 auto; color: #211302; background: var(--warning); }
dialog { width: min(520px, calc(100% - 32px)); padding: 28px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 100px #000b; }
dialog::backdrop { background: #020805cc; backdrop-filter: blur(4px); }
dialog h2 { margin: 8px 0; }
dialog li { margin: 10px 0; color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.dialog-actions button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface-2); }
.dialog-actions #restart-confirm { color: #211302; background: var(--warning); border-color: transparent; font-weight: 750; }

/* Rules workbench: selected Product Design direction 3 */
body:has(.rules-workbench) { background: #07110e; overflow: hidden; }
.rules-workbench { min-height: 100vh; height: 100vh; display: grid; grid-template-columns: 180px 280px minmax(480px, 1fr) 320px; color: #e8f2ed; background: #07110e; }
.workbench-nav, .rule-explorer, .editor-workspace, .rule-inspector { min-width: 0; min-height: 0; border-right: 1px solid #1c382e; }
.workbench-nav { display: flex; flex-direction: column; padding: 22px 14px 18px; background: #081510; }
.workbench-brand { display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 0 11px; color: #eef8f3; font-size: 1.08rem; font-weight: 800; text-decoration: none; }
.workbench-brand i { color: var(--accent); font-size: 1.45rem; }
.workbench-nav nav { display: grid; gap: 7px; margin-top: 30px; }
.workbench-nav nav a, .workbench-nav nav span, .workbench-nav-footer a, .workbench-nav-footer span { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; color: #8da89c; border-radius: 9px; text-decoration: none; }
.workbench-nav nav [aria-current="page"] { color: #64e7a8; background: #123125; }
.workbench-nav i { width: 20px; text-align: center; font-size: 1.05rem; }
.workbench-nav-footer { display: grid; gap: 4px; margin-top: auto; border-top: 1px solid #1c382e; padding-top: 14px; }

.rule-explorer { display: flex; flex-direction: column; padding: 22px 16px 16px; background: #091712; }
.explorer-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.explorer-heading h1 { margin: 0; font-size: 1.05rem; letter-spacing: -.01em; }
.explorer-heading button { width: 34px; height: 34px; color: #a8c0b5; background: transparent; border: 1px solid #29483c; border-radius: 8px; }
.add-rule-button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 9px; color: #72e8ad; text-decoration: none; background: #102a20; border: 1px solid #2c7556; border-radius: 8px; font-size: .72rem; font-weight: 750; }
.add-rule-button:hover { background: #173c2c; }
.explorer-search { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 20px 0 16px; padding: 0 11px; color: #6f8d80; background: #0b1b15; border: 1px solid #29483c; border-radius: 8px; }
.explorer-search input { width: 100%; min-width: 0; color: #dbe8e2; background: transparent; border: 0; outline: 0; }
.rule-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
.rule-tree { overflow-y: scroll; scrollbar-color: #4f7a67 #08130f; scrollbar-width: auto; }
.rule-tree::-webkit-scrollbar { width: 8px; }
.rule-tree::-webkit-scrollbar-track { background: #08130f; }
.rule-tree::-webkit-scrollbar-thumb { background: #315344; border: 2px solid #08130f; border-radius: 999px; }
.rule-tree::-webkit-scrollbar-thumb:hover { background: #4f7a67; }
.tree-group { display: flex; align-items: center; gap: 8px; padding: 7px 5px; color: #a8bdb4; font-size: .8rem; font-weight: 700; }
.tree-group b { min-width: 22px; margin-left: auto; padding: 2px 6px; color: #78978a; text-align: center; background: #10241c; border-radius: 999px; font-size: .65rem; }
.tree-group i { color: #e8bd55; }
.tree-document { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px; color: #e9f4ef; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; }
.tree-document.is-selected { color: #bcf8d8; background: #123326; border-color: #4fce91; }
.tree-document > i { font-size: 1.15rem; }
.tree-document span, .tree-document small { display: block; min-width: 0; }
.tree-document strong { display: block; overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.tree-document small { margin-top: 3px; color: #79988a; font-size: .68rem; }
.tree-document .rule-badge { flex: 0 0 auto; padding: 3px 6px; border-radius: 999px; font-size: .58rem; font-style: normal; font-weight: 800; }
.protected-badge, .protected-inline { color: #68e2a7; background: #123727; border: 1px solid #296c50; }
.draft-badge { color: #f1c374; background: #352a15; border: 1px solid #705729; }
.trash-document { color: #9aaea5; }
.empty-rule-group { margin: 2px 6px 10px; color: #587568; font-size: .7rem; }
.tree-label { margin: 20px 5px 7px; color: #617d70; font-size: .69rem; font-weight: 800; letter-spacing: .1em; }
.section-list { margin: 0; padding: 0; list-style: none; }
.section-list li { padding-left: calc((var(--section-depth) - 1) * 9px); }
.section-list button { width: 100%; padding: 7px 8px; overflow: hidden; color: #91aa9f; text-align: left; text-overflow: ellipsis; white-space: nowrap; background: transparent; border: 0; border-radius: 6px; font-size: .79rem; }
.section-list button:hover, .section-list button.is-current { color: #dcf7e9; background: #10271e; }
.empty-section { padding: 10px; color: #6f8d80; font-size: .78rem; }
.rule-explorer footer { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 13px; color: #6f8d80; border-top: 1px solid #1c382e; font-size: .72rem; }

.editor-workspace { position: relative; display: grid; grid-template-rows: 50px 43px 52px minmax(360px, 1fr) 28px 72px; height: 100vh; background: #0a1511; }
.editor-tabs { display: flex; align-items: end; padding: 0 18px; border-bottom: 1px solid #1c382e; }
.editor-tab { display: flex; align-items: center; gap: 9px; height: 40px; max-width: 360px; padding: 0 15px; color: #a9c0b5; border: 1px solid #1c382e; border-bottom: 0; border-radius: 8px 8px 0 0; font-size: .82rem; }
.editor-tab.is-active { color: #7eebb5; background: #0d1d17; }
.unsaved-dot { color: #efb84e; font-size: .68rem; }
.editor-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px; border-bottom: 1px solid #172f27; }
.breadcrumbs { display: flex; align-items: center; min-width: 0; gap: 6px; color: #718f81; font-size: .72rem; }
.breadcrumbs strong { overflow: hidden; color: #b7c9c0; text-overflow: ellipsis; white-space: nowrap; }
.editor-save-state { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: #65dca2; font-size: .74rem; }
.editor-save-state.is-dirty { color: #efb84e; }
.editor-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 7px 26px 6px; }
.editor-titlebar p, .rule-inspector header p { margin: 0 0 3px; color: #587568; font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.editor-titlebar h2 { margin: 0; font-size: 1.05rem; }
.editor-titlebar > span { color: #708c7f; font-size: .72rem; }
.editor-surface { display: grid; grid-template-columns: 48px minmax(0, 1fr); min-height: 0; margin: 0 22px; overflow: hidden; background: #0b1713; border: 1px solid #203e33; border-radius: 8px; }
.editor-surface:focus-within { border-color: #3a8d68; box-shadow: inset 3px 0 0 #55e6a5; }
#editor-line-numbers { height: 100%; margin: 0; padding: 18px 10px 18px 4px; overflow: hidden; color: #526d61; text-align: right; user-select: none; background: #08130f; border-right: 1px solid #193228; font: 14px/1.62 "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
#rule-editor { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 18px 22px; resize: none; color: #d7e8e0; caret-color: #6ee7ad; background: transparent; border: 0; border-radius: 0; outline: 0; font: 14px/1.62 "Cascadia Code", "SFMono-Regular", Consolas, monospace; tab-size: 2; }
.editor-statusbar { display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 0 24px; color: #657f73; font-size: .68rem; }
.editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 22px; background: #091510; border-top: 1px solid #203e33; }
.editor-actions > span { color: #718d80; font-size: .72rem; }
.editor-actions > span[data-kind="error"] { color: #ff8d83; }
.editor-actions > span[data-kind="success"] { color: #64dea3; }
.editor-actions > span[data-kind="warning"] { color: #efb84e; }
.editor-actions > div { display: flex; gap: 10px; }
.editor-actions button { min-height: 42px; padding: 0 17px; color: #c9dbd2; white-space: nowrap; background: #11231c; border: 1px solid #315344; border-radius: 8px; font-weight: 700; }
.editor-actions button i { margin-right: 7px; }
.editor-actions .publish-button { min-width: 140px; color: #251501; background: #e8a92e; border-color: #f0bd58; }
.trash-state { position: absolute; z-index: 3; inset: 93px 0 0; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; background: #0a1511; }
.trash-state[hidden] { display: none; }
.trash-state > i { color: #c5a56d; font-size: 2.3rem; }
.trash-state h2 { margin: 16px 0 4px; }
.trash-state p { color: #80998e; }
.trash-state button { min-height: 42px; padding: 0 18px; color: #062117; background: #61dfa5; border: 0; border-radius: 8px; font-weight: 800; }
.rules-workbench.show-trash-state .editor-titlebar,
.rules-workbench.show-trash-state .editor-surface,
.rules-workbench.show-trash-state .editor-statusbar,
.rules-workbench.show-trash-state .editor-actions { display: none; }

.rule-inspector { height: 100vh; overflow: auto; padding: 22px 18px; background: #081510; border-right: 0; }
.rule-inspector > header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid #1c382e; }
.rule-inspector h2 { margin: 0; font-size: 1.05rem; }
.rule-inspector > header > i { color: #718d80; }
.inspector-fields { margin: 0; }
.inspector-fields > div { padding: 15px 0; border-bottom: 1px solid #172f27; }
.inspector-fields dt { margin-bottom: 7px; color: #617d70; font-size: .7rem; }
.inspector-fields dd { margin: 0; color: #cbdcd4; font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.inspector-fields dd > span { display: block; }
.inspector-fields code { color: #8bc8aa; font-size: .72rem; }
.status-pill[data-status="active"] { color: #62dda3; background: #102f23; }
.status-pill[data-status="disabled"] { color: #e4b966; background: #302613; }
.status-pill[data-status="draft"] { color: #a9c0b5; background: #1a2922; }
.protected-inline { display: inline-block; margin-left: 4px; padding: 2px 6px; border-radius: 999px; font-size: .62rem; }
.protected-inline[hidden] { display: none; }
.hash-value { overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap; }
.validation-box { display: flex; gap: 11px; margin: 18px 0; padding: 14px; color: #70e4aa; background: #0e271d; border: 1px solid #265b44; border-radius: 9px; }
.validation-box > i { font-size: 1.12rem; }
.validation-box strong, .validation-box span { display: block; }
.validation-box strong { font-size: .82rem; }
.validation-box span { margin-top: 4px; color: #78988a; font-size: .69rem; line-height: 1.4; }
.warning-box { color: #efbd62; background: #261e10; border-color: #665024; }
.lifecycle-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.lifecycle-buttons button { min-height: 36px; color: #bcd2c7; background: #10241c; border: 1px solid #29483c; border-radius: 7px; font-size: .72rem; }
.lifecycle-buttons .danger-action { grid-column: 1 / -1; color: #f0ba81; border-color: #6b4629; background: #24180f; }
.inspector-section { padding: 17px 0; border-top: 1px solid #172f27; }
.inspector-section-heading { display: flex; align-items: center; justify-content: space-between; }
.inspector-section h3 { margin: 0 0 11px; font-size: .78rem; }
.inspector-section-heading > span { color: #6e8a7d; font-size: .7rem; }
.inspector-action { display: flex; align-items: center; gap: 11px; padding: 11px; color: #c9ddd3; border-radius: 8px; cursor: pointer; }
.inspector-action:hover { background: #10271e; }
.inspector-action > i { color: #65dca2; font-size: 1.15rem; }
.inspector-action strong, .inspector-action small { display: block; }
.inspector-action strong { font-size: .8rem; }
.inspector-action small { margin-top: 3px; color: #6f8d80; font-size: .68rem; }
#rule-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-safety { display: flex; gap: 7px; margin: 8px 11px 0; color: #b39861; font-size: .66rem; line-height: 1.45; }
.compact-backups { display: grid; gap: 3px; }
.compact-backups article { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 7px; border-radius: 7px; }
.compact-backups article:hover { background: #10271e; }
.compact-backups article > div { min-width: 0; }
.compact-backups strong, .compact-backups small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-backups strong { color: #a9c0b5; font-size: .69rem; }
.compact-backups small { margin-top: 3px; color: #617d70; font-size: .62rem; }
.compact-backups button { flex: 0 0 auto; width: 30px; height: 30px; color: #e6b64f; background: transparent; border: 0; border-radius: 6px; }
.compact-backups button:hover { background: #2d2716; }
.inspector-task { margin-top: 12px; padding: 12px; background: #10271e; border-radius: 8px; }
.inspector-task span { color: #62dda3; font-size: .7rem; font-weight: 800; }
.inspector-task p { margin: 5px 0 0; color: #89a498; font-size: .7rem; }
.wide-dialog { width: min(980px, calc(100% - 32px)); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dialog-header p { margin: 0; color: #64dca4; font-size: .66rem; font-weight: 800; letter-spacing: .12em; }
.dialog-header button { width: 36px; height: 36px; color: #a8bdb4; background: transparent; border: 1px solid #29483c; border-radius: 8px; }
.diff-summary { display: flex; justify-content: space-between; gap: 16px; margin: 17px 0 10px; color: #78978a; font-size: .76rem; }
.wide-dialog #rule-diff { min-height: 520px; max-height: 68vh; }

/* Full-width rule creation flow */
body:has(.rule-create-page) { min-height: 100vh; background: #07110e; }
.rule-create-page { width: min(100%, 1440px); min-height: 100vh; margin: 0 auto; padding: 34px clamp(20px, 5vw, 72px) 54px; color: #e8f2ed; }
.create-page-header { max-width: 1180px; margin: 0 auto 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.create-page-header h1 { margin: 5px 0 8px; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.045em; }
.create-page-header p:not(.eyebrow) { margin: 0; color: #8da89c; line-height: 1.6; }
.create-page-header > a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 13px; color: #b8ccc2; white-space: nowrap; text-decoration: none; background: #0d1c17; border: 1px solid #29483c; border-radius: 9px; }
.create-steps, #rule-create-form { width: min(100%, 1180px); margin-inline: auto; }
.create-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; border: 1px solid #203b31; border-radius: 14px; overflow: hidden; background: #0a1712; }
.create-steps button { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 11px; padding: 16px 18px; color: #80998e; text-align: left; background: transparent; border: 0; border-right: 1px solid #203b31; }
.create-steps button:last-child { border-right: 0; }
.create-steps button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; color: #91aa9f; background: #12271e; border: 1px solid #29483c; border-radius: 50%; font-weight: 800; }
.create-steps strong, .create-steps small { display: block; }
.create-steps strong { color: #b9cec4; font-size: .85rem; }
.create-steps small { margin-top: 3px; font-size: .68rem; }
.create-steps button.is-active { color: #8cbba4; background: #10281e; box-shadow: inset 0 -3px #55e6a5; }
.create-steps button.is-active > span { color: #052117; background: #55e6a5; border-color: #55e6a5; }
#rule-create-form { background: #0b1914; border: 1px solid #203b31; border-radius: 16px; overflow: hidden; box-shadow: 0 22px 70px #0005; }
.create-step { min-height: 520px; padding: clamp(24px, 4vw, 46px); }
.create-step[hidden] { display: none; }
.create-card-heading { display: grid; grid-template-columns: 1fr auto; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid #1c382e; }
.create-card-heading p { grid-column: 1 / -1; margin: 0 0 5px; color: #55e6a5; font-size: .65rem; font-weight: 850; letter-spacing: .14em; }
.create-card-heading h2 { margin: 0; font-size: 1.45rem; }
.create-card-heading span { align-self: center; color: #748e82; font-size: .75rem; }
.create-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.create-form-grid label, .source-panel label { display: grid; gap: 8px; color: #a7bdb2; font-size: .78rem; font-weight: 700; }
.create-form-grid input, .create-form-grid textarea, .source-panel textarea, .source-panel select { width: 100%; min-height: 44px; padding: 11px 13px; color: #e2eee8; background: #07120e; border: 1px solid #29483c; border-radius: 8px; outline: 0; }
.create-form-grid textarea, .source-panel textarea { resize: vertical; line-height: 1.55; }
.create-form-grid input:focus, .create-form-grid textarea:focus, .source-panel textarea:focus, .source-panel select:focus { border-color: #55b987; box-shadow: 0 0 0 3px #2e8d6328; }
.create-form-grid small { color: #617d70; font-weight: 400; }
.full-field { grid-column: 1 / -1; }
.binding-fieldset { margin: 28px 0 0; padding: 20px; border: 1px solid #203b31; border-radius: 11px; }
.binding-fieldset legend { padding: 0 8px; color: #d6e5de; font-weight: 800; }
.binding-fieldset > p { margin: 0 0 17px; color: #718f81; font-size: .75rem; }
.source-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.source-options label { position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; gap: 2px 10px; padding: 17px; color: #bfd2c9; background: #0d2019; border: 1px solid #29483c; border-radius: 10px; cursor: pointer; }
.source-options input { position: absolute; opacity: 0; }
.source-options label:has(input:checked) { border-color: #55e6a5; background: #123225; box-shadow: inset 0 0 0 1px #55e6a5; }
.source-options i { grid-row: 1 / 3; color: #60dca2; font-size: 1.55rem; }
.source-options small { color: #718f81; font-size: .68rem; }
.source-panel[hidden] { display: none; }
.source-panel textarea { min-height: 280px; font-family: "Cascadia Code", Consolas, monospace; }
.upload-dropzone { min-height: 280px; place-content: center; justify-items: center; border: 1px dashed #3d6b57; border-radius: 12px; cursor: pointer; }
.upload-dropzone i { color: #5ee2a7; font-size: 2.4rem; }
.upload-dropzone span { color: #718f81; font-weight: 400; }
#create-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.create-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.create-review > div { padding: 18px; background: #0e211a; border: 1px solid #234236; border-radius: 9px; }
.create-review span, .create-review strong { display: block; }
.create-review span { color: #718f81; font-size: .7rem; }
.create-review strong { margin-top: 7px; overflow-wrap: anywhere; }
.draft-safety-note { display: flex; gap: 14px; margin-top: 20px; padding: 19px; color: #65dfa5; background: #102a20; border: 1px solid #2d6b50; border-radius: 10px; }
.draft-safety-note i { font-size: 1.3rem; }
.draft-safety-note p { margin: 5px 0 0; color: #82a494; line-height: 1.5; }
.create-message { min-height: 24px; color: #75dca9; }
.create-message[data-kind="error"] { color: #ff9388; }
.create-actions { display: flex; align-items: center; justify-content: space-between; min-height: 74px; padding: 12px clamp(24px, 4vw, 46px); background: #08140f; border-top: 1px solid #203b31; }
.create-actions > div { display: flex; gap: 10px; margin-left: auto; }
.create-actions button { min-height: 42px; padding: 0 20px; color: #c6dad0; background: #12251e; border: 1px solid #315344; border-radius: 8px; font-weight: 800; }
.create-actions #create-next, .create-actions #save-created-draft { color: #042117; background: #55e6a5; border-color: #55e6a5; }
.create-actions button:disabled { cursor: wait; opacity: .55; }

@media (max-width: 1180px) {
  .rules-workbench { grid-template-columns: 78px 250px minmax(440px, 1fr); }
  .workbench-brand span, .workbench-nav nav a:not([aria-current="page"]), .workbench-nav nav span, .workbench-nav-footer { display: none; }
  .workbench-brand, .workbench-nav nav a[aria-current="page"] { justify-content: center; padding: 0; }
  .workbench-nav nav a[aria-current="page"] { font-size: 0; }
  .workbench-nav nav a[aria-current="page"] i { font-size: 1.15rem; }
  .rule-inspector { position: fixed; z-index: 8; top: 0; right: 0; width: 300px; transform: translateX(calc(100% - 7px)); transition: transform .2s ease; box-shadow: -18px 0 40px #0007; }
  .rule-inspector:hover, .rule-inspector:focus-within { transform: translateX(0); }
}

@media (max-width: 720px) {
  .app-shell { grid-template-columns: 1fr; padding-bottom: 72px; }
  .sidebar { position: fixed; z-index: 5; inset: auto 0 0; padding: 10px; border: 1px solid var(--line); }
  .brand, .sidebar nav span { display: none; }
  .sidebar nav { display: block; text-align: center; }
  .sidebar a { display: inline-block; padding: 10px 22px; }
  .content { padding: 24px 16px; }
  .page-header { align-items: flex-start; }
  .metric-grid { grid-template-columns: 1fr; }
  .panel { align-items: flex-start; flex-direction: column; }
  .rule-current { display: block; }
  .rule-meta { margin-top: 20px; }
  .rules-layout { grid-template-columns: 1fr; }
  .backup-list article { align-items: stretch; flex-direction: column; }
  .backup-list button { width: 100%; }
  .danger-panel button { width: 100%; }
  .login-card { padding: 28px 22px; }
  body:has(.rules-workbench) { overflow: auto; }
  .rules-workbench { min-height: 100vh; height: auto; display: block; }
  .workbench-nav { position: sticky; z-index: 10; top: 0; height: 58px; flex-direction: row; align-items: center; padding: 7px 12px; border-bottom: 1px solid #1c382e; }
  .workbench-brand span { display: inline; }
  .workbench-nav nav { display: block; margin: 0 0 0 auto; }
  .workbench-nav nav a[aria-current="page"] { width: 42px; }
  .rule-explorer { max-height: 300px; padding: 16px; border-bottom: 1px solid #1c382e; }
  .section-list { max-height: 120px; overflow: auto; }
  .editor-workspace { height: 760px; grid-template-rows: 44px 40px auto minmax(300px, 1fr) 26px 126px; }
  .editor-titlebar { padding-inline: 16px; }
  .editor-surface { grid-template-columns: 42px minmax(0, 1fr); margin-inline: 12px; }
  #editor-line-numbers, #rule-editor { padding-block: 14px; font-size: 13px; }
  #rule-editor { padding-inline: 14px; }
  .editor-actions { align-items: stretch; flex-direction: column; padding: 10px 12px; }
  .editor-actions > div { display: grid; grid-template-columns: repeat(3, 1fr); }
  .editor-actions button, .editor-actions .publish-button { min-width: 0; padding: 0 8px; font-size: .72rem; }
  .editor-actions button i { display: none; }
  .rule-inspector { position: static; width: 100%; height: auto; transform: none; box-shadow: none; }
  .rule-create-page { padding: 20px 12px 36px; }
  .create-page-header { display: block; }
  .create-page-header > a { margin-top: 18px; }
  .create-steps { grid-template-columns: 1fr; }
  .create-steps button { border-right: 0; border-bottom: 1px solid #203b31; }
  .create-steps button:last-child { border-bottom: 0; }
  .create-form-grid, .source-options, .create-review { grid-template-columns: 1fr; }
  .full-field { grid-column: auto; }
  .create-step { min-height: 0; padding: 22px 16px; }
  .create-card-heading { grid-template-columns: 1fr; }
  .create-card-heading span { margin-top: 7px; }
}