:root {
  --ink: #15201b;
  --muted: #6d746f;
  --line: #d7deda;
  --paper: #eef2ef;
  --panel: #ffffff;
  --green: #146c43;
  --mint: #77f0d0;
  --cyan: #0aa6a6;
  --red: #bd3d2a;
  --amber: #bd7b16;
  --blue: #276b8f;
  --shadow: 0 18px 50px rgba(24, 36, 30, .12);
}

/* V74 LIUMI SINAN: single final visual layer, modeled as an operations command system. */
:root {
  --sinan-bg: #07110f;
  --sinan-panel: rgba(14, 31, 28, .88);
  --sinan-panel-2: rgba(18, 41, 37, .82);
  --sinan-border: rgba(137, 238, 214, .20);
  --sinan-text: #f3fffa;
  --sinan-muted: rgba(218, 246, 238, .66);
  --sinan-dim: rgba(218, 246, 238, .42);
  --sinan-mint: #8ef4d8;
  --sinan-blue: #77a7ff;
  --sinan-gold: #f0c85a;
  --sinan-red: #ff7a68;
}

body {
  background: var(--sinan-bg);
}

.login-screen.hidden,
.app-shell.hidden {
  display: none !important;
}

.login-screen:not(.hidden) {
  position: relative;
  min-height: 100vh;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 28px;
  padding: 30px 38px;
  overflow: hidden;
  color: var(--sinan-text);
  background:
    linear-gradient(90deg, rgba(142, 244, 216, .045) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(180deg, rgba(142, 244, 216, .04) 1px, transparent 1px) 0 0 / 36px 36px,
    radial-gradient(circle at 74% 12%, rgba(119, 167, 255, .16), transparent 30%),
    radial-gradient(circle at 14% 80%, rgba(142, 244, 216, .12), transparent 26%),
    #06100f;
}

.login-bg {
  position: absolute;
  inset: 18px;
  z-index: 0;
  border: 1px solid var(--sinan-border);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(5, 13, 12, .70), rgba(5, 13, 12, .22) 52%, rgba(5, 13, 12, .76)),
    linear-gradient(180deg, rgba(5, 13, 12, .18), rgba(5, 13, 12, .56)),
    url("/static/login-mountain.jpg") center / contain no-repeat,
    #07110f !important;
  filter: saturate(.86) hue-rotate(130deg) brightness(.82) contrast(1.08);
  transform: none !important;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, .55), 0 36px 120px rgba(0, 0, 0, .48);
}

.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 42%, rgba(142, 244, 216, .10) 43%, transparent 54%),
    radial-gradient(circle at 18% 18%, rgba(142, 244, 216, .14), transparent 22%);
}

.login-copy,
.login-command-board,
.login-card {
  position: relative;
  z-index: 2;
}

.login-copy {
  align-self: end;
  max-width: 650px;
  padding: 0 0 54px 22px;
  text-shadow: 0 16px 44px rgba(0, 0, 0, .48);
}

.login-copy p {
  margin: 0 0 10px;
  color: var(--sinan-mint);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.login-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(46px, 7vw, 88px);
  line-height: .95;
  letter-spacing: 0;
}

.login-copy span {
  display: inline-flex;
  margin-top: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(142, 244, 216, .28);
  border-radius: 8px;
  color: var(--sinan-muted);
  background: rgba(8, 25, 23, .72);
  backdrop-filter: blur(14px);
}

.login-command-board {
  position: absolute;
  left: 60px;
  right: 460px;
  bottom: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.login-command-board > div,
.login-card {
  border: 1px solid var(--sinan-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 45, 41, .80), rgba(9, 23, 21, .78)),
    radial-gradient(circle at top right, rgba(142, 244, 216, .12), transparent 36%);
  box-shadow: 0 22px 72px rgba(0, 0, 0, .36);
  backdrop-filter: blur(18px);
}

.login-command-board > div {
  padding: 14px 16px;
}

.login-command-board span,
.login-command-board small {
  display: block;
  color: var(--sinan-muted);
  font-size: 12px;
}

.login-command-board strong {
  display: block;
  margin: 4px 0 9px;
  color: #fff;
  font-size: 17px;
}

.login-command-board i {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(218, 246, 238, .12);
}

.login-command-board b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sinan-mint), var(--sinan-gold));
}

.login-card {
  align-self: center;
  margin: 0;
  padding: 30px;
  color: var(--sinan-text);
}

.login-card h2 {
  color: #fff;
}

.login-card label,
.login-card .eyebrow {
  color: var(--sinan-mint);
}

.login-card input {
  color: #fff;
  border-color: rgba(142, 244, 216, .20);
  background: rgba(5, 15, 14, .78);
}

.login-submit,
.app-shell .primary {
  color: #05120f !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--sinan-mint), #d7fff1) !important;
}

body:has(.app-shell:not(.hidden)) {
  overflow: hidden !important;
  background: var(--sinan-bg) !important;
}

.app-shell:not(.hidden) {
  height: 100vh;
  display: grid !important;
  grid-template-columns: 286px minmax(0, 1fr);
  overflow: hidden;
  color: var(--sinan-text);
  background:
    linear-gradient(90deg, rgba(142, 244, 216, .035) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(180deg, rgba(142, 244, 216, .032) 1px, transparent 1px) 0 0 / 34px 34px,
    radial-gradient(circle at 58% 0, rgba(142, 244, 216, .10), transparent 28%),
    #06100f;
}

.app-shell .side {
  height: 100vh;
  overflow-y: auto;
  padding: 16px 14px;
  border-right: 1px solid var(--sinan-border);
  background:
    linear-gradient(180deg, rgba(7, 18, 16, .96), rgba(5, 12, 11, .98)),
    radial-gradient(circle at 90% 12%, rgba(142, 244, 216, .12), transparent 24%);
}

.brand {
  padding: 4px 4px 14px;
  border-bottom: 1px solid rgba(142, 244, 216, .12);
}

.brand h1 {
  color: #fff;
}

.brand p,
.side p,
.side span,
.side small {
  color: var(--sinan-muted);
}

.side-brief,
.side .panel,
.side-kpis div,
.side-playbook {
  border: 1px solid rgba(142, 244, 216, .16) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(18, 41, 37, .78), rgba(8, 22, 20, .74)) !important;
  box-shadow: none !important;
}

.system-rail {
  display: grid;
  gap: 8px;
}

.system-rail button,
.system-rail a,
.side-function-map button {
  min-height: 50px;
  border: 1px solid rgba(142, 244, 216, .14) !important;
  border-radius: 8px !important;
  color: var(--sinan-muted) !important;
  background: rgba(12, 29, 26, .72) !important;
}

.system-rail button.active,
.side-function-map button.active {
  color: #05120f !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--sinan-mint), #cffff0) !important;
}

.system-rail button.active *,
.side-function-map button.active * {
  color: #05120f !important;
}

.app-shell .main {
  height: 100vh;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 28px;
  color: var(--sinan-text);
  background: transparent !important;
}

.app-shell .topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 70px;
  margin: -20px -24px 18px;
  padding: 14px 24px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--sinan-border);
  background: rgba(6, 16, 15, .88) !important;
  backdrop-filter: blur(20px);
}

.topbar .eyebrow {
  color: var(--sinan-mint) !important;
}

.topbar h2 {
  margin: 0;
  color: #fff !important;
  font-size: 28px;
  line-height: 1.1;
}

.topline {
  margin-top: 4px;
  color: var(--sinan-muted) !important;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-actions .status {
  display: flex;
  gap: 8px;
}

.top-actions .status span {
  padding: 8px 11px;
  border: 1px solid rgba(142, 244, 216, .14);
  border-radius: 999px;
  color: var(--sinan-muted) !important;
  background: rgba(13, 30, 27, .72);
}

.session-strip {
  display: none !important;
}

.hub-mode-tabs {
  display: none !important;
}

.hub-pane-hidden {
  display: none !important;
}

.app-shell main > section:not(.hub-pane-hidden),
.app-shell main > div:not(.hub-pane-hidden) {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.command-cockpit,
.command-deck,
.pk-rank-panel,
.workspace,
.user-output,
.experience-engine,
.data-ingestion,
.operation-task-center,
.role-action-center,
.dispatch-queue,
.action-writeback,
.recovery-sla,
.feishu-sla,
.dianjin-engine,
.automation-scheduler,
.automation-runner,
.business-collection,
.business-health,
.business-gap,
.connector-center,
.meituan-fetch,
.meituan-writeback {
  border: 1px solid rgba(142, 244, 216, .18) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(17, 42, 38, .78), rgba(7, 21, 19, .82)),
    radial-gradient(circle at 52% 0, rgba(142, 244, 216, .08), transparent 36%) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .28) !important;
}

.command-deck {
  min-height: 430px;
}

.app-shell section,
.app-shell article,
.app-shell .panel,
.app-shell .detail,
.app-shell .metric,
.app-shell .store-card,
.app-shell .recent-card,
.app-shell .playbook,
.app-shell .pk-rank-card,
.app-shell .cockpit-panel {
  color: var(--sinan-text) !important;
  border-color: rgba(142, 244, 216, .16) !important;
  background: linear-gradient(180deg, rgba(18, 41, 37, .80), rgba(8, 22, 20, .78)) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .22) !important;
}

.app-shell h1,
.app-shell h2,
.app-shell h3,
.app-shell h4,
.app-shell strong {
  color: #fff !important;
}

.app-shell p,
.app-shell small,
.app-shell span,
.app-shell label {
  color: var(--sinan-muted) !important;
}

.cockpit-kpis strong,
.metric strong,
.pk-rank-self strong,
.pk-rank-kpi strong {
  color: var(--sinan-mint) !important;
}

.app-shell .workspace {
  height: calc(100vh - 118px);
  min-height: 590px;
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
}

.queue-panel,
.detail {
  min-height: 0;
  overflow: hidden;
}

.queue-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.store-list {
  height: 100%;
  max-height: none !important;
  overflow-y: auto;
  padding-right: 4px;
}

.store-card {
  width: 100%;
  text-align: left;
}

.store-card.active {
  border-color: rgba(142, 244, 216, .82) !important;
  background: linear-gradient(135deg, rgba(142, 244, 216, .18), rgba(13, 30, 27, .88)) !important;
}

.detail {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.tabs {
  overflow-x: auto;
  padding: 10px 0;
  border-bottom: 1px solid rgba(142, 244, 216, .12);
}

.tabs button {
  white-space: nowrap;
}

.tabs button.active {
  color: #05120f !important;
  background: linear-gradient(135deg, var(--sinan-mint), #d7fff1) !important;
}

.tabpage.active {
  min-height: 0;
  overflow-y: auto;
  padding: 14px 2px 4px;
}

.app-shell button,
.app-shell .ghost,
.app-shell .secondary {
  color: var(--sinan-text) !important;
  border-color: rgba(142, 244, 216, .20) !important;
  background: rgba(12, 29, 26, .76) !important;
}

.app-shell input,
.app-shell select,
.app-shell textarea,
.pill,
.detail-badges span {
  color: var(--sinan-text) !important;
  border-color: rgba(142, 244, 216, .18) !important;
  background: rgba(5, 15, 14, .80) !important;
}

@media (max-width: 920px) {
  body:has(.app-shell:not(.hidden)) {
    overflow: auto !important;
  }

  .login-screen:not(.hidden) {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .login-bg {
    inset: 10px;
    background-size: cover !important;
  }

  .login-command-board {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: 1fr;
    margin: 8px 0;
  }

  .app-shell:not(.hidden) {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .app-shell .side,
  .app-shell .main {
    height: auto;
    overflow: visible;
  }

  .app-shell .topbar {
    grid-template-columns: 1fr;
    margin: -14px -14px 12px;
    padding: 12px 14px;
  }

  .app-shell .workspace {
    height: auto;
    grid-template-columns: 1fr;
  }

  .store-list {
    max-height: 360px !important;
  }
}

/* V73 command cockpit rewrite: clear hierarchy, high contrast, left-nav page switching. */
:root {
  --v73-bg: #07100f;
  --v73-ink: #f4fffb;
  --v73-soft: rgba(218, 246, 238, .72);
  --v73-muted: rgba(218, 246, 238, .50);
  --v73-line: rgba(137, 238, 214, .18);
  --v73-card: rgba(10, 28, 27, .82);
  --v73-card-2: rgba(14, 39, 37, .92);
  --v73-mint: #66f3d0;
  --v73-gold: #f0c85a;
  --v73-red: #ff6b5c;
  --v73-blue: #6fb8ff;
}

body:has(.app-shell:not(.hidden)) {
  overflow: hidden;
  background: var(--v73-bg);
}

.login-screen {
  isolation: isolate;
  grid-template-columns: minmax(520px, 1fr) minmax(340px, 420px);
  align-items: center;
  gap: 28px;
  padding: 34px 48px;
  background:
    radial-gradient(circle at 18% 18%, rgba(102, 243, 208, .16), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(111, 184, 255, .16), transparent 30%),
    linear-gradient(135deg, #030706, #0b1716 54%, #050908);
}

.login-bg {
  inset: 22px;
  border: 1px solid rgba(184, 244, 231, .18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(3, 7, 6, .56), rgba(3, 7, 6, .10) 48%, rgba(3, 7, 6, .66)),
    linear-gradient(180deg, rgba(3, 7, 6, .08), rgba(3, 7, 6, .46)),
    url("/static/login-mountain.jpg") center / contain no-repeat,
    #081211;
  filter: saturate(.9) hue-rotate(130deg) brightness(.88) contrast(1.04);
  transform: none;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, .52), 0 28px 120px rgba(0, 0, 0, .44);
}

.login-screen::before {
  background:
    linear-gradient(90deg, rgba(102, 243, 208, .08) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(180deg, rgba(102, 243, 208, .06) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(112deg, transparent 0 42%, rgba(102, 243, 208, .12) 43%, transparent 56%);
  mix-blend-mode: screen;
}

.login-copy {
  align-self: end;
  padding: 0 0 56px 28px;
}

.login-copy h1 {
  margin: 0;
  font-size: clamp(44px, 6vw, 82px);
  line-height: .96;
}

.login-copy span {
  border-color: rgba(102, 243, 208, .34);
  background: rgba(4, 14, 13, .66);
}

.login-command-board {
  position: relative;
  z-index: 2;
  align-self: end;
  margin: 0 0 54px;
  display: grid;
  gap: 10px;
  max-width: 520px;
}

.login-command-board > div {
  padding: 14px 16px;
  border: 1px solid rgba(164, 245, 226, .22);
  border-radius: 8px;
  color: var(--v73-ink);
  background:
    linear-gradient(110deg, rgba(10, 28, 27, .78), rgba(6, 17, 16, .52)),
    linear-gradient(90deg, rgba(102, 243, 208, .10), transparent);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
}

.login-command-board span,
.login-command-board small {
  display: block;
  color: var(--v73-soft);
  font-size: 12px;
}

.login-command-board strong {
  display: block;
  margin: 3px 0 8px;
  color: #fff;
  font-size: 17px;
}

.login-command-board i {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(218, 246, 238, .12);
}

.login-command-board b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--v73-mint), var(--v73-gold));
  box-shadow: 0 0 18px rgba(102, 243, 208, .36);
}

.login-card {
  align-self: center;
  margin-right: 0;
  border-color: rgba(164, 245, 226, .28);
  background:
    linear-gradient(145deg, rgba(8, 24, 23, .92), rgba(4, 12, 12, .86)),
    radial-gradient(circle at top right, rgba(102, 243, 208, .16), transparent 38%);
}

.app-shell.shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 314px minmax(0, 1fr);
  overflow: hidden;
  color: var(--v73-ink);
  background:
    radial-gradient(circle at 18% 0, rgba(102, 243, 208, .16), transparent 28%),
    radial-gradient(circle at 82% 10%, rgba(111, 184, 255, .15), transparent 32%),
    linear-gradient(135deg, #06100f, #091615 50%, #040807);
}

.app-shell .side {
  height: 100vh;
  overflow-y: auto;
  padding: 18px 14px;
  border-right: 1px solid var(--v73-line);
  background:
    linear-gradient(180deg, rgba(6, 18, 17, .96), rgba(4, 10, 10, .96)),
    linear-gradient(90deg, rgba(102, 243, 208, .08), transparent);
}

.app-shell .brand h1,
.app-shell .brand p,
.app-shell .side label,
.app-shell .side strong,
.app-shell .side b {
  color: var(--v73-ink);
}

.app-shell .side p,
.app-shell .side span,
.app-shell .side small {
  color: var(--v73-soft);
}

.system-rail {
  gap: 8px;
}

.system-rail button,
.system-rail a,
.side-function-map button {
  min-height: 52px;
  border: 1px solid rgba(164, 245, 226, .14);
  color: var(--v73-soft);
  background: rgba(8, 24, 23, .58);
}

.system-rail button.active,
.system-rail a.active,
.side-function-map button.active {
  color: #05100f;
  border-color: transparent;
  background: linear-gradient(135deg, var(--v73-mint), #c8ffe9 62%, var(--v73-gold));
  box-shadow: 0 16px 36px rgba(102, 243, 208, .18);
}

.system-rail button.active *,
.side-function-map button.active * {
  color: #05100f;
}

.app-shell .side .panel,
.side-brief,
.side-kpis div,
.side-playbook {
  border: 1px solid rgba(164, 245, 226, .16);
  background: rgba(8, 24, 23, .62);
  box-shadow: none;
}

.app-shell .main {
  height: 100vh;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px 24px;
  color: var(--v73-ink);
  background:
    linear-gradient(90deg, rgba(102, 243, 208, .04) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(180deg, rgba(102, 243, 208, .035) 1px, transparent 1px) 0 0 / 30px 30px,
    transparent;
}

.app-shell .topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 72px;
  margin: -18px -22px 16px;
  padding: 12px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--v73-line);
  background: rgba(5, 14, 14, .86);
  backdrop-filter: blur(20px);
}

.app-shell .topbar .eyebrow,
.app-shell .topline,
.app-shell .status,
.app-shell .top-actions .top-link {
  display: none !important;
}

.app-shell .topbar h2 {
  margin: 0;
  color: #fff;
  font-size: 20px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.session-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.session-strip span {
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(164, 245, 226, .18);
  border-radius: 8px;
  background: rgba(11, 31, 30, .72);
}

.session-strip small {
  display: none;
}

.session-strip strong {
  color: var(--v73-ink);
  font-size: 12px;
  white-space: nowrap;
}

.session-strip button,
.app-shell .ghost,
.app-shell .primary,
.app-shell .secondary {
  min-height: 34px;
  border-radius: 8px;
}

.app-shell .hub-mode-tabs {
  display: none !important;
}

.app-shell .hub-pane-hidden {
  display: none !important;
}

.app-shell main > section:not(.hub-pane-hidden),
.app-shell main > div:not(.hub-pane-hidden) {
  width: 100%;
  max-width: 1560px;
  margin-left: auto;
  margin-right: auto;
  animation: v73PageIn .18s ease both;
}

@keyframes v73PageIn {
  from { opacity: .74; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-shell section,
.app-shell article,
.app-shell .panel,
.app-shell .detail,
.app-shell .metric,
.app-shell .store-card,
.app-shell .recent-card,
.app-shell .playbook,
.app-shell .pk-rank-card,
.app-shell .cockpit-panel {
  color: var(--v73-ink);
  border: 1px solid rgba(164, 245, 226, .16);
  background:
    linear-gradient(180deg, rgba(14, 39, 37, .88), rgba(7, 21, 20, .86));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}

.app-shell section h3,
.app-shell section h4,
.app-shell article h3,
.app-shell article h4,
.app-shell .detail h3,
.app-shell .detail h4,
.app-shell strong {
  color: #fff;
}

.app-shell section p,
.app-shell article p,
.app-shell .panel p,
.app-shell small,
.app-shell span,
.app-shell label {
  color: var(--v73-soft);
}

.app-shell .eyebrow {
  color: var(--v73-mint) !important;
}

.command-cockpit,
.pk-rank-panel {
  margin-bottom: 16px;
}

.cockpit-hero,
.pk-rank-hero,
.task-center-head,
.sla-head,
.feishu-sla-head,
.dianjin-head,
.role-action-head,
.dispatch-head,
.writeback-head,
.scheduler-head,
.runner-head {
  border-color: rgba(164, 245, 226, .18);
  background:
    linear-gradient(110deg, rgba(15, 48, 45, .88), rgba(7, 20, 20, .86)),
    radial-gradient(circle at top right, rgba(102, 243, 208, .16), transparent 36%);
}

.cockpit-kpis article,
.metric {
  min-height: 112px;
  background:
    linear-gradient(180deg, rgba(10, 31, 30, .96), rgba(6, 18, 17, .96));
}

.cockpit-kpis strong,
.metric strong,
.pk-rank-self strong,
.pk-rank-kpi strong {
  color: var(--v73-mint);
}

.app-shell .workspace {
  height: calc(100vh - 112px);
  min-height: 580px;
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 0;
}

.queue-panel,
.detail {
  min-height: 0;
  overflow: hidden;
}

.queue-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.queue-head,
.detail-head {
  min-height: auto;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(164, 245, 226, .14);
}

.queue-panel .store-list {
  max-height: none;
  height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}

.app-shell .store-card {
  width: 100%;
  text-align: left;
  border-color: rgba(164, 245, 226, .14);
  background: rgba(8, 24, 23, .68);
}

.app-shell .store-card.active {
  border-color: rgba(102, 243, 208, .80);
  background:
    linear-gradient(135deg, rgba(102, 243, 208, .20), rgba(8, 24, 23, .90));
  box-shadow: 0 0 0 1px rgba(102, 243, 208, .18), 0 16px 34px rgba(0, 0, 0, .28);
}

.app-shell .detail {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.app-shell .detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.app-shell .tabs {
  overflow-x: auto;
  padding: 10px 0;
  border-bottom: 1px solid rgba(164, 245, 226, .12);
}

.app-shell .tabs button {
  white-space: nowrap;
  color: var(--v73-soft);
  border-color: rgba(164, 245, 226, .18);
  background: rgba(8, 24, 23, .62);
}

.app-shell .tabs button.active {
  color: #05100f;
  background: linear-gradient(135deg, var(--v73-mint), #d8fff2);
}

.tabpage.active {
  min-height: 0;
  overflow-y: auto;
  padding: 14px 2px 6px;
}

.kpi-grid,
.recent-grid,
.realtime-grid,
.cockpit-grid,
.task-center-layout,
.sla-layout,
.feishu-sla-layout,
.dianjin-layout,
.role-action-layout,
.dispatch-layout,
.writeback-layout,
.scheduler-layout,
.runner-layout {
  gap: 14px;
}

.pill,
.detail-badges span,
.app-shell input,
.app-shell select,
.app-shell textarea {
  color: var(--v73-ink);
  border-color: rgba(164, 245, 226, .18);
  background: rgba(5, 16, 15, .76);
}

.pill.red,
.metric.critical strong {
  color: var(--v73-red);
}

.pill.amber,
.metric.warning strong {
  color: var(--v73-gold);
}

.pill.green,
.metric.live strong {
  color: var(--v73-mint);
}

.app-shell .primary,
.app-shell button.primary {
  color: #04100e;
  border: 0;
  background: linear-gradient(135deg, var(--v73-mint), #d9fff1);
}

.app-shell .ghost,
.app-shell .secondary,
.app-shell button {
  color: var(--v73-ink);
  border-color: rgba(164, 245, 226, .20);
  background: rgba(9, 29, 28, .74);
}

.app-shell pre,
.sku-table,
.action-list,
.timeline,
.playbook-grid {
  color: var(--v73-ink);
}

@media (max-width: 920px) {
  body:has(.app-shell:not(.hidden)) {
    overflow: auto;
  }

  .login-screen {
    min-height: 100svh;
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .login-bg {
    inset: 10px;
    background-size: cover;
  }

  .login-copy {
    align-self: start;
    padding: 28px 8px 0;
  }

  .login-command-board {
    margin: 10px 0 0;
  }

  .login-card {
    width: 100%;
  }

  .app-shell.shell {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .app-shell .side {
    height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--v73-line);
  }

  .app-shell .main {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding: 14px;
  }

  .app-shell .topbar {
    margin: -14px -14px 12px;
    grid-template-columns: 1fr;
  }

  .top-actions {
    justify-content: space-between;
  }

  .app-shell .workspace {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .queue-panel .store-list {
    max-height: 360px;
  }

  .app-shell .detail {
    min-height: 620px;
  }
}

* { box-sizing: border-box; }

.hidden { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(39,107,143,.12), transparent 34%),
    linear-gradient(90deg, rgba(21,32,27,.035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(180deg, rgba(21,32,27,.035) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--paper);
  font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

.login-screen {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 28px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(119,240,208,.045) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(180deg, rgba(119,240,208,.032) 1px, transparent 1px) 0 0 / 36px 36px,
    radial-gradient(circle at 14% 18%, rgba(67,96,245,.24), transparent 28%),
    radial-gradient(circle at 78% 20%, rgba(119,240,208,.20), transparent 30%),
    radial-gradient(circle at 18% 86%, rgba(240,191,91,.10), transparent 26%),
    #050c0c;
}

.login-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,12,12,.58), rgba(5,17,19,.34) 44%, rgba(5,12,12,.78)),
    linear-gradient(180deg, rgba(10,28,25,.12), rgba(5,12,12,.54)),
    url("/static/login-mountain.jpg") center / cover no-repeat;
  filter: saturate(.78) hue-rotate(145deg) brightness(.80) contrast(1.08);
  transform: scale(1.018);
}

.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(114deg, transparent 0 30%, rgba(119,240,208,.12) 31%, transparent 48%),
    radial-gradient(circle at 20% 28%, rgba(67,96,245,.24), transparent 20%),
    radial-gradient(circle at 84% 58%, rgba(119,240,208,.16), transparent 24%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.login-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5,12,12,.18), transparent 42%, rgba(5,12,12,.66)),
    linear-gradient(180deg, rgba(5,12,12,.14), transparent 42%, rgba(5,12,12,.46));
  pointer-events: none;
}

.login-copy {
  position: relative;
  z-index: 2;
  align-self: end;
  max-width: 660px;
  padding: 0 0 64px 64px;
  color: white;
  text-shadow: 0 4px 24px rgba(0,0,0,.42);
}

.login-copy img,
.liumi-mark.large {
  width: 88px;
  height: 56px;
  margin-bottom: 20px;
}

.liumi-mark {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 8px;
  color: #07110e;
  background:
    linear-gradient(145deg, rgba(247,255,250,.96), rgba(130,245,214,.82) 50%, rgba(240,191,91,.90)),
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.95), transparent 30%);
  border: 1px solid rgba(215,255,242,.55);
  box-shadow:
    0 16px 38px rgba(0,0,0,.28),
    0 0 0 4px rgba(119,240,208,.08),
    0 0 42px rgba(119,240,208,.16);
}

.liumi-mark::before {
  content: "六米";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0;
}

.liumi-mark::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(7,17,14,.92), rgba(7,17,14,.20));
}

.liumi-mark.mark {
  width: 62px;
  height: 42px;
}

.liumi-mark.mark::before {
  font-size: 22px;
}

.login-copy img {
  object-fit: cover;
  border-radius: 8px;
  padding: 6px;
  background: linear-gradient(145deg, rgba(119,240,208,.20), rgba(255,255,255,.08));
  border: 1px solid rgba(180,236,226,.32);
  box-shadow:
    0 16px 38px rgba(0,0,0,.34),
    0 0 0 4px rgba(119,240,208,.08),
    0 0 42px rgba(67,96,245,.24);
}

.login-copy p {
  margin-bottom: 8px;
  color: rgba(143,244,228,.82);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.login-copy h1 {
  max-width: 540px;
  color: #f8fffb;
  font-size: 54px;
  line-height: 1.08;
  letter-spacing: 0;
}

.login-copy span {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 12px;
  color: rgba(239,255,250,.84);
  border: 1px solid rgba(180,236,226,.24);
  border-radius: 999px;
  background: rgba(5,12,11,.46);
  backdrop-filter: blur(10px);
}

.login-card {
  position: relative;
  z-index: 2;
  align-self: center;
  margin-right: 44px;
  padding: 32px;
  color: #f8fffb;
  border: 1px solid rgba(180,236,226,.24);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(16,34,31,.88), rgba(5,13,12,.78)),
    linear-gradient(90deg, rgba(119,240,208,.08), transparent);
  backdrop-filter: blur(24px);
  box-shadow:
    0 34px 96px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.login-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 7px;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(119,240,208,.10) 39%, transparent 56%);
}

.login-card::before {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mint), #4360f5, var(--amber));
}

.login-card h2 {
  margin-bottom: 16px;
  color: #ffffff;
  font-size: 30px;
}

.login-card .eyebrow,
.login-card label {
  color: rgba(143,244,228,.72);
}

.login-role {
  margin-bottom: 10px;
}

.login-submit {
  margin-top: 18px;
}

.login-note {
  margin-top: 12px;
  color: rgba(239,255,250,.58);
  font-size: 12px;
  line-height: 1.5;
}

.login-error {
  min-height: 18px;
  margin-top: 8px;
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
}

.login-card input {
  color: #f8fffb;
  background: rgba(255,255,255,.08);
  border-color: rgba(180,236,226,.18);
}

.login-card input:focus {
  border-color: rgba(119,240,208,.74);
  box-shadow: 0 0 0 3px rgba(119,240,208,.12);
}

.login-card input::placeholder {
  color: rgba(239,255,250,.38);
}

.login-card .segmented button {
  color: rgba(239,255,250,.66);
  background: rgba(255,255,255,.08);
}

.login-card .segmented button.active {
  color: #06100d;
  background: linear-gradient(135deg, #8cf6d7, #45c89f);
}

.login-card .primary {
  color: #06100d;
  background: linear-gradient(135deg, #8cf6d7, #45c89f);
  box-shadow: 0 16px 38px rgba(69,200,159,.22);
}

.identity .segmented button:disabled {
  cursor: default;
  opacity: .48;
}

.identity .segmented button.active:disabled {
  opacity: 1;
}

.identity input[readonly] {
  cursor: default;
}

.identity-cardline {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(119,240,208,.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(119,240,208,.14), rgba(240,191,91,.08)),
    rgba(255,255,255,.045);
}

.identity-cardline span {
  color: #f8fffb;
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
}

.identity-cardline small {
  color: rgba(239,255,250,.58);
  font-size: 12px;
  line-height: 1.45;
}

button, input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.shell {
  display: grid;
  grid-template-columns: 292px 1fr;
  min-height: 100vh;
}

.side {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px;
  border-right: 1px solid var(--line);
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 24px;
}

.mark {
  width: 50px;
  height: 50px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  border: 1px solid rgba(21,32,27,.12);
  box-shadow: 0 8px 18px rgba(33,73,205,.18);
}

h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 19px; }
h2 { font-size: 28px; letter-spacing: 0; }
h3 { font-size: 22px; }
h4 { margin: 18px 0 10px; font-size: 15px; }

.brand p, .eyebrow, label {
  color: var(--muted);
  font-size: 12px;
}

.panel {
  padding: 14px;
  margin-bottom: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(21,32,27,.06);
}

label {
  display: block;
  margin: 10px 0 7px;
  font-weight: 700;
}

input {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  color: var(--ink);
  background: #f7faf8;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
}

input:focus { border-color: var(--green); }

.segmented, .filters, .tabs {
  display: flex;
  gap: 6px;
}

.segmented button, .chip, .tabs button {
  min-height: 34px;
  padding: 0 10px;
  color: var(--muted);
  background: #e7ece8;
  border-radius: 6px;
}

.segmented button.active, .chip.active, .tabs button.active {
  color: white;
  background: var(--ink);
}

.filters { flex-wrap: wrap; margin-top: 12px; }

.primary, .ghost {
  width: 100%;
  height: 38px;
  margin-top: 14px;
  border-radius: 6px;
  font-weight: 700;
}

.secondary {
  width: 100%;
  height: 36px;
  margin-top: 8px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-weight: 700;
}

.primary {
  color: white;
  background: var(--green);
}

.ghost {
  width: auto;
  min-width: 92px;
  padding: 0 14px;
  margin: 0;
  color: var(--ink);
  background: #e7ece8;
}

.deerflow {
  position: absolute;
  left: 24px;
  bottom: 20px;
  color: rgba(21,32,27,.42);
  font-size: 11px;
  text-decoration: none;
}

.main {
  padding: 26px;
  min-width: 0;
}

.topbar, .detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.status {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.status span {
  padding: 7px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
}

.metric, .detail, .store-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric {
  padding: 16px;
}

.metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.metric strong {
  display: block;
  margin-top: 8px;
  font-size: 30px;
}

.workspace {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
}

.store-list {
  display: grid;
  gap: 10px;
  align-content: start;
  max-height: calc(100vh - 180px);
  overflow: auto;
  padding-right: 4px;
}

.store-card {
  padding: 14px;
  text-align: left;
  transition: transform .14s ease, border-color .14s ease;
}

.store-card:hover, .store-card.active {
  transform: translateY(-1px);
  border-color: var(--green);
}

.store-card h3 {
  font-size: 15px;
  line-height: 1.35;
}

.store-meta, .store-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.pill {
  padding: 5px 7px;
  border-radius: 6px;
  background: #e7ece8;
  color: var(--muted);
  font-size: 12px;
}

.pill.red { color: white; background: var(--red); }
.pill.amber { color: white; background: var(--amber); }
.pill.green { color: white; background: var(--green); }
.pill.state { color: var(--ink); background: #dbe8e0; }

.detail {
  min-height: 700px;
  padding: 18px;
  overflow: hidden;
}

.state-card {
  margin-bottom: 14px;
}

.priority-engine-card {
  margin-bottom: 14px;
}

.conclusion-card {
  margin-bottom: 16px;
}

.conclusion-main {
  padding: 16px;
  border: 1px solid rgba(20,108,67,.22);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #f2faf5);
}

.conclusion-main h4 {
  margin: 4px 0 8px;
  font-size: 20px;
}

.conclusion-main p {
  line-height: 1.58;
}

.conclusion-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.conclusion-columns span {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.76);
  line-height: 1.5;
}

.conclusion-columns b {
  display: block;
  margin-bottom: 4px;
  color: var(--green);
}

.conclusion-main small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
}

.state-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #f7faf8;
}

.state-main.red { border-color: rgba(189,61,42,.38); background: #fff3ef; }
.state-main.amber { border-color: rgba(189,123,22,.38); background: #fff8ea; }
.state-main.green { border-color: rgba(20,108,67,.32); background: #effaf4; }
.state-main.blue { border-color: rgba(39,107,143,.35); background: #edf6fa; }

.state-label {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 8px;
  color: white;
  background: var(--ink);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

.state-main h4 {
  margin: 0;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.45;
}

.priority-engine {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(23,33,29,.14);
  border-left: 6px solid var(--green);
  border-radius: 8px;
  background: #fff;
}

.priority-engine.red { border-left-color: var(--red); background: #fff7f4; }
.priority-engine.amber { border-left-color: var(--amber); background: #fffaf0; }
.priority-engine.green { border-left-color: var(--green); background: #f4fbf7; }

.priority-engine header {
  display: grid;
  grid-template-columns: auto 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.priority-engine header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.priority-engine header strong {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 6px;
  color: #fff;
  background: var(--ink);
  font-size: 16px;
}

.priority-engine header b {
  min-width: 0;
  color: var(--ink);
  font-size: 17px;
}

.priority-engine-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.priority-engine-metrics span {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
}

.priority-engine-metrics small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.priority-engine-metrics b {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 16px;
}

.priority-engine-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.priority-engine-reasons i {
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--ink);
  background: rgba(23,33,29,.07);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.state-numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(86px, 1fr));
  gap: 8px;
}

.state-numbers span {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.68);
  color: var(--muted);
  font-size: 12px;
}

.state-numbers b {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 18px;
}

.realtime-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.realtime {
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.realtime span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.realtime strong {
  display: block;
  margin: 7px 0;
  font-size: 17px;
}

.realtime.ready strong { color: var(--green); }
.realtime.pending strong { color: var(--amber); }

.realtime p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.recent-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.recent-card {
  min-height: 190px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.recent-card.red { border-color: rgba(189,61,42,.38); background: #fff4f0; }
.recent-card.amber { border-color: rgba(189,123,22,.38); background: #fff8ea; }
.recent-card.green { border-color: rgba(20,108,67,.30); background: #f1faf5; }
.recent-card.blue { border-color: rgba(39,107,143,.32); background: #eef7fb; }

.recent-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.recent-card strong {
  display: block;
  margin: 12px 0 8px;
  font-size: 20px;
}

.recent-card p {
  min-height: 58px;
  line-height: 1.45;
}

.recent-card small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.split-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.split-actions section {
  min-width: 0;
}

.tabs {
  margin: 18px 0 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.tabpage { display: none; }
.tabpage.active { display: block; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.kpi {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf8;
}

.kpi span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.kpi strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
}

.sku-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.sku-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.sku-row:last-child { border-bottom: 0; }

.sku-row > .num,
.sku-row > span:nth-child(4) {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  width: fit-content;
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 6px;
  color: #33413b;
  background: #f4f7f5;
  font-size: 12px;
  font-weight: 850;
}

.sku-row > .product-code-panel {
  grid-column: 1 / -1;
}
.sku-name {
  display: grid;
  gap: 4px;
  font-weight: 700;
  line-height: 1.35;
}

.sku-name small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sku-row button,
.product-link-action {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(12,23,21,.12);
  border-radius: 7px;
  background: rgba(69,200,159,.10);
  color: #08201a;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.product-link-action.ready {
  border-color: rgba(10,111,86,.22);
  background: linear-gradient(135deg, rgba(69,200,159,.22), rgba(240,191,91,.20));
  color: #06231b;
}

.product-code-panel {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(12,23,21,.10);
  border-radius: 8px;
  background: #f7faf8;
}

.product-code-panel.linked {
  background: linear-gradient(135deg, rgba(69,200,159,.12), rgba(240,191,91,.10));
}

.product-code-panel > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.product-code-panel span {
  min-width: 0;
  max-width: 100%;
  padding: 4px 6px;
  border-radius: 6px;
  color: #33413b;
  background: rgba(12,23,21,.055);
  font-size: 11px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.product-code-panel span b {
  margin-right: 4px;
  color: #0a6f56;
}

.product-code-panel strong {
  color: #51615a;
  font-size: 11px;
  line-height: 1.35;
}

.product-code-panel button,
.product-code-panel .product-link-action {
  width: 100%;
  min-height: 30px;
}
.num { font-variant-numeric: tabular-nums; }

.action-list {
  display: grid;
  gap: 10px;
}

.action {
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: 8px;
  background: #ffffff;
}

.action strong {
  display: inline-block;
  margin-right: 8px;
}

.action h5 {
  margin: 10px 0 0;
  font-size: 16px;
}

.action p {
  margin-top: 8px;
  line-height: 1.5;
}

.execution-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-left-width: 0;
}

.execution-item.owner-lane {
  border-color: rgba(20,108,67,.22);
  background: linear-gradient(135deg, rgba(20,108,67,.08), #ffffff 46%);
}

.execution-item.operator-lane {
  border-color: rgba(39,107,143,.22);
  background: linear-gradient(135deg, rgba(39,107,143,.08), #ffffff 46%);
}

.execution-item > strong {
  display: grid;
  width: 34px;
  height: 34px;
  margin: 0;
  place-items: center;
  border-radius: 6px;
  color: #06100d;
  background: linear-gradient(135deg, #8cf6d7, #f0c562);
  font-size: 12px;
  font-weight: 950;
}

.execution-item h5 {
  margin-top: 8px;
  line-height: 1.35;
}

.execution-item small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.timeline {
  display: grid;
  gap: 12px;
}

.time-node {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.time-day {
  display: grid;
  place-items: center;
  min-height: 88px;
  border-radius: 8px;
  color: white;
  background: var(--ink);
  font-weight: 800;
}

.time-body {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.time-body strong {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
}

.time-body p {
  color: var(--ink);
  line-height: 1.5;
}

.time-body span {
  display: inline-block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.playbook-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.playbook {
  min-height: 170px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.playbook span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.playbook h4 {
  margin: 10px 0 8px;
  font-size: 18px;
}

.playbook p {
  line-height: 1.55;
}

pre {
  max-height: 560px;
  overflow: auto;
  white-space: pre-wrap;
  padding: 16px;
  background: #18201b;
  color: #f8f1df;
  border-radius: 8px;
  line-height: 1.6;
  font-size: 13px;
}

@media (max-width: 1060px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-card {
    align-self: end;
    margin: 24px;
  }
  .login-copy {
    padding: 32px 24px 0;
    align-self: start;
  }
  .shell { grid-template-columns: 1fr; }
  .side { position: relative; height: auto; }
  .deerflow { position: static; display: inline-block; margin-top: 10px; }
  .workspace { grid-template-columns: 1fr; }
  .metrics, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .realtime-grid, .playbook-grid, .recent-grid, .split-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .state-main { grid-template-columns: 1fr; }
  .store-list { max-height: none; }
}

@media (max-width: 640px) {
  .main { padding: 16px; }
  .login-copy h1 { font-size: 30px; }
  .login-card { margin: 16px; padding: 20px; }
  .metrics, .kpi-grid, .realtime-grid, .playbook-grid, .recent-grid, .split-actions, .state-numbers, .priority-engine-metrics, .conclusion-columns { grid-template-columns: 1fr; }
  .priority-engine header { grid-template-columns: 1fr auto; }
  .priority-engine header span { grid-column: 1 / -1; }
  .time-node { grid-template-columns: 1fr; }
  .time-day { min-height: 44px; }
  .sku-row { grid-template-columns: 1fr; }
  .sku-row button { width: 100%; }
}

/* Command-center skin for the authenticated workspace. */
.app-shell {
  --ink: #17211d;
  --muted: #6f7c78;
  --line: #d8e2df;
  --panel: rgba(255,255,255,.90);
  --green: #00a76f;
  --cyan: #0aa6a6;
  --red: #d34b36;
  --amber: #c98218;
  --side: #111a17;
  grid-template-columns: 304px minmax(0, 1fr);
  background:
    radial-gradient(circle at 78% 6%, rgba(10,166,166,.16), transparent 30%),
    radial-gradient(circle at 18% 0%, rgba(0,167,111,.12), transparent 26%),
    linear-gradient(90deg, rgba(21,32,27,.035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(180deg, rgba(21,32,27,.035) 1px, transparent 1px) 0 0 / 24px 24px,
    #eef4f2;
}

.app-shell .side {
  width: 304px;
  border-right: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 30% 0%, rgba(0,167,111,.26), transparent 32%),
    linear-gradient(180deg, rgba(31,47,41,.98), rgba(13,22,19,.98));
  color: #f6fffb;
  box-shadow: 18px 0 50px rgba(14, 25, 21, .18);
}

.app-shell .brand {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.app-shell .brand h1 {
  color: #f8fffb;
  font-size: 18px;
  letter-spacing: 0;
}

.app-shell .brand p,
.app-shell .side label {
  color: rgba(230,246,240,.62);
}

.app-shell .mark {
  box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 0 0 3px rgba(255,255,255,.08);
}

.app-shell .side .panel {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}

.app-shell .side input {
  color: #f8fffb;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}

.app-shell .side input::placeholder {
  color: rgba(246,255,251,.38);
}

.app-shell .side .segmented button,
.app-shell .side .chip {
  color: rgba(246,255,251,.70);
  background: rgba(255,255,255,.08);
}

.app-shell .segmented button.active,
.app-shell .chip.active,
.app-shell .tabs button.active,
.app-shell .primary {
  color: white;
  background: linear-gradient(135deg, #00a76f, #0aa6a6);
  box-shadow: 0 10px 24px rgba(0,167,111,.20);
}

.app-shell .side .secondary {
  color: rgba(246,255,251,.72);
  border-color: rgba(255,255,255,.16);
}

.app-shell .deerflow {
  color: rgba(246,255,251,.36);
}

.app-shell .main {
  padding: 24px 28px 32px;
}

.app-shell .topbar {
  min-height: 86px;
  align-items: center;
  padding: 4px 0 6px;
}

.app-shell .topbar h2 {
  font-size: 30px;
  font-weight: 850;
}

.top-actions {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-buttons .primary,
.action-buttons .ghost {
  width: auto;
  height: 34px;
  margin: 0;
  padding: 0 13px;
  border-radius: 999px;
}

.app-shell .status span {
  padding: 8px 11px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(216,226,223,.86);
  box-shadow: 0 10px 24px rgba(15,32,27,.07);
}

.session-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.session-strip span {
  display: grid;
  gap: 2px;
  min-width: 118px;
  padding: 8px 10px;
  border: 1px solid rgba(216,226,223,.88);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 24px rgba(15,32,27,.06);
}

.session-strip small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.session-strip strong {
  max-width: 210px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-strip button,
.mobile-session-bar button {
  height: 34px;
  padding: 0 13px;
  color: #f8fffb;
  border-radius: 999px;
  background: linear-gradient(135deg, #1b2c26, #0b1512);
  box-shadow: 0 10px 24px rgba(15,32,27,.18);
}

.mobile-session-bar {
  display: none;
}

.automation-flow {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 210px;
  gap: 10px;
  margin: 10px 0 18px;
}

.flow-side,
.flow-main {
  border-radius: 8px;
  border: 1px solid rgba(93,142,176,.28);
  box-shadow: 0 22px 56px rgba(11,36,64,.18);
}

.flow-side {
  min-height: 236px;
  padding: 16px;
  color: #f4fbff;
  background:
    radial-gradient(circle at 42% 28%, rgba(75,137,211,.38), transparent 34%),
    linear-gradient(180deg, #08294d, #061d39);
}

.morning-card {
  color: #123052;
  background:
    linear-gradient(180deg, rgba(247,252,255,.96), rgba(226,242,252,.96));
}

.flow-date {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.flow-date span {
  display: block;
  max-width: 74px;
  font-size: 12px;
  opacity: .86;
}

.flow-date strong {
  font-size: 21px;
  letter-spacing: 0;
}

.clock-face {
  position: relative;
  width: 78px;
  height: 78px;
  margin: 20px 0;
  border: 3px solid rgba(255,255,255,.86);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255,255,255,.10), transparent 58%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.75) 0 2deg, transparent 2deg 30deg);
}

.clock-face::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  background: #0a315d;
}

.clock-face i,
.clock-face b {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: block;
  width: 3px;
  height: 25px;
  border-radius: 999px;
  background: #ffffff;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(15deg);
}

.clock-face b {
  height: 31px;
  background: #74d4ff;
  transform: translate(-50%, -100%) rotate(92deg);
}

.flow-side p {
  color: rgba(244,251,255,.82);
  font-size: 13px;
  line-height: 1.55;
}

.flow-main {
  position: relative;
  overflow: hidden;
  min-height: 236px;
  padding: 18px 22px;
  color: #eaf7ff;
  background:
    radial-gradient(circle at 18% 18%, rgba(62,146,255,.26), transparent 28%),
    radial-gradient(circle at 82% 26%, rgba(0,167,111,.20), transparent 30%),
    linear-gradient(180deg, #082b52, #051a34);
}

.flow-main::before {
  content: "☾";
  position: absolute;
  top: 22px;
  left: 32px;
  color: #fff4bf;
  font-size: 30px;
}

.flow-main .eyebrow {
  text-align: center;
  color: rgba(234,247,255,.72);
}

.flow-main h3 {
  margin: 8px 0 18px;
  color: #ffffff;
  text-align: center;
  font-size: 22px;
}

.flow-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.flow-steps::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 35px;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.58) 0 8px, transparent 8px 14px);
}

.flow-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}

.flow-step span {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 4px solid rgba(255,255,255,.72);
  border-radius: 999px;
  color: #082b52;
  background: linear-gradient(180deg, #ffffff, #bfeaff);
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}

.flow-step:nth-child(2) span { background: linear-gradient(180deg, #ffffff, #a6f3ce); }
.flow-step:nth-child(3) span { background: linear-gradient(180deg, #ffffff, #ffe38a); }
.flow-step:nth-child(4) span { background: linear-gradient(180deg, #ffffff, #d7c5ff); }

.flow-step strong {
  color: #ffffff;
  font-size: 14px;
}

.flow-step p {
  color: rgba(234,247,255,.68);
  font-size: 12px;
  line-height: 1.4;
}

.flow-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.flow-progress span {
  color: rgba(234,247,255,.72);
  font-size: 12px;
  text-align: center;
}

.result-mini {
  margin-top: 28px;
  padding: 14px;
  border: 1px solid rgba(84,133,162,.22);
  border-radius: 8px;
  background: rgba(255,255,255,.68);
}

.result-mini span {
  color: #5c7181;
  font-size: 12px;
}

.result-mini strong {
  display: block;
  margin: 8px 0;
  color: #00a76f;
  font-size: 22px;
}

.result-mini p {
  color: #51697c;
}

.app-shell .metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-shell .metric {
  position: relative;
  overflow: hidden;
  min-height: 116px;
  padding: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(244,250,247,.92));
}

.app-shell .metric::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -34px;
  width: 118px;
  height: 118px;
  border-radius: 999px;
  background: rgba(0,167,111,.12);
}

.app-shell .metric.critical::after { background: rgba(211,75,54,.14); }
.app-shell .metric.warning::after { background: rgba(201,130,24,.16); }
.app-shell .metric.focus::after { background: rgba(43,111,159,.14); }
.app-shell .metric.live::after { background: rgba(10,166,166,.15); }

.app-shell .metric strong {
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.app-shell .metric small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.app-shell .workspace {
  grid-template-columns: 372px minmax(0, 1fr);
}

.app-shell .store-card {
  position: relative;
  padding: 15px;
  background: rgba(255,255,255,.86);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.app-shell .store-card:hover,
.app-shell .store-card.active {
  border-color: #00a76f;
  box-shadow: 0 18px 42px rgba(0,167,111,.16);
}

.app-shell .store-card.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #00a76f, #0aa6a6);
}

.app-shell .detail {
  min-height: 720px;
  padding: 20px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
}

.app-shell .detail-head {
  padding: 4px 2px 2px;
}

.app-shell .detail-head h3 {
  font-size: 24px;
}

.app-shell .tabs {
  margin: 18px 0 14px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef5f2;
  overflow-x: auto;
}

.app-shell .tabs button {
  white-space: nowrap;
  border-radius: 6px;
}

.app-shell .conclusion-main {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(0,167,111,.24);
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(235,250,244,.96)),
    radial-gradient(circle at 92% 8%, rgba(0,167,111,.20), transparent 34%);
}

.app-shell .conclusion-main::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0,167,111,.16), transparent 64%);
  pointer-events: none;
  user-select: none;
}

.app-shell .realtime,
.app-shell .recent-card,
.app-shell .action,
.app-shell .kpi,
.app-shell .time-body,
.app-shell .playbook,
.app-shell .sku-row {
  background: rgba(255,255,255,.90);
}

.app-shell .realtime.ready {
  border-color: rgba(0,167,111,.26);
  background: linear-gradient(180deg, #ffffff, #effbf6);
}

.app-shell .realtime.pending {
  border-color: rgba(201,130,24,.25);
}

.app-shell .action {
  border-left-width: 4px;
}

@media (max-width: 1060px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell .side {
    width: auto;
  }

  .app-shell .workspace,
  .app-shell .metrics {
    grid-template-columns: 1fr;
  }

  .automation-flow {
    grid-template-columns: 1fr;
  }

  .flow-steps,
  .flow-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-actions {
    justify-items: start;
  }

  .session-strip {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .flow-steps,
  .flow-progress {
    grid-template-columns: 1fr;
  }

  .flow-steps::before {
    display: none;
  }

  .app-shell .main {
    padding-bottom: 86px;
  }

  .session-strip {
    display: none;
  }

  .mobile-session-bar {
    position: fixed;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(216,226,223,.82);
    border-radius: 8px;
    background: rgba(248,252,249,.94);
    box-shadow: 0 18px 44px rgba(15,32,27,.20);
    backdrop-filter: blur(18px);
  }

  .mobile-session-bar span {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-session-bar button {
    flex: 0 0 auto;
  }
}

/* Product-grade command deck for the authenticated workspace. */
.app-shell {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(180deg, rgba(255,255,255,.026) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(135deg, #06110f 0%, #071c23 48%, #102019 100%);
}

.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(116deg, transparent 0 28%, rgba(72,183,205,.10) 29%, transparent 42%),
    linear-gradient(18deg, rgba(245,176,62,.07), transparent 22%),
    linear-gradient(180deg, rgba(0,0,0,.18), transparent 34%, rgba(0,0,0,.28));
  pointer-events: none;
}

.app-shell .side,
.app-shell .main {
  position: relative;
  z-index: 1;
}

.app-shell .side {
  background:
    linear-gradient(180deg, rgba(12,28,25,.98), rgba(5,14,15,.98)),
    linear-gradient(90deg, rgba(75,195,213,.16), transparent);
}

.app-shell .side::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(111,239,217,.62), transparent);
}

.app-shell .main {
  padding: 24px 28px 34px;
}

.app-shell .topbar {
  min-height: 82px;
  padding: 2px 0 10px;
}

.app-shell .topbar .eyebrow,
.app-shell .deck-kicker {
  color: rgba(139,244,224,.78);
  letter-spacing: 0;
}

.app-shell .topbar h2 {
  color: #f8fffb;
}

.app-shell .status span {
  color: rgba(237,255,250,.76);
  background: rgba(255,255,255,.08);
  border-color: rgba(180,236,226,.18);
  box-shadow: none;
}

.app-shell .action-buttons .ghost {
  color: #e9fffa;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(180,236,226,.22);
}

.command-deck {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, .95fr) minmax(360px, 1.22fr) minmax(260px, .82fr);
  grid-template-areas:
    "summary radar ops"
    "timeline timeline timeline";
  gap: 16px;
  min-height: 382px;
  margin: 8px 0 18px;
  padding: 20px;
  overflow: hidden;
  color: #f8fffb;
  border: 1px solid rgba(151,238,221,.24);
  border-radius: 8px;
  background:
    linear-gradient(140deg, rgba(5,18,20,.94), rgba(7,32,43,.95) 48%, rgba(12,34,27,.96)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 1px, transparent 1px 18px);
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
}

.command-deck::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 0 36%, rgba(142,244,227,.10) 37%, transparent 53%),
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 42%, rgba(0,0,0,.18));
  pointer-events: none;
}

.command-deck::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(180deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 42px 42px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.28) 45%, rgba(0,0,0,.70));
  pointer-events: none;
}

.deck-summary,
.deck-radar,
.deck-ops,
.deck-timeline {
  position: relative;
  z-index: 1;
}

.deck-summary {
  grid-area: summary;
  align-self: center;
  padding-left: 4px;
}

.deck-kicker {
  font-size: 12px;
  font-weight: 800;
}

.deck-summary h3 {
  margin: 11px 0 12px;
  max-width: 360px;
  color: #ffffff;
  font-size: 36px;
  line-height: 1.08;
}

.deck-summary > p:not(.deck-kicker) {
  max-width: 390px;
  color: rgba(237,255,250,.74);
  font-size: 14px;
  line-height: 1.7;
}

.deck-pulse-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}

.deck-pulse-row span {
  min-height: 72px;
  padding: 11px 10px;
  border: 1px solid rgba(151,238,221,.20);
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  color: rgba(237,255,250,.72);
  font-size: 12px;
}

.deck-pulse-row b {
  display: block;
  margin-bottom: 5px;
  color: #ffffff;
  font-size: 29px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.deck-radar {
  grid-area: radar;
  min-height: 282px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.radar-grid,
.radar-ring,
.radar-sweep,
.radar-core,
.radar-node {
  position: absolute;
}

.radar-grid {
  width: 326px;
  height: 326px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(137,241,223,.26) 0 1deg, transparent 1deg 10deg),
    radial-gradient(circle, transparent 0 31%, rgba(137,241,223,.14) 32% 33%, transparent 34% 56%, rgba(137,241,223,.12) 57% 58%, transparent 59%);
  opacity: .54;
}

.radar-ring {
  border-radius: 50%;
  border: 1px solid rgba(151,238,221,.28);
}

.ring-one { width: 122px; height: 122px; }
.ring-two { width: 214px; height: 214px; }
.ring-three { width: 318px; height: 318px; border-color: rgba(78,165,214,.22); }

.radar-sweep {
  width: 288px;
  height: 288px;
  border-radius: 50%;
  background: conic-gradient(from -30deg, rgba(111,239,217,.34), transparent 42%, transparent);
  mix-blend-mode: screen;
  animation: deckSweep 7s linear infinite;
}

.radar-core {
  z-index: 3;
  display: grid;
  place-items: center;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  border: 1px solid rgba(221,255,249,.38);
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(145deg, rgba(15,211,178,.95), rgba(32,127,214,.92));
  box-shadow:
    0 0 0 12px rgba(111,239,217,.08),
    0 20px 50px rgba(0,0,0,.38);
  text-align: center;
}

.radar-core strong {
  display: block;
  color: #ffffff;
  font-size: 38px;
  line-height: 1;
}

.radar-core span {
  color: rgba(246,255,252,.82);
  font-size: 12px;
  font-weight: 800;
}

.radar-node {
  z-index: 4;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
  min-width: 126px;
  padding: 8px 10px;
  border: 1px solid rgba(215,255,248,.26);
  border-radius: 8px;
  background: rgba(3,16,18,.72);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
  backdrop-filter: blur(12px);
}

.radar-node span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #031214;
  background: #8ff4e4;
  font-size: 12px;
  font-weight: 900;
}

.radar-node b {
  color: #f8fffb;
  font-size: 13px;
  white-space: nowrap;
}

.node-data { left: 12px; top: 24px; }
.node-stock { right: 4px; top: 62px; }
.node-action { left: 28px; bottom: 44px; }
.node-sync { right: 18px; bottom: 18px; }

.node-stock span { background: #f5c85a; }
.node-action span { background: #7ac2ff; }
.node-sync span { background: #a7f0a8; }

.deck-ops {
  grid-area: ops;
  align-self: stretch;
  padding: 16px;
  border: 1px solid rgba(151,238,221,.20);
  border-radius: 8px;
  background: rgba(255,255,255,.075);
  backdrop-filter: blur(16px);
}

.ops-state {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  margin: 12px 0 16px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(0,0,0,.22);
}

.ops-state span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #81f4c7;
  box-shadow: 0 0 0 7px rgba(129,244,199,.10), 0 0 20px rgba(129,244,199,.80);
  animation: deckPulse 1.8s ease-in-out infinite;
}

.ops-state strong {
  color: #ffffff;
  font-size: 18px;
}

.deck-ops dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.deck-ops dl div {
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.10);
}

.deck-ops dt {
  margin-bottom: 5px;
  color: rgba(237,255,250,.50);
  font-size: 12px;
  font-weight: 800;
}

.deck-ops dd {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  line-height: 1.45;
}

.deck-timeline {
  grid-area: timeline;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.11);
}

.deck-timeline div {
  position: relative;
  min-height: 68px;
  padding: 12px 12px 12px 15px;
  overflow: hidden;
  border: 1px solid rgba(151,238,221,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}

.deck-timeline div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #8ff4e4, #f5c85a);
}

.deck-timeline span {
  display: block;
  color: rgba(143,244,228,.84);
  font-size: 12px;
  font-weight: 900;
}

.deck-timeline b {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.3;
}

.app-shell .metrics {
  gap: 14px;
  margin: 18px 0;
}

.app-shell .metric {
  border-color: rgba(220,238,234,.34);
  background: rgba(250,255,253,.94);
  box-shadow: 0 20px 60px rgba(0,0,0,.16);
}

.app-shell .workspace {
  gap: 18px;
}

.app-shell .store-card,
.app-shell .detail {
  border-color: rgba(220,238,234,.70);
  box-shadow: 0 22px 70px rgba(0,0,0,.18);
}

@keyframes deckSweep {
  to { transform: rotate(360deg); }
}

@keyframes deckPulse {
  0%, 100% { transform: scale(1); opacity: .74; }
  50% { transform: scale(1.18); opacity: 1; }
}

@media (max-width: 1180px) {
  .command-deck {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    grid-template-areas:
      "summary ops"
      "radar radar"
      "timeline timeline";
  }

  .deck-radar {
    min-height: 330px;
  }
}

@media (max-width: 760px) {
  .app-shell .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .command-deck {
    grid-template-columns: 1fr;
    grid-template-areas:
      "summary"
      "radar"
      "ops"
      "timeline";
    padding: 16px;
  }

  .deck-summary h3 {
    font-size: 29px;
  }

  .deck-pulse-row,
  .deck-timeline {
    grid-template-columns: 1fr;
  }

  .deck-radar {
    min-height: 312px;
    transform: scale(.92);
    transform-origin: center;
  }
}

/* V1 system architecture skin: command center + operating desk. */
.app-shell {
  --system-black: #050806;
  --system-ink: #0c1715;
  --system-panel: rgba(11, 24, 21, .82);
  --system-line: rgba(167, 226, 210, .20);
  --system-mint: #77f0d0;
  --system-green: #45c89f;
  --system-amber: #f0bf5b;
  --system-red: #e85f4c;
  --work-surface: #f2f7f4;
  grid-template-columns: 320px minmax(0, 1fr);
  background:
    linear-gradient(90deg, rgba(119,240,208,.035) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(180deg, rgba(119,240,208,.026) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(135deg, #050806 0%, #071615 44%, #14190f 100%);
  overflow: visible;
}

body:has(.app-shell:not(.hidden)) {
  overflow-x: hidden;
}

.app-shell::before {
  background:
    linear-gradient(112deg, transparent 0 31%, rgba(119,240,208,.105) 32%, transparent 49%),
    linear-gradient(18deg, rgba(240,191,91,.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%, rgba(0,0,0,.34));
}

.app-shell .side {
  width: 320px;
  padding: 24px 24px 22px;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow: auto;
  background:
    linear-gradient(180deg, rgba(14,29,25,.96), rgba(4,10,9,.98)),
    linear-gradient(90deg, rgba(119,240,208,.08), transparent);
}

.app-shell .deerflow {
  position: static;
  display: block;
  margin-top: 16px;
}

.app-shell .brand {
  margin-bottom: 18px;
  padding-bottom: 18px;
}

.app-shell .brand h1 {
  font-size: 19px;
  letter-spacing: 0;
}

.side-brief {
  position: relative;
  margin-bottom: 14px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(167,226,210,.16);
  border-radius: 8px;
  color: #f8fffb;
  background:
    linear-gradient(145deg, rgba(119,240,208,.12), rgba(255,255,255,.045));
}

.side-brief::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -42px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid rgba(119,240,208,.18);
  background: radial-gradient(circle, rgba(119,240,208,.16), transparent 62%);
}

.side-brief span,
.side-brief p {
  color: rgba(239,255,250,.58);
  font-size: 12px;
}

.side-brief strong {
  display: block;
  margin: 6px 0 7px;
  color: #ffffff;
  font-size: 19px;
}

.side-brief p {
  max-width: 230px;
  line-height: 1.5;
}

.side-signal {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding: 7px 9px;
  border-radius: 6px;
  background: rgba(5,12,11,.42);
}

.side-signal i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--system-mint);
  box-shadow: 0 0 16px rgba(119,240,208,.80);
}

.side-signal b {
  color: rgba(239,255,250,.78);
  font-size: 12px;
}

.system-rail {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.side-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.side-kpis div {
  min-height: 70px;
  padding: 10px 9px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.side-kpis strong {
  display: block;
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.side-kpis span {
  display: block;
  margin-top: 8px;
  color: rgba(239,255,250,.54);
  font-size: 12px;
}

.system-rail button,
.system-rail a {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: rgba(239,255,250,.74);
  background: rgba(255,255,255,.045);
  text-align: left;
  text-decoration: none;
}

.system-rail button.active,
.system-rail a:hover {
  color: #fafffc;
  border-color: rgba(119,240,208,.34);
  background:
    linear-gradient(90deg, rgba(69,200,159,.24), rgba(255,255,255,.06));
}

.system-rail b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: #07110f;
  background: var(--system-mint);
  font-size: 12px;
}

.system-rail span {
  font-size: 13px;
  font-weight: 850;
}

.system-rail small {
  color: rgba(239,255,250,.44);
  font-size: 11px;
}

.app-shell .side .panel {
  padding: 15px;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.055);
}

.app-shell .side input {
  height: 40px;
}

.side-missions div {
  display: grid;
  gap: 7px;
}

.side-function-map div {
  display: grid;
  gap: 8px;
}

.side-function-map button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 8px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  color: rgba(239,255,250,.78);
  background: rgba(255,255,255,.045);
  text-align: left;
  cursor: pointer;
}

.side-function-map button:hover {
  border-color: rgba(119,240,208,.34);
  background: rgba(119,240,208,.10);
}

.side-function-map button.active,
.system-rail button.active {
  border-color: rgba(240,197,98,.55);
  color: #fafffb;
  background: linear-gradient(135deg, rgba(119,240,208,.18), rgba(240,197,98,.10));
  box-shadow: inset 3px 0 0 rgba(240,197,98,.85);
}

.side-function-map button.active b {
  background: linear-gradient(135deg, #f0c562, #8cf6d7);
}

.side-function-map b {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 7px;
  color: #061310;
  background: rgba(119,240,208,.90);
  font-size: 12px;
}

.side-function-map span {
  min-width: 0;
  color: rgba(239,255,250,.70);
  font-size: 12px;
  line-height: 1.35;
}

.side-missions span {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 7px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 6px;
  color: rgba(239,255,250,.76);
  background: rgba(5,12,11,.26);
  font-size: 12px;
}

.side-missions b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 24px;
  border-radius: 5px;
  color: #07110f;
  background: rgba(119,240,208,.92);
}

.app-shell .main {
  padding: 26px 28px 36px;
}

.app-shell .topbar {
  min-height: 92px;
  padding: 0 0 14px;
}

.title-block {
  min-width: 0;
}

.app-shell .topbar h2 {
  margin-top: 5px;
  color: #f7fffb;
  font-size: 33px;
  line-height: 1.12;
}

.topline {
  margin-top: 8px;
  color: rgba(232,255,248,.58);
  font-size: 13px;
}

.app-shell .status span {
  color: rgba(239,255,250,.82);
  border-color: rgba(167,226,210,.18);
  background: rgba(5,12,11,.48);
}

.action-buttons .primary,
.app-shell .primary {
  color: #05100d;
  background: linear-gradient(135deg, #8cf6d7, #45c89f);
  box-shadow: 0 16px 38px rgba(69,200,159,.20);
}

.command-deck {
  grid-template-columns: minmax(300px, .95fr) minmax(440px, 1.26fr) minmax(270px, .82fr);
  min-height: 402px;
  margin: 4px 0 16px;
  padding: 22px;
  border-color: rgba(167,226,210,.28);
  background:
    linear-gradient(140deg, rgba(7,17,16,.96), rgba(9,34,34,.94) 46%, rgba(24,25,13,.94)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 22px);
  box-shadow: 0 34px 90px rgba(0,0,0,.42);
}

.command-deck::before {
  background:
    linear-gradient(110deg, transparent 0 33%, rgba(119,240,208,.12) 34%, transparent 53%),
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 44%, rgba(0,0,0,.20));
}

.deck-summary {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.deck-kicker {
  color: rgba(119,240,208,.82);
  letter-spacing: 0;
}

.deck-summary h3 {
  max-width: 420px;
  font-size: 34px;
  line-height: 1.12;
}

.deck-summary > p:not(.deck-kicker) {
  color: rgba(239,255,250,.70);
}

.deck-pulse-row {
  margin-top: 26px;
}

.deck-pulse-row span {
  border-color: rgba(167,226,210,.22);
  background: rgba(4,12,11,.38);
}

.deck-pulse-row b {
  color: #f8fffb;
}

.deck-radar {
  min-height: 298px;
}

.radar-grid {
  width: 318px;
  height: 318px;
  opacity: .62;
}

.ring-three {
  width: 310px;
  height: 310px;
}

.radar-sweep {
  width: 288px;
  height: 288px;
  background: conic-gradient(from -30deg, rgba(119,240,208,.30), transparent 38%, transparent);
}

.radar-core {
  width: 122px;
  height: 122px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.26), transparent 34%),
    linear-gradient(145deg, #62dfbf, #386fc6);
}

.radar-node {
  background: rgba(4,12,11,.76);
  border-color: rgba(207,255,245,.28);
}

.node-data { left: 10px; top: 28px; }
.node-stock { right: 0; top: 76px; }
.node-action { left: 28px; bottom: 58px; }
.node-sync { right: 22px; bottom: 32px; }

.deck-ops {
  border-color: rgba(167,226,210,.23);
  background: rgba(255,255,255,.065);
}

.ops-state {
  background: rgba(4,12,11,.48);
}

.deck-timeline {
  gap: 12px;
}

.deck-timeline div {
  background: rgba(4,12,11,.36);
  border-color: rgba(167,226,210,.20);
}

.system-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.system-layer {
  position: relative;
  min-height: 142px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  color: #f8fffb;
  background:
    linear-gradient(150deg, rgba(13,27,25,.88), rgba(5,13,12,.82));
  box-shadow: 0 18px 50px rgba(0,0,0,.23);
}

.system-layer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--system-mint), var(--system-amber));
}

.system-layer span {
  color: rgba(119,240,208,.78);
  font-size: 11px;
  font-weight: 900;
}

.system-layer h3 {
  margin: 8px 0 7px;
  font-size: 18px;
}

.system-layer p {
  max-width: 260px;
  color: rgba(239,255,250,.58);
  font-size: 12px;
  line-height: 1.55;
}

.system-layer strong {
  position: absolute;
  right: 14px;
  bottom: 10px;
  color: rgba(255,255,255,.94);
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.operation-task-center {
  position: relative;
  margin: 0 0 16px;
  padding: 18px;
  overflow: hidden;
  color: #f8fffb;
  border: 1px solid rgba(119,240,208,.28);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(119,240,208,.12), transparent 18%, rgba(240,191,91,.10) 74%, transparent),
    radial-gradient(circle at 18% 16%, rgba(119,240,208,.18), transparent 34%),
    linear-gradient(145deg, rgba(3,10,14,.98), rgba(8,22,23,.96) 46%, rgba(10,15,22,.98));
  box-shadow: 0 30px 88px rgba(0,0,0,.36);
}

.operation-task-center::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(167,226,210,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,226,210,.045) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 92%);
}

.task-center-head,
.task-center-layout {
  position: relative;
  z-index: 1;
}

.task-center-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.task-center-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 28px;
  line-height: 1.16;
}

.task-center-head p {
  max-width: 940px;
  color: rgba(239,255,250,.70);
  line-height: 1.6;
}

.task-center-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(119,240,208,.30);
  border-radius: 999px;
  color: rgba(119,240,208,.94);
  background: rgba(3,10,14,.52);
  font-size: 12px;
  box-shadow: 0 0 28px rgba(119,240,208,.12);
}

.task-center-layout {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1.44fr) minmax(260px, .92fr);
  gap: 12px;
  margin-top: 14px;
}

.task-center-score,
.task-center-phases,
.task-center-queue,
.task-center-lanes,
.task-center-contracts {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.16);
  border-radius: 8px;
  background: rgba(2,9,12,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.task-center-score {
  min-height: 336px;
}

.task-center-phases {
  grid-row: span 2;
  min-height: 482px;
}

.task-center-queue {
  grid-row: span 2;
  min-height: 482px;
}

.task-center-lanes,
.task-center-contracts {
  min-height: 134px;
}

.task-center-score > span,
.task-center-phases > span,
.task-center-queue > span,
.task-center-lanes > span,
.task-center-contracts > span {
  color: rgba(119,240,208,.82);
  font-size: 12px;
  font-weight: 950;
}

.task-center-score strong {
  display: block;
  margin: 18px 0 8px;
  color: #ffffff;
  font-size: 50px;
  line-height: 1;
  letter-spacing: 0;
}

.task-center-score p,
.task-phase p,
.task-work-item p,
.task-lane p,
.task-contract p {
  color: rgba(239,255,250,.64);
  font-size: 12px;
  line-height: 1.5;
}

.task-center-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.task-center-stat-grid b {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.048);
}

.task-center-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.task-center-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.task-center-meter {
  height: 9px;
  margin: 14px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}

.task-center-meter i {
  display: block;
  width: 6%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(119,240,208,.98), rgba(240,191,91,.94));
}

#taskCenterPhaseList,
#taskCenterWorkQueue,
#taskCenterLanes,
#taskCenterContracts {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

#taskCenterPhaseList,
#taskCenterWorkQueue {
  max-height: 428px;
  overflow: auto;
  padding-right: 4px;
}

.task-phase,
.task-work-item,
.task-lane,
.task-contract {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.task-phase.ready,
.task-contract strong {
  border-color: rgba(119,240,208,.28);
}

.task-phase.warm {
  border-color: rgba(240,191,91,.26);
  background: rgba(240,191,91,.065);
}

.task-phase.blocked {
  border-color: rgba(255,112,88,.24);
  background: rgba(255,112,88,.055);
}

.task-phase header,
.task-work-item header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.task-phase header b,
.task-work-item header b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061310;
  background: rgba(119,240,208,.92);
  font-size: 11px;
}

.task-phase.warm header b,
.task-work-item header b {
  background: rgba(240,191,91,.92);
}

.task-phase.blocked header b {
  color: #fff6ef;
  background: rgba(255,112,88,.82);
}

.task-phase header strong,
.task-work-item header strong,
.task-lane b,
.task-contract b {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.35;
}

.task-phase header span,
.task-work-item header span {
  color: rgba(119,240,208,.84);
  font-size: 11px;
  white-space: nowrap;
}

.task-phase p,
.task-phase small,
.task-phase footer,
.task-work-item p,
.task-work-item small {
  display: block;
  margin-top: 8px;
}

.task-phase small,
.task-work-item small,
.task-lane small {
  color: rgba(239,255,250,.52);
  font-size: 11px;
  line-height: 1.45;
}

.task-phase footer {
  display: grid;
  grid-template-columns: minmax(118px, .42fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.task-phase footer em,
.task-phase footer span {
  color: rgba(239,255,250,.58);
  font-style: normal;
  font-size: 11px;
  line-height: 1.45;
}

.task-work-item.done {
  opacity: .66;
}

.task-lane {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 10px;
}

.task-lane strong {
  justify-self: end;
  color: rgba(119,240,208,.94);
  font-size: 24px;
  line-height: 1;
}

.task-lane p,
.task-lane small {
  grid-column: 1 / -1;
}

.task-contract strong {
  display: inline-flex;
  width: fit-content;
  margin: 6px 0;
  padding: 4px 7px;
  border: 1px solid rgba(119,240,208,.24);
  border-radius: 999px;
  color: rgba(119,240,208,.90);
  background: rgba(119,240,208,.075);
  font-size: 11px;
}

.recovery-sla {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(240,191,91,.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 84% 0%, rgba(255,112,88,.16), transparent 30%),
    radial-gradient(circle at 8% 16%, rgba(119,240,208,.12), transparent 34%),
    linear-gradient(145deg, rgba(5,12,16,.98), rgba(14,20,22,.96) 48%, rgba(17,11,13,.98));
  box-shadow: 0 24px 72px rgba(0,0,0,.34);
}

.sla-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.sla-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.18;
}

.sla-head p {
  max-width: 920px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.sla-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(240,191,91,.30);
  border-radius: 999px;
  color: rgba(240,191,91,.94);
  background: rgba(5,12,16,.44);
  font-size: 12px;
}

.sla-layout {
  display: grid;
  grid-template-columns: minmax(200px, .72fr) minmax(0, 1.42fr) minmax(230px, .86fr);
  gap: 12px;
  margin-top: 14px;
}

.sla-score,
.sla-list-panel,
.sla-stage-panel,
.sla-operator-panel,
.sla-rule-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(2,9,12,.44);
}

.sla-score {
  min-height: 318px;
}

.sla-list-panel {
  grid-row: span 2;
  min-height: 456px;
}

.sla-operator-panel {
  grid-row: span 2;
  min-height: 456px;
}

.sla-stage-panel,
.sla-rule-panel {
  min-height: 138px;
}

.sla-score > span,
.sla-list-panel > span,
.sla-stage-panel > span,
.sla-operator-panel > span,
.sla-rule-panel > span {
  color: rgba(240,191,91,.90);
  font-size: 12px;
  font-weight: 950;
}

.sla-score strong {
  display: block;
  margin: 18px 0 8px;
  color: #ffffff;
  font-size: 46px;
  line-height: 1;
}

.sla-score p,
.sla-row p,
.sla-bucket p,
.sla-operator p,
#slaRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.5;
}

.sla-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.sla-stat-grid b,
.sla-row,
.sla-bucket,
.sla-operator,
#slaRules span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.sla-stat-grid small {
  display: block;
  color: rgba(239,255,250,.50);
  font-size: 11px;
}

.sla-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 23px;
  font-variant-numeric: tabular-nums;
}

.sla-meter {
  height: 9px;
  margin: 14px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}

.sla-meter i {
  display: block;
  width: 4%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,112,88,.92), rgba(240,191,91,.94), rgba(119,240,208,.92));
}

#slaRowList,
#slaStageBuckets,
#slaOperatorBuckets,
#slaRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

#slaRowList,
#slaOperatorBuckets {
  max-height: 404px;
  overflow: auto;
  padding-right: 4px;
}

.sla-row.overdue {
  border-color: rgba(255,112,88,.34);
  background: rgba(255,112,88,.08);
}

.sla-row.near {
  border-color: rgba(240,191,91,.32);
  background: rgba(240,191,91,.07);
}

.sla-row header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.sla-row header b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061310;
  background: rgba(240,191,91,.92);
  font-size: 11px;
}

.sla-row.overdue header b {
  color: #fff6ef;
  background: rgba(255,112,88,.84);
}

.sla-row header strong,
.sla-bucket b,
.sla-operator strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.35;
}

.sla-row header span {
  color: rgba(240,191,91,.92);
  font-size: 11px;
  white-space: nowrap;
}

.sla-row p,
.sla-row small {
  display: block;
  margin-top: 8px;
}

.sla-row small,
.sla-bucket small,
.sla-operator span {
  color: rgba(239,255,250,.52);
  font-size: 11px;
  line-height: 1.45;
}

.sla-bucket {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 10px;
}

.sla-bucket strong {
  justify-self: end;
  color: rgba(240,191,91,.96);
  font-size: 24px;
  line-height: 1;
}

.sla-bucket p,
.sla-bucket small {
  grid-column: 1 / -1;
}

.sla-operator span,
.sla-operator p {
  display: block;
  margin-top: 6px;
}

.feishu-sla {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(119,240,208,.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 86% 8%, rgba(119,240,208,.16), transparent 30%),
    linear-gradient(145deg, rgba(4,12,15,.98), rgba(8,22,24,.94) 48%, rgba(12,15,20,.98));
  box-shadow: 0 24px 72px rgba(0,0,0,.32);
}

.feishu-sla-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.feishu-sla-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.18;
}

.feishu-sla-head p {
  max-width: 920px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.feishu-sla-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(119,240,208,.28);
  border-radius: 999px;
  color: rgba(119,240,208,.92);
  background: rgba(5,12,16,.44);
  font-size: 12px;
}

.feishu-sla-layout {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1.52fr) minmax(220px, .82fr);
  gap: 12px;
  margin-top: 14px;
}

.feishu-sla-score,
.feishu-sla-message-panel,
.feishu-sla-bucket-panel,
.feishu-sla-rule-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(2,9,12,.44);
}

.feishu-sla-message-panel {
  grid-row: span 2;
  min-height: 510px;
}

.feishu-sla-score,
.feishu-sla-bucket-panel,
.feishu-sla-rule-panel {
  min-height: 160px;
}

.feishu-sla-score > span,
.feishu-sla-message-panel > span,
.feishu-sla-bucket-panel > span,
.feishu-sla-rule-panel > span {
  color: rgba(119,240,208,.84);
  font-size: 12px;
  font-weight: 950;
}

.feishu-sla-score strong {
  display: block;
  margin: 18px 0 8px;
  color: #ffffff;
  font-size: 46px;
  line-height: 1;
}

.feishu-sla-score p,
.feishu-sla-message p,
.feishu-sla-bucket p,
#feishuSlaRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.5;
}

.feishu-sla-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 10px;
}

.feishu-sla-stat-grid b,
.feishu-sla-message,
.feishu-sla-bucket,
#feishuSlaRules span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.feishu-sla-stat-grid small {
  display: block;
  color: rgba(239,255,250,.50);
  font-size: 11px;
}

.feishu-sla-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 23px;
  font-variant-numeric: tabular-nums;
}

#feishuSlaMessageList,
#feishuSlaBuckets,
#feishuSlaRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

#feishuSlaMessageList {
  max-height: 456px;
  overflow: auto;
  padding-right: 4px;
}

.feishu-sla-message.ready {
  border-color: rgba(119,240,208,.28);
}

.feishu-sla-message.blocked {
  border-color: rgba(240,191,91,.26);
  background: rgba(240,191,91,.06);
}

.feishu-sla-message header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.feishu-sla-message header b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061310;
  background: rgba(119,240,208,.90);
  font-size: 11px;
}

.feishu-sla-message header strong,
.feishu-sla-bucket b {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.35;
}

.feishu-sla-message header span {
  color: rgba(119,240,208,.86);
  font-size: 11px;
  white-space: nowrap;
}

.feishu-sla-message p,
.feishu-sla-message small {
  display: block;
  margin-top: 8px;
}

.feishu-sla-message small {
  color: rgba(239,255,250,.52);
  font-size: 11px;
  line-height: 1.45;
}

.feishu-sla-message pre {
  max-height: 138px;
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  color: rgba(239,255,250,.76);
  background: rgba(0,0,0,.22);
  white-space: pre-wrap;
  word-break: break-word;
}

.feishu-sla-message button {
  width: 100%;
  min-height: 34px;
  margin-top: 10px;
  border: 1px solid rgba(119,240,208,.32);
  border-radius: 8px;
  color: #061310;
  background: linear-gradient(135deg, rgba(119,240,208,.94), rgba(240,191,91,.86));
  font-weight: 950;
  cursor: pointer;
}

.feishu-sla-bucket {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 10px;
}

.feishu-sla-bucket strong {
  justify-self: end;
  color: rgba(119,240,208,.96);
  font-size: 24px;
  line-height: 1;
}

.feishu-sla-bucket p {
  grid-column: 1 / -1;
}

.dianjin-engine {
  position: relative;
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(240,191,91,.24);
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(240,191,91,.11), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(119,240,208,.14), transparent 30%),
    linear-gradient(145deg, rgba(7,10,11,.98), rgba(18,20,16,.94) 48%, rgba(5,14,18,.96));
  box-shadow: 0 24px 72px rgba(0,0,0,.31);
  overflow: hidden;
}

.dianjin-engine::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 78%, transparent);
  opacity: .38;
}

.dianjin-head,
.dianjin-layout {
  position: relative;
  z-index: 1;
}

.dianjin-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.dianjin-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.18;
}

.dianjin-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.dianjin-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(240,191,91,.28);
  border-radius: 999px;
  color: rgba(240,191,91,.96);
  background: rgba(5,12,16,.48);
  font-size: 12px;
}

.dianjin-layout {
  display: grid;
  grid-template-columns: minmax(190px, .76fr) minmax(0, 1.45fr) minmax(210px, .82fr);
  gap: 12px;
  margin-top: 14px;
}

.dianjin-score,
.dianjin-workbench,
.dianjin-rules {
  min-width: 0;
  min-height: 320px;
  padding: 14px;
  border: 1px solid rgba(240,191,91,.16);
  border-radius: 8px;
  background: rgba(5,12,16,.38);
  backdrop-filter: blur(8px);
}

.dianjin-score > span,
.dianjin-workbench > span,
.dianjin-rules > span {
  display: block;
  margin-bottom: 10px;
  color: rgba(240,191,91,.86);
  font-size: 12px;
  font-weight: 950;
}

.dianjin-score strong {
  display: block;
  margin: 16px 0 8px;
  color: #ffffff;
  font-size: 52px;
  line-height: 1;
}

.dianjin-score p,
.dianjin-store p,
.dianjin-store small,
#dianjinRules span,
#dianjinOwnerWords span {
  color: rgba(239,255,250,.64);
  font-size: 12px;
  line-height: 1.48;
}

.dianjin-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.dianjin-stat-grid b,
.dianjin-store,
#dianjinRules span,
#dianjinOwnerWords span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(240,191,91,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.dianjin-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.dianjin-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 20px;
  word-break: break-word;
}

#dianjinStoreList,
#dianjinRules,
#dianjinOwnerWords {
  display: grid;
  gap: 8px;
}

#dianjinStoreList {
  max-height: 372px;
  overflow: auto;
  padding-right: 4px;
}

.dianjin-store {
  transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}

.dianjin-store.ready {
  border-color: rgba(119,240,208,.28);
  background: linear-gradient(135deg, rgba(119,240,208,.08), rgba(240,191,91,.07));
}

.dianjin-store.blocked {
  opacity: .78;
}

.dianjin-store header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.dianjin-store header b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061310;
  background: rgba(240,191,91,.92);
  font-size: 11px;
}

.dianjin-store.ready header b {
  background: rgba(119,240,208,.92);
}

.dianjin-store header strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.35;
}

.dianjin-store header span {
  color: rgba(240,191,91,.84);
  font-size: 11px;
}

.dianjin-store small {
  display: block;
  margin-top: 8px;
  color: rgba(239,255,250,.48);
}

#dianjinOwnerWords {
  margin-top: 8px;
}

.role-action-center {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(119,240,208,.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 80% 0%, rgba(240,191,91,.12), transparent 32%),
    linear-gradient(145deg, rgba(5,13,15,.98), rgba(9,24,23,.94) 46%, rgba(8,12,18,.96));
  box-shadow: 0 24px 68px rgba(0,0,0,.30);
}

.role-action-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.role-action-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.18;
}

.role-action-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.role-action-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(119,240,208,.22);
  border-radius: 999px;
  color: rgba(119,240,208,.90);
  background: rgba(5,12,16,.44);
  font-size: 12px;
}

.role-action-layout {
  display: grid;
  grid-template-columns: minmax(190px, .75fr) minmax(0, 1.45fr) minmax(190px, .8fr);
  gap: 12px;
  margin-top: 14px;
}

.role-action-score,
.role-action-workbench,
.role-action-rules {
  min-width: 0;
  min-height: 320px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,16,.36);
}

.role-action-score > span,
.role-action-workbench > span,
.role-action-rules > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.role-action-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 48px;
  line-height: 1;
}

.role-action-score p,
.role-action-workbench h4 {
  color: rgba(239,255,250,.66);
  font-size: 12px;
  line-height: 1.5;
}

.role-action-queue {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 10px;
}

.role-action-queue b,
.role-action-filter button {
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.role-action-queue b {
  padding: 9px;
}

.role-action-queue small {
  display: block;
  color: rgba(239,255,250,.50);
  font-size: 11px;
}

.role-action-queue em {
  display: block;
  margin-top: 5px;
  color: #ffffff;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
}

.role-action-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 10px;
}

.role-action-filter button {
  min-height: 30px;
  padding: 0 10px;
  color: rgba(239,255,250,.68);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.role-action-filter button.active {
  color: #061310;
  border-color: rgba(119,240,208,.72);
  background: linear-gradient(135deg, rgba(119,240,208,.94), rgba(240,191,91,.86));
}

.role-action-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.role-action-stat-grid b,
.role-action-card,
#roleActionRules span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.role-action-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.role-action-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

.role-action-meter {
  height: 9px;
  margin: 12px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}

.role-action-meter i {
  display: block;
  width: 4%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--system-mint), rgba(240,191,91,.92));
}

#roleActionList,
#roleActionRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 372px;
  overflow: auto;
  padding-right: 4px;
}

.role-action-card {
  transition: opacity .18s ease, filter .18s ease, border-color .18s ease;
}

.role-action-card.done {
  opacity: .54;
  filter: grayscale(.35);
}

.role-action-card.waiting {
  border-color: rgba(240,191,91,.28);
  background: rgba(240,191,91,.07);
}

.role-action-card.replenish {
  border-color: rgba(119,240,208,.24);
  background:
    linear-gradient(135deg, rgba(119,240,208,.08), rgba(240,191,91,.05)),
    rgba(255,255,255,.045);
}

.role-action-card.dianjin {
  border-color: rgba(240,191,91,.30);
  background:
    linear-gradient(135deg, rgba(240,191,91,.10), rgba(119,240,208,.05)),
    rgba(255,255,255,.045);
}

.role-action-card header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.role-action-card header b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061310;
  background: rgba(119,240,208,.90);
  font-size: 11px;
}

.role-action-card.waiting header b {
  background: rgba(240,191,91,.92);
}

.role-action-card header strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.35;
}

.role-action-card header span {
  color: rgba(119,240,208,.82);
  font-size: 11px;
}

.role-action-card p,
.role-action-card small,
#roleActionRules span,
#roleActionResult {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.role-action-card p,
.role-action-card small {
  display: block;
  margin-top: 8px;
}

.role-action-replenish-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.role-action-replenish-meta em {
  min-height: 28px;
  padding: 7px 8px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  color: rgba(239,255,250,.76);
  background: rgba(5,12,16,.38);
  font-style: normal;
  font-size: 11px;
}

.role-action-product {
  display: inline-flex;
  min-width: 118px;
}

.role-action-product .product-link-action {
  width: 100%;
  min-height: 30px;
}

.role-action-card footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.role-action-card footer em {
  color: rgba(239,255,250,.52);
  font-style: normal;
  font-size: 11px;
}

.role-action-card button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(119,240,208,.28);
  border-radius: 8px;
  color: #061310;
  background: linear-gradient(135deg, rgba(119,240,208,.94), rgba(240,191,91,.92));
  font-weight: 950;
  cursor: pointer;
}

.role-action-card button:disabled {
  color: rgba(239,255,250,.48);
  background: rgba(255,255,255,.08);
  cursor: not-allowed;
}

#roleActionResult {
  min-height: 22px;
  margin-top: 10px;
}

.dispatch-queue {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(119,240,208,.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 0%, rgba(119,240,208,.12), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(240,191,91,.10), transparent 34%),
    linear-gradient(145deg, rgba(5,12,16,.98), rgba(10,25,24,.94));
  box-shadow: 0 24px 68px rgba(0,0,0,.28);
}

.dispatch-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.dispatch-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.dispatch-head p {
  max-width: 850px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.dispatch-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(119,240,208,.22);
  border-radius: 999px;
  color: rgba(119,240,208,.90);
  background: rgba(5,12,16,.44);
  font-size: 12px;
}

.dispatch-layout {
  display: grid;
  grid-template-columns: minmax(210px, .78fr) minmax(0, 1.35fr) minmax(190px, .82fr);
  gap: 12px;
  margin-top: 14px;
}

.dispatch-score,
.dispatch-list-panel,
.dispatch-operator-panel,
.dispatch-step-panel,
.dispatch-rule-panel {
  min-width: 0;
  min-height: 260px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,16,.36);
}

.dispatch-list-panel {
  grid-row: span 2;
}

.dispatch-score > span,
.dispatch-list-panel > span,
.dispatch-operator-panel > span,
.dispatch-step-panel > span,
.dispatch-rule-panel > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.dispatch-score > strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 42px;
  line-height: 1;
}

.dispatch-score p {
  color: rgba(239,255,250,.66);
  font-size: 12px;
  line-height: 1.5;
}

.dispatch-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
}

.dispatch-stat-grid b,
.dispatch-row,
.dispatch-bucket,
.dispatch-step,
#dispatchRules span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.dispatch-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.dispatch-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 20px;
}

#dispatchQueueList,
#dispatchOperatorBuckets,
#dispatchSteps,
#dispatchRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.dispatch-row.ready {
  border-color: rgba(119,240,208,.24);
  background: rgba(119,240,208,.07);
}

.dispatch-row.blocked {
  border-color: rgba(240,191,91,.22);
  background: rgba(240,191,91,.06);
}

.dispatch-row header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.dispatch-row header b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061310;
  background: rgba(119,240,208,.90);
  font-size: 11px;
}

.dispatch-row header strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.35;
}

.dispatch-row header span {
  color: rgba(119,240,208,.82);
  font-size: 11px;
}

.dispatch-row p,
.dispatch-row small,
.dispatch-bucket span,
.dispatch-step p,
#dispatchRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.dispatch-row > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.dispatch-row em {
  padding: 7px 8px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  color: rgba(239,255,250,.76);
  background: rgba(5,12,16,.38);
  font-style: normal;
  font-size: 11px;
}

.dispatch-row footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.dispatch-row button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(119,240,208,.28);
  border-radius: 8px;
  color: #061310;
  background: linear-gradient(135deg, rgba(119,240,208,.94), rgba(240,191,91,.92));
  font-weight: 950;
  cursor: pointer;
}

.dispatch-bucket strong,
.dispatch-step strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
}

.dispatch-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.dispatch-step p {
  grid-column: 1 / -1;
  margin: 0;
}

.dispatch-step b {
  color: rgba(119,240,208,.82);
  font-size: 12px;
}

.dispatch-step span {
  color: rgba(240,191,91,.88);
  font-size: 11px;
}

.action-writeback {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(119,240,208,.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 0%, rgba(119,240,208,.10), transparent 30%),
    radial-gradient(circle at 84% 20%, rgba(240,191,91,.10), transparent 34%),
    linear-gradient(145deg, rgba(5,12,16,.98), rgba(10,24,25,.94));
  box-shadow: 0 24px 68px rgba(0,0,0,.28);
}

.writeback-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.writeback-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.writeback-head p {
  max-width: 850px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.writeback-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(119,240,208,.22);
  border-radius: 999px;
  color: rgba(119,240,208,.90);
  background: rgba(5,12,16,.44);
  font-size: 12px;
}

.writeback-layout {
  display: grid;
  grid-template-columns: minmax(210px, .78fr) minmax(0, 1.35fr) minmax(210px, .86fr);
  gap: 12px;
  margin-top: 14px;
}

.writeback-score,
.writeback-list-panel,
.writeback-step-panel,
.writeback-rule-panel {
  min-width: 0;
  min-height: 250px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,16,.36);
}

.writeback-list-panel {
  grid-row: span 2;
}

.writeback-score > span,
.writeback-list-panel > span,
.writeback-step-panel > span,
.writeback-rule-panel > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.writeback-score > strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 40px;
  line-height: 1;
}

.writeback-score p {
  color: rgba(239,255,250,.66);
  font-size: 12px;
  line-height: 1.5;
}

.writeback-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
}

.writeback-stat-grid b,
.writeback-row,
.writeback-step,
#actionWritebackRules span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.writeback-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.writeback-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 20px;
}

#actionWritebackList,
#actionWritebackSteps,
#actionWritebackRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.writeback-row.ready {
  border-color: rgba(119,240,208,.24);
  background: rgba(119,240,208,.07);
}

.writeback-row.pending {
  border-color: rgba(240,191,91,.22);
  background: rgba(240,191,91,.06);
}

.writeback-row header,
.writeback-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.writeback-row header b,
.writeback-step b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061310;
  background: rgba(119,240,208,.90);
  font-size: 11px;
}

.writeback-row header strong,
.writeback-step strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.35;
}

.writeback-row header span,
.writeback-step span {
  color: rgba(119,240,208,.82);
  font-size: 11px;
}

.writeback-row p,
.writeback-row small,
.writeback-step p,
#actionWritebackRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.writeback-step p {
  grid-column: 1 / -1;
  margin: 0;
}

.automation-scheduler {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(119,240,208,.24);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(4,12,16,.96), rgba(10,24,22,.93), rgba(9,14,18,.94)),
    linear-gradient(90deg, rgba(119,240,208,.08), transparent 40%, rgba(240,191,91,.07));
  box-shadow: 0 24px 68px rgba(0,0,0,.30);
}

.scheduler-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.scheduler-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.scheduler-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.scheduler-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(119,240,208,.22);
  border-radius: 999px;
  color: rgba(119,240,208,.90);
  background: rgba(5,12,16,.44);
  font-size: 12px;
}

.scheduler-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
  margin-top: 14px;
}

.scheduler-score,
.scheduler-task-panel,
.scheduler-gate-panel,
.scheduler-rules-panel {
  min-width: 0;
  min-height: 300px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,16,.36);
}

.scheduler-score > span,
.scheduler-task-panel > span,
.scheduler-gate-panel > span,
.scheduler-rules-panel > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.scheduler-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 52px;
  line-height: 1;
}

.scheduler-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.scheduler-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.scheduler-stat-grid b,
.scheduler-task,
.scheduler-gate,
#schedulerRules span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.scheduler-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.scheduler-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

#schedulerTaskList,
#schedulerGateList,
#schedulerRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 292px;
  overflow: auto;
  padding-right: 4px;
}

.scheduler-task header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.scheduler-task header b,
.scheduler-gate b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061310;
  background: rgba(119,240,208,.90);
  font-size: 11px;
}

.scheduler-task.blocked header b,
.scheduler-gate.pending b {
  background: rgba(240,191,91,.92);
}

.scheduler-task header strong,
.scheduler-gate strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.scheduler-task header span {
  color: rgba(240,191,91,.86);
  font-size: 11px;
}

.scheduler-task p,
.scheduler-task small,
.scheduler-gate p,
#schedulerRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.scheduler-task p,
.scheduler-task small,
.scheduler-gate p {
  display: block;
  margin-top: 8px;
}

.automation-runner {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(113,177,255,.25);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(5,10,18,.98), rgba(10,21,31,.94) 48%, rgba(13,18,20,.96)),
    linear-gradient(90deg, rgba(113,177,255,.10), transparent 44%, rgba(119,240,208,.08));
  box-shadow: 0 24px 68px rgba(0,0,0,.32);
}

.runner-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.runner-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.runner-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.runner-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(113,177,255,.25);
  border-radius: 999px;
  color: rgba(159,203,255,.94);
  background: rgba(4,10,18,.52);
  font-size: 12px;
}

.runner-layout {
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(300px, 1.15fr) minmax(260px, 1fr) minmax(220px, .85fr);
  gap: 12px;
  margin-top: 14px;
}

.runner-score,
.runner-task-panel,
.runner-log-panel,
.runner-rules-panel {
  min-width: 0;
  min-height: 318px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  background: rgba(5,11,18,.42);
}

.runner-score > span,
.runner-task-panel > span,
.runner-log-panel > span,
.runner-rules-panel > span {
  color: rgba(159,203,255,.88);
  font-size: 12px;
  font-weight: 950;
}

.runner-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 52px;
  line-height: 1;
}

.runner-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.runner-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.runner-stat-grid b,
.runner-task,
.runner-log,
#runnerRules span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.runner-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.runner-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

#runnerTaskList,
#runnerLogList,
#runnerRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 310px;
  overflow: auto;
  padding-right: 4px;
}

.runner-task header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.runner-task header b,
.runner-log b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061018;
  background: rgba(159,203,255,.94);
  font-size: 11px;
}

.runner-task.blocked header b,
.runner-log.blocked b {
  background: rgba(240,191,91,.92);
}

.runner-task header strong,
.runner-log strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.runner-task header span,
.runner-log span {
  color: rgba(119,240,208,.76);
  font-size: 11px;
}

.runner-task p,
.runner-task small,
.runner-log p,
#runnerRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.runner-task p,
.runner-task small,
.runner-log p {
  display: block;
  margin-top: 8px;
}

.runner-score button {
  width: 100%;
  min-height: 42px;
  margin: 10px 0 8px;
  border: 1px solid rgba(119,240,208,.26);
  border-radius: 8px;
  color: #061310;
  background: linear-gradient(135deg, rgba(119,240,208,.94), rgba(159,203,255,.94));
  font-weight: 950;
  cursor: pointer;
}

.runner-score button:disabled {
  color: rgba(239,255,250,.42);
  background: rgba(255,255,255,.08);
  cursor: not-allowed;
}

.runner-result {
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  color: rgba(239,255,250,.66);
  background: rgba(255,255,255,.045);
  font-size: 12px;
  line-height: 1.45;
}

.runner-result strong {
  display: block;
  margin: 0 0 5px;
  color: #ffffff;
  font-size: 13px;
}

.runner-result p {
  margin: 0;
}

.runner-log.muted b {
  color: rgba(239,255,250,.56);
  background: rgba(255,255,255,.10);
}

.mission-lattice {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(8,19,17,.94), rgba(9,28,26,.90) 48%, rgba(20,30,22,.88)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 46px);
  box-shadow: 0 24px 72px rgba(0,0,0,.30);
}

.lattice-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.lattice-head h3 {
  max-width: 780px;
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 28px;
  line-height: 1.18;
}

.lattice-head p:not(.eyebrow) {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.62;
}

.lattice-head > span {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(167,226,210,.20);
  border-radius: 999px;
  color: rgba(239,255,250,.78);
  background: rgba(5,12,11,.44);
  font-size: 12px;
  font-weight: 850;
}

.lattice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.lattice-grid article {
  min-height: 204px;
  padding: 15px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
}

.lattice-grid b {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #06100d;
  background: var(--system-mint);
  font-size: 11px;
  font-weight: 950;
}

.lattice-grid h4 {
  margin: 14px 0 8px;
  color: #ffffff;
  font-size: 19px;
}

.lattice-grid p {
  color: rgba(239,255,250,.68);
  line-height: 1.56;
  font-size: 13px;
}

.lattice-grid small {
  display: block;
  margin-top: 12px;
  color: rgba(240,191,91,.82);
  line-height: 1.4;
}

.lattice-grid a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-top: 16px;
  padding: 0 11px;
  color: #06100d;
  text-decoration: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--system-mint), var(--system-amber));
  font-size: 12px;
  font-weight: 900;
}

.role-lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.role-lanes div {
  min-height: 104px;
  padding: 13px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(5,12,11,.38);
}

.role-lanes span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 900;
}

.role-lanes strong {
  display: block;
  margin: 7px 0 5px;
  color: #ffffff;
  font-size: 15px;
}

.role-lanes p {
  color: rgba(239,255,250,.58);
  line-height: 1.45;
  font-size: 12px;
}

.iteration-baseline {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  background:
    linear-gradient(150deg, rgba(6,15,14,.94), rgba(10,21,18,.92)),
    linear-gradient(90deg, rgba(240,191,91,.055), transparent 46%, rgba(119,240,208,.07));
  box-shadow: 0 22px 64px rgba(0,0,0,.25);
}

.iteration-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.iteration-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.18;
}

.iteration-head h3 span {
  color: var(--system-mint);
}

.iteration-head h3 b {
  color: #ffffff;
}

.iteration-head p {
  max-width: 880px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.iteration-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(167,226,210,.18);
  border-radius: 999px;
  color: rgba(239,255,250,.72);
  background: rgba(5,12,11,.42);
  font-size: 12px;
}

.baseline-north {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 66px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(119,240,208,.20);
  border-radius: 8px;
  background: rgba(119,240,208,.065);
}

.baseline-north span {
  color: #06100d;
  background: var(--system-mint);
  border-radius: 999px;
  padding: 7px 9px;
  text-align: center;
  font-size: 12px;
  font-weight: 950;
}

.baseline-north p {
  color: rgba(239,255,250,.78);
  line-height: 1.55;
}

.baseline-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.16fr) minmax(300px, .92fr);
  gap: 12px;
  margin-top: 14px;
}

.version-stack,
.loop-stack,
.next-stack {
  min-height: 320px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,11,.32);
}

.version-stack > span,
.loop-stack > span,
.next-stack > span {
  display: block;
  margin-bottom: 10px;
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

#versionStackList,
#closedLoopList,
#nextUpgradeList {
  display: grid;
  gap: 8px;
}

.version-step,
.loop-step,
.next-step {
  position: relative;
  min-height: 76px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.version-step.current {
  border-color: rgba(119,240,208,.42);
  background: linear-gradient(135deg, rgba(119,240,208,.14), rgba(255,255,255,.045));
}

.version-step b,
.loop-step b,
.next-step b {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #06100d;
  background: rgba(119,240,208,.92);
  font-size: 11px;
  font-weight: 950;
}

.loop-step b {
  background: rgba(240,191,91,.92);
}

.version-step strong,
.loop-step strong,
.next-step strong {
  display: block;
  margin-top: 8px;
  color: #ffffff;
  font-size: 14px;
}

.version-step span,
.loop-step span,
.next-step span {
  position: absolute;
  right: 10px;
  top: 10px;
  max-width: 150px;
  padding: 5px 7px;
  border-radius: 6px;
  color: rgba(239,255,250,.74);
  background: rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
}

.version-step p,
.loop-step p,
.next-step p {
  margin-top: 6px;
  padding-right: 44px;
  color: rgba(239,255,250,.62);
  line-height: 1.48;
  font-size: 12px;
}

.version-step small,
.loop-step small {
  display: block;
  margin-top: 6px;
  color: rgba(240,191,91,.76);
  line-height: 1.35;
  font-size: 11px;
}

.connector-center {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(5,13,12,.94), rgba(12,24,22,.90)),
    linear-gradient(90deg, rgba(119,240,208,.08), transparent 38%, rgba(122,168,255,.075));
  box-shadow: 0 22px 64px rgba(0,0,0,.25);
}

.connector-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.connector-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.18;
}

.connector-head p {
  max-width: 880px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.connector-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(167,226,210,.18);
  border-radius: 999px;
  color: rgba(239,255,250,.72);
  background: rgba(5,12,11,.42);
  font-size: 12px;
}

.connector-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  margin-top: 14px;
}

.connector-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.connector-card,
.connector-pipeline {
  padding: 15px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,11,.34);
}

.connector-card.meituan {
  border-color: rgba(240,191,91,.26);
}

.connector-card.feishu {
  border-color: rgba(122,168,255,.26);
}

.connector-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.connector-card-head span,
.connector-pipeline > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.connector-card-head strong {
  padding: 6px 8px;
  border-radius: 999px;
  color: #160f05;
  background: rgba(240,191,91,.92);
  font-size: 11px;
}

.connector-card h4 {
  margin: 12px 0 10px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.35;
}

.connector-card p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
}

.connector-card p b {
  margin-right: 8px;
  color: var(--system-mint);
}

.connector-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.connector-columns div {
  padding: 10px;
  border: 1px solid rgba(167,226,210,.10);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.connector-columns small {
  display: block;
  margin-bottom: 8px;
  color: rgba(240,191,91,.78);
  font-weight: 900;
}

.connector-columns em {
  display: block;
  margin: 0 0 6px;
  color: rgba(239,255,250,.62);
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
}

.connector-card footer {
  margin-top: 12px;
  padding: 10px;
  color: rgba(239,255,250,.72);
  border-radius: 8px;
  background: rgba(119,240,208,.08);
  font-size: 12px;
  line-height: 1.45;
}

#connectorPipeline {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.pipeline-step {
  position: relative;
  min-height: 78px;
  padding: 10px 10px 10px 48px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.pipeline-step b {
  position: absolute;
  left: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #06100d;
  background: var(--system-mint);
  font-size: 11px;
}

.pipeline-step strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
}

.pipeline-step p {
  margin-top: 6px;
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.4;
}

.pipeline-step small {
  display: block;
  margin-top: 5px;
  color: rgba(240,191,91,.76);
  font-size: 11px;
  line-height: 1.35;
}

.business-collection {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  background:
    linear-gradient(140deg, rgba(6,15,14,.94), rgba(9,28,26,.88)),
    linear-gradient(90deg, rgba(119,240,208,.07), transparent 42%, rgba(240,191,91,.06));
  box-shadow: 0 22px 64px rgba(0,0,0,.25);
}

.business-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.business-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.18;
}

.business-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.business-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(240,191,91,.24);
  border-radius: 999px;
  color: rgba(240,191,91,.92);
  background: rgba(5,12,11,.42);
  font-size: 12px;
}

.business-layout {
  display: grid;
  grid-template-columns: 260px minmax(260px, .9fr) minmax(320px, 1fr) minmax(320px, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.business-score,
.field-coverage,
.missing-queue,
.collection-steps {
  min-height: 310px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,11,.34);
}

.business-score > span,
.field-coverage > span,
.missing-queue > span,
.collection-steps > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.business-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1;
}

.business-score p {
  color: rgba(239,255,250,.62);
  line-height: 1.45;
  font-size: 12px;
}

.meituan-fetch {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(90,210,255,.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 10%, rgba(90,210,255,.14), transparent 34%),
    linear-gradient(140deg, rgba(4,12,18,.98), rgba(9,22,31,.93) 48%, rgba(7,19,18,.95)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 52px);
  box-shadow: 0 24px 70px rgba(0,0,0,.31);
}

.meituan-fetch-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.meituan-fetch-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.18;
}

.meituan-fetch-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.meituan-fetch-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(90,210,255,.24);
  border-radius: 999px;
  color: rgba(159,220,255,.92);
  background: rgba(4,10,16,.50);
  font-size: 12px;
}

.meituan-sync-center {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(320px, 1.2fr) minmax(280px, 1fr) minmax(240px, .85fr);
  gap: 12px;
  margin-top: 16px;
}

.meituan-sync-score,
.meituan-sync-window-panel,
.meituan-sync-job-panel,
.meituan-sync-rules-panel {
  min-width: 0;
  min-height: 292px;
  padding: 14px;
  border: 1px solid rgba(90,210,255,.20);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(8,24,33,.76), rgba(4,10,16,.46)),
    rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.meituan-sync-score > span,
.meituan-sync-window-panel > span,
.meituan-sync-job-panel > span,
.meituan-sync-rules-panel > span {
  color: rgba(119,240,208,.86);
  font-size: 12px;
  font-weight: 950;
}

.meituan-sync-score strong {
  display: block;
  margin: 18px 0 8px;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.1;
}

.meituan-sync-score p,
.meituan-sync-window-panel p {
  color: rgba(239,255,250,.64);
  font-size: 12px;
  line-height: 1.48;
}

.meituan-sync-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.meituan-sync-stat-grid b,
.meituan-sync-window,
.meituan-sync-job,
#meituanSyncRules span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.meituan-sync-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.meituan-sync-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

.meituan-sync-window-panel h3 {
  margin: 10px 0 6px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.25;
}

.meituan-sync-window-panel > strong {
  display: inline-block;
  margin: 10px 0 4px;
  padding: 6px 9px;
  border: 1px solid rgba(119,240,208,.22);
  border-radius: 999px;
  color: rgba(119,240,208,.88);
  background: rgba(4,10,16,.38);
  font-size: 12px;
}

#meituanSyncWindowList,
#meituanSyncJobList,
#meituanSyncRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 210px;
  overflow: auto;
  padding-right: 4px;
}

.meituan-sync-window {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.meituan-sync-window b,
.meituan-sync-job b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061018;
  background: rgba(119,240,208,.94);
  font-size: 11px;
}

.meituan-sync-window.pending b,
.meituan-sync-job.pending b {
  background: rgba(240,191,91,.92);
}

.meituan-sync-window strong,
.meituan-sync-job strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.meituan-sync-window span,
.meituan-sync-job span {
  color: rgba(119,240,208,.78);
  font-size: 11px;
}

.meituan-sync-window p,
.meituan-sync-window small,
.meituan-sync-job p,
.meituan-sync-job small,
#meituanSyncRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.meituan-sync-window p,
.meituan-sync-window small,
.meituan-sync-job p,
.meituan-sync-job small {
  grid-column: 1 / -1;
  display: block;
  margin-top: 2px;
}

.meituan-fetch-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
  margin-top: 14px;
}

.meituan-fetch-score,
.meituan-fetch-gate-panel,
.meituan-fetch-queue-panel,
.meituan-fetch-log-panel,
.meituan-api-panel,
.meituan-api-log-panel,
.meituan-fetch-rules-panel {
  min-width: 0;
  min-height: 318px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  background: rgba(4,10,16,.42);
}

.meituan-fetch-score > span,
.meituan-fetch-gate-panel > span,
.meituan-fetch-queue-panel > span,
.meituan-fetch-log-panel > span,
.meituan-api-panel > span,
.meituan-api-log-panel > span,
.meituan-fetch-rules-panel > span {
  color: rgba(90,210,255,.86);
  font-size: 12px;
  font-weight: 950;
}

.meituan-fetch-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 54px;
  line-height: 1;
}

.meituan-fetch-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.meituan-fetch-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.meituan-fetch-stat-grid b,
.meituan-fetch-gate,
.meituan-fetch-store,
.meituan-fetch-log,
.meituan-api-endpoint,
.meituan-api-log,
#meituanFetchRules span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.meituan-fetch-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.meituan-fetch-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

#meituanFetchGateList,
#meituanFetchQueueList,
#meituanFetchLogList,
#meituanApiEndpointList,
#meituanApiLogList,
#meituanFetchRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 312px;
  overflow: auto;
  padding-right: 4px;
}

.meituan-fetch-gate b,
.meituan-fetch-store header b,
.meituan-fetch-log b,
.meituan-api-endpoint b,
.meituan-api-log b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061018;
  background: rgba(90,210,255,.94);
  font-size: 11px;
}

.meituan-fetch-gate.pending b,
.meituan-fetch-log.blocked b,
.meituan-api-endpoint.pending b,
.meituan-api-log.blocked b {
  background: rgba(240,191,91,.92);
}

.meituan-fetch-store header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.meituan-fetch-gate strong,
.meituan-fetch-store strong,
.meituan-fetch-log strong,
.meituan-api-endpoint strong,
.meituan-api-log strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.meituan-fetch-store header span,
.meituan-fetch-log span,
.meituan-api-endpoint span,
.meituan-api-log span,
.meituan-fetch-gate strong {
  color: rgba(119,240,208,.78);
  font-size: 11px;
}

.meituan-fetch-gate p,
.meituan-fetch-store p,
.meituan-fetch-store small,
.meituan-fetch-log p,
.meituan-api-endpoint p,
.meituan-api-endpoint small,
.meituan-api-log p,
#meituanFetchRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.meituan-fetch-gate p,
.meituan-fetch-store p,
.meituan-fetch-store small,
.meituan-fetch-log p,
.meituan-api-endpoint p,
.meituan-api-endpoint small,
.meituan-api-log p {
  display: block;
  margin-top: 8px;
}

#meituanApiSummary {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 10px;
}

.meituan-fetch-score button {
  width: 100%;
  min-height: 42px;
  margin: 10px 0 8px;
  border: 1px solid rgba(119,240,208,.26);
  border-radius: 8px;
  color: #061018;
  background: linear-gradient(135deg, rgba(90,210,255,.94), rgba(119,240,208,.92));
  font-weight: 950;
  cursor: pointer;
}

.meituan-fetch-score button:disabled {
  color: rgba(239,255,250,.42);
  background: rgba(255,255,255,.08);
  cursor: not-allowed;
}

.meituan-fetch-result {
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  color: rgba(239,255,250,.66);
  background: rgba(255,255,255,.045);
  font-size: 12px;
  line-height: 1.45;
}

.meituan-fetch-result strong {
  display: block;
  margin: 0 0 5px;
  color: #ffffff;
  font-size: 13px;
}

.meituan-writeback {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(119,240,208,.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 86% 8%, rgba(119,240,208,.14), transparent 34%),
    linear-gradient(145deg, rgba(5,13,15,.98), rgba(7,24,22,.94) 48%, rgba(15,16,19,.96)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 48px);
  box-shadow: 0 24px 70px rgba(0,0,0,.31);
}

.meituan-writeback-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.meituan-writeback-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.18;
}

.meituan-writeback-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.meituan-writeback-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(119,240,208,.24);
  border-radius: 999px;
  color: rgba(119,240,208,.92);
  background: rgba(4,10,16,.50);
  font-size: 12px;
}

.meituan-writeback-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
  margin-top: 14px;
}

.meituan-writeback-score,
.meituan-writeback-gate-panel,
.meituan-writeback-stage-panel,
.meituan-writeback-retry-panel,
.meituan-writeback-log-panel,
.meituan-writeback-rules-panel {
  min-width: 0;
  min-height: 318px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  background: rgba(4,10,16,.42);
}

.meituan-writeback-score > span,
.meituan-writeback-gate-panel > span,
.meituan-writeback-stage-panel > span,
.meituan-writeback-retry-panel > span,
.meituan-writeback-log-panel > span,
.meituan-writeback-rules-panel > span,
.hot-product-panel > span,
.hot-tier-card > span {
  color: rgba(119,240,208,.86);
  font-size: 12px;
  font-weight: 950;
}

.meituan-writeback-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 54px;
  line-height: 1;
}

.meituan-writeback-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.meituan-writeback-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.meituan-writeback-stat-grid b,
.meituan-writeback-gate,
.meituan-writeback-stage,
.meituan-writeback-retry,
.meituan-writeback-log,
#meituanWritebackRules span,
.hot-tier-card,
.hot-product-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.meituan-writeback-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.meituan-writeback-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

#meituanWritebackGateList,
#meituanWritebackStageList,
#meituanWritebackRetryList,
#meituanWritebackLogList,
#meituanWritebackRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 312px;
  overflow: auto;
  padding-right: 4px;
}

.meituan-writeback-gate b,
.meituan-writeback-stage header b,
.meituan-writeback-retry header b,
.meituan-writeback-log b,
.hot-product-card header b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061310;
  background: rgba(119,240,208,.94);
  font-size: 11px;
}

.meituan-writeback-gate.pending b,
.meituan-writeback-stage.blocked header b,
.meituan-writeback-retry header b,
.meituan-writeback-log.blocked b {
  background: rgba(240,191,91,.92);
}

.meituan-writeback-stage header,
.meituan-writeback-retry header,
.hot-product-card header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.meituan-writeback-gate strong,
.meituan-writeback-stage strong,
.meituan-writeback-retry strong,
.meituan-writeback-log strong,
.hot-tier-card strong,
.hot-product-card strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.meituan-writeback-stage header span,
.meituan-writeback-retry header span,
.meituan-writeback-log span,
.meituan-writeback-gate strong,
.hot-product-card header span {
  color: rgba(119,240,208,.78);
  font-size: 11px;
}

.meituan-writeback-gate p,
.meituan-writeback-stage p,
.meituan-writeback-stage small,
.meituan-writeback-retry p,
.meituan-writeback-retry small,
.meituan-writeback-log p,
#meituanWritebackRules span,
.hot-tier-card p,
.hot-product-card p,
.hot-product-card small {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.meituan-writeback-gate p,
.meituan-writeback-stage p,
.meituan-writeback-stage small,
.meituan-writeback-retry p,
.meituan-writeback-retry small,
.meituan-writeback-log p,
.hot-tier-card p,
.hot-product-card p,
.hot-product-card small {
  display: block;
  margin-top: 8px;
}

.meituan-writeback-score button {
  width: 100%;
  min-height: 42px;
  margin: 10px 0 8px;
  border: 1px solid rgba(119,240,208,.26);
  border-radius: 8px;
  color: #061310;
  background: linear-gradient(135deg, rgba(119,240,208,.94), rgba(240,191,91,.92));
  font-weight: 950;
  cursor: pointer;
}

.meituan-writeback-score button:disabled {
  color: rgba(239,255,250,.42);
  background: rgba(255,255,255,.08);
  cursor: not-allowed;
}

.meituan-writeback-result {
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  color: rgba(239,255,250,.66);
  background: rgba(255,255,255,.045);
  font-size: 12px;
  line-height: 1.45;
}

.meituan-writeback-result strong {
  display: block;
  margin: 0 0 5px;
  color: #ffffff;
  font-size: 13px;
}

.hot-product-intel {
  display: grid;
  grid-template-columns: minmax(200px, .65fr) minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.hot-tier-card,
.hot-product-panel {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(12,23,21,.10);
  border-radius: 8px;
  background: rgba(255,255,255,.86);
}

.hot-tier-card strong {
  display: block;
  margin-top: 12px;
  color: #07110f;
  font-size: 30px;
  line-height: 1;
}

.hot-product-panel > div {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 360px;
  overflow: auto;
}

.hot-product-card {
  background: rgba(7,16,15,.04);
}

.replenishment-panel {
  grid-column: 1 / -1;
}

.replenishment-panel > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.replenishment-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(12,23,21,.10);
  border-left: 4px solid rgba(240,191,91,.82);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(244,250,247,.86)),
    rgba(255,255,255,.88);
}

.replenishment-card.P0 {
  border-left-color: rgba(214,73,50,.88);
}

.replenishment-card.P1 {
  border-left-color: rgba(240,191,91,.94);
}

.replenishment-card.P2 {
  border-left-color: rgba(69,200,159,.88);
}

.replenishment-card header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.replenishment-card header b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #fff;
  background: #10241e;
  font-size: 11px;
}

.replenishment-card.P0 header b {
  background: #c84633;
}

.replenishment-card.P1 header b {
  color: #171006;
  background: #f0bf5b;
}

.replenishment-card.P2 header b {
  color: #061310;
  background: #45c89f;
}

.replenishment-card header strong {
  min-width: 0;
  color: #07110f;
  font-size: 13px;
  line-height: 1.35;
}

.replenishment-card header span {
  color: #0a6f56;
  font-size: 11px;
  font-weight: 900;
}

.replenishment-card p,
.replenishment-card small {
  display: block;
  margin-top: 8px;
  color: rgba(7,17,15,.62);
  font-size: 12px;
  line-height: 1.45;
}

.replenishment-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.replenishment-card em {
  padding: 5px 7px;
  border-radius: 6px;
  color: #061310;
  background: rgba(69,200,159,.14);
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.replenishment-card .product-link-action,
.hot-product-card .product-link-action {
  margin-top: 9px;
  min-height: 30px;
  padding: 0 10px;
}

.hot-product-panel > span,
.hot-tier-card > span {
  color: #0a6f56;
}

.hot-product-card strong {
  color: #07110f;
}

.hot-product-card header span {
  color: #0a6f56;
}

.hot-tier-card p,
.hot-product-card p,
.hot-product-card small {
  color: rgba(7,17,15,.62);
}

.tier-operating-rule {
  margin-top: 14px;
  padding: 10px;
  border: 1px solid rgba(12,23,21,.08);
  border-radius: 8px;
  background: #f3f8f5;
}

.tier-operating-rule b {
  display: block;
  color: #0a6f56;
  font-size: 12px;
}

.tier-operating-rule small {
  display: block;
  margin-top: 6px;
  color: rgba(7,17,15,.62);
  font-size: 12px;
  line-height: 1.45;
}

.hot-product-card .product-code-panel,
.replenishment-card .product-code-panel {
  display: grid;
  margin-top: 9px;
  background: rgba(255,255,255,.62);
}

.hot-product-card .product-code-panel > div,
.replenishment-card .product-code-panel > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 0;
}

.business-meter {
  height: 10px;
  margin: 18px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}

.business-meter i {
  display: block;
  width: 4%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--system-mint), var(--system-amber));
}

.business-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.business-stats b {
  min-height: 70px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.business-stats small {
  display: block;
  color: rgba(239,255,250,.54);
  font-size: 11px;
}

.business-stats em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 24px;
}

#businessFieldCoverage,
#businessMissingStoresList,
#businessCollectionSteps {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 286px;
  overflow: auto;
  padding-right: 4px;
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.field-row strong {
  color: #ffffff;
  font-size: 13px;
}

.field-row span {
  color: rgba(239,255,250,.64);
  text-align: right;
  font-size: 12px;
}

.field-row i {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.field-row i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--system-mint);
}

.missing-store,
.collect-step {
  position: relative;
  min-height: 88px;
  padding: 10px 10px 10px 46px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.missing-store b,
.collect-step b {
  position: absolute;
  left: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  color: #06100d;
  background: rgba(240,191,91,.92);
  font-size: 11px;
}

.collect-step b {
  background: var(--system-mint);
}

.missing-store strong,
.collect-step strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.missing-store span,
.collect-step span {
  display: block;
  margin-top: 4px;
  color: rgba(239,255,250,.50);
  font-size: 11px;
}

.missing-store p,
.collect-step p {
  margin-top: 6px;
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.4;
}

.collect-step small {
  display: block;
  margin-top: 5px;
  color: rgba(240,191,91,.78);
  font-size: 11px;
}

.readiness-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.readiness-rules span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(167,226,210,.16);
  border-radius: 999px;
  color: rgba(239,255,250,.70);
  background: rgba(255,255,255,.055);
  font-size: 12px;
  line-height: 1.35;
}

.business-health {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(6,14,15,.95), rgba(11,25,21,.91)),
    linear-gradient(90deg, rgba(119,240,208,.08), transparent 42%, rgba(122,168,255,.07));
  box-shadow: 0 22px 64px rgba(0,0,0,.27);
}

.health-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.health-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.health-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.health-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(119,240,208,.22);
  border-radius: 999px;
  color: rgba(119,240,208,.90);
  background: rgba(5,12,16,.44);
  font-size: 12px;
}

.health-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 12px;
  margin-top: 14px;
}

.health-score,
.health-bucket-panel,
.health-store-panel,
.health-rules-panel {
  min-width: 0;
  min-height: 300px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,16,.36);
}

.health-score > span,
.health-bucket-panel > span,
.health-store-panel > span,
.health-rules-panel > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.health-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 56px;
  line-height: 1;
}

.health-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.health-meter {
  height: 10px;
  margin: 18px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}

.health-meter i {
  display: block;
  width: 4%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--system-mint), var(--system-amber));
}

.health-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.health-stat-grid b,
.health-bucket,
.health-row,
#healthRules span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.health-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.health-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

#healthBucketList,
#healthStoreList,
#healthRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 292px;
  overflow: auto;
  padding-right: 4px;
}

.health-bucket {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.health-bucket strong,
.health-row header strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.health-bucket span,
.health-row header span {
  color: rgba(240,191,91,.86);
  font-size: 12px;
}

.health-row header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.health-row header b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061310;
  background: rgba(119,240,208,.90);
  font-size: 11px;
}

.health-row.P0 header b {
  background: rgba(240,191,91,.92);
}

.health-row dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.health-row dt {
  color: rgba(119,240,208,.68);
  font-size: 10px;
}

.health-row dd {
  color: rgba(239,255,250,.75);
  font-size: 12px;
}

.health-row p,
#healthRules span {
  margin-top: 8px;
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

#healthRules span {
  display: block;
  min-height: 42px;
}

.business-gap {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(6,14,15,.95), rgba(10,24,28,.91)),
    linear-gradient(90deg, rgba(122,168,255,.07), transparent 40%, rgba(119,240,208,.07));
  box-shadow: 0 22px 64px rgba(0,0,0,.27);
}

.gap-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.gap-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.gap-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.gap-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(122,168,255,.25);
  border-radius: 999px;
  color: rgba(181,204,255,.94);
  background: rgba(5,12,16,.44);
  font-size: 12px;
}

.gap-layout {
  display: grid;
  grid-template-columns: 250px minmax(230px, .7fr) minmax(260px, .8fr) minmax(380px, 1.15fr) minmax(260px, .75fr);
  gap: 12px;
  margin-top: 14px;
}

.gap-score,
.gap-field-panel,
.gap-operator-panel,
.gap-task-panel,
.gap-rules-panel {
  min-height: 300px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,16,.36);
}

.gap-score > span,
.gap-field-panel > span,
.gap-operator-panel > span,
.gap-task-panel > span,
.gap-rules-panel > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.gap-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1;
}

.gap-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.gap-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.gap-stat-grid b {
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.gap-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.gap-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

#gapFieldList,
#gapOperatorList,
#gapTaskList,
#gapRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 282px;
  overflow: auto;
  padding-right: 4px;
}

.gap-field-row,
.gap-operator-row,
.gap-task-row,
#gapRules span {
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.gap-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.gap-field-row strong,
.gap-operator-row strong,
.gap-task-row strong {
  color: #ffffff;
  font-size: 13px;
}

.gap-field-row span,
.gap-operator-row span,
.gap-operator-row p,
.gap-task-row p,
.gap-task-row small,
#gapRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.gap-field-row i {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.gap-field-row i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7aa8ff, var(--system-mint));
}

.gap-operator-row span,
.gap-operator-row p,
.gap-task-row p,
.gap-task-row small {
  display: block;
  margin-top: 6px;
}

.gap-task-row header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.gap-task-row header b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(240,191,91,.92);
  font-size: 11px;
}

.gap-task-row header span {
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

#gapRules span {
  min-height: 44px;
  display: block;
}

.feishu-delivery {
  position: relative;
  margin: 0 0 16px;
  padding: 18px;
  overflow: hidden;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  background:
    linear-gradient(150deg, rgba(5,12,16,.96), rgba(8,24,28,.91) 48%, rgba(10,18,15,.94)),
    linear-gradient(94deg, rgba(122,168,255,.10), transparent 38%, rgba(119,240,208,.075) 68%, rgba(240,191,91,.055));
  box-shadow: 0 24px 70px rgba(0,0,0,.30);
}

.feishu-delivery::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(119,240,208,.045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, rgba(122,168,255,.035) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(circle at 16% 8%, rgba(122,168,255,.16), transparent 28%),
    radial-gradient(circle at 88% 84%, rgba(119,240,208,.12), transparent 30%);
  opacity: .9;
}

.feishu-delivery > * {
  position: relative;
  z-index: 1;
}

.feishu-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.feishu-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.18;
}

.feishu-head p {
  max-width: 920px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.feishu-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(122,168,255,.28);
  border-radius: 999px;
  color: rgba(181,204,255,.94);
  background: rgba(5,12,16,.48);
  font-size: 12px;
}

.feishu-layout {
  display: grid;
  grid-template-columns: 270px minmax(320px, 1.35fr) minmax(240px, .82fr) minmax(220px, .72fr) minmax(280px, .92fr);
  gap: 12px;
  margin-top: 14px;
}

.feishu-score,
.delivery-routes,
.message-templates,
.delivery-windows,
.delivery-steps {
  min-height: 330px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,16,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.feishu-score > span,
.delivery-routes > span,
.message-templates > span,
.delivery-windows > span,
.delivery-steps > span {
  color: rgba(119,240,208,.80);
  font-size: 12px;
  font-weight: 950;
}

.feishu-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 52px;
  line-height: 1;
}

.feishu-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.feishu-meter {
  height: 10px;
  margin: 18px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}

.feishu-meter i {
  display: block;
  width: 4%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7aa8ff, var(--system-mint), var(--system-amber));
}

.feishu-recipient-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.feishu-recipient-grid b {
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
}

.feishu-recipient-grid small,
.feishu-next small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.feishu-recipient-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 24px;
}

.feishu-next {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(240,191,91,.16);
  border-radius: 8px;
  background: rgba(240,191,91,.07);
}

#feishuRouteList,
#feishuTemplateList,
#feishuWindowList,
#feishuDeliverySteps {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 306px;
  overflow: auto;
  padding-right: 4px;
}

.delivery-route {
  position: relative;
  min-height: 146px;
  padding: 12px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    rgba(5,12,16,.28);
}

.delivery-route::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  border-radius: 8px 0 0 8px;
  background: rgba(240,191,91,.86);
}

.delivery-route.ready::before {
  background: var(--system-mint);
}

.delivery-route.pending::before {
  background: var(--system-red);
}

.delivery-route > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.delivery-route b {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #06100d;
  background: rgba(119,240,208,.88);
  font-size: 11px;
}

.delivery-route strong,
.message-template strong,
.delivery-window strong,
.delivery-step strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.delivery-route > div span {
  justify-self: end;
  color: rgba(240,191,91,.84);
  font-size: 11px;
  font-weight: 850;
}

.delivery-route.ready > div span {
  color: rgba(119,240,208,.86);
}

.delivery-route p,
.message-template p,
.delivery-step p {
  margin-top: 8px;
  color: rgba(239,255,250,.64);
  font-size: 12px;
  line-height: 1.45;
}

.delivery-route dl {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 8px;
  margin: 10px 0 0;
}

.delivery-route dt {
  color: rgba(119,240,208,.64);
  font-size: 11px;
}

.delivery-route dd {
  margin: 0;
  color: rgba(239,255,250,.72);
  font-size: 11px;
  line-height: 1.35;
}

.delivery-route footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.delivery-route small {
  color: rgba(239,255,250,.48);
  font-size: 11px;
  line-height: 1.35;
}

.delivery-route em {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 4px 7px;
  border-radius: 999px;
  color: #07110f;
  background: rgba(240,191,91,.92);
  font-size: 11px;
  font-style: normal;
}

.delivery-route.ready em {
  background: rgba(119,240,208,.92);
}

.message-template,
.delivery-window,
.delivery-step {
  position: relative;
  min-height: 92px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.message-template b,
.delivery-window b,
.delivery-step b {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 7px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(181,204,255,.92);
  font-size: 11px;
}

.message-template div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.message-template div span {
  min-height: 24px;
  padding: 4px 7px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 999px;
  color: rgba(239,255,250,.68);
  background: rgba(5,12,16,.36);
  font-size: 11px;
}

.delivery-window {
  min-height: 74px;
}

.delivery-window strong,
.delivery-window span,
.delivery-step span,
.delivery-step small {
  display: block;
}

.delivery-window span,
.delivery-step span {
  margin-top: 5px;
  color: rgba(239,255,250,.56);
  font-size: 11px;
  line-height: 1.35;
}

.delivery-step {
  padding-left: 46px;
}

.delivery-step b {
  position: absolute;
  left: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  margin: 0;
  background: rgba(119,240,208,.92);
}

.delivery-step small {
  margin-top: 5px;
  color: rgba(240,191,91,.76);
  font-size: 11px;
  line-height: 1.35;
}

.feishu-readiness {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.feishu-readiness span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(167,226,210,.16);
  border-radius: 999px;
  color: rgba(239,255,250,.70);
  background: rgba(255,255,255,.055);
  font-size: 12px;
  line-height: 1.35;
}

.recipient-binding {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(7,15,18,.94), rgba(12,24,23,.90)),
    linear-gradient(90deg, rgba(240,191,91,.065), transparent 38%, rgba(122,168,255,.07));
  box-shadow: 0 22px 64px rgba(0,0,0,.27);
}

.recipient-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.recipient-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.recipient-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.recipient-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(240,191,91,.24);
  border-radius: 999px;
  color: rgba(240,191,91,.92);
  background: rgba(5,12,11,.42);
  font-size: 12px;
}

.recipient-layout {
  display: grid;
  grid-template-columns: 270px minmax(260px, .8fr) minmax(340px, 1.08fr) minmax(300px, .92fr);
  gap: 12px;
  margin-top: 14px;
}

.recipient-score,
.recipient-role-panel,
.recipient-queue-panel,
.recipient-rules-panel {
  min-height: 286px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,11,.34);
}

.recipient-score > span,
.recipient-role-panel > span,
.recipient-queue-panel > span,
.recipient-rules-panel > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.recipient-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 54px;
  line-height: 1;
}

.recipient-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.recipient-meter {
  height: 10px;
  margin: 18px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}

.recipient-meter i {
  display: block;
  width: 4%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--system-amber), var(--system-mint));
}

.recipient-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.recipient-stat-grid b {
  min-height: 62px;
  padding: 9px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.recipient-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.recipient-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

.recipient-next {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(240,191,91,.16);
  border-radius: 8px;
  background: rgba(240,191,91,.07);
}

#recipientRoleCoverage,
#recipientQueue,
#recipientRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 266px;
  overflow: auto;
  padding-right: 4px;
}

.recipient-role-row,
.recipient-row {
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.recipient-role-row div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.recipient-role-row strong,
.recipient-row strong {
  color: #ffffff;
  font-size: 13px;
}

.recipient-role-row span,
.recipient-role-row small,
.recipient-row span,
.recipient-row p {
  color: rgba(239,255,250,.60);
  font-size: 11px;
  line-height: 1.4;
}

.recipient-role-row i {
  display: block;
  height: 7px;
  margin: 9px 0 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.recipient-role-row i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--system-mint);
}

.recipient-row {
  position: relative;
  min-height: 92px;
  padding-left: 58px;
}

.recipient-row b {
  position: absolute;
  left: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 28px;
  padding: 0 7px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(240,191,91,.92);
  font-size: 11px;
}

.recipient-row.ready b {
  background: rgba(119,240,208,.92);
}

.recipient-row span {
  display: block;
  margin-top: 5px;
}

.recipient-row p {
  margin-top: 7px;
}

#recipientRules span {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  color: rgba(239,255,250,.66);
  background: rgba(255,255,255,.045);
  font-size: 12px;
  line-height: 1.45;
}

.message-preview {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  background:
    linear-gradient(150deg, rgba(6,12,18,.95), rgba(14,25,32,.91) 52%, rgba(8,18,16,.92)),
    linear-gradient(90deg, rgba(122,168,255,.08), transparent 40%, rgba(240,191,91,.06));
  box-shadow: 0 22px 64px rgba(0,0,0,.28);
}

.message-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.message-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.message-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.message-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(122,168,255,.25);
  border-radius: 999px;
  color: rgba(181,204,255,.94);
  background: rgba(5,12,16,.44);
  font-size: 12px;
}

.message-layout {
  display: grid;
  grid-template-columns: 260px minmax(420px, 1.35fr) minmax(260px, .82fr) minmax(280px, .86fr);
  gap: 12px;
  margin-top: 14px;
}

.message-score,
.message-preview-panel,
.message-quality-panel,
.message-rules-panel {
  min-height: 320px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,16,.38);
}

.message-score > span,
.message-preview-panel > span,
.message-quality-panel > span,
.message-rules-panel > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.message-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 52px;
  line-height: 1;
}

.message-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.message-meter {
  height: 10px;
  margin: 18px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}

.message-meter i {
  display: block;
  width: 4%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7aa8ff, var(--system-mint), var(--system-amber));
}

.message-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.message-stat-grid b {
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.message-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.message-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

#feishuMessagePreviewList,
#messageQualityList,
#messagePayloadRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 300px;
  overflow: auto;
  padding-right: 4px;
}

.message-preview-card {
  min-height: 214px;
  padding: 12px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.message-preview-card.ready {
  border-color: rgba(119,240,208,.28);
}

.message-preview-card.blocked {
  border-color: rgba(240,191,91,.18);
}

.message-preview-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.message-preview-card header b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(119,240,208,.90);
  font-size: 11px;
}

.message-preview-card header span {
  color: rgba(239,255,250,.54);
  font-size: 11px;
  text-align: right;
}

.message-preview-card h4 {
  margin: 10px 0 8px;
  color: #ffffff;
  font-size: 16px;
}

.message-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

.message-metrics em {
  min-height: 52px;
  padding: 8px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 7px;
  background: rgba(5,12,16,.34);
  font-style: normal;
}

.message-metrics small {
  display: block;
  color: rgba(239,255,250,.50);
  font-size: 11px;
}

.message-metrics strong {
  display: block;
  margin-top: 5px;
  color: #ffffff;
  font-size: 15px;
}

.message-preview-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 16px;
}

.message-preview-card li {
  color: rgba(239,255,250,.66);
  font-size: 12px;
  line-height: 1.45;
}

.message-preview-card footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.message-preview-card footer span {
  color: rgba(240,191,91,.86);
  font-size: 11px;
}

.message-preview-card.ready footer span {
  color: rgba(119,240,208,.86);
}

.message-preview-card footer button {
  min-height: 30px;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  color: #07110f;
  background: rgba(119,240,208,.92);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.message-quality-row {
  position: relative;
  min-height: 86px;
  padding: 10px 10px 10px 58px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.message-quality-row b {
  position: absolute;
  left: 10px;
  top: 10px;
  min-width: 38px;
  min-height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #07110f;
  background: rgba(240,191,91,.92);
  font-size: 11px;
}

.message-quality-row.ready b {
  background: rgba(119,240,208,.92);
}

.message-quality-row strong {
  color: #ffffff;
  font-size: 13px;
}

.message-quality-row p {
  margin-top: 7px;
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

#messagePayloadRules span {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  color: rgba(239,255,250,.66);
  background: rgba(255,255,255,.045);
  font-size: 12px;
  line-height: 1.45;
}

.send-queue {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  background:
    linear-gradient(150deg, rgba(8,13,18,.96), rgba(16,22,31,.92), rgba(8,18,16,.92)),
    linear-gradient(90deg, rgba(240,191,91,.07), transparent 40%, rgba(122,168,255,.08));
  box-shadow: 0 22px 64px rgba(0,0,0,.28);
}

.send-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.send-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.send-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.send-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(240,191,91,.24);
  border-radius: 999px;
  color: rgba(240,191,91,.92);
  background: rgba(5,12,16,.44);
  font-size: 12px;
}

.send-layout {
  display: grid;
  grid-template-columns: 250px minmax(420px, 1.25fr) minmax(280px, .78fr) minmax(270px, .76fr);
  gap: 12px;
  margin-top: 14px;
}

.send-score,
.send-list-panel,
.send-steps-panel,
.send-rules-panel {
  min-height: 310px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,16,.36);
}

.send-score > span,
.send-list-panel > span,
.send-steps-panel > span,
.send-rules-panel > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.send-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1;
}

.send-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.send-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.send-stat-grid b {
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.send-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.send-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

#sendQueueList,
#sendQueueSteps,
#sendQueueRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 292px;
  overflow: auto;
  padding-right: 4px;
}

.send-queue-row,
.send-step-row,
#sendQueueRules span {
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.send-queue-row.ready {
  border-color: rgba(119,240,208,.28);
}

.send-queue-row.blocked {
  border-color: rgba(240,191,91,.20);
}

.send-queue-row header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.send-queue-row header b,
.send-step-row b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(119,240,208,.90);
  font-size: 11px;
}

.send-queue-row header strong,
.send-step-row strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.send-queue-row header span,
.send-step-row span {
  color: rgba(240,191,91,.86);
  font-size: 11px;
}

.send-queue-row p,
.send-queue-row footer small,
.send-step-row p,
#sendQueueRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.send-queue-row p,
.send-step-row p {
  margin-top: 8px;
}

.send-queue-row footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.send-queue-row footer button {
  min-height: 30px;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  color: #07110f;
  background: rgba(119,240,208,.92);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.send-step-row {
  position: relative;
  min-height: 88px;
  padding-left: 54px;
}

.send-step-row b {
  position: absolute;
  left: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 28px;
  padding: 0;
}

.send-step-row.pending b {
  background: rgba(240,191,91,.92);
}

#sendQueueRules span {
  display: block;
  min-height: 42px;
}

.send-rehearsal {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.24);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(5,17,16,.97), rgba(14,24,26,.93), rgba(15,16,12,.94)),
    linear-gradient(90deg, rgba(119,240,208,.08), transparent 38%, rgba(240,191,91,.08));
  box-shadow: 0 24px 70px rgba(0,0,0,.30);
}

.rehearsal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.rehearsal-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.rehearsal-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.rehearsal-actions {
  display: grid;
  gap: 9px;
  justify-items: end;
  min-width: 220px;
}

.rehearsal-actions strong {
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(119,240,208,.24);
  border-radius: 999px;
  color: rgba(119,240,208,.92);
  background: rgba(5,12,16,.44);
  font-size: 12px;
}

.rehearsal-actions button {
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  color: #06100d;
  background: linear-gradient(135deg, #8cf6d7, #f0bf5b);
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.rehearsal-actions button:disabled {
  color: rgba(239,255,250,.45);
  background: rgba(255,255,255,.08);
  cursor: not-allowed;
}

.rehearsal-layout {
  display: grid;
  grid-template-columns: 240px minmax(320px, 1.05fr) minmax(320px, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.rehearsal-score,
.rehearsal-sample-panel,
.rehearsal-log-panel,
.rehearsal-result-panel,
.rehearsal-step-panel,
.rehearsal-rules-panel {
  min-width: 0;
  min-height: 292px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,16,.38);
}

.rehearsal-score > span,
.rehearsal-sample-panel > span,
.rehearsal-log-panel > span,
.rehearsal-result-panel > span,
.rehearsal-step-panel > span,
.rehearsal-rules-panel > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.rehearsal-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 54px;
  line-height: 1;
}

.rehearsal-score p,
.rehearsal-last {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.rehearsal-last b {
  color: #8cf6d7;
}

.rehearsal-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 12px;
}

.rehearsal-stat-grid b {
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.rehearsal-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.rehearsal-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

#sendRehearsalSampleList,
#sendRehearsalLogList,
#sendRehearsalSteps,
#sendRehearsalRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 292px;
  overflow: auto;
  padding-right: 4px;
}

.rehearsal-row,
.rehearsal-log,
.rehearsal-step,
#sendRehearsalRules span,
#sendRehearsalResult {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.rehearsal-row.ready,
.rehearsal-log.dryrun,
.rehearsal-step.ready {
  border-color: rgba(119,240,208,.30);
}

.rehearsal-row.blocked,
.rehearsal-log.dryrun_blocked,
.rehearsal-step.pending {
  border-color: rgba(240,191,91,.24);
}

.rehearsal-row header,
.rehearsal-log header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.rehearsal-row header b,
.rehearsal-log header b,
.rehearsal-step b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(119,240,208,.92);
  font-size: 11px;
}

.rehearsal-row.blocked header b,
.rehearsal-log.dryrun_blocked header b,
.rehearsal-step.pending b {
  color: #160f05;
  background: rgba(240,191,91,.92);
}

.rehearsal-row strong,
.rehearsal-log strong,
.rehearsal-step strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.rehearsal-row header span,
.rehearsal-log header span,
.rehearsal-step span {
  color: rgba(119,240,208,.78);
  font-size: 11px;
}

.rehearsal-row p,
.rehearsal-row small,
.rehearsal-log p,
.rehearsal-log small,
.rehearsal-step p,
#sendRehearsalRules span,
#sendRehearsalResult {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.rehearsal-row p,
.rehearsal-row small,
.rehearsal-log p,
.rehearsal-log small,
.rehearsal-step p {
  display: block;
  margin-top: 8px;
}

.rehearsal-result-panel {
  grid-column: span 1;
}

.rehearsal-step-panel,
.rehearsal-rules-panel {
  min-height: 220px;
}

#sendRehearsalRules span {
  display: block;
}

.live-gate {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.24);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(5,14,17,.98), rgba(12,20,28,.94), rgba(18,16,10,.94)),
    linear-gradient(90deg, rgba(119,240,208,.08), transparent 40%, rgba(122,194,255,.07));
  box-shadow: 0 24px 70px rgba(0,0,0,.30);
}

.live-gate-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.live-gate-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.live-gate-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.live-gate-head > strong {
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(119,240,208,.24);
  border-radius: 999px;
  color: rgba(119,240,208,.92);
  background: rgba(5,12,16,.44);
  font-size: 12px;
  white-space: nowrap;
}

.live-gate-layout {
  display: grid;
  grid-template-columns: 230px minmax(320px, .95fr) minmax(300px, .9fr);
  gap: 12px;
  margin-top: 14px;
}

.live-gate-score,
.recipient-import-panel,
.live-gate-config-panel,
.live-gate-task-panel,
.live-gate-blocker-panel,
.live-gate-step-panel,
.live-gate-rules-panel {
  min-width: 0;
  min-height: 248px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,16,.38);
}

.live-gate-score > span,
.recipient-import-panel > span,
.live-gate-config-panel > span,
.live-gate-task-panel > span,
.live-gate-blocker-panel > span,
.live-gate-step-panel > span,
.live-gate-rules-panel > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.live-gate-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 42px;
  line-height: 1;
}

.live-gate-score p,
.recipient-import-panel div,
.live-gate-config-panel div,
.live-gate-task p,
.live-gate-task small,
.live-gate-step p,
#liveGateBlockers span,
#liveGateRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.live-gate-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.live-gate-stat-grid b {
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.live-gate-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.live-gate-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

.recipient-import-panel textarea {
  width: 100%;
  min-height: 142px;
  margin-top: 10px;
  padding: 10px;
  resize: vertical;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.16);
  border-radius: 8px;
  background: rgba(0,0,0,.24);
  outline: none;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.recipient-import-panel textarea:focus,
.live-gate-config-panel input:focus {
  border-color: rgba(119,240,208,.65);
}

.recipient-import-panel button,
.live-gate-actions button,
.live-gate-task button {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: #06100d;
  background: linear-gradient(135deg, #8cf6d7, #f0bf5b);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.recipient-import-panel button {
  width: 100%;
  margin: 10px 0;
}

.recipient-import-panel button:disabled,
.live-gate-actions button:disabled,
.live-gate-task button:disabled {
  color: rgba(239,255,250,.45);
  background: rgba(255,255,255,.08);
  cursor: not-allowed;
}

.live-gate-config-panel {
  display: grid;
  gap: 9px;
}

.live-gate-config-panel > div,
#liveGateBlockers span,
#liveGateRules span {
  display: block;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.live-gate-config-panel label {
  margin: 2px 0 -4px;
  color: rgba(119,240,208,.78);
}

.live-gate-config-panel input {
  height: 38px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.16);
  background: rgba(0,0,0,.24);
}

.live-gate-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#liveGateTaskList,
#liveGateBlockers,
#liveGateSteps,
#liveGateRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 292px;
  overflow: auto;
  padding-right: 4px;
}

.live-gate-task,
.live-gate-step {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.live-gate-task.ready,
.live-gate-step.ready,
#liveGateBlockers .ready {
  border-color: rgba(119,240,208,.30);
}

.live-gate-task.blocked,
.live-gate-step.pending {
  border-color: rgba(240,191,91,.24);
}

.live-gate-task.selected {
  box-shadow: inset 0 0 0 1px rgba(119,240,208,.55), 0 0 0 3px rgba(119,240,208,.08);
}

.live-gate-task header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.live-gate-task header b,
.live-gate-step b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(119,240,208,.92);
  font-size: 11px;
}

.live-gate-task.blocked header b,
.live-gate-step.pending b {
  color: #160f05;
  background: rgba(240,191,91,.92);
}

.live-gate-task strong,
.live-gate-step strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.live-gate-task header span,
.live-gate-step span {
  color: rgba(119,240,208,.78);
  font-size: 11px;
}

.live-gate-task p,
.live-gate-task small,
.live-gate-step p {
  display: block;
  margin-top: 8px;
}

.live-gate-task button {
  width: 100%;
  margin-top: 10px;
}

.live-gate-task-panel {
  grid-row: span 2;
}

.send-audit {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(7,14,18,.96), rgba(18,24,25,.92), rgba(9,17,15,.94)),
    linear-gradient(90deg, rgba(119,240,208,.07), transparent 42%, rgba(240,191,91,.065));
  box-shadow: 0 22px 64px rgba(0,0,0,.28);
}

.audit-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.audit-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.audit-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.audit-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(119,240,208,.22);
  border-radius: 999px;
  color: rgba(119,240,208,.90);
  background: rgba(5,12,16,.44);
  font-size: 12px;
}

.audit-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.audit-score,
.audit-list-panel,
.audit-issue-panel,
.audit-rules-panel {
  min-width: 0;
  min-height: 310px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,16,.36);
}

.audit-score {
  grid-column: span 3;
}

.audit-list-panel {
  grid-column: span 5;
}

.audit-issue-panel {
  grid-column: span 4;
}

.audit-rules-panel {
  grid-column: 1 / -1;
  min-height: auto;
}

.audit-score > span,
.audit-list-panel > span,
.audit-issue-panel > span,
.audit-rules-panel > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.audit-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1;
}

.audit-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.audit-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.audit-stat-grid b {
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.audit-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.audit-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

#sendAuditList,
#sendAuditIssueList,
#sendAuditRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 292px;
  overflow: auto;
  padding-right: 4px;
}

#sendAuditRules {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-height: none;
}

.send-audit-row,
.send-audit-issue,
#sendAuditRules span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.send-audit-row.success {
  border-color: rgba(119,240,208,.28);
}

.send-audit-row.failed,
.send-audit-row.retry {
  border-color: rgba(232,95,76,.28);
}

.send-audit-row header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.send-audit-row header b,
.send-audit-issue b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(119,240,208,.90);
  font-size: 11px;
}

.send-audit-row.failed header b,
.send-audit-row.retry header b,
.send-audit-issue b {
  background: rgba(240,191,91,.92);
}

.send-audit-row header strong,
.send-audit-issue strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.send-audit-row header span {
  color: rgba(240,191,91,.86);
  font-size: 11px;
}

.send-audit-row p,
.send-audit-row small,
.send-audit-issue p,
#sendAuditRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.send-audit-row p,
.send-audit-row small,
.send-audit-issue p {
  display: block;
  margin-top: 8px;
}

.send-audit-issue.ready b {
  background: rgba(119,240,208,.90);
}

#sendAuditRules span {
  display: block;
  min-height: 42px;
}

.send-executor {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(119,240,208,.24);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(4,13,16,.96), rgba(12,25,23,.92), rgba(8,14,18,.94)),
    linear-gradient(90deg, rgba(119,240,208,.08), transparent 44%, rgba(122,168,255,.08));
  box-shadow: 0 22px 64px rgba(0,0,0,.30);
}

.executor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.executor-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.executor-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.executor-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.executor-actions strong,
.executor-actions button {
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.executor-actions strong {
  border: 1px solid rgba(119,240,208,.22);
  color: rgba(119,240,208,.90);
  background: rgba(5,12,16,.44);
}

.executor-actions button {
  border: 1px solid rgba(119,240,208,.30);
  color: #061310;
  background: linear-gradient(135deg, var(--system-mint), #9ff5d6);
  cursor: pointer;
}

.executor-actions button:disabled {
  color: rgba(239,255,250,.42);
  border-color: rgba(167,226,210,.12);
  background: rgba(255,255,255,.06);
  cursor: not-allowed;
}

.executor-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 12px;
  margin-top: 14px;
}

.executor-score,
.executor-gates,
.executor-task-panel,
.executor-blocker-panel,
.executor-result-panel,
.executor-step-panel,
.executor-rules-panel {
  min-width: 0;
  min-height: 286px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,16,.36);
}

.executor-score > span,
.executor-gates > span,
.executor-task-panel > span,
.executor-blocker-panel > span,
.executor-result-panel > span,
.executor-step-panel > span,
.executor-rules-panel > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.executor-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 46px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.executor-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.executor-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.executor-stat-grid b,
.executor-gate-list p,
.executor-task,
.executor-step,
#sendExecutorBlockers span,
#sendExecutorResult,
#sendExecutorRules span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.executor-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.executor-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 24px;
}

.executor-gate-list,
#sendExecutorTaskList,
#sendExecutorBlockers,
#sendExecutorResult,
#sendExecutorSteps,
#sendExecutorRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

#sendExecutorTaskList,
#sendExecutorSteps {
  max-height: 286px;
  overflow: auto;
  padding-right: 4px;
}

.executor-gate-list p {
  margin: 0;
}

.executor-gate-list b {
  display: block;
  margin-bottom: 6px;
  color: rgba(119,240,208,.78);
  font-size: 11px;
}

.executor-gate-list strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.4;
}

.executor-task header,
.executor-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.executor-task header b,
.executor-step b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061310;
  background: rgba(119,240,208,.90);
  font-size: 11px;
}

.executor-task.blocked header b,
.executor-step.pending b {
  background: rgba(240,191,91,.92);
}

.executor-task header strong,
.executor-step strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.executor-task header span,
.executor-step span {
  color: rgba(240,191,91,.86);
  font-size: 11px;
}

.executor-task p,
.executor-task small,
.executor-step p,
#sendExecutorBlockers span,
#sendExecutorResult,
#sendExecutorRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

#sendExecutorResult strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.4;
}

#sendExecutorResult p {
  margin-top: 8px;
  color: rgba(239,255,250,.62);
  line-height: 1.45;
}

.executor-task p,
.executor-task small,
.executor-step p {
  display: block;
  margin-top: 8px;
}

#sendExecutorBlockers span,
#sendExecutorRules span {
  display: block;
}

#sendExecutorBlockers span.ready {
  color: rgba(184,255,232,.88);
  border-color: rgba(119,240,208,.22);
  background: rgba(119,240,208,.08);
}

.recovery-ledger {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(5,15,13,.95), rgba(14,23,18,.91)),
    linear-gradient(90deg, rgba(119,240,208,.08), transparent 38%, rgba(240,191,91,.07));
  box-shadow: 0 22px 64px rgba(0,0,0,.27);
}

.ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.ledger-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.ledger-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.ledger-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(240,191,91,.24);
  border-radius: 999px;
  color: rgba(240,191,91,.92);
  background: rgba(5,12,11,.42);
  font-size: 12px;
}

.ledger-layout {
  display: grid;
  grid-template-columns: 250px minmax(220px, .7fr) minmax(420px, 1.25fr) minmax(250px, .72fr) minmax(260px, .78fr);
  gap: 12px;
  margin-top: 14px;
}

.ledger-score,
.ledger-stage-panel,
.ledger-task-panel,
.ledger-role-panel,
.ledger-rules-panel {
  min-height: 310px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,11,.34);
}

.ledger-score > span,
.ledger-stage-panel > span,
.ledger-task-panel > span,
.ledger-role-panel > span,
.ledger-rules-panel > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.ledger-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1;
}

.ledger-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.ledger-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.ledger-stat-grid b {
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.ledger-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.ledger-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

#ledgerStageList,
#ledgerTaskList,
#ledgerRoleList,
#ledgerRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 292px;
  overflow: auto;
  padding-right: 4px;
}

.ledger-stage,
.ledger-role,
#ledgerRules span {
  min-height: 86px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.ledger-stage b,
.ledger-role b {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 7px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(119,240,208,.90);
  font-size: 11px;
}

.ledger-stage strong,
.ledger-role strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.ledger-stage span,
.ledger-stage p,
.ledger-role p,
#ledgerRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.ledger-stage span {
  display: block;
  margin-top: 6px;
  color: rgba(240,191,91,.82);
}

.ledger-stage p,
.ledger-role p {
  margin-top: 6px;
}

.ledger-row {
  min-height: 164px;
  padding: 12px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.ledger-row header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ledger-row header b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(240,191,91,.92);
  font-size: 11px;
}

.ledger-row header strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.ledger-row header span {
  color: rgba(240,191,91,.86);
  font-size: 11px;
}

.ledger-row p {
  margin-top: 9px;
  color: rgba(239,255,250,.66);
  font-size: 12px;
  line-height: 1.45;
}

.ledger-row-meta,
.ledger-checkpoints {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.ledger-row-meta em,
.ledger-checkpoints span {
  min-height: 26px;
  padding: 5px 7px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 999px;
  color: rgba(239,255,250,.66);
  background: rgba(5,12,11,.32);
  font-size: 11px;
  font-style: normal;
}

.ledger-checkpoints span b {
  margin-right: 5px;
  color: rgba(119,240,208,.90);
}

.ledger-checkpoints span.completed {
  border-color: rgba(119,240,208,.28);
  color: rgba(184,255,232,.86);
  background: rgba(119,240,208,.10);
}

.ledger-checkpoints span.failed {
  border-color: rgba(232,95,76,.30);
  color: rgba(255,194,184,.88);
  background: rgba(232,95,76,.11);
}

.ledger-checkpoints span.review {
  border-color: rgba(240,191,91,.30);
  color: rgba(255,226,170,.88);
  background: rgba(240,191,91,.11);
}

.ledger-checkpoints span.progress {
  border-color: rgba(122,168,255,.28);
  color: rgba(204,219,255,.88);
  background: rgba(122,168,255,.11);
}

.ledger-checkpoints span small {
  display: block;
  margin-top: 3px;
  color: rgba(239,255,250,.50);
  font-size: 10px;
  line-height: 1.3;
}

#ledgerRules span {
  min-height: 46px;
  display: block;
}

.recovery-webhook {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(122,168,255,.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(5,13,18,.96), rgba(9,22,24,.92), rgba(12,18,16,.94)),
    linear-gradient(90deg, rgba(122,168,255,.09), transparent 44%, rgba(119,240,208,.08));
  box-shadow: 0 22px 64px rgba(0,0,0,.30);
}

.webhook-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.webhook-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.webhook-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.webhook-head > strong {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(122,168,255,.24);
  border-radius: 999px;
  color: rgba(184,211,255,.94);
  background: rgba(5,12,16,.44);
  font-size: 12px;
}

.webhook-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 12px;
  margin-top: 14px;
}

.webhook-score,
.webhook-config-panel,
.webhook-format-panel,
.webhook-sample-panel,
.webhook-rules-panel {
  min-width: 0;
  min-height: 286px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,16,.36);
}

.webhook-score > span,
.webhook-config-panel > span,
.webhook-format-panel > span,
.webhook-sample-panel > span,
.webhook-rules-panel > span {
  color: rgba(122,168,255,.86);
  font-size: 12px;
  font-weight: 950;
}

.webhook-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 52px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.webhook-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.webhook-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.webhook-stat-grid b,
.webhook-config-list p,
#recoveryWebhookFormats span,
#recoveryWebhookSamples p,
#recoveryWebhookRules span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.webhook-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.webhook-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

.webhook-config-list,
#recoveryWebhookFormats,
#recoveryWebhookSamples,
#recoveryWebhookRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 286px;
  overflow: auto;
  padding-right: 4px;
}

.webhook-config-list p {
  margin: 0;
}

.webhook-config-list b {
  display: block;
  margin-bottom: 6px;
  color: rgba(122,168,255,.78);
  font-size: 11px;
}

.webhook-config-list strong,
#recoveryWebhookFormats span,
#recoveryWebhookSamples p,
#recoveryWebhookRules span {
  color: rgba(239,255,250,.66);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.recovery-inbox {
  margin: 0 0 16px;
  padding: 18px;
  color: #f8fffb;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  background:
    linear-gradient(140deg, rgba(7,16,14,.95), rgba(18,24,18,.92), rgba(8,15,18,.94)),
    linear-gradient(90deg, rgba(119,240,208,.08), transparent 44%, rgba(240,191,91,.08));
  box-shadow: 0 22px 64px rgba(0,0,0,.28);
}

.inbox-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.inbox-head h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
}

.inbox-head p {
  max-width: 900px;
  color: rgba(239,255,250,.68);
  line-height: 1.6;
}

.inbox-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.inbox-actions strong,
.inbox-actions button {
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.inbox-actions strong {
  border: 1px solid rgba(119,240,208,.22);
  color: rgba(119,240,208,.90);
  background: rgba(5,12,16,.44);
}

.inbox-actions button {
  border: 1px solid rgba(119,240,208,.30);
  color: #061310;
  background: linear-gradient(135deg, var(--system-mint), #9ff5d6);
  cursor: pointer;
}

.inbox-actions button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.inbox-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 12px;
  margin-top: 14px;
}

.inbox-score,
.inbox-list-panel,
.inbox-issue-panel,
.inbox-rules-panel {
  min-width: 0;
  min-height: 300px;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.14);
  border-radius: 8px;
  background: rgba(5,12,11,.34);
}

.inbox-score > span,
.inbox-list-panel > span,
.inbox-issue-panel > span,
.inbox-rules-panel > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 950;
}

.inbox-score strong {
  display: block;
  margin: 18px 0 6px;
  color: #ffffff;
  font-size: 56px;
  line-height: 1;
}

.inbox-score p {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.inbox-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.inbox-stat-grid b,
.inbox-row,
.inbox-issue,
#recoveryInboxRules span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.inbox-stat-grid small {
  display: block;
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.inbox-stat-grid em {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
}

#recoveryInboxList,
#recoveryInboxIssues,
#recoveryInboxRules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 292px;
  overflow: auto;
  padding-right: 4px;
}

.inbox-row header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.inbox-row header b,
.inbox-issue b {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #061310;
  background: rgba(119,240,208,.90);
  font-size: 11px;
}

.inbox-row.duplicate header b,
.inbox-row.blocked header b,
.inbox-issue b {
  background: rgba(240,191,91,.92);
}

.inbox-row header strong,
.inbox-issue strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.inbox-row header span {
  color: rgba(240,191,91,.86);
  font-size: 11px;
}

.inbox-row p,
.inbox-row small,
.inbox-issue p,
#recoveryInboxRules span {
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.45;
}

.inbox-row p,
.inbox-row small,
.inbox-issue p {
  display: block;
  margin-top: 8px;
}

.inbox-issue.ready b {
  background: rgba(119,240,208,.90);
}

#recoveryInboxRules span {
  display: block;
  min-height: 42px;
}

.business-layout,
.gap-layout,
.feishu-layout,
.recipient-layout,
.message-layout,
.send-layout,
.ledger-layout {
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

.business-score,
.field-coverage,
.missing-queue,
.collection-steps,
.gap-score,
.gap-field-panel,
.gap-operator-panel,
.gap-task-panel,
.gap-rules-panel,
.feishu-score,
.delivery-routes,
.message-templates,
.delivery-windows,
.delivery-steps,
.recipient-score,
.recipient-role-panel,
.recipient-queue-panel,
.recipient-rules-panel,
.message-score,
.message-preview-panel,
.message-quality-panel,
.message-rules-panel,
.send-score,
.send-list-panel,
.send-steps-panel,
.send-rules-panel,
.ledger-score,
.ledger-stage-panel,
.ledger-task-panel,
.ledger-role-panel,
.ledger-rules-panel {
  min-width: 0;
}

.user-output {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  color: #f8fffb;
  background:
    linear-gradient(135deg, rgba(7,17,16,.92), rgba(17,28,20,.90)),
    linear-gradient(90deg, rgba(119,240,208,.08), transparent 40%, rgba(240,191,91,.07));
  box-shadow: 0 22px 64px rgba(0,0,0,.26);
}

.output-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.output-head h3 {
  margin-top: 5px;
  color: #ffffff;
  font-size: 22px;
}

.output-head > span {
  display: inline-flex;
  align-items: center;
  max-width: 420px;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(167,226,210,.20);
  border-radius: 6px;
  color: rgba(239,255,250,.72);
  background: rgba(5,12,11,.48);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.output-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(320px, .9fr);
  gap: 12px;
}

.role-output,
.automation-output {
  position: relative;
  min-height: 210px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(167,226,210,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.055);
}

.role-output::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--system-mint), var(--system-amber));
}

.operator-output::before {
  background: linear-gradient(180deg, #7aa8ff, var(--system-mint));
}

.role-output > span,
.automation-output > span {
  color: rgba(119,240,208,.78);
  font-size: 12px;
  font-weight: 900;
}

.role-output h4 {
  margin: 10px 0 9px;
  color: #ffffff;
  font-size: 21px;
}

.role-output p {
  min-height: 78px;
  color: rgba(239,255,250,.70);
  font-size: 14px;
  line-height: 1.62;
}

.output-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.output-tags b {
  min-height: 28px;
  padding: 6px 8px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(119,240,208,.90);
  font-size: 12px;
}

.operator-output .output-tags b {
  color: #07110f;
  background: rgba(240,191,91,.92);
}

.automation-output {
  background:
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
}

.automation-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.automation-list div,
.automation-list a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 2px;
  align-items: center;
  min-height: 42px;
  padding: 7px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 6px;
  background: rgba(5,12,11,.32);
  text-decoration: none;
}

.automation-list a:hover {
  border-color: rgba(119,240,208,.38);
  background: rgba(119,240,208,.10);
}

.automation-list b {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(119,240,208,.92);
  font-size: 12px;
}

.automation-list strong {
  color: #ffffff;
  font-size: 13px;
}

.automation-list small {
  color: rgba(239,255,250,.54);
  font-size: 11px;
  line-height: 1.35;
}

.version-roadmap {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid rgba(167,226,210,.20);
  border-radius: 8px;
  color: #f8fffb;
  background:
    linear-gradient(145deg, rgba(5,13,12,.78), rgba(12,24,19,.82)),
    linear-gradient(90deg, rgba(119,240,208,.05), transparent);
  box-shadow: 0 20px 58px rgba(0,0,0,.22);
}

.roadmap-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.roadmap-head h3 {
  margin-top: 5px;
  color: #ffffff;
  font-size: 21px;
}

.roadmap-head > span {
  display: inline-flex;
  max-width: 360px;
  min-height: 32px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(167,226,210,.18);
  border-radius: 6px;
  color: rgba(239,255,250,.68);
  background: rgba(255,255,255,.045);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.version-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.version-card {
  position: relative;
  min-height: 152px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(167,226,210,.15);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.version-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(167,226,210,.22);
}

.version-card.active {
  border-color: rgba(119,240,208,.48);
  background:
    linear-gradient(150deg, rgba(119,240,208,.14), rgba(255,255,255,.045));
}

.version-card.active::before {
  background: linear-gradient(180deg, var(--system-mint), var(--system-amber));
}

.version-card b {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 28px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(119,240,208,.92);
  font-size: 12px;
}

.version-card h4 {
  margin: 11px 0 8px;
  color: #ffffff;
  font-size: 16px;
}

.version-card p {
  color: rgba(239,255,250,.58);
  font-size: 12px;
  line-height: 1.52;
}

.version-card span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: rgba(239,255,250,.48);
  font-size: 11px;
  font-weight: 900;
}

.future-workbench {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  color: #f8fffb;
  background:
    linear-gradient(145deg, rgba(8,19,17,.88), rgba(5,13,12,.78)),
    linear-gradient(90deg, rgba(119,240,208,.07), transparent 42%, rgba(122,168,255,.06));
  box-shadow: 0 22px 64px rgba(0,0,0,.24);
}

.future-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.future-head h3 {
  margin-top: 5px;
  color: #ffffff;
  font-size: 21px;
}

.future-head > span {
  display: inline-flex;
  align-items: center;
  max-width: 420px;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(167,226,210,.18);
  border-radius: 6px;
  color: rgba(239,255,250,.68);
  background: rgba(255,255,255,.045);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.future-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.future-module {
  min-height: 280px;
  padding: 15px;
  border: 1px solid rgba(167,226,210,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.future-module > b {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 28px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(119,240,208,.92);
  font-size: 12px;
}

.future-module h4 {
  margin: 11px 0 8px;
  color: #ffffff;
  font-size: 17px;
}

.future-module p {
  min-height: 54px;
  color: rgba(239,255,250,.58);
  font-size: 12px;
  line-height: 1.52;
}

.module-meter {
  height: 8px;
  overflow: hidden;
  margin: 12px 0 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
}

.module-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--system-mint), var(--system-amber));
  transition: width .25s ease;
}

.future-module > strong {
  display: block;
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 20px;
}

.module-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}

.module-stats span {
  min-height: 58px;
  padding: 8px;
  border-radius: 6px;
  color: rgba(239,255,250,.58);
  background: rgba(5,12,11,.32);
  font-size: 11px;
}

.module-stats strong {
  display: block;
  margin-top: 6px;
  color: #ffffff;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.module-list {
  display: grid;
  gap: 7px;
  max-height: 154px;
  overflow: auto;
}

.module-list span {
  display: block;
  padding: 7px 8px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 6px;
  color: rgba(239,255,250,.72);
  background: rgba(5,12,11,.30);
  font-size: 12px;
  line-height: 1.38;
}

.recovery-mini span {
  border-left: 3px solid rgba(119,240,208,.80);
}

.access-stack {
  display: grid;
  gap: 9px;
  margin-top: 13px;
}

.access-stack span {
  display: grid;
  gap: 4px;
  min-height: 54px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 6px;
  background: rgba(5,12,11,.32);
}

.access-stack small {
  color: rgba(239,255,250,.52);
  font-size: 11px;
}

.access-stack strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.35;
}

.app-shell .metrics {
  gap: 12px;
  margin: 0 0 18px;
}

.app-shell .metric {
  min-height: 124px;
  padding: 18px;
  border-color: rgba(167,226,210,.22);
  color: #f8fffb;
  background:
    linear-gradient(150deg, rgba(13,27,25,.90), rgba(4,12,11,.84));
  box-shadow: 0 18px 54px rgba(0,0,0,.26);
}

.app-shell .metric::after {
  display: none;
}

.app-shell .metric span,
.app-shell .metric small {
  color: rgba(239,255,250,.58);
}

.app-shell .metric strong {
  color: #ffffff;
  font-size: 38px;
}

.app-shell .metric.critical {
  border-color: rgba(232,95,76,.34);
}

.app-shell .metric.warning {
  border-color: rgba(240,191,91,.34);
}

.app-shell .metric.focus,
.app-shell .metric.live {
  border-color: rgba(119,240,208,.28);
}

.app-shell .workspace {
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 18px;
}

.queue-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(167,226,210,.22);
  border-radius: 8px;
  background: rgba(5,13,12,.62);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.queue-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.queue-head h3 {
  color: #f8fffb;
  font-size: 19px;
}

.queue-head span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(167,226,210,.18);
  border-radius: 6px;
  color: rgba(239,255,250,.70);
  background: rgba(255,255,255,.055);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.queue-panel .store-list {
  max-height: calc(100vh - 238px);
  padding-right: 6px;
}

.app-shell .store-card {
  border-color: rgba(167,226,210,.18);
  color: rgba(239,255,250,.82);
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  box-shadow: none;
}

.app-shell .store-card h3 {
  color: #f8fffb;
}

.app-shell .store-card:hover,
.app-shell .store-card.active {
  transform: translateY(-1px);
  border-color: rgba(119,240,208,.64);
  background: linear-gradient(145deg, rgba(119,240,208,.14), rgba(255,255,255,.055));
  box-shadow: 0 18px 46px rgba(0,0,0,.26);
}

.app-shell .pill {
  color: rgba(239,255,250,.72);
  background: rgba(255,255,255,.09);
}

.app-shell .pill.red {
  color: #fff;
  background: rgba(232,95,76,.86);
}

.app-shell .pill.amber {
  color: #160f05;
  background: rgba(240,191,91,.92);
}

.app-shell .pill.green {
  color: #06100d;
  background: rgba(119,240,208,.92);
}

.app-shell .pill.state {
  color: rgba(239,255,250,.82);
  background: rgba(255,255,255,.12);
}

.app-shell .detail {
  min-height: 760px;
  padding: 20px;
  border-color: rgba(255,255,255,.70);
  background:
    linear-gradient(180deg, rgba(248,251,248,.98), rgba(237,244,240,.96));
  box-shadow: 0 24px 80px rgba(0,0,0,.30);
}

.app-shell .detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 12px;
  padding: 2px 2px 6px;
}

.app-shell .detail-head h3 {
  font-size: 26px;
  line-height: 1.22;
}

.detail-badges {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.detail-badges span {
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #07110f;
  background: #dce8e2;
  font-size: 12px;
  font-weight: 900;
}

.detail-badges span:first-child {
  color: #fff;
  background: #17211d;
}

.app-shell .detail-head .ghost {
  height: 34px;
  color: #07110f;
  background: #e8efe9;
}

.app-shell .tabs {
  position: sticky;
  top: 0;
  z-index: 3;
  border-color: rgba(12,23,21,.10);
  background: rgba(234,241,236,.92);
  backdrop-filter: blur(10px);
}

.app-shell .tabs button {
  color: #5a6762;
}

.app-shell .tabs button.active {
  color: #06100d;
  background: linear-gradient(135deg, #8cf6d7, #45c89f);
  box-shadow: none;
}

.app-shell .conclusion-main {
  border-color: rgba(69,200,159,.34);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(237,250,244,.96));
}

.app-shell .state-main {
  border-width: 1px;
}

.app-shell .realtime,
.app-shell .recent-card,
.app-shell .action,
.app-shell .kpi,
.app-shell .time-body,
.app-shell .playbook,
.app-shell .sku-row {
  border-color: rgba(12,23,21,.10);
  background: rgba(255,255,255,.86);
}

@media (max-width: 1260px) {
  .system-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .output-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .version-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .future-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .automation-output {
    grid-column: 1 / -1;
  }

  .app-shell .workspace {
    grid-template-columns: 360px minmax(0, 1fr);
  }
}

@media (max-width: 1060px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell .side {
    width: auto;
    height: auto;
  }

  .system-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell .workspace {
    grid-template-columns: 1fr;
  }

  .queue-panel .store-list {
    max-height: 540px;
  }
}

@media (max-width: 760px) {
  .app-shell .main {
    padding: 18px 16px 28px;
  }

  .app-shell .topbar h2 {
    font-size: 28px;
  }

  .system-rail,
  .system-map,
  .output-grid,
  .app-shell .metrics {
    grid-template-columns: 1fr;
  }

  .automation-output {
    grid-column: auto;
  }

  .output-head {
    flex-direction: column;
  }

  .roadmap-head {
    flex-direction: column;
  }

  .future-head {
    flex-direction: column;
  }

  .future-grid {
    grid-template-columns: 1fr;
  }

  .version-grid {
    grid-template-columns: 1fr;
  }

  .app-shell .detail-head {
    grid-template-columns: 1fr;
  }

  .detail-badges {
    justify-content: flex-start;
  }
}

/* V1.3 operating experience engine. */
.side-playbook {
  position: relative;
  overflow: hidden;
}

.side-playbook::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(119,240,208,.08), transparent 55%, rgba(240,191,91,.06));
  pointer-events: none;
}

.side-playbook > * {
  position: relative;
  z-index: 1;
}

.side-playbook-grid {
  display: grid;
  gap: 7px;
}

.side-playbook-grid span {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  min-height: 44px;
  padding: 8px;
  border: 1px solid rgba(167,226,210,.12);
  border-radius: 6px;
  background: rgba(5,12,11,.30);
}

.side-playbook-grid b {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: #06100d;
  background: linear-gradient(135deg, #8cf6d7, #f0bf5b);
  font-size: 13px;
}

.side-playbook-grid strong {
  color: #f8fffb;
  font-size: 12px;
}

.side-playbook-grid small {
  color: rgba(239,255,250,.50);
  font-size: 11px;
}

.side-playbook p {
  margin-top: 10px;
  padding: 9px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 6px;
  color: rgba(239,255,250,.76);
  background: rgba(5,12,11,.36);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
}

.experience-engine {
  margin: 0 0 16px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(167,226,210,.24);
  border-radius: 8px;
  color: #f8fffb;
  background:
    linear-gradient(135deg, rgba(5,12,11,.94), rgba(9,29,31,.90) 48%, rgba(24,22,13,.92)),
    linear-gradient(90deg, rgba(119,240,208,.08), transparent 42%, rgba(240,191,91,.08));
  box-shadow: 0 28px 78px rgba(0,0,0,.30);
}

.experience-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 15px;
}

.experience-head h3 {
  margin-top: 5px;
  color: #ffffff;
  font-size: 24px;
}

.experience-head p:not(.eyebrow) {
  max-width: 760px;
  margin-top: 8px;
  color: rgba(239,255,250,.62);
  font-size: 13px;
  line-height: 1.6;
}

.experience-head > span {
  display: inline-flex;
  align-items: center;
  max-width: 440px;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(167,226,210,.20);
  border-radius: 6px;
  color: #06100d;
  background: linear-gradient(135deg, #8cf6d7, #f0bf5b);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.experience-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.18fr) minmax(280px, .86fr) minmax(300px, .96fr);
  gap: 12px;
}

.stage-console,
.base-guard,
.skill-call {
  min-width: 0;
  min-height: 316px;
  padding: 16px;
  border: 1px solid rgba(167,226,210,.17);
  border-radius: 8px;
  background: rgba(255,255,255,.055);
}

.stage-console > span,
.base-guard > span,
.skill-call > span {
  color: rgba(119,240,208,.80);
  font-size: 12px;
  font-weight: 900;
}

.stage-console h4,
.base-guard h4,
.skill-call h4 {
  margin: 10px 0 8px;
  color: #ffffff;
  font-size: 20px;
}

.stage-console > p {
  color: rgba(239,255,250,.64);
  font-size: 13px;
  line-height: 1.56;
}

.stage-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 15px;
}

.stage-node {
  position: relative;
  min-height: 104px;
  padding: 11px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  background: rgba(5,12,11,.30);
}

.stage-node::before {
  content: "";
  display: block;
  width: 28px;
  height: 4px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(167,226,210,.24);
}

.stage-node.active {
  border-color: rgba(140,246,215,.58);
  background:
    linear-gradient(145deg, rgba(119,240,208,.18), rgba(255,255,255,.065));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 16px 38px rgba(0,0,0,.24);
}

.stage-node.active::before {
  background: linear-gradient(90deg, #8cf6d7, #f0bf5b);
}

.stage-node b {
  display: block;
  color: #ffffff;
  font-size: 14px;
}

.stage-node span {
  display: block;
  margin-top: 8px;
  color: rgba(239,255,250,.56);
  font-size: 12px;
  line-height: 1.42;
}

.role-loop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.role-loop div {
  min-height: 104px;
  padding: 12px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  background: rgba(5,12,11,.36);
}

.role-loop b {
  color: #8cf6d7;
  font-size: 12px;
}

.role-loop p {
  margin-top: 8px;
  color: rgba(239,255,250,.68);
  font-size: 12px;
  line-height: 1.55;
}

.guard-list,
.skill-call-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.guard-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-height: 78px;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.13);
  border-left: 4px solid rgba(119,240,208,.70);
  border-radius: 8px;
  background: rgba(5,12,11,.32);
}

.guard-item.red { border-left-color: #e85f4c; }
.guard-item.amber { border-left-color: #f0bf5b; }
.guard-item.blue { border-left-color: #7aa8ff; }
.guard-item.green { border-left-color: #8cf6d7; }

.guard-item b,
.skill-item b {
  display: block;
  color: #ffffff;
  font-size: 13px;
}

.guard-item strong {
  display: block;
  margin-top: 4px;
  color: rgba(239,255,250,.70);
  font-size: 12px;
}

.guard-item > span {
  padding: 5px 7px;
  border-radius: 6px;
  color: #06100d;
  background: rgba(140,246,215,.90);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.guard-item.red > span { color: #fff; background: rgba(232,95,76,.92); }
.guard-item.amber > span { color: #160f05; background: rgba(240,191,91,.94); }
.guard-item.blue > span { color: #06101e; background: rgba(122,168,255,.94); }

.guard-item p {
  grid-column: 1 / -1;
  color: rgba(239,255,250,.58);
  font-size: 12px;
  line-height: 1.45;
}

.skill-item {
  position: relative;
  min-height: 74px;
  padding: 11px 11px 11px 52px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  background: rgba(5,12,11,.32);
}

.skill-item span {
  position: absolute;
  left: 10px;
  top: 11px;
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  color: #06100d;
  background: rgba(140,246,215,.92);
  font-size: 11px;
  font-weight: 900;
}

.skill-item.red span { color: #fff; background: rgba(232,95,76,.92); }
.skill-item.amber span { color: #160f05; background: rgba(240,191,91,.94); }
.skill-item.blue span { color: #06101e; background: rgba(122,168,255,.94); }

.skill-item p {
  margin-top: 6px;
  color: rgba(239,255,250,.60);
  font-size: 12px;
  line-height: 1.48;
}

.growth-dashboard {
  display: grid;
  gap: 14px;
}

.growth-summary {
  padding: 17px;
  border: 1px solid rgba(12,23,21,.10);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(237,250,244,.96));
}

.growth-summary h4 {
  margin: 6px 0 8px;
  color: #17211d;
  font-size: 22px;
}

.growth-summary p:not(.eyebrow) {
  color: #586660;
  line-height: 1.6;
}

.growth-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.growth-grid article {
  min-height: 300px;
  padding: 14px;
  border: 1px solid rgba(12,23,21,.10);
  border-radius: 8px;
  background: rgba(255,255,255,.84);
}

.growth-grid article > span {
  color: #5f6d67;
  font-size: 12px;
  font-weight: 900;
}

.growth-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.growth-list span {
  display: block;
  min-height: 72px;
  padding: 10px;
  border: 1px solid rgba(12,23,21,.10);
  border-left: 4px solid #d4dfd8;
  border-radius: 8px;
  color: #61706a;
  background: #f8fbf8;
  font-size: 12px;
  line-height: 1.5;
}

.growth-list span.active,
.growth-list span.green {
  border-left-color: #00a76f;
  background: #effaf4;
}

.growth-list span.amber {
  border-left-color: #c98218;
  background: #fff8ea;
}

.growth-list span.red {
  border-left-color: #d34b36;
  background: #fff4ef;
}

.growth-list span.blue {
  border-left-color: #386fc6;
  background: #eef5ff;
}

.growth-list b {
  display: block;
  margin-bottom: 5px;
  color: #17211d;
  font-size: 13px;
}

.data-ingestion {
  margin: 0 0 16px;
  padding: 18px;
  border: 1px solid rgba(167,226,210,.24);
  border-radius: 8px;
  color: #f8fffb;
  background:
    linear-gradient(135deg, rgba(7,17,16,.94), rgba(9,28,28,.90) 50%, rgba(18,22,15,.92)),
    linear-gradient(90deg, rgba(119,240,208,.07), transparent 42%, rgba(122,168,255,.07));
  box-shadow: 0 26px 76px rgba(0,0,0,.30);
}

.ingestion-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 15px;
}

.ingestion-head h3 {
  margin-top: 5px;
  color: #ffffff;
  font-size: 23px;
}

.ingestion-head p:not(.eyebrow) {
  max-width: 760px;
  margin-top: 8px;
  color: rgba(239,255,250,.62);
  font-size: 13px;
  line-height: 1.6;
}

.ingestion-head > span {
  display: inline-flex;
  align-items: center;
  max-width: 420px;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(167,226,210,.20);
  border-radius: 6px;
  color: #06100d;
  background: linear-gradient(135deg, #8cf6d7, #f0bf5b);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.data-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.data-section-tabs button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(167,226,210,.16);
  border-radius: 8px;
  color: rgba(239,255,250,.72);
  background: rgba(255,255,255,.055);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.data-section-tabs button.active {
  color: #06100d;
  border-color: rgba(140,246,215,.55);
  background: linear-gradient(135deg, #8cf6d7, #f0bf5b);
}

.ingestion-grid {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(330px, 1fr) minmax(330px, 1fr);
  gap: 12px;
}

.import-console,
.import-status,
.automation-status {
  min-width: 0;
  min-height: 320px;
  padding: 16px;
  border: 1px solid rgba(167,226,210,.17);
  border-radius: 8px;
  background: rgba(255,255,255,.055);
}

.import-console > span,
.import-status > span,
.automation-status > span {
  color: rgba(119,240,208,.80);
  font-size: 12px;
  font-weight: 900;
}

.import-console h4,
.import-status h4,
.automation-status h4 {
  margin: 10px 0 12px;
  color: #ffffff;
  font-size: 19px;
}

.data-catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.catalog-card {
  min-width: 0;
  min-height: 92px;
  padding: 10px;
  text-align: left;
  border: 1px solid rgba(167,226,210,.16);
  border-radius: 8px;
  color: rgba(239,255,250,.70);
  background:
    linear-gradient(145deg, rgba(119,240,208,.09), rgba(255,255,255,.04)),
    rgba(5,12,11,.30);
}

.catalog-card:hover {
  border-color: rgba(140,246,215,.34);
  background:
    linear-gradient(145deg, rgba(119,240,208,.15), rgba(240,191,91,.07)),
    rgba(5,12,11,.38);
}

.catalog-card.ready {
  border-color: rgba(140,246,215,.28);
}

.catalog-card strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
}

.catalog-card span {
  display: inline-flex;
  margin-top: 8px;
  padding: 5px 7px;
  border-radius: 6px;
  color: #07110f;
  background: rgba(240,191,91,.92);
  font-size: 11px;
  font-weight: 950;
}

.catalog-card.ready span {
  background: rgba(140,246,215,.92);
}

.catalog-card p {
  margin-top: 8px;
  color: rgba(239,255,250,.58);
  font-size: 12px;
  line-height: 1.35;
}

.import-console label {
  color: rgba(143,244,228,.76);
}

.import-console select,
.import-console input[type="file"] {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  color: #f8fffb;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(180,236,226,.18);
  border-radius: 6px;
}

.import-console select:disabled,
.import-console input:disabled,
.import-console button:disabled {
  cursor: not-allowed;
  opacity: .54;
}

.template-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.template-btn {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(167,226,210,.18);
  border-radius: 6px;
  color: rgba(239,255,250,.78);
  background: rgba(255,255,255,.08);
  font-size: 12px;
  font-weight: 800;
}

#importGate,
#importResult {
  margin-top: 10px;
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.5;
}

#importResult {
  min-height: 18px;
  color: rgba(140,246,215,.90);
  font-weight: 850;
}

.import-status-list,
.automation-task-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.import-group {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(167,226,210,.13);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
}

.import-group header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.import-group header strong {
  color: #ffffff;
  font-size: 13px;
}

.import-group header span {
  flex: 0 0 auto;
  color: rgba(140,246,215,.78);
  font-size: 11px;
  font-weight: 900;
}

.import-group > div {
  display: grid;
  gap: 7px;
}

.import-row,
.automation-task {
  position: relative;
  min-height: 72px;
  padding: 10px 10px 10px 13px;
  border: 1px solid rgba(167,226,210,.13);
  border-left: 4px solid rgba(240,191,91,.82);
  border-radius: 8px;
  background: rgba(5,12,11,.32);
  text-decoration: none;
}

.import-row {
  width: 100%;
  text-align: left;
  color: inherit;
}

.import-row:hover {
  border-color: rgba(119,240,208,.34);
  background: rgba(119,240,208,.08);
}

a.automation-task:hover {
  border-color: rgba(119,240,208,.36);
  background: rgba(119,240,208,.10);
}

.import-row.ready,
.automation-task.ready {
  border-left-color: rgba(140,246,215,.86);
}

.import-row b,
.automation-task b {
  display: block;
  color: #ffffff;
  font-size: 13px;
}

.import-row span,
.automation-task strong {
  position: absolute;
  right: 10px;
  top: 9px;
  padding: 5px 7px;
  border-radius: 6px;
  color: #160f05;
  background: rgba(240,191,91,.94);
  font-size: 11px;
  font-weight: 900;
}

.import-row.ready span,
.automation-task.ready strong {
  color: #06100d;
  background: rgba(140,246,215,.92);
}

.import-row p,
.automation-task p {
  margin-top: 8px;
  padding-right: 80px;
  color: rgba(239,255,250,.58);
  font-size: 12px;
  line-height: 1.45;
}

.automation-task {
  padding-left: 54px;
}

.automation-task > span {
  position: absolute;
  left: 10px;
  top: 11px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  color: #06100d;
  background: rgba(140,246,215,.92);
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 1320px) {
  .meituan-sync-center {
    grid-template-columns: 1fr 1fr;
  }

  .experience-layout {
    grid-template-columns: 1fr 1fr;
  }

  .ingestion-grid {
    grid-template-columns: 1fr 1fr;
  }

  .import-console {
    grid-column: 1 / -1;
  }

  .stage-console {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1060px) {
  .experience-layout,
  .growth-grid,
  .meituan-sync-center,
  .ingestion-grid {
    grid-template-columns: 1fr;
  }

  .import-console {
    grid-column: auto;
  }

  .stage-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .experience-head {
    flex-direction: column;
  }

  .ingestion-head {
    flex-direction: column;
  }

  .stage-track,
  .role-loop {
    grid-template-columns: 1fr;
  }
}

/* Mobile compatibility layer. Keep this block last so it wins over earlier design iterations. */
@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    min-height: 100dvh;
  }

  button,
  input,
  select {
    font-size: 16px;
  }

  .login-screen {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
    overflow: auto;
    padding: 18px;
  }

  .login-bg {
    background-position: 43% center;
    filter: saturate(.82) hue-rotate(145deg) brightness(.78) contrast(1.06);
    transform: none;
  }

  .login-screen::after {
    background:
      linear-gradient(180deg, rgba(5,12,12,.10), rgba(5,12,12,.42) 38%, rgba(5,12,12,.82)),
      linear-gradient(90deg, rgba(5,12,12,.30), transparent 58%, rgba(5,12,12,.28));
  }

  .login-copy {
    width: 100%;
    max-width: none;
    align-self: auto;
    padding: 18px 4px 14px;
  }

  .login-copy img,
  .liumi-mark.large {
    width: 78px;
    height: 50px;
    margin-bottom: 12px;
  }

  .liumi-mark.large::before {
    font-size: 25px;
  }

  .login-copy h1 {
    max-width: 260px;
    font-size: 34px;
    line-height: 1.08;
  }

  .login-copy span {
    margin-top: 10px;
    border-radius: 8px;
  }

  .login-card {
    width: 100%;
    margin: 0;
    padding: 22px;
    align-self: auto;
  }

  .login-card h2 {
    font-size: 26px;
  }

  .login-card input,
  .login-card button {
    min-height: 46px;
  }

  .app-shell {
    display: block;
    min-height: 100dvh;
  }

  .app-shell .side {
    position: relative;
    top: auto;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(167,226,210,.18);
  }

  .app-shell .brand {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  .side-brief {
    padding: 12px;
  }

  .side-brief p {
    max-width: none;
  }

  .side-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .side-kpis div {
    min-height: 58px;
    padding: 9px 7px;
  }

  .side-kpis strong {
    font-size: 21px;
  }

  .system-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 12px;
  }

  .system-rail button {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 46px;
  }

  .system-rail small {
    display: none;
  }

  .app-shell .side .panel {
    padding: 12px;
  }

  .side-playbook,
  .side-missions {
    display: none;
  }

  .app-shell .main {
    padding: 14px 12px 24px;
  }

  .app-shell .topbar,
  .top-actions,
  .action-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .app-shell .topbar {
    min-height: auto;
  }

  .app-shell .topbar h2 {
    font-size: 25px;
    line-height: 1.15;
  }

  .topline {
    font-size: 12px;
    line-height: 1.45;
  }

  .app-shell .status {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .app-shell .status span {
    flex: 0 0 auto;
  }

  .action-buttons .ghost,
  .action-buttons .primary,
  .app-shell .primary,
  .app-shell .secondary {
    width: 100%;
    min-height: 44px;
  }

  .command-deck,
  .output-grid,
  .experience-layout,
	  .task-center-layout,
	  .sla-layout,
	  .feishu-sla-layout,
	  .dianjin-layout,
	  .role-action-layout,
	  .dispatch-layout,
	  .writeback-layout,
	  .runner-layout,
	  .meituan-fetch-layout,
	  .meituan-writeback-layout,
	  .live-gate-layout,
	  .hot-product-intel,
	  .growth-grid,
  .data-catalog,
  .ingestion-grid,
  .future-grid,
  .version-grid,
  .system-map,
  .app-shell .workspace {
    grid-template-columns: 1fr;
  }

  .command-deck,
  .mission-lattice,
  .operation-task-center,
  .recovery-sla,
  .feishu-sla,
  .dianjin-engine,
  .role-action-center,
	  .automation-runner,
	  .meituan-fetch,
	  .meituan-writeback,
	  .iteration-baseline,
	  .live-gate,
  .connector-center,
  .business-collection,
  .user-output,
  .experience-engine,
  .data-ingestion,
  .version-roadmap,
  .future-workbench {
    margin-bottom: 12px;
    padding: 14px;
  }

  .deck-summary h3,
  .task-center-head h3,
  .sla-head h3,
  .feishu-sla-head h3,
  .dianjin-head h3,
  .role-action-head h3,
	  .runner-head h3,
	  .meituan-fetch-head h3,
	  .meituan-writeback-head h3,
	  .experience-head h3,
  .ingestion-head h3,
  .output-head h3 {
    font-size: 22px;
  }

  .deck-radar,
  .deck-timeline {
    display: none;
  }

  .deck-pulse-row,
  .metrics,
  .app-shell .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metrics,
  .app-shell .metrics {
    gap: 8px;
  }

  .app-shell .metric {
    min-height: 104px;
    padding: 14px;
  }

  .app-shell .metric strong {
    font-size: 30px;
  }

  .queue-panel {
    padding: 12px;
  }

  .queue-head {
    align-items: stretch;
    flex-direction: column;
  }

  .queue-head span {
    width: fit-content;
  }

  .queue-panel .store-list {
    max-height: 390px;
    overflow: auto;
  }

  .app-shell .store-card {
    padding: 12px;
  }

  .app-shell .detail {
    min-height: auto;
    padding: 13px;
    overflow: visible;
  }

  .app-shell .detail-head {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .app-shell .detail-head h3 {
    font-size: 22px;
  }

  .detail-badges {
    justify-content: flex-start;
  }

  .app-shell .detail-head .ghost {
    width: 100%;
    height: 40px;
  }

  .app-shell .tabs {
    position: sticky;
    top: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 7px;
    padding: 8px 0;
    margin: 4px -2px 12px;
    scrollbar-width: none;
  }

  .app-shell .tabs::-webkit-scrollbar {
    display: none;
  }

  .app-shell .tabs button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 11px;
    white-space: nowrap;
  }

  .state-main,
  .conclusion-columns,
  .split-actions,
  .realtime-grid,
  .recent-grid,
  .playbook-grid,
  .kpi-grid,
  .stage-track,
  .role-loop {
    grid-template-columns: 1fr;
  }

  .state-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .state-numbers span {
    min-width: 0;
  }

  .conclusion-main,
  .state-main,
  .recent-card,
  .realtime,
  .action,
  .playbook,
  .time-body,
  .future-module,
  .version-card,
  .role-output,
  .automation-output,
  .dianjin-score,
  .dianjin-workbench,
  .dianjin-rules,
  .role-action-score,
  .role-action-workbench,
  .role-action-rules,
  .sla-score,
  .sla-list-panel,
  .sla-stage-panel,
  .sla-operator-panel,
  .sla-rule-panel,
  .feishu-sla-score,
  .feishu-sla-message-panel,
  .feishu-sla-bucket-panel,
  .feishu-sla-rule-panel,
  .import-console,
  .import-status,
  .automation-status {
    min-width: 0;
  }

  .import-status-list,
  .automation-task-list,
  .module-list {
    max-height: none;
    overflow: visible;
  }

  .ingestion-head,
  .experience-head,
	  .task-center-head,
	  .sla-head,
	  .feishu-sla-head,
	  .dianjin-head,
	  .role-action-head,
	  .dispatch-head,
	  .writeback-head,
	  .runner-head,
	  .meituan-fetch-head,
	  .meituan-writeback-head,
	  .rehearsal-head,
	  .live-gate-head,
	  .output-head,
  .roadmap-head,
  .future-head {
    flex-direction: column;
  }

  .ingestion-head > span,
	  .task-center-head > strong,
	  .sla-head > strong,
	  .feishu-sla-head > strong,
	  .dianjin-head > strong,
	  .role-action-head > strong,
	  .dispatch-head > strong,
	  .writeback-head > strong,
	  .runner-head > strong,
	  .meituan-fetch-head > strong,
	  .meituan-writeback-head > strong,
	  .rehearsal-actions,
	  .live-gate-head > strong,
	  .output-head > span,
  .roadmap-head > span,
  .future-head > span {
    width: 100%;
    max-width: none;
  }

  .import-console select,
  .import-console input[type="file"] {
    min-height: 46px;
  }

  .template-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .template-btn {
    min-height: 40px;
  }

  .role-action-card footer {
    grid-template-columns: 1fr;
  }

  .role-action-queue,
  .task-center-stat-grid,
  .sla-stat-grid,
  .feishu-sla-stat-grid,
  .dispatch-stat-grid,
  .dispatch-row > div,
  .writeback-stat-grid,
  .rehearsal-layout,
  .rehearsal-stat-grid,
  .live-gate-layout,
  .live-gate-stat-grid,
  .live-gate-actions,
  .role-action-replenish-meta {
    grid-template-columns: 1fr;
  }

  .dispatch-row header,
  .task-phase header,
  .task-phase footer,
  .task-work-item header,
  .sla-row header,
  .feishu-sla-message header,
  .dispatch-row footer,
  .dispatch-step,
  .writeback-row header,
  .writeback-step,
  .rehearsal-row header,
  .rehearsal-log header,
  .live-gate-task header {
    grid-template-columns: 1fr;
  }

  .dispatch-row button {
    width: 100%;
    min-height: 40px;
  }

  .role-action-product {
    width: 100%;
  }

  .role-action-card button {
    width: 100%;
    min-height: 40px;
  }

  .sku-table {
    overflow-x: hidden;
  }

  .sku-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }

  .sku-row .sku-name {
    min-width: 0;
  }

  .sku-row button {
    width: 100%;
  }

  .hot-product-intel {
    grid-template-columns: 1fr;
  }

  .replenishment-panel > div {
    grid-template-columns: 1fr;
  }

  .product-link-action {
    width: 100%;
  }

  pre {
    max-height: 480px;
    font-size: 12px;
  }

  .login-copy h1,
  .app-shell .topbar h2,
  .app-shell .detail-head h3,
  .store-card h3,
  .sku-name,
  .conclusion-main p,
  .recent-card p,
  .realtime p,
  .action p,
  .import-row p,
  .automation-task p {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .recipient-import-panel textarea {
    min-height: 168px;
  }
}

@media (max-width: 420px) {
  .login-screen {
    padding: 12px;
  }

  .login-card {
    padding: 18px;
  }

  .side-kpis,
  .deck-pulse-row,
  .metrics,
  .app-shell .metrics,
  .state-numbers {
    grid-template-columns: 1fr;
  }

  .system-rail {
    grid-template-columns: 1fr;
  }

  .app-shell .main {
    padding: 12px 10px 22px;
  }

  .command-deck,
  .operation-task-center,
  .recovery-sla,
  .feishu-sla,
  .user-output,
  .experience-engine,
  .data-ingestion,
  .version-roadmap,
  .future-workbench,
  .live-gate,
  .queue-panel,
  .app-shell .detail {
    padding: 12px;
  }
}

/* V4.1 responsive guardrails: prevent command panels from widening the page. */
.app-shell,
.app-shell .main,
.app-shell .topbar,
.app-shell .workspace,
.app-shell .detail,
.command-deck,
.deck-summary,
.deck-radar,
.deck-ops,
.deck-timeline,
.operation-task-center,
.recovery-sla,
.feishu-sla,
.task-center-layout,
.task-center-score,
.task-center-phases,
.task-center-queue,
.task-center-lanes,
.task-center-contracts,
.sla-layout,
.sla-score,
.sla-list-panel,
.sla-stage-panel,
.sla-operator-panel,
.sla-rule-panel,
.feishu-sla-layout,
.feishu-sla-score,
.feishu-sla-message-panel,
.feishu-sla-bucket-panel,
.feishu-sla-rule-panel,
.runner-layout,
.runner-rules-panel,
.send-rehearsal,
.live-gate,
.send-queue,
.send-audit,
.send-executor {
  min-width: 0;
  max-width: 100%;
}

.app-shell {
  overflow-x: hidden;
}

.app-shell .tabs {
  max-width: 100%;
}

.app-shell .tabs button,
.deck-timeline span,
.deck-timeline b,
.deck-ops dd,
.runner-rules-panel > span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 1320px) {
  .command-deck {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
    grid-template-areas:
      "summary radar"
      "ops ops"
      "timeline timeline";
  }

  .deck-ops {
    align-self: auto;
  }
}

@media (max-width: 980px) {
  .command-deck {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "summary"
      "radar"
      "ops"
      "timeline";
  }

  .deck-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* V1.3 operating enablement layer */
.system-rail a {
  min-width: 0;
}

.top-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1260px) {
  .lattice-grid,
  .role-lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .app-shell.shell {
    display: flex;
    flex-direction: column;
  }

  .app-shell .main {
    order: 1;
  }

  .app-shell .side {
    order: 2;
  }

  .system-rail a {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 46px;
  }

  .system-rail a small {
    display: none;
  }

  .mission-lattice {
    padding: 14px;
  }

  .automation-scheduler {
    padding: 14px;
  }

  .iteration-baseline {
    padding: 14px;
  }

  .connector-center {
    padding: 14px;
  }

  .business-collection {
    padding: 14px;
  }

  .business-health {
    padding: 14px;
  }

  .business-gap {
    padding: 14px;
  }

  .feishu-delivery {
    padding: 14px;
  }

  .recipient-binding {
    padding: 14px;
  }

  .message-preview {
    padding: 14px;
  }

  .send-queue {
    padding: 14px;
  }

  .send-rehearsal {
    padding: 14px;
  }

  .live-gate {
    padding: 14px;
  }

  .send-audit {
    padding: 14px;
  }

  .send-executor {
    padding: 14px;
  }

  .recovery-ledger {
    padding: 14px;
  }

  .recovery-webhook {
    padding: 14px;
  }

  .recovery-inbox {
    padding: 14px;
  }

  .lattice-head,
  .scheduler-head,
  .iteration-head,
  .connector-head,
  .business-head,
  .health-head,
  .gap-head,
  .feishu-head,
  .recipient-head,
  .message-head,
  .send-head,
  .rehearsal-head,
  .audit-head,
  .executor-head,
  .ledger-head {
    display: grid;
    gap: 12px;
  }

  .webhook-head {
    display: grid;
    gap: 12px;
  }

  .inbox-head {
    display: grid;
    gap: 12px;
  }

  .inbox-actions {
    justify-items: start;
  }

  .executor-actions {
    justify-items: start;
  }

  .lattice-head h3,
  .scheduler-head h3,
  .iteration-head h3,
  .connector-head h3,
  .business-head h3,
  .health-head h3,
  .gap-head h3,
  .feishu-head h3,
  .recipient-head h3,
  .message-head h3,
  .send-head h3,
  .audit-head h3,
  .executor-head h3,
  .ledger-head h3 {
    font-size: 24px;
    line-height: 1.18;
  }

  .inbox-head h3 {
    font-size: 24px;
    line-height: 1.18;
  }

  .lattice-grid,
  .role-lanes,
  .baseline-layout,
  .scheduler-layout,
  .connector-layout,
  .connector-cards,
  .connector-columns,
  .business-layout,
  .health-layout,
  .gap-layout,
  .feishu-layout,
  .recipient-layout,
  .message-layout,
  .send-layout,
  .rehearsal-layout,
  .audit-layout,
  .executor-layout,
  .webhook-layout,
  .ledger-layout {
    grid-template-columns: 1fr;
  }

  .inbox-layout {
    grid-template-columns: 1fr;
  }

  .business-score,
  .scheduler-score,
  .scheduler-task-panel,
  .scheduler-gate-panel,
  .scheduler-rules-panel,
  .field-coverage,
  .missing-queue,
  .collection-steps,
  .health-score,
  .health-bucket-panel,
  .health-store-panel,
  .health-rules-panel,
  .gap-score,
  .gap-field-panel,
  .gap-operator-panel,
  .gap-task-panel,
  .gap-rules-panel,
  .feishu-score,
  .delivery-routes,
  .message-templates,
  .delivery-windows,
  .delivery-steps,
  .recipient-score,
  .recipient-role-panel,
  .recipient-queue-panel,
  .recipient-rules-panel,
  .message-score,
  .message-preview-panel,
  .message-quality-panel,
  .message-rules-panel,
  .send-score,
  .send-list-panel,
  .send-steps-panel,
  .send-rules-panel,
  .audit-score,
  .audit-list-panel,
  .audit-issue-panel,
  .audit-rules-panel,
  .executor-score,
  .executor-gates,
  .executor-task-panel,
  .executor-blocker-panel,
  .executor-result-panel,
  .executor-step-panel,
  .executor-rules-panel,
  .webhook-score,
  .webhook-config-panel,
  .webhook-format-panel,
  .webhook-sample-panel,
  .webhook-rules-panel,
  .ledger-score,
  .ledger-stage-panel,
  .ledger-task-panel,
  .ledger-role-panel,
  .ledger-rules-panel {
    grid-column: auto;
    min-height: auto;
  }

  .inbox-score,
  .inbox-list-panel,
  .inbox-issue-panel,
  .inbox-rules-panel {
    min-height: auto;
  }

  #sendAuditRules {
    grid-template-columns: 1fr;
  }

  #businessFieldCoverage,
  #schedulerTaskList,
  #schedulerGateList,
  #schedulerRules,
  #businessMissingStoresList,
  #businessCollectionSteps,
  #healthBucketList,
  #healthStoreList,
  #healthRules,
  #gapFieldList,
  #gapOperatorList,
  #gapTaskList,
  #gapRules,
  #feishuRouteList,
  #feishuTemplateList,
  #feishuWindowList,
  #feishuDeliverySteps,
  #recipientRoleCoverage,
  #recipientQueue,
  #recipientRules,
  #feishuMessagePreviewList,
  #messageQualityList,
  #messagePayloadRules,
  #sendQueueList,
  #sendQueueSteps,
  #sendQueueRules,
  #sendAuditList,
  #sendAuditIssueList,
  #sendAuditRules,
  .webhook-config-list,
  #recoveryWebhookFormats,
  #recoveryWebhookSamples,
  #recoveryWebhookRules,
  #ledgerStageList,
  #ledgerTaskList,
  #ledgerRoleList,
  #ledgerRules {
    max-height: none;
  }

  .health-row dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .baseline-north {
    grid-template-columns: 1fr;
  }

  .version-stack,
  .loop-stack,
  .next-stack {
    min-height: auto;
  }

  .lattice-grid article {
    min-height: auto;
  }

  .automation-list a {
    min-height: 48px;
  }
}

@media (max-width: 820px) {
  .app-shell,
  .app-shell .main,
  .app-shell .workspace,
  .queue-panel,
  .app-shell .detail,
  .store-list,
  .tabpage {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .app-shell .workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden;
  }

  .queue-panel,
  .app-shell .detail {
    grid-column: 1 / -1;
    overflow-x: hidden;
  }

  .app-shell .tabs {
    max-width: 100%;
  }
}

.hub-pane-hidden {
  display: none !important;
}

.main > section:not(.hub-pane-hidden),
.main > div:not(.hub-pane-hidden) {
  animation: modulePageIn .18s ease-out;
}

@keyframes modulePageIn {
  from {
    opacity: .72;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.command-cockpit {
  margin: 22px 0 18px;
  padding: 18px;
  color: #f5fffb;
  border: 1px solid rgba(119,240,208,.26);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(8,22,19,.96), rgba(13,37,31,.90) 48%, rgba(9,14,13,.96)),
    linear-gradient(90deg, rgba(119,240,208,.08) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, rgba(119,240,208,.045) 1px, transparent 1px) 0 0 / 28px 28px;
  box-shadow: 0 28px 70px rgba(5,18,15,.22);
}

.cockpit-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(440px, .85fr);
  gap: 18px;
  align-items: stretch;
}

.cockpit-hero h3 {
  margin-top: 4px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.12;
}

.cockpit-hero p:not(.eyebrow) {
  max-width: 820px;
  margin-top: 10px;
  color: rgba(239,255,250,.70);
  line-height: 1.6;
}

.cockpit-cycle {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-content: center;
  padding: 12px;
  border: 1px solid rgba(180,236,226,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.055);
}

.cockpit-cycle span {
  min-height: 52px;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(239,255,250,.72);
  border: 1px solid rgba(180,236,226,.14);
  border-radius: 6px;
  background: rgba(5,12,12,.35);
  font-size: 12px;
  font-weight: 850;
}

.cockpit-cycle span.active {
  color: #06100d;
  background: linear-gradient(135deg, #8cf6d7, #eec35d);
}

.cockpit-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.cockpit-kpis article,
.cockpit-panel {
  border: 1px solid rgba(180,236,226,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.cockpit-kpis article {
  min-height: 112px;
  padding: 14px;
}

.cockpit-kpis span,
.panel-headline span {
  color: rgba(143,244,228,.76);
  font-size: 12px;
  font-weight: 900;
}

.cockpit-kpis strong {
  display: block;
  margin: 9px 0 4px;
  color: #ffffff;
  font-size: 34px;
  line-height: 1;
}

.cockpit-kpis small {
  color: rgba(239,255,250,.58);
}

.cockpit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  gap: 10px;
  margin-top: 10px;
}

.cockpit-grid .primary-panel,
.cockpit-grid .cockpit-panel:nth-child(4) {
  min-height: 238px;
}

.cockpit-panel {
  min-height: 260px;
  padding: 14px;
  overflow: hidden;
}

.primary-panel {
  background:
    linear-gradient(135deg, rgba(119,240,208,.15), rgba(255,255,255,.055)),
    rgba(255,255,255,.07);
}

.panel-headline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-headline b {
  color: #ffffff;
}

.panel-headline button {
  min-height: 32px;
  padding: 0 12px;
  color: #06100d;
  border-radius: 6px;
  background: #8cf6d7;
  font-size: 12px;
  font-weight: 900;
}

.copy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.copy-actions button {
  white-space: nowrap;
}

.cockpit-panel h4 {
  margin: 0;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.35;
}

.cockpit-panel p {
  margin-top: 10px;
  color: rgba(239,255,250,.70);
  line-height: 1.56;
}

.cockpit-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.cockpit-evidence span {
  padding: 7px 9px;
  color: #06100d;
  border-radius: 6px;
  background: rgba(140,246,215,.92);
  font-size: 12px;
  font-weight: 900;
}

.cockpit-checklist {
  display: grid;
  gap: 8px;
  max-height: 430px;
  overflow: auto;
  padding-right: 4px;
}

.cockpit-task {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 54px;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(180,236,226,.14);
  border-radius: 8px;
  background: rgba(5,12,12,.34);
}

.cockpit-task.done {
  opacity: .58;
}

.cockpit-task b,
.cockpit-task span {
  display: grid;
  min-height: 28px;
  place-items: center;
  border-radius: 6px;
  color: #06100d;
  background: #eec35d;
  font-size: 11px;
  font-weight: 950;
}

.cockpit-task span {
  color: rgba(239,255,250,.72);
  background: rgba(255,255,255,.10);
}

.cockpit-task.done span {
  color: #06100d;
  background: #8cf6d7;
}

.cockpit-task strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.35;
}

.cockpit-task p {
  margin-top: 5px;
  color: rgba(239,255,250,.66);
  font-size: 12px;
  line-height: 1.45;
}

.cockpit-task small {
  display: block;
  margin-top: 6px;
  color: rgba(143,244,228,.66);
  font-size: 11px;
}

.cockpit-empty {
  padding: 14px;
  color: rgba(239,255,250,.66);
  border: 1px dashed rgba(180,236,226,.20);
  border-radius: 8px;
  background: rgba(5,12,12,.24);
  line-height: 1.55;
}

.cockpit-data-lanes {
  display: grid;
  gap: 8px;
}

.cockpit-data-lanes div {
  display: grid;
  grid-template-columns: 92px 78px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(180,236,226,.14);
  border-radius: 8px;
  background: rgba(5,12,12,.30);
}

.cockpit-data-lanes b {
  color: rgba(143,244,228,.78);
  font-size: 12px;
}

.cockpit-data-lanes strong {
  color: #ffffff;
  font-size: 16px;
}

.cockpit-data-lanes p {
  margin: 0;
  color: rgba(239,255,250,.62);
  font-size: 12px;
  line-height: 1.35;
}

.hub-mode-tabs {
  position: sticky;
  top: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px;
  border: 1px solid rgba(21,32,27,.10);
  border-radius: 8px;
  background: rgba(238,242,239,.86);
  backdrop-filter: blur(12px);
}

.hub-mode-tabs button {
  min-height: 42px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,.72);
  font-weight: 900;
}

.hub-mode-tabs button.active {
  color: #06100d;
  border-color: rgba(69,200,159,.42);
  background: linear-gradient(135deg, #8cf6d7, #f0c562);
}

.pk-rank-panel {
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid rgba(21, 32, 27, .10);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,246,243,.88)),
    radial-gradient(circle at 0 0, rgba(119,240,208,.16), transparent 34%);
  box-shadow: 0 18px 48px rgba(24, 36, 30, .10);
}

.pk-rank-hero {
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) minmax(220px, .9fr) repeat(2, minmax(140px, .55fr));
  gap: 12px;
  align-items: stretch;
}

.pk-rank-hero > div {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(21, 32, 27, .08);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
}

.pk-rank-hero h3 {
  margin: 4px 0 8px;
  font-size: 24px;
}

.pk-rank-hero p,
.pk-rank-hero small {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.pk-rank-self strong,
.pk-rank-kpi strong {
  display: block;
  margin: 5px 0;
  color: #07110e;
  font-size: 26px;
  line-height: 1.15;
}

.pk-rank-kpi span,
.pk-rank-self span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.pk-rank-body {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr .95fr;
  gap: 12px;
  margin-top: 12px;
}

.pk-rank-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(21, 32, 27, .08);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
}

.pk-rank-rows,
.pk-store-rows {
  display: grid;
  gap: 8px;
  max-height: 380px;
  overflow: auto;
  padding-right: 2px;
}

.pk-rank-row,
.pk-store-row {
  display: grid;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(21,32,27,.08);
  border-radius: 8px;
  background: rgba(248,251,249,.92);
}

.pk-rank-row {
  grid-template-columns: 34px 1fr 92px 70px minmax(92px, auto);
}

.pk-rank-row.self {
  border-color: rgba(20,108,67,.36);
  background: linear-gradient(135deg, rgba(119,240,208,.24), rgba(255,255,255,.88));
}

.pk-rank-row b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #07110e;
  border-radius: 50%;
  background: rgba(119,240,208,.24);
}

.pk-rank-row strong,
.pk-store-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pk-rank-row span,
.pk-store-row span,
.pk-rank-rules p {
  color: var(--muted);
  font-size: 12px;
}

.pk-rank-row em {
  color: var(--green);
  font-style: normal;
  font-weight: 900;
}

.pk-rank-row small,
.pk-store-row small {
  justify-self: end;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
}

.pk-rank-row small.good,
.pk-store-row small.good {
  color: #0f5c38;
  background: rgba(119,240,208,.20);
}

.pk-rank-row small.bad,
.pk-store-row small.bad {
  color: #9c2f20;
  background: rgba(189,61,42,.10);
}

.pk-store-row {
  grid-template-columns: minmax(0, 1fr) 72px 62px;
}

.pk-store-row div {
  min-width: 0;
}

.pk-store-row b {
  justify-self: end;
}

.pk-rank-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pk-rank-sources span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(21,32,27,.08);
  border-radius: 8px;
  background: rgba(248,251,249,.9);
}

.pk-rank-sources span.ready {
  border-color: rgba(20,108,67,.25);
}

.pk-rank-sources span.pending {
  border-color: rgba(189,123,22,.22);
}

.pk-rank-sources b,
.pk-rank-sources strong,
.pk-rank-sources small,
.pk-rank-rules span {
  display: block;
}

.pk-rank-sources strong {
  margin: 4px 0;
  font-size: 18px;
}

.pk-rank-sources small {
  color: var(--muted);
  font-size: 11px;
}

.pk-rank-rules > div:last-child {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.pk-rank-rules > div:last-child span {
  padding: 8px 9px;
  color: #33443d;
  border-radius: 8px;
  background: rgba(21,32,27,.04);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .cockpit-hero,
  .cockpit-grid,
  .pk-rank-hero,
  .pk-rank-body {
    grid-template-columns: 1fr;
  }

  .cockpit-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cockpit-cycle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .command-cockpit {
    margin: 14px 0;
    padding: 12px;
  }

  .cockpit-hero h3 {
    font-size: 25px;
  }

  .cockpit-kpis,
  .hub-mode-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pk-rank-panel {
    padding: 12px;
  }

  .pk-rank-sources {
    grid-template-columns: 1fr;
  }

  .pk-rank-row {
    grid-template-columns: 32px 1fr;
  }

  .pk-rank-row span,
  .pk-rank-row em,
  .pk-rank-row small {
    grid-column: 2;
    justify-self: start;
  }

  .pk-store-row {
    grid-template-columns: 1fr;
  }

  .pk-store-row b,
  .pk-store-row small {
    justify-self: start;
  }

  .cockpit-cycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cockpit-data-lanes div,
  .cockpit-task {
    grid-template-columns: 1fr;
  }
}

/* Unified system surface: keep every left-menu page visually consistent. */
.app-shell .main {
  position: relative;
  min-height: 100vh;
  padding: 18px 22px 32px;
  background:
    linear-gradient(90deg, rgba(119,240,208,.04) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, rgba(119,240,208,.035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, rgba(242,247,244,.96), rgba(232,239,235,.98));
}

.app-shell .topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  margin: -18px -22px 16px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid rgba(21,32,27,.08);
  background: rgba(242,247,244,.92);
  backdrop-filter: blur(18px);
}

.app-shell .hub-mode-tabs {
  margin: 0 0 14px;
}

.app-shell .hub-pane-hidden {
  display: none !important;
}

.app-shell main > section:not(.hub-pane-hidden),
.app-shell main > div:not(.hub-pane-hidden) {
  animation: modulePageIn .18s ease both;
}

.app-shell .command-cockpit,
.app-shell .pk-rank-panel,
.app-shell .workspace,
.app-shell .data-center,
.app-shell .business-collection,
.app-shell .business-health,
.app-shell .business-gap,
.app-shell .connector-center,
.app-shell .system-map,
.app-shell .operation-task-center,
.app-shell .role-actions,
.app-shell .dispatch-queue,
.app-shell .action-writeback,
.app-shell .recovery-ledger,
.app-shell .sla-panel,
.app-shell .feishu-sla,
.app-shell .message-preview,
.app-shell .send-queue,
.app-shell .send-rehearsal,
.app-shell .dianjin-panel,
.app-shell .meituan-fetch,
.app-shell .meituan-writeback,
.app-shell .feishu-delivery,
.app-shell .recipient-binding,
.app-shell .automation-scheduler,
.app-shell .automation-runner,
.app-shell .iteration-baseline,
.app-shell .mission-lattice,
.app-shell .command-deck,
.app-shell .future-workbench,
.app-shell .version-roadmap {
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
}

.app-shell section,
.app-shell .panel,
.app-shell article,
.app-shell .detail,
.app-shell .metric,
.app-shell .store-card,
.app-shell .recent-card,
.app-shell .playbook,
.app-shell .cockpit-summary,
.app-shell .cockpit-radar,
.app-shell .cockpit-ops,
.app-shell .cockpit-timeline,
.app-shell .pk-rank-card,
.app-shell .pk-rank-rules {
  border-radius: 8px;
}

.app-shell article,
.app-shell .panel,
.app-shell .detail,
.app-shell .metric,
.app-shell .store-card,
.app-shell .cockpit-summary,
.app-shell .cockpit-radar,
.app-shell .cockpit-ops,
.app-shell .cockpit-timeline,
.app-shell .pk-rank-card,
.app-shell .pk-rank-rules,
.app-shell .meituan-fetch-score,
.app-shell .meituan-sync-score,
.app-shell .meituan-writeback-score {
  border: 1px solid rgba(21,32,27,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,249,.92));
  box-shadow: 0 16px 38px rgba(21,32,27,.07);
}

.app-shell section > header,
.app-shell article > header,
.app-shell .meituan-fetch-head,
.app-shell .meituan-writeback-head,
.app-shell .pk-rank-head {
  min-height: 44px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(21,32,27,.07);
}

.app-shell section h3,
.app-shell article h3,
.app-shell .panel h3 {
  color: #12231d;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0;
}

.app-shell section p,
.app-shell article p,
.app-shell .panel p {
  color: #5f6d66;
  line-height: 1.55;
}

.app-shell button {
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

.app-shell button:hover {
  transform: translateY(-1px);
}

.app-shell button:disabled {
  cursor: default;
  opacity: .52;
  transform: none;
}

.app-shell .store-list,
.app-shell .pk-rank-rows,
.app-shell .pk-store-rows,
.app-shell [id$="List"],
.app-shell [id$="Rows"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(20,108,67,.34) rgba(21,32,27,.05);
}

.app-shell .store-list::-webkit-scrollbar,
.app-shell .pk-rank-rows::-webkit-scrollbar,
.app-shell .pk-store-rows::-webkit-scrollbar,
.app-shell [id$="List"]::-webkit-scrollbar,
.app-shell [id$="Rows"]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.app-shell .store-list::-webkit-scrollbar-thumb,
.app-shell .pk-rank-rows::-webkit-scrollbar-thumb,
.app-shell .pk-store-rows::-webkit-scrollbar-thumb,
.app-shell [id$="List"]::-webkit-scrollbar-thumb,
.app-shell [id$="Rows"]::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(20,108,67,.28);
}

@media (max-width: 820px) {
  .app-shell .main {
    padding: 12px 12px 24px;
  }

  .app-shell .topbar {
    margin: -12px -12px 12px;
    padding: 12px;
  }
}

/* V73 final overrides: placed at EOF to defeat older iterative styles. */
body:has(.app-shell:not(.hidden)) {
  overflow: hidden !important;
  background: #06100f !important;
}

.login-screen {
  grid-template-columns: minmax(520px, 1fr) minmax(340px, 420px) !important;
  padding: 34px 48px !important;
  background: linear-gradient(135deg, #030706, #0b1716 54%, #050908) !important;
}

.login-bg {
  inset: 22px !important;
  border: 1px solid rgba(184, 244, 231, .18) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, rgba(3, 7, 6, .56), rgba(3, 7, 6, .10) 48%, rgba(3, 7, 6, .66)),
    linear-gradient(180deg, rgba(3, 7, 6, .08), rgba(3, 7, 6, .46)),
    url("/static/login-mountain.jpg") center / contain no-repeat,
    #081211 !important;
  filter: saturate(.9) hue-rotate(130deg) brightness(.88) contrast(1.04) !important;
  transform: none !important;
}

.login-command-board {
  position: relative;
  z-index: 2;
  align-self: end;
  display: grid;
  gap: 10px;
  max-width: 520px;
  margin: 0 0 54px;
}

.login-command-board > div {
  padding: 14px 16px;
  border: 1px solid rgba(164, 245, 226, .22);
  border-radius: 8px;
  color: #f4fffb;
  background: linear-gradient(110deg, rgba(10, 28, 27, .78), rgba(6, 17, 16, .52));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
}

.login-command-board span,
.login-command-board small {
  display: block;
  color: rgba(218, 246, 238, .72);
  font-size: 12px;
}

.login-command-board strong {
  display: block;
  margin: 3px 0 8px;
  color: #fff;
  font-size: 17px;
}

.login-command-board i {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(218, 246, 238, .12);
}

.login-command-board b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #66f3d0, #f0c85a);
}

.login-copy h1 {
  font-size: clamp(44px, 6vw, 82px) !important;
}

.app-shell.shell {
  height: 100vh !important;
  display: grid !important;
  grid-template-columns: 314px minmax(0, 1fr) !important;
  overflow: hidden !important;
  color: #f4fffb !important;
  background:
    radial-gradient(circle at 18% 0, rgba(102, 243, 208, .16), transparent 28%),
    radial-gradient(circle at 82% 10%, rgba(111, 184, 255, .15), transparent 32%),
    linear-gradient(135deg, #06100f, #091615 50%, #040807) !important;
}

.app-shell .side {
  height: 100vh !important;
  overflow-y: auto !important;
  border-right: 1px solid rgba(137, 238, 214, .18) !important;
  background: linear-gradient(180deg, rgba(6, 18, 17, .96), rgba(4, 10, 10, .96)) !important;
}

.app-shell .main {
  height: 100vh !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 18px 22px 24px !important;
  color: #f4fffb !important;
  background:
    linear-gradient(90deg, rgba(102, 243, 208, .04) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(180deg, rgba(102, 243, 208, .035) 1px, transparent 1px) 0 0 / 30px 30px,
    transparent !important;
}

.app-shell .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  min-height: 72px !important;
  margin: -18px -22px 16px !important;
  padding: 12px 22px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  border-bottom: 1px solid rgba(137, 238, 214, .18) !important;
  background: rgba(5, 14, 14, .88) !important;
  backdrop-filter: blur(20px) !important;
}

.app-shell .topbar .eyebrow,
.app-shell .topline,
.app-shell .status,
.app-shell .top-actions .top-link,
.app-shell .hub-mode-tabs {
  display: none !important;
}

.app-shell .topbar h2,
.app-shell section h3,
.app-shell section h4,
.app-shell article h3,
.app-shell article h4,
.app-shell .detail h3,
.app-shell .detail h4,
.app-shell strong {
  color: #fff !important;
}

.app-shell section p,
.app-shell article p,
.app-shell .panel p,
.app-shell small,
.app-shell span,
.app-shell label {
  color: rgba(218, 246, 238, .72) !important;
}

.app-shell .eyebrow {
  color: #66f3d0 !important;
}

.app-shell section,
.app-shell article,
.app-shell .panel,
.app-shell .detail,
.app-shell .metric,
.app-shell .store-card,
.app-shell .recent-card,
.app-shell .playbook,
.app-shell .pk-rank-card,
.app-shell .cockpit-panel,
.app-shell .side .panel,
.side-brief,
.side-kpis div {
  color: #f4fffb !important;
  border: 1px solid rgba(164, 245, 226, .16) !important;
  background: linear-gradient(180deg, rgba(14, 39, 37, .88), rgba(7, 21, 20, .86)) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22) !important;
}

.system-rail button,
.system-rail a,
.side-function-map button,
.app-shell .ghost,
.app-shell .secondary,
.app-shell button {
  color: #f4fffb !important;
  border-color: rgba(164, 245, 226, .20) !important;
  background: rgba(9, 29, 28, .74) !important;
}

.system-rail button.active,
.side-function-map button.active,
.app-shell .primary,
.app-shell button.primary {
  color: #04100e !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #66f3d0, #d9fff1) !important;
}

.system-rail button.active *,
.side-function-map button.active * {
  color: #04100e !important;
}

.session-strip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.session-strip span {
  min-width: 0 !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(164, 245, 226, .18) !important;
  border-radius: 8px !important;
  background: rgba(11, 31, 30, .72) !important;
}

.session-strip small {
  display: none !important;
}

.session-strip strong {
  color: #f4fffb !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.app-shell .hub-pane-hidden {
  display: none !important;
}

.app-shell main > section:not(.hub-pane-hidden),
.app-shell main > div:not(.hub-pane-hidden) {
  width: 100% !important;
  max-width: 1560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.app-shell .workspace {
  height: calc(100vh - 112px) !important;
  min-height: 580px !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 0 !important;
}

.queue-panel,
.detail {
  min-height: 0 !important;
  overflow: hidden !important;
}

.queue-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.queue-panel .store-list {
  max-height: none !important;
  height: 100% !important;
  overflow-y: auto !important;
}

.app-shell .detail {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

.app-shell .detail-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.app-shell .tabs {
  overflow-x: auto !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(164, 245, 226, .12) !important;
}

.app-shell .tabs button.active {
  color: #04100e !important;
  background: linear-gradient(135deg, #66f3d0, #d8fff2) !important;
}

.tabpage.active {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 14px 2px 6px !important;
}

.app-shell .store-card {
  width: 100% !important;
  text-align: left !important;
  background: rgba(8, 24, 23, .68) !important;
}

.app-shell .store-card.active {
  border-color: rgba(102, 243, 208, .80) !important;
  background: linear-gradient(135deg, rgba(102, 243, 208, .20), rgba(8, 24, 23, .90)) !important;
}

.app-shell input,
.app-shell select,
.app-shell textarea,
.pill,
.detail-badges span {
  color: #f4fffb !important;
  border-color: rgba(164, 245, 226, .18) !important;
  background: rgba(5, 16, 15, .76) !important;
}

.metric strong,
.cockpit-kpis strong,
.pk-rank-self strong,
.pk-rank-kpi strong {
  color: #66f3d0 !important;
}

@media (max-width: 920px) {
  body:has(.app-shell:not(.hidden)) {
    overflow: auto !important;
  }

  .login-screen {
    min-height: 100svh !important;
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }

  .login-bg {
    inset: 10px !important;
    background-size: cover !important;
  }

  .login-command-board {
    margin: 10px 0 0 !important;
  }

  .app-shell.shell {
    height: auto !important;
    min-height: 100vh !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }

  .app-shell .side {
    height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(137, 238, 214, .18) !important;
  }

  .app-shell .main {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    padding: 14px !important;
  }

  .app-shell .topbar {
    margin: -14px -14px 12px !important;
    grid-template-columns: 1fr !important;
  }

  .app-shell .workspace {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }

  .queue-panel .store-list {
    max-height: 360px !important;
  }

  .app-shell .detail {
    min-height: 620px !important;
  }
}

/* V74 EOF hard overrides: final authority for the Sinan command layout. */
body:has(.app-shell:not(.hidden)) { overflow: hidden !important; background: #06100f !important; }
.login-screen:not(.hidden) { display: grid !important; grid-template-columns: minmax(0, 1fr) 390px !important; min-height: 100vh !important; padding: 30px 38px !important; color: #f3fffa !important; background: linear-gradient(90deg, rgba(142,244,216,.045) 1px, transparent 1px) 0 0 / 36px 36px, linear-gradient(180deg, rgba(142,244,216,.04) 1px, transparent 1px) 0 0 / 36px 36px, #06100f !important; }
.login-bg { inset: 18px !important; border: 1px solid rgba(137,238,214,.20) !important; border-radius: 8px !important; background: linear-gradient(90deg, rgba(5,13,12,.70), rgba(5,13,12,.22) 52%, rgba(5,13,12,.76)), linear-gradient(180deg, rgba(5,13,12,.18), rgba(5,13,12,.56)), url("/static/login-mountain.jpg") center / contain no-repeat, #07110f !important; filter: saturate(.86) hue-rotate(130deg) brightness(.82) contrast(1.08) !important; transform: none !important; }
.login-copy h1 { color: #fff !important; font-size: clamp(46px, 7vw, 88px) !important; line-height: .95 !important; }
.login-copy p, .login-card .eyebrow, .login-card label { color: #8ef4d8 !important; }
.login-command-board { position: absolute !important; left: 60px !important; right: 460px !important; bottom: 34px !important; z-index: 2 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; max-width: none !important; margin: 0 !important; }
.login-command-board > div, .login-card { border: 1px solid rgba(137,238,214,.20) !important; border-radius: 8px !important; color: #f3fffa !important; background: linear-gradient(180deg, rgba(20,45,41,.80), rgba(9,23,21,.78)) !important; box-shadow: 0 22px 72px rgba(0,0,0,.36) !important; backdrop-filter: blur(18px) !important; }
.login-command-board span, .login-command-board small, .app-shell p, .app-shell small, .app-shell span, .app-shell label { color: rgba(218,246,238,.66) !important; }
.login-command-board strong, .login-card h2, .app-shell h1, .app-shell h2, .app-shell h3, .app-shell h4, .app-shell strong { color: #fff !important; }
.app-shell:not(.hidden) { height: 100vh !important; display: grid !important; grid-template-columns: 286px minmax(0, 1fr) !important; overflow: hidden !important; color: #f3fffa !important; background: linear-gradient(90deg, rgba(142,244,216,.035) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(180deg, rgba(142,244,216,.032) 1px, transparent 1px) 0 0 / 34px 34px, #06100f !important; }
.app-shell .side { height: 100vh !important; overflow-y: auto !important; padding: 16px 14px !important; border-right: 1px solid rgba(137,238,214,.20) !important; background: linear-gradient(180deg, rgba(7,18,16,.96), rgba(5,12,11,.98)) !important; }
.app-shell .main { height: 100vh !important; min-height: 0 !important; overflow-y: auto !important; padding: 20px 24px 28px !important; color: #f3fffa !important; background: transparent !important; }
.app-shell .topbar { position: sticky !important; top: 0 !important; z-index: 10 !important; min-height: 70px !important; margin: -20px -24px 18px !important; padding: 14px 24px 12px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 16px !important; align-items: center !important; border-bottom: 1px solid rgba(137,238,214,.20) !important; background: rgba(6,16,15,.88) !important; backdrop-filter: blur(20px) !important; }
.topbar .eyebrow { display: block !important; color: #8ef4d8 !important; }
.topbar h2 { color: #fff !important; font-size: 28px !important; line-height: 1.1 !important; }
.topline { display: block !important; color: rgba(218,246,238,.66) !important; }
.session-strip, .hub-mode-tabs { display: none !important; }
.top-actions .status { display: flex !important; gap: 8px !important; }
.top-actions .status span { padding: 8px 11px !important; border: 1px solid rgba(142,244,216,.14) !important; border-radius: 999px !important; color: rgba(218,246,238,.66) !important; background: rgba(13,30,27,.72) !important; }
.hub-pane-hidden { display: none !important; }
.app-shell main > section:not(.hub-pane-hidden), .app-shell main > div:not(.hub-pane-hidden) { max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; }
.app-shell section, .app-shell article, .app-shell .panel, .app-shell .detail, .app-shell .metric, .app-shell .store-card, .app-shell .recent-card, .app-shell .playbook, .app-shell .pk-rank-card, .app-shell .cockpit-panel, .side-brief, .side .panel, .side-kpis div { color: #f3fffa !important; border: 1px solid rgba(142,244,216,.16) !important; border-radius: 8px !important; background: linear-gradient(180deg, rgba(18,41,37,.80), rgba(8,22,20,.78)) !important; box-shadow: 0 18px 54px rgba(0,0,0,.22) !important; }
.system-rail button, .system-rail a, .side-function-map button, .app-shell button, .app-shell .ghost, .app-shell .secondary { color: #f3fffa !important; border-color: rgba(142,244,216,.20) !important; background: rgba(12,29,26,.76) !important; }
.system-rail button.active, .side-function-map button.active, .app-shell .primary, .login-submit { color: #05120f !important; border-color: transparent !important; background: linear-gradient(135deg, #8ef4d8, #d7fff1) !important; }
.app-shell .workspace { height: calc(100vh - 118px) !important; min-height: 590px !important; display: grid !important; grid-template-columns: 350px minmax(0, 1fr) !important; gap: 14px !important; overflow: hidden !important; }
.queue-panel, .detail { min-height: 0 !important; overflow: hidden !important; }
.queue-panel { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; }
.store-list { height: 100% !important; max-height: none !important; overflow-y: auto !important; padding-right: 4px !important; }
.detail { display: grid !important; grid-template-rows: auto auto minmax(0, 1fr) !important; }
.detail-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; align-items: center !important; gap: 10px !important; }
.tabs { overflow-x: auto !important; padding: 10px 0 !important; border-bottom: 1px solid rgba(142,244,216,.12) !important; }
.tabs button.active { color: #05120f !important; background: linear-gradient(135deg, #8ef4d8, #d7fff1) !important; }
.tabpage.active { min-height: 0 !important; overflow-y: auto !important; padding: 14px 2px 4px !important; }
.store-card.active { border-color: rgba(142,244,216,.82) !important; background: linear-gradient(135deg, rgba(142,244,216,.18), rgba(13,30,27,.88)) !important; }
.app-shell input, .app-shell select, .app-shell textarea, .pill, .detail-badges span { color: #f3fffa !important; border-color: rgba(142,244,216,.18) !important; background: rgba(5,15,14,.80) !important; }
.cockpit-kpis strong, .metric strong, .pk-rank-self strong, .pk-rank-kpi strong { color: #8ef4d8 !important; }
@media (max-width: 920px) { body:has(.app-shell:not(.hidden)) { overflow: auto !important; } .login-screen:not(.hidden) { grid-template-columns: 1fr !important; padding: 18px !important; } .login-bg { inset: 10px !important; background-size: cover !important; } .login-command-board { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; grid-template-columns: 1fr !important; margin: 8px 0 !important; } .app-shell:not(.hidden) { height: auto !important; min-height: 100vh !important; grid-template-columns: 1fr !important; overflow: visible !important; } .app-shell .side, .app-shell .main { height: auto !important; overflow: visible !important; } .app-shell .topbar { grid-template-columns: 1fr !important; margin: -14px -14px 12px !important; padding: 12px 14px !important; } .app-shell .workspace { height: auto !important; grid-template-columns: 1fr !important; } .store-list { max-height: 360px !important; } }

/* V75: keep the product name as 六米云枢; remove login progress bars; redesign top-right session controls. */
.login-command-board {
  display: none !important;
}

.login-screen:not(.hidden) {
  grid-template-columns: minmax(0, 1fr) 390px !important;
}

.login-copy p {
  color: #8ef4d8 !important;
}

.login-copy h1,
.login-card h2 {
  color: #fff !important;
}

.app-shell .topbar {
  grid-template-columns: minmax(420px, 1fr) minmax(520px, auto) !important;
}

.top-actions {
  display: grid !important;
  grid-template-columns: auto auto;
  align-items: center !important;
  gap: 10px !important;
  justify-content: end !important;
}

.top-actions .status {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.top-actions .status span {
  min-height: 34px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(142,244,216,.16) !important;
  border-radius: 999px !important;
  color: rgba(238,255,250,.82) !important;
  background: rgba(9,24,22,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  white-space: nowrap !important;
}

.top-actions .status span:nth-child(2) {
  display: none !important;
}

.action-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.action-buttons .top-link {
  display: none !important;
}

.action-buttons #shareBtn,
.action-buttons #topReloadBtn {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.session-strip {
  grid-column: 1 / -1;
  justify-self: end;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-top: 6px !important;
  padding: 5px !important;
  border: 1px solid rgba(142,244,216,.16) !important;
  border-radius: 999px !important;
  background: rgba(6,18,17,.72) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.22) !important;
}

.session-strip span {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
}

.session-strip small {
  display: none !important;
}

.session-strip strong {
  max-width: 170px !important;
  overflow: hidden !important;
  color: rgba(238,255,250,.88) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.session-strip span:first-child::before {
  content: "账号";
  color: rgba(142,244,216,.82);
  font-size: 11px;
}

.session-strip span:nth-child(2)::before {
  content: "权限";
  color: rgba(142,244,216,.82);
  font-size: 11px;
}

.session-strip button {
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: #06100f !important;
  background: linear-gradient(135deg, #8ef4d8, #d7fff1) !important;
}

@media (max-width: 920px) {
  .app-shell .topbar {
    grid-template-columns: 1fr !important;
  }

  .top-actions {
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
  }

  .top-actions .status,
  .action-buttons,
  .session-strip {
    justify-self: stretch !important;
    width: 100% !important;
  }

  .session-strip {
    border-radius: 8px !important;
  }
}

/* V76: keep the left command rail metrics contained and visually balanced. */
.app-shell .side {
  overflow-x: hidden !important;
}

.app-shell .side-kpis {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  align-items: stretch !important;
}

.app-shell .side-kpis div {
  min-width: 0 !important;
  min-height: 68px !important;
  padding: 10px 7px 9px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.app-shell .side-kpis strong {
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: clamp(20px, 7.1vw, 25px) !important;
  line-height: .95 !important;
  letter-spacing: 0 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.app-shell .side-kpis span {
  max-width: 100% !important;
  margin-top: 7px !important;
  overflow: hidden !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (min-width: 921px) {
  .app-shell .side-kpis strong {
    font-size: 25px !important;
  }
}

@media (max-width: 760px) {
  .app-shell .side-kpis {
    gap: 8px !important;
  }

  .app-shell .side-kpis strong {
    font-size: 23px !important;
  }
}

/* V77: login hero and embedded international-card command page. */
.login-screen:not(.hidden) {
  grid-template-columns: minmax(0, 1fr) 380px !important;
  padding: 0 !important;
  background: #06100f !important;
}

.login-bg {
  inset: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, rgba(4,10,9,.72), rgba(4,10,9,.34) 46%, rgba(4,10,9,.78)),
    linear-gradient(180deg, rgba(4,10,9,.10), rgba(4,10,9,.58)),
    url("/static/login-mountain.jpg") center / cover no-repeat !important;
  filter: saturate(.90) hue-rotate(130deg) brightness(.76) contrast(1.06) !important;
}

.login-copy {
  align-self: end !important;
  padding: 0 0 72px 80px !important;
  max-width: 560px !important;
}

.login-copy h1 {
  font-size: clamp(38px, 4.8vw, 64px) !important;
  line-height: 1 !important;
}

.login-copy span {
  font-size: 14px !important;
}

.login-card {
  align-self: center !important;
  margin-right: 64px !important;
}

.international-admin-panel {
  display: grid;
  gap: 14px;
}

.international-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 14px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid rgba(142,244,216,.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(18,41,37,.88), rgba(8,22,20,.82)),
    radial-gradient(circle at 82% 18%, rgba(142,244,216,.20), transparent 34%);
}

.international-hero h3 {
  margin: 4px 0 8px;
  font-size: 28px;
}

.international-score {
  display: grid;
  place-items: center;
  min-height: 130px;
  border: 1px solid rgba(142,244,216,.20);
  border-radius: 8px;
  background: rgba(6,18,17,.62);
}

.international-score strong {
  color: #8ef4d8 !important;
  font-size: 48px;
  line-height: 1;
}

.international-kpis,
.international-issue-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.international-kpis article,
.intl-issue-card,
.international-actions,
.international-message,
.international-workbench {
  border: 1px solid rgba(142,244,216,.16) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(18,41,37,.80), rgba(8,22,20,.78)) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.22) !important;
}

.international-kpis article {
  padding: 14px;
}

.international-kpis strong {
  display: block;
  margin: 8px 0 5px;
  color: #8ef4d8 !important;
  font-size: 30px;
}

.international-kpis .issue strong,
.intl-issue-card.danger strong,
.intl-store-row.missing i {
  color: #f0bf5b !important;
}

.intl-issue-card {
  min-height: 102px;
  padding: 13px;
  text-align: left;
}

.intl-issue-card b,
.intl-issue-card strong,
.intl-issue-card span {
  display: block;
}

.intl-issue-card strong {
  margin: 8px 0 5px;
  font-size: 28px;
}

.intl-issue-card.active {
  border-color: rgba(142,244,216,.70) !important;
  background:
    linear-gradient(135deg, rgba(142,244,216,.22), rgba(8,22,20,.84)) !important;
}

.international-command {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 12px;
}

.international-actions,
.international-message,
.international-workbench {
  padding: 16px;
}

.international-actions ol {
  margin: 12px 0 0;
  padding-left: 20px;
  color: rgba(238,255,250,.82);
  line-height: 1.7;
}

.international-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.international-split {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 12px;
  min-height: 430px;
}

.intl-store-list,
.intl-detail-list {
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(142,244,216,.14);
  border-radius: 8px;
  background: rgba(5,15,14,.48);
}

.intl-store-row {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 0 !important;
  border-bottom: 1px solid rgba(142,244,216,.10) !important;
  border-radius: 0 !important;
  text-align: left;
  background: transparent !important;
}

.intl-store-row.active {
  background: rgba(142,244,216,.13) !important;
}

.intl-store-row span,
.intl-store-row strong,
.intl-store-row small,
.intl-store-row em {
  min-width: 0;
}

.intl-store-row small,
.intl-store-row em {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intl-store-row i {
  padding: 5px 8px;
  border-radius: 999px;
  color: #8ef4d8;
  font-size: 12px;
  font-style: normal;
  background: rgba(142,244,216,.10);
}

.intl-detail-list header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(142,244,216,.12);
  background: rgba(6,18,17,.92);
}

.intl-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 116px 82px 88px minmax(120px, .8fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid rgba(142,244,216,.10);
}

.intl-detail-row b {
  color: #8ef4d8 !important;
}

.intl-detail-row.offsale b,
.intl-detail-row.stock0 b {
  color: #f0bf5b !important;
}

.intl-detail-row strong,
.intl-detail-row small,
.intl-detail-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intl-empty {
  padding: 18px;
  color: rgba(238,255,250,.66);
}

@media (max-width: 920px) {
  .login-screen:not(.hidden) {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  .login-copy {
    padding: 52px 4px 0 !important;
  }

  .login-copy h1 {
    font-size: 42px !important;
  }

  .login-card {
    align-self: start !important;
    margin: 18px 0 0 !important;
  }

  .international-hero,
  .international-command,
  .international-tools,
  .international-split {
    grid-template-columns: 1fr;
  }

  .international-kpis,
  .international-issue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intl-detail-row {
    grid-template-columns: 1fr;
  }
}

/* V78: final compact command header, fixes the oversized red-box top area. */
.app-shell .topbar {
  min-height: 74px !important;
  height: 74px !important;
  margin: -20px -24px 12px !important;
  padding: 10px 24px !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) minmax(520px, auto) !important;
  align-items: center !important;
  gap: 18px !important;
  border-bottom: 1px solid rgba(142,244,216,.16) !important;
  background:
    linear-gradient(90deg, rgba(5,14,13,.94), rgba(5,14,13,.84)),
    linear-gradient(90deg, rgba(142,244,216,.035) 1px, transparent 1px) 0 0 / 34px 34px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(18px) !important;
}

.app-shell .title-block {
  min-width: 0 !important;
}

.app-shell .title-block .eyebrow,
.app-shell .title-block .topline {
  display: none !important;
}

.app-shell .topbar h2 {
  margin: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: clamp(22px, 1.7vw, 30px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.top-actions .status {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.top-actions .status span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  max-width: 136px !important;
  padding: 0 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(142,244,216,.18) !important;
  border-radius: 999px !important;
  color: rgba(238,255,250,.78) !important;
  background: rgba(7,22,20,.72) !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.top-actions .status span:nth-child(2) {
  display: none !important;
}

.action-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.action-buttons .top-link,
.action-buttons .admin-only {
  display: none !important;
}

.action-buttons #shareBtn,
.action-buttons #topReloadBtn {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.session-strip {
  display: inline-flex !important;
  grid-column: auto !important;
  align-items: center !important;
  justify-self: auto !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 320px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 3px 4px 3px 10px !important;
  border: 1px solid rgba(142,244,216,.18) !important;
  border-radius: 999px !important;
  background: rgba(7,22,20,.78) !important;
  box-shadow: none !important;
}

.session-strip span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.session-strip span:first-child::before,
.session-strip span:nth-child(2)::before {
  color: rgba(142,244,216,.84) !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.session-strip small {
  display: none !important;
}

.session-strip strong {
  max-width: 92px !important;
  overflow: hidden !important;
  color: rgba(238,255,250,.88) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.session-strip span:nth-child(2) strong {
  max-width: 112px !important;
}

.session-strip button {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: #05120f !important;
  background: linear-gradient(135deg, #8ef4d8, #d7fff1) !important;
}

@media (max-width: 1180px) {
  .app-shell .topbar {
    height: auto !important;
    min-height: 74px !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .top-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

/* V79: align the compact header to the same 1440px grid as the cockpit cards. */
.app-shell .topbar {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 20px auto 12px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1180px) {
  .app-shell .topbar {
    max-width: none !important;
    margin: 0 0 12px !important;
  }
}

/* V80: merge the left logo header and right command bar into one locked top layer. */
.app-shell:not(.hidden) {
  grid-template-columns: 286px minmax(0, 1fr) !important;
  grid-template-rows: 112px minmax(0, 1fr) !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.global-command-header {
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 80;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  height: 112px;
  border-bottom: 1px solid rgba(142,244,216,.18);
  background:
    linear-gradient(90deg, rgba(5,14,13,.98), rgba(5,14,13,.90)),
    linear-gradient(90deg, rgba(142,244,216,.045) 1px, transparent 1px) 0 0 / 34px 34px;
  box-shadow: 0 18px 54px rgba(0,0,0,.28);
}

.global-command-header .brand {
  height: 112px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  border-right: 1px solid rgba(142,244,216,.14) !important;
  border-bottom: 0 !important;
}

.global-command-header .brand .mark {
  width: 68px !important;
  height: 56px !important;
}

.global-command-header .brand h1 {
  margin: 0 0 4px !important;
  color: #fff !important;
  font-size: 24px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.global-command-header .brand p {
  margin: 0 !important;
  color: rgba(218,246,238,.68) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.global-command-header .topbar {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 112px !important;
  min-height: 112px !important;
  margin: 0 !important;
  padding: 0 28px !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 1fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.global-command-header .topbar h2 {
  font-size: clamp(26px, 2vw, 36px) !important;
}

.global-command-header .top-actions {
  flex-wrap: nowrap !important;
}

.app-shell .side {
  grid-column: 1;
  grid-row: 2;
  height: calc(100vh - 112px) !important;
  min-height: 0 !important;
  padding: 18px 14px 20px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.app-shell .main {
  grid-column: 2;
  grid-row: 2;
  height: calc(100vh - 112px) !important;
  min-height: 0 !important;
  padding: 18px 24px 28px !important;
  overflow-y: auto !important;
}

.app-shell .command-cockpit,
.app-shell .pk-rank-panel,
.app-shell .workspace,
.app-shell .data-center,
.app-shell .business-collection,
.app-shell .business-health,
.app-shell .business-gap,
.app-shell .connector-center,
.app-shell .international-admin-panel {
  max-width: 1560px !important;
}

@media (max-width: 1180px) {
  .app-shell:not(.hidden) {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .global-command-header {
    position: sticky;
    top: 0;
    grid-template-columns: 1fr;
    height: auto;
  }

  .global-command-header .brand {
    height: 82px !important;
  }

  .global-command-header .topbar {
    height: auto !important;
    min-height: 82px !important;
    grid-template-columns: 1fr !important;
    padding: 12px 16px !important;
  }

  .global-command-header .top-actions {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .app-shell .side,
  .app-shell .main {
    height: auto !important;
    overflow: visible !important;
  }
}

/* V81: keep the global header brand column exactly aligned with the left rail. */
.app-shell:not(.hidden) {
  grid-template-columns: 320px minmax(0, 1fr) !important;
}

.global-command-header {
  grid-template-columns: 320px minmax(0, 1fr) !important;
}

.global-command-header .brand,
.app-shell .side {
  width: 320px !important;
  box-sizing: border-box !important;
}

.app-shell .main {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* V87: left rail is the only primary router; right side behaves like one module canvas. */
.app-shell .hub-mode-tabs {
  display: none !important;
}

@media (max-width: 1180px) {
  .global-command-header,
  .app-shell:not(.hidden) {
    grid-template-columns: 1fr !important;
  }

  .global-command-header .brand,
  .app-shell .side {
    width: 100% !important;
  }
}

/* V88: cockpit layout QA pass. Module pages must feel like panels, not a long document. */
body[data-hub-mode="command"] .app-shell .main {
  display: block !important;
  gap: 12px !important;
  height: auto !important;
  min-height: calc(100vh - 112px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px 24px 32px !important;
}

body[data-hub-mode="command"] .command-cockpit,
body[data-hub-mode="command"] .pk-rank-panel {
  width: 100% !important;
  max-width: 1560px !important;
  min-height: auto !important;
  margin: 0 auto 12px !important;
  overflow: visible !important;
}

body[data-hub-mode="command"] .command-cockpit {
  padding: 14px !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: 10px !important;
}

body[data-hub-mode="command"] .cockpit-hero {
  grid-template-columns: minmax(0, 1fr) minmax(420px, .72fr) !important;
  gap: 12px !important;
}

body[data-hub-mode="command"] .cockpit-hero h3 {
  font-size: clamp(22px, 1.6vw, 30px) !important;
}

body[data-hub-mode="command"] .cockpit-hero p:not(.eyebrow) {
  margin-top: 6px !important;
  line-height: 1.45 !important;
}

body[data-hub-mode="command"] .cockpit-cycle {
  min-height: 0 !important;
  padding: 10px !important;
  align-content: center !important;
}

body[data-hub-mode="command"] .cockpit-cycle span {
  min-height: 42px !important;
  padding: 0 10px !important;
}

body[data-hub-mode="command"] .cockpit-kpis {
  margin-top: 0 !important;
}

body[data-hub-mode="command"] .cockpit-kpis article {
  min-height: 82px !important;
  padding: 12px !important;
}

body[data-hub-mode="command"] .cockpit-kpis strong {
  margin: 6px 0 2px !important;
  font-size: clamp(24px, 2vw, 32px) !important;
}

body[data-hub-mode="command"] .cockpit-grid {
  min-height: 0 !important;
  margin-top: 0 !important;
}

body[data-hub-mode="command"] .cockpit-panel {
  min-height: 0 !important;
  padding: 12px !important;
}

body[data-hub-mode="command"] .pk-rank-panel {
  padding: 12px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  min-height: 620px !important;
  color: #f3fffa !important;
  border-color: rgba(142,244,216,.22) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(142,244,216,.14), transparent 28%),
    linear-gradient(145deg, rgba(7,22,20,.98), rgba(3,12,11,.96)) !important;
}

body[data-hub-mode="command"] .pk-rank-hero {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-height: 0 !important;
}

body[data-hub-mode="command"] .pk-rank-hero > div,
body[data-hub-mode="command"] .pk-rank-card {
  color: #f3fffa !important;
  border: 1px solid rgba(142,244,216,.18) !important;
  background: linear-gradient(180deg, rgba(18,45,41,.90), rgba(8,25,23,.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 40px rgba(0,0,0,.20) !important;
}

body[data-hub-mode="command"] .pk-rank-hero > div {
  min-height: 88px !important;
  padding: 12px 14px !important;
  overflow: hidden !important;
}

body[data-hub-mode="command"] .pk-date-filter {
  display: grid !important;
  grid-template-columns: 1fr 1fr auto !important;
  gap: 8px !important;
  align-content: center !important;
}

body[data-hub-mode="command"] .pk-date-filter > span {
  grid-column: 1 / -1 !important;
  color: #8ef4d8 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

body[data-hub-mode="command"] .pk-date-filter label {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

body[data-hub-mode="command"] .pk-date-filter small {
  color: rgba(218,246,238,.62) !important;
  font-size: 11px !important;
}

body[data-hub-mode="command"] .pk-date-filter input {
  width: 100% !important;
  min-height: 34px !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  color: #f3fffa !important;
  border: 1px solid rgba(142,244,216,.20) !important;
  border-radius: 8px !important;
  background: rgba(3,13,12,.72) !important;
  font-weight: 850 !important;
}

body[data-hub-mode="command"] .pk-date-filter button {
  align-self: end !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  color: #03120f !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #8ef4d8 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body[data-hub-mode="command"] .pk-rank-hero h3 {
  color: #fff !important;
  font-size: clamp(18px, 1.45vw, 24px) !important;
  line-height: 1.25 !important;
}

body[data-hub-mode="command"] .pk-rank-hero p,
body[data-hub-mode="command"] .pk-rank-hero small,
body[data-hub-mode="command"] .pk-rank-rules p {
  color: rgba(218,246,238,.72) !important;
}

body[data-hub-mode="command"] .pk-rank-self strong,
body[data-hub-mode="command"] .pk-rank-kpi strong {
  color: #8ef4d8 !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere !important;
}

body[data-hub-mode="command"] .pk-rank-body {
  min-height: 0 !important;
  height: auto !important;
  margin-top: 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, .82fr) !important;
  gap: 10px !important;
}

body[data-hub-mode="command"] .pk-rank-card {
  min-height: 0 !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

body[data-hub-mode="command"] .pk-rank-rows,
body[data-hub-mode="command"] .pk-store-rows,
body[data-hub-mode="command"] .pk-rank-rules > div:last-child {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

body[data-hub-mode="command"] .pk-rank-row,
body[data-hub-mode="command"] .pk-store-row {
  color: #f3fffa !important;
  border-color: rgba(142,244,216,.14) !important;
  background: rgba(6,24,22,.76) !important;
}

body[data-hub-mode="command"] .pk-rank-row {
  grid-template-columns: 34px minmax(92px, 1fr) minmax(104px, auto) 74px minmax(112px, auto) !important;
}

body[data-hub-mode="command"] .pk-store-row {
  grid-template-columns: minmax(0, 1fr) minmax(104px, auto) minmax(74px, auto) !important;
}

body[data-hub-mode="command"] .pk-rank-row strong,
body[data-hub-mode="command"] .pk-store-row strong {
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

body[data-hub-mode="command"] .pk-rank-row span,
body[data-hub-mode="command"] .pk-store-row span {
  color: rgba(218,246,238,.70) !important;
}

body[data-hub-mode="command"] .pk-rank-row em,
body[data-hub-mode="command"] .pk-store-row b {
  color: #8ef4d8 !important;
  font-size: 16px !important;
  font-style: normal !important;
  white-space: nowrap !important;
}

body[data-hub-mode="command"] .pk-rank-row small.bad,
body[data-hub-mode="command"] .pk-store-row small.bad {
  color: #ffe5c2 !important;
  background: rgba(240,191,91,.16) !important;
}

body[data-hub-mode="command"] .pk-rank-row small.good,
body[data-hub-mode="command"] .pk-store-row small.good {
  color: #baffeb !important;
  background: rgba(142,244,216,.14) !important;
}

body[data-hub-mode="stores"] .app-shell .main {
  overflow: hidden !important;
}

body[data-hub-mode="stores"] #storeWorkbench {
  height: calc(100vh - 144px) !important;
  min-height: 0 !important;
}

body[data-hub-mode="stores"] .detail-head {
  padding: 14px !important;
  border: 1px solid rgba(142,244,216,.20) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(10,34,31,.98), rgba(4,14,13,.96)) !important;
}

body[data-hub-mode="stores"] #selectedMeta {
  color: #8ef4d8 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body[data-hub-mode="stores"] #selectedName {
  color: #fff !important;
  font-size: clamp(22px, 1.55vw, 30px) !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
}

body[data-hub-mode="stores"] .detail-badges span {
  color: #05120f !important;
  background: #8ef4d8 !important;
  font-weight: 950 !important;
}

@media (max-width: 1180px) {
  body[data-hub-mode="command"] .app-shell .main {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  body[data-hub-mode="command"] .pk-rank-hero,
  body[data-hub-mode="command"] .pk-rank-body {
    grid-template-columns: 1fr !important;
  }
}

/* V88.1: hidden panes must beat older display:grid!important workspace rules. */
body:has(.app-shell:not(.hidden)) .app-shell .main > .hub-pane-hidden,
body:has(.app-shell:not(.hidden)) .app-shell .hub-pane-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-hub-mode="command"] .pk-rank-sources span,
body[data-hub-mode="command"] .pk-rank-rules > div:last-child span {
  color: #f3fffa !important;
  border-color: rgba(142,244,216,.14) !important;
  background: rgba(6,24,22,.76) !important;
}

body[data-hub-mode="command"] .pk-rank-sources b,
body[data-hub-mode="command"] .pk-rank-sources strong,
body[data-hub-mode="command"] .pk-rank-sources small {
  color: #f3fffa !important;
}

body[data-hub-mode="command"] .pk-rank-sources small {
  color: rgba(218,246,238,.70) !important;
}

body[data-hub-mode="command"] .pk-rank-card.pk-rank-rules {
  grid-template-rows: auto 78px auto minmax(0, 1fr) !important;
}

body[data-hub-mode="command"] .pk-rank-sources {
  height: 78px !important;
  min-height: 78px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body[data-hub-mode="command"] .pk-rank-sources span {
  min-height: 0 !important;
  padding: 9px 10px !important;
  overflow: hidden !important;
}

body[data-hub-mode="command"] .pk-rank-sources strong {
  margin: 2px 0 !important;
  font-size: 18px !important;
  line-height: 1.05 !important;
}

body[data-hub-mode="command"] #pkRankFilterNote {
  margin: 8px 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(142,244,216,.12) !important;
  border-radius: 8px !important;
  background: rgba(6,24,22,.54) !important;
  line-height: 1.45 !important;
}

/* V91: operator console, role routing, and store workbench readability. */
.role-hidden {
  display: none !important;
}

body[data-role="operator"][data-hub-mode="command"] .app-shell .main {
  display: block !important;
  height: calc(100vh - 144px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body[data-role="operator"][data-hub-mode="command"] #adminCockpit,
body[data-role="operator"][data-hub-mode="command"] #pkRankPanel,
body:not([data-role="operator"]) #operatorCockpit {
  display: none !important;
}

.operator-command-center {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  color: #f4fffb;
}

.operator-command-head,
.operator-signal,
.operator-panel,
.operator-dashboard-grid article {
  border: 1px solid rgba(142,244,216,.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(12,42,37,.86), rgba(5,18,16,.94)),
    radial-gradient(circle at 100% 0%, rgba(142,244,216,.12), transparent 32%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 48px rgba(0,0,0,.24);
}

.operator-command-head {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(520px, 1.2fr);
  gap: 14px;
  align-items: stretch;
  padding: 16px;
}

.operator-command-head h3 {
  margin: 4px 0 8px;
  color: #fff;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.12;
}

.operator-command-head p {
  color: rgba(222,247,240,.75);
  line-height: 1.55;
}

.operator-command-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.operator-command-kpis article {
  min-height: 92px;
  padding: 12px;
  border: 1px solid rgba(142,244,216,.14);
  border-radius: 8px;
  background: rgba(5,22,20,.72);
}

.operator-command-kpis span,
.operator-dashboard-grid span,
.operator-panel .panel-headline span,
.operator-store-tools span,
.operator-store-detail-head span {
  color: rgba(218,246,238,.72);
  font-size: 13px;
  font-weight: 900;
}

.operator-command-kpis strong {
  display: block;
  margin: 8px 0 2px;
  color: #8ef4d8;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1;
}

.operator-command-kpis small,
.operator-dashboard-grid p,
.operator-panel p,
.operator-store-row span,
.operator-task-card small {
  color: rgba(218,246,238,.66);
}

.operator-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.operator-tabs button {
  min-height: 44px;
  border: 1px solid rgba(142,244,216,.18);
  border-radius: 8px;
  color: rgba(231,255,248,.78);
  background: rgba(7,25,23,.72);
  font-weight: 950;
}

.operator-tabs button.active {
  color: #03120f;
  background: linear-gradient(135deg, #8ef4d8, #f0d365);
  box-shadow: 0 14px 36px rgba(142,244,216,.18);
}

.operator-tabpage {
  min-height: 0;
  display: none;
  overflow: hidden;
}

.operator-tabpage.active {
  display: grid;
  gap: 12px;
}

#operatorOverviewPane.active {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.operator-signal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .45fr);
  gap: 12px;
  padding: 14px 16px;
}

.operator-signal h4 {
  margin: 4px 0 6px;
  color: #fff;
  font-size: 22px;
}

.operator-skill-rule {
  padding: 12px;
  border-radius: 8px;
  background: rgba(6,24,22,.68);
}

.operator-skill-rule b {
  color: #8ef4d8;
}

.operator-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.operator-dashboard-grid article {
  min-height: 118px;
  padding: 14px;
}

.operator-dashboard-grid strong {
  display: block;
  margin: 8px 0;
  color: #8ef4d8;
  font-size: 30px;
  line-height: 1;
}

.operator-two-column,
.operator-ranking-layout,
.operator-task-board {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.operator-panel {
  min-height: 0;
  padding: 14px;
  overflow: hidden;
}

.operator-panel > div:last-child,
#opPriorityStores,
#opTodayTasks,
#opRankingRows,
#opStoreList,
#opStoreTaskList,
#opSelectedTasks,
#opRecoveryTemplates {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}

.operator-store-workbench {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(330px, .68fr) minmax(520px, 1.32fr);
  gap: 12px;
}

.operator-store-list-panel,
.operator-store-detail-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.operator-store-tools,
.operator-store-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.operator-store-tools input,
.queue-search input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(142,244,216,.20);
  border-radius: 8px;
  color: #f4fffb;
  background: rgba(3,14,13,.86);
  padding: 0 12px;
  font-weight: 850;
  outline: none;
}

.operator-store-row {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid rgba(142,244,216,.14);
  border-radius: 8px;
  color: #f4fffb;
  background: rgba(5,22,20,.78);
  text-align: left;
}

.operator-store-row.active {
  border-color: rgba(142,244,216,.72);
  background: linear-gradient(135deg, rgba(16,74,64,.92), rgba(5,22,20,.92));
  box-shadow: inset 4px 0 0 #50e6c2;
}

.operator-store-row b,
.operator-task-card b,
.operator-mini-task b {
  min-width: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #03120f;
  background: #8ef4d8;
  font-weight: 950;
}

.operator-store-row strong,
.operator-task-card strong,
.operator-mini-task strong {
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
}

.operator-store-row em {
  color: #8ef4d8;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.operator-store-detail-head h4 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.2;
}

.operator-store-detail-head button,
.operator-task-card button {
  min-height: 38px;
  border: 1px solid rgba(142,244,216,.20);
  border-radius: 8px;
  color: #03120f;
  background: #8ef4d8;
  font-weight: 950;
  padding: 0 12px;
}

.operator-store-advice {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(142,244,216,.14);
  border-radius: 8px;
  background: rgba(6,24,22,.74);
}

.operator-store-advice h5 {
  margin: 6px 0;
  color: #fff;
  font-size: 20px;
}

.operator-task-card,
.operator-mini-task {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid rgba(142,244,216,.14);
  border-radius: 8px;
  background: rgba(5,22,20,.78);
}

.operator-task-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.operator-task-card header span,
.operator-mini-task span {
  color: #8ef4d8;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.operator-task-card p,
.operator-mini-task p {
  margin: 6px 0;
  color: rgba(230,250,244,.78);
  line-height: 1.55;
}

.operator-task-card.done {
  opacity: .46;
  filter: grayscale(.35);
}

.operator-task-card.done button {
  color: rgba(230,250,244,.72);
  background: rgba(142,244,216,.12);
}

.operator-rank-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(142,244,216,.14);
  border-radius: 8px;
  background: rgba(5,22,20,.74);
}

.operator-rank-row.self {
  border-color: rgba(142,244,216,.66);
  background: rgba(16,74,64,.74);
}

.operator-rank-row em {
  color: #8ef4d8;
  font-style: normal;
  font-weight: 950;
}

.operator-rank-self {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.operator-rank-self span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 8px;
  background: rgba(5,22,20,.74);
  color: rgba(218,246,238,.72);
}

.operator-rank-self b {
  color: #8ef4d8;
}

.operator-empty {
  padding: 18px;
  color: rgba(218,246,238,.66);
  border: 1px dashed rgba(142,244,216,.18);
  border-radius: 8px;
}

.queue-search {
  margin: 12px 0 10px;
}

body[data-hub-mode="stores"] .workspace {
  gap: 12px !important;
}

body[data-hub-mode="stores"] .detail {
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-hub-mode="stores"] .detail .tabpage.active {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

body[data-hub-mode="stores"] .tabs {
  padding: 10px !important;
  border: 1px solid rgba(142,244,216,.18) !important;
  border-radius: 8px !important;
  background: rgba(6,24,22,.82) !important;
}

body[data-hub-mode="stores"] .tabs button {
  color: rgba(235,255,250,.82) !important;
  background: rgba(16,33,31,.92) !important;
  border-color: rgba(142,244,216,.14) !important;
}

body[data-hub-mode="stores"] .tabs button.active {
  color: #03120f !important;
  background: #8ef4d8 !important;
}

body[data-hub-mode="stores"] .state-main,
body[data-hub-mode="stores"] .priority-engine,
body[data-hub-mode="stores"] .conclusion-main,
body[data-hub-mode="stores"] .state-numbers span,
body[data-hub-mode="stores"] .priority-engine-metrics span,
body[data-hub-mode="stores"] .conclusion-columns span,
body[data-hub-mode="stores"] .realtime,
body[data-hub-mode="stores"] .recent-card,
body[data-hub-mode="stores"] .kpi,
body[data-hub-mode="stores"] .action,
body[data-hub-mode="stores"] .sku-row,
body[data-hub-mode="stores"] .hot-tier-card,
body[data-hub-mode="stores"] .hot-product-panel,
body[data-hub-mode="stores"] .playbook,
body[data-hub-mode="stores"] .time-node {
  color: #f4fffb !important;
  border-color: rgba(142,244,216,.16) !important;
  background:
    linear-gradient(180deg, rgba(12,42,37,.86), rgba(5,18,16,.94)) !important;
}

body[data-hub-mode="stores"] .state-main h4,
body[data-hub-mode="stores"] .priority-engine b,
body[data-hub-mode="stores"] .conclusion-main h4,
body[data-hub-mode="stores"] .state-numbers b,
body[data-hub-mode="stores"] .priority-engine-metrics b,
body[data-hub-mode="stores"] .conclusion-columns b,
body[data-hub-mode="stores"] .action h5,
body[data-hub-mode="stores"] .sku-name strong,
body[data-hub-mode="stores"] .hot-product-card strong,
body[data-hub-mode="stores"] .playbook h4 {
  color: #fff !important;
}

body[data-hub-mode="stores"] .state-main p,
body[data-hub-mode="stores"] .priority-engine i,
body[data-hub-mode="stores"] .conclusion-main p,
body[data-hub-mode="stores"] .state-numbers span,
body[data-hub-mode="stores"] .priority-engine-metrics span,
body[data-hub-mode="stores"] .conclusion-columns span,
body[data-hub-mode="stores"] .action p,
body[data-hub-mode="stores"] .sku-row span,
body[data-hub-mode="stores"] .hot-product-card p,
body[data-hub-mode="stores"] .time-body p,
body[data-hub-mode="stores"] #diagnosisText {
  color: rgba(226,248,242,.78) !important;
}

body[data-hub-mode="stores"] .state-numbers span,
body[data-hub-mode="stores"] .priority-engine-metrics span,
body[data-hub-mode="stores"] .conclusion-columns span {
  border: 1px solid rgba(142,244,216,.14) !important;
  border-radius: 8px !important;
}

body[data-hub-mode="stores"] .queue-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

body[data-hub-mode="stores"] .queue-panel .store-list {
  align-content: start !important;
}

/* V92: operator overview should read like a workbench, not a wall of cards. */
body[data-role="operator"][data-hub-mode="command"] .operator-command-center {
  grid-template-rows: auto 46px minmax(0, 1fr) !important;
  gap: 10px !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-command-head {
  grid-template-columns: minmax(420px, 1fr) minmax(560px, .98fr) !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  background:
    linear-gradient(120deg, rgba(9,36,32,.96), rgba(4,16,15,.98)) !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-command-head h3 {
  margin: 3px 0 8px !important;
  font-size: clamp(24px, 1.8vw, 30px) !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-command-head p {
  max-width: 760px !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-command-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-command-kpis article {
  min-height: 104px !important;
  padding: 13px !important;
  background: linear-gradient(180deg, rgba(7,29,26,.94), rgba(4,17,15,.96)) !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-command-kpis strong {
  font-size: clamp(30px, 2.1vw, 40px) !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-tabs {
  gap: 8px !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-tabs button {
  min-height: 44px !important;
  letter-spacing: 0 !important;
  background: rgba(5,20,18,.92) !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-tabs button.active {
  background: linear-gradient(135deg, #8ef4d8, #d8f7ea) !important;
}

body[data-role="operator"][data-hub-mode="command"] #operatorOverviewPane.active {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-signal {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr) !important;
  padding: 16px 18px !important;
  background:
    linear-gradient(135deg, rgba(14,57,50,.88), rgba(5,19,17,.96)) !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-signal h4 {
  font-size: clamp(24px, 1.8vw, 32px) !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-signal p {
  max-width: 980px !important;
  font-size: 16px !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-skill-rule {
  display: grid !important;
  align-content: center !important;
  background:
    linear-gradient(180deg, rgba(5,22,20,.94), rgba(4,15,14,.98)) !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-dashboard-grid {
  grid-template-columns: 1.05fr 1.05fr 1.05fr 1.05fr !important;
  gap: 8px !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-dashboard-grid article {
  min-height: 94px !important;
  padding: 12px 14px !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-dashboard-grid strong {
  margin: 4px 0 !important;
  font-size: clamp(24px, 1.8vw, 34px) !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-dashboard-grid p {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-two-column {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important;
  gap: 10px !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-panel {
  padding: 12px !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-store-row,
body[data-role="operator"][data-hub-mode="command"] .operator-mini-task {
  margin-bottom: 8px !important;
  padding: 10px !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-mini-task {
  grid-template-columns: 42px minmax(0, 1fr) 52px !important;
}

body[data-role="operator"][data-hub-mode="command"] .operator-mini-task p {
  margin: 4px 0 0 !important;
}

.diagnosis-output {
  display: grid;
  gap: 12px;
  color: #f4fffb;
}

.diagnosis-brief,
.diagnosis-card,
.diagnosis-kpis article {
  border: 1px solid rgba(142,244,216,.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(12,42,37,.88), rgba(5,18,16,.96));
}

.diagnosis-brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .34fr);
  gap: 14px;
  padding: 16px;
}

.diagnosis-brief h4 {
  margin: 4px 0 8px;
  color: #fff;
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1.2;
}

.diagnosis-brief p,
.diagnosis-action p,
.diagnosis-recovery span,
.diagnosis-sku small {
  color: rgba(226,248,242,.76);
  line-height: 1.6;
}

.diagnosis-score {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(5,22,20,.78);
}

.diagnosis-score span,
.diagnosis-kpis span {
  color: rgba(218,246,238,.68);
  font-size: 13px;
  font-weight: 900;
}

.diagnosis-score strong,
.diagnosis-kpis strong {
  color: #8ef4d8;
  font-size: 28px;
  line-height: 1;
}

.diagnosis-score small,
.diagnosis-kpis small {
  color: rgba(218,246,238,.62);
}

.diagnosis-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.diagnosis-kpis article {
  display: grid;
  gap: 8px;
  min-height: 92px;
  padding: 13px;
}

.diagnosis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 12px;
}

.diagnosis-card {
  min-height: 0;
  padding: 14px;
}

.diagnosis-recovery-card {
  grid-column: 1 / -1;
}

.diagnosis-action,
.diagnosis-sku {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(142,244,216,.12);
  border-radius: 8px;
  background: rgba(5,22,20,.72);
}

.diagnosis-action > b,
.diagnosis-sku > b {
  min-width: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #03120f;
  background: #8ef4d8;
  font-weight: 950;
}

.diagnosis-action strong,
.diagnosis-sku strong {
  color: #fff;
}

.diagnosis-action small {
  color: rgba(142,244,216,.72);
}

.diagnosis-sku span {
  color: #8ef4d8;
  font-size: 12px;
  font-weight: 950;
}

.diagnosis-recovery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.diagnosis-recovery span {
  padding: 12px;
  border: 1px solid rgba(142,244,216,.12);
  border-radius: 8px;
  background: rgba(5,22,20,.72);
}

.diagnosis-recovery b {
  display: block;
  margin-bottom: 6px;
  color: #8ef4d8;
}

/* V93: operator action/recovery pages show business actions only. */
body[data-role="operator"] .side-missions,
body[data-role="operator"] .side-playbook,
body[data-role="operator"] .identity {
  display: none !important;
}

body[data-role="operator"] .role-action-head .eyebrow,
body[data-role="operator"] .sla-head .eyebrow,
body[data-role="operator"] .role-action-rules > span,
body[data-role="operator"] .sla-rule-panel > span {
  display: none !important;
}

body[data-role="operator"][data-hub-mode="actions"] .app-shell .main,
body[data-role="operator"][data-hub-mode="sla"] .app-shell .main {
  height: calc(100vh - 144px) !important;
  overflow: hidden !important;
}

body[data-role="operator"] .role-action-center,
body[data-role="operator"] .recovery-sla {
  height: 100% !important;
  margin: 0 !important;
  padding: 16px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  background:
    radial-gradient(circle at 0 0, rgba(142,244,216,.12), transparent 30%),
    linear-gradient(145deg, rgba(5,18,16,.98), rgba(8,28,25,.94)) !important;
}

body[data-role="operator"] .role-action-head,
body[data-role="operator"] .sla-head {
  min-height: 98px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(142,244,216,.18) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(12,42,37,.88), rgba(5,18,16,.96)) !important;
}

body[data-role="operator"] .role-action-head h3,
body[data-role="operator"] .sla-head h3 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: clamp(24px, 1.9vw, 32px) !important;
}

body[data-role="operator"] .role-action-head p,
body[data-role="operator"] .sla-head p {
  max-width: 980px !important;
  color: rgba(226,248,242,.76) !important;
  font-size: 16px !important;
}

body[data-role="operator"] .role-action-layout {
  min-height: 0 !important;
  margin: 0 !important;
  grid-template-columns: minmax(260px, .52fr) minmax(0, 1.48fr) minmax(260px, .62fr) !important;
}

body[data-role="operator"] .role-action-score,
body[data-role="operator"] .role-action-workbench,
body[data-role="operator"] .role-action-rules,
body[data-role="operator"] .sla-score,
body[data-role="operator"] .sla-list-panel,
body[data-role="operator"] .sla-stage-panel,
body[data-role="operator"] .sla-operator-panel,
body[data-role="operator"] .sla-rule-panel {
  min-height: 0 !important;
  background: linear-gradient(180deg, rgba(12,42,37,.78), rgba(5,18,16,.92)) !important;
  border-color: rgba(142,244,216,.16) !important;
}

body[data-role="operator"] .role-action-queue {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-role="operator"] .role-action-queue b,
body[data-role="operator"] .role-action-stat-grid b {
  background: rgba(5,22,20,.76) !important;
}

body[data-role="operator"] #roleActionList,
body[data-role="operator"] #roleActionRules,
body[data-role="operator"] #slaRowList,
body[data-role="operator"] #slaStageBuckets,
body[data-role="operator"] #slaOperatorBuckets {
  max-height: none !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
}

.ops-recovery-card,
.ops-follow-card,
.ops-stage-card,
.ops-playbook {
  border: 1px solid rgba(142,244,216,.14);
  border-radius: 8px;
  background: rgba(5,22,20,.76);
}

.ops-recovery-card,
.ops-follow-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  margin-bottom: 10px;
}

.ops-recovery-card.done,
.ops-follow-card.done {
  opacity: .5;
  filter: grayscale(.35);
}

.ops-recovery-card header,
.ops-follow-card header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.ops-recovery-card header b,
.ops-follow-card header b,
.ops-stage-card b {
  min-height: 38px;
  min-width: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #03120f;
  background: #8ef4d8;
  font-weight: 950;
}

.ops-recovery-card header strong,
.ops-follow-card header strong,
.ops-recovery-card h4 {
  color: #fff;
  line-height: 1.25;
}

.ops-recovery-card header span,
.ops-follow-card header span,
.ops-recovery-card footer small,
.ops-follow-card small,
.ops-playbook span {
  color: rgba(226,248,242,.68);
}

.ops-recovery-card header em,
.ops-follow-card header em {
  padding: 7px 10px;
  border-radius: 8px;
  color: #8ef4d8;
  background: rgba(142,244,216,.10);
  font-style: normal;
  font-weight: 950;
}

.ops-recovery-card p,
.ops-follow-card p {
  margin: 0;
  color: rgba(226,248,242,.78);
  line-height: 1.55;
}

.ops-recovery-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ops-recovery-checks span {
  min-height: 46px;
  padding: 8px;
  border: 1px solid rgba(142,244,216,.12);
  border-radius: 8px;
  color: rgba(226,248,242,.58);
  background: rgba(2,12,11,.62);
  font-size: 12px;
  line-height: 1.35;
}

.ops-recovery-checks span.active {
  color: #03120f;
  background: #8ef4d8;
  font-weight: 950;
}

.ops-recovery-card footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.ops-card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.ops-recovery-card button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  color: #03120f;
  background: #8ef4d8;
  font-weight: 950;
}

.ops-recovery-card button.ghost-action {
  color: #c9fff0;
  border: 1px solid rgba(142,244,216,.24);
  background: rgba(142,244,216,.08);
}

.ops-recovery-card button:disabled {
  color: rgba(226,248,242,.54);
  background: rgba(142,244,216,.12);
}

body[data-role="operator"] .sla-layout {
  min-height: 0 !important;
  margin: 0 !important;
  grid-template-columns: minmax(240px, .48fr) minmax(0, 1.2fr) minmax(240px, .55fr) !important;
  grid-template-areas:
    "score list stage"
    "score list operator" !important;
}

body[data-role="operator"] .sla-rule-panel {
  display: none !important;
}

.ops-stage-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  margin-bottom: 10px;
}

.ops-stage-card strong {
  color: #fff;
  font-size: 26px;
}

.ops-stage-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(226,248,242,.68);
}

.ops-playbook {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.ops-playbook b {
  color: #8ef4d8;
}

.ops-playbook span {
  padding: 10px;
  border-radius: 8px;
  background: rgba(2,12,11,.56);
}

/* V95: store UE report uses store_id as the unique viewing key and merges months horizontally. */
.store-ue-panel {
  display: grid;
  gap: 14px;
  max-width: 1560px !important;
}

.store-ue-hero,
.store-ue-kpis article,
.store-ue-import,
.store-ue-trend,
.store-ue-table-card {
  border: 1px solid rgba(142,244,216,.16);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(12,42,37,.88), rgba(5,18,16,.94)),
    radial-gradient(circle at 80% 16%, rgba(142,244,216,.14), transparent 32%);
  box-shadow: 0 18px 54px rgba(0,0,0,.22);
}

.store-ue-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 14px;
  align-items: stretch;
  padding: 18px;
}

.store-ue-hero h3 {
  margin: 4px 0 8px;
  color: #fff;
  font-size: clamp(26px, 2.1vw, 36px);
  line-height: 1.12;
}

.store-ue-hero p:not(.eyebrow),
.store-ue-source small,
.store-ue-import p,
.ue-store-row p {
  color: rgba(226,248,242,.72);
  line-height: 1.55;
}

.store-ue-source {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 108px;
  padding: 14px;
  border: 1px solid rgba(142,244,216,.16);
  border-radius: 8px;
  background: rgba(3,14,13,.62);
}

.store-ue-source span {
  color: #8ef4d8;
  font-weight: 950;
}

.store-ue-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.store-ue-kpis article {
  min-height: 126px;
  padding: 16px;
}

.store-ue-kpis span,
.store-ue-kpis small,
.store-ue-table-head,
.ue-store-row span,
.ue-month-cells small,
.ue-month-cells i {
  color: rgba(226,248,242,.62);
}

.store-ue-kpis strong {
  display: block;
  margin: 8px 0 6px;
  color: #8ef4d8;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1;
}

.store-ue-layout {
  display: grid;
  grid-template-columns: minmax(320px, .56fr) minmax(0, 1.44fr);
  gap: 12px;
}

.store-ue-import,
.store-ue-trend,
.store-ue-table-card {
  padding: 16px;
}

.store-ue-import input {
  width: 100%;
  min-height: 42px;
  margin: 10px 0;
  padding: 9px;
  border: 1px solid rgba(142,244,216,.18);
  border-radius: 8px;
  color: #f4fffb;
  background: rgba(3,14,13,.82);
}

.store-ue-import button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  color: #03120f;
  background: linear-gradient(135deg, #8ef4d8, #d7fff1);
  font-weight: 950;
}

.store-ue-import small {
  display: block;
  margin-top: 10px;
  color: rgba(226,248,242,.68);
  line-height: 1.45;
}

.ue-trend-chart {
  min-height: 190px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(86px, 1fr);
  gap: 10px;
  align-items: end;
  padding-top: 12px;
  overflow-x: auto;
}

.ue-bar {
  min-height: 160px;
  display: grid;
  grid-template-rows: minmax(80px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
  text-align: center;
}

.ue-bar i {
  width: 100%;
  min-height: 8px;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, #8ef4d8, rgba(142,244,216,.16));
  box-shadow: 0 0 28px rgba(142,244,216,.20);
}

.ue-bar b {
  color: #fff;
}

.ue-bar span,
.ue-empty {
  color: rgba(226,248,242,.62);
}

.store-ue-table-card {
  min-height: 420px;
}

.store-ue-table-head,
.ue-store-row {
  display: grid;
  grid-template-columns: minmax(250px, 1.05fr) minmax(360px, 1.32fr) 96px 86px minmax(190px, .72fr);
  gap: 12px;
  align-items: center;
}

.store-ue-table-head {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(142,244,216,.10);
  border-radius: 8px;
  background: rgba(2,12,11,.54);
  font-size: 12px;
  font-weight: 900;
}

.ue-store-rows {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.ue-store-row {
  padding: 12px;
  border: 1px solid rgba(142,244,216,.12);
  border-radius: 8px;
  background: rgba(5,22,20,.70);
}

.ue-store-row.risk {
  border-color: rgba(240,191,91,.42);
  background: linear-gradient(135deg, rgba(72,48,18,.36), rgba(5,22,20,.76));
}

.ue-store-row > b {
  display: none;
}

.ue-store-row strong {
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
}

.ue-store-row em {
  color: #8ef4d8;
  font-size: 24px;
  font-style: normal;
  font-weight: 950;
}

.ue-store-row > small {
  padding: 6px 8px;
  border-radius: 8px;
  text-align: center;
  font-weight: 950;
  background: rgba(142,244,216,.08);
}

.ue-store-row > small.good {
  color: #8ef4d8;
}

.ue-store-row > small.bad {
  color: #f0bf5b;
}

.ue-month-cells {
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  gap: 8px;
}

.ue-month-cells span {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(142,244,216,.12);
  border-radius: 8px;
  background: rgba(2,12,11,.58);
}

.ue-month-cells small,
.ue-month-cells strong,
.ue-month-cells i {
  display: block;
}

.ue-month-cells strong {
  margin: 4px 0 2px;
  color: #8ef4d8;
  font-size: 16px;
}

.ue-month-cells i {
  font-style: normal;
  font-size: 12px;
}

.ue-store-row p {
  margin: 0;
  font-size: 13px;
}

@media (max-width: 1180px) {
  .store-ue-hero,
  .store-ue-layout {
    grid-template-columns: 1fr;
  }

  .store-ue-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .store-ue-table-head {
    display: none;
  }

  .ue-store-row {
    grid-template-columns: 1fr;
  }

  .ue-month-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* V96: UE operating cockpit, matching store queue interaction. */
.store-ue-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: auto;
  min-height: 0;
}

.store-ue-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.store-ue-kpis article:nth-child(5) strong {
  color: #f0bf5b;
}

.store-ue-command {
  display: grid;
  grid-template-columns: minmax(360px, .42fr) minmax(0, .58fr);
  gap: 14px;
  min-height: 520px;
}

.store-ue-queue-card,
.store-ue-detail-card,
.store-ue-bottom > article {
  border: 1px solid rgba(142,244,216,.16);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(12,42,37,.88), rgba(5,18,16,.94)),
    radial-gradient(circle at 86% 14%, rgba(142,244,216,.13), transparent 34%);
  box-shadow: 0 18px 54px rgba(0,0,0,.22);
}

.store-ue-queue-card,
.store-ue-detail-card {
  min-height: 0;
  padding: 16px;
}

.ue-queue-head,
.ue-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ue-queue-head span,
.ue-detail-head span {
  display: block;
  color: rgba(226,248,242,.62);
  font-size: 13px;
  font-weight: 900;
}

.ue-queue-head b {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 24px;
}

.ue-queue-head select,
#ueQueueSearch {
  min-height: 42px;
  border: 1px solid rgba(142,244,216,.18);
  border-radius: 8px;
  color: #f4fffb;
  background: rgba(3,14,13,.82);
}

.ue-queue-head select {
  max-width: 170px;
  padding: 0 10px;
}

#ueQueueSearch {
  width: 100%;
  margin: 12px 0;
  padding: 0 12px;
}

.store-ue-queue-card .ue-store-rows {
  max-height: 430px;
  overflow-y: auto;
  padding-right: 4px;
}

.store-ue-queue-card .ue-store-row {
  grid-template-columns: 42px minmax(0, 1fr) 82px 70px;
  cursor: pointer;
}

.store-ue-queue-card .ue-store-row > b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #06100f;
  background: rgba(142,244,216,.88);
  font-size: 14px;
}

.store-ue-queue-card .ue-store-row.active {
  border-color: rgba(142,244,216,.72);
  background:
    linear-gradient(135deg, rgba(20,88,75,.80), rgba(6,24,22,.86));
  box-shadow: inset 3px 0 0 #8ef4d8;
}

.store-ue-queue-card .ue-store-row.loss {
  border-color: rgba(255,122,104,.36);
  background: linear-gradient(135deg, rgba(84,29,24,.45), rgba(5,22,20,.76));
}

.store-ue-queue-card .ue-store-row.loss > b {
  background: #ff9a87;
}

.store-ue-queue-card .ue-store-row em {
  text-align: right;
}

.store-ue-queue-card .ue-store-row p {
  grid-column: 2 / -1;
}

.ue-detail-head h4 {
  margin: 6px 0 0;
  color: #fff;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.16;
}

.ue-detail-head > b {
  min-width: 82px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #06100f;
  background: linear-gradient(135deg, #8ef4d8, #f0bf5b);
  text-align: center;
}

.ue-detail-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.ue-detail-summary span,
.ue-month-detail-grid article {
  border: 1px solid rgba(142,244,216,.13);
  border-radius: 8px;
  background: rgba(2,12,11,.58);
}

.ue-detail-summary span {
  min-height: 86px;
  padding: 12px;
}

.ue-detail-summary small,
.ue-month-detail-grid span,
.ue-month-detail-grid small {
  color: rgba(226,248,242,.62);
}

.ue-detail-summary strong {
  display: block;
  margin-top: 8px;
  color: #8ef4d8;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1;
}

.ue-detail-summary strong.bad,
.ue-month-detail-grid em.bad {
  color: #f0bf5b;
}

.ue-detail-summary strong.good,
.ue-month-detail-grid em.good {
  color: #8ef4d8;
}

.ue-month-detail-grid {
  display: block;
  margin-top: 14px;
}

.ue-month-detail-grid article {
  min-height: 142px;
  padding: 14px;
}

.ue-month-detail-grid strong {
  display: block;
  margin: 10px 0 8px;
  color: #fff;
  font-size: 30px;
  line-height: 1;
}

.ue-month-detail-grid em {
  display: inline-flex;
  margin-top: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(142,244,216,.08);
  font-style: normal;
  font-weight: 950;
}

.ue-detail-advice {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(142,244,216,.14);
  border-radius: 8px;
  background: rgba(4,18,16,.70);
}

.ue-detail-advice b {
  color: #8ef4d8;
}

.ue-detail-advice p {
  margin: 8px 0 0;
  color: rgba(226,248,242,.72);
  line-height: 1.58;
}

.ue-finance-table {
  overflow: hidden;
  border: 1px solid rgba(214, 221, 230, .20);
  border-radius: 8px;
  background: #f7faf8;
  color: #10201b;
}

.ue-finance-head,
.ue-finance-row {
  display: grid;
  grid-template-columns: 96px minmax(210px, .78fr) minmax(180px, 1fr);
  align-items: stretch;
}

.ue-finance-head {
  background: #ffffff;
  color: #07110f;
  font-weight: 950;
}

.ue-finance-head b,
.ue-finance-row span,
.ue-finance-row strong,
.ue-finance-row em {
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid #ccd4d0;
  border-bottom: 1px solid #ccd4d0;
  line-height: 1.32;
}

.ue-finance-head b:last-child,
.ue-finance-row em {
  border-right: 0;
}

.ue-finance-row span {
  background: #fff;
  font-weight: 900;
}

.ue-finance-row strong {
  color: #07110f;
  font-weight: 950;
}

.ue-finance-row.income strong {
  background: #86df7c;
}

.ue-finance-row.expense strong {
  background: #d9d9d9;
}

.ue-finance-row.ratio strong {
  background: #ffc400;
  font-style: italic;
}

.ue-finance-row.balance strong {
  background: #b7cafa;
}

.ue-finance-row.balance.ratio strong,
.ue-finance-row.ratio.balance strong {
  background: #ffc400;
}

.ue-finance-row em {
  background: #fff;
  color: #0a1512;
  text-align: right;
  font-style: normal;
  font-weight: 850;
}

.ue-finance-row.balance em {
  font-weight: 950;
}

.store-ue-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr);
  gap: 14px;
}

.store-ue-bottom .store-ue-trend,
.store-ue-bottom .store-ue-import {
  padding: 16px;
}

@media (max-width: 1180px) {
  .store-ue-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .store-ue-command,
  .store-ue-bottom {
    grid-template-columns: 1fr;
  }

  .ue-detail-summary,
  .ue-month-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ue-finance-head,
  .ue-finance-row {
    grid-template-columns: 72px minmax(150px, .85fr) minmax(150px, 1fr);
    font-size: 13px;
  }

  .store-ue-queue-card .ue-store-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }
}

/* V98: mobile-first shell and UE reader for admin/operator use. */
@media (max-width: 760px) {
  html,
  body,
  body:has(.app-shell:not(.hidden)) {
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #06100f !important;
  }

  .app-shell:not(.hidden) {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    overflow: visible !important;
    background:
      linear-gradient(180deg, rgba(142, 244, 216, .06), transparent 210px),
      #06100f !important;
  }

  .global-command-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: max(10px, env(safe-area-inset-top)) 12px 10px !important;
    border-bottom: 1px solid rgba(142, 244, 216, .16) !important;
    background: rgba(5, 16, 14, .94) !important;
    backdrop-filter: blur(18px) !important;
  }

  .global-command-header .brand {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .global-command-header .brand .mark {
    width: 38px !important;
    height: 38px !important;
  }

  .global-command-header .brand h1 {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  .global-command-header .brand p,
  .topline,
  .top-actions .action-buttons,
  .top-actions .status span:nth-child(n + 2),
  .side-brief,
  .side-kpis,
  .side-function-map,
  .identity,
  .side-missions,
  .side-playbook,
  .deerflow {
    display: none !important;
  }

  .global-command-header .topbar {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .title-block h2 {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.18 !important;
  }

  .title-block .eyebrow {
    margin-bottom: 2px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .top-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 84px !important;
  }

  .top-actions .status {
    display: flex !important;
  }

  .top-actions .status span:first-child {
    max-width: 92px !important;
    min-height: 30px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .app-shell .side {
    position: sticky !important;
    top: 92px !important;
    z-index: 50 !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    padding: 8px 10px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(142, 244, 216, .14) !important;
    background: rgba(6, 16, 15, .92) !important;
    backdrop-filter: blur(16px) !important;
  }

  .system-rail {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 0 2px 2px !important;
    scrollbar-width: none !important;
  }

  .system-rail::-webkit-scrollbar {
    display: none !important;
  }

  .system-rail button,
  .system-rail a {
    flex: 0 0 108px !important;
    min-height: 56px !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 2px 6px !important;
    align-items: center !important;
    padding: 8px !important;
    border-radius: 8px !important;
  }

  .system-rail button.role-hidden,
  #hubModeTabs [data-hub-mode].role-hidden {
    display: none !important;
  }

  .system-rail b {
    grid-row: span 2 !important;
    font-size: 11px !important;
  }

  .system-rail span {
    font-size: 13px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .system-rail small {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .app-shell .main {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 12px 10px 84px !important;
  }

  .app-shell main > section:not(.hub-pane-hidden),
  .app-shell main > div:not(.hub-pane-hidden) {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .store-ue-panel {
    display: grid !important;
    gap: 10px !important;
  }

  .store-ue-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .store-ue-hero h3 {
    margin: 2px 0 6px !important;
    font-size: 24px !important;
    line-height: 1.12 !important;
  }

  .store-ue-hero p:not(.eyebrow) {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .store-ue-source {
    min-height: 0 !important;
    padding: 10px !important;
  }

  .store-ue-kpis {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }

  .store-ue-kpis::-webkit-scrollbar {
    display: none !important;
  }

  .store-ue-kpis article {
    flex: 0 0 132px !important;
    min-height: 88px !important;
    padding: 10px !important;
  }

  .store-ue-kpis span,
  .store-ue-kpis small {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .store-ue-kpis strong {
    margin: 6px 0 4px !important;
    font-size: 28px !important;
  }

  .store-ue-command,
  .store-ue-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: 0 !important;
  }

  .store-ue-queue-card,
  .store-ue-detail-card,
  .store-ue-bottom > article {
    padding: 12px !important;
    border-radius: 8px !important;
  }

  .ue-queue-head,
  .ue-detail-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .ue-queue-head select,
  #ueQueueSearch {
    width: 100% !important;
    max-width: none !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }

  .store-ue-queue-card .ue-store-rows {
    max-height: 286px !important;
    overflow-y: auto !important;
  }

  .store-ue-queue-card .ue-store-row {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .store-ue-queue-card .ue-store-row > b {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }

  .store-ue-queue-card .ue-store-row em,
  .store-ue-queue-card .ue-store-row > small,
  .store-ue-queue-card .ue-store-row p {
    grid-column: 2 !important;
    text-align: left !important;
  }

  .store-ue-queue-card .ue-store-row em {
    font-size: 22px !important;
  }

  .ue-detail-head h4 {
    font-size: 22px !important;
  }

  .ue-detail-head > b {
    width: fit-content !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
  }

  .ue-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .ue-detail-summary span {
    min-height: 74px !important;
    padding: 10px !important;
  }

  .ue-detail-summary strong {
    font-size: 21px !important;
  }

  .ue-month-detail-grid {
    overflow-x: auto !important;
    margin: 12px -4px 0 !important;
    padding: 0 4px 2px !important;
  }

  .ue-finance-table {
    min-width: 620px !important;
    border-radius: 8px !important;
  }

  .ue-finance-head,
  .ue-finance-row {
    grid-template-columns: 72px 190px minmax(220px, 1fr) !important;
    font-size: 13px !important;
  }

  .ue-finance-head b,
  .ue-finance-row span,
  .ue-finance-row strong,
  .ue-finance-row em {
    padding: 8px !important;
  }

  .ue-detail-advice {
    padding: 12px !important;
    font-size: 13px !important;
  }

  .ue-trend-chart {
    min-height: 140px !important;
    grid-auto-columns: 74px !important;
  }

  .ue-bar {
    min-height: 120px !important;
  }

  .store-ue-import {
    display: none !important;
  }

  .mobile-session-bar {
    display: flex !important;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 80 !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(142, 244, 216, .18) !important;
    border-radius: 8px !important;
    background: rgba(5, 16, 14, .94) !important;
    backdrop-filter: blur(18px) !important;
  }

  .mobile-session-bar span {
    min-width: 0 !important;
    overflow: hidden !important;
    color: rgba(226, 248, 242, .72) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
  }

  .mobile-session-bar button {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }
}

/* V99: narrow-phone hardening for WeChat H5 and admin/operator login. */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .login-screen:not(.hidden) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    min-height: 100svh !important;
    padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
    overflow: hidden auto !important;
  }

  .login-copy {
    width: 100% !important;
    min-width: 0 !important;
    padding: 48px 0 0 !important;
  }

  .login-copy h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 11vw, 46px) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  .login-copy span,
  .login-copy p {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .login-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 16px 0 0 !important;
  }

  .login-bg {
    inset: 8px !important;
    background-size: cover !important;
  }

  .app-shell:not(.hidden),
  .app-shell .main,
  .app-shell .workspace,
  .app-shell main {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .ue-month-detail-grid {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* V100: PC UE workbook reader, matching the Excel-style UE detail sheet. */
@media (min-width: 761px) {
  .store-ue-panel {
    gap: 14px !important;
  }

  .store-ue-command {
    grid-template-columns: minmax(300px, 340px) minmax(720px, 1fr) !important;
    align-items: start !important;
    min-height: 620px !important;
  }

  .store-ue-queue-card {
    position: sticky !important;
    top: 88px !important;
    max-height: calc(100vh - 126px) !important;
    overflow: hidden !important;
  }

  .store-ue-detail-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-color: rgba(214, 221, 230, .24) !important;
    background: #f5f7f6 !important;
    color: #07110f !important;
    box-shadow: 0 20px 64px rgba(0, 0, 0, .26) !important;
  }

  .store-ue-detail-card .ue-detail-head {
    padding: 16px 18px 12px !important;
    border-bottom: 1px solid rgba(12, 29, 24, .12) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(244, 248, 246, .94)) !important;
  }

  .store-ue-detail-card .ue-detail-head span {
    color: rgba(7, 17, 15, .54) !important;
  }

  .store-ue-detail-card .ue-detail-head h4 {
    max-width: 760px !important;
    color: #07110f !important;
    font-size: clamp(24px, 2vw, 31px) !important;
  }

  .store-ue-detail-card .ue-detail-head > b {
    color: #07110f !important;
    background: #ffc400 !important;
    box-shadow: inset 0 0 0 1px rgba(7, 17, 15, .12) !important;
  }

  .store-ue-detail-card .ue-detail-summary {
    margin: 0 !important;
    padding: 14px 18px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    background: #eef3f0 !important;
  }

  .store-ue-detail-card .ue-detail-summary span {
    min-height: 70px !important;
    padding: 10px 12px !important;
    border-color: rgba(7, 17, 15, .10) !important;
    background: #fff !important;
    color: #07110f !important;
    box-shadow: 0 8px 18px rgba(8, 28, 22, .06) !important;
  }

  .store-ue-detail-card .ue-detail-summary small {
    color: rgba(7, 17, 15, .52) !important;
  }

  .store-ue-detail-card .ue-detail-summary strong {
    margin-top: 7px !important;
    color: #0d7b52 !important;
    font-size: clamp(18px, 1.4vw, 25px) !important;
  }

  .store-ue-detail-card .ue-detail-summary strong.bad {
    color: #b16f00 !important;
  }

  .store-ue-detail-card .ue-detail-summary strong.good {
    color: #0d7b52 !important;
  }

  .ue-month-detail-grid {
    margin: 0 !important;
    padding: 0 18px 18px !important;
    overflow-x: auto !important;
    background: #eef3f0 !important;
  }

  .ue-reader-frame {
    min-width: 760px !important;
    border: 1px solid #c8d0cb !important;
    background: #fff !important;
    box-shadow: 0 14px 34px rgba(8, 28, 22, .10) !important;
  }

  .ue-reader-tabs {
    display: flex !important;
    align-items: stretch !important;
    height: 54px !important;
    border-bottom: 1px solid #bfc9c4 !important;
    background: #f4f4f4 !important;
  }

  .ue-reader-tabs span,
  .ue-reader-tabs b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 170px !important;
    padding: 0 26px !important;
    border-right: 1px solid #aeb8b3 !important;
    color: #07110f !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  .ue-reader-tabs span {
    color: #fff !important;
    background: #8f9bb2 !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .18) !important;
  }

  .ue-reader-tabs b {
    position: relative !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22) !important;
  }

  .ue-reader-sheet {
    overflow-x: auto !important;
    background: #fff !important;
  }

  .ue-finance-table {
    width: 100% !important;
    min-width: 760px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #07110f !important;
    font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
  }

  .ue-finance-head,
  .ue-finance-row {
    grid-template-columns: 98px minmax(300px, .9fr) minmax(360px, 1.1fr) !important;
    min-height: 28px !important;
    font-size: 15px !important;
  }

  .ue-finance-head {
    min-height: 40px !important;
    background: #fff !important;
  }

  .ue-finance-head b,
  .ue-finance-row span,
  .ue-finance-row strong,
  .ue-finance-row em {
    padding: 4px 8px !important;
    border-right: 1px solid #c7cfcb !important;
    border-bottom: 1px solid #c7cfcb !important;
    line-height: 1.25 !important;
    color: #07110f !important;
  }

  .ue-finance-head b {
    display: flex !important;
    align-items: center !important;
    font-weight: 950 !important;
    background: #fff !important;
  }

  .ue-finance-head b:nth-child(2) {
    font-size: 17px !important;
  }

  .ue-finance-head b:nth-child(3) {
    justify-content: center !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .ue-finance-row span {
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    font-weight: 950 !important;
  }

  .ue-finance-row strong {
    display: flex !important;
    align-items: center !important;
    background: #d9d9d9 !important;
    font-weight: 950 !important;
  }

  .ue-finance-row.income strong {
    background: #86df7c !important;
  }

  .ue-finance-row.expense strong {
    background: #d9d9d9 !important;
  }

  .ue-finance-row.ratio strong,
  .ue-finance-row.balance.ratio strong,
  .ue-finance-row.ratio.balance strong {
    background: #ffc400 !important;
    font-style: italic !important;
  }

  .ue-finance-row.balance strong {
    background: #b7cafa !important;
  }

  .ue-finance-row em {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    background: #fff !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-style: normal !important;
    font-weight: 850 !important;
  }

  .ue-finance-row.ratio em {
    font-style: italic !important;
  }

  .ue-finance-row.balance em {
    font-weight: 950 !important;
  }

  .store-ue-detail-card .ue-detail-advice {
    margin: 0 !important;
    padding: 16px 18px 18px !important;
    border: 0 !important;
    border-top: 1px solid rgba(7, 17, 15, .10) !important;
    border-radius: 0 !important;
    background: #f5f7f6 !important;
  }

  .store-ue-detail-card .ue-detail-advice b {
    color: #0b6f52 !important;
  }

  .store-ue-detail-card .ue-detail-advice p {
    color: rgba(7, 17, 15, .68) !important;
  }
}