:root {
  color-scheme: light;
  --bg: #eef1f4;
  --surface: #ffffff;
  --surface-soft: #f5f7fa;
  --surface-red: #fff1f2;
  --line: #dfe4ea;
  --line-strong: #cbd3dc;
  --text: #16202a;
  --muted: #5d6a78;
  --subtle: #7a8794;
  --primary: #c91624;
  --primary-strong: #9f111d;
  --gold: #a76513;
  --green: #17724a;
  --blue: #2565aa;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-soft: 0 10px 12px rgba(22, 32, 42, 0.08);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 25px;
  line-height: 1.16;
  letter-spacing: 0;
  text-wrap: balance;
}

h2 {
  font-size: 17px;
  line-height: 1.26;
  letter-spacing: 0;
}

.page-shell {
  min-height: 100vh;
}

.embed-preview-root {
  min-height: 100vh;
  background: #fff;
}

.mobile-embed {
  display: block;
}

.embed-phone-frame {
  width: 100%;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.embed-mobile-scroll {
  padding: 10px 14px 18px;
}

.embed-mobile-scroll .mobile-header {
  margin-top: 0;
}

.admin-embed {
  background: var(--bg);
}

.embed-admin-workspace {
  min-height: 100vh;
  padding: 18px;
}

.admin-order-workbench,
.admin-ticket-workbench {
  align-items: stretch;
}

.orders-table-panel,
.admin-ticket-workbench .orders-table-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.table-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.compact-filter-row {
  margin-top: 10px;
  margin-bottom: 12px;
}

.orders-table-shell {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.admin-orders-table {
  min-width: 100%;
  height: 100%;
}

.admin-tickets-table .admin-table-head,
.admin-orders-table .admin-table-head {
  display: grid;
  grid-template-columns: 1.15fr 1.1fr 0.8fr 0.8fr 0.85fr 1.1fr 0.55fr;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.admin-tickets-table .admin-table-head {
  grid-template-columns: 1.2fr 1fr 0.7fr 0.7fr 0.8fr 0.95fr;
}

.admin-table-row {
  display: grid;
  grid-template-columns: 1.15fr 1.1fr 0.8fr 0.8fr 0.85fr 1.1fr 0.55fr;
  gap: 8px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.admin-tickets-table .admin-table-row {
  grid-template-columns: 1.2fr 1fr 0.7fr 0.7fr 0.8fr 0.95fr;
}

.admin-table-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.admin-table-row.is-urgent {
  background: var(--surface-red);
}

.admin-table-row span b {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(201, 22, 36, 0.08);
  color: var(--primary);
  font-size: 12px;
}

.admin-ticket-workbench .generic-admin-side,
.admin-order-workbench .generic-admin-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mobile-shell {
  display: flex;
  justify-content: center;
  padding: 14px;
}

.phone-frame {
  width: min(100%, 430px);
  min-height: calc(100vh - 28px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.status-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 18px 8px;
  color: var(--muted);
  font-size: 12px;
}

.status-row strong {
  color: var(--primary);
}

.mobile-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 16px 20px;
}

.mobile-header,
.admin-header,
.section-title,
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mobile-header {
  margin: 4px 0 14px;
}

.mobile-header > div,
.admin-header > div,
.table-toolbar > div {
  min-width: 0;
}

.context-line {
  margin: 0 0 5px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.state-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font-size: 12px;
  font-weight: 800;
}

.state-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.state-dot-warn::before {
  background: #ffd166;
}

.ui-icon,
.nav-svg,
.button-svg,
.card-svg,
.mini-svg {
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) no-repeat center / contain;
  mask: var(--icon-url) no-repeat center / contain;
}

.nav-svg {
  width: 20px;
  height: 20px;
}

.button-svg,
.card-svg {
  width: 16px;
  height: 16px;
}

.mini-svg {
  width: 14px;
  height: 14px;
}

.with-icon,
.with-inline-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.button-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ghost-button,
.primary-button,
.secondary-button,
.admin-actions a,
.admin-actions button,
.table-toolbar button,
.admin-command-strip a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.ghost-button,
.secondary-button,
.admin-actions button {
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--primary);
}

.primary-button,
.admin-actions a,
.table-toolbar button,
.admin-command-strip a {
  padding: 0 14px;
  background: var(--primary);
  color: #fff;
}

.user-command-card,
.owner-status-panel,
.event-command-panel,
.pending-command-panel,
.admin-command-strip {
  border-radius: var(--radius-lg);
  background: var(--primary);
  color: #fff;
}

.user-command-card,
.event-command-panel,
.pending-command-panel {
  padding: 16px;
}

.command-copy {
  display: grid;
  gap: 8px;
}

.command-copy p,
.owner-status-panel p,
.event-command-panel p,
.pending-command-panel p,
.admin-command-strip p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.55;
  text-wrap: pretty;
}

.command-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.user-command-card .secondary-button,
.owner-status-panel .primary-button,
.event-command-panel .primary-button,
.pending-command-panel .primary-button {
  border-color: transparent;
  background: #fff;
  color: var(--primary);
}

.event-command-panel,
.pending-command-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 12px;
}

.pool-command-panel,
.printing-command-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #b91221 0%, #7f0f19 100%);
  color: #fff;
}

.pool-command-panel h2,
.printing-command-panel h2 {
  margin: 7px 0 5px;
}

.pool-command-panel .primary-button,
.printing-command-panel .primary-button {
  justify-self: start;
  border-color: transparent;
  background: #fff;
  color: var(--primary);
}

.plan-command-panel,
.submit-command-panel,
.orders-command-panel,
.ticket-command-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  color: #fff;
}

.plan-command-panel,
.submit-command-panel {
  background: linear-gradient(135deg, #bb1322 0%, #8a1019 100%);
}

.orders-command-panel {
  background: linear-gradient(135deg, #a91523 0%, #2f3843 100%);
}

.ticket-command-panel {
  background: linear-gradient(135deg, #b41524 0%, #6d0e16 58%, #303945 100%);
}

.ticket-user-panel,
.message-command-panel,
.account-command-panel,
.detail-command-panel,
.users-owner-panel,
.stats-owner-panel,
.message-owner-panel,
.mine-owner-panel {
  background: linear-gradient(135deg, #aa1421 0%, #7e0f19 56%, #33404d 100%);
}

.plan-command-panel h2,
.submit-command-panel h2,
.orders-command-panel h2,
.ticket-command-panel h2 {
  margin: 7px 0 5px;
}

.plan-command-panel .primary-button,
.submit-command-panel .primary-button,
.orders-command-panel .primary-button,
.ticket-command-panel .primary-button {
  justify-self: start;
  border-color: transparent;
  background: #fff;
  color: var(--primary);
}

.event-command-panel h2,
.pending-command-panel h2 {
  margin: 7px 0 5px;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}

.channel-card,
.metric-card,
.match-card,
.order-card,
.activity-row,
.route-list a,
.tool-card,
.admin-metric,
.admin-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.channel-card {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
}

.channel-card strong,
.tool-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-card span,
.match-card span,
.match-card small,
.order-card span,
.order-card small,
.activity-row b,
.route-list b,
.table-toolbar span,
.admin-metric em,
.metric-card em,
.tool-card span,
.pipeline-row span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.tone-red {
  background: var(--surface-red);
}

.tone-green {
  background: #eef8f3;
}

.tone-gold {
  background: #fff6e8;
}

.tone-blue {
  background: #eef5ff;
}

.section-block {
  margin-top: 18px;
}

.section-title {
  margin-bottom: 10px;
}

.section-title.compact {
  margin-bottom: 12px;
}

.section-title a {
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.home-topbar {
  margin: -10px -14px 14px;
  padding: 12px 14px 26px;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, #c70717 0%, #c70717 100%);
  color: #fff;
}

.home-topbar-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-topbar-status,
.home-topbar-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.home-topbar-action {
  padding: 0;
}

.home-hero {
  margin: -8px 0 14px;
}

.home-hero h1 {
  margin: 0 0 4px;
  color: var(--primary);
  font-size: 17px;
}

.home-hero p {
  color: #6b584f;
  font-size: 13px;
}

.home-greeting-panel,
.home-overview-panel,
.home-vip-panel {
  display: grid;
  gap: 10px;
  border-radius: var(--radius-lg);
}

.home-greeting-panel {
  margin-bottom: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #fff2f3 0%, #fff8f1 100%);
  border: 1px solid rgba(201, 22, 36, 0.12);
}

.home-greeting-panel strong {
  font-size: 16px;
  line-height: 1.35;
}

.home-greeting-panel span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.home-overview-panel {
  padding: 16px;
  background:
    radial-gradient(circle at right top, rgba(201, 22, 36, 0.08) 0, rgba(201, 22, 36, 0.08) 26%, transparent 27%),
    linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  border: 1px solid var(--line);
  box-shadow: 0 12px 20px rgba(22, 32, 42, 0.05);
}

.home-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin-bottom: 0;
}

.home-overview-title {
  margin-bottom: 6px;
}

.home-overview-item {
  display: grid;
  gap: 4px;
}

.home-overview-item span,
.home-overview-item em {
  color: #6f5f58;
  font-size: 12px;
  font-style: normal;
}

.home-overview-item strong {
  color: var(--primary);
  font-size: 18px;
}

.home-overview-actions {
  margin-top: 2px;
}

.home-overview-actions .primary-button,
.home-overview-actions .secondary-button {
  min-height: 40px;
}

.home-match-card {
  display: grid;
  gap: 14px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.home-match-card.accent-primary {
  background: linear-gradient(180deg, #fff6f6 0%, #ffffff 100%);
  border-color: rgba(201, 22, 36, 0.18);
}

.home-match-card.accent-tertiary {
  background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%);
  border-color: rgba(37, 101, 170, 0.16);
}

.home-match-meta,
.home-match-actions,
.home-vip-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-match-meta div,
.home-match-actions > div,
.home-vip-actions > a {
  min-width: 0;
}

.home-match-meta span,
.home-match-meta small,
.home-match-tags span,
.home-service-card span,
.home-order-leading small,
.home-vip-panel p {
  color: var(--muted);
  font-size: 12px;
}

.home-match-meta b {
  color: var(--primary);
  font-size: 13px;
}

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

.home-match-teams strong {
  font-size: 17px;
  line-height: 1.3;
}

.home-match-teams strong:last-child {
  text-align: right;
}

.home-match-teams em {
  color: var(--subtle);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.home-match-actions .primary-button {
  flex: 0 0 auto;
}

.home-match-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-match-tags span {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  white-space: nowrap;
}

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

.home-service-card {
  min-height: 102px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.home-service-card strong,
.home-order-leading strong {
  line-height: 1.35;
}

.home-service-icon,
.home-order-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f7f1ef;
  color: #7d6158;
}

.home-service-icon.with-badge {
  position: relative;
}

.home-service-icon.with-badge::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px #fff;
}

.home-order-leading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.home-order-leading > div {
  min-width: 0;
}

.home-order-leading strong,
.home-order-leading small {
  display: block;
}

.user-order-card {
  border-radius: 12px;
}

.user-order-card p b {
  padding: 4px 8px;
  border-radius: 10px;
  background: #fff4df;
  color: #b57b18;
  font-size: 12px;
}

.user-order-card p em {
  color: var(--primary);
}

.home-vip-panel {
  margin-top: 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fff4da 0%, #fff7ea 58%, #fff0cb 100%);
  border: 1px solid rgba(181, 123, 24, 0.24);
}

.home-vip-panel h2 {
  margin: 8px 0 4px;
  color: #8f6516;
}

.home-vip-panel .state-dot {
  color: var(--gold);
}

.home-vip-panel .state-dot::before {
  background: var(--gold);
}

.home-vip-actions {
  flex-wrap: wrap;
}

.home-vip-actions .secondary-button {
  background: rgba(255, 255, 255, 0.8);
}

.home-vip-actions .primary-button {
  background: #9f7818;
}

.match-card,
.order-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 12px;
}

.match-card div,
.order-card div {
  min-width: 0;
}

.match-card strong,
.order-card strong {
  display: block;
  margin: 5px 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-card p,
.order-card p {
  display: grid;
  justify-items: end;
  align-content: center;
  min-width: 78px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.match-card b,
.order-card b {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 18px;
}

.order-card em {
  margin-top: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--surface-red);
  color: var(--primary);
  font-size: 12px;
  font-style: normal;
}

.owner-queue-card i {
  margin-top: 6px;
  color: var(--primary);
  font-size: 12px;
  font-style: normal;
}

.activity-row,
.route-list a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 11px 12px;
}

.activity-row span,
.route-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-stack .activity-row {
  background: var(--surface-soft);
}

.feature-panel {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  color: var(--text);
}

.generic-feature-panel {
  display: grid;
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(201, 22, 36, 0.06), rgba(255, 255, 255, 0.9)),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.feature-panel p:not(.context-line) {
  margin-top: 9px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.generic-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.generic-feature-panel .primary-button,
.generic-feature-panel .secondary-button {
  min-height: 40px;
}

.module-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.module-tags span {
  padding: 6px 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.owner-status-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 12px;
  padding: 16px;
}

.owner-status-panel h2 {
  margin: 7px 0 5px;
}

.metric-strip {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.owner-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-card {
  min-width: 0;
  padding: 10px 8px;
}

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

.metric-card strong {
  display: block;
  margin-top: 4px;
  color: var(--primary);
  font-size: 22px;
}

.metric-card em {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.owner-workflow-strip {
  margin-bottom: 12px;
}

.workflow-strip a {
  min-height: 54px;
  display: grid;
  place-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.workflow-strip b {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
}

.workflow-strip span {
  font-size: 12px;
  font-weight: 800;
}

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

.tool-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: var(--surface-soft);
}

.event-channel-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 18px;
}

.pool-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.pool-chip {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pool-chip.active {
  border-color: transparent;
  background: var(--primary);
  color: #fff;
}

.pool-list,
.printing-list,
.order-admin-list {
  display: grid;
  gap: 10px;
}

.plan-list,
.submit-shop-list,
.user-order-list,
.ticket-flow-list {
  display: grid;
  gap: 10px;
}

.orders-metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.filter-strip {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px 0 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-strip::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  position: relative;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.filter-chip.active {
  border-color: transparent;
  background: var(--primary);
  color: #fff;
}

.filter-chip.with-dot::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.filter-chip.active.with-dot::after {
  background: #fff;
}

.event-channel-card,
.focus-card,
.pending-card,
.approval-card,
.pool-card,
.printing-card,
.order-admin-card,
.plan-pick-card,
.submit-shop-card,
.user-order-card,
.ticket-flow-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.event-channel-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  padding: 12px;
}

.event-channel-card strong,
.event-channel-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-channel-card span {
  color: var(--muted);
  font-size: 12px;
}

.event-channel-card b {
  grid-row: span 2;
  align-self: center;
  color: var(--primary);
  font-size: 13px;
}

.focus-card,
.pending-card,
.approval-card,
.pool-card,
.printing-card,
.submit-detail-card,
.plan-pick-card,
.submit-shop-card,
.user-order-card,
.ticket-flow-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 12px;
}

.focus-card div,
.pending-card div,
.approval-card div,
.pool-card div,
.printing-card div,
.submit-detail-card div,
.plan-pick-card div,
.submit-shop-card div,
.user-order-card div,
.ticket-flow-card div {
  min-width: 0;
}

.focus-card strong,
.pending-card strong,
.approval-card strong,
.pool-card strong,
.printing-card strong,
.submit-detail-card strong,
.plan-pick-card strong,
.submit-shop-card strong,
.user-order-card strong,
.ticket-flow-card strong {
  display: block;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-card span,
.pending-card span,
.pending-card small,
.approval-card span,
.pool-card span,
.pool-card small,
.printing-card span,
.printing-card small,
.submit-detail-card span,
.plan-pick-card span,
.submit-shop-card span,
.user-order-card span,
.user-order-card small,
.ticket-flow-card span,
.ticket-flow-card small {
  color: var(--muted);
  font-size: 12px;
}

.focus-card b {
  flex: 0 0 auto;
  align-self: center;
  color: var(--primary);
}

.pending-card p,
.approval-card p,
.pool-card p,
.printing-card p,
.submit-detail-card p,
.plan-pick-card p,
.user-order-card p,
.ticket-flow-card p {
  display: grid;
  justify-items: end;
  align-content: center;
  min-width: 74px;
  color: var(--primary);
  text-align: right;
}

.user-order-card p small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.printing-card p small,
.ticket-flow-card p small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.pending-card b {
  color: var(--text);
  font-size: 18px;
}

.pool-card b,
.printing-card b,
.submit-detail-card b,
.plan-pick-card b,
.user-order-card b,
.ticket-flow-card b {
  color: var(--text);
  font-size: 18px;
}

.pending-card em,
.approval-card b,
.pool-card em,
.printing-card em,
.submit-detail-card em,
.plan-pick-card em,
.user-order-card em,
.ticket-flow-card em,
.submit-shop-card b {
  margin-top: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--surface-red);
  color: var(--primary);
  font-size: 12px;
  font-style: normal;
}

.submit-shop-card b {
  align-self: center;
}

.submit-detail-card,
.submit-shop-card.selected {
  border-color: rgba(201, 22, 36, 0.18);
  background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
}

.submit-detail-leading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.submit-detail-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #fff0f1;
  color: var(--primary);
}

.submit-shop-card {
  align-items: center;
}

.submit-shop-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

.amount-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(201, 22, 36, 0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(201, 22, 36, 0.06), rgba(255, 255, 255, 1));
}

.amount-panel span,
.amount-panel small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.amount-panel strong {
  display: block;
  margin: 6px 0 5px;
  color: var(--primary);
  font-size: 24px;
}

.amount-panel b {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font-size: 12px;
}

.user-info-card,
.submit-detail-card,
.plan-pick-card,
.submit-shop-card,
.user-order-card,
.ticket-flow-card {
  box-shadow: 0 8px 14px rgba(20, 30, 40, 0.04);
}

.approval-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

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

.action-strip a {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.user-order-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.user-order-main {
  display: grid;
  gap: 10px;
}

.user-order-head {
  display: grid;
  gap: 4px;
}

.user-order-head strong,
.user-order-head small {
  white-space: normal;
}

.user-order-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding-top: 18px;
}

.user-order-progress-line {
  position: absolute;
  top: 6px;
  left: 4px;
  right: 4px;
  height: 2px;
  background: var(--surface-variant);
  border-radius: 999px;
}

.user-order-progress-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.user-order-progress span {
  position: relative;
  padding-top: 12px;
  color: var(--outline);
  font-size: 10px;
  text-align: center;
}

.user-order-progress span::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--surface-variant);
  box-shadow: 0 0 0 2px #fff;
}

.user-order-progress span.is-done {
  color: var(--muted);
}

.user-order-progress span.is-done::before {
  background: var(--primary);
}

.user-order-progress span.is-current {
  color: var(--primary);
  font-weight: 700;
}

.user-order-progress span.is-current::before {
  width: 10px;
  height: 10px;
  margin-left: -5px;
  top: -2px;
  background: #fff;
  border: 2px solid var(--primary);
}

.user-order-updated {
  color: var(--muted);
  font-size: 11px;
}

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

.approval-card {
  margin-bottom: 0;
  background: var(--surface-soft);
}

.bottom-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px 16px;
  border-top: 1px solid rgba(214, 220, 228, 0.9);
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 1));
  box-shadow: 0 -8px 18px rgba(20, 30, 40, 0.05);
}

.owner .bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.nav-item {
  min-width: 0;
  min-height: 74px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 10px 4px 8px;
  border-radius: 24px;
  color: var(--muted);
  font-size: 12px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-item > .nav-slot {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f3f5f8;
  color: #738091;
  font-size: 20px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.nav-item > .nav-slot .nav-svg {
  width: 19px;
  height: 19px;
}

.nav-item b {
  font-size: 13px;
  font-weight: 900;
}

.nav-item.active {
  background: #fff1f2;
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(201, 22, 36, 0.05);
}

.nav-item.active > .nav-slot {
  background: #fff;
  color: var(--primary);
}

.nav-item:active {
  transform: translateY(1px);
}

.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  background: var(--bg);
}

.admin-sidebar {
  min-height: 100vh;
  padding: 22px 16px;
  border-right: 1px solid var(--line);
  background: #fff;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-weight: 900;
}

.brand-mark-icon {
  width: 20px;
  height: 20px;
  color: #fff;
}

.brand-block small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.admin-nav {
  display: grid;
  gap: 6px;
}

.admin-nav .nav-item {
  grid-template-columns: 28px 1fr;
  justify-items: start;
  min-height: 42px;
  padding: 0 10px;
  font-size: 14px;
}

.admin-nav .nav-item > .nav-slot {
  width: 28px;
  height: 28px;
}

.admin-nav .nav-item > .nav-slot .nav-svg {
  width: 16px;
  height: 16px;
}

.metric-label,
.admin-metric-label,
.pipeline-item > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.metric-label b,
.admin-metric-label b,
.pipeline-item > span b {
  min-width: 0;
  font-size: inherit;
  font-weight: 900;
  white-space: nowrap;
}

.pipeline-item {
  display: grid;
  gap: 5px;
}

.pipeline-item > span {
  color: var(--muted);
  font-size: 13px;
}

.metric-label,
.admin-metric-label,
.pipeline-item > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.metric-label b,
.admin-metric-label b,
.pipeline-item > span b {
  min-width: 0;
  font-size: inherit;
  font-weight: 900;
  white-space: nowrap;
}

.admin-workspace {
  min-width: 0;
  padding: 28px;
}

.admin-header {
  margin-bottom: 16px;
}

.admin-header h1 {
  font-size: 30px;
}

.admin-actions {
  display: flex;
  gap: 10px;
}

.admin-command-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 16px 18px;
}

.admin-command-strip div {
  min-width: 0;
}

.admin-command-strip strong {
  display: block;
  margin: 7px 0 5px;
  font-size: 19px;
}

.admin-command-strip a {
  background: #fff;
  color: var(--primary);
}

.admin-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.admin-filter-chip {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.admin-metric {
  padding: 16px;
}

.admin-metric span {
  color: var(--muted);
  font-size: 13px;
}

.admin-metric strong {
  display: block;
  margin: 8px 0 4px;
  font-size: 28px;
}

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

.span-7 {
  grid-column: span 7;
}

.span-5 {
  grid-column: span 5;
}

.admin-panel {
  padding: 18px;
}

.pipeline-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.pipeline-row div {
  padding: 10px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.pipeline-item {
  display: grid;
  gap: 5px;
}

.pipeline-item > span {
  color: var(--muted);
  font-size: 13px;
}

.pipeline-row strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
}

.bar-chart {
  height: 220px;
  display: flex;
  align-items: end;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.bar-chart i {
  flex: 1;
  min-width: 24px;
  border-radius: 6px 6px 2px 2px;
  background: var(--primary);
}

.store-panel {
  margin-top: 0;
}

.orders-command-strip {
  background: linear-gradient(135deg, #bc1725 0%, #1f2731 100%);
}

.users-command-strip {
  background: linear-gradient(135deg, #bf1624 0%, #7f1019 58%, #313946 100%);
}

.tickets-command-strip {
  background: linear-gradient(135deg, #ae1423 0%, #303a46 100%);
}

.data-command-strip {
  background: linear-gradient(135deg, #9d1320 0%, #1d2732 52%, #3e4854 100%);
}

.model-command-strip {
  background: linear-gradient(135deg, #bb1725 0%, #6e0f17 55%, #2f3945 100%);
}

.finance-command-strip {
  background: linear-gradient(135deg, #9a1321 0%, #1d2731 52%, #454f5b 100%);
}

.config-command-strip {
  background: linear-gradient(135deg, #af1523 0%, #2d3742 100%);
}

.orders-panel {
  margin-top: 0;
}

.admin-state-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.admin-state-panel h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
}

.admin-state-panel p,
.admin-state-panel small {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.admin-state-panel a {
  width: fit-content;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.order-admin-card {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.9fr;
  gap: 16px;
  padding: 14px 16px;
  background: #fff;
}

.order-admin-card div {
  min-width: 0;
}

.order-admin-card strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-admin-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-admin-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.admin-link-list {
  margin-top: 12px;
}

.generic-metric-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.owner-secondary-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.owner-stats-panel strong {
  font-size: 18px;
  line-height: 1.4;
}

.generic-task-card,
.generic-admin-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.generic-task-card div,
.generic-admin-row div,
.generic-admin-note div {
  min-width: 0;
}

.generic-task-card span,
.generic-admin-row span {
  color: var(--muted);
  font-size: 12px;
}

.generic-task-card strong,
.generic-admin-row strong {
  display: block;
  margin: 6px 0 5px;
  color: var(--text);
  font-size: 15px;
}

.generic-task-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.generic-task-card b,
.generic-admin-row b {
  align-self: center;
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--surface-red);
  color: var(--primary);
  font-size: 12px;
}

.generic-admin-strip {
  background: linear-gradient(135deg, #bf1524 0%, #7e0f18 58%, #3b4652 100%);
}

.generic-admin-main,
.generic-admin-side,
.generic-admin-table-panel {
  margin-top: 0;
}

.generic-admin-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.generic-admin-row {
  background: var(--surface-soft);
}

.generic-admin-note {
  background: #fff;
}

.data-table {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.table-head,
.table-row {
  display: grid;
  grid-template-columns: 1.8fr 1fr 0.8fr 0.8fr 1fr 1fr;
  gap: 12px;
  padding: 13px 14px;
}

.table-head {
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.table-row {
  border-top: 1px solid var(--line);
  background: #fff;
}

.table-row span,
.table-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-shell {
  min-height: 100vh;
  padding: 28px;
  background: #0d1117;
  color: #edf3f8;
}

.progress-shell .context-line {
  color: #ff6b74;
}

.progress-workspace {
  width: min(1220px, 100%);
  margin: 0 auto;
}

.progress-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: 18px;
  margin-bottom: 16px;
}

.progress-hero-copy,
.build-visual,
.progress-card,
.progress-panel {
  border: 1px solid rgba(147, 164, 180, 0.22);
  border-radius: 14px;
  background: #151b22;
}

.progress-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 360px;
  padding: 24px;
}

.progress-hero-copy h1 {
  max-width: 720px;
  margin-bottom: 12px;
  color: #fff;
  font-size: 42px;
}

.progress-hero-copy p:not(.context-line),
.next-panel p,
.activity-item p,
.check-item p {
  color: #aab7c4;
  font-size: 14px;
  line-height: 1.62;
}

.hero-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 28px;
}

.hero-status-row .state-dot {
  color: #fff;
}

.build-visual {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(38, 46, 57, 0.92), rgba(18, 24, 32, 0.98));
}

.build-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.flow-line {
  fill: none;
  stroke: #66d9ef;
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  filter: drop-shadow(0 0 6px rgba(102, 217, 239, 0.62));
  animation: flowDash 2.6s linear infinite;
}

.line-b {
  stroke: #ffd166;
  animation-duration: 3.1s;
}

.line-c {
  stroke: #ff6b74;
  animation-duration: 2.3s;
}

.build-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 132px;
  min-height: 80px;
  display: grid;
  gap: 4px;
  padding: 10px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(15, 21, 29, 0.86);
  animation: nodePulse 3.6s ease-out infinite;
}

.build-node span {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(102, 217, 239, 0.16);
  color: #66d9ef;
  font-size: 11px;
  font-weight: 800;
}

.build-node strong {
  color: #fff;
  font-size: 14px;
}

.build-node em {
  color: #aab7c4;
  font-size: 12px;
  font-style: normal;
}

.build-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 178px;
  min-height: 118px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 16px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 107, 116, 0.62);
  border-radius: 18px;
  background: #261016;
  text-align: center;
}

.build-core span {
  color: #ff6b74;
  font-size: 12px;
  font-weight: 900;
}

.build-core strong {
  font-size: 19px;
}

.build-core em {
  color: #ffd166;
  font-size: 12px;
  font-style: normal;
}

.progress-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.progress-card {
  padding: 16px;
}

.progress-card span,
.progress-card em {
  color: #aab7c4;
  font-size: 13px;
  font-style: normal;
}

.progress-card strong {
  display: block;
  margin: 8px 0 5px;
  color: #fff;
  font-size: 24px;
}

.progress-overview-panel {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}

.pet-meter-large,
.pet-meter {
  --arc: calc(var(--progress) * 1%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #151b22 0 56%, transparent 57%),
    conic-gradient(#ff6b74 0 var(--arc), rgba(255, 255, 255, 0.14) var(--arc) 100%);
}

.pet-meter-large {
  width: 142px;
  height: 142px;
}

.pet-meter-large span,
.pet-meter span {
  color: #66d9ef;
  font-size: 12px;
  font-weight: 900;
}

.pet-meter-large strong,
.pet-meter strong {
  color: #fff;
  font-size: 30px;
}

.progress-overview-copy h2 {
  margin: 7px 0 6px;
  color: #fff;
}

.progress-overview-copy p {
  color: #aab7c4;
  font-size: 14px;
  line-height: 1.6;
}

.breakdown-bars {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.breakdown-bar {
  display: grid;
  grid-template-columns: 120px 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #aab7c4;
  font-size: 12px;
}

.breakdown-bar b {
  color: #fff;
  text-align: right;
}

.breakdown-bar i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #0b1016;
}

.breakdown-bar i::before {
  content: "";
  display: block;
  width: calc(var(--value) * 1%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff6b74, #66d9ef);
}

.progress-live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
  gap: 16px;
  margin-bottom: 16px;
}

.progress-panel {
  padding: 18px;
}

.progress-panel .section-title h2 {
  color: #fff;
}

.progress-panel .section-title a {
  color: #66d9ef;
}

.preview-lane-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.preview-lane-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(147, 164, 180, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    #10161d;
}

.preview-lane-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.preview-lane-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(102, 217, 239, 0.14);
  color: #66d9ef;
}

.preview-lane-head div {
  min-width: 0;
}

.preview-lane-head strong {
  display: block;
  color: #fff;
  font-size: 14px;
}

.preview-lane-head small {
  color: #8ea1b3;
  font-size: 12px;
}

.preview-lane-card h3 {
  color: #fff;
  font-size: 16px;
  line-height: 1.3;
}

.preview-lane-card p {
  color: #aab7c4;
  font-size: 13px;
  line-height: 1.6;
}

.preview-lane-card a {
  color: #66d9ef;
  font-size: 13px;
  font-weight: 800;
}

.activity-feed,
.check-list,
.preview-stack {
  display: grid;
  gap: 10px;
}

.comparison-panel {
  margin-bottom: 16px;
}

.render-wall-panel {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.render-wall-copy {
  color: #aab7c4;
  font-size: 14px;
  line-height: 1.62;
}

.render-wall-groups {
  display: grid;
  gap: 16px;
}

.render-group {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(147, 164, 180, 0.16);
  border-radius: 14px;
  background: #10161d;
}

.render-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.render-group-head div {
  min-width: 0;
}

.render-group-head span {
  display: block;
  color: #66d9ef;
  font-size: 12px;
  font-weight: 900;
}

.render-group-head strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 16px;
}

.render-group-head b {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 107, 116, 0.14);
  color: #ff8f97;
  font-size: 12px;
}

.render-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.render-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(147, 164, 180, 0.16);
  border-radius: 12px;
  background: #0b1016;
}

.render-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.render-card-head span,
.render-card-head a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.render-card-head span {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.render-card-head a {
  color: #8ea1b3;
  font-size: 12px;
}

.render-frame-shell {
  position: relative;
  height: var(--shell-height);
  overflow: hidden;
  border: 1px solid rgba(147, 164, 180, 0.2);
  border-radius: 12px;
  background: #06090d;
}

.render-frame-shell.mobile {
  max-width: 100%;
}

.render-frame {
  width: var(--frame-width);
  height: var(--frame-height);
  border: 0;
  transform-origin: top left;
  transform: scale(var(--frame-scale));
  background: #fff;
}

.comparison-stack {
  display: grid;
  gap: 16px;
}

.stitch-import-dock {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 30;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(147, 164, 180, 0.18);
  border-radius: 20px;
  background: rgba(8, 12, 17, 0.95);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(12px);
}

.stitch-import-head {
  display: grid;
  gap: 8px;
}

.stitch-import-head h2 {
  margin: 0;
  color: #fff;
  font-size: 20px;
}

.stitch-import-head p {
  margin: 0;
  color: #aab7c4;
  font-size: 13px;
  line-height: 1.7;
}

.stitch-import-grid {
  display: grid;
  gap: 14px;
}

.stitch-import-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(147, 164, 180, 0.16);
  border-radius: 16px;
  background: #10161d;
}

.stitch-import-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.stitch-import-card-head div {
  min-width: 0;
}

.stitch-import-card-head strong {
  display: block;
  color: #fff;
  font-size: 15px;
}

.stitch-import-card-head span {
  display: block;
  margin-top: 4px;
  color: #66d9ef;
  font-size: 12px;
  font-weight: 800;
}

.stitch-import-card-head a {
  flex: 0 0 auto;
  color: #8ea1b3;
  font-size: 12px;
}

.stitch-import-meta b {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 107, 116, 0.12);
  color: #ff8f97;
  font-size: 11px;
  font-weight: 700;
}

.stitch-import-meta span {
  display: block;
  margin-top: 8px;
  color: #66d9ef;
  font-size: 12px;
  font-weight: 700;
}

.comparison-row {
  display: grid;
  gap: 12px;
}

.comparison-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #aab7c4;
  font-size: 12px;
}

.comparison-head span,
.comparison-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-head strong {
  color: #66d9ef;
  font-weight: 800;
}

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

.comparison-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(147, 164, 180, 0.2);
  border-radius: 12px;
  background: #11171e;
}

.comparison-copy {
  display: grid;
  gap: 5px;
}

.comparison-copy strong {
  color: #fff;
  font-size: 16px;
}

.comparison-copy em {
  color: #8ea1b3;
  font-size: 12px;
  font-style: normal;
}

.compare-badge {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.compare-badge-stitch {
  background: rgba(255, 209, 102, 0.12);
  color: #ffd166;
}

.compare-badge-local {
  background: rgba(102, 217, 239, 0.14);
  color: #66d9ef;
}

.stitch-baseline {
  min-height: 220px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 209, 102, 0.08), rgba(255, 255, 255, 0.02)),
    #0b1016;
}

.stitch-baseline p {
  color: #aab7c4;
  font-size: 13px;
  line-height: 1.6;
}

.stitch-wire {
  display: grid;
  gap: 10px;
}

.stitch-wire i {
  display: block;
  height: 34px;
  border: 1px dashed rgba(255, 209, 102, 0.36);
  border-radius: 8px;
  background: rgba(255, 209, 102, 0.05);
}

.stitch-wire i:first-child {
  height: 48px;
}

.comparison-shot {
  width: 100%;
  display: block;
  border: 1px solid rgba(147, 164, 180, 0.2);
  border-radius: 10px;
  background: #0b1016;
}

.compare-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.compare-tag {
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.compare-tag-issue {
  background: rgba(255, 107, 116, 0.14);
  color: #ff9097;
}

.compare-tag-win {
  background: rgba(102, 217, 239, 0.14);
  color: #7be5f6;
}

.activity-item,
.check-item,
.preview-shard {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px;
  border-radius: 12px;
  background: #10161d;
}

.activity-item > span,
.check-item > span {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 107, 116, 0.16);
  color: #ff7d85;
  font-size: 12px;
  font-weight: 800;
}

.activity-item div,
.check-item div {
  min-width: 0;
}

.activity-item strong,
.check-item strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
}

.code-stream {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding: 13px;
  border-radius: 12px;
  background: #080c10;
  color: #66d9ef;
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 12px;
}

.code-stream i {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  opacity: 0.52;
  animation: codeGlow 3s ease-in-out infinite;
  animation-delay: var(--delay);
}

.radar-wrap {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.radar-scope {
  position: relative;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(102, 217, 239, 0.38);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(102, 217, 239, 0.08) 0 18%, transparent 19% 100%),
    conic-gradient(from 0deg, rgba(102, 217, 239, 0.42), transparent 32%, rgba(255, 107, 116, 0.22), transparent 72%);
}

.radar-scope::before,
.radar-scope::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(102, 217, 239, 0.22);
  border-radius: 50%;
}

.radar-scope::after {
  inset: 50px;
}

.radar-scope span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 1px;
  transform-origin: left center;
  background: #66d9ef;
  animation: radarSweep 2.8s linear infinite;
}

.radar-scope b {
  z-index: 1;
  color: #fff;
  font-size: 20px;
}

.preview-shard {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 50px;
  overflow: hidden;
}

.preview-shard span {
  color: #aab7c4;
  font-size: 12px;
}

.preview-shard strong {
  color: #fff;
}

.preview-shard i {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6b74, #66d9ef, #ffd166);
  animation: shardScan 2.4s ease-in-out infinite;
}

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

.progress-preview-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(147, 164, 180, 0.16);
  border-radius: 14px;
  background: #10161d;
}

.progress-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.progress-preview-head div {
  min-width: 0;
}

.progress-preview-head span {
  display: block;
  color: #66d9ef;
  font-size: 12px;
  font-weight: 900;
}

.progress-preview-head strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
}

.progress-preview-head b {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 107, 116, 0.14);
  color: #ff8b93;
  font-size: 11px;
  font-weight: 900;
}

.progress-preview-head b em {
  font-style: normal;
}

.progress-preview-card .compare-render-shell {
  justify-self: center;
}

.progress-preview-card p {
  margin: 0;
  color: #aab7c4;
  font-size: 12px;
  line-height: 1.6;
}

.progress-preview-card a {
  color: #66d9ef;
  font-size: 13px;
  font-weight: 800;
}

.next-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.next-panel h2 {
  margin: 7px 0 6px;
  color: #fff;
}

.next-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.progress-shell .secondary-button {
  border-color: rgba(255, 255, 255, 0.18);
  background: #10161d;
  color: #66d9ef;
}

.project-progress-pet {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  min-width: 188px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(102, 217, 239, 0.34);
  border-radius: 16px;
  background: rgba(13, 17, 23, 0.94);
  color: #fff;
}

.pet-meter {
  width: 58px;
  height: 58px;
}

.pet-meter span {
  font-size: 9px;
}

.pet-meter strong {
  font-size: 16px;
}

.project-progress-pet b,
.project-progress-pet small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-progress-pet b {
  font-size: 13px;
}

.project-progress-pet small {
  margin-top: 3px;
  color: #aab7c4;
  font-size: 11px;
}

.strict-stitch-shell {
  min-height: 100vh;
  display: grid;
  gap: 18px;
  padding: 18px 18px 120px;
  background: radial-gradient(circle at top left, rgba(201, 22, 36, 0.08), transparent 26%), #0b1016;
  color: #fff;
}

.strict-stitch-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(147, 164, 180, 0.18);
  border-radius: 18px;
  background: rgba(15, 22, 30, 0.92);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
}

.strict-stitch-head h1 {
  margin: 6px 0;
  font-size: 22px;
  line-height: 1.3;
}

.strict-stitch-head p {
  margin: 0;
  max-width: 860px;
  color: #b7c4d1;
  font-size: 13px;
  line-height: 1.6;
}

.strict-stitch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.strict-stitch-frame-wrap {
  display: grid;
  justify-items: center;
}

.strict-stitch-shell-mobile .compare-render-shell.mobile {
  width: min(100%, calc(var(--frame-width) * var(--frame-scale)));
}

.strict-stitch-shell-admin .compare-render-shell.desktop {
  width: min(100%, calc(var(--frame-width) * var(--frame-scale)));
}

.strict-stitch-embed-root,
.strict-pending-embed-root {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0b1016;
}

.strict-stitch-embed-stage {
  width: 100%;
  display: grid;
  justify-items: center;
  padding: 8px;
}

.strict-pending-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 18px 120px;
  background: radial-gradient(circle at top left, rgba(201, 22, 36, 0.08), transparent 26%), #0b1016;
  color: #fff;
}

.strict-pending-card,
.strict-pending-embed-card {
  border: 1px solid rgba(147, 164, 180, 0.18);
  background: rgba(15, 22, 30, 0.94);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
}

.strict-pending-card {
  width: min(100%, 920px);
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: 20px;
}

.strict-pending-card h1 {
  font-size: 24px;
}

.strict-pending-card p,
.strict-pending-embed-card p {
  color: #b7c4d1;
  font-size: 14px;
  line-height: 1.65;
}

.strict-pending-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.strict-pending-meta article {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(147, 164, 180, 0.14);
  border-radius: 14px;
  background: rgba(9, 16, 24, 0.8);
}

.strict-pending-meta strong {
  color: #fff;
  font-size: 13px;
}

.strict-pending-meta span {
  color: #8ea1b3;
  font-size: 12px;
  word-break: break-word;
}

.strict-pending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.strict-pending-embed-card {
  width: min(100%, 280px);
  display: grid;
  gap: 8px;
  padding: 18px 16px;
  border-radius: 16px;
  text-align: left;
}

.compare-shell {
  min-height: 100vh;
  background: radial-gradient(circle at top left, rgba(201, 22, 36, 0.08), transparent 28%), #0b1016;
  color: #fff;
}

.compare-workspace {
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 10px 14px 36px;
}

.compare-hero-panel,
.compare-live-row,
.compare-live-card {
  border: 1px solid rgba(147, 164, 180, 0.18);
  border-radius: 18px;
  background: rgba(15, 22, 30, 0.92);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
}

.compare-hero-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 10px;
  padding: 12px 16px;
}

.compare-hero-panel h1 {
  margin: 4px 0 6px;
  font-size: 20px;
}

.compare-hero-panel p:last-child {
  max-width: 900px;
  color: #b7c4d1;
  font-size: 13px;
  line-height: 1.5;
}

.compare-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.compare-live-stack {
  display: grid;
  gap: 10px;
}

.compare-live-row {
  padding: 12px;
}

.compare-live-head,
.compare-live-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.compare-live-head {
  margin-bottom: 10px;
}

.compare-live-head span,
.compare-live-status em {
  color: #8ea1b3;
  font-size: 12px;
  font-style: normal;
}

.compare-live-head strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 16px;
}

.compare-live-status {
  flex-wrap: wrap;
}

.compare-live-status a {
  color: #66d9ef;
  font-size: 13px;
  font-weight: 800;
}

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

.compare-live-grid-mobile {
  grid-template-columns: repeat(2, minmax(460px, 1fr));
}

.compare-live-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.compare-live-label {
  display: grid;
  gap: 6px;
}

.compare-live-label strong {
  color: #fff;
  font-size: 14px;
}

.compare-frame-wrap {
  display: grid;
  justify-items: center;
  align-items: start;
  min-height: 0;
}

.compare-render-shell {
  width: min(100%, calc(var(--frame-width) * var(--frame-scale)));
  padding: 8px;
  border: 1px solid rgba(147, 164, 180, 0.22);
  border-radius: 16px;
  background: #091018;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.compare-render-shell.mobile {
  border-radius: 28px;
  aspect-ratio: 390 / 880;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    #091018;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 20px 48px rgba(0, 0, 0, 0.28);
}

.compare-render-shell.desktop {
  aspect-ratio: 1280 / 860;
}

.compare-render-shell.mobile .render-frame {
  border-radius: 20px;
}

.standard-preview-stage.mobile {
  width: calc(var(--frame-width) * var(--frame-scale));
  max-width: 100%;
  min-width: 0;
}

.standard-preview-stage.desktop {
  width: min(100%, calc(var(--frame-width) * var(--frame-scale)));
}

.mobile-shell ~ .project-progress-pet {
  bottom: 76px;
}

@keyframes flowDash {
  to {
    stroke-dashoffset: -64;
  }
}

@keyframes nodePulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    border-color: rgba(255, 255, 255, 0.16);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.025);
    border-color: rgba(102, 217, 239, 0.62);
  }
}

@keyframes codeGlow {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

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

@keyframes shardScan {
  0%,
  100% {
    transform: translateX(-18%);
  }

  50% {
    transform: translateX(18%);
  }
}

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

  .admin-sidebar {
    min-height: auto;
    padding: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .admin-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-workspace {
    padding: 18px 14px;
  }

  .admin-header,
  .table-toolbar,
  .admin-command-strip,
  .compare-hero-panel,
  .compare-live-head,
  .compare-live-status,
  .strict-stitch-head,
  .strict-pending-actions,
  .progress-hero,
  .hero-status-row,
  .next-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-metrics,
  .admin-grid,
  .pipeline-row,
  .progress-metrics,
  .progress-overview-panel,
  .progress-live-grid,
  .progress-hero,
  .preview-lane-board,
  .progress-preview-grid,
  .radar-wrap,
  .comparison-grid,
  .compare-live-grid,
  .strict-pending-meta {
    grid-template-columns: 1fr;
  }

  .generic-metric-strip,
  .generic-cta-row {
    grid-template-columns: 1fr;
  }

  .comparison-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-admin-card {
    grid-template-columns: 1fr;
  }

  .generic-task-card,
  .generic-admin-row,
  .amount-panel {
    flex-direction: column;
  }

  .generic-task-card b,
  .generic-admin-row b,
  .amount-panel b {
    align-self: flex-start;
  }

  .progress-shell {
    padding: 16px;
  }

  .stitch-import-dock {
    position: static;
    width: auto;
    max-height: none;
    margin: 0 16px 110px;
    box-shadow: none;
  }

  .progress-hero-copy,
  .build-visual {
    min-height: auto;
  }

  .build-visual {
    min-height: 420px;
  }

  .radar-scope {
    justify-self: center;
  }

  .pet-meter-large {
    justify-self: center;
  }

  .next-links {
    justify-content: flex-start;
  }

  .span-7,
  .span-5 {
    grid-column: span 1;
  }

  .table-head,
  .table-row {
    grid-template-columns: 1.8fr 1fr 1fr;
  }

  .table-head span:nth-child(4),
  .table-head span:nth-child(5),
  .table-head span:nth-child(6),
  .table-row span:nth-child(4),
  .table-row span:nth-child(5),
  .table-row span:nth-child(6) {
    display: none;
  }
}

@media (max-width: 380px) {
  .mobile-shell {
    padding: 8px;
  }

  .phone-frame {
    border-radius: 16px;
  }

  .mobile-scroll {
    padding-inline: 12px;
  }

  .owner-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .command-actions {
    grid-template-columns: 1fr;
  }

  .bottom-nav {
    gap: 6px;
    padding-inline: 10px;
  }

  .nav-item {
    min-height: 68px;
    gap: 6px;
    border-radius: 20px;
  }

  .nav-item > .nav-slot {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .project-progress-pet {
    right: 10px;
    bottom: 70px;
    min-width: 164px;
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .pet-meter {
    width: 50px;
    height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-line,
  .build-node,
  .code-stream i,
  .radar-scope span,
  .preview-shard i {
    animation: none;
  }
}

.runtime-shell {
  min-height: 100vh;
  background: #f6f8fc;
}

.runtime-frame {
  display: block;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  border: 0;
  background: #ffffff;
}