:root {
  --ds-navy-950: #0b1728;
  --ds-navy-900: #101f33;
  --ds-navy-800: #172a42;
  --ds-blue-700: #174f91;
  --ds-blue-600: #1f67b2;
  --ds-blue-500: #2f7bc4;
  --ds-blue-100: #e8f1fb;
  --ds-blue-50: #f3f7fc;
  --ds-slate-900: #172235;
  --ds-slate-700: #43526a;
  --ds-slate-600: #5f6f84;
  --ds-slate-500: #7a8798;
  --ds-slate-300: #ccd5e0;
  --ds-slate-200: #dde4ec;
  --ds-slate-100: #edf1f5;
  --ds-slate-50: #f6f8fa;
  --ds-white: #ffffff;
  --ds-green-700: #227152;
  --ds-green-100: #e6f3ec;
  --ds-amber-700: #92601a;
  --ds-amber-100: #fff1d5;
  --ds-red-700: #a63f4d;
  --ds-red-100: #fae8eb;
  --ds-radius-sm: 6px;
  --ds-radius-md: 9px;
  --ds-radius-lg: 12px;
  --ds-shadow-sm: 0 1px 2px rgba(15, 31, 52, .04);
  --ds-shadow-md: 0 8px 24px rgba(15, 31, 52, .07);
  --ds-focus: 0 0 0 3px rgba(47, 123, 196, .17);
  --ds-sidebar: 220px;
  --ds-content-gap: 16px;
  color-scheme: light;
}
[hidden] { display: none !important; }

html { background: var(--ds-slate-50); }
body {
  min-width: 1100px;
  color: var(--ds-slate-900);
  background: var(--ds-slate-50);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
body.auth-body { min-width: 0; }
a { color: var(--ds-blue-600); transition: color .15s ease; }
a:hover { color: var(--ds-blue-700); }
button, input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus);
}

/* Shell and role navigation */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--ds-sidebar) minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  height: 100vh;
  flex-direction: column;
  padding: 18px 12px 14px;
  color: #dbe5f0;
  background: var(--ds-navy-900);
  box-shadow: 1px 0 0 rgba(255, 255, 255, .04);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 3px 8px 20px; color: #fff; }
.brand:hover { color: #fff; }
.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: #fff;
  background: var(--ds-blue-600);
  box-shadow: none;
  font-size: 17px;
  font-weight: 800;
}
.brand strong { font-size: 14px; letter-spacing: .02em; }
.brand small { margin-top: 2px; color: #8fa2ba; font-size: 10px; }
.nav-list { display: flex; flex-direction: column; gap: 3px; }
.nav-list a {
  position: relative;
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 7px;
  color: #b7c5d7;
  font-size: 13px;
  font-weight: 600;
}
.nav-list a:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav-list a.is-active { color: #fff; background: rgba(66, 139, 213, .23); }
.nav-list a.is-active::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #64a8e8;
  content: "";
}
.nav-icon { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; }
.nav-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.sidebar-footer { display: grid; gap: 11px; margin-top: auto; padding: 14px 7px 0; border-top: 1px solid rgba(255,255,255,.09); }
.user-card { display: flex; min-width: 0; align-items: center; gap: 9px; margin: 0; }
.avatar { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 7px; color: #fff; background: #284563; font-weight: 700; }
.user-card > span:last-child { min-width: 0; }
.user-card strong, .user-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card strong { color: #eef4fa; font-size: 12px; }
.user-card small { margin-top: 1px; color: #8fa2ba; font-size: 10px; }
.user-actions { display: flex; align-items: center; justify-content: space-between; }
.sidebar-footer a, .sidebar-footer .link-button { color: #8fa2ba; font-size: 11px; }
.sidebar-footer a:hover, .sidebar-footer .link-button:hover { color: #fff; }

/* Page heading and common feedback */
.main-content { min-width: 0; padding: 24px 28px 44px; }
.topbar {
  display: flex;
  min-height: 72px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--ds-slate-200);
}
.page-heading { min-width: 0; }
.page-context { display: flex; align-items: center; gap: 9px; color: var(--ds-slate-500); font-size: 10px; }
.role-badge {
  display: inline-flex;
  padding: 2px 7px;
  border: 1px solid #c8d7e7;
  border-radius: 4px;
  color: var(--ds-blue-700);
  background: var(--ds-blue-50);
  font-size: 10px;
  font-weight: 700;
}
.topbar h1 { margin: 6px 0 2px; color: var(--ds-slate-900); font-size: 23px; line-height: 1.25; letter-spacing: -.02em; }
.page-heading > p { max-width: 760px; margin: 0; color: var(--ds-slate-600); font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; padding-top: 23px; }
.messages { position: fixed; z-index: 100; top: 18px; right: 20px; display: grid; width: min(380px, calc(100vw - 40px)); gap: 8px; margin: 0; }
.message.toast {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid #c8e3d5;
  border-radius: var(--ds-radius-md);
  color: var(--ds-green-700);
  background: #f1f9f5;
  box-shadow: var(--ds-shadow-md);
}
.message.toast.error { border-color: #efcbd1; color: var(--ds-red-700); background: #fff5f6; }
.message.toast.warning { border-color: #ecd7a9; color: var(--ds-amber-700); background: #fff9ed; }
.message.toast button { border: 0; color: currentColor; background: transparent; cursor: pointer; font-size: 20px; line-height: 1; }

/* Foundation components */
.panel, .catalog-card-shell, .ownership-tree-shell {
  margin-bottom: var(--ds-content-gap);
  padding: 16px;
  border: 1px solid var(--ds-slate-200);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-white);
  box-shadow: var(--ds-shadow-sm);
}
.eyebrow { display: none; }
.panel.narrow { max-width: 760px; }
.panel.table-panel { overflow: auto; padding: 0; }
.panel.flush { padding: 0; overflow: hidden; }
.panel-compact { padding: 13px 15px; }
.section-heading, .page-actions, .form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.section-heading { margin-bottom: 12px; }
.section-heading h2, .section-heading h3 { margin: 0; color: var(--ds-slate-900); font-size: 16px; line-height: 1.35; }
.section-heading p { margin: 3px 0 0; }
.table-panel > .section-heading { margin: 0; padding: 14px 15px 10px; }
.page-actions { min-height: 38px; margin: 0 0 12px; }
.page-actions > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.form-actions { justify-content: flex-end; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--ds-slate-100); }
.eyebrow { margin: 0; color: var(--ds-blue-700); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: none; }
.muted { color: var(--ds-slate-600); font-size: 11px; line-height: 1.55; }
.notice, .form-errors {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #cddfed;
  border-radius: var(--ds-radius-md);
  color: #345772;
  background: #f3f8fc;
}
.notice.warning { border-color: #ead6ab; color: var(--ds-amber-700); background: #fff9ed; }
.form-errors { border-color: #efcbd1; color: var(--ds-red-700); background: #fff5f6; }
.empty-state { display: grid; min-height: 130px; place-items: center; padding: 30px; color: var(--ds-slate-500); text-align: center; }
.empty-state strong { display: block; margin-bottom: 3px; color: var(--ds-slate-700); }

.button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-sm);
  box-shadow: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.button.primary { color: #fff; background: var(--ds-blue-600); }
.button.primary:hover { color: #fff; background: var(--ds-blue-700); }
.button.ghost, .button.light { border-color: var(--ds-slate-300); color: var(--ds-slate-700); background: #fff; }
.button.ghost:hover, .button.light:hover { border-color: #9eb4ca; color: var(--ds-blue-700); background: var(--ds-blue-50); }
.button.danger { border-color: #e3b6be; color: var(--ds-red-700); background: #fff; }
.button.danger:hover { color: #fff; background: var(--ds-red-700); }
.button:disabled, .button.is-loading { opacity: .58; cursor: wait; }
.button.is-loading::before { width: 11px; height: 11px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; animation: ds-spin .7s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.link-button { border: 0; padding: 0; background: none; cursor: pointer; }

/* Metrics, work areas and dashboard */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--ds-content-gap); }
.metric-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--ds-slate-200);
  border-radius: var(--ds-radius-md);
  color: var(--ds-slate-900);
  background: #fff;
  box-shadow: var(--ds-shadow-sm);
}
a.metric-card:hover { border-color: #a8bfd7; color: var(--ds-slate-900); box-shadow: 0 5px 16px rgba(15,31,52,.06); }
.metric-card.accent { border-color: #bdd3e9; background: var(--ds-blue-50); }
.metric-card span, .metric-card small { display: block; color: var(--ds-slate-600); }
.metric-card span { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.metric-card strong { display: block; overflow: hidden; margin: 7px 0 4px; color: var(--ds-slate-900); font-size: clamp(20px, 1.7vw, 27px); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.metric-card small { font-size: 10px; }
.metric-card .status { display: inline-flex; }
.metric-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 7px; }
.metric-meta small { margin: 0; }
.quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.quick-action {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ds-slate-200);
  border-radius: var(--ds-radius-md);
  color: var(--ds-slate-900);
  background: #fff;
}
.quick-action:hover { border-color: #a8bfd7; color: var(--ds-blue-700); background: var(--ds-blue-50); }
.quick-action-icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 7px; color: var(--ds-blue-700); background: var(--ds-blue-100); font-size: 15px; font-weight: 800; }
.quick-action strong, .quick-action small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-action strong { font-size: 12px; }
.quick-action small { margin-top: 2px; color: var(--ds-slate-500); font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .8fr); gap: var(--ds-content-gap); align-items: start; }
.dashboard-stack { display: grid; gap: var(--ds-content-gap); }
.dashboard-stack > .panel { margin-bottom: 0; }
.todo-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--ds-slate-200); border-radius: var(--ds-radius-md); background: var(--ds-slate-200); }
.todo-item { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; color: var(--ds-slate-900); background: #fff; }
.todo-item:hover { color: var(--ds-blue-700); background: var(--ds-blue-50); }
.todo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-slate-300); }
.todo-dot.warning { background: #d7a147; }
.todo-dot.danger { background: #c65765; }
.todo-dot.info { background: var(--ds-blue-500); }
.todo-item strong, .todo-item small { display: block; }
.todo-item strong { font-size: 12px; }
.todo-item small { margin-top: 2px; color: var(--ds-slate-500); font-size: 10px; }
.todo-count { display: grid; min-width: 26px; height: 24px; place-items: center; border-radius: 12px; color: var(--ds-slate-700); background: var(--ds-slate-100); font-weight: 800; }
.recent-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.recent-group { min-width: 0; padding: 12px; border: 1px solid var(--ds-slate-200); border-radius: var(--ds-radius-md); }
.recent-group h3 { margin: 0 0 8px; font-size: 12px; }
.recent-list { display: grid; gap: 6px; }
.recent-list a { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; color: var(--ds-slate-700); font-size: 11px; }
.recent-list a span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-list a span:last-child { flex: 0 0 auto; color: var(--ds-slate-500); font-size: 10px; }
.trend-chart { display: grid; gap: 10px; padding: 3px 0 6px; }
.trend-row { display: grid; grid-template-columns: 62px minmax(0,1fr) 115px; align-items: center; gap: 10px; }
.trend-row > span { color: var(--ds-slate-600); font-size: 10px; }
.trend-bars { display: grid; gap: 3px; }
.trend-bar { position: relative; height: 8px; overflow: hidden; border-radius: 4px; background: var(--ds-slate-100); }
.trend-bar::after { display: block; width: var(--value, 0%); height: 100%; border-radius: inherit; background: var(--ds-blue-500); content: ""; }
.trend-bar.profit::after { background: #4b8b73; }
.trend-values { color: var(--ds-slate-600); text-align: right; font-size: 10px; white-space: nowrap; }
.ranking-list { display: grid; gap: 10px; }
.ranking-row { display: grid; grid-template-columns: 24px minmax(80px, .7fr) minmax(100px, 1fr) auto; align-items: center; gap: 8px; }
.ranking-number { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; color: var(--ds-slate-700); background: var(--ds-slate-100); font-size: 10px; font-weight: 800; }
.ranking-track, .progress-track { height: 7px; overflow: hidden; border-radius: 4px; background: var(--ds-slate-100); }
.ranking-track > span, .progress-track > span { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: var(--ds-blue-500); }
.task-progress-shell { display: grid; gap: 13px; }
.task-progress-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.task-progress-head h3 { margin: 0; font-size: 15px; }
.task-progress-head p { margin: 3px 0 0; }
.task-layer-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.task-layer { padding: 10px; border: 1px solid var(--ds-slate-200); border-radius: var(--ds-radius-sm); background: var(--ds-slate-50); }
.task-layer span, .task-layer strong, .task-layer small { display: block; }
.task-layer span { color: var(--ds-slate-600); font-size: 10px; }
.task-layer strong { margin-top: 4px; font-size: 14px; }
.task-layer small { color: var(--ds-slate-500); font-size: 9px; }
.task-goal-row { display: grid; grid-template-columns: 90px minmax(0,1fr) 150px; align-items: center; gap: 10px; }
.task-goal-row > strong { font-size: 11px; }
.task-goal-row > span { color: var(--ds-slate-600); text-align: right; font-size: 10px; }

/* Forms and filters */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.field { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.field label, .filter-row label, .inline-filter label { color: var(--ds-slate-700); font-size: 11px; font-weight: 700; }
.field input, .field select, .field textarea,
.filter-row input, .filter-row select, .inline-filter input, .inline-filter select,
.review-form input, .inline-action input, .inline-form input {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--ds-slate-300);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-slate-900);
  background: #fff;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus,
.filter-row input:focus, .filter-row select:focus { border-color: var(--ds-blue-500); outline: 0; box-shadow: var(--ds-focus); }
.field-error input, .field-error select, .field-error textarea { border-color: var(--ds-red-700); }
.filter-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  align-items: end;
  gap: 9px;
}
.filter-row label { display: grid; min-width: 0; gap: 4px; }
.filter-row .button { min-height: 36px; }
.inline-filter { display: flex; align-items: end; gap: 8px; }
.subsection { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--ds-slate-100); }
.formset-container { display: grid; gap: 9px; }
.formset-row { padding: 13px; border: 1px solid var(--ds-slate-200); border-radius: var(--ds-radius-md); background: var(--ds-slate-50); }
.formset-row .form-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* Enterprise tables */
.table-panel { position: relative; }
table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
th, td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--ds-slate-100); color: var(--ds-slate-700); text-align: left; vertical-align: middle; }
th { position: sticky; z-index: 3; top: 0; color: #526277; background: #f1f4f7; font-size: 10px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
td { font-size: 11px; }
tbody tr:hover td { background: #f8fafc; }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: var(--ds-slate-900); }
.money-cell, td[data-type="money"], th[data-type="money"] { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.date-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.action-cell { position: sticky; z-index: 2; right: 0; text-align: right; white-space: nowrap; background: #fff; box-shadow: -8px 0 12px rgba(15,31,52,.035); }
tbody tr:hover .action-cell { background: #f8fafc; }
.empty { padding: 34px 18px !important; color: var(--ds-slate-500); text-align: center !important; }
tfoot th, tfoot td { position: static; color: var(--ds-slate-900); background: #f7f9fb; font-weight: 800; }

.status, .status-tag, .catalog-status {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--ds-slate-700);
  background: var(--ds-slate-100);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.status.active, .status.normal, .status.confirmed, .status.current, .status.approved,
.status-tag.success, .catalog-status.active { border-color: #c7e3d5; color: var(--ds-green-700); background: var(--ds-green-100); }
.status.in_progress, .status.draft, .status.checked, .status.pending, .status.overdue,
.status-tag.warning, .catalog-status.warning { border-color: #ead4a4; color: var(--ds-amber-700); background: var(--ds-amber-100); }
.status.inactive, .status.disabled, .status.voided, .status.revoked, .status.failed, .status.rejected,
.status.task_period_mismatch, .status-tag.danger { border-color: #ebc5cb; color: var(--ds-red-700); background: var(--ds-red-100); }
.status.covered, .status.historical, .status.archived, .status-tag.neutral, .catalog-status.empty { border-color: var(--ds-slate-300); color: var(--ds-slate-600); background: var(--ds-slate-100); }

/* Details, tabs and action menus */
.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--ds-slate-200); border-radius: var(--ds-radius-md); background: var(--ds-slate-200); }
.detail-item { min-width: 0; padding: 11px 12px; border-radius: 0; background: #fff; }
.detail-item span { display: block; margin-bottom: 3px; color: var(--ds-slate-500); font-size: 10px; }
.detail-item strong { display: block; overflow: hidden; color: var(--ds-slate-900); font-size: 12px; text-overflow: ellipsis; }
.catalog-tabs { display: flex; gap: 2px; margin: 0 0 12px; padding: 3px; border: 1px solid var(--ds-slate-200); border-radius: 8px; background: var(--ds-slate-100); }
.catalog-tabs a { min-height: 32px; padding: 7px 12px; border-radius: 5px; color: var(--ds-slate-600); font-size: 11px; font-weight: 700; }
.catalog-tabs a:hover, .catalog-tabs a.is-active { color: var(--ds-blue-700); background: #fff; box-shadow: var(--ds-shadow-sm); }
.action-menu { position: relative; display: inline-block; }
.action-menu > summary { display: inline-flex; min-height: 30px; align-items: center; padding: 5px 9px; border: 1px solid var(--ds-slate-300); border-radius: 5px; color: var(--ds-slate-700); background: #fff; cursor: pointer; list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu[open] > summary { border-color: var(--ds-blue-500); }
.action-menu-panel { position: absolute; z-index: 20; top: calc(100% + 5px); right: 0; display: grid; min-width: 150px; padding: 5px; border: 1px solid var(--ds-slate-200); border-radius: 7px; background: #fff; box-shadow: var(--ds-shadow-md); }
.global-overlay-root { position: fixed; z-index: 120; inset: 0; overflow: visible; pointer-events: none; }
.action-menu-panel.is-portaled { position: fixed; z-index: 121; top: auto; right: auto; max-width: min(360px, calc(100vw - 16px)); overflow: auto; pointer-events: auto; }
.action-menu-panel.is-portaled[data-placement="top"] { transform-origin: bottom right; }
.action-menu-panel.is-portaled[data-placement="bottom"] { transform-origin: top right; }
.action-menu-panel a, .action-menu-panel button { display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 4px; color: var(--ds-slate-700); background: transparent; cursor: pointer; text-align: left; font-size: 11px; }
.action-menu-panel a:hover, .action-menu-panel button:hover { color: var(--ds-blue-700); background: var(--ds-blue-50); }
.action-menu-panel .danger-link { color: var(--ds-red-700); }
.inline-form { display: inline-flex; align-items: center; gap: 6px; }

/* Master data: compact registry and two-level master-detail */
.catalog-page-head, .ownership-page-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.catalog-page-head p, .ownership-page-head p { margin: 0; color: var(--ds-slate-600); }
.catalog-module-table { overflow: auto; padding: 0; }
.catalog-module-table table { min-width: 860px; }
.catalog-module-name { display: flex; align-items: center; gap: 9px; }
.catalog-module-icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 6px; color: var(--ds-blue-700); background: var(--ds-blue-100); font-size: 11px; font-weight: 800; }
.ownership-master-detail { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(520px, 1.45fr); gap: 12px; align-items: start; }
.ownership-pane { overflow: hidden; min-width: 0; margin: 0; padding: 0; }
.ownership-pane > header { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--ds-slate-200); background: var(--ds-slate-50); }
.ownership-pane > header h2 { margin: 0; font-size: 14px; }
.ownership-pane > header p { margin: 2px 0 0; color: var(--ds-slate-500); font-size: 10px; }
.major-master-list { display: grid; max-height: 620px; overflow: auto; }
.major-master-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--ds-slate-100); color: var(--ds-slate-700); }
.major-master-row:hover, .major-master-row.is-selected { color: var(--ds-blue-700); background: var(--ds-blue-50); }
.major-master-row.is-selected { box-shadow: inset 3px 0 var(--ds-blue-500); }
.major-master-select { min-width: 0; color: inherit; }
.major-master-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.major-master-actions form { display: inline-flex; margin: 0; }
.major-master-actions a, .major-master-actions button { padding: 0; border: 0; color: var(--ds-blue-700); background: none; cursor: pointer; font-size: 10px; }
.major-master-actions .danger-link { color: var(--ds-red-700); }
.major-master-row strong, .major-master-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.major-master-row small { color: var(--ds-slate-500); font-size: 10px; }
.subchannel-panel table { min-width: 760px; }
.department-suggestion-panel { grid-column: 1 / -1; }

/* Report builder */
.report-builder-layout { display: grid; grid-template-columns: minmax(280px, .68fr) minmax(600px, 1.45fr); gap: var(--ds-content-gap); align-items: start; }
.report-config-sidebar { position: sticky; top: 16px; display: grid; gap: 12px; }
.report-config-sidebar .panel { margin-bottom: 0; }
.report-sheet-list { display: grid; gap: 10px; }
.report-sheet { margin: 0; padding: 0; overflow: hidden; }
.report-sheet > .section-heading { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--ds-slate-200); background: var(--ds-slate-50); }
.form-grid.single-column { grid-template-columns: 1fr; gap: 9px; }
.month-status-summary { display: grid; min-width: 145px; gap: 3px; align-content: center; padding: 5px 10px; border-left: 1px solid var(--ds-slate-200); }
.month-status-summary span { color: var(--ds-slate-500); font-size: 9px; }
.month-status-summary strong { font-size: 11px; }
.step-badge { display: inline-grid; width: 22px; height: 22px; margin-right: 7px; place-items: center; border-radius: 50%; color: #fff; background: var(--ds-blue-700); font-size: 10px; font-weight: 800; }
.full-width { width: 100%; justify-content: center; }
.checkbox-row { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 10px; }
.check-grid.compact { grid-template-columns: repeat(2, minmax(0,1fr)); max-height: 145px; overflow: auto; }
.report-sheet.is-disabled { opacity: .58; }
.report-sheet > .section-heading > .status { font-size: 0; }
.report-sheet[data-time-granularity="MONTH"] > .section-heading > .status::after { content: "月度"; font-size: 9px; }
.report-sheet:not([data-time-granularity="MONTH"]) > .section-heading > .status::after { content: "任意日期"; font-size: 9px; }
.compact-filters { grid-template-columns: minmax(180px, .8fr) minmax(180px, .8fr) auto auto; justify-content: start; }
.business-change-table table { min-width: 1480px; }
.change-summary-cell { min-width: 240px; max-width: 360px; white-space: normal; line-height: 1.55; }
.compact-button { min-height: 28px; margin-left: 5px; padding: 4px 8px; font-size: 10px; }
.progress-track { width: 90px; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 3px; background: var(--ds-slate-100); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--ds-blue-500); }
.progress-track.profit span { background: #4b8b73; }
.field-sort-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; padding: 12px; }
.field-sort-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border: 1px solid var(--ds-slate-200); border-radius: var(--ds-radius-sm); background: #fff; }
.field-sort-row label { display: flex; min-width: 0; align-items: center; gap: 7px; color: var(--ds-slate-700); font-size: 11px; }
.field-sort-row .button { min-width: 28px; min-height: 27px; padding: 3px 6px; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.check-grid label { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--ds-slate-200); border-radius: 5px; color: var(--ds-slate-700); background: #fff; font-size: 10px; }

/* Dialog, drawer and overlays */
dialog { border: 0; padding: 0; color: var(--ds-slate-900); background: transparent; }
dialog::backdrop { background: rgba(8, 19, 34, .52); backdrop-filter: blur(2px); }
.confirm-dialog-card { display: grid; width: min(440px, calc(100vw - 32px)); grid-template-columns: 38px minmax(0,1fr); gap: 12px; padding: 20px; border: 1px solid var(--ds-slate-200); border-radius: var(--ds-radius-lg); background: #fff; box-shadow: 0 24px 70px rgba(10,25,43,.24); }
.confirm-dialog-card h2 { margin: 0; font-size: 17px; }
.confirm-dialog-card p { margin: 5px 0 0; color: var(--ds-slate-600); font-size: 12px; }
.confirm-dialog-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--ds-red-700); background: var(--ds-red-100); font-weight: 900; }
.confirm-dialog-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; padding-top: 7px; }
.modal { position: fixed; z-index: 80; inset: 0; display: none; place-items: center; padding: 20px; background: rgba(8,19,34,.52); }
.modal.is-open { display: grid; }
.modal-card { width: min(640px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: auto; border-radius: var(--ds-radius-lg); background: #fff; box-shadow: 0 24px 70px rgba(10,25,43,.24); }
.drawer-backdrop { position: fixed; z-index: 70; inset: 0; display: none; background: rgba(8,19,34,.4); }
.drawer-backdrop.is-open { display: block; }
.drawer { position: fixed; z-index: 71; top: 0; right: 0; width: min(520px, 90vw); height: 100vh; padding: 20px; overflow: auto; background: #fff; box-shadow: -18px 0 50px rgba(10,25,43,.2); transform: translateX(105%); transition: transform .2s ease; }
.drawer.is-open { transform: translateX(0); }
.drawer-backdrop { border: 0; padding: 0; cursor: default; }
.change-review-drawer { z-index: 111; width: min(760px, 96vw); padding: 0; }
.change-review-drawer + .drawer-backdrop, .drawer-backdrop[data-drawer-backdrop="change-detail-drawer"] { z-index: 110; }
.drawer-header { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--ds-slate-200); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.drawer-header h2 { margin: 3px 0 0; font-size: 20px; }
.drawer-close { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--ds-slate-300); border-radius: 6px; color: var(--ds-slate-700); background: #fff; cursor: pointer; font-size: 22px; }
.drawer-dynamic-body { display: grid; gap: 0; padding: 4px 22px 28px; }
.drawer-section { padding: 18px 0; border-bottom: 1px solid var(--ds-slate-200); }
.drawer-section h3 { margin: 0 0 11px; font-size: 14px; }
.drawer-detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.drawer-detail-grid .full-span { grid-column: 1 / -1; }
.change-summary-notice { margin: 0; color: var(--ds-blue-800); background: var(--ds-blue-50); border-color: var(--ds-blue-100); }
.notice.neutral { color: var(--ds-slate-700); background: var(--ds-slate-50); border-color: var(--ds-slate-200); }
.change-comparison-list { display: grid; gap: 7px; }
.change-comparison-row { display: grid; grid-template-columns: minmax(110px,.65fr) minmax(120px,1fr) 24px minmax(120px,1fr); align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--ds-slate-200); border-radius: var(--ds-radius-sm); background: var(--ds-slate-50); }
.change-comparison-row strong { color: var(--ds-slate-900); }
.change-comparison-row b { color: var(--ds-blue-700); text-align: center; }
.impact-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; }
.impact-grid > div { min-width: 0; padding: 10px; border: 1px solid var(--ds-slate-200); border-radius: var(--ds-radius-sm); background: #fff; }
.impact-grid span, .impact-grid strong { display: block; }
.impact-grid span { color: var(--ds-slate-500); font-size: 9px; }
.impact-grid strong { margin-top: 5px; color: var(--ds-slate-900); font-size: 12px; }
.technical-details { margin-top: 18px; border: 1px solid var(--ds-slate-200); border-radius: var(--ds-radius-sm); background: var(--ds-slate-50); }
.technical-details summary { padding: 10px 12px; color: var(--ds-slate-600); cursor: pointer; font-size: 10px; font-weight: 700; }
.technical-details pre { max-height: 260px; overflow: auto; margin: 0; padding: 12px; border-top: 1px solid var(--ds-slate-200); color: var(--ds-slate-700); background: #fff; font: 10px/1.6 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-all; }
body.has-active-overlay { overflow: hidden; }
.card-tooltip.is-portaled-tooltip { position: fixed; z-index: 122; right: auto; bottom: auto; margin: 0; opacity: 0; pointer-events: none; }
.card-tooltip.is-portaled-tooltip.is-visible { opacity: 1; transform: none; }

/* Login */
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(440px, 1.05fr) minmax(420px, .95fr); background: #fff; }
.login-brand-panel { display: flex; flex-direction: column; justify-content: center; padding: 8vh 8vw; color: #fff; background: var(--ds-navy-900); }
.login-brand-panel .brand-mark.large { width: 52px; height: 52px; border-radius: 10px; font-size: 25px; }
.login-brand-panel h1 { margin: 18px 0 8px; font-size: 36px; }
.login-brand-panel > p { max-width: 520px; color: #c1cfdd; font-size: 14px; line-height: 1.8; }
.login-brand-panel .eyebrow { color: #92bce3; }
.login-feature { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: #d7e1eb; }
.login-feature strong { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; color: #a9c8e5; font-size: 10px; }
.login-card-wrap { display: grid; place-items: center; padding: 40px; background: var(--ds-slate-50); }
.login-card { width: min(410px, 100%); padding: 30px; border: 1px solid var(--ds-slate-200); border-radius: var(--ds-radius-lg); background: #fff; box-shadow: var(--ds-shadow-md); }
.login-card h2 { margin: 7px 0 3px; font-size: 24px; }

/* Width adaptations for supported desktop sizes */
@media (max-width: 1500px) {
  :root { --ds-sidebar: 210px; }
  .main-content { padding: 22px 24px 40px; }
  .metric-grid.five { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .filter-row { grid-template-columns: repeat(5, minmax(115px, 1fr)); }
  .detail-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1280px) {
  body { min-width: 1024px; }
  :root { --ds-sidebar: 196px; }
  .main-content { padding: 20px 20px 36px; }
  .metric-grid.five { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .filter-row { grid-template-columns: repeat(4, minmax(115px, 1fr)); }
  .quick-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .recent-tabs { grid-template-columns: 1fr; }
  .report-builder-layout { grid-template-columns: 1fr; }
  .report-config-sidebar { position: static; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .report-config-sidebar .panel:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  body { min-width: 0; }
  .app-shell { display: block; }
  .sidebar { position: relative; width: 100%; height: auto; }
  .nav-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sidebar-footer { display: none; }
  .main-content { padding: 16px; }
  .metric-grid, .metric-grid.five, .task-layer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .filter-row, .form-grid, .detail-grid, .ownership-master-detail { grid-template-columns: 1fr 1fr; }
  .department-suggestion-panel { grid-column: 1 / -1; }
  .formset-row .form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .login-layout { grid-template-columns: 1fr; }
  .login-brand-panel { display: none; }
}

@media (max-width: 760px) {
  .compact-filters, .drawer-detail-grid, .change-comparison-row { grid-template-columns: 1fr; }
  .change-comparison-row b { transform: rotate(90deg); }
  .impact-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}