@if (open()) {
  <div class="fixed inset-0 z-[var(--z-modal)] flex flex-col justify-end">
    <div class="absolute inset-0 bg-black/50 animate-fade-in" (click)="open.set(false)"></div>

    <!-- 结果展示 -->
    <div class="relative flex items-center justify-end gap-2 bg-surface px-4 py-4">
      <span class="truncate font-mono text-xl tabular-nums text-ink">{{ display() || '—' }}</span>
    </div>

    <!-- 键盘 -->
    <div class="relative bg-surface-2 pb-[env(safe-area-inset-bottom)]">
      <div class="flex">
        <div class="grid flex-1 grid-cols-3 gap-px">
          @for (k of keys(); track k) {
            <button
              type="button"
              class="h-14 bg-surface text-lg text-ink transition-colors active:bg-surface-2"
              (click)="press(k)"
            >
              {{ k }}
            </button>
          }
          <button
            type="button"
            class="h-14 bg-surface text-lg text-ink transition-colors active:bg-surface-2"
            (click)="press('.')"
            [class.opacity-40]="!decimal()"
          >
            .
          </button>
          <button
            type="button"
            class="h-14 bg-surface text-lg text-ink transition-colors active:bg-surface-2"
            (click)="press('0')"
          >
            0
          </button>
          <button
            type="button"
            class="h-14 bg-surface text-lg text-muted transition-colors active:bg-surface-2"
            (click)="press('delete')"
            aria-label="删除"
          >
            <i class="fa-solid fa-delete-left" aria-hidden="true"></i>
          </button>
        </div>
        <button
          type="button"
          class="w-20 shrink-0 bg-primary text-base font-medium text-primary-content transition-opacity active:opacity-90"
          (click)="onConfirm()"
        >
          确认
        </button>
      </div>
    </div>
  </div>
}