:root {
  --noeral-ink: #071a21;
  --noeral-ink-2: #10313a;
  --noeral-paper: #f7faf9;
  --noeral-surface: #ffffff;
  --noeral-line: #d5e0dd;
  --noeral-muted: #587078;
  --noeral-green: #0f7b62;
  --noeral-green-bright: #2dd4a7;
  --noeral-blue: #2777ad;
  --noeral-yellow: #b7791f;
  --noeral-red: #b43b48;
  --noeral-radius: 6px;
  --noeral-shadow: 0 14px 34px rgba(7, 26, 33, 0.10);
  --noeral-font: Inter, "Segoe UI", Arial, sans-serif;
  --noeral-display: "Segoe UI", Arial, sans-serif;
  --noeral-focus: 0 0 0 3px rgba(45, 212, 167, 0.34);
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; color: var(--noeral-ink); background: var(--noeral-paper); font-family: var(--noeral-font); letter-spacing: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, .noeral-command { min-height: 44px; }
:focus-visible { outline: none; box-shadow: var(--noeral-focus); }

.noeral-wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 750; }
.noeral-wordmark img { width: 34px; height: 34px; }
.noeral-kicker { color: var(--noeral-green); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.noeral-status { display: inline-flex; gap: 7px; align-items: center; padding: 5px 8px; border: 1px solid var(--noeral-line); border-radius: 999px; font-size: 12px; font-weight: 700; background: #fff; }
.noeral-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--noeral-green); }
.noeral-status.warning::before { background: var(--noeral-yellow); }
.noeral-status.blocked::before { background: var(--noeral-red); }

.noeral-public-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 0 5vw; border-bottom: 1px solid rgba(213,224,221,.85); background: rgba(247,250,249,.94); backdrop-filter: blur(14px); }
.noeral-public-nav { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.noeral-public-nav a { text-decoration: none; color: var(--noeral-muted); }
.noeral-public-nav a[aria-current="page"] { color: var(--noeral-ink); font-weight: 750; }
.noeral-public-nav .primary { padding: 10px 15px; color: #fff; background: var(--noeral-ink); border-radius: var(--noeral-radius); }

.noeral-public-hero { min-height: min(720px, calc(100vh - 68px)); position: relative; display: grid; align-items: end; overflow: hidden; color: #fff; background: var(--noeral-ink); }
.noeral-public-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: .36; }
.noeral-public-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,26,33,.96) 0%, rgba(7,26,33,.78) 52%, rgba(7,26,33,.24) 100%); }
.noeral-public-hero-content { position: relative; z-index: 1; width: min(760px, 90vw); margin: 0 0 7vh 6vw; }
.noeral-public-hero h1 { margin: 10px 0 18px; font: 750 clamp(44px, 6vw, 76px)/1.02 var(--noeral-display); }
.noeral-public-hero p { max-width: 660px; font-size: 19px; line-height: 1.6; color: #d7e7e2; }
.noeral-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.noeral-actions a, .noeral-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 17px; border: 1px solid #6f8b91; border-radius: var(--noeral-radius); background: transparent; color: inherit; text-decoration: none; cursor: pointer; }
.noeral-actions .primary { border-color: var(--noeral-green-bright); color: var(--noeral-ink); background: var(--noeral-green-bright); font-weight: 800; }
.noeral-band { padding: 72px 6vw; }
.noeral-band.white { background: #fff; }
.noeral-band.dark { color: #fff; background: var(--noeral-ink); }
.noeral-band-inner { width: min(1180px, 100%); margin: auto; }
.noeral-band h2 { max-width: 720px; margin: 8px 0 28px; font: 720 clamp(30px, 4vw, 48px)/1.12 var(--noeral-display); }
.noeral-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--noeral-line); background: var(--noeral-line); }
.noeral-feature { min-height: 210px; padding: 26px; background: #fff; }
.noeral-feature h3 { font-size: 19px; }
.noeral-feature p { color: var(--noeral-muted); line-height: 1.6; }
.noeral-product-shot { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.5fr); gap: 34px; align-items: center; }
.noeral-product-shot img { width: 100%; border: 1px solid #30474e; box-shadow: var(--noeral-shadow); }

.noeral-app { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); background: #edf3f1; }
.noeral-app-nav { position: sticky; top: 0; height: 100vh; padding: 20px 16px; color: #d8e8e3; background: var(--noeral-ink); overflow: auto; }
.noeral-app-nav .noeral-wordmark { color: #fff; margin-bottom: 28px; }
.noeral-app-nav nav { display: grid; gap: 5px; }
.noeral-app-nav nav a { padding: 10px 11px; border-radius: 4px; color: #a9c0c4; text-decoration: none; font-size: 14px; }
.noeral-app-nav nav a[aria-current="page"] { color: #fff; background: #173944; box-shadow: inset 3px 0 var(--noeral-green-bright); }
.noeral-app-main { min-width: 0; }
.noeral-app-topbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 28px; border-bottom: 1px solid var(--noeral-line); background: #fff; }
.noeral-app-topbar label { display: flex; align-items: center; gap: 8px; color: var(--noeral-muted); }
.noeral-app-topbar select { min-width: 220px; padding: 9px; border: 1px solid var(--noeral-line); border-radius: 4px; background: #fff; }
.noeral-page { width: min(1440px, 100%); margin: auto; padding: 28px; }
.noeral-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.noeral-page-heading h1 { margin: 5px 0 0; font: 720 clamp(28px, 4vw, 42px)/1.1 var(--noeral-display); }
.noeral-page-heading p { max-width: 700px; color: var(--noeral-muted); }
.noeral-metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--noeral-line); background: #fff; }
.noeral-metric { min-height: 114px; padding: 20px; border-right: 1px solid var(--noeral-line); }
.noeral-metric:last-child { border-right: 0; }
.noeral-metric strong { display: block; margin-top: 9px; font-size: 29px; }
.noeral-work-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .65fr); gap: 18px; margin-top: 18px; }
.noeral-panel { padding: 22px; border: 1px solid var(--noeral-line); border-radius: var(--noeral-radius); background: #fff; }
.noeral-panel h2 { margin: 5px 0 18px; font-size: 21px; }
.noeral-list { display: grid; gap: 0; border-top: 1px solid var(--noeral-line); }
.noeral-list-row { display: grid; grid-template-columns: 1.2fr .7fr .5fr auto; gap: 14px; align-items: center; min-height: 62px; border-bottom: 1px solid var(--noeral-line); }
.noeral-list-row small { color: var(--noeral-muted); }
.noeral-control { padding: 9px 12px; border: 1px solid var(--noeral-line); border-radius: 4px; background: #fff; cursor: pointer; }
.noeral-control.primary { color: #fff; border-color: var(--noeral-green); background: var(--noeral-green); }
.noeral-live { min-height: 24px; margin-top: 12px; color: var(--noeral-green); font-weight: 700; }

body[data-noeral-role="founder"] { --role-accent: #d4a64f; }
body[data-noeral-role="executive"] { --role-accent: #67b7f7; }
body[data-noeral-role="admin"] { --role-accent: #2dd4a7; }
body[data-noeral-role="operator"] { --role-accent: #7dd3a8; }
body[data-noeral-role="client"] { --role-accent: #4a9c88; background: #f5f8f7; }
body[data-noeral-role] .noeral-page-heading { border-left: 4px solid var(--role-accent); padding-left: 16px; }
body[data-noeral-role="client"] .noeral-app { grid-template-columns: 220px minmax(0, 1fr); background: #f5f8f7; }
body[data-noeral-role="client"] .noeral-app-nav { background: #12342f; }

@media (max-width: 900px) {
  .execution-panel dl { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
  .execution-panel dd { min-width: 0; margin-left: 12px; overflow-wrap: anywhere; }
  .analysis-panel strong { min-width: 0; overflow-wrap: anywhere; }
  .project-strip { width: 100%; max-width: 100%; }
  .noeral-public-nav a:not(.primary) { display: none; }
  .noeral-feature-grid, .noeral-product-shot, .noeral-work-grid { grid-template-columns: 1fr; }
  .noeral-app { grid-template-columns: 1fr; }
  .noeral-app-nav { position: static; height: auto; padding: 12px 16px; }
  .noeral-app-nav nav { display: flex; overflow-x: auto; }
  .noeral-app-nav nav a { white-space: nowrap; }
  .noeral-metric-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .aico-app-shell, .workflow-canvas { width: 100%; max-width: 100vw; min-width: 0; overflow-x: hidden; }
  .workflow-stepper { width: 100%; max-width: 100%; }
  .gov-topbar { width: 100%; max-width: 100vw; grid-template-columns: minmax(0, 1fr) auto; }
  .gov-brand { min-width: 0; max-width: 140px; padding: 0 8px; }
  .gov-brand span { min-width: 0; }
  .gov-brand strong, .gov-brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gov-top-actions { min-width: 0; max-width: 170px; padding-right: 4px; overflow-x: auto; }
  .gov-top-actions button { padding: 7px 5px; }
  .gov-heading > .gov-chip, .gov-row > .gov-chip { display: block; width: 100%; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
  .gov-row { align-items: flex-start; flex-wrap: wrap; }
  .gov-row > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .gov-stale { flex-wrap: wrap; }
  .gov-stale > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .section-title p { min-width: 0; overflow-wrap: anywhere; }
  .noeral-public-header { padding: 0 16px; }
  .noeral-public-hero-content { margin: 0 20px 42px; }
  .noeral-public-hero h1 { font-size: 44px; }
  .noeral-band { padding: 52px 20px; }
  .noeral-page { padding: 20px 14px; }
  .noeral-app-topbar { padding: 10px 14px; flex-wrap: wrap; }
  .noeral-app-topbar select { min-width: 0; width: 100%; }
  .noeral-page-heading { align-items: start; flex-direction: column; }
  .noeral-metric-row { grid-template-columns: 1fr; }
  .noeral-metric { border-right: 0; border-bottom: 1px solid var(--noeral-line); }
  .noeral-list-row { grid-template-columns: 1fr; gap: 4px; padding: 13px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .noeral-app-nav, .noeral-app-topbar, .noeral-public-header, button { display: none !important; }
  .noeral-app { display: block; background: #fff; }
  .noeral-page { width: 100%; padding: 0; }
  .noeral-panel, .noeral-metric-row { break-inside: avoid; box-shadow: none; }
}