:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #eef2f6;
  --ink: #111827;
  --muted: #64748b;
  --soft: #94a3b8;
  --line: #d9e0ea;
  --brand: #3157c8;
  --brand-soft: #eaf0ff;
  --ok: #2f7d5b;
  --ok-soft: #e8f5ef;
  --warn: #a96f1d;
  --warn-soft: #fff4df;
  --bad: #b94a48;
  --bad-soft: #fdecec;
  --shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: "Aptos", "Segoe UI Variable", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 18px;
  overflow-y: auto;
  background: #101827;
  color: #f8fafc;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: #f8fafc;
  font-weight: 900;
}
.brand strong, .brand span { display: block; }
.brand span { margin-top: 4px; color: #9aa8bd; font-size: 12px; }
.nav { display: grid; gap: 14px; padding: 22px 0; }
.nav-group { display: grid; gap: 6px; }
.nav-main, .nav-sub button {
  width: 100%;
  border: 0;
  color: #cbd5e1;
  background: transparent;
  text-align: left;
}
.nav-main {
  min-height: 44px;
  padding: 0 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
}
.nav-main em {
  min-width: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  text-align: center;
  font-style: normal;
  font-size: 12px;
}
.nav-main.active {
  color: #fff;
  background: rgba(49, 87, 200, .38);
  outline: 1px solid rgba(255,255,255,.14);
}
.nav-sub { display: grid; gap: 2px; padding-left: 18px; }
.nav-sub button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
}
.nav-sub button.active { color: #fff; background: rgba(255,255,255,.1); font-weight: 800; }
.sidebar-footer {
  margin-top: auto;
  padding: 12px 14px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Structured sidebar navigation */
.app { grid-template-columns: 268px minmax(0, 1fr); transition: grid-template-columns .24s ease; }
.sidebar {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: #0e1729;
  box-shadow: inset -1px 0 rgba(255,255,255,.045);
}
.brand {
  flex: 0 0 auto;
  min-height: 88px;
  gap: 12px;
  padding: 16px 14px 15px 17px;
  border-bottom-color: rgba(255,255,255,.08);
}
.brand-mark { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; color: #3157c8; background: #fff; font-size: 18px; }
.brand-copy { min-width: 0; flex: 1; }
.brand-copy strong, .brand-copy span { display: block; }
.brand-copy strong { color: #fff; font-size: 17px; line-height: 1.22; font-weight: 950; text-wrap: balance; }
.brand-copy span { margin-top: 5px; color: #8fa0b9; font-size: 11px; font-weight: 850; letter-spacing: .04em; white-space: nowrap; }
.sidebar-toggle {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: #8fa0b9;
  background: transparent;
}
.sidebar-toggle svg { width: 17px; height: 17px; }
.sidebar-toggle:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 12px 0 18px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .34) transparent;
}
.nav::-webkit-scrollbar { width: 5px; }
.nav::-webkit-scrollbar-thumb { border-radius: 5px; background: rgba(148, 163, 184, .34); }
.nav-group { display: grid; gap: 0; }
.nav-dashboard, .nav-parent, .nav-children button { width: 100%; border: 0; color: #aebbd0; background: transparent; text-align: left; }
.nav-dashboard, .nav-parent, .nav-children button, .sidebar-toggle { transition: color .18s ease, background-color .18s ease, transform .18s ease; }
.nav-dashboard, .nav-parent {
  position: relative;
  min-height: 50px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}
.nav-icon { width: 20px; height: 20px; flex: 0 0 auto; color: #8ea2be; }
.nav-icon svg { width: 100%; height: 100%; display: block; }
.nav-label { min-width: 0; flex: 1; white-space: nowrap; }
.nav-chevron { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .2s ease; }
.nav-chevron svg { width: 100%; height: 100%; }
.nav-group.expanded .nav-chevron { transform: rotate(180deg); }
.nav-dashboard:hover, .nav-parent:hover { color: #fff; background: rgba(255,255,255,.045); }
.nav-dashboard.active { color: #fff; background: #2e4fbe; box-shadow: inset 3px 0 #6ea8ff; }
.nav-dashboard.active .nav-icon, .nav-parent.active .nav-icon { color: #6fb2ff; }
.nav-parent.active { color: #eef4ff; background: rgba(255,255,255,.025); }
.nav-children { display: none; overflow: hidden; background: rgba(4,10,22,.18); }
.nav-group.expanded .nav-children { display: grid; padding: 4px 0 7px; }
.nav-children button {
  position: relative;
  min-height: 42px;
  padding: 0 17px 0 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}
.nav-children button::before {
  content: "";
  position: absolute;
  left: 29px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #53647e;
}
.nav-children button:hover { color: #fff; background: rgba(255,255,255,.04); }
.nav-children button.active { color: #fff; background: #243147; font-weight: 700; }
.nav-children button.active::before { background: #64a8ff; box-shadow: 0 0 0 3px rgba(100,168,255,.12); }
.sidebar-footer {
  flex: 0 0 auto;
  padding: 12px 14px 16px;
  background: #0e1729;
}
.system-footer-info {
  display: grid;
  gap: 4px;
  color: #7f8da5;
  font-size: 11px;
  line-height: 1.35;
}
.system-footer-info span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-footer-info.sidebar-meta {
  width: 100%;
  min-height: 34px;
  justify-items: center;
  align-content: center;
  margin-bottom: 10px;
  padding: 0 6px;
  text-align: center;
}
.system-footer-info.sidebar-meta span {
  display: block;
  width: 100%;
  color: #93a3ba;
}
.system-footer-info.sidebar-meta span:first-child {
  color: #b7c3d5;
  font-weight: 700;
}
.system-footer-info.auth {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  min-height: 22px;
  margin-top: -2px;
  color: #7b8799;
  text-align: center;
}
.system-footer-info.auth span {
  max-width: min(760px, 86vw);
}
.system-footer-info.auth span + span::before {
  content: "·";
  margin: 0 8px;
  color: #a5afbd;
}
.system-footer-info.auth-brand-meta {
  min-height: 16px;
  margin: 0;
  padding: 2px 8px 0;
  column-gap: 22px;
  row-gap: 6px;
  color: #718096;
  font-size: 11px;
  line-height: 1.5;
}
.system-footer-info.auth-brand-meta span {
  color: #718096;
  font-weight: 600;
}
.system-footer-info.auth-brand-meta span + span::before {
  content: none;
}
.system-footer-info.preview {
  min-height: 86px;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid #dce5f1;
  border-radius: 12px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
}
.sidebar-logout-button {
  width: 100%;
  min-height: 38px;
  margin-top: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  color: #ffd6d6;
  background: rgba(185, 74, 72, .12);
  font-weight: 850;
}
.sidebar-logout-button:hover {
  color: #fff;
  border-color: rgba(255, 180, 180, .36);
  background: rgba(185, 74, 72, .22);
}
.app.sidebar-collapsed { grid-template-columns: 74px minmax(0, 1fr); }
.sidebar-collapsed .sidebar { width: 74px; min-width: 74px; overflow-x: hidden; }
.sidebar-collapsed .brand { justify-content: center; padding-inline: 10px; }
.sidebar-collapsed .brand-mark,
.sidebar-collapsed .brand-copy,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-chevron,
.sidebar-collapsed .nav-children,
.sidebar-collapsed .nav-children button,
.sidebar-collapsed .nav-group.expanded .nav-children,
.sidebar-collapsed .sidebar-footer { display: none !important; }
.sidebar-collapsed .nav { padding-inline: 0; gap: 6px; }
.sidebar-collapsed .nav-group { display: block; }
.sidebar-collapsed .sidebar-toggle { width: 40px; height: 40px; }
.sidebar-collapsed .nav-dashboard,
.sidebar-collapsed .nav-parent { width: 100%; min-height: 52px; justify-content: center; padding: 0; gap: 0; }
.sidebar-collapsed .nav-icon { width: 21px; height: 21px; }

.workspace {
  min-width: 0;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 14px 28px 40px;
}
.topbar {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.topbar-spacer { flex: 1; }
.search-box {
  width: min(310px, 35vw);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.search-box span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.search-box input {
  min-height: 36px;
  width: 100%;
  border: 0;
  outline: none;
}
.user-switch, .status-pill {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.status-pill {
  padding: 0 10px;
}
.user-switch span { color: var(--muted); font-size: 12px; }
.user-switch select { border: 0; outline: none; background: transparent; font-weight: 800; }
.profile-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 4px 6px;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
}
.profile-button:hover {
  background: #f8fbff;
}
.profile-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: #3157c8;
  font-weight: 950;
  overflow: hidden;
}
.profile-avatar.large {
  width: 74px;
  height: 74px;
  border-radius: 20px;
  font-size: 28px;
}
.profile-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.profile-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: left;
}
.profile-copy strong {
  max-width: 128px;
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-copy em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.profile-chevron {
  width: 16px;
  height: 16px;
  color: var(--soft);
}
.profile-chevron svg {
  width: 100%;
  height: 100%;
  display: block;
}
.status-pill span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}
.status-pill.saving span { background: var(--brand); }
.status-pill.saved span,
.status-pill.ok span { background: var(--ok); }
.status-pill.bad {
  color: var(--bad);
  background: var(--bad-soft);
  border-color: rgba(185,74,72,.28);
}
.status-pill.bad span { background: var(--bad); }
.status-pill strong { font-size: 12px; }
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0 16px;
}
.page-head p {
  margin: 0 0 5px;
  color: var(--brand);
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
}
.page-head h1 {
  margin: 0;
  font-size: 27px;
  letter-spacing: 0;
}
.page-head span { display: block; margin-top: 6px; color: var(--muted); line-height: 1.5; }
.page-actions, .footer-actions, .row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.view { display: grid; gap: 18px; }

.workflow-strip {
  display: grid;
  grid-template-columns: minmax(190px, 1.1fr) repeat(4, minmax(150px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--line);
}
.workflow-strip > div,
.workflow-strip > button {
  min-height: 86px;
  padding: 15px 16px;
  border: 0;
  background: var(--surface);
  text-align: left;
}
.workflow-strip > div { display: grid; align-content: center; gap: 5px; }
.workflow-strip > div span { color: var(--brand); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.workflow-strip > div strong { max-width: 190px; line-height: 1.45; }
.workflow-strip > button { display: flex; align-items: center; gap: 11px; }
.workflow-strip > button b { color: var(--soft); font: 700 12px/1 ui-monospace, monospace; }
.workflow-strip > button span,
.workflow-strip > button small { display: block; }
.workflow-strip > button span { font-weight: 800; }
.workflow-strip > button small { margin-top: 5px; color: var(--muted); font-weight: 500; }
.workflow-strip > button:hover { background: var(--brand-soft); }

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .55fr);
  gap: 16px;
  align-items: stretch;
}
.dashboard-hero-main,
.dashboard-next-panel,
.dashboard-filter-panel,
.dashboard-metric,
.dashboard-list-panel {
  border: 1px solid rgba(213, 222, 235, .86);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 42px rgba(27, 39, 65, .052);
}
.dashboard-hero-main {
  position: relative;
  overflow: hidden;
  min-height: 176px;
  display: grid;
  align-content: space-between;
  gap: 16px;
  padding: 24px 26px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.96) 58%, rgba(240,246,255,.92) 100%);
}
.dashboard-hero-main::after {
  content: "";
  position: absolute;
  right: -92px;
  top: -112px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(49, 87, 200, .105), rgba(49, 87, 200, 0) 68%);
  pointer-events: none;
}
.dashboard-eyebrow {
  position: relative;
  z-index: 1;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 6px;
  color: #234298;
  background: rgba(49, 87, 200, .09);
  font-size: 11px;
  font-weight: 900;
}
.dashboard-hero-main h2 {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  color: #0f172a;
  font-size: 26px;
  line-height: 1.16;
  letter-spacing: 0;
}
.dashboard-hero-main p {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 8px 0 0;
  color: #516176;
  line-height: 1.62;
}
.dashboard-hero-chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dashboard-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: rgba(255,255,255,.82);
}
.dashboard-chip em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}
.dashboard-chip strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}
.dashboard-chip.ok { border-color: rgba(47, 125, 91, .2); background: #f5fbf8; }
.dashboard-chip.warn { border-color: rgba(169, 111, 29, .2); background: #fffaf0; }
.dashboard-chip.bad { border-color: rgba(185, 74, 72, .22); background: #fff5f5; }
.dashboard-chip.info { border-color: rgba(49, 87, 200, .18); background: #f5f8ff; }
.dashboard-next-panel {
  min-height: 176px;
  display: grid;
  gap: 14px;
  padding: 17px;
  border-radius: 14px;
}
.dashboard-next-head {
  display: grid;
  gap: 5px;
  padding: 2px 2px 4px;
}
.dashboard-next-head span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 950;
}
.dashboard-next-head strong {
  color: #1f2937;
  font-size: 13px;
  line-height: 1.45;
}
.dashboard-action-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dashboard-action {
  min-height: 68px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(49, 87, 200, .14);
  border-radius: 10px;
  background: linear-gradient(135deg, #f5f8ff 0%, #eef4ff 100%);
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.dashboard-action b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #3157c8;
  font: 800 12px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}
.dashboard-action strong,
.dashboard-action small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-action strong { color: #111827; font-size: 13px; }
.dashboard-action small { margin-top: 3px; color: #64748b; font-size: 12px; }
.dashboard-action.action-01 {
  border-color: rgba(49, 87, 200, .22);
  background: linear-gradient(135deg, #eff4ff 0%, #e6efff 100%);
}
.dashboard-action.action-01 b { background: #3157c8; }
.dashboard-action.action-02 {
  border-color: rgba(47, 125, 91, .22);
  background: linear-gradient(135deg, #eefaf4 0%, #e4f6ed 100%);
}
.dashboard-action.action-02 b { background: #2f7d5b; }
.dashboard-action.action-03 {
  border-color: rgba(24, 116, 140, .24);
  background: linear-gradient(135deg, #eef9fc 0%, #e2f3f8 100%);
}
.dashboard-action.action-03 b { background: #18748c; }
.dashboard-action.action-04 {
  border-color: rgba(185, 74, 72, .22);
  background: linear-gradient(135deg, #fff3f2 0%, #ffe9e8 100%);
}
.dashboard-action.action-04 b { background: #b94a48; }
.dashboard-action:hover {
  border-color: rgba(49, 87, 200, .32);
  box-shadow: 0 12px 26px rgba(27, 39, 65, .09);
  transform: translateY(-1px);
}
.dashboard-filter-panel {
  display: grid;
  grid-template-columns: minmax(170px, .28fr) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
  padding: 13px 14px;
  border-radius: 14px;
}
.dashboard-filter-title {
  display: grid;
  gap: 5px;
  padding: 0 2px 3px;
}
.dashboard-filter-title strong { color: #0f172a; font-size: 14px; }
.dashboard-filter-title span { color: #64748b; font-size: 12px; line-height: 1.45; }
.dashboard-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 9px;
}
.dashboard-filter-grid .field { gap: 6px; }
.dashboard-filter-grid .field > span {
  color: #64748b;
  font-size: 11px;
}
.dashboard-filter-grid select {
  min-height: 38px;
  border-radius: 9px;
  background: #fbfdff;
}
.dashboard-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.dashboard-metric {
  min-height: 116px;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 15px 16px 14px;
  border-radius: 14px;
}
.dashboard-metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  width: auto;
  background: #3157c8;
}
.dashboard-metric.task::before { background: #3157c8; }
.dashboard-metric.content::before { background: #2f7d5b; }
.dashboard-metric.monitor::before { background: #18748c; }
.dashboard-metric.risk::before { background: #b94a48; }
.dashboard-metric.cost::before { background: #9a6b18; }
.dashboard-metric div {
  display: grid;
  gap: 4px;
}
.dashboard-metric span {
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}
.dashboard-metric em {
  color: #8a97aa;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}
.dashboard-metric strong {
  color: #07111f;
  font-size: 29px;
  line-height: 1;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}
.dashboard-metric small {
  color: #64748b;
  line-height: 1.45;
}
.dashboard-activity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .72fr);
  gap: 16px;
}
.dashboard-list-panel {
  border-radius: 14px;
}
.dashboard-list-panel .panel-head {
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.dashboard-list {
  display: grid;
  gap: 7px;
}
.dashboard-list-line {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(154px, auto);
  gap: 12px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid #e7edf5;
  border-radius: 10px;
  background: #fbfcfe;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.dashboard-list-line:hover {
  border-color: rgba(49, 87, 200, .18);
  background: #fff;
  transform: translateY(-1px);
}
.dashboard-list-line div {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.dashboard-list-line strong,
.dashboard-list-line span,
.dashboard-list-line small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-list-line strong {
  color: #111827;
  font-weight: 900;
}
.dashboard-list-line span {
  color: #49617d;
  font-size: 13px;
}
.dashboard-list-line aside {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 0;
}
.dashboard-list-line em {
  padding: 3px 7px;
  border-radius: 6px;
  color: #3157c8;
  background: #eaf0ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.dashboard-list-line em:empty { display: none; }
.dashboard-list-line small {
  max-width: 220px;
  color: #64748b;
}

.panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2 { margin: 0; font-size: 18px; letter-spacing: 0; }
.panel-head p { margin: 6px 0 0; color: var(--muted); line-height: 1.55; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.metric {
  min-height: 128px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.metric span { color: var(--muted); font-size: 13px; font-weight: 800; }
.metric strong {
  display: block;
  margin-top: 18px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric small { display: block; margin-top: 10px; color: var(--soft); line-height: 1.5; }

.filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.filters.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.filters.library-filters {
  grid-template-columns: minmax(220px, 1.5fr) repeat(5, minmax(140px, 1fr));
  align-items: end;
}
.library-filter-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) repeat(5, minmax(108px, .72fr)) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.library-filter-bar.list-filter-bar {
  grid-template-columns: minmax(260px, 1.6fr) repeat(5, minmax(108px, .72fr)) auto auto;
}
.library-filter-bar.monitor-filter-bar {
  grid-template-columns:
    minmax(280px, 1.8fr)
    minmax(96px, .55fr)
    minmax(104px, .62fr)
    minmax(112px, .68fr)
    minmax(122px, .72fr)
    minmax(130px, .78fr)
    minmax(286px, 1.22fr);
  align-items: center;
}
.monitor-filter-bar .keyword-filter {
  min-width: 0;
}
.monitor-filter-bar .compact-filter-select {
  min-width: 0;
  height: 38px;
  padding-inline: 9px 26px;
  font-size: 13px;
}
.monitor-filter-bar .monitor-date-filter {
  min-width: 0;
  grid-template-columns: auto minmax(92px, 1fr) auto minmax(92px, 1fr) 22px;
}
.compact-date-range {
  gap: 6px;
  background: #fff;
}
.compact-date-range input {
  min-width: 0;
  padding-inline: 2px;
  background: transparent;
}
.compact-date-range em {
  transform: translateY(-1px);
}
.date-range-clear-button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #eef2f7;
  color: #667085;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.date-range-clear-button:hover {
  background: #e1e8f3;
  color: var(--ink);
}
.date-range-clear-button:active {
  transform: scale(.94);
}
.date-range-clear-button[hidden] {
  display: none;
}
.warranty-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: #175c46;
  background: #e7f6ef;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.muted-text {
  color: var(--muted);
  font-size: 12px;
}
.library-filter-bar.template-filter-bar,
.library-filter-bar.exception-filter-bar,
.library-filter-bar.check-filter-bar {
  grid-template-columns: minmax(260px, 1.6fr) repeat(5, minmax(88px, .56fr)) auto auto;
}
.library-filter-bar.monitor-history-filter-bar {
  grid-template-columns: minmax(300px, 1.35fr) minmax(132px, .5fr) minmax(132px, .5fr) minmax(300px, .95fr) minmax(220px, auto);
  gap: 8px;
}
.library-filter-bar.monitor-handled-filter-bar {
  grid-template-columns:
    minmax(300px, 1.45fr)
    minmax(108px, .48fr)
    minmax(98px, .44fr)
    minmax(120px, .56fr)
    minmax(130px, .6fr)
    minmax(286px, .94fr)
    minmax(96px, auto);
}
.monitor-history-filter-bar .monitor-date-filter {
  min-width: 0;
  grid-template-columns: auto minmax(112px, 1fr) auto minmax(112px, 1fr);
}
.monitor-handled-filter-bar .monitor-date-filter {
  grid-template-columns: auto minmax(92px, 1fr) auto minmax(92px, 1fr) 22px;
}
.filter-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.filter-inline-actions .compact-clear-button {
  white-space: nowrap;
}
.filter-inline-actions .danger-button {
  min-width: 104px;
}
.keyword-filter,
.library-keyword-filter {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.keyword-filter:focus-within,
.library-keyword-filter:focus-within {
  border-color: rgba(49, 87, 200, .55);
  box-shadow: 0 0 0 3px rgba(49, 87, 200, .11);
  background: #fff;
}
.keyword-filter label,
.keyword-filter span,
.library-keyword-filter span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.keyword-filter input,
.library-keyword-filter input,
.compact-filter-select,
.filter-more-popover input,
.filter-more-popover select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  outline: none;
  background: #fff;
}
.keyword-filter input,
.library-keyword-filter input {
  min-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
}
.keyword-clear-button {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #eef2f7;
  color: #667085;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.keyword-clear-button:hover {
  background: #e1e8f3;
  color: var(--ink);
}
.keyword-clear-button:active {
  transform: scale(.94);
}
.keyword-clear-button[hidden] {
  display: none;
}
.keyword-filter input:focus,
.keyword-filter input:focus-visible,
.library-keyword-filter input:focus,
.library-keyword-filter input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.compact-filter-select {
  color: var(--ink);
  font-weight: 700;
}
.filter-more {
  position: relative;
}
.filter-more summary {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}
.filter-more summary::-webkit-details-marker { display: none; }
.filter-more-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 12;
  width: 420px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}
.range-filter {
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(70px, 1fr) auto minmax(70px, 1fr);
  gap: 7px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.range-filter.span-wide {
  grid-column: 1 / -1;
}
.range-filter span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.range-filter em {
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
}
.range-filter input {
  min-height: 28px;
  border: 0;
  border-radius: 7px;
  padding: 4px 6px;
  background: #f8fafc;
}
.compact-clear-button {
  min-height: 38px;
  padding-inline: 14px;
}
.filter-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
}
.filter-actions .ghost-button {
  width: 100%;
  min-height: 40px;
}
.field { display: grid; gap: 7px; min-width: 0; }
.field span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}
.required-star {
  color: #d9363e;
  font-size: 15px;
  line-height: 1;
}
.optional-mark {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 11px;
  outline: none;
  background: #fff;
}
.field input:disabled, .field select:disabled, .field textarea:disabled {
  color: #94a3b8;
  border-color: #dbe3ee;
  background: #eef2f7;
  cursor: not-allowed;
}
.field.is-disabled span {
  color: #94a3b8;
}
.readonly-field em {
  display: block;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 11px;
  color: #334155;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  background: #f8fafc;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.readonly-field em small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.field select[multiple] {
  min-height: 116px;
  padding: 6px;
}
.field select[multiple] option {
  padding: 7px 8px;
  border-radius: 7px;
}
.field-hint {
  color: var(--muted);
  font-size: 12px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: rgba(49, 87, 200, .55);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.ai-secret-field span em {
  color: var(--ok);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.ai-secret-field span em.warn {
  color: var(--bad);
}
.secret-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.secret-input-wrap input {
  min-width: 0;
}
.secret-input-wrap .ghost-button {
  min-height: 40px;
  white-space: nowrap;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-stack { display: grid; gap: 14px; }
.span-2 { grid-column: 1 / -1; }
.upload-field small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.upload-field {
  position: relative;
}
.file-input {
  position: absolute;
  inset: 25px 0 20px;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}
.upload-drop {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 13px 14px;
  border: 1px dashed #b8c4d6;
  border-radius: 12px;
  background: #f8fbff;
}
.upload-drop strong {
  color: var(--ink);
  font-size: 13px;
}
.upload-drop em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}
.upload-field:hover .upload-drop,
.upload-field:focus-within .upload-drop {
  border-color: rgba(49, 87, 200, .62);
  background: var(--brand-soft);
}

.primary-button, .ghost-button, .danger-button, .text-button, .text-danger, .icon-button {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.primary-button { color: #fff; background: var(--brand); border-color: var(--brand); }
.primary-button.subtle { color: #24429a; background: #eef4ff; border-color: #c8d7ff; }
.ghost-button { color: var(--ink); background: #fff; border-color: var(--line); }
.danger-button { color: var(--bad); background: var(--bad-soft); border-color: rgba(185,74,72,.2); }
.danger-button.subtle { color: #9f2f2f; background: #fff7f7; border-color: #f0c9c7; }
.text-button, .text-danger { min-height: auto; padding: 3px 6px; border: 0; background: transparent; color: var(--brand); }
.text-danger { color: var(--bad); }
.icon-button { width: 36px; padding: 0; background: #fff; border-color: var(--line); }
.primary-button, .ghost-button, .danger-button, .text-button, .text-danger, .icon-button,
.nav-main, .nav-sub button, .stepper button, .workflow-strip button {
  transition: transform .16s ease, border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.primary-button:hover { background: #2748aa; border-color: #2748aa; }
.ghost-button:hover { border-color: #aebbd0; background: #f8fafc; }
.danger-button:hover { border-color: rgba(185,74,72,.4); }
.button-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: spin .72s linear infinite;
}
.primary-button .button-spinner {
  border-color: rgba(255,255,255,.72);
  border-right-color: transparent;
}
.monitor-run-button.is-loading,
.monitor-check-button.is-loading {
  cursor: wait;
}
.monitor-row-actions {
  flex-wrap: nowrap;
  gap: 4px;
}
.monitor-row-actions .text-button,
.monitor-row-actions .text-danger {
  min-height: 28px;
  padding: 5px 7px;
  border-radius: 8px;
}
.monitor-check-button {
  color: #24429a;
  background: #eef4ff;
}
.monitor-check-button:hover {
  background: #e4edff;
}
.primary-button:disabled,
.ghost-button:disabled,
.danger-button:disabled,
.text-button:disabled,
.text-danger:disabled {
  cursor: not-allowed;
  opacity: .58;
  transform: none;
  box-shadow: none;
}
.primary-button.is-loading:disabled,
.ghost-button.is-loading:disabled,
.danger-button.is-loading:disabled,
.text-button.is-loading:disabled,
.text-danger.is-loading:disabled,
.icon-button.is-loading:disabled {
  cursor: wait;
  opacity: .82;
}
.primary-button:active, .ghost-button:active, .danger-button:active, .stepper button:active, .workflow-strip button:active { transform: translateY(1px) scale(.99); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(49,87,200,.2);
  outline-offset: 2px;
}
.checkline { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.checkline input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}
.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.stepper button {
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
}
.stepper button.active { border-color: rgba(49,87,200,.45); background: var(--brand-soft); }
.stepper button.done { border-color: #bdd8cc; background: var(--ok-soft); }
.stepper button.done strong { color: #fff; background: var(--ok); }
.stepper strong {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand);
  background: #fff;
}
.stepper span { display: block; margin-top: 8px; font-weight: 900; }
.stepper small { display: block; margin-top: 5px; color: var(--muted); }

.task-stage-panel {
  padding: 0;
  overflow: hidden;
  background: #fbfdff;
}
.task-stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 0;
}
.task-stage-main {
  min-width: 0;
  padding: 22px;
  background: #fff;
}
.task-stage-main .panel-head {
  margin-bottom: 18px;
}
.source-top-grid {
  margin-bottom: 14px;
}
.source-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .5fr);
  gap: 14px;
  align-items: start;
}
.source-info-stack,
.source-media-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.source-media-panel {
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.source-info-stack .field textarea {
  min-height: 104px;
}
.source-media-panel .image-preview-strip {
  margin-top: 0;
}
.batch-generation-panel {
  display: grid;
  gap: 16px;
}
.batch-generation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 14px;
  align-items: start;
}
.batch-product-area,
.batch-common-settings,
.batch-side-panel {
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #fff;
}
.batch-product-area {
  min-width: 0;
  overflow: hidden;
}
.batch-table-head,
.batch-common-settings summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #f8fbff;
  cursor: pointer;
  list-style: none;
}
.generation-settings-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.generation-settings-heading .generation-mode-toggle.compact {
  min-height: 30px;
  margin-left: 2px;
  padding: 3px 7px;
}
.generation-mode-help {
  position: relative;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #cbd7e6;
  border-radius: 50%;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  cursor: help;
}
.generation-mode-help:hover,
.generation-mode-help:focus-visible {
  border-color: #2878d0;
  color: #1766b3;
  outline: none;
}
.generation-mode-help-tip {
  position: absolute;
  z-index: 30;
  top: calc(100% + 9px);
  left: -8px;
  width: min(330px, calc(100vw - 48px));
  display: block;
  padding: 10px 12px;
  border: 1px solid #d5e0ed;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
  color: #526174;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.65;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  pointer-events: none;
}
.generation-mode-help-tip b {
  display: block;
  margin-bottom: 2px;
  color: #1766b3;
  font-size: 12px;
}
.generation-mode-help:hover .generation-mode-help-tip,
.generation-mode-help:focus .generation-mode-help-tip,
.generation-mode-help:focus-visible .generation-mode-help-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.batch-common-settings summary::-webkit-details-marker { display: none; }
.batch-table-head span,
.batch-common-settings strong {
  color: var(--ink);
  font-weight: 950;
}
.batch-table-head em,
.batch-common-settings span,
.batch-common-settings summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.batch-product-list {
  display: grid;
  gap: 12px;
  padding: 14px;
}
.batch-product-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 14px 14px;
}
.batch-product-actions .ghost-button,
.batch-product-actions .primary-button {
  min-height: 38px;
  padding-inline: 18px;
}
.batch-add-product-button {
  border-color: rgba(49, 87, 200, .45);
  color: var(--brand);
  background: rgba(49, 87, 200, .08);
  font-weight: 950;
}
.batch-add-product-button:hover {
  border-color: var(--brand);
  color: #fff;
  background: var(--brand);
}
.batch-product-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdff;
}
.batch-product-row header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.batch-product-row header strong {
  color: var(--brand);
}
.batch-product-row header span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batch-product-grid {
  display: grid;
  grid-template-columns: 120px minmax(220px, 1.1fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: start;
}
.batch-product-grid textarea {
  min-height: 76px;
}
.batch-textarea-wide {
  grid-column: span 2;
}
.batch-textarea-wide textarea {
  min-height: 112px;
}
.batch-textarea-compact textarea {
  min-height: 64px;
}
.batch-product-images {
  display: grid;
  grid-column: 1 / -1;
  gap: 9px;
}
.mini-upload {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}
.mini-upload input {
  display: none;
}
.batch-image-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}
.thumb-wrap.small {
  width: 58px;
  height: 58px;
}
.batch-side-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f7f9fc;
}
.batch-common-settings {
  overflow: visible;
}
.batch-common-settings > summary { border-radius: 13px 13px 0 0; }
.batch-common-settings:not([open]) > summary {
  border-bottom: 0;
  border-radius: 13px;
}
.batch-common-settings .form-grid {
  padding: 14px;
}
.batch-run-actions {
  display: flex;
  justify-content: flex-start;
  padding: 0 2px;
}
.batch-run-actions .primary-button {
  min-height: 42px;
  padding-inline: 24px;
}
.task-stage-side {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 22px;
  border-left: 1px solid var(--line);
  background: #f7f9fc;
}
.advanced-settings {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.setting-band {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(49, 87, 200, .14);
  border-radius: 14px;
}
.setting-band-tone {
  background: linear-gradient(180deg, #f4f7ff 0%, #ffffff 100%);
  border-color: #bfcbef;
}
.setting-band-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(49, 87, 200, .12);
}
.setting-band-head strong {
  font-size: 15px;
}
.setting-band-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}
.advanced-settings-params {
  background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 100%);
  border-color: #bfd9cb;
}
.advanced-settings-business {
  background: linear-gradient(180deg, #fff9ed 0%, #ffffff 100%);
  border-color: #edd6a7;
}
.advanced-settings summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 16px;
  cursor: pointer;
  list-style: none;
}
.advanced-settings-params summary {
  justify-content: flex-start;
}
.advanced-settings summary::-webkit-details-marker { display: none; }
.advanced-settings summary span {
  color: var(--ink);
  font-weight: 900;
}
.advanced-settings summary small {
  color: var(--muted);
  line-height: 1.45;
  text-align: right;
}

.generation-mode-toggle {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  background: #f8fbff;
  cursor: pointer;
}

.generation-mode-toggle.compact {
  min-height: 34px;
  padding: 5px 8px;
  background: rgba(255,255,255,.82);
}

.generation-mode-toggle > input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.generation-mode-track {
  width: 36px;
  height: 20px;
  flex: 0 0 36px;
  padding: 2px;
  border-radius: 999px;
  background: #aab6c7;
  transition: background .18s ease;
}

.generation-mode-track i {
  width: 16px;
  height: 16px;
  display: block;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.24);
  transition: transform .18s ease;
}

.generation-mode-toggle input:checked + .generation-mode-track { background: #2878d0; }
.generation-mode-toggle input:checked + .generation-mode-track i { transform: translateX(16px); }
.generation-mode-toggle input:focus-visible + .generation-mode-track { outline: 3px solid rgba(40,120,208,.2); outline-offset: 2px; }

.generation-mode-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.generation-mode-copy b {
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
}

.generation-mode-copy em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.generation-mode-toggle.compact .generation-mode-copy em { display: none; }
.advanced-grid {
  padding: 0 16px 16px;
}
.generation-failure-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  margin-top: 14px;
  padding: 15px 16px;
  border: 1px solid rgba(185, 74, 72, .24);
  border-radius: 8px;
  background: #fff8f7;
}
.generation-failure-panel.evidence {
  border-color: rgba(169, 111, 29, .28);
  background: #fffaf1;
}
.generation-failure-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  background: var(--bad);
  font-weight: 950;
}
.generation-failure-panel.evidence .generation-failure-icon { background: #a96f1d; }
.generation-failure-copy { min-width: 0; }
.generation-failure-copy strong { display: block; color: #54251f; font-size: 14px; }
.generation-failure-panel.evidence .generation-failure-copy strong { color: #6d4815; }
.generation-failure-copy p {
  margin: 5px 0 0;
  color: #5d493e;
  line-height: 1.6;
}
.generation-failure-copy ul {
  margin: 7px 0 0;
  padding-left: 18px;
  color: #7b5c4a;
  font-size: 12px;
  line-height: 1.6;
}
.generation-failure-copy > span {
  display: block;
  margin-top: 7px;
  color: #7b6758;
  font-size: 12px;
  line-height: 1.55;
}
.generation-failure-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.preview-evidence-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.preview-evidence-warning strong { flex: 0 0 auto; }
.preview-evidence-warning span { min-width: 0; line-height: 1.55; }
.generation-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(49,87,200,.22);
  border-radius: 14px;
  background: linear-gradient(135deg, #f5f8ff, #ffffff);
}
.generation-progress strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}
.generation-progress span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.generation-progress-copy {
  min-width: 0;
}
.generation-progress-copy em {
  display: block;
  margin-top: 6px;
  color: #61718a;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.generation-progress-track {
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(49,87,200,.10);
}
.generation-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3157c8, #6a8cff);
  transition: width .35s ease;
}
.generation-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(49,87,200,.16);
  border-top-color: var(--brand);
  border-radius: 999px;
  animation: spin .8s linear infinite;
}
.commit-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 12px;
  background: #f8fafc;
}
.commit-options span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.note-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.note-card strong {
  font-size: 13px;
}
.note-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.image-preview-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  min-height: 74px;
  align-items: center;
}

.ai-analysis-card {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid #b9d8cd;
  background: #edf7f3;
  display: grid;
  gap: 8px;
}

.ai-analysis-card div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.ai-analysis-card strong { color: #174f43; }
.ai-analysis-card span,
.ai-analysis-card p { margin: 0; color: #45625b; }
.image-preview-strip.readonly {
  margin-top: 8px;
  min-height: 0;
}
.image-slot {
  width: 100%;
  min-height: 72px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: #fbfdff;
  font-size: 13px;
}
.thumb-wrap {
  position: relative;
  width: 82px;
  height: 82px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.thumb-wrap button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(15, 23, 42, .72);
  font-weight: 900;
  line-height: 1;
}
.readonly-images {
  display: grid;
  gap: 2px;
}
.readonly-images > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.preview-list, .simple-list, .tag-list { display: grid; gap: 10px; }
.preview-card, .mini-card, .list-line {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.preview-card header, .mini-card header, .list-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.preview-card-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.preview-card-title strong {
  overflow-wrap: anywhere;
}
.generation-result-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.generation-result-mode {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
.generation-result-mode.fast {
  color: #245da8;
  background: #eaf3ff;
  border-color: #cfe2fb;
}
.generation-result-mode.deep {
  color: #14735d;
  background: #e5f7ef;
  border-color: #c7eadb;
}
.preview-context {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: -2px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(49,87,200,.14);
  border-radius: 10px;
  background: #f8faff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.preview-context strong {
  color: var(--ink);
  font-weight: 900;
}

.preview-context .preview-generation-time {
  margin-left: auto;
  padding-left: 18px;
  border-left: 1px solid rgba(49,87,200,.16);
  color: #3157c8;
}

.preview-analysis-context {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(31, 113, 95, .18);
  border-radius: 10px;
  background: #f4fbf7;
}

.preview-analysis-context header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #174f43;
  font-size: 12px;
  font-weight: 900;
}

.preview-analysis-context header span {
  color: #5c756f;
  font-weight: 800;
}

.analysis-evidence-list {
  display: grid;
  gap: 8px;
}

.analysis-evidence-item {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(31, 113, 95, .16);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
}

.analysis-evidence-item div,
.analysis-evidence-item footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.analysis-evidence-item strong {
  color: var(--ink);
  font-size: 13px;
}

.analysis-evidence-item span,
.analysis-evidence-item p {
  margin: 0;
  color: #49625c;
  font-size: 12px;
  line-height: 1.5;
}

.analysis-evidence-item .analysis-buyer-scenario {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 8px 10px;
  border-left: 3px solid #4f8c7b;
  background: #f1f7f4;
}

.analysis-evidence-item .analysis-product-translation {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: -2px;
  color: #3157c8;
}

.analysis-evidence-item .analysis-product-translation b {
  flex: 0 0 auto;
  color: #5a6f99;
  font-size: 11px;
}

.analysis-evidence-item .analysis-buyer-scenario b {
  color: #174f43;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .preview-context .preview-generation-time {
    width: 100%;
    margin-left: 0;
    padding: 8px 0 0;
    border-top: 1px solid rgba(49,87,200,.12);
    border-left: 0;
  }
}

.analysis-evidence-item footer span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef5f2;
  font-weight: 800;
}

.analysis-evidence-item footer .ok {
  color: #14735d;
  background: #dff5ee;
}

.analysis-evidence-item footer .warn {
  color: #9a5b12;
  background: #fff4df;
}
.preview-card-title em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.5;
}
.preview-card p, .mini-card p { margin: 12px 0; color: #334155; line-height: 1.7; }
.preview-card small, .mini-card span, .list-line span, .list-line em {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.list-line div { min-width: 0; display: grid; gap: 4px; }
.list-line strong, .list-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-snippet,
.message-cell {
  max-width: 420px;
  color: #334155;
  line-height: 1.55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exception-message,
.exception-time {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.exception-message > span,
.exception-message > small,
.exception-time > span,
.exception-time > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exception-message > small,
.exception-time > small {
  color: #28775c;
  font-size: 11px;
  line-height: 1.4;
}

.bulk-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.bulk-bar.has-selection {
  padding: 9px 10px;
  border-radius: 11px;
  background: var(--brand-soft);
}
.bulk-spacer { flex: 1; }
.monitor-bulk-bar {
  padding: 8px 10px;
  border: 1px solid #e1e7f0;
  border-radius: 12px;
  background: #fbfdff;
}
.table-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.table-context > div { display: grid; gap: 4px; }
.table-context > .row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}
.table-context > .row-actions button { white-space: nowrap; }
.table-context span { color: var(--muted); font-size: 12px; }
.table-head-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.table-head-toggle input {
  width: 14px;
  height: 14px;
  accent-color: var(--brand);
}
.monitor-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.monitor-handled-panel .table-wrap {
  border-radius: 12px;
}
.monitor-handled-table th,
.monitor-handled-table td {
  vertical-align: top;
}
.monitor-handle-identity,
.monitor-handle-meta,
.monitor-handle-reason {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.monitor-handle-identity strong,
.monitor-handle-meta strong,
.monitor-handle-reason strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.monitor-handle-identity span,
.monitor-handle-meta span,
.monitor-handle-reason span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.monitor-handle-identity em {
  max-width: 360px;
  overflow: hidden;
  color: #475569;
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  color: var(--muted);
}
.pagination div { display: flex; align-items: center; gap: 10px; }
.pagination strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.page-size-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.page-size-control select {
  height: 24px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.table-wrap { width: 100%; min-width: 0; overflow-x: auto; }
.table-top-scroll {
  width: 100%;
  min-width: 0;
  height: 20px;
  margin: 6px 0 2px;
  padding: 5px 0;
}
.table-top-scroll[hidden] { display: none; }
.table-top-scroll-track {
  position: relative;
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 1px solid #d7e0ec;
  border-radius: 4px;
  background: #edf2f8;
}
.table-top-scroll-thumb {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 48px;
  height: 100%;
  padding: 0;
  border: 1px solid #8ea3bf;
  border-radius: 3px;
  background: #a9b9cf;
  cursor: grab;
  touch-action: none;
  transition: background .15s ease;
}
.table-top-scroll-thumb:hover,
.table-top-scroll-thumb.is-dragging {
  background: #7088a8;
  cursor: grabbing;
}
.table-wrap.top-scroll-controlled {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.table-wrap.top-scroll-controlled::-webkit-scrollbar { height: 0; }
table { width: 100%; border-collapse: collapse; min-width: 980px; }
.library-table,
.monitor-table {
  table-layout: fixed;
}
th, td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow: hidden;
}
th {
  position: relative;
  color: var(--muted);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}
.library-table th,
.monitor-table th {
  user-select: none;
}
.library-table th > span,
.monitor-table th > span {
  display: block;
  overflow: hidden;
  padding-right: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-table .select-col,
.monitor-table .select-col {
  text-align: center;
}
.library-table .action-col,
.monitor-table .action-col {
  position: sticky;
  right: 0;
  z-index: 3;
  min-width: 170px;
  background: #fff;
  box-shadow: -12px 0 18px rgba(15, 23, 42, .06);
  white-space: normal;
}
.library-table th.action-col,
.monitor-table th.action-col {
  z-index: 5;
  background: #f8fafc;
}
.column-resize-handle {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 2;
  width: 9px;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: col-resize;
}
.column-resize-handle::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 4px;
  width: 1px;
  background: transparent;
}
.column-resize-handle:hover::after,
.is-resizing-column .column-resize-handle::after {
  background: var(--brand);
}
.is-resizing-column {
  cursor: col-resize;
  user-select: none;
}
td { line-height: 1.5; }
tbody tr:hover { background: #f8fafc; }
.link-cell { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor-identity-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.monitor-identity-cell strong {
  color: #12213f;
  font-size: 13px;
  font-weight: 800;
}
.monitor-identity-cell span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.monitor-reason-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
  width: 100%;
}
.monitor-reason-cell strong,
.monitor-reason-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.monitor-reason-cell strong {
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}
.monitor-reason-cell span {
  color: var(--muted);
  font-size: 11px;
}
.badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-2);
  font-weight: 800;
  font-size: 12px;
}
.badge.ok { color: var(--ok); background: var(--ok-soft); }
.badge.warn { color: var(--warn); background: var(--warn-soft); }
.badge.bad { color: var(--bad); background: var(--bad-soft); }
.badge.primary { color: var(--primary); background: rgba(49, 93, 224, .12); }
.asin-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  overflow: hidden;
  border: 1px solid rgba(49, 87, 200, .24);
  border-radius: 9px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  color: #17336f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75);
  vertical-align: middle;
}

.record-code-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  max-width: 100%;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid #cbd9ed;
  border-radius: 5px;
  background: #f3f7fc;
  color: #31537d;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asin-badge i {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  background: #3157c8;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .04em;
}
.asin-badge b {
  min-width: 0;
  overflow: hidden;
  padding: 0 9px;
  color: #17336f;
  font-family: "SFMono-Regular", Consolas, "Microsoft YaHei UI", monospace;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asin-badge.large {
  min-height: 32px;
}
.asin-badge.large b,
.asin-badge.hero b {
  font-size: 15px;
}
.asin-badge.inline {
  min-height: 24px;
  margin-left: 4px;
}
.asin-badge.inline i {
  font-size: 9px;
}
.asin-badge.inline b {
  font-size: 12px;
}
.asin-badge.hero {
  min-height: 34px;
  border-color: rgba(49, 87, 200, .34);
}
.empty {
  padding: 28px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fbfdff;
}
.backend-offline-panel {
  display: grid;
  gap: 12px;
  max-width: 780px;
}
.backend-offline-panel strong {
  font-size: 18px;
}
.backend-offline-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}
.backend-offline-panel code,
.backend-offline-panel pre {
  padding: 2px 6px;
  border-radius: 6px;
  background: #eef2f6;
}
.backend-offline-panel pre {
  margin: 0;
  white-space: pre-wrap;
  color: var(--bad);
}

.settings-layout { display: grid; gap: 14px; }
.backend-status-card {
  display: grid;
  grid-template-columns: minmax(210px, .75fr) minmax(0, 2.25fr);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid #cfd8e8;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbff 0%, #f6f8fb 100%);
}
.backend-status-copy {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}
.backend-status-copy span,
.backend-status-copy em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.backend-status-copy strong {
  color: var(--ink);
  font-size: 20px;
}
.backend-status-resources {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.backend-status-resources .mini-stat {
  min-height: 62px;
  background: rgba(255,255,255,.82);
}
.config-panel {
  padding: 18px;
}
.admin-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.admin-summary.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-summary.log-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.backup-console {
  display: grid;
  gap: 14px;
}
.backup-console-head {
  margin-bottom: 0;
}
.backup-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.backup-metric {
  min-height: 94px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 15px 16px;
  border: 1px solid #dce5f0;
  border-radius: 13px;
  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}
.backup-metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.backup-metric strong {
  color: var(--ink);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.backup-metric em {
  color: var(--soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}
.system-update-console {
  display: grid;
  gap: 14px;
}
.system-update-head { margin-bottom: 0; }
.system-update-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.system-update-metric {
  min-height: 102px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 15px 16px;
  border: 1px solid #dce5f0;
  border-radius: 12px;
  background: #fff;
}
.system-update-metric > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.system-update-metric strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-update-metric em {
  overflow: hidden;
  color: var(--soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-update-metric.ok { border-color: #bde2d3; background: #f8fdfb; }
.system-update-metric.warn { border-color: #f0d6a9; background: #fffdf8; }
.system-update-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 12px;
}
.system-update-source-card,
.system-update-flow-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.system-update-source-card > header,
.system-update-flow-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e8edf4;
}
.system-update-source-card header > div,
.system-update-flow-card header > div { display: grid; gap: 4px; }
.system-update-source-card strong,
.system-update-flow-card strong { color: var(--ink); font-size: 14px; font-weight: 900; }
.system-update-source-card header span,
.system-update-flow-card header span { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.45; }
.update-mode {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: #697586;
  background: #f2f4f7;
  font-size: 11px !important;
  font-weight: 850 !important;
}
.update-mode.ok { color: #16714a; background: #eaf8f1; }
.update-mode.warn { color: #9a6500; background: #fff4dd; }
.system-update-source-card dl {
  display: grid;
  gap: 0;
  margin: 0;
}
.system-update-source-card dl > div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid #edf1f5;
}
.system-update-source-card dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.system-update-source-card dt { color: var(--soft); font-size: 12px; font-weight: 800; }
.system-update-source-card dd {
  overflow: hidden;
  margin: 0;
  color: #344054;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-update-source-card .system-update-auth-row dd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  overflow: visible;
}
.system-update-auth-row dd > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-update-auth-row .text-action {
  flex: 0 0 auto;
  padding: 2px 0;
  border: 0;
  color: var(--brand);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 850;
}
.system-update-auth-row .text-action:hover:not(:disabled) { color: #173e9b; }
.system-update-auth-row .text-action:disabled { color: var(--soft); cursor: not-allowed; }
.system-update-flow-card ol {
  display: grid;
  gap: 10px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}
.system-update-flow-card li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.system-update-flow-card li > b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #3158ae;
  background: #edf3ff;
  font-size: 11px;
}
.system-update-flow-card li > div { display: grid; gap: 2px; }
.system-update-flow-card li strong { font-size: 12px; }
.system-update-flow-card li span { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.35; }
.system-update-command {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(260px, 1.2fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #cfe0f7;
  border-radius: 12px;
  background: #f8fbff;
}
.system-update-command > div { display: grid; gap: 4px; }
.system-update-command strong { color: var(--ink); font-size: 13px; font-weight: 900; }
.system-update-command span { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.4; }
.system-update-command code {
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid #dbe4f2;
  border-radius: 8px;
  color: #1f3c6d;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-update-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 2px 2px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}
.system-update-note strong { flex: 0 0 auto; color: #475467; }
.system-update-note code { color: #3158ae; font-size: inherit; }
.system-update-auth-modal-panel { width: min(560px, calc(100vw - 28px)); }
.system-update-auth-form .credential-inline-note { margin-top: 2px; }
.system-update-agent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid #d9e4f3;
  border-radius: 12px;
  background: #f8fbff;
}
.system-update-agent.ok { border-color: #bde2d3; background: #f8fdfb; }
.system-update-agent.bad { border-color: #f0c7c2; background: #fffafa; }
.system-update-agent.waiting { border-color: #d9e4f3; background: #f8fbff; }
.system-update-agent-state { min-width: 0; display: flex; align-items: center; gap: 10px; }
.system-update-agent-state > div { min-width: 0; display: grid; gap: 3px; }
.system-update-agent-state strong { color: var(--ink); font-size: 13px; font-weight: 900; }
.system-update-agent-state span { overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.system-update-agent-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #8da0bb; box-shadow: 0 0 0 4px #edf2f8; }
.system-update-agent.ok .system-update-agent-dot { background: #249765; box-shadow: 0 0 0 4px #e3f7ed; }
.system-update-agent.bad .system-update-agent-dot { background: #d04d47; box-shadow: 0 0 0 4px #ffebe9; }
.system-update-agent-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.system-update-job { padding: 13px 14px; border: 1px solid #d9e4f3; border-radius: 12px; background: #fbfdff; }
.system-update-job.ok { border-color: #bde2d3; background: #f9fdfb; }
.system-update-job.bad { border-color: #f0c7c2; background: #fffafa; }
.system-update-job-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 750; }
.system-update-job-head > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.system-update-job-head strong { color: var(--ink); font-size: 13px; font-weight: 900; }
.system-update-job-head em { padding: 3px 7px; border-radius: 999px; color: #526276; background: #edf2f8; font-style: normal; }
.system-update-job.ok .system-update-job-head em { color: #16714a; background: #eaf8f1; }
.system-update-job.bad .system-update-job-head em { color: #a52a27; background: #ffebe9; }
.system-update-job > p { margin: 9px 0 0; color: #475467; font-size: 12px; font-weight: 700; line-height: 1.5; }
.system-update-job pre { max-height: 240px; overflow: auto; margin: 10px 0 0; padding: 10px 12px; border: 1px solid #e1e8f0; border-radius: 8px; color: #344054; background: #f5f8fb; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.backup-policy-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d8e4f0;
  border-radius: 13px;
  background: #f8fbff;
}
.backup-policy-strip div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.backup-policy-strip strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}
.backup-policy-strip span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.backup-table-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.backup-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}
.backup-table-head div {
  display: grid;
  gap: 4px;
}
.backup-table-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}
.backup-table-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.backup-table-wrap {
  border-radius: 0;
}
.backup-table {
  min-width: 1060px;
}
.backup-table th,
.backup-table td {
  padding-top: 10px;
  padding-bottom: 10px;
}
.backup-file-cell {
  max-width: 330px;
}
.backup-file-cell strong,
.backup-file-cell span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.backup-file-cell strong {
  color: var(--ink);
  font-weight: 900;
}
.backup-file-cell span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.backup-kind {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #475569;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.backup-kind.ok {
  color: var(--ok);
  border-color: rgba(47, 125, 91, .22);
  background: var(--ok-soft);
}
.backup-kind.warn {
  color: var(--warn);
  border-color: rgba(169, 111, 29, .24);
  background: var(--warn-soft);
}
.backup-kind.info {
  color: var(--brand);
  border-color: rgba(49, 87, 200, .22);
  background: var(--brand-soft);
}
.backup-row-actions {
  min-width: 160px;
  white-space: nowrap;
}
.user-role-tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 13px 14px;
  border: 1px solid #d7e3f0;
  border-radius: 12px;
  background: #f8fbff;
}
.user-role-tip div {
  display: grid;
  gap: 4px;
}
.user-role-tip strong {
  color: var(--ink);
  font-size: 14px;
}
.user-role-tip span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.role-permission-panel {
  display: grid;
  gap: 14px;
}
.role-permission-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.role-permission-summary article {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}
.role-permission-summary span,
.role-permission-summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}
.role-permission-summary strong {
  color: var(--ink);
  font-size: 15px;
}
.role-permission-table {
  display: grid;
  border: 1px solid #d9e2ef;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.role-permission-head,
.role-permission-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(140px, .75fr));
  align-items: stretch;
}
.role-permission-head {
  background: #f1f5fb;
  color: #41516b;
  font-size: 12px;
  font-weight: 900;
}
.role-permission-head span,
.role-permission-row > div {
  padding: 12px 14px;
  border-right: 1px solid #e3e9f2;
}
.role-permission-head span:last-child,
.role-permission-row > div:last-child {
  border-right: 0;
}
.role-permission-row {
  border-top: 1px solid #edf1f7;
}
.role-permission-row > div:first-child {
  display: grid;
  gap: 4px;
}
.role-permission-row strong {
  color: var(--ink);
  font-size: 13px;
}
.role-permission-row span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.role-permission-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
}
.role-permission-cell label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}
.role-permission-cell input {
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
}
.user-modal-form,
.user-role-preview {
  display: grid;
  gap: 12px;
}
.user-role-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.user-role-preview-grid div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #e0e7f1;
  border-radius: 10px;
  background: #f8fafc;
}
.user-role-preview-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.user-role-preview-grid strong {
  color: var(--ink);
  font-size: 13px;
}
.permission-denied-panel {
  display: grid;
  gap: 8px;
  color: var(--muted);
}
.permission-denied-panel strong {
  color: var(--ink);
  font-size: 18px;
}
.maintenance-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.maintenance-card {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid #dfe7f2;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}
.maintenance-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.maintenance-card strong {
  color: var(--ink);
  font-size: 16px;
}
.maintenance-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}
.task-maintenance-panel {
  display: grid;
  gap: 14px;
  border-color: #dce8f7;
  background: linear-gradient(180deg, #fbfdff 0%, #fff 100%);
}
.task-maintenance-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.task-maintenance-head h2 {
  margin: 0;
  font-size: 17px;
}
.task-maintenance-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.maintenance-overview.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0;
}
.mini-stat {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}
.mini-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.mini-stat strong {
  color: var(--ink);
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.config-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.provider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #c9d6f2;
  border-radius: 14px;
  background: #f7f9ff;
}
.provider-row.compact {
  grid-template-columns: minmax(180px, .9fr) minmax(160px, .7fr) minmax(220px, 1.2fr) auto;
  margin: 0;
  border-color: #d8e0ee;
  background: #f9fbff;
}
.config-editor {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.config-list {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
}
.config-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.ai-settings-panel {
  display: grid;
  gap: 16px;
}
.ai-panel-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.ai-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}
.ai-save-button {
  min-width: 112px;
  min-height: 38px;
  font-size: 14px;
  box-shadow: 0 9px 18px rgba(49, 87, 200, .13);
}
.ai-console {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #d2dceb;
  border-radius: 14px;
  background: #f5f7fb;
}
.ai-console-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 2px 2px 12px;
  border-bottom: 1px solid #d9e2ef;
}
.ai-console-title {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.ai-console-title span,
.ai-route-matrix header span,
.ai-resource-card header span,
.ai-route-purpose span {
  color: var(--brand);
  font-size: 11px;
  font-weight: 950;
}
.ai-console-title strong {
  color: var(--ink);
  font-size: 21px;
  line-height: 1.2;
}
.ai-console-title p {
  max-width: 78ch;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.ai-console-health,
.ai-route-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-health-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(47,125,91,.18);
  border-radius: 9px;
  color: var(--ok);
  background: var(--ok-soft);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}
.ai-health-pill.warn {
  color: var(--warn);
  border-color: rgba(169,111,29,.22);
  background: var(--warn-soft);
}
.ai-route-tools .field {
  width: 156px;
}
.ai-route-matrix,
.ai-resource-card {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid #d8e1ec;
  border-radius: 12px;
  background: #fff;
}
.ai-route-matrix header,
.ai-resource-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #e4eaf2;
}
.ai-route-matrix header div:first-child,
.ai-resource-card header div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.ai-route-matrix header strong,
.ai-resource-card header strong {
  color: var(--ink);
  font-size: 15px;
}
.ai-route-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ai-route-summary span {
  padding: 5px 7px;
  border-radius: 8px;
  background: #f1f5fb;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.ai-route-table {
  display: grid;
  overflow: hidden;
  border: 1px solid #e1e7f0;
  border-radius: 11px;
  background: #fff;
}
.ai-route-table-head,
.ai-route-config-row {
  display: grid;
  grid-template-columns: minmax(116px, .72fr) minmax(220px, 1.05fr) minmax(230px, 1.12fr) minmax(116px, .52fr);
  gap: 10px;
  align-items: center;
}
.ai-route-table-head {
  min-height: 36px;
  padding: 0 12px;
  background: #f5f7fb;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}
.ai-route-config-row {
  min-width: 0;
  padding: 10px 12px;
  border-top: 1px solid #edf1f6;
  border-left: 4px solid var(--warn);
  background: #fff;
}
.ai-route-config-row.ok {
  border-left-color: var(--ok);
}
.ai-route-purpose,
.ai-route-provider,
.ai-route-state {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ai-route-purpose strong,
.ai-route-provider strong {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-route-provider span,
.ai-route-state em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-route-select .field {
  padding: 0;
  border: 0;
  background: transparent;
  gap: 5px;
}
.ai-route-select .field span {
  display: none;
}
.ai-route-state {
  justify-items: start;
}
.ai-section-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid #e4eaf2;
}
.ai-section-footer span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}
.ai-resource-grid {
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(0, 1.35fr);
  gap: 12px;
  align-items: start;
}
.ai-resource-body.provider {
  display: grid;
  grid-template-columns: 174px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.ai-resource-body.model {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.ai-inline-create {
  border: 1px dashed #cfd9e8;
  border-radius: 10px;
  background: #f8fafc;
}
.ai-inline-create summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--ink);
  font-weight: 900;
}
.ai-inline-create .ai-provider-create-form {
  padding: 0 12px 12px;
}
.ai-run-strip {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.35fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #cbd7ea;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(235,241,255,.95), rgba(255,255,255,.9) 52%, rgba(247,250,252,.95)),
    #f8fafc;
}
.ai-run-strip .ai-region-actions {
  grid-column: 1 / -1;
}
.ai-run-copy {
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
}
.ai-run-copy span,
.ai-model-toolbar span,
.ai-provider-section header span,
.ai-model-provider-note span,
.ai-model-provider-note em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.45;
}
.ai-run-copy strong {
  color: var(--ink);
  font-size: 21px;
}
.ai-run-copy p {
  max-width: 54ch;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.ai-run-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ai-run-controls .field {
  padding: 10px;
  border: 1px solid rgba(203,213,225,.75);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
}
.ai-provider-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d7deec;
  border-radius: 16px;
  background: #f8fafc;
}
.ai-provider-workbench {
  display: grid;
  grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr) minmax(280px, .5fr);
  gap: 12px;
  align-items: stretch;
}
.ai-provider-section header,
.ai-model-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ai-provider-section header div,
.ai-model-toolbar div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ai-provider-section header strong,
.ai-model-toolbar strong {
  color: var(--ink);
  font-size: 15px;
}
.ai-region-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(203,213,225,.7);
}
.ai-model-section {
  display: grid;
  gap: 12px;
}
.ai-provider-editor,
.ai-provider-workbench {
  display: grid;
  gap: 12px;
  align-items: stretch;
}
.ai-provider-editor {
  grid-template-columns: minmax(300px, .44fr) minmax(0, 1fr);
}
.ai-provider-list {
  display: grid;
  align-content: start;
  gap: 5px;
  max-height: 330px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #e0e7f0;
  border-radius: 10px;
  background: #f8fafc;
}
.ai-provider-list-item {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 66px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  overflow: hidden;
}
.ai-provider-list-item.active {
  border-color: rgba(49,87,200,.34);
  background: #fff;
  box-shadow: 0 8px 18px rgba(49, 87, 200, .07);
}
.ai-provider-list-item strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}
.ai-provider-list-item span,
.ai-provider-list-item em {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}
.ai-provider-list-item em {
  width: fit-content;
  padding: 2px 6px;
  border-radius: 6px;
  background: #eef2f7;
}
.ai-provider-list-item em.ok {
  color: var(--ok);
  background: var(--ok-soft);
}
.ai-provider-model-empty {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px dashed #cbd7e7;
  border-radius: 10px;
  background: #fbfdff;
}
.ai-provider-model-empty strong {
  color: var(--ink);
}
.ai-provider-model-empty span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}
.ai-provider-model-empty .ghost-button {
  justify-self: start;
}
.ai-provider-detail {
  min-width: 0;
}
.ai-provider-create-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe5f3;
  border-radius: 14px;
  background: #fff;
}
.ai-provider-create-card header {
  display: block;
}
.ai-provider-create-card header strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}
.ai-provider-create-card header span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}
.ai-provider-create-form {
  display: grid;
  gap: 10px;
}
.ai-provider-create-card .primary-button {
  justify-self: end;
}
.ai-provider-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e0e7f0;
  border-radius: 10px;
  background: #fbfdff;
}
.ai-provider-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #e6edf5;
}
.ai-provider-card-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ai-provider-card-head strong {
  color: var(--ink);
}
.ai-provider-card-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.ai-provider-card-head label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.ai-model-toolbar {
  padding: 2px 2px 0;
}
.ai-model-editor {
  margin-top: -2px;
}
.ai-model-card {
  min-height: 100%;
}
.ai-model-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-model-head-actions label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.ai-model-head-actions label.danger-state {
  color: var(--bad);
}
.inline-alert {
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--warn);
  background: var(--warn-soft);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.45;
}
.inline-alert.bad {
  color: var(--bad);
  background: var(--bad-soft);
}
.ai-model-provider-note {
  display: grid;
  grid-template-columns: minmax(120px, .35fr) minmax(180px, .55fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #dbe5f3;
  border-radius: 12px;
  background: #f8fbff;
}
.ai-model-provider-note strong {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-management-panel {
  display: grid;
  gap: 16px;
}
.channel-console {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(0, 1.4fr);
  gap: 12px;
  align-items: stretch;
}
.channel-console-copy {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid #d6e0ef;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
}
.channel-console-copy span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}
.channel-console-copy strong {
  font-size: 20px;
  letter-spacing: 0;
}
.channel-console-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.channel-console-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.channel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.channel-toolbar div:first-child {
  display: grid;
  gap: 4px;
}
.channel-toolbar strong {
  font-size: 15px;
}
.channel-toolbar span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.channel-table-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}
.channel-table {
  min-width: 980px;
  table-layout: fixed;
}
.channel-table th {
  background: #f6f8fb;
}
.channel-table td {
  vertical-align: middle;
}
.channel-table th:nth-child(1) { width: 48px; }
.channel-table th:nth-child(2) { width: 130px; }
.channel-table th:nth-child(3) { width: 82px; }
.channel-table th:nth-child(4) { width: 70px; }
.channel-table th:nth-child(5) { width: 190px; }
.channel-table th:nth-child(6) { width: 78px; }
.channel-table th:nth-child(7) { width: 140px; }
.channel-table th:nth-child(8) { width: 82px; }
.channel-table th:nth-child(9) { width: 160px; }
.channel-table td strong,
.channel-table td > span:not(.badge) {
  display: block;
}
.channel-table td > span:not(.badge) {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.channel-table .row-actions {
  gap: 4px;
  justify-content: flex-start;
}
.channel-table .selected-row td {
  background: #f7f9ff;
}
.route-ref,
.muted-text {
  color: var(--muted);
  font-size: 12px;
}
.route-ref {
  color: #334155;
  font-weight: 800;
}
.badge.type-email { color: #2f638f; background: #e8f3fb; }
.badge.type-sms { color: #7a5b16; background: #fff3cf; }
.badge.type-feishu,
.badge.type-dingtalk,
.badge.type-wecom { color: #2f6b52; background: #e6f5ee; }
.badge.type-webhook { color: #5f4aa1; background: #f0ecff; }
.channel-detail-panel {
  min-width: 0;
}
.channel-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
  border: 1px dashed #cbd7e7;
  border-radius: 11px;
  background: #fff;
}
.config-list-item {
  width: 100%;
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  text-align: left;
}
.config-list-item.active {
  border-color: rgba(49, 87, 200, .32);
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.config-list-item strong {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.config-list-item span, .config-list-item em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.config-list-item em {
  color: var(--brand);
  font-weight: 900;
}
.ai-model-list-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.ai-model-list-row.disabled {
  background: #f8fafc;
  opacity: .78;
}
.ai-model-list-main {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}
.ai-model-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ai-model-test,
.ai-model-toggle {
  min-width: 48px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}
.ai-model-test {
  border: 1px solid #d7e0ef;
  color: #334155;
  background: #fff;
}
.ai-model-toggle {
  border: 1px solid rgba(47,125,91,.18);
  color: var(--ok);
  background: var(--ok-soft);
}
.ai-model-toggle.danger {
  color: var(--bad);
  border-color: rgba(185,74,72,.24);
  background: var(--bad-soft);
}
.model-state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}
.model-state-pill.ok {
  color: var(--ok);
  background: var(--ok-soft);
}
.model-state-pill.danger {
  color: var(--bad);
  background: var(--bad-soft);
}
.config-detail {
  min-width: 0;
}
.config-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #fff 100%);
}
.config-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.config-card header div {
  display: grid;
  gap: 4px;
}
.config-card header strong {
  font-size: 16px;
}
.config-card header span {
  color: var(--muted);
  font-size: 12px;
}
.config-card header label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.business-config-grid,
.settings-section-grid,
.template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.generation-defaults-block {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.settings-section-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.monitor-config-panel {
  display: grid;
  gap: 16px;
}
.monitor-config-head {
  display: grid;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.monitor-config-switch {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdff;
}
.monitor-config-switch > div:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.monitor-config-switch strong {
  font-size: 14px;
}
.monitor-config-switch span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.monitor-config-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.monitor-config-tabs {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  padding: 5px;
  border: 1px solid #cbd7e7;
  border-radius: 12px;
  background: #eef4ff;
}
.monitor-config-tabs button {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  color: #41516b;
  background: transparent;
  font-weight: 900;
  white-space: nowrap;
}
.monitor-config-tabs button.active {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 10px 22px rgba(49, 87, 200, .22);
}
.monitor-rules-view,
.monitor-routes-view,
.monitor-session-view {
  display: grid;
  gap: 14px;
}
.monitor-session-view .amazon-session-card {
  max-width: none;
}
.amazon-engine-card {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(420px, 1.4fr);
  gap: 14px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 68%);
}
.amazon-engine-copy {
  display: grid;
  align-content: center;
  gap: 6px;
}
.amazon-engine-copy span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.amazon-engine-copy strong {
  color: var(--ink);
  font-size: 20px;
}
.amazon-engine-copy em {
  max-width: 62ch;
  color: #526174;
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
}
.amazon-engine-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.amazon-engine-settings {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.amazon-engine-policy {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  background: #f7f9fc;
}
.amazon-engine-policy strong {
  flex: 0 0 auto;
  color: #24446f;
  font-size: 12px;
}
.amazon-engine-policy span {
  color: #5c6c80;
  font-size: 12px;
  line-height: 1.55;
}
.monitor-rule-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: start;
}
.monitor-rule-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.monitor-rule-main.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.monitor-pace-block {
  grid-column: 1 / -1;
}
.monitor-pace-block header .badge {
  flex-shrink: 0;
}
.monitor-pace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.monitor-pace-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8e4f0;
  border-radius: 13px;
}
.monitor-pace-card.manual {
  background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
  border-color: #c9d8ee;
}
.monitor-pace-card.auto {
  background: linear-gradient(135deg, #fbfcf8 0%, #f1f7ed 100%);
  border-color: #d6e7cf;
}
.monitor-pace-title {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(117, 132, 155, .18);
}
.monitor-pace-title strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}
.monitor-pace-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.monitor-pace-card .form-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.monitor-pace-card .field {
  gap: 6px;
}
.monitor-pace-card .field span {
  font-size: 11px;
}
.monitor-pace-card input {
  height: 34px;
}
.monitor-pace-policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #dbe4ef;
  border-radius: 13px;
  background: #f8fbff;
}
.monitor-pace-policy > div {
  display: grid;
  gap: 4px;
}
.monitor-pace-policy strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}
.monitor-pace-policy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.monitor-rule-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid #d6e0ef;
  border-radius: 12px;
  background: #f8fbff;
}
.monitor-rule-note strong {
  font-size: 14px;
}
.monitor-rule-note span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.amazon-session-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 60%);
}
.amazon-session-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.amazon-session-main > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.amazon-session-main span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.amazon-session-main strong {
  color: var(--ink);
  font-size: 18px;
}
.amazon-session-main em {
  color: #526174;
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
}
.amazon-session-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.amazon-session-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.amazon-session-action-grid > div {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 13px;
  border: 1px solid #e0e7f1;
  border-radius: 12px;
  background: rgba(255,255,255,.78);
}
.amazon-session-action-grid strong {
  color: var(--ink);
  font-size: 13px;
}
.amazon-session-action-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.amazon-session-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}
.amazon-session-actions .is-loading { cursor: wait; }
.amazon-assistant-note {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px dashed #cbd7e7;
  border-radius: 10px;
  background: #fbfdff;
}
.amazon-assistant-note strong {
  color: var(--ink);
  font-size: 12px;
}
.amazon-assistant-note span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.amazon-assistant-note code {
  padding: 1px 5px;
  border-radius: 6px;
  background: #edf2f7;
  color: #334155;
}
.monitor-notify-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #cbd7e7;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7fafc 0%, #fff 100%);
}
.monitor-notify-card header {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.monitor-notify-card header strong {
  font-size: 15px;
}
.monitor-notify-card header span {
  color: var(--muted);
  font-size: 12px;
}
.business-card,
.settings-block,
.template-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #fff 100%);
}
.business-card header,
.settings-block header,
.template-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.business-card header div,
.settings-block header,
.template-card header div {
  display: grid;
  gap: 4px;
}
.business-card header strong,
.settings-block header strong,
.template-card header strong {
  font-size: 15px;
}
.business-card header span,
.settings-block header span,
.template-card header span,
.business-card header em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}
.settings-block .form-grid,
.template-card .form-grid {
  grid-template-columns: 1fr;
}
.route-default-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1.1fr) minmax(280px, .9fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid #d6e0ef;
  border-radius: 14px;
  background: #f8fbff;
}
.route-default-card > div:first-child {
  display: grid;
  gap: 5px;
  padding-top: 4px;
}
.route-default-card > div:first-child strong {
  font-size: 15px;
}
.route-default-card > div:first-child span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.route-default-card .field textarea {
  min-height: 78px;
}
.route-default-card .route-destinations {
  grid-column: 1 / -1;
}
.route-default-card-v2 {
  grid-template-columns: 1fr;
  gap: 12px;
  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 72%);
}
.route-default-card-v2 > header,
.monitor-template-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dfe7f2;
}
.route-default-card-v2 > header > div:first-child,
.monitor-template-card > header > div:first-child {
  display: grid;
  gap: 4px;
}
.route-default-card-v2 > header strong,
.monitor-template-card > header strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}
.route-default-card-v2 > header span,
.monitor-template-card > header span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.route-default-grid {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr);
  gap: 12px;
  align-items: stretch;
}
.route-default-grid .route-destinations {
  grid-column: auto;
  min-height: 100%;
}
.monitor-template-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #d6e0ef;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.monitor-template-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.1fr) minmax(320px, .9fr);
  gap: 14px;
  align-items: stretch;
}
.monitor-template-editor {
  min-width: 0;
}
.monitor-template-editor textarea {
  min-height: 228px;
  line-height: 1.65;
  font-family: "SFMono-Regular", Consolas, "Microsoft YaHei", monospace;
  font-size: 12px;
}
.monitor-template-editor code,
.monitor-template-vars code {
  padding: 1px 4px;
  border-radius: 5px;
  background: #edf3fb;
  color: #3157c8;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
}
.monitor-template-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.monitor-template-vars,
.monitor-template-preview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dfe7f2;
  border-radius: 12px;
  background: rgba(255,255,255,.78);
}
.monitor-template-vars strong,
.monitor-template-preview strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}
.monitor-template-vars > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.monitor-template-vars button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #d4deeb;
  border-radius: 8px;
  background: #f8fbff;
  color: #40516b;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.monitor-template-vars button:hover {
  border-color: #b8c8e0;
  background: #eef5ff;
  transform: translateY(-1px);
}
.monitor-template-preview {
  background: #101827;
  border-color: #101827;
}
.monitor-template-preview strong {
  color: #e5eefb;
}
.monitor-template-preview pre {
  min-height: 88px;
  max-height: 260px;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: #e7edf7;
  font-family: "SFMono-Regular", Consolas, "Microsoft YaHei", monospace;
  font-size: 12px;
  line-height: 1.7;
}
.monitor-template-note-preview {
  display: grid;
  gap: 8px;
}
.monitor-template-note-preview > span {
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 950;
}
.monitor-template-mail-preview {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(248,113,113,.28);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(127,29,29,.3), rgba(15,23,42,.45));
}
.monitor-template-mail-preview span {
  color: #fecaca;
  font-size: 11px;
  font-weight: 950;
}
.monitor-template-mail-preview strong {
  color: #fff;
  font-size: 17px;
  font-weight: 950;
}
.monitor-template-mail-preview p {
  margin: 0;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.6;
}
.monitor-template-mail-preview div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 5px;
  border-top: 1px solid rgba(226,232,240,.14);
}
.monitor-template-mail-preview em {
  color: #94a3b8;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}
.monitor-template-mail-preview b {
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}
.route-block {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.route-block > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.route-block > header div {
  display: grid;
  gap: 4px;
}
.route-block > header strong {
  font-size: 15px;
}
.route-block > header span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.route-list {
  display: grid;
  gap: 0;
}
.route-table {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.route-table-head,
.route-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(130px, .9fr) minmax(130px, .9fr) 110px minmax(140px, 1fr) minmax(160px, 1.2fr) 92px 56px;
  gap: 8px;
  align-items: center;
}
.route-table-head {
  padding: 10px 12px;
  color: var(--muted);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
  border-bottom: 1px solid var(--line);
}
.route-card {
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
}
.route-card:last-child {
  border-bottom: 0;
}
.route-inline-control {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  outline: none;
}
.route-inline-control:focus {
  border-color: rgba(49, 87, 200, .55);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.route-target-text {
  min-width: 0;
  color: #334155;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-delete-button {
  justify-self: start;
}
.route-compact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 1.6fr;
  gap: 10px;
  align-items: start;
}
.route-destinations {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed #cbd7e7;
  border-radius: 11px;
  background: #fff;
}
.route-destinations > strong {
  min-width: 64px;
  font-size: 13px;
}
.route-destinations > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.route-destinations > div > span {
  min-width: 150px;
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  font-weight: 900;
}
.route-destinations em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}
.channel-picker {
  display: grid;
  gap: 8px;
}
.channel-picker > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}
.channel-picker > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.channel-picker label {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}
.sms-config-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.sms-intro,
.sms-help,
.sms-notice,
.sms-template-example {
  padding: 12px 14px;
  border-radius: 12px;
}
.sms-intro {
  display: grid;
  gap: 4px;
  border: 1px solid #e1e5eb;
  background: #f4f6f8;
}
.sms-intro strong {
  font-size: 14px;
}
.sms-intro span,
.sms-help span {
  color: var(--muted);
  line-height: 1.55;
}
.sms-help {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: #fbfdff;
  border: 1px dashed #cbd7e7;
}
.sms-notice {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #f1d59c;
  background: #fff8ed;
  color: #9a6518;
}
.sms-notice.info {
  border-color: #cbd7e7;
  background: #f5f7fa;
  color: var(--muted);
}
.sms-notice span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #f3a12d;
  font-size: 12px;
  font-weight: 900;
}
.sms-notice.info span {
  background: var(--soft);
}
.sms-template-example {
  display: grid;
  gap: 12px;
  border: 1px solid #e8d6a2;
  background: linear-gradient(180deg, #fffdf7 0%, #fff 100%);
}
.sms-template-example-head {
  display: grid;
  gap: 4px;
}
.sms-template-example-head strong {
  color: #7a4f12;
  font-size: 13px;
}
.sms-template-example-head span {
  color: #78624a;
  font-size: 12px;
  line-height: 1.55;
}
.sms-template-example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.sms-template-example-grid div {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 11px;
  border: 1px solid #efe2bd;
  border-radius: 10px;
  background: #fffaf0;
}
.sms-template-example-grid b {
  color: var(--ink);
  font-size: 12px;
}
.sms-template-example-grid em {
  color: #80684c;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}
.sms-template-example-grid code {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  background: #172033;
  color: #eaf2ff;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.sms-template-example p {
  margin: 0;
  color: #725a37;
  font-size: 12px;
  line-height: 1.65;
}
.sms-template-example p b {
  color: #4a3418;
}
.channel-modal-panel {
  width: min(780px, 100%);
}
.channel-help-modal-panel {
  width: min(980px, 100%);
}
.channel-modal-form {
  display: grid;
  gap: 14px;
}
.channel-help-overview {
  display: grid;
  gap: 16px;
}
.channel-help-overview > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}
.channel-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.channel-param-guide {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid #d9e2ef;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, .96), rgba(255, 255, 255, .98)),
    #fff;
}
.channel-param-guide-head {
  display: grid;
  gap: 4px;
}
.channel-param-guide-head strong {
  color: #1f3f7a;
  font-size: 13px;
}
.channel-param-guide-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.channel-param-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.channel-param-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  background: #f6f8fb;
}
.channel-param-grid b {
  color: var(--ink);
  font-size: 12px;
}
.channel-param-grid span,
.channel-param-grid em,
.channel-param-guide p {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}
.channel-param-guide p {
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: #edf4ff;
  color: #35527b;
}
.modal-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.modal-section > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(217, 224, 234, .72);
}
.modal-section > header div {
  display: grid;
  gap: 4px;
}
.modal-section > header strong {
  font-size: 14px;
}
.modal-section > header span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.modal-switch-control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.modal-switch-control:hover {
  border-color: #9eb6d4;
  background: #f8fbff;
}
.field .modal-switch-control > input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
}
.modal-switch-track {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: #c8d1dd;
  transition: background-color .2s ease;
}
.modal-switch-track i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(26, 43, 67, .24);
  transition: transform .2s ease;
}
.modal-switch-control input:checked + .modal-switch-track { background: #2878d0; }
.modal-switch-control input:checked + .modal-switch-track i { transform: translateX(16px); }
.modal-switch-control input:focus-visible + .modal-switch-track { outline: 3px solid rgba(40, 120, 208, .2); outline-offset: 2px; }
.modal-switch-control strong {
  color: #506176;
  font-size: 12px;
  font-weight: 800;
}
.modal-switch-control input:checked ~ strong { color: #185eac; }
.modal-section-basic { background: #fbfdff; }
.modal-section-email {
  border-color: #cfe0f1;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}
.modal-section-sms {
  border-color: #efdcae;
  background: linear-gradient(180deg, #fffaf0 0%, #fff 100%);
}
.modal-section-robot {
  border-color: #c9e3d8;
  background: linear-gradient(180deg, #f5fbf8 0%, #fff 100%);
}
.modal-section-webhook {
  border-color: #d9d4ef;
  background: linear-gradient(180deg, #fbfaff 0%, #fff 100%);
}
.modal-section-test {
  border-color: #d7dde8;
  background: #f8fafc;
}
.modal-check-slot {
  min-height: 40px;
  align-self: end;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.channel-modal-actions {
  position: sticky;
  bottom: -18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  margin: 0 -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
}
.export-template-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.export-template-list {
  display: grid;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.export-template-head,
.export-template-row {
  display: grid;
  grid-template-columns: minmax(180px, .9fr) 96px minmax(260px, 1.4fr) 72px 150px;
  gap: 12px;
  align-items: center;
  min-width: 760px;
}
.export-template-head {
  min-height: 38px;
  padding: 0 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.export-template-row {
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.export-template-name {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.export-template-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.export-template-name span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.type-badge {
  width: fit-content;
  min-width: 58px;
  padding: 5px 8px;
  border: 1px solid #cfd9ea;
  border-radius: 8px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.export-template-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.export-template-fields span,
.export-template-fields em {
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 7px;
  border-radius: 8px;
  color: #334155;
  background: #f1f5f9;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.export-template-fields em {
  color: var(--muted);
}
.export-template-count {
  font-variant-numeric: tabular-nums;
}
.export-template-modal-panel {
  width: min(760px, calc(100vw - 36px));
}
.prompt-template-panel .panel-head {
  align-items: flex-start;
}
.prompt-template-panel .row-actions {
  align-items: center;
}
.prompt-template-editor {
  gap: 14px;
}
.prompt-template-editor textarea {
  min-height: 180px;
}
.prompt-template-editor-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}
.export-template-editor {
  display: grid;
  gap: 14px;
}
.template-editor-main,
.template-editor-fields {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.template-editor-main {
  background: #f8fbff;
}
.template-editor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.template-editor-meta em {
  font-style: normal;
}
.template-editor-fields > div:first-child {
  display: grid;
  gap: 4px;
}
.template-editor-fields > div:first-child span {
  color: var(--muted);
  font-size: 12px;
}
.compact-field {
  max-width: 260px;
}
.template-field-order {
  display: grid;
  gap: 8px;
  min-height: 92px;
}
.template-field-order.compact {
  max-height: min(46vh, 390px);
  overflow: auto;
  padding-right: 2px;
}
.template-field-row {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}
.template-field-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}
.template-field-row div {
  display: flex;
  gap: 6px;
}
.template-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
  border: 1px dashed #cbd7e7;
  border-radius: 12px;
  background: #fbfdff;
}
.template-editor-actions {
  position: sticky;
  bottom: -18px;
  margin: 0 -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
}
.template-add-empty {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.field-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 80px;
}
.field-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}
.setting-note {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fbfdff;
}
.setting-note strong {
  font-size: 13px;
}
.setting-note span {
  color: var(--muted);
  line-height: 1.55;
}
.backup-actions {
  align-items: center;
  justify-content: flex-end;
}
.settings-tabs, .subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.settings-tabs button, .subtabs button {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}
.settings-tabs button.active, .subtabs button.active { color: var(--brand); background: var(--brand-soft); }
.log-subtabs {
  align-items: center;
  margin-bottom: 12px;
}
.log-subtabs > span {
  flex: 1;
}
.log-filter-bar {
  margin-bottom: 12px;
}
.log-list {
  display: grid;
  gap: 6px;
}
.log-row {
  display: grid;
  gap: 6px;
  min-height: 58px;
  padding: 8px 10px 9px;
  border: 1px solid #dfe7f2;
  border-radius: 9px;
  background: #fff;
}
.log-row.unread {
  border-color: rgba(49, 87, 200, .24);
  background: linear-gradient(90deg, #f8fbff 0%, #fff 72%);
}
.log-row-head,
.log-row-body,
.log-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.log-row-head {
  justify-content: space-between;
}
.log-row-head > .log-status {
  margin-left: auto;
}
.log-row-head time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  white-space: nowrap;
}
.log-row-head .row-actions {
  flex: 0 0 auto;
}
.log-head-left {
  flex: 1 1 auto;
}
.log-head-left strong {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-row-body {
  gap: 8px;
  padding-left: 17px;
}
.log-inline strong {
  flex: 0 1 132px;
  min-width: 82px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-row-copy {
  min-width: 0;
}
.log-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.log-row-main strong {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 1px 6px;
  border-radius: 7px;
  color: #42526a;
  background: #eef3f9;
  font-size: 10px;
  font-weight: 950;
}
.log-status.unread {
  color: var(--brand);
  background: var(--brand-soft);
}
.log-status.read {
  color: #64748b;
  background: #f1f5f9;
}
.log-tags {
  display: inline-flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  gap: 4px;
  margin-top: 0;
}
.log-tag {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px;
  border-radius: 7px;
  color: #526174;
  background: #f1f5f9;
  font-size: 10px;
  font-weight: 900;
}
.log-tag.bad {
  color: var(--bad);
  background: var(--bad-soft);
}
.log-tag.warn {
  color: var(--warn);
  background: var(--warn-soft);
}
.log-tag.ok {
  color: var(--ok);
  background: var(--ok-soft);
}
.log-row-body p,
.log-inline p {
  flex: 1 1 260px;
  min-width: 100px;
  margin: 0;
  color: #40516a;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.log-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cbd5e1;
}
.log-dot.active {
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(49, 87, 200, .12);
}
.log-dot.audit {
  background: #8ba2bf;
}
.log-row-meta {
  display: flex;
  align-items: center;
  justify-items: end;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
  padding-left: 8px;
  border-left: 1px solid #edf2f8;
  color: var(--muted);
  font-size: 11px;
}
.log-row-meta span {
  font-weight: 900;
}
.log-row-meta time {
  font-style: italic;
  white-space: nowrap;
}
.log-detail {
  flex: 0 1 560px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-left: 8px;
  border-left: 1px dashed #d7e1ee;
  border-right: 0;
  overflow: hidden;
}
.log-detail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.log-detail-grid span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 220px;
  min-width: 0;
  padding: 4px 7px;
  border: 1px solid #edf2f8;
  border-radius: 7px;
  background: #f8fafc;
}
.log-detail-grid b {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}
.log-detail-grid em {
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-detail-note {
  max-width: 280px;
  padding: 4px 7px;
  border: 1px solid #dce7f5;
  border-radius: 7px;
  color: #334155;
  background: #fbfdff;
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-detail pre {
  max-height: 180px;
  overflow: auto;
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 10px;
  color: #dbeafe;
  background: #08111f;
  font-size: 12px;
  line-height: 1.55;
}
.log-page {
  display: grid;
  gap: 14px;
}
.log-filter-panel {
  display: grid;
  grid-template-columns: minmax(110px, .75fr) minmax(120px, .85fr) minmax(140px, .95fr) minmax(140px, .95fr) minmax(250px, 1.7fr) minmax(130px, .9fr) minmax(190px, 1.25fr) auto;
  gap: 14px;
  align-items: end;
  padding: 16px 18px;
}
.log-filter-panel label {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.log-filter-panel label > span {
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}
.log-filter-panel .compact-filter-select,
.log-filter-panel input {
  width: 100%;
  height: 38px;
  border: 1px solid #dfe6f0;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}
.log-filter-range div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.log-filter-range em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}
.log-filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.log-filter-actions .primary-button,
.log-filter-actions .ghost-button {
  height: 38px;
  min-height: 38px;
  border-radius: 8px;
}
.log-table-panel {
  padding: 18px;
}
.log-table-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.log-table-head h2 {
  margin: 0;
  font-size: 18px;
}
.log-table-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.log-table-stats {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.log-table-stats span,
.log-table-stats em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  background: #f5f7fb;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.log-table-stats em.info { color: #2f7d5b; background: #e8f6ee; }
.log-table-stats em.success { color: #2f7d5b; background: #e8f6ee; }
.log-table-stats em.warn { color: #9a6619; background: #fff4df; }
.log-table-stats em.error { color: #b94a48; background: #fdecec; }
.log-action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.log-table-wrap {
  border: 1px solid #e1e7f0;
  border-radius: 10px;
  background: #fff;
}
.log-table {
  min-width: 1320px;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}
.log-table th,
.log-table td {
  padding: 10px 10px;
  border-right: 1px solid #eef2f7;
}
.log-table th:last-child,
.log-table td:last-child {
  border-right: 0;
}
.log-table th {
  height: 38px;
  background: #f9fbfe;
  color: #64748b;
}
.log-table td {
  color: #334155;
  font-size: 12px;
  line-height: 1.45;
  vertical-align: middle;
}
.log-table tr.unread td {
  background: #fbfdff;
}
.log-table th:nth-child(1) { width: 118px; }
.log-table th:nth-child(2) { width: 66px; }
.log-table th:nth-child(3) { width: 76px; }
.log-table th:nth-child(4) { width: 78px; }
.log-table th:nth-child(5) { width: 76px; }
.log-table th:nth-child(6) { width: 124px; }
.log-table th:nth-child(7) { width: 92px; }
.log-table th:nth-child(8) { width: 310px; }
.log-table th:nth-child(9) { width: 300px; }
.log-table th:nth-child(10) { width: 82px; }
.log-table th:nth-child(11) { width: 82px; }
.log-table th:last-child,
.log-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: #fff;
  box-shadow: -1px 0 0 #eef2f7;
}
.log-table th:last-child {
  z-index: 3;
  background: #f9fbfe;
}
.log-time-cell,
.log-ip-cell,
.log-source-cell {
  color: #475569;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}
.log-level-pill,
.log-module-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}
.log-level-pill.info,
.log-level-pill.success {
  color: #fff;
  background: #47b548;
}
.log-level-pill.warn {
  color: #8a5a12;
  background: #fff0cf;
}
.log-level-pill.error {
  color: #fff;
  background: #d4574f;
}
.log-module-pill {
  color: #2f6db2;
  background: #eef6ff;
  border: 1px solid #cfe4ff;
}
.log-code,
.log-detail-inline {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-code {
  max-width: 108px;
  padding: 3px 7px;
  border-radius: 6px;
  color: #64748b;
  background: #f4f6f9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.log-detail-inline {
  color: #334155;
}
.log-message-box {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.log-message-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.log-message-tags span {
  min-width: 0;
  max-width: 132px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #f3f6fa;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-message-tags span.ok {
  color: #2f8b52;
  background: #eaf8ef;
}
.log-message-tags span.warn {
  color: #c57520;
  background: #fff4e8;
}
.log-message-box p {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 6px 8px;
  border-left: 3px solid #3b82f6;
  border-radius: 5px;
  background: #f5f8fc;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-row-actions {
  display: grid;
  justify-items: start;
  align-items: center;
  gap: 2px;
}
.log-row-actions .text-button,
.log-row-actions .text-danger {
  padding: 1px 4px;
  font-size: 12px;
}
.log-view-link {
  color: var(--brand);
  font-weight: 900;
}

/* Unified event workspace */
.log-workspace {
  overflow: hidden;
  padding: 0;
}
.log-workspace .log-table-head {
  margin: 0;
  padding: 20px 20px 14px;
  border-bottom: 1px solid #e7edf5;
}
.log-workspace .log-filter-panel {
  grid-template-columns: minmax(260px, 1.8fr) repeat(5, minmax(118px, .75fr));
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #e7edf5;
  background: #f8fafc;
}
.log-workspace .log-filter-range {
  grid-column: span 2;
}
.log-workspace .log-filter-actions {
  align-self: end;
}
.log-workspace .log-action-bar {
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 20px;
  border-bottom: 1px solid #e7edf5;
}
.log-workspace .log-action-bar > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.log-workspace .log-table-wrap {
  border: 0;
  border-radius: 0;
}
.log-workspace .pagination {
  margin: 0;
  padding: 14px 20px 18px;
  border-top: 1px solid #e7edf5;
}
.log-table {
  min-width: 1180px;
  table-layout: fixed;
}
.log-table th,
.log-table td {
  padding: 12px;
  vertical-align: top;
}
.log-table th:nth-child(1) { width: 126px; }
.log-table th:nth-child(2) { width: 76px; }
.log-table th:nth-child(3) { width: 132px; }
.log-table th:nth-child(4) { width: auto; }
.log-table th:nth-child(5) { width: 148px; }
.log-table th:nth-child(6) { width: 156px; }
.log-table th:nth-child(7) { width: 112px; }
.log-table tr.log-level-row-error td:first-child { box-shadow: inset 3px 0 0 #cf4d4d; }
.log-table tr.log-level-row-warn td:first-child { box-shadow: inset 3px 0 0 #d39a32; }
.log-level-pill.info { color: #315f83; background: #eaf3fa; }
.log-level-pill.success { color: #2f7455; background: #e8f5ed; }
.log-level-pill.warn { color: #8a5a12; background: #fff0cf; }
.log-level-pill.error { color: #fff; background: #c94e4b; }
.log-module-stack,
.log-context-cell,
.log-request-cell {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 5px;
  min-width: 0;
}
.log-module-stack span,
.log-module-stack em,
.log-context-cell span,
.log-context-cell em,
.log-request-cell span {
  min-width: 0;
  max-width: 100%;
  color: #718096;
  font-size: 11px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-context-cell strong {
  color: #24364b;
  font-size: 12px;
}
.log-event-cell {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.log-event-cell > strong {
  color: #17283d;
  font-size: 13px;
  font-weight: 800;
}
.log-event-cell > p {
  margin: 0;
  color: #43546a;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.log-event-cell > small {
  padding: 6px 8px;
  border-left: 2px solid #c94e4b;
  background: #fff5f4;
  color: #94403d;
  font-size: 11px;
  line-height: 1.5;
}
.log-event-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.log-event-facts span {
  color: #5d6e83;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.log-event-facts b {
  margin-right: 4px;
  color: #8a98aa;
  font-weight: 700;
}
.log-request-cell code {
  display: block;
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 5px;
  background: #f1f4f8;
  color: #52657b;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-record-state {
  color: #8492a5;
  font-size: 12px;
}
.log-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
@media (max-width: 1380px) {
  .log-workspace .log-filter-panel {
    grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(120px, 1fr));
  }
}
@media (max-width: 820px) {
  .log-workspace .log-filter-panel { grid-template-columns: 1fr 1fr; }
  .log-workspace .log-filter-keyword,
  .log-workspace .log-filter-range { grid-column: 1 / -1; }
  .log-workspace .log-action-bar { align-items: flex-start; flex-direction: column; }
}
.add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.add-row input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 11px;
}
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tag-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  font-weight: 800;
}
.tag-list span button { border: 0; background: transparent; color: var(--bad); font-weight: 900; }
.model-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.model-card, .channel-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.model-card.active {
  border-color: rgba(49, 87, 200, .48);
  background: linear-gradient(180deg, #f5f8ff 0%, #fff 100%);
}
.model-card header, .channel-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.model-card header div, .channel-card header div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.model-card header strong, .channel-card header strong {
  font-size: 15px;
}
.model-card header span, .channel-card header span {
  color: var(--muted);
  font-size: 12px;
}
.model-card header label, .channel-card header label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.channel-card {
  background: linear-gradient(180deg, #fbfdff 0%, #fff 100%);
}

.drawer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}
.drawer.open { pointer-events: auto; }
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.32);
}
.drawer-panel {
  position: absolute;
  inset: 12px 12px 12px auto;
  width: min(520px, calc(100vw - 24px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}
.drawer-panel header, .modal-panel header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}
.drawer-panel header span, .modal-panel header span { color: var(--muted); font-size: 12px; font-weight: 900; }
.drawer-panel h2, .modal-panel h2 { margin: 4px 0 0; }
.drawer-body, .modal-body { padding: 18px; overflow: auto; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15,23,42,.36);
}
.modal-panel {
  width: min(680px, 100%);
  max-height: 90vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}
.modal-panel.review-modal-panel {
  width: min(1040px, calc(100vw - 36px));
}
.modal-panel.monitor-modal-panel {
  width: min(1040px, calc(100vw - 36px));
}
.modal-panel.batch-review-modal-panel {
  width: min(820px, calc(100vw - 36px));
}
.modal-panel.log-cleanup-modal-panel {
  width: min(860px, calc(100vw - 36px));
}
.modal-panel.task-cleanup-modal-panel {
  width: min(860px, calc(100vw - 36px));
}
.modal-panel.amazon-credential-modal-panel {
  width: min(1160px, calc(100vw - 36px));
}
.modal-panel.confirm-modal-panel {
  width: min(520px, calc(100vw - 36px));
}
.modal-panel.profile-center-modal-panel {
  width: min(900px, calc(100vw - 36px));
}
.confirm-message {
  margin: 0 0 16px;
  color: #334155;
  line-height: 1.7;
}
.amazon-credential-modal {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.credential-status-rail {
  position: sticky;
  top: 0;
  display: grid;
  gap: 13px;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #10223f 0%, #172b4d 100%);
  color: #e8f1ff;
}
.credential-vault-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  color: #1f4f9a;
  font-weight: 900;
}
.credential-status-rail > strong {
  font-size: 18px;
}
.credential-status-rail > span {
  color: #b9c8df;
  font-size: 13px;
}
.credential-account-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.credential-account-heading > strong {
  font-size: 13px;
}
.credential-add-account {
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 6px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.credential-add-account:hover {
  background: rgba(255,255,255,.18);
}
.credential-account-list {
  display: grid;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
  padding-right: 2px;
}
.credential-account-item {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  background: rgba(255,255,255,.06);
  color: #e8f1ff;
  text-align: left;
  cursor: pointer;
}
.credential-account-item:hover {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
}
.credential-account-item.active {
  border-color: #78aaf3;
  background: rgba(54, 132, 235, .22);
}
.credential-account-item.is-cooling {
  border-color: rgba(248, 154, 91, .46);
}
.credential-account-item > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.credential-account-item strong,
.credential-account-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.credential-account-item strong { font-size: 12px; }
.credential-account-item small { color: #b9c8df; font-size: 11px; }
.credential-account-item em {
  padding: 2px 6px;
  border-radius: 4px;
  background: #fff;
  color: #24518f;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.credential-account-item em.cooldown {
  background: #fff0e5;
  color: #b84f12;
}
.nav[aria-busy="true"] button:disabled {
  opacity: 1;
  cursor: default;
}
.boot-count {
  min-width: 24px;
  color: #8fa2bc;
  letter-spacing: 0;
}
.boot-profile {
  cursor: default;
}
.boot-loading-panel {
  min-height: 220px;
  display: grid;
  align-content: center;
  gap: 28px;
}
.boot-loading-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: left;
}
.boot-loading-head .button-spinner {
  width: 22px;
  height: 22px;
  color: var(--brand);
}
.boot-loading-head strong {
  color: var(--ink);
  font-size: 16px;
}
.boot-loading-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.boot-loading-lines {
  width: min(620px, 82%);
  display: grid;
  gap: 10px;
  margin: 0 auto;
}
.boot-loading-lines i {
  height: 10px;
  border-radius: 5px;
  background: #e8edf5;
  animation: boot-loading-pulse 1.2s ease-in-out infinite alternate;
}
.boot-loading-lines i:nth-child(2) { width: 82%; }
.boot-loading-lines i:nth-child(3) { width: 64%; }
@keyframes boot-loading-pulse {
  from { opacity: .46; }
  to { opacity: 1; }
}
.credential-account-empty {
  padding: 12px 10px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 7px;
  color: #b9c8df;
  font-size: 12px;
  text-align: center;
}
.credential-status-list {
  display: grid;
  gap: 8px;
}
.credential-status-line {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
}
.credential-status-line span {
  color: #b9c8df;
  font-size: 12px;
}
.credential-status-line strong {
  color: #f8fbff;
  font-size: 12px;
  font-weight: 800;
}
.credential-status-line.ok {
  background: rgba(32, 201, 151, .16);
}
.credential-note {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.07);
}
.credential-note.bad {
  border-color: rgba(251, 113, 133, .42);
  background: rgba(251, 113, 133, .12);
}
.credential-note strong {
  font-size: 12px;
}
.credential-note span {
  color: #c8d5e8;
  font-size: 12px;
  line-height: 1.55;
}
.credential-config-pane {
  display: grid;
  gap: 14px;
}
.network-exit-view { gap: 14px; }
.network-exit-view .compact-panel { padding: 18px; }
.panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.panel-title-row > div { display: grid; gap: 4px; }
.panel-title-row strong { color: #172033; font-size: 15px; }
.panel-title-row span { color: #708097; font-size: 12px; line-height: 1.55; }
.network-exit-view td strong { display: block; color: #253247; font-size: 12px; }
.network-exit-view td small { display: block; margin-top: 3px; color: #7b8799; font-size: 11px; }
.network-exit-view td small.network-gateway-tag { color: #3157c8; }
.network-exit-view td small.network-gateway-warning { color: #c2410c; }
.network-exit-view tr.is-testing td { background: #f5f9ff; }
.network-exit-view .badge .button-spinner { width: 12px; height: 12px; border-width: 2px; }
.credential-section-login {
  border-color: #cfe0f1;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}
.credential-section-network {
  border-color: #d8e6f5;
  background: linear-gradient(180deg, #f7fbff 0%, #fff 100%);
}
.credential-section-mfa {
  border-color: #d8e0ee;
  background: linear-gradient(180deg, #fbfcff 0%, #fff 100%);
}
.tiny-button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}
.credential-source-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.credential-source-help,
.credential-inline-note {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #d8e3f1;
  border-radius: 12px;
  background: #f7fbff;
  color: #42526b;
  font-size: 12px;
  line-height: 1.55;
}
.credential-source-help strong {
  color: var(--ink);
  font-size: 13px;
}
.credential-inline-note.warn {
  border-color: #ecd29f;
  background: #fffaf0;
  color: #79521b;
}
.credential-source-config {
  display: grid;
  gap: 10px;
}
.credential-source-config.manual {
  margin-top: -2px;
}
.credential-test-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #d8e3f1;
  border-radius: 8px;
  background: #f8fafc;
}
.credential-test-result.ok {
  border-color: rgba(47, 125, 91, .26);
  background: #f2faf6;
}
.credential-test-result.bad {
  border-color: rgba(185, 74, 72, .26);
  background: #fff6f5;
}
.credential-test-result strong { color: #253247; font-size: 12px; }
.credential-test-result.ok strong { color: #276247; }
.credential-test-result.bad strong { color: #982f2d; }
.credential-test-result span { min-width: 0; color: #526174; font-size: 12px; line-height: 1.55; }
.credential-test-result em { color: #7b8799; font-size: 11px; font-style: normal; white-space: nowrap; }
.credential-footer-actions {
  grid-column: 1 / -1;
  position: sticky;
  bottom: -18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  margin: 0 -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid #e2e8f0;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
}
.profile-center {
  display: grid;
  gap: 16px;
}
.profile-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.profile-summary-card {
  position: sticky;
  top: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px;
  border: 1px solid #d9e4f2;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}
.profile-summary-card > strong {
  max-width: 100%;
  overflow: hidden;
  color: #0f172a;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-summary-card > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}
.profile-avatar-upload {
  width: 100%;
  min-height: 34px;
  display: grid;
  place-items: center;
  margin-top: 6px;
  border: 1px solid rgba(49,87,200,.25);
  border-radius: 10px;
  color: var(--brand);
  background: #f5f8ff;
  font-weight: 900;
  cursor: pointer;
}
.profile-avatar-upload input { display: none; }
.profile-avatar-upload em {
  font-size: 12px;
  font-style: normal;
}
.profile-summary-meta {
  width: 100%;
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.profile-main-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.profile-center .modal-section {
  border-radius: 14px;
}
.profile-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #d9e4f2;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
}
.profile-hero div:last-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.profile-hero span {
  color: #3157c8;
  font-size: 12px;
  font-weight: 950;
}
.profile-hero strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-hero em {
  color: #64748b;
  font-style: normal;
  font-weight: 800;
}
.profile-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.profile-info-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e0e7f2;
  border-radius: 10px;
  background: #fbfdff;
}
.profile-info-item span {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}
.profile-info-item strong {
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-edit-section .modal-grid,
.profile-password-section .modal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.profile-password-section .modal-grid .field:last-child {
  grid-column: span 2;
}
.profile-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.profile-permission-grid div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e0e7f2;
  border-radius: 12px;
  background: #fbfdff;
}
.profile-permission-grid span {
  color: #3157c8;
  font-size: 12px;
  font-weight: 950;
}
.profile-permission-grid p {
  margin: 7px 0 0;
  color: #334155;
  line-height: 1.6;
}
.profile-section-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.profile-footer-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}
.profile-footer-actions > span {
  min-width: 0;
}
.app.auth-app {
  min-height: 100vh;
  display: block;
  background:
    radial-gradient(circle at 28% 24%, rgba(49, 87, 200, .13), transparent 30%),
    radial-gradient(circle at 76% 66%, rgba(47, 125, 91, .08), transparent 28%),
    linear-gradient(135deg, #eef3fb 0%, #f8fafc 46%, #f1f5fb 100%);
  position: relative;
  overflow: hidden;
}
.app.auth-app::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(49, 87, 200, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 87, 200, .04) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 50% 44%, rgba(0,0,0,.62), transparent 72%);
}
.app.auth-app::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(980px, 72vw);
  height: min(560px, 52vh);
  transform: translate(-50%, -43%);
  pointer-events: none;
  border-radius: 42px;
  background: radial-gradient(circle at 45% 50%, rgba(255,255,255,.78), rgba(255,255,255,0) 70%);
  filter: blur(8px);
}
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 500px);
  grid-template-rows: auto auto;
  column-gap: 28px;
  row-gap: 14px;
  align-content: center;
  align-items: center;
  width: min(1180px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 42px 0 70px;
  position: relative;
  z-index: 1;
}
.auth-forgot-shell {
  width: min(516px, calc(100vw - 48px));
  grid-template-columns: 1fr;
  justify-items: center;
}
.auth-brand-panel,
.auth-card {
  border: 1px solid rgba(211, 222, 238, .92);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 28px 76px rgba(31, 45, 77, .11);
  backdrop-filter: blur(10px);
}
.auth-brand-panel {
  min-height: 560px;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  gap: 28px;
  padding: 34px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.90) 54%, rgba(239,245,255,.88) 100%);
}
.auth-brand-panel::before {
  content: "";
  position: absolute;
  inset: auto -1px -1px auto;
  width: 46%;
  height: 38%;
  border-radius: 80px 0 18px 0;
  background:
    linear-gradient(135deg, rgba(49, 87, 200, .06), rgba(49, 87, 200, .16));
  border-left: 1px solid rgba(49, 87, 200, .08);
  border-top: 1px solid rgba(49, 87, 200, .08);
}
.auth-brand-panel::after {
  content: "";
  position: absolute;
  inset: 22px 22px auto auto;
  width: 112px;
  height: 112px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(49, 87, 200, .075), rgba(47, 125, 91, .045));
  opacity: .7;
}
.auth-brand-mark {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #3157c8, #2446a9);
  box-shadow: 0 16px 30px rgba(49, 87, 200, .24);
  font-size: 24px;
  font-weight: 950;
}
.auth-brand-panel > div:not(.auth-brand-mark),
.auth-feature-grid {
  position: relative;
  z-index: 1;
}
.auth-brand-panel span,
.auth-card-head span {
  color: #3157c8;
  font-size: 12px;
  font-weight: 950;
}
.auth-brand-panel h1 {
  margin: 10px 0 0;
  color: #0f172a;
  font-size: 42px;
  line-height: 1.08;
  text-wrap: balance;
}
.auth-brand-panel p,
.auth-card-head p {
  max-width: 560px;
  margin: 12px 0 0;
  color: #516176;
  line-height: 1.7;
}
.auth-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.auth-brand-bottom {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}
.auth-feature-grid article {
  min-height: 110px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(221, 230, 242, .94);
  border-radius: 14px;
  background: rgba(251,253,255,.78);
  box-shadow: 0 12px 26px rgba(31, 45, 77, .045);
}
.auth-feature-grid strong {
  color: #0f172a;
  font-size: 14px;
}
.auth-feature-grid span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}
.auth-card {
  display: grid;
  gap: 18px;
  padding: 28px;
  background: rgba(255,255,255,.9);
}
.forgot-card {
  width: 100%;
  gap: 18px;
  padding: 26px;
  border-radius: 28px;
}
.forgot-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.forgot-card-head p {
  max-width: 390px;
}
.auth-back-button {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #24429a;
  background: #f8fbff;
}
.auth-card-head h2 {
  margin: 7px 0 0;
  color: #0f172a;
  font-size: 26px;
}
.auth-form {
  display: grid;
  gap: 14px;
}
.auth-password-input,
.modal-password-input {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-password-input input,
.modal-password-input input {
  width: 100%;
  padding-right: 46px;
}
.auth-password-toggle {
  position: absolute;
  right: 8px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #64748b;
  background: transparent;
  cursor: pointer;
}
.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
  color: #24429a;
  background: #eef4ff;
  outline: none;
}
.auth-password-toggle svg {
  width: 18px;
  height: 18px;
}
.forgot-card .auth-form {
  gap: 16px;
}
.auth-form-row,
.auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.auth-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.auth-submit {
  width: 100%;
  min-height: 44px;
}
.auth-local-note {
  margin: -2px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}
.auth-message {
  padding: 11px 12px;
  border: 1px solid #d9e4f2;
  border-radius: 12px;
  color: #334155;
  background: #f8fbff;
  line-height: 1.55;
}
.auth-message.ok {
  color: #236247;
  border-color: rgba(47,125,91,.22);
  background: #f2fbf6;
}
.auth-message.bad {
  color: #9f2f2f;
  border-color: rgba(185,74,72,.22);
  background: #fff5f5;
}
.auth-reset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.reset-method-title {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}
.reset-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.reset-method-card {
  min-height: 68px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid #d9e4f2;
  border-radius: 16px;
  color: #334155;
  background: #fbfdff;
  text-align: left;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .16s ease;
}
.reset-method-card strong {
  color: #1f2937;
  font-size: 14px;
}
.reset-method-card span {
  color: #64748b;
  font-size: 12px;
}
.reset-method-card.active {
  border-color: rgba(49, 87, 200, .62);
  background: #eef4ff;
  box-shadow: 0 0 0 3px rgba(49, 87, 200, .08), 0 14px 30px rgba(49, 87, 200, .10);
}
.reset-method-card:disabled {
  cursor: not-allowed;
  opacity: .62;
  box-shadow: none;
}
.forgot-contact-field input {
  min-height: 48px;
  border-radius: 15px;
  background: #fbfdff;
  font-weight: 850;
}
.forgot-contact-field input::placeholder {
  color: #98a3b3;
  font-weight: 850;
}
.forgot-warning {
  padding: 12px 14px;
  border: 1px solid #f4c84f;
  border-radius: 14px;
  color: #7a4c00;
  background: #fffaf0;
  font-size: 12px;
  line-height: 1.7;
}
.forgot-card .auth-actions .primary-button {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(49, 87, 200, .24);
}
.forgot-card .auth-actions .ghost-button {
  min-width: 112px;
}
.auth-code-target {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #c8d7ff;
  border-radius: 12px;
  color: #24429a;
  background: #f5f8ff;
}
.auth-code-target strong {
  font-size: 13px;
}
.auth-code-target span {
  color: #516176;
  font-size: 12px;
  line-height: 1.6;
}
.auth-config-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.auth-method-settings {
  display: grid;
  gap: 10px;
}
.auth-method-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(150px, .7fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e0e7f2;
  border-radius: 13px;
  background: #fbfdff;
}
.auth-method-line.active {
  border-color: rgba(49, 87, 200, .24);
  background: #f5f8ff;
}
.auth-method-line input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}
.auth-method-line span {
  display: grid;
  gap: 4px;
}
.auth-method-line strong {
  color: #111827;
  font-size: 13px;
}
.auth-method-line em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}
.auth-method-line select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 9px;
  background: #fff;
}
.auth-help-block {
  margin-top: 14px;
}
.app.logged-out {
  grid-template-columns: minmax(0, 1fr);
}
.app.logged-out .sidebar {
  display: none;
}
.logout-panel {
  min-height: min(620px, calc(100vh - 180px));
  display: grid;
  place-items: center;
}
.logout-card {
  width: min(460px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 34px;
  border: 1px solid #d9e4f2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 64px rgba(15, 23, 42, .08);
  text-align: center;
}
.logout-card span {
  color: #3157c8;
  font-size: 12px;
  font-weight: 950;
}
.logout-card h2 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
}
.logout-card p {
  max-width: 320px;
  margin: 0 0 8px;
  color: #64748b;
  line-height: 1.7;
}
.log-cleanup-modal {
  display: grid;
  gap: 14px;
}
.cleanup-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cleanup-preview-box {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px dashed #d1dbe9;
  border-radius: 12px;
  background: #f8fafc;
}
.cleanup-preview-box.has-result {
  border-style: solid;
  border-color: #c7ddff;
  background: #f7fbff;
}
.cleanup-preview-box strong {
  color: var(--ink);
  font-size: 13px;
}
.cleanup-preview-box span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.monitor-import-result-panel {
  max-width: 980px;
}
.monitor-import-result {
  display: grid;
  gap: 16px;
}
.monitor-import-summary {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(90px, .8fr));
  gap: 10px;
}
.monitor-import-summary.has-error .mini-stat:last-child {
  border-color: rgba(185, 74, 72, .25);
  background: #fff7f7;
}
.import-result-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}
.import-result-list.compact {
  max-height: 220px;
}
.import-result-item {
  display: grid;
  grid-template-columns: 86px 110px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #fff;
}
.import-result-item strong {
  color: #16345f;
  font-size: 12px;
}
.import-result-item span {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}
.import-result-item p {
  margin: 0;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.5;
}
.import-result-item em {
  display: inline-block;
  max-width: 260px;
  margin-left: 8px;
  color: #b45309;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}
.import-result-item small {
  grid-column: 3;
  color: #64748b;
  line-height: 1.45;
}
.import-result-more {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 12px;
}
.log-cleanup-actions {
  position: sticky;
  bottom: -18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  margin: 0 -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
}
.batch-review-editor {
  display: grid;
  gap: 14px;
}
.batch-review-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid #d8e1f0;
  border-radius: 14px;
  background: #f8fbff;
}
.batch-review-summary div {
  display: grid;
  gap: 5px;
}
.batch-review-summary strong {
  color: var(--ink);
}
.batch-review-summary span,
.batch-review-summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}
.batch-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.batch-review-field {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  opacity: .72;
  transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}
.batch-review-field.enabled {
  border-color: rgba(49, 87, 200, .3);
  background: #f8fbff;
  opacity: 1;
}
.batch-review-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}
.batch-review-switch input {
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
}
.batch-review-control .field {
  margin: 0;
}
.batch-review-control .field span {
  display: none;
}
.batch-review-control input,
.batch-review-control select {
  width: 100%;
}
.review-modal-view,
.review-modal-edit,
.monitor-modal-edit {
  display: grid;
  gap: 16px;
}
.review-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 18px;
  border: 1px solid #d8e1f0;
  border-radius: 14px;
  background: #f8fbff;
}
.review-hero div:first-child {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.review-hero span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.review-hero strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.35;
}
.review-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.review-hero-badges span {
  padding: 6px 9px;
  border: 1px solid rgba(49,87,200,.16);
  border-radius: 999px;
  color: var(--brand);
  background: var(--brand-soft);
}
.review-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
  align-items: start;
}
.review-content-card,
.review-meta-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.review-content-card {
  padding: 18px;
}
.review-content-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.review-content-card header strong,
.translation-box strong {
  color: var(--ink);
}
.review-content-card header span {
  color: var(--muted);
  font-size: 12px;
}
.review-content-card p {
  margin: 0;
  color: #1f2937;
  line-height: 1.85;
  white-space: pre-wrap;
}
.translation-box {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  background: #f8fafc;
}
.translation-box span {
  color: #475569;
  line-height: 1.7;
  white-space: pre-wrap;
}
.review-meta-card {
  display: grid;
  padding: 8px;
}
.review-meta-line {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
.review-meta-line:last-child { border-bottom: 0; }
.review-meta-line span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.review-meta-line strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8e1f0;
  border-radius: 14px;
  background: #f8fbff;
}
.review-edit-grid .span-2,
.review-edit-grid textarea {
  grid-column: 1 / -1;
}
.review-edit-grid .field:has(.review-title-field) {
  grid-column: 1 / -1;
}
.monitor-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.monitor-edit-grid .modal-section {
  margin: 0;
  border-radius: 14px;
}
.monitor-modal-section-content,
.monitor-modal-section-business {
  grid-column: 1 / -1;
}
.monitor-modal-section-basic {
  background: #fbfdff;
}
.monitor-modal-section-link {
  background: #f8fbff;
}
.monitor-modal-section-content {
  background: #fffdf7;
}
.monitor-modal-section-business {
  background: #fcfbff;
}
.monitor-edit-grid .modal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.monitor-edit-grid textarea,
.monitor-edit-grid .span-2 {
  grid-column: 1 / -1;
}
.monitor-hero .review-hero-badges span:first-child {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: rgba(169,111,25,.2);
}
.monitor-readonly-status {
  grid-column: 1 / -1;
  margin: 0;
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dbe6f5;
  border-radius: 12px;
  background: #f8fafc;
}
.monitor-readonly-status > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
.monitor-readonly-status > div > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}
.monitor-readonly-status p {
  margin: 0;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.monitor-drop-confirm {
  display: grid;
  gap: 14px;
}
.drop-confirm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(185, 28, 28, .18);
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7f7 0%, #fff 72%);
}
.drop-confirm-hero > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.drop-confirm-hero span {
  color: #b91c1c;
  font-size: 12px;
  font-weight: 950;
}
.drop-confirm-hero strong {
  overflow: hidden;
  color: #111827;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drop-confirm-hero em {
  max-width: 70ch;
  color: #64748b;
  font-style: normal;
  line-height: 1.6;
}
.drop-confirm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.drop-confirm-grid .readonly-field {
  margin: 0;
}
.drop-confirm-grid .readonly-field em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drop-confirm-warranty {
  margin: 0;
  border-color: rgba(37, 99, 235, .18);
  border-radius: 14px;
  background: linear-gradient(135deg, #f5f8ff 0%, #fff 76%);
}
.drop-confirm-warranty .field {
  max-width: 360px;
  margin: 0;
}
.drop-confirm-warranty.no-warranty {
  border-color: rgba(100, 116, 139, .18);
  background: #f8fafc;
}
.drop-confirm-billing-note {
  margin-top: 10px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}
.drop-confirm-note {
  margin: 0;
  border-radius: 14px;
  background: #fbfdff;
}
.drop-confirm-note textarea {
  min-height: 96px;
}
.translation-tool {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #cdd9ef;
  border-radius: 14px;
  background: #fff;
}
.translation-tool header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.translation-tool header div {
  display: grid;
  gap: 4px;
}
.translation-tool header strong {
  color: var(--ink);
}
.translation-tool header span,
.translate-progress em {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.translation-tool p {
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  color: #334155;
  background: #f8fafc;
  line-height: 1.7;
  white-space: pre-wrap;
}
.translation-result-stack {
  display: grid;
  gap: 8px;
}
.translation-result-stack p strong {
  margin-right: 4px;
  color: #111827;
}
.translation-tool .empty-translation {
  color: var(--muted);
  border: 1px dashed var(--line);
  background: #fbfdff;
}
.translation-tool.working {
  border-color: rgba(49,87,200,.35);
  background: #f7f9ff;
}
.translate-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--brand-soft);
}
.translate-progress span {
  width: 16px;
  height: 16px;
  grid-row: span 2;
  border: 2px solid rgba(49,87,200,.22);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.translate-progress strong {
  color: var(--brand);
  font-size: 13px;
}
.column-settings {
  display: grid;
  gap: 14px;
}
.column-settings p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.column-settings-list {
  display: grid;
  gap: 8px;
}
.column-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.column-settings-row.muted {
  color: var(--muted);
  background: #f8fafc;
}
.column-settings-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}
.column-settings-row div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.library-bilingual-cell {
  display: grid;
  gap: 5px;
  min-width: 0;
  cursor: default;
}
.library-bilingual-cell strong,
.library-bilingual-cell span,
.library-bilingual-cell em {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.library-bilingual-cell em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}
.library-bilingual-cell em.empty {
  color: var(--muted);
}
.review-snippet {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}
.review-cell { min-width: 0; }
.title-cell { min-width: 0; }
.library-plain-preview {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  cursor: default;
}
.library-tooltip {
  position: fixed;
  z-index: 75;
  width: min(560px, calc(100vw - 28px));
  max-height: min(520px, calc(100vh - 28px));
  overflow: auto;
  padding: 14px;
  border: 1px solid #d7e0ee;
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 26px 70px rgba(15, 23, 42, .22);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.library-tooltip[hidden] {
  display: none;
}
.library-tooltip header {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}
.library-tooltip section {
  display: grid;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.library-tooltip section + section {
  margin-top: 10px;
}
.library-tooltip strong {
  color: var(--brand);
  font-size: 11px;
  font-weight: 950;
}
.library-tooltip p {
  margin: 0;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.export-modal-panel {
  width: min(760px, calc(100vw - 36px));
}
.export-modal-layout {
  display: grid;
  gap: 14px;
}
.export-template-picker {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid #d8e1f0;
  border-radius: 14px;
  background: #f8fbff;
}
.export-template-picker .field {
  margin: 0;
}
.export-template-note {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
}
.export-template-note strong {
  font-size: 14px;
}
.export-template-note span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.export-range-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 12px;
  align-items: end;
}
.export-field-count {
  min-height: 66px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.export-field-count span,
.export-field-count em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.export-field-count strong {
  font-size: 28px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.export-field-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.export-field-panel header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}
.export-field-panel header div {
  display: grid;
  gap: 4px;
}
.export-field-panel header span,
.export-field-panel header small {
  color: var(--muted);
  line-height: 1.45;
}
.export-field-panel header small {
  max-width: 280px;
  text-align: right;
}
.field-order { display: grid; gap: 8px; }
.field-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.field-order-row button {
  min-width: 30px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.export-field-order {
  max-height: min(46vh, 420px);
  overflow: auto;
  padding-right: 2px;
}
.export-field-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  background: #f8fafc;
}
.export-field-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.export-field-row div {
  display: flex;
  gap: 6px;
}
.export-field-index {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 12px;
  font-weight: 900;
}
.export-add-fields {
  padding: 11px 12px;
  border: 1px dashed #cbd7e7;
  border-radius: 14px;
  background: #fbfdff;
}
.export-add-fields summary {
  cursor: pointer;
  font-weight: 900;
}
.export-add-fields .tag-list {
  margin-top: 10px;
}
.export-save-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border-radius: 14px;
  background: #f6f8fb;
}
.export-save-row .field {
  margin: 0;
}
.export-actions {
  position: sticky;
  bottom: -18px;
  margin: 0 -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
}
.icon-button.danger { color: var(--bad); }
button:disabled {
  cursor: not-allowed;
  opacity: .52;
}
button:disabled:hover { transform: none; }
.toast-stack {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 80;
  display: grid;
  gap: 10px;
  justify-items: center;
  pointer-events: none;
}
.toast {
  width: min(480px, calc(100vw - 36px));
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
  pointer-events: auto;
  animation: toastPop .18s ease-out both;
}
.toast strong, .toast span { display: block; }
.toast strong { font-size: 15px; }
.toast span { margin-top: 6px; color: var(--muted); line-height: 1.6; }
.toast.bad { border-color: rgba(185,74,72,.28); background: #fff7f7; }
.toast.bad strong { color: var(--bad); }
@keyframes toastPop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1180px) {
  .app { grid-template-columns: 232px minmax(0, 1fr); }
  .app.sidebar-collapsed { grid-template-columns: 74px minmax(0, 1fr); }
  .sidebar { position: sticky; height: 100vh; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-hero,
  .dashboard-filter-panel,
  .dashboard-activity-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filters, .filters.compact, .filters.library-filters, .library-filter-bar, .filter-more-popover, .grid-2, .grid-3, .card-grid, .channel-grid, .channel-console, .channel-console-stats, .config-editor, .business-config-grid, .settings-section-grid, .settings-section-grid.two, .template-grid, .provider-row, .provider-row.compact, .route-card .form-grid, .monitor-config-head, .monitor-config-summary, .monitor-rule-layout, .monitor-rule-main, .monitor-rule-main.compact, .monitor-rule-note, .monitor-pace-grid, .monitor-pace-card .form-grid.compact, .monitor-pace-policy, .amazon-engine-card, .amazon-engine-stats, .amazon-engine-settings, .amazon-session-meta, .amazon-session-action-grid, .role-permission-summary, .user-role-preview-grid, .route-default-card, .route-default-grid, .monitor-template-layout, .route-line, .route-row, .route-table-head, .route-compact-grid, .sms-config-form, .modal-grid, .backend-status-card, .backend-status-resources, .review-detail-layout, .review-hero, .review-edit-grid, .monitor-edit-grid, .batch-review-grid, .batch-generation-layout, .batch-product-grid, .source-detail-grid, .export-template-picker, .export-range-row, .export-field-panel header, .export-save-row, .export-template-summary, .maintenance-overview, .maintenance-overview.compact, .cleanup-summary-strip, .backup-summary-grid, .backup-policy-strip, .ai-run-strip, .ai-run-controls, .ai-provider-editor, .ai-provider-workbench, .ai-model-provider-note, .ai-console-head, .ai-route-table-head, .ai-route-config-row, .ai-resource-grid, .ai-resource-body.provider, .ai-resource-body.model, .amazon-credential-modal, .credential-source-layout { grid-template-columns: 1fr; }
  .library-filter-bar.monitor-history-filter-bar { grid-template-columns: 1fr; }
  .monitor-history-filter-bar .filter-inline-actions { justify-content: flex-start; }
  .monitor-history-filter-bar .filter-inline-actions .compact-clear-button { flex: 1; }
  .role-permission-table { overflow-x: auto; }
  .role-permission-head,
  .role-permission-row { min-width: 760px; }
  .user-role-tip { align-items: stretch; flex-direction: column; }
  .log-detail { flex-basis: 360px; }
  .ai-console-health,
  .ai-route-tools,
  .ai-section-footer {
    justify-content: flex-start;
  }
  .ai-route-tools .field { width: min(240px, 100%); }
  .export-template-head,
  .export-template-row {
    grid-template-columns: minmax(160px, .9fr) 82px minmax(220px, 1.2fr) 58px 132px;
  }
  .filter-more-popover { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
  .monitor-config-switch { align-items: stretch; flex-direction: column; }
  .route-card header { grid-template-columns: 1fr; align-items: stretch; }
}
@media (max-width: 980px) {
  .log-row-head, .log-row-body { flex-wrap: wrap; align-items: flex-start; }
  .log-row-body p { flex-basis: 100%; }
  .log-detail {
    flex: 1 1 100%;
    padding: 4px 0 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
  }
  .log-row-meta {
    justify-items: start;
    padding-left: 0;
    border-left: 0;
  }
}
@media (max-width: 1180px) {
  .admin-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-summary.compact, .config-toolbar { grid-template-columns: 1fr; }
  .task-stage-grid { grid-template-columns: 1fr; }
  .workflow-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-strip > div { grid-column: 1 / -1; }
  .task-stage-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 760px) {
  .auth-shell {
    width: min(100% - 24px, 520px);
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 12px;
    padding: 18px 0;
  }
  .system-footer-info.auth {
    grid-column: 1;
    padding: 2px 10px 0;
  }
  .auth-forgot-shell { width: min(100% - 24px, 520px); }
  .auth-brand-panel {
    min-height: auto;
    padding: 22px;
  }
  .auth-feature-grid,
  .reset-method-grid,
  .auth-config-summary,
  .auth-reset-grid {
    grid-template-columns: 1fr;
  }
  .auth-card {
    padding: 20px;
  }
  .auth-form-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .generation-failure-panel { grid-template-columns: auto minmax(0, 1fr); }
  .generation-failure-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .forgot-card-head,
  .auth-method-line {
    grid-template-columns: 1fr;
  }
  .forgot-card-head {
    flex-direction: column;
  }
  .app, .app.sidebar-collapsed { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .sidebar-collapsed .sidebar { position: static; height: auto; width: 100%; min-width: 0; }
  .sidebar-collapsed .brand { justify-content: flex-start; padding: 14px 14px 13px 17px; }
  .sidebar-collapsed .brand-mark { display: grid; }
  .sidebar-collapsed .brand-copy, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-chevron, .sidebar-collapsed .sidebar-footer { display: block; }
  .sidebar-collapsed .brand-copy { flex: 1; }
  .sidebar-collapsed .sidebar-toggle { display: none; }
  .sidebar-collapsed .nav-dashboard, .sidebar-collapsed .nav-parent { justify-content: flex-start; padding: 0 17px; }
  .sidebar-collapsed .nav-children,
  .sidebar-collapsed .nav-group.expanded .nav-children { display: none !important; }
  .workspace { padding: 10px 12px 30px; }
  .topbar, .page-head, .panel-head { align-items: stretch; flex-direction: column; }
  .route-default-card-v2 > header,
  .monitor-template-card > header {
    align-items: stretch;
    flex-direction: column;
  }
  .monitor-template-card > header .row-actions {
    justify-content: flex-start;
  }
  .topbar-spacer { display: none; }
  .user-switch,
  .profile-button { width: 100%; }
  .profile-copy strong { max-width: none; }
  .profile-layout,
  .profile-info-grid,
  .profile-permission-grid,
  .profile-edit-section .modal-grid,
  .profile-password-section .modal-grid { grid-template-columns: 1fr; }
  .profile-summary-card { position: static; }
  .profile-password-section .modal-grid .field:last-child { grid-column: auto; }
  .profile-section-actions,
  .profile-footer-actions {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }
  .metric-grid, .dashboard-hero, .dashboard-filter-panel, .dashboard-filter-grid, .dashboard-metric-grid, .dashboard-activity-grid, .form-grid, .form-grid.three, .stepper, .task-stage-side, .admin-summary, .permission-grid, .workflow-strip, .monitor-overview, .amazon-engine-card, .amazon-engine-stats, .amazon-engine-settings, .role-permission-summary, .user-role-preview-grid, .backup-summary-grid, .backup-policy-strip, .ai-run-strip, .ai-console-head, .ai-route-table-head, .ai-route-config-row, .ai-resource-grid, .ai-resource-body.provider, .ai-resource-body.model { grid-template-columns: 1fr; }
  .dashboard-hero-main,
  .dashboard-next-panel {
    min-height: 0;
    padding: 16px;
  }
  .dashboard-hero-main h2 { font-size: 24px; }
  .dashboard-filter-panel { align-items: stretch; }
  .dashboard-list-line {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .dashboard-action-list {
    grid-template-columns: 1fr;
  }
  .dashboard-action {
    min-height: 54px;
  }
  .dashboard-list-line aside {
    justify-items: start;
  }
  .dashboard-list-line small {
    max-width: 100%;
  }
  .ai-provider-section header,
  .ai-panel-actions,
  .ai-model-toolbar,
  .ai-provider-card-head {
    align-items: stretch;
    flex-direction: column;
  }
  .ai-model-head-actions {
    justify-content: flex-start;
  }
  .ai-panel-actions .ghost-button,
  .ai-panel-actions .primary-button,
  .ai-console-health .ghost-button,
  .ai-route-tools .field,
  .ai-section-footer .primary-button,
  .ai-region-actions .ghost-button,
  .ai-region-actions .primary-button,
  .ai-model-head-actions .ghost-button {
    width: 100%;
  }
  .export-template-head { display: none; }
  .export-template-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
  }
  .export-template-row .row-actions {
    justify-content: flex-start;
  }
  .workflow-strip > div { grid-column: auto; }
  .table-context, .pagination { align-items: stretch; flex-direction: column; }
  .log-row-meta {
    justify-items: start;
    min-width: 0;
  }
  .pagination div { justify-content: space-between; }
  .page-actions, .footer-actions { justify-content: flex-start; }
  .panel { padding: 14px; }
  .task-stage-panel { padding: 0; }
  .task-stage-main, .task-stage-side { padding: 14px; }
  .advanced-settings summary {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 12px 14px;
  }
  .advanced-settings summary small { text-align: left; }
  .thumb-wrap { width: 72px; height: 72px; }
}

@media (max-width: 1120px) {
  .system-update-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-update-details,
  .system-update-command { grid-template-columns: 1fr; }
  .system-update-command > .ghost-button { justify-self: start; }
}

@media (max-width: 680px) {
  .system-update-head .row-actions { width: 100%; }
  .system-update-head .row-actions > button { flex: 1 1 0; }
  .system-update-summary { grid-template-columns: 1fr; }
  .system-update-source-card,
  .system-update-flow-card { padding: 14px; }
  .system-update-source-card dl > div { grid-template-columns: 1fr; gap: 4px; }
  .system-update-source-card dd { white-space: normal; overflow-wrap: anywhere; }
  .system-update-note { display: grid; gap: 3px; }
  .system-update-agent { align-items: stretch; flex-direction: column; }
  .system-update-agent-actions { width: 100%; }
  .system-update-agent-actions > button { flex: 1 1 0; }
  .system-update-job-head { align-items: flex-start; flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}