diff --git a/app/globals.css b/app/globals.css
index 75fce27..1e03d87 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -489,20 +489,20 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
   cursor: pointer;
   font-size: 20px;
 }
-.catalog-modal-product { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr); align-items: stretch; gap: 28px; }
-.catalog-modal-visual-card { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 9px; }
-.catalog-modal-visual-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-.catalog-modal-visual-label { color: #687791; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
+.catalog-modal-product { display: block; }
+.catalog-modal-visual-card { position: relative; min-width: 0; }
+.catalog-modal-visual-toolbar { position: absolute; top: 14px; left: 14px; z-index: 2; max-width: calc(100% - 28px); display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding: 4px; border: 1px solid rgba(220,229,242,.88); border-radius: 10px; background: rgba(255,255,255,.9); box-shadow: 0 5px 15px rgba(31,55,96,.09); backdrop-filter: blur(8px); }
 .catalog-modal-gallery-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #dce5f2; border-radius: 8px; background: #f5f8fd; }
 .catalog-modal-gallery-switch button { padding: 6px 9px; border: 0; border-radius: 6px; color: #7c899c; background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; }
 .catalog-modal-gallery-switch button.active { color: var(--blue); background: white; box-shadow: 0 2px 7px rgba(31,71,139,.09); }
 .catalog-modal-gallery-switch button:disabled { cursor: not-allowed; opacity: .4; }
+.catalog-modal-inline-info { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
+.catalog-modal-inline-info > span { color: var(--blue); font-size: 10px; font-weight: 800; }
+.catalog-modal-inline-info h2 { max-width: min(560px, 100%); margin: 0; color: var(--ink); font-size: 20px; line-height: 1.3; letter-spacing: -.025em; }
+.catalog-modal-inline-info code { color: #5d6b81; font-size: 10px; }
+.catalog-modal-inline-info small { color: #96a0af; font-size: 8px; }
 .catalog-modal-image { min-height: min(56vh, 520px); display: flex; align-items: center; justify-content: center; border: 1px solid #e1e7f0; border-radius: 13px; overflow: hidden; background: #f5f7fb; }
 .catalog-modal-image img { display: block; max-width: 100%; max-height: min(56vh, 510px); width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
-.catalog-modal-product-info { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; padding: 25px 4px 8px; }
-.catalog-modal-product h2 { margin: 4px 0 10px; font-size: 27px; line-height: 1.3; letter-spacing: -.025em; }
-.catalog-modal-product code { color: #5d6b81; font-size: 11px; }
-.catalog-source-note { color: #96a0af; font-size: 9px; }
 .catalog-spec-table { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid #e0e5ed; border-radius: 11px; background: #e0e5ed; }
 .catalog-spec-table div { min-height: 38px; padding: 7px 10px; display: grid; align-content: center; gap: 3px; background: white; }
 .catalog-spec-table span { color: #8b96a7; font-size: 8px; }
@@ -570,8 +570,9 @@ footer > span { color: #9aa4b2; font-size: 10px; }
   .catalog-card-body dl { min-height: 90px; }
   .catalog-modal-backdrop { padding: 10px; }
   .catalog-modal { padding: 22px 16px; }
-  .catalog-modal-product { grid-template-columns: 1fr; gap: 16px; }
-  .catalog-modal-product-info { padding: 0 3px; }
+  .catalog-modal-visual-toolbar { top: 10px; left: 10px; max-width: calc(100% - 20px); align-items: flex-start; flex-direction: column; gap: 10px; }
+  .catalog-modal-inline-info { width: 100%; }
+  .catalog-modal-inline-info h2 { font-size: 18px; }
   .catalog-modal-image { min-height: 290px; }
   .catalog-modal-image img { max-height: 290px; }
   .catalog-spec-table { grid-template-columns: 1fr; }
diff --git a/app/page.tsx b/app/page.tsx
index 9bd0f8f..e920866 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1218,7 +1218,6 @@ export default function Home() {
             <div className="catalog-modal-product">
               <div className="catalog-modal-visual-card">
                 <div className="catalog-modal-visual-toolbar">
-                  <span className="catalog-modal-visual-label">产品图片</span>
                   <div className="catalog-modal-gallery-switch" role="tablist" aria-label="切换产品图片">
                     <button
                       type="button"
@@ -1236,6 +1235,18 @@ export default function Home() {
                       aria-selected={catalogVisualMode === "size"}
                     >产品尺寸</button>
                   </div>
+                  <div className="catalog-modal-inline-info">
+                    <span>{selectedCatalogProduct.category}</span>
+                    <h2 id="catalog-modal-title">{selectedCatalogProduct.name}</h2>
+                    <code>{selectedCatalogProduct.code}</code>
+                    <small>
+                      {selectedCatalogProduct.page > 0
+                        ? `官方产品目录第 ${selectedCatalogProduct.page} 页`
+                        : selectedCatalogProduct.category === "舵盘配件"
+                          ? "商城产品资料 · 舵盘配件"
+                          : "商城产品资料 · 精密齿轮配件"}
+                    </small>
+                  </div>
                 </div>
                 <div className="catalog-modal-image">
                   {catalogVisualMode === "size" && selectedCatalogDimensionImage ? (
@@ -1247,18 +1258,6 @@ export default function Home() {
                   )}
                 </div>
               </div>
-              <div className="catalog-modal-product-info">
-                <p className="step-kicker">{selectedCatalogProduct.category}</p>
-                <h2 id="catalog-modal-title">{selectedCatalogProduct.name}</h2>
-                <code>{selectedCatalogProduct.code}</code>
-                <p className="catalog-source-note">
-                  {selectedCatalogProduct.page > 0
-                    ? `官方产品目录第 ${selectedCatalogProduct.page} 页`
-                    : selectedCatalogProduct.category === "舵盘配件"
-                      ? "商城产品资料 · 舵盘配件"
-                      : "商城产品资料 · 精密齿轮配件"}
-                </p>
-              </div>
             </div>
             <div className="catalog-spec-table">
               {Object.entries(selectedCatalogProduct.specs).map(([label, value]) => (