.teq-quantity-keypad {
    box-sizing: border-box;
    position: fixed;
    inset: auto 0 var(--teq-quantity-inset, 0px);
    width: min(100%, 440px);
    max-width: 100%;
    max-height: var(--teq-quantity-height, 100dvh);
    margin: 0 auto;
    padding: 12px max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    overflow: auto;
    overscroll-behavior: contain;
    color: #e7edf8;
    background: #0b1830;
    border: 1px solid #425877;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    font: 16px/1.35 system-ui, sans-serif;
    color-scheme: dark;
    box-shadow: 0 -10px 40px #0005;
}
.teq-quantity-keypad::backdrop { background: #020917ad; }
.teq-quantity-keypad[open] { display: flex; flex-direction: column; }
.teq-quantity-keypad header, .teq-quantity-controls { flex: none; }
.teq-quantity-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.teq-quantity-keypad header { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.teq-quantity-keypad h2 { margin: 0; color: #e7edf8; font: 600 16px/1.3 system-ui, sans-serif; overflow-wrap: anywhere; }
.teq-quantity-keypad button {
    box-sizing: border-box;
    min-width: 48px;
    min-height: 48px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #425877;
    border-radius: 8px;
    color: #e7edf8;
    background: #172941;
    font: 600 17px/1.2 system-ui, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.teq-quantity-keypad button:active { background: #304666; }
.teq-quantity-keypad button:focus-visible { outline: 3px solid #efb65a; outline-offset: 2px; }
.teq-quantity-keypad button:disabled { opacity: .45; cursor: default; }
.teq-quantity-keypad button[hidden] { display: none; }
.teq-quantity-preview { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid #425877; border-radius: 8px; background: #060f20; }
.teq-quantity-preview output { display: block; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.teq-quantity-preview p { margin: 0 0 4px; color: #aebfd8; font-size: 14px; overflow-wrap: anywhere; }
.teq-quantity-preview [hidden] { display: none; }
.teq-quantity-total { color: #f5c16d; font-size: 14px; }
.teq-quantity-draft::selection { background: #efb65a; color: #171d29; }
.teq-quantity-keypad .teq-quantity-draft { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: #e7edf8; font: 650 27px/1.3 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.teq-quantity-draft:focus-visible { outline: 2px solid #efb65a; outline-offset: 3px; }
.teq-quantity-result { min-height: 20px; margin-top: 6px; color: #aebfd8; font-size: 14px; }
.teq-quantity-result.teq-quantity-error { color: #ffb6af; }
.teq-quantity-keys { display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; gap: 8px; }
.teq-quantity-integer-mode .teq-quantity-keys { grid-template-columns: repeat(3, 1fr); }
.teq-quantity-keys button { min-height: 50px; font-size: 22px; }
.teq-quantity-keys .teq-quantity-scale { background: #263146; color: #f5c16d; }
.teq-quantity-scale small { display: block; color: #c7d2e2; font-size: 10px; font-weight: 400; }
.teq-quantity-actions { display: flex; gap: 8px; margin-top: 10px; }
.teq-quantity-actions .teq-quantity-apply { flex: 1; background: #efb65a; color: #171d29; border-color: #efb65a; }
.teq-quantity-keypad .teq-quantity-standard { width: 100%; margin-top: 4px; border-color: transparent; background: transparent; color: #b9c9e1; font-size: 14px; }
.teq-quantity-standard-mode .teq-quantity-keys { display: none; }
.teq-quantity-keypad [hidden] { display: none !important; }
/* Live mode: the page's own summary and primary action, mirrored inside the keypad. */
.teq-quantity-live-context { margin-top: 10px; padding: 8px 12px; border: 1px solid #425877; border-radius: 8px; background: #101f39; font-size: 14px; color: #c4ccdc; font-variant-numeric: tabular-nums; }
.teq-quantity-summary strong { display: block; color: #e7edf8; font-size: 15px; }
.teq-quantity-summary span, .teq-quantity-summary small { display: block; }
.teq-quantity-summary small { color: #ffc393; }
.teq-quantity-flow { display: flex; gap: 8px; margin-top: 8px; }
.teq-quantity-flow .teq-quantity-next { flex: 1; white-space: nowrap; }
@media (max-width: 359px) { .teq-quantity-wide { display: none; } }
.teq-quantity-flow .teq-quantity-primary { flex: 1.35; background: #efb65a; color: #171d29; border-color: #efb65a; }
.teq-quantity-live .teq-quantity-actions .teq-quantity-apply { background: #172941; color: #e7edf8; border-color: #425877; }
@media (max-height: 760px) {
    .teq-quantity-live .teq-quantity-keys button { min-height: 48px; font-size: 20px; }
    .teq-quantity-live .teq-quantity-preview { margin: 6px 0 8px; padding: 6px 12px; }
}
@media (max-height: 500px) and (min-width: 500px) {
    .teq-quantity-keypad { width: min(100%, 720px); display: none; grid-template-columns: .9fr 1.1fr; gap: 4px 14px; }
    .teq-quantity-keypad[open] { display: grid; }
    .teq-quantity-body { display: contents; }
    .teq-quantity-controls { grid-column: 1; }
    .teq-quantity-keypad header { grid-column: 1; }
    .teq-quantity-preview { grid-column: 1; margin: 0; align-self: start; }
    .teq-quantity-keys { grid-column: 2; grid-row: 1 / span 4; }
    .teq-quantity-keys button { min-height: 48px; }
    .teq-quantity-actions { grid-column: 1; margin-top: 0; }
    .teq-quantity-live-context, .teq-quantity-flow { grid-column: 1; margin-top: 0; }
    .teq-quantity-keypad .teq-quantity-standard { grid-column: 1; }
    .teq-quantity-keypad.teq-quantity-standard-mode[open] { display: flex; width: min(100%, 440px); }
    .teq-quantity-standard-mode .teq-quantity-body { display: block; }
}
.teq-quantity-keypad.teq-quantity-standard-mode.teq-quantity-compact[open] {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 48px minmax(0, 1fr);
    width: min(100%, 720px); padding: 4px 12px; gap: 4px 12px; overflow: hidden;
}
.teq-quantity-compact.teq-quantity-standard-mode header { grid-column: 1 / -1; }
.teq-quantity-compact.teq-quantity-standard-mode .teq-quantity-body { grid-column: 1; display: block; }
.teq-quantity-compact.teq-quantity-standard-mode .teq-quantity-controls { grid-column: 2; align-self: start; }
.teq-quantity-compact.teq-quantity-standard-mode .teq-quantity-preview { margin: 0; padding: 0 6px; border: 0; }
.teq-quantity-compact.teq-quantity-standard-mode .teq-quantity-actions { margin: 0; }
.teq-quantity-compact.teq-quantity-standard-mode .teq-quantity-draft { min-height: 32px; font-size: 22px; }
.teq-quantity-compact.teq-quantity-standard-mode .teq-quantity-result { margin: 0; min-height: 16px; font-size: 12px; }
.teq-quantity-compact.teq-quantity-standard-mode .teq-quantity-preview p,
.teq-quantity-compact.teq-quantity-standard-mode .teq-quantity-total,
.teq-quantity-compact.teq-quantity-standard-mode .teq-quantity-live-context,
.teq-quantity-compact.teq-quantity-standard-mode .teq-quantity-flow,
.teq-quantity-compact.teq-quantity-standard-mode .teq-quantity-standard,
.teq-quantity-compact.teq-quantity-standard-mode [data-key="clear"],
.teq-quantity-compact.teq-quantity-standard-mode [data-key="sign"] { display: none; }