:root{color-scheme:dark;--bg:#0d1015;--surface:#161b23;--line:#2b323e;--muted:#9fa9b7;--text:#eef2f6;--accent:#d8bd82;font-family:"Noto Sans Thai",system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 10%,#202630 0,transparent 55%),var(--bg);color:var(--text);min-height:100vh}header{padding:28px 5vw;display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid var(--line)}.brand{font-size:23px;font-weight:800;letter-spacing:-1px;color:var(--accent);text-decoration:none}.brand span{color:var(--text)}.brand small{display:block;font-size:9px;font-weight:600;letter-spacing:3px;color:var(--muted);margin-top:5px}main{max-width:1100px;margin:0 auto;padding:60px 24px 80px}.login-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;min-height:62vh}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--accent);font-weight:700}h1{font-size:clamp(30px,4vw,49px);line-height:1.25;margin:18px 0}h2{font-size:22px;margin:0 0 22px}p{color:var(--muted);line-height:1.8}.panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 24px 80px #0003}.narrow{max-width:530px;margin:0 auto}.features{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.tag{font-size:12px;border:1px solid var(--line);border-radius:50px;padding:8px 12px;color:var(--muted)}label{display:block;margin:17px 0 7px;font-size:13px;color:#d4dbe5}input{width:100%;background:#0e1218;border:1px solid #394250;border-radius:10px;padding:13px 14px;font:inherit;color:var(--text);min-height:47px}input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{background:var(--accent);border:1px solid transparent;border-radius:10px;color:#16191f;padding:12px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;min-height:44px}button:hover{filter:brightness(1.1)}button:disabled{opacity:.5;cursor:wait}.full{width:100%;margin-top:24px}.secondary{background:transparent;border-color:var(--line);color:var(--text)}.quiet{font-size:12px;color:var(--muted)}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.spread{justify-content:space-between}.top{margin-bottom:30px}.top h1{font-size:32px;margin:12px 0}.account-list{display:grid;gap:12px;margin-top:22px}.account{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:20px;border:1px solid var(--line);border-radius:14px}.account p{margin:5px 0;font-size:13px}.pill{display:inline-block;border-radius:50px;padding:5px 10px;background:#d8bd8215;color:var(--accent);font-size:11px}.pill.staff{background:#7da9cf19;color:#a9cceb}.account-name{font-weight:650}.actions{display:flex;gap:8px;flex-wrap:wrap}.notice{border-left:3px solid var(--accent);padding:10px 16px;background:#d8bd820a;font-size:13px;margin:22px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.hidden{display:none!important}#message{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:min(90vw,650px);background:#293443;border:1px solid #536273;border-radius:12px;padding:14px 20px;z-index:50;display:none}#message.visible{display:block}dialog{width:min(520px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;color:var(--text)}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}dialog .row{margin-top:24px}.secret{font-family:ui-monospace,monospace;overflow-wrap:anywhere;background:#090d13;border:1px solid var(--line);padding:16px;border-radius:10px;user-select:all}.qr{display:block;width:220px;height:220px;max-width:100%;background:white;margin:20px auto;padding:8px;border-radius:12px}footer{border-top:1px solid var(--line);padding:23px 5vw;font-size:10px;letter-spacing:1.4px;color:var(--muted);display:flex;justify-content:space-between;gap:20px}footer span{letter-spacing:0}@media(max-width:720px){.login-layout{grid-template-columns:1fr;gap:28px;min-height:auto}main{padding:35px 18px 60px}.panel{padding:24px}.account{grid-template-columns:1fr}.grid{grid-template-columns:1fr}header{padding:20px}.top h1{font-size:27px}footer{flex-direction:column}.features{margin-top:16px}}

/* KDRental coastal palette — flat background, no photo or gradient backdrop. */
:root{color-scheme:dark;--bg:#10282e;--surface:#18363c;--line:#31565a;--muted:#b8cacc;--text:#f1f4ed;--accent:#e8d8b7;--sea:#5faead;--deep-sea:#174e55}
body{background:var(--bg);color:var(--text)}
header{border-bottom-color:var(--line)}
.brand{color:var(--accent)}
.brand span{color:var(--text)}
.brand small,footer{color:var(--muted)}
p,.quiet,.tag,.help{color:var(--muted)}
.panel,.metric,.rental-card,dialog{background:rgba(24,54,60,.92);border-color:var(--line);box-shadow:0 18px 42px rgba(0,0,0,.18),inset 0 1px 0 rgba(240,250,244,.08)}
.account{border-color:var(--line);background:rgba(255,255,255,.025)}
label{color:#d7e4df}
input,.form-section input,.form-section select,.form-section textarea,select,textarea{background:#19363b;border-color:#36565c;color:var(--text)}
input::placeholder,textarea::placeholder{color:#a9bec0;opacity:1}
input:focus-visible,button:focus-visible,a:focus-visible{outline-color:var(--sea)}
button{background:var(--accent);color:#173b43}
button:hover{filter:brightness(1.06);box-shadow:0 5px 18px rgba(95,174,173,.18)}
.secondary{background:rgba(95,174,173,.12);border-color:#426a6d;color:#e4efea}
.secondary:hover{background:rgba(95,174,173,.2)}
.tag,.pill{border-color:#426a6d}
.pill{background:rgba(232,216,183,.12);color:var(--accent)}
.pill.staff{background:rgba(95,174,173,.16);color:#b9e7df}
.notice{border-left-color:var(--accent);background:rgba(95,174,173,.08)}
#message{background:#18363c;border-color:#426a6d;color:var(--text);box-shadow:0 12px 36px rgba(0,0,0,.25)}
.secret{background:#132f35;border-color:var(--line)}
footer{border-top-color:var(--line)}
.password-field{position:relative}
.password-field>input{padding-right:56px}
.password-toggle{position:absolute;right:5px;top:4px;display:grid;place-items:center;width:42px;min-height:39px;padding:8px;background:transparent;border:0;color:var(--muted);box-shadow:none}
.password-toggle:hover{background:rgba(95,174,173,.12);box-shadow:none;filter:none}
.password-toggle svg{width:21px;height:21px}
.remember-row{display:flex;align-items:flex-start;gap:10px;margin:17px 0 2px;color:var(--muted);font-size:13px;line-height:1.6;cursor:pointer}
.remember-row input{flex:none;width:18px;min-height:18px;margin:2px 0 0;accent-color:var(--sea)}
.remember-row span{display:block}
#session-actions .secondary{background:rgba(95,174,173,.12);border-color:#426a6d;color:#e4efea}
#session-actions .secondary:hover{background:rgba(95,174,173,.2)}

/* Quiet branded check screen shown while the browser session is inspected. */
body.booting header,body.booting footer{display:none}
body.login-screen footer{display:none}
body.login-screen header{min-height:76px;display:flex;align-items:center}
body.login-screen .brand,body .brand{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:20px;font-weight:800;letter-spacing:-.04em;color:var(--text);line-height:1}
body .brand span{color:var(--text)}
body .brand small{margin:2px 0 0;font-size:9px;font-weight:800;letter-spacing:.28em;color:#c7c7c7}
body.booting main#app.boot-screen{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center}
.boot-brand{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:clamp(38px,8vw,58px);font-weight:800;letter-spacing:-.065em;color:#f4f4f4;line-height:1}
.boot-brand span{color:#f4f4f4}
.boot-brand small{font-size:clamp(12px,2.5vw,15px);font-weight:750;letter-spacing:.34em;color:#d6d6d6;margin-left:.34em}
.boot-caption{margin:4px 0 0;color:#aaa;font-size:13px;letter-spacing:.02em}
.boot-spinner{width:17px;height:17px;margin-top:11px;border:2px solid #555;border-top-color:#f4f4f4;border-radius:50%;animation:boot-spin .8s linear infinite}
@keyframes boot-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.boot-spinner{animation:none}}

.brand small .brand-by{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}.boot-brand small .boot-by{font-size:clamp(9px,1.7vw,11px);font-weight:600;letter-spacing:0;text-transform:none;margin:0 0 0 8px;color:#b8cacc}