@import "tailwindcss";
@import "tw-animate-css";
@import "../vendor/shadcn-tailwind-4.13.0.css";

@utility scrollbar-thin {
  scrollbar-width: thin;
}

/* Production delivery surfaces */
.aowang-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.aowang-brand-symbol {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(120, 190, 239, 0.48);
  border-radius: 15px;
  background: linear-gradient(145deg, #eaf7ff, #fff);
  box-shadow: 0 10px 26px rgba(29, 126, 199, 0.18), inset 0 1px 0 #fff;
}

.aowang-brand-symbol img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.aowang-brand-wordmark {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.aowang-brand-wordmark strong {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: #123756;
  font-size: 22px;
  font-style: normal;
  letter-spacing: -0.04em;
  line-height: 1;
}

.aowang-brand-wordmark strong b { font-weight: 800; }
.aowang-brand-wordmark strong i {
  color: #168ee0;
  font-size: .72em;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
}

.aowang-brand-wordmark small {
  overflow: hidden;
  color: #7893a9;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aowang-brand-lockup.compact { gap: 8px; }
.aowang-brand-lockup.compact .aowang-brand-symbol { width: 34px; height: 34px; border-radius: 11px; }
.aowang-brand-lockup.compact .aowang-brand-wordmark strong { font-size: 16px; }
.aowang-brand-lockup.compact .aowang-brand-wordmark small { font-size: 6px; }

.aowang-company-signature {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.aowang-company-signature > span {
  color: #49667d;
  font-size: 9px;
  font-weight: 700;
}

.aowang-company-signature > small {
  color: #8aa0b3;
  font-size: 7px;
  letter-spacing: .08em;
}

.console-surface {
  min-height: 100vh;
  padding: 24px clamp(18px, 3vw, 48px) 0;
  background:
    radial-gradient(circle at 7% 0%, rgba(137, 216, 255, .32), transparent 28%),
    radial-gradient(circle at 95% 14%, rgba(204, 236, 255, .72), transparent 31%),
    linear-gradient(145deg, #fafdff 0%, #f2faff 42%, #fff 100%);
}

.console-surface .ops-page { max-width: 1540px; margin: 0 auto; }
.console-company-footer {
  max-width: 1540px;
  margin: 24px auto 0;
  padding: 20px 4px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid #d9ebf7;
  color: #8ba3b5;
  font-size: 8px;
  letter-spacing: .1em;
}

.ops-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(151, 210, 246, .66);
  background: linear-gradient(120deg, rgba(255,255,255,.98), rgba(231,247,255,.94) 60%, rgba(244,251,255,.98));
  box-shadow: 0 22px 54px rgba(56, 135, 190, .12);
}

.ops-hero::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -150px;
  width: 390px;
  height: 390px;
  border: 74px solid rgba(78, 181, 239, .09);
  border-radius: 50%;
  pointer-events: none;
}

.ops-hero-brand { display: flex; align-items: center; gap: 24px; position: relative; z-index: 1; }
.ops-hero-divider { width: 1px; height: 70px; background: linear-gradient(transparent, #b8dcef, transparent); }
.ops-hero-actions { position: relative; z-index: 1; }

.ops-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ops-heading-actions svg { width: 15px; }

.ops-project-card {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid #dbeaf4;
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 30px rgba(50, 116, 160, .07);
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ops-project-card:hover,
.ops-project-card.active {
  border-color: #83c6ed;
  box-shadow: 0 18px 40px rgba(41, 134, 194, .14);
  transform: translateY(-2px);
}

.ops-project-card.reference {
  border-color: #9fd5f2;
  background: linear-gradient(135deg, #fff 0%, #eef9ff 100%);
}

.ops-project-select {
  width: 100%;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 18px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.ops-project-tools {
  min-height: 45px;
  padding: 7px 10px 7px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #e7f1f7;
  background: rgba(246, 251, 255, .78);
  color: #839caf;
  font-size: 8px;
}

.ops-project-tools svg { width: 14px; }
.ops-project-tools [data-slot="badge"] { background: #edf8ff; color: #237eb6; }

.ops-form-section-title {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, #eff9ff, #f9fdff);
  border: 1px solid #d9edf9;
}

.ops-form-section-title span { display: block; color: #2677a9; font-size: 10px; font-weight: 800; }
.ops-form-section-title small { display: block; margin-top: 3px; color: #7e98aa; font-size: 8px; }
.ops-permanent-delete { display: grid; gap: 9px; }
.ops-permanent-delete > strong { color: #a1423a; font-size: 11px; }

.live-report-root,
.live-report-stack { display: grid; gap: 18px; }

.live-project-hero {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(420px, 1.9fr);
  overflow: hidden;
  border: 1px solid #cfe7f5;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(54, 128, 177, .1);
}

.live-project-brand {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: linear-gradient(145deg, #e9f8ff 0%, #f8fdff 100%);
  border-right: 1px solid #d9edf8;
}

.live-project-brand > div {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 19px;
  background: linear-gradient(145deg, #188fd8, #0d6dad);
  color: #fff;
  font-size: 27px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(28, 130, 193, .2);
}

.live-project-brand img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.live-project-brand > span { margin-top: 15px; color: #3a8bbb; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.live-project-brand h1 { margin: 6px 0 2px; color: #173d59; font-size: 23px; letter-spacing: -.04em; }
.live-project-brand p { margin: 0; color: #7994a7; font-size: 9px; }

.live-project-brief { padding: 30px 34px; }
.live-project-brief h2 { margin: 14px 0 6px; color: #173c58; font-size: 24px; letter-spacing: -.04em; }
.live-project-brief > p { margin: 0; color: #748fa4; font-size: 10px; line-height: 1.7; }
.live-project-brief > div {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.live-project-brief > div > span {
  padding: 12px;
  border: 1px solid #e0edf5;
  border-radius: 13px;
  background: #fbfdff;
  color: #8aa0b1;
  font-size: 8px;
}

.live-project-brief > div strong { display: block; margin-top: 5px; color: #2d5875; font-size: 10px; }

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

.live-metric-card,
.live-report-card {
  border: 1px solid #dceaf4;
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 34px rgba(48, 118, 164, .07);
}

.live-metric-card { padding: 19px; }
.live-metric-card > div { display: flex; align-items: center; justify-content: space-between; color: #7690a4; font-size: 9px; font-weight: 700; }
.live-metric-card svg { width: 16px; color: #3b9bd4; }
.live-metric-card > strong { display: block; margin: 11px 0 6px; color: #174f73; font-size: 29px; letter-spacing: -.04em; }
.live-metric-card p { min-height: 30px; margin: 0; color: #8197a8; font-size: 8px; line-height: 1.65; }
.live-metric-card small { display: block; margin-top: 10px; color: #8ea3b2; font-size: 8px; }
.live-metric-card small.met { color: #167b5b; }
.live-metric-card small.pending { color: #b06b31; }

.live-report-card { padding: 24px; }
.live-report-heading { margin-bottom: 18px; }
.live-report-heading > span { color: #2e95cf; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.live-report-heading h2 { margin: 5px 0 4px; color: #1c405b; font-size: 19px; letter-spacing: -.03em; }
.live-report-heading p { margin: 0; color: #8499a9; font-size: 9px; line-height: 1.65; }

.live-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.live-stat-row > div { padding: 15px; border: 1px solid #e0edf5; border-radius: 14px; background: linear-gradient(145deg, #fbfdff, #f4fbff); }
.live-stat-row span { color: #8299aa; font-size: 8px; }
.live-stat-row strong { display: block; margin-top: 7px; color: #245777; font-size: 22px; }

.live-report-empty,
.live-report-loading {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px;
  border: 1px dashed #cfe4f2;
  border-radius: 18px;
  background: linear-gradient(145deg, #fbfdff, #f3faff);
  color: #7e98aa;
  text-align: center;
}

.live-report-loading { min-height: 54vh; border-style: solid; }
.live-report-empty svg, .live-report-loading svg { width: 28px; color: #46a3d7; }
.live-report-empty strong, .live-report-loading strong { color: #315e7b; font-size: 12px; }
.live-report-empty span, .live-report-loading span { max-width: 470px; font-size: 9px; line-height: 1.65; }
.live-report-loading.error svg { color: #cd665c; }

.live-answer-table td { vertical-align: top; }
.live-answer-table td:nth-child(2) { min-width: 420px; }
.live-answer-table td strong { display: block; color: #315e7a; font-size: 9px; }
.live-answer-table td small { display: block; margin-top: 4px; color: #8ca0af; font-size: 7px; line-height: 1.55; }
.live-answer-table td p { max-height: 66px; overflow: hidden; margin: 5px 0 0; color: #728b9d; font-size: 8px; line-height: 1.7; }

.live-platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.live-platform-grid > div { padding: 16px; border: 1px solid #dfecf4; border-radius: 14px; background: #fbfdff; }
.live-platform-grid strong { display: block; color: #285976; font-size: 11px; }
.live-platform-grid span { display: block; margin: 9px 0 5px; color: #69879b; font-size: 8px; }
.live-platform-grid small { display: block; margin-top: 8px; color: #8aa0b0; font-size: 8px; }

.live-question-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.live-question-grid > div { display: flex; gap: 11px; align-items: flex-start; padding: 13px; border: 1px solid #e1edf4; border-radius: 13px; background: #fbfdff; }
.live-question-grid span { flex: 0 0 auto; color: #3294ca; font-size: 8px; font-weight: 800; }
.live-question-grid strong { color: #42677e; font-size: 9px; line-height: 1.55; }

.live-execution-hero { display: grid; grid-template-columns: auto 1fr minmax(220px, .8fr); align-items: center; gap: 18px; padding: 20px; border-radius: 16px; background: linear-gradient(120deg, #ebf8ff, #f9fdff); }
.live-execution-hero > svg { width: 30px; color: #258ec9; }
.live-execution-hero span { color: #7894a8; font-size: 8px; }
.live-execution-hero strong { display: block; margin: 3px 0; color: #255b7d; font-size: 23px; }
.live-execution-hero p { margin: 0; color: #849aaa; font-size: 8px; }

.live-formula-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.live-formula-grid > div { padding: 16px; border: 1px solid #dcecf6; border-radius: 14px; background: #f8fcff; }
.live-formula-grid span { display: block; color: #2b88bc; font-size: 9px; font-weight: 800; }
.live-formula-grid strong { display: block; margin-top: 7px; color: #506f84; font-size: 9px; font-weight: 600; line-height: 1.7; }

.live-risk-list, .live-action-list { display: grid; gap: 9px; }
.live-risk-list > div { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 14px; border: 1px solid #f0dfca; border-radius: 14px; background: #fffaf3; }
.live-risk-list svg { width: 17px; color: #c4823e; }
.live-risk-list strong { color: #745535; font-size: 10px; }
.live-risk-list p { margin: 3px 0 0; color: #9a7b58; font-size: 8px; }
.live-clear-state { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-radius: 16px; background: #f2fbf7; color: #6c9281; text-align: center; }
.live-clear-state svg { width: 28px; color: #2b9a71; }
.live-clear-state strong { color: #34765d; font-size: 11px; }
.live-clear-state span { font-size: 8px; }

.live-action-list > div { display: grid; grid-template-columns: 32px auto 1fr auto; gap: 10px; align-items: center; padding: 13px 15px; border: 1px solid #e0edf5; border-radius: 13px; background: #fbfdff; }
.live-action-list > div > span { color: #3396ce; font-size: 8px; font-weight: 800; }
.live-action-list strong { color: #3d647d; font-size: 9px; }
.live-action-list svg { width: 14px; color: #8fa5b4; }

.site-footer .aowang-company-signature { flex: 1; }
.site-footer .aowang-company-signature .aowang-brand-wordmark small { display: block; }

@media (max-width: 1100px) {
  .ops-hero-brand { align-items: flex-start; }
  .ops-hero-divider { display: none; }
  .live-project-hero { grid-template-columns: 1fr; }
  .live-project-brand { border-right: 0; border-bottom: 1px solid #d9edf8; }
  .live-metric-grid { grid-template-columns: repeat(2, 1fr); }
  .live-platform-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .console-surface { padding: 12px 10px 0; }
  .ops-hero-brand { display: grid; gap: 16px; }
  .ops-heading-actions { justify-content: flex-start; }
  .ops-project-select { grid-template-columns: 46px 1fr; }
  .ops-project-counts { grid-column: 1 / -1; }
  .live-project-brief, .live-project-brand { padding: 22px; }
  .live-project-brief > div { grid-template-columns: repeat(2, 1fr); }
  .live-metric-grid, .live-platform-grid, .live-question-grid, .live-formula-grid { grid-template-columns: 1fr; }
  .live-stat-row { grid-template-columns: repeat(2, 1fr); }
  .live-execution-hero { grid-template-columns: auto 1fr; }
  .live-execution-hero [data-slot="progress"] { grid-column: 1 / -1; }
  .aowang-company-signature > small { display: none; }
  .console-company-footer { align-items: flex-start; flex-direction: column; }
}

@media print {
  .console-surface { background: #fff; }
  .live-report-card, .live-metric-card, .live-project-hero { box-shadow: none; break-inside: avoid; }
}

:root {
  --background: #f3f6fb;
  --foreground: #17253b;
  --card: #ffffff;
  --card-foreground: #17253b;
  --popover: #ffffff;
  --popover-foreground: #17253b;
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --secondary: #edf3ff;
  --secondary-foreground: #1d4ed8;
  --muted: #f1f4f8;
  --muted-foreground: #6c7b91;
  --accent: #eef4ff;
  --accent-foreground: #1d4ed8;
  --destructive: #dc2626;
  --border: #dfe6f0;
  --input: #d9e2ee;
  --ring: #2563eb;
  --chart-1: #2563eb;
  --chart-2: #0aa676;
  --chart-3: #f08a24;
  --chart-4: #7c3aed;
  --chart-5: #dc2626;
  --radius: 0.75rem;
  --sidebar: #0a2852;
  --sidebar-foreground: #e7effa;
  --sidebar-primary: #ffffff;
  --sidebar-primary-foreground: #0b2a55;
  --sidebar-accent: rgba(255, 255, 255, 0.12);
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.12);
  --sidebar-ring: #5fa8ff;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
}

* {
  border-color: var(--border);
  box-sizing: border-box;
}

html {
  background: var(--background);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 78% 0%, rgba(37, 99, 235, 0.07), transparent 28rem),
    var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-sidebar [data-slot="sidebar-inner"] {
  background:
    radial-gradient(circle at 30% 0%, rgba(68, 143, 255, 0.2), transparent 18rem),
    linear-gradient(180deg, #0b2d5c 0%, #071f42 100%);
  border-right: 0;
}

.sidebar-brand-wrap {
  padding: 18px 14px 12px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  min-height: 48px;
  gap: 11px;
  overflow: hidden;
}

.aw-logo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: linear-gradient(145deg, #3783ff, #1551cd);
  box-shadow: 0 10px 24px rgba(0, 12, 39, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 32px;
  text-align: center;
}

.aw-logo::after {
  position: absolute;
  inset: 7px 50% 7px auto;
  width: 1px;
  background: rgba(255, 255, 255, 0.28);
  content: "";
}

.sidebar-brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.sidebar-brand-copy strong {
  color: #fff;
  font-size: 17px;
  letter-spacing: 0.02em;
}

.sidebar-brand-copy span {
  margin-top: 2px;
  color: #9eb6d5;
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.group[data-collapsible="icon"] .sidebar-brand-wrap {
  padding-inline: 15px;
}

.group[data-collapsible="icon"] .sidebar-brand-copy,
.group[data-collapsible="icon"] .sidebar-number,
.group[data-collapsible="icon"] .sidebar-project > strong,
.group[data-collapsible="icon"] .sidebar-project > span,
.group[data-collapsible="icon"] .sidebar-project-status span {
  display: none;
}

.sidebar-nav-list {
  gap: 4px;
}

.sidebar-nav-button {
  position: relative;
  height: 42px !important;
  padding-inline: 10px !important;
  border: 1px solid transparent;
  border-radius: 10px !important;
  color: #cad8eb;
  font-size: 13px !important;
  letter-spacing: 0.01em;
}

.sidebar-nav-button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.sidebar-nav-button[data-active="true"] {
  border-color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(90deg, #1e65dc 0%, #2f7df3 100%) !important;
  box-shadow: 0 9px 22px rgba(0, 24, 74, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fff !important;
}

.sidebar-nav-button[data-active="true"]::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -8px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #72b4ff;
  content: "";
}

.sidebar-nav-button > svg {
  width: 17px !important;
  height: 17px !important;
}

.sidebar-number {
  min-width: 20px;
  color: #77a9e9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.sidebar-nav-button[data-active="true"] .sidebar-number {
  color: #fff;
}

.sidebar-project-wrap {
  padding: 12px;
}

.sidebar-project {
  display: flex;
  min-height: 94px;
  flex-direction: column;
  justify-content: center;
  padding: 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

.sidebar-project-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #69e2b2;
  font-size: 11px;
}

.sidebar-project-status svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.sidebar-project strong {
  margin-top: 8px;
  color: #fff;
  font-size: 14px;
}

.sidebar-project > span {
  margin-top: 4px;
  color: #91a7c3;
  font-size: 10px;
}

.group[data-collapsible="icon"] .sidebar-project {
  min-height: 46px;
  align-items: center;
  padding: 9px;
}

.app-main {
  min-width: 0;
}

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 24px;
  border-bottom: 1px solid rgba(218, 226, 238, 0.92);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 6px 22px rgba(30, 58, 100, 0.04);
  backdrop-filter: blur(18px);
}

.topbar-title {
  display: flex;
  min-width: 180px;
  align-items: center;
  gap: 10px;
}

.sidebar-trigger {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  background: #f8faff;
}

.topbar-title p {
  margin: 0 0 2px;
  color: #2563eb;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.topbar-title h2 {
  margin: 0;
  color: #15243a;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.topbar-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.project-select {
  width: 212px;
  background: #fff;
  color: #223552;
  font-weight: 600;
}

.month-select {
  min-width: 134px;
  background: #fff;
}

.search-trigger {
  min-width: 188px;
  justify-content: flex-start;
  background: #f8faff;
  color: #586a84;
  font-weight: 400;
}

.search-trigger span {
  flex: 1;
  text-align: left;
}

kbd {
  padding: 2px 6px;
  border: 1px solid #d8e0eb;
  border-radius: 5px;
  background: #fff;
  color: #8290a4;
  font-family: inherit;
  font-size: 9px;
}

.notification-button {
  position: relative;
  background: #fff;
}

.notification-button > span {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
}

.export-button {
  min-width: 92px;
  background: linear-gradient(135deg, #2875ef, #1b59cf);
  box-shadow: 0 7px 16px rgba(37, 99, 235, 0.22);
}

.export-button svg:last-child {
  width: 13px;
}

.context-strip {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 0;
  padding: 7px 24px;
  overflow-x: auto;
  border-bottom: 1px solid #e3e9f2;
  background: rgba(248, 250, 254, 0.9);
  white-space: nowrap;
}

.context-strip > div {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-right: 1px solid #e1e7f0;
  font-size: 11px;
}

.context-strip > div:first-child {
  padding-left: 0;
}

.context-strip > div span {
  color: #8491a5;
}

.context-strip > div strong {
  color: #354864;
  font-weight: 650;
}

.context-strip > button {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: #eaf8f2;
  color: #087b59;
  font-size: 11px;
  font-weight: 700;
}

.context-strip > button svg {
  width: 12px;
  height: 12px;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #0caf7b;
  box-shadow: 0 0 0 4px rgba(12, 175, 123, 0.11);
}

.readonly-badge {
  height: 28px;
  margin-left: 8px;
  border-color: #d5deea;
  background: #fff;
  color: #596c87;
  font-size: 10px;
}

.dashboard-content {
  width: 100%;
  max-width: 1660px;
  margin: 0 auto;
  padding: 22px 24px 34px;
}

.page-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-intro {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 2px 2px 5px;
}

.page-number {
  color: #1f68df;
  font-size: 42px;
  font-weight: 780;
  letter-spacing: -0.07em;
  line-height: 1;
}

.page-intro-copy p,
.hero-label,
.section-heading p {
  margin: 0 0 4px;
  color: #2b6ed7;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.page-intro-copy h1 {
  margin: 0;
  color: #142238;
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.page-intro-copy > span {
  display: block;
  max-width: 840px;
  margin-top: 5px;
  color: #687991;
  font-size: 12px;
  line-height: 1.6;
}

.version-badge {
  border-color: #c9dcff;
  background: #eef5ff;
  color: #1d5bc7;
}

.project-hero {
  position: relative;
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 19px 22px;
  overflow: hidden;
  border: 1px solid rgba(55, 113, 206, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 93% 10%, rgba(93, 166, 255, 0.2), transparent 20rem),
    linear-gradient(135deg, #ffffff 0%, #f1f7ff 55%, #e9f3ff 100%);
  box-shadow: 0 12px 32px rgba(38, 77, 135, 0.07);
}

.project-hero::after {
  position: absolute;
  right: -35px;
  bottom: -65px;
  width: 220px;
  height: 140px;
  border: 1px solid rgba(37, 99, 235, 0.09);
  border-radius: 50%;
  content: "";
}

.project-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.client-mark {
  display: grid;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 15px;
  background: linear-gradient(145deg, #a9222a, #711018);
  box-shadow: 0 10px 26px rgba(116, 18, 27, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 23px;
  font-weight: 800;
}

.project-identity h2 {
  margin: 0;
  color: #152743;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.project-identity p {
  margin: 6px 0 0;
  color: #6d7d92;
  font-size: 11px;
}

.project-facts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 0;
  padding: 11px 0;
  border: 1px solid rgba(181, 204, 233, 0.72);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(8px);
}

.project-facts > div {
  display: flex;
  min-width: 120px;
  flex-direction: column;
  gap: 4px;
  padding: 0 18px;
  border-right: 1px solid #dce6f3;
}

.project-facts > div:last-child {
  border-right: 0;
}

.project-facts span {
  color: #8493a6;
  font-size: 9px;
}

.project-facts strong {
  color: #263b59;
  font-size: 12px;
}

.with-dot::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 99px;
  background: #13ae7c;
  content: "";
}

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

.master-score-card,
.acceptance-card,
.content-card {
  border: 1px solid #dce4ef;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 9px 28px rgba(28, 58, 102, 0.055);
}

.master-score-card {
  display: flex;
  min-height: 154px;
  align-items: center;
  gap: 18px;
  padding: 18px;
  text-align: left;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.master-score-card:hover,
.metric-card:hover {
  border-color: #afc9ef;
  box-shadow: 0 13px 32px rgba(37, 99, 235, 0.1);
  transform: translateY(-2px);
}

.score-ring {
  --ring-color: #2563eb;
  position: relative;
  display: grid;
  flex: 0 0 108px;
  width: 108px;
  height: 108px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) var(--score), #e9eef5 0);
}

.score-ring::before {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e7edf5;
  content: "";
}

.score-ring.green {
  --ring-color: #0da77a;
}

.score-ring > div {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.score-ring strong {
  color: #172b48;
  font-size: 27px;
  letter-spacing: -0.06em;
}

.score-ring span {
  color: #8a98ab;
  font-size: 9px;
}

.master-score-copy {
  min-width: 0;
  flex: 1;
}

.master-score-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.master-score-label span {
  color: #203754;
  font-size: 14px;
  font-weight: 750;
}

.master-score-label svg {
  width: 16px;
  color: #9aa9bc;
}

.master-score-copy > p {
  min-height: 34px;
  margin: 7px 0 12px;
  color: #6c7d94;
  font-size: 10px;
  line-height: 1.6;
}

.score-deltas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: #7b899c;
  font-size: 9px;
}

.score-deltas span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.score-deltas svg,
.metric-card-bottom svg {
  width: 12px;
  height: 12px;
}

.positive-change {
  color: #088563 !important;
}

.negative-change {
  color: #d55436 !important;
}

.acceptance-card {
  min-width: 0;
  padding: 16px 17px;
}

.acceptance-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.acceptance-card-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acceptance-card-head span {
  color: #2b6ed7;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.acceptance-card-head strong {
  color: #223752;
  font-size: 12px;
}

.acceptance-card-head svg {
  width: 20px;
  color: #2d6cd4;
}

.acceptance-steps {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.acceptance-steps button {
  display: grid;
  grid-template-columns: 25px 1fr 18px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #f7f9fc;
  color: inherit;
  text-align: left;
}

.acceptance-steps button:hover {
  border-color: #cfe0f7;
  background: #f1f6ff;
}

.step-index {
  color: #90a0b5;
  font-size: 9px;
  font-weight: 800;
}

.acceptance-steps button > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.acceptance-steps strong {
  color: #2a3d57;
  font-size: 10px;
}

.acceptance-steps small {
  overflow: hidden;
  color: #8290a4;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acceptance-steps svg {
  width: 15px;
  color: #0c9e72;
}

.content-card {
  min-width: 0;
  padding: 18px;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
}

.section-heading h2 {
  margin: 0;
  color: #1c304d;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.section-heading > div > span {
  display: block;
  margin-top: 4px;
  color: #7a899d;
  font-size: 10px;
}

.section-heading-action {
  flex: 0 0 auto;
}

.section-heading-action button svg {
  width: 13px;
}

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

.metric-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid #e2e8f1;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #fbfcfe);
  color: inherit;
  text-align: left;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.metric-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #60728c;
  font-size: 10px;
  font-weight: 650;
}

.metric-card-top svg {
  width: 13px;
  color: #a0adbd;
}

.metric-value {
  margin: 8px 0 7px;
  color: #142947;
  font-size: 26px;
  font-weight: 780;
  letter-spacing: -0.045em;
}

.metric-value small {
  margin-left: 3px;
  color: #718198;
  font-size: 10px;
  font-weight: 600;
}

.metric-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  font-size: 9px;
}

.metric-card-bottom > span {
  display: flex;
  align-items: center;
  gap: 2px;
}

.metric-baseline {
  color: #9aa6b6;
}

.metric-card > p {
  margin: 10px 0 0;
  padding-top: 9px;
  overflow: hidden;
  border-top: 1px solid #edf0f5;
  color: #708197;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-grid {
  display: grid;
  gap: 14px;
}

.dashboard-grid-main {
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.75fr);
}

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

.trend-chart-wrap {
  width: 100%;
  min-height: 250px;
}

.trend-chart-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
}

.chart-axis-label {
  fill: #8795a8;
  font-family: var(--font-sans);
  font-size: 10px;
}

.chart-value-label {
  fill: #fff;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 750;
}

.chart-footnote {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 3px;
  padding: 9px 11px;
  border-radius: 9px;
  background: #f5f8fd;
  color: #64758c;
  font-size: 9px;
  line-height: 1.55;
}

.chart-footnote svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: #2e6dd1;
}

.priority-card {
  display: flex;
  flex-direction: column;
}

.insight-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
}

.insight-list button {
  display: grid;
  min-height: 62px;
  grid-template-columns: 36px 1fr 16px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #e5eaf2;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.insight-list button:hover {
  border-color: #c8d9f0;
  background: #f8fbff;
}

.insight-list button > svg {
  width: 14px;
  color: #9aa8b9;
}

.insight-icon,
.notice-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
}

.insight-icon svg,
.notice-icon svg {
  width: 16px;
}

.insight-icon.blue,
.notice-icon.blue {
  background: #e8f1ff;
  color: #2563eb;
}

.insight-icon.orange,
.notice-icon.orange {
  background: #fff1df;
  color: #df7812;
}

.insight-icon.red,
.notice-icon.red {
  background: #ffebeb;
  color: #d64141;
}

.insight-icon.green {
  background: #e5f7f0;
  color: #0b966c;
}

.insight-list button > div {
  min-width: 0;
}

.insight-list strong {
  color: #263b57;
  font-size: 10px;
}

.insight-list p {
  margin: 3px 0 0;
  overflow: hidden;
  color: #7c8b9e;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-shell {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e1e7f0;
  border-radius: 11px;
}

.table-shell table {
  min-width: 820px;
}

.table-shell thead {
  background: #f5f8fc;
}

.table-shell th {
  height: 39px;
  color: #687a92;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.table-shell td {
  height: 45px;
  color: #52657f;
  font-size: 10px;
}

.table-shell td strong {
  color: #213957;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover td {
  background: #f6faff;
}

.table-progress {
  display: grid;
  grid-template-columns: 35px 80px;
  align-items: center;
  gap: 7px;
}

.table-progress [data-slot="progress"],
.health-score-line [data-slot="progress"] {
  height: 5px;
  background: #e5ebf3;
}

.status-positive {
  border-color: #bce7d8 !important;
  background: #ebf9f4 !important;
  color: #087a59 !important;
}

.status-warning {
  border-color: #f5d2a9 !important;
  background: #fff6e9 !important;
  color: #b9600a !important;
}

.status-neutral {
  border-color: #d7e2f1 !important;
  background: #f2f6fc !important;
  color: #58708f !important;
}

.keyword-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.keyword-list > button {
  display: grid;
  min-height: 50px;
  grid-template-columns: minmax(175px, 1fr) minmax(135px, 0.7fr) 72px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e4e9f1;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  text-align: left;
}

.keyword-list > button:hover {
  border-color: #c9d8ed;
  background: #f8fbff;
}

.keyword-list > button > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.keyword-list strong {
  overflow: hidden;
  color: #273c59;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keyword-list > button > div:first-child span {
  color: #8997a9;
  font-size: 8px;
}

.rank-route {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8996a8;
  font-size: 9px;
}

.rank-route svg {
  width: 11px;
}

.rank-route b {
  color: #1d64d8;
  font-size: 13px;
}

.health-score-line {
  padding: 12px 14px;
  border: 1px solid #dde7f2;
  border-radius: 11px;
  background: linear-gradient(135deg, #f8fbff, #f1f7ff);
}

.health-score-line > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 9px;
}

.health-score-line span {
  color: #50647e;
  font-size: 10px;
  font-weight: 650;
}

.health-score-line strong {
  color: #0a875f;
  font-size: 20px;
}

.health-checks {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.health-checks > div {
  display: grid;
  min-height: 42px;
  grid-template-columns: 18px 1fr auto 58px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #edf1f5;
}

.health-checks svg {
  width: 15px;
  color: #0da77a;
}

.health-checks span,
.health-checks strong {
  font-size: 9px;
}

.health-checks span {
  color: #65778f;
}

.health-checks strong {
  color: #2c415d;
}

.health-checks [data-slot="badge"] {
  justify-self: end;
  color: #708197;
  font-size: 8px;
}

.full-width-button {
  width: 100%;
  margin-top: 12px;
}

.full-width-button svg {
  width: 13px;
}

.scaffold-card {
  display: flex;
  min-height: 480px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 48px;
  text-align: center;
}

.scaffold-icon {
  display: grid;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  place-items: center;
  border: 1px solid #cfe0f8;
  border-radius: 18px;
  background: linear-gradient(145deg, #f4f8ff, #e8f2ff);
  color: #2563eb;
}

.scaffold-icon svg {
  width: 28px;
  height: 28px;
}

.scaffold-card h2 {
  margin: 13px 0 5px;
  color: #1d324f;
  font-size: 22px;
}

.scaffold-card > p {
  max-width: 520px;
  margin: 0;
  color: #718197;
  font-size: 12px;
  line-height: 1.7;
}

.scaffold-features {
  display: grid;
  width: 100%;
  max-width: 700px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 24px;
}

.scaffold-features span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border: 1px solid #e0e7f0;
  border-radius: 10px;
  background: #f8fafd;
  color: #566b85;
  font-size: 10px;
  text-align: left;
}

.scaffold-features svg {
  width: 14px;
  flex: 0 0 auto;
  color: #0a9e72;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 24px 20px;
  color: #8a98a9;
  font-size: 9px;
}

.site-footer > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-footer .aw-logo {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
  padding: 2px;
  border-radius: 7px;
  font-size: 7px;
  line-height: 19px;
}

.site-footer .aw-logo::after {
  inset-block: 4px;
}

.search-dialog,
.detail-sheet,
.notification-sheet {
  border-color: #dbe4ef;
  background: #fff;
}

.search-input-wrap {
  position: relative;
}

.search-input-wrap > svg {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12px;
  width: 17px;
  color: #7e8ca0;
  transform: translateY(-50%);
}

.search-input-wrap input {
  height: 46px;
  padding-left: 40px;
  background: #f8faff;
}

.search-result-list {
  display: flex;
  max-height: 58vh;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
}

.search-result-list > button {
  display: grid;
  grid-template-columns: 76px 1fr 18px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  text-align: left;
}

.search-result-list > button:hover {
  border-color: #d9e4f3;
  background: #f7faff;
}

.search-result-list > button > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.search-result-list strong,
.search-result-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-list strong {
  color: #273b58;
  font-size: 11px;
}

.search-result-list span {
  color: #7b8a9e;
  font-size: 9px;
}

.search-result-list > button > svg {
  width: 14px;
  color: #9ba9b9;
}

.search-empty {
  display: flex;
  min-height: 210px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  color: #8190a3;
}

.search-empty svg {
  width: 28px;
  margin-bottom: 5px;
}

.search-empty strong {
  color: #53677f;
  font-size: 12px;
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 5px 16px 16px;
}

.notification-list button {
  display: grid;
  grid-template-columns: 38px 1fr 18px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e1e7f0;
  border-radius: 11px;
  background: #fff;
  color: inherit;
  text-align: left;
}

.notification-list button:hover {
  border-color: #c9d9ee;
  background: #f8fbff;
}

.notification-list button > div {
  min-width: 0;
}

.notification-list strong {
  color: #2b405d;
  font-size: 10px;
}

.notification-list p {
  margin: 4px 0;
  color: #74859b;
  font-size: 9px;
}

.notification-list small {
  color: #9aa7b6;
  font-size: 8px;
}

.notification-list button > svg {
  width: 14px;
  color: #9aa8b9;
}

.detail-sheet {
  overflow-y: auto;
}

.detail-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 0 16px 24px;
}

.detail-score {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid #dce6f2;
  border-radius: 13px;
  background: linear-gradient(145deg, #f9fbff, #edf5ff);
}

.detail-score .score-ring {
  flex-basis: 96px;
  width: 96px;
  height: 96px;
}

.detail-score > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.detail-score span {
  color: #7b8b9e;
  font-size: 9px;
}

.detail-score strong {
  color: #0a8b65;
  font-size: 11px;
}

.detail-score p {
  margin: 0;
  color: #62748c;
  font-size: 10px;
  line-height: 1.6;
}

.formula-block,
.definition-card,
.evidence-route {
  padding: 14px;
  border: 1px solid #dde5ef;
  border-radius: 11px;
  background: #f8fafd;
}

.formula-block > span,
.definition-card > span,
.evidence-route > span {
  display: block;
  margin-bottom: 7px;
  color: #2d69c8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.formula-block strong {
  display: block;
  color: #2d415e;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.8;
}

.formula-block code {
  display: block;
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #0e294e;
  color: #dfeaff;
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.7;
}

.formula-block .formula-audit-note {
  display: block;
  margin-top: 8px;
  color: #b45309;
  font-size: 9px;
  line-height: 1.6;
}

.definition-card p {
  margin: 0;
  color: #5d708a;
  font-size: 10px;
  line-height: 1.75;
}

.detail-kpi-row {
  display: grid;
  grid-template-columns: 1fr 16px 1fr 16px 1fr;
  align-items: center;
  gap: 5px;
}

.detail-kpi-row > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid #e0e6ef;
  border-radius: 10px;
  background: #f9fbfd;
}

.detail-kpi-row > svg {
  width: 14px;
  color: #9aa8b8;
}

.detail-kpi-row span,
.detail-metric-grid span {
  color: #7d8da1;
  font-size: 8px;
}

.detail-kpi-row strong,
.detail-metric-grid strong {
  color: #2b405d;
  font-size: 15px;
}

.detail-kpi-row .current {
  border-color: #bbd4f6;
  background: #eef5ff;
}

.detail-kpi-row .current strong {
  color: #1f64d6;
}

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

.detail-metric-grid > div {
  display: flex;
  min-height: 72px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 13px;
  border: 1px solid #dfe6f0;
  border-radius: 10px;
  background: #f8fafd;
}

.evidence-route > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: #5f728b;
  font-size: 9px;
}

.evidence-route svg {
  width: 11px;
  color: #8b9aae;
}

@media (max-width: 1320px) {
  .project-select {
    width: 196px;
  }

  .search-trigger {
    min-width: 136px;
  }

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

  .acceptance-card {
    grid-column: 1 / -1;
  }

  .acceptance-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .topbar-actions .project-select,
  .topbar-actions .search-trigger {
    display: none;
  }

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

  .dashboard-grid-main,
  .dashboard-grid-equal {
    grid-template-columns: 1fr;
  }

  .project-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .project-facts {
    width: 100%;
  }
}

@media (max-width: 820px) {
  .topbar {
    min-height: 62px;
    padding-inline: 14px;
  }

  .month-select {
    display: none;
  }

  .topbar-title h2 {
    font-size: 15px;
  }

  .context-strip {
    padding-inline: 14px;
  }

  .context-strip > div:nth-child(3),
  .context-strip > div:nth-child(4),
  .readonly-badge {
    display: none;
  }

  .dashboard-content {
    padding: 17px 14px 28px;
  }

  .page-intro {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .page-number {
    font-size: 34px;
  }

  .page-intro-copy h1 {
    font-size: 21px;
  }

  .page-intro-action {
    display: none;
  }

  .project-facts {
    grid-template-columns: 1fr;
  }

  .project-facts > div {
    min-width: 0;
    padding: 8px 15px;
    border-right: 0;
    border-bottom: 1px solid #dce6f3;
  }

  .project-facts > div:last-child {
    border-bottom: 0;
  }

  .score-grid {
    grid-template-columns: 1fr;
  }

  .acceptance-card {
    grid-column: auto;
  }

  .acceptance-steps {
    display: flex;
  }

  .metric-grid {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: 14px;
  }
}

@media (max-width: 560px) {
  .topbar-actions .notification-button {
    display: none;
  }

  .export-button {
    min-width: auto;
  }

  .export-button svg:last-child {
    display: none;
  }

  .context-strip > div:nth-child(2) {
    display: none;
  }

  .context-strip > button {
    margin-left: 8px;
  }

  .project-hero,
  .content-card {
    padding: 14px;
    border-radius: 13px;
  }

  .client-mark {
    flex-basis: 47px;
    width: 47px;
    height: 47px;
    border-radius: 12px;
    font-size: 19px;
  }

  .project-identity h2 {
    font-size: 16px;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .master-score-card {
    align-items: flex-start;
  }

  .score-ring {
    flex-basis: 90px;
    width: 90px;
    height: 90px;
  }

  .score-ring strong {
    font-size: 23px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-heading-action {
    width: 100%;
  }

  .section-heading-action button {
    width: 100%;
  }

  .keyword-list > button {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .rank-route {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .scaffold-card {
    min-height: 420px;
    padding: 25px 14px;
  }

  .scaffold-features {
    grid-template-columns: 1fr;
  }

  .detail-kpi-row {
    grid-template-columns: 1fr;
  }

  .detail-kpi-row > svg {
    display: none;
  }
}

@media print {
  .app-sidebar,
  .topbar,
  .context-strip,
  .site-footer,
  button,
  [data-sonner-toaster] {
    display: none !important;
  }

  .dashboard-content {
    max-width: none;
    padding: 0;
  }

  .content-card,
  .master-score-card,
  .acceptance-card,
  .project-hero {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* Real project intake, evidence storage and snapshot operations */
.topbar-live.pending {
  border-color: #f2d6a7;
  background: #fff8e8;
  color: #9a6417;
}

.topbar-live.pending i {
  background: #e9a536;
  box-shadow: 0 0 0 4px rgba(233, 165, 54, 0.12);
}

.ops-nav-button {
  margin-bottom: 5px;
  border: 1px solid rgba(84, 173, 235, 0.2) !important;
  background: rgba(225, 246, 255, 0.72) !important;
}

.ops-nav-button .sidebar-number {
  color: #268bd2;
  font-size: 8px;
}

.ops-content {
  width: 100%;
  max-width: 1700px;
}

.ops-page {
  display: grid;
  gap: 18px;
}

.ops-hero {
  position: relative;
  display: flex;
  min-height: 168px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 32px;
  overflow: hidden;
  border: 1px solid rgba(109, 188, 241, 0.38);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% -30%, rgba(75, 181, 255, 0.38), transparent 28rem),
    radial-gradient(circle at 10% 130%, rgba(133, 225, 255, 0.2), transparent 24rem),
    linear-gradient(120deg, rgba(255, 255, 255, 0.99), rgba(231, 247, 255, 0.98));
  box-shadow: 0 24px 60px rgba(55, 143, 203, 0.12), inset 0 1px rgba(255, 255, 255, 0.94);
}

.ops-hero::after {
  position: absolute;
  right: 38%;
  bottom: -124px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(77, 172, 235, 0.11);
  border-radius: 50%;
  box-shadow: 0 0 0 32px rgba(80, 178, 241, 0.035), 0 0 0 66px rgba(80, 178, 241, 0.025);
  content: "";
}

.ops-hero > div {
  position: relative;
  z-index: 1;
}

.ops-hero .badge {
  border-color: #b8e5d6;
  background: rgba(238, 251, 247, 0.86);
  color: #0b8661;
}

.ops-hero h1 {
  margin: 12px 0 7px;
  color: #153a59;
  font-size: clamp(25px, 2.2vw, 36px);
  font-weight: 830;
  letter-spacing: -0.045em;
}

.ops-hero p {
  max-width: 680px;
  margin: 0;
  color: #64839a;
  font-size: 12px;
  line-height: 1.8;
}

.ops-hero-actions {
  display: flex;
  gap: 9px;
}

.ops-hero-actions button {
  min-height: 42px;
  border-radius: 11px;
}

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

.ops-kpi-grid > div {
  position: relative;
  min-height: 122px;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid #d7eaf6;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,249,255,.96));
  box-shadow: 0 13px 34px rgba(61, 139, 193, 0.07), inset 0 1px #fff;
}

.ops-kpi-grid > div::after {
  position: absolute;
  top: -50px;
  right: -45px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: rgba(88, 183, 245, 0.08);
  content: "";
}

.ops-kpi-grid span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #66859c;
  font-size: 10px;
  font-weight: 700;
}

.ops-kpi-grid span svg {
  width: 15px;
  color: #328fdc;
}

.ops-kpi-grid strong {
  display: block;
  margin: 7px 0 3px;
  color: #173d5b;
  font-size: 30px;
  font-weight: 820;
  letter-spacing: -0.055em;
}

.ops-kpi-grid small {
  color: #91a6b7;
  font-size: 9px;
}

.ops-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 13px;
  border: 1px solid #d7e8f4;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px #fff;
}

.ops-flow > div {
  display: flex;
  min-height: 43px;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid #e2edf5;
  border-radius: 10px;
  background: #f9fcff;
}

.ops-flow > div.done {
  border-color: #cbe8dd;
  background: #f2fbf8;
}

.ops-flow > div span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 8px;
  background: #e7f5ff;
  color: #2889d3;
  font-size: 8px;
  font-weight: 850;
}

.ops-flow > div.done span {
  background: #dff5ed;
  color: #10805f;
}

.ops-flow strong {
  color: #416179;
  font-size: 10px;
}

.ops-flow > svg {
  width: 13px;
  color: #9bb6c9;
}

.ops-tabs [data-slot="tabs-list"] {
  width: 100%;
  justify-content: flex-start;
  gap: 24px;
  padding-inline: 8px;
  border-bottom: 1px solid #d8e9f5;
  background: transparent;
}

.ops-tabs [data-slot="tabs-trigger"] {
  min-width: 104px;
  color: #64839a;
  font-size: 11px;
  font-weight: 750;
}

.ops-tabs [data-slot="tabs-trigger"][data-state="active"] {
  color: #2387d4;
}

.ops-tabs [data-slot="tabs-content"] {
  padding-top: 15px;
}

.ops-panel {
  min-width: 0;
  padding: 21px;
  border: 1px solid #d5e8f5;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 42px rgba(61, 139, 193, 0.075), inset 0 1px #fff;
}

.ops-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.ops-panel-heading span {
  color: #3894d8;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .19em;
}

.ops-panel-heading h2 {
  margin: 3px 0;
  color: #1b4261;
  font-size: 17px;
  font-weight: 790;
}

.ops-panel-heading p {
  margin: 0;
  color: #8097a9;
  font-size: 10px;
  line-height: 1.65;
}

.ops-panel-heading button {
  flex: 0 0 auto;
}

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

.ops-project-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  min-height: 116px;
  padding: 15px;
  border: 1px solid #dbeaf5;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #f6fbff);
  text-align: left;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}

.ops-project-card:hover,
.ops-project-card.active {
  border-color: #83c5ef;
  box-shadow: 0 13px 28px rgba(61, 148, 208, 0.12);
  transform: translateY(-2px);
}

.ops-project-card.active {
  background: linear-gradient(145deg, #fff, #edf8ff);
}

.ops-brand-mark,
.project-bridge-brand > div {
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(73, 160, 222, 0.3);
  border-radius: 14px;
  background: linear-gradient(145deg, #68c9ff, #2b8ee6);
  box-shadow: 0 9px 20px rgba(46, 142, 211, 0.18);
  color: #fff;
  font-size: 18px;
  font-weight: 850;
}

.ops-brand-mark {
  width: 52px;
  height: 52px;
}

.ops-brand-mark img,
.project-bridge-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.ops-project-copy > span {
  display: block;
  color: #8ca2b3;
  font-size: 8px;
}

.ops-project-copy > strong {
  display: block;
  margin-top: 3px;
  color: #244b68;
  font-size: 12px;
}

.ops-project-copy p {
  overflow: hidden;
  margin: 5px 0 8px;
  color: #718a9d;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-project-copy > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ops-project-copy small {
  color: #92a7b7;
  font-size: 8px;
}

.ops-tone-green { border-color: #c4e7db !important; background: #eefaf6 !important; color: #0c8461 !important; }
.ops-tone-orange { border-color: #efd8af !important; background: #fff8e9 !important; color: #9b6619 !important; }
.ops-tone-blue { border-color: #cce4f5 !important; background: #f0f9ff !important; color: #2e83c4 !important; }

.ops-project-counts {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 7px;
  padding-left: 13px;
  border-left: 1px solid #e2edf5;
}

.ops-project-counts b {
  color: #2d6f9f;
  font-size: 13px;
  text-align: right;
}

.ops-project-counts span {
  color: #91a6b5;
  font-size: 8px;
}

.ops-selected-project {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(110px, auto)) auto;
  gap: 18px;
  align-items: center;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #d6e9f5;
  border-radius: 12px;
  background: #f6fbff;
}

.ops-selected-project > div:first-child {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 7px;
}

.ops-selected-project svg { width: 15px; color: #338fd4; }
.ops-selected-project span { color: #8097a9; font-size: 8px; }
.ops-selected-project strong { color: #2a506c; font-size: 10px; }

.ops-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(310px, .72fr);
  gap: 14px;
}

.ops-two-column.snapshots {
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .75fr);
}

.ops-import-form,
.ops-project-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.ops-import-form > div,
.ops-project-form > div {
  display: grid;
  gap: 6px;
}

.ops-import-form .wide,
.ops-project-form .wide {
  grid-column: 1 / -1;
}

.ops-import-form label,
.ops-project-form label {
  color: #58768e;
  font-size: 9px;
  font-weight: 750;
}

.ops-import-form input,
.ops-import-form [data-slot="select-trigger"],
.ops-project-form input {
  min-height: 40px;
  border-color: #d6e8f4;
  background: #fbfdff;
}

.ops-dropzone {
  min-height: 164px;
  cursor: pointer;
  place-items: center;
  align-content: center;
  padding: 25px;
  border: 1px dashed #8ac8ee;
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 0%, rgba(101, 196, 250, .15), transparent 13rem),
    #f6fbff;
  text-align: center;
  transition: border-color .16s, background .16s;
}

.ops-dropzone:hover {
  border-color: #3b9ddd;
  background-color: #eef9ff;
}

.ops-dropzone > svg {
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  color: #3b9ddd;
}

.ops-dropzone strong {
  color: #315b79;
  font-size: 11px;
}

.ops-dropzone span {
  color: #8ca4b6;
  font-size: 9px;
}

.ops-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.ops-import-actions {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ops-import-actions > div > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #758fa2;
  font-size: 9px;
}

.ops-import-actions svg { width: 14px; }

.ops-check-list {
  display: grid;
  gap: 8px;
}

.ops-check-list > div {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid #dfecf5;
  border-radius: 10px;
  background: #f9fcff;
  color: #59758b;
  font-size: 9px;
}

.ops-check-list svg {
  width: 15px;
  color: #17a477;
}

.ops-boundary {
  display: flex;
  gap: 10px;
  margin-top: 13px;
  padding: 12px;
  border: 1px solid #cbe8dd;
  border-radius: 11px;
  background: #f1faf7;
}

.ops-boundary > svg { flex: 0 0 auto; width: 17px; color: #128462; }
.ops-boundary strong { color: #28634f; font-size: 9px; }
.ops-boundary p { margin: 3px 0 0; color: #64887a; font-size: 8px; line-height: 1.6; }

.ops-table-note { color: #8aa0b1; font-size: 8px; }

.ops-import-history {
  display: grid;
  gap: 8px;
}

.ops-import-history > div:not(.ops-empty-history) {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dfebf4;
  border-radius: 11px;
  background: #fbfdff;
}

.ops-job-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: #eaf7ff;
  color: #318ed1;
}

.ops-job-icon.completed { background: #e9f8f3; color: #168460; }
.ops-job-icon.partial { background: #fff5e5; color: #ae6c15; }
.ops-job-icon.failed { background: #fff0ef; color: #bf5549; }
.ops-job-icon svg { width: 16px; }

.ops-import-history strong { color: #3b5d75; font-size: 9px; }
.ops-import-history p { margin: 2px 0; color: #8299aa; font-size: 8px; }
.ops-import-history small { color: #9aaebb; font-size: 7px; }
.ops-import-history > div > div:last-child { display: grid; text-align: right; }
.ops-import-history > div > div:last-child b { color: #2e6e9c; font-size: 11px; }
.ops-import-history > div > div:last-child span { color: #91a5b4; font-size: 7px; }
.ops-error-count { color: #bd5c50 !important; }
.ops-success-count { color: #16805f !important; }

.ops-error-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: #bd5c50;
  font-size: 7px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ops-validation-summary {
  display: flex;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid #f0d2cb;
  border-radius: 12px;
  background: #fff5f2;
}

.ops-validation-summary > svg {
  flex: 0 0 auto;
  width: 18px;
  color: #c35d4e;
}

.ops-validation-summary strong { display: block; color: #8d493f; font-size: 10px; }
.ops-validation-summary span { display: block; margin-top: 2px; color: #a97870; font-size: 8px; }
.ops-validation-table { max-height: 360px; overflow: auto; }
.ops-validation-table code { color: #2d739f; font-size: 8px; }

.ops-empty-history,
.ops-loading {
  display: grid;
  min-height: 240px;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #7f98aa;
  text-align: center;
}

.ops-loading {
  min-height: 55vh;
}

.ops-loading > svg,
.ops-empty-history > svg {
  width: 34px;
  height: 34px;
  color: #3f9bd9;
}

.ops-loading strong,
.ops-empty-history strong { color: #395f7a; font-size: 12px; }
.ops-loading span,
.ops-empty-history span { max-width: 340px; font-size: 9px; line-height: 1.6; }
.ops-loading.error > svg { color: #d26d5f; }

.ops-project-form {
  padding-block: 4px;
}

.project-bridge-hero {
  display: grid;
  grid-template-columns: minmax(250px, .7fr) minmax(0, 1.5fr);
  min-height: 180px;
  overflow: hidden;
  border: 1px solid #cfe5f3;
  border-radius: 20px;
  background:
    radial-gradient(circle at 80% -20%, rgba(83, 188, 251, .25), transparent 26rem),
    linear-gradient(120deg, #fff, #eaf8ff);
  box-shadow: 0 20px 48px rgba(58, 144, 202, .1);
}

.project-bridge-brand {
  display: grid;
  place-items: start;
  align-content: center;
  padding: 26px;
  border-right: 1px solid #d5e8f4;
}

.project-bridge-brand > div {
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
}

.project-bridge-brand > span {
  color: #3e98d8;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .18em;
}

.project-bridge-brand h2 {
  margin: 4px 0 1px;
  color: #214a68;
  font-size: 22px;
  font-weight: 820;
}

.project-bridge-brand p { margin: 0; color: #8199aa; font-size: 9px; }

.project-bridge-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 1px;
  padding: 24px;
}

.project-bridge-facts > div {
  display: grid;
  min-height: 64px;
  align-content: center;
  gap: 4px;
  padding: 11px 15px;
  border: 1px solid rgba(212, 232, 245, .85);
  background: rgba(255,255,255,.64);
}

.project-bridge-facts span { color: #829cad; font-size: 8px; }
.project-bridge-facts strong { color: #365f79; font-size: 11px; }

.project-bridge-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.project-bridge-stats > div {
  min-height: 112px;
  padding: 17px;
  border: 1px solid #d7e9f5;
  border-radius: 15px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 30px rgba(57, 136, 190, .07);
}

.project-bridge-stats span { color: #7892a5; font-size: 9px; }
.project-bridge-stats strong { display: block; margin: 8px 0 3px; color: #275576; font-size: 26px; }
.project-bridge-stats small { color: #98aab8; font-size: 8px; }

.project-readiness-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 9px;
}

.project-readiness-flow > div {
  display: grid;
  min-height: 88px;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid #dceaf4;
  border-radius: 12px;
  background: #f9fcff;
}

.project-readiness-flow > div.done { border-color: #cbe7dd; background: #f2faf7; }
.project-readiness-flow > div > span { color: #3c94d3; font-size: 8px; font-weight: 850; }
.project-readiness-flow > div > strong { color: #3b6079; font-size: 10px; }
.project-readiness-flow > div > small { color: #8ca2b2; font-size: 8px; }
.project-readiness-flow > svg { width: 14px; color: #9cb5c7; }

.project-readiness-note {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid #d5e8f5;
  border-radius: 10px;
  background: #f3faff;
  color: #678398;
  font-size: 9px;
  line-height: 1.65;
}

.project-readiness-note svg { flex: 0 0 auto; width: 15px; color: #3a93d2; }

.spin { animation: ops-spin .9s linear infinite; }

@keyframes ops-spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .ops-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-project-grid { grid-template-columns: 1fr; }
  .ops-two-column,
  .ops-two-column.snapshots { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .ops-hero { align-items: flex-start; flex-direction: column; padding: 23px; }
  .ops-flow { grid-template-columns: 1fr; }
  .ops-flow > svg { display: none; }
  .ops-selected-project { grid-template-columns: 1fr 1fr; }
  .project-bridge-hero { grid-template-columns: 1fr; }
  .project-bridge-brand { border-right: 0; border-bottom: 1px solid #d5e8f4; }
  .project-bridge-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-readiness-flow { grid-template-columns: 1fr 1fr; }
  .project-readiness-flow > svg { display: none; }
}

@media (max-width: 620px) {
  .ops-kpi-grid,
  .ops-project-form,
  .ops-import-form,
  .project-bridge-facts,
  .project-bridge-stats { grid-template-columns: 1fr; }
  .ops-hero-actions,
  .ops-import-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .ops-project-card { grid-template-columns: 48px minmax(0, 1fr); }
  .ops-project-counts { display: none; }
  .ops-selected-project { grid-template-columns: 1fr; }
  .ops-panel { padding: 16px; }
  .ops-panel-heading { align-items: stretch; flex-direction: column; }
  .project-readiness-flow { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ops-project-card { transition: none; }
  .spin { animation-duration: 1.8s; }
}

@media print {
  .ops-nav-button,
  .ops-content,
  .project-readiness-card button {
    display: none !important;
  }
}

/* 02—10 shared modules */
.module-top-gap {
  margin-top: 14px;
}

.inline-actions,
.filter-buttons,
.drawer-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.status-blue {
  border-color: #c7dcfb !important;
  background: #edf5ff !important;
  color: #225fc1 !important;
}

.status-danger {
  border-color: #fac8c8 !important;
  background: #fff0f0 !important;
  color: #c53232 !important;
}

.module-stat-grid {
  display: grid;
  gap: 10px;
}

.module-stat-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.module-stat-grid.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.module-stat-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 126px;
  flex-direction: column;
  padding: 15px;
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 13px;
  background: linear-gradient(145deg, #fff, #fbfcfe);
  color: inherit;
  text-align: left;
  box-shadow: 0 8px 25px rgba(28, 58, 102, 0.045);
}

button.module-stat-card:hover {
  border-color: #bcd1ee;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.09);
  transform: translateY(-1px);
}

.module-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #6e7f95;
  font-size: 10px;
  font-weight: 650;
}

.module-stat-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09);
}

.module-stat-dot.green { background: #0aa676; box-shadow: 0 0 0 4px rgba(10,166,118,.09); }
.module-stat-dot.orange { background: #eb841c; box-shadow: 0 0 0 4px rgba(235,132,28,.09); }
.module-stat-dot.red { background: #dc4646; box-shadow: 0 0 0 4px rgba(220,70,70,.09); }

.module-stat-card > strong {
  margin-top: 9px;
  color: #162b48;
  font-size: 24px;
  font-weight: 780;
  letter-spacing: -0.045em;
}

.module-stat-card > small {
  margin-top: 5px;
  font-size: 9px;
  font-weight: 650;
}

.module-stat-card > p {
  margin: auto 0 0;
  padding-top: 9px;
  overflow: hidden;
  border-top: 1px solid #edf1f5;
  color: #8895a7;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-table > div {
  width: 100%;
}

.module-table th {
  white-space: nowrap;
}

.module-table td {
  vertical-align: middle;
}

.module-table .wide-cell {
  min-width: 210px;
  white-space: normal;
  line-height: 1.55;
}

.primary-value {
  color: #1d64d7;
  font-size: 12px;
}

.module-empty {
  min-height: 260px;
  border: 1px dashed #ced9e7;
  background: #fafcff;
}

.module-line-chart svg {
  display: block;
  width: 100%;
  min-height: 190px;
  max-height: 250px;
}

.module-line-chart text {
  fill: #8795a8;
  font-family: var(--font-sans);
  font-size: 10px;
}

.module-line-chart .last-value {
  fill: #223b5e;
  font-weight: 750;
}

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

.dual-trend > div {
  padding: 11px;
  border: 1px solid #e3e9f1;
  border-radius: 11px;
}

.dual-trend > div > span {
  color: #405876;
  font-size: 10px;
  font-weight: 750;
}

.evidence-card-list,
.answer-card-list,
.focus-risk-list,
.closed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.evidence-card-list button {
  display: grid;
  min-height: 74px;
  grid-template-columns: 34px 1fr 16px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  text-align: left;
}

.evidence-card-list button:hover,
.focus-risk-list button:hover,
.closed-list button:hover {
  border-color: #bdd1ee;
  background: #f8fbff;
}

.evidence-card-list button > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: #eaf2ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
}

.evidence-card-list button > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.evidence-card-list strong {
  color: #2d415d;
  font-size: 10px;
}

.evidence-card-list small {
  color: #8794a6;
  font-size: 8px;
}

.evidence-card-list button > svg {
  width: 14px;
  color: #9aa7b7;
}

.module-detail-sheet .record-id {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid #d8e3f1;
  border-radius: 9px;
  background: #edf5ff;
  color: #235cae;
  font-size: 9px;
  font-weight: 700;
}

.record-id svg {
  width: 14px;
}

.answer-quote {
  position: relative;
  padding: 16px 16px 16px 42px;
  border: 1px solid #dbe5f1;
  border-radius: 11px;
  background: #f8fafd;
}

.answer-quote svg {
  position: absolute;
  top: 17px;
  left: 15px;
  width: 18px;
  color: #3b75d2;
}

.answer-quote p {
  margin: 0;
  color: #455c78;
  font-size: 11px;
  line-height: 1.85;
}

.decision-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.decision-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid #e0e7f0;
  border-radius: 9px;
  background: #fff;
}

.decision-grid span {
  color: #8391a4;
  font-size: 8px;
}

.decision-grid b {
  color: #263f5e;
  font-size: 11px;
}

.evidence-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #f4f8fd;
}

.evidence-path span {
  padding: 5px 7px;
  border-radius: 6px;
  background: #fff;
  color: #526880;
  font-size: 8px;
  font-weight: 650;
}

.evidence-path svg {
  width: 11px;
  color: #96a5b7;
}

.drawer-note,
.commitment-boundary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  background: #f6f9fd;
  color: #61748c;
  font-size: 9px;
  line-height: 1.6;
}

.drawer-note svg,
.commitment-boundary > svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #2d6dcc;
}

.small-strong {
  font-size: 10px !important;
}

.protocol-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.protocol-list > div {
  display: grid;
  min-height: 40px;
  grid-template-columns: 18px minmax(120px, .7fr) 1.3fr;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-bottom: 1px solid #e9edf3;
  color: #5d718a;
  font-size: 9px;
}

.protocol-list > div svg {
  width: 14px;
  color: #0aa676;
}

.protocol-list > div strong {
  color: #2e435f;
  font-size: 9px;
}

.module-tabs > [data-slot="tabs-list"] {
  width: 100%;
  justify-content: flex-start;
  gap: 14px;
  padding: 0 4px 8px;
  overflow-x: auto;
  border-bottom: 1px solid #dce4ee;
}

.module-tabs [data-slot="tabs-trigger"] {
  flex: 0 0 auto;
  padding-inline: 13px;
}

.module-tabs [data-slot="tabs-content"] {
  margin-top: 13px;
}

.profile-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e0e7f0;
  border-radius: 12px;
  background: radial-gradient(circle at center, #f2f7ff, #fafcff 68%);
}

.profile-cloud span {
  padding: 7px 10px;
  border: 1px solid #d8e3f2;
  border-radius: 999px;
  background: #fff;
  color: #536b88;
  font-size: 9px;
}

.profile-cloud span.strong {
  border-color: #b9d3f7;
  background: #eaf3ff;
  color: #1c5fc7;
  font-size: 10px;
  font-weight: 700;
}

.profile-cloud span.warning {
  border-color: #f1d0a8;
  background: #fff6ea;
  color: #b9620e;
}

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

.brand-fact-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
}

.brand-fact-grid span,
.brand-fact-grid small {
  color: #8593a5;
  font-size: 8px;
}

.brand-fact-grid strong {
  color: #2b425f;
  font-size: 10px;
}

.fact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 13px;
}

.fact-list > div {
  display: grid;
  grid-template-columns: 1fr 36px;
  align-items: center;
  gap: 6px;
}

.fact-list span,
.fact-list strong {
  font-size: 9px;
}

.fact-list span { color: #5e7188; }
.fact-list strong { color: #27415f; text-align: right; }
.fact-list [data-slot="progress"] { grid-column: 1 / -1; height: 6px; }

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

.platform-card-grid > button {
  padding: 13px;
  border: 1px solid #e0e7f0;
  border-radius: 11px;
  background: #fff;
  color: inherit;
  text-align: left;
}

.platform-card-grid > button:hover {
  border-color: #bcd0ec;
  box-shadow: 0 10px 22px rgba(37,99,235,.07);
}

.platform-card-grid > button > div:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.platform-card-grid svg { width: 16px; color: #286ad3; }
.platform-card-grid strong { min-width: 0; flex: 1; color: #263e5b; font-size: 10px; }
.platform-card-metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; margin: 14px 0 11px; }
.platform-card-metrics span { color: #8491a4; font-size: 8px; }
.platform-card-metrics b { color: #314965; font-size: 10px; }
.platform-card-grid [data-slot="progress"] { height: 5px; }

.answer-card-list > button {
  padding: 14px;
  border: 1px solid #dde5ef;
  border-radius: 11px;
  background: #fff;
  color: inherit;
  text-align: left;
}

.answer-card-list > button:hover {
  border-color: #bdd1ed;
  background: #fafcff;
}

.answer-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8794a6;
  font-size: 8px;
}

.answer-card-list h3 { margin: 10px 0 6px; color: #263e5b; font-size: 12px; }
.answer-card-list p { margin: 0; color: #61748c; font-size: 10px; line-height: 1.75; }
.answer-card-list > button > div:last-child { display:flex; justify-content:space-between; margin-top:11px; padding-top:9px; border-top:1px solid #edf1f5; color:#4372b8; font-size:8px; }
.answer-card-list > button > div:last-child span { display:flex; align-items:center; gap:4px; }
.answer-card-list > button > div:last-child svg { width:11px; }

.competitor-bars {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.competitor-bars > div {
  display: grid;
  grid-template-columns: 22px 84px 1fr 38px;
  align-items: center;
  gap: 9px;
  padding: 4px 6px;
  border-radius: 8px;
}

.competitor-bars > div.active { background: #eef5ff; }
.rank-no { color:#8997a8; font-size:9px; font-weight:700; }
.competitor-bars strong { color:#3a506d; font-size:10px; }
.competitor-bars > div > div { height:9px; overflow:hidden; border-radius:99px; background:#edf1f6; }
.competitor-bars > div > div span { display:block; height:100%; border-radius:99px; background:#8da7ca; }
.competitor-bars > div.active > div span { background:linear-gradient(90deg,#2e74e4,#5a98f1); }
.competitor-bars b { color:#2b425e; font-size:10px; text-align:right; }

.position-card {
  display: grid;
  grid-template-columns: 1fr 38px 1fr;
  align-items: center;
  gap: 9px;
  padding: 14px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #f7faff;
}

.position-card > div { display:flex; align-items:center; flex-direction:column; gap:4px; }
.position-card > svg { width:22px; justify-self:center; color:#8b9caf; }
.position-card span { color:#6f8299; font-size:9px; }
.position-card strong { color:#1f60ca; font-size:22px; }
.position-card small { color:#8795a7; font-size:8px; }

.competition-insights { display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.competition-insights > div { display:flex; align-items:flex-start; gap:8px; padding:10px; border:1px solid #e2e7ee; border-radius:9px; color:#64778e; font-size:9px; line-height:1.55; }
.competition-insights svg { width:14px; flex:0 0 auto; }
.competition-insights b { display:block; color:#314762; }
.competition-insights .positive { background:#f0faf6; border-color:#cde9dd; }
.competition-insights .positive svg { color:#0a9c71; }
.competition-insights .warning { background:#fff7ed; border-color:#f1d6b5; }
.competition-insights .warning svg { color:#d67417; }

.chart-legend { display:flex; flex-wrap:wrap; gap:12px; padding:8px 10px; border-top:1px solid #edf1f5; color:#718198; font-size:8px; }
.chart-legend span { display:flex; align-items:center; gap:5px; }
.chart-legend i { width:8px; height:8px; border-radius:99px; background:#2563eb; }
.chart-legend i.orange { background:#e67a17; }
.chart-legend i.green { background:#0aa676; }

.hot-topic-list { display:flex; flex-direction:column; gap:6px; }
.hot-topic-list button { display:grid; grid-template-columns:24px 1fr 50px 14px; align-items:center; gap:8px; padding:9px; border:1px solid #e4e9f0; border-radius:9px; background:#fff; color:inherit; text-align:left; }
.hot-topic-list button:hover { border-color:#efc38f; background:#fffbf5; }
.hot-topic-list button > span { color:#98a4b4; font-size:9px; font-weight:800; }
.hot-topic-list button > div { display:flex; min-width:0; flex-direction:column; gap:3px; }
.hot-topic-list strong { overflow:hidden; color:#344b67; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.hot-topic-list small { color:#8a97a8; font-size:8px; }
.hot-topic-list b { color:#d66e11; font-size:10px; text-align:right; }
.hot-topic-list svg { width:12px; color:#9aa7b6; }

.opportunity-matrix {
  position: relative;
  min-height: 360px;
  margin: 8px 15px 24px 28px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), #d5deea calc(50% - .5px), #d5deea calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(transparent calc(50% - .5px), #d5deea calc(50% - .5px), #d5deea calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(135deg,#f5fbf8 0 50%,#fff9f1 50% 100%);
}

.axis-x,.axis-y { position:absolute; color:#7b8a9d; font-size:8px; }
.axis-x { left:50%; bottom:-20px; transform:translateX(-50%); }
.axis-y { top:50%; left:-32px; writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg); }
.quad-label { position:absolute; color:#93a0b0; font-size:8px; }
.quad-label.tl { top:8px; left:9px; }
.quad-label.tr { top:8px; right:9px; }
.quad-label.bl { bottom:8px; left:9px; }
.quad-label.br { right:9px; bottom:8px; color:#c87322; }
.bubble { position:absolute; display:flex; align-items:center; gap:4px; padding:5px 7px; border:1px solid #b7cff0; border-radius:99px; background:#fff; color:#3b5e8d; transform:translate(-50%,-50%); box-shadow:0 5px 14px rgba(37,99,235,.12); }
.bubble:hover { z-index:3; transform:translate(-50%,-50%) scale(1.06); }
.bubble span { display:grid; width:18px; height:18px; place-items:center; border-radius:99px; background:#e9f2ff; font-size:8px; font-weight:800; }
.bubble small { max-width:95px; overflow:hidden; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.bubble.grade-s { border-color:#f2b6a7; color:#bb462f; box-shadow:0 5px 15px rgba(220,70,70,.14); }
.bubble.grade-s span { background:#fff0ed; }
.bubble.grade-a { border-color:#edc58e; color:#b36616; }
.bubble.grade-a span { background:#fff3df; }

.opportunity-summary { display:flex; flex-direction:column; gap:9px; }
.opportunity-summary > div { display:grid; grid-template-columns:48px 1fr; gap:9px; padding:11px; border:1px solid #e1e7ef; border-radius:10px; }
.opportunity-summary > div.critical { border-color:#f0c1b8; background:#fff8f6; }
.opportunity-summary strong { color:#314864; font-size:10px; }
.opportunity-summary p { margin:4px 0 0; color:#77879b; font-size:8px; line-height:1.6; }

.execution-flow {
  display: grid;
  grid-template-columns: 1fr 26px 1fr 26px 1fr 26px 1fr;
  align-items: center;
  gap: 5px;
}

.execution-flow > button { display:grid; min-height:90px; grid-template-columns:28px 1fr; align-items:center; gap:9px; padding:13px; border:1px solid #dce5ef; border-radius:12px; background:#fff; color:inherit; text-align:left; }
.execution-flow > button:hover { border-color:#b9ceec; background:#f8fbff; }
.execution-flow > svg { width:17px; color:#95a4b6; }
.execution-flow > button > span { display:grid; width:26px; height:26px; place-items:center; border-radius:8px; background:#eaf2ff; color:#2563eb; font-size:8px; font-weight:800; }
.execution-flow > button > div { display:flex; min-width:0; flex-direction:column; gap:4px; }
.execution-flow strong { color:#2d445f; font-size:10px; }
.execution-flow small { color:#8492a4; font-size:8px; line-height:1.4; }
.execution-flow b { grid-column:1/-1; color:#147c5d; font-size:9px; text-align:right; }
.total-row td { background:#f1f6ff !important; color:#245aa9; }

.execution-timeline { display:flex; flex-direction:column; }
.execution-timeline > div { display:grid; grid-template-columns:44px 14px 1fr; gap:8px; min-height:76px; }
.execution-timeline > div > span { padding-top:4px; color:#8492a5; font-size:8px; }
.execution-timeline > div > i { position:relative; width:9px; height:9px; margin-top:4px; border:2px solid #fff; border-radius:99px; background:#2563eb; box-shadow:0 0 0 2px #c9dcf7; }
.execution-timeline > div > i::after { position:absolute; top:10px; bottom:-65px; left:2px; width:1px; background:#d8e1ec; content:""; }
.execution-timeline > div:last-child > i::after { display:none; }
.execution-timeline > div > div { padding-bottom:12px; }
.execution-timeline strong { display:block; margin:6px 0 4px; color:#304763; font-size:10px; }
.execution-timeline p { margin:0; color:#75869b; font-size:9px; line-height:1.55; }

.asset-stack { display:flex; flex-direction:column; gap:8px; }
.asset-stack > div { display:grid; grid-template-columns:38px 1fr 42px; align-items:center; gap:9px; padding:10px; border:1px solid #e1e7ef; border-radius:10px; }
.asset-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:9px; background:#eaf2ff; color:#2563eb; }
.asset-icon svg { width:16px; }
.asset-stack > div > div { display:flex; min-width:0; flex-direction:column; gap:3px; }
.asset-stack strong { color:#314864; font-size:10px; }
.asset-stack small { color:#8693a5; font-size:8px; }
.asset-stack b { color:#1b65d4; font-size:11px; text-align:right; }

.module-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.toolbar-search {
  position: relative;
  min-width: 260px;
  flex: 1;
}

.toolbar-search.compact { min-width:220px; max-width:280px; }
.toolbar-search > svg { position:absolute; z-index:1; top:50%; left:10px; width:14px; color:#8290a3; transform:translateY(-50%); }
.toolbar-search input { padding-left:32px; background:#f9fbfd; }
.module-toolbar [data-slot="select-trigger"] { min-width:140px; background:#fff; }
.bulk-bar.visible { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:8px 10px; border:1px solid #cfe0f7; border-radius:9px; background:#eef5ff; color:#3e5f89; font-size:9px; }
.bulk-bar.visible > span { margin-right:auto; font-weight:700; }

.delivery-title { min-width:280px; }
.delivery-title code { display:block; margin-bottom:4px; color:#8090a4; font-size:8px; }
.delivery-title button { border:0; background:transparent; color:#285b9f; font-size:10px; font-weight:650; text-align:left; }
.module-table td > small { display:block; margin-top:3px; color:#8b98aa; font-size:8px; }
.module-pagination { margin-top:12px; }
.module-pagination a { font-size:9px; }

.acceptance-system {
  display: grid;
  grid-template-columns: 1fr 34px 1fr 34px 1fr;
  align-items: center;
  gap: 7px;
}

.acceptance-system > div { min-height:122px; padding:16px; border:1px solid #dce5ef; border-radius:13px; background:linear-gradient(145deg,#fff,#f8fbff); }
.acceptance-system > svg { width:20px; justify-self:center; color:#95a4b5; }
.acceptance-system span { color:#2b6dd3; font-size:8px; font-weight:800; letter-spacing:.1em; }
.acceptance-system strong { display:block; margin:7px 0 5px; color:#293f5b; font-size:12px; }
.acceptance-system p { margin:0; color:#718299; font-size:9px; }
.acceptance-system small { display:block; margin-top:14px; color:#8a97a8; font-size:8px; }

.score-formula-card { position:relative; overflow:hidden; }
.formula-score { display:flex; align-items:baseline; gap:4px; margin:-4px 0 12px; }
.formula-score strong { color:#1e62d0; font-size:34px; letter-spacing:-.06em; }
.formula-score span { color:#8997a8; font-size:9px; }
.score-formula-card.green .formula-score strong { color:#0a956b; }
.dictionary-tabs > [data-slot="tabs-list"] { width:100%; justify-content:flex-start; overflow-x:auto; }
.dictionary-tabs [data-slot="tabs-trigger"] { flex:0 0 auto; }
.dictionary-tabs [data-slot="tabs-content"] { margin-top:12px; }

.judgement-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.judgement-grid > div { position:relative; min-height:96px; padding:11px 11px 11px 36px; border:1px solid #e0e7f0; border-radius:10px; }
.judgement-grid svg { position:absolute; top:12px; left:11px; width:15px; color:#0a9c71; }
.judgement-grid strong { color:#304761; font-size:9px; }
.judgement-grid p { margin:6px 0 0; color:#75869a; font-size:8px; line-height:1.6; }

.focus-risk-list button { display:grid; grid-template-columns:32px 1fr 15px; align-items:center; gap:9px; padding:10px; border:1px solid #e2e7ef; border-radius:10px; background:#fff; color:inherit; text-align:left; }
.focus-risk-list button > span { display:grid; width:30px; height:30px; place-items:center; border-radius:8px; background:#fff0e6; color:#c96912; font-size:9px; font-weight:800; }
.focus-risk-list button > div { min-width:0; }
.focus-risk-list strong { color:#314862; font-size:10px; }
.focus-risk-list p { margin:4px 0; overflow:hidden; color:#79899c; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.focus-risk-list small { color:#92a0b0; font-size:8px; }
.focus-risk-list button > svg { width:13px; color:#9ba8b8; }

.closed-list button { display:grid; grid-template-columns:24px 1fr 40px; align-items:center; gap:9px; padding:10px; border:1px solid #e2e7ef; border-radius:10px; background:#fff; color:inherit; text-align:left; }
.closed-list button > svg { width:17px; color:#0aa676; }
.closed-list button > div { min-width:0; }
.closed-list strong { color:#314862; font-size:9px; }
.closed-list p { margin:4px 0 0; color:#7c8b9e; font-size:8px; }
.closed-list button > span { color:#8c99a9; font-size:8px; }

.goal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.goal-grid > div { position:relative; min-height:150px; padding:16px; overflow:hidden; border:1px solid #dce5ef; border-radius:13px; background:linear-gradient(145deg,#fff,#f6f9ff); }
.goal-grid > div::after { position:absolute; right:-18px; bottom:-28px; width:100px; height:100px; border-radius:50%; background:rgba(37,99,235,.05); content:""; }
.goal-grid span { color:#2b6dd3; font-size:8px; font-weight:800; letter-spacing:.1em; }
.goal-grid svg { display:block; width:24px; margin:13px 0 10px; color:#2563eb; }
.goal-grid strong { display:block; color:#293f5b; font-size:12px; }
.goal-grid p { margin:6px 0 0; color:#718299; font-size:9px; line-height:1.55; }
.task-progress { min-width:100px; }
.task-progress span { display:block; margin-bottom:5px; color:#566b83; font-size:8px; }
.task-progress [data-slot="progress"] { height:5px; }
.commitment-boundary { margin-top:12px; background:#fff9ee; border-color:#f1d8b8; }
.commitment-boundary > svg { color:#cb741d; }
.commitment-boundary strong { color:#654624; font-size:9px; }
.commitment-boundary p { margin:4px 0 0; color:#796346; font-size:8px; line-height:1.6; }

.week-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.week-grid > div { position:relative; min-height:180px; padding:14px; border:1px solid #dfe6ef; border-radius:12px; background:#fbfcfe; }
.week-grid > div.active { border-color:#bcd3f3; background:#f3f8ff; }
.week-grid > div > div { display:flex; align-items:center; justify-content:space-between; }
.week-grid span { color:#2563eb; font-size:13px; font-weight:800; }
.week-grid small { color:#8a97a7; font-size:8px; }
.week-grid strong { display:block; margin:15px 0 10px; color:#314862; font-size:10px; }
.week-grid ul { display:flex; flex-direction:column; gap:7px; margin:0; padding:0; list-style:none; }
.week-grid li { display:flex; align-items:flex-start; gap:5px; color:#718299; font-size:8px; line-height:1.45; }
.week-grid li svg { width:12px; flex:0 0 auto; color:#0aa676; }

@media (max-width: 1240px) {
  .module-stat-grid.five { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .platform-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .week-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .module-stat-grid.four,.module-stat-grid.five { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dual-trend { grid-template-columns: 1fr; }
  .execution-flow { grid-template-columns: 1fr; }
  .execution-flow > svg { justify-self:center; transform:rotate(90deg); }
  .acceptance-system { grid-template-columns:1fr; }
  .acceptance-system > svg { transform:rotate(90deg); }
  .goal-grid { grid-template-columns:1fr; }
}

@media (max-width: 620px) {
  .module-stat-grid.four,.module-stat-grid.five { grid-template-columns:1fr; }
  .module-stat-card { min-height:110px; }
  .platform-card-grid,.brand-fact-grid,.judgement-grid,.week-grid { grid-template-columns:1fr; }
  .decision-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .module-toolbar { align-items:stretch; flex-direction:column; }
  .toolbar-search,.toolbar-search.compact { width:100%; min-width:0; max-width:none; }
  .module-toolbar [data-slot="select-trigger"] { width:100%; }
  .filter-buttons { flex-wrap:wrap; }
  .opportunity-matrix { min-height:320px; margin-left:30px; }
  .bubble small { display:none; }
  .protocol-list > div { grid-template-columns:18px 1fr; }
  .protocol-list > div strong { grid-column:2; }
}

/* V5 visual system — White sky intelligence workspace */
:root {
  --background: #f3f9ff;
  --foreground: #15314f;
  --card: #ffffff;
  --card-foreground: #15314f;
  --primary: #2588f4;
  --primary-foreground: #ffffff;
  --secondary: #eaf6ff;
  --secondary-foreground: #176fc7;
  --muted: #eef6fc;
  --muted-foreground: #688098;
  --accent: #e7f7ff;
  --accent-foreground: #0b78af;
  --border: #d8e9f6;
  --input: #d4e7f5;
  --ring: #40a5f5;
  --sidebar: #f8fcff;
  --sidebar-foreground: #355773;
  --sidebar-primary: #2588f4;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e7f5ff;
  --sidebar-accent-foreground: #176fc7;
  --sidebar-border: #d7e8f5;
  --sidebar-ring: #40a5f5;
  --radius: 0.875rem;
}

html {
  background: #eef8ff;
}

body {
  background:
    radial-gradient(circle at 72% -10%, rgba(75, 173, 255, 0.23), transparent 34rem),
    radial-gradient(circle at 100% 38%, rgba(131, 222, 255, 0.13), transparent 30rem),
    radial-gradient(circle at 35% 105%, rgba(85, 168, 255, 0.08), transparent 30rem),
    linear-gradient(rgba(93, 166, 222, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 166, 222, 0.025) 1px, transparent 1px),
    #f4faff;
  background-size: auto, auto, auto, 30px 30px, 30px 30px, auto;
  color: #15314f;
  font-variant-numeric: tabular-nums;
}

::selection {
  background: rgba(55, 157, 244, 0.22);
  color: #12304f;
}

.app-main {
  background: transparent;
}

.app-sidebar [data-slot="sidebar-inner"] {
  background:
    radial-gradient(circle at 12% -8%, rgba(69, 167, 255, 0.28), transparent 19rem),
    radial-gradient(circle at 100% 42%, rgba(129, 221, 255, 0.18), transparent 18rem),
    linear-gradient(rgba(73, 148, 207, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73, 148, 207, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(252, 254, 255, 0.98), rgba(240, 249, 255, 0.98));
  background-size: auto, auto, 24px 24px, 24px 24px, auto;
  box-shadow: inset -1px 0 rgba(99, 163, 214, 0.16), 14px 0 38px rgba(53, 123, 176, 0.08);
}

.sidebar-brand-wrap {
  padding-top: 20px;
  border-bottom: 1px solid rgba(104, 169, 218, 0.13);
}

.aw-logo {
  border-color: rgba(92, 172, 243, 0.34);
  border-radius: 11px;
  background: linear-gradient(145deg, #69c8ff 0%, #3399f5 44%, #2471df 100%);
  box-shadow: 0 10px 24px rgba(35, 124, 210, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.sidebar-brand-copy strong {
  color: #173c60;
  font-size: 16px;
  letter-spacing: 0.035em;
}

.sidebar-brand-copy span {
  color: #78a0bf;
  letter-spacing: 0.16em;
}

.sidebar-nav-list {
  gap: 3px;
}

.sidebar-nav-button {
  height: 44px !important;
  border-radius: 9px !important;
  color: #58738c;
}

.sidebar-nav-button:hover {
  background: rgba(99, 190, 255, 0.13) !important;
  color: #176cb8 !important;
}

.sidebar-nav-button[data-active="true"] {
  border-color: rgba(71, 158, 235, 0.34);
  background: linear-gradient(105deg, #5ab8ff 0%, #3196f5 48%, #2b80e7 100%) !important;
  box-shadow: 0 10px 24px rgba(43, 139, 222, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 4px 0 rgba(255, 255, 255, 0.72);
  color: #ffffff !important;
}

.sidebar-number {
  color: #8aa9c2;
}

.sidebar-project {
  border-color: rgba(121, 187, 235, 0.28);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(222, 243, 255, 0.9));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 12px 28px rgba(53, 132, 194, 0.1);
}

.sidebar-project strong {
  color: #244b6e;
}

.sidebar-project > span {
  color: #7f9bb2;
}

.sidebar-project-status {
  color: #168260;
}

.topbar {
  min-height: 76px;
  padding: 11px 28px;
  border-bottom-color: rgba(196, 223, 241, 0.82);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(240, 249, 255, 0.9)),
    rgba(250, 253, 255, 0.9);
  box-shadow: 0 10px 35px rgba(48, 128, 185, 0.065);
  backdrop-filter: blur(24px) saturate(150%);
}

.topbar-title {
  min-width: 250px;
  gap: 12px;
}

.topbar-title > div {
  min-width: 0;
}

.sidebar-trigger {
  border-color: #d5e8f5;
  border-radius: 10px;
  background: linear-gradient(145deg, #ffffff, #edf8ff);
  box-shadow: 0 5px 14px rgba(57, 137, 194, 0.08);
}

.topbar-title p {
  color: #2c8cdf;
  font-size: 8px;
  letter-spacing: 0.2em;
}

.topbar-title h2 {
  overflow: hidden;
  color: #173a59;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-live {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid #cce8df;
  border-radius: 999px;
  background: #effaf6;
  color: #0b7b5b;
  font-size: 9px;
  font-weight: 700;
}

.topbar-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0eb07d;
  box-shadow: 0 0 0 4px rgba(14, 176, 125, 0.11);
}

.topbar-actions [data-slot="select-trigger"],
.topbar-actions > button,
.topbar-actions [data-slot="dropdown-menu-trigger"] {
  min-height: 38px;
  border-color: #d7e8f4;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 5px 15px rgba(52, 132, 190, 0.05);
}

.project-select {
  width: 226px;
  background: rgba(255, 255, 255, 0.9);
}

.project-select > svg:first-child {
  width: 14px;
  color: #328fdd;
}

.search-trigger {
  background: rgba(245, 251, 255, 0.94);
}

.topbar-actions .export-button {
  border-color: transparent;
  background: linear-gradient(135deg, #55baff 0%, #2e94f2 48%, #277dde 100%);
  box-shadow: 0 9px 20px rgba(44, 145, 226, 0.22) !important;
  color: #ffffff;
}

.topbar-actions .export-button:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #63c1ff 0%, #349cf6 48%, #2b84e6 100%);
  color: #ffffff;
}

.context-strip {
  min-height: 50px;
  padding-inline: 28px;
  border-bottom-color: #dbeaf5;
  background: rgba(249, 253, 255, 0.9);
  backdrop-filter: blur(14px);
}

.context-strip > div {
  padding-inline: 18px;
  border-right-color: #dceaf4;
}

.context-strip > div span {
  color: #7c96aa;
  font-size: 9px;
  letter-spacing: 0.045em;
}

.context-strip > div strong {
  color: #35536d;
  font-size: 11px;
}

.context-strip > button {
  border: 1px solid #cdebe1;
  border-radius: 999px;
  background: #eefaf6;
  box-shadow: inset 0 1px #fff;
}

.dashboard-content {
  max-width: 1580px;
  padding: 25px 28px 48px;
}

.page-stack {
  gap: 18px;
}

.page-intro {
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 18px;
  padding: 4px 3px 7px;
}

.page-number {
  background: linear-gradient(145deg, #2c8ff0, #69c9f3);
  background-clip: text;
  color: transparent;
  font-size: 46px;
  font-weight: 820;
  letter-spacing: -0.085em;
  text-shadow: 0 8px 24px rgba(59, 153, 226, 0.12);
}

.page-intro-copy p,
.hero-label,
.section-heading p {
  color: #338bd3;
  letter-spacing: 0.19em;
}

.page-intro-copy h1 {
  color: #173853;
  font-size: 27px;
  font-weight: 790;
}

.page-intro-copy > span {
  color: #6e879c;
}

.project-hero {
  min-height: 140px;
  padding: 23px 25px;
  border-color: rgba(102, 181, 235, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 78% -35%, rgba(82, 178, 255, 0.38), transparent 28rem),
    radial-gradient(circle at 102% 110%, rgba(120, 226, 246, 0.24), transparent 21rem),
    radial-gradient(circle at 18% 140%, rgba(110, 181, 255, 0.14), transparent 20rem),
    linear-gradient(rgba(70, 155, 219, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 155, 219, 0.035) 1px, transparent 1px),
    linear-gradient(120deg, rgba(255,255,255,0.98) 0%, rgba(238,248,255,0.98) 54%, rgba(220,243,255,0.98) 100%);
  background-size: auto, auto, auto, 24px 24px, 24px 24px, auto;
  box-shadow: 0 22px 52px rgba(63, 145, 204, 0.12), inset 0 1px rgba(255, 255, 255, 0.92);
}

.project-hero::after {
  right: -110px;
  bottom: -210px;
  width: 430px;
  height: 430px;
  border-color: rgba(86, 173, 236, 0.14);
  box-shadow: 0 0 0 38px rgba(79, 168, 238, 0.045), 0 0 0 78px rgba(79, 168, 238, 0.03);
}

.client-mark {
  border-color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(145deg, #c7353c, #8f1721 55%, #681019);
  box-shadow: 0 13px 28px rgba(126, 31, 43, 0.22), inset 0 1px rgba(255, 255, 255, 0.38);
}

.project-identity h2 {
  color: #183c5c;
  font-size: 21px;
}

.project-identity p {
  color: #6e879b;
}

.project-hero .hero-label {
  color: #278fdc;
}

.project-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.project-signal-row span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(112, 185, 235, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #426784;
  font-size: 9px;
  backdrop-filter: blur(8px);
}

.project-signal-row svg {
  width: 11px;
  height: 11px;
  color: #18a77d;
}

.project-facts {
  border-color: rgba(130, 191, 232, 0.34);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.96), 0 10px 24px rgba(61, 145, 205, 0.07);
}

.project-facts > div {
  border-right-color: rgba(143, 195, 229, 0.26);
}

.project-facts span {
  color: #7c98ad;
  letter-spacing: 0.05em;
}

.project-facts strong {
  color: #2d506e;
}

.master-score-card,
.acceptance-card,
.content-card {
  border-color: rgba(205, 226, 241, 0.94);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 36px rgba(60, 137, 190, 0.07), inset 0 1px #fff;
  backdrop-filter: blur(12px);
}

.master-score-card {
  position: relative;
  min-height: 166px;
  overflow: hidden;
  border-top-color: rgba(71, 166, 238, 0.5);
  background:
    radial-gradient(circle at 0% 0%, rgba(81, 180, 247, 0.15), transparent 13rem),
    radial-gradient(circle at 100% 100%, rgba(172, 227, 255, 0.11), transparent 12rem),
    rgba(255, 255, 255, 0.96);
}

.master-score-card:nth-child(2) {
  border-top-color: rgba(63, 190, 201, 0.4);
  background:
    radial-gradient(circle at 0% 0%, rgba(76, 200, 220, 0.13), transparent 13rem),
    radial-gradient(circle at 100% 100%, rgba(172, 227, 255, 0.11), transparent 12rem),
    rgba(255, 255, 255, 0.96);
}

.score-card-code {
  position: absolute;
  top: 12px;
  right: 14px;
  color: #9aa9bc;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.master-score-card:hover,
.metric-card:hover {
  border-color: #9ed2f4;
  box-shadow: 0 19px 42px rgba(47, 148, 217, 0.13);
  transform: translateY(-3px);
}

.score-ring {
  --ring-color: #2f98ef;
  flex-basis: 112px;
  width: 112px;
  height: 112px;
  background: conic-gradient(from 205deg, #2d85e4 0deg, #45aaf4 calc(var(--score) - 36deg), #6dd4ed var(--score), #e8f1f7 var(--score));
  box-shadow: 0 13px 28px rgba(48, 151, 229, 0.16);
}

.score-ring.green {
  background: conic-gradient(from 205deg, #159f9c 0deg, #37bdc0 calc(var(--score) - 36deg), #63d7bf var(--score), #e5f1ef var(--score));
  box-shadow: 0 13px 28px rgba(40, 178, 175, 0.14);
}

.score-ring::before {
  inset: 9px;
  background: linear-gradient(145deg, #ffffff, #f5fbff);
  box-shadow: inset 0 0 0 1px #e0edf6, 0 4px 12px rgba(54, 133, 190, 0.05);
}

.score-ring strong,
.metric-value,
.formula-score strong,
.module-stat-card strong {
  font-feature-settings: "tnum" 1, "ss01" 1;
}

.acceptance-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(77, 176, 246, 0.14), transparent 14rem),
    rgba(255, 255, 255, 0.96);
}

.content-card {
  padding: 19px;
}

.section-heading {
  margin-bottom: 17px;
}

.section-heading h2 {
  color: #1c4566;
  font-size: 16px;
  font-weight: 770;
}

.metric-card {
  position: relative;
  padding: 15px;
  overflow: hidden;
  border-color: #d8e9f5;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(241, 249, 255, 0.98));
}

.metric-card::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 3px;
  border-radius: 0 0 0 6px;
  background: linear-gradient(90deg, #3a9ff0, #74d5ee);
  opacity: 0.76;
  content: "";
}

.metric-value {
  color: #183f62;
  font-size: 28px;
}

.table-shell {
  border: 1px solid #d6e7f3;
  border-radius: 12px;
  box-shadow: inset 0 1px #fff;
}

.table-shell thead {
  background: linear-gradient(180deg, #f7fcff, #eaf6fd);
}

.table-shell th {
  color: #52718a;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.025em;
}

.table-shell tbody tr {
  transition: background 0.16s, box-shadow 0.16s;
}

.table-shell tbody tr:hover {
  background: #eff9ff;
  box-shadow: inset 3px 0 #45a7ed;
}

.trend-chart-wrap {
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(230, 246, 255, 0.72), rgba(255, 255, 255, 0));
}

[data-slot="dialog-content"],
[data-slot="sheet-content"] {
  border-color: #d3e7f5;
  background: rgba(252, 254, 255, 0.97);
  box-shadow: 0 28px 80px rgba(35, 110, 164, 0.2);
  backdrop-filter: blur(24px) saturate(135%);
}

button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
[data-slot="select-trigger"]:focus-visible {
  outline: 3px solid rgba(57, 163, 239, 0.25);
  outline-offset: 2px;
}

.site-footer {
  border-top-color: #d6e8f4;
  background: rgba(245, 251, 255, 0.82);
}

@media (max-width: 1320px) {
  .project-select { width: 202px; }
  .topbar-live { display: none; }
}

@media (max-width: 820px) {
  .topbar { padding-inline: 14px; }
  .topbar-title { min-width: 0; }
  .context-strip { padding-inline: 14px; }
  .dashboard-content { padding: 18px 14px 34px; }
  .page-intro { grid-template-columns: 52px minmax(0, 1fr); gap: 13px; }
  .page-number { font-size: 36px; }
  .project-hero { padding: 18px; }
  .project-facts > div { border-right: 0; border-bottom-color: rgba(143, 195, 229, 0.26); }
}

@media (max-width: 560px) {
  .topbar-title p { letter-spacing: 0.12em; }
  .topbar-title h2 { max-width: 150px; }
  .project-signal-row { gap: 5px; }
  .project-signal-row span { padding: 4px 7px; }
  .content-card { padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .master-score-card,
  .metric-card,
  .table-shell tbody tr {
    transition: none;
  }
}

@media print {
  body {
    background: #fff;
  }

  .page-number {
    background: none;
    color: #1f68df;
    text-shadow: none;
  }

  .project-hero {
    border-color: #cad6e4;
    background: #fff;
    box-shadow: none;
  }

  .project-hero::after,
  .project-signal-row {
    display: none;
  }

  .project-identity h2,
  .project-facts strong {
    color: #152743;
  }

  .project-identity p,
  .project-facts span {
    color: #6d7d92;
  }

  .project-facts {
    border-color: #dce6f3;
    background: #f8fafc;
    box-shadow: none;
  }

  .project-facts > div {
    border-right-color: #dce6f3;
  }

  .content-card,
  .master-score-card,
  .acceptance-card,
  .metric-card {
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
  }
}

/* Delivery surface cascade overrides */
.ops-project-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255,255,255,.96);
}

.ops-project-card.reference { background: linear-gradient(135deg, #fff 0%, #eef9ff 100%); }
.ops-project-select { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; }
.ops-project-tools { display: flex; }
.ops-hero-brand { display: flex; }
.ops-heading-actions { display: flex; }
.ops-panel-heading .ops-heading-actions button { flex: 0 0 auto; }
.sidebar-brand-wrap .aowang-brand-lockup { width: 100%; }
.sidebar-brand-wrap .aowang-brand-symbol { width: 42px; height: 42px; border-radius: 13px; }
.sidebar-brand-wrap .aowang-brand-wordmark strong { color: #153f5e; font-size: 18px; }
.site-footer .aowang-company-signature { display: flex; }

@media (max-width: 760px) {
  .ops-project-select { grid-template-columns: 46px 1fr; }
  .ops-project-select .ops-project-counts { grid-column: 1 / -1; }
  .ops-hero-brand { display: grid; }
}

/* V8 production workflow, evidence and acceptance surfaces */
.status-negative {
  border-color: #f0cbc7 !important;
  background: #fff3f1 !important;
  color: #b54f47 !important;
}

.ops-project-copy [data-slot="badge"] {
  gap: 4px;
  white-space: nowrap;
}

.ops-project-copy [data-slot="badge"] svg {
  width: 11px;
  height: 11px;
}

.ops-selected-project.v8 {
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(90px, auto)) auto;
}

.ops-project-dialog {
  max-height: min(90vh, 920px);
  overflow-y: auto;
}

.ops-field-help {
  color: #829bad;
  font-size: 8px;
  line-height: 1.65;
}

.ops-import-lock {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid #eed8ae;
  border-radius: 12px;
  background: linear-gradient(120deg, #fff9ed, #fffdf8);
}

.ops-import-rule {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid #d5e8f4;
  border-radius: 12px;
  background: linear-gradient(120deg, #f3faff, #fff);
  color: #5e7d92;
  font-size: 8px;
  line-height: 1.65;
}

.ops-import-rule svg {
  flex: 0 0 auto;
  width: 15px;
  color: #268cc8;
}

.ops-import-lock > svg {
  flex: 0 0 auto;
  width: 19px;
  color: #b47b24;
}

.ops-import-lock > div {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.ops-import-lock strong { color: #7d5b26; font-size: 9px; }
.ops-import-lock span { color: #9a8058; font-size: 8px; line-height: 1.55; }

.ops-two-column.governance {
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
}

.ops-member-project {
  display: grid;
  grid-template-columns: 100px minmax(0, 360px);
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.ops-member-project label,
.ops-member-form label {
  color: #58768e;
  font-size: 9px;
  font-weight: 750;
}

.ops-member-form {
  display: grid;
  grid-template-columns: 1.2fr 1fr .72fr auto;
  align-items: end;
  gap: 9px;
  padding: 14px;
  border: 1px solid #d8eaf5;
  border-radius: 13px;
  background: linear-gradient(145deg, #fbfdff, #f3faff);
}

.ops-member-form > div { display: grid; gap: 6px; }

.ops-access-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 11px;
  background: #f1faf7;
  color: #5f8376;
  font-size: 8px;
  line-height: 1.6;
}

.ops-access-note svg { flex: 0 0 auto; width: 15px; color: #158363; }
.ops-member-list, .ops-audit-list { display: grid; gap: 8px; }

.ops-member-list > div,
.ops-audit-list > div:not(.ops-empty-history) {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid #dfeaf3;
  border-radius: 11px;
  background: #fbfdff;
}

.ops-member-list > div > span,
.ops-audit-list > div > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #eaf7ff;
  color: #318ed1;
}

.ops-member-list > div > span.active { background: #e9f8f3; color: #168460; }
.ops-member-list > div > span.revoked { background: #f1f4f7; color: #8da0ad; }
.ops-member-list svg, .ops-audit-list svg { width: 15px; }
.ops-member-list strong, .ops-audit-list strong { color: #3b5d75; font-size: 9px; }
.ops-member-list p, .ops-audit-list p { margin: 2px 0; color: #8198aa; font-size: 8px; }
.ops-member-list small, .ops-audit-list small { color: #9aaebb; font-size: 7px; }

.ops-audit-list > div:not(.ops-empty-history) {
  grid-template-columns: 36px minmax(0, 1fr) auto;
}

.ops-publish-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.ops-publish-summary > div {
  padding: 13px;
  border: 1px solid #dcebf4;
  border-radius: 12px;
  background: #f7fbfe;
}

.ops-publish-summary span { display: block; color: #8299aa; font-size: 8px; }
.ops-publish-summary strong { display: block; margin-top: 5px; color: #245777; font-size: 19px; }
.ops-gate-result { display: grid; gap: 8px; }

.ops-gate-result > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #d9ece4;
  border-radius: 11px;
  background: #f4fbf8;
  color: #477465;
  font-size: 9px;
}

.ops-gate-result > div.blocked {
  border-color: #f0ceca;
  background: #fff5f3;
  color: #95564e;
}

.ops-gate-result svg { width: 16px; color: #15906a; }
.ops-gate-result .blocked svg { color: #c45b50; }

.live-report-root.v8 { gap: 14px; }

.live-filter-bar {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 11px;
  padding: 15px 17px;
  border: 1px solid #d5e9f6;
  border-radius: 17px;
  background:
    radial-gradient(circle at 95% -20%, rgba(96, 197, 255, .16), transparent 18rem),
    rgba(255,255,255,.96);
  box-shadow: 0 11px 32px rgba(52, 129, 180, .07);
}

.live-filter-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.live-filter-title > svg { width: 18px; color: #2e91cf; }
.live-filter-title > div { min-width: 0; flex: 1; display: grid; gap: 2px; }
.live-filter-title strong { color: #2d5571; font-size: 10px; }
.live-filter-title span { color: #8ba0af; font-size: 8px; }
.live-filter-title .spin { flex: 0 0 auto; }

.live-filter-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
  gap: 8px;
}

.live-filter-controls [data-slot="select-trigger"] {
  min-width: 0;
  border-color: #d8e9f4;
  background: #fbfdff;
  color: #55768d;
  font-size: 9px;
}

.live-export-actions {
  display: flex;
  justify-content: flex-end;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid #e8f1f7;
}

.live-export-actions button { color: #668398; font-size: 8px; }
.live-export-actions svg { width: 13px; }

.live-inline-error {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid #f0ceca;
  border-radius: 11px;
  background: #fff5f3;
  color: #a05b53;
  font-size: 9px;
}

.live-inline-error svg { width: 15px; }
.live-inline-error button { margin-left: auto; }

.live-project-brief > .live-hero-badges {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 7px;
  margin-top: 0;
}

.live-hero-badges svg { width: 12px; }
.live-project-brief > div:last-child { margin-top: 24px; }
.live-metric-grid.v8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.live-report-heading.v8 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.live-report-heading.v8 > div:first-child { min-width: 0; }
.live-report-heading.v8 > div:first-child > span { color: #2e95cf; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.live-report-heading.v8 > div:first-child > h2 { margin: 5px 0 4px; }
.live-report-heading.v8 > div:first-child > p { margin: 0; }

.live-acceptance-card {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, .6fr);
  gap: 20px;
  align-items: center;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid #cfe6f4;
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 0%, rgba(80, 187, 248, .2), transparent 19rem),
    linear-gradient(120deg, #fff, #eff9ff);
  box-shadow: 0 12px 34px rgba(48, 118, 164, .07);
}

.live-acceptance-card > div:first-child > svg { width: 25px; color: #2d93d1; }
.live-acceptance-card > div:first-child > span { display: block; margin-top: 8px; color: #2e95cf; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.live-acceptance-card h3 { margin: 5px 0 4px; color: #1c405b; font-size: 18px; }
.live-acceptance-card p { margin: 0; color: #7d96a8; font-size: 9px; line-height: 1.65; }
.live-acceptance-card > div:last-child { display: grid; justify-items: start; gap: 8px; }
.live-acceptance-card small, .live-viewer-note { color: #8299aa; font-size: 8px; }
.live-viewer-note { display: flex; align-items: center; gap: 5px; }
.live-viewer-note svg { width: 13px; }

.live-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 13px;
  color: #7892a4;
  font-size: 8px;
}

.live-pagination > div { display: flex; gap: 7px; }

.live-sov-highlight {
  min-width: 110px;
  padding: 10px 13px;
  border: 1px solid #cde8f7;
  border-radius: 12px;
  background: #f0f9ff;
  text-align: right;
}

.live-sov-highlight span { display: block; color: #7390a5; font-size: 8px; }
.live-sov-highlight strong { display: block; margin-top: 3px; color: #207bb3; font-size: 20px; }
.live-competitor-list { display: grid; gap: 9px; }

.live-competitor-list > div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 70px;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid #dfebf4;
  border-radius: 13px;
  background: #fbfdff;
}

.live-competitor-list > div.target {
  border-color: #a9d9f3;
  background: linear-gradient(120deg, #f0faff, #fff);
  box-shadow: inset 3px 0 #2d96d4;
}

.live-competitor-list > div > span { color: #3193cb; font-size: 8px; font-weight: 850; }
.live-competitor-list > div > div { min-width: 0; }
.live-competitor-list strong { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: #315b77; font-size: 10px; }
.live-competitor-list small { display: block; margin-top: 6px; color: #829aab; font-size: 8px; }
.live-competitor-list > div > b { color: #266c99; font-size: 14px; text-align: right; }

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

.live-demand-grid > div {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 9px;
  padding: 13px;
  border: 1px solid #e0edf5;
  border-radius: 13px;
  background: #fbfdff;
}

.live-demand-grid > div > span { color: #3194cc; font-size: 8px; font-weight: 850; }
.live-demand-grid strong { color: #3d627a; font-size: 10px; }
.live-demand-grid p { margin: 4px 0; color: #758da0; font-size: 8px; }
.live-demand-grid small { color: #91a4b3; font-size: 7px; }

.live-scope-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.live-scope-grid > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid #dceaf4;
  border-radius: 13px;
  background: linear-gradient(145deg, #fbfdff, #f5fbff);
}

.live-scope-grid span { display: block; color: #8097a8; font-size: 8px; }
.live-scope-grid strong { display: block; overflow: hidden; margin-top: 6px; color: #2b5977; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.live-scope-grid .fingerprint strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }

.live-next-acceptance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  border: 1px solid #cfe6f4;
  border-radius: 17px;
  background: linear-gradient(120deg, #f2faff, #fff);
}

.live-next-acceptance > div { display: flex; align-items: center; gap: 9px; }
.live-next-acceptance > div > svg { width: 18px; color: #2e91cf; }
.live-next-acceptance > div > span { color: #64849a; font-size: 9px; }

.live-evidence-sheet { overflow-y: auto; }
.live-evidence-body { display: grid; gap: 14px; padding: 18px 4px 28px; }
.live-evidence-id { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #e5eef5; }
.live-evidence-id > span { color: #2789c5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 750; }
.live-evidence-meta, .live-evidence-judgment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.live-evidence-meta > div,
.live-evidence-judgment > div {
  min-width: 0;
  padding: 11px;
  border: 1px solid #e0ebf3;
  border-radius: 11px;
  background: #f8fbfd;
}

.live-evidence-meta span, .live-evidence-judgment span { display: block; color: #8499a9; font-size: 8px; }
.live-evidence-meta strong, .live-evidence-judgment strong { display: block; overflow: hidden; margin-top: 4px; color: #315a75; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.live-evidence-copy { padding: 14px; border: 1px solid #dceaf4; border-radius: 13px; background: #fbfdff; }
.live-evidence-copy > span, .live-evidence-links > span { display: block; margin-bottom: 7px; color: #2f8fc7; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.live-evidence-copy > strong { color: #315a75; font-size: 11px; line-height: 1.7; }
.live-evidence-copy.answer { background: linear-gradient(145deg, #f8fcff, #fff); }
.live-evidence-copy p { max-height: 38vh; overflow-y: auto; margin: 0; color: #587287; font-size: 9px; line-height: 1.9; white-space: pre-wrap; }
.live-evidence-note { display: flex; gap: 10px; padding: 12px; border: 1px solid #cfe8de; border-radius: 12px; background: #f1faf7; }
.live-evidence-note > svg { flex: 0 0 auto; width: 17px; color: #168765; }
.live-evidence-note span { color: #31705b; font-size: 8px; font-weight: 800; }
.live-evidence-note p { margin: 3px 0; color: #5f8275; font-size: 9px; line-height: 1.6; }
.live-evidence-note small { color: #7b9a8f; font-size: 7px; }
.live-evidence-links { padding: 14px; border: 1px solid #dceaf4; border-radius: 13px; }
.live-evidence-links > div { display: flex; gap: 8px; flex-wrap: wrap; }
.live-evidence-links ul { display: grid; gap: 6px; margin: 11px 0 0; padding: 0; list-style: none; }
.live-evidence-links li a { display: inline-flex; align-items: center; gap: 5px; color: #287daF; font-size: 8px; }
.live-evidence-links li svg { width: 11px; }
.live-evidence-links > small { color: #8ba0af; font-size: 8px; }

.live-acceptance-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.live-acceptance-options button {
  display: grid;
  justify-items: start;
  gap: 4px;
  padding: 15px;
  border: 1px solid #dce8f1;
  border-radius: 13px;
  background: #fbfdff;
  color: #7890a2;
  text-align: left;
}

.live-acceptance-options button.active { border-color: #8dd1ba; background: #f1faf7; color: #34745e; box-shadow: inset 0 0 0 1px #bce5d7; }
.live-acceptance-options button.active.disputed { border-color: #e9aaa4; background: #fff5f3; color: #94544d; box-shadow: inset 0 0 0 1px #f0cbc7; }
.live-acceptance-options svg { width: 20px; }
.live-acceptance-options strong { color: inherit; font-size: 10px; }
.live-acceptance-options span { font-size: 8px; line-height: 1.55; }
.live-acceptance-history { display: grid; gap: 7px; max-height: 190px; overflow-y: auto; padding: 11px; border: 1px solid #e0ebf3; border-radius: 11px; background: #f9fcfe; }
.live-acceptance-history > span { color: #718ca0; font-size: 8px; font-weight: 800; }
.live-acceptance-history > div { display: grid; grid-template-columns: auto 1fr; gap: 5px 8px; align-items: center; padding-top: 7px; border-top: 1px solid #e6eff5; }
.live-acceptance-history p { margin: 0; color: #5d788b; font-size: 8px; }
.live-acceptance-history small { grid-column: 2; color: #91a4b3; font-size: 7px; }

.live-print-modules {
  display: none;
}

@media (max-width: 1280px) {
  .live-filter-controls { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .live-metric-grid.v8 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .live-demand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-member-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-member-form > button { align-self: end; }
}

@media (max-width: 1000px) {
  .ops-selected-project.v8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-selected-project.v8 > div:first-child { grid-column: 1 / -1; }
  .ops-two-column.governance { grid-template-columns: 1fr; }
  .live-metric-grid.v8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .ops-tabs [data-slot="tabs-list"] { gap: 5px; overflow-x: auto; }
  .ops-tabs [data-slot="tabs-trigger"] { min-width: 96px; }
  .ops-selected-project.v8, .ops-member-form { grid-template-columns: 1fr; }
  .ops-member-project { grid-template-columns: 1fr; }
  .ops-member-list > div { grid-template-columns: 34px minmax(0, 1fr); }
  .ops-member-list > div > [data-slot="badge"], .ops-member-list > div > button { grid-column: 2; justify-self: start; }
  .ops-import-lock { align-items: flex-start; flex-wrap: wrap; }
  .live-filter-controls { grid-template-columns: 1fr 1fr; }
  .live-filter-controls > button { grid-column: 1 / -1; }
  .live-export-actions { justify-content: flex-start; overflow-x: auto; }
  .live-metric-grid.v8, .live-demand-grid, .live-scope-grid { grid-template-columns: 1fr; }
  .live-acceptance-card { grid-template-columns: 1fr; }
  .live-report-heading.v8 { display: grid; }
  .live-report-heading.v8 > div:last-child { justify-self: start; }
  .live-evidence-meta, .live-evidence-judgment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-acceptance-options { grid-template-columns: 1fr; }
  .live-next-acceptance { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .live-filter-controls { grid-template-columns: 1fr; }
  .live-project-brief > div:last-child { grid-template-columns: 1fr; }
  .live-evidence-meta, .live-evidence-judgment { grid-template-columns: 1fr; }
  .live-pagination { align-items: flex-start; flex-direction: column; }
  .live-competitor-list > div { grid-template-columns: 25px minmax(0, 1fr); }
  .live-competitor-list > div > b { grid-column: 2; text-align: left; }
}

@media print {
  .live-filter-bar,
  .live-next-acceptance,
  .live-acceptance-card button,
  .live-pagination,
  .live-answer-table button,
  .live-screen-module {
    display: none !important;
  }

  .live-print-modules {
    display: grid;
    gap: 0;
  }

  .live-print-modules > section {
    min-height: 260mm;
    padding: 8mm 0 0;
    break-after: page;
    page-break-after: always;
  }

  .live-print-modules > section:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .live-print-modules > section > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin-bottom: 14px;
    padding: 0 2px 9px;
    border-bottom: 1px solid #cfe0ec;
  }

  .live-print-modules > section > header span,
  .live-print-modules > section > header small {
    color: #6f8ca0;
    font-size: 8px;
  }

  .live-print-modules > section > header strong {
    color: #235e83;
    font-size: 13px;
  }

  .live-metric-grid.v8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .live-report-root.v8 { gap: 10px; }
}
