@font-face {
    font-family: 'Manrope';
    src: url('./fonts/manrope.woff2') format('woff2');
    font-weight: 200 800;
    font-display: swap;
}

* { box-sizing: border-box; margin: 0; }

body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #12271b;
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header { display: flex; justify-content: space-between; align-items: baseline; padding: 1.5rem 2.5rem; }
header h1 { font-size: 1.6rem; }
#clock { font-size: 2rem; font-variant-numeric: tabular-nums; color: #d7e64a; }

main { flex: 1; display: flex; gap: 3rem; padding: 0 2.5rem 2.5rem; align-items: stretch; }

.qr-panel {
    background: #fff; border-radius: 18px; padding: 2rem; text-align: center;
    display: flex; flex-direction: column; justify-content: center; gap: 1rem; flex: 0 0 460px;
}
.qr-panel img { width: 100%; max-width: 300px; margin: 0 auto; }
.qr-panel p { color: #1d2b23; font-size: 1.25rem; font-weight: 600; }

.divider { display: flex; align-items: center; gap: 0.75rem; color: #6b7a70; font-size: 0.95rem; }
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid #d8e0da; }

#card-display {
    font-size: 1.5rem; letter-spacing: 0.3rem; font-variant-numeric: tabular-nums;
    background: #12271b; color: #d7e64a; border-radius: 8px; min-height: 2.5rem;
    display: flex; align-items: center; justify-content: center;
}

.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.keypad button {
    font-size: 1.25rem; padding: 0.6rem 0; border-radius: 8px; border: 1px solid #c9d4cc;
    background: #f2f6f3; color: #1d2b23; cursor: pointer; font-weight: 600;
}
.keypad button:active { background: #d7e64a; }
.keypad .key-ok { background: #2f7a4d; color: #fff; border-color: #2f7a4d; grid-column: span 4; font-size: 1.05rem; }

#card-result {
    position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
    flex-direction: column; gap: 1rem; text-align: center; padding: 2rem;
    font-size: 2.2rem; font-weight: 700; z-index: 10;
}
#card-result.ok { display: flex; background: #2f7a4d; color: #fff; }
#card-result.ko { display: flex; background: #a03328; color: #fff; }
#card-result small { font-size: 1.25rem; font-weight: 400; max-width: 40rem; }

.schedule { flex: 1; overflow: hidden; }
.schedule h2 { margin-bottom: 1rem; color: #d7e64a; }
.schedule table { width: 100%; border-collapse: collapse; font-size: 1.1rem; }
.schedule td { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.schedule .done { opacity: 0.45; }
.badge { padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.85rem; background: rgba(215, 230, 74, 0.2); color: #d7e64a; }

#setup {
    display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 1rem; padding: 2rem;
}
#setup h1 { font-size: 1.8rem; }
#setup p { color: #9fb0a4; max-width: 34rem; font-size: 1.1rem; }