/* 财务协同平台 —— SAP Fiori（Horizon）风格样式 */
:root {
  --brand: #0070f2;
  --highlight: #0064d9;
  --shell: #ffffff;
  --bg: #f5f6f7;
  --surface: #ffffff;
  --text: #1d2d3e;
  --label: #556b82;
  --muted: #6a7d91;
  --border: #e5e5e5;
  --border-strong: #a8b2bd;
  --hover: #eaecee;
  --selected: #ebf8ff;
  --field-border: #8396a8;
  --btn-border: #bcc3ca;
  --focus: #0032a5;
  --positive: #256f3a;
  --positive-bg: #f5fae5;
  --positive-el: #30914c;
  --critical: #b44f00;
  --critical-bg: #fff3b8;
  --critical-el: #e76500;
  --negative: #aa0808;
  --negative-bg: #ffeaf4;
  --negative-el: #d20a0a;
  --info: #0064d9;
  --info-bg: #e1f4ff;
  --neutral-bg: #eff1f2;
  --shadow0: 0 0 .125rem 0 rgba(34,53,72,.2), 0 .125rem .25rem 0 rgba(34,53,72,.2);
  --shadow1: 0 0 0 .0625rem rgba(34,53,72,.1), 0 .25rem .75rem 0 rgba(34,53,72,.2);
  --shadow2: 0 0 0 .0625rem rgba(34,53,72,.1), 0 .625rem 1.875rem 0 rgba(34,53,72,.25);
  --r-tile: 1rem;
  --r-card: .75rem;
  --r-btn: .5rem;
  --r-field: .25rem;
  /* 图表（dataviz 参考调色板，已通过 CVD 校验的前序槽位） */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --axis-text: #6a7d91;
  --font: "72", "72full", "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--highlight); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: .125rem solid var(--focus); outline-offset: -.0625rem; border-radius: .25rem; }
.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.neg { color: var(--negative); }
.muted { color: var(--label); }
.small { font-size: .75rem; }
.nowrap { white-space: nowrap; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: .5rem; }
.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.mt { margin-top: 1rem; }

/* ------------------------------------------------------------ Shell */
.shell-bar {
  position: sticky; top: 0; z-index: 50;
  height: 3.25rem; display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem 0 .75rem; background: var(--shell);
  box-shadow: 0 0 .125rem rgba(34,53,72,.15), 0 .125rem .25rem rgba(34,53,72,.08);
}
.shell-logo { display: flex; align-items: center; gap: .625rem; cursor: pointer; padding: .25rem .5rem; border-radius: var(--r-btn); }
.shell-logo:hover { background: var(--hover); }
.logo-mark {
  width: 2rem; height: 2rem; border-radius: .5rem; display: grid; place-items: center;
  background: linear-gradient(135deg, #0070f2, #0040b0); color: #fff; font-weight: 700; font-size: .8125rem; letter-spacing: .02em;
}
.shell-title { font-weight: 700; font-size: 1rem; white-space: nowrap; }
.shell-sub { color: var(--label); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-spacer { flex: 1; }
.shell-search {
  display: flex; align-items: center; gap: .375rem; width: 22rem; max-width: 34vw;
  height: 2.25rem; padding: 0 .75rem; border-radius: 1.125rem; background: #eff1f2; border: .0625rem solid transparent;
}
.shell-search:focus-within { background: #fff; border-color: var(--highlight); }
.shell-search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; }
.shell-btn {
  position: relative; width: 2.25rem; height: 2.25rem; border-radius: var(--r-btn); border: 0; background: transparent;
  display: grid; place-items: center; color: var(--text); cursor: pointer;
}
.shell-btn:hover { background: var(--hover); }
.shell-btn .dot {
  position: absolute; top: .25rem; right: .25rem; min-width: 1rem; height: 1rem; padding: 0 .25rem; border-radius: .5rem;
  background: var(--negative-el); color: #fff; font-size: .625rem; font-weight: 700; display: grid; place-items: center;
}
.avatar {
  width: 2rem; height: 2rem; border-radius: 50%; background: #d1efff; color: #0040b0; font-weight: 700;
  display: grid; place-items: center; font-size: .8125rem; border: 0; cursor: pointer;
}
.avatar:hover { box-shadow: 0 0 0 .1875rem var(--hover); }

.top-nav {
  position: sticky; top: 3.25rem; z-index: 40;
  display: flex; gap: .25rem; padding: 0 1.5rem; background: var(--shell);
  border-bottom: .0625rem solid var(--border); overflow-x: auto; scrollbar-width: none;
}
.top-nav a {
  display: flex; align-items: center; gap: .375rem; height: 2.75rem; padding: 0 .875rem; color: var(--text);
  border-bottom: .1875rem solid transparent; white-space: nowrap; font-weight: 600;
}
.top-nav a:hover { text-decoration: none; background: var(--hover); }
.top-nav a.active { color: var(--highlight); border-bottom-color: var(--highlight); }
.top-nav a svg { opacity: .85; }

main#page { min-height: calc(100vh - 6rem); }

/* ------------------------------------------------------------ Dynamic page */
.page-head {
  background: var(--surface); padding: 1rem 2rem .75rem; border-bottom: .0625rem solid var(--border);
}
.page-head.with-tabs { padding-bottom: 0; }
.crumbs { font-size: .8125rem; color: var(--label); margin-bottom: .25rem; display: flex; gap: .375rem; flex-wrap: wrap; }
.crumbs a { color: var(--highlight); }
.page-title-row { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.page-title { font-size: 1.25rem; font-weight: 700; margin: 0; line-height: 2rem; }
.page-subtitle { color: var(--label); font-size: .875rem; margin-top: .125rem; }
.page-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.kpi-row { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: .875rem; }
.kpi .kpi-label { color: var(--label); font-size: .8125rem; }
.kpi .kpi-value { font-size: 1.375rem; font-weight: 400; margin-top: .125rem; white-space: nowrap; }
.kpi .kpi-value small { font-size: .8125rem; color: var(--label); margin-left: .25rem; }
.kpi.positive .kpi-value { color: var(--positive); }
.kpi.negative .kpi-value { color: var(--negative); }
.kpi.critical .kpi-value { color: var(--critical); }
.page-body { padding: 1rem 2rem 2.5rem; }

/* Icon tab bar */
.tabs { display: flex; gap: .25rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: thin; }
.tab {
  border: 0; background: transparent; padding: 0 .875rem; height: 2.75rem; cursor: pointer; white-space: nowrap;
  border-bottom: .1875rem solid transparent; color: var(--text); font-weight: 600; display: flex; align-items: center; gap: .375rem;
}
.tab:hover { background: var(--hover); border-radius: .5rem .5rem 0 0; }
.tab.active { color: var(--highlight); border-bottom-color: var(--highlight); }
.tab .count { font-weight: 400; color: var(--label); }

/* ------------------------------------------------------------ Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: 2.25rem; min-width: 2.25rem;
  padding: 0 .75rem; border-radius: var(--r-btn); border: .0625rem solid var(--btn-border); background: #fff;
  color: var(--highlight); font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn:hover { background: var(--hover); text-decoration: none; }
.btn:active { background: #dee2e5; }
.btn.emph { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.emph:hover { background: #0064d9; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--hover); }
.btn.negative { color: var(--negative); border-color: #f8c7c7; }
.btn.negative:hover { background: var(--negative-bg); }
.btn.positive { color: var(--positive); border-color: #b5dfbf; }
.btn.icon-only { padding: 0; width: 2.25rem; }
.btn.sm { height: 1.75rem; min-width: 1.75rem; padding: 0 .5rem; font-size: .8125rem; }
.btn.sm.icon-only { width: 1.75rem; padding: 0; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.seg { display: inline-flex; border: .0625rem solid var(--btn-border); border-radius: var(--r-btn); overflow: hidden; background: #fff; }
.seg button { border: 0; background: transparent; padding: 0 .875rem; height: 2.125rem; cursor: pointer; color: var(--text); font-weight: 600; }
.seg button + button { border-left: .0625rem solid var(--btn-border); }
.seg button.active { background: var(--selected); color: var(--highlight); box-shadow: inset 0 -.125rem 0 var(--highlight); }
.seg button:hover:not(.active) { background: var(--hover); }

/* ------------------------------------------------------------ Fields */
.field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.field > label { color: var(--label); font-size: .8125rem; }
.field > label .req { color: var(--negative); margin-left: .125rem; }
.input, select.input, textarea.input {
  height: 2.25rem; width: 100%; padding: 0 .625rem; border-radius: var(--r-field); border: .0625rem solid var(--field-border);
  background: #fff; outline: none; min-width: 0;
}
textarea.input { height: auto; min-height: 5rem; padding: .5rem .625rem; resize: vertical; line-height: 1.5; }
.input:hover { border-color: var(--highlight); }
.input:focus { border-color: var(--highlight); box-shadow: inset 0 0 0 .0625rem var(--highlight); }
.input.invalid { border-color: var(--negative-el); background: #fff4f4; box-shadow: inset 0 -.0625rem 0 var(--negative-el); }
.input[readonly] { background: #f7f8f9; border-color: var(--border); }
.field .help { color: var(--label); font-size: .75rem; }
.field .err { color: var(--negative); font-size: .75rem; }
.check { display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; user-select: none; }
.check input { width: 1rem; height: 1rem; accent-color: var(--brand); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem 1.25rem; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }

/* Filter bar */
.filter-bar {
  background: var(--surface); padding: .75rem 2rem 1rem; border-bottom: .0625rem solid var(--border);
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end;
}
.filter-bar .field { width: 12rem; }
.filter-bar .field.wide { width: 18rem; }
.filter-bar .fb-actions { display: flex; gap: .5rem; margin-left: auto; }

/* ------------------------------------------------------------ Cards / panels */
.card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow0); overflow: hidden; }
.card-head { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem .5rem; flex-wrap: wrap; }
.card-head > div:first-child { min-width: 0; flex: 1 1 14rem; }
.card-title, .card-sub { overflow-wrap: anywhere; }
.card-title { font-weight: 700; font-size: 1rem; }
.card-sub { color: var(--label); font-size: .8125rem; }
.card-actions { margin-left: auto; display: flex; gap: .375rem; align-items: center; }
.card-body { padding: .5rem 1rem 1rem; }
.card-body.flush { padding: 0; }
.grid { display: grid; gap: 1rem; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.side { grid-template-columns: 16rem minmax(0, 1fr); align-items: start; }
.grid.side.wide-side { grid-template-columns: 20rem minmax(0, 1fr); }

/* ------------------------------------------------------------ Launchpad tiles */
.lp-section { margin-bottom: 1.75rem; }
.lp-section-title { font-size: 1.125rem; font-weight: 700; margin: 0 0 .75rem; display: flex; align-items: center; gap: .5rem; }
.tiles { display: flex; flex-wrap: wrap; gap: 1rem; }
.tile {
  width: 11rem; height: 11rem; border-radius: var(--r-tile); background: var(--surface); box-shadow: var(--shadow0);
  padding: 1rem; display: flex; flex-direction: column; cursor: pointer; position: relative; border: 0; text-align: left;
  transition: box-shadow .15s;
}
.tile:hover { box-shadow: var(--shadow1); }
.tile.wide { width: 23rem; }
.tile-title { font-weight: 700; font-size: .875rem; line-height: 1.25rem; max-height: 2.5rem; overflow: hidden; }
.tile-sub { color: var(--label); font-size: .8125rem; margin-top: .125rem; }
.tile-content { margin-top: auto; }
.tile-kpi { display: flex; align-items: baseline; gap: .25rem; color: var(--text); }
.tile-kpi .v { font-size: 2.25rem; font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }
.tile-kpi .v.sm { font-size: 1.5rem; }
.tile-kpi .u { color: var(--label); font-size: .875rem; }
.tile-kpi.positive .v { color: var(--positive); }
.tile-kpi.negative .v { color: var(--negative); }
.tile-kpi.critical .v { color: var(--critical); }
.tile-lines { display: flex; flex-direction: column; gap: .25rem; font-size: .8125rem; }
.tile-lines div { display: flex; justify-content: space-between; gap: .5rem; }
.tile-lines b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tile-foot { color: var(--label); font-size: .75rem; margin-top: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-icon { position: absolute; right: 1rem; top: 1rem; color: var(--label); }

/* ------------------------------------------------------------ Tables */
.toolbar { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; flex-wrap: wrap; }
.toolbar-title { font-weight: 700; font-size: 1rem; }
.toolbar-title .count { color: var(--label); font-weight: 400; margin-left: .25rem; }
.tbl-wrap { overflow: auto; max-height: calc(100vh - 14rem); }
.tbl-wrap.auto-h { max-height: none; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th {
  position: sticky; top: 0; z-index: 2; background: #fff; text-align: left; font-weight: 700; color: var(--text);
  padding: .5rem .75rem; height: 2.75rem; border-bottom: .0625rem solid var(--border-strong); white-space: nowrap; font-size: .8125rem;
}
.tbl th.sortable { cursor: pointer; }
.tbl th.sortable:hover { background: var(--hover); }
.tbl th .sort { color: var(--label); margin-left: .25rem; font-size: .6875rem; }
.tbl td { padding: .5rem .75rem; height: 2.75rem; border-bottom: .0625rem solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover td { background: #f5f7f9; }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl tbody tr.clickable:hover td { background: var(--hover); }
.tbl tr.sum td { font-weight: 700; background: #f7f8f9; }
.tbl tr.sec td { font-weight: 700; background: #f2f4f6; color: var(--text); height: 2.25rem; }
.tbl tr.sub td { background: #fbfbfc; font-weight: 600; }
.tbl tr.bold td { font-weight: 700; }
.tbl tfoot td { position: sticky; bottom: 0; background: #f7f8f9; font-weight: 700; border-top: .0625rem solid var(--border-strong); }
.tbl td.indent-1 { padding-left: 1.75rem; }
.tbl td.indent-2 { padding-left: 2.75rem; color: var(--label); }
.tbl .actions { white-space: nowrap; text-align: right; }
.tbl .ellipsis { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl.compact td, .tbl.compact th { height: 2.25rem; padding: .25rem .625rem; }
.drill { color: var(--highlight); cursor: pointer; }

/* 日记账：行内编辑表格 */
.tbl.journal { table-layout: fixed; min-width: 74rem; }
.tbl.journal td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl.journal td, .tbl.journal th { padding-left: .5rem; padding-right: .5rem; }
.tbl.journal tr.editing-more td { white-space: normal; overflow: visible; }
.tbl.journal td.wrap-cell { white-space: normal; }
.two-lines { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; word-break: break-all; }
.tbl.journal tbody tr.clickable { cursor: text; }
.tbl.journal tr.editing td, .tbl.journal tr.editing-more td { background: #eef6ff; padding: .3125rem .375rem; }
.tbl.journal tr.editing td:first-child, .tbl.journal tr.editing-more td:first-child { box-shadow: inset .1875rem 0 0 var(--highlight); }
.tbl.journal tr.editing.new-row td, .tbl.journal tr.editing-more.new-row td { background: #f1f9ec; }
.tbl.journal tr.editing.new-row td:first-child, .tbl.journal tr.editing-more.new-row td:first-child { box-shadow: inset .1875rem 0 0 var(--positive-el); }
.tbl.journal tbody tr.editing:hover td { background: #eef6ff; }
.tbl.journal tbody tr.editing.new-row:hover td { background: #f1f9ec; }
.cell-input {
  height: 2rem; width: 100%; min-width: 0; padding: 0 .5rem; border: .0625rem solid var(--field-border);
  border-radius: var(--r-field); background: #fff; outline: none;
}
.cell-input:hover { border-color: var(--highlight); }
.cell-input:focus { border-color: var(--highlight); box-shadow: inset 0 0 0 .0625rem var(--highlight); }
.cell-input.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-input[type=date] { padding: 0 .25rem 0 .375rem; }
.cell-input.invalid { border-color: var(--negative-el); background: #fff4f4; box-shadow: inset 0 -.0625rem 0 var(--negative-el); }
.locked-cell { display: inline-flex; align-items: center; gap: .25rem; color: var(--label); padding: 0 .25rem; cursor: not-allowed; }
.extra-grid { display: grid; grid-template-columns: 10rem 16rem 9rem minmax(12rem, 1fr); gap: .5rem .75rem; }
.extra-field { display: flex; flex-direction: column; gap: .125rem; font-size: .75rem; color: var(--label); }
.drill:hover { text-decoration: underline; }
.more-row { text-align: center; padding: .75rem; }
.empty { padding: 3rem 1rem; text-align: center; color: var(--label); }
.empty svg { opacity: .5; margin-bottom: .5rem; }

/* Object status / badges */
.badge {
  display: inline-flex; align-items: center; gap: .25rem; padding: 0 .5rem; height: 1.375rem; border-radius: .25rem;
  font-size: .75rem; font-weight: 700; white-space: nowrap; background: var(--neutral-bg); color: var(--label);
}
.badge.positive { background: var(--positive-bg); color: var(--positive); }
.badge.critical { background: var(--critical-bg); color: var(--critical); }
.badge.negative { background: var(--negative-bg); color: var(--negative); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.outline { background: transparent; border: .0625rem solid var(--btn-border); }
.progress { height: .375rem; width: 6rem; background: #e5eaee; border-radius: .1875rem; overflow: hidden; display: inline-block; vertical-align: middle; }
.progress > i { display: block; height: 100%; background: var(--series-1); border-radius: .1875rem; }
.progress.done > i { background: var(--positive-el); }

/* Message strip */
.msg { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem .75rem; border-radius: var(--r-btn); border: .0625rem solid; font-size: .875rem; }
.msg.info { background: var(--info-bg); border-color: #a6d8ff; }
.msg.success { background: var(--positive-bg); border-color: #b5dfbf; }
.msg.warning { background: #fff8d6; border-color: #ffd970; }
.msg.error { background: var(--negative-bg); border-color: #ffb0cf; }
.msg .msg-icon { flex: none; margin-top: .0625rem; }
.msg.info .msg-icon { color: var(--info); }
.msg.success .msg-icon { color: var(--positive-el); }
.msg.warning .msg-icon { color: var(--critical-el); }
.msg.error .msg-icon { color: var(--negative-el); }
.msg ul { margin: .25rem 0 0; padding-left: 1.125rem; }

/* ------------------------------------------------------------ Dialog / popover / toast */
.overlay { position: fixed; inset: 0; background: rgba(29,45,62,.45); z-index: 200; display: grid; place-items: center; padding: 1rem; }
.dialog {
  background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow2); width: 36rem; max-width: 100%;
  max-height: calc(100vh - 2rem); display: flex; flex-direction: column; overflow: hidden;
}
.dialog.lg { width: 56rem; }
.dialog.xl { width: 72rem; }
.dialog-head { padding: .875rem 1rem; display: flex; align-items: center; gap: .5rem; border-bottom: .0625rem solid var(--border); }
.dialog-title { font-weight: 700; font-size: 1rem; flex: 1; }
.dialog-body { padding: 1rem; overflow: auto; }
.dialog-body.flush { padding: 0; }
.dialog-foot { padding: .625rem 1rem; display: flex; justify-content: flex-end; gap: .5rem; border-top: .0625rem solid var(--border); background: #fafbfc; }
.popover {
  position: fixed; z-index: 150; background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow2); min-width: 16rem; max-width: 26rem;
  overflow: hidden;
}
.popover .pop-head { padding: .75rem 1rem; border-bottom: .0625rem solid var(--border); font-weight: 700; }
.popover .pop-item { display: flex; gap: .625rem; align-items: center; padding: .625rem 1rem; cursor: pointer; color: var(--text); }
.popover .pop-item:hover { background: var(--hover); text-decoration: none; }
.popover .pop-item .meta { color: var(--label); font-size: .75rem; }
.popover .pop-scroll { max-height: 22rem; overflow: auto; }
.toast-host { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.toast { background: rgba(29,45,62,.92); color: #fff; padding: .75rem 1.25rem; border-radius: var(--r-btn); box-shadow: var(--shadow1); max-width: 32rem; animation: toast-in .2s ease-out; }
.toast.error { background: #a20808; }
@keyframes toast-in { from { opacity: 0; transform: translateY(.5rem); } }
.busy { position: relative; min-height: 6rem; }
.busy::after {
  content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Ccircle cx='6' cy='6' r='4' fill='%230070f2'%3E%3Canimate attributeName='opacity' values='1;.2;1' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='24' cy='6' r='4' fill='%230070f2'%3E%3Canimate attributeName='opacity' values='1;.2;1' dur='1s' begin='.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='42' cy='6' r='4' fill='%230070f2'%3E%3Canimate attributeName='opacity' values='1;.2;1' dur='1s' begin='.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center no-repeat;
  z-index: 5;
}

/* File drop */
.drop {
  border: .125rem dashed var(--btn-border); border-radius: var(--r-card); padding: 1.5rem 1rem; text-align: center;
  color: var(--label); cursor: pointer; background: #fafbfc;
}
.drop:hover, .drop.over { border-color: var(--highlight); background: var(--selected); color: var(--highlight); }
.drop .files { margin-top: .5rem; color: var(--text); font-size: .8125rem; }

/* Side list (master list) */
.side-list { padding: .5rem 0; }
.side-item { display: flex; align-items: center; gap: .625rem; padding: .625rem 1rem; cursor: pointer; border-left: .1875rem solid transparent; }
.side-item:hover { background: var(--hover); }
.side-item.active { background: var(--selected); border-left-color: var(--highlight); color: var(--highlight); font-weight: 600; }
.side-item .cnt { margin-left: auto; color: var(--label); font-size: .8125rem; font-weight: 400; }
.side-sep { border-top: .0625rem solid var(--border); margin: .5rem 0; }

/* Object page */
.obj-facts { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: .75rem; }
.fact .k { color: var(--label); font-size: .8125rem; }
.fact .v { margin-top: .125rem; }
.dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.dl .k { color: var(--label); font-size: .8125rem; }
.dl .v { margin-top: .125rem; word-break: break-word; white-space: pre-wrap; }
.section-title { font-size: 1rem; font-weight: 700; margin: 0 0 .75rem; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: 9.5rem 1fr; gap: .75rem; padding: .5rem 0; border-bottom: .0625rem solid var(--border); }
.timeline .when { color: var(--label); font-size: .8125rem; }
.timeline .who { font-weight: 600; margin-right: .375rem; }

/* Activity feed */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: .75rem; padding: .625rem 0; border-bottom: .0625rem solid var(--border); }
.feed li:last-child { border-bottom: 0; }
.feed .av { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #eaf3ff; color: #0040b0; display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.feed .txt { min-width: 0; }
.feed .txt .s { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.feed .meta { color: var(--label); font-size: .75rem; margin-top: .125rem; }

/* Markdown */
.md { line-height: 1.7; }
.md h1, .md h2, .md h3 { line-height: 1.35; margin: 1.25rem 0 .5rem; }
.md h1 { font-size: 1.375rem; } .md h2 { font-size: 1.125rem; } .md h3 { font-size: 1rem; }
.md > :first-child { margin-top: 0; }
.md p { margin: .5rem 0; }
.md ul, .md ol { padding-left: 1.5rem; margin: .5rem 0; }
.md li.task { list-style: none; margin-left: -1.25rem; }
.md code { background: #f0f2f4; border-radius: .25rem; padding: .0625rem .3125rem; font-family: Consolas, "Courier New", monospace; font-size: .8125rem; }
.md pre { background: #f5f6f7; border: .0625rem solid var(--border); border-radius: var(--r-btn); padding: .75rem 1rem; overflow: auto; }
.md pre code { background: transparent; padding: 0; }
.md blockquote { margin: .75rem 0; padding: .5rem .875rem; border-left: .25rem solid #a6d8ff; background: var(--info-bg); border-radius: 0 .5rem .5rem 0; color: #284766; }
.md table { border-collapse: collapse; margin: .75rem 0; width: 100%; font-size: .8125rem; }
.md th, .md td { border: .0625rem solid var(--border); padding: .375rem .625rem; text-align: left; }
.md th { background: #f2f4f6; }
.md hr { border: 0; border-top: .0625rem solid var(--border); margin: 1rem 0; }

/* Charts */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart .tick { fill: var(--axis-text); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .lbl { fill: var(--label); font-size: 11px; }
.chart .val { fill: var(--text); font-size: 11px; font-weight: 600; }
.chart-tip {
  position: absolute; pointer-events: none; background: #fff; border-radius: .5rem; box-shadow: var(--shadow1);
  padding: .5rem .625rem; font-size: .75rem; white-space: nowrap; z-index: 10; transform: translate(-50%, calc(-100% - .5rem));
}
.chart-tip .t { font-weight: 700; margin-bottom: .25rem; }
.chart-tip .r { display: flex; align-items: center; gap: .375rem; }
.chart-tip .r b { margin-left: auto; padding-left: .75rem; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .75rem; color: var(--label); margin-bottom: .5rem; }
.legend span { display: inline-flex; align-items: center; gap: .375rem; }
.swatch { width: .625rem; height: .625rem; border-radius: .125rem; display: inline-block; flex: none; }

/* Login */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: radial-gradient(1200px 600px at 10% 0%, #d6ebff 0%, transparent 60%), radial-gradient(900px 600px at 100% 100%, #e3e9ff 0%, transparent 55%), #f5f6f7;
}
.login-card { width: 24rem; max-width: 100%; background: #fff; border-radius: 1rem; box-shadow: var(--shadow2); padding: 2rem; }
.login-card .logo-mark { width: 3rem; height: 3rem; font-size: 1.125rem; border-radius: .75rem; }
.login-card h1 { font-size: 1.375rem; margin: 1rem 0 .25rem; }
.login-card .sub { color: var(--label); margin-bottom: 1.5rem; }
.login-card .field { margin-bottom: 1rem; }
.login-card .btn { width: 100%; height: 2.5rem; }
.login-foot { margin-top: 1.5rem; color: var(--label); font-size: .75rem; text-align: center; }

/* Print */
@media print {
  .shell-bar, .top-nav, .filter-bar, .page-actions, .toolbar .btn, .tabs, .no-print { display: none !important; }
  body { background: #fff; }
  .page-head, .page-body { padding: 0 0 .5rem; }
  .card { box-shadow: none; border: 0; }
  .tbl-wrap { max-height: none; overflow: visible; }
  .tbl th { position: static; }
}

/* Responsive */
@media (max-width: 1100px) {
  .cit-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .cit-grid > .card { position: static !important; }
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .page-head, .page-body, .filter-bar { padding-left: 1rem; padding-right: 1rem; }
  .top-nav { padding: 0 .5rem; }
  .shell-search, .shell-sub { display: none; }
  .grid.c2, .grid.c3, .grid.c4, .grid.side, .grid.side.wide-side { grid-template-columns: minmax(0, 1fr); }
  .form-grid, .form-grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2 { grid-column: auto; }
  .filter-bar .field, .filter-bar .field.wide { width: 100%; }
  .tile { width: calc(50% - .5rem); }
  .tile.wide { width: 100%; }
  .dl { grid-template-columns: minmax(0, 1fr); }
  .kpi-row { gap: 1.25rem; }
}