:root { --blue:#078ed3; --blue-dark:#006dbc; --aqua:#25c5ad; --ink:#080808; --muted:#777; --line:#e4e4e4; font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { min-width:320px; margin:0; color:var(--ink); background:#f3f3f3; }
button,input,textarea { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid #ffbd20; outline-offset:3px; }
.app { position:relative; width:min(100%, 1180px); min-height:100dvh; margin:auto; overflow:hidden; background:#fff; box-shadow:0 0 48px rgba(0,0,0,.12); }
.brand-header { position:relative; z-index:3; height:142px; display:flex; justify-content:center; align-items:center; background:#fff; border-radius:0 0 50% 50% / 0 0 22% 22%; box-shadow:0 14px 0 rgba(255,255,255,.96), 0 24px 0 rgba(8,142,211,.91), 0 33px 0 rgba(37,197,173,.92); }
.brand { color:#050505; display:inline-flex; align-items:center; gap:11px; text-decoration:none; font-size:31px; font-weight:400; letter-spacing:-1.8px; }
.brand b { font-weight:800; }.brand-mark { display:inline-flex; width:39px; height:44px; align-items:flex-end; gap:4px; transform:skewY(-24deg); }.brand-mark i { display:block; width:8px; border-radius:10px; background:#020202; }.brand-mark i:nth-child(1) { height:22px; background:var(--aqua); }.brand-mark i:nth-child(2) { height:35px; background:var(--blue); }.brand-mark i:nth-child(3) { height:44px; }
.menu-button { position:absolute; right:0; top:80px; z-index:4; width:82px; height:62px; border:0; border-radius:34px 0 0 0; background:var(--aqua); display:grid; place-content:center; gap:5px; }.menu-button span { display:block; width:24px; height:3px; background:#fff; border-radius:4px; }
.app-menu { position:absolute; z-index:8; top:139px; right:0; width:min(345px, 92vw); padding:14px; background:#fff; border:1px solid var(--line); box-shadow:0 13px 34px rgba(0,0,0,.18); }.app-menu button { display:block; width:100%; padding:13px 16px; border:0; background:#fff; color:#111; font-size:15px; text-align:left; }.app-menu button:hover { background:#edf8fc; color:var(--blue-dark); }.app-menu .install-item { margin-top:7px; border-top:1px solid var(--line); color:var(--blue); font-weight:700; }
.view { min-height:calc(100dvh - 142px); }.checkin-view { display:grid; place-items:center; padding:85px 28px 62px; color:#fff; text-align:center; background:linear-gradient(154deg, #0083c9 0%, #0a9fd1 48%, #31c8ae 100%); }.checkin-content { width:min(520px, 100%); }.checkin-content h1 { margin:0; color:#fff; font-size:clamp(29px, 4.6vw, 48px); font-weight:700; letter-spacing:-1.9px; line-height:1.08; }.card-symbol { position:relative; width:114px; height:86px; margin:41px auto 29px; border:5px solid #fff; border-radius:10px; }.card-symbol::before { content:""; position:absolute; left:0; right:0; top:20px; height:5px; background:#fff; }.card-symbol span { position:absolute; display:block; height:5px; background:#fff; border-radius:5px; }.card-symbol span:nth-child(1) { left:17px; bottom:18px; width:31px; }.card-symbol span:nth-child(2) { left:56px; bottom:18px; width:17px; }.card-symbol span:nth-child(3) { left:80px; bottom:18px; width:16px; }.forgot { margin:0 0 14px; font-size:15px; font-weight:700; }.checkin-content input { width:100%; height:47px; border:0; border-bottom:2px solid rgba(255,255,255,.84); background:transparent; color:#fff; text-align:center; font-size:17px; }.checkin-content input::placeholder { color:rgba(255,255,255,.83); }.checkin-content input:focus { outline:0; border-bottom-color:#fff; }.field-error { min-height:19px; margin:6px 0; color:#fff5bd; font-size:13px; font-weight:700; }.pill { min-width:132px; min-height:42px; padding:0 23px; border:0; border-radius:999px; font-size:13px; font-weight:800; letter-spacing:.2px; text-transform:uppercase; }.pill-white { margin-top:17px; background:#fff; color:var(--blue); }.pill-blue { background:#1267ed; color:#fff; }.pill-black { background:#050505; color:#fff; }.pill:hover { filter:brightness(.94); }.confirmation p { margin:16px auto 3px; max-width:355px; font-size:16px; line-height:1.45; }.check-circle { display:grid; width:72px; height:72px; place-items:center; margin:0 auto 25px; border:4px solid #fff; border-radius:50%; font-size:38px; font-weight:400; }
.admin-view { padding:74px clamp(25px, 7.5vw, 90px) 72px; background:#fff; }.view-inner { max-width:990px; margin:auto; }.view-inner.narrow { max-width:690px; }.view-inner h1 { margin:0 0 39px; font-size:clamp(31px,4vw,48px); letter-spacing:-2.3px; line-height:1; }.action-row { display:flex; align-items:center; gap:11px; margin-bottom:22px; }.text-action { margin-left:4px; padding:0; border:0; background:transparent; color:#145edf; font-size:12px; font-weight:800; text-transform:uppercase; }.search-field { display:flex; align-items:center; gap:12px; height:48px; padding:0 17px; border:1px solid #e1e1e1; border-radius:2px; color:#111; }.search-field span { font-size:28px; line-height:0; transform:rotate(-20deg); }.search-field input { width:100%; border:0; outline:0; font-size:15px; }.data-table { margin-top:26px; overflow:auto; border:1px solid var(--line); background:#fff; }.table-row { min-width:710px; display:grid; grid-template-columns:40px 1.35fr 1fr 1fr 1fr 74px; align-items:center; min-height:55px; border-bottom:1px solid var(--line); font-size:13px; }.table-row:last-child { border-bottom:0; }.table-row > * { padding:0 9px; }.table-row.head { min-height:45px; background:#f9f9f9; color:#555; font-size:11px; font-weight:800; text-transform:uppercase; }.tick { display:grid; width:19px; height:19px; place-items:center; margin:auto; border-radius:50%; background:#0b75db; color:#fff; font-size:12px; }.row-actions { display:flex; justify-content:center; gap:7px; }.icon-action { width:24px; height:24px; padding:0; border:0; background:transparent; color:#0d73da; font-size:17px; }.icon-action.delete { color:#111; }.patient-form label { display:block; margin:0 0 19px; color:#333; font-size:14px; font-weight:700; }.patient-form input:not([type="checkbox"]),textarea { display:block; width:100%; margin-top:8px; padding:10px 12px; border:1px solid #d8d8d8; border-radius:2px; color:#151515; background:#fff; font-size:16px; }.patient-form textarea { resize:vertical; }.check-label { display:flex !important; align-items:center; gap:8px; }.check-label input { width:18px; height:18px; accent-color:var(--blue); }.form-actions { display:flex; justify-content:flex-end; gap:11px; margin-top:30px; }.date-row { display:flex; gap:21px; margin-bottom:23px; }.date-row label { flex:1; color:#111; font-size:13px; font-weight:700; }.date-row input { display:block; width:100%; margin-top:8px; padding:10px 0; border:0; border-bottom:1px solid #bcbcbc; font-size:15px; }.compact-table { margin-bottom:27px; }.compact-table .table-row { min-width:640px; grid-template-columns:1.4fr 1fr 1.1fr 1.2fr; }.download { float:right; }.staff-inner { max-width:790px; }.staff-block { margin:0 0 47px; }.staff-block h2 { margin:0 0 16px; font-size:24px; letter-spacing:-1px; }.staff-list { margin-bottom:18px; border-top:1px solid var(--line); }.staff-person { display:flex; align-items:center; min-height:47px; border-bottom:1px solid var(--line); }.staff-person strong { flex:1; font-size:15px; }.sheet-heading { display:flex; align-items:start; justify-content:space-between; gap:22px; }.sheet-heading h1 { margin-bottom:8px; }.sheet-heading p { margin:0 0 24px; color:#686868; font-size:16px; }.download-round { display:grid; width:38px; height:38px; place-items:center; margin-top:-5px; border:0; border-radius:50%; background:#0a74dc; color:#fff; font-size:23px; font-weight:800; }.previous-date { margin:0 0 19px; }.sign-in-table { margin-top:0; }.sign-in-table .table-row { min-width:870px; grid-template-columns:38px 1.2fr .8fr 1fr 1fr 1fr 1fr 1.3fr; }.demo-note { margin:17px 0 0; color:#777; font-size:12px; }.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:650px) { .brand-header { height:121px; }.brand { font-size:25px; }.brand-mark { transform:scale(.82) skewY(-24deg); transform-origin:right bottom; }.menu-button { top:69px; width:64px; height:52px; }.view { min-height:calc(100dvh - 121px); }.checkin-view { padding-top:65px; }.admin-view { padding:60px 20px 50px; }.action-row { align-items:flex-start; flex-wrap:wrap; }.action-row .text-action { width:100%; margin:2px 0 0; text-align:left; }.date-row { gap:13px; }.pill { min-width:118px; padding:0 16px; }.form-actions { justify-content:stretch; }.form-actions .pill { flex:1; }.app-menu { top:120px; }.download { float:none; }.checkin-content h1 { letter-spacing:-1.2px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }
.pill-scan { min-width:174px; background:#fff; color:var(--blue); box-shadow:0 4px 0 rgba(0,0,0,.10); }
.checkin-content .pill-scan + .forgot { margin-top:26px; }
.scanner { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:22px; background:rgba(0,0,0,.68); }.scanner-panel { position:relative; width:min(480px,100%); padding:32px 24px 26px; border-radius:16px; background:#fff; color:#111; text-align:center; }.scanner-panel h2 { margin:0 0 8px; font-size:28px; letter-spacing:-1px; }.scanner-panel p { margin:0 0 20px; color:#666; font-size:14px; }.scanner-close { position:absolute; top:9px; right:12px; width:34px; height:34px; border:0; background:transparent; color:#111; font-size:28px; }.camera-frame { position:relative; overflow:hidden; aspect-ratio:1; background:#111; }.camera-frame::before { content:""; position:absolute; z-index:2; inset:10%; border:3px solid rgba(255,255,255,.88); border-radius:12px; pointer-events:none; }.camera-frame video { width:100%; height:100%; object-fit:cover; }.scan-line { position:absolute; z-index:3; left:12%; right:12%; top:50%; height:2px; background:#32e3bd; box-shadow:0 0 13px #32e3bd; }.scanner-panel .scanner-status { margin:16px 0 0; color:#1565cf; font-weight:700; }