feat: Improve responsive layout and prevent horizontal overflow by adding min-width properties and adjusting styles across various breakpoints.

frontend/styles.css

@@ -50,6 +50,7 @@ body {
         linear-gradient(180deg, #fcfdff 0%, #f3f6fb 100%);
     min-height: 100vh;
     -webkit-font-smoothing: antialiased;
+    overflow-x: hidden;
 }
 
 ::-webkit-scrollbar {
@@ -139,6 +140,10 @@ a:focus-visible,
     transition: background-color 200ms var(--ease-apple), box-shadow 200ms var(--ease-apple);
 }
 
+.topbar__inner > * {
+    min-width: 0;
+}
+
 .brand {
     display: inline-flex;
     align-items: center;
@@ -245,6 +250,21 @@ a:focus-visible,
     margin: 0 auto;
 }
 
+.page-container,
+.route-view,
+.results-grid,
+.upload-layout,
+.technical-shell,
+.technical-content,
+.history-group,
+.footer-grid,
+.page-header--results,
+.panel-header,
+.history-card,
+.nodule-card {
+    min-width: 0;
+}
+
 .route-view {
     animation: routeFade 320ms var(--ease-apple);
 }
@@ -1290,6 +1310,7 @@ a:focus-visible,
     background: rgba(255, 255, 255, 0.9);
     color: var(--text-secondary);
     box-shadow: var(--shadow-sm);
+    white-space: nowrap;
 }
 
 .technical-tab.is-active {
@@ -1662,6 +1683,10 @@ a:focus-visible,
         align-items: start;
     }
 
+    .page-header__actions {
+        width: 100%;
+    }
+
     .results-main {
         position: static;
     }
@@ -1676,11 +1701,93 @@ a:focus-visible,
     }
 }
 
+@media (max-width: 900px) {
+    .topbar__inner {
+        gap: 16px;
+        padding: 12px 16px;
+    }
+
+    .hero {
+        gap: 32px;
+    }
+
+    .hero__visual {
+        min-height: 420px;
+    }
+
+    .section-block {
+        padding-top: 72px;
+    }
+
+    .cta-panel,
+    .upload-focus,
+    .step-card,
+    .stat-card,
+    .feature-card,
+    .card,
+    .history-card,
+    .sample-card {
+        padding: 24px;
+    }
+
+    .page-header {
+        padding: 40px 0 16px;
+    }
+
+    .page-header--results,
+    .risk-banner,
+    .panel-header,
+    .nodule-card__top,
+    .history-card__row,
+    .metric-block__row,
+    .history-card__actions,
+    .modal__footer {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .risk-banner__metrics {
+        width: 100%;
+        margin-left: 0;
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 12px;
+    }
+
+    .floating-bar {
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+
+    .scan-stage {
+        min-height: 340px;
+    }
+
+    .metric-table div {
+        grid-template-columns: 1fr;
+        justify-items: start;
+    }
+
+    .code-card__header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
 @media (max-width: 767px) {
     .app-shell {
         padding: 0 16px 32px;
     }
 
+    .topbar {
+        padding: 12px 0;
+    }
+
+    .topbar__inner {
+        padding: 10px 14px;
+        gap: 12px;
+    }
+
     .nav,
     .topbar__actions .icon-button:not(.mobile-nav-toggle) {
         display: none;
@@ -1694,6 +1801,10 @@ a:focus-visible,
         display: flex;
     }
 
+    .mobile-nav a {
+        padding: 10px 4px;
+    }
+
     .brand__wordmark {
         height: 44px;
     }
@@ -1704,6 +1815,21 @@ a:focus-visible,
         grid-template-columns: 1fr;
     }
 
+    .hero__visual {
+        min-height: 320px;
+    }
+
+    .hero__visual-card {
+        padding: 20px;
+        border-radius: 22px;
+    }
+
+    .hero__symbol {
+        width: 88px;
+        right: 4px;
+        bottom: 12px;
+    }
+
     .hero h1,
     .page-header h1 {
         font-size: clamp(2.4rem, 12vw, 3.4rem);
@@ -1721,6 +1847,29 @@ a:focus-visible,
         align-items: stretch;
     }
 
+    .section-block {
+        padding-top: 56px;
+    }
+
+    .step-card,
+    .stat-card,
+    .feature-card,
+    .card,
+    .history-card,
+    .sample-card,
+    .cta-panel,
+    .upload-focus,
+    .modal__header,
+    .modal__body,
+    .modal__footer {
+        padding-left: 18px;
+        padding-right: 18px;
+    }
+
+    .cta-panel {
+        margin-top: 56px;
+    }
+
     .button,
     .button--hero,
     .button--ghost,
@@ -1729,6 +1878,10 @@ a:focus-visible,
         width: 100%;
     }
 
+    .button--hero {
+        padding: 0 24px;
+    }
+
     .file-facts,
     .timing-grid,
     .scan-detail-grid,
@@ -1736,11 +1889,118 @@ a:focus-visible,
         grid-template-columns: 1fr;
     }
 
+    .upload-zone {
+        min-height: 280px;
+        padding: 28px 20px;
+    }
+
+    .upload-zone h2 {
+        font-size: 28px;
+    }
+
+    .sample-card {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .analysis-view {
+        min-height: calc(100vh - 140px);
+    }
+
+    .analysis-view h1 {
+        font-size: 28px;
+    }
+
+    .risk-banner {
+        padding: 20px;
+    }
+
+    .risk-banner__identity {
+        align-items: flex-start;
+    }
+
+    .risk-banner__identity h2 {
+        font-size: 24px;
+    }
+
+    .risk-banner__metrics {
+        grid-template-columns: 1fr;
+    }
+
+    .scan-stage {
+        min-height: 260px;
+    }
+
+    .scan-placeholder {
+        padding: 24px 18px;
+    }
+
+    .technical-tabs {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .technical-tab {
+        width: 100%;
+        white-space: normal;
+    }
+
+    .metric-table div,
+    .footer-grid,
+    .developer-grid,
+    .media-grid,
+    .media-grid--two {
+        grid-template-columns: 1fr;
+    }
+
+    .modal-backdrop {
+        padding: 16px;
+        align-items: end;
+    }
+
+    .modal {
+        width: 100%;
+        max-height: min(88vh, 760px);
+    }
+
+    .modal__footer {
+        align-items: stretch;
+    }
+
     .floating-bar {
         position: static;
+        padding: 14px;
     }
 
     .history-toolbar {
         flex-direction: column;
     }
+
+    .footer {
+        margin-top: 40px;
+    }
+}
+
+@media (max-width: 520px) {
+    .technical-tabs {
+        grid-template-columns: 1fr;
+    }
+
+    .step-badge {
+        width: 64px;
+        height: 64px;
+        margin-bottom: 20px;
+        font-size: 24px;
+    }
+
+    .step-card h3,
+    .feature-card h3 {
+        font-size: 20px;
+    }
+
+    .footer-strip {
+        padding-left: 0;
+        padding-right: 0;
+        line-height: 1.5;
+    }
 }