*, *::before, *::after { box-sizing: border-box; }

.terminal-page {
    min-height: 100vh;
    margin: 0;
    padding: 1.25rem;
    display: grid;
    place-items: center;
    background: var(--surface-canvas);
    color: var(--content-primary);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.terminal-card {
    width: min(100%, 29rem);
    padding: clamp(1.5rem, 6vw, 2.5rem);
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: var(--surface-raised);
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 30%);
}

.terminal-card--center { text-align: center; }
.terminal-card--wide { width: min(100%, 42rem); }
.terminal-heading { margin: 0 0 .75rem; font-size: clamp(1.4rem, 5vw, 2rem); }
.terminal-copy { margin: 0 0 1.5rem; color: var(--content-secondary); line-height: 1.6; }
.terminal-icon { margin-bottom: 1rem; color: var(--action-primary); font-size: 3rem; }
.terminal-icon--success { color: var(--status-success); }
.terminal-icon--danger { color: var(--status-danger); }

.terminal-form { display: grid; gap: 1rem; text-align: left; }
.terminal-field { display: grid; gap: .5rem; }
.terminal-label { color: var(--content-secondary); font-size: .8125rem; font-weight: 700; }
.terminal-input {
    width: 100%;
    min-height: 3rem;
    padding: .75rem 1rem;
    border: 1px solid var(--terminal-border);
    border-radius: .625rem;
    background: var(--terminal-bg);
    color: var(--terminal-text);
    font: inherit;
}
.terminal-input--code { text-align: center; font-size: 1.35rem; font-weight: 800; letter-spacing: .3em; }
.terminal-input:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }
.terminal-password { position: relative; }
.terminal-password .terminal-input { padding-right: 3.25rem; }
.terminal-password-toggle {
    position: absolute;
    top: 50%;
    right: .5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    border: 0;
    background: transparent;
    color: var(--terminal-muted);
    transform: translateY(-50%);
    cursor: pointer;
}

.terminal-button, .terminal-link-button {
    min-height: 2.875rem;
    padding: .75rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 0;
    border-radius: .625rem;
    background: var(--terminal-primary);
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.terminal-button:hover, .terminal-link-button:hover { background: var(--terminal-primary-hover); }
.terminal-button:disabled { opacity: .6; cursor: wait; }
.terminal-button:focus-visible, .terminal-link:focus-visible, .terminal-link-button:focus-visible,
.terminal-password-toggle:focus-visible { outline: 3px solid #a78bfa; outline-offset: 3px; }
.terminal-link { color: #c4b5fd; }
.terminal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; }

.terminal-alert {
    margin: 0 0 1rem;
    padding: .875rem 1rem;
    border: 1px solid rgb(239 68 68 / 40%);
    border-radius: .625rem;
    background: rgb(239 68 68 / 10%);
    color: #fca5a5;
}
.terminal-alert:empty { display: none; }
.terminal-alert--success { border-color: rgb(16 185 129 / 40%); background: rgb(16 185 129 / 10%); color: #6ee7b7; }
.terminal-details { margin: 1.25rem 0; padding: 1rem; border-radius: .75rem; background: var(--terminal-bg); }
.terminal-code { display: block; padding: .75rem; overflow-wrap: anywhere; white-space: pre-wrap; user-select: all; }
.terminal-spinner[hidden], [hidden] { display: none !important; }

.checkin-badge { display: inline-flex; gap: .5rem; padding: .5rem 1rem; border: 1px solid currentcolor; border-radius: 999px; font-weight: 700; }
.checkin-badge--checkin { color: var(--terminal-success); }
.checkin-badge--checkout { color: #f59e0b; }
.checkin-qr { width: fit-content; margin: 1.25rem auto; padding: 1rem; border-radius: .75rem; background: #fff; }
.checkin-meta { color: var(--terminal-muted); line-height: 1.6; }
.checkin-instruction { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--terminal-border); color: var(--terminal-muted); }

.order-summary { margin-top: 1.5rem; text-align: left; }
.order-summary__header, .order-summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--terminal-border); }
.order-summary__item { min-width: 0; }
.order-summary__meta { color: var(--terminal-muted); font-size: .875rem; }
.order-summary__total { font-size: 1.125rem; font-weight: 800; }

@media (max-width: 34rem) {
    .terminal-actions { flex-direction: column; }
    .terminal-actions > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}