:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  background: #f6f8fc;
  color: #172033;
  --primary: #3767e8;
  --primary-hover: #2e57ca;
  --primary-soft: #edf2ff;
  --ink: #172033;
  --muted: #6c768c;
  --line: #e2e7f0;
  --surface: #ffffff;
  --surface-soft: #f8faff;
  --success: #12805c;
  --warning: #a15c00;
  --danger: #c53d4c;
  --shadow: 0 18px 48px rgba(38, 55, 88, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 5%, rgba(88, 130, 246, .11), transparent 26rem),
    radial-gradient(circle at 96% 0%, rgba(102, 215, 190, .09), transparent 24rem),
    #f6f8fc;
  line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 9px 12px; border-radius: 10px; background: #172033; color: #fff; font-size: 12px; font-weight: 750; transform: translateY(-150%); transition: transform .18s; }
.skip-link:focus { transform: translateY(0); }

.topbar {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(20px, calc((100vw - 1680px) / 2));
  border-bottom: 1px solid rgba(220, 226, 237, .9);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 8px 30px rgba(41,58,92,.035);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #4c7cf0, #315bd1);
  box-shadow: 0 8px 20px rgba(55, 103, 232, .25);
}
.brand-mark svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 15px; letter-spacing: -.01em; }
.brand span { color: var(--muted); font-size: 12px; margin-top: 2px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.header-project {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.header-project select { width: min(280px, 36vw); min-height: 38px; padding: 8px 34px 8px 11px; }

main { width: min(1680px, calc(100% - 32px)); flex: 1; margin: 0 auto; padding: 12px 0 32px; }
h1, h2, h3, p { margin-top: 0; }
h1 { letter-spacing: -.04em; }
h2, h3 { letter-spacing: -.025em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }

.login-layout {
  min-height: calc(100vh - 190px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 440px);
  gap: clamp(44px, 8vw, 110px);
  align-items: center;
  padding: 30px 4%;
}
.boot-screen {
  min-height: calc(100vh - 190px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: var(--muted);
}
.boot-screen p { margin: 0; font-size: 14px; font-weight: 650; }
.boot-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid #dce4f4;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: boot-spin .8s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }
.login-copy h1 {
  max-width: 720px;
  margin: 18px 0;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.02;
}
.login-copy > p { max-width: 650px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.feature-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.feature-list span {
  padding: 9px 13px;
  border: 1px solid #dce4f3;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: #526078;
  font-size: 13px;
  font-weight: 650;
}

.card {
  border: 1px solid rgba(220, 226, 237, .95);
  border-radius: 22px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 14px 42px rgba(38,55,88,.065);
}
.login-card { padding: 30px; }
.card-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.card-heading h2 { margin-bottom: 4px; font-size: 22px; }
.card-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.section-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

form { display: grid; gap: 15px; }
label { display: grid; gap: 7px; color: #465168; font-size: 13px; font-weight: 650; }
input, select, textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid #d8dfeb;
  border-radius: 12px;
  padding: 11px 13px;
  outline: none;
  background: #fff;
  color: var(--ink);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input::placeholder, textarea::placeholder { color: #9aa4b6; }
input:focus, select:focus, textarea:focus {
  border-color: #7595ee;
  box-shadow: 0 0 0 4px rgba(55, 103, 232, .11);
}

.button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  padding: 10px 15px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  font-weight: 720;
  transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgba(55,103,232,.24); outline-offset: 2px; }
.button-primary { background: var(--primary); color: #fff; box-shadow: 0 7px 15px rgba(55, 103, 232, .18); }
.button-primary:hover { background: var(--primary-hover); }
.button-secondary { border: 1px solid #d9e0ec; background: #fff; color: #465168; }
.button-secondary:hover { border-color: #bcc8db; background: #f8faff; }
.button-danger { border: 1px solid #f1d5d9; background: #fff7f8; color: var(--danger); }
.button-wide { width: 100%; margin-top: 3px; }
.button-compact { min-height: 36px; padding: 8px 13px; font-size: 13px; }

.page-heading {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 2px 10px;
  padding: 6px 2px;
}
.page-heading-copy { min-width: 0; display: grid; grid-template-columns: auto minmax(0, auto); column-gap: 12px; align-items: baseline; }
.page-heading .eyebrow { grid-column: 1 / -1; font-size: 9px; letter-spacing: .08em; }
.page-heading .eyebrow::before { width: 12px; }
.page-heading h1 { margin: 1px 0 0; font-size: clamp(20px, 2vw, 24px); line-height: 1.15; letter-spacing: -.03em; }
.page-heading p { max-width: 820px; margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.context-help {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  border: 1px solid #dbe3f1;
  border-radius: 10px;
  padding: 6px 10px;
  background: rgba(255,255,255,.75);
  color: #53627a;
  font-size: 11px;
  font-weight: 720;
}
.context-help:hover { border-color: #bdcae2; background: #fff; color: var(--primary); }
.context-help > span:first-child { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 10px; font-weight: 850; }

.workspace-grid { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 10px; align-items: start; transition: grid-template-columns .2s ease; }
.workspace-grid.nav-is-collapsed { grid-template-columns: 66px minmax(0, 1fr); }
.project-sidebar { padding: 20px; position: sticky; top: 92px; }
.sidebar-heading h2 { margin-bottom: 5px; font-size: 20px; }
.sidebar-heading p { margin-bottom: 18px; color: var(--muted); font-size: 13px; }
.project-form { grid-template-columns: 1fr; gap: 8px; }
.side-nav { position: sticky; top: 78px; padding: 7px; overflow: hidden; border-radius: 16px; }
.side-nav nav { display: grid; gap: 4px; }
.nav-folder { margin-top: 5px; border-top: 1px solid var(--line); padding-top: 5px; }
.nav-folder summary { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 9px; color: #4d5b74; font-size: 11px; font-weight: 760; list-style: none; cursor: pointer; transition: background .15s,color .15s; }
.nav-folder summary:hover { background: #f5f7fb; color: var(--ink); }
.nav-folder summary::-webkit-details-marker { display: none; }
.nav-folder summary::after { content: "⌄"; margin-left: auto; color: #8a95aa; }
.nav-folder:not([open]) summary::after { transform: rotate(-90deg); }
.nav-folder-items { display: grid; gap: 3px; margin-top: 3px; }
.nav-folder .nav-item { padding-left: 16px; font-size: 11px; }
.nav-primary { background: linear-gradient(135deg, #edf3ff, #f3f7ff); }
.nav-help { margin-top: 5px; border-top: 1px solid var(--line); border-radius: 5px 5px 10px 10px !important; color: #526789 !important; }
.nav-item, .nav-collapse {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  padding: 7px 9px;
  background: transparent;
  color: #56627a;
  font-weight: 680;
  white-space: nowrap;
  position: relative;
  transition: background .15s,color .15s,transform .15s;
}
.nav-item:hover, .nav-collapse:hover { background: #f3f6fc; color: var(--ink); transform: translateX(1px); }
.nav-item.active { background: linear-gradient(135deg,#eaf1ff,#f2f6ff); color: #2857c1; box-shadow: inset 0 0 0 1px rgba(55,103,232,.08); }
.nav-item.active::before { content: ""; position: absolute; left: 3px; width: 3px; height: 20px; border-radius: 999px; background: var(--primary); }
.nav-collapse { margin-bottom: 5px; border-bottom: 1px solid var(--line); border-radius: 10px 10px 5px 5px; color: #8893a7; }
.nav-icon { width: 23px; flex: none; display: grid; place-items: center; font-size: 15px; }
.side-nav.collapsed .nav-label { display: none; }
.side-nav.collapsed .nav-folder summary::after { display: none; }
.side-nav.collapsed .nav-folder .nav-item { padding-left: 5px; }
.side-nav.collapsed .nav-item, .side-nav.collapsed .nav-collapse { justify-content: center; padding-inline: 5px; }
.side-nav.collapsed .nav-collapse .nav-icon { transform: rotate(180deg); }

.detail-card { min-height: 490px; padding: clamp(13px, 1.4vw, 20px); overflow: clip; border-radius: 16px; }
.empty-state { min-height: 420px; display: grid; place-items: center; align-content: center; text-align: center; }
.empty-state h2 { margin: 14px 0 7px; }
.empty-state p { max-width: 440px; color: var(--muted); line-height: 1.55; }
.empty-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: var(--primary-soft); color: var(--primary); font-size: 24px; }

.detail-heading { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.detail-heading h2 { margin: 0 0 2px; font-size: 18px; line-height: 1.2; }
.detail-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.status-badge, .rule-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 750;
}
.status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-active { background: #eaf8f2; color: var(--success); }
.status-disabled { background: #f3f4f7; color: #727b8d; }

.section-block { padding: 15px 0; border-top: 1px solid var(--line); }
.section-block:first-of-type { border-top: 0; padding-top: 0; }
.section-block:not(.hidden) { animation: section-in .2s ease-out; }
@keyframes section-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-heading h3 { margin: 0 0 3px; font-size: 15px; }
.section-heading h4 { margin: 0 0 3px; font-size: 13px; }
.section-heading p { max-width: 900px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.section-help-link {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  border: 0;
  border-radius: 8px;
  padding: 5px 8px;
  background: #f1f5fc;
  color: #4965a0;
  font-size: 10px;
  font-weight: 760;
}
.section-help-link:hover { background: #e7eefc; color: #2857c1; }
.helper {
  margin: 10px 0 0;
  padding: 11px 13px;
  border-left: 3px solid #a9bdf5;
  border-radius: 0 10px 10px 0;
  background: #f5f8ff;
  color: #5d6980;
  font-size: 12px;
  line-height: 1.55;
}
.term-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px dotted #8190aa;
  color: inherit;
  cursor: help;
}
.term-help::after {
  content: "?";
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #e9effb;
  color: #4666a8;
  font-size: 8px;
  font-weight: 850;
}
.term-help::before {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 30;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(300px, 70vw);
  padding: 9px 10px;
  border: 1px solid #dbe3f1;
  border-radius: 9px;
  background: #172033;
  color: #fff;
  box-shadow: 0 10px 26px rgba(23,32,51,.18);
  font-size: 10px;
  font-weight: 520;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.term-help:hover::before, .term-help:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.help-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 10px; }
.help-toolbar input { min-height: 38px; padding-block: 8px; }
.help-intro { padding: 11px 13px; border: 1px solid #dce5f5; border-radius: 12px; background: linear-gradient(135deg,#f6f9ff,#fbfdff); color: #53627a; font-size: 11px; line-height: 1.5; }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.help-topic { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; scroll-margin-top: 90px; }
.help-topic[open] { border-color: #bdcced; box-shadow: 0 8px 22px rgba(49,78,139,.07); }
.help-topic summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 11px; list-style: none; cursor: pointer; }
.help-topic summary::-webkit-details-marker { display: none; }
.help-topic-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 850; }
.help-topic-title { min-width: 0; display: grid; gap: 1px; }
.help-topic-title strong { color: var(--ink); font-size: 12px; }
.help-topic-title small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.help-topic summary::after { content: "⌄"; color: #8793a8; }
.help-topic:not([open]) summary::after { transform: rotate(-90deg); }
.help-topic-body { padding: 0 12px 12px 47px; color: #536078; font-size: 10px; line-height: 1.55; }
.help-topic-body p { margin: 0 0 8px; }
.help-topic-body ol { margin: 0 0 8px; padding-left: 17px; }
.help-topic-body li + li { margin-top: 3px; }
.help-terms { display: flex; flex-wrap: wrap; gap: 5px; }
.help-terms span { padding: 4px 7px; border-radius: 7px; background: #f0f4fb; color: #506487; }
.help-open-section { min-height: 30px; margin-top: 8px; border: 1px solid #d7e0f0; border-radius: 8px; padding: 5px 8px; background: #fff; color: #315cbd; font-size: 10px; font-weight: 750; }

.code-row { display: flex; align-items: stretch; gap: 8px; }
.code {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #e0e6ef;
  border-radius: 12px;
  background: #f7f9fc;
  color: #34415a;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}
.connect-code { margin-top: 10px; }
.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.field-stack { display: grid; gap: 7px; }
.field-label { color: #465168; font-size: 13px; font-weight: 700; }

.domain-list, .event-list { display: grid; gap: 9px; margin-top: 14px; }
.rule-list { display: grid; gap: 0; margin-top: 8px; border: 1px solid #e0e6f0; border-radius: 12px; background: #fff; overflow: hidden; }
.domain-item, .rule-item, .event-item {
  border: 1px solid #e2e7f0;
  border-radius: 14px;
  background: #fbfcfe;
}
.domain-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 14px; }
.domain-origin { min-width: 0; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 680; overflow-wrap: anywhere; }
.domain-origin::before { content: "✓"; width: 22px; height: 22px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #eaf8f2; color: var(--success); font-size: 11px; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border: 0; border-radius: 10px; background: transparent; color: #8490a4; font-size: 18px; }
.icon-button:hover { background: #fff0f2; color: var(--danger); }
.edit-button:hover { background: var(--primary-soft); color: var(--primary); }
.item-actions, .rule-actions, .form-actions, .bulk-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.editor-launch { padding: 18px; border: 1px solid #dce5f6; border-radius: 16px; background: linear-gradient(135deg, #f6f9ff, #f8fcfb); }
.editor-launch .inline-form { margin-top: 12px; }

.model-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: end;
}
.page-type-list { display: grid; gap: 9px; margin-top: 14px; }
.page-type-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 13px 14px;
  border: 1px solid #e2e7f0;
  border-radius: 14px;
  background: #fbfcfe;
}
.page-type-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-type-title strong { font-size: 14px; }
.page-type-key { color: var(--muted); font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.page-type-rule { margin-top: 7px; color: #68748a; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.page-type-example { margin-top: 5px; color: #315abe; font-size: 11px; overflow-wrap: anywhere; }
.page-type-example.warning { color: var(--warning); }
.type-badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 750;
}
.type-badge-special { background: #fff3df; color: var(--warning); }
.page-type-form {
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #e0e6f0;
  border-radius: 15px;
  background: #f9fbfe;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.form-grid .field-wide { grid-column: 1 / -1; }
.subheading { margin: 0 0 10px; font-size: 14px; }
.editor-fields { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 10px; }

.rule-list-head, .rule-row {
  display: grid;
  grid-template-columns: 22px minmax(150px, 1.15fr) minmax(76px, .48fr) minmax(150px, 1fr) minmax(100px, .62fr) auto auto;
  gap: 12px;
  align-items: center;
}
.rule-list-head { min-height: 32px; padding: 0 12px; border-bottom: 1px solid #e5eaf2; background: #f7f9fc; color: #7b879a; font-size: 9px; font-weight: 760; letter-spacing: .03em; text-transform: uppercase; }
.rule-item { position: relative; border: 0; border-bottom: 1px solid #e7ebf2; border-radius: 0; background: #fff; transition: background .15s; }
.rule-item:last-child { border-bottom: 0; }
.rule-item:hover { background: #fafcff; }
.rule-row { min-height: 62px; padding: 9px 12px; }
.rule-title, .rule-trigger, .rule-selector, .rule-scope { min-width: 0; }
.rule-title { display: grid; gap: 2px; }
.rule-select, .check-label input, .debug-setting input { width: 17px; height: 17px; min-width: 17px; padding: 0; margin: 0; }
.rule-name { overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.rule-code, .event-code { display: block; overflow: hidden; color: #75839a; font: 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.rule-trigger, .rule-scope { overflow: hidden; color: #4e5c73; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.rule-trigger small, .rule-selector small, .rule-scope small { display: none; }
.rule-selector { display: grid; }
.rule-selector code { overflow: hidden; color: #64728a; font: 9px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.rule-scope { color: #315fbe; }
.rule-status { white-space: nowrap; }
.rule-actions { position: relative; flex-wrap: nowrap; justify-content: flex-end; }
.rule-action { min-height: 30px; border: 1px solid #dbe2ee; border-radius: 8px; padding: 5px 9px; background: #fff; color: #526078; font-size: 10px; font-weight: 730; }
.rule-action:hover { border-color: #b9c7de; color: var(--primary); }
.rule-action-primary { border-color: #c8d6f6; background: #eef3ff; color: #315dbc; }
.rule-details, .rule-details[open] { position: static; margin: 0; }
.rule-details summary { min-height: 30px; display: grid; place-items: center; border: 1px solid #e2e7f0; border-radius: 8px; padding: 5px 8px; background: #f8fafc; color: #718099; font-size: 9px; font-weight: 700; cursor: pointer; list-style: none; }
.rule-details summary::-webkit-details-marker { display: none; }
.rule-details[open] summary { border-color: #bcc9df; color: var(--primary); }
.rule-details:not([open]) p { display: none; }
.rule-details p { position: absolute; z-index: 20; top: 35px; right: 0; width: min(320px, 75vw); margin: 0; padding: 9px 10px; border: 1px solid #dce3ef; border-radius: 9px; background: #fff; color: #5d6980; box-shadow: 0 10px 28px rgba(30,44,73,.14); font-size: 10px; line-height: 1.45; }
.rule-testing, .rule-draft { background: #fff4df; color: var(--warning); }
.rule-published { background: #eaf8f2; color: var(--success); }
.rule-archived { background: #f1f3f6; color: #70798a; }

.publish-row { display: flex; justify-content: flex-end; margin-top: 14px; }
.bulk-toolbar { justify-content: space-between; margin-bottom: 10px; padding: 9px 11px; border-radius: 12px; background: #f7f9fd; }
.check-label { display: flex; grid-column: auto; flex-direction: row; align-items: center; gap: 8px; }
.settings-grid { display: grid; grid-template-columns: minmax(220px, .6fr) minmax(280px, 1.4fr); gap: 16px; align-items: start; }
.debug-setting { display: flex; flex-direction: row; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfe; }
.debug-setting span { display: grid; gap: 4px; }
.debug-setting small { color: var(--muted); font-weight: 500; line-height: 1.45; }
.new-project-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.new-project-block .project-form { grid-template-columns: minmax(0, 1.4fr) minmax(180px, .8fr) auto; }
.journey-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 12px; background: #eef2f8; }
.journey-tab { min-height: 36px; border: 0; border-radius: 9px; padding: 8px 14px; background: transparent; color: var(--muted); font-weight: 720; }
.journey-tab.active { background: #fff; color: var(--primary); box-shadow: 0 4px 12px rgba(40, 55, 85, .08); }
.journey-list { display: grid; gap: 11px; }
.journey-card { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #fbfcfe; }
.journey-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.journey-card-heading h4 { margin: 0 0 4px; font-size: 15px; }
.journey-card-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.journey-card .rule-actions { margin-top: 13px; }
.event-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.event-chip-list span { padding: 5px 9px; border-radius: 999px; background: var(--primary-soft); color: #4964a8; font-size: 11px; font-weight: 680; }
.journey-form { margin-top: 16px; }
.event-choice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 310px; overflow: auto; padding: 4px; }
.event-choice { display: flex; grid-template-columns: none; flex-direction: row; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.event-choice input { width: 17px; height: 17px; min-width: 17px; margin-top: 1px; padding: 0; }
.event-choice span { min-width: 0; display: grid; gap: 3px; }
.event-choice strong { font-size: 12px; overflow-wrap: anywhere; }
.event-choice small { color: var(--muted); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.funnel-builder-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.funnel-step-builder { display: grid; gap: 8px; }
.funnel-builder-row { display: grid; grid-template-columns: 34px minmax(180px, 1.2fr) minmax(150px, 1fr) auto; gap: 9px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.step-number { width: 28px; height: 28px; display: grid; place-items: center; align-self: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 800; }
.step-actions { display: flex; align-items: center; padding-bottom: 3px; }
.funnel-report { display: grid; gap: 7px; margin-top: 13px; }
.funnel-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 11px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.funnel-step::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--conversion, 0%); background: rgba(55, 103, 232, .07); pointer-events: none; }
.funnel-step > * { position: relative; }
.funnel-step > span:nth-child(2) { display: grid; gap: 2px; }
.funnel-step small { color: var(--muted); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.step-metric { color: var(--primary); font-size: 11px; font-weight: 750; }
.journey-meta { margin-top: 9px; color: var(--muted); font-size: 11px; }
.filters { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(140px, .7fr)); gap: 9px; margin-bottom: 13px; }
.filters.events-filter { grid-template-columns: minmax(0, 1.5fr) minmax(160px, .8fr); }
.event-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; }
.event-name { font-weight: 680; overflow-wrap: anywhere; }
.event-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.event-meta span { padding: 3px 7px; border-radius: 999px; background: #eef3fb; color: #617089; font-size: 10px; font-weight: 650; }
.event-time { flex: none; color: var(--muted); font-size: 12px; }
.empty-inline { padding: 16px; border: 1px dashed #d6ddea; border-radius: 13px; color: var(--muted); text-align: center; font-size: 13px; }

#toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  max-width: min(390px, calc(100vw - 48px));
  display: none;
  padding: 13px 16px;
  border: 1px solid #d8e0ed;
  border-radius: 13px;
  background: #182238;
  color: #fff;
  box-shadow: 0 16px 40px rgba(22, 31, 50, .24);
  font-size: 13px;
}

.app-footer {
  width: min(1680px, calc(100% - 32px));
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
  padding: 17px 2px 22px;
  border-top: 1px solid rgba(215,223,236,.9);
  color: #748097;
  font-size: 11px;
}
.footer-product { display: flex; align-items: center; gap: 10px; }
.footer-product > span:last-child { display: grid; gap: 1px; }
.footer-product strong { color: #3b4962; font-size: 12px; }
.footer-product small { color: #8792a5; font-size: 10px; }
.footer-mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #d4def2; border-radius: 10px; background: linear-gradient(145deg,#f6f9ff,#eaf1ff); color: #3562ce; font-weight: 850; }
.footer-meta { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.footer-version { padding: 5px 8px; border: 1px solid #dce4f1; border-radius: 8px; background: rgba(255,255,255,.72); }
.footer-version strong { color: #41506a; font-variant-numeric: tabular-nums; }
.footer-separator { width: 4px; height: 4px; border-radius: 50%; background: #b2bccd; }

@media (max-width: 1100px) {
  .rule-list-head { display: none; }
  .rule-row { grid-template-columns: 22px minmax(150px, 1fr) minmax(84px, .45fr) minmax(105px, .65fr) auto auto; }
  .rule-title { grid-column: 2; }
  .rule-trigger { grid-column: 3; }
  .rule-selector { grid-column: 2 / 4; grid-row: 2; }
  .rule-scope { grid-column: 4; grid-row: 1; }
  .rule-status { grid-column: 5; }
  .rule-actions { grid-column: 6; }
}

@media (max-width: 900px) {
  .login-layout { grid-template-columns: 1fr; padding: 24px 0; }
  .login-copy { text-align: center; }
  .login-copy > p { margin-left: auto; margin-right: auto; }
  .feature-list { justify-content: center; }
  .login-card { width: min(100%, 500px); margin: 0 auto; }
  .workspace-grid { grid-template-columns: 1fr; }
  .workspace-grid.nav-is-collapsed { grid-template-columns: 1fr; }
  .side-nav, .side-nav.collapsed { position: static; display: block; }
  .side-nav nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nav-collapse { display: none; }
  .side-nav .nav-item, .side-nav.collapsed .nav-item { justify-content: center; }
  .side-nav .nav-label, .side-nav.collapsed .nav-label { display: none; }
  .side-nav .nav-folder { grid-column: 1 / -1; }
  .side-nav .nav-folder-items { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .side-nav .nav-folder .nav-item { padding-inline: 5px; }
  .side-nav .nav-folder-items .nav-label { display: block; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .project-sidebar { position: static; }
  .project-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .topbar { padding: 0 16px; }
  .brand > div { display: none; }
  .brand { flex: none; }
  .topbar-actions { min-width: 0; gap: 6px; }
  .header-project > span { display: none; }
  .header-project { min-width: 0; }
  .header-project select { width: min(48vw, 210px); }
  main { width: min(100% - 24px, 1240px); padding-top: 10px; }
  .page-heading { align-items: flex-start; gap: 8px; }
  .page-heading-copy { display: block; }
  .page-heading p { max-width: 72vw; margin-top: 2px; font-size: 10px; white-space: nowrap; }
  .page-heading h1 { font-size: 19px; }
  .context-help > span:last-child { display: none; }
  .context-help { padding-inline: 8px; }
  .login-layout { min-height: auto; }
  .login-copy h1 { font-size: 38px; }
  .login-copy > p { font-size: 16px; }
  .login-card, .detail-card, .project-sidebar { padding: 18px; border-radius: 18px; }
  .project-list { grid-template-columns: 1fr; }
  .project-form, .inline-form { grid-template-columns: 1fr; }
  .model-toolbar, .form-grid, .editor-fields, .settings-grid, .new-project-block .project-form, .event-choice-list { grid-template-columns: 1fr; }
  .form-grid .field-wide { grid-column: auto; }
  .detail-heading { align-items: flex-start; flex-direction: row; }
  .code-row { flex-direction: column; }
  .event-item { flex-direction: column; }
  .filters, .filters.events-filter { grid-template-columns: 1fr; }
  .publish-row .button { width: 100%; }
  .side-nav nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .side-nav .nav-folder-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bulk-toolbar { align-items: stretch; flex-direction: column; }
  .funnel-builder-row { grid-template-columns: 32px minmax(0, 1fr); }
  .funnel-builder-row label, .funnel-builder-row .step-actions { grid-column: 2; }
  .app-footer { align-items: flex-start; flex-direction: column; gap: 10px; }
  .footer-meta { align-items: flex-start; flex-direction: column; gap: 5px; white-space: normal; }
  .footer-separator { display: none; }
  .help-toolbar { grid-template-columns: 1fr; }
  .help-topic-body { padding-left: 12px; }
  .rule-list { border-radius: 10px; }
  .rule-row {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 6px 9px;
    min-height: 0;
    padding: 10px;
  }
  .rule-select { grid-column: 1; grid-row: 1; }
  .rule-title { grid-column: 2; grid-row: 1; }
  .rule-status { grid-column: 3; grid-row: 1; justify-self: end; }
  .rule-trigger { grid-column: 2; grid-row: 2; }
  .rule-scope { grid-column: 3; grid-row: 2; justify-self: end; }
  .rule-selector { grid-column: 2 / 4; grid-row: 3; }
  .rule-actions { grid-column: 2 / 4; grid-row: 4; justify-content: flex-start; }
  .rule-trigger small, .rule-selector small, .rule-scope small { display: inline; margin-right: 4px; color: #8b96a8; font-size: 8px; font-weight: 700; text-transform: uppercase; }
  .rule-selector { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rule-selector code { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.user-journey-list { display: grid; gap: 16px; margin-top: 18px; }
.user-journey { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 18px; }
.user-journey-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.user-journey-heading div, .journey-event span:last-child { display: grid; gap: 3px; }
.user-journey-heading small, .journey-event small { color: var(--muted); }
.journey-timeline { display: grid; gap: 0; padding-top: 10px; max-height: 520px; overflow: auto; }
.journey-event { display: grid; grid-template-columns: 82px 14px 1fr; gap: 10px; align-items: start; min-height: 52px; }
.journey-event time { color: var(--muted); font-size: 13px; padding-top: 2px; }
.journey-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--primary); box-shadow: 0 18px 0 -4px var(--line); }
.journey-event strong { font-size: 14px; }
.journey-event small { font-size: 12px; overflow-wrap: anywhere; }
.page-report { display: grid; gap: 10px; margin-top: 18px; }
.page-report-row { display: grid; grid-template-columns: minmax(260px, 1.6fr) minmax(220px, 1fr) 100px 100px; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.page-report-row > span:first-child, .page-report-metric { display: grid; gap: 3px; }
.page-report-row small { color: var(--muted); overflow-wrap: anywhere; }
.page-report-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.page-report-tags span { padding: 4px 8px; border-radius: 999px; background: #eef4ff; color: #31589b; font-size: 12px; }
.page-report-metric { text-align: right; }

.analytics-toolbar { position: sticky; top: 82px; z-index: 8; display: grid; grid-template-columns: 120px repeat(3, minmax(150px, 1fr)) auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid rgba(216, 224, 237, .95); border-radius: 14px; background: rgba(248, 250, 255, .94); backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(40, 58, 92, .05); }
.analytics-toolbar label { gap: 4px; font-size: 10px; letter-spacing: .02em; }
.analytics-toolbar select, .analytics-toolbar .button { min-height: 36px; padding-block: 7px; border-radius: 9px; font-size: 12px; }
.custom-report-builder { margin-top: 9px; border: 1px solid #dfe6f2; border-radius: 12px; background: #fff; }
.custom-report-builder summary { padding: 10px 12px; color: #315cbd; font-size: 11px; font-weight: 780; cursor: pointer; list-style: none; }
.custom-report-builder summary::-webkit-details-marker { display: none; }
.custom-report-builder[open] summary { border-bottom: 1px solid #e5eaf3; }
.custom-report-builder > p { margin: 0; padding: 0 12px 11px; color: var(--muted); font-size: 10px; }
.custom-report-form { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 9px; padding: 12px; }
.custom-report-form label { gap: 4px; min-width: 0; font-size: 10px; }
.custom-report-form input, .custom-report-form select { min-height: 36px; padding: 7px 9px; border-radius: 9px; font-size: 11px; }
.custom-report-form .field-wide { grid-column: span 2; }
.custom-report-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 7px; padding-top: 2px; }
.analytics-report-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; }
.page-type-scope { display: grid; grid-template-columns: minmax(190px, auto) minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 9px; padding: 9px 11px; border: 1px solid #dfe6f2; border-radius: 12px; background: #fff; }
.page-type-scope > div:first-child { display: grid; gap: 2px; }
.page-type-scope > div:first-child strong { color: #33415a; font-size: 11px; }
.page-type-scope > div:first-child span { color: var(--muted); font-size: 9px; }
.page-type-scope-list { min-width: 0; display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.page-type-scope-button { min-height: 29px; flex: none; padding: 5px 9px; border: 1px solid #dce3ef; border-radius: 8px; background: #f8faff; color: #55627a; font-size: 10px; font-weight: 700; white-space: nowrap; }
.page-type-scope-button:hover { border-color: #b9c9ed; background: #f0f4fd; }
.page-type-scope-button.active { border-color: #9eb5ef; background: #eaf1ff; color: #2857be; box-shadow: inset 0 0 0 1px rgba(55, 103, 232, .08); }
.analytics-meta { display: flex; justify-content: space-between; gap: 14px; margin: 9px 2px 12px; color: var(--muted); font-size: 11px; }
.analytics-meta strong { color: var(--ink); }
.analytics-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: start; }
.report-library { position: sticky; top: 154px; max-height: calc(100vh - 170px); overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcff; scrollbar-width: thin; }
.report-library-title { margin: 1px 5px 13px; color: #44516a; font-size: 12px; font-weight: 780; }
.report-group { display: grid; gap: 2px; margin-bottom: 12px; }
.report-group:last-child { margin-bottom: 0; }
.report-group h4 { margin: 0 5px 4px; color: #8490a5; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.report-link { width: 100%; min-height: 32px; display: flex; align-items: center; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #39465d; text-align: left; }
.report-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; }
.report-link:hover { background: #f1f5fc; }
.report-link.active { border-color: #c7d7fb; background: #eaf1ff; color: #2857be; }
.analytics-report { min-width: 0; min-height: 560px; padding: clamp(16px, 1.7vw, 24px); border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 12px 32px rgba(36, 62, 112, .055); }
.analytics-report-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.analytics-report-head h3 { margin: 5px 0 4px; font-size: clamp(20px, 2vw, 26px); }
.analytics-report-head p { max-width: 760px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.analytics-scope-label { display: inline-flex; margin-top: 9px; padding: 5px 8px; border-radius: 7px; background: #eaf1ff; color: #315cbd; font-size: 10px; font-weight: 750; }
.analytics-chart { display: grid; gap: 5px; margin-top: 16px; }
.analytics-row { width: 100%; display: grid; grid-template-columns: minmax(150px, .9fr) minmax(180px, 2.2fr) 80px; gap: 12px; align-items: center; min-height: 31px; padding: 3px 6px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; }
.analytics-row:hover, .analytics-row.active { background: #f4f7fd; }
.analytics-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4b5870; font-size: 11px; }
.analytics-row strong { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.analytics-bar { height: 9px; overflow: hidden; border-radius: 999px; background: #edf1f7; }
.analytics-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4770e6, #5fc4aa); transition: width .2s ease; }
.analytics-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.analytics-kpi .analytics-row { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 13px; border: 1px solid #dfe7f5; border-radius: 12px; background: #f8faff; }
.analytics-kpi .analytics-row:hover, .analytics-kpi .analytics-row.active { border-color: #aebff0; background: #f1f5ff; }
.analytics-kpi .analytics-row strong { order: -1; text-align: left; font-size: 24px; }
.analytics-kpi .analytics-bar { display: none; }
.analytics-detail-head { display: flex; justify-content: space-between; margin-top: 22px; padding: 15px 0 9px; border-top: 1px solid var(--line); }
.analytics-detail-head h4 { margin: 0 0 3px; font-size: 15px; }
.analytics-detail-head p { margin: 0; color: var(--muted); font-size: 11px; }
.analytics-table { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.analytics-table-head, .analytics-table-row { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(5, minmax(70px, .65fr)) 22px; gap: 10px; align-items: center; }
.analytics-table-head { padding: 8px 11px; background: #f6f8fc; color: #7a8599; font-size: 9px; font-weight: 760; letter-spacing: .035em; text-transform: uppercase; }
.analytics-table-head span:not(:first-child) { text-align: right; }
.analytics-table-item + .analytics-table-item { border-top: 1px solid var(--line); }
.analytics-table-row { width: 100%; min-height: 39px; padding: 7px 11px; border: 0; background: #fff; color: #465168; text-align: right; font-size: 11px; }
.analytics-table-row:hover, .analytics-table-row.active { background: #f7f9fd; }
.analytics-table-row > strong { overflow: hidden; color: var(--ink); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.analytics-table-row > span { font-variant-numeric: tabular-nums; }
.analytics-table-row > i { color: #8c97aa; font-size: 18px; font-style: normal; transition: transform .15s; }
.analytics-table-row.active > i { transform: rotate(90deg); }
.analytics-breakdown { padding: 13px; border-top: 1px solid var(--line); background: #fafbfe; }
.analytics-breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.analytics-breakdown-group { min-width: 0; padding: 10px; border: 1px solid #e5eaf3; border-radius: 10px; background: #fff; }
.analytics-breakdown-group h5 { margin: 0 0 8px; color: #6e7a90; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.analytics-breakdown-group div { display: grid; gap: 6px; }
.analytics-breakdown-group span { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; color: #536078; font-size: 10px; }
.analytics-breakdown-group em { overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.analytics-breakdown-group strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.analytics-breakdown-group .selector-breakdown-row,.anomaly-breakdown section > .selector-breakdown-row { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 7px; border-bottom: 1px solid #eef1f6; }
.live-preview-button { grid-column: 1 / -1; justify-self: start; border: 0; border-radius: 7px; padding: 5px 8px; background: #edf3ff; color: #315abe; font: 700 9px/1.2 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; cursor: pointer; }
.live-preview-button:hover { background: #dfe9ff; color: #244ba8; }
.analytics-breakdown-action { display: flex; justify-content: flex-end; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }

.anomaly-toolbar { position: sticky; top: 82px; z-index: 8; display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)) auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid rgba(216, 224, 237, .95); border-radius: 14px; background: rgba(248, 250, 255, .94); backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(40, 58, 92, .05); }
.anomaly-toolbar label { gap: 4px; font-size: 10px; }
.anomaly-toolbar select, .anomaly-toolbar .button { min-height: 36px; padding-block: 7px; border-radius: 9px; font-size: 12px; }
.anomaly-status { display: flex; gap: 11px; align-items: center; margin-top: 10px; padding: 11px 13px; border: 1px solid #dce4f2; border-radius: 13px; background: #f8faff; }
.anomaly-status.status-ready { border-color: #bfe5d7; background: #f1fbf7; }
.anomaly-status.status-empty { background: #fafbfc; }
.anomaly-status-icon { width: 29px; height: 29px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #e5edff; color: #315fc6; font-weight: 800; }
.anomaly-status.status-ready .anomaly-status-icon { background: #d8f3e8; color: #15755a; }
.anomaly-status strong { display: block; color: #33415a; font-size: 11px; }
.anomaly-status p { margin: 2px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.anomaly-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.anomaly-kpis article { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.anomaly-kpis span { color: #718097; font-size: 9px; font-weight: 760; letter-spacing: .05em; text-transform: uppercase; }
.anomaly-kpis strong { color: var(--ink); font-size: 24px; font-variant-numeric: tabular-nums; }
.anomaly-kpis small { color: var(--muted); font-size: 9px; }
.anomaly-heading { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin: 17px 2px 8px; }
.anomaly-heading h4 { margin: 0 0 2px; font-size: 15px; }
.anomaly-heading p, .anomaly-heading > span { margin: 0; color: var(--muted); font-size: 10px; }
.anomaly-list { display: grid; gap: 7px; }
.anomaly-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.anomaly-card.severity-high { border-left: 4px solid #e05252; }
.anomaly-card.severity-medium { border-left: 4px solid #e3a42b; }
.anomaly-card.severity-low { border-left: 4px solid #6c8fdc; }
.anomaly-card summary { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 11px; align-items: center; min-height: 64px; padding: 9px 12px; cursor: pointer; list-style: none; }
.anomaly-card summary::-webkit-details-marker { display: none; }
.anomaly-card summary:hover { background: #fafbfe; }
.anomaly-marker { width: 8px; height: 8px; border-radius: 50%; background: #6c8fdc; box-shadow: 0 0 0 4px #edf2ff; }
.severity-high .anomaly-marker { background: #d84d4d; box-shadow: 0 0 0 4px #fff0f0; }
.severity-medium .anomaly-marker { background: #dc9b20; box-shadow: 0 0 0 4px #fff6e4; }
.anomaly-title { min-width: 0; display: grid; gap: 2px; }
.anomaly-title small { color: #7b879c; font-size: 9px; }
.anomaly-title strong { overflow: hidden; color: #26334a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.anomaly-title em { color: #63718a; font-size: 10px; font-style: normal; }
.anomaly-change { min-width: 86px; color: #53627a; text-align: right; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.anomaly-change.up { color: #b45f12; }
.anomaly-change.down { color: #315fc6; }
.anomaly-badge { min-width: 77px; padding: 5px 7px; border-radius: 8px; background: #f0f3f8; color: #5f6d83; text-align: center; font-size: 9px; font-weight: 760; }
.severity-high .anomaly-badge { background: #fff0f0; color: #b23e3e; }
.severity-medium .anomaly-badge { background: #fff5df; color: #9c6410; }
.anomaly-body { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(300px, 1.3fr); gap: 12px; padding: 13px; border-top: 1px solid var(--line); background: #fafbfe; }
.anomaly-comparison { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 11px; border: 1px solid #e3e8f2; border-radius: 11px; background: #fff; }
.anomaly-comparison div:not(.anomaly-arrow) { display: grid; gap: 3px; }
.anomaly-comparison span, .anomaly-comparison small { color: var(--muted); font-size: 9px; }
.anomaly-comparison strong { color: var(--ink); font-size: 20px; }
.anomaly-arrow { color: #99a4b7; }
.anomaly-explanation { display: flex; flex-wrap: wrap; gap: 7px 12px; align-content: center; padding: 10px 12px; border: 1px solid #e3e8f2; border-radius: 11px; background: #fff; }
.anomaly-explanation p { width: 100%; margin: 0; color: #4f5d74; font-size: 11px; }
.anomaly-explanation strong { color: #26334a; font-size: 10px; }
.anomaly-explanation span { margin-left: auto; font-size: 9px; font-weight: 760; }
.confidence-high { color: #15755a; }
.confidence-medium { color: #9c6410; }
.confidence-low { color: #6f7d93; }
.anomaly-path { grid-column: 1 / -1; overflow: hidden; padding: 7px 10px; border-radius: 8px; background: #eef3fc; color: #536785; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.anomaly-breakdown { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.anomaly-breakdown section { padding: 9px; border: 1px solid #e3e8f2; border-radius: 10px; background: #fff; }
.anomaly-breakdown h5 { margin: 0 0 7px; color: #7c8799; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.anomaly-breakdown section > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-top: 5px; color: #57657d; font-size: 9px; }
.anomaly-breakdown em { overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.anomaly-breakdown strong { color: var(--ink); }
.anomaly-empty { display: grid; place-items: center; gap: 5px; min-height: 180px; padding: 30px; border: 1px dashed #d6deeb; border-radius: 14px; color: #66748a; text-align: center; }
.anomaly-empty strong { color: #344159; font-size: 14px; }
.anomaly-empty span { max-width: 520px; font-size: 11px; }

.ml-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ml-summary-grid article { display: grid; gap: 3px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, #fff, #f6f8fd); }
.ml-summary-grid span, .ml-summary-grid small { color: var(--muted); font-size: 10px; }
.ml-summary-grid strong { color: var(--ink); font-size: 24px; font-variant-numeric: tabular-nums; }
.ml-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 12px; }
.compact-heading { margin-top: 20px; }
.ml-run-list, .ml-export-list { display: grid; gap: 8px; }
.ml-run-card { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(260px, 1.2fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ml-run-card > div:first-child, .ml-export-row > div { display: grid; gap: 3px; }
.ml-run-card strong, .ml-export-row strong { color: var(--ink); font-size: 12px; }
.ml-run-card span, .ml-export-row span { color: var(--muted); font-size: 10px; }
.ml-quality { display: flex; flex-wrap: wrap; gap: 5px; }
.ml-quality span { padding: 5px 7px; border-radius: 7px; background: #f0f4fb; color: #53647e; }
.ml-export-actions { display: flex; gap: 5px; }
.ml-export-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, .8fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.ml-export-row code { overflow: hidden; color: #53647e; font-size: 10px; text-overflow: ellipsis; }

@media (max-width: 900px) {
  .analytics-toolbar { grid-template-columns: repeat(2, 1fr); }
  .anomaly-toolbar { grid-template-columns: repeat(2, 1fr); }
  .anomaly-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom-report-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-type-scope { grid-template-columns: 1fr; }
  .analytics-layout { grid-template-columns: 1fr; }
  .report-library { position: static; max-height: 280px; }
  .analytics-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-table { overflow-x: auto; }
  .analytics-table-head, .analytics-table-row { min-width: 760px; }
  .page-report-row { grid-template-columns: 1fr 1fr; }
  .page-report-row > span:first-child, .page-report-tags { grid-column: 1 / -1; }
  .page-report-metric { text-align: left; }
  .ml-layout { grid-template-columns: 1fr; }
  .ml-run-card { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .analytics-toolbar { position: static; grid-template-columns: 1fr; }
  .anomaly-toolbar { position: static; grid-template-columns: 1fr; }
  .anomaly-card summary { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .anomaly-badge { display: none; }
  .anomaly-body { grid-template-columns: 1fr; }
  .custom-report-form { grid-template-columns: 1fr; }
  .custom-report-form .field-wide { grid-column: auto; }
  .analytics-meta, .analytics-report-head { flex-direction: column; }
  .analytics-report { padding: 14px; }
  .analytics-row { grid-template-columns: minmax(100px, 1fr) minmax(90px, 1.4fr) 54px; gap: 7px; }
  .analytics-kpi { grid-template-columns: 1fr 1fr; }
  .page-type-scope { padding: 9px; }
  .ml-summary-grid { grid-template-columns: 1fr; }
  .ml-export-row { grid-template-columns: 1fr auto; }
  .ml-export-row code { grid-column: 1 / -1; }
}