:root {
  --brand: #0795f6;
  --brand-dark: #052d58;
  --brand-deep: #020a1d;
  --brand-soft: #e8f6ff;
  --brand-border: #9fd8fb;
  --brand-contrast: #fff;
  --ink: #071426;
  --muted: #5f7085;
  --line: #dce6ef;
  --bg: #eef4f9;
  --paper: #fff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, Tahoma, Arial, sans-serif; color: var(--ink); background: var(--bg); font-size: 17px; }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.kiosk-app { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 8%, var(--brand-soft), transparent 34%), var(--bg); }
.kiosk-header { height: 104px; padding: 0 clamp(24px, 4vw, 72px); display: flex; align-items: center; justify-content: space-between; background: var(--brand-deep); border-bottom: 1px solid #ffffff17; box-shadow: 0 10px 35px #020a1d24; }
.brand { display: flex; align-items: center; gap: 15px; color: #fff; }
.brand img, .brand #brandMark { width: 62px; height: 62px; object-fit: cover; border-radius: 15px; border: 1px solid #ffffff24; }
.brand img[hidden], .brand #brandMark[hidden] { display: none !important; }
.brand #brandMark { display: grid; place-items: center; background: linear-gradient(145deg, var(--brand), #16d5ef); color: var(--brand-contrast); font-size: 27px; font-weight: 900; }
.brand div { display: flex; flex-direction: column; gap: 5px; }
.brand strong { font-size: 21px; letter-spacing: .02em; }
.brand small { color: #b8d7ed; font-size: 13px; }
.language-toggle { border: 1px solid #ffffff31; background: #ffffff12; color: #fff; min-width: 112px; height: 52px; padding: 0 20px; border-radius: 14px; font-weight: 800; cursor: pointer; }
.language-toggle:active { transform: scale(.98); }
.kiosk-screen { flex: 1; display: grid; place-items: center; padding: clamp(34px, 5vh, 68px) clamp(22px, 4vw, 70px); transition: padding-bottom .2s ease; }
body.keyboard-open .kiosk-screen { padding-bottom: 390px; }
.welcome-panel { width: min(1220px, 100%); display: grid; gap: clamp(30px, 4vh, 48px); align-content: center; }
.welcome-copy { text-align: center; max-width: 1000px; margin: 0 auto; }
.welcome-copy .eyebrow { margin: 0 0 9px; color: var(--brand-dark); font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.welcome-copy h1 { margin: 0; font-size: clamp(40px, 5vw, 70px); line-height: 1.14; letter-spacing: -.025em; }
.welcome-copy h1 span { color: var(--brand); }
.welcome-copy p:last-child { color: var(--muted); font-size: 20px; margin: 16px 0 0; }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.service-button { min-height: 205px; border: 1px solid transparent; border-radius: 25px; background: var(--brand-deep); color: #fff; padding: 27px; text-align: start; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; box-shadow: 0 20px 45px #020a1d20; font-size: 18px; font-weight: 900; line-height: 1.35; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.service-button:first-child { background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 68%, #083cff)); color: var(--brand-contrast); }
.service-button.secondary { background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: 0 16px 36px #0a244514; }
.service-button:hover, .service-button:focus-visible { transform: translateY(-4px); border-color: var(--brand-border); box-shadow: 0 24px 55px #061a3630; outline: none; }
.service-button:active { transform: translateY(-1px) scale(.99); }
.service-icon { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; background: #ffffff18; font-size: 34px; line-height: 1; }
.service-button.secondary .service-icon { color: var(--brand); background: var(--brand-soft); }
.flow-card { width: min(1080px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: clamp(26px, 3vw, 42px); box-shadow: 0 30px 85px #071c3418; }
.flow-head { display: flex; align-items: flex-start; gap: 17px; margin-bottom: 30px; }
.flow-head h1 { margin: 2px 0 7px; font-size: 31px; }
.flow-head p { margin: 0; color: var(--muted); font-size: 17px; }
.back-button { width: 49px; height: 49px; flex: none; border: 1px solid var(--line); border-radius: 13px; background: var(--brand-soft); color: var(--brand); cursor: pointer; font-size: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 9px; font-size: 15px; font-weight: 800; }
.field input, .field select { height: 59px; border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; background: #f9fbfd; outline: none; color: var(--ink); font-size: 17px; }
.field input:focus, .field select:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 15%, transparent); }
.field select:disabled { opacity: .6; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 12px; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 25px; margin-top: 6px; }
.primary-action, .ghost-action { min-height: 55px; border: 0; border-radius: 13px; padding: 0 27px; font-weight: 900; cursor: pointer; }
.primary-action { background: var(--brand); color: var(--brand-contrast); box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 28%, transparent); }
.ghost-action { background: #eef3f7; color: #40536a; }
.lookup-form { display: grid; gap: 20px; max-width: 620px; margin: auto; }
.success-state { text-align: center; padding: 40px 20px; display: flex; align-items: center; flex-direction: column; gap: 14px; }
.success-mark { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 37px; }
.success-state h2 { margin: 8px 0 0; font-size: 29px; }
.success-state p { color: var(--muted); margin: 0; }
.visit-code { background: #f3f8fc; border: 1px dashed var(--brand-border); border-radius: 14px; padding: 17px 34px; display: flex; flex-direction: column; gap: 6px; margin: 9px 0 14px; }
.visit-code small { color: var(--muted); }
.visit-code strong { font-size: 26px; letter-spacing: .11em; }
.qr-panel { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.qr-image { width: min(340px, 80vw); aspect-ratio: 1; border: 12px solid #fff; box-shadow: 0 12px 38px #0c284523; }
.qr-panel code { max-width: 100%; padding: 12px; background: #f1f5f8; border-radius: 9px; overflow-wrap: anywhere; }
.toast { position: fixed; z-index: 260; inset-inline-end: 26px; bottom: 26px; background: var(--brand-deep); color: #fff; padding: 16px 20px; border-radius: 13px; box-shadow: 0 15px 44px #020a1d42; font-size: 15px; }
.toast.error { background: #a54436; }
.virtual-keyboard { position: fixed; z-index: 180; inset-inline: 0; bottom: 0; padding: 12px clamp(10px, 3vw, 42px) 18px; background: color-mix(in srgb, var(--brand-deep) 96%, transparent); border-top: 1px solid #ffffff22; box-shadow: 0 -18px 55px #020a1d45; backdrop-filter: blur(18px); }
.virtual-keyboard[hidden] { display: none; }
.keyboard-row { max-width: 1120px; margin: 0 auto 7px; display: flex; justify-content: center; gap: 7px; }
.keyboard-row:last-child { margin-bottom: 0; }
.keyboard-key { flex: 1 1 0; max-width: 92px; min-width: 45px; height: 52px; border: 1px solid #ffffff23; border-radius: 10px; background: #ffffffed; color: #071426; font-size: 20px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 #8da1b5; }
.keyboard-key:active { transform: translateY(2px); box-shadow: 0 1px 0 #8da1b5; }
.keyboard-key.special { background: #cbd8e5; font-size: 16px; }
.keyboard-key.wide { flex-grow: 3; max-width: 300px; }
.screensaver { position: fixed; inset: 0; z-index: 300; overflow: hidden; background: var(--brand-deep); color: #fff; }
.screensaver[hidden] { display: none; }
.screensaver #screensaverStage { position: absolute; inset: 0; width: 100vw; height: 100vh; overflow: hidden; background: var(--brand-deep); }
.screensaver #screensaverStage > img, .screensaver #screensaverStage > video { position: absolute; inset: 0; display: block; width: 100vw !important; height: 100vh !important; max-width: none; max-height: none; object-fit: cover !important; object-position: center center; }
.screensaver p { position: absolute; z-index: 2; bottom: max(35px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); margin: 0; background: #020a1db5; border: 1px solid #ffffff25; border-radius: 30px; padding: 14px 25px; white-space: nowrap; font-size: 16px; backdrop-filter: blur(8px); }
.screensaver-brand { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle, var(--brand-dark), var(--brand-deep) 68%); font-size: clamp(52px, 10vw, 130px); font-weight: 900; letter-spacing: .05em; }
.loader { width: 52px; height: 52px; border: 5px solid #d8e4ed; border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
.fatal-error { padding: 20px; background: #fff0ed; color: #9f4436; border-radius: 11px; }
@keyframes spin { to { transform: rotate(360deg); } }
html[dir=rtl] .back-button { transform: scaleX(-1); }
@media (max-width: 1050px) { .service-grid { grid-template-columns: 1fr 1fr; } .service-button { min-height: 160px; } }
@media (max-width: 760px) {
  html, body { font-size: 16px; }
  .kiosk-header { height: 82px; padding: 0 17px; }
  .brand img, .brand #brandMark { width: 48px; height: 48px; }
  .brand strong { font-size: 17px; }
  .brand small { font-size: 11px; }
  .language-toggle { min-width: auto; height: 45px; padding: 0 13px; }
  .kiosk-screen { padding: 28px 15px; }
  .welcome-panel { gap: 27px; }
  .welcome-copy h1 { font-size: 39px; }
  .welcome-copy p:last-child { font-size: 17px; }
  .service-grid { gap: 12px; }
  .service-button { min-height: 132px; padding: 18px; font-size: 16px; border-radius: 19px; }
  .service-icon { width: 45px; height: 45px; font-size: 27px; border-radius: 13px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-actions { grid-column: auto; }
  .flow-card { padding: 22px; border-radius: 21px; }
  .flow-head h1 { font-size: 25px; }
  body.keyboard-open .kiosk-screen { padding-bottom: 340px; }
  .keyboard-key { height: 44px; min-width: 28px; font-size: 16px; border-radius: 8px; }
  .keyboard-row { gap: 4px; margin-bottom: 5px; }
  .virtual-keyboard { padding: 8px 5px 12px; }
}
@media (max-width: 460px) { .service-grid { grid-template-columns: 1fr; } .service-button { min-height: 112px; } .brand small { display: none; } .welcome-copy h1 { font-size: 34px; } }