/* AC 平台后台：Arctic Precision Console 蓝白设计基准（仅 platform shell 生效） */
body[data-shell="platform"] {
  --platform-canvas: #f3f7fb;
  --platform-canvas-strong: #eaf2f9;
  --bg: var(--platform-canvas);
  --bg-strong: #edf3f8;
  --panel: #ffffff;
  --text: #10233f;
  --text-button: #ffffff;
  --muted: #64748b;
  --weak: #8ba0b8;
  --line: #dbe5ef;
  --accent: #0b63ce;
  --accent-blue: #0b63ce;
  --blue: #0b63ce;
  --green: #0f9f6e;
  --warning: #d78a14;
  --danger: #d44949;
  --surface-panel: #ffffff;
  --surface-panel-strong: #ffffff;
  --surface-panel-muted: #f6f9fc;
  --surface-panel-deep: #f8fbfe;
  --surface-panel-deeper: #eef4fa;
  --surface-input: #ffffff;
  --surface-pill: #f3f7fb;
  --surface-action: #eef5ff;
  --surface-nav: #f7faff;
  --surface-track: #dfe9f3;
  --surface-ring-core: #ffffff;
  --surface-ring-core-strong: #ffffff;
  --surface-chart: #f8fbfe;
  --border-muted-soft: #e0e8f0;
  --border-muted-faint: #edf2f7;
  --border-muted-dashed-strong: #cbd8e6;
  --border-blue-strong: #8bb9ed;
  --overlay-blue: #edf5ff;
  --overlay-blue-strong: #e5f1ff;
  --overlay-teal: #ebfaf4;
  --overlay-amber: #fff7e8;
  --overlay-red: #fff0f0;
  --overlay-accent: #eaf4ff;
  --wash-blue: transparent;
  --wash-teal: transparent;
  --wash-amber: transparent;
  --wash-red: transparent;
  --wash-purple: transparent;
  --shadow: 0 8px 24px rgba(42, 72, 110, 0.07);
  --radius: 10px;
  color: var(--text);
  background: var(--platform-canvas);
  font-family: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}

body[data-shell="platform"][data-platform-brightness="bright"] {
  --platform-canvas: #f8fbff;
  --platform-canvas-strong: #f0f6fc;
  --line: #d5e1ed;
}

body[data-shell="platform"][data-platform-brightness="soft"] {
  --platform-canvas: #edf3f8;
  --platform-canvas-strong: #e5edf5;
  --panel: #fbfdff;
  --surface-panel: #fbfdff;
  --surface-panel-strong: #fbfdff;
}

body[data-shell="platform"] .platform-shell {
  --sidebar-width: 104px;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  height: 100vh;
  min-height: 100vh;
  background: var(--platform-canvas);
}

/* 平台五页的纵向滚动容器:body 锁视口,主列内滚,侧栏保持整屏固定。 */
body[data-shell="platform"] .platform-shell > .main {
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 租户详情抽屉左栏约 340px:四个守卫卡按 2x2 排,避免被压成一字一列。 */
body[data-shell="platform"] .tenant-profile-guards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-shell="platform"] .sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 100vh;
  overflow: hidden;
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  background: #ffffff;
  box-shadow: 8px 0 28px rgba(55, 81, 116, 0.05);
}

body[data-shell="platform"] .brand-row.compact {
  min-height: 66px;
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 0;
  padding: 0;
  background: transparent;
}

body[data-shell="platform"] .brand-row.compact > div:last-child {
  text-align: center;
}

body[data-shell="platform"] .brand-row.compact strong {
  display: block;
  color: #16365f;
  font-size: 11px;
  font-weight: 800;
}

body[data-shell="platform"] .brand-row.compact span {
  display: none;
}

body[data-shell="platform"] .brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  background: #0b63ce;
  box-shadow: 0 8px 18px rgba(11, 99, 206, 0.22);
  font-weight: 900;
}

body[data-shell="platform"] .side-nav {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

body[data-shell="platform"][data-platform-admin="true"] #platformNavGroup,
body[data-shell="platform"][data-platform-admin="true"] #customerDeliveryNavGroup,
body[data-shell="platform"][data-platform-admin="true"] #protocolTestLabNavGroup,
body[data-shell="platform"][data-platform-admin="true"] .platform-return-group {
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
}

body[data-shell="platform"] .nav-group-title,
body[data-shell="platform"] .platform-return-group .nav-group-title {
  display: none;
}

body[data-shell="platform"] .nav-box,
body[data-shell="platform"] .gate-box {
  display: grid;
  gap: 7px;
  border: 0;
  padding: 0;
  background: transparent;
}

body[data-shell="platform"] .side-nav button,
body[data-shell="platform"] .side-nav .gate-link {
  position: relative;
  width: 100%;
  min-height: 66px;
  display: grid;
  place-items: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 4px;
  color: #66788d;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

body[data-shell="platform"] .side-nav button:hover {
  color: #0b63ce;
  background: #f0f6fd;
}

body[data-shell="platform"] .side-nav button.active {
  border-color: #dceafb;
  color: #0b63ce;
  background: #edf5ff;
  box-shadow: none;
}

body[data-shell="platform"] .side-nav button.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 13px;
  bottom: 13px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #0b63ce;
}

body[data-shell="platform"] .side-nav button.active::after {
  content: none;
}

body[data-shell="platform"] .nav-icon,
body[data-shell="platform"] .gate-icon {
  display: block;
  color: inherit;
  font-size: 19px;
  line-height: 1;
}

body[data-shell="platform"] .nav-badge,
body[data-shell="platform"] .gate-tag,
body[data-shell="platform"] .gate-link small,
body[data-shell="platform"] .sidebar-platform-card,
body[data-shell="platform"] .sidebar-scrollbar {
  display: none !important;
}

body[data-shell="platform"][data-platform-admin="true"] .platform-return-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #edf2f7;
}

body[data-shell="platform"] .gate-top {
  display: grid;
  justify-items: center;
  gap: 4px;
}

body[data-shell="platform"] .main {
  min-width: 0;
  min-height: 100vh;
  overflow: visible;
  background: var(--platform-canvas);
}

body[data-shell="platform"] .topbar {
  position: sticky;
  top: 0;
  z-index: 24;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(214, 225, 237, 0.9);
  padding: 15px 28px;
  background: color-mix(in srgb, var(--platform-canvas) 91%, white);
  backdrop-filter: blur(16px);
}

body[data-shell="platform"] .topbar h2 {
  margin: 0;
  color: #10233f;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

body[data-shell="platform"] .breadcrumb {
  display: block;
  margin-top: 5px;
  color: #718399;
  font-size: 12px;
}

body[data-shell="platform"] .topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

body[data-shell="platform"] .project-switcher,
body[data-shell="platform"] .theme-label,
body[data-shell="platform"] .theme-dots {
  display: none !important;
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] .project-switcher {
  display: inline-flex !important;
}

body[data-shell="platform"] .ghost-button,
body[data-shell="platform"] .version-pill,
body[data-shell="platform"] .user-pill {
  min-height: 34px;
  border: 1px solid #d9e4ef;
  border-radius: 8px;
  padding: 0 11px;
  color: #52667e;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 4px 14px rgba(55, 81, 116, 0.04);
  font-size: 12px;
}

body[data-shell="platform"] .version-pill {
  color: #0b63ce;
  background: #edf5ff;
}

.platform-brightness {
  display: none;
}

body[data-shell="platform"] .platform-business-return { display: none; }

body[data-shell="platform"] .platform-brightness {
  display: flex;
  align-items: center;
  gap: 3px;
  border: 1px solid #dce5ef;
  border-radius: 9px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.82);
}

body[data-shell="platform"] .platform-brightness button {
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  color: #718399;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
}

body[data-shell="platform"] .platform-brightness button.active {
  color: #0b63ce;
  background: #e7f2ff;
  box-shadow: inset 0 0 0 1px #c9e1fb;
}

body[data-shell="platform"] .view-host {
  min-width: 0;
  padding: 18px 28px 42px;
}

body[data-shell="platform"] .platform-page {
  max-width: 1680px;
  margin: 0 auto;
  gap: 18px;
}

body[data-shell="platform"] .platform-page-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #dfe8f1;
  border-radius: 12px;
  padding: 17px 18px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

body[data-shell="platform"] .platform-page-intro h3 {
  margin: 3px 0 5px;
  color: #10233f;
  font-size: 18px;
  font-weight: 800;
}

body[data-shell="platform"] .platform-page-intro p {
  margin: 0;
  color: #6c7f95;
  font-size: 13px;
  line-height: 1.55;
}

body[data-shell="platform"] .platform-eyebrow {
  color: #0b63ce;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

body[data-shell="platform"] .kpi-grid.platform-kpi-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body[data-shell="platform"] .kpi {
  min-height: 126px;
  border: 1px solid #dfe7ef;
  border-radius: 10px;
  padding: 18px;
  color: #10233f;
  background: #ffffff;
  box-shadow: 0 7px 22px rgba(47, 76, 112, 0.055);
}

body[data-shell="platform"] .kpi::after {
  display: none;
}

body[data-shell="platform"] .kpi.good { border-top: 3px solid #2eaa82; }
body[data-shell="platform"] .kpi.warn,
body[data-shell="platform"] .kpi.amber { border-top: 3px solid #e1a13a; }
body[data-shell="platform"] .kpi.red { border-top: 3px solid #dc6666; }
body[data-shell="platform"] .kpi.purple { border-top: 3px solid #6f77d9; }

body[data-shell="platform"] .kpi-label {
  margin: 0;
  color: #61738a;
  font-size: 13px;
}

body[data-shell="platform"] .kpi-value {
  margin-top: 14px;
  color: #10233f;
  font-size: 31px;
  font-weight: 800;
}

body[data-shell="platform"] .kpi-value small {
  color: #6f8299;
  font-size: 12px;
}

body[data-shell="platform"] .kpi-note {
  margin-top: 10px;
  color: #7a8da3;
  font-size: 12px;
}

body[data-shell="platform"] .kpi-action {
  border-color: #c7ddf5;
  color: #0b63ce;
  background: #edf5ff;
}

body[data-shell="platform"] .panel {
  min-width: 0;
  overflow: visible;
  border: 1px solid #dfe8f1;
  border-radius: 12px;
  padding: 17px;
  color: #10233f;
  background: #ffffff;
  box-shadow: var(--shadow);
}

body[data-shell="platform"] .panel::before {
  content: none;
}

body[data-shell="platform"] .panel-title {
  min-height: 44px;
  align-items: center;
  margin-bottom: 13px;
}

body[data-shell="platform"] .panel-title h2,
body[data-shell="platform"][data-route="platform/overview"] .panel-title h2 {
  color: #142a47;
  font-size: 17px;
  font-weight: 800;
}

body[data-shell="platform"] .panel-title .sub,
body[data-shell="platform"][data-route="platform/overview"] .panel-title .sub {
  color: #74869b;
  font-size: 12px;
}

body[data-shell="platform"] .title-bar {
  width: 3px;
  height: 20px;
  min-height: 20px;
  border-radius: 3px;
  background: #0b63ce;
  box-shadow: none;
}

body[data-shell="platform"] .grid {
  gap: 14px;
}

body[data-shell="platform"] .badge {
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  color: #087653;
  background: #e8f7f1;
  font-size: 11px;
}

body[data-shell="platform"] .badge.blue { color: #0b63ce; background: #e8f2ff; }
body[data-shell="platform"] .badge.amber { color: #9a6209; background: #fff3db; }
body[data-shell="platform"] .badge.red { color: #bd4141; background: #ffeded; }
body[data-shell="platform"] .badge.purple { color: #5d55b9; background: #f0efff; }
body[data-shell="platform"] .badge.neutral { color: #66788d; background: #f1f5f9; }

body[data-shell="platform"] .btn {
  min-height: 34px;
  border: 1px solid #bfd6ee;
  border-radius: 8px;
  padding: 0 13px;
  color: #0b63ce;
  background: #edf5ff;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

body[data-shell="platform"] .btn:hover { border-color: #8bb9ed; background: #e2f0ff; }
body[data-shell="platform"] .btn.primary,
body[data-shell="platform"] .btn.green { border-color: #0b63ce; color: #fff; background: #0b63ce; }
body[data-shell="platform"] .btn.primary:hover,
body[data-shell="platform"] .btn.green:hover { background: #0756b5; }
body[data-shell="platform"] .btn.ghost { border-color: #d5e0eb; color: #52667e; background: #fff; }
body[data-shell="platform"] .btn.danger { border-color: #e2a2a2; color: #c43f3f; background: #fff2f2; }

body[data-shell="platform"] .alert-row,
body[data-shell="platform"] .todo-row,
body[data-shell="platform"] .audit-row {
  min-height: 54px;
  border: 1px solid #e1e8ef;
  border-radius: 9px;
  padding: 10px 12px;
  color: #1b3453;
  background: #fbfdff;
}

body[data-shell="platform"] .row-main,
body[data-shell="platform"][data-route="platform/overview"] .row-main {
  color: #233b58;
  font-size: 13px;
}

body[data-shell="platform"] .row-meta {
  color: #8293a7;
}

body[data-shell="platform"] .row-type { color: #9a6209; }
body[data-shell="platform"] .row-type.red { color: #c13f3f; }
body[data-shell="platform"] .row-type.blue { color: #0b63ce; }
body[data-shell="platform"] .row-type.green { color: #0b8a60; }

body[data-shell="platform"] .table {
  color: #233b58;
  font-size: 12px;
}

body[data-shell="platform"] .table th,
body[data-shell="platform"] .table td,
body[data-shell="platform"] .confirmed-platform-tenants .tenant-ledger-table th,
body[data-shell="platform"] .confirmed-platform-tenants .tenant-ledger-table td,
body[data-shell="platform"] .confirmed-platform-ops .ops-gateway-table th,
body[data-shell="platform"] .confirmed-platform-ops .ops-gateway-table td {
  height: auto;
  border-bottom: 1px solid #e6edf4;
  padding: 12px 10px;
  color: #233b58;
  background: transparent;
  font-size: 12px;
}

body[data-shell="platform"] .table th,
body[data-shell="platform"] .confirmed-platform-tenants .tenant-ledger-table th,
body[data-shell="platform"] .confirmed-platform-ops .ops-gateway-table th {
  color: #708298;
  background: #f7fafd;
  font-weight: 750;
}

body[data-shell="platform"] .table tbody tr:hover td { background: #f8fbfe; }

.platform-table-scroll {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.platform-simple-table { min-width: 720px; }
body[data-shell="platform"] .tenant-ledger-table {
  min-width: 760px;
}

body[data-shell="platform"] .confirmed-platform-tenants .tenant-ledger-table th,
body[data-shell="platform"] .confirmed-platform-tenants .tenant-ledger-table td {
  white-space: normal;
}

body[data-shell="platform"] .confirmed-platform-tenants .tenant-ledger-table th:last-child,
body[data-shell="platform"] .confirmed-platform-tenants .tenant-ledger-table td:last-child { width: 150px; }


body[data-shell="platform"] .platform-tabs,
body[data-shell="platform"] .confirmed-platform-plans .tabs,
body[data-shell="platform"] .confirmed-platform-tenants .tenant-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  margin: 0 0 14px;
  padding-bottom: 2px;
}

body[data-shell="platform"] .tab,
body[data-shell="platform"] .confirmed-platform-plans .tab,
body[data-shell="platform"] .confirmed-platform-tenants .tenant-tabs .tab {
  min-width: max-content;
  height: 34px;
  min-height: 34px;
  border: 1px solid #dce5ee;
  border-radius: 999px;
  padding: 0 14px;
  color: #65788e;
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

body[data-shell="platform"] .tab.active,
body[data-shell="platform"] .confirmed-platform-plans .tab.active,
body[data-shell="platform"] .confirmed-platform-tenants .tenant-tabs .tab.active {
  border-color: #91bcea;
  color: #0b63ce;
  background: #eaf4ff;
  box-shadow: none;
}

.platform-tab-panel[hidden],
.platform-drawer[hidden],
[data-platform-filter-row][hidden],
[data-platform-search-row][hidden] {
  display: none !important;
}

details.platform-advanced:not([open]) > .platform-advanced-body {
  display: none !important;
}

body[data-shell="platform"] .platform-tab-panel {
  min-width: 0;
}

body[data-shell="platform"] .ring {
  min-height: 144px;
  border: 1px solid #e0e8ef;
  border-radius: 10px;
  background: #f9fbfd;
}

body[data-shell="platform"] .ring-core {
  background:
    radial-gradient(circle at center, #ffffff 0 54%, transparent 55%),
    conic-gradient(var(--ring-color) 0 var(--ring-value), #dfe8f1 var(--ring-value) 100%);
}

body[data-shell="platform"] .ring span { color: #6f8297; }

body[data-shell="platform"] .combo-chart,
body[data-shell="platform"] .trend-stat,
body[data-shell="platform"] .income-summary {
  border-color: #e0e8ef;
  background: #f9fbfd;
}

body[data-shell="platform"] .trend-line circle { fill: #ffffff; }

body[data-shell="platform"] .onboard-summary.platform-summary-four,
body[data-shell="platform"] .confirmed-platform-onboarding .onboard-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body[data-shell="platform"] .summary-cell,
body[data-shell="platform"] .confirmed-platform-plans .summary-cell,
body[data-shell="platform"] .confirmed-platform-onboarding .summary-cell {
  min-height: 98px;
  height: auto;
  border: 1px solid #dfe8f1;
  border-radius: 10px;
  padding: 14px;
  color: #173250;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(47, 76, 112, 0.045);
}

body[data-shell="platform"] .summary-cell label { color: #65788e; }
body[data-shell="platform"] .summary-cell strong { color: #10233f; }
body[data-shell="platform"] .summary-cell span,
body[data-shell="platform"] .confirmed-platform-onboarding .summary-cell span { color: #8091a5; }

body[data-shell="platform"] .plan-grid,
body[data-shell="platform"] .confirmed-platform-plans .plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body[data-shell="platform"] .plan,
body[data-shell="platform"] .confirmed-platform-plans .plan {
  min-height: 286px;
  border: 1px solid #dfe7ef;
  border-radius: 11px;
  padding: 17px;
  color: #15304d;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(47, 76, 112, 0.055);
}

body[data-shell="platform"] .plan.hot,
body[data-shell="platform"] .confirmed-platform-plans .plan.hot {
  border-color: #8dbbec;
  background: #fbfdff;
  box-shadow: 0 10px 26px rgba(11, 99, 206, 0.1);
}

body[data-shell="platform"] .plan.selfhosted { border-color: #e6c784; }
body[data-shell="platform"] .plan h3 { color: #17304d; }
body[data-shell="platform"] .plan-price { color: #0b63ce; }
body[data-shell="platform"] .confirmed-platform-plans .plan ul { color: #60758c; }
body[data-shell="platform"] .confirmed-platform-plans .plan li { border-color: #e6edf4; }

body[data-shell="platform"] input,
body[data-shell="platform"] select,
body[data-shell="platform"] textarea,
body[data-shell="platform"] .fake-input,
body[data-shell="platform"] .fake-area,
body[data-shell="platform"] .input {
  border: 1px solid #d6e1ec;
  border-radius: 8px;
  color: #1d3754;
  background: #ffffff;
}

body[data-shell="platform"] input:focus,
body[data-shell="platform"] select:focus,
body[data-shell="platform"] textarea:focus {
  border-color: #76aee7;
  outline: 3px solid rgba(11, 99, 206, 0.11);
}

.platform-search-field {
  min-width: 260px;
  display: grid;
  gap: 4px;
  color: #6b7e94;
  font-size: 11px;
}

.platform-search-field input {
  min-height: 36px;
  padding: 0 11px;
}

body[data-shell="platform"] .confirmed-platform-tenants .tenant-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 9px;
}

body[data-shell="platform"] .confirmed-platform-tenants .quota { color: #66788d; }
body[data-shell="platform"] .confirmed-platform-tenants .qbar { background: #dfe8f1; }
body[data-shell="platform"] .confirmed-platform-tenants .qbar span { background: #0b63ce; }

.platform-advanced {
  min-width: 0;
  overflow: clip;
  border: 1px solid #dce6f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(47, 76, 112, 0.045);
}

.platform-advanced > summary {
  min-height: 64px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #193552;
  cursor: pointer;
  list-style: none;
}

.platform-advanced > summary::-webkit-details-marker { display: none; }
.platform-advanced[open] > summary {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid #e5edf5;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(47, 76, 112, 0.055);
}


.platform-advanced > summary::after {
  content: "+";
  grid-column: 3;
  grid-row: 1;
  color: #0b63ce;
  font-size: 22px;
  font-weight: 400;
}

.platform-advanced[open] > summary::after { content: "−"; }

.platform-advanced > summary span {
  border-radius: 999px;
  padding: 5px 8px;
  color: #0b63ce;
  background: #eaf4ff;
  font-size: 10px;
  font-weight: 800;
}

.platform-advanced > summary strong { font-size: 14px; }
.platform-advanced > summary small { grid-column: 2; color: #7a8ca1; font-size: 11px; }
.platform-advanced-body { min-width: 0; border-top: 1px solid #e5edf5; padding: 16px; }

.platform-detail-tabset {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.platform-detail-tabset > .tabs { margin-bottom: 0; }
.platform-detail-tabset > .platform-tab-panel { min-width: 0; }
.platform-detail-tabset > .platform-tab-panel > .grid {
  margin: 0;
}

body[data-shell="platform"] .mode-card,
body[data-shell="platform"] .branch-card,
body[data-shell="platform"] .branch-step,
body[data-shell="platform"] .guard-card,
body[data-shell="platform"] .device-card,
body[data-shell="platform"] .ready-item,
body[data-shell="platform"] .evidence-card,
body[data-shell="platform"] .tenant-card {
  border: 1px solid #dfe8f1;
  border-radius: 9px;
  color: #233b58;
  background: #f9fbfd;
}

body[data-shell="platform"] .mode-card.active,
body[data-shell="platform"] .branch-card.active,
body[data-shell="platform"] .evidence-card.active,
body[data-shell="platform"] .tenant-card.active {
  border-color: #8bb9ed;
  background: #edf6ff;
}

body[data-shell="platform"] .mode-card.warn,
body[data-shell="platform"] .branch-card.warn,
body[data-shell="platform"] .guard-card.warn { border-color: #e7c780; background: #fffaf1; }
body[data-shell="platform"] .guard-card.ok,
body[data-shell="platform"] .confirmed-platform-ops .guard-card.ok { border-color: #9bd6c1; background: #f1fbf7; }
body[data-shell="platform"] .summary-cell strong,
body[data-shell="platform"] .device-card strong,
body[data-shell="platform"] .guard-card strong,
body[data-shell="platform"] .evidence-card strong { color: #173250; }

body[data-shell="platform"] .stepper {
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  overflow-x: auto;
  margin-top: 14px;
  padding-bottom: 4px;
}

body[data-shell="platform"] .step {
  border: 1px solid #dfe8f1;
  border-radius: 9px;
  color: #203c5a;
  background: #f9fbfd;
}

body[data-shell="platform"] .step.done,
body[data-shell="platform"] .step.active { border-color: #7eb3e9; background: #edf6ff; }
body[data-shell="platform"] .step-num { color: #fff; background: #0b63ce; }

body[data-shell="platform"] .onboarding-create-form,
body[data-shell="platform"] .onboarding-action-form,
body[data-shell="platform"] .plans-create-form,
body[data-shell="platform"] .step-inline-form {
  border: 1px solid #dce6f0;
  border-radius: 10px;
  color: #213b58;
  background: #f8fbfe;
}

body[data-shell="platform"] .onboarding-create-form,
body[data-shell="platform"] .plans-create-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  padding: 14px;
}

body[data-shell="platform"] .onboarding-create-form button,
body[data-shell="platform"] .plans-create-form button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #0b63ce;
}
.tenant-next-action {
  width: min(760px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  padding: 24px;
}

.tenant-next-action > .btn {
  justify-self: start;
}

.tenant-contract-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
}

.tenant-contract-form .btn {
  min-height: 40px;
}

.onboarding-guide {
  width: min(720px, 100%);
  margin: 0 auto;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 10px 0 28px;
}

.onboarding-guide-progress {
  display: grid;
  gap: 10px;
}

.onboarding-guide-progress > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: #6f8298;
  font-size: 12px;
}

.onboarding-guide-progress strong {
  color: #173250;
  font-size: 16px;
}

.onboarding-guide-progress progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: #0b63ce;
  background: #dfe9f3;
}

.onboarding-guide-progress progress::-webkit-progress-bar { background: #dfe9f3; }
.onboarding-guide-progress progress::-webkit-progress-value { background: #0b63ce; }
.onboarding-guide-progress progress::-moz-progress-bar { background: #0b63ce; }

.onboarding-guide-context {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #6f8298;
  font-size: 12px;
}

.onboarding-guide-context strong {
  color: #173250;
  font-size: 13px;
}

.onboarding-guide-context span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding-current-task {
  min-height: 300px;
  display: grid;
  align-content: center;
  gap: 18px;
  border: 1px solid #dce6f0;
  border-radius: 14px;
  padding: 34px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(35, 65, 98, 0.06);
}

.onboarding-current-task h2 {
  margin: 0;
  color: #173250;
  font-size: 26px;
}

.onboarding-guided-form {
  display: grid;
  gap: 14px;
}

.onboarding-guided-form label {
  display: grid;
  gap: 7px;
  color: #61768e;
  font-size: 12px;
}

.onboarding-guided-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d4e0ec;
  border-radius: 9px;
  padding: 0 12px;
  color: #173250;
  background: #fff;
}

.onboarding-guided-form select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d4e0ec;
  border-radius: 9px;
  padding: 0 12px;
  color: #173250;
  background: #fff;
}

.onboarding-new-project-fields {
  display: grid;
  gap: 14px;
}

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

.onboarding-period-controls label span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  gap: 8px;
}

.onboarding-period-controls input,
.onboarding-period-controls select {
  min-width: 0;
}

.onboarding-project-reuse-note {
  margin: -4px 0 2px;
  color: #6f8298;
  font-size: 12px;
  line-height: 1.6;
}

.onboarding-entitlement-replace {
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  border: 1px solid #efc36b;
  border-radius: 10px;
  padding: 12px;
  background: #fff9ec;
}

.onboarding-entitlement-replace input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.onboarding-entitlement-replace span,
.onboarding-entitlement-replace small {
  grid-column: 2;
}

.onboarding-entitlement-replace span {
  color: #173250;
  font-weight: 700;
}

.onboarding-entitlement-replace small {
  color: #6f5a2d;
  line-height: 1.5;
}

.onboarding-guided-form button,
.onboarding-step-actions button {
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: #0b63ce;
}

.onboarding-step-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.onboarding-step-actions form,
.onboarding-step-actions form button {
  width: 100%;
}

.onboarding-step-actions .btn.ghost {
  border: 1px solid #b9cee3;
  color: #22517f;
  background: #f7fbff;
}

.onboarding-existing-project-recovery {
  display: grid;
  gap: 10px;
  border: 1px solid #efc36b;
  border-radius: 12px;
  padding: 18px;
  background: #fff9ec;
}

.onboarding-existing-project-recovery h3,
.onboarding-existing-project-recovery p {
  margin: 0;
}

.onboarding-existing-project-recovery h3 {
  color: #173250;
  font-size: 18px;
}

.onboarding-existing-project-recovery p {
  color: #6f5a2d;
  font-size: 13px;
}

.onboarding-existing-project-recovery .btn {
  justify-self: start;
  min-height: 42px;
}

.onboarding-blocker-diagnostic {
  display: grid;
  gap: 12px;
  border: 1px solid #ef6b6b;
  border-radius: 12px;
  padding: 18px;
  background: #fff5f5;
}

.onboarding-blocker-diagnostic h3,
.onboarding-blocker-diagnostic p,
.onboarding-blocker-diagnostic dl {
  margin: 0;
}

.onboarding-blocker-diagnostic h3 {
  color: #8a1f1f;
  font-size: 18px;
}

.onboarding-blocker-diagnostic dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.onboarding-blocker-diagnostic dt {
  color: #8a6a6a;
  font-size: 12px;
}

.onboarding-blocker-diagnostic dd {
  margin: 4px 0 0;
  color: #173250;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.onboarding-blocker-diagnostic p {
  color: #6f3434;
  font-size: 13px;
  line-height: 1.6;
}

.onboarding-blocker-diagnostic .btn {
  justify-self: start;
}

.onboarding-final-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.onboarding-commercial-repair {
  display: grid;
  gap: 10px;
  border-top: 1px solid #f1c7c7;
  padding-top: 14px;
}

.onboarding-commercial-repair label {
  display: grid;
  gap: 6px;
  color: #5e3434;
  font-size: 13px;
}

.onboarding-commercial-repair select {
  min-height: 38px;
  border: 1px solid #d9b7b7;
  border-radius: 8px;
  padding: 0 10px;
  color: #213b58;
  background: #fff;
}

.onboarding-commercial-repair-choice {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
}

.onboarding-commercial-repair .btn {
  justify-self: start;
}

.onboarding-commercial-repair-empty,
.onboarding-plan-creation-note {
  border: 1px solid #cbd9e8;
  border-radius: 12px;
  background: #f8fbff;
  padding: 14px;
  color: #2d4c69;
}

.onboarding-commercial-repair-empty p,
.onboarding-plan-creation-note {
  margin: 0 0 10px;
}

.onboarding-final-checks span {
  border-radius: 999px;
  padding: 7px 11px;
  color: #167354;
  background: #eaf8f2;
  font-size: 12px;
}

.onboarding-task-success,
.onboarding-task-complete {
  border-color: #a8d9c6;
  background: #f5fcf9;
}

.onboarding-task-complete {
  justify-items: center;
  text-align: center;
}

.onboarding-task-complete p {
  margin: 0;
  color: #61768e;
}

@media (max-width: 720px) {
  .tenant-next-action {
    width: 100%;
    padding: 18px;
  }

  .tenant-next-action > .btn {
    justify-self: stretch;
  }

  .tenant-contract-form {
    grid-template-columns: 1fr;
  }

  .tenant-contract-form .btn {
    width: 100%;
  }

  .onboarding-guide { padding-top: 0; }
  .onboarding-current-task { min-height: 0; padding: 24px 18px; }
  .onboarding-step-actions { grid-template-columns: 1fr; }
}

.platform-empty-compact {
  border: 1px dashed #cbd9e7;
  border-radius: 10px;
  padding: 28px;
  color: #718399;
  background: #f8fbfe;
  text-align: center;
}

.ops-chain {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.ops-chain-node {
  position: relative;
  min-width: 0;
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 7px;
  border: 1px solid #dfe7ef;
  border-radius: 10px;
  padding: 14px;
  color: #233b58;
  background: #f9fbfd;
}

.ops-chain-node:not(:last-child)::after {
  content: "›";
  position: absolute;
  right: -14px;
  top: 34px;
  color: #9eb1c5;
  font-size: 24px;
}

.ops-chain-node span { color: #687b91; font-size: 11px; }
.ops-chain-node strong { color: #173250; font-size: 18px; }
.ops-chain-node small { color: #8192a5; font-size: 11px; }
.ops-chain-node.ok { border-top: 3px solid #2eaa82; }
.ops-chain-node.warn { border-top: 3px solid #e1a13a; background: #fffaf2; }

.platform-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 48vw);
}

.platform-drawer-backdrop {
  grid-column: 1 / -1;
  grid-row: 1;
  background: rgba(15, 31, 56, 0.34);
}

.platform-drawer-panel {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-self: end;
  height: 100dvh;
  overflow: hidden;
  border-left: 1px solid #d8e3ee;
  background: #f4f8fc;
  box-shadow: -24px 0 50px rgba(24, 50, 82, 0.16);
}

.platform-drawer-panel.platform-drawer-medium { max-width: 680px; }
.platform-drawer-panel.platform-drawer-wide { width: min(1120px, 72vw); max-width: none; }

.platform-drawer.platform-task-layer {
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 28px;
}

.platform-task-layer .platform-drawer-backdrop {
  position: absolute;
  inset: 0;
}

.platform-task-layer .platform-drawer-panel {
  grid-column: 1;
  justify-self: center;
  align-self: center;
  width: min(1180px, calc(100vw - 56px));
  max-width: 1180px;
  height: min(900px, calc(100vh - 56px));
  height: min(900px, calc(100dvh - 56px));
  max-height: calc(100dvh - 56px);
  border: 1px solid #d8e3ee;
  border-radius: 16px;
}

.platform-task-layer .platform-task-panel-compact {
  width: min(760px, calc(100vw - 56px));
  max-width: 760px;
}

.platform-drawer-header {
  min-height: 88px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #dce6f0;
  padding: 17px 20px;
  background: #ffffff;
}

.platform-drawer-header span { color: #0b63ce; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; }
.platform-drawer-header h3 { margin: 4px 0; color: #10233f; font-size: 20px; }
.platform-drawer-header p { margin: 0; color: #72849a; font-size: 12px; }

.platform-drawer-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid #d8e3ee;
  border-radius: 9px;
  color: #5c7087;
  background: #ffffff;
  cursor: pointer;
  font-size: 22px;
}

.platform-drawer-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-padding-block: 16px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #9db3c9 transparent;
  touch-action: pan-y;
  padding: 18px;
}

.platform-drawer-body::-webkit-scrollbar { width: 10px; }
.platform-drawer-body::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: #9db3c9;
  background-clip: padding-box;
}

body[data-shell="platform"].platform-drawer-visible .platform-shell > .main { overflow: hidden; }

body.platform-drawer-visible { overflow: hidden; }

body[data-shell="platform"] .impersonation-banner {
  border-color: #e4aaaa;
  color: #8f2f2f;
  background: #fff1f1;
}

body[data-shell="platform"] .global-impersonation-banner #impersonationEndButton {
  border-color: #9f1d20;
  color: #fff;
  background: #9f1d20;
}

body[data-shell="platform"] .float-tools { display: none; }

body[data-shell="platform"] :is(button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(11, 99, 206, 0.22);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  body[data-shell="platform"] .platform-shell { --sidebar-width: 86px; }
  body[data-shell="platform"] .topbar { padding-inline: 18px; }
  body[data-shell="platform"] .view-host { padding-inline: 18px; }
  body[data-shell="platform"] .kpi-grid.platform-kpi-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-shell="platform"] .plan-grid,
  body[data-shell="platform"] .confirmed-platform-plans .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-shell="platform"] .onboard-summary.platform-summary-four,
  body[data-shell="platform"] .confirmed-platform-onboarding .onboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-shell="platform"] .ops-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-shell="platform"] .ops-chain-node:nth-child(3)::after { content: none; }
  .platform-drawer-panel.platform-drawer-wide { width: min(900px, 82vw); }
}

@media (max-width: 720px) {
  body[data-shell="platform"] { --platform-mobile-nav-height: 120px; }

  body[data-shell="platform"] .platform-shell,
  body[data-shell="platform"] .platform-shell[hidden="false"] {
    display: block;
    min-height: 100vh;
  }

  body[data-shell="platform"] .sidebar {
    position: fixed;
    inset: auto 0 0;
    z-index: 50;
    width: auto;
    height: var(--platform-mobile-nav-height);
    display: block;
    overflow: visible;
    border: 0;
    border-top: 1px solid #d9e4ef;
    padding: 7px 8px;
    box-shadow: 0 -10px 30px rgba(41, 68, 102, 0.09);
  }

  body[data-shell="platform"] .brand-row.compact { display: none; }
  body[data-shell="platform"][data-platform-admin="true"] .platform-return-group {
    display: block;
    margin: 4px 0 0;
    padding: 4px 0 0;
    border-top: 1px solid #edf2f7;
  }
  body[data-shell="platform"][data-platform-admin="true"] .platform-return-group .gate-box { display: block; }
  body[data-shell="platform"][data-platform-admin="true"] .platform-return-group .gate-link[data-route="operations"] { display: none; }
  body[data-shell="platform"][data-platform-admin="true"] #impersonationStartButton {
    width: 100%;
    min-height: 42px;
    padding: 6px 10px;
  }
  body[data-shell="platform"][data-platform-admin="true"] #impersonationStartButton .gate-top {
    display: flex;
    justify-content: center;
    gap: 7px;
  }
  body[data-shell="platform"][data-platform-admin="true"] #impersonationStartButton small { display: none; }
  body[data-shell="platform"] .side-nav { margin: 0; }
  body[data-shell="platform"][data-platform-admin="true"] #platformNavGroup { margin: 0; }
  body[data-shell="platform"][data-platform-admin="true"] #platformNavGroup .nav-box {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
  }

  body[data-shell="platform"] .side-nav button {
    min-height: 57px;
    border-radius: 9px;
    padding: 5px 2px;
    font-size: 10px;
  }

  body[data-shell="platform"] .side-nav button.active::before {
    inset: -7px 18px auto;
    width: auto;
    height: 3px;
    border-radius: 0 0 3px 3px;
  }

  body[data-shell="platform"] .nav-icon { font-size: 17px; }
  body[data-shell="platform"] .main { padding-bottom: var(--platform-mobile-nav-height); }

  body[data-shell="platform"] .topbar {
    min-height: 92px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
  }

  body[data-shell="platform"] .topbar h2 { font-size: 20px; }
  body[data-shell="platform"] .breadcrumb { font-size: 11px; }
  body[data-shell="platform"] .topbar-actions { width: 100%; justify-content: flex-start; overflow-x: auto; }
  body[data-shell="platform"] .topbar-actions > .user-pill,
  body[data-shell="platform"] .topbar-actions > #exportButton { display: none; }
  body[data-shell="platform"] .platform-business-return { display: inline-flex; }
  body[data-shell="platform"] .platform-brightness button { padding-inline: 8px; }
  body[data-shell="platform"] .view-host { padding: 14px 12px 26px; }
  body[data-shell="platform"] .platform-page { gap: 12px; }

  body[data-shell="platform"] .platform-page-intro {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }

  body[data-shell="platform"] .platform-page-intro h3 { font-size: 16px; }
  body[data-shell="platform"] .platform-page-intro .btn { width: 100%; }
  body[data-shell="platform"] .kpi-grid.platform-kpi-four { gap: 10px; }
  body[data-shell="platform"] .kpi { min-height: 112px; padding: 14px; }
  body[data-shell="platform"] .kpi-value { margin-top: 10px; font-size: 25px; }
  body[data-shell="platform"] .panel { padding: 14px; }

  body[data-shell="platform"] .span-8,
  body[data-shell="platform"] .span-7,
  body[data-shell="platform"] .span-6,
  body[data-shell="platform"] .span-5,
  body[data-shell="platform"] .span-4,
  body[data-shell="platform"] .span-3 { grid-column: 1 / -1; }

  body[data-shell="platform"] .alert-row { grid-template-columns: 58px minmax(0, 1fr); gap: 7px; }
  body[data-shell="platform"] .alert-row .row-meta,
  body[data-shell="platform"] .alert-row .row-actions,
  body[data-shell="platform"] .alert-row > .btn { grid-column: 2; justify-self: start; }
  body[data-shell="platform"] .todo-row { grid-template-columns: 58px minmax(0, 1fr); }
  body[data-shell="platform"] .todo-row .row-meta { grid-column: 2; text-align: left; }
  body[data-shell="platform"] .row-main { white-space: normal; }

  body[data-shell="platform"] .trend-wrap { grid-template-columns: 1fr; }
  body[data-shell="platform"] .combo-chart { min-height: 230px; }
  body[data-shell="platform"] .ring-grid { grid-template-columns: 1fr; }
  body[data-shell="platform"] .ring { min-height: 126px; }
  body[data-shell="platform"] .plan-grid,
  body[data-shell="platform"] .confirmed-platform-plans .plan-grid { grid-template-columns: 1fr; }
  body[data-shell="platform"] .onboard-summary.platform-summary-four,
  body[data-shell="platform"] .confirmed-platform-onboarding .onboard-summary { grid-template-columns: 1fr; }
  body[data-shell="platform"] .summary-cell,
  body[data-shell="platform"] .confirmed-platform-plans .summary-cell,
  body[data-shell="platform"] .confirmed-platform-onboarding .summary-cell { min-height: 86px; }
  body[data-shell="platform"] .billing-mode-grid,
  body[data-shell="platform"] .branch-grid,
  body[data-shell="platform"] .guard-grid,
  body[data-shell="platform"] .device-grid,
  body[data-shell="platform"] .evidence-grid,
  body[data-shell="platform"] .form-grid { grid-template-columns: 1fr; }
  body[data-shell="platform"] .ops-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body[data-shell="platform"] .ops-chain-node::after { content: none !important; }
  body[data-shell="platform"] .tenant-toolbar { width: 100%; align-items: stretch; flex-direction: column; }
  body[data-shell="platform"] .platform-search-field { min-width: 0; width: 100%; }
  body[data-shell="platform"] .onboarding-create-form,
  body[data-shell="platform"] .plans-create-form,
  body[data-shell="platform"] .onboarding-action-form,
  body[data-shell="platform"] .step-inline-form form { grid-template-columns: 1fr; }

  .platform-advanced > summary {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    gap: 8px;
    padding: 11px 12px;
  }

  .platform-advanced > summary small { display: none; }
  .platform-drawer { display: block; }
  .platform-drawer-panel,
  .platform-drawer-panel.platform-drawer-medium,
  .platform-drawer-panel.platform-drawer-wide {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    border: 0;
  }
  .platform-drawer-header { min-height: 80px; padding: 14px; }
  .platform-drawer-header h3 { font-size: 18px; }
  .platform-drawer-body { padding: 13px; }
}
@media (max-width: 720px) {
  .platform-task-layer .platform-drawer-panel,
  .platform-task-layer .platform-task-panel-compact {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
}

@media (max-width: 430px) {
  body[data-shell="platform"] .kpi-grid.platform-kpi-four { grid-template-columns: 1fr; }
  body[data-shell="platform"] .kpi-label { font-size: 11px; }
  body[data-shell="platform"] .kpi-note { font-size: 10px; }
  body[data-shell="platform"] .kpi-value { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-shell="platform"] *,
  body[data-shell="platform"] *::before,
  body[data-shell="platform"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* UI-2026.07.29.03: keep the preserved smart-box workflow inside the platform light theme. */
body[data-shell="platform"][data-route="platform/smart-box-onboarding"] {
  background: var(--platform-canvas);
  color: var(--text);
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] .main {
  background: var(--platform-canvas);
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page {
  --txt: var(--text);
  --mut: var(--muted);
  color: var(--text);
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page :is(
  .smartbox-hero,
  .smartbox-function-row,
  .smartbox-panel:not(.smartbox-result-panel)
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
  background-image: none;
  box-shadow: var(--shadow);
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page :is(
  .smartbox-stats > div,
  .smartbox-review > div,
  .smartbox-step,
  .smartbox-discovery-row,
  .smartbox-unit,
  .smartbox-meter-row,
  .smartbox-column-card,
  .smartbox-links > a,
  .smartbox-stage-trail > span:not(.current)
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-panel-muted);
  background-image: none;
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page :is(
  .pt,
  h3,
  .smartbox-stats b,
  .smartbox-column-card b,
  .smartbox-quiet-task b,
  .smartbox-discovery-row b,
  .smartbox-unit b,
  .smartbox-review b,
  .smartbox-result-table b
) {
  color: var(--text);
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page :is(
  .mut,
  .smartbox-note,
  .smartbox-function-note,
  .smartbox-column-card small,
  .smartbox-column-card span,
  .smartbox-discovery-row small,
  .smartbox-review small,
  .smartbox-result-table small
) {
  color: var(--muted);
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page .smartbox-stage-trail > span.done {
  border-color: #a8d9c6;
  color: #087653;
  background: #e8f7f1;
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page .smartbox-step.done {
  border-color: #a8d9c6;
  background: #f5fcf9;
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page .smartbox-step.active {
  border-color: #efc36b;
  background: #fff9ec;
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page .smartbox-poll {
  border-color: #a8d9c6;
  color: #1d5f4d;
  background: #f5fcf9;
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page :is(
  .smartbox-poll b,
  .smartbox-discovery-row span
) {
  color: #087653;
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page .smartbox-links > a {
  color: var(--accent);
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page .btn:not(.pri):not(.active) {
  border-color: #bfd6ee;
  color: var(--accent);
  background: #edf5ff;
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page .tag {
  color: #0b63ce;
  background: #e8f2ff;
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page .tag.g {
  color: #087653;
  background: #e8f7f1;
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smart-box-page .tag.w {
  color: #9a6209;
  background: #fff3db;
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smartbox-delivery-prerequisite {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 22px;
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smartbox-delivery-prerequisite h3 {
  margin: 14px 0 8px;
  font-size: 20px;
}

body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smartbox-delivery-prerequisite p {
  max-width: 68ch;
  margin: 8px 0 0;
  line-height: 1.7;
}

@media (max-width: 767px) {
  body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smartbox-task-stage .smartbox-unit {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-shell="platform"][data-route="platform/smart-box-onboarding"] #viewHost .smartbox-task-stage .smartbox-source {
    grid-column: 1 / -1;
  }
}