diff --git a/src/opal/web/static/css/main.css b/src/opal/web/static/css/main.css
index 49b2374..1105a75 100644
--- a/src/opal/web/static/css/main.css
+++ b/src/opal/web/static/css/main.css
@@ -49,6 +49,7 @@
     --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
 
     /* Spacing */
+    --content-max: 1400px;
     --space-xs: 4px;
     --space-sm: 8px;
     --space-md: 16px;
@@ -250,7 +251,8 @@ select option {
 
 /* Breadcrumbs */
 .breadcrumbs {
-    padding: var(--space-xs) var(--space-md);
+    /* Full-bleed bar, text aligned to the centered content edge */
+    padding: var(--space-xs) max(var(--space-md), calc((100% - var(--content-max)) / 2 + var(--space-md)));
     background: var(--bg-tertiary);
     border-bottom: 1px solid var(--border-color);
     font-family: var(--font-mono);
@@ -268,9 +270,12 @@ select option {
     margin: 0;
 }
 
-/* Main */
+/* Main — bounded, centered content; chrome stays full-bleed */
 .main {
     flex: 1;
+    width: 100%;
+    max-width: var(--content-max);
+    margin-inline: auto;
     padding: var(--space-md);
 }
 
@@ -1376,9 +1381,10 @@ textarea {
 }
 
 /* Execution Tabs — mirrors .nav-dropdown-btn so the chrome reads as one family.
-   On the exec-detail page the strip breaks out of .main padding so it runs
-   edge-to-edge; the .main padding-top is also zeroed so the strip hugs the
-   breadcrumbs above. */
+   On the exec-detail page the strip cancels .main's padding so it spans the
+   bounded content column (the strip is content, not page chrome); .main's
+   padding-top is also zeroed so the strip sits directly under the
+   breadcrumb bar. */
 .exec-tabs {
     display: flex;
     gap: var(--space-xs);
diff --git a/src/opal/web/templates/docs.html b/src/opal/web/templates/docs.html
index 9aa2e01..7428a6a 100644
--- a/src/opal/web/templates/docs.html
+++ b/src/opal/web/templates/docs.html
@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="panel" style="max-width: 1000px;">
+<div class="panel" style="max-width: 1000px; margin-inline: auto;">
     <div class="panel-header">OPAL DOCUMENTATION - v{{ opal_version or '0.2.0' }}</div>
     <div class="panel-body">
         <div style="display: flex; gap: var(--space-xl);">
diff --git a/src/opal/web/templates/inventory/opal_detail.html b/src/opal/web/templates/inventory/opal_detail.html
index 52fb575..cf6a59d 100644
--- a/src/opal/web/templates/inventory/opal_detail.html
+++ b/src/opal/web/templates/inventory/opal_detail.html
@@ -333,8 +333,8 @@ <h4 style="margin-bottom: var(--space-sm);">ASSEMBLIES CONTAINING THIS COMPONENT
 </style>
 
 <!-- Scrap Modal -->
-<div id="scrap-modal" class="modal-overlay" style="display: none;">
-    <div class="modal-content" style="max-width: 500px;">
+<div id="scrap-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--modal-backdrop); z-index: var(--z-modal);">
+    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px;">
         <div class="panel">
             <div class="panel-header">
                 <span>SCRAP INVENTORY</span>
@@ -379,7 +379,7 @@ <h4 style="margin-bottom: var(--space-sm);">ASSEMBLIES CONTAINING THIS COMPONENT
 
 <script>
 function showScrapModal() {
-    document.getElementById('scrap-modal').style.display = 'flex';
+    document.getElementById('scrap-modal').style.display = 'block';
 }
 function hideScrapModal() {
     document.getElementById('scrap-modal').style.display = 'none';
diff --git a/src/opal/web/templates/opalkit/_macros.html b/src/opal/web/templates/opalkit/_macros.html
index 2cb748b..13ee11f 100644
--- a/src/opal/web/templates/opalkit/_macros.html
+++ b/src/opal/web/templates/opalkit/_macros.html
@@ -341,7 +341,7 @@
           {% call ok.panel("PARTS", actions=ok.btn("+ NEW", href="/new", variant="primary")) %}...{% endcall %}
 #}
 {% macro panel(title, actions=none, max_width=none, margin_top=none, id=none) %}
-<div class="panel"{% if max_width or margin_top or id %} {% if id %}id="{{ id }}" {% endif %}style="{% if max_width %}max-width: {{ max_width }};{% endif %}{% if margin_top %} margin-top: {{ margin_top }};{% endif %}"{% endif %}>
+<div class="panel"{% if max_width or margin_top or id %} {% if id %}id="{{ id }}" {% endif %}style="{% if max_width %}max-width: {{ max_width }}; margin-inline: auto;{% endif %}{% if margin_top %} margin-top: {{ margin_top }};{% endif %}"{% endif %}>
     <div class="panel-header">
         <span>{{ title }}</span>
         {%- if actions -%}
diff --git a/src/opal/web/templates/opalkit/styleguide/index.html b/src/opal/web/templates/opalkit/styleguide/index.html
index 1f45bff..dc37ddc 100644
--- a/src/opal/web/templates/opalkit/styleguide/index.html
+++ b/src/opal/web/templates/opalkit/styleguide/index.html
@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block content %}
-<div style="max-width: 1000px;">
+<div style="max-width: 1000px; margin-inline: auto;">
     <h1 style="font-family: var(--font-mono); margin-bottom: var(--space-lg);">OPALkit Component Styleguide</h1>
 
     <!-- Colors -->
diff --git a/src/opal/web/templates/project/wizard.html b/src/opal/web/templates/project/wizard.html
index 46054ec..7baf4fd 100644
--- a/src/opal/web/templates/project/wizard.html
+++ b/src/opal/web/templates/project/wizard.html
@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="panel" style="max-width: 900px;">
+<div class="panel" style="max-width: 900px; margin-inline: auto;">
     <div class="panel-header">
         {% if existing_config %}EDIT PROJECT CONFIGURATION{% else %}NEW PROJECT CONFIGURATION{% endif %}
     </div>
diff --git a/src/opal/web/templates/settings/index.html b/src/opal/web/templates/settings/index.html
index b102b77..d02bc0a 100644
--- a/src/opal/web/templates/settings/index.html
+++ b/src/opal/web/templates/settings/index.html
@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block content %}
-<div style="max-width: 900px;">
+<div style="max-width: 900px; margin-inline: auto;">
 
 {# ── PROJECT CONFIGURATION ── #}
 {% if project %}