:root {
  --paper: #fbf8ef;
  --panel: rgba(255, 255, 255, .88);
  --panel-solid: #fffef9;
  --panel-soft: #eff9f6;
  --ink: #171a1d;
  --muted: #68716f;
  --line: rgba(23, 26, 29, .2);
  --teal: #159a91;
  --teal-dark: #08736d;
  --teal-soft: #cdeee9;
  --ok: #11845f;
  --err: #c43b3b;
  --shadow: 0 18px 48px rgba(20, 54, 51, .12);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  font-family: "DM Sans", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(126, 228, 217, .34), transparent 34%),
    radial-gradient(circle at 92% 82%, rgba(21, 154, 145, .22), transparent 38%),
    linear-gradient(135deg, #fffdf6 0%, #edf9f5 50%, #dff2ec 100%);
  background-attachment: fixed;
}

body { overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
h1, h2, p { margin: 0; }

.kiosk {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 620px;
  padding: clamp(10px, 1.35vw, 22px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(8px, 1vw, 14px);
}

.kiosk-header,
.status-panel,
.action-panel,
.pin-card,
.qr-card,
.recent-card {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.kiosk-header {
  min-height: clamp(76px, 9vh, 98px);
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(180px, auto) minmax(230px, .75fr) auto;
  align-items: center;
  gap: clamp(10px, 1.5vw, 24px);
  padding: 10px clamp(12px, 1.5vw, 22px);
  border-radius: 22px 14px 20px 16px / 15px 22px 14px 20px;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand picture { display: block; flex: 0 0 auto; width: clamp(112px, 10vw, 164px); height: 64px; }
.logo { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.brand h1 { font: 700 clamp(1.2rem, 1.6vw, 1.65rem) "Cabin Sketch", cursive; letter-spacing: .04em; }
.brand p, .panel-title p, .clock-face span, label { color: var(--muted); }
.brand p { margin-top: 2px; font-size: .82rem; font-weight: 600; }

.clock-face { min-width: 180px; text-align: center; }
.clock-face strong { display: block; color: var(--teal-dark); font-size: clamp(2.15rem, 4.2vw, 4rem); line-height: .82; letter-spacing: -.055em; }
.clock-face span { display: block; margin-top: 7px; font-size: clamp(.72rem, 1vw, .92rem); font-weight: 700; text-transform: capitalize; }

.header-tools { display: grid; gap: 4px; min-width: 0; }
label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

select,
input {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  outline: none;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color .18s, box-shadow .18s;
}
select:focus, input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(21, 154, 145, .13); }
input::placeholder { color: #929b98; }

.ghost,
.primary {
  min-height: 46px;
  padding: 0 17px;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  font-weight: 800;
  transition: transform .15s, box-shadow .15s;
}
.ghost { border: 2px solid var(--ink); background: var(--panel-solid); color: var(--ink); box-shadow: 2px 3px 0 rgba(23, 26, 29, .14); }
.primary { border: 2px solid var(--ink); background: var(--teal); color: #fff; box-shadow: 3px 4px 0 rgba(23, 26, 29, .18); }
.ghost:hover, .primary:hover { transform: translate(-1px, -2px); }
.fullscreen-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.fullscreen-btn span { font-size: 1.2rem; }

.status-panel {
  min-height: clamp(68px, 8.5vh, 92px);
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px clamp(16px, 2vw, 28px);
  border-left: 5px solid var(--teal);
  border-radius: 16px;
}
.status-panel span { color: var(--teal-dark); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.status-panel strong { font-size: clamp(1.2rem, 2.25vw, 2.15rem); line-height: 1.08; }
.status-panel.ok { border-color: var(--ok); background: rgba(234, 251, 244, .94); }
.status-panel.ok strong { color: #05603e; }
.status-panel.error { border-color: var(--err); background: rgba(255, 241, 241, .94); }
.status-panel.error strong { color: var(--err); }

.action-panel { padding: clamp(7px, .8vw, 11px); border-radius: 16px; }
.actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(7px, .8vw, 11px); }
.action-btn {
  min-height: clamp(64px, 8.5vh, 88px);
  display: grid;
  place-content: center;
  gap: 2px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink);
  transition: transform .15s, border-color .15s, background .15s;
}
.action-btn:hover { transform: translateY(-2px); border-color: rgba(21, 154, 145, .6); }
.action-btn span { font-size: clamp(1rem, 1.55vw, 1.35rem); font-weight: 900; }
.action-btn small { color: var(--muted); font-size: clamp(.68rem, .9vw, .82rem); font-weight: 600; }
.action-btn.active { border: 2px solid var(--teal-dark); background: var(--teal-soft); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); color: var(--teal-dark); }

.kiosk-grid { min-height: 0; display: grid; grid-template-columns: minmax(420px, 1.35fr) minmax(300px, .65fr); gap: clamp(8px, 1vw, 14px); }
.pin-card, .qr-card, .recent-card { min-height: 0; padding: clamp(10px, 1vw, 15px); border-radius: 18px; }
.pin-card { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.panel-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: clamp(6px, .7vh, 10px); }
.panel-title h2 { font: 700 clamp(1.1rem, 1.45vw, 1.4rem) "Cabin Sketch", cursive; }
.panel-title p { font-size: .78rem; font-weight: 700; }

#pin-form { min-height: 0; display: grid; grid-template-rows: auto auto minmax(190px, 1fr) auto; gap: clamp(5px, .7vh, 9px); }
#qr-form { display: grid; gap: 9px; }
#pin-input { min-height: clamp(46px, 6vh, 62px); text-align: center; font-size: clamp(1.15rem, 2vw, 1.55rem); letter-spacing: .18em; }
.pin-dots { min-height: 10px; display: flex; justify-content: center; gap: 7px; }
.pin-dots span { width: 9px; height: 9px; border-radius: 50%; background: #d7dfdc; }
.pin-dots span.filled { background: var(--teal); }
.pinpad { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: clamp(5px, .65vw, 9px); }
.pinpad button {
  min-height: 0;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  color: var(--ink);
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 900;
  transition: background .12s, transform .12s;
}
.pinpad button:hover { background: var(--panel-soft); }
.pinpad button:active, .action-btn:active, .primary:active, .ghost:active { transform: translateY(1px); }
.submit-btn { min-height: clamp(48px, 6.2vh, 64px); font-size: clamp(1rem, 1.3vw, 1.22rem); }

.side-stack { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(8px, 1vw, 14px); }
.qr-card { align-self: start; }
.recent-card { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.recent-events { min-height: 0; overflow: auto; list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 7px; scrollbar-width: thin; scrollbar-color: var(--teal-soft) transparent; }
.recent-events li { padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-soft); color: var(--muted); font-size: .84rem; }
.recent-events strong { display: block; margin-bottom: 2px; color: var(--ink); }
.recent-events li.ok { border-color: rgba(17, 132, 95, .35); }
.recent-events li.error { border-color: rgba(196, 59, 59, .35); }

@media (min-width: 1500px) {
  .kiosk { padding: 24px; gap: 16px; }
  .kiosk-grid { grid-template-columns: minmax(620px, 1.45fr) minmax(380px, .55fr); gap: 16px; }
  .pin-card, .qr-card, .recent-card { padding: 18px; }
}

@media (max-width: 920px) and (min-width: 721px) {
  .kiosk-header { grid-template-columns: minmax(190px, 1fr) minmax(210px, auto); }
  .clock-face { order: 3; text-align: left; }
  .header-tools { order: 4; }
  .fullscreen-btn { grid-column: 2; grid-row: 1; justify-self: end; }
  .kiosk-grid { grid-template-columns: minmax(400px, 1.35fr) minmax(250px, .65fr); }
}

@media (max-width: 720px), (max-height: 680px) and (orientation: portrait) {
  body { overflow: auto; }
  .kiosk { height: auto; min-height: 100dvh; grid-template-rows: auto; }
  .kiosk-header { grid-template-columns: minmax(170px, 1fr) auto; }
  .clock-face { order: 3; text-align: left; }
  .header-tools { order: 4; }
  .fullscreen-btn { grid-column: 2; grid-row: 1; }
  .kiosk-grid { grid-template-columns: 1fr; }
  .pin-card { min-height: min(680px, 75dvh); }
  .side-stack { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(230px, auto); }
  .recent-card { min-height: 230px; }
}

@media (max-width: 640px) {
  .kiosk { padding: 8px; gap: 8px; }
  .kiosk-header { min-height: 72px; grid-template-columns: 58px 1fr auto; gap: 8px; padding: 8px 10px; }
  .brand picture { width: 54px; height: 54px; }
  .brand > div { display: none; }
  .clock-face { order: initial; min-width: 0; text-align: center; }
  .clock-face strong { font-size: 2.1rem; }
  .clock-face span { max-width: 150px; margin-inline: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-tools { grid-column: 1 / -1; grid-row: 2; }
  .fullscreen-btn { grid-column: 3; grid-row: 1; width: 46px; min-height: 42px; padding: 0; font-size: 0; }
  .fullscreen-btn span { font-size: 1.3rem; }
  .status-panel { min-height: 64px; padding-inline: 14px; }
  .status-panel strong { font-size: 1.08rem; }
  .actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .action-btn { min-height: 58px; padding-inline: 3px; }
  .action-btn span { font-size: .86rem; }
  .action-btn small { display: none; }
  .kiosk-grid { min-width: 0; }
  .pin-card { min-height: 500px; }
  #pin-form { grid-template-rows: auto auto minmax(270px, 1fr) auto; }
  .side-stack { grid-template-columns: 1fr; grid-template-rows: auto minmax(230px, auto); }
  .qr-card, .recent-card { min-height: auto; }
}

@media (max-height: 760px) and (min-width: 921px) {
  .kiosk { padding: 8px 12px; gap: 7px; }
  .kiosk-header { min-height: 68px; padding-block: 6px; }
  .brand picture { height: 52px; }
  .status-panel { min-height: 58px; padding-block: 7px; }
  .action-panel { padding: 6px; }
  .action-btn { min-height: 58px; }
  #pin-form { grid-template-rows: 42px 9px minmax(160px, 1fr) 46px; gap: 5px; }
  #pin-input { min-height: 42px; }
  .submit-btn { min-height: 46px; }
  .qr-card { padding-block: 9px; }
  #qr-form { grid-template-columns: 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}