:root {
  color-scheme: dark;
  --bg: #090a0f;
  --panel: rgba(255, 255, 255, 0.08);
  --panel-strong: rgba(255, 255, 255, 0.13);
  --line: rgba(255, 255, 255, 0.14);
  --text: #f7f4ff;
  --muted: #b8b1c7;
  --soft: #817a90;
  --purple: #a855f7;
  --cyan: #38bdf8;
  --green: #22c55e;
  --amber: #f59e0b;
  --red: #fb7185;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 12%, rgba(168, 85, 247, 0.24), transparent 32rem),
    radial-gradient(circle at 88% 8%, rgba(56, 189, 248, 0.18), transparent 26rem),
    linear-gradient(135deg, #090a0f 0%, #12111a 46%, #0b1017 100%);
}

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

button {
  cursor: pointer;
}

.app-shell {
  width: min(1440px, 100%);
  overflow-x: hidden;
  margin: 0 auto;
  padding: 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 6px;
  color: #d9c7ff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.status-strip,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #efe7ff;
  white-space: nowrap;
  backdrop-filter: blur(18px);
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.8);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.72fr);
  gap: 16px;
  align-items: start;
}

.workspace > * {
  min-width: 0;
}

.command-panel,
.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(125%);
}

.command-panel {
  min-height: 520px;
  padding: 20px;
}

.panel {
  padding: 16px;
}

.constitution-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 18px;
  align-items: center;
}

.docs-panel {
  grid-column: 1 / -1;
}

.executive-dashboard-panel,
.ai-proposals-panel,
.leadership-academy-panel,
.version3-completion-panel,
.version4-ai-company-os-panel,
.version4-delivery-program-panel {
  grid-column: 1 / -1;
}

.executive-dashboard-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.executive-metrics,
.executive-action-grid,
.ai-proposal-grid {
  display: grid;
  gap: 12px;
}

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

.executive-action-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}

.executive-metrics article,
.executive-action-grid article,
.executive-decision-card,
.ai-proposal-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  padding: 12px;
}

.executive-metrics article {
  min-height: 92px;
}

.executive-metrics span,
.executive-metrics small,
.executive-action-grid li,
.executive-decision-card li,
.ai-proposal-card span,
.ai-proposal-card p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.executive-metrics strong {
  display: block;
  margin: 8px 0 4px;
  font-size: 1.5rem;
  line-height: 1.1;
}

.executive-action-grid h3,
.executive-decision-card h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.executive-action-grid ul,
.executive-decision-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.executive-decision-card {
  border-color: rgba(245, 158, 11, 0.34);
}

.ai-proposal-grid {
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  overflow-x: auto;
  padding-bottom: 4px;
}

.ai-proposal-card {
  display: grid;
  gap: 10px;
  min-width: 220px;
}

.ai-proposal-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ai-proposal-head strong,
.ai-proposal-head span {
  display: block;
}

.ai-proposal-head em {
  align-self: flex-start;
  border: 1px solid rgba(168, 85, 247, 0.38);
  border-radius: 999px;
  padding: 4px 8px;
  color: #efe7ff;
  background: rgba(168, 85, 247, 0.12);
  font-size: 0.72rem;
  font-style: normal;
  white-space: nowrap;
}

.ai-proposal-card div:not(.ai-proposal-head) span {
  display: block;
  margin-bottom: 3px;
  color: #d9c7ff;
  font-weight: 700;
}

.ai-proposal-card p {
  margin: 0;
}

.academy-details {
  display: grid;
  gap: 14px;
}

.academy-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.academy-details > summary::-webkit-details-marker {
  display: none;
}

.academy-details summary span,
.academy-details summary small {
  display: block;
}

.academy-details summary small {
  margin-top: 4px;
  color: var(--muted);
}

.academy-details summary em {
  flex: 0 0 auto;
  border: 1px solid rgba(56, 189, 248, 0.38);
  border-radius: 999px;
  padding: 5px 9px;
  color: #bae6fd;
  background: rgba(56, 189, 248, 0.12);
  font-size: 0.76rem;
  font-style: normal;
}

.academy-body {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.academy-guidance,
.academy-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 12px;
}

.academy-guidance {
  border-color: rgba(168, 85, 247, 0.34);
  background: rgba(168, 85, 247, 0.1);
}

.academy-section h3,
.academy-guidance h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.academy-section ul,
.academy-guidance ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.academy-section li,
.academy-guidance li {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

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

.academy-worker-grid article,
.academy-progress-grid article {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
}

.academy-worker-grid span,
.academy-worker-grid p,
.academy-progress-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.academy-progress-grid em {
  justify-self: start;
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: 999px;
  padding: 3px 7px;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.1);
  font-size: 0.72rem;
  font-style: normal;
}

.academy-progress-grid [data-status="completed"] em {
  border-color: rgba(34, 197, 94, 0.34);
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.1);
}

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

.autonomous-metrics,
.autonomous-phase-list,
.delivery-program-metrics,
.version3-completion-metrics,
.version3-review-grid,
.delivery-gate-list,
.delivery-track-list {
  display: grid;
  gap: 12px;
}

.autonomous-metrics,
.delivery-program-metrics,
.version3-completion-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}

.autonomous-metrics article,
.autonomous-phase-card,
.delivery-program-metrics article,
.version3-completion-metrics article,
.version3-review-grid article,
.version3-stop-conditions,
.delivery-gate-list article,
.delivery-track-list article,
.delivery-checklist {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  padding: 12px;
}

.autonomous-metrics span,
.autonomous-phase-card span,
.delivery-program-metrics span,
.version3-completion-metrics span,
.version3-review-grid span,
.delivery-track-list span,
.delivery-gate-list small,
.delivery-track-list small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.autonomous-phase-card p,
.version3-review-grid p,
.version3-stop-conditions p,
.delivery-gate-list p,
.delivery-track-list p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.version3-review-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.version3-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.version3-review-head em {
  flex: 0 0 auto;
  border: 1px solid rgba(34, 197, 94, 0.38);
  border-radius: 999px;
  padding: 4px 8px;
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.1);
  font-size: 0.72rem;
  font-style: normal;
}

.version3-review-grid ul,
.version3-stop-conditions ul {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 18px;
}

.version3-review-grid li,
.version3-stop-conditions li {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.version3-stop-conditions h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.delivery-gate-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.delivery-track-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

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

.version4-completion-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.version4-completion-list h3 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.95rem;
}

.version4-completion-list article {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  padding: 12px;
}

.version4-completion-list article[data-priority="S"] {
  border-color: rgba(245, 158, 11, 0.4);
}

.version4-completion-list em {
  justify-self: start;
  border: 1px solid rgba(168, 85, 247, 0.38);
  border-radius: 999px;
  padding: 4px 8px;
  color: #efe7ff;
  background: rgba(168, 85, 247, 0.12);
  font-size: 0.72rem;
  font-style: normal;
}

.version4-completion-list p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.delivery-track-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.delivery-track-head em,
.delivery-gate-list em {
  flex: 0 0 auto;
  border: 1px solid rgba(168, 85, 247, 0.38);
  border-radius: 999px;
  padding: 4px 8px;
  color: #efe7ff;
  background: rgba(168, 85, 247, 0.12);
  font-size: 0.72rem;
  font-style: normal;
  white-space: nowrap;
}

.delivery-track-list article[data-priority="critical"] {
  border-color: rgba(245, 158, 11, 0.4);
}

.delivery-gate-list article[data-status="blocked_by_approval"] {
  border-color: rgba(251, 113, 133, 0.4);
}

.cto-authority-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.08);
  padding: 12px;
}

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

.cto-authority-head h3,
.cto-authority-list h4 {
  margin: 0;
  font-size: 0.95rem;
}

.cto-authority-head em {
  flex: 0 0 auto;
  border: 1px solid rgba(56, 189, 248, 0.42);
  border-radius: 999px;
  padding: 4px 8px;
  color: #bae6fd;
  background: rgba(56, 189, 248, 0.12);
  font-size: 0.72rem;
  font-style: normal;
  white-space: nowrap;
}

.cto-authority-panel p,
.cto-authority-panel li,
.cto-authority-panel blockquote {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.cto-authority-panel p,
.cto-authority-panel blockquote {
  margin: 0;
}

.cto-authority-panel blockquote {
  border-left: 3px solid rgba(168, 85, 247, 0.55);
  padding-left: 10px;
}

.cto-authority-list {
  display: grid;
  gap: 8px;
}

.cto-authority-list ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 0;
  padding-left: 18px;
}

.delivery-checklist h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.delivery-checklist ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 0;
  padding-left: 18px;
}

.delivery-checklist li {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.version4-ai-company-os-panel {
  display: grid;
  gap: 14px;
}

.version4-mission,
.version4-os-section {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  padding: 12px;
}

.version4-mission {
  border-color: rgba(168, 85, 247, 0.34);
  background: rgba(168, 85, 247, 0.1);
}

.version4-mission h3,
.version4-section-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.version4-mission p {
  margin: 6px 0 0;
  color: #efe7ff;
  line-height: 1.5;
}

.version4-section-heading {
  margin-bottom: 10px;
}

.version4-metric-grid,
.version4-decision-list,
.version4-three-column,
.version4-two-column,
.version4-revenue-grid {
  display: grid;
  gap: 10px;
}

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

.version4-decision-list,
.version4-three-column {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.version4-revenue-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.version4-metric-grid article,
.version4-decision-list article,
.version4-three-column article,
.version4-two-column article,
.version4-revenue-grid article,
.version4-coo-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 11px;
}

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

.version4-metric-grid strong {
  font-size: 1.4rem;
  line-height: 1.1;
}

.version4-metric-grid span,
.version4-metric-grid small,
.version4-decision-list span,
.version4-decision-list p,
.version4-three-column span,
.version4-three-column p,
.version4-two-column li,
.version4-revenue-grid span,
.version4-revenue-grid p,
.version4-coo-card li {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.version4-decision-list em,
.version4-revenue-grid em,
.version4-coo-card em {
  justify-self: start;
  border: 1px solid rgba(56, 189, 248, 0.38);
  border-radius: 999px;
  padding: 4px 8px;
  color: #bae6fd;
  background: rgba(56, 189, 248, 0.12);
  font-size: 0.72rem;
  font-style: normal;
  white-space: nowrap;
}

.version4-two-column ul,
.version4-coo-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.version4-coo-card {
  border-color: rgba(34, 197, 94, 0.34);
}

.doc-link-card {
  display: grid;
  gap: 6px;
  min-height: 84px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

.doc-link-card:hover,
.doc-link-card:focus-visible {
  border-color: rgba(168, 85, 247, 0.72);
  background: rgba(168, 85, 247, 0.14);
  outline: none;
}

.doc-link-card span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.constitution-panel .panel-subtitle {
  grid-column: 1 / -1;
  margin: 0;
}

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

.constitution-flow span {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: 999px;
  color: #efe7ff;
  background: rgba(168, 85, 247, 0.12);
  font-size: 0.78rem;
  white-space: nowrap;
}

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

.section-heading.compact {
  align-items: center;
}

.smart-inbox {
  display: grid;
  gap: 14px;
}

textarea {
  width: 100%;
  min-height: 184px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 16px;
  color: var(--text);
  background: rgba(8, 9, 14, 0.58);
  outline: none;
  line-height: 1.6;
}

textarea:focus,
select:focus,
input:focus {
  border-color: rgba(168, 85, 247, 0.8);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}

.inbox-actions,
.select-row,
.usage-grid {
  display: flex;
  gap: 12px;
  align-items: center;
}

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

.select-row label,
.usage-grid span,
.meter-label span,
.cost-grid span,
.decision-grid span,
.log-list span {
  color: var(--muted);
  font-size: 0.8rem;
}

select,
input {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

select {
  min-width: 190px;
}

.primary-button,
.secondary-button,
.icon-button,
.tab {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}

.primary-button {
  min-height: 44px;
  padding: 0 18px;
  border-color: rgba(168, 85, 247, 0.7);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.95), rgba(56, 189, 248, 0.72));
  font-weight: 700;
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.compact-button {
  min-height: 36px;
}

.secondary-button,
.icon-button,
.tab {
  min-height: 36px;
  padding: 0 12px;
}

.icon-button {
  width: 38px;
  padding: 0;
  font-size: 1.1rem;
}

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

.inbox-feedback {
  margin: 0;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid rgba(34, 197, 94, 0.38);
  border-radius: 8px;
  color: #dcfce7;
  background: rgba(34, 197, 94, 0.12);
  line-height: 1.35;
}

.inbox-feedback[data-tone="warning"] {
  border-color: rgba(245, 158, 11, 0.44);
  color: #fde68a;
  background: rgba(245, 158, 11, 0.12);
}

.decision-grid article,
.cost-grid article {
  display: grid;
  gap: 8px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.decision-grid strong,
.cost-grid strong {
  overflow-wrap: anywhere;
  line-height: 1.35;
}

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

.agent-roster {
  display: grid;
  gap: 10px;
}

.agent-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 78px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.agent-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--agent-accent), white 24%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--agent-accent), transparent 72%);
  font-weight: 800;
}

.agent-card strong,
.agent-card span,
.agent-card p {
  display: block;
}

.agent-card span {
  color: #ddd3ee;
  font-size: 0.82rem;
}

.agent-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.usage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

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

.usage-grid input {
  width: 100%;
}

.meter-block {
  margin-top: 14px;
}

.codex-sync-box {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.codex-sync-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.codex-sync-row strong {
  overflow-wrap: anywhere;
}

.meter-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
}

.meter {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--purple));
}

.muted {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.panel-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.timeline-panel,
.prompt-panel,
.logs-panel,
.cost-panel,
.project-module-panel {
  min-height: 300px;
}

.project-module-panel {
  grid-column: 1 / -1;
}

.project-module-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 12px;
}

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

.project-summary-grid article {
  display: grid;
  gap: 6px;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.project-summary-grid span,
.project-mini-row span,
.project-progress span {
  color: var(--muted);
  font-size: 0.78rem;
}

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

.active-filter {
  border-color: rgba(168, 85, 247, 0.72);
  background: rgba(168, 85, 247, 0.2);
}

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

.production-project-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.production-project-card[data-status="blocked"] {
  border-color: rgba(251, 113, 133, 0.38);
}

.production-project-card[data-status="review"],
.production-project-card[data-status="attention"] {
  border-color: rgba(245, 158, 11, 0.34);
}

.project-card-head,
.project-progress > div:first-child,
.project-mini-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.project-card-head {
  align-items: flex-start;
}

.project-card-head h3 {
  margin: 0;
  font-size: 1rem;
}

.project-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: 999px;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.12);
  font-size: 0.74rem;
  font-weight: 700;
}

.project-status[data-status="active"] {
  border-color: rgba(34, 197, 94, 0.34);
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.1);
}

.project-status[data-status="blocked"] {
  border-color: rgba(251, 113, 133, 0.42);
  color: #fecdd3;
  background: rgba(251, 113, 133, 0.12);
}

.project-progress {
  display: grid;
  gap: 6px;
}

.project-mini-row {
  align-items: flex-start;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.project-mini-row strong {
  flex: 0 0 92px;
  font-size: 0.78rem;
}

.project-mini-row span {
  overflow-wrap: anywhere;
  text-align: right;
  line-height: 1.4;
}

.timeline-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-list li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.timeline-time {
  color: #d8c8ff;
  font-size: 0.8rem;
  font-weight: 700;
}

.timeline-list p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.prompt-output {
  min-height: 230px;
  max-height: 430px;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  color: #f7f2ff;
  background: rgba(0, 0, 0, 0.22);
  line-height: 1.55;
}

.prompt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.prompt-actions .secondary-button:disabled,
.batch-toolbar .secondary-button:disabled,
.batch-toolbar .primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.prompt-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: 999px;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.12);
  font-size: 0.82rem;
  font-weight: 700;
}

.prompt-status[data-prompt-status="copied"],
.prompt-queue-item em[data-prompt-status="copied"] {
  border-color: rgba(56, 189, 248, 0.38);
  color: #bae6fd;
  background: rgba(56, 189, 248, 0.12);
}

.prompt-status[data-prompt-status="done"] {
  border-color: rgba(34, 197, 94, 0.32);
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.1);
}

.prompt-queue {
  margin-top: 12px;
}

.batch-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.selection-count {
  color: var(--muted);
  font-size: 0.82rem;
  margin-left: auto;
}

.prompt-queue-heading {
  margin-bottom: 8px;
}

.prompt-queue h3 {
  margin: 0;
  font-size: 0.9rem;
}

.prompt-queue-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}

.prompt-queue-list article {
  margin: 0;
}

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

.prompt-queue-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  justify-self: center;
  accent-color: var(--purple);
}

.prompt-queue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  width: 100%;
  min-height: 62px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  text-align: left;
}

.prompt-queue-item.active {
  border-color: rgba(168, 85, 247, 0.72);
  background: rgba(168, 85, 247, 0.14);
}

.prompt-queue-item.batch-item {
  border-color: rgba(56, 189, 248, 0.24);
}

.prompt-queue-item strong,
.prompt-queue-item span {
  overflow-wrap: anywhere;
}

.prompt-queue-item span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.78rem;
}

.prompt-queue-item em {
  align-self: start;
  padding: 4px 7px;
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: 999px;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.12);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.tab.active {
  border-color: rgba(168, 85, 247, 0.7);
  background: rgba(168, 85, 247, 0.22);
}

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

.log-list article,
.empty-state {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.log-list strong,
.log-list span,
.log-list p {
  display: block;
}

.log-list p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.empty-state {
  color: var(--muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[data-priority="high"],
[data-state="危険"],
[data-state="停止"] {
  color: var(--red);
}

[data-priority="medium"],
[data-state="注意"] {
  color: var(--amber);
}

@media (max-width: 1040px) {
  .workspace {
    grid-template-columns: 1fr;
  }

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

  .project-module-header,
  .constitution-panel,
  .docs-link-grid,
  .executive-metrics,
  .executive-action-grid,
  .academy-worker-grid,
  .academy-progress-grid,
  .autonomous-metrics,
  .delivery-program-metrics,
  .version3-completion-metrics,
  .version3-review-grid,
  .delivery-gate-list,
  .delivery-track-list,
  .authority-stack,
  .version4-completion-list,
  .cto-authority-list ul,
  .delivery-checklist ul,
  .production-project-grid {
    grid-template-columns: 1fr;
  }

  .executive-dashboard-header {
    flex-direction: column;
  }

  .constitution-flow {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 14px;
  }

  .topbar,
  .inbox-actions,
  .executive-dashboard-header {
    align-items: stretch;
    flex-direction: column;
  }

  .status-strip {
    align-self: flex-start;
  }

  .side-stack,
  .decision-grid,
  .cost-grid,
  .executive-metrics,
  .executive-action-grid,
  .project-summary-grid {
    grid-template-columns: 1fr;
  }

  .ai-proposal-grid {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }

  .academy-details > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-proposal-card {
    min-width: 0;
  }

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

  .select-row {
    align-items: stretch;
    flex-direction: column;
  }

  select {
    width: 100%;
  }
}

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

.integration-status-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.integration-status-item span {
  color: var(--muted);
  font-size: 0.82rem;
}

.integration-status-item em {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-style: normal;
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}

.account-connection-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.account-connection-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.account-connection-card * {
  min-width: 0;
}

.account-connection-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-connection-card span,
.account-connection-card p,
.account-connection-card li {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.account-connection-card ul,
.account-connection-card ol {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding-left: 18px;
}

.account-subsection {
  display: grid;
  gap: 6px;
}

.account-subsection h3 {
  margin: 0;
  color: #efe7ff;
  font-size: 0.82rem;
  line-height: 1.35;
}

.account-connection-card em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}

.account-requested-input {
  font-weight: 700;
}

.account-command-preview {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}