diff --git a/web/ticket-order.js b/web/ticket-order.js
index 9e320d4..b2a47aa 100644
--- a/web/ticket-order.js
+++ b/web/ticket-order.js
@@ -182,7 +182,7 @@
           const bg = isActive ? li.color : '#f8fafc';
           const fg = isActive ? getContrastColor(li.color) : '#334155';
           const border = isActive ? li.color : '#cbd5e1';
-          html += `<button class="tvm-line-btn" style="padding: 6px 12px; border: 1.5px solid ${border}; background: ${bg}; color: ${fg}; border-radius: 0; cursor: pointer; font-weight: bold; font-size: 13px; transition: all 0.25s ease;" onclick="selectTvmLine(${i})">${li.name}</button>`;
+          html += `<button class="tvm-line-btn" style="--btn-border:${border}; --btn-bg:${bg}; --btn-fg:${fg};" onclick="selectTvmLine(${i})">${li.name}</button>`;
       }
       container.innerHTML = html;
   }
@@ -413,10 +413,10 @@
                 to { opacity: 1; transform: translateX(0); }
             }
             .tvm-animate { animation: tvmFadeIn 0.3s ease-out forwards; }
-            .tvm-layout { display: flex; flex-direction: column; gap: 16px; width: 100%; }
-            .tvm-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -8px; margin-bottom: 2px; }
-            .tvm-line-btn { flex: 0 0 auto; white-space: nowrap; }
-            .tvm-single-line, .tvm-route { overflow-x: auto; padding: 10px 0; min-height: 120px; display: flex; align-items: center; justify-content: flex-start; }
+            .tvm-layout { display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; box-sizing: border-box; }
+            .tvm-lines { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 6px; width: 100%; min-width: 0; margin-top: -8px; margin-bottom: 2px; box-sizing: border-box; }
+            .tvm-line-btn { flex: 0 0 auto; min-height: 34px; padding: 0 12px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border: 1.5px solid var(--btn-border, #cbd5e1); background: var(--btn-bg, #f8fafc); color: var(--btn-fg, #334155); border-radius: 0; cursor: pointer; font-weight: 700; font-size: 13px; line-height: 1; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
+            .tvm-single-line, .tvm-route { width: 100%; min-width: 0; overflow-x: auto; padding: 10px 0; min-height: 120px; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; }
             .tvm-overview { width: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center; background: #f8fbf8; border: 1px solid #d7e0d3; padding: 10px; box-sizing: border-box; }
             .tvm-overview-frame { width: 100%; }
             .tvm-overview img { display: block; max-width: 100%; height: auto; background: #ffffff; margin: 0 auto; }