:root { --bg:#0b1114; --panel:rgba(18,23,26,.78); --soft:rgba(255,255,255,.07); --text:#f5f1e9; --muted:#d6b982; --line:rgba(214,185,130,.42); --ok:#4ed08b; --warn:#d6a45a; --bad:#d94b42; --accent:#d6a45a; --green:#063f35; }
    * { box-sizing:border-box; }
    html { overflow-x:hidden; }
    body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:"Segoe UI", Arial, sans-serif; }
    body::before { content:""; position:fixed; inset:0; background:linear-gradient(180deg, rgba(8,13,15,.9), rgba(8,13,15,.56) 46%, rgba(8,13,15,.2)), url("./ev-car-bg.jpg") bottom right / cover no-repeat; filter:saturate(.85) brightness(.78); z-index:-2; }
    body::after { content:""; position:fixed; inset:0; background:radial-gradient(circle at 50% 28%, rgba(255,255,255,.09), transparent 34%), linear-gradient(90deg, rgba(0,0,0,.58), transparent 26%, transparent 70%, rgba(0,0,0,.38)); z-index:-1; }
    main { min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; padding:28px 36px; }
    header { min-height:64px; display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
    .board-identity { min-width:0; padding-top:2px; text-shadow:0 4px 18px rgba(0,0,0,.66); }
    h1 { display:block; margin:0; font-size:24px; font-weight:800; color:#fffaf1; line-height:1.12; overflow-wrap:anywhere; }
    .sub { display:block; margin-top:6px; color:var(--muted); font-size:18px; font-weight:600; line-height:1.15; overflow-wrap:anywhere; }
    .header-meta { display:grid; justify-items:end; gap:8px; min-width:170px; }
    .language-picker { display:flex; gap:5px; padding:4px; border:1px solid rgba(214,185,130,.24); border-radius:999px; background:rgba(10,14,16,.48); backdrop-filter:blur(8px); }
    .language-button { min-width:42px; height:32px; border:1px solid transparent; border-radius:999px; background:transparent; color:rgba(245,241,233,.78); font-size:12px; font-weight:900; cursor:pointer; }
    .language-button.active { border-color:rgba(214,185,130,.55); background:var(--green); color:#fff; }
    .language-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
    .clock { font-size:34px; font-weight:500; text-align:right; color:#f5f1e9; text-shadow:0 4px 18px rgba(0,0,0,.6); }
    .price-chip { display:inline-grid; justify-items:end; gap:2px; padding:7px 10px; border:1px solid rgba(214,185,130,.22); border-radius:999px; background:rgba(10,14,16,.38); color:#f5f1e9; text-align:right; backdrop-filter:blur(8px); box-shadow:0 10px 28px rgba(0,0,0,.18); }
    .price-chip span { color:rgba(214,185,130,.86); font-size:10px; line-height:1; font-weight:900; text-transform:uppercase; }
    .price-chip strong { font-size:14px; line-height:1.1; font-weight:800; white-space:nowrap; }
    .board { display:grid; place-items:center; padding:0 0 52px; }
    .card { background:var(--panel); border:1px solid rgba(214,185,130,.28); border-radius:18px; padding:28px; box-shadow:0 26px 70px rgba(0,0,0,.35); backdrop-filter:blur(9px); }
    .status-bar { position:fixed; left:36px; right:36px; bottom:28px; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; padding:12px 16px; border-radius:16px; background:rgba(10,14,16,.58); border-color:rgba(214,185,130,.22); z-index:5; }
    .status { display:flex; align-items:center; gap:22px; }
    .dot { width:28px; height:28px; border-radius:999px; background:var(--muted); box-shadow:0 0 0 7px rgba(91,112,138,.14); }
    .dot.ok { background:var(--ok); box-shadow:0 0 0 8px rgba(21,131,79,.14); }
    .dot.warn { background:var(--warn); box-shadow:0 0 0 8px rgba(184,107,0,.14); }
    .dot.bad { background:var(--bad); box-shadow:0 0 0 8px rgba(200,52,45,.14); }
    .status-text { font-size:26px; font-weight:700; line-height:1; }
    .status-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
    .metric { background:rgba(255,255,255,.06); border:1px solid rgba(214,185,130,.18); border-radius:10px; padding:8px 10px; min-height:58px; }
    .label { color:rgba(214,185,130,.86); text-transform:uppercase; font-size:11px; font-weight:800; }
    .value { margin-top:4px; font-size:18px; font-weight:800; overflow-wrap:anywhere; color:#fff; }
    .qr { display:grid; place-items:center; gap:22px; text-align:center; }
    .qr img { width:360px; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px; }
    .qr h2 { font-family:Georgia, "Times New Roman", serif; font-size:72px; font-weight:400; margin:0; color:#fffaf1; line-height:1.05; text-shadow:0 8px 24px rgba(0,0,0,.62); }
    .qr p { color:#e3c78d; font-size:26px; margin:0; text-shadow:0 4px 14px rgba(0,0,0,.5); }
    .pay-button { border:1px solid var(--line); border-radius:14px; background:var(--green); color:#fff; font-size:32px; font-weight:600; padding:24px 30px; min-height:92px; width:100%; box-shadow:0 18px 42px rgba(0,0,0,.32); cursor:pointer; }
    .pay-button:active { transform:translateY(1px); }
    a.pay-button { display:block; text-decoration:none; text-align:center; }
    @media (max-width:600px) { #stripeQrImage { display:none; } }
    #accessCard { width:min(1120px,100%); min-height:560px; align-content:center; background:transparent; border:0; box-shadow:none; backdrop-filter:none; padding:0; }
    .choice-grid { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px; margin-top:36px; }
    .choice-grid.plate-only { grid-template-columns:minmax(0,520px); justify-content:center; }
    .choice-button { position:relative; border:1px solid rgba(214,185,130,.28); border-radius:16px; background:rgba(255,255,255,.08); color:#f5f1e9; font-size:32px; font-weight:400; padding:42px 86px 42px 150px; min-height:160px; width:100%; cursor:pointer; text-align:left; box-shadow:0 22px 50px rgba(0,0,0,.32); }
    .choice-button::after { content:"›"; position:absolute; right:34px; top:50%; transform:translateY(-50%); color:var(--accent); font-size:58px; line-height:1; }
    .choice-icon { position:absolute; left:48px; top:50%; transform:translateY(-50%); width:58px; height:70px; color:var(--accent); }
    .choice-button strong { display:block; font-size:40px; font-weight:300; margin-top:8px; }
    .choice-button.primary { background:linear-gradient(135deg, rgba(4,66,55,.92), rgba(4,42,36,.8)); color:#fff; border-color:var(--accent); }
    .choice-button:disabled { opacity:.42; cursor:not-allowed; filter:saturate(.55); }
    .choice-button:disabled::after { opacity:.25; }
    .access-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:min(900px,100%); margin-top:22px; }
    .access-step { background:rgba(255,255,255,.055); border:1px solid rgba(214,185,130,.18); border-radius:12px; padding:12px 14px; text-align:left; }
    .access-step span { display:block; color:rgba(214,185,130,.86); text-transform:uppercase; font-size:11px; font-weight:900; }
    .access-step strong { display:block; color:#fffaf1; font-size:18px; line-height:1.25; margin-top:4px; }
    .method-panel { width:min(900px,100%); display:grid; gap:18px; justify-items:center; }
    .room-bill-form { width:min(620px,100%); display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .room-bill-form label { display:grid; gap:8px; color:var(--muted); font-size:16px; text-align:left; }
    .room-bill-input { width:100%; min-height:68px; border:1px solid rgba(214,185,130,.42); border-radius:14px; background:rgba(255,255,255,.1); color:#fff; font-size:26px; padding:12px 18px; outline:none; }
    .room-bill-input::placeholder { color:rgba(245,241,233,.55); }
    .room-bill-mode { width:min(620px,100%); display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:6px; border:1px solid rgba(214,185,130,.3); border-radius:14px; background:rgba(0,0,0,.2); }
    .room-bill-mode button { min-height:52px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--muted); font-size:18px; font-weight:800; cursor:pointer; }
    .room-bill-mode button.active { border-color:rgba(214,185,130,.46); background:var(--green); color:#fff; }
    .back-button { position:fixed; left:30px; top:122px; z-index:20; border:1px solid rgba(214,185,130,.36); border-radius:999px; background:rgba(0,0,0,.38); color:#f5f1e9; font-size:18px; font-weight:700; padding:12px 18px; cursor:pointer; box-shadow:0 12px 30px rgba(0,0,0,.28); }
    .plate-search-wrap { position:relative; width:100%; }
    .plate-search { width:100%; height:64px; border:1px solid rgba(214,185,130,.42); border-radius:14px; background:rgba(255,255,255,.1); color:#fff; font-size:28px; padding:0 78px 0 22px; text-transform:uppercase; outline:none; }
    .plate-search::placeholder { color:rgba(245,241,233,.58); text-transform:none; }
    .plate-search-row { display:grid; grid-template-columns:1fr 150px; gap:12px; width:100%; }
    .search-button { height:64px; border:1px solid var(--line); border-radius:14px; background:var(--green); color:#fff; font-size:22px; font-weight:800; cursor:pointer; }
    .keyboard-toggle { position:absolute; right:8px; top:8px; width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(214,185,130,.36); border-radius:12px; background:rgba(0,0,0,.24); color:#f5f1e9; cursor:pointer; }
    .keyboard-toggle svg { width:28px; height:28px; }
    .screen-keyboard { width:100%; display:grid; gap:10px; margin-top:2px; }
    .keyboard-row { display:flex; justify-content:center; gap:8px; }
    .keyboard-key { min-width:58px; height:56px; border:1px solid rgba(214,185,130,.34); border-radius:12px; background:rgba(255,255,255,.085); color:#fff; font-size:22px; font-weight:900; cursor:pointer; box-shadow:0 14px 30px rgba(0,0,0,.22); }
    .keyboard-key.wide { min-width:116px; color:#f4ddb0; }
    .keyboard-key:active, .keyboard-toggle.active { background:rgba(6,63,53,.82); border-color:var(--accent); }
    .plate-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; width:100%; max-height:320px; overflow:auto; padding-right:4px; }
    .plate-button { border:1px solid rgba(214,185,130,.28); border-radius:14px; background:rgba(255,255,255,.08); color:#f5f1e9; padding:18px; font-size:30px; font-weight:700; text-align:left; cursor:pointer; }
    .plate-button.active { border-color:var(--accent); box-shadow:0 0 0 3px rgba(214,164,90,.18); background:rgba(6,63,53,.76); }
    .vehicle-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:100%; }
    .vehicle-plate { font-size:42px; font-weight:800; margin:0; color:#fff; }
    .vehicle-note { color:var(--muted); font-size:24px; margin:0 0 8px; }
    .pin-display { display:flex; justify-content:center; gap:12px; min-height:34px; }
    .pin-dot { width:18px; height:18px; border-radius:50%; border:1px solid var(--accent); background:transparent; }
    .pin-dot.filled { background:var(--accent); }
    .code-input { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
    .keypad { display:grid; grid-template-columns:repeat(3,82px); gap:10px; justify-content:center; }
    .keypad button { width:82px; height:64px; border:1px solid rgba(214,185,130,.36); border-radius:16px; background:rgba(255,255,255,.09); color:#fff; font-size:28px; font-weight:800; cursor:pointer; }
    .keypad .wide { grid-column:span 2; width:auto; }
    .start-button { border:1px solid var(--line); border-radius:14px; background:var(--green); color:#fff; font-size:30px; font-weight:800; padding:18px 24px; min-height:72px; width:100%; cursor:pointer; }
    .stop-button { border:1px solid rgba(204,72,56,.75); border-radius:12px; background:rgba(204,72,56,.92); color:#fff; font-size:20px; font-weight:900; padding:14px 18px; cursor:pointer; white-space:nowrap; }
    .mobilepay-stop { position:fixed; left:44px; bottom:190px; z-index:18; display:grid; grid-template-columns:220px minmax(190px,280px); gap:20px; align-items:center; padding:16px 18px; border:1px solid rgba(214,185,130,.36); border-radius:18px; background:rgba(10,14,16,.78); color:#f4ddb0; font-size:20px; font-weight:900; line-height:1.25; box-shadow:0 22px 52px rgba(0,0,0,.4); backdrop-filter:blur(10px); }
    .mobilepay-stop img { width:220px !important; height:220px !important; min-width:220px; min-height:220px; background:#fff; border:1px solid rgba(214,185,130,.46); border-radius:14px; padding:10px; box-shadow:0 16px 36px rgba(0,0,0,.28); }
    .admin-button { border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text); font-size:18px; font-weight:900; padding:12px 16px; cursor:pointer; }
    .start-button:disabled, .pay-button:disabled, .stop-button:disabled { opacity:.55; cursor:not-allowed; }
    dialog { border:1px solid var(--line); border-radius:12px; padding:0; width:min(520px,calc(100vw - 32px)); color:var(--text); box-shadow:0 24px 60px rgba(20,48,80,.24); }
    dialog::backdrop { background:rgba(11,35,65,.42); }
    .dialog-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); }
    .dialog-head h2 { margin:0; font-size:24px; }
    .dialog-body { display:grid; gap:14px; padding:20px; }
    .dialog-body label { display:grid; gap:6px; font-weight:800; color:var(--muted); text-transform:uppercase; font-size:12px; }
    .dialog-body input { height:48px; border:1px solid var(--line); border-radius:8px; padding:0 12px; font-size:18px; color:var(--text); }
    .dialog-actions { display:flex; justify-content:flex-end; gap:10px; padding:16px 20px; border-top:1px solid var(--line); }
    .dialog-actions button { border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--text); font-weight:900; padding:12px 16px; cursor:pointer; }
    .dialog-actions .primary { border-color:var(--accent); background:var(--accent); color:#fff; }
    #stopChargeDialog { background:rgba(10,14,16,.94); color:#fff; border-color:rgba(214,185,130,.32); }
    #stopChargeDialog .dialog-head, #stopChargeDialog .dialog-actions { border-color:rgba(214,185,130,.22); }
    #stopChargeDialog .dialog-actions button { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(214,185,130,.32); }
    #stopChargeDialog .dialog-actions .primary { background:rgba(204,72,56,.92); border-color:rgba(204,72,56,.75); }
    #stopChargePinDisplay { margin:8px 0 4px; }
    #stopChargeKeypad { margin:4px auto 0; }
    .terms-link { color:var(--accent); background:transparent; border:0; padding:0; margin:0; box-shadow:none; appearance:none; -webkit-appearance:none; font:inherit; font-size:20px; font-weight:700; text-decoration:none; cursor:pointer; }
    .terms-link:focus-visible { outline:1px solid rgba(214,185,130,.55); outline-offset:4px; border-radius:4px; }
    #termsDialog { width:min(860px,calc(100vw - 28px)); max-height:86vh; background:rgba(10,14,16,.96); color:#f5f1e9; border-color:rgba(214,185,130,.36); }
    #termsDialog .dialog-head, #termsDialog .dialog-actions { border-color:rgba(214,185,130,.22); }
    #termsDialog .dialog-body { max-height:64vh; overflow:auto; display:block; line-height:1.55; color:#ead7ad; }
    #termsDialog h3 { margin:18px 0 6px; color:#fffaf1; font-size:20px; }
    #termsDialog p { margin:0 0 12px; }
    #termsDialog .dialog-actions button, #termsDialog .dialog-head button { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(214,185,130,.32); }
    #plateDetailPanel { width:min(980px,100%); grid-template-columns:minmax(0,1fr) 300px; column-gap:28px; align-items:start; }
    #plateDetailPanel .back-button { grid-column:auto; }
    #plateDetailPanel h2 { grid-column:1; margin-top:0; }
    #selectedPlateText, #selectedVehicleText, #vehicleDetails { grid-column:1; }
    #pinDisplay { grid-column:2; grid-row:2; align-self:end; margin-top:26px; }
    #doorCodeInput { grid-column:2; }
    #pinKeypad { grid-column:2; grid-row:3 / span 4; }
    #startByPlateBtn { grid-column:2; grid-row:7; }
    #plateDetailText { grid-column:2; grid-row:8; font-size:18px; }
    .hidden { display:none !important; }
    .small { color:var(--muted); font-size:16px; margin-top:10px; }
    @media (max-width:900px) { main { padding:18px; overflow-x:hidden; } .board { padding-bottom:18px; } .status-bar { left:18px; right:18px; bottom:18px; grid-template-columns:1fr; } .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .mobilepay-stop { left:22px; right:22px; bottom:210px; grid-template-columns:180px 1fr; } .mobilepay-stop img { width:180px !important; height:180px !important; min-width:180px; min-height:180px; } .choice-grid { grid-template-columns:1fr; gap:16px; } .choice-button { padding:28px 64px 28px 108px; min-height:136px; } .choice-icon { left:34px; width:46px; height:58px; } .choice-button strong { font-size:38px; } .access-steps { grid-template-columns:1fr; margin-top:10px; } .qr h2 { font-size:44px; white-space:nowrap; } .room-bill-form { grid-template-columns:1fr; } #plateDetailPanel { grid-template-columns:1fr; } #plateDetailPanel > * { grid-column:1 !important; grid-row:auto !important; } }
    @media (max-width:480px) { main { padding:16px 18px; } header { min-height:52px; gap:12px; } h1 { font-size:18px; } .sub { font-size:14px; margin-top:3px; } .header-meta { min-width:132px; gap:6px; } .language-button { min-width:36px; height:30px; } .clock { font-size:28px; flex:0 0 auto; } .price-chip { padding:6px 9px; } .price-chip strong { font-size:13px; } .back-button { left:16px; top:86px; font-size:16px; padding:10px 15px; } #accessCard, .method-panel { width:100%; } .choice-button { padding:24px 48px 24px 86px; min-height:132px; font-size:28px; } .choice-button::after { right:22px; font-size:48px; } .choice-icon { left:24px; width:42px; height:52px; } .choice-button strong { font-size:34px; } .access-step { padding:10px 12px; } .access-step strong { font-size:16px; } .terms-link { font-size:17px; } .qr p { font-size:22px; } .plate-search-row { grid-template-columns:1fr; } .search-button { width:100%; } .keyboard-row { gap:5px; } .keyboard-key { min-width:32px; height:44px; font-size:17px; border-radius:10px; } .keyboard-key.wide { min-width:74px; } }
  
/* Responsive adaptation of the original ETA Pay guest view. */
    .status-bar{position:relative;left:auto;right:auto;bottom:auto;grid-template-columns:auto 1fr;margin-top:18px}
    .status-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.status-text{font-size:20px}.board{padding-bottom:12px}
    .session-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;text-align:left}
    #sessionPanel{width:min(720px,100%)}#sessionPanel .metric{padding:18px}#sessionPanel .value{font-size:26px}
    .guest-message{color:var(--muted);margin:12px 0;max-width:760px;text-align:center}.status-bar .small{grid-column:1/-1}
    #openCheckoutBtn{width:100%}#sessionStopBtn{width:100%}.terms-link{margin-top:18px}
    .receipt-options{margin:22px 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.18);text-align:left;max-width:620px;width:100%;box-sizing:border-box}
    .receipt-toggle{display:flex;align-items:center;gap:12px;font-size:20px;line-height:1.4;cursor:pointer}.receipt-toggle input{width:24px;height:24px;flex:none;accent-color:#6ce3bc}
    .receipt-fields{display:grid;gap:14px;margin-top:18px}.receipt-fields label{display:grid;gap:6px;font-size:16px;color:var(--muted)}
    .receipt-fields input{width:100%;box-sizing:border-box;min-height:48px;padding:12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--text);font-size:18px}
    .receipt-options .receipt-help{font-size:14px;line-height:1.5;margin:12px 0 0;color:var(--muted)}
    #plateDetailPanel .back-button{grid-column:1/-1}#doorCodeInput{position:static;opacity:1;pointer-events:auto;width:100%;height:54px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.08);color:var(--text);font-size:25px;padding:10px 16px;text-align:center}
    @media(max-width:900px){.status-bar{grid-template-columns:1fr}.board{padding-bottom:8px}#accessCard{min-height:0;padding-top:30px}.qr h2{white-space:normal}}
    @media(max-width:480px){.choice-button strong{font-size:32px}.status-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.status-grid .value{font-size:16px}.status-grid .label{font-size:10px}.session-metrics{grid-template-columns:1fr 1fr}#sessionPanel .value{font-size:22px}.qr p{font-size:19px}#plateDetailPanel .keypad{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.keypad button{width:100%}.pin-display{margin:8px 0}.access-steps{display:none}.keyboard-row{gap:3px;width:100%}.keyboard-key{min-width:0;flex:1;font-size:15px;height:42px;padding:2px}.keyboard-key.wide{min-width:80px}}