printedparts kiosk: keypad and entry-panel visual polish

The keypad becomes a proper terminal pad: fixed 3-column grid of
rounded square buttons with tabular numerals, press feedback, and
muted Clear/backspace actions. Each manual step (item number, SSO,
quantity) shares one card panel - boxed entry display with placeholder
styling, keypad, and a full-width action button.

frontend/src/views/printedparts/PartsKiosk.vue

@@ -21,15 +21,17 @@
         No scanner?
         <a href="#" @click.prevent="manualEntry = !manualEntry">Type the number</a>
       </p>
-      <div v-if="manualEntry" class="manual-block">
-        <div class="quantity-display">{{ manualCode || 'label number' }}</div>
+      <div v-if="manualEntry" class="entry-panel">
+        <div class="entry-display" :class="{ empty: !manualCode }">
+          {{ manualCode || 'label number' }}
+        </div>
         <TouchKeypad @digit="manualCode += $event"
                      @clear="manualCode = ''"
                      @backspace="manualCode = manualCode.slice(0, -1)" />
         <button class="btn btn-primary take-button" :disabled="!manualCode"
                 @click="lookupItem(manualCode)">Look up</button>
-        <p class="kiosk-hint">Just the number from the label - e.g. 4 for
-          {{ '0004' }}; letters are added automatically.</p>
+        <p class="kiosk-hint">Just the number from the label; letters are
+          added automatically.</p>
       </div>
     </section>
 
@@ -43,8 +45,10 @@
         </div>
       </div>
       <p class="kiosk-prompt">Scan your badge or tap in your SSO</p>
-      <div class="manual-block">
-        <div class="quantity-display">{{ manualBadge || 'SSO' }}</div>
+      <div class="entry-panel">
+        <div class="entry-display" :class="{ empty: !manualBadge }">
+          {{ manualBadge || 'SSO' }}
+        </div>
         <TouchKeypad @digit="manualBadge += $event"
                      @clear="manualBadge = ''"
                      @backspace="manualBadge = manualBadge.slice(0, -1)" />
@@ -63,14 +67,18 @@
         </div>
       </div>
       <p class="kiosk-prompt">How many are you taking?</p>
-      <div class="quantity-display">{{ quantity || '0' }}</div>
-      <TouchKeypad @digit="quantity += $event"
-                   @clear="quantity = ''"
-                   @backspace="quantity = quantity.slice(0, -1)" />
-      <button class="btn btn-primary take-button" :disabled="!quantity || submitting"
-              @click="submitTake">
-        {{ submitting ? 'Working...' : 'TAKE' }}
-      </button>
+      <div class="entry-panel">
+        <div class="entry-display" :class="{ empty: !quantity }">
+          {{ quantity || '0' }}
+        </div>
+        <TouchKeypad @digit="quantity += $event"
+                     @clear="quantity = ''"
+                     @backspace="quantity = quantity.slice(0, -1)" />
+        <button class="btn btn-primary take-button" :disabled="!quantity || submitting"
+                @click="submitTake">
+          {{ submitting ? 'Working...' : 'TAKE' }}
+        </button>
+      </div>
     </section>
 
     <!-- done -->
@@ -240,16 +248,42 @@ function reset() {
   object-fit: cover;
   border-radius: 0.4rem;
 }
-.quantity-display {
-  font-size: 3rem;
+.entry-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 1rem;
+  padding: 1.5rem 2rem;
+}
+.entry-display {
+  width: 16.9rem;
+  box-sizing: border-box;
+  font-size: 2.4rem;
   font-weight: 700;
-  min-width: 8rem;
+  font-variant-numeric: tabular-nums;
   text-align: center;
-  border-bottom: 3px solid var(--primary);
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+  background: var(--bg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.entry-display.empty {
+  color: var(--text-light);
+  font-weight: 400;
+  font-size: 1.4rem;
+  line-height: 2.4rem;
 }
 .take-button {
-  font-size: 1.5rem;
-  padding: 0.9rem 3.5rem;
+  font-size: 1.4rem;
+  padding: 0.85rem 0;
+  width: 16.9rem;
+  border-radius: 0.75rem;
 }
 .manual-row { display: flex; gap: 0.6rem; }
 .manual-block {