:root {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #17212b;
  background: #eef3f7;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
main { width: min(100% - 32px, 440px); }
.card {
  background: white;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 12px 34px rgba(17, 47, 71, .12);
}
h1 { margin: 0 0 8px; color: #123b5d; font-weight: 700; }
p { color: #5c6874; font-size: .9rem; }
label { display: grid; gap: 6px; margin-top: 16px; font-weight: 650; font-size: .88rem; }
input, button, select, textarea {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  font: inherit;
}
input, select, textarea { border: 1px solid #b7c3cc; padding: 10px 12px; background: white; transition: border .15s; }
input:focus, select:focus, textarea:focus { border-color: #0095ff; outline: none; box-shadow: 0 0 0 3px rgba(0,149,255,.12); }
button { margin-top: 18px; border: 0; background: #1769aa; color: white; font-weight: 700; cursor: pointer; transition: .15s; }
button:hover { background: #155a94; }
button.secondary { background: #dfe7ed; color: #243746; }
button.secondary:hover { background: #d0d9e0; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.actions button { min-height: 64px; font-size: 1.15rem; }
button.entry { background: #087a49; }
button.entry:hover { background: #06663d; }
button.exit { background: #b13a32; }
button.exit:hover { background: #962e27; }
button.install { background: #6d3eb2; }
button.install:hover { background: #5b3499; }
button.install.ready { background: #0bb783; animation: pulse 2s infinite; }
button.install.ready:hover { background: #09a372; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(11,183,131,.4); } 70% { box-shadow: 0 0 0 10px rgba(11,183,131,0); } 100% { box-shadow: 0 0 0 0 rgba(11,183,131,0); } }
button:disabled { opacity: .55; cursor: default; }
button:disabled:hover { background: inherit; }
#camera { width: 100%; min-height: 220px; margin-top: 16px; border-radius: 12px; overflow: hidden; background: #101820; position: relative; }
.countdown-overlay {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-height: 220px; padding: 24px; text-align: center;
}
.countdown-success { color: #0bb783; font-weight: 700; font-size: 1.8rem; margin-bottom: 12px; }
.countdown-timer { color: #fff; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 2px; }
.countdown-label { color: #8a9aa8; font-size: .8rem; margin-top: 8px; }
.hidden { display: none; }
output { display: block; min-height: 48px; margin-top: 16px; padding: 14px; text-align: center; border-radius: 10px; }
output.success { color: #096b3e; background: #dff6e9; }
output.warning { color: #805c00; background: #fff3c4; }
output.error { color: #a32626; background: #fde6e6; }
.admin-link { display: block; margin-top: 18px; text-align: center; color: #1769aa; font-weight: 700; font-size: .9rem; }
.install-help {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  background: #f0e9fb;
  color: #4d2b7c;
  line-height: 1.45;
  font-size: .88rem;
}
.history-box { margin-top: 20px; border-top: 1px solid #dce5eb; padding-top: 12px; }
.history-box h3 { margin: 0 0 8px; font-size: .95rem; color: #123b5d; }
.history-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #eef3f7; font-size: .85rem;
}
.history-label {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-weight: 700; font-size: .75rem; white-space: nowrap;
}
.label-GIRIS { color: #096b3e; background: #dff6e9; }
.label-CIKIS { color: #a32626; background: #fde6e6; }
.label-GIRIS\/CIKIS { color: #805c00; background: #fff3c4; }
.label-ENTRY { color: #096b3e; background: #dff6e9; }
.label-EXIT { color: #a32626; background: #fde6e6; }
.label-RED { color: #fff; background: #b13a32; }
.history-time { color: #5c6874; }
.history-reason { color: #b13a32; font-size: .8rem; margin-left: auto; white-space: nowrap; }
.history-empty { color: #8a9aa8; font-size: .85rem; margin: 8px 0; }
.leave-box { margin-top: 20px; border-top: 1px solid #dce5eb; padding-top: 16px; }
.leave-box summary { cursor: pointer; color: #123b5d; font-weight: 750; font-size: .92rem; }
.leave-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.leave-item { padding: 10px 0; border-bottom: 1px solid #e4eaee; font-size: .9rem; }
.request-result { margin-top: 7px; }
.request-status { display: inline-block; padding: 4px 9px; border-radius: 999px; font-weight: 750; font-size: .82rem; }
.status-pending { color: #805c00; background: #fff3c4; }
.status-approved { color: #096b3e; background: #dff6e9; }
.status-rejected { color: #a32626; background: #fde6e6; }
.request-note { margin-top: 7px; padding: 8px 10px; border-radius: 8px; background: #f2f5f7; color: #334957; font-size: .85rem; }
#login-logout { margin-top: 8px; font-size: .82rem; min-height: 38px; background: transparent; color: #7e8299; border: 1px solid #d5dae0; }
#login-logout:hover { background: #f5f8fa; border-color: #b5bcc4; }
#status-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 0 8px; padding: 10px 14px;
  border-radius: 10px; background: #dfe7ed; font-size: .85rem;
}
#status-last-punch { font-weight: 700; color: #123b5d; }
#status-countdown { font-weight: 700; font-variant-numeric: tabular-nums; color: #1769aa; }