/* ==================================================================
   通用工作台模板 · 样式层
   ------------------------------------------------------------------
   与业务无关的框架样式：布局骨架、通用组件、两套主题变量。
   业务页面只使用这里的类名，不自行写样式细则，
   这样换主题或改视觉时不需要动页面代码。
   ================================================================== */

/* ---------- 主题变量 ---------- */
:root {
  --accent: #E8A33D;
  --accent-soft: rgba(232, 163, 61, 0.14);
  --up: #E05B52;
  --down: #4CAF7D;
  --danger: #E05B52;
  --success: #4CAF7D;
  --info: #5A9FD4;

  --sidebar-w: 208px;
  --topbar-h: 52px;
  --pad: 20px;
  --radius: 10px;
  --radius-sm: 6px;

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", Menlo, Consolas, "Courier New", monospace;
}

/* 深色（默认） */
html[data-theme="dark"] {
  --bg: #0E1117;
  --bg-elev: #151A23;
  --bg-elev2: #1B212C;
  --bg-hover: #222936;
  --border: #262D3A;
  --border-soft: #1E242F;
  --text: #E4E8EF;
  --text-2: #A8B0BF;
  --text-3: #6B7484;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* 浅色 */
html[data-theme="light"] {
  --bg: #F5F6F8;
  --bg-elev: #FFFFFF;
  --bg-elev2: #FAFBFC;
  --bg-hover: #EFF1F4;
  --border: #E1E4E9;
  --border-soft: #ECEEF1;
  --text: #1A1F28;
  --text-2: #5A6472;
  --text-3: #8D96A3;
  --shadow: 0 2px 12px rgba(20, 30, 50, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--accent); text-decoration: none; }

/* ---------- 骨架：侧栏 + 顶栏 + 内容 ---------- */
.app { display: flex; min-height: 100vh; }

/* 侧栏 */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width .18s ease, flex-basis .18s ease;
}
.sidebar[data-collapsed="true"] {
  /* 就地覆盖，优先级高于 :root 的 --sidebar-w，
     这样即使 html 上有行内变量，折叠仍然生效 */
  --sidebar-w: 60px;
  width: 60px;
  flex: 0 0 60px;
}

.brand {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-soft);
  flex: 0 0 auto;
  overflow: hidden;
}
.brand-mark {
  width: 26px; height: 26px;
  flex: 0 0 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), #C97F1E);
  display: grid; place-items: center;
  color: #1A1206; font-weight: 700; font-size: 13px;
}
.brand-text { min-width: 0; }
.brand[role="button"] { cursor: pointer; }
.brand[role="button"]:hover { background: var(--bg-hover); }
.brand[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.brand [role="button"] { cursor: pointer; }
.brand [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.profile-editor, .profile-notice {
  box-sizing: border-box; width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow: auto; margin: auto; padding: 24px;
  color: var(--text); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
}
.profile-editor::backdrop, .profile-notice::backdrop { background: rgba(0,0,0,.6); }
.profile-editor h2, .profile-notice h2 { font-size: 18px; margin: 0 0 20px; }
.profile-editor label { display: grid; gap: 8px; margin: 16px 0; font-size: 13px; }
.profile-editor input { box-sizing: border-box; width: 100%; min-width: 0; }
.profile-preview { display: flex; align-items: center; gap: 12px; }
.profile-preview .brand-mark { width: 56px; height: 56px; flex-basis: 56px; font-size: 24px; }
.profile-preview [data-profile="preview-name"] { overflow-wrap: anywhere; min-width: 0; }
.profile-preview .brand-mark { cursor: pointer; }
.profile-avatar-details { display: grid; gap: 8px; min-width: 0; }
.profile-avatar-details .btn { justify-self: start; }
.profile-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
@media (max-width: 480px) { .profile-fields { grid-template-columns: minmax(0,1fr); gap: 0; } }
.profile-help, .profile-notice p { color: var(--text-2); font-size: 12px; line-height: 1.7; }
.profile-error { color: var(--danger); font-size: 13px; min-height: 20px; }
.profile-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.brand-name {
  font-size: 13px; font-weight: 600; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub {
  font-size:12px; color: var(--text-3);
  letter-spacing: 1.4px; text-transform: uppercase;
  white-space: nowrap;
}
.sidebar[data-collapsed="true"] .brand-text { display: none; }

.nav { flex: 1; padding: 10px 8px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.nav-item svg { width: 16px; height: 16px; flex: 0 0 16px; }
.nav-item span { overflow: hidden; text-overflow: ellipsis; }
.nav-item[draggable="true"] { position: relative; cursor: grab; }
.nav-item.is-dragging { opacity: .5; cursor: grabbing; }
.nav-item[data-drop-position]::after {
  content: ''; position: absolute; left: 4px; right: 4px;
  height: 2px; background: var(--accent); pointer-events: none;
}
.nav-item[data-drop-position="before"]::after { top: -2px; }
.nav-item[data-drop-position="after"]::after { bottom: -2px; }
.nav-sort-status { padding: 6px; color: var(--danger); font-size: 12px; }
.nav-sort-status:empty { display: none; }
.sidebar[data-collapsed="true"] .nav-item span { display: none; }
.sidebar[data-collapsed="true"] .nav-item { justify-content: center; }

.nav-group-label {
  padding: 14px 10px 6px;
  font-size:12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-3);
}
.sidebar[data-collapsed="true"] .nav-group-label { display: none; }

.sidebar-foot {
  padding: 10px;
  border-top: 1px solid var(--border-soft);
  flex: 0 0 auto;
}

/* 主区 */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: auto;
  min-height: var(--topbar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px var(--pad);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-title { font-size: 14px; font-weight: 600; white-space: nowrap; flex: 1 1 8rem; }
.topbar-spacer { display: none; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.topbar { flex-wrap: wrap; }
.topbar-right > .icon-btn { flex-shrink: 0; }
.topbar #statusSource { min-width: 0; max-width: 13rem; overflow-wrap: anywhere; }
.topbar #clock { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

.icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; }

.content { flex: 1; padding: var(--pad); min-width: 0; }
.page { display: none; }
.page.is-active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ---------- 通用组件 ---------- */

/* 面板：框架的基本容器 */
.panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.panel-title { font-size: 13px; font-weight: 600; }
.panel-sub { font-size:12px; color: var(--text-3); }
.panel-head-spacer { flex: 1; }
.panel-body { padding: 14px; }

/* 概览卡片 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.card::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  opacity: .5;
}
.card-label {
  font-size:12px; color: var(--text-3);
  letter-spacing: .3px;
  display: flex; align-items: center; gap: 6px;
}
.card-value {
  font-size: 24px; font-weight: 600;
  letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
}
.card-value .unit {
  font-size: 12px; font-weight: 400;
  color: var(--text-3); margin-left: 3px;
}
.card-foot {
  font-size:12px; color: var(--text-3);
  display: flex; align-items: center; gap: 6px;
}

.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; }
.delta[data-dir="up"] { color: var(--up); }
.delta[data-dir="down"] { color: var(--down); }
.delta[data-dir="flat"] { color: var(--text-3); }

/* 多栏内容区 */
.cols { display: grid; gap: 14px; margin-bottom: 14px; }
.cols-2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-2-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 1100px) {
  .cols-2, .cols-3, .cols-2-1 { grid-template-columns: minmax(0, 1fr); }
}
.col { min-width: 0; }

/* 图表容器（无第三方库，用原生 SVG 画） */
.chart { width: 100%; display: block; }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 10px;
  font-size:12px; color: var(--text-2);
}
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }

/* 状态条 / 标签 */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  border-radius: 20px;
  font-size:12px;
  background: var(--bg-elev2);
  color: var(--text-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.chip-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip-success { color: var(--success); border-color: rgba(76,175,125,.3); background: rgba(76,175,125,.1); }
.chip-danger { color: var(--danger); border-color: rgba(224,91,82,.3); background: rgba(224,91,82,.1); }
.chip-info { color: var(--info); border-color: rgba(90,159,212,.3); background: rgba(90,159,212,.1); }

.dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }

/* 表格 */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left;
  font-size:12px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: .3px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--bg-elev2);
}
.tbl td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; }

/* 工具条 */
.toolbar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.input, .select {
  height: 30px;
  padding: 0 10px;
  background: var(--bg-elev2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .12s;
}
.input:focus, .select:focus { border-color: var(--accent); }
.input::placeholder { color: var(--text-3); }
.input { min-width: 180px; }
.btn {
  height: 30px; padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elev2);
  color: var(--text-2);
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s, color .12s, border-color .12s;
}
.btn:hover { background: var(--bg-hover); color: var(--text); }
.btn-primary {
  background: var(--accent); color: #1A1206;
  border-color: var(--accent); font-weight: 500;
}
.btn-primary:hover { background: #F0AE4E; color: #1A1206; }
.btn svg { width: 14px; height: 14px; }

/* ---------- 四类状态：加载 / 空 / 错误 / 正常 ---------- */

.state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 36px 20px;
  text-align: center;
  color: var(--text-3);
}
.state-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-elev2);
  color: var(--text-3);
}
.state-icon svg { width: 18px; height: 18px; }
.state-title { font-size: 13px; color: var(--text-2); font-weight: 500; }
.state-desc { font-size:12px; max-width: 340px; line-height: 1.7; }
.state[data-kind="error"] .state-icon { background: rgba(224,91,82,.12); color: var(--danger); }
.state[data-kind="error"] .state-title { color: var(--danger); }
.state[data-kind="empty"] .state-icon { background: var(--bg-elev2); }

/* 加载态：细条进度 + 骨架块 */
.skeleton {
  background: var(--bg-elev2);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skeleton-row { height: 13px; margin-bottom: 9px; }

.progress-line {
  height: 2px;
  background: var(--border-soft);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}
.progress-line::after {
  content: '';
  display: block; height: 100%; width: 34%;
  background: var(--accent);
  border-radius: 2px;
  animation: slide 1.1s infinite ease-in-out;
}
@keyframes slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}

/* 示例数据角标：避免把示例内容误当真实数据 */
.demo-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size:12px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.demo-badge::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

/* ---------- 工具类 ---------- */
.row { display: flex; align-items: center; gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wrap { flex-wrap: wrap; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mb-12 { margin-bottom: 12px; }
.muted { color: var(--text-3); }
.small { font-size:12px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }

/* 滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* 窄屏 */
@media (max-width: 760px) {
  /* 用固定宽度覆盖变量，避免被 html 上的行内变量压过 */
  .sidebar { width: 60px; flex: 0 0 60px; }
  .sidebar .brand-text, .sidebar .nav-item span { display: none; }
  .sidebar .nav-item { justify-content: center; }
  /* 折叠态下底部版本号不占位，避免竖排挤压 */
  .sidebar-foot { display: none; }
  .content { padding: 14px; }
  .card-value { font-size: 20px; }
}

/* T40_THEME_BUNDLE */
/* T40 · T39 visual design applied to live UI. Data and permission contracts stay in their modules. */
html[data-theme="light"] {
  color-scheme:light;
  --bg:#e7e5e1;--bg-elev:#f4f2ee;--bg-elev2:#f4f2ee;--bg-hover:#dedbd5;
  --border:#ccc8c1;--border-soft:#ccc8c1;--control:#827d75;
  --text:#242320;--text-2:#625f59;--text-3:#625f59;
  --accent:#795217;--on-accent:#ffffff;--accent-soft:#dedbd5;
  --success:#236044;--danger:#a32e35;--warning:#755113;--info:#335c7b;
  --up:#a32e35;--down:#236044;--focus:#795217;
  --nav-glass:#f4f2eeed;--grid:#625f5912;--glow:#79521712;
  --chart-1:#475569;--chart-2:#60645a;--chart-3:#78766e;--chart-4:#969187;--chart-5:#b2aca1;--chart-6:#555d60;
  --shadow:0 14px 48px #24232024;
}
html[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0d0f10;--bg-elev:#171a1c;--bg-elev2:#171a1c;--bg-hover:#23272a;
  --border:#363b40;--border-soft:#363b40;--control:#737e86;
  --text:#eceeef;--text-2:#adb3b8;--text-3:#adb3b8;
  --accent:#dcb577;--on-accent:#171a1c;--accent-soft:#23272a;
  --success:#8dd5af;--danger:#f49aa0;--warning:#edc78e;--info:#a2c4e8;
  --up:#f49aa0;--down:#8dd5af;--focus:#dcb577;
  --nav-glass:#171a1ced;--grid:#adb3b811;--glow:#dcb57712;
  --chart-1:#c9d5e3;--chart-2:#a4b6a3;--chart-3:#99938c;--chart-4:#757d86;--chart-5:#565c64;--chart-6:#c1b1c5;
  --shadow:0 14px 48px #0006;
}
/* Compatibility aliases for the ecommerce module. */
:root {--bg-base:var(--bg);--bg-elev1:var(--bg-elev);--text-1:var(--text)}
html,body {font-size:14px;line-height:1.55}
button,input,select,textarea {font:inherit}
button,input,select,textarea,a {touch-action:manipulation}
:focus-visible {outline:3px solid var(--focus);outline-offset:3px}
.skip-link {position:fixed;left:16px;top:-100px;z-index:100;background:var(--bg-elev);color:var(--text);padding:12px;border:1px solid var(--control);border-radius:8px}
.skip-link:focus {top:12px}
.sidebar,.topbar {background:var(--nav-glass);backdrop-filter:blur(14px)}
.sidebar {z-index:21}
.brand {height:78px;flex-basis:78px;padding:0 14px;gap:10px;border-bottom:0}
.brand-mark {width:32px;height:32px;flex-basis:32px;border:1px solid var(--control);border-radius:10px;background:linear-gradient(145deg,var(--bg-elev),var(--bg-hover));color:var(--text);font-size:23px;box-shadow:inset 0 1px 0 #ffffff25}
.brand-name {font-size:14px}.brand-sub {font-size:12px}
.nav {padding:12px 10px}.nav-item {min-height:44px;padding:10px;border:1px solid transparent;border-radius:999px;font-size:14px;gap:8px;margin-bottom:5px;color:var(--text)}
.nav-item .nav-label {flex:1;min-width:0}.nav-item .nav-owner {flex:none;font-size:12px;color:var(--text-2)}
.nav-item.is-active {background:var(--bg-hover);color:var(--text);border-color:var(--control);box-shadow:inset 0 1px 0 #ffffff18}
.sidebar-foot {border:0;padding:20px 12px}.nav-group-label {font-size:12px}
.topbar {gap:12px;min-width:0}.topbar-title {font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis}.topbar-right {min-width:0}
.icon-btn {width:38px;height:38px;flex-shrink:0;border:1px solid var(--control);border-radius:999px;background:var(--bg-elev)}
.content {padding:24px;min-width:0}.page {min-width:0;max-width:100%}
.btn {min-height:38px;height:auto;justify-content:center;padding:8px 14px;border:1px solid var(--control);border-radius:999px;background:var(--bg-elev);color:var(--text);font-size:14px;line-height:1.5}
.btn-primary,.btn-primary:hover {background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-primary:hover {filter:brightness(.94)}
button:disabled,.account-mode button:disabled,.cl-root button:disabled,#ec-root button:disabled {opacity:1;color:var(--text-2);background:var(--bg);border-style:dashed;cursor:not-allowed}
.input,.select {height:auto;min-height:40px;font-size:14px;background:var(--bg-elev);border-color:var(--control);padding:8px 10px;max-width:100%;min-width:0}
textarea.input {padding:10px;min-height:90px}.input::placeholder {color:var(--text-2)}
.panel,.card,.cl-panel,.ec-cards article {background:var(--bg-elev);box-shadow:inset 0 1px 0 #ffffff12;min-width:0}
.panel-head {padding:18px 20px;flex-wrap:wrap}.panel-title {font-size:18px}.panel-body {padding:20px;min-width:0}
.panel-sub,.card-label,.card-foot,.small,.state-desc,.demo-badge,.chip,.chart-legend {font-size:12px}
.card-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.card {padding:22px}.card::after {display:none}.card-value {font-size:30px;margin:8px 0;overflow-wrap:anywhere}.cols {gap:16px;margin-bottom:18px}
#page-overview .cols-2-1 {grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.chip-success,.chip-danger,.chip-info {background:var(--bg-elev);border-color:var(--border)}.chip-accent,.demo-badge {background:var(--bg-hover);color:var(--text-2)}
.table-wrap,.chart-scroll {max-width:100%;min-width:0;overflow:auto;scrollbar-color:var(--control) var(--bg-elev)}
.chart {max-height:300px}.tbl {font-size:14px;background:var(--bg-elev)}.tbl th,.tbl .num {font-size:14px}.tbl th {background:var(--bg-hover)}.tbl td,.tbl th {padding:12px 16px}.chart-legend {color:var(--text-2)}
.overview-heading {position:relative;isolation:isolate;overflow:hidden;padding:24px;margin-bottom:20px;border:1px solid var(--border);border-radius:14px}
.overview-heading::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 85% 10%,var(--glow),transparent 62%),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:auto,32px 32px,32px 32px}
.overview-heading h1 {font-size:30px;line-height:1.3;margin:6px 0 10px;letter-spacing:-.6px}.overview-eyebrow {font-size:12px;letter-spacing:2px;color:var(--text-2)}
.account-overview {padding:24px}.account-overview h2 {font-size:18px;margin-bottom:12px}.account-overview [data-summary] {font-size:16px}
/* Solid forms, tables and readable ecommerce detail. */
#ec-root {padding:0;color:var(--text)}.ec-heading {margin:4px 0 20px}.ec-heading h1 {font-weight:650}.ec-heading p {color:var(--text-2)}
#ec-root input,#ec-root select,#ec-root textarea {font-size:14px;background:var(--bg-elev);border-color:var(--control);min-height:40px}
#ec-root input[type=hidden] {display:none}.ec-filter {gap:12px;padding:18px;background:var(--bg-elev)}.ec-filter .btn {align-self:end}
.ec-cards {grid-template-columns:repeat(6,minmax(0,1fr))}.ec-cards article {border-radius:10px}.ec-cards strong,.ec-cards strong span {overflow-wrap:anywhere}
.ec-scroll {background:var(--bg-elev)}.ec-scroll table {font-size:14px}.ec-scroll th {background:var(--bg-hover)}.ec-scroll small {font-size:12px;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
#ec-status {margin:14px 0;line-height:1.7}.ec-toolbar .btn {font-size:14px}
/* Native dialogs keep the existing business event handlers. */
dialog {margin:auto;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);color:var(--text);background:var(--bg-elev);border:1px solid var(--control);border-radius:14px;box-shadow:var(--shadow);padding:20px;overflow:auto}
dialog::backdrop {background:#0009}
#ec-dialog {margin:auto;background:var(--nav-glass);color:var(--text);border-color:var(--control);backdrop-filter:blur(14px)}
#ec-dialog-body,.ec-dialog-head,#ec-dialog-status {background:var(--bg-elev);border-radius:10px;padding:12px}#ec-dialog-status:empty {display:none}
#ec-dialog pre {font-size:14px;line-height:1.7}.ec-dialog-head h2 {font-size:18px}.ec-dialog-head .btn {flex-shrink:0}
.profile-editor,.profile-notice,.cl-dialog {border-color:var(--control);background:var(--bg-elev)}.profile-editor label {font-size:14px}
.cl-root input:not([type=checkbox]):not([type=file]),.cl-root select {border-color:var(--control);background:var(--bg-elev);font-size:14px;min-height:40px}
.cl-tabs [aria-pressed=true] {background:var(--bg-hover);color:var(--text);border-color:var(--control)}.cl-form input[type=checkbox] {width:auto}.cl-root :focus-visible {outline:3px solid var(--focus)}
.cl-node {gap:4px}.cl-node p,.cl-node label {font-size:12px;line-height:1.35}.cl-title-button {font-size:14px}.cl-tick {font-size:12px}.cl-heading h2 {font-size:26px}
.account-card {box-shadow:var(--shadow)}.account-card textarea {width:100%}.account-user h3 {overflow-wrap:anywhere}
@media(min-width:1600px) {.content{padding:28px 32px}.ec-filter{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1100px) {.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ec-cards{grid-template-columns:repeat(3,minmax(0,1fr))}#page-overview .cols-2-1{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px) {
  .content{padding:12px}.sidebar .brand{padding:0 14px}.nav{padding:10px 8px}.nav-item{padding:10px;justify-content:center}.nav-item svg{flex-shrink:0}
  .topbar,.account-mode .topbar,html.cl-active .topbar{height:auto;min-height:60px;flex-basis:auto;flex-wrap:wrap;padding:10px 12px;gap:8px}
  #panelBtn,#clock{display:none}.topbar-title{font-size:14px;flex:1}.topbar-spacer{display:none}.topbar-right,.account-mode .topbar-right{width:auto;margin-left:auto;gap:8px;flex-wrap:wrap}.topbar #statusSource{display:none}
  .icon-btn{width:44px;height:44px}.btn{min-height:44px}.card{padding:14px}.card-value{font-size:24px}.card-grid{gap:8px}
  .overview-heading{padding:18px 14px}.overview-heading h1{font-size:26px}.overview-eyebrow{letter-spacing:1px}.panel-head,.panel-body{padding:14px}.account-overview{padding:18px}
  .ec-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.ec-filter{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:12px 8px}.ec-filter label:has([name=search]){grid-column:1/-1}
  #ec-root input,#ec-root select,#ec-root textarea,.cl-root input:not([type=checkbox]):not([type=file]),.cl-root select{min-height:44px}
  .ec-form{grid-template-columns:repeat(2,minmax(0,1fr))}#ec-dialog{padding:12px}.ec-dialog-head{padding:10px;gap:8px}.ec-dialog-head h2{font-size:16px}.ec-dialog-head .btn{padding:8px 12px}
  .cl-heading{flex-wrap:wrap}.cl-toolbar label{max-width:100%;flex-wrap:wrap}.cl-form-row{grid-template-columns:minmax(0,1fr)}.account-code{flex-wrap:wrap}.account-code input{flex:1;min-width:100px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.account-mode:not(.account-ready) .skip-link {display:none}

/* T70 Order library: scoped presentation, matching the warm compact database layout. */
#orderLibrary{min-width:0;color:var(--text)}
/* T71 keeps T70's visual layout while enabling real controls and rows. */
#orderLibrary input:not(:disabled),#orderLibrary select:not(:disabled),#orderLibrary .ol-filter button:not(:disabled){opacity:1;cursor:auto}
#orderLibrary .ol-filter button:not(:disabled),#orderLibrary .ol-settings-panel button:not(:disabled){cursor:pointer;opacity:1}
#orderLibrary tbody td{padding:12px 16px;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
#orderLibrary tbody td:nth-child(6),#orderLibrary tbody td:nth-child(7){text-align:right;font-variant-numeric:tabular-nums}
#orderLibrary .ol-list-footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#orderLibrary #ol-dialog{width:min(1000px,calc(100vw - 32px));box-sizing:border-box}
#orderLibrary #ol-dialog p{line-height:1.6}
#orderLibrary #ol-paste{display:block;width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}
#orderLibrary .ol-import-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
#orderLibrary .ol-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
#orderLibrary h1{font-size:20px;line-height:1.4;margin:0;font-weight:650}
#orderLibrary .ol-heading p{font-size:12px;margin:5px 0 0}
#orderLibrary .ol-settings{position:relative;flex-shrink:0;z-index:3}
#orderLibrary summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer}
#orderLibrary summary::-webkit-details-marker{display:none}
#orderLibrary summary:focus-visible,#orderLibrary .ol-table-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#orderLibrary details[open] summary{color:var(--accent);background:var(--accent-soft)}
#orderLibrary .ol-settings-panel{position:absolute;right:0;top:calc(100% + 8px);width:268px;max-width:calc(100vw - 48px);padding:10px;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px #0002}
#orderLibrary .ol-settings-panel h2{font-size:12px;color:var(--text-2);margin:4px 8px 8px}
#orderLibrary .ol-settings-panel button{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 8px;border:0;border-radius:6px;background:transparent;color:var(--text-2);font:inherit;font-size:13px;text-align:left;cursor:not-allowed;opacity:.7}
#orderLibrary .ol-settings-panel button span{font-size:11px;white-space:nowrap;color:var(--text-3)}
#orderLibrary .ol-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
#orderLibrary .ol-card{padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-elev);min-width:0}
#orderLibrary .ol-card span{font-size:12px;color:var(--text-2)}
#orderLibrary .ol-card strong{display:block;font-size:26px;font-weight:600;line-height:1.3;margin:5px 0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#orderLibrary .ol-card small{font-size:11px;color:var(--text-3)}
#orderLibrary .ol-filter{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px;padding:12px 14px;margin-bottom:14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-elev)}
#orderLibrary .ol-filter label{display:grid;gap:6px;min-width:0;flex:1 1 145px;font-size:12px;color:var(--text-2)}
#orderLibrary .ol-filter .ol-search{flex:2 1 230px}
#orderLibrary input,#orderLibrary select{width:100%;min-width:0;max-width:100%;height:36px;box-sizing:border-box;border:1px solid var(--border);border-radius:7px;padding:6px 9px;background:var(--bg);color:var(--text-2);font:inherit;font-size:12px;opacity:.7;cursor:not-allowed}
#orderLibrary .ol-filter button{height:36px;opacity:.55;cursor:not-allowed}
#orderLibrary .ol-filter-note{font-size:11px;color:var(--text-3);align-self:center}
#orderLibrary .ol-list{border:1px solid var(--border);border-radius:12px;background:var(--bg-elev);overflow:hidden}
#orderLibrary .ol-list-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px}
#orderLibrary .ol-list-heading h2{font-size:15px;font-weight:600;margin:0}
#orderLibrary .ol-status{font-size:11px;color:var(--text-2);background:var(--accent-soft);border-radius:20px;padding:4px 9px}
#orderLibrary .ol-table-scroll{overflow-x:auto;max-width:100%;overscroll-behavior-x:contain}
#orderLibrary table{border-collapse:collapse;width:100%;min-width:880px;font-size:12px}
#orderLibrary caption.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#orderLibrary th{padding:12px 16px;background:var(--bg);color:var(--text-2);font-weight:500;text-align:left;white-space:nowrap;border-block:1px solid var(--border)}
#orderLibrary th:nth-child(6),#orderLibrary th:nth-child(7){text-align:right}
#orderLibrary td{padding:0;border:0}
#orderLibrary .ol-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:38px 16px;min-height:180px;color:var(--text-3)}
#orderLibrary .ol-empty strong{font-size:14px;font-weight:500;color:var(--text-2)}
#orderLibrary .ol-empty p{font-size:12px;margin:0}
#orderLibrary .ol-list-footer{padding:10px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--text-3)}
@media(max-width:640px){
 #orderLibrary .ol-heading{margin-bottom:12px}#orderLibrary .ol-heading p{max-width:230px;line-height:1.6}
 #orderLibrary .ol-stats{gap:8px}#orderLibrary .ol-card{padding:12px 9px}#orderLibrary .ol-card strong{font-size:20px}#orderLibrary .ol-card small{font-size:10px}
 #orderLibrary .ol-filter{padding:12px;gap:10px}#orderLibrary .ol-filter label{flex-basis:calc(50% - 10px)}#orderLibrary .ol-filter .ol-search{flex-basis:100%}
 #orderLibrary input,#orderLibrary select,#orderLibrary .ol-filter button{height:44px}
 #orderLibrary .ol-empty{align-items:flex-start;padding-left:20px;min-height:160px}
}