Show option expiry countdown and widen settings for ultrawide/tablet.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/styles/app.css

@@ -145,12 +145,49 @@ input {
 }
 
 .page {
-  padding: 16px;
-  max-width: 1200px;
+  padding: 16px 20px 28px;
+  max-width: min(1680px, 100%);
   margin: 0 auto;
   width: 100%;
 }
 
+@media (min-width: 1800px) {
+  .page {
+    max-width: 1760px;
+    padding-left: 28px;
+    padding-right: 28px;
+  }
+}
+
+@media (max-width: 900px) {
+  .page {
+    padding: 12px 14px 24px;
+  }
+
+  .topnav {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .topnav-side.left,
+  .topnav-side.right {
+    justify-content: space-between;
+  }
+
+  .topnav-center {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 2px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .topnav a {
+    padding: 8px 10px;
+    font-size: 13px;
+  }
+}
+
 .card {
   background: var(--bg-panel);
   border: 1px solid var(--line);
@@ -233,6 +270,8 @@ input {
   border-radius: 8px;
   padding: 10px 12px;
   outline: none;
+  width: 100%;
+  min-height: 42px;
 }
 
 .field input:focus,
@@ -240,6 +279,96 @@ input {
   border-color: rgba(240, 185, 11, 0.55);
 }
 
+/* Settings: ultrawide + tablet */
+.settings-page {
+  width: 100%;
+  max-width: 1200px;
+}
+
+.settings-card {
+  width: 100%;
+}
+
+.settings-card-narrow {
+  max-width: 640px;
+}
+
+.settings-lead {
+  color: var(--muted);
+  margin: 0 0 16px;
+  line-height: 1.5;
+  font-size: 13px;
+}
+
+.settings-ok {
+  color: var(--up);
+  margin-bottom: 12px;
+}
+
+.settings-section {
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--line);
+}
+
+.settings-section:last-of-type {
+  border-bottom: 0;
+}
+
+.settings-section h3 {
+  margin: 0 0 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
+  letter-spacing: 0.04em;
+  text-transform: none;
+}
+
+.settings-fields {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0 18px;
+}
+
+.settings-fields .field {
+  margin-bottom: 12px;
+}
+
+.settings-actions {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+@media (min-width: 700px) {
+  .settings-fields {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1100px) {
+  .settings-page {
+    max-width: 1320px;
+  }
+
+  .settings-fields {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 699px) {
+  .settings-fields .field {
+    margin-bottom: 14px;
+  }
+
+  .field input,
+  .field select {
+    min-height: 44px;
+    font-size: 16px; /* 避免 iOS 自动缩放 */
+  }
+}
+
 .btn {
   border: 0;
   border-radius: 8px;
@@ -385,12 +514,26 @@ input {
   gap: 12px 14px;
 }
 
+.pos-cell-wide {
+  grid-column: 1 / -1;
+}
+
+.pos-countdown-urgent {
+  color: #ffb020 !important;
+}
+
 @media (max-width: 520px) {
   .pos-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
+@media (min-width: 1400px) {
+  .pos-embed-grid {
+    gap: 14px;
+  }
+}
+
 .pos-cell {
   display: flex;
   flex-direction: column;