/* J4 新UI试点 · Amber Ops 琥珀运营 + 深色侧栏双色外壳
   来源：finesse-ui references/product-palettes.md Set 2「Amber Ops」+ §4.A two-tone shell。
   开关：html[data-ui="amber"] 时生效，不设置即为原版（版本1）。沿用现有公共变量名，不改正式文件。 */

/* ── 1. 变量：浅色（暖纸 + 焦橙） ───────────────────────────── */
html[data-ui="amber"][data-theme="light"]{
  color-scheme: light;
  --page: #f4f0e9;
  --bg: #f4f0e9; --bg-elev: #fffdfa; --bg-elev2: #faf6f0; --bg-hover: #f3ebe0;
  --border: rgba(48,32,20,.09); --border-soft: rgba(48,32,20,.06); --control: #9b8b7a;
  --text: #1f1710; --text-2: #4a3f34; --text-3: #6f604f; --muted: #6f604f;
  --accent: #bf541d; --accent-2: #2e6b63; --on-accent: #fffdfa; --accent-soft: rgba(217,100,42,.11);
  --success: #2f7a55; --danger: #b63c33; --warning: #8f5f0f; --info: #2e6b63;
  --up: #2f7a55; --down: #b63c33; --focus: #d9642a;
  --nav-glass: rgba(244,240,233,.86); --grid: transparent; --glow: rgba(217,100,42,.30);
  --chart-1: #d9642a; --chart-2: #2e6b63; --chart-3: #8a6d4b; --chart-4: #6b7f9a; --chart-5: #b59a6a; --chart-6: #7b5f73;
  --shadow: 0 1px 3px rgba(60,38,20,.05), 0 1px 1px rgba(60,38,20,.03);
  --shadow-lg: 0 40px 90px -50px rgba(60,38,20,.38);
  --radius: 18px; --radius-sm: 11px;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  /* 深色侧栏：与页面同为暖色相 */
  --rail: #17120d; --rail-2: #231b14; --rail-ink: #b8aa98; --rail-ink-active: #fffaf3;
  --rail-active: rgba(233,115,58,.16); --rail-bar: #e9733a; --rail-border: rgba(255,240,220,.07);
}
/* ── 2. 变量：深色（同色相重新推导，非反色） ─────────────────── */
html[data-ui="amber"][data-theme="dark"]{
  color-scheme: dark;
  --page: #120e0a;
  --bg: #120e0a; --bg-elev: #1c1712; --bg-elev2: #241d17; --bg-hover: #2b231b;
  --border: rgba(255,236,214,.08); --border-soft: rgba(255,236,214,.05); --control: #7d6e5f;
  --text: #f4ede4; --text-2: #cdbfae; --text-3: #a89782; --muted: #a89782;
  --accent: #ee8a55; --accent-2: #6fb5aa; --on-accent: #1f1209; --accent-soft: rgba(238,138,85,.15);
  --success: #74c79c; --danger: #f08f84; --warning: #e7b763; --info: #6fb5aa;
  --up: #74c79c; --down: #f08f84; --focus: #ee8a55;
  --nav-glass: rgba(18,14,10,.84); --grid: transparent; --glow: rgba(238,138,85,.26);
  --chart-1: #ee8a55; --chart-2: #6fb5aa; --chart-3: #c9a77a; --chart-4: #8ea3c0; --chart-5: #a88f6b; --chart-6: #b893ad;
  --shadow: 0 1px 3px rgba(0,0,0,.30);
  --shadow-lg: 0 40px 90px -40px rgba(0,0,0,.70);
  --radius: 18px; --radius-sm: 11px;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --rail: #0b0806; --rail-2: #18120d; --rail-ink: #ad9f8e; --rail-ink-active: #fffaf3;
  --rail-active: rgba(238,138,85,.16); --rail-bar: #ee8a55; --rail-border: rgba(255,240,220,.06);
}

/* ── 3. 基础 ──────────────────────────────────────────────────── */
html[data-ui="amber"][data-theme] body{ background: var(--page); color: var(--text); font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
html[data-ui="amber"][data-theme] :focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
html[data-ui="amber"][data-theme] ::selection{ background: var(--accent-soft); }

/* ── 4. 外壳：深色侧栏 + 暖纸顶栏（正式接入时归 MOS 公共框架） ─── */
html[data-ui="amber"][data-theme] .sidebar{ background: var(--rail); color: var(--rail-ink); border-right: 1px solid var(--rail-border); backdrop-filter: none; }
html[data-ui="amber"][data-theme] .sidebar .brand{ border-bottom: 1px solid var(--rail-border); }
html[data-ui="amber"][data-theme] .sidebar .brand-mark{ background: var(--rail-bar); color: #1f1209; border: 0; border-radius: 10px; box-shadow: 0 6px 18px -6px var(--glow); font-weight: 800; }
html[data-ui="amber"][data-theme] .sidebar .brand-name{ color: var(--rail-ink-active); letter-spacing: .02em; }
html[data-ui="amber"][data-theme] .sidebar .brand-sub, html[data-ui="amber"][data-theme] .sidebar .nav-group-label, html[data-ui="amber"][data-theme] .sidebar .sidebar-foot, html[data-ui="amber"][data-theme] .sidebar .muted{ color: #8a7c6b; }
html[data-ui="amber"][data-theme] .sidebar .nav-group-label{ letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
html[data-ui="amber"][data-theme] .sidebar .nav-item{ position: relative; color: var(--rail-ink); border: 0; border-radius: 10px; min-height: 40px; margin-bottom: 2px; background: transparent; box-shadow: none; transition: background .15s, color .15s; }
html[data-ui="amber"][data-theme] .sidebar .nav-item:hover{ background: var(--rail-2); color: var(--rail-ink-active); }
html[data-ui="amber"][data-theme] .sidebar .nav-item.is-active{ background: var(--rail-active); color: var(--rail-ink-active); font-weight: 600; box-shadow: none; }
html[data-ui="amber"][data-theme] .sidebar .nav-item.is-active::before{ content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rail-bar); }
html[data-ui="amber"][data-theme] .sidebar .nav-item.is-active svg{ color: var(--rail-bar); }
html[data-ui="amber"][data-theme] .sidebar .nav-item .nav-owner{ color: #8a7c6b; }
html[data-ui="amber"][data-theme] .sidebar .icon-btn, html[data-ui="amber"][data-theme] .sidebar .btn{ background: var(--rail-2); color: var(--rail-ink); border-color: var(--rail-border); }
html[data-ui="amber"][data-theme] .topbar{ background: var(--nav-glass); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--border); box-shadow: none; }
html[data-ui="amber"][data-theme] .topbar-title{ font-weight: 650; letter-spacing: -.01em; }
html[data-ui="amber"][data-theme] .topbar .icon-btn{ background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-2); box-shadow: var(--shadow); }
html[data-ui="amber"][data-theme] .topbar .icon-btn:hover{ color: var(--accent); }
html[data-ui="amber"][data-theme] .topbar .chip{ background: var(--bg-elev2); border: 1px solid var(--border); color: var(--text-2); border-radius: 999px; }
html[data-ui="amber"][data-theme] .content{ background: var(--page); }

/* ── 5. 公共控件（预览范围内） ─────────────────────────────────── */
html[data-ui="amber"][data-theme] .btn{ border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow); font-weight: 550; min-height: 38px; padding: 8px 16px; transition: background .15s, border-color .15s, transform .1s; }
html[data-ui="amber"][data-theme] .btn:hover{ background: var(--bg-hover); border-color: var(--control); }
html[data-ui="amber"][data-theme] .btn:active{ transform: translateY(1px); }
html[data-ui="amber"][data-theme] .btn-primary, html[data-ui="amber"][data-theme] .btn-primary:hover{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 8px 22px -10px var(--glow); }
html[data-ui="amber"][data-theme] .btn-primary:hover{ filter: brightness(1.05); }
html[data-ui="amber"][data-theme] button:disabled, html[data-ui="amber"][data-theme] .btn:disabled{ background: var(--bg-elev2); color: var(--text-3); border-style: dashed; box-shadow: none; transform: none; }
html[data-ui="amber"][data-theme] .input, html[data-ui="amber"][data-theme] .select{ border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); min-height: 40px; box-shadow: inset 0 1px 2px rgba(60,38,20,.04); transition: border-color .15s, box-shadow .15s; }
html[data-ui="amber"][data-theme] .input:hover, html[data-ui="amber"][data-theme] .select:hover{ border-color: var(--control); }
html[data-ui="amber"][data-theme] .input:focus, html[data-ui="amber"][data-theme] .select:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-ui="amber"][data-theme] .input::placeholder{ color: var(--text-3); }
html[data-ui="amber"][data-theme] .muted{ color: var(--text-3); }
html[data-ui="amber"][data-theme] .chip{ border-radius: 999px; font-weight: 600; }
html[data-ui="amber"][data-theme] dialog{ border: 1px solid var(--border); border-radius: 22px; background: var(--bg-elev); box-shadow: var(--shadow-lg); }
html[data-ui="amber"][data-theme] dialog::backdrop{ background: rgba(23,18,13,.48); backdrop-filter: blur(3px); }

/* ── 6. 计算规则页 ─────────────────────────────────────────────── */
/* finesse-ui workflow-ui §1：工作流外壳——结果列 + 右侧粘性“测试条件”侧栏；§2：编号区块卡
   ①测试条件 → ②商品资料表（店）→ ③经营数据，编号表示真实先后（条件同时作用于两个区块）。 */
html[data-ui="amber"] #cr-root{ gap: 18px; max-width: 1640px; counter-reset: cr-step; }
html[data-ui="amber"] #cr-root .cr-head{ display: contents; }
html[data-ui="amber"] #cr-root .cr-head > div{ grid-area: title; }
html[data-ui="amber"] #cr-root .cr-test{ grid-area: aside; position: relative; }
html[data-ui="amber"] #cr-root .cr-status{ grid-area: status; }
html[data-ui="amber"] #cr-root #cr-body{ grid-area: body; display: grid; gap: 18px; min-width: 0; }
html[data-ui="amber"] #cr-root{ grid-template-areas: "title" "aside" "status" "body"; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) {
  html[data-ui="amber"] #cr-root{ grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "title title" "status aside" "body aside"; align-items: start; column-gap: 20px; }
  html[data-ui="amber"] #cr-root .cr-test{ position: sticky; top: 84px; margin-top: 0; max-height: calc(100dvh - 104px); overflow: auto; overscroll-behavior: contain; }
  html[data-ui="amber"] #cr-root .cr-test-row, html[data-ui="amber"] #cr-root .cr-test-row.cr-test-sample{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  html[data-ui="amber"] #cr-root .cr-test-field:first-child{ grid-column: 1 / -1; }
  html[data-ui="amber"] #cr-root .cr-test .input, html[data-ui="amber"] #cr-root .cr-test .select, html[data-ui="amber"] #cr-root .cr-test select{ width: 100%; box-sizing: border-box; }
  html[data-ui="amber"] #cr-root .cr-test-actions{ grid-column: 1 / -1; position: sticky; bottom: -16px; margin: 4px -18px -16px; padding: 12px 18px 14px; background: color-mix(in srgb, var(--bg-elev) 88%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--border); justify-content: flex-end; }
  html[data-ui="amber"] #cr-root .cr-test-actions .btn{ flex: 1; }
}
/* 编号徽标：侧栏和两个区块共用一个计数 */
html[data-ui="amber"] #cr-root .cr-test::before, html[data-ui="amber"] #cr-root .cr-group > h2::before{ counter-increment: cr-step; content: counter(cr-step); display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font: 700 13px/1 var(--mono); }
html[data-ui="amber"] #cr-root .cr-test{ }
html[data-ui="amber"] #cr-root .cr-test::before{ position: absolute; left: 18px; top: 16px; }
html[data-ui="amber"] #cr-root .cr-test::after{ content: "测试条件"; position: absolute; left: 56px; top: 16px; line-height: 28px; font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
/* 载入错层（只用于首次出现，减少动态效果时关闭） */
html[data-ui="amber"] #cr-root .cr-test, html[data-ui="amber"] #cr-root .cr-group{ animation: cr-rise .45s cubic-bezier(.2,.8,.2,1) both; }
html[data-ui="amber"] #cr-root .cr-group:nth-child(2){ animation-delay: .07s; }
html[data-ui="amber"] #cr-root .cr-group:nth-child(3){ animation-delay: .14s; }
@keyframes cr-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* 页头：标题 + 说明 + 测试条件工具栏 */
html[data-ui="amber"] #cr-root .cr-head h1{ font-size: 24px; line-height: 1.3; font-weight: 750; letter-spacing: -.02em; margin: 2px 0 6px; color: var(--text); }
html[data-ui="amber"] #cr-root .cr-head > div > p{ margin: 0; max-width: 72ch; color: var(--text-3); font-size: 13px; }
html[data-ui="amber"] #cr-root .cr-test{ width: auto; margin-top: 0; padding: 60px 18px 16px; gap: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); box-shadow: var(--shadow); }
html[data-ui="amber"] #cr-root .cr-test-row{ gap: 10px 14px; align-items: flex-end; }
html[data-ui="amber"] #cr-root .cr-test-row + .cr-test-row{ padding-top: 12px; border-top: 1px dashed var(--border); }
html[data-ui="amber"] #cr-root .cr-test-field > span{ font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: .01em; }
html[data-ui="amber"] #cr-root .cr-test-field small, html[data-ui="amber"] #cr-root .cr-test-field .muted{ font-size: 11.5px; }
html[data-ui="amber"] #cr-root .cr-test .input[aria-invalid="true"]{ border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); }
@media (max-width: 1199px) { html[data-ui="amber"] #cr-root .cr-test-actions{ margin-left: auto; } }
html[data-ui="amber"] #cr-root .cr-test-actions{ min-height: 40px; }
html[data-ui="amber"] #cr-root .cr-test-actions .btn:first-child{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 8px 22px -10px var(--glow); }
html[data-ui="amber"] #cr-root .cr-test p{ font-size: 12px; color: var(--text-3); line-height: 1.65; }
html[data-ui="amber"] #cr-root #cr-test-msg:not(:empty){ padding: 8px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--text); }
html[data-ui="amber"] #cr-root .cr-status{ font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 8px; }
html[data-ui="amber"] #cr-root .cr-status::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 18%, transparent); flex: none; }
html[data-ui="amber"] #cr-root .cr-warn{ color: var(--danger); }
html[data-ui="amber"] #cr-root .cr-busy{ opacity: .5; }

/* 区块卡片 */
html[data-ui="amber"] #cr-root .cr-group{ border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px 22px; gap: 14px; background: var(--bg-elev); box-shadow: var(--shadow); }
html[data-ui="amber"] #cr-root .cr-group > h2{ display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
html[data-ui="amber"] #cr-root .cr-group > p, html[data-ui="amber"] #cr-root .cr-group .cr-note{ color: var(--text-3); font-size: 12.5px; }

/* 结果表：粘性表头、斑马淡底、数字右对齐等宽 */
html[data-ui="amber"] #cr-root .cr-result{ border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elev); max-height: min(70vh, 640px); overflow: auto; overscroll-behavior: contain; scrollbar-color: var(--control) transparent; }
html[data-ui="amber"] #cr-root .cr-result-table{ border-collapse: separate; border-spacing: 0; font-size: 13px; }
html[data-ui="amber"] #cr-root .cr-result-table th{ position: sticky; top: 0; z-index: 1; background: var(--bg-elev2); color: var(--text-2); font-weight: 600; border-bottom: 1px solid var(--border); }
html[data-ui="amber"] #cr-root .cr-result-table td{ border-bottom: 1px solid var(--border-soft); }
html[data-ui="amber"] #cr-root .cr-result-table tbody tr:nth-child(even) td{ background: color-mix(in srgb, var(--bg-elev2) 55%, transparent); }
html[data-ui="amber"] #cr-root .cr-result-table tbody tr:last-child td{ border-bottom: 0; }
html[data-ui="amber"] #cr-root .cr-cell{ min-height: 40px; padding: 8px 12px; border-radius: 0; transition: background .12s, color .12s; }
html[data-ui="amber"] #cr-root .cr-cell:hover{ background: var(--accent-soft); color: var(--text); }
html[data-ui="amber"] #cr-root .cr-cell:focus-visible{ outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 6px; }
html[data-ui="amber"] #cr-root .cr-head-btn{ font-weight: 650; font-size: 12.5px; }
html[data-ui="amber"] #cr-root .cr-head-btn small{ color: var(--text-3); font-size: 11px; margin-top: 1px; }
html[data-ui="amber"] #cr-root .cr-col-value .cr-cell, html[data-ui="amber"] #cr-root .cr-col-rule .cr-cell{ font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; }
html[data-ui="amber"] #cr-root .cr-col-rule .cr-head-btn, html[data-ui="amber"] #cr-root .cr-col-value .cr-head-btn{ font-family: inherit; }
html[data-ui="amber"] #cr-root .cr-miss{ color: var(--danger); font-weight: 600; }
html[data-ui="amber"] #cr-root .cr-thumb{ border-radius: 8px; border: 1px solid var(--border); }
html[data-ui="amber"] #cr-root .cr-table th, html[data-ui="amber"] #cr-root .cr-table td{ border-bottom-color: var(--border); }
html[data-ui="amber"] #cr-root .cr-table small{ color: var(--text-3); }

/* 运算关系：竖排算式 */
html[data-ui="amber"] #cr-root .cr-rels{ gap: 10px; }
html[data-ui="amber"] #cr-root .cr-rels > h3{ font-size: 14px; font-weight: 700; color: var(--text-2); letter-spacing: .02em; }
html[data-ui="amber"] #cr-root .cr-rel{ border-top: 1px solid var(--border-soft); }
html[data-ui="amber"] #cr-root .cr-rel.is-eq{ padding: 12px 8px; border-radius: 12px; transition: background .15s; }
html[data-ui="amber"] #cr-root .cr-rel.is-eq:hover{ background: var(--bg-elev2); }
html[data-ui="amber"] #cr-root .cr-rel.is-hl{ background: var(--accent-soft); border-top-color: transparent; }
html[data-ui="amber"] #cr-root .cr-rel > .cr-rel-target{ font-weight: 650; color: var(--text); }
html[data-ui="amber"] #cr-root .cr-tok{ border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev2); padding: 3px 9px 4px; }
html[data-ui="amber"] #cr-root .cr-tok-lb{ color: var(--text-3); font-size: 11px; }
html[data-ui="amber"] #cr-root .cr-tok-v{ font-family: var(--mono); color: var(--text); font-size: 13.5px; }
html[data-ui="amber"] #cr-root .cr-tok.is-ref{ border-color: color-mix(in srgb, var(--accent-2) 55%, transparent); background: color-mix(in srgb, var(--accent-2) 8%, var(--bg-elev)); }
html[data-ui="amber"] #cr-root .cr-tok.is-const{ border-style: dashed; background: transparent; }
html[data-ui="amber"] #cr-root .cr-tok.is-miss{ border-color: var(--danger); }
html[data-ui="amber"] #cr-root .cr-op{ color: var(--text-3); font-family: var(--mono); }
html[data-ui="amber"] #cr-root .cr-op.cr-eqs{ color: var(--accent); }
html[data-ui="amber"] #cr-root .cr-res-chip{ font-family: var(--mono); border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--text); border-radius: 10px; padding: 3px 12px; }
html[data-ui="amber"] #cr-root button.cr-res-chip:hover{ background: color-mix(in srgb, var(--accent) 22%, transparent); }
html[data-ui="amber"] #cr-root .cr-chain{ color: var(--text-3); font-family: var(--mono); }
html[data-ui="amber"] #cr-root .cr-arrow{ color: var(--accent); }
html[data-ui="amber"] #cr-root .cr-pill{ border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); }
html[data-ui="amber"] #cr-root .cr-rel-val{ border-radius: 6px; border-color: var(--border); font-family: var(--mono); }
html[data-ui="amber"] #cr-root .cr-rel-lines{ font-family: var(--mono); }

/* 规则卡片 / 编辑器（明细弹窗内） */
html[data-ui="amber"] #cr-root .cr-rule{ border-top: 1px solid var(--border-soft); }
html[data-ui="amber"] #cr-root .cr-rule h3{ font-size: 14px; font-weight: 700; }
html[data-ui="amber"] #cr-root .cr-rule dt{ color: var(--text-3); font-size: 12.5px; }
html[data-ui="amber"] #cr-root .cr-rule code{ font-family: var(--mono); font-size: 12.5px; background: var(--bg-elev2); border: 1px solid var(--border-soft); border-radius: 6px; padding: 1px 6px; }
html[data-ui="amber"] #cr-root .cr-editor{ border-radius: 14px; background: var(--bg-elev2); border: 1px solid var(--border-soft); padding: 14px; }
html[data-ui="amber"] #cr-root .cr-form textarea, html[data-ui="amber"] #cr-root .cr-form input{ border-radius: var(--radius-sm); }
html[data-ui="amber"] #cr-root .cr-token{ min-height: 30px; padding: 3px 10px; border-radius: 999px; font-family: var(--mono); font-size: 12px; box-shadow: none; }
html[data-ui="amber"] #cr-root .cr-group > .cr-rule.cr-recalc{ margin-top: 4px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 14px; }

/* 明细弹窗 */
html[data-ui="amber"] #cr-root .cr-dialog{ width: min(800px, calc(100vw - 24px)); border-radius: 22px; padding: 0; overflow: auto; }
html[data-ui="amber"] #cr-root .cr-dialog[open]{ animation: cr-pop .18s cubic-bezier(.2,.8,.2,1); }
@keyframes cr-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
html[data-ui="amber"] #cr-root .cr-dialog-head{ padding: 16px 20px; background: color-mix(in srgb, var(--bg-elev) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
html[data-ui="amber"] #cr-root .cr-dialog-head h2{ font-size: 16px; font-weight: 700; }
html[data-ui="amber"] #cr-root #cr-dialog-body{ padding: 16px 20px 20px; gap: 12px; }
html[data-ui="amber"] #cr-root .cr-dialog-value{ font-size: 15px; }
html[data-ui="amber"] #cr-root .cr-dialog-dl dt{ color: var(--text-3); }
html[data-ui="amber"] #cr-root #cr-dialog-body .cr-rel{ background: var(--bg-elev2); border-radius: 12px; }

@media (max-width: 640px) {
  html[data-ui="amber"] #cr-root .cr-head h1{ font-size: 20px; }
  html[data-ui="amber"] #cr-root .cr-test{ padding: 58px 14px 14px; }
  html[data-ui="amber"] #cr-root .cr-test-actions{ margin-left: 0; }
  html[data-ui="amber"] #cr-root .cr-group{ padding: 16px 14px 18px; border-radius: 16px; }
  html[data-ui="amber"] #cr-root .cr-result{ max-height: none; }
  html[data-ui="amber"][data-theme] .sidebar .nav-item.is-active::before{ left: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="amber"] #cr-root .cr-dialog[open]{ animation: none; }
  html[data-ui="amber"][data-theme] .btn:active{ transform: none; }
}